imcp 0.0.12 → 0.0.14

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

@@ -0,0 +1,58 @@
+// Import all modal-related functionality
+import { compareVersions } from './versionUtils.js';
+import { delayedAppendInstallLoadingMessage } from './messageQueue.js';
+import { showInstallLoadingModal, appendInstallLoadingMessage, hideInstallLoadingModal } from './loadingModal.js';
+import { closeModal, setupModalOutsideClick } from './modalUtils.js';
+import { handleBulkClientInstall, uninstallTools } from './installation.js';
+import { showInstallModal } from './installModal.js';
+import {
+    setupClientItems,
+    setupEnvironmentVariables,
+    setupInstallationArguments,
+    setupServerRequirements,
+    setupFormSubmitHandler
+} from './modalSetup.js';
+
+// Export all modal functionality
+export {
+    // Version utilities
+    compareVersions,
+
+    // Message queue
+    delayedAppendInstallLoadingMessage,
+
+    // Loading modal
+    showInstallLoadingModal,
+    appendInstallLoadingMessage,
+    hideInstallLoadingModal,
+
+    // Modal utilities
+    closeModal,
+    setupModalOutsideClick,
+
+    // Installation
+    handleBulkClientInstall,
+    uninstallTools,
+
+    // Install modal
+    showInstallModal,
+
+    // Modal setup
+    setupClientItems,
+    setupEnvironmentVariables,
+    setupInstallationArguments,
+    setupServerRequirements,
+    setupFormSubmitHandler
+};
+
+// Initialize modal functionality
+document.addEventListener('DOMContentLoaded', () => {
+    setupModalOutsideClick();
+});
+
+// Make certain functions available globally
+window.showInstallModal = showInstallModal;
+window.showInstallLoadingModal = showInstallLoadingModal;
+window.appendInstallLoadingMessage = appendInstallLoadingMessage;
+window.hideInstallLoadingModal = hideInstallLoadingModal;
+window.uninstallTools = uninstallTools;

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

