imcp 0.0.13 → 0.0.15

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

@@ -1,1045 +1,29 @@
-import { showToast, showConfirm } from './notifications.js';
-
-// Wait for DOM to be loaded before initializing modal functionality
-document.addEventListener('DOMContentLoaded', () => {
-    setupModalOutsideClick();
-});
-/**
- * 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) {
-        // 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);
-
-    setTimeout(() => {
-        isAppending = false;
-        processMessageQueue();
-    }, 1000);
-}
-
-/**
- * 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();
-}
-
-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;
-
-            // 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] Element not found: installLoadingMessage');
-    }
-}
-
-/**
- * Display the installation loading modal and prepare it for messages.
- */
-function showInstallLoadingModal(operation = 'Installing') {
-    const loadingModal = document.getElementById('installLoadingModal');
-    const loadingMsg = document.getElementById('installLoadingMessage');
-    const loadingTitle = document.querySelector('.loading-title');
-    if (loadingModal && loadingMsg && loadingTitle) {
-        loadingModal.style.display = 'block';
-        loadingMsg.innerHTML = '';
-        loadingTitle.textContent = `${operation}...`;
-    } else {
-        console.error('[LoadingModal] Required elements not found: installLoadingModal, installLoadingMessage, or loading-title');
-    }
-}
-
-/**
- * Append a message to the loading modal display.
- * @param {string} message - The message to display
- */
-function appendInstallLoadingMessage(message) {
-    console.log(`[LoadingModal] Message: ${message}`);
-    _appendInstallLoadingMessage(message);
-}
-
-/**
- * Hide the install loading modal.
- */
-function hideInstallLoadingModal() {
-    console.log('[LoadingModal] Hiding installation modal');
-    const loadingModal = document.getElementById('installLoadingModal');
-    if (loadingModal) {
-        loadingModal.style.display = 'none';
-
-        // Get the last selected category
-        const lastSelected = localStorage.getItem('lastSelectedCategory');
-
-        // Refresh page while maintaining category selection
-        setTimeout(() => {
-            if (lastSelected) {
-                window.location.href = window.location.pathname + '?category=' + encodeURIComponent(lastSelected);
-            } else {
-                location.reload();
-            }
-        }, 100);
-    } else {
-        console.error('[LoadingModal] loading modal DOM not found');
-    }
-}
-
-// Show install modal for MCP tools
-async function showInstallModal(categoryName, serverName, callback) {
-    console.log("Showing install modal for:", serverName);
-
-    // Wait for a short delay to ensure modal is loaded
-    await new Promise(resolve => setTimeout(resolve, 100));
-
-    const modal = document.getElementById('installModal');
-    if (!modal) {
-        console.error('Modal container not found');
-        return;
-    }
-
-    const title = modal.querySelector('#modalTitle');
-    const envInputsDiv = modal.querySelector('#modalEnvInputs');
-    const targetDiv = modal.querySelector('#modalTargets');
-    const modalRequirements = modal.querySelector('#modalRequirements');
-    const modalArguments = modal.querySelector('#modalArguments');
-
-    // Global array to track selected clients
-    window.selectedClients = [];
-
-    // Verify all required modal elements exist
-    if (!title || !envInputsDiv || !targetDiv || !modalRequirements || !modalArguments) {
-        console.error('Required modal elements not found');
-        return;
-    }
-
-    title.textContent = `Install ${serverName}`;
-    envInputsDiv.innerHTML = ''; // Clear previous inputs
-    targetDiv.innerHTML = ''; // Clear previous targets
-    modalRequirements.innerHTML = ''; // Clear previous requirements
-    modalArguments.innerHTML = ''; // Clear previous arguments
-
-    try {
-        // Fetch both targets and server data simultaneously
-        const [targetResponse, serverResponse] = await Promise.all([
-            fetch('/api/targets'),
-            fetch(`/api/categories/${categoryName}`)
-        ]);
-
-        if (!targetResponse.ok || !serverResponse.ok) {
-            throw new Error('Failed to fetch required data');
-        }
-
-        const [targetData, serverData] = await Promise.all([
-            targetResponse.json(),
-            serverResponse.json()
-        ]);
-
-        if (!targetData.success || !serverData.success) {
-            throw new Error('Invalid data received');
-        }
-
-        const mcpServer = serverData.data.feedConfiguration.mcpServers.find(server => server.name === serverName);
-        if (!mcpServer) {
-            throw new Error('Server configuration not found');
-        }
-
-        const installationStatus = serverData.data.installationStatus || {};
-        const serverStatuses = installationStatus.serversStatus || {};
-        const serverStatus = serverStatuses[serverName] || { installedStatus: {} };
-
-        // Create client items with switch toggles
-        targetData.data.forEach(target => {
-            const operationStatus = serverStatus.installedStatus[target] || { status: 'not-installed', type: 'check', target: 'server' };
-
-            // Determine client status
-            let statusText = '';
-            let statusClass = '';
-
-            if (operationStatus.status === 'completed' && operationStatus.type === 'install') {
-                statusText = 'Installed';
-                statusClass = 'installed';
-            } else if (operationStatus.status === 'pending') {
-                statusText = 'Pending Requirements';
-                statusClass = 'pending';
-            } else if (operationStatus.status === 'in-progress') {
-                statusText = 'In Progress';
-                statusClass = 'pending';
-            } else if (operationStatus.status === 'failed') {
-                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';
-
-            // Create client item
-            const clientItem = document.createElement('div');
-            clientItem.className = 'client-item';
-            clientItem.dataset.target = target;
-            clientItem.dataset.selected = 'false';
-
-            // Determine if item should be selectable
-            const isInProgress = operationStatus.status === 'in-progress';
-            const isSelectable = !isConfigured && !isInProgress;
-
-            // Add appropriate non-selectable classes
-            if (!isSelectable) {
-                clientItem.classList.add('non-selectable');
-
-                if (isConfigured) {
-                    clientItem.classList.add('installed-item');
-                    clientItem.title = 'Already installed';
-                } else if (isInProgress) {
-                    clientItem.classList.add('in-progress-item');
-                    clientItem.title = 'Installation in progress';
-                }
-            }
-
-            // Make selectable clients clickable
-            if (isSelectable) {
-                clientItem.addEventListener('click', (e) => {
-                    const isSelected = clientItem.dataset.selected === 'true';
-                    clientItem.dataset.selected = isSelected ? 'false' : 'true';
-
-                    // Update class
-                    if (isSelected) {
-                        clientItem.classList.remove('selected');
-                        window.selectedClients = window.selectedClients.filter(c => c !== target);
-                    } else {
-                        clientItem.classList.add('selected');
-                        if (!window.selectedClients.includes(target)) {
-                            window.selectedClients.push(target);
-                        }
-                    }
-
-                    console.log('Selected clients:', window.selectedClients);
-                });
-            }
-
-            // Create client info (name)
-            const clientInfo = document.createElement('div');
-            clientInfo.className = 'client-info';
-
-            // Client name label
-            const clientName = document.createElement('span');
-            clientName.className = 'text-sm font-medium text-gray-900';
-            clientName.textContent = target;
-
-            // Add elements to client info
-            clientInfo.appendChild(clientName);
-
-            // Add elements to client item
-            clientItem.appendChild(clientInfo);
-
-            // Status container for badge and uninstall button
-            const statusContainer = document.createElement('div');
-            statusContainer.className = 'status-container';
-
-            // Status badge - only show if we have status text
-            if (statusText) {
-                const statusBadge = document.createElement('span');
-                statusBadge.className = `status-badge ${statusClass}`;
-                statusBadge.textContent = statusText;
-                statusContainer.appendChild(statusBadge);
-
-                // Add uninstall button right after status badge if installed
-                if (operationStatus.status === 'completed' && operationStatus.type === 'install') {
-                    const uninstallBtn = document.createElement('button');
-                    uninstallBtn.className = 'uninstall-btn text-red-600 hover:text-red-800 ml-2';
-                    uninstallBtn.innerHTML = '<i class="bx bx-trash"></i>';
-                    uninstallBtn.title = 'Uninstall from this client';
-                    uninstallBtn.onclick = async (e) => {
-                        e.stopPropagation(); // Prevent item selection
-                        e.preventDefault(); // Prevent form submission
-                        const confirmed = await showConfirm('Uninstall Confirmation', `Are you sure you want to uninstall ${serverName} from ${target}?`);
-                        if (confirmed) {
-                            // Add target to selectedClients for uninstallation
-                            window.selectedClients = [target];
-                            showInstallLoadingModal('Uninstalling');
-                            const serverList = {
-                                [serverName]: {
-                                    removeData: true // Include removal of associated data
-                                }
-                            };
-                            try {
-                                delayedAppendInstallLoadingMessage(`Uninstalling ${serverName} from ${target}...`);
-                                await uninstallTools(categoryName, serverList, [target]);
-                            } catch (error) {
-                                delayedAppendInstallLoadingMessage(`Error: ${error.message}`);
-                                throw error; // Re-throw to trigger error handling in uninstallTools
-                            }
-                        }
-                        return false; // Prevent form submission
-                    };
-                    statusContainer.appendChild(uninstallBtn);
-                }
-            }
-
-            clientItem.appendChild(statusContainer);
-
-            // Add client item to target div
-            targetDiv.appendChild(clientItem);
-        });
-
-        // Add section title at the top of the modal target div
-        if (!targetDiv.querySelector('.section-title')) {
-            const titleElement = document.createElement('h3');
-            titleElement.className = 'section-title text-lg font-semibold text-gray-700 mb-3';
-            titleElement.textContent = 'Client Status';
-            targetDiv.insertBefore(titleElement, targetDiv.firstChild);
-        }
-
-        // Handle environment variables section
-        const envRequirements = mcpServer.installation?.['env'] || mcpServer.installation?.env || {};
-
-        // Make sure environment variables section has a title
-        if (!envInputsDiv.querySelector('.section-title')) {
-            const envTitle = document.createElement('h3');
-            envTitle.className = 'section-title text-lg font-semibold text-gray-700 mb-3';
-            envTitle.textContent = 'Environment Variables';
-            envInputsDiv.insertBefore(envTitle, envInputsDiv.firstChild);
-        }
-
-        // Handle installation arguments section
-        const installation = mcpServer.installation;
-        if (installation) {
-            // Add section title
-            const argsTitle = document.createElement('h3');
-            argsTitle.className = 'section-title text-lg font-semibold text-gray-700 mb-3';
-            argsTitle.textContent = 'Arguments';
-            modalArguments.appendChild(argsTitle);
-
-            const argsContainer = document.createElement('div');
-            argsContainer.className = 'args-container mb-3';
-
-            // Add button to add new argument
-            const addButton = document.createElement('button');
-            addButton.type = 'button';
-            addButton.className = 'add-arg-button px-3 py-1 text-sm text-blue-600 hover:text-blue-800 border border-blue-600 hover:border-blue-800 rounded-md mb-2';
-            addButton.innerHTML = '<i class="bx bx-plus"></i> Add Argument';
-            argsContainer.appendChild(addButton);
-
-            // Function to create new argument input
-            const createArgInput = (value = '') => {
-                const argWrapper = document.createElement('div');
-                argWrapper.className = 'arg-wrapper flex items-center gap-2 mb-2';
-
-                const input = document.createElement('input');
-                input.type = 'text';
-                input.className = 'arg-input flex-grow';
-                input.value = value;
-                input.placeholder = 'Enter argument value';
-
-                const removeButton = document.createElement('button');
-                removeButton.type = 'button';
-                removeButton.className = 'remove-arg-button text-red-600 hover:text-red-800';
-                removeButton.innerHTML = '<i class="bx bx-trash"></i>';
-                removeButton.onclick = () => argWrapper.remove();
-
-                argWrapper.appendChild(input);
-                argWrapper.appendChild(removeButton);
-                return argWrapper;
-            };
-
-            // Add click handler for add button
-            addButton.onclick = () => {
-                argsContainer.appendChild(createArgInput());
-            };
-
-            // Create wrapper for args section
-            const argsWrapper = document.createElement('div');
-            argsWrapper.className = 'mb-3';
-
-            // Set default values from installation args if available
-            if (installation.args && Array.isArray(installation.args)) {
-                installation.args.forEach(arg => {
-                    argsContainer.appendChild(createArgInput(arg));
-                });
-            }
-
-            // Add initial empty input if no args
-            if (!installation.args || installation.args.length === 0) {
-                argsContainer.appendChild(createArgInput());
-            }
-
-            argsWrapper.appendChild(argsContainer);
-
-            // Add description
-            const description = document.createElement('p');
-            description.className = 'text-xs text-gray-500 mt-1';
-            description.textContent = 'Specify installation arguments, one per line. These will be used when installing the server.';
-            argsWrapper.appendChild(description);
-
-            modalArguments.appendChild(argsWrapper);
-
-            // If command type is python, add python environment input
-            if (installation.command === 'python' || installation.command.includes('python')) {
-                const pythonEnvWrapper = document.createElement('div');
-                pythonEnvWrapper.className = 'mt-4';
-
-                const pythonEnvLabel = document.createElement('label');
-                pythonEnvLabel.htmlFor = 'python_env';
-                pythonEnvLabel.className = 'block text-sm font-medium text-gray-700 mb-1';
-                pythonEnvLabel.textContent = 'Python Environment';
-
-                const pythonEnvInput = document.createElement('input');
-                pythonEnvInput.type = 'text';
-                pythonEnvInput.id = 'python_env';
-                pythonEnvInput.className = 'input-field';
-                pythonEnvInput.placeholder = 'Enter Python environment path (optional)';
-
-                pythonEnvWrapper.appendChild(pythonEnvLabel);
-                pythonEnvWrapper.appendChild(pythonEnvInput);
-
-                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.';
-                pythonEnvWrapper.appendChild(envDescription);
-
-                modalArguments.appendChild(pythonEnvWrapper);
-            }
-        }
-
-        if (Object.keys(envRequirements).length === 0) {
-            const noEnvMessage = document.createElement('p');
-            noEnvMessage.className = 'text-gray-600';
-            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];
-                const inputId = `env_${key}`;
-                const inputWrapper = document.createElement('div');
-                inputWrapper.className = 'mb-3';
-
-                const label = document.createElement('label');
-                label.htmlFor = inputId;
-                label.className = 'block text-sm font-medium text-gray-700 mb-1';
-                label.innerHTML = `${key} ${req.Required ? '<span class="text-red-500">*</span>' : ''}`;
-
-                const input = document.createElement('input');
-                input.type = req.isSecret ? 'password' : 'text';
-                input.id = inputId;
-                input.name = key;
-                input.placeholder = req.Description || key;
-
-                // 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';
-
-                inputWrapper.appendChild(label);
-                inputWrapper.appendChild(input);
-
-                if (req.Description) {
-                    const description = document.createElement('p');
-                    description.className = 'text-xs text-gray-500 mt-1';
-                    description.textContent = req.Description;
-                    inputWrapper.appendChild(description);
-                }
-
-                envInputsDiv.appendChild(inputWrapper);
-            });
-        }
-
-        // Handle server requirements section last
-        const serverRequirements = mcpServer.dependencies?.requirements || [];
-        const requirements = serverData.data.installationStatus?.requirementsStatus || {};
-
-        if (serverRequirements.length > 0) {
-            const reqHtml = serverRequirements.map(req => {
-                const status = requirements[req.name] || {};
-                let statusClass = status.installed
-                    ? 'text-green-600 bg-green-50'
-                    : 'text-yellow-600 bg-yellow-50';
-                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">
-                        <div class="flex justify-between items-center">
-                            <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>${versionDisplay}
-                                </div>
-                            </div>
-                            <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>
-                `;
-            }).join('');
-
-            modalRequirements.innerHTML = `
-                <h3 class="text-lg font-semibold text-gray-700 mb-3">Dependencies</h3>
-                <p class="text-sm text-gray-600 mb-4">These dependencies will be automatically installed when installing the server</p>
-                ${reqHtml}
-            `;
-        } else {
-            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) => {
-            e.preventDefault();
-
-            // Get all environment variables and arguments
-            const envVars = {};
-            const inputs = envInputsDiv.querySelectorAll('input');
-            inputs.forEach(input => {
-                if (input.name && input.value) {
-                    envVars[input.name] = input.value;
-                }
-            });
-
-            // Get installation arguments from individual input fields
-            const argInputs = modalArguments.querySelectorAll('.arg-input');
-            const args = Array.from(argInputs)
-                .map(input => input.value.trim())
-                .filter(val => val !== '');
-
-            // Get Python environment if available
-            const pythonEnvInput = document.getElementById('python_env');
-            const pythonEnv = pythonEnvInput?.value?.trim();
-
-            // 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
-                });
-            });
-
-            // Check if we have any requirements selected for update
-            const hasRequirementsToUpdate = requirementsToUpdate.length > 0;
-
-            // Only proceed if this isn't an uninstall operation
-            const uninstallBtn = document.querySelector('.uninstall-btn');
-            if (!uninstallBtn || !uninstallBtn.matches(':active')) {
-                // Get selected clients
-                const selectedTargets = window.selectedClients.length > 0 ?
-                    window.selectedClients :
-                    Array.from(document.querySelectorAll('.client-item.selected'))
-                        .map(item => item.dataset.target);
-
-                console.log('Selected targets:', selectedTargets);
-                console.log('Requirements to update:', requirementsToUpdate);
-                if (selectedTargets.length === 0 && !hasRequirementsToUpdate) {
-                    showToast('Please select at least one client to configure.', 'error');
-                    return;
-                }
-                window.selectedClients = selectedTargets;
-            }
-
-            // Call install function with selected targets
-            // Find installing message for the first selected target
-            let installingMessage = "Starting installation...";
-            const serverStatus = serverStatuses[serverName] || { installedStatus: {} };
-            if (window.selectedClients.length > 0) {
-                const target = window.selectedClients[0];
-                const msg = serverStatus.installedStatus?.[target]?.message;
-                if (msg) installingMessage = msg;
-            }
-
-            // Add requirements to update to serverInstallOptions if any
-            const serverInstallOptions = {
-                targetClients: window.selectedClients,
-                env: envVars,
-                args: args,
-                settings: pythonEnv ? { pythonEnv } : undefined
-            };
-
-            // Only add requirements if we have any to update
-            if (requirementsToUpdate.length > 0) {
-                serverInstallOptions.requirements = requirementsToUpdate;
-            }
-
-            // For installation, use the selectedTargets from the validation above
-            const targetsToUse = document.querySelector('.uninstall-btn:hover') ? [] : window.selectedClients;
-            handleBulkClientInstall(categoryName, serverName, targetsToUse, envVars, installingMessage, serverData, serverInstallOptions);
-        };
-
-    } catch (error) {
-        console.error("Error loading data:", error);
-        targetDiv.innerHTML = `<p class="text-red-500">Error: ${error.message}</p>`;
-    }
-
-    modal.style.display = "block";
-}
-
-// Function to handle bulk client installations
-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);
-    if (installModal) installModal.style.display = "none";
-
-    // If serverData is provided, extract the installing message from it (latest status)
-    if (serverData && serverData.data && serverData.data.installationStatus && serverData.data.installationStatus.serversStatus) {
-        const serverStatuses = serverData.data.installationStatus.serversStatus;
-        const serverStatus = serverStatuses[serverName] || { installedStatus: {} };
-        if (targets && targets.length > 0) {
-            const target = targets[0];
-            const msg = serverStatus.installedStatus?.[target]?.message;
-            if (msg) installingMessage = msg;
-        }
-        // Append the installing message for user visibility
-        if (installingMessage && installingMessage !== "Starting installation...") {
-            delayedAppendInstallLoadingMessage(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(requestBody)
-        });
-
-        console.log('[LoadingModal] fetch install response:', response);
-
-        if (!response.ok) {
-            const errorData = await response.text();
-            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:#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, pass requirements if available
-        const requirements = serverInstallOptions?.requirements || [];
-        pollInstallStatus(categoryName, serverName, targets, 2000, requirements);
-    } catch (error) {
-        console.error('[LoadingModal] Error applying configuration:', error);
-        delayedAppendInstallLoadingMessage(`<span style="color:red;">Error: ${error.message}</span>`);
-    }
-}
-
-// Poll install status for the given server/targets and optional requirements
-async function pollInstallStatus(categoryName, serverName, targets, interval = 2000, requirements = []) {
-    let lastMessages = {};
-    let lastRequirementMessages = {};
-    let lastReqirementErrorMessages = {};
-    let completionMessageSent = false;
-
-    const startTime = Date.now();
-    const maxTimeout = 10 * 60 * 1000; // 10 minutes in milliseconds
-
-    while (Date.now() - startTime < maxTimeout) {
-        try {
-            const resp = await fetch(`/api/categories/${categoryName}`);
-            if (resp.ok) {
-                const data = await resp.json();
-                // If requirements is empty and we have targets, get requirements from server's dependencies
-                if (requirements.length === 0 && targets?.length > 0) {
-                    const feedConfig = data?.data?.feedConfiguration;
-                    if (feedConfig?.mcpServers) {
-                        const server = feedConfig.mcpServers.find(s => s.name === serverName);
-                        if (server?.dependencies?.requirements) {
-                            requirements = server.dependencies.requirements;
-                        }
-                    }
-                }
-                const installationStatus = data?.data?.installationStatus || {};
-                const serverStatuses = installationStatus.serversStatus || {};
-                const requirementsStatus = installationStatus.requirementsStatus || {};
-                const serverStatus = serverStatuses[serverName] || { installedStatus: {} };
-
-                // 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] || {};
-                    if (reqStatus.installed === true && !reqStatus.operationStatus) {
-                        const msg = `Requirement [${req.name}] already installed.`;
-                        if (msg && lastRequirementMessages[req.name] !== msg) {
-                            delayedAppendInstallLoadingMessage(msg);
-                            lastRequirementMessages[req.name] = msg;
-                        }
-                        continue;
-                    }
-                    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" && status !== "failed") {
-                        allRequirementsCompleted = false;
-                    }
-
-                    // If a requirement failed, show an error
-                    if (status === "failed") {
-                        if (lastReqirementErrorMessages[req.name] !== reqStatus.error) {
-                            delayedAppendInstallLoadingMessage(`${req.name} failed: ${reqStatus.error}`);
-                            lastReqirementErrorMessages[req.name] = reqStatus.error;
-                        }
-                        if (lastRequirementMessages[req.name] !== msg) {
-                            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;
-                        }
-                    }
-                }
-
-                // 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 (error) {
-            console.error('[LoadingModal] Error polling status:', error);
-        }
-        await new Promise(resolve => setTimeout(resolve, interval)); // 2 second interval
-    }
-
-    // If we reach here, we've timed out
-    console.error('[LoadingModal] Operation timed out after 10 minutes');
-
-    // 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
-async function uninstallTools(categoryName, serverList, targets) {
-    // Get selected targets from window.selectedClients or the provided targets
-    const selectedTargets = window.selectedClients || (Array.isArray(targets) ? targets : [targets]);
-    
-    // Validate selected targets
-    if (!selectedTargets || selectedTargets.length === 0) {
-        showToast('Please select at least one client to uninstall.', 'error');
-        return;
-    }
-
-    try {
-        delayedAppendInstallLoadingMessage('Starting uninstallation...');
-
-        // Ensure serverList is an object where each key is a server name
-        if (Array.isArray(serverList)) {
-            const formattedServerList = {};
-            serverList.forEach(server => {
-                formattedServerList[server] = { removeData: true };
-            });
-            serverList = formattedServerList;
-        }
-
-        const response = await fetch(`/api/categories/${categoryName}/uninstall`, {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({
-                serverList: serverList,
-                options: {
-                    targets: selectedTargets,
-                    removeData: true
-                }
-            })
-        });
-
-        if (!response.ok) {
-            const errorData = await response.text();
-            throw new Error(`Uninstallation failed: ${errorData || response.statusText}`);
-        }
-
-        const result = await response.json();
-        if (!result.success) {
-            throw new Error(result.error || 'Uninstallation failed');
-        }
-
-        // Add completion message and trigger completion UI
-        delayedAppendInstallLoadingMessage(`Successfully uninstalled from ${selectedTargets.join(', ')}`, true);
-        
-        // Clear selected clients after successful uninstall
-        window.selectedClients = [];
-    } catch (error) {
-        console.error('Error uninstalling tools:', error);
-        delayedAppendInstallLoadingMessage(`Error: ${error.message}`, true);
-        showToast(`Error uninstalling tools: ${error.message}`, 'error');
-    }
-}
-
-// Close modal and ensure selected category persists
-function closeModal() {
-    document.getElementById('installModal').style.display = "none";
-
-    // Get the last selected category from localStorage
-    const lastSelected = localStorage.getItem('lastSelectedCategory');
-
-    // Refresh page and restore selection
-    if (lastSelected) {
-        setTimeout(() => {
-            window.location.href = window.location.pathname + '?category=' + encodeURIComponent(lastSelected);
-        }, 100);
-    } else {
-        location.reload();
-    }
-}
-
-// Close modal if clicked outside content
-function setupModalOutsideClick() {
-    window.onclick = function (event) {
-        const installModal = document.getElementById('installModal');
-        if (event.target == installModal) {
-            closeModal();
-        }
-    };
-}
-
+// Import all functionality from the modal folder
+import {
+    showInstallModal,
+    closeModal,
+    setupModalOutsideClick,
+    uninstallTools,
+    showInstallLoadingModal,
+    appendInstallLoadingMessage,
+    hideInstallLoadingModal
+} from './modal/index.js';
+
+// Re-export all modal functionality
+export {
+    showInstallModal,
+    closeModal,
+    setupModalOutsideClick,
+    uninstallTools
+};
+
+// Make certain functions available globally
+window.showInstallModal = showInstallModal;
 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 };
+// Initialize modal functionality when DOM is loaded
+document.addEventListener('DOMContentLoaded', () => {
+    setupModalOutsideClick();
+});