imcp 0.0.19 → 0.1.2

package/dist/web/public/index.html

@@ -14,6 +14,7 @@
     <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,22 +26,26 @@
     <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>
+                <button id="settingsButton"
+                    class="text-gray-700 hover:text-blue-600 transition-colors flex items-center ml-3 mt-1">
+                    <i class='bx bx-cog text-3xl'></i>
+                </button>
             </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">
-                    <input type="text" id="searchBox"
-                        placeholder="Search..."
-                        data-expanded-placeholder="Search servers or tools..."
-                        class="w-full px-10 py-2.5 bg-gray-50 border border-gray-200 rounded-lg
+                    <input type="text" id="searchBox" placeholder="Search..."
+                        data-expanded-placeholder="Search servers or tools..." class="w-full px-10 py-2.5 bg-gray-50 border border-gray-200 rounded-lg
                                 text-gray-700 placeholder-gray-400
                                 focus:border-blue-400 focus:ring-2 focus:ring-blue-100
                                 transition-all duration-300 ease-in-out">
                     <i class='bx bx-search absolute left-3.5 top-1/2 transform -translate-y-1/2 text-gray-400'></i>
                 </div>
                 <button id="onboardButton" style="display: none;"
-                     class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors flex items-center">
+                    class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors flex items-center">
                     <i class='bx bx-plus-circle mr-2'></i>
                     Onboard
                 </button>
@@ -170,7 +175,7 @@
         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';
+        import { showInstallModal, closeModal } from './js/modal.js';
         // import { showOnboardModal as navigateToOnboard } from './js/onboard/index.js'; // We are directly navigating
         import flights, { getFlightQueryParameters, buildUrlWithFlights } from './js/flights/flights.js';
 
@@ -178,8 +183,8 @@
         window.showServerDetails = showServerDetails;
         window.showInstallModal = showInstallModal;
         // window.showOnboardModal = showOnboardModal; // This might conflict if showOnboardModal is also in onboard/index.js
-                                                    // We'll rely on the event listener above for the main page's onboard button.
-                                                    // If other parts of the app call window.showOnboardModal, they'll need updating too.
+        // We'll rely on the event listener above for the main page's onboard button.
+        // If other parts of the app call window.showOnboardModal, they'll need updating too.
         window.closeModal = closeModal;
         window.handleInstallServer = handleInstallServer;
         window.uninstallTool = uninstallTool;
@@ -187,23 +192,20 @@
         // Initialize
         document.addEventListener('DOMContentLoaded', async () => {
             setupSearch();
-            setupModalOutsideClick();
-
             const onboardButton = document.getElementById('onboardButton');
             if (flights.enableOnboard) {
                 onboardButton.style.display = 'flex'; // Make it visible
                 onboardButton.addEventListener('click', () => {
-                    // The original showOnboardModal in onboard/index.js likely does window.location.href = 'onboard.html';
-                    // We need to preserve existing flight parameters.
                     const flightQueryString = getFlightQueryParameters();
-                    // Assuming navigateToOnboard from onboard/index.js handles the actual navigation
-                    // If it directly sets window.location.href, we might need to adjust how it's called or modify it.
-                    // For now, let's assume we can adapt its usage or it's a simple navigation.
-                    // The simplest way if showOnboardModal in onboard/index.js is just `window.location.href = 'onboard.html'`
-                    // would be to directly navigate here.
                     window.location.href = buildUrlWithFlights('onboard.html');
                 });
             }
+
+            const settingsButton = document.getElementById('settingsButton');
+            settingsButton.addEventListener('click', () => {
+                window.location.href = buildUrlWithFlights('settings.html');
+            });
+
             // No 'else' block needed as it's hidden by default via inline style
 
             try {
@@ -230,8 +232,6 @@
                     window.location.href = buildUrlWithFlights('index.html', { category: allServerCategoriesData[0].name });
                     return; // Stop further execution, page will reload
                 } else {
-                    // No categories at all, or data still loading. Default placeholder will be shown.
-                    // Or, if allServerCategoriesData is empty after fetch, the placeholder from HTML remains.
                 }
 
             } catch (error) {
@@ -246,9 +246,114 @@
                     serverCategoryListDiv.innerHTML = `<p class="text-red-500">Could not load categories.</p>`;
                 }
             }
