feat: enhance env script with conflict resolution and tests (#2726)

Author: Kitenite

apps/web/client/.env.example

@@ -15,7 +15,7 @@ CSB_API_KEY="<Your api key from https://codesandbox.io/t/api>"
 
 # ------------- Optional Keys -------------
 
-# Fast apply model providers to reliably resolve code changes. Either will work since we will fall back.
+# Fast apply model providers to reliably resolve code changes if search replace does not work. We will attempt to use one or the other.
 # Option 1: MorphLLM
 MORPH_API_KEY="<Your api key from https://morphllm.com/dashboard>"
 # Option 2: Relace

bun.lock

@@ -34,7 +34,7 @@
         "prepare": "husky",
         "clean": "git clean -xdf node_modules",
         "clean:workspaces": "bun --filter '*' clean",
-        "setup:env": "bun --filter @onlook/scripts build && node packages/scripts/dist/index.js",
+        "setup:env": "cd packages/scripts && bun run start",
         "docker:build": "docker compose build",
         "docker:up": "docker compose up -d",
         "docker:down": "docker compose down",

package.json

@@ -6,7 +6,8 @@
     "scripts": {
         "build": "bun build src/index.ts --outdir=dist --target=node",
         "dev": "tsc --watch",
-        "start": "bun run build && bun dist/index.js",
+        "start": "bun run build && node dist/index.js",
+        "test": "bun test",
         "typecheck": "tsc --noEmit",
         "lint": "eslint . --ext .ts",
         "format": "prettier --write ."
@@ -15,15 +16,17 @@
         "env": "dist/index.js"
     },
     "dependencies": {
-        "chalk": "^4.1.2",
-        "commander": "^4.1.1",
-        "prompts": "^2.4.2",
-        "ora": "^5.4.1"
+        "chalk": "^5.6.0",
+        "commander": "^14.0.0",
+        "ora": "^8.2.0",
+        "prompts": "^2.4.2"
     },
     "devDependencies": {
         "@onlook/typescript": "*",
+        "@types/jest": "^30.0.0",
         "@types/node": "^20.10.5",
         "@types/prompts": "^2.4.9",
+        "jest": "^30.0.5",
         "typescript": "^5.3.3"
     }
 }

packages/scripts/package.json

@@ -1,6 +1,6 @@
 import chalk from 'chalk';
+import fs from 'node:fs';
 import prompts from 'prompts';
-import { writeEnvFile } from './helpers';
 
 interface ApiKeyConfig {
     name: string;
@@ -14,54 +14,232 @@ const API_KEYS: Record<string, ApiKeyConfig> = {
         name: 'CSB_API_KEY',
         message: 'Enter your Codesandbox API key:',
         required: true,
-        description: 'Codesandbox',
     },
     OPENROUTER_API_KEY: {
         name: 'OPENROUTER_API_KEY',
         message: 'Enter your OpenRouter API key:',
         required: true,
-        description: 'OpenRouter',
-    },
-    MORPH_API_KEY: {
-        name: 'MORPH_API_KEY',
-        message: 'Enter your MorphLLM API key (optional, leave blank if you are using Relace):',
-        required: false,
-        description: 'MorphLLM',
-    },
-    RELACE_API_KEY: {
-        name: 'RELACE_API_KEY',
-        message: 'Enter your Relace API key (optional, leave blank if you are using MorphLLM):',
-        required: false,
-        description: 'Relace',
     },
 };
 
