imcp 0.0.16 → 0.0.17

package/src/web/public/index.html

@@ -167,7 +167,7 @@
 
     <!-- Module scripts -->
     <script type="module">
-        import { fetchServerCategories, handleInstallServer, installRequirement, upgradeRequirement, uninstallTool } from './js/api.js';
+        import { fetchServerCategories, handleInstallServer, uninstallTool } from './js/api.js';
         import { setupSearch } from './js/serverCategoryList.js';
         import { showServerDetails } from './js/serverCategoryDetails.js';
         import { showInstallModal, closeModal, setupModalOutsideClick } from './js/modal.js';
@@ -182,8 +182,6 @@
                                                     // If other parts of the app call window.showOnboardModal, they'll need updating too.
         window.closeModal = closeModal;
         window.handleInstallServer = handleInstallServer;
-        window.installRequirement = installRequirement;
-        window.upgradeRequirement = upgradeRequirement;
         window.uninstallTool = uninstallTool;
 
         // Initialize

package/src/web/public/js/api.js

@@ -42,7 +42,7 @@ async function fetchServerCategories() {
 async function handleInstallServer(event, categoryName, serverName, callback, options = {}) {
     event.preventDefault(); // Prevent page reload
     console.log("Handling install for:", categoryName, serverName);
-    
+
     // Get selected targets from the form if not provided in options
     const selectedTargets = options.targets || [...document.querySelectorAll('input[name="targets"]:checked')]
         .map(cb => cb.value);
@@ -71,7 +71,7 @@ async function handleInstallServer(event, categoryName, serverName, callback, op
         const response = await fetch(`/api/categories/${categoryName}/install`, {
             method: 'POST',
             headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({serverList: serverList})
+            body: JSON.stringify({ serverList: serverList })
         });
 
         if (!response.ok) {
@@ -90,82 +90,6 @@ async function handleInstallServer(event, categoryName, serverName, callback, op
     }
 }
 
-// Install requirement handler
-async function installRequirement(reqName) {
-    const detailsDiv = document.getElementById('serverCategoryDetails');
-    const serverTitle = detailsDiv.querySelector('h3');
-    if (!serverTitle) {
-        showToast('No server selected.', 'error');
-        return;
-    }
-    let serverName = serverTitle.textContent;
-    if (serverName.includes(' for ')) {
-        serverName = serverName.split(' for ')[0];
-    }
-    const confirmed = await showConfirm(`Do you want to install requirement '${reqName}' for ${serverName}?`);
-    if (!confirmed) {
-        return;
-    }
-    
-    const btn = Array.from(document.querySelectorAll('button')).find(b => b.textContent.trim() === 'Install' && b.onclick?.toString().includes(reqName));
-    if (btn) btn.disabled = true;
-    
-    try {
-        const response = await fetch(`/api/categories/${serverName}/install-requirement`, {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ requirementName: reqName })
-        });
-        if (!response.ok) {
-            const errorData = await response.text();
-            throw new Error(`Installation failed: ${errorData || response.statusText}`);
-        }
-        showToast(`Requirement '${reqName}' installation initiated successfully!`, 'success');
-        setTimeout(() => {
-            fetchServerCategories();
-            window.showServerDetails(serverName);
-        }, 1000);
-    } catch (error) {
-        console.error('Error installing requirement:', error);
-        showToast(`Error installing requirement: ${error.message}. Please check console.`, 'error');
-    } finally {
-        if (btn) btn.disabled = false;
-    }
-}
-
-// Handle upgrade/uninstall actions
-async function upgradeRequirement(name) {
-    const serverTitle = document.querySelector('#serverCategoryDetails h3')?.textContent;
-    if (!serverTitle) {
-        showToast('No server selected.', 'error');
-        return;
-    }
-
-    const upgradeConfirmed = await showConfirm(`Do you want to upgrade requirement '${name}' for ${serverTitle}?`);
-    if (!upgradeConfirmed) {
-        return;
-    }
-
-    try {
-        const response = await fetch(`/api/categories/${serverTitle}/upgrade-requirement`, {
-            method: 'POST',
-            headers: { 'Content-Type': 'application/json' },
-            body: JSON.stringify({ requirementName: name })
-        });
-
-        if (!response.ok) {
-            const errorData = await response.text();
-            throw new Error(`Upgrade failed: ${errorData || response.statusText}`);
-        }
-
-        showToast(`Requirement '${name}' upgrade initiated successfully!`, 'success');
-        fetchServerCategories();
-        window.showServerDetails(serverTitle);
-    } catch (error) {
-        console.error('Error upgrading requirement:', error);
-        showToast(`Error upgrading requirement: ${error.message}`, 'error');
-    }
-}
 
 async function uninstallTool(name) {
     const serverTitle = document.querySelector('#serverCategoryDetails h3')?.textContent;
@@ -204,7 +128,5 @@ export {
     allServerCategoriesData,
     fetchServerCategories,
     handleInstallServer,
-    installRequirement,
-    upgradeRequirement,
     uninstallTool
 };

package/src/web/public/js/modal/installation.js

@@ -175,7 +175,7 @@ async function pollInstallStatus(categoryName, serverName, targets, interval = 2
                             delayedAppendInstallLoadingMessage(`${target}: ${msg}`);
                             lastMessages[target] = msg;
                         }
-                        if (status !== "completed") {
+                        if (status !== "completed" && status !== "failed") {
                             allTargetsCompleted = false;
                         }
                     }

package/src/web/public/js/onboard/ONBOARDING_PAGE_DESIGN.md

@@ -168,9 +168,9 @@ A toggle switch allows users to switch between the standard form view and a raw
   - Calls `getFormData()` (from `formProcessor.js`) to get the current form data as `FeedConfiguration`.
   - Sends an initial POST request to `/api/categories/onboard` with the `FeedConfiguration` object and an `isUpdate` flag.
   - The "Publish" button shows a spinning loader icon and its text changes to "Publishing...". Both "Validate" and "Publish" buttons are disabled.
-  - **Polling for Status**: If the initial publish request is successful and the operation is not immediately completed or failed, `handlePublish` initiates polling using the shared `pollOperationStatus` function (from `validationHandlers.js`). This function periodically calls `GET /api/categories/:categoryName/onboard/status`.
-  - **Displaying Results**: The shared `updateOperationDisplay` function (from `validationHandlers.js`) formats and displays the results from both the initial publish call and subsequent status polls in the relevant status panel. It shows overall status, messages, PR info (if available), and detailed validation results if included in the publish response.
-  - **Completion/Failure**: Polling stops when the status is 'COMPLETED', 'FAILED', or 'succeeded'. Upon completion or failure, the "Publish" button reverts to its original state, and both "Validate" and "Publish" buttons are re-enabled. Success and error messages are displayed using `showToast()`.
+  - **Polling for Status**: If the initial publish request is successful and the operation is not immediately completed or failed, `handlePublish` initiates polling. The shared `pollOperationStatus` function (from `validationHandlers.js`) is called, which periodically queries `GET /api/categories/:categoryName/onboard/status?operationType=FULL_ONBOARDING`. `pollOperationStatus` now returns a boolean to manage polling continuation.
+  - **Displaying Results**: The shared `updateOperationDisplay` function (from `validationHandlers.js`) formats and displays detailed progress, including individual steps, from both the initial publish call and subsequent status polls.
+  - **Completion/Failure**: Polling stops based on the status returned by `pollOperationStatus`. Upon completion or failure, buttons are reset, and `showToast()` displays messages. For detailed information on recent changes to polling and status display, see Section 9: "Enhanced Operation Status Polling and Display".
 - **Validation (`handleValidation` in `validationHandlers.js`)**:
 - **Validation (`handleValidation` in `validationHandlers.js`)**:
   - The `validationStatusPanel` (unique per tab) is located under the "MCP Servers" section (or equivalent) and above the main action buttons ("Validate", "Publish"). It is a foldable panel.
@@ -179,14 +179,14 @@ A toggle switch allows users to switch between the standard form view and a raw
     - Sends an initial POST request to `/api/categories/onboard/validate`.
     - The "Validate" button shows a spinning loader icon and its text changes to "Validating...". Both "Validate" and "Publish" buttons are disabled.
   - **Polling for Status**:
-    - If the initial validation request is successful and the operation is not immediately completed or failed, `handleValidation` initiates polling using the shared `pollOperationStatus` function (from `validationHandlers.js`).
-    - This function uses the `onboardingId` (category name) from the validation response to periodically call `GET /api/categories/:categoryName/onboard/status`.
+    - If the initial validation request is successful and the operation is not immediately completed or failed, `handleValidation` initiates polling.
+    - The shared `pollOperationStatus` function (from `validationHandlers.js`) is called, which periodically queries `GET /api/categories/:categoryName/onboard/status?operationType=VALIDATION_ONLY` (using the category name from the form). `pollOperationStatus` now returns a boolean to manage polling continuation.
   - **Displaying Results**:
-    - The shared `updateOperationDisplay` function (from `validationHandlers.js`) formats and displays the results from both the initial validation call and subsequent status polls in the relevant status panel.
-    - It handles different structures of the `validationStatus` object in the response, including displaying overall status, messages, and detailed results for each server if `validationStatus.serverResults` is present.
+    - The shared `updateOperationDisplay` function (from `validationHandlers.js`) formats and displays detailed progress, including individual steps, from both the initial validation call and subsequent status polls.
+    - It handles different structures of the `validationStatus` object and overall operation status.
   - **Completion/Failure**:
-    - Polling stops when the status is 'COMPLETED', 'FAILED', or 'succeeded'.
-    - Upon completion or failure, the "Validate" button reverts to its original state ("Validate" text and icon), and both "Validate" and "Publish" buttons are re-enabled.
+    - Polling stops based on the status returned by `pollOperationStatus`.
+    - Upon completion or failure, buttons are reset. For detailed information on recent changes to polling and status display, see Section 9: "Enhanced Operation Status Polling and Display".
 - **Copy JSON (`copyJsonToClipboard` in `uiHandlers.js`)**: Copies the content of `jsonEditorTextarea` to the clipboard. Uses `showToast()` for feedback.
 - **Global Function Exposure**: Necessary UI handler functions (like `addServer`, `removeServer`, `toggleSectionContent`, etc.) are attached to the `window` object so they can be called from `onclick` attributes in the HTML templates.
 - **Custom Notifications**: Standard browser `alert()` calls have been replaced with a custom toast notification system (`showToast()` from `../notifications.js`). This system requires an `.alert-container` div in the host HTML (`onboard.html`) and uses CSS from `css/notifications.css` for styling. The `notifications.js` module handles the creation, display, and dismissal (manual and automatic) of these toasts without relying on Bootstrap's JavaScript.
@@ -290,6 +290,38 @@ This section documents significant fixes and behavior changes implemented recent
         - **Outcome:** The "Publish" and "Validate" buttons now reliably revert to their default active states when an operation (validation or publish) concludes with a failure, regardless of the casing of the status string from the backend or whether the failure occurs immediately or during polling.
   - **Overall Outcome:** These changes improve the reliability of data submission and provide more accurate UI feedback for asynchronous operations on the "Create Server in Existing Category" tab.
 
+- **Enhanced Operation Status Polling and Display (May 2025 - Current Session):**
+  - **Context:** Significant improvements were made to the handling of asynchronous operations (validation and publishing), including more detailed progress display, robust polling, and clearer API interactions.
+  - **Issues Addressed & Solutions:**
+    1.  **Server-Side API (`server.ts` - `/api/categories/:categoryName/onboard/status`):**
+        -   The endpoint now requires an `operationType` query parameter (e.g., `VALIDATION_ONLY`, `FULL_ONBOARDING`).
+        -   The response payload (`OperationStatus`) was enhanced to include:
+            -   `steps`: An array of objects detailing each step of the operation (name, serverName, timestamp, status, errorMessage).
+            -   `operationType`: Reflects the type of operation being tracked, taken from the status object.
+            -   `feedConfiguration`: Conditionally included for successful `VALIDATION_ONLY` operations if present in the result.
+            -   The `onboardingId` in the response is `categoryName_operationType`.
+            -   The `message` field in the response now prioritizes the last step's name or an overall error message.
+    2.  **Client-Side Polling Logic (`validationHandlers.js` - `pollOperationStatus`):**
+        -   The function now accepts an `operationType` parameter, which is passed to the API.
+        -   It returns a boolean promise (`Promise<boolean>`) indicating whether polling should continue, allowing the caller (`handleValidation` or `handlePublish`) to manage `clearInterval`.
+        -   Calls `ensureProgressToggleListener` to ensure the UI for displaying progress steps is interactive.
+        -   Status comparisons (`COMPLETED`, `FAILED`, `SUCCEEDED`) are now case-insensitive.
+    3.  **Operation Initiation (`publishHandler.js` - `handlePublish`, `validationHandlers.js` - `handleValidation`):**
+        -   When initiating polling, these functions now pass the correct `operationType` (`FULL_ONBOARDING` for publish, `VALIDATION_ONLY` for validate) and use the original `finalFeedConfiguration.name` as the `categoryName` for the polling request.
+        -   They now manage `clearInterval` based on the boolean returned by `pollOperationStatus`.
+        -   Both handlers call `ensureProgressToggleListener` at the beginning to prepare the UI for status updates.
+        -   `handlePublish` includes improved error handling for the initial publish request, ensuring UI elements are correctly updated even if the initial call fails or returns a terminal status.
+    4.  **UI Display (`validationHandlers.js` - `updateOperationDisplay`):**
+        -   A new collapsible "Progress" section is displayed, showing detailed `steps` from the API response. Each step includes:
+            -   A status icon (error, in-progress spinner, success).
+            -   The step name, server name (if applicable), and timestamp.
+            -   An error message for the step, if any.
+        -   The visibility of the "Progress" section is managed by `ensureProgressToggleListener` (which attaches a click handler to the section header) and the `toggleSectionContent` utility.
+        -   The `operationType` is now displayed.
+        -   The logic for displaying the overall status spinner has been updated to cover more in-progress states (e.g., `PENDING`, `VALIDATING`, `PRCREATING`, `PUBLISHING`) and uses case-insensitive comparisons.
+    5.  **Progress Section Toggling (`validationHandlers.js` - `ensureProgressToggleListener`):**
+        -   A new exported utility function, `ensureProgressToggleListener`, was added. It attaches a click event listener to the status content element. This listener delegates to `toggleSectionContent` (from `uiHandlers.js`) when the progress section header is clicked, allowing users to expand or collapse the detailed list of progress steps. The listener is attached only once per status content element.
+  - **Outcome:** These changes provide users with more granular and interactive feedback on long-running operations, improve the robustness and accuracy of status polling, and align client-server communication for tracking asynchronous onboarding tasks.
 ---
 
 ## 10. Server Validation System

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

@@ -172,14 +172,26 @@ export async function submitForm(event, activeTab, currentSelectedCategoryData =
       showToast('No existing category selected or category data is missing.', 'error');
       return;
     }
-    const newServersData = formDataToFeedConfiguration(formElement, true, currentSelectedCategoryData);
 
-    feedConfiguration = JSON.parse(JSON.stringify(currentSelectedCategoryData)); // Deep clone
+    // Get the complete state of servers and their requirements from the current form.
+    // The `true` flag for `forExistingCategoryTab` tells formDataToFeedConfiguration
+    // to only process server data and not category-level fields from this form.
+    // It should return ALL servers currently in this form, including modified adhoc and new ones.
+    const formDerivedData = formDataToFeedConfiguration(formElement, true, currentSelectedCategoryData);
 
-    feedConfiguration.mcpServers = (feedConfiguration.mcpServers || []).concat(newServersData.mcpServers || []);
+    // Start with a deep clone of the original category data (for name, description, etc.)
+    feedConfiguration = JSON.parse(JSON.stringify(currentSelectedCategoryData));
 
+    // Replace the mcpServers list entirely with what was parsed from the form.
+    // This ensures that the list reflects the current state of the form (original read-only, modified adhoc, new).
+    feedConfiguration.mcpServers = formDerivedData.mcpServers || [];
+
+    // Merge requirements: start with original requirements, then add any new ones from the form.
+    // `formDerivedData.requirements` should ideally only contain requirements introduced by
+    // servers in the current form that are not already in `currentSelectedCategoryData.requirements`.
+    // The existing logic for merging requirements seems okay if `formDerivedData.requirements` is correctly populated.
     const existingReqKeys = new Set((feedConfiguration.requirements || []).map(r => `${r.type}|${r.name}|${r.version}`));
-    (newServersData.requirements || []).forEach(newReq => {
+    (formDerivedData.requirements || []).forEach(newReq => {
       const reqKey = `${newReq.type}|${newReq.name}|${newReq.version}`;
       if (!existingReqKeys.has(reqKey)) {
         feedConfiguration.requirements.push(newReq);
@@ -193,7 +205,7 @@ export async function submitForm(event, activeTab, currentSelectedCategoryData =
   }
 
   try {
-    const response = await fetch('/api/categories/onboard', {
+      const response = await fetch('/api/categories/onboard', {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify({
@@ -208,7 +220,7 @@ export async function submitForm(event, activeTab, currentSelectedCategoryData =
     }
 
     const result = await response.json();
-    console.log('Form submitted successfully:', result);
+    // console.log('Form submitted successfully:', result);
     showToast('Form submitted successfully! See console for operation details.', 'success');
   } catch (error) {
     console.error('Error submitting form:', error);
@@ -327,6 +339,15 @@ export function formDataToFeedConfiguration(formElement, forExistingCategoryTab
     mcpServers: []
   };
 
+  let serversListId;
+  if (formElement.id === 'onboardForm') {
+    serversListId = 'serversList';
+  } else if (formElement.id === 'onboardServerForm') {
+    serversListId = 'existingCategoryServersList';
+  } else {
+    console.warn('[formDataToFeedConfiguration] Could not determine serversListId from formElement.id:', formElement.id);
+  }
+
   if (!forExistingCategoryTab) {
     feedConfiguration.name = currentFormData.get('name') || '';
     feedConfiguration.displayName = currentFormData.get('displayName') || '';
@@ -420,8 +441,13 @@ export function formDataToFeedConfiguration(formElement, forExistingCategoryTab
     }
   }
 
-  serverDataMap.forEach(serverRaw => {
+  // console.log('[formDataToFeedConfiguration] serverDataMap keys before processing:', Array.from(serverDataMap.keys())); // DEBUG
+  // console.log('[formDataToFeedConfiguration] serverDataMap size:', serverDataMap.size); // DEBUG
+
+  // Process servers found in the form data (new/adhoc or edited original servers)
+  serverDataMap.forEach((serverRaw, serverIndex) => {
     let mcpServer;
+    // ... (existing logic to build mcpServer from serverRaw)
     if (serverRaw.mode === 'sse') {
       mcpServer = {
         name: serverRaw.name,
@@ -436,7 +462,7 @@ export function formDataToFeedConfiguration(formElement, forExistingCategoryTab
           requirements: []
         }
       };
-    } else {
+    } else { // stdio or other modes
       mcpServer = {
         name: serverRaw.name,
         description: serverRaw.description,
@@ -446,7 +472,7 @@ export function formDataToFeedConfiguration(formElement, forExistingCategoryTab
         installation: {
           command: serverRaw.installation.command,
           args: serverRaw.installation.args || [],
-          env: {}
+          env: {} // Initialize env
         },
         dependencies: {
           requirements: []
@@ -466,7 +492,7 @@ export function formDataToFeedConfiguration(formElement, forExistingCategoryTab
       if (Object.keys(envVars).length > 0) {
         mcpServer.installation.env = envVars;
       } else {
-        delete mcpServer.installation.env;
+        delete mcpServer.installation.env; // Clean up if no env vars
       }
     }
 
@@ -500,6 +526,7 @@ export function formDataToFeedConfiguration(formElement, forExistingCategoryTab
             assetName: reqRaw.registry.local.assetName,
           };
         }
+        // Clean up empty registry objects
         if (fullRequirementConfig.registry.githubRelease && !fullRequirementConfig.registry.githubRelease.repository) delete fullRequirementConfig.registry.githubRelease;
         if (fullRequirementConfig.registry.artifacts && !fullRequirementConfig.registry.artifacts.registryUrl) delete fullRequirementConfig.registry.artifacts;
         if (fullRequirementConfig.registry.local && !fullRequirementConfig.registry.local.localPath) delete fullRequirementConfig.registry.local;
@@ -514,17 +541,103 @@ export function formDataToFeedConfiguration(formElement, forExistingCategoryTab
 
       const reqKey = `${reqRaw.type}|${reqRaw.name}|${reqRaw.version}`;
       if (!globalRequirementsMap.has(reqKey)) {
-        const { order, ...reqConfigForGlobal } = fullRequirementConfig;
+        const { order, ...reqConfigForGlobal } = fullRequirementConfig; // Exclude order for global list
         globalRequirementsMap.set(reqKey, reqConfigForGlobal);
       }
     });
     if (mcpServer.dependencies.requirements.length === 0) {
-      delete mcpServer.dependencies;
+      delete mcpServer.dependencies; // Clean up if no requirements
+    }
+
+    // Attempt to retrieve and add systemTags from the DOM element,
+    // ONLY if we are in the 'Create Server in Existing Category' tab context.
+    // For 'Create New Category' tab, systemTags should not be assigned from DOM.
+    if (formElement.id === 'onboardServerForm' && serversListId) {
+      const selector = `#${serversListId} .server-item[data-index="${serverIndex}"]`;
+      const serverItemElement = document.querySelector(selector);
+      if (serverItemElement && serverItemElement.dataset.systemTags) {
+        try {
+          mcpServer.systemTags = JSON.parse(serverItemElement.dataset.systemTags);
+        } catch (e) {
+          console.error(`[formDataToFeedConfiguration] Error parsing systemTags for server index ${serverIndex} ('${mcpServer.name}') on ${formElement.id}:`, e, serverItemElement.dataset.systemTags);
+          mcpServer.systemTags = { parseError: true };
+        }
+      }
+      // If no dataset.systemTags or not onboardServerForm, mcpServer.systemTags remains undefined.
+    } else {
+      // Ensure systemTags is not carried over if not in the correct context or not present in dataset
+      delete mcpServer.systemTags;
     }
 
     feedConfiguration.mcpServers.push(mcpServer);
   });
 
+
+  // If processing for an existing category, ensure original non-adhoc servers are included
+  // if they weren't picked up by the form (e.g., because they were read-only and disabled).
+  if (forExistingCategoryTab && baseCategoryData && Array.isArray(baseCategoryData.mcpServers)) {
+    baseCategoryData.mcpServers.forEach(originalServer => {
+      // Check if this original server (by name) is already in our processed list.
+      // We use name as the primary identifier for existing servers.
+      const isAlreadyProcessed = feedConfiguration.mcpServers.some(
+        processedServer => processedServer.name === originalServer.name
+      );
+
+      if (!isAlreadyProcessed && (!originalServer.systemTags || originalServer.systemTags.adhoc !== 'true')) {
+        // This original server was not in the form data (likely read-only) and is not adhoc. Add it.
+        // Ensure its requirements are also added to the global list if not already present.
+        feedConfiguration.mcpServers.push(JSON.parse(JSON.stringify(originalServer))); // Add a clone
+
+        if (originalServer.dependencies && Array.isArray(originalServer.dependencies.requirements)) {
+          originalServer.dependencies.requirements.forEach(req => {
+            // We need the full requirement definition for the global map.
+            // This might require looking up the full definition from baseCategoryData.requirements
+            // if originalServer.dependencies.requirements only has name/version/order.
+            // For simplicity here, we assume baseCategoryData.requirements contains full definitions.
+            const originalGlobalReq = baseCategoryData.requirements?.find(
+              gReq => gReq.name === req.name && gReq.type && gReq.version === req.version // Type might not be in server's dep list
+            );
+
+            if (originalGlobalReq) {
+               const reqKey = `${originalGlobalReq.type}|${originalGlobalReq.name}|${originalGlobalReq.version}`;
+               if (!globalRequirementsMap.has(reqKey)) {
+                   globalRequirementsMap.set(reqKey, JSON.parse(JSON.stringify(originalGlobalReq)));
+               }
+            } else {
+                // Fallback if full definition not found, add what we have, though type might be missing.
+                // This part might need refinement based on actual structure of baseCategoryData.requirements
+                // and how server-specific dependencies link to global ones.
+                // The current server-specific req usually has name, version, order. Type is global.
+                // We need to find the type from the global requirements list.
+                // This logic assumes that if a server has a dependency, its full definition (including type)
+                // must exist in the global `baseCategoryData.requirements`.
+
+                // Let's find the type from baseCategoryData.requirements based on name and version
+                const matchingGlobalReqForType = baseCategoryData.requirements?.find(
+                    gReq => gReq.name === req.name && gReq.version === req.version
+                );
+                if (matchingGlobalReqForType && matchingGlobalReqForType.type) {
+                    const reqKey = `${matchingGlobalReqForType.type}|${req.name}|${req.version}`;
+                    if (!globalRequirementsMap.has(reqKey)) {
+                        // Construct a basic global requirement if not found, though ideally it should exist.
+                        globalRequirementsMap.set(reqKey, {
+                            name: req.name,
+                            version: req.version,
+                            type: matchingGlobalReqForType.type
+                            // Other fields like alias, registry would be missing here if not in matchingGlobalReqForType
+                        });
+                    }
+                } else {
+                    console.warn(`Could not find full global requirement definition (or type) for ${req.name} v${req.version} from original server ${originalServer.name}`);
+                }
+            }
+          });
+        }
+      }
+    });
+  }
+
+
   feedConfiguration.requirements = Array.from(globalRequirementsMap.values());
 
   // Validate the entire configuration
@@ -668,47 +781,95 @@ export function populateForm(feedConfig, formId = 'onboardForm', renderServersAs
   clearEnvCountersForTab(serversListId);
   clearServerRequirementCountersForTab(serversListId);
 
-  (feedConfig.mcpServers || []).forEach((server) => {
+  (feedConfig.mcpServers || []).forEach((serverData) => { // Renamed 'server' to 'serverData' for clarity
     // Get the correct current index for this tab before adding the server
     const currentServerIndex = getServerCounter(serversListId);
     // window.addServer will increment the counter for serversListId internally
-    window.addServer(serversListId, renderServersAsReadOnly, server);
-
+    // It also returns the server item, but we'll query it again for safety after DOM manipulation.
+    window.addServer(serversListId, renderServersAsReadOnly, serverData);
+
+    // After addServer, the server item should exist in the DOM.
+    const serverItem = currentForm.querySelector(`#${serversListId} .server-item[data-index="${currentServerIndex}"]`);
+
+    if (serverItem) {
+      if (formId === 'onboardServerForm') {
+        if (serverData.systemTags?.adhoc === "true") {
+          // Case 1: JSON data explicitly marks it as adhoc. Respect this.
+          serverItem.dataset.systemTags = JSON.stringify(serverData.systemTags);
+          // console.log(`[populateForm] Server ${serverData.name || currentServerIndex} in ${formId} retains adhoc status from JSON.`);
+        } else {
+          // Case 2: JSON data does NOT explicitly mark it adhoc.
+          // Check if it was an original server from the category.
+          // state.originalServerNamesForFormPopulation is set when toggling from JSON to Form view for an existing category.
+          if (state.originalServerNamesForFormPopulation && serverData.name && state.originalServerNamesForFormPopulation.has(serverData.name)) {
+            // It's an original server from the category, now treated as adhoc because it passed through JSON view.
+            serverItem.dataset.systemTags = JSON.stringify({ adhoc: "true" });
+            // console.log(`[populateForm] Original server ${serverData.name} in ${formId} marked as adhoc after JSON view.`);
+          } else {
+            // It's a new server (not in original list) and JSON didn't mark it adhoc.
+            // Or, it's an original server but its JSON representation explicitly removed/lacked adhoc tag.
+            // Ensure it's NOT adhoc.
+            // If serverData.systemTags exists but doesn't have adhoc:true, preserve those other tags.
+            if (serverData.systemTags && Object.keys(serverData.systemTags).length > 0) {
+                const newTags = { ...serverData.systemTags };
+                delete newTags.adhoc; // Ensure adhoc is not true
+                if (Object.keys(newTags).length > 0) {
+                    serverItem.dataset.systemTags = JSON.stringify(newTags);
+                } else {
+                    delete serverItem.dataset.systemTags;
+                }
+            } else {
+                delete serverItem.dataset.systemTags;
+            }
+            // console.log(`[populateForm] Server ${serverData.name || currentServerIndex} in ${formId} is NOT marked adhoc.`);
+          }
+        }
+      } else {
+        // For 'onboardForm' (Create Category tab), or if serverData had systemTags not making it adhoc.
+        // If serverData has systemTags, reflect them. Otherwise, ensure no systemTags.
+        if (serverData.systemTags) {
+          serverItem.dataset.systemTags = JSON.stringify(serverData.systemTags);
+        } else {
+          delete serverItem.dataset.systemTags;
+        }
+      }
+    }
+    // Continue with populating fields using serverData
     const serverNameInput = currentForm.querySelector(`[name="servers[${currentServerIndex}].name"]`);
-    if (serverNameInput) serverNameInput.value = server.name || '';
+    if (serverNameInput) serverNameInput.value = serverData.name || '';
 
     const modeInput = currentForm.querySelector(`[name="servers[${currentServerIndex}].mode"]`);
     if (modeInput) {
-      modeInput.value = server.mode || 'stdio';
+      modeInput.value = serverData.mode || 'stdio';
       if (typeof window.renderInstallationConfig === 'function') {
-        window.renderInstallationConfig(currentServerIndex, serversListId, server.mode || 'stdio', renderServersAsReadOnly, server.installation);
+        window.renderInstallationConfig(currentServerIndex, serversListId, serverData.mode || 'stdio', renderServersAsReadOnly, serverData.installation);
       }
     }
     const descInput = currentForm.querySelector(`[name="servers[${currentServerIndex}].description"]`);
-    if (descInput) descInput.value = server.description || '';
+    if (descInput) descInput.value = serverData.description || '';
 
-    if (server.schemas) {
+    if (serverData.schemas) {
       const schemaPathEl = document.getElementById(`schema-path-${currentServerIndex}`);
-      if (schemaPathEl) schemaPathEl.value = server.schemas;
+      if (schemaPathEl) schemaPathEl.value = serverData.schemas;
     }
-    if (server.repository) {
+    if (serverData.repository) {
       const repoInput = currentForm.querySelector(`[name="servers[${currentServerIndex}].repository"]`);
-      if (repoInput) repoInput.value = server.repository;
+      if (repoInput) repoInput.value = serverData.repository;
     }
 
-    if (server.installation) {
-      if (server.mode === 'sse') {
+    if (serverData.installation) {
+      if (serverData.mode === 'sse') {
         const urlInput = currentForm.querySelector(`[name="servers[${currentServerIndex}].installation.url"]`);
-        if (urlInput) urlInput.value = server.installation.url || '';
+        if (urlInput) urlInput.value = serverData.installation.url || '';
       } else {
         const cmdInput = currentForm.querySelector(`[name="servers[${currentServerIndex}].installation.command"]`);
-        if (cmdInput) cmdInput.value = server.installation.command || '';
-        if (server.installation.args && Array.isArray(server.installation.args)) {
+        if (cmdInput) cmdInput.value = serverData.installation.command || '';
+        if (serverData.installation.args && Array.isArray(serverData.installation.args)) {
           const argsInput = currentForm.querySelector(`[name="servers[${currentServerIndex}].installation.args"]`);
-          if (argsInput) argsInput.value = server.installation.args.join(', ');
+          if (argsInput) argsInput.value = serverData.installation.args.join(', ');
         }
-        if (server.installation.env) {
-          Object.entries(server.installation.env).forEach(([envName, envConfig]) => {
+        if (serverData.installation.env) {
+          Object.entries(serverData.installation.env).forEach(([envName, envConfig]) => {
             const currentEnvIndex = window.addEnvVariable(currentServerIndex, serversListId, renderServersAsReadOnly);
 
             const nameInput = currentForm.querySelector(`[name="servers[${currentServerIndex}].installation.env[${currentEnvIndex}].name"]`);
@@ -730,8 +891,12 @@ export function populateForm(feedConfig, formId = 'onboardForm', renderServersAs
       }
     }
 
-    if (server.dependencies && server.dependencies.requirements) {
-      server.dependencies.requirements.forEach((depReq) => {
+    if (serverData.dependencies && serverData.dependencies.requirements) {
+      // Determine if this server's requirements should be effectively read-only
+      const serverIsEffectivelyReadOnlyForReqs = renderServersAsReadOnly && !(serverData.systemTags?.adhoc === 'true');
+      // console.log(`[populateForm] Server: ${serverData.name}, Adhoc: ${serverData.systemTags?.adhoc === 'true'}, renderServersAsReadOnly: ${renderServersAsReadOnly}, Calculated serverIsEffectivelyReadOnlyForReqs: ${serverIsEffectivelyReadOnlyForReqs}`); // DEBUG
+
+      serverData.dependencies.requirements.forEach((depReq) => {
         // Find requirement by name only, as requested.
         const fullReq = (feedConfig.requirements || []).find(r => r.name === depReq.name);
         if (!fullReq) {
@@ -739,7 +904,8 @@ export function populateForm(feedConfig, formId = 'onboardForm', renderServersAs
           return;
         }
 
-        const currentReqIndex = window.addServerRequirement(currentServerIndex, serversListId, renderServersAsReadOnly);
+        // Pass serverIsEffectivelyReadOnlyForReqs to addServerRequirement
+        const currentReqIndex = window.addServerRequirement(currentServerIndex, serversListId, serverIsEffectivelyReadOnlyForReqs);
 
         currentForm.querySelector(`[name="servers[${currentServerIndex}].requirements[${currentReqIndex}].name"]`).value = fullReq.name || '';
         currentForm.querySelector(`[name="servers[${currentServerIndex}].requirements[${currentReqIndex}].type"]`).value = fullReq.type || '';

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

@@ -293,11 +293,11 @@ document.addEventListener('DOMContentLoaded', async () => {
   //   addRequirementBtn.addEventListener('click', addRequirement); // addRequirement from uiHandlers.js
   // }
 
-  const addServerBtnNewCategory = document.getElementById('addServerBtn'); // For "Create New Category" tab
+  const addServerBtnNewCategory = document.getElementById('addServerBtnNewCategory'); // For "Create New Category" tab
   if (addServerBtnNewCategory) {
     // addServer in uiHandlers defaults serversListId to 'serversList', which is correct for this button.
     // It also defaults isReadOnly to false.
-    addServerBtnNewCategory.addEventListener('click', () => addServer());
+    addServerBtnNewCategory.addEventListener('click', () => window.addServer('serversList', false, null));
   }
 
   const addServerBtnExistingCategory = document.getElementById('addServerToExistingCategoryBtn'); // For "Create Server in Existing Category" tab