feat(models): fetch live model lists from CLIs, allow custom ids

Each agent definition now declares an optional `listModels` spec; the
daemon runs the CLI's own list-models command (e.g. `opencode models`,
`cursor-agent models`) during agent detection and uses the result as
the dropdown options. Hardcoded entries shrink to a `fallbackModels`
hint that only kicks in when the CLI has no listing command (Claude,
Codex, Gemini, Qwen) or when the listing fails (e.g. unauth'd
cursor-agent).

UI groups `provider/model` ids by provider via <optgroup> so opencode's
~175 live models stay navigable, and the Settings dialog gains a
"Custom…" entry that opens a free-text input for any model id the
listing didn't surface yet. Daemon validates picks against the live
cache + fallback, with a permissive sanitizer for custom ids.

daemon/agents.js

@@ -6,21 +6,30 @@ import path from 'node:path';
 
 const execFileP = promisify(execFile);
 
-// Per-agent model picker:
+// Per-agent model picker.
 //
-//   - `models`             : selectable model presets shown in the UI. The
-//                            first entry is treated as the default. `id`
-//                            of `'default'` means "let the CLI pick" — the
-//                            agent runs with no `--model` flag, so the
-//                            user's local CLI config wins.
+//   - `listModels`         : optional spec for fetching the model list from
+//                            the CLI itself ({ args, parse, timeoutMs }).
+//                            When defined we run it during agent detection
+//                            (best-effort, with a timeout) and use the
+//                            result. If the listing fails we fall back to
+//                            `fallbackModels` so the UI still has something
+//                            to show.
+//   - `fallbackModels`     : static hint list. Used as the source of truth
+//                            for CLIs that don't expose a listing command
+//                            (Claude Code, Codex, Gemini CLI, Qwen Code)
+//                            and as the fallback for the others.
 //   - `reasoningOptions`   : optional reasoning-effort presets (currently
-//                            only Codex exposes this knob). Same `default`
-//                            convention as models.
+//                            only Codex exposes this knob).
 //   - `buildArgs(prompt, imagePaths, extraAllowedDirs, options)` returns
 //     argv for the child process. `options = { model, reasoning }` carries
 //     whatever the user picked in the model menu — agents that don't take a
 //     model flag ignore them.
 //
+// Every model list is prefixed with a synthetic `'default'` entry meaning
+// "let the CLI pick" — the agent runs with no `--model` flag, so the
+// user's local CLI config wins.
+//
 // `extraAllowedDirs` is a list of absolute directories the agent must be
 // permitted to read files from (skill seeds, design-system specs) that live
 // outside the project cwd. Currently only Claude Code wires this through
@@ -32,17 +41,45 @@ const execFileP = promisify(execFile);
 //     `--output-format stream-json`. Daemon parses it into typed events
 //     (text / thinking / tool_use / tool_result / status) for the UI.
 //   - 'plain' (default)    : raw text, forwarded chunk-by-chunk.
