imcp 0.1.6 → 0.1.8-dev

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

@@ -1,1076 +0,0 @@
-import {
-  serverTemplate,
-  envVariableTemplate,
-  serverRequirementTemplate
-} from './templates.js';
-
-import {
-  state,
-  setServerCounter,
-  getServerCounter, // Added
-  setEnvCounter,
-  getEnvCounter,
-  deleteEnvCounter,
-  clearEnvCountersForTab, // Added
-  setServerRequirementCounter,
-  getServerRequirementCounter,
-  deleteServerRequirementCounter,
-  clearServerRequirementCountersForTab // Added
-} from './state.js';
-import { getFormData, populateForm, resetOnboardFormDynamicContent } from './formProcessor.js';
-import { showToast } from '../notifications.js';
-
-function reindexElements(container, oldIndex, newIndex, selectors) {
-  selectors.forEach(({ selector, idBase, namePattern }) => {
-    const element = container.querySelector(selector);
-    if (!element) return;
-
-    if (idBase) {
-      element.id = `${idBase}${newIndex}`;
-    }
-
-    if (namePattern && element.getAttribute('name')) {
-      const oldName = element.getAttribute('name');
-      const newName = oldName.replace(
-        new RegExp(namePattern.replace('INDEX', oldIndex)),
-        `$1${newIndex}$2`
-      );
-      element.setAttribute('name', newName);
-    }
-  });
-}
-
-function reindexServers(serversListId = 'serversList') {
-  const serversList = document.getElementById(serversListId);
-  if (!serversList) return;
-
-  const serverItems = serversList.querySelectorAll('.server-item');
-  const newEnvCounters = new Map();
-  const newServerRequirementCounters = new Map();
-
-  serverItems.forEach((serverItem, newServerIndex) => {
-    const oldServerIndex = parseInt(serverItem.dataset.index, 10);
-    serverItem.dataset.index = newServerIndex;
-
-    const titleElement = serverItem.querySelector('h3');
-    if (titleElement) {
-      const originalTextContent = titleElement.textContent || '';
-      const baseTitle = `MCP Server #${newServerIndex + 1}`;
-      let suffix = '';
-      if (originalTextContent.includes('(Adhoc - Editable)')) {
-        suffix = ' <span class="text-sm text-blue-600 ml-1">(Adhoc - Editable)</span>';
-      } else if (originalTextContent.includes('(Read-only)')) {
-        suffix = ' (Read-only)';
-      }
-      // Use innerHTML to preserve the span if it's an adhoc server
-      titleElement.innerHTML = `${baseTitle}${suffix}`;
-    }
-
-    // Update onclick handlers
-    // 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);
-    }
-    // Update title ID for aria-labelledby
-    const titleForAria = serverItem.querySelector(`#${serversListId}-server-title-${oldServerIndex}`);
-    if (titleForAria) {
-      titleForAria.id = `${serversListId}-server-title-${newServerIndex}`;
-    }
-    const contentRegion = serverItem.querySelector(`#${serversListId}-server-content-${oldServerIndex}`);
-    if (contentRegion) {
-      contentRegion.setAttribute('aria-labelledby', `${serversListId}-server-title-${newServerIndex}`);
-    }
-
-
-    serverItem.querySelectorAll('[onclick]').forEach(element => {
-      const onclickAttr = element.getAttribute('onclick');
-      if (!onclickAttr) return;
-
-      // Skip the header toggle as it's handled above to be more precise with ID replacement
-      if (element.id === `${serversListId}-server-header-${newServerIndex}`) return;
-
-      const updatedOnclick = onclickAttr
-        .replace(new RegExp(`\\((\\s*)${oldServerIndex}(\\s*[,\\)])`, 'g'), `($1${newServerIndex}$2`)
-        // More specific replacement for content IDs to avoid accidental replacements
-        .replace(new RegExp(`${serversListId}-server-deps-content-${oldServerIndex}`.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'), 'g'), `${serversListId}-server-deps-content-${newServerIndex}`)
-        .replace(new RegExp(`${serversListId}-installation-content-${oldServerIndex}`.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'), 'g'), `${serversListId}-installation-content-${newServerIndex}`)
-        .replace(new RegExp(`${serversListId}-env-vars-content-${oldServerIndex}`.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'), 'g'), `${serversListId}-env-vars-content-${newServerIndex}`);
-
-      element.setAttribute('onclick', updatedOnclick);
-    });
-
-    // Update IDs and names
-    reindexElements(serverItem, oldServerIndex, newServerIndex, [
-      { selector: `#${serversListId}-server-content-${oldServerIndex}`, idBase: `${serversListId}-server-content-` },
-      { selector: `#${serversListId}-server-deps-content-${oldServerIndex}`, idBase: `${serversListId}-server-deps-content-` },
-      { selector: `#${serversListId}-installation-content-${oldServerIndex}`, idBase: `${serversListId}-installation-content-` },
-      { selector: `#${serversListId}-env-vars-content-${oldServerIndex}`, idBase: `${serversListId}-env-vars-content-` },
-      { selector: `#schema-path-${oldServerIndex}`, idBase: 'schema-path-' },
-      { selector: `#envVarsContainer_${oldServerIndex}`, idBase: 'envVarsContainer_' }
-    ]);
-
-    // Reindex env variables
-    const envVarsContainer = serverItem.querySelector(`#envVarsContainer_${newServerIndex}`);
-    let envCounter = 0;
-    if (envVarsContainer) {
-      envVarsContainer.querySelectorAll('.env-var-item').forEach((envItem, newEnvIndex) => {
-        const oldEnvIndex = parseInt(envItem.dataset.envIndex, 10);
-        envItem.dataset.envIndex = newEnvIndex;
-        reindexElements(envItem, oldEnvIndex, newEnvIndex, [{
-          selector: '[name]',
-          namePattern: `(servers\\[${newServerIndex}\\]\\.installation\\.env\\[)\\d+(\\]\\..+)`
-        }]);
-        envCounter++;
-      });
-    }
-    newEnvCounters.set(newServerIndex, envCounter);
-
-    // Reindex server requirements
-    const reqsContainer = serverItem.querySelector(`#server-requirements-list-${newServerIndex}`);
-    let reqCounter = 0;
-    if (reqsContainer) {
-      reqsContainer.querySelectorAll('.server-requirement-item').forEach((reqItem, newReqIndex) => {
-        const oldReqIndex = parseInt(reqItem.dataset.reqIndex, 10);
-        reqItem.dataset.reqIndex = newReqIndex;
-        reindexElements(reqItem, oldReqIndex, newReqIndex, [{
-          selector: '[name]',
-          namePattern: `(servers\\[${newServerIndex}\\]\\.requirements\\[)\\d+(\\]\\..+)`
-        }]);
-        reqCounter++;
-      });
-    }
-    newServerRequirementCounters.set(newServerIndex, reqCounter);
-  });
-
-  // Update state for the specific tab
-  clearEnvCountersForTab(serversListId);
-  newEnvCounters.forEach((count, serverIdx) => setEnvCounter(serversListId, serverIdx, count));
-
-  clearServerRequirementCountersForTab(serversListId);
-  newServerRequirementCounters.forEach((count, serverIdx) => setServerRequirementCounter(serversListId, serverIdx, count));
-
-  setServerCounter(serversListId, serverItems.length);
-}
-
-export function addServer(serversListId = 'serversList', isContextGenerallyReadOnly = false, serverData = null) {
-  const container = document.getElementById(serversListId);
-  if (!container) return -1;
-
-  // Initialize counters for this tab if it's the first server being added to this specific list
-  if (container.children.length === 0) {
-    setServerCounter(serversListId, 0);
-    clearEnvCountersForTab(serversListId);
-    clearServerRequirementCountersForTab(serversListId);
-  }
-
-  const newServerIndex = getServerCounter(serversListId);
-  let actualReadOnlyForThisServer;
-  const isServerAdhoc = serverData?.systemTags?.adhoc === 'true';
-
-  if (isServerAdhoc) {
-    // Adhoc servers are always editable, regardless of the general context.
-    actualReadOnlyForThisServer = false;
-  } else if (!isContextGenerallyReadOnly) {
-    // Context is not generally read-only (e.g., creating a brand new category,
-    // or user clicked "Add Server" button when no specific read-only category context applies).
-    actualReadOnlyForThisServer = false;
-  } else {
-    // Context IS generally read-only AND the server is NOT adhoc.
-    // Determine read-only status based on whether it's an original server or a newly added one.
-    if (state.originalServerNamesForFormPopulation) {
-      // We are in the process of toggling from JSON view back to Form view for an existing category.
-      // state.originalServerNamesForFormPopulation contains names of servers that were part of the category *before* any UI/JSON edits.
-      if (serverData && serverData.name && state.originalServerNamesForFormPopulation.has(serverData.name)) {
-        // This serverData (from JSON) corresponds to one of the original servers. It should be read-only.
-        actualReadOnlyForThisServer = true;
-      } else {
-        // This serverData (from JSON) is new (wasn't in originalServerNamesForFormPopulation). It should be editable.
-        actualReadOnlyForThisServer = false;
-      }
-    } else {
-      // We are NOT toggling from JSON view. This is either:
-      // 1. Initial population of an existing category's servers (serverData will be provided).
-      // 2. User clicked the "Add Server" button while an existing category context is active (serverData will be null).
-      if (serverData) {
-        // Case 1: Initial population of an existing server from category data. Should be read-only (unless it was adhoc, handled above).
-        actualReadOnlyForThisServer = true;
-      } else {
-        // Case 2: User clicked "Add Server" button. The new server item should be editable.
-        actualReadOnlyForThisServer = false;
-      }
-    }
-  }
-  // `isContextGenerallyReadOnly`: Influences initial template state for some UI elements (e.g., button visibility).
-  // `actualReadOnlyForThisServer`: Determines if fields should be disabled and is passed to setupReadOnlyState.
-  // `serverData`: Used by the template for initial adhoc title span, and passed to setupReadOnlyState for more checks.
-  container.insertAdjacentHTML('beforeend', serverTemplate(newServerIndex, isContextGenerallyReadOnly, serverData, serversListId));
-
-  setEnvCounter(serversListId, newServerIndex, 0);
-  setServerRequirementCounter(serversListId, newServerIndex, 0);
-  setServerCounter(serversListId, newServerIndex + 1);
-
-  const serverItem = container.querySelector(`.server-item[data-index="${newServerIndex}"]`);
-  if (serverItem) {
-    // Handle systemTags dataset
-    if (serverData && serverData.systemTags) {
-      serverItem.dataset.systemTags = JSON.stringify(serverData.systemTags);
-    } else if (serverData && !serverData.systemTags) {
-      delete serverItem.dataset.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);
-
-    // Default expand Package Dependencies, Startup Configuration, and Environment Variables sections
-    const sections = [
-      { contentId: `${serversListId}-server-deps-content-${newServerIndex}`, iconSelector: `#${serversListId}-deps-header-${newServerIndex} i` },
-      { contentId: `${serversListId}-installation-content-${newServerIndex}`, iconSelector: `#${serversListId}-startup-header-${newServerIndex} i` },
-      { contentId: `${serversListId}-env-vars-content-${newServerIndex}`, iconSelector: `#${serversListId}-envars-header-${newServerIndex} i` }
-    ];
-
-    sections.forEach(({ contentId, iconSelector }) => {
-      const contentElement = document.getElementById(contentId);
-      const iconElement = serverItem.querySelector(iconSelector);
-      if (contentElement && iconElement) {
-        contentElement.classList.remove('hidden');
-        iconElement.classList.remove('bxs-chevron-down');
-        iconElement.classList.add('bxs-chevron-up');
-      }
-    });
-
-    // New logic: Focus on the newly added server and collapse others,
-    // only if it's not an existing read-only server being populated.
-    if (!actualReadOnlyForThisServer) {
-      const allServerItems = container.querySelectorAll('.server-item');
-      allServerItems.forEach(item => {
-        const currentIndex = parseInt(item.dataset.index, 10);
-        // Ensure item is a direct child of the container to avoid issues if querySelectorAll picks up nested items.
-        if (item.parentElement !== container) return;
-
-        const contentId = `${serversListId}-server-content-${currentIndex}`;
-        const iconElement = item.querySelector('.server-header-toggle i.toggle-icon');
-        const contentElement = document.getElementById(contentId);
-
-        if (contentElement && iconElement) {
-          if (currentIndex === newServerIndex) {
-            // Expand the new server if it's collapsed
-            if (contentElement.classList.contains('hidden')) {
-              toggleSectionContent(contentId, iconElement);
-            }
-            // Scroll to the new server
-            // Use a slight delay to ensure rendering is complete for smooth scroll
-            setTimeout(() => {
-              item.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
-            }, 0);
-          } else {
-            // Collapse other servers if they are expanded
-            if (!contentElement.classList.contains('hidden')) {
-              toggleSectionContent(contentId, iconElement);
-            }
-          }
-        }
-      });
-    }
-  }
-
-  return newServerIndex;
-}
-
-function setupServerMode(serverItem, serverIndex, serversListId, isReadOnly, serverData) {
-  const modeSelect = serverItem.querySelector(`select[name="servers[${serverIndex}].mode"]`);
-  if (!modeSelect) return;
-
-  if (isReadOnly && serverData) {
-    modeSelect.value = serverData.mode || 'stdio';
-  }
-
-  modeSelect.addEventListener('change', () => renderInstallationConfig(serverIndex, serversListId));
-  renderInstallationConfig(serverIndex, serversListId, modeSelect.value, isReadOnly, serverData?.installation);
-}
-
-// `isEffectivelyReadOnly` determines if the fields within this server item should be disabled.
-// `serverDataFromPopulation` is the original server data object passed during population, used to check initial adhoc status.
-function setupReadOnlyState(serverItem, isEffectivelyReadOnly, serverDataFromPopulation, serversListId, serverIndex) {
-  const titleElement = serverItem.querySelector(`#${serversListId}-server-title-${serverIndex}`);
-  const baseTitle = `MCP Server #${serverIndex + 1}`;
-  let isAdhocForTitle = serverDataFromPopulation?.systemTags?.adhoc === 'true';
-
-  // Double-check adhoc status from dataset if serverDataFromPopulation doesn't indicate it
-  // (e.g. if it became adhoc after JSON edit and re-population)
-  if (!isAdhocForTitle && serverItem.dataset.systemTags) {
-    try {
-      const tags = JSON.parse(serverItem.dataset.systemTags);
-      if (tags.adhoc === "true") {
-        isAdhocForTitle = true;
-      }
-    } catch (e) { /* ignore parsing error for title determination */ }
-  }
-
-  if (isEffectivelyReadOnly) {
-    if (titleElement) {
-      if (!isAdhocForTitle) {
-        titleElement.innerHTML = `${baseTitle} (Read-only)`;
-      } else {
-        // For adhoc servers, the template is responsible for the "(Adhoc - Editable)" span.
-        // 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>`;
-        } 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}`;
-        }
-      }
-    }
-    // Disable all input fields within this specific server item
-    serverItem.querySelectorAll('input, select, textarea').forEach(el => {
-      // Check if the element is part of a sub-item (like env var or requirement)
-      // These sub-items have their own read-only logic handled by their add functions.
-      // We only want to disable the main server fields here.
-      if (!el.closest('.env-var-item') && !el.closest('.server-requirement-item')) {
-        el.disabled = true;
-        el.classList.add('bg-gray-100', 'cursor-not-allowed', 'opacity-70');
-      }
-    });
-
-    // 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
-    const sections = [
-      { contentId: `${serversListId}-server-content-${serverIndex}`, iconSelector: '.server-header-toggle i.toggle-icon' },
-      { contentId: `${serversListId}-server-deps-content-${serverIndex}`, iconSelector: `#${serversListId}-deps-header-${serverIndex} i` },
-      { contentId: `${serversListId}-installation-content-${serverIndex}`, iconSelector: `#${serversListId}-startup-header-${serverIndex} i` },
-      { contentId: `${serversListId}-env-vars-content-${serverIndex}`, iconSelector: `#${serversListId}-envars-header-${serverIndex} i` }
-    ];
-
-    sections.forEach(({ contentId, iconSelector }) => {
-      const contentElement = document.getElementById(contentId);
-      const iconElement = serverItem.querySelector(iconSelector);
-      if (contentElement && iconElement) {
-        contentElement.classList.remove('hidden');
-        iconElement.classList.remove('bxs-chevron-down');
-        iconElement.classList.add('bxs-chevron-up');
-      }
-    });
-  } else { // Server is effectively editable
-    if (titleElement) {
-      // Server is editable. Template handles the adhoc span.
-      // We just ensure the base title is correct.
-      // If adhoc, the template adds the span. If not adhoc, it's just the base title.
-      if (isAdhocForTitle) {
-        // 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>`;
-        } 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}`;
-        }
-      } else {
-        // Editable and not adhoc, just the base title.
-        titleElement.innerHTML = baseTitle;
-      }
-    }
-    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');
-        }
-      });
-
-      // 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');
-      });
-    }, 0);
-  }
-}
-
-export function renderInstallationConfig(serverIndex, serversListId = 'serversList', initialModeValue = null, isReadOnly = false, installationData = null) {
-  const serverItem = document.querySelector(`#${serversListId} .server-item[data-index="${serverIndex}"]`);
-  if (!serverItem) return;
-
-  const modeSelect = serverItem.querySelector(`select[name="servers[${serverIndex}].mode"]`);
-  const mode = initialModeValue || (modeSelect ? modeSelect.value : 'stdio');
-  const container = serverItem.querySelector(`#installation-config-${serverIndex}`);
-  const envVarsBlock = serverItem.querySelector(`#env-vars-block-${serverIndex}`);
-
-  if (!container) return;
-
-  const disabledAttr = isReadOnly ? 'disabled' : '';
-  const readOnlyClasses = isReadOnly ? 'bg-gray-100 cursor-not-allowed opacity-70' : '';
-
-  container.innerHTML = mode === 'sse' ?
-    generateSSETemplate(serverIndex, disabledAttr, readOnlyClasses, installationData) :
-    generateStdioTemplate(serverIndex, disabledAttr, readOnlyClasses, installationData);
-
-  if (envVarsBlock) {
-    envVarsBlock.style.display = mode === 'sse' ? 'none' : '';
-  }
-}
-
-function generateSSETemplate(serverIndex, disabledAttr, readOnlyClasses, installationData) {
-  return `
-    <div>
-      <label class="block text-sm font-medium text-gray-700 mb-1">Server URL*</label>
-      <input type="text" name="servers[${serverIndex}].installation.url" required ${disabledAttr}
-        class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 ${readOnlyClasses}"
-        placeholder="e.g., https://your-server.com/api/mcp"
-        value="${installationData?.url || ''}">
-    </div>
-  `;
-}
-
-function generateStdioTemplate(serverIndex, disabledAttr, readOnlyClasses, installationData) {
-  return `
-    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
-      <div>
-        <label class="block text-sm font-medium text-gray-700 mb-1">Command*</label>
-        <input type="text" name="servers[${serverIndex}].installation.command" required ${disabledAttr}
-          class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 ${readOnlyClasses}"
-          placeholder="e.g., node, python3"
-          value="${installationData?.command || ''}">
-      </div>
-      <div>
-        <label class="block text-sm font-medium text-gray-700 mb-1">Arguments (comma-separated)</label>
-        <input type="text" name="servers[${serverIndex}].installation.args" ${disabledAttr}
-          class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 ${readOnlyClasses}"
-          placeholder="arg1, path/to/script.js, --flag"
-          value="${installationData?.args ? installationData.args.join(', ') : ''}">
-      </div>
-    </div>
-  `;
-}
-
-export function removeServer(serverIndexToRemove, serversListId = 'serversList') {
-  const serverListContainer = document.getElementById(serversListId);
-  if (!serverListContainer) return;
-
-  const item = serverListContainer.querySelector(`.server-item[data-index="${serverIndexToRemove}"]`);
-  if (item) {
-    item.remove();
-    deleteEnvCounter(serversListId, serverIndexToRemove);
-    deleteServerRequirementCounter(serversListId, serverIndexToRemove);
-    reindexServers(serversListId);
-  }
-}
-
-// `isServerEffectivelyReadOnly` is passed to determine if the new env var item itself should be read-only.
-// This would be true if the parent server is non-adhoc and in a read-only category.
-export function addEnvVariable(serverIndex, serversListId = 'serversList', isServerEffectivelyReadOnly = false) {
-  const container = document.querySelector(`#${serversListId} .server-item[data-index="${serverIndex}"] #envVarsContainer_${serverIndex}`);
-  if (!container) return -1;
-
-  const envIndex = getEnvCounter(serversListId, serverIndex);
-  // Pass `isServerEffectivelyReadOnly` to the template for the new env var item.
-  container.insertAdjacentHTML('beforeend', envVariableTemplate(serverIndex, envIndex, isServerEffectivelyReadOnly, serversListId));
-  setEnvCounter(serversListId, serverIndex, envIndex + 1);
-
-  // The template itself handles disabling fields if isServerEffectivelyReadOnly is true.
-  // No need for additional logic here to disable fields of the newly added item.
-
-  return envIndex;
-}
-
-export function removeEnvVariable(serverIndex, envIndex, serversListId = 'serversList') {
-  const item = document.querySelector(`#${serversListId} .server-item[data-index="${serverIndex}"] .env-var-item[data-env-index="${envIndex}"]`);
-  if (item) item.remove();
-}
-
-// `isServerEffectivelyReadOnly` is passed to determine if the new requirement item itself should be read-only.
-export function addServerRequirement(serverIndex, serversListId = 'serversList', isServerEffectivelyReadOnly = false) {
-  console.log(`[addServerRequirement] ServerIndex: ${serverIndex}, isServerEffectivelyReadOnly received: ${isServerEffectivelyReadOnly}`); // DEBUG
-  const container = document.querySelector(`#${serversListId} .server-item[data-index="${serverIndex}"] #server-requirements-list-${serverIndex}`);
-  if (!container) return -1;
-
-  const reqIndex = getServerRequirementCounter(serversListId, serverIndex);
-  // Pass `isServerEffectivelyReadOnly` to the template for the new requirement item.
-  container.insertAdjacentHTML('beforeend', serverRequirementTemplate(serverIndex, reqIndex, isServerEffectivelyReadOnly, serversListId));
-  setServerRequirementCounter(serversListId, serverIndex, reqIndex + 1);
-
-  // The template itself handles disabling fields if isServerEffectivelyReadOnly is true.
-
-  toggleServerAliasField(serverIndex, reqIndex, serversListId);
-  toggleServerRegistryConfig(serverIndex, reqIndex, serversListId);
-  return reqIndex;
-}
-
-export function removeServerRequirement(serverIndex, reqIndex, serversListId = 'serversList') {
-  const item = document.querySelector(`#${serversListId} .server-item[data-index="${serverIndex}"] .server-requirement-item[data-req-index="${reqIndex}"]`);
-  if (item) item.remove();
-}
-
-export function toggleServerAliasField(serverIndex, reqIndex, serversListId = 'serversList') {
-  const requirementItem = document.querySelector(`#${serversListId} .server-item[data-index="${serverIndex}"] .server-requirement-item[data-req-index="${reqIndex}"]`);
-  if (!requirementItem) return;
-
-  const typeSelect = requirementItem.querySelector(`select[name="servers[${serverIndex}].requirements[${reqIndex}].type"]`);
-  const aliasField = requirementItem.querySelector(`#server-alias-field-${serverIndex}-${reqIndex}`);
-
-  if (typeSelect && aliasField) {
-    aliasField.classList.toggle('hidden', typeSelect.value !== 'command');
-  }
-}
-
-export function toggleServerRegistryConfig(serverIndex, reqIndex, serversListId = 'serversList') {
-  const requirementItem = document.querySelector(`#${serversListId} .server-item[data-index="${serverIndex}"] .server-requirement-item[data-req-index="${reqIndex}"]`);
-  if (!requirementItem) return;
-
-  const select = requirementItem.querySelector(`select[name="servers[${serverIndex}].requirements[${reqIndex}].registryType"]`);
-  if (!select) return;
-
-  ['github', 'artifacts'].forEach(type => {
-    const config = requirementItem.querySelector(`#server-${type}-config-${serverIndex}-${reqIndex}`);
-    if (config) {
-      config.classList.toggle('hidden', select.value !== type);
-    }
-  });
-}
-
-export function toggleSectionContent(contentId, iconElement, toggleElement = null) {
-  const contentElement = document.getElementById(contentId);
-  if (!contentElement) return;
-
-  toggleElement = toggleElement || (iconElement?.parentElement || null);
-  const isHiddenAfterToggle = contentElement.classList.toggle('hidden');
-
-  if (iconElement) {
-    iconElement.classList.toggle('bxs-chevron-up', !isHiddenAfterToggle);
-    iconElement.classList.toggle('bxs-chevron-down', isHiddenAfterToggle);
-  }
-
-  if (toggleElement) {
-    toggleElement.setAttribute('aria-expanded', (!isHiddenAfterToggle).toString());
-  }
-}
-
-export function toggleViewMode(isJsonView, currentFormId, currentServersListId, baseCategoryData = null, isExistingCategoryContext = false) {
-  const elements = {
-    createCategory: document.getElementById('panel-create-category'),
-    createServer: document.getElementById('panel-create-server'),
-    jsonEditor: document.getElementById('panel-json-editor'),
-    textarea: document.getElementById('jsonEditorTextarea'),
-    activeForm: document.getElementById(currentFormId),
-    viewModeToggle: document.getElementById('viewModeToggle'),
-    actionButtons: {
-      json: document.getElementById('jsonEditorActionsContainer'),
-      main: document.querySelector(`#${currentFormId} ~ .flex.justify-end.space-x-4.pt-6.border-t`)
-    }
-  };
-
-  if (isViewAlreadyActive(isJsonView, elements, currentFormId)) return;
-
-  // Clear any previous temporary state
-  if (state.originalServerNamesForFormPopulation) {
-    state.originalServerNamesForFormPopulation = null;
-  }
-
-  try {
-    if (isJsonView) {
-      handleJsonView(elements, currentFormId, currentServersListId, baseCategoryData, isExistingCategoryContext);
-    } else { // Switching to Form View
-      // If switching to form view for 'create-server' tab in an existing category context,
-      // prepare the set of original server names.
-      if (isExistingCategoryContext && baseCategoryData && baseCategoryData.mcpServers && currentFormId === 'onboardServerForm') {
-        state.originalServerNamesForFormPopulation = new Set(
-          baseCategoryData.mcpServers.map(s => s.name).filter(name => name) // Ensure name exists
-        );
-      }
-      handleFormView(elements, currentFormId, currentServersListId, baseCategoryData, isExistingCategoryContext);
-      // Clean up the temporary state after populateForm has finished using it.
-      if (state.originalServerNamesForFormPopulation) {
-        state.originalServerNamesForFormPopulation = null;
-      }
-    }
-  } catch (error) {
-    console.error('Error in view mode toggle:', error);
-    showToast(`Error: ${error.message}`, 'error');
-    if (elements.viewModeToggle) elements.viewModeToggle.checked = isJsonView; // Revert toggle on error
-    // Ensure cleanup on error too
-    if (state.originalServerNamesForFormPopulation) {
-      state.originalServerNamesForFormPopulation = null;
-    }
-  }
-}
-
-function isViewAlreadyActive(isJsonView, elements, currentFormId) {
-  if (isJsonView && elements.jsonEditor && !elements.jsonEditor.classList.contains('hidden')) {
-    return true;
-  }
-
-  if (!isJsonView && elements.jsonEditor?.classList.contains('hidden')) {
-    if (currentFormId === 'onboardForm' && elements.createCategory && !elements.createCategory.classList.contains('hidden')) {
-      return true;
-    }
-    if (currentFormId === 'onboardServerForm' && elements.createServer && !elements.createServer.classList.contains('hidden')) {
-      return true;
-    }
-  }
-
-  return false;
-}
-
-function handleJsonView(elements, currentFormId, currentServersListId, baseCategoryData, isExistingCategoryContext) {
-  const feedConfig = getFeedConfiguration(elements.activeForm, baseCategoryData, isExistingCategoryContext);
-
-  elements.textarea.value = JSON.stringify(feedConfig, null, 2);
-  elements.textarea.readOnly = isExistingCategoryContext && baseCategoryData?.mcpServers?.length > 0;
-
-  if (elements.textarea.readOnly) {
-    elements.textarea.classList.add('bg-gray-100', 'cursor-not-allowed');
-    showToast('JSON view is read-only for existing servers in this category.', 'info');
-  } else {
-    elements.textarea.classList.remove('bg-gray-100', 'cursor-not-allowed');
-  }
-
-  togglePanels(elements, true);
-  toggleButtons(elements.actionButtons, true);
-}
-
-function handleFormView(elements, currentFormId, currentServersListId, baseCategoryData, isExistingCategoryContext) {
-  const jsonData = JSON.parse(elements.textarea.value);
-  // Explicitly clear the server list container before repopulating to prevent UI duplication
-  const serverListContainer = document.getElementById(currentServersListId);
-  if (serverListContainer) {
-    serverListContainer.innerHTML = ''; // Clear existing UI server items
-  }
-  // Reset counters and other dynamic state
-  resetOnboardFormDynamicContent(currentFormId, currentServersListId);
-  populateForm(jsonData, currentFormId, isExistingCategoryContext && baseCategoryData?.mcpServers?.length > 0, currentServersListId);
-
-  togglePanels(elements, false, currentFormId);
-  toggleButtons(elements.actionButtons, false);
-}
-
-function getFeedConfiguration(activeForm, baseCategoryData, isExistingCategoryContext) {
-  if (!isExistingCategoryContext || !baseCategoryData) {
-    // If not in an existing category context, or no base data, just get current form data.
-    return activeForm ? getFormData(activeForm) : {};
-  }
-
-  // In an existing category context, get the data from the current form.
-  // `true` for forExistingCategoryTab ensures getFormData processes only server-related fields
-  // and correctly handles adhoc/new servers.
-  const newData = getFormData(activeForm, true, baseCategoryData);
-
-  // Start with a deep clone of the original category data (for name, description, etc.)
-  const merged = JSON.parse(JSON.stringify(baseCategoryData));
-
-  // Replace mcpServers with the current state from the form (newData).
-  // This ensures deletions and modifications in the form are accurately reflected.
-  // newData.mcpServers will include original read-only servers (if any),
-  // modified adhoc servers, and newly added servers, all with their current state.
-  merged.mcpServers = newData.mcpServers || [];
-
-  // Requirements should also be derived from the current state of servers in the form.
-  // formDataToFeedConfiguration (which produces newData) calculates global requirements
-  // based on the servers it finds. So, newData.requirements should be the correct set.
-  merged.requirements = newData.requirements || [];
-
-  return merged;
-}
-
-function togglePanels(elements, isJsonView, currentFormId = null) {
-  // First ensure all panels are hidden
-  elements.createCategory?.classList.add('hidden');
-  elements.createServer?.classList.add('hidden');
-  elements.jsonEditor?.classList.add('hidden');
-
-  // Then show only the appropriate panel
-  if (isJsonView) {
-    elements.jsonEditor?.classList.remove('hidden');
-  } else if (currentFormId) {
-    // Show only the panel corresponding to the current form
-    if (currentFormId === 'onboardForm') {
-      elements.createCategory?.classList.remove('hidden');
-    } else if (currentFormId === 'onboardServerForm') {
-      elements.createServer?.classList.remove('hidden');
-    }
-  }
-}
-
-function toggleButtons(buttons, isJsonView) {
-  buttons.main?.classList.toggle('hidden', isJsonView);
-  buttons.json?.classList.toggle('hidden', isJsonView);
-}
-
-export async function saveJsonData(activeTab, currentSelectedCategoryData = null) {
-  const textarea = document.getElementById('jsonEditorTextarea');
-  if (textarea.readOnly) {
-    showToast('Cannot save, JSON editor is in read-only mode for existing servers.', 'warning');
-    return;
-  }
-
-  try {
-    const editorData = JSON.parse(textarea.value);
-    const config = prepareConfiguration(activeTab, editorData, currentSelectedCategoryData);
-    if (!config) return;
-
-    await saveConfiguration(config);
-  } catch (error) {
-    console.error('Error saving JSON data:', error);
-    showToast(`Error saving JSON data: ${error.message}`, 'error');
-  }
-}
-
-function prepareConfiguration(activeTab, editorData, currentSelectedCategoryData) {
-  if (activeTab === 'create-category') {
-    if (!editorData.name) {
-      showToast('Category Name is required in JSON.', 'error');
-      return null;
-    }
-    return {
-      data: editorData,
-      isUpdate: isUpdateOperation(editorData.name)
-    };
-  }
-
-  if (activeTab === 'create-server') {
-    if (!currentSelectedCategoryData?.name) {
-      showToast('No existing category context for saving JSON.', 'error');
-      return null;
-    }
-    return {
-      data: mergeConfigurations(currentSelectedCategoryData, editorData),
-      isUpdate: true
-    };
-  }
-
-  showToast('Invalid tab context for saving JSON.', 'error');
-  return null;
-}
-
-function isUpdateOperation(categoryName) {
-  const urlParams = new URLSearchParams(window.location.search);
-  return urlParams.get('action') === 'edit' && urlParams.get('category') === categoryName;
-}
-
-function mergeConfigurations(base, editor) {
-  const merged = JSON.parse(JSON.stringify(base));
-  const existingServerNames = new Set(merged.mcpServers?.map(s => s.name) || []);
-
-  const newServers = (editor.mcpServers || []).filter(s => !existingServerNames.has(s.name));
-  merged.mcpServers = (merged.mcpServers || []).concat(newServers);
-
-  const existingReqs = new Set(merged.requirements?.map(r => `${r.type}|${r.name}|${r.version}`) || []);
-  (editor.requirements || []).forEach(req => {
-    const key = `${req.type}|${req.name}|${req.version}`;
-    const isNewServerReq = newServers.some(s =>
-      s.dependencies?.requirements?.some(r =>
-        r.name === req.name && r.version === req.version
-      )
-    );
-
-    if (!existingReqs.has(key) && isNewServerReq) {
-      merged.requirements = merged.requirements || [];
-      merged.requirements.push(req);
-    }
-  });
-
-  return merged;
-}
-
-async function saveConfiguration({ data, isUpdate }) {
-  const response = await fetch('/api/categories/onboard', {
-    method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({ categoryData: data, isUpdate })
-  });
-
-  if (!response.ok) {
-    const error = await response.json();
-    throw new Error(error.error || `HTTP error! status: ${response.status}`);
-  }
-
-  showToast('JSON data submitted successfully!', 'success');
-}
-
-export async function copyJsonToClipboard() {
-  const textarea = document.getElementById('jsonEditorTextarea');
-  if (!textarea) {
-    showToast('JSON content not found.', 'error');
-    return;
-  }
-
-  try {
-    await navigator.clipboard.writeText(textarea.value);
-    showToast('JSON copied to clipboard!', 'success');
-  } catch (err) {
-    console.error('Failed to copy JSON:', err);
-    showToast('Failed to copy JSON. See console for details.', 'error');
-  }
-}
-
-/**
- * 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,
-  addEnvVariable,
-  removeEnvVariable,
-  addServerRequirement,
-  removeServerRequirement,
-  toggleServerAliasField,
-  toggleServerRegistryConfig,
-  renderInstallationConfig,
-  toggleSectionContent,
-  copyJsonToClipboard
-}).forEach(([name, fn]) => {
-  window[name] = fn;
-});