imcp 0.0.1

package/src/web/public/js/serverCategoryDetails.js

@@ -0,0 +1,210 @@
+import { allServerCategoriesData, fetchServerCategories } from './api.js';
+import { showInstallModal } from './modal.js';
+import { showToast, showConfirm } from './notifications.js';
+
+const REFRESH_INTERVAL = 2000; // 2 seconds
+let refreshTimer = null;
+
+// Start refresh timer for installation status
+function startRefreshTimer(serverName) {
+    // Clear existing timer if any
+    if (refreshTimer) {
+        clearInterval(refreshTimer);
+    }
+
+    // Setup new refresh timer
+    refreshTimer = setInterval(async () => {
+        const server = allServerCategoriesData.find(s => s.name === serverName);
+        if (!server?.installationStatus?.serversStatus) return;
+
+        // Check if any installation is pending
+        const hasPendingInstallation = Object.values(server.installationStatus.serversStatus).some(serverStatus =>
+            Object.values(serverStatus.installedStatus || {}).some(status =>
+                status.status === 'pending' || status.status === 'in-progress'
+            )
+        );
+
+        if (hasPendingInstallation) {
+            await fetchServerCategories(); // Refresh data
+            await showServerDetails(serverName); // Update UI
+        } else {
+            clearInterval(refreshTimer); // Stop refreshing if no pending installations
+        }
+    }, REFRESH_INTERVAL);
+}
+
+// Show server details
+async function showServerDetails(serverName) {
+    console.log("Showing details for:", serverName);
+    const server = allServerCategoriesData.find(s => s.name === serverName);
+    const detailsDiv = document.getElementById('serverCategoryDetails');
+
+    if (!server) {
+        detailsDiv.innerHTML = '<p class="text-red-500">Error: Server data not found.</p>';
+        return;
+    }
+
+    // Highlight selected server
+    document.querySelectorAll('.server-item').forEach(item => {
+        item.classList.remove('bg-blue-100', 'border-blue-300');
+        if (item.dataset.serverName === serverName) {
+            item.classList.add('bg-blue-100', 'border-blue-300');
+        }
+    });
+
+    // Initial render with loading state
+    detailsDiv.innerHTML = `
+        <h3 class="text-xl font-semibold mb-2 text-gray-800">${server.displayName || server.name}</h3>
+        <p class="mb-4"><span class="font-semibold">Description:</span> ${server.description || 'N/A'}</p>
+        <div id="toolMcpsList" class="mt-4">
+            <div class="animate-pulse flex space-x-4">
+                <div class="flex-1 space-y-4 py-1">
+                    <div class="h-4 bg-gray-200 rounded w-3/4"></div>
+                    <div class="space-y-2">
+                        <div class="h-4 bg-gray-200 rounded"></div>
+                        <div class="h-4 bg-gray-200 rounded w-5/6"></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    `;
+
+    // Asynchronously load and render the servers list
+    try {
+        const serversListHtml = await renderServersList(server);
+        document.getElementById('toolMcpsList').innerHTML = serversListHtml;
+    } catch (error) {
+        console.error('Error rendering servers list:', error);
+        document.getElementById('toolMcpsList').innerHTML = '<p class="text-red-500">Error loading server details.</p>';
+        showToast(`Error loading server details: ${error.message}`, 'error');
+    }
+    
+    // Start monitoring installation status
+    startRefreshTimer(serverName);
+}
+
+// Render tools list
+async function renderServersList(serverCategory) {
+    // Fetch available targets
+    const targetResponse = await fetch('/api/targets');
+    const targetData = await targetResponse.json();
+    const availableTargets = targetData.success ? targetData.data : [];
+    if (!serverCategory.feedConfiguration?.mcpServers) {
+        return '<p class="text-gray-500">No MCP Servers found for this server.</p>';
+    }
+
+    const mcpServers = serverCategory.feedConfiguration.mcpServers;
+    if (mcpServers.length === 0) {
+        return '<p class="text-gray-500">No MCP Servers found for this server.</p>';
+    }
+
+    let toolsHtml = `
+        <div class="flex justify-between items-center mb-4">
+            <h2 class="text-lg font-semibold text-gray-600">MCP Servers</h2>
+        </div>`;
+
+    mcpServers.forEach(mcpServer => {
+        const isInstalled = mcpServer.installed;
+        const envRequirements = mcpServer.installation?.['env:'] || mcpServer.installation?.env || {};
+        const hasEnvRequirements = Object.keys(envRequirements).length > 0;
+
+        toolsHtml += `
+            <div class="border border-gray-200 p-3 rounded mb-2 flex justify-between items-center hover:bg-gray-50 transition-all duration-150 ${!isInstalled ? 'bg-white' : 'bg-gray-50'}"
+                id="tool-item-${mcpServer.name}">
+                <div class="flex items-center flex-1">
+                    <div>
+                        <h5 class="font-semibold text-gray-800">${mcpServer.displayName || mcpServer.name}</h5>
+                        <p class="text-sm text-gray-600 mb-1">${mcpServer.description || 'No description'}</p>
+                        <div class="flex flex-col">
+                            <span class="text-xs font-semibold mb-2">Client Status:</span>
+                            <div class="flex flex-wrap gap-2">
+                                ${availableTargets.map(client => {
+                                    const status = (serverCategory.installationStatus?.serversStatus[mcpServer.name]?.installedStatus|| {})[client];
+                                    const isInstalled = status?.status === 'completed';
+                                    return `
+                                        <span class="text-xs flex items-center ${isInstalled ? 'text-green-600 bg-green-50' : 'text-gray-600 bg-gray-50'} px-3 py-1 rounded-full shadow">
+                                            <svg class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+                                                ${isInstalled
+                                                    ? '<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path>'
+                                                    : '<path d="M7 3.5A1.5 1.5 0 018.5 2h3.879a1.5 1.5 0 011.06.44l3.122 3.12A1.5 1.5 0 0117 6.622V12.5a1.5 1.5 0 01-1.5 1.5h-1v-3.379a1.5 1.5 0 00-.44-1.06L10.94 6.44A1.5 1.5 0 009.879 6H7V3.5z M6 6h2.879A1.5 1.5 0 0110 7.5v1.379a1.5 1.5 0 01-.44 1.06L6.44 13.06A1.5 1.5 0 015.379 13H4.5A1.5 1.5 0 013 11.5V7.5A1.5 1.5 0 014.5 6H6z"></path>'
+                                                }
+                                            </svg>
+                                            ${client}
+                                        </span>
+                                    `;
+                                }).join('')}
+                            </div>
+                        </div>
+                        ${hasEnvRequirements ? `<div class="mt-1 text-xs text-blue-600">
+                            <svg class="w-3 h-3 inline mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+                                <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd"></path>
+                            </svg>
+                            Requires environment configuration
+                        </div>` : ''}
+                    </div>
+                </div>
+                ${!isInstalled ? `
+                    <button onclick="event.stopPropagation(); window.showInstallModal('${serverCategory.name}', '${mcpServer.name}')"
+                            class="bg-blue-500 hover:bg-blue-700 text-white text-sm font-bold py-1 px-3 rounded-full shadow-sm transition duration-150 ease-in-out">
+                        Install
+                    </button>
+                 ` : `
+                    <div class="flex items-center gap-2">
+                        <button onclick="event.stopPropagation(); window.uninstallTools('${serverCategory.name}', ['${mcpServer.name}'])"
+                                class="bg-red-500 hover:bg-red-700 text-white text-sm font-bold py-1 px-3 rounded transition duration-150 ease-in-out">
+                            Uninstall
+                        </button>
+                    </div>
+                `}
+            </div>
+        `;
+    });
+
+    return toolsHtml;
+}
+
+// Uninstall tools
+window.uninstallTools = async function(serverName, toolList) {
+    const confirmed = await showConfirm(`Are you sure you want to uninstall ${toolList.length} tool(s)?`);
+    if (!confirmed) {
+        return;
+    }
+
+    try {
+        const response = await fetch(`/api/categories/${serverName}/uninstall`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ toolList })
+        });
+
+        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('Tools uninstalled successfully!', 'success');
+        await fetchServerCategories(); // Refresh data
+        await showServerDetails(serverName); // Refresh UI
+    } catch (error) {
+        console.error('Error uninstalling tools:', error);
+        showToast(`Error uninstalling tools: ${error.message}`, 'error');
+    }
+}
+
+// Make showServerDetails available in window scope and handle async
+window.showServerDetails = async function(serverName) {
+    try {
+        await showServerDetails(serverName);
+    } catch (error) {
+        console.error('Error showing server details:', error);
+        document.getElementById('serverCategoryDetails').innerHTML = '<p class="text-red-500">Error loading server details.</p>';
+        showToast(`Error loading server details: ${error.message}`, 'error');
+    }
+};
+
+export { showServerDetails };