+
+const DEFAULT_MODEL_OPTION = { id: 'default', label: 'Default (CLI config)' };
+
+// Parse one-id-per-line stdout from `<cli> models` and prepend the synthetic
+// default option. Used by opencode / cursor-agent.
+function parseLineSeparatedModels(stdout) {
+  const ids = String(stdout || '')
+    .split('\n')
+    .map((line) => line.trim())
+    .filter((line) => line.length > 0 && !line.startsWith('#'));
+  // De-dupe while preserving order — some CLIs print near-duplicates.
+  const seen = new Set();
+  const out = [DEFAULT_MODEL_OPTION];
+  for (const id of ids) {
+    if (seen.has(id)) continue;
+    seen.add(id);
+    out.push({ id, label: id });
+  }
+  return out;
+}
+
 export const AGENT_DEFS = [
   {
     id: 'claude',
     name: 'Claude Code',
     bin: 'claude',
     versionArgs: ['--version'],
-    models: [
-      { id: 'default', label: 'Default (CLI config)' },
-      { id: 'claude-opus-4-5', label: 'Opus 4.5' },
-      { id: 'claude-sonnet-4-5', label: 'Sonnet 4.5' },
-      { id: 'claude-haiku-4-5', label: 'Haiku 4.5' },
+    // `claude` has no list-models subcommand; the CLI accepts both short
+    // aliases (sonnet/opus/haiku) and the full ids, so we ship both as
+    // hints. Users who want a non-shipped model can paste it via the
+    // Settings dialog's custom-model input.
+    fallbackModels: [
+      DEFAULT_MODEL_OPTION,
+      { id: 'sonnet', label: 'Sonnet (alias)' },
+      { id: 'opus', label: 'Opus (alias)' },
+      { id: 'haiku', label: 'Haiku (alias)' },
+      { id: 'claude-opus-4-5', label: 'claude-opus-4-5' },
+      { id: 'claude-sonnet-4-5', label: 'claude-sonnet-4-5' },
+      { id: 'claude-haiku-4-5', label: 'claude-haiku-4-5' },
     ],
     buildArgs: (prompt, _imagePaths, extraAllowedDirs = [], options = {}) => {
       const args = [
@@ -71,8 +108,10 @@ export const AGENT_DEFS = [
     name: 'Codex CLI',
     bin: 'codex',
     versionArgs: ['--version'],
-    models: [
-      { id: 'default', label: 'Default (CLI config)' },
+    // Codex doesn't have a `models` subcommand; ship the most common ids
+    // as a hint. Users can supply other ids via the custom-model input.
+    fallbackModels: [
+      DEFAULT_MODEL_OPTION,
       { id: 'gpt-5-codex', label: 'gpt-5-codex' },
       { id: 'gpt-5', label: 'gpt-5' },
       { id: 'o3', label: 'o3' },
@@ -105,10 +144,10 @@ export const AGENT_DEFS = [
     name: 'Gemini CLI',
     bin: 'gemini',
     versionArgs: ['--version'],
-    models: [
-      { id: 'default', label: 'Default (CLI config)' },
-      { id: 'gemini-2.5-pro', label: 'Gemini 2.5 Pro' },
-      { id: 'gemini-2.5-flash', label: 'Gemini 2.5 Flash' },
+    fallbackModels: [
+      DEFAULT_MODEL_OPTION,
+      { id: 'gemini-2.5-pro', label: 'gemini-2.5-pro' },
+      { id: 'gemini-2.5-flash', label: 'gemini-2.5-flash' },
     ],
     buildArgs: (prompt, _imagePaths, _extra, options = {}) => {
       const args = [];
@@ -125,13 +164,17 @@ export const AGENT_DEFS = [
     name: 'OpenCode',
     bin: 'opencode',
     versionArgs: ['--version'],
-    models: [
-      { id: 'default', label: 'Default (CLI config)' },
-      { id: 'anthropic/claude-sonnet-4-5', label: 'Anthropic · Sonnet 4.5' },
-      { id: 'anthropic/claude-opus-4-5', label: 'Anthropic · Opus 4.5' },
-      { id: 'anthropic/claude-haiku-4-5', label: 'Anthropic · Haiku 4.5' },
-      { id: 'openai/gpt-5', label: 'OpenAI · gpt-5' },
-      { id: 'google/gemini-2.5-pro', label: 'Google · Gemini 2.5 Pro' },
+    // `opencode models` prints `provider/model` per line.
+    listModels: {
+      args: ['models'],
+      parse: parseLineSeparatedModels,
+      timeoutMs: 8000,
+    },
+    fallbackModels: [
+      DEFAULT_MODEL_OPTION,
+      { id: 'anthropic/claude-sonnet-4-5', label: 'anthropic/claude-sonnet-4-5' },
+      { id: 'openai/gpt-5', label: 'openai/gpt-5' },
+      { id: 'google/gemini-2.5-pro', label: 'google/gemini-2.5-pro' },
     ],
     buildArgs: (prompt, _imagePaths, _extra, options = {}) => {
       const args = ['run'];
@@ -148,11 +191,23 @@ export const AGENT_DEFS = [
     name: 'Cursor Agent',
     bin: 'cursor-agent',
     versionArgs: ['--version'],
-    models: [
-      { id: 'default', label: 'Default (CLI config)' },
-      { id: 'auto', label: 'Auto' },
-      { id: 'claude-4-sonnet', label: 'Claude 4 Sonnet' },
-      { id: 'claude-4.5-sonnet', label: 'Claude 4.5 Sonnet' },
+    // `cursor-agent models` prints account-bound model ids per line. When
+    // the user isn't authed it prints "No models available for this
+    // account." — that's not a model list, so we detect it and fall back.
+    listModels: {
+      args: ['models'],
+      timeoutMs: 5000,
+      parse: (stdout) => {
+        const trimmed = String(stdout || '').trim();
+        if (!trimmed || /no models available/i.test(trimmed)) return null;
+        return parseLineSeparatedModels(trimmed);
+      },
+    },
+    fallbackModels: [
+      DEFAULT_MODEL_OPTION,
+      { id: 'auto', label: 'auto' },
+      { id: 'sonnet-4', label: 'sonnet-4' },
+      { id: 'sonnet-4-thinking', label: 'sonnet-4-thinking' },
       { id: 'gpt-5', label: 'gpt-5' },
     ],
     buildArgs: (prompt, _imagePaths, _extra, options = {}) => {
@@ -170,8 +225,8 @@ export const AGENT_DEFS = [
     name: 'Qwen Code',
     bin: 'qwen',
     versionArgs: ['--version'],
-    models: [
-      { id: 'default', label: 'Default (CLI config)' },
+    fallbackModels: [
+      DEFAULT_MODEL_OPTION,
       { id: 'qwen3-coder-plus', label: 'qwen3-coder-plus' },
       { id: 'qwen3-coder-flash', label: 'qwen3-coder-flash' },
     ],
@@ -202,9 +257,36 @@ function resolveOnPath(bin) {
   return null;
 }
 
+async function fetchModels(def, resolvedBin) {
+  if (!def.listModels) return def.fallbackModels;
+  try {
+    const { stdout } = await execFileP(resolvedBin, def.listModels.args, {
+      timeout: def.listModels.timeoutMs ?? 5000,
+      // Models lists from popular CLIs (e.g. opencode) easily exceed the
+      // default 1MB buffer once you include every openrouter model. Bump
+      // it so we don't truncate the listing.
+      maxBuffer: 8 * 1024 * 1024,
+    });
+    const parsed = def.listModels.parse(stdout);
+    // Empty / null parse result means the CLI didn't actually return a
+    // usable list (e.g. cursor-agent's "No models available"); fall back
+    // to the static hint so the picker isn't stuck on Default-only.
+    if (!parsed || parsed.length === 0) return def.fallbackModels;
+    return parsed;
+  } catch {
+    return def.fallbackModels;
+  }
+}
+
 async function probe(def) {
   const resolved = resolveOnPath(def.bin);
-  if (!resolved) return { ...stripFns(def), available: false };
+  if (!resolved) {
+    return {
+      ...stripFns(def),
+      models: def.fallbackModels ?? [DEFAULT_MODEL_OPTION],
+      available: false,
+    };
+  }
   let version = null;
   try {
     const { stdout } = await execFileP(resolved, def.versionArgs, { timeout: 3000 });
@@ -212,21 +294,75 @@ async function probe(def) {
   } catch {
     // binary exists but --version failed; still mark available
   }
-  return { ...stripFns(def), available: true, path: resolved, version };
+  const models = await fetchModels(def, resolved);
+  return {
+    ...stripFns(def),
+    models,
+    available: true,
+    path: resolved,
+    version,
+  };
 }
 
 function stripFns(def) {
-  // Drop the buildArgs closure but keep declarative metadata (models,
-  // reasoningOptions, streamFormat) so the frontend can render the picker
-  // without a second round-trip.
-  const { buildArgs, ...rest } = def;
+  // Drop the buildArgs / listModels closures but keep declarative metadata
+  // (reasoningOptions, streamFormat, name, bin, etc.). `models` is
+  // populated separately by `fetchModels`, so we strip the static
+  // `fallbackModels` slot here too.
+  const { buildArgs, listModels, fallbackModels, ...rest } = def;
   return rest;
 }
 
 export async function detectAgents() {
-  return Promise.all(AGENT_DEFS.map(probe));
+  const results = await Promise.all(AGENT_DEFS.map(probe));
+  // Refresh the validation cache from whatever we just surfaced to the UI
+  // so /api/chat can accept any model the user could have just picked,
+  // including ones that only showed up after a CLI re-auth.
+  for (const agent of results) {
+    rememberLiveModels(agent.id, agent.models);
+  }
+  return results;
 }
 
 export function getAgentDef(id) {
   return AGENT_DEFS.find((a) => a.id === id) || null;
 }
+
+// Daemon's /api/chat needs to validate the user's model pick against the
+// list we last surfaced to the UI. We keep a per-agent cache of the most
+// recent live list (refreshed every detectAgents() call) and additionally
+// trust any value present in the static fallback. A model that's neither
+// gets rejected so a stale or hostile value can't smuggle arbitrary flags.
+const liveModelCache = new Map();
+
+export function rememberLiveModels(agentId, models) {
+  if (!Array.isArray(models)) return;
+  liveModelCache.set(
+    agentId,
+    new Set(models.map((m) => m && m.id).filter((id) => typeof id === 'string')),
+  );
+}
+
+export function isKnownModel(def, modelId) {
+  if (!modelId) return false;
+  const live = liveModelCache.get(def.id);
+  if (live && live.has(modelId)) return true;
+  if (Array.isArray(def.fallbackModels)) {
+    return def.fallbackModels.some((m) => m.id === modelId);
+  }
+  return false;
+}
+
+// Permit user-typed model ids that didn't appear in either the live
+// listing or the static fallback (e.g. the user is on a brand-new model
+// the CLI's `models` command hasn't surfaced yet). The CLI gets the value
+// as a child-process arg — not a shell string — so injection isn't a
+// concern, but we still reject anything that could be misread as a flag
+// by a downstream CLI or that contains whitespace / control chars.
+export function sanitizeCustomModel(id) {
+  if (typeof id !== 'string') return null;
+  const trimmed = id.trim();
+  if (trimmed.length === 0 || trimmed.length > 200) return null;
+  if (!/^[A-Za-z0-9][A-Za-z0-9._/:@-]*$/.test(trimmed)) return null;
+  return trimmed;
+}

daemon/server.js

@@ -6,7 +6,12 @@ import { fileURLToPath } from 'node:url';
 import path from 'node:path';
 import fs from 'node:fs';
 import os from 'node:os';
-import { detectAgents, getAgentDef } from './agents.js';
+import {
+  detectAgents,
+  getAgentDef,
+  isKnownModel,
+  sanitizeCustomModel,
+} from './agents.js';
 import { listSkills } from './skills.js';
 import { listDesignSystems, readDesignSystem } from './design-systems.js';
 import { createClaudeStreamHandler } from './claude-stream.js';
@@ -782,11 +787,15 @@ export async function startServer({ port = 7456 } = {}) {
       (d) => fs.existsSync(d),
     );
     // Per-agent model + reasoning the user picked in the model menu.
-    // Validated against the agent's declared options so a stale or hostile
-    // value can't smuggle arbitrary flags into the spawned argv.
+    // Trust the value when it matches the most recent /api/agents listing
+    // (live or fallback). Otherwise allow it through if it passes a
+    // permissive sanitizer — that's the path for user-typed custom model
+    // ids the CLI's listing didn't surface yet.
     const safeModel =
-      typeof model === 'string' && Array.isArray(def.models)
-        ? def.models.find((m) => m.id === model)?.id ?? null
+      typeof model === 'string'
+        ? isKnownModel(def, model)
+          ? model
+          : sanitizeCustomModel(model)
         : null;
     const safeReasoning =
       typeof reasoning === 'string' && Array.isArray(def.reasoningOptions)

src/components/AvatarMenu.tsx

@@ -2,6 +2,7 @@ import { useEffect, useMemo, useRef, useState } from 'react';
 import { useT } from '../i18n';
 import { AgentIcon } from './AgentIcon';
 import { Icon } from './Icon';
+import { renderModelOptions } from './modelOptions';
 import type { AgentInfo, AppConfig, ExecMode } from '../types';
 
 interface Props {
@@ -197,11 +198,20 @@ export function AvatarMenu({
                           })
                         }
                       >
-                        {currentAgent.models.map((m) => (
-                          <option key={m.id} value={m.id}>
-                            {m.label}
+                        {renderModelOptions(currentAgent.models)}
+                        {/* When the user has typed a custom id in
+                            Settings, surface it here too so the dropdown
+                            actually shows the active selection rather
+                            than collapsing to "Default". */}
+                        {currentModelId &&
+                        !currentAgent.models.some(
+                          (m) => m.id === currentModelId,
+                        ) ? (
+                          <option value={currentModelId}>
+                            {currentModelId}{' '}
+                            {t('avatar.customSuffix')}
                           </option>
-                        ))}
+                        ) : null}
                       </select>
                     </label>
                   ) : null}

src/components/SettingsDialog.tsx

@@ -2,6 +2,11 @@ import { useEffect, useMemo, useState } from 'react';
 import { LOCALE_LABEL, LOCALES, useI18n } from '../i18n';
 import type { Locale } from '../i18n';
 import { AgentIcon } from './AgentIcon';
+import {
+  CUSTOM_MODEL_SENTINEL,
+  isCustomModel,
+  renderModelOptions,
+} from './modelOptions';
 import type { AgentInfo, AppConfig, ExecMode } from '../types';
 
 interface Props {
@@ -214,6 +219,11 @@ export function SettingsDialog({
               const reasoningValue =
                 choice.reasoning ??
                 selected.reasoningOptions?.[0]?.id ?? '';
+              const customActive =
+                hasModels && isCustomModel(modelValue, selected.models!);
+              const selectValue = customActive
+                ? CUSTOM_MODEL_SENTINEL
+                : modelValue;
               return (
                 <div className="agent-model-row">
                   {hasModels ? (
@@ -222,17 +232,41 @@ export function SettingsDialog({
                         {t('settings.modelPicker')}
                       </span>
                       <select
-                        value={modelValue}
-                        onChange={(e) => setChoice({ model: e.target.value })}
+                        value={selectValue}
+                        onChange={(e) => {
+                          if (e.target.value === CUSTOM_MODEL_SENTINEL) {
+                            // Switching to "Custom…" should clear the
+                            // value so the input below opens empty for
+                            // typing — keeping the previous live id
+                            // would defeat the point.
+                            setChoice({ model: '' });
+                          } else {
+                            setChoice({ model: e.target.value });
+                          }
+                        }}
                       >
-                        {selected.models!.map((m) => (
-                          <option key={m.id} value={m.id}>
-                            {m.label}
-                          </option>
-                        ))}
+                        {renderModelOptions(selected.models!)}
+                        <option value={CUSTOM_MODEL_SENTINEL}>
+                          {t('settings.modelCustom')}
+                        </option>
                       </select>
                     </label>
                   ) : null}
+                  {customActive ? (
+                    <label className="field">
+                      <span className="field-label">
+                        {t('settings.modelCustomLabel')}
+                      </span>
+                      <input
+                        type="text"
+                        value={modelValue}
+                        placeholder={t('settings.modelCustomPlaceholder')}
+                        onChange={(e) =>
+                          setChoice({ model: e.target.value.trim() })
+                        }
+                      />
+                    </label>
+                  ) : null}
                   {hasReasoning ? (
                     <label className="field">
                       <span className="field-label">

src/components/modelOptions.tsx

@@ -0,0 +1,71 @@
+import type { AgentModelOption } from '../types';
+
+// Render the `<option>` children for a model `<select>`. When the list
+// contains `provider/model` ids (opencode's listing has hundreds), we
+// group them under `<optgroup>` so the dropdown is navigable. Flat lists
+// (Claude, Codex, Gemini, Qwen) are emitted as plain options.
+//
+// `'default'` is always pinned first (no group), so the user can return
+// to "let the CLI decide" with one click.
+export function renderModelOptions(models: AgentModelOption[]) {
+  const groups = new Map<string, AgentModelOption[]>();
+  const flat: AgentModelOption[] = [];
+  for (const m of models) {
+    const slash = m.id.indexOf('/');
+    if (m.id === 'default' || slash <= 0) {
+      flat.push(m);
+      continue;
+    }
+    const provider = m.id.slice(0, slash);
+    const arr = groups.get(provider) ?? [];
+    arr.push(m);
+    groups.set(provider, arr);
+  }
+  if (groups.size === 0) {
+    return (
+      <>
+        {flat.map((m) => (
+          <option key={m.id} value={m.id}>
+            {m.label}
+          </option>
+        ))}
+      </>
+    );
+  }
+  return (
+    <>
+      {flat.map((m) => (
+        <option key={m.id} value={m.id}>
+          {m.label}
+        </option>
+      ))}
+      {Array.from(groups.entries()).map(([provider, items]) => (
+        <optgroup key={provider} label={provider}>
+          {items.map((m) => (
+            <option key={m.id} value={m.id}>
+              {/* Strip the redundant `provider/` prefix from the label
+                  inside its own optgroup; keep it in the value so the
+                  CLI sees the fully-qualified id. */}
+              {m.label.startsWith(`${provider}/`)
+                ? m.label.slice(provider.length + 1)
+                : m.label}
+            </option>
+          ))}
+        </optgroup>
+      ))}
+    </>
+  );
+}
+
+// True when the picked model id isn't one of the listed options — i.e.
+// the user has typed a custom id and we should keep the custom input
+// visible / the dropdown showing "Custom…".
+export function isCustomModel(
+  modelId: string | null | undefined,
+  models: AgentModelOption[],
+): boolean {
+  if (!modelId) return false;
+  return !models.some((m) => m.id === modelId);
+}
+
+export const CUSTOM_MODEL_SENTINEL = '__custom__';

src/i18n/locales/en.ts

@@ -86,7 +86,10 @@ export const en: Dict = {
   'settings.modelPicker': 'Model',
   'settings.reasoningPicker': 'Reasoning effort',
   'settings.modelPickerHint':
-    'Picked per CLI. "Default" leaves the choice to the CLI’s own config.',
+    'Fetched from the CLI when it exposes a `models` command. "Default" leaves the choice to the CLI’s own config; "Custom…" lets you type any model id the CLI accepts.',
+  'settings.modelCustom': 'Custom (type below)…',
+  'settings.modelCustomLabel': 'Custom model id',
+  'settings.modelCustomPlaceholder': 'e.g. anthropic/claude-sonnet-4-6',
 
   'entry.tabDesigns': 'Designs',
   'entry.tabExamples': 'Examples',
@@ -218,6 +221,7 @@ export const en: Dict = {
   'avatar.modelSection': 'Model',
   'avatar.modelLabel': 'Model',
   'avatar.reasoningLabel': 'Reasoning',
+  'avatar.customSuffix': '(custom)',
 
   'project.backToProjects': 'Back to projects',
   'project.metaFreeform': 'freeform',

src/i18n/locales/zh-CN.ts

@@ -84,7 +84,11 @@ export const zhCN: Dict = {
   'settings.languageHint': '切换界面语言，设置仅保存在当前浏览器。',
   'settings.modelPicker': '模型',
   'settings.reasoningPicker': '推理强度',
-  'settings.modelPickerHint': '按 CLI 单独保存。选择「默认」则沿用 CLI 自身的配置。',
+  'settings.modelPickerHint':
+    '当 CLI 提供 `models` 命令时会自动拉取。选择「默认」则沿用 CLI 自身的配置；选择「自定义」可手动输入任何 CLI 支持的模型 id。',
+  'settings.modelCustom': '自定义（在下方填写）…',
+  'settings.modelCustomLabel': '自定义模型 id',
+  'settings.modelCustomPlaceholder': '例如 anthropic/claude-sonnet-4-6',
 
   'entry.tabDesigns': '我的设计',
   'entry.tabExamples': '示例',
@@ -214,6 +218,7 @@ export const zhCN: Dict = {
   'avatar.modelSection': '模型',
   'avatar.modelLabel': '模型',
   'avatar.reasoningLabel': '推理',
+  'avatar.customSuffix': '（自定义）',
 
   'project.backToProjects': '返回项目列表',
   'project.metaFreeform': '自由设计',

src/i18n/types.ts

@@ -96,6 +96,9 @@ export interface Dict {
   'settings.modelPicker': string;
   'settings.reasoningPicker': string;
   'settings.modelPickerHint': string;
+  'settings.modelCustom': string;
+  'settings.modelCustomLabel': string;
+  'settings.modelCustomPlaceholder': string;
 
   // Entry view / tabs
   'entry.tabDesigns': string;
@@ -230,6 +233,7 @@ export interface Dict {
   'avatar.modelSection': string;
   'avatar.modelLabel': string;
   'avatar.reasoningLabel': string;
+  'avatar.customSuffix': string;
 
   // Project view / chat pane / composer
   'project.backToProjects': string;