great-cto 3.26.4 → 3.27.0

package/board/packages/board/public/index.html

@@ -11,11 +11,8 @@
   function toggleBoardTheme() {
     var r = document.documentElement, t = r.dataset.theme === 'light' ? 'dark' : 'light';
     r.dataset.theme = t; try { localStorage.setItem('gcto_board_theme', t); } catch (e) {}
-    var b = document.getElementById('board-theme-btn'); if (b) b.textContent = t === 'light' ? '☀️' : '🌙';
+    /* The icon follows data-theme in CSS; nothing to repaint here. */
   }
-  addEventListener('DOMContentLoaded', function () {
-    var b = document.getElementById('board-theme-btn'); if (b) b.textContent = document.documentElement.dataset.theme === 'light' ? '☀️' : '🌙';
-  });
 </script>
 <meta charset="UTF-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -118,6 +115,17 @@
   --p2-bg: rgba(240, 210, 78, 0.14);  --p2-fg: #fde68a;
   --p3-bg: rgba(255, 255, 255, 0.05); --p3-fg: #9ca3af;
 
+  /* Absence — two states the board already produces and could not render
+     (§4/§6.3 of DESIGN-board-redesign-2026-09): `!` unreadable, `?` unjudged.
+     Reuses the p1 values verbatim rather than introducing a fifth amber. */
+  --absent-warn-fg: #fcd34d;
+  --absent-warn-bg: rgba(255, 170, 60, 0.14);
+  /* Posture — aliases onto the measured p0 pair, not new colours (§6.5): one
+     hue for "expensive", distinguished by words. Aliased, not copied, so a
+     future change to p0 cannot silently desynchronise these. */
+  --posture-expensive-bg: var(--p0-bg);
+  --posture-expensive-fg: var(--p0-fg);
+
   /* Was `--serif`, and there is no serif anywhere in the stack — it is the
      DISPLAY face, doing display work correctly under a name that promised a
      contrast this page has never had. greatcto.systems already calls the same
@@ -191,6 +199,13 @@
   --p1-bg: rgba(180, 83, 9, 0.12);    --p1-fg: #a64c08;
   --p2-bg: rgba(146, 102, 10, 0.12);  --p2-fg: #885f09;
   --p3-bg: rgba(0, 0, 0, 0.05);       --p3-fg: #5c6b65;
+  /* Absence / posture — see :root for the rationale. Both blocks in the same
+     commit: a token added to only one theme is the defect this file's own
+     comments document (the light block is 39 overrides nobody was checking). */
+  --absent-warn-fg: #a64c08;
+  --absent-warn-bg: rgba(180, 83, 9, 0.12);
+  --posture-expensive-bg: var(--p0-bg);
+  --posture-expensive-fg: var(--p0-fg);
   --surface-drawer: #ffffff;
   --surface-translucent: rgba(255, 255, 255, 0.72);
   --rail-ok-bg: rgba(10, 125, 77, 0.12);
@@ -565,6 +580,9 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
 .nav-item.active .icon { color: var(--accent-text); }
 .nav-item .count { margin-left: auto; font-size: var(--fs-caption); color: var(--text3); font-family: var(--mono); }
 .nav-divider { height: 1px; background: var(--border); margin: 12px 8px; }
+.nav-views-label { padding: 0 18px; font-size: var(--fs-caption); color: var(--text3); text-transform: uppercase; letter-spacing: 0.06em; }
+.nav-views { display: flex; flex-direction: column; gap: 2px; padding: 6px 8px 12px; }
+.nav-view-item { height: 28px; display: flex; align-items: center; padding: 0 10px; font-size: var(--fs-small); color: var(--text3); }
 
 .sidebar-footer {
   padding: 12px 16px;
@@ -1439,6 +1457,94 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
   /* Same shape as `.muted`: the `--mono` token exists and is used 115×, the
      CLASS that applies it did not. */
   .mono { font-family: var(--mono); }
+  /* ── Redesign primitives (DESIGN-board-redesign §6.2 GateChip, §6.3 StatusDot,
+     §6.5 PostureStrip). Declared here, ahead of the screens that use them, so
+     each screen task adds markup, not CSS. Rule they all share: weight and
+     glyph carry meaning, hue is one-per-meaning — a filled dot is settled, a
+     hollow one is in flight, an amber glyph is an absence. */
+  .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
+  .dot.ok { background: var(--status-done); }
+  .dot.bad { background: var(--status-blocked); }
+  .dot.run { background: transparent; border: 1px solid var(--status-progress); }
+  /* An absence glyph (`·` `—` `!` `?`): mono, amber, never green and never grey-filled. */
+  .abs { font-family: var(--mono); color: var(--absent-warn-fg); }
+  /* GateChip — one violet; solid = expensive, outline = routine, dashed = unclassified. */
+  .gate { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 9px; border-radius: 999px; font-family: var(--mono); font-size: var(--fs-caption); font-weight: 500; white-space: nowrap; }
+  .gate.exp { background: var(--status-gate); color: var(--on-status); }
+  .gate.rou { border: 1px solid var(--status-gate); color: var(--status-gate); }
+  .gate.unc { border: 1px dashed var(--border-strong); color: var(--absent-warn-fg); }
+  /* PostureStrip — one bed for "expensive", distinguished by words; routine is a hairline. */
+  .pos { display: inline-flex; align-items: center; gap: 4px; height: 18px; padding: 0 7px; border-radius: 999px; font-family: var(--mono); font-size: var(--fs-eyebrow); white-space: nowrap; }
+  .pos.exp { background: var(--posture-expensive-bg); color: var(--posture-expensive-fg); }
+  .pos.rou { border: 1px solid var(--border); color: var(--text2); }
+  .pos.unj { color: var(--absent-warn-fg); }
+  .pos.warn { background: var(--absent-warn-bg); color: var(--absent-warn-fg); }
+  /* A row-level band, not a chip: `Bash(node:*)` reads as a restriction and is a
+     full shell — the subtlest finding agent-posture produces must not be scanned past. */
+  .strip { display: flex; align-items: center; gap: 8px; padding: 4px 10px; background: var(--absent-warn-bg); color: var(--absent-warn-fg); font-size: var(--fs-caption); }
+  /* Decisions row (BRD-R3): the two reviewer cells sit between the title and the
+     actions; each glyph explains itself on hover. */
+  .gate-review { display: inline-flex; gap: 14px; align-items: center; font-family: var(--mono); font-size: var(--fs-caption); white-space: nowrap; color: var(--text2); }
+  .gate-review > span { display: inline-flex; gap: 6px; align-items: center; }
+  /* Ledger head (great_cto-ki1x.7) */
+  .ledger-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
+  .ledger-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px 12px; margin-top: 12px; background: var(--bg-card); border: 1px solid var(--border); font-family: var(--mono); font-size: var(--fs-caption); }
+  .ledger-stage { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border: 1px solid var(--border); }
+  .ledger-stuck { margin-top: 12px; background: var(--bg-card); border: 1px solid var(--border); padding: 10px 12px; }
+  .ledger-stuck-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 6px; }
+  .ledger-stuck-row { display: grid; grid-template-columns: 150px 1fr 60px; gap: 12px; align-items: center; font-size: var(--fs-small); padding: 4px 0; border-top: 1px solid var(--border); }
+  .eyebrow { font-size: var(--fs-eyebrow); letter-spacing: .08em; text-transform: uppercase; color: var(--text2); font-weight: 500; }
+  .tab { font-variant-numeric: tabular-nums; text-align: right; }
+  .cap { font-size: var(--fs-caption); }
+  .ledger-head { display: flex; flex-direction: column; }
+  .ledger-facts { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 10px; font-size: var(--fs-small); align-items: baseline; }
+  .bar { height: 6px; background: var(--bg-strong); border-radius: 999px; overflow: hidden; }
+  .bar > i { display: block; height: 100%; background: var(--accent); }
+  /* Fleet (great_cto-ki1x.8): saved views in the sidebar, domain groups, AgentRow cells */
+  .nav-view-item { cursor: pointer; display: flex; justify-content: space-between; gap: 8px; }
+  .nav-view-item:hover { background: var(--bg-muted); color: var(--text); }
+  .nav-view-item.active { background: var(--bg-strong); color: var(--text); font-weight: 500; }
+  .nav-view-count { font-family: var(--mono); font-size: var(--fs-caption); color: var(--text3); font-variant-numeric: tabular-nums; }
+  .fleet-group-head { display: flex; align-items: center; gap: 8px; padding: 8px 12px 4px; font-size: var(--fs-eyebrow); letter-spacing: .08em; text-transform: uppercase; color: var(--text2); font-weight: 500; }
+  .fleet-group-collapsed { display: flex; flex-wrap: wrap; gap: 20px; padding: 10px 12px; font-size: var(--fs-eyebrow); letter-spacing: .08em; text-transform: uppercase; color: var(--text3); }
+  .ar-cells { display: grid; grid-template-columns: minmax(200px, 1.4fr) 130px 48px 56px 80px auto; gap: 12px; align-items: center; margin-top: 4px; }
+  .ar-posture { display: flex; gap: 6px; flex-wrap: wrap; }
+  .ar-last { color: var(--text2); }
+  /* Harness (great_cto-ki1x.10) */
+  .harness-hosts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
+  .harness-hosts > div { display: flex; align-items: center; gap: 10px; min-width: 0; }
+  .so-options { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
+  .so-option { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; background: var(--bg-page); border: 1px solid var(--border); cursor: pointer; min-height: 44px; }
+  .so-option.on { border-color: var(--accent); }
+  .so-option input { position: absolute; opacity: 0; pointer-events: none; }
+  .so-option:focus-within { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
+  .so-label { font-size: var(--fs-small); }
+  .so-why { font-size: var(--fs-caption); }
+  .ev-table { margin-top: 8px; }
+  .ev-head, .ev-row { display: grid; grid-template-columns: 110px 1fr 90px; gap: 12px; align-items: center; padding: 6px 0; border-top: 1px solid var(--border); font-size: var(--fs-small); }
+  .ev-head { font-size: var(--fs-eyebrow); letter-spacing: .08em; text-transform: uppercase; color: var(--text2); border-top: none; }
+  .ev-row.dim { color: var(--text3); }
+  /* Settings (great_cto-ki1x.11) */
+  .settings-rows { display: flex; flex-direction: column; gap: 16px; margin-bottom: 8px; }
+  .settings-group { background: var(--bg-card); border: 1px solid var(--border); padding: 8px 16px 4px; }
+  .settings-row { display: grid; grid-template-columns: 200px 1fr 140px; gap: 14px; align-items: center; padding: 9px 0; border-top: 1px solid var(--border); font-size: var(--fs-small); }
+  .settings-group > .settings-row:first-of-type { border-top: none; }
+  .sr-name { display: flex; flex-direction: column; min-width: 0; }
+  .sr-value { min-width: 0; }
+  .sr-action { display: flex; justify-content: flex-end; gap: 8px; }
+  .pill.on { background: var(--text); color: var(--bg-page); }
+  /* Two-ring focus (§7.1): the outer ring is the focus token, the inner ring is
+     the page itself, so the ring reads on any bed — a card, a solid pill, a strip.
+     Element selectors only; the per-component rules above keep their own offsets. */
+  button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible, [role="button"]:focus-visible, [tabindex]:focus-visible {
+    outline: 2px solid var(--focus-ring); outline-offset: 2px; box-shadow: 0 0 0 2px var(--bg-page);
+  }
+  /* Theme toggle: two stroke icons, the theme picks one. No emoji — an emoji is
+     a font the platform chooses, and it was rendering at three sizes on three OSes. */
+  #board-theme-btn svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
+  #board-theme-btn .ico-sun { display: none; }
+  [data-theme="light"] #board-theme-btn .ico-sun { display: inline; }
+  [data-theme="light"] #board-theme-btn .ico-moon { display: none; }
   /* The board has two text inputs styled in place — `#agent-panel input` and
      `.fleet-search input[type="search"]` — and a third, the Sessions search box,
      that asked for the house look by name and got the user agent's. Same values
@@ -2225,10 +2331,6 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
   letter-spacing: 0.1em; text-transform: uppercase;
   color: var(--text3); margin: 0 0 12px;
 }
-.mp-hero {
-  display: grid; grid-template-columns: repeat(3, 1fr);
-  gap: 14px; margin-bottom: 24px;
-}
 .window-fill {
   font-size: var(--fs-body); color: var(--text2); line-height: 1.5;
   padding: 8px 12px; margin-bottom: 12px; border-radius: 0;
@@ -2315,12 +2417,6 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
   margin-top: 6px; font-size: var(--fs-small); color: var(--text2);
 }
 
-.mp-secondary {
-  display: grid; grid-template-columns: repeat(4, 1fr);
-  gap: 12px; margin-bottom: 28px;
-}
-.mp-secondary .metric-card { padding: 18px; }
-.mp-secondary .metric-num { font-size: var(--fs-num-m); }
 
 .mp-row {
   display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
@@ -2482,15 +2578,6 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
   border-radius: 0; padding: 1px 5px; font-size: var(--fs-eyebrow);
 }
 
-.fleet-facets { display: flex; flex-direction: column; gap: 6px; }
-.fleet-facets fieldset {
-  border: none; padding: 0; margin: 0;
-  display: flex; gap: 6px; align-items: center; flex-wrap: wrap;
-}
-.fleet-facets legend {
-  font-size: var(--fs-caption); color: var(--text3); text-transform: uppercase;
-  letter-spacing: 0.05em; margin-right: 6px; min-width: 60px;
-}
 .facet-chip {
   background: var(--bg-muted); border: 1px solid var(--border);
   color: var(--text2); font-size: var(--fs-small); font-family: var(--mono);
@@ -2940,7 +3027,45 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
 @media (max-width:480px) {
 .chip-filter-bar { flex-direction: column; align-items: stretch; }
 }
+/* ── Motion contract (DESIGN §10, MOTION_INTENSITY 2/10): motion for state the
+   operator caused, none for state the machine caused. Hover and focus 90ms
+   linear; the drawer 200ms out / 140ms in (exit faster than enter); SSE
+   arrival 0ms — rows and figures swap, they do not animate in. ── */
+.nav-item, .nav-view-item, .agent-row, .inbox-row, .gate-btn, .btn-black, .btn-ghost-sm, .pill, .so-option { transition: background-color 90ms linear, border-color 90ms linear, outline-color 90ms linear; }
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
+}
+/* ── 768–1199: the sidebar becomes a 56px icon rail (DESIGN §9). Labels leave
+   the screen but not the element — every nav item carries its name as
+   aria-label and title. The Views block and the switcher's text go with the
+   labels; the destinations stay one tap away. ── */
+@media (min-width: 768px) and (max-width: 1199px) {
+  .sidebar { width: 56px; }
+  .nav-item { justify-content: center; padding: 0; gap: 0; }
+  .nav-item > span { display: none; }
+  .nav-item .count.abs { display: inline; position: absolute; top: 2px; right: 6px; }
+  .nav-item { position: relative; }
+  .nav-divider, .nav-views-label, .nav-views { display: none; }
+  .proj-switch > :not(.proj-arch-icon):not(svg) { display: none; }
+  .proj-switch { justify-content: center; padding: 14px 8px; }
+  #live-label { display: none; }
+}
 @media (max-width: 768px) {
+  .settings-row { grid-template-columns: 1fr; gap: 6px; }
+  .sr-action { justify-content: flex-start; }
+
+  .harness-hosts, .so-options { grid-template-columns: 1fr; }
+
+  .ar-cells { grid-template-columns: 1fr auto; }
+  .ar-posture { grid-column: 1 / -1; }
+
+  /* The one asymmetry DESIGN §3.2 draws: an expensive or unclassified gate's
+     Reject/Approve stack full-width at phone width; a routine gate's may sit
+     side by side. Cheap and expensive must not share a motor cost. */
+  .inbox-row .actions.gate-actions-stack { flex-wrap: wrap; flex-direction: column; align-items: stretch; flex: 1 0 100%; }
+  .inbox-row .actions.gate-actions-stack .gate-btn { width: 100%; min-height: 44px; }
+  .gate-review { flex-basis: 100%; }
+
   .sidebar {
     position: fixed; top: 0; left: 0; bottom: 0;
     z-index: 40;
@@ -2953,7 +3078,7 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
        focus on the button and the menu unreachable by keyboard. On the way out
        it waits for the slide to finish (`0s linear 200ms`), so the panel does
        not vanish mid-animation. */
-    transition: transform 200ms ease-out, visibility 0s linear 200ms;
+    transition: transform 140ms ease-in, visibility 0s linear 140ms;
     box-shadow: none;
   }
   .sidebar.open {
@@ -3014,8 +3139,6 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
   /* Four columns of numbers do not fit in 375px; they were being clipped, which
      silently dropped the fourth stat rather than wrapping it. */
   .inbox-summary { grid-template-columns: repeat(2, 1fr); }
-  .mp-secondary { grid-template-columns: repeat(2, 1fr); }
-  .mp-hero { grid-template-columns: 1fr; }
   .mp-row { grid-template-columns: 1fr; }
 }
 @media (pointer: coarse) {
@@ -3045,7 +3168,7 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
      So: every control gets the floor, and the ones with something to say about
      their own size say it after. A button added tomorrow is covered by default;
      one that must stay small has to opt out in writing. */
-  button, [role="button"], .nav-item, .toggle, summary { min-height: 44px; }
+  button, [role="button"], .nav-item, .toggle, summary, label.radio, .copy, .so-option, .nav-view-item { min-height: 44px; }
   .gate-btn, .inbox-row .actions .gate-btn { height: 44px; font-size: var(--fs-body); }
   .menu-btn { width: 44px; height: 44px; }
   .btn-bell { min-width: 44px; justify-content: center; }
@@ -3094,44 +3217,57 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
         <div id="proj-menu-list"></div>
       </div>
     </div>
-    <nav class="nav">
-      <div class="nav-item active" data-tab="inbox" role="tab" tabindex="0" onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();this.click();}" onclick="switchTab('inbox', this)">
+    <!-- Nav shell cutover (great_cto-ki1x.5): eight tabs (+ a topbar share
+         button and bell) become four destinations. Tasks/kanban, Metrics/
+         dashboard, Docs, Activity/logs, Notifications and Share lose their
+         entry point here — their panels and functions are untouched, so nothing
+         that already linked to `#dashboard`/`switchTab('budgets', …)`/etc. goes
+         dead; a bookmark just stops appearing in the menu. Settings — the
+         future home for the Share/Notifications rows this detaches — is
+         reachable from the topbar gear, not a fifth item here (kept under the
+         ≤5 ceiling `ui-ux-pro-max` sets for the same nav to also serve mobile). -->
+    <nav class="nav" id="nav-tablist" role="tablist" aria-orientation="vertical">
+      <div class="nav-item active" data-tab="decisions" role="tab" tabindex="0" aria-label="Decisions" title="Decisions" onkeydown="navTabKeydown(event, this)" onclick="switchTab('decisions', this)">
         <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M22 12h-6l-2 3h-4l-2-3H2 M5.45 5.11L2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z"/></svg>
-        <span>Inbox</span>
+        <span>Decisions</span>
         <span class="count" id="nav-inbox-count">0</span>
       </div>
-      <div class="nav-item" data-tab="kanban" role="tab" tabindex="0" onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();this.click();}" onclick="switchTab('kanban', this)">
-        <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M9 11l3 3L22 4 M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></svg>
-        <span>Tasks</span>
-        <span class="count" id="nav-task-count">0</span>
-      </div>
-      <div class="nav-item" data-tab="dashboard" role="tab" tabindex="0" onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();this.click();}" onclick="switchTab('dashboard', this)">
-        <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 3v18h18 M7 14l3-3 4 4 5-5"/></svg>
-        <span>Metrics</span>
-      </div>
-      <div class="nav-item" data-tab="docs" role="tab" tabindex="0" onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();this.click();}" onclick="switchTab('docs', this)">
-        <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/></svg>
-        <span>Docs</span>
-        <span class="count" id="nav-docs-count">0</span>
-      </div>
-      <div class="nav-item" data-tab="logs" role="tab" tabindex="0" onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();this.click();}" onclick="switchTab('logs', this)">
-        <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><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"/><line x1="10" y1="9" x2="8" y2="9"/></svg>
-        <span>Activity</span>
-        <span class="count" id="nav-logs-count">0</span>
-      </div>
-      <div class="nav-item" data-tab="budgets" role="tab" tabindex="0" onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();this.click();}" onclick="switchTab('budgets', this)">
+      <div class="nav-item" data-tab="ledger" role="tab" tabindex="0" aria-label="Ledger" title="Ledger" onkeydown="navTabKeydown(event, this)" onclick="switchTab('ledger', this)">
         <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M12 1v22 M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>
