imcp 0.1.7 → 0.1.8-dev

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

@@ -1,342 +0,0 @@
-// 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 isServerAdhoc = serverData?.systemTags?.adhoc === 'true';
-  // Server is fully editable if the category isn't read-only OR if the server itself is adhoc.
-  const makeServerFullyEditable = !isReadOnly || isServerAdhoc;
-  // DEBUG: console.log(`[serverTemplate] ServerIndex: ${serverIndex}, isContextReadOnly(isReadOnly): ${isReadOnly}, isServerAdhoc: ${isServerAdhoc}, makeServerFullyEditable: ${makeServerFullyEditable}, flag for addReq/addEnv: ${!makeServerFullyEditable}`);
-
-  const disabledAttr = makeServerFullyEditable ? '' : 'disabled';
-  const readOnlyClasses = makeServerFullyEditable ? '' : 'bg-gray-100 cursor-not-allowed opacity-70';
-
-  // "Remove Server" button should be hidden if the server is NOT fully editable.
-  // A server is fully editable if the context isn't read-only OR if it's an adhoc server.
-  const hideRemoveServerButtonClass = !makeServerFullyEditable ? 'hidden' : '';
-  // Other action buttons (add dependency, add env var) also respect makeServerFullyEditable.
-  const hideActionButtonsClass = !makeServerFullyEditable ? 'hidden' : '';
-
-
-  // Note: The 'serversListId' parameter is crucial for ensuring that actions (like removeServer, addEnvVariable)
-  // are correctly scoped to the server list in the current tab (e.g., 'serversList' or 'existingCategoryServersList').
-  // The onclick handlers in this template dynamically include this 'serversListId'.
-
-  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}${isServerAdhoc ? ' <span class="text-sm text-blue-600 ml-1">(Adhoc - Editable)</span>' : ''}</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 ${hideRemoveServerButtonClass}" title="Remove Server">
-           <i class='bx bx-trash text-lg'></i>
-         </button>
-         <button type="button" onclick="event.stopPropagation(); window.duplicateServer(${serverIndex}, '${serversListId}')"
-           class="action-button-in-server duplicate-mcp-server-button p-1.5 text-sm text-blue-600 hover:text-blue-800 hover:bg-blue-50 rounded-md flex items-center mr-2" title="Duplicate Server">
-           <i class='bx bx-copy 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
-            <span class="text-xs text-gray-500 ml-1" title="Optional for listing available tools, please fill full path of the schema file">
-              <i class='bx bx-info-circle'></i> Optional
-            </span>
-          </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., /Users/xxx/schemas/my_server_schema.json">
-        </div>
-        </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}', ${!makeServerFullyEditable})"
-            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 ${hideActionButtonsClass}">
-            <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}', ${!makeServerFullyEditable})"
-          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 ${hideActionButtonsClass}">
-          <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') => {
-  // DEBUG: console.log(`[serverRequirementTemplate] ServerIndex: ${serverIndex}, ReqIndex: ${reqIndex}, isReadOnly received: ${isReadOnly}`);
-  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="nuget">Nuget 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>
-`;
-};