aicodeman 1.16.2 → 1.16.4

package/dist/web/public/index.html

@@ -16,16 +16,16 @@
   <link rel="manifest" href="manifest.json">
   <title>Codeman</title>
   <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0%25' y1='0%25' x2='100%25' y2='100%25'%3E%3Cstop offset='0%25' stop-color='%2360a5fa'/%3E%3Cstop offset='100%25' stop-color='%233b82f6'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='32' height='32' rx='6' fill='%230a0a0a'/%3E%3Cpath d='M18 4L8 18h6l-2 10 10-14h-6z' fill='url(%23g)'/%3E%3C/svg%3E">
-  <link rel="stylesheet" href="styles.0024c22e.css">
-  <link rel="stylesheet" href="mobile.5d8c896c.css" media="(max-width: 1023px)">
+  <link rel="stylesheet" href="styles.9e04378d.css">
+  <link rel="stylesheet" href="mobile.4f875962.css" media="(max-width: 1023px)">
   <!-- xterm.css loaded async — terminal won't display until xterm.js runs anyway -->
   <link rel="preload" href="vendor/xterm.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
   <noscript><link rel="stylesheet" href="vendor/xterm.css"></noscript>
   <!-- Preload critical resources — lets browser discover these during HTML parse
        instead of waiting until <script> tags at bottom-of-body are reached. -->
   <link rel="preload" href="vendor/xterm.min.js" as="script">
-  <link rel="preload" href="constants.7d0f4047.js" as="script">
-  <link rel="preload" href="app.4d006245.js" as="script">
+  <link rel="preload" href="constants.53dc0fa1.js" as="script">
+  <link rel="preload" href="app.f9c6aadd.js" as="script">
   <!-- Self-hosted xterm.js — eliminates CDN DNS/TLS latency (~100ms).
        'defer' preserves execution order (xterm loads before fit addon). -->
   <script defer src="vendor/xterm.min.js"></script>
@@ -323,9 +323,9 @@
 
       <!-- Welcome Overlay (shown when no session active) -->
       <div class="welcome-overlay" id="welcomeOverlay">
-        <!-- Open tabs as a vertical column in the left gutter (home-sessions.js).
+        <!-- Open tabs as a rail docked to the left edge (home-sessions.js).
              Absolutely positioned so the centered content below never moves, and
-             therefore only rendered where the gutter is wider than the column;
+             therefore only rendered where the gutter is wider than the rail;
              ships `hidden` and only that module reveals it. -->
         <aside class="home-sessions" id="homeSessions" hidden></aside>
         <div class="welcome-content">
@@ -397,7 +397,27 @@
               </div>
               <div class="search-results" id="searchResults" hidden></div>
             </div>
-            <h3 class="history-title" id="historyTitle">Resume Conversation</h3>
+            <div class="history-header" id="historyHeader">
+              <h3 class="history-title" id="historyTitle">Resume Conversation</h3>
+              <span class="history-count" id="historyCount" data-i18n-skip></span>
+              <div class="history-controls">
+                <input
+                  type="search"
+                  id="historyFilter"
+                  class="history-filter"
+                  placeholder="Filter…"
+                  autocomplete="off"
+                  spellcheck="false"
+                  maxlength="100"
+                  aria-label="Filter past conversations"
+                />
+                <select id="historySort" class="search-select history-sort" aria-label="Sort past conversations">
+                  <option value="recent">Recent</option>
+                  <option value="name">Name A–Z</option>
+                  <option value="folder">Folder A–Z</option>
+                </select>
+              </div>
+            </div>
             <div class="history-list" id="historyList"></div>
           </div>
           <p class="welcome-hint">Or click Run to start</p>
@@ -963,282 +983,382 @@
     </div>
 
     <!-- Session Options Modal (includes Respawn Settings) -->
+    <!-- Session Options: same `set-*` surface as App Settings, but the rail is a
+         real switcher (one .set-section at a time) rather than a table of
+         contents — see the settings-surface block in styles.css. -->
     <div class="modal" id="sessionOptionsModal">
       <div class="modal-backdrop" onclick="app.closeSessionOptions()"></div>
-      <div class="modal-content">
-        <div class="modal-header">
+      <div class="modal-content modal-lg set-shell">
+        <div class="modal-header set-shell-head">
           <h3>Session Options</h3>
-          <button class="modal-close" onclick="app.closeSessionOptions()" aria-label="Close session options">&times;</button>
-        </div>
-        <!-- Modal Tabs -->
-        <div class="modal-tabs">
-          <button class="modal-tab-btn active" data-tab="respawn" data-claude-only onclick="app.switchOptionsTab('respawn')">Respawn</button>
-          <button class="modal-tab-btn" data-tab="context" onclick="app.switchOptionsTab('context')">Context</button>
-          <button class="modal-tab-btn" data-tab="ralph" data-claude-only onclick="app.switchOptionsTab('ralph')">Ralph / Todo</button>
-          <button class="modal-tab-btn" data-tab="summary" onclick="app.switchOptionsTab('summary')">Summary</button>
+          <div class="set-head-actions">
+            <button class="modal-close" onclick="app.closeSessionOptions()" aria-label="Close session options">&times;</button>
+          </div>
         </div>
-        <div class="modal-body">
-          <!-- Respawn Tab Content -->
-          <div class="modal-tab-content" id="respawn-tab">
-          <!-- Respawn Settings Section -->
-          <div class="session-respawn-section" id="sessionRespawnSection">
-            <div class="auto-resume-box">
-              <label class="checkbox-inline">
-                <input type="checkbox" id="modalAutoResumeEnabled" onchange="app.autoSaveAutoResume()">
-                <span>Auto-resume when usage limit resets</span>
-              </label>
-              <span class="auto-resume-status" id="autoResumeStatus"></span>
-              <span class="form-hint">If Claude pauses on a usage limit ("limit reached &middot; resets 3pm"), Codeman waits for the reset time and automatically continues the work. Independent of the respawn loop below.</span>
+        <div class="set-body">
+          <nav class="set-rail" id="sessionOptionsRail" aria-label="Session option sections">
+            <div class="set-rail-items">
+              <button type="button" class="set-rail-item active" data-tab="respawn" data-claude-only onclick="app.switchOptionsTab('respawn')">
+                <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"><polyline points="23 4 23 10 17 10"/><polyline points="1 20 1 14 7 14"/><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"/></svg>
+                <span>Respawn</span>
+              </button>
+              <button type="button" class="set-rail-item" data-tab="context" onclick="app.switchOptionsTab('context')">
+                <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"><ellipse cx="12" cy="6" rx="8" ry="3"/><path d="M4 6v6c0 1.7 3.6 3 8 3s8-1.3 8-3V6"/><path d="M4 12v6c0 1.7 3.6 3 8 3s8-1.3 8-3v-6"/></svg>
+                <span>Session</span>
+              </button>
+              <button type="button" class="set-rail-item" data-tab="ralph" data-claude-only onclick="app.switchOptionsTab('ralph')">
+                <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="M9 6h11"/><path d="M9 12h11"/><path d="M9 18h11"/><polyline points="3 6 4 7 6 5"/><polyline points="3 12 4 13 6 11"/><polyline points="3 18 4 19 6 17"/></svg>
+                <span>Ralph / Todo</span>
+              </button>
+              <button type="button" class="set-rail-item" data-tab="summary" onclick="app.switchOptionsTab('summary')">
+                <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="M3 3v18h18"/><polyline points="7 14 11 10 14 13 20 7"/></svg>
+                <span>Summary</span>
+              </button>
             </div>
+            <p class="set-rail-foot">These options belong to the selected session and save as you change them.</p>
+          </nav>
+
+          <div class="set-doc" id="sessionOptionsDoc">
+            <!-- ══ Respawn ══════════════════════════════════════════════════ -->
+            <section class="set-section" id="respawn-tab" data-label="Respawn">
+              <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"><polyline points="23 4 23 10 17 10"/><polyline points="1 20 1 14 7 14"/><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"/></svg>
+                <h2>Respawn</h2>
+              </div>
+              <p class="set-section-blurb">One autonomous work cycle, plus what to do when a usage limit pauses the session.</p>
+
+              <!-- The one setting on this tab worth reading before anything
+                   else, so it is a callout rather than the first row of a list:
+                   it is what turns a limit-halted overnight run back on. -->
+              <label class="set-callout">
+                <span class="set-callout-ico" aria-hidden="true">
+                  <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><polyline points="12 7 12 12 15 14"/></svg>
+                </span>
+                <span class="set-callout-text">
+                  <span class="set-callout-title">Auto-resume when the usage limit resets</span>
+                  <span class="set-callout-desc">Claude stops on a subscription limit ("limit reached &middot; resets 3pm") and sits there until you come back. Switch this on and Codeman waits out the reset, then continues the work on its own. Independent of the respawn loop below.</span>
+                  <span class="auto-resume-status" id="autoResumeStatus"></span>
+                </span>
+                <span class="switch switch-sm set-callout-switch"><input type="checkbox" id="modalAutoResumeEnabled" onchange="app.autoSaveAutoResume()"><span class="slider"></span></span>
+              </label>
 
