feat(ai): support model selection for AI chat panel

Node side: fetch the SDK's supportedModels() list once per process from
the first live query (aiModelList event + getSupportedModels peer), and
emit aiSessionInfo with the session's resolved model from the init
message so the browser can learn what "Default" actually resolves to.

Styles: hover-revealed model switcher in the chat header, two-line item
layout for the DropdownButton popup, and the mid-conversation model
switch notice.

Strings: AI_CHAT_MODEL_* keys for the switcher, placeholder and notice.

Author: abose

src-node/claude-code-agent.js

@@ -45,6 +45,27 @@ let queryModule = null;
 // Session state
 let currentSessionId = null;
 
+// Model list from the SDK's supportedModels() — fetched once per process,
+// best-effort, from the first live query. null until available.
+let cachedModelList = null;
+
+/**
+ * Fetch the model list from a live Query once per process. Best-effort:
+ * the control request can fail on older CLIs or non-streaming input —
+ * the browser keeps its static fallback list in that case.
+ */
+function _fetchModelListOnce(queryResult) {
+    if (cachedModelList) {
+        return;
+    }
+    queryResult.supportedModels().then(function (models) {
+        if (models && models.length) {
+            cachedModelList = models;
+            nodeConnector.triggerPeer("aiModelList", { models: models });
+        }
+    }).catch(function () {});
+}
+
 // Active query state
 let currentAbortController = null;
 
@@ -652,6 +673,15 @@ exports.setPermissionMode = async function (params) {
     return { success: true };
 };
 
