imcp 0.0.13 → 0.0.15

package/src/web/public/js/onboard/validationHandlers.js

@@ -0,0 +1,378 @@
+// src/web/public/js/onboard/validationHandlers.js
+import { showToast } from '../notifications.js';
+import { getFormData } from './formProcessor.js';
+import { toggleSectionContent } from './uiHandlers.js'; // Assuming this is correctly in uiHandlers.js and exported
+
+/**
+ * Shows validation message under an input field.
+ * @param {HTMLElement} element - The input element to show validation message for.
+ * @param {string} message - The validation message to display.
+ * @param {boolean} isError - Whether this is an error message (true) or success message (false).
+ */
+function showValidationMessage(element, message, isError = true) {
+  // Remove any existing validation message
+  const existingMessage = element.nextElementSibling;
+  if (existingMessage && existingMessage.classList.contains('validation-message')) {
+    existingMessage.remove();
+  }
+
+  // Create new validation message element
+  const messageDiv = document.createElement('div');
+  messageDiv.className = `validation-message text-xs mt-1 ${isError ? 'text-red-500' : 'text-green-500'}`;
+  messageDiv.textContent = message;
+
+  // Insert the message after the input element
+  element.insertAdjacentElement('afterend', messageDiv);
+
+  // Add visual feedback to the input field
+  if (isError) {
+    element.classList.add('border-red-500');
+    element.classList.remove('border-green-500');
+  } else {
+    element.classList.add('border-green-500');
+    element.classList.remove('border-red-500');
+  }
+}
+
+const POLLING_INTERVAL = 3000; // 3 seconds
+let pollingIntervalId = null;
+
+/**
+ * Updates the operation status display.
+ * @param {object} data - The data object from the API response.
+ * @param {HTMLElement} contentElement - The HTML element to update.
+ */
+export function updateOperationDisplay(data, contentElement) { // Renamed from updateValidationDisplay
+  const { status, message, validationStatus, prInfo, errorMessage: operationErrorMessage, operationType } = data;
+  let htmlContent = `<p><strong>Overall Status:</strong> <span class="${status === 'COMPLETED' || status === 'succeeded' ? 'text-green-600' : (status === 'FAILED' ? 'text-red-600' : 'text-yellow-600')}">${status} ${(status === 'IN_PROGRESS' || status === 'PENDING' || status === 'VALIDATING' || status === 'PUBLISHING') ? "<i class='bx bx-loader-alt bx-spin ml-2'></i>" : ""}</span></p>`;
+  if (operationType) htmlContent += `<p><strong>Operation Type:</strong> ${operationType}</p>`;
+  if (message) htmlContent += `<p><strong>Message:</strong> ${message}</p>`;
+  if (operationErrorMessage) htmlContent += `<p class="text-red-500"><strong>Error:</strong> ${operationErrorMessage}</p>`;
+  if (validationStatus) {
+    htmlContent += '<h4 class="font-semibold mt-3 mb-1">Detailed Validation:</h4>';
+    htmlContent += '<ul class="list-disc list-inside space-y-1">';
+    let hasDetailedItems = false;
+    // Check for serverResults array first
+    if (Array.isArray(validationStatus.serverResults)) {
+      validationStatus.serverResults.forEach(serverResult => {
+        if (serverResult && typeof serverResult.serverName === 'string' && typeof serverResult.isValid === 'boolean') {
+          hasDetailedItems = true;
+          const icon = serverResult.isValid ? "<i class='bx bx-check-circle text-green-500'></i>" : "<i class='bx bx-x-circle text-red-500'></i>";
+          let serverMessage = serverResult.message ? `: ${serverResult.message}` : (serverResult.isValid ? ': Valid' : ': Invalid');
+          htmlContent += `<li>${icon} <strong>Server "${serverResult.serverName}"</strong>${serverMessage}</li>`;
+        }
+      });
+    }
+
+    // Fallback for other keys in validationStatus or if serverResults is not the primary detail
+    for (const key in validationStatus) {
+      if (key === 'serverResults') continue; // Already processed
+
+      const item = validationStatus[key];
+      // Handle simple {isValid, message} structure directly under validationStatus
+      if (key === 'isValid' && typeof item === 'boolean' && typeof validationStatus.message === 'string' && !hasDetailedItems) {
+        hasDetailedItems = true;
+        const icon = item ? "<i class='bx bx-check-circle text-green-500'></i>" : "<i class='bx bx-x-circle text-red-500'></i>";
+        htmlContent += `<li>${icon} <strong>Overall Validation:</strong> ${validationStatus.message}</li>`;
+        break; // Assume this is the main summary if serverResults wasn't present or detailed
+      } else if (typeof item === 'object' && item !== null && 'isValid' in item && 'message' in item) {
+        // Handle other named detailed items
+        hasDetailedItems = true;
+        const icon = item.isValid ? "<i class='bx bx-check-circle text-green-500'></i>" : "<i class='bx bx-x-circle text-red-500'></i>";
+        htmlContent += `<li>${icon} <strong>${key.replace(/([A-Z])/g, ' $1').trim()}:</strong> ${item.message}</li>`;
+      }
+    }
+
+    if (!hasDetailedItems && validationStatus.isValid === true && validationStatus.message) {
+      // Catch-all for a simple success message if no other details were parsed
+      hasDetailedItems = true;
+      const icon = "<i class='bx bx-check-circle text-green-500'></i>";
+      htmlContent += `<li>${icon} <strong>Overall:</strong> ${validationStatus.message}</li>`;
+    } else if (!hasDetailedItems) {
+      htmlContent += '<li>No detailed validation information available or format is unexpected.</li>';
+    }
+    htmlContent += '</ul>';
+  }
+
+  if (prInfo && prInfo.url) {
+    htmlContent += `<p class="mt-3"><strong>PR Info:</strong> <a href="${prInfo.url}" target="_blank" class="text-blue-600 hover:underline">${prInfo.url}</a></p>`;
+  }
+  contentElement.innerHTML = htmlContent;
+}
+
+/**
+ * Polls the server for operation status.
+ * @param {string} categoryName - The name of the category.
+ * @param {string} contentId - The ID of the status content element.
+ * @param {string} validateBtnId - The ID of the validate button.
+ * @param {string} publishBtnId - The ID of the publish button.
+ * @param {string} operationInitiator - 'validate' or 'publish' to restore correct button text.
+ */
+export async function pollOperationStatus(categoryName, contentId, validateBtnId, publishBtnId, operationInitiator) {
+  const statusContentElement = document.getElementById(contentId);
+  const validateButton = document.getElementById(validateBtnId);
+  const publishButton = document.getElementById(publishBtnId);
+
+  // Helper function to update button states based on operation status
+  const updateButtonStates = (isCompleted = false) => {
+    if (validateButton && publishButton) {
+      if (isCompleted) {
+        // On completion, enable both buttons and restore their original state
+        validateButton.disabled = false;
+        validateButton.innerHTML = "<i class='bx bx-check-shield mr-2'></i>Validate";
+        validateButton.classList.remove('opacity-50');
+        publishButton.disabled = false;
+        publishButton.innerHTML = "<i class='bx bx-cloud-upload mr-2'></i>Publish";
+        publishButton.classList.remove('opacity-50');
+      } else {
+        // During operation, handle buttons based on which operation is running
+        if (operationInitiator === 'validate') {
+          validateButton.disabled = true;
+          validateButton.innerHTML = "<i class='bx bx-loader-alt bx-spin mr-2'></i>Validating...";
+          publishButton.disabled = true;
+          publishButton.innerHTML = "<i class='bx bx-cloud-upload mr-2'></i>Publish";
+          publishButton.classList.add('opacity-50');
+        } else if (operationInitiator === 'publish') {
+          publishButton.disabled = true;
+          publishButton.innerHTML = "<i class='bx bx-loader-alt bx-spin mr-2'></i>Publishing...";
+          validateButton.disabled = true;
+          validateButton.innerHTML = "<i class='bx bx-check-shield mr-2'></i>Validate";
+          validateButton.classList.add('opacity-50');
+        }
+      }
+    }
+  };
+
+  try {
+    const response = await fetch(`/api/categories/${categoryName}/onboard/status`);
+    const result = await response.json();
+
+    if (result.success && result.data) {
+      updateOperationDisplay(result.data, statusContentElement);
+
+      const currentStatus = result.data.status ? String(result.data.status).toUpperCase() : ''; // Ensure uppercase for comparison
+      // Use string literals for status comparison, include 'succeeded'
+      if (currentStatus === 'COMPLETED' || currentStatus === 'FAILED' || currentStatus === 'SUCCEEDED') {
+        clearInterval(pollingIntervalId);
+        pollingIntervalId = null;
+        updateButtonStates(true);
+      } else {
+        // Operation is still in progress
+        updateButtonStates(false);
+      }
+    } else {
+      statusContentElement.innerHTML = `<p class="text-red-500">Error polling status: ${result.error || 'Unknown error'}</p>`;
+      clearInterval(pollingIntervalId);
+      pollingIntervalId = null;
+      updateButtonStates(true);
+    }
+  } catch (error) {
+    console.error('Error polling operation status:', error);
+    statusContentElement.innerHTML = `<p class="text-red-500">An error occurred while polling status. Please check the console.</p>`;
+    clearInterval(pollingIntervalId);
+    pollingIntervalId = null;
+    updateButtonStates(true);
+  }
+}
+
+/**
+ * Handles the validation process for the onboarding form.
+ * It initiates validation, displays status, and polls for updates.
+ * @param {Event} event - The click event.
+ * @param {string} activeTab - Identifier for the active tab ('create-category' or 'create-server').
+ * @param {object|null} currentSelectedCategoryData - Data for the currently selected category if activeTab is 'create-server'.
+ */
+export async function handleValidation(event, activeTab, currentSelectedCategoryData = null) {
+  const { panelId, contentId, formId, validateButtonId, publishButtonId } = getElementIdsByTab(activeTab);
+
+  const statusContentElement = document.getElementById(contentId);
+  const onboardForm = document.getElementById(formId);
+  const validateButton = document.getElementById(validateButtonId);
+  const publishButton = document.getElementById(publishButtonId);
+
+  if (!onboardForm || !statusContentElement || !validateButton || !publishButton) {
+    console.error('Required form or panel elements not found for validation.');
+    showToast('Required form or panel elements not found for validation.', 'error');
+    return;
+  }
+
+  // First clear any existing validation messages
+  onboardForm.querySelectorAll('.validation-message').forEach(el => el.remove());
+
+  // Check for empty required fields and show validation messages
+  const emptyRequiredFields = Array.from(onboardForm.querySelectorAll('[required]'));
+  let hasErrors = false;
+
+  emptyRequiredFields.forEach(field => {
+    if (!field.value.trim()) {
+      showValidationMessage(field, 'This field is required', true);
+      hasErrors = true;
+    }
+  });
+
+  // Check for other validation errors
+  const envNameFields = onboardForm.querySelectorAll('input[name$=".env\\[\\].name"]');
+  envNameFields.forEach(field => {
+    const value = field.value.trim();
+    if (value && !/^[A-Z_][A-Z0-9_]*$/.test(value)) {
+      showValidationMessage(field, 'Must be uppercase with only letters, numbers, and underscores', true);
+      hasErrors = true;
+    }
+  });
+
+  const urlFields = onboardForm.querySelectorAll('input[name$=".url"]');
+  urlFields.forEach(field => {
+    const value = field.value.trim();
+    if (value) {
+      try {
+        new URL(value);
+      } catch (e) {
+        showValidationMessage(field, 'Invalid URL format', true);
+        hasErrors = true;
+      }
+    }
+  });
+
+  if (hasErrors) {
+    showToast('Please fix all validation errors before proceeding.', 'error');
+    return;
+  }
+
+  // Additional validation for new category form
+  if (activeTab === 'create-category') {
+    const formData = getFormData(onboardForm, false);
+    if (!formData.mcpServers || formData.mcpServers.length === 0) {
+      showToast('At least one MCP server must be configured for a new category.', 'error');
+      return;
+    }
+  }
+
+  // Disable buttons and show appropriate states
+  validateButton.disabled = true;
+  validateButton.innerHTML = "<i class='bx bx-loader-alt bx-spin mr-2'></i>Validating...";
+  publishButton.disabled = true;
+  publishButton.innerHTML = "<i class='bx bx-cloud-upload mr-2'></i>Publish";
+  publishButton.classList.add('opacity-50'); // Add gray state to inactive button
+
+  if (pollingIntervalId) {
+    clearInterval(pollingIntervalId); // Clear any existing polling
+    pollingIntervalId = null;
+  }
+
+  const forExistingCategoryTab = activeTab === 'create-server';
+  const newServersData = getFormData(onboardForm, forExistingCategoryTab, currentSelectedCategoryData);
+  let finalFeedConfiguration;
+
+  if (forExistingCategoryTab && currentSelectedCategoryData) {
+    finalFeedConfiguration = JSON.parse(JSON.stringify(currentSelectedCategoryData)); // Deep clone
+
+    // Merge MCP Servers
+    finalFeedConfiguration.mcpServers = (finalFeedConfiguration.mcpServers || []).concat(newServersData.mcpServers || []);
+
+    // Merge Requirements (ensuring uniqueness)
+    const existingReqKeys = new Set((finalFeedConfiguration.requirements || []).map(r => `${r.type}|${r.name}|${r.version}`));
+    (newServersData.requirements || []).forEach(newReq => {
+      const reqKey = `${newReq.type}|${newReq.name}|${newReq.version}`;
+      if (!existingReqKeys.has(reqKey)) {
+        if (!finalFeedConfiguration.requirements) {
+          finalFeedConfiguration.requirements = [];
+        }
+        finalFeedConfiguration.requirements.push(newReq);
+        existingReqKeys.add(reqKey);
+      }
+    });
+  } else {
+    finalFeedConfiguration = newServersData;
+  }
+
+  statusContentElement.innerHTML = '<p class="text-gray-500">Initiating validation...</p>';
+  ensureStatusPanelVisible(panelId, contentId);
+
+
+  try {
+    const response = await fetch('/api/categories/onboard/validate', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify({
+        categoryData: finalFeedConfiguration,
+        forExistingCategory: forExistingCategoryTab
+      }),
+    });
+
+    const result = await response.json();
+
+    if (result.success && result.data) {
+      updateOperationDisplay(result.data, statusContentElement);
+      const categoryName = result.data.onboardingId; // This is the category name used for polling
+      const initialStatus = result.data.status;
+
+      // Use string literals for status comparison, include 'succeeded'
+      if (categoryName && initialStatus !== 'COMPLETED' && initialStatus !== 'FAILED' && initialStatus !== 'succeeded') {
+        pollingIntervalId = setInterval(() => pollOperationStatus(categoryName, contentId, validateButtonId, publishButtonId, 'validate'), POLLING_INTERVAL);
+      } else {
+        validateButton.disabled = false;
+        validateButton.innerHTML = "<i class='bx bx-check-shield mr-2'></i>Validate";
+        publishButton.disabled = false;
+        publishButton.classList.remove('opacity-50'); // Remove gray state
+      }
+    } else {
+      statusContentElement.innerHTML = `<p class="text-red-500">Validation request failed: ${result.error || 'Unknown error'}</p>`;
+      validateButton.disabled = false;
+      validateButton.innerHTML = "<i class='bx bx-check-shield mr-2'></i>Validate";
+      publishButton.disabled = false;
+      publishButton.classList.remove('opacity-50'); // Remove gray state on error
+    }
+  } catch (error) {
+    console.error('Error during validation:', error);
+    statusContentElement.innerHTML = `<p class="text-red-500">An error occurred while initiating validation. Please check the console.</p>`;
+    validateButton.disabled = false;
+    validateButton.innerHTML = "<i class='bx bx-check-shield mr-2'></i>Validate";
+    publishButton.disabled = false;
+    publishButton.classList.remove('opacity-50'); // Remove gray state on error
+  }
+}
+
+/**
+ * Gets common element IDs based on the active tab.
+ * @param {string} activeTab - Identifier for the active tab.
+ * @returns {object} Object containing element IDs.
+ */
+export function getElementIdsByTab(activeTab) {
+  const isCreateCategoryTab = activeTab === 'create-category';
+  return {
+    panelId: isCreateCategoryTab ? 'validationStatusPanelNewCategory' : 'validationStatusPanelExistingCategory',
+    contentId: isCreateCategoryTab ? 'validationStatusContentNewCategory' : 'validationStatusContentExistingCategoryTab',
+    formId: isCreateCategoryTab ? 'onboardForm' : 'onboardServerForm',
+    validateButtonId: isCreateCategoryTab ? 'validateButtonNewCategory' : 'validateButtonExistingCategory',
+    publishButtonId: isCreateCategoryTab ? 'publishButtonNewCategory' : 'publishButtonExistingCategory',
+  };
+}
+
+/**
+ * Ensures the status panel is visible and expanded.
+ * @param {string} panelId - The ID of the status panel.
+ * @param {string} contentId - The ID of the status content area.
+ */
+export function ensureStatusPanelVisible(panelId, contentId) {
+  const statusPanel = document.getElementById(panelId);
+  const statusContent = document.getElementById(contentId);
+
+  if (!statusPanel || !statusContent) return;
+
+  statusPanel.classList.remove('hidden');
+  if (statusContent.classList.contains('hidden')) {
+    const headerIcon = statusPanel.querySelector('.toggle-icon');
+    if (headerIcon && typeof toggleSectionContent === 'function') {
+      toggleSectionContent(contentId, headerIcon);
+    } else if (headerIcon) {
+      console.warn('toggleSectionContent function not available for status panel.');
+      statusContent.classList.remove('hidden');
+      headerIcon.classList.remove('bx-chevron-down');
+      headerIcon.classList.add('bx-chevron-up');
+    } else {
+      statusContent.classList.remove('hidden');
+    }
+  }
+}

package/src/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/src/web/public/js/serverCategoryList.js

@@ -1,6 +1,7 @@
 import { allServerCategoriesData, fetchServerCategories } from './api.js';
-import { showServerDetails } from './serverCategoryDetails.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';
 
 // Wait for data to be loaded
 async function waitForData() {
@@ -73,7 +74,7 @@ function renderServerCategoryList(servers) {
 
         return `
         <div class="server-item border border-gray-200 p-3 rounded hover:bg-gray-50 cursor-pointer transition duration-150 ease-in-out"
-             onclick="window.showServerDetails('${server.name}')"
+             onclick="navigateToCategory('${server.name}')"
              data-server-name="${server.name}">
             <h3 class="font-semibold text-gray-800">${server.displayName || server.name}</h3>
             <p class="text-sm text-gray-500">${statusHtml}</p>
@@ -128,5 +129,17 @@ function setupSearch() {
     });
 }
 
+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;
+
+
 // Export functions
 export { renderServerCategoryList, setupSearch, loadLastSelectedCategory };