Merge remote-tracking branch 'origin/master' into feat/claude-voice-integration

# Conflicts:
#	CLAUDE.md

CLAUDE.md

@@ -13,7 +13,7 @@ This file provides guidance to Claude Code (claude.ai/code) when working with co
 | Task        | Command                                                                                                                                                             |
 | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | Dev server  | `npm run dev` (or `npx tsx src/index.ts web`)                                                                                                                       |
-| Type check  | `tsc --noEmit`                                                                                                                                                      |
+| Type check  | `npm run typecheck` (= `tsc --noEmit`)                                                                                                                                                      |
 | Lint        | `npm run lint` (fix: `npm run lint:fix`)                                                                                                                            |
 | Format      | `npm run format` (check: `npm run format:check`)                                                                                                                    |
 | Single test | `npm test -- test/<file>.test.ts` (or `npx vitest run --config config/vitest.config.ts test/<file>.test.ts`) — ⚠ **never** run bare `npm test`, see Testing section |
@@ -159,15 +159,15 @@ Codeman is a Claude Code session manager with web interface and autonomous Ralph
 | **Search**       | `src/search-service.ts`                                                                                | Pure in-memory core for `GET /api/search`                                                        |
 | **Attachments**  | `src/attachment-registry.ts`, `attachment-magic`, `generated-artifact-attachments`, `session-attachment-history`, `document-preview-cache`, `document-thumbnailer`, `document-conversion-limiter`, `config/attachment-guard` | See Key Patterns                                                                                 |
 | **Plan**         | `src/plan-orchestrator.ts`, `src/prompts/*.ts`, `src/templates/` (`claude-md.ts` + `case-template.md`) | `templates/` holds the CLAUDE.md scaffold generated into new cases                                |
-| **Web**          | `src/web/server.ts` ★, `sse-events.ts`, `routes/*.ts` (20 modules + barrel; `session-routes.ts` ★), `route-helpers.ts`, `ports/*.ts`, `middleware/auth.ts`, `schemas.ts`, `self-update.ts`, `plan-usage-latest.ts`, `ws-connection-registry.ts`, `heic-jpeg-converter.ts` + `heic-jpeg-worker.ts` |                                                                                                  |
-| **Frontend**     | `src/web/public/app.js` (~5K lines, core) + 28 modules + `sw.js`                                       | See Frontend section for the load order, which is authoritative                                  |
-| **Types**        | `src/types/index.ts` (barrel) → 20 domain files; also `src/types.ts` root re-export                    | See `@fileoverview` in index.ts                                                                  |
+| **Web**          | `src/web/server.ts` ★, `sse-events.ts`, `routes/*.ts` (24 modules + barrel; `session-routes.ts` ★), `route-helpers.ts`, `ports/*.ts`, `middleware/auth.ts`, `schemas.ts`, `self-update.ts`, `plan-usage-latest.ts`, `ws-connection-registry.ts`, `heic-jpeg-converter.ts` + `heic-jpeg-worker.ts` |                                                                                                  |
+| **Frontend**     | `src/web/public/app.js` (~5K lines, core) + 29 modules + `sw.js`                                       | See Frontend section for the load order, which is authoritative                                  |
+| **Types**        | `src/types/index.ts` (barrel) → 22 domain files; also `src/types.ts` root re-export                    | See `@fileoverview` in index.ts                                                                  |
 
 ★ = Large, central file (>50KB) — read its `@fileoverview` first. All files have `@fileoverview` JSDoc — read that before diving in. Discovery aid: `grep -l '@fileoverview' src/web/routes/*.ts` lists all route modules; same grep works for `src/types/`, `src/web/public/*.js`.
 
 **Local packages**: `packages/xterm-zerolag-input/` (local echo overlay, single-source, see Gotchas). `packages/gesture-control/` (`codeman-gesture-control`, hand-tracking overlay source, built via `npm run build:gesture`).
 
-**Config**: `src/config/` — 17 files, no barrel (`index.ts`) exists; import from the specific file.
+**Config**: `src/config/` — 20 files, no barrel (`index.ts`) exists; import from the specific file.
 
 **Utilities**: `src/utils/` — re-exported via index. Key: `CleanupManager`, `LRUMap` (⚠ NOT in the barrel — import from `./utils/lru-map.js` directly), `StaleExpirationMap`, `BufferAccumulator`, `stripAnsi`, `Debouncer`, `KeyedDebouncer`. Also: `claude-cli-resolver`/`opencode-cli-resolver`/`codex-cli-resolver`/`gemini-cli-resolver` (CLI path resolution), `string-similarity` (fuzzy matching), `regex-patterns` (ANSI/token/spinner patterns), `assertNever` (exhaustive checks), `token-validation` (auth tokens), `nice-wrapper` (process priority).
 
@@ -200,7 +200,7 @@ Codeman is a Claude Code session manager with web interface and autonomous Ralph
 
 **Docker cases**: a case can point at a **container**, with any of the five CLI backends running inside it. Like remote-SSH this is a **LOCATION OVERLAY on cases, never a sixth `SessionMode`**. Exactly one long-lived container **per case**, shared by all its sessions, so killing a session kills only that session's in-container tmux and **never** `docker stop` while siblings remain. The workspace is a real host dir bind-mounted at the **same absolute path**, which is what keeps file-routes/watchers on real host bytes and makes the in-container transcript projHash match the host. Credentials are **seeded** (RO mount, copied into the container once) rather than shared RW, so in-container CLIs never write refreshed tokens back to the host, and bind mounts are excluded from `docker commit` so exports stay secret-free. **NEVER a create-time `-e` for secrets, NEVER `--privileged`, NEVER the docker socket.** Config drift is detected via a label hash and a drifted launch is REFUSED rather than silently launched with stale config. ⚠️ On the loopback-only prod bind a container cannot reach 127.0.0.1, so in-container hooks need `CODEMAN_DOCKER_BRIDGE_HOOKS=1`; otherwise idle detection falls back to output-based. → [architecture-invariants#docker-cases](docs/architecture-invariants.md#docker-cases), `docs/docker-cases.md` (user guide), `docs/docker-cases-plan.md` (design)
 
