imcp 0.1.4 → 0.1.5

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/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

@@ -1,56 +1,112 @@
-// This file previously handled a message queue for the loading modal.
-// With the new design in loadingModal.js, which directly manipulates its content
-// for overall status and step details, this queueing mechanism for individual
-// step messages is no longer the primary way messages are displayed.
-// The loadingModal.js now has `updateOverallInstallStatus` and `addInstallationStep`.
-
-// The `updateCompletionUI` function might still be relevant if we want to
-// change the overall modal's appearance (e.g., title, main icon) upon final completion,
-// separate from the step-by-step updates.
+/** @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; // This might still be useful for a final "Completed" state change of the modal itself.
+let completionPending = false;
 
 /**
- * This function could be called by `installation.js` once polling determines
- * the absolute final state (e.g., after all messages are processed by `loadingModal.js`
- * and a small delay).
- * @param {'completed' | 'failed'} finalState
+ * Message queue for delayed loading modal updates.
+ * @type {Array<{msg: string, isCompletion: boolean}>}
  */
-export function triggerFinalModalStateUpdate(finalState) {
-    // This function is a placeholder for now.
-    // The actual update of the overall status icon and text is now handled by
-    // `updateOverallInstallStatus` in `loadingModal.js`.
-    // If there's a need for a *separate* final transformation of the modal
-    // (e.g. changing the main title, showing a global success/fail icon not tied to overallStatusTextEl),
-    // that logic would go here or be triggered from here.
-
-    // For now, let's assume `updateOverallInstallStatus` covers the visual needs.
-    // If `updateCompletionUI` was doing something unique beyond what `updateOverallInstallStatus` does,
-    // we could call it here.
-    console.log(`[MessageQueue] Triggering final modal state: ${finalState}`);
-    // if (finalState === 'completed') {
-    //     updateCompletionUI(); // If this has distinct visual changes for the modal wrapper itself.
-    // }
+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');
 
-// function updateCompletionUI() {
-//     // This function's original content might be merged into updateOverallInstallStatus
-//     // or called if a distinct "modal completed" visual state is needed beyond the text/icon.
-//     const loadingTitle = document.querySelector('.loading-title'); // This element might not exist with new structure
-//     const loadingIcon = document.querySelector('.loading-icon'); // This element might not exist
+            const formattedMessage = line;
 
-//     if (loadingTitle) {
-//         loadingTitle.textContent = 'Completed';
-//         loadingTitle.classList.add('completed');
-//     }
+            // Create message container
+            const messageDiv = document.createElement('div');
+            messageDiv.className = 'message-line';
 
-//     if (loadingIcon) {
-//         // The main overall status icon is now handled by updateOverallInstallStatus
-//     }
-// }
+            // Apply yellow color for error messages
+            if (isError) {
+                messageDiv.style.color = '#f59e0b';
+            }
+            messageDiv.innerHTML = formattedMessage;
 
-// The old delayedAppendInstallLoadingMessage and appendInstallLoadingMessage are removed
-// as step messages are now directly added by loadingModal.js->addInstallationStep
-// and overall status by loadingModal.js->updateOverallInstallStatus.
+            loadingMsg.appendChild(messageDiv);
+            loadingMsg.scrollTop = loadingMsg.scrollHeight;
+        });
+    } else {
+        console.error('[LoadingModal] Element not found: installLoadingMessage');
+    }
+}

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

