imcp 0.1.7 → 0.1.8-dev

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

@@ -1,1037 +0,0 @@
-// 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;
-
-  if (!form) return;
-
-  // 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;
-    }
-
-    // Get the complete state of servers and their requirements from the current form.
-    // The `true` flag for `forExistingCategoryTab` tells formDataToFeedConfiguration
-    // to only process server data and not category-level fields from this form.
-    // It should return ALL servers currently in this form, including modified adhoc and new ones.
-    const formDerivedData = formDataToFeedConfiguration(formElement, true, currentSelectedCategoryData);
-
-    // Start with a deep clone of the original category data (for name, description, etc.)
-    feedConfiguration = JSON.parse(JSON.stringify(currentSelectedCategoryData));
-
-    // Replace the mcpServers list entirely with what was parsed from the form.
-    // This ensures that the list reflects the current state of the form (original read-only, modified adhoc, new).
-    feedConfiguration.mcpServers = formDerivedData.mcpServers || [];
-
-    // Merge requirements: start with original requirements, then add any new ones from the form.
-    // `formDerivedData.requirements` should ideally only contain requirements introduced by
-    // servers in the current form that are not already in `currentSelectedCategoryData.requirements`.
-    // The existing logic for merging requirements seems okay if `formDerivedData.requirements` is correctly populated.
-    const existingReqKeys = new Set((feedConfiguration.requirements || []).map(r => `${r.type}|${r.name}|${r.version}`));
-    (formDerivedData.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: []
-  };
-
-  let serversListId;
-  if (formElement.id === 'onboardForm') {
-    serversListId = 'serversList';
-  } else if (formElement.id === 'onboardServerForm') {
-    serversListId = 'existingCategoryServersList';
-  } else {
-    console.warn('[formDataToFeedConfiguration] Could not determine serversListId from formElement.id:', formElement.id);
-  }
-
-  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;
-          }
-        }
-      }
-    }
-  }
-
-  // console.log('[formDataToFeedConfiguration] serverDataMap keys before processing:', Array.from(serverDataMap.keys())); // DEBUG
-  // console.log('[formDataToFeedConfiguration] serverDataMap size:', serverDataMap.size); // DEBUG
-
-  // Process servers found in the form data (new/adhoc or edited original servers)
-  serverDataMap.forEach((serverRaw, serverIndex) => {
-    let mcpServer;
-    // ... (existing logic to build mcpServer from serverRaw)
-    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 { // stdio or other modes
-      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: {} // Initialize 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; // Clean up if no env vars
-      }
-    }
-
-    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,
-          };
-        }
-        // Clean up empty registry objects
-        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; // Exclude order for global list
-        globalRequirementsMap.set(reqKey, reqConfigForGlobal);
-      }
-    });
-    if (mcpServer.dependencies.requirements.length === 0) {
-      delete mcpServer.dependencies; // Clean up if no requirements
-    }
-
-    // Attempt to retrieve and add systemTags from the DOM element,
-    // ONLY if we are in the 'Create Server in Existing Category' tab context.
-    // For 'Create New Category' tab, systemTags should not be assigned from DOM.
-    if (formElement.id === 'onboardServerForm' && serversListId) {
-      const selector = `#${serversListId} .server-item[data-index="${serverIndex}"]`;
-      const serverItemElement = document.querySelector(selector);
-      if (serverItemElement && serverItemElement.dataset.systemTags) {
-        try {
-          mcpServer.systemTags = JSON.parse(serverItemElement.dataset.systemTags);
-        } catch (e) {
-          console.error(`[formDataToFeedConfiguration] Error parsing systemTags for server index ${serverIndex} ('${mcpServer.name}') on ${formElement.id}:`, e, serverItemElement.dataset.systemTags);
-          mcpServer.systemTags = { parseError: true };
-        }
-      }
-      // If no dataset.systemTags or not onboardServerForm, mcpServer.systemTags remains undefined.
-    } else {
-      // Ensure systemTags is not carried over if not in the correct context or not present in dataset
-      delete mcpServer.systemTags;
-    }
-
-    feedConfiguration.mcpServers.push(mcpServer);
-  });
-
-
-  // If processing for an existing category, ensure original non-adhoc servers are included
-  // if they weren't picked up by the form (e.g., because they were read-only and disabled).
-  if (forExistingCategoryTab && baseCategoryData && Array.isArray(baseCategoryData.mcpServers)) {
-    baseCategoryData.mcpServers.forEach(originalServer => {
-      // Check if this original server (by name) is already in our processed list.
-      // We use name as the primary identifier for existing servers.
-      const isAlreadyProcessed = feedConfiguration.mcpServers.some(
-        processedServer => processedServer.name === originalServer.name
-      );
-
-      if (!isAlreadyProcessed && (!originalServer.systemTags || originalServer.systemTags.adhoc !== 'true')) {
-        // This original server was not in the form data (likely read-only) and is not adhoc. Add it.
-        // Ensure its requirements are also added to the global list if not already present.
-        feedConfiguration.mcpServers.push(JSON.parse(JSON.stringify(originalServer))); // Add a clone
-
-        if (originalServer.dependencies && Array.isArray(originalServer.dependencies.requirements)) {
-          originalServer.dependencies.requirements.forEach(req => {
-            // We need the full requirement definition for the global map.
-            // This might require looking up the full definition from baseCategoryData.requirements
-            // if originalServer.dependencies.requirements only has name/version/order.
-            // For simplicity here, we assume baseCategoryData.requirements contains full definitions.
-            const originalGlobalReq = baseCategoryData.requirements?.find(
-              gReq => gReq.name === req.name && gReq.type && gReq.version === req.version // Type might not be in server's dep list
-            );
-
-            if (originalGlobalReq) {
-               const reqKey = `${originalGlobalReq.type}|${originalGlobalReq.name}|${originalGlobalReq.version}`;
-               if (!globalRequirementsMap.has(reqKey)) {
-                   globalRequirementsMap.set(reqKey, JSON.parse(JSON.stringify(originalGlobalReq)));
-               }
-            } else {
-                // Fallback if full definition not found, add what we have, though type might be missing.
-                // This part might need refinement based on actual structure of baseCategoryData.requirements
-                // and how server-specific dependencies link to global ones.
-                // The current server-specific req usually has name, version, order. Type is global.
-                // We need to find the type from the global requirements list.
-                // This logic assumes that if a server has a dependency, its full definition (including type)
-                // must exist in the global `baseCategoryData.requirements`.
-
-                // Let's find the type from baseCategoryData.requirements based on name and version
-                const matchingGlobalReqForType = baseCategoryData.requirements?.find(
-                    gReq => gReq.name === req.name && gReq.version === req.version
-                );
-                if (matchingGlobalReqForType && matchingGlobalReqForType.type) {
-                    const reqKey = `${matchingGlobalReqForType.type}|${req.name}|${req.version}`;
-                    if (!globalRequirementsMap.has(reqKey)) {
-                        // Construct a basic global requirement if not found, though ideally it should exist.
-                        globalRequirementsMap.set(reqKey, {
-                            name: req.name,
-                            version: req.version,
-                            type: matchingGlobalReqForType.type
-                            // Other fields like alias, registry would be missing here if not in matchingGlobalReqForType
-                        });
-                    }
-                } else {
-                    console.warn(`Could not find full global requirement definition (or type) for ${req.name} v${req.version} from original server ${originalServer.name}`);
-                }
-            }
-          });
-        }
-      }
-    });
-  }
-
-
-  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((serverData) => { // Renamed 'server' to 'serverData' for clarity
-    // 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
-    // It also returns the server item, but we'll query it again for safety after DOM manipulation.
-    window.addServer(serversListId, renderServersAsReadOnly, serverData);
-
-    // After addServer, the server item should exist in the DOM.
-    const serverItem = currentForm.querySelector(`#${serversListId} .server-item[data-index="${currentServerIndex}"]`);
-
-    if (serverItem) {
-      if (formId === 'onboardServerForm') {
-        if (serverData.systemTags?.adhoc === "true") {
-          // Case 1: JSON data explicitly marks it as adhoc. Respect this.
-          serverItem.dataset.systemTags = JSON.stringify(serverData.systemTags);
-          // console.log(`[populateForm] Server ${serverData.name || currentServerIndex} in ${formId} retains adhoc status from JSON.`);
-        } else {
-          // Case 2: JSON data does NOT explicitly mark it adhoc.
-          // Check if it was an original server from the category.
-          // state.originalServerNamesForFormPopulation is set when toggling from JSON to Form view for an existing category.
-          if (state.originalServerNamesForFormPopulation && serverData.name && state.originalServerNamesForFormPopulation.has(serverData.name)) {
-            // It's an original server from the category, now treated as adhoc because it passed through JSON view.
-            serverItem.dataset.systemTags = JSON.stringify({ adhoc: "true" });
-            // console.log(`[populateForm] Original server ${serverData.name} in ${formId} marked as adhoc after JSON view.`);
-          } else {
-            // It's a new server (not in original list) and JSON didn't mark it adhoc.
-            // Or, it's an original server but its JSON representation explicitly removed/lacked adhoc tag.
-            // Ensure it's NOT adhoc.
-            // If serverData.systemTags exists but doesn't have adhoc:true, preserve those other tags.
-            if (serverData.systemTags && Object.keys(serverData.systemTags).length > 0) {
-                const newTags = { ...serverData.systemTags };
-                delete newTags.adhoc; // Ensure adhoc is not true
-                if (Object.keys(newTags).length > 0) {
-                    serverItem.dataset.systemTags = JSON.stringify(newTags);
-                } else {
-                    delete serverItem.dataset.systemTags;
-                }
-            } else {
-                delete serverItem.dataset.systemTags;
-            }
-            // console.log(`[populateForm] Server ${serverData.name || currentServerIndex} in ${formId} is NOT marked adhoc.`);
-          }
-        }
-      } else {
-        // For 'onboardForm' (Create Category tab), or if serverData had systemTags not making it adhoc.
-        // If serverData has systemTags, reflect them. Otherwise, ensure no systemTags.
-        if (serverData.systemTags) {
-          serverItem.dataset.systemTags = JSON.stringify(serverData.systemTags);
-        } else {
-          delete serverItem.dataset.systemTags;
-        }
-      }
-    }
-    // Continue with populating fields using serverData
-    const serverNameInput = currentForm.querySelector(`[name="servers[${currentServerIndex}].name"]`);
-    if (serverNameInput) serverNameInput.value = serverData.name || '';
-
-    const modeInput = currentForm.querySelector(`[name="servers[${currentServerIndex}].mode"]`);
-    if (modeInput) {
-      modeInput.value = serverData.mode || 'stdio';
-      if (typeof window.renderInstallationConfig === 'function') {
-        window.renderInstallationConfig(currentServerIndex, serversListId, serverData.mode || 'stdio', renderServersAsReadOnly, serverData.installation);
-      }
-    }
-    const descInput = currentForm.querySelector(`[name="servers[${currentServerIndex}].description"]`);
-    if (descInput) descInput.value = serverData.description || '';
-
-    if (serverData.schemas) {
-      const schemaPathEl = document.getElementById(`schema-path-${currentServerIndex}`);
-      if (schemaPathEl) schemaPathEl.value = serverData.schemas;
-    }
-    if (serverData.repository) {
-      const repoInput = currentForm.querySelector(`[name="servers[${currentServerIndex}].repository"]`);
-      if (repoInput) repoInput.value = serverData.repository;
-    }
-
-    if (serverData.installation) {
-      if (serverData.mode === 'sse') {
-        const urlInput = currentForm.querySelector(`[name="servers[${currentServerIndex}].installation.url"]`);
-        if (urlInput) urlInput.value = serverData.installation.url || '';
-      } else {
-        const cmdInput = currentForm.querySelector(`[name="servers[${currentServerIndex}].installation.command"]`);
-        if (cmdInput) cmdInput.value = serverData.installation.command || '';
-        if (serverData.installation.args && Array.isArray(serverData.installation.args)) {
-          const argsInput = currentForm.querySelector(`[name="servers[${currentServerIndex}].installation.args"]`);
-          if (argsInput) argsInput.value = serverData.installation.args.join(', ');
-        }
-        if (serverData.installation.env) {
-          Object.entries(serverData.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 (serverData.dependencies && serverData.dependencies.requirements) {
-      // Determine if this server's requirements should be effectively read-only
-      const serverIsEffectivelyReadOnlyForReqs = renderServersAsReadOnly && !(serverData.systemTags?.adhoc === 'true');
-      // console.log(`[populateForm] Server: ${serverData.name}, Adhoc: ${serverData.systemTags?.adhoc === 'true'}, renderServersAsReadOnly: ${renderServersAsReadOnly}, Calculated serverIsEffectivelyReadOnlyForReqs: ${serverIsEffectivelyReadOnlyForReqs}`); // DEBUG
-
-      serverData.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;
-        }
-
-        // Pass serverIsEffectivelyReadOnlyForReqs to addServerRequirement
-        const currentReqIndex = window.addServerRequirement(currentServerIndex, serversListId, serverIsEffectivelyReadOnlyForReqs);
-
-        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);
-}
-
-/**
- * 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 };