imcp 0.1.7 → 0.1.8-dev

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

@@ -0,0 +1 @@
+{"version":3,"names":["showToast","showConfirm"],"sources":["0"],"sourcesContent":["import { showToast, showConfirm } from '../notifications.js';\r\nimport { showInstallLoadingModal, updateOverallInstallStatus } from './loadingModal.js';\r\n// import { delayedAppendInstallLoadingMessage } from './messageQueue.js'; // No longer used\r\nimport { uninstallTools } from './installation.js';\r\nimport { handleBulkClientInstall } from './installation.js';\r\nimport { compareVersions } from './versionUtils.js';\r\n\r\n/**\r\n * Set up client items in the modal\r\n */\r\nexport function setupClientItems(targets, serverStatus, categoryName, serverName, targetDiv) {\r\n    targets.forEach(target => {\r\n        const operationStatus = serverStatus.installedStatus[target] || { status: 'not-installed', type: 'check', target: 'server' };\r\n\r\n        // Determine client status\r\n        let statusText = '';\r\n        let statusClass = '';\r\n\r\n        if (operationStatus.status === 'completed' && operationStatus.type === 'install') {\r\n            statusText = 'Installed';\r\n            statusClass = 'installed';\r\n        } else if (operationStatus.status === 'pending') {\r\n            statusText = 'Pending Requirements';\r\n            statusClass = 'pending';\r\n        } else if (operationStatus.status === 'in-progress') {\r\n            statusText = 'In Progress';\r\n            statusClass = 'pending';\r\n        } else if (operationStatus.status === 'failed') {\r\n            statusText = 'Failed';\r\n            statusClass = 'not-installed';\r\n        }\r\n\r\n        const isConfigured = operationStatus.status === 'completed' && operationStatus.type === 'install';\r\n        const isInProgress = operationStatus.status === 'in-progress';\r\n        const isSelectable = !isConfigured && !isInProgress;\r\n\r\n        const clientItem = createClientItem(target, statusText, statusClass, isSelectable, isConfigured, isInProgress);\r\n        setupClientItemListeners(clientItem, target, isSelectable);\r\n        setupUninstallButton(clientItem, statusText, operationStatus, target, categoryName, serverName, statusClass);\r\n        targetDiv.appendChild(clientItem);\r\n    });\r\n\r\n    addSectionTitle(targetDiv);\r\n}\r\n\r\n/**\r\n * Set up environment variables section in the modal\r\n */\r\nexport function setupEnvironmentVariables(mcpServer, envInputsDiv, targetData) {\r\n    // For SSE mode, don't show env section at all\r\n    if (mcpServer.mode === 'sse') {\r\n        envInputsDiv.style.display = 'none';\r\n        return;\r\n    }\r\n\r\n    const envRequirements = mcpServer.installation?.['env'] || mcpServer.installation?.env || {};\r\n    addEnvironmentTitle(envInputsDiv);\r\n\r\n    // Fetch system settings to get userConfigurations for env defaults\r\n    fetch('/api/settings')\r\n        .then(response => response.json())\r\n        .then(data => {\r\n            const userConfigurations = (data && data.data && data.data.userConfigurations) ? data.data.userConfigurations : {};\r\n            if (Object.keys(envRequirements).length === 0) {\r\n                addNoEnvMessage(envInputsDiv);\r\n            } else {\r\n                createEnvironmentInputs(envRequirements, envInputsDiv, targetData.clientMcpSettings, mcpServer.name, userConfigurations);\r\n            }\r\n        })\r\n        .catch(() => {\r\n            // fallback to old logic if fetch fails\r\n            if (Object.keys(envRequirements).length === 0) {\r\n                addNoEnvMessage(envInputsDiv);\r\n            } else {\r\n                createEnvironmentInputs(envRequirements, envInputsDiv, targetData.clientMcpSettings, mcpServer.name, {});\r\n            }\r\n        });\r\n}\r\n\r\n/**\r\n * Set up installation arguments section in the modal\r\n */\r\nexport function setupInstallationArguments(installation, modalArguments, categoryName, mcpServer) {\r\n    // For SSE mode, don't show arguments section at all\r\n    if (mcpServer?.mode === 'sse') {\r\n        modalArguments.style.display = 'none';\r\n        return;\r\n    }\r\n\r\n    if (!installation) return;\r\n\r\n    addArgumentsTitle(modalArguments);\r\n    const container = createArgumentsContainer();\r\n    modalArguments.appendChild(container);\r\n\r\n    if (installation.args && Array.isArray(installation.args)) {\r\n        installation.args.forEach(arg => {\r\n            container.appendChild(createArgumentInput(arg));\r\n        });\r\n    } else {\r\n        container.appendChild(createArgumentInput());\r\n    }\r\n\r\n    if (installation.command === 'python' || installation.command.includes('python')) {\r\n        addPythonEnvironmentInput(categoryName, mcpServer.name, modalArguments);\r\n    }\r\n}\r\n\r\n/**\r\n * Set up server requirements section in the modal\r\n */\r\nexport function setupServerRequirements(mcpServer, serverData, categoryName, serverName, modalRequirements) {\r\n    // For SSE mode, don't show requirements section at all\r\n    if (mcpServer.mode === 'sse') {\r\n        modalRequirements.style.display = 'none';\r\n        return;\r\n    }\r\n\r\n    const serverRequirements = mcpServer.dependencies?.requirements || [];\r\n    const requirements = serverData.data.installationStatus?.requirementsStatus || {};\r\n\r\n    if (serverRequirements.length > 0) {\r\n        const reqHtml = renderRequirements(serverRequirements, requirements, categoryName, serverName);\r\n        modalRequirements.innerHTML = `\r\n            <h3 class=\"text-lg font-semibold text-gray-700 mb-3\">Dependencies</h3>\r\n            <p class=\"text-sm text-gray-600 mb-4\">These dependencies will be automatically installed when installing the server</p>\r\n            ${reqHtml}\r\n        `;\r\n\r\n        setupUpdateToggles(modalRequirements);\r\n    } else {\r\n        modalRequirements.innerHTML = '<p class=\"text-gray-600\">No additional dependencies required.</p>';\r\n    }\r\n}\r\n\r\n/**\r\n * Set up the form submit handler\r\n */\r\nexport function setupFormSubmitHandler(form, envInputsDiv, modalArguments, modalRequirements, categoryName, serverName, serverStatuses, serverData, mcpServer) {\r\n    form.onsubmit = (e) => {\r\n        e.preventDefault();\r\n\r\n        const envVars = {};\r\n        const args = [];\r\n        const requirementsToUpdate = [];\r\n        let pythonEnv = undefined;\r\n\r\n        // Only collect env, args and requirements if not in SSE mode\r\n        if (mcpServer?.mode !== 'sse') {\r\n            const inputs = envInputsDiv.querySelectorAll('input');\r\n            inputs.forEach(input => {\r\n                if (input.name && input.value) {\r\n                    envVars[input.name] = input.value;\r\n                }\r\n            });\r\n\r\n            const argInputs = modalArguments.querySelectorAll('.arg-input');\r\n            args.push(...Array.from(argInputs)\r\n                .map(input => input.value.trim())\r\n                .filter(val => val !== ''));\r\n\r\n            const pythonEnvInput = document.getElementById('python_env');\r\n            pythonEnv = pythonEnvInput?.value?.trim();\r\n\r\n            const updateToggles = modalRequirements.querySelectorAll('.toggle-update:checked');\r\n            updateToggles.forEach(toggle => {\r\n                requirementsToUpdate.push({\r\n                    name: toggle.dataset.name,\r\n                    version: toggle.dataset.version\r\n                });\r\n            });\r\n        }\r\n\r\n        // Only POST userConfigurations and/or pythonEnvs if there is a difference, then proceed with install\r\n        fetch('/api/settings')\r\n            .then(response => response.json())\r\n            .then(data => {\r\n                const userConfigurations = (data && data.data && data.data.userConfigurations) ? data.data.userConfigurations : {};\r\n                const pythonEnvs = (data && data.data && data.data.pythonEnvs) ? data.data.pythonEnvs : {};\r\n                const updatedUserConfigurations = { ...userConfigurations };\r\n                const updatedPythonEnvs = { ...pythonEnvs };\r\n\r\n                Object.keys(envVars).forEach(key => {\r\n                    updatedUserConfigurations[key] = envVars[key];\r\n                });\r\n\r\n                // Check for userConfigurations difference\r\n                let needsUserConfigUpdate = false;\r\n                const allUserConfigKeys = new Set([...Object.keys(userConfigurations), ...Object.keys(envVars)]);\r\n                for (const key of allUserConfigKeys) {\r\n                    if (userConfigurations[key] !== updatedUserConfigurations[key]) {\r\n                        needsUserConfigUpdate = true;\r\n                        break;\r\n                    }\r\n                }\r\n\r\n                // Check for pythonEnvs difference\r\n                let needsPythonEnvUpdate = false;\r\n                if (pythonEnv !== undefined && pythonEnv !== pythonEnvs[`${categoryName}:${serverName}`]) {\r\n                    updatedPythonEnvs[`${categoryName}:${serverName}`] = pythonEnv;\r\n                    needsPythonEnvUpdate = true;\r\n                }\r\n\r\n                // If either needs update, POST the merged object\r\n                if (needsUserConfigUpdate || needsPythonEnvUpdate) {\r\n                    const postBody = {};\r\n                    if (needsUserConfigUpdate) postBody.userConfigurations = updatedUserConfigurations;\r\n                    if (needsPythonEnvUpdate) postBody.pythonEnvs = updatedPythonEnvs;\r\n                    fetch('/api/settings', {\r\n                        method: 'POST',\r\n                        headers: { 'Content-Type': 'application/json' },\r\n                        body: JSON.stringify(postBody)\r\n                    }).then(() => {\r\n                        proceedInstall();\r\n                    }).catch(() => {\r\n                        proceedInstall();\r\n                    });\r\n                } else {\r\n                    proceedInstall();\r\n                }\r\n            })\r\n            .catch(() => {\r\n                proceedInstall();\r\n            });\r\n\r\n        function proceedInstall() {\r\n            const hasRequirementsToUpdate = requirementsToUpdate.length > 0;\r\n\r\n            const uninstallBtn = document.querySelector('.uninstall-btn');\r\n            if (!uninstallBtn || !uninstallBtn.matches(':active')) {\r\n                const selectedTargets = window.selectedClients;\r\n                if (selectedTargets.length === 0 && !hasRequirementsToUpdate) {\r\n                    showToast('Please select at least one client to configure.', 'error');\r\n                    return;\r\n                }\r\n\r\n                let installingMessage = \"Starting installation...\";\r\n                const serverStatus = serverStatuses[serverName] || { installedStatus: {} };\r\n                if (selectedTargets.length > 0) {\r\n                    const target = selectedTargets[0];\r\n                    const msg = serverStatus.installedStatus?.[target]?.message;\r\n                    if (msg) installingMessage = msg;\r\n                }\r\n\r\n                const serverInstallOptions = {\r\n                    targetClients: selectedTargets,\r\n                    env: envVars,\r\n                    args: args,\r\n                    settings: pythonEnv ? { pythonEnv: pythonEnv } : {}\r\n                };\r\n\r\n                if (requirementsToUpdate.length > 0) {\r\n                    serverInstallOptions.requirements = requirementsToUpdate;\r\n                }\r\n\r\n                handleBulkClientInstall(categoryName, serverName, selectedTargets, envVars, installingMessage, serverData, serverInstallOptions);\r\n            }\r\n        }\r\n    };\r\n}\r\n\r\n// Helper functions\r\nfunction createClientItem(target, statusText, statusClass, isSelectable, isConfigured, isInProgress) {\r\n    const clientItem = document.createElement('div');\r\n    clientItem.className = 'client-item';\r\n    clientItem.dataset.target = target;\r\n    clientItem.dataset.selected = 'false';\r\n\r\n    // Create client info (name)\r\n    const clientInfo = document.createElement('div');\r\n    clientInfo.className = 'client-info';\r\n\r\n    // Client name label\r\n    const clientName = document.createElement('span');\r\n    clientName.className = 'text-sm font-medium text-gray-900';\r\n    clientName.textContent = target;\r\n\r\n    // Add elements to client info\r\n    clientInfo.appendChild(clientName);\r\n\r\n    // Add client info to client item\r\n    clientItem.appendChild(clientInfo);\r\n\r\n    if (!isSelectable) {\r\n        clientItem.classList.add('non-selectable');\r\n        if (isConfigured) {\r\n            clientItem.classList.add('installed-item');\r\n            clientItem.title = 'Already installed';\r\n        } else if (isInProgress) {\r\n            clientItem.classList.add('in-progress-item');\r\n            clientItem.title = 'Installation in progress';\r\n        }\r\n    }\r\n\r\n    return clientItem;\r\n}\r\n\r\nfunction setupClientItemListeners(clientItem, target, isSelectable) {\r\n    if (isSelectable) {\r\n        clientItem.addEventListener('click', () => {\r\n            const isSelected = clientItem.dataset.selected === 'true';\r\n            clientItem.dataset.selected = isSelected ? 'false' : 'true';\r\n\r\n            if (isSelected) {\r\n                clientItem.classList.remove('selected');\r\n                window.selectedClients = window.selectedClients.filter(c => c !== target);\r\n            } else {\r\n                clientItem.classList.add('selected');\r\n                if (!window.selectedClients.includes(target)) {\r\n                    window.selectedClients.push(target);\r\n                }\r\n            }\r\n        });\r\n    }\r\n}\r\n\r\nfunction setupUninstallButton(clientItem, statusText, operationStatus, target, categoryName, serverName, statusClass) {\r\n    if (statusText) {\r\n        const statusContainer = document.createElement('div');\r\n        statusContainer.className = 'status-container';\r\n\r\n        const statusBadge = document.createElement('span');\r\n        statusBadge.className = `status-badge ${statusClass}`;\r\n        statusBadge.textContent = statusText;\r\n        statusContainer.appendChild(statusBadge);\r\n\r\n        if (operationStatus.status === 'completed' && operationStatus.type === 'install') {\r\n            const uninstallBtn = createUninstallButton(target, categoryName, serverName);\r\n            statusContainer.appendChild(uninstallBtn);\r\n        }\r\n\r\n        clientItem.appendChild(statusContainer);\r\n    }\r\n}\r\n\r\nfunction createUninstallButton(target, categoryName, serverName) {\r\n    const uninstallBtn = document.createElement('button');\r\n    uninstallBtn.className = 'uninstall-btn text-red-600 hover:text-red-800 ml-2';\r\n    uninstallBtn.innerHTML = '<i class=\"bx bx-trash\"></i>';\r\n    uninstallBtn.title = 'Uninstall from this client';\r\n\r\n    uninstallBtn.onclick = async (e) => {\r\n        e.stopPropagation();\r\n        e.preventDefault();\r\n\r\n        const confirmed = await showConfirm('Uninstall Confirmation',\r\n            `Are you sure you want to uninstall ${serverName} from ${target}?`);\r\n\r\n        if (confirmed) {\r\n            window.selectedClients = [target];\r\n            showInstallLoadingModal('Uninstalling');\r\n            const serverList = {\r\n                [serverName]: {\r\n                    removeData: true\r\n                }\r\n            };\r\n\r\n            try {\r\n                updateOverallInstallStatus('in-progress', `Uninstalling ${serverName} from ${target}...`);\r\n                await uninstallTools(categoryName, serverList, [target]);\r\n                // uninstallTools will now handle its own final status update via updateOverallInstallStatus\r\n            } catch (error) {\r\n                updateOverallInstallStatus('failed', `Error during uninstall: ${error.message}`);\r\n                // No need to throw here if uninstallTools handles its errors by updating status\r\n            }\r\n        }\r\n        return false;\r\n    };\r\n\r\n    return uninstallBtn;\r\n}\r\n\r\nfunction addSectionTitle(targetDiv) {\r\n    if (!targetDiv.querySelector('.section-title')) {\r\n        const titleElement = document.createElement('h3');\r\n        titleElement.className = 'section-title text-lg font-semibold text-gray-700 mb-3';\r\n        titleElement.textContent = 'Client Status';\r\n        targetDiv.insertBefore(titleElement, targetDiv.firstChild);\r\n    }\r\n}\r\n\r\nfunction addEnvironmentTitle(envInputsDiv) {\r\n    if (!envInputsDiv.querySelector('.section-title')) {\r\n        const envTitle = document.createElement('h3');\r\n        envTitle.className = 'section-title text-lg font-semibold text-gray-700 mb-3';\r\n        envTitle.textContent = 'Environment Variables';\r\n        envInputsDiv.insertBefore(envTitle, envInputsDiv.firstChild);\r\n    }\r\n}\r\n\r\nfunction addNoEnvMessage(envInputsDiv) {\r\n    const noEnvMessage = document.createElement('p');\r\n    noEnvMessage.className = 'text-gray-600';\r\n    noEnvMessage.textContent = 'No environment variables required for this MCP server.';\r\n    envInputsDiv.appendChild(noEnvMessage);\r\n}\r\n\r\nfunction createEnvironmentInputs(envRequirements, envInputsDiv, clientSettings, serverName, userConfigurations = {}) {\r\n    Object.keys(envRequirements).forEach(key => {\r\n        const req = envRequirements[key];\r\n        const inputId = `env_${key}`;\r\n        const inputWrapper = document.createElement('div');\r\n        inputWrapper.className = 'mb-3';\r\n\r\n        const label = document.createElement('label');\r\n        label.htmlFor = inputId;\r\n        label.className = 'block text-sm font-medium text-gray-700 mb-1';\r\n        label.innerHTML = `${key} ${req.Required ? '<span class=\"text-red-500\">*</span>' : ''}`;\r\n\r\n        const input = document.createElement('input');\r\n        input.type = req.isSecret ? 'password' : 'text';\r\n        input.id = inputId;\r\n        input.name = key;\r\n        input.placeholder = req.Description || key;\r\n        input.required = req.Required;\r\n        input.className = 'input-field';\r\n\r\n        // For default value, first check userConfigurations, then client settings, then provided default\r\n        let defaultValue = req.Default || '';\r\n\r\n        // Use userConfigurations if present\r\n        if (userConfigurations && userConfigurations[key]) {\r\n            defaultValue = userConfigurations[key];\r\n        } else if (clientSettings && clientSettings.MSRooCode &&\r\n            clientSettings.MSRooCode.mcpServers &&\r\n            clientSettings.MSRooCode.mcpServers[serverName] &&\r\n            clientSettings.MSRooCode.mcpServers[serverName].env &&\r\n            clientSettings.MSRooCode.mcpServers[serverName].env[key]) {\r\n            defaultValue = clientSettings.MSRooCode.mcpServers[serverName].env[key];\r\n        }\r\n\r\n        input.value = defaultValue;\r\n\r\n        inputWrapper.appendChild(label);\r\n        inputWrapper.appendChild(input);\r\n\r\n        if (req.Description) {\r\n            const description = document.createElement('p');\r\n            description.className = 'text-xs text-gray-500 mt-1';\r\n            description.textContent = req.Description;\r\n            inputWrapper.appendChild(description);\r\n        }\r\n\r\n        envInputsDiv.appendChild(inputWrapper);\r\n    });\r\n}\r\n\r\nfunction addArgumentsTitle(modalArguments) {\r\n    const argsTitle = document.createElement('h3');\r\n    argsTitle.className = 'section-title text-lg font-semibold text-gray-700 mb-3';\r\n    argsTitle.textContent = 'Arguments';\r\n    modalArguments.appendChild(argsTitle);\r\n}\r\n\r\nfunction createArgumentsContainer() {\r\n    const container = document.createElement('div');\r\n    container.className = 'args-container mb-3';\r\n\r\n    const addButton = document.createElement('button');\r\n    addButton.type = 'button';\r\n    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';\r\n    addButton.innerHTML = '<i class=\"bx bx-plus\"></i> Add Argument';\r\n    addButton.onclick = () => container.appendChild(createArgumentInput());\r\n\r\n    container.appendChild(addButton);\r\n    return container;\r\n}\r\n\r\nfunction createArgumentInput(value = '') {\r\n    const argWrapper = document.createElement('div');\r\n    argWrapper.className = 'arg-wrapper flex items-center gap-2 mb-2';\r\n\r\n    const input = document.createElement('input');\r\n    input.type = 'text';\r\n    input.className = 'arg-input flex-grow';\r\n    input.value = value;\r\n    input.placeholder = 'Enter argument value';\r\n\r\n    const removeButton = document.createElement('button');\r\n    removeButton.type = 'button';\r\n    removeButton.className = 'remove-arg-button text-red-600 hover:text-red-800';\r\n    removeButton.innerHTML = '<i class=\"bx bx-trash\"></i>';\r\n    removeButton.onclick = () => argWrapper.remove();\r\n\r\n    argWrapper.appendChild(input);\r\n    argWrapper.appendChild(removeButton);\r\n    return argWrapper;\r\n}\r\n\r\nfunction addPythonEnvironmentInput(categoryName, serverName, modalArguments) {\r\n    const pythonEnvWrapper = document.createElement('div');\r\n    pythonEnvWrapper.className = 'mt-4';\r\n\r\n    const pythonEnvLabel = document.createElement('label');\r\n    pythonEnvLabel.htmlFor = 'python_env';\r\n    pythonEnvLabel.className = 'block text-sm font-medium text-gray-700 mb-1';\r\n    pythonEnvLabel.textContent = 'Python Environment';\r\n\r\n    const pythonEnvInput = document.createElement('input');\r\n    pythonEnvInput.type = 'text';\r\n    pythonEnvInput.id = 'python_env';\r\n    pythonEnvInput.className = 'input-field';\r\n    pythonEnvInput.placeholder = 'Enter Python environment path (optional)';\r\n\r\n    const envDescription = document.createElement('p');\r\n    envDescription.className = 'text-xs text-gray-500 mt-1';\r\n    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';\r\n\r\n    pythonEnvWrapper.appendChild(pythonEnvLabel);\r\n    pythonEnvWrapper.appendChild(pythonEnvInput);\r\n    pythonEnvWrapper.appendChild(envDescription);\r\n    modalArguments.appendChild(pythonEnvWrapper);\r\n    // Fetch system settings and set default value for python_env\r\n    fetch('/api/settings')\r\n        .then(response => response.json())\r\n        .then(data => {\r\n            if (data && data.data && data.data.pythonEnvs) {\r\n                pythonEnvInput.value = data.data.pythonEnvs[`${categoryName}:${serverName}`] || data.data.pythonEnvs['system'] || '';\r\n            }\r\n        })\r\n        .catch(() => {\r\n            // Ignore errors, leave input empty\r\n        });\r\n}\r\n\r\nfunction renderRequirements(serverRequirements, requirements, categoryName, serverName) {\r\n    return serverRequirements.map(req => {\r\n        const status = requirements[req.name] || {};\r\n        let statusClass = status.installed\r\n            ? 'text-green-600 bg-green-50'\r\n            : 'text-yellow-600 bg-yellow-50';\r\n        let statusText = status.installed ? 'Installed' : 'Required';\r\n        let versionDisplay = status.version ? ` • <span class=\"font-medium\">${status.version}</span>` : '';\r\n        let updateToggle = '';\r\n\r\n        // Check if there's an available update\r\n        if (status.installed && status.availableUpdate && status.availableUpdate.version) {\r\n            if (status.version && compareVersions(status.availableUpdate.version, status.version) > 0) {\r\n                // Show version update information with yellow color and icon\r\n                statusClass = 'text-yellow-600 bg-yellow-50';\r\n                statusText = `<span style=\"color: #f59e0b; font-weight: bold; margin-right: 5px;\">↑</span>${status.availableUpdate.version}`;\r\n\r\n                // Create a toggle switch for update\r\n                updateToggle = `\r\n                    <label class=\"inline-flex items-center cursor-pointer ml-2\">\r\n                        <input type=\"checkbox\" class=\"toggle-update sr-only\"\r\n                            data-name=\"${req.name}\"\r\n                            data-version=\"${status.availableUpdate.version}\"\r\n                            data-category=\"${categoryName}\"\r\n                            data-server=\"${serverName}\">\r\n                        <div class=\"relative w-10 h-5 bg-gray-200 rounded-full toggle-bg\">\r\n                            <div class=\"absolute inset-y-0 left-0 w-5 h-5 bg-white rounded-full transition-transform duration-300 transform\"></div>\r\n                        </div>\r\n                        <span class=\"ml-2 text-sm text-gray-700\">Update</span>\r\n                    </label>\r\n                `;\r\n            }\r\n        }\r\n\r\n        return `\r\n            <div class=\"border border-gray-200 p-3 rounded-lg mb-2 hover:bg-gray-50\">\r\n                <div class=\"flex justify-between items-center\">\r\n                    <div>\r\n                        <div class=\"font-semibold text-gray-800\">${req.name}</div>\r\n                        <div class=\"text-sm text-gray-600 shadow-sm p-1 rounded bg-gray-50\">\r\n                            <span class=\"font-medium\">${status.type || 'package'}</span>${versionDisplay}\r\n                        </div>\r\n                    </div>\r\n                    <div class=\"flex items-center\">\r\n                        <span class=\"${statusClass} inline-flex items-center px-3 py-1 rounded-full text-sm\">\r\n                            ${statusText}\r\n                        </span>\r\n                        ${updateToggle}\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        `;\r\n    }).join('');\r\n}\r\n\r\nfunction setupUpdateToggles(modalRequirements) {\r\n    const updateToggles = modalRequirements.querySelectorAll('.toggle-update');\r\n    updateToggles.forEach(toggle => {\r\n        toggle.addEventListener('change', function () {\r\n            const toggleBg = this.parentElement.querySelector('.toggle-bg');\r\n            if (this.checked) {\r\n                toggleBg.classList.add('bg-blue-500');\r\n                toggleBg.querySelector('div').classList.add('translate-x-5');\r\n            } else {\r\n                toggleBg.classList.remove('bg-blue-500');\r\n                toggleBg.querySelector('div').classList.remove('translate-x-5');\r\n            }\r\n        });\r\n    });\r\n}"],"mappings":"OAASA,UAAWC,gBAAmB,6B","ignoreList":[]}

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