+
+            // Fetch and display application version
+            try {
+                const versionResponse = await fetch('/api/version');
+                const appVersionSpan = document.getElementById('appVersion');
+                const versionInfoContainer = document.getElementById('versionInfoContainer');
+                const versionIcon = versionInfoContainer.querySelector('i');
+
+                // Create tooltip element
+                const tooltip = document.createElement('div');
+                tooltip.className = 'version-tooltip';
+                versionInfoContainer.appendChild(tooltip);
+
+                let tooltipMessage = "Loading version information...";
+                let isUpdateAvailable = false;
+
+                if (versionResponse.ok) {
+                    const versionData = await versionResponse.json();
+                    if (versionData.success && versionData.data) {
+                        const currentVersion = versionData.data.version || 'N/A';
+                        appVersionSpan.textContent = currentVersion;
+
+                        if (versionData.data.availableUpdate) {
+                            isUpdateAvailable = true;
+                            tooltipMessage = versionData.data.availableUpdate.message;
+                        } else {
+                            tooltipMessage = "You're already up to date!";
+                        }
+                    } else {
+                        appVersionSpan.textContent = 'N/A';
+                        tooltipMessage = "Could not retrieve version information.";
+                    }
+                } else {
+                    console.error('Failed to fetch version:', versionResponse.status);
+                    appVersionSpan.textContent = 'N/A';
+                    tooltipMessage = "Failed to fetch version information.";
+                }
+
+                tooltip.textContent = tooltipMessage;
+
+                if (isUpdateAvailable) {
+                    versionInfoContainer.classList.add('text-orange-500');
+                    versionIcon.classList.add('text-orange-500');
+                    appVersionSpan.classList.add('text-orange-500');
+                }
+
+                versionInfoContainer.addEventListener('mouseenter', () => {
+                    tooltip.classList.add('visible');
+                });
+
+                versionInfoContainer.addEventListener('mouseleave', () => {
+                    // Only hide if the mouse isn't over the tooltip itself
+                    setTimeout(() => { // Add a small delay to allow moving to the tooltip
+                        if (!tooltip.matches(':hover')) {
+                            tooltip.classList.remove('visible');
+                        }
+                    }, 100);
+                });
+
+                tooltip.addEventListener('mouseleave', () => {
+                    tooltip.classList.remove('visible');
+                });
+
+                // Keep tooltip visible if clicked, and allow clicking outside to close
+                versionInfoContainer.addEventListener('click', (event) => {
+                    event.stopPropagation();
+                    tooltip.classList.add('visible'); // Ensure it's visible on click
+                });
+
+                document.addEventListener('click', (event) => {
+                    if (!versionInfoContainer.contains(event.target) && !tooltip.contains(event.target)) {
+                        tooltip.classList.remove('visible');
+                    }
+                });
+
+
+            } catch (error) {
+                console.error('Error fetching version:', error);
+                const appVersionSpan = document.getElementById('appVersion');
+                if (appVersionSpan) {
+                    appVersionSpan.textContent = 'N/A';
+                    const versionInfoContainer = document.getElementById('versionInfoContainer');
+                    const tooltip = versionInfoContainer.querySelector('.version-tooltip');
+                    if (tooltip) {
+                        tooltip.textContent = "Error fetching version information.";
+                    }
+                }
+            }
         });
     </script>
     <script src="js/modal.js" type="module"></script>
+
+    <footer class="text-sm text-gray-600 py-6 mt-10 border-t border-gray-200">
+        <div class="container mx-auto px-4">
+            <div class="flex flex-col sm:flex-row justify-start items-start sm:items-center space-y-2 sm:space-y-0 sm:space-x-6 px-6">
+                <a href="https://github.com/ai-microsoft/imcp" target="_blank" rel="noopener noreferrer"
+                    class="flex items-center text-blue-600 hover:text-blue-700 hover:underline transition-colors"
+                    title="Welcome for any feedback.">
+                    <i class='bx bxl-github mr-1.5'></i> GitHub
+                </a>
+                <span class="hidden sm:inline text-gray-300">|</span>
+                <span id="versionInfoContainer" class="version-info-container flex items-center text-gray-700">
+                    <i class='bx bx-info-circle mr-1.5 text-gray-500'></i>
+                    Version: <span id="appVersion" class="ml-1 font-medium">Loading...</span>
+                </span>
+            </div>
+        </div>
+    </footer>
 </body>
 
 </html>

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

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

