imcp 0.0.19 → 0.1.2

package/dist/web/public/js/modal/messageQueue.js

@@ -1,112 +1,56 @@
-/** @type {boolean} Flag indicating if a message is currently being appended */
-let isAppending = false;
+// This file previously handled a message queue for the loading modal.
+// With the new design in loadingModal.js, which directly manipulates its content
+// for overall status and step details, this queueing mechanism for individual
+// step messages is no longer the primary way messages are displayed.
+// The loadingModal.js now has `updateOverallInstallStatus` and `addInstallationStep`.
 
-/** @type {boolean} Flag indicating if completion UI update is pending */
-let completionPending = false;
-
-/**
- * Message queue for delayed loading modal updates.
- * @type {Array<{msg: string, isCompletion: boolean}>}
- */
-let messageQueue = [];
-
-/**
- * Process messages in the queue with a delay between each message.
- * When the queue is empty and completion is pending, triggers the completion UI.
- * @private
- */
-function processMessageQueue() {
-    if (isAppending || messageQueue.length === 0) {
-        // Only update completion UI if all messages have been displayed
-        if (messageQueue.length === 0 && completionPending) {
-            // Add small delay before showing completion to ensure last message is visible
-            setTimeout(() => {
-                updateCompletionUI();
-                completionPending = false;
-            }, 500);
-        }
-        return;
-    }
-
-    isAppending = true;
-    const { msg, isCompletion } = messageQueue.shift();
-
-    if (isCompletion) {
-        completionPending = true;
-    }
-
-    appendInstallLoadingMessage(msg);
+// The `updateCompletionUI` function might still be relevant if we want to
+// change the overall modal's appearance (e.g., title, main icon) upon final completion,
+// separate from the step-by-step updates.
 
-    setTimeout(() => {
-        isAppending = false;
-        processMessageQueue();
-    }, 1000);
-}
+/** @type {boolean} Flag indicating if completion UI update is pending */
+let completionPending = false; // This might still be useful for a final "Completed" state change of the modal itself.
 
 /**
- * Queue a message to be displayed with a delay.
- * Messages are displayed sequentially with a 1-second delay between each.
- * @param {string} msg The message to display
- * @param {boolean} [isCompletion=false] If true, triggers completion UI after message display
+ * This function could be called by `installation.js` once polling determines
+ * the absolute final state (e.g., after all messages are processed by `loadingModal.js`
+ * and a small delay).
+ * @param {'completed' | 'failed'} finalState
  */
