imcp 0.0.19 → 0.1.2

package/src/web/public/css/modal.css

@@ -1,6 +1,66 @@
 /* Import Inter font */
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
 
+/* --- Custom: Loading Modal Overall Status Sizing --- */
+.installation-status-header {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin-bottom: 2rem;
+}
+
+.overall-status-icon {
+    width: 80px !important;
+    height: 80px !important;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 3rem !important;
+    margin-bottom: 1rem;
+}
+
+.overall-status-icon .status-spinner,
+.overall-status-icon .status-icon-circled,
+.overall-status-icon .status-icon {
+    width: 80px !important;
+    height: 80px !important;
+    font-size: 3rem !important;
+}
+
+.overall-status-text {
+    font-size: 1.5rem !important; /* Reduced from 2.2rem */
+    font-weight: 600; /* Slightly lighter weight */
+    color: #2563eb;
+    margin: 0;
+    text-align: center;
+    letter-spacing: 0.01em;
+    padding: 0 1rem; /* Added padding for better spacing */
+}
+
+.overall-status-icon {
+    width: 60px !important; /* Reduced from 80px */
+    height: 60px !important;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 2.5rem !important; /* Reduced from 3rem */
+    margin-bottom: 0.75rem;
+    border-radius: 50%;
+    background: rgba(37, 99, 235, 0.1);
+    padding: 0.5rem;
+}
+
+.overall-status-icon .status-spinner,
+.overall-status-icon .status-icon-circled,
+.overall-status-icon .status-icon {
+    width: 100% !important;
+    height: 100% !important;
+    font-size: inherit !important;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
 /* Base styles */
 body {
     font-family: 'Inter', system-ui, -apple-system, sans-serif;
@@ -31,7 +91,7 @@ body {
     border: 3px solid #3498db !important;
     color: #222 !important;
     min-width: 320px;
-    min-height: 120px;
+    min-height: 320px; /* Increased height for larger modal */
     opacity: 1 !important;
     box-shadow: 0 0 16px #3498db;
     position: relative;
@@ -463,4 +523,235 @@ body {
     border-radius: 3px;
     border: 1px solid #e2e8f0;
     color: #2563eb;
+}
+
+/* Step message styling */
+.message-line.step-message {
+    display: flex;
+    align-items: flex-start; /* Align items to the top for timestamp */
+    padding: 1px 0; /* Further reduced padding */
+    font-size: 0.75rem; /* Further reduced font size for steps */
+    margin-bottom: 2px; /* Further reduced margin */
+    line-height: 1.4; /* Adjust line height for compactness */
+}
+
+.step-icon {
+    margin-right: 6px; /* Reduced margin */
+    font-size: 0.8rem; /* Further smaller icon */
+    width: 14px; /* Fixed width for alignment */
+    text-align: center;
+    flex-shrink: 0; /* Prevent icon from shrinking */
+    margin-top: 1px; /* Align icon better with first line of text */
+}
+
+.step-icon.success-icon {
+    color: #10b981; /* Green */
+}
+
+.step-icon.error-icon {
+    color: #ef4444; /* Red */
+}
+
+.step-icon.pending-icon {
+    color: #6b7280; /* Gray */
+}
+
+.step-text-content {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column; /* Stack text and timestamp */
+}
+
+.step-text {
+    /* flex-grow: 1; */ /* Handled by step-text-content */
+}
+
+.step-timestamp {
+    font-size: 0.65rem; /* Very small for timestamp */
+    color: #9ca3af; /* Lighter gray for timestamp */
+    margin-left: 0px; /* Align with step text, icon has its own margin */
+    padding-top: 1px;
+}
+
+/* New Loading Modal Styles */
+.installation-status-header {
+    display: flex;
+    align-items: center;
+    padding-bottom: 1rem;
+    margin-bottom: 1rem;
+    border-bottom: 1px solid #e5e7eb; /* Light gray border */
+}
+
+.overall-status-icon {
+    margin-right: 1rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px; /* Increased size for overall status icon */
+    height: 32px;
+}
+
+.overall-status-icon .status-icon {
+    font-size: 24px; /* Larger icon */
+}
+
+.overall-status-icon.completed .icon-check-container {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px; /* Slightly larger to accommodate circle + check */
+    height: 28px;
+    border-radius: 50%;
+    background-color: #10b981; /* Green background for circle */
+    border: 2px solid #059669; /* Darker green border */
+}
+
+.overall-status-icon.completed .icon-check-container .icon-check {
+    color: #ffffff; /* White checkmark */
+    font-size: 18px; /* Adjust size of checkmark within circle */
+    line-height: 1; /* Ensure check is centered */
+}
+
+.overall-status-icon.failed .icon-cross {
+    color: #ef4444; /* Red */
+}
+
+.status-spinner {
+    border: 3px solid #f3f3f3; /* Light grey */
+    border-top: 3px solid #3498db; /* Blue */
+    border-radius: 50%;
+    width: 24px;
+    height: 24px;
+    animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+    0% { transform: rotate(0deg); }
+    100% { transform: rotate(360deg); }
+}
+
+.overall-status-text {
+    font-size: 1.125rem; /* Equivalent to text-lg in Tailwind */
+    font-weight: 600; /* semibold */
+    color: #374151; /* gray-700 */
+}
+
+.installation-steps-container {
+    /* Styles for the container of the steps list */
+}
+
+.steps-list-header {
+    font-size: 0.875rem; /* text-sm */
+    font-weight: 500; /* medium */
+    color: #6b7280; /* gray-500 */
+    margin-bottom: 0.5rem;
+    padding-left: 4px; /* Align with step items */
+}
+
+.install-step-details-list {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    max-height: 250px; /* Or any desired height */
+    overflow-y: auto;
+    scrollbar-width: thin;
+    scrollbar-color: #a0aec0 #e2e8f0; /* Adjust colors as needed */
+}
+
+.install-step-details-list::-webkit-scrollbar {
+    width: 6px;
+}
+
+.install-step-details-list::-webkit-scrollbar-track {
+    background: #e2e8f0;
+    border-radius: 3px;
+}
+
+.install-step-details-list::-webkit-scrollbar-thumb {
+    background-color: #a0aec0;
+    border-radius: 3px;
+}
+
+
+.step-detail-item {
+    display: flex;
+    align-items: flex-start; /* Align icon with the top of the text block */
+    justify-content: flex-start; /* Explicitly align content to the start (left) */
+    padding: 0.3rem 0.25rem; /* Compact padding */
+    font-size: 0.8rem; /* text-xs or sm */
+    border-bottom: 1px solid #f3f4f6; /* very light separator */
+}
+.step-detail-item:last-child {
+    border-bottom: none;
+}
+
+.step-detail-item .step-icon { /* Re-using .step-icon from previous attempt, ensure it's general enough */
+    margin-right: 0.5rem;
+    font-size: 0.85rem;
+    width: 16px;
+    text-align: center;
+    flex-shrink: 0;
+    margin-top: 1px; /* Small adjustment for alignment */
+}
+
+.step-detail-item.success .icon-check-small {
+    color: #10b981;
+}
+
+.step-detail-item.error .icon-cross-small {
+    color: #ef4444;
+}
+
+.step-info {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start; /* Ensure children (name, message) are left-aligned */
+    text-align: left; /* Ensure text within step-info defaults to left */
+}
+
+.step-name {
+    font-weight: 500; /* medium */
+    color: #4b5563; /* gray-600 */
+    /* text-align: left; */ /* Should be inherited from .step-info or default */
+}
+
+.step-message {
+    font-size: 0.75rem; /* text-xs */
+    color: #6b7280; /* gray-500 */
+    word-break: break-word;
+    text-align: left; /* Explicitly align the message text to the left */
+    width: 100%; /* Ensure it takes full available width if align-items: flex-start on parent isn't enough */
+}
+
+.step-detail-item.error .step-message {
+    color: #ef4444; /* Red for error messages */
+}
+
+.step-detail-item .step-timestamp { /* Re-using .step-timestamp */
+    font-size: 0.7rem; /* Slightly larger than before for readability */
+    color: #a0aec0; /* gray-400 */
+    margin-left: 0.75rem;
+    white-space: nowrap;
+    flex-shrink: 0;
+    padding-top: 1px; /* Align with step-name */
+}
+
+/* Close button for the loading modal specifically */
+#installLoadingModal .modal-content .modal-close-btn {
+    position: absolute;
+    top: 10px;
+    right: 15px;
+    font-size: 1.8rem;
+    font-weight: bold;
+    color: #aaa;
+    background: none;
+    border: none;
+    cursor: pointer;
+    padding: 0;
+    line-height: 1;
+}
+
+#installLoadingModal .modal-content .modal-close-btn:hover {
+    color: #333;
 }

package/src/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/src/web/public/css/serverDetails.css

@@ -110,10 +110,23 @@
     padding: 0.5rem 1.5rem;
     text-align: center;
     font-weight: 600;
-    transition: all 0.15s ease;
+    transition: none; /* No delay for hover effect */
     white-space: nowrap;
 }
 
+/* Update button (orange) */
+.btn-update {
+    background-color: #fb923c; /* orange-400 */
+    color: #fff;
+    border: none;
+}
+.btn-update:hover, .btn-update:focus {
+    background-color: #f97316; /* orange-500 */
+    color: #fff;
+    border: none;
+    box-shadow: 0 0 0 2px #fed7aa;
+}
+
 /* Status badges */
 .server-item-info .flex-wrap span {
     display: inline-flex;

package/src/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/src/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,
 };