@@ -1,37 +1,2 @@
-/**
- * Close modal and ensure selected category persists
- */
-export 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();
-    }
-}
-
-/**
- * Setup toggle switch styles
- */
-export function setupToggleStyles() {
-    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 function closeModal(){document.getElementById("installModal").style.display="none";const o=localStorage.getItem("lastSelectedCategory");o?setTimeout((()=>{window.location.href=window.location.pathname+"?category="+encodeURIComponent(o)}),100):location.reload()}export function setupToggleStyles(){const o=document.createElement("style");o.textContent="\n        .toggle-bg.bg-blue-500 {\n            background-color: #3b82f6;\n        }\n        .toggle-bg {\n            transition: background-color 0.3s;\n        }\n        .toggle-bg div {\n            transition: transform 0.3s;\n        }\n    ",document.head.appendChild(o)}
+//# sourceMappingURL=modalUtils.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":[],"mappings":"","ignoreList":[]}

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

@@ -1,20 +1,2 @@
-/**
- * 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
- */
-export 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;
-}
+export function compareVersions(t,r){const e=t.split(".").map(Number),n=r.split(".").map(Number);for(let t=0;t<Math.max(e.length,n.length);t++){const r=e[t]||0,o=n[t]||0;if(r>o)return 1;if(r<o)return-1}return 0}
+//# sourceMappingURL=versionUtils.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":[],"mappings":"","ignoreList":[]}

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

