Refactor: Address UI feedback for Tools and Servers pages layout and comments

Author: ptbsare

config.yaml

@@ -1,5 +1,5 @@
 name: "MCP Proxy Server"
-version: "0.1.8"
+version: "0.1.9"
 slug: "mcp_proxy_server"
 description: "A central hub for Model Context Protocol (MCP) servers. Manages multiple backend MCP servers (Stdio/SSE), exposing their combined tools and resources via a unified SSE interface or as a Stdio server. Features Web UI for server/tool management, real-time installation monitoring, and optional web terminal."
 arch:
@@ -11,9 +11,11 @@ hassio_role: default
 homeassistant_api: false
 host_network: false
 map:
-  - "config:/mcp-proxy-server/config:rw" # App config (mcp_server.json etc.) in /mcp-proxy-server/config inside container, maps to HA's config dir for this addon
-  - "share:rw" # For TOOLS_FOLDER, maps to /share inside container
-  # - "ssl:ro"
+  - type: addon_config
+    read_only: False
+    path: /mcp-proxy-server/config  # App config (mcp_server.json etc.) in /mcp-proxy-server/config inside container, maps to HA's config dir for this addon
+  - type: share
+    read_only: False  # For TOOLS_FOLDER, maps to /share inside container
 ports:
   "3663/tcp": 3663
 ports_description:

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mcp-proxy-server",
-  "version": "0.1.8",
+  "version": "0.1.9",
   "author": "ptbsare",
   "license": "MIT",
   "description": "An MCP proxy server that aggregates and serves multiple MCP resource servers through a single interface with stdio/sse support",

public/servers.js