package/src/web/public/js/serverCategoryList.js

@@ -0,0 +1,82 @@
+import { allServerCategoriesData, fetchServerCategories } from './api.js';
+import { showServerDetails } from './serverCategoryDetails.js';
+import { showToast } from './notifications.js';
+
+// Function to render server list (used by fetchServerCategories and search)
+function renderServerCategoryList(servers) {
+    const serverCategoryList = document.getElementById('serverCategoryList');
+
+    if (servers.length === 0) {
+        serverCategoryList.innerHTML = '<p class="text-gray-500">No servers found matching search.</p>';
+        document.getElementById('serverCategoryDetails').innerHTML = '<p>Select a server from the list to see details.</p>'; // Clear details
+        return;
+    }
+
+    serverCategoryList.innerHTML = servers.map(server => {
+        let statusHtml = '';
+        
+        // Add tool status summary if available
+        if (server.installationStatus && server.installationStatus.serversStatus) {
+            const totalTools = Object.keys(server.installationStatus.serversStatus).length;
+            const installedTools = Object.values(server.installationStatus.serversStatus)
+                .filter(serverStatus => 
+                    Object.values(serverStatus.installedStatus || {})
+                        .some(opStatus => opStatus.status === 'completed' && opStatus.type === 'install')
+                ).length;
+
+            if (totalTools > 0) {
+                let colorClass, icon, statusText;
+                
+                if (installedTools === totalTools) {
+                    // All tools installed
+                    colorClass = "text-green-600 bg-green-50";
+                    icon = '<svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>';
+                    statusText = "Fully Configured";
+                } else if (installedTools > 0) {
+                    // Some tools installed
+                    colorClass = "text-green-600 bg-green-50";
+                    icon = '<svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>';
+                    statusText = "Partial Configured";
+                } else {
+                    // No tools installed
+                    colorClass = "text-red-600 bg-red-50";
+                    icon = '<svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"></path></svg>';
+                    statusText = "Not Configured";
+                }
+                
+                statusHtml = `<span class="${colorClass} inline-flex items-center px-2 py-1 rounded-full text-xs" style="width: fit-content; max-width: 100%;">
+                    ${icon}<span class="truncate">${statusText} (${installedTools}/${totalTools})</span>
+                </span>`;
+            }
+        }
+
+        return `
+        <div class="server-item border border-gray-200 p-3 rounded hover:bg-gray-50 cursor-pointer transition duration-150 ease-in-out"
+             onclick="window.showServerDetails('${server.name}')"
+             data-server-name="${server.name}">
+            <h3 class="font-semibold text-gray-800">${server.displayName || server.name}</h3>
+            <p class="text-sm text-gray-500">${statusHtml}</p>
+        </div>
+        `;
+    }).join('');
+}
+
+// Setup search functionality
+function setupSearch() {
+    document.getElementById('searchBox').addEventListener('input', function () {
+        const searchTerm = this.value.toLowerCase();
+
+        // Filter the servers list based on search
+        if (allServerCategorisData && allServerCategorisData.length > 0) {
+            const filteredServers = allServerCategorisData.filter(server =>
+                (server.displayName || server.name).toLowerCase().includes(searchTerm) ||
+                (server.description || '').toLowerCase().includes(searchTerm)
+            );
+
+            renderServerCategoryList(filteredServers);
+        }
+    });
+}
+
+// Export functions
+export { renderServerCategoryList, setupSearch };

