Fix: Adjust tool page button layout and fix CSS/HTML issues

Author: ptbsare

config.yaml

@@ -1,5 +1,5 @@
 name: "MCP Proxy Server"
-version: "0.1.9"
+version: "0.1.10"
 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:

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mcp-proxy-server",
-  "version": "0.1.9",
+  "version": "0.1.10",
   "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/index.html

@@ -60,7 +60,10 @@ <h2>Tool Configuration</h2>
                  <p>Loading tools...</p>
              </div>
              <hr>
-             <button id="save-tool-config-button">Save & Reload Tool Configuration</button>
+             <div class="tool-actions-footer"> <!-- New wrapper div -->
+                <button id="save-tool-config-button">Save & Reload Tool Configuration</button> <!-- Save button first for left alignment -->
+                <button id="reset-all-tool-overrides-button" class="cleanup-button" title="Clear all tool-specific configurations (overrides and enabled/disabled states)">Reset All Tool Overrides</button>
+             </div>
              <p id="save-tool-status" class="status-message"></p>
         </div>
 

public/script.js

@@ -225,6 +225,9 @@ const handleLoginSuccess = async () => {
      if (typeof initializeToolSaveListener === 'function') {
         initializeToolSaveListener();
     } else { console.error("initializeToolSaveListener function not found."); }
+    if (typeof window.initializeResetAllToolOverridesListener === 'function') { // Call the new initializer
+        window.initializeResetAllToolOverridesListener();
+    } else { console.error("initializeResetAllToolOverridesListener function not found on window."); }
 };
 
 const handleLogoutSuccess = () => {

public/style.css

@@ -219,7 +219,7 @@ button:disabled, .add-button:disabled {
     display: flex;
     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 */
+    /* justify-content: flex-start; Let items flow and use margins/flex-grow for spacing */
 }
 
 .server-entry .server-header h3, .tool-entry .tool-header h3 {
@@ -256,7 +256,7 @@ button:disabled, .add-button:disabled {
     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 */
+    /* 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;
 }
@@ -284,12 +284,6 @@ button:disabled, .add-button:disabled {
 }
 
 
-/* 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 */
@@ -391,16 +385,113 @@ button:disabled, .add-button:disabled {
     background-color: #e67312;
     border-color: #d96c10;
 }
-.reload-button:disabled { 
-    background-color: #ffc99c; 
+.reload-button:disabled {
+    background-color: #ffc99c;
     border-color: #ffc99c;
 }
 
+.cleanup-button { /* Styles for Reset All Tool Overrides and similar buttons */
+    background-color: #ffc107; /* Yellow/Orange for warning/cleanup actions */
+    border-color: #ffc107;
+    color: #212529; /* Dark text for better contrast on yellow */
+}
+.cleanup-button:hover {
+    background-color: #e0a800;
+    border-color: #d39e00;
+    color: #212529;
+}
+.cleanup-button:focus {
+    outline: 0;
+    box-shadow: 0 0 0 0.2rem rgba(224, 168, 0, 0.5); /* Adjusted shadow color */
+}
+
+
 hr {
     margin: 20px 0;
     border: 0;
     border-top: 1px solid #eee;
 }
+
+/* Styles for the footer button container in Tools section */
+.tool-actions-footer {
+    display: flex;
+    justify-content: space-between; /* Pushes first item (save) to left, last item (reset) to right */
+    align-items: center;
+    margin-top: 1rem; /* Space above the button row */
+    flex-wrap: wrap; /* Allow buttons to wrap on very narrow screens if needed, before media query kicks in */
+}
+
+.tool-actions-footer button {
+    margin-top: 0.5rem; /* Keep consistent top margin for buttons */
+    /* margin-right: 0; Remove default right margin from generic button if it interferes with space-between */
+    /* The default button style has margin-right: 0.5rem. For space-between, this is usually fine. */
+    /* If only two buttons, the space-between will handle it. If more, this might need adjustment. */
+}
+
+/* Ensure the cleanup button (Reset All) doesn't have excessive left margin from generic button style if it's the rightmost */
+/* Note: Specific styles for .cleanup-button within .tool-actions-footer were previously here but removed as they were empty or handled by parent layout. */
+
+/* Ensure the save button (first child) doesn't have excessive right margin from generic button style */
+
+
+/* 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,
+    .tool-entry .tool-header .reset-tool-overrides-button { /* Added reset button here */
+        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 */
+        box-sizing: border-box; /* Ensure padding/border don't add to width */
+    }
+
+    .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 {
+        margin-bottom: 0.5rem; /* Space below "Exposed As" text before reset button */
+        /* font-size can remain as is or be adjusted if needed */
+        /* margin-left was reset above */
+    }
+
+    .tool-entry .tool-header .reset-tool-overrides-button {
+        /* width: auto; Allow button to size to its content, but still be left-aligned due to align-items: flex-start on parent */
+        /* align-self: flex-start; Explicitly align left if width is auto */
+        /* No margin-bottom needed if it's the last item in the stacked header before details */
+        margin-top: 0.25rem; /* Add a little space if it stacks below exposed-name */
+    }
+
+    /* Responsive adjustments for the new .tool-actions-footer */
+    .tool-actions-footer {
+        flex-direction: column;
+        align-items: stretch; /* Make buttons full width */
+    }
+    .tool-actions-footer button {
+        width: 100%;
+        margin-right: 0; /* Remove right margin when stacked */
+    }
+    .tool-actions-footer button:not(:last-child) {
+        margin-bottom: 1.5rem; /* Increased bottom margin for better spacing when stacked */
+    }
+}
+
+
+footer p {
+    margin: 0.25rem 0;
+}
 .env-vars-container {
     margin-top: 5px;
     margin-bottom: 10px;

public/tools.js

@@ -302,4 +302,39 @@ window.renderTools = renderTools; // Might not be needed globally
 window.renderToolEntry = renderToolEntry; // Might not be needed globally
 window.initializeToolSaveListener = initializeToolSaveListener; // To be called from main script
 
-console.log("tools.js loaded");
+console.log("tools.js loaded");
+// --- Logic for Reset All Tool Overrides button ---
+function initializeResetAllToolOverridesListener() {
+    const resetButton = document.getElementById('reset-all-tool-overrides-button');
+    // Ensure saveToolStatus is available, it's declared in script.js and expected to be global or on window
+    const localSaveToolStatus = window.saveToolStatus || document.getElementById('save-tool-status'); 
+
+    if (!resetButton) {
+        console.warn("Reset All Tool Overrides button not found in DOM.");
+        return;
+    }
+
+    resetButton.addEventListener('click', async () => {
+        if (confirm("Are you sure you want to reset ALL tool overrides?\nThis will clear any custom names, descriptions, and enabled/disabled states for all tools, reverting them to their defaults. You will need to click 'Save & Reload Tool Configuration' to make this permanent.")) {
+            if (window.currentToolConfig) {
+                window.currentToolConfig.tools = {}; // Clear all tool-specific configurations
+                console.log("All tool overrides marked for deletion.");
+                
+                renderTools(); // Re-render the tools list to reflect the reset state
+
+                if (localSaveToolStatus) {
+                    localSaveToolStatus.textContent = 'All tool overrides have been reset. Click "Save & Reload" to apply.';
+                    localSaveToolStatus.style.color = 'orange';
+                    setTimeout(() => { if (localSaveToolStatus) localSaveToolStatus.textContent = ''; }, 7000);
+                }
+                // Consider adding a global dirty flag if not already handled by the main save logic
+                // e.g., window.isToolConfigDirty = true; 
+            } else {
+                alert("Tool configuration not loaded yet. Please wait or try reloading.");
+            }
+        }
+    });
+}
+
+// Expose the new initializer to be called from script.js
+window.initializeResetAllToolOverridesListener = initializeResetAllToolOverridesListener;