@@ -1,42 +1,2 @@
-// Import all functionality from the modal folder
-import {
-    showInstallModal,
-    closeModal,
-    uninstallTools,
-    showInstallLoadingModal,
-    // 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,
-    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; // Removed
-window.hideInstallLoadingModal = hideInstallLoadingModal;
-
-// 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}")`);
-    }
-});
+import{showInstallModal,closeModal,uninstallTools,showInstallLoadingModal,hideInstallLoadingModal}from"./modal/index.js";export{showInstallModal,closeModal,uninstallTools,showInstallLoadingModal,hideInstallLoadingModal};window.showInstallModal=showInstallModal,window.showInstallLoadingModal=showInstallLoadingModal,window.hideInstallLoadingModal=hideInstallLoadingModal,document.addEventListener("refreshMainModalContent",(()=>{const l=localStorage.getItem("lastSelectedCategory"),o=localStorage.getItem("lastSelectedServerName"),a=l&&""!==l.trim()&&"undefined"!==l&&"null"!==l,d=o&&""!==o.trim()&&"undefined"!==o&&"null"!==o;a&&d&&window.showInstallModal(l,o)}));
+//# sourceMappingURL=modal.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":[],"mappings":"","ignoreList":[]}

package/dist/web/public/js/notifications.js

@@ -1,137 +1,2 @@
-// Function to show a toast notification
-function showToast(message, type = 'success') {
-    const alertContainer = document.querySelector('.alert-container');
-    if (!alertContainer) {
-        console.error('Alert container not found. Notifications will not be displayed.');
-        return;
-    }
-    const alertId = `alert-${Date.now()}`;
-
-    let iconHtml = '';
-    switch (type) {
-        case 'success':
-            iconHtml = '<i class="bi bi-check-circle-fill alert-icon"></i>';
-            break;
-        case 'error':
-            iconHtml = '<i class="bi bi-x-octagon-fill alert-icon"></i>'; // Changed icon for error
-            break;
-        case 'info':
-            iconHtml = '<i class="bi bi-info-circle-fill alert-icon"></i>';
-            break;
-        case 'warning':
-            iconHtml = '<i class="bi bi-exclamation-triangle-fill alert-icon"></i>';
-            break;
-        default:
-            iconHtml = '<i class="bi bi-bell-fill alert-icon"></i>'; // Default icon
-    }
-
-    const alertHtml = `
-        <div id="${alertId}" class="alert alert-${type}" role="alert">
-            ${iconHtml}
-            <span>${message}</span>
-            <button type="button" class="btn-close" aria-label="Close"></button>
-        </div>
-    `;
-
-    alertContainer.insertAdjacentHTML('beforeend', alertHtml);
-
-    const alertElement = document.getElementById(alertId);
-    if (!alertElement) return;
-
-    // Trigger the slide-in animation
-    // Adding a slight delay to ensure the element is in the DOM before adding the 'show' class
-    requestAnimationFrame(() => {
-        requestAnimationFrame(() => { // Double requestAnimationFrame for more reliable transition start
-            alertElement.classList.add('show');
-        });
-    });
-
-
-    const closeButton = alertElement.querySelector('.btn-close');
-
-    const dismissAlert = () => {
-        alertElement.classList.remove('show'); // Trigger slide-out animation
-        // Wait for fade out animation to complete before removing
-        alertElement.addEventListener('transitionend', () => {
-            alertElement.remove();
-        }, { once: true }); // Ensure event listener is removed after execution
-    };
-
-    if (closeButton) {
-        closeButton.addEventListener('click', dismissAlert);
-    }
-
-    // Auto-dismiss after 5 seconds (increased from 3)
-    setTimeout(dismissAlert, 5000);
-}
-
-// Function to show a confirmation dialog using custom modal system
-function showConfirm(title, message) {
-    return new Promise((resolve) => {
-        const modalId = `confirm-modal-${Date.now()}`;
-        const modalHtml = `
-            <div id="${modalId}" class="modal" style="display: none;">
-                <div class="modal-content" style="max-width: 400px; margin: 15% auto;">
-                    <div class="modal-header">
-                        <h3 class="text-lg font-semibold text-gray-700">${title}</h3>
-                    </div>
-                    <div style="margin: 1rem 0;">
-                        ${message}
-                    </div>
-                    <div style="display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 1rem;">
-                        <button type="button" class="cancel-button px-4 py-2 text-gray-600 hover:text-gray-800 font-medium rounded-lg hover:bg-gray-100 transition-colors">
-                            Cancel
-                        </button>
-                        <button type="button" class="confirm-button submit-button">
-                            Confirm
-                        </button>
-                    </div>
-                </div>
-            </div>
-        `;
-
-        document.body.insertAdjacentHTML('beforeend', modalHtml);
-
-        const modalElement = document.getElementById(modalId);
-        // Trigger display after a short delay to allow CSS transitions if any are added later for modals
-        requestAnimationFrame(() => {
-            modalElement.style.display = 'block';
-        });
-
-
-        // Handle confirm button click
-        modalElement.querySelector('.confirm-button').addEventListener('click', () => {
-            modalElement.style.display = 'none';
-            modalElement.remove();
-            resolve(true);
-        });
-
-        // Handle cancel button click
-        modalElement.querySelector('.cancel-button').addEventListener('click', () => {
-            modalElement.style.display = 'none';
-            modalElement.remove();
-            resolve(false);
-        });
-
-        // Handle click outside modal
-        modalElement.addEventListener('click', (event) => {
-            if (event.target === modalElement) {
-                modalElement.style.display = 'none';
-                modalElement.remove();
-                resolve(false);
-            }
-        });
-    });
-}
-
-export { showToast, showConfirm };
-
-// Display install notification after page reload
-document.addEventListener('DOMContentLoaded', () => {
-    const data = sessionStorage.getItem('installNotification');
-    if (data) {
-        const { message, type } = JSON.parse(data);
-        showToast(message, type);
-        sessionStorage.removeItem('installNotification');
-    }
-});
+function showToast(e,t="success"){const n=document.querySelector(".alert-container");if(!n)return;const o=`alert-${Date.now()}`;let i="";switch(t){case"success":i='<i class="bi bi-check-circle-fill alert-icon"></i>';break;case"error":i='<i class="bi bi-x-octagon-fill alert-icon"></i>';break;case"info":i='<i class="bi bi-info-circle-fill alert-icon"></i>';break;case"warning":i='<i class="bi bi-exclamation-triangle-fill alert-icon"></i>';break;default:i='<i class="bi bi-bell-fill alert-icon"></i>'}const s=`\n        <div id="${o}" class="alert alert-${t}" role="alert">\n            ${i}\n            <span>${e}</span>\n            <button type="button" class="btn-close" aria-label="Close"></button>\n        </div>\n    `;n.insertAdjacentHTML("beforeend",s);const a=document.getElementById(o);if(!a)return;requestAnimationFrame((()=>{requestAnimationFrame((()=>{a.classList.add("show")}))}));const l=a.querySelector(".btn-close"),r=()=>{a.classList.remove("show"),a.addEventListener("transitionend",(()=>{a.remove()}),{once:!0})};l&&l.addEventListener("click",r),setTimeout(r,5e3)}function showConfirm(e,t){return new Promise((n=>{const o=`confirm-modal-${Date.now()}`,i=`\n            <div id="${o}" class="modal" style="display: none;">\n                <div class="modal-content" style="max-width: 400px; margin: 15% auto;">\n                    <div class="modal-header">\n                        <h3 class="text-lg font-semibold text-gray-700">${e}</h3>\n                    </div>\n                    <div style="margin: 1rem 0;">\n                        ${t}\n                    </div>\n                    <div style="display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 1rem;">\n                        <button type="button" class="cancel-button px-4 py-2 text-gray-600 hover:text-gray-800 font-medium rounded-lg hover:bg-gray-100 transition-colors">\n                            Cancel\n                        </button>\n                        <button type="button" class="confirm-button submit-button">\n                            Confirm\n                        </button>\n                    </div>\n                </div>\n            </div>\n        `;document.body.insertAdjacentHTML("beforeend",i);const s=document.getElementById(o);requestAnimationFrame((()=>{s.style.display="block"})),s.querySelector(".confirm-button").addEventListener("click",(()=>{s.style.display="none",s.remove(),n(!0)})),s.querySelector(".cancel-button").addEventListener("click",(()=>{s.style.display="none",s.remove(),n(!1)})),s.addEventListener("click",(e=>{e.target===s&&(s.style.display="none",s.remove(),n(!1))}))}))}export{showToast,showConfirm};document.addEventListener("DOMContentLoaded",(()=>{const e=sessionStorage.getItem("installNotification");if(e){const{message:t,type:n}=JSON.parse(e);showToast(t,n),sessionStorage.removeItem("installNotification")}}));
+//# sourceMappingURL=notifications.js.map

package/dist/web/public/js/notifications.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":[],"mappings":"","ignoreList":[]}