imcp 0.1.7 → 0.1.8-dev

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

@@ -1,364 +0,0 @@
-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 };

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

@@ -1,241 +0,0 @@
-import { allServerCategoriesData, fetchServerCategories } from './api.js';
-import { showServerDetails } from './serverCategoryDetails.js'; // Still needed for initial load and direct calls
-import { showToast } from './notifications.js';
-import { buildUrlWithFlights } from './flights/flights.js';
-
-// Store state for categories
-let pinnedCategories = {};
-
-// Wait for data to be loaded
-async function waitForData() {
-    if (allServerCategoriesData && allServerCategoriesData.length > 0) {
-        return true;
-    }
-    await fetchServerCategories();
-    return allServerCategoriesData && allServerCategoriesData.length > 0;
-}
-
-// Load pinned state from localStorage
-function loadPinnedState() {
-    const saved = localStorage.getItem('pinnedCategories');
-    if (saved) {
-        try {
-            pinnedCategories = JSON.parse(saved);
-        } catch (e) {
-            console.error('Error parsing pinned categories from localStorage:', e);
-            pinnedCategories = {};
-        }
-    }
-}
-
-// Save pinned state to localStorage
-function savePinnedState() {
-    localStorage.setItem('pinnedCategories', JSON.stringify(pinnedCategories));
-}
-
-// Toggle pin status for a category
-function togglePinCategory(categoryName, event) {
-    // Stop propagation to prevent navigation
-    event.stopPropagation();
-    
-    // Toggle pin status
-    if (pinnedCategories[categoryName]) {
-        delete pinnedCategories[categoryName];
-    } else {
-        pinnedCategories[categoryName] = true;
-    }
-    
-    // Save to localStorage
-    savePinnedState();
-    
-    // Find the server item element and add a temporary animation class
-    const serverItem = event.target.closest('.server-item');
-    if (serverItem) {
-        serverItem.classList.add('pin-animation');
-        setTimeout(() => {
-            serverItem.classList.remove('pin-animation');
-        }, 300); // Animation duration
-    }
-    
-    // Re-render list with updated pin status
-    if (allServerCategoriesData && allServerCategoriesData.length > 0) {
-        renderServerCategoryList(allServerCategoriesData);
-    }
-}
-
-// Function to show the last selected category on page load
-async function loadLastSelectedCategory() {
-    const lastSelected = localStorage.getItem('lastSelectedCategory');
-    if (lastSelected && allServerCategoriesData) {
-        // Check if the category still exists
-        const categoryExists = allServerCategoriesData.some(server => server.name === lastSelected);
-        if (categoryExists) {
-            await showServerDetails(lastSelected);
-        }
-    }
-}
-
-// Function to render server list (used by fetchServerCategories and search)
-function renderServerCategoryList(servers) {
-    const serverCategoryList = document.getElementById('serverCategoryList');
-
-    if (servers.length === 0) {
-        serverCategoryList.innerHTML = '<p class="text-gray-500">No servers found matching search.</p>';
-        document.getElementById('serverCategoryDetails').innerHTML = '<p>Select a server from the list to see details.</p>'; // Clear details
-        return;
-    }
-    
-    // Load pinned state
-    loadPinnedState();
-    
-    // Create a copy of the servers array to avoid modifying the original
-    const sortedServers = [...servers];
-    
-    // Sort servers with pinned ones at the top
-    sortedServers.sort((a, b) => {
-        const isPinnedA = pinnedCategories[a.name] === true;
-        const isPinnedB = pinnedCategories[b.name] === true;
-        
-        if (isPinnedA && !isPinnedB) return -1;
-        if (!isPinnedA && isPinnedB) return 1;
-        return 0; // Keep original order for items with same pin status
-    });
-
-    serverCategoryList.innerHTML = sortedServers.map(server => {
-        let statusHtml = '';
-
-        // Add tool status summary if available
-        if (server.installationStatus && server.installationStatus.serversStatus) {
-            const totalTools = Object.keys(server.installationStatus.serversStatus).length;
-            const installedTools = Object.values(server.installationStatus.serversStatus)
-                .filter(serverStatus =>
-                    Object.values(serverStatus.installedStatus || {})
-                        .some(opStatus => opStatus.status === 'completed' && opStatus.type === 'install')
-                ).length;
-
-            if (totalTools > 0) {
-                let colorClass, icon, statusText;
-
-                if (installedTools === totalTools) {
-                    // All tools installed
-                    colorClass = "text-green-600 bg-green-50";
-                    icon = '<svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>';
-                    statusText = "Fully Configured";
-                } else if (installedTools > 0) {
-                    // Some tools installed
-                    colorClass = "text-green-600 bg-green-50";
-                    icon = '<svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"></path></svg>';
-                    statusText = "Partial Configured";
-                } else {
-                    // No tools installed
-                    colorClass = "text-yellow-600 bg-orange-50";
-                    icon = '<svg class="w-5 h-5 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM10 13a1 1 0 110-2 1 1 0 010 2zm-1.75-5.75a.75.75 0 00-1.5 0v3a.75.75 0 001.5 0v-3z" clip-rule="evenodd" /></svg>';
-                    statusText = "Not Configured";
-                }
-
-                statusHtml = `<span class="${colorClass} inline-flex items-center px-2 py-1 rounded-full text-xs" style="width: fit-content; max-width: 100%;">
-                    ${icon}<span class="truncate">${statusText} (${installedTools}/${totalTools})</span>
-                </span>`;
-            }
-        }
-
-        let systemTagsHtml = '';
-        if (server.feedConfiguration?.systemTags && Object.keys(server.feedConfiguration.systemTags).length > 0) {
-            systemTagsHtml += '<div class="flex flex-wrap gap-1 ml-2">'; // Added ml-2 for spacing
-            for (const [key, value] of Object.entries(server.feedConfiguration.systemTags)) {
-                systemTagsHtml += `<span class="text-xs bg-blue-100 text-blue-700 px-2 py-0.5 rounded-full">${key}: ${value}</span>`;
-            }
-            systemTagsHtml += '</div>';
-        }
-          // Check if this server is pinned
-        const isPinned = pinnedCategories[server.name] === true;
-        const pinnedClass = isPinned ? 'pinned' : '';
-        
-        // Pin/unpin button with appropriate icon
-        const pinIcon = isPinned 
-            ? '<i class="bx bxs-pin"></i>' // Solid pin icon for pinned items
-            : '<i class="bx bx-pin"></i>';  // Outline pin icon for unpinned items
-
-        return `
-        <div class="server-item border border-gray-200 p-3 rounded hover:bg-gray-50 cursor-pointer transition duration-150 ease-in-out ${pinnedClass}"
-             data-server-name="${server.name}" onclick="navigateToCategory('${server.name}')">
-            <div class="flex justify-between items-center">
-                <h3 class="font-semibold text-gray-800">${server.displayName || server.name}</h3>
-                <div class="flex items-center">
-                    <div class="pin-button ${pinnedClass}" onclick="togglePinCategoryItem('${server.name}', event)" title="${isPinned ? 'Unpin' : 'Pin'} this category">
-                        ${pinIcon}
-                    </div>
-                </div>
-            </div>
-            <div class="text-sm text-gray-500 flex items-center mt-1">
-                ${statusHtml}
-                ${systemTagsHtml}
-            </div>
-        </div>
-        `;
-    }).join('');
-
-    // After rendering, try to load the last selected category
-    loadLastSelectedCategory();
-}
-
-// Setup search functionality
-function setupSearch() {
-    const searchBox = document.getElementById('searchBox');
-    
-    // Load pinned state on page load
-    loadPinnedState();
-
-    searchBox.addEventListener('input', async function () {
-        const searchTerm = this.value.toLowerCase();
-
-        try {
-            // Ensure data is loaded
-            if (!(await waitForData())) {
-                showToast('Error: Unable to load server data', 'error');
-                return;
-            }
-
-            // Filter the servers list based on search
-            const filteredServers = allServerCategoriesData.filter(server => {
-                // Check category name/display name
-                const categoryMatch = (server.displayName || server.name).toLowerCase().includes(searchTerm);
-
-                // Check description
-                const descriptionMatch = (server.description || '').toLowerCase().includes(searchTerm);
-
-                // Check MCP server names from feedConfiguration
-                const mcpServerMatch = server.feedConfiguration?.mcpServers?.some(mcpServer =>
-                    (mcpServer.displayName || mcpServer.name).toLowerCase().includes(searchTerm)
-                ) || false;
-
-                // Check installed server names from installationStatus
-                const installedServerMatch = server.installationStatus?.serversStatus &&
-                    Object.keys(server.installationStatus.serversStatus)
-                        .some(serverName => serverName.toLowerCase().includes(searchTerm));
-
-                return categoryMatch || descriptionMatch || mcpServerMatch || installedServerMatch;
-            });
-
-            renderServerCategoryList(filteredServers);
-        } catch (error) {
-            console.error('Error in search:', error);
-            showToast('Error performing search', 'error');
-        }
-    });
-}
-
-function navigateToCategory(categoryName) {
-    // This function will now handle the navigation, ensuring flight params are preserved.
-    // It constructs the new URL with the selected category and existing flight params.
-    window.location.href = buildUrlWithFlights('index.html', { category: categoryName });
-}
-
-// Make navigateToCategory globally accessible if it's directly used in HTML onclick
-// Alternatively, attach event listeners dynamically after rendering the list.
-// For simplicity with current structure, we'll make it global.
-window.navigateToCategory = navigateToCategory;
-window.togglePinCategoryItem = togglePinCategory;
-
-// Export functions
-export { renderServerCategoryList, setupSearch, loadLastSelectedCategory, togglePinCategory };