imcp 0.0.13 → 0.0.14

package/dist/web/public/js/serverCategoryDetails.js

@@ -6,6 +6,8 @@ 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) {
@@ -37,16 +39,28 @@ function startRefreshTimer(serverName) {
     }, 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);
     try {
         localStorage.setItem('lastSelectedCategory', serverName);
+
+        // If server data is not available, attempt to fetch it
+        if (allServerCategoriesData.length === 0) {
+            await fetchServerCategories();
+        }
+
         const server = allServerCategoriesData.find(s => s.name === serverName);
         const detailsDiv = document.getElementById('serverCategoryDetails');
 
         if (!server) {
-            throw new Error('Server data not found');
+            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 = `
@@ -168,12 +182,24 @@ async function renderServersList(serverCategory) {
                         <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 ? `
-                                <a href="${mcpServer.repository || serverCategory.feedConfiguration?.repository}" target="_blank" class="ml-2 text-blue-600 hover:text-blue-800">
-                                    <svg class="w-5 h-5 shadow-md rounded-full p-1 hover:shadow-lg transition-shadow duration-200" 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>
-                                </a>` : ''}
+                                ${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>
@@ -181,20 +207,20 @@ async function renderServersList(serverCategory) {
                             <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>
                         <div class="action-buttons">
@@ -271,4 +297,4 @@ window.showServerDetails = async function (serverName) {
     }
 };
 
-export { showServerDetails };
+export { showServerDetails };

package/dist/web/public/onboard.html

@@ -0,0 +1,150 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Onboard MCP Category - IMCP</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link rel="stylesheet" href="styles.css">
+    <link rel="stylesheet" href="css/onboard.css">
+    <link rel="stylesheet" href="css/modal.css">
+    <link rel="stylesheet" href="css/notifications.css">
+</head>
+<body class="bg-gray-50 min-h-screen">
+    <div class="container mx-auto px-4 py-6">
+        <div class="flex items-center justify-between mb-8">
+            <h1 class="text-3xl font-bold text-gray-900 flex items-center">
+                <i class='bx bx-server mr-3 text-blue-600'></i>
+                Onboard MCP Category
+            </h1>
+            <a href="index.html" class="text-gray-600 hover:text-gray-900 flex items-center">
+                <i class='bx bx-arrow-back mr-2'></i>
+                Back to Servers
+            </a>
+        </div>
+
+        <div class="bg-white rounded-xl shadow-sm border border-gray-100 p-8 max-w-4xl mx-auto">
+            <!-- Tab Navigation -->
+            <div class="mb-6 border-b border-gray-200">
+                <nav class="flex space-x-8" aria-label="Tabs">
+                    <button id="tab-create-category" class="py-2 px-4 text-blue-600 border-b-2 border-blue-600 font-semibold focus:outline-none" type="button">
+                        Create New Server Category
+                    </button>
+                    <button id="tab-create-server" class="py-2 px-4 text-gray-600 border-b-2 border-transparent hover:text-blue-600 hover:border-blue-600 font-semibold focus:outline-none" type="button">
+                        Create New Server in Existing Category
+                    </button>
+                </nav>
+            </div>
+            <!-- Tab Panels -->
+            <div id="panel-create-category">
+                <form id="onboardForm" class="space-y-8">
+                    <!-- Basic Information -->
+                    <div class="space-y-4">
+                        <h2 class="text-xl font-semibold text-gray-900 flex items-center mb-4">
+                            <i class='bx bx-info-circle mr-2 text-blue-600'></i>
+                            Basic Information
+                        </h2>
+                        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                            <div>
+                                <label class="block text-sm font-medium text-gray-700 mb-1">Category Name*</label>
+                                <input type="text" name="name" required
+                                    class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                                    placeholder="e.g., ai-coder-tools">
+                            </div>
+                            <div>
+                                <label class="block text-sm font-medium text-gray-700 mb-1">Display Name*</label>
+                                <input type="text" name="displayName" required
+                                    class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                                    placeholder="e.g., Coder Tools">
+                            </div>
+                            <div class="md:col-span-2">
+                                <label class="block text-sm font-medium text-gray-700 mb-1">Description</label>
+                                <textarea name="description" rows="3"
+                                    class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                                    placeholder="Describe the purpose and capabilities of this server category"></textarea>
+                            </div>
+                            <div class="md:col-span-2">
+                                <label class="block text-sm font-medium text-gray-700 mb-1">Repository URL</label>
+                                <input type="url" name="repository"
+                                    class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                                    placeholder="e.g., https://github.com/organization/repository">
+                            </div>
+                        </div>
+                    </div>
+                    <!-- MCP Servers (with requirements merged in) -->
+                    <div class="space-y-4">
+                        <h2 class="text-xl font-semibold text-gray-900 flex items-center mb-4">
+                            <i class='bx bx-server mr-2 text-blue-600'></i>
+                            MCP Servers (Requirements managed per server)
+                        </h2>
+                        <div id="serversList" class="space-y-6">
+                            <!-- Server configurations will be added here dynamically -->
+                        </div>
+                        <button type="button" onclick="addServer()"
+                            class="px-4 py-2 border border-gray-300 rounded-lg text-gray-600 hover:bg-gray-50 flex items-center">
+                            <i class='bx bx-plus mr-2'></i>
+                            Add Server
+                        </button>
+                    </div>
+                    <div class="flex justify-end space-x-4 pt-6 border-t">
+                        <button type="button" onclick="window.location.href='index.html'"
+                            class="px-6 py-2.5 border border-gray-300 rounded-lg text-gray-600 hover:bg-gray-50">
+                            Cancel
+                        </button>
+                        <button type="submit"
+                            class="px-6 py-2.5 bg-blue-600 text-white rounded-lg hover:bg-blue-700 flex items-center">
+                            <i class='bx bx-save mr-2'></i>
+                            Save Category
+                        </button>
+                    </div>
+                </form>
+            </div>
+            <div id="panel-create-server" class="hidden">
+                <form id="onboardServerForm" class="space-y-8">
+                    <!-- Select Existing Category -->
+                    <div class="space-y-4">
+                        <h2 class="text-xl font-semibold text-gray-900 flex items-center mb-4">
+                            <i class='bx bx-category mr-2 text-blue-600'></i>
+                            Select Server Category
+                        </h2>
+                        <select id="existingCategorySelect" name="category" required
+                            class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
+                            <option value="">Loading...</option>
+                        </select>
+                    </div>
+                    <!-- MCP Server Dropdown -->
+                    <div class="space-y-4">
+                        <h2 class="text-xl font-semibold text-gray-900 flex items-center mb-4">
+                            <i class='bx bx-server mr-2 text-blue-600'></i>
+                            MCP Server
+                        </h2>
+                        <select id="existingServerSelect" name="server" required
+                            class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
+                            <option value="">Select MCP Server</option>
+                            <option value="__create_new__">Create New</option>
+                        </select>
+                    </div>
+                    <!-- MCP Server Details (readonly or editable) -->
+                    <div id="serverDetailsContainer">
+                        <!-- Server details will be rendered here -->
+                    </div>
+                    <div class="flex justify-end space-x-4 pt-6 border-t">
+                        <button type="button" onclick="window.location.href='index.html'"
+                            class="px-6 py-2.5 border border-gray-300 rounded-lg text-gray-600 hover:bg-gray-50">
+                            Cancel
+                        </button>
+                        <button type="submit"
+                            class="px-6 py-2.5 bg-blue-600 text-white rounded-lg hover:bg-blue-700 flex items-center">
+                            <i class='bx bx-save mr-2'></i>
+                            Save Server
+                        </button>
+                    </div>
+                </form>
+            </div>
+    </div>
+
+    <script src="js/onboard/index.js" type="module"></script>
+</body>
+</html>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "imcp",
-  "version": "0.0.13",
+  "version": "0.0.14",
   "description": "Node.js SDK for Model Context Protocol (MCP)",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/core/installers/clients/ClientInstaller.ts

@@ -373,6 +373,7 @@ export class ClientInstaller {
 
             // Clone the base installation configuration to avoid modifying the original serverConfig
             const installConfig = JSON.parse(JSON.stringify(serverConfig.installation));
+            installConfig.mode = serverConfig.mode
             const pythonEnv = options.settings?.pythonEnv;
             let pythonDir: string | null = null;
 
@@ -606,46 +607,54 @@ export class ClientInstaller {
             settings.mcpServers = {};
         }
 
-        // Special handling for Windows when command is npx for Cline and MSROO clients
-        // Use a copy to avoid modifying the passed installConfig directly if needed elsewhere
-        const serverConfigForClient = { ...installConfig };
-        if (process.platform === 'win32' &&
-            serverConfigForClient.command === 'npx' &&
-            (clientName === 'Cline' || clientName === 'MSRooCode' || clientName === 'MSROO')) {
-            // Update command to cmd
-            serverConfigForClient.command = 'cmd';
-
-            // Add /c and npx at the beginning of args
-            serverConfigForClient.args = ['/c', 'npx', ...serverConfigForClient.args];
-
-            // Add APPDATA environment variable pointing to npm directory
-            if (!serverConfigForClient.env) {
-                serverConfigForClient.env = {};
+        if (installConfig.mode === 'stdio') {
+            // Special handling for Windows when command is npx for Cline and MSROO clients
+            // Use a copy to avoid modifying the passed installConfig directly if needed elsewhere
+            const serverConfigForClient = { ...installConfig };
+            if (process.platform === 'win32' &&
+                serverConfigForClient.command === 'npx' &&
+                (clientName === 'Cline' || clientName === 'MSRooCode' || clientName === 'MSROO')) {
+                // Update command to cmd
+                serverConfigForClient.command = 'cmd';
+
+                // Add /c and npx at the beginning of args
+                serverConfigForClient.args = ['/c', 'npx', ...serverConfigForClient.args];
+
+                // Add APPDATA environment variable pointing to npm directory
+                if (!serverConfigForClient.env) {
+                    serverConfigForClient.env = {};
+                }
+
+                // Dynamically get npm path and set APPDATA to it
+                const npmPath = await this.getNpmPath();
+                serverConfigForClient.env['APPDATA'] = npmPath;
+                Logger.debug(`Windows npx fix: command=${serverConfigForClient.command}, args=${serverConfigForClient.args.join(' ')}, env=${JSON.stringify(serverConfigForClient.env)}`);
+            }
+            // Convert backslashes to forward slashes in args paths
+            if (serverConfigForClient.args) {
+                serverConfigForClient.args = serverConfigForClient.args.map((arg: string) =>
+                    typeof arg === 'string' ? arg.replace(/\\/g, '/') : arg
+                );
             }
 
-            // Dynamically get npm path and set APPDATA to it
-            const npmPath = await this.getNpmPath();
-            serverConfigForClient.env['APPDATA'] = npmPath;
-            Logger.debug(`Windows npx fix: command=${serverConfigForClient.command}, args=${serverConfigForClient.args.join(' ')}, env=${JSON.stringify(serverConfigForClient.env)}`);
-        }
-        // Convert backslashes to forward slashes in args paths
-        if (serverConfigForClient.args) {
-            serverConfigForClient.args = serverConfigForClient.args.map((arg: string) =>
-                typeof arg === 'string' ? arg.replace(/\\/g, '/') : arg
-            );
+            // Add or update the server configuration
+            settings.mcpServers[serverName] = {
+                command: serverConfigForClient.command,
+                args: serverConfigForClient.args,
+                env: serverConfigForClient.env,
+                autoApprove: [],
+                disabled: false,
+                alwaysAllow: []
+            };
+            Logger.debug(`Updating ${settingPath} for ${serverName}: ${JSON.stringify(settings.mcpServers[serverName])}`);
+        } else if (installConfig.mode === 'sse') {
+            // Handle SSE mode for Cline and MSRoo clients
+            settings.mcpServers[serverName] = {
+                type: 'sse',
+                url: installConfig.url
+            };
         }
 
-        // Add or update the server configuration
-        settings.mcpServers[serverName] = {
-            command: serverConfigForClient.command,
-            args: serverConfigForClient.args,
-            env: serverConfigForClient.env,
-            autoApprove: [],
-            disabled: false,
-            alwaysAllow: []
-        };
-        Logger.debug(`Updating ${settingPath} for ${serverName}: ${JSON.stringify(settings.mcpServers[serverName])}`);
-
         // Write the updated settings back to the file
         await writeJsonFile(settingPath, settings);
     }
@@ -673,20 +682,28 @@ export class ClientInstaller {
         // Use a copy to avoid modifying the passed installConfig directly
         const serverConfigForClient = { ...installConfig };
 
-        // Convert backslashes to forward slashes in args paths
-        if (serverConfigForClient.args) {
-            serverConfigForClient.args = serverConfigForClient.args.map((arg: string) =>
-                typeof arg === 'string' ? arg.replace(/\\/g, '/') : arg
-            );
-        }
+        if (installConfig.mode === 'stdio') {
+            if (serverConfigForClient.args) {
+                serverConfigForClient.args = serverConfigForClient.args.map((arg: string) =>
+                    typeof arg === 'string' ? arg.replace(/\\/g, '/') : arg
+                );
+            }
 
-        // Add or update the server configuration
-        settings.mcp.servers[serverName] = {
-            command: serverConfigForClient.command,
-            args: serverConfigForClient.args,
-            env: serverConfigForClient.env
-        };
-        Logger.debug(`Updating ${settingPath} for ${serverName}: ${JSON.stringify(settings.mcp.servers[serverName])}`);
+            // Add or update the server configuration
+            settings.mcp.servers[serverName] = {
+                command: serverConfigForClient.command,
+                args: serverConfigForClient.args,
+                env: serverConfigForClient.env
+            };
+            Logger.debug(`Updating ${settingPath} for ${serverName}: ${JSON.stringify(settings.mcp.servers[serverName])}`);
+        }
+        else if (installConfig.mode === 'sse') {
+            // Handle SSE mode for Github Copilot
+            settings.mcp.servers[serverName] = {
+                type: 'sse',
+                url: installConfig.url
+            };
+        }
 
         // Write the updated settings back to the file
         await writeJsonFile(settingPath, settings);

package/src/core/types.ts

@@ -99,6 +99,7 @@ export interface InstallationConfig {
   command: string;
   args: string[]; // Can use ${packageSource} as template variable for installation path
   env?: Record<string, EnvVariableConfig>; // Note the colon in property name
+  url?: string; // URL for sse mode
 }
 
 export interface DependencyConfig {
@@ -115,7 +116,7 @@ export interface DependencyConfig {
 export interface McpConfig {
   name: string;
   description: string;
-  mode: 'stdio' | 'http'; // Currently only stdio mode is supported in ai-coder-tools
+  mode: 'stdio' | 'sse'; // Currently only stdio mode is supported in ai-coder-tools
   dependencies?: DependencyConfig;
   schemas?: string; // Path to the schema file
   repository?: string; // Repository URL for the server

package/src/web/public/index.html

@@ -162,19 +162,23 @@
             setupSearch();
             setupModalOutsideClick();
 
-            // Check URL parameters for category
-            const urlParams = new URLSearchParams(window.location.search);
-            const categoryParam = urlParams.get('category');
-
-            // If we have a category parameter or last selected category
-            const lastSelected = categoryParam || localStorage.getItem('lastSelectedCategory');
-
-            // First fetch categories
-            await fetchServerCategories();
-
-            // Then show the selected category if it exists
-            if (lastSelected) {
-                showServerDetails(lastSelected);
+            try {
+                // First fetch categories and wait for completion
+                await fetchServerCategories();
+
+                // Check URL parameters for category
+                const urlParams = new URLSearchParams(window.location.search);
+                const categoryParam = urlParams.get('category');
+
+                // If we have a category parameter or last selected category
+                const lastSelected = categoryParam || localStorage.getItem('lastSelectedCategory');
+
+                // Only show details after data is loaded
+                if (lastSelected) {
+                    await showServerDetails(lastSelected);
+                }
+            } catch (error) {
+                console.error('Error during initialization:', error);
             }
         });
     </script>

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

@@ -0,0 +1,58 @@
+// Import all modal-related functionality
+import { compareVersions } from './versionUtils.js';
+import { delayedAppendInstallLoadingMessage } from './messageQueue.js';
+import { showInstallLoadingModal, appendInstallLoadingMessage, hideInstallLoadingModal } from './loadingModal.js';
+import { closeModal, setupModalOutsideClick } from './modalUtils.js';
+import { handleBulkClientInstall, uninstallTools } from './installation.js';
+import { showInstallModal } from './installModal.js';
+import {
+    setupClientItems,
+    setupEnvironmentVariables,
+    setupInstallationArguments,
+    setupServerRequirements,
+    setupFormSubmitHandler
+} from './modalSetup.js';
+
+// Export all modal functionality
+export {
+    // Version utilities
+    compareVersions,
+
+    // Message queue
+    delayedAppendInstallLoadingMessage,
+
+    // Loading modal
+    showInstallLoadingModal,
+    appendInstallLoadingMessage,
+    hideInstallLoadingModal,
+
+    // Modal utilities
+    closeModal,
+    setupModalOutsideClick,
+
+    // Installation
+    handleBulkClientInstall,
+    uninstallTools,
+
+    // Install modal
+    showInstallModal,
+
+    // Modal setup
+    setupClientItems,
+    setupEnvironmentVariables,
+    setupInstallationArguments,
+    setupServerRequirements,
+    setupFormSubmitHandler
+};
+
+// Initialize modal functionality
+document.addEventListener('DOMContentLoaded', () => {
+    setupModalOutsideClick();
+});
+
+// Make certain functions available globally
+window.showInstallModal = showInstallModal;
+window.showInstallLoadingModal = showInstallLoadingModal;
+window.appendInstallLoadingMessage = appendInstallLoadingMessage;
+window.hideInstallLoadingModal = hideInstallLoadingModal;
+window.uninstallTools = uninstallTools;