@@ -0,0 +1,227 @@
+import { showLoadingModal, appendLoadingMessage } from './loadingUI.js';
+import { compareVersions } from './version.js';
+
+/**
+ * Handle bulk client installations
+ * @param {string} categoryName Category name
+ * @param {string} serverName Server name
+ * @param {string[]} targets Target clients
+ * @param {Object} options Installation options
+ */
+export async function handleInstallation(categoryName, serverName, targets, options = {}) {
+    const { envVars = {}, installingMessage = "Starting installation...", serverData = null } = options;
+
+    hideInstallModal();
+    initializeInstallation(installingMessage, serverData, serverName, targets);
+
+    try {
+        await executeInstallation(categoryName, serverName, targets, options);
+    } catch (error) {
+        handleInstallationError(error);
+    }
+}
+
+/**
+ * Handle uninstallation of tools
+ * @param {string} categoryName Category name
+ * @param {Object|Array} serverList Servers to uninstall
+ * @param {string[]} targets Target clients
+ */
+export async function handleUninstallation(categoryName, serverList, targets) {
+    const selectedTargets = getSelectedTargets(targets);
+    validateTargets(selectedTargets);
+
+    try {
+        await executeUninstallation(categoryName, serverList, selectedTargets);
+    } catch (error) {
+        handleUninstallationError(error);
+        throw error;
+    }
+}
+
+// Private helper functions
+
+function hideInstallModal() {
+    const installModal = document.getElementById('installModal');
+    if (installModal) {
+        installModal.style.display = "none";
+    }
+}
+
+function initializeInstallation(installingMessage, serverData, serverName, targets) {
+    showLoadingModal();
+
+    if (hasExistingStatus(serverData, serverName, targets)) {
+        const existingMessage = getExistingMessage(serverData, serverName, targets[0]);
+        if (existingMessage && existingMessage !== "Starting installation...") {
+            appendLoadingMessage(existingMessage);
+        }
+    }
+
+    appendLoadingMessage(installingMessage);
+}
+
+function hasExistingStatus(serverData, serverName, targets) {
+    return serverData?.data?.installationStatus?.serversStatus &&
+        targets?.length > 0;
+}
+
+function getExistingMessage(serverData, serverName, target) {
+    const serverStatuses = serverData.data.installationStatus.serversStatus;
+    const serverStatus = serverStatuses[serverName] || { installedStatus: {} };
+    return serverStatus.installedStatus?.[target]?.message;
+}
+
+async function executeInstallation(categoryName, serverName, targets, options) {
+    appendLoadingMessage("Installing, please wait...");
+
+    const requestBody = buildInstallRequestBody(serverName, targets, options);
+    const response = await fetchWithErrorHandling(
+        `api/categories/${categoryName}/install`,
+        requestBody
+    );
+
+    if (response.success) {
+        startStatusPolling(categoryName, serverName, targets, options);
+    }
+}
+
+function buildInstallRequestBody(serverName, targets, options) {
+    const { envVars = {}, args = [], pythonEnv, requirements = [] } = options;
+
+    const serverOptions = {
+        targetClients: targets,
+        env: envVars,
+        args: args,
+        settings: pythonEnv ? { pythonEnv } : undefined
+    };
+
+    if (requirements.length > 0) {
+        serverOptions.requirements = requirements;
+    }
+
+    return {
+        serverList: {
+            [serverName]: serverOptions
+        }
+    };
+}
+
+async function executeUninstallation(categoryName, serverList, selectedTargets) {
+    appendLoadingMessage('Starting uninstallation...');
+
+    const formattedServerList = formatServerList(serverList);
+    await fetchWithErrorHandling(
+        `api/categories/${categoryName}/uninstall`,
+        {
+            serverList: formattedServerList,
+            options: {
+                targets: selectedTargets,
+                removeData: true
+            }
+        }
+    );
+
+    appendLoadingMessage(`Successfully uninstalled from ${selectedTargets.join(', ')}`, true);
+    window.selectedClients = [];
+}
+
+function formatServerList(serverList) {
+    if (Array.isArray(serverList)) {
+        return serverList.reduce((acc, server) => {
+            acc[server] = { removeData: true };
+            return acc;
+        }, {});
+    }
+    return serverList;
+}
+
+async function fetchWithErrorHandling(endpoint, body) {
+    const response = await fetch(endpoint, {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+            'Accept': 'application/json'
+        },
+        body: JSON.stringify(body)
+    });
+
+    if (!response.ok) {
+        const errorData = await response.text();
+        throw new Error(`Operation failed: ${errorData || response.statusText}`);
+    }
+
+    const result = await response.json();
+    if (!result.success) {
+        throw new Error(result.error || 'Operation failed');
+    }
+
+    return result;
+}
+
+function handleInstallationError(error) {
+    console.error('[LoadingModal] Error:', error);
+    appendLoadingMessage(`<span style="color:red;">Error: ${error.message}</span>`);
+}
+
+function handleUninstallationError(error) {
+    console.error('Error uninstalling tools:', error);
+    appendLoadingMessage(`Error: ${error.message}`, true);
+}
+
+function getSelectedTargets(targets) {
+    return window.selectedClients || (Array.isArray(targets) ? targets : [targets]);
+}
+
+function validateTargets(selectedTargets) {
+    if (!selectedTargets || selectedTargets.length === 0) {
+        throw new Error('Please select at least one client to uninstall.');
+    }
+}
+
+// Status polling functionality
+async function startStatusPolling(categoryName, serverName, targets, options) {
+    const { requirements = [] } = options;
+    let lastMessages = {};
+    let lastRequirementMessages = {};
+    let lastRequirementErrorMessages = {};
+    let completionMessageSent = false;
+
+    const startTime = Date.now();
+    const maxTimeout = 10 * 60 * 1000; // 10 minutes
+
+    while (Date.now() - startTime < maxTimeout) {
+        try {
+            const status = await pollStatus(categoryName, serverName, targets, requirements);
+
+            if (status.isComplete) {
+                sendCompletionMessage(status, targets);
+                return;
+            }
+
+            updateMessages(status, lastMessages, lastRequirementMessages, lastRequirementErrorMessages);
+        } catch (error) {
+            console.error('[LoadingModal] Error polling status:', error);
+        }
+
+        await new Promise(resolve => setTimeout(resolve, 2000));
+    }
+
+    handlePollingTimeout(completionMessageSent);
+}
+
+async function pollStatus(categoryName, serverName, targets, requirements) {
+    const response = await fetch(`api/categories/${categoryName}`);
+    if (!response.ok) {
+        throw new Error('Failed to fetch status');
+    }
+
+    const data = await response.json();
+    return processStatusData(data, serverName, targets, requirements);
+}
+
+function processStatusData(data, serverName, targets, requirements) {
+    // Implementation details for processing status data
+    // This would include checking requirements status and target status
+    // Returns an object with status information
+}

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