-export function delayedAppendInstallLoadingMessage(msg, isCompletion = false) {
-    messageQueue.push({ msg, isCompletion });
-    processMessageQueue();
+export function triggerFinalModalStateUpdate(finalState) {
+    // This function is a placeholder for now.
+    // The actual update of the overall status icon and text is now handled by
+    // `updateOverallInstallStatus` in `loadingModal.js`.
+    // If there's a need for a *separate* final transformation of the modal
+    // (e.g. changing the main title, showing a global success/fail icon not tied to overallStatusTextEl),
+    // that logic would go here or be triggered from here.
+
+    // For now, let's assume `updateOverallInstallStatus` covers the visual needs.
+    // If `updateCompletionUI` was doing something unique beyond what `updateOverallInstallStatus` does,
+    // we could call it here.
+    console.log(`[MessageQueue] Triggering final modal state: ${finalState}`);
+    // if (finalState === 'completed') {
+    //     updateCompletionUI(); // If this has distinct visual changes for the modal wrapper itself.
+    // }
 }
 
-function updateCompletionUI() {
-    const loadingTitle = document.querySelector('.loading-title');
-    const loadingIcon = document.querySelector('.loading-icon');
-
-    if (loadingTitle) {
-        loadingTitle.textContent = 'Completed';
-        loadingTitle.classList.add('completed');
-    }
-
-    if (loadingIcon) {
-        loadingIcon.innerHTML = `
-            <svg width="48" height="48" viewBox="0 0 48 48" fill="none">
-                <circle cx="24" cy="24" r="20" stroke="#059669" stroke-width="4"/>
-                <path d="M16 24l6 6 12-12" stroke="#059669" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
-            </svg>
-        `;
-        loadingIcon.classList.add('completed');
-    }
-}
-
-/**
- * Internal function to append a message to the loading modal with formatting.
- * @private
- * @param {string} message - The message to append
- */
-function appendInstallLoadingMessage(message) {
-    const loadingMsg = document.getElementById('installLoadingMessage');
-    if (loadingMsg) {
-        // Split message on newlines
-        const lines = message.split('\n');
-
-        lines.forEach(line => {
-            // Check if line contains an error
-            const isError = line.toLowerCase().includes('error') ||
-                line.toLowerCase().includes('failed') ||
-                line.toLowerCase().includes('timeout');
 
-            const formattedMessage = line;
+// function updateCompletionUI() {
+//     // This function's original content might be merged into updateOverallInstallStatus
+//     // or called if a distinct "modal completed" visual state is needed beyond the text/icon.
+//     const loadingTitle = document.querySelector('.loading-title'); // This element might not exist with new structure
+//     const loadingIcon = document.querySelector('.loading-icon'); // This element might not exist
 
-            // Create message container
-            const messageDiv = document.createElement('div');
-            messageDiv.className = 'message-line';
+//     if (loadingTitle) {
+//         loadingTitle.textContent = 'Completed';
+//         loadingTitle.classList.add('completed');
+//     }
 
-            // Apply yellow color for error messages
-            if (isError) {
-                messageDiv.style.color = '#f59e0b';
-            }
-            messageDiv.innerHTML = formattedMessage;
+//     if (loadingIcon) {
+//         // The main overall status icon is now handled by updateOverallInstallStatus
+//     }
+// }
 
-            loadingMsg.appendChild(messageDiv);
-            loadingMsg.scrollTop = loadingMsg.scrollHeight;
-        });
-    } else {
-        console.error('[LoadingModal] Element not found: installLoadingMessage');
-    }
-}
+// The old delayedAppendInstallLoadingMessage and appendInstallLoadingMessage are removed
+// as step messages are now directly added by loadingModal.js->addInstallationStep
+// and overall status by loadingModal.js->updateOverallInstallStatus.

package/dist/web/public/js/modal/modalSetup.js

@@ -1,6 +1,6 @@
 import { showToast, showConfirm } from '../notifications.js';
-import { showInstallLoadingModal } from './loadingModal.js';
-import { delayedAppendInstallLoadingMessage } from './messageQueue.js';
+import { showInstallLoadingModal, updateOverallInstallStatus } from './loadingModal.js';
+// import { delayedAppendInstallLoadingMessage } from './messageQueue.js'; // No longer used
 import { uninstallTools } from './installation.js';
 import { handleBulkClientInstall } from './installation.js';
 import { compareVersions } from './versionUtils.js';
@@ -56,17 +56,31 @@ export function setupEnvironmentVariables(mcpServer, envInputsDiv, targetData) {
     const envRequirements = mcpServer.installation?.['env'] || mcpServer.installation?.env || {};
     addEnvironmentTitle(envInputsDiv);
 
-    if (Object.keys(envRequirements).length === 0) {
-        addNoEnvMessage(envInputsDiv);
-    } else {
-        createEnvironmentInputs(envRequirements, envInputsDiv, targetData.clientMcpSettings, mcpServer.name);
-    }
+    // Fetch system settings to get userConfigurations for env defaults
+    fetch('/api/settings')
+        .then(response => response.json())
+        .then(data => {
+            const userConfigurations = (data && data.data && data.data.userConfigurations) ? data.data.userConfigurations : {};
+            if (Object.keys(envRequirements).length === 0) {
+                addNoEnvMessage(envInputsDiv);
+            } else {
+                createEnvironmentInputs(envRequirements, envInputsDiv, targetData.clientMcpSettings, mcpServer.name, userConfigurations);
+            }
+        })
+        .catch(() => {
+            // fallback to old logic if fetch fails
+            if (Object.keys(envRequirements).length === 0) {
+                addNoEnvMessage(envInputsDiv);
+            } else {
+                createEnvironmentInputs(envRequirements, envInputsDiv, targetData.clientMcpSettings, mcpServer.name, {});
+            }
+        });
 }
 
 /**
  * Set up installation arguments section in the modal
  */
-export function setupInstallationArguments(installation, modalArguments, mcpServer) {
+export function setupInstallationArguments(installation, modalArguments, categoryName, mcpServer) {
     // For SSE mode, don't show arguments section at all
     if (mcpServer?.mode === 'sse') {
         modalArguments.style.display = 'none';
@@ -88,7 +102,7 @@ export function setupInstallationArguments(installation, modalArguments, mcpServ
     }
 
     if (installation.command === 'python' || installation.command.includes('python')) {
-        addPythonEnvironmentInput(modalArguments);
+        addPythonEnvironmentInput(categoryName, mcpServer.name, modalArguments);
     }
 }
 
@@ -157,36 +171,90 @@ export function setupFormSubmitHandler(form, envInputsDiv, modalArguments, modal
             });
         }
 
-        const hasRequirementsToUpdate = requirementsToUpdate.length > 0;
+        // Only POST userConfigurations and/or pythonEnvs if there is a difference, then proceed with install
+        fetch('/api/settings')
+            .then(response => response.json())
+            .then(data => {
+                const userConfigurations = (data && data.data && data.data.userConfigurations) ? data.data.userConfigurations : {};
+                const pythonEnvs = (data && data.data && data.data.pythonEnvs) ? data.data.pythonEnvs : {};
+                const updatedUserConfigurations = { ...userConfigurations };
+                const updatedPythonEnvs = { ...pythonEnvs };
+
+                Object.keys(envVars).forEach(key => {
+                    updatedUserConfigurations[key] = envVars[key];
+                });
 
-        const uninstallBtn = document.querySelector('.uninstall-btn');
-        if (!uninstallBtn || !uninstallBtn.matches(':active')) {
-            const selectedTargets = window.selectedClients;
-            if (selectedTargets.length === 0 && !hasRequirementsToUpdate) {
-                showToast('Please select at least one client to configure.', 'error');
-                return;
-            }
+                // Check for userConfigurations difference
+                let needsUserConfigUpdate = false;
+                const allUserConfigKeys = new Set([...Object.keys(userConfigurations), ...Object.keys(envVars)]);
+                for (const key of allUserConfigKeys) {
+                    if (userConfigurations[key] !== updatedUserConfigurations[key]) {
+                        needsUserConfigUpdate = true;
+                        break;
+                    }
+                }
 
-            let installingMessage = "Starting installation...";
-            const serverStatus = serverStatuses[serverName] || { installedStatus: {} };
-            if (selectedTargets.length > 0) {
-                const target = selectedTargets[0];
-                const msg = serverStatus.installedStatus?.[target]?.message;
-                if (msg) installingMessage = msg;
-            }
+                // Check for pythonEnvs difference
+                let needsPythonEnvUpdate = false;
+                if (pythonEnv !== undefined && pythonEnv !== pythonEnvs[`${categoryName}:${serverName}`]) {
+                    updatedPythonEnvs[`${categoryName}:${serverName}`] = pythonEnv;
+                    needsPythonEnvUpdate = true;
+                }
 
-            const serverInstallOptions = {
-                targetClients: selectedTargets,
-                env: envVars,
-                args: args,
-                settings: pythonEnv ? { pythonEnv: pythonEnv } : {}
-            };
+                // If either needs update, POST the merged object
+                if (needsUserConfigUpdate || needsPythonEnvUpdate) {
+                    const postBody = {};
+                    if (needsUserConfigUpdate) postBody.userConfigurations = updatedUserConfigurations;
+                    if (needsPythonEnvUpdate) postBody.pythonEnvs = updatedPythonEnvs;
+                    fetch('/api/settings', {
+                        method: 'POST',
+                        headers: { 'Content-Type': 'application/json' },
+                        body: JSON.stringify(postBody)
+                    }).then(() => {
+                        proceedInstall();
+                    }).catch(() => {
+                        proceedInstall();
+                    });
+                } else {
+                    proceedInstall();
+                }
+            })
+            .catch(() => {
+                proceedInstall();
+            });
 
-            if (requirementsToUpdate.length > 0) {
-                serverInstallOptions.requirements = requirementsToUpdate;
-            }
+        function proceedInstall() {
+            const hasRequirementsToUpdate = requirementsToUpdate.length > 0;
+
+            const uninstallBtn = document.querySelector('.uninstall-btn');
+            if (!uninstallBtn || !uninstallBtn.matches(':active')) {
+                const selectedTargets = window.selectedClients;
+                if (selectedTargets.length === 0 && !hasRequirementsToUpdate) {
+                    showToast('Please select at least one client to configure.', 'error');
+                    return;
+                }
+
+                let installingMessage = "Starting installation...";
+                const serverStatus = serverStatuses[serverName] || { installedStatus: {} };
+                if (selectedTargets.length > 0) {
+                    const target = selectedTargets[0];
+                    const msg = serverStatus.installedStatus?.[target]?.message;
+                    if (msg) installingMessage = msg;
+                }
 
-            handleBulkClientInstall(categoryName, serverName, selectedTargets, envVars, installingMessage, serverData, serverInstallOptions);
+                const serverInstallOptions = {
+                    targetClients: selectedTargets,
+                    env: envVars,
+                    args: args,
+                    settings: pythonEnv ? { pythonEnv: pythonEnv } : {}
+                };
+
+                if (requirementsToUpdate.length > 0) {
+                    serverInstallOptions.requirements = requirementsToUpdate;
+                }
+
+                handleBulkClientInstall(categoryName, serverName, selectedTargets, envVars, installingMessage, serverData, serverInstallOptions);
+            }
         }
     };
 }
