diff --git a/CLAUDE.md b/CLAUDE.md
index e6792be6..19c968b0 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -260,6 +260,8 @@ 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)
diff --git a/src/web/public/admin-ui.js b/src/web/public/admin-ui.js
index 51929803..90c0901d 100644
--- a/src/web/public/admin-ui.js
+++ b/src/web/public/admin-ui.js
@@ -110,34 +110,49 @@
   }
 
   // ── 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-tab="settings-users"]')) return;
-    const tabs = modal.querySelector('.modal-tabs');
-    const body = modal.querySelector('.modal-body');
-    if (!tabs || !body) return;
+    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;
     const btn = document.createElement('button');
-    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';
+    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';
     content.id = 'settings-users';
+    content.dataset.label = 'Users';
     content.innerHTML = `
-      <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 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>
-      <p class="form-hint">Users share the host account; this separates workspaces, it does not sandbox
+      <p class="set-section-blurb">Users share the host account; this separates workspaces, it does not sandbox
         users from each other. Pair with Docker cases for isolation.</p>
-      <div id="adminUsersTable"></div>
-      <p id="adminUsersMsg" style="min-height:1.2em;color:var(--muted,#888)"></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>`;
     body.appendChild(content);
-    // Render whenever the tab is shown (the shared switchSettingsTab toggles it).
+    // Render whenever the entry is used (the shared switchSettingsTab scrolls to it).
     btn.addEventListener('click', renderUsers);
     content.querySelector('#adminAddUser').onclick = addUserFlow;
     content.querySelector('#adminOpenPanel').onclick = openAdminPanel;
diff --git a/src/web/public/index.html b/src/web/public/index.html
index 6ec66057..07b372ee 100644
--- a/src/web/public/index.html
+++ b/src/web/public/index.html
@@ -1273,778 +1273,837 @@
     <!-- App Settings Modal -->
     <div class="modal" id="appSettingsModal">
       <div class="modal-backdrop" onclick="app.closeAppSettings()"></div>