-            <div class="respawn-loop-box">
-            <div class="respawn-loop-title">Respawn loop</div>
-            <span class="form-hint respawn-loop-hint">One autonomous work cycle: whenever Claude goes idle, Codeman sends the update prompt, optionally runs /clear + /init, and kickstarts the next round &mdash; repeating for the chosen duration. All settings below belong to this loop; configure them, then press Enable.</span>
+              <!-- Hidden wholesale for non-claude sessions and for a session with
+                   no live process (session-ui.js: openSessionOptions). -->
+              <div id="sessionRespawnSection">
+                <div class="set-group">
+                  <div class="set-group-head"><h4>Loop control</h4></div>
+                  <div class="set-group-body">
+                    <div class="set-row">
+                      <div class="set-row-text">
+                        <span class="set-row-label">Status</span>
+                        <div class="session-respawn-status" id="sessionRespawnStatus">
+                          <span class="respawn-status-indicator"></span>
+                          <span class="respawn-status-text">Not active</span>
+                        </div>
+                      </div>
+                      <div class="set-row-actions">
+                        <button class="btn-toolbar btn-success btn-sm" onclick="app.enableRespawnFromModal()" id="modalEnableRespawnBtn">Enable</button>
+                        <button class="btn-toolbar btn-danger btn-sm" onclick="app.stopRespawnFromModal()" id="modalStopRespawnBtn" style="display: none;">Stop</button>
+                      </div>
+                    </div>
+                  </div>
+                </div>
 
-            <div class="form-row">
-              <label>Duration</label>
-              <div class="duration-presets">
-                <button type="button" class="duration-preset-btn" data-minutes="30" onclick="app.selectDurationPreset('30')">30m</button>
-                <button type="button" class="duration-preset-btn" data-minutes="60" onclick="app.selectDurationPreset('60')">1h</button>
-                <button type="button" class="duration-preset-btn" data-minutes="120" onclick="app.selectDurationPreset('120')">2h</button>
-                <button type="button" class="duration-preset-btn" data-minutes="240" onclick="app.selectDurationPreset('240')">4h</button>
-                <button type="button" class="duration-preset-btn" data-minutes="480" onclick="app.selectDurationPreset('480')">8h</button>
-                <button type="button" class="duration-preset-btn active" data-minutes="" onclick="app.selectDurationPreset('')">∞</button>
-                <div class="duration-custom">
-                  <button type="button" class="duration-preset-btn" data-minutes="custom" onclick="app.selectDurationPreset('custom')">Custom</button>
-                  <div class="input-suffix input-suffix-sm duration-custom-input">
-                    <input type="number" id="modalRespawnDuration" value="" min="1" placeholder="min">
-                    <span>min</span>
+                <div class="set-group">
+                  <div class="set-group-head"><h4>Respawn loop</h4></div>
+                  <p class="set-group-hint">Whenever Claude goes idle, Codeman sends the update prompt, optionally runs /clear + /init, and kickstarts the next round &mdash; repeating for the chosen duration. Configure it here, then press Enable.</p>
+                  <div class="set-group-body">
+                    <div class="set-row set-row-block">
+                      <div class="set-row-text">
+                        <span class="set-row-label">Duration</span>
+                        <span class="set-row-desc">How long the loop keeps cycling before it stops on its own.</span>
+                      </div>
+                      <div class="duration-presets">
+                        <button type="button" class="duration-preset-btn" data-minutes="30" onclick="app.selectDurationPreset('30')">30m</button>
+                        <button type="button" class="duration-preset-btn" data-minutes="60" onclick="app.selectDurationPreset('60')">1h</button>
+                        <button type="button" class="duration-preset-btn" data-minutes="120" onclick="app.selectDurationPreset('120')">2h</button>
+                        <button type="button" class="duration-preset-btn" data-minutes="240" onclick="app.selectDurationPreset('240')">4h</button>
+                        <button type="button" class="duration-preset-btn" data-minutes="480" onclick="app.selectDurationPreset('480')">8h</button>
+                        <button type="button" class="duration-preset-btn active" data-minutes="" onclick="app.selectDurationPreset('')">&#8734;</button>
+                        <div class="duration-custom">
+                          <button type="button" class="duration-preset-btn" data-minutes="custom" onclick="app.selectDurationPreset('custom')">Custom</button>
+                          <div class="input-suffix input-suffix-sm duration-custom-input">
+                            <input type="number" id="modalRespawnDuration" value="" min="1" placeholder="min">
+                            <span>min</span>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+
+                    <div class="set-row set-row-block">
+                      <div class="set-row-text">
+                        <span class="set-row-label">Preset</span>
+                        <span class="set-row-desc">Load a saved loop configuration, or store the current one under a name.</span>
+                      </div>
+                      <div class="set-row-actions set-row-actions-wide">
+                        <select id="respawnPresetSelect" class="set-select" onchange="app.updatePresetDescription()">
+                          <option value="">-- Select preset --</option>
+                          <optgroup label="Built-in" id="builtinPresetsGroup">
+                          </optgroup>
+                          <optgroup label="Custom" id="customPresetsGroup">
+                          </optgroup>
+                        </select>
+                        <button type="button" class="btn-toolbar btn-sm" onclick="app.loadRespawnPreset()" title="Apply preset">Apply</button>
+                        <button type="button" class="btn-toolbar btn-sm" onclick="app.saveCurrentAsPreset()" title="Save current config as preset">Save As&hellip;</button>
+                      </div>
+                      <!-- Filled by updatePresetDescription() and CLEARED on every
+                           open, so it can never hold the row's own description. -->
+                      <span class="set-row-desc set-row-note" id="presetDescriptionHint"></span>
+                    </div>
                   </div>
                 </div>
-              </div>
-            </div>
 
-            <div class="form-section-header">Presets</div>
-            <div class="form-row">
-              <label>Load Preset</label>
-              <div class="preset-selector">
-                <select id="respawnPresetSelect" onchange="app.updatePresetDescription()">
-                  <option value="">-- Select preset --</option>
-                  <optgroup label="Built-in" id="builtinPresetsGroup">
-                  </optgroup>
-                  <optgroup label="Custom" id="customPresetsGroup">
-                  </optgroup>
-                </select>
-                <button type="button" class="btn btn-sm" onclick="app.loadRespawnPreset()" title="Apply preset">Apply</button>
-                <button type="button" class="btn btn-sm btn-secondary" onclick="app.saveCurrentAsPreset()" title="Save current config as preset">Save As...</button>
-              </div>
-              <p class="form-hint" id="presetDescriptionHint"></p>
-            </div>
+                <div class="set-group">
+                  <div class="set-group-head"><h4>Cycle steps</h4></div>
+                  <div class="set-group-body">
+                    <div class="set-row set-row-block">
+                      <div class="set-row-text">
+                        <span class="set-row-label">1. Update prompt</span>
+                        <span class="set-row-desc">Sent as soon as the session goes idle.</span>
+                      </div>
+                      <textarea id="modalRespawnPrompt" class="set-textarea" rows="1" placeholder="Prompt to send when idle" onchange="app.autoSaveRespawnConfig()">update all the docs and CLAUDE.md</textarea>
+                    </div>
 
-            <div class="form-section-header">Cycle Steps</div>
-            <div class="form-row">
-              <label>1. Update Prompt</label>
-              <textarea id="modalRespawnPrompt" rows="1" placeholder="Prompt to send when idle" onchange="app.autoSaveRespawnConfig()" style="resize: vertical; min-height: 30px;">update all the docs and CLAUDE.md</textarea>
-            </div>
+                    <!-- Real checkboxes, deliberately: these are numbered steps of
+                         one cycle, not a set of independent tags. -->
+                    <div class="set-row set-checks">
+                      <label class="set-check"><input type="checkbox" id="modalRespawnSendClear" checked onchange="app.autoSaveRespawnConfig()"><span>2. Send /clear</span></label>
+                      <label class="set-check"><input type="checkbox" id="modalRespawnSendInit" checked onchange="app.autoSaveRespawnConfig()"><span>3. Send /init</span></label>
+                      <label class="set-check" title="Presses Enter for plan approvals and default question options"><input type="checkbox" id="modalRespawnAutoAccept" checked onchange="app.autoSaveRespawnConfig()"><span>Auto-accept prompts</span></label>
+                    </div>
 
