feat(readmymind): phase 3 PR 1: alternates, rethink steering, phone surfaces

- Alternate suggestions render as tappable rows that swap into the
  editable field, with their rationale as a visible second line (phones
  have no hover for a title tip). The predictor already returned up to 3
  kind-diverse suggestions; the modal showed only the first.
- Rethink now records every displayed suggestion as rejected and carries
  an optional free-text steer note (the API accepted steer since phase 2;
  the UI never collected it). Both reset on each open. The steer field
  stays available in the error phase: steering a failed run's retry is
  exactly when a note helps.
- The modal header names the target session: overview rows and the
  accessory key can open it for a session that is not the active tab.
- Phone surfaces: a keyboard-accessory 🧠 key (hidden unless
  readMyMindEnabled is ON and the active session is claude mode,
  re-derived after innerHTML rebuilds, settings applies, and session
  switches) and a Suggest strip on the phone overview's yellow waiting
  rows (waiting only: on red rows a dialog is on screen and input text
  would land in its menu; answer routing is phase 3 PR 2)
- The modal renders as a compact sheet on phones with 16px inputs (iOS
  zoom guard) and 44px tap targets
- Send/Insert/Rethink freeze during the loading phase so a stale
  suggestion cannot be sent mid-rethink
- test/readmymind-phase3-surfaces.test.ts pins the load-bearing facts in
  CI: key in BOTH bar layouts, [hidden] re-assertion over inline-flex,
  header button off phones, the waiting-only row gate, no terminal
  refocus from the readmymind action, steer outside the result div

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

CLAUDE.md

@@ -210,7 +210,7 @@ Codeman is a Claude Code session manager with web interface and autonomous Ralph
 
 **Approvals Inbox** (cross-session queue of prompts waiting on a human; `approvalsInboxEnabled`, SYNCED, default OFF: every surface is opt-in; only the store and answer endpoints run regardless, so flipping it ON shows anything already pending): `web/approval-inbox.ts` is a `sessionWaits`-style singleton fed by `/api/hook-event`, holding at most ONE item per session (a new prompt supersedes), claude-mode only, in-memory. Cards are answered via `POST /api/approvals/:id/answer`, which sends a digit / Esc / idle-prompt text through `writeViaMux` (menu answers never carry `\r`). ⚠️ `option` digits are accepted ONLY when they match options parsed from the captured pane frame, and the answer path RE-CAPTURES the pane first (a dialog that no longer parses on screen means the keystroke would land in the composer, so refuse with 409). ⚠️ Resolution on the heuristic `working` signal is restricted to `idle` items; permission/question items clear only on definitive signals (`stop`, `elicitation_complete`/`elicitation_response`, exit/delete, answer, supersede, 12h TTL). The frontend seeds from `GET /api/approvals` in `handleInit` (which is what makes tab alerts survive reloads), but only with the setting ON; push Approve/Deny buttons are also gated on it (`sendPushNotifications` strips `actions`/`approvalId` when OFF) and are answered from `sw.js` directly so they work with no tab open. Surfaces (all gated on the setting): header bell (marker-hidden until count > 0, phones never show it) + drawer (`approvals-ui.js`), phone overview NEEDS YOU answer strips (`mobile-overview.js`). Design: `docs/approvals-inbox-plan.md`.
 
-**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, desktop-only (mobile.css hides it; phone key is phase 3); 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`.
+**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, desktop; phones get the keyboard-accessory 🧠 key (`refreshReadMyMind()` in keyboard-accessory.js, re-derived after every innerHTML rebuild + settings apply + the tab-render tail; `.accessory-btn[hidden]` must stay re-asserted, inline-flex beats the UA hidden rule) plus a `🧠 Suggest` strip on the overview's YELLOW waiting rows ONLY (on red rows a dialog is on screen and `POST /input` text would land in its menu; answer routing via the approvals endpoint is phase-3 PR 2). Up to 3 kind-diverse suggestions: alternates swap into the editable field, Rethink records everything displayed as rejected and carries the optional steer note (resets each open, like the rejections); 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`.
 
 **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/`.
 
@@ -260,8 +260,6 @@ 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.
-
 **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)
 
 **Gesture control** (camera hand-tracking overlay, opt-in, default OFF): `CODEMAN_GESTURE=1` makes the feature *available*; `gestureControlEnabled` turns it on. The bundle is injected by `renderIndexHtml` only when enabled, which is why that method is `async` and reads settings with `readSettings(true)` (a fresh read: a post-save reload lands inside the 2s cache TTL and would otherwise render the pre-toggle state). **Source lives in `packages/gesture-control/`; edit there, run `npm run build:gesture`, and commit the regenerated bundle** because dev serves the committed bundle with no runtime bundler. The MediaPipe wasm + model are fetched separately and gitignored. ⚠️ Keep `MP_VERSION` in `fetch-gesture-assets.mjs` in sync with `@mediapipe/tasks-vision`. → [architecture-invariants#gesture-control-the-source-package](docs/architecture-invariants.md#gesture-control-the-source-package)

docs/readmymind-plan.md

@@ -122,14 +122,15 @@ Agent use cases this unlocks: a lead session records intentions as the user stat
 
 ## Phases
 
-1. **Intent store + capture + intent endpoints + skill docs.** Immediately useful to agents even before any UI exists.
-2. **Context assembler + predictor + predict endpoint + desktop button/modal.** The feature as pitched. The assembler ships with all collectors it can serve from day one (transcript, intent, git, run-summary, siblings); the approvals collector activates when PR #245 lands.
-3. **Phone accessory key, rethink steering, alternates row.**
-4. Explicitly later: proactive predict-on-idle (ghost suggestion chip), auto-compaction of `recentPrompts` into `goals` via a cheap model, codex/gemini capture, cross-case "global" intent.
+1. **Intent store + capture + intent endpoints + skill docs.** Immediately useful to agents even before any UI exists. Shipped 1.16.1 (PR #253).
+2. **Context assembler + predictor + predict endpoint + desktop button/modal.** The feature as pitched. The assembler ships with all collectors it can serve from day one (transcript, intent, git, run-summary, siblings); the approvals collector activates when PR #245 lands. Shipped 1.16.2 (PR #256).
+3. **Phase 3, PR 1: alternates row, rethink steering, phone surfaces.** Alternate suggestions as tappable rows that swap into the field; Rethink records everything displayed as rejected and carries the optional steer note; keyboard-accessory 🧠 key (`refreshReadMyMind()`, re-derived after every innerHTML rebuild, settings apply, and session switch); `🧠 Suggest` strip on the phone overview's YELLOW waiting rows only. Red rows deliberately get no shortcut yet: a dialog is on screen there and text sent via `POST /input` would land in its menu.
+4. **Phase 3, PR 2: the approvals fusion** (the Cloudflare OS learnings tie-in, items 1-2 of `cloudflare-os-learnings-plan.md`). `GET /api/sessions/:id/recap`: a deterministic "what was done, simplified" catch-up (last assistant tail + recent tool one-liners + git state) reusing the phase-2 collectors verbatim; no model call, effectively an observation-ledger v0 whose data source can later swap to a real ledger. Surfaces: collapsible "What happened" on approval cards (lazy-fetched), recap in the modal's loading phase (read while opus thinks), 🧠 on approval cards and red overview rows. Answer-aware Send: the predictor output gains an optional `answer` option number (validated against the pending dialog's parsed options, dropped when invalid) and the modal routes dialog answers through `POST /api/approvals/:id/answer` (option digits / idle text), keeping `POST /input` only for dialog-free sessions.
+5. Explicitly later: proactive predict-on-idle (ghost suggestion chip), auto-compaction of `recentPrompts` into `goals` via a cheap model, codex/gemini capture, cross-case "global" intent, a model-written prose recap (deterministic-only in v1).
 
 ## Open questions
 
-- Should Rethink's rejected-suggestion memory persist across modal closes, or reset each open?
+- ~~Should Rethink's rejected-suggestion memory persist across modal closes, or reset each open?~~ Decided in phase 2 and kept: reset each open (a fresh open is a fresh question); the steer note resets with it.
 - Is a composer-adjacent placement (next to the toolbar Run controls) better than the header for discoverability?
 - Pending-dialog input (source #1) consumes the approvals-inbox store (PR #245, merged): the phase-2 collector reads pending items directly from `src/approval-inbox.ts`.
 

docs/readmymind.md

@@ -23,11 +23,11 @@ Add `-u user:password` if your install has `CODEMAN_PASSWORD` set, and drop `-k`
 
 ## The 🧠 button
 
-On a Claude session, press the brain button in the header (desktop; the phone surface is a planned keyboard-accessory key). Codeman assembles everything it already knows: your goals, your recent prompts (with your voice: length, tone, shorthand), the tail of the last assistant reply, recent tool activity, git state (branch, dirty files, pending changesets), how long you have been away and what happened meanwhile, sibling sessions in the same case, and any dialog the session is currently waiting on. A one-shot model call (opus by default, `readMyMindModel` to override) turns that into 1-3 suggestions; the top one lands in an editable field with its rationale.
+On a Claude session, press the brain button in the header (desktop). On phones the same modal opens from the 🧠 key on the keyboard accessory bar, or from the `🧠 Suggest` strip under a yellow waiting row on the phone overview home screen (steer a session without opening its tab). Codeman assembles everything it already knows: your goals, your recent prompts (with your voice: length, tone, shorthand), the tail of the last assistant reply, recent tool activity, git state (branch, dirty files, pending changesets), how long you have been away and what happened meanwhile, sibling sessions in the same case, and any dialog the session is currently waiting on. A one-shot model call (opus by default, `readMyMindModel` to override) turns that into 1-3 kind-diverse suggestions (continue / verify / redirect); the top one lands in an editable field with its rationale, and the others render as tappable alternate rows that swap into the field.
 
 - **Send** submits it to the session (with Enter).
 - **Insert** drops it on the CLI composer *without* Enter, so you can edit it in the terminal before sending.
-- **Rethink** re-runs with the shown suggestion recorded as rejected.
+- **Rethink** re-runs with everything currently displayed recorded as rejected. The optional steer field above the buttons ("no, I meant the mobile bug") tells the re-run what you actually meant; it is your own words and outranks everything the predictor observed.
 - **Dismiss** closes; nothing happens.
 
 A prediction takes 5-90 seconds and costs real tokens; one runs per session at a time. If the session is sitting on a permission/question dialog, the suggestion is usually an answer to that dialog: that is intentional.
@@ -87,13 +87,14 @@ The `codeman` agent skill documents the same verbs (SKILL.md §3 plus `reference
 
 ## What comes next (phase 3+)
 
-Phone keyboard-accessory 🧠 key, a steer-note input on Rethink, and tappable alternate suggestions. Explicitly later: proactive predict-on-idle, auto-compaction of the prompt history into goals, non-Claude capture. See the phases section of [`readmymind-plan.md`](readmymind-plan.md).
+The approvals fusion: a per-session catch-up recap ("what was done, simplified", derived from the same collectors the predictor uses), shown on Approvals Inbox cards next to a 🧠 button, plus answer-aware Send that routes dialog answers through the approvals endpoint instead of typing into a menu. Explicitly later: proactive predict-on-idle, auto-compaction of the prompt history into goals, non-Claude capture. See the phases section of [`readmymind-plan.md`](readmymind-plan.md).
 
 ## Troubleshooting
 
 | Symptom | Cause / fix |
 | ------- | ----------- |
-| No 🧠 button in the header | `readMyMindEnabled` is OFF (App Settings → Panels), you are on a phone (desktop-only in this phase), or the active session is not claude-mode |
+| No 🧠 button in the header | `readMyMindEnabled` is OFF (App Settings → Panels), you are on a phone (the header button is desktop-only; phones use the keyboard-accessory 🧠 key and the overview waiting rows), or the active session is not claude-mode |
+| No 🧠 key on the phone keyboard bar | `readMyMindEnabled` is OFF, or the active session is not claude-mode (the key hides itself for codex/gemini/opencode/antigravity/shell sessions) |
 | 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/web/public/admin-ui.js

@@ -110,49 +110,34 @@
   }
 
   // ── Admin Users panel (injected into the App Settings modal) ──────────────
