imcp 0.0.1

package/src/web/public/js/modal.js

@@ -0,0 +1,572 @@
+import { showToast, showConfirm } from './notifications.js';
+
+// Wait for DOM to be loaded before initializing modal functionality
+document.addEventListener('DOMContentLoaded', () => {
+    setupModalOutsideClick();
+});
+/** Delayed message queue for loading modal */
+let messageQueue = [];
+let isAppending = false;
+function processMessageQueue() {
+    if (isAppending || messageQueue.length === 0) return;
+    isAppending = true;
+    const { msg } = messageQueue.shift();
+    _appendInstallLoadingMessage(msg);
+    setTimeout(() => {
+        isAppending = false;
+        processMessageQueue();
+    }, 1000);
+}
+// Always use this to append messages with delay
+function delayedAppendInstallLoadingMessage(msg) {
+    messageQueue.push({ msg });
+    processMessageQueue();
+}
+// Internal: the original append function
+function _appendInstallLoadingMessage(message) {
+    const loadingMsg = document.getElementById('installLoadingMessage');
+    if (loadingMsg) {
+        loadingMsg.innerHTML += `<div>${message}</div>`;
+        loadingMsg.scrollTop = loadingMsg.scrollHeight;
+    } else {
+        console.error('[LoadingModal] loading message DOM not found');
+    }
+}
+
+/**
+ * Show the install loading modal and optionally append a message.
+ * @param {string} message
+ */
+
+/**
+ * Show the install loading modal and optionally append a message.
+ * @param {string} message
+ */
+function showInstallLoadingModal() {
+    const loadingModal = document.getElementById('installLoadingModal');
+    const loadingMsg = document.getElementById('installLoadingMessage');
+    if (loadingModal && loadingMsg) {
+        loadingModal.style.display = 'block';
+        loadingMsg.innerHTML = '';
+    } else {
+        console.error('[LoadingModal] loading modal DOM not found');
+    }
+}
+
+/**
+ * Append a message to the loading modal.
+ * @param {string} message
+ */
+function appendInstallLoadingMessage(message) {
+    console.log('[LoadingModal] appendInstallLoadingMessage:', message);
+    const loadingMsg = document.getElementById('installLoadingMessage');
+    if (loadingMsg) {
+        loadingMsg.innerHTML += `<div>${message}</div>`;
+        loadingMsg.scrollTop = loadingMsg.scrollHeight;
+    } else {
+        console.error('[LoadingModal] loading message DOM not found');
+    }
+}
+
+/**
+ * Hide the install loading modal.
+ */
+function hideInstallLoadingModal() {
+    console.log('[LoadingModal] hideInstallLoadingModal called');
+    const loadingModal = document.getElementById('installLoadingModal');
+    if (loadingModal) {
+        loadingModal.style.display = 'none';
+    } else {
+        console.error('[LoadingModal] loading modal DOM not found');
+    }
+}
+
+// Show install modal for MCP tools
+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');
+
+    // Global array to track selected clients
+    window.selectedClients = [];
+
+    // Verify all required modal elements exist
+    if (!title || !envInputsDiv || !targetDiv || !modalRequirements) {
+        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
+
+    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');
+        }
+
+        const installationStatus = serverData.data.installationStatus || {};
+        const serverStatuses = installationStatus.serversStatus || {};
+        const serverStatus = serverStatuses[serverName] || { installedStatus: {} };
+
+        // Create client items with switch toggles
+        targetData.data.forEach(target => {
+            const operationStatus = serverStatus.installedStatus[target] || { status: 'not-installed', type: 'check', target: 'server' };
+
+            // Determine client status
+            let statusText = 'Not Installed';
+            let statusClass = 'not-installed';
+
+            if (operationStatus.status === 'completed' && operationStatus.type === 'install') {
+                statusText = 'Installed';
+                statusClass = 'installed';
+            } else if (operationStatus.status === 'pending') {
+                statusText = 'Pending Requirements';
+                statusClass = 'pending';
+            } else if (operationStatus.status === 'in-progress') {
+                statusText = 'In Progress';
+                statusClass = 'pending';
+            } else if (operationStatus.status === 'failed') {
+                statusText = 'Failed';
+                statusClass = 'not-installed';
+            }
+
+            const isConfigured = operationStatus.status === 'completed' && operationStatus.type === 'install';
+
+            // Create client item
+            const clientItem = document.createElement('div');
+            clientItem.className = 'client-item';
+            clientItem.dataset.target = target;
+            clientItem.dataset.selected = 'false';
+
+            // Determine if item should be selectable
+            const isInProgress = operationStatus.status === 'in-progress';
+            const isSelectable = !isConfigured && !isInProgress;
+
+            // Add appropriate non-selectable classes
+            if (!isSelectable) {
+                clientItem.classList.add('non-selectable');
+
+                if (isConfigured) {
+                    clientItem.classList.add('installed-item');
+                    clientItem.title = 'Already installed';
+                } else if (isInProgress) {
+                    clientItem.classList.add('in-progress-item');
+                    clientItem.title = 'Installation in progress';
+                }
+            }
+
+            // Make selectable clients clickable
+            if (isSelectable) {
+                clientItem.addEventListener('click', (e) => {
+                    const isSelected = clientItem.dataset.selected === 'true';
+                    clientItem.dataset.selected = isSelected ? 'false' : 'true';
+
+                    // Update class
+                    if (isSelected) {
+                        clientItem.classList.remove('selected');
+                        window.selectedClients = window.selectedClients.filter(c => c !== target);
+                    } else {
+                        clientItem.classList.add('selected');
+                        if (!window.selectedClients.includes(target)) {
+                            window.selectedClients.push(target);
+                        }
+                    }
+
+                    console.log('Selected clients:', window.selectedClients);
+                });
+            }
+
+            // Create client info (name)
+            const clientInfo = document.createElement('div');
+            clientInfo.className = 'client-info';
+
+            // Client name label
+            const clientName = document.createElement('span');
+            clientName.className = 'text-sm font-medium text-gray-900';
+            clientName.textContent = target;
+
+            // Add elements to client info
+            clientInfo.appendChild(clientName);
+
+            // Status badge
+            const statusBadge = document.createElement('span');
+            statusBadge.className = `status-badge ${statusClass}`;
+            statusBadge.textContent = statusText;
+
+            // Add components to client item
+            clientItem.appendChild(clientInfo);
+            clientItem.appendChild(statusBadge);
+
+            // Add client item to target div
+            targetDiv.appendChild(clientItem);
+        });
+
+        // Add section title at the top of the modal target div
+        if (!targetDiv.querySelector('.section-title')) {
+            const titleElement = document.createElement('h3');
+            titleElement.className = 'section-title text-lg font-semibold text-gray-700 mb-3';
+            titleElement.textContent = 'Client Status';
+            targetDiv.insertBefore(titleElement, targetDiv.firstChild);
+        }
+
+        // Handle environment variables section
+        const envRequirements = mcpServer.installation?.['env'] || mcpServer.installation?.env || {};
+
+        // Make sure environment variables section has a title
+        if (!envInputsDiv.querySelector('.section-title')) {
+            const envTitle = document.createElement('h3');
+            envTitle.className = 'section-title text-lg font-semibold text-gray-700 mb-3';
+            envTitle.textContent = 'Environment Variables';
+            envInputsDiv.insertBefore(envTitle, envInputsDiv.firstChild);
+        }
+
+        if (Object.keys(envRequirements).length === 0) {
+            const noEnvMessage = document.createElement('p');
+            noEnvMessage.className = 'text-gray-600';
+            noEnvMessage.textContent = 'No environment variables required for this MCP server.';
+            envInputsDiv.appendChild(noEnvMessage);
+        } else {
+            // Create inputs for each environment variable
+            Object.keys(envRequirements).forEach(key => {
+                const req = envRequirements[key];
+                const inputId = `env_${key}`;
+                const inputWrapper = document.createElement('div');
+                inputWrapper.className = 'mb-3';
+
+                const label = document.createElement('label');
+                label.htmlFor = inputId;
+                label.className = 'block text-sm font-medium text-gray-700 mb-1';
+                label.innerHTML = `${key} ${req.Required ? '<span class="text-red-500">*</span>' : ''}`;
+
+                const input = document.createElement('input');
+                input.type = 'text';
+                input.id = inputId;
+                input.name = key;
+                input.placeholder = req.Description || key;
+                input.value = req.Default || '';
+                input.required = req.Required;
+                input.className = 'input-field';
+
+                inputWrapper.appendChild(label);
+                inputWrapper.appendChild(input);
+
+                if (req.Description) {
+                    const description = document.createElement('p');
+                    description.className = 'text-xs text-gray-500 mt-1';
+                    description.textContent = req.Description;
+                    inputWrapper.appendChild(description);
+                }
+
+                envInputsDiv.appendChild(inputWrapper);
+            });
+        }
+
+        // Handle server requirements section last
+        const serverRequirements = mcpServer.dependencies?.requirements || [];
+        const requirements = serverData.data.installationStatus?.requirementsStatus || {};
+
+        if (serverRequirements.length > 0) {
+            const reqHtml = serverRequirements.map(req => {
+                const status = requirements[req.name] || {};
+                const statusClass = status.installed
+                    ? 'text-green-600 bg-green-50'
+                    : 'text-yellow-600 bg-yellow-50';
+                const statusText = status.installed ? 'Installed' : 'Required';
+
+                return `
+                    <div class="border border-gray-200 p-3 rounded-lg mb-2 hover:bg-gray-50">
+                        <div class="flex justify-between items-center">
+                            <div>
+                                <div class="font-semibold text-gray-800">${req.name}</div>
+                                <div class="text-sm text-gray-600 shadow-sm p-1 rounded bg-gray-50">
+                                    <span class="font-medium">${status.type || 'package'}</span>${status.version ? ` • <span class="font-medium">${status.version}</span>` : ''}
+                                </div>
+                            </div>
+                            <span class="${statusClass} inline-flex items-center px-3 py-1 rounded-full text-sm">
+                                ${statusText}
+                            </span>
+                        </div>
+                    </div>
+                `;
+            }).join('');
+
+            modalRequirements.innerHTML = `
+                <h3 class="text-lg font-semibold text-gray-700 mb-3">Dependencies</h3>
+                <p class="text-sm text-gray-600 mb-4">These dependencies will be automatically installed when installing the server</p>
+                ${reqHtml}
+            `;
+        } else {
+            modalRequirements.innerHTML = '<p class="text-gray-600">No additional dependencies required.</p>';
+        }
+
+        // Set up the install form submit handler
+        const installForm = document.getElementById('installForm');
+        installForm.onsubmit = (e) => {
+            e.preventDefault();
+
+            // Get all environment variables
+            const envVars = {};
+            const inputs = envInputsDiv.querySelectorAll('input');
+            inputs.forEach(input => {
+                if (input.name && input.value) {
+                    envVars[input.name] = input.value;
+                }
+            });
+
+            // Get selected clients
+            const selectedTargets = window.selectedClients.length > 0 ?
+                window.selectedClients :
+                Array.from(document.querySelectorAll('.client-item.selected'))
+                    .map(item => item.dataset.target);
+
+            if (selectedTargets.length === 0) {
+                showToast('Please select at least one client to configure.', 'error');
+                return;
+            }
+
+            // Call install function with selected targets
+            // Find installing message for the first selected target
+            let installingMessage = "Starting installation...";
+            const serverStatus = serverStatuses[serverName] || { installedStatus: {} };
+            if (selectedTargets.length > 0) {
+                const target = selectedTargets[0];
+                const msg = serverStatus.installedStatus?.[target]?.message;
+                if (msg) installingMessage = msg;
+            }
+            handleBulkClientInstall(categoryName, serverName, selectedTargets, envVars, installingMessage, serverData);
+        };
+
+    } catch (error) {
+        console.error("Error loading data:", error);
+        targetDiv.innerHTML = `<p class="text-red-500">Error: ${error.message}</p>`;
+    }
+
+    modal.style.display = "block";
+}
+
+// Function to handle bulk client installations
+async function handleBulkClientInstall(categoryName, serverName, targets, envVars = {}, installingMessage = "Starting installation...", serverData = null) {
+    console.log('[LoadingModal] handleBulkClientInstall called', { categoryName, serverName, targets, envVars });
+    // 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 && serverData.data && serverData.data.installationStatus && serverData.data.installationStatus.serversStatus) {
+        const serverStatuses = serverData.data.installationStatus.serversStatus;
+        const serverStatus = serverStatuses[serverName] || { installedStatus: {} };
+        if (targets && 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(installingMessage);
+
+    delayedAppendInstallLoadingMessage(installingMessage);
+
+    try {
+        delayedAppendInstallLoadingMessage("Installing, please wait...");
+        const response = await fetch(`/api/categories/${categoryName}/install`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                'Accept': 'application/json'
+            },
+            body: JSON.stringify({
+                serverList: {
+                    [serverName]: {
+                        targetClients: targets,
+                        env: envVars
+                    }
+                }
+            })
+        });
+
+        console.log('[LoadingModal] fetch install response:', response);
+
+        if (!response.ok) {
+            const errorData = await response.text();
+            delayedAppendInstallLoadingMessage(`<span style="color:red;">Installation failed: ${errorData || response.statusText}</span>`);
+            console.error('[LoadingModal] Installation 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:red;">${result.error || 'Installation failed'}</span>`);
+            console.error('[LoadingModal] install result error:', result.error || 'Installation failed');
+            throw new Error(result.error || 'Installation failed');
+        }
+
+        // Optionally, you can refresh modal data here or trigger a callback
+        // Start polling for install status
+        pollInstallStatus(categoryName, serverName, targets);
+    } catch (error) {
+        console.error('[LoadingModal] Error applying configuration:', error);
+        delayedAppendInstallLoadingMessage(`<span style="color:red;">Error: ${error.message}</span>`);
+        setTimeout(() => {
+            hideInstallLoadingModal();
+            setTimeout(() => {
+                location.reload();
+            }, 200);
+        }, 3200);
+    }
+}
+
+// Poll install status for the given server/targets
+async function pollInstallStatus(categoryName, serverName, targets, interval = 2000, maxTries = 60) {
+    let tries = 0;
+    let lastMessages = {};
+    // Use global delayedAppendInstallLoadingMessage and queue logic
+    while (tries < maxTries) {
+        try {
+            const resp = await fetch(`/api/categories/${categoryName}`);
+            if (resp.ok) {
+                const data = await resp.json();
+                const serverStatuses = data?.data?.installationStatus?.serversStatus || {};
+                const serverStatus = serverStatuses[serverName] || { installedStatus: {} };
+                let allCompleted = true;
+                for (const target of targets) {
+                    const status = serverStatus.installedStatus?.[target]?.status;
+                    const msg = serverStatus.installedStatus?.[target]?.message;
+                    // Only append new messages
+                    if (msg && lastMessages[target] !== msg) {
+                        delayedAppendInstallLoadingMessage(`[${target}] ${msg}`);
+                        lastMessages[target] = msg;
+                    }
+                    if (status !== "completed") {
+                        allCompleted = false;
+                    }
+                }
+                if (allCompleted) {
+                    delayedAppendInstallLoadingMessage(`<span style="color:green;">Configuration applied successfully for ${targets.length} client(s).</span>`);
+                    setTimeout(() => {
+                        hideInstallLoadingModal();
+                        setTimeout(() => {
+                            location.reload();
+                        }, 200);
+                    }, 5000);
+                    return;
+                }
+            }
+        } catch (e) {
+            // Ignore errors and continue polling
+        }
+        await new Promise(resolve => setTimeout(resolve, interval));
+        tries++;
+    }
+    // Timeout: close modal and reload anyway
+    hideInstallLoadingModal();
+    setTimeout(() => {
+        location.reload();
+    }, 200);
+}
+
+// Function to handle client uninstallation for multiple targets
+async function uninstallTools(categoryName, serverList, targets) {
+    if (!Array.isArray(targets)) {
+        targets = [targets]; // Convert single target to array for backward compatibility
+    }
+
+    const confirmed = await showConfirm(`Are you sure you want to uninstall this server for ${targets.length} client(s)?`);
+    if (!confirmed) {
+        return;
+    }
+
+    try {
+        const response = await fetch(`/api/categories/${categoryName}/uninstall`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+                toolList: serverList,
+                options: {
+                    targets: targets
+                }
+            })
+        });
+
+        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');
+        }
+
+        showToast(`Successfully uninstalled for ${targets.length} client(s).`, 'success');
+        location.reload(); // Refresh the page to update the UI
+    } catch (error) {
+        console.error('Error uninstalling tools:', error);
+        showToast(`Error uninstalling tools: ${error.message}`, 'error');
+    }
+}
+
+// Close modal
+function closeModal() {
+    document.getElementById('installModal').style.display = "none";
+}
+
+// Close modal if clicked outside content
+function setupModalOutsideClick() {
+    window.onclick = function (event) {
+        const modal = document.getElementById('installModal');
+        if (event.target == modal) {
+            closeModal();
+        }
+    };
+}
+
+// Compatibility function for individual client installation
+async function handleClientInstall(categoryName, serverName, target, envVars = {}) {
+    return handleBulkClientInstall(categoryName, serverName, [target], envVars);
+}
+window.showInstallLoadingModal = showInstallLoadingModal;
+window.appendInstallLoadingMessage = appendInstallLoadingMessage;
+window.hideInstallLoadingModal = hideInstallLoadingModal;
+
+
+export { showInstallModal, closeModal, setupModalOutsideClick, uninstallTools };

