imcp 0.0.13 → 0.0.15

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

@@ -0,0 +1,343 @@
+// HTML templates for onboarding form
+// Global requirementTemplate is removed as requirements are now server-specific.
+
+/**
+ * Generates HTML for a server item.
+ * @param {number} serverIndex - The index of the server.
+ * @param {boolean} [isReadOnly=false] - If true, renders the server item as read-only.
+ * @param {object|null} [serverData=null] - Pre-existing server data (currently not used for pre-filling in template, handled by populateForm).
+ * @param {string} [serversListId='serversList'] - The ID of the servers list container this server belongs to.
+ * @returns {string} HTML string for the server item.
+ */
+export const serverTemplate = (serverIndex, isReadOnly = false, serverData = null, serversListId = 'serversList') => {
+  const disabledAttr = isReadOnly ? 'disabled' : '';
+  const readOnlyClasses = isReadOnly ? 'bg-gray-100 cursor-not-allowed opacity-70' : '';
+  const hideButtonClass = isReadOnly ? 'hidden' : ''; // Class to hide buttons
+
+  // Determine which serversListId this server belongs to by checking the active tab's form
+  // This is a bit of a hack; ideally, addServer in uiHandlers would pass this.
+  // For now, assume 'serversList' or 'existingCategoryServersList' based on context where addServer is called.
+  // The onclick handlers for removeServer, addServerRequirement, addEnvVariable will need to be updated
+  // in uiHandlers.js to correctly pass the serversListId if they are to be generic.
+  // For now, the template will use the serverIndex, and the global functions will need to know the context.
+  // Let's assume the global functions are called with context from index.js or uiHandlers.js.
+  // The onclicks in the template will call the global functions which are now context-aware.
+  // e.g. onclick="removeServer(${serverIndex}, 'serversList')" - this needs to be dynamic.
+  // For simplicity, let's assume the global functions in uiHandlers.js will determine the active list.
+  // Or, the functions like removeServer are already modified to accept serversListId.
+  // The `addServer` in `uiHandlers.js` is called with `serversListId`.
+  // The buttons here call global functions. These global functions (removeServer, addEnvVariable, etc.)
+  // will need to be aware of the active serversListId.
+  // This can be done by having uiHandlers.js set a global 'activeServersListId' or by modifying
+  // each function to accept it and ensuring the HTML onclicks pass it.
+  // The latter is cleaner. The `onclick` in HTML should be `removeServer(${serverIndex}, 'CURRENT_LIST_ID')`.
+  // This means `uiHandlers.addServer` needs to inject the correct `serversListId` into these onclicks.
+
+  // For now, let's keep the onclicks simple and assume uiHandlers.js functions will manage context.
+  // The `action-button-in-server` class is added to buttons that should be hidden in read-only mode.
+
+  return `
+  <div class="server-item p-4 border border-gray-300 rounded-lg mb-6 bg-white shadow" data-index="${serverIndex}">
+    <div id="${serversListId}-server-header-${serverIndex}" class="server-header-toggle flex justify-between items-center mb-3 cursor-pointer"
+         role="button" tabindex="0"
+         aria-expanded="false" aria-controls="${serversListId}-server-content-${serverIndex}"
+         onclick="window.toggleSectionContent('${serversListId}-server-content-${serverIndex}', this.querySelector('i.toggle-icon'), this)"
+         onkeydown="if(event.key==='Enter' || event.key===' ') { window.toggleSectionContent('${serversListId}-server-content-${serverIndex}', this.querySelector('i.toggle-icon'), this); event.preventDefault(); }">
+        <h3 id="${serversListId}-server-title-${serverIndex}" class="text-lg font-semibold text-gray-800">MCP Server #${serverIndex + 1} ${isReadOnly ? '(Read-only)' : ''}</h3>
+        <div class="flex items-center">
+          <button type="button" onclick="event.stopPropagation(); removeServer(${serverIndex}, '${serversListId}')"
+            class="action-button-in-server p-1.5 text-sm text-red-600 hover:text-red-800 hover:bg-red-50 rounded-md flex items-center mr-2 ${hideButtonClass}" title="Remove Server">
+            <i class='bx bx-trash text-lg'></i>
+          </button>
+          <i class='bx bxs-chevron-down text-xl toggle-icon'></i>
+        </div>
+    </div>
+    <div id="${serversListId}-server-content-${serverIndex}" class="collapsible-content server-content-scrollable hidden" role="region" aria-labelledby="${serversListId}-server-title-${serverIndex}">
+
+    <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">Server Name*</label>
+        <input type="text" name="servers[${serverIndex}].name" 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., ado-tools-server">
+      </div>
+      <div>
+        <label class="block text-sm font-medium text-gray-700 mb-1">Mode*</label>
+        <select name="servers[${serverIndex}].mode" 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}">
+          <option value="stdio">stdio</option>
+          <option value="sse">sse</option>
+        </select>
+      </div>
+      <div class="md:col-span-2">
+        <label class="block text-sm font-medium text-gray-700 mb-1">Description*</label>
+        <textarea name="servers[${serverIndex}].description" required rows="3" ${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="Detailed description of the server's capabilities"></textarea>
+      </div>
+       <div class="md:col-span-2 flex gap-x-4 items-end">
+        <div class="flex-grow">
+          <label class="block text-sm font-medium text-gray-700 mb-1">Schema File Path</label>
+          <input type="text" name="servers[${serverIndex}].schemas" id="schema-path-${serverIndex}" ${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., ./schemas/my_server_schema.json">
+        </div>
+        <button type="button" onclick="browseLocalSchema(${serverIndex}, '${serversListId}')" ${disabledAttr}
+            class="action-button-in-server px-4 py-2 text-sm bg-gray-100 hover:bg-gray-200 border border-gray-300 rounded-lg whitespace-nowrap ${hideButtonClass} ${isReadOnly ? 'opacity-50 cursor-not-allowed' : ''}">
+            Browse Local
+        </button>
+        </div>
+      <div class="md:col-span-2">
+        <label class="block text-sm font-medium text-gray-700 mb-1">Repository URL</label>
+        <input type="url" name="servers[${serverIndex}].repository" ${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://github.com/org/repo">
+      </div>
+    </div>
+
+    <!-- Package Dependencies -->
+    <div class="mt-4 p-3 bg-gray-50 rounded-lg border border-gray-200">
+      <h4 id="${serversListId}-deps-header-${serverIndex}" class="text-md font-semibold text-gray-700 mb-2 flex justify-between items-center cursor-pointer"
+          role="button" tabindex="0"
+          aria-expanded="false" aria-controls="${serversListId}-server-deps-content-${serverIndex}"
+          onclick="window.toggleSectionContent('${serversListId}-server-deps-content-${serverIndex}', this.querySelector('i'), this)"
+          onkeydown="if(event.key==='Enter' || event.key===' ') { window.toggleSectionContent('${serversListId}-server-deps-content-${serverIndex}', this.querySelector('i'), this); event.preventDefault(); }">
+        <span>Package Dependencies</span>
+        <i class='bx bxs-chevron-down text-xl'></i>
+      </h4>
+      <div id="${serversListId}-server-deps-content-${serverIndex}" class="collapsible-content mt-2 hidden" role="region" aria-labelledby="${serversListId}-deps-header-${serverIndex}">
+        <div id="server-requirements-list-${serverIndex}" class="space-y-4">
+            <!-- Server requirements will be populated here by serverRequirementTemplate -->
+        </div>
+        <button type="button" onclick="addServerRequirement(${serverIndex}, '${serversListId}', ${isReadOnly})"
+            class="action-button-in-server mt-3 px-3 py-1.5 text-sm border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-100 flex items-center ${hideButtonClass}">
+            <i class='bx bx-plus mr-1'></i> Add Dependency
+        </button>
+      </div>
+    </div>
+
+    <!-- Startup Configuration -->
+    <div class="mt-4 p-3 bg-gray-50 rounded-lg border border-gray-200">
+      <h4 id="${serversListId}-startup-header-${serverIndex}" class="text-md font-semibold text-gray-700 mb-2 flex justify-between items-center cursor-pointer"
+          role="button" tabindex="0"
+          aria-expanded="false" aria-controls="${serversListId}-installation-content-${serverIndex}"
+          onclick="window.toggleSectionContent('${serversListId}-installation-content-${serverIndex}', this.querySelector('i'), this)"
+          onkeydown="if(event.key==='Enter' || event.key===' ') { window.toggleSectionContent('${serversListId}-installation-content-${serverIndex}', this.querySelector('i'), this); event.preventDefault(); }">
+        <span>Startup Configuration</span>
+        <i class='bx bxs-chevron-down text-xl'></i>
+      </h4>
+      <div id="${serversListId}-installation-content-${serverIndex}" class="collapsible-content mt-2 hidden" role="region" aria-labelledby="${serversListId}-startup-header-${serverIndex}">
+        <div id="installation-config-${serverIndex}">
+          <!-- Installation fields will be rendered here based on mode by renderInstallationConfig -->
+        </div>
+      </div>
+    </div>
+
+    <!-- Environment Variables -->
+    <div class="mt-4 p-3 bg-gray-50 rounded-lg border border-gray-200" id="env-vars-block-${serverIndex}">
+      <h4 id="${serversListId}-envars-header-${serverIndex}" class="text-md font-semibold text-gray-700 mb-2 flex justify-between items-center cursor-pointer"
+          role="button" tabindex="0"
+          aria-expanded="false" aria-controls="${serversListId}-env-vars-content-${serverIndex}"
+          onclick="window.toggleSectionContent('${serversListId}-env-vars-content-${serverIndex}', this.querySelector('i'), this)"
+          onkeydown="if(event.key==='Enter' || event.key===' ') { window.toggleSectionContent('${serversListId}-env-vars-content-${serverIndex}', this.querySelector('i'), this); event.preventDefault(); }">
+        <span>Environment Variables</span>
+        <i class='bx bxs-chevron-down text-xl'></i>
+      </h4>
+      <div id="${serversListId}-env-vars-content-${serverIndex}" class="collapsible-content mt-2 hidden" role="region" aria-labelledby="${serversListId}-envars-header-${serverIndex}">
+        <div id="envVarsContainer_${serverIndex}" class="space-y-3">
+          <!-- Environment variables will be added here by envVariableTemplate -->
+        </div>
+        <button type="button" onclick="addEnvVariable(${serverIndex}, '${serversListId}', ${isReadOnly})"
+          class="action-button-in-server mt-3 px-3 py-1.5 text-sm border border-gray-300 rounded-lg text-gray-700 hover:bg-gray-100 flex items-center ${hideButtonClass}">
+          <i class='bx bx-plus mr-1'></i> Add Environment Variable
+        </button>
+      </div>
+    </div>
+    </div><!-- Closing server-content-${serverIndex} -->
+  </div>
+`;
+};
+
+/**
+ * Generates HTML for an environment variable item.
+ * @param {number} serverIndex - The index of the server.
+ * @param {number} envIndex - The index of the environment variable.
+ * @param {boolean} [isReadOnly=false] - If true, renders the item as read-only.
+ * @param {string} [serversListId='serversList'] - The ID of the servers list container.
+ * @returns {string} HTML string for the environment variable item.
+ */
+export const envVariableTemplate = (serverIndex, envIndex, isReadOnly = false, serversListId = 'serversList') => {
+  const disabledAttr = isReadOnly ? 'disabled' : '';
+  const readOnlyClasses = isReadOnly ? 'bg-gray-100 cursor-not-allowed opacity-70' : '';
+  const hideButtonClass = isReadOnly ? 'hidden' : '';
+
+  return `
+  <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 ${disabledAttr}
+          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 ${readOnlyClasses}"
+          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" ${disabledAttr}
+          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 ${readOnlyClasses}"
+          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" ${disabledAttr}
+            class="text-blue-600 focus:ring-blue-500 ${isReadOnly ? 'opacity-70 cursor-not-allowed' : ''}">
+          <span class="ml-1 ${isReadOnly ? 'text-gray-500' : ''}">Required</span>
+        </label>
+        <button type="button" onclick="removeEnvVariable(${serverIndex}, ${envIndex}, '${serversListId}')"
+          class="action-button-in-env px-2 py-1 text-red-600 hover:text-red-800 ${hideButtonClass}">
+          <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" ${disabledAttr}
+        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 ${readOnlyClasses}"
+        placeholder="Environment variable description"></textarea>
+    </div>
+  </div>
+`;
+};
+
+/**
+ * Generates HTML for a server requirement item.
+ * @param {number} serverIndex - The index of the server.
+ * @param {number} reqIndex - The index of the requirement.
+ * @param {boolean} [isReadOnly=false] - If true, renders the item as read-only.
+ * @param {string} [serversListId='serversList'] - The ID of the servers list container.
+ * @returns {string} HTML string for the server requirement item.
+ */
+export const serverRequirementTemplate = (serverIndex, reqIndex, isReadOnly = false, serversListId = 'serversList') => {
+  const disabledAttr = isReadOnly ? 'disabled' : '';
+  const readOnlyClasses = isReadOnly ? 'bg-gray-100 cursor-not-allowed opacity-70' : '';
+  const hideButtonClass = isReadOnly ? 'hidden' : '';
+
+  return `
+  <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 ${disabledAttr}
+          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 ${readOnlyClasses}"
+          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}, '${serversListId}')" ${disabledAttr}
+          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 ${readOnlyClasses}">
+          <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 ${disabledAttr}
+          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 ${readOnlyClasses}"
+          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" ${disabledAttr}
+          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 ${readOnlyClasses}"
+          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" ${disabledAttr}
+          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 ${readOnlyClasses}"
+          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}, '${serversListId}')" ${disabledAttr}
+          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 ${readOnlyClasses}" required>
+          <option value="public" selected>Public Registry</option>
+          <option value="github">GitHub Release</option>
+          <option value="artifacts">Private Artifacts</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" ${disabledAttr}
+                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 ${readOnlyClasses}"
+                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" ${disabledAttr}
+                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 ${readOnlyClasses}"
+                placeholder="package-\${latest}.zip (e.g. for multiple assets)">
+            </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" ${disabledAttr}
+                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 ${readOnlyClasses}"
+                placeholder="package-\${latest}.tgz (specific asset)">
+            </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 Name*</label>
+             <input type="text" name="servers[${serverIndex}].requirements[${reqIndex}].registry.artifacts.registryName" ${disabledAttr}
+               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 ${readOnlyClasses}"
+               placeholder="My-Artifacts-Registry">
+           </div>
+           <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" ${disabledAttr}
+               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 ${readOnlyClasses}"
+               placeholder="https://artifacts.example.com">
+           </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 Path 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" ${disabledAttr}
+                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 ${readOnlyClasses}"
+                placeholder="/path/to/local/registry_or_file">
+            </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" ${disabledAttr}
+                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 ${readOnlyClasses}"
+                placeholder="package-\${latest}.tgz (if localPath is a dir)">
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <button type="button" onclick="removeServerRequirement(${serverIndex}, ${reqIndex}, '${serversListId}')"
+      class="action-button-in-req mt-2 px-2 py-1 text-red-600 hover:text-red-800 flex items-center text-sm ${hideButtonClass}">
+      <i class='bx bx-trash mr-1'></i>
+      Remove
+    </button>
+  </div>
+`;
+};