-        <span>Budgets</span>
+        <span>Ledger</span>
+        <!-- Real spend total is Ledger's own content (.7); this keeps the count
+             of agent budget caps the old Budgets tab already computed, rather
+             than inventing a $ figure with nothing behind it yet. -->
         <span class="count" id="nav-budget-count"></span>
       </div>
-      <div class="nav-item" data-tab="notifications" role="tab" tabindex="0" onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();this.click();}" onclick="switchTab('notifications', this); loadNotifHistory()">
-        <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9 M10.3 21a1.94 1.94 0 0 0 3.4 0"/></svg>
-        <span>Notifications</span>
-        <span id="nav-notifications-badge" class="share-badge off" style="margin-left:auto;">
-          <span class="share-badge-dot"></span>off
-        </span>
+      <div class="nav-item" data-tab="fleet" role="tab" tabindex="0" aria-label="Fleet" title="Fleet" onkeydown="navTabKeydown(event, this)" onclick="switchTab('fleet', this)">
+        <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="6" cy="6" r="2"/><circle cx="18" cy="6" r="2"/><circle cx="6" cy="18" r="2"/><circle cx="18" cy="18" r="2"/><path d="M8 6h8M6 8v8M18 8v8M8 18h8"/></svg>
+        <span>Fleet</span>
+        <!-- The absence glyph, not a count (DESIGN §5): something in Fleet is
+             unclassified. Left hidden — the classification read lives in the
+             Fleet screen body (.8/.9), out of this shell task's scope. -->
+        <span class="count abs" id="nav-fleet-abs" hidden title="something in Fleet is unclassified — not a count">!</span>
+      </div>
+      <div class="nav-item" data-tab="harness" role="tab" tabindex="0" aria-label="Harness" title="Harness" onkeydown="navTabKeydown(event, this)" onclick="switchTab('harness', this)">
+        <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 12h4l2-5 3 10 2-5h7"/></svg>
+        <span>Harness</span>
+        <span class="count" id="nav-harness-count"></span>
       </div>
     </nav>
+    <div class="nav-divider"></div>
+    <div class="nav-views-label" id="nav-views-label">Views</div>
+    <!-- Saved views over Fleet (DESIGN §5 point 2). Static for this shell —
+         filtering the fleet list is the Fleet screen body's job (.8), not this
+         task's; deliberately not `.nav-item`/`role="tab"`, since they neither
+         switch a top-level destination nor do anything yet, and a control that
+         looks live and isn't fails `ui-ux-pro-max` empty-nav-state. -->
+    <div class="nav-views">
+      <div class="nav-view-item" id="nav-view-needs" role="button" tabindex="0" onclick="setFleetView('needs')" onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();setFleetView('needs')}">Needs attention</div>
+      <div class="nav-view-item" id="nav-view-expensive" role="button" tabindex="0" onclick="setFleetView('expensive')" onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();setFleetView('expensive')}">Expensive grants</div>
+      <div class="nav-view-item" id="nav-view-never" role="button" tabindex="0" onclick="setFleetView('never')" onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();setFleetView('never')}">Never observed</div>
+      <div class="nav-view-item" id="nav-view-all" role="button" tabindex="0" onclick="setFleetView('all')" onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();setFleetView('all')}">All agents</div>
+      <div class="nav-view-item" id="nav-view-retired" role="button" tabindex="0" onclick="setFleetView('retired')" onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();setFleetView('retired')}">Retired</div>
+    </div>
     <div class="sidebar-footer">
       <!-- Ships in the CONNECTING state. This markup used to say "live · synced
            just now" before any connection existed, so from first paint until the
@@ -3164,15 +3300,14 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
       </div>
       <div class="topbar-actions">
         <span class="task-count" id="topbar-task-count">0 ISSUES</span>
-        <button class="btn-bell" data-tab="share" onclick="switchTab('share', this)" title="Share a public project report" aria-label="Share" style="gap:6px;padding:6px 10px;">
-          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" y1="13.51" x2="15.42" y2="17.49"/><line x1="15.41" y1="6.51" x2="8.59" y2="10.49"/></svg>
-          <span class="btn-label" style="font-size:var(--fs-small);font-weight:500">Share</span>
-          <span id="share-nav-badge" class="share-badge off"><span class="share-badge-dot"></span>off</span>
-        </button>
-        <button class="btn-bell" id="board-theme-btn" onclick="toggleBoardTheme()" title="Toggle light / dark theme" aria-label="Toggle theme">🌙</button>
-        <button class="btn-bell" id="topbar-bell" onclick="openNotifDrawer()" title="Notifications">
-          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9"/><path d="M10.3 21a1.94 1.94 0 0 0 3.4 0"/></svg>
-          <span class="btn-bell-badge" id="topbar-bell-badge"></span>
+        <!-- Share (topbar button, data-tab="share") and the notification bell
+             (#topbar-bell, opened the drawer) are deleted as top-level surfaces
+             here — great_cto-ki1x.5. Their panels/functions are untouched for
+             .11 to re-wire as Settings rows; nothing here calls them anymore. -->
+        <button class="btn-bell" id="board-theme-btn" onclick="toggleBoardTheme()" title="Toggle light / dark theme" aria-label="Toggle theme"><svg class="ico-moon" viewBox="0 0 16 16" aria-hidden="true"><path d="M13.5 9.5A6 6 0 0 1 6.5 2.5a6 6 0 1 0 7 7z"></path></svg><svg class="ico-sun" viewBox="0 0 16 16" aria-hidden="true"><circle cx="8" cy="8" r="3"></circle><path d="M8 1.5v1.5M8 13v1.5M1.5 8H3M13 8h1.5M3.4 3.4l1 1M11.6 11.6l1 1M3.4 12.6l1-1M11.6 4.4l1-1"></path></svg></button>
+        <button class="btn-bell" id="topbar-settings-btn" data-tab="settings" onclick="switchTab('settings', this)" title="Settings" aria-label="Settings" style="gap:6px;padding:6px 10px;">
+          <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8"><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 .33-1.82 1.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 1.82.33H9a1.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-.33 1.82V9a1.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 class="btn-label" style="font-size:var(--fs-small);font-weight:500">Settings</span>
         </button>
         <button class="btn-new" onclick="openNewIssueModal()" aria-label="New issue" title="New issue">
           <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14 M5 12h14"/></svg>
@@ -3247,14 +3382,6 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
              absent Codex must not render as a switch in the off position. The
              evidence rows are the tail of .great_cto/cross-review.log: what the
              second opinion did, not what it is set to. -->
-        <div class="inbox-section" id="harnesses-section">
-          <div class="inbox-section-head">
-            <span class="dot dot-blue"></span>
-            <h3>Harnesses</h3>
-            <span class="inbox-count" id="harnesses-status">…</span>
-          </div>
-          <div id="harnesses-body" class="muted" style="font-size:13px;line-height:1.5">loading…</div>
-        </div>
           </div>
         </details>
 
@@ -3323,6 +3450,24 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
     </div>
 
     <!-- Kanban -->
+    <!-- Harness (great_cto-ki1x.5): the second-opinion card used to sit inside
+         Inbox. It is a destination now; .10 draws the full screen around it. -->
+    <div class="panel" id="panel-harness" role="tabpanel">
+      <div class="metrics-page">
+        <h1 class="page-title">Harness <span class="muted" style="font-weight:400;font-size:var(--fs-small)">who is host, who gives the second opinion, and what it actually did</span></h1>
+        <!-- Harness (great_cto-ki1x.10). The one decision: is the second opinion
+             actually on for this project. Codex is a status panel, not a switch —
+             the board cannot install it. Four radios, not one toggle, because
+             `undeclared` and `none` are different states. -->
+        <div id="harnesses-body" class="muted" style="font-size:13px;line-height:1.5">loading…</div>
+        <span id="harnesses-status" hidden></span>
+        <!-- The judge (OpenRouter key) and its scores: is anything checking, and
+             what did it find. Moved here from the caps page — a harness fact. -->
+        <div id="judge-status" class="judge-status" hidden style="margin-top:12px"></div>
+        <div id="judge-scores" class="jscores" hidden></div>
+      </div>
+    </div>
+
     <div class="panel" id="panel-kanban">
       <h1 class="page-title">Tasks</h1>
       <div id="filter-bar" class="filter-bar"></div>
@@ -3331,38 +3476,6 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
 
 
     <!-- Metrics -->
-    <div class="panel" id="panel-dashboard">
-      <div class="metrics-page">
-        <h1 class="page-title">Metrics</h1>
-        <div id="mp-window-fill" class="window-fill" hidden></div>
-        <div class="period-toolbar">
-          <span class="period-label">PERIOD</span>
-          <div class="period-chips" id="period-chips">
-            <button class="period-chip" data-period="1">1D</button>
-            <button class="period-chip" data-period="7">7D</button>
-            <button class="period-chip active" data-period="30">30D</button>
-            <button class="period-chip" data-period="90">90D</button>
-            <button class="period-chip" data-period="365">1Y</button>
-          </div>
-        </div>
-        <div class="mp-section-label" id="mp-sprint-label">Last 30 days</div>
-        <div class="mp-hero" id="mp-hero"></div>
-        <div class="mp-secondary" id="mp-secondary"></div>
-
-        <!-- Budgets live HERE, on Metrics, not two clicks deep in the Agents
-             drill-in. A control the operator could not find is a control they do
-             not have — and it was invisible on top of that, hidden whenever a
-             project had declared no caps, which is exactly the project that
-             needs the button to declare one. -->
-        <div class="mp-section-label" style="margin-top:24px">Agent budgets</div>
-        <div id="agent-budgets" class="mp-card" style="padding:12px 16px;font-size:var(--fs-small);margin-bottom:4px;"></div>
-
-        <div class="mp-section-label" id="mp-cost-label" style="margin-top:24px">Cost · last 30 days</div>
-        <div class="mp-card cost-panel" id="cost-panel">
-          <div class="cost-empty">Loading…</div>
-        </div>
-      </div>
-    </div>
 
     <!-- Agents -->
     <!-- Session Logs -->
@@ -3390,23 +3503,25 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
     <div class="panel" id="panel-agents" role="tabpanel" aria-labelledby="tab-agents">
       <div class="metrics-page">
         <!-- §3.1 Fleet summary -->
+        <!-- The summary tiles ("Installed agents 70", "Active last 30d") left with
+             the redesign: a count of installed agents is not a decision (brief,
+             "What must NOT be on the board"). The view title carries the one
+             number that is — how many need attention, of how many. -->
         <section aria-label="Fleet summary">
-          <div class="mp-section-label">Fleet</div>
-          <div class="mp-row" id="fleet-summary">
-            <div class="cost-empty">Loading…</div>
-          </div>
+          <h1 class="page-title" id="fleet-view-title">Fleet</h1>
         </section>
 
         <!-- §3.1 Fleet controls -->
         <section aria-label="Fleet controls" style="margin-top:20px">
-          <div class="mp-card fleet-controls">
+          <div class="mp-card fleet-controls" style="display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;padding:8px 12px">
             <div class="fleet-search">
               <input type="search" id="fleet-search" placeholder="Filter agents (press / to focus)" aria-label="Filter agents by slug" />
               <span class="search-hint"><kbd>/</kbd> focus · <kbd>Enter</kbd> open · <kbd>Esc</kbd> close</span>
             </div>
-            <div class="fleet-facets" id="fleet-facets">
-              <!-- populated via renderFleetFacets() -->
-            </div>
+            <!-- The Domain / Activity / Health facet chips left with the redesign:
+                 domain is the grouping, activity and health are the saved views in
+                 the sidebar (DESIGN §5 — five views, not user-creatable). The
+                 functions stay for the drawer's deep links. -->
             <div class="fleet-sort">
               <label for="fleet-sort-by">Sort by</label>
               <select id="fleet-sort-by">
@@ -3480,8 +3595,37 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
 
     <div class="panel" id="panel-budgets" role="tabpanel">
       <div class="metrics-page">
-        <h1 class="page-title">Agent budgets</h1>
-        <p class="muted" style="max-width:70ch;margin:6px 0 20px">
+        <h1 class="page-title">Ledger</h1>
+        <!-- Ledger (great_cto-ki1x.7): the one decision this screen supports is
+             "is something running that I should stop". Two figures, the stage
+             strip and the stuck list answer it; the caps table below is where
+             the money is stopped. -->
+        <div id="ledger-head" class="ledger-head"><div class="muted">loading…</div></div>
+        <!-- From the old Metrics tab (great_cto-ki1x.16): the period chips, the caps
+             card and the cost panel keep their ids — the code that fills them did
+             not move, only the screen that shows them. -->
+        <div class="period-toolbar">
+          <span class="period-label">PERIOD</span>
+          <div class="period-chips" id="period-chips">
+            <button class="period-chip" data-period="1">1D</button>
+            <button class="period-chip" data-period="7">7D</button>
+            <button class="period-chip active" data-period="30">30D</button>
+            <button class="period-chip" data-period="90">90D</button>
+            <button class="period-chip" data-period="365">1Y</button>
+          </div>
+        </div>
+        <!-- Budgets live HERE, on Metrics, not two clicks deep in the Agents
+             drill-in. A control the operator could not find is a control they do
+             not have — and it was invisible on top of that, hidden whenever a
+             project had declared no caps, which is exactly the project that
+             needs the button to declare one. -->
+        <div class="mp-section-label" style="margin-top:24px">Agent budgets</div>
+        <div id="agent-budgets" class="mp-card" style="padding:12px 16px;font-size:var(--fs-small);margin-bottom:4px;"></div>
+        <div class="mp-section-label" id="mp-cost-label" style="margin-top:24px">Cost · last 30 days</div>
+        <div class="mp-card cost-panel" id="cost-panel">
+          <div class="cost-empty">Loading…</div>
+        </div>
+        <p class="muted" style="max-width:70ch;margin:14px 0 12px">
           A cap on what one agent may spend. When measured spend passes it, the pipeline
           refuses to dispatch that agent and says so — it does not fail quietly.
           Spend is measured from verdicts that carry a cost; while none does, the cap
@@ -3492,11 +3636,6 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
              connected" and "nothing to check" read the same from here, and the
              key is not discoverable: the README names OpenRouter once without
              saying where it goes. -->
-        <div id="judge-status" class="judge-status" hidden></div>
-          <!-- The verdicts of the verifier itself. Kept beside the connection
-               status because the two answer consecutive questions: is anything
-               checking, and what did it find. -->
-          <div id="judge-scores" class="jscores" hidden></div>
         <div id="budgets-page-body">loading…</div>
       </div>
     </div>
@@ -3529,7 +3668,15 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
     </div>
 
     <!-- Share -->
-    <div class="panel" id="panel-share">
+    <!-- Settings (great_cto-ki1x.5): everything that writes to PROJECT.md or
+         ~/.great_cto. The old Share and Notifications tabs are gone as destinations;
+         their controls live here as rows until .11 redraws them. Their ids are kept
+         (not their .panel class) so every function that renders into them still
+         finds its element. -->
+    <div class="panel" id="panel-settings" role="tabpanel">
+      <div class="panel-head"><h2>Settings <span class="muted" style="font-weight:400;font-size:var(--fs-small)">everything that writes to <code>PROJECT.md</code> or <code>~/.great_cto</code> — each row names its file</span></h2></div>
+      <div id="settings-rows" class="settings-rows"><div class="muted">loading…</div></div>
+      <div id="panel-share">
       <div class="share-page">
         <div class="share-card">
           <h2>Share this project</h2>
@@ -3566,10 +3713,8 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
           </div>
         </div>
       </div>
-    </div>
-
-    <!-- Notifications -->
-    <div class="panel" id="panel-notifications">
+      </div>
+      <div id="panel-notifications">
       <div class="share-page">
         <h1 class="page-title">Notifications</h1>
         <div class="share-card">
@@ -3666,6 +3811,7 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
           </div>
         </div>
       </div>
+      </div>
     </div>
 
     <!-- Task side panel — slide-over detail view, opened by openSide() -->
@@ -3767,7 +3913,52 @@ function elsewhereClause(e) {
   return { known: true, text: `${parts.join(' and ')} in ${m} other project${m > 1 ? 's' : ''} ${verb} waiting on you.` };
 }
 
+// gate id → reversibilityOf() as served on the inbox row; read by gateAction and
+// approveConsequence so a gate clicked from anywhere (row, palette) gets the
+// ritual its cost of undo demands.
+const GATE_REVERSIBILITY = {};
+// BRD-R3 ordering: expensive first, then unclassified — sorted WITH the expensive
+// group, never with routine, because "nobody judged this" is not evidence of
+// cheapness — then routine; inside a group, longest-waiting first.
+const REV_RANK = { expensive: 0, unclassified: 1, routine: 2 };
+function sortGatesByCostOfUndo(gates) {
+  return (gates || []).slice().sort((a, b) => {
+    const ra = REV_RANK[a?.reversibility?.state] ?? 1, rb = REV_RANK[b?.reversibility?.state] ?? 1;
+    if (ra !== rb) return ra - rb;
+    return (ageHours(b.updated_at) ?? -1) - (ageHours(a.updated_at) ?? -1);
+  });
+}
+// The second opinion for the tree at HEAD, as /api/inbox resolved it — one
+// value for every pending gate, four states, none a verdict unless `ok`.
+let inboxSecondOpinion = null;
+function reviewerCells(t) {
+  // Claude: the pipeline's own reviewer raised this gate — the gate exists
+  // because a stage finished and asked for a human. `agent` names the stage
+  // when the task carries one; the cell stays hollow (in flight) until the
+  // operator decides, because the decision IS the settled state.
+  const raised = t.agent && t.agent !== 'gate' ? esc(t.agent) : 'pipeline';
+  const claude = `<span title="raised by ${raised} — waiting on you"><span class="dot run"></span> Claude</span>`;
+  const so = inboxSecondOpinion;
+  let codex;
+  if (!so || so.state === 'not-run') codex = `<span class="abs" title="${esc(so?.why || 'second opinion not run')}">— Codex</span>`;
+  else if (so.state === 'unmeasured') codex = `<span class="abs" title="${esc(so.why)}">· Codex</span>`;
+  else if (so.state === 'unreadable') codex = `<span class="abs" title="${esc(so.why)}">! Codex</span>`;
+  else if (so.verdict === 'BLOCK') codex = `<span title="Codex BLOCK on ${esc((so.sha || '').slice(0, 8))} — ${esc(String(so.p0 ?? '?'))}×P0"><span class="dot bad"></span> Codex ✗</span>`;
+  else codex = `<span title="Codex ${esc(so.verdict || 'PASS')} on ${esc((so.sha || '').slice(0, 8))}"><span class="dot ok"></span> Codex ✓</span>`;
+  return `<span class="gate-review">${claude}${codex}</span>`;
+}
+function gateChip(t) {
+  const r = t.reversibility || { state: 'unclassified', gate: '', why: 'no reversibility on this row' };
+  const name = r.gate ? `gate:${r.gate}` : (String(t.title || '').match(/gate:[a-z-]+/) || ['gate'])[0];
+  const cls = r.state === 'expensive' ? 'exp' : r.state === 'routine' ? 'rou' : 'unc';
+  const glyph = r.state === 'expensive' ? '▲' : r.state === 'routine' ? '▢' : '?';
+  const why = r.state === 'expensive' ? (r.categories || []).join(' · ') : r.state === 'routine' ? `routine — ${r.why || 'cheap to undo'}` : `unclassified — ${r.why || 'not in gate-reversibility.mjs'}. Unjudged, not harmless.`;
+  return `<span class="gate ${cls}" title="${esc(why)}">${glyph} ${esc(name)}</span>`;
+}
 function renderInbox(d) {
+  inboxSecondOpinion = d?.second_opinion || null;
+  for (const g of (d?.pending_gates || [])) if (g?.id && g.reversibility) GATE_REVERSIBILITY[g.id] = g.reversibility;
+  if (d && Array.isArray(d.pending_gates)) d = { ...d, pending_gates: sortGatesByCostOfUndo(d.pending_gates) };
   // Kept so renderResume can ask what this section is already showing, rather
   // than the two of them rendering the same task independently.
   window.__inboxData = d;
@@ -4337,10 +4528,11 @@ function renderInboxList(rootId, items, countId, opts = {}) {
         + `<button type="button" class="gate-btn" title="Copy the line that re-runs this agent"`
         + ` onclick="event.stopPropagation(); copyRerun('${esc(t.agent)}')">Copy re-run</button></div>`
       : '';
+    const guardedGate = canDecide && t.reversibility && t.reversibility.state !== 'routine';
     const actions = canDecide
-      ? `<div class="actions" onclick="event.stopPropagation()">
-           <button class="gate-btn gate-approve" onclick="event.stopPropagation(); gateAction('${esc(t.id)}', 'approve')">Approve</button>
-           <button class="gate-btn gate-reject" onclick="event.stopPropagation(); gateAction('${esc(t.id)}', 'reject')">Reject</button>
+      ? `<div class="actions${guardedGate ? ' gate-actions-stack' : ''}" onclick="event.stopPropagation()">
+           <button class="gate-btn gate-reject" onclick="event.stopPropagation(); gateAction('${esc(t.id)}', 'reject')">Reject…</button>
+           <button class="gate-btn gate-approve" title="${guardedGate ? 'expensive to undo — you will be asked to type the gate name' : 'one confirm names the consequence'}" onclick="event.stopPropagation(); gateAction('${esc(t.id)}', 'approve')">${guardedGate ? 'Approve…' : 'Approve'}</button>
          </div>`
       // Age is promoted out of the metadata run into its own column, because it
       // is the only field that differs between these rows. `status` stays,
@@ -4382,8 +4574,9 @@ function renderInboxList(rootId, items, countId, opts = {}) {
       : '';
     return `
       <div class="inbox-row${aged ? ' row-aged' : ''}" tabindex="0" role="button" aria-label="${esc(t.title || t.id)}" onkeydown='if(event.key==="Enter"||event.key===" "){event.preventDefault();this.click();}' onclick='openSide(${JSON.stringify(t).replace(/'/g, "&apos;")})'>