@@ -0,0 +1,214 @@
+import { showConfirm } from '../notifications.js';
+import { handleInstallation, handleUninstallation } from './installHandler.js';
+import { showLoadingModal } from './loadingUI.js';
+import { compareVersions } from './version.js';
+
+/**
+ * Show installation modal for MCP tools
+ * @param {string} categoryName Category name
+ * @param {string} serverName Server name
+ */
+export async function showInstallModal(categoryName, serverName) {
+    console.log("Showing install modal for:", serverName);
+    await new Promise(resolve => setTimeout(resolve, 100));
+
+    const elements = getModalElements();
+    if (!elements) return;
+
+    initializeModal(elements, serverName);
+
+    try {
+        const { targetData, serverData } = await fetchModalData(categoryName);
+        const mcpServer = findMcpServer(serverData, serverName);
+
+        renderModalContent(elements, {
+            targetData,
+            serverData,
+            mcpServer,
+            categoryName,
+            serverName
+        });
+
+        setupFormHandler(elements, categoryName, serverName, serverData);
+        elements.modal.style.display = "block";
+    } catch (error) {
+        handleModalError(error, elements.targetDiv);
+    }
+}
+
+/**
+ * Close modal and refresh with selected category
+ */
+export function closeModal() {
+    const modal = document.getElementById('installModal');
+    if (modal) {
+        modal.style.display = "none";
+        refreshWithCategory();
+    }
+}
+
+/**
+ * Setup click outside modal handler
+ */
+export function setupModalOutsideClick() {
+    window.onclick = function (event) {
+        const modal = document.getElementById('installModal');
+        if (event.target === modal) {
+            closeModal();
+        }
+    };
+}
+
+// Private helper functions
+
+function getModalElements() {
+    const modal = document.getElementById('installModal');
+    if (!modal) {
+        console.error('Modal container not found');
+        return null;
+    }
+
+    const elements = {
+        modal,
+        title: modal.querySelector('#modalTitle'),
+        envInputs: modal.querySelector('#modalEnvInputs'),
+        targetDiv: modal.querySelector('#modalTargets'),
+        requirements: modal.querySelector('#modalRequirements'),
+        arguments: modal.querySelector('#modalArguments')
+    };
+
+    if (!Object.values(elements).every(Boolean)) {
+        console.error('Required modal elements not found');
+        return null;
+    }
+
+    return elements;
+}
+
+function initializeModal(elements, serverName) {
+    window.selectedClients = [];
+    elements.title.textContent = `Install ${serverName}`;
+    clearModalSections(elements);
+}
+
+function clearModalSections(elements) {
+    ['envInputs', 'targetDiv', 'requirements', 'arguments'].forEach(section => {
+        elements[section].innerHTML = '';
+    });
+}
+
+async function fetchModalData(categoryName) {
+    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');
+    }
+
+    return { targetData, serverData };
+}
+
+function findMcpServer(serverData, serverName) {
+    const mcpServer = serverData.data.feedConfiguration.mcpServers
+        .find(server => server.name === serverName);
+
+    if (!mcpServer) {
+        throw new Error('Server configuration not found');
+    }
+
+    return mcpServer;
+}
+
+function renderModalContent(elements, data) {
+    const { targetData, serverData, mcpServer, categoryName, serverName } = data;
+    const installationStatus = serverData.data.installationStatus || {};
+    const serverStatuses = installationStatus.serversStatus || {};
+    const serverStatus = serverStatuses[serverName] || { installedStatus: {} };
+
+    renderClientSection(elements.targetDiv, targetData.data, serverStatus, serverName, categoryName);
+    renderEnvironmentSection(elements.envInputs, mcpServer, targetData.clientMcpSettings, serverName);
+    renderArgumentsSection(elements.arguments, mcpServer);
+    renderRequirementsSection(elements.requirements, mcpServer, serverData, categoryName, serverName);
+}
+
+function setupFormHandler(elements, categoryName, serverName, serverData) {
+    const form = document.getElementById('installForm');
+    form.onsubmit = (e) => handleFormSubmit(e, {
+        elements,
+        categoryName,
+        serverName,
+        serverData
+    });
+}
+
+function handleFormSubmit(event, options) {
+    event.preventDefault();
+    const { elements, categoryName, serverName, serverData } = options;
+
+    const formData = collectFormData(elements);
+    if (!validateFormData(formData)) return;
+
+    const installOptions = buildInstallOptions(formData, serverData, serverName);
+    handleInstallation(categoryName, serverName, formData.targets, installOptions);
+}
+
+function collectFormData(elements) {
+    return {
+        envVars: getEnvironmentVariables(elements.envInputs),
+        args: getArguments(elements.arguments),
+        pythonEnv: getPythonEnvironment(),
+        targets: getSelectedTargets(),
+        requirements: getSelectedRequirements()
+    };
+}
+
+function validateFormData(formData) {
+    const { targets, requirements } = formData;
+    if (targets.length === 0 && requirements.length === 0) {
+        showError('Please select at least one client or requirement to update.');
+        return false;
+    }
+    return true;
+}
+
+function handleModalError(error, targetDiv) {
+    console.error("Error loading data:", error);
+    targetDiv.innerHTML = `<p class="text-red-500">Error: ${error.message}</p>`;
+}
+
+function refreshWithCategory() {
+    const lastSelected = localStorage.getItem('lastSelectedCategory');
+    setTimeout(() => {
+        if (lastSelected) {
+            window.location.href = window.location.pathname + '?category=' + encodeURIComponent(lastSelected);
+        } else {
+            location.reload();
+        }
+    }, 100);
+}
+
+// Add CSS styles for the toggle switch
+const styleElement = document.createElement('style');
+styleElement.textContent = `
+    .toggle-bg.bg-blue-500 {
+        background-color: #3b82f6;
+    }
+    .toggle-bg {
+        transition: background-color 0.3s;
+    }
+    .toggle-bg div {
+        transition: transform 0.3s;
+    }
+`;
+document.head.appendChild(styleElement);

package/{src/web/public/js/modal/versionUtils.js → dist/web/public/js/modal/version.js}

@@ -17,4 +17,4 @@ export function compareVersions(v1, v2) {
     }
 
     return 0;
-}
+}