imcp 0.0.1 → 0.0.3

package/src/web/public/js/modal.js

@@ -4,43 +4,142 @@ import { showToast, showConfirm } from './notifications.js';
 document.addEventListener('DOMContentLoaded', () => {
     setupModalOutsideClick();
 });
-/** Delayed message queue for loading modal */
+/**
+ * Simple version comparison function
+ * @param {string} v1 First version
+ * @param {string} v2 Second version
+ * @returns {number} 1 if v1 > v2, -1 if v1 < v2, 0 if equal
+ */
+function compareVersions(v1, v2) {
+    const v1Parts = v1.split('.').map(Number);
+    const v2Parts = v2.split('.').map(Number);
+
+    for (let i = 0; i < Math.max(v1Parts.length, v2Parts.length); i++) {
+        const v1Part = v1Parts[i] || 0;
+        const v2Part = v2Parts[i] || 0;
+
+        if (v1Part > v2Part) return 1;
+        if (v1Part < v2Part) return -1;
+    }
+
+    return 0;
+}
+
+/**
+ * Message queue for delayed loading modal updates.
+ * @type {Array<{msg: string, isCompletion: boolean}>}
+ */
 let messageQueue = [];
+
+/** @type {boolean} Flag indicating if a message is currently being appended */
 let isAppending = false;
+
+/** @type {boolean} Flag indicating if completion UI update is pending */
+let completionPending = false;
+
+/**
+ * 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) return;
+    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 } = messageQueue.shift();
+    const { msg, isCompletion } = messageQueue.shift();
+
+    if (isCompletion) {
+        completionPending = true;
+    }
+
     _appendInstallLoadingMessage(msg);
+
     setTimeout(() => {
         isAppending = false;
         processMessageQueue();
     }, 1000);
 }
-// Always use this to append messages with delay
-function delayedAppendInstallLoadingMessage(msg) {
-    messageQueue.push({ msg });
+
+/**
+ * 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
+ */
+function delayedAppendInstallLoadingMessage(msg, isCompletion = false) {
+    messageQueue.push({ msg, isCompletion });
     processMessageQueue();
 }
