imcp 0.0.13 → 0.0.14

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

@@ -0,0 +1,375 @@
+// HTML templates for onboarding form
+export const requirementTemplate = (index) => `
+  <div class="requirement-item p-3 border border-gray-200 rounded-lg mb-3" data-index="${index}">
+    <div class="grid grid-cols-2 gap-3">
+      <div>
+        <label class="block text-sm font-medium text-gray-700">Name*</label>
+        <input type="text" name="requirements[${index}].name" required
+          class="w-full px-2 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+          placeholder="Package or command name">
+      </div>
+      <div>
+        <label class="block text-sm font-medium text-gray-700">Type*</label>
+        <select name="requirements[${index}].type" required onchange="toggleAliasField(${index})"
+          class="w-full px-2 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
+          <option value="">Select Type</option>
+          <option value="npm">NPM Package</option>
+          <option value="pip">PIP Package</option>
+          <option value="command">Command</option>
+        </select>
+      </div>
+      <div>
+        <label class="block text-sm font-medium text-gray-700">Version*</label>
+        <input type="text" name="requirements[${index}].version" required
+          class="w-full px-2 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+          placeholder="e.g., latest, v\${latest}, 1.0.0">
+      </div>
+      <div>
+        <label class="block text-sm font-medium text-gray-700">Order</label>
+        <input type="number" name="requirements[${index}].order" min="0"
+          class="w-full px-2 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+          placeholder="Installation order">
+      </div>
+      <div id="alias-field-${index}" class="hidden">
+        <label class="block text-sm font-medium text-gray-700">Alias</label>
+        <input type="text" name="requirements[${index}].alias"
+          class="w-full px-2 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+          placeholder="Command alias">
+      </div>
+      <div class="col-span-2">
+        <label class="block text-sm font-medium text-gray-700">Registry*</label>
+        <select name="requirements[${index}].registryType" onchange="toggleRegistryConfig(${index})"
+          class="w-full px-2 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" required>
+          <option value="">Select Registry Type</option>
+          <option value="public">Public Registry</option>
+          <option value="github">GitHub Release</option>
+          <option value="artifacts">Private Artifacts</option>
+          <option value="local">Local Registry</option>
+        </select>
+      </div>
+    </div>
+    
+    <div id="registry-config-${index}" class="registry-configs">
+      <!-- GitHub Registry Config -->
+      <div id="github-config-${index}" class="registry-config mt-3 p-2 bg-gray-50 rounded-lg hidden">
+        <h3 class="text-sm font-medium text-gray-900 mb-2">GitHub Registry Details</h3>
+        <div class="grid grid-cols-1 gap-3">
+          <div>
+            <label class="block text-sm font-medium text-gray-700">Repository*</label>
+            <input type="text" name="requirements[${index}].registry.githubRelease.repository"
+              class="w-full px-2 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+              placeholder="org/repo">
+          </div>
+          <div>
+            <label class="block text-sm font-medium text-gray-700">Assets Name Pattern</label>
+            <input type="text" name="requirements[${index}].registry.githubRelease.assetsName"
+              class="w-full px-2 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+              placeholder="package-\${latest}.zip">
+          </div>
+          <div>
+            <label class="block text-sm font-medium text-gray-700">Asset Name Pattern*</label>
+            <input type="text" name="requirements[${index}].registry.githubRelease.assetName"
+              class="w-full px-2 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+              placeholder="package-\${latest}.tgz">
+          </div>
+        </div>
+      </div>
+      
+      <!-- Artifacts Registry Config -->
+      <div id="artifacts-config-${index}" class="registry-config mt-3 p-2 bg-gray-50 rounded-lg hidden">
+        <h3 class="text-sm font-medium text-gray-900 mb-2">Private Artifacts Registry Details</h3>
+        <div class="grid grid-cols-1 gap-3">
+          <div>
+            <label class="block text-sm font-medium text-gray-700">Registry URL*</label>
+            <input type="text" name="requirements[${index}].registry.artifacts.registryUrl"
+              class="w-full px-2 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+              placeholder="https://artifacts.example.com">
+          </div>
+          <div>
+            <label class="block text-sm font-medium text-gray-700">Asset Name Pattern</label>
+            <input type="text" name="requirements[${index}].registry.artifacts.assetName"
+              class="w-full px-2 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+              placeholder="package-\${latest}.tgz">
+          </div>
+        </div>
+      </div>
+
+      <!-- Local Registry Config -->
+      <div id="local-config-${index}" class="registry-config mt-3 p-2 bg-gray-50 rounded-lg hidden">
+        <h3 class="text-sm font-medium text-gray-900 mb-2">Local Registry Details</h3>
+        <div class="grid grid-cols-1 gap-3">
+          <div>
+            <label class="block text-sm font-medium text-gray-700">Local Path*</label>
+            <input type="text" name="requirements[${index}].registry.local.localPath"
+              class="w-full px-2 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+              placeholder="/path/to/local/registry">
+          </div>
+          <div>
+            <label class="block text-sm font-medium text-gray-700">Asset Name Pattern</label>
+            <input type="text" name="requirements[${index}].registry.local.assetName"
+              class="w-full px-2 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+              placeholder="package-\${latest}.tgz">
+          </div>
+        </div>
+      </div>
+    </div>
+    
+    <button type="button" onclick="removeRequirement(${index})"
+      class="mt-2 px-2 py-1 text-red-600 hover:text-red-800 flex items-center text-sm">
+      <i class='bx bx-trash mr-1'></i>
+      Remove
+    </button>
+  </div>
+`;
+
+export const serverTemplate = (index) => `
+  <div class="server-item p-3 border border-gray-200 rounded-lg mb-3" data-index="${index}">
+    <div class="grid grid-cols-2 gap-3">
+      <div>
+        <label class="block text-sm font-medium text-gray-700">Server Name*</label>
+        <input type="text" name="servers[${index}].name" required
+          class="w-full px-2 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+          placeholder="e.g., ado-tools">
+      </div>
+      <div>
+        <label class="block text-sm font-medium text-gray-700">Mode*</label>
+        <select name="servers[${index}].mode" required
+          class="w-full px-2 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
+          <option value="stdio">stdio</option>
+          <option value="sse">sse</option>
+        </select>
+      </div>
+      <div class="col-span-2">
+        <label class="block text-sm font-medium text-gray-700">Description*</label>
+        <textarea name="servers[${index}].description" required rows="2"
+          class="w-full px-2 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+          placeholder="Server description"></textarea>
+      </div>
+      <div class="col-span-2">
+        <label class="block text-sm font-medium text-gray-700 mb-2">Requirements</label>
+        <div class="space-y-2" id="server-requirements-${index}">
+          <!-- Will be populated dynamically -->
+        </div>
+        <div class="mt-2">
+          <button type="button" onclick="addServerRequirement(${index})"
+            class="px-2 py-1 text-sm border border-gray-300 rounded-lg text-gray-600 hover:bg-gray-100 flex items-center">
+            <i class='bx bx-plus mr-1'></i>
+            Add Requirement
+          </button>
+        </div>
+      </div>
+      <div class="col-span-2 flex gap-2">
+        <div class="flex-grow">
+          <label class="block text-sm font-medium text-gray-700">Schema File</label>
+          <input type="text" name="servers[${index}].schemas" id="schema-path-${index}"
+            class="w-full px-2 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+            placeholder="e.g., server_tools.json">
+        </div>
+        <div class="flex items-end gap-2">
+          <button type="button" onclick="browseLocalSchema(${index})"
+            class="px-3 py-1.5 text-sm bg-gray-100 hover:bg-gray-200 rounded-lg">
+            Browse Local
+          </button>
+          <button type="button" onclick="browseGithubSchema(${index})"
+            class="px-3 py-1.5 text-sm bg-gray-100 hover:bg-gray-200 rounded-lg">
+            Browse GitHub
+          </button>
+        </div>
+      </div>
+    </div>
+
+    <div class="installation-config mt-3 p-2 bg-gray-50 rounded-lg">
+      <h3 class="text-sm font-medium text-gray-900 mb-2">Installation Configuration</h3>
+      <div class="grid grid-cols-2 gap-3">
+        <div>
+          <label class="block text-sm font-medium text-gray-700">Command*</label>
+          <input type="text" name="servers[${index}].installation.command" required
+            class="w-full px-2 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+            placeholder="e.g., node, python">
+        </div>
+        <div>
+          <label class="block text-sm font-medium text-gray-700">Arguments</label>
+          <input type="text" name="servers[${index}].installation.args"
+            class="w-full px-2 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+            placeholder="Comma-separated arguments">
+        </div>
+      </div>
+    </div>
+
+    <div class="env-variables mt-3 p-2 bg-gray-50 rounded-lg">
+      <h3 class="text-sm font-medium text-gray-900 mb-2">Environment Variables</h3>
+      <div id="envVars_${index}" class="space-y-2">
+        <!-- Environment variables will be added here -->
+      </div>
+      <button type="button" onclick="addEnvVariable(${index})"
+        class="mt-2 px-2 py-1 text-sm border border-gray-300 rounded-lg text-gray-600 hover:bg-gray-100 flex items-center">
+        <i class='bx bx-plus mr-1'></i>
+        Add Variable
+      </button>
+    </div>
+
+    <button type="button" onclick="removeServer(${index})"
+      class="mt-2 px-2 py-1 text-red-600 hover:text-red-800 flex items-center text-sm">
+      <i class='bx bx-trash mr-1'></i>
+      Remove Server
+    </button>
+  </div>
+`;
+
+export const envVariableTemplate = (serverIndex, envIndex) => `
+  <div class="env-var-item grid grid-cols-1 gap-2" data-env-index="${envIndex}">
+    <div class="grid grid-cols-3 gap-2 items-end">
+      <div>
+        <label class="block text-sm font-medium text-gray-700">Name*</label>
+        <input type="text" name="servers[${serverIndex}].installation.env[${envIndex}].name" required
+          class="w-full px-2 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+          placeholder="ENV_VAR_NAME">
+      </div>
+      <div>
+        <label class="block text-sm font-medium text-gray-700">Default Value</label>
+        <input type="text" name="servers[${serverIndex}].installation.env[${envIndex}].default"
+          class="w-full px-2 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+          placeholder="Default value">
+      </div>
+      <div class="flex items-center gap-2">
+        <label class="inline-flex items-center text-sm">
+          <input type="checkbox" name="servers[${serverIndex}].installation.env[${envIndex}].required"
+            class="text-blue-600 focus:ring-blue-500">
+          <span class="ml-1">Required</span>
+        </label>
+        <button type="button" onclick="removeEnvVariable(${serverIndex}, ${envIndex})"
+          class="px-2 py-1 text-red-600 hover:text-red-800">
+          <i class='bx bx-trash'></i>
+        </button>
+      </div>
+    </div>
+    <div>
+      <label class="block text-sm font-medium text-gray-700">Description</label>
+      <textarea name="servers[${serverIndex}].installation.env[${envIndex}].description" rows="2"
+        class="w-full px-2 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+        placeholder="Environment variable description"></textarea>
+    </div>
+  </div>
+`;
+
+export const serverRequirementTemplate = (serverIndex, reqIndex) => `
+  <div class="server-requirement-item p-3 border border-gray-200 rounded-lg mb-3" data-req-index="${reqIndex}">
+    <div class="grid grid-cols-2 gap-3">
+      <div>
+        <label class="block text-sm font-medium text-gray-700">Name*</label>
+        <input type="text" name="servers[${serverIndex}].requirements[${reqIndex}].name" required
+          class="w-full px-2 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+          placeholder="Package or command name">
+      </div>
+      <div>
+        <label class="block text-sm font-medium text-gray-700">Type*</label>
+        <select name="servers[${serverIndex}].requirements[${reqIndex}].type" required onchange="toggleServerAliasField(${serverIndex}, ${reqIndex})"
+          class="w-full px-2 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
+          <option value="">Select Type</option>
+          <option value="npm">NPM Package</option>
+          <option value="pip">PIP Package</option>
+          <option value="command">Command</option>
+        </select>
+      </div>
+      <div>
+        <label class="block text-sm font-medium text-gray-700">Version*</label>
+        <input type="text" name="servers[${serverIndex}].requirements[${reqIndex}].version" required
+          class="w-full px-2 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+          placeholder="e.g., latest, v\${latest}, 1.0.0">
+      </div>
+      <div>
+        <label class="block text-sm font-medium text-gray-700">Order</label>
+        <input type="number" name="servers[${serverIndex}].requirements[${reqIndex}].order" min="0"
+          class="w-full px-2 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+          placeholder="Installation order">
+      </div>
+      <div id="server-alias-field-${serverIndex}-${reqIndex}" class="hidden">
+        <label class="block text-sm font-medium text-gray-700">Alias</label>
+        <input type="text" name="servers[${serverIndex}].requirements[${reqIndex}].alias"
+          class="w-full px-2 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+          placeholder="Command alias">
+      </div>
+      <div class="col-span-2">
+        <label class="block text-sm font-medium text-gray-700">Registry*</label>
+        <select name="servers[${serverIndex}].requirements[${reqIndex}].registryType" onchange="toggleServerRegistryConfig(${serverIndex}, ${reqIndex})"
+          class="w-full px-2 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500" required>
+          <option value="">Select Registry Type</option>
+          <option value="public">Public Registry</option>
+          <option value="github">GitHub Release</option>
+          <option value="artifacts">Private Artifacts</option>
+          <option value="local">Local Registry</option>
+        </select>
+      </div>
+      
+      <div id="server-registry-config-${serverIndex}-${reqIndex}" class="col-span-2 registry-configs">
+        <!-- GitHub Registry Config -->
+        <div id="server-github-config-${serverIndex}-${reqIndex}" class="registry-config mt-3 p-2 bg-gray-50 rounded-lg hidden">
+          <h3 class="text-sm font-medium text-gray-900 mb-2">GitHub Registry Details</h3>
+          <div class="grid grid-cols-1 gap-3">
+            <div>
+              <label class="block text-sm font-medium text-gray-700">Repository*</label>
+              <input type="text" name="servers[${serverIndex}].requirements[${reqIndex}].registry.githubRelease.repository"
+                class="w-full px-2 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                placeholder="org/repo">
+            </div>
+            <div>
+              <label class="block text-sm font-medium text-gray-700">Assets Name Pattern</label>
+              <input type="text" name="servers[${serverIndex}].requirements[${reqIndex}].registry.githubRelease.assetsName"
+                class="w-full px-2 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                placeholder="package-\${latest}.zip">
+            </div>
+            <div>
+              <label class="block text-sm font-medium text-gray-700">Asset Name Pattern*</label>
+              <input type="text" name="servers[${serverIndex}].requirements[${reqIndex}].registry.githubRelease.assetName"
+                class="w-full px-2 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                placeholder="package-\${latest}.tgz">
+            </div>
+          </div>
+        </div>
+        
+        <!-- Artifacts Registry Config -->
+        <div id="server-artifacts-config-${serverIndex}-${reqIndex}" class="registry-config mt-3 p-2 bg-gray-50 rounded-lg hidden">
+          <h3 class="text-sm font-medium text-gray-900 mb-2">Private Artifacts Registry Details</h3>
+          <div class="grid grid-cols-1 gap-3">
+            <div>
+              <label class="block text-sm font-medium text-gray-700">Registry URL*</label>
+              <input type="text" name="servers[${serverIndex}].requirements[${reqIndex}].registry.artifacts.registryUrl"
+                class="w-full px-2 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                placeholder="https://artifacts.example.com">
+            </div>
+            <div>
+              <label class="block text-sm font-medium text-gray-700">Asset Name Pattern</label>
+              <input type="text" name="servers[${serverIndex}].requirements[${reqIndex}].registry.artifacts.assetName"
+                class="w-full px-2 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                placeholder="package-\${latest}.tgz">
+            </div>
+          </div>
+        </div>
+
+        <!-- Local Registry Config -->
+        <div id="server-local-config-${serverIndex}-${reqIndex}" class="registry-config mt-3 p-2 bg-gray-50 rounded-lg hidden">
+          <h3 class="text-sm font-medium text-gray-900 mb-2">Local Registry Details</h3>
+          <div class="grid grid-cols-1 gap-3">
+            <div>
+              <label class="block text-sm font-medium text-gray-700">Local Path*</label>
+              <input type="text" name="servers[${serverIndex}].requirements[${reqIndex}].registry.local.localPath"
+                class="w-full px-2 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                placeholder="/path/to/local/registry">
+            </div>
+            <div>
+              <label class="block text-sm font-medium text-gray-700">Asset Name Pattern</label>
+              <input type="text" name="servers[${serverIndex}].requirements[${reqIndex}].registry.local.assetName"
+                class="w-full px-2 py-1.5 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+                placeholder="package-\${latest}.tgz">
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <button type="button" onclick="removeServerRequirement(${serverIndex}, ${reqIndex})"
+      class="mt-2 px-2 py-1 text-red-600 hover:text-red-800 flex items-center text-sm">
+      <i class='bx bx-trash mr-1'></i>
+      Remove
+    </button>
+  </div>
+`;

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

