Pass API keys for docker build

docker/Dockerfile

@@ -1,6 +1,18 @@
 # Multi-stage build for Chrome DevTools Frontend
 FROM --platform=linux/amd64 ubuntu:22.04 AS builder
 
+# Build arguments for API keys (optional, defaults to empty)
+ARG OPENAI_API_KEY=""
+ARG OPENROUTER_API_KEY=""
+ARG GROQ_API_KEY=""
+ARG LITELLM_API_KEY=""
+
+# Set environment variables for build process
+ENV OPENAI_API_KEY=${OPENAI_API_KEY}
+ENV OPENROUTER_API_KEY=${OPENROUTER_API_KEY}
+ENV GROQ_API_KEY=${GROQ_API_KEY}
+ENV LITELLM_API_KEY=${LITELLM_API_KEY}
+
 # Install required packages
 RUN apt-get update && apt-get install -y \
     curl \

docker/docker-compose.yml

@@ -5,18 +5,29 @@ services:
     build:
       context: ..
       dockerfile: docker/Dockerfile
+      args:
+        # API keys passed from host environment variables
+        # These can be set via .env file or exported in shell
+        OPENAI_API_KEY: ${OPENAI_API_KEY:-}
+        OPENROUTER_API_KEY: ${OPENROUTER_API_KEY:-}
+        GROQ_API_KEY: ${GROQ_API_KEY:-}
+        LITELLM_API_KEY: ${LITELLM_API_KEY:-}
     image: devtools-frontend:latest
     container_name: devtools-frontend
     ports:
       - "8000:8000"
     restart: unless-stopped
-    volumes:
+    # volumes:
       # For development: mount the built files directly (optional)
-      # Uncomment the line below to use local files instead of container files
-      # - ../out/Default/gen/front_end:/usr/share/nginx/html:ro
+      # Uncomment the lines below to use local files instead of container files
+      # volumes:
+      #   - ../out/Default/gen/front_end:/usr/share/nginx/html:ro
     environment:
       - NGINX_HOST=localhost
       - NGINX_PORT=8000
+      # Optional: Pass API keys to runtime for debugging (not required for functionality)
+      - OPENAI_API_KEY=${OPENAI_API_KEY:-}
+      - OPENROUTER_API_KEY=${OPENROUTER_API_KEY:-}
     healthcheck:
       test: ["CMD", "wget", "--no-verbose", "--tries=1", "--spider", "http://localhost:8000/"]
       interval: 30s

front_end/panels/ai_chat/BUILD.gn