-            <div class="respawn-options-row" style="margin: 8px 0;">
-              <label class="checkbox-inline">
-                <input type="checkbox" id="modalRespawnSendClear" checked onchange="app.autoSaveRespawnConfig()">
-                <span>2. Send /clear</span>
-              </label>
-              <label class="checkbox-inline">
-                <input type="checkbox" id="modalRespawnSendInit" checked onchange="app.autoSaveRespawnConfig()">
-                <span>3. Send /init</span>
-              </label>
-              <label class="checkbox-inline" title="Presses Enter for plan approvals and default question options">
-                <input type="checkbox" id="modalRespawnAutoAccept" checked onchange="app.autoSaveRespawnConfig()">
-                <span>Auto-accept prompts</span>
-              </label>
-            </div>
+                    <div class="set-row set-row-block">
+                      <div class="set-row-text">
+                        <span class="set-row-label">4. Kickstart prompt</span>
+                        <span class="set-row-desc">Sent only when /init finishes but Claude stays idle. Optional.</span>
+                      </div>
+                      <textarea id="modalRespawnKickstart" class="set-textarea" rows="1" placeholder="Optional: prompt if /init doesn't trigger work" onchange="app.autoSaveRespawnConfig()"></textarea>
+                    </div>
+                  </div>
+                </div>
 
-            <div class="form-row">
-              <label>4. Kickstart Prompt</label>
-              <textarea id="modalRespawnKickstart" rows="1" placeholder="Optional: prompt if /init doesn't trigger work" onchange="app.autoSaveRespawnConfig()" style="resize: vertical; min-height: 30px;"></textarea>
-              <span class="form-hint">Sent only when /init completes but Claude stays idle &middot; Auto-accept presses Enter for plan approvals and default options</span>
-            </div>
+              </div><!-- End sessionRespawnSection -->
+            </section>
 
-            <div class="respawn-header">
-              <div class="session-respawn-status" id="sessionRespawnStatus">
-                <span class="respawn-status-indicator"></span>
-                <span class="respawn-status-text">Not active</span>
-              </div>
-              <div class="respawn-actions">
-                <button class="btn-toolbar btn-success btn-sm" onclick="app.enableRespawnFromModal()" id="modalEnableRespawnBtn">Enable</button>
-                <button class="btn-toolbar btn-danger btn-sm" onclick="app.stopRespawnFromModal()" id="modalStopRespawnBtn" style="display: none;">Stop</button>
+            <!-- ══ Context ══════════════════════════════════════════════════ -->
+            <section class="set-section hidden" id="context-tab" data-label="Session">
+              <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"><ellipse cx="12" cy="6" rx="8" ry="3"/><path d="M4 6v6c0 1.7 3.6 3 8 3s8-1.3 8-3V6"/><path d="M4 12v6c0 1.7 3.6 3 8 3s8-1.3 8-3v-6"/></svg>
+                <h2>Session</h2>
               </div>
-            </div>
-            </div><!-- End respawn-loop-box -->
-          </div>
-          </div><!-- End respawn-tab -->
+              <p class="set-section-blurb">What this tab is called, how its context window is kept from filling up, and what it watches.</p>
 
-          <!-- Context Management Tab Content -->
-          <div class="modal-tab-content hidden" id="context-tab">
-            <div class="form-section-header">Appearance</div>
-            <div class="form-row">
-              <label>Session Name</label>
-              <div style="display: flex; align-items: center; gap: 4px;">
-                <span id="modalSessionPrefix" style="color: var(--text-muted); white-space: nowrap; display: none;"></span>
-                <input type="text" id="modalSessionName" maxlength="128" placeholder="Auto (directory name)" onblur="app.saveSessionName()" style="flex: 1;">
-              </div>
-              <span class="form-hint">Custom name shown in the tab (right-click tab to rename inline)</span>
-            </div>
-            <div class="form-row">
-              <label>Session Color</label>
-              <div class="color-picker" id="sessionColorPicker">
-                <button type="button" class="color-swatch" data-color="default" title="Default">
-                  <span class="swatch-inner" style="background: var(--bg-hover)"></span>
-                </button>
-                <button type="button" class="color-swatch" data-color="red" title="Red">
-                  <span class="swatch-inner" style="background: var(--session-red)"></span>
-                </button>
-                <button type="button" class="color-swatch" data-color="orange" title="Orange">
-                  <span class="swatch-inner" style="background: var(--session-orange)"></span>
-                </button>
-                <button type="button" class="color-swatch" data-color="yellow" title="Yellow">
-                  <span class="swatch-inner" style="background: var(--session-yellow)"></span>
-                </button>
-                <button type="button" class="color-swatch" data-color="green" title="Green">
-                  <span class="swatch-inner" style="background: var(--session-green)"></span>
-                </button>
-                <button type="button" class="color-swatch" data-color="blue" title="Blue">
-                  <span class="swatch-inner" style="background: var(--session-blue)"></span>
-                </button>
-                <button type="button" class="color-swatch" data-color="purple" title="Purple">
-                  <span class="swatch-inner" style="background: var(--session-purple)"></span>
-                </button>
-                <button type="button" class="color-swatch" data-color="pink" title="Pink">
-                  <span class="swatch-inner" style="background: var(--session-pink)"></span>
-                </button>
-              </div>
-            </div>
-
-            <div class="form-section-header">Token Management</div>
-            <div class="context-settings-grid">
-              <div class="context-setting">
-                <div class="context-setting-header">
-                  <label class="checkbox-inline">
-                    <input type="checkbox" id="modalAutoCompactEnabled" onchange="app.autoSaveAutoCompact()">
-                    <span>Auto-Compact</span>
-                  </label>
-                  <div class="input-suffix input-suffix-sm">
-                    <input type="number" id="modalAutoCompactThreshold" value="110000" min="10000" max="500000" step="10000" onchange="app.autoSaveAutoCompact()">
-                    <span>tokens</span>
+              <div class="set-group">
+                <div class="set-group-head"><h4>Identity</h4></div>
+                <div class="set-group-body">
+                  <div class="set-row has-field">
+                    <div class="set-row-text">
+                      <span class="set-row-label">Session name</span>
+                      <span class="set-row-desc">Shown in the tab. Right-click a tab to rename it inline.</span>
+                    </div>
+                    <div class="set-row-actions">
+                      <span id="modalSessionPrefix" class="set-static" style="display: none; white-space: nowrap;"></span>
+                      <input type="text" id="modalSessionName" class="set-input" maxlength="128" placeholder="Auto (directory name)" onblur="app.saveSessionName()">
+                    </div>
+                  </div>
+                  <div class="set-row set-row-block">
+                    <div class="set-row-text">
+                      <span class="set-row-label">Session color</span>
+                      <span class="set-row-desc">Tints the tab so a session is findable at a glance.</span>
+                    </div>
+                    <div class="color-picker" id="sessionColorPicker">
+                      <button type="button" class="color-swatch" data-color="default" title="Default">
+                        <span class="swatch-inner" style="background: var(--bg-hover)"></span>
+                      </button>
+                      <button type="button" class="color-swatch" data-color="red" title="Red">
+                        <span class="swatch-inner" style="background: var(--session-red)"></span>
+                      </button>
+                      <button type="button" class="color-swatch" data-color="orange" title="Orange">
+                        <span class="swatch-inner" style="background: var(--session-orange)"></span>
+                      </button>
+                      <button type="button" class="color-swatch" data-color="yellow" title="Yellow">
+                        <span class="swatch-inner" style="background: var(--session-yellow)"></span>
+                      </button>
+                      <button type="button" class="color-swatch" data-color="green" title="Green">
+                        <span class="swatch-inner" style="background: var(--session-green)"></span>
+                      </button>
+                      <button type="button" class="color-swatch" data-color="blue" title="Blue">
+                        <span class="swatch-inner" style="background: var(--session-blue)"></span>
+                      </button>
+                      <button type="button" class="color-swatch" data-color="purple" title="Purple">
+                        <span class="swatch-inner" style="background: var(--session-purple)"></span>
+                      </button>
+                      <button type="button" class="color-swatch" data-color="pink" title="Pink">
+                        <span class="swatch-inner" style="background: var(--session-pink)"></span>
+                      </button>
+                    </div>
                   </div>
                 </div>
