imcp 0.0.18 → 0.1.1

package/dist/utils/logger.js

@@ -1,10 +1,29 @@
 import fs from 'fs';
 import path from 'path';
-import { SETTINGS_DIR } from '../core/metadatas/constants.js';
+import os from 'os';
+import { SETTINGS_DIR, USER_INFO_PATH } from '../core/metadatas/constants.js';
+import { TelemetryService } from '../services/TelemetryService.js';
+import { getPackageVersion } from './versionUtils.js';
+export var EventType;
+(function (EventType) {
+    EventType["IMCP_SERVE"] = "imcp_serve";
+    EventType["SERVER_INSTALL"] = "server_install";
+    EventType["SERVER_UNINSTALL"] = "server_uninstall";
+    EventType["REQUIREMENT_UPDATE"] = "requirement_update";
+    EventType["FEED_ONBOARD"] = "feed_onboard";
+    EventType["FEED_VALIDATE"] = "feed_validate";
+})(EventType || (EventType = {}));
+export var EventStatus;
+(function (EventStatus) {
+    EventStatus["SUCCESS"] = "success";
+    EventStatus["FAILED"] = "failed";
+})(EventStatus || (EventStatus = {}));
 export class Logger {
     static verbose = false;
     static fileLoggingEnabled = true;
     static logsDir = path.join(SETTINGS_DIR, 'logs');
+    static isTestEnvironment = false;
+    static packageVersion = getPackageVersion();
     static setVerbose(isVerbose) {
         this.verbose = isVerbose;
     }
@@ -96,5 +115,63 @@ export class Logger {
         }
         await this.writeToLogFile('ERROR', logMessage);
     }
+    static getUsername() {
+        try {
+            // If on Windows, use os username directly
+            if (process.platform === 'win32') {
+                return os.userInfo().username;
+            }
+            // For Mac/Linux users
+            try {
+                const userInfoPath = USER_INFO_PATH;
+                if (fs.existsSync(userInfoPath)) {
+                    const userInfo = JSON.parse(fs.readFileSync(userInfoPath, 'utf8'));
+                    if (userInfo.alias) {
+                        return userInfo.alias;
+                    }
+                }
+            }
+            catch (error) {
+                this.error('Failed to get user info from file', error);
+            }
+            // Fall back to os username if all else fails
+            return os.userInfo().username;
+        }
+        catch (error) {
+            this.error('Failed to get username', error);
+            return 'unknown';
+        }
+    }
+    static trackEvent(eventType, dimensions) {
+        try {
+            const username = this.getUsername();
+            // Add username and package version to dimensions
+            const allDimensions = {
+                username,
+                packageVersion: this.packageVersion,
+                ...dimensions
+            };
+            // Log to file
+            if (this.verbose) {
+                this.log(`Event: ${eventType}`);
+                this.log(JSON.stringify(allDimensions, null, 2));
+            }
+            // Skip AppInsights in test environment
+            if (Logger.isTestEnvironment) {
+                return;
+            }
+            // Log to Application Insights
+            try {
+                TelemetryService.trackEvent(eventType, allDimensions);
+                TelemetryService.flush();
+            }
+            catch (insightsError) {
+                this.error('Failed to track event in Application Insights', insightsError);
+            }
+        }
+        catch (error) {
+            this.error('Failed to log event', error);
+        }
+    }
 }
 //# sourceMappingURL=logger.js.map

package/dist/utils/versionUtils.d.ts

@@ -1,3 +1,4 @@
+export declare function getPackageVersion(): string;
 /**
  * Utility functions for version comparison and management
  */

package/dist/utils/versionUtils.js

@@ -1,3 +1,32 @@
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+export function getPackageVersion() {
+    try {
+        // First try npm environment variable (available during npm scripts)
+        if (process.env.npm_package_version) {
+            return process.env.npm_package_version;
+        }
+        // Fall back to reading package.json
+        // Get directory name of current module
+        const __dirname = path.dirname(fileURLToPath(import.meta.url));
+        // Traverse up to find package.json (max 3 levels up)
+        let currentDir = __dirname;
+        for (let i = 0; i < 3; i++) {
+            const packagePath = path.join(currentDir, 'package.json');
+            if (fs.existsSync(packagePath)) {
+                const packageJson = JSON.parse(fs.readFileSync(packagePath, 'utf8'));
+                return packageJson.version;
+            }
+            currentDir = path.join(currentDir, '..');
+        }
+        return 'unknown';
+    }
+    catch (error) {
+        console.error('Failed to get package version:', error);
+        return 'unknown';
+    }
+}
 /**
  * Utility functions for version comparison and management
  */