package/src/web/public/modal.html

@@ -0,0 +1,61 @@
+<div id="installModal" class="modal">
+    <div class="modal-content">
+        <span class="close" onclick="closeModal()">&times;</span>
+        <div class="modal-header">
+            <h2 id="modalTitle" class="text-2xl font-bold text-gray-800"></h2>
+            <p class="text-gray-600 mt-2">Configure your installation settings below</p>
+        </div>
+    
+        <div class="modal-sections">
+            <!-- Requirements Section -->
+            <div class="section-container">
+                <div id="modalRequirements"></div>
+            </div>
+    
+            <!-- Client Status Section -->
+            <div class="section-container">
+                <div id="modalTargets" class="client-grid"></div>
+            </div>
+    
+            <!-- Environment Variables Section -->
+            <div class="section-container">
+                <div id="modalEnvInputs" class="space-y-4"></div>
+            </div>
+        </div>
+    
+        <form id="installForm" class="mt-8">
+            <div class="flex justify-end space-x-4">
+                <button type="button" onclick="closeModal()"
+                    class="px-6 py-2.5 text-gray-600 hover:text-gray-800 font-medium rounded-lg hover:bg-gray-100 transition-colors">
+                    Cancel
+                </button>
+                <button type="submit" class="submit-button">
+                    Apply
+                </button>
+            </div>
+        </form>
+    </div>
+</div>
+
+<!-- Loading Modal -->
+<div id="installLoadingModal" class="modal" style="display:none; z-index:2000;">
+    <div class="modal-content" style="display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 340px; pointer-events:auto;">
+        <div style="width: 100%;">
+            <div style="display: flex; flex-direction: column; align-items: center; width: 100%;">
+                <div class="loading-icon" style="margin-bottom:8px;">
+                    <svg width="48" height="48" viewBox="0 0 48 48" fill="none" style="display: block; margin-left: auto; margin-right: auto;">
+                        <circle cx="24" cy="24" r="20" stroke="#888" stroke-width="4" opacity="0.2"/>
+                        <circle cx="24" cy="24" r="20" stroke="#3498db" stroke-width="4" stroke-linecap="round" stroke-dasharray="100" stroke-dashoffset="60">
+                            <animateTransform attributeName="transform" type="rotate" from="0 24 24" to="360 24 24" dur="1s" repeatCount="indefinite"/>
+                        </circle>
+                    </svg>
+                </div>
+                <div class="loading-title" style="font-size:1.5rem; font-weight:bold; margin-bottom:8px; text-align:center;">Installing...</div>
+                <div id="installLoadingMessage" style="min-height:48px; max-height:160px; overflow:auto; background:#f8f8f8; border-radius:6px; padding:12px; font-size:1rem; color:#444; text-align:left; width:100%;"></div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<link rel="stylesheet" href="/css/modal.css">
+<link rel="stylesheet" href="/css/modal.css">