-                <input type="text" id="modalAutoCompactPrompt" value="" placeholder="Focus prompt (optional)" onchange="app.autoSaveAutoCompact()">
-                <span class="form-hint">Summarizes context while preserving key information</span>
               </div>
 
-              <div class="context-setting">
-                <div class="context-setting-header">
-                  <label class="checkbox-inline">
-                    <input type="checkbox" id="modalAutoClearEnabled" onchange="app.autoSaveAutoClear()">
-                    <span>Auto-Clear</span>
-                  </label>
-                  <div class="input-suffix input-suffix-sm">
-                    <input type="number" id="modalAutoClearThreshold" value="140000" min="10000" max="500000" step="10000" onchange="app.autoSaveAutoClear()">
-                    <span>tokens</span>
+              <div class="set-group">
+                <div class="set-group-head"><h4>Context window</h4></div>
+                <div class="set-group-body">
+                  <div class="set-row">
+                    <div class="set-row-text">
+                      <span class="set-row-label">Auto-compact</span>
+                      <span class="set-row-desc">Summarizes the context at the threshold while preserving key information.</span>
+                    </div>
+                    <div class="set-row-actions">
+                      <input type="number" id="modalAutoCompactThreshold" class="set-num set-num-wide" value="110000" min="10000" max="500000" step="10000" onchange="app.autoSaveAutoCompact()">
+                      <span class="set-unit">tokens</span>
+                      <label class="switch switch-sm"><input type="checkbox" id="modalAutoCompactEnabled" onchange="app.autoSaveAutoCompact()"><span class="slider"></span></label>
+                    </div>
+                  </div>
+                  <div class="set-row has-field">
+                    <div class="set-row-text">
+                      <span class="set-row-label">Compact focus prompt</span>
+                      <span class="set-row-desc">Optional: what the summary should hold on to.</span>
+                    </div>
+                    <input type="text" id="modalAutoCompactPrompt" class="set-input" value="" placeholder="Focus prompt (optional)" onchange="app.autoSaveAutoCompact()">
+                  </div>
+                  <div class="set-row">
+                    <div class="set-row-text">
+                      <span class="set-row-label">Auto-clear</span>
+                      <span class="set-row-desc">Full context reset at the threshold. Keep it higher than auto-compact.</span>
+                    </div>
+                    <div class="set-row-actions">
+                      <input type="number" id="modalAutoClearThreshold" class="set-num set-num-wide" value="140000" min="10000" max="500000" step="10000" onchange="app.autoSaveAutoClear()">
+                      <span class="set-unit">tokens</span>
+                      <label class="switch switch-sm"><input type="checkbox" id="modalAutoClearEnabled" onchange="app.autoSaveAutoClear()"><span class="slider"></span></label>
+                    </div>
                   </div>
                 </div>
-                <span class="form-hint">Full context reset at threshold (use higher than compact)</span>
               </div>
-            </div>
-
-            <div class="form-section-header">File Watching</div>
-            <div class="form-row form-row-switch">
-              <label>Image Watcher</label>
-              <label class="switch">
-                <input type="checkbox" id="modalImageWatcherEnabled" checked onchange="app.toggleSessionImageWatcher()">
-                <span class="slider"></span>
-              </label>
-              <span class="form-hint">Auto-popup new images (screenshots, generated files) in this session's directory</span>
-            </div>
-
-            <div class="form-section-header">Performance</div>
-            <div class="form-row form-row-switch">
-              <label>Flicker Filter</label>
-              <label class="switch">
-                <input type="checkbox" id="modalFlickerFilterEnabled" onchange="app.toggleFlickerFilter()">
-                <span class="slider"></span>
-              </label>
-              <span class="form-hint">Buffers output after screen clears to reduce Ink UI flickering (adds ~50ms latency)</span>
-            </div>
-          </div><!-- End context-tab -->
-
-          <!-- Ralph Wiggum Tab Content -->
-          <div class="modal-tab-content hidden" id="ralph-tab">
-            <div class="form-row form-row-switch">
-              <label>Enable Tracker</label>
-              <label class="switch">
-                <input type="checkbox" id="modalRalphEnabled">
-                <span class="slider"></span>
-              </label>
-              <span class="form-hint">Auto-detects loops and todos in Claude output</span>
-            </div>
 
-            <div class="form-row">
-              <label>Completion Phrase</label>
-              <input type="text" id="modalRalphPhrase" placeholder="e.g., COMPLETE, DONE, FINISHED">
-              <span class="form-hint">Phrase Claude outputs when loop is complete (without &lt;promise&gt; tags)</span>
-            </div>
-
-            <div class="form-section-header">Limits</div>
-            <div class="ralph-limits-grid">
-              <div class="form-col">
-                <label>Max Iterations</label>
-                <input type="number" id="modalRalphMaxIterations" value="0" min="0" max="1000">
-                <span class="form-hint">0 = unlimited</span>
-              </div>
-              <div class="form-col">
-                <label>Max Todos</label>
-                <input type="number" id="modalRalphMaxTodos" value="50" min="1" max="500">
-                <span class="form-hint">Per session</span>
-              </div>
-              <div class="form-col">
-                <label>Todo Expiration</label>
-                <div class="input-suffix input-suffix-sm">
-                  <input type="number" id="modalRalphTodoExpiration" value="60" min="1" max="1440">
-                  <span>min</span>
+              <div class="set-group">
+                <div class="set-group-head"><h4>Behavior</h4></div>
+                <div class="set-group-body">
+                  <div class="set-row">
+                    <div class="set-row-text">
+                      <span class="set-row-label">Image watcher</span>
+                      <span class="set-row-desc">Pops up new images (screenshots, generated files) found in this session's directory.</span>
+                    </div>
+                    <label class="switch switch-sm"><input type="checkbox" id="modalImageWatcherEnabled" checked onchange="app.toggleSessionImageWatcher()"><span class="slider"></span></label>
+                  </div>
+                  <div class="set-row">
+                    <div class="set-row-text">
+                      <span class="set-row-label">Flicker filter</span>
+                      <span class="set-row-desc">Buffers output after screen clears to reduce Ink UI flickering. Adds ~50ms latency.</span>
+                    </div>
+                    <label class="switch switch-sm"><input type="checkbox" id="modalFlickerFilterEnabled" onchange="app.toggleFlickerFilter()"><span class="slider"></span></label>
+                  </div>
                 </div>
               </div>
-            </div>
+            </section>
 
-            <div class="ralph-config-actions">
-              <button class="btn-toolbar btn-primary" onclick="app.saveRalphConfig()">Save Ralph Config</button>
-            </div>
-          </div><!-- End ralph-tab -->
-
-          <!-- Summary Tab Content -->
-          <div class="modal-tab-content hidden" id="summary-tab">
-            <!-- Filter Buttons -->
-            <div class="run-summary-filters">
-              <button class="filter-btn active" data-filter="all" onclick="app.filterRunSummary('all')">All</button>
-              <button class="filter-btn" data-filter="errors" onclick="app.filterRunSummary('errors')">Errors</button>
-              <button class="filter-btn" data-filter="warnings" onclick="app.filterRunSummary('warnings')">Warnings</button>
-              <button class="filter-btn" data-filter="respawn" onclick="app.filterRunSummary('respawn')">Respawn</button>
-              <button class="filter-btn" data-filter="idle" onclick="app.filterRunSummary('idle')">Idle/Working</button>
-            </div>
+            <!-- ══ Ralph / Todo ═════════════════════════════════════════════ -->
+            <section class="set-section hidden" id="ralph-tab" data-label="Ralph / Todo">
+              <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="M9 6h11"/><path d="M9 12h11"/><path d="M9 18h11"/><polyline points="3 6 4 7 6 5"/><polyline points="3 12 4 13 6 11"/><polyline points="3 18 4 19 6 17"/></svg>
+                <h2>Ralph / Todo</h2>
+              </div>
+              <p class="set-section-blurb">Loop and todo tracking read out of this session's output.</p>
 
