imcp 0.0.14 → 0.0.16

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

@@ -0,0 +1,864 @@
+// Form data processing and API calls
+import { showToast } from '../notifications.js';
+import { state, setServerCounter, getServerCounter, clearEnvCountersForTab, clearServerRequirementCountersForTab } from './state.js';
+
+/**
+ * Adds real-time validation to form inputs.
+ * @param {string} formId - The ID of the form to add validation to.
+ */
+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'}`;
+  };
+
+  // Name input validation (category or server)
+  const nameInput = form.querySelector('input[name="name"]');
+  if (nameInput) {
+    nameInput.addEventListener('input', (e) => {
+      const value = e.target.value.trim();
+      if (!value) {
+        showValidationMessage(e.target, 'Name is required');
+      } else if (!/^[a-zA-Z0-9-_]+$/.test(value)) {
+        showValidationMessage(e.target, 'Only alphanumeric characters, hyphens, and underscores allowed');
+      } else if (value.length > 50) {
+        showValidationMessage(e.target, 'Must not exceed 50 characters');
+      } else {
+        showValidationMessage(e.target, 'Valid name', false);
+      }
+    });
+  }
+
+  // Display name validation
+  const displayNameInput = form.querySelector('input[name="displayName"]');
+  if (displayNameInput) {
+    displayNameInput.addEventListener('input', (e) => {
+      const value = e.target.value.trim();
+      if (!value) {
+        showValidationMessage(e.target, 'Display name is required');
+      } else if (value.length > 100) {
+        showValidationMessage(e.target, 'Must not exceed 100 characters');
+      } else {
+        showValidationMessage(e.target, 'Valid display name', false);
+      }
+    });
+  }
+
+  // Description validation
+  const descriptionInput = form.querySelector('textarea[name="description"]');
+  if (descriptionInput) {
+    descriptionInput.addEventListener('input', (e) => {
+      const value = e.target.value.trim();
+      if (value.length > 500) {
+        showValidationMessage(e.target, 'Must not exceed 500 characters');
+      } else if (value.length === 0) {
+        showValidationMessage(e.target, 'Description is required');
+      } else {
+        showValidationMessage(e.target, 'Valid description', false);
+      }
+    });
+  }
+
+  // Repository URL validation
+  const repoInput = form.querySelector('input[name="repository"]');
+  if (repoInput) {
+    repoInput.addEventListener('input', (e) => {
+      const value = e.target.value.trim();
+      if (value) {
+        try {
+          new URL(value);
+          showValidationMessage(e.target, 'Valid URL', false);
+        } catch (err) {
+          showValidationMessage(e.target, 'Invalid URL format');
+        }
+      } else {
+        e.target.nextElementSibling?.remove(); // Remove validation message if empty
+      }
+    });
+  }
+
+  // Server mode validation
+  form.addEventListener('change', (e) => {
+    if (e.target.name?.match(/servers\[\d+\]\.mode/)) {
+      const serverIndex = e.target.name.match(/servers\[(\d+)\]/)[1];
+      const commandInput = form.querySelector(`[name="servers[${serverIndex}].installation.command"]`);
+      const urlInput = form.querySelector(`[name="servers[${serverIndex}].installation.url"]`);
+      const argsInput = form.querySelector(`[name="servers[${serverIndex}].installation.args"]`);
+
+      if (e.target.value === 'stdio') {
+        if (commandInput) {
+          commandInput.required = true;
+          showValidationMessage(commandInput, 'Command is required for stdio mode');
+        }
+        if (urlInput) {
+          urlInput.required = false;
+          urlInput.value = '';
+          urlInput.nextElementSibling?.remove();
+        }
+      } else if (e.target.value === 'sse') {
+        if (urlInput) {
+          urlInput.required = true;
+          showValidationMessage(urlInput, 'URL is required for sse mode');
+        }
+        if (commandInput) {
+          commandInput.required = false;
+          commandInput.value = '';
+          commandInput.nextElementSibling?.remove();
+        }
+        if (argsInput) {
+          argsInput.value = '';
+          argsInput.nextElementSibling?.remove();
+        }
+      }
+    }
+  });
+
+  // Environment variable validation
+  form.addEventListener('input', (e) => {
+    if (e.target.name?.includes('.installation.env[')) {
+      const matches = e.target.name.match(/servers\[(\d+)\]\.installation\.env\[(\d+)\]\.(name|default)/);
+      if (matches) {
+        const [, serverIndex, envIndex, field] = matches;
+        if (field === 'name') {
+          const value = e.target.value.trim();
+          if (!value) {
+            showValidationMessage(e.target, 'Environment variable name is required');
+          } else if (!/^[A-Z_][A-Z0-9_]*$/.test(value)) {
+            showValidationMessage(e.target, 'Must be uppercase with only letters, numbers, and underscores');
+          } else if (value.length > 50) {
+            showValidationMessage(e.target, 'Must not exceed 50 characters');
+          } else {
+            showValidationMessage(e.target, 'Valid name', false);
+          }
+        }
+      }
+    }
+  });
+}
+
+/**
+ * Submits the form data for onboarding or updating a server category.
+ * @param {Event} event - The form submission event.
+ * @param {string} activeTab - Identifier for the active tab ('create-category' or 'create-server').
+ * @param {object|null} currentSelectedCategoryData - Full FeedConfiguration of the selected category if activeTab is 'create-server'.
+ */
+export async function submitForm(event, activeTab, currentSelectedCategoryData = null) {
+  event.preventDefault();
+  const formElement = event.target;
+  let feedConfiguration;
+  let isUpdateOperation = false;
+
+  if (activeTab === 'create-category') {
+    try {
+      feedConfiguration = formDataToFeedConfiguration(formElement);
+      const urlParams = new URLSearchParams(window.location.search);
+      isUpdateOperation = urlParams.get('action') === 'edit' && urlParams.get('category') === feedConfiguration.name;
+    } catch (validationError) {
+      console.error('Validation error:', validationError);
+      return;
+    }
+  } else if (activeTab === 'create-server') {
+    if (!currentSelectedCategoryData || !currentSelectedCategoryData.name) {
+      showToast('No existing category selected or category data is missing.', 'error');
+      return;
+    }
+    const newServersData = formDataToFeedConfiguration(formElement, true, currentSelectedCategoryData);
+
+    feedConfiguration = JSON.parse(JSON.stringify(currentSelectedCategoryData)); // Deep clone
+
+    feedConfiguration.mcpServers = (feedConfiguration.mcpServers || []).concat(newServersData.mcpServers || []);
+
+    const existingReqKeys = new Set((feedConfiguration.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)) {
+        feedConfiguration.requirements.push(newReq);
+        existingReqKeys.add(reqKey);
+      }
+    });
+    isUpdateOperation = true;
+  } else {
+    showToast('Invalid tab context for submission.', 'error');
+    return;
+  }
+
+  try {
+    const response = await fetch('/api/categories/onboard', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({
+        categoryData: feedConfiguration,
+        isUpdate: isUpdateOperation
+      })
+    });
+
+    if (!response.ok) {
+      const errorData = await response.json().catch(() => ({ error: 'Failed to parse error response' }));
+      throw new Error(`HTTP error! status: ${response.status}, message: ${errorData.error || response.statusText}`);
+    }
+
+    const result = await response.json();
+    console.log('Form submitted successfully:', result);
+    showToast('Form submitted successfully! See console for operation details.', 'success');
+  } catch (error) {
+    console.error('Error submitting form:', error);
+    showToast(`Error submitting form: ${error.message}. Please try again.`, 'error');
+  }
+}
+
+/**
+ * Retrieves form data from a given HTMLFormElement.
+ * @param {HTMLFormElement} formElement - The form element to process.
+ * @param {boolean} [forExistingCategoryTab=false] - True if processing for the "Create Server in Existing Category" tab.
+ * @param {object|null} [baseCategoryData=null] - The base FeedConfiguration of the selected category (used if forExistingCategoryTab is true).
+ * @returns {object} The FeedConfiguration object (or partial for new servers if forExistingCategoryTab is true).
+ */
+export function getFormData(formElement, forExistingCategoryTab = false, baseCategoryData = null) {
+  return formDataToFeedConfiguration(formElement, forExistingCategoryTab, baseCategoryData);
+}
+
+/**
+ * Converts form data to a FeedConfiguration object.
+ * @param {HTMLFormElement} formElement - The form element.
+ * @param {boolean} [forExistingCategoryTab=false] - True if processing for the "Create Server in Existing Category" tab.
+ * @param {object|null} [baseCategoryData=null] - The base FeedConfiguration of the selected category.
+ * @returns {object} The FeedConfiguration object. If forExistingCategoryTab is true, this will be a partial
+ *                   FeedConfiguration containing only newly added servers and their requirements.
+ */
+function validateServerConfig(serverConfig) {
+  const errors = [];
+
+  // Validate required fields
+  if (!serverConfig.name) {
+    errors.push('Server name is required');
+  } else if (!/^[a-zA-Z0-9-_]+$/.test(serverConfig.name)) {
+    errors.push('Server name must only contain alphanumeric characters, hyphens, and underscores');
+  } else if (serverConfig.name.length > 50) {
+    errors.push('Server name must not exceed 50 characters');
+  }
+
+  if (!serverConfig.description || serverConfig.description.trim() === '') {
+    errors.push('Server description is required');
+  } else if (serverConfig.description.length > 200) {
+    errors.push('Server description must not exceed 200 characters');
+  }
+
+  if (!serverConfig.mode) {
+    errors.push('Server mode is required');
+  } else if (!['stdio', 'sse'].includes(serverConfig.mode)) {
+    errors.push('Server mode must be either "stdio" or "sse"');
+  }
+
+  // Validate installation config based on mode
+  if (serverConfig.mode === 'stdio') {
+    if (!serverConfig.installation?.command) {
+      errors.push('Command is required for stdio server');
+    } else if (!/^[a-zA-Z0-9-_.\\/]+$/.test(serverConfig.installation.command)) {
+      errors.push('Command must only contain alphanumeric characters, hyphens, underscores, dots, and slashes');
+    }
+
+    // Validate arguments format if present
+    if (serverConfig.installation?.args?.length > 0) {
+      serverConfig.installation.args.forEach((arg, index) => {
+        if (!/^[a-zA-Z0-9-_./\\]+$/.test(arg)) {
+          errors.push(`Argument ${index + 1} must only contain alphanumeric characters, hyphens, underscores, dots, and slashes`);
+        }
+      });
+    }
+  } else if (serverConfig.mode === 'sse') {
+    if (!serverConfig.installation?.url) {
+      errors.push('URL is required for sse server');
+    } else {
+      try {
+        new URL(serverConfig.installation.url);
+      } catch (e) {
+        errors.push('Invalid URL format');
+      }
+    }
+  }
+
+  // Validate env variables if present
+  if (serverConfig.installation?.env) {
+    Object.entries(serverConfig.installation.env).forEach(([name, config]) => {
+      if (!name) {
+        errors.push('Environment variable name is required');
+      } else if (!/^[A-Z_][A-Z0-9_]*$/.test(name)) {
+        errors.push(`Environment variable name "${name}" must be uppercase with only letters, numbers, and underscores`);
+      } else if (name.length > 50) {
+        errors.push(`Environment variable name "${name}" must not exceed 50 characters`);
+      }
+
+      if (config.Required && !config.Default) {
+        errors.push(`Required environment variable "${name}" should have a default value`);
+      }
+
+      if (config.Description && config.Description.length > 200) {
+        errors.push(`Description for environment variable "${name}" must not exceed 200 characters`);
+      }
+    });
+  }
+
+  // Validate schemas if present
+  if (serverConfig.schemas) {
+    try {
+      JSON.parse(serverConfig.schemas);
+    } catch (e) {
+      errors.push('Invalid JSON format in schemas');
+    }
+  }
+
+  return errors;
+}
+
+export function formDataToFeedConfiguration(formElement, forExistingCategoryTab = false, baseCategoryData = null) {
+  const currentFormData = new FormData(formElement);
+  const feedConfiguration = {
+    requirements: [],
+    mcpServers: []
+  };
+
+  if (!forExistingCategoryTab) {
+    feedConfiguration.name = currentFormData.get('name') || '';
+    feedConfiguration.displayName = currentFormData.get('displayName') || '';
+    feedConfiguration.description = currentFormData.get('description') || '';
+    feedConfiguration.repository = currentFormData.get('repository') || undefined;
+  } else if (baseCategoryData) {
+    feedConfiguration.name = baseCategoryData.name;
+  }
+
+  const serverDataMap = new Map();
+  const globalRequirementsMap = new Map();
+
+  for (const [key, value] of currentFormData.entries()) {
+    if (forExistingCategoryTab && !key.startsWith('servers[')) {
+      continue;
+    }
+
+    const serverMatchKey = key.match(/^servers\[(\d+)\]\.(.+)$/);
+    if (serverMatchKey) {
+      let serverIndexInForm = parseInt(serverMatchKey[1], 10);
+      const fieldPathFromMatch = serverMatchKey[2];
+      let actualServerDataIndex = serverIndexInForm;
+
+      if (!serverDataMap.has(actualServerDataIndex)) {
+        serverDataMap.set(actualServerDataIndex, {
+          installation: { env: new Map() },
+          dependencies: { requirements: new Map() },
+          isNew: true // Assuming all servers processed this way are new additions to the form
+        });
+      }
+      const currentServerData = serverDataMap.get(actualServerDataIndex);
+
+      if (fieldPathFromMatch === 'name') currentServerData.name = value;
+      else if (fieldPathFromMatch === 'description') currentServerData.description = value;
+      else if (fieldPathFromMatch === 'mode') currentServerData.mode = value;
+      else if (fieldPathFromMatch === 'repository') currentServerData.repository = value || undefined;
+      else if (fieldPathFromMatch === 'schemas') currentServerData.schemas = value || undefined;
+      else if (fieldPathFromMatch === 'installation.command') currentServerData.installation.command = value;
+      else if (fieldPathFromMatch === 'installation.args') {
+        currentServerData.installation.args = value ? value.split(',').map(arg => arg.trim()).filter(arg => arg) : [];
+      }
+      else if (fieldPathFromMatch === 'installation.url') {
+        currentServerData.installation.url = value;
+      }
+      else if (fieldPathFromMatch.startsWith('installation.env[')) {
+        const envMatch = fieldPathFromMatch.match(/^installation\.env\[(\d+)\]\.(name|default|required|description)$/);
+        if (envMatch) {
+          const envIndex = parseInt(envMatch[1], 10);
+          const envField = envMatch[2];
+          if (!currentServerData.installation.env.has(envIndex)) {
+            currentServerData.installation.env.set(envIndex, {});
+          }
+          const currentEnv = currentServerData.installation.env.get(envIndex);
+          if (envField === 'required') {
+            currentEnv[envField] = currentFormData.get(key) === 'on';
+          } else {
+            currentEnv[envField] = value || undefined;
+          }
+        }
+      }
+      else if (fieldPathFromMatch.startsWith('requirements[')) {
+        const reqMatch = fieldPathFromMatch.match(/^requirements\[(\d+)\]\.(.+)$/);
+        if (reqMatch) {
+          const reqIndex = parseInt(reqMatch[1], 10);
+          const reqFieldPath = reqMatch[2];
+
+          if (!currentServerData.dependencies.requirements.has(reqIndex)) {
+            currentServerData.dependencies.requirements.set(reqIndex, { registry: {} });
+          }
+          const currentReq = currentServerData.dependencies.requirements.get(reqIndex);
+
+          if (reqFieldPath === 'name') currentReq.name = value;
+          else if (reqFieldPath === 'type') currentReq.type = value;
+          else if (reqFieldPath === 'version') currentReq.version = value;
+          else if (reqFieldPath === 'order') currentReq.order = value ? parseInt(value, 10) : undefined;
+          else if (reqFieldPath === 'alias') currentReq.alias = value || undefined;
+          else if (reqFieldPath === 'registryType') {
+            currentReq.registryType = value;
+          } else if (reqFieldPath.startsWith('registry.githubRelease.')) {
+            currentReq.registry.githubRelease = currentReq.registry.githubRelease || {};
+            currentReq.registry.githubRelease[reqFieldPath.substring('registry.githubRelease.'.length)] = value || undefined;
+          } else if (reqFieldPath.startsWith('registry.artifacts.')) {
+            currentReq.registry.artifacts = currentReq.registry.artifacts || {};
+            currentReq.registry.artifacts[reqFieldPath.substring('registry.artifacts.'.length)] = value || undefined;
+          } else if (reqFieldPath.startsWith('registry.local.')) {
+            currentReq.registry.local = currentReq.registry.local || {};
+            currentReq.registry.local[reqFieldPath.substring('registry.local.'.length)] = value || undefined;
+          }
+        }
+      }
+    }
+  }
+
+  serverDataMap.forEach(serverRaw => {
+    let mcpServer;
+    if (serverRaw.mode === 'sse') {
+      mcpServer = {
+        name: serverRaw.name,
+        description: serverRaw.description,
+        mode: serverRaw.mode,
+        schemas: serverRaw.schemas,
+        repository: serverRaw.repository,
+        installation: {
+          url: serverRaw.installation.url || ''
+        },
+        dependencies: {
+          requirements: []
+        }
+      };
+    } else {
+      mcpServer = {
+        name: serverRaw.name,
+        description: serverRaw.description,
+        mode: serverRaw.mode,
+        schemas: serverRaw.schemas,
+        repository: serverRaw.repository,
+        installation: {
+          command: serverRaw.installation.command,
+          args: serverRaw.installation.args || [],
+          env: {}
+        },
+        dependencies: {
+          requirements: []
+        }
+      };
+
+      const envVars = {};
+      serverRaw.installation.env.forEach(env => {
+        if (env.name) {
+          envVars[env.name] = {
+            Required: env.required || false,
+            Description: env.description || '',
+            Default: env.default || undefined
+          };
+        }
+      });
+      if (Object.keys(envVars).length > 0) {
+        mcpServer.installation.env = envVars;
+      } else {
+        delete mcpServer.installation.env;
+      }
+    }
+
+    serverRaw.dependencies.requirements.forEach(reqRaw => {
+      if (!reqRaw.name || !reqRaw.type || !reqRaw.version) return;
+
+      const fullRequirementConfig = {
+        name: reqRaw.name,
+        type: reqRaw.type,
+        version: reqRaw.version,
+        alias: reqRaw.alias,
+        order: reqRaw.order,
+      };
+
+      if (reqRaw.registryType && reqRaw.registryType !== 'public') {
+        fullRequirementConfig.registry = {};
+        if (reqRaw.registryType === 'github' && reqRaw.registry.githubRelease) {
+          fullRequirementConfig.registry.githubRelease = {
+            repository: reqRaw.registry.githubRelease.repository,
+            assetsName: reqRaw.registry.githubRelease.assetsName,
+            assetName: reqRaw.registry.githubRelease.assetName,
+          };
+        } else if (reqRaw.registryType === 'artifacts' && reqRaw.registry.artifacts) {
+          fullRequirementConfig.registry.artifacts = {
+            registryUrl: reqRaw.registry.artifacts.registryUrl,
+            registryName: reqRaw.registry.artifacts.registryName,
+          };
+        } else if (reqRaw.registryType === 'local' && reqRaw.registry.local) {
+          fullRequirementConfig.registry.local = {
+            localPath: reqRaw.registry.local.localPath,
+            assetName: reqRaw.registry.local.assetName,
+          };
+        }
+        if (fullRequirementConfig.registry.githubRelease && !fullRequirementConfig.registry.githubRelease.repository) delete fullRequirementConfig.registry.githubRelease;
+        if (fullRequirementConfig.registry.artifacts && !fullRequirementConfig.registry.artifacts.registryUrl) delete fullRequirementConfig.registry.artifacts;
+        if (fullRequirementConfig.registry.local && !fullRequirementConfig.registry.local.localPath) delete fullRequirementConfig.registry.local;
+        if (Object.keys(fullRequirementConfig.registry).length === 0) delete fullRequirementConfig.registry;
+      }
+
+      mcpServer.dependencies.requirements.push({
+        name: reqRaw.name,
+        version: reqRaw.version,
+        order: reqRaw.order
+      });
+
+      const reqKey = `${reqRaw.type}|${reqRaw.name}|${reqRaw.version}`;
+      if (!globalRequirementsMap.has(reqKey)) {
+        const { order, ...reqConfigForGlobal } = fullRequirementConfig;
+        globalRequirementsMap.set(reqKey, reqConfigForGlobal);
+      }
+    });
+    if (mcpServer.dependencies.requirements.length === 0) {
+      delete mcpServer.dependencies;
+    }
+
+    feedConfiguration.mcpServers.push(mcpServer);
+  });
+
+  feedConfiguration.requirements = Array.from(globalRequirementsMap.values());
+
+  // Validate the entire configuration
+  const errors = [];
+
+  // Validate basic category information
+  if (!forExistingCategoryTab) {
+    if (!feedConfiguration.name) {
+      errors.push('Category name is required');
+    } else if (!/^[a-zA-Z0-9-_]+$/.test(feedConfiguration.name)) {
+      errors.push('Category name must only contain alphanumeric characters, hyphens, and underscores');
+    }
+
+    if (!feedConfiguration.displayName) {
+      errors.push('Display name is required');
+    }
+  }
+
+  // Validate each server configuration
+  feedConfiguration.mcpServers.forEach((server, index) => {
+    const serverErrors = validateServerConfig(server);
+    if (serverErrors.length > 0) {
+      errors.push(`Server ${index + 1} (${server.name || 'unnamed'}): ${serverErrors.join(', ')}`);
+    }
+  });
+
+  // Validate requirements
+  feedConfiguration.requirements.forEach((req, index) => {
+    if (!req.name || !req.type || !req.version) {
+      errors.push(`Requirement ${index + 1}: name, type, and version are required`);
+    }
+    if (req.registry) {
+      const registryType = Object.keys(req.registry)[0];
+      if (!['githubRelease', 'artifacts', 'local'].includes(registryType)) {
+        errors.push(`Requirement ${index + 1}: Invalid registry type ${registryType}`);
+      }
+    }
+  });
+
+  if (errors.length > 0) {
+    // Remove previous error messages
+    formElement.querySelectorAll('.validation-error-message').forEach(el => el.remove());
+
+    // Map field names to input selectors
+    const fieldMap = {
+      'Category name is required': 'input[name="name"]',
+      'Category name must only contain alphanumeric characters, hyphens, and underscores': 'input[name="name"]',
+      'Category name must not exceed 50 characters': 'input[name="name"]',
+      'Display name is required': 'input[name="displayName"]',
+      'Display name must not exceed 100 characters': 'input[name="displayName"]',
+      'Description must not exceed 500 characters': 'textarea[name="description"]',
+      'Repository URL must be a valid URL': 'input[name="repository"]'
+    };
+
+    // Show error messages below relevant fields
+    errors.forEach(errorMsg => {
+      let selector = null;
+      if (errorMsg.includes('Category name')) selector = 'input[name="name"]';
+      else if (errorMsg.includes('Display name')) selector = 'input[name="displayName"]';
+      // Add more mappings as needed
+
+      if (selector) {
+        const input = formElement.querySelector(selector);
+        if (input) {
+          const errorDiv = document.createElement('div');
+          errorDiv.className = 'validation-error-message text-red-500 text-xs mt-1';
+          errorDiv.textContent = errorMsg;
+          input.insertAdjacentElement('afterend', errorDiv);
+        }
+      }
+    });
+  }
+
+  return feedConfiguration;
+}
+
+/**
+ * Populates the form with data from a FeedConfiguration object.
+ * @param {object} feedConfig - The FeedConfiguration object.
+ * @param {string} [formId='onboardForm'] - The ID of the form to populate.
+ * @param {boolean} [renderServersAsReadOnly=false] - If true, renders servers from feedConfig as read-only.
+ *                  This is used for the "Create Server in Existing Category" tab.
+ * @param {string|null} [targetServersListId=null] - The ID of the servers list container. Defaults based on formId.
+ */
+export function populateForm(feedConfig, formId = 'onboardForm', renderServersAsReadOnly = false, targetServersListId = null) {
+  const currentForm = document.getElementById(formId);
+  if (!currentForm) {
+    console.error(`populateForm: Form with ID "${formId}" not found.`);
+    return;
+  }
+
+  const serversListId = targetServersListId || (formId === 'onboardForm' ? 'serversList' : 'existingCategoryServersList');
+
+  resetOnboardFormDynamicContent(formId, serversListId); // This also clears the target server list's innerHTML
+
+  // Setup real-time validation
+  setupRealTimeValidation(formId);
+
+  if (!feedConfig) return;
+
+  if (formId === 'onboardForm') {
+    currentForm.querySelector('[name="name"]').value = feedConfig.name || '';
+    currentForm.querySelector('[name="displayName"]').value = feedConfig.displayName || '';
+    currentForm.querySelector('[name="description"]').value = feedConfig.description || '';
+    if (feedConfig.repository) {
+      currentForm.querySelector('[name="repository"]').value = feedConfig.repository;
+    }
+    const urlParams = new URLSearchParams(window.location.search);
+    if (urlParams.get('action') === 'edit' && urlParams.get('category') === feedConfig.name) {
+      const nameInput = currentForm.querySelector('[name="name"]');
+      if (nameInput) {
+        nameInput.readOnly = true;
+        nameInput.classList.add('bg-gray-100', 'cursor-not-allowed');
+      }
+    }
+  } else if (formId === 'onboardServerForm' && feedConfig) {
+    // Populate basic category information for the "Create Server in Existing Category" tab
+    // These fields are read-only in this tab, but their values need to be set from feedConfig.
+    currentForm.querySelector('input[name="name"]').value = feedConfig.name || '';
+    currentForm.querySelector('input[name="displayName"]').value = feedConfig.displayName || '';
+    currentForm.querySelector('textarea[name="description"]').value = feedConfig.description || '';
+    currentForm.querySelector('input[name="repository"]').value = feedConfig.repository || '';
+
+    // Ensure the containers for basic info and MCP servers are visible,
+    // as resetOnboardFormDynamicContent might have hidden them.
+    const basicInfoContainer = document.getElementById('existingCategoryBasicInfoContainer');
+    if (basicInfoContainer) {
+      basicInfoContainer.classList.remove('hidden');
+    }
+    const mcpServersContainer = document.getElementById('existingCategoryMcpServersContainer');
+    if (mcpServersContainer) {
+      // Visibility of mcpServersContainer is also handled by whether servers exist,
+      // but ensuring it's not hidden here is a good measure after reset.
+      mcpServersContainer.classList.remove('hidden');
+    }
+  }
+
+  // Reset tab-specific server counters before populating a list of servers from data.
+  // This ensures that servers rendered by this populateForm call start their numbering fresh for this tab.
+  setServerCounter(serversListId, 0);
+  clearEnvCountersForTab(serversListId);
+  clearServerRequirementCountersForTab(serversListId);
+
+  (feedConfig.mcpServers || []).forEach((server) => {
+    // Get the correct current index for this tab before adding the server
+    const currentServerIndex = getServerCounter(serversListId);
+    // window.addServer will increment the counter for serversListId internally
+    window.addServer(serversListId, renderServersAsReadOnly, server);
+
+    const serverNameInput = currentForm.querySelector(`[name="servers[${currentServerIndex}].name"]`);
+    if (serverNameInput) serverNameInput.value = server.name || '';
+
+    const modeInput = currentForm.querySelector(`[name="servers[${currentServerIndex}].mode"]`);
+    if (modeInput) {
+      modeInput.value = server.mode || 'stdio';
+      if (typeof window.renderInstallationConfig === 'function') {
+        window.renderInstallationConfig(currentServerIndex, serversListId, server.mode || 'stdio', renderServersAsReadOnly, server.installation);
+      }
+    }
+    const descInput = currentForm.querySelector(`[name="servers[${currentServerIndex}].description"]`);
+    if (descInput) descInput.value = server.description || '';
+
+    if (server.schemas) {
+      const schemaPathEl = document.getElementById(`schema-path-${currentServerIndex}`);
+      if (schemaPathEl) schemaPathEl.value = server.schemas;
+    }
+    if (server.repository) {
+      const repoInput = currentForm.querySelector(`[name="servers[${currentServerIndex}].repository"]`);
+      if (repoInput) repoInput.value = server.repository;
+    }
+
+    if (server.installation) {
+      if (server.mode === 'sse') {
+        const urlInput = currentForm.querySelector(`[name="servers[${currentServerIndex}].installation.url"]`);
+        if (urlInput) urlInput.value = server.installation.url || '';
+      } else {
+        const cmdInput = currentForm.querySelector(`[name="servers[${currentServerIndex}].installation.command"]`);
+        if (cmdInput) cmdInput.value = server.installation.command || '';
+        if (server.installation.args && Array.isArray(server.installation.args)) {
+          const argsInput = currentForm.querySelector(`[name="servers[${currentServerIndex}].installation.args"]`);
+          if (argsInput) argsInput.value = server.installation.args.join(', ');
+        }
+        if (server.installation.env) {
+          Object.entries(server.installation.env).forEach(([envName, envConfig]) => {
+            const currentEnvIndex = window.addEnvVariable(currentServerIndex, serversListId, renderServersAsReadOnly);
+
+            const nameInput = currentForm.querySelector(`[name="servers[${currentServerIndex}].installation.env[${currentEnvIndex}].name"]`);
+            if (nameInput) nameInput.value = envName;
+            if (envConfig.Default) {
+              const defInput = currentForm.querySelector(`[name="servers[${currentServerIndex}].installation.env[${currentEnvIndex}].default"]`);
+              if (defInput) defInput.value = envConfig.Default;
+            }
+            if (envConfig.Required) {
+              const reqInput = currentForm.querySelector(`[name="servers[${currentServerIndex}].installation.env[${currentEnvIndex}].required"]`);
+              if (reqInput) reqInput.checked = true;
+            }
+            if (envConfig.Description) {
+              const descInput = currentForm.querySelector(`[name="servers[${currentServerIndex}].installation.env[${currentEnvIndex}].description"]`);
+              if (descInput) descInput.value = envConfig.Description;
+            }
+          });
+        }
+      }
+    }
+
+    if (server.dependencies && server.dependencies.requirements) {
+      server.dependencies.requirements.forEach((depReq) => {
+        // Find requirement by name only, as requested.
+        const fullReq = (feedConfig.requirements || []).find(r => r.name === depReq.name);
+        if (!fullReq) {
+          console.warn(`Could not find full requirement config for dependency name: ${depReq.name} (version ${depReq.version} specified by server, but lookup is by name only). Skipping.`);
+          return;
+        }
+
+        const currentReqIndex = window.addServerRequirement(currentServerIndex, serversListId, renderServersAsReadOnly);
+
+        currentForm.querySelector(`[name="servers[${currentServerIndex}].requirements[${currentReqIndex}].name"]`).value = fullReq.name || '';
+        currentForm.querySelector(`[name="servers[${currentServerIndex}].requirements[${currentReqIndex}].type"]`).value = fullReq.type || '';
+        currentForm.querySelector(`[name="servers[${currentServerIndex}].requirements[${currentReqIndex}].version"]`).value = fullReq.version || '';
+
+        if (depReq.order !== undefined) {
+          currentForm.querySelector(`[name="servers[${currentServerIndex}].requirements[${currentReqIndex}].order"]`).value = depReq.order;
+        }
+
+        if (fullReq.type === 'command' && fullReq.alias) {
+          currentForm.querySelector(`[name="servers[${currentServerIndex}].requirements[${currentReqIndex}].alias"]`).value = fullReq.alias;
+          window.toggleServerAliasField(currentServerIndex, currentReqIndex, serversListId);
+        }
+
+        let registryType = 'public';
+        if (fullReq.registry) {
+          if (fullReq.registry.githubRelease) registryType = 'github';
+          else if (fullReq.registry.artifacts) registryType = 'artifacts';
+          else if (fullReq.registry.local) registryType = 'local';
+        }
+
+        const registrySelect = currentForm.querySelector(`[name="servers[${currentServerIndex}].requirements[${currentReqIndex}].registryType"]`);
+        if (registrySelect) {
+          registrySelect.value = registryType;
+          // Pass serversListId to ensure context is correct for toggling UI elements
+          window.toggleServerRegistryConfig(currentServerIndex, currentReqIndex, serversListId);
+        }
+
+        if (registryType === 'github' && fullReq.registry.githubRelease) {
+          const gh = fullReq.registry.githubRelease;
+          if (gh.repository) currentForm.querySelector(`[name="servers[${currentServerIndex}].requirements[${currentReqIndex}].registry.githubRelease.repository"]`).value = gh.repository;
+          if (gh.assetsName) currentForm.querySelector(`[name="servers[${currentServerIndex}].requirements[${currentReqIndex}].registry.githubRelease.assetsName"]`).value = gh.assetsName;
+          if (gh.assetName) currentForm.querySelector(`[name="servers[${currentServerIndex}].requirements[${currentReqIndex}].registry.githubRelease.assetName"]`).value = gh.assetName;
+        } else if (registryType === 'artifacts' && fullReq.registry.artifacts) {
+          const art = fullReq.registry.artifacts;
+          if (art.registryUrl) currentForm.querySelector(`[name="servers[${currentServerIndex}].requirements[${currentReqIndex}].registry.artifacts.registryUrl"]`).value = art.registryUrl;
+          if (art.registryName) currentForm.querySelector(`[name="servers[${currentServerIndex}].requirements[${currentReqIndex}].registry.artifacts.registryName"]`).value = art.registryName;
+        } else if (registryType === 'local' && fullReq.registry.local) {
+          const loc = fullReq.registry.local;
+          if (loc.localPath) currentForm.querySelector(`[name="servers[${currentServerIndex}].requirements[${currentReqIndex}].registry.local.localPath"]`).value = loc.localPath;
+          if (loc.assetName) currentForm.querySelector(`[name="servers[${currentServerIndex}].requirements[${currentReqIndex}].registry.local.assetName"]`).value = loc.assetName;
+        }
+      });
+    }
+  });
+}
+
+/**
+ * Resets the dynamic parts of the onboarding form, specifically the servers list.
+ * Also resets server-related counters in the state.
+ * This function is called before populating the form with new data (e.g., when loading an existing category
+ * or switching from JSON view to form view).
+ * @param {string} formId - The ID of the form whose dynamic content is to be reset.
+ * @param {string} serversListId - The ID of the server list container to clear.
+ */
+export function resetOnboardFormDynamicContent(formId = 'onboardForm', serversListId = 'serversList') {
+  const formToReset = document.getElementById(formId);
+  if (formToReset) {
+    // formToReset.reset(); // This resets the entire form, including the category dropdown.
+    // We want to avoid resetting the dropdown when a category is selected.
+    // Other parts of this function handle clearing specific dynamic content.
+    if (formId !== 'onboardServerForm') { // Only reset other forms, not the one with the category select that triggers loading
+      formToReset.reset();
+    }
+  }
+
+  const serversListContainer = document.getElementById(serversListId);
+  if (serversListContainer) {
+    serversListContainer.innerHTML = '';
+  }
+
+  setServerCounter(0);
+  if (state && state.envCounters && typeof state.envCounters.clear === 'function') {
+    state.envCounters.clear();
+  }
+  if (state && state.serverRequirementCounters && typeof state.serverRequirementCounters.clear === 'function') {
+    state.serverRequirementCounters.clear();
+  }
+
+  // Determine the correct validation panel and content IDs based on formId
+  let validationPanelIdToReset;
+  let validationContentIdToReset;
+
+  if (formId === 'onboardForm') {
+    validationPanelIdToReset = 'validationStatusPanelNewCategory';
+    validationContentIdToReset = 'validationStatusContentNewCategory';
+  } else if (formId === 'onboardServerForm') {
+    validationPanelIdToReset = 'validationStatusPanelExistingCategory';
+    validationContentIdToReset = 'validationStatusContentExistingCategoryTab';
+  }
+  // else if other forms have validation panels, add conditions here
+
+  if (validationPanelIdToReset) {
+    const validationPanel = document.getElementById(validationPanelIdToReset);
+    if (validationPanel) {
+      validationPanel.classList.add('hidden');
+    }
+  }
+  if (validationContentIdToReset) {
+    const validationContent = document.getElementById(validationContentIdToReset);
+    if (validationContent) {
+      validationContent.innerHTML = '';
+    }
+  }
+
+  if (formId === 'onboardServerForm') {
+    // const existingCategorySelect = document.getElementById('existingCategorySelect');
+    // if (existingCategorySelect) existingCategorySelect.value = ''; // This was incorrectly resetting the dropdown
+
+    const basicInfoContainer = document.getElementById('existingCategoryBasicInfoContainer');
+    if (basicInfoContainer) basicInfoContainer.classList.add('hidden');
+
+    const mcpServersContainer = document.getElementById('existingCategoryMcpServersContainer');
+    if (mcpServersContainer) mcpServersContainer.classList.add('hidden');
+  }
+
+  // Setup real-time validation after reset
+  setupRealTimeValidation(formId);
+}
+
+// Export setupRealTimeValidation for external use if needed
+export { setupRealTimeValidation };