package/src/web/public/styles.css

@@ -0,0 +1,155 @@
+/* Import Inter font */
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
+
+/* Base styles */
+body {
+    font-family: 'Inter', system-ui, -apple-system, sans-serif;
+}
+
+/* Enhanced modal styling */
+.modal {
+    display: none;
+    position: fixed;
+    z-index: 50;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    background-color: rgba(0, 0, 0, 0.5);
+    backdrop-filter: blur(4px);
+}
+
+.modal-content {
+    background-color: #ffffff;
+    margin: 10% auto;
+    padding: 2rem;
+    border: none;
+    border-radius: 1rem;
+    width: 90%;
+    max-width: 500px;
+    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+    transform: translateY(0);
+    transition: all 0.3s ease-out;
+}
+
+.close-button {
+    color: #6b7280;
+    float: right;
+    font-size: 24px;
+    font-weight: 600;
+    transition: color 0.2s ease;
+}
+
+.close-button:hover,
+.close-button:focus {
+    color: #111827;
+    text-decoration: none;
+    cursor: pointer;
+}
+
+/* Server list styles */
+.server-list {
+    border-radius: 0.75rem;
+}
+
+.server-item {
+    padding: 0.75rem 1rem;
+    margin-bottom: 0.5rem;
+    border-radius: 0.5rem;
+    border: 1px solid #e5e7eb;
+    transition: all 0.2s ease;
+}
+
+.server-item:hover {
+    background-color: #f3f4f6;
+    transform: translateY(-1px);
+    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+}
+
+/* Tool card styles */
+.tool-card {
+    border: 1px solid #e5e7eb;
+    border-radius: 0.75rem;
+    padding: 1.25rem;
+    margin-bottom: 1rem;
+    background-color: #ffffff;
+    transition: all 0.2s ease;
+}
+
+.tool-card:hover {
+    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+}
+
+/* Status badges */
+.status-badge {
+    display: inline-flex;
+    align-items: center;
+    padding: 0.25rem 0.75rem;
+    border-radius: 9999px;
+    font-size: 0.875rem;
+    font-weight: 500;
+}
+
+.status-badge.installed {
+    background-color: #dcfce7;
+    color: #166534;
+}
+
+.status-badge.not-installed {
+    background-color: #fee2e2;
+    color: #991b1b;
+}
+
+/* Button styles */
+.btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0.5rem 1rem;
+    border-radius: 0.5rem;
+    font-weight: 500;
+    transition: all 0.2s ease;
+}
+
+.btn-install {
+    background-color: #2563eb;
+    color: white;
+}
+
+.btn-install:hover {
+    background-color: #1d4ed8;
+    transform: translateY(-1px);
+}
+
+.btn-uninstall {
+    background-color: #dc2626;
+    color: white;
+}
+
+.btn-uninstall:hover {
+    background-color: #b91c1c;
+    transform: translateY(-1px);
+}
+
+/* Icon styles */
+.icon {
+    width: 1.25rem;
+    height: 1.25rem;
+    margin-right: 0.5rem;
+}
+
+/* Input styles */
+.search-input {
+    width: 100%;
+    padding: 0.75rem 1rem 0.75rem 2.5rem;
+    border: 1px solid #e5e7eb;
+    border-radius: 0.5rem;
+    transition: all 0.2s ease;
+}
+
+.search-input:focus {
+    outline: none;
+    border-color: #2563eb;
+    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
+}