imcp 0.0.16 → 0.0.17

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

@@ -22,6 +22,11 @@ export async function handlePublish(event, activeTab, currentSelectedCategoryDat
     const { panelId, contentId, formId, validateButtonId, publishButtonId } = getElementIdsByTab(activeTab);
 
     const statusContentElement = document.getElementById(contentId);
+    // Ensure the progress toggle listener is attached when handlePublish is called
+    if (typeof ensureProgressToggleListener === 'function') { // Check if imported correctly
+      ensureProgressToggleListener(statusContentElement);
+    }
+  
     const onboardForm = document.getElementById(formId);
     const validateButton = document.getElementById(validateButtonId);
     const publishButton = document.getElementById(publishButtonId);
@@ -48,21 +53,10 @@ export async function handlePublish(event, activeTab, currentSelectedCategoryDat
     if (forExistingCategoryTab && currentSelectedCategoryData) {
         finalFeedConfiguration = JSON.parse(JSON.stringify(currentSelectedCategoryData)); // Deep clone
 
-        // Merge MCP Servers
-        finalFeedConfiguration.mcpServers = (finalFeedConfiguration.mcpServers || []).concat(newServersData.mcpServers || []);
-
-        // Merge Requirements (ensuring uniqueness)
-        const existingReqKeys = new Set((finalFeedConfiguration.requirements || []).map(r => `${r.type}|${r.name}|${r.version}`));
-        (newServersData.requirements || []).forEach(newReq => {
-            const reqKey = `${newReq.type}|${newReq.name}|${newReq.version}`;
-            if (!existingReqKeys.has(reqKey)) {
-                if (!finalFeedConfiguration.requirements) {
-                    finalFeedConfiguration.requirements = [];
-                }
-                finalFeedConfiguration.requirements.push(newReq);
-                existingReqKeys.add(reqKey);
-            }
-        });
+        // Replace MCP Servers and Requirements with the current state from the form (newServersData)
+        // This aligns with the logic in handleValidation
+        finalFeedConfiguration.mcpServers = newServersData.mcpServers || [];
+        finalFeedConfiguration.requirements = newServersData.requirements || [];
     } else {
         finalFeedConfiguration = newServersData;
     }
@@ -87,11 +81,18 @@ export async function handlePublish(event, activeTab, currentSelectedCategoryDat
 
         if (result.success && result.data) {
             updateOperationDisplay(result.data, statusContentElement);
-            const categoryName = result.data.onboardingId || finalFeedConfiguration.name;
+            const categoryName = finalFeedConfiguration.name; // Use the original category name for polling
+            const operationTypeForPolling = 'FULL_ONBOARDING'; // Publish always initiates 'FULL_ONBOARDING'
             const initialStatus = result.data.status;
 
-            if (categoryName && initialStatus !== 'COMPLETED' && initialStatus !== 'FAILED' && initialStatus !== 'succeeded') {
-                pollingIntervalId = setInterval(() => pollOperationStatus(categoryName, contentId, validateButtonId, publishButtonId, 'publish'), POLLING_INTERVAL);
+            if (categoryName && typeof initialStatus === 'string' && initialStatus.toUpperCase() !== 'COMPLETED' && initialStatus.toUpperCase() !== 'FAILED' && initialStatus.toUpperCase() !== 'SUCCEEDED') {
+                pollingIntervalId = setInterval(async () => {
+                    const shouldContinue = await pollOperationStatus(categoryName, contentId, validateButtonId, publishButtonId, 'publish', operationTypeForPolling);
+                    if (!shouldContinue) {
+                        clearInterval(pollingIntervalId);
+                        pollingIntervalId = null;
+                    }
+                }, POLLING_INTERVAL);
             } else {
                 // Restore buttons to their original state fully
                 publishButton.disabled = false;
@@ -100,15 +101,22 @@ export async function handlePublish(event, activeTab, currentSelectedCategoryDat
                 validateButton.disabled = false;
                 validateButton.innerHTML = "<i class='bx bx-check-shield mr-2'></i>Validate";
                 validateButton.classList.remove('opacity-50');
-                if (result.data.status === 'COMPLETED' || result.data.status === 'succeeded') {
+                if (initialStatus.toUpperCase() === 'COMPLETED' || initialStatus.toUpperCase() === 'SUCCEEDED') {
                     showToast(result.data.message || 'Publish successful!', 'success');
-                } else if (result.data.status === 'FAILED') {
+                } else if (initialStatus.toUpperCase() === 'FAILED') {
                     showToast(result.data.errorMessage || result.data.message || 'Publish failed.', 'error');
                 }
             }
         } else {
-            statusContentElement.innerHTML = `<p class="text-red-500">Publish request failed: ${result.error || result.message || 'Unknown error'}</p>`;
-            showToast(result.error || result.message || 'Publish request failed.', 'error');
+            // Handle cases where result.success is false or result.data is missing
+            const errorMessage = (result.data && result.data.message) || result.error || result.message || 'Publish request failed: Unknown error';
+            if (result.data) { // If data is present (even if success is false), update display
+                updateOperationDisplay(result.data, statusContentElement);
+            } else {
+                statusContentElement.innerHTML = `<p class="text-red-500">${errorMessage}</p>`;
+            }
+            showToast(errorMessage, 'error');
+            
             // Restore buttons to their original state fully
             publishButton.disabled = false;
             publishButton.innerHTML = "<i class='bx bx-cloud-upload mr-2'></i>Publish";

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

@@ -10,31 +10,24 @@
  * @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
+  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}`);
 
-  // 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.
+  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' : '';
 
-  // 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.
+
+  // 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}">
@@ -43,13 +36,13 @@ export const serverTemplate = (serverIndex, isReadOnly = false, serverData = nul
          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>
+       <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>
+         <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}">
@@ -77,15 +70,15 @@ export const serverTemplate = (serverIndex, isReadOnly = false, serverData = nul
       </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>
+          <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., ./schemas/my_server_schema.json">
+            placeholder="e.g., /Users/xxx/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>
@@ -109,8 +102,8 @@ export const serverTemplate = (serverIndex, isReadOnly = false, serverData = nul
         <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}">
+        <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>
@@ -147,8 +140,8 @@ export const serverTemplate = (serverIndex, isReadOnly = false, serverData = nul
         <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}">
+        <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>
@@ -217,6 +210,7 @@ export const envVariableTemplate = (serverIndex, envIndex, isReadOnly = false, s
  * @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' : '';

package/src/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