imcp 0.0.19 → 0.1.2

package/dist/utils/versionUtils.js

@@ -1,3 +1,40 @@
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import axios from 'axios';
+import { Logger } from './logger.js'; // Assuming logger.js is in the same directory
+// ANSI color codes
+const COLORS = {
+    reset: '\x1b[0m',
+    yellow: '\x1b[33m'
+};
+const PACKAGE_NAME = 'imcp'; // Default package name
+export function getPackageVersion() {
+    try {
+        // First try npm environment variable (available during npm scripts)
+        if (process.env.npm_package_version) {
+            return { packageName: PACKAGE_NAME, packageVersion: 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 { packageName: PACKAGE_NAME, packageVersion: packageJson.version };
+            }
+            currentDir = path.join(currentDir, '..');
+        }
+        return { packageName: PACKAGE_NAME, packageVersion: 'unknown' };
+    }
+    catch (error) {
+        console.error('Failed to get package version:', error);
+        return { packageName: PACKAGE_NAME, packageVersion: 'unknown' };
+    }
+}
 /**
  * Utility functions for version comparison and management
  */
@@ -23,4 +60,43 @@ export function compareVersions(v1, v2) {
     }
     return 0;
 }
+/**
+ * Check if there's a newer version of the package available
+ */
+export async function checkForUpdates() {
+    Logger.debug(`Checking for updates...`);
+    try {
+        const version = await getAppVersion();
+        if (version.availableUpdate) {
+            console.log(`${COLORS.yellow}Update available for ${version.name}: ${version.version} → ${version.availableUpdate.latestVersion}${COLORS.reset}`);
+            console.log(`${COLORS.yellow}Relaunch with \`npx -y ${version.name}@latest serve\` or update package with \`npm install -g ${version.name}@latest\`${COLORS.reset}`);
+        }
+    }
+    catch (error) {
+        // Log the npm error
+        Logger.debug(`Failed to check npm registry: ${error instanceof Error ? error.message : String(error)}`);
+    }
+}
+/**
+ * Retrieves the application version and information about available updates.
+ * @returns A promise that resolves to an object containing the current packageVersion and any availableUpdates.
+ */
+export async function getAppVersion() {
+    let availableUpdate = undefined;
+    const { packageName, packageVersion } = getPackageVersion();
+    // Check for updates from npm registry
+    try {
+        const npmResponse = await axios.get(`https://registry.npmjs.org/${packageName}`);
+        if (npmResponse.data && npmResponse.data['dist-tags'] && npmResponse.data['dist-tags'].latest) {
+            const latestVersion = npmResponse.data['dist-tags'].latest;
+            if (compareVersions(latestVersion, packageVersion) > 0) {
+                availableUpdate = { latestVersion, message: `New version (${latestVersion}) is available. Relaunch with \`npx -y ${packageName}@latest serve\`` };
+            }
+        }
+    }
+    catch (npmError) {
+        Logger.debug(`Failed to fetch latest version from npm for ${packageName}: ${npmError instanceof Error ? npmError.message : String(npmError)}`);
+    }
+    return { name: packageName, version: packageVersion, availableUpdate };
+}
 //# sourceMappingURL=versionUtils.js.map

package/dist/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/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/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;