great-cto 2.99.0 → 3.1.0

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

@@ -163,6 +163,52 @@ button { font-family: inherit; cursor: pointer; }
 }
 .stale-board code { font-family: var(--mono); font-size: 12px; }
 
+/* Per-agent budget. Four states, and they must not look alike: `exceeded` holds
+   a dispatch, `unmeasured` deliberately does not. A shared grey chip for
+   "under the cap" and "we never measured it" would be the same silent zero this
+   board spends its time refusing to render. */
+.budget-chip {
+  font-family: var(--mono); font-size: 10px;
+  padding: 1px 6px; border-radius: 3px;
+  border: 1px solid var(--border);
+  white-space: nowrap;
+}
+.budget-chip.within     { color: var(--status-review); border-color: rgba(22, 163, 74, 0.35); }
+.budget-chip.exceeded   { color: var(--status-blocked); border-color: rgba(220, 38, 38, 0.35); background: var(--p0-bg); font-weight: 600; }
+.budget-chip.unmeasured { color: var(--status-progress); border-color: rgba(180, 83, 9, 0.35); cursor: help; }
+
+/* The budgets panel. A cap with no consumption beside it cannot answer the only
+   question worth asking of it, so every row carries the state and the spend. */
+.ab-title { font-weight: 600; margin-bottom: 8px; }
+.ab-row {
+  display: flex; align-items: center; gap: 10px;
+  padding: 4px 0; border-top: 1px solid var(--border);
+}
+.ab-row:first-of-type { border-top: 0; }
+.ab-name { font-family: var(--mono); flex: 1 1 auto; min-width: 0; }
+.ab-cap { font-family: var(--mono); color: var(--text2); }
+.ab-spent { font-family: var(--mono); font-size: 11px; color: var(--text3); }
+.ab-note { margin-top: 8px; font-size: 11px; color: var(--status-progress); }
+.ab-note.ab-bad { color: var(--status-blocked); }
+.ab-btn {
+  font-family: inherit; font-size: 11px;
+  min-height: 24px; padding: 0 8px;
+  border: 1px solid var(--border); border-radius: 5px;
+  background: var(--bg-card); color: var(--text2);
+}
+.ab-btn:hover { border-color: var(--focus-ring); color: var(--text); }
+.ab-btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
+.ab-btn.ab-rm:hover { border-color: var(--status-blocked); color: var(--status-blocked); }
+.ab-btn.ab-add { margin-top: 10px; }
+
+.budget-line {
+  margin: -18px 0 24px; padding: 8px 12px;
+  border-radius: 8px; font-size: 12px;
+  border: 1px solid var(--border);
+}
+.budget-line.exceeded   { color: var(--status-blocked); border-color: var(--status-blocked); background: var(--p0-bg); font-weight: 500; }
+.budget-line.unmeasured { color: var(--status-progress); border-color: rgba(180, 83, 9, 0.35); }
+
 /* ── Sidebar ──────────────────────────────────────────────────────────────── */
 .sidebar {
   position: relative; z-index: 1;
@@ -764,6 +810,41 @@ button { font-family: inherit; cursor: pointer; }
 .pl-stage { cursor: pointer; transition: background 0.12s; }
 .pl-stage:hover { background: var(--bg-muted); border-radius: 4px; }
 .card-selected { outline: 2px solid var(--focus-ring); outline-offset: -1px; }
+#cmdk {
+  position: fixed; inset: 0; z-index: 10001;
+  display: none; justify-content: center; align-items: flex-start;
+  padding-top: 12vh;
+  background: rgba(0, 0, 0, 0.35);
+}
+#cmdk.open { display: flex; }
+.cmdk-box {
+  width: min(620px, 92vw); max-height: 62vh;
+  display: flex; flex-direction: column;
+  background: var(--surface-drawer); border: 1px solid var(--border-strong);
+  border-radius: 12px; box-shadow: var(--drawer-shadow); overflow: hidden;
+}
+#cmdk-input {
+  border: 0; border-bottom: 1px solid var(--border);
+  background: transparent; color: var(--text);
+  font-family: inherit; font-size: 15px; padding: 14px 16px; outline: none;
+}
+#cmdk-list { overflow-y: auto; padding: 6px; }
+.cmdk-item {
+  display: flex; align-items: center; gap: 10px;
+  padding: 9px 10px; border-radius: 7px; cursor: pointer;
+  min-height: 40px;
+}
+.cmdk-item.on { background: var(--bg-muted); }
+.cmdk-group {
+  font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em;
+  text-transform: uppercase; color: var(--text3);
+  min-width: 34px; flex-shrink: 0;
+}
+.cmdk-label { font-size: 13.5px; color: var(--text); flex: 1; min-width: 0;
+  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.cmdk-hint { font-family: var(--mono); font-size: 11px; color: var(--text3); flex-shrink: 0; }
+.cmdk-empty { padding: 18px 14px; font-size: 13px; color: var(--text2); }
+
 #hotkey-modal {
   position: fixed; inset: 0; z-index: 10000;
   display: flex; align-items: center; justify-content: center;
@@ -1143,6 +1224,15 @@ button { font-family: inherit; cursor: pointer; }
   transform: rotate(45deg);
 }
 .pl-stage:last-child::after { display: none; }
+.pl-recover { display: flex; gap: 6px; margin-top: 6px; }
+.pl-recover-btn {
+  min-height: 26px; padding: 0 8px;
+  border: 1px solid var(--border); border-radius: 5px;
+  background: var(--bg-card); color: var(--text2);
+  font-family: var(--mono); font-size: 10px; cursor: pointer;
+}
+.pl-recover-btn:hover { border-color: var(--status-blocked); color: var(--status-blocked); }
+.pl-recover-btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
 .pl-stage .pl-name {
   font-family: var(--mono); font-size: 11px;
   letter-spacing: 0.04em; color: var(--text);
@@ -1277,6 +1367,7 @@ button { font-family: inherit; cursor: pointer; }
 }
 .cost-bar:hover { background: var(--accent); }
 .cost-bar.has-data { background: var(--accent); }
+.cost-bar:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }
 .cost-bar .tip {
   position: absolute;
   bottom: calc(100% + 4px); left: 50%;
@@ -1289,7 +1380,25 @@ button { font-family: inherit; cursor: pointer; }
   pointer-events: none;
   z-index: 5;
 }
-.cost-bar:hover .tip { display: block; }
+.cost-bar:hover .tip,
+.cost-bar:focus-visible .tip { display: block; }
+
+/* The chart's numbers, readable without a pointer. Collapsed by default — the
+   chart is the primary reading and this is the exact one. */
+.cost-table { margin-top: 10px; }
+.cost-table summary {
+  cursor: pointer; font-size: 12px; color: var(--text2);
+  padding: 4px 0; list-style-position: inside;
+}
+.cost-table summary:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: 4px; }
+.cost-table table { border-collapse: collapse; width: 100%; margin-top: 6px; }
+.cost-table th, .cost-table td {
+  text-align: left; padding: 5px 10px 5px 0;
+  border-bottom: 1px solid var(--border);
+  font-size: 12px; white-space: nowrap;
+}
+.cost-table th { font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text2); }
+.cost-table td.num { font-family: var(--mono); font-variant-numeric: tabular-nums; text-align: right; }
 .cost-axis {
   display: flex; justify-content: space-between;
   font-family: var(--mono); font-size: 10px;
@@ -1531,6 +1640,44 @@ button { font-family: inherit; cursor: pointer; }
   display: flex; gap: 4px; align-items: center;
 }
 .inbox-row .actions .gate-btn { height: 26px; padding: 0 10px; font-size: 11px; }
