imcp 0.0.14 → 0.0.16

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

@@ -1,166 +1,461 @@
-import { 
-  requirementTemplate,
+import {
   serverTemplate,
   envVariableTemplate,
-  serverRequirementTemplate 
+  serverRequirementTemplate
 } from './templates.js';
 
 import {
   state,
-  incrementRequirementCounter,
-  incrementServerCounter,
+  setServerCounter,
+  getServerCounter, // Added
   setEnvCounter,
   getEnvCounter,
   deleteEnvCounter,
+  clearEnvCountersForTab, // Added
   setServerRequirementCounter,
   getServerRequirementCounter,
-  deleteServerRequirementCounter
+  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}`;
+    }
 
-// UI Event Handlers
-export function addRequirement() {
-  const container = document.getElementById('requirementsList');
-  container.insertAdjacentHTML('beforeend', requirementTemplate(state.requirementCounter));
-  incrementRequirementCounter();
+    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);
+    }
+  });
 }
 
-export function removeRequirement(index) {
-  const item = document.querySelector(`.requirement-item[data-index="${index}"]`);
-  if (item) {
-    item.remove();
+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 baseTitle = `MCP Server #${newServerIndex + 1}`;
+      const readOnlySuffix = titleElement.textContent.includes('(Read-only)') ? ' (Read-only)' : '';
+      titleElement.textContent = `${baseTitle}${readOnlySuffix}`;
+    }
+
+    // Update onclick handlers
+    serverItem.querySelectorAll('[onclick]').forEach(element => {
+      const onclickAttr = element.getAttribute('onclick');
+      if (!onclickAttr) return;
+
+      const updatedOnclick = onclickAttr
+        .replace(new RegExp(`\\((\\s*)${oldServerIndex}(\\s*[,\\)])`, 'g'), `($1${newServerIndex}$2`)
+        .replace(new RegExp(`(${serversListId}-(?:server|installation|env-vars)-content-${oldServerIndex})`, 'g'), `$1${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;
+
+  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 (e.g., an existing category was selected, or we are populating from JSON for such a category).
+    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.
+        // This also covers cases where serverData might not have a name yet if added directly in JSON.
+        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.
+        actualReadOnlyForThisServer = true;
+      } else {
+        // Case 2: User clicked "Add Server" button. The new server item should be editable.
+        actualReadOnlyForThisServer = false;
+      }
+    }
+  }
+
+  container.insertAdjacentHTML('beforeend', serverTemplate(newServerIndex, actualReadOnlyForThisServer, 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) {
+    setupServerMode(serverItem, newServerIndex, serversListId, actualReadOnlyForThisServer, serverData);
+    setupReadOnlyState(serverItem, actualReadOnlyForThisServer, 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);
+}
+
+function setupReadOnlyState(serverItem, isReadOnly, serversListId, serverIndex) {
+  if (isReadOnly) {
+    serverItem.querySelectorAll('input, select, textarea').forEach(el => {
+      el.disabled = true;
+      el.classList.add('bg-gray-100', 'cursor-not-allowed', 'opacity-70');
+    });
+
+    serverItem.querySelectorAll('.action-button-in-server').forEach(btn => {
+      btn.style.display = 'none';
+    });
+
+    // 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 {
+    setTimeout(() => {
+      serverItem.querySelectorAll('input, select, textarea').forEach(el => {
+        el.disabled = false;
+        el.removeAttribute('readonly');
+        el.classList.remove('bg-gray-100', 'cursor-not-allowed', 'opacity-70');
+      });
+
+      serverItem.querySelectorAll('.action-button-in-server').forEach(btn => {
+        btn.style.display = '';
+        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' : '';
   }
 }
 
-export function addServer() {
-  const container = document.getElementById('serversList');
-  container.insertAdjacentHTML('beforeend', serverTemplate(state.serverCounter));
-  setEnvCounter(state.serverCounter, 0);
-  setServerRequirementCounter(state.serverCounter, 0);
-  incrementServerCounter();
+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>
+  `;
 }
 
-export function removeServer(index) {
-  const item = document.querySelector(`.server-item[data-index="${index}"]`);
+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(index);
-    deleteServerRequirementCounter(index);
+    deleteEnvCounter(serversListId, serverIndexToRemove);
+    deleteServerRequirementCounter(serversListId, serverIndexToRemove);
+    reindexServers(serversListId);
   }
 }
 
-export function addEnvVariable(serverIndex) {
-  const container = document.getElementById(`envVars_${serverIndex}`);
-  const envIndex = getEnvCounter(serverIndex);
-  container.insertAdjacentHTML('beforeend', envVariableTemplate(serverIndex, envIndex));
-  setEnvCounter(serverIndex, envIndex + 1);
+export function addEnvVariable(serverIndex, serversListId = 'serversList', isReadOnly = false) {
+  const container = document.querySelector(`#${serversListId} .server-item[data-index="${serverIndex}"] #envVarsContainer_${serverIndex}`);
+  if (!container) return -1;
+
+  const envIndex = getEnvCounter(serversListId, serverIndex);
+  container.insertAdjacentHTML('beforeend', envVariableTemplate(serverIndex, envIndex, isReadOnly, serversListId));
+  setEnvCounter(serversListId, serverIndex, envIndex + 1);
+
+  if (isReadOnly) {
+    const envItem = container.querySelector(`.env-var-item[data-env-index="${envIndex}"]`);
+    if (envItem) {
+      envItem.querySelectorAll('input, select, textarea').forEach(el => {
+        el.disabled = true;
+        el.classList.add('bg-gray-100', 'cursor-not-allowed', 'opacity-70');
+      });
+      envItem.querySelectorAll('.action-button-in-env').forEach(btn => btn.style.display = 'none');
+    }
+  }
+
+  return envIndex;
 }
 
-export function removeEnvVariable(serverIndex, envIndex) {
-  const item = document.querySelector(`#envVars_${serverIndex} .env-var-item[data-env-index="${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();
 }
 
-export function addServerRequirement(serverIndex) {
-  const container = document.getElementById(`server-requirements-${serverIndex}`);
-  const reqIndex = getServerRequirementCounter(serverIndex);
-  container.insertAdjacentHTML('beforeend', serverRequirementTemplate(serverIndex, reqIndex));
-  setServerRequirementCounter(serverIndex, reqIndex + 1);
+export function addServerRequirement(serverIndex, serversListId = 'serversList', isReadOnly = false) {
+  const container = document.querySelector(`#${serversListId} .server-item[data-index="${serverIndex}"] #server-requirements-list-${serverIndex}`);
+  if (!container) return -1;
+
+  const reqIndex = getServerRequirementCounter(serversListId, serverIndex);
+  container.insertAdjacentHTML('beforeend', serverRequirementTemplate(serverIndex, reqIndex, isReadOnly, serversListId));
+  setServerRequirementCounter(serversListId, serverIndex, reqIndex + 1);
+
+  if (isReadOnly) {
+    const reqItem = container.querySelector(`.server-requirement-item[data-req-index="${reqIndex}"]`);
+    if (reqItem) {
+      reqItem.querySelectorAll('input, select, textarea').forEach(el => {
+        el.disabled = true;
+        el.classList.add('bg-gray-100', 'cursor-not-allowed', 'opacity-70');
+      });
+      reqItem.querySelectorAll('.action-button-in-req').forEach(btn => btn.style.display = 'none');
+    }
+  }
+
+  toggleServerAliasField(serverIndex, reqIndex, serversListId);
+  toggleServerRegistryConfig(serverIndex, reqIndex, serversListId);
+  return reqIndex;
 }
 
-export function removeServerRequirement(serverIndex, reqIndex) {
-  const item = document.querySelector(`#server-requirements-${serverIndex} .server-requirement-item[data-req-index="${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 toggleAliasField(index) {
-  const typeSelect = document.querySelector(`[name="requirements[${index}].type"]`);
-  const aliasField = document.getElementById(`alias-field-${index}`);
-  
-  if (typeSelect && aliasField) {
-    aliasField.classList.toggle('hidden', typeSelect.value !== 'command');
-  }
-}
+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}`);
 
-export function toggleServerAliasField(serverIndex, reqIndex) {
-  const typeSelect = document.querySelector(`[name="servers[${serverIndex}].requirements[${reqIndex}].type"]`);
-  const aliasField = document.getElementById(`server-alias-field-${serverIndex}-${reqIndex}`);
-  
   if (typeSelect && aliasField) {
     aliasField.classList.toggle('hidden', typeSelect.value !== 'command');
   }
 }
 
-export function toggleRegistryConfig(index) {
-  const select = document.querySelector(`[name="requirements[${index}].registryType"]`);
-  const githubConfig = document.getElementById(`github-config-${index}`);
-  const artifactsConfig = document.getElementById(`artifacts-config-${index}`);
-  const localConfig = document.getElementById(`local-config-${index}`);
-  
-  if (select) {
-    // Hide all configurations first
-    [githubConfig, artifactsConfig, localConfig].forEach(config => {
-      if (config) config.classList.add('hidden');
-    });
+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;
 
-    // Show the selected configuration
-    switch (select.value) {
-      case 'github':
-        githubConfig?.classList.remove('hidden');
-        break;
-      case 'artifacts':
-        artifactsConfig?.classList.remove('hidden');
-        break;
-      case 'local':
-        localConfig?.classList.remove('hidden');
-        break;
-    }
-  }
-}
-
-export function toggleServerRegistryConfig(serverIndex, reqIndex) {
-  const select = document.querySelector(`[name="servers[${serverIndex}].requirements[${reqIndex}].registryType"]`);
-  const githubConfig = document.getElementById(`server-github-config-${serverIndex}-${reqIndex}`);
-  const artifactsConfig = document.getElementById(`server-artifacts-config-${serverIndex}-${reqIndex}`);
-  const localConfig = document.getElementById(`server-local-config-${serverIndex}-${reqIndex}`);
-  
-  if (select) {
-    // Hide all configurations first
-    [githubConfig, artifactsConfig, localConfig].forEach(config => {
-      if (config) config.classList.add('hidden');
-    });
+  const select = requirementItem.querySelector(`select[name="servers[${serverIndex}].requirements[${reqIndex}].registryType"]`);
+  if (!select) return;
 
-    // Show the selected configuration
-    switch (select.value) {
-      case 'github':
-        githubConfig?.classList.remove('hidden');
-        break;
-      case 'artifacts':
-        artifactsConfig?.classList.remove('hidden');
-        break;
-      case 'local':
-        localConfig?.classList.remove('hidden');
-        break;
+  ['github', 'artifacts'].forEach(type => {
+    const config = requirementItem.querySelector(`#server-${type}-config-${serverIndex}-${reqIndex}`);
+    if (config) {
+      config.classList.toggle('hidden', select.value !== type);
     }
-  }
+  });
 }
 
-export async function browseLocalSchema(index) {
-  const schemaPath = document.getElementById(`schema-path-${index}`);
-  
+export async function browseLocalSchema(serverIndex, serversListId = 'serversList') {
+  const schemaPath = document.querySelector(`#${serversListId} .server-item[data-index="${serverIndex}"] #schema-path-${serverIndex}`);
+  if (!schemaPath) return;
+
   try {
     if ('showOpenFilePicker' in window) {
       const [fileHandle] = await window.showOpenFilePicker({
-        types: [{
-          description: 'JSON Files',
-          accept: {
-            'application/json': ['.json']
-          }
-        }]
+        types: [{ description: 'JSON Files', accept: { 'application/json': ['.json'] } }]
       });
       const file = await fileHandle.getFile();
       schemaPath.value = file.name;
     } else {
-      // Fallback for browsers that don't support the File System Access API
       const input = document.createElement('input');
       input.type = 'file';
       input.accept = '.json';
@@ -176,21 +471,288 @@ export async function browseLocalSchema(index) {
   }
 }
 
-// Attach handlers to window for use in HTML
+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) {
+    return activeForm ? getFormData(activeForm) : {};
+  }
+
+  const newData = getFormData(activeForm, true, baseCategoryData);
+  const merged = JSON.parse(JSON.stringify(baseCategoryData));
+
+  merged.mcpServers = (merged.mcpServers || []).concat(newData.mcpServers || []);
+
+  const existingReqs = new Set(merged.requirements?.map(r => `${r.type}|${r.name}|${r.version}`) || []);
+  (newData.requirements || []).forEach(req => {
+    const key = `${req.type}|${req.name}|${req.version}`;
+    if (!existingReqs.has(key)) {
+      merged.requirements = merged.requirements || [];
+      merged.requirements.push(req);
+      existingReqs.add(key);
+    }
+  });
+
+  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');
+  }
+}
+
 Object.entries({
-  addRequirement,
-  removeRequirement,
   addServer,
   removeServer,
   addEnvVariable,
   removeEnvVariable,
   addServerRequirement,
   removeServerRequirement,
-  toggleAliasField,
   toggleServerAliasField,
-  toggleRegistryConfig,
   toggleServerRegistryConfig,
-  browseLocalSchema
+  browseLocalSchema,
+  renderInstallationConfig,
+  toggleSectionContent,
+  copyJsonToClipboard
 }).forEach(([name, fn]) => {
   window[name] = fn;
-});
+});