diff --git a/app/src/main/engineModelCache.ts b/app/src/main/engineModelCache.ts
new file mode 100644
index 00000000..ecc3a565
--- /dev/null
+++ b/app/src/main/engineModelCache.ts
@@ -0,0 +1,120 @@
+import fs from 'node:fs';
+import path from 'node:path';
+import type { EngineModelList } from './hl/engines/types';
+
+const ENGINE_MODEL_CACHE_TTL_MS = 24 * 60 * 60 * 1000;
+
+type CachedEngineModelList = EngineModelList & {
+  cachedAt: number;
+  expiresAt: number;
+};
+
+interface EngineModelCacheFile {
+  version: 1;
+  entries: Record<string, CachedEngineModelList>;
+}
+
+interface EngineModelCacheLogger {
+  info?: (event: string, fields: Record<string, unknown>) => void;
+  warn: (event: string, fields: Record<string, unknown>) => void;
+}
+
+interface StoreOptions {
+  expectedVersion?: number;
+}
+
+export interface EngineModelCache {
+  currentVersion(engineId: string): number;
+  getCached(engineId: string): CachedEngineModelList | null;
+  invalidate(engineId: string): boolean;
+  store(engineId: string, list: EngineModelList, opts?: StoreOptions): EngineModelList;
+}
+
+export function createEngineModelCache({
+  cachePath,
+  logger,
+}: {
+  cachePath: () => string;
+  logger: EngineModelCacheLogger;
+}): EngineModelCache {
+  let cache: EngineModelCacheFile | null = null;
+  const versions = new Map<string, number>();
+
+  const currentVersion = (engineId: string): number => versions.get(engineId) ?? 0;
+
+  const read = (): EngineModelCacheFile => {
+    if (cache) return cache;
+    try {
+      const raw = fs.readFileSync(cachePath(), 'utf-8');
+      const parsed = JSON.parse(raw) as Partial<EngineModelCacheFile>;
+      if (parsed.version === 1 && parsed.entries && typeof parsed.entries === 'object') {
+        cache = { version: 1, entries: parsed.entries as Record<string, CachedEngineModelList> };
+        return cache;
+      }
+    } catch {
+      // Missing or corrupt cache is non-fatal; model listing can repopulate it.
+    }
+    cache = { version: 1, entries: {} };
+    return cache;
+  };
+
+  const write = (next: EngineModelCacheFile): void => {
+    cache = next;
+    try {
+      const resolved = cachePath();
+      fs.mkdirSync(path.dirname(resolved), { recursive: true });
+      fs.writeFileSync(resolved, JSON.stringify(next, null, 2));
+    } catch (err) {
+      logger.warn('engineModelCache.writeFailed', { error: (err as Error).message });
+    }
+  };
+
+  const stamp = (list: EngineModelList): CachedEngineModelList => {
+    const now = Date.now();
+    return {
+      ...list,
+      cached: false,
+      cachedAt: now,
+      expiresAt: now + ENGINE_MODEL_CACHE_TTL_MS,
+    };
+  };
+
+  return {
+    currentVersion,
+
+    getCached(engineId: string): CachedEngineModelList | null {
+      const entry = read().entries[engineId];
+      if (!entry) return null;
+      if (Date.now() >= entry.expiresAt) return null;
+      return entry;
+    },
+
+    invalidate(engineId: string): boolean {
+      versions.set(engineId, currentVersion(engineId) + 1);
+      const current = read();
+      if (!(engineId in current.entries)) return false;
+      delete current.entries[engineId];
+      write(current);
+      return true;
+    },
+
+    store(engineId: string, list: EngineModelList, opts?: StoreOptions): EngineModelList {
+      const stamped = stamp(list);
+      const expectedVersion = opts?.expectedVersion;
+      if (expectedVersion != null && currentVersion(engineId) !== expectedVersion) {
+        logger.info?.('engineModelCache.skipStaleWrite', {
+          engineId,
+          expectedVersion,
+          currentVersion: currentVersion(engineId),
+        });
+        return stamped;
+      }
+      if (list.models.length > 0 && list.source !== 'fallback' && !list.error) {
+        const current = read();
+        current.entries[engineId] = stamped;
+        write(current);
+      }
+      return stamped;
+    },
+  };
+}
diff --git a/app/src/main/hl/engines/claude-code/adapter.ts b/app/src/main/hl/engines/claude-code/adapter.ts
index d0d4658c..c5972601 100644
--- a/app/src/main/hl/engines/claude-code/adapter.ts
+++ b/app/src/main/hl/engines/claude-code/adapter.ts
@@ -18,6 +18,7 @@ import { runCliCapture, spawnCli } from '../cliSpawn';
 import type {
   AuthProbe,
   EngineAdapter,
+  EngineModelList,
   InstallProbe,
   ParseContext,
   ParseResult,
@@ -29,6 +30,41 @@ const ID = 'claude-code';
 const DISPLAY = 'Claude Code';
 const BIN = 'claude';
 
+function claudeModelList(): EngineModelList {
+  const models: EngineModelList['models'] = [
+    {
+      id: 'sonnet',
+      displayName: 'Sonnet',
+      description: 'Claude Code Sonnet alias',
+      source: 'static',
+    },
+    {
+      id: 'opus',
+      displayName: 'Opus',
+      description: 'Claude Code Opus alias',
+      source: 'static',
+    },
+    {
+      id: 'haiku',
+      displayName: 'Haiku',
+      description: 'Claude Code Haiku alias',
+      source: 'static',
+    },
+  ];
+
+  const custom = process.env.ANTHROPIC_CUSTOM_MODEL_OPTION?.trim();
+  if (custom && !models.some((m) => m.id === custom)) {
+    models.push({
+      id: custom,
+      displayName: process.env.ANTHROPIC_CUSTOM_MODEL_OPTION_NAME?.trim() || custom,
+      description: process.env.ANTHROPIC_CUSTOM_MODEL_OPTION_DESCRIPTION?.trim() || 'Custom Claude Code model',
+      source: 'env',
+    });
+  }
+
+  return { engineId: ID, models, source: custom ? 'env' : 'static' };
+}
+
 // ── helpers: prompt shaping ─────────────────────────────────────────────────
 
 function stringifyToolInput(name: string, input: Record<string, unknown>): string {
@@ -115,6 +151,10 @@ const claudeCodeAdapter: EngineAdapter = {
     });
   },
 
