imcp 0.1.1 → 0.1.3

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/publishHandler.js

@@ -25,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);
@@ -41,30 +41,32 @@ export async function handlePublish(event, activeTab, currentSelectedCategoryDat
     // Validate form fields
     const validationResult = validateFormFields(onboardForm, activeTab);
     if (!validationResult.isValid) {
-      showToast('Please fix all validation errors before proceeding.', 'error');
-      return;
+        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;
+        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;
+        showToast('Please fix all validation errors before proceeding.', 'error');
+        return;
     }
 
     publishButton.disabled = true;
@@ -146,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/serverCategoryDetails.js

@@ -161,6 +161,38 @@ async function showServerDetails(serverName, retryCount = 0) {
     }
 }
 
+/**
+ * Checks if any defined requirement for an MCP server has a pending update.
+ * An update is pending if a requirement has an `availableUpdate` or if its installed version
+ * differs from the version defined in the feed.
+ * @param {object} mcpServer - The MCP server configuration object from the feed.
+ * @param {object} requirementsStatus - The status of requirements for this server, typically from `installationStatus.requirementsStatus`.
+ * @returns {{ needsUpdate: boolean, updateMessage: string|null }} - True and message if update is available, else false/null.
+ */
+function checkNeedsRequirementUpdate(mcpServer, requirementsStatus) {
+    const definedReqs = mcpServer?.dependencies?.requirements || [];
+    if (definedReqs.length === 0) {
+        return false; // No requirements defined in the feed for this server.
+    }
+
+    const currentReqsStatus = requirementsStatus || {};
+
+    for (const defReq of definedReqs) {
+        const alias = defReq.alias || defReq.name;
+        if (!alias) continue;
+
+        const statusEntry = currentReqsStatus[alias];
+
+        if (statusEntry) {
+            // Check 1: Explicit 'availableUpdate' information
+            if (statusEntry.availableUpdate && statusEntry.availableUpdate.version) {
+                return {needsUpdate: true, updateMessage: `${statusEntry.name}: ${statusEntry.availableUpdate.message}` || null};
+            }
+        }
+    }
+    return { needsUpdate: false, updateMessage: null };
+}
+
 async function renderServersList(serverCategory) {
     try {
         const targetResponse = await fetch('/api/targets');
@@ -239,17 +271,34 @@ async function renderServersList(serverCategory) {
                             </div>
                         </div>
                         <div class="action-buttons">
-                            ${!isInstalled ? `
-                                <button onclick="event.stopPropagation(); window.showInstallModal('${serverCategory.name}', '${mcpServer.name}')"
-                                        class="bg-blue-500 hover:bg-blue-700 text-white text-xs font-bold py-2 px-4 rounded-full shadow-sm transition duration-150 ease-in-out">
-                                     Setup
-                                 </button>
-                            ` : `
-                                <button onclick="event.stopPropagation(); window.uninstallTools('${serverCategory.name}', ['${mcpServer.name}'])"
-                                        class="bg-red-500 hover:bg-red-700 text-white text-sm font-bold py-2 px-4 rounded-full shadow-sm transition duration-150 ease-in-out">
-                                    Uninstall
-                                </button>
-                            `}
+                            ${(() => {
+                                const serverInstallationStatus = serverCategory.installationStatus;
+                                const requirementsStatus = serverInstallationStatus?.requirementsStatus;
+                                // dependencies is a simple array of names
+                                const { needsUpdate, updateMessage } = checkNeedsRequirementUpdate(mcpServer, requirementsStatus);
+
+                                if (isInstalled) {
+                                    return `
+                                    <button onclick="event.stopPropagation(); window.uninstallTools('${serverCategory.name}', ['${mcpServer.name}'])"
+                                            class="bg-red-500 hover:bg-red-700 text-white text-sm font-bold py-2 px-4 rounded-full shadow-sm ease-in-out">
+                                        Uninstall
+                                    </button>`;
+                                } else {
+                                    let buttonText = 'Setup';
+                                    let titleAttr = '';
+                                    if (needsUpdate) {
+                                        buttonText = 'Update';
+                                        if (updateMessage) {
+                                            titleAttr = ` title="${updateMessage.replace(/"/g, '"')}"`;
+                                        }
+                                    }
+                                    return `
+                                    <button onclick="event.stopPropagation(); window.showInstallModal('${serverCategory.name}', '${mcpServer.name}')"
+                                            class="${needsUpdate ? 'btn-update' : 'bg-blue-500 hover:bg-blue-700'} text-white text-xs font-bold py-2 px-4 rounded-full shadow-sm ease-in-out"${titleAttr}>
+                                         ${buttonText}
+                                     </button>`;
+                                }
+                            })()}
                         </div>
                         ${hasEnvRequirements ? `<div class="mt-3 text-xs text-blue-600">
                             <svg class="w-3 h-3 inline mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">

package/dist/web/public/js/serverCategoryList.js

@@ -128,8 +128,8 @@ function renderServerCategoryList(servers) {
                     statusText = "Partial Configured";
                 } else {
                     // No tools installed
-                    colorClass = "text-red-600 bg-red-50";
-                    icon = '<svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"></path></svg>';
+                    colorClass = "text-yellow-600 bg-orange-50";
+                    icon = '<svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM10 13a1 1 0 110-2 1 1 0 010 2zm-1.75-5.75a.75.75 0 00-1.5 0v3a.75.75 0 001.5 0v-3z" clip-rule="evenodd" /></svg>';
                     statusText = "Not Configured";
                 }