-      <div class="modal-content modal-lg">
-        <div class="modal-header">
-          <h3>App Settings</h3>
-          <button class="modal-close" onclick="app.closeAppSettings()" aria-label="Close app settings">&times;</button>
-        </div>
-        <div class="modal-tabs">
-          <button class="modal-tab-btn active" data-tab="settings-display">Display</button>
-          <button class="modal-tab-btn" data-tab="settings-claude">Claude CLI</button>
-          <button class="modal-tab-btn" data-tab="settings-codex">Codex CLI</button>
-          <button class="modal-tab-btn" data-tab="settings-models">Models</button>
-          <button class="modal-tab-btn" data-tab="settings-paths">Paths</button>
-          <button class="modal-tab-btn" data-tab="settings-notifications">Notifications</button>
-          <button class="modal-tab-btn" data-tab="settings-voice">Voice</button>
-          <button class="modal-tab-btn" data-tab="settings-shortcuts">Shortcuts</button>
-        </div>
-        <div class="modal-body">
-          <!-- Display Tab -->
-          <div class="modal-tab-content" id="settings-display">
-            <div class="settings-grid">
-              <!-- Branding & Language Section -->
-              <div class="settings-section-header">Branding &amp; Language</div>
-              <div class="settings-item" title="Name shown in the browser UI and window title. Supports Unicode, including Chinese.">
-                <span class="settings-item-label">Display Name</span>
-                <input type="text" id="appSettingsDisplayName" class="settings-inline-input" maxlength="40" placeholder="Codeman" autocomplete="off">
-              </div>
-              <div class="settings-item" title="Language for this device. Dynamic status messages and dialogs use the same language.">
-                <span class="settings-item-label">Interface Language</span>
-                <select id="appSettingsLanguage" class="form-select settings-inline-select">
-                  <option value="en">English</option>
-                  <option value="zh-CN">简体中文</option>
-                </select>
-              </div>
-
-              <!-- Appearance Section -->
-              <div class="settings-section-header">Appearance</div>
-              <div class="settings-item settings-item-skin" title="Visual theme for this device (not synced)">
-                <span class="settings-item-label">Skin</span>
-                <select id="appSettingsSkin" class="form-select">
-                  <optgroup label="Light">
-                    <option value="paper-gray">Paper Gray</option>
-                    <option value="solarized-light">Solarized Light</option>
-                    <option value="catppuccin-latte">Catppuccin Latte</option>
-                    <option value="rose-pine-dawn">Rosé Pine Dawn</option>
-                  </optgroup>
-                  <optgroup label="Dark">
-                    <option value="daylight-blue">Daylight Blue</option>
-                    <option value="daylight-green">Daylight Green</option>
-                    <option value="og">OG Codeman</option>
-                  </optgroup>
-                </select>
-              </div>
-              <div class="settings-item settings-item-multiline" title="How new session tabs, the terminal pane, agent windows and their connection lines appear. This device only. For per-surface control and a live preview, add ?animlab=1 to the URL.">
-                <div class="settings-item-text">
-                  <span class="settings-item-label">Entrance Animations</span>
-                  <span class="settings-item-desc">How new tabs, panes and agent windows arrive</span>
-                </div>
-                <select id="appSettingsEntranceAnim" class="form-select settings-inline-select">
-                  <option value="legacy">Off (default)</option>
-                  <option value="terminal">Terminal (CRT)</option>
-                  <option value="beamdown">Beam down</option>
-                  <option value="quiet">Quiet</option>
-                  <option value="playful">Playful</option>
-                  <option value="custom">Custom (set in the lab)</option>
-                </select>
-              </div>
-              <div class="settings-item" id="appSettingsWebglRendererItem" title="Use the GPU-accelerated WebGL terminal renderer (desktop only). Turn off to force the DOM renderer if you hit GPU glitches. Codeman also auto-falls-back to the DOM renderer after repeated GPU stalls.">
-                <span class="settings-item-label">WebGL Renderer</span>
-                <label class="switch switch-sm">
-                  <input type="checkbox" id="appSettingsWebglRenderer">
-                  <span class="slider"></span>
-                </label>
-              </div>
-              <!-- Input Section -->
-              <div class="settings-section-header">Input</div>
-              <div class="settings-item settings-item-multiline" title="Scroll the terminal's own local scrollback with a plain mouse wheel / two-finger swipe, instead of forwarding the wheel to the CLI's transcript. Only Claude sessions forward, so this setting only affects them: Claude redraws the screen in place and keeps almost no local scrollback, so with this ON the wheel has little to scroll and Codeman falls back to paging Claude's own transcript. Codex, Gemini, shell and OpenCode sessions always scroll local scrollback. Shift+wheel always reaches local scrollback regardless.">
-                <div class="settings-item-text">
-                  <span class="settings-item-label">Wheel Scrolls Local History</span>
-                  <span class="settings-item-desc">Plain wheel/trackpad pages the terminal scrollback</span>
-                </div>
-                <label class="switch switch-sm">
-                  <input type="checkbox" id="appSettingsTerminalWheelLocal">
-                  <span class="slider"></span>
-                </label>
-              </div>
-              <div class="settings-item settings-item-multiline" title="Shows typed characters instantly via overlay while forwarding keystrokes to the server in the background. Enables Tab completion, preserves input across tab switches, and protects against session crashes. Recommended for mobile and high-latency connections.">
-                <div class="settings-item-text">
-                  <span class="settings-item-label">Local Echo</span>
-                  <span class="settings-item-desc">Instant typing feedback with local echo</span>
-                </div>
-                <label class="switch switch-sm">
-                  <input type="checkbox" id="appSettingsLocalEcho">
-                  <span class="slider"></span>
-                </label>
-              </div>
-              <div class="settings-item settings-item-multiline" title="Show a dedicated input field below the terminal for CJK (Chinese/Japanese/Korean) IME composition. Recommended for mobile devices with Chinese input methods where xterm's native input handling may drop characters.">
-                <div class="settings-item-text">
-                  <span class="settings-item-label">CJK Input</span>
-                  <span class="settings-item-desc">Dedicated IME input field for CJK languages</span>
-                </div>
-                <label class="switch switch-sm">
-                  <input type="checkbox" id="appSettingsCjkInput">
-                  <span class="slider"></span>
-                </label>
-              </div>
-
-              <div class="settings-item settings-item-multiline" title="Show additional buttons (Tab, Shift+Tab, Ctrl+O, Esc, Alt+Enter, left/right arrows) in the mobile keyboard accessory bar.">
-                <div class="settings-item-text">
-                  <span class="settings-item-label">Extended Keyboard Bar</span>
-                  <span class="settings-item-desc">Extra keys: Tab, Esc, arrows, Ctrl+O</span>
-                </div>
-                <label class="switch switch-sm">
-                  <input type="checkbox" id="appSettingsExtendedKeyboardBar">
-                  <span class="slider"></span>
-                </label>
-              </div>
-              <div class="settings-item settings-item-multiline" id="appSettingsGestureControlItem" title="Enable the camera hand-tracking gesture overlay (applied on reload). The instance must run with CODEMAN_GESTURE=1.">
-                <div class="settings-item-text">
-                  <span class="settings-item-label">Gesture Control (beta)</span>
-                  <span class="settings-item-desc">Camera hand-tracking overlay (applied on reload)</span>
-                </div>
-                <label class="switch switch-sm">
-                  <input type="checkbox" id="appSettingsGestureControl">
-                  <span class="slider"></span>
-                </label>
-              </div>
-
-              <!-- Header Displays Section -->
-              <div class="settings-section-header">Header Displays</div>
-              <div class="settings-item" title="Show Claude plan usage limits (5-hour & weekly) in the header. Applies to newly created sessions.">
-                <span class="settings-item-label">Plan Usage Limits</span>
-                <label class="switch switch-sm">
-                  <input type="checkbox" id="appSettingsShowPlanUsageLimits">
-                  <span class="slider"></span>
-                </label>
-              </div>
-              <div class="settings-item" title="Show A-/A+ font size buttons in header">
-                <span class="settings-item-label">Font Controls</span>
-                <label class="switch switch-sm">
-                  <input type="checkbox" id="appSettingsShowFontControls">
-                  <span class="slider"></span>
-                </label>
-              </div>
-              <div class="settings-item" title="Show CPU and memory usage in header">
-                <span class="settings-item-label">System Stats</span>
-                <label class="switch switch-sm">
-                  <input type="checkbox" id="appSettingsShowSystemStats" checked>
-                  <span class="slider"></span>
-                </label>
-              </div>
-              <div class="settings-item" title="Show session lifecycle log button in header">
-                <span class="settings-item-label">Lifecycle Log</span>
-                <label class="switch switch-sm">
-                  <input type="checkbox" id="appSettingsShowLifecycleLog">
-                  <span class="slider"></span>
-                </label>
-              </div>
-              <div class="settings-item" title="Show the response viewer (eye) button in header">
-                <span class="settings-item-label">Response Viewer</span>
-                <label class="switch switch-sm">
-                  <input type="checkbox" id="appSettingsShowResponseViewer">
-                  <span class="slider"></span>
-                </label>
-              </div>
-              <div class="settings-item" title="Show the file viewer button in header (opens the file browser panel for the active session)">
-                <span class="settings-item-label">File Viewer</span>
-                <label class="switch switch-sm">
-                  <input type="checkbox" id="appSettingsShowFileViewerButton">
-                  <span class="slider"></span>
-                </label>
-              </div>
-              <div class="settings-item" title="Show the attachments button in header (opens the attachment history drawer)">
-                <span class="settings-item-label">Attachments Button</span>
-                <label class="switch switch-sm">
-                  <input type="checkbox" id="appSettingsShowAttachmentsButton">
-                  <span class="slider"></span>
-                </label>
-              </div>
-              <div class="settings-item" title="Show the multi-monitor button in the header (opens Codeman spanned across all displays)">
-                <span class="settings-item-label">Multi-monitor Button</span>
-                <label class="switch switch-sm">
-                  <input type="checkbox" id="appSettingsShowMultiMonitorButton">
-                  <span class="slider"></span>
-                </label>
-              </div>
-              <div class="settings-item" title="Show the session manager button in the header (opens the session manager — sessions also stay reachable via the Ctrl+K palette)">
-                <span class="settings-item-label">Session Manager Button</span>
-                <label class="switch switch-sm">
-                  <input type="checkbox" id="appSettingsShowSessionButton">
-                  <span class="slider"></span>
-                </label>
-              </div>
-              <div class="settings-item" title="Show the away digest button in the header (opens the 'what happened while you were away' summary)">
-                <span class="settings-item-label">Away Digest Button</span>
-                <label class="switch switch-sm">
-                  <input type="checkbox" id="appSettingsShowAwayDigestButton">
-                  <span class="slider"></span>
-                </label>
-              </div>
-              <div class="settings-item" title="Show the Cron button in the footer toolbar (opens the cron jobs manager)">
-                <span class="settings-item-label">Cron Button</span>
-                <label class="switch switch-sm">
-                  <input type="checkbox" id="appSettingsShowCronButton">
-                  <span class="slider"></span>
-                </label>
-              </div>
-              <div class="settings-item" title="Show a terminal redraw button in the header — refit the terminal to the current screen size (useful when switching between devices)">
-                <span class="settings-item-label">Redraw Terminal Button</span>
-                <label class="switch switch-sm">
-                  <input type="checkbox" id="appSettingsShowRedrawButton">
-                  <span class="slider"></span>
-                </label>
-              </div>
-
-              <!-- Phone Section (only meaningful under 430px, hidden elsewhere by settings-ui.js) -->
-              <div class="settings-section-header" id="appSettingsPhoneSection">Phone</div>
-              <div class="settings-item" id="appSettingsMobileOverviewItem" title="On phones, the C logo opens a session overview (needs you / spaces / idle) instead of the welcome screen">
-                <span class="settings-item-label">Overview Home Screen</span>
-                <label class="switch switch-sm">
-                  <input type="checkbox" id="appSettingsMobileOverview" checked>
-                  <span class="slider"></span>
-                </label>
-              </div>
-
-              <!-- Tab Bar Section -->
-              <div class="settings-section-header">Tab Bar</div>
-              <div class="settings-item" title="Show folder path below tab name and allow tab bar to wrap into multiple rows">
-                <span class="settings-item-label">Tall Tabs (Name + Folder)</span>
-                <label class="switch switch-sm">
-                  <input type="checkbox" id="appSettingsTabTwoRows">
-                  <span class="slider"></span>
-                </label>
-              </div>
-              <div class="settings-item" title="Show the open-in-new-window (pop-out) button when hovering a session tab">
-                <span class="settings-item-label">Pop-out Button on Tabs</span>
-                <label class="switch switch-sm">
-                  <input type="checkbox" id="appSettingsShowTabDetachButton">
-                  <span class="slider"></span>
-                </label>
-              </div>
-
-              <!-- Panels Section -->
-              <div class="settings-section-header">Panels</div>
-              <div class="settings-item" title="Show Monitor panel at bottom right">
-                <span class="settings-item-label">Monitor</span>
-                <label class="switch switch-sm">
-                  <input type="checkbox" id="appSettingsShowMonitor" checked>
-                  <span class="slider"></span>
-                </label>
-              </div>
-              <div class="settings-item" title="Show active tools and file viewers in a floating panel">
-                <span class="settings-item-label">Project Insights</span>
-                <label class="switch switch-sm">
-                  <input type="checkbox" id="appSettingsShowProjectInsights">
-                  <span class="slider"></span>
-                </label>
-              </div>
-              <div class="settings-item" title="Show file browser panel on the right side">
-                <span class="settings-item-label">File Browser</span>
-                <label class="switch switch-sm">
-                  <input type="checkbox" id="appSettingsShowFileBrowser">
-                  <span class="slider"></span>
-                </label>
-              </div>
-              <div class="settings-item" title="Show the Subagents panel (independent from Monitor)">
-                <span class="settings-item-label">Subagents</span>
-                <label class="switch switch-sm">
-                  <input type="checkbox" id="appSettingsShowSubagents">
-                  <span class="slider"></span>
-                </label>
-              </div>
-              <div class="settings-item" title="Cross-session inbox of prompts waiting on you (permission dialogs, questions, idle prompts) with answer-in-place buttons; the header bell appears only while something is pending">
-                <span class="settings-item-label">Approvals Inbox</span>
-                <label class="switch switch-sm">
-                  <input type="checkbox" id="appSettingsApprovalsInbox">
-                  <span class="slider"></span>
-                </label>
-              </div>
-              <div class="settings-item" title="Read My Mind: capture your submitted prompts into a per-case intent profile and predict your next prompt on demand (header 🧠 button on Claude sessions). Predictions cost tokens and are never auto-sent">
-                <span class="settings-item-label">Read My Mind</span>
-                <label class="switch switch-sm">
-                  <input type="checkbox" id="appSettingsReadMyMind">
-                  <span class="slider"></span>
-                </label>
-              </div>
-              <div class="settings-item" title="Show ultracode / Workflow runs as a master-detail tab (tasks on the left, agents with tokens + tool calls on the right)">
-                <span class="settings-item-label">Ultracode Agents</span>
-                <label class="switch switch-sm">
-                  <input type="checkbox" id="appSettingsShowUltracodeAgents">
-                  <span class="slider"></span>
-                </label>
-              </div>
-              <div class="settings-item" title="Pop a floating window for each active ultracode / Workflow run, connected by a line to its session tab (additional to the Ultracode Agents panel)">
-                <span class="settings-item-label">Ultracode Floating Windows</span>
-                <label class="switch switch-sm">
-                  <input type="checkbox" id="appSettingsUltracodeFloatingWindows">
-                  <span class="slider"></span>
-                </label>
-              </div>
-
-              <!-- Subagent Options Section -->
-              <div class="settings-section-header">Subagent Options</div>
-              <div class="settings-item" title="Monitor Claude Code background agents in real-time">
-                <span class="settings-item-label">Enable Tracking</span>
-                <label class="switch switch-sm">
-                  <input type="checkbox" id="appSettingsSubagentTracking" checked>
-                  <span class="slider"></span>
-                </label>
-              </div>
-              <div class="settings-item" title="Only show subagent windows when their parent tab is selected">
-                <span class="settings-item-label">Active Tab Only</span>
-                <label class="switch switch-sm">
-                  <input type="checkbox" id="appSettingsSubagentActiveTabOnly" checked>
-                  <span class="slider"></span>
-                </label>
-              </div>
-
-              <!-- Image Watcher Options Section -->
-              <div class="settings-section-header">Image Watcher</div>
-              <div class="settings-item" title="Automatically detect and popup new images in session directories">
-                <span class="settings-item-label">Enable Globally</span>
-                <label class="switch switch-sm">
-                  <input type="checkbox" id="appSettingsImageWatcherEnabled">
-                  <span class="slider"></span>
-                </label>
-              </div>
-
-              <!-- Remote Access Section -->
-              <div class="settings-section-header">Remote Access</div>
-              <div class="settings-item" title="Expose Codeman via Cloudflare Tunnel for remote access">
-                <span class="settings-item-label">Cloudflare Tunnel</span>
-                <label class="switch switch-sm">
-                  <input type="checkbox" id="appSettingsTunnelEnabled">
-                  <span class="slider"></span>
-                </label>
-              </div>
-              <div class="settings-item" id="tunnelUrlRow" style="display:none">
-                <span class="settings-item-label">Tunnel URL</span>
-                <div style="display:flex; align-items:center; gap:8px">
-                  <span id="tunnelUrlDisplay" class="settings-item-value" style="cursor:pointer; text-decoration:underline; font-family:monospace; font-size:12px" title="Click to copy"></span>
-                  <button class="btn-icon-sm" id="tunnelQrBtn" onclick="app.showTunnelQR()" title="Show QR code" style="font-size:16px; padding:2px 6px; background:none; border:1px solid var(--border); border-radius:4px; cursor:pointer; color:var(--text-secondary)">⊞</button>
-                </div>
-              </div>
-              <div class="settings-item" id="tunnelUploadUrlRow" style="display:none">
-                <span class="settings-item-label">Upload URL</span>
-                <span id="tunnelUploadUrlDisplay" class="settings-item-value" style="cursor:pointer; text-decoration:underline; font-family:monospace; font-size:12px" title="Click to copy"></span>
-              </div>
-
-              <!-- Updates Section -->
-              <div class="settings-section-header">Updates</div>
-              <div class="settings-item" title="Codeman version currently running">
-                <span class="settings-item-label">Current Version</span>
-                <span class="settings-item-value" id="updateCurrentVersion" style="font-family:monospace">&mdash;</span>
-              </div>
-              <div class="settings-item" id="updateCheckRow" title="Check GitHub for a newer Codeman release">
-                <span class="settings-item-label">Check for Updates</span>
-                <button class="btn-toolbar btn-sm" id="updateCheckBtn" onclick="app.checkForUpdate()">Check now</button>
-              </div>
-              <div id="updateResult" style="display:none; padding:4px 2px 8px; font-size:13px; color:var(--text-secondary)"></div>
-              <div class="settings-item" id="updateActionRow" style="display:none">
-                <span class="settings-item-label" id="updateActionLabel">Update available</span>
-                <button class="btn-toolbar btn-sm btn-primary" id="updateNowBtn" onclick="app.startSelfUpdate()">Update now</button>
-              </div>
-              <div id="updateNotes" style="display:none; max-height:160px; overflow:auto; padding:8px 10px; margin:4px 0 8px; font-size:12px; line-height:1.45; white-space:pre-wrap; word-break:break-word; background:rgba(127,127,127,0.08); border:1px solid var(--border); border-radius:6px"></div>
-              <div id="updateProgress" style="display:none; padding:8px 10px; margin:4px 0 8px; font-size:13px; border:1px solid var(--border); border-radius:6px"></div>
-
-            </div>
-          </div>
-          <!-- Tab-Switch Tab -->
-          <!-- Claude CLI Tab -->
-          <div class="modal-tab-content hidden" id="settings-claude">
-            <div class="form-row">
-              <label>Startup Mode</label>
-              <select id="appSettingsClaudeMode" class="form-select">
-                <option value="dangerously-skip-permissions">Skip Permissions (default)</option>
-                <option value="auto">Auto (classifier-guarded, low prompts)</option>
-                <option value="normal">Normal (with prompts)</option>
-                <option value="allowedTools">Allowed Tools Only</option>
-              </select>
-              <span class="form-hint">How Claude CLI is started in screen sessions. Auto Mode runs without routine prompts behind a background safety classifier (needs Claude Code 2.1.207+ and Opus 4.6+/Sonnet 4.6+/Fable 5)</span>
-            </div>
-            <div class="form-row" id="allowedToolsRow" style="display: none;">
-              <label>Allowed Tools</label>
-              <input type="text" id="appSettingsAllowedTools" placeholder="Read,Glob,Grep,Bash">
-              <span class="form-hint">Comma-separated list of tools to allow</span>
-            </div>
-            <div class="form-row form-row-switch">
-              <label>Enable Ralph / Todo Tracker</label>
-              <label class="switch">
-                <input type="checkbox" id="appSettingsRalphEnabled">
-                <span class="slider"></span>
-              </label>
-              <span class="form-hint">Auto-enable for new sessions (otherwise auto-enables on Ralph pattern detection)</span>
-            </div>
-            <!-- Claude Permissions Section -->
-            <div class="form-section-header">Claude Permissions</div>
-            <div class="form-row form-row-switch">
-              <label>Agent Teams</label>
-              <label class="switch">
-                <input type="checkbox" id="appSettingsAgentTeams">
-                <span class="slider"></span>
-              </label>
-              <span class="form-hint">Enable experimental Agent Teams for all new Claude sessions (disabled by default)</span>
-            </div>
-            <div class="form-row form-row-switch">
-              <label>Agent Skill</label>
-              <label class="switch">
-                <input type="checkbox" id="appSettingsAgentSkill">
-                <span class="slider"></span>
-              </label>
-              <span class="form-hint">Give new Claude sessions the Codeman skill (start workers, send prompts, wait for results via the API)</span>
-            </div>
-            <div class="form-row">
-              <label>Claude Model</label>
-              <select id="appSettingsClaudeModel" class="form-select">
-                <option value="">Default (CLI setting)</option>
-                <option value="claude-fable-5[1m]">Fable 5 (1M context)</option>
-                <option value="claude-fable-5">Fable 5</option>
-                <option value="opus[1m]">Opus (1M context)</option>
-                <option value="opus">Opus</option>
-                <option value="claude-opus-4-6[1m]">Opus 4.6 (1M context)</option>
-                <option value="claude-opus-4-6">Opus 4.6</option>
-                <option value="sonnet">Sonnet</option>
-                <option value="haiku">Haiku</option>
-              </select>
-              <span class="form-hint">Model for new Claude sessions (pinned via the case's .claude/settings.local.json) — takes precedence over the 1M Opus toggle below</span>
-            </div>
-            <div class="form-row form-row-switch">
-              <label>1M Opus Context</label>
-              <label class="switch">
-                <input type="checkbox" id="appSettingsOpusContext1m">
-                <span class="slider"></span>
-              </label>
-              <span class="form-hint">Use 1M token context window (model: opus[1m]) for all new sessions — ignored when a Claude Model is selected above</span>
-            </div>
-            <div class="form-row form-row-switch">
-              <label>Remote auto-reconnect</label>
-              <label class="switch">
-                <input type="checkbox" id="appSettingsRemoteAutoReconnect">
-                <span class="slider"></span>
-              </label>
-              <span class="form-hint">Automatically re-establish remote (SSH) sessions when the connection drops, reattaching to the durable remote tmux session (on by default; bounded backoff)</span>
-            </div>
-            <div class="form-row">
-              <label>Thinking Effort</label>
-              <select id="appSettingsThinkingEffort" class="form-select">
-                <option value="">Default</option>
-                <option value="low">Low</option>
-                <option value="medium">Medium</option>
-                <option value="high">High</option>
-                <option value="xhigh">XHigh</option>
-                <option value="max">Max</option>
-                <option value="ultracode">Ultracode (multi-agent workflows)</option>
-              </select>
-              <span class="form-hint">Default effort for new Claude sessions — soft default, switchable anytime in-session via /effort (e.g. /effort ultracode)</span>
-            </div>
-            <!-- Nice Priority Section -->
-            <div class="form-section-header">Nice Priority</div>
-            <div class="form-row form-row-switch">
-              <label>Enable Nice Priority Reduction</label>
-              <label class="switch">
-                <input type="checkbox" id="appSettingsNiceEnabled">
-                <span class="slider"></span>
-              </label>
-              <span class="form-hint">Lower priority of Claude sessions (reduces system impact, only affects new sessions)</span>
-            </div>
-            <div class="form-row" id="niceValueRow">
-              <label>Nice Value</label>
-              <input type="number" id="appSettingsNiceValue" min="-20" max="19" value="10" style="width: 80px;">
-              <span class="form-hint">Process priority (-20 to 19, higher = lower priority, default: 10)</span>
-            </div>
-          </div>
-          <!-- Codex CLI Tab -->
-          <div class="modal-tab-content hidden" id="settings-codex">
-            <div class="form-section-header">Codex CLI</div>
-            <div class="form-row form-row-switch">
-              <label>Bypass Approvals and Sandbox</label>
-              <label class="switch">
-                <input type="checkbox" id="appSettingsCodexDangerouslyBypassApprovals">
-                <span class="slider"></span>
-              </label>
-              <span class="form-hint">Start new Codex sessions with --dangerously-bypass-approvals-and-sandbox</span>
-            </div>
-            <div class="form-row form-row-switch">
-              <label>Animated Status Effects</label>
-              <label class="switch">
-                <input type="checkbox" id="appSettingsCodexAnimations">
-                <span class="slider"></span>
-              </label>
-              <span class="form-hint">Decorative Codex TUI motion for new local sessions. Leave off to reduce remote and mobile redraws.</span>
-            </div>
-          </div>
-          <!-- Models Tab -->
-          <div class="modal-tab-content hidden" id="settings-models">
-            <div class="form-row">
-              <label>Default Model</label>
-              <select id="appSettingsDefaultModel" class="form-select">
-                <option value="">Default (CLI default)</option>
-                <option value="claude-fable-5">Fable 5 (Most powerful)</option>
-                <option value="opus">Opus (Most capable)</option>
-                <option value="sonnet">Sonnet (Balanced)</option>
-                <option value="haiku">Haiku (Fast & cheap)</option>
-              </select>
-              <span class="form-hint">Model used for execution tasks. Optimizer suggestions are advisory only.</span>
-            </div>
-            <div class="form-row form-row-switch">
-              <label>Show Optimizer Recommendations</label>
-              <label class="switch">
-                <input type="checkbox" id="appSettingsShowModelRecommendations" checked>
-                <span class="slider"></span>
-              </label>
-              <span class="form-hint">Show what the optimizer recommends (doesn't override your choice)</span>
-            </div>
-            <div class="form-section-header">Agent Type Overrides</div>
-            <p class="form-hint" style="margin: 0 0 12px 0;">Optionally set specific models for each task type. Leave as "Use Default" to use your default model.</p>
-            <div class="form-row">
-              <label>Explore Tasks</label>
-              <select id="appSettingsModelExplore" class="form-select">
-                <option value="">Use Default</option>
-                <option value="haiku">Haiku</option>
-                <option value="sonnet">Sonnet</option>
-                <option value="opus">Opus</option>
-                <option value="claude-fable-5">Fable 5</option>
-              </select>
-              <span class="form-hint">Quick searches, codebase exploration</span>
-            </div>
-            <div class="form-row">
-              <label>Implement Tasks</label>
-              <select id="appSettingsModelImplement" class="form-select">
-                <option value="">Use Default</option>
-                <option value="haiku">Haiku</option>
-                <option value="sonnet">Sonnet</option>
-                <option value="opus">Opus</option>
-                <option value="claude-fable-5">Fable 5</option>
-              </select>
-              <span class="form-hint">Code writing, feature implementation</span>
-            </div>
-            <div class="form-row">
-              <label>Test Tasks</label>
-              <select id="appSettingsModelTest" class="form-select">
-                <option value="">Use Default</option>
-                <option value="haiku">Haiku</option>
-                <option value="sonnet">Sonnet</option>
-                <option value="opus">Opus</option>
-                <option value="claude-fable-5">Fable 5</option>
-              </select>
-              <span class="form-hint">Writing and running tests</span>
-            </div>
-            <div class="form-row">
-              <label>Review Tasks</label>
-              <select id="appSettingsModelReview" class="form-select">
-                <option value="">Use Default</option>
-                <option value="haiku">Haiku</option>
-                <option value="sonnet">Sonnet</option>
-                <option value="opus">Opus</option>
-                <option value="claude-fable-5">Fable 5</option>
-              </select>
-              <span class="form-hint">Code review, quality checks</span>
-            </div>
-          </div>
-          <!-- Paths Tab -->
-          <div class="modal-tab-content hidden" id="settings-paths">
-            <div class="form-row">
-              <label>Default CLAUDE.md Template</label>
-              <input type="text" id="appSettingsClaudeMdPath" placeholder="/path/to/CLAUDE.md template">
-              <span class="form-hint">Used when creating new cases. Leave empty for built-in template.</span>
-            </div>
-            <div class="form-row">
-              <label>Default Working Directory</label>
-              <input type="text" id="appSettingsDefaultDir" placeholder="~/projects">
-              <span class="form-hint">Default directory for new sessions.</span>
-            </div>
-          </div>
-          <!-- Notifications Tab -->
-          <div class="modal-tab-content hidden" id="settings-notifications">
-            <div class="settings-grid">
-              <!-- Master Control Section -->
-              <div class="settings-section-header">Master Control</div>
-              <div class="settings-item" title="Master toggle for all notification layers">
-                <span class="settings-item-label">Enable Notifications</span>
-                <label class="switch switch-sm">
-                  <input type="checkbox" id="appSettingsNotifEnabled" checked>
-                  <span class="slider"></span>
-                </label>
-              </div>
-              <div class="settings-item" title="Show OS-level notifications when tab is hidden">
-                <span class="settings-item-label">Browser</span>
-                <div class="settings-item-actions">
-                  <label class="switch switch-sm">
-                    <input type="checkbox" id="appSettingsNotifBrowser">
-                    <span class="slider"></span>
-                  </label>
-                  <button class="btn-toolbar btn-sm" onclick="app.notificationManager?.requestPermission()" title="Request browser notification permission">Ask</button>
-                  <span class="settings-status" id="notifPermissionStatus">?</span>
-                </div>
-              </div>
-              <span class="form-hint" style="grid-column: 1 / -1; margin-top: -8px;">For remote access, HTTPS is required. Start with: <code>codeman web --https</code></span>
-
-              <div class="settings-item" title="OS-level push notifications — works even when tab is closed">
-                <span class="settings-item-label">Push</span>
-                <div class="settings-item-actions">
-                  <label class="switch switch-sm">
-                    <input type="checkbox" id="appSettingsPushEnabled">
-                    <span class="slider"></span>
-                  </label>
-                  <button class="btn-toolbar btn-sm" id="pushSubscribeBtn" onclick="app.togglePushSubscription()" title="Subscribe/unsubscribe to push notifications">Subscribe</button>
-                  <span class="settings-status" id="pushSubscriptionStatus">off</span>
-                </div>
-              </div>
-              <span class="form-hint" style="grid-column: 1 / -1; margin-top: -8px;">Works through Cloudflare tunnel. Requires HTTPS or localhost. iOS requires PWA (Add to Home Screen).</span>
-
-              <!-- Alerts Section -->
-              <div class="settings-section-header">Alerts</div>
-              <div class="settings-item" title="Play a short beep for critical events">
-                <span class="settings-item-label">Audio Alerts</span>
-                <label class="switch switch-sm">
-                  <input type="checkbox" id="appSettingsNotifAudio">
-                  <span class="slider"></span>
-                </label>
-              </div>
-              <div class="settings-item" title="Notify when a session is idle longer than this">
-                <span class="settings-item-label">Idle Threshold</span>
-                <div class="settings-item-actions">
-                  <input type="number" id="appSettingsNotifStuckMins" class="settings-item-input" value="10" min="1" max="120">
-                  <span style="font-size: 0.65rem; color: var(--text-muted);">min</span>
-                </div>
-              </div>
-
-              <!-- Notification Levels Section -->
-              <div class="settings-section-header">Notification Levels</div>
-            </div>
-            <div class="settings-grid settings-grid-3col">
-              <div class="settings-item" title="Errors, crashes, agent failures">
-                <span class="settings-item-label">Critical</span>
-                <label class="switch switch-sm">
-                  <input type="checkbox" id="appSettingsNotifCritical" checked>
-                  <span class="slider"></span>
-                </label>
-              </div>
-              <div class="settings-item" title="Completions, budget warnings, stuck sessions">
-                <span class="settings-item-label">Warning</span>
-                <label class="switch switch-sm">
-                  <input type="checkbox" id="appSettingsNotifWarning" checked>
-                  <span class="slider"></span>
-                </label>
-              </div>
-              <div class="settings-item" title="Auto-accepts, auto-clears, agent completions">
-                <span class="settings-item-label">Info</span>
-                <label class="switch switch-sm">
-                  <input type="checkbox" id="appSettingsNotifInfo" checked>
-                  <span class="slider"></span>
-                </label>
-              </div>
-            </div>
-
-            <!-- Event Type Preferences -->
-            <div class="settings-grid" style="margin-top: 12px;">
-              <div class="settings-section-header">Per-Event Settings</div>
-            </div>
-            <div class="event-type-grid">
-              <div class="event-header">Event</div>
-              <div class="event-header">On</div>
-              <div class="event-header">Browser</div>
-              <div class="event-header">Push</div>
-              <div class="event-header">Sound</div>
-
-              <div class="event-label">Permission prompts</div>
-              <input type="checkbox" id="eventPermissionEnabled" checked>
-              <input type="checkbox" id="eventPermissionBrowser" checked>
-              <input type="checkbox" id="eventPermissionPush" checked>
-              <input type="checkbox" id="eventPermissionAudio" checked>
-
-              <div class="event-label">Questions from Claude</div>
-              <input type="checkbox" id="eventQuestionEnabled" checked>
-              <input type="checkbox" id="eventQuestionBrowser" checked>
-              <input type="checkbox" id="eventQuestionPush" checked>
-              <input type="checkbox" id="eventQuestionAudio" checked>
-
-              <div class="event-label">Session idle</div>
-              <input type="checkbox" id="eventIdleEnabled" checked>
-              <input type="checkbox" id="eventIdleBrowser" checked>
-              <input type="checkbox" id="eventIdlePush">
-              <input type="checkbox" id="eventIdleAudio">
-
-              <div class="event-label">Response complete</div>
-              <input type="checkbox" id="eventStopEnabled">
-              <input type="checkbox" id="eventStopBrowser">
-              <input type="checkbox" id="eventStopPush">
-              <input type="checkbox" id="eventStopAudio">
-
-              <div class="event-label">Respawn cycles</div>
-              <input type="checkbox" id="eventRespawnEnabled" checked>
-              <input type="checkbox" id="eventRespawnBrowser">
-              <input type="checkbox" id="eventRespawnPush">
-              <input type="checkbox" id="eventRespawnAudio">
-
-              <div class="event-label">Task complete</div>
-              <input type="checkbox" id="eventRalphEnabled" checked>
-              <input type="checkbox" id="eventRalphBrowser" checked>
-              <input type="checkbox" id="eventRalphPush">
-              <input type="checkbox" id="eventRalphAudio" checked>
-
-              <div class="event-label">Subagent activity</div>
-              <input type="checkbox" id="eventSubagentEnabled">
-              <input type="checkbox" id="eventSubagentBrowser">
-              <input type="checkbox" id="eventSubagentPush">
-              <input type="checkbox" id="eventSubagentAudio">
-            </div>
-          </div>
-
-          <!-- Voice Tab -->
-          <div class="modal-tab-content hidden" id="settings-voice">
-            <div class="settings-grid">
-              <div class="settings-section-header">Provider</div>
-              <div class="settings-item">
-                <span class="settings-item-label">Active Provider</span>
-                <span class="voice-provider-status" id="voiceProviderStatus">—</span>
-              </div>
-
-              <div class="settings-section-header">Behavior</div>
-              <div class="settings-item" style="grid-column: 1 / -1;">
-                <span class="settings-item-label">Insert mode</span>
-                <select id="voiceInsertMode" class="form-select" style="width: auto;">
-                  <option value="direct">Direct to input</option>
-                  <option value="compose">Compose dialog</option>
-                </select>
-              </div>
-
-              <div class="settings-section-header">Deepgram Nova-3</div>
-              <div class="form-row" style="grid-column: 1 / -1;">
-                <label for="voiceDeepgramKey">API Key</label>
-                <div style="display: flex; gap: 6px; align-items: center;">
-                  <input type="password" id="voiceDeepgramKey" placeholder="Enter Deepgram API key" autocomplete="off" style="flex: 1; width: 100%; padding: 0.5rem 0.75rem; background: var(--bg-input); border: 1px solid var(--border); border-radius: 4px; color: var(--text); font-size: 0.8rem; font-family: inherit;">
-                  <button class="btn-toolbar btn-sm" onclick="app.toggleDeepgramKeyVisibility()" id="voiceKeyToggleBtn" type="button">Show</button>
-                </div>
-                <span class="form-hint">Stored locally only, never sent to server. Get a key at <a href="https://console.deepgram.com" target="_blank" rel="noopener" style="color: var(--accent);">console.deepgram.com</a></span>
-              </div>
-
-              <div class="form-row" style="grid-column: 1 / -1;">
-                <label for="voiceLanguage">Language</label>
-                <select id="voiceLanguage" class="form-select">
-                  <option value="en-US">English (US)</option>
-                  <option value="en-GB">English (UK)</option>
-                  <option value="es">Spanish</option>
-                  <option value="fr">French</option>
-                  <option value="de">German</option>
-                  <option value="ja">Japanese</option>
-                  <option value="multi">Auto-detect (multi)</option>
-                </select>
-              </div>
-
-              <div class="form-row" style="grid-column: 1 / -1;">
-                <label for="voiceKeyterms">Domain Keywords</label>
-                <input type="text" id="voiceKeyterms" placeholder="codeman, tmux, respawn, subagent" style="width: 100%; padding: 0.5rem 0.75rem; background: var(--bg-input); border: 1px solid var(--border); border-radius: 4px; color: var(--text); font-size: 0.8rem; font-family: inherit;">
-                <span class="form-hint">Comma-separated terms to boost recognition accuracy</span>
-              </div>
-            </div>
-          </div>
-
-          <!-- Shortcuts tab -->
-          <div class="modal-tab-content hidden" id="settings-shortcuts">
-            <div class="settings-grid">
-              <div class="settings-section-header" style="grid-column: 1 / -1;">Keyboard Shortcuts</div>
-              <p class="form-hint" style="grid-column: 1 / -1; margin: 0 0 0.5rem;">
-                Customize keyboard shortcuts. Click the binding to capture a new key combination.
-              </p>
-              <div id="appSettingsShortcutsList" style="grid-column: 1 / -1;">
-                <!-- Populated by app.renderShortcutSettingsList() -->
-              </div>
-            </div>
+      <div class="modal-content modal-lg set-shell">
+        <div class="modal-header set-shell-head">
+          <h3>Settings</h3>
+          <!-- Close first in the DOM so the focus trap still lands on it, not on
+               Save; row-reverse keeps Save to the left of it on phones. -->
+          <div class="set-head-actions">
+            <button class="modal-close" onclick="app.closeAppSettings()" aria-label="Close app settings">&times;</button>
+            <button class="set-head-save" onclick="app.saveAppSettings()">Save</button>
           </div>
         </div>
-        <div class="form-actions">
+        <div class="set-body">
+          <!-- Left rail: a table of contents over the single scrolling document on
+               the right. On phones it collapses and #appSettingsJump takes over. -->
+          <nav class="set-rail" id="appSettingsRail" aria-label="Settings sections">
+            <div class="set-search">
+              <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" aria-hidden="true"><circle cx="11" cy="11" r="7"/><path d="M21 21l-4.3-4.3"/></svg>
+              <input type="search" id="appSettingsSearch" placeholder="Search settings" autocomplete="off" aria-label="Search settings">
+            </div>
+            <div class="set-rail-items" id="appSettingsRailItems">
+              <button type="button" class="set-rail-item active" data-section="settings-terminal">
+                <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="M4 17l6-6-6-6"/><path d="M12 19h8"/></svg>
+                <span>Terminal &amp; Input</span>
+              </button>
+              <button type="button" class="set-rail-item" data-section="settings-appearance">
+                <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"><circle cx="12" cy="12" r="9"/><path d="M12 3a9 9 0 0 0 0 18 4.5 4.5 0 0 0 0-9 4.5 4.5 0 0 1 0-9z"/></svg>
+                <span>Appearance</span>
+              </button>
+              <button type="button" class="set-rail-item" data-section="settings-layout">
+                <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"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18M9 21V9"/></svg>
+                <span>Header &amp; Panels</span>
+              </button>
+              <button type="button" class="set-rail-item" data-section="settings-models">
+                <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="M12 3l8 4.5v9L12 21l-8-4.5v-9L12 3z"/><path d="M12 12l8-4.5M12 12v9M12 12L4 7.5"/></svg>
+                <span>Models</span>
+              </button>
+              <button type="button" class="set-rail-item" data-section="settings-clis">
+                <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="M8 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h2"/><path d="M16 3h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-2"/><circle cx="12" cy="12" r="2.5"/></svg>
+                <span>Agents &amp; CLIs</span>
+              </button>
+              <button type="button" class="set-rail-item" data-section="settings-notifications">
+                <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="M18 8a6 6 0 1 0-12 0c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.7 21a2 2 0 0 1-3.4 0"/></svg>
+                <span>Notifications</span>
+              </button>
+              <button type="button" class="set-rail-item" data-section="settings-voice">
+                <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"><rect x="9" y="2" width="6" height="12" rx="3"/><path d="M5 11a7 7 0 0 0 14 0"/><path d="M12 18v4"/></svg>
+                <span>Voice</span>
+              </button>
+              <button type="button" class="set-rail-item" data-section="settings-shortcuts">
+                <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"><rect x="2" y="5" width="20" height="14" rx="2"/><path d="M6 9h.01M10 9h.01M14 9h.01M18 9h.01M6 13h.01M18 13h.01M9 13h6"/></svg>
+                <span>Shortcuts</span>
+              </button>
+              <button type="button" class="set-rail-item" data-section="settings-system">
+                <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"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.6a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9c.26.6.86 1 1.51 1H21a2 2 0 0 1 0 4h-.09c-.65 0-1.25.4-1.51 1z"/></svg>
+                <span>System</span>
+              </button>
+            </div>
+            <p class="set-rail-foot">Settings marked <b>device</b> stay on this browser. The rest sync to every device.</p>
+          </nav>
+
+          <div class="set-doc" id="appSettingsDoc">
+            <!-- Phone only: names the section you are in and opens the jump list -->
+            <button type="button" class="set-jump" id="appSettingsJump" aria-haspopup="menu" aria-expanded="false">
+              <svg class="set-jump-ico" 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="M4 17l6-6-6-6"/><path d="M12 19h8"/></svg>
+              <span class="set-jump-label">Terminal &amp; Input</span>
+              <svg class="set-jump-chev" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.3" stroke-linecap="round" aria-hidden="true"><path d="M6 9l6 6 6-6"/></svg>
+            </button>
+            <div class="set-jump-veil" id="appSettingsJumpVeil"></div>
+            <div class="set-jump-menu" id="appSettingsJumpMenu" role="menu"></div>
+
+            <p class="set-empty" id="appSettingsSearchEmpty" hidden>No settings match that search.</p>
+
+            <!-- ══ Terminal &amp; Input ══════════════════════════════════════ -->
+            <section class="set-section" id="settings-terminal" data-label="Terminal &amp; Input">
+              <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="M4 17l6-6-6-6"/><path d="M12 19h8"/></svg>
+                <h2>Terminal &amp; Input</h2>
+              </div>
+              <p class="set-section-blurb">How keystrokes reach the agent, and how the terminal draws.</p>
+
+              <div class="set-group">
+                <div class="set-group-head"><h4>Typing</h4><span class="set-scope">device</span></div>
+                <div class="set-group-body">
+                  <div class="set-row" data-search="local echo typing latency mobile">
+                    <div class="set-row-text">
+                      <span class="set-row-label">Local Echo</span>
+                      <span class="set-row-desc">Paint keystrokes instantly instead of waiting for the round trip. Recommended on phones and high-latency links.</span>
+                    </div>
+                    <label class="switch switch-sm"><input type="checkbox" id="appSettingsLocalEcho"><span class="slider"></span></label>
+                  </div>
+                  <div class="set-row" data-search="cjk input ime chinese japanese korean">
+                    <div class="set-row-text">
+                      <span class="set-row-label">CJK Input</span>
+                      <span class="set-row-desc">Dedicated IME field for Chinese, Japanese and Korean composition.</span>
+                    </div>
+                    <label class="switch switch-sm"><input type="checkbox" id="appSettingsCjkInput"><span class="slider"></span></label>
+                  </div>
+                  <div class="set-row" data-search="extended keyboard bar tab esc arrows phone">
+                    <div class="set-row-text">
+                      <span class="set-row-label">Extended Keyboard Bar <span class="set-tag">phone</span></span>
+                      <span class="set-row-desc">Extra phone keys: Tab, Shift+Tab, Esc, arrows, Ctrl+O.</span>
+                    </div>
+                    <label class="switch switch-sm"><input type="checkbox" id="appSettingsExtendedKeyboardBar"><span class="slider"></span></label>
+                  </div>
+                </div>
+              </div>
+
+              <div class="set-group">
+                <div class="set-group-head"><h4>Scrolling &amp; rendering</h4></div>
+                <div class="set-group-body">
+                  <div class="set-row" data-search="wheel scroll local history scrollback transcript">
+                    <div class="set-row-text">
+                      <span class="set-row-label">Wheel Scrolls Local History <span class="set-scope">device</span></span>
+                      <span class="set-row-desc">Plain wheel or two-finger swipe pages the terminal's own scrollback instead of the CLI transcript. Shift+wheel always reaches local scrollback.</span>
+                    </div>
+                    <label class="switch switch-sm"><input type="checkbox" id="appSettingsTerminalWheelLocal"><span class="slider"></span></label>
+                  </div>
+                  <div class="set-row" id="appSettingsWebglRendererItem" data-search="webgl renderer gpu terminal">
+                    <div class="set-row-text">
+                      <span class="set-row-label">WebGL Renderer <span class="set-tag">desktop</span> <span class="set-scope">device</span></span>
+                      <span class="set-row-desc">GPU-accelerated terminal drawing. Codeman falls back to the DOM renderer after repeated GPU stalls.</span>
+                    </div>
+                    <label class="switch switch-sm"><input type="checkbox" id="appSettingsWebglRenderer"><span class="slider"></span></label>
+                  </div>
+                  <div class="set-row" id="appSettingsGestureControlItem" data-search="gesture control camera hand tracking">
+                    <div class="set-row-text">
+                      <span class="set-row-label">Gesture Control <span class="set-tag set-tag-beta">beta</span> <span class="set-scope">synced</span></span>
+                      <span class="set-row-desc">Camera hand-tracking overlay. Applied on reload; the instance must run with CODEMAN_GESTURE=1.</span>
+                    </div>
+                    <label class="switch switch-sm"><input type="checkbox" id="appSettingsGestureControl"><span class="slider"></span></label>
+                  </div>
+                </div>
+              </div>
+            </section>
+
+            <!-- ══ Appearance ═══════════════════════════════════════════════ -->
+            <section class="set-section" id="settings-appearance" data-label="Appearance">
+              <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"><circle cx="12" cy="12" r="9"/><path d="M12 3a9 9 0 0 0 0 18 4.5 4.5 0 0 0 0-9 4.5 4.5 0 0 1 0-9z"/></svg>
+                <h2>Appearance</h2>
+              </div>
+              <p class="set-section-blurb">Theme, motion, and what this install calls itself.</p>
+
+              <div class="set-group">
+                <div class="set-group-head"><h4>Theme</h4><span class="set-scope">device</span></div>
+                <div class="set-group-body">
+                  <div class="set-row has-field" data-search="skin theme palette colors dark light">
+                    <div class="set-row-text">
+                      <span class="set-row-label">Skin</span>
+                      <span class="set-row-desc">Palette for the terminal and the UI.</span>
+                    </div>
+                    <select id="appSettingsSkin" class="set-select">
+                      <optgroup label="Light">
+                        <option value="paper-gray">Paper Gray</option>
+                        <option value="solarized-light">Solarized Light</option>
+                        <option value="catppuccin-latte">Catppuccin Latte</option>
+                        <option value="rose-pine-dawn">Rosé Pine Dawn</option>
+                      </optgroup>
+                      <optgroup label="Dark">
+                        <option value="daylight-blue">Daylight Blue</option>
+                        <option value="daylight-green">Daylight Green</option>
+                        <option value="og">OG Codeman</option>
+                      </optgroup>
+                    </select>
+                  </div>
+                  <div class="set-row has-field" data-search="entrance animations motion tabs windows">
+                    <div class="set-row-text">
+                      <span class="set-row-label">Entrance Animations</span>
+                      <span class="set-row-desc">How new tabs, panes and agent windows arrive. Add ?animlab=1 to the URL for per-surface control.</span>
+                    </div>
+                    <select id="appSettingsEntranceAnim" class="set-select">
+                      <option value="legacy">Off (default)</option>
+                      <option value="terminal">Terminal (CRT)</option>
+                      <option value="beamdown">Beam down</option>
+                      <option value="quiet">Quiet</option>
+                      <option value="playful">Playful</option>
+                      <option value="custom">Custom (set in the lab)</option>
+                    </select>
+                  </div>
+                </div>
+              </div>
+
+              <div class="set-group">
+                <div class="set-group-head"><h4>Identity</h4></div>
+                <div class="set-group-body">
+                  <div class="set-row has-field" data-search="display name branding title">
+                    <div class="set-row-text">
+                      <span class="set-row-label">Display Name <span class="set-scope">synced</span></span>
+                      <span class="set-row-desc">Shown in the browser UI and the window title. Unicode is fine.</span>
+                    </div>
+                    <input type="text" id="appSettingsDisplayName" class="set-input" maxlength="40" placeholder="Codeman" autocomplete="off">
+                  </div>
+                  <div class="set-row has-field" data-search="language interface chinese english">
+                    <div class="set-row-text">
+                      <span class="set-row-label">Interface Language <span class="set-scope">device</span></span>
+                      <span class="set-row-desc">Dialogs and status messages use the same language.</span>
+                    </div>
+                    <select id="appSettingsLanguage" class="set-select">
+                      <option value="en">English</option>
+                      <option value="zh-CN">简体中文</option>
+                    </select>
+                  </div>
+                </div>
+              </div>
+
+              <div class="set-group">
+                <div class="set-group-head"><h4>Tabs</h4><span class="set-scope">device</span></div>
+                <div class="set-group-body">
+                  <div class="set-row" data-search="tall tabs folder name two rows">
+                    <div class="set-row-text">
+                      <span class="set-row-label">Tall Tabs</span>
+                      <span class="set-row-desc">Show the folder under the session name and let the tab bar wrap.</span>
+                    </div>
+                    <label class="switch switch-sm"><input type="checkbox" id="appSettingsTabTwoRows"><span class="slider"></span></label>
+                  </div>
+                  <div class="set-row" data-search="pop out detach tab window">
+                    <div class="set-row-text">
+                      <span class="set-row-label">Pop-out Button on Tabs</span>
+                      <span class="set-row-desc">Open a session in its own window from the tab.</span>
+                    </div>
+                    <label class="switch switch-sm"><input type="checkbox" id="appSettingsShowTabDetachButton"><span class="slider"></span></label>
+                  </div>
+                  <div class="set-row" id="appSettingsMobileOverviewItem" data-search="overview home screen phone logo">
+                    <div class="set-row-text">
+                      <span class="set-row-label">Overview Home Screen <span class="set-tag">phone</span></span>
+                      <span class="set-row-desc">The C logo opens the session overview instead of the welcome screen.</span>
+                    </div>
+                    <label class="switch switch-sm"><input type="checkbox" id="appSettingsMobileOverview" checked><span class="slider"></span></label>
+                  </div>
+                </div>
+              </div>
+            </section>
+
+            <!-- ══ Header &amp; Panels ═══════════════════════════════════════ -->
+            <section class="set-section" id="settings-layout" data-label="Header &amp; Panels">
+              <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"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="M3 9h18M9 21V9"/></svg>
+                <h2>Header &amp; Panels</h2>
+              </div>
+              <p class="set-section-blurb">Pick the buttons and panels you actually use. Everything else stays out of the way.</p>
+
+              <div class="set-group">
+                <div class="set-group-head"><h4>Header buttons</h4><span class="set-scope">device</span></div>
+                <p class="set-group-hint">Tap to show a control in the header. Multi-monitor is the one entry here that syncs across devices.</p>
+                <div class="set-group-body">
+                  <div class="set-chips" data-search="header buttons plan usage font stats lifecycle response file viewer attachments monitor session away cron redraw">
+                    <label class="set-chip"><input type="checkbox" id="appSettingsShowPlanUsageLimits"><span>Plan Usage</span></label>
+                    <label class="set-chip"><input type="checkbox" id="appSettingsShowFontControls"><span>Font Size</span></label>
+                    <label class="set-chip"><input type="checkbox" id="appSettingsShowSystemStats" checked><span>System Stats</span></label>
+                    <label class="set-chip"><input type="checkbox" id="appSettingsShowLifecycleLog"><span>Lifecycle Log</span></label>
+                    <label class="set-chip"><input type="checkbox" id="appSettingsShowResponseViewer"><span>Response Viewer</span></label>
+                    <label class="set-chip"><input type="checkbox" id="appSettingsShowFileViewerButton"><span>File Viewer</span></label>
+                    <label class="set-chip"><input type="checkbox" id="appSettingsShowAttachmentsButton"><span>Attachments</span></label>
+                    <label class="set-chip"><input type="checkbox" id="appSettingsShowMultiMonitorButton"><span>Multi-monitor</span></label>
+                    <label class="set-chip"><input type="checkbox" id="appSettingsShowSessionButton"><span>Session Manager</span></label>
+                    <label class="set-chip"><input type="checkbox" id="appSettingsShowAwayDigestButton"><span>Away Digest</span></label>
+                    <label class="set-chip"><input type="checkbox" id="appSettingsShowCronButton"><span>Cron</span></label>
+                    <label class="set-chip"><input type="checkbox" id="appSettingsShowRedrawButton"><span>Redraw Terminal</span></label>
+                  </div>
+                </div>
+              </div>
+
+              <div class="set-group">
+                <div class="set-group-head"><h4>Panels</h4><span class="set-scope">device</span></div>
+                <div class="set-group-body">
+                  <div class="set-chips" data-search="panels monitor project insights file browser subagents">
+                    <label class="set-chip"><input type="checkbox" id="appSettingsShowMonitor" checked><span>Monitor</span></label>
+                    <label class="set-chip"><input type="checkbox" id="appSettingsShowProjectInsights"><span>Project Insights</span></label>
+                    <label class="set-chip"><input type="checkbox" id="appSettingsShowFileBrowser"><span>File Browser</span></label>
+                    <label class="set-chip"><input type="checkbox" id="appSettingsShowSubagents"><span>Subagents</span></label>
+                  </div>
+                </div>
+              </div>
+
+              <div class="set-group">
+                <div class="set-group-head"><h4>Cross-session features</h4><span class="set-scope">synced</span></div>
+                <p class="set-group-hint">Approvals answers prompts from any session in one place. Read My Mind captures your prompts and predicts the next one on demand; both cost tokens and never auto-send.</p>
+                <div class="set-group-body">
+                  <div class="set-chips" data-search="approvals inbox read my mind ultracode agents floating windows workflow">
+                    <label class="set-chip"><input type="checkbox" id="appSettingsApprovalsInbox"><span>Approvals Inbox</span></label>
+                    <label class="set-chip"><input type="checkbox" id="appSettingsReadMyMind"><span>Read My Mind</span></label>
+                    <label class="set-chip"><input type="checkbox" id="appSettingsShowUltracodeAgents"><span>Ultracode Agents</span></label>
+                    <label class="set-chip"><input type="checkbox" id="appSettingsUltracodeFloatingWindows"><span>Ultracode Windows</span></label>
+                  </div>
+                </div>
+              </div>
+
+              <div class="set-group">
+                <div class="set-group-head"><h4>Subagent windows</h4></div>
+                <div class="set-group-body">
+                  <div class="set-row" data-search="subagent tracking background agents">
+                    <div class="set-row-text">
+                      <span class="set-row-label">Track background agents <span class="set-scope">synced</span></span>
+                      <span class="set-row-desc">Follow Claude Code subagents in real time.</span>
+                    </div>
+                    <label class="switch switch-sm"><input type="checkbox" id="appSettingsSubagentTracking" checked><span class="slider"></span></label>
+                  </div>
+                  <div class="set-row" data-search="subagent active tab only windows">
+                    <div class="set-row-text">
+                      <span class="set-row-label">Active tab only <span class="set-scope">device</span></span>
+                      <span class="set-row-desc">Only show agent windows for the selected session.</span>
+                    </div>
+                    <label class="switch switch-sm"><input type="checkbox" id="appSettingsSubagentActiveTabOnly" checked><span class="slider"></span></label>
+                  </div>
+                </div>
+              </div>
+            </section>
+
+            <!-- ══ Models ═══════════════════════════════════════════════════ -->
+            <section class="set-section" id="settings-models" data-label="Models">
+              <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="M12 3l8 4.5v9L12 21l-8-4.5v-9L12 3z"/><path d="M12 12l8-4.5M12 12v9M12 12L4 7.5"/></svg>
+                <h2>Models</h2>
+              </div>
+              <p class="set-section-blurb">One place for what new sessions run on, and what background tasks are routed to.</p>
+
+              <div class="set-group">
+                <div class="set-group-head"><h4>New Claude sessions</h4><span class="set-scope">synced</span></div>
+                <p class="set-group-hint">A soft default, pinned via the case's .claude/settings.local.json. /model still switches inside a running session.</p>
+                <div class="set-group-body">
+                  <!-- Cards are built from the select below by settings-ui.js, which keeps
+                       the select as the single source of truth for load/save. -->
+                  <div class="set-modelgrid" id="appSettingsModelCards" role="radiogroup" aria-label="Model for new Claude sessions" data-search="model opus sonnet haiku fable claude"></div>
+                  <select id="appSettingsClaudeModel" class="set-select set-field-hidden" aria-hidden="true" tabindex="-1">
+                    <option value="" data-meta="Whatever the CLI picks">Default (CLI setting)</option>
+                    <option value="claude-fable-5" data-meta="Most powerful" data-base="claude-fable-5" data-ctx="1">Fable 5</option>
+                    <option value="claude-fable-5[1m]" data-variant="1m" data-base="claude-fable-5">Fable 5 (1M context)</option>
+                    <option value="opus" data-meta="Most capable" data-base="opus" data-ctx="1">Opus</option>
+                    <option value="opus[1m]" data-variant="1m" data-base="opus">Opus (1M context)</option>
+                    <option value="claude-opus-4-6" data-meta="Previous generation" data-base="claude-opus-4-6" data-ctx="1">Opus 4.6</option>
+                    <option value="claude-opus-4-6[1m]" data-variant="1m" data-base="claude-opus-4-6">Opus 4.6 (1M context)</option>
+                    <option value="sonnet" data-meta="Balanced" data-base="sonnet">Sonnet</option>
+                    <option value="haiku" data-meta="Fast &amp; cheap" data-base="haiku">Haiku</option>
+                  </select>
+                  <div class="set-row" id="appSettingsContextRow" data-search="1m context window opus long">
+                    <div class="set-row-text">
+                      <span class="set-row-label">1M context window</span>
+                      <span class="set-row-desc" id="appSettingsContextDesc">Available for Fable 5, Opus and Opus 4.6.</span>
+                    </div>
+                    <label class="switch switch-sm"><input type="checkbox" id="appSettingsOpusContext1m"><span class="slider"></span></label>
+                  </div>
+                  <div class="set-row set-row-block" data-search="thinking effort ultracode xhigh max reasoning">
+                    <div class="set-row-text">
+                      <span class="set-row-label">Thinking effort</span>
+                      <span class="set-row-desc">Switchable in-session with /effort. Ultracode runs multi-agent workflows.</span>
+                    </div>
+                    <div class="set-segment" id="appSettingsEffortSegment" role="radiogroup" aria-label="Thinking effort"></div>
+                    <select id="appSettingsThinkingEffort" class="set-select set-field-hidden" aria-hidden="true" tabindex="-1">
+                      <option value="">Default</option>
+                      <option value="low">Low</option>
+                      <option value="medium">Medium</option>
+                      <option value="high">High</option>
+                      <option value="xhigh">XHigh</option>
+                      <option value="max">Max</option>
+                      <option value="ultracode">Ultracode</option>
+                    </select>
+                  </div>
+                </div>
+              </div>
+
+              <div class="set-group set-group-advanced" id="appSettingsTaskRouting">
+                <div class="set-group-head set-group-head-toggle" role="button" tabindex="0" aria-expanded="false">
+                  <h4>Task routing</h4>
+                  <span class="set-scope">synced</span>
+                  <span class="set-adv">Advanced
+                    <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" aria-hidden="true"><path d="M6 9l6 6 6-6"/></svg>
+                  </span>
+                </div>
+                <p class="set-group-hint">Models for orchestrator and background work. Leave on the default unless you are tuning cost.</p>
+                <div class="set-group-body">
+                  <div class="set-row has-field" data-search="default model tasks orchestrator">
+                    <div class="set-row-text">
+                      <span class="set-row-label">Default for tasks</span>
+                      <span class="set-row-desc">Used for execution tasks. Optimizer suggestions stay advisory.</span>
+                    </div>
+                    <select id="appSettingsDefaultModel" class="set-select">
+                      <option value="">Default (CLI default)</option>
+                      <option value="claude-fable-5">Fable 5 (Most powerful)</option>
+                      <option value="opus">Opus (Most capable)</option>
+                      <option value="sonnet">Sonnet (Balanced)</option>
+                      <option value="haiku">Haiku (Fast &amp; cheap)</option>
+                    </select>
+                  </div>
+                  <div class="set-minigrid" data-search="explore implement test review agent type overrides">
+                    <div class="set-mini">
+                      <span class="set-mini-label">Explore</span>
+                      <select id="appSettingsModelExplore" class="set-select">
+                        <option value="">Use default</option>
+                        <option value="haiku">Haiku</option>
+                        <option value="sonnet">Sonnet</option>
+                        <option value="opus">Opus</option>
+                        <option value="claude-fable-5">Fable 5</option>
+                      </select>
+                    </div>
+                    <div class="set-mini">
+                      <span class="set-mini-label">Implement</span>
+                      <select id="appSettingsModelImplement" class="set-select">
+                        <option value="">Use default</option>
+                        <option value="haiku">Haiku</option>
+                        <option value="sonnet">Sonnet</option>
+                        <option value="opus">Opus</option>
+                        <option value="claude-fable-5">Fable 5</option>
+                      </select>
+                    </div>
+                    <div class="set-mini">
+                      <span class="set-mini-label">Test</span>
+                      <select id="appSettingsModelTest" class="set-select">
+                        <option value="">Use default</option>
+                        <option value="haiku">Haiku</option>
+                        <option value="sonnet">Sonnet</option>
+                        <option value="opus">Opus</option>
+                        <option value="claude-fable-5">Fable 5</option>
+                      </select>
+                    </div>
+                    <div class="set-mini">
+                      <span class="set-mini-label">Review</span>
+                      <select id="appSettingsModelReview" class="set-select">
+                        <option value="">Use default</option>
+                        <option value="haiku">Haiku</option>
+                        <option value="sonnet">Sonnet</option>
+                        <option value="opus">Opus</option>
+                        <option value="claude-fable-5">Fable 5</option>
+                      </select>
+                    </div>
+                  </div>
+                  <div class="set-row" data-search="optimizer recommendations advisory">
+                    <div class="set-row-text">
+                      <span class="set-row-label">Show optimizer recommendations</span>
+                      <span class="set-row-desc">Advisory only. Never overrides your choice.</span>
+                    </div>
+                    <label class="switch switch-sm"><input type="checkbox" id="appSettingsShowModelRecommendations" checked><span class="slider"></span></label>
+                  </div>
+                </div>
+              </div>
+            </section>
+
+            <!-- ══ Agents &amp; CLIs ═════════════════════════════════════════ -->
+            <section class="set-section" id="settings-clis" data-label="Agents &amp; CLIs">
+              <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="M8 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h2"/><path d="M16 3h2a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-2"/><circle cx="12" cy="12" r="2.5"/></svg>
+                <h2>Agents &amp; CLIs</h2>
+              </div>
+              <p class="set-section-blurb">Launch flags for the CLIs Codeman spawns.</p>
+
+              <div class="set-group">
+                <div class="set-group-head"><h4>Claude</h4><span class="set-scope">synced</span></div>
+                <div class="set-group-body">
+                  <div class="set-row has-field" data-search="startup mode permissions auto allowed tools">
+                    <div class="set-row-text">
+                      <span class="set-row-label">Startup Mode</span>
+                      <span class="set-row-desc">How the CLI is launched in new sessions. Auto Mode runs without routine prompts behind a background safety classifier.</span>
+                    </div>
+                    <select id="appSettingsClaudeMode" class="set-select">
+                      <option value="dangerously-skip-permissions">Skip Permissions (default)</option>
+                      <option value="auto">Auto (classifier-guarded, low prompts)</option>
+                      <option value="normal">Normal (with prompts)</option>
+                      <option value="allowedTools">Allowed Tools Only</option>
+                    </select>
+                  </div>
+                  <div class="set-row has-field" id="allowedToolsRow" style="display: none;" data-search="allowed tools list">
+                    <div class="set-row-text">
+                      <span class="set-row-label">Allowed Tools</span>
+                      <span class="set-row-desc">Comma-separated list of tools to allow.</span>
+                    </div>
+                    <input type="text" id="appSettingsAllowedTools" class="set-input" placeholder="Read,Glob,Grep,Bash">
+                  </div>
+                  <div class="set-row" data-search="ralph todo tracker loop">
+                    <div class="set-row-text">
+                      <span class="set-row-label">Ralph / Todo Tracker</span>
+                      <span class="set-row-desc">Auto-enable for new sessions. Otherwise it enables itself on Ralph pattern detection.</span>
+                    </div>
+                    <label class="switch switch-sm"><input type="checkbox" id="appSettingsRalphEnabled"><span class="slider"></span></label>
+                  </div>
+                  <div class="set-row" data-search="agent teams experimental">
+                    <div class="set-row-text">
+                      <span class="set-row-label">Agent Teams</span>
+                      <span class="set-row-desc">Experimental multi-agent teams for all new Claude sessions.</span>
+                    </div>
+                    <label class="switch switch-sm"><input type="checkbox" id="appSettingsAgentTeams"><span class="slider"></span></label>
+                  </div>
+                  <div class="set-row" data-search="agent skill codeman api workers">
+                    <div class="set-row-text">
+                      <span class="set-row-label">Codeman Agent Skill</span>
+                      <span class="set-row-desc">Let new sessions start workers, send prompts and wait for results over the API.</span>
+                    </div>
+                    <label class="switch switch-sm"><input type="checkbox" id="appSettingsAgentSkill"><span class="slider"></span></label>
+                  </div>
+                  <div class="set-row" data-search="remote auto reconnect ssh">
+                    <div class="set-row-text">
+                      <span class="set-row-label">Remote auto-reconnect</span>
+                      <span class="set-row-desc">Reattach remote SSH sessions to their durable tmux after a dropped link.</span>
+                    </div>
+                    <label class="switch switch-sm"><input type="checkbox" id="appSettingsRemoteAutoReconnect"><span class="slider"></span></label>
+                  </div>
+                  <div class="set-row" data-search="nice priority cpu">
+                    <div class="set-row-text">
+                      <span class="set-row-label">Nice priority</span>
+                      <span class="set-row-desc">Lower the CPU priority of new sessions to reduce system impact.</span>
+                    </div>
+                    <label class="switch switch-sm"><input type="checkbox" id="appSettingsNiceEnabled"><span class="slider"></span></label>
+                  </div>
+                  <div class="set-row" id="niceValueRow" data-search="nice value priority number">
+                    <div class="set-row-text">
+                      <span class="set-row-label">Nice value</span>
+                      <span class="set-row-desc">-20 to 19. Higher means lower priority. Default 10.</span>
+                    </div>
+                    <input type="number" id="appSettingsNiceValue" class="set-num" min="-20" max="19" value="10">
+                  </div>
+                </div>
+              </div>
+
+              <div class="set-group" id="appSettingsCodexGroup">
+                <div class="set-group-head"><h4>Codex</h4><span class="set-scope">synced</span></div>
+                <div class="set-group-body">
+                  <div class="set-row" data-search="codex bypass approvals sandbox">
+                    <div class="set-row-text">
+                      <span class="set-row-label">Bypass approvals and sandbox</span>
+                      <span class="set-row-desc">Start new Codex sessions with --dangerously-bypass-approvals-and-sandbox.</span>
+                    </div>
+                    <label class="switch switch-sm"><input type="checkbox" id="appSettingsCodexDangerouslyBypassApprovals"><span class="slider"></span></label>
+                  </div>
+                  <div class="set-row" data-search="codex animations status effects">
+                    <div class="set-row-text">
+                      <span class="set-row-label">Animated status effects</span>
+                      <span class="set-row-desc">Decorative Codex TUI motion. Leave off to reduce remote and mobile redraws.</span>
+                    </div>
+                    <label class="switch switch-sm"><input type="checkbox" id="appSettingsCodexAnimations"><span class="slider"></span></label>
+                  </div>
+                </div>
+              </div>
+            </section>
+
+            <!-- ══ Notifications ════════════════════════════════════════════ -->
+            <section class="set-section" id="settings-notifications" data-label="Notifications">
+              <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="M18 8a6 6 0 1 0-12 0c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.7 21a2 2 0 0 1-3.4 0"/></svg>
+                <h2>Notifications</h2>
+              </div>
+              <p class="set-section-blurb">What reaches you, and on which channel.</p>
+
+              <div class="set-group">
+                <div class="set-group-head"><h4>Channels</h4><span class="set-scope">device</span></div>
+                <div class="set-group-body">
+                  <div class="set-row" data-search="enable notifications master">
+                    <div class="set-row-text">
+                      <span class="set-row-label">Notifications</span>
+                      <span class="set-row-desc">Master switch for every layer below.</span>
+                    </div>
+                    <label class="switch switch-sm"><input type="checkbox" id="appSettingsNotifEnabled" checked><span class="slider"></span></label>
+                  </div>
+                  <div class="set-row" data-search="browser notifications os permission">
+                    <div class="set-row-text">
+                      <span class="set-row-label">Browser</span>
+                      <span class="set-row-desc">OS notifications while the tab is hidden. Remote access needs HTTPS: codeman web --https</span>
+                    </div>
+                    <div class="set-row-actions">
+                      <label class="switch switch-sm"><input type="checkbox" id="appSettingsNotifBrowser"><span class="slider"></span></label>
+                      <button class="btn-toolbar btn-sm" onclick="app.notificationManager?.requestPermission()" title="Request browser notification permission">Ask</button>
+                      <span class="settings-status" id="notifPermissionStatus">?</span>
+                    </div>
+                  </div>
+                  <div class="set-row" data-search="push notifications subscribe pwa">
+                    <div class="set-row-text">
+                      <span class="set-row-label">Push</span>
+                      <span class="set-row-desc">Works with the tab closed, and through a Cloudflare tunnel. Requires HTTPS or localhost; iOS requires the PWA.</span>
+                    </div>
+                    <div class="set-row-actions">
+                      <label class="switch switch-sm"><input type="checkbox" id="appSettingsPushEnabled"><span class="slider"></span></label>
+                      <button class="btn-toolbar btn-sm" id="pushSubscribeBtn" onclick="app.togglePushSubscription()" title="Subscribe or unsubscribe to push notifications">Subscribe</button>
+                      <span class="settings-status" id="pushSubscriptionStatus">off</span>
+                    </div>
+                  </div>
+                  <div class="set-row" data-search="audio alerts beep sound">
+                    <div class="set-row-text">
+                      <span class="set-row-label">Audio alerts</span>
+                      <span class="set-row-desc">Short beep on critical events.</span>
+                    </div>
+                    <label class="switch switch-sm"><input type="checkbox" id="appSettingsNotifAudio"><span class="slider"></span></label>
+                  </div>
+                  <div class="set-row" data-search="idle threshold stuck minutes">
+                    <div class="set-row-text">
+                      <span class="set-row-label">Idle threshold</span>
+                      <span class="set-row-desc">Notify when a session sits idle longer than this.</span>
+                    </div>
+                    <div class="set-row-actions">
+                      <input type="number" id="appSettingsNotifStuckMins" class="set-num" value="10" min="1" max="120">
+                      <span class="set-unit">min</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <div class="set-group">
+                <div class="set-group-head"><h4>Levels</h4><span class="set-scope">device</span></div>
+                <div class="set-group-body">
+                  <div class="set-chips" data-search="critical warning info levels">
+                    <label class="set-chip"><input type="checkbox" id="appSettingsNotifCritical" checked><span>Critical</span></label>
+                    <label class="set-chip"><input type="checkbox" id="appSettingsNotifWarning" checked><span>Warning</span></label>
+                    <label class="set-chip"><input type="checkbox" id="appSettingsNotifInfo" checked><span>Info</span></label>
+                  </div>
+                </div>
+              </div>
+
+              <div class="set-group">
+                <div class="set-group-head"><h4>Per event</h4><span class="set-scope">device</span></div>
+                <div class="set-group-body">
+                  <div class="event-type-grid" data-search="per event permission question idle response respawn task subagent">
+                    <div class="event-header">Event</div>
+                    <div class="event-header">On</div>
+                    <div class="event-header">Browser</div>
+                    <div class="event-header">Push</div>
+                    <div class="event-header">Sound</div>
+
+                    <div class="event-label">Permission prompts</div>
+                    <input type="checkbox" id="eventPermissionEnabled" checked>
+                    <input type="checkbox" id="eventPermissionBrowser" checked>
+                    <input type="checkbox" id="eventPermissionPush" checked>
+                    <input type="checkbox" id="eventPermissionAudio" checked>
+
+                    <div class="event-label">Questions from Claude</div>
+                    <input type="checkbox" id="eventQuestionEnabled" checked>
+                    <input type="checkbox" id="eventQuestionBrowser" checked>
+                    <input type="checkbox" id="eventQuestionPush" checked>
+                    <input type="checkbox" id="eventQuestionAudio" checked>
+
+                    <div class="event-label">Session idle</div>
+                    <input type="checkbox" id="eventIdleEnabled" checked>
+                    <input type="checkbox" id="eventIdleBrowser" checked>
+                    <input type="checkbox" id="eventIdlePush">
+                    <input type="checkbox" id="eventIdleAudio">
+
+                    <div class="event-label">Response complete</div>
+                    <input type="checkbox" id="eventStopEnabled">
+                    <input type="checkbox" id="eventStopBrowser">
+                    <input type="checkbox" id="eventStopPush">
+                    <input type="checkbox" id="eventStopAudio">
+
+                    <div class="event-label">Respawn cycles</div>
+                    <input type="checkbox" id="eventRespawnEnabled" checked>
+                    <input type="checkbox" id="eventRespawnBrowser">
+                    <input type="checkbox" id="eventRespawnPush">
+                    <input type="checkbox" id="eventRespawnAudio">
+
+                    <div class="event-label">Task complete</div>
+                    <input type="checkbox" id="eventRalphEnabled" checked>
+                    <input type="checkbox" id="eventRalphBrowser" checked>
+                    <input type="checkbox" id="eventRalphPush">
+                    <input type="checkbox" id="eventRalphAudio" checked>
+
+                    <div class="event-label">Subagent activity</div>
+                    <input type="checkbox" id="eventSubagentEnabled">
+                    <input type="checkbox" id="eventSubagentBrowser">
+                    <input type="checkbox" id="eventSubagentPush">
+                    <input type="checkbox" id="eventSubagentAudio">
+                  </div>
+                </div>
+              </div>
+            </section>
+
+            <!-- ══ Voice ════════════════════════════════════════════════════ -->
+            <section class="set-section" id="settings-voice" data-label="Voice">
+              <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"><rect x="9" y="2" width="6" height="12" rx="3"/><path d="M5 11a7 7 0 0 0 14 0"/><path d="M12 18v4"/></svg>
+                <h2>Voice</h2>
+              </div>
+              <p class="set-section-blurb">Dictation into the composer.</p>
+
+              <div class="set-group">
+                <div class="set-group-head"><h4>Provider</h4><span class="set-scope">device</span></div>
+                <div class="set-group-body">
+                  <div class="set-row" data-search="voice provider active">
+                    <div class="set-row-text"><span class="set-row-label">Active provider</span></div>
+                    <span class="voice-provider-status" id="voiceProviderStatus">&mdash;</span>
+                  </div>
+                  <div class="set-row has-field" data-search="voice insert mode compose">
+                    <div class="set-row-text">
+                      <span class="set-row-label">Insert mode</span>
+                      <span class="set-row-desc">Where dictated text lands.</span>
+                    </div>
+                    <select id="voiceInsertMode" class="set-select">
+                      <option value="direct">Direct to input</option>
+                      <option value="compose">Compose dialog</option>
+                    </select>
+                  </div>
+                </div>
+              </div>
+
+              <div class="set-group">
+                <div class="set-group-head"><h4>Deepgram Nova-3</h4><span class="set-scope">device</span></div>
+                <div class="set-group-body">
+                  <div class="set-row has-field" data-search="deepgram api key">
+                    <div class="set-row-text">
+                      <span class="set-row-label">API key</span>
+                      <span class="set-row-desc">Stored on this device only, never sent to the server. Get a key at console.deepgram.com</span>
+                    </div>
+                    <div class="set-row-actions set-row-actions-wide">
+                      <input type="password" id="voiceDeepgramKey" class="set-input" placeholder="Enter Deepgram API key" autocomplete="off">
+                      <button class="btn-toolbar btn-sm" onclick="app.toggleDeepgramKeyVisibility()" id="voiceKeyToggleBtn" type="button">Show</button>
+                    </div>
+                  </div>
+                  <div class="set-row has-field" data-search="voice language">
+                    <div class="set-row-text"><span class="set-row-label">Language</span></div>
+                    <select id="voiceLanguage" class="set-select">
+                      <option value="en-US">English (US)</option>
+                      <option value="en-GB">English (UK)</option>
+                      <option value="es">Spanish</option>
+                      <option value="fr">French</option>
+                      <option value="de">German</option>
+                      <option value="ja">Japanese</option>
+                      <option value="multi">Auto-detect (multi)</option>
+                    </select>
+                  </div>
+                  <div class="set-row has-field" data-search="voice keyterms domain keywords">
+                    <div class="set-row-text">
+                      <span class="set-row-label">Domain keywords</span>
+                      <span class="set-row-desc">Comma-separated terms to boost recognition accuracy.</span>
+                    </div>
+                    <input type="text" id="voiceKeyterms" class="set-input" placeholder="codeman, tmux, respawn, subagent">
+                  </div>
+                </div>
+              </div>
+            </section>
+
+            <!-- ══ Shortcuts ════════════════════════════════════════════════ -->
+            <section class="set-section" id="settings-shortcuts" data-label="Shortcuts">
+              <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"><rect x="2" y="5" width="20" height="14" rx="2"/><path d="M6 9h.01M10 9h.01M14 9h.01M18 9h.01M6 13h.01M18 13h.01M9 13h6"/></svg>
+                <h2>Shortcuts</h2>
+              </div>
+              <p class="set-section-blurb">Click a binding to capture a new key combination.</p>
+              <div class="set-group">
+                <div class="set-group-head"><h4>Keyboard</h4><span class="set-scope">device</span></div>
+                <div class="set-group-body">
+                  <div id="appSettingsShortcutsList" data-search="keyboard shortcuts bindings keys">
+                    <!-- Populated by app.renderShortcutSettingsList() -->
+                  </div>
+                </div>
+              </div>
+            </section>
+
+            <!-- ══ System ═══════════════════════════════════════════════════ -->
+            <section class="set-section" id="settings-system" data-label="System">
+              <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"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.6a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9c.26.6.86 1 1.51 1H21a2 2 0 0 1 0 4h-.09c-.65 0-1.25.4-1.51 1z"/></svg>
+                <h2>System</h2>
+              </div>
+              <p class="set-section-blurb">Paths, automation, remote access and updates.</p>
+
+              <div class="set-group">
+                <div class="set-group-head"><h4>Paths</h4><span class="set-scope">synced</span></div>
+                <div class="set-group-body">
+                  <div class="set-row has-field" data-search="claude.md template path new cases">
+                    <div class="set-row-text">
+                      <span class="set-row-label">CLAUDE.md template</span>
+                      <span class="set-row-desc">Used when creating new cases. Leave empty for the built-in template.</span>
+                    </div>
+                    <input type="text" id="appSettingsClaudeMdPath" class="set-input" placeholder="/path/to/CLAUDE.md template">
+                  </div>
+                  <div class="set-row has-field" data-search="default working directory">
+                    <div class="set-row-text">
+                      <span class="set-row-label">Default working directory</span>
+                      <span class="set-row-desc">Starting directory for new sessions.</span>
+                    </div>
+                    <input type="text" id="appSettingsDefaultDir" class="set-input" placeholder="~/projects">
+                  </div>
+                </div>
+              </div>
+
+              <div class="set-group">
+                <div class="set-group-head"><h4>Automation</h4><span class="set-scope">synced</span></div>
+                <div class="set-group-body">
+                  <div class="set-row" data-search="image watcher popup screenshots">
+                    <div class="set-row-text">
+                      <span class="set-row-label">Image watcher</span>
+                      <span class="set-row-desc">Detect and pop up new images found in session directories.</span>
+                    </div>
+                    <label class="switch switch-sm"><input type="checkbox" id="appSettingsImageWatcherEnabled"><span class="slider"></span></label>
+                  </div>
+                </div>
+              </div>
+
+              <div class="set-group">
+                <div class="set-group-head"><h4>Remote access</h4><span class="set-scope">synced</span></div>
+                <div class="set-group-body">
+                  <div class="set-row" data-search="cloudflare tunnel remote access url">
+                    <div class="set-row-text">
+                      <span class="set-row-label">Cloudflare Tunnel</span>
+                      <span class="set-row-desc">Expose Codeman on a public URL. Set CODEMAN_PASSWORD first.</span>
+                    </div>
+                    <label class="switch switch-sm"><input type="checkbox" id="appSettingsTunnelEnabled"><span class="slider"></span></label>
+                  </div>
+                  <div class="set-row" id="tunnelUrlRow" style="display:none">
+                    <div class="set-row-text"><span class="set-row-label">Tunnel URL</span></div>
+                    <div class="set-row-actions">
+                      <span id="tunnelUrlDisplay" class="set-copy" title="Click to copy"></span>
+                      <button class="btn-icon-sm" id="tunnelQrBtn" onclick="app.showTunnelQR()" title="Show QR code">&#x229E;</button>
+                    </div>
+                  </div>
+                  <div class="set-row" id="tunnelUploadUrlRow" style="display:none">
+                    <div class="set-row-text"><span class="set-row-label">Upload URL</span></div>
+                    <span id="tunnelUploadUrlDisplay" class="set-copy" title="Click to copy"></span>
+                  </div>
+                </div>
+              </div>
+
+              <div class="set-group">
+                <div class="set-group-head"><h4>Updates</h4></div>
+                <div class="set-group-body">
+                  <div class="set-row" data-search="version current release">
+                    <div class="set-row-text"><span class="set-row-label">Current version</span></div>
+                    <span class="set-static mono" id="updateCurrentVersion">&mdash;</span>
+                  </div>
+                  <div class="set-row" id="updateCheckRow" data-search="check for updates github release">
+                    <div class="set-row-text">
+                      <span class="set-row-label">Check for updates</span>
+                      <span class="set-row-desc">Looks at GitHub for a newer Codeman release.</span>
+                    </div>
+                    <button class="btn-toolbar btn-sm" id="updateCheckBtn" onclick="app.checkForUpdate()">Check now</button>
+                  </div>
+                  <div id="updateResult" class="set-note" style="display:none"></div>
+                  <div class="set-row" id="updateActionRow" style="display:none">
+                    <div class="set-row-text"><span class="set-row-label" id="updateActionLabel">Update available</span></div>
+                    <button class="btn-toolbar btn-sm btn-primary" id="updateNowBtn" onclick="app.startSelfUpdate()">Update now</button>
+                  </div>
+                  <div id="updateNotes" class="set-notes" style="display:none"></div>
+                  <div id="updateProgress" class="set-progress" style="display:none"></div>
+                </div>
+              </div>
+            </section>
+          </div>
+        </div>
+        <div class="form-actions set-foot">
           <button class="btn-toolbar" onclick="app.closeAppSettings()">Cancel</button>
           <button class="btn-toolbar btn-primary" onclick="app.saveAppSettings()">Save</button>
         </div>
diff --git a/src/web/public/mobile.css b/src/web/public/mobile.css
index c3cf7087..4f09065d 100644
--- a/src/web/public/mobile.css
+++ b/src/web/public/mobile.css
@@ -3099,3 +3099,359 @@ 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;
+  }
+}
diff --git a/src/web/public/settings-ui.js b/src/web/public/settings-ui.js
index 07527870..f7856959 100644
--- a/src/web/public/settings-ui.js
+++ b/src/web/public/settings-ui.js
@@ -354,11 +354,8 @@ 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 = phoneOnly;
-    const phoneSection = document.getElementById('appSettingsPhoneSection');
-    if (phoneSection) phoneSection.style.display = phoneOnly;
+    if (mobileOverviewItem) mobileOverviewItem.style.display = MobileDetection.getDeviceType() === 'mobile' ? '' : 'none';
     // 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).