-**External CLI modes (OpenCode, Codex, Gemini, Antigravity)**: `isExternalCliMode()` in `session.ts` gates Claude-specific behavior off (Ralph tracker, BashToolParser, token/CLI-info parsing, ❯-prompt readiness); these CLIs render their own TUIs, so readiness is output stabilization instead. All four **require tmux with no direct PTY fallback**, because secrets are injected via socket-scoped `tmux setenv` and never on the spawn command line. ⚠️ `run*()` in `session-ui.js` MUST unwrap the `{success,data}` envelope; reading the raw shape silently breaks the run. ⚠️ **Codex sessions use PREDICTIVE WRITE-THROUGH echo, never the buffer overlay** (`_localEchoPolicy` in `_updateLocalEchoState`, terminal-ui.js): codex's composer reacts per keystroke ("/" pops a live-filtering picker, arrows edit server-side state, the composer grows as it wraps), so buffer-until-Enter starved it into issues #218/#219/#220/#222 and stays disabled (`_localEchoEnabled` remains false for codex). Instead, `PredictiveEchoAddon` (separate `vendor/xterm-predictive-echo.js` bundle) paints each keystroke at the predicted cell while the wire path stays BYTE-IDENTICAL: the onData hook (`_predictHookOnData`) is a plain statement with no `return`, so control always falls through into the untouched send path — pinned by vm and E2E byte-identity tests. Predictions reconcile against the parsed buffer and only while the cursor sits on the measured composer row (`isCodexComposerRow`, `/^› /`). Codex also **drops keystrokes that share a PTY read with a bracketed paste**, so flushed text and the paste sequence must go out as separate delayed writes (mirroring the Enter branch's delayed `\r`). Tests: `test/local-echo-codex-gating.test.ts`, `test/codex-predictive-echo.test.ts` (E2E vs real codex), `packages/xterm-zerolag-input/test/codex-replay.test.ts`. → [architecture-invariants#external-cli-modes-opencode-codex-gemini](docs/architecture-invariants.md#external-cli-modes-opencode-codex-gemini)
+**External CLI modes (OpenCode, Codex, Gemini, Antigravity)**: `isExternalCliMode()` in `session.ts` gates Claude-specific behavior off (Ralph tracker, BashToolParser, token/CLI-info parsing, ❯-prompt readiness); these CLIs render their own TUIs, so readiness is output stabilization instead. All four **require tmux with no direct PTY fallback**, because secrets are injected via socket-scoped `tmux setenv` and never on the spawn command line. ⚠️ `run*()` in `session-ui.js` MUST unwrap the `{success,data}` envelope; reading the raw shape silently breaks the run. ⚠️ **Codex sessions use PREDICTIVE WRITE-THROUGH echo, never the buffer overlay** (`_localEchoPolicy` in `_updateLocalEchoState`, terminal-ui.js): codex's composer reacts per keystroke ("/" pops a live-filtering picker, arrows edit server-side state, the composer grows as it wraps), so buffer-until-Enter starved it into issues #218/#219/#220/#222 and stays disabled (`_localEchoEnabled` remains false for codex). Instead, `PredictiveEchoAddon` (separate `vendor/xterm-predictive-echo.js` bundle) paints each keystroke at the predicted cell while the wire path stays BYTE-IDENTICAL: the onData hook (`_predictHookOnData`) is a plain statement with no `return`, so control always falls through into the untouched send path — pinned by vm and E2E byte-identity tests. Predictions reconcile against the parsed buffer and only while the cursor sits on the measured composer row (`isCodexComposerRow`, `/^› /`). Codex also **drops keystrokes that share a PTY read with a bracketed paste**, so flushed text and the paste sequence must go out as separate delayed writes (mirroring the Enter branch's delayed `\r`). Tests: `test/local-echo-codex-gating.test.ts`, `test/codex-predictive-echo.test.ts` (E2E vs real codex), `packages/xterm-zerolag-input/test/codex-replay.test.ts`. → [architecture-invariants#external-cli-modes-opencode-codex-gemini](docs/architecture-invariants.md#external-cli-modes-opencode-codex-gemini-antigravity)
 
 **Run launch synchronization**: the Run entrypoint holds an in-flight lock and disables `#runBtn` for the whole launch (≥500ms), so a double click cannot create duplicate sessions with the same `w<n>-<case>` name. `_ensureCreatedSessionVisible()` runs before `selectSession()`, and `_onSessionCreated()` stays an idempotent upsert, so POST-first and SSE-first ordering both produce exactly one rendered tab. → [architecture-invariants#run-launch-synchronization](docs/architecture-invariants.md#run-launch-synchronization)
 
@@ -212,6 +212,8 @@ Codeman is a Claude Code session manager with web interface and autonomous Ralph
 
 **Read My Mind intent profiles** (phase 1 of `docs/readmymind-plan.md`; `readMyMindEnabled`, SYNCED, default OFF): per-CASE profiles (user-stated `goals` + the user's recent real prompts), keyed by owner + realpath(workingDir) so they survive `/clear`/respawns and multi-user scoping is structural. Capture rides the transcript (`transcript:user_prompt` from `transcript-watcher.ts`), NOT the input paths: `POST /input` sees only programmatic prompts and the WS channel is raw keystrokes. The listener lives inside `startTranscriptWatcher()`'s `if (!watcher)` block (outside it would duplicate per hook event) and is claude-only + gated on the setting per event. Store: `src/intent-store.ts` singleton, `intents.json` written 0600 tmp+rename (prompts can contain secrets; never fed to `/api/search`). Endpoints: GET/PUT/DELETE `/api/sessions/:id/intent` + POST `/api/sessions/:id/readmymind` (`readmymind-routes.ts`, ownership via `findSessionOrFail` WITH `req`; registrations stay the bare `app.<method>('path')` shape, the endpoints.md drift scanner cannot see generics). **Phase 2 (predictor + 🧠 button)**: `readmymind-context.ts` is the PURE budgeted assembler (9 ranked sources, drop order siblings→away→workspace→tools, sections 1-4 truncate only); IO lives in `readmymind-collectors.ts` (transcript TAIL read — the live watcher keeps only a 500-char snippet — + git signals, skipped for remote-SSH cases) and the route; `readmymind-predictor.ts` reuses the AiCheckerBase spawn mechanics standalone (verdict-shaped base vs freeform JSON) as a mutable singleton routes call and tests stub. Claude-mode only (400), one in flight per session (409 CONFLICT), model = `readMyMindModel` setting defaulting to `AI_CHECK_MODEL` (opus, decided). Frontend `readmymind-ui.js`: header 🧠 marker-hidden (`btn-readmymind--hidden`) until the setting is ON; phones hide it in mobile.css and get a keyboard-accessory 🧠 key instead (ships in BOTH bar templates, revealed by the `rmm-enabled` class on the BAR element — setMode() rebuilds button innerHTML, so per-key state would be wiped; synced at init + every `applyHeaderVisibilitySettings()`). Alternate suggestions render as tappable rows that swap into the editable field without losing edits; Rethink rejects the whole shown set and carries the optional steer note (`#readMyMindSteer`, sent as `steer`, shown in ready + empty-result phases, cleared on each open). Suggestions render via value/`textContent` ONLY and Send/Insert go through `POST /input` (server-side, so the sendEnterKey/local-echo trap does not apply) — nothing auto-sends, ever. User guide: `docs/readmymind.md`.
 
+**Voice dictation via Claude** (`claudeVoiceEnabled`, SYNCED, default OFF): the mic button can transcribe through this machine's Claude Code login instead of a Deepgram key, using the same speech-to-text service the CLI's own `/voice` mode uses. ⚠️ **Claude Code's voice mode itself is unusable here**: it opens the HOST's microphone (`sox`/`arecord`), and the CLI runs in a headless tmux pane while the human is in a browser elsewhere. So Codeman captures in the browser and borrows only the backend. Audio goes browser → Codeman → Anthropic (`src/web/voice-stream.ts`): the OAuth token never reaches the page, and the browser only sends PCM and receives text. ⚠️ Credentials are **read-only** (`src/claude-credentials.ts`) and Codeman never refreshes them — a refresh rotates the refresh token and could sign the user out of their own CLI; an elapsed token reports `expired` instead. ⚠️ Capture MUST be linear16/16 kHz/mono, so it uses an **AudioWorklet**, not MediaRecorder (which cannot emit raw PCM); `voice-pcm-worklet.js` is fetched from JS, so it is invisible to `cacheBustAssets` and borrows voice-input.js's `?v=` token — **edit the two together**. ⚠️ Transcript frames carry the WHOLE running transcript, not deltas: the Claude path replaces where the Deepgram path appends. Provider choice is `voiceSettings.provider` (`auto` prefers Claude → Deepgram → Web Speech). → `docs/claude-voice-plan.md`
+
 **Agent Teams**: `TeamWatcher` polls `~/.claude/teams/`, matches to sessions via `leadSessionId`. Teammates are in-process threads appearing as subagents. Enable: `CLAUDE_CODE_EXPERIMENTAL_AGENT_TEAMS=1`. See `docs/agent-teams/`.
 
 **Circuit breakers**: the Ralph breaker prevents respawn thrashing (`CLOSED` → `HALF_OPEN` → `OPEN`; reset via `/api/sessions/:id/ralph-circuit-breaker/reset`). **Distinct: the PTY-exit breaker** (`session-pty-exit-breaker.ts`) trips after repeated rapid PTY exits and blocks auto-restarts. ⚠️ It resets ONLY via an explicit `{clearBreaker:true}` body on `POST /api/sessions/:id/interactive`; the frontend's auto-reattach in `selectSession()` sends no body and must never clear it. → [architecture-invariants#circuit-breakers-ralph--pty-exit](docs/architecture-invariants.md#circuit-breakers-ralph-and-pty-exit)
@@ -222,7 +224,7 @@ Codeman is a Claude Code session manager with web interface and autonomous Ralph
 
 **Detached start + service install** (issue #231): `codeman web -d` relaunches the SAME entry script with `detached:true` (setsid), so there is no controlling terminal and no shell job entry. ⚠️ `nohup` is NOT what makes this work: Node re-arms SIGHUP to its default disposition even when it inherits "ignore", and `cli.ts` handles SIGHUP with a graceful shutdown, so a delivered HUP still stops the server. ⚠️ Both `-d` and `service install` must REFUSE when a server is already up on this data dir (pidfile check + `/api/status` probe): a second instance on the shared tmux socket attaches PTYs to the first one's live sessions. ⚠️ Neither may report success it has not observed — the parent polls `/api/status` until the child answers or dies, since `launchctl load` and a clean spawn are both silent about a server that starts and immediately exits. `--stop` verifies the pid still LOOKS like a Codeman server (`ps -o command=`) before signalling, because pids get recycled. Unit/label names live in `config/service-names.ts` so install.sh, `detectSupervisor()` and `service install` cannot drift into supervising two copies; they are instance-scoped, and identical to the historical names for the default instance. `service install` bakes the installing shell's PATH into the unit (launchd gives a job `/usr/bin:/bin:/usr/sbin:/sbin`, which finds neither a Homebrew/nvm `node` nor `tmux`/`claude`) and never writes `CODEMAN_PASSWORD` into it. → [architecture-invariants#detached-start-and-service-install](docs/architecture-invariants.md#detached-start-and-service-install)
 
-**Self-update** (App Settings → Updates): in-app updater for git-clone installs supervised by systemd/launchd (`systemd`, `launchd`, `launchd-daemon`, else `none` → "restart manually"). The update restarts the very process running it, so the real work runs in a DETACHED `scripts/self-update.sh` that outlives the restart and writes progress to `update-status.json`, which the browser polls across the connection drop. `src/web/self-update.ts` splits pure helpers (unit-tested) from IO wrappers. npm installs report as non-updatable. → [architecture-invariants#self-update](docs/architecture-invariants.md#self-update)
+**Self-update** (App Settings → System → Updates): in-app updater for git-clone installs supervised by systemd/launchd (`systemd`, `launchd`, `launchd-daemon`, else `none` → "restart manually"). The update restarts the very process running it, so the real work runs in a DETACHED `scripts/self-update.sh` that outlives the restart and writes progress to `update-status.json`, which the browser polls across the connection drop. `src/web/self-update.ts` splits pure helpers (unit-tested) from IO wrappers. npm installs report as non-updatable. → [architecture-invariants#self-update](docs/architecture-invariants.md#self-update)
 
 **Attachments** (live external document references; all wiring in `file-routes.ts`): a **registry** maps a stable `attachmentId` to a realpath-resolved, extension-allowlisted absolute path, so browser requests never carry arbitrary absolute paths. ⚠️ The **magic-link scanner** (`codeman://attach?...` in terminal output) is **prompt-injectable**, so its scan path is force-confined to the session workspace; a hostile prompt could otherwise exfiltrate arbitrary host files over SSE. The security gate is an extension **allowlist**, not a blocklist. `document-conversion-limiter.ts` caps converter spawns globally: without it, N large docs detected at once fork N multi-minute processes, which is a resource-exhaustion vector. → [architecture-invariants#attachments](docs/architecture-invariants.md#attachments)
 
@@ -264,7 +266,7 @@ Frontend JS modules have `@fileoverview` with `@dependency`/`@loadorder` tags. L
 
 **Per-device vs synced settings**: the `displayKeys` set in settings-ui.js is a **client-side merge policy**, not a wire filter. A display key seeds from the server only when localStorage has no value for it, which is what prevents one device overwriting another; `showPlanUsageLimits` is additionally `delete`d from the incoming payload outright. Separately, `SettingsUpdateSchema` is `.strict()` and simply **does not declare** `skin`, `showFileViewerButton`, `showCronButton`, `webglRendererEnabled`, `localEchoEnabled`, `cjkInputEnabled`, or `extendedKeyboardBar`, so sending one of those is a validation error. The rest (`showResponseViewer`, `showPlanUsageLimits`, `language`, and most `show*` keys) ARE in the schema and do persist server-side; they are per-device by client policy only. ⚠️ Adding a new per-device setting means deciding **both** questions: membership in `displayKeys`, and presence in the schema.
 
-**App Settings modal** (`#appSettingsModal`): a left rail that is a **table of contents over ONE scrolling document**, not a tab switcher. Every section stays mounted (`.set-section`, ids `settings-terminal|appearance|layout|models|clis|notifications|voice|shortcuts|system`), the rail follows the scroll, and `switchSettingsTab(id)` keeps its historical name but SCROLLS instead of hiding. Phones swap the rail for the sticky `#appSettingsJump` pill (compact layout at ≤860px in mobile.css). ⚠️ **The load/save contract is `getElementById` by id**: `openAppSettings()`/`saveAppSettings()` read every control by a fixed id, so moving a control between sections is free but renaming or dropping one silently stops it loading or saving. `test/app-settings-structure.test.ts` is the static guard. ⚠️ Model cards (`#appSettingsModelCards`) and the effort segment are **views over hidden `<select>`s** that remain the source of truth; the cards hold the BASE model and the "1M context window" switch composes `base + [1m]` back into `claudeModel`, which is what retires the old "takes precedence over the toggle below" trap. ⚠️ `.modal-tabs`/`.modal-tab-btn`/`.modal-tab-content` are still used by `#sessionOptionsModal` and `#createCaseModal`; the settings rail uses its own `set-*` classes and must not restyle them. ⚠️ `admin-ui.js` injects the multi-user Users entry into `.set-rail-items` + `.set-doc`, so those hooks must survive any restructure.
+**Settings surface** (`#appSettingsModal` + `#sessionOptionsModal` + `#createCaseModal`): the `set-*` language (left rail, groups of rows, control pinned right) is shared by all three modals through ONE `:is(#appSettingsModal, #sessionOptionsModal, #createCaseModal)` scope in styles.css: an `:is()` list takes its most specific argument's specificity, so every rule keeps the id weight it had and nothing downstream shifts. **App Settings** is a rail that is a **table of contents over ONE scrolling document**, not a tab switcher: every section stays mounted (`.set-section`, ids `settings-updates|terminal|layout|appearance|models|clis|notifications|voice|shortcuts|system`, in that order, the version and the updater leading and the rest of the system settings tailing), and `switchSettingsTab(id)` keeps its historical name but SCROLLS instead of hiding. **Session Options** and **Add Case** use the same surface with a rail that really SWITCHES (`switchOptionsTab` / `switchCaseModalTab` show one `.set-section` and `.hidden` the rest, since Summary owns its own scroller, Respawn is long, and Add Case is six independent forms). ⚠️ They also take a deliberate **size-up** that App Settings does not (900px shell, 236px rail, `height:auto` between `min(560px,80vh)` and 88vh, vs App Settings' tight 760×620): they are short task panels, not a document you scan, and at scanning density they read as a few fields marooned in an empty frame. Those per-modal blocks are the design, not drift. Phones (≤860px) give App Settings the sticky `#appSettingsJump` pill and give the other two a horizontal rail strip, which neither has a pill for. ⚠️ The Session Options rail entry labelled **Session** still keys off `context` (`data-tab="context"`, `#context-tab`, `switchOptionsTab('context')`), the rename is label-only. Add Case keeps its legacy `.form-row` markup (six panels of it, every id read back by session-ui.js) and is mapped onto the look by an adapter block scoped to `#createCaseModal .set-doc`. Do not restructure those forms just to reach the row classes. ⚠️ That adapter's `summary { display:flex }` **kills the native disclosure triangle**, so every `<details>` there needs the explicit `.set-adv-chev` and both marker suppressions (`list-style` + `::-webkit-details-marker`); without it five collapsed blocks render as plain headings nobody clicks. ⚠️ **The load/save contract is `getElementById` by id**: `openAppSettings()`/`saveAppSettings()`/`openSessionOptions()` read every control by a fixed id, so moving a control between sections is free but renaming or dropping one silently stops it loading or saving. Static guards: `test/app-settings-structure.test.ts` + `test/session-options-structure.test.ts` (rail↔section pairing, one-visible-section, the `data-claude-only` entries external CLIs drop). ⚠️ Model cards (`#appSettingsModelCards`) and the effort segment are **views over hidden `<select>`s** that remain the source of truth; the cards hold the BASE model and the "1M context window" switch composes `base + [1m]` back into `claudeModel`, which is what retires the old "takes precedence over the toggle below" trap. ⚠️ `.modal-tabs`/`.modal-tab-btn`/`.modal-tab-content` are RETIRED: no modal uses them and their CSS is deleted, and a reappearance means a modal drifted off the shared surface. ⚠️ The **Header & Panels live preview** is a scale model rebuilt from the chips (`_syncLayoutPreview`); it owns NO icons, it CLONES `.set-chip-ico` out of the chip, so each icon has exactly one copy in index.html. A chip joins it via `data-preview` (slot) + `data-preview-order`, or `data-preview-text` for readouts that are not buttons. Its frame is painted from skin tokens only (hardcoded black alphas turned it into a grey slab on the light skins) and is `data-i18n-skip`. ⚠️ In Session Options → Respawn, auto-resume is a `.set-callout` whose `<label>` **wraps its own switch with no `for=`** (nesting associates them; the label+`for` pair has historically double-fired), and the cycle steps are real checkboxes (`.set-checks`), not chips. ⚠️ `admin-ui.js` injects the multi-user Users entry into `.set-rail-items` + `.set-doc`, so those hooks must survive any restructure. → [architecture-invariants#settings-surface-app-settings-session-options-add-case](docs/architecture-invariants.md#settings-surface-app-settings-session-options-add-case)
 
 **Header button visibility**: most header controls are opt-in and hidden by a marker class (`btn-multimonitor--hidden`, `btn-response-viewer-header--hidden`, `btn-file-viewer--hidden`, `btn-cron--hidden`) that `applyHeaderVisibilitySettings()` (settings-ui.js) toggles after settings load; the multi-monitor button is instead stripped at render by `renderIndexHtml`. ⚠️ Hiding must go through the marker class: the base rules are `display:inline-flex !important`, so an inline style cannot override them. Current desktop default is WS/CPU/MEM + File Viewer + gear, with the token chip and lifecycle-log button OFF. ⚠️ New header controls must not leak onto phones; `test/mobile-header-buttons-policy.test.ts` is the static guard. → [architecture-invariants#header-button-visibility-multi-monitor-response-viewer-file-viewer-cron](docs/architecture-invariants.md#header-button-visibility-multi-monitor-response-viewer-file-viewer-cron)
 
@@ -314,11 +316,11 @@ Frontend JS modules have `@fileoverview` with `@dependency`/`@loadorder` tags. L
 
 ### SSE Event Registry
 
-154 event constants in `src/web/sse-events.ts` (backend) and `SSE_EVENTS` in `constants.js` (frontend). **Both must be kept in sync** — they are currently exactly in sync, and the backend file's `@fileoverview` carries the per-category breakdown.
+154 event constants in `src/web/sse-events.ts` (backend) and `SSE_EVENTS` in `constants.js` (frontend). **Both must be kept in sync**, and `test/sse-registry-parity.test.ts` is the guard that pins it (currently exactly in sync, 154 = 154, no drift either direction). The backend file's `@fileoverview` carries the per-category breakdown.
 
 ### API Routes
 
-~200 handlers across 23 route files in `src/web/routes/`: system (45), sessions (34), cases (29), files (16), orchestrator (10), ralph (9), cron (9), admin (8), plan (8), respawn (7), webviews (6 + the `/webview/:cap/*` proxy), mux (5), push (4), scheduled (4, legacy `ScheduledRun`), approvals (3), readmymind (4), me (2), teams (2), search (1), hooks (1), clipboard (1), status-telemetry (1), ws (1 WebSocket). Each file has `@fileoverview` with endpoint details.
+~200 handlers across 24 route files in `src/web/routes/`: system (45), sessions (34), cases (29), files (16), orchestrator (10), ralph (9), cron (9), admin (8), plan (8), respawn (7), webviews (6 + the `/webview/:cap/*` proxy), mux (5), push (4), scheduled (4, legacy `ScheduledRun`), approvals (3), readmymind (4), me (2), teams (2), search (1), hooks (1), clipboard (1), status-telemetry (1), voice (1 + the `/ws/voice/stream` relay), ws (1 WebSocket). Each file has `@fileoverview` with endpoint details.
 
 **HTTP contract** (stable since 0.9.x, see `docs/versioning-policy.md`; full envelope/status/error-code/SSE spec in `docs/api-reference.md`): responses use the `ApiResponse<T>` envelope — `{ success: true, data? }` or `{ success: false, error, errorCode }` (`src/types/api.ts`). `/api/v1/*` is a versioned alias of `/api/*` (URL rewrite in `server.ts`).
 

README.md

@@ -254,7 +254,7 @@ Click **+ New Session** (or **Quick Start**). A session is one AI CLI running in
 | ---------------------------- | ------------------------------------------------------------------------------------------------------------------- |
 | **Working directory / case** | The folder the agent operates in. A "case" is just a named working dir Codeman remembers. **Add Case** creates one from scratch, links an existing folder, or clones a GitHub repo straight into one (**Clone Repo**). |
 | **CLI / run mode**           | `Claude` (default), `OpenCode`, `Codex`, `Antigravity`, `Gemini`, or `Terminal` (plain shell).                       |
-| **Model**                    | Per-session model (App Settings → Claude Model). A soft default — `/model` still works in-session.                  |
+| **Model**                    | Per-session model (App Settings → Models → New Claude sessions). A soft default — `/model` still works in-session.                  |
 | **Effort / Ultracode**       | Reasoning effort (`low`–`max`) or `ultracode` for dynamic multi-agent workflows. Switchable anytime with `/effort`. |
 
 Hit start — Codeman spawns the CLI via a real PTY and streams it to your browser over SSE.
@@ -278,7 +278,7 @@ Hit start — Codeman spawns the CLI via a real PTY and streams it to your brows
 | ---------------- | --------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------- |
 | **Respawn**      | Long unattended runs — auto-restarts the CLI on idle/limit, with adaptive timing. Presets: `solo-work`, `overnight-autonomous`, … | Respawn tab                                                         |
 | **Orchestrator** | Turn one goal into a phased plan and drive it to completion across agents.                                                        | Orchestrator panel                                                  |
-| **Cron**         | Saved, named jobs on a schedule (`once`/`interval`/`daily`/`weekly`) that spawn a session and send a prompt when due.             | ⏰ Cron button _(opt-in: App Settings → Display → Header Displays)_ |
+| **Cron**         | Saved, named jobs on a schedule (`once`/`interval`/`daily`/`weekly`) that spawn a session and send a prompt when due.             | ⏰ Cron button _(opt-in: App Settings → Header & Panels → Scheduling)_ |
 | **Auto-resume**  | Automatically continue after a subscription rate-limit resets.                                                                    | Respawn tab (top)                                                   |
 
 ### 6. Reach it from anywhere
@@ -291,7 +291,7 @@ Hit start — Codeman spawns the CLI via a real PTY and streams it to your brows
 
 - **App Settings** — model, effort, permission startup mode, theme/skin, notifications, display toggles, per-CLI options, a synced custom display name, and per-device English/Simplified Chinese UI language.
 - **Run it in the background** — `codeman web -d` detaches from your shell (`--status`, `--stop`); `codeman service install` makes it a systemd user unit / macOS LaunchAgent that survives reboots. Both verify the server actually answers before reporting success, and both refuse to start a second server on one data dir. See [Keep it running in the background](#quick-start---installation).
-- **Self-update** — git-clone installs update in place from **Settings → Updates**.
+- **Self-update** — git-clone installs update in place from **App Settings → System → Updates**.
 - **Deploy your own changes** — see [Development](#development).
 
 > ⚠️ **Safety:** if you're working _inside_ a Codeman-managed session (`echo $CODEMAN_MUX` → `1`), never run `tmux kill-session` / `pkill claude` directly — use the web UI or `./scripts/tmux-manager.sh`.
@@ -427,7 +427,7 @@ PTY Output → 16ms Server Batch → DEC 2026 Wrap → SSE → Client rAF → xt
 ## More Features
 
 - **Background daemon & service install** — `codeman web -d` runs the server detached with a pidfile, `~/.codeman/web.log`, and verified startup (it polls the server until it answers, so a port clash never reads as success); `codeman service install` writes a systemd user unit (Linux) or LaunchAgent (macOS) with your shell's PATH baked in, so an nvm or Homebrew `node`, `tmux` and `claude` are actually found. Secrets are never written into unit files
-- **Self-update** — git-clone installs under systemd/launchd update in place from **App Settings → Updates**: it detects the latest release, auto-stashes a dirty tree, and streams build progress across the service restart (npm installs report as non-updatable)
+- **Self-update** — git-clone installs under systemd/launchd update in place from **App Settings → System → Updates**: it detects the latest release, auto-stashes a dirty tree, and streams build progress across the service restart (npm installs report as non-updatable)
 - **Clone a GitHub repo as a case** — paste a repository URL into **Add Case → Clone Repo** and Codeman clones it into `~/codeman-cases/<name>` and registers it as a normal case, ready to run an agent in. It preflights the URL while you type (tells you whether it can be cloned anonymously and offers the repo's real branches and tags for the optional branch/tag field), fills the case name in from the URL, and lets you pick which CLI the Run button should use. Public repositories over `https://`; Codeman never collects or stores credentials
 - **Multi-CLI** — run **Claude Code**, **OpenCode**, **Codex**, **Antigravity**, or **Gemini** per session; env-var prefixes auto-gate (`CLAUDE_CODE_*` vs `OPENCODE_*` vs `CODEX_*` vs `ANTIGRAVITY_*` vs `GEMINI_*`/`GOOGLE_*`). See [`docs/opencode-integration.md`](docs/opencode-integration.md)
 - **Docker sessions** — run a case inside an isolated, hardened container. One checkbox on **Create New** spins up a container with sensible defaults and starts the agent inside it; multiple sessions share one per-case container; export a container + its workspace to a portable `.tar.gz` to move it to another machine. See [`docs/docker-cases.md`](docs/docker-cases.md)
@@ -435,9 +435,9 @@ PTY Output → 16ms Server Batch → DEC 2026 Wrap → SSE → Client rAF → xt
 - **Effort & Ultracode** — set a per-session default effort (`low`–`max`) or enable **ultracode** (dynamic multi-agent workflows). Soft defaults only — switchable anytime with `/effort` in-session. Extended-thinking budget is configurable too
 - **Voice input** — dictate prompts with Deepgram Nova-3 (Web Speech API fallback): toggle recording, auto-silence stop, live level meter (`Ctrl+Shift+V`)
 - **Image input** — paste or drag-and-drop images straight into a session
-- **Gesture control** _(opt-in)_ — a MediaPipe hand-tracking overlay to grab/drag session windows and pinch buttons, hands-free. Enable with `CODEMAN_GESTURE=1` + App Settings → Display
+- **Gesture control** _(opt-in)_ — a MediaPipe hand-tracking overlay to grab/drag session windows and pinch buttons, hands-free. Enable with `CODEMAN_GESTURE=1` + App Settings → Terminal & Input
 - **Multi-monitor span** _(macOS)_ — one click opens a browser window maximized across all displays, so floating agent/gesture panels can cross the physical seam
-- **File Viewer button** _(opt-in)_ — a header button that toggles the built-in file browser panel with one tap; enable under App Settings → Display → Header Displays
+- **File Viewer button** _(opt-in)_ — a header button that toggles the built-in file browser panel with one tap; enable under App Settings → Header & Panels → Header buttons
 - **CJK / IME input** — full composition support for Chinese / Japanese / Korean
 - **OS notifications & hostname-aware titles** — desktop alerts and tab titles are prefixed `codeman:<host>` so multi-host setups stay unambiguous
 
@@ -521,7 +521,7 @@ The script auto-installs a systemd user service on first run. The tunnel URL is
 systemctl --user enable codeman-tunnel
 loginctl enable-linger $USER
 
-# Or via the Codeman web UI: Settings → Tunnel → Toggle On
+# Or via the Codeman web UI: App Settings → System → Remote access → Cloudflare Tunnel
 ```
 
 </details>
@@ -623,7 +623,7 @@ By default Codeman launches sessions with `--dangerously-skip-permissions`, so t
 - **Loopback by default** — the server binary binds `127.0.0.1`, reachable only from the same machine, so the no-password default is safe out of the box (the guided installer asks about network access and configures the binding + password for you). Binding a non-loopback host without `CODEMAN_PASSWORD` _starts but prints a loud warning_ with three concrete fixes (set a password, loopback + an authenticated tunnel, or explicitly acknowledge with `--allow-unauthenticated-network`)
 - **Optional auth, real sessions** — HTTP Basic via `CODEMAN_USERNAME` (default `admin`) / `CODEMAN_PASSWORD`. Success issues an opaque 256-bit `codeman_session` cookie (`randomBytes(32)`) — validated server-side, not client-signed, so it can't be forged offline (24h TTL, auto-extend, device-context audit log)
 - **Per-IP rate limiting** — 10 failed attempts → `429` with `Retry-After` (15-min decay). A valid cookie or correct password recovers _immediately_ even while an attacker hammers the same IP — important because all tunnel traffic shares one loopback IP. QR auth has its own separate limiter
-- **Configurable permission mode** - `--dangerously-skip-permissions` is only the default. **App Settings → Claude CLI → Startup Mode** can switch new sessions to Anthropic's classifier-guarded `auto` mode (low-prompt, needs Claude Code 2.1.207+), `normal` prompting, or an explicit allowed-tools list. In multi-user mode, non-granted users are forced to `auto`, and shell sessions / skip-permissions require an explicit per-user grant
+- **Configurable permission mode** - `--dangerously-skip-permissions` is only the default. **App Settings → Agents & CLIs → Claude → Startup Mode** can switch new sessions to Anthropic's classifier-guarded `auto` mode (low-prompt, needs Claude Code 2.1.207+), `normal` prompting, or an explicit allowed-tools list. In multi-user mode, non-granted users are forced to `auto`, and shell sessions / skip-permissions require an explicit per-user grant
 
 ### Always-on browser hardening (v0.9.5)
 
@@ -696,7 +696,7 @@ For AI agents and automation that control Codeman without a browser: an agent th
 >
 > - `npx skills add Ark0N/Codeman --skill codeman -g`: global, works for any skills-aware agent
 > - `codeman skill install` (global) or `codeman skill install --case <name>`: for npm installs that never cloned the repo; `codeman skill uninstall` reverses it
-> - **App Settings → Agent Skill** (`agentSkillEnabled`, default off): Codeman then injects the skill into each case on Claude session create; a user-authored `skills/codeman` in the case is never overwritten
+> - **App Settings → Agents & CLIs → Claude → Agent Skill** (`agentSkillEnabled`, default off): Codeman then injects the skill into each case on Claude session create; a user-authored `skills/codeman` in the case is never overwritten
 >
 > A global install (`codeman skill install`, or `npx skills add`) is picked up by **every new Claude Code session on the machine**, inside Codeman or not. The skill self-gates: outside a Codeman session (`CODEMAN_MUX` unset) it refuses to act, so a global install costs an idle session nothing.
 >

docs/api-reference.md

@@ -471,6 +471,28 @@ All four enforce session ownership in multi-user mode; a foreign session id
 answers `404 NOT_FOUND` (no existence leak), and profiles of two owners of the
 same directory are distinct by construction.
 
+## Voice dictation
+
+Browser dictation transcribed through this server's Claude Code login, i.e. the
+same speech-to-text service the CLI's own `/voice` mode uses. Gated on the synced
+`claudeVoiceEnabled` setting (default OFF). Design:
+[`claude-voice-plan.md`](claude-voice-plan.md).
+
+- `GET /api/v1/voice/status` -> `{ available, reason?, subscriptionType?,
+  expiresAt? }`. `reason` is `disabled` (setting off), `no-credentials` (nobody
+  signed in to Claude Code on the server), `expired` (the access token elapsed;
+  running any Claude session refreshes it) or `malformed`. The OAuth token
+  itself is never returned by this or any other endpoint.
+- `GET /ws/voice/stream?language=&keyterms=` (WebSocket, not under `/api`)
+  relays one dictation. Client sends binary frames of signed 16-bit
+  little-endian PCM, 16 kHz mono (<= 64 KB per frame), plus JSON control frames
+  `{"t":"finalize"}` (ask for the final transcript) and `{"t":"stop"}`. Server
+  sends `{"t":"ready"}`, `{"t":"transcript","text","final"}` (each frame is the
+  WHOLE running transcript, not a delta), `{"t":"error","message"}` and
+  `{"t":"closed"}`. Close codes: `4003` disallowed Host/Origin, `4004`
+  unavailable (reason in the close reason), `4008` too many concurrent streams.
+  Streams are capped in count and length (`src/config/voice.ts`).
+
 ## Authentication
 
 Optional HTTP Basic (`CODEMAN_USERNAME`/`CODEMAN_PASSWORD`) → opaque

docs/browser-testing-guide.md

@@ -300,6 +300,11 @@ For reference when writing browser tests:
 .xterm                   // Terminal container
 #helpModal               // Help modal
 #appSettingsModal        // Settings modal
+#sessionOptionsModal     // Session Options (same set-* surface)
+#createCaseModal         // Add Case (same set-* surface)
+.set-rail-item           // Rail entry: scrolls in App Settings, switches in the other two
+.set-section             // A settings section (`.hidden` on the inactive ones outside App Settings)
+.set-row                 // One setting: label + description left, control right
 .modal-content           // Modal content
 .modal-close             // Modal close button
 .header-brand .logo      // Logo text

docs/claude-voice-plan.md

@@ -0,0 +1,121 @@
+# Claude voice dictation in Codeman
+
+Wire Codeman's existing mic button to the same speech-to-text service Claude Code's own
+`/voice` mode uses, so dictation works with **no third-party API key** for anyone already
+signed in to Claude Code on the server.
+
+## Why the CLI's own voice mode cannot be reused directly
+
+Claude Code 2.1.x ships voice input: `/voice hold|tap|off` arms it, the CLI opens the
+**host's** microphone (native `audio-capture-napi`, falling back to `sox`/`arecord` on Linux
+after probing `/proc/asound/cards`), streams PCM upstream and types the transcript into its
+own composer.
+
+Every part of that is on the wrong machine for Codeman. The CLI runs inside a tmux pane on
+the server, which is typically headless and has no sound card at all, while the human is in
+a browser on a phone somewhere else. Toggling `/voice` in the pane from Codeman would arm a
+microphone nobody is sitting in front of. So Codeman keeps capturing audio in the browser,
+where the user actually is, and only borrows the CLI's **transcription backend**.
+
+## The backend, as the CLI uses it
+
+Extracted from the 2.1.226 binary (`connectVoiceStream`):
+
+| | |
+| --- | --- |
+| URL | `wss://api.anthropic.com/api/ws/speech_to_text/voice_stream` |
+| Query | `encoding=linear16`, `sample_rate=16000`, `channels=1`, `endpointing_ms=300`, `utterance_end_ms=1000`, `language=<lang>`, `use_conversation_engine=true`, `stt_provider=deepgram-nova3` |
+| Headers | `Authorization: Bearer <Claude Code OAuth access token>`, `User-Agent`, `x-app: cli`, `anthropic-client-platform`, optional `x-config-keyterms` |
+| Audio | raw binary frames, PCM signed 16-bit little-endian, 16 kHz, mono |
+| Keepalive | `{"type":"KeepAlive"}` on open, then every 8 s |
+| Finalize | `{"type":"CloseStream"}`, then wait for the endpoint frame |
+| Downstream | `{"type":"TranscriptText"\|"TranscriptInterim","data":"…"}` (running interim), `{"type":"TranscriptEndpoint"}` (promotes the pending interim to final), `{"type":"TranscriptError",…}`, `{"type":"error","message":…}` |
+
+Deepgram Nova-3 runs server-side, so the Deepgram-quality result arrives without a Deepgram
+account. Verified against the live endpoint before this design was written: connect, stream
+PCM, receive interims and an endpoint frame.
+
+## Architecture
+
+The browser cannot call that endpoint itself: it would need the OAuth bearer token in page
+JavaScript (and CORS would refuse anyway). So the audio goes browser → Codeman → Anthropic,
+and Codeman is the only thing that ever touches the token.
+
+```
+mic → AudioWorklet (Float32 → PCM16 @16 kHz)
+    → wss://<codeman>/ws/voice/stream          [cookie/basic auth, Origin+Host guarded]
+    → VoiceStreamRelay (reads ~/.claude/.credentials.json per connect)
+    → wss://api.anthropic.com/api/ws/speech_to_text/voice_stream
+    ← {"t":"transcript","text":…,"final":…}    → existing _insertText() path
+```
+
+Nothing about the insert path changes: the transcript lands in the same preview overlay,
+the same direct/compose insert modes, the same green Send button.
+
+### Server pieces
+
+- **`src/claude-credentials.ts`** — locate and parse the Claude Code OAuth credentials.
+  `parseClaudeCredentials()` is pure (JSON string + `now` → status) and unit-tested;
+  `readClaudeOAuthToken()` wraps it with IO: `$CLAUDE_CONFIG_DIR/.credentials.json` or
+  `~/.claude/.credentials.json`, and on macOS the login keychain
+  (`security find-generic-password -s "Claude Code-credentials"`).
+  **Read-only, always.** Codeman never writes credentials and never refreshes the token: a
+  refresh rotates the refresh token, and racing Claude Code's own refresh could sign the
+  user out of their CLI. An expired token surfaces as a plain "run a Claude session to
+  refresh" error instead.
+  The token is never logged, never returned by any endpoint, and never sent to the browser.
+
+- **`src/web/voice-stream.ts`** — pure `buildVoiceStreamUrl()` / `buildVoiceStreamHeaders()` /
+  `sanitizeKeyterms()` (ASCII-only, deduped, 1024-char cap, mirroring the CLI), plus
+  `VoiceStreamRelay`, which owns one upstream socket: keepalive timer, audio passthrough,
+  transcript translation, finalize, and the caps below.
+
+- **`src/web/routes/voice-routes.ts`**
+  - `GET /api/voice/status` → `{ available, reason, subscriptionType?, expiresAt? }`. Never
+    the token. `available:false` with a machine-readable `reason` (`disabled`, `no-credentials`,
+    `expired`) is what the settings row and the provider resolver read.
+  - `GET /ws/voice/stream?language=&keyterms=` → the relay. Same upgrade guard as
+    `/ws/sessions/:id/terminal`: allowed Host, same-site Origin, and the global auth hook has
+    already run on the handshake.
+
+Caps, because an open mic is an open pipe: one stream per connection, `MAX_VOICE_STREAMS`
+concurrent server-wide, a hard `MAX_STREAM_MS` per stream, and a per-frame size cap. A tab
+left recording cannot bill an unbounded amount of upstream audio.
+
+### Frontend pieces
+
+- **`voice-pcm-worklet.js`** — an `AudioWorkletProcessor` converting Float32 blocks to PCM16
+  and posting ~256 ms frames back. `MediaRecorder` cannot produce raw PCM, which is why the
+  existing Deepgram path (container audio, auto-detected) cannot be reused as-is. Falls back
+  to `ScriptProcessorNode` where AudioWorklet is unavailable.
+- **`ClaudeVoiceProvider`** in `voice-input.js` — mirrors `DeepgramProvider`'s shape
+  (`start({language, keyterms, onStream, onResult, onError, onEnd})`) so `VoiceInput` treats
+  the three providers uniformly.
+- **Provider resolution** — new `voiceSettings.provider`: `auto` (default) | `claude` |
+  `deepgram` | `webspeech`. `auto` picks Claude when `/api/voice/status` reports it
+  available, else Deepgram when a key is set, else Web Speech. Pinning a provider always
+  wins, so an existing Deepgram user can keep exactly what they have.
+
+### Settings
+
+- `claudeVoiceEnabled` — synced, **default OFF**, gating the whole server side. Off is the
+  honest default: turning it on means this machine's Claude subscription starts paying for
+  transcription for whoever can reach the UI, and the audio goes to Anthropic rather than to
+  wherever it went before. One switch in Settings → Voice, and the mic works with no key.
+- `voiceSettings.provider` — per the resolution table above; joins the existing synced
+  `voiceSettings` object.
+
+## Things worth knowing
+
+- **This uses an undocumented endpoint with subscription credentials.** It is the user's own
+  token, on the user's own machine, driving the user's own Claude Code install, but it is not
+  a published API and Anthropic can change or restrict it. Default-OFF is deliberate; the
+  Deepgram and Web Speech paths stay untouched as the supported fallbacks.
+- **Multi-user mode**: every user's dictation would run on the server owner's Claude
+  credentials, exactly as every user's *sessions* already run on them. Consistent, but worth
+  stating out loud in the settings copy.
+- **Token lifetime** is about 8 hours, refreshed by Claude Code itself whenever it runs. The
+  relay re-reads the file on every connect rather than caching, so a refresh is picked up on
+  the next press of the mic.
+- **HTTPS or localhost**: `getUserMedia` needs a secure context. Prod is HTTPS behind
+  `tailscale serve`, so this is already satisfied; the existing error copy covers the rest.

docs/readmymind.md

@@ -11,7 +11,7 @@ Codeman's per-case memory of what you are trying to accomplish, and the 🧠 but
 
 ## Turning it on
 
-App Settings → Panels → **Read My Mind** (synced setting `readMyMindEnabled`, default **OFF**). It gates everything: capture, the header button, and nothing shows anywhere while it is off. The API equivalent:
+App Settings → Header & Panels → Cross-session features → **Read My Mind** (synced setting `readMyMindEnabled`, default **OFF**). It gates everything: capture, the header button, and nothing shows anywhere while it is off. The API equivalent:
 
 ```bash
 curl -sk -X PUT https://localhost:3000/api/settings \
@@ -93,7 +93,7 @@ Explicitly later: proactive predict-on-idle, auto-compaction of the prompt histo
 
 | Symptom | Cause / fix |
 | ------- | ----------- |
-| No 🧠 button in the header | `readMyMindEnabled` is OFF (App Settings → Panels), you are on a phone (there it is a key on the keyboard accessory bar instead, visible while typing), or the active session is not claude-mode |
+| No 🧠 button in the header | `readMyMindEnabled` is OFF (App Settings → Header & Panels → Cross-session features), you are on a phone (there it is a key on the keyboard accessory bar instead, visible while typing), or the active session is not claude-mode |
 | Prediction feels generic | The profile is thin: record goals (PUT or ask your agent to), and let capture accumulate a few real prompts first |
 | "A prediction is already running" (409) | One per session at a time; wait for the current one (up to 90 s) |
 | Prediction fails (502) | The model returned no usable JSON, or the CLI could not start; retry. Check `readMyMindModel` if you overrode it |

src/claude-credentials.ts

@@ -0,0 +1,126 @@
+/**
+ * @fileoverview Read-only access to the Claude Code OAuth credentials.
+ *
+ * Claude Code stores its subscription OAuth tokens in
+ * `$CLAUDE_CONFIG_DIR/.credentials.json` (default `~/.claude/.credentials.json`,
+ * mode 0600) on Linux/Windows, and in the login keychain on macOS. Codeman reads
+ * the access token to authenticate the voice-dictation relay
+ * (`src/web/voice-stream.ts`) against the same speech-to-text service the CLI's
+ * own `/voice` mode uses.
+ *
+ * ⚠️ READ-ONLY, deliberately. Codeman never writes this file and never performs
+ * an OAuth refresh: a refresh ROTATES the refresh token, so racing Claude Code's
+ * own refresh could invalidate the user's CLI login. An expired access token is
+ * reported as `expired` and the caller tells the user to run a Claude session
+ * (which refreshes it) instead.
+ *
+ * ⚠️ The token is a bearer secret: it is never logged, never persisted, never
+ * included in any API response, and never sent to the browser.
+ */
+
+import { readFile } from 'fs/promises';
+import { execFile } from 'child_process';
+import { homedir, userInfo } from 'os';
+import { join } from 'path';
+
+/** Result of inspecting the credential store. The token is present only on 'ok'. */
+export type ClaudeCredentialStatus = 'ok' | 'expired' | 'missing' | 'malformed';
+
+export interface ClaudeOAuthCredentials {
+  status: ClaudeCredentialStatus;
+  /** Bearer token. Present only when status is 'ok'. Never log or serialize this. */
+  accessToken?: string;
+  /** Epoch ms the access token expires at, when the store reports one. */
+  expiresAt?: number;
+  /** e.g. 'max', 'pro'. Display-only, safe to surface. */
+  subscriptionType?: string;
+}
+
+/** Skew applied to the stored expiry so a token that dies mid-stream is refused up front. */
+const EXPIRY_SKEW_MS = 60_000;
+
+/** macOS keychain service holding the same JSON blob as `.credentials.json`. */
+const KEYCHAIN_SERVICE = 'Claude Code-credentials';
+
+/** Keychain lookups shell out; keep them short so a locked keychain cannot hang a request. */
+const KEYCHAIN_TIMEOUT_MS = 3000;
+
+/**
+ * Parse a `.credentials.json` payload. Pure: no IO, no clock read (pass `now`),
+ * so the expiry and shape handling are unit-testable.
+ *
+ * Returns 'malformed' for anything that is not the expected `claudeAiOauth`
+ * shape rather than throwing — a hand-edited or half-written file must degrade
+ * to "voice unavailable", never to a 500.
+ */
+export function parseClaudeCredentials(raw: string, now: number): ClaudeOAuthCredentials {
+  let parsed: unknown;
+  try {
+    parsed = JSON.parse(raw);
+  } catch {
+    return { status: 'malformed' };
+  }
+  if (!parsed || typeof parsed !== 'object') return { status: 'malformed' };
+
+  const oauth = (parsed as { claudeAiOauth?: unknown }).claudeAiOauth;
+  if (!oauth || typeof oauth !== 'object') return { status: 'malformed' };
+
+  const record = oauth as Record<string, unknown>;
+  const accessToken = typeof record.accessToken === 'string' ? record.accessToken.trim() : '';
+  if (!accessToken) return { status: 'malformed' };
+
+  const expiresAt = typeof record.expiresAt === 'number' ? record.expiresAt : undefined;
+  const subscriptionType = typeof record.subscriptionType === 'string' ? record.subscriptionType : undefined;
+
+  // An expired token is a real state (the CLI refreshes on its next run), not a
+  // malformed store: report it separately so the UI can say something useful.
+  if (expiresAt !== undefined && expiresAt - EXPIRY_SKEW_MS <= now) {
+    return { status: 'expired', expiresAt, subscriptionType };
+  }
+  return { status: 'ok', accessToken, expiresAt, subscriptionType };
+}
+
+/** Path of the credentials file, honoring CLAUDE_CONFIG_DIR like the CLI does. */
+export function claudeCredentialsPath(env: NodeJS.ProcessEnv = process.env): string {
+  const configDir = typeof env.CLAUDE_CONFIG_DIR === 'string' && env.CLAUDE_CONFIG_DIR.trim();
+  return join(configDir || join(homedir(), '.claude'), '.credentials.json');
+}
+
+/** Read the macOS keychain entry. Resolves to null on any failure (locked, absent, non-mac). */
+function readKeychainCredentials(): Promise<string | null> {
+  return new Promise((resolve) => {
+    execFile(
+      'security',
+      ['find-generic-password', '-a', userInfo().username, '-w', '-s', KEYCHAIN_SERVICE],
+      { encoding: 'utf-8', timeout: KEYCHAIN_TIMEOUT_MS },
+      (err, stdout) => resolve(err ? null : stdout.trim() || null)
+    );
+  });
+}
+
+/**
+ * Locate and parse the Claude Code OAuth credentials.
+ *
+ * File first (present on every platform once the CLI has run there), keychain
+ * second on macOS. Never caches: Claude Code rewrites the store roughly every
+ * 8 hours, and a cached token would go stale inside a long-lived server.
+ */
+export async function readClaudeOAuthCredentials(now: number = Date.now()): Promise<ClaudeOAuthCredentials> {
+  let fileResult: ClaudeOAuthCredentials | null = null;
+  try {
+    fileResult = parseClaudeCredentials(await readFile(claudeCredentialsPath(), 'utf-8'), now);
+  } catch {
+    fileResult = null;
+  }
+  if (fileResult && fileResult.status !== 'malformed') return fileResult;
+
+  if (process.platform === 'darwin') {
+    const raw = await readKeychainCredentials();
+    if (raw) {
+      const keychainResult = parseClaudeCredentials(raw, now);
+      if (keychainResult.status !== 'malformed') return keychainResult;
+    }
+  }
+
+  return fileResult ?? { status: 'missing' };
+}

src/config/voice.ts

@@ -0,0 +1,56 @@
+/**
+ * @fileoverview Bounds and endpoint config for Claude voice dictation.
+ *
+ * Backs the browser → Codeman → Anthropic dictation relay (`src/web/voice-stream.ts`,
+ * `src/web/routes/voice-routes.ts`; design in `docs/claude-voice-plan.md`).
+ *
+ * Why everything here is bounded: an open microphone is an open pipe. Each live
+ * stream holds a browser socket, an upstream socket and a keepalive timer, and
+ * every second of audio is billed against the server owner's Claude subscription.
+ * A tab left recording (phone in a pocket, forgotten laptop) must cost a bounded
+ * amount, so streams die on their own at `MAX_STREAM_MS` and the server refuses
+ * more than `MAX_CONCURRENT_STREAMS` at once.
+ *
+ * The audio frame cap is a memory guard on a socket that carries attacker-shaped
+ * binary data: PCM16 at 16 kHz mono is 32 KB/s, so a 256 ms frame is ~8 KB and
+ * anything near 64 KB is either a broken client or an attempt to make the relay
+ * buffer for someone else.
+ */
+
+/** Upstream speech-to-text service (the one Claude Code's own `/voice` mode uses). */
+export const VOICE_STREAM_HOST = 'wss://api.anthropic.com';
+
+/** Path of the streaming speech-to-text endpoint. */
+export const VOICE_STREAM_PATH = '/api/ws/speech_to_text/voice_stream';
+
+/**
+ * Base override, for tests (point the relay at a local mock) and for users on an
+ * Anthropic-compatible gateway. Must be a ws:// or wss:// origin.
+ */
+export function voiceStreamBase(env: NodeJS.ProcessEnv = process.env): string {
+  const override = typeof env.CODEMAN_VOICE_STREAM_BASE === 'string' ? env.CODEMAN_VOICE_STREAM_BASE.trim() : '';
+  if (override && /^wss?:\/\//.test(override)) return override.replace(/\/+$/, '');
+  return VOICE_STREAM_HOST;
+}
+
+/** Upstream drops an idle socket; the CLI pings at 8s and so do we. */
+export const KEEPALIVE_INTERVAL_MS = 8000;
+
+/** Hard ceiling on one dictation. Long enough for any real utterance, short enough to bound a forgotten mic. */
+export const MAX_STREAM_MS = 5 * 60_000;
+
+/** Concurrent relays server-wide. Dictation is a human-paced, one-at-a-time act. */
+export const MAX_CONCURRENT_STREAMS = 4;
+
+/** Largest single audio frame accepted from the browser (~2s of PCM16 @16 kHz mono). */
+export const MAX_AUDIO_FRAME_BYTES = 64 * 1024;
+
+/** How long to wait for the final transcript after the client asks to finalize. */
+export const FINALIZE_TIMEOUT_MS = 3000;
+
+/** Upstream caps the keyterms header; mirrors the CLI's own limit. */
+export const MAX_KEYTERMS_HEADER_CHARS = 1024;
+
+/** Audio format the endpoint is opened with. The browser worklet must match exactly. */
+export const AUDIO_SAMPLE_RATE = 16000;
+export const AUDIO_CHANNELS = 1;

src/web/ports/config-port.ts

@@ -19,6 +19,8 @@ export interface ConfigPort {
   getTerminalHistoryConfig(): Promise<TerminalHistoryConfig>;
   /** Synced `agentSkillEnabled` app setting (default OFF); gates per-case agent-skill injection. */
   getAgentSkillEnabled(): Promise<boolean>;
+  /** Synced `claudeVoiceEnabled` app setting (default OFF); gates the Claude voice dictation relay. */
+  getClaudeVoiceEnabled(): Promise<boolean>;
   getDefaultClaudeMdPath(): Promise<string | undefined>;
   getLightState(identity?: { username: string; role: 'admin' | 'user' }): unknown;
   getLightSessionsState(): unknown[];

src/web/public/home-sessions.js

@@ -393,10 +393,14 @@ Object.assign(CodemanApp.prototype, {
     // that collide with state strings on other surfaces.
     pill.setAttribute('data-i18n-skip', '');
     pill.textContent = row.pill;
-    item.appendChild(pill);
 
-    // Wraps onto its own line (the row is flex-wrap) so it gets the full width.
-    item.appendChild(this._buildHomeSessionsMeta(row));
+    // The stamps line wraps onto its own full-width line (the row is flex-wrap)
+    // and the pill rides along at its right end, rather than sitting beside the
+    // name: that hands the whole width of the rail to the session name, which is
+    // what stops it ellipsizing.
+    const meta = this._buildHomeSessionsMeta(row);
+    meta.appendChild(pill);
+    item.appendChild(meta);
 
     return item;
   },
@@ -439,7 +443,14 @@ Object.assign(CodemanApp.prototype, {
     pill.className = 'home-sessions-pill home-sessions-pill--web';
     pill.setAttribute('data-i18n-skip', '');
     pill.textContent = 'web';
-    item.appendChild(pill);
+
+    // Same bottom line as a session row (minus the stamps, a dashboard has
+    // none), so the pill sits in the same place on every row in the rail.
+    const foot = document.createElement('span');
+    foot.className = 'home-sessions-row-meta';
+    foot.setAttribute('data-i18n-skip', '');
+    foot.appendChild(pill);
+    item.appendChild(foot);
 
     return item;
   },

src/web/public/mobile.css

@@ -223,24 +223,6 @@ html.mobile-init .file-browser-panel {
     min-height: 56px;
   }
 
-  .modal-tabs {
-    overflow-x: auto;
-    -webkit-overflow-scrolling: touch;
-    scrollbar-width: none;
-    flex-wrap: nowrap;
-  }
-
-  .modal-tabs::-webkit-scrollbar {
-    display: none;
-  }
-
-  .modal-tab-btn {
-    padding: 0.4rem 0.75rem;
-    font-size: 0.7rem;
-    white-space: nowrap;
-    flex-shrink: 0;
-  }
-
   /* Settings grid stays 2-col on tablet but tighter */
   .settings-grid {
     gap: 0.4rem 0.75rem;
@@ -2079,45 +2061,8 @@ html.mobile-init .file-browser-panel {
 
   /* ---- Settings Modal: Mobile Optimizations ---- */
 
-  /* Scrollable tabs row - prevent overflow on small screens */
-  .modal-tabs {
-    overflow-x: auto;
-    -webkit-overflow-scrolling: touch;
-    scrollbar-width: none;
-    gap: 0.25rem;
-    padding: 0 0.75rem 0.5rem 0.75rem;
-    flex-wrap: nowrap;
-  }
-
-  .modal-tabs::-webkit-scrollbar {
-    display: none;
-  }
-
-  .modal-tab-btn {
-    padding: 0.35rem 0.6rem;
-    font-size: 0.65rem;
-    white-space: nowrap;
-    flex-shrink: 0;
-  }
-
   /* ---- Case Modal: Mobile Touch Optimizations ---- */
 
-  /* Larger tab buttons for case modal - easy to tap */
-  #createCaseModal .modal-tabs {
-    gap: 0.5rem;
-    padding: 0.5rem 1rem 0.75rem;
-  }
-
-  #createCaseModal .modal-tab-btn {
-    flex: 1;
-    min-height: 44px;
-    padding: 0.6rem 1rem;
-    font-size: 0.8rem;
-    font-weight: 500;
-    border-radius: 8px;
-    justify-content: center;
-    text-align: center;
-  }
 
   /* Touch-friendly form inputs in case modal */
   #createCaseModal .form-row {
@@ -3172,21 +3117,21 @@ html:is([data-skin="paper-gray"], [data-skin="solarized-light"], [data-skin="cat
    stack of separate cards: at 390px the per-card borders were most of the pixels.
    ============================================================================ */
 @media (max-width: 860px) {
-  #appSettingsModal .modal-content.modal-lg {
+  :is(#appSettingsModal, #sessionOptionsModal, #createCaseModal) .modal-content.modal-lg {
     width: 100%;
     max-width: 100%;
     height: 100%;
     max-height: 100%;
   }
 
-  #appSettingsModal .set-body {
+  :is(#appSettingsModal, #sessionOptionsModal, #createCaseModal) .set-body {
     display: flex;
     flex-direction: column;
     min-height: 0;
   }
 
   /* Rail keeps only its search field, laid out as a bar */
-  #appSettingsModal .set-rail {
+  :is(#appSettingsModal, #sessionOptionsModal, #createCaseModal) .set-rail {
     flex-direction: row;
     align-items: center;
     border-right: 0;
@@ -3197,37 +3142,37 @@ html:is([data-skin="paper-gray"], [data-skin="solarized-light"], [data-skin="cat
     flex-shrink: 0;
   }
 
-  #appSettingsModal .set-rail-items,
-  #appSettingsModal .set-rail-foot {
+  :is(#appSettingsModal, #sessionOptionsModal, #createCaseModal) .set-rail-items,
+  :is(#appSettingsModal, #sessionOptionsModal, #createCaseModal) .set-rail-foot {
     display: none;
   }
 
-  #appSettingsModal .set-search {
+  :is(#appSettingsModal, #sessionOptionsModal, #createCaseModal) .set-search {
     margin: 0;
     flex: 1;
   }
 
-  #appSettingsModal .set-search input {
+  :is(#appSettingsModal, #sessionOptionsModal, #createCaseModal) .set-search input {
     padding: 9px 10px 9px 30px;
     border-radius: 10px;
   }
 
   /* Save moves into the header; the bottom action bar would cost 60px */
-  #appSettingsModal .set-head-save {
+  :is(#appSettingsModal, #sessionOptionsModal, #createCaseModal) .set-head-save {
     display: inline-flex;
   }
 
-  #appSettingsModal .set-foot {
+  :is(#appSettingsModal, #sessionOptionsModal, #createCaseModal) .set-foot {
     display: none;
   }
 
-  #appSettingsModal .set-doc {
+  :is(#appSettingsModal, #sessionOptionsModal, #createCaseModal) .set-doc {
     padding: 0 14px 34px;
     flex: 1;
   }
 
   /* ── jump control ──────────────────────────────────────────────────── */
-  #appSettingsModal .set-jump {
+  :is(#appSettingsModal, #sessionOptionsModal, #createCaseModal) .set-jump {
     display: flex;
     position: sticky;
     top: 0;
@@ -3248,30 +3193,30 @@ html:is([data-skin="paper-gray"], [data-skin="solarized-light"], [data-skin="cat
     cursor: pointer;
   }
 
-  #appSettingsModal .set-jump-ico {
+  :is(#appSettingsModal, #sessionOptionsModal, #createCaseModal) .set-jump-ico {
     color: var(--accent);
     flex-shrink: 0;
   }
 
-  #appSettingsModal .set-jump-label {
+  :is(#appSettingsModal, #sessionOptionsModal, #createCaseModal) .set-jump-label {
     font-weight: 580;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
   }
 
-  #appSettingsModal .set-jump-chev {
+  :is(#appSettingsModal, #sessionOptionsModal, #createCaseModal) .set-jump-chev {
     margin-left: auto;
     color: var(--text-muted);
     flex-shrink: 0;
     transition: transform 0.18s;
   }
 
-  #appSettingsModal .set-jump[aria-expanded='true'] .set-jump-chev {
+  :is(#appSettingsModal, #sessionOptionsModal, #createCaseModal) .set-jump[aria-expanded='true'] .set-jump-chev {
     transform: rotate(180deg);
   }
 
-  #appSettingsModal .set-jump-veil {
+  :is(#appSettingsModal, #sessionOptionsModal, #createCaseModal) .set-jump-veil {
     display: none;
     position: fixed;
     inset: 0;
@@ -3279,7 +3224,7 @@ html:is([data-skin="paper-gray"], [data-skin="solarized-light"], [data-skin="cat
     background: rgba(4, 8, 13, 0.62);
   }
 
-  #appSettingsModal .set-jump-menu {
+  :is(#appSettingsModal, #sessionOptionsModal, #createCaseModal) .set-jump-menu {
     display: none;
     position: absolute;
     left: 14px;
@@ -3301,7 +3246,7 @@ html:is([data-skin="paper-gray"], [data-skin="solarized-light"], [data-skin="cat
     display: block;
   }
 
-  #appSettingsModal .set-jump-row {
+  :is(#appSettingsModal, #sessionOptionsModal, #createCaseModal) .set-jump-row {
     display: flex;
     align-items: center;
     gap: 11px;
@@ -3316,43 +3261,43 @@ html:is([data-skin="paper-gray"], [data-skin="solarized-light"], [data-skin="cat
     text-align: left;
   }
 
-  #appSettingsModal .set-jump-row svg {
+  :is(#appSettingsModal, #sessionOptionsModal, #createCaseModal) .set-jump-row svg {
     color: var(--text-muted);
     flex-shrink: 0;
   }
 
-  #appSettingsModal .set-jump-row .set-jump-count {
+  :is(#appSettingsModal, #sessionOptionsModal, #createCaseModal) .set-jump-row .set-jump-count {
     margin-left: auto;
     font-size: 0.62rem;
     color: var(--text-muted);
   }
 
-  #appSettingsModal .set-jump-row.active {
+  :is(#appSettingsModal, #sessionOptionsModal, #createCaseModal) .set-jump-row.active {
     background: rgba(var(--accent-rgb), 0.14);
     color: var(--text);
     font-weight: 570;
   }
 
-  #appSettingsModal .set-jump-row.active svg {
+  :is(#appSettingsModal, #sessionOptionsModal, #createCaseModal) .set-jump-row.active svg {
     color: var(--accent);
   }
 
   /* ── sections step down: the jump pill already names the current one ── */
-  #appSettingsModal .set-section {
+  :is(#appSettingsModal, #sessionOptionsModal, #createCaseModal) .set-section {
     padding-top: 0;
   }
 
-  #appSettingsModal .set-section + .set-section {
+  :is(#appSettingsModal, #sessionOptionsModal, #createCaseModal) .set-section + .set-section {
     border-top: 0;
     margin-top: 0;
   }
 
-  #appSettingsModal .set-section-head {
+  :is(#appSettingsModal, #sessionOptionsModal, #createCaseModal) .set-section-head {
     gap: 7px;
     margin: 18px 0 2px;
   }
 
-  #appSettingsModal .set-section-head svg {
+  :is(#appSettingsModal, #sessionOptionsModal, #createCaseModal) .set-section-head svg {
     padding: 0;
     border: 0;
     background: none;
@@ -3361,7 +3306,7 @@ html:is([data-skin="paper-gray"], [data-skin="solarized-light"], [data-skin="cat
     height: 12px;
   }
 
-  #appSettingsModal .set-section-head h2 {
+  :is(#appSettingsModal, #sessionOptionsModal, #createCaseModal) .set-section-head h2 {
     font-size: 0.6rem;
     font-weight: 640;
     letter-spacing: 0.1em;
@@ -3369,36 +3314,45 @@ html:is([data-skin="paper-gray"], [data-skin="solarized-light"], [data-skin="cat
     color: var(--text-muted);
   }
 
-  #appSettingsModal .set-section-head::after {
+  :is(#appSettingsModal, #sessionOptionsModal, #createCaseModal) .set-section-head::after {
     content: '';
     flex: 1;
     height: 1px;
     background: linear-gradient(90deg, var(--border), transparent);
   }
 
-  #appSettingsModal .set-section-blurb {
+  :is(#appSettingsModal, #sessionOptionsModal, #createCaseModal) .set-section-blurb {
     display: none;
   }
 
+  /* ── live layout preview ───────────────────────────────────────────── */
+  :is(#appSettingsModal, #sessionOptionsModal, #createCaseModal) .set-preview {
+    margin-bottom: 12px;
+  }
+
+  :is(#appSettingsModal, #sessionOptionsModal, #createCaseModal) .set-preview-stage {
+    min-height: 62px;
+  }
+
   /* ── inset grouped list ────────────────────────────────────────────── */
-  #appSettingsModal .set-group {
+  :is(#appSettingsModal, #sessionOptionsModal, #createCaseModal) .set-group {
     margin-top: 14px;
   }
 
-  #appSettingsModal .set-group + .set-group {
+  :is(#appSettingsModal, #sessionOptionsModal, #createCaseModal) .set-group + .set-group {
     margin-top: 16px;
   }
 
-  #appSettingsModal .set-group-head {
+  :is(#appSettingsModal, #sessionOptionsModal, #createCaseModal) .set-group-head {
     margin-bottom: 7px;
     padding: 0 3px;
   }
 
-  #appSettingsModal .set-group-hint {
+  :is(#appSettingsModal, #sessionOptionsModal, #createCaseModal) .set-group-hint {
     padding: 0 3px;
   }
 
-  #appSettingsModal .set-group-body {
+  :is(#appSettingsModal, #sessionOptionsModal, #createCaseModal) .set-group-body {
     gap: 0;
     background: rgba(255, 255, 255, 0.035);
     border: 1px solid rgba(255, 255, 255, 0.06);
@@ -3406,7 +3360,7 @@ html:is([data-skin="paper-gray"], [data-skin="solarized-light"], [data-skin="cat
     overflow: hidden;
   }
 
-  #appSettingsModal .set-group-body > .set-row {
+  :is(#appSettingsModal, #sessionOptionsModal, #createCaseModal) .set-group-body > .set-row {
     background: transparent;
     border: 0;
     border-radius: 0;
@@ -3414,104 +3368,147 @@ html:is([data-skin="paper-gray"], [data-skin="solarized-light"], [data-skin="cat
     gap: 12px;
   }
 
-  #appSettingsModal .set-group-body > .set-row + .set-row {
+  :is(#appSettingsModal, #sessionOptionsModal, #createCaseModal) .set-group-body > .set-row + .set-row {
     border-top: 1px solid rgba(255, 255, 255, 0.055);
   }
 
-  #appSettingsModal .set-group-body > .set-chips,
-  #appSettingsModal .set-group-body > .set-modelgrid,
-  #appSettingsModal .set-group-body > .set-minigrid,
-  #appSettingsModal .set-group-body > #appSettingsShortcutsList {
+  :is(#appSettingsModal, #sessionOptionsModal, #createCaseModal) .set-group-body > .set-chips,
+  :is(#appSettingsModal, #sessionOptionsModal, #createCaseModal) .set-group-body > .set-modelgrid,
+  :is(#appSettingsModal, #sessionOptionsModal, #createCaseModal) .set-group-body > .set-minigrid,
+  :is(#appSettingsModal, #sessionOptionsModal, #createCaseModal) .set-group-body > #appSettingsShortcutsList {
     padding: 12px;
   }
 
-  #appSettingsModal .set-group-body > .event-type-grid {
+  :is(#appSettingsModal, #sessionOptionsModal, #createCaseModal) .set-group-body > .event-type-grid {
     padding: 12px;
     margin: 0;
   }
 
-  #appSettingsModal .set-row-label {
+  :is(#appSettingsModal, #sessionOptionsModal, #createCaseModal) .set-row-label {
     font-size: 0.84rem;
   }
 
-  #appSettingsModal .set-row-desc {
+  :is(#appSettingsModal, #sessionOptionsModal, #createCaseModal) .set-row-desc {
     font-size: 0.69rem;
     max-width: none;
   }
 
   /* Fields go full width under their label instead of fighting for the row */
-  #appSettingsModal .set-row.has-field {
+  :is(#appSettingsModal, #sessionOptionsModal, #createCaseModal) .set-row.has-field {
     flex-direction: column;
     align-items: stretch;
     gap: 9px;
   }
 
-  #appSettingsModal .set-row.has-field .set-select,
-  #appSettingsModal .set-row.has-field .set-input {
+  :is(#appSettingsModal, #sessionOptionsModal, #createCaseModal) .set-row.has-field .set-select,
+  :is(#appSettingsModal, #sessionOptionsModal, #createCaseModal) .set-row.has-field .set-input {
     width: 100%;
     min-width: 0;
     max-width: none;
     box-sizing: border-box;
   }
 
-  #appSettingsModal .set-row-actions-wide {
+  :is(#appSettingsModal, #sessionOptionsModal, #createCaseModal) .set-row-actions-wide {
     width: 100%;
   }
 
-  #appSettingsModal .set-row-actions-wide .set-input {
+  :is(#appSettingsModal, #sessionOptionsModal, #createCaseModal) .set-row-actions-wide .set-input {
     flex: 1;
     min-width: 0;
   }
 
-  #appSettingsModal .set-num {
+  :is(#appSettingsModal, #sessionOptionsModal, #createCaseModal) .set-num {
     width: 76px;
   }
 
   /* Bigger touch targets for the toggles and chips */
-  #appSettingsModal .switch-sm {
+  :is(#appSettingsModal, #sessionOptionsModal, #createCaseModal) .switch-sm {
     width: 40px;
     height: 24px;
   }
 
-  #appSettingsModal .switch-sm .slider:before {
+  :is(#appSettingsModal, #sessionOptionsModal, #createCaseModal) .switch-sm .slider:before {
     height: 18px;
     width: 18px;
   }
 
-  #appSettingsModal .switch-sm input:checked + .slider:before {
+  :is(#appSettingsModal, #sessionOptionsModal, #createCaseModal) .switch-sm input:checked + .slider:before {
     transform: translateX(16px);
   }
 
-  #appSettingsModal .set-chip {
+  :is(#appSettingsModal, #sessionOptionsModal, #createCaseModal) .set-chip {
     font-size: 0.78rem;
     padding: 9px 14px;
   }
 
-  #appSettingsModal .set-modelgrid {
+  :is(#appSettingsModal, #sessionOptionsModal, #createCaseModal) .set-modelgrid {
     grid-template-columns: repeat(2, minmax(0, 1fr));
     gap: 8px;
   }
 
-  #appSettingsModal .set-minigrid {
+  :is(#appSettingsModal, #sessionOptionsModal, #createCaseModal) .set-minigrid {
     grid-template-columns: 1fr;
   }
 
-  #appSettingsModal .set-mini .set-select {
+  :is(#appSettingsModal, #sessionOptionsModal, #createCaseModal) .set-mini .set-select {
     width: 148px;
   }
 
   /* One scrollable line beats a ragged two-row wrap for 7 effort levels */
-  #appSettingsModal .set-segment {
+  :is(#appSettingsModal, #sessionOptionsModal, #createCaseModal) .set-segment {
     overflow-x: auto;
     scrollbar-width: none;
   }
 
-  #appSettingsModal .set-segment::-webkit-scrollbar {
+  :is(#appSettingsModal, #sessionOptionsModal, #createCaseModal) .set-segment::-webkit-scrollbar {
     display: none;
   }
 
-  #appSettingsModal .set-segment button {
+  :is(#appSettingsModal, #sessionOptionsModal, #createCaseModal) .set-segment button {
     flex: 0 0 auto;
     padding: 8px 12px;
   }
 }
+
+/* ============================================================================
+   Session Options, compact layout (<= 860px)
+
+   App Settings collapses its rail and hands navigation to the sticky
+   #appSettingsJump pill. Session Options has no such pill (and no search), so
+   its rail stays put and becomes a horizontal, scrollable strip — which is
+   what its tab bar was before the two modals started sharing a surface.
+   ============================================================================ */
+@media (max-width: 860px) {
+  :is(#sessionOptionsModal, #createCaseModal) .set-rail {
+    padding: 8px 10px;
+  }
+
+  :is(#sessionOptionsModal, #createCaseModal) .set-rail-items {
+    display: flex;
+    flex-direction: row;
+    flex: 1;
+    min-width: 0;
+    gap: 4px;
+    overflow-x: auto;
+    scrollbar-width: none;
+  }
+
+  :is(#sessionOptionsModal, #createCaseModal) .set-rail-items::-webkit-scrollbar {
+    display: none;
+  }
+
+  :is(#sessionOptionsModal, #createCaseModal) .set-rail-item {
+    white-space: nowrap;
+    padding: 8px 12px;
+  }
+
+  /* The active marker is a left bar in the vertical rail; horizontally that
+     reads as a stray tick, so the strip uses a filled pill instead. */
+  :is(#sessionOptionsModal, #createCaseModal) .set-rail-item.active::before {
+    display: none;
+  }
+
+  :is(#sessionOptionsModal, #createCaseModal) .set-rail-item.active {
+    background: rgba(var(--accent-rgb), 0.13);
+  }
+}

src/web/public/session-ui.js

@@ -489,7 +489,11 @@ Object.assign(CodemanApp.prototype, {
         const date = new Date(s.lastModified);
         const timeStr = date.toLocaleDateString('en', { month: 'short', day: 'numeric' })
           + ' ' + date.toLocaleTimeString('en', { hour: '2-digit', minute: '2-digit', hour12: false });
-        const shortDir = s.workingDir.replace(/^\/home\/[^/]+\//, '~/');
+        // Shared helper, not a local regex: the copy that used to live here
+        // matched `/home/<user>/` only, so on macOS every row rendered the same
+        // unabbreviated `/Users/<user>/…` prefix and ellipsized away the tail
+        // that identifies it (#273).
+        const shortDir = this._shortenHomePath(s.workingDir);
 
         const btn = document.createElement('button');
         btn.className = 'run-mode-option';
@@ -1278,8 +1282,8 @@ Object.assign(CodemanApp.prototype, {
     document.getElementById('presetDescriptionHint').textContent = '';
 
     // Hide Ralph/Todo tab and Respawn tab for external CLI sessions (not supported)
-    const ralphTabBtn = document.querySelector('#sessionOptionsModal .modal-tab-btn[data-tab="ralph"]');
-    const respawnTabBtn = document.querySelector('#sessionOptionsModal .modal-tab-btn[data-tab="respawn"]');
+    const ralphTabBtn = document.querySelector('#sessionOptionsModal .set-rail-item[data-tab="ralph"]');
+    const respawnTabBtn = document.querySelector('#sessionOptionsModal .set-rail-item[data-tab="respawn"]');
     if (isExternalCli) {
       if (ralphTabBtn) ralphTabBtn.style.display = 'none';
       if (respawnTabBtn) respawnTabBtn.style.display = 'none';
@@ -1303,6 +1307,18 @@ Object.assign(CodemanApp.prototype, {
     }
 
     const modal = document.getElementById('sessionOptionsModal');
+
+    // Chips mirror their checkbox onto the label, the same way App Settings does
+    // (settings-ui.js: _syncSettingsChips). Registered once per page, never per
+    // open, or a long-lived tab accumulates one listener per visit.
+    if (modal.dataset.chipsReady !== '1') {
+      modal.dataset.chipsReady = '1';
+      modal.addEventListener('change', e => {
+        if (e.target?.closest?.('.set-chip')) this._syncSettingsChips();
+      });
+    }
+    this._syncSettingsChips();
+
     modal.classList.add('active');
 
     // Activate focus trap
@@ -1500,18 +1516,32 @@ Object.assign(CodemanApp.prototype, {
   // Session Options Modal Tabs
   // ═══════════════════════════════════════════════════════════════
 
+  /**
+   * Show one section of the Session Options modal.
+   *
+   * The chrome is the shared `set-*` settings surface, but unlike App Settings
+   * (whose rail is a table of contents over one scrolling document) this rail
+   * is a real switcher: exactly one `.set-section` is visible and the rest
+   * carry `.hidden`. Summary owns its own scroller and Respawn is long, so
+   * stacking them into a single document would bury both.
+   */
   switchOptionsTab(tabName) {
-    // Toggle active class on tab buttons
-    document.querySelectorAll('#sessionOptionsModal .modal-tab-btn').forEach(btn => {
+    // Toggle active class on rail entries
+    document.querySelectorAll('#sessionOptionsModal .set-rail-item').forEach(btn => {
       btn.classList.toggle('active', btn.dataset.tab === tabName);
     });
 
-    // Toggle hidden class on tab content
+    // Toggle hidden class on the sections
     document.getElementById('respawn-tab').classList.toggle('hidden', tabName !== 'respawn');
     document.getElementById('context-tab').classList.toggle('hidden', tabName !== 'context');
     document.getElementById('ralph-tab').classList.toggle('hidden', tabName !== 'ralph');
     document.getElementById('summary-tab').classList.toggle('hidden', tabName !== 'summary');
 
+    // A switched-to section starts at its own top, not at the scroll offset the
+    // previous one was left at.
+    const doc = document.getElementById('sessionOptionsDoc');
+    if (doc) doc.scrollTop = 0;
+
     // Load run summary data when switching to summary tab
     if (tabName === 'summary' && this.editingSessionId) {
       this.loadRunSummary(this.editingSessionId);
@@ -1782,7 +1812,7 @@ Object.assign(CodemanApp.prototype, {
     this.switchCaseModalTab('case-create');
     // Wire up tab buttons
     const modal = document.getElementById('createCaseModal');
-    modal.querySelectorAll('.modal-tabs .modal-tab-btn').forEach(btn => {
+    modal.querySelectorAll('.set-rail-item').forEach(btn => {
       btn.onclick = () => this.switchCaseModalTab(btn.dataset.tab);
     });
     // Scroll-into-view on focus for mobile keyboard visibility
@@ -1803,14 +1833,17 @@ Object.assign(CodemanApp.prototype, {
   switchCaseModalTab(tabName) {
     this.caseModalTab = tabName;
     const modal = document.getElementById('createCaseModal');
-    // Toggle active class on tab buttons
-    modal.querySelectorAll('.modal-tabs .modal-tab-btn').forEach(btn => {
+    // Toggle active class on rail entries
+    modal.querySelectorAll('.set-rail-item').forEach(btn => {
       btn.classList.toggle('active', btn.dataset.tab === tabName);
     });
-    // Toggle hidden class on tab content
-    modal.querySelectorAll('.modal-tab-content').forEach(content => {
+    // Toggle hidden class on the panels
+    modal.querySelectorAll('.set-section').forEach(content => {
       content.classList.toggle('hidden', content.id !== tabName);
     });
+    // A switched-to panel starts at its own top.
+    const doc = document.getElementById('createCaseDoc');
+    if (doc) doc.scrollTop = 0;
     // Update submit button (hide for manage tab)
     const submitBtn = document.getElementById('caseModalSubmit');
     if (tabName === 'case-manage') {
@@ -2676,7 +2709,9 @@ Object.assign(CodemanApp.prototype, {
     cases.forEach((c, idx) => {
       const isFirst = idx === 0;
       const isLast = idx === cases.length - 1;
-      const pathDisplay = c.path ? c.path.replace(/^\/Users\/[^/]+/, '~') : '';
+      // Was `/Users/<user>` only, the mirror image of the Run menu's bug: every
+      // case path on a Linux host rendered in full, unabbreviated.
+      const pathDisplay = c.path ? this._shortenHomePath(c.path) : '';
       html += `
         <div class="case-manage-item" data-case="${escapeHtml(c.name)}">
           <div class="case-manage-info">

src/web/public/settings-ui.js

@@ -482,17 +482,18 @@ Object.assign(CodemanApp.prototype, {
     const voiceCfg = VoiceInput._getDeepgramConfig();
     document.getElementById('voiceDeepgramKey').value = voiceCfg.apiKey || '';
     document.getElementById('voiceLanguage').value = voiceCfg.language || 'en-US';
-    document.getElementById('voiceKeyterms').value = voiceCfg.keyterms || 'refactor, endpoint, middleware, callback, async, regex, TypeScript, npm, API, deploy, config, linter, env, webhook, schema, CLI, JSON, CSS, DOM, SSE, backend, frontend, localhost, dependencies, repository, merge, rebase, diff, commit, com';
+    document.getElementById('voiceKeyterms').value = voiceCfg.keyterms || DEFAULT_VOICE_KEYTERMS;
     document.getElementById('voiceInsertMode').value = voiceCfg.insertMode || 'direct';
+    document.getElementById('voiceProvider').value = voiceCfg.provider || 'auto';
+    document.getElementById('appSettingsClaudeVoice').checked = settings.claudeVoiceEnabled ?? false;
     // Reset key visibility to hidden
     const keyInput = document.getElementById('voiceDeepgramKey');
     keyInput.type = 'password';
     document.getElementById('voiceKeyToggleBtn').textContent = 'Show';
-    // Update provider status
-    const providerName = VoiceInput.getActiveProviderName();
-    const providerEl = document.getElementById('voiceProviderStatus');
-    providerEl.textContent = providerName;
-    providerEl.className = 'voice-provider-status' + (providerName.startsWith('Deepgram') ? ' active' : '');
+    // Update provider status. The Claude row needs a fresh server probe: the
+    // setting is synced, so another device may have flipped it since page load.
+    this._renderVoiceProviderStatus();
+    VoiceInput.refreshClaudeStatus().then(() => this._renderVoiceProviderStatus());
 
     // Updates section — show current version, reset transient result/progress UI.
     this._initUpdatesSection();
@@ -503,8 +504,11 @@ Object.assign(CodemanApp.prototype, {
     this._syncSettingsChips();
     this._syncModelCards();
     this._syncEffortSegment();
-    // Back to the top of the document (one scroll, not a tab reset).
-    this.switchSettingsTab('settings-terminal');
+    // Back to the top of the document (one scroll, not a tab reset). Updates is
+    // first now: the version this install is running, and whether a newer one is
+    // waiting, are the two things worth seeing before any preference. The rest of
+    // the system settings (paths, automation, remote access) tail the document.
+    this.switchSettingsTab('settings-updates');
     const modal = document.getElementById('appSettingsModal');
     modal.classList.add('active');
 
@@ -687,11 +691,89 @@ Object.assign(CodemanApp.prototype, {
     document.getElementById('appSettingsJump')?.setAttribute('aria-expanded', open ? 'true' : 'false');
   },
 
-  /** Mirror checkbox state onto the chip labels (see _initSettingsNav). */
+  /**
+   * Mirror checkbox state onto the chip labels (see _initSettingsNav).
+   *
+   * Covers Session Options too: it shares the `set-*` surface, and its cycle-step
+   * chips would otherwise depend on `:has()` alone for their checked styling.
+   */
   _syncSettingsChips() {
-    document.querySelectorAll('#appSettingsModal .set-chip').forEach(chip => {
+    document.querySelectorAll('#appSettingsModal .set-chip, #sessionOptionsModal .set-chip').forEach(chip => {
       chip.classList.toggle('is-on', !!chip.querySelector('input')?.checked);
     });
+    this._syncLayoutPreview();
+  },
+
+  /**
+   * Redraw the Header & Panels live preview from the chips above it.
+   *
+   * The preview is a scale model of the app, not a second list of settings, so
+   * every icon is CLONED from the chip that owns it (`.set-chip-ico`): each icon
+   * has exactly ONE copy in index.html and a chip can never drift from the button
+   * it previews. A chip joins the preview purely by carrying `data-preview`
+   * (which slot) and `data-preview-order` (where in that slot); nothing here
+   * needs to know the setting's name.
+   *
+   * `data-preview-text` replaces the icon with a text token for the header
+   * entries that are readouts rather than buttons (plan usage, CPU, font size).
+   */
+  _syncLayoutPreview() {
+    const modal = document.getElementById('appSettingsModal');
+    if (!modal || typeof modal.querySelectorAll !== 'function') return;
+    const slots = {
+      header: document.getElementById('appSettingsPreviewHeader'),
+      panel: document.getElementById('appSettingsPreviewPanels'),
+      toolbar: document.getElementById('appSettingsPreviewToolbar'),
+      float: document.getElementById('appSettingsPreviewFloats'),
+    };
+    if (!slots.header) return;
+    Object.values(slots).forEach(el => {
+      if (el) el.innerHTML = '';
+    });
+
+    const chips = [...modal.querySelectorAll('.set-chip[data-preview]')]
+      .filter(chip => chip.querySelector('input')?.checked)
+      .sort((a, b) => (Number(a.dataset.previewOrder) || 0) - (Number(b.dataset.previewOrder) || 0));
+
+    let shown = 0;
+    for (const chip of chips) {
+      const kind = chip.dataset.preview;
+      const slot = slots[kind];
+      if (!slot) continue;
+      // The label is the chip's own text; the icon span (if any) is skipped by
+      // taking the LAST span, which is always the label.
+      const spans = chip.querySelectorAll('span');
+      const label = (spans[spans.length - 1]?.textContent || '').trim();
+      const el = document.createElement('span');
+      el.title = label;
+      if (kind === 'header') {
+        const text = chip.dataset.previewText;
+        el.className = text ? 'set-preview-chip' : 'set-preview-btn';
+        if (text) el.textContent = text;
+        else this._appendPreviewIcon(el, chip);
+      } else {
+        el.className = `set-preview-${kind}`;
+        this._appendPreviewIcon(el, chip);
+        const name = document.createElement('span');
+        name.textContent = label;
+        el.appendChild(name);
+      }
+      slot.appendChild(el);
+      shown++;
+    }
+
+    const empty = document.getElementById('appSettingsPreviewEmpty');
+    if (empty) empty.hidden = shown > 0;
+  },
+
+  /** Clone a chip's icon into a preview element (see _syncLayoutPreview). */
+  _appendPreviewIcon(target, chip) {
+    const icon = chip.querySelector('.set-chip-ico');
+    if (!icon) return;
+    const clone = icon.cloneNode(true);
+    clone.classList.remove('set-chip-ico');
+    clone.classList.add('set-preview-ico');
+    target.appendChild(clone);
   },
 
   /**
@@ -860,6 +942,10 @@ Object.assign(CodemanApp.prototype, {
       section.classList.toggle('set-hit-hidden', !!q && !hasVisible);
     });
 
+    // The live preview sits outside any group, so it survives the sweep above;
+    // a search is asking for one row, not for the scale model around it.
+    doc.querySelectorAll('.set-preview').forEach(pv => pv.classList.toggle('set-hit-hidden', !!q));
+
     const empty = document.getElementById('appSettingsSearchEmpty');
     if (empty) empty.hidden = !q || anyVisible;
     if (!q) doc.querySelectorAll('.set-group-advanced').forEach(g => g.classList.remove('open'));
@@ -1830,6 +1916,37 @@ Object.assign(CodemanApp.prototype, {
     }
   },
 
+  /**
+   * Paint both Voice status rows: which provider a mic press would use, and what
+   * the server reports about its Claude login. Called on open and again once the
+   * /api/voice/status probe resolves.
+   */
+  _renderVoiceProviderStatus() {
+    const providerEl = document.getElementById('voiceProviderStatus');
+    if (providerEl) {
+      const providerName = VoiceInput.getActiveProviderName();
+      providerEl.textContent = providerName;
+      const live = providerName.startsWith('Deepgram Nova') || providerName.startsWith('Claude (this');
+      providerEl.className = 'voice-provider-status' + (live ? ' active' : '');
+    }
+    const claudeEl = document.getElementById('voiceClaudeStatus');
+    if (!claudeEl) return;
+    const status = VoiceInput._claudeStatus;
+    const text = !status
+      ? 'Checking...'
+      : status.available
+        ? `Ready${status.subscriptionType ? ` (${status.subscriptionType})` : ''}`
+        : status.reason === 'expired'
+          ? 'Login expired - run a Claude session to refresh'
+          : status.reason === 'no-credentials'
+            ? 'No Claude Code login on the server'
+            : status.reason === 'malformed'
+              ? 'Claude credentials unreadable'
+              : 'Off - enable it above';
+    claudeEl.textContent = text;
+    claudeEl.className = 'voice-provider-status' + (status?.available ? ' active' : '');
+  },
+
   async saveAppSettings() {
     // Gesture overlay is injected at page render (server-side), so a change to it
     // only takes effect on reload — remember the prior value to decide below.
@@ -1892,6 +2009,7 @@ Object.assign(CodemanApp.prototype, {
       // Claude Permissions settings
       agentTeamsEnabled: document.getElementById('appSettingsAgentTeams').checked,
       agentSkillEnabled: document.getElementById('appSettingsAgentSkill').checked,
+      claudeVoiceEnabled: document.getElementById('appSettingsClaudeVoice').checked,
       claudeModel: document.getElementById('appSettingsClaudeModel').value,
       opusContext1mEnabled: document.getElementById('appSettingsOpusContext1m').checked,
       remoteAutoReconnect: document.getElementById('appSettingsRemoteAutoReconnect').checked,
@@ -1931,6 +2049,7 @@ Object.assign(CodemanApp.prototype, {
 
     // Save voice settings to localStorage + include in server payload for cross-device sync
     const voiceSettings = {
+      provider: document.getElementById('voiceProvider').value,
       apiKey: document.getElementById('voiceDeepgramKey').value.trim(),
       language: document.getElementById('voiceLanguage').value,
       keyterms: document.getElementById('voiceKeyterms').value.trim(),
@@ -2110,6 +2229,10 @@ Object.assign(CodemanApp.prototype, {
 
     this.closeAppSettings();
 
+    // Voice availability is a server-side answer, so re-probe after a save:
+    // otherwise the mic keeps using the pre-save provider until the next reload.
+    VoiceInput.refreshClaudeStatus();
+
     // The gesture overlay is injected at page render (server reads
     // gestureControlEnabled from settings.json), so a change only takes effect on
     // reload. Reload when it actually changed — the server PUT above already

src/web/public/terminal-ui.js

@@ -1610,11 +1610,21 @@ Object.assign(CodemanApp.prototype, {
     return workingDir.split('/').pop() || workingDir;
   },
 
-  /** Normalize home prefixes to "~/" on both Linux and macOS */
+  /**
+   * Normalize a home prefix to "~" on both Linux (`/home/<user>`) and macOS
+   * (`/Users/<user>`). The lookahead lets the home directory ITSELF match, so a
+   * path that is exactly `$HOME` renders "~" instead of being left raw.
+   *
+   * This is the only place that pattern belongs. Two hand-rolled copies had
+   * drifted, each broken on the platform its author was not using: the Run
+   * menu's matched `/home/` only, so on macOS nothing was stripped and every
+   * Recent Sessions row spent its first ~19 characters on an identical
+   * `/Users/<user>/` prefix (#273); the case-manage list's matched `/Users/`
+   * only, so no Linux path was ever abbreviated there. Route new path labels
+   * through here rather than writing a third copy.
+   */
   _shortenHomePath(p) {
-    return (p || '')
-      .replace(/^\/home\/[^/]+\//, '~/')
-      .replace(/^\/Users\/[^/]+\//, '~/');
+    return (p || '').replace(/^\/(?:home|Users)\/[^/]+(?=\/|$)/, '~');
   },
 
   /**

src/web/public/voice-input.js

@@ -1,7 +1,13 @@
 /**
- * @fileoverview Voice input with Deepgram Nova-3 (primary) and Web Speech API (fallback).
+ * @fileoverview Voice input with three providers: Claude (this server's Claude Code
+ * login), Deepgram Nova-3, and the Web Speech API.
  *
- * Defines two singleton objects:
+ * Defines three singleton objects:
+ *
+ * - ClaudeVoiceProvider — Dictation through Codeman's own `/ws/voice/stream`, which
+ *   relays to the speech-to-text service Claude Code's `/voice` mode uses. No API key:
+ *   the server holds the OAuth token, the browser only sends PCM16 @16 kHz (AudioWorklet,
+ *   since MediaRecorder cannot emit raw PCM) and receives text. See docs/claude-voice-plan.md.
  *
  * - DeepgramProvider — Direct browser-to-Deepgram WebSocket connection for speech-to-text.
  *   Captures audio via MediaRecorder, streams chunks every 250ms, handles KeepAlive pings,
@@ -14,6 +20,7 @@
  *   Includes a temporary green Send button that replaces the settings gear icon after voice input.
  *   Web Speech API has auto-retry (up to 2x) for premature onend and iOS Safari stability check.
  *
+ * @globals {object} ClaudeVoiceProvider
  * @globals {object} DeepgramProvider
  * @globals {object} VoiceInput
  *
@@ -22,9 +29,13 @@
  * @loadorder 3 of 15 — loaded after mobile-handlers.js, before notification-manager.js
  */
 
-// Codeman — Voice input with Deepgram Nova-3 and Web Speech API fallback
+// Codeman — Voice input with Claude, Deepgram Nova-3 and Web Speech API
 // Loaded after mobile-handlers.js, before app.js
 
+/** Dev vocabulary sent to the recognizer as a hint. Shared by every provider and the settings form. */
+const DEFAULT_VOICE_KEYTERMS =
+  'refactor, endpoint, middleware, callback, async, regex, TypeScript, npm, API, deploy, config, linter, env, webhook, schema, CLI, JSON, CSS, DOM, SSE, backend, frontend, localhost, dependencies, repository, merge, rebase, diff, commit, com';
+
 // ═══════════════════════════════════════════════════════════════
 // Voice Input (Deepgram Nova-3 + Web Speech API fallback)
 // ═══════════════════════════════════════════════════════════════
@@ -245,7 +256,282 @@ const DeepgramProvider = {
 };
 
 /**
- * VoiceInput - Speech-to-text with Deepgram Nova-3 (primary) and Web Speech API (fallback).
+ * ClaudeVoiceProvider - Speech-to-text through this Codeman server's Claude Code
+ * login, i.e. the same service the CLI's own `/voice` mode uses. No API key.
+ *
+ * Audio goes browser -> Codeman -> Anthropic: the OAuth token never leaves the
+ * server, so the browser only ever sends PCM and receives text
+ * (docs/claude-voice-plan.md).
+ *
+ * ⚠️ The upstream endpoint is opened as linear16 / 16 kHz / mono, so capture MUST
+ * be raw PCM at that rate. MediaRecorder cannot emit raw PCM (container formats
+ * only), which is why this path uses an AudioWorklet rather than reusing
+ * DeepgramProvider's recorder. The AudioContext is constructed at 16000 Hz so the
+ * browser does the resampling.
+ *
+ * ⚠️ Transcript frames carry the WHOLE running transcript, not deltas. Callers
+ * must replace, never concatenate.
+ */
+const ClaudeVoiceProvider = {
+  _ws: null,
+  _stream: null,
+  _audioContext: null,
+  _workletNode: null,
+  _sourceNode: null,
+  _scriptNode: null,
+  _silenceTimeout: null,
+  _onResult: null,
+  _onError: null,
+  _onEnd: null,
+  _finalized: false,
+
+  /** How long without any transcript before the recording gives up on its own. */
+  SILENCE_MS: 6000,
+
+  /**
+   * Start streaming.
+   * @param {object} opts - { language, keyterms[], onResult(text, isFinal), onError(msg), onEnd(), onStream(stream) }
+   */
+  async start(opts) {
+    this._onResult = opts.onResult;
+    this._onError = opts.onError;
+    this._onEnd = opts.onEnd;
+    this._finalized = false;
+
+    if (!navigator.mediaDevices?.getUserMedia) {
+      this._onError?.('Microphone requires a secure context (HTTPS). Use --https flag or access via localhost.');
+      this._cleanup();
+      return;
+    }
+    try {
+      this._stream = await navigator.mediaDevices.getUserMedia({
+        audio: { noiseSuppression: true, echoCancellation: true, autoGainControl: true }
+      });
+    } catch (err) {
+      const msg = err.name === 'NotAllowedError'
+        ? 'Microphone access denied. Check browser settings.'
+        : 'Microphone error: ' + err.message;
+      this._onError?.(msg);
+      this._cleanup();
+      return;
+    }
+    opts.onStream?.(this._stream);
+
+    const params = new URLSearchParams();
+    if (opts.language) params.set('language', opts.language);
+    if (opts.keyterms?.length) params.set('keyterms', opts.keyterms.join(','));
+    const proto = location.protocol === 'https:' ? 'wss:' : 'ws:';
+    try {
+      this._ws = new WebSocket(`${proto}//${location.host}/ws/voice/stream?${params}`);
+    } catch (err) {
+      this._onError?.('Failed to open voice stream: ' + err.message);
+      this._cleanup();
+      return;
+    }
+    this._ws.binaryType = 'arraybuffer';
+
+    this._ws.onopen = () => {
+      // Capture starts only once the socket is up: PCM buffered before that would
+      // be the oldest audio, and dropping it keeps the transcript aligned with what
+      // the user hears themselves saying.
+      this._startCapture().catch((err) => {
+        this._onError?.('Microphone capture failed: ' + err.message);
+        this.stop();
+      });
+      this._resetSilenceTimeout();
+    };
+
+    this._ws.onmessage = (event) => {
+      let msg;
+      try {
+        msg = JSON.parse(event.data);
+      } catch (_e) {
+        return;
+      }
+      if (msg.t === 'transcript' && msg.text) {
+        this._resetSilenceTimeout();
+        this._onResult?.(msg.text, msg.final === true);
+      } else if (msg.t === 'error') {
+        this._onError?.(msg.message || 'Voice transcription failed');
+      }
+    };
+
+    this._ws.onerror = () => {
+      // onclose carries the actionable detail (close code); nothing useful here.
+    };
+
+    this._ws.onclose = (event) => {
+      if (event.code === 4004) {
+        this._onError?.(this._unavailableMessage(event.reason));
+      } else if (event.code === 4008) {
+        this._onError?.('Too many voice streams are already running on this server.');
+      } else if (event.code === 4003) {
+        this._onError?.('Voice stream refused (origin not allowed).');
+      } else if (event.code !== 1000 && !this._finalized) {
+        this._onError?.('Voice stream closed: ' + (event.reason || `code ${event.code}`));
+      }
+      this._stopCapture();
+      const onEnd = this._onEnd;
+      this._onEnd = null;
+      onEnd?.();
+    };
+  },
+
+  /** Map the server's close reason onto something a user can act on. */
+  _unavailableMessage(reason) {
+    if (reason === 'expired') return 'Claude login expired. Run a Claude session to refresh it, then try again.';
+    if (reason === 'disabled') return 'Claude voice is off. Enable it in Settings > Voice.';
+    return 'No Claude Code login found on the server. Sign in with `claude` there, or use Deepgram.';
+  },
+
+  /** Wire mic -> 16 kHz PCM16 frames -> WebSocket. */
+  async _startCapture() {
+    const Ctx = window.AudioContext || window.webkitAudioContext;
+    // Ask for 16 kHz directly so the browser resamples; Safari may hand back its
+    // own rate, which _pcmFromFloat32 then downsamples to match.
+    this._audioContext = new Ctx({ sampleRate: 16000 });
+    if (this._audioContext.state === 'suspended') await this._audioContext.resume();
+    this._sourceNode = this._audioContext.createMediaStreamSource(this._stream);
+
+    if (this._audioContext.audioWorklet) {
+      await this._audioContext.audioWorklet.addModule(this._workletUrl());
+      this._workletNode = new AudioWorkletNode(this._audioContext, 'pcm-frame-processor');
+      this._workletNode.port.onmessage = (event) => this._sendAudio(event.data);
+      this._sourceNode.connect(this._workletNode);
+      // A worklet with no destination is not pulled in some engines; a zero-gain
+      // sink keeps the graph running without echoing the mic to the speakers.
+      const sink = this._audioContext.createGain();
+      sink.gain.value = 0;
+      this._workletNode.connect(sink).connect(this._audioContext.destination);
+      return;
+    }
+
+    // Fallback for engines without AudioWorklet (older Safari): deprecated, but
+    // it is this or no dictation at all there.
+    this._scriptNode = this._audioContext.createScriptProcessor(4096, 1, 1);
+    this._scriptNode.onaudioprocess = (event) => {
+      this._sendAudio(this._pcmFromFloat32(event.inputBuffer.getChannelData(0), this._audioContext.sampleRate));
+    };
+    this._sourceNode.connect(this._scriptNode);
+    this._scriptNode.connect(this._audioContext.destination);
+  },
+
+  /**
+   * Worklet URL carrying this page's cache-bust token.
+   *
+   * ⚠️ Static assets are served `immutable` for a year, and `cacheBustAssets`
+   * only rewrites `.js` refs in `<script>`/`<link>` tags — a URL built here in JS
+   * is invisible to it. So the token is borrowed from voice-input.js's own script
+   * tag, which the server DID rewrite. Consequence: **edit the worklet and this
+   * file together**, or the browser keeps serving the old worklet.
+   */
+  _workletUrl() {
+    const src = document.querySelector('script[src*="voice-input.js"]')?.getAttribute('src') || '';
+    const q = src.indexOf('?');
+    return 'voice-pcm-worklet.js' + (q === -1 ? '' : src.slice(q));
+  },
+
+  /** Float32 [-1,1] at any rate -> Int16 PCM at 16 kHz (nearest-neighbour decimation). */
+  _pcmFromFloat32(input, sampleRate) {
+    const ratio = sampleRate / 16000;
+    const outLength = Math.floor(input.length / ratio);
+    const out = new Int16Array(outLength);
+    for (let i = 0; i < outLength; i++) {
+      const sample = Math.max(-1, Math.min(1, input[Math.floor(i * ratio)]));
+      out[i] = sample < 0 ? sample * 0x8000 : sample * 0x7fff;
+    }
+    return out.buffer;
+  },
+
+  _sendAudio(arrayBuffer) {
+    if (this._finalized) return;
+    if (this._ws?.readyState !== WebSocket.OPEN) return;
+    try {
+      this._ws.send(arrayBuffer);
+    } catch (_e) {
+      /* socket died mid-frame */
+    }
+  },
+
+  _resetSilenceTimeout() {
+    clearTimeout(this._silenceTimeout);
+    this._silenceTimeout = setTimeout(() => this.stop(), this.SILENCE_MS);
+  },
+
+  /**
+   * Ask for the final transcript and let the server close the socket. Capture stops
+   * immediately, but the WebSocket stays open: the last (and usually best) transcript
+   * arrives AFTER the audio does, so closing here would throw away the utterance.
+   */
+  stop() {
+    clearTimeout(this._silenceTimeout);
+    this._silenceTimeout = null;
+    if (this._finalized) return;
+    this._finalized = true;
+    this._stopCapture();
+    if (this._ws?.readyState === WebSocket.OPEN) {
+      try {
+        this._ws.send(JSON.stringify({ t: 'finalize' }));
+      } catch (_e) {
+        /* ignore */
+      }
+    } else {
+      const onEnd = this._onEnd;
+      this._onEnd = null;
+      onEnd?.();
+    }
+  },
+
+  /** Tear down the audio graph and release the mic. Idempotent. */
+  _stopCapture() {
+    if (this._workletNode) {
+      this._workletNode.port.onmessage = null;
+      try { this._workletNode.disconnect(); } catch (_e) { /* ignore */ }
+      this._workletNode = null;
+    }
+    if (this._scriptNode) {
+      this._scriptNode.onaudioprocess = null;
+      try { this._scriptNode.disconnect(); } catch (_e) { /* ignore */ }
+      this._scriptNode = null;
+    }
+    if (this._sourceNode) {
+      try { this._sourceNode.disconnect(); } catch (_e) { /* ignore */ }
+      this._sourceNode = null;
+    }
+    if (this._audioContext) {
+      try { this._audioContext.close(); } catch (_e) { /* ignore */ }
+      this._audioContext = null;
+    }
+    if (this._stream) {
+      this._stream.getTracks().forEach(t => t.stop());
+      this._stream = null;
+    }
+  },
+
+  /** Hard stop: drop the socket without waiting for a final transcript. */
+  _cleanup() {
+    this._finalized = true;
+    clearTimeout(this._silenceTimeout);
+    this._silenceTimeout = null;
+    this._stopCapture();
+    if (this._ws) {
+      this._ws.onclose = null;
+      this._ws.onmessage = null;
+      this._ws.onerror = null;
+      if (this._ws.readyState === WebSocket.OPEN) {
+        try { this._ws.close(1000); } catch (_e) { /* ignore */ }
+      }
+      this._ws = null;
+    }
+    this._onResult = null;
+    this._onError = null;
+    this._onEnd = null;
+  }
+};
+
+/**
+ * VoiceInput - Speech-to-text with Claude (this server's Claude Code login),
+ * Deepgram Nova-3, or the Web Speech API.
  * Toggle mode: tap mic to start, tap again to stop. Auto-stops after silence.
  * Shows interim transcription in a floating preview overlay.
  * Inserts final text into the active session (user presses Enter to submit).
@@ -273,6 +559,29 @@ const VoiceInput = {
     this._initRecognition();
     // Always show buttons — if unsupported, toggle() shows a toast
     this._showButtons();
+    // Probe the server's Claude voice availability in the background. `auto`
+    // resolution reads the cached answer, so the first mic press does not wait
+    // on a round trip; a miss just falls through to the next provider.
+    this.refreshClaudeStatus();
+  },
+
+  /** Last /api/voice/status answer, or null before the first probe resolves. */
+  _claudeStatus: null,
+
+  /**
+   * Re-probe whether this server can transcribe with its Claude Code login.
+   * Called at init and whenever App Settings opens (the setting is server-side,
+   * so another device could have flipped it).
+   */
+  async refreshClaudeStatus() {
+    try {
+      const res = await fetch('/api/voice/status');
+      const json = await res.json();
+      this._claudeStatus = json?.success ? json.data : { available: false, reason: 'disabled' };
+    } catch (_e) {
+      this._claudeStatus = { available: false, reason: 'disabled' };
+    }
+    return this._claudeStatus;
   },
 
   // --- Deepgram config (localStorage only, never sent to server) ---
@@ -294,11 +603,37 @@ const VoiceInput = {
     return !!(cfg.apiKey && cfg.apiKey.trim());
   },
 
+  _claudeAvailable() {
+    return this._claudeStatus?.available === true;
+  },
+
+  /**
+   * Which provider a press of the mic would use.
+   *
+   * An explicit pick always wins, even when it cannot run — the resulting error
+   * ("Claude voice is off", "no Deepgram key") is more useful than silently
+   * transcribing somewhere the user did not choose. `auto` prefers Claude because
+   * it needs no key and no per-word billing, then the configured Deepgram key,
+   * then the browser's own engine.
+   */
+  _resolveProvider() {
+    const pinned = this._getDeepgramConfig().provider;
+    if (pinned === 'claude' || pinned === 'deepgram' || pinned === 'webspeech') return pinned;
+    if (this._claudeAvailable()) return 'claude';
+    if (this._shouldUseDeepgram()) return 'deepgram';
+    return 'webspeech';
+  },
+
   /** Get the active provider name for display */
   getActiveProviderName() {
-    if (this._shouldUseDeepgram()) return 'Deepgram Nova-3';
-    if (this.supported) return 'Web Speech API';
-    return 'None';
+    switch (this._resolveProvider()) {
+      case 'claude':
+        return this._claudeAvailable() ? 'Claude (this server’s login)' : 'Claude (unavailable)';
+      case 'deepgram':
+        return this._shouldUseDeepgram() ? 'Deepgram Nova-3' : 'Deepgram (no API key)';
+      default:
+        return this.supported ? 'Web Speech API' : 'None';
+    }
   },
 
   /** Try to create a SpeechRecognition instance */
@@ -334,13 +669,81 @@ const VoiceInput = {
     }
     this._retryCount = 0;
 
-    if (this._shouldUseDeepgram()) {
+    const provider = this._resolveProvider();
+    if (provider === 'claude') {
+      this._startClaude();
+    } else if (provider === 'deepgram') {
       this._startDeepgram();
     } else {
       this._startWebSpeech();
     }
   },
 
+  _startClaude() {
+    if (!this._claudeAvailable()) {
+      const reason = this._claudeStatus?.reason;
+      app.showToast(
+        reason === 'expired'
+          ? 'Claude login expired on the server. Run a Claude session to refresh it.'
+          : reason === 'no-credentials'
+            ? 'No Claude Code login found on the server. Sign in there with `claude`.'
+            : 'Claude voice is off. Enable it in Settings > Voice.',
+        'warning'
+      );
+      // Re-probe so a setting flipped on another device is picked up by the next press.
+      this.refreshClaudeStatus();
+      return;
+    }
+
+    const cfg = this._getDeepgramConfig();
+    this.isRecording = true;
+    this._activeProvider = 'claude';
+    this._accumulatedFinal = '';
+    this._lastTranscript = '';
+    this._hasReceivedResult = false;
+    this._recordingStartedAt = Date.now();
+    this._updateButtons('recording');
+    this._showPreview('Listening...', 'claude');
+    this._startDurationTimer();
+
+    const keyterms = (cfg.keyterms || DEFAULT_VOICE_KEYTERMS)
+      .split(',').map(t => t.trim()).filter(Boolean);
+
+    ClaudeVoiceProvider.start({
+      // The upstream endpoint wants a bare language tag; the Deepgram picker's
+      // 'en-US' style narrows to its base, and 'multi' means auto-detect.
+      language: (cfg.language || 'en-US').split('-')[0],
+      keyterms,
+      onStream: (stream) => this._startLevelMeter(stream),
+      onResult: (text, isFinal) => {
+        if (!this.isRecording) return;
+        this._hasReceivedResult = true;
+        // Each frame is the WHOLE running transcript, so replace rather than append.
+        this._accumulatedFinal = text;
+        if (isFinal) {
+          this._hidePreview();
+          this._insertText(text);
+          this.stop();
+        } else {
+          this._showPreview(text, 'claude');
+        }
+      },
+      onError: (msg) => {
+        const wasRecording = this.isRecording;
+        this.stop();
+        if (wasRecording) app.showToast(msg, 'error');
+      },
+      onEnd: () => {
+        if (this.isRecording) {
+          if (this._accumulatedFinal) this._insertText(this._accumulatedFinal);
+          this.stop();
+        }
+      }
+    });
+
+    if (navigator.vibrate) navigator.vibrate(50);
+  },
+
   _startDeepgram() {
     const cfg = this._getDeepgramConfig();
     this.isRecording = true;
@@ -353,7 +756,7 @@ const VoiceInput = {
     this._showPreview('Listening...', 'deepgram');
     this._startDurationTimer();
 
-    const keyterms = (cfg.keyterms || 'refactor, endpoint, middleware, callback, async, regex, TypeScript, npm, API, deploy, config, linter, env, webhook, schema, CLI, JSON, CSS, DOM, SSE, backend, frontend, localhost, dependencies, repository, merge, rebase, diff, commit, com')
+    const keyterms = (cfg.keyterms || DEFAULT_VOICE_KEYTERMS)
       .split(',').map(t => t.trim()).filter(Boolean);
 
     DeepgramProvider.start({
@@ -452,7 +855,10 @@ const VoiceInput = {
     this._updateButtons('idle');
     this._hidePreview();
 
-    if (this._activeProvider === 'deepgram') {
+    if (this._activeProvider === 'claude') {
+      // Finalize, don't hang up: the last transcript arrives after the audio does.
+      ClaudeVoiceProvider.stop();
+    } else if (this._activeProvider === 'deepgram') {
       DeepgramProvider.stop();
     } else if (this._activeProvider === 'webspeech') {
       try {
@@ -803,11 +1209,12 @@ const VoiceInput = {
       timerEl.textContent = '0:00';
       indicator.appendChild(timerEl);
       this.previewEl.appendChild(indicator);
-      // Provider badge for Deepgram
-      if (provider === 'deepgram') {
+      // Provider badge (Web Speech gets none — it is the fallback, not a choice)
+      const badgeText = provider === 'deepgram' ? 'DG' : provider === 'claude' ? 'CLAUDE' : '';
+      if (badgeText) {
         const badge = document.createElement('span');
         badge.className = 'voice-preview-badge';
-        badge.textContent = 'DG';
+        badge.textContent = badgeText;
         this.previewEl.appendChild(badge);
         this.previewEl.appendChild(document.createTextNode(' '));
       }
@@ -861,6 +1268,7 @@ const VoiceInput = {
     if (this.isRecording) this.stop();
     this._hideVoiceSendBtn();
     DeepgramProvider._cleanup();
+    ClaudeVoiceProvider._cleanup();
     this.recognition = null;
     this._activeProvider = null;
     this._stopDurationTimer();

src/web/public/voice-pcm-worklet.js

@@ -0,0 +1,57 @@
+/**
+ * @fileoverview AudioWorklet that turns microphone audio into the PCM frames the
+ * Claude voice endpoint expects.
+ *
+ * The endpoint is opened as `encoding=linear16, sample_rate=16000, channels=1`,
+ * i.e. raw signed 16-bit little-endian mono. MediaRecorder cannot produce that
+ * (it only emits container formats — webm/opus, mp4), which is why the Deepgram
+ * path's capture code cannot be reused here: Deepgram sniffs the container,
+ * Anthropic's endpoint does not.
+ *
+ * Sample rate is handled by the AudioContext, constructed at 16000 Hz so the
+ * browser resamples the mic for us. This processor only converts Float32 [-1,1]
+ * to Int16 and batches, because a raw 128-sample render quantum is a ~4 ms
+ * WebSocket frame — 250 frames a second of pure overhead.
+ *
+ * Loaded via `audioWorklet.addModule()` from voice-input.js. Runs on the audio
+ * thread: no DOM, no globals from the page.
+ *
+ * ⚠️ Edit this file and voice-input.js together. Static assets are served
+ * `immutable` for a year and this one is fetched from JS, so it inherits its
+ * cache-bust token from voice-input.js's script tag (see `_workletUrl()`); a
+ * change here alone would keep serving the old copy to every returning browser.
+ */
+
+/** ~256 ms at 16 kHz. Big enough to keep frame overhead down, small enough that interim transcripts stay live. */
+const FRAME_SAMPLES = 4096;
+
+class PcmFrameProcessor extends AudioWorkletProcessor {
+  constructor() {
+    super();
+    this._buffer = new Int16Array(FRAME_SAMPLES);
+    this._offset = 0;
+  }
+
+  process(inputs) {
+    const channel = inputs[0]?.[0];
+    // No input yet (mic still warming) — keep the processor alive.
+    if (!channel) return true;
+
+    for (let i = 0; i < channel.length; i++) {
+      // Clamp before scaling: values slightly outside [-1,1] are legal in Web Audio
+      // and would wrap around to the opposite sign as Int16, which sounds like a click.
+      const sample = Math.max(-1, Math.min(1, channel[i]));
+      this._buffer[this._offset++] = sample < 0 ? sample * 0x8000 : sample * 0x7fff;
+
+      if (this._offset === FRAME_SAMPLES) {
+        // Transfer a copy: the worklet keeps reusing its own buffer.
+        const frame = new Int16Array(this._buffer);
+        this.port.postMessage(frame.buffer, [frame.buffer]);
+        this._offset = 0;
+      }
+    }
+    return true;
+  }
+}
+
+registerProcessor('pcm-frame-processor', PcmFrameProcessor);

src/web/routes/index.ts

@@ -24,4 +24,5 @@ export { registerSearchRoutes } from './search-routes.js';
 export { registerMeRoutes } from './me-routes.js';
 export { registerAdminRoutes } from './admin-routes.js';
 export { registerWsRoutes } from './ws-routes.js';
+export { registerVoiceRoutes } from './voice-routes.js';
 export { registerWebviewRoutes, tryWebviewRefererFallback } from './webview-routes.js';

src/web/routes/voice-routes.ts

@@ -0,0 +1,194 @@
+/**
+ * @fileoverview Claude voice dictation routes.
+ *
+ * - `GET  /api/voice/status`   — can this server transcribe? (settings gate + credential state)
+ * - `GET  /ws/voice/stream`    — one dictation: PCM16 audio up, transcripts down
+ *
+ * Design and the upstream protocol: `docs/claude-voice-plan.md`. The relay itself
+ * lives in `../voice-stream.ts`; this file is the auth, gating and lifetime shell
+ * around it.
+ *
+ * ⚠️ `/api/voice/status` reports STATE, never the token: `{ available, reason,
+ * subscriptionType?, expiresAt? }`. The Claude OAuth access token stays inside the
+ * server process — the browser sends audio and receives text, nothing else.
+ *
+ * ⚠️ The WebSocket carries the same upgrade guard as `/ws/sessions/:id/terminal`
+ * (allowed Host + same-site Origin, on top of the global auth hook that already ran
+ * on the handshake). Without it a cross-site page could open a dictation stream on
+ * the user's credentials and bill their subscription.
+ *
+ * ⚠️ The feature is OFF unless `claudeVoiceEnabled` is set: turning it on spends the
+ * server owner's Claude subscription on transcription for anyone who can reach the
+ * UI, which is a decision for the operator rather than a default.
+ */
+
+import { createRequire } from 'module';
+import { FastifyInstance } from 'fastify';
+import type { WebSocket } from 'ws';
+import { ApiErrorCode, createErrorResponse } from '../../types.js';
+import { isAllowedRequestHost, isAllowedRequestOrigin, type HostPolicy } from '../network-auth-policy.js';
+import { readClaudeOAuthCredentials } from '../../claude-credentials.js';
+import { VoiceStreamRelay } from '../voice-stream.js';
+import { MAX_AUDIO_FRAME_BYTES, MAX_CONCURRENT_STREAMS } from '../../config/voice.js';
+import type { ConfigPort } from '../ports/index.js';
+
+const require = createRequire(import.meta.url);
+const { version: APP_VERSION } = require('../../../package.json') as { version: string };
+
+/** Why voice is unavailable, in a form the frontend can branch on. */
+export type VoiceUnavailableReason = 'disabled' | 'no-credentials' | 'expired' | 'malformed';
+
+export interface VoiceStatus {
+  available: boolean;
+  reason?: VoiceUnavailableReason;
+  /** Display-only ('max', 'pro'); present when the credential store reported one. */
+  subscriptionType?: string;
+  expiresAt?: number;
+}
+
+/**
+ * Resolve the server's dictation readiness. Split out and exported so the status
+ * endpoint and the WebSocket upgrade cannot drift apart: the socket must never
+ * accept a stream the status endpoint calls unavailable.
+ */
+export async function resolveVoiceStatus(enabled: boolean): Promise<VoiceStatus> {
+  if (!enabled) return { available: false, reason: 'disabled' };
+  const creds = await readClaudeOAuthCredentials();
+  switch (creds.status) {
+    case 'ok':
+      return { available: true, subscriptionType: creds.subscriptionType, expiresAt: creds.expiresAt };
+    case 'expired':
+      return { available: false, reason: 'expired', expiresAt: creds.expiresAt };
+    case 'malformed':
+      return { available: false, reason: 'malformed' };
+    default:
+      return { available: false, reason: 'no-credentials' };
+  }
+}
+
+/** Live relays, server-wide. Dictation is human-paced, so the cap is small. */
+let activeStreams = 0;
+
+/** Test seam: the cap is process-wide state, so suites must be able to reset it. */
+export function _resetVoiceStreamCountForTesting(): void {
+  activeStreams = 0;
+}
+
+/** Split a comma-separated keyterms query value into terms. */
+function parseKeyterms(raw: unknown): string[] {
+  if (typeof raw !== 'string' || !raw) return [];
+  return raw
+    .split(',')
+    .map((t) => t.trim())
+    .filter(Boolean)
+    .slice(0, 100);
+}
+
+export function registerVoiceRoutes(app: FastifyInstance, ctx: ConfigPort, getHostPolicy: () => HostPolicy): void {
+  app.get('/api/voice/status', async (_req, reply) => {
+    try {
+      return { success: true, data: await resolveVoiceStatus(await ctx.getClaudeVoiceEnabled()) };
+    } catch {
+      reply.code(500);
+      return createErrorResponse(ApiErrorCode.INTERNAL_ERROR, 'Failed to read voice status');
+    }
+  });
+
+  app.get<{ Querystring: { language?: string; keyterms?: string } }>(
+    '/ws/voice/stream',
+    { websocket: true },
+    async (socket: WebSocket, req) => {
+      // Cross-site upgrade guard first: this socket spends the operator's Claude
+      // subscription, so it must be reachable only from Codeman's own origin.
+      const policy = getHostPolicy();
+      if (!isAllowedRequestHost(req.headers.host, policy) || !isAllowedRequestOrigin(req.headers.origin, policy)) {
+        socket.close(4003, 'Forbidden');
+        return;
+      }
+
+      const status = await resolveVoiceStatus(await ctx.getClaudeVoiceEnabled());
+      if (!status.available) {
+        socket.close(4004, status.reason ?? 'unavailable');
+        return;
+      }
+      // Re-read rather than trusting resolveVoiceStatus's discarded token: the
+      // status helper deliberately never returns it.
+      const creds = await readClaudeOAuthCredentials();
+      if (creds.status !== 'ok' || !creds.accessToken) {
+        socket.close(4004, 'no-credentials');
+        return;
+      }
+
+      if (activeStreams >= MAX_CONCURRENT_STREAMS) {
+        socket.close(4008, 'Too many voice streams');
+        return;
+      }
+      activeStreams++;
+
+      let released = false;
+      const release = () => {
+        if (released) return;
+        released = true;
+        activeStreams--;
+      };
+
+      const send = (payload: Record<string, unknown>) => {
+        if (socket.readyState !== 1) return;
+        try {
+          socket.send(JSON.stringify(payload));
+        } catch {
+          /* client vanished mid-write */
+        }
+      };
+
+      const relay = new VoiceStreamRelay({
+        accessToken: creds.accessToken,
+        appVersion: APP_VERSION,
+        language: req.query.language,
+        keyterms: parseKeyterms(req.query.keyterms),
+        onReady: () => send({ t: 'ready' }),
+        onTranscript: (text, final) => send({ t: 'transcript', text, final }),
+        onError: (message) => send({ t: 'error', message }),
+        onClose: () => {
+          release();
+          send({ t: 'closed' });
+          if (socket.readyState === 1) {
+            try {
+              socket.close(1000, 'Voice stream ended');
+            } catch {
+              /* already closing */
+            }
+          }
+        },
+      });
+
+      // Handlers are attached synchronously before any further await
+      // (@fastify/websocket drops messages that arrive before they exist).
+      socket.on('message', (raw: Buffer, isBinary: boolean) => {
+        if (isBinary) {
+          if (raw.length === 0 || raw.length > MAX_AUDIO_FRAME_BYTES) return;
+          relay.sendAudio(raw);
+          return;
+        }
+        try {
+          const msg = JSON.parse(String(raw)) as { t?: string };
+          if (msg.t === 'finalize') relay.finalize();
+          else if (msg.t === 'stop') relay.close();
+        } catch {
+          /* non-JSON control frame — ignore */
+        }
+      });
+
+      socket.on('close', () => {
+        relay.close();
+        release();
+      });
+      socket.on('error', () => {
+        relay.close();
+        release();
+      });
+
+      relay.connect();
+    }
+  );
+}

src/web/schemas.ts

@@ -857,6 +857,16 @@ export const SettingsUpdateSchema = z
      * add-only at create; a marker keeps user-authored copies untouched.
      */
     agentSkillEnabled: z.boolean().optional(),
+    /**
+     * Let browser dictation transcribe through this machine's Claude Code login,
+     * the same speech-to-text service the CLI's own `/voice` mode uses
+     * (docs/claude-voice-plan.md). SYNCED, default OFF: enabling it spends the
+     * operator's Claude subscription on transcription for anyone who can reach
+     * the UI, and routes microphone audio to Anthropic rather than to whichever
+     * provider was configured before. The Deepgram and Web Speech paths are
+     * untouched by this flag.
+     */
+    claudeVoiceEnabled: z.boolean().optional(),
     /**
      * Approvals Inbox (header bell + drawer, phone overview answer buttons,
      * push Approve/Deny action buttons). SYNCED, default OFF (opt-in): even
@@ -970,6 +980,8 @@ export const SettingsUpdateSchema = z
     // Voice settings (cross-device sync)
     voiceSettings: z
       .object({
+        /** 'auto' | 'claude' | 'deepgram' | 'webspeech'. Unknown values fall back to auto client-side. */
+        provider: z.string().max(20).optional(),
         apiKey: z.string().max(200).optional(),
         language: z.string().max(20).optional(),
         keyterms: z.string().max(500).optional(),

src/web/server.ts

@@ -166,6 +166,7 @@ import {
   registerMeRoutes,
   registerAdminRoutes,
   registerWsRoutes,
+  registerVoiceRoutes,
   registerWebviewRoutes,
   tryWebviewRefererFallback,
 } from './routes/index.js';
@@ -635,6 +636,7 @@ export class WebServer extends EventEmitter {
       getClaudeModeConfig: this.getClaudeModeConfig.bind(this),
       getTerminalHistoryConfig: this.getTerminalHistoryConfig.bind(this),
       getAgentSkillEnabled: this.getAgentSkillEnabled.bind(this),
+      getClaudeVoiceEnabled: this.getClaudeVoiceEnabled.bind(this),
       getDefaultClaudeMdPath: this.getDefaultClaudeMdPath.bind(this),
       getLightState: this.getLightState.bind(this),
       getLightSessionsState: this.getLightSessionsState.bind(this),
@@ -982,6 +984,7 @@ export class WebServer extends EventEmitter {
     registerCronRoutes(this.app, { ...ctx, cron: this.cronService });
 
     registerWsRoutes(this.app, ctx, () => this.getHostPolicy());
+    registerVoiceRoutes(this.app, ctx, () => this.getHostPolicy());
   }
 
   /**
@@ -1704,6 +1707,15 @@ export class WebServer extends EventEmitter {
     return settings.agentSkillEnabled === true;
   }
 
+  // Whether browser dictation may use this machine's Claude Code credentials
+  // (synced `claudeVoiceEnabled` setting, default OFF; docs/claude-voice-plan.md).
+  // OFF by default because turning it on spends the operator's Claude subscription
+  // on transcription for anyone who can reach the UI.
+  private async getClaudeVoiceEnabled(): Promise<boolean> {
+    const settings = await this.readSettings();
+    return settings.claudeVoiceEnabled === true;
+  }
+
   /**
    * Read My Mind predictor model (docs/readmymind-plan.md): `readMyMindModel`
    * setting, defaulting to the AI-checker opus model. Prediction quality is

src/web/voice-stream.ts

@@ -0,0 +1,300 @@
+/**
+ * @fileoverview Upstream half of Claude voice dictation: one browser recording
+ * relayed to the speech-to-text service Claude Code's own `/voice` mode uses.
+ *
+ * The browser cannot talk to that service directly — it would need the Claude
+ * OAuth bearer token in page JavaScript, and the endpoint is not CORS-open — so
+ * Codeman sits in the middle and is the only thing that ever holds the token.
+ * See `docs/claude-voice-plan.md` for the protocol table this implements.
+ *
+ * Wire contract (mirrors the CLI's `connectVoiceStream`):
+ * - Query pins the audio format: linear16 PCM, 16 kHz, mono. The browser worklet
+ *   produces exactly that; a mismatch transcribes as silence or noise, never an error.
+ * - `{"type":"KeepAlive"}` on open and every 8s, or upstream drops the socket
+ *   between utterances.
+ * - Audio frames go up as raw binary.
+ * - Downstream, `TranscriptText`/`TranscriptInterim` carry the RUNNING transcript
+ *   (each frame supersedes the previous one — they are not deltas to concatenate),
+ *   and `TranscriptEndpoint` promotes the pending interim to final.
+ * - `{"type":"CloseStream"}` finalizes; the endpoint frame that follows is the
+ *   last transcript, so `finalize()` waits briefly for it rather than closing.
+ *
+ * The pure builders at the top are unit-tested; `VoiceStreamRelay` owns the socket,
+ * the keepalive timer and the lifetime cap.
+ */
+
+import WebSocket from 'ws';
+import {
+  AUDIO_CHANNELS,
+  AUDIO_SAMPLE_RATE,
+  FINALIZE_TIMEOUT_MS,
+  KEEPALIVE_INTERVAL_MS,
+  MAX_KEYTERMS_HEADER_CHARS,
+  MAX_STREAM_MS,
+  VOICE_STREAM_PATH,
+  voiceStreamBase,
+} from '../config/voice.js';
+
+const KEEPALIVE_FRAME = '{"type":"KeepAlive"}';
+const CLOSE_STREAM_FRAME = '{"type":"CloseStream"}';
+
+export interface VoiceStreamParams {
+  /** BCP-47-ish language hint. Anything unusable falls back to 'en'. */
+  language?: string;
+  /** Domain vocabulary sent as a recognition hint. */
+  keyterms?: string[];
+}
+
+/**
+ * Collapse keyterms into the single ASCII header value upstream accepts.
+ *
+ * Commas separate terms, so a comma INSIDE a term would silently split it; it is
+ * replaced with a space rather than dropped. Non-ASCII is stripped because the
+ * value travels as an HTTP header, where anything outside the visible ASCII range
+ * is not portable. Deduped and truncated on a term boundary so a long list degrades
+ * to a shorter list instead of a mangled final term.
+ */
+export function sanitizeKeyterms(terms: string[]): string {
+  const seen = new Set<string>();
+  const out: string[] = [];
+  let length = 0;
+  for (const term of terms) {
+    const cleaned = term
+      .replace(/,/g, ' ')
+      .replace(/[^\x20-\x7E]/g, '')
+      .replace(/\s+/g, ' ')
+      .trim();
+    if (!cleaned || seen.has(cleaned)) continue;
+    const cost = cleaned.length + (out.length > 0 ? 1 : 0);
+    if (length + cost > MAX_KEYTERMS_HEADER_CHARS) break;
+    seen.add(cleaned);
+    out.push(cleaned);
+    length += cost;
+  }
+  return out.join(',');
+}
+
+/** Normalize a language hint to what the endpoint expects, defaulting to English. */
+export function normalizeVoiceLanguage(language: string | undefined): string {
+  const trimmed = (language ?? '').trim();
+  if (!trimmed || !/^[a-zA-Z]{2,3}(-[a-zA-Z0-9]{2,8})?$|^multi$/.test(trimmed)) return 'en';
+  return trimmed;
+}
+
+/** Full upstream URL with the audio format pinned. */
+export function buildVoiceStreamUrl(params: VoiceStreamParams = {}, env: NodeJS.ProcessEnv = process.env): string {
+  const query = new URLSearchParams({
+    encoding: 'linear16',
+    sample_rate: String(AUDIO_SAMPLE_RATE),
+    channels: String(AUDIO_CHANNELS),
+    endpointing_ms: '300',
+    utterance_end_ms: '1000',
+    language: normalizeVoiceLanguage(params.language),
+    use_conversation_engine: 'true',
+    stt_provider: 'deepgram-nova3',
+  });
+  return `${voiceStreamBase(env)}${VOICE_STREAM_PATH}?${query.toString()}`;
+}
+
+/**
+ * Upstream headers. Codeman identifies itself honestly (it is not the CLI), which
+ * the endpoint accepts; the bearer token is the only thing that authenticates.
+ */
+export function buildVoiceStreamHeaders(
+  accessToken: string,
+  appVersion: string,
+  keyterms: string[] = []
+): Record<string, string> {
+  const headers: Record<string, string> = {
+    Authorization: `Bearer ${accessToken}`,
+    'User-Agent': `codeman/${appVersion} (voice-bridge)`,
+    'x-app': 'codeman',
+    'anthropic-client-platform': 'codeman_web',
+  };
+  const sanitized = sanitizeKeyterms(keyterms);
+  if (sanitized) headers['x-config-keyterms'] = sanitized;
+  return headers;
+}
+
+export interface VoiceStreamRelayOptions extends VoiceStreamParams {
+  accessToken: string;
+  appVersion: string;
+  /** Called once the upstream socket is open and audio may flow. */
+  onReady: () => void;
+  /** Running transcript. `final` marks the utterance as complete. */
+  onTranscript: (text: string, final: boolean) => void;
+  /** Human-readable failure. The relay is dead (or dying) by the time this fires. */
+  onError: (message: string) => void;
+  /** Terminal: the relay released its socket and timers. Fires exactly once. */
+  onClose: () => void;
+}
+
+/**
+ * One dictation, upstream. Owns exactly one WebSocket and dies with it: every
+ * exit path (error, upstream close, lifetime cap, caller close) funnels through
+ * `_teardown()`, which fires `onClose` once and clears both timers.
+ */
+export class VoiceStreamRelay {
+  private ws: WebSocket | null = null;
+  private keepAlive: ReturnType<typeof setInterval> | null = null;
+  private lifetimeTimer: ReturnType<typeof setTimeout> | null = null;
+  private finalizeTimer: ReturnType<typeof setTimeout> | null = null;
+  private closed = false;
+  private finalizing = false;
+  /** Latest interim, held so a close/finalize can promote it to final. */
+  private pendingTranscript = '';
+
+  constructor(private readonly opts: VoiceStreamRelayOptions) {}
+
+  /** Open the upstream socket. Safe to call once; a second call is a no-op. */
+  connect(): void {
+    if (this.ws || this.closed) return;
+    const url = buildVoiceStreamUrl({ language: this.opts.language, keyterms: this.opts.keyterms });
+    const ws = new WebSocket(url, {
+      headers: buildVoiceStreamHeaders(this.opts.accessToken, this.opts.appVersion, this.opts.keyterms ?? []),
+    });
+    this.ws = ws;
+
+    ws.on('open', () => {
+      // Ping immediately: the gap between upgrade and the browser's first audio
+      // frame is long enough (mic permission, worklet boot) for upstream to drop us.
+      this.safeSend(KEEPALIVE_FRAME);
+      this.keepAlive = setInterval(() => this.safeSend(KEEPALIVE_FRAME), KEEPALIVE_INTERVAL_MS);
+      this.lifetimeTimer = setTimeout(() => {
+        this.opts.onError('Voice stream reached its maximum length');
+        this.close();
+      }, MAX_STREAM_MS);
+      this.opts.onReady();
+    });
+
+    ws.on('message', (raw) => this.handleMessage(String(raw)));
+
+    // An upgrade rejection never reaches 'open', so its status is the only signal
+    // that the token was refused rather than the network being down.
+    ws.on('unexpected-response', (_req, res) => {
+      const status = res.statusCode ?? 0;
+      res.resume();
+      this.opts.onError(
+        status === 401 || status === 403
+          ? 'Claude rejected the voice credentials. Run a Claude session to refresh your login.'
+          : `Voice service refused the connection (HTTP ${status})`
+      );
+      this.teardown();
+    });
+
+    ws.on('error', (err: Error) => {
+      if (this.closed) return;
+      this.opts.onError(`Voice stream error: ${err.message}`);
+    });
+
+    ws.on('close', () => {
+      this.promotePending();
+      this.teardown();
+    });
+  }
+
+  /** Relay one raw PCM16 frame upstream. Dropped after finalize, as upstream ignores it. */
+  sendAudio(chunk: Buffer): void {
+    if (this.finalizing || this.closed) return;
+    if (this.ws?.readyState !== WebSocket.OPEN) return;
+    this.ws.send(chunk);
+  }
+
+  /**
+   * Ask upstream for the final transcript. The endpoint frame usually follows
+   * within a few hundred ms; the timer is the backstop so a silent upstream still
+   * yields whatever interim we already have instead of hanging the caller.
+   */
+  finalize(): void {
+    if (this.finalizing || this.closed) return;
+    this.finalizing = true;
+    if (this.ws?.readyState !== WebSocket.OPEN) {
+      this.promotePending();
+      this.close();
+      return;
+    }
+    this.safeSend(CLOSE_STREAM_FRAME);
+    this.finalizeTimer = setTimeout(() => {
+      this.promotePending();
+      this.close();
+    }, FINALIZE_TIMEOUT_MS);
+  }
+
+  /** Terminal shutdown. Idempotent. */
+  close(): void {
+    if (this.closed) return;
+    const ws = this.ws;
+    this.teardown();
+    if (ws && (ws.readyState === WebSocket.OPEN || ws.readyState === WebSocket.CONNECTING)) {
+      try {
+        ws.close();
+      } catch {
+        /* already closing */
+      }
+    }
+  }
+
+  private handleMessage(raw: string): void {
+    let msg: { type?: string; data?: string; description?: string; error_code?: string; message?: string };
+    try {
+      msg = JSON.parse(raw);
+    } catch {
+      return;
+    }
+    switch (msg.type) {
+      case 'TranscriptText':
+      case 'TranscriptInterim': {
+        // Each frame is the whole running transcript, not a delta.
+        if (typeof msg.data === 'string' && msg.data) {
+          this.pendingTranscript = msg.data;
+          this.opts.onTranscript(msg.data, false);
+        }
+        break;
+      }
+      case 'TranscriptEndpoint': {
+        this.promotePending();
+        if (this.finalizing) this.close();
+        break;
+      }
+      case 'TranscriptError': {
+        this.opts.onError(msg.description || msg.error_code || 'Transcription failed');
+        break;
+      }
+      case 'error': {
+        this.opts.onError(msg.message || 'Voice service error');
+        break;
+      }
+      default:
+        break;
+    }
+  }
+
+  /** Emit the held interim as final, exactly once per utterance. */
+  private promotePending(): void {
+    if (!this.pendingTranscript) return;
+    const text = this.pendingTranscript;
+    this.pendingTranscript = '';
+    this.opts.onTranscript(text, true);
+  }
+
+  private safeSend(frame: string): void {
+    if (this.ws?.readyState !== WebSocket.OPEN) return;
+    try {
+      this.ws.send(frame);
+    } catch {
+      /* socket died between the check and the send */
+    }
+  }
+
+  private teardown(): void {
+    if (this.closed) return;
+    this.closed = true;
+    if (this.keepAlive) clearInterval(this.keepAlive);
+    if (this.lifetimeTimer) clearTimeout(this.lifetimeTimer);
+    if (this.finalizeTimer) clearTimeout(this.finalizeTimer);
+    this.keepAlive = null;
+    this.lifetimeTimer = null;
+    this.finalizeTimer = null;
+    this.opts.onClose();
+  }
+}

test/admin-ui.test.ts

@@ -135,11 +135,16 @@ describe('admin panel modal', () => {
 
 describe('index.html wiring', () => {
   it('loads admin-ui.js after settings-ui.js and before session-ui.js', () => {
-    const settings = INDEX_HTML.indexOf('settings-ui.js');
-    const admin = INDEX_HTML.indexOf('admin-ui.js');
-    const session = INDEX_HTML.indexOf('session-ui.js');
-    expect(admin).toBeGreaterThan(settings);
-    expect(session).toBeGreaterThan(admin);
+    // Match the SCRIPT TAG, not the bare filename: modal markup earlier in the
+    // document cites these modules in comments ("session-ui.js: openSessionOptions"),
+    // and a bare indexOf finds the comment instead of the load order.
+    const at = (file: string) => {
+      const i = INDEX_HTML.indexOf(`src="${file}"`);
+      expect(i, `no <script src="${file}"> in index.html`).toBeGreaterThan(-1);
+      return i;
+    };
+    expect(at('admin-ui.js')).toBeGreaterThan(at('settings-ui.js'));
+    expect(at('session-ui.js')).toBeGreaterThan(at('admin-ui.js'));
   });
 
   it('ships the header Admin Panel button hidden by default', () => {

test/app-settings-structure.test.ts

@@ -59,8 +59,28 @@ describe('App Settings modal structure', () => {
     }
   });
 
-  it('opens on Terminal & Input, so Local Echo is the first thing in reach', () => {
-    expect(settingsUi).toContain("this.switchSettingsTab('settings-terminal')");
+  it('opens on Updates: the version and the updater above everything else', () => {
+    expect(settingsUi).toContain("this.switchSettingsTab('settings-updates')");
+    const modal = settingsModal();
+    const order = [...modal.matchAll(/<section class="set-section" id="([a-z-]+)"/g)].map((m) => m[1]);
+    // Rail and document must agree, or scroll-spy paints the wrong entry.
+    const rail = [...modal.matchAll(/data-section="([a-z-]+)"/g)].map((m) => m[1]);
+    expect(rail.slice(0, 3)).toEqual(['settings-updates', 'settings-terminal', 'settings-layout']);
+    expect(order.slice(0, 3)).toEqual(['settings-updates', 'settings-terminal', 'settings-layout']);
+    // Updates carries ONLY the version and the update action; the rest of the
+    // system settings tail the document under System, out of the way.
+    const updates = modal.match(/id="settings-updates"([\s\S]*?)<\/section>/)?.[1] ?? '';
+    expect(updates).toContain('id="updateCurrentVersion"');
+    expect(updates).toContain('id="updateCheckBtn"');
+    expect(updates).not.toContain('id="appSettingsClaudeMdPath"');
+    expect(rail[rail.length - 1]).toBe('settings-system');
+    expect(order[order.length - 1]).toBe('settings-system');
+    const system = modal.match(/id="settings-system"([\s\S]*?)<\/section>/)?.[1] ?? '';
+    expect(system).toContain('id="appSettingsClaudeMdPath"');
+    expect(system).toContain('id="appSettingsTunnelEnabled"');
+  });
+
+  it('keeps Local Echo the first row of the second section', () => {
     const terminal = settingsModal().match(/id="settings-terminal"([\s\S]*?)<\/section>/);
     const localEcho = terminal?.[1].indexOf('appSettingsLocalEcho') ?? -1;
     const cjk = terminal?.[1].indexOf('appSettingsCjkInput') ?? -1;
@@ -68,6 +88,33 @@ describe('App Settings modal structure', () => {
     expect(localEcho).toBeLessThan(cjk);
   });
 
+  it('gives every previewed chip an icon to clone, and a slot that exists', () => {
+    // _syncLayoutPreview clones `.set-chip-ico` out of the chip, so a chip that
+    // opts into the preview without an icon renders as an empty button, and one
+    // pointing at a slot id that does not exist renders as nothing at all.
+    const layout = settingsModal().match(/id="settings-layout"([\s\S]*?)<\/section>/)?.[1] ?? '';
+    const chips = [...layout.matchAll(/<label class="set-chip"([^>]*)>([\s\S]*?)<\/label>/g)];
+    const previewed = chips.filter(([, attrs]) => attrs.includes('data-preview='));
+    expect(previewed.length).toBeGreaterThanOrEqual(15);
+    for (const [, attrs, body] of previewed) {
+      const kind = attrs.match(/data-preview="([a-z]+)"/)?.[1];
+      expect(['header', 'panel', 'toolbar', 'float']).toContain(kind);
+      expect(attrs, `chip ${body} needs a preview order`).toMatch(/data-preview-order="\d+"/);
+      // A text token replaces the icon for readouts (plan usage, CPU, font size).
+      const hasIcon = body.includes('class="set-chip-ico') || attrs.includes('data-preview-text=');
+      expect(hasIcon, `chip ${body} has nothing to render in the preview`).toBe(true);
+    }
+    for (const id of [
+      'appSettingsPreviewHeader',
+      'appSettingsPreviewPanels',
+      'appSettingsPreviewToolbar',
+      'appSettingsPreviewFloats',
+    ]) {
+      expect(layout).toContain(`id="${id}"`);
+      expect(settingsUi).toContain(`'${id}'`);
+    }
+  });
+
   it('models: keeps the 1M variants as select options behind the context switch', () => {
     const modal = settingsModal();
     const select = modal.match(/id="appSettingsClaudeModel"([\s\S]*?)<\/select>/)?.[1] ?? '';
@@ -80,15 +127,15 @@ describe('App Settings modal structure', () => {
     expect(modal).toContain('id="appSettingsOpusContext1m"');
   });
 
-  it('never hides sections behind .modal-tab-content (that class means display:none)', () => {
+  it('has retired the modal-tab chrome everywhere, not just here', () => {
+    // Session Options and Add Case moved onto this same `set-*` surface, so the
+    // old tab classes have no users left. A reappearance means a modal drifted
+    // back off the shared surface (or the dead CSS was resurrected).
     expect(settingsModal()).not.toContain('modal-tab-content');
-  });
-
-  it('leaves the shared modal tab classes to the other modals', () => {
-    // #sessionOptionsModal and #createCaseModal still use .modal-tabs; the
-    // settings rail must not restyle them out from under those.
-    expect(settingsModal()).not.toContain('class="modal-tabs"');
-    expect(html).toContain('<div class="modal-tabs">');
+    expect(html).not.toContain('class="modal-tabs"');
+    expect(html).not.toContain('modal-tab-btn');
+    const css = readFileSync(resolve(publicDir, 'styles.css'), 'utf8');
+    expect(css).not.toContain('.modal-tab-btn {');
   });
 
   it('exposes the rail hooks admin-ui.js injects the Users section into', () => {

test/claude-credentials.test.ts

@@ -0,0 +1,83 @@
+/**
+ * Claude Code credential parsing.
+ *
+ * The voice relay authenticates with the token this parser returns, so every
+ * degraded store (absent, truncated, hand-edited, expired) must resolve to a
+ * status the caller can act on rather than a throw or a silently empty token.
+ */
+import { describe, it, expect } from 'vitest';
+import { parseClaudeCredentials, claudeCredentialsPath } from '../src/claude-credentials.js';
+
+const NOW = 1_800_000_000_000;
+
+function store(overrides: Record<string, unknown> = {}): string {
+  return JSON.stringify({
+    claudeAiOauth: {
+      accessToken: 'sk-ant-oat01-test',
+      refreshToken: 'sk-ant-ort01-test',
+      expiresAt: NOW + 3_600_000,
+      subscriptionType: 'max',
+      ...overrides,
+    },
+  });
+}
+
+describe('parseClaudeCredentials', () => {
+  it('returns the token and display metadata for a live store', () => {
+    const result = parseClaudeCredentials(store(), NOW);
+    expect(result.status).toBe('ok');
+    expect(result.accessToken).toBe('sk-ant-oat01-test');
+    expect(result.subscriptionType).toBe('max');
+    expect(result.expiresAt).toBe(NOW + 3_600_000);
+  });
+
+  it('reports an elapsed token as expired and withholds it', () => {
+    const result = parseClaudeCredentials(store({ expiresAt: NOW - 1000 }), NOW);
+    expect(result.status).toBe('expired');
+    expect(result.accessToken).toBeUndefined();
+  });
+
+  it('treats a token expiring within the skew as already expired', () => {
+    // A token with 30s left would die mid-dictation; refusing up front turns a
+    // confusing mid-utterance disconnect into a clear "refresh your login".
+    expect(parseClaudeCredentials(store({ expiresAt: NOW + 30_000 }), NOW).status).toBe('expired');
+  });
+
+  it('accepts a store with no expiry at all', () => {
+    const raw = JSON.stringify({ claudeAiOauth: { accessToken: 'sk-ant-oat01-test' } });
+    expect(parseClaudeCredentials(raw, NOW).status).toBe('ok');
+  });
+
+  it.each([
+    ['not json at all', 'malformed'],
+    ['{}', 'malformed'],
+    ['null', 'malformed'],
+    ['[]', 'malformed'],
+    ['{"claudeAiOauth":null}', 'malformed'],
+    ['{"claudeAiOauth":{}}', 'malformed'],
+    ['{"claudeAiOauth":{"accessToken":""}}', 'malformed'],
+    ['{"claudeAiOauth":{"accessToken":"   "}}', 'malformed'],
+    ['{"claudeAiOauth":{"accessToken":123}}', 'malformed'],
+  ])('reports %s as malformed instead of throwing', (raw, expected) => {
+    expect(parseClaudeCredentials(raw, NOW).status).toBe(expected);
+  });
+
+  it('trims whitespace around a token written by hand', () => {
+    const raw = JSON.stringify({ claudeAiOauth: { accessToken: '  sk-ant-oat01-test\n' } });
+    expect(parseClaudeCredentials(raw, NOW).accessToken).toBe('sk-ant-oat01-test');
+  });
+});
+
+describe('claudeCredentialsPath', () => {
+  it('honors CLAUDE_CONFIG_DIR like the CLI does', () => {
+    expect(claudeCredentialsPath({ CLAUDE_CONFIG_DIR: '/tmp/alt-claude' })).toBe('/tmp/alt-claude/.credentials.json');
+  });
+
+  it('falls back to ~/.claude when the override is blank', () => {
+    expect(claudeCredentialsPath({ CLAUDE_CONFIG_DIR: '  ' })).toMatch(/\.claude\/\.credentials\.json$/);
+  });
+
+  it('falls back to ~/.claude when unset', () => {
+    expect(claudeCredentialsPath({})).toMatch(/\.claude\/\.credentials\.json$/);
+  });
+});

test/home-path-abbreviation.test.ts

@@ -0,0 +1,166 @@
+/**
+ * @fileoverview Issue #273 and its mirror image: abbreviating `$HOME` in path labels.
+ *
+ * The rule ("show `~/project` rather than `/home/<user>/project`") had three
+ * implementations in the frontend, and two of them were platform-specific in
+ * opposite directions, so each looked correct to whoever wrote it:
+ *
+ *   - the Run menu's Recent Sessions rows matched `/home/<user>/` only, so on
+ *     macOS nothing was stripped, every row spent its first ~19 characters on an
+ *     identical `/Users/<user>/` prefix, and the left-to-right ellipsis removed
+ *     the tail that identifies the row (#273),
+ *   - the case-manage list matched `/Users/<user>` only, so on a Linux host no
+ *     case path was ever abbreviated at all.
+ *
+ * Both now call `_shortenHomePath()`, which is pinned here for both layouts, and
+ * a static guard fails if a fourth copy of the pattern appears.
+ *
+ * Loaded via `vm` against a stub CodemanApp with a fake DOM, same harness as
+ * history-list-controls.test.ts. Port: none (no browser, no server).
+ */
+
+import { readdirSync, readFileSync } from 'node:fs';
+import { resolve } from 'node:path';
+import vm from 'node:vm';
+import { describe, expect, it, vi } from 'vitest';
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+const PUBLIC = resolve(import.meta.dirname, '../src/web/public');
+
+/**
+ * The container the vm's `document.getElementById` resolves for the case list.
+ * Swapped per test: the closure lives in THIS realm, so the shipping code inside
+ * the vm reads whatever the current test installed.
+ */
+let currentCaseList: { innerHTML: string } | null = null;
+
+function loadTerminalUiPrototype(): Record<string, any> {
+  const source = readFileSync(resolve(PUBLIC, 'terminal-ui.js'), 'utf8');
+  const context = vm.createContext({
+    console,
+    CodemanApp: class CodemanApp {},
+    setInterval: vi.fn(),
+    clearInterval: vi.fn(),
+    setTimeout,
+    clearTimeout,
+    requestAnimationFrame: vi.fn(),
+    document: { addEventListener: vi.fn(), getElementById: () => null, createElement: () => ({}) },
+    window: { addEventListener: vi.fn(), removeEventListener: vi.fn() },
+  });
+  vm.runInContext(`${source}\nglobalThis.__proto = CodemanApp.prototype;`, context);
+  return (context as unknown as { __proto: Record<string, any> }).__proto;
+}
+
+function loadSessionUiPrototype(): Record<string, any> {
+  const source = readFileSync(resolve(PUBLIC, 'session-ui.js'), 'utf8');
+  const context = vm.createContext({
+    console,
+    CodemanApp: class CodemanApp {},
+    VoiceInput: {},
+    escapeHtml: (t: unknown) => String(t ?? ''),
+    setTimeout,
+    clearTimeout,
+    localStorage: { getItem: () => null, setItem: () => {} },
+    document: { getElementById: (id: string) => (id === 'caseManageList' ? currentCaseList : null) },
+    window: { addEventListener: vi.fn() },
+  });
+  vm.runInContext(`${source}\nglobalThis.__proto = CodemanApp.prototype;`, context);
+  return (context as unknown as { __proto: Record<string, any> }).__proto;
+}
+
+const terminalProto = loadTerminalUiPrototype();
+const sessionProto = loadSessionUiPrototype();
+const shorten = (p: unknown) => terminalProto._shortenHomePath.call(terminalProto, p);
+
+describe('_shortenHomePath', () => {
+  it('abbreviates the Linux home prefix', () => {
+    expect(shorten('/home/arkon/default/claudeman')).toBe('~/default/claudeman');
+  });
+
+  it('abbreviates the macOS home prefix, which the Run menu never did (#273)', () => {
+    expect(shorten('/Users/jordanryan/code/facet/facet-agency-ops')).toBe('~/code/facet/facet-agency-ops');
+  });
+
+  it('abbreviates the home directory itself, not only paths below it', () => {
+    // The case-manage list's old regex had no trailing slash and did collapse
+    // this to "~"; keep that, or a case whose path IS $HOME would regress.
+    expect(shorten('/home/arkon')).toBe('~');
+    expect(shorten('/Users/jordanryan')).toBe('~');
+  });
+
+  it('leaves paths that only look like a home prefix alone', () => {
+    expect(shorten('/homer/bob/x')).toBe('/homer/bob/x');
+    expect(shorten('/Userspace/bob/x')).toBe('/Userspace/bob/x');
+    expect(shorten('/home')).toBe('/home');
+    expect(shorten('/mnt/d/work')).toBe('/mnt/d/work');
+    expect(shorten('/opt/codeman')).toBe('/opt/codeman');
+  });
+
+  it('replaces only the leading occurrence', () => {
+    expect(shorten('/home/arkon/home/bob/x')).toBe('~/home/bob/x');
+  });
+
+  it('tolerates empty and missing input', () => {
+    expect(shorten('')).toBe('');
+    expect(shorten(undefined)).toBe('');
+    expect(shorten(null)).toBe('');
+  });
+});
+
+describe('renderCaseManageList path labels', () => {
+  function render(cases: Array<{ name: string; path: string; location?: string }>): string {
+    currentCaseList = { innerHTML: '' };
+    const app: any = {
+      cases,
+      _shortenHomePath: terminalProto._shortenHomePath,
+      renderCaseManageList: sessionProto.renderCaseManageList,
+    };
+    app.renderCaseManageList();
+    const html = currentCaseList.innerHTML;
+    currentCaseList = null;
+    return html;
+  }
+
+  it('abbreviates a Linux case path (the mirror of #273)', () => {
+    const html = render([{ name: 'demo', path: '/home/arkon/codeman-cases/demo' }]);
+    expect(html).toContain('~/codeman-cases/demo');
+    expect(html).not.toContain('/home/arkon/codeman-cases/demo');
+  });
+
+  it('still abbreviates a macOS case path', () => {
+    const html = render([{ name: 'demo', path: '/Users/jordanryan/codeman-cases/demo' }]);
+    expect(html).toContain('~/codeman-cases/demo');
+    expect(html).not.toContain('/Users/jordanryan/codeman-cases/demo');
+  });
+
+  it('renders the row when a case has no path at all', () => {
+    const html = render([{ name: 'demo', path: '' }]);
+    expect(html).toContain('demo');
+    expect(html).toContain('class="case-manage-path"');
+  });
+});
+
+describe('single implementation of the home-prefix rule', () => {
+  /** Every top-level frontend module (vendor/ and subdirs are not ours). */
+  const sources = readdirSync(PUBLIC)
+    .filter((name) => name.endsWith('.js'))
+    .map((name) => ({ name, text: readFileSync(resolve(PUBLIC, name), 'utf8') }));
+
+  it('has exactly one home-prefix regex, in terminal-ui.js', () => {
+    // Any regex literal anchored at a home root. Three of these had drifted
+    // apart; a fourth would drift the same way.
+    const pattern = /\/\^\\\/(?:\(\?:home\|Users\)|home|Users)\\\//g;
+    const hits = sources.flatMap(({ name, text }) => (text.match(pattern) ?? []).map(() => name));
+    expect(hits).toEqual(['terminal-ui.js']);
+  });
+
+  it('routes both session-ui path labels through the helper', () => {
+    // Deliberately counts calls rather than pinning source lines: the Run menu
+    // row is being restructured in #274, and this guard should survive that as
+    // long as the label still goes through the helper.
+    const sessionUi = sources.find((s) => s.name === 'session-ui.js')!.text;
+    const calls = sessionUi.match(/this\._shortenHomePath\(/g) ?? [];
+    expect(calls.length).toBeGreaterThanOrEqual(2);
+  });
+});

test/mocks/mock-route-context.ts

@@ -15,7 +15,11 @@ import { resolveTerminalHistoryConfig } from '../../src/config/terminal-history.
  * Creates a mock context that satisfies all port interfaces.
  * Pre-populated with one session for convenience.
  */
-export function createMockRouteContext(options?: { sessionId?: string; agentSkillEnabled?: boolean }) {
+export function createMockRouteContext(options?: {
+  sessionId?: string;
+  agentSkillEnabled?: boolean;
+  claudeVoiceEnabled?: boolean;
+}) {
   const sessionId = options?.sessionId ?? 'test-session-1';
   const session = createMockSession(sessionId);
   const sessions = new Map<string, MockSession>();
@@ -90,6 +94,8 @@ export function createMockRouteContext(options?: { sessionId?: string; agentSkil
     // case's .claude/skills. Overridable per test because the create-time
     // injection call sites are otherwise unreachable from a route test.
     getAgentSkillEnabled: vi.fn(async () => options?.agentSkillEnabled ?? false),
+    // Default OFF mirrors the shipped setting: no test opens a voice relay by accident.
+    getClaudeVoiceEnabled: vi.fn(async () => options?.claudeVoiceEnabled ?? false),
     getDefaultClaudeMdPath: vi.fn(async () => undefined),
     getLightState: vi.fn(() => ({ sessions: [], status: 'ok' })),
     getLightSessionsState: vi.fn(() => {

test/routes/voice-routes.test.ts

@@ -0,0 +1,302 @@
+/**
+ * @fileoverview Claude voice dictation routes.
+ *
+ * Covers the status endpoint's gating and the full relay round trip against a
+ * mock upstream (a local `ws` server speaking the Anthropic voice-stream
+ * protocol, selected via CODEMAN_VOICE_STREAM_BASE). WebSocket routes need a
+ * real listening server — app.inject() cannot do upgrades.
+ *
+ * What these pin, beyond "it works":
+ * - the OAuth token never appears in an API response,
+ * - the socket refuses exactly what the status endpoint calls unavailable,
+ * - a cross-site upgrade cannot open a stream on the operator's subscription.
+ *
+ * Port: 3230 (routes), 3231 (mock upstream)
+ */
+
+import { describe, it, expect, beforeEach, afterEach } from 'vitest';
+import Fastify, { type FastifyInstance } from 'fastify';
+import fastifyWebsocket from '@fastify/websocket';
+import WebSocket, { WebSocketServer } from 'ws';
+import { mkdirSync, writeFileSync, rmSync } from 'node:fs';
+import { homedir } from 'node:os';
+import { join } from 'node:path';
+import { createMockRouteContext, type MockRouteContext } from '../mocks/index.js';
+import { registerVoiceRoutes, _resetVoiceStreamCountForTesting } from '../../src/web/routes/voice-routes.js';
+import { MAX_CONCURRENT_STREAMS } from '../../src/config/voice.js';
+
+const PORT = 3230;
+const UPSTREAM_PORT = 3231;
+const TOKEN = 'sk-ant-oat01-voice-route-test';
+
+/** State captured by the mock upstream, so tests can assert what Codeman sent. */
+interface UpstreamCapture {
+  headers: Record<string, string | string[] | undefined>;
+  url: string;
+  binaryFrames: Buffer[];
+  textFrames: string[];
+  socket: WebSocket | null;
+}
+
+function writeCredentials(expiresAt: number | undefined): void {
+  const dir = join(homedir(), '.claude');
+  mkdirSync(dir, { recursive: true });
+  writeFileSync(
+    join(dir, '.credentials.json'),
+    JSON.stringify({ claudeAiOauth: { accessToken: TOKEN, expiresAt, subscriptionType: 'max' } })
+  );
+}
+
+function removeCredentials(): void {
+  rmSync(join(homedir(), '.claude', '.credentials.json'), { force: true });
+}
+
+function waitForClose(ws: WebSocket, timeoutMs = 3000): Promise<{ code: number; reason: string }> {
+  return new Promise((resolve, reject) => {
+    const timer = setTimeout(() => reject(new Error('WS close timeout')), timeoutMs);
+    ws.on('close', (code, reason) => {
+      clearTimeout(timer);
+      resolve({ code, reason: reason.toString() });
+    });
+  });
+}
+
+/** Wait for the first message satisfying `match`, ignoring earlier frames. */
+function waitForMessage(
+  ws: WebSocket,
+  match: (msg: Record<string, unknown>) => boolean,
+  timeoutMs = 3000
+): Promise<Record<string, unknown>> {
+  return new Promise((resolve, reject) => {
+    const timer = setTimeout(() => reject(new Error('WS message timeout')), timeoutMs);
+    const onMessage = (raw: WebSocket.RawData) => {
+      let msg: Record<string, unknown>;
+      try {
+        msg = JSON.parse(String(raw));
+      } catch {
+        return;
+      }
+      if (!match(msg)) return;
+      clearTimeout(timer);
+      ws.off('message', onMessage);
+      resolve(msg);
+    };
+    ws.on('message', onMessage);
+  });
+}
+
+function waitUntil(predicate: () => boolean, timeoutMs = 3000): Promise<void> {
+  return new Promise((resolve, reject) => {
+    const deadline = Date.now() + timeoutMs;
+    const tick = () => {
+      if (predicate()) return resolve();
+      if (Date.now() > deadline) return reject(new Error('condition not met in time'));
+      setTimeout(tick, 10);
+    };
+    tick();
+  });
+}
+
+describe('voice-routes', () => {
+  let app: FastifyInstance;
+  let ctx: MockRouteContext;
+  let upstream: WebSocketServer;
+  let capture: UpstreamCapture;
+  let voiceEnabled: boolean;
+
+  beforeEach(async () => {
+    _resetVoiceStreamCountForTesting();
+    voiceEnabled = true;
+    capture = { headers: {}, url: '', binaryFrames: [], textFrames: [], socket: null };
+
+    upstream = new WebSocketServer({ port: UPSTREAM_PORT, host: '127.0.0.1' });
+    upstream.on('connection', (socket, req) => {
+      capture.headers = req.headers;
+      capture.url = req.url ?? '';
+      capture.socket = socket;
+      socket.on('message', (raw, isBinary) => {
+        if (isBinary) capture.binaryFrames.push(Buffer.from(raw as Buffer));
+        else capture.textFrames.push(String(raw));
+      });
+    });
+    await new Promise<void>((resolve) => upstream.once('listening', resolve));
+    process.env.CODEMAN_VOICE_STREAM_BASE = `ws://127.0.0.1:${UPSTREAM_PORT}`;
+
+    writeCredentials(Date.now() + 3_600_000);
+
+    app = Fastify({ logger: false });
+    await app.register(fastifyWebsocket);
+    ctx = createMockRouteContext();
+    ctx.getClaudeVoiceEnabled = (async () => voiceEnabled) as typeof ctx.getClaudeVoiceEnabled;
+    registerVoiceRoutes(app, ctx as never, () => ({ bindHost: '127.0.0.1', allowedHosts: [], tunnelHost: null }));
+    await app.listen({ port: PORT, host: '127.0.0.1' });
+  });
+
+  afterEach(async () => {
+    delete process.env.CODEMAN_VOICE_STREAM_BASE;
+    removeCredentials();
+    await app.close();
+    await new Promise<void>((resolve) => upstream.close(() => resolve()));
+  });
+
+  describe('GET /api/voice/status', () => {
+    it('reports available with display metadata when enabled and signed in', async () => {
+      const res = await app.inject({ method: 'GET', url: '/api/voice/status' });
+      expect(res.statusCode).toBe(200);
+      expect(res.json().data).toMatchObject({ available: true, subscriptionType: 'max' });
+    });
+
+    it('never returns the access token', async () => {
+      const res = await app.inject({ method: 'GET', url: '/api/voice/status' });
+      expect(res.body).not.toContain(TOKEN);
+      expect(res.body).not.toContain('sk-ant');
+    });
+
+    it('reports disabled when the setting is off, without touching credentials', async () => {
+      voiceEnabled = false;
+      const res = await app.inject({ method: 'GET', url: '/api/voice/status' });
+      expect(res.json().data).toEqual({ available: false, reason: 'disabled' });
+    });
+
+    it('reports no-credentials when nothing is signed in', async () => {
+      removeCredentials();
+      const res = await app.inject({ method: 'GET', url: '/api/voice/status' });
+      expect(res.json().data).toEqual({ available: false, reason: 'no-credentials' });
+    });
+
+    it('reports expired separately, so the UI can say how to fix it', async () => {
+      writeCredentials(Date.now() - 1000);
+      const res = await app.inject({ method: 'GET', url: '/api/voice/status' });
+      expect(res.json().data.available).toBe(false);
+      expect(res.json().data.reason).toBe('expired');
+    });
+  });
+
+  describe('GET /ws/voice/stream', () => {
+    it('relays audio up and transcripts down, finalizing on request', async () => {
+      const ws = new WebSocket(`ws://127.0.0.1:${PORT}/ws/voice/stream?language=en&keyterms=tmux,respawn`);
+      const ready = waitForMessage(ws, (m) => m.t === 'ready');
+      await new Promise((resolve) => ws.once('open', resolve));
+      await ready;
+
+      ws.send(Buffer.alloc(3200));
+      await waitUntil(() => capture.binaryFrames.length > 0);
+      expect(capture.binaryFrames[0].length).toBe(3200);
+
+      const interim = waitForMessage(ws, (m) => m.t === 'transcript' && m.final === false);
+      capture.socket!.send(JSON.stringify({ type: 'TranscriptText', data: 'run the type check' }));
+      expect((await interim).text).toBe('run the type check');
+
+      ws.send(JSON.stringify({ t: 'finalize' }));
+      await waitUntil(() => capture.textFrames.some((f) => f.includes('CloseStream')));
+
+      const final = waitForMessage(ws, (m) => m.t === 'transcript' && m.final === true);
+      capture.socket!.send(JSON.stringify({ type: 'TranscriptEndpoint' }));
+      expect((await final).text).toBe('run the type check');
+
+      const { code } = await waitForClose(ws);
+      expect(code).toBe(1000);
+    });
+
+    it('authenticates upstream with the bearer token and forwards keyterms', async () => {
+      const ws = new WebSocket(`ws://127.0.0.1:${PORT}/ws/voice/stream?keyterms=tmux,respawn`);
+      await waitForMessage(ws, (m) => m.t === 'ready');
+      expect(capture.headers.authorization).toBe(`Bearer ${TOKEN}`);
+      expect(capture.headers['x-config-keyterms']).toBe('tmux,respawn');
+      expect(capture.url).toContain('encoding=linear16');
+      expect(capture.url).toContain('sample_rate=16000');
+      ws.close();
+    });
+
+    it('pings upstream immediately so the idle gap before first audio cannot drop it', async () => {
+      const ws = new WebSocket(`ws://127.0.0.1:${PORT}/ws/voice/stream`);
+      await waitForMessage(ws, (m) => m.t === 'ready');
+      await waitUntil(() => capture.textFrames.some((f) => f.includes('KeepAlive')));
+      ws.close();
+    });
+
+    it('surfaces an upstream transcription error to the browser', async () => {
+      const ws = new WebSocket(`ws://127.0.0.1:${PORT}/ws/voice/stream`);
+      await waitForMessage(ws, (m) => m.t === 'ready');
+      const err = waitForMessage(ws, (m) => m.t === 'error');
+      capture.socket!.send(JSON.stringify({ type: 'TranscriptError', description: 'no audio' }));
+      expect((await err).message).toBe('no audio');
+      ws.close();
+    });
+
+    it('drops an oversized audio frame instead of relaying it', async () => {
+      const ws = new WebSocket(`ws://127.0.0.1:${PORT}/ws/voice/stream`);
+      await waitForMessage(ws, (m) => m.t === 'ready');
+
+      ws.send(Buffer.alloc(200_000));
+      ws.send(Buffer.alloc(1600));
+      await waitUntil(() => capture.binaryFrames.length > 0);
+      // The legal frame arrived; the oversized one was never forwarded.
+      expect(capture.binaryFrames.every((f) => f.length === 1600)).toBe(true);
+      ws.close();
+    });
+
+    it('closes 4004 with the reason when the setting is off', async () => {
+      voiceEnabled = false;
+      const ws = new WebSocket(`ws://127.0.0.1:${PORT}/ws/voice/stream`);
+      const { code, reason } = await waitForClose(ws);
+      expect(code).toBe(4004);
+      expect(reason).toBe('disabled');
+    });
+
+    it('closes 4004 when no Claude login exists on the server', async () => {
+      removeCredentials();
+      const ws = new WebSocket(`ws://127.0.0.1:${PORT}/ws/voice/stream`);
+      const { code, reason } = await waitForClose(ws);
+      expect(code).toBe(4004);
+      expect(reason).toBe('no-credentials');
+    });
+
+    it('closes 4004 rather than streaming on an expired login', async () => {
+      writeCredentials(Date.now() - 1000);
+      const ws = new WebSocket(`ws://127.0.0.1:${PORT}/ws/voice/stream`);
+      const { code, reason } = await waitForClose(ws);
+      expect(code).toBe(4004);
+      expect(reason).toBe('expired');
+    });
+
+    it('refuses a cross-site upgrade (a foreign page must not spend the subscription)', async () => {
+      const ws = new WebSocket(`ws://127.0.0.1:${PORT}/ws/voice/stream`, {
+        headers: { origin: 'https://evil.example' },
+      });
+      const { code } = await waitForClose(ws);
+      expect(code).toBe(4003);
+      expect(capture.socket).toBeNull();
+    });
+
+    it('caps concurrent streams', async () => {
+      const open: WebSocket[] = [];
+      for (let i = 0; i < MAX_CONCURRENT_STREAMS; i++) {
+        const ws = new WebSocket(`ws://127.0.0.1:${PORT}/ws/voice/stream`);
+        await waitForMessage(ws, (m) => m.t === 'ready');
+        open.push(ws);
+      }
+      const extra = new WebSocket(`ws://127.0.0.1:${PORT}/ws/voice/stream`);
+      const { code, reason } = await waitForClose(extra);
+      expect(code).toBe(4008);
+      expect(reason).toBe('Too many voice streams');
+      for (const ws of open) ws.close();
+    });
+
+    it('frees a stream slot when the browser hangs up', async () => {
+      const first = new WebSocket(`ws://127.0.0.1:${PORT}/ws/voice/stream`);
+      await waitForMessage(first, (m) => m.t === 'ready');
+      first.close();
+      await waitForClose(first);
+
+      // The slot is reusable: MAX_CONCURRENT more streams must still be admitted.
+      const reopened: WebSocket[] = [];
+      for (let i = 0; i < MAX_CONCURRENT_STREAMS; i++) {
+        const ws = new WebSocket(`ws://127.0.0.1:${PORT}/ws/voice/stream`);
+        await waitForMessage(ws, (m) => m.t === 'ready');
+        reopened.push(ws);
+      }
+      for (const ws of reopened) ws.close();
+    });
+  });
+});

test/run-mode-ui.test.ts

@@ -760,6 +760,11 @@ describe('case selector refresh', () => {
     ];
     app.showToast = vi.fn();
 
+    // deleteCase re-renders the case-manage list, whose path label goes through
+    // _shortenHomePath. That method lives in terminal-ui.js, which this harness
+    // does not load (the real app always has it: load order 7 before 12).
+    app._shortenHomePath = (p: string) => p;
+
     await app.deleteCase('deleted-case');
 
     expect(quickStartCase.blur).toHaveBeenCalled();

test/session-options-structure.test.ts

@@ -0,0 +1,97 @@
+/**
+ * Session Options structural guard.
+ *
+ * The modal shares the `set-*` settings surface with App Settings, but its rail
+ * is a real switcher: switchOptionsTab shows one `.set-section` and hides the
+ * rest. Like App Settings, its load/save path is `getElementById` by a fixed set
+ * of ids, so dropping or renaming an element in the markup fails silently — the
+ * option just stops loading, or stops being written back.
+ *
+ * These tests read the REAL session-ui.js and index.html and pin that contract.
+ */
+import { describe, it, expect } from 'vitest';
+import { readFileSync } from 'node:fs';
+import { resolve } from 'node:path';
+
+const publicDir = resolve(import.meta.dirname, '../src/web/public');
+const html = readFileSync(resolve(publicDir, 'index.html'), 'utf8');
+const sessionUi = readFileSync(resolve(publicDir, 'session-ui.js'), 'utf8');
+
+/** The Session Options markup, so assertions can't be satisfied elsewhere. */
+function optionsModal(): string {
+  const start = html.indexOf('<div class="modal" id="sessionOptionsModal">');
+  expect(start).toBeGreaterThan(-1);
+  const end = html.indexOf('<!-- Close Session Confirmation Modal -->', start);
+  expect(end).toBeGreaterThan(start);
+  return html.slice(start, end);
+}
+
+/** Body of a session-ui.js method, by name. */
+function methodBody(signature: string): string {
+  const start = sessionUi.indexOf(`\n  ${signature} {`);
+  expect(start, `${signature} not found in session-ui.js`).toBeGreaterThan(-1);
+  return sessionUi.slice(start, sessionUi.indexOf('\n  },', start));
+}
+
+const TABS = ['respawn', 'context', 'ralph', 'summary'];
+
+describe('Session Options modal structure', () => {
+  it('keeps every element openSessionOptions and switchOptionsTab touch by id', () => {
+    const modal = optionsModal();
+    const ids = new Set<string>();
+    for (const sig of ['openSessionOptions(sessionId)', 'switchOptionsTab(tabName)', 'getRalphConfig()']) {
+      for (const m of methodBody(sig).matchAll(/getElementById\('([A-Za-z0-9_-]+)'\)/g)) ids.add(m[1]);
+    }
+    // openSessionOptions also drives elements outside this modal (tabs, toasts);
+    // only the ones it expects to find in here are this file's contract.
+    const outside = new Set(['sessionOptionsDoc']);
+    const missing = [...ids].filter((id) => !outside.has(id) && !modal.includes(`id="${id}"`));
+    expect(missing).toEqual([]);
+    expect(modal).toContain('id="sessionOptionsDoc"');
+  });
+
+  it('pairs each rail entry with exactly one section, in the same order', () => {
+    const modal = optionsModal();
+    const rail = [...modal.matchAll(/class="set-rail-item[^"]*" data-tab="([a-z]+)"/g)].map((m) => m[1]);
+    expect(rail).toEqual(TABS);
+    for (const tab of TABS) {
+      const hits = modal.split(`id="${tab}-tab"`).length - 1;
+      expect(hits, `section ${tab}-tab should exist exactly once`).toBe(1);
+    }
+    // switchOptionsTab queries the rail by THIS class; `.modal-tab-btn` here
+    // would silently stop the active marker from moving.
+    expect(methodBody('switchOptionsTab(tabName)')).toContain("'#sessionOptionsModal .set-rail-item'");
+    expect(methodBody('openSessionOptions(sessionId)')).toContain('.set-rail-item[data-tab="ralph"]');
+  });
+
+  it('opens with exactly one section visible, the rest hidden', () => {
+    const modal = optionsModal();
+    const visible = TABS.filter((t) => modal.includes(`<section class="set-section" id="${t}-tab"`));
+    expect(visible).toEqual(['respawn']);
+    for (const t of TABS.filter((t) => t !== 'respawn')) {
+      expect(modal).toContain(`<section class="set-section hidden" id="${t}-tab"`);
+    }
+  });
+
+  it('keeps the Claude-only rail entries marked, so external CLIs lose them', () => {
+    const modal = optionsModal();
+    for (const tab of ['respawn', 'ralph']) {
+      const entry = modal.match(new RegExp(`<button[^>]*data-tab="${tab}"[^>]*>`))?.[0] ?? '';
+      expect(entry, `${tab} rail entry`).toContain('data-claude-only');
+    }
+    expect(modal.match(/<button[^>]*data-tab="context"[^>]*>/)?.[0]).not.toContain('data-claude-only');
+  });
+
+  it('uses the shared settings surface rather than the modal-tab chrome', () => {
+    const modal = optionsModal();
+    expect(modal).toContain('class="modal-content modal-lg set-shell"');
+    expect(modal).toContain('class="set-body"');
+    expect(modal).not.toContain('class="modal-tabs"');
+    expect(modal).not.toContain('modal-tab-btn');
+    expect(modal).not.toContain('modal-tab-content');
+    // The `set-*` rules are shared by both modals through one :is() scope.
+    const css = readFileSync(resolve(publicDir, 'styles.css'), 'utf8');
+    expect(css).toContain(':is(#appSettingsModal, #sessionOptionsModal, #createCaseModal) .set-row {');
+    expect(css).toContain(':is(#sessionOptionsModal, #createCaseModal) .set-section.hidden {');
+  });
+});

test/voice-stream.test.ts

@@ -0,0 +1,111 @@
+/**
+ * Voice stream request building.
+ *
+ * The audio format lives in the query string, so a drift between these params
+ * and the browser worklet does not fail loudly — it transcribes as noise. These
+ * tests pin the contract, and pin that the bearer token never leaks into a URL
+ * (which would land it in proxy logs).
+ */
+import { describe, it, expect } from 'vitest';
+import {
+  buildVoiceStreamHeaders,
+  buildVoiceStreamUrl,
+  normalizeVoiceLanguage,
+  sanitizeKeyterms,
+} from '../src/web/voice-stream.js';
+import { MAX_KEYTERMS_HEADER_CHARS } from '../src/config/voice.js';
+
+describe('buildVoiceStreamUrl', () => {
+  it('pins linear16 / 16 kHz / mono, matching the browser worklet', () => {
+    const url = new URL(buildVoiceStreamUrl({}, {}));
+    expect(url.protocol).toBe('wss:');
+    expect(url.host).toBe('api.anthropic.com');
+    expect(url.pathname).toBe('/api/ws/speech_to_text/voice_stream');
+    expect(url.searchParams.get('encoding')).toBe('linear16');
+    expect(url.searchParams.get('sample_rate')).toBe('16000');
+    expect(url.searchParams.get('channels')).toBe('1');
+    expect(url.searchParams.get('stt_provider')).toBe('deepgram-nova3');
+  });
+
+  it('carries the language hint', () => {
+    expect(new URL(buildVoiceStreamUrl({ language: 'de' }, {})).searchParams.get('language')).toBe('de');
+  });
+
+  it('accepts a ws:// or wss:// base override for tests and gateways', () => {
+    const url = buildVoiceStreamUrl({}, { CODEMAN_VOICE_STREAM_BASE: 'ws://127.0.0.1:3199/' });
+    expect(url.startsWith('ws://127.0.0.1:3199/api/ws/speech_to_text/voice_stream?')).toBe(true);
+  });
+
+  it('ignores a non-websocket override rather than building a broken URL', () => {
+    expect(buildVoiceStreamUrl({}, { CODEMAN_VOICE_STREAM_BASE: 'https://evil.example' })).toContain(
+      'wss://api.anthropic.com'
+    );
+  });
+
+  it('never puts credentials in the URL', () => {
+    expect(buildVoiceStreamUrl({ language: 'en' }, {})).not.toMatch(/token|Bearer|sk-ant/i);
+  });
+});
+
+describe('normalizeVoiceLanguage', () => {
+  it.each([
+    ['en', 'en'],
+    ['en-US', 'en-US'],
+    ['multi', 'multi'],
+    ['', 'en'],
+    [undefined, 'en'],
+    ['not a language', 'en'],
+    ['../../etc/passwd', 'en'],
+  ])('normalizes %s to %s', (input, expected) => {
+    expect(normalizeVoiceLanguage(input as string | undefined)).toBe(expected);
+  });
+});
+
+describe('sanitizeKeyterms', () => {
+  it('joins terms with commas', () => {
+    expect(sanitizeKeyterms(['tmux', 'respawn'])).toBe('tmux,respawn');
+  });
+
+  it('replaces an inner comma with a space so one term cannot become two', () => {
+    expect(sanitizeKeyterms(['hello, world'])).toBe('hello world');
+  });
+
+  it('drops non-ASCII, which is not portable in a header value', () => {
+    expect(sanitizeKeyterms(['café', 'naïve'])).toBe('caf,nave');
+  });
+
+  it('strips CR/LF so a term cannot inject a header', () => {
+    const result = sanitizeKeyterms(['ok\r\nX-Evil: 1']);
+    expect(result).not.toContain('\r');
+    expect(result).not.toContain('\n');
+    expect(result).toBe('okX-Evil: 1');
+  });
+
+  it('dedupes and skips empties', () => {
+    expect(sanitizeKeyterms(['a', 'a', '', '   ', 'b'])).toBe('a,b');
+  });
+
+  it('truncates on a term boundary rather than mangling the last term', () => {
+    const terms = Array.from({ length: 500 }, (_, i) => `term${i}`);
+    const result = sanitizeKeyterms(terms);
+    expect(result.length).toBeLessThanOrEqual(MAX_KEYTERMS_HEADER_CHARS);
+    for (const term of result.split(',')) expect(term).toMatch(/^term\d+$/);
+  });
+});
+
+describe('buildVoiceStreamHeaders', () => {
+  it('sends the bearer token and identifies Codeman honestly', () => {
+    const headers = buildVoiceStreamHeaders('sk-ant-oat01-test', '1.2.3');
+    expect(headers.Authorization).toBe('Bearer sk-ant-oat01-test');
+    expect(headers['User-Agent']).toBe('codeman/1.2.3 (voice-bridge)');
+    expect(headers['x-app']).toBe('codeman');
+  });
+
+  it('omits the keyterms header when nothing survives sanitizing', () => {
+    expect(buildVoiceStreamHeaders('t', '1.0.0', ['', '  '])).not.toHaveProperty('x-config-keyterms');
+  });
+
+  it('includes sanitized keyterms when present', () => {
+    expect(buildVoiceStreamHeaders('t', '1.0.0', ['tmux', 'respawn'])['x-config-keyterms']).toBe('tmux,respawn');
+  });
+});