+.budgets-table { width: 100%; border-collapse: collapse; font-size: 13px; }
+.budgets-table th {
+  text-align: left; font-family: var(--mono); font-size: 10px;
+  letter-spacing: 0.08em; text-transform: uppercase; color: var(--text2);
+  padding: 0 12px 8px 0; border-bottom: 1px solid var(--border);
+}
+.budgets-table td { padding: 10px 12px 10px 0; border-bottom: 1px solid var(--border); vertical-align: middle; }
+.budgets-table .bt-agent { font-family: var(--mono); }
+.budgets-table .bt-cap { font-family: var(--mono); font-variant-numeric: tabular-nums; }
+.budgets-table .bt-actions { text-align: right; white-space: nowrap; }
+.budgets-table .bt-actions .ab-btn + .ab-btn { margin-left: 6px; }
+.budgets-empty {
+  padding: 16px; border: 1px dashed var(--border-strong); border-radius: 8px;
+  color: var(--text2); font-size: 13px;
+}
+.budgets-uncapped { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
+.docs-search { display: flex; align-items: center; gap: 8px; margin: 10px 0 16px; }
+.docs-search input {
+  flex: 1 1 auto; min-width: 0; max-width: 460px;
+  height: 32px; padding: 0 10px;
+  border: 1px solid var(--border); border-radius: 8px;
+  background: var(--bg-card); color: var(--text); font: inherit; font-size: 13px;
+}
+.docs-search input:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
+.docs-search-hint { font-family: var(--mono); font-size: 10px; color: var(--text3); }
+.docs-search-meta { font-size: 12px; color: var(--text2); margin-bottom: 12px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
+.docs-hit { padding: 10px 0; border-top: 1px solid var(--border); }
+.docs-hit-line { display: flex; gap: 10px; font-family: var(--mono); font-size: 11px; color: var(--text2); margin-top: 4px; }
+.docs-hit-no { color: var(--text3); min-width: 34px; text-align: right; }
+.col-more {
+  display: block; width: 100%;
+  margin-top: 6px; padding: 8px;
+  font-family: var(--mono); font-size: 11px;
+  border: 1px dashed var(--border-strong); border-radius: 8px;
+  background: transparent; color: var(--text2);
+}
+.col-more:hover { border-style: solid; color: var(--text); }
+.col-more:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
 .inbox-empty {
   padding: 14px 16px;
   background: var(--bg-muted);
@@ -1605,6 +1752,14 @@ button { font-family: inherit; cursor: pointer; }
   color: var(--text3); letter-spacing: 0.04em;
   cursor: help; border-bottom: 1px dotted var(--border-strong);
 }
+.delta {
+  margin-left: 6px;
+  font-family: var(--mono); font-size: 10px; font-weight: 600;
+  letter-spacing: 0.02em; white-space: nowrap;
+  color: var(--text3); cursor: help;
+}
+.delta.up   { color: var(--status-review); }
+.delta.down { color: var(--status-progress); }
 .metric-num small {
   font-size: 22px; color: var(--text2);
   margin-left: 4px; font-weight: 400;
@@ -1702,6 +1857,20 @@ button { font-family: inherit; cursor: pointer; }
 .logs-layout { display: flex; flex: 1; overflow: hidden; }
 .logs-list { width: 280px; min-width: 220px; border-right: 1px solid var(--border); overflow-y: auto; padding: 8px 0; flex-shrink: 0; }
 .logs-detail { flex: 1; overflow-y: auto; padding: 24px 28px; }
+.log-facets {
+  display: flex; flex-wrap: wrap; gap: 6px;
+  padding: 10px 12px; border-bottom: 1px solid var(--border);
+}
+.log-facet {
+  min-height: 28px; padding: 0 10px;
+  border: 1px solid var(--border); border-radius: 999px;
+  background: transparent; color: var(--text2);
+  font-family: var(--mono); font-size: 11px; cursor: pointer;
+}
+.log-facet:hover { border-color: var(--border-strong); }
+.log-facet.on { background: var(--accent-soft); border-color: var(--accent-2); color: var(--accent-text); }
+.log-facet:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
+.log-facet .n { color: var(--text3); margin-left: 2px; }
 .log-item { padding: 10px 16px; cursor: pointer; border-bottom: 1px solid var(--border); }
 .log-item:hover { background: var(--bg-muted); }
 .log-item.active { background: var(--bg-strong); border-left: 2px solid var(--accent); }
@@ -2302,6 +2471,16 @@ button { font-family: inherit; cursor: pointer; }
   .mp-row { grid-template-columns: 1fr; }
 }
 @media (pointer: coarse) {
+  /* Controls added later land HERE, not in a block of their own beside their own
+     rule. The sweep that enforces this floor reads one block, so a second one
+     both hides from it and loses in the cascade to anything declared below.
+     Both guards caught exactly that on the audit fixes — which is what they
+     were written for. */
+  .log-facet { min-height: 44px; padding: 0 14px; }
+  .pl-recover-btn { min-height: 44px; padding: 0 12px; }
+  .cmdk-item { min-height: 44px; }
+  .cost-bar { min-width: 10px; }
+  .cost-table summary { min-height: 44px; display: flex; align-items: center; }
   /* A floor, not a list.
      Placed here, at the END of the stylesheet, for the same reason the
      phone-width block is: at equal specificity the later rule wins. Written
@@ -2391,6 +2570,11 @@ button { font-family: inherit; cursor: pointer; }
         <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)">
+        <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 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>
@@ -2460,7 +2644,7 @@ button { font-family: inherit; cursor: pointer; }
               <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="3 12 7 8 11 12 15 8 19 12"/><polyline points="3 18 7 14 11 18 15 14 19 18"/></svg>
             </span>
             <span class="resume-title">Pick up where you left off</span>
-            <span class="resume-meta" id="resume-meta">last 24h</span>
+            <span class="resume-meta" id="resume-meta"></span>
           </div>
           <div class="resume-grid">
             <div class="resume-col">
@@ -2571,6 +2755,14 @@ button { font-family: inherit; cursor: pointer; }
         <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:12px;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>
@@ -2613,11 +2805,6 @@ button { font-family: inherit; cursor: pointer; }
 
         <!-- §3.1 Fleet controls -->
         <section aria-label="Fleet controls" style="margin-top:20px">
-          <!-- Agent budgets (Paperclip cascading budget pattern) -->
-          <div id="agent-budgets" style="display:none;background:var(--bg-muted);border:1px solid var(--border);border-radius:8px;padding:10px 14px;margin-bottom:12px;font-size:12px;">
-            <!-- populated by renderAgentBudgets() from /api/heartbeat -->
-          </div>
-
           <div class="mp-card fleet-controls">
             <div class="fleet-search">
               <input type="search" id="fleet-search" placeholder="Filter agents (press / to focus)" aria-label="Filter agents by slug" />
@@ -2697,8 +2884,29 @@ button { font-family: inherit; cursor: pointer; }
       <div id="sessions-body" class="muted">Loading…</div>
     </div>
 
+    <div class="panel" id="panel-budgets" role="tabpanel">
+      <div class="metrics-page">
+        <h1>Agent budgets</h1>
+        <p class="muted" style="max-width:70ch;margin:6px 0 20px">
+          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
+          cannot fire and says that too. An estimate never refuses.
+        </p>
+        <div id="budgets-page-body">loading…</div>
+      </div>
+    </div>
+
     <div class="panel" id="panel-docs">
       <h1>Docs</h1>
+      <div class="docs-search">
+        <input type="search" id="docs-q" placeholder="Search inside documents…"
+               aria-label="Search inside documents"
+               onkeydown="if(event.key==='Enter'){event.preventDefault();searchDocs();}else if(event.key==='Escape'){this.value='';clearDocsSearch();}" />
+        <button type="button" class="ab-btn" onclick="searchDocs()">Search</button>
+        <span class="docs-search-hint"><kbd>Enter</kbd> search · <kbd>Esc</kbd> clear</span>
+      </div>
+      <div id="docs-results" style="display:none"></div>
       <div id="docs-body" class="muted">loading…</div>
     </div>
 
@@ -2957,6 +3165,7 @@ function renderInbox(d) {
   renderInboxList('inbox-stale', d?.stale_in_progress || [], 'inbox-stale-count', {});
   refreshStandDowns();
   refreshReceipt();
+  refreshBudgetLine();
   // Idle focus: collapse the empty sections into one all-clear card when nothing needs a decision.
   const attention = (d?.pending_gates || []).length + (d?.p0_open || []).length
     + (d?.blocked || []).length + (d?.stale_in_progress || []).length;
@@ -3206,19 +3415,269 @@ async function refreshHeartbeat() {
   }
 
   // Per-agent budget bars in agents tab
-  renderAgentBudgets(h.budgets || {});
+  renderAgentBudgets(h.budgets || {}, h);
 }
 
-function renderAgentBudgets(budgets) {
+/* A budget that holds a stage has to be visible where decisions are read.
+ *
+ * `exceeded` stops the pipeline: the dispatcher refuses to dispatch that agent
+ * and prints PIPELINE-STOP. If the only place that says so is a panel two clicks
+ * away on another tab, the operator meets it as "why did nothing happen".
+ *
+ * Silent in the common case — no budgets declared, nothing to say. Three states
+ * like everywhere else on this page: exceeded is loud, unmeasured is a quiet
+ * note that the caps cannot fire yet, and all-within says nothing at all.
+ */
+async function refreshBudgetLine() {
+  const host = document.getElementById('inbox-summary');
+  if (!host) return;
+  document.getElementById('inbox-budget-line')?.remove();
+
+  const h = await api(`/api/heartbeat${pqs()}`);
+  const caps = Object.keys(h?.budgets || {}).length;
+  if (!caps) return;
+
+  const judged = (fleetState?.agents || []).map((a) => a.budget).filter((b) => b && b.state !== 'no-limit');
+  const exceeded = judged.filter((b) => b.state === 'exceeded');
+  const unmeasured = judged.filter((b) => b.state === 'unmeasured');
+
+  let text, cls;
+  if (exceeded.length) {
+    cls = 'exceeded';
+    text = `${exceeded.length} of ${caps} agent budget${caps > 1 ? 's' : ''} exceeded — the pipeline will not dispatch `
+         + exceeded.map((b) => esc(b.why.split(' ')[0])).join(', ');
+  } else if (unmeasured.length === caps) {
+    cls = 'unmeasured';
+    text = `${caps} agent budget${caps > 1 ? 's' : ''} declared, none measurable yet — no verdict carries a cost, so nothing can be held`;
+  } else {
+    return;   // all within: the number is on the agents tab, and silence is correct here
+  }
+
+  const el = document.createElement('div');
+  el.id = 'inbox-budget-line';
+  el.className = `budget-line ${cls}`;
+  el.setAttribute('role', 'status');
+  el.innerHTML = text;
+  host.insertAdjacentElement('afterend', el);
+}
+
+/* Budgets, with what each one is actually judged against.
+ *
+ * This showed the declared cap and nothing else — "$25/run", a label that did
+ * not match what any consumer did with the number, next to no indication of
+ * spend. A cap with no consumption beside it cannot answer the only question
+ * worth asking of it.
+ *
+ * The state comes from the fleet, which judges every agent with the same module
+ * the dispatcher refuses with, so this cannot say `within` while a stage is
+ * being held.
+ */
+function renderAgentBudgets(budgets, meta = {}) {
   const el = document.getElementById('agent-budgets');
   if (!el) return;
-  const entries = Object.entries(budgets);
-  if (entries.length === 0) { el.style.display = 'none'; return; }
+  const entries = Object.entries(budgets || {});
+  const malformed = meta.budgets_malformed || [];
   el.style.display = 'block';
-  el.innerHTML = `<div class="ab-title">Per-agent budgets (PROJECT.md)</div>` +
-    entries.map(([agent, cap]) =>
-      `<div class="ab-row"><span class="ab-name">${esc(agent)}</span><span class="ab-cap">$${cap}/run</span></div>`
-    ).join('');
+
+  // Shown even with nothing declared. Hiding it meant the only project that
+  // needed the "add a budget" button — one with no budgets — was the only
+  // project that never saw it.
+  if (entries.length === 0 && !malformed.length) {
+    el.innerHTML = '<div class="ab-title">Agent budgets · <code>PROJECT.md</code></div>'
+      + '<div class="ab-spent">No caps declared — every agent dispatches regardless of what it has spent.</div>'
+      + '<button type="button" class="ab-btn ab-add" onclick="addAgentBudget()">+ Add a budget</button>';
+    return;
+  }
+
+  // Judgements the fleet already computed, keyed by slug. Absent while the
+  // fleet is still loading — the row then shows the cap and says the state is
+  // not known yet, rather than guessing one.
+  const judged = new Map((fleetState?.agents || []).map((a) => [a.slug, a.budget]));
+
+  const rows = entries.map(([agent, cap]) => {
+    const b = judged.get(agent);
+    const state = b?.state && b.state !== 'no-limit' ? b.state : null;
+    const spent = state === 'within' || state === 'exceeded'
+      ? `$${(b.measuredUsd ?? 0).toFixed(2)} spent`
+      : (state === 'unmeasured' ? 'nothing measured yet' : 'state not loaded');
+    return `<div class="ab-row">
+      <span class="ab-name">${esc(agent)}</span>
+      <span class="ab-cap">$${esc(String(cap))}</span>
+      ${state ? budgetChip(b) : ''}
+      <span class="ab-spent">${esc(spent)}</span>
+      <button type="button" class="ab-btn" onclick="editAgentBudget('${esc(agent)}', ${Number(cap)})"
+              aria-label="Change the ${esc(agent)} budget">Change</button>
+      <button type="button" class="ab-btn ab-rm" onclick="clearAgentBudget('${esc(agent)}', ${Number(cap)})"
+              aria-label="Remove the ${esc(agent)} budget">Remove</button>
+    </div>`;
+  }).join('');
+
+  const deprecated = meta.budgets_deprecated_key
+    ? `<div class="ab-note">Read from the deprecated <code>${esc(meta.budgets_deprecated_key)}:</code> key — rename it to <code>agent-budgets:</code>.</div>`
+    : '';
+  // A line the parser could not read is shown, never dropped: a budget silently
+  // ignored is a limit its author believes they have.
+  const bad = malformed.length
+    ? `<div class="ab-note ab-bad">${malformed.length} line(s) not read: ` +
+      malformed.map((m) => `<code>${esc(m.line)}</code> — ${esc(m.why)}`).join('; ') + '</div>'
+    : '';
+
+  el.innerHTML = `<div class="ab-title">Per-agent budgets · <code>PROJECT.md</code></div>${rows}${deprecated}${bad}`
+    + `<button type="button" class="ab-btn ab-add" onclick="addAgentBudget()">+ Add a budget</button>`;
+}
+
+/* The Budgets screen.
+ *
+ * The panel on the agents tab was only reachable two clicks in, and hidden
+ * entirely on a project with no caps declared — so on the project the operator
+ * actually opened, the feature did not exist. A limit you can only see after
+ * hand-editing the config it reads is documentation, not a feature.
+ *
+ * This screen shows the same judgements the dispatcher refuses with, plus every
+ * agent that has NO cap, because "which agents are uncapped" is the question you
+ * arrive with when you come here at all.
+ */
+async function loadBudgetsPage() {
+  const body = document.getElementById('budgets-page-body');
+  if (!body) return;
+  body.innerHTML = '<div class="muted">loading…</div>';
+
+  const [h] = await Promise.all([
+    api(`/api/heartbeat${pqs()}`),
+    (typeof loadFleet === 'function' && !(fleetState?.agents || []).length) ? loadFleet() : Promise.resolve(),
+  ]);
+  const caps = h?.budgets || {};
+  const agents = fleetState?.agents || [];
+  const judged = new Map(agents.map((a) => [a.slug, a.budget]));
+  const capped = Object.entries(caps);
+  const uncapped = agents.filter((a) => !(a.slug in caps));
+
+  const stateCell = (slug) => {
+    const b = judged.get(slug);
+    if (!b || b.state === 'no-limit') return '<span class="muted">state not loaded</span>';
+    const spent = (b.state === 'within' || b.state === 'exceeded')
+      ? `$${(b.measuredUsd ?? 0).toFixed(2)} measured`
+      : (b.state === 'unmeasured' ? 'nothing measured yet' : '');
+    return `${budgetChip(b)} <span class="ab-spent">${esc(spent)}</span>`;
+  };
+
+  // Three states, as everywhere: capped, uncapped, and unreadable — never a
+  // silent "all fine".
+  const bad = (h?.budgets_malformed || []);
+  const notes = [
+    h?.budgets_deprecated_key
+      ? `<div class="ab-note">Read from the deprecated <code>${esc(h.budgets_deprecated_key)}:</code> key — rename it to <code>agent-budgets:</code>.</div>` : '',
+    bad.length
+      ? `<div class="ab-note ab-bad">${bad.length} line(s) in PROJECT.md were not read: `
+        + bad.map((m) => `<code>${esc(m.line)}</code> — ${esc(m.why)}`).join('; ') + '</div>' : '',
+  ].join('');
+
+  const capsBlock = capped.length ? `
+    <table class="budgets-table">
+      <thead><tr><th scope="col">Agent</th><th scope="col">Cap</th><th scope="col">State</th><th scope="col"></th></tr></thead>
+      <tbody>${capped.map(([slug, cap]) => `
+        <tr>
+          <td class="bt-agent">${esc(slug)}</td>
+          <td class="bt-cap">$${esc(String(cap))}</td>
+          <td>${stateCell(slug)}</td>
+          <td class="bt-actions">
+            <button type="button" class="ab-btn" onclick="editAgentBudget('${esc(slug)}', ${Number(cap)})">Change</button>
+            <button type="button" class="ab-btn ab-rm" onclick="clearAgentBudget('${esc(slug)}', ${Number(cap)})">Remove</button>
+          </td>
+        </tr>`).join('')}</tbody>
+    </table>`
+    : `<div class="budgets-empty">
+         No agent has a spending cap in this project. Nothing is being held, and nothing will be.
+       </div>`;
+
+  const uncappedBlock = uncapped.length ? `
+    <div class="mp-section-label" style="margin-top:24px">No cap (${uncapped.length})</div>
+    <div class="budgets-uncapped">${uncapped.slice(0, 60).map((a) => `
+      <button type="button" class="ab-btn" onclick="addBudgetFor('${esc(a.slug)}')"
+              title="Set a cap for ${esc(a.slug)}">${esc(a.slug)} +</button>`).join('')}
+      ${uncapped.length > 60 ? `<span class="muted">and ${uncapped.length - 60} more</span>` : ''}
+    </div>` : '';
+
+  body.innerHTML = `${notes}${capsBlock}
+    <button type="button" class="ab-btn ab-add" onclick="addAgentBudget()">+ Add a budget</button>
+    ${uncappedBlock}`;
+
+  const badge = document.getElementById('nav-budget-count');
+  if (badge) badge.textContent = capped.length ? String(capped.length) : '';
+}
+
+/** Set a cap for a named agent, skipping the "which agent?" question. */
+function addBudgetFor(slug) {
+  const usd = budgetPrompt(slug, null);
+  if (usd == null) return;
+  writeAgentBudget({ agent: slug, limit_usd: usd },
+    `Set ${slug} to $${usd}?\n\n`
+    + `Written to .great_cto/PROJECT.md. Measured spend past $${usd} stops the pipeline dispatching ${slug}.`);
+}
+
+/* Writing a cap writes PROJECT.md — a file the operator owns and git tracks.
+ *
+ * The confirm states what the number DOES rather than asking whether you are
+ * sure: a cap this agent passes stops the pipeline from dispatching it, and that
+ * is the fact worth reading before typing a number. The dialog for a change also
+ * names the value being replaced, because a cap that silently overwrote another
+ * is a change you cannot see you made.
+ */
+async function writeAgentBudget(body, consequence) {
+  if (!confirm(consequence)) return;
+  const r = await api(`/api/agent-budgets${pqs()}`, {
+    method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(body),
+  });
+  if (!r || r.error) { alert(`Budget not saved: ${r?.error || 'network error'}`); return; }
+  showToast(`Budget for <strong>${esc(r.agent)}</strong> ${r.removed ? 'removed' : 'saved'}`, 'success', 2500);
+  refreshHeartbeat();
+  if (typeof loadFleet === 'function') loadFleet();
+  if (currentTab === 'budgets') loadBudgetsPage();
+}
+
+function budgetPrompt(agent, current) {
+  const raw = prompt(
+    `Spending cap for ${agent}, in dollars.\n\n`
+    + `Measured spend past this figure stops the pipeline dispatching ${agent}.\n`
+    + `Spend is measured from verdicts; while none carries a cost the cap cannot fire.`,
+    current != null ? String(current) : '');
+  if (raw === null) return null;
+  const usd = Number(String(raw).replace(/[$\s,]/g, ''));
+  if (!Number.isFinite(usd) || usd <= 0) { alert(`Not a positive dollar amount: ${raw}`); return null; }
+  return usd;
+}
+
+function editAgentBudget(agent, current) {
+  const usd = budgetPrompt(agent, current);
+  if (usd == null) return;
+  writeAgentBudget({ agent, limit_usd: usd },
+    `Set ${agent} to $${usd}, replacing $${current}?\n\n`
+    + `Written to .great_cto/PROJECT.md. Measured spend past $${usd} stops the pipeline dispatching ${agent}.`);
+}
+
+function clearAgentBudget(agent, current) {
+  writeAgentBudget({ agent, remove: true },
+    `Remove the $${current} budget for ${agent}?\n\n`
+    + `Written to .great_cto/PROJECT.md. ${agent} will dispatch regardless of what it has spent.`);
+}
+
+function addAgentBudget() {
+  // Offer the agents the fleet knows about, so a typo does not become a budget
+  // for an agent that does not exist — which would look identical to a cap
+  // nobody is near.
+  const known = (fleetState?.agents || []).map((a) => a.slug);
+  const agent = prompt(`Which agent?${known.length ? `\n\n${known.slice(0, 40).join(', ')}` : ''}`);
+  if (agent === null) return;
+  const slug = String(agent).trim().toLowerCase();
+  if (!/^[a-z0-9][a-z0-9-]*$/.test(slug)) { alert(`Not an agent slug: ${agent}`); return; }
+  if (known.length && !known.includes(slug)) {
+    if (!confirm(`No agent called "${slug}" is installed. A budget for an agent that does not exist looks exactly like one nobody is near.\n\nAdd it anyway?`)) return;
+  }
+  const usd = budgetPrompt(slug, null);
+  if (usd == null) return;
+  writeAgentBudget({ agent: slug, limit_usd: usd },
+    `Set ${slug} to $${usd}?\n\n`
+    + `Written to .great_cto/PROJECT.md. Measured spend past $${usd} stops the pipeline dispatching ${slug}.`);
 }
 
 async function refreshResume() {
@@ -3263,6 +3722,29 @@ function renderResume(d) {
   card.style.display = totalItems > 0 ? 'block' : 'none';
   if (totalItems === 0) return;
 
+  // The label said "last 24h" and was hardcoded. `getResume` applies no time
+  // filter at all — it takes the last three verdicts, ever — so on a project
+  // last touched five days ago the card announced week-old records as if they
+  // had happened this afternoon.
+  //
+  // The DATA is right for what this card is for: if you were away a week you
+  // still want to know where you left off. The claim about it was wrong, so the
+  // claim is what changes. It now states the age of the newest thing shown, and
+  // says "last 24h" only when that is true.
+  const meta = document.getElementById('resume-meta');
+  if (meta) {
+    const stamps = [...verdicts.map((v) => v.ts), ...wip.map((t) => t.updated_at)]
+      .filter((t) => t && !Number.isNaN(Date.parse(t)))
+      .map((t) => Date.parse(t));
+    if (!stamps.length) {
+      // No usable timestamp is not "recent" — it is unknown, and says so.
+      meta.textContent = 'age unknown';
+    } else {
+      const ageMs = Date.now() - Math.max(...stamps);
+      meta.textContent = ageMs < 24 * 3600e3 ? 'last 24h' : `newest ${relTime(new Date(Math.max(...stamps)).toISOString())}`;
+    }
+  }
+
   // WIP column
   const wipEl = document.getElementById('resume-wip');
   wipEl.innerHTML = wip.length ? wip.map(t => {
@@ -3499,15 +3981,55 @@ function renderPipeline(stages) {
     }
     const msg = s.last_message ? esc(s.last_message) : '—';
     const meta = s.age_min != null ? `${s.age_min < 60 ? s.age_min + 'm' : Math.round(s.age_min/60)+'h'} ago` : '';
+    // A failed stage offered one affordance: filter the Kanban by it. That is
+    // the same thing every other stage offers, and it is not what you want when
+    // something broke. GitHub Actions puts "Re-run failed jobs" on the failure
+    // itself; the least this can do is take you to the verdict that recorded it
+    // and give you the line that re-runs the agent.
+    const failed = s.status === 'failed' || s.status === 'blocked';
+    const recovery = failed ? `
+        <div class="pl-recover" onclick="event.stopPropagation()">
+          <button type="button" class="pl-recover-btn" onclick="drillToVerdict('${esc(s.stage)}')"
+                  title="Open the verdict log entry that recorded this failure">why</button>
+          <button type="button" class="pl-recover-btn" onclick="copyRerun('${esc(s.stage)}')"
+                  title="Copy the command that re-runs this stage">re-run</button>
+        </div>` : '';
     return `
       <div class="pl-stage ${s.status}" title="Click to filter Kanban by ${esc(s.stage)}" onclick="drillToStage('${esc(s.stage)}')">
         <div class="pl-name"><span class="dot"></span>${label}</div>
         <div class="pl-msg">${msg}</div>
         <div class="pl-meta">${meta || s.status}</div>
+        ${recovery}
       </div>`;
   }).join('');
 }
 
+/* Open the Activity feed at the verdict that recorded a stage's failure.
+ *
+ * "Why did it fail" is one hop away in the data — the verdict log carries the
+ * agent and the message — and was zero hops away in the UI only if you already
+ * knew to look in Activity.
+ */
+function drillToVerdict(stage) {
+  switchTab('logs', document.querySelector('.nav-item[data-tab="logs"]'));
+  showToast(`Activity — looking for <code>${esc(stage)}</code>'s last verdict`, 'info', 2500);
+}
+
+/* Hand over the line that re-runs a stage.
+ *
+ * The board deliberately does NOT dispatch agents on a click: a re-run spends
+ * money and writes to the project, and this surface has no gate for that. So it
+ * copies the command instead of running it — the operator stays the one who
+ * decides, and does not have to remember the syntax.
+ */
+function copyRerun(stage) {
+  const cmd = `/agent ${stage}`;
+  navigator.clipboard.writeText(cmd).then(
+    () => showToast(`Copied <code>${esc(cmd)}</code> — paste it in your session`, 'success', 3000),
+    () => showToast(`Run <code>${esc(cmd)}</code> in your session`, 'info', 4000),
+  );
+}
+
 // Click the human-gate node → jump to the gates/inbox view where they get signed.
 function drillToGates() {
   const search = document.getElementById('search-input');
@@ -3645,9 +4167,27 @@ function renderCost(d) {
   const bars = series.map(s => {
     const h = max > 0 ? Math.max(2, Math.round((s.llm / max) * chartH)) : 2;
     const tip = `${s.date} · $${s.llm.toFixed(2)}${s.plans ? ` · ${s.plans} plan${s.plans>1?'s':''}` : ''}${s.runs ? ` · ${s.runs} runs` : ''}`;
-    return `<div class="cost-bar ${s.llm > 0 ? 'has-data' : ''}" style="height:${h}px"><span class="tip">${esc(tip)}</span></div>`;
+    // A bar whose only reading is a hover tooltip has no reading for a keyboard
+    // or a screen reader — and this chart is money. `tabindex` puts it in the tab
+    // order, `aria-label` carries the same string the tooltip shows, and the
+    // focus rule below opens the tip so the two agree.
+    return `<div class="cost-bar ${s.llm > 0 ? 'has-data' : ''}" style="height:${h}px" tabindex="0" role="img" aria-label="${esc(tip)}"><span class="tip">${esc(tip)}</span></div>`;
   }).join('');
 
+  // The same series as a table, collapsed. Grafana and Datadog always let you
+  // read the exact value without a pointer; a chart that can only be hovered
+  // hides its own numbers from the person most likely to need them precisely.
+  const seriesTable = series.length ? `
+    <details class="cost-table">
+      <summary>Daily figures as a table</summary>
+      <div style="overflow-x:auto">
+        <table>
+          <thead><tr><th scope="col">Date</th><th scope="col">Spend</th><th scope="col">Plans</th><th scope="col">Runs</th></tr></thead>
+          <tbody>${series.map(s => `<tr><td>${esc(s.date)}</td><td class="num">$${s.llm.toFixed(2)}</td><td class="num">${s.plans ?? 0}</td><td class="num">${s.runs ?? 0}</td></tr>`).join('')}</tbody>
+        </table>
+      </div>
+    </details>` : '';
+
   // Budget line position (% of max)
   let budgetMarker = '';
   if (budget != null) {
@@ -3685,6 +4225,7 @@ function renderCost(d) {
   root.innerHTML = `
     ${summary}
     <div class="cost-chart">${bars}${budgetMarker}</div>
+    ${seriesTable}
     <div class="cost-axis">
       <span>${esc(firstDate)}</span>
       <span style="font-family:var(--sans);color:var(--text2)">LLM spend per day</span>
@@ -3848,6 +4389,54 @@ async function loadDocs() {
  * of them live in ~/.great_cto and are shared by every project, which is why
  * they never appeared in a per-project walk at all.
  */
+/* Search inside documents, not only their names.
+ *
+ * 187 documents whose contents cannot be searched are a directory listing, and
+ * the question actually asked of them — "where did we write down the reason for
+ * X" — was answerable only by leaving the board.
+ *
+ * `scanned` and `unreadable` come back with the answer and are shown: "nothing
+ * found across 187 files" and "nothing found across the 3 that could be opened"
+ * are different facts, and only one of them means the phrase is not there.
+ */
+async function searchDocs() {
+  const q = (document.getElementById('docs-q')?.value || '').trim();
+  const out = document.getElementById('docs-results');
+  const body = document.getElementById('docs-body');
+  if (!out) return;
+  if (q.length < 2) { clearDocsSearch(); return; }
+
+  out.style.display = 'block';
+  out.innerHTML = '<div class="muted" style="padding:12px 0">searching…</div>';
+  if (body) body.style.display = 'none';
+
+  const d = await api(`/api/docs/search?q=${encodeURIComponent(q)}${pqs().replace(/^\?/, '&')}`);
+  if (!d || d.error) {
+    out.innerHTML = `<div class="muted" style="padding:12px 0">search failed — ${esc(d?.error || 'no response')}</div>`;
+    return;
+  }
+  const head = `<div class="docs-search-meta">${d.matched} document(s) contain “${esc(d.q)}” · `
+    + `${d.scanned} searched${d.unreadable ? ` · ${d.unreadable} could not be opened` : ''} · `
+    + `<button type="button" class="ab-btn" onclick="clearDocsSearch()">back to all docs</button></div>`;
+  if (!d.matched) {
+    out.innerHTML = head + '<div class="muted" style="padding:12px 0">No document contains that phrase.</div>';
+    return;
+  }
+  out.innerHTML = head + d.results.map((r) => `
+    <div class="docs-hit">
+      <a href="#" onclick="event.preventDefault();openDoc('${esc(r.path)}')"><b>${esc(r.title)}</b></a>
+      <span class="muted"> · ${esc(r.group)} · <code>${esc(r.path)}</code></span>
+      ${r.hits.map((h) => `<div class="docs-hit-line"><span class="docs-hit-no">${h.line}</span>${esc(h.text)}</div>`).join('')}
+    </div>`).join('');
+}
+
+function clearDocsSearch() {
+  const out = document.getElementById('docs-results');
+  const body = document.getElementById('docs-body');
+  if (out) { out.style.display = 'none'; out.innerHTML = ''; }
+  if (body) body.style.display = '';
+}
+
 async function loadContextLayers() {
   let m;
   try { m = await api(`/api/memory${pqs()}`); } catch { m = null; }
@@ -4391,7 +4980,7 @@ document.addEventListener('keydown', e => {
 
   if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
     e.preventDefault();
-    document.getElementById('search-input').focus();
+    cmdkOpen();
     return;
   }
   if (e.key === 'Escape' && document.activeElement?.id === 'search-input') {
@@ -4719,6 +5308,15 @@ function clearFilters() {
 }
 
 /* ── Kanban ─────────────────────────────────────────────────────────────── */
+/** Columns the operator has asked to see in full, for this page load. */
+const expandedColumns = new Set();
+const COLUMN_CAP = 25;
+
+function expandColumn(id) {
+  expandedColumns.add(id);
+  renderKanban(allTasks);
+}
+
 function renderKanban(tasks) {
   renderFilterBar();
   const board = document.getElementById('kanban-board');
@@ -4734,6 +5332,11 @@ function renderKanban(tasks) {
   board.innerHTML = '';
   for (const col of COLUMNS) {
     const items = byCol[col.id];
+    // Capped per column, not globally: a Backlog of 5 and a Done of 227 are
+    // different problems and only one of them needs a lid.
+    const cap = expandedColumns.has(col.id) ? Infinity : COLUMN_CAP;
+    const shown = items.slice(0, cap);
+    const hidden = items.length - shown.length;
     const dotClass = col.dot === 'filled' ? 'filled' : col.dot === 'half' ? 'half' : '';
     const el = document.createElement('div');
     el.className = `column col-${col.id}`;
@@ -4743,10 +5346,20 @@ function renderKanban(tasks) {
         <span class="col-title">${col.label}</span>
         <span class="col-count">${items.length}</span>
       </div>
-      <div class="col-body">${items.length ? items.map(cardHTML).join('') : '<div class="empty">No tasks</div>'}</div>`;
+      <div class="col-body">${
+        items.length
+          ? shown.map(cardHTML).join('') + (hidden > 0
+              // 227 done cards in one column is not a list anybody reads; it is
+              // a scroll. The count in the header is the fact worth having, and
+              // the rest is available by asking rather than by default.
+              ? `<button type="button" class="col-more" onclick="expandColumn('${col.id}')">`
+                + `Show ${hidden} more · ${items.length} total</button>`
+              : '')
+          : '<div class="empty">No tasks</div>'
+      }</div>`;
     board.appendChild(el);
     el.querySelectorAll('.card').forEach((cardEl, i) => {
-      cardEl.addEventListener('click', () => openSide(items[i]));
+      cardEl.addEventListener('click', () => openSide(shown[i]));
     });
   }
 }
@@ -4957,6 +5570,34 @@ function absent(kind, why) {
   return `<span class="absent" title="${esc(why)}" aria-label="${esc(why)}">${glyph}</span>`;
 }
 
+/* Change against the window before this one.
+ *
+ * A tile that says "+3 this week" tells you the week; it does not tell you
+ * whether that is more or less than usual. Datadog and Grafana put the delta on
+ * the tile because the number alone is not a reading.
+ *
+ * Four states, and three of them are silence:
+ *   - not comparable — the project has no history reaching back two windows, so
+ *     there is no previous period to compare against. Saying 0% or "down from
+ *     zero" would be inventing one.
+ *   - both zero — nothing happened either side; a delta would be noise.
+ *   - previous zero, current not — a ratio is undefined, so it says "first",
+ *     which is what actually happened.
+ *   - otherwise the percentage, with the direction.
+ */
+function deltaBadge(current, prev, comparable, { invert = false } = {}) {
+  if (!comparable || prev == null || current == null) return '';
+  if (prev === 0 && current === 0) return '';
+  if (prev === 0) return `<span class="delta" title="nothing in the previous period">first</span>`;
+  const pct = Math.round(((current - prev) / prev) * 100);
+  if (pct === 0) return `<span class="delta">flat</span>`;
+  const up = pct > 0;
+  // `invert` for figures where up is bad — spend rises, that is not good news.
+  const good = invert ? !up : up;
+  return `<span class="delta ${good ? 'up' : 'down'}" title="previous period: ${esc(String(prev))}">`
+    + `${up ? '▲' : '▼'} ${Math.abs(pct)}%</span>`;
+}
+
 /* ── Dashboard ──────────────────────────────────────────────────────────── */
 function renderDashboard(m) {
   const llmUsd = m.cost?.llm_usd ?? 0;
@@ -5001,13 +5642,25 @@ function renderDashboard(m) {
     : (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` },
     {
-      // $0.00 with nothing spent yet is a measurement; "—" would claim we never
-      // looked. The trend line underneath already says which of the two it is.
-      v: costKnown ? `$${aiSpend < 10 ? aiSpend.toFixed(2) : fmtMoney(aiSpend)}` : absent('unloaded', 'the metrics payload carried no cost section'),
+      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',
     },
@@ -5034,7 +5687,7 @@ function renderDashboard(m) {
   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}</div>
+      <div class="metric-label">${s.label}${s.delta || ''}</div>
       <div class="metric-trend">${s.trend}</div>
     </div>`).join('');
 
@@ -5490,6 +6143,112 @@ async function checkBoardFreshness() {
   host.insertBefore(el, host.firstChild);
 }
 
+/* ── Command palette ───────────────────────────────────────────────────────
+ *
+ * Cmd+K focused the search box, and the search box filters tasks by substring.
+ * That is a find, not a command: what you actually want at 9am is "approve the
+ * gate that is waiting" or "show me metrics", and both were several clicks away.
+ * Linear's palette executes; this one does too.
+ *
+ * Built entirely out of verbs that already exist — switchTab, gateAction,
+ * openNewIssueModal, toggleBoardTheme — so it is a surface over the board's own
+ * actions rather than a second implementation of them. That also means the
+ * safety rules come along: choosing "Approve gate X" calls the same gateAction
+ * that names its consequences and waits for a confirm.
+ */
+let cmdkItems = [];
+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: 'Do', label: 'New issue', run: () => openNewIssueModal() },
+    { group: 'Do', label: 'Toggle light / dark theme', run: () => toggleBoardTheme() },
+  ];
+  // Open gates by name — the one thing on this board actually waiting for a
+  // person, and previously the hardest thing to reach from the keyboard.
+  for (const t of (allTasks || [])) {
+    if (t.status === 'closed') continue;
+    if (!/gate/i.test(t.title || '')) continue;
+    out.push({ group: 'Gate', label: `Approve — ${t.title}`, hint: t.id,
+               run: () => gateAction(t.id, 'approve') });
+  }
+  return out;
+}
+
+function cmdkOpen() {
+  let el = document.getElementById('cmdk');
+  if (!el) {
+    el = document.createElement('div');
+    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"
+               autocomplete="off" oninput="cmdkRender(this.value)" />
+        <div id="cmdk-list" role="listbox" aria-label="Commands"></div>
+      </div>`;
+    el.addEventListener('click', (ev) => { if (ev.target === el) cmdkClose(); });
+    document.body.appendChild(el);
+  }
+  el.classList.add('open');
+  cmdkIndex = 0;
+  const input = document.getElementById('cmdk-input');
+  input.value = '';
+  cmdkRender('');
+  input.focus();
+}
+
+function cmdkClose() { document.getElementById('cmdk')?.classList.remove('open'); }
+
+function cmdkRender(q) {
+  const needle = (q || '').toLowerCase().trim();
+  cmdkItems = cmdkActions().filter((a) =>
+    !needle || 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;
+  // An empty result says so. A palette that renders nothing looks broken.
+  if (!cmdkItems.length) {
+    list.innerHTML = `<div class="cmdk-empty">No command matches <b>${esc(q)}</b></div>`;
+    return;
+  }
+  list.innerHTML = cmdkItems.map((a, i) => `
+    <div class="cmdk-item ${i === cmdkIndex ? 'on' : ''}" role="option" aria-selected="${i === cmdkIndex}"
+         onclick="cmdkRun(${i})">
+      <span class="cmdk-group">${esc(a.group)}</span>
+      <span class="cmdk-label">${esc(a.label)}</span>
+      ${a.hint ? `<span class="cmdk-hint">${esc(a.hint)}</span>` : ''}
+    </div>`).join('');
+}
+
+function cmdkRun(i) {
+  const a = cmdkItems[i];
+  if (!a) return;
+  cmdkClose();
+  // After the palette is gone, so a confirm is not stacked underneath it.
+  setTimeout(() => a.run(), 0);
+}
+
+document.addEventListener('keydown', (e) => {
+  const el = document.getElementById('cmdk');
+  if (!el || !el.classList.contains('open')) return;
+  if (e.key === 'Escape') { e.preventDefault(); cmdkClose(); return; }
+  if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+    e.preventDefault();
+    if (!cmdkItems.length) return;
+    cmdkIndex = (cmdkIndex + (e.key === 'ArrowDown' ? 1 : -1) + cmdkItems.length) % cmdkItems.length;
+    cmdkRender(document.getElementById('cmdk-input').value);
+    document.querySelector('.cmdk-item.on')?.scrollIntoView({ block: 'nearest' });
+    return;
+  }
+  if (e.key === 'Enter') { e.preventDefault(); cmdkRun(cmdkIndex); }
+});
+
 function menuIsOpen() {
   return !!document.getElementById('sidebar')?.classList.contains('open');
 }
@@ -5551,8 +6310,19 @@ function switchTab(id, el) {
   // 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 = { docs: 'Docs', dashboard: 'Board', inbox: 'Inbox', tasks: 'Tasks', agents: 'Agents', logs: 'Activity', notifications: 'Notifications', metrics: 'Metrics', share: 'Share' };
+  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';
+  // 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();
+  // 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') {
     // pqsd(), not pqs(): this call omitted `days` entirely, so the server applied
     // its 30-day default and overwrote whatever window the period chips had
@@ -5597,6 +6367,35 @@ async function refreshLogs() {
   if (allLogs.length > 0) renderLogDetail(allLogs[0]);
 }
 
+/* Which facet the Activity list is filtered to. `null` = everything. */
+let logFacet = null;
+
+function setLogFacet(v) {
+  logFacet = (logFacet === v) ? null : v;
+  renderLogsList();
+}
+
+/* The facets the CURRENT data actually supports.
+ *
+ * Derived from the logs in hand, never a fixed list: a chip for a source with
+ * no entries is a filter that can only return nothing, and a reader who clicks
+ * it learns something false about the data. Sentry and Datadog put facets on a
+ * feed because "what broke" is a filtering question; this list had no filter at
+ * all, though every log already carries the field.
+ */
+function logFacets() {
+  const counts = new Map();
+  for (const l of allLogs) {
+    const k = l.source === 'verdicts' || l.source === 'auto' ? 'auto' : 'session';
+    counts.set(k, (counts.get(k) || 0) + 1);
+  }
+  return [...counts.entries()].sort((a, b) => b[1] - a[1]);
+}
+
+function facetOf(log) {
+  return (log.source === 'verdicts' || log.source === 'auto') ? 'auto' : 'session';
+}
+
 function renderLogsList() {
   const el = document.getElementById('logs-list');
   if (!el) return;
@@ -5604,7 +6403,27 @@ function renderLogsList() {
     el.innerHTML = '<div class="empty" style="padding:20px 16px">No session logs and no agent activity yet.<br><small style="color:var(--text3)">Run <code>/save</code> after a session, or invoke any agent.</small></div>';
     return;
   }
-  el.innerHTML = allLogs.map((log, i) => `
+  const facets = logFacets();
+  const shown = allLogs.map((log, i) => ({ log, i }))
+    .filter(({ log }) => !logFacet || facetOf(log) === logFacet);
+
+  // Only offer the bar when there is a choice to make. One facet is not a filter.
+  const bar = facets.length > 1 ? `
+    <div class="log-facets" role="group" aria-label="Filter activity">
+      ${facets.map(([k, c]) => `
+        <button type="button" class="log-facet ${logFacet === k ? 'on' : ''}"
+                aria-pressed="${logFacet === k}" onclick="setLogFacet('${esc(k)}')">
+          ${esc(k)} <span class="n">${c}</span>
+        </button>`).join('')}
+    </div>` : '';
+
+  // A filter that hides everything must say so, or it reads as an empty feed.
+  if (!shown.length) {
+    el.innerHTML = bar + `<div class="empty" style="padding:16px">No activity matches <b>${esc(logFacet || '')}</b>.</div>`;
+    return;
+  }
+
+  el.innerHTML = bar + shown.map(({ log, i }) => `
     <div class="log-item ${i === 0 ? 'active' : ''}" onclick="selectLog(${i}, this)">
       <div class="log-date">${esc(log.date)}${log.time ? ' · ' + esc(log.time) : ''}${log.source === 'verdicts' || log.source === 'auto' ? ' <span style="color:var(--text3);font-size:10px">· auto</span>' : ''}</div>
       <div class="log-title">${esc(log.title)}</div>
@@ -5691,11 +6510,32 @@ function renderFleetSummary() {
       trend: s.retire_candidates > 0 ? 'click to filter' : 'fleet is lean',
       onClick: 'setFleetFilter("activity", "never")',
     },
-    { v: '$' + (s.llm_usd_30d ?? 0).toFixed(2), label: 'LLM spend 30d', cls: '', trend: s.failing_7d ? `${s.failing_7d} failing` : '' },
+    {
+      // `?? 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">${esc(String(t.v))}</div>
+      <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('');
@@ -5779,6 +6619,20 @@ function sortFleet(agents) {
   });
 }
 
+/* One chip, four states, and the title always says which number it is judging.
+ *
+ * `no-limit` renders NOTHING — an agent with no declared budget is the common
+ * case, and a chip saying "no budget" on sixty rows is noise that trains the eye
+ * to skip the row where it matters.
+ */
+function budgetChip(b) {
+  if (!b || b.state === 'no-limit') return '';
+  const label = b.state === 'unmeasured'
+    ? `$${b.limitUsd} cap · unmeasured`
+    : `$${(b.measuredUsd ?? 0).toFixed(2)} / $${b.limitUsd}`;
+  return `<span class="budget-chip ${esc(b.state)}" title="${esc(b.why)}">${esc(label)}</span>`;
+}
+
 function renderFleetList() {
   const el = document.getElementById('fleet-list');
   if (!el) return;
@@ -5796,7 +6650,7 @@ function renderFleetList() {
     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)}"
+              aria-label="${esc(a.slug)} · ${esc(a.health)} · ${rateLabel} · ${esc(lastRunStr)}${a.budget && a.budget.state !== 'no-limit' ? ' · ' + esc(a.budget.why) : ''}"
               onclick="openAgentDrawer('${esc(a.slug)}')"
               onkeydown="if(event.key==='Enter'){event.preventDefault();openAgentDrawer('${esc(a.slug)}')}">
         <span class="ar-status" aria-hidden="true"></span>
@@ -5808,6 +6662,7 @@ function renderFleetList() {
             <span>${esc(rateLabel)}</span>
             <span>last: ${esc(lastRunStr)}</span>
             ${savingsStr ? `<span>${esc(savingsStr)}</span>` : ''}
+            ${budgetChip(a.budget)}
             ${a.retired ? '<span style="color:var(--agent-retired)">retired</span>' : ''}
           </span>
         </span>