@@ -28,6 +28,7 @@ devtools_module("ai_chat") {
     "core/Types.ts",
     "core/AgentService.ts",
     "core/Constants.ts",
+    "core/EnvironmentConfig.ts",
     "core/GraphConfigs.ts",
     "core/ConfigurableGraph.ts",
     "core/BaseOrchestratorAgent.ts",
@@ -133,6 +134,7 @@ _ai_chat_sources = [
     "core/Types.ts",
     "core/AgentService.ts",
     "core/Constants.ts",
+    "core/EnvironmentConfig.ts",
     "core/GraphConfigs.ts",
     "core/ConfigurableGraph.ts",
     "core/BaseOrchestratorAgent.ts",

front_end/panels/ai_chat/LLM/GroqProvider.ts

@@ -7,6 +7,7 @@ import { LLMBaseProvider } from './LLMProvider.js';
 import { LLMRetryManager } from './LLMErrorHandler.js';
 import { LLMResponseParser } from './LLMResponseParser.js';
 import { createLogger } from '../core/Logger.js';
+import { getEnvironmentConfig } from '../core/EnvironmentConfig.js';
 
 const logger = createLogger('GroqProvider');
 
@@ -38,10 +39,29 @@ export class GroqProvider extends LLMBaseProvider {
 
   readonly name: LLMProvider = 'groq';
 
+  private readonly envConfig = getEnvironmentConfig();
+
   constructor(private readonly apiKey: string) {
     super();
   }
 
+  /**
+   * Get the API key with fallback hierarchy:
+   * 1. Constructor parameter (for backward compatibility)
+   * 2. localStorage (user-configured)
+   * 3. Build-time environment config
+   * 4. Empty string
+   */
+  private getApiKey(): string {
+    // Constructor parameter (highest priority for backward compatibility)
+    if (this.getApiKey() && this.getApiKey().trim() !== '') {
+      return this.getApiKey().trim();
+    }
+
+    // Use environment config which handles localStorage -> build-time -> empty fallback
+    return this.envConfig.getApiKey('groq');
+  }
+
   /**
    * Get the chat completions endpoint URL
    */
@@ -92,7 +112,7 @@ export class GroqProvider extends LLMBaseProvider {
         method: 'POST',
         headers: {
           'Content-Type': 'application/json',
-          'Authorization': `Bearer ${this.apiKey}`,
+          'Authorization': `Bearer ${this.getApiKey()}`,
         },
         body: JSON.stringify(payloadBody),
       });
@@ -259,7 +279,7 @@ export class GroqProvider extends LLMBaseProvider {
       const response = await fetch(this.getModelsEndpoint(), {
         method: 'GET',
         headers: {
-          'Authorization': `Bearer ${this.apiKey}`,
+          'Authorization': `Bearer ${this.getApiKey()}`,
         },
       });
 
@@ -432,29 +452,15 @@ export class GroqProvider extends LLMBaseProvider {
    * Validate that required credentials are available for Groq
    */
   validateCredentials(): {isValid: boolean, message: string, missingItems?: string[]} {
-    const storageKeys = this.getCredentialStorageKeys();
-    const apiKey = localStorage.getItem(storageKeys.apiKey!);
-
-    if (!apiKey) {
-      return {
-        isValid: false,
-        message: 'Groq API key is required. Please add your API key in Settings.',
-        missingItems: ['API Key']
-      };
-    }
-
-    return {
-      isValid: true,
-      message: 'Groq credentials are configured correctly.'
-    };
+    return this.envConfig.validateCredentials('groq');
   }
 
   /**
    * Get the storage keys this provider uses for credentials
    */
   getCredentialStorageKeys(): {apiKey: string} {
     return {
-      apiKey: 'ai_chat_groq_api_key'
+      apiKey: this.envConfig.getStorageKey('groq')
     };
   }
 }

front_end/panels/ai_chat/LLM/OpenAIProvider.ts

@@ -7,6 +7,7 @@ import { LLMBaseProvider } from './LLMProvider.js';
 import { LLMRetryManager } from './LLMErrorHandler.js';
 import { LLMResponseParser } from './LLMResponseParser.js';
 import { createLogger } from '../core/Logger.js';
+import { getEnvironmentConfig } from '../core/EnvironmentConfig.js';
 
 const logger = createLogger('OpenAIProvider');
 
@@ -42,10 +43,29 @@ export class OpenAIProvider extends LLMBaseProvider {
 
   readonly name: LLMProvider = 'openai';
 
+  private readonly envConfig = getEnvironmentConfig();
+
   constructor(private readonly apiKey: string) {
     super();
   }
 
+  /**
+   * Get the API key with fallback hierarchy:
+   * 1. Constructor parameter (for backward compatibility)
+   * 2. localStorage (user-configured)
+   * 3. Build-time environment config
+   * 4. Empty string
+   */
+  private getApiKey(): string {
+    // Constructor parameter (highest priority for backward compatibility)
+    if (this.apiKey && this.apiKey.trim() !== '') {
+      return this.apiKey.trim();
+    }
+
+    // Use environment config which handles localStorage -> build-time -> empty fallback
+    return this.envConfig.getApiKey('openai');
+  }
+
   /**
    * Determines the model family based on the model name
    */
@@ -280,7 +300,7 @@ export class OpenAIProvider extends LLMBaseProvider {
           metadata: {
             provider: 'openai',
             errorType: 'api_error',
-            hasApiKey: !!this.apiKey
+            hasApiKey: !!this.getApiKey()
           }
         }, context.traceId);
       }
@@ -299,7 +319,7 @@ export class OpenAIProvider extends LLMBaseProvider {
         method: 'POST',
         headers: {
           'Content-Type': 'application/json',
-          Authorization: `Bearer ${this.apiKey}`,
+          Authorization: `Bearer ${this.getApiKey()}`,
         },
         body: JSON.stringify(payloadBody),
       });

front_end/panels/ai_chat/LLM/OpenRouterProvider.ts

@@ -7,6 +7,7 @@ import { LLMBaseProvider } from './LLMProvider.js';
 import { LLMRetryManager } from './LLMErrorHandler.js';
 import { LLMResponseParser } from './LLMResponseParser.js';
 import { createLogger } from '../core/Logger.js';
+import { getEnvironmentConfig } from '../core/EnvironmentConfig.js';
 
 const logger = createLogger('OpenRouterProvider');
 
@@ -59,10 +60,29 @@ export class OpenRouterProvider extends LLMBaseProvider {
   private visionModelsCacheExpiry: number = 0;
   private static readonly CACHE_DURATION_MS = 30 * 60 * 1000; // 30 minutes
 
+  private readonly envConfig = getEnvironmentConfig();
+
   constructor(private readonly apiKey: string) {
     super();
   }
 
+  /**
+   * Get the API key with fallback hierarchy:
+   * 1. Constructor parameter (for backward compatibility)
+   * 2. localStorage (user-configured)
+   * 3. Build-time environment config
+   * 4. Empty string
+   */
+  private getApiKey(): string {
+    // Constructor parameter (highest priority for backward compatibility)
+    if (this.apiKey && this.apiKey.trim() !== '') {
+      return this.apiKey.trim();
+    }
+
+    // Use environment config which handles localStorage -> build-time -> empty fallback
+    return this.envConfig.getApiKey('openrouter');
+  }
+
   /**
    * Check if a model doesn't support temperature parameter
    * OpenAI's GPT-5, O3, and O4 models accessed through OpenRouter don't support temperature
@@ -144,7 +164,7 @@ export class OpenRouterProvider extends LLMBaseProvider {
         method: 'POST',
         headers: {
           'Content-Type': 'application/json',
-          'Authorization': `Bearer ${this.apiKey}`,
+          'Authorization': `Bearer ${this.getApiKey()}`,
           'HTTP-Referer': 'https://browseroperator.io', // Site URL for rankings on openrouter.ai
           'X-Title': 'Browser Operator', // Site title for rankings on openrouter.ai
         },
@@ -324,7 +344,7 @@ export class OpenRouterProvider extends LLMBaseProvider {
       const response = await fetch(this.getToolSupportingModelsEndpoint(), {
         method: 'GET',
         headers: {
-          'Authorization': `Bearer ${this.apiKey}`,
+          'Authorization': `Bearer ${this.getApiKey()}`,
         },
       });
 
@@ -358,7 +378,7 @@ export class OpenRouterProvider extends LLMBaseProvider {
       const response = await fetch(this.getVisionModelsEndpoint(), {
         method: 'GET',
         headers: {
-          'Authorization': `Bearer ${this.apiKey}`,
+          'Authorization': `Bearer ${this.getApiKey()}`,
         },
       });
 
@@ -621,15 +641,21 @@ export class OpenRouterProvider extends LLMBaseProvider {
     logger.debug('=== VALIDATING OPENROUTER CREDENTIALS ===');
     logger.debug('Timestamp:', new Date().toISOString());
 
-    const storageKeys = this.getCredentialStorageKeys();
-    logger.debug('Storage keys:', storageKeys);
+    // Use the new environment config for validation
+    const validationResult = this.envConfig.validateCredentials('openrouter');
+
+    // Enhanced logging for debugging
+    const apiKey = this.getApiKey();
+    const source = this.envConfig.getApiKeySource('openrouter');
+    const buildInfo = this.envConfig.getBuildInfo();
 
-    const apiKey = localStorage.getItem(storageKeys.apiKey!);
     logger.debug('API key check:');
-    logger.debug('- Storage key used:', storageKeys.apiKey);
     logger.debug('- API key exists:', !!apiKey);
     logger.debug('- API key length:', apiKey?.length || 0);
     logger.debug('- API key prefix:', apiKey?.substring(0, 8) + '...' || 'none');
+    logger.debug('- API key source:', source);
+    logger.debug('- Build config available:', buildInfo.hasBuildConfig);
+    logger.debug('- Build time:', buildInfo.buildTime);
 
     // Also check OAuth-related storage for debugging
     const authMethod = localStorage.getItem('openrouter_auth_method');
@@ -638,37 +664,22 @@ export class OpenRouterProvider extends LLMBaseProvider {
     logger.debug('- Auth method:', authMethod);
     logger.debug('- OAuth token exists:', !!oauthToken);
 
-    // Check all OpenRouter-related localStorage keys
-    const allKeys = Object.keys(localStorage);
-    const openRouterKeys = allKeys.filter(key => key.includes('openrouter') || key.includes('ai_chat'));
-    logger.debug('All OpenRouter-related storage keys:');
-    openRouterKeys.forEach(key => {
-      const value = localStorage.getItem(key);
-      logger.debug(`- ${key}:`, value?.substring(0, 50) + (value && value.length > 50 ? '...' : '') || 'null');
-    });
-
-    if (!apiKey) {
+    if (validationResult.isValid) {
+      logger.info('✅ OpenRouter credentials validation passed');
+    } else {
       logger.warn('❌ OpenRouter API key missing');
-      return {
-        isValid: false,
-        message: 'OpenRouter API key is required. Please add your API key in Settings.',
-        missingItems: ['API Key']
-      };
     }
 
-    logger.info('✅ OpenRouter credentials validation passed');
-    return {
-      isValid: true,
-      message: 'OpenRouter credentials are configured correctly.'
-    };
+    return validationResult;
   }
 
   /**
    * Get the storage keys this provider uses for credentials
    */
   getCredentialStorageKeys(): {apiKey: string} {
+    const storageKey = this.envConfig.getStorageKey('openrouter');
     const keys = {
-      apiKey: 'ai_chat_openrouter_api_key'
+      apiKey: storageKey
     };
     logger.debug('OpenRouter credential storage keys:', keys);
     return keys;