imcp 0.0.2 → 0.0.4

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,46 @@ 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 if (process.platform === 'darwin' && (command === 'code' || command === 'code-insiders')) {
+                // macOS-specific VS Code check
+                const vscodePath = command === 'code' ?
+                    '/Applications/Visual Studio Code.app' :
+                    '/Applications/Visual Studio Code - Insiders.app';
+                await execAsync(`test -d "${vscodePath}"`);
+            } else {
+                // Unix-like systems
+                await execAsync(`which ${command}`);
+            }
+            return true;
+        } catch (error) {
+            if (process.platform === 'darwin' && (command === 'code' || command === 'code-insiders')) {
+                // Try checking in ~/Applications as well for macOS
+                try {
+                    const homedir = process.env.HOME;
+                    const vscodePath = command === 'code' ?
+                        `${homedir}/Applications/Visual Studio Code.app` :
+                        `${homedir}/Applications/Visual Studio Code - Insiders.app`;
+                    await execAsync(`test -d "${vscodePath}"`);
+                    return true;
+                } catch (error) {
+                    return false;
+                }
+            }
+            return false;
+        }
+    }
+
     private async installClient(clientName: string, env?: Record<string, string>): Promise<OperationStatus> {
         // Check if client is supported
         if (!SUPPORTED_CLIENTS[clientName]) {
@@ -258,18 +299,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 +353,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
             };
         }
     }
@@ -354,6 +509,12 @@ export class ClientInstaller {
             const npmPath = await this.getNpmPath();
             serverConfig.env['APPDATA'] = npmPath;
         }
+        // Convert backslashes to forward slashes in args paths
+        if (serverConfig.args) {
+            serverConfig.args = serverConfig.args.map((arg: string) =>
+                typeof arg === 'string' ? arg.replace(/\\/g, '/') : arg
+            );
+        }
 
         // Add or update the server configuration
         settings.mcpServers[serverName] = {
@@ -389,6 +550,13 @@ export class ClientInstaller {
             settings.mcp.servers = {};
         }
 
+        // Convert backslashes to forward slashes in args paths
+        if (installConfig.args) {
+            installConfig.args = installConfig.args.map((arg: string) =>
+                typeof arg === 'string' ? arg.replace(/\\/g, '/') : arg
+            );
+        }
+
         // Add or update the server configuration
         settings.mcp.servers[serverName] = {
             command: installConfig.command,
@@ -396,6 +564,7 @@ export class ClientInstaller {
             env: installConfig.env
         };
 
+
         // Write the updated settings back to the file
         await writeJsonFile(settingPath, settings);
     }

package/src/utils/clientUtils.ts

@@ -84,6 +84,8 @@ export function resolveNpmModulePath(pathString: string): string {
  * @param createIfNotExist Whether to create the file if it doesn't exist
  * @returns The parsed JSON content
  */
+import stripJsonComments from 'strip-json-comments';
+
 export async function readJsonFile(filePath: string, createIfNotExist = false): Promise<any> {
     try {
         // Ensure directory exists
@@ -92,7 +94,9 @@ export async function readJsonFile(filePath: string, createIfNotExist = false):
         }
 
         const content = await fs.readFile(filePath, 'utf8');
-        return JSON.parse(content);
+        // Remove comments and trailing commas from JSON content
+        const sanitizedContent = stripJsonComments(content).replace(/,(\s*[}\]])/g, '$1');
+        return JSON.parse(sanitizedContent);
     } catch (error) {
         if ((error as NodeJS.ErrnoException).code === 'ENOENT' && createIfNotExist) {
             return {};

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>