@@ -288,11 +356,12 @@ function createUninstallButton(target, categoryName, serverName) {
             };
 
             try {
-                delayedAppendInstallLoadingMessage(`Uninstalling ${serverName} from ${target}...`);
+                updateOverallInstallStatus('in-progress', `Uninstalling ${serverName} from ${target}...`);
                 await uninstallTools(categoryName, serverList, [target]);
+                // uninstallTools will now handle its own final status update via updateOverallInstallStatus
             } catch (error) {
-                delayedAppendInstallLoadingMessage(`Error: ${error.message}`);
-                throw error;
+                updateOverallInstallStatus('failed', `Error during uninstall: ${error.message}`);
+                // No need to throw here if uninstallTools handles its errors by updating status
             }
         }
         return false;
@@ -326,7 +395,7 @@ function addNoEnvMessage(envInputsDiv) {
     envInputsDiv.appendChild(noEnvMessage);
 }
 
-function createEnvironmentInputs(envRequirements, envInputsDiv, clientSettings, serverName) {
+function createEnvironmentInputs(envRequirements, envInputsDiv, clientSettings, serverName, userConfigurations = {}) {
     Object.keys(envRequirements).forEach(key => {
         const req = envRequirements[key];
         const inputId = `env_${key}`;
@@ -346,11 +415,13 @@ function createEnvironmentInputs(envRequirements, envInputsDiv, clientSettings,
         input.required = req.Required;
         input.className = 'input-field';
 
-        // For default value, first check settings for the target server, then use the provided default
+        // For default value, first check userConfigurations, then client settings, then provided default
         let defaultValue = req.Default || '';
 
-        // Check if we have settings from client configuration
-        if (clientSettings && clientSettings.MSRooCode &&
+        // Use userConfigurations if present
+        if (userConfigurations && userConfigurations[key]) {
+            defaultValue = userConfigurations[key];
+        } else if (clientSettings && clientSettings.MSRooCode &&
             clientSettings.MSRooCode.mcpServers &&
             clientSettings.MSRooCode.mcpServers[serverName] &&
             clientSettings.MSRooCode.mcpServers[serverName].env &&
@@ -416,7 +487,7 @@ function createArgumentInput(value = '') {
     return argWrapper;
 }
 
-function addPythonEnvironmentInput(modalArguments) {
+function addPythonEnvironmentInput(categoryName, serverName, modalArguments) {
     const pythonEnvWrapper = document.createElement('div');
     pythonEnvWrapper.className = 'mt-4';
 
@@ -433,12 +504,23 @@ function addPythonEnvironmentInput(modalArguments) {
 
     const envDescription = document.createElement('p');
     envDescription.className = 'text-xs text-gray-500 mt-1';
-    envDescription.textContent = 'Specify the Python executable file(e.g. C:/python312/python) to use for installation. Leave empty to use system default.';
+    envDescription.textContent = 'Specify the Python exectable file(e.g. C:/python312/python) to use for installation. Leave empty to use system default. You can specify value in Settings page';
 
     pythonEnvWrapper.appendChild(pythonEnvLabel);
     pythonEnvWrapper.appendChild(pythonEnvInput);
     pythonEnvWrapper.appendChild(envDescription);
     modalArguments.appendChild(pythonEnvWrapper);
+    // Fetch system settings and set default value for python_env
+    fetch('/api/settings')
+        .then(response => response.json())
+        .then(data => {
+            if (data && data.data && data.data.pythonEnvs) {
+                pythonEnvInput.value = data.data.pythonEnvs[`${categoryName}:${serverName}`] || data.data.pythonEnvs['system'] || '';
+            }
+        })
+        .catch(() => {
+            // Ignore errors, leave input empty
+        });
 }
 
 function renderRequirements(serverRequirements, requirements, categoryName, serverName) {

package/dist/web/public/js/modal/modalUtils.js

@@ -17,18 +17,6 @@ export function closeModal() {
     }
 }
 
-/**
- * Close modal if clicked outside content
- */
-export function setupModalOutsideClick() {
-    window.onclick = function (event) {
-        const installModal = document.getElementById('installModal');
-        if (event.target == installModal) {
-            closeModal();
-        }
-    };
-}
-
 /**
  * Setup toggle switch styles
  */

package/dist/web/public/js/modal.js

@@ -2,28 +2,41 @@
 import {
     showInstallModal,
     closeModal,
-    setupModalOutsideClick,
     uninstallTools,
     showInstallLoadingModal,
-    appendInstallLoadingMessage,
-    hideInstallLoadingModal
+    // appendInstallLoadingMessage, // Removed
+    hideInstallLoadingModal,
+    // Potentially add updateOverallInstallStatus, addInstallationStep if needed from ./modal/index.js
 } from './modal/index.js';
 
 // Re-export all modal functionality
 export {
     showInstallModal,
     closeModal,
-    setupModalOutsideClick,
-    uninstallTools
+    uninstallTools,
+    showInstallLoadingModal, // Added to exports
+    hideInstallLoadingModal // Added to exports
+    // Potentially add updateOverallInstallStatus, addInstallationStep to exports
 };
 
 // Make certain functions available globally
 window.showInstallModal = showInstallModal;
 window.showInstallLoadingModal = showInstallLoadingModal;
-window.appendInstallLoadingMessage = appendInstallLoadingMessage;
+// window.appendInstallLoadingMessage = appendInstallLoadingMessage; // Removed
 window.hideInstallLoadingModal = hideInstallLoadingModal;
 
-// Initialize modal functionality when DOM is loaded
-document.addEventListener('DOMContentLoaded', () => {
-    setupModalOutsideClick();
-});
+// Listen for the custom event to refresh the main modal content
+document.addEventListener('refreshMainModalContent', () => {
+    console.log('[ModalJS] Received refreshMainModalContent event. Refreshing main modal.');
+    const lastSelectedCategory = localStorage.getItem('lastSelectedCategory');
+    const lastSelectedServerName = localStorage.getItem('lastSelectedServerName');
+
+    const isCategoryValid = lastSelectedCategory && lastSelectedCategory.trim() !== '' && lastSelectedCategory !== 'undefined' && lastSelectedCategory !== 'null';
+    const isServerNameValid = lastSelectedServerName && lastSelectedServerName.trim() !== '' && lastSelectedServerName !== 'undefined' && lastSelectedServerName !== 'null';
+
+    if (isCategoryValid && isServerNameValid) {
+        window.showInstallModal(lastSelectedCategory, lastSelectedServerName);
+    } else {
+        console.warn(`[ModalJS] Not refreshing modal. Category valid: ${isCategoryValid} (value: "${lastSelectedCategory}"), ServerName valid: ${isServerNameValid} (value: "${lastSelectedServerName}")`);
+    }
+});

package/dist/web/public/js/onboard/formProcessor.js

@@ -10,17 +10,7 @@ function setupRealTimeValidation(formId) {
   const form = document.getElementById(formId);
   if (!form) return;
 
-  // Helper function to show validation message
-  const showValidationMessage = (element, message, isError = true) => {
-    let messageDiv = element.nextElementSibling;
-    if (!messageDiv || !messageDiv.classList.contains('validation-message')) {
-      messageDiv = document.createElement('div');
-      messageDiv.className = `validation-message text-xs mt-1 ${isError ? 'text-red-500' : 'text-green-500'}`;
-      element.insertAdjacentElement('afterend', messageDiv);
-    }
-    messageDiv.textContent = message;
-    messageDiv.className = `validation-message text-xs mt-1 ${isError ? 'text-red-500' : 'text-green-500'}`;
-  };
+  if (!form) return;
 
   // Name input validation (category or server)
   const nameInput = form.querySelector('input[name="name"]');
@@ -1026,5 +1016,22 @@ export function resetOnboardFormDynamicContent(formId = 'onboardForm', serversLi
   setupRealTimeValidation(formId);
 }
 
+/**
+ * Shows validation message under an input field
+ * @param {HTMLElement} element - The element to show validation message for
+ * @param {string} message - The validation message to display
+ * @param {boolean} isError - Whether this is an error message
+ */
+export function showValidationMessage(element, message, isError = true) {
+  let messageDiv = element.nextElementSibling;
+  if (!messageDiv || !messageDiv.classList.contains('validation-message')) {
+    messageDiv = document.createElement('div');
+    messageDiv.className = `validation-message text-xs mt-1 ${isError ? 'text-red-500' : 'text-green-500'}`;
+    element.insertAdjacentElement('afterend', messageDiv);
+  }
+  messageDiv.textContent = message;
+  messageDiv.className = `validation-message text-xs mt-1 ${isError ? 'text-red-500' : 'text-green-500'}`;
+}
+
 // Export setupRealTimeValidation for external use if needed
 export { setupRealTimeValidation };

package/dist/web/public/js/onboard/publishHandler.js

@@ -2,6 +2,7 @@
 import { showToast } from '../notifications.js';
 import { getFormData } from './formProcessor.js';
 import {
+    validateFormFields,
     pollOperationStatus,
     updateOperationDisplay,
     getElementIdsByTab,
@@ -24,9 +25,9 @@ export async function handlePublish(event, activeTab, currentSelectedCategoryDat
     const statusContentElement = document.getElementById(contentId);
     // Ensure the progress toggle listener is attached when handlePublish is called
     if (typeof ensureProgressToggleListener === 'function') { // Check if imported correctly
-      ensureProgressToggleListener(statusContentElement);
+        ensureProgressToggleListener(statusContentElement);
     }
-  
+
     const onboardForm = document.getElementById(formId);
     const validateButton = document.getElementById(validateButtonId);
     const publishButton = document.getElementById(publishButtonId);
@@ -37,6 +38,37 @@ export async function handlePublish(event, activeTab, currentSelectedCategoryDat
         return;
     }
 
+    // Validate form fields
+    const validationResult = validateFormFields(onboardForm, activeTab);
+    if (!validationResult.isValid) {
+        showToast('Please fix all validation errors before proceeding.', 'error');
+        return;
+    }
+
+    let hasErrors = false;
+
+    if (activeTab === 'create-category') {
+        const formData = getFormData(onboardForm, false);
+        if (!formData.mcpServers || formData.mcpServers.length === 0) {
+            showToast('At least one MCP server must be configured for a new category.', 'error');
+            return;
+        }
+
+        // Check category name format
+        const nameInput = onboardForm.querySelector('input[name="name"]');
+        if (nameInput && nameInput.value.trim()) {
+            if (!/^[a-zA-Z0-9-_]+$/.test(nameInput.value.trim())) {
+                showValidationMessage(nameInput, 'Only alphanumeric characters, hyphens, and underscores allowed', true);
+                hasErrors = true;
+            }
+        }
+    }
+
+    if (hasErrors) {
+        showToast('Please fix all validation errors before proceeding.', 'error');
+        return;
+    }
+
     publishButton.disabled = true;
     publishButton.innerHTML = "<i class='bx bx-loader-alt bx-spin mr-2'></i>Publishing...";
     validateButton.disabled = true; // Also disable validate button during publish
@@ -116,7 +148,7 @@ export async function handlePublish(event, activeTab, currentSelectedCategoryDat
                 statusContentElement.innerHTML = `<p class="text-red-500">${errorMessage}</p>`;
             }
             showToast(errorMessage, 'error');
-            
+
             // Restore buttons to their original state fully
             publishButton.disabled = false;
             publishButton.innerHTML = "<i class='bx bx-cloud-upload mr-2'></i>Publish";

package/dist/web/public/js/onboard/templates.js

@@ -17,7 +17,7 @@ export const serverTemplate = (serverIndex, isReadOnly = false, serverData = nul
 
   const disabledAttr = makeServerFullyEditable ? '' : 'disabled';
   const readOnlyClasses = makeServerFullyEditable ? '' : 'bg-gray-100 cursor-not-allowed opacity-70';
-  
+
   // "Remove Server" button should be hidden if the server is NOT fully editable.
   // A server is fully editable if the context isn't read-only OR if it's an adhoc server.
   const hideRemoveServerButtonClass = !makeServerFullyEditable ? 'hidden' : '';
@@ -42,6 +42,10 @@ export const serverTemplate = (serverIndex, isReadOnly = false, serverData = nul
            class="action-button-in-server p-1.5 text-sm text-red-600 hover:text-red-800 hover:bg-red-50 rounded-md flex items-center mr-2 ${hideRemoveServerButtonClass}" title="Remove Server">
            <i class='bx bx-trash text-lg'></i>
          </button>
+         <button type="button" onclick="event.stopPropagation(); window.duplicateServer(${serverIndex}, '${serversListId}')"
+           class="action-button-in-server duplicate-mcp-server-button p-1.5 text-sm text-blue-600 hover:text-blue-800 hover:bg-blue-50 rounded-md flex items-center mr-2" title="Duplicate Server">
+           <i class='bx bx-copy text-lg'></i>
+         </button>
          <i class='bx bxs-chevron-down text-xl toggle-icon'></i>
         </div>
     </div>