@@ -0,0 +1,196 @@
+import { 
+  requirementTemplate,
+  serverTemplate,
+  envVariableTemplate,
+  serverRequirementTemplate 
+} from './templates.js';
+
+import {
+  state,
+  incrementRequirementCounter,
+  incrementServerCounter,
+  setEnvCounter,
+  getEnvCounter,
+  deleteEnvCounter,
+  setServerRequirementCounter,
+  getServerRequirementCounter,
+  deleteServerRequirementCounter
+} from './state.js';
+
+// UI Event Handlers
+export function addRequirement() {
+  const container = document.getElementById('requirementsList');
+  container.insertAdjacentHTML('beforeend', requirementTemplate(state.requirementCounter));
+  incrementRequirementCounter();
+}
+
+export function removeRequirement(index) {
+  const item = document.querySelector(`.requirement-item[data-index="${index}"]`);
+  if (item) {
+    item.remove();
+  }
+}
+
+export function addServer() {
+  const container = document.getElementById('serversList');
+  container.insertAdjacentHTML('beforeend', serverTemplate(state.serverCounter));
+  setEnvCounter(state.serverCounter, 0);
+  setServerRequirementCounter(state.serverCounter, 0);
+  incrementServerCounter();
+}
+
+export function removeServer(index) {
+  const item = document.querySelector(`.server-item[data-index="${index}"]`);
+  if (item) {
+    item.remove();
+    deleteEnvCounter(index);
+    deleteServerRequirementCounter(index);
+  }
+}
+
+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 removeEnvVariable(serverIndex, envIndex) {
+  const item = document.querySelector(`#envVars_${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 removeServerRequirement(serverIndex, reqIndex) {
+  const item = document.querySelector(`#server-requirements-${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) {
+  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');
+    });
+
+    // 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');
+    });
+
+    // 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 async function browseLocalSchema(index) {
+  const schemaPath = document.getElementById(`schema-path-${index}`);
+  
+  try {
+    if ('showOpenFilePicker' in window) {
+      const [fileHandle] = await window.showOpenFilePicker({
+        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';
+      input.onchange = (e) => {
+        if (e.target.files.length > 0) {
+          schemaPath.value = e.target.files[0].name;
+        }
+      };
+      input.click();
+    }
+  } catch (err) {
+    console.error('Error browsing for schema file:', err);
+  }
+}
+
+// Attach handlers to window for use in HTML
+Object.entries({
+  addRequirement,
+  removeRequirement,
+  addServer,
+  removeServer,
+  addEnvVariable,
+  removeEnvVariable,
+  addServerRequirement,
+  removeServerRequirement,
+  toggleAliasField,
+  toggleServerAliasField,
+  toggleRegistryConfig,
+  toggleServerRegistryConfig,
+  browseLocalSchema
+}).forEach(([name, fn]) => {
+  window[name] = fn;
+});