-        <span class="id">${esc(t.id || '')}</span>
-        <span class="ttl">${reasonChip}${esc(t.title)}${desc}<span class="meta">${meta}</span>${tierNote}</span>
+        ${canDecide ? gateChip(t) : `<span class="id">${esc(t.id || '')}</span>`}
+        <span class="ttl">${canDecide ? '' : reasonChip}${esc(canDecide ? String(t.title || '').replace(/^gate:[a-z-]+\s*[—–-]?\s*/, '') : t.title)}${desc}<span class="meta">${meta}</span>${tierNote}</span>
+        ${canDecide ? reviewerCells(t) : ''}
         ${actions}${rerun}${diffBtn}
       </div>`;
   }).join('');
@@ -4599,7 +4792,7 @@ async function loadJudgeStatus() {
   el.hidden = false;
   el.innerHTML = connected
     ? `<span class="js-dot"></span>
-       <span><strong>Judge connected</strong> — ${esc(s.model || 'default model')}</span>
+       <span><strong>Judge key stored</strong> <span class="abs" title="a stored key is not a working key — no probe has verified it from here">· not verified</span> — ${esc(s.model || 'default model')}</span>
        <span class="js-where">${esc(s.fingerprint || '')} · from ${esc(String(s.from || '').replace(/^.*\/(?=\.great_cto)/, '~/'))}</span>
        <span class="js-form">
          <input id="judge-key" type="password" autocomplete="off" spellcheck="false" placeholder="replace key (sk-or-…)">
@@ -4705,6 +4898,171 @@ async function saveJudgeKey() {
   loadJudgeStatus();
 }
 