package/dist/web/public/js/modal/index.js

@@ -1,8 +1,8 @@
 // Import all modal-related functionality
 import { compareVersions } from './versionUtils.js';
-import { delayedAppendInstallLoadingMessage } from './messageQueue.js';
-import { showInstallLoadingModal, appendInstallLoadingMessage, hideInstallLoadingModal } from './loadingModal.js';
-import { closeModal, setupModalOutsideClick } from './modalUtils.js';
+// import { delayedAppendInstallLoadingMessage } from './messageQueue.js'; // Removed
+import { showInstallLoadingModal, hideInstallLoadingModal, updateOverallInstallStatus, addInstallationStep } from './loadingModal.js'; // Removed appendInstallLoadingMessage, added new fns
+import { closeModal } from './modalUtils.js';
 import { handleBulkClientInstall, uninstallTools } from './installation.js';
 import { showInstallModal } from './installModal.js';
 import {
@@ -18,18 +18,17 @@ export {
     // Version utilities
     compareVersions,
 
-    // Message queue
-    delayedAppendInstallLoadingMessage,
+    // Message queue - (delayedAppendInstallLoadingMessage removed)
 
     // Loading modal
     showInstallLoadingModal,
-    appendInstallLoadingMessage,
+    // appendInstallLoadingMessage, // Removed
     hideInstallLoadingModal,
+    updateOverallInstallStatus, // Added
+    addInstallationStep, // Added
 
     // Modal utilities
     closeModal,
-    setupModalOutsideClick,
-
     // Installation
     handleBulkClientInstall,
     uninstallTools,
@@ -45,14 +44,9 @@ export {
     setupFormSubmitHandler
 };
 
-// Initialize modal functionality
-document.addEventListener('DOMContentLoaded', () => {
-    setupModalOutsideClick();
-});
-
 // Make certain functions available globally
 window.showInstallModal = showInstallModal;
 window.showInstallLoadingModal = showInstallLoadingModal;
-window.appendInstallLoadingMessage = appendInstallLoadingMessage;
+// window.appendInstallLoadingMessage = appendInstallLoadingMessage; // Removed
 window.hideInstallLoadingModal = hideInstallLoadingModal;
 window.uninstallTools = uninstallTools;

package/dist/web/public/js/modal/installModal.js

@@ -1,8 +1,8 @@
 import { showToast, showConfirm } from '../notifications.js';
 import { compareVersions } from './versionUtils.js';
-import { delayedAppendInstallLoadingMessage } from './messageQueue.js';
+// import { delayedAppendInstallLoadingMessage } from './messageQueue.js'; // No longer needed here
 import { showInstallLoadingModal } from './loadingModal.js';
-import { setupModalOutsideClick, closeModal, setupToggleStyles } from './modalUtils.js';
+import { closeModal, setupToggleStyles } from './modalUtils.js';
 import { handleBulkClientInstall, uninstallTools } from './installation.js';
 import {
     setupClientItems,
@@ -14,7 +14,6 @@ import {
 
 // Initialize modal functionality when DOM is loaded
 document.addEventListener('DOMContentLoaded', () => {
-    setupModalOutsideClick();
     setupToggleStyles();
 });
 
@@ -137,7 +136,7 @@ async function setupModalContent(
     setupEnvironmentVariables(mcpServer, envInputsDiv, targetData);
 
     // Handle installation arguments section
-    setupInstallationArguments(mcpServer.installation, modalArguments, mcpServer);
+    setupInstallationArguments(mcpServer.installation, modalArguments, categoryName, mcpServer);
 
     // Handle server requirements section
     setupServerRequirements(mcpServer, serverData, categoryName, serverName, modalRequirements);