Feat: Add per-tool reset button and improve responsive layout for tool headers

Author: ptbsare

public/style.css

@@ -596,11 +596,13 @@ footer { /* Basic footer style */
 
     .tool-entry .tool-header .tool-enable-label,
     .tool-entry .tool-header h3,
-    .tool-entry .tool-header .tool-exposed-name {
+    .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 {
@@ -613,9 +615,17 @@ footer { /* Basic footer style */
     }
 
     .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 */
+    }
 }
 
 footer p {
@@ -629,4 +639,20 @@ footer a {
 
 footer a:hover {
     text-decoration: underline;
+}
+/* Styles for Per-Tool Reset Button */
+.reset-tool-overrides-button {
+    background-color: #6c757d; /* Secondary/neutral color */
+    border-color: #6c757d;
+    color: #fff;
+    padding: 0.2rem 0.5rem; /* Smaller padding */
+    font-size: 0.8em; /* Smaller font */
+    margin-left: 0.75rem; /* Space from the "Exposed As" text */
+    line-height: 1.4;
+    flex-shrink: 0; /* Prevent shrinking if header space is tight */
+}
+.reset-tool-overrides-button:hover {
+    background-color: #5a6268;
+    border-color: #545b62;
+    color: #fff;
 }

public/tools.js

@@ -124,6 +124,7 @@ function renderToolEntry(toolKey, toolDefinition, toolConfig, isConfigOnly = fal
             </label>
             <h3 title="${!isServerActive ? 'Server is inactive' : ''}">${toolKey}</h3>
             <span class="tool-exposed-name">Exposed As: ${exposedName}</span>
+            <button class="reset-tool-overrides-button" title="Reset all overrides for this tool to defaults">Reset</button>
         </div>
         <div class="tool-details">
             <div>
@@ -142,6 +143,36 @@ function renderToolEntry(toolKey, toolDefinition, toolConfig, isConfigOnly = fal
 
     toolListDiv.appendChild(entryDiv); // Append first, then query elements within it
 
+    // Add click listener to the new Reset button
+    const resetButton = entryDiv.querySelector('.reset-tool-overrides-button');
+    if (resetButton) {
+        resetButton.addEventListener('click', (e) => {
+            e.stopPropagation(); // Prevent a click on the button from also toggling collapse if it's in the header
+            if (confirm(`Are you sure you want to reset all overrides for tool "${toolKey}"?\nThis will remove any custom settings for its name, description, and enabled state from the configuration. You will need to save the tool configuration to make this permanent.`)) {
+                if (window.currentToolConfig && window.currentToolConfig.tools && window.currentToolConfig.tools[toolKey]) {
+                    delete window.currentToolConfig.tools[toolKey];
+                    console.log(`Overrides for tool ${toolKey} marked for deletion.`);
+                    // Mark main tool config as dirty (if such a flag exists, or rely on main save button's behavior)
+                    // To reflect changes immediately, re-render the tools list
+                    // This will pick up the deleted config for this toolKey and render it with defaults
+                    renderTools();
+                    // Optionally, provide a status message or highlight the main save button
+                    if (window.saveToolStatus) { // Ensure saveToolStatus is accessed via window or defined in this scope
+                        window.saveToolStatus.textContent = `Overrides for '${toolKey}' reset. Click "Save & Reload" to apply.`;
+                        window.saveToolStatus.style.color = 'orange';
+                        setTimeout(() => { if (window.saveToolStatus) window.saveToolStatus.textContent = ''; }, 5000);
+                    }
+                } else {
+                    // If the toolKey wasn't in currentToolConfig.tools, it means it was already using defaults.
+                    // However, the UI might show input values if the user typed them without saving.
+                    // Re-rendering will clear these UI-only changes.
+                    renderTools(); // Call renderTools to refresh the UI for this entry too
+                    alert(`Tool "${toolKey}" is already using default settings or has no saved overrides.`);
+                }
+            }
+        });
+    }
+
     // Add click listener to the header (h3) to toggle collapse
     const headerH3 = entryDiv.querySelector('.tool-header h3');
     if (headerH3) {