+/**
+ * Return the model list fetched from the SDK, or null if no query has
+ * populated it yet (browser falls back to a static alias list).
+ * Called from browser via execPeer("getSupportedModels").
+ */
+exports.getSupportedModels = async function () {
+    return { models: cachedModelList };
+};
+
 /**
  * Resume a previous session by setting the session ID.
  * The next sendPrompt call will use queryOptions.resume with this session ID.
@@ -1602,6 +1632,7 @@ async function _runQuery(requestId, prompt, projectPath, model, signal, locale,
             if (!receivedFirstMessage) {
                 receivedFirstMessage = true;
                 clearTimeout(connectionTimer);
+                _fetchModelListOnce(result);
             }
             // Check abort
             if (signal.aborted) {
@@ -1615,6 +1646,17 @@ async function _runQuery(requestId, prompt, projectPath, model, signal, locale,
                 _log("Session:", currentSessionId);
             }
 
+            // The init message carries the fully-resolved model for the
+            // session — with no model param this is the user's saved
+            // Claude Code default. requestedModel lets the browser tell
+            // an explicit pick apart from default resolution.
+            if (message.type === "system" && message.subtype === "init" && message.model) {
+                nodeConnector.triggerPeer("aiSessionInfo", {
+                    model: message.model,
+                    requestedModel: model || null
+                });
+            }
+
             // Subagent tool extraction. The SDK delivers the parent
             // agent's tool calls as a stream of stream_event messages
             // (content_block_start / content_block_delta / content_block_

src/nls/root/strings.js

@@ -2509,6 +2509,7 @@ define({
     "AI_CHAT_NEW_BTN": "New",
     "AI_CHAT_THINKING": "Thinking...",
     "AI_CHAT_PLACEHOLDER": "Ask Claude...",
+    "AI_CHAT_PLACEHOLDER_MODEL": "Ask {0}...",
     "AI_CHAT_SEND_TITLE": "Send message",
     "AI_CHAT_STOP_TITLE": "Stop generation (Esc)",
     "AI_CHAT_CLI_NOT_FOUND": "Claude Code Not Installed",
@@ -2647,6 +2648,10 @@ define({
     "AI_CHAT_MODE_INFO_EDIT": "AI can edit files. Shell commands need approval (Click to switch)",
     "AI_CHAT_MODE_INFO_FULL_AUTO": "AI can edit files and run commands without approval (Click to switch)",
     "AI_CHAT_MODE_SWITCH_HINT": "[or Shift+Tab]",
+    "AI_CHAT_MODEL_DEFAULT": "Default",
+    "AI_CHAT_MODEL_DEFAULT_DESC_CURRENT": "Currently {0}",
+    "AI_CHAT_MODEL_SELECT_TITLE": "Choose the AI model for this chat",
+    "AI_CHAT_MODEL_SWITCHED_NOTICE": "Switched to {0}. Applies from your next message; the first response may take a moment longer while the cache rebuilds.",
     "AI_CHAT_INPUT_HINT": "Press {0} to send · {1} for new line",
     "AI_CHAT_BASH_CONFIRM_TITLE": "Allow command?",
     "AI_CHAT_BASH_ALLOW": "Allow",

src/styles/Extn-AIChatPanel.less

@@ -131,6 +131,36 @@
         transition: opacity 0.5s ease;
     }
 
+    /* Model switcher — hover-revealed like .ai-chat-header-actions
+       (Claude Code CLI doesn't persistently show the model either). */
+    .ai-model-select {
+        position: absolute;
+        left: 10px;
+        display: flex;
+        align-items: center;
+        gap: 5px;
+        height: 26px;
+        padding: 0 6px;
+        color: @project-panel-text-2;
+        font-size: @label-font-size;
+        cursor: pointer;
+        opacity: 0;
+        pointer-events: none;
+        transition: opacity 0.5s ease;
+
+        .ai-model-select-label {
+            max-width: 90px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+
+        i {
+            font-size: 9px;
+            opacity: 0.7;
+        }
+    }
+
     .ai-history-btn,
     .ai-settings-btn {
         display: flex;
@@ -162,12 +192,67 @@
     transition: opacity 0.15s ease;
 }
 
+.ai-tab-container:hover .ai-model-select,
+.ai-tab-container .ai-model-select.dropdown-open {
+    opacity: 1;
+    pointer-events: auto;
+    transition: opacity 0.15s ease;
+}
 
-/* Left-align title when sidebar is narrow to free space for action buttons */
+/* Left-align title when sidebar is narrow to free space for action buttons.
+   The model switcher joins the flow so it can't overlap the title. */
 @container (max-width: 380px) {
     .ai-chat-header {
         justify-content: flex-start;
+
+        .ai-model-select {
+            position: static;
+            margin-right: 8px;
+            padding-left: 0;
+        }
+    }
+}
+
+/* ── Model selector dropdown ───────────────────────────────────────── */
+/* Rendered by the standard DropdownButton widget (native Phoenix dropdown
+   look) — only the two-line item layout needs styling here. */
+.dropdownbutton-popup.ai-model-dropdown-popup {
+    min-width: 220px;
+    max-width: 320px;
+    max-height: 420px; // global 160px cap scrolls 5 two-line items
+
+    li a {
+        white-space: normal;
+        overflow-wrap: break-word;
     }
+
+    .ai-model-item-name {
+        display: block;
+    }
+
+    .ai-model-item-desc {
+        display: block;
+        font-size: @ai-text-meta;
+        opacity: 0.7;
+        padding-left: 17px;
+        line-height: @ai-line-compact;
+    }
+}
+
+/* One-time inline notice after switching model mid-conversation.
+   Sentence-length status prose: secondary tier (12px), reading line-height,
+   left-aligned — meta 11px/centered is for one-line stats, not sentences. */
+.ai-model-switch-notice {
+    padding: 8px 12px;
+    margin: 8px;
+    background: rgba(255, 255, 255, 0.04);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    border-radius: 6px;
+    font-size: @ai-text-secondary;
+    line-height: @ai-line-prose;
+    color: @project-panel-text-2;
+    white-space: normal;
+    overflow-wrap: break-word;
 }
 
 /* ── Session history dropdown ──────────────────────────────────────── */