imcp 0.1.7 → 0.1.8-dev

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

@@ -1,364 +1,2 @@
-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) {
-    if (refreshTimer) {
-        clearInterval(refreshTimer);
-    }
-
-    refreshTimer = setInterval(async () => {
-        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 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) {
-            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');
-        }
-
-        let pullRequestHtml = '';
-        if (server.feedConfiguration?.PullRequest) {
-            pullRequestHtml = `
-            <p class="mb-1 text-sm">
-                <span class="font-semibold">Pull Request:</span>
-                <a href="${server.feedConfiguration.PullRequest}" target="_blank" class="text-blue-600 hover:underline">${server.feedConfiguration.PullRequest}</a>
-            </p>`;
-        }
-
-        detailsDiv.innerHTML = `
-            <h3 class="text-xl font-semibold mb-2 text-gray-800">${server.displayName || server.name}</h3>
-            <p class="mb-1"><span class="font-semibold">Description:</span> ${server.description || 'N/A'}</p>
-            ${pullRequestHtml}
-            <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>
-        `;
-
-        const serversListHtml = await renderServersList(server);
-        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 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');
-    }
-}
-
-/**
- * Checks if any defined requirement for an MCP server has a pending update.
- * An update is pending if a requirement has an `availableUpdate` or if its installed version
- * differs from the version defined in the feed.
- * @param {object} mcpServer - The MCP server configuration object from the feed.
- * @param {object} requirementsStatus - The status of requirements for this server, typically from `installationStatus.requirementsStatus`.
- * @returns {{ needsUpdate: boolean, updateMessage: string|null }} - True and message if update is available, else false/null.
- */
-function checkNeedsRequirementUpdate(mcpServer, requirementsStatus) {
-    const definedReqs = mcpServer?.dependencies?.requirements || [];
-    if (definedReqs.length === 0) {
-        return false; // No requirements defined in the feed for this server.
-    }
-
-    const currentReqsStatus = requirementsStatus || {};
-
-    for (const defReq of definedReqs) {
-        const alias = defReq.alias || defReq.name;
-        if (!alias) continue;
-
-        const statusEntry = currentReqsStatus[alias];
-
-        if (statusEntry) {
-            // Check 1: Explicit 'availableUpdate' information
-            if (statusEntry.availableUpdate && statusEntry.availableUpdate.version) {
-                return {needsUpdate: true, updateMessage: `${statusEntry.name}: ${statusEntry.availableUpdate.message}` || null};
-            }
-        }
-    }
-    return { needsUpdate: false, updateMessage: null };
-}
-
-async function renderServersList(serverCategory) {
-    try {
-        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="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 flex-wrap">
-                                <h5 class="font-semibold text-gray-800 mr-2">${mcpServer.displayName || mcpServer.name}</h5>
-                                ${mcpServer.systemTags && Object.keys(mcpServer.systemTags).length > 0 ? `
-                                <div class="flex flex-wrap gap-1 items-center">
-                                    ${Object.entries(mcpServer.systemTags).map(([key, value]) => `<span class="text-xs bg-purple-100 text-purple-700 px-2 py-0.5 rounded-full">${key}: ${value}</span>`).join('')}
-                                </div>
-                                ` : ''}
-                                ${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 mt-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 `
-                                        <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>
-                        <div class="action-buttons">
-                            ${(() => {
-                                const serverInstallationStatus = serverCategory.installationStatus;
-                                const requirementsStatus = serverInstallationStatus?.requirementsStatus;
-                                // dependencies is a simple array of names
-                                const { needsUpdate, updateMessage } = checkNeedsRequirementUpdate(mcpServer, requirementsStatus);
-
-                                if (isInstalled) {
-                                    return `
-                                    <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 ease-in-out">
-                                        Uninstall
-                                    </button>`;
-                                } else {
-                                    let buttonText = 'Setup';
-                                    let titleAttr = '';
-                                    if (needsUpdate) {
-                                        buttonText = 'Update';
-                                        if (updateMessage) {
-                                            titleAttr = ` title="${updateMessage.replace(/"/g, '"')}"`;
-                                        }
-                                    }
-                                    return `
-                                    <button onclick="event.stopPropagation(); window.showInstallModal('${serverCategory.name}', '${mcpServer.name}')"
-                                            class="${needsUpdate ? 'btn-update' : 'bg-blue-500 hover:bg-blue-700'} text-white text-xs font-bold py-2 px-4 rounded-full shadow-sm ease-in-out"${titleAttr}>
-                                         ${buttonText}
-                                     </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>
-                            Requires environment configuration
-                        </div>` : ''}
-                    </div>
-                </div>
-            `;
-        });
-
-        return toolsHtml;
-    } catch (error) {
-        console.error('Error in renderServersList:', error);
-        throw error;
-    }
-}
-
-window.uninstallTools = async function (serverName, toolList) {
-    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' },
-            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();
-        await showServerDetails(serverName);
-    } catch (error) {
-        console.error('Error uninstalling tools:', error);
-        showToast(`Error uninstalling tools: ${error.message}`, 'error');
-    }
-}
-
-window.showServerDetails = async function (serverName) {
-    try {
-        await showServerDetails(serverName);
-    } catch (error) {
-        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 };
+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=2e3;let refreshTimer=null,activeDetailsWidget=null;const MAX_RETRIES=3,RETRY_DELAY=1e3;function startRefreshTimer(e){refreshTimer&&clearInterval(refreshTimer),refreshTimer=setInterval((async()=>{try{const t=allServerCategoriesData.find((t=>t.name===e));if(!t?.installationStatus?.serversStatus)return;Object.values(t.installationStatus.serversStatus).some((e=>Object.values(e.installedStatus||{}).some((e=>"pending"===e.status||"in-progress"===e.status))))?(await fetchServerCategories(),await showServerDetails(e)):clearInterval(refreshTimer)}catch(e){clearInterval(refreshTimer)}}),2e3)}async function showServerDetails(e,t=0){try{localStorage.setItem("lastSelectedCategory",e),0===allServerCategoriesData.length&&await fetchServerCategories();const s=allServerCategoriesData.find((t=>t.name===e)),n=document.getElementById("serverCategoryDetails");if(!s){if(t<3)return await new Promise((e=>setTimeout(e,1e3))),await fetchServerCategories(),showServerDetails(e,t+1);throw new Error("Server data not found after retries")}let a="";s.feedConfiguration?.PullRequest&&(a=`\n            <p class="mb-1 text-sm">\n                <span class="font-semibold">Pull Request:</span>\n                <a href="${s.feedConfiguration.PullRequest}" target="_blank" class="text-blue-600 hover:underline">${s.feedConfiguration.PullRequest}</a>\n            </p>`),n.innerHTML=`\n            <h3 class="text-xl font-semibold mb-2 text-gray-800">${s.displayName||s.name}</h3>\n            <p class="mb-1"><span class="font-semibold">Description:</span> ${s.description||"N/A"}</p>\n            ${a}\n            <div id="toolMcpsList" class="mt-4">\n                <div class="animate-pulse flex space-x-4">\n                    <div class="flex-1 space-y-4 py-1">\n                        <div class="h-4 bg-gray-200 rounded w-3/4"></div>\n                        <div class="space-y-2">\n                            <div class="h-4 bg-gray-200 rounded"></div>\n                            <div class="h-4 bg-gray-200 rounded w-5/6"></div>\n                        </div>\n                    </div>\n                </div>\n            </div>\n        `;const r=await renderServersList(s),i=document.getElementById("toolMcpsList");if(!i)throw new Error("toolMcpsList element not found");i.innerHTML=r,document.querySelectorAll(".server-item-content").forEach((e=>{const t=e.dataset.serverName,n=s.feedConfiguration?.mcpServers?.find((e=>e.name===t));if(n){const a=new DetailsWidget(e);a.setContent(n.description);const r=async()=>{try{const e=await fetch(`/api/categories/${s.name}/servers/${t}/schema`);if(!e.ok)return;const n=await e.json();n.success&&n.data&&a.setContent(n.data)}catch(e){}};e.addEventListener("click",(async e=>{e.target.closest("button")||(a===activeDetailsWidget?(a.toggle(),a.isVisible()||(activeDetailsWidget=null)):(a.expand(),activeDetailsWidget=a,await r()))}))}})),startRefreshTimer(e)}catch(e){const t=document.getElementById("serverCategoryDetails");t&&(t.innerHTML=`<p class="text-red-500">Error loading server details: ${e.message}</p>`),showToast(`Error loading server details: ${e.message}`,"error")}}function checkNeedsRequirementUpdate(e,t){const s=e?.dependencies?.requirements||[];if(0===s.length)return!1;const n=t||{};for(const e of s){const t=e.alias||e.name;if(!t)continue;const s=n[t];if(s&&s.availableUpdate&&s.availableUpdate.version)return{needsUpdate:!0,updateMessage:`${s.name}: ${s.availableUpdate.message}`||null}}return{needsUpdate:!1,updateMessage:null}}async function renderServersList(e){try{const t=await fetch("/api/targets"),s=await t.json(),n=s.success?s.data:[];if(!e.feedConfiguration?.mcpServers)return'<p class="text-gray-500">No MCP Servers found for this server.</p>';const a=e.feedConfiguration.mcpServers;if(0===a.length)return'<p class="text-gray-500">No MCP Servers found for this server.</p>';let r='\n            <div class="flex justify-between items-center mb-4">\n                <h2 class="text-lg font-semibold text-gray-600">MCP Servers</h2>\n            </div>';return a.forEach((t=>{const s=t.installed,a=t.installation?.["env:"]||t.installation?.env||{},i=Object.keys(a).length>0;r+=`\n                <div class="server-item-content" data-server-name="${t.name}">\n                    <div class="server-item-info" style="width: 100%; box-sizing: border-box;">\n                        <div class="server-item-header">\n                            <div class="flex items-center flex-wrap">\n                                <h5 class="font-semibold text-gray-800 mr-2">${t.displayName||t.name}</h5>\n                                ${t.systemTags&&Object.keys(t.systemTags).length>0?`\n                                <div class="flex flex-wrap gap-1 items-center">\n                                    ${Object.entries(t.systemTags).map((([e,t])=>`<span class="text-xs bg-purple-100 text-purple-700 px-2 py-0.5 rounded-full">${e}: ${t}</span>`)).join("")}\n                                </div>\n                                `:""}\n                                ${t.repository||e.feedConfiguration?.repository?(()=>{const s=t.repository||e.feedConfiguration?.repository,n=s.toLowerCase().includes("github.com");return`\n                                    <a href="${s}" target="_blank" class="ml-2 flex items-center">\n                                        <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">\n                                            ${n?'\n                                            <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">\n                                                <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"/>\n                                            </svg>\n                                            GitHub':'\n                                            <svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">\n                                                <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"/>\n                                            </svg>\n                                            Website'}\n                                        </span>\n                                    </a>`})():""}\n                            </div>\n                            <p class="text-sm text-gray-600 mb-1 mt-1">${t.description||"No description"}</p>\n                        </div>\n                        <div class="flex flex-col mt-3">\n                            <span class="text-xs font-semibold mb-2">Client Status:</span>\n                            <div class="flex flex-wrap gap-2">\n                                ${n.map((s=>{const n=(e.installationStatus?.serversStatus[t.name]?.installedStatus||{})[s],a="completed"===n?.status;return`\n                                        <span class="text-xs flex items-center ${a?"text-green-600 bg-green-50":"text-gray-600 bg-gray-50"} px-3 py-1 rounded-full shadow">\n                                            <svg class="w-3 h-3 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">\n                                                ${a?'<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>'}\n                                            </svg>\n                                            ${s}\n                                        </span>\n                                    `})).join("")}\n                            </div>\n                        </div>\n                        <div class="action-buttons">\n                            ${(()=>{const n=e.installationStatus,a=n?.requirementsStatus,{needsUpdate:r,updateMessage:i}=checkNeedsRequirementUpdate(t,a);if(s)return`\n                                    <button onclick="event.stopPropagation(); window.uninstallTools('${e.name}', ['${t.name}'])"\n                                            class="bg-red-500 hover:bg-red-700 text-white text-sm font-bold py-2 px-4 rounded-full shadow-sm ease-in-out">\n                                        Uninstall\n                                    </button>`;{let s="Setup",n="";return r&&(s="Update",i&&(n=` title="${i.replace(/"/g,'"')}"`)),`\n                                    <button onclick="event.stopPropagation(); window.showInstallModal('${e.name}', '${t.name}')"\n                                            class="${r?"btn-update":"bg-blue-500 hover:bg-blue-700"} text-white text-xs font-bold py-2 px-4 rounded-full shadow-sm ease-in-out"${n}>\n                                         ${s}\n                                     </button>`}})()}\n                        </div>\n                        ${i?'<div class="mt-3 text-xs text-blue-600">\n                            <svg class="w-3 h-3 inline mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">\n                                <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>\n                            </svg>\n                            Requires environment configuration\n                        </div>':""}\n                    </div>\n                </div>\n            `})),r}catch(e){throw e}}window.uninstallTools=async function(e,t){try{if(!await showConfirm(`Are you sure you want to uninstall ${t.length} tool(s)?`))return;const s=await fetch(`/api/categories/${e}/uninstall`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({toolList:t})});if(!s.ok){const e=await s.text();throw new Error(`Uninstallation failed: ${e||s.statusText}`)}const n=await s.json();if(!n.success)throw new Error(n.error||"Uninstallation failed");showToast("Tools uninstalled successfully!","success"),await fetchServerCategories(),await showServerDetails(e)}catch(e){showToast(`Error uninstalling tools: ${e.message}`,"error")}},window.showServerDetails=async function(e){try{await showServerDetails(e)}catch(e){const t=document.getElementById("serverCategoryDetails");t&&(t.innerHTML=`<p class="text-red-500">Error loading server details: ${e.message}</p>`),showToast(`Error loading server details: ${e.message}`,"error")}};export{showServerDetails};
+//# sourceMappingURL=serverCategoryDetails.js.map

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

@@ -0,0 +1 @@
+{"version":3,"names":["allServerCategoriesData","fetchServerCategories"],"sources":["0"],"sourcesContent":["import { allServerCategoriesData, fetchServerCategories } from './api.js';\r\nimport { showInstallModal } from './modal.js';\r\nimport { showToast, showConfirm } from './notifications.js';\r\nimport { DetailsWidget } from './detailsWidget.js';\r\n\r\nconst REFRESH_INTERVAL = 2000; // 2 seconds\r\nlet refreshTimer = null;\r\nlet activeDetailsWidget = null;\r\nconst MAX_RETRIES = 3;\r\nconst RETRY_DELAY = 1000;\r\n\r\n// Start refresh timer for installation status\r\nfunction startRefreshTimer(serverName) {\r\n    if (refreshTimer) {\r\n        clearInterval(refreshTimer);\r\n    }\r\n\r\n    refreshTimer = setInterval(async () => {\r\n        try {\r\n            const server = allServerCategoriesData.find(s => s.name === serverName);\r\n            if (!server?.installationStatus?.serversStatus) return;\r\n\r\n            const hasPendingInstallation = Object.values(server.installationStatus.serversStatus).some(serverStatus =>\r\n                Object.values(serverStatus.installedStatus || {}).some(status =>\r\n                    status.status === 'pending' || status.status === 'in-progress'\r\n                )\r\n            );\r\n\r\n            if (hasPendingInstallation) {\r\n                await fetchServerCategories();\r\n                await showServerDetails(serverName);\r\n            } else {\r\n                clearInterval(refreshTimer);\r\n            }\r\n        } catch (error) {\r\n            console.error('Error in refresh timer:', error);\r\n            clearInterval(refreshTimer);\r\n        }\r\n    }, REFRESH_INTERVAL);\r\n}\r\n\r\n// Show server details with retry mechanism\r\nasync function showServerDetails(serverName, retryCount = 0) {\r\n    console.log(\"Showing details for:\", serverName);\r\n    try {\r\n        localStorage.setItem('lastSelectedCategory', serverName);\r\n\r\n        // If server data is not available, attempt to fetch it\r\n        if (allServerCategoriesData.length === 0) {\r\n            await fetchServerCategories();\r\n        }\r\n\r\n        const server = allServerCategoriesData.find(s => s.name === serverName);\r\n        const detailsDiv = document.getElementById('serverCategoryDetails');\r\n\r\n        if (!server) {\r\n            if (retryCount < MAX_RETRIES) {\r\n                console.log(`Server data not found, retrying (${retryCount + 1}/${MAX_RETRIES})...`);\r\n                await new Promise(resolve => setTimeout(resolve, RETRY_DELAY));\r\n                await fetchServerCategories(); // Refresh the data\r\n                return showServerDetails(serverName, retryCount + 1);\r\n            }\r\n            throw new Error('Server data not found after retries');\r\n        }\r\n\r\n        let pullRequestHtml = '';\r\n        if (server.feedConfiguration?.PullRequest) {\r\n            pullRequestHtml = `\r\n            <p class=\"mb-1 text-sm\">\r\n                <span class=\"font-semibold\">Pull Request:</span>\r\n                <a href=\"${server.feedConfiguration.PullRequest}\" target=\"_blank\" class=\"text-blue-600 hover:underline\">${server.feedConfiguration.PullRequest}</a>\r\n            </p>`;\r\n        }\r\n\r\n        detailsDiv.innerHTML = `\r\n            <h3 class=\"text-xl font-semibold mb-2 text-gray-800\">${server.displayName || server.name}</h3>\r\n            <p class=\"mb-1\"><span class=\"font-semibold\">Description:</span> ${server.description || 'N/A'}</p>\r\n            ${pullRequestHtml}\r\n            <div id=\"toolMcpsList\" class=\"mt-4\">\r\n                <div class=\"animate-pulse flex space-x-4\">\r\n                    <div class=\"flex-1 space-y-4 py-1\">\r\n                        <div class=\"h-4 bg-gray-200 rounded w-3/4\"></div>\r\n                        <div class=\"space-y-2\">\r\n                            <div class=\"h-4 bg-gray-200 rounded\"></div>\r\n                            <div class=\"h-4 bg-gray-200 rounded w-5/6\"></div>\r\n                        </div>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        `;\r\n\r\n        const serversListHtml = await renderServersList(server);\r\n        const toolMcpsList = document.getElementById('toolMcpsList');\r\n        if (!toolMcpsList) {\r\n            throw new Error('toolMcpsList element not found');\r\n        }\r\n\r\n        toolMcpsList.innerHTML = serversListHtml;\r\n\r\n        // Setup server items click handlers\r\n        const serverItems = document.querySelectorAll('.server-item-content');\r\n        console.log(`Found ${serverItems.length} server items`);\r\n\r\n        serverItems.forEach(item => {\r\n            const mcpServerName = item.dataset.serverName;\r\n            console.log(`Setting up click handler for server: ${mcpServerName}`);\r\n\r\n            const mcpServer = server.feedConfiguration?.mcpServers?.find(\r\n                s => s.name === mcpServerName\r\n            );\r\n\r\n            if (mcpServer) {\r\n                const detailsWidget = new DetailsWidget(item);\r\n\r\n                // Initially set description\r\n                detailsWidget.setContent(mcpServer.description);\r\n\r\n                // Fetch and display schema when expanded\r\n                const fetchSchema = async () => {\r\n                    try {\r\n                        const response = await fetch(`/api/categories/${server.name}/servers/${mcpServerName}/schema`);\r\n                        if (!response.ok) return;\r\n\r\n                        const result = await response.json();\r\n                        if (result.success && result.data) {\r\n                            detailsWidget.setContent(result.data);\r\n                        }\r\n                    } catch (error) {\r\n                        console.error('Error fetching schema:', error);\r\n                        // Silently fail - don't show error in UI\r\n                    }\r\n                };\r\n\r\n                item.addEventListener('click', async (event) => {\r\n                    if (!event.target.closest('button')) {\r\n                        if (detailsWidget === activeDetailsWidget) {\r\n                            // Only toggle if clicking the currently active item\r\n                            detailsWidget.toggle();\r\n                            if (!detailsWidget.isVisible()) {\r\n                                activeDetailsWidget = null;\r\n                            }\r\n                        } else {\r\n                            // Expand the clicked item without collapsing others\r\n                            detailsWidget.expand();\r\n                            activeDetailsWidget = detailsWidget;\r\n                            await fetchSchema();\r\n                        }\r\n                    }\r\n                });\r\n            }\r\n        });\r\n\r\n        startRefreshTimer(serverName);\r\n    } catch (error) {\r\n        console.error('Error in showServerDetails:', error);\r\n        const detailsDiv = document.getElementById('serverCategoryDetails');\r\n        if (detailsDiv) {\r\n            detailsDiv.innerHTML = `<p class=\"text-red-500\">Error loading server details: ${error.message}</p>`;\r\n        }\r\n        showToast(`Error loading server details: ${error.message}`, 'error');\r\n    }\r\n}\r\n\r\n/**\r\n * Checks if any defined requirement for an MCP server has a pending update.\r\n * An update is pending if a requirement has an `availableUpdate` or if its installed version\r\n * differs from the version defined in the feed.\r\n * @param {object} mcpServer - The MCP server configuration object from the feed.\r\n * @param {object} requirementsStatus - The status of requirements for this server, typically from `installationStatus.requirementsStatus`.\r\n * @returns {{ needsUpdate: boolean, updateMessage: string|null }} - True and message if update is available, else false/null.\r\n */\r\nfunction checkNeedsRequirementUpdate(mcpServer, requirementsStatus) {\r\n    const definedReqs = mcpServer?.dependencies?.requirements || [];\r\n    if (definedReqs.length === 0) {\r\n        return false; // No requirements defined in the feed for this server.\r\n    }\r\n\r\n    const currentReqsStatus = requirementsStatus || {};\r\n\r\n    for (const defReq of definedReqs) {\r\n        const alias = defReq.alias || defReq.name;\r\n        if (!alias) continue;\r\n\r\n        const statusEntry = currentReqsStatus[alias];\r\n\r\n        if (statusEntry) {\r\n            // Check 1: Explicit 'availableUpdate' information\r\n            if (statusEntry.availableUpdate && statusEntry.availableUpdate.version) {\r\n                return {needsUpdate: true, updateMessage: `${statusEntry.name}: ${statusEntry.availableUpdate.message}` || null};\r\n            }\r\n        }\r\n    }\r\n    return { needsUpdate: false, updateMessage: null };\r\n}\r\n\r\nasync function renderServersList(serverCategory) {\r\n    try {\r\n        const targetResponse = await fetch('/api/targets');\r\n        const targetData = await targetResponse.json();\r\n        const availableTargets = targetData.success ? targetData.data : [];\r\n\r\n        if (!serverCategory.feedConfiguration?.mcpServers) {\r\n            return '<p class=\"text-gray-500\">No MCP Servers found for this server.</p>';\r\n        }\r\n\r\n        const mcpServers = serverCategory.feedConfiguration.mcpServers;\r\n        if (mcpServers.length === 0) {\r\n            return '<p class=\"text-gray-500\">No MCP Servers found for this server.</p>';\r\n        }\r\n\r\n        let toolsHtml = `\r\n            <div class=\"flex justify-between items-center mb-4\">\r\n                <h2 class=\"text-lg font-semibold text-gray-600\">MCP Servers</h2>\r\n            </div>`;\r\n\r\n        mcpServers.forEach(mcpServer => {\r\n            const isInstalled = mcpServer.installed;\r\n            const envRequirements = mcpServer.installation?.['env:'] || mcpServer.installation?.env || {};\r\n            const hasEnvRequirements = Object.keys(envRequirements).length > 0;\r\n\r\n            toolsHtml += `\r\n                <div class=\"server-item-content\" data-server-name=\"${mcpServer.name}\">\r\n                    <div class=\"server-item-info\" style=\"width: 100%; box-sizing: border-box;\">\r\n                        <div class=\"server-item-header\">\r\n                            <div class=\"flex items-center flex-wrap\">\r\n                                <h5 class=\"font-semibold text-gray-800 mr-2\">${mcpServer.displayName || mcpServer.name}</h5>\r\n                                ${mcpServer.systemTags && Object.keys(mcpServer.systemTags).length > 0 ? `\r\n                                <div class=\"flex flex-wrap gap-1 items-center\">\r\n                                    ${Object.entries(mcpServer.systemTags).map(([key, value]) => `<span class=\"text-xs bg-purple-100 text-purple-700 px-2 py-0.5 rounded-full\">${key}: ${value}</span>`).join('')}\r\n                                </div>\r\n                                ` : ''}\r\n                                ${mcpServer.repository || serverCategory.feedConfiguration?.repository ? (() => {\r\n                    const repoUrl = mcpServer.repository || serverCategory.feedConfiguration?.repository;\r\n                    const isGithub = repoUrl.toLowerCase().includes('github.com');\r\n                    return `\r\n                                    <a href=\"${repoUrl}\" target=\"_blank\" class=\"ml-2 flex items-center\">\r\n                                        <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\">\r\n                                            ${isGithub ? `\r\n                                            <svg class=\"w-4 h-4 mr-1\" fill=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                                                <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\"/>\r\n                                            </svg>\r\n                                            GitHub` : `\r\n                                            <svg class=\"w-4 h-4 mr-1\" fill=\"currentColor\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                                                <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\"/>\r\n                                            </svg>\r\n                                            Website`}\r\n                                        </span>\r\n                                    </a>`\r\n                })() : ''}\r\n                            </div>\r\n                            <p class=\"text-sm text-gray-600 mb-1 mt-1\">${mcpServer.description || 'No description'}</p>\r\n                        </div>\r\n                        <div class=\"flex flex-col mt-3\">\r\n                            <span class=\"text-xs font-semibold mb-2\">Client Status:</span>\r\n                            <div class=\"flex flex-wrap gap-2\">\r\n                                ${availableTargets.map(client => {\r\n                    const status = (serverCategory.installationStatus?.serversStatus[mcpServer.name]?.installedStatus || {})[client];\r\n                    const isInstalled = status?.status === 'completed';\r\n                    return `\r\n                                        <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\">\r\n                                            <svg class=\"w-3 h-3 mr-1\" fill=\"currentColor\" viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                                                ${isInstalled\r\n                            ? '<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>'\r\n                            : '<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>'\r\n                        }\r\n                                            </svg>\r\n                                            ${client}\r\n                                        </span>\r\n                                    `;\r\n                }).join('')}\r\n                            </div>\r\n                        </div>\r\n                        <div class=\"action-buttons\">\r\n                            ${(() => {\r\n                                const serverInstallationStatus = serverCategory.installationStatus;\r\n                                const requirementsStatus = serverInstallationStatus?.requirementsStatus;\r\n                                // dependencies is a simple array of names\r\n                                const { needsUpdate, updateMessage } = checkNeedsRequirementUpdate(mcpServer, requirementsStatus);\r\n\r\n                                if (isInstalled) {\r\n                                    return `\r\n                                    <button onclick=\"event.stopPropagation(); window.uninstallTools('${serverCategory.name}', ['${mcpServer.name}'])\"\r\n                                            class=\"bg-red-500 hover:bg-red-700 text-white text-sm font-bold py-2 px-4 rounded-full shadow-sm ease-in-out\">\r\n                                        Uninstall\r\n                                    </button>`;\r\n                                } else {\r\n                                    let buttonText = 'Setup';\r\n                                    let titleAttr = '';\r\n                                    if (needsUpdate) {\r\n                                        buttonText = 'Update';\r\n                                        if (updateMessage) {\r\n                                            titleAttr = ` title=\"${updateMessage.replace(/\"/g, '\"')}\"`;\r\n                                        }\r\n                                    }\r\n                                    return `\r\n                                    <button onclick=\"event.stopPropagation(); window.showInstallModal('${serverCategory.name}', '${mcpServer.name}')\"\r\n                                            class=\"${needsUpdate ? 'btn-update' : 'bg-blue-500 hover:bg-blue-700'} text-white text-xs font-bold py-2 px-4 rounded-full shadow-sm ease-in-out\"${titleAttr}>\r\n                                         ${buttonText}\r\n                                     </button>`;\r\n                                }\r\n                            })()}\r\n                        </div>\r\n                        ${hasEnvRequirements ? `<div class=\"mt-3 text-xs text-blue-600\">\r\n                            <svg class=\"w-3 h-3 inline mr-1\" fill=\"currentColor\" viewBox=\"0 0 20 20\" xmlns=\"http://www.w3.org/2000/svg\">\r\n                                <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>\r\n                            </svg>\r\n                            Requires environment configuration\r\n                        </div>` : ''}\r\n                    </div>\r\n                </div>\r\n            `;\r\n        });\r\n\r\n        return toolsHtml;\r\n    } catch (error) {\r\n        console.error('Error in renderServersList:', error);\r\n        throw error;\r\n    }\r\n}\r\n\r\nwindow.uninstallTools = async function (serverName, toolList) {\r\n    try {\r\n        const confirmed = await showConfirm(`Are you sure you want to uninstall ${toolList.length} tool(s)?`);\r\n        if (!confirmed) return;\r\n\r\n        const response = await fetch(`/api/categories/${serverName}/uninstall`, {\r\n            method: 'POST',\r\n            headers: { 'Content-Type': 'application/json' },\r\n            body: JSON.stringify({ toolList })\r\n        });\r\n\r\n        if (!response.ok) {\r\n            const errorData = await response.text();\r\n            throw new Error(`Uninstallation failed: ${errorData || response.statusText}`);\r\n        }\r\n\r\n        const result = await response.json();\r\n        if (!result.success) {\r\n            throw new Error(result.error || 'Uninstallation failed');\r\n        }\r\n\r\n        showToast('Tools uninstalled successfully!', 'success');\r\n        await fetchServerCategories();\r\n        await showServerDetails(serverName);\r\n    } catch (error) {\r\n        console.error('Error uninstalling tools:', error);\r\n        showToast(`Error uninstalling tools: ${error.message}`, 'error');\r\n    }\r\n}\r\n\r\nwindow.showServerDetails = async function (serverName) {\r\n    try {\r\n        await showServerDetails(serverName);\r\n    } catch (error) {\r\n        console.error('Error in window.showServerDetails:', error);\r\n        const detailsDiv = document.getElementById('serverCategoryDetails');\r\n        if (detailsDiv) {\r\n            detailsDiv.innerHTML = `<p class=\"text-red-500\">Error loading server details: ${error.message}</p>`;\r\n        }\r\n        showToast(`Error loading server details: ${error.message}`, 'error');\r\n    }\r\n};\r\n\r\nexport { showServerDetails };\r\n"],"mappings":"OAASA,wBAAyBC,0BAA6B,kB","ignoreList":[]}