imcp 0.0.12 → 0.0.14

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

@@ -1,143 +1,242 @@
 import { allServerCategoriesData, fetchServerCategories } from './api.js';
 import { showInstallModal } from './modal.js';
 import { showToast, showConfirm } from './notifications.js';
+import { DetailsWidget } from './detailsWidget.js';
 
 const REFRESH_INTERVAL = 2000; // 2 seconds
 let refreshTimer = null;
+let activeDetailsWidget = null;
+const MAX_RETRIES = 3;
+const RETRY_DELAY = 1000;
 
 // 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
+        try {
+            const server = allServerCategoriesData.find(s => s.name === serverName);
+            if (!server?.installationStatus?.serversStatus) return;
+
+            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();
+                await showServerDetails(serverName);
+            } else {
+                clearInterval(refreshTimer);
+            }
+        } catch (error) {
+            console.error('Error in refresh timer:', error);
+            clearInterval(refreshTimer);
         }
     }, REFRESH_INTERVAL);
 }
 
-// Show server details
-async function showServerDetails(serverName) {
+// Show server details with retry mechanism
+async function showServerDetails(serverName, retryCount = 0) {
     console.log("Showing details for:", serverName);
-    // Save the selected category in localStorage
-    localStorage.setItem('lastSelectedCategory', 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;
-    }
+    try {
+        localStorage.setItem('lastSelectedCategory', serverName);
 
-    // 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');
+        // If server data is not available, attempt to fetch it
+        if (allServerCategoriesData.length === 0) {
+            await fetchServerCategories();
         }
-    });
-
-    // 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>
+
+        const server = allServerCategoriesData.find(s => s.name === serverName);
+        const detailsDiv = document.getElementById('serverCategoryDetails');
+
+        if (!server) {
+            if (retryCount < MAX_RETRIES) {
+                console.log(`Server data not found, retrying (${retryCount + 1}/${MAX_RETRIES})...`);
+                await new Promise(resolve => setTimeout(resolve, RETRY_DELAY));
+                await fetchServerCategories(); // Refresh the data
+                return showServerDetails(serverName, retryCount + 1);
+            }
+            throw new Error('Server data not found after retries');
+        }
+
+        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>
-        </div>
-    `;
+        `;
 
-    // Asynchronously load and render the servers list
-    try {
         const serversListHtml = await renderServersList(server);
-        document.getElementById('toolMcpsList').innerHTML = serversListHtml;
+        const toolMcpsList = document.getElementById('toolMcpsList');
+        if (!toolMcpsList) {
+            throw new Error('toolMcpsList element not found');
+        }
+
+        toolMcpsList.innerHTML = serversListHtml;
+
+        // Setup server items click handlers
+        const serverItems = document.querySelectorAll('.server-item-content');
+        console.log(`Found ${serverItems.length} server items`);
+
+        serverItems.forEach(item => {
+            const mcpServerName = item.dataset.serverName;
+            console.log(`Setting up click handler for server: ${mcpServerName}`);
+
+            const mcpServer = server.feedConfiguration?.mcpServers?.find(
+                s => s.name === mcpServerName
+            );
+
+            if (mcpServer) {
+                const detailsWidget = new DetailsWidget(item);
+
+                // Initially set description
+                detailsWidget.setContent(mcpServer.description);
+
+                // Fetch and display schema when expanded
+                const fetchSchema = async () => {
+                    try {
+                        const response = await fetch(`/api/categories/${server.name}/servers/${mcpServerName}/schema`);
+                        if (!response.ok) return;
+
+                        const result = await response.json();
+                        if (result.success && result.data) {
+                            detailsWidget.setContent(result.data);
+                        }
+                    } catch (error) {
+                        console.error('Error fetching schema:', error);
+                        // Silently fail - don't show error in UI
+                    }
+                };
+
+                item.addEventListener('click', async (event) => {
+                    if (!event.target.closest('button')) {
+                        if (detailsWidget === activeDetailsWidget) {
+                            // Only toggle if clicking the currently active item
+                            detailsWidget.toggle();
+                            if (!detailsWidget.isVisible()) {
+                                activeDetailsWidget = null;
+                            }
+                        } else {
+                            // Expand the clicked item without collapsing others
+                            detailsWidget.expand();
+                            activeDetailsWidget = detailsWidget;
+                            await fetchSchema();
+                        }
+                    }
+                });
+            }
+        });
+
+        startRefreshTimer(serverName);
     } catch (error) {
-        console.error('Error rendering servers list:', error);
-        document.getElementById('toolMcpsList').innerHTML = '<p class="text-red-500">Error loading server details.</p>';
+        console.error('Error in showServerDetails:', error);
+        const detailsDiv = document.getElementById('serverCategoryDetails');
+        if (detailsDiv) {
+            detailsDiv.innerHTML = `<p class="text-red-500">Error loading server details: ${error.message}</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>';
-    }
+    try {
+        const targetResponse = await fetch('/api/targets');
+        const targetData = await targetResponse.json();
+        const availableTargets = targetData.success ? targetData.data : [];
 
-    const mcpServers = serverCategory.feedConfiguration.mcpServers;
-    if (mcpServers.length === 0) {
-        return '<p class="text-gray-500">No MCP Servers found for this server.</p>';
-    }
+        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">
+        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="server-item-content" data-server-name="${mcpServer.name}">
+                    <div class="server-item-info" style="width: 100%; box-sizing: border-box;">
+                        <div class="server-item-header">
+                            <div class="flex items-center">
+                                <h5 class="font-semibold text-gray-800">${mcpServer.displayName || mcpServer.name}</h5>
+                                ${mcpServer.repository || serverCategory.feedConfiguration?.repository ? (() => {
+                    const repoUrl = mcpServer.repository || serverCategory.feedConfiguration?.repository;
+                    const isGithub = repoUrl.toLowerCase().includes('github.com');
+                    return `
+                                    <a href="${repoUrl}" target="_blank" class="ml-2 flex items-center">
+                                        <span class="text-xs px-2 py-1 bg-gray-100 rounded-md flex items-center text-gray-700 hover:bg-gray-200 transition-colors duration-200">
+                                            ${isGithub ? `
+                                            <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                                                <path fill-rule="evenodd" d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z" clip-rule="evenodd"/>
+                                            </svg>
+                                            GitHub` : `
+                                            <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+                                                <path d="M21.721 12.752a9.711 9.711 0 00-.945-5.003 1.743 1.743 0 01-1.339-1.647c0-.522.236-1.01.62-1.341a9.707 9.707 0 00-3.62-2.087 1.744 1.744 0 01-2.113-1.334A9.721 9.721 0 0012 1.016 9.721 9.721 0 009.676 1.3 1.744 1.744 0 017.562 2.634a9.707 9.707 0 00-3.62 2.087 1.744 1.744 0 00-.048 2.32 9.711 9.711 0 00-.945 5.003 9.712 9.712 0 00.945 5.003 1.744 1.744 0 01.048 2.32 9.707 9.707 0 003.62 2.087 1.744 1.744 0 012.114 1.334A9.721 9.721 0 0012 22.982a9.721 9.721 0 002.324-.284 1.744 1.744 0 012.114-1.334 9.707 9.707 0 003.62-2.087 1.744 1.744 0 01.048-2.32 9.711 9.711 0 00.945-5.003z"/>
+                                            </svg>
+                                            Website`}
+                                        </span>
+                                    </a>`
+                })() : ''}
+                            </div>
+                            <p class="text-sm text-gray-600 mb-1">${mcpServer.description || 'No description'}</p>
+                        </div>
+                        <div class="flex flex-col mt-3">
                             <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 `
+                    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>'
-                }
+                            ? '<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('')}
+                }).join('')}
                             </div>
                         </div>
