imcp 0.0.18 → 0.1.1

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

@@ -10,17 +10,7 @@ function setupRealTimeValidation(formId) {
   const form = document.getElementById(formId);
   if (!form) return;
 
-  // Helper function to show validation message
-  const showValidationMessage = (element, message, isError = true) => {
-    let messageDiv = element.nextElementSibling;
-    if (!messageDiv || !messageDiv.classList.contains('validation-message')) {
-      messageDiv = document.createElement('div');
-      messageDiv.className = `validation-message text-xs mt-1 ${isError ? 'text-red-500' : 'text-green-500'}`;
-      element.insertAdjacentElement('afterend', messageDiv);
-    }
-    messageDiv.textContent = message;
-    messageDiv.className = `validation-message text-xs mt-1 ${isError ? 'text-red-500' : 'text-green-500'}`;
-  };
+  if (!form) return;
 
   // Name input validation (category or server)
   const nameInput = form.querySelector('input[name="name"]');
@@ -1026,5 +1016,22 @@ export function resetOnboardFormDynamicContent(formId = 'onboardForm', serversLi
   setupRealTimeValidation(formId);
 }
 
+/**
+ * Shows validation message under an input field
+ * @param {HTMLElement} element - The element to show validation message for
+ * @param {string} message - The validation message to display
+ * @param {boolean} isError - Whether this is an error message
+ */
+export function showValidationMessage(element, message, isError = true) {
+  let messageDiv = element.nextElementSibling;
+  if (!messageDiv || !messageDiv.classList.contains('validation-message')) {
+    messageDiv = document.createElement('div');
+    messageDiv.className = `validation-message text-xs mt-1 ${isError ? 'text-red-500' : 'text-green-500'}`;
+    element.insertAdjacentElement('afterend', messageDiv);
+  }
+  messageDiv.textContent = message;
+  messageDiv.className = `validation-message text-xs mt-1 ${isError ? 'text-red-500' : 'text-green-500'}`;
+}
+
 // Export setupRealTimeValidation for external use if needed
 export { setupRealTimeValidation };

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

@@ -2,6 +2,7 @@
 import { showToast } from '../notifications.js';
 import { getFormData } from './formProcessor.js';
 import {
+    validateFormFields,
     pollOperationStatus,
     updateOperationDisplay,
     getElementIdsByTab,
@@ -37,6 +38,35 @@ export async function handlePublish(event, activeTab, currentSelectedCategoryDat
         return;
     }
 
+    // Validate form fields
+    const validationResult = validateFormFields(onboardForm, activeTab);
+    if (!validationResult.isValid) {
+      showToast('Please fix all validation errors before proceeding.', 'error');
+      return;
+    }
+
+    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;
+      }
+
+      // Check category name format
+      const nameInput = onboardForm.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;
+        }
+      }
+    }
+
+    if (hasErrors) {
+      showToast('Please fix all validation errors before proceeding.', 'error');
+      return;
+    }
+
     publishButton.disabled = true;
     publishButton.innerHTML = "<i class='bx bx-loader-alt bx-spin mr-2'></i>Publishing...";
     validateButton.disabled = true; // Also disable validate button during publish

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

@@ -17,7 +17,7 @@ export const serverTemplate = (serverIndex, isReadOnly = false, serverData = nul
 
   const disabledAttr = makeServerFullyEditable ? '' : 'disabled';
   const readOnlyClasses = makeServerFullyEditable ? '' : 'bg-gray-100 cursor-not-allowed opacity-70';
-  
+
   // "Remove Server" button should be hidden if the server is NOT fully editable.
   // A server is fully editable if the context isn't read-only OR if it's an adhoc server.
   const hideRemoveServerButtonClass = !makeServerFullyEditable ? 'hidden' : '';
@@ -42,6 +42,10 @@ export const serverTemplate = (serverIndex, isReadOnly = false, serverData = nul
            class="action-button-in-server p-1.5 text-sm text-red-600 hover:text-red-800 hover:bg-red-50 rounded-md flex items-center mr-2 ${hideRemoveServerButtonClass}" title="Remove Server">
            <i class='bx bx-trash text-lg'></i>
          </button>
+         <button type="button" onclick="event.stopPropagation(); window.duplicateServer(${serverIndex}, '${serversListId}')"
+           class="action-button-in-server duplicate-mcp-server-button p-1.5 text-sm text-blue-600 hover:text-blue-800 hover:bg-blue-50 rounded-md flex items-center mr-2" title="Duplicate Server">
+           <i class='bx bx-copy text-lg'></i>
+         </button>
          <i class='bx bxs-chevron-down text-xl toggle-icon'></i>
         </div>
     </div>

package/src/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/src/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;
   }