-            <!-- Timeline -->
-            <div class="run-summary-timeline" id="runSummaryTimeline">
-              <p class="empty-message">Select a session to view summary</p>
-            </div>
+              <div class="set-group">
+                <div class="set-group-head"><h4>Tracker</h4></div>
+                <div class="set-group-body">
+                  <div class="set-row">
+                    <div class="set-row-text">
+                      <span class="set-row-label">Enable tracker</span>
+                      <span class="set-row-desc">Auto-detects loops and todos in Claude's output.</span>
+                    </div>
+                    <label class="switch switch-sm"><input type="checkbox" id="modalRalphEnabled"><span class="slider"></span></label>
+                  </div>
+                  <div class="set-row has-field">
+                    <div class="set-row-text">
+                      <span class="set-row-label">Completion phrase</span>
+                      <span class="set-row-desc">What Claude prints when the loop is done, without &lt;promise&gt; tags.</span>
+                    </div>
+                    <input type="text" id="modalRalphPhrase" class="set-input" placeholder="e.g. COMPLETE, DONE, FINISHED">
+                  </div>
+                </div>
+              </div>
 
-            <!-- Footer with actions -->
-            <div class="run-summary-footer">
-              <span class="run-summary-session-info" id="runSummarySessionInfo"></span>
-              <div class="run-summary-actions">
-                <label class="auto-refresh-label">
-                  <input type="checkbox" id="runSummaryAutoRefresh" onchange="app.toggleRunSummaryAutoRefresh()">
-                  Auto-refresh
-                </label>
-                <button class="btn-toolbar btn-sm" onclick="app.refreshRunSummary()" title="Refresh summary">&#x21BB; Refresh</button>
-                <button class="btn-toolbar btn-sm" onclick="app.exportRunSummary('json')" title="Export as JSON">Export JSON</button>
-                <button class="btn-toolbar btn-sm" onclick="app.exportRunSummary('md')" title="Export as Markdown">Export MD</button>
+              <div class="set-group">
+                <div class="set-group-head"><h4>Limits</h4></div>
+                <div class="set-group-body">
+                  <div class="set-row">
+                    <div class="set-row-text">
+                      <span class="set-row-label">Max iterations</span>
+                      <span class="set-row-desc">0 = unlimited.</span>
+                    </div>
+                    <input type="number" id="modalRalphMaxIterations" class="set-num" value="0" min="0" max="1000">
+                  </div>
+                  <div class="set-row">
+                    <div class="set-row-text">
+                      <span class="set-row-label">Max todos</span>
+                      <span class="set-row-desc">Per session; the oldest are evicted first.</span>
+                    </div>
+                    <input type="number" id="modalRalphMaxTodos" class="set-num" value="50" min="1" max="500">
+                  </div>
+                  <div class="set-row">
+                    <div class="set-row-text">
+                      <span class="set-row-label">Todo expiration</span>
+                      <span class="set-row-desc">How long an untouched todo survives.</span>
+                    </div>
+                    <div class="set-row-actions">
+                      <input type="number" id="modalRalphTodoExpiration" class="set-num" value="60" min="1" max="1440">
+                      <span class="set-unit">min</span>
+                    </div>
+                  </div>
+                  <div class="set-row">
+                    <div class="set-row-text">
+                      <span class="set-row-label">Apply</span>
+                      <span class="set-row-desc">Ralph settings are the one group here that does not save on change.</span>
+                    </div>
+                    <button class="btn-toolbar btn-primary btn-sm" onclick="app.saveRalphConfig()">Save Ralph config</button>
+                  </div>
+                </div>
               </div>
-            </div>
-          </div><!-- End summary-tab -->
+            </section>
+
+            <!-- ══ Summary ══════════════════════════════════════════════════ -->
+            <section class="set-section hidden" id="summary-tab" data-label="Summary">
+              <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="M3 3v18h18"/><polyline points="7 14 11 10 14 13 20 7"/></svg>
+                <h2>Summary</h2>
+              </div>
+              <p class="set-section-blurb">What this session has done: respawns, errors, idle stretches.</p>
+
+              <div class="set-group">
+                <div class="set-group-head"><h4>Timeline</h4><span class="set-scope" id="runSummarySessionInfo"></span></div>
+                <div class="set-group-body">
+                  <div class="run-summary-filters">
+                    <button class="filter-btn active" data-filter="all" onclick="app.filterRunSummary('all')">All</button>
+                    <button class="filter-btn" data-filter="errors" onclick="app.filterRunSummary('errors')">Errors</button>
+                    <button class="filter-btn" data-filter="warnings" onclick="app.filterRunSummary('warnings')">Warnings</button>
+                    <button class="filter-btn" data-filter="respawn" onclick="app.filterRunSummary('respawn')">Respawn</button>
+                    <button class="filter-btn" data-filter="idle" onclick="app.filterRunSummary('idle')">Idle/Working</button>
+                  </div>
+                  <div class="run-summary-timeline" id="runSummaryTimeline">
+                    <p class="empty-message">Select a session to view summary</p>
+                  </div>
+                  <div class="run-summary-footer">
+                    <label class="auto-refresh-label">
+                      <input type="checkbox" id="runSummaryAutoRefresh" onchange="app.toggleRunSummaryAutoRefresh()">
+                      Auto-refresh
+                    </label>
+                    <div class="run-summary-actions">
+                      <button class="btn-toolbar btn-sm" onclick="app.refreshRunSummary()" title="Refresh summary">&#x21BB; Refresh</button>
+                      <button class="btn-toolbar btn-sm" onclick="app.exportRunSummary('json')" title="Export as JSON">Export JSON</button>
+                      <button class="btn-toolbar btn-sm" onclick="app.exportRunSummary('md')" title="Export as Markdown">Export MD</button>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </section>
+          </div>
         </div>
       </div>
     </div>
@@ -1273,778 +1393,924 @@
     <!-- 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>
+      <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="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-updates">
+                <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 3v12"/><polyline points="7 10 12 15 17 10"/><path d="M4 20h16"/></svg>
+                <span>Updates</span>
+              </button>
+              <button type="button" class="set-rail-item" 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-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-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-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>
 