@@ -500,12 +497,15 @@ Object.assign(CodemanApp.prototype, {
     // Updates section — show current version, reset transient result/progress UI.
     this._initUpdatesSection();
 
-    // Reset to first tab and wire up tab switching
-    this.switchSettingsTab('settings-display');
+    // 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');
     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,44 +514,359 @@ Object.assign(CodemanApp.prototype, {
   },
 
   /**
-   * 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.
+   * 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.
    *
    * Availability comes from the injected `window.__codemanCliAvailable`, shared
-   * 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.
+   * 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).
    *
    * Note the inverted default versus the run buttons: an UNKNOWN flag hides this
-   * 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.
+   * group. Hiding it costs a user nothing, whereas hiding a run button would
+   * leave a working install with nothing to click.
    */
   _applyCodexSettingsVisibility() {
-    const btn = document.querySelector('#appSettingsModal .modal-tab-btn[data-tab="settings-codex"]');
-    if (btn) btn.style.display = window.__codemanCliAvailable?.codex === true ? '' : 'none';
+    const group = document.getElementById('appSettingsCodexGroup');
+    if (group) group.style.display = window.__codemanCliAvailable?.codex === true ? '' : 'none';
   },
 
-  switchSettingsTab(tabName) {
+  /**
+   * 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) {
     const modal = document.getElementById('appSettingsModal');
-    // Toggle active class on tab buttons
-    modal.querySelectorAll('.modal-tabs .modal-tab-btn').forEach(btn => {
-      btn.classList.toggle('active', btn.dataset.tab === tabName);
+    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 hidden class on tab content
-    modal.querySelectorAll('.modal-tab-content').forEach(content => {
-      content.classList.toggle('hidden', content.id !== tabName);
+    modal.querySelectorAll('.set-jump-row').forEach(row => {
+      row.classList.toggle('active', row.dataset.section === sectionId);
     });
-    // 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?.();
+    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'));
   },
 
   closeAppSettings() {
+    this._toggleSettingsJump(false);
     document.getElementById('appSettingsModal').classList.remove('active');
 
     // Deactivate focus trap and restore focus
diff --git a/src/web/public/styles.css b/src/web/public/styles.css
index 46f890e9..3df50b85 100644
--- a/src/web/public/styles.css
+++ b/src/web/public/styles.css
@@ -1321,6 +1321,7 @@ html[data-line-anim="packet"] .connection-line.line-enter {
   /* Performance: GPU acceleration for animation */
   will-change: opacity;
 }
+
 .session-tab .tab-status.error { background: var(--red); }
 .session-tab .tab-status.ended { background: var(--text-muted); opacity: 0.5; }
 
@@ -5765,11 +5766,6 @@ 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 {
@@ -14308,3 +14304,691 @@ html[data-skin="daylight-blue"] .welcome-btn-tunnel.active:hover {
     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;
+}
diff --git a/test/admin-ui.test.ts b/test/admin-ui.test.ts
index dbf31352..5bf3d07d 100644
--- a/test/admin-ui.test.ts
+++ b/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"><div class="modal-tabs"></div><div class="modal-body"></div></div>
+      <div class="modal" id="appSettingsModal"><nav class="set-rail"><div class="set-rail-items"></div></nav><div class="set-doc" id="appSettingsDoc"></div></div>
     </body>`,
     { url: 'http://localhost/', runScripts: 'outside-only' }
   );
@@ -45,22 +45,23 @@ async function bootWith(me: Record<string, unknown>) {
 }
 
 describe('admin-ui boot', () => {
-  it('exposes the identity and injects the Users tab for a multi-user admin', async () => {
+  it('exposes the identity and injects the Users section 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 });
-    const btn = win.document.querySelector('[data-tab="settings-users"]');
+    // The settings modal is a rail over one document: a rail entry, not a tab.
+    const btn = win.document.querySelector('[data-section="settings-users"]');
     expect(btn).toBeTruthy();
     expect(win.document.getElementById('settings-users')).toBeTruthy();
   });
 
-  it('does NOT inject the Users tab for a regular user', async () => {
+  it('does NOT inject the Users section for a regular user', async () => {
     const { win } = await bootWith({ username: 'joe', role: 'user', multiUser: true, mustChangePassword: false });
-    expect(win.document.querySelector('[data-tab="settings-users"]')).toBeFalsy();
+    expect(win.document.querySelector('[data-section="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-tab="settings-users"]')).toBeFalsy();
+    expect(win.document.querySelector('[data-section="settings-users"]')).toBeFalsy();
   });
 
   it('shows the change-password modal when mustChangePassword is set', async () => {
diff --git a/test/app-settings-structure.test.ts b/test/app-settings-structure.test.ts
new file mode 100644
index 00000000..b71c8096
--- /dev/null
+++ b/test/app-settings-structure.test.ts
@@ -0,0 +1,102 @@
+/**
+ * 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');
+  });
+});
diff --git a/test/run-mode-ui.test.ts b/test/run-mode-ui.test.ts
index c146dc27..7961c388 100644
--- a/test/run-mode-ui.test.ts
+++ b/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 a dedicated app settings tab', () => {
+  it('renders Codex CLI settings in their own group inside Agents & CLIs', () => {
     const html = readFileSync(resolve(import.meta.dirname, '../src/web/public/index.html'), 'utf8');
 
-    expect(html).toContain('data-tab="settings-codex">Codex CLI</button>');
+    // 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();
 
-    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');
+    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 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');
+    // 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');
   });
 
-  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.
+  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.
     function loadSettingsUi(codexAvailable: boolean | undefined) {
-      const codexTabBtn = { dataset: { tab: 'settings-codex' }, style: { display: 'PRISTINE' } };
+      const codexTabBtn = { id: 'appSettingsCodexGroup', 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: () => null,
-          querySelector: (sel: string) => (sel.includes('[data-tab="settings-codex"]') ? codexTabBtn : null),
+          getElementById: (id: string) => (id === 'appSettingsCodexGroup' ? codexTabBtn : null),
+          querySelector: () => null,
         },
         console,
       });
@@ -319,19 +319,19 @@ describe('Codex quick start settings', () => {
       return { app: new (CodemanApp as any)(), codexTabBtn };
     }
 
-    it('hides the Codex tab when the codex binary is not available', () => {
+    it('hides the Codex group when the codex binary is not available', () => {
       const { app, codexTabBtn } = loadSettingsUi(false);
       app._applyCodexSettingsVisibility();
       expect(codexTabBtn.style.display).toBe('none');
     });
 
-    it('hides the Codex tab when the availability flag was never injected', () => {
+    it('hides the Codex group when the availability flag was never injected', () => {
       const { app, codexTabBtn } = loadSettingsUi(undefined);
       app._applyCodexSettingsVisibility();
       expect(codexTabBtn.style.display).toBe('none');
     });
 
-    it('shows the Codex tab when codex is available', () => {
+    it('shows the Codex group when codex is available', () => {
       const { app, codexTabBtn } = loadSettingsUi(true);
       app._applyCodexSettingsVisibility();
       expect(codexTabBtn.style.display).toBe('');
diff --git a/test/shortcut-registry-overlay.test.ts b/test/shortcut-registry-overlay.test.ts
index 24b63301..d9f12735 100644
--- a/test/shortcut-registry-overlay.test.ts
+++ b/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 tab', () => {
-    expect(htmlSource).toContain('data-tab="settings-shortcuts"');
+  it('exposes shortcut overrides in a dedicated App Settings shortcuts section', () => {
+    expect(htmlSource).toContain('data-section="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 tab is opened', () => {
+  it('renders the shortcuts list when the Shortcuts settings section is reached', () => {
     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-display');
+    app.switchSettingsTab('settings-terminal');
     expect(app.renderShortcutSettingsList).toHaveBeenCalledTimes(1);
   });