@@ -0,0 +1,163 @@
+import { showToast, showConfirm } from '../notifications.js';
+import { compareVersions } from './versionUtils.js';
+import { delayedAppendInstallLoadingMessage } from './messageQueue.js';
+import { showInstallLoadingModal } from './loadingModal.js';
+import { setupModalOutsideClick, closeModal, setupToggleStyles } from './modalUtils.js';
+import { handleBulkClientInstall, uninstallTools } from './installation.js';
+import {
+    setupClientItems,
+    setupEnvironmentVariables,
+    setupInstallationArguments,
+    setupServerRequirements,
+    setupFormSubmitHandler
+} from './modalSetup.js';
+
+// Initialize modal functionality when DOM is loaded
+document.addEventListener('DOMContentLoaded', () => {
+    setupModalOutsideClick();
+    setupToggleStyles();
+});
+
+/**
+ * Show install modal for MCP tools
+ * @param {string} categoryName - The category name
+ * @param {string} serverName - The server name
+ * @param {Function} callback - Optional callback function
+ */
+export 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');
+        }
+
+        // Add mode indicator
+        const modeSpan = document.createElement('span');
+        modeSpan.textContent = mcpServer.mode || 'stdio';
+        modeSpan.className = 'ml-2 px-2 py-0.5 text-xs bg-gray-200 text-gray-600 rounded';
+        title.appendChild(modeSpan);
+        const installationStatus = serverData.data.installationStatus || {};
+        const serverStatuses = installationStatus.serversStatus || {};
+        const serverStatus = serverStatuses[serverName] || { installedStatus: {} };
+
+        await setupModalContent(
+            targetData,
+            mcpServer,
+            serverStatus,
+            categoryName,
+            serverName,
+            serverStatuses,
+            serverData,
+            targetDiv,
+            envInputsDiv,
+            modalArguments,
+            modalRequirements
+        );
+
+    } catch (error) {
+        console.error("Error loading data:", error);
+        targetDiv.innerHTML = `<p class="text-red-500">Error: ${error.message}</p>`;
+    }
+
+    modal.style.display = "block";
+}
+
+/**
+ * Set up the modal content including client list, environment variables, and requirements
+ * @private
+ */
+async function setupModalContent(
+    targetData,
+    mcpServer,
+    serverStatus,
+    categoryName,
+    serverName,
+    serverStatuses,
+    serverData,
+    targetDiv,
+    envInputsDiv,
+    modalArguments,
+    modalRequirements
+) {
+    // Create client items
+    setupClientItems(targetData.data, serverStatus, categoryName, serverName, targetDiv);
+
+    // Handle environment variables section
+    setupEnvironmentVariables(mcpServer, envInputsDiv, targetData);
+
+    // Handle installation arguments section
+    setupInstallationArguments(mcpServer.installation, modalArguments, mcpServer);
+
+    // Handle server requirements section
+    setupServerRequirements(mcpServer, serverData, categoryName, serverName, modalRequirements);
+
+    // Set up the install form submit handler
+    const installForm = document.getElementById('installForm');
+    setupFormSubmitHandler(
+        installForm,
+        envInputsDiv,
+        modalArguments,
+        modalRequirements,
+        categoryName,
+        serverName,
+        serverStatuses,
+        serverData,
+        mcpServer
+    );
+}
+
+// Make functions available globally
+window.showInstallModal = showInstallModal;
+window.closeModal = closeModal;
+window.uninstallTools = uninstallTools;