imcp 0.0.1 → 0.0.3

package/src/core/installers/BaseInstaller.ts

@@ -4,6 +4,7 @@ import fs from 'fs/promises';
 import { SETTINGS_DIR } from '../constants.js';
 import { extractZipFile } from '../../utils/clientUtils.js';
 import { RequirementInstaller } from './RequirementInstaller.js';
+import { Logger } from '../../utils/logger.js';
 
 /**
  * Abstract base class with common functionality for all requirement installers
@@ -20,7 +21,7 @@ export abstract class BaseInstaller implements RequirementInstaller {
     abstract canHandle(requirement: RequirementConfig): boolean;
     abstract install(requirement: RequirementConfig): Promise<RequirementStatus>;
     abstract checkInstallation(requirement: RequirementConfig): Promise<RequirementStatus>;
-    
+
     /**
      * Check if updates are available for the requirement
      * @param requirement The requirement to check
@@ -33,14 +34,14 @@ export abstract class BaseInstaller implements RequirementInstaller {
             if (!currentStatus.installed) {
                 return currentStatus;
             }
-            
+
             // If the version doesn't contain "latest", no update check needed
             if (!requirement.version.includes('latest')) {
                 return currentStatus;
             }
-            
+
             let latestVersion: string | undefined;
-            
+
             // Check based on registry type
             if (requirement.registry?.githubRelease) {
                 latestVersion = await this.getGitHubLatestVersion(requirement.registry.githubRelease.repository);
@@ -56,20 +57,24 @@ export abstract class BaseInstaller implements RequirementInstaller {
                     // Add other types as needed
                 }
             }
-            
+
             // If we found a latest version and it's different from current
             if (latestVersion && latestVersion !== currentStatus.version) {
                 return {
                     ...currentStatus,
                     availableUpdate: {
                         version: latestVersion,
-                        message: `Update available: ${currentStatus.version} → ${latestVersion}`,
-                        checkTime: new Date().toISOString()
-                    }
+                        message: `Update available: ${currentStatus.version} → ${latestVersion}`
+                    },
+                    lastCheckTime: new Date().toISOString()
+                };
+            } else {
+                return {
+                    ...currentStatus,
+                    lastCheckTime: new Date().toISOString()
                 };
             }
-            
-            return currentStatus;
+
         } catch (error) {
             // Don't update status on error, just log it
             console.warn(`Error checking for updates for ${requirement.name}: ${error instanceof Error ? error.message : String(error)}`);
@@ -109,24 +114,35 @@ export abstract class BaseInstaller implements RequirementInstaller {
         let resolvedAssetName = assetName || '';
         let resolvedAssetsName = assetsName || '';
 
+        const { stdout } = await this.execPromise(`gh release view --repo ${repository} --json tagName --jq .tagName`);
+        const latestTag = stdout.trim();
         // Handle latest version detection
         if (version.includes('${latest}') || version === 'latest') {
-            const { stdout } = await this.execPromise(`gh release view --repo ${repository} --json tagName --jq .tagName`);
-            const latestTag = stdout.trim();
+
             let latestVersion = latestTag
             if (latestVersion.startsWith('v') && version.startsWith('v')) {
                 latestVersion = latestVersion.substring(1); // Remove 'v' prefix if present
                 // Replace ${latest} in version and asset names
                 version = version.replace('${latest}', latestVersion);
                 if (assetsName) {
-                    resolvedAssetsName = assetsName.replace('${latest}', latestVersion);
+                    resolvedAssetsName = assetsName.replace('${latest}', latestVersion).replace('${version}', version);
                 }
                 if (assetName) {
-                    resolvedAssetName = assetName.replace('${latest}', latestVersion);
+                    resolvedAssetName = assetName.replace('${latest}', latestVersion).replace('${version}', version);
                 }
             }
+        } else {
+            if (assetsName) {
+                resolvedAssetsName = assetsName.replace('${latest}', version).replace('${version}', version);
+            }
+            if (assetName) {
+                resolvedAssetName = assetName.replace('${latest}', version).replace('${version}', version);
+            }
+            Logger.debug(`Downloading ${requirement.name} from GitHub release ${repository} version ${version}`);
+            Logger.debug(`ResolvedAssetsName} ${resolvedAssetName}; ResolvedAsetName} ${resolvedAssetName}`);
         }
         const pattern = resolvedAssetsName ? resolvedAssetsName : resolvedAssetName;
+        Logger.debug(`Resolved pattern: ${pattern}`);
 
         if (!pattern) {
             throw new Error('Either assetsName or assetName must be specified for GitHub release downloads');
@@ -135,7 +151,7 @@ export abstract class BaseInstaller implements RequirementInstaller {
         // Download the release asset
         const downloadPath = path.join(this.downloadsDir, path.basename(pattern));
         if (!await this.fileExists(downloadPath)) {
-            await this.execPromise(`gh release download ${version} --repo ${repository} --pattern "${pattern}" -O "${downloadPath}"`);
+            await this.execPromise(`gh release download ${version.startsWith('v') ? version : `v${version}`} --repo ${repository} --pattern "${pattern}" -O "${downloadPath}"`);
         }
 
         // Handle zip file extraction if the downloaded file is a zip
@@ -257,14 +273,14 @@ export abstract class BaseInstaller implements RequirementInstaller {
             // Use GitHub CLI to get the latest release
             const { stdout } = await this.execPromise(`gh release view --repo ${repository} --json tagName --jq .tagName`);
             const latestTag = stdout.trim();
-            
+
             // Remove 'v' prefix if present
             return latestTag.startsWith('v') ? latestTag.substring(1) : latestTag;
         } catch (error) {
             // If gh command fails, try to get the latest tag
             const { stdout } = await this.execPromise(`git ls-remote --tags --refs https://github.com/${repository}.git | sort -t '/' -k 3 -V | tail -n 1 | awk -F/ '{print $3}'`);
             let latestTag = stdout.trim();
-            
+
             // Remove 'v' prefix if present
             return latestTag.startsWith('v') ? latestTag.substring(1) : latestTag;
         }

package/src/core/installers/ClientInstaller.ts

@@ -12,6 +12,7 @@ import { SUPPORTED_CLIENTS } from '../constants.js';
 import { resolveNpmModulePath, readJsonFile, writeJsonFile } from '../../utils/clientUtils.js';
 import { exec } from 'child_process';
 import { promisify } from 'util';
+import { Logger } from '../../utils/logger.js';
 
 export class ClientInstaller {
     private configProvider: ConfigurationProvider;
@@ -46,6 +47,27 @@ export class ClientInstaller {
         }
     }
 
+    /**
+     * Check if a command is available on the system
+     * @param command The command to check
+     * @returns True if the command is available, false otherwise
+     */
+    private async isCommandAvailable(command: string): Promise<boolean> {
+        const execAsync = promisify(exec);
+        try {
+            if (process.platform === 'win32') {
+                // Windows-specific command check
+                await execAsync(`where ${command}`);
+            } else {
+                // Unix-like systems
+                await execAsync(`which ${command}`);
+            }
+            return true;
+        } catch (error) {
+            return false;
+        }
+    }
+
     private async installClient(clientName: string, env?: Record<string, string>): Promise<OperationStatus> {
         // Check if client is supported
         if (!SUPPORTED_CLIENTS[clientName]) {
@@ -258,18 +280,34 @@ export class ClientInstaller {
     ): Promise<{ success: boolean; message: string }> {
         try {
             if (!SUPPORTED_CLIENTS[clientName]) {
+                Logger.debug(`Client ${clientName} is not supported.`);
                 return { success: false, message: `Unsupported client: ${clientName}` };
             }
 
             const clientSettings = SUPPORTED_CLIENTS[clientName];
 
-            // Determine which setting path to use based on VS Code type (regular or insiders)
-            const settingPath = process.env.CODE_INSIDERS
-                ? clientSettings.codeInsiderSettingPath
-                : clientSettings.codeSettingPath;
+            // Get both setting paths for VS Code and VS Code Insiders
+            const regularSettingPath = clientSettings.codeSettingPath;
+            const insidersSettingPath = clientSettings.codeInsiderSettingPath;
+
+            Logger.debug(`Starting installation of ${this.serverName} for client ${clientName}`);
+            Logger.debug(`VS Code settings path configured as: ${regularSettingPath}`);
+            Logger.debug(`VS Code Insiders settings path configured as: ${insidersSettingPath}`);
 
-            if (!settingPath) {
-                return { success: false, message: `No settings path found for client: ${clientName}` };
+            // Check if VS Code and VS Code Insiders are installed
+            const isVSCodeInstalled = await this.isCommandAvailable('code');
+            const isVSCodeInsidersInstalled = await this.isCommandAvailable('code-insiders');
+            Logger.debug(isVSCodeInstalled ? 'VS Code detected on system' : 'VS Code not detected on system');
+            Logger.debug(isVSCodeInsidersInstalled ? 'VS Code Insiders detected on system' : 'VS Code Insiders not detected on system');
+            Logger.debug(`VS Code Insiders installed: ${isVSCodeInsidersInstalled}`);
+
+            // If neither is installed, we can't proceed
+            if (!isVSCodeInstalled && !isVSCodeInsidersInstalled) {
+                Logger.debug('No VS Code installations detected on system. Cannot update settings.');
+                return {
+                    success: false,
+                    message: `Neither VS Code nor VS Code Insiders are installed on this system. Cannot update settings for client: ${clientName}. Please install VS Code or VS Code Insiders and try again.`
+                };
             }
 
             // Clone the installation configuration to make modifications
@@ -296,26 +334,124 @@ export class ClientInstaller {
                 Object.assign(installConfig.env, env);
             }
 
-            // Update client-specific settings
+            // Keep track of success for both installations
+            let regularSuccess = false;
+            let insidersSuccess = false;
+            let errorMessages: string[] = [];
+
+            // Update client-specific settings for both VS Code and VS Code Insiders
             if (clientName === 'MSRooCode' || clientName === 'Cline') {
-                await this.updateClineOrMSRooSettings(settingPath, this.serverName, installConfig, clientName);
+                // Update VS Code settings if VS Code is installed
+                if (isVSCodeInstalled) {
+                    try {
+                        Logger.debug(`Updating VS Code settings for ${clientName} at path: ${regularSettingPath}`);
+                        await this.updateClineOrMSRooSettings(regularSettingPath, this.serverName, installConfig, clientName);
+                        regularSuccess = true;
+                        Logger.debug(`Settings successfully updated to ${regularSettingPath} for ${clientName} (VS Code)`);
+                    } catch (error) {
+                        const errorMsg = `Error updating VS Code settings: ${error instanceof Error ? error.message : String(error)}`;
+                        errorMessages.push(errorMsg);
+                        console.error(errorMsg);
+                    }
+                }
+
+                // Update VS Code Insiders settings if VS Code Insiders is installed
+                if (isVSCodeInsidersInstalled) {
+                    try {
+                        Logger.debug(`Updating VS Code Insiders settings for ${clientName} at path: ${insidersSettingPath}`);
+                        await this.updateClineOrMSRooSettings(insidersSettingPath, this.serverName, installConfig, clientName);
+                        insidersSuccess = true;
+                        Logger.debug(`Settings successfully updated to ${insidersSettingPath} for ${clientName} (VS Code Insiders)`);
+                    } catch (error) {
+                        const errorMsg = `Error updating VS Code Insiders settings: ${error instanceof Error ? error.message : String(error)}`;
+                        errorMessages.push(errorMsg);
+                        console.error(errorMsg);
+                    }
+                }
             } else if (clientName === 'GithubCopilot') {
-                await this.updateGithubCopilotSettings(settingPath, this.serverName, installConfig);
+                // Update VS Code settings if VS Code is installed
+                if (isVSCodeInstalled) {
+                    try {
+                        Logger.debug(`Updating VS Code settings for ${clientName} at path: ${regularSettingPath}`);
+                        await this.updateGithubCopilotSettings(regularSettingPath, this.serverName, installConfig);
+                        regularSuccess = true;
+                        Logger.debug(`Settings successfully updated to ${regularSettingPath} for ${clientName} (VS Code)`);
+                    } catch (error) {
+                        const errorMsg = `Error updating VS Code settings: ${error instanceof Error ? error.message : String(error)}`;
+                        errorMessages.push(errorMsg);
+                        console.error(errorMsg);
+                    }
+                }
+
+                // Update VS Code Insiders settings if VS Code Insiders is installed
+                if (isVSCodeInsidersInstalled) {
+                    try {
+                        Logger.debug(`Updating VS Code Insiders settings for ${clientName} at path: ${insidersSettingPath}`);
+                        await this.updateGithubCopilotSettings(insidersSettingPath, this.serverName, installConfig);
+                        insidersSuccess = true;
+                        Logger.debug(`Settings successfully updated to ${insidersSettingPath} for ${clientName} (VS Code Insiders)`);
+                    } catch (error) {
+                        const errorMsg = `Error updating VS Code Insiders settings: ${error instanceof Error ? error.message : String(error)}`;
+                        errorMessages.push(errorMsg);
+                        console.error(errorMsg);
+                    }
+                }
             } else {
+                Logger.debug(`No implementation exists for updating settings for client: ${clientName}`);
                 return {
                     success: false,
                     message: `Client ${clientName} is supported but no implementation exists for updating its settings`
                 };
             }
 
+            // Determine overall success status and message
+            const overallSuccess = regularSuccess || insidersSuccess;
+            let message = '';
+
+            if (overallSuccess) {
+                const successDetails = [];
+                if (regularSuccess) successDetails.push('VS Code');
+                if (insidersSuccess) successDetails.push('VS Code Insiders');
+
+                // Create a more compact success message with specific paths
+                const pathDetails = [];
+                if (regularSuccess) {
+                    pathDetails.push(`\n[VS Code]: ${regularSettingPath}`);
+                }
+                if (insidersSuccess) {
+                    pathDetails.push(`\n[VS Code Insiders]: ${insidersSettingPath}`);
+                }
+                message = `Successfully installed ${this.serverName} for client: ${clientName}. ${pathDetails.join(' ')}`;
+
+                // Add partial failure information if applicable
+                if (errorMessages.length > 0) {
+                    message += `\nHowever, some errors occurred:\n${errorMessages.join('\n- ')}`;
+                }
+                Logger.debug(`Installation complete: ${message}`);
+            } else {
+                // Create a more detailed failure message that includes the detection results
+                const detectionInfo = [];
+                if (!isVSCodeInstalled) detectionInfo.push('VS Code not detected');
+                if (!isVSCodeInsidersInstalled) detectionInfo.push('VS Code Insiders not detected');
+
+                if (errorMessages.length > 0) {
+                    message = `Failed to install ${this.serverName} for client: ${clientName}.\nDetection status: [${detectionInfo.join(', ')}].\nErrors:\n- ${errorMessages.join('\n- ')}`;
+                } else {
+                    message = `Failed to install ${this.serverName} for client: ${clientName}.\nDetection status: [${detectionInfo.join(', ')}]`;
+                }
+                console.error(`Installation failed: ${message}`);
+            }
+
             return {
-                success: true,
-                message: `Successfully installed ${this.serverName} for client: ${clientName}`
+                success: overallSuccess,
+                message: message
             };
         } catch (error) {
+            const errorMsg = `Error installing client ${clientName}: ${error instanceof Error ? error.message : String(error)}`;
+            console.error(errorMsg);
             return {
                 success: false,
-                message: `Error installing client ${clientName}: ${error instanceof Error ? error.message : String(error)}`
+                message: errorMsg
             };
         }
     }

package/src/core/installers/GeneralInstaller.ts

@@ -70,11 +70,6 @@ export class GeneralInstaller extends BaseInstaller {
                 installed: true,
                 version: requirement.version,
                 inProgress: false,
-                // Store installation path in a way that it can be retrieved later if needed
-                updateInfo: {
-                    available: false,
-                    installPath
-                }
             };
         } catch (error) {
             return {

package/src/core/installers/NpmInstaller.ts

@@ -1,6 +1,7 @@
 import { stat } from 'fs';
 import { RequirementConfig, RequirementStatus } from '../types.js';
 import { BaseInstaller } from './BaseInstaller.js';
+import { compareVersions } from '../../utils/versionUtils.js';
 
 /**
  * Installer implementation for NPM packages
@@ -52,7 +53,7 @@ export class NpmInstaller extends BaseInstaller {
     async install(requirement: RequirementConfig): Promise<RequirementStatus> {
         try {
             const status = await this.checkInstallation(requirement);
-            if (status.installed) {
+            if (status.installed && status.version && compareVersions(status.version, requirement.version) === 0) {
                 return status;
             }
 

package/src/core/types.ts

@@ -14,14 +14,9 @@ export interface RequirementStatus {
   availableUpdate?: {
     version: string;
     message: string;
-    checkTime: string;
   };
+  lastCheckTime?: string;
   operationStatus?: OperationStatus;
-  updateInfo?: {
-    available: boolean;
-    latestVersion?: string;
-    [key: string]: any;
-  } | null;
 }
 
 export interface MCPServerStatus {
@@ -70,12 +65,19 @@ export interface ServerOperationResult {
 export interface MCPConfiguration {
   localServerCategories: MCPServerCategory[];
   feeds: Record<string, FeedConfiguration>;
+  clientMCPSettings?: Record<string, Record<string, any>>;
 }
 
 export interface ServerInstallOptions {
   force?: boolean;
   env?: Record<string, string>; // Environment variables for installation
   targetClients?: string[]; // Target clients for configuration
+  requirements?: RequirementConfig[];
+}
+
+export interface UpdateRequirementOptions {
+  requirementName: string;
+  updateVersion: string;
 }
 
 export interface ServerUninstallOptions {

package/src/services/ServerService.ts

@@ -9,6 +9,7 @@ import {
   ServerUninstallOptions
 } from '../core/types.js';
 import { mcpManager } from '../core/MCPManager.js';
+import { UPDATE_CHECK_INTERVAL_MS } from '../core/constants.js';
 import { updateCheckTracker } from '../utils/UpdateCheckTracker.js';
 
 const __dirname = path.dirname(fileURLToPath(import.meta.url));
@@ -74,6 +75,18 @@ export class ServerService {
           const currentStatus = serverCategory.installationStatus?.requirementsStatus[requirement.name];
           if (!currentStatus) continue;
 
+          // Skip update check if last check was less than UPDATE_CHECK_INTERVAL_MS ago
+          if (currentStatus.lastCheckTime) {
+            const lastCheckTime = new Date(currentStatus.lastCheckTime);
+            const currentTime = new Date();
+            const timeSinceLastCheck = currentTime.getTime() - lastCheckTime.getTime();
+
+            if (timeSinceLastCheck < UPDATE_CHECK_INTERVAL_MS) {
+              Logger.debug(`Skipping update check for ${requirement.name}, last check was ${Math.round(timeSinceLastCheck / 1000)} seconds ago`);
+              continue;
+            }
+          }
+
           // Check for updates
           const updatedStatus = await requirementService.checkRequirementForUpdates(requirement);
 
@@ -90,6 +103,15 @@ export class ServerService {
               serverCategory.installationStatus.requirementsStatus[requirement.name] = updatedStatus;
             }
           }
+          currentStatus.lastCheckTime = new Date().toISOString();
+          await configProvider.updateRequirementStatus(
+            serverCategory.name,
+            requirement.name,
+            currentStatus
+          );
+          if (serverCategory.installationStatus?.requirementsStatus) {
+            serverCategory.installationStatus.requirementsStatus[requirement.name] = updatedStatus;
+          }
         }
       }
     } finally {

package/src/utils/clientUtils.ts

@@ -92,7 +92,9 @@ export async function readJsonFile(filePath: string, createIfNotExist = false):
         }
 
         const content = await fs.readFile(filePath, 'utf8');
-        return JSON.parse(content);
+        // Remove trailing commas from JSON content
+        const sanitizedContent = content.replace(/,(\s*[}\]])/g, '$1');
+        return JSON.parse(sanitizedContent);
     } catch (error) {
         if ((error as NodeJS.ErrnoException).code === 'ENOENT' && createIfNotExist) {
             return {};

package/src/utils/versionUtils.ts

@@ -0,0 +1,29 @@
+/**
+ * Utility functions for version comparison and management
+ */
+
+/**
+ * Compare two semantic version strings
+ * @param v1 First version
+ * @param v2 Second version
+ * @returns -1 if v1 < v2, 0 if v1 = v2, 1 if v1 > v2
+ *          (or more specifically, a negative number if v1 < v2,
+ *           a positive number if v1 > v2, 0 if equal)
+ */
+export function compareVersions(v1: string, v2: string): number {
+    const v1Parts = v1.split('.').map(Number);
+    const v2Parts = v2.split('.').map(Number);
+
+    for (let i = 0; i < Math.max(v1Parts.length, v2Parts.length); i++) {
+        const v1Part = i < v1Parts.length ? v1Parts[i] : 0;
+        const v2Part = i < v2Parts.length ? v2Parts[i] : 0;
+
+        if (v1Part !== v2Part) {
+            // This returns the actual difference, which is:
+            // negative if v1Part < v2Part, positive if v1Part > v2Part
+            return v1Part - v2Part;
+        }
+    }
+
+    return 0;
+}

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

@@ -34,6 +34,12 @@ body {
     min-height: 120px;
     opacity: 1 !important;
     box-shadow: 0 0 16px #3498db;
+    position: relative;
+    padding-top: 24px;
+}
+
+#installLoadingModal .modal-close-button {
+    z-index: 3200 !important;
 }
 /* Loading modal always on top */
 #installLoadingModal {
@@ -61,8 +67,37 @@ body {
     transition: all 0.3s ease-out;
     animation: slideIn 0.3s ease-out;
 }
-
 /* Close button */
+.modal-close-button {
+    position: absolute;
+    right: 12px;
+    top: 12px;
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    background: #ffffff;
+    border: 2px solid #3498db;
+    color: #3498db;
+    font-size: 22px;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: all 0.2s ease;
+    z-index: 10;
+    padding: 0;
+    line-height: 1;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.modal-close-button:hover {
+    background-color: #3498db;
+    color: #ffffff;
+    border-color: #3498db;
+    transform: scale(1.05);
+    box-shadow: 0 0 8px rgba(52, 152, 219, 0.4);
+}
+
 .close {
     position: absolute;
     right: 1.5rem;
@@ -71,20 +106,14 @@ body {
     font-weight: 600;
     color: #6b7280;
     cursor: pointer;
-    width: 32px;
-    height: 32px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 50%;
     transition: color 0.2s ease;
 }
 
 .close:hover {
-    background-color: #f3f4f6;
     color: #111827;
 }
 
+
 /* Sections layout */
 .modal-sections {
     margin-top: 1.5rem;
@@ -240,11 +269,62 @@ body {
     }
 }
 
- /* Center loading icon in loading modal */
+/* Center loading icon in loading modal */
 #installLoadingModal .loading-icon {
     display: flex;
     justify-content: center;
     align-items: center;
     width: 100%;
     margin-bottom: 8px;
+}
+
+/* Loading message styles */
+#installLoadingMessage {
+    font-size: 0.85rem !important;
+    line-height: 1.6;
+    word-break: break-word;
+    max-height: 200px;
+    overflow-y: auto;
+    scrollbar-width: thin;
+    scrollbar-color: #3498db #f0f0f0;
+}
+
+#installLoadingMessage::-webkit-scrollbar {
+    width: 6px;
+}
+
+#installLoadingMessage::-webkit-scrollbar-track {
+    background: #f0f0f0;
+    border-radius: 3px;
+}
+
+#installLoadingMessage::-webkit-scrollbar-thumb {
+    background-color: #3498db;
+    border-radius: 3px;
+}
+
+#installLoadingMessage div {
+    margin-bottom: 8px;
+    padding: 4px 0;
+}
+
+/* Error message styling */
+#installLoadingMessage span[style*="color:red"] {
+    color: #f59e0b !important;
+    font-weight: 500;
+    display: block;
+    padding: 4px 8px;
+    background: rgba(245, 158, 11, 0.1);
+    border-radius: 4px;
+    margin: 4px 0;
+}
+
+/* File path styling */
+#installLoadingMessage .file-path {
+    font-family: 'Consolas', monospace;
+    background: #f8fafc;
+    padding: 2px 4px;
+    border-radius: 3px;
+    border: 1px solid #e2e8f0;
+    color: #2563eb;
 }