@@ -56,7 +56,11 @@ function renderServerEntry(key, serverConf, startExpanded = false) {
 
     const headerDiv = document.createElement('div');
     headerDiv.classList.add('server-header');
+    // Move Active checkbox to the header, at the beginning
     headerDiv.innerHTML = `
+        <label class="inline-label server-active-label" title="Activate/Deactivate Server">
+            <input type="checkbox" class="server-active-input" ${serverConf.active !== false ? 'checked' : ''}>
+        </label>
         <h3>${serverConf.name || key} (<span class="server-type">${type}</span>)</h3>
         <button class="delete-button">Delete</button>
     `;
@@ -65,15 +69,10 @@ function renderServerEntry(key, serverConf, startExpanded = false) {
     const detailsDiv = document.createElement('div');
     detailsDiv.classList.add('server-details');
 
+    // Remove Active checkbox from detailsHtml
     let detailsHtml = `
         <div><label>Server Key (Unique ID):</label><input type="text" class="server-key-input" value="${key}" required></div>
         <div><label>Display Name:</label><input type="text" class="server-name-input" value="${serverConf.name || ''}"></div>
-        <div>
-            <label class="inline-label">
-                <input type="checkbox" class="server-active-input" ${serverConf.active !== false ? 'checked' : ''}>
-                Active
-            </label>
-        </div>
     `;
 
     if (isSSE) {

public/style.css

@@ -214,40 +214,103 @@ button:disabled, .add-button:disabled {
     box-shadow: 0 1px 3px rgba(0,0,0,0.05);
 }
 
-.server-entry .server-header {
+/* Shared header styles for server and tool entries */
+.server-entry .server-header, .tool-entry .tool-header {
     display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 1rem; 
+    align-items: center; /* Key for vertical alignment of items in the row */
+    margin-bottom: 1rem;
+    /* justify-content: flex-start; /* Let items flow and use margins/flex-grow for spacing */
 }
 
-.server-entry .server-header h3 {
-    margin: 0; 
-    color: #007bff; 
+.server-entry .server-header h3, .tool-entry .tool-header h3 {
+    margin: 0;
+    color: #007bff;
     cursor: pointer;
-    flex-grow: 1; 
-    padding-right: 1rem; 
+    flex-grow: 1; /* Allow h3 to take available space */
+    padding-right: 1rem; /* Space after h3, before next inline element */
 }
-.server-entry .server-header h3:hover {
+.server-entry .server-header h3:hover, .tool-entry .tool-header h3:hover {
     text-decoration: underline;
 }
 
-.server-entry .server-details {
-    padding-left: 1rem; 
+/* Style for the "Active" checkbox label in server header */
+.server-entry .server-header .server-active-label {
+    margin-right: 0.75rem; /* Space after checkbox, before H3 */
+    display: inline-flex;
+    align-items: center; /* Align items within the label itself */
+}
+.server-entry .server-header .server-active-label input[type="checkbox"] {
+    margin: 0;
+    vertical-align: middle; /* Helps align checkbox with potential (now removed) text in label */
+}
+
+
+/* Specific to tool header for additional elements */
+.tool-entry .tool-header {
+    /* display: flex; align-items: center; are shared */
+    flex-wrap: wrap; /* Allow items to wrap to the next line if space is insufficient */
+}
+
+.tool-entry .tool-header .tool-exposed-name {
+    font-size: 0.85em;
+    color: #6c757d;
+    margin-left: 0.5rem; /* Space after H3 */
+    white-space: normal; /* Allow long text to wrap */
+    /* margin-right: auto; /* Remove this, as there's no element to push to the far right anymore */
+    /* Adding a small flex-shrink to allow it to shrink if needed, but h3 should grow more */
+    flex-shrink: 1;
+}
+
+/* Style for the "Enabled" checkbox label in tool header (now at the start) */
+.tool-entry .tool-header .tool-enable-label {
+    margin-right: 0.75rem; /* Space after checkbox, before H3 */
+    display: inline-flex;
+    align-items: center;
+}
+.tool-entry .tool-header .tool-enable-label input[type="checkbox"] {
+    margin: 0;
+    vertical-align: middle; /* Consistent vertical alignment */
+}
+
+/* Styles for server header (mostly covered by shared now) */
+.server-entry .server-header {
+     /* display: flex; align-items: center; are shared */
+     /* justify-content: flex-start; /* Let items flow */
+}
+
+/* Delete button specific styling if needed, assuming it's the last element */
+.server-entry .server-header .delete-button {
+    margin-left: auto; /* Push delete button to the far right */
+    flex-shrink: 0; /* Prevent delete button from shrinking */
+}
+
+
+/* Shared details styles for server and tool entries */
+.server-entry .server-details, .tool-entry .tool-details {
+    padding-left: 1rem;
     border-left: 2px solid #e9ecef;
-    transition: max-height 0.3s ease-out, opacity 0.3s ease-out; 
-    overflow: hidden; 
-    max-height: 2000px; 
+    transition: max-height 0.3s ease-out, opacity 0.3s ease-out, margin-top 0.3s ease-out, padding-top 0.3s ease-out, padding-bottom 0.3s ease-out;
+    overflow: hidden;
+    max-height: 2000px; /* Arbitrary large number for expanded state */
     opacity: 1;
+    margin-top: 1rem; /* Add some space when expanded */
+    padding-top: 1rem; /* Add padding when expanded */
+    padding-bottom: 1rem; /* Add padding when expanded */
 }
 
-.server-entry.collapsed .server-details {
-    max-height: 0; 
+.server-entry.collapsed .server-details, .tool-entry.collapsed .tool-details {
+    max-height: 0;
     opacity: 0;
-    padding-left: 1rem; 
-    border-left: 2px solid #e9ecef; 
-    margin-top: 0; 
-    overflow: hidden;
+    margin-top: 0;
+    padding-top: 0;
+    padding-bottom: 0;
+    border-left-width: 0; /* Hide border when collapsed for compactness */
+    padding-left: 0; /* Remove padding when collapsed */
+}
+
+/* Reduce bottom margin of header when entry is collapsed for compactness */
+.server-entry.collapsed .server-header, .tool-entry.collapsed .tool-header {
+    margin-bottom: 0;
 }
 
 .server-entry label, .tool-entry label {

public/tools.js

@@ -66,7 +66,7 @@ function renderTools() {
 
     // Render discovered tools first, merging with config
     discoveredTools.forEach(tool => {
-        const toolKey = `${tool.server_name}--${tool.name}`; // Unique key
+        const toolKey = `${tool.serverName}--${tool.name}`; // Unique key
         const config = currentToolConfig.tools[toolKey] || {}; // Get config or empty object
         renderToolEntry(toolKey, tool, config);
         configuredToolKeys.delete(toolKey); // Remove from set as it's handled
@@ -89,61 +89,133 @@ function renderToolEntry(toolKey, toolDefinition, toolConfig, isConfigOnly = fal
     if (!toolListDiv) return; // Guard
     const entryDiv = document.createElement('div');
     entryDiv.classList.add('tool-entry');
-    entryDiv.dataset.toolKey = toolKey;
+    entryDiv.classList.add('collapsed'); // Add collapsed class by default
+    entryDiv.dataset.toolKey = toolKey; // Store the original key
+
+    // Determine the name and description exposed to the model
+    const exposedName = toolConfig.exposedName || toolKey;
+    const exposedDescription = toolConfig.exposedDescription || toolDefinition?.description || ''; // Use override, fallback to original, then empty string
+
+    // Get potential overrides from config for UI input fields
+    const exposedNameOverride = toolConfig.exposedName || '';
+    const exposedDescriptionOverride = toolConfig.exposedDescription || '';
 
-    const displayName = toolConfig.displayName || (toolDefinition ? `${toolDefinition.server_name} / ${toolDefinition.name}` : toolKey);
-    const description = toolConfig.description || toolDefinition?.description || (isConfigOnly ? 'Description not available (tool not discovered)' : 'No description provided.');
     const isEnabled = toolConfig.enabled !== false; // Enabled by default
+    const originalDescription = toolDefinition?.description || 'N/A'; // Original description for display
 
     entryDiv.innerHTML = `
         <div class="tool-header">
-            <h3>${displayName}</h3>
-            <span class="tool-key">(${toolKey})</span>
-            <label class="inline-label tool-enable-toggle">
+            <label class="inline-label tool-enable-label" title="Enable/Disable Tool">
                 <input type="checkbox" class="tool-enabled-input" ${isEnabled ? 'checked' : ''}>
-                Enabled
             </label>
+            <h3>${toolKey}</h3>
+            <span class="tool-exposed-name">Exposed As: ${exposedName}</span>
         </div>
         <div class="tool-details">
-            <div><label>Display Name Override:</label><input type="text" class="tool-displayname-input" value="${toolConfig.displayName || ''}" placeholder="Optional: Override default name"></div>
-            <div><label>Description Override:</label><textarea class="tool-description-input" placeholder="Optional: Override default description">${toolConfig.description || ''}</textarea></div>
-            <p class="tool-original-description">Original Description: ${toolDefinition?.description || 'N/A'}</p>
+            <div>
+                <label>Exposed Tool Name Override (Optional):</label>
+                <input type="text" class="tool-exposedname-input" value="${exposedNameOverride}" placeholder="Default: ${toolKey}">
+                <small>Overrides the name exposed to AI models. Must be unique and contain only letters, numbers, _, - (not starting with a number).</small>
+            </div>
+            <div>
+                <label>Exposed Description Override (Optional):</label>
+                <textarea class="tool-exposeddescription-input" placeholder="Default: (Original Description below)">${exposedDescriptionOverride}</textarea>
+            </div>
+            <p class="tool-original-description">Original Description: ${originalDescription}</p>
             ${isConfigOnly ? '<p class="warning-message">This tool was configured but not discovered by any active server.</p>' : ''}
         </div>
     `;
 
-    toolListDiv.appendChild(entryDiv);
+    toolListDiv.appendChild(entryDiv); // Append first, then query elements within it
+
+    // Add click listener to the header (h3) to toggle collapse
+    const headerH3 = entryDiv.querySelector('.tool-header h3');
+    if (headerH3) {
+        headerH3.style.cursor = 'pointer'; // Indicate it's clickable
+        headerH3.addEventListener('click', () => {
+            entryDiv.classList.toggle('collapsed');
+        });
+    }
 }
 
 function initializeToolSaveListener() {
     if (!saveToolConfigButton || !toolListDiv || !saveToolStatus) return; // Guard
 
+    // Regex for validating exposed tool name override
+    const validToolNameRegex = /^[a-zA-Z_][a-zA-Z0-9_-]*$/;
+
     saveToolConfigButton.addEventListener('click', async () => {
-        saveToolStatus.textContent = 'Saving tool configuration...';
+        saveToolStatus.textContent = 'Validating and saving tool configuration...';
         saveToolStatus.style.color = 'orange';
         const newToolConfig = { tools: {} };
         const entries = toolListDiv.querySelectorAll('.tool-entry');
+        let isValid = true;
+        let errorMsg = '';
+        const exposedNames = new Set(); // To check for duplicates
 
         entries.forEach(entryDiv => {
-            const toolKey = entryDiv.dataset.toolKey;
+            if (!isValid) return; // Stop processing if an error occurred
+
+            const toolKey = entryDiv.dataset.toolKey; // Original key
             const enabledInput = entryDiv.querySelector('.tool-enabled-input');
-            const displayNameInput = entryDiv.querySelector('.tool-displayname-input');
-            const descriptionInput = entryDiv.querySelector('.tool-description-input');
+            const exposedNameInput = entryDiv.querySelector('.tool-exposedname-input');
+            const exposedDescriptionInput = entryDiv.querySelector('.tool-exposeddescription-input');
+
+            const exposedNameOverride = exposedNameInput.value.trim();
+            const exposedDescriptionOverride = exposedDescriptionInput.value.trim();
+            const isEnabled = enabledInput.checked;
+
+            const finalExposedName = exposedNameOverride || toolKey; // Use override or fallback to original key
+
+            // --- Validation ---
+            // 1. Validate format of the override (if provided)
+            if (exposedNameOverride && !validToolNameRegex.test(exposedNameOverride)) {
+                isValid = false;
+                errorMsg = `Invalid format for Exposed Tool Name Override "${exposedNameOverride}" for tool "${toolKey}". Use letters, numbers, _, - (cannot start with number).`;
+                exposedNameInput.style.border = '1px solid red';
+                return;
+            } else {
+                 exposedNameInput.style.border = ''; // Reset border on valid or empty
+            }
+
+            // 2. Check for duplicate exposed names (considering overrides)
+            if (exposedNames.has(finalExposedName)) {
+                isValid = false;
+                errorMsg = `Duplicate Exposed Tool Name: "${finalExposedName}". Please ensure all exposed names (including overrides) are unique.`;
+                // Highlight the input that caused the duplicate
+                exposedNameInput.style.border = '1px solid red';
+                // Optionally, find and highlight the previous entry with the same name
+                return;
+            }
+            exposedNames.add(finalExposedName);
+            // --- End Validation ---
+
 
             const configData = {
-                enabled: enabledInput.checked,
-                displayName: displayNameInput.value.trim() || undefined, // Store undefined if empty
-                description: descriptionInput.value.trim() || undefined, // Store undefined if empty
+                enabled: isEnabled,
+                // Only store overrides if they are actually set
+                exposedName: exposedNameOverride || undefined,
+                exposedDescription: exposedDescriptionOverride || undefined,
             };
 
             // Only store config if it differs from default (enabled=true, no overrides)
-            // Or if it's explicitly disabled
-            if (configData.enabled === false || configData.displayName || configData.description) {
+            // Or if it's explicitly disabled, or if overrides are set
+            if (configData.enabled === false || configData.exposedName || configData.exposedDescription) {
                  newToolConfig.tools[toolKey] = configData;
             }
         });
 
+        // If validation failed, show error and stop
+        if (!isValid) {
+            saveToolStatus.textContent = `Error: ${errorMsg}`;
+            saveToolStatus.style.color = 'red';
+            setTimeout(() => { if(saveToolStatus) saveToolStatus.textContent = ''; saveToolStatus.style.color = 'green'; }, 7000);
+            return;
+        }
+
+        // Proceed to save if valid
         try {
+            saveToolStatus.textContent = 'Saving tool configuration...'; // Update status after validation
             const response = await fetch('/admin/tools/config', {
                 method: 'POST',
                 headers: { 'Content-Type': 'application/json' },

src/config.ts

@@ -28,6 +28,8 @@ export interface Config {
 
 export interface ToolSettings {
   enabled: boolean;
+  exposedName?: string;
+  exposedDescription?: string;
 }
 
 export interface ToolConfig {