+  async listModels(): Promise<EngineModelList> {
+    return claudeModelList();
+  },
+
   wrapPrompt(ctx: SpawnContext): string {
     const lines: string[] = [
       'You are driving a specific Chromium browser view on this machine.',
@@ -145,6 +185,7 @@ const claudeCodeAdapter: EngineAdapter = {
       '--verbose',
       '--dangerously-skip-permissions',
     ];
+    if (_ctx.model) args.push('--model', _ctx.model);
     if (_ctx.resumeSessionId) args.push('--resume', _ctx.resumeSessionId);
     args.push(wrappedPrompt);
     return args;
diff --git a/app/src/main/hl/engines/codex/adapter.ts b/app/src/main/hl/engines/codex/adapter.ts
index edc40dd0..b3c24e4e 100644
--- a/app/src/main/hl/engines/codex/adapter.ts
+++ b/app/src/main/hl/engines/codex/adapter.ts
@@ -18,15 +18,17 @@
 import fs from 'node:fs';
 import os from 'node:os';
 import path from 'node:path';
+import type { ChildProcessWithoutNullStreams } from 'node:child_process';
 import { mainLogger } from '../../../logger';
 import { register } from '../registry';
 import { applyBrowserHarnessEnv } from '../browserHarnessEnv';
 import { enrichedEnv } from '../pathEnrich';
-import { runCliCapture } from '../cliSpawn';
+import { runCliCapture, spawnCli } from '../cliSpawn';
 import { runCodexDeviceLogin } from '../../../identity/codexLogin';
 import type {
   AuthProbe,
   EngineAdapter,
+  EngineModelList,
   InstallProbe,
   ParseContext,
   ParseResult,
@@ -40,6 +42,166 @@ const DISPLAY = 'Codex';
 const BIN = 'codex';
 const BYPASS_APPROVALS_FLAG = '--dangerously-bypass-approvals-and-sandbox';
 
+const CODEX_FALLBACK_MODELS: EngineModelList['models'] = [
+  {
+    id: 'gpt-5.5',
+    displayName: 'GPT-5.5',
+    description: 'Frontier Codex model',
+    source: 'fallback',
+  },
+  {
+    id: 'gpt-5.4',
+    displayName: 'GPT-5.4',
+    description: 'Strong everyday coding model',
+    source: 'fallback',
+  },
+  {
+    id: 'gpt-5.4-mini',
+    displayName: 'GPT-5.4 Mini',
+    description: 'Fast, cost-efficient coding model',
+    source: 'fallback',
+  },
+  {
+    id: 'gpt-5.3-codex',
+    displayName: 'GPT-5.3 Codex',
+    description: 'Codex coding model',
+    source: 'fallback',
+  },
+];
+
+function normalizeCodexModels(raw: unknown): EngineModelList['models'] {
+  const data = raw && typeof raw === 'object' ? (raw as { data?: unknown }).data : undefined;
+  if (!Array.isArray(data)) return [];
+  return data.flatMap((item): EngineModelList['models'] => {
+    if (!item || typeof item !== 'object') return [];
+    const m = item as Record<string, unknown>;
+    const id = typeof m.model === 'string' ? m.model : typeof m.id === 'string' ? m.id : null;
+    if (!id) return [];
+    const efforts = Array.isArray(m.supportedReasoningEfforts)
+      ? m.supportedReasoningEfforts
+        .map((e) => e && typeof e === 'object' && typeof (e as Record<string, unknown>).reasoningEffort === 'string'
+          ? String((e as Record<string, unknown>).reasoningEffort)
+          : null)
+        .filter((e): e is string => Boolean(e))
+      : undefined;
+    return [{
+      id,
+      displayName: typeof m.displayName === 'string' ? m.displayName : id,
+      description: typeof m.description === 'string' ? m.description : undefined,
+      source: 'app-server',
+      hidden: typeof m.hidden === 'boolean' ? m.hidden : undefined,
+      isDefault: typeof m.isDefault === 'boolean' ? m.isDefault : undefined,
+      supportedReasoningEfforts: efforts && efforts.length > 0 ? efforts : undefined,
+    }];
+  });
+}
+
+function listCodexModelsViaAppServer(timeoutMs = 10_000): Promise<EngineModelList> {
+  return new Promise((resolve) => {
+    let child: ChildProcessWithoutNullStreams | undefined;
+    let settled = false;
+    let stdoutBuf = '';
+    let stderrBuf = '';
+    const settle = (result: EngineModelList) => {
+      if (settled) return;
+      settled = true;
+      clearTimeout(timer);
+      try { child?.kill('SIGTERM'); } catch { /* already closed */ }
+      resolve(result);
+    };
+    const fallback = (error: string): EngineModelList => ({
+      engineId: ID,
+      source: 'fallback',
+      error,
+      models: CODEX_FALLBACK_MODELS,
+    });
+    const send = (payload: unknown) => {
+      try { child?.stdin.write(`${JSON.stringify(payload)}\n`); }
+      catch { /* close handler will return fallback */ }
+    };
+    const handleMessage = (msg: Record<string, unknown>) => {
+      if (msg.id === 1) {
+        if (msg.error) {
+          const error = msg.error && typeof msg.error === 'object' && typeof (msg.error as Record<string, unknown>).message === 'string'
+            ? String((msg.error as Record<string, unknown>).message)
+            : 'Codex app-server initialize failed';
+          settle(fallback(error));
+          return;
+        }
+        send({ method: 'initialized' });
+        send({ id: 2, method: 'model/list', params: { includeHidden: false } });
+        return;
+      }
+      if (msg.id === 2) {
+        if (msg.error) {
+          const error = msg.error && typeof msg.error === 'object' && typeof (msg.error as Record<string, unknown>).message === 'string'
+            ? String((msg.error as Record<string, unknown>).message)
+            : 'Codex app-server model/list failed';
+          settle(fallback(error));
+          return;
+        }
+        const models = normalizeCodexModels(msg.result);
+        settle({
+          engineId: ID,
+          source: models.length > 0 ? 'app-server' : 'fallback',
+          error: models.length > 0 ? undefined : 'Codex app-server returned no models',
+          models: models.length > 0 ? models : CODEX_FALLBACK_MODELS,
+        });
+      }
+    };
+
+    const timer = setTimeout(() => {
+      settle(fallback('Codex app-server model/list timed out'));
+    }, timeoutMs);
+
+    try {
+      const env = enrichedEnv();
+      child = spawnCli(BIN, ['app-server', '--listen', 'stdio://'], { env, stdio: ['pipe', 'pipe', 'pipe'] });
+    } catch (err) {
+      settle(fallback((err as Error).message));
+      return;
+    }
+
+    child.stdout.on('data', (d) => {
+      stdoutBuf += String(d);
+      let idx;
+      while ((idx = stdoutBuf.indexOf('\n')) >= 0) {
+        const line = stdoutBuf.slice(0, idx).trim();
+        stdoutBuf = stdoutBuf.slice(idx + 1);
+        if (!line) continue;
+        try {
+          const parsed = JSON.parse(line) as Record<string, unknown>;
+          handleMessage(parsed);
+        } catch {
+          // Ignore non-protocol noise defensively.
+        }
+      }
+    });
+    child.stderr.on('data', (d) => {
+      stderrBuf += String(d);
+      if (stderrBuf.length > 4096) stderrBuf = stderrBuf.slice(-4096);
+    });
+    child.on('spawn', () => {
+      send({
+        id: 1,
+        method: 'initialize',
+        params: {
+          clientInfo: { name: 'browser-use-desktop', title: 'Browser Use', version: '0.0.30' },
+          capabilities: { experimentalApi: true },
+        },
+      });
+    });
+    child.on('error', (err) => {
+      settle(fallback(err.message));
+    });
+    child.on('close', (code) => {
+      if (!settled) {
+        settle(fallback(stderrBuf.trim() || `Codex app-server exited before model/list completed (${code})`));
+      }
+    });
+  });
+}
+
 function codexAuthFilePath(): string {
   const home = process.env.CODEX_HOME || path.join(os.homedir(), '.codex');
   return path.join(home, 'auth.json');
@@ -106,6 +268,10 @@ const codexAdapter: EngineAdapter = {
     return runCodexDeviceLogin(opts);
   },
 
+  async listModels(): Promise<EngineModelList> {
+    return listCodexModelsViaAppServer();
+  },
+
   wrapPrompt(ctx: SpawnContext): string {
     const lines: string[] = [
       'You are driving a specific Chromium browser view on this machine.',
@@ -134,10 +300,11 @@ const codexAdapter: EngineAdapter = {
     // getStdinPayload below for why we never pass the prompt via argv.
     // The bypass flag skips sandbox + approvals, mirroring Claude Code's
     // --dangerously-skip-permissions for this app-managed harness.
+    const modelArgs = ctx.model ? ['--model', ctx.model] : [];
     if (ctx.resumeSessionId) {
-      return ['exec', 'resume', '--json', BYPASS_APPROVALS_FLAG, ctx.resumeSessionId, '-'];
+      return ['exec', 'resume', '--json', BYPASS_APPROVALS_FLAG, ...modelArgs, ctx.resumeSessionId, '-'];
     }
-    return ['exec', '--json', BYPASS_APPROVALS_FLAG, '-'];
+    return ['exec', '--json', BYPASS_APPROVALS_FLAG, ...modelArgs, '-'];
   },
 
   getStdinPayload(_ctx: SpawnContext, wrappedPrompt: string): string {
diff --git a/app/src/main/hl/engines/cursor-agent/adapter.ts b/app/src/main/hl/engines/cursor-agent/adapter.ts
new file mode 100644
index 00000000..7c20a983
--- /dev/null
+++ b/app/src/main/hl/engines/cursor-agent/adapter.ts
@@ -0,0 +1,409 @@
+/**
+ * Cursor Agent engine adapter — wraps `agent -p --output-format stream-json`.
+ * CLI: https://docs.cursor.com/en/cli/overview (binary name: `agent`).
+ *
+ * Stream-json shape (similar to Claude Code but distinct):
+ *   system/init             → captures session_id (for --resume) and model
+ *   user                    → echo of the prompt; ignored
+ *   assistant (delta)       → message.content[].text — partial chunks carry
+ *                             a `timestamp_ms`; emit each as `thinking`
+ *   assistant (final)       → same shape but no `timestamp_ms`; ignored to
+ *                             avoid duplicating the streamed deltas
+ *   tool_call started       → tool_call.<name>ToolCall.args
+ *   tool_call completed     → tool_call.<name>ToolCall.result.{success|error}
+ *   result                  → done / error + usage (no cost field, estimated)
+ */
+
+import { spawn } from 'node:child_process';
+import { mainLogger } from '../../../logger';
+import { register } from '../registry';
+import { enrichedEnv, resolveCliSpawn } from '../pathEnrich';
+import type {
+  AuthProbe,
+  EngineAdapter,
+  EngineModelList,
+  InstallProbe,
+  ParseContext,
+  ParseResult,
+  SpawnContext,
+} from '../types';
+import type { HlEvent } from '../../../../shared/session-schemas';
+
+const ID = 'cursor-agent';
+const DISPLAY = 'Cursor Agent';
+const BIN = 'agent';
+
+function parseCursorModels(stdout: string): EngineModelList['models'] {
+  const models: EngineModelList['models'] = [];
+  for (const rawLine of stdout.split(/\r?\n/)) {
+    const line = rawLine.trim();
+    if (!line || line === 'Available models' || line.startsWith('Tip:')) continue;
+    const match = line.match(/^(\S+)\s+-\s+(.+)$/);
+    if (!match) continue;
+    const id = match[1];
+    const rawName = match[2].trim();
+    const isDefault = /\(default\)/i.test(rawName);
+    const isCurrent = /\(current\)/i.test(rawName);
+    const displayName = rawName.replace(/\s+\((?:default|current)\)/gi, '').trim();
+    models.push({
+      id,
+      displayName: displayName || id,
+      source: 'cli',
+      isDefault,
+      isCurrent,
+    });
+  }
+  return models;
+}
+
+// ── helpers ─────────────────────────────────────────────────────────────────
+
+function runCli(args: string[], timeoutMs = 5000): Promise<{ ok: boolean; stdout: string; stderr: string }> {
+  return new Promise((resolve) => {
+    let child;
+    try {
+      const env = enrichedEnv();
+      const resolved = resolveCliSpawn(BIN, args, { env });
+      child = spawn(resolved.command, resolved.args, { stdio: ['ignore', 'pipe', 'pipe'], env, ...resolved.spawnOptions });
+    }
+    catch { resolve({ ok: false, stdout: '', stderr: 'spawn failed' }); return; }
+    let stdout = ''; let stderr = '';
+    child.stdout.on('data', (d) => (stdout += String(d)));
+    child.stderr.on('data', (d) => (stderr += String(d)));
+    const timer = setTimeout(() => child.kill('SIGTERM'), timeoutMs);
+    child.on('error', () => { clearTimeout(timer); resolve({ ok: false, stdout, stderr }); });
+    child.on('close', (code) => { clearTimeout(timer); resolve({ ok: code === 0, stdout, stderr }); });
+  });
+}
+
+/** Map cursor's `<name>ToolCall` wrapper key to a Claude-Code-style tool name
+ *  the rest of the UI/postprocessor already understands. Unknown wrappers fall
+ *  through with the `ToolCall` suffix stripped. */
+function wrapperToToolName(wrapperKey: string): string {
+  if (wrapperKey === 'shellToolCall') return 'Bash';
+  if (wrapperKey === 'readToolCall') return 'Read';
+  if (wrapperKey === 'writeToolCall') return 'Write';
+  if (wrapperKey === 'editToolCall' || wrapperKey === 'patchToolCall') return 'Edit';
+  if (wrapperKey === 'lsToolCall') return 'LS';
+  if (wrapperKey === 'globToolCall') return 'Glob';
+  if (wrapperKey === 'grepToolCall') return 'Grep';
+  if (wrapperKey === 'webSearchToolCall') return 'WebSearch';
+  if (wrapperKey === 'webFetchToolCall') return 'WebFetch';
+  // Fallback: drop trailing "ToolCall", capitalize first letter so it renders
+  // nicely in the agent pane (e.g. `taskToolCall` → `Task`).
+  const stripped = wrapperKey.replace(/ToolCall$/, '');
+  return stripped ? stripped.charAt(0).toUpperCase() + stripped.slice(1) : wrapperKey;
+}
+
+/** Pull a meaningful args object out of cursor's wrapped tool_call payload.
+ *  Different tools nest things differently — shell puts the command at
+ *  `args.command`, read at `args.path`, etc. Forward the raw `args` plus a
+ *  `preview` string so the renderer can show something inline. */
+function extractToolArgs(name: string, raw: Record<string, unknown> | undefined): Record<string, unknown> {
+  const args = (raw?.args as Record<string, unknown> | undefined) ?? {};
+  const out: Record<string, unknown> = { ...args };
+  let preview: string;
+  if (name === 'Bash' && typeof args.command === 'string') {
+    preview = args.command as string;
+  } else if (typeof args.path === 'string') {
+    preview = args.path as string;
+  } else if (typeof args.file_path === 'string') {
+    preview = args.file_path as string;
+  } else {
+    preview = JSON.stringify(args);
+  }
+  out.preview = preview;
+  // Surface `path`/`file_path` interchangeably so the harness post-processor
+  // (which detects helpers.js / AGENTS.md edits) catches cursor reads/writes.
+  if (typeof args.path === 'string' && typeof out.file_path !== 'string') {
+    out.file_path = args.path;
+  }
+  return out;
+}
+
+function extractToolResult(raw: Record<string, unknown> | undefined): { text: string; ok: boolean } {
+  const result = raw?.result as Record<string, unknown> | undefined;
+  if (!result) return { text: '', ok: true };
+  if (result.error) {
+    const err = result.error as Record<string, unknown> | string;
+    if (typeof err === 'string') return { text: err, ok: false };
+    return { text: JSON.stringify(err), ok: false };
+  }
+  const success = result.success as Record<string, unknown> | undefined;
+  if (!success) return { text: JSON.stringify(result), ok: true };
+  // Shell tools: prefer stdout, fall back to stderr.
+  if (typeof success.stdout === 'string' || typeof success.stderr === 'string') {
+    const stdout = (success.stdout as string | undefined) ?? '';
+    const stderr = (success.stderr as string | undefined) ?? '';
+    const exitCode = typeof success.exitCode === 'number' ? (success.exitCode as number) : 0;
+    return { text: stdout || stderr, ok: exitCode === 0 };
+  }
+  // File tools: `content` for read, `path`/`bytesWritten` for write.
+  if (typeof success.content === 'string') return { text: success.content as string, ok: true };
+  return { text: JSON.stringify(success), ok: true };
+}
+
+// ── adapter ─────────────────────────────────────────────────────────────────
+
+const cursorAgentAdapter: EngineAdapter = {
+  id: ID,
+  displayName: DISPLAY,
+  binaryName: BIN,
+
+  async probeInstalled(): Promise<InstallProbe> {
+    const r = await runCli(['--version']);
+    if (!r.ok) return { installed: false, error: r.stderr || 'agent not found on PATH' };
+    const m = r.stdout.match(/(\d{4}\.\d{2}\.\d{2}[\w.-]*)/) ?? r.stdout.match(/(\d+\.\d+\.\d+)/);
+    return { installed: true, version: m?.[1] };
+  },
+
+  async probeAuthed(): Promise<AuthProbe> {
+    // `agent status` exits 0 in both states; discriminate on output text.
+    const r = await runCli(['status']);
+    const text = `${r.stdout}\n${r.stderr}`;
+    if (/logged in as/i.test(text)) return { authed: true };
+    if (/not logged in/i.test(text)) return { authed: false, error: 'not logged in' };
+    if (!r.ok) return { authed: false, error: r.stderr || r.stdout || 'agent status failed' };
+    return { authed: false, error: 'unknown auth state' };
+  },
+
+  async openLoginInTerminal(): Promise<{ opened: boolean; error?: string }> {
+    // `agent login` opens the system browser to the OAuth flow and waits for
+    // the callback. We spawn with stdio pipes so the child stays alive after
+    // this Promise resolves; the EnginePicker polls probeAuthed() to detect
+    // completion.
+    return new Promise((resolve) => {
+      let child;
+      try {
+        const env = enrichedEnv();
+        const resolved = resolveCliSpawn(BIN, ['login'], { env });
+        child = spawn(resolved.command, resolved.args, { stdio: ['ignore', 'pipe', 'pipe'], env, ...resolved.spawnOptions });
+      } catch (err) {
+        resolve({ opened: false, error: (err as Error).message });
+        return;
+      }
+      let stderrBuf = '';
+      let stdoutBuf = '';
+      let settled = false;
+      const finish = (result: { opened: boolean; error?: string }) => {
+        if (settled) return;
+        settled = true;
+        resolve(result);
+      };
+      const timer = setTimeout(() => {
+        mainLogger.warn('cursor-agent.login.timeout');
+        try { child.kill('SIGTERM'); } catch { /* already closed */ }
+      }, 5 * 60 * 1000);
+
+      child.stdout.on('data', (d) => { stdoutBuf += String(d); if (stdoutBuf.length > 4096) stdoutBuf = stdoutBuf.slice(-4096); });
+      child.stderr.on('data', (d) => { stderrBuf += String(d); if (stderrBuf.length > 4096) stderrBuf = stderrBuf.slice(-4096); });
+      child.on('spawn', () => {
+        mainLogger.info('cursor-agent.login.spawn');
+        finish({ opened: true });
+      });
+      child.on('error', (err) => {
+        clearTimeout(timer);
+        mainLogger.warn('cursor-agent.login.error', { error: err.message });
+        finish({ opened: false, error: err.message });
+      });
+      child.on('close', (code) => {
+        clearTimeout(timer);
+        mainLogger.info('cursor-agent.login.close', { code, stderr: stderrBuf.slice(-400) });
+        if (code !== 0 && !settled) {
+          finish({ opened: false, error: stderrBuf.trim() || stdoutBuf.trim() || `agent login exit ${code}` });
+        }
+      });
+    });
+  },
+
+  async listModels(): Promise<EngineModelList> {
+    const r = await runCli(['--list-models'], 10_000);
+    if (!r.ok) {
+      return {
+        engineId: ID,
+        source: 'fallback',
+        error: r.stderr || r.stdout || 'Unable to list Cursor Agent models',
+        models: [
+          { id: 'auto', displayName: 'Auto', source: 'fallback' },
+          { id: 'composer-2-fast', displayName: 'Composer 2 Fast', source: 'fallback' },
+          { id: 'composer-2', displayName: 'Composer 2', source: 'fallback' },
+        ],
+      };
+    }
+    const models = parseCursorModels(r.stdout);
+    return {
+      engineId: ID,
+      source: 'cli',
+      models,
+    };
+  },
+
+  wrapPrompt(ctx: SpawnContext): string {
+    const lines: string[] = [
+      'You are driving a specific Chromium browser view on this machine.',
+      `Your target is CDP target_id=${ctx.targetId} on port ${ctx.cdpPort} (env BU_TARGET_ID / BU_CDP_PORT).`,
+      'Read `./AGENTS.md` for how to drive the browser in this harness.',
+      'Always read `./helpers.js` before writing scripts — that is where the functions live. Edit it if a helper is missing.',
+    ];
+    if (ctx.attachmentRefs.length > 0) {
+      lines.push('', 'The user attached these files for this task. Read each with your Read tool before acting:');
+      for (const a of ctx.attachmentRefs) lines.push(`  - ${a.relPath} (${a.mime}, ${a.size} bytes)`);
+    }
+    lines.push(
+      '',
+      `When the user asks you to produce a file (a report, CSV, screenshot, transcript, etc.), save it to \`./outputs/${ctx.sessionId}/\`. Mention the filename in your final answer.`,
+      '',
+      `Task: ${ctx.prompt}`,
+    );
+    return lines.join('\n');
+  },
+
+  buildSpawnArgs(ctx: SpawnContext, wrappedPrompt: string): string[] {
+    // --print: headless mode; --output-format stream-json: NDJSON we parse;
+    // --stream-partial-output: emit text deltas as separate events so the UI
+    //   streams thinking instead of dumping the final message at the end;
+    // --force / --yolo: skip approvals (browser is already scoped by env);
+    // --trust: trust the harness cwd without prompting (only valid with -p);
+    // --sandbox disabled: helpers.js makes outbound CDP/network calls; the
+    //   default sandbox can break those in headless mode.
+    const args: string[] = [
+      '-p',
+      '--output-format', 'stream-json',
+      '--stream-partial-output',
+      '--force',
+      '--trust',
+      '--sandbox', 'disabled',
+    ];
+    if (ctx.model) args.push('--model', ctx.model);
+    if (ctx.resumeSessionId) args.push('--resume', ctx.resumeSessionId);
+    args.push(wrappedPrompt);
+    return args;
+  },
+
+  buildEnv(ctx: SpawnContext, baseEnv: NodeJS.ProcessEnv): NodeJS.ProcessEnv {
+    const env = enrichedEnv(baseEnv);
+    // Strip any pre-existing CURSOR_API_KEY so OAuth (`agent login`) wins by
+    // default. If the user saved an explicit API key in the app, inject it.
+    delete env.CURSOR_API_KEY;
+    if (ctx.savedApiKey) env.CURSOR_API_KEY = ctx.savedApiKey;
+    env.BU_TARGET_ID = ctx.targetId;
+    env.BU_CDP_PORT = String(ctx.cdpPort);
+    return env;
+  },
+
+  parseLine(line: string, ctx: ParseContext): ParseResult {
+    let evt: unknown;
+    try { evt = JSON.parse(line); } catch { return { events: [] }; }
+    if (!evt || typeof evt !== 'object') return { events: [] };
+    const e = evt as Record<string, unknown>;
+    const type = e.type as string | undefined;
+    const events: HlEvent[] = [];
+    let capturedSessionId: string | undefined;
+    let terminalDone = false;
+    let terminalError: string | undefined;
+
+    if (type === 'system') {
+      const subtype = e.subtype as string | undefined;
+      if (subtype === 'init') {
+        mainLogger.info('cursor-agent.init', { model: e.model, session_id: e.session_id, apiKeySource: e.apiKeySource });
+        if (typeof e.session_id === 'string') capturedSessionId = e.session_id;
+        if (typeof e.model === 'string') ctx.currentModel = e.model;
+      }
+      return { events, capturedSessionId };
+    }
+
+    if (type === 'user') {
+      // Echo of the user's own prompt — nothing to surface.
+      return { events };
+    }
+
+    if (type === 'assistant') {
+      // Cursor emits two flavors of assistant message:
+      //   - streamed deltas (have `timestamp_ms`) — small text fragments that
+      //     should each become a `thinking` event so the UI streams them.
+      //   - one final consolidated message (no `timestamp_ms`) — duplicates
+      //     the concatenated deltas; skip to avoid double-rendering.
+      const isDelta = typeof e.timestamp_ms === 'number';
+      if (!isDelta) return { events };
+      const msg = e.message as Record<string, unknown> | undefined;
+      const content = msg?.content as Array<Record<string, unknown>> | undefined;
+      if (!Array.isArray(content)) return { events };
+      for (const block of content) {
+        if (block?.type !== 'text') continue;
+        const txt = typeof block.text === 'string' ? (block.text as string) : '';
+        if (txt.length > 0) {
+          events.push({ type: 'thinking', text: txt });
+          if (txt.trim()) ctx.lastNarrative = txt;
+        }
+      }
+      return { events };
+    }
+
+    if (type === 'tool_call') {
+      const subtype = e.subtype as string | undefined;
+      const callId = e.call_id as string | undefined;
+      const wrapper = e.tool_call as Record<string, unknown> | undefined;
+      if (!callId || !wrapper) return { events };
+      const wrapperKeys = Object.keys(wrapper);
+      const wrapperKey = wrapperKeys[0];
+      if (!wrapperKey) return { events };
+      const inner = wrapper[wrapperKey] as Record<string, unknown> | undefined;
+      const name = wrapperToToolName(wrapperKey);
+
+      if (subtype === 'started') {
+        ctx.iter++;
+        const args = extractToolArgs(name, inner);
+        ctx.pendingTools.set(callId, { name, startedAt: Date.now(), iter: ctx.iter });
+        events.push({ type: 'tool_call', name, args, iteration: ctx.iter });
+        return { events };
+      }
+      if (subtype === 'completed') {
+        const match = ctx.pendingTools.get(callId);
+        const { text, ok } = extractToolResult(inner);
+        const ms = match ? Date.now() - match.startedAt : 0;
+        const resolvedName = match?.name ?? name;
+        events.push({ type: 'tool_result', name: resolvedName, ok, preview: text.slice(0, 2000), ms });
+        ctx.pendingTools.delete(callId);
+        return { events };
+      }
+      return { events };
+    }
+
+    if (type === 'result') {
+      // Cursor's result has `usage` but no cost field — surface the tokens
+      // with cost=0 so the session totals at least reflect token consumption.
+      const usage = e.usage as Record<string, unknown> | undefined;
+      if (usage) {
+        const inputTokens = typeof usage.inputTokens === 'number' ? (usage.inputTokens as number) : 0;
+        const outputTokens = typeof usage.outputTokens === 'number' ? (usage.outputTokens as number) : 0;
+        const cacheRead = typeof usage.cacheReadTokens === 'number' ? (usage.cacheReadTokens as number) : 0;
+        const cacheWrite = typeof usage.cacheWriteTokens === 'number' ? (usage.cacheWriteTokens as number) : 0;
+        events.push({
+          type: 'turn_usage',
+          inputTokens,
+          outputTokens,
+          cachedInputTokens: cacheRead + cacheWrite,
+          costUsd: 0,
+          model: ctx.currentModel,
+          source: 'estimated',
+        });
+        mainLogger.info('cursor-agent.turnUsage', { inputTokens, outputTokens, cacheRead, cacheWrite, model: ctx.currentModel });
+      }
+
+      const isError = e.is_error === true;
+      const subtype = e.subtype as string | undefined;
+      const resultText = (e.result as string | undefined) ?? '';
+      if (isError || (subtype && subtype !== 'success')) {
+        terminalError = `cursor_agent_error: ${subtype ?? 'error'} ${resultText}`.trim();
+        events.push({ type: 'error', message: terminalError });
+      } else {
+        terminalDone = true;
+        events.push({ type: 'done', summary: resultText || ctx.lastNarrative || '(done)', iterations: ctx.iter });
+      }
+    }
+
+    return { events, capturedSessionId, terminalDone, terminalError };
+  },
+};
+
+register(cursorAgentAdapter);
diff --git a/app/src/main/hl/engines/index.ts b/app/src/main/hl/engines/index.ts
index 1191366b..ffa928a1 100644
--- a/app/src/main/hl/engines/index.ts
+++ b/app/src/main/hl/engines/index.ts
@@ -6,6 +6,7 @@
 // Adapters (side-effect register()):
 import './claude-code/adapter';
 import './codex/adapter';
+import './cursor-agent/adapter';
 import './browsercode/adapter';
 
 export { runEngine } from './runEngine';
diff --git a/app/src/main/hl/engines/runEngine.ts b/app/src/main/hl/engines/runEngine.ts
index 93c4912b..66fd62f1 100644
--- a/app/src/main/hl/engines/runEngine.ts
+++ b/app/src/main/hl/engines/runEngine.ts
@@ -131,7 +131,7 @@ export async function runEngine(opts: RunEngineOptions): Promise<void> {
   //    Anthropic key to OpenAI (or vice versa).
   let savedApiKey: string | undefined;
   let providerId: string | undefined;
-  let model: string | undefined;
+  let model: string | undefined = opts.model;
   let cliAuthed = false;
   try {
     if (adapter.id === 'codex') {
@@ -142,7 +142,7 @@ export async function runEngine(opts: RunEngineOptions): Promise<void> {
       const cfg = await loadBrowserCodeConfig();
       if (cfg?.apiKey) savedApiKey = cfg.apiKey;
       if (cfg?.providerId) providerId = cfg.providerId;
-      if (cfg?.model) model = cfg.model;
+      if (!model && cfg?.model) model = cfg.model;
       // BrowserCode is configured exclusively through provider API keys in
       // Settings. Do not classify a saved provider key as CLI-managed OAuth.
       cliAuthed = false;
diff --git a/app/src/main/hl/engines/types.ts b/app/src/main/hl/engines/types.ts
index 22bff6f4..59666ff8 100644
--- a/app/src/main/hl/engines/types.ts
+++ b/app/src/main/hl/engines/types.ts
@@ -96,6 +96,8 @@ export interface EngineAdapter {
    *  can't use the default localhost-callback OAuth. Callers should poll
    *  `probeAuthed()` to detect when auth.json / OAuth creds appear. */
   openLoginInTerminal(opts?: { deviceAuth?: boolean }): Promise<{ opened: boolean; error?: string; verificationUrl?: string; deviceCode?: string }>;
+  /** List selectable models when the engine supports it. Static fallbacks are OK. */
+  listModels?(): Promise<EngineModelList>;
 
   // Execution
   /** Produce the argv for spawning this engine in headless mode. */
@@ -122,6 +124,8 @@ export interface EngineAdapter {
 export interface RunEngineOptions {
   engineId: string;
   prompt: string;
+  /** Optional model id selected by the user. Undefined means use the engine default. */
+  model?: string;
   sessionId: string;
   webContents: WebContents;
   cdpPort: number;
@@ -137,3 +141,24 @@ export interface RunEngineOptions {
    *  can stamp the session with the mode that actually ran it. */
   onAuthResolved?: (info: { authMode: 'apiKey' | 'subscription' | null; subscriptionType: string | null }) => void;
 }
+
+export interface EngineModelInfo {
+  id: string;
+  displayName: string;
+  description?: string;
+  source: 'cli' | 'app-server' | 'static' | 'env' | 'fallback';
+  isDefault?: boolean;
+  isCurrent?: boolean;
+  hidden?: boolean;
+  supportedReasoningEfforts?: string[];
+}
+
+export interface EngineModelList {
+  engineId: string;
+  models: EngineModelInfo[];
+  source: EngineModelInfo['source'];
+  error?: string;
+  cached?: boolean;
+  cachedAt?: number;
+  expiresAt?: number;
+}
diff --git a/app/src/main/hl/stock/browser-harness-js/sdk/generated.ts b/app/src/main/hl/stock/browser-harness-js/sdk/generated.ts
index 30f31c18..e1b4ed5e 100644
--- a/app/src/main/hl/stock/browser-harness-js/sdk/generated.ts
+++ b/app/src/main/hl/stock/browser-harness-js/sdk/generated.ts
@@ -5104,7 +5104,7 @@ export namespace Preload {
      * Source text of JSON representing the rule set. If it comes from
      * `<script>` tag, it is the textContent of the node. Note that it is
      * a JSON for valid case.
-     * 
+     *
      * See also:
      * - https://wicg.github.io/nav-speculation/speculation-rules.html
      * - https://github.com/WICG/nav-speculation/blob/main/triggers.md
@@ -5117,7 +5117,7 @@ export namespace Preload {
      * the BackendNodeId of the relevant `<script>` tag. For the second
      * case, we include the external URL where the rule set was loaded
      * from, and also RequestId if Network domain is enabled.
-     * 
+     *
      * See also:
      * - https://wicg.github.io/nav-speculation/speculation-rules.html#speculation-rules-script
      * - https://wicg.github.io/nav-speculation/speculation-rules.html#speculation-rules-header
@@ -5156,7 +5156,7 @@ export namespace Preload {
 
   /**
    * A key that identifies a preloading attempt.
-   * 
+   *
    * The url used is the url specified by the trigger (i.e. the initial URL), and
    * not the final url that is navigated to. For example, prerendering allows
    * same-origin main frame navigations during the attempt, but the attempt is
@@ -5188,7 +5188,7 @@ export namespace Preload {
    * concept of preloading pipeline. For example, if a site uses a
    * SpeculationRules for prerender, Chrome first starts a prefetch and
    * then upgrades it to prerender.
-   * 
+   *
    * CDP events for them are emitted separately but they share
    * `PreloadPipelineId`.
    */
@@ -5802,7 +5802,7 @@ export namespace SmartCardEmulation {
 
   /**
    * Indicates the PC/SC error code.
-   * 
+   *
    * This maps to:
    * PC/SC Lite: https://pcsclite.apdu.fr/api/group__ErrorCodes.html
    * Microsoft: https://learn.microsoft.com/en-us/windows/win32/secauthn/authentication-return-values
@@ -10694,7 +10694,7 @@ export namespace Page {
      * - `url`: document location
      * - `pageNumber`: current page number
      * - `totalPages`: total pages in the document
-     * 
+     *
      * For example, `<span class=title></span>` would generate span containing the title.
      */
     headerTemplate?: string;
@@ -11041,11 +11041,11 @@ export namespace PWA {
      * extended scope if the manifest has scope extensions and the flags
      * `DesktopPWAsLinkCapturingWithScopeExtensions` and
      * `WebAppEnableScopeExtensions` are enabled.
-     * 
+     *
      * Note, the API does not support resetting the linkCapturing to the
      * initial value, uninstalling and installing the web app again will reset
      * it.
-     * 
+     *
      * TODO(crbug.com/339453269): Setting this value on ChromeOS is not
      * supported yet.
      */
@@ -12648,11 +12648,11 @@ export interface Domains {
      * after a restart was scheduled. This can cause problems with restarting, so
      * we now continue execution immediatly after it has been scheduled until we
      * reach the beginning of the restarted frame.
-     * 
+     *
      * To stay back-wards compatible, `restartFrame` now expects a `mode`
      * parameter to be present. If the `mode` parameter is missing, `restartFrame`
      * errors out.
-     * 
+     *
      * The various return values are deprecated and `callFrames` is always empty.
      * Use the call frames from the `Debugger#paused` events instead, that fires
      * once V8 pauses at the beginning of the restarted function.
@@ -12711,7 +12711,7 @@ export interface Domains {
     setReturnValue: (params: Debugger.SetReturnValueParams) => Promise<void>;
     /**
      * Edits JavaScript source live.
-     * 
+     *
      * In general, functions that are currently on the stack can not be edited with
      * a single exception: If the edited function is the top-most stack frame and
      * that is the only activation of that function on the stack. In this case
@@ -13768,11 +13768,11 @@ export interface Domains {
     setInterceptFileChooserDialog: (params: Page.SetInterceptFileChooserDialogParams) => Promise<void>;
     /**
      * Enable/disable prerendering manually.
-     * 
+     *
      * This command is a short-term solution for https://crbug.com/1440085.
      * See https://docs.google.com/document/d/12HVmFxYj5Jc-eJr5OmWsa2bqTJsbgGLKI6ZIyx0_wpA
      * for more details.
-     * 
+     *
      * TODO(https://crbug.com/1440085): Remove this once Puppeteer supports tab targets.
      */
     setPrerenderingAllowed: (params: Page.SetPrerenderingAllowedParams) => Promise<void>;
@@ -13841,29 +13841,29 @@ export interface Domains {
     getOsAppState: (params: PWA.GetOsAppStateParams) => Promise<PWA.GetOsAppStateReturn>;
     /**
      * Installs the given manifest identity, optionally using the given installUrlOrBundleUrl
-     * 
+     *
      * IWA-specific install description:
      * manifestId corresponds to isolated-app:// + web_package::SignedWebBundleId
-     * 
+     *
      * File installation mode:
      * The installUrlOrBundleUrl can be either file:// or http(s):// pointing
      * to a signed web bundle (.swbn). In this case SignedWebBundleId must correspond to
      * The .swbn file's signing key.
-     * 
+     *
      * Dev proxy installation mode:
      * installUrlOrBundleUrl must be http(s):// that serves dev mode IWA.
      * web_package::SignedWebBundleId must be of type dev proxy.
-     * 
+     *
      * The advantage of dev proxy mode is that all changes to IWA
      * automatically will be reflected in the running app without
      * reinstallation.
-     * 
+     *
      * To generate bundle id for proxy mode:
      * 1. Generate 32 random bytes.
      * 2. Add a specific suffix at the end following the documentation
      *    https://github.com/WICG/isolated-web-apps/blob/main/Scheme.md#suffix
      * 3. Encode the entire sequence using Base32 without padding.
-     * 
+     *
      * If Chrome is not in IWA dev
      * mode, the installation will fail, regardless of the state of the allowlist.
      */
@@ -13884,11 +13884,11 @@ export interface Domains {
      * If some files in the parameters cannot be handled by the web app, they will
      * be ignored. If none of the files can be handled, this API returns an error.
      * If no files are provided as the parameter, this API also returns an error.
-     * 
+     *
      * According to the definition of the file handlers in the manifest file, one
      * Target.TargetID may represent a page handling one or more files. The order
      * of the returned Target.TargetIDs is not guaranteed.
-     * 
+     *
      * TODO(crbug.com/339454034): Check the existences of the input files.
      */
     launchFilesInApp: (params: PWA.LaunchFilesInAppParams) => Promise<PWA.LaunchFilesInAppReturn>;
@@ -13902,11 +13902,11 @@ export interface Domains {
      * Changes user settings of the web app identified by its manifestId. If the
      * app was not installed, this command returns an error. Unset parameters will
      * be ignored; unrecognized values will cause an error.
-     * 
+     *
      * Unlike the ones defined in the manifest files of the web apps, these
      * settings are provided by the browser and controlled by the users, they
      * impact the way the browser handling the web apps.
-     * 
+     *
      * See the comment of each parameter.
      */
     changeAppUserSettings: (params: PWA.ChangeAppUserSettingsParams) => Promise<void>;
@@ -14026,7 +14026,7 @@ export interface Domains {
     disable: () => Promise<void>;
     /**
      * Reports the successful result of a |SCardEstablishContext| call.
-     * 
+     *
      * This maps to:
      * PC/SC Lite: https://pcsclite.apdu.fr/api/group__API.html#gaa1b8970169fd4883a6dc4a8f43f19b67
      * Microsoft: https://learn.microsoft.com/en-us/windows/win32/api/winscard/nf-winscard-scardestablishcontext
@@ -14034,7 +14034,7 @@ export interface Domains {
     reportEstablishContextResult: (params: SmartCardEmulation.ReportEstablishContextResultParams) => Promise<void>;
     /**
      * Reports the successful result of a |SCardReleaseContext| call.
-     * 
+     *
      * This maps to:
      * PC/SC Lite: https://pcsclite.apdu.fr/api/group__API.html#ga6aabcba7744c5c9419fdd6404f73a934
      * Microsoft: https://learn.microsoft.com/en-us/windows/win32/api/winscard/nf-winscard-scardreleasecontext
@@ -14042,7 +14042,7 @@ export interface Domains {
     reportReleaseContextResult: (params: SmartCardEmulation.ReportReleaseContextResultParams) => Promise<void>;
     /**
      * Reports the successful result of a |SCardListReaders| call.
-     * 
+     *
      * This maps to:
      * PC/SC Lite: https://pcsclite.apdu.fr/api/group__API.html#ga93b07815789b3cf2629d439ecf20f0d9
      * Microsoft: https://learn.microsoft.com/en-us/windows/win32/api/winscard/nf-winscard-scardlistreadersa
@@ -14050,7 +14050,7 @@ export interface Domains {
     reportListReadersResult: (params: SmartCardEmulation.ReportListReadersResultParams) => Promise<void>;
     /**
      * Reports the successful result of a |SCardGetStatusChange| call.
-     * 
+     *
      * This maps to:
      * PC/SC Lite: https://pcsclite.apdu.fr/api/group__API.html#ga33247d5d1257d59e55647c3bb717db24
      * Microsoft: https://learn.microsoft.com/en-us/windows/win32/api/winscard/nf-winscard-scardgetstatuschangea
@@ -14059,7 +14059,7 @@ export interface Domains {
     /**
      * Reports the result of a |SCardBeginTransaction| call.
      * On success, this creates a new transaction object.
-     * 
+     *
      * This maps to:
      * PC/SC Lite: https://pcsclite.apdu.fr/api/group__API.html#gaddb835dce01a0da1d6ca02d33ee7d861
      * Microsoft: https://learn.microsoft.com/en-us/windows/win32/api/winscard/nf-winscard-scardbegintransaction
@@ -14068,20 +14068,20 @@ export interface Domains {
     /**
      * Reports the successful result of a call that returns only a result code.
      * Used for: |SCardCancel|, |SCardDisconnect|, |SCardSetAttrib|, |SCardEndTransaction|.
-     * 
+     *
      * This maps to:
      * 1. SCardCancel
      *    PC/SC Lite: https://pcsclite.apdu.fr/api/group__API.html#gaacbbc0c6d6c0cbbeb4f4debf6fbeeee6
      *    Microsoft: https://learn.microsoft.com/en-us/windows/win32/api/winscard/nf-winscard-scardcancel
-     * 
+     *
      * 2. SCardDisconnect
      *    PC/SC Lite: https://pcsclite.apdu.fr/api/group__API.html#ga4be198045c73ec0deb79e66c0ca1738a
      *    Microsoft: https://learn.microsoft.com/en-us/windows/win32/api/winscard/nf-winscard-scarddisconnect
-     * 
+     *
      * 3. SCardSetAttrib
      *    PC/SC Lite: https://pcsclite.apdu.fr/api/group__API.html#ga060f0038a4ddfd5dd2b8fadf3c3a2e4f
      *    Microsoft: https://learn.microsoft.com/en-us/windows/win32/api/winscard/nf-winscard-scardsetattrib
-     * 
+     *
      * 4. SCardEndTransaction
      *    PC/SC Lite: https://pcsclite.apdu.fr/api/group__API.html#gae8742473b404363e5c587f570d7e2f3b
      *    Microsoft: https://learn.microsoft.com/en-us/windows/win32/api/winscard/nf-winscard-scardendtransaction
@@ -14089,7 +14089,7 @@ export interface Domains {
     reportPlainResult: (params: SmartCardEmulation.ReportPlainResultParams) => Promise<void>;
     /**
      * Reports the successful result of a |SCardConnect| call.
-     * 
+     *
      * This maps to:
      * PC/SC Lite: https://pcsclite.apdu.fr/api/group__API.html#ga4e515829752e0a8dbc4d630696a8d6a5
      * Microsoft: https://learn.microsoft.com/en-us/windows/win32/api/winscard/nf-winscard-scardconnecta
@@ -14098,16 +14098,16 @@ export interface Domains {
     /**
      * Reports the successful result of a call that sends back data on success.
      * Used for |SCardTransmit|, |SCardControl|, and |SCardGetAttrib|.
-     * 
+     *
      * This maps to:
      * 1. SCardTransmit
      *    PC/SC Lite: https://pcsclite.apdu.fr/api/group__API.html#ga9a2d77242a271310269065e64633ab99
      *    Microsoft: https://learn.microsoft.com/en-us/windows/win32/api/winscard/nf-winscard-scardtransmit
-     * 
+     *
      * 2. SCardControl
      *    PC/SC Lite: https://pcsclite.apdu.fr/api/group__API.html#gac3454d4657110fd7f753b2d3d8f4e32f
      *    Microsoft: https://learn.microsoft.com/en-us/windows/win32/api/winscard/nf-winscard-scardcontrol
-     * 
+     *
      * 3. SCardGetAttrib
      *    PC/SC Lite: https://pcsclite.apdu.fr/api/group__API.html#gaacfec51917255b7a25b94c5104961602
      *    Microsoft: https://learn.microsoft.com/en-us/windows/win32/api/winscard/nf-winscard-scardgetattrib
@@ -14115,7 +14115,7 @@ export interface Domains {
     reportDataResult: (params: SmartCardEmulation.ReportDataResultParams) => Promise<void>;
     /**
      * Reports the successful result of a |SCardStatus| call.
-     * 
+     *
      * This maps to:
      * PC/SC Lite: https://pcsclite.apdu.fr/api/group__API.html#gae49c3c894ad7ac12a5b896bde70d0382
      * Microsoft: https://learn.microsoft.com/en-us/windows/win32/api/winscard/nf-winscard-scardstatusa
@@ -14231,9 +14231,9 @@ export interface Domains {
     /**
      * Inject object to the target's main frame that provides a communication
      * channel with browser target.
-     * 
+     *
      * Injected object will be available as `window[bindingName]`.
-     * 
+     *
      * The object has the following API:
      * - `binding.send(json)` - a method to send messages over the remote debugging protocol
      * - `binding.onmessage = json => handleMessage(json)` - a callback that will be called for the protocol notifications and command responses.
diff --git a/app/src/main/index.ts b/app/src/main/index.ts
index 5be8b1ef..b89eb8e7 100644
--- a/app/src/main/index.ts
+++ b/app/src/main/index.ts
@@ -80,6 +80,7 @@ import { captureEvent } from './telemetry';
 import { registerChromeImportHandlers } from './chrome-import/ipc';
 import { mainLogger } from './logger';
 import { createLocalTaskServer } from './localTaskServer';
+import { createEngineModelCache } from './engineModelCache';
 import {
   resolveUserDataDir,
   resolveCdpPort,
@@ -91,6 +92,7 @@ import { assertString, assertAttachments } from './ipc-validators';
 // pluggable (claude-code, codex, …) — see src/main/hl/engines/.
 import { bootstrapHarness, harnessDir } from './hl/harness';
 import { runEngine, DEFAULT_ENGINE_ID } from './hl/engines';
+import type { EngineModelList } from './hl/engines/types';
 import { getEngine, setEngine, type EngineId } from './hl/engine';
 import { forwardAgentEvent } from './pill';
 // Session management
@@ -118,6 +120,12 @@ import {
   stopUpdater,
 } from './updater';
 
+const engineModelCache = createEngineModelCache({
+  cachePath: () => path.join(app.getPath('userData'), 'engine-model-cache.json'),
+  logger: mainLogger,
+});
+const engineModelRequests = new Map<string, Promise<EngineModelList>>();
+
 // ---------------------------------------------------------------------------
 // Crash telemetry: catch unhandled errors before anything else
 // ---------------------------------------------------------------------------
@@ -478,19 +486,25 @@ app.whenReady().then(async () => {
   ipcMain.handle('pill:submit', async (_event, payload: unknown) => {
     let promptRaw: unknown;
     let attachmentsRaw: unknown;
+    let modelRaw: unknown;
     if (typeof payload === 'string') {
       promptRaw = payload;
     } else if (payload && typeof payload === 'object') {
       promptRaw = (payload as { prompt?: unknown }).prompt;
       attachmentsRaw = (payload as { attachments?: unknown }).attachments;
+      modelRaw = (payload as { model?: unknown }).model;
     } else {
-      throw new Error('pill:submit payload must be a string or { prompt, attachments? }');
+      throw new Error('pill:submit payload must be a string or { prompt, attachments?, engine?, model? }');
     }
     const validatedPrompt = assertString(promptRaw, 'prompt', 10000);
     const attachments = assertAttachments(attachmentsRaw);
+    const pillModelId = modelRaw == null || modelRaw === ''
+      ? null
+      : assertString(modelRaw, 'model', 200);
     mainLogger.info('main.pill:submit', {
       promptLength: validatedPrompt.length,
       attachmentCount: attachments.length,
+      model: pillModelId,
     });
 
     hidePill();
@@ -507,6 +521,7 @@ app.whenReady().then(async () => {
       ? pillEngineRaw
       : DEFAULT_ENGINE_ID;
     sessionManager.setSessionEngine(id, pillEngineId);
+    sessionManager.setSessionModel(id, pillModelId);
     if (attachments.length > 0) {
       const turnIndex = sessionManager.getNextAttachmentTurnIndex(id);
       for (const a of attachments) {
@@ -516,6 +531,7 @@ app.whenReady().then(async () => {
     captureEvent('session_created', {
       source: 'pill',
       engine: pillEngineId,
+      model: pillModelId ?? 'default',
       prompt_length: validatedPrompt.length,
       attachments_count: attachments.length,
     });
@@ -798,6 +814,7 @@ app.whenReady().then(async () => {
       launched = true;
       runEngine({
         engineId,
+        model: sessionManager.getSessionModel(id) ?? undefined,
         harnessDir: harnessDir(),
         sessionId: id,
         prompt: sessionManager.getSession(id)!.prompt,
@@ -884,26 +901,31 @@ app.whenReady().then(async () => {
     let promptRaw: unknown;
     let attachmentsRaw: unknown;
     let engineRaw: unknown;
+    let modelRaw: unknown;
     if (typeof payload === 'string') {
       promptRaw = payload;
     } else if (payload && typeof payload === 'object') {
       promptRaw = (payload as { prompt?: unknown }).prompt;
       attachmentsRaw = (payload as { attachments?: unknown }).attachments;
       engineRaw = (payload as { engine?: unknown }).engine;
+      modelRaw = (payload as { model?: unknown }).model;
     } else {
-      throw new Error('sessions:create payload must be a string or { prompt, attachments?, engine? }');
+      throw new Error('sessions:create payload must be a string or { prompt, attachments?, engine?, model? }');
     }
     const validatedPrompt = assertString(promptRaw, 'prompt', 10000);
     const attachments = assertAttachments(attachmentsRaw);
     const engineId = engineRaw == null ? DEFAULT_ENGINE_ID : assertString(engineRaw, 'engine', 50);
+    const modelId = modelRaw == null || modelRaw === '' ? null : assertString(modelRaw, 'model', 200);
     mainLogger.info('main.sessions:create', {
       promptLength: validatedPrompt.length,
       attachmentCount: attachments.length,
       engineId,
+      model: modelId,
       attachmentMeta: attachments.map((a) => ({ name: a.name, mime: a.mime, size: a.bytes.byteLength })),
     });
     const id = sessionManager.createSession(validatedPrompt);
     sessionManager.setSessionEngine(id, engineId);
+    sessionManager.setSessionModel(id, modelId);
     if (attachments.length > 0) {
       const turnIndex = sessionManager.getNextAttachmentTurnIndex(id);
       for (const a of attachments) {
@@ -913,6 +935,7 @@ app.whenReady().then(async () => {
     captureEvent('session_created', {
       source: 'hub',
       engine: engineId,
+      model: modelId ?? 'default',
       prompt_length: validatedPrompt.length,
       attachments_count: attachments.length,
     });
@@ -996,6 +1019,7 @@ app.whenReady().then(async () => {
     steerQueues.set(validatedId, []);
     runEngine({
       engineId,
+      model: sessionManager.getSessionModel(validatedId) ?? undefined,
       harnessDir: harnessDir(),
       sessionId: validatedId,
       prompt: validatedPrompt,
@@ -1073,6 +1097,7 @@ app.whenReady().then(async () => {
     steerQueues.set(validatedId, []);
     runEngine({
       engineId,
+      model: sessionManager.getSessionModel(validatedId) ?? undefined,
       harnessDir: harnessDir(),
       sessionId: validatedId,
       prompt: session.prompt,
@@ -1244,6 +1269,56 @@ app.whenReady().then(async () => {
     return { ...result, installed };
   });
 
+  ipcMain.handle('sessions:list-engine-models', async (_event, engineId: string, opts?: { forceRefresh?: boolean }) => {
+    const validated = assertString(engineId, 'engineId', 50);
+    const forceRefresh = Boolean(opts?.forceRefresh);
+    if (!forceRefresh) {
+      const cached = engineModelCache.getCached(validated);
+      if (cached) {
+        return { ...cached, cached: true };
+      }
+      const inFlight = engineModelRequests.get(validated);
+      if (inFlight) return inFlight;
+    }
+
+    const requestVersion = engineModelCache.currentVersion(validated);
+    const request = (async (): Promise<EngineModelList> => {
+      const { getAdapter } = await import('./hl/engines');
+      const adapter = getAdapter(validated);
+      if (!adapter) throw new Error(`unknown engine: ${validated}`);
+      if (!adapter.listModels) {
+        return engineModelCache.store(adapter.id, { engineId: adapter.id, models: [], source: 'static' }, { expectedVersion: requestVersion });
+      }
+      const listed = await adapter.listModels();
+      if (listed.source === 'fallback' || listed.error) {
+        // Only fall back to a still-fresh cache entry — `getCached`
+        // enforces the TTL so we don't resurrect stale lists when the live
+        // listing fails (e.g. after sign-out).
+        const stale = forceRefresh ? null : engineModelCache.getCached(validated);
+        if (stale) {
+          return { ...stale, cached: true, error: listed.error };
+        }
+      }
+      return engineModelCache.store(adapter.id, listed, { expectedVersion: requestVersion });
+    })();
+
+    if (!forceRefresh) engineModelRequests.set(validated, request);
+    try {
+      return await request;
+    } finally {
+      if (engineModelRequests.get(validated) === request) {
+        engineModelRequests.delete(validated);
+      }
+    }
+  });
+
+  ipcMain.handle('sessions:invalidate-engine-models', async (_event, engineId: string) => {
+    const validated = assertString(engineId, 'engineId', 50);
+    engineModelRequests.delete(validated);
+    const removed = engineModelCache.invalidate(validated);
+    return { invalidated: removed };
+  });
+
   ipcMain.handle('sessions:reveal-output', async (_event, filePath: string) => {
     const validated = assertString(filePath, 'filePath', 2000);
     const resolvedPath = path.isAbsolute(validated)
diff --git a/app/src/main/sessions/SessionManager.ts b/app/src/main/sessions/SessionManager.ts
index 64d4c5d7..5e6c8e35 100644
--- a/app/src/main/sessions/SessionManager.ts
+++ b/app/src/main/sessions/SessionManager.ts
@@ -41,6 +41,7 @@ export class SessionManager extends EventEmitter {
    * hydrated at startup so historical sessions resume on the same backend.
    */
   private sessionEngines: Map<string, string> = new Map();
+  private sessionModels: Map<string, string> = new Map();
   private termStates: Map<string, TermTranslatorState> = new Map();
   private db: SessionDb;
 
@@ -88,6 +89,7 @@ export class SessionManager extends EventEmitter {
       }
       if (row.model) {
         session.model = row.model;
+        this.sessionModels.set(row.id, row.model);
       }
       if (row.auth_mode === 'apiKey' || row.auth_mode === 'subscription') {
         session.authMode = row.auth_mode;
@@ -427,6 +429,8 @@ export class SessionManager extends EventEmitter {
     this.clearStuckTimer(id);
     this.abortControllers.delete(id);
     this.sessions.delete(id);
+    this.sessionEngines.delete(id);
+    this.sessionModels.delete(id);
     this.termStates.delete(id);
     this.db.deleteSession(id);
     mainLogger.info('SessionManager.deleteSession', { id });
@@ -587,14 +591,17 @@ export class SessionManager extends EventEmitter {
     return this.sessionEngines.get(id) ?? null;
   }
 
+  /** Record the explicit model selected for this session. Null means CLI default. */
   setSessionModel(id: string, model: string | null): void {
     const session = this.sessions.get(id);
+    if (model) this.sessionModels.set(id, model);
+    else this.sessionModels.delete(id);
+    this.db.updateModel(id, model);
     if (!session) {
       mainLogger.warn('SessionManager.setSessionModel.notFound', { id, model });
       return;
     }
     session.model = model ?? undefined;
-    this.db.updateModel(id, model);
     mainLogger.info('SessionManager.setSessionModel', {
       id,
       engine: session.engine ?? this.getSessionEngine(id),
@@ -603,6 +610,11 @@ export class SessionManager extends EventEmitter {
     this.emitEvent('session-updated', { ...session });
   }
 
+  /** Retrieve the per-session explicit model, or null for CLI default. */
+  getSessionModel(id: string): string | null {
+    return this.sessionModels.get(id) ?? null;
+  }
+
   /** Snapshot the auth mode + subscription type that actually ran this session.
    *  Called once at spawn by runEngine via the onAuthResolved callback. Frozen
    *  for the life of the session — later global auth-mode changes do not
diff --git a/app/src/main/settings/apiKeyIpc.ts b/app/src/main/settings/apiKeyIpc.ts
index 87bd668a..22218325 100644
--- a/app/src/main/settings/apiKeyIpc.ts
+++ b/app/src/main/settings/apiKeyIpc.ts
@@ -42,6 +42,7 @@ const CH_OAI_SAVE = 'settings:openai-key:save';
 const CH_OAI_TEST = 'settings:openai-key:test';
 const CH_OAI_DELETE = 'settings:openai-key:delete';
 const CH_CODEX_LOGOUT = 'settings:codex:logout';
+const CH_CURSOR_LOGOUT = 'settings:cursor-agent:logout';
 const CH_CC_LOGIN = 'settings:claude-code:login';
 const CH_CC_LOGOUT = 'settings:claude-code:logout';
 const CH_BCODE_GET_STATUS = 'settings:browsercode:get-status';
@@ -560,6 +561,11 @@ async function handleCodexLogout(): Promise<{ opened: boolean; error?: string }>
   return runLogoutCommand('codex', ['logout']);
 }
 
+async function handleCursorLogout(): Promise<{ opened: boolean; error?: string }> {
+  mainLogger.info('apiKeyIpc.cursor.logout');
+  return runLogoutCommand('agent', ['logout']);
+}
+
 async function handleClaudeCodeLogout(): Promise<{ opened: boolean; error?: string }> {
   mainLogger.info('apiKeyIpc.claudeCode.logout');
   // Clear our keychain mirror first so the UI updates immediately; then
@@ -583,6 +589,7 @@ export function registerApiKeyHandlers(): void {
   ipcMain.handle(CH_OAI_TEST, handleOpenAiTest);
   ipcMain.handle(CH_OAI_DELETE, handleOpenAiDelete);
   ipcMain.handle(CH_CODEX_LOGOUT, handleCodexLogout);
+  ipcMain.handle(CH_CURSOR_LOGOUT, handleCursorLogout);
   ipcMain.handle(CH_CC_LOGIN, handleClaudeCodeLogin);
   ipcMain.handle(CH_CC_LOGOUT, handleClaudeCodeLogout);
   ipcMain.handle(CH_BCODE_GET_STATUS, handleBrowserCodeGetStatus);
diff --git a/app/src/preload/pill.ts b/app/src/preload/pill.ts
index e12f46ba..f03fda97 100644
--- a/app/src/preload/pill.ts
+++ b/app/src/preload/pill.ts
@@ -250,6 +250,17 @@ contextBridge.exposeInMainWorld('electronAPI', {
   sessions: {
     listEngines: (): Promise<Array<{ id: string; displayName: string; binaryName: string }>> =>
       ipcRenderer.invoke('sessions:list-engines'),
+    listEngineModels: (engineId: string, opts?: { forceRefresh?: boolean }): Promise<{
+      engineId: string;
+      models: Array<{ id: string; displayName: string; description?: string; source: string; isDefault?: boolean; isCurrent?: boolean; hidden?: boolean; supportedReasoningEfforts?: string[] }>;
+      source: string;
+      error?: string;
+      cached?: boolean;
+      cachedAt?: number;
+      expiresAt?: number;
+    }> => ipcRenderer.invoke('sessions:list-engine-models', engineId, opts),
+    invalidateEngineModels: (engineId: string): Promise<{ invalidated: boolean }> =>
+      ipcRenderer.invoke('sessions:invalidate-engine-models', engineId),
     engineStatus: (engineId: string): Promise<{
       id: string;
       displayName: string;
diff --git a/app/src/preload/shell.ts b/app/src/preload/shell.ts
index d07f68bf..19be6ed8 100644
--- a/app/src/preload/shell.ts
+++ b/app/src/preload/shell.ts
@@ -103,6 +103,18 @@ contextBridge.exposeInMainWorld('electronAPI', {
       logout: (): Promise<{ opened: boolean; error?: string }> =>
         ipcRenderer.invoke('settings:codex:logout'),
     },
+    cursor: {
+      status: (): Promise<{
+        id: string;
+        displayName: string;
+        installed: { installed: boolean; version?: string; error?: string };
+        authed: { authed: boolean; error?: string };
+      }> => ipcRenderer.invoke('sessions:engine-status', 'cursor-agent'),
+      login: (): Promise<{ opened: boolean; error?: string }> =>
+        ipcRenderer.invoke('sessions:engine-login', 'cursor-agent'),
+      logout: (): Promise<{ opened: boolean; error?: string }> =>
+        ipcRenderer.invoke('settings:cursor-agent:logout'),
+    },
     browserCode: {
       getStatus: (): Promise<{
         keys: Record<string, { masked: string; lastModel?: string }>;
@@ -201,7 +213,7 @@ contextBridge.exposeInMainWorld('electronAPI', {
   },
   sessions: {
     create: (
-      promptOrPayload: string | { prompt: string; attachments?: Array<{ name: string; mime: string; bytes: Uint8Array }>; engine?: string },
+      promptOrPayload: string | { prompt: string; attachments?: Array<{ name: string; mime: string; bytes: Uint8Array }>; engine?: string; model?: string },
     ): Promise<string> => ipcRenderer.invoke('sessions:create', promptOrPayload),
     start: (id: string): Promise<void> => ipcRenderer.invoke('sessions:start', id),
     cancel: (id: string): Promise<void> => ipcRenderer.invoke('sessions:cancel', id),
@@ -220,6 +232,17 @@ contextBridge.exposeInMainWorld('electronAPI', {
       ipcRenderer.invoke('sessions:open-in-editor', { editorId, filePath }),
     listEngines: (): Promise<Array<{ id: string; displayName: string; binaryName: string }>> =>
       ipcRenderer.invoke('sessions:list-engines'),
+    listEngineModels: (engineId: string, opts?: { forceRefresh?: boolean }): Promise<{
+      engineId: string;
+      models: Array<{ id: string; displayName: string; description?: string; source: string; isDefault?: boolean; isCurrent?: boolean; hidden?: boolean; supportedReasoningEfforts?: string[] }>;
+      source: string;
+      error?: string;
+      cached?: boolean;
+      cachedAt?: number;
+      expiresAt?: number;
+    }> => ipcRenderer.invoke('sessions:list-engine-models', engineId, opts),
+    invalidateEngineModels: (engineId: string): Promise<{ invalidated: boolean }> =>
+      ipcRenderer.invoke('sessions:invalidate-engine-models', engineId),
     engineStatus: (engineId: string): Promise<{
       id: string;
       displayName: string;
diff --git a/app/src/renderer/globals.d.ts b/app/src/renderer/globals.d.ts
index 978c42b7..b1d9ce5c 100644
--- a/app/src/renderer/globals.d.ts
+++ b/app/src/renderer/globals.d.ts
@@ -34,7 +34,7 @@ declare module '*.webp' {
 
 interface ElectronSessionAPI {
   create: (
-    promptOrPayload: string | { prompt: string; attachments?: Array<{ name: string; mime: string; bytes: Uint8Array }>; engine?: string },
+    promptOrPayload: string | { prompt: string; attachments?: Array<{ name: string; mime: string; bytes: Uint8Array }>; engine?: string; model?: string },
   ) => Promise<string>;
   start: (id: string) => Promise<void>;
   cancel: (id: string) => Promise<void>;
@@ -47,6 +47,25 @@ interface ElectronSessionAPI {
   listEditors: () => Promise<Array<{ id: string; name: string }>>;
   openInEditor: (editorId: string, filePath: string) => Promise<{ opened: boolean }>;
   listEngines: () => Promise<Array<{ id: string; displayName: string; binaryName: string }>>;
+  listEngineModels: (engineId: string, opts?: { forceRefresh?: boolean }) => Promise<{
+    engineId: string;
+    models: Array<{
+      id: string;
+      displayName: string;
+      description?: string;
+      source: string;
+      isDefault?: boolean;
+      isCurrent?: boolean;
+      hidden?: boolean;
+      supportedReasoningEfforts?: string[];
+    }>;
+    source: string;
+    error?: string;
+    cached?: boolean;
+    cachedAt?: number;
+    expiresAt?: number;
+  }>;
+  invalidateEngineModels: (engineId: string) => Promise<{ invalidated: boolean }>;
   engineStatus: (engineId: string) => Promise<{
     id: string;
     displayName: string;
@@ -261,6 +280,17 @@ interface ElectronSettingsCodexAPI {
   logout: () => Promise<{ opened: boolean; error?: string }>;
 }
 
+interface ElectronSettingsCursorAPI {
+  status: () => Promise<{
+    id: string;
+    displayName: string;
+    installed: { installed: boolean; version?: string; error?: string };
+    authed: { authed: boolean; error?: string };
+  }>;
+  login: () => Promise<{ opened: boolean; error?: string }>;
+  logout: () => Promise<{ opened: boolean; error?: string }>;
+}
+
 interface ElectronSettingsBrowserCodeAPI {
   getStatus: () => Promise<{
     keys: Record<string, { masked: string; lastModel?: string }>;
@@ -332,6 +362,7 @@ interface ElectronSettingsAPI {
   claudeCode?: ElectronSettingsClaudeCodeAPI;
   openaiKey?: ElectronSettingsOpenAiKeyAPI;
   codex?: ElectronSettingsCodexAPI;
+  cursor?: ElectronSettingsCursorAPI;
   browserCode?: ElectronSettingsBrowserCodeAPI;
   app?: ElectronSettingsAppAPI;
 }
diff --git a/app/src/renderer/hub/AgentPane.tsx b/app/src/renderer/hub/AgentPane.tsx
index c7f9fb3b..b1c8f0f4 100644
--- a/app/src/renderer/hub/AgentPane.tsx
+++ b/app/src/renderer/hub/AgentPane.tsx
@@ -1017,7 +1017,14 @@ export function AgentPane({ session, focused, onRerun, onResume, onFollowUp, onD
           {session.engine === 'claude-code' && (
             <img className="pane__engine-icon" src={claudeCodeLogo} alt="Claude Code" title="Claude Code" />
           )}
-          {session.model && session.engine === 'browsercode' && (
+          {session.engine === 'cursor-agent' && (
+            <span
+              className="pane__engine-icon pane__engine-icon--inline"
+              title="Cursor Agent"
+              dangerouslySetInnerHTML={{ __html: cursorLogoSrc as string }}
+            />
+          )}
+          {session.model && (
             <span className="pane__model-badge" title={`Model: ${session.model}`}>
               {session.model.includes('/') ? session.model.split('/').pop() : session.model}
             </span>
diff --git a/app/src/renderer/hub/ConnectionsPane.tsx b/app/src/renderer/hub/ConnectionsPane.tsx
index 417cd7ec..640a644b 100644
--- a/app/src/renderer/hub/ConnectionsPane.tsx
+++ b/app/src/renderer/hub/ConnectionsPane.tsx
@@ -3,6 +3,7 @@ import anthropicLogo from './anthropic-logo.svg';
 import claudeCodeLogo from './claude-code-logo.svg';
 import openaiLogo from './openai-logo.svg';
 import codexLogo from './codex-logo.svg';
+import cursorLogo from './cursor-logo-white.svg';
 import opencodeLogo from './opencode-logo-dark.svg';
 import kimiLogo from './kimi-color.svg';
 import qwenLogo from './qwen-color.svg';
@@ -135,6 +136,8 @@ export function ConnectionsPane({
   const [codexStatus, setCodexStatus] = useState<EngineCliStatus>({ installed: false, authed: false });
   const [codexStatusLoaded, setCodexStatusLoaded] = useState(false);
   const [codexWaiting, setCodexWaiting] = useState(false);
+  const [cursorStatus, setCursorStatus] = useState<EngineCliStatus>({ installed: false, authed: false });
+  const [cursorWaiting, setCursorWaiting] = useState(false);
   // Surfaced from the codex login PTY when --device-auth is in play. Drives
   // the small "one-time code" block below the Codex card so users on
   // restricted networks (no localhost-callback) can still sign in.
@@ -234,6 +237,25 @@ export function ConnectionsPane({
     }
   }, [installingEngine]);
 
+  const refreshCursor = useCallback(async (): Promise<EngineCliStatus | null> => {
+    const api = window.electronAPI;
+    if (!api?.settings?.cursor) return null;
+    try {
+      const s = await api.settings.cursor.status();
+      const status = {
+        installed: s.installed.installed,
+        authed: s.authed.authed,
+        version: s.installed.version,
+        error: s.installed.error ?? s.authed.error,
+      };
+      setCursorStatus(status);
+      return status;
+    } catch (err) {
+      console.error('[connections] refreshCursor failed', err);
+      return null;
+    }
+  }, []);
+
   const refreshBrowserCode = useCallback(async (): Promise<BrowserCodeStatus['installed'] | null> => {
     const api = window.electronAPI;
     if (!api?.settings?.browserCode) {
@@ -366,8 +388,9 @@ export function ConnectionsPane({
     refreshClaudeCli();
     refreshOpenai();
     refreshCodex();
+    refreshCursor();
     refreshBrowserCode();
-  }, [refreshKey, refreshClaudeCli, refreshOpenai, refreshCodex, refreshBrowserCode]);
+  }, [refreshKey, refreshClaudeCli, refreshOpenai, refreshCodex, refreshCursor, refreshBrowserCode]);
 
   // Periodic refresh while the pane is mounted — catches external state
   // changes (user runs `claude auth logout` in a terminal, codex token
@@ -379,10 +402,11 @@ export function ConnectionsPane({
       refreshClaudeCli();
       refreshOpenai();
       refreshCodex();
+      refreshCursor();
       refreshBrowserCode();
     }, 5000);
     return () => clearInterval(id);
-  }, [refreshKey, refreshClaudeCli, refreshOpenai, refreshCodex, refreshBrowserCode]);
+  }, [refreshKey, refreshClaudeCli, refreshOpenai, refreshCodex, refreshCursor, refreshBrowserCode]);
 
   // Poll codex status while user completes the codex OAuth flow. Tighter
   // interval than the 5s panel refresh so the UI flips to "Signed in" the
@@ -409,6 +433,26 @@ export function ConnectionsPane({
     return () => { cancelled = true; };
   }, [codexWaiting, refreshCodex, codexStatus.authed]);
 
+  useEffect(() => {
+    if (!cursorWaiting) return;
+    let cancelled = false;
+    let attempts = 0;
+    const MAX = 180;
+    const tick = async () => {
+      if (cancelled) return;
+      attempts++;
+      const status = await refreshCursor();
+      if (status?.authed || cursorStatus.authed) {
+        setCursorWaiting(false);
+        return;
+      }
+      if (attempts >= MAX) { setCursorWaiting(false); return; }
+      setTimeout(tick, 1000);
+    };
+    void tick();
+    return () => { cancelled = true; };
+  }, [cursorWaiting, refreshCursor, cursorStatus.authed]);
+
   const handleSaveOpenai = useCallback(async () => {
     const api = window.electronAPI;
     if (!api?.settings?.openaiKey) return;
@@ -563,6 +607,27 @@ export function ConnectionsPane({
     await refreshCodex();
   }, [refreshCodex]);
 
+  const handleCursorLogin = useCallback(async () => {
+    const api = window.electronAPI;
+    if (!api?.settings?.cursor) return;
+    setCursorWaiting(true);
+    const res = await api.settings.cursor.login();
+    if (!res.opened) {
+      console.warn('[connections] cursor login failed', res.error);
+      setCursorWaiting(false);
+    }
+  }, []);
+
+  const handleCursorLogout = useCallback(async () => {
+    const api = window.electronAPI;
+    if (!api?.settings?.cursor?.logout) return;
+    const res = await api.settings.cursor.logout();
+    if (!res.opened) console.warn('[connections] cursor logout failed', res.error);
+    try { await api.sessions?.invalidateEngineModels?.('cursor-agent'); }
+    catch (err) { console.warn('[connections] invalidate cursor models failed', err); }
+    await refreshCursor();
+  }, [refreshCursor]);
+
   const handleSaveKey = useCallback(async () => {
     const api = window.electronAPI;
     if (!api?.settings?.apiKey) return;
@@ -1107,6 +1172,43 @@ export function ConnectionsPane({
           </div>
         )}
       </div>
+
+      <div className="conn-card">
+        <div className="conn-card__header">
+          <img className="conn-card__icon" src={cursorLogo} alt="" />
+          <div className="conn-card__info">
+            <div className="conn-card__title-row">
+              <span className="conn-card__name">Cursor</span>
+              <span className={`conn-card__dot ${cursorStatus.authed ? 'conn-card__dot--connected' : cursorWaiting ? 'conn-card__dot--connecting' : 'conn-card__dot--disconnected'}`} />
+            </div>
+            <span className="conn-card__subtitle">
+              {cursorStatus.authed
+                ? `Signed in with Cursor${cursorStatus.version ? ` · v${cursorStatus.version}` : ''}`
+                : cursorWaiting
+                ? 'Finish the OAuth flow in your browser…'
+                : !cursorStatus.installed
+                ? 'Cursor Agent CLI not installed'
+                : 'Not connected'}
+            </span>
+          </div>
+          <div className="conn-card__actions">
+            {cursorStatus.authed && (
+              <button className="conn-card__btn conn-card__btn--secondary" onClick={handleCursorLogout}>
+                Sign out
+              </button>
+            )}
+            {!cursorStatus.authed && cursorStatus.installed && (
+              <button
+                className="conn-card__btn conn-card__btn--primary"
+                onClick={handleCursorLogin}
+                disabled={cursorWaiting}
+              >
+                {cursorWaiting ? 'Waiting…' : 'Sign in with Cursor'}
+              </button>
+            )}
+          </div>
+        </div>
+      </div>
       </section>
 
       <section
diff --git a/app/src/renderer/hub/EnginePicker.tsx b/app/src/renderer/hub/EnginePicker.tsx
index d43bcea3..a54ec755 100644
--- a/app/src/renderer/hub/EnginePicker.tsx
+++ b/app/src/renderer/hub/EnginePicker.tsx
@@ -1,6 +1,7 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import claudeLogoSrc from './claude-logo.svg?raw';
 import openaiLogoSrc from './openai-logo.svg?raw';
+import cursorLogoSrc from './cursor-logo.svg?raw';
 import opencodeLogoSrc from './opencode-logo-dark.svg?raw';
 import { BrowserCodeProviderSubmenu } from './BrowserCodeModelPicker';
 import { pollInstalledStatus } from '../shared/installStatus';
@@ -18,6 +19,35 @@ export interface EngineStatus {
   authed: { authed: boolean; error?: string };
 }
 
+export interface EngineModelInfo {
+  id: string;
+  displayName: string;
+  description?: string;
+  source: string;
+  isDefault?: boolean;
+  isCurrent?: boolean;
+  hidden?: boolean;
+  supportedReasoningEfforts?: string[];
+}
+
+export interface EngineModelList {
+  engineId: string;
+  models: EngineModelInfo[];
+  source: string;
+  error?: string;
+  cached?: boolean;
+  cachedAt?: number;
+  expiresAt?: number;
+}
+
+interface ModelLoadState {
+  loading: boolean;
+  response?: EngineModelList;
+  error?: string;
+}
+
+type MenuView = 'providers' | 'models';
+
 function EngineLogo({ id }: { id: string }): React.ReactElement {
   if (id === 'claude-code') {
     return <span className="engine-logo" dangerouslySetInnerHTML={{ __html: claudeLogoSrc as string }} />;
@@ -25,6 +55,9 @@ function EngineLogo({ id }: { id: string }): React.ReactElement {
   if (id === 'codex') {
     return <span className="engine-logo" dangerouslySetInnerHTML={{ __html: openaiLogoSrc as string }} />;
   }
+  if (id === 'cursor-agent') {
+    return <span className="engine-logo" dangerouslySetInnerHTML={{ __html: cursorLogoSrc as string }} />;
+  }
   if (id === 'browsercode') {
     return <span className="engine-logo" dangerouslySetInnerHTML={{ __html: opencodeLogoSrc as string }} />;
   }
@@ -45,56 +78,145 @@ function ChevronIcon(): React.ReactElement {
   );
 }
 
+function RefreshIcon(): React.ReactElement {
+  return (
+    <svg width="11" height="11" viewBox="0 0 12 12" fill="none" aria-hidden="true">
+      <path d="M10 5.2A4 4 0 1 0 8.7 8.1" stroke="currentColor" strokeWidth="1.25" strokeLinecap="round" />
+      <path d="M10 2.5v2.7H7.3" stroke="currentColor" strokeWidth="1.25" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  );
+}
+
+function BackIcon(): React.ReactElement {
+  return (
+    <svg width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true">
+      <path d="M7.5 2.5L4 6l3.5 3.5" stroke="currentColor" strokeWidth="1.35" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  );
+}
+
+function ForwardIcon(): React.ReactElement {
+  return (
+    <svg width="12" height="12" viewBox="0 0 12 12" fill="none" aria-hidden="true">
+      <path d="M4.5 2.5L8 6l-3.5 3.5" stroke="currentColor" strokeWidth="1.35" strokeLinecap="round" strokeLinejoin="round" />
+    </svg>
+  );
+}
+
 interface EnginePickerProps {
   value: string;
   onChange: (engineId: string) => void;
+  model?: string;
+  modelByEngine?: Record<string, string | undefined>;
+  onModelChange?: (modelId: string | undefined, engineId: string) => void;
+  labelMode?: 'engine-model' | 'model';
   /** Fires when the dropdown opens/closes. Used by hosts (e.g. the pill
-   *  renderer) that need to grow their window so the menu isn't clipped. */
+   *  renderer) that need to grow their window so the menu isn't clipped.
+   *  The menu's pixel height is the exported MENU_HEIGHT constant — hosts
+   *  that auto-size can rely on it being fixed. */
   onOpenChange?: (open: boolean) => void;
 }
 
-export function EnginePicker({ value, onChange, onOpenChange }: EnginePickerProps): React.ReactElement {
+/** Fixed height of the dropdown menu (in CSS px). Exported so hosts that
+ *  auto-size their window (the pill) can compute the height they need to
+ *  reserve for the menu. Keep in sync with `.engine-picker__menu` in hub.css. */
+export const ENGINE_PICKER_MENU_HEIGHT = 200;
+
+export function EnginePicker({
+  value,
+  onChange,
+  model,
+  modelByEngine,
+  onModelChange,
+  labelMode = 'engine-model',
+  onOpenChange,
+}: EnginePickerProps): React.ReactElement {
   const [engines, setEngines] = useState<EngineInfo[]>([]);
   const [statuses, setStatuses] = useState<Record<string, EngineStatus>>({});
+  const [modelLists, setModelLists] = useState<Record<string, ModelLoadState>>({});
   const [open, setOpen] = useState(false);
+  const [menuView, setMenuView] = useState<MenuView>('providers');
+  const [modelViewEngineId, setModelViewEngineId] = useState<string | null>(null);
+  const [selectedProviderId, setSelectedProviderId] = useState<string | null>(null);
+  const [modelSearch, setModelSearch] = useState('');
   const [loggingIn, setLoggingIn] = useState<string | null>(null);
   const [installing, setInstalling] = useState<string | null>(null);
   const [browserCodeFlyoutOpen, setBrowserCodeFlyoutOpen] = useState(false);
   const menuRef = useRef<HTMLDivElement>(null);
+  const toggleRef = useRef<HTMLButtonElement>(null);
   const loggingInRef = useRef<string | null>(null);
   const installingRef = useRef<string | null>(null);
+  const [direction, setDirection] = useState<'up' | 'down'>('up');
 
   useEffect(() => { onOpenChange?.(open); }, [open, onOpenChange]);
 
+  // Pick open direction based on available space above the toggle. The menu
+  // has a fixed height (ENGINE_PICKER_MENU_HEIGHT) — if there isn't enough
+  // upward room, open downward. Hosts that auto-size (the pill) will grow
+  // their window to make the downward room.
+  useEffect(() => {
+    if (!open) return;
+    const btn = toggleRef.current;
+    if (!btn) return;
+    const r = btn.getBoundingClientRect();
+    setDirection(r.top >= ENGINE_PICKER_MENU_HEIGHT ? 'up' : 'down');
+  }, [open]);
+
+  useEffect(() => {
+    if (!open) {
+      setMenuView('providers');
+      setModelViewEngineId(null);
+      setModelSearch('');
+    }
+  }, [open]);
+
   const refreshStatus = useCallback(async (ids: string[]): Promise<EngineStatus[]> => {
-    console.info('[EnginePicker] refreshStatus.request', { ids });
     const updates = await Promise.all(
       ids.map(async (id) => {
         try { return await window.electronAPI?.sessions?.engineStatus?.(id); }
-        catch (err) {
-          console.warn('[EnginePicker] refreshStatus.failed', { id, error: (err as Error).message });
-          return null;
-        }
+        catch { return null; }
       }),
     );
-    console.info('[EnginePicker] refreshStatus.result', {
-      updates: updates.filter(Boolean).map((u) => ({
-        id: u?.id,
-        installed: u?.installed?.installed,
-        installedError: u?.installed?.error,
-        authed: u?.authed?.authed,
-        authError: u?.authed?.error,
-      })),
-    });
-    const validUpdates = updates.filter((u): u is EngineStatus => Boolean(u));
     setStatuses((prev) => {
       const next = { ...prev };
-      for (const u of validUpdates) next[u.id] = u;
+      for (const u of updates) if (u) next[u.id] = u;
       return next;
     });
-    return validUpdates;
+    return updates.filter((u): u is EngineStatus => Boolean(u));
   }, []);
 
+  const refreshModels = useCallback(async (engineId: string, force = false) => {
+    if (!onModelChange) return;
+    const existing = modelLists[engineId];
+    const isFresh = Boolean(existing?.response && (!existing.response.expiresAt || Date.now() < existing.response.expiresAt));
+    if (!force && (existing?.loading || isFresh)) return;
+    setModelLists((prev) => ({
+      ...prev,
+      [engineId]: { ...prev[engineId], loading: true, error: undefined },
+    }));
+    try {
+      const response = await window.electronAPI?.sessions?.listEngineModels?.(engineId, { forceRefresh: force });
+      setModelLists((prev) => ({
+        ...prev,
+        [engineId]: {
+          loading: false,
+          response: response ?? { engineId, models: [], source: 'static', error: 'Model listing unavailable' },
+          error: response?.error,
+        },
+      }));
+    } catch (err) {
+      const message = err instanceof Error ? err.message : 'Failed to list models';
+      setModelLists((prev) => ({
+        ...prev,
+        [engineId]: {
+          loading: false,
+          response: { engineId, models: [], source: 'static', error: message },
+          error: message,
+        },
+      }));
+    }
+  }, [modelLists, onModelChange]);
+
   // Mount: fetch engine list + initial statuses.
   useEffect(() => {
     let cancelled = false;
@@ -125,6 +247,17 @@ export function EnginePicker({ value, onChange, onOpenChange }: EnginePickerProp
     }
   }, [installing, statuses]);
 
+  // Background-load model catalogs once connection checks say an engine is
+  // installed and authenticated. The main process cache keeps this cheap.
+  useEffect(() => {
+    if (!onModelChange) return;
+    for (const engine of engines) {
+      const st = statuses[engine.id];
+      if (!st?.installed?.installed || !st?.authed?.authed) continue;
+      void refreshModels(engine.id);
+    }
+  }, [engines, statuses, onModelChange, refreshModels]);
+
   // Close on outside click.
   useEffect(() => {
     if (!open) return;
@@ -168,21 +301,54 @@ export function EnginePicker({ value, onChange, onOpenChange }: EnginePickerProp
   const currentStatus = currentEngine ? statuses[currentEngine.id] : undefined;
   const currentInstalled = currentStatus?.installed?.installed ?? true;
   const currentAuthed = currentStatus?.authed?.authed ?? true;
+  const currentModels = value ? modelLists[value]?.response?.models ?? [] : [];
+  const currentModel = model ? currentModels.find((m) => m.id === model) : undefined;
+  const currentModelLabel = model ? (currentModel?.displayName ?? model) : 'Default';
+  const modelOnlyLabel = labelMode === 'model';
+
+  const modelLabelFor = (engineId: string): string | null => {
+    const m = modelByEngine ? modelByEngine[engineId] : (engineId === value ? model : undefined);
+    if (!m) return null;
+    const list = modelLists[engineId]?.response?.models ?? [];
+    const found = list.find((x) => x.id === m);
+    return found?.displayName ?? m;
+  };
 
   const selectEngine = (id: string) => {
-    console.info('[EnginePicker] selectEngine', { id });
     onChange(id);
+    setSelectedProviderId(id);
+    setOpen(false);
+    setBrowserCodeFlyoutOpen(false);
+  };
+
+  const openModelsForEngine = (id: string) => {
+    if (!onModelChange) {
+      // No model picker — selecting a provider here is the commit point.
+      selectEngine(id);
+      return;
+    }
+    // Just navigate; don't commit engine until the user picks a model.
+    setModelViewEngineId(id);
+    setMenuView('models');
+    setModelSearch('');
+    const st = statuses[id];
+    if (st?.installed?.installed && st?.authed?.authed) void refreshModels(id);
+  };
+
+  const selectModel = (modelId: string | undefined) => {
+    const engineId = modelViewEngineId ?? value;
+    if (engineId && engineId !== value) onChange(engineId);
+    setSelectedProviderId(engineId);
+    if (engineId) onModelChange?.(modelId, engineId);
     setOpen(false);
   };
 
   const onLoginClick = async (id: string) => {
     if (loggingInRef.current === id) return;
-    console.info('[EnginePicker] login.request', { id });
     loggingInRef.current = id;
     setLoggingIn(id);
     try {
       const result = await window.electronAPI?.sessions?.engineLogin?.(id);
-      console.info('[EnginePicker] login.result', { id, result });
       if (!result?.opened) {
         loggingInRef.current = null;
         setLoggingIn(null);
@@ -195,9 +361,7 @@ export function EnginePicker({ value, onChange, onOpenChange }: EnginePickerProp
   };
 
   const openBrowserCodeSetup = async () => {
-    console.info('[EnginePicker] browsercode.setup.openSettings');
-    onChange('browsercode');
-    setOpen(false);
+    selectEngine('browsercode');
     try {
       await window.electronAPI?.settings?.open?.();
     } catch (err) {
@@ -207,17 +371,14 @@ export function EnginePicker({ value, onChange, onOpenChange }: EnginePickerProp
 
   const onInstallClick = async (id: string) => {
     if (installingRef.current === id) return;
-    console.info('[EnginePicker] install.request', { id });
     installingRef.current = id;
     setInstalling(id);
     try {
       const result = await window.electronAPI?.sessions?.engineInstall?.(id);
-      console.info('[EnginePicker] install.result', { id, result });
       if (result?.opened) {
         const status = await pollInstalledStatus(async () => {
           const updates = await refreshStatus([id]);
-          const next = updates.find((u) => u.id === id);
-          return next?.installed ?? null;
+          return updates.find((u) => u.id === id)?.installed ?? null;
         }, { initialInstalled: result.installed });
         if (!status?.installed) console.warn('[EnginePicker] engineInstall failed', { id, result });
       } else {
@@ -232,8 +393,7 @@ export function EnginePicker({ value, onChange, onOpenChange }: EnginePickerProp
     }
   };
 
-  const onItemClick = (id: string, installed: boolean, authed: boolean) => {
-    console.info('[EnginePicker] item.click', { id, installed, authed });
+  const onProviderClick = (id: string, installed: boolean, authed: boolean) => {
     if (installingRef.current === id || loggingInRef.current === id) return;
     if (!installed) {
       void onInstallClick(id);
@@ -247,38 +407,73 @@ export function EnginePicker({ value, onChange, onOpenChange }: EnginePickerProp
       void onLoginClick(id);
       return;
     }
-    selectEngine(id);
+    if (id === 'browsercode') {
+      selectEngine(id);
+      return;
+    }
+    openModelsForEngine(id);
   };
 
   if (engines.length === 0) return <span className="engine-picker engine-picker--empty" />;
 
+  const modelEngineId = modelViewEngineId ?? value;
+  const modelEngine = engines.find((e) => e.id === modelEngineId) ?? currentEngine;
+  const pageModel = modelEngine
+    ? (modelByEngine ? modelByEngine[modelEngine.id] : (modelEngine.id === value ? model : undefined))
+    : undefined;
+  const isCommittedEngine = modelEngine?.id === value;
+  const modelStatus = modelEngine ? statuses[modelEngine.id] : undefined;
+  const modelInstalled = modelStatus?.installed?.installed ?? true;
+  const modelAuthed = modelStatus?.authed?.authed ?? true;
+  const modelConnected = modelInstalled && modelAuthed;
+  const modelState = modelEngine ? modelLists[modelEngine.id] : undefined;
+  const modelResponse = modelState?.response;
+  const models = modelResponse?.models ?? [];
+  const normalizedSearch = modelSearch.trim().toLowerCase();
+  const visibleModels = normalizedSearch
+    ? models.filter((m) => {
+      const haystack = `${m.displayName} ${m.id} ${m.description ?? ''}`.toLowerCase();
+      return haystack.includes(normalizedSearch);
+    })
+    : models;
+  const showModelSearch = modelConnected && models.length > 10;
+  const selectedEngineId = selectedProviderId ?? value ?? null;
+
   return (
     <div className="engine-picker" ref={menuRef}>
       <button
+        ref={toggleRef}
         type="button"
-        className="engine-picker__toggle"
+        className={`engine-picker__toggle${modelOnlyLabel ? ' engine-picker__toggle--model-only' : ''}`}
         onClick={(e) => { e.stopPropagation(); setOpen((o) => !o); }}
         aria-haspopup="menu"
         aria-expanded={open}
-        title={currentEngine ? `Engine: ${currentEngine.displayName}${!currentAuthed ? ' — not logged in' : ''}` : 'Pick engine'}
+        aria-label={currentEngine ? `Engine: ${currentEngine.displayName} · Model: ${currentModelLabel}${!currentAuthed ? ' — not logged in' : ''}` : 'Pick engine'}
       >
         {currentEngine && <EngineLogo id={currentEngine.id} />}
-        <span className="engine-picker__name">{currentEngine?.displayName ?? '…'}</span>
+        <span className="engine-picker__label">
+          {modelOnlyLabel ? (
+            <span className="engine-picker__name">{currentModelLabel}</span>
+          ) : (
+            <span className="engine-picker__name">{currentEngine?.displayName ?? '…'}</span>
+          )}
+        </span>
         {(!currentInstalled || !currentAuthed) && <span className="engine-picker__dot" aria-label="Needs setup" />}
         <ChevronIcon />
       </button>
       {open && (
-        <div className="engine-picker__menu" role="menu">
-          {engines.map((e) => {
+        <div className={`engine-picker__menu engine-picker__menu--${menuView} engine-picker__menu--${direction}`} role="menu">
+          {menuView === 'providers' && engines.map((e) => {
             const st = statuses[e.id];
             const installed = st?.installed?.installed ?? true;
             const authed = st?.authed?.authed ?? true;
             const needsSetup = !installed || !authed;
+            const selected = e.id === selectedEngineId;
             const actionPending = installing === e.id || loggingIn === e.id;
-            const setupLabel = e.id === 'browsercode' ? 'Set up' : 'Log in';
-            const installLabel = installing === e.id ? 'Installing…' : 'Install';
             const isBrowserCode = e.id === 'browsercode';
-            const showSubmenu = isBrowserCode && installed && authed && browserCodeFlyoutOpen;
+            const setupLabel = isBrowserCode ? 'Set up' : 'Log in';
+            const installLabel = installing === e.id ? 'Installing…' : 'Install';
+            const showBrowserCodeSubmenu = isBrowserCode && installed && authed && browserCodeFlyoutOpen;
             return (
               <div
                 key={e.id}
@@ -287,15 +482,22 @@ export function EnginePicker({ value, onChange, onOpenChange }: EnginePickerProp
               >
                 <button
                   type="button"
-                  className={`engine-picker__item${e.id === value ? ' engine-picker__item--active' : ''}${actionPending ? ' engine-picker__item--disabled' : ''}`}
-                  onClick={() => onItemClick(e.id, installed, authed)}
+                  className={`engine-picker__item engine-picker__item-select${selected ? ' engine-picker__item--selected' : ''}${actionPending ? ' engine-picker__item--disabled' : ''}`}
+                  onClick={() => onProviderClick(e.id, installed, authed)}
                   disabled={actionPending}
                   title={!installed ? st?.installed?.error ?? `Install ${e.displayName}` : !authed ? st?.authed?.error ?? 'Start setup' : `Use ${e.displayName}`}
                   role="menuitem"
                 >
+                  <span className="engine-picker__item-check" aria-hidden={!selected}>
+                    {selected ? '✓' : ''}
+                  </span>
                   <EngineLogo id={e.id} />
-                  <span className="engine-picker__item-name">{e.displayName}</span>
-                  {e.id === value && <span className="engine-picker__check">✓</span>}
+                  <span className="engine-picker__item-text">
+                    <span className="engine-picker__item-name">{e.displayName}</span>
+                    {selected && (
+                      <span className="engine-picker__item-sub">{modelLabelFor(e.id) ?? 'Default'}</span>
+                    )}
+                  </span>
                   {needsSetup && installed && (
                     <span className="engine-picker__item-login">
                       {loggingIn === e.id ? 'Waiting…' : setupLabel}
@@ -304,15 +506,14 @@ export function EnginePicker({ value, onChange, onOpenChange }: EnginePickerProp
                   {!installed && (
                     <span className="engine-picker__item-login">{installLabel}</span>
                   )}
-                  {isBrowserCode && installed && authed && (
-                    <span className="engine-picker__chevron-right" aria-hidden="true">
-                      <svg width="10" height="10" viewBox="0 0 10 10" fill="none">
-                        <path d="M4 2.5L6.5 5L4 7.5" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round" />
-                      </svg>
-                    </span>
+                  {!needsSetup && isBrowserCode && (
+                    <span className="engine-picker__chevron-right" aria-hidden="true"><ForwardIcon /></span>
+                  )}
+                  {!needsSetup && !isBrowserCode && (
+                    <span className="engine-picker__item-arrow"><ForwardIcon /></span>
                   )}
                 </button>
-                {showSubmenu && (
+                {showBrowserCodeSubmenu && (
                   <div className="engine-picker__flyout">
                     <BrowserCodeProviderSubmenu onSelected={() => { onChange('browsercode'); setOpen(false); setBrowserCodeFlyoutOpen(false); }} />
                   </div>
@@ -320,6 +521,109 @@ export function EnginePicker({ value, onChange, onOpenChange }: EnginePickerProp
               </div>
             );
           })}
+          {menuView === 'models' && modelEngine && (
+            <div className="engine-picker__models">
+              <div className="engine-picker__models-title">
+                <button
+                  type="button"
+                  className="engine-picker__models-back"
+                  onClick={() => { setMenuView('providers'); setModelSearch(''); }}
+                  aria-label="Back to engines"
+                  title="Back to engines"
+                >
+                  <BackIcon />
+                </button>
+                <span className="engine-picker__models-provider">
+                  <EngineLogo id={modelEngine.id} />
+                  <span>{modelEngine.displayName}</span>
+                </span>
+                <span className="engine-picker__models-title-actions">
+                  {!modelInstalled && <span className="engine-picker__models-status">Not installed</span>}
+                  {modelInstalled && !modelAuthed && <span className="engine-picker__models-status">Connect first</span>}
+                  {modelConnected && modelState?.loading && <span className="engine-picker__models-status">Loading</span>}
+                  {modelConnected && (
+                    <button
+                      type="button"
+                      className="engine-picker__models-refresh"
+                      onClick={() => refreshModels(modelEngine.id, true)}
+                      disabled={modelState?.loading}
+                      aria-label={`Refresh ${modelEngine.displayName} models`}
+                      title="Refresh model list"
+                    >
+                      <RefreshIcon />
+                    </button>
+                  )}
+                </span>
+              </div>
+              {showModelSearch && (
+                <div className="engine-picker__model-search">
+                  <input
+                    type="search"
+                    className="engine-picker__model-search-input"
+                    value={modelSearch}
+                    onChange={(e) => setModelSearch(e.target.value)}
+                    placeholder={`Search models (${models.length} available)`}
+                    aria-label={`Search ${modelEngine.displayName} models (${models.length} available)`}
+                    autoFocus
+                  />
+                </div>
+              )}
+              <div className="engine-picker__models-list">
+                <button
+                  type="button"
+                  className="engine-picker__model-option"
+                  onClick={() => selectModel(undefined)}
+                >
+                  <span className="engine-picker__model-option-main">
+                    <span className="engine-picker__model-option-name">Default</span>
+                    <span className="engine-picker__model-option-id">Use {modelEngine.displayName}'s configured default</span>
+                  </span>
+                  {isCommittedEngine && !pageModel && <span className="engine-picker__check">✓</span>}
+                </button>
+                {isCommittedEngine && pageModel && !models.some((m) => m.id === pageModel) && (
+                  <button
+                    type="button"
+                    className="engine-picker__model-option engine-picker__model-option--active"
+                    onClick={() => selectModel(pageModel)}
+                  >
+                    <span className="engine-picker__model-option-main">
+                      <span className="engine-picker__model-option-name">{pageModel}</span>
+                      <span className="engine-picker__model-option-id">Selected model</span>
+                    </span>
+                    <span className="engine-picker__check">✓</span>
+                  </button>
+                )}
+                {visibleModels.map((m) => {
+                  const isSelected = isCommittedEngine && pageModel === m.id;
+                  return (
+                    <button
+                      key={m.id}
+                      type="button"
+                      className={`engine-picker__model-option${isSelected ? ' engine-picker__model-option--active' : ''}`}
+                      onClick={() => selectModel(m.id)}
+                      title={m.description || m.id}
+                    >
+                      <span className="engine-picker__model-option-main">
+                        <span className="engine-picker__model-option-name">{m.displayName}</span>
+                        <span className="engine-picker__model-option-id">
+                          {m.id}{m.isDefault ? ' · default' : ''}{m.isCurrent ? ' · current' : ''}
+                        </span>
+                      </span>
+                      {isSelected && <span className="engine-picker__check">✓</span>}
+                    </button>
+                  );
+                })}
+                {showModelSearch && visibleModels.length === 0 && (
+                  <div className="engine-picker__model-empty">No matching models</div>
+                )}
+              </div>
+              {(modelResponse?.error || modelState?.error) && (
+                <div className="engine-picker__model-error" title={modelResponse?.error ?? modelState?.error}>
+                  Using fallback model list
+                </div>
+              )}
+            </div>
+          )}
         </div>
       )}
     </div>
diff --git a/app/src/renderer/hub/HubApp.tsx b/app/src/renderer/hub/HubApp.tsx
index dfce1d74..1f4eaa88 100644
--- a/app/src/renderer/hub/HubApp.tsx
+++ b/app/src/renderer/hub/HubApp.tsx
@@ -377,10 +377,11 @@ export function HubApp(): React.ReactElement {
     }
   }, [focusIndex, sessions, gridColumns, gridPage]);
 
-  const handleCreateSession = useCallback(async (input: string | { prompt: string; attachments?: Array<{ name: string; mime: string; bytes: Uint8Array }>; engine?: string }) => {
+  const handleCreateSession = useCallback(async (input: string | { prompt: string; attachments?: Array<{ name: string; mime: string; bytes: Uint8Array }>; engine?: string; model?: string }) => {
     const prompt = typeof input === 'string' ? input : input.prompt;
     const attachments = typeof input === 'string' ? [] : (input.attachments ?? []);
     const engine = typeof input === 'string' ? undefined : input.engine;
+    const model = typeof input === 'string' ? undefined : input.model;
     if (isMock) {
       const id = `session-${++sessionCounter}`;
       const now = Date.now();
@@ -416,10 +417,10 @@ export function HubApp(): React.ReactElement {
     if (!api) { console.error('[HubApp] electronAPI not available'); return; }
 
     try {
-      console.log('[HubApp] createSession (live)', { prompt, attachmentCount: attachments.length });
+      console.log('[HubApp] createSession (live)', { prompt, attachmentCount: attachments.length, engine, model });
       const id = await api.sessions.create(
-        attachments.length > 0 || engine
-          ? { prompt, attachments, engine }
+        attachments.length > 0 || engine || model
+          ? { prompt, attachments, engine, model }
           : prompt,
       );
       console.log('[HubApp] session created', { id });
diff --git a/app/src/renderer/hub/TaskInput.tsx b/app/src/renderer/hub/TaskInput.tsx
index ce93dea9..7d9c79be 100644
--- a/app/src/renderer/hub/TaskInput.tsx
+++ b/app/src/renderer/hub/TaskInput.tsx
@@ -27,6 +27,7 @@ export interface TaskInputSubmission {
   prompt: string;
   attachments: TaskInputAttachment[];
   engine: string;
+  model?: string;
 }
 
 interface TaskInputProps {
@@ -34,6 +35,7 @@ interface TaskInputProps {
 }
 
 const ENGINE_STORAGE_KEY = 'hub.selectedEngine';
+const MODEL_STORAGE_PREFIX = 'hub.selectedModel.';
 const DEFAULT_ENGINE = 'claude-code';
 
 function loadStoredEngine(): string {
@@ -45,6 +47,25 @@ function loadStoredEngine(): string {
   }
 }
 
+function loadStoredModel(engineId: string): string | undefined {
+  try {
+    const v = localStorage.getItem(`${MODEL_STORAGE_PREFIX}${engineId}`);
+    return v && v.length > 0 ? v : undefined;
+  } catch {
+    return undefined;
+  }
+}
+
+function storeSelectedModel(engineId: string, model: string | undefined): void {
+  try {
+    const key = `${MODEL_STORAGE_PREFIX}${engineId}`;
+    if (model) localStorage.setItem(key, model);
+    else localStorage.removeItem(key);
+  } catch {
+    // ignore
+  }
+}
+
 export interface TaskInputHandle {
   addFiles: (files: FileList | File[]) => Promise<void>;
   focus: () => void;
@@ -86,6 +107,11 @@ export const TaskInput = forwardRef<TaskInputHandle, TaskInputProps>(function Ta
   const [errorMsg, setErrorMsg] = useState<string | null>(null);
   const [dragActive, setDragActive] = useState(false);
   const [engine, setEngine] = useState<string>(() => loadStoredEngine());
+  const [modelsByEngine, setModelsByEngine] = useState<Record<string, string | undefined>>(() => {
+    const storedEngine = loadStoredEngine();
+    const storedModel = loadStoredModel(storedEngine);
+    return storedModel ? { [storedEngine]: storedModel } : {};
+  });
   const textareaRef = useRef<HTMLTextAreaElement>(null);
   const fileInputRef = useRef<HTMLInputElement>(null);
 
@@ -152,19 +178,29 @@ export const TaskInput = forwardRef<TaskInputHandle, TaskInputProps>(function Ta
   const submit = useCallback(() => {
     const trimmed = value.trim();
     if (!trimmed && attachments.length === 0) return;
-    console.log('[TaskInput] submit', { promptLength: trimmed.length, attachmentCount: attachments.length });
-    onSubmit({ prompt: trimmed, attachments, engine });
+    const model = modelsByEngine[engine];
+    console.log('[TaskInput] submit', { promptLength: trimmed.length, attachmentCount: attachments.length, engine, model });
+    onSubmit({ prompt: trimmed, attachments, engine, model });
     setValue('');
     setAttachments([]);
     setErrorMsg(null);
     textareaRef.current?.focus();
-  }, [value, attachments, engine, onSubmit]);
+  }, [value, attachments, engine, modelsByEngine, onSubmit]);
 
   const onEngineChange = useCallback((id: string) => {
     setEngine(id);
+    setModelsByEngine((prev) => (id in prev ? prev : { ...prev, [id]: loadStoredModel(id) }));
     try { localStorage.setItem(ENGINE_STORAGE_KEY, id); } catch { /* ignore */ }
   }, []);
 
+  const onModelChange = useCallback((model: string | undefined, engineId: string) => {
+    // Use the engineId reported by the picker rather than the closure's
+    // `engine` state — when the user picks a model on a different engine in
+    // the same interaction, our `engine` state hasn't updated yet.
+    setModelsByEngine((prev) => ({ ...prev, [engineId]: model }));
+    storeSelectedModel(engineId, model);
+  }, []);
+
   const onKeyDown = useCallback(
     (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
       if (e.key === 'Enter' && !e.shiftKey) {
@@ -259,7 +295,13 @@ export const TaskInput = forwardRef<TaskInputHandle, TaskInputProps>(function Ta
           >
             <PaperclipIcon />
           </button>
-          <EnginePicker value={engine} onChange={onEngineChange} />
+          <EnginePicker
+            value={engine}
+            model={modelsByEngine[engine]}
+            modelByEngine={modelsByEngine}
+            onChange={onEngineChange}
+            onModelChange={onModelChange}
+          />
           <input
             ref={fileInputRef}
             type="file"
diff --git a/app/src/renderer/hub/cursor-logo-white.svg b/app/src/renderer/hub/cursor-logo-white.svg
new file mode 100644
index 00000000..89416799
--- /dev/null
+++ b/app/src/renderer/hub/cursor-logo-white.svg
@@ -0,0 +1 @@
+<svg fill="#ffffff" fill-rule="evenodd" height="1em" style="flex:none;line-height:1" viewBox="0 0 24 24" width="1em" xmlns="http://www.w3.org/2000/svg"><title>Cursor</title><path d="M22.106 5.68L12.5.135a.998.998 0 00-.998 0L1.893 5.68a.84.84 0 00-.419.726v11.186c0 .3.16.577.42.727l9.607 5.547a.999.999 0 00.998 0l9.608-5.547a.84.84 0 00.42-.727V6.407a.84.84 0 00-.42-.726zm-.603 1.176L12.228 22.92c-.063.108-.228.064-.228-.061V12.34a.59.59 0 00-.295-.51l-9.11-5.26c-.107-.062-.063-.228.062-.228h18.55c.264 0 .428.286.296.514z"></path></svg>
diff --git a/app/src/renderer/hub/hub.css b/app/src/renderer/hub/hub.css
index 35310202..865f10cb 100644
--- a/app/src/renderer/hub/hub.css
+++ b/app/src/renderer/hub/hub.css
@@ -400,7 +400,7 @@
   position: absolute;
   top: calc(100% + var(--space-2));
   left: 0;
-  min-width: 320px;
+  min-width: 220px;
   background-color: var(--color-bg-overlay);
   background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0));
   border: 1px solid var(--color-border-strong);
@@ -498,10 +498,6 @@
   font-family: var(--font-mono);
   color: var(--color-fg-tertiary);
   flex: 1;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
 }
 
 .mem__session-mb {
@@ -509,8 +505,6 @@
   font-family: var(--font-mono);
   font-variant-numeric: tabular-nums;
   color: var(--color-fg-secondary);
-  flex-shrink: 0;
-  white-space: nowrap;
 }
 
 .mem__kill-btn {
@@ -773,6 +767,31 @@
   opacity: 0.85;
 }
 
+.pane__engine-icon--inline {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-text-secondary);
+}
+
+.pane__engine-icon--inline svg {
+  width: 14px;
+  height: 14px;
+}
+
+.pane__model-badge {
+  flex-shrink: 1;
+  min-width: 0;
+  max-width: 150px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 10px;
+  font-family: var(--font-family-mono);
+  color: var(--color-text-secondary);
+  line-height: 1;
+}
+
 /* Auth-mode badge — "MAX" / "PRO" / "KEY" / "CHATGPT". Frozen at session
    spawn so it reflects the mode that actually ran, not current settings. */
 .pane__auth-badge {
@@ -800,18 +819,6 @@
   color: var(--color-text-secondary);
 }
 
-.pane__model-badge {
-  max-width: 170px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  flex-shrink: 1;
-  font-size: 10px;
-  font-family: var(--font-family-mono);
-  color: var(--color-text-secondary);
-  line-height: 1;
-}
-
 /* Cost readout — tilde prefix signals notional/estimated (subscription or
    Codex); clean $ signals exact (Claude CLI's own total_cost_usd). */
 .pane__cost {
@@ -1031,19 +1038,6 @@
   gap: var(--space-3);
 }
 
-.pane__browser-actions {
-  display: flex;
-  align-items: center;
-  gap: var(--space-2);
-}
-
-.pane__browser-subline {
-  font-size: var(--font-size-xs);
-  color: var(--color-fg-quaternary, var(--color-fg-tertiary));
-  opacity: 0.7;
-  margin-top: calc(-1 * var(--space-2));
-}
-
 .pane__output-starting {
   display: flex;
   align-items: center;
@@ -1673,6 +1667,38 @@ button:focus:not(:focus-visible) {
   white-space: nowrap;
 }
 
+.engine-picker__label {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  min-width: 0;
+  max-width: 190px;
+}
+
+.engine-picker__model {
+  color: var(--color-fg-tertiary);
+  max-width: 110px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.engine-picker__model::before {
+  content: '/';
+  margin-right: 4px;
+  color: var(--color-fg-disabled, var(--color-fg-tertiary));
+}
+
+.engine-picker__toggle--model-only .engine-picker__label {
+  max-width: 130px;
+}
+
+.engine-picker__toggle--model-only .engine-picker__name {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 .engine-picker__dot {
   width: 6px;
   height: 6px;
@@ -1682,9 +1708,14 @@ button:focus:not(:focus-visible) {
 
 .engine-picker__menu {
   position: absolute;
-  bottom: calc(100% + 4px);
   right: 0;
-  min-width: 220px;
+  min-width: 240px;
+  max-width: min(360px, calc(100vw - 24px));
+  /* Fixed height so the menu is deterministic across hosts (hub + pill) and
+     doesn't depend on viewport size or content measurement. The inner list
+     scrolls when there are more entries than fit. */
+  height: 200px;
+  overflow: hidden;
   background-color: var(--color-bg-elevated);
   background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0));
   border: 1px solid var(--color-border-default);
@@ -1700,332 +1731,468 @@ button:focus:not(:focus-visible) {
   gap: 1px;
 }
 
+.engine-picker__menu--up {
+  bottom: calc(100% + 4px);
+}
+
+.engine-picker__menu--down {
+  top: calc(100% + 4px);
+}
+
+.engine-picker__menu--providers {
+  overflow-y: auto;
+}
+
+.engine-picker__menu--models {
+  min-width: 320px;
+}
+
 .engine-picker__item {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  border-radius: var(--radius-sm);
+}
+
+.engine-picker__item--active,
+.engine-picker__item--selected {
+  background-color: var(--color-bg-sunken);
+  box-shadow: inset 0 0 0 1px var(--color-border-subtle);
+}
+
+.engine-picker__item-select {
   appearance: none;
-  border: 0;
   background: transparent;
+  border: 0;
   color: var(--color-fg-primary);
   text-align: left;
-  width: 100%;
-  display: flex;
+  padding: 6px 8px;
+  flex: 1;
+  display: inline-flex;
   align-items: center;
   gap: 8px;
-  padding: 6px 8px;
-  border-radius: var(--radius-sm);
   font-size: var(--font-size-sm);
+  border-radius: var(--radius-sm);
   cursor: pointer;
 }
 
-.engine-picker__item--active {
-  background-color: var(--color-bg-sunken);
-}
-
-.engine-picker__item:hover {
+.engine-picker__item-select:hover {
   background-color: var(--color-bg-hover, var(--color-border-subtle));
 }
 
-.engine-picker__item--disabled {
+.engine-picker__item-select:disabled {
   cursor: default;
+  opacity: 0.75;
 }
 
-.engine-picker__item-name {
-  flex: 1;
-  min-width: 0;
+.engine-picker__item-select:focus {
+  outline: none;
 }
 
-.engine-picker__check {
-  color: var(--color-fg-tertiary);
-  font-size: var(--font-size-xs);
+.engine-picker__item-select:focus-visible {
+  outline: none;
+  box-shadow: inset 0 0 0 2px var(--color-accent, #6aa9ff);
 }
 
-.engine-picker__item-login {
-  border: 1px solid var(--color-border-default);
-  color: var(--color-fg-secondary);
-  font-size: var(--font-size-xs);
-  padding: 3px 8px;
-  border-radius: var(--radius-sm);
+.engine-picker__item .engine-logo,
+.engine-picker__item .engine-logo svg {
+  width: 18px;
+  height: 18px;
 }
 
-.engine-picker__item-hint {
-  color: var(--color-fg-tertiary);
-  font-size: var(--font-size-xs);
-  flex-shrink: 0;
+.engine-picker__item-select {
+  min-height: 44px;
 }
 
-.browsercode-model-picker {
-  position: relative;
-  flex-shrink: 1;
+.engine-picker__item-text {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
   min-width: 0;
+  gap: 1px;
 }
 
-.browsercode-model-picker__toggle {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  max-width: 190px;
-  height: 30px;
-  padding: 4px 9px;
-  border-radius: var(--radius-full);
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  background: rgba(255, 255, 255, 0.035);
-  color: var(--color-fg-secondary);
-  font-size: var(--font-size-xs);
-  cursor: pointer;
-}
-
-.browsercode-model-picker__toggle:hover {
-  background-color: rgba(255, 255, 255, 0.08);
-  border-color: rgba(255, 255, 255, 0.14);
-  color: var(--color-fg-primary);
-}
-
-.browsercode-model-picker__label,
-.browsercode-model-picker__item-name {
+.engine-picker__item-name {
+  flex: 1;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
-.browsercode-model-picker__logo,
-.browsercode-model-picker__mark {
-  width: 14px;
-  height: 14px;
-  flex-shrink: 0;
+.engine-picker__item-sub {
+  color: var(--color-fg-tertiary);
+  font-size: var(--font-size-xs);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-height: 1em;
 }
 
-.browsercode-model-picker__mark {
+.engine-picker__item-check {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  border-radius: var(--radius-full);
-  background: rgba(255, 255, 255, 0.08);
-  color: var(--color-fg-primary);
-  font-size: 9px;
-  font-weight: 650;
-}
-
-.browsercode-model-picker__mark--qwen {
-  background: rgba(84, 177, 255, 0.18);
-  color: rgb(153, 211, 255);
+  width: 12px;
+  color: var(--color-fg-tertiary);
+  font-size: var(--font-size-xs);
 }
 
-.browsercode-model-picker__skeleton {
+.engine-picker__item-arrow {
+  color: var(--color-fg-tertiary);
   display: inline-flex;
-  flex-shrink: 0;
-  background-color: rgba(255, 255, 255, 0.07);
-  background-image: linear-gradient(
-    90deg,
-    rgba(255, 255, 255, 0.05) 0%,
-    rgba(255, 255, 255, 0.13) 44%,
-    rgba(255, 255, 255, 0.05) 88%
-  );
-  background-size: 220% 100%;
-  animation: browsercode-skeleton-shimmer 1.5s var(--ease-in-out) infinite;
-}
-
-.browsercode-model-picker__skeleton--mark {
-  width: 14px;
-  height: 14px;
-  border-radius: var(--radius-full);
+  opacity: 0;
+  transform: translateX(-2px);
+  transition:
+    opacity var(--duration-fast) var(--ease-out),
+    transform var(--duration-fast) var(--ease-out);
 }
 
-.browsercode-model-picker__skeleton--toggle-label {
-  width: 96px;
-  height: 10px;
-  border-radius: var(--radius-full);
+.engine-picker__item:hover .engine-picker__item-arrow {
+  opacity: 1;
+  transform: translateX(0);
 }
 
-.browsercode-model-picker__skeleton--label {
-  flex: 1 1 auto;
-  width: 128px;
-  height: 10px;
-  border-radius: var(--radius-full);
+.engine-picker__item-wrap {
+  position: relative;
 }
 
-.browsercode-model-picker__skeleton--badge {
-  width: 46px;
-  height: 18px;
+.engine-picker__chevron-right {
+  color: var(--color-fg-tertiary);
+  display: inline-flex;
   margin-left: auto;
-  border-radius: 6px;
-}
-
-.browsercode-model-picker__skeleton-item {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  min-height: 34px;
-  padding: 7px 8px;
-  border-radius: 8px;
 }
 
-.browsercode-model-picker__menu {
+.engine-picker__flyout {
   position: absolute;
-  top: calc(100% + 6px);
-  right: 0;
-  width: 280px;
-  max-height: 360px;
-  overflow: auto;
-  background-color: rgba(28, 28, 32, 0.97);
-  -webkit-backdrop-filter: blur(30px) saturate(180%);
-  backdrop-filter: blur(30px) saturate(180%);
-  border: 1px solid rgba(255, 255, 255, 0.10);
-  border-radius: 12px;
-  box-shadow:
-    0 1px 0 rgba(255, 255, 255, 0.06) inset,
-    0 12px 32px rgba(0, 0, 0, 0.5);
+  top: -4px;
+  left: calc(100% + 8px);
   z-index: 45;
-  padding: 6px;
+  width: 280px;
 }
 
-.browsercode-model-picker__group + .browsercode-model-picker__group {
-  margin-top: 6px;
-  padding-top: 6px;
-  border-top: 1px solid rgba(255, 255, 255, 0.07);
+.browsercode-model-picker,
+.browsercode-model-picker__group {
+  position: relative;
 }
 
-.browsercode-model-picker__group-label {
-  display: flex;
-  align-items: center;
-  gap: 7px;
-  padding: 5px 7px;
-  color: var(--color-fg-tertiary);
-  font-size: var(--font-size-xs);
+.browsercode-model-picker__menu,
+.engine-picker__flyout .browsercode-model-picker__group,
+.engine-picker__flyout .browsercode-submenu {
+  max-height: 360px;
+  overflow: auto;
+  background-color: var(--color-bg-elevated);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-md);
+  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
+  padding: 6px;
 }
 
+.browsercode-model-picker__toggle,
 .browsercode-model-picker__item,
-.browsercode-model-picker__setup {
+.browsercode-model-picker__setup,
+.browsercode-model-picker__back {
   appearance: none;
-  width: 100%;
   border: 0;
   background: transparent;
   color: var(--color-fg-primary);
   display: flex;
   align-items: center;
   gap: 8px;
-  text-align: left;
+  width: 100%;
+  border-radius: var(--radius-sm);
   padding: 7px 8px;
-  border-radius: 8px;
   font-size: var(--font-size-sm);
   cursor: pointer;
 }
 
+.browsercode-model-picker__toggle {
+  width: auto;
+  max-width: 190px;
+  border: 1px solid var(--color-border-subtle);
+  border-radius: var(--radius-full);
+  color: var(--color-fg-secondary);
+}
+
 .browsercode-model-picker__item:hover,
 .browsercode-model-picker__setup:hover,
+.browsercode-model-picker__back:hover,
+.browsercode-model-picker__toggle:hover,
 .browsercode-model-picker__item--active {
-  background-color: rgba(255, 255, 255, 0.06);
-}
-
-.browsercode-model-picker__item-name {
-  flex: 1;
-  min-width: 0;
+  background-color: var(--color-bg-hover, var(--color-border-subtle));
 }
 
-.browsercode-model-picker__check,
-.browsercode-model-picker__locked {
-  color: var(--color-fg-tertiary);
-  font-size: var(--font-size-xs);
+.browsercode-model-picker__logo,
+.browsercode-model-picker__mark {
+  width: 14px;
+  height: 14px;
   flex-shrink: 0;
 }
 
-.browsercode-model-picker__locked {
-  border: 1px solid rgba(255, 255, 255, 0.10);
-  border-radius: 6px;
-  padding: 2px 6px;
-}
+.browsercode-model-picker__mark {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-full);
+  background: rgba(255, 255, 255, 0.08);
+  font-size: 9px;
+  font-weight: 650;
+}
+
+.browsercode-model-picker__label,
+.browsercode-model-picker__item-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.browsercode-model-picker__check,
+.browsercode-model-picker__locked,
+.browsercode-model-picker__chevron-right,
+.browsercode-model-picker__chevron-left {
+  margin-left: auto;
+  color: var(--color-fg-tertiary);
+}
 
 .browsercode-model-picker__error {
-  margin: 6px 4px 2px;
   color: var(--color-status-error);
   font-size: var(--font-size-xs);
-  line-height: 1.35;
+  padding: 6px 8px;
 }
 
-.browsercode-model-picker__chevron-right,
-.browsercode-model-picker__chevron-left,
-.engine-picker__chevron-right {
-  display: inline-flex;
-  align-items: center;
+.engine-picker__check {
   color: var(--color-fg-tertiary);
-  flex-shrink: 0;
+  font-size: var(--font-size-xs);
 }
 
-.engine-picker__chevron-right {
-  margin-left: auto;
+.engine-picker__item-login {
+  appearance: none;
+  background: transparent;
+  border: 1px solid var(--color-border-default);
+  color: var(--color-fg-secondary);
+  font-size: var(--font-size-xs);
+  padding: 3px 8px;
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  margin-right: 4px;
 }
 
-.engine-picker__item-wrap {
-  position: relative;
+.engine-picker__item-login:hover:not(:disabled) {
+  color: var(--color-fg-primary);
+  background-color: var(--color-bg-hover, var(--color-border-subtle));
 }
 
-.engine-picker__flyout {
-  position: absolute;
-  right: calc(100% + 6px);
-  top: 0;
-  width: 240px;
-  max-height: 360px;
-  overflow: auto;
-  background-color: rgba(28, 28, 32, 0.97);
-  -webkit-backdrop-filter: blur(30px) saturate(180%);
-  backdrop-filter: blur(30px) saturate(180%);
-  border: 1px solid rgba(255, 255, 255, 0.10);
-  border-radius: 12px;
-  box-shadow:
-    0 1px 0 rgba(255, 255, 255, 0.06) inset,
-    0 12px 32px rgba(0, 0, 0, 0.5);
-  padding: 6px;
-  z-index: 60;
+.engine-picker__item-login:disabled {
+  opacity: 0.6;
+  cursor: default;
+}
+
+.engine-picker__item-hint {
+  color: var(--color-fg-tertiary);
+  font-size: var(--font-size-xs);
+  padding-right: 8px;
 }
 
-.browsercode-submenu {
+.engine-picker__models {
+  margin: 0;
+  padding: 0;
   display: flex;
   flex-direction: column;
-  gap: 2px;
+  gap: 4px;
+  height: 100%;
+  min-height: 0;
 }
 
-.browsercode-submenu--loading {
-  min-height: 110px;
+.engine-picker__models-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 2px 4px 6px;
+  color: var(--color-fg-primary);
+  font-size: var(--font-size-sm);
+  text-transform: none;
+  letter-spacing: 0;
 }
 
-.browsercode-model-picker__back {
+.engine-picker__models-back {
   appearance: none;
-  width: 100%;
   border: 0;
   background: transparent;
-  color: var(--color-fg-secondary);
-  display: flex;
+  color: var(--color-fg-tertiary);
+  width: 22px;
+  height: 22px;
+  border-radius: var(--radius-sm);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+
+.engine-picker__models-back:hover {
+  color: var(--color-fg-primary);
+  background-color: var(--color-bg-hover, var(--color-border-subtle));
+}
+
+.engine-picker__models-provider {
+  display: inline-flex;
   align-items: center;
   gap: 8px;
-  text-align: left;
-  padding: 7px 8px;
-  border-radius: 8px;
+  flex: 1;
+  min-width: 0;
+}
+
+.engine-picker__models-provider > span:last-child {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.engine-picker__models-status {
+  color: var(--color-fg-disabled, var(--color-fg-tertiary));
+  font-size: var(--font-size-xs);
+  text-transform: none;
+}
+
+.engine-picker__models-title-actions {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  margin-left: auto;
+}
+
+.engine-picker__models-refresh {
+  appearance: none;
+  border: 0;
+  background: transparent;
+  color: var(--color-fg-tertiary);
+  width: 18px;
+  height: 18px;
+  border-radius: var(--radius-sm);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+
+.engine-picker__models-refresh:hover:not(:disabled) {
+  color: var(--color-fg-primary);
+  background-color: var(--color-bg-hover, var(--color-border-subtle));
+}
+
+.engine-picker__models-refresh:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+
+.engine-picker__model-search {
+  padding: 0 4px 4px;
+}
+
+.engine-picker__model-search-input {
+  appearance: none;
+  width: 100%;
+  min-width: 0;
+  height: 28px;
+  border: 1px solid var(--color-border-subtle);
+  border-radius: var(--radius-sm);
+  background-color: var(--color-bg-sunken);
+  color: var(--color-fg-primary);
+  padding: 0 8px;
   font-size: var(--font-size-sm);
+  outline: none;
+}
+
+.engine-picker__model-search-input:focus {
+  border-color: var(--color-border-default);
+  background-color: var(--color-bg-elevated);
+}
+
+.engine-picker__model-search-input::-webkit-search-cancel-button {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 12px;
+  height: 12px;
+  margin-left: 6px;
+  background-color: var(--color-fg-tertiary);
   cursor: pointer;
-  margin-bottom: 4px;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
-  border-radius: 0;
-  padding-bottom: 9px;
+  -webkit-mask: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 3L9 9M9 3L3 9' stroke='black' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") center / 12px 12px no-repeat;
+  mask: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 3L9 9M9 3L3 9' stroke='black' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") center / 12px 12px no-repeat;
+}
+
+.engine-picker__model-search-input::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+.engine-picker__models-list {
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 auto;
+  gap: 2px;
+  min-height: 0;
+  overflow-y: auto;
+  padding-right: 2px;
 }
 
-.browsercode-model-picker__back:hover {
+.engine-picker__model-option {
+  appearance: none;
+  width: 100%;
+  background: transparent;
+  border: 0;
   color: var(--color-fg-primary);
+  text-align: left;
+  padding: 6px 8px;
+  border-radius: var(--radius-sm);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+}
+
+.engine-picker__model-option:hover {
+  background-color: var(--color-bg-hover, var(--color-border-subtle));
+}
+
+.engine-picker__model-option:focus,
+.engine-picker__model-option:focus-visible {
+  outline: none;
+  box-shadow: none;
+}
+
+.engine-picker__model-option-main {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+  flex: 1;
+}
+
+.engine-picker__model-option-name,
+.engine-picker__model-option-id {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-@keyframes browsercode-skeleton-shimmer {
-  0% {
-    background-position: 220% center;
-  }
+.engine-picker__model-option-name {
+  font-size: var(--font-size-sm);
+}
+
+.engine-picker__model-option-id {
+  color: var(--color-fg-tertiary);
+  font-size: var(--font-size-xs);
+  font-family: var(--font-mono);
+}
 
-  100% {
-    background-position: -220% center;
-  }
+.engine-picker__model-error {
+  padding: 4px 8px;
+  color: var(--color-status-warning, #e5a23b);
+  font-size: var(--font-size-xs);
 }
 
-@media (prefers-reduced-motion: reduce) {
-  .browsercode-model-picker__skeleton {
-    animation: none;
-    background-image: none;
-    opacity: 0.55;
-  }
+.engine-picker__model-empty {
+  padding: 8px;
+  color: var(--color-fg-tertiary);
+  font-size: var(--font-size-xs);
 }
 
 .md-output-path {
@@ -2277,16 +2444,6 @@ button:focus:not(:focus-visible) {
   border-color: var(--color-border-strong);
 }
 
-.pane__rerun-btn--primary {
-  border-color: var(--color-accent-default);
-  background-color: var(--color-accent-muted);
-}
-
-.pane__rerun-btn--primary:hover {
-  border-color: var(--color-accent-default);
-  background-color: var(--color-accent-muted);
-}
-
 .pane__error-actions {
   display: flex;
   align-items: center;
@@ -2558,10 +2715,7 @@ button:focus:not(:focus-visible) {
 }
 
 .task-input__textarea {
-  flex: 0 0 auto;
-  width: 100%;
-  height: auto;
-  min-height: 20px;
+  flex: 1;
   resize: none;
   background: none;
   border: none;
@@ -2570,8 +2724,8 @@ button:focus:not(:focus-visible) {
   font-size: var(--font-size-base);
   color: var(--color-fg-primary);
   line-height: var(--line-height-normal);
-  max-height: 160px;
-  overflow-y: hidden;
+  max-height: 120px;
+  overflow-y: auto;
 }
 
 .task-input__textarea::placeholder {
@@ -2902,23 +3056,12 @@ button:focus:not(:focus-visible) {
   z-index: 1;
 }
 
-.dashboard > .dashboard__hero.dashboard__hero {
-  z-index: 2;
-}
-
 .dashboard__hero {
-  position: relative;
-  z-index: 2;
   width: 100%;
   max-width: 720px;
-  min-height: 72px;
 }
 
 .dashboard__hero .task-input {
-  position: absolute;
-  top: 0;
-  right: 0;
-  left: 0;
   padding: 0;
 }
 
@@ -3282,191 +3425,272 @@ button:focus:not(:focus-visible) {
 }
 
 /* ---------------------------------------------------------------------------
-   SETTINGS PAGE - in-app anchored sections
+   SETTINGS PANE — keybinding configuration modal
 --------------------------------------------------------------------------- */
 
-.settings-page {
-  flex: 1 1 auto;
-  min-width: 0;
-  min-height: 0;
+.settings-pane__scrim {
+  position: fixed;
+  inset: 0;
+  background-color: var(--color-modal-scrim);
   display: flex;
-  overflow: hidden;
-  background-color: var(--color-bg-base);
-  color: var(--color-fg-primary);
+  align-items: center;
+  justify-content: center;
+  z-index: var(--z-modal);
+  animation: fade-in var(--duration-fast) var(--ease-out) forwards;
 }
 
-.settings-page__scroller {
-  flex: 1 1 auto;
-  min-width: 0;
-  min-height: 0;
-  overflow-y: auto;
-  scroll-behavior: smooth;
-  scroll-padding-top: 96px;
+.settings-pane {
+  width: 560px;
+  max-width: 90vw;
+  max-height: 85vh;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--color-bg-base);
+  border: 1px solid rgba(255, 255, 255, 0.06);
+  border-radius: var(--radius-xl);
+  box-shadow:
+    inset 0 1px 0 rgba(255, 255, 255, 0.05),
+    0 24px 64px rgba(0, 0, 0, 0.55),
+    0 8px 20px rgba(0, 0, 0, 0.35);
+  overflow: hidden;
+  animation: scale-in var(--duration-normal) var(--ease-spring) forwards;
+  color: var(--color-fg-primary);
 }
 
-.settings-page__content {
-  width: min(920px, calc(100% - 64px));
-  margin: 0 auto;
-  padding: var(--space-5) 0 var(--space-12);
+.settings-pane__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--space-5) var(--space-6);
+  border-bottom: 1px solid var(--color-border-subtle);
+  flex-shrink: 0;
+}
+
+.settings-pane__title {
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-fg-primary);
 }
 
-.settings-page__header {
+.settings-pane__header-right {
   display: flex;
-  align-items: flex-end;
-  justify-content: space-between;
-  gap: var(--space-4);
-  padding: var(--space-4) 0 var(--space-5);
+  align-items: center;
+  gap: var(--space-3);
 }
 
-.settings-page__eyebrow {
-  display: block;
-  margin-bottom: var(--space-2);
-  font-size: var(--font-size-2xs);
+.settings-pane__reset-all {
+  font-size: var(--font-size-xs);
+  color: var(--color-status-error);
   font-weight: var(--font-weight-medium);
-  color: var(--color-fg-disabled);
-  text-transform: uppercase;
-  letter-spacing: 0.08em;
+  transition: opacity var(--duration-fast) var(--ease-out);
 }
 
-.settings-page__title {
-  margin: 0;
-  color: var(--color-fg-primary);
-  font-size: var(--font-size-2xl);
-  font-weight: var(--font-weight-semibold);
-  letter-spacing: 0;
-  line-height: 1.15;
+.settings-pane__reset-all:hover {
+  opacity: 0.8;
 }
 
-.settings-page__tabs {
-  position: sticky;
-  top: 0;
-  z-index: 5;
+.settings-pane__close {
   display: flex;
   align-items: center;
-  gap: var(--space-2);
-  margin-bottom: var(--space-6);
-  padding: var(--space-4) 0;
-  overflow-x: auto;
-  background-color: var(--color-bg-base);
-  border-bottom: 1px solid var(--color-border-subtle);
-}
-
-.settings-page__tab {
-  flex: 0 0 auto;
-  min-height: 30px;
-  padding: var(--space-1) var(--space-3);
-  border: 1px solid transparent;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
   border-radius: var(--radius-sm);
   color: var(--color-fg-tertiary);
-  font-size: var(--font-size-xs);
-  font-weight: var(--font-weight-medium);
   transition:
     color var(--duration-fast) var(--ease-out),
-    background-color var(--duration-fast) var(--ease-out),
-    border-color var(--duration-fast) var(--ease-out);
+    background-color var(--duration-fast) var(--ease-out);
 }
 
-.settings-page__tab:hover {
+.settings-pane__close:hover {
   color: var(--color-fg-primary);
   background-color: var(--color-surface-interactive-hover);
 }
 
-.settings-page__tab--active {
+.settings-pane__search {
+  padding: var(--space-3) var(--space-6);
+  border-bottom: 1px solid var(--color-border-subtle);
+  flex-shrink: 0;
+}
+
+.settings-pane__search-input {
+  width: 100%;
+  background: none;
+  border: 1px solid var(--color-border-subtle);
+  border-radius: var(--radius-md);
+  padding: var(--space-2) var(--space-4);
+  font-family: var(--font-ui);
+  font-size: var(--font-size-sm);
   color: var(--color-fg-primary);
-  background-color: var(--color-bg-elevated);
+  outline: none;
+  transition: border-color var(--duration-fast) var(--ease-out);
+}
+
+.settings-pane__search-input::placeholder {
+  color: var(--color-fg-tertiary);
+}
+
+.settings-pane__search-input:focus {
   border-color: var(--color-border-default);
 }
 
-.settings-page__section {
-  scroll-margin-top: 96px;
+.settings-pane__body {
+  flex: 1;
+  overflow-y: auto;
+  padding: var(--space-4) var(--space-6);
   display: flex;
   flex-direction: column;
-  gap: var(--space-8);
-  width: 100%;
-  padding: var(--space-16) 0 var(--space-20);
-  border-bottom: 1px solid var(--color-border-subtle);
+  gap: var(--space-5);
 }
 
-.settings-page__section--last {
-  border-bottom: 0;
-  padding-bottom: var(--space-12);
+.settings__group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
 }
 
-.settings-pane__reset-all {
-  font-size: var(--font-size-xs);
-  color: var(--color-status-error);
+.settings__group-title {
+  font-size: var(--font-size-2xs);
   font-weight: var(--font-weight-medium);
-  transition: opacity var(--duration-fast) var(--ease-out);
+  color: var(--color-fg-disabled);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  padding-bottom: var(--space-2);
 }
 
-.settings-pane__reset-all:hover {
-  opacity: 0.8;
+.settings__row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--space-2) 0;
+  border-bottom: 1px solid var(--color-border-subtle);
+}
+
+.settings__row:last-child {
+  border-bottom: none;
+}
+
+.settings__row--modified {
+  background-color: rgba(var(--color-accent-default-rgb, 109, 129, 150), 0.06);
+  margin: 0 calc(-1 * var(--space-3));
+  padding: var(--space-2) var(--space-3);
+  border-radius: var(--radius-sm);
+  border-bottom-color: transparent;
 }
 
-.settings-section-header {
+.settings__row-label {
+  font-size: var(--font-size-sm);
+  color: var(--color-fg-secondary);
+}
+
+.settings__row-keys {
   display: flex;
-  align-items: flex-end;
-  justify-content: space-between;
-  gap: var(--space-4);
-  width: 100%;
-  min-height: 32px;
+  align-items: center;
+  gap: var(--space-2);
 }
 
-.settings-section-header__title {
-  margin: 0;
+.settings__key-cell {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding: var(--space-1) var(--space-3);
+  border-radius: var(--radius-sm);
+  min-height: 28px;
+  min-width: 48px;
+  justify-content: center;
+  transition: background-color var(--duration-fast) var(--ease-out);
+}
+
+.settings__key-cell:hover {
+  background-color: var(--color-surface-interactive-hover);
+}
+
+.settings__key-cell--recording {
+  background-color: var(--color-bg-elevated);
+  box-shadow: 0 0 0 1px var(--color-accent-default);
+}
+
+.settings__recording-text {
+  font-size: var(--font-size-xs);
+  color: var(--color-accent-default);
+  font-style: italic;
+}
+
+.settings__kbd {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 22px;
+  height: 22px;
+  padding: 0 var(--space-2);
+  background-color: var(--color-bg-elevated);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-sm);
+  font-family: var(--font-mono);
+  font-size: var(--font-size-2xs);
   color: var(--color-fg-primary);
-  font-size: var(--font-size-2xl);
-  font-weight: var(--font-weight-semibold);
-  letter-spacing: 0;
-  line-height: 1.15;
+  line-height: 1;
 }
 
-.settings-card {
-  display: flex;
-  flex-direction: column;
-  gap: 0;
-  width: 100%;
-  overflow: hidden;
-  background-color: var(--color-bg-sunken);
-  border: 1px solid rgba(255, 255, 255, 0.04);
-  border-radius: var(--radius-lg);
-  box-shadow:
-    inset 0 1px 0 rgba(255, 255, 255, 0.06),
-    0 1px 0 rgba(255, 255, 255, 0.03),
-    0 4px 12px rgba(0, 0, 0, 0.5),
-    0 12px 32px rgba(0, 0, 0, 0.4);
+.settings__then {
+  font-size: var(--font-size-2xs);
+  color: var(--color-fg-disabled);
 }
 
-@media (max-width: 760px) {
-  .settings-page__content {
-    width: calc(100% - 32px);
-    padding-top: var(--space-3);
-  }
+.settings__reset-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border-radius: var(--radius-sm);
+  color: var(--color-fg-disabled);
+  transition:
+    color var(--duration-fast) var(--ease-out),
+    background-color var(--duration-fast) var(--ease-out);
+}
 
-  .settings-page__header {
-    padding-bottom: var(--space-4);
-  }
+.settings__reset-btn:hover {
+  color: var(--color-fg-primary);
+  background-color: var(--color-surface-interactive-hover);
+}
 
-  .settings-page__title {
-    font-size: var(--font-size-xl);
-  }
+.settings__empty {
+  text-align: center;
+  padding: var(--space-8) 0;
+  font-size: var(--font-size-sm);
+  color: var(--color-fg-tertiary);
+}
 
-  .settings-page__tabs {
-    gap: var(--space-1);
-  }
+.settings-pane__footer {
+  display: flex;
+  align-items: center;
+  padding: var(--space-3) var(--space-6);
+  border-top: 1px solid var(--color-border-subtle);
+  flex-shrink: 0;
+}
 
-  .settings-page__section {
-    gap: var(--space-6);
-    padding: var(--space-12) 0 var(--space-16);
-  }
+.settings-pane__footer-hint {
+  font-size: var(--font-size-2xs);
+  color: var(--color-fg-disabled);
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+}
 
-  .settings-section-header__title {
-    font-size: var(--font-size-xl);
-  }
+.settings-pane__section {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+}
 
-  .settings-card .settings-pane__row {
-    align-items: flex-start;
-  }
+.settings-pane__section-title {
+  font-size: var(--font-size-2xs);
+  font-weight: var(--font-weight-medium);
+  color: var(--color-fg-disabled);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  padding-bottom: var(--space-2);
 }
 
 .settings-pane__row {
@@ -3475,7 +3699,7 @@ button:focus:not(:focus-visible) {
   justify-content: space-between;
   flex-wrap: wrap;
   gap: var(--space-1) var(--space-2);
-  padding: var(--space-4) var(--space-5);
+  padding: var(--space-2) 0;
   border-bottom: 1px solid var(--color-border-subtle);
 }
 
@@ -3485,15 +3709,13 @@ button:focus:not(:focus-visible) {
 
 .settings-pane__label {
   font-size: var(--font-size-sm);
-  font-weight: var(--font-weight-medium);
-  color: var(--color-fg-primary);
+  color: var(--color-fg-secondary);
 }
 
-.settings-pane__label-block {
+.settings-pane__keys {
   display: flex;
-  flex-direction: column;
-  gap: 2px;
-  min-width: 0;
+  align-items: center;
+  gap: var(--space-2);
 }
 
 .settings-pane__kbd {
@@ -3512,6 +3734,25 @@ button:focus:not(:focus-visible) {
   line-height: 1;
 }
 
+.settings-pane__modified {
+  font-size: var(--font-size-2xs);
+  color: var(--color-accent-default);
+  margin-left: var(--space-2);
+}
+
+.settings-pane__section-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: var(--space-2);
+}
+
+.settings-pane__hint {
+  font-size: var(--font-size-2xs);
+  color: var(--color-fg-tertiary);
+  margin: 0 0 var(--space-3) 0;
+}
+
 .settings-pane__row-right {
   display: flex;
   align-items: center;
@@ -3526,10 +3767,10 @@ button:focus:not(:focus-visible) {
   display: flex;
   align-items: center;
   gap: var(--space-2);
-  padding: var(--space-1) var(--space-2);
+  padding: var(--space-1);
   min-height: 28px;
-  background: var(--color-bg-base);
-  border: 1px solid var(--color-border-default);
+  background: transparent;
+  border: 1px solid transparent;
   border-radius: var(--radius-sm);
   cursor: pointer;
   transition: background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
@@ -3549,7 +3790,7 @@ button:focus:not(:focus-visible) {
   flex-basis: 100%;
   font-size: var(--font-size-2xs);
   color: var(--color-status-error);
-  text-align: left;
+  text-align: right;
 }
 
 .settings-pane__sublabel {
@@ -3618,7 +3859,7 @@ button:focus:not(:focus-visible) {
 
 .settings-pane__toggle[data-on="true"] .settings-pane__toggle-thumb {
   transform: translateX(14px);
-  background: var(--color-bg-base);
+  background: #fff;
 }
 
 .settings-pane__recording {
@@ -3646,6 +3887,19 @@ button:focus:not(:focus-visible) {
   background-color: var(--color-surface-interactive-hover);
 }
 
+.settings-pane__reset {
+  align-self: flex-start;
+  font-size: var(--font-size-xs);
+  color: var(--color-status-error);
+  font-weight: var(--font-weight-medium);
+  padding: var(--space-2) 0;
+  transition: opacity var(--duration-fast) var(--ease-out);
+}
+
+.settings-pane__reset:hover {
+  opacity: 0.8;
+}
+
 /* ---------------------------------------------------------------------------
    CONNECTIONS PANE — channel integration cards
 --------------------------------------------------------------------------- */
@@ -3653,8 +3907,7 @@ button:focus:not(:focus-visible) {
 .conn-section {
   display: flex;
   flex-direction: column;
-  gap: 0;
-  width: 100%;
+  gap: var(--space-3);
 }
 
 .conn-pane {
@@ -3664,12 +3917,6 @@ button:focus:not(:focus-visible) {
   padding: var(--space-4) 0;
 }
 
-.conn-pane__group {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-3);
-}
-
 .conn-pane__title {
   font-size: var(--font-size-2xs);
   font-weight: var(--font-weight-medium);
@@ -3682,7 +3929,6 @@ button:focus:not(:focus-visible) {
   display: flex;
   flex-direction: column;
   gap: var(--space-3);
-  width: 100%;
   padding: var(--space-4) var(--space-5);
   background-color: var(--color-bg-sunken);
   border: 1px solid rgba(255, 255, 255, 0.04);
@@ -3719,57 +3965,6 @@ button:focus:not(:focus-visible) {
   color: var(--color-fg-tertiary);
 }
 
-.conn-card__skeleton {
-  display: block;
-  flex-shrink: 0;
-  background-color: rgba(255, 255, 255, 0.06);
-  background-image: linear-gradient(
-    90deg,
-    rgba(255, 255, 255, 0.04) 0%,
-    rgba(255, 255, 255, 0.12) 44%,
-    rgba(255, 255, 255, 0.04) 88%
-  );
-  background-size: 220% 100%;
-  animation: browsercode-skeleton-shimmer 1.5s var(--ease-in-out) infinite;
-}
-
-.conn-card__skeleton--subtitle {
-  width: min(320px, 72%);
-  height: 12px;
-  border-radius: var(--radius-full);
-}
-
-.conn-card__skeleton--icon {
-  border-color: transparent;
-  border-radius: var(--radius-sm);
-}
-
-.conn-card__skeleton--provider {
-  width: 132px;
-  height: 13px;
-  border-radius: var(--radius-full);
-}
-
-.conn-card__skeleton--provider-subtitle {
-  width: 188px;
-  max-width: 68%;
-  height: 10px;
-  border-radius: var(--radius-full);
-  opacity: 0.72;
-}
-
-.conn-card__skeleton--button {
-  width: 72px;
-  height: 24px;
-  border-radius: var(--radius-md);
-}
-
-.conn-card__skeleton--button-wide {
-  width: 132px;
-  height: 24px;
-  border-radius: var(--radius-md);
-}
-
 .conn-card__dot {
   width: 8px;
   height: 8px;
@@ -3802,13 +3997,6 @@ button:focus:not(:focus-visible) {
   flex-shrink: 0;
 }
 
-.conn-card__icon--contain {
-  object-fit: contain;
-  padding: 4px;
-  background-color: var(--color-bg-base);
-  border: 1px solid var(--color-border-default);
-}
-
 .conn-card__name {
   font-size: var(--font-size-sm);
   font-weight: var(--font-weight-semibold);
@@ -3916,45 +4104,6 @@ button:focus:not(:focus-visible) {
   padding: var(--space-3) 0 var(--space-1);
 }
 
-.conn-card__api-key-edit--stacked {
-  align-items: flex-end;
-}
-
-.conn-card__field {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-1);
-  min-width: 180px;
-}
-
-.conn-card__field--wide {
-  flex: 1;
-  min-width: 260px;
-}
-
-.conn-card__field-label {
-  font-size: var(--font-size-2xs);
-  font-weight: var(--font-weight-medium);
-  color: var(--color-fg-disabled);
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-}
-
-.conn-card__select {
-  height: 34px;
-  padding: 0 var(--space-3);
-  border: 1px solid var(--color-border-default);
-  border-radius: var(--radius-md);
-  background-color: var(--color-bg-base);
-  color: var(--color-fg-primary);
-  font-size: var(--font-size-xs);
-  outline: none;
-}
-
-.conn-card__select:focus {
-  border-color: var(--color-fg-primary);
-}
-
 .conn-card__api-key-input {
   flex: 1;
   min-width: 240px;
@@ -3978,58 +4127,6 @@ button:focus:not(:focus-visible) {
   color: var(--color-status-error);
 }
 
-.conn-card__api-key-ok {
-  flex-basis: 100%;
-  font-size: var(--font-size-xs);
-  color: var(--color-status-success, #4ade80);
-}
-
-.conn-card__sub {
-  display: flex;
-  flex-direction: column;
-  gap: var(--space-2);
-  padding-top: var(--space-3);
-  border-top: 1px solid rgba(255, 255, 255, 0.05);
-}
-
-.conn-card__sub--skeleton {
-  pointer-events: none;
-}
-
-.conn-card__sub--skeleton .conn-card__sub-header {
-  min-height: 35px;
-}
-
-.conn-card__sub:first-of-type {
-  border-top: 0;
-  padding-top: 0;
-}
-
-.conn-card__sub-header {
-  display: flex;
-  align-items: center;
-  gap: var(--space-3);
-}
-
-.conn-card__sub .conn-card__icon--small {
-  width: 24px;
-  height: 24px;
-  border-radius: var(--radius-sm);
-}
-
-.conn-card__sub .conn-card__name--sub {
-  font-size: var(--font-size-sm);
-  font-weight: var(--font-weight-medium);
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .conn-card__skeleton {
-    animation: none;
-    background-image: none;
-    opacity: 0.55;
-  }
-}
-
 /* ----------------------------------------------------------------------------
    COMMAND HINTS — persistent bottom bar showing per-screen keyboard commands
 ---------------------------------------------------------------------------- */
@@ -4684,13 +4781,6 @@ button:focus:not(:focus-visible) {
   color: var(--color-fg-primary);
 }
 
-.sidebar__row:focus-visible,
-.sidebar__icon-btn:focus-visible,
-.sidebar__row-menu-btn:focus-visible,
-.sidebar__row-menu-item:focus-visible {
-  outline: none;
-}
-
 .sidebar__row--active {
   background-color: var(--color-surface-interactive-active, var(--color-surface-raised));
   color: var(--color-fg-primary);
diff --git a/app/src/renderer/pill/Pill.tsx b/app/src/renderer/pill/Pill.tsx
index 97868af9..93d9c0fd 100644
--- a/app/src/renderer/pill/Pill.tsx
+++ b/app/src/renderer/pill/Pill.tsx
@@ -6,7 +6,7 @@ import {
   formatBytes,
 } from '../../shared/attachments';
 import { fallbackShortcutPlatform, formatShortcutForPlatform } from '../../shared/hotkeys';
-import { EnginePicker } from '../hub/EnginePicker';
+import { EnginePicker, ENGINE_PICKER_MENU_HEIGHT } from '../hub/EnginePicker';
 import {
   RESULT_ROW_HEIGHT,
   MAX_RESULTS,
@@ -29,6 +29,7 @@ declare global {
         prompt: string,
         attachments?: Array<{ name: string; mime: string; bytes: Uint8Array }>,
         engine?: string,
+        model?: string,
       ) => Promise<{ task_id: string }>;
       hide: () => void;
       setExpanded: (expanded: boolean | number) => void;
@@ -224,8 +225,8 @@ export function Pill(): React.ReactElement {
   const [sessions, setSessions] = useState<SessionLite[]>([]);
   const [selectedIdx, setSelectedIdx] = useState(-1);
   const [engine, setEngine] = useState<string>(() => loadStoredEngine());
-  const [engineMenuOpen, setEngineMenuOpen] = useState(false);
-  const [modelMenuOpen, setModelMenuOpen] = useState(false);
+  const [model, setModel] = useState<string | undefined>(undefined);
+  const [pickerOpen, setPickerOpen] = useState(false);
   const [attachments, setAttachments] = useState<Array<{ name: string; mime: string; bytes: Uint8Array }>>([]);
   const [attachError, setAttachError] = useState<string | null>(null);
   const [validFavicons, setValidFavicons] = useState<Set<string>>(new Set());
@@ -337,10 +338,12 @@ export function Pill(): React.ReactElement {
     const chipsRows = attachments.length > 0 ? Math.ceil(attachments.length / 3) : 0;
     const chipsHeight = chipsRows * CHIP_ROW_HEIGHT;
     const errorHeight = attachError ? ERROR_ROW_HEIGHT : 0;
-    const total = searchHeight + resultHeight + dashboardHeight + chipsHeight + errorHeight + FOOTER_HEIGHT;
-    console.log('[Pill.resize]', { taHeight, searchHeight, resultHeight, dashboardHeight, chipsHeight, errorHeight, total });
+    const contentTotal = searchHeight + resultHeight + dashboardHeight + chipsHeight + errorHeight + FOOTER_HEIGHT;
+    const pickerNeeded = pickerOpen ? searchHeight + 4 + ENGINE_PICKER_MENU_HEIGHT + 8 : 0;
+    const total = Math.max(contentTotal, pickerNeeded);
+    console.log('[Pill.resize]', { taHeight, searchHeight, resultHeight, dashboardHeight, chipsHeight, errorHeight, total, pickerOpen });
     window.pillAPI.setExpanded(total);
-  }, [hasResults, results.length, value, attachments.length, attachError, showDashboard, hasRecents, recents.length]);
+  }, [hasResults, results.length, value, attachments.length, attachError, showDashboard, hasRecents, recents.length, pickerOpen]);
 
   const addFiles = useCallback(async (files: FileList | File[]) => {
     setAttachError(null);
@@ -379,6 +382,7 @@ export function Pill(): React.ReactElement {
 
   const handleEngineChange = useCallback((id: string) => {
     setEngine(id);
+    setModel(undefined);
     try { localStorage.setItem(ENGINE_STORAGE_KEY, id); } catch { /* ignore */ }
   }, []);
 
@@ -392,11 +396,11 @@ export function Pill(): React.ReactElement {
     }
     if (!trimmed) return;
     const attachArg = attachments.length > 0 ? attachments : undefined;
-    window.pillAPI.submit(trimmed, attachArg, engine);
+    window.pillAPI.submit(trimmed, attachArg, engine, model);
     setValue('');
     setAttachments([]);
     setAttachError(null);
-  }, [value, selectedIdx, navList, showDashboard, attachments, engine]);
+  }, [value, selectedIdx, navList, showDashboard, attachments, engine, model]);
 
   const onKeyDown = useCallback(
     (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
@@ -417,7 +421,7 @@ export function Pill(): React.ReactElement {
         const trimmed = value.trim();
         if (trimmed) {
           const attachArg = attachments.length > 0 ? attachments : undefined;
-          window.pillAPI.submit(trimmed, attachArg, engine);
+          window.pillAPI.submit(trimmed, attachArg, engine, model);
           setValue('');
           setAttachments([]);
           setAttachError(null);
@@ -427,7 +431,7 @@ export function Pill(): React.ReactElement {
         submit();
       }
     },
-    [submit, value, navList.length, attachments, engine],
+    [submit, value, navList.length, attachments, engine, model],
   );
 
   const highlightVisible = hasResults && selectedIdx >= 0;
@@ -501,7 +505,14 @@ export function Pill(): React.ReactElement {
               }}
             />
             <div className="cmdbar__engine-picker">
-              <EnginePicker value={engine} onChange={handleEngineChange} onOpenChange={setEngineMenuOpen} />
+              <EnginePicker
+                value={engine}
+                model={model}
+                labelMode="model"
+                onChange={handleEngineChange}
+                onModelChange={setModel}
+                onOpenChange={setPickerOpen}
+              />
             </div>
             <button
               className="cmdbar__send"
diff --git a/app/src/renderer/pill/pill.css b/app/src/renderer/pill/pill.css
index 9ab4b17a..865861ff 100644
--- a/app/src/renderer/pill/pill.css
+++ b/app/src/renderer/pill/pill.css
@@ -137,13 +137,6 @@ html, body {
   margin-top: 1px;
 }
 
-.cmdbar__engine-picker {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  min-width: 0;
-}
-
 /* ---------------------------------------------------------------------------
    ACTION BUTTONS — circular, glassy
 --------------------------------------------------------------------------- */
@@ -672,6 +665,38 @@ html, body {
 
 .engine-picker__name { white-space: nowrap; }
 
+.engine-picker__label {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  min-width: 0;
+  max-width: 180px;
+}
+
+.engine-picker__model {
+  color: var(--color-fg-tertiary);
+  max-width: 96px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.engine-picker__model::before {
+  content: '/';
+  margin-right: 4px;
+  color: var(--color-fg-disabled, var(--color-fg-tertiary));
+}
+
+.engine-picker__toggle--model-only .engine-picker__label {
+  max-width: 122px;
+}
+
+.engine-picker__toggle--model-only .engine-picker__name {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 .engine-picker__dot {
   width: 6px;
   height: 6px;
@@ -684,7 +709,10 @@ html, body {
   top: calc(100% + 6px);
   right: 0;
   bottom: auto;
-  min-width: 220px;
+  min-width: 240px;
+  max-width: min(360px, calc(100vw - 24px));
+  max-height: min(420px, calc(100vh - 96px));
+  overflow-y: auto;
   background-color: rgba(28, 28, 32, 0.96);
   -webkit-backdrop-filter: blur(30px) saturate(180%);
   backdrop-filter: blur(30px) saturate(180%);
@@ -700,94 +728,184 @@ html, body {
   gap: 1px;
 }
 
+.engine-picker__menu--models {
+  min-width: 320px;
+  overflow: hidden;
+}
+
 .engine-picker__item {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  border-radius: 8px;
+}
+
+.engine-picker__item--active,
+.engine-picker__item--selected {
+  background-color: rgba(255, 255, 255, 0.10);
+  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
+}
+
+.engine-picker__item-select:focus {
+  outline: none;
+}
+
+.engine-picker__item-select:focus-visible {
+  outline: none;
+  box-shadow: inset 0 0 0 2px var(--color-accent, #6aa9ff);
+}
+
+.engine-picker__item-select {
   appearance: none;
-  border: 0;
   background: transparent;
+  border: 0;
   color: var(--color-fg-primary);
   text-align: left;
-  width: 100%;
-  display: flex;
+  padding: 6px 8px;
+  flex: 1;
+  display: inline-flex;
   align-items: center;
   gap: 8px;
-  padding: 6px 8px;
-  border-radius: 8px;
   font-size: var(--font-size-sm);
+  border-radius: 8px;
   cursor: pointer;
 }
 
-.engine-picker__item--active {
+.engine-picker__item-select:hover {
   background-color: rgba(255, 255, 255, 0.06);
 }
 
-.engine-picker__item:hover {
-  background-color: rgba(255, 255, 255, 0.06);
+.engine-picker__item-select:disabled {
+  cursor: default;
+  opacity: 0.75;
 }
 
-.engine-picker__item--disabled {
-  cursor: default;
+.engine-picker__item .engine-logo,
+.engine-picker__item .engine-logo svg {
+  width: 18px;
+  height: 18px;
 }
 
-.engine-picker__item-name {
+.engine-picker__item-select {
+  min-height: 44px;
+}
+
+.engine-picker__item-text {
   flex: 1;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
   min-width: 0;
+  gap: 1px;
 }
 
-.engine-picker__check {
+.engine-picker__item-name {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.engine-picker__item-sub {
   color: var(--color-fg-tertiary);
   font-size: var(--font-size-xs);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-height: 1em;
 }
 
-.engine-picker__item-login {
-  border: 1px solid rgba(255, 255, 255, 0.10);
-  color: var(--color-fg-secondary);
+.engine-picker__item-check {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 12px;
+  color: var(--color-fg-tertiary);
   font-size: var(--font-size-xs);
-  padding: 3px 8px;
-  border-radius: 6px;
 }
 
-.engine-picker__item-hint {
+.engine-picker__item-arrow {
   color: var(--color-fg-tertiary);
-  font-size: var(--font-size-xs);
-  flex-shrink: 0;
+  display: inline-flex;
+  opacity: 0;
+  transform: translateX(-2px);
+  transition:
+    opacity 140ms cubic-bezier(0.32, 0.72, 0, 1),
+    transform 140ms cubic-bezier(0.32, 0.72, 0, 1);
 }
 
-.browsercode-model-picker {
-  position: relative;
-  flex-shrink: 1;
-  min-width: 0;
+.engine-picker__item:hover .engine-picker__item-arrow {
+  opacity: 1;
+  transform: translateX(0);
 }
 
-.browsercode-model-picker--compact .browsercode-model-picker__toggle {
-  max-width: 128px;
+.engine-picker__item-wrap {
+  position: relative;
 }
 
-.browsercode-model-picker__toggle {
+.engine-picker__chevron-right {
+  color: var(--color-fg-tertiary);
   display: inline-flex;
+  margin-left: auto;
+}
+
+.engine-picker__flyout {
+  position: absolute;
+  top: -4px;
+  left: calc(100% + 8px);
+  z-index: 45;
+  width: 280px;
+}
+
+.browsercode-model-picker,
+.browsercode-model-picker__group {
+  position: relative;
+}
+
+.browsercode-model-picker__menu,
+.engine-picker__flyout .browsercode-model-picker__group,
+.engine-picker__flyout .browsercode-submenu {
+  max-height: 360px;
+  overflow: auto;
+  background-color: rgba(28, 28, 32, 0.97);
+  border: 1px solid rgba(255, 255, 255, 0.10);
+  border-radius: 12px;
+  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
+  padding: 6px;
+}
+
+.browsercode-model-picker__toggle,
+.browsercode-model-picker__item,
+.browsercode-model-picker__setup,
+.browsercode-model-picker__back {
+  appearance: none;
+  border: 0;
+  background: transparent;
+  color: var(--color-fg-primary);
+  display: flex;
   align-items: center;
-  gap: 6px;
-  max-width: 170px;
-  height: 30px;
-  padding: 4px 9px;
-  border-radius: var(--radius-full);
-  border: 1px solid rgba(255, 255, 255, 0.08);
-  background: rgba(255, 255, 255, 0.035);
-  color: var(--color-fg-secondary);
-  font-size: var(--font-size-xs);
+  gap: 8px;
+  width: 100%;
+  border-radius: 8px;
+  padding: 7px 8px;
+  font-size: var(--font-size-sm);
   cursor: pointer;
 }
 
-.browsercode-model-picker__toggle:hover {
-  background-color: rgba(255, 255, 255, 0.08);
-  border-color: rgba(255, 255, 255, 0.14);
-  color: var(--color-fg-primary);
+.browsercode-model-picker__toggle {
+  width: auto;
+  max-width: 170px;
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: var(--radius-full);
+  color: var(--color-fg-secondary);
 }
 
-.browsercode-model-picker__label,
-.browsercode-model-picker__item-name {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+.browsercode-model-picker__item:hover,
+.browsercode-model-picker__setup:hover,
+.browsercode-model-picker__back:hover,
+.browsercode-model-picker__toggle:hover,
+.browsercode-model-picker__item--active {
+  background-color: rgba(255, 255, 255, 0.06);
 }
 
 .browsercode-model-picker__logo,
@@ -803,228 +921,258 @@ html, body {
   justify-content: center;
   border-radius: var(--radius-full);
   background: rgba(255, 255, 255, 0.08);
-  color: var(--color-fg-primary);
   font-size: 9px;
   font-weight: 650;
 }
 
-.browsercode-model-picker__mark--qwen {
-  background: rgba(84, 177, 255, 0.18);
-  color: rgb(153, 211, 255);
-}
-
-.browsercode-model-picker__skeleton {
-  display: inline-flex;
-  flex-shrink: 0;
-  background-color: rgba(255, 255, 255, 0.07);
-  background-image: linear-gradient(
-    90deg,
-    rgba(255, 255, 255, 0.05) 0%,
-    rgba(255, 255, 255, 0.13) 44%,
-    rgba(255, 255, 255, 0.05) 88%
-  );
-  background-size: 220% 100%;
-  animation: browsercode-skeleton-shimmer 1.5s var(--ease-in-out) infinite;
+.browsercode-model-picker__label,
+.browsercode-model-picker__item-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-.browsercode-model-picker__skeleton--mark {
-  width: 14px;
-  height: 14px;
-  border-radius: var(--radius-full);
+.browsercode-model-picker__check,
+.browsercode-model-picker__locked,
+.browsercode-model-picker__chevron-right,
+.browsercode-model-picker__chevron-left {
+  margin-left: auto;
+  color: var(--color-fg-tertiary);
 }
 
-.browsercode-model-picker__skeleton--toggle-label {
-  width: 86px;
-  height: 10px;
-  border-radius: var(--radius-full);
+.browsercode-model-picker__error {
+  color: var(--color-status-error);
+  font-size: var(--font-size-xs);
+  padding: 6px 8px;
 }
 
-.browsercode-model-picker__skeleton--label {
-  flex: 1 1 auto;
-  width: 118px;
-  height: 10px;
-  border-radius: var(--radius-full);
+.engine-picker__check {
+  color: var(--color-fg-tertiary);
+  font-size: var(--font-size-xs);
 }
 
-.browsercode-model-picker__skeleton--badge {
-  width: 46px;
-  height: 18px;
-  margin-left: auto;
+.engine-picker__item-login {
+  appearance: none;
+  background: transparent;
+  border: 1px solid rgba(255, 255, 255, 0.10);
+  color: var(--color-fg-secondary);
+  font-size: var(--font-size-xs);
+  padding: 3px 8px;
   border-radius: 6px;
+  cursor: pointer;
+  margin-right: 4px;
 }
 
-.browsercode-model-picker__skeleton-item {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  min-height: 34px;
-  padding: 7px 8px;
-  border-radius: 8px;
+.engine-picker__item-login:hover:not(:disabled) {
+  color: var(--color-fg-primary);
+  background-color: rgba(255, 255, 255, 0.06);
 }
 
-.browsercode-model-picker__menu {
-  position: absolute;
-  top: calc(100% + 6px);
-  right: 0;
-  width: 280px;
-  max-height: 360px;
-  overflow: auto;
-  background-color: rgba(28, 28, 32, 0.97);
-  -webkit-backdrop-filter: blur(30px) saturate(180%);
-  backdrop-filter: blur(30px) saturate(180%);
-  border: 1px solid rgba(255, 255, 255, 0.10);
-  border-radius: 12px;
-  box-shadow:
-    0 1px 0 rgba(255, 255, 255, 0.06) inset,
-    0 12px 32px rgba(0, 0, 0, 0.5);
-  z-index: 45;
-  padding: 6px;
+.engine-picker__item-login:disabled { opacity: 0.6; cursor: default; }
+
+.engine-picker__item-hint {
+  color: var(--color-fg-tertiary);
+  font-size: var(--font-size-xs);
+  padding-right: 8px;
 }
 
-.browsercode-model-picker__group + .browsercode-model-picker__group {
-  margin-top: 6px;
-  padding-top: 6px;
-  border-top: 1px solid rgba(255, 255, 255, 0.07);
+.engine-picker__models {
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  max-height: min(412px, calc(100vh - 104px));
+  min-height: 0;
 }
 
-.browsercode-model-picker__group-label {
+.engine-picker__models-title {
   display: flex;
   align-items: center;
-  gap: 7px;
-  padding: 5px 7px;
-  color: var(--color-fg-tertiary);
-  font-size: var(--font-size-xs);
+  gap: 8px;
+  padding: 2px 4px 6px;
+  color: var(--color-fg-primary);
+  font-size: var(--font-size-sm);
+  text-transform: none;
+  letter-spacing: 0;
 }
 
-.browsercode-model-picker__item,
-.browsercode-model-picker__setup {
+.engine-picker__models-back {
   appearance: none;
-  width: 100%;
   border: 0;
   background: transparent;
-  color: var(--color-fg-primary);
-  display: flex;
+  color: var(--color-fg-tertiary);
+  width: 22px;
+  height: 22px;
+  border-radius: 6px;
+  display: inline-flex;
   align-items: center;
-  gap: 8px;
-  text-align: left;
-  padding: 7px 8px;
-  border-radius: 8px;
-  font-size: var(--font-size-sm);
+  justify-content: center;
   cursor: pointer;
 }
 
-.browsercode-model-picker__item:hover,
-.browsercode-model-picker__setup:hover,
-.browsercode-model-picker__item--active {
+.engine-picker__models-back:hover {
+  color: var(--color-fg-primary);
   background-color: rgba(255, 255, 255, 0.06);
 }
 
-.browsercode-model-picker__item-name {
+.engine-picker__models-provider {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
   flex: 1;
   min-width: 0;
 }
 
-.browsercode-model-picker__check,
-.browsercode-model-picker__locked {
-  color: var(--color-fg-tertiary);
-  font-size: var(--font-size-xs);
-  flex-shrink: 0;
-}
-
-.browsercode-model-picker__locked {
-  border: 1px solid rgba(255, 255, 255, 0.10);
-  border-radius: 6px;
-  padding: 2px 6px;
+.engine-picker__models-provider > span:last-child {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-.browsercode-model-picker__error {
-  margin: 6px 4px 2px;
-  color: var(--color-status-error);
+.engine-picker__models-status {
+  color: var(--color-fg-disabled, var(--color-fg-tertiary));
   font-size: var(--font-size-xs);
-  line-height: 1.35;
+  text-transform: none;
 }
 
-.browsercode-model-picker__chevron-right,
-.browsercode-model-picker__chevron-left,
-.engine-picker__chevron-right {
+.engine-picker__models-title-actions {
   display: inline-flex;
   align-items: center;
+  gap: 6px;
+  margin-left: auto;
+}
+
+.engine-picker__models-refresh {
+  appearance: none;
+  border: 0;
+  background: transparent;
   color: var(--color-fg-tertiary);
-  flex-shrink: 0;
+  width: 18px;
+  height: 18px;
+  border-radius: 6px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
 }
 
-.engine-picker__chevron-right {
-  margin-left: auto;
+.engine-picker__models-refresh:hover:not(:disabled) {
+  color: var(--color-fg-primary);
+  background-color: rgba(255, 255, 255, 0.06);
 }
 
-.engine-picker__item-wrap {
-  position: relative;
+.engine-picker__models-refresh:disabled {
+  opacity: 0.5;
+  cursor: default;
 }
 
-.engine-picker__flyout {
-  position: absolute;
-  right: calc(100% + 6px);
-  top: 0;
-  width: 240px;
-  max-height: 320px;
-  overflow: auto;
-  background-color: rgba(28, 28, 32, 0.97);
-  -webkit-backdrop-filter: blur(30px) saturate(180%);
-  backdrop-filter: blur(30px) saturate(180%);
+.engine-picker__model-search {
+  padding: 0 4px 4px;
+}
+
+.engine-picker__model-search-input {
+  appearance: none;
+  width: 100%;
+  min-width: 0;
+  height: 28px;
   border: 1px solid rgba(255, 255, 255, 0.10);
-  border-radius: 12px;
-  box-shadow:
-    0 1px 0 rgba(255, 255, 255, 0.06) inset,
-    0 12px 32px rgba(0, 0, 0, 0.5);
-  padding: 6px;
-  z-index: 60;
+  border-radius: 8px;
+  background-color: rgba(255, 255, 255, 0.06);
+  color: var(--color-fg-primary);
+  padding: 0 8px;
+  font-size: var(--font-size-sm);
+  outline: none;
+}
+
+.engine-picker__model-search-input:focus {
+  border-color: rgba(255, 255, 255, 0.18);
+  background-color: rgba(255, 255, 255, 0.08);
 }
 
-.browsercode-submenu {
+.engine-picker__model-search-input::-webkit-search-cancel-button {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 12px;
+  height: 12px;
+  margin-left: 6px;
+  background-color: var(--color-fg-tertiary);
+  cursor: pointer;
+  -webkit-mask: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 3L9 9M9 3L3 9' stroke='black' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") center / 12px 12px no-repeat;
+  mask: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M3 3L9 9M9 3L3 9' stroke='black' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") center / 12px 12px no-repeat;
+}
+
+.engine-picker__model-search-input::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+.engine-picker__models-list {
   display: flex;
   flex-direction: column;
+  flex: 1 1 auto;
   gap: 2px;
+  min-height: 0;
+  overflow-y: auto;
+  padding-right: 2px;
 }
 
-.browsercode-submenu--loading {
-  min-height: 110px;
-}
-
-.browsercode-model-picker__back {
+.engine-picker__model-option {
   appearance: none;
   width: 100%;
-  border: 0;
   background: transparent;
-  color: var(--color-fg-secondary);
+  border: 0;
+  color: var(--color-fg-primary);
+  text-align: left;
+  padding: 6px 8px;
+  border-radius: 8px;
   display: flex;
   align-items: center;
   gap: 8px;
-  text-align: left;
-  padding: 7px 8px 9px;
-  font-size: var(--font-size-sm);
   cursor: pointer;
-  margin-bottom: 4px;
-  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
 }
 
-.browsercode-model-picker__back:hover {
-  color: var(--color-fg-primary);
+.engine-picker__model-option:hover {
+  background-color: rgba(255, 255, 255, 0.06);
 }
 
-@keyframes browsercode-skeleton-shimmer {
-  0% {
-    background-position: 220% center;
-  }
+.engine-picker__model-option--active {
+  background-color: rgba(255, 255, 255, 0.10);
+  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
+}
 
-  100% {
-    background-position: -220% center;
-  }
+.engine-picker__model-option-main {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  min-width: 0;
+  flex: 1;
 }
 
-@media (prefers-reduced-motion: reduce) {
-  .browsercode-model-picker__skeleton {
-    animation: none;
-    background-image: none;
-    opacity: 0.55;
-  }
+.engine-picker__model-option-name,
+.engine-picker__model-option-id {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.engine-picker__model-option-name {
+  font-size: var(--font-size-sm);
+}
+
+.engine-picker__model-option-id {
+  color: var(--color-fg-tertiary);
+  font-size: var(--font-size-xs);
+  font-family: var(--font-mono);
+}
+
+.engine-picker__model-error {
+  padding: 4px 8px;
+  color: var(--color-status-warning);
+  font-size: var(--font-size-xs);
+}
+
+.engine-picker__model-empty {
+  padding: 8px;
+  color: var(--color-fg-tertiary);
+  font-size: var(--font-size-xs);
 }
diff --git a/app/tests/unit/main/engineModelCache.test.ts b/app/tests/unit/main/engineModelCache.test.ts
new file mode 100644
index 00000000..995c8b5e
--- /dev/null
+++ b/app/tests/unit/main/engineModelCache.test.ts
@@ -0,0 +1,65 @@
+import fs from 'node:fs';
+import os from 'node:os';
+import path from 'node:path';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import { createEngineModelCache } from '../../../src/main/engineModelCache';
+import type { EngineModelList } from '../../../src/main/hl/engines/types';
+
+const ENGINE_ID = 'cursor-agent';
+type LogFn = (event: string, fields: Record<string, unknown>) => void;
+
+function modelList(modelId = 'cursor/default'): EngineModelList {
+  return {
+    engineId: ENGINE_ID,
+    source: 'cli',
+    models: [{
+      id: modelId,
+      displayName: modelId,
+      source: 'cli',
+    }],
+  };
+}
+
+describe('engineModelCache', () => {
+  let dir: string;
+  let cachePath: string;
+  let logger: { info: LogFn; warn: LogFn };
+
+  beforeEach(() => {
+    dir = fs.mkdtempSync(path.join(os.tmpdir(), 'bu-engine-model-cache-'));
+    cachePath = path.join(dir, 'engine-model-cache.json');
+    logger = { info: vi.fn() as unknown as LogFn, warn: vi.fn() as unknown as LogFn };
+  });
+
+  afterEach(() => {
+    fs.rmSync(dir, { recursive: true, force: true });
+  });
+
+  it('stores fresh model lists and removes them on invalidation', () => {
+    const cache = createEngineModelCache({ cachePath: () => cachePath, logger });
+    const version = cache.currentVersion(ENGINE_ID);
+
+    cache.store(ENGINE_ID, modelList(), { expectedVersion: version });
+
+    expect(cache.getCached(ENGINE_ID)?.models[0]?.id).toBe('cursor/default');
+    expect(cache.invalidate(ENGINE_ID)).toBe(true);
+    expect(cache.currentVersion(ENGINE_ID)).toBe(version + 1);
+    expect(cache.getCached(ENGINE_ID)).toBeNull();
+  });
+
+  it('does not let an invalidated in-flight request repopulate the cache', () => {
+    const cache = createEngineModelCache({ cachePath: () => cachePath, logger });
+    const requestVersion = cache.currentVersion(ENGINE_ID);
+
+    expect(cache.invalidate(ENGINE_ID)).toBe(false);
+    const response = cache.store(ENGINE_ID, modelList('cursor/stale'), { expectedVersion: requestVersion });
+
+    expect(response.models[0]?.id).toBe('cursor/stale');
+    expect(cache.getCached(ENGINE_ID)).toBeNull();
+    expect(logger.info).toHaveBeenCalledWith('engineModelCache.skipStaleWrite', {
+      engineId: ENGINE_ID,
+      expectedVersion: requestVersion,
+      currentVersion: requestVersion + 1,
+    });
+  });
+});