package/src/web/public/index.html

@@ -112,18 +112,24 @@
     </div>
     <!-- Loading Modal -->
     <div id="installLoadingModal" class="modal" style="display:none; z-index:2000;">
-        <div class="modal-content" style="text-align:center; pointer-events:auto;">
+        <div class="modal-content" style="text-align:center; pointer-events:auto; position:relative;">
+            <button class="modal-close-button" onclick="hideInstallLoadingModal()" aria-label="Close">&times;</button>
             <div style="margin-top:40px;">
                 <div class="loading-icon" style="margin-bottom:16px;">
                     <svg width="48" height="48" viewBox="0 0 48 48" fill="none">
-                        <circle cx="24" cy="24" r="20" stroke="#888" stroke-width="4" opacity="0.2"/>
-                        <circle cx="24" cy="24" r="20" stroke="#3498db" stroke-width="4" stroke-linecap="round" stroke-dasharray="100" stroke-dashoffset="60">
-                            <animateTransform attributeName="transform" type="rotate" from="0 24 24" to="360 24 24" dur="1s" repeatCount="indefinite"/>
+                        <circle cx="24" cy="24" r="20" stroke="#888" stroke-width="4" opacity="0.2" />
+                        <circle cx="24" cy="24" r="20" stroke="#3498db" stroke-width="4" stroke-linecap="round"
+                            stroke-dasharray="100" stroke-dashoffset="60">
+                            <animateTransform attributeName="transform" type="rotate" from="0 24 24" to="360 24 24"
+                                dur="1s" repeatCount="indefinite" />
                         </circle>
                     </svg>
                 </div>
-                <div class="loading-title" style="font-size:1.5rem; font-weight:bold; margin-bottom:8px;">Installing...</div>
-                <div id="installLoadingMessage" style="min-height:48px; max-height:160px; overflow:auto; background:#f8f8f8; border-radius:6px; padding:12px; font-size:1rem; color:#444; text-align:left;"></div>
+                <div class="loading-title" style="font-size:1.5rem; font-weight:bold; margin-bottom:8px;">Installing...
+                </div>
+                <div id="installLoadingMessage"
+                    style="min-height:48px; max-height:160px; overflow:auto; background:#f8f8f8; border-radius:6px; padding:12px; font-size:1rem; color:#444; text-align:left;">
+                </div>
             </div>
         </div>
     </div>