-                        ${hasEnvRequirements ? `<div class="mt-1 text-xs text-blue-600">
+                        <div class="action-buttons">
+                            ${!isInstalled ? `
+                                <button onclick="event.stopPropagation(); window.showInstallModal('${serverCategory.name}', '${mcpServer.name}')"
+                                        class="bg-blue-500 hover:bg-blue-700 text-white text-xs font-bold py-2 px-4 rounded-full shadow-sm transition duration-150 ease-in-out">
+                                     Setup
+                                 </button>
+                            ` : `
+                                <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-2 px-4 rounded-full shadow-sm transition duration-150 ease-in-out">
+                                    Uninstall
+                                </button>
+                            `}
+                        </div>
+                        ${hasEnvRequirements ? `<div class="mt-3 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>
@@ -145,34 +244,21 @@ async function renderServersList(serverCategory) {
                         </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;
+        return toolsHtml;
+    } catch (error) {
+        console.error('Error in renderServersList:', error);
+        throw error;
+    }
 }
 
-// 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 confirmed = await showConfirm(`Are you sure you want to uninstall ${toolList.length} tool(s)?`);
+        if (!confirmed) return;
+
         const response = await fetch(`/api/categories/${serverName}/uninstall`, {
             method: 'POST',
             headers: { 'Content-Type': 'application/json' },
@@ -190,23 +276,25 @@ window.uninstallTools = async function (serverName, toolList) {
         }
 
         showToast('Tools uninstalled successfully!', 'success');
-        await fetchServerCategories(); // Refresh data
-        await showServerDetails(serverName); // Refresh UI
+        await fetchServerCategories();
+        await showServerDetails(serverName);
     } 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>';
+        console.error('Error in window.showServerDetails:', error);
+        const detailsDiv = document.getElementById('serverCategoryDetails');
+        if (detailsDiv) {
+            detailsDiv.innerHTML = `<p class="text-red-500">Error loading server details: ${error.message}</p>`;
+        }
         showToast(`Error loading server details: ${error.message}`, 'error');
     }
 };
 
-export { showServerDetails };
+export { showServerDetails };

package/src/web/server.ts

@@ -1,6 +1,8 @@
 import express, { Request, Response } from 'express';
 import path from 'path';
 import { fileURLToPath } from 'url';
+import { ServerSchema } from '../core/ServerSchemaProvider.js';
+
 import { SUPPORTED_CLIENT_NAMES } from '../core/constants.js';
 import { serverService } from '../services/ServerService.js';
 import { openBrowser } from '../utils/osUtils.js';
@@ -90,6 +92,35 @@ app.get('/api/categories', async (req: Request<{}, {}, {}, ListQueryParams>, res
       error: message
     });
   }
+
+  // Get server schema
+  app.get('/api/categories/:categoryName/servers/:serverName/schema', async (req: Request<{ categoryName: string; serverName: string }>, res: Response) => {
+    try {
+      const { categoryName, serverName } = req.params;
+      const schema = await serverService.getServerSchema(categoryName, serverName);
+
+      if (!schema) {
+        return res.status(404).json({
+          success: false,
+          error: `Schema not found for server ${serverName} in category ${categoryName}`
+        });
+      }
+
+      const response: ApiResponse<ServerSchema> = {
+        success: true,
+        data: schema
+      };
+
+      res.json(response);
+    } catch (error) {
+      const message = error instanceof Error ? error.message : 'Unknown error';
+      res.status(500).json({
+        success: false,
+        error: `Failed to get schema for server ${req.params.serverName} in category ${req.params.categoryName}: ${message}`
+      });
+    }
+  });
+
 });
 
 // Get categories data (including feed configuration)