+/**
+ * Reads existing API keys from the environment file
+ * @param clientEnvPath - Path to the client .env file
+ * @returns Object containing existing API key values
+ */
+const readExistingApiKeys = (clientEnvPath: string): Record<string, string> => {
+    const existingKeys: Record<string, string> = {};
+
+    if (!fs.existsSync(clientEnvPath)) {
+        return existingKeys;
+    }
+
+    try {
+        const content = fs.readFileSync(clientEnvPath, 'utf-8');
+        const lines = content.split('\n');
+        const validApiKeys = new Set(Object.keys(API_KEYS));
+
+        for (const line of lines) {
+            const trimmedLine = line.trim();
+            if (
+                trimmedLine.includes('=') &&
+                !trimmedLine.startsWith('#') &&
+                trimmedLine.indexOf('=') > 0
+            ) {
+                const [key, ...valueParts] = trimmedLine.split('=');
+                const cleanKey = key?.trim();
+
+                if (cleanKey && validApiKeys.has(cleanKey)) {
+                    existingKeys[cleanKey] = valueParts.join('=');
+                }
+            }
+        }
+    } catch (err) {
+        console.warn(chalk.yellow(`Warning: Could not read existing .env file: ${err}`));
+    }
+
+    return existingKeys;
+};
+
 export const promptAndWriteApiKeys = async (clientEnvPath: string) => {
-    const responses = await promptForApiKeys();
+    const existingKeys = readExistingApiKeys(clientEnvPath);
+    const responses = await promptForApiKeys(existingKeys);
     const envContent = generateEnvContent(responses);
-    writeEnvFile(clientEnvPath, envContent, 'web client');
+
+    // Since we already handled existing key conflicts in promptForApiKeys,
+    // we need to manually update the file to avoid duplicate prompting
+    await writeApiKeysToFile(clientEnvPath, envContent);
+};
+
+/**
+ * Writes API keys to file, removing old API key sections
+ * @param filePath - Path to the .env file
+ * @param newContent - New API key content to write
+ */
+const writeApiKeysToFile = async (filePath: string, newContent: string): Promise<void> => {
+    try {
+        const existingContent = fs.existsSync(filePath) ? fs.readFileSync(filePath, 'utf-8') : '';
+        const filteredContent = removeOldApiKeyEntries(existingContent);
+
+        ensureDirectoryExists(filePath);
+
+        // Only add newline separator if filtered content exists and doesn't end with newline
+        const separator = filteredContent && !filteredContent.endsWith('\n') ? '\n' : '';
+        const finalContent = filteredContent + separator + newContent;
+        fs.writeFileSync(filePath, finalContent);
+
+        console.log(chalk.green('✅ API keys updated successfully!'));
+    } catch (err) {
+        console.error(chalk.red('Failed to write API keys:'), err);
+        throw err;
+    }
+};
+
+/**
+ * Removes old API key entries from existing content
+ * @param content - Existing file content
+ * @returns Filtered content without old API keys
+ */
+const removeOldApiKeyEntries = (content: string): string => {
+    const lines = content.split('\n');
+    const filteredLines: string[] = [];
+    const apiKeyNames = new Set(Object.keys(API_KEYS));
+    let skipNextLine = false;
+
+    for (const line of lines) {
+        const trimmedLine = line.trim();
+
+        // Skip API key variable lines
+        const keyName = extractKeyName(trimmedLine);
+        if (trimmedLine.includes('=') && keyName && apiKeyNames.has(keyName)) {
+            skipNextLine = false;
+            continue;
+        }
+
+        // Skip empty lines after API key comments
+        if (skipNextLine && trimmedLine === '') {
+            skipNextLine = false;
+            continue;
+        }
+
+        filteredLines.push(line);
+        skipNextLine = false;
+    }
+
+    return filteredLines.join('\n').trim();
+};
+
+/**
+ * Extracts description from a comment line
+ * @param commentLine - Comment line starting with #
+ * @returns Description text or undefined
+ */
+const extractDescription = (commentLine: string): string | undefined => {
+    const match = commentLine.match(/^#\s*(.+)/);
+    return match?.[1]?.trim();
+};
+
+/**
+ * Extracts key name from a variable line
+ * @param variableLine - Variable line with key=value format
+ * @returns Key name or undefined
+ */
+const extractKeyName = (variableLine: string): string | undefined => {
+    const equalIndex = variableLine.indexOf('=');
+    if (equalIndex > 0) {
+        return variableLine.substring(0, equalIndex).trim();
+    }
+    return undefined;
+};
+
+/**
+ * Ensures the directory for a file path exists
+ * @param filePath - Full path to the file
+ */
+const ensureDirectoryExists = (filePath: string): void => {
+    const dir = filePath.substring(0, filePath.lastIndexOf('/'));
+    if (!fs.existsSync(dir)) {
+        fs.mkdirSync(dir, { recursive: true });
+    }
 };
 
+/**
+ * Generates environment content for API keys
+ * @param responses - User responses for API keys
+ * @returns Formatted environment content
+ */
 const generateEnvContent = (responses: Record<string, string>): string => {
-    return Object.entries(API_KEYS)
-        .map(([key, config]) => {
-            const value = responses[key] || '';
-            return config.description
-                ? `# ${config.description}\n${key}=${value}\n`
-                : `${key}=${value}\n`;
-        })
-        .join('\n');
+    const lines: string[] = [];
+    const entries = Object.entries(API_KEYS);
+
+    for (const [key] of entries) {
+        const value = responses[key] || '';
+        lines.push(`${key}=${value}`);
+    }
+
+    return lines.join('\n');
 };
 
-const promptForApiKeys = async () => {
-    const responses = await prompts(
-        Object.values(API_KEYS).map((api) => ({
+const promptForApiKeys = async (existingKeys: Record<string, string>) => {
+    const responses: Record<string, string> = {};
+
+    console.log(chalk.blue('\n🔑 API Key Configuration'));
+    console.log(chalk.gray('Configure your API keys for Onlook services\n'));
+
+    for (const [keyName, config] of Object.entries(API_KEYS)) {
+        const hasExisting = existingKeys[keyName];
+
+        if (hasExisting) {
+            console.log(chalk.yellow(`\n⚠️  ${keyName} API key already exists`));
+
+            const action = await prompts({
+                type: 'select',
+                name: 'choice',
+                message: `What would you like to do with ${keyName}?`,
+                choices: [
+                    { title: 'Keep existing key', value: 'keep' },
+                    { title: 'Replace with new key', value: 'replace' },
+                    ...(config.required ? [] : [{ title: 'Remove key', value: 'remove' }]),
+                ],
+                initial: 0,
+            });
+
+            if (action.choice === 'keep') {
+                responses[keyName] = hasExisting;
+                console.log(chalk.green(`✓ Keeping existing ${keyName} key`));
+                continue;
+            } else if (action.choice === 'remove') {
+                responses[keyName] = '';
+                console.log(chalk.blue(`✓ Removed ${keyName} key`));
+                continue;
+            }
+            // If 'replace' is selected, continue to prompt for new key
+        }
+
+        const response = await prompts({
             type: 'password',
-            name: api.name,
-            message: api.message,
-            required: api.required,
-        })),
-    );
+            name: 'value',
+            message: hasExisting ? `Enter new ${keyName} API key:` : config.message,
+            validate: config.required
+                ? (value: string) => value.length > 0 || `${keyName} is required`
+                : undefined,
+        });
+
+        if (response.value !== undefined) {
+            responses[keyName] = response.value;
+            if (response.value) {
+                console.log(chalk.green(`✓ ${hasExisting ? 'Updated' : 'Set'} ${keyName} key`));
+            }
+        } else {
+            // User cancelled, keep existing if available
+            if (hasExisting) {
+                responses[keyName] = hasExisting;
+            } else if (config.required) {
+                console.error(chalk.red(`${keyName} API key is required.`));
+                process.exit(1);
+            }
+        }
+    }
 
     validateResponses(responses);
     return responses;