imcp 0.0.19 → 0.1.2

package/src/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/src/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/src/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/src/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/src/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/src/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>