imcp 0.1.1 → 0.1.2

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

@@ -1,5 +1,5 @@
-import { delayedAppendInstallLoadingMessage } from './messageQueue.js';
-import { showInstallLoadingModal } from './loadingModal.js';
+// import { delayedAppendInstallLoadingMessage } from './messageQueue.js'; // No longer used directly for steps
+import { showInstallLoadingModal, updateOverallInstallStatus, addInstallationStep } from './loadingModal.js';
 import { showToast } from '../notifications.js';
 
 /**
@@ -19,6 +19,14 @@ export async function handleBulkClientInstall(categoryName, serverName, targets,
     console.log('[LoadingModal] installModal:', installModal);
     if (installModal) installModal.style.display = "none";
 
+    // Store category and server name for potential refresh
+    if (categoryName) {
+        localStorage.setItem('lastSelectedCategory', categoryName);
+    }
+    if (serverName) {
+        localStorage.setItem('lastSelectedServerName', serverName);
+    }
+
     // If serverData is provided, extract the installing message from it (latest status)
     if (serverData?.data?.installationStatus?.serversStatus) {
         const serverStatuses = serverData.data.installationStatus.serversStatus;
@@ -34,11 +42,11 @@ export async function handleBulkClientInstall(categoryName, serverName, targets,
         }
     }
 
-    showInstallLoadingModal();
-    delayedAppendInstallLoadingMessage(installingMessage);
+    showInstallLoadingModal(`Installing ${serverName}`); // Pass initial server name
+    // delayedAppendInstallLoadingMessage(installingMessage); // Old way
 
     try {
-        delayedAppendInstallLoadingMessage("Installing, please wait...");
+        // delayedAppendInstallLoadingMessage("Installing, please wait..."); // Old way
 
         // Use serverInstallOptions if provided, otherwise build the traditional options
         const requestBody = {
@@ -63,7 +71,8 @@ export async function handleBulkClientInstall(categoryName, serverName, targets,
 
         if (!response.ok) {
             const errorData = await response.text();
-            delayedAppendInstallLoadingMessage(`<span style="color:#f59e0b;">Failed: ${errorData || response.statusText}</span>`);
+            // delayedAppendInstallLoadingMessage(`<span style="color:#f59e0b;">Failed: ${errorData || response.statusText}</span>`); // Old way
+            updateOverallInstallStatus('failed', `Installation request failed: ${errorData || response.statusText}`);
             console.error('[LoadingModal] Failed:', errorData || response.statusText);
             throw new Error(`Installation failed: ${errorData || response.statusText}`);
         }
@@ -71,150 +80,86 @@ export async function handleBulkClientInstall(categoryName, serverName, targets,
         const result = await response.json();
         console.log('[LoadingModal] install result:', result);
         if (!result.success) {
-            delayedAppendInstallLoadingMessage(`<span style="color:#f59e0b;">${result.error || 'Operation failed'}</span>`);
+            // delayedAppendInstallLoadingMessage(`<span style="color:#f59e0b;">${result.error || 'Operation failed'}</span>`); // Old way
+            updateOverallInstallStatus('failed', result.error || 'Installation operation failed to start.');
             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);
+        // Start polling for install status
+        pollNewInstallStatus(categoryName, serverName, 2000); // New polling
     } catch (error) {
         console.error('[LoadingModal] Error applying configuration:', error);
-        delayedAppendInstallLoadingMessage(`<span style="color:red;">Error: ${error.message}</span>`);
+        // delayedAppendInstallLoadingMessage(`<span style="color:red;">Error: ${error.message}</span>`); // Old way
+        updateOverallInstallStatus('failed', `Error: ${error.message}`);
     }
 }
 
 /**
- * Poll install status for the given server/targets and optional requirements
+ * Poll install status using the new API endpoint for detailed steps.
  * @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 = {};
+async function pollNewInstallStatus(categoryName, serverName, interval = 2000) {
     let completionMessageSent = false;
-
     const startTime = Date.now();
-    const maxTimeout = 10 * 60 * 1000; // 10 minutes in milliseconds
+    const maxTimeout = 10 * 60 * 1000; // 10 minutes
 
-    while (Date.now() - startTime < maxTimeout) {
+    while (Date.now() - startTime < maxTimeout && !completionMessageSent) {
         try {
-            const resp = await fetch(`/api/categories/${categoryName}`);
+            const resp = await fetch(`/api/categories/${categoryName}/servers/${serverName}/installation/status`);
             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" && status !== "failed") {
-                            allTargetsCompleted = false;
-                        }
+                const result = await resp.json();
+                if (result.success && result.data) {
+                    const { steps, overallStatus, error } = result.data;
+
+                    updateOverallInstallStatus(overallStatus, error || `Installation ${overallStatus}`);
+
+                    // Always update or insert each step, so UI stays in sync with backend
+                    steps.forEach(step => {
+                        addInstallationStep(step.name, step.message, step.status, step.timestamp);
+                    });
+
+                    if (overallStatus === 'completed' || overallStatus === 'failed') {
+                        completionMessageSent = true;
+                        // The hideInstallLoadingModal will be called by the user or after a timeout.
+                        // We can add a "Close" button or auto-close logic here if needed.
+                        // For now, just stop polling.
+                        // Ensure final status is displayed
+                        const finalMessage = overallStatus === 'completed' ?
+                            `Installation completed successfully for ${serverName}.` :
+                            `Installation failed for ${serverName}`;
+                        updateOverallInstallStatus(overallStatus, finalMessage);
+                        return;
                     }
-                }
-
-                // 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));
+                } else if (!result.success && resp.status === 404) {
+                    // Still waiting for the status file to be created.
+                    updateOverallInstallStatus('in-progress', `Waiting for installation to start for ${serverName}...`);
+                } else if (!result.success) {
+                    updateOverallInstallStatus('failed', `Error fetching status: ${result.error || 'Unknown error'}`);
+                    completionMessageSent = true; // Stop polling on error
                     return;
                 }
+            } else if (resp.status === 404) {
+                updateOverallInstallStatus('in-progress', `Installation status not yet available for ${serverName}. Retrying...`);
+            } else {
+                const errorText = await resp.text();
+                updateOverallInstallStatus('failed', `Error fetching status: ${errorText || resp.statusText}`);
+                completionMessageSent = true; // Stop polling on error
+                return;
             }
         } catch (error) {
-            console.error('[LoadingModal] Error polling status:', error);
+            console.error('[LoadingModal] Error polling new install status:', error);
+            updateOverallInstallStatus('failed', `Error polling status: ${error.message}`);
+            completionMessageSent = true; // Stop polling on error
+            return;
         }
-        await new Promise(resolve => setTimeout(resolve, interval)); // 2 second interval
+        await new Promise(resolve => setTimeout(resolve, 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);
+        updateOverallInstallStatus('failed', `Operation timed out for ${serverName} - Please check logs or refresh.`);
     }
 }
 
@@ -225,6 +170,14 @@ async function pollInstallStatus(categoryName, serverName, targets, interval = 2
  * @param {string[]} targets - Target clients
  */
 export async function uninstallTools(categoryName, serverList, targets) {
+
+    console.log('[LoadingModal] uninstallTools called', { categoryName, serverList, targets });
+    // Store category and server name for potential refresh
+    if (categoryName) {
+        console.log('[LoadingModal] Setting lastSelectedCategory:', categoryName);
+        localStorage.setItem('lastSelectedCategory', categoryName);
+    }
+
     // Get selected targets from window.selectedClients or the provided targets
     const selectedTargets = window.selectedClients || (Array.isArray(targets) ? targets : [targets]);
 
@@ -234,17 +187,26 @@ export async function uninstallTools(categoryName, serverList, targets) {
         return;
     }
 
-    try {
-        delayedAppendInstallLoadingMessage('Starting uninstallation...');
+    // Ensure showInstallLoadingModal is called if not already visible,
+    // or ensure overall status is updated if it is.
+    // For simplicity, we assume the modal is shown by the caller (e.g., modalSetup.js)
+    // Add uninstall started step
+    if (typeof addInstallationStep === 'function') {
+        addInstallationStep(
+            'Uninstalling',
+            `Uninstallation process started for ${Object.keys(serverList).join(', ')}`,
+            'in-progress',
+            new Date().toISOString()
+        );
+    }
+    updateOverallInstallStatus('in-progress', `Starting uninstallation for ${Object.keys(serverList).join(', ')}...`);
 
-        // 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;
-        }
+    try {
+        const serverListKeys = Object.keys(serverList);
+        serverListKeys.forEach(server => {
+            console.log('[LoadingModal] Setting lastSelectedServerName:', server);
+            localStorage.setItem('lastSelectedServerName', server);
+        });
 
         const response = await fetch(`/api/categories/${categoryName}/uninstall`, {
             method: 'POST',
@@ -260,22 +222,45 @@ export async function uninstallTools(categoryName, serverList, targets) {
 
         if (!response.ok) {
             const errorData = await response.text();
+            updateOverallInstallStatus('failed', `Uninstallation request failed: ${errorData || response.statusText}`);
             throw new Error(`Uninstallation failed: ${errorData || response.statusText}`);
         }
 
         const result = await response.json();
         if (!result.success) {
+            updateOverallInstallStatus('failed', `Uninstallation failed: ${result.error || 'Operation failed'}`);
             throw new Error(result.error || 'Uninstallation failed');
         }
 
-        // Add completion message and trigger completion UI
-        delayedAppendInstallLoadingMessage(`Successfully uninstalled from ${selectedTargets.join(', ')}`, true);
+        // Add uninstall finished step with 1s delay before updating overall status
+        if (typeof addInstallationStep === 'function') {
+            await new Promise(resolve => setTimeout(resolve, 1000));
+            addInstallationStep(
+                'Uninstalling',
+                `Uninstallation process finished for ${Object.keys(serverList).join(', ')}`,
+                'completed',
+                new Date().toISOString()
+            );
+            await new Promise(resolve => setTimeout(resolve, 1000));
+            addInstallationStep(
+                'Uninstall Finished',
+                `Uninstallation finished for ${Object.keys(serverList).join(', ')}`,
+                'completed',
+                new Date().toISOString()
+            );
+        }
+        await new Promise(resolve => setTimeout(resolve, 1000));
+        updateOverallInstallStatus('completed', `Successfully uninstalled from ${selectedTargets.join(', ')}.`);
+        window.selectedClients = []; // Clear selected clients
 
-        // Clear selected clients after successful uninstall
-        window.selectedClients = [];
     } catch (error) {
         console.error('Error uninstalling tools:', error);
-        delayedAppendInstallLoadingMessage(`Error: ${error.message}`, true);
+        // The status should have been updated by the specific error handlers above.
+        // If an error occurs before those, update status here.
+        const overallStatusTextEl = document.getElementById('overallStatusText'); // Check if element exists
+        if (overallStatusTextEl && overallStatusTextEl.textContent.startsWith('Starting uninstallation')) {
+            updateOverallInstallStatus('failed', `Error uninstalling tools: ${error.message}`);
+        }
         showToast(`Error uninstalling tools: ${error.message}`, 'error');
     }
 }

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

@@ -1,31 +1,164 @@
-import { delayedAppendInstallLoadingMessage } from './messageQueue.js';
+// import { delayedAppendInstallLoadingMessage } from './messageQueue.js'; // Not directly used here anymore for appending
+
+const ICONS = {
+    IN_PROGRESS: '<div class="status-spinner"></div>',
+    COMPLETED: '<div class="status-icon-circled icon-check-container"><span class="status-icon icon-check">✓</span></div>',
+    FAILED: '<span class="status-icon icon-cross">✗</span>', // Assuming cross doesn't need a circle for now
+    CANCELED: '<span class="status-icon icon-minus">–</span>', // Simple minus for canceled
+};
+
+let overallStatusIconEl, overallStatusTextEl, installStepDetailsListEl;
 
 /**
  * Display the installation loading modal and prepare it for messages.
- * @param {string} [operation='Installing'] - The operation being performed
+ * @param {string} [initialOperationText='Installing'] - The initial overall operation text.
  */
-export function showInstallLoadingModal(operation = 'Installing') {
+export function showInstallLoadingModal(initialOperationText = 'Installing') {
     const loadingModal = document.getElementById('installLoadingModal');
-    const loadingMsg = document.getElementById('installLoadingMessage');
-    const loadingTitle = document.querySelector('.loading-title');
-    if (loadingModal && loadingMsg && loadingTitle) {
+    // Assuming modal-content is the direct child where content should be placed.
+    const modalContent = loadingModal ? loadingModal.querySelector('.modal-content') : null;
+
+    if (loadingModal && modalContent) {
+        modalContent.innerHTML = `
+            <button id="installLoadingModalCloseBtn" class="modal-close-btn">&times;</button>
+            <div class="installation-status-header">
+                <div id="overallStatusIconContainer" class="overall-status-icon">
+                    ${ICONS.IN_PROGRESS}
+                </div>
+                <h3 id="overallStatusText" class="overall-status-text">${initialOperationText}...</h3>
+            </div>
+            <div class="installation-steps-container">
+                <ul id="installStepDetailsList" class="install-step-details-list"></ul>
+            </div>
+        `;
+
+        overallStatusIconEl = modalContent.querySelector('#overallStatusIconContainer');
+        overallStatusTextEl = modalContent.querySelector('#overallStatusText');
+        installStepDetailsListEl = modalContent.querySelector('#installStepDetailsList');
+
+        const closeButton = modalContent.querySelector('#installLoadingModalCloseBtn');
+        if (closeButton) {
+            closeButton.addEventListener('click', hideInstallLoadingModal);
+        }
+
         loadingModal.style.display = 'block';
-        loadingMsg.innerHTML = '';
-        loadingTitle.textContent = `${operation}...`;
     } else {
-        console.error('[LoadingModal] Required elements not found: installLoadingModal, installLoadingMessage, or loading-title');
+        console.error('[LoadingModal] Required elements not found: #installLoadingModal or .modal-content');
+    }
+}
+
+/**
+ * Updates the overall status display in the loading modal.
+ * @param {'in-progress' | 'completed' | 'failed'} status - The overall status.
+ * @param {string} message - The message to display for the overall status.
+ */
+export function updateOverallInstallStatus(status, message) {
+    if (!overallStatusIconEl || !overallStatusTextEl) {
+        // console.warn('[LoadingModal] Overall status elements not initialized or found.');
+        return;
+    }
+
+    let iconHtml = ICONS.IN_PROGRESS;
+    let statusClass = 'in-progress';
+
+    switch (status) {
+        case 'completed':
+            iconHtml = ICONS.COMPLETED;
+            statusClass = 'completed';
+            break;
+        case 'failed':
+            iconHtml = ICONS.FAILED;
+            statusClass = 'failed';
+            break;
+        case 'in-progress':
+        default:
+            // iconHtml and statusClass already set
+            break;
     }
+
+    overallStatusIconEl.innerHTML = iconHtml;
+    overallStatusIconEl.className = `overall-status-icon ${statusClass}`; // Update class for styling
+    overallStatusTextEl.textContent = message || (status.charAt(0).toUpperCase() + status.slice(1));
 }
 
 /**
- * Append a message to the loading modal display.
- * @param {string} message - The message to display
+ * Adds a step to the installation details list.
+ * @param {string} stepName - The name/title of the step.
+ * @param {string} message - The message associated with the step.
+ * @param {'pending'|'in-progress'|'completed'|'failed'|'canceled'} status - The status of the step.
+ * @param {string} timestamp - ISO timestamp string for the step.
  */
-export function appendInstallLoadingMessage(message) {
-    console.log(`[LoadingModal] Message: ${message}`);
-    delayedAppendInstallLoadingMessage(message);
+export function addInstallationStep(stepName, message, status, timestamp) {
+    if (!installStepDetailsListEl) {
+        return;
+    }
+
+    // Use stepName as a unique identifier for the step
+    const stepId = `install-step-${stepName.replace(/[^a-zA-Z0-9_-]/g, '_')}`;
+    let listItem = document.getElementById(stepId);
+
+    let statusClass = '';
+    let stepIcon = '';
+
+    switch (status) {
+        case 'completed':
+            statusClass = 'success';
+            stepIcon = '<span class="step-icon icon-check-small">✓</span>';
+            break;
+        case 'failed':
+            statusClass = 'error';
+            stepIcon = '<span class="step-icon icon-cross-small">✗</span>';
+            break;
+        case 'canceled':
+            statusClass = 'canceled';
+            stepIcon = '<span class="step-icon icon-minus-small">–</span>';
+            break;
+        case 'in-progress':
+        case 'pending':
+        default:
+            statusClass = 'in-progress';
+            stepIcon = '<div class="status-spinner step-spinner"></div>';
+            break;
+    }
+
+    let timeString = '';
+    if (timestamp) {
+        try {
+            timeString = new Date(timestamp).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false });
+        } catch (e) { /* ignore */ }
+    }
+
+    const innerHTML = `
+        ${stepIcon}
+        <div class="step-info">
+            <span class="step-name">${stepName}</span>
+            <span class="step-message">${message || (
+                status === 'completed' ? 'Completed' :
+                status === 'failed' ? 'Failed' :
+                status === 'canceled' ? 'Canceled' :
+                'In Progress'
+            )}</span>
+        </div>
+        <span class="step-timestamp">${timeString}</span>
+    `;
+
+    if (listItem) {
+        // Update existing step
+        listItem.className = `step-detail-item ${statusClass}`;
+        listItem.innerHTML = innerHTML;
+    } else {
+        // Create new step
+        listItem = document.createElement('li');
+        listItem.id = stepId;
+        listItem.className = `step-detail-item ${statusClass}`;
+        listItem.innerHTML = innerHTML;
+        installStepDetailsListEl.appendChild(listItem);
+        // Scroll to the bottom of the list
+        installStepDetailsListEl.scrollTop = installStepDetailsListEl.scrollHeight;
+    }
 }
 
+
 /**
  * Hide the install loading modal.
  */
@@ -35,17 +168,14 @@ export function hideInstallLoadingModal() {
     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);
+        // Clear references to avoid stale elements if modal is reshown
+        overallStatusIconEl = null;
+        overallStatusTextEl = null;
+        installStepDetailsListEl = null;
+
+        // Dispatch an event to signal that the main modal content should be refreshed
+        document.dispatchEvent(new CustomEvent('refreshMainModalContent'));
+        console.log('[LoadingModal] Dispatched refreshMainModalContent event.');
     } else {
         console.error('[LoadingModal] loading modal DOM not found');
     }