package/dist/web/public/css/serverCategoryList.css

@@ -0,0 +1,120 @@
+/* Server Category List Styles */
+.category-toggle {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    color: #4b5563; /* gray-600 */
+    transition: all 0.2s;
+}
+
+.category-toggle:hover {
+    color: #1e40af; /* blue-800 */
+}
+
+.category-toggle i {
+    font-size: 1.25rem;
+    transition: transform 0.2s;
+}
+
+.category-toggle.collapsed i {
+    transform: rotate(-90deg);
+}
+
+.server-list-container {
+    transition: height 0.3s ease, opacity 0.3s ease, margin 0.3s ease;
+    overflow: hidden;
+}
+
+.server-list-container.collapsed {
+    height: 0 !important;
+    opacity: 0;
+    margin-top: 0;
+    margin-bottom: 0;
+}
+
+.category-section {
+    margin-bottom: 1rem;
+    border-bottom: 1px solid #e5e7eb; /* gray-200 */
+    padding-bottom: 0.5rem;
+}
+
+.category-section:last-child {
+    border-bottom: none;
+    margin-bottom: 0;
+}
+
+.category-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 0.5rem;
+}
+
+/* Pin button styles */
+.pin-button {
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    color: #9ca3af; /* gray-400 */
+    margin-right: 8px;
+    transition: all 0.2s ease;
+}
+
+.pin-button:hover {
+    color: #4b5563; /* gray-600 */
+}
+
+.pin-button.pinned {
+    color: #2563eb; /* blue-600 */
+}
+
+.pin-button.pinned:hover {
+    color: #1d4ed8; /* blue-700 */
+}
+
+/* Pinned server section */
+.server-item.pinned {
+    border-left: 3px solid #2563eb; /* blue-600 */
+    background-color: #f0f7ff; /* very light blue */
+    position: relative;
+    transition: all 0.2s ease-in-out;
+}
+
+/* Pin animation */
+.server-item {
+    transition: transform 0.3s ease, border-left 0.2s ease, background-color 0.2s ease;
+}
+
+/* Visual indicator for pinned items at the top */
+.server-item.pinned::before {
+    content: "";
+    position: absolute;
+    top: -3px;
+    left: 0;
+    right: 0;
+    height: 3px;
+    background-color: #2563eb; /* blue-600 */
+    opacity: 0;
+    transition: opacity 0.2s ease;
+}
+
+/* Show top indicator for the first pinned item */
+.server-item.pinned:first-child::before {
+    opacity: 1;
+}
+
+/* Add hover effect to pinned items */
+.server-item.pinned:hover {
+    background-color: #e6f0ff; /* slightly darker on hover */
+}
+
+/* Pin animation effect */
+@keyframes pin-animation {
+    0% { transform: scale(1); }
+    50% { transform: scale(1.03); }
+    100% { transform: scale(1); }
+}
+
+.pin-animation {
+    animation: pin-animation 0.3s ease;
+}

package/dist/web/public/index.html

@@ -9,11 +9,12 @@
     <link href="https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css" rel="stylesheet">
     <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
     <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css" rel="stylesheet">
-    <link rel="stylesheet" href="styles.css">
+    <link rel="stylesheet" href="styles.css">    
     <link rel="stylesheet" href="css/modal.css">
     <link rel="stylesheet" href="css/notifications.css">
     <link rel="stylesheet" href="css/serverDetails.css">
     <link rel="stylesheet" href="css/detailsWidget.css">
+    <link rel="stylesheet" href="css/serverCategoryList.css">
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
 
     <!-- Alert container for notifications -->
@@ -25,8 +26,10 @@
     <div class="container mx-auto px-4 py-6">
         <div class="flex items-center justify-between mb-8">
             <h1 class="text-3xl font-bold text-gray-900 flex items-center">
-                <i class='bx bx-server mr-3 text-blue-600'></i>
-                IMCP Server Manager
+                <a href="index.html" class="flex items-center text-gray-900 hover:text-blue-600 transition-colors">
+                    <i class='bx bx-server mr-3 text-blue-600'></i>
+                    IMCP Server Manager
+                </a>
             </h1>
             <div class="lg:w-2/3 flex justify-end items-center gap-4">
                 <div class="relative w-48 focus-within:w-96 transition-all duration-300 ease-in-out">

package/dist/web/public/js/flights/flights.js

@@ -4,7 +4,6 @@ const FLIGHT_STORAGE_KEY = 'activeFlightSettings';
 
 // Default flight settings
 const defaultFlights = {
-    enableOnboard: false, // Default: Onboarding is enabled. Set to false to disable.
     // Add other default flights here, e.g., newFeatureX: false,
 };
 

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

