imcp 0.0.12 → 0.0.14

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

@@ -0,0 +1,281 @@
+import { delayedAppendInstallLoadingMessage } from './messageQueue.js';
+import { showInstallLoadingModal } from './loadingModal.js';
+import { showToast } from '../notifications.js';
+
+/**
+ * Handle bulk client installations
+ * @param {string} categoryName - The category name
+ * @param {string} serverName - The server name
+ * @param {string[]} targets - Target clients
+ * @param {Object} envVars - Environment variables
+ * @param {string} installingMessage - Installation message
+ * @param {Object} serverData - Server data
+ * @param {Object} serverInstallOptions - Server installation options
+ */
+export 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?.data?.installationStatus?.serversStatus) {
+        const serverStatuses = serverData.data.installationStatus.serversStatus;
+        const serverStatus = serverStatuses[serverName] || { installedStatus: {} };
+        if (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');
+        }
+
+        // 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
+ * @param {string} categoryName - The category name
+ * @param {string} serverName - The server name
+ * @param {string[]} targets - Target clients
+ * @param {number} interval - Polling interval in milliseconds
+ * @param {Array} requirements - Requirements to check
+ */
+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);
+    }
+}
+
+/**
+ * Handle client uninstallation for multiple targets
+ * @param {string} categoryName - The category name
+ * @param {Object} serverList - List of servers to uninstall
+ * @param {string[]} targets - Target clients
+ */
+export 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');
+    }
+}

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

@@ -0,0 +1,52 @@
+import { delayedAppendInstallLoadingMessage } from './messageQueue.js';
+
+/**
+ * Display the installation loading modal and prepare it for messages.
+ * @param {string} [operation='Installing'] - The operation being performed
+ */
+export 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
+ */
+export function appendInstallLoadingMessage(message) {
+    console.log(`[LoadingModal] Message: ${message}`);
+    delayedAppendInstallLoadingMessage(message);
+}
+
+/**
+ * Hide the install loading modal.
+ */
+export 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');
+    }
+}

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

@@ -0,0 +1,74 @@
+import { queueMessage } from './messageQueue.js';
+
+/**
+ * Display the installation loading modal and prepare it for messages
+ * @param {string} operation Operation name to display
+ */
+export function showLoadingModal(operation = 'Installing') {
+    const elements = getLoadingElements();
+    if (!elements) {
+        console.error('[LoadingModal] Required elements not found');
+        return;
+    }
+
+    elements.modal.style.display = 'block';
+    elements.messageContainer.innerHTML = '';
+    elements.title.textContent = `${operation}...`;
+}
+
+/**
+ * Hide the installation loading modal
+ */
+export function hideLoadingModal() {
+    const modal = document.getElementById('installLoadingModal');
+    if (!modal) {
+        console.error('[LoadingModal] Loading modal not found');
+        return;
+    }
+
+    modal.style.display = 'none';
+    refreshPageWithCategory();
+}
+
+/**
+ * Append a message to the loading modal
+ * @param {string} message Message to display
+ * @param {boolean} isCompletion Whether this is a completion message
+ */
+export function appendLoadingMessage(message, isCompletion = false) {
+    queueMessage(message, isCompletion);
+}
+
+/**
+ * Get the loading modal elements
+ * @private
+ * @returns {Object|null} Object containing modal elements or null if not found
+ */
+function getLoadingElements() {
+    const modal = document.getElementById('installLoadingModal');
+    const messageContainer = document.getElementById('installLoadingMessage');
+    const title = document.querySelector('.loading-title');
+
+    if (!modal || !messageContainer || !title) {
+        return null;
+    }
+
+    return { modal, messageContainer, title };
+}
+
+/**
+ * Refresh the page maintaining category selection
+ * @private
+ */
+function refreshPageWithCategory() {
+    const lastSelected = localStorage.getItem('lastSelectedCategory');
+
+    setTimeout(() => {
+        if (lastSelected) {
+            window.location.href = window.location.pathname +
+                '?category=' + encodeURIComponent(lastSelected);
+        } else {
+            location.reload();
+        }
+    }, 100);
+}

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

@@ -0,0 +1,112 @@
+/** @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;
+
+/**
+ * Message queue for delayed loading modal updates.
+ * @type {Array<{msg: string, isCompletion: boolean}>}
+ */
+let messageQueue = [];
+
+/**
+ * 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
+ */
+export 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');
+    }
+}