feat: add Claude Code settings dialog for custom API provider

    - Settings gear button in AI chat header (visible on hover)
    - Modal dialog with API Key, Base URL, and API Timeout fields
    - Preferences persist via PreferencesManager
    - env overrides passed to Claude Code SDK merged with process.env
    - Custom endpoint notice shown once per session
    - Connection timeout (60s) with actionable error messages
    - Detailed error hints for invalid API key / unreachable endpoint

Author: abose

src-node/claude-code-agent.js

@@ -140,7 +140,7 @@ exports.checkAvailability = async function () {
  *   aiProgress, aiTextStream, aiToolEdit, aiError, aiComplete
  */
 exports.sendPrompt = async function (params) {
-    const { prompt, projectPath, sessionAction, model, locale, selectionContext, images } = params;
+    const { prompt, projectPath, sessionAction, model, locale, selectionContext, images, envOverrides } = params;
     const requestId = Date.now().toString(36) + Math.random().toString(36).slice(2, 7);
 
     // Handle session
@@ -183,7 +183,7 @@ exports.sendPrompt = async function (params) {
     }
 
     // Run the query asynchronously — don't await here so we return requestId immediately
-    _runQuery(requestId, enrichedPrompt, projectPath, model, currentAbortController.signal, locale, images)
+    _runQuery(requestId, enrichedPrompt, projectPath, model, currentAbortController.signal, locale, images, envOverrides)
         .catch(err => {
             console.error("[Phoenix AI] Query error:", err);
         });
@@ -287,10 +287,11 @@ exports.clearClarification = async function () {
 /**
  * Internal: run a Claude SDK query and stream results back to the browser.
  */
-async function _runQuery(requestId, prompt, projectPath, model, signal, locale, images) {
+async function _runQuery(requestId, prompt, projectPath, model, signal, locale, images, envOverrides) {
     let editCount = 0;
     let toolCounter = 0;
     let queryFn;
+    let connectionTimer = null;
 
     try {
         queryFn = await getQueryFn();
@@ -315,10 +316,24 @@ async function _runQuery(requestId, prompt, projectPath, model, signal, locale,
         phase: "start"
     });
 
+    if (envOverrides) {
+        const keys = Object.keys(envOverrides);
+        console.log("[AI] Using env overrides:", keys.map(k => k + "=" + (k.includes("TOKEN") || k.includes("KEY") ? "***" : envOverrides[k])).join(", "));
+    }
+
+    let _lastStderrLines = [];
+    const MAX_STDERR_LINES = 20;
+
     const queryOptions = {
         cwd: projectPath || process.cwd(),
         maxTurns: undefined,
-        stderr: (data) => console.log("[AI stderr]", data),
+        stderr: (data) => {
+            console.log("[AI stderr]", data);
+            _lastStderrLines.push(data);
+            if (_lastStderrLines.length > MAX_STDERR_LINES) {
+                _lastStderrLines.shift();
+            }
+        },
         allowedTools: [
             "Read", "Edit", "Write", "Glob", "Grep", "Bash",
             "AskUserQuestion", "Task",
@@ -377,6 +392,7 @@ async function _runQuery(requestId, prompt, projectPath, model, signal, locale,
                 : ""),
         includePartialMessages: true,
         abortController: currentAbortController,
+        env: envOverrides ? Object.assign({}, process.env, envOverrides) : undefined,
         hooks: {
             PreToolUse: [
                 {
@@ -650,7 +666,37 @@ async function _runQuery(requestId, prompt, projectPath, model, signal, locale,
         let textDeltaCount = 0;
         let textStreamSendCount = 0;
 
+        // Connection timeout — abort if no messages within 60s
+        let receivedFirstMessage = false;
+        const CONNECTION_TIMEOUT_MS = 60000;
+        connectionTimer = setTimeout(() => {
+            if (!receivedFirstMessage && !signal.aborted) {
+                _log("Connection timeout — no response in " + (CONNECTION_TIMEOUT_MS / 1000) + "s");
+                const stderrHint = _lastStderrLines
+                    .filter(line => !line.startsWith("Spawning Claude Code"))
+                    .join("\n").trim();
+                let timeoutMsg = "Connection timed out — no response from API after " +
+                    (CONNECTION_TIMEOUT_MS / 1000) + " seconds.";
+                if (envOverrides && envOverrides.ANTHROPIC_BASE_URL) {
+                    timeoutMsg += " Check that the Base URL (" + envOverrides.ANTHROPIC_BASE_URL +
+                        ") is correct and reachable.";
+                }
+                if (stderrHint) {
+                    timeoutMsg += "\n" + stderrHint;
+                }
+                nodeConnector.triggerPeer("aiError", {
+                    requestId: requestId,
+                    error: timeoutMsg
+                });
+                currentAbortController.abort();
+            }
+        }, CONNECTION_TIMEOUT_MS);
+
         for await (const message of result) {
+            if (!receivedFirstMessage) {
+                receivedFirstMessage = true;
+                clearTimeout(connectionTimer);
+            }
             // Check abort
             if (signal.aborted) {
                 _log("Aborted");
@@ -858,6 +904,7 @@ async function _runQuery(requestId, prompt, projectPath, model, signal, locale,
             });
         }
 
+        clearTimeout(connectionTimer);
         _log("Complete: tools=" + toolCounter, "edits=" + editCount,
             "textDeltas=" + textDeltaCount, "textSent=" + textStreamSendCount);
 
@@ -868,6 +915,7 @@ async function _runQuery(requestId, prompt, projectPath, model, signal, locale,
         });
 
     } catch (err) {
+        clearTimeout(connectionTimer);
         const errMsg = err.message || String(err);
         const isAbort = signal.aborted || /abort/i.test(errMsg);
 
@@ -886,12 +934,31 @@ async function _runQuery(requestId, prompt, projectPath, model, signal, locale,
 
         _log("Error:", errMsg.slice(0, 200));
 
+        // Build a detailed error message including stderr context
+        let detailedError = errMsg;
+        const stderrContext = _lastStderrLines
+            .filter(line => !line.startsWith("Spawning Claude Code"))
+            .join("\n").trim();
+        if (stderrContext) {
+            detailedError += "\n" + stderrContext;
+        }
+        // Add hint for custom API settings when process exits with code 1
+        if (/exited with code 1/.test(errMsg) && envOverrides) {
+            if (envOverrides.ANTHROPIC_AUTH_TOKEN) {
+                detailedError += "\nThis may be caused by an invalid API key. " +
+                    "Check your API key in Claude Code Settings.";
+            }
+            if (envOverrides.ANTHROPIC_BASE_URL) {
+                detailedError += "\nCustom Base URL: " + envOverrides.ANTHROPIC_BASE_URL;
+            }
+        }
+
         // Clear session after error to prevent cascading failures from resuming a broken session
         currentSessionId = null;
 
         nodeConnector.triggerPeer("aiError", {
             requestId: requestId,
-            error: errMsg
+            error: detailedError
         });
 
         // Always send aiComplete after aiError so the UI exits streaming state

src/nls/root/strings.js

@@ -1930,6 +1930,16 @@ define({
     "AI_CHAT_HISTORY_DELETE_CONFIRM": "Delete this session?",
     "AI_CHAT_SWITCH_PROJECT_TITLE": "AI is working",
     "AI_CHAT_SWITCH_PROJECT_MSG": "AI is currently working on a task. Switching projects will stop it. Continue?",
+    "AI_CHAT_SETTINGS_TITLE": "Claude Code Settings",
+    "AI_SETTINGS_API_KEY": "API Key",
+    "AI_SETTINGS_BASE_URL": "Base URL",
+    "AI_SETTINGS_API_TIMEOUT": "API Timeout (ms)",
+    "AI_SETTINGS_API_KEY_PLACEHOLDER": "Enter your Anthropic API key",
+    "AI_SETTINGS_BASE_URL_PLACEHOLDER": "Leave blank for default",
+    "AI_SETTINGS_API_TIMEOUT_PLACEHOLDER": "Leave blank for default",
+    "AI_SETTINGS_SAVE": "Save",
+    "AI_SETTINGS_RESET": "Reset",
+    "AI_SETTINGS_CUSTOM_ENDPOINT_NOTICE": "Using custom API endpoint: {0}",
 
     // demo start - Phoenix Code Playground - Interactive Onboarding
     "DEMO_SECTION1_TITLE": "Edit in Live Preview",

src/styles/Extn-AIChatPanel.less

@@ -89,6 +89,28 @@
         }
     }
 
+    .ai-settings-btn {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background: none;
+        border: none;
+        color: @project-panel-text-2;
+        font-size: @menu-item-font-size;
+        width: 26px;
+        height: 26px;
+        border-radius: 3px;
+        cursor: pointer;
+        opacity: 0;
+        transition: opacity 0.15s ease, background-color 0.15s ease;
+        pointer-events: none;
+
+        &:hover {
+            opacity: 1;
+            background-color: rgba(255, 255, 255, 0.06);
+        }
+    }
+
     .ai-new-session-btn {
         display: flex;
         align-items: center;
@@ -110,6 +132,12 @@
     }
 }
 
+/* Show settings gear on tab container hover */
+.ai-tab-container:hover .ai-settings-btn {
+    opacity: 0.7;
+    pointer-events: auto;
+}
+
 /* ── Session history dropdown ──────────────────────────────────────── */
 /* When history is open, hide chat content and show the dropdown instead */
 .ai-chat-panel.ai-history-open {
@@ -1589,3 +1617,68 @@
         }
     }
 }
+
+/* ── AI Settings Dialog ────────────────────────────────────────────── */
+.ai-settings-dialog {
+    .ai-settings-form {
+        display: flex;
+        flex-direction: column;
+        gap: 14px;
+        padding: 4px 0;
+    }
+
+    .ai-settings-field {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+
+        label {
+            font-size: 12px;
+            font-weight: 600;
+            color: @project-panel-text-2;
+        }
+
+        input {
+            width: 100%;
+            box-sizing: border-box;
+            padding: 8px 10px;
+            height: 30px;
+            border: 1px solid rgba(255, 255, 255, 0.15);
+            border-radius: 3px;
+            background: rgba(0, 0, 0, 0.2);
+            color: @project-panel-text-1;
+            font-size: 13px;
+            outline: none;
+
+            &:focus {
+                border-color: rgba(76, 175, 80, 0.5);
+            }
+
+            &::placeholder {
+                color: @project-panel-text-2;
+                opacity: 0.5;
+            }
+        }
+    }
+
+    .ai-settings-footer {
+        display: flex;
+        align-items: center;
+    }
+
+    .ai-settings-footer-spacer {
+        flex: 1;
+    }
+}
+
+/* ── Custom endpoint notice ────────────────────────────────────────── */
+.ai-custom-endpoint-notice {
+    padding: 6px 10px;
+    margin: 0 8px 4px 8px;
+    background: rgba(76, 175, 80, 0.08);
+    border: 1px solid rgba(76, 175, 80, 0.2);
+    border-radius: 4px;
+    font-size: @sidebar-xs-font-size;
+    color: @project-panel-text-2;
+    text-align: center;
+}