+// Ledger head (great_cto-ki1x.7). Every figure names its state: spend is
+// `measured` only when a verdict carried a cost, otherwise `estimated` and
+// labelled so; a cap that is not set says "no cap", never $0; a stage is a
+// filled dot when done, hollow when active, red when failed, bare when idle;
+// a stuck task with no readable age is counted and shown as `?`, never dropped.
+function renderLedgerHead({ heartbeat, pipeline, cost, metrics }) {
+  const el = document.getElementById('ledger-head');
+  if (!el) return;
+  // Spend, three states, and $0.00 is only one of them (carried over from the
+  // Metrics tab this replaced): a measured figure; a time-based ESTIMATE that
+  // says so; and a zero that is the estimate with nothing to estimate from,
+  // which is not a figure at all.
+  const costKnown = !!(metrics && metrics.cost);
+  const realLlmUsd = metrics?.cost?.real_llm_usd ?? null;
+  const llmUsd = metrics?.cost?.llm_usd ?? null;
+  const spent = realLlmUsd != null ? realLlmUsd : llmUsd;
+  const spentState = realLlmUsd != null ? 'measured' : (llmUsd != null ? 'estimated' : 'unmeasured');
+  const cap = cost?.monthly_budget;
+  const pct = (spent != null && cap) ? Math.min(100, Math.round(spent / cap * 100)) : null;
+  const spentCell = !costKnown
+    ? absent('unloaded', 'the metrics payload carried no cost section')
+    : (realLlmUsd === 0 && llmUsd === 0) || spent == null
+      ? absent('uncomputable', 'no verdict carries a cost and there is nothing to estimate from')
+      : `$${spent < 10 ? spent.toFixed(2) : fmtMoney(spent)}`;
+  // Tasks done: a zero is a count; only a payload with no tasks section is an absence.
+  const doneKnown = !!(metrics && metrics.tasks);
+  const done = (metrics?.tasks?.done_in_window || metrics?.tasks?.done) ?? 0;
+  const acc = metrics?.acceptance || {};
+  const avgMin = metrics?.avg_completion_min;
+  // The same tiles the Metrics tab drew, as facts on one line. Each keeps its
+  // three-way distinction: a zero is a count, an absence names its kind.
+  const facts = [
+    { label: 'Done', v: doneKnown ? done : absent('unloaded', 'the metrics payload carried no tasks section'), sub: 'in window' },
+    // A dash here means "could not be computed", not "took no time".
+    { label: 'Cycle', v: avgMin ? `${avgMin}` : absent('uncomputable', 'no completion in this window carried a timestamp to measure'), sub: avgMin ? 'min median' : '' },
+    { label: 'Cost', v: acc.cost_per_accepted != null ? `$${Number(acc.cost_per_accepted).toFixed(2)}` : absent('none', 'nothing was accepted in this window'), sub: acc.cost_per_accepted != null ? '/ accepted' : '' },
+  ];
+  // Fleet 30d spend from verdicts — measured for some agents, or not at all.
+  const s = fleetState?.summary || null;
+  const fleetSpend = s == null ? absent('unloaded', 'the fleet summary has not been read')
+    : s.llm_usd_30d != null ? `$${s.llm_usd_30d.toFixed(2)} <span class="muted">measured for ${s.llm_usd_30d_measured_for} agent(s)</span>`
+    : absent('uncomputable', `no verdict carries a cost — ${s.llm_usd_30d_agents_with_runs ?? 0} agent(s) ran in this window`);
+  facts.push({ label: 'Fleet 30d', v: fleetSpend, sub: '' });
+  const capCell = cap ? `of $${fmtMoney(cap)}${pct != null ? ` · ${pct}%` : ''}` : `<span class="abs" title="no monthly cap in PROJECT.md — spend is not being stopped">no cap</span>`;
+  const stages = Array.isArray(pipeline) ? pipeline : [];
+  const running = stages.filter((st) => st.status === 'active');
+  const dotFor = (st) => st.status === 'done' ? 'dot ok' : st.status === 'active' ? 'dot run' : st.status === 'failed' ? 'dot bad' : 'dot';
+  const strip = stages.length
+    ? stages.map((st, i) => `${i ? '<span class="muted">→</span>' : ''}<span class="ledger-stage${st.status === 'idle' ? ' muted' : ''}" title="${esc(st.stage)} · ${esc(st.status)}${st.verdict ? ' · ' + esc(st.verdict) : ''}${st.ts ? ' · ' + esc(fmtDT(st.ts)) : ''}"><span class="${dotFor(st)}"${st.status === 'idle' ? ' style="background:var(--bg-strong)"' : ''}></span>${esc(st.stage)}</span>`).join('')
+    : `<span class="abs" title="/api/pipeline returned nothing — stage state unknown, not idle">· pipeline state unloaded</span>`;
+  const stuck = Array.isArray(heartbeat?.stuck) ? heartbeat.stuck : [];
+  const unmeasurable = Number(heartbeat?.stuck_unmeasurable) || 0;
+  const stuckRows = stuck.slice(0, 5).map((t) => `
+    <div class="ledger-stuck-row">
+      <span class="mono">${esc(t.id || '')}</span>
+      <span class="ttl-desc">${esc(t.title || '')}</span>
+      <span class="mono tab" style="color:var(--status-progress)" title="${t.since ? esc(fmtDate(t.since)) : 'no timestamp'}">${t.age_h != null ? Math.round(t.age_h) + 'h' : '<span class="abs" title="updated_at unreadable — counted, age unknown">?</span>'}</span>
+    </div>`).join('');
+  el.innerHTML = `
+    <div class="ledger-kpis">
+      <div class="metric-card">
+        <div class="metric-num">${spentCell}</div>
+        <div class="metric-label">Spent · ${esc(spentState)}</div>
+        <div class="metric-trend">${capCell}</div>
+        ${pct != null ? `<div class="bar" style="margin-top:8px"><i style="width:${pct}%${pct >= 100 ? ';background:var(--status-blocked)' : ''}"></i></div>` : ''}
+      </div>
+      <div class="metric-card">
+        <div class="metric-num"><span class="dot run" style="width:12px;height:12px;vertical-align:middle;margin-right:8px"></span>${Array.isArray(pipeline) ? running.length : absent('unloaded', 'pipeline state not read')}</div>
+        <div class="metric-label">Running now</div>
+        <div class="metric-trend">${running.length ? esc(running.map((st) => st.stage).join(' · ')) : (Array.isArray(pipeline) ? 'nothing active' : '')}</div>
+      </div>
+    </div>
+    <div class="ledger-facts">
+      ${facts.map((f) => `<span><span class="eyebrow">${esc(f.label)}</span> <span class="mono">${f.v}</span>${f.sub ? ` <span class="muted cap">${esc(f.sub)}</span>` : ''}</span>`).join('')}
+    </div>
+    <div class="ledger-strip">${strip}</div>
+    <div class="ledger-stuck">
+      <div class="ledger-stuck-head">
+        <span class="eyebrow">Stuck · in progress over the line</span>
+        <span class="mono cap" style="color:var(--status-progress)">${stuck.length}${unmeasurable ? ` <span class="abs" title="${unmeasurable} in-progress task(s) with no readable age — counted, not dropped">+${unmeasurable}?</span>` : ''}</span>
+      </div>
+      ${stuckRows || `<div class="muted cap">${Array.isArray(heartbeat?.stuck) ? 'nothing over the line' : '<span class="abs" title="heartbeat not read">· stuck state unloaded</span>'}</div>`}
+    </div>`;
+}
+
+// Settings (great_cto-ki1x.11). A row is a fact and the file that holds it;
+// what writes elsewhere links to the screen that owns the write (caps → Ledger,
+// second opinion and judge → Harness). Nothing here is a toggle for a fact the
+// board cannot change: the Codex binary and telemetry are read-only rows.
+async function loadSettingsPage() {
+  const el = document.getElementById('settings-rows');
+  if (!el) return;
+  const get = (u) => api(u).catch(() => null);
+  const [tiers, share, harn, projects, cost] = await Promise.all([
+    get(`/api/gate-tiers${pqs()}`), get(`/api/share${pqs()}`), get(`/api/harnesses${pqs()}`), get('/api/projects'), get(`/api/cost${pqsd()}`),
+  ]);
+  const row = (name, file, value, action) => `
+    <div class="settings-row">
+      <div class="sr-name"><span>${name}</span><span class="cap muted mono">${esc(file)}</span></div>
+      <div class="sr-value">${value}</div>
+      <div class="sr-action">${action || ''}</div>
+    </div>`;
+  const link = (label, fn) => `<button type="button" class="btn-ghost-sm" onclick="${fn}">${label}</button>`;
+  const so = harn?.second_opinion || null;
+  const cx = harn?.codex || null;
+  const cap = cost ? (cost.monthly_budget ? `<span class="mono">$${fmtMoney(cost.monthly_budget)}</span> <span class="muted">monthly</span>` : '<span class="abs" title="no cap set — spend is not being stopped">no cap</span>') : '<span class="abs" title="cost not read">· unloaded</span>';
+  const tiering = tiers == null ? '<span class="abs" title="gate-tiers not read">· unloaded</span>'
+    : tiers.enabled === false ? '<span class="mono">off</span> <span class="muted">— every gate waits for a human</span>'
+    : `<span class="mono">on</span> <span class="muted">— ${tiers.measured ? 'evidence-tiered: an agent with a passing eval may stand a gate down to notify-only' : 'declared, nothing measured yet'}</span>`;
+  const shareV = share == null ? '<span class="abs" title="share state not read">· unloaded</span>'
+    : share.enabled ? `<span class="mono">on</span> <span class="muted">— <a href="${esc(share.url || '#')}" target="_blank" rel="noopener">public report</a>, gate confirms name it</span>`
+    : '<span class="mono">off</span> <span class="muted">— gate confirms never claim a public report</span>';
+  const soV = so == null ? '<span class="abs" title="harness state not read">· unloaded</span>'
+    : `<span class="mono">${esc(so.declared?.tool || so.declared?.state || 'undeclared')}</span> <span class="muted">→ resolves</span> <span class="mono" style="color:${so.state === 'declared' ? 'var(--status-done)' : so.state === 'unavailable' ? 'var(--status-blocked)' : 'var(--absent-warn-fg)'}">${esc(so.state || '?')}</span>`;
+  const codexV = cx == null ? '<span class="abs" title="harness state not read">· unloaded</span>'
+    : cx.state === 'available' ? `<span class="mono">codex</span> <span class="muted">· on PATH · ${esc(cx.auth || 'authenticated')} · ${esc(cx.version || '')}</span>`
+    : cx.state === 'no-auth' ? '<span class="mono">codex</span> <span style="color:var(--status-blocked)">· not logged in</span>'
+    : `<span class="abs" title="${esc(cx.why || '')}">— absent</span>`;
+  const plist = Array.isArray(projects) ? projects : (projects?.projects || null);
+  const projRows = plist == null ? '<div class="abs" title="the project registry could not be read">! registry unreadable</div>'
+    : plist.slice(0, 40).map((pr) => `
+      <div class="settings-row">
+        <div class="sr-name"><span>${esc(pr.slug)}${pr.slug === currentProject ? ' <span class="cap muted">current</span>' : ''}</span><span class="cap muted mono">${esc(String(pr.path || '').replace(/^\/Users\/[^/]+/, '~'))}</span></div>
+        <div class="sr-value">${pr.archetype ? `<span class="mono cap">${esc(pr.archetype)}</span>` : '<span class="abs" title="no PROJECT.md read for this project">· no archetype</span>'}${pr.last_activity ? ` <span class="muted cap">· ${esc(agoStr(pr.last_activity))}</span>` : ''}</div>
+        <div class="sr-action">${pr.slug === currentProject ? '' : link('switch', `switchProject('${esc(pr.slug)}')`)}</div>
+      </div>`).join('');
+  const theme = document.documentElement.dataset.theme || 'dark';
+  el.innerHTML = `
+    <div class="settings-group">
+      <div class="eyebrow">Project · .great_cto/PROJECT.md</div>
+      ${row('Budget cap', 'agent-budgets · monthly, USD', cap, link('Ledger', "switchTab('ledger')"))}
+      ${row('Second opinion', 'capabilities.second_opinion', soV, link('Harness', "switchTab('harness')"))}
+      ${row('Gate tiering', 'gate-tiering', tiering, '')}
+      ${row('Share', 'promote / public report', shareV, link('below', "document.getElementById('panel-share').scrollIntoView({behavior:'smooth'})"))}
+    </div>
+    <div class="settings-group">
+      <div class="eyebrow">Machine · ~/.great_cto</div>
+      ${row('Judge key', 'secrets.env · OPENROUTER_API_KEY', '<span class="muted">stored and replaced on the Harness screen</span>', link('Harness', "switchTab('harness')"))}
+      ${row('Codex binary', 'GREAT_CTO_CODEX_BIN', codexV, '')}
+      ${row('Telemetry', 'opt-in, off by default', '<span class="mono">off</span>', '<a class="cap" href="https://github.com/avelikiy/great_cto/blob/main/docs/PRIVACY.md" target="_blank" rel="noopener">PRIVACY.md</a>')}
+      ${row('Theme', 'localStorage · this browser', `<span class="pill${theme !== 'light' ? ' on' : ''}" role="button" tabindex="0" onclick="if(document.documentElement.dataset.theme==='light')toggleBoardTheme();loadSettingsPage()">Dark</span> <span class="pill${theme === 'light' ? ' on' : ''}" role="button" tabindex="0" onclick="if(document.documentElement.dataset.theme!=='light')toggleBoardTheme();loadSettingsPage()">Light</span>`, '')}
+    </div>
+    <div class="settings-group">
+      <div class="eyebrow">Projects · ~/.great_cto/projects.json · ${plist ? plist.length + ' registered' : ''}</div>
+      ${projRows}
+      <div class="settings-row" style="border-top:none">
+        <div class="sr-name"><span class="muted cap">Paths must live inside HOME — /tmp and /etc are refused.</span></div>
+        <div class="sr-value"><input id="settings-register-path" class="input" placeholder="~/path/to/project" style="width:100%"></div>
+        <div class="sr-action">${link('Register', 'registerProjectFromSettings()')}</div>
+      </div>
+    </div>
+    <div class="eyebrow" style="margin:18px 0 6px">Alerts · the channel delivers, the board does not</div>`;
+}
+async function registerProjectFromSettings() {
+  const inp = document.getElementById('settings-register-path');
+  const v = (inp?.value || '').trim();
+  if (!v) return;
+  try {
+    const r = await api('/api/projects/register', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ path: v }) });
+    if (r && r.error) { showToast(`Not registered: ${r.error}`, 'error', 3000); return; }
+    showToast('Registered', 'info', 1500);
+    loadSettingsPage();
+  } catch (e) { showToast(`Not registered: ${String(e.message || e)}`, 'error', 3000); }
+}
+
 async function loadBudgetsPage() {
   loadJudgeStatus();
   loadJudgeScores();
@@ -4720,13 +5078,17 @@ async function loadBudgetsPage() {
   // promise rejected, and the page sat there looking busy. A page that failed
   // and a page still working are the same picture, and the one you are looking
   // at is the one where nothing more is coming.
-  let h;
+  let h, pipe = null, cost = null, m = null;
   try {
-    [h] = await Promise.all([
+    [h, pipe, cost, m] = await Promise.all([
       api(`/api/heartbeat${pqs()}`),
+      api(`/api/pipeline${pqs()}`).catch(() => null),
+      api(`/api/cost${pqsd()}`).catch(() => null),
+      api(`/api/metrics${pqsd()}`).catch(() => null),
       (typeof refreshAgentsInstalled === 'function' && !(fleetState?.agents || []).length)
         ? refreshAgentsInstalled() : Promise.resolve(),
     ]);
+    renderLedgerHead({ heartbeat: h, pipeline: pipe, cost, metrics: m });
   } catch (err) {
     body.innerHTML = `
       <div class="budgets-failed">
@@ -5247,20 +5609,80 @@ async function renderHarnesses() {
     hb.style.color = so.state === 'unavailable' ? 'var(--status-blocked)' : '';
     hb.style.display = hb.textContent ? '' : 'none';
   }
+  // Pre-click consequence per option (DESIGN §3.7 point 3): what choosing it
+  // would resolve to HERE, before Save.
+  let rk = null;
+  try { rk = await api(`/api/router-key${pqs()}`); } catch { rk = null; }
+  const routerKeyPresent = rk && rk.state === 'present';
+  const codexDot = cx.state === 'available' ? 'dot ok' : cx.state === 'no-auth' ? 'dot bad' : 'dot';
+  const codexState = cx.state === 'available' ? `<span style="color:var(--status-done)">detected · ${esc(cx.auth === 'chatgpt' ? 'authenticated' : cx.auth || 'authenticated')}</span>`
+    : cx.state === 'no-auth' ? `<span style="color:var(--status-blocked)">detected · not logged in</span>`
+    : `<span class="abs" title="${esc(cx.why || 'codex is not on PATH')}">— absent</span>`;
+  const consequence = {
+    '': 'PROJECT.md says nothing. A future harness may be picked up.',
+    none: 'deliberately off — recorded as a decision.',
+    codex: cx.state === 'available' ? 'resolves to declared here' : `⚠ would resolve to unavailable here — ${cx.why || 'codex is not on PATH'}`,
+    openrouter: routerKeyPresent ? 'resolves to declared here' : '⚠ would resolve to unavailable here — no key configured',
+  };
+  const current = so.declared && so.declared.state !== 'undeclared' ? (so.declared.tool || (so.declared.state === 'none' ? 'none' : '')) : '';
+  const radio = (val, label) => `
+    <label class="so-option${current === val ? ' on' : ''}" title="${esc(consequence[val] || '')}">
+      <input type="radio" name="so" value="${val}" ${current === val ? 'checked' : ''}>
+      <span class="so-label">${esc(label)}</span>
+      <span class="so-why ${/^⚠/.test(consequence[val] || '') ? 'abs' : 'muted'}">${esc(consequence[val] || '')}</span>
+    </label>`;
+  const paired = sum.reviewed ?? 0;
+  const pairedCell = ev.state === 'absent' ? '<span class="abs" title="no cross-review has run in this project">— none yet</span>'
+    : paired > 0 ? `<span class="mono">${paired}</span> <span class="muted">paired review(s)</span>`
+    : `<span class="abs" title="join key absent on ${sum.unreadable ?? 0} of ${sum.runs ?? 0} log line(s) — nothing can be paired with a tree">unmeasured — 0 paired, join key absent on ${sum.unreadable ?? 0} of ${sum.runs ?? 0}</span>`;
+  const evRows = (ev.recent || []).slice(0, 8).map((r) => {
+    const when = (r.ts || '').slice(5, 16).replace('T', ' ');
+    const dim = r.state !== 'ok';
+    const verdict = r.state === 'ok'
+      ? (r.verdict === 'BLOCK' ? `<span style="color:var(--status-blocked)">BLOCK</span>` : `<span style="color:var(--status-done)">${esc(r.verdict || 'PASS')}</span>`) + ` <span class="muted">· ${r.findings ?? 0} finding${r.findings === 1 ? '' : 's'}${r.p0 ? ` · ${r.p0} P0` : ''}</span>`
+      : r.state === 'unreadable' ? '<span class="abs" title="predates the join key — cannot be paired with any tree">! unreadable</span>'
+      : `<span class="abs" title="skipped — not counted as reviewed">${esc(r.state)}</span>${r.resets_at ? ` <span class="muted">→ ${esc(String(r.resets_at).slice(11, 16) || r.resets_at)}</span>` : ''}`;
+    const cost = r.cost != null ? `$${Number(r.cost).toFixed(4)}` : '<span class="abs" title="no cost — nothing ran">—</span>';
+    return `<div class="ev-row${dim ? ' dim' : ''}" title="${esc(r.provider || '')}${r.model ? ' · ' + esc(r.model) : ''}${r.sha ? ' · ' + esc(String(r.sha).slice(0, 8)) : ''}"><span class="mono">${esc(when)}</span><span>${verdict}</span><span class="mono tab">${cost}</span></div>`;
+  }).join('');
+  const evidenceBlock = ev.state === 'absent'
+    ? '<div class="muted cap">no cross-model review has run in this project yet</div>'
+    : ev.state === 'unreadable'
+      ? '<div class="abs">! the review log could not be read</div>'
+      : `<div class="ev-head"><span>When</span><span>Verdict</span><span class="tab">Cost</span></div>${evRows}${sum.unreadable_lines ? `<div class="abs cap" style="padding:6px 0" title="counted, not dropped">! ${sum.unreadable_lines} line(s) could not be parsed</div>` : ''}`;
+
   body.innerHTML = `
-    <div><b>Claude Code</b> · host · runs the pipeline, gates and hooks</div>
-    <div>${codexLine}</div>
-    <div style="margin-top:8px">Second opinion: ${stateLabel}</div>
-    <div style="margin-top:6px;display:flex;gap:8px;align-items:center;flex-wrap:wrap">
-      <label for="so-select" class="muted">set</label>
-      <select id="so-select">${undecl}${sel}</select>
-      <button id="so-apply" class="btn-ghost-sm">apply</button>
-      <span id="so-result" class="muted"></span>
+    <div class="mp-card harness-hosts">
+      <div><span class="dot ok"></span><b>Claude Code</b> <span class="mono cap muted">host · v${esc(h.claude_code?.version || '')}</span><span class="cap muted" style="margin-left:auto" title="70 agents · commands · skills · hooks">full pipeline</span></div>
+      <div><span class="${codexDot}"></span><b>OpenAI Codex</b> <span class="mono cap">${codexState}</span>${cx.version ? `<span class="mono cap muted">${esc(cx.version)}</span>` : ''}${cx.model ? `<span class="mono cap muted" style="margin-left:auto">${esc(cx.model)}</span>` : ''}</div>
+    </div>
+    <div class="mp-card" style="margin-top:12px">
+      <div style="display:flex;align-items:center;gap:12px;flex-wrap:wrap">
+        <span class="eyebrow">Second opinion</span>
+        <span class="mono cap">${esc(so.declared?.tool || so.declared?.state || 'undeclared')}</span>
+        <span class="mono cap" style="color:${so.state === 'declared' ? 'var(--status-done)' : so.state === 'unavailable' ? 'var(--status-blocked)' : 'var(--absent-warn-fg)'}" title="${esc(so.why || '')}">${esc(so.state || '?')}</span>
+        <span class="cap" style="margin-left:auto">${pairedCell}</span>
+      </div>
+      <div class="so-options">${radio('', 'Undeclared')}${radio('none', 'None')}${radio('codex', 'Codex')}${radio('openrouter', 'OpenRouter')}</div>
+      <div style="display:flex;gap:10px;align-items:center;margin-top:10px">
+        <span id="so-result" class="muted cap"></span>
+        <button id="so-apply" class="btn-black" style="margin-left:auto">Save to PROJECT.md</button>
+      </div>
     </div>
-    <div style="margin-top:8px"><span class="muted">Evidence:</span> ${evidence}</div>`;
+    <div class="mp-card" style="margin-top:12px">
+      <div style="display:flex;align-items:baseline;gap:12px;flex-wrap:wrap">
+        <span class="eyebrow">What it did</span>
+        <span class="mono cap">${sum.runs ?? 0} runs · ${sum.reviewed ?? 0} reviewed · <span class="muted">${sum.skipped ?? 0} skipped</span> · <span class="abs">${sum.unreadable ?? 0} unreadable</span> · <span style="color:var(--status-blocked)">${sum.blocked ?? 0} blocked</span></span>
+        <span class="mono cap muted" style="margin-left:auto">.great_cto/cross-review.log</span>
+      </div>
+      <div class="ev-table">${evidenceBlock}</div>
+    </div>`;
+  // The judge and its scores sit under the harness facts now.
+  if (typeof loadJudgeStatus === 'function') loadJudgeStatus();
+  if (typeof loadJudgeScores === 'function') loadJudgeScores();
 
   document.getElementById('so-apply').onclick = async () => {
-    const v = document.getElementById('so-select').value;
+    const v = (document.querySelector('input[name="so"]:checked') || {}).value || '';
     const out = document.getElementById('so-result');
     out.textContent = 'writing PROJECT.md…';
     try {
@@ -5474,8 +5896,9 @@ async function refreshMetricsForPeriod() {
   if (lbl) lbl.textContent = `Last ${periodLabel(currentPeriod)}`;
   // Use seq-guarded fetch so stale init/SSE fetches can't overwrite us
   const m = await _refreshMetricsRaced(`/api/metrics${pqsd()}`);
-  if (m) { renderDashboard(m); renderWindowFill(m); }
+  if (m) { metrics = m; if (typeof renderWindowFill === 'function') renderWindowFill(m); }
   refreshCost();
+  if (currentTab === 'budgets') loadBudgetsPage();
 }
 
   /* Why four periods can show the same number.
@@ -5796,7 +6219,7 @@ async function loadDocs() {
     return;
   }
   _docsCache = d;
-  document.getElementById('nav-docs-count').textContent = d.total || 0;
+  const navDocsCount = document.getElementById('nav-docs-count'); if (navDocsCount) navDocsCount.textContent = d.total || 0;
 
   const pipeline = d.pipeline
     ? `<div class="card"><b>Pipeline</b> <span class="muted">— how a feature moves, drawn from shared/pipeline.toml</span>
@@ -6329,7 +6752,6 @@ async function switchProject(slug) {
   try { renderInbox(inbox); } catch (e) { console.warn('renderInbox failed', e); }
   try { renderFilterBar(); } catch (e) { console.warn('renderFilterBar failed', e); }
   try { renderKanban(allTasks); } catch (e) { console.warn('renderKanban failed', e); }
-  try { renderDashboard(metrics); } catch (e) { console.warn('renderDashboard failed', e); }
   try { renderShareState(shareState); } catch (e) { console.warn('renderShareState failed', e); }
   loadMemory();
   refreshDocsCount();   // the badge said 0 until the tab was opened — same bug the Logs badge had
@@ -6518,7 +6940,6 @@ async function init() {
   try { renderInbox(inbox); } catch (e) { console.warn('renderInbox failed', e); }
   try { renderFilterBar(); } catch (e) { console.warn('renderFilterBar failed', e); }
   try { renderKanban(allTasks); } catch (e) { console.warn('renderKanban failed', e); }
-  try { renderDashboard(metrics); } catch (e) { console.warn('renderDashboard failed', e); }
   try { renderShareState(shareState); } catch (e) { console.warn('renderShareState failed', e); }
   loadMemory();
   refreshDocsCount();   // the badge said 0 until the tab was opened — same bug the Logs badge had
@@ -6731,7 +7152,9 @@ function connectSSE() {
 }
 
 function updateNavCounts() {
-  document.getElementById('nav-task-count').textContent = allTasks.length;
+  // The Tasks nav item left with the redesign (kanban is a deep link); the
+  // count still feeds the kanban header where that element remains.
+  const navTaskCount = document.getElementById('nav-task-count'); if (navTaskCount) navTaskCount.textContent = allTasks.length;
   document.getElementById('topbar-task-count').textContent = `${allTasks.length} ISSUES`;
 }
 
@@ -6936,13 +7359,23 @@ function cardHTML(t) {
 // following stage, and — when the share report is on — a public URL is
 // republished. That last line is the one worth reading: it leaves the machine,
 // and revoking the link later does not un-see what was already served.
-function approveConsequence(id) {
+function approveConsequence(id, reversibility) {
+  // The gate's cost of undo is part of the consequence (ADR-009, DESIGN §6.2):
+  // `expensive` names its categories in the words gate-reversibility.mjs uses —
+  // escapes-the-machine, costs-money, destroys-evidence, unrevocable-disclosure;
+  // `unclassified` says so, because an unknown cost is not a low one.
+  const r = reversibility || GATE_REVERSIBILITY[id] || null;
   const lines = [
     `Approve ${id}?`,
     '',
     'Records your approval in the verdict log and wakes the pipeline —',
     'the next session dispatches the following stage.',
   ];
+  if (r && r.state === 'expensive') {
+    lines.push('', `Expensive to undo: ${(r.categories || []).join(' · ') || 'see gate-reversibility.mjs'}.`);
+  } else if (r && r.state === 'unclassified') {
+    lines.push('', 'Unclassified gate — its cost of undo is unknown, and unknown is not harmless.');
+  }
   if (shareState && shareState.enabled) {
     lines.push('', `Also republishes the public report at ${shareState.url || 'the share URL'} —`,
                    'anyone holding that link sees the update.');
@@ -6966,7 +7399,18 @@ async function gateAction(id, action, runAgent) {
     // a typed-name ritual on a button pressed several times a day. The runAgent
     // path already shows an editable prompt that says what it will approve and
     // run, and is cancellable — a second dialog there would be pure friction.
-    if (!runAgent && !confirm(approveConsequence(id))) return;
+    // Approve ritual follows cost of undo (DESIGN §6.2). `routine`: one confirm
+    // naming the consequence. `expensive` and `unclassified`: the operator types
+    // the gate name — exact, case-sensitive — before the approval is posted; an
+    // unclassified gate gets the expensive ritual because nobody judged it cheap.
+    const rev = GATE_REVERSIBILITY[id] || null;
+    const guarded = rev && (rev.state === 'expensive' || rev.state === 'unclassified');
+    if (!runAgent && guarded) {
+      const gateName = rev.gate ? `gate:${rev.gate}` : id;
+      const typed = prompt(`${approveConsequence(id, rev)}\n\nType ${gateName} to approve:`, '');
+      if (typed === null) return;
+      if (typed.trim() !== gateName) { alert(`Not approved — "${typed.trim()}" is not ${gateName}.`); return; }
+    } else if (!runAgent && !confirm(approveConsequence(id, rev))) return;   // routine
     body = { action, project: currentProject };
     if (runAgent) {
       const generic = `Gate ${id} was just approved. Continue the great_cto pipeline: claim the next ready task and implement it with TDD.`;
@@ -7076,6 +7520,8 @@ const ABSENCE = {
   none:         '—',      // measured; the answer is that there is none
   uncomputable: 'n/a',    // the inputs for this figure do not exist
   unloaded:     '·',      // no answer yet — the read has not landed
+  unreadable:   '!',      // it was there and could not be parsed
+  unjudged:     '?',      // it exists and nobody has classified it yet
 };
 
 function absent(kind, why) {
@@ -7112,183 +7558,6 @@ function deltaBadge(current, prev, comparable, { invert = false } = {}) {
 }
 
 /* ── Dashboard ──────────────────────────────────────────────────────────── */
-function renderDashboard(m) {
-  const llmUsd = m.cost?.llm_usd ?? 0;
-  const realLlmUsd = m.cost?.real_llm_usd ?? 0;
-  const planSavingsX = m.cost?.savings_x;
-  // Prefer the window-scoped count, but fall back to the all-time total when it
-  // is 0 — otherwise projects with completed-but-untimestamped tasks (e.g. a
-  // tasks.md fallback with no dates) show a meaningless "—" despite real work.
-  // (`??` kept 0 because done_in_window is 0, not null; `||` fixes that.)
-  const done = (m.tasks?.done_in_window || m.tasks?.done) ?? 0;
-  // Three states, not two. `?? 0` folds "the payload has no tasks section" into
-  // the same 0 as "zero tasks done", and the tile then rendered that 0 as an
-  // absence — so a day-one project read "—" beside "+0 this week", the board
-  // reporting a failure to measure something it had measured fine. The backend
-  // always sends `tasks` (lib/metrics.mjs), so this is "—" only for a payload
-  // that really is missing it.
-  const doneKnown = m.tasks != null;
-  const costKnown = m.cost != null;
-  // NOT the same shape: avg_completion_min is a median over completions that
-  // carry timestamps, and the backend emits 0 when there are none — so 0 here
-  // means "could not be computed", not "took no time". "—" is the correct
-  // reading; do not "fix" this into a literal 0 m.
-  const avgMin = m.avg_completion_min ?? 0;
-  const cycleStat = m.cycle_time_stat === 'median_30d' ? 'Median cycle (30d)' : 'Avg cycle time';
-
-  // Honest cost model — the backend is the source of truth:
-  //   cost.savings_x  = MEASURED savings, only set when real verdict cost data
-  //                     exists. NULL for the time-based (tasks) estimate, because
-  //                     that ratio is just the hardcoded rate ratio, not a real
-  //                     measurement — showing it would fabricate a number.
-  //   cost.human_usd  = the backend's conservative human-cost estimate.
-  // The frontend must NOT recompute its own human/savings figures (that produced
-  // an inflated "×" that contradicted the API); it displays the backend fields.
-  const aiSpend = realLlmUsd > 0 ? realLlmUsd : llmUsd;
-  const humanEst = m.cost?.human_usd ?? 0;
-  const savingsX = (typeof planSavingsX === 'number' && planSavingsX > 1)
-    ? planSavingsX
-    : null;
-
-  const llmTrend = realLlmUsd > 0
-    ? `real tokens spent (from verdicts)`
-    : (llmUsd > 0 ? `time-based estimate (no verdict data yet)` : 'no plans or tasks yet');
-
-  const hero = [
-    {
-      v: doneKnown ? done : absent('unloaded', 'the metrics payload carried no tasks section'),
-      sub: 'shipped', label: 'Tasks done',
-      trend: `+${m.velocity?.this_week ?? 0} this week`,
-      delta: deltaBadge(done, m.previous?.done, m.previous?.comparable),
-    },
-    {
-      // Three states, and $0.00 is only one of them. A measured zero is worth
-      // showing; a zero that is the TIME-BASED ESTIMATE with no plans or tasks
-      // to estimate from is not a figure at all, and rendering it as $0.00 told
-      // a project with dozens of agent runs that it had spent nothing.
-      v: !costKnown
-        ? absent('unloaded', 'the metrics payload carried no cost section')
-        : (realLlmUsd === 0 && llmUsd === 0
-            ? absent('uncomputable', 'no verdict carries a cost and there is nothing to estimate from')
-            : `$${aiSpend < 10 ? aiSpend.toFixed(2) : fmtMoney(aiSpend)}`),
-      sub: '',
-      label: 'AI spend',
-      delta: deltaBadge(aiSpend, m.previous?.llm_usd, m.previous?.comparable, { invert: true }),
-      trend: llmTrend,
-      cls: 'amber',
-    },
-    (savingsX != null && savingsX > 1)
-      ? {
-          v: savingsX.toLocaleString(),
-          sub: '×',
-          label: 'Cost savings vs FTE',
-          trend: humanEst > 0 ? `measured · human est. $${fmtMoney(humanEst)}` : 'measured savings',
-          cls: 'green',
-        }
-      : {
-          // No MEASURED savings yet (no verdict cost data). Don't fabricate a
-          // multiplier from the time-based estimate — show it's not measured.
-          v: absent('uncomputable', 'a measured multiplier needs verdict cost data, and there is none yet'),
-          sub: '',
-          label: 'Cost savings vs FTE',
-          trend: aiSpend > 0
-            ? 'estimate only · run pipelines for measured savings'
-            : (done > 0 ? 'no spend recorded yet' : 'no tasks done yet'),
-          cls: '',
-        },
-  ];
-  document.getElementById('mp-hero').innerHTML = hero.map(s => `
-    <div class="metric-card ${s.cls || ''}">
-      <div class="metric-num">${s.v}${s.sub ? `<small>${s.sub}</small>` : ''}</div>
-      <div class="metric-label">${s.label}${s.delta || ''}</div>
-      <div class="metric-trend">${s.trend}</div>
-    </div>`).join('');
-
-  const acc = m.acceptance || {};
-  const secondary = [
-    { v: avgMin ? `${avgMin}` : absent('uncomputable', 'no completion in this window carried a timestamp to measure'), sub: avgMin ? 'm' : '', label: cycleStat },
-    { v: m.qa?.pass_rate != null ? m.qa.pass_rate : absent('none', 'no QA run recorded in this window'), sub: m.qa?.pass_rate != null ? '%' : '', label: m.qa?.pass_rate != null ? 'QA pass rate' : 'QA — run /qa', cls: 'green' },
-    // Verified-acceptance metrics: cost of a change a gate actually APPROVED, and
-    // how often work bounced. '—' when nothing was accepted in the window — an
-    // honest gap, not a zero.
-    { v: acc.cost_per_accepted != null ? `$${acc.cost_per_accepted.toFixed(2)}` : absent('none', 'nothing was accepted in this window'), sub: '', label: acc.accepted ? `Cost / accepted (${acc.accepted})` : 'Cost / accepted' },
-    // `?? 0` here painted a GREEN ZERO over a question nobody asked. The tile one
-    // line above goes out of its way to avoid exactly this, and these two did not:
-    // a project whose acceptance data is missing showed "0 rework rounds" in
-    // green, and — worse — a project where security has NEVER BEEN SCANNED showed
-    // "0 open security blocks" in green, which is a passing security scan that
-    // did not happen. That is this board's governing defect rendered in its most
-    // reassuring colour.
-    {
-      v: acc.rework_rounds != null ? acc.rework_rounds : absent('uncomputable', 'no accepted work in this window, so rework cannot be counted'),
-      sub: '', label: 'Rework rounds',
-      cls: acc.rework_rounds == null ? '' : acc.rework_rounds ? 'amber' : 'green',
-    },
-    {
-      v: m.security?.blocked != null ? m.security.blocked : absent('uncomputable', 'no security scan has run — this is not a clean result'),
-      sub: '', label: 'Open security blocks',
-      // No colour when unmeasured. Green would say "safe"; red would say
-      // "unsafe"; neither is known.
-      cls: m.security?.blocked == null ? '' : m.security.blocked ? 'red' : 'green',
-    },
-    { v: m.tasks?.in_progress ?? 0, sub: '', label: 'In progress', cls: 'amber' },
-  ];
-  document.getElementById('mp-secondary').innerHTML = secondary.map(s => `
-    <div class="metric-card ${s.cls || ''}">
-      <div class="metric-num">${s.v}${s.sub ? `<small>${s.sub}</small>` : ''}</div>
-      <div class="metric-label">${s.label}</div>
-    </div>`).join('');
-
-  const agents = m.agents || {};
-  const maxRuns = Math.max(...Object.values(agents), 1);
-  const colors = ['#2540d4','#7c3aed','#16a34a','#f59e0b','#06b6d4','#2563eb','#64748b','#94a3b8'];
-  const agentKeys = Object.entries(agents).sort((a,b)=>b[1]-a[1]);
-  const agentListEl = document.getElementById('agent-list');
-  if (agentListEl) {
-    agentListEl.innerHTML = agentKeys.length ? agentKeys.map(([a, n], i) => `
-      <div class="bar-row">
-        <span class="name">${esc(a)}</span>
-        <span class="rail"><span class="fill" style="width:${(n/maxRuns*100).toFixed(0)}%; background:${colors[i % colors.length]}"></span></span>
-        <span class="pct">${Math.round(n/maxRuns*100)}%</span>
-      </div>`).join('') : '<div class="empty">No agent runs yet</div>';
-  }
-
-  // Agent cost breakdown
-  const agentsCost = m.agents_cost || [];
-  const costPanel = document.getElementById('agent-cost-panel');
-  if (costPanel) {
-    if (agentsCost.length) {
-      const maxCost = Math.max(...agentsCost.map(a => a.llm_usd), 0.0001);
-      costPanel.innerHTML = agentsCost.map((a, i) => `
-        <div class="agent-cost-row">
-          <span class="name">${esc(a.agent)}</span>
-          <span class="rail"><span class="fill" style="width:${(a.llm_usd/maxCost*100).toFixed(0)}%; background:${colors[i % colors.length]}"></span></span>
-          <span class="amt">$${a.llm_usd.toFixed(4)}</span>
-        </div>`).join('');
-    } else {
-      costPanel.innerHTML = '<div class="cost-empty">No agent cost data — tasks need estimated_minutes set.</div>';
-    }
-  }
-
-  const verdicts = (m.verdicts || []).slice().reverse().slice(0, 10);
-  const timelineEl = document.getElementById('timeline');
-  if (timelineEl) {
-    timelineEl.innerHTML = verdicts.length ? verdicts.map(v => {
-      const vu = (v.verdict || '').toUpperCase();
-      const cls = ['APPROVED','DONE','PASS'].includes(vu) ? 'ok' : ['BLOCKED','FAILED','FAIL'].includes(vu) ? 'fail' : 'def';
-      const raw = v.raw || '';
-      const afterColon = raw.indexOf(': ') !== -1 ? raw.slice(raw.indexOf(': ') + 2) : raw;
-      const text = afterColon.length > 80 ? afterColon.slice(0, 80) + '…' : afterColon;
-      return `
-        <div class="feed-row">
-          <span class="feed-dot ${cls}"></span>
-          <span class="agent">${esc(v.agent)}</span>
-          <span class="msg">${esc(text)}</span>
-          <span class="time">${relTime(v.ts)}</span>
-        </div>`;
-    }).join('') : '<div class="empty">No activity yet</div>';
-  }
-}
 
 /* ── Share ──────────────────────────────────────────────────────────────── */
 function renderShareState(state) {
@@ -7698,12 +7967,12 @@ let cmdkIndex = 0;
 
 function cmdkActions() {
   const out = [
-    { group: 'Go', label: 'Inbox — what needs your decision', run: () => switchTab('inbox') },
-    { group: 'Go', label: 'Tasks', run: () => switchTab('kanban') },
-    { group: 'Go', label: 'Metrics', run: () => switchTab('dashboard') },
-    { group: 'Go', label: 'Docs', run: () => switchTab('docs') },
-    { group: 'Go', label: 'Activity', run: () => switchTab('logs') },
-    { group: 'Go', label: 'Notifications', run: () => switchTab('notifications') },
+    { group: 'Go', label: 'Decisions — what needs you', run: () => switchTab('decisions') },
+    { group: 'Go', label: 'Ledger — what it cost, what is running', run: () => switchTab('ledger') },
+    { group: 'Go', label: 'Fleet — the agents and what they may do', run: () => switchTab('fleet') },
+    { group: 'Go', label: 'Harness — host and second opinion', run: () => switchTab('harness') },
+    { group: 'Go', label: 'Settings', run: () => switchTab('settings') },
+    { group: 'Go', label: 'Tasks board (#/kanban, deep link)', run: () => switchTab('kanban') },
     { group: 'Do', label: 'New issue', run: () => openNewIssueModal() },
     { group: 'Do', label: 'Toggle light / dark theme', run: () => toggleBoardTheme() },
   ];
@@ -7715,9 +7984,67 @@ function cmdkActions() {
     out.push({ group: 'Gate', label: `Approve — ${t.title}`, hint: t.id,
                run: () => gateAction(t.id, 'approve') });
   }
+  // ⌘K is where the board's artifacts are found by name (brief: docs, sessions,
+  // memory and decisions are one job — find the artifact — and a job done by
+  // recalling a name belongs in a palette, not a tab). Agents by slug (DESIGN
+  // §5 device 4): `sec` → security-officer, opened in place.
+  for (const a of (fleetState?.agents || [])) {
+    if (a.retired) continue;
+    out.push({ group: 'Agent', label: a.slug, hint: a.posture?.state === 'expensive' ? '▲ ' + ((a.posture.expensive || [])[0] || '') : (a.posture?.state === 'unclassified' ? '? not classified' : ''),
+               run: () => { switchTab('fleet'); openAgentDrawer(a.slug); } });
+  }
+  for (const m of (cmdkCache.memory || [])) {
+    out.push({ group: 'Memory', label: `${m.name} — ${m.desc || ''}`, hint: m.layer || '', run: () => switchTab('memory') });
+  }
+  for (const d of (cmdkCache.decisions || [])) {
+    out.push({ group: 'Decisions', label: `${d.id} — ${d.title || ''}`, hint: `${d.verdict || ''} ${(d.ts || '').slice(0, 10)}`.trim(),
+               run: () => switchTab('decisions') });
+  }
+  for (const it of (cmdkAsync.q === cmdkLastNeedle ? cmdkAsync.items : [])) out.push(it);
   return out;
 }
 
+// Memory layers and the decision log are small and stable: read once per
+// palette session. Docs and sessions are searched server-side per query
+// (BM25 over the files), debounced, and only shown while the query they
+// answered is still the one typed — a stale result is a wrong result.
+const cmdkCache = { memory: null, decisions: null };
+let cmdkAsync = { q: '', items: [] };
+let cmdkLastNeedle = '';
+let cmdkTimer = null;
+async function cmdkWarm() {
+  if (cmdkCache.memory == null) {
+    try { const m = await api(`/api/memory${pqs()}`); cmdkCache.memory = Array.isArray(m?.layers) ? m.layers : []; } catch { cmdkCache.memory = []; }
+  }
+  if (cmdkCache.decisions == null) {
+    try { const d = await api(`/api/decisions${pqs()}`); cmdkCache.decisions = Array.isArray(d) ? d.slice(-30).reverse() : []; } catch { cmdkCache.decisions = []; }
+  }
+  cmdkRender(document.getElementById('cmdk-input')?.value || '');
+}
+function cmdkSearch(needle) {
+  clearTimeout(cmdkTimer);
+  if (needle.length < 2) { cmdkAsync = { q: '', items: [] }; return; }
+  cmdkTimer = setTimeout(async () => {
+    const items = [];
+    const [docs, sessions] = await Promise.all([
+      api(`/api/docs/search?q=${encodeURIComponent(needle)}${pqs().replace(/^\?/, '&')}`).catch(() => null),
+      api(`/api/session-search?q=${encodeURIComponent(needle)}${pqs().replace(/^\?/, '&')}`).catch(() => null),
+    ]);
+    for (const r of (docs?.results || []).slice(0, 6)) {
+      const hit = (r.hits || [])[0];
+      items.push({ group: 'Docs', label: r.title || r.path, hint: hit ? `L${hit.line} · ${String(hit.text || '').slice(0, 60)}` : r.path, run: () => openDoc(r.path) });
+    }
+    if (docs && docs.unreadable) items.push({ group: 'Docs', label: `! ${docs.unreadable} document(s) could not be read`, hint: 'counted, not dropped', run: () => switchTab('docs') });
+    for (const h of (sessions?.hits || []).slice(0, 6)) {
+      items.push({ group: 'Sessions', label: `${h.title || h.session} · ${(h.ts || '').slice(0, 10)}`, hint: String(h.excerpt || '').replace(/\s+/g, ' ').slice(0, 70), run: () => openSession(h.session) });
+    }
+    if (docs == null && sessions == null) items.push({ group: 'Docs', label: '· search unavailable — the board could not read docs or sessions', hint: '', run: () => {} });
+    cmdkAsync = { q: needle, items };
+    const cur = (document.getElementById('cmdk-input')?.value || '').toLowerCase().trim();
+    if (cur === needle) cmdkRender(cur);
+  }, 150);
+}
+
 function cmdkOpen() {
   let el = document.getElementById('cmdk');
   if (!el) {
@@ -7725,7 +8052,7 @@ function cmdkOpen() {
     el.id = 'cmdk';
     el.innerHTML = `
       <div class="cmdk-box" role="dialog" aria-modal="true" aria-label="Command palette">
-        <input id="cmdk-input" type="text" placeholder="Type a command…" aria-label="Command"
+        <input id="cmdk-input" type="text" placeholder="Go, do, gate · agents · docs · sessions · memory · decisions" aria-label="Command"
                autocomplete="off" oninput="cmdkRender(this.value)" />
         <div id="cmdk-list" role="listbox" aria-label="Commands"></div>
       </div>`;
@@ -7736,16 +8063,19 @@ function cmdkOpen() {
   cmdkIndex = 0;
   const input = document.getElementById('cmdk-input');
   input.value = '';
+  cmdkLastNeedle = ''; cmdkAsync = { q: '', items: [] };
   cmdkRender('');
   input.focus();
+  cmdkWarm();
 }
 
 function cmdkClose() { document.getElementById('cmdk')?.classList.remove('open'); }
 
 function cmdkRender(q) {
   const needle = (q || '').toLowerCase().trim();
+  if (needle !== cmdkLastNeedle) { cmdkLastNeedle = needle; cmdkSearch(needle); }
   cmdkItems = cmdkActions().filter((a) =>
-    !needle || a.label.toLowerCase().includes(needle) || (a.hint || '').toLowerCase().includes(needle));
+    !needle || a.group === 'Docs' || a.group === 'Sessions' || a.label.toLowerCase().includes(needle) || (a.hint || '').toLowerCase().includes(needle));
   if (cmdkIndex >= cmdkItems.length) cmdkIndex = 0;
   const list = document.getElementById('cmdk-list');
   if (!list) return;
@@ -7826,41 +8156,53 @@ try {
   matchMedia('(min-width: 769px)').addEventListener('change', (e) => { if (e.matches) closeMenu(false); });
 } catch (_) { /* older Safari: no addEventListener on MediaQueryList — drawer still works */ }
 
+// Redesign IA (great_cto-ki1x.5): four destinations + Settings. A new key
+// resolves to the panel that holds its content today (DEST); an old key —
+// still used by deep links, the SSE handlers and the kanban drill-in — maps
+// back to the destination that should light up (NAV). Screens .6–.11 replace
+// panels, not keys.
+const DEST = { decisions: 'inbox', ledger: 'budgets', fleet: 'agents', dashboard: 'budgets', share: 'settings', notifications: 'settings' };
+const NAV = { inbox: 'decisions', budgets: 'ledger', agents: 'fleet', dashboard: 'ledger', share: 'settings', notifications: 'settings' };
+const ROUTES = { decisions: 1, ledger: 1, fleet: 1, harness: 1, settings: 1, kanban: 1 };
 function switchTab(id, el) {
-  // `agents` has no sidebar entry by design: it is a drill-in from Dashboard.
-  // Without this the call fell through to code that expects a nav element and
-  // left the sidebar with nothing selected.
-  if (!el) el = document.querySelector(`.nav-item[data-tab="${id}"]`)
-    || document.querySelector('.nav-item[data-tab="dashboard"]');
-  currentTab = id;
+  const lid = DEST[id] || id;          // the panel's own name
+  const navKey = NAV[id] || id;        // the destination to highlight
+  if (!el) el = document.querySelector(`.nav-item[data-tab="${navKey}"]`)
+    || document.querySelector('.nav-item[data-tab="decisions"]');
+  currentTab = lid;
+  if (ROUTES[id]) {
+    if (location.hash !== `#/${id}`) history.replaceState(null, '', `#/${id}`);
+    // BRD-R9: one local line per destination open, never blocking, never surfaced.
+    try { fetch('/api/view', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ view: id }) }).catch(() => {}); } catch (e) {}
+  }
   closeMenu(false);   // choosing a destination is the end of using the menu
   // sidebar nav
   document.querySelectorAll('.nav-item[data-tab]').forEach(t => {
-    t.classList.toggle('active', t.dataset.tab === id);
+    t.classList.toggle('active', t.dataset.tab === navKey);
   });
   // top tabs
   document.querySelectorAll('.tab-btn').forEach(t => t.classList.toggle('active', t.dataset.tab === id));
   // panels
   document.querySelectorAll('.panel').forEach(p => p.classList.remove('active'));
-  const panelEl = document.getElementById(`panel-${id}`);
+  const panelEl = document.getElementById(`panel-${lid}`);
   if (panelEl) panelEl.classList.add('active');
   // crumb — `labels` used to be referenced here but is only ever a function-local in
   // this file, so this threw ReferenceError on every tab switch and skipped the per-tab
   // loaders below (e.g. logs stuck on "Loading…"). Use a local label map.
-  const TAB_LABELS = { budgets: 'Budgets', docs: 'Docs', dashboard: 'Board', inbox: 'Inbox', tasks: 'Tasks', agents: 'Agents', logs: 'Activity', notifications: 'Notifications', metrics: 'Metrics', share: 'Share' };
-  const crumb = document.getElementById('crumb-here'); if (crumb) crumb.textContent = TAB_LABELS[id] || 'Board';
+  const TAB_LABELS = { decisions: 'Decisions', ledger: 'Ledger', fleet: 'Fleet', harness: 'Harness', settings: 'Settings', budgets: 'Budgets', docs: 'Docs', dashboard: 'Board', inbox: 'Inbox', tasks: 'Tasks', agents: 'Agents', logs: 'Activity', notifications: 'Notifications', metrics: 'Metrics', share: 'Share' };
+  const crumb = document.getElementById('crumb-here'); if (crumb) crumb.textContent = TAB_LABELS[id] || TAB_LABELS[lid] || 'Board';
   // Budgets render on Metrics, so the heartbeat that feeds them has to be
   // fetched when Metrics opens — not only from the agents drill-in it used to
   // live in.
-  if (id === 'dashboard') refreshHeartbeat();
+  if (lid === 'dashboard') refreshHeartbeat();
   // The Notifications panel has carried an inline history list all along, and
   // `renderNotifHistoryInline()` to fill it — but the only caller was
   // `openNotifDrawer()`. Opening the tab itself never loaded it, so the sidebar
   // promised 50 unread and the screen showed settings. Declared and not
   // consumed, in the UI this time.
-  if (id === 'notifications') loadNotifHistory();
-  if (id === 'budgets') loadBudgetsPage();
-  if (id === 'dashboard' || id === 'agents') {
+  if (lid === 'notifications') loadNotifHistory();
+  if (lid === 'budgets') { loadBudgetsPage(); refreshCost(); }
+  if (lid === 'agents') {
     // pqsd(), not pqs(): this call omitted `days` entirely, so the server applied
     // its 30-day default and overwrote whatever window the period chips had
     // selected. Pick "7d", switch tabs, come back — the chip still read 7d and
@@ -7869,17 +8211,54 @@ function switchTab(id, el) {
     //
     // Through the sequence guard too, so a tab switch cannot land after a newer
     // period request and clobber it.
-    _refreshMetricsRaced(`/api/metrics${pqsd()}`).then(m => { if (m) { metrics = m; renderDashboard(m); } });
-    if (id === 'dashboard') refreshCost();
-    if (id === 'agents') refreshAgentsInstalled();
+    _refreshMetricsRaced(`/api/metrics${pqsd()}`).then(m => { if (m) { metrics = m; } });
+    if (lid === 'agents') refreshAgentsInstalled();
   }
-  if (id === 'inbox') refreshInbox();
-  if (id === 'logs') setActivityView('logs');
-  if (id === 'docs') loadDocs();
-  if (id === 'sessions') loadSessions();
-  if (id === 'logs') refreshLogs();
-  if (id === 'notifications') loadNotifications();
+  if (lid === 'inbox') refreshInbox();
+  if (lid === 'logs') setActivityView('logs');
+  if (lid === 'docs') loadDocs();
+  if (lid === 'sessions') loadSessions();
+  if (lid === 'logs') refreshLogs();
+  if (lid === 'notifications' || lid === 'settings') loadNotifications();
+  if (lid === 'settings') loadSettingsPage();
+  if (lid === 'harness') renderHarnesses();
+}
+
+// Sidebar tabs: Enter/Space activate, arrows move (WAI-ARIA tablist).
+function navTabKeydown(event, el) {
+  const items = [...document.querySelectorAll('.nav-item[role="tab"]')];
+  const i = items.indexOf(el);
+  if (event.key === 'Enter' || event.key === ' ') { event.preventDefault(); el.click(); return; }
+  if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+    event.preventDefault();
+    const next = items[(i + (event.key === 'ArrowDown' ? 1 : items.length - 1)) % items.length];
+    if (next) next.focus();
+  }
+}
+// Routes: #/decisions … #/settings and #/kanban (a deep link, not a menu item —
+// brief 2026-09-06, revisited on 2026-09-20). Legacy hashes land on their new
+// home so a bookmark does not open on nothing. #agents/<slug> keeps its handler.
+const LEGACY_ROUTES = { inbox: 'decisions', budgets: 'ledger', dashboard: 'ledger', agents: 'fleet', notifications: 'settings', share: 'settings' };
+function routeFromHash() {
+  const h = (location.hash || '').replace(/^#\/?/, '');
+  if (!h || h.startsWith('agents/')) return null;
+  // #/fleet/<slug>: open the agent in place (DESIGN §2 deep link).
+  const m = h.match(/^fleet\/([a-z0-9-]+)$/i);
+  if (m) {
+    // Open once the board has a project and a fleet to open into; a deep link
+    // that fires before init has set currentProject asks the API for nothing.
+    const slug = m[1];
+    const tryOpen = (n) => {
+      if (typeof openAgentDrawer === 'function' && typeof currentProject !== 'undefined' && currentProject && (fleetState.agents || []).length) openAgentDrawer(slug, { fromHash: true });
+      else if (n < 50) setTimeout(() => tryOpen(n + 1), 100);
+    };
+    setTimeout(() => tryOpen(0), 0);
+    return 'fleet';
+  }
+  return ROUTES[h] ? h : (LEGACY_ROUTES[h] || null);
 }
+addEventListener('hashchange', () => { const r = routeFromHash(); if (r) switchTab(r); });
+addEventListener('DOMContentLoaded', () => { const r = routeFromHash(); if (r && r !== 'decisions') switchTab(r); });
 
 async function refreshLogs() {
   const data = await api(`/api/logs${pqs()}`);
@@ -8004,6 +8383,9 @@ const fleetState = {
   // doing work on most projects; showing all 35 by default is noise.
   // User flips activity to `all` to see the full installation.
   filters: { domain: 'all', activity: 'all', health: 'all' },
+  // Five saved views, and only five (DESIGN §5): the default is the subset
+  // nobody has judged yet, not the roster.
+  view: 'needs',
   search: '',
   sort: 'runs_30d',
   drawerSlug: null,
@@ -8023,8 +8405,6 @@ async function refreshAgentsInstalled() {
   }
   // legacy_agent_count comes from /api/metrics — pull from cached metrics if present
   fleetState.legacy_count = (typeof metrics !== 'undefined' && metrics && metrics.legacy_agent_count) || 0;
-  renderFleetSummary();
-  renderFleetFacets();
   renderFleetList();
   renderLegacyAgentsSection();
   // If the URL hash names a drawer, open it (post-load).
@@ -8032,102 +8412,64 @@ async function refreshAgentsInstalled() {
   if (m) openAgentDrawer(m[1], { fromHash: true });
 }
 
-function renderFleetSummary() {
-  const el = document.getElementById('fleet-summary');
-  if (!el) return;
-  const s = fleetState.summary;
-  if (!s) { el.innerHTML = '<div class="cost-empty">No data yet</div>'; return; }
-  const tiles = [
-    { v: s.installed, label: 'Installed agents', cls: '' },
-    { v: s.active_30d, label: 'Active last 30d', cls: 'green', trend: s.active_30d > 0 ? '' : 'no activity yet' },
-    {
-      v: s.retire_candidates,
-      label: 'Retire candidates',
-      cls: s.retire_candidates > s.installed * 0.5 ? 'amber' : '',
-      trend: s.retire_candidates > 0 ? 'click to filter' : 'fleet is lean',
-      onClick: 'setFleetFilter("activity", "never")',
-    },
-    {
-      // `?? 0` turned "nothing was measured" into "$0.00 spent", and before that
-      // the number here was an ESTIMATE from verdict counts while the metrics
-      // page estimated from tasks — two screens, one label, $3.90 against $1.65.
-      v: s.llm_usd_30d != null
-        ? '$' + s.llm_usd_30d.toFixed(2)
-        : absent('uncomputable', `no verdict carries a cost — ${s.llm_usd_30d_agents_with_runs ?? 0} agent(s) ran in this window`),
-      vHtml: s.llm_usd_30d == null,
-      label: 'LLM spend 30d',
-      cls: '',
-      trend: s.llm_usd_30d != null
-        ? `measured for ${s.llm_usd_30d_measured_for} agent(s)`
-        : (s.failing_7d ? `${s.failing_7d} failing` : 'measured from verdicts'),
-    },
-  ];
-  // `t.v` is HTML when it is an absence marker — a span carrying the reason on
-  // hover and in the accessible name — and a plain string otherwise. Escaping it
-  // unconditionally printed the markup as text on the fleet tile. `vHtml` is the
-  // deliberate opt-in; every value without it is still escaped.
-  //
-  // This comment lives out here because it names `t.v` in backticks, and a
-  // backtick inside the template literal below terminates it — which is how the
-  // board shipped a syntax error for about ninety seconds.
-  el.innerHTML = tiles.map(t => `
-    <div class="metric-card ${t.cls}" ${t.onClick ? `role="button" tabindex="0" onclick='${t.onClick}' onkeydown='if(event.key==="Enter"||event.key===" "){event.preventDefault();${t.onClick}}'` : ''}>
-      <div class="metric-num">${t.vHtml ? t.v : esc(String(t.v))}</div>
-      <div class="metric-label">${esc(t.label)}</div>
-      ${t.trend ? `<div class="metric-trend">${esc(t.trend)}</div>` : ''}
-    </div>`).join('');
-}
 
-const FACET_GROUPS = [
-  {
-    key: 'domain', legend: 'Domain',
-    options: [
-      ['all', 'all'], ['arch', 'arch'], ['pm', 'pm'], ['qa', 'qa'],
-      ['security', 'security'], ['ops', 'ops'], ['domain', 'domain'],
-      ['memory', 'memory'], ['other', 'other'],
-    ],
-  },
-  {
-    key: 'activity', legend: 'Activity',
-    options: [
-      ['all', 'all'], ['used', 'used'], ['active', 'active'], ['idle', 'idle ≥30d'], ['never', 'never run'], ['retired', 'retired'],
-    ],
-  },
-  {
-    key: 'health', legend: 'Health',
-    options: [
-      ['all', 'all'], ['ok', 'ok'], ['failing', 'failing ≥3 in 7d'],
-    ],
-  },
-];
 
-function renderFleetFacets() {
-  const el = document.getElementById('fleet-facets');
-  if (!el) return;
-  el.innerHTML = FACET_GROUPS.map(g => `
-    <fieldset>
-      <legend>${esc(g.legend)}</legend>
-      ${g.options.map(([val, label]) => {
-        const checked = fleetState.filters[g.key] === val;
-        return `<button type="button" class="facet-chip"
-                role="checkbox" aria-checked="${checked}"
-                data-facet="${esc(g.key)}" data-value="${esc(val)}"
-                onclick="setFleetFilter('${esc(g.key)}', '${esc(val)}')">
-                ${esc(label)}</button>`;
-      }).join('')}
-    </fieldset>`).join('');
-}
-
-function setFleetFilter(key, value) {
-  fleetState.filters[key] = value;
-  renderFleetFacets();
+
+
+const FLEET_VIEWS = [
+  ['needs', 'Needs attention'], ['expensive', 'Expensive grants'], ['never', 'Never observed'], ['all', 'All agents'], ['retired', 'Retired'],
+];
+// What "needs attention" means, in one place: failing, an unjudged posture, a
+// grant that is scoped in name only, or spend past its cap. Not "idle" — the
+// brief refuses an inferred idle/retired status in v1.
+function agentNeedsAttention(a) {
+  const p = a.posture || {};
+  return a.health === 'failing'
+    || p.state === 'unclassified' || p.state === 'unreadable'
+    || (Array.isArray(p.scopedInNameOnly) && p.scopedInNameOnly.length > 0)
+    || String(a.budget?.state || '').startsWith('over');
+}
+function inFleetView(a, view) {
+  if (view === 'retired') return !!a.retired;
+  if (a.retired) return false;
+  if (view === 'needs') return agentNeedsAttention(a);
+  if (view === 'expensive') return a.posture?.state === 'expensive';
+  if (view === 'never') return !(a.runs_total > 0);
+  return true;
+}
+function setFleetView(view) {
+  fleetState.view = FLEET_VIEWS.some(([k]) => k === view) ? view : 'all';
+  renderFleetViews();
   renderFleetList();
+  if (currentTab !== 'agents') switchTab('fleet');
+}
+// The sidebar's Views block: counts per view, the active one marked, and the
+// Fleet item's absence glyph lit when something is unclassified — a glyph, not
+// a count, because "2" would read as two new items.
+function renderFleetViews() {
+  const agents = fleetState.agents || [];
+  for (const [key, label] of FLEET_VIEWS) {
+    const el = document.getElementById(`nav-view-${key}`);
+    if (!el) continue;
+    const n = agents.filter((a) => inFleetView(a, key)).length;
+    el.classList.toggle('active', fleetState.view === key);
+    el.innerHTML = `<span>${esc(label)}</span><span class="nav-view-count">${n}</span>`;
+  }
+  const abs = document.getElementById('nav-fleet-abs');
+  if (abs) abs.hidden = !agents.some((a) => a.posture?.state === 'unclassified' || a.posture?.state === 'unreadable');
+  const title = document.getElementById('fleet-view-title');
+  if (title) {
+    const [, label] = FLEET_VIEWS.find(([k]) => k === fleetState.view) || ['all', 'All agents'];
+    const n = agents.filter((a) => inFleetView(a, fleetState.view)).length;
+    title.innerHTML = `${esc(label)} <span class="muted" style="font-weight:400;font-size:var(--fs-title-s)">${n} of ${agents.length}</span>`;
+  }
 }
 
 function applyFleetFilters(agents) {
   const { domain, activity, health } = fleetState.filters;
   const q = (fleetState.search || '').toLowerCase().trim();
   return agents.filter(a => {
+    if (!inFleetView(a, fleetState.view)) return false;
     if (q && !a.slug.toLowerCase().includes(q) && !(a.description || '').toLowerCase().includes(q)) return false;
     if (domain !== 'all' && a.domain !== domain) return false;
     // `used` = has at least one verdict, not retired. Default filter.
@@ -8173,43 +8515,92 @@ function budgetChip(b) {
 function renderFleetList() {
   const el = document.getElementById('fleet-list');
   if (!el) return;
+  renderFleetViews();
   const filtered = sortFleet(applyFleetFilters(fleetState.agents));
   if (!filtered.length) {
-    el.innerHTML = '<li class="empty" style="padding:20px;text-align:center;color:var(--text3)">No agents match these filters.</li>';
+    el.innerHTML = '<li class="empty" style="padding:20px;text-align:center;color:var(--text3)">No agents match this view.</li>';
     return;
   }
-  el.innerHTML = filtered.map(a => {
-    const rate = a.success_rate;
-    const rateLabel = rate != null ? `${rate}% ok` : 'no verdicts';
-    const lastRunStr = a.last_run ? agoStr(a.last_run) : 'never run';
-    const savingsStr = a.savings_x != null ? `${a.savings_x}× savings` : '';
-    const runsStr = `${a.runs_30d} run${a.runs_30d === 1 ? '' : 's'} 30d`;
-    return `<li>
+  // Groups come from deriveDomain() on the server — one taxonomy, not two. A
+  // group with rows in this view is expanded; the rest are one line each with
+  // their count, so 70 agents fit a screen without a scroll or a virtualizer.
+  const DOMAINS = ['arch', 'security', 'qa', 'ops', 'domain', 'pm', 'memory', 'other'];
+  const totals = {}; for (const a of fleetState.agents) totals[a.domain] = (totals[a.domain] || 0) + 1;
+  const byDomain = {}; for (const a of filtered) (byDomain[a.domain] = byDomain[a.domain] || []).push(a);
+  const order = [...DOMAINS, ...Object.keys(byDomain).filter((d) => !DOMAINS.includes(d))];
+  const expanded = order.filter((d) => (byDomain[d] || []).length);
+  const collapsed = order.filter((d) => !(byDomain[d] || []).length && totals[d]);
+  const rows = expanded.map((d) => `
+    <li class="fleet-group-head"><span>${esc(d)} · ${byDomain[d].length} of ${totals[d] || 0}</span></li>
+    ${byDomain[d].map(agentRowHtml).join('')}`).join('');
+  const tail = collapsed.length
+    ? `<li class="fleet-group-collapsed">${collapsed.map((d) => `<span title="no ${esc(d)} agent is in this view">${esc(d)} · 0 of ${totals[d]}</span>`).join('')}</li>`
+    : '';
+  el.innerHTML = rows + tail;
+}
+
+// AgentRow (DESIGN §6.4 / §8.5): slug · posture · last verdict · runs · pass · 30d $.
+// Numbers that can be summed are tabular and right-aligned; identifiers are not.
+// Every absence carries its reason on hover.
+function postureChips(a) {
+  const p = a.posture || {};
+  const out = [];
+  if (p.state === 'expensive') {
+    const first = (p.expensive || [])[0] || 'expensive';
+    const more = (p.expensive || []).length - 1;
+    out.push(`<span class="pos exp" title="${esc((p.expensive || []).join(' · '))}">▲ ${esc(first)}${more > 0 ? ` +${more}` : ''}</span>`);
+  } else if (p.state === 'routine') {
+    out.push('<span class="pos rou" title="every granted tool is routine — cheap to undo">· routine</span>');
+  } else if (p.state === 'unclassified') {
+    out.push(`<span class="pos unj" title="${esc((p.unknownTools || []).join(', ') || 'a tool agent-posture.mjs does not classify')} — unjudged, not harmless">? not classified</span>`);
+  } else if (p.state === 'undeclared') {
+    out.push('<span class="abs" title="the agent declares no tools: line — nothing is granted, nothing is known">— no tools line</span>');
+  } else {
+    out.push(`<span class="abs" title="${esc(p.why || 'the agent file could not be read')}">! unreadable</span>`);
+  }
+  for (const t of (p.scopedInNameOnly || [])) {
+    out.push(`<span class="pos warn" title="scoped in name only: ${esc(t)} — this grant reads as a restriction and is a full shell">⚠ ${esc(String(t).replace(/^Bash\(|\)$/g, ''))}</span>`);
+  }
+  return out.join('');
+}
+function agentRowHtml(a) {
+  const rate = a.success_rate;
+  const runs = a.runs_30d ?? 0;
+  const observed = a.runs_total > 0 || !!a.last_run;
+  const last = observed
+    ? (a.health === 'failing' ? `<span style="color:var(--status-blocked)">failing</span> ${esc(agoStr(a.last_run))}` : `<span style="color:var(--status-done)">ok</span> ${esc(agoStr(a.last_run))}`)
+    : '<span class="abs" title="no verdict line names this agent — absence of a log is not absence of a run">never observed</span>';
+  const pass = !observed ? '<span class="abs" title="never observed">—</span>'
+    : runs === 0 ? '<span class="abs" title="no run in this window — measured, none">—</span>'
+    : rate != null ? `${rate}%` : '<span class="abs" title="runs exist but no verdict carried a result yet">·</span>';
+  const spend = a.llm_usd_30d_real != null ? `$${a.llm_usd_30d_real.toFixed(2)}`
+    : a.llm_usd_30d_est != null && a.llm_usd_30d_est > 0 ? `<span title="estimated from time, not from a verdict">≈$${a.llm_usd_30d_est.toFixed(2)}</span>`
+    : `<span class="abs" title="no verdict carries a cost for this agent">—</span>`;
+  const model = a.model_state === 'pinned' && a.model ? esc(a.model)
+    : a.model_state === 'undeclared' ? '<span class="abs" title="declares no model — not pinned to any default">—</span>'
+    : '<span class="abs" title="the agent file could not be read">!</span>';
+  return `<li>
       <button class="agent-row status-${esc(a.health)}${a.retired ? ' retired' : ''}"
               role="button" data-slug="${esc(a.slug)}"
-              aria-label="${esc(a.slug)} · ${esc(a.health)} · ${rateLabel} · ${esc(lastRunStr)}${a.budget && a.budget.state !== 'no-limit' ? ' · ' + esc(a.budget.why) : ''}"
+              aria-label="${esc(a.slug)} · ${esc(a.health)} · ${runs} runs 30d"
               onclick="openAgentDrawer('${esc(a.slug)}')"
               onkeydown="if(event.key==='Enter'){event.preventDefault();openAgentDrawer('${esc(a.slug)}')}">
         <span class="ar-status" aria-hidden="true"></span>
         <span class="ar-body">
-          <span class="ar-name">${esc(a.slug)}</span>
-          <span class="ar-meta">
-            <span class="ar-domain">${esc(a.domain)}</span>
-            <span>${esc(runsStr)}</span>
-            <span>${esc(rateLabel)}</span>
-            <span>last: ${esc(lastRunStr)}</span>
-            ${savingsStr ? `<span>${esc(savingsStr)}</span>` : ''}
+          <span class="ar-name">${esc(a.slug)} <span class="mono cap muted" style="font-weight:400">${model}</span></span>
+          <span class="ar-cells">
+            <span class="ar-posture">${postureChips(a)}</span>
+            <span class="mono cap ar-last">${last}</span>
+            <span class="mono cap tab" title="runs in the last 30 days">${runs}</span>
+            <span class="mono cap tab" title="pass rate over those runs">${pass}</span>
+            <span class="mono cap tab" title="LLM spend, last 30 days">${spend}</span>
             ${budgetChip(a.budget)}
             ${a.retired ? '<span style="color:var(--agent-retired)">retired</span>' : ''}
           </span>
         </span>
-        <span class="ar-rail" aria-hidden="true">
-          ${rate != null ? `<span class="ar-rail-fill" style="width:${rate}%"></span>` : ''}
-        </span>
         <span class="ar-chev" aria-hidden="true">›</span>
       </button>
     </li>`;
-  }).join('');
 }
 
 function renderLegacyAgentsSection() {
@@ -8276,13 +8667,33 @@ async function openAgentDrawer(slug, opts = {}) {
     document.getElementById('agent-drawer-close')?.focus();
   }, 50);
 
-  const profile = await api(`/api/agents/${encodeURIComponent(slug)}`);
+  // Agent detail (great_cto-ki1x.9): the profile plus the three facts the
+  // decision needs — its gate tier and eval count, its stand-downs, and whether
+  // the last approval's receipt still describes the tree. Each is its own read
+  // and its own state; one failing must not blank the others.
+  // The profile paints first; the slower facts — tier + evals, stand-downs,
+  // and the receipt, which hashes the tree and takes seconds — arrive on their
+  // own and replace their `· unloaded` cells. A slow read never holds the
+  // drawer, and a failed one is a state on its cell, not a spinner.
+  let profile;
+  try { profile = await api(`/api/agents/${encodeURIComponent(slug)}`); }
+  catch (err) {
+    body.innerHTML = `<div class="cost-empty">Could not load <code>${esc(slug)}</code>: ${esc(String(err && err.message || err))} <button type="button" class="btn-ghost-sm" onclick="openAgentDrawer('${esc(slug)}', { fromHash: true })">Try again</button></div>`;
+    return;
+  }
   if (!profile || profile.error) {
     body.innerHTML = `<div class="cost-empty">Agent <code>${esc(slug)}</code> not found.</div>`;
     return;
   }
   if (fleetState.drawerSlug !== slug) return; // drawer swapped while loading
-  renderAgentProfile(profile);
+  const extra = { tier: null, tiersState: null, receipt: null, standDowns: null };
+  renderAgentProfile(profile, extra);
+  const settle = (p, apply) => p.then(apply, () => {}).then(() => { if (fleetState.drawerSlug === slug) renderAgentProfile(profile, extra); });
+  await Promise.all([
+    settle(api(`/api/gate-tiers${pqs()}`), (t) => { extra.tiersState = t; extra.tier = t?.agents?.[slug] || null; }),
+    settle(api(`/api/stand-downs${pqs()}`), (d) => { extra.standDowns = d; }),
+    settle(api(`/api/receipt${pqs()}`), (r) => { extra.receipt = r; }),
+  ]);
 }
 
 function closeAgentDrawer() {
@@ -8305,50 +8716,84 @@ function closeAgentDrawer() {
   document.querySelectorAll('.agent-row').forEach(r => r.setAttribute('aria-current', 'false'));
 }
 
-function renderAgentProfile(p) {
+function renderAgentProfile(p, extra = {}) {
   const body  = document.getElementById('agent-drawer-body');
   const title = document.getElementById('agent-drawer-title');
   const pill  = document.getElementById('agent-drawer-pill');
   if (!body) return;
   title.textContent = p.slug;
+  const row = (fleetState.agents || []).find((a) => a.slug === p.slug) || {};
+  const tier = extra.tier;
+  const tierChip = tier
+    ? `<span class="chip mono" style="background:var(--bg-strong);color:var(--text)" title="${esc(tier.why || '')}">${esc(tier.tier)}</span>`
+    : (extra.tiersState && extra.tiersState.enabled === false
+        ? '<span class="abs" title="gate tiering is off for this project">— tiering off</span>'
+        : '<span class="abs" title="no tier computed for this agent — no eval has judged it">? tier</span>');
   pill.innerHTML = `<span class="status-pill tone-${esc(p.health)}">
     <span class="pill-dot" aria-hidden="true"></span>${esc(p.retired ? 'retired' : p.health)}
-  </span>`;
-
-  const savings = p.savings_x != null ? `${p.savings_x}× ($${(p.llm_usd_30d_est ?? 0).toFixed(2)} vs $${(p.human_usd_30d_est ?? 0).toLocaleString()})` : '—';
-  const realCost = p.llm_usd_30d_real != null ? `· measured $${p.llm_usd_30d_real.toFixed(4)}` : '';
+  </span> ${tierChip}`;
+
+  const model = row.model_state === 'pinned' && p.model ? `<span class="mono">${esc(p.model)}</span> <span class="muted">pinned</span>`
+    : row.model_state === 'undeclared' ? '<span class="abs" title="declares no model — not pinned to any default">— no model pinned</span>'
+    : `<span class="mono">${esc(p.model || '')}</span>`;
+  const spend = p.llm_usd_30d_real != null ? `<span class="mono">$${p.llm_usd_30d_real.toFixed(2)}</span> <span class="muted">measured · 30d</span>`
+    : (p.llm_usd_30d_est != null && p.llm_usd_30d_est > 0) ? `<span class="mono">≈$${p.llm_usd_30d_est.toFixed(2)}</span> <span class="muted">estimated · 30d</span>`
+    : '<span class="abs" title="no verdict carries a cost for this agent">— spend unmeasured</span>';
+  const posture = row.posture || {};
+  const strip = (posture.scopedInNameOnly || []).length
+    ? `<div class="strip" style="margin-top:8px" title="a grant that reads as a restriction and is a full shell">⚠ <span><span class="mono">${esc((posture.scopedInNameOnly || []).join(', '))}</span> — scoped in name only: a full shell</span></div>`
+    : '';
+  // Evals: a count of zero is "measured, none"; a missing tier read is "not measured".
+  const evals = tier
+    ? (tier.evals > 0 ? `<span class="mono">${tier.evals}</span> <span class="muted">eval(s) · ${esc(tier.why || '')}</span>` : '<span class="abs" title="measured — no eval names this agent">— none</span>')
+    : '<span class="abs" title="no eval→agent mapping was read — not measured, not zero">· not measured</span>';
+  const sd = extra.standDowns;
+  const sdRows = Array.isArray(sd?.rows) ? sd.rows.filter((r) => !r.agent || r.agent === p.slug) : null;
+  const standDowns = sd == null ? '<span class="abs" title="stand-down log not read">· unloaded</span>'
+    : sd.state === 'unreadable' ? `<span class="abs" title="${esc(sd.why || '')}">! unreadable</span>`
+    : sdRows && sdRows.length ? `<span class="mono">${sdRows.length}</span> <span class="muted">— last ${esc(agoStr(sdRows[sdRows.length - 1].ts || sdRows[sdRows.length - 1].at))}, record reached the inbox</span>`
+    : '<span class="abs" title="measured — no gate stood down for this agent">—</span>';
+  const rc = extra.receipt;
+  const receipt = rc == null ? '<span class="abs" title="receipt not read">· unloaded</span>'
+    : rc.state === 'no-receipt' ? `<span class="abs" title="${esc(rc.why || '')}">— no approval carries a receipt yet</span>`
+    : rc.state === 'unreadable' ? `<span class="abs" title="${esc(rc.why || '')}">! unreadable</span>`
+    : rc.state === 'differs' ? `<span style="color:var(--status-progress)">differs</span> <span class="muted">— ${(rc.changed || []).length} changed, ${(rc.added || []).length} added since ${esc(rc.agent || 'the last')} approval${rc.ts ? ' ' + esc(agoStr(rc.ts)) : ''}</span>`
+    : `<span style="color:var(--status-done)">${esc(rc.state)}</span> <span class="muted">— the approved bytes are the bytes in the tree</span>`;
 
   body.innerHTML = `
     <div class="mp-card">
-      <h4>Summary</h4>
+      <h4>Grant <span class="muted" style="font-weight:normal">· hover a chip for what it permits</span></h4>
+      <div class="mono cap" style="color:var(--text2);margin:6px 0 8px">${(p.tools || []).length ? esc(p.tools.join(', ')) : '<span class="abs" title="the agent declares no tools: line">— no tools line</span>'}</div>
+      <div class="ar-posture">${postureChips({ posture })}</div>
+      ${strip}
+    </div>
+    <div class="mp-card">
       <dl class="agent-summary-grid">
-        <dt>domain</dt>      <dd>${esc(p.domain)}</dd>
-        <dt>model</dt>       <dd>${esc(p.model)}</dd>
-        ${p.applies_to.length ? `<dt>applies_to</dt><dd>${esc(p.applies_to.join(', '))}</dd>` : ''}
-        ${(p.tools && p.tools.length) ? `<dt>tools</dt><dd>${p.tools.map(t => `<span class="chip" style="font-size:var(--fs-caption)">${esc(t)}</span>`).join(' ')}</dd>` : '<dt>tools</dt><dd style="color:var(--text3)">none declared</dd>'}
-        ${(p.skills && p.skills.length) ? `<dt>skills</dt><dd>${p.skills.map(s => `<span class="chip chip-agent" style="font-size:var(--fs-caption)">${esc(s)}</span>`).join(' ')}</dd>` : ''}
-        <dt>runs total</dt>  <dd>${p.runs_total} · ${p.runs_30d} in 30d</dd>
-        <dt>success</dt>     <dd>${p.success_rate != null ? `${p.success_rate}% (${p.ok_30d}/${p.ok_30d + p.fail_30d})` : 'no verdicts in 30d'}</dd>
-        <dt>last run</dt>    <dd>${p.last_run ? esc(p.last_run.slice(0, 16).replace('T', ' ') + ' · ' + agoStr(p.last_run)) : 'never'}</dd>
-        <dt>savings</dt>     <dd>${esc(savings)} ${esc(realCost)}</dd>
+        <dt>model</dt>        <dd>${model}</dd>
+        <dt>spend</dt>        <dd>${spend} ${budgetChip(row.budget)}</dd>
+        <dt>runs there</dt>   <dd>Claude Code <span class="muted">· host</span> &nbsp;·&nbsp; Codex <span class="abs" title="skills + MCP only — a role does not run there">·</span></dd>
+        <dt>evals</dt>        <dd>${evals}</dd>
+        <dt>stand-downs</dt>  <dd>${standDowns}</dd>
+        <dt>receipt</dt>      <dd>${receipt}</dd>
+        <dt>prompt</dt>       <dd><code style="font-size:var(--fs-caption)">${esc(p.file_path || '')}</code></dd>
       </dl>
       ${p.description ? `<div style="font-size:var(--fs-caption);color:var(--text3);margin-top:8px;line-height:1.5">${esc(p.description)}</div>` : ''}
     </div>
 
     <div class="mp-card">
-      <h4>Recent runs <span style="color:var(--text3);font-weight:normal">(last ${p.recent_runs.length})</span></h4>
+      <h4>Runs <span style="color:var(--text3);font-weight:normal">(last ${p.recent_runs.length} · ${p.runs_30d} in 30d${p.success_rate != null ? ` · ${p.success_rate}% pass` : ''})</span></h4>
       ${p.recent_runs.length ? `
         <ul class="run-list" role="list">
           ${p.recent_runs.map(r => {
             const tone = isSuccessVerdict(r.verdict) ? 'ok' : (isFailureVerdict(r.verdict) ? 'fail' : 'neutral');
             return `<li class="run-row">
-              <span>${esc((r.ts || '').slice(5, 16).replace('T', ' '))}</span>
+              <span class="mono">${esc((r.ts || '').slice(5, 16).replace('T', ' '))}</span>
               <span class="rr-verdict ${tone}">${esc(r.verdict || '—')}</span>
               <span class="rr-raw" title="${esc(r.raw)}">${esc(r.raw)}</span>
-              <span>${r.cost_usd != null ? '$' + r.cost_usd.toFixed(4) : ''}</span>
+              <span class="mono tab">${r.cost_usd != null ? (r.cost_usd > 0 && r.cost_usd < 0.0001 ? '~0' : '$' + r.cost_usd.toFixed(4)) : '<span class="abs" title="this verdict carried no cost">—</span>'}</span>
             </li>`;
           }).join('')}
-        </ul>` : '<div class="cost-empty">No recent runs.</div>'}
+        </ul>` : (p.runs_total > 0 ? '<div class="cost-empty">No run in this window.</div>' : '<div class="cost-empty"><span class="abs" title="no verdict line names this agent — absence of a log is not absence of a run">never observed</span></div>')}
     </div>
 
     <div class="mp-card">
@@ -8360,18 +8805,17 @@ function renderAgentProfile(p) {
             <span class="fm-count">×${f.count}</span>
             <span class="fm-last">${esc(agoStr(f.last_seen))}</span>
           </li>`).join('')}
-        </ul>` : '<div class="cost-empty">No failures clustered in 30d. Quiet agent.</div>'}
+        </ul>` : `<div class="cost-empty">${p.runs_total > 0 ? '— none in 30d' : '<span class="abs" title="never observed — nothing to cluster">· not measured</span>'}</div>`}
     </div>
 
     <div class="mp-card">
       <h4>Actions</h4>
       <div class="agent-actions">
+        <button type="button" title="Copy the line that re-runs this agent" onclick="copyRerun('${esc(p.slug)}')">Copy re-run</button>
+        <button type="button" title="Caps live in the Ledger's budgets table" onclick="switchTab('ledger')">Raise budget…</button>
         ${p.retired
           ? `<button type="button" onclick="restoreAgentAction('${esc(p.slug)}')">Restore agent</button>`
-          : `<button type="button" class="danger" onclick="retireAgentAction('${esc(p.slug)}')">Retire agent</button>`}
-      </div>
-      <div style="font-size:var(--fs-caption);color:var(--text3);margin-top:8px">
-        File: <code>${esc(p.file_path)}</code>
+          : `<button type="button" class="danger" onclick="retireAgentAction('${esc(p.slug)}')">Retire agent…</button>`}
       </div>
     </div>`;
 }
@@ -8444,7 +8888,6 @@ function wireFleetKeyboard() {
     fleetState.search = '';
     const input = document.getElementById('fleet-search');
     if (input) input.value = '';
-    renderFleetFacets();
     renderFleetList();
   });
   // Drawer close button + backdrop click
@@ -8667,21 +9110,11 @@ let _notifHistory = [];
 let _unreadCount = 0;
 let _emailChannelActive = false;  // true when email enabled + verified
 
-function openNotifDrawer() {
-  document.getElementById('notif-drawer').style.right = '0';
-  document.getElementById('notif-drawer-overlay').style.display = 'block';
-  loadNotifHistory();
-}
-function closeNotifDrawer() {
-  document.getElementById('notif-drawer').style.right = '-400px';
-  document.getElementById('notif-drawer-overlay').style.display = 'none';
-}
 async function loadNotifHistory() {
   try {
     const r = await fetch('/api/notif-history');
     if (!r.ok) return;
     _notifHistory = await r.json();
-    renderNotifDrawer();
     const unread = _notifHistory.filter(n => !n.read).length;
     updateNotifBadge(unread);
     renderNotifHistoryInline();
@@ -8690,35 +9123,6 @@ async function loadNotifHistory() {
 function _notifLevelIcon(level) {
   return { info: 'ℹ️', warning: '⚠️', error: '🚨', success: '✅' }[level] || '🔔';
 }
-function renderNotifDrawer() {
-  const list = document.getElementById('notif-drawer-list');
-  const empty = document.getElementById('notif-drawer-empty');
-  if (!list) return;
-  if (!_notifHistory.length) {
-    list.innerHTML = '';
-    if (empty) empty.style.display = 'flex';
-    return;
-  }
-  if (empty) empty.style.display = 'none';
-  list.innerHTML = _notifHistory.map(n => `
-    <div class="notif-item${n.read ? '' : ' unread'}" data-id="${esc(n.id)}"
-      style="padding:12px 16px;border-bottom:1px solid var(--border);
-      ${n.read ? '' : 'background:rgba(59,130,246,0.06);'}">
-      <div style="display:flex;align-items:flex-start;gap:10px">
-        <span style="font-size:var(--fs-title-s);flex-shrink:0;margin-top:1px">${_notifLevelIcon(n.level)}</span>
-        <div style="flex:1;min-width:0">
-          <div style="font-size:var(--fs-body);font-weight:${n.read ? '400' : '600'};color:var(--text);
-            white-space:nowrap;overflow:hidden;text-overflow:ellipsis">${esc(n.title)}</div>
-          <div style="font-size:var(--fs-small);color:var(--text3);margin-top:2px;line-height:1.4">${esc(n.body)}</div>
-          <div style="font-size:var(--fs-caption);color:var(--text3);margin-top:4px;font-family:var(--mono)">
-            ${n.project ? `<span style="color:var(--accent-text);margin-right:6px">${esc(n.project)}</span>` : ''}
-            ${new Date(n.ts).toLocaleString()}
-          </div>
-        </div>
-        ${n.read ? '' : '<span style="width:7px;height:7px;background:var(--dot-unread);border-radius:50%;flex-shrink:0;margin-top:5px"></span>'}
-      </div>
-    </div>`).join('');
-}
 function renderNotifHistoryInline() {
   const el = document.getElementById('notif-history-inline');
   const empty = document.getElementById('notif-history-empty');
@@ -8775,7 +9179,6 @@ async function markAllNotifsRead() {
     await fetch('/api/notif-history/read', { method: 'POST',
       headers: {'Content-Type':'application/json'}, body: '{}' });
     _notifHistory.forEach(n => n.read = true);
-    renderNotifDrawer();
     renderNotifHistoryInline();
     updateNotifBadge(0);
   } catch(e) {}
@@ -8784,7 +9187,6 @@ function prependNotifLive(notif) {
   _notifHistory.unshift(notif);
   if (_notifHistory.length > 100) _notifHistory.length = 100;
   updateNotifBadge(_unreadCount + 1);
-  renderNotifDrawer();
   renderNotifHistoryInline();
 }
 
@@ -8885,29 +9287,5 @@ const _costLbl = document.getElementById('mp-cost-label');
 if (_costLbl) _costLbl.textContent = `Cost · last ${periodLabel(currentPeriod)}`;
 </script>
 
-<!-- ── Notification drawer ──────────────────────────────────────────────── -->
-<div id="notif-drawer" style="position:fixed;top:0;right:-400px;width:380px;height:100vh;
-  background:var(--bg-elevated);border-left:1px solid var(--border);z-index:9999;
-  transition:right .25s cubic-bezier(.4,0,.2,1);display:flex;flex-direction:column;
-  box-shadow: none;border-bottom:1px solid var(--border);
-    display:flex;align-items:center;gap:8px;flex-shrink:0">
-    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"
-      style="width:16px;height:16px;color:var(--text2)">
-      <path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9 M10.3 21a1.94 1.94 0 0 0 3.4 0"/>
-    </svg>
-    <span style="font-weight:600;font-size:var(--fs-base);flex:1;color:var(--text)">Notifications</span>
-    <button class="btn-ghost-sm" onclick="markAllNotifsRead()"
-      style="font-size:var(--fs-small)">Mark all read</button>
-    <button onclick="closeNotifDrawer()" style="background:none;border:none;cursor:pointer;
-      color:var(--text3);font-size:var(--fs-title-l);line-height:1;padding:0 4px;margin-left:4px">&times;</button>
-  </div>
-  <div id="notif-drawer-list" tabindex="0" role="region" aria-label="Notifications list" style="flex:1;overflow-y:auto"></div>
-  <div id="notif-drawer-empty" style="display:flex;flex:1;align-items:center;
-    justify-content:center;flex-direction:column;gap:8px;color:var(--text3);font-size:var(--fs-body)">
-    <span style="font-size:var(--fs-num-l)">🔔</span>No notifications yet
-  </div>
-</div>
-<div id="notif-drawer-overlay" onclick="closeNotifDrawer()"
-  style="display:none;position:fixed;inset:0;z-index:9998;background:rgba(0,0,0,.4)"></div>
 </body>
 </html>