-// Internal: the original append function
+
+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) {
-        loadingMsg.innerHTML += `<div>${message}</div>`;
-        loadingMsg.scrollTop = loadingMsg.scrollHeight;
+        // 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;
+
+            // Create message container
+            const messageDiv = document.createElement('div');
+            messageDiv.className = 'message-line';
+
+            // Apply yellow color for error messages
+            if (isError) {
+                messageDiv.style.color = '#f59e0b';
+            }
+            messageDiv.innerHTML = formattedMessage;
+
+
+            loadingMsg.appendChild(messageDiv);
+            loadingMsg.scrollTop = loadingMsg.scrollHeight;
+        });
     } else {
-        console.error('[LoadingModal] loading message DOM not found');
+        console.error('[LoadingModal] Element not found: installLoadingMessage');
     }
 }
 
 /**
- * Show the install loading modal and optionally append a message.
- * @param {string} message
- */
-
-/**
- * Show the install loading modal and optionally append a message.
- * @param {string} message
+ * Display the installation loading modal and prepare it for messages.
  */
 function showInstallLoadingModal() {
     const loadingModal = document.getElementById('installLoadingModal');
@@ -49,33 +148,30 @@ function showInstallLoadingModal() {
         loadingModal.style.display = 'block';
         loadingMsg.innerHTML = '';
     } else {
-        console.error('[LoadingModal] loading modal DOM not found');
+        console.error('[LoadingModal] Required elements not found: installLoadingModal or installLoadingMessage');
     }
 }
 
 /**
- * Append a message to the loading modal.
- * @param {string} message
+ * Append a message to the loading modal display.
+ * @param {string} message - The message to display
  */
 function appendInstallLoadingMessage(message) {
-    console.log('[LoadingModal] appendInstallLoadingMessage:', message);
-    const loadingMsg = document.getElementById('installLoadingMessage');
-    if (loadingMsg) {
-        loadingMsg.innerHTML += `<div>${message}</div>`;
-        loadingMsg.scrollTop = loadingMsg.scrollHeight;
-    } else {
-        console.error('[LoadingModal] loading message DOM not found');
-    }
+    console.log(`[LoadingModal] Message: ${message}`);
+    _appendInstallLoadingMessage(message);
 }
 
 /**
  * Hide the install loading modal.
  */
 function hideInstallLoadingModal() {
-    console.log('[LoadingModal] hideInstallLoadingModal called');
+    console.log('[LoadingModal] Hiding installation modal');
     const loadingModal = document.getElementById('installLoadingModal');
     if (loadingModal) {
         loadingModal.style.display = 'none';
+        setTimeout(() => {
+            location.reload();
+        }, 100);
     } else {
         console.error('[LoadingModal] loading modal DOM not found');
     }
@@ -147,8 +243,8 @@ async function showInstallModal(categoryName, serverName, callback) {
             const operationStatus = serverStatus.installedStatus[target] || { status: 'not-installed', type: 'check', target: 'server' };
 
             // Determine client status
-            let statusText = 'Not Installed';
-            let statusClass = 'not-installed';
+            let statusText = '';
+            let statusClass = '';
 
             if (operationStatus.status === 'completed' && operationStatus.type === 'install') {
                 statusText = 'Installed';
@@ -163,6 +259,7 @@ async function showInstallModal(categoryName, serverName, callback) {
                 statusText = 'Failed';
                 statusClass = 'not-installed';
             }
+            // Do not show not-installed status for targets that aren't installed
 
             const isConfigured = operationStatus.status === 'completed' && operationStatus.type === 'install';
 
@@ -222,14 +319,16 @@ async function showInstallModal(categoryName, serverName, callback) {
             // Add elements to client info
             clientInfo.appendChild(clientName);
 
-            // Status badge
-            const statusBadge = document.createElement('span');
-            statusBadge.className = `status-badge ${statusClass}`;
-            statusBadge.textContent = statusText;
-
-            // Add components to client item
+            // Add client info (name) to the item first
             clientItem.appendChild(clientInfo);
-            clientItem.appendChild(statusBadge);
+
+            // Status badge - only show if we have status text
+            if (statusText) {
+                const statusBadge = document.createElement('span');
+                statusBadge.className = `status-badge ${statusClass}`;
+                statusBadge.textContent = statusText;
+                clientItem.appendChild(statusBadge);
+            }
 
             // Add client item to target div
             targetDiv.appendChild(clientItem);
@@ -260,6 +359,9 @@ async function showInstallModal(categoryName, serverName, callback) {
             noEnvMessage.textContent = 'No environment variables required for this MCP server.';
             envInputsDiv.appendChild(noEnvMessage);
         } else {
+            // Get clientMcpSettings from the targets endpoint
+            let clientSettings = targetData.clientMcpSettings;
+
             // Create inputs for each environment variable
             Object.keys(envRequirements).forEach(key => {
                 const req = envRequirements[key];
@@ -277,7 +379,21 @@ async function showInstallModal(categoryName, serverName, callback) {
                 input.id = inputId;
                 input.name = key;
                 input.placeholder = req.Description || key;
-                input.value = req.Default || '';
+
+                // For default value, first check MSRooCode for the target server, then use the provided default
+                let defaultValue = req.Default || '';
+
+                // Check if we have settings from MSRooCode
+                if (clientSettings && clientSettings.MSRooCode &&
+                    clientSettings.MSRooCode.mcpServers &&
+                    clientSettings.MSRooCode.mcpServers[serverName] &&
+                    clientSettings.MSRooCode.mcpServers[serverName].env &&
+                    clientSettings.MSRooCode.mcpServers[serverName].env[key]) {
+                    defaultValue = clientSettings.MSRooCode.mcpServers[serverName].env[key];
+                    console.log(`Using MSRooCode value for ${key}: ${defaultValue}`);
+                }
+
+                input.value = defaultValue;
                 input.required = req.Required;
                 input.className = 'input-field';
 
@@ -302,10 +418,36 @@ async function showInstallModal(categoryName, serverName, callback) {
         if (serverRequirements.length > 0) {
             const reqHtml = serverRequirements.map(req => {
                 const status = requirements[req.name] || {};
-                const statusClass = status.installed
+                let statusClass = status.installed
                     ? 'text-green-600 bg-green-50'
                     : 'text-yellow-600 bg-yellow-50';
-                const statusText = status.installed ? 'Installed' : 'Required';
+                let statusText = status.installed ? 'Installed' : 'Required';
+                let versionDisplay = status.version ? ` • <span class="font-medium">${status.version}</span>` : '';
+                let updateToggle = '';
+
+                // Check if there's an available update
+                if (status.installed && status.availableUpdate && status.availableUpdate.version) {
+                    if (status.version && compareVersions(status.availableUpdate.version, status.version) > 0) {
+                        // Show version update information with yellow color and icon
+                        statusClass = 'text-yellow-600 bg-yellow-50';
+                        statusText = `<span style="color: #f59e0b; font-weight: bold; margin-right: 5px;">↑</span>${status.availableUpdate.version}`;
+
+                        // Create a toggle switch for update
+                        updateToggle = `
+                            <label class="inline-flex items-center cursor-pointer ml-2">
+                                <input type="checkbox" class="toggle-update sr-only"
+                                    data-name="${req.name}"
+                                    data-version="${status.availableUpdate.version}"
+                                    data-category="${categoryName}"
+                                    data-server="${serverName}">
+                                <div class="relative w-10 h-5 bg-gray-200 rounded-full toggle-bg">
+                                    <div class="absolute inset-y-0 left-0 w-5 h-5 bg-white rounded-full transition-transform duration-300 transform"></div>
+                                </div>
+                                <span class="ml-2 text-sm text-gray-700">Update</span>
+                            </label>
+                        `;
+                    }
+                }
 
                 return `
                     <div class="border border-gray-200 p-3 rounded-lg mb-2 hover:bg-gray-50">
@@ -313,12 +455,15 @@ async function showInstallModal(categoryName, serverName, callback) {
                             <div>
                                 <div class="font-semibold text-gray-800">${req.name}</div>
                                 <div class="text-sm text-gray-600 shadow-sm p-1 rounded bg-gray-50">
-                                    <span class="font-medium">${status.type || 'package'}</span>${status.version ? ` • <span class="font-medium">${status.version}</span>` : ''}
+                                    <span class="font-medium">${status.type || 'package'}</span>${versionDisplay}
                                 </div>
                             </div>
-                            <span class="${statusClass} inline-flex items-center px-3 py-1 rounded-full text-sm">
-                                ${statusText}
-                            </span>
+                            <div class="flex items-center">
+                                <span class="${statusClass} inline-flex items-center px-3 py-1 rounded-full text-sm">
+                                    ${statusText}
+                                </span>
+                                ${updateToggle}
+                            </div>
                         </div>
                     </div>
                 `;
@@ -333,6 +478,24 @@ async function showInstallModal(categoryName, serverName, callback) {
             modalRequirements.innerHTML = '<p class="text-gray-600">No additional dependencies required.</p>';
         }
 
+        // Add event listeners for update toggles
+        setTimeout(() => {
+            const updateToggles = modalRequirements.querySelectorAll('.toggle-update');
+            updateToggles.forEach(toggle => {
+                toggle.addEventListener('change', function () {
+                    // When toggled, update the visual appearance
+                    const toggleBg = this.parentElement.querySelector('.toggle-bg');
+                    if (this.checked) {
+                        toggleBg.classList.add('bg-blue-500');
+                        toggleBg.querySelector('div').classList.add('translate-x-5');
+                    } else {
+                        toggleBg.classList.remove('bg-blue-500');
+                        toggleBg.querySelector('div').classList.remove('translate-x-5');
+                    }
+                });
+            });
+        }, 100);
+
         // Set up the install form submit handler
         const installForm = document.getElementById('installForm');
         installForm.onsubmit = (e) => {
@@ -347,13 +510,27 @@ async function showInstallModal(categoryName, serverName, callback) {
                 }
             });
 
+            // Check for enabled update toggles and collect requirements to update
+            const requirementsToUpdate = [];
+            const updateToggles = modalRequirements.querySelectorAll('.toggle-update:checked');
+            updateToggles.forEach(toggle => {
+                requirementsToUpdate.push({
+                    name: toggle.dataset.name,
+                    version: toggle.dataset.version
+                });
+            });
+
             // Get selected clients
             const selectedTargets = window.selectedClients.length > 0 ?
                 window.selectedClients :
                 Array.from(document.querySelectorAll('.client-item.selected'))
                     .map(item => item.dataset.target);
 
-            if (selectedTargets.length === 0) {
+            // Check if we have any requirements selected for update
+            const hasRequirementsToUpdate = requirementsToUpdate.length > 0;
+
+            // Only require client selection if we don't have any requirements to update
+            if (selectedTargets.length === 0 && !hasRequirementsToUpdate) {
                 showToast('Please select at least one client to configure.', 'error');
                 return;
             }
@@ -367,7 +544,19 @@ async function showInstallModal(categoryName, serverName, callback) {
                 const msg = serverStatus.installedStatus?.[target]?.message;
                 if (msg) installingMessage = msg;
             }
-            handleBulkClientInstall(categoryName, serverName, selectedTargets, envVars, installingMessage, serverData);
+
+            // Add requirements to update to serverInstallOptions if any
+            const serverInstallOptions = {
+                targetClients: selectedTargets,
+                env: envVars
+            };
+
+            // Only add requirements if we have any to update
+            if (requirementsToUpdate.length > 0) {
+                serverInstallOptions.requirements = requirementsToUpdate;
+            }
+
+            handleBulkClientInstall(categoryName, serverName, selectedTargets, envVars, installingMessage, serverData, serverInstallOptions);
         };
 
     } catch (error) {
@@ -379,8 +568,8 @@ async function showInstallModal(categoryName, serverName, callback) {
 }
 
 // Function to handle bulk client installations
-async function handleBulkClientInstall(categoryName, serverName, targets, envVars = {}, installingMessage = "Starting installation...", serverData = null) {
-    console.log('[LoadingModal] handleBulkClientInstall called', { categoryName, serverName, targets, envVars });
+async function handleBulkClientInstall(categoryName, serverName, targets, envVars = {}, installingMessage = "Starting installation...", serverData = null, serverInstallOptions = null) {
+    console.log('[LoadingModal] handleBulkClientInstall called', { categoryName, serverName, targets, envVars, serverInstallOptions });
     // Hide install modal, show loading modal
     const installModal = document.getElementById('installModal');
     console.log('[LoadingModal] installModal:', installModal);
@@ -401,48 +590,52 @@ async function handleBulkClientInstall(categoryName, serverName, targets, envVar
         }
     }
 
-    showInstallLoadingModal(installingMessage);
-
+    showInstallLoadingModal();
     delayedAppendInstallLoadingMessage(installingMessage);
 
     try {
         delayedAppendInstallLoadingMessage("Installing, please wait...");
+
+        // Use serverInstallOptions if provided, otherwise build the traditional options
+        const requestBody = {
+            serverList: {
+                [serverName]: serverInstallOptions || {
+                    targetClients: targets,
+                    env: envVars
+                }
+            }
+        };
+
         const response = await fetch(`/api/categories/${categoryName}/install`, {
             method: 'POST',
             headers: {
                 'Content-Type': 'application/json',
                 'Accept': 'application/json'
             },
-            body: JSON.stringify({
-                serverList: {
-                    [serverName]: {
-                        targetClients: targets,
-                        env: envVars
-                    }
-                }
-            })
+            body: JSON.stringify(requestBody)
         });
 
         console.log('[LoadingModal] fetch install response:', response);
 
         if (!response.ok) {
             const errorData = await response.text();
-            delayedAppendInstallLoadingMessage(`<span style="color:red;">Installation failed: ${errorData || response.statusText}</span>`);
-            console.error('[LoadingModal] Installation failed:', errorData || response.statusText);
+            delayedAppendInstallLoadingMessage(`<span style="color:#f59e0b;">Failed: ${errorData || response.statusText}</span>`);
+            console.error('[LoadingModal] Failed:', errorData || response.statusText);
             throw new Error(`Installation failed: ${errorData || response.statusText}`);
         }
 
         const result = await response.json();
         console.log('[LoadingModal] install result:', result);
         if (!result.success) {
-            delayedAppendInstallLoadingMessage(`<span style="color:red;">${result.error || 'Installation failed'}</span>`);
-            console.error('[LoadingModal] install result error:', result.error || 'Installation failed');
+            delayedAppendInstallLoadingMessage(`<span style="color:#f59e0b;">${result.error || 'Operation failed'}</span>`);
+            console.error('[LoadingModal] Error:', result.error || 'Operation failed');
             throw new Error(result.error || 'Installation failed');
         }
 
         // Optionally, you can refresh modal data here or trigger a callback
-        // Start polling for install status
-        pollInstallStatus(categoryName, serverName, targets);
+        // Start polling for install status, pass requirements if available
+        const requirements = serverInstallOptions?.requirements || [];
+        pollInstallStatus(categoryName, serverName, targets, 2000, 60, requirements);
     } catch (error) {
         console.error('[LoadingModal] Error applying configuration:', error);
         delayedAppendInstallLoadingMessage(`<span style="color:red;">Error: ${error.message}</span>`);
@@ -455,53 +648,101 @@ async function handleBulkClientInstall(categoryName, serverName, targets, envVar
     }
 }
 
-// Poll install status for the given server/targets
-async function pollInstallStatus(categoryName, serverName, targets, interval = 2000, maxTries = 60) {
+// Poll install status for the given server/targets and optional requirements
+async function pollInstallStatus(categoryName, serverName, targets, interval = 2000, maxTries = 60, requirements = []) {
     let tries = 0;
     let lastMessages = {};
-    // Use global delayedAppendInstallLoadingMessage and queue logic
+    let lastRequirementMessages = {};
+    let completionMessageSent = false;
+
     while (tries < maxTries) {
         try {
             const resp = await fetch(`/api/categories/${categoryName}`);
             if (resp.ok) {
                 const data = await resp.json();
-                const serverStatuses = data?.data?.installationStatus?.serversStatus || {};
+                const installationStatus = data?.data?.installationStatus || {};
+                const serverStatuses = installationStatus.serversStatus || {};
+                const requirementsStatus = installationStatus.requirementsStatus || {};
                 const serverStatus = serverStatuses[serverName] || { installedStatus: {} };
-                let allCompleted = true;
-                for (const target of targets) {
-                    const status = serverStatus.installedStatus?.[target]?.status;
-                    const msg = serverStatus.installedStatus?.[target]?.message;
-                    // Only append new messages
-                    if (msg && lastMessages[target] !== msg) {
-                        delayedAppendInstallLoadingMessage(`[${target}] ${msg}`);
-                        lastMessages[target] = msg;
+
+                // First check requirements status if we have any
+                let allRequirementsCompleted = true;
+                let hasRequirements = requirements.length > 0;
+
+                for (const req of requirements) {
+                    const reqStatus = requirementsStatus[req.name] || {};
+                    const opStatus = reqStatus.operationStatus || {};
+                    const msg = opStatus.message;
+                    const status = opStatus.status;
+
+                    // Only append new messages for requirements
+                    if (msg && lastRequirementMessages[req.name] !== msg) {
+                        delayedAppendInstallLoadingMessage(`${req.name}: ${msg}`);
+                        lastRequirementMessages[req.name] = msg;
                     }
-                    if (status !== "completed") {
-                        allCompleted = false;
+
+                    if (status !== "completed" && status !== "failed") {
+                        allRequirementsCompleted = false;
+                    }
+
+                    // If a requirement failed, show an error
+                    if (status === "failed") {
+                        delayedAppendInstallLoadingMessage(`<span style="color:#f59e0b;">${req.name}: Update failed - ${msg || 'Unknown error'}</span>`);
+                    }
+                }
+
+                // Now check target statuses
+                let allTargetsCompleted = true;
+                let hasTargets = targets && targets.length > 0;
+
+                if (hasTargets) {
+                    for (const target of targets) {
+                        const status = serverStatus.installedStatus?.[target]?.status;
+                        const msg = serverStatus.installedStatus?.[target]?.message;
+                        // Only append new messages for targets, making output more compact
+                        if (msg && lastMessages[target] !== msg) {
+                            delayedAppendInstallLoadingMessage(`${target}: ${msg}`);
+                            lastMessages[target] = msg;
+                        }
+                        if (status !== "completed") {
+                            allTargetsCompleted = false;
+                        }
                     }
                 }
-                if (allCompleted) {
-                    delayedAppendInstallLoadingMessage(`<span style="color:green;">Configuration applied successfully for ${targets.length} client(s).</span>`);
-                    setTimeout(() => {
-                        hideInstallLoadingModal();
-                        setTimeout(() => {
-                            location.reload();
-                        }, 200);
-                    }, 5000);
+
+                // Complete if all operations are done
+                const allCompleted = (!hasRequirements || allRequirementsCompleted) &&
+                    (!hasTargets || allTargetsCompleted);
+
+                if (allCompleted && !completionMessageSent) {
+                    completionMessageSent = true;
+
+                    // Compose completion message
+                    const completionMessage = hasRequirements && hasTargets ?
+                        `Updated requirements and configured ${targets.length} client(s)` :
+                        hasRequirements ? 'Requirements updated' :
+                            hasTargets ? `Configured ${targets.length} client(s)` :
+                                'Operation completed';
+
+                    console.log('[LoadingModal] Completed:', completionMessage);
+                    delayedAppendInstallLoadingMessage(`<span style="color:green;">${completionMessage}</span>`, true);
+
+                    // Give time for message queue to process before returning
+                    await new Promise(resolve => setTimeout(resolve, 1500));
                     return;
                 }
             }
-        } catch (e) {
-            // Ignore errors and continue polling
+        } catch (error) {
+            console.error('[LoadingModal] Error polling status:', error);
         }
         await new Promise(resolve => setTimeout(resolve, interval));
         tries++;
     }
-    // Timeout: close modal and reload anyway
-    hideInstallLoadingModal();
-    setTimeout(() => {
-        location.reload();
-    }, 200);
+
+    // On timeout, show timeout message but don't auto-close
+    if (!completionMessageSent) {
+        delayedAppendInstallLoadingMessage(`<span style="color:#f59e0b;">Operation timed out - Please refresh the page</span>`, true);
+    }
 }
 
 // Function to handle client uninstallation for multiple targets
@@ -545,17 +786,22 @@ async function uninstallTools(categoryName, serverList, targets) {
     }
 }
 
-// Close modal
+// Close modal and reload
 function closeModal() {
     document.getElementById('installModal').style.display = "none";
+    location.reload();
 }
 
 // Close modal if clicked outside content
 function setupModalOutsideClick() {
     window.onclick = function (event) {
-        const modal = document.getElementById('installModal');
-        if (event.target == modal) {
+        const installModal = document.getElementById('installModal');
+        const loadingModal = document.getElementById('installLoadingModal');
+
+        if (event.target == installModal) {
             closeModal();
+        } else if (event.target == loadingModal) {
+            hideInstallLoadingModal();
         }
     };
 }
@@ -568,5 +814,19 @@ window.showInstallLoadingModal = showInstallLoadingModal;
 window.appendInstallLoadingMessage = appendInstallLoadingMessage;
 window.hideInstallLoadingModal = hideInstallLoadingModal;
 
+// CSS styles for the toggle switch
+const styleElement = document.createElement('style');
+styleElement.textContent = `
+    .toggle-bg.bg-blue-500 {
+        background-color: #3b82f6;
+    }
+    .toggle-bg {
+        transition: background-color 0.3s;
+    }
+    .toggle-bg div {
+        transition: transform 0.3s;
+    }
+`;
+document.head.appendChild(styleElement);
 
 export { showInstallModal, closeModal, setupModalOutsideClick, uninstallTools };