@@ -10,17 +10,7 @@ function setupRealTimeValidation(formId) {
   const form = document.getElementById(formId);
   if (!form) return;
 
-  // Helper function to show validation message
-  const showValidationMessage = (element, message, isError = true) => {
-    let messageDiv = element.nextElementSibling;
-    if (!messageDiv || !messageDiv.classList.contains('validation-message')) {
-      messageDiv = document.createElement('div');
-      messageDiv.className = `validation-message text-xs mt-1 ${isError ? 'text-red-500' : 'text-green-500'}`;
-      element.insertAdjacentElement('afterend', messageDiv);
-    }
-    messageDiv.textContent = message;
-    messageDiv.className = `validation-message text-xs mt-1 ${isError ? 'text-red-500' : 'text-green-500'}`;
-  };
+  if (!form) return;
 
   // Name input validation (category or server)
   const nameInput = form.querySelector('input[name="name"]');
@@ -1026,5 +1016,22 @@ export function resetOnboardFormDynamicContent(formId = 'onboardForm', serversLi
   setupRealTimeValidation(formId);
 }
 
+/**
+ * Shows validation message under an input field
+ * @param {HTMLElement} element - The element to show validation message for
+ * @param {string} message - The validation message to display
+ * @param {boolean} isError - Whether this is an error message
+ */
+export function showValidationMessage(element, message, isError = true) {
+  let messageDiv = element.nextElementSibling;
+  if (!messageDiv || !messageDiv.classList.contains('validation-message')) {
+    messageDiv = document.createElement('div');
+    messageDiv.className = `validation-message text-xs mt-1 ${isError ? 'text-red-500' : 'text-green-500'}`;
+    element.insertAdjacentElement('afterend', messageDiv);
+  }
+  messageDiv.textContent = message;
+  messageDiv.className = `validation-message text-xs mt-1 ${isError ? 'text-red-500' : 'text-green-500'}`;
+}
+
 // Export setupRealTimeValidation for external use if needed
 export { setupRealTimeValidation };

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

@@ -2,6 +2,7 @@
 import { showToast } from '../notifications.js';
 import { getFormData } from './formProcessor.js';
 import {
+    validateFormFields,
     pollOperationStatus,
     updateOperationDisplay,
     getElementIdsByTab,
@@ -37,6 +38,35 @@ export async function handlePublish(event, activeTab, currentSelectedCategoryDat
         return;
     }
 
+    // Validate form fields
+    const validationResult = validateFormFields(onboardForm, activeTab);
+    if (!validationResult.isValid) {
+      showToast('Please fix all validation errors before proceeding.', 'error');
+      return;
+    }
+
+    if (activeTab === 'create-category') {
+      const formData = getFormData(onboardForm, false);
+      if (!formData.mcpServers || formData.mcpServers.length === 0) {
+        showToast('At least one MCP server must be configured for a new category.', 'error');
+        return;
+      }
+
+      // Check category name format
+      const nameInput = onboardForm.querySelector('input[name="name"]');
+      if (nameInput && nameInput.value.trim()) {
+        if (!/^[a-zA-Z0-9-_]+$/.test(nameInput.value.trim())) {
+          showValidationMessage(nameInput, 'Only alphanumeric characters, hyphens, and underscores allowed', true);
+          hasErrors = true;
+        }
+      }
+    }
+
+    if (hasErrors) {
+      showToast('Please fix all validation errors before proceeding.', 'error');
+      return;
+    }
+
     publishButton.disabled = true;
     publishButton.innerHTML = "<i class='bx bx-loader-alt bx-spin mr-2'></i>Publishing...";
     validateButton.disabled = true; // Also disable validate button during publish

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

@@ -17,7 +17,7 @@ export const serverTemplate = (serverIndex, isReadOnly = false, serverData = nul
 
   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' : '';
@@ -42,6 +42,10 @@ export const serverTemplate = (serverIndex, isReadOnly = false, serverData = nul
            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>
+         <button type="button" onclick="event.stopPropagation(); window.duplicateServer(${serverIndex}, '${serversListId}')"
+           class="action-button-in-server duplicate-mcp-server-button p-1.5 text-sm text-blue-600 hover:text-blue-800 hover:bg-blue-50 rounded-md flex items-center mr-2" title="Duplicate Server">
+           <i class='bx bx-copy text-lg'></i>
+         </button>
          <i class='bx bxs-chevron-down text-xl toggle-icon'></i>
         </div>
     </div>