imcp 0.0.17 → 0.0.18

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

@@ -54,19 +54,61 @@ function reindexServers(serversListId = 'serversList') {
 
     const titleElement = serverItem.querySelector('h3');
     if (titleElement) {
+      const originalTextContent = titleElement.textContent || '';
       const baseTitle = `MCP Server #${newServerIndex + 1}`;
-      const readOnlySuffix = titleElement.textContent.includes('(Read-only)') ? ' (Read-only)' : '';
-      titleElement.textContent = `${baseTitle}${readOnlySuffix}`;
+      let suffix = '';
+      if (originalTextContent.includes('(Adhoc - Editable)')) {
+        suffix = ' <span class="text-sm text-blue-600 ml-1">(Adhoc - Editable)</span>';
+      } else if (originalTextContent.includes('(Read-only)')) {
+        suffix = ' (Read-only)';
+      }
+      // Use innerHTML to preserve the span if it's an adhoc server
+      titleElement.innerHTML = `${baseTitle}${suffix}`;
     }
 
     // Update onclick handlers
+    // Ensure the server header toggle onclick is correctly re-indexed for its ID parameters
+    const headerToggle = serverItem.querySelector(`#${serversListId}-server-header-${oldServerIndex}`);
+    if (headerToggle) {
+        headerToggle.id = `${serversListId}-server-header-${newServerIndex}`;
+        const oldContentId = `${serversListId}-server-content-${oldServerIndex}`;
+        const newContentId = `${serversListId}-server-content-${newServerIndex}`;
+        let onclickAttr = headerToggle.getAttribute('onclick');
+        if (onclickAttr) {
+            onclickAttr = onclickAttr.replace(new RegExp(oldContentId.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'), 'g'), newContentId);
+            headerToggle.setAttribute('onclick', onclickAttr);
+        }
+        let onkeydownAttr = headerToggle.getAttribute('onkeydown');
+        if (onkeydownAttr) {
+            onkeydownAttr = onkeydownAttr.replace(new RegExp(oldContentId.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'), 'g'), newContentId);
+            headerToggle.setAttribute('onkeydown', onkeydownAttr);
+        }
+        headerToggle.setAttribute('aria-controls', newContentId);
+    }
+    // Update title ID for aria-labelledby
+    const titleForAria = serverItem.querySelector(`#${serversListId}-server-title-${oldServerIndex}`);
+    if (titleForAria) {
+        titleForAria.id = `${serversListId}-server-title-${newServerIndex}`;
+    }
+    const contentRegion = serverItem.querySelector(`#${serversListId}-server-content-${oldServerIndex}`);
+    if (contentRegion) {
+        contentRegion.setAttribute('aria-labelledby', `${serversListId}-server-title-${newServerIndex}`);
+    }
+
+
     serverItem.querySelectorAll('[onclick]').forEach(element => {
       const onclickAttr = element.getAttribute('onclick');
       if (!onclickAttr) return;
 
+      // Skip the header toggle as it's handled above to be more precise with ID replacement
+      if (element.id === `${serversListId}-server-header-${newServerIndex}`) return;
+
       const updatedOnclick = onclickAttr
         .replace(new RegExp(`\\((\\s*)${oldServerIndex}(\\s*[,\\)])`, 'g'), `($1${newServerIndex}$2`)
-        .replace(new RegExp(`(${serversListId}-(?:server|installation|env-vars)-content-${oldServerIndex})`, 'g'), `$1${newServerIndex}`);
+        // More specific replacement for content IDs to avoid accidental replacements
+        .replace(new RegExp(`${serversListId}-server-deps-content-${oldServerIndex}`.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'), 'g'), `${serversListId}-server-deps-content-${newServerIndex}`)
+        .replace(new RegExp(`${serversListId}-installation-content-${oldServerIndex}`.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'), 'g'), `${serversListId}-installation-content-${newServerIndex}`)
+        .replace(new RegExp(`${serversListId}-env-vars-content-${oldServerIndex}`.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'), 'g'), `${serversListId}-env-vars-content-${newServerIndex}`);
 
       element.setAttribute('onclick', updatedOnclick);
     });
@@ -137,13 +179,18 @@ export function addServer(serversListId = 'serversList', isContextGenerallyReadO
 
   const newServerIndex = getServerCounter(serversListId);
   let actualReadOnlyForThisServer;
+  const isServerAdhoc = serverData?.systemTags?.adhoc === 'true';
 
-  if (!isContextGenerallyReadOnly) {
+  if (isServerAdhoc) {
+    // Adhoc servers are always editable, regardless of the general context.
+    actualReadOnlyForThisServer = false;
+  } else if (!isContextGenerallyReadOnly) {
     // Context is not generally read-only (e.g., creating a brand new category,
     // or user clicked "Add Server" button when no specific read-only category context applies).
     actualReadOnlyForThisServer = false;
   } else {
-    // Context IS generally read-only (e.g., an existing category was selected, or we are populating from JSON for such a category).
+    // Context IS generally read-only AND the server is NOT adhoc.
+    // Determine read-only status based on whether it's an original server or a newly added one.
     if (state.originalServerNamesForFormPopulation) {
       // We are in the process of toggling from JSON view back to Form view for an existing category.
       // state.originalServerNamesForFormPopulation contains names of servers that were part of the category *before* any UI/JSON edits.
@@ -152,7 +199,6 @@ export function addServer(serversListId = 'serversList', isContextGenerallyReadO
         actualReadOnlyForThisServer = true;
       } else {
         // This serverData (from JSON) is new (wasn't in originalServerNamesForFormPopulation). It should be editable.
-        // This also covers cases where serverData might not have a name yet if added directly in JSON.
         actualReadOnlyForThisServer = false;
       }
     } else {
@@ -160,7 +206,7 @@ export function addServer(serversListId = 'serversList', isContextGenerallyReadO
       // 1. Initial population of an existing category's servers (serverData will be provided).
       // 2. User clicked the "Add Server" button while an existing category context is active (serverData will be null).
       if (serverData) {
-        // Case 1: Initial population of an existing server from category data. Should be read-only.
+        // Case 1: Initial population of an existing server from category data. Should be read-only (unless it was adhoc, handled above).
         actualReadOnlyForThisServer = true;
       } else {
         // Case 2: User clicked "Add Server" button. The new server item should be editable.
@@ -168,8 +214,10 @@ export function addServer(serversListId = 'serversList', isContextGenerallyReadO
       }
     }
   }
-
-  container.insertAdjacentHTML('beforeend', serverTemplate(newServerIndex, actualReadOnlyForThisServer, serverData, serversListId));
+  // `isContextGenerallyReadOnly`: Influences initial template state for some UI elements (e.g., button visibility).
+  // `actualReadOnlyForThisServer`: Determines if fields should be disabled and is passed to setupReadOnlyState.
+  // `serverData`: Used by the template for initial adhoc title span, and passed to setupReadOnlyState for more checks.
+  container.insertAdjacentHTML('beforeend', serverTemplate(newServerIndex, isContextGenerallyReadOnly, serverData, serversListId));
 
   setEnvCounter(serversListId, newServerIndex, 0);
   setServerRequirementCounter(serversListId, newServerIndex, 0);
@@ -177,8 +225,20 @@ export function addServer(serversListId = 'serversList', isContextGenerallyReadO
 
   const serverItem = container.querySelector(`.server-item[data-index="${newServerIndex}"]`);
   if (serverItem) {
+    if (serverData && serverData.systemTags) { // Case 1: Populating from existing serverData that has systemTags
+      serverItem.dataset.systemTags = JSON.stringify(serverData.systemTags);
+    } else if (serverData && !serverData.systemTags) { // Case 3: Populating from serverData that *lacks* systemTags
+      // Ensure no stale adhoc tag if the DOM element was somehow reused and had it previously.
+      delete serverItem.dataset.systemTags;
+    } else if (!serverData) { // Case 2: Adding a brand new server via "Add Server" button click (serverData is null)
+      // A brand new server is NOT adhoc by default. It becomes adhoc if modified (e.g. via JSON).
+      // This fulfills part of Req 3: newly added one in create-server tab should not have systemTags.
+      // And implicitly part of Req 2: new server in create-category tab also won't have systemTags.
+      delete serverItem.dataset.systemTags;
+    }
     setupServerMode(serverItem, newServerIndex, serversListId, actualReadOnlyForThisServer, serverData);
-    setupReadOnlyState(serverItem, actualReadOnlyForThisServer, serversListId, newServerIndex);
+    // Pass serverData to setupReadOnlyState so it can accurately determine adhoc status for title.
+    setupReadOnlyState(serverItem, actualReadOnlyForThisServer, serverData, serversListId, newServerIndex);
 
     // Default expand Package Dependencies, Startup Configuration, and Environment Variables sections
     const sections = [
@@ -247,15 +307,56 @@ function setupServerMode(serverItem, serverIndex, serversListId, isReadOnly, ser
   renderInstallationConfig(serverIndex, serversListId, modeSelect.value, isReadOnly, serverData?.installation);
 }
 
-function setupReadOnlyState(serverItem, isReadOnly, serversListId, serverIndex) {
-  if (isReadOnly) {
+// `isEffectivelyReadOnly` determines if the fields within this server item should be disabled.
+// `serverDataFromPopulation` is the original server data object passed during population, used to check initial adhoc status.
+function setupReadOnlyState(serverItem, isEffectivelyReadOnly, serverDataFromPopulation, serversListId, serverIndex) {
+  const titleElement = serverItem.querySelector(`#${serversListId}-server-title-${serverIndex}`);
+  const baseTitle = `MCP Server #${serverIndex + 1}`;
+  let isAdhocForTitle = serverDataFromPopulation?.systemTags?.adhoc === 'true';
+
+  // Double-check adhoc status from dataset if serverDataFromPopulation doesn't indicate it
+  // (e.g. if it became adhoc after JSON edit and re-population)
+  if (!isAdhocForTitle && serverItem.dataset.systemTags) {
+    try {
+      const tags = JSON.parse(serverItem.dataset.systemTags);
+      if (tags.adhoc === "true") {
+        isAdhocForTitle = true;
+      }
+    } catch (e) { /* ignore parsing error for title determination */ }
+  }
+
+  if (isEffectivelyReadOnly) {
+    if (titleElement) {
+      if (!isAdhocForTitle) {
+        titleElement.innerHTML = `${baseTitle} (Read-only)`;
+      } else {
+        // For adhoc servers, the template is responsible for the "(Adhoc - Editable)" span.
+        // If it's somehow missing and it's adhoc, ensure it's present.
+        // This situation should be rare if template logic is correct.
+        if (!titleElement.querySelector('span.text-blue-600')) {
+             titleElement.innerHTML = `${baseTitle} <span class="text-sm text-blue-600 ml-1">(Adhoc - Editable)</span>`;
+        } else {
+            // Ensure base title is correct if adhoc span is already there
+            const adhocSpanHTML = titleElement.querySelector('span.text-blue-600').outerHTML;
+            titleElement.innerHTML = `${baseTitle} ${adhocSpanHTML}`;
+        }
+      }
+    }
+    // Disable all input fields within this specific server item
     serverItem.querySelectorAll('input, select, textarea').forEach(el => {
-      el.disabled = true;
-      el.classList.add('bg-gray-100', 'cursor-not-allowed', 'opacity-70');
+      // Check if the element is part of a sub-item (like env var or requirement)
+      // These sub-items have their own read-only logic handled by their add functions.
+      // We only want to disable the main server fields here.
+      if (!el.closest('.env-var-item') && !el.closest('.server-requirement-item')) {
+        el.disabled = true;
+        el.classList.add('bg-gray-100', 'cursor-not-allowed', 'opacity-70');
+      }
     });
 
+    // Hide all action buttons (Add Dependency, Add Env Var, Remove Server) for this server if it's read-only.
     serverItem.querySelectorAll('.action-button-in-server').forEach(btn => {
-      btn.style.display = 'none';
+        btn.style.display = 'none';
+        btn.classList.add('hidden');
     });
 
     // Expand server content and all key sections
@@ -275,18 +376,42 @@ function setupReadOnlyState(serverItem, isReadOnly, serversListId, serverIndex)
         iconElement.classList.add('bxs-chevron-up');
       }
     });
-  } else {
+  } else { // Server is effectively editable
+    if (titleElement) {
+      // Server is editable. Template handles the adhoc span.
+      // We just ensure the base title is correct.
+      // If adhoc, the template adds the span. If not adhoc, it's just the base title.
+      if (isAdhocForTitle) {
+        // Check if the adhoc span is already there from the template.
+        // If not (e.g. server became adhoc after initial render and this is a re-evaluation), add it.
+        if (!titleElement.querySelector('span.text-blue-600')) {
+            titleElement.innerHTML = `${baseTitle} <span class="text-sm text-blue-600 ml-1">(Adhoc - Editable)</span>`;
+        } else {
+            // Ensure base title is correct if adhoc span is already there
+            const adhocSpanHTML = titleElement.querySelector('span.text-blue-600').outerHTML;
+            titleElement.innerHTML = `${baseTitle} ${adhocSpanHTML}`;
+        }
+      } else {
+        // Editable and not adhoc, just the base title.
+        titleElement.innerHTML = baseTitle;
+      }
+    }
     setTimeout(() => {
+      // Enable main server fields
       serverItem.querySelectorAll('input, select, textarea').forEach(el => {
-        el.disabled = false;
-        el.removeAttribute('readonly');
-        el.classList.remove('bg-gray-100', 'cursor-not-allowed', 'opacity-70');
+         if (!el.closest('.env-var-item') && !el.closest('.server-requirement-item')) {
+            el.disabled = false;
+            el.removeAttribute('readonly'); // Ensure readonly is also removed
+            el.classList.remove('bg-gray-100', 'cursor-not-allowed', 'opacity-70');
+        }
       });
 
+      // Show ALL action buttons for this server (Add Dependency, Add Env Var, Remove Server)
+      // as the server is determined to be effectively editable.
       serverItem.querySelectorAll('.action-button-in-server').forEach(btn => {
-        btn.style.display = '';
-        btn.disabled = false;
-        btn.classList.remove('hidden', 'opacity-50', 'cursor-not-allowed');
+          btn.style.display = 'flex'; // Or 'inline-flex' or whatever its default visible display is
+          btn.disabled = false;
+          btn.classList.remove('hidden', 'opacity-50', 'cursor-not-allowed');
       });
     }, 0);
   }
@@ -361,24 +486,19 @@ export function removeServer(serverIndexToRemove, serversListId = 'serversList')
   }
 }
 
-export function addEnvVariable(serverIndex, serversListId = 'serversList', isReadOnly = false) {
+// `isServerEffectivelyReadOnly` is passed to determine if the new env var item itself should be read-only.
+// This would be true if the parent server is non-adhoc and in a read-only category.
+export function addEnvVariable(serverIndex, serversListId = 'serversList', isServerEffectivelyReadOnly = false) {
   const container = document.querySelector(`#${serversListId} .server-item[data-index="${serverIndex}"] #envVarsContainer_${serverIndex}`);
   if (!container) return -1;
 
   const envIndex = getEnvCounter(serversListId, serverIndex);
-  container.insertAdjacentHTML('beforeend', envVariableTemplate(serverIndex, envIndex, isReadOnly, serversListId));
+  // Pass `isServerEffectivelyReadOnly` to the template for the new env var item.
+  container.insertAdjacentHTML('beforeend', envVariableTemplate(serverIndex, envIndex, isServerEffectivelyReadOnly, serversListId));
   setEnvCounter(serversListId, serverIndex, envIndex + 1);
 
-  if (isReadOnly) {
-    const envItem = container.querySelector(`.env-var-item[data-env-index="${envIndex}"]`);
-    if (envItem) {
-      envItem.querySelectorAll('input, select, textarea').forEach(el => {
-        el.disabled = true;
-        el.classList.add('bg-gray-100', 'cursor-not-allowed', 'opacity-70');
-      });
-      envItem.querySelectorAll('.action-button-in-env').forEach(btn => btn.style.display = 'none');
-    }
-  }
+  // The template itself handles disabling fields if isServerEffectivelyReadOnly is true.
+  // No need for additional logic here to disable fields of the newly added item.
 
   return envIndex;
 }
@@ -388,24 +508,18 @@ export function removeEnvVariable(serverIndex, envIndex, serversListId = 'server
   if (item) item.remove();
 }
 
-export function addServerRequirement(serverIndex, serversListId = 'serversList', isReadOnly = false) {
+// `isServerEffectivelyReadOnly` is passed to determine if the new requirement item itself should be read-only.
+export function addServerRequirement(serverIndex, serversListId = 'serversList', isServerEffectivelyReadOnly = false) {
+  console.log(`[addServerRequirement] ServerIndex: ${serverIndex}, isServerEffectivelyReadOnly received: ${isServerEffectivelyReadOnly}`); // DEBUG
   const container = document.querySelector(`#${serversListId} .server-item[data-index="${serverIndex}"] #server-requirements-list-${serverIndex}`);
   if (!container) return -1;
 
   const reqIndex = getServerRequirementCounter(serversListId, serverIndex);
-  container.insertAdjacentHTML('beforeend', serverRequirementTemplate(serverIndex, reqIndex, isReadOnly, serversListId));
+  // Pass `isServerEffectivelyReadOnly` to the template for the new requirement item.
+  container.insertAdjacentHTML('beforeend', serverRequirementTemplate(serverIndex, reqIndex, isServerEffectivelyReadOnly, serversListId));
   setServerRequirementCounter(serversListId, serverIndex, reqIndex + 1);
 
-  if (isReadOnly) {
-    const reqItem = container.querySelector(`.server-requirement-item[data-req-index="${reqIndex}"]`);
-    if (reqItem) {
-      reqItem.querySelectorAll('input, select, textarea').forEach(el => {
-        el.disabled = true;
-        el.classList.add('bg-gray-100', 'cursor-not-allowed', 'opacity-70');
-      });
-      reqItem.querySelectorAll('.action-button-in-req').forEach(btn => btn.style.display = 'none');
-    }
-  }
+  // The template itself handles disabling fields if isServerEffectivelyReadOnly is true.
 
   toggleServerAliasField(serverIndex, reqIndex, serversListId);
   toggleServerRegistryConfig(serverIndex, reqIndex, serversListId);
@@ -444,33 +558,6 @@ export function toggleServerRegistryConfig(serverIndex, reqIndex, serversListId
   });
 }
 
-export async function browseLocalSchema(serverIndex, serversListId = 'serversList') {
-  const schemaPath = document.querySelector(`#${serversListId} .server-item[data-index="${serverIndex}"] #schema-path-${serverIndex}`);
-  if (!schemaPath) return;
-
-  try {
-    if ('showOpenFilePicker' in window) {
-      const [fileHandle] = await window.showOpenFilePicker({
-        types: [{ description: 'JSON Files', accept: { 'application/json': ['.json'] } }]
-      });
-      const file = await fileHandle.getFile();
-      schemaPath.value = file.name;
-    } else {
-      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);
-  }
-}
-
 export function toggleSectionContent(contentId, iconElement, toggleElement = null) {
   const contentElement = document.getElementById(contentId);
   if (!contentElement) return;
@@ -588,23 +675,28 @@ function handleFormView(elements, currentFormId, currentServersListId, baseCateg
 
 function getFeedConfiguration(activeForm, baseCategoryData, isExistingCategoryContext) {
   if (!isExistingCategoryContext || !baseCategoryData) {
+    // If not in an existing category context, or no base data, just get current form data.
     return activeForm ? getFormData(activeForm) : {};
   }
 
+  // In an existing category context, get the data from the current form.
+  // `true` for forExistingCategoryTab ensures getFormData processes only server-related fields
+  // and correctly handles adhoc/new servers.
   const newData = getFormData(activeForm, true, baseCategoryData);
+
+  // Start with a deep clone of the original category data (for name, description, etc.)
   const merged = JSON.parse(JSON.stringify(baseCategoryData));
 
-  merged.mcpServers = (merged.mcpServers || []).concat(newData.mcpServers || []);
+  // Replace mcpServers with the current state from the form (newData).
+  // This ensures deletions and modifications in the form are accurately reflected.
+  // newData.mcpServers will include original read-only servers (if any),
+  // modified adhoc servers, and newly added servers, all with their current state.
+  merged.mcpServers = newData.mcpServers || [];
 
-  const existingReqs = new Set(merged.requirements?.map(r => `${r.type}|${r.name}|${r.version}`) || []);
-  (newData.requirements || []).forEach(req => {
-    const key = `${req.type}|${req.name}|${req.version}`;
-    if (!existingReqs.has(key)) {
-      merged.requirements = merged.requirements || [];
-      merged.requirements.push(req);
-      existingReqs.add(key);
-    }
-  });
+  // Requirements should also be derived from the current state of servers in the form.
+  // formDataToFeedConfiguration (which produces newData) calculates global requirements
+  // based on the servers it finds. So, newData.requirements should be the correct set.
+  merged.requirements = newData.requirements || [];
 
   return merged;
 }
@@ -749,7 +841,6 @@ Object.entries({
   removeServerRequirement,
   toggleServerAliasField,
   toggleServerRegistryConfig,
-  browseLocalSchema,
   renderInstallationConfig,
   toggleSectionContent,
   copyJsonToClipboard