-              <!-- 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 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>
+
+            <!-- ══ Updates ══════════════════════════════════════════════════
+                 First in the document on purpose: what this install is running,
+                 and whether a newer release is waiting, before any preference. -->
+            <section class="set-section" id="settings-updates" data-label="Updates">
+              <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 3v12"/><polyline points="7 10 12 15 17 10"/><path d="M4 20h16"/></svg>
+                <h2>Updates</h2>
+              </div>
+              <p class="set-section-blurb">The version this install is running, and the one-click update.</p>
+
+              <div class="set-group">
+                <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 set-static-strong 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>
-                <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>
+            </section>
+
+            <!-- ══ 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>
-              <!-- 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>
+              <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>
-                <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 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>
-                <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>
+            </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>
+
+              <!-- Live preview: a scale model of the app that redraws from the
+                   chips below on every change, so "what does this add" is answered
+                   in place instead of after a save. Icons are CLONED from the
+                   chips (settings-ui.js: _syncLayoutPreview), so each icon has
+                   exactly one copy in this file and the two can never drift. -->
+              <div class="set-preview" id="appSettingsLayoutPreview">
+                <div class="set-preview-head">
+                  <span class="set-preview-title">Live preview</span>
+                  <span class="set-preview-hint">Updates as you pick, before you save.</span>
+                </div>
+                <div class="set-preview-frame" data-i18n-skip>
+                  <div class="set-preview-bar">
+                    <span class="set-preview-logo">C</span>
+                    <span class="set-preview-tab">w1-codeman</span>
+                    <span class="set-preview-tab set-preview-tab-dim">w2-docs</span>
+                    <span class="set-preview-gap"></span>
+                    <span class="set-preview-btns" id="appSettingsPreviewHeader"></span>
+                    <span class="set-preview-btn set-preview-btn-fixed" title="App Settings"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" 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 0 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 0 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 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.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 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg></span>
+                  </div>
+                  <div class="set-preview-stage">
+                    <div class="set-preview-term"><span class="set-preview-caret">&#10095;</span> npm run dev</div>
+                    <div class="set-preview-panels" id="appSettingsPreviewPanels"></div>
+                    <div class="set-preview-floats" id="appSettingsPreviewFloats"></div>
+                  </div>
+                  <div class="set-preview-tray">
+                    <span class="set-preview-run">Run</span>
+                    <span class="set-preview-tools" id="appSettingsPreviewToolbar"></span>
+                  </div>
+                </div>
+                <p class="set-preview-empty" id="appSettingsPreviewEmpty" hidden>Nothing extra switched on: header keeps the gear only.</p>
+              </div>
+
+              <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" data-preview="header" data-preview-order="1" data-preview-text="A+"><input type="checkbox" id="appSettingsShowFontControls"><svg class="set-chip-ico" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 20 10 5l6 15"/><path d="M6.5 15h7"/><path d="M18 12h4M20 10v4"/></svg><span>Font Size</span></label>
+                    <label class="set-chip" data-preview="header" data-preview-order="2" data-preview-text="CPU 12%"><input type="checkbox" id="appSettingsShowSystemStats" checked><svg class="set-chip-ico" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 12h4l2.5-7 4 14L16 12h5"/></svg><span>System Stats</span></label>
+                    <label class="set-chip" data-preview="header" data-preview-order="3"><input type="checkbox" id="appSettingsShowRedrawButton"><svg class="set-chip-ico" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="1 4 1 10 7 10"/><polyline points="23 20 23 14 17 14"/><path d="M20.49 9A9 9 0 0 0 5.64 5.64L1 10m22 4l-4.64 4.36A9 9 0 0 1 3.51 15"/></svg><span>Redraw Terminal</span></label>
+                    <label class="set-chip" data-preview="header" data-preview-order="4"><input type="checkbox" id="appSettingsShowResponseViewer"><svg class="set-chip-ico" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/><circle cx="12" cy="12" r="3"/></svg><span>Response Viewer</span></label>
+                    <label class="set-chip" data-preview="header" data-preview-order="5"><input type="checkbox" id="appSettingsShowAwayDigestButton"><svg class="set-chip-ico" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 6h13"/><path d="M8 12h13"/><path d="M8 18h13"/><path d="M3 6h.01"/><path d="M3 12h.01"/><path d="M3 18h.01"/></svg><span>Away Digest</span></label>
+                    <label class="set-chip" data-preview="header" data-preview-order="6"><input type="checkbox" id="appSettingsShowSessionButton"><svg class="set-chip-ico" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="12 2 2 7 12 12 22 7 12 2"/><polyline points="2 17 12 22 22 17"/><polyline points="2 12 12 17 22 12"/></svg><span>Session Manager</span></label>
+                    <label class="set-chip" data-preview="header" data-preview-order="9"><input type="checkbox" id="appSettingsShowAttachmentsButton"><svg class="set-chip-ico" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m21.44 11.05-9.19 9.19a6 6 0 0 1-8.49-8.49l9.19-9.19a4 4 0 0 1 5.66 5.66l-9.2 9.19a2 2 0 0 1-2.83-2.83l8.49-8.48"/></svg><span>Attachments</span></label>
+                    <label class="set-chip" data-preview="header" data-preview-order="10"><input type="checkbox" id="appSettingsShowFileViewerButton"><svg class="set-chip-ico" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/></svg><span>File Viewer</span></label>
+                    <label class="set-chip" data-preview="header" data-preview-order="11"><input type="checkbox" id="appSettingsShowMultiMonitorButton"><svg class="set-chip-ico" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="2" y="4" width="13" height="9" rx="1.5"/><rect x="11" y="9" width="11" height="8" rx="1.5"/></svg><span>Multi-monitor</span></label>
+                    <label class="set-chip" data-preview="header" data-preview-order="13" data-preview-text="42%"><input type="checkbox" id="appSettingsShowPlanUsageLimits"><svg class="set-chip-ico" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 18a8 8 0 1 1 16 0"/><path d="M12 18l4.5-5"/></svg><span>Plan Usage</span></label>
+                    <label class="set-chip" data-preview="header" data-preview-order="14"><input type="checkbox" id="appSettingsShowLifecycleLog"><svg class="set-chip-ico" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/></svg><span>Lifecycle Log</span></label>
+                  </div>
                 </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 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" data-preview="panel" data-preview-order="1"><input type="checkbox" id="appSettingsShowMonitor" checked><svg class="set-chip-ico" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 12h4l2.5-7 4 14L16 12h5"/></svg><span>Monitor</span></label>
+                    <label class="set-chip" data-preview="panel" data-preview-order="2"><input type="checkbox" id="appSettingsShowProjectInsights"><svg class="set-chip-ico" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 19V9"/><path d="M10 19V5"/><path d="M16 19v-7"/><path d="M22 19H2"/></svg><span>Project Insights</span></label>
+                    <label class="set-chip" data-preview="panel" data-preview-order="3"><input type="checkbox" id="appSettingsShowFileBrowser"><svg class="set-chip-ico" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 7a2 2 0 0 1 2-2h4l2 2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/></svg><span>File Browser</span></label>
+                    <label class="set-chip" data-preview="panel" data-preview-order="4"><input type="checkbox" id="appSettingsShowSubagents"><svg class="set-chip-ico" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="6" cy="6" r="2.5"/><circle cx="6" cy="18" r="2.5"/><circle cx="18" cy="12" r="2.5"/><path d="M8.2 7.2 15.6 11M8.2 16.8 15.6 13"/></svg><span>Subagents</span></label>
+                  </div>
                 </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 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" data-preview="header" data-preview-order="7"><input type="checkbox" id="appSettingsApprovalsInbox"><svg class="set-chip-ico" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg><span>Approvals Inbox</span></label>
+                    <label class="set-chip" data-preview="header" data-preview-order="8"><input type="checkbox" id="appSettingsReadMyMind"><span class="set-chip-ico set-chip-emoji" aria-hidden="true">🧠</span><span>Read My Mind</span></label>
+                    <label class="set-chip" data-preview="header" data-preview-order="12"><input type="checkbox" id="appSettingsShowUltracodeAgents"><svg class="set-chip-ico" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="6" cy="6" r="2.5"/><circle cx="6" cy="18" r="2.5"/><circle cx="18" cy="12" r="2.5"/><path d="M8.2 7.2 15.6 11M8.2 16.8 15.6 13"/></svg><span>Ultracode Agents</span></label>
+                    <label class="set-chip" data-preview="float" data-preview-order="1"><input type="checkbox" id="appSettingsUltracodeFloatingWindows"><svg class="set-chip-ico" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M3 9h18"/><circle cx="6" cy="6.5" r="0.6"/></svg><span>Ultracode Windows</span></label>
+                  </div>
                 </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 class="set-group">
+                <div class="set-group-head"><h4>Scheduling</h4><span class="set-scope">device</span></div>
+                <div class="set-group-body">
+                  <div class="set-chips" data-search="cron scheduled jobs toolbar">
+                    <label class="set-chip" data-preview="toolbar" data-preview-order="1"><input type="checkbox" id="appSettingsShowCronButton"><svg class="set-chip-ico" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="9"/><polyline points="12 7 12 12 15 14"/></svg><span>Cron</span></label>
+                  </div>
+                </div>
               </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 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>
 
-              <!-- 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>
+            <!-- ══ 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>
 
-              <!-- 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 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="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 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="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 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>
-              <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>
+            </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>
 
-              <!-- 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 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>
 
-              <!-- 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>
+            <!-- ══ 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>
 
-              <!-- 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 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="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 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>
-              <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>
+            </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>
 
-              <!-- 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 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="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 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 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 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>
-              <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>
+            </section>
 
-            </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>
+            <!-- ══ 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>
-              <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>
+              <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 provider claude deepgram web speech engine">
+                    <div class="set-row-text">
+                      <span class="set-row-label">Speech engine</span>
+                      <span class="set-row-desc">Auto prefers Claude when this server can transcribe, then Deepgram, then the browser.</span>
+                    </div>
+                    <select id="voiceProvider" class="set-select">
+                      <option value="auto">Auto</option>
+                      <option value="claude">Claude</option>
+                      <option value="deepgram">Deepgram</option>
+                      <option value="webspeech">Browser (Web Speech)</option>
+                    </select>
+                  </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 class="set-row has-field" data-search="voice language">
+                    <div class="set-row-text">
+                      <span class="set-row-label">Language</span>
+                      <span class="set-row-desc">Applies to whichever engine is active.</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. Sent to Claude and Deepgram alike.</span>
+                    </div>
+                    <input type="text" id="voiceKeyterms" class="set-input" placeholder="codeman, tmux, respawn, subagent">
+                  </div>
                 </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 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" data-search="claude voice dictation subscription no api key">
+                    <div class="set-row-text">
+                      <span class="set-row-label">Transcribe with this server's Claude login</span>
+                      <span class="set-row-desc">Dictation with no API key, through the same service Claude Code's own /voice mode uses. Microphone audio goes to Anthropic and is billed to this machine's Claude subscription, for everyone who can reach this UI.</span>
+                    </div>
+                    <label class="switch switch-sm"><input type="checkbox" id="appSettingsClaudeVoice"><span class="slider"></span></label>
+                  </div>
+                  <div class="set-row" data-search="claude voice status credentials">
+                    <div class="set-row-text"><span class="set-row-label">Server status</span></div>
+                    <span class="voice-provider-status" id="voiceClaudeStatus" data-i18n-skip>&mdash;</span>
+                  </div>
                 </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 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>
               </div>
