imcp 0.0.18 → 0.1.1

package/dist/web/public/js/onboard/uiHandlers.js

@@ -70,29 +70,29 @@ function reindexServers(serversListId = 'serversList') {
     // Ensure the server header toggle onclick is correctly re-indexed for its ID parameters
     const headerToggle = serverItem.querySelector(`#${serversListId}-server-header-${oldServerIndex}`);
     if (headerToggle) {
-        headerToggle.id = `${serversListId}-server-header-${newServerIndex}`;
-        const oldContentId = `${serversListId}-server-content-${oldServerIndex}`;
-        const newContentId = `${serversListId}-server-content-${newServerIndex}`;
-        let onclickAttr = headerToggle.getAttribute('onclick');
-        if (onclickAttr) {
-            onclickAttr = onclickAttr.replace(new RegExp(oldContentId.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'), 'g'), newContentId);
-            headerToggle.setAttribute('onclick', onclickAttr);
-        }
-        let onkeydownAttr = headerToggle.getAttribute('onkeydown');
-        if (onkeydownAttr) {
-            onkeydownAttr = onkeydownAttr.replace(new RegExp(oldContentId.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'), 'g'), newContentId);
-            headerToggle.setAttribute('onkeydown', onkeydownAttr);
-        }
-        headerToggle.setAttribute('aria-controls', newContentId);
+      headerToggle.id = `${serversListId}-server-header-${newServerIndex}`;
+      const oldContentId = `${serversListId}-server-content-${oldServerIndex}`;
+      const newContentId = `${serversListId}-server-content-${newServerIndex}`;
+      let onclickAttr = headerToggle.getAttribute('onclick');
+      if (onclickAttr) {
+        onclickAttr = onclickAttr.replace(new RegExp(oldContentId.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'), 'g'), newContentId);
+        headerToggle.setAttribute('onclick', onclickAttr);
+      }
+      let onkeydownAttr = headerToggle.getAttribute('onkeydown');
+      if (onkeydownAttr) {
+        onkeydownAttr = onkeydownAttr.replace(new RegExp(oldContentId.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'), 'g'), newContentId);
+        headerToggle.setAttribute('onkeydown', onkeydownAttr);
+      }
+      headerToggle.setAttribute('aria-controls', newContentId);
     }
     // Update title ID for aria-labelledby
     const titleForAria = serverItem.querySelector(`#${serversListId}-server-title-${oldServerIndex}`);
     if (titleForAria) {
-        titleForAria.id = `${serversListId}-server-title-${newServerIndex}`;
+      titleForAria.id = `${serversListId}-server-title-${newServerIndex}`;
     }
     const contentRegion = serverItem.querySelector(`#${serversListId}-server-content-${oldServerIndex}`);
     if (contentRegion) {
-        contentRegion.setAttribute('aria-labelledby', `${serversListId}-server-title-${newServerIndex}`);
+      contentRegion.setAttribute('aria-labelledby', `${serversListId}-server-title-${newServerIndex}`);
     }
 
 
@@ -225,17 +225,24 @@ export function addServer(serversListId = 'serversList', isContextGenerallyReadO
 
   const serverItem = container.querySelector(`.server-item[data-index="${newServerIndex}"]`);
   if (serverItem) {
-    if (serverData && serverData.systemTags) { // Case 1: Populating from existing serverData that has systemTags
+    // Handle systemTags dataset
+    if (serverData && serverData.systemTags) {
       serverItem.dataset.systemTags = JSON.stringify(serverData.systemTags);
-    } else if (serverData && !serverData.systemTags) { // Case 3: Populating from serverData that *lacks* systemTags
-      // Ensure no stale adhoc tag if the DOM element was somehow reused and had it previously.
+    } else if (serverData && !serverData.systemTags) {
       delete serverItem.dataset.systemTags;
-    } else if (!serverData) { // Case 2: Adding a brand new server via "Add Server" button click (serverData is null)
-      // A brand new server is NOT adhoc by default. It becomes adhoc if modified (e.g. via JSON).
-      // This fulfills part of Req 3: newly added one in create-server tab should not have systemTags.
-      // And implicitly part of Req 2: new server in create-category tab also won't have systemTags.
+    } else if (!serverData) {
       delete serverItem.dataset.systemTags;
     }
+
+    // Handle originalName dataset
+    if (serverData && serverData.name) {
+      serverItem.dataset.originalName = serverData.name;
+    } else {
+      // If it's a new server (serverData is null) or serverData has no name,
+      // ensure no stale originalName if the DOM element was somehow reused.
+      delete serverItem.dataset.originalName;
+    }
+
     setupServerMode(serverItem, newServerIndex, serversListId, actualReadOnlyForThisServer, serverData);
     // Pass serverData to setupReadOnlyState so it can accurately determine adhoc status for title.
     setupReadOnlyState(serverItem, actualReadOnlyForThisServer, serverData, serversListId, newServerIndex);
@@ -334,11 +341,11 @@ function setupReadOnlyState(serverItem, isEffectivelyReadOnly, serverDataFromPop
         // If it's somehow missing and it's adhoc, ensure it's present.
         // This situation should be rare if template logic is correct.
         if (!titleElement.querySelector('span.text-blue-600')) {
-             titleElement.innerHTML = `${baseTitle} <span class="text-sm text-blue-600 ml-1">(Adhoc - Editable)</span>`;
+          titleElement.innerHTML = `${baseTitle} <span class="text-sm text-blue-600 ml-1">(Adhoc - Editable)</span>`;
         } else {
-            // Ensure base title is correct if adhoc span is already there
-            const adhocSpanHTML = titleElement.querySelector('span.text-blue-600').outerHTML;
-            titleElement.innerHTML = `${baseTitle} ${adhocSpanHTML}`;
+          // Ensure base title is correct if adhoc span is already there
+          const adhocSpanHTML = titleElement.querySelector('span.text-blue-600').outerHTML;
+          titleElement.innerHTML = `${baseTitle} ${adhocSpanHTML}`;
         }
       }
     }
@@ -353,10 +360,20 @@ function setupReadOnlyState(serverItem, isEffectivelyReadOnly, serverDataFromPop
       }
     });
 
-    // Hide all action buttons (Add Dependency, Add Env Var, Remove Server) for this server if it's read-only.
+    // Hide action buttons (Add Dependency, Add Env Var, Remove Server) for this server if it's read-only,
+    // but ensure the "Duplicate Server" button remains visible.
     serverItem.querySelectorAll('.action-button-in-server').forEach(btn => {
+      if (!btn.classList.contains('duplicate-mcp-server-button')) {
+        // This is NOT the duplicate button, so hide it if the server is read-only.
         btn.style.display = 'none';
         btn.classList.add('hidden');
+      } else {
+        // This IS the duplicate button. Ensure it's visible.
+        // (It should be visible by default as it doesn't have conditional hide classes from the template)
+        btn.style.display = 'flex'; // Or its appropriate display style
+        btn.classList.remove('hidden');
+        btn.disabled = false; // Ensure it's enabled
+      }
     });
 
     // Expand server content and all key sections
@@ -385,11 +402,11 @@ function setupReadOnlyState(serverItem, isEffectivelyReadOnly, serverDataFromPop
         // Check if the adhoc span is already there from the template.
         // If not (e.g. server became adhoc after initial render and this is a re-evaluation), add it.
         if (!titleElement.querySelector('span.text-blue-600')) {
-            titleElement.innerHTML = `${baseTitle} <span class="text-sm text-blue-600 ml-1">(Adhoc - Editable)</span>`;
+          titleElement.innerHTML = `${baseTitle} <span class="text-sm text-blue-600 ml-1">(Adhoc - Editable)</span>`;
         } else {
-            // Ensure base title is correct if adhoc span is already there
-            const adhocSpanHTML = titleElement.querySelector('span.text-blue-600').outerHTML;
-            titleElement.innerHTML = `${baseTitle} ${adhocSpanHTML}`;
+          // Ensure base title is correct if adhoc span is already there
+          const adhocSpanHTML = titleElement.querySelector('span.text-blue-600').outerHTML;
+          titleElement.innerHTML = `${baseTitle} ${adhocSpanHTML}`;
         }
       } else {
         // Editable and not adhoc, just the base title.
@@ -399,19 +416,19 @@ function setupReadOnlyState(serverItem, isEffectivelyReadOnly, serverDataFromPop
     setTimeout(() => {
       // Enable main server fields
       serverItem.querySelectorAll('input, select, textarea').forEach(el => {
-         if (!el.closest('.env-var-item') && !el.closest('.server-requirement-item')) {
-            el.disabled = false;
-            el.removeAttribute('readonly'); // Ensure readonly is also removed
-            el.classList.remove('bg-gray-100', 'cursor-not-allowed', 'opacity-70');
+        if (!el.closest('.env-var-item') && !el.closest('.server-requirement-item')) {
+          el.disabled = false;
+          el.removeAttribute('readonly'); // Ensure readonly is also removed
+          el.classList.remove('bg-gray-100', 'cursor-not-allowed', 'opacity-70');
         }
       });
 
       // Show ALL action buttons for this server (Add Dependency, Add Env Var, Remove Server)
       // as the server is determined to be effectively editable.
       serverItem.querySelectorAll('.action-button-in-server').forEach(btn => {
-          btn.style.display = 'flex'; // Or 'inline-flex' or whatever its default visible display is
-          btn.disabled = false;
-          btn.classList.remove('hidden', 'opacity-50', 'cursor-not-allowed');
+        btn.style.display = 'flex'; // Or 'inline-flex' or whatever its default visible display is
+        btn.disabled = false;
+        btn.classList.remove('hidden', 'opacity-50', 'cursor-not-allowed');
       });
     }, 0);
   }
@@ -832,6 +849,216 @@ export async function copyJsonToClipboard() {
   }
 }
 
+/**
+ * Duplicates an MCP server item in the form.
+ * @param {number} serverIndexToDuplicate - The index of the server to duplicate.
+ * @param {string} serversListId - The ID of the servers list container (e.g., 'serversList', 'existingCategoryServersList').
+ */
+export function duplicateServer(serverIndexToDuplicate, serversListId) {
+  const formId = serversListId === 'serversList' ? 'onboardForm' : 'onboardServerForm';
+  const formElement = document.getElementById(formId);
+  if (!formElement) {
+    showToast(`Form with ID ${formId} not found. Cannot duplicate server.`, 'error');
+    return;
+  }
+
+  // Determine if we are in the "Create Server in Existing Category" tab context
+  const isExistingCategoryContext = serversListId === 'existingCategoryServersList';
+  let baseCategoryDataForFormExtraction = null;
+  if (isExistingCategoryContext) {
+    // If in existing category context, getFormData might need the base category data
+    // This depends on how getFormData is structured to handle this tab.
+    // Assuming window.currentSelectedCategoryData holds the loaded category.
+    baseCategoryDataForFormExtraction = window.currentSelectedCategoryData || null;
+  }
+
+  const serverItemToDuplicate = formElement.querySelector(`.server-item[data-index="${serverIndexToDuplicate}"]`);
+  if (!serverItemToDuplicate) {
+    showToast('Could not find the server item to duplicate in the DOM.', 'error');
+    return;
+  }
+
+  // Track and temporarily enable ALL disabled fields in the form to ensure we get complete data
+  const disabledFields = [];
+  formElement.querySelectorAll('input, select, textarea').forEach(el => {
+    if (el.disabled) {
+      disabledFields.push({element: el, wasDisabled: true});
+      el.disabled = false;
+    }
+  });
+
+  // Get all current server data from the form
+  const currentFullFeedConfig = getFormData(formElement, isExistingCategoryContext, baseCategoryDataForFormExtraction);
+
+  // Restore original disabled state for all fields
+  disabledFields.forEach(({element, wasDisabled}) => {
+    element.disabled = wasDisabled;
+  });
+
+  if (!currentFullFeedConfig || !currentFullFeedConfig.mcpServers ||
+      currentFullFeedConfig.mcpServers.length <= serverIndexToDuplicate) {
+    showToast('Could not retrieve data for the server to duplicate after attempting to enable fields.', 'error');
+    return;
+  }
+
+  // 2. Get the specific server data to duplicate (deep copy)
+  let serverToDuplicateData = JSON.parse(JSON.stringify(currentFullFeedConfig.mcpServers[serverIndexToDuplicate]));
+
+  // 3. IMPORTANT: Remove systemTags from the duplicated data.
+  // The duplicated server should be treated as a new, fully editable server.
+  if (serverToDuplicateData.systemTags) {
+    delete serverToDuplicateData.systemTags;
+  }
+  // Also, ensure its name is distinct if needed, or clear it to force user input.
+  // For now, we'll copy the name but it will be editable.
+  // Consider adding a suffix like "-copy" to the name if automatic distinct names are desired.
+  // serverToDuplicateData.name = serverToDuplicateData.name ? `${serverToDuplicateData.name}-copy` : 'duplicated-server';
+
+
+  // 4. Determine if the general context for adding a new server is read-only
+  // This is primarily for the 'Edit Existing Category' tab.
+  // 'Create New Category' tab is never read-only in this sense.
+  let isContextGenerallyReadOnlyForAddServer = false;
+  if (isExistingCategoryContext) {
+    isContextGenerallyReadOnlyForAddServer = window.isExistingCategoryReadOnly || false;
+  }
+
+  // 5. Add a new server item. Pass `null` for serverData to ensure it's treated as a new item.
+  // The `isContextGenerallyReadOnlyForAddServer` helps `addServer` decide initial template state.
+  const newServerIndex = addServer(serversListId, isContextGenerallyReadOnlyForAddServer, null);
+
+  if (newServerIndex === -1) {
+    showToast('Failed to add a new server item for duplication.', 'error');
+    return;
+  }
+
+  // 6. Populate the new server item with the copied data.
+  // The new server should be fully editable.
+  // We need to call populateForm or a similar function for just this new server.
+  // populateForm expects a full FeedConfiguration. We'll construct a minimal one.
+  const tempFeedConfigForPopulation = {
+    mcpServers: [serverToDuplicateData] // Contains only the server data to populate
+  };
+
+  // Call populateForm, but ensure it targets the *new* server index and makes it editable.
+  // The populateForm function needs to be aware it's populating a *specific, new* server.
+  // The last `true` tells populateForm to make this specific server editable, overriding general read-only context.
+  // This might require adjustments in populateForm or a dedicated populateSingleServerForm function.
+  // For now, assuming populateForm can handle this if we pass a single server and target the new index.
+  // We pass `false` for `renderServersAsReadOnly` to ensure the duplicated server is editable.
+  // And we pass `true` for a hypothetical `forceEditableForSingleServer` if populateForm supported it.
+  // Let's simplify: populateForm will populate based on the data. addServer already set it up as editable.
+  // We need to ensure that `populateForm` correctly populates the server at `newServerIndex`.
+  // The `populateForm` function in formProcessor.js needs to be able to populate a *specific* server
+  // if we pass only one server in `mcpServers`.
+
+  // Get the newly added server item
+  const serversList = document.getElementById(serversListId);
+  const newServerItem = serversList.querySelector(`.server-item[data-index="${newServerIndex}"]`);
+
+  if (newServerItem) {
+    // Directly populate fields for the new server.
+    // This is a simplified version of what populateForm does for a single server.
+    // This avoids needing to modify populateForm extensively for this specific use case.
+    populateServerManually(newServerItem, newServerIndex, serverToDuplicateData, serversListId);
+    showToast(`Server #${serverIndexToDuplicate + 1} duplicated to Server #${newServerIndex + 1}.`, 'success');
+  } else {
+    showToast('Failed to find the new server item after duplication.', 'error');
+  }
+}
+window.duplicateServer = duplicateServer;
+
+/**
+ * Manually populates a single server item's form fields with provided data.
+ * This is a helper for the duplicateServer functionality.
+ * @param {HTMLElement} serverItemElement - The HTML element of the server item.
+ * @param {number} serverIndex - The index of the server item.
+ * @param {object} serverData - The data object for the server.
+ * @param {string} serversListId - The ID of the servers list.
+ */
+function populateServerManually(serverItemElement, serverIndex, serverData, serversListId) {
+  // Populate basic fields
+  serverItemElement.querySelector(`input[name="servers[${serverIndex}].name"]`).value = serverData.name || '';
+  serverItemElement.querySelector(`textarea[name="servers[${serverIndex}].description"]`).value = serverData.description || '';
+  serverItemElement.querySelector(`select[name="servers[${serverIndex}].mode"]`).value = serverData.mode || 'stdio';
+  serverItemElement.querySelector(`input[name="servers[${serverIndex}].schemas"]`).value = serverData.schemas || '';
+  serverItemElement.querySelector(`input[name="servers[${serverIndex}].repository"]`).value = serverData.repository || '';
+
+  // Trigger change on mode to render correct installation config
+  const modeSelect = serverItemElement.querySelector(`select[name="servers[${serverIndex}].mode"]`);
+  if (modeSelect) {
+    modeSelect.dispatchEvent(new Event('change')); // This will call renderInstallationConfig
+  }
+
+  // Populate installation config (command/args for stdio, url for sse)
+  // renderInstallationConfig should have been called by the modeSelect change event.
+  // Now, set the values based on serverData.installation
+  if (serverData.mode === 'stdio' && serverData.installation) {
+    const commandInput = serverItemElement.querySelector(`input[name="servers[${serverIndex}].installation.command"]`);
+    if (commandInput) commandInput.value = serverData.installation.command || '';
+    const argsInput = serverItemElement.querySelector(`input[name="servers[${serverIndex}].installation.args"]`);
+    if (argsInput) argsInput.value = serverData.installation.args ? serverData.installation.args.join(', ') : '';
+  } else if (serverData.mode === 'sse' && serverData.installation) {
+    const urlInput = serverItemElement.querySelector(`input[name="servers[${serverIndex}].installation.url"]`);
+    if (urlInput) urlInput.value = serverData.installation.url || '';
+  }
+
+  // Populate environment variables
+  const envVarsContainer = serverItemElement.querySelector(`#envVarsContainer_${serverIndex}`);
+  if (envVarsContainer && serverData.installation && serverData.installation.env) {
+    Object.entries(serverData.installation.env).forEach(([name, envConfig]) => {
+      const envVarIndex = addEnvVariable(serverIndex, serversListId, false); // Add as editable
+      const envVarItem = envVarsContainer.querySelector(`.env-var-item[data-env-index="${envVarIndex}"]`);
+      if (envVarItem) {
+        envVarItem.querySelector(`input[name="servers[${serverIndex}].installation.env[${envVarIndex}].name"]`).value = name;
+        envVarItem.querySelector(`input[name="servers[${serverIndex}].installation.env[${envVarIndex}].default"]`).value = envConfig.Default || '';
+        envVarItem.querySelector(`input[name="servers[${serverIndex}].installation.env[${envVarIndex}].required"]`).checked = envConfig.Required || false;
+        envVarItem.querySelector(`textarea[name="servers[${serverIndex}].installation.env[${envVarIndex}].description"]`).value = envConfig.Description || '';
+      }
+    });
+  }
+
+  // Populate server requirements (dependencies)
+  const serverReqsContainer = serverItemElement.querySelector(`#server-requirements-list-${serverIndex}`);
+  if (serverReqsContainer && serverData.dependencies && serverData.dependencies.requirements) {
+    serverData.dependencies.requirements.forEach(req => {
+      const reqIndex = addServerRequirement(serverIndex, serversListId, false); // Add as editable
+      const reqItem = serverReqsContainer.querySelector(`.server-requirement-item[data-req-index="${reqIndex}"]`);
+      if (reqItem) {
+        reqItem.querySelector(`input[name="servers[${serverIndex}].requirements[${reqIndex}].name"]`).value = req.name || '';
+        reqItem.querySelector(`select[name="servers[${serverIndex}].requirements[${reqIndex}].type"]`).value = req.type || '';
+        reqItem.querySelector(`input[name="servers[${serverIndex}].requirements[${reqIndex}].version"]`).value = req.version || '';
+        reqItem.querySelector(`input[name="servers[${serverIndex}].requirements[${reqIndex}].order"]`).value = req.order || '';
+        reqItem.querySelector(`input[name="servers[${serverIndex}].requirements[${reqIndex}].alias"]`).value = req.alias || '';
+
+        const typeSelect = reqItem.querySelector(`select[name="servers[${serverIndex}].requirements[${reqIndex}].type"]`);
+        if (typeSelect) typeSelect.dispatchEvent(new Event('change')); // To show/hide alias
+
+        const registryTypeSelect = reqItem.querySelector(`select[name="servers[${serverIndex}].requirements[${reqIndex}].registryType"]`);
+        if (registryTypeSelect) {
+          registryTypeSelect.value = req.registryType || 'public';
+          registryTypeSelect.dispatchEvent(new Event('change')); // To show/hide specific registry configs
+
+          if (req.registry) {
+            if (req.registryType === 'github' && req.registry.githubRelease) {
+              reqItem.querySelector(`input[name="servers[${serverIndex}].requirements[${reqIndex}].registry.githubRelease.repository"]`).value = req.registry.githubRelease.repository || '';
+              reqItem.querySelector(`input[name="servers[${serverIndex}].requirements[${reqIndex}].registry.githubRelease.assetsName"]`).value = req.registry.githubRelease.assetsName || '';
+              reqItem.querySelector(`input[name="servers[${serverIndex}].requirements[${reqIndex}].registry.githubRelease.assetName"]`).value = req.registry.githubRelease.assetName || '';
+            } else if (req.registryType === 'artifacts' && req.registry.artifacts) {
+              reqItem.querySelector(`input[name="servers[${serverIndex}].requirements[${reqIndex}].registry.artifacts.registryName"]`).value = req.registry.artifacts.registryName || '';
+              reqItem.querySelector(`input[name="servers[${serverIndex}].requirements[${reqIndex}].registry.artifacts.registryUrl"]`).value = req.registry.artifacts.registryUrl || '';
+            } else if (req.registryType === 'local' && req.registry.local) {
+              reqItem.querySelector(`input[name="servers[${serverIndex}].requirements[${reqIndex}].registry.local.localPath"]`).value = req.registry.local.localPath || '';
+              reqItem.querySelector(`input[name="servers[${serverIndex}].requirements[${reqIndex}].registry.local.assetName"]`).value = req.registry.local.assetName || '';
+            }
+          }
+        }
+      }
+    });
+  }
+  // Ensure the duplicated server is fully editable by calling setupReadOnlyState with false
+  setupReadOnlyState(serverItemElement, false, null, serversListId, serverIndex);
+}
 Object.entries({
   addServer,
   removeServer,

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

@@ -9,7 +9,7 @@ import { toggleSectionContent } from './uiHandlers.js'; // Assuming this is corr
  * @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) {
+export function showValidationMessage(element, message, isError = true) {
   // Remove any existing validation message
   const existingMessage = element.nextElementSibling;
   if (existingMessage && existingMessage.classList.contains('validation-message')) {
@@ -34,6 +34,72 @@ function showValidationMessage(element, message, isError = true) {
   }
 }
 
+/**
+ * Common form field validation used by both validate and publish handlers
+ * @param {HTMLFormElement} form - The form to validate
+ * @param {string} activeTab - The active tab ('create-category' or 'create-server')
+ * @returns {{isValid: boolean, errors: string[]}} Validation result with error messages
+ */
+export function validateFormFields(form, activeTab) {
+  // Clear any existing validation messages
+  form.querySelectorAll('.validation-message').forEach(el => el.remove());
+
+  let hasErrors = false;
+  const errors = [];
+
+  // Check for empty required fields and show validation messages
+  const emptyRequiredFields = Array.from(form.querySelectorAll('[required]'));
+  emptyRequiredFields.forEach(field => {
+    if (!field.value.trim()) {
+      showValidationMessage(field, 'This field is required', true);
+      hasErrors = true;
+      errors.push(`${field.name || 'Field'} is required`);
+    }
+  });
+
+  // Check category name format if this is the create category tab
+  if (activeTab === 'create-category') {
+    const nameInput = form.querySelector('input[name="name"]');
+    if (nameInput && nameInput.value.trim()) {
+      if (!/^[a-zA-Z0-9-_]+$/.test(nameInput.value.trim())) {
+        showValidationMessage(nameInput, 'Only alphanumeric characters, hyphens, and underscores allowed', true);
+        hasErrors = true;
+        errors.push('Category name must only contain alphanumeric characters, hyphens, and underscores');
+      }
+    }
+  }
+
+  // Check for other validation errors
+  const envNameFields = form.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;
+      errors.push('Environment variable names must be uppercase with only letters, numbers, and underscores');
+    }
+  });
+
+  const urlFields = form.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;
+        errors.push('Invalid URL format');
+      }
+    }
+  });
+
+  return {
+    isValid: !hasErrors,
+    errors
+  };
+}
+
 const POLLING_INTERVAL = 3000; // 3 seconds
 let pollingIntervalId = null;
 
@@ -278,45 +344,11 @@ export async function handleValidation(event, activeTab, currentSelectedCategory
     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) {
+  const validationResult = validateFormFields(onboardForm, activeTab);
+  if (!validationResult.isValid) {
     showToast('Please fix all validation errors before proceeding.', 'error');
+    validateButton.disabled = false;
+    validateButton.innerHTML = "<i class='bx bx-check-shield mr-2'></i>Validate";
     return;
   }
 

package/dist/web/public/js/serverCategoryList.js

@@ -3,6 +3,9 @@ import { showServerDetails } from './serverCategoryDetails.js'; // Still needed
 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) {
@@ -12,6 +15,54 @@ async function waitForData() {
     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');
@@ -33,8 +84,24 @@ function renderServerCategoryList(servers) {
         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 = servers.map(server => {
+    serverCategoryList.innerHTML = sortedServers.map(server => {
         let statusHtml = '';
 
         // Add tool status summary if available
@@ -80,13 +147,27 @@ function renderServerCategoryList(servers) {
             }
             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"
-             onclick="navigateToCategory('${server.name}')"
+        <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}">
-            <h3 class="font-semibold text-gray-800">${server.displayName || server.name}</h3>
-            <div class="text-sm text-gray-500 flex items-center mt-1">
+            <div class="flex justify-between items-center">
+                <h3 class="font-semibold text-gray-800" onclick="navigateToCategory('${server.name}')">${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" onclick="navigateToCategory('${server.name}')">
                 ${statusHtml}
                 ${systemTagsHtml}
             </div>
@@ -101,6 +182,9 @@ function renderServerCategoryList(servers) {
 // 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();
@@ -151,7 +235,7 @@ function navigateToCategory(categoryName) {
 // 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 };
+export { renderServerCategoryList, setupSearch, loadLastSelectedCategory, togglePinCategory };

package/dist/web/public/onboard.html

@@ -106,8 +106,8 @@
                                     placeholder="e.g., Coder Tools">
                             </div>
                             <div class="md:col-span-2">
-                                <label class="block text-sm font-medium text-gray-700 mb-1">Description</label>
-                                <textarea name="description" rows="3"
+                                <label class="block text-sm font-medium text-gray-700 mb-1">Description*</label>
+                                <textarea name="description" rows="3" required
                                     class="w-full px-3 py-1.5 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                                     placeholder="Describe the purpose and capabilities of this server category"></textarea>
                             </div>