package/src/web/public/js/notifications.js

@@ -0,0 +1,99 @@
+// Function to show a Bootstrap alert notification
+function showToast(message, type = 'success') {
+    const alertContainer = document.querySelector('.alert-container');
+    const alertId = `alert-${Date.now()}`;
+    
+    const alertHtml = `
+        <div id="${alertId}" class="alert alert-${type} alert-dismissible fade show" role="alert">
+            ${type === 'success' ?
+                '<i class="bi bi-check-circle-fill me-2"></i>' :
+                '<i class="bi bi-exclamation-triangle-fill me-2"></i>'
+            }
+            ${message}
+            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
+        </div>
+    `;
+    
+    alertContainer.insertAdjacentHTML('beforeend', alertHtml);
+    
+    const alertElement = document.getElementById(alertId);
+    
+    // Remove the alert after 5 seconds
+    setTimeout(() => {
+        const bsAlert = new bootstrap.Alert(alertElement);
+        bsAlert.close();
+    }, 3000);  // Reduced to 3 seconds
+    
+    // Remove the element after animation
+    alertElement.addEventListener('closed.bs.alert', () => {
+        alertElement.remove();
+    });
+}
+
+// Function to show a Bootstrap confirmation dialog
+function showConfirm(message) {
+    return new Promise((resolve) => {
+        const modalId = `confirm-modal-${Date.now()}`;
+        const modalHtml = `
+            <div class="modal fade" id="${modalId}" tabindex="-1" aria-labelledby="${modalId}-label" aria-hidden="true">
+                <div class="modal-dialog">
+                    <div class="modal-content">
+                        <div class="modal-header">
+                            <h5 class="modal-title" id="${modalId}-label">Confirm Action</h5>
+                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                        </div>
+                        <div class="modal-body">
+                            ${message}
+                        </div>
+                        <div class="modal-footer">
+                            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
+                            <button type="button" class="btn btn-primary confirm-action">
+                                <span class="spinner-border spinner-border-sm d-none me-2" role="status" aria-hidden="true"></span>
+                                Confirm
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        `;
+        
+        document.body.insertAdjacentHTML('beforeend', modalHtml);
+        
+        const modalElement = document.getElementById(modalId);
+        const modal = new bootstrap.Modal(modalElement);
+        
+        // Handle confirm button click
+        modalElement.querySelector('.confirm-action').addEventListener('click', (event) => {
+            const button = event.currentTarget;
+            const spinner = button.querySelector('.spinner-border');
+            button.disabled = true;
+            spinner.classList.remove('d-none');
+            
+            // Add small delay to show the loading state
+            setTimeout(() => {
+                modal.hide();
+                resolve(true);
+            }, 300);
+        });
+        
+        // Handle modal hidden event
+        modalElement.addEventListener('hidden.bs.modal', () => {
+            modalElement.remove();
+            resolve(false);
+        });
+        
+        modal.show();
+    });
+}
+
+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');
+    }
+});