+            </section>
 
-              <!-- 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>
+            <!-- ══ 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>
-              <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>
+              <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>
-            </div>
+            </section>
 
-            <!-- 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>
+
+            <!-- ══ 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 and remote access. Set once, rarely touched.</p>
 
-              <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 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>
-                <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 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>
-          </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 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>
+            </section>
           </div>
         </div>
-        <div class="form-actions">
+        <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>
@@ -2069,24 +2335,56 @@
     </div>
 
     <!-- Create Case Modal -->
+    <!-- Add Case: same `set-*` surface as App Settings and Session Options; the
+         rail switches panels (switchCaseModalTab in session-ui.js). -->
     <div class="modal" id="createCaseModal">
       <div class="modal-backdrop" onclick="app.closeCreateCaseModal()"></div>
-      <div class="modal-content modal-lg">
-        <div class="modal-header">
+      <div class="modal-content modal-lg set-shell">
+        <div class="modal-header set-shell-head">
           <h3>Add Case</h3>
-          <button class="modal-close" onclick="app.closeCreateCaseModal()" aria-label="Close create case">&times;</button>
-        </div>
-        <div class="modal-tabs">
-          <button class="modal-tab-btn active" data-tab="case-create">Create New</button>
-          <button class="modal-tab-btn" data-tab="case-clone" id="caseCloneTabBtn">Clone Repo</button>
-          <button class="modal-tab-btn" data-tab="case-link">Link Existing</button>
-          <button class="modal-tab-btn" data-tab="case-remote">Remote</button>
-          <button class="modal-tab-btn" data-tab="case-docker">Docker</button>
-          <button class="modal-tab-btn" data-tab="case-manage">Manage</button>
+          <div class="set-head-actions">
+            <button class="modal-close" onclick="app.closeCreateCaseModal()" aria-label="Close create case">&times;</button>
+          </div>
         </div>
-        <div class="modal-body">
+        <div class="set-body">
+          <nav class="set-rail" id="createCaseRail" aria-label="Add case sections">
+            <div class="set-rail-items">
+              <button type="button" class="set-rail-item active" data-tab="case-create">
+                <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="M12 8v8M8 12h8"/></svg>
+                <span>Create New</span>
+              </button>
+              <button type="button" class="set-rail-item" data-tab="case-clone" id="caseCloneTabBtn">
+                <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"><line x1="6" y1="3" x2="6" y2="15"/><circle cx="18" cy="6" r="3"/><circle cx="6" cy="18" r="3"/><path d="M18 9a9 9 0 0 1-9 9"/></svg>
+                <span>Clone Repo</span>
+              </button>
+              <button type="button" class="set-rail-item" data-tab="case-link">
+                <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="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>
+                <span>Link Existing</span>
+              </button>
+              <button type="button" class="set-rail-item" data-tab="case-remote">
+                <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="M3 12h18"/><path d="M12 3a15 15 0 0 1 0 18a15 15 0 0 1 0-18z"/></svg>
+                <span>Remote</span>
+              </button>
+              <button type="button" class="set-rail-item" data-tab="case-docker">
+                <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="M3 12h18v4a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3z"/><rect x="6" y="7" width="4" height="4"/><rect x="11" y="7" width="4" height="4"/><rect x="11" y="2.5" width="4" height="4"/></svg>
+                <span>Docker</span>
+              </button>
+              <button type="button" class="set-rail-item" data-tab="case-manage">
+                <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"><line x1="4" y1="6" x2="20" y2="6"/><line x1="4" y1="12" x2="20" y2="12"/><line x1="4" y1="18" x2="20" y2="18"/><circle cx="9" cy="6" r="2"/><circle cx="15" cy="12" r="2"/><circle cx="8" cy="18" r="2"/></svg>
+                <span>Manage</span>
+              </button>
+            </div>
+            <p class="set-rail-foot">A case is a workspace: a directory, its CLAUDE.md, and where its sessions run.</p>
+          </nav>
+
+          <div class="set-doc" id="createCaseDoc">
           <!-- Create New Tab -->
-          <div class="modal-tab-content" id="case-create">
+          <div class="set-section" id="case-create">
+            <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="M12 8v8M8 12h8"/></svg>
+              <h2>Create New</h2>
+            </div>
+            <p class="set-section-blurb">A fresh workspace under ~/codeman-cases, scaffolded with its own CLAUDE.md.</p>
             <div class="form-row">
               <label>Case Name</label>
               <input type="text" id="newCaseName" placeholder="my-project" pattern="[a-zA-Z0-9_-]+" autocomplete="off" autocapitalize="off" spellcheck="false">
@@ -2101,7 +2399,7 @@
               <span class="form-hint">Runs this case in a hardened, isolated container. The base image is built automatically on first use. Docker/Podman must be installed.</span>
             </div>
             <details class="advanced-options docker-quick-settings" id="dockerQuickSettings">
-              <summary>Container settings (optional, sensible defaults)</summary>
+              <summary><svg class="set-adv-chev" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 9l6 6 6-6"/></svg><span>Container settings (optional, sensible defaults)</span></summary>
               <div class="advanced-options-content">
                 <div class="form-row">
                   <label>Template</label>
