feat: per-CLI model picker for local agents (closes #8)

Each agent CLI declares its selectable models (and reasoning effort, for Codex) on the daemon side; the frontend renders a model dropdown in the avatar menu and the Settings dialog scoped to the currently picked CLI, persists the choice per-agent in the AppConfig, and threads it through /api/chat to the spawn argv. "Default" leaves the flag off so the CLI's own config wins.
2026-04-28 22:54:18 +08:00
parent 94941f59a9
commit f2d28a1cca
13 changed files with 414 additions and 25 deletions
@@ -6,13 +6,27 @@ import path from 'node:path';

 const execFileP = promisify(execFile);

-// Each entry defines how to invoke the agent in non-interactive "one-shot" mode.
-// `buildArgs(prompt, imagePaths, extraAllowedDirs)` returns argv for the child
-// process. `extraAllowedDirs` is a list of absolute directories the agent must
-// be permitted to read files from (skill seeds, design-system specs) that live
+// 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.
+//   - `reasoningOptions`   : optional reasoning-effort presets (currently
+//                            only Codex exposes this knob). Same `default`
+//                            convention as models.
+//   - `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.
+//
+// `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
 // (`--add-dir`); other agents either inherit broader access or run with cwd
 // boundaries we can't widen via flags.
+//
 // `streamFormat` hints to the daemon how to interpret stdout:
 //   - 'claude-stream-json' : line-delimited JSON emitted by Claude Code's
 //     `--output-format stream-json`. Daemon parses it into typed events
@@ -24,7 +38,13 @@ export const AGENT_DEFS = [
    name: 'Claude Code',
    bin: 'claude',
    versionArgs: ['--version'],
-    buildArgs: (prompt, _imagePaths, extraAllowedDirs = []) => {
+    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' },
+    ],
+    buildArgs: (prompt, _imagePaths, extraAllowedDirs = [], options = {}) => {
      const args = [
        '-p',
        prompt,
@@ -33,6 +53,9 @@ export const AGENT_DEFS = [
        '--verbose',
        '--include-partial-messages',
      ];
+      if (options.model && options.model !== 'default') {
+        args.push('--model', options.model);
+      }
      const dirs = (extraAllowedDirs || []).filter(
        (d) => typeof d === 'string' && d.length > 0,
      );
@@ -48,7 +71,33 @@ export const AGENT_DEFS = [
    name: 'Codex CLI',
    bin: 'codex',
    versionArgs: ['--version'],
-    buildArgs: (prompt) => ['exec', prompt],
+    models: [
+      { id: 'default', label: 'Default (CLI config)' },
+      { id: 'gpt-5-codex', label: 'gpt-5-codex' },
+      { id: 'gpt-5', label: 'gpt-5' },
+      { id: 'o3', label: 'o3' },
+      { id: 'o4-mini', label: 'o4-mini' },
+    ],
+    reasoningOptions: [
+      { id: 'default', label: 'Default' },
+      { id: 'minimal', label: 'Minimal' },
+      { id: 'low', label: 'Low' },
+      { id: 'medium', label: 'Medium' },
+      { id: 'high', label: 'High' },
+    ],
+    buildArgs: (prompt, _imagePaths, _extra, options = {}) => {
+      const args = ['exec'];
+      if (options.model && options.model !== 'default') {
+        args.push('--model', options.model);
+      }
+      if (options.reasoning && options.reasoning !== 'default') {
+        // Codex accepts `-c key=value` config overrides; reasoning effort
+        // is exposed as `model_reasoning_effort`.
+        args.push('-c', `model_reasoning_effort="${options.reasoning}"`);
+      }
+      args.push(prompt);
+      return args;
+    },
    streamFormat: 'plain',
  },
  {
@@ -56,7 +105,19 @@ export const AGENT_DEFS = [
    name: 'Gemini CLI',
    bin: 'gemini',
    versionArgs: ['--version'],
-    buildArgs: (prompt) => ['-p', prompt],
+    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' },
+    ],
+    buildArgs: (prompt, _imagePaths, _extra, options = {}) => {
+      const args = [];
+      if (options.model && options.model !== 'default') {
+        args.push('--model', options.model);
+      }
+      args.push('-p', prompt);
+      return args;
+    },
    streamFormat: 'plain',
  },
  {
@@ -64,7 +125,22 @@ export const AGENT_DEFS = [
    name: 'OpenCode',
    bin: 'opencode',
    versionArgs: ['--version'],
-    buildArgs: (prompt) => ['run', prompt],
+    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' },
+    ],
+    buildArgs: (prompt, _imagePaths, _extra, options = {}) => {
+      const args = ['run'];
+      if (options.model && options.model !== 'default') {
+        args.push('--model', options.model);
+      }
+      args.push(prompt);
+      return args;
+    },
    streamFormat: 'plain',
  },
  {
@@ -72,7 +148,21 @@ export const AGENT_DEFS = [
    name: 'Cursor Agent',
    bin: 'cursor-agent',
    versionArgs: ['--version'],
-    buildArgs: (prompt) => ['-p', prompt],
+    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' },
+      { id: 'gpt-5', label: 'gpt-5' },
+    ],
+    buildArgs: (prompt, _imagePaths, _extra, options = {}) => {
+      const args = [];
+      if (options.model && options.model !== 'default') {
+        args.push('--model', options.model);
+      }
+      args.push('-p', prompt);
+      return args;
+    },
    streamFormat: 'plain',
  },
  {
@@ -80,7 +170,19 @@ export const AGENT_DEFS = [
    name: 'Qwen Code',
    bin: 'qwen',
    versionArgs: ['--version'],
-    buildArgs: (prompt) => ['-p', prompt],
+    models: [
+      { id: 'default', label: 'Default (CLI config)' },
+      { id: 'qwen3-coder-plus', label: 'qwen3-coder-plus' },
+      { id: 'qwen3-coder-flash', label: 'qwen3-coder-flash' },
+    ],
+    buildArgs: (prompt, _imagePaths, _extra, options = {}) => {
+      const args = [];
+      if (options.model && options.model !== 'default') {
+        args.push('--model', options.model);
+      }
+      args.push('-p', prompt);
+      return args;
+    },
    streamFormat: 'plain',
  },
 ];
@@ -114,6 +216,9 @@ async function probe(def) {
 }

 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;
  return rest;
 }
@@ -690,6 +690,8 @@ export async function startServer({ port = 7456 } = {}) {
      imagePaths = [],
      projectId,
      attachments = [],
+      model,
+      reasoning,
    } = req.body || {};
    const def = getAgentDef(agentId);
    if (!def) return res.status(400).json({ error: `unknown agent: ${agentId}` });
@@ -779,7 +781,19 @@ export async function startServer({ port = 7456 } = {}) {
    const extraAllowedDirs = [SKILLS_DIR, DESIGN_SYSTEMS_DIR].filter(
      (d) => fs.existsSync(d),
    );
-    const args = def.buildArgs(composed, safeImages, extraAllowedDirs);
+    // 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.
+    const safeModel =
+      typeof model === 'string' && Array.isArray(def.models)
+        ? def.models.find((m) => m.id === model)?.id ?? null
+        : null;
+    const safeReasoning =
+      typeof reasoning === 'string' && Array.isArray(def.reasoningOptions)
+        ? def.reasoningOptions.find((r) => r.id === reasoning)?.id ?? null
+        : null;
+    const agentOptions = { model: safeModel, reasoning: safeReasoning };
+    const args = def.buildArgs(composed, safeImages, extraAllowedDirs, agentOptions);

    res.setHeader('Content-Type', 'text/event-stream');
    res.setHeader('Cache-Control', 'no-cache, no-transform');
@@ -798,6 +812,8 @@ export async function startServer({ port = 7456 } = {}) {
      streamFormat: def.streamFormat ?? 'plain',
      projectId: typeof projectId === 'string' ? projectId : null,
      cwd,
+      model: safeModel,
+      reasoning: safeReasoning,
    });

    let child;
@@ -137,6 +137,18 @@ export function App() {
    [config],
  );

+  const handleAgentModelChange = useCallback(
+    (agentId: string, choice: { model?: string; reasoning?: string }) => {
+      const prev = config.agentModels?.[agentId] ?? {};
+      const merged = { ...prev, ...choice };
+      const nextAgentModels = { ...(config.agentModels ?? {}), [agentId]: merged };
+      const next = { ...config, agentModels: nextAgentModels };
+      saveConfig(next);
+      setConfig(next);
+    },
+    [config],
+  );
+
  const handleChangeDefaultDesignSystem = useCallback(
    (designSystemId: string) => {
      const next = { ...config, designSystemId };
@@ -272,6 +284,7 @@ export function App() {
          daemonLive={daemonLive}
          onModeChange={handleModeChange}
          onAgentChange={handleAgentChange}
+          onAgentModelChange={handleAgentModelChange}
          onRefreshAgents={refreshAgents}
          onOpenSettings={openSettings}
          onBack={handleBack}
@@ -10,6 +10,10 @@ interface Props {
  daemonLive: boolean;
  onModeChange: (mode: ExecMode) => void;
  onAgentChange: (id: string) => void;
+  onAgentModelChange: (
+    id: string,
+    choice: { model?: string; reasoning?: string },
+  ) => void;
  onOpenSettings: () => void;
  onRefreshAgents: () => void;
  onBack?: () => void;
@@ -26,6 +30,7 @@ export function AvatarMenu({
  daemonLive,
  onModeChange,
  onAgentChange,
+  onAgentModelChange,
  onOpenSettings,
  onRefreshAgents,
  onBack,
@@ -58,6 +63,19 @@ export function AvatarMenu({

  const installedAgents = agents.filter((a) => a.available);

+  // Resolve the user's model + reasoning pick for the active agent. Falls
+  // back to the agent's first declared option (`'default'`) when the user
+  // hasn't touched the picker yet so the labels don't read as empty.
+  const currentChoice =
+    (config.agentId && config.agentModels?.[config.agentId]) || {};
+  const currentModelId =
+    currentChoice.model ?? currentAgent?.models?.[0]?.id ?? null;
+  const currentReasoningId =
+    currentChoice.reasoning ?? currentAgent?.reasoningOptions?.[0]?.id ?? null;
+  const currentModelLabel = currentAgent?.models?.find(
+    (m) => m.id === currentModelId,
+  )?.label;
+
  return (
    <div className="avatar-menu" ref={wrapRef}>
      <button
@@ -88,7 +106,7 @@ export function AvatarMenu({
              {config.mode === 'api'
                ? safeHost(config.baseUrl)
                : currentAgent
-                  ? `${currentAgent.name}${currentAgent.version ? ` · ${currentAgent.version}` : ''}`
+                  ? `${currentAgent.name}${currentAgent.version ? ` · ${currentAgent.version}` : ''}${currentModelLabel && currentModelId !== 'default' ? ` · ${currentModelLabel}` : ''}`
                  : t('avatar.noAgentSelected')}
            </span>
          </div>
@@ -133,18 +151,7 @@ export function AvatarMenu({

          {config.mode === 'daemon' && installedAgents.length > 0 ? (
            <>
-              <div
-                style={{
-                  fontSize: 10.5,
-                  textTransform: 'uppercase',
-                  letterSpacing: '0.06em',
-                  color: 'var(--text-faint)',
-                  fontWeight: 600,
-                  padding: '8px 10px 4px',
-                }}
-              >
-                {t('avatar.codeAgent')}
-              </div>
+              <div className="avatar-section-label">{t('avatar.codeAgent')}</div>
              {installedAgents.map((a) => (
                <button
                  type="button"
@@ -152,7 +159,8 @@ export function AvatarMenu({
                  className="avatar-item"
                  onClick={() => {
                    onAgentChange(a.id);
-                    setOpen(false);
+                    // Keep the popover open so the user can immediately
+                    // pick a model for the agent they just chose.
                  }}
                >
                  <AgentIcon id={a.id} size={18} />
@@ -166,6 +174,62 @@ export function AvatarMenu({
                  ) : null}
                </button>
              ))}
+              {currentAgent &&
+              currentAgent.available &&
+              ((currentAgent.models && currentAgent.models.length > 0) ||
+                (currentAgent.reasoningOptions &&
+                  currentAgent.reasoningOptions.length > 0)) ? (
+                <div className="avatar-model-section">
+                  <div className="avatar-section-label">
+                    {t('avatar.modelSection')}
+                  </div>
+                  {currentAgent.models && currentAgent.models.length > 0 ? (
+                    <label className="avatar-select-row">
+                      <span className="avatar-select-label">
+                        {t('avatar.modelLabel')}
+                      </span>
+                      <select
+                        className="avatar-select"
+                        value={currentModelId ?? ''}
+                        onChange={(e) =>
+                          onAgentModelChange(currentAgent.id, {
+                            model: e.target.value,
+                          })
+                        }
+                      >
+                        {currentAgent.models.map((m) => (
+                          <option key={m.id} value={m.id}>
+                            {m.label}
+                          </option>
+                        ))}
+                      </select>
+                    </label>
+                  ) : null}
+                  {currentAgent.reasoningOptions &&
+                  currentAgent.reasoningOptions.length > 0 ? (
+                    <label className="avatar-select-row">
+                      <span className="avatar-select-label">
+                        {t('avatar.reasoningLabel')}
+                      </span>
+                      <select
+                        className="avatar-select"
+                        value={currentReasoningId ?? ''}
+                        onChange={(e) =>
+                          onAgentModelChange(currentAgent.id, {
+                            reasoning: e.target.value,
+                          })
+                        }
+                      >
+                        {currentAgent.reasoningOptions.map((r) => (
+                          <option key={r.id} value={r.id}>
+                            {r.label}
+                          </option>
+                        ))}
+                      </select>
+                    </label>
+                  ) : null}
+                </div>
+              ) : null}
              <button
                type="button"
                className="avatar-item"
@@ -53,6 +53,10 @@ interface Props {
  daemonLive: boolean;
  onModeChange: (mode: AppConfig['mode']) => void;
  onAgentChange: (id: string) => void;
+  onAgentModelChange: (
+    id: string,
+    choice: { model?: string; reasoning?: string },
+  ) => void;
  onRefreshAgents: () => void;
  onOpenSettings: () => void;
  onBack: () => void;
@@ -72,6 +76,7 @@ export function ProjectView({
  daemonLive,
  onModeChange,
  onAgentChange,
+  onAgentModelChange,
  onRefreshAgents,
  onOpenSettings,
  onBack,
@@ -490,6 +495,7 @@ export function ProjectView({
          handlers.onError(new Error('Pick a local agent first (top bar).'));
          return;
        }
+        const choice = config.agentModels?.[config.agentId];
        void streamViaDaemon({
          agentId: config.agentId,
          history: nextHistory,
@@ -498,6 +504,8 @@ export function ProjectView({
          handlers,
          projectId: project.id,
          attachments: attachments.map((a) => a.path),
+          model: choice?.model ?? null,
+          reasoning: choice?.reasoning ?? null,
        });
      } else {
        pushEvent({ kind: 'status', label: 'requesting', detail: config.model });
@@ -728,6 +736,7 @@ export function ProjectView({
            daemonLive={daemonLive}
            onModeChange={onModeChange}
            onAgentChange={onAgentChange}
+            onAgentModelChange={onAgentModelChange}
            onOpenSettings={onOpenSettings}
            onRefreshAgents={onRefreshAgents}
            onBack={onBack}
@@ -183,6 +183,79 @@ export function SettingsDialog({
                })}
              </div>
            )}
+            {(() => {
+              const selected = agents.find(
+                (a) => a.id === cfg.agentId && a.available,
+              );
+              if (!selected) return null;
+              const hasModels =
+                Array.isArray(selected.models) && selected.models.length > 0;
+              const hasReasoning =
+                Array.isArray(selected.reasoningOptions) &&
+                selected.reasoningOptions.length > 0;
+              if (!hasModels && !hasReasoning) return null;
+              const choice = cfg.agentModels?.[selected.id] ?? {};
+              const setChoice = (
+                next: { model?: string; reasoning?: string },
+              ) => {
+                setCfg((c) => {
+                  const prev = c.agentModels?.[selected.id] ?? {};
+                  return {
+                    ...c,
+                    agentModels: {
+                      ...(c.agentModels ?? {}),
+                      [selected.id]: { ...prev, ...next },
+                    },
+                  };
+                });
+              };
+              const modelValue =
+                choice.model ?? selected.models?.[0]?.id ?? '';
+              const reasoningValue =
+                choice.reasoning ??
+                selected.reasoningOptions?.[0]?.id ?? '';
+              return (
+                <div className="agent-model-row">
+                  {hasModels ? (
+                    <label className="field">
+                      <span className="field-label">
+                        {t('settings.modelPicker')}
+                      </span>
+                      <select
+                        value={modelValue}
+                        onChange={(e) => setChoice({ model: e.target.value })}
+                      >
+                        {selected.models!.map((m) => (
+                          <option key={m.id} value={m.id}>
+                            {m.label}
+                          </option>
+                        ))}
+                      </select>
+                    </label>
+                  ) : null}
+                  {hasReasoning ? (
+                    <label className="field">
+                      <span className="field-label">
+                        {t('settings.reasoningPicker')}
+                      </span>
+                      <select
+                        value={reasoningValue}
+                        onChange={(e) =>
+                          setChoice({ reasoning: e.target.value })
+                        }
+                      >
+                        {selected.reasoningOptions!.map((r) => (
+                          <option key={r.id} value={r.id}>
+                            {r.label}
+                          </option>
+                        ))}
+                      </select>
+                    </label>
+                  ) : null}
+                  <p className="hint">{t('settings.modelPickerHint')}</p>
+                </div>
+              );
+            })()}
          </section>
        ) : (
          <section className="settings-section">
@@ -83,6 +83,10 @@ export const en: Dict = {
  'settings.noAgentSelected': 'no agent selected',
  'settings.language': 'Language',
  'settings.languageHint': 'Switch the interface language. Saved to this browser.',
+  'settings.modelPicker': 'Model',
+  'settings.reasoningPicker': 'Reasoning effort',
+  'settings.modelPickerHint':
+    'Picked per CLI. "Default" leaves the choice to the CLI’s own config.',

  'entry.tabDesigns': 'Designs',
  'entry.tabExamples': 'Examples',
@@ -211,6 +215,9 @@ export const en: Dict = {
  'avatar.metaOffline': 'offline',
  'avatar.metaSelected': 'selected',
  'avatar.noAgentSelected': 'no agent selected',
+  'avatar.modelSection': 'Model',
+  'avatar.modelLabel': 'Model',
+  'avatar.reasoningLabel': 'Reasoning',

  'project.backToProjects': 'Back to projects',
  'project.metaFreeform': 'freeform',
@@ -82,6 +82,9 @@ export const zhCN: Dict = {
  'settings.noAgentSelected': '尚未选择代理',
  'settings.language': '界面语言',
  'settings.languageHint': '切换界面语言，设置仅保存在当前浏览器。',
+  'settings.modelPicker': '模型',
+  'settings.reasoningPicker': '推理强度',
+  'settings.modelPickerHint': '按 CLI 单独保存。选择「默认」则沿用 CLI 自身的配置。',

  'entry.tabDesigns': '我的设计',
  'entry.tabExamples': '示例',
@@ -208,6 +211,9 @@ export const zhCN: Dict = {
  'avatar.metaOffline': '未运行',
  'avatar.metaSelected': '已选',
  'avatar.noAgentSelected': '尚未选择代理',
+  'avatar.modelSection': '模型',
+  'avatar.modelLabel': '模型',
+  'avatar.reasoningLabel': '推理',

  'project.backToProjects': '返回项目列表',
  'project.metaFreeform': '自由设计',
@@ -93,6 +93,9 @@ export interface Dict {
  'settings.noAgentSelected': string;
  'settings.language': string;
  'settings.languageHint': string;
+  'settings.modelPicker': string;
+  'settings.reasoningPicker': string;
+  'settings.modelPickerHint': string;

  // Entry view / tabs
  'entry.tabDesigns': string;
@@ -224,6 +227,9 @@ export interface Dict {
  'avatar.metaOffline': string;
  'avatar.metaSelected': string;
  'avatar.noAgentSelected': string;
+  'avatar.modelSection': string;
+  'avatar.modelLabel': string;
+  'avatar.reasoningLabel': string;

  // Project view / chat pane / composer
  'project.backToProjects': string;
@@ -293,6 +293,45 @@ code {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
 }
+.avatar-section-label {
+  font-size: 10.5px;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--text-faint);
+  font-weight: 600;
+  padding: 8px 10px 4px;
+}
+.avatar-model-section {
+  padding: 2px 10px 6px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  border-top: 1px dashed var(--border-soft);
+  margin-top: 4px;
+}
+.avatar-select-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 12px;
+  color: var(--text-muted);
+}
+.avatar-select-label {
+  flex-shrink: 0;
+  min-width: 64px;
+}
+.avatar-select {
+  flex: 1;
+  min-width: 0;
+  font-size: 12px;
+  padding: 4px 6px;
+  border-radius: var(--radius-sm);
+  border: 1px solid var(--border);
+  background: var(--bg-panel);
+  color: var(--text);
+  cursor: pointer;
+}
+.avatar-select:focus { outline: 2px solid var(--accent-soft, var(--border-strong)); }

 /* Environment pill — only used in entry view header now */
 .env-pill {
@@ -827,6 +866,23 @@ code {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
 }
 .agent-card-meta .muted { color: var(--text-soft); font-style: italic; }
+.agent-model-row {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 12px;
+  border: 1px solid var(--border-soft);
+  border-radius: var(--radius-sm);
+  background: var(--bg-subtle);
+}
+.agent-model-row .field { gap: 4px; }
+.agent-model-row .field-label {
+  font-size: 11.5px;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  color: var(--text-muted);
+}
+.agent-model-row .hint { margin: 0; font-size: 11.5px; }
 .status-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
@@ -30,6 +30,11 @@ export interface DaemonStreamOptions {
  // daemon resolves them inside the project folder, validates they
  // exist, and stitches them into the user message as `@<path>` hints.
  attachments?: string[];
+  // Per-CLI model + reasoning the user picked in the model menu. Both are
+  // optional; the daemon validates them against the agent's declared
+  // options and falls back to the CLI default when missing.
+  model?: string | null;
+  reasoning?: string | null;
 }

 export async function streamViaDaemon({
@@ -40,6 +45,8 @@ export async function streamViaDaemon({
  handlers,
  projectId,
  attachments,
+  model,
+  reasoning,
 }: DaemonStreamOptions): Promise<void> {
  // Local CLIs are single-turn print-mode programs, so we collapse the whole
  // chat into one string. If this becomes too noisy for long histories, the
@@ -53,6 +60,8 @@ export async function streamViaDaemon({
    message: transcript,
    projectId: projectId ?? null,
    attachments: attachments ?? [],
+    model: model ?? null,
+    reasoning: reasoning ?? null,
  });

  let acc = '';
@@ -11,6 +11,7 @@ export const DEFAULT_CONFIG: AppConfig = {
  skillId: null,
  designSystemId: null,
  onboardingCompleted: false,
+  agentModels: {},
 };

 export function loadConfig(): AppConfig {
@@ -1,5 +1,14 @@
 export type ExecMode = 'daemon' | 'api';

+// Per-CLI model + reasoning the user picked in the model menu. Each agent
+// keeps its own slot so flipping between Codex and Gemini doesn't reset the
+// other one's choice. Missing entries fall back to the agent's first
+// declared model (`'default'` — let the CLI pick).
+export interface AgentModelChoice {
+  model?: string;
+  reasoning?: string;
+}
+
 export interface AppConfig {
  mode: ExecMode;
  apiKey: string;
@@ -12,6 +21,10 @@ export interface AppConfig {
  // least once (saved or skipped). Bootstrap skips the auto-popup when
  // this is set so refreshing the page doesn't re-prompt.
  onboardingCompleted?: boolean;
+  // Per-CLI model picker state, keyed by agent id (e.g. `gemini`, `codex`).
+  // Pre-existing configs without this field fall through to the agent's
+  // declared default.
+  agentModels?: Record<string, AgentModelChoice>;
 }

 export type AgentEvent =
@@ -63,6 +76,11 @@ export interface ExamplePreview {
  html: string;
 }

+export interface AgentModelOption {
+  id: string;
+  label: string;
+}
+
 export interface AgentInfo {
  id: string;
  name: string;
@@ -70,6 +88,12 @@ export interface AgentInfo {
  available: boolean;
  path?: string;
  version?: string | null;
+  // Models surfaced in the model picker for this CLI. The first entry is
+  // treated as the default (typically the synthetic `'default'` option,
+  // meaning "let the CLI use whatever's in its own config").
+  models?: AgentModelOption[];
+  // Reasoning-effort presets — currently only Codex exposes this.
+  reasoningOptions?: AgentModelOption[];
 }

 export interface SkillSummary {