imcp 0.0.17 → 0.0.18

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

@@ -43,13 +43,62 @@ let pollingIntervalId = null;
  * @param {HTMLElement} contentElement - The HTML element to update.
  */
 export function updateOperationDisplay(data, contentElement) { // Renamed from updateValidationDisplay
-  const { status, message, validationStatus, prInfo, errorMessage: operationErrorMessage, operationType } = data;
-  let htmlContent = `<p><strong>Overall Status:</strong> <span class="${status === 'COMPLETED' || status === 'succeeded' ? 'text-green-600' : (status === 'FAILED' ? 'text-red-600' : 'text-yellow-600')}">${status} ${(status === 'IN_PROGRESS' || status === 'PENDING' || status === 'VALIDATING' || status === 'PUBLISHING') ? "<i class='bx bx-loader-alt bx-spin ml-2'></i>" : ""}</span></p>`;
+  const { status, message, validationStatus, prInfo, errorMessage: operationErrorMessage, operationType, steps } = data; // Added steps
+  const upperStatus = typeof status === 'string' ? status.toUpperCase() : ''; // Overall status
+  const isInProgressOverall = upperStatus === 'PENDING' || upperStatus === 'VALIDATING' || upperStatus === 'PRCREATING' || upperStatus === 'IN_PROGRESS' || upperStatus === 'PUBLISHING';
+
+  let htmlContent = `<p><strong>Overall Status:</strong> <span class="${upperStatus === 'COMPLETED' || upperStatus === 'SUCCEEDED' ? 'text-green-600' : (upperStatus === 'FAILED' ? 'text-red-600' : 'text-yellow-600')}">${status} ${isInProgressOverall ? "<i class='bx bx-loader-alt bx-spin ml-2'></i>" : ""}</span></p>`;
   if (operationType) htmlContent += `<p><strong>Operation Type:</strong> ${operationType}</p>`;
+  // Show message if provided, especially useful for direct success/failure from API.
   if (message) htmlContent += `<p><strong>Message:</strong> ${message}</p>`;
-  if (operationErrorMessage) htmlContent += `<p class="text-red-500"><strong>Error:</strong> ${operationErrorMessage}</p>`;
+  if (operationErrorMessage) htmlContent += `<p class="text-red-500"><strong>Overall Error:</strong> ${operationErrorMessage}</p>`;
+
+  // Display Steps
+  if (Array.isArray(steps) && steps.length > 0) {
+    const progressListId = `progress-steps-list-${contentElement.id}`; // Unique ID for the steps list
+    // Ensure the toggle icon reflects the initial state (expanded, so 'bx-chevron-up')
+    // The UL itself won't have 'hidden' class initially.
+    htmlContent += `
+      <div class="progress-section-container mt-4">
+        <h4 class="font-semibold mb-2 text-gray-700 cursor-pointer flex items-center progress-section-toggle" data-target-id="${progressListId}">
+          Progress
+          <i class='bx bx-chevron-up toggle-icon-progress ml-2 text-gray-500'></i>
+        </h4>
+        <ul id="${progressListId}" class="list-none space-y-2 border-l-2 border-blue-500 pl-4 py-2">`; // Added py-2 for padding
+    steps.forEach((step, index) => {
+      const stepTimestamp = new Date(step.timestamp).toLocaleString();
+      let stepStatusIcon = '';
+      let stepTextColor = 'text-gray-700'; // Default text color
+
+      const isLastStep = index === steps.length - 1;
+
+      if (step.errorMessage || step.status === 'failed') {
+        stepStatusIcon = "<i class='bx bx-x-circle text-red-500 mr-2'></i>";
+        stepTextColor = 'text-red-600';
+      } else if (isLastStep && isInProgressOverall) {
+        // Current active step if overall process is still running
+        stepStatusIcon = "<i class='bx bx-loader-alt bx-spin text-blue-500 mr-2'></i>";
+        stepTextColor = 'text-blue-700';
+      } else {
+        // Completed, non-failed step
+        stepStatusIcon = "<i class='bx bx-check-circle text-green-500 mr-2'></i>";
+        stepTextColor = 'text-gray-700'; // Keep default gray for completed steps, icon is green
+      }
+      
+      htmlContent += `<li class="text-sm ${stepTextColor}">`;
+      htmlContent += `${stepStatusIcon}<strong>${step.stepName}</strong>`;
+      if (step.serverName) htmlContent += ` (Server: ${step.serverName})`;
+      htmlContent += `<span class="text-xs text-gray-500 ml-2">- ${stepTimestamp}</span>`;
+      if (step.errorMessage) {
+        htmlContent += `<p class="text-xs text-red-400 pl-6">Error: ${step.errorMessage}</p>`;
+      }
+      htmlContent += `</li>`;
+    });
+    htmlContent += '</ul>';
+  }
+
   if (validationStatus) {
-    htmlContent += '<h4 class="font-semibold mt-3 mb-1">Detailed Validation:</h4>';
+    htmlContent += '<h4 class="font-semibold mt-4 mb-2 text-gray-700">Detailed Validation Results:</h4>';
     htmlContent += '<ul class="list-disc list-inside space-y-1">';
     let hasDetailedItems = false;
     // Check for serverResults array first
@@ -98,8 +147,36 @@ export function updateOperationDisplay(data, contentElement) { // Renamed from u
     htmlContent += `<p class="mt-3"><strong>PR Info:</strong> <a href="${prInfo.url}" target="_blank" class="text-blue-600 hover:underline">${prInfo.url}</a></p>`;
   }
   contentElement.innerHTML = htmlContent;
+  // After updating content, ensure the toggle listener is active for the new/updated progress section
+  if (Array.isArray(steps) && steps.length > 0) {
+    ensureProgressToggleListener(contentElement);
+  }
 }
 
+/**
+ * Ensures that a click listener is attached to the statusContentElement
+ * to handle toggling the visibility of the progress steps list.
+ * This listener is attached only once.
+ * @param {HTMLElement} statusContentElement - The parent element where progress is displayed.
+ */
+export function ensureProgressToggleListener(statusContentElement) {
+  if (statusContentElement && !statusContentElement.dataset.progressToggleListenerAttached) {
+    statusContentElement.addEventListener('click', (event) => {
+      const toggleHeader = event.target.closest('.progress-section-toggle');
+      if (toggleHeader) {
+        const targetId = toggleHeader.dataset.targetId;
+        const iconElement = toggleHeader.querySelector('.toggle-icon-progress');
+        // Assuming toggleSectionContent is imported from uiHandlers.js and is in scope
+        if (targetId && iconElement && typeof toggleSectionContent === 'function') {
+          toggleSectionContent(targetId, iconElement);
+        }
+      }
+    });
+    statusContentElement.dataset.progressToggleListenerAttached = 'true';
+  }
+}
+
+
 /**
  * Polls the server for operation status.
  * @param {string} categoryName - The name of the category.
@@ -107,71 +184,74 @@ export function updateOperationDisplay(data, contentElement) { // Renamed from u
  * @param {string} validateBtnId - The ID of the validate button.
  * @param {string} publishBtnId - The ID of the publish button.
  * @param {string} operationInitiator - 'validate' or 'publish' to restore correct button text.
+ * @param {string} operationType - The type of operation to poll for (e.g., 'VALIDATION_ONLY', 'FULL_ONBOARDING').
+ * @returns {Promise<boolean>} - Promise resolving to true if polling should continue, false otherwise.
  */
-export async function pollOperationStatus(categoryName, contentId, validateBtnId, publishBtnId, operationInitiator) {
+export async function pollOperationStatus(categoryName, contentId, validateBtnId, publishBtnId, operationInitiator, operationType) {
   const statusContentElement = document.getElementById(contentId);
+  ensureProgressToggleListener(statusContentElement); // Ensure listener is active during polling updates
+
   const validateButton = document.getElementById(validateBtnId);
   const publishButton = document.getElementById(publishBtnId);
 
-  // Helper function to update button states based on operation status
-  const updateButtonStates = (isCompleted = false) => {
-    if (validateButton && publishButton) {
-      if (isCompleted) {
-        // On completion, enable both buttons and restore their original state
-        validateButton.disabled = false;
-        validateButton.innerHTML = "<i class='bx bx-check-shield mr-2'></i>Validate";
-        validateButton.classList.remove('opacity-50');
-        publishButton.disabled = false;
-        publishButton.innerHTML = "<i class='bx bx-cloud-upload mr-2'></i>Publish";
-        publishButton.classList.remove('opacity-50');
-      } else {
-        // During operation, handle buttons based on which operation is running
-        if (operationInitiator === 'validate') {
-          validateButton.disabled = true;
-          validateButton.innerHTML = "<i class='bx bx-loader-alt bx-spin mr-2'></i>Validating...";
-          publishButton.disabled = true;
-          publishButton.innerHTML = "<i class='bx bx-cloud-upload mr-2'></i>Publish";
-          publishButton.classList.add('opacity-50');
-        } else if (operationInitiator === 'publish') {
-          publishButton.disabled = true;
-          publishButton.innerHTML = "<i class='bx bx-loader-alt bx-spin mr-2'></i>Publishing...";
-          validateButton.disabled = true;
-          validateButton.innerHTML = "<i class='bx bx-check-shield mr-2'></i>Validate";
-          validateButton.classList.add('opacity-50');
-        }
-      }
-    }
-  };
-
-  try {
-    const response = await fetch(`/api/categories/${categoryName}/onboard/status`);
-    const result = await response.json();
-
-    if (result.success && result.data) {
+ // Helper function to update button states based on operation status
+ const updateButtonStates = (isCompleted = false) => {
+   if (validateButton && publishButton) {
+     if (isCompleted) {
+       // On completion, enable both buttons and restore their original state
+       validateButton.disabled = false;
+       validateButton.innerHTML = "<i class='bx bx-check-shield mr-2'></i>Validate";
+       validateButton.classList.remove('opacity-50');
+       publishButton.disabled = false;
+       publishButton.innerHTML = "<i class='bx bx-cloud-upload mr-2'></i>Publish";
+       publishButton.classList.remove('opacity-50');
+     } else {
+       // During operation, handle buttons based on which operation is running
+       if (operationInitiator === 'validate') {
+         validateButton.disabled = true;
+         validateButton.innerHTML = "<i class='bx bx-loader-alt bx-spin mr-2'></i>Validating...";
+         publishButton.disabled = true;
+         publishButton.innerHTML = "<i class='bx bx-cloud-upload mr-2'></i>Publish";
+         publishButton.classList.add('opacity-50');
+       } else if (operationInitiator === 'publish') {
+         publishButton.disabled = true;
+         publishButton.innerHTML = "<i class='bx bx-loader-alt bx-spin mr-2'></i>Publishing...";
+         validateButton.disabled = true;
+         validateButton.innerHTML = "<i class='bx bx-check-shield mr-2'></i>Validate";
+         validateButton.classList.add('opacity-50');
+       }
+     }
+   }
+ };
+
+ try {
+   // Add operationType as a query parameter
+   const response = await fetch(`/api/categories/${categoryName}/onboard/status?operationType=${encodeURIComponent(operationType)}`);
+   const result = await response.json();
+
+   if (result.success && result.data) {
       updateOperationDisplay(result.data, statusContentElement);
 
       const currentStatus = result.data.status ? String(result.data.status).toUpperCase() : ''; // Ensure uppercase for comparison
       // Use string literals for status comparison, include 'succeeded'
       if (currentStatus === 'COMPLETED' || currentStatus === 'FAILED' || currentStatus === 'SUCCEEDED') {
-        clearInterval(pollingIntervalId);
-        pollingIntervalId = null;
         updateButtonStates(true);
+        return false; // Stop polling
       } else {
         // Operation is still in progress
         updateButtonStates(false);
+        return true; // Continue polling
       }
     } else {
       statusContentElement.innerHTML = `<p class="text-red-500">Error polling status: ${result.error || 'Unknown error'}</p>`;
-      clearInterval(pollingIntervalId);
-      pollingIntervalId = null;
       updateButtonStates(true);
+      return false; // Stop polling
     }
   } catch (error) {
     console.error('Error polling operation status:', error);
     statusContentElement.innerHTML = `<p class="text-red-500">An error occurred while polling status. Please check the console.</p>`;
-    clearInterval(pollingIntervalId);
-    pollingIntervalId = null;
     updateButtonStates(true);
+    return false; // Stop polling
   }
 }
 
@@ -186,6 +266,8 @@ export async function handleValidation(event, activeTab, currentSelectedCategory
   const { panelId, contentId, formId, validateButtonId, publishButtonId } = getElementIdsByTab(activeTab);
 
   const statusContentElement = document.getElementById(contentId);
+  ensureProgressToggleListener(statusContentElement); // Ensure listener is active for initial display
+
   const onboardForm = document.getElementById(formId);
   const validateButton = document.getElementById(validateButtonId);
   const publishButton = document.getElementById(publishButtonId);
@@ -266,21 +348,11 @@ export async function handleValidation(event, activeTab, currentSelectedCategory
   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).
+    // newServersData, generated by getFormData, already contains the correct, complete list
+    // of servers (including original, adhoc, and newly added ones) and their derived global requirements.
+    finalFeedConfiguration.mcpServers = newServersData.mcpServers || [];
+    finalFeedConfiguration.requirements = newServersData.requirements || [];
   } else {
     finalFeedConfiguration = newServersData;
   }
@@ -305,12 +377,23 @@ export async function handleValidation(event, activeTab, currentSelectedCategory
 
     if (result.success && result.data) {
       updateOperationDisplay(result.data, statusContentElement);
-      const categoryName = result.data.onboardingId; // This is the category name used for polling
+      // The onboardingId from the response is the combined ID (categoryName_operationType).
+      // We need the categoryName for polling, which we already have as a parameter.
+      // The operationType is also passed to pollOperationStatus.
+      const categoryNameForPolling = finalFeedConfiguration.name; // Use the original category name
+      const operationTypeForPolling = 'VALIDATION_ONLY'; // Validation always initiates 'VALIDATION_ONLY'
       const initialStatus = result.data.status;
 
       // Use string literals for status comparison, include 'succeeded'
-      if (categoryName && initialStatus !== 'COMPLETED' && initialStatus !== 'FAILED' && initialStatus !== 'succeeded') {
-        pollingIntervalId = setInterval(() => pollOperationStatus(categoryName, contentId, validateButtonId, publishButtonId, 'validate'), POLLING_INTERVAL);
+      const upperInitialStatus = typeof initialStatus === 'string' ? initialStatus.toUpperCase() : '';
+      if (categoryNameForPolling && upperInitialStatus !== 'COMPLETED' && upperInitialStatus !== 'FAILED' && upperInitialStatus !== 'SUCCEEDED') {
+        pollingIntervalId = setInterval(async () => {
+          const shouldContinue = await pollOperationStatus(categoryNameForPolling, contentId, validateButtonId, publishButtonId, 'validate', operationTypeForPolling);
+          if (!shouldContinue) {
+            clearInterval(pollingIntervalId);
+            pollingIntervalId = null;
+          }
+        }, POLLING_INTERVAL);
       } else {
         validateButton.disabled = false;
         validateButton.innerHTML = "<i class='bx bx-check-shield mr-2'></i>Validate";

package/dist/web/public/js/serverCategoryDetails.js

@@ -63,9 +63,19 @@ async function showServerDetails(serverName, retryCount = 0) {
             throw new Error('Server data not found after retries');
         }
 
+        let pullRequestHtml = '';
+        if (server.feedConfiguration?.PullRequest) {
+            pullRequestHtml = `
+            <p class="mb-1 text-sm">
+                <span class="font-semibold">Pull Request:</span>
+                <a href="${server.feedConfiguration.PullRequest}" target="_blank" class="text-blue-600 hover:underline">${server.feedConfiguration.PullRequest}</a>
+            </p>`;
+        }
+
         detailsDiv.innerHTML = `
             <h3 class="text-xl font-semibold mb-2 text-gray-800">${server.displayName || server.name}</h3>
-            <p class="mb-4"><span class="font-semibold">Description:</span> ${server.description || 'N/A'}</p>
+            <p class="mb-1"><span class="font-semibold">Description:</span> ${server.description || 'N/A'}</p>
+            ${pullRequestHtml}
             <div id="toolMcpsList" class="mt-4">
                 <div class="animate-pulse flex space-x-4">
                     <div class="flex-1 space-y-4 py-1">
@@ -180,8 +190,13 @@ async function renderServersList(serverCategory) {
                 <div class="server-item-content" data-server-name="${mcpServer.name}">
                     <div class="server-item-info" style="width: 100%; box-sizing: border-box;">
                         <div class="server-item-header">
-                            <div class="flex items-center">
-                                <h5 class="font-semibold text-gray-800">${mcpServer.displayName || mcpServer.name}</h5>
+                            <div class="flex items-center flex-wrap">
+                                <h5 class="font-semibold text-gray-800 mr-2">${mcpServer.displayName || mcpServer.name}</h5>
+                                ${mcpServer.systemTags && Object.keys(mcpServer.systemTags).length > 0 ? `
+                                <div class="flex flex-wrap gap-1 items-center">
+                                    ${Object.entries(mcpServer.systemTags).map(([key, value]) => `<span class="text-xs bg-purple-100 text-purple-700 px-2 py-0.5 rounded-full">${key}: ${value}</span>`).join('')}
+                                </div>
+                                ` : ''}
                                 ${mcpServer.repository || serverCategory.feedConfiguration?.repository ? (() => {
                     const repoUrl = mcpServer.repository || serverCategory.feedConfiguration?.repository;
                     const isGithub = repoUrl.toLowerCase().includes('github.com');
@@ -201,7 +216,7 @@ async function renderServersList(serverCategory) {
                                     </a>`
                 })() : ''}
                             </div>
-                            <p class="text-sm text-gray-600 mb-1">${mcpServer.description || 'No description'}</p>
+                            <p class="text-sm text-gray-600 mb-1 mt-1">${mcpServer.description || 'No description'}</p>
                         </div>
                         <div class="flex flex-col mt-3">
                             <span class="text-xs font-semibold mb-2">Client Status:</span>

package/dist/web/public/js/serverCategoryList.js

@@ -72,12 +72,24 @@ function renderServerCategoryList(servers) {
             }
         }
 
+        let systemTagsHtml = '';
+        if (server.feedConfiguration?.systemTags && Object.keys(server.feedConfiguration.systemTags).length > 0) {
+            systemTagsHtml += '<div class="flex flex-wrap gap-1 ml-2">'; // Added ml-2 for spacing
+            for (const [key, value] of Object.entries(server.feedConfiguration.systemTags)) {
+                systemTagsHtml += `<span class="text-xs bg-blue-100 text-blue-700 px-2 py-0.5 rounded-full">${key}: ${value}</span>`;
+            }
+            systemTagsHtml += '</div>';
+        }
+
         return `
         <div class="server-item border border-gray-200 p-3 rounded hover:bg-gray-50 cursor-pointer transition duration-150 ease-in-out"
              onclick="navigateToCategory('${server.name}')"
              data-server-name="${server.name}">
             <h3 class="font-semibold text-gray-800">${server.displayName || server.name}</h3>
-            <p class="text-sm text-gray-500">${statusHtml}</p>
+            <div class="text-sm text-gray-500 flex items-center mt-1">
+                ${statusHtml}
+                ${systemTagsHtml}
+            </div>
         </div>
         `;
     }).join('');

package/dist/web/public/onboard.html

@@ -126,7 +126,7 @@
                                 <i class='bx bx-server mr-2 text-blue-600'></i>
                                 MCP Servers
                             </h2>
-                            <button type="button" onclick="addServer()"
+                            <button type="button" id="addServerBtnNewCategory"
                                 class="px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 flex items-center text-sm">
                                 <i class='bx bx-plus mr-2'></i>
                                 Add MCP Server

package/dist/web/server.js

@@ -205,25 +205,38 @@ app.post('/api/categories/onboard/validate', async (req, res) => {
 app.get('/api/categories/:categoryName/onboard/status', async (req, res) => {
     try {
         const { categoryName } = req.params;
-        // categoryName is now the identifier for the operation status
-        const status = await onboardStatusManager.getStatus(categoryName);
+        const { operationType } = req.query;
+        if (!operationType) {
+            return res.status(400).json({
+                success: false,
+                error: 'operationType query parameter is required.'
+            });
+        }
+        // Validate operationType if necessary (e.g., check against known OperationType values)
+        // For now, we'll assume it's a valid OperationType string.
+        const validOperationType = operationType;
+        const status = await onboardStatusManager.getStatus(categoryName, validOperationType);
         if (!status) {
             return res.status(404).json({
                 success: false,
-                error: `No active operation found for category ${categoryName}`
+                error: `No active operation found for category ${categoryName} with operation type ${validOperationType}`
             });
         }
         // Construct the response data based on the retrieved OnboardStatus
+        const lastStepName = status.steps && status.steps.length > 0 ? status.steps[status.steps.length - 1].stepName : undefined;
         const responseData = {
-            onboardingId: status.onboardingId, // This will be the categoryName
+            onboardingId: status.onboardingId, // This is categoryName_operationType
             status: status.status,
-            message: status.currentStep || status.errorMessage || 'Processing...',
+            message: lastStepName || status.errorMessage || 'Processing...',
             lastQueried: new Date().toISOString(),
+            steps: status.steps, // Include the steps array in the response
             ...(status.validationStatus && { validationStatus: status.validationStatus }),
             ...(status.prInfo && { prInfo: status.prInfo }),
             ...(status.result && { result: status.result }),
             ...(status.errorMessage && { errorMessage: status.errorMessage }),
-            ...(status.operationType && { operationType: status.operationType }),
+            operationType: status.operationType, // Always include operationType from the status object
+            // Attempt to include feedConfiguration if available, especially for SUCCEEDED VALIDATION_ONLY
+            ...(status.operationType === 'VALIDATION_ONLY' && status.status === OnboardingProcessStatus.SUCCEEDED && status.result?.feedConfiguration && { feedConfiguration: status.result.feedConfiguration }),
         };
         const response = {
             success: true,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "imcp",
-  "version": "0.0.17",
+  "version": "0.0.18",
   "description": "Node.js SDK for Model Context Protocol (MCP)",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",