-  // The settings modal is a rail (table of contents) over ONE scrolling
-  // document, so this appends a rail entry plus a real section rather than a
-  // tab button plus a hidden panel.
   function injectUsersTab() {
     const modal = document.getElementById('appSettingsModal');
-    if (!modal || modal.querySelector('[data-section="settings-users"]')) return;
-    const rail = modal.querySelector('.set-rail-items');
-    const body = modal.querySelector('.set-doc');
-    if (!rail || !body) return;
+    if (!modal || modal.querySelector('[data-tab="settings-users"]')) return;
+    const tabs = modal.querySelector('.modal-tabs');
+    const body = modal.querySelector('.modal-body');
+    if (!tabs || !body) return;
     const btn = document.createElement('button');
-    btn.type = 'button';
-    btn.className = 'set-rail-item';
-    btn.dataset.section = 'settings-users';
-    btn.innerHTML =
-      '<svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/></svg><span>Users</span>';
-    rail.appendChild(btn);
-    const content = document.createElement('section');
-    content.className = 'set-section';
+    btn.className = 'modal-tab-btn';
+    btn.dataset.tab = 'settings-users';
+    btn.textContent = 'Users';
+    tabs.appendChild(btn);
+    const content = document.createElement('div');
+    content.className = 'modal-tab-content hidden';
     content.id = 'settings-users';
-    content.dataset.label = 'Users';
     content.innerHTML = `
-      <div class="set-section-head">
-        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M22 21v-2a4 4 0 0 0-3-3.87"/></svg>
-        <h2>Users</h2>
+      <div style="display:flex;justify-content:space-between;align-items:center;margin-bottom:8px">
+        <strong>Users</strong>
+        <span>
+          <button class="btn btn-sm" id="adminOpenPanel">Open Admin Panel</button>
+          <button class="btn btn-sm" id="adminAddUser">+ Add user</button>
+        </span>
       </div>
-      <p class="set-section-blurb">Users share the host account; this separates workspaces, it does not sandbox
+      <p class="form-hint">Users share the host account; this separates workspaces, it does not sandbox
         users from each other. Pair with Docker cases for isolation.</p>
-      <div class="set-group">
-        <div class="set-group-head"><h4>Accounts</h4></div>
-        <div class="set-group-body">
-          <div class="set-row">
-            <div class="set-row-text"><span class="set-row-label">Manage users</span></div>
-            <div class="set-row-actions">
-              <button class="btn-toolbar btn-sm" id="adminOpenPanel">Open Admin Panel</button>
-              <button class="btn-toolbar btn-sm" id="adminAddUser">+ Add user</button>
-            </div>
-          </div>
-          <div id="adminUsersTable"></div>
-          <p id="adminUsersMsg" style="min-height:1.2em;color:var(--text-muted)"></p>
-        </div>
-      </div>`;
+      <div id="adminUsersTable"></div>
+      <p id="adminUsersMsg" style="min-height:1.2em;color:var(--muted,#888)"></p>`;
     body.appendChild(content);
-    // Render whenever the entry is used (the shared switchSettingsTab scrolls to it).
+    // Render whenever the tab is shown (the shared switchSettingsTab toggles it).
     btn.addEventListener('click', renderUsers);
     content.querySelector('#adminAddUser').onclick = addUserFlow;
     content.querySelector('#adminOpenPanel').onclick = openAdminPanel;

src/web/public/app.js

@@ -3688,6 +3688,10 @@ class CodemanApp {
     this._refreshMobileOverviewIfVisible?.();
     // Same deal for the desktop home screen's tab column.
     this._refreshHomeSessionsIfVisible?.();
+    // The keyboard accessory bar's 🧠 key depends on the active session's mode
+    // (claude only) and the readMyMindEnabled setting; session switches and
+    // mode changes all funnel through this render.
+    if (typeof KeyboardAccessoryBar !== 'undefined') KeyboardAccessoryBar.refreshReadMyMind?.();
   }
 
   // Auto-wrap desktop session tabs to a second row when they overflow one row,

src/web/public/i18n.js

@@ -257,6 +257,8 @@
     'Reading your mind…': '正在读取您的想法…',
     'No suggestion this time. Rethink to try again.': '这次没有建议。点击「重想」再试一次。',
     Rethink: '重想',
+    'Steer the rethink (optional): tell it what you actually meant': '引导重想（可选）：告诉它您真正的意思',
+    'Optional steer note for Rethink': '重想的可选引导说明',
     Insert: '插入',
     "Put the text on the session's composer without submitting it": '将文本放入会话输入框但不提交',
     'Predicted prompt, editable': '预测的提示，可编辑',

src/web/public/keyboard-accessory.js

@@ -441,6 +441,7 @@ const KeyboardAccessoryBar = {
           <rect x="8" y="2" width="8" height="4" rx="1" ry="1"/>
         </svg>
       </button>
+      <button class="accessory-btn accessory-btn-readmymind" data-action="readmymind" title="Read My Mind: predict your next prompt" hidden>&#x1F9E0;</button>
       <button class="accessory-btn" data-action="esc" title="Escape">Esc</button>
       <button class="accessory-btn accessory-btn-dismiss" data-action="dismiss" title="Dismiss keyboard">
         <svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
@@ -477,6 +478,7 @@ const KeyboardAccessoryBar = {
         </svg>
       </button>
       <button class="accessory-btn" data-action="pick-path" title="Insert a file or folder path">&#x1F4C1; Path</button>
+      <button class="accessory-btn accessory-btn-readmymind" data-action="readmymind" title="Read My Mind: predict your next prompt" hidden>&#x1F9E0;</button>
       <button class="accessory-btn" data-action="clear-input" title="Clear the current unsent input">&#x232B; All</button>
       <button class="accessory-btn" data-action="tab" title="Tab">Tab</button>
       <button class="accessory-btn" data-action="shift-tab" title="Shift+Tab">⇧Tab</button>
@@ -528,6 +530,8 @@ const KeyboardAccessoryBar = {
     if (toolbar && toolbar.parentNode) {
       toolbar.parentNode.insertBefore(this.element, toolbar);
     }
+
+    this.refreshReadMyMind();
   },
 
   /** Switch between 'simple' and 'extended' button layouts */
@@ -536,6 +540,27 @@ const KeyboardAccessoryBar = {
     this._mode = mode;
     this.clearConfirm();
     this.element.innerHTML = mode === 'extended' ? this._extendedButtons : this._simpleButtons;
+    // innerHTML rebuilds ship the 🧠 key with its default `hidden` attribute;
+    // re-derive its visibility for the fresh element.
+    this.refreshReadMyMind();
+  },
+
+  /**
+   * Show the 🧠 key only when Read My Mind is opted in (`readMyMindEnabled`,
+   * synced) AND the active session is claude mode (the predictor is a 400 on
+   * every other CLI). Called after every innerHTML rebuild, from
+   * applyHeaderVisibilitySettings (settings load/save), and from the tab
+   * renderer tail (session switches funnel through it).
+   */
+  refreshReadMyMind() {
+    if (!this.element) return;
+    const btn = this.element.querySelector('[data-action="readmymind"]');
+    if (!btn) return;
+    const hasApp = typeof app !== 'undefined' && app;
+    const session = hasApp && app.activeSessionId ? app.sessions?.get(app.activeSessionId) : null;
+    const enabled = hasApp && app.readMyMindEnabled?.() === true;
+    const claudeMode = !!session && (!session.mode || session.mode === 'claude');
+    btn.hidden = !(enabled && claudeMode);
   },
 
   _confirmTimer: null,
@@ -613,6 +638,11 @@ const KeyboardAccessoryBar = {
       case 'pick-path':
         this.pickPath();
         break;
+      case 'readmymind':
+        // Opens the shared prediction modal (readmymind-ui.js). Deliberately
+        // not in refocusActions: the modal takes over and the keyboard closes.
+        app.openReadMyMind?.();
+        break;
       case 'clear-input':
         app.clearTerminalInput?.();
         break;

src/web/public/mobile-overview.js

@@ -642,12 +642,16 @@ Object.assign(CodemanApp.prototype, {
     // Approvals Inbox: a pending dialog for this session gets an answer strip
     // BELOW the row (the row itself is a <button>, so actions cannot nest
     // inside it). Tapping the row still opens the session, unchanged.
+    // Waiting rows get the Read My Mind shortcut strip the same way.
     const approval = this._pendingApprovalForSession(row.id);
-    if (approval) {
+    const rmmShortcut = !approval && this._readMyMindRowShortcut(row);
+    if (approval || rmmShortcut) {
       const wrap = document.createElement('div');
       wrap.className = 'mobile-overview-row-wrap';
       wrap.appendChild(item);
-      wrap.appendChild(this._buildMobileOverviewApprovalStrip(approval));
+      wrap.appendChild(
+        approval ? this._buildMobileOverviewApprovalStrip(approval) : this._buildMobileOverviewRmmStrip(row.id)
+      );
       return wrap;
     }
 
@@ -691,6 +695,39 @@ Object.assign(CodemanApp.prototype, {
     return strip;
   },
 
+  /**
+   * Whether a NEEDS YOU row gets the Read My Mind shortcut: opt-in setting,
+   * live claude-mode session, and only the `waiting` state. A yellow row is a
+   * bare composer waiting for a prompt; on red rows a dialog is on screen and
+   * sent text would land in its menu, so those keep the approval strip (or the
+   * open-the-session path) until the predictor can answer dialogs through the
+   * approvals endpoint (phase 3 PR 2, docs/readmymind-plan.md).
+   */
+  _readMyMindRowShortcut(row) {
+    if (row.state !== 'waiting') return false;
+    if (!this.readMyMindEnabled || !this.readMyMindEnabled()) return false;
+    const session = this.sessions.get(row.id);
+    return !!session && (!session.mode || session.mode === 'claude');
+  },
+
+  /** A one-button strip opening the prediction modal for this row's session. */
+  _buildMobileOverviewRmmStrip(sessionId) {
+    const strip = document.createElement('div');
+    strip.className = 'mobile-overview-approval-strip';
+    strip.setAttribute('data-i18n-skip', '');
+    const btn = document.createElement('button');
+    btn.type = 'button';
+    btn.className = 'mobile-overview-approval-btn rmm';
+    btn.textContent = '🧠 Suggest';
+    btn.setAttribute('aria-label', 'Predict my next prompt');
+    btn.addEventListener('click', (ev) => {
+      ev.stopPropagation();
+      this.openReadMyMind(sessionId);
+    });
+    strip.appendChild(btn);
+    return strip;
+  },
+
   /** A past conversation. Tapping it resumes, which creates a fresh session. */
   _buildMobileOverviewPastRow(row) {
     const item = document.createElement('button');

src/web/public/mobile.css

@@ -530,8 +530,9 @@ html.mobile-init .file-browser-panel {
     display: none !important;
   }
 
-  /* Read My Mind 🧠 button: desktop header only in phase 2; the phone surface
-     is a planned keyboard-accessory key (docs/readmymind-plan.md phase 3). */
+  /* Read My Mind 🧠 button: desktop header only. The phone surfaces are the
+     keyboard-accessory 🧠 key and the overview's waiting-row Suggest strip
+     (docs/readmymind-plan.md phase 3), both opening the same modal. */
   .btn-icon-header.btn-readmymind {
     display: none !important;
   }
@@ -680,13 +681,6 @@ html.mobile-init .file-browser-panel {
     box-shadow: 0 0 8px 2px color-mix(in srgb, var(--green) 55%, transparent) !important;
   }
 
-  /* No orbiting ring on phone tabs (styles.css draws one on desktop/tablet):
-     the dot is already enlarged to 9px with a glow here, and a 15px ring in a
-     32px tab would sit on top of the tab name. The glow is the phone's tell. */
-  .session-tab .tab-status.busy::after {
-    display: none;
-  }
-
   /* Truncate tab names more aggressively on mobile */
   .session-tab .tab-name {
     max-width: 50px;
@@ -1297,8 +1291,11 @@ html.mobile-init .file-browser-panel {
     flex-direction: column;
   }
 
-  /* Small modals (confirmations, dialogs) — auto-height, not full-screen */
-  .modal-content.modal-sm {
+  /* Small modals (confirmations, dialogs) — auto-height, not full-screen.
+     Read My Mind is a decision dialog, not a workspace, so it gets the same
+     compact-sheet treatment instead of the full-screen default. */
+  .modal-content.modal-sm,
+  .modal-content.readmymind-modal {
     height: auto;
     max-height: 85vh;
     border-radius: 12px;
@@ -1306,6 +1303,16 @@ html.mobile-init .file-browser-panel {
     width: calc(100% - 2rem);
   }
 
+  /* Read My Mind phone polish: iOS zooms the page when focusing sub-16px
+     inputs, and alternate rows are tap targets. */
+  .readmymind-prompt-input,
+  .readmymind-steer-input {
+    font-size: 16px;
+  }
+  .readmymind-alt {
+    min-height: 44px;
+  }
+
   /* Modal safe area padding - all sides for full-screen modals */
   .ios-device .modal-content {
     padding-top: var(--safe-area-top);
@@ -2607,6 +2614,11 @@ html.mobile-init .file-browser-panel {
     border-color: var(--error);
     color: var(--error);
   }
+  /* Read My Mind shortcut on waiting rows (mobile-overview.js). */
+  .mobile-overview-approval-btn.rmm {
+    border-color: var(--accent);
+    color: var(--accent);
+  }
 
   /* Attention states mirror the session tabs exactly: red blink when the agent
      asked something (permission / question), yellow blink when it is waiting for
@@ -3106,359 +3118,3 @@ html:is([data-skin="paper-gray"], [data-skin="solarized-light"], [data-skin="cat
     padding: 0.65rem 1rem;
   }
 }
-
-/* ============================================================================
-   App Settings, compact layout (<= 860px)
-
-   Same single scrolling document as the desktop rail layout; only the
-   navigation changes. The rail collapses to its search field and #appSettingsJump
-   takes over as the sticky "where am I / jump elsewhere" control, so a phone
-   spends its vertical budget on settings instead of on chrome.
-
-   Groups render as one inset rounded list with hairline dividers rather than a
-   stack of separate cards: at 390px the per-card borders were most of the pixels.
-   ============================================================================ */
-@media (max-width: 860px) {
-  #appSettingsModal .modal-content.modal-lg {
-    width: 100%;
-    max-width: 100%;
-    height: 100%;
-    max-height: 100%;
-  }
-
-  #appSettingsModal .set-body {
-    display: flex;
-    flex-direction: column;
-    min-height: 0;
-  }
-
-  /* Rail keeps only its search field, laid out as a bar */
-  #appSettingsModal .set-rail {
-    flex-direction: row;
-    align-items: center;
-    border-right: 0;
-    border-bottom: 1px solid var(--border);
-    background: transparent;
-    padding: 10px 14px;
-    overflow: visible;
-    flex-shrink: 0;
-  }
-
-  #appSettingsModal .set-rail-items,
-  #appSettingsModal .set-rail-foot {
-    display: none;
-  }
-
-  #appSettingsModal .set-search {
-    margin: 0;
-    flex: 1;
-  }
-
-  #appSettingsModal .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 {
-    display: inline-flex;
-  }
-
-  #appSettingsModal .set-foot {
-    display: none;
-  }
-
-  #appSettingsModal .set-doc {
-    padding: 0 14px 34px;
-    flex: 1;
-  }
-
-  /* ── jump control ──────────────────────────────────────────────────── */
-  #appSettingsModal .set-jump {
-    display: flex;
-    position: sticky;
-    top: 0;
-    z-index: 4;
-    align-items: center;
-    gap: 8px;
-    width: 100%;
-    margin: 10px 0 2px;
-    padding: 10px 12px;
-    border-radius: 11px;
-    font: inherit;
-    font-size: 0.82rem;
-    color: var(--text);
-    background: rgba(var(--accent-rgb), 0.13);
-    border: 1px solid rgba(var(--accent-rgb), 0.3);
-    -webkit-backdrop-filter: blur(14px);
-    backdrop-filter: blur(14px);
-    cursor: pointer;
-  }
-
-  #appSettingsModal .set-jump-ico {
-    color: var(--accent);
-    flex-shrink: 0;
-  }
-
-  #appSettingsModal .set-jump-label {
-    font-weight: 580;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  #appSettingsModal .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 {
-    transform: rotate(180deg);
-  }
-
-  #appSettingsModal .set-jump-veil {
-    display: none;
-    position: fixed;
-    inset: 0;
-    z-index: 8;
-    background: rgba(4, 8, 13, 0.62);
-  }
-
-  #appSettingsModal .set-jump-menu {
-    display: none;
-    position: absolute;
-    left: 14px;
-    right: 14px;
-    z-index: 9;
-    padding: 7px;
-    border-radius: 16px;
-    /* Opaque on purpose: --floating-bg is translucent and the settings rows
-       behind the menu bleed through it. */
-    background: var(--bg-card);
-    border: 1px solid var(--control-border);
-    box-shadow: var(--elevated-shadow);
-    max-height: 70vh;
-    overflow-y: auto;
-  }
-
-  #appSettingsModal.jump-open .set-jump-veil,
-  #appSettingsModal.jump-open .set-jump-menu {
-    display: block;
-  }
-
-  #appSettingsModal .set-jump-row {
-    display: flex;
-    align-items: center;
-    gap: 11px;
-    width: 100%;
-    padding: 11px 12px;
-    border: 0;
-    border-radius: 11px;
-    background: transparent;
-    color: var(--text-dim);
-    font: inherit;
-    font-size: 0.82rem;
-    text-align: left;
-  }
-
-  #appSettingsModal .set-jump-row svg {
-    color: var(--text-muted);
-    flex-shrink: 0;
-  }
-
-  #appSettingsModal .set-jump-row .set-jump-count {
-    margin-left: auto;
-    font-size: 0.62rem;
-    color: var(--text-muted);
-  }
-
-  #appSettingsModal .set-jump-row.active {
-    background: rgba(var(--accent-rgb), 0.14);
-    color: var(--text);
-    font-weight: 570;
-  }
-
-  #appSettingsModal .set-jump-row.active svg {
-    color: var(--accent);
-  }
-
-  /* ── sections step down: the jump pill already names the current one ── */
-  #appSettingsModal .set-section {
-    padding-top: 0;
-  }
-
-  #appSettingsModal .set-section + .set-section {
-    border-top: 0;
-    margin-top: 0;
-  }
-
-  #appSettingsModal .set-section-head {
-    gap: 7px;
-    margin: 18px 0 2px;
-  }
-
-  #appSettingsModal .set-section-head svg {
-    padding: 0;
-    border: 0;
-    background: none;
-    color: var(--text-muted);
-    width: 12px;
-    height: 12px;
-  }
-
-  #appSettingsModal .set-section-head h2 {
-    font-size: 0.6rem;
-    font-weight: 640;
-    letter-spacing: 0.1em;
-    text-transform: uppercase;
-    color: var(--text-muted);
-  }
-
-  #appSettingsModal .set-section-head::after {
-    content: '';
-    flex: 1;
-    height: 1px;
-    background: linear-gradient(90deg, var(--border), transparent);
-  }
-
-  #appSettingsModal .set-section-blurb {
-    display: none;
-  }
-
-  /* ── inset grouped list ────────────────────────────────────────────── */
-  #appSettingsModal .set-group {
-    margin-top: 14px;
-  }
-
-  #appSettingsModal .set-group + .set-group {
-    margin-top: 16px;
-  }
-
-  #appSettingsModal .set-group-head {
-    margin-bottom: 7px;
-    padding: 0 3px;
-  }
-
-  #appSettingsModal .set-group-hint {
-    padding: 0 3px;
-  }
-
-  #appSettingsModal .set-group-body {
-    gap: 0;
-    background: rgba(255, 255, 255, 0.035);
-    border: 1px solid rgba(255, 255, 255, 0.06);
-    border-radius: 13px;
-    overflow: hidden;
-  }
-
-  #appSettingsModal .set-group-body > .set-row {
-    background: transparent;
-    border: 0;
-    border-radius: 0;
-    padding: 12px 13px;
-    gap: 12px;
-  }
-
-  #appSettingsModal .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 {
-    padding: 12px;
-  }
-
-  #appSettingsModal .set-group-body > .event-type-grid {
-    padding: 12px;
-    margin: 0;
-  }
-
-  #appSettingsModal .set-row-label {
-    font-size: 0.84rem;
-  }
-
-  #appSettingsModal .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 {
-    flex-direction: column;
-    align-items: stretch;
-    gap: 9px;
-  }
-
-  #appSettingsModal .set-row.has-field .set-select,
-  #appSettingsModal .set-row.has-field .set-input {
-    width: 100%;
-    min-width: 0;
-    max-width: none;
-    box-sizing: border-box;
-  }
-
-  #appSettingsModal .set-row-actions-wide {
-    width: 100%;
-  }
-
-  #appSettingsModal .set-row-actions-wide .set-input {
-    flex: 1;
-    min-width: 0;
-  }
-
-  #appSettingsModal .set-num {
-    width: 76px;
-  }
-
-  /* Bigger touch targets for the toggles and chips */
-  #appSettingsModal .switch-sm {
-    width: 40px;
-    height: 24px;
-  }
-
-  #appSettingsModal .switch-sm .slider:before {
-    height: 18px;
-    width: 18px;
-  }
-
-  #appSettingsModal .switch-sm input:checked + .slider:before {
-    transform: translateX(16px);
-  }
-
-  #appSettingsModal .set-chip {
-    font-size: 0.78rem;
-    padding: 9px 14px;
-  }
-
-  #appSettingsModal .set-modelgrid {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-    gap: 8px;
-  }
-
-  #appSettingsModal .set-minigrid {
-    grid-template-columns: 1fr;
-  }
-
-  #appSettingsModal .set-mini .set-select {
-    width: 148px;
-  }
-
-  /* One scrollable line beats a ragged two-row wrap for 7 effort levels */
-  #appSettingsModal .set-segment {
-    overflow-x: auto;
-    scrollbar-width: none;
-  }
-
-  #appSettingsModal .set-segment::-webkit-scrollbar {
-    display: none;
-  }
-
-  #appSettingsModal .set-segment button {
-    flex: 0 0 auto;
-    padding: 8px 12px;
-  }
-}

src/web/public/readmymind-ui.js

@@ -5,9 +5,16 @@
  * setting is ON) opens a modal that asks the server for the user's most likely
  * next prompt (`POST /api/sessions/:id/readmymind`, one-shot predictor over the
  * case's intent profile + live session signals). The top suggestion lands in an
- * editable single-line field with its rationale below; buttons are Send (with
- * Enter), Insert (drop on the CLI composer WITHOUT Enter, for editing), Rethink
- * (re-run with the shown suggestion recorded as rejected), Dismiss.
+ * editable single-line field with its rationale below; the predictor returns up
+ * to 3 kind-diverse suggestions (continue / verify / redirect) and the rest
+ * render as tappable alternate rows that swap into the field. Buttons are Send
+ * (with Enter), Insert (drop on the CLI composer WITHOUT Enter, for editing),
+ * Rethink (re-run with every displayed suggestion recorded as rejected, plus an
+ * optional free-text steer note from the field above the buttons), Dismiss.
+ *
+ * Phone surfaces reuse this same modal: the keyboard-accessory 🧠 key
+ * (keyboard-accessory.js) and the phone overview's waiting-row shortcut
+ * (mobile-overview.js) both call openReadMyMind(sessionId).
  *
  * Suggestions are NEVER auto-sent: the explicit click here is the security
  * boundary for observed/injectable predictor inputs, so suggestion text is
@@ -31,10 +38,14 @@ Object.assign(CodemanApp.prototype, {
     return this.loadAppSettingsFromStorage().readMyMindEnabled === true;
   },
 
-  /** Open the modal for the active session and start a prediction. */
-  openReadMyMind() {
-    const sessionId = this.activeSessionId;
-    const session = sessionId ? this.sessions.get(sessionId) : null;
+  /**
+   * Open the modal and start a prediction. Defaults to the active session;
+   * phone surfaces (accessory key, overview rows) pass an explicit id so a
+   * prediction can start without switching tabs first.
+   */
+  openReadMyMind(sessionId) {
+    const id = sessionId || this.activeSessionId;
+    const session = id ? this.sessions.get(id) : null;
     if (!session) {
       this.showToast('Select a session first', 'warning');
       return;
@@ -43,8 +54,15 @@ Object.assign(CodemanApp.prototype, {
       this.showToast('Read My Mind works on Claude sessions only', 'warning');
       return;
     }
-    // Rethink memory resets on each open (a fresh open is a fresh question).
-    this._rmm = { sessionId, shown: null, rejected: [], busy: false };
+    // Rethink memory resets on each open (a fresh open is a fresh question),
+    // and so does the steer note (it belongs to the question it steered).
+    this._rmm = { sessionId: id, shown: null, alternates: [], rejected: [], busy: false };
+    const steer = document.getElementById('readMyMindSteer');
+    if (steer) steer.value = '';
+    // Name the target in the header: overview rows and the accessory key can
+    // open this for a session that is not the active tab.
+    const sessionLabel = document.getElementById('readMyMindSession');
+    if (sessionLabel) sessionLabel.textContent = this.getSessionName?.(session) || session.name || '';
     document.getElementById('readMyMindModal')?.classList.add('active');
     this._readMyMindPredict();
   },
@@ -54,14 +72,25 @@ Object.assign(CodemanApp.prototype, {
     this._rmm = null;
   },
 
-  /** Run (or re-run) the prediction and render the top suggestion. */
+  /** Run (or re-run) the prediction and render the suggestions. */
   async _readMyMindPredict() {
     const state = this._rmm;
     if (!state || state.busy) return;
     state.busy = true;
     this._rmmSetPhase('loading');
 
-    const body = state.rejected.length > 0 ? { rejected: state.rejected.slice(-10) } : {};
+    const body = {};
+    if (state.rejected.length > 0) body.rejected = state.rejected.slice(-10);
+    // The steer note is the user's own words; server-side it rides in the
+    // highest-authority context tier. Bounds mirror ReadMyMindPredictSchema.
+    const steerEl = document.getElementById('readMyMindSteer');
+    const steer = steerEl
+      ? steerEl.value
+          .replace(/[\r\n]+/g, ' ')
+          .trim()
+          .slice(0, 2000)
+      : '';
+    if (steer) body.steer = steer;
     const data = await this._apiJson(`/api/sessions/${state.sessionId}/readmymind`, { method: 'POST', body });
 
     // The modal may have been dismissed (or reopened for another session) while
@@ -69,14 +98,21 @@ Object.assign(CodemanApp.prototype, {
     if (this._rmm !== state) return;
     state.busy = false;
 
-    const suggestion = data && data.suggestions && data.suggestions[0];
-    if (!suggestion) {
+    const suggestions = (data && data.suggestions) || [];
+    if (suggestions.length === 0) {
       this._rmmSetPhase('error');
       return;
     }
-    state.shown = suggestion;
+    state.shown = suggestions[0];
+    state.alternates = suggestions.slice(1);
     this._rmmSetPhase('ready');
+    this._rmmShowSuggestion(state.shown);
+    this._rmmRenderAlternates();
+    document.getElementById('readMyMindPrompt')?.focus();
+  },
 
+  /** Paint one suggestion into the editable field, kind chip, and rationale. */
+  _rmmShowSuggestion(suggestion) {
     const input = document.getElementById('readMyMindPrompt');
     const why = document.getElementById('readMyMindWhy');
     const kind = document.getElementById('readMyMindKind');
@@ -88,7 +124,49 @@ Object.assign(CodemanApp.prototype, {
       kind.textContent = suggestion.kind || 'continue';
       kind.className = `readmymind-kind readmymind-kind-${suggestion.kind || 'continue'}`;
     }
-    input?.focus();
+  },
+
+  /** The non-primary suggestions as tappable rows below the rationale. */
+  _rmmRenderAlternates() {
+    const state = this._rmm;
+    const box = document.getElementById('readMyMindAlternates');
+    if (!box) return;
+    box.textContent = '';
+    if (!state) return;
+    state.alternates.forEach((alt, i) => {
+      const row = document.createElement('button');
+      row.type = 'button';
+      row.className = 'readmymind-alt';
+      const kind = document.createElement('span');
+      kind.className = `readmymind-kind readmymind-kind-${alt.kind || 'continue'}`;
+      kind.textContent = alt.kind || 'continue';
+      const col = document.createElement('span');
+      col.className = 'readmymind-alt-col';
+      const text = document.createElement('span');
+      text.className = 'readmymind-alt-text';
+      text.textContent = alt.prompt;
+      col.appendChild(text);
+      // The rationale as a visible second line: phones have no hover, and the
+      // why is what separates two plausible-looking prompts.
+      if (alt.why) {
+        const why = document.createElement('span');
+        why.className = 'readmymind-alt-why';
+        why.textContent = alt.why;
+        col.appendChild(why);
+      }
+      row.appendChild(kind);
+      row.appendChild(col);
+      row.addEventListener('click', () => {
+        // Swap: the tapped alternate becomes the shown suggestion and the
+        // previously shown one takes its row, so browsing loses nothing.
+        const prev = state.shown;
+        state.shown = alt;
+        state.alternates[i] = prev;
+        this._rmmShowSuggestion(alt);
+        this._rmmRenderAlternates();
+      });
+      box.appendChild(row);
+    });
   },
 
   /**
@@ -114,11 +192,19 @@ Object.assign(CodemanApp.prototype, {
     this.showToast(withEnter ? 'Prompt sent' : 'Inserted, press Enter in the terminal to send', 'success');
   },
 
-  /** Re-run with the shown suggestion recorded as a rejection. */
+  /**
+   * Re-run with every displayed suggestion recorded as a rejection (the user
+   * saw them all and wanted none: strong negative signal) plus the optional
+   * steer note, read by _readMyMindPredict from its field.
+   */
   rethinkReadMyMind() {
     const state = this._rmm;
     if (!state || state.busy) return;
-    if (state.shown && state.shown.prompt) state.rejected.push(state.shown.prompt);
+    for (const s of [state.shown, ...state.alternates]) {
+      if (!s || !s.prompt) continue;
+      const prompt = s.prompt.slice(0, 1000);
+      if (!state.rejected.includes(prompt)) state.rejected.push(prompt);
+    }
     this._readMyMindPredict();
   },
 
@@ -129,7 +215,15 @@ Object.assign(CodemanApp.prototype, {
     modal.querySelector('.readmymind-loading').style.display = phase === 'loading' ? '' : 'none';
     modal.querySelector('.readmymind-result').style.display = phase === 'ready' ? '' : 'none';
     modal.querySelector('.readmymind-error').style.display = phase === 'error' ? '' : 'none';
-    const rethinkBtn = document.getElementById('readMyMindRethink');
-    if (rethinkBtn) rethinkBtn.disabled = phase === 'loading';
+    // The steer field shows in ready AND error phases: steering a failed run's
+    // retry is exactly when a note helps. Hidden only while loading.
+    const steer = document.getElementById('readMyMindSteer');
+    if (steer) steer.style.display = phase === 'loading' ? 'none' : '';
+    // While the predictor runs the hidden field still holds the previous text;
+    // freeze every action so a stale suggestion cannot be sent mid-rethink.
+    for (const btnId of ['readMyMindRethink', 'readMyMindInsert', 'readMyMindSend']) {
+      const btn = document.getElementById(btnId);
+      if (btn) btn.disabled = phase === 'loading';
+    }
   },
 });

src/web/public/settings-ui.js

@@ -354,8 +354,11 @@ Object.assign(CodemanApp.prototype, {
     // Phone overview home screen: only meaningful under 430px, so the row is
     // hidden elsewhere rather than offering a toggle that changes nothing.
     document.getElementById('appSettingsMobileOverview').checked = settings.mobileOverviewEnabled ?? defaults.mobileOverviewEnabled ?? false;
+    const phoneOnly = MobileDetection.getDeviceType() === 'mobile' ? '' : 'none';
     const mobileOverviewItem = document.getElementById('appSettingsMobileOverviewItem');
-    if (mobileOverviewItem) mobileOverviewItem.style.display = MobileDetection.getDeviceType() === 'mobile' ? '' : 'none';
+    if (mobileOverviewItem) mobileOverviewItem.style.display = phoneOnly;
+    const phoneSection = document.getElementById('appSettingsPhoneSection');
+    if (phoneSection) phoneSection.style.display = phoneOnly;
     // Session Manager, Away Digest and Cron buttons all default OFF (opt-in under
     // Display → Header Displays; the Cron button also ships with btn-cron--hidden
     // in the template, so an unchecked box and a hidden button stay consistent).
@@ -497,15 +500,12 @@ Object.assign(CodemanApp.prototype, {
     // Updates section — show current version, reset transient result/progress UI.
     this._initUpdatesSection();
 
-    // Model cards + effort segment are views over the hidden <select>s above,
-    // so they must be synced AFTER those have been given their stored values.
-    this._initSettingsNav();
-    this._syncSettingsChips();
-    this._syncModelCards();
-    this._syncEffortSegment();
-    // Back to the top of the document (one scroll, not a tab reset).
-    this.switchSettingsTab('settings-terminal');
+    // Reset to first tab and wire up tab switching
+    this.switchSettingsTab('settings-display');
     const modal = document.getElementById('appSettingsModal');
+    modal.querySelectorAll('.modal-tabs .modal-tab-btn').forEach(btn => {
+      btn.onclick = () => this.switchSettingsTab(btn.dataset.tab);
+    });
     modal.classList.add('active');
 
     // Activate focus trap
@@ -514,359 +514,44 @@ Object.assign(CodemanApp.prototype, {
   },
 
   /**
-   * Show the App Settings "Codex" group only on instances where the codex binary
-   * actually resolves. Both settings in it (approval bypass, animated status
-   * effects) are passed to `codex` at launch, so on a box without codex the
-   * group is a promise nothing can keep.
+   * Show the App Settings "Codex CLI" tab only on instances where the codex
+   * binary actually resolves. Both settings on it (approval bypass, animated
+   * status effects) are passed to `codex` at launch, so on a box without codex
+   * the tab is a promise nothing can keep.
    *
    * Availability comes from the injected `window.__codemanCliAvailable`, shared
-   * with the welcome buttons and the run-mode dropdown, so the group never
-   * flickers in and back out. The inputs stay in the DOM either way, so a user
-   * without codex can never silently wipe the codex prefs of an instance that
-   * has it (openAppSettings/saveAppSettings still read and write them).
+   * with the welcome buttons and the run-mode dropdown, so the tab never flickers
+   * in and back out. Only the tab BUTTON is toggled: the panel already carries
+   * `.modal-tab-content.hidden` unless it is the selected tab, and
+   * openAppSettings() always reopens on Display, so an unreachable button is
+   * enough to keep the panel unreachable.
    *
    * Note the inverted default versus the run buttons: an UNKNOWN flag hides this
-   * group. Hiding it costs a user nothing, whereas hiding a run button would
-   * leave a working install with nothing to click.
+   * tab. Hiding a settings tab costs a user nothing (the values stay in the DOM
+   * and are still saved), whereas hiding a run button would leave a working
+   * install with nothing to click.
    */
   _applyCodexSettingsVisibility() {
-    const group = document.getElementById('appSettingsCodexGroup');
-    if (group) group.style.display = window.__codemanCliAvailable?.codex === true ? '' : 'none';
+    const btn = document.querySelector('#appSettingsModal .modal-tab-btn[data-tab="settings-codex"]');
+    if (btn) btn.style.display = window.__codemanCliAvailable?.codex === true ? '' : 'none';
   },
 
-  /**
-   * Scroll the settings document to a section.
-   *
-   * Kept under the historical `switchSettingsTab` name because it is the shared
-   * entry point: openAppSettings() calls it, and admin-ui.js's injected Users
-   * entry routes through it too. Sections are never hidden any more — the rail
-   * is a table of contents over ONE document, so "switching" is a scroll.
-   */
-  switchSettingsTab(sectionId) {
-    // The Shortcuts list renders lazily so it reflects the CURRENT registry
-    // (defaults + overrides) every time it is reached.
-    if (sectionId === 'settings-shortcuts') this.renderShortcutSettingsList?.();
-    const doc = document.getElementById('appSettingsDoc');
-    const section = document.getElementById(sectionId);
-    if (doc && section && typeof section.offsetTop === 'number') {
-      // On phones the jump pill is sticky at the top of the document, so land
-      // the section head below it instead of underneath it.
-      const jump = document.getElementById('appSettingsJump');
-      const inset = jump && jump.offsetParent ? jump.offsetHeight + 16 : 6;
-      doc.scrollTop = Math.max(0, section.offsetTop - inset);
-    }
-    this._setActiveSettingsSection(sectionId);
-  },
-
-  /** Paint the rail + jump pill for the section currently in view. */
-  _setActiveSettingsSection(sectionId) {
+  switchSettingsTab(tabName) {
     const modal = document.getElementById('appSettingsModal');
-    if (!modal || typeof modal.querySelectorAll !== 'function') return;
-    let active = null;
-    modal.querySelectorAll('.set-rail-item').forEach(item => {
-      const on = item.dataset.section === sectionId;
-      item.classList.toggle('active', on);
-      if (on) active = item;
+    // Toggle active class on tab buttons
+    modal.querySelectorAll('.modal-tabs .modal-tab-btn').forEach(btn => {
+      btn.classList.toggle('active', btn.dataset.tab === tabName);
     });
-    modal.querySelectorAll('.set-jump-row').forEach(row => {
-      row.classList.toggle('active', row.dataset.section === sectionId);
+    // Toggle hidden class on tab content
+    modal.querySelectorAll('.modal-tab-content').forEach(content => {
+      content.classList.toggle('hidden', content.id !== tabName);
     });
-    const label = document.getElementById('appSettingsJump')?.querySelector('.set-jump-label');
-    if (label && active) label.textContent = active.textContent.trim();
-    const ico = document.getElementById('appSettingsJump')?.querySelector('.set-jump-ico');
-    const src = active?.querySelector('svg');
-    if (ico && src) ico.innerHTML = src.innerHTML;
-  },
-
-  /**
-   * Wire the settings navigation once per page: rail clicks, the phone jump
-   * menu, scroll-spy, live search, chip/card/segment views over the real inputs,
-   * and the collapsible Advanced group. Idempotent — openAppSettings() calls it
-   * on every open, and re-registering listeners on every open would multiply
-   * them across a long-lived tab.
-   */
-  _initSettingsNav() {
-    const modal = document.getElementById('appSettingsModal');
-    const doc = document.getElementById('appSettingsDoc');
-    if (!modal || !doc || typeof modal.querySelectorAll !== 'function') return;
-    this._buildModelCards();
-    this._buildEffortSegment();
-    // Rebuilt on every open: admin-ui.js appends its Users entry to the rail
-    // after the first open, and the menu must not drift from the rail.
-    this._buildSettingsJumpMenu();
-    if (modal.dataset.navReady === '1') return;
-    modal.dataset.navReady = '1';
-
-    // Delegated so rail entries injected later (Users) work without rewiring.
-    modal.querySelector('.set-rail-items')?.addEventListener('click', e => {
-      const item = e.target.closest?.('.set-rail-item');
-      if (item?.dataset.section) this.switchSettingsTab(item.dataset.section);
-    });
-    document.getElementById('appSettingsJumpMenu')?.addEventListener('click', e => {
-      const row = e.target.closest?.('.set-jump-row');
-      if (!row?.dataset.section) return;
-      this._toggleSettingsJump(false);
-      this.switchSettingsTab(row.dataset.section);
-    });
-    document.getElementById('appSettingsJump')?.addEventListener('click', () => this._toggleSettingsJump());
-    document.getElementById('appSettingsJumpVeil')?.addEventListener('click', () => this._toggleSettingsJump(false));
-
-    // Scroll-spy: the rail follows the document rather than driving it.
-    doc.addEventListener('scroll', () => {
-      if (this._settingsSpyQueued) return;
-      this._settingsSpyQueued = true;
-      requestAnimationFrame(() => {
-        this._settingsSpyQueued = false;
-        const sections = [...doc.querySelectorAll('.set-section')].filter(s => s.offsetParent !== null);
-        if (!sections.length) return;
-        let current = sections[0].id;
-        for (const s of sections) {
-          if (s.offsetTop - doc.scrollTop <= 140) current = s.id;
-        }
-        this._setActiveSettingsSection(current);
-      });
-    });
-
-    const search = document.getElementById('appSettingsSearch');
-    search?.addEventListener('input', () => this._filterSettings(search.value));
-
-    // Chips are labels wrapping the real checkbox; mirror the checked state onto
-    // the label so the styling does not depend on :has() support.
-    modal.querySelectorAll('.set-chip input').forEach(input => {
-      input.addEventListener('change', () => this._syncSettingsChips());
-    });
-
-    const advHead = modal.querySelector('.set-group-head-toggle');
-    const advGroup = advHead?.closest('.set-group-advanced');
-    if (advHead && advGroup) {
-      const toggle = () => {
-        const open = advGroup.classList.toggle('open');
-        advHead.setAttribute('aria-expanded', open ? 'true' : 'false');
-      };
-      advHead.addEventListener('click', toggle);
-      advHead.addEventListener('keydown', e => {
-        if (e.key === 'Enter' || e.key === ' ') {
-          e.preventDefault();
-          toggle();
-        }
-      });
-    }
-
-    document.getElementById('appSettingsOpusContext1m')?.addEventListener('change', () => this._applyModelSelection());
-  },
-
-  /** Phone jump menu, mirrored from the rail so the two can never drift. */
-  _buildSettingsJumpMenu() {
-    const modal = document.getElementById('appSettingsModal');
-    const menu = document.getElementById('appSettingsJumpMenu');
-    if (!modal || !menu) return;
-    menu.innerHTML = '';
-    modal.querySelectorAll('.set-rail-item').forEach(item => {
-      const row = document.createElement('button');
-      row.type = 'button';
-      row.className = 'set-jump-row';
-      row.dataset.section = item.dataset.section;
-      row.innerHTML = item.innerHTML;
-      const section = document.getElementById(item.dataset.section);
-      const count = section ? section.querySelectorAll('input, select').length : 0;
-      if (count) {
-        const n = document.createElement('span');
-        n.className = 'set-jump-count';
-        n.textContent = String(count);
-        row.appendChild(n);
-      }
-      menu.appendChild(row);
-    });
-  },
-
-  _toggleSettingsJump(force) {
-    const modal = document.getElementById('appSettingsModal');
-    if (!modal) return;
-    const open = force === undefined ? !modal.classList.contains('jump-open') : force;
-    modal.classList.toggle('jump-open', open);
-    document.getElementById('appSettingsJump')?.setAttribute('aria-expanded', open ? 'true' : 'false');
-  },
-
-  /** Mirror checkbox state onto the chip labels (see _initSettingsNav). */
-  _syncSettingsChips() {
-    document.querySelectorAll('#appSettingsModal .set-chip').forEach(chip => {
-      chip.classList.toggle('is-on', !!chip.querySelector('input')?.checked);
-    });
-  },
-
-  /**
-   * Build the model picker cards from the hidden <select>'s own options, so the
-   * select stays the single source of truth that openAppSettings/saveAppSettings
-   * read and write by id. The `[1m]` variants are folded away: context width is a
-   * property of the chosen model (the "1M context window" switch), not a rival
-   * setting that silently loses to it.
-   */
-  _buildModelCards() {
-    const select = document.getElementById('appSettingsClaudeModel');
-    const grid = document.getElementById('appSettingsModelCards');
-    if (!select || !grid || grid.dataset.built === '1' || !select.options) return;
-    grid.innerHTML = '';
-    [...select.options]
-      .filter(opt => opt.dataset.variant !== '1m')
-      .forEach(opt => {
-        const card = document.createElement('button');
-        card.type = 'button';
-        card.className = 'set-modelcard';
-        card.setAttribute('role', 'radio');
-        card.dataset.value = opt.value;
-        if (opt.dataset.ctx === '1') card.dataset.ctx = '1';
-        const top = document.createElement('span');
-        top.className = 'set-mc-top';
-        const name = document.createElement('span');
-        name.className = 'set-mc-name';
-        name.textContent = opt.textContent;
-        top.appendChild(name);
-        const dot = document.createElement('span');
-        dot.className = 'set-mc-dot';
-        top.appendChild(dot);
-        card.appendChild(top);
-        const meta = document.createElement('span');
-        meta.className = 'set-mc-meta';
-        meta.textContent = opt.dataset.meta || '';
-        card.appendChild(meta);
-        if (opt.dataset.ctx === '1') {
-          const ctx = document.createElement('span');
-          ctx.className = 'set-mc-ctx';
-          ctx.textContent = '1M capable';
-          card.appendChild(ctx);
-        }
-        card.addEventListener('click', () => {
-          this._settingsModelBase = opt.value;
-          this._applyModelSelection();
-        });
-        grid.appendChild(card);
-      });
-    grid.dataset.built = '1';
-  },
-
-  /** Derive card + context-switch state from the select's stored value. */
-  _syncModelCards() {
-    const select = document.getElementById('appSettingsClaudeModel');
-    if (!select) return;
-    const value = select.value || '';
-    this._settingsModelBase = value.endsWith('[1m]') ? value.slice(0, -4) : value;
-    if (value.endsWith('[1m]')) {
-      const ctx = document.getElementById('appSettingsOpusContext1m');
-      if (ctx) ctx.checked = true;
-    }
-    this._applyModelSelection();
-  },
-
-  /** Compose card + context switch back into the select's value. */
-  _applyModelSelection() {
-    const select = document.getElementById('appSettingsClaudeModel');
-    const grid = document.getElementById('appSettingsModelCards');
-    if (!select || !grid) return;
-    const base = this._settingsModelBase || '';
-    let capable = false;
-    grid.querySelectorAll('.set-modelcard').forEach(card => {
-      const on = card.dataset.value === base;
-      card.classList.toggle('selected', on);
-      card.setAttribute('aria-checked', on ? 'true' : 'false');
-      if (on) capable = card.dataset.ctx === '1';
-    });
-    const ctxOn = !!document.getElementById('appSettingsOpusContext1m')?.checked;
-    select.value = base && capable && ctxOn ? `${base}[1m]` : base;
-    // A model with no 1M variant makes the switch inert; say so instead of
-    // leaving a toggle that looks like it does something.
-    const row = document.getElementById('appSettingsContextRow');
-    const desc = document.getElementById('appSettingsContextDesc');
-    const inert = !!base && !capable;
-    row?.classList.toggle('set-row-disabled', inert);
-    if (desc) {
-      desc.textContent = inert
-        ? 'The selected model has no 1M variant.'
-        : base
-          ? 'Available for Fable 5, Opus and Opus 4.6.'
-          : 'With no model pinned, this starts new sessions on Opus with a 1M window.';
-    }
-  },
-
-  _buildEffortSegment() {
-    const select = document.getElementById('appSettingsThinkingEffort');
-    const seg = document.getElementById('appSettingsEffortSegment');
-    if (!select || !seg || seg.dataset.built === '1' || !select.options) return;
-    seg.innerHTML = '';
-    [...select.options].forEach(opt => {
-      const btn = document.createElement('button');
-      btn.type = 'button';
-      btn.setAttribute('role', 'radio');
-      btn.dataset.value = opt.value;
-      btn.textContent = opt.textContent;
-      btn.addEventListener('click', () => {
-        select.value = opt.value;
-        this._syncEffortSegment();
-      });
-      seg.appendChild(btn);
-    });
-    seg.dataset.built = '1';
-  },
-
-  _syncEffortSegment() {
-    const select = document.getElementById('appSettingsThinkingEffort');
-    const seg = document.getElementById('appSettingsEffortSegment');
-    if (!select || !seg) return;
-    seg.querySelectorAll('button').forEach(btn => {
-      const on = btn.dataset.value === (select.value || '');
-      btn.classList.toggle('selected', on);
-      btn.setAttribute('aria-checked', on ? 'true' : 'false');
-    });
-  },
-
-  /**
-   * Live filter across every section. Everything stays mounted (that is the
-   * point of the single-document layout), so a search only hides units that do
-   * not match, then collapses groups and sections left with nothing visible.
-   */
-  _filterSettings(query) {
-    const doc = document.getElementById('appSettingsDoc');
-    if (!doc) return;
-    const q = (query || '').trim().toLowerCase();
-    const UNIT = '.set-row, .set-chip, .set-modelgrid, .set-minigrid, .event-type-grid, #appSettingsShortcutsList';
-    const units = [...doc.querySelectorAll(UNIT)];
-    let anyVisible = false;
-
-    units.forEach(unit => {
-      if (!q) {
-        unit.classList.remove('set-hit-hidden');
-        return;
-      }
-      const hay = `${unit.dataset?.search || ''} ${unit.textContent || ''}`.toLowerCase();
-      const hit = hay.includes(q);
-      unit.classList.toggle('set-hit-hidden', !hit);
-      if (hit) anyVisible = true;
-    });
-
-    // A chip wrapper is only empty when every chip inside it is hidden.
-    doc.querySelectorAll('.set-chips').forEach(wrap => {
-      const hasVisible = [...wrap.querySelectorAll('.set-chip')].some(c => !c.classList.contains('set-hit-hidden'));
-      wrap.classList.toggle('set-hit-hidden', !!q && !hasVisible);
-    });
-
-    doc.querySelectorAll('.set-group').forEach(group => {
-      const hasVisible = [...group.querySelectorAll(UNIT)].some(u => !u.classList.contains('set-hit-hidden'));
-      group.classList.toggle('set-hit-hidden', !!q && !hasVisible);
-      // An Advanced group that matches must open, or the hit stays invisible.
-      if (q && hasVisible) group.classList.add('open');
-    });
-
-    doc.querySelectorAll('.set-section').forEach(section => {
-      const hasVisible = [...section.querySelectorAll('.set-group')].some(g => !g.classList.contains('set-hit-hidden'));
-      section.classList.toggle('set-hit-hidden', !!q && !hasVisible);
-    });
-
-    const empty = document.getElementById('appSettingsSearchEmpty');
-    if (empty) empty.hidden = !q || anyVisible;
-    if (!q) doc.querySelectorAll('.set-group-advanced').forEach(g => g.classList.remove('open'));
+    // The Shortcuts tab renders lazily so the list reflects the CURRENT
+    // registry (defaults + overrides) every time it is opened.
+    if (tabName === 'settings-shortcuts') this.renderShortcutSettingsList?.();
   },
 
   closeAppSettings() {
-    this._toggleSettingsJump(false);
     document.getElementById('appSettingsModal').classList.remove('active');
 
     // Deactivate focus trap and restore focus
@@ -2432,6 +2117,9 @@ Object.assign(CodemanApp.prototype, {
     if (readMyMindBtn) {
       readMyMindBtn.classList.toggle('btn-readmymind--hidden', settings.readMyMindEnabled !== true);
     }
+    // The phone accessory bar's 🧠 key follows the same setting (plus the
+    // active session's mode); keep it in step on every settings apply.
+    if (typeof KeyboardAccessoryBar !== 'undefined') KeyboardAccessoryBar.refreshReadMyMind?.();
 
     // Plan-usage chip — shown by default on desktop, OFF on handhelds (App
     // Settings → Display → "Plan Usage Limits"). The template always ships it

src/web/public/styles.css

@@ -1316,31 +1316,11 @@ html[data-line-anim="packet"] .connection-line.line-enter {
 
 .session-tab .tab-status.idle { background: var(--green); }
 .session-tab .tab-status.busy {
-  position: relative;
   background: var(--green);
   animation: pulse 1.5s infinite;
   /* Performance: GPU acceleration for animation */
   will-change: opacity;
 }
-/* Orbiting ring on a WORKING tab: the same `tab-load-spin` circle the desktop
-   home rail (.home-sessions-dot--working) and the phone overview
-   (.mobile-overview-dot--working) draw, so "working" reads identically on every
-   surface. Pseudo-element on purpose — the skin block below sets
-   `box-shadow: none` on .tab-status.busy to keep tab dots halo-free, and it
-   outranks any plain class rule here; a ring drawn with a border is untouched by
-   that and keeps the tabs quiet while still showing motion. Absolutely
-   positioned, so it never widens the tab or shifts the label. */
-.session-tab .tab-status.busy::after {
-  content: '';
-  position: absolute;
-  inset: -3px;
-  border: 1.5px solid color-mix(in srgb, var(--green) 25%, transparent);
-  border-top-color: var(--green);
-  border-radius: 50%;
-  animation: tab-load-spin 0.7s linear infinite;
-  pointer-events: none;
-}
-
 .session-tab .tab-status.error { background: var(--red); }
 .session-tab .tab-status.ended { background: var(--text-muted); opacity: 0.5; }
 
@@ -5785,6 +5765,11 @@ body.touch-device .terminal-container .xterm .xterm-helper-textarea {
   min-height: 0;
 }
 
+/* App Settings packs a 2-column toggle grid; give it room so right-column
+   switches aren't cramped against the edge (other modal-lg modals stay 540). */
+#appSettingsModal .modal-content.modal-lg {
+  max-width: 600px;
+}
 
 /* Mobile Case Picker - Base Styles */
 .mobile-case-picker-sheet {
@@ -10712,6 +10697,17 @@ kbd {
   font-size: 13px;
   line-height: 1;
 }
+/* Which session the prediction targets: overview rows and the accessory key
+   can open the modal for a session that is not the active tab. */
+.readmymind-session {
+  margin-left: 8px;
+  font-size: 12px;
+  font-weight: 400;
+  color: var(--text-dim);
+}
+.readmymind-session:empty {
+  display: none;
+}
 
 /* Read My Mind modal: top suggestion in an editable single-line field with the
    kind badge beside it and the rationale below. */
@@ -10768,6 +10764,75 @@ kbd {
   font-size: 12px;
   color: var(--text-dim);
 }
+/* Alternates: the predictor's other kind-diverse suggestions (verify /
+   redirect) as tappable rows; tapping swaps one into the editable field.
+   Text is set via textContent only (predictor output is observed/injectable
+   content, same rule as the field above). */
+.readmymind-alternates {
+  margin-top: 10px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+.readmymind-alternates:empty {
+  display: none;
+}
+.readmymind-alt {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  text-align: left;
+  padding: 7px 9px;
+  background: var(--bg-dark);
+  border: 1px solid var(--control-border);
+  border-radius: 8px;
+  color: var(--text);
+  cursor: pointer;
+  font-family: inherit;
+}
+.readmymind-alt:hover {
+  border-color: var(--accent);
+}
+.readmymind-alt-col {
+  flex: 1 1 auto;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.readmymind-alt-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 12px;
+}
+/* Rationale as a visible second line: phones have no hover for a title tip,
+   and the why is what separates two plausible-looking prompts. */
+.readmymind-alt-why {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 11px;
+  color: var(--text-dim);
+}
+/* Steer note: optional free-text guidance for Rethink ("no, I meant the
+   mobile bug"); sent as the highest-authority tier of the re-run's context. */
+.readmymind-steer-input {
+  margin-top: 10px;
+  width: 100%;
+  font-size: 12px;
+  padding: 7px 9px;
+  background: transparent;
+  color: var(--text);
+  border: 1px dashed var(--control-border);
+  border-radius: 8px;
+}
+.readmymind-steer-input:focus {
+  outline: none;
+  border-color: var(--accent);
+  border-style: solid;
+}
 .readmymind-error {
   padding: 12px 4px;
   color: var(--text-dim);
@@ -12090,6 +12155,13 @@ body.touch-device.cjk-input-visible .main {
   transition: background 0.15s, border-color 0.15s;
 }
 
+/* The 🧠 key ships `hidden` until refreshReadMyMind() reveals it; the
+   inline-flex rules above (and mobile.css's) beat the UA [hidden] rule, so
+   hiding must be re-asserted, same trap as the home-sessions column. */
+.accessory-btn[hidden] {
+  display: none !important;
+}
+
 .accessory-btn.confirming {
   background: color-mix(in srgb, var(--yellow) 18%, var(--bg-input));
   border-color: var(--yellow);
@@ -14317,698 +14389,9 @@ html[data-skin="daylight-blue"] .welcome-btn-tunnel.active:hover {
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .session-tab .tab-status.busy::after,
   .home-sessions-row,
   .home-sessions-dot,
   .home-sessions-dot::after {
     animation: none !important;
   }
 }
-
-/* ═══════════════════════════════════════════════════════════════════════════
-   App Settings (#appSettingsModal)
-
-   A left rail that is a TABLE OF CONTENTS over ONE scrolling document, not a
-   tab switcher: every section stays mounted, the rail follows the scroll, and
-   the browser's own find-in-page still works across all of them.
-
-   Scoped under #appSettingsModal on purpose. `.modal-tabs`/`.modal-tab-btn`
-   are shared with #sessionOptionsModal and #createCaseModal, so this file
-   introduces its own `set-*` classes rather than restyling those.
-   ═══════════════════════════════════════════════════════════════════════════ */
-
-#appSettingsModal .modal-content.modal-lg {
-  max-width: min(960px, 96vw);
-  width: min(960px, 96vw);
-  height: min(700px, 88vh);
-  max-height: 88vh;
-}
-
-#appSettingsModal .set-shell-head {
-  flex-shrink: 0;
-}
-
-#appSettingsModal .set-head-actions {
-  display: flex;
-  flex-direction: row-reverse;
-  align-items: center;
-  gap: 6px;
-  margin-left: auto;
-}
-
-/* The phone layout drops the bottom action bar and saves from the header
-   instead; on desktop the footer owns Save, so this stays hidden. */
-#appSettingsModal .set-head-save {
-  display: none;
-  font: inherit;
-  font-size: 0.82rem;
-  font-weight: 620;
-  letter-spacing: -0.01em;
-  padding: 8px 15px;
-  border: 0;
-  border-radius: 10px;
-  cursor: pointer;
-  background: linear-gradient(180deg, var(--accent-grad-a), var(--accent-grad-b));
-  color: var(--accent-ink);
-}
-
-#appSettingsModal .set-body {
-  display: grid;
-  grid-template-columns: 212px minmax(0, 1fr);
-  flex: 1;
-  min-height: 0;
-}
-
-#appSettingsModal .set-foot {
-  margin-top: 0;
-  flex-shrink: 0;
-}
-
-/* ── rail ─────────────────────────────────────────────────────────────── */
-#appSettingsModal .set-rail {
-  display: flex;
-  flex-direction: column;
-  padding: 12px 10px;
-  border-right: 1px solid var(--border);
-  background: rgba(0, 0, 0, 0.16);
-  overflow-y: auto;
-  min-height: 0;
-}
-
-#appSettingsModal .set-search {
-  position: relative;
-  display: flex;
-  align-items: center;
-  margin-bottom: 10px;
-  flex-shrink: 0;
-}
-
-#appSettingsModal .set-search svg {
-  position: absolute;
-  left: 9px;
-  color: var(--text-muted);
-  pointer-events: none;
-}
-
-#appSettingsModal .set-search input {
-  width: 100%;
-  box-sizing: border-box;
-  padding: 7px 9px 7px 28px;
-  font: inherit;
-  font-size: 0.75rem;
-  color: var(--text);
-  background: rgba(0, 0, 0, 0.22);
-  border: 1px solid var(--border);
-  border-radius: 8px;
-  outline: none;
-  -webkit-appearance: none;
-  appearance: none;
-}
-
-#appSettingsModal .set-search input:focus {
-  border-color: var(--accent);
-}
-
-#appSettingsModal .set-rail-items {
-  display: flex;
-  flex-direction: column;
-  gap: 1px;
-}
-
-#appSettingsModal .set-rail-item {
-  display: flex;
-  align-items: center;
-  gap: 9px;
-  padding: 7px 10px;
-  border: 0;
-  border-radius: 7px;
-  background: transparent;
-  color: var(--text-dim);
-  font: inherit;
-  font-size: 0.77rem;
-  cursor: pointer;
-  text-align: left;
-  position: relative;
-  transition: color 0.15s, background 0.15s;
-}
-
-#appSettingsModal .set-rail-item svg {
-  color: var(--text-muted);
-  flex-shrink: 0;
-}
-
-#appSettingsModal .set-rail-item:hover {
-  background: var(--control-bg);
-  color: var(--text);
-}
-
-#appSettingsModal .set-rail-item.active {
-  color: var(--accent);
-  font-weight: 580;
-}
-
-#appSettingsModal .set-rail-item.active svg {
-  color: var(--accent);
-}
-
-#appSettingsModal .set-rail-item.active::before {
-  content: '';
-  position: absolute;
-  left: 2px;
-  top: 6px;
-  bottom: 6px;
-  width: 2px;
-  border-radius: 2px;
-  background: var(--accent);
-}
-
-#appSettingsModal .set-rail-foot {
-  margin: auto 0 0;
-  padding: 10px 10px 2px;
-  font-size: 0.62rem;
-  line-height: 1.5;
-  color: var(--text-muted);
-  border-top: 1px solid var(--border);
-}
-
-/* ── document ─────────────────────────────────────────────────────────── */
-#appSettingsModal .set-doc {
-  overflow-y: auto;
-  padding: 0 22px 40px;
-  min-width: 0;
-  min-height: 0;
-  position: relative;
-}
-
-#appSettingsModal .set-section {
-  padding-top: 20px;
-}
-
-#appSettingsModal .set-section + .set-section {
-  border-top: 1px solid var(--border);
-  margin-top: 26px;
-}
-
-#appSettingsModal .set-section-head {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  margin-bottom: 4px;
-}
-
-#appSettingsModal .set-section-head svg {
-  color: var(--accent);
-  flex-shrink: 0;
-  padding: 5px;
-  border-radius: 8px;
-  background: rgba(var(--accent-rgb), 0.13);
-  border: 1px solid rgba(var(--accent-rgb), 0.24);
-  box-sizing: content-box;
-}
-
-#appSettingsModal .set-section-head h2 {
-  margin: 0;
-  font-size: 0.95rem;
-  font-weight: 640;
-  letter-spacing: -0.015em;
-  color: var(--text);
-}
-
-#appSettingsModal .set-section-blurb {
-  margin: 0 0 14px 36px;
-  font-size: 0.69rem;
-  color: var(--text-muted);
-}
-
-#appSettingsModal .set-empty {
-  margin: 24px 0 0;
-  font-size: 0.78rem;
-  color: var(--text-muted);
-  text-align: center;
-}
-
-/* ── groups ───────────────────────────────────────────────────────────── */
-#appSettingsModal .set-group + .set-group {
-  margin-top: 18px;
-}
-
-#appSettingsModal .set-group-head {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  margin-bottom: 8px;
-}
-
-#appSettingsModal .set-group-head h4 {
-  margin: 0;
-  font-size: 0.63rem;
-  font-weight: 640;
-  letter-spacing: 0.09em;
-  text-transform: uppercase;
-  color: var(--text-muted);
-}
-
-#appSettingsModal .set-group-head::after {
-  content: '';
-  flex: 1;
-  height: 1px;
-  background: linear-gradient(90deg, var(--border), transparent);
-  order: 9;
-}
-
-#appSettingsModal .set-group-head-toggle {
-  cursor: pointer;
-}
-
-#appSettingsModal .set-adv {
-  display: inline-flex;
-  align-items: center;
-  gap: 4px;
-  font-size: 0.62rem;
-  color: var(--text-muted);
-  border: 1px solid var(--border);
-  border-radius: 20px;
-  padding: 2px 8px;
-}
-
-#appSettingsModal .set-adv svg {
-  transition: transform 0.18s;
-}
-
-#appSettingsModal .set-group-advanced.open .set-adv svg {
-  transform: rotate(180deg);
-}
-
-#appSettingsModal .set-group-advanced:not(.open) .set-group-body,
-#appSettingsModal .set-group-advanced:not(.open) .set-group-hint {
-  display: none;
-}
-
-#appSettingsModal .set-group-hint {
-  margin: -2px 0 9px;
-  font-size: 0.68rem;
-  line-height: 1.45;
-  color: var(--text-muted);
-}
-
-#appSettingsModal .set-group-body {
-  display: flex;
-  flex-direction: column;
-  gap: 5px;
-}
-
-/* ── rows ─────────────────────────────────────────────────────────────── */
-#appSettingsModal .set-row {
-  display: flex;
-  align-items: center;
-  gap: 14px;
-  padding: 9px 12px;
-  border-radius: 9px;
-  background: rgba(255, 255, 255, 0.028);
-  border: 1px solid rgba(255, 255, 255, 0.055);
-  transition: background 0.15s, border-color 0.15s;
-}
-
-#appSettingsModal .set-row:hover {
-  background: rgba(255, 255, 255, 0.05);
-  border-color: rgba(255, 255, 255, 0.09);
-}
-
-#appSettingsModal .set-row-block {
-  flex-direction: column;
-  align-items: stretch;
-  gap: 9px;
-}
-
-#appSettingsModal .set-row-text {
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  min-width: 0;
-  flex: 1;
-}
-
-#appSettingsModal .set-row-label {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: 6px;
-  font-size: 0.79rem;
-  color: var(--text);
-  letter-spacing: -0.005em;
-}
-
-#appSettingsModal .set-row-desc {
-  font-size: 0.66rem;
-  line-height: 1.45;
-  color: var(--text-muted);
-  max-width: 62ch;
-}
-
-#appSettingsModal .set-row-actions {
-  display: flex;
-  align-items: center;
-  gap: 7px;
-  flex-shrink: 0;
-}
-
-#appSettingsModal .set-scope,
-#appSettingsModal .set-tag {
-  font-size: 0.52rem;
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
-  border-radius: 4px;
-  padding: 1px 4px;
-  white-space: nowrap;
-}
-
-#appSettingsModal .set-scope {
-  color: var(--text-muted);
-  border: 1px solid var(--border);
-  opacity: 0.8;
-}
-
-#appSettingsModal .set-tag {
-  color: var(--accent);
-  background: rgba(var(--accent-rgb), 0.13);
-  border: 1px solid rgba(var(--accent-rgb), 0.25);
-}
-
-#appSettingsModal .set-tag-beta {
-  color: var(--yellow);
-  background: rgba(240, 194, 90, 0.12);
-  border-color: rgba(240, 194, 90, 0.28);
-}
-
-/* ── controls ─────────────────────────────────────────────────────────── */
-#appSettingsModal .set-select,
-#appSettingsModal .set-input,
-#appSettingsModal .set-num {
-  font: inherit;
-  font-size: 0.74rem;
-  color: var(--text);
-  background: rgba(0, 0, 0, 0.24);
-  border: 1px solid var(--border);
-  border-radius: 7px;
-  padding: 5px 8px;
-  outline: none;
-  flex-shrink: 0;
-}
-
-#appSettingsModal .set-select:focus,
-#appSettingsModal .set-input:focus,
-#appSettingsModal .set-num:focus {
-  border-color: var(--accent);
-}
-
-#appSettingsModal .set-select {
-  min-width: 190px;
-  max-width: 260px;
-}
-
-#appSettingsModal .set-input {
-  width: 220px;
-}
-
-#appSettingsModal .set-num {
-  width: 62px;
-  text-align: right;
-}
-
-#appSettingsModal .set-unit {
-  font-size: 0.65rem;
-  color: var(--text-muted);
-}
-
-#appSettingsModal .set-static {
-  font-size: 0.74rem;
-  color: var(--text-dim);
-}
-
-#appSettingsModal .mono {
-  font-family: var(--font-mono);
-}
-
-#appSettingsModal .set-copy {
-  font-family: var(--font-mono);
-  font-size: 0.7rem;
-  color: var(--text-dim);
-  text-decoration: underline;
-  cursor: pointer;
-  word-break: break-all;
-}
-
-/* The cards and the segmented control are the visible UI; the underlying
-   <select> stays in the DOM as the single source of truth that
-   openAppSettings()/saveAppSettings() read and write by id. */
-#appSettingsModal .set-field-hidden {
-  display: none !important;
-}
-
-#appSettingsModal .set-note,
-#appSettingsModal .set-notes,
-#appSettingsModal .set-progress {
-  font-size: 0.72rem;
-  line-height: 1.5;
-  color: var(--text-secondary);
-  padding: 8px 10px;
-  border-radius: 8px;
-}
-
-#appSettingsModal .set-notes {
-  max-height: 160px;
-  overflow: auto;
-  font-size: 0.7rem;
-  white-space: pre-wrap;
-  word-break: break-word;
-  background: rgba(127, 127, 127, 0.08);
-  border: 1px solid var(--border);
-}
-
-#appSettingsModal .set-progress {
-  border: 1px solid var(--border);
-}
-
-/* ── chips (header buttons, panels, features, levels) ─────────────────── */
-#appSettingsModal .set-chips {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
-}
-
-#appSettingsModal .set-chip {
-  display: inline-flex;
-  align-items: center;
-  gap: 5px;
-  font-size: 0.72rem;
-  padding: 6px 12px;
-  border-radius: 20px;
-  border: 1px solid var(--control-border);
-  background: rgba(255, 255, 255, 0.028);
-  color: var(--text-dim);
-  cursor: pointer;
-  user-select: none;
-  transition: color 0.15s, border-color 0.15s, background 0.15s;
-}
-
-#appSettingsModal .set-chip input {
-  position: absolute;
-  opacity: 0;
-  width: 0;
-  height: 0;
-  pointer-events: none;
-}
-
-#appSettingsModal .set-chip::before {
-  content: '\2713';
-  font-size: 0.8em;
-  line-height: 1;
-  width: 0;
-  overflow: hidden;
-  opacity: 0;
-  transition: width 0.15s, opacity 0.15s;
-}
-
-#appSettingsModal .set-chip:hover {
-  border-color: var(--control-border-hover);
-  color: var(--text);
-}
-
-/* `.is-on` is written by settings-ui.js on load and on change; `:has()` keeps
-   the state correct for any chip toggled before that listener runs. */
-#appSettingsModal .set-chip.is-on,
-#appSettingsModal .set-chip:has(input:checked) {
-  color: var(--accent);
-  border-color: rgba(var(--accent-rgb), 0.45);
-  background: rgba(var(--accent-rgb), 0.12);
-}
-
-#appSettingsModal .set-chip.is-on::before,
-#appSettingsModal .set-chip:has(input:checked)::before {
-  width: 0.85em;
-  opacity: 1;
-}
-
-#appSettingsModal .set-chip:focus-within {
-  outline: 2px solid rgba(var(--accent-rgb), 0.5);
-  outline-offset: 1px;
-}
-
-/* ── model cards ──────────────────────────────────────────────────────── */
-#appSettingsModal .set-modelgrid {
-  display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 7px;
-}
-
-#appSettingsModal .set-modelcard {
-  display: flex;
-  flex-direction: column;
-  gap: 3px;
-  text-align: left;
-  font: inherit;
-  padding: 9px 11px;
-  border-radius: 10px;
-  border: 1px solid var(--control-border);
-  background: rgba(255, 255, 255, 0.028);
-  cursor: pointer;
-  transition: background 0.15s, border-color 0.15s;
-}
-
-#appSettingsModal .set-modelcard:hover {
-  border-color: var(--control-border-hover);
-  background: rgba(255, 255, 255, 0.05);
-}
-
-#appSettingsModal .set-modelcard.selected {
-  border-color: rgba(var(--accent-rgb), 0.55);
-  background: rgba(var(--accent-rgb), 0.11);
-  box-shadow: inset 0 0 0 1px rgba(var(--accent-rgb), 0.2);
-}
-
-#appSettingsModal .set-mc-top {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-}
-
-#appSettingsModal .set-mc-name {
-  font-size: 0.78rem;
-  color: var(--text);
-  font-weight: 560;
-}
-
-#appSettingsModal .set-mc-dot {
-  margin-left: auto;
-  width: 7px;
-  height: 7px;
-  border-radius: 50%;
-  background: var(--accent);
-  box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.8);
-  opacity: 0;
-}
-
-#appSettingsModal .set-modelcard.selected .set-mc-dot {
-  opacity: 1;
-}
-
-#appSettingsModal .set-mc-meta {
-  font-size: 0.64rem;
-  color: var(--text-muted);
-}
-
-#appSettingsModal .set-mc-ctx {
-  margin-top: 2px;
-  align-self: flex-start;
-  font-size: 0.53rem;
-  letter-spacing: 0.05em;
-  text-transform: uppercase;
-  color: var(--text-dim);
-  border: 1px solid var(--border);
-  border-radius: 4px;
-  padding: 1px 4px;
-}
-
-#appSettingsModal .set-row-disabled {
-  opacity: 0.45;
-}
-
-/* ── segmented control (thinking effort) ──────────────────────────────── */
-#appSettingsModal .set-segment {
-  display: flex;
-  gap: 3px;
-  padding: 3px;
-  background: rgba(0, 0, 0, 0.26);
-  border: 1px solid var(--border);
-  border-radius: 9px;
-}
-
-#appSettingsModal .set-segment button {
-  flex: 1;
-  font: inherit;
-  font-size: 0.68rem;
-  padding: 6px 4px;
-  border: 0;
-  border-radius: 6px;
-  background: transparent;
-  color: var(--text-dim);
-  cursor: pointer;
-  white-space: nowrap;
-}
-
-#appSettingsModal .set-segment button:hover {
-  color: var(--text);
-  background: var(--control-bg);
-}
-
-#appSettingsModal .set-segment button.selected {
-  background: linear-gradient(180deg, var(--accent-grad-a), var(--accent-grad-b));
-  color: var(--accent-ink);
-  font-weight: 620;
-}
-
-/* ── task-routing 2x2 ─────────────────────────────────────────────────── */
-#appSettingsModal .set-minigrid {
-  display: grid;
-  grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 5px;
-}
-
-#appSettingsModal .set-mini {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-  padding: 7px 10px;
-  border-radius: 9px;
-  background: rgba(255, 255, 255, 0.028);
-  border: 1px solid rgba(255, 255, 255, 0.055);
-}
-
-#appSettingsModal .set-mini-label {
-  font-size: 0.74rem;
-  color: var(--text-dim);
-}
-
-#appSettingsModal .set-mini .set-select {
-  min-width: 0;
-  width: 128px;
-}
-
-/* Search hides non-matching units; everything stays mounted underneath. */
-#appSettingsModal .set-hit-hidden {
-  display: none !important;
-}
-
-/* ── phone jump control: desktop hides it entirely ────────────────────── */
-#appSettingsModal .set-jump,
-#appSettingsModal .set-jump-menu,
-#appSettingsModal .set-jump-veil {
-  display: none;
-}
-
-/* ── injected sections (admin Users panel) ────────────────────────────── */
-#appSettingsModal .set-section .form-hint {
-  display: block;
-  margin: 0 0 10px;
-}

test/admin-ui.test.ts

@@ -28,7 +28,7 @@ async function bootWith(me: Record<string, unknown>) {
   const dom = new JSDOM(
     `<!doctype html><body>
       <button id="adminPanelBtn" class="btn-admin-panel btn-admin-panel--hidden"></button>
-      <div class="modal" id="appSettingsModal"><nav class="set-rail"><div class="set-rail-items"></div></nav><div class="set-doc" id="appSettingsDoc"></div></div>
+      <div class="modal" id="appSettingsModal"><div class="modal-tabs"></div><div class="modal-body"></div></div>
     </body>`,
     { url: 'http://localhost/', runScripts: 'outside-only' }
   );
@@ -45,23 +45,22 @@ async function bootWith(me: Record<string, unknown>) {
 }
 
 describe('admin-ui boot', () => {
-  it('exposes the identity and injects the Users section for a multi-user admin', async () => {
+  it('exposes the identity and injects the Users tab for a multi-user admin', async () => {
     const { win } = await bootWith({ username: 'root', role: 'admin', multiUser: true, mustChangePassword: false });
     expect(win.__codemanUser).toMatchObject({ username: 'root', role: 'admin', multiUser: true });
-    // The settings modal is a rail over one document: a rail entry, not a tab.
-    const btn = win.document.querySelector('[data-section="settings-users"]');
+    const btn = win.document.querySelector('[data-tab="settings-users"]');
     expect(btn).toBeTruthy();
     expect(win.document.getElementById('settings-users')).toBeTruthy();
   });
 
-  it('does NOT inject the Users section for a regular user', async () => {
+  it('does NOT inject the Users tab for a regular user', async () => {
     const { win } = await bootWith({ username: 'joe', role: 'user', multiUser: true, mustChangePassword: false });
-    expect(win.document.querySelector('[data-section="settings-users"]')).toBeFalsy();
+    expect(win.document.querySelector('[data-tab="settings-users"]')).toBeFalsy();
   });
 
   it('does NOT inject the Users tab in single-user mode', async () => {
     const { win } = await bootWith({ username: 'admin', role: 'admin', multiUser: false, mustChangePassword: false });
-    expect(win.document.querySelector('[data-section="settings-users"]')).toBeFalsy();
+    expect(win.document.querySelector('[data-tab="settings-users"]')).toBeFalsy();
   });
 
   it('shows the change-password modal when mustChangePassword is set', async () => {

test/app-settings-structure.test.ts

@@ -1,102 +0,0 @@
-/**
- * App Settings structural guard.
- *
- * The settings modal is a rail (table of contents) over ONE scrolling document.
- * Its load/save path is pure `getElementById` by a fixed set of ids
- * (openAppSettings / saveAppSettings in settings-ui.js), so a restructure of the
- * markup that drops or renames an element does not fail loudly: the setting just
- * silently stops loading, or stops being saved and falls back to its default.
- *
- * These tests read the REAL settings-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 settingsUi = readFileSync(resolve(publicDir, 'settings-ui.js'), 'utf8');
-
-/** The App Settings modal markup, so assertions can't be satisfied elsewhere. */
-function settingsModal(): string {
-  const start = html.indexOf('<div class="modal" id="appSettingsModal">');
-  expect(start).toBeGreaterThan(-1);
-  const end = html.indexOf('<!-- Shortcut Overlay Modal -->', start);
-  expect(end).toBeGreaterThan(start);
-  return html.slice(start, end);
-}
-
-/**
- * Every id the load and save paths touch. Scoped to those two functions on
- * purpose: settings-ui.js also drives elements that live OUTSIDE the modal
- * (toasts, header chips), and those are not this file's contract.
- */
-function referencedIds(): string[] {
-  const ids = new Set<string>();
-  for (const fn of ['openAppSettings()', 'async saveAppSettings()']) {
-    const start = settingsUi.indexOf(`\n  ${fn} {`);
-    expect(start, `${fn} not found in settings-ui.js`).toBeGreaterThan(-1);
-    const body = settingsUi.slice(start, settingsUi.indexOf('\n  },', start));
-    for (const m of body.matchAll(/getElementById\('([A-Za-z0-9_-]+)'\)/g)) ids.add(m[1]);
-  }
-  return [...ids];
-}
-
-describe('App Settings modal structure', () => {
-  it('keeps every element settings-ui.js loads or saves by id', () => {
-    const modal = settingsModal();
-    const missing = referencedIds().filter((id) => !modal.includes(`id="${id}"`));
-    expect(missing).toEqual([]);
-  });
-
-  it('carries every section the rail points at, exactly once', () => {
-    const modal = settingsModal();
-    const sections = [...modal.matchAll(/data-section="([a-z-]+)"/g)].map((m) => m[1]);
-    expect(sections.length).toBeGreaterThanOrEqual(9);
-    for (const id of new Set(sections)) {
-      const hits = modal.split(`<section class="set-section" id="${id}"`).length - 1;
-      expect(hits, `section ${id} should exist exactly once`).toBe(1);
-    }
-  });
-
-  it('opens on Terminal & Input, so Local Echo is the first thing in reach', () => {
-    expect(settingsUi).toContain("this.switchSettingsTab('settings-terminal')");
-    const terminal = settingsModal().match(/id="settings-terminal"([\s\S]*?)<\/section>/);
-    const localEcho = terminal?.[1].indexOf('appSettingsLocalEcho') ?? -1;
-    const cjk = terminal?.[1].indexOf('appSettingsCjkInput') ?? -1;
-    expect(localEcho).toBeGreaterThan(-1);
-    expect(localEcho).toBeLessThan(cjk);
-  });
-
-  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] ?? '';
-    // The cards render the base models; the [1m] rows exist so that base + the
-    // context switch can compose back into a real claudeModel value.
-    for (const value of ['opus[1m]', 'claude-fable-5[1m]', 'claude-opus-4-6[1m]']) {
-      expect(select).toContain(`value="${value}"`);
-    }
-    expect(select).toContain('data-ctx="1"');
-    expect(modal).toContain('id="appSettingsOpusContext1m"');
-  });
-
-  it('never hides sections behind .modal-tab-content (that class means display:none)', () => {
-    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">');
-  });
-
-  it('exposes the rail hooks admin-ui.js injects the Users section into', () => {
-    const modal = settingsModal();
-    expect(modal).toContain('class="set-rail-items"');
-    expect(modal).toContain('id="appSettingsDoc"');
-    const adminUi = readFileSync(resolve(publicDir, 'admin-ui.js'), 'utf8');
-    expect(adminUi).toContain('.set-rail-items');
-    expect(adminUi).toContain('.set-doc');
-  });
-});

test/readmymind-phase3-surfaces.test.ts

@@ -0,0 +1,104 @@
+// Port: none (pure static analysis, runs in CI, no browser/server).
+//
+// Regression guard for the Read My Mind phase-3 surfaces (alternates, steer,
+// phone accessory key, overview waiting-row shortcut). The browser E2E that
+// exercised these lives outside CI, so this test pins the load-bearing facts
+// statically, in the style of mobile-header-buttons-policy.test.ts:
+//
+// 1. The accessory-bar 🧠 key exists in BOTH layouts and ships `hidden`
+//    (setMode() swaps innerHTML; a key present in only one layout silently
+//    vanishes when the user toggles extendedKeyboardBar).
+// 2. `.accessory-btn[hidden]` is re-asserted as display:none !important:
+//    the base rule is display:inline-flex, which beats the UA [hidden] rule,
+//    so without this the key can never hide (same trap as .home-sessions).
+// 3. The header 🧠 button stays OFF phones (the accessory key + overview strip
+//    are the phone surfaces).
+// 4. The overview shortcut is gated to `waiting` rows only: on red rows a
+//    dialog is on screen and text sent via POST /input would land in its menu.
+//    Answer-aware routing through the approvals endpoint is phase-3 PR 2;
+//    loosening this gate before that lands is a real misdelivery bug.
+// 5. The 'readmymind' action must NOT refocus the terminal (the modal takes
+//    over; a refocus would pop the phone keyboard back up over it).
+import { describe, it, expect } from 'vitest';
+import { readFileSync } from 'node:fs';
+import { fileURLToPath } from 'node:url';
+import { join } from 'node:path';
+
+const HERE = fileURLToPath(new URL('.', import.meta.url));
+const PUBLIC = join(HERE, '../src/web/public');
+
+const accessoryJs = readFileSync(join(PUBLIC, 'keyboard-accessory.js'), 'utf8');
+const overviewJs = readFileSync(join(PUBLIC, 'mobile-overview.js'), 'utf8');
+const stylesCss = readFileSync(join(PUBLIC, 'styles.css'), 'utf8');
+const mobileCss = readFileSync(join(PUBLIC, 'mobile.css'), 'utf8');
+const indexHtml = readFileSync(join(PUBLIC, 'index.html'), 'utf8');
+
+/** Extract a template-literal property body, e.g. `_simpleButtons: \`...\``. */
+function templateBody(source: string, prop: string): string {
+  const m = source.match(new RegExp(`${prop}:\\s*\``));
+  if (!m || m.index === undefined) return '';
+  const start = m.index + m[0].length;
+  const end = source.indexOf('`', start);
+  return end === -1 ? '' : source.slice(start, end);
+}
+
+describe('read my mind phase-3 surfaces (static policy)', () => {
+  it('accessory 🧠 key exists in BOTH layouts and ships hidden', () => {
+    for (const layout of ['_simpleButtons', '_extendedButtons']) {
+      const body = templateBody(accessoryJs, layout);
+      expect(body, `${layout} template found`).not.toBe('');
+      const keys = body.match(/data-action="readmymind"/g) || [];
+      expect(keys.length, `${layout} has exactly one readmymind key`).toBe(1);
+      const tag = body.match(/<button[^>]*data-action="readmymind"[^>]*>/);
+      expect(tag, `${layout} readmymind button tag parses`).toBeTruthy();
+      expect(tag![0], `${layout} key ships hidden (refreshReadMyMind reveals it)`).toContain('hidden');
+    }
+  });
+
+  it('refreshReadMyMind is re-applied after every innerHTML rebuild', () => {
+    // init() and setMode() both assign innerHTML, which resurrects the default
+    // `hidden` attribute; each must re-derive visibility afterwards.
+    const calls = accessoryJs.match(/this\.refreshReadMyMind\(\)/g) || [];
+    expect(calls.length, 'called from init() and setMode() at least').toBeGreaterThanOrEqual(2);
+    // The setMode rebuild specifically must be followed by a refresh.
+    expect(accessoryJs).toMatch(
+      /innerHTML = mode === 'extended' \? this\._extendedButtons : this\._simpleButtons;[\s\S]{0,300}?this\.refreshReadMyMind\(\)/
+    );
+  });
+
+  it('accessory [hidden] re-assertion exists (inline-flex beats the UA rule)', () => {
+    expect(stylesCss).toMatch(/\.accessory-btn\[hidden\]\s*\{\s*display:\s*none\s*!important;/);
+  });
+
+  it('the readmymind action never refocuses the terminal', () => {
+    const refocus = accessoryJs.match(/refocusActions\s*=\s*new Set\(\[([^\]]*)\]\)/);
+    expect(refocus, 'refocusActions set found').toBeTruthy();
+    expect(refocus![1]).not.toContain('readmymind');
+  });
+
+  it('header 🧠 button stays hidden on phones', () => {
+    expect(mobileCss).toMatch(/\.btn-icon-header\.btn-readmymind\s*\{\s*display:\s*none\s*!important;/);
+  });
+
+  it('overview shortcut is gated to waiting rows only (red rows have a dialog on screen)', () => {
+    const defIdx = overviewJs.indexOf('_readMyMindRowShortcut(row) {');
+    expect(defIdx, '_readMyMindRowShortcut definition found').toBeGreaterThan(-1);
+    const gate = overviewJs.slice(defIdx, overviewJs.indexOf('_buildMobileOverviewRmmStrip(sessionId) {'));
+    expect(gate, 'definition precedes its strip builder').not.toBe('');
+    expect(gate).toContain("row.state !== 'waiting'");
+  });
+
+  it('alternates container and steer input exist with i18n protection', () => {
+    // Suggestion content is observed/injectable text; the container-level skip
+    // covers the dynamically inserted rows (i18n skip checks ancestors).
+    expect(indexHtml).toMatch(/id="readMyMindAlternates"[^>]*data-i18n-skip/);
+    expect(indexHtml).toContain('id="readMyMindSteer"');
+    // The steer field lives OUTSIDE the result div so it stays available in
+    // the error phase (steering a failed run's retry).
+    const resultDiv = indexHtml.slice(
+      indexHtml.indexOf('class="readmymind-result"'),
+      indexHtml.indexOf('class="readmymind-error"')
+    );
+    expect(resultDiv).not.toContain('id="readMyMindSteer"');
+  });
+});

test/run-mode-ui.test.ts

@@ -274,41 +274,41 @@ describe('Run launch synchronization', () => {
 });
 
 describe('Codex quick start settings', () => {
-  it('renders Codex CLI settings in their own group inside Agents & CLIs', () => {
+  it('renders Codex CLI settings in a dedicated app settings tab', () => {
     const html = readFileSync(resolve(import.meta.dirname, '../src/web/public/index.html'), 'utf8');
 
-    // The settings modal is one scrolling document: Codex is a GROUP that can be
-    // hidden wholesale, not a tab (see _applyCodexSettingsVisibility).
-    const clis = html.match(/<section class="set-section" id="settings-clis"([\s\S]*?)<\/section>/);
-    expect(clis?.[1]).toBeTruthy();
+    expect(html).toContain('data-tab="settings-codex">Codex CLI</button>');
 
-    const codexGroup = clis![1].match(/id="appSettingsCodexGroup"([\s\S]*)$/);
-    expect(codexGroup?.[1]).toContain('appSettingsCodexDangerouslyBypassApprovals');
-    expect(codexGroup?.[1]).toContain('appSettingsCodexAnimations');
-    expect(codexGroup?.[1]).not.toContain('appSettingsCodexRenderMode');
+    const claudeTab = html.match(
+      /<div class="modal-tab-content hidden" id="settings-claude">([\s\S]*?)<!-- Codex CLI Tab -->/
+    );
+    expect(claudeTab?.[1]).not.toContain('appSettingsCodexDangerouslyBypassApprovals');
+    expect(claudeTab?.[1]).not.toContain('appSettingsCodexAnimations');
 
-    // The Claude settings above it must not have absorbed the codex inputs.
-    const beforeCodex = clis![1].slice(0, clis![1].indexOf('id="appSettingsCodexGroup"'));
-    expect(beforeCodex).not.toContain('appSettingsCodexDangerouslyBypassApprovals');
-    expect(beforeCodex).not.toContain('appSettingsCodexAnimations');
+    const codexTab = html.match(
+      /<div class="modal-tab-content hidden" id="settings-codex">([\s\S]*?)<\/div>\s*<!-- Models Tab -->/
+    );
+    expect(codexTab?.[1]).toContain('appSettingsCodexDangerouslyBypassApprovals');
+    expect(codexTab?.[1]).toContain('appSettingsCodexAnimations');
+    expect(codexTab?.[1]).not.toContain('appSettingsCodexRenderMode');
   });
 
-  describe('Codex CLI group visibility', () => {
-    // Both settings in the group are handed to `codex` at launch, so on an
-    // instance where the binary does not resolve the group is a promise nothing
-    // can keep. renderIndexHtml injects window.__codemanCliAvailable; this pins
-    // the client half. Coupled test: it drives the REAL settings-ui.js against a
-    // stub element, so deleting the call in openAppSettings() is what it catches.
+  describe('Codex CLI tab visibility', () => {
+    // Both settings on the tab are handed to `codex` at launch, so on an instance
+    // where the binary does not resolve the tab is a promise nothing can keep.
+    // renderIndexHtml injects window.__codemanCliAvailable; this pins the client
+    // half. Coupled test: it drives the REAL settings-ui.js against a stub button,
+    // so deleting the call in openAppSettings() is what it is meant to catch.
     function loadSettingsUi(codexAvailable: boolean | undefined) {
-      const codexTabBtn = { id: 'appSettingsCodexGroup', style: { display: 'PRISTINE' } };
+      const codexTabBtn = { dataset: { tab: 'settings-codex' }, style: { display: 'PRISTINE' } };
       const CodemanApp = function CodemanApp(this: any) {};
       const context: any = vm.createContext({
         CodemanApp,
         MobileDetection: { getDeviceType: () => 'desktop', isTouchDevice: () => false, isHandheldDevice: () => false },
         localStorage: { getItem: () => null, setItem: () => {} },
         document: {
-          getElementById: (id: string) => (id === 'appSettingsCodexGroup' ? codexTabBtn : null),
-          querySelector: () => null,
+          getElementById: () => null,
+          querySelector: (sel: string) => (sel.includes('[data-tab="settings-codex"]') ? codexTabBtn : null),
         },
         console,
       });
@@ -319,19 +319,19 @@ describe('Codex quick start settings', () => {
       return { app: new (CodemanApp as any)(), codexTabBtn };
     }
 
-    it('hides the Codex group when the codex binary is not available', () => {
+    it('hides the Codex tab when the codex binary is not available', () => {
       const { app, codexTabBtn } = loadSettingsUi(false);
       app._applyCodexSettingsVisibility();
       expect(codexTabBtn.style.display).toBe('none');
     });
 
-    it('hides the Codex group when the availability flag was never injected', () => {
+    it('hides the Codex tab when the availability flag was never injected', () => {
       const { app, codexTabBtn } = loadSettingsUi(undefined);
       app._applyCodexSettingsVisibility();
       expect(codexTabBtn.style.display).toBe('none');
     });
 
-    it('shows the Codex group when codex is available', () => {
+    it('shows the Codex tab when codex is available', () => {
       const { app, codexTabBtn } = loadSettingsUi(true);
       app._applyCodexSettingsVisibility();
       expect(codexTabBtn.style.display).toBe('');

test/shortcut-registry-overlay.test.ts

@@ -32,8 +32,8 @@ describe('shortcut registry and overlay', () => {
     expect(appSource).not.toContain("key: '/'");
   });
 
-  it('exposes shortcut overrides in a dedicated App Settings shortcuts section', () => {
-    expect(htmlSource).toContain('data-section="settings-shortcuts"');
+  it('exposes shortcut overrides in a dedicated App Settings shortcuts tab', () => {
+    expect(htmlSource).toContain('data-tab="settings-shortcuts"');
     expect(htmlSource).toContain('id="settings-shortcuts"');
     expect(htmlSource).toContain('id="appSettingsShortcutsList"');
     expect(htmlSource).not.toContain('id="appSettingsShortcutOverrides"');
@@ -192,7 +192,7 @@ describe('shortcut settings persistence and capture', () => {
     expect(app.showToast).toHaveBeenCalledWith('Shortcut must include Ctrl, Cmd, or Alt', 'error');
   });
 
-  it('renders the shortcuts list when the Shortcuts settings section is reached', () => {
+  it('renders the shortcuts list when the Shortcuts settings tab is opened', () => {
     const { app, elements } = loadSettingsHarness();
     elements.appSettingsModal = { querySelectorAll: () => [] };
     app.renderShortcutSettingsList = vi.fn();
@@ -200,7 +200,7 @@ describe('shortcut settings persistence and capture', () => {
     app.switchSettingsTab('settings-shortcuts');
     expect(app.renderShortcutSettingsList).toHaveBeenCalledTimes(1);
 
-    app.switchSettingsTab('settings-terminal');
+    app.switchSettingsTab('settings-display');
     expect(app.renderShortcutSettingsList).toHaveBeenCalledTimes(1);
   });