@@ -2145,7 +2443,12 @@
             </details>
           </div>
           <!-- Clone Repo Tab (issue #236) -->
-          <div class="modal-tab-content hidden" id="case-clone">
+          <div class="set-section hidden" id="case-clone">
+            <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"><line x1="6" y1="3" x2="6" y2="15"/><circle cx="18" cy="6" r="3"/><circle cx="6" cy="18" r="3"/><path d="M18 9a9 9 0 0 1-9 9"/></svg>
+              <h2>Clone Repo</h2>
+            </div>
+            <p class="set-section-blurb">Clone a public repository into a new case. Anonymous HTTPS or your own credential helper.</p>
             <div class="form-row">
               <label>Repository URL</label>
               <input type="url" id="cloneRepoUrl" placeholder="https://github.com/owner/repo.git" autocomplete="off" autocapitalize="off" autocorrect="off" spellcheck="false" oninput="app.onCloneUrlInput()">
@@ -2176,7 +2479,7 @@
               <span class="form-hint">Which CLI to point the Run button at once the clone finishes. Changeable any time from the Run dropdown.</span>
             </div>
             <details class="advanced-options">
-              <summary>Clone options</summary>
+              <summary><svg class="set-adv-chev" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 9l6 6 6-6"/></svg><span>Clone options</span></summary>
               <div class="advanced-options-content">
                 <div class="form-row">
                   <label class="checkbox-row"><input type="checkbox" id="cloneShallow"> Shallow clone (--depth 1)</label>
@@ -2190,7 +2493,12 @@
             <span class="form-hint" id="cloneCaseNote" style="margin-top: 8px; display: block;">The clone runs while this request is open, so a large repository takes a while. The case appears as soon as git finishes, even if the browser gave up waiting.</span>
           </div>
           <!-- Link Existing Tab -->
-          <div class="modal-tab-content hidden" id="case-link">
+          <div class="set-section hidden" id="case-link">
+            <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="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>
+              <h2>Link Existing</h2>
+            </div>
+            <p class="set-section-blurb">Point a case at a folder that already exists on this machine.</p>
             <div class="form-row">
               <label>Case Name</label>
               <input type="text" id="linkCaseName" placeholder="my-project" pattern="[a-zA-Z0-9_-]+" autocomplete="off" autocapitalize="off" spellcheck="false">
@@ -2206,7 +2514,12 @@
             </div>
           </div>
           <!-- Remote Tab -->
-          <div class="modal-tab-content hidden" id="case-remote">
+          <div class="set-section hidden" id="case-remote">
+            <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="M3 12h18"/><path d="M12 3a15 15 0 0 1 0 18a15 15 0 0 1 0-18z"/></svg>
+              <h2>Remote</h2>
+            </div>
+            <p class="set-section-blurb">Run the agent on another machine over SSH, from a tab here.</p>
             <div class="form-row">
               <label>Case Name</label>
               <input type="text" id="remoteCaseName" placeholder="gpu-work" pattern="[a-zA-Z0-9_-]+" autocomplete="off" autocapitalize="off" spellcheck="false">
@@ -2240,7 +2553,7 @@
               <span class="form-hint">Optional. Leave blank to use exec codex on the remote host.</span>
             </div>
             <details class="advanced-options">
-              <summary>Advanced SSH</summary>
+              <summary><svg class="set-adv-chev" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 9l6 6 6-6"/></svg><span>Advanced SSH</span></summary>
               <div class="advanced-options-content">
                 <div class="form-row">
                   <label>Identity File</label>
@@ -2266,7 +2579,7 @@
             </details>
             <!-- COD-105 — discover + attach existing remote tmux sessions this Codeman didn't create. -->
             <details class="advanced-options" id="remoteDiscoverSection">
-              <summary>Discover existing sessions</summary>
+              <summary><svg class="set-adv-chev" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 9l6 6 6-6"/></svg><span>Discover existing sessions</span></summary>
               <div class="advanced-options-content">
                 <span class="form-hint">Find <code>codeman-*</code> tmux sessions already running on this host (started by the remote's own Codeman or another instance) and attach to one. Attaching shares the session; closing the tab detaches it — it is never killed.</span>
                 <div class="form-row" style="margin-top: 8px;">
@@ -2277,7 +2590,12 @@
             </details>
           </div>
           <!-- Docker Tab -->
-          <div class="modal-tab-content hidden" id="case-docker">
+          <div class="set-section hidden" id="case-docker">
+            <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="M3 12h18v4a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3z"/><rect x="6" y="7" width="4" height="4"/><rect x="11" y="7" width="4" height="4"/><rect x="11" y="2.5" width="4" height="4"/></svg>
+              <h2>Docker</h2>
+            </div>
+            <p class="set-section-blurb">Run the case inside a container: one per case, shared by all its sessions.</p>
             <div class="form-row">
               <label>Case Name</label>
               <input type="text" id="dockerCaseName" placeholder="sandbox" pattern="[a-zA-Z0-9_-]+" autocomplete="off" autocapitalize="off" spellcheck="false">
@@ -2307,7 +2625,7 @@
               </select>
             </div>
             <details class="advanced-options">
-              <summary>Advanced container settings</summary>
+              <summary><svg class="set-adv-chev" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M6 9l6 6 6-6"/></svg><span>Advanced container settings</span></summary>
               <div class="advanced-options-content">
                 <div class="form-row">
                   <label>Memory</label>
@@ -2330,7 +2648,12 @@
             <span class="form-hint" id="dockerLinkStatus" style="margin-top: 8px; display: block;"></span>
           </div>
           <!-- Manage Tab -->
-          <div class="modal-tab-content hidden" id="case-manage">
+          <div class="set-section hidden" id="case-manage">
+            <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"><line x1="4" y1="6" x2="20" y2="6"/><line x1="4" y1="12" x2="20" y2="12"/><line x1="4" y1="18" x2="20" y2="18"/><circle cx="9" cy="6" r="2"/><circle cx="15" cy="12" r="2"/><circle cx="8" cy="18" r="2"/></svg>
+              <h2>Manage</h2>
+            </div>
+            <p class="set-section-blurb">Reorder or remove cases, and pick up anything exported from a docker case.</p>
             <div class="case-manage-list" id="caseManageList">
               <!-- Populated by JS -->
             </div>
@@ -2343,8 +2666,9 @@
               <div class="case-manage-list" id="dockerExportsList"><span class="form-hint">No exports yet. Export a docker case from its tab.</span></div>
             </div>
           </div>
+          </div>
         </div>
-        <div class="form-actions">
+        <div class="form-actions set-foot">
           <button class="btn-toolbar" onclick="app.closeCreateCaseModal()">Cancel</button>
           <button class="btn-toolbar btn-primary" id="caseModalSubmit" onclick="app.submitCaseModal()">Create</button>
         </div>
@@ -2813,14 +3137,25 @@
             <input type="text" id="readMyMindPrompt" class="readmymind-prompt-input" data-i18n-skip aria-label="Predicted prompt, editable" onkeydown="if(event.key==='Enter')app.sendReadMyMind(true)">
           </div>
           <div class="readmymind-why" id="readMyMindWhy" data-i18n-skip></div>
+          <div class="readmymind-alternates" id="readMyMindAlternates" data-i18n-skip style="display:none"></div>
+        </div>
+        <div class="readmymind-error" style="display:none">No suggestion this time. Add a steer note and Rethink to try again.</div>
+        <!-- Rethink steer note: the user's own words about what they actually
+             meant, sent as `steer` with the next Rethink. Shown whenever
+             Rethink is live (ready AND empty-result phases), hidden while a
+             prediction runs. -->
+        <div class="readmymind-steer-row" id="readMyMindSteerRow" style="display:none">
+          <input type="text" id="readMyMindSteer" class="readmymind-steer-input" maxlength="2000" placeholder="Steer the rethink, e.g. 'no, I meant the mobile bug'" aria-label="Steer note for Rethink" onkeydown="if(event.key==='Enter')app.rethinkReadMyMind()">
         </div>
-        <div class="readmymind-error" style="display:none">No suggestion this time. Rethink to try again.</div>
       </div>
+      <!-- btn-toolbar, not bare "btn btn-*": no .btn/.btn-secondary rule exists
+           in this codebase, so the bare classes render as unstyled UA buttons.
+           btn-toolbar is the convention every other modal footer uses. -->
       <div class="modal-footer">
-        <button class="btn btn-secondary" onclick="app.closeReadMyMind()">Dismiss</button>
-        <button class="btn btn-secondary" id="readMyMindRethink" onclick="app.rethinkReadMyMind()">Rethink</button>
-        <button class="btn btn-secondary" onclick="app.sendReadMyMind(false)" title="Put the text on the session's composer without submitting it">Insert</button>
-        <button class="btn btn-primary" onclick="app.sendReadMyMind(true)">Send</button>
+        <button class="btn-toolbar" onclick="app.closeReadMyMind()">Dismiss</button>
+        <button class="btn-toolbar" id="readMyMindRethink" onclick="app.rethinkReadMyMind()">Rethink</button>
+        <button class="btn-toolbar" onclick="app.sendReadMyMind(false)" title="Put the text on the session's composer without submitting it">Insert</button>
+        <button class="btn-toolbar btn-primary" onclick="app.sendReadMyMind(true)">Send</button>
       </div>
     </div>
   </div>
@@ -2836,28 +3171,28 @@
     <div class="approvals-list"></div>
   </div>
 
-  <script defer src="constants.7d0f4047.js"></script>
-  <script defer src="i18n.ef50083f.js"></script>
+  <script defer src="constants.53dc0fa1.js"></script>
+  <script defer src="i18n.89097ff5.js"></script>
   <script defer src="mobile-handlers.32fdd57f.js"></script>
-  <script defer src="voice-input.e5461859.js"></script>
+  <script defer src="voice-input.4ec670b0.js"></script>
   <script defer src="notification-manager.5d229063.js"></script>
-  <script defer src="keyboard-accessory.1f35b482.js"></script>
+  <script defer src="keyboard-accessory.0f524637.js"></script>
   <script defer src="input-cjk.63794d0b.js"></script>
   <!-- Hardened markdown HTML sanitizer (wires DOMPurify). Must precede app.js. -->
   <script defer src="sanitize-html.bc7078d6.js"></script>
-  <script defer src="app.4d006245.js"></script>
-  <script defer src="terminal-ui.e7c5d233.js"></script>
+  <script defer src="app.f9c6aadd.js"></script>
+  <script defer src="terminal-ui.ae776405.js"></script>
   <script defer src="respawn-ui.ff0dae4c.js"></script>
   <script defer src="ralph-panel.6de2d0f8.js"></script>
   <script defer src="orchestrator-panel.js"></script>
   <script defer src="cron-ui.js"></script>
-  <script defer src="settings-ui.1c15649c.js"></script>
-  <script defer src="panels-ui.3df9cd95.js"></script>
+  <script defer src="settings-ui.63be4178.js"></script>
+  <script defer src="panels-ui.54b0d004.js"></script>
   <script defer src="readmymind-ui.js"></script>
   <script defer src="ultracode-panel.js"></script>
   <script defer src="approvals-ui.js"></script>
   <script defer src="admin-ui.js"></script>
-  <script defer src="session-ui.f4fed187.js"></script>
+  <script defer src="session-ui.46a0993c.js"></script>
   <script defer src="webview-tabs.js"></script>
   <script defer src="mobile-overview.js"></script>
   <script defer src="home-sessions.js"></script>