Feat: Visual cue for tools of inactive servers and UI tweaks

Author: ptbsare

public/style.css

@@ -272,6 +272,18 @@ button:disabled, .add-button:disabled {
     vertical-align: middle; /* Consistent vertical alignment */
 }
 
+/* Styles for tools belonging to an inactive server */
+.tool-entry.tool-server-inactive .tool-header h3,
+.tool-entry.tool-server-inactive .tool-header .tool-exposed-name {
+    color: #999; /* Gray out the text */
+    cursor: not-allowed; /* Indicate non-interactivity */
+}
+.tool-entry.tool-server-inactive .tool-header .tool-enable-label {
+    opacity: 0.6; /* Dim the checkbox label slightly */
+    cursor: not-allowed;
+}
+
+
 /* Styles for server header (mostly covered by shared now) */
 .server-entry .server-header {
      /* display: flex; align-items: center; are shared */
@@ -575,6 +587,37 @@ footer { /* Basic footer style */
     margin-top: 2rem; /* Space above footer */
 }
 
+/* Responsive adjustments for Tool Header on narrow screens */
+@media screen and (max-width: 768px) {
+    .tool-entry .tool-header {
+        flex-direction: column; /* Stack items vertically */
+        align-items: flex-start; /* Align items to the left */
+    }
+
+    .tool-entry .tool-header .tool-enable-label,
+    .tool-entry .tool-header h3,
+    .tool-entry .tool-header .tool-exposed-name {
+        width: 100%; /* Make each item take full width in column layout */
+        margin-left: 0;
+        margin-right: 0;
+        padding-right: 0; /* Reset padding that was for row layout */
+    }
+
+    .tool-entry .tool-header .tool-enable-label {
+        margin-bottom: 0.5rem; /* Space below checkbox label */
+    }
+    
+    .tool-entry .tool-header h3 {
+        margin-bottom: 0.25rem; /* Space below H3 */
+        /* flex-grow: 0; /* Not strictly necessary in column, but good for clarity */
+    }
+    
+    .tool-entry .tool-header .tool-exposed-name {
+        /* font-size can remain as is or be adjusted if needed */
+        /* margin-left was reset above */
+    }
+}
+
 footer p {
     margin: 0.25rem 0;
 }

public/tools.js

@@ -68,28 +68,42 @@ function renderTools() {
     discoveredTools.forEach(tool => {
         const toolKey = `${tool.serverName}--${tool.name}`; // Unique key
         const config = currentToolConfig.tools[toolKey] || {}; // Get config or empty object
-        renderToolEntry(toolKey, tool, config);
+        // For discovered tools, their server is considered active by the proxy at connection time
+        renderToolEntry(toolKey, tool, config, false, true); // isConfigOnly = false, isServerActive = true
         configuredToolKeys.delete(toolKey); // Remove from set as it's handled
     });
 
-    // Render any remaining configured tools that were not discovered (maybe disabled server?)
+    // Render any remaining configured tools that were not discovered
     configuredToolKeys.forEach(toolKey => {
-         console.warn(`Rendering configured tool "${toolKey}" which was not discovered (server might be inactive).`);
          const config = currentToolConfig.tools[toolKey];
+         const serverKeyForConfigOnlyTool = toolKey.split('--')[0];
+         let isServerActiveForConfigOnlyTool = true; // Default to true if server config not found or active flag is missing/true
+
+         if (window.currentServerConfig && window.currentServerConfig.mcpServers && window.currentServerConfig.mcpServers[serverKeyForConfigOnlyTool]) {
+             const serverConf = window.currentServerConfig.mcpServers[serverKeyForConfigOnlyTool];
+             if (serverConf.active === false || String(serverConf.active).toLowerCase() === 'false') {
+                 isServerActiveForConfigOnlyTool = false;
+             }
+         }
+         console.warn(`Rendering configured tool "${toolKey}" which was not discovered. Associated server active status: ${isServerActiveForConfigOnlyTool}`);
          // We don't have the full tool definition here, just render based on config
-         renderToolEntry(toolKey, null, config, true); // Pass flag indicating it's config-only
+         renderToolEntry(toolKey, null, config, true, isServerActiveForConfigOnlyTool); // Pass isConfigOnly and determined server active status
     });
 
      if (toolListDiv.innerHTML === '') {
          toolListDiv.innerHTML = '<p>No tools discovered or configured.</p>';
      }
 }
 
-function renderToolEntry(toolKey, toolDefinition, toolConfig, isConfigOnly = false) {
+function renderToolEntry(toolKey, toolDefinition, toolConfig, isConfigOnly = false, isServerActive = true) { // Added isServerActive
     if (!toolListDiv) return; // Guard
     const entryDiv = document.createElement('div');
     entryDiv.classList.add('tool-entry');
     entryDiv.classList.add('collapsed'); // Add collapsed class by default
+    if (!isServerActive) {
+        entryDiv.classList.add('tool-server-inactive');
+        entryDiv.title = 'This tool belongs to an inactive server. Enabling it will have no effect.';
+    }
     entryDiv.dataset.toolKey = toolKey; // Store the original key
 
     // Determine the name and description exposed to the model
@@ -106,9 +120,9 @@ function renderToolEntry(toolKey, toolDefinition, toolConfig, isConfigOnly = fal
     entryDiv.innerHTML = `
         <div class="tool-header">
             <label class="inline-label tool-enable-label" title="Enable/Disable Tool">
-                <input type="checkbox" class="tool-enabled-input" ${isEnabled ? 'checked' : ''}>
+                <input type="checkbox" class="tool-enabled-input" ${isEnabled ? 'checked' : ''} ${!isServerActive ? 'disabled' : ''}>
             </label>
-            <h3>${toolKey}</h3>
+            <h3 title="${!isServerActive ? 'Server is inactive' : ''}">${toolKey}</h3>
             <span class="tool-exposed-name">Exposed As: ${exposedName}</span>
         </div>
         <div class="tool-details">