imcp 0.0.14 → 0.0.16

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

@@ -1,270 +1,239 @@
 // 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>
+// Global requirementTemplate is removed as requirements are now server-specific.
 
-      <!-- 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>
+/**
+ * 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>
-    
-    <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>
-`;
+    <div id="${serversListId}-server-content-${serverIndex}" class="collapsible-content server-content-scrollable hidden" role="region" aria-labelledby="${serversListId}-server-title-${serverIndex}">
 
-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 class="grid grid-cols-1 md:grid-cols-2 gap-4">
       <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">
+        <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">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">
+        <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="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 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="col-span-2 flex gap-2">
+       <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">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">
+          <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>
-        <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">
+        <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>
-          <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>
+        </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>
 
-    <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">
+    <!-- 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>
 
-    <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 -->
+    <!-- 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>
-      <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>
+    <!-- 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' : '';
 
-export const envVariableTemplate = (serverIndex, envIndex) => `
+  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
-          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"
+        <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"
-          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"
+        <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"
-            class="text-blue-600 focus:ring-blue-500">
-          <span class="ml-1">Required</span>
+          <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})"
-          class="px-2 py-1 text-red-600 hover:text-red-800">
+        <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"
-        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"
+      <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' : '';
 
-export const serverRequirementTemplate = (serverIndex, reqIndex) => `
+  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
-          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"
+        <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})"
-          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">
+        <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>
@@ -273,31 +242,29 @@ export const serverRequirementTemplate = (serverIndex, reqIndex) => `
       </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"
+        <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"
-          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"
+        <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"
-          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"
+        <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})"
-          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>
+        <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>
-          <option value="local">Local Registry</option>
         </select>
       </div>
       
@@ -308,68 +275,69 @@ export const serverRequirementTemplate = (serverIndex, reqIndex) => `
           <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"
+              <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"
-                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">
+              <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"
-                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">
+              <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 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 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 Registry Details</h3>
+          <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"
-                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">
+              <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"
-                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">
+              <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})"
-      class="mt-2 px-2 py-1 text-red-600 hover:text-red-800 flex items-center text-sm">
+    <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>
-`;
+`;
+};