great-cto 2.96.0 → 2.98.0

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

@@ -163,6 +163,34 @@ button { font-family: inherit; cursor: pointer; }
   border-right: 1px solid var(--border);
   display: flex; flex-direction: column;
 }
+/* Below this width the fixed 240px sidebar left 135px of workspace on a 375px
+   screen — narrower than a single kanban column (264px) — so every visit from a
+   phone was broken. It becomes a drawer: off-canvas by default, over the content
+   when opened.
+
+   `visibility` matters as much as the transform. A panel merely moved off-screen
+   is still in the tab order, so a keyboard user would tab through an invisible
+   menu — the same defect as the one this file just fixed on the Inbox tab, in
+   the opposite direction. */
+.sidebar-scrim {
+  display: none;
+  position: fixed; inset: 0; z-index: 39;
+  background: rgba(0, 0, 0, 0.4);
+  opacity: 0; pointer-events: none;
+  transition: opacity 200ms ease-out;
+}
+.menu-btn {
+  display: none;
+  align-items: center; justify-content: center;
+  width: 40px; height: 40px; flex-shrink: 0;
+  border: 1px solid var(--border); border-radius: 8px;
+  background: var(--bg-card); color: var(--text2);
+}
+.menu-btn:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
+
+@media (prefers-reduced-motion: reduce) {
+  .sidebar, .sidebar-scrim { transition: none; }
+}
 .sidebar-brand {
   display: flex; align-items: center; gap: 8px;
   padding: 14px 16px;
@@ -328,7 +356,7 @@ button { font-family: inherit; cursor: pointer; }
   margin: 0 16px;
   transition: border-color .12s, background .12s;
 }
-.search-box:focus-within { border-color: var(--accent); background: var(--bg-card); }
+.search-box:focus-within { border-color: var(--focus-ring); background: var(--bg-card); }
 .search-box svg { color: var(--text3); flex-shrink: 0; }
 .search-box input {
   flex: 1; border: none; outline: none; background: transparent;
@@ -530,6 +558,17 @@ button { font-family: inherit; cursor: pointer; }
   background: var(--bg-card);
   transition: background 0.12s, border-color 0.12s;
 }
+/* A thumb needs a bigger target than a cursor does.
+   24px is comfortable with a mouse and a coin-flip with a thumb, and Approve sits
+   4px from Reject — the one pair on this board where a miss advances work that
+   cannot be un-advanced. Scoped to `pointer: coarse` so the desktop density that
+   makes a long gate list scannable is left exactly as it is. 44px is the iOS
+   minimum; Android asks for 48dp, and the gap does the rest. */
+@media (pointer: coarse) {
+  .gate-btn { height: 44px; font-size: 13px; }
+  .inbox-row .actions .gate-btn { height: 44px; font-size: 13px; }
+  .gate-actions, .side-gate-actions, .inbox-row .actions { gap: 12px; }
+}
 .gate-approve { color: var(--status-review); border-color: rgba(22, 163, 74, 0.35); }
 .gate-approve:hover { background: rgba(22, 163, 74, 0.08); border-color: var(--status-review); }
 /* Agent runner (launch control) */
@@ -718,7 +757,7 @@ button { font-family: inherit; cursor: pointer; }
 .toast code { background: rgba(255,255,255,0.1); padding: 1px 4px; border-radius: 3px; }
 .pl-stage { cursor: pointer; transition: background 0.12s; }
 .pl-stage:hover { background: var(--bg-muted); border-radius: 4px; }
-.card-selected { outline: 2px solid var(--accent, #3b82f6); outline-offset: -1px; }
+.card-selected { outline: 2px solid var(--focus-ring); outline-offset: -1px; }
 #hotkey-modal {
   position: fixed; inset: 0; z-index: 10000;
   display: flex; align-items: center; justify-content: center;
@@ -1202,6 +1241,7 @@ button { font-family: inherit; cursor: pointer; }
 }
 .cost-cell .v {
   font-family: var(--serif); font-weight: 500;
+  font-variant-numeric: tabular-nums;
   font-size: 26px; letter-spacing: -0.02em;
   color: var(--text); line-height: 1.1;
 }
@@ -1544,9 +1584,21 @@ button { font-family: inherit; cursor: pointer; }
 .metric-card.purple::before { background: #7c3aed; }
 .metric-num {
   font-family: var(--serif); font-weight: 500;
+  /* The board is live (SSE). In a proportional face a 1 is narrower than an 8,
+     so a figure that ticks over re-flows its own width and the number appears to
+     breathe. Tabular figures cost nothing here and stop it. */
+  font-variant-numeric: tabular-nums;
   font-size: 52px; line-height: 1;
   letter-spacing: -0.02em;
 }
+/* An absence is rendered quietly and never silently — the glyph stays out of the
+   way, the reason is available on hover and to a screen reader. Sized down from
+   whatever it sits in, so a missing hero figure does not shout at 52px. */
+.absent {
+  font-family: var(--mono); font-size: 0.55em;
+  color: var(--text3); letter-spacing: 0.04em;
+  cursor: help; border-bottom: 1px dotted var(--border-strong);
+}
 .metric-num small {
   font-size: 22px; color: var(--text2);
   margin-left: 4px; font-weight: 400;
@@ -2165,6 +2217,48 @@ button { font-family: inherit; cursor: pointer; }
 @media (max-width:480px) {
 .chip-filter-bar { flex-direction: column; align-items: stretch; }
 }
+@media (max-width: 768px) {
+  .sidebar {
+    position: fixed; top: 0; left: 0; bottom: 0;
+    z-index: 40;
+    transform: translateX(-100%);
+    visibility: hidden;
+    /* Visibility is switched, never eased. Transitioning it over the same 200ms
+       as the transform flips it at the halfway mark, so the drawer is invisible
+       for the first half of its own slide-in — and, worse, still unfocusable at
+       the instant openMenu() tries to move focus into it, which silently left
+       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;
+    box-shadow: var(--drawer-shadow);
+  }
+  .sidebar.open {
+    transform: none; visibility: visible;
+    transition: transform 200ms ease-out, visibility 0s;
+  }
+  .sidebar-scrim { display: block; }
+  .sidebar-scrim.open { opacity: 1; pointer-events: auto; }
+  .menu-btn { display: inline-flex; }
+  .topbar { padding: 0 10px; gap: 8px; }
+  .topbar .crumbs { min-width: 0; overflow: hidden; white-space: nowrap; }
+  .topbar .crumbs > span { overflow: hidden; text-overflow: ellipsis; }
+  .topbar-actions { flex-shrink: 0; }
+  /* The search box is the one topbar item that can give up its width; ⌘K still
+     reaches it, and on a phone there is no ⌘K but there is the Search tab. */
+  .topbar .search-box { display: none; }
+  .topbar .task-count { display: none; }
+  .topbar-actions { gap: 6px; }
+  /* Icon-only, with the name moved to aria-label/title rather than deleted. */
+  .btn-label { display: none; }
+
+  /* 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; }
+}
 @keyframes pulse-glow { 0% { box-shadow: 0 0 0 0 rgba(76,175,80,.6);} 100% { box-shadow: 0 0 0 6px rgba(76,175,80,0);} }
 /* ── Scrollbar ────────────────────────────────────────────────────────────── */
 ::-webkit-scrollbar { width: 10px; height: 10px; }
@@ -2178,7 +2272,7 @@ button { font-family: inherit; cursor: pointer; }
   <div class="board-bg" aria-hidden="true"></div>
 
   <!-- Sidebar -->
-  <aside class="sidebar">
+  <aside class="sidebar" id="sidebar">
     <div class="sidebar-brand">
       <span class="brand-mark">
         <svg viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">
@@ -2208,7 +2302,7 @@ button { font-family: inherit; cursor: pointer; }
       </div>
     </div>
     <nav class="nav">
-      <div class="nav-item active" data-tab="inbox" onclick="switchTab('inbox', this)">
+      <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)">
         <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 class="count" id="nav-inbox-count">0</span>
@@ -2246,9 +2340,15 @@ button { font-family: inherit; cursor: pointer; }
     </div>
   </aside>
 
+  <div class="sidebar-scrim" id="sidebar-scrim" onclick="closeMenu()" aria-hidden="true"></div>
+
   <!-- Workspace -->
   <div class="workspace">
     <div class="topbar">
+      <button class="menu-btn" id="menu-btn" type="button" aria-label="Menu"
+              aria-controls="sidebar" aria-expanded="false" onclick="toggleMenu()">
+        <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6h18 M3 12h18 M3 18h18"/></svg>
+      </button>
       <div class="crumbs">
         <span class="proj-icon" id="crumb-icon"><svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg></span>
         <span id="crumb-project">—</span>
@@ -2264,7 +2364,7 @@ button { font-family: inherit; cursor: pointer; }
         <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 style="font-size:12px;font-weight:500">Share</span>
+          <span class="btn-label" style="font-size:12px;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>
@@ -2272,9 +2372,9 @@ button { font-family: inherit; cursor: pointer; }
           <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>
         </button>
-        <button class="btn-new" onclick="openNewIssueModal()">
+        <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>
-          New issue
+          <span class="btn-label">New issue</span>
         </button>
       </div>
     </div>
@@ -2284,6 +2384,9 @@ button { font-family: inherit; cursor: pointer; }
       <div class="inbox-page">
         <div class="inbox-greet" id="inbox-greet">Good morning. Here's what needs your decision.</div>
         <div class="inbox-summary" id="inbox-summary"></div>
+        <!-- Top rung of the evidence ladder: are the bytes that were reviewed
+             still the bytes in the tree? Hidden while they match. -->
+        <div id="inbox-receipt" style="display:none;margin:6px 0 2px;font-size:12px"></div>
 
         <!-- Resume — pick up where you left off -->
         <div class="resume-card" id="resume-card" style="display:none">
@@ -2332,6 +2435,17 @@ button { font-family: inherit; cursor: pointer; }
           </div>
           <div id="inbox-gates"></div>
         </div>
+        <!-- Gates that did NOT wait for you. Placed directly under the decisions
+             you still owe, because "what proceeded without me" is the question a
+             tiered gate creates and nothing on this board answered. -->
+        <div class="inbox-section" id="inbox-standdown-section" style="display:none">
+          <div class="inbox-section-head">
+            <span class="dot dot-amber"></span>
+            <h3>Proceeded without you</h3>
+            <span class="inbox-count" id="inbox-standdown-count">0</span>
+          </div>
+          <div id="inbox-standdown"></div>
+        </div>
         <div class="inbox-section" id="inbox-p0-section">
           <div class="inbox-section-head">
             <span class="dot dot-red"></span>
@@ -2754,7 +2868,12 @@ function greetByHour() {
 function renderInbox(d) {
   inboxData = d || {};
   const s = d?.summary || { gates: 0, blocked: 0, p0: 0, stale: 0 };
-  document.getElementById('nav-inbox-count').textContent = s.gates + s.p0 + s.blocked;
+  // `needs_you` counts distinct objects. Summing the three categories double-counted
+  // anything that matched two of them — a P0 that is also blocked read as two things
+  // needing attention when it was one. Older payloads have no `needs_you`, so the sum
+  // stays as the fallback rather than rendering nothing.
+  document.getElementById('nav-inbox-count').textContent =
+    Number.isFinite(s.needs_you) ? s.needs_you : s.gates + s.p0 + s.blocked;
   // Same rule as the all-clear card: "nothing urgent" is a claim about data we
   // may not have. When a read failed, say that instead of reassuring the user.
   const greetTail = anyDegraded()
@@ -2771,6 +2890,8 @@ function renderInbox(d) {
   renderInboxList('inbox-p0', d?.p0_open || [], 'inbox-p0-count', {});
   renderInboxList('inbox-blocked', d?.blocked || [], 'inbox-blocked-count', {});
   renderInboxList('inbox-stale', d?.stale_in_progress || [], 'inbox-stale-count', {});
+  refreshStandDowns();
+  refreshReceipt();
   // 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;
@@ -2785,6 +2906,150 @@ function renderInbox(d) {
     'Some project data could not be read — counts below are incomplete.');
 }
 
+/**
+ * Does the last approval still describe what is in the tree?
+ *
+ * The reviewing agents already record a hash-bound receipt of the bytes they
+ * read. Nothing on this board looked at it, so the top rung of the evidence
+ * ladder was being written and never read.
+ *
+ * Five readings, and only three of them speak:
+ *   differs     reviewed files changed after the approval — the actionable one
+ *   unreadable  we could not tell. Shown, because "cannot check" must never
+ *               render as "checked and fine"
+ *   extended    new files appeared; nothing reviewed was altered — worth a
+ *               quiet line, since the addition was never reviewed either
+ *   matches     silent. A clean state does not need a banner.
+ *   no-receipt  silent. Nothing has been approved yet; saying so would nag
+ *               about a stage that has not happened.
+ */
+async function refreshReceipt() {
+  const el = document.getElementById('inbox-receipt');
+  if (!el) return;
+  const d = await api(`/api/receipt${pqs()}`);
+  if (!d || d.state === 'matches' || d.state === 'no-receipt') { el.style.display = 'none'; return; }
+
+  const stamp = d.agent ? `${esc(d.agent)}${d.ts ? ' · ' + relTime(d.ts) : ''}` : '';
+  const body = d.state === 'differs'
+    ? `<b>${(d.changed || []).length + (d.removed || []).length} reviewed file(s) changed since ${stamp} approved</b>
+       — the approval no longer describes what is in the tree.
+       <span class="muted">${esc((d.changed || []).slice(0, 4).join(', '))}${(d.changed || []).length > 4 ? ' …' : ''}</span>`
+    : d.state === 'unreadable'
+      ? `<b>Could not check the review receipt</b> — <span class="muted">${esc(d.why || '')}</span>. This is not the same as a clean tree.`
+      : `${(d.added || []).length} file(s) added since ${stamp} approved; nothing reviewed was altered.`;
+
+  const colour = d.state === 'matches' ? 'var(--text3)' : 'var(--status-gate)';
+  el.style.display = '';
+  el.innerHTML = `<span style="color:${colour}">${body}</span>`;
+}
+
+/**
+ * Is this document still true? — which is not the question `modified` answers.
+ *
+ * Three states, and the two that are not `fresh` look different from each other:
+ *
+ *   stale    the author's own `stale_after` has passed, or its date is older
+ *            than the threshold — say so, loudly, it is the actionable one
+ *   unknown  nothing to judge it by, OR the file could not be read. Both are
+ *            shown, because a document nobody could judge must never render the
+ *            same as one that passed. That equivalence is why stale_after exists.
+ *   fresh    nothing — a clean row should stay quiet
+ *
+ * Absent freshness data (an older board payload) also renders nothing, since
+ * inventing a verdict from a missing field is the defect itself.
+ */
+function freshnessBadge(doc) {
+  const v = doc?.freshness;
+  if (!v || v === 'fresh') return '';
+  const unreadable = doc.freshnessBasis === 'unreadable';
+  const colour = v === 'stale' ? 'var(--status-gate)' : 'var(--text3)';
+  const label = v === 'stale' ? 'stale' : (unreadable ? 'could not read' : 'unknown');
+  return `<span title="${esc(doc.freshnessWhy || '')}" style="font-family:var(--mono);font-size:10px;margin-left:6px;padding:0 4px;border:1px solid var(--border);border-radius:3px;color:${colour}">${esc(label)}</span>`;
+}
+
+// Will this gate wait for you, or did the pipeline already go past it?
+//
+// `null` until fetched, and it stays null on any failure — every render path
+// treats "no tier information" as "this gate waits", which is the reading that
+// keeps a human in the loop when we do not know.
+let gateTiers = null;
+async function refreshGateTiers() {
+  const d = await api(`/api/gate-tiers${pqs()}`);
+  gateTiers = d && d.agents ? d : null;
+}
+
+/**
+ * The tier line for a gate card, or '' when it would say nothing true.
+ *
+ * Three readings, not two:
+ *   - tiering off for this project, or the agent unmeasured → nothing shown, the
+ *     gate waits, which is what the buttons already imply
+ *   - `gated` → nothing shown for the same reason
+ *   - `notify` / `notify-thin` → said out loud, because the pipeline did NOT
+ *     wait for this decision and the Approve button alone implies it did
+ */
+function gateTierNote(t) {
+  if (!gateTiers?.enabled || !gateTiers?.measured) return '';
+  const info = gateTiers.agents?.[t.agent];
+  if (!info || info.tier === 'gated') return '';
+  const thin = info.tier === 'notify-thin';
+  const colour = thin ? 'var(--status-gate)' : 'var(--text3)';
+  // `notify-thin` is sound statistics over unmeasured coverage — one eval passed
+  // conclusively, which says nothing about the rest of what this agent is for.
+  // It is the reading most worth a second look, so it reads differently.
+  const caveat = thin ? ' — one eval, coverage unmeasured' : '';
+  return `<div style="margin-top:3px;font-size:11px;color:${colour}">
+    <span style="font-family:var(--mono);border:1px solid var(--border);border-radius:3px;padding:0 4px">${esc(info.tier)}</span>
+    the pipeline did not wait for this${esc(caveat)} · <span title="${esc(info.why || '')}">${esc((info.why || '').slice(0, 90))}</span>
+  </div>`;
+}
+
+// Gates that announced instead of waiting.
+//
+// Three states, not two. `none` hides the section — nothing has proceeded
+// unattended, which is a real and common answer. `unreadable` SHOWS it and says
+// so: a ledger that exists and could not be read must never render the same as
+// an empty one, because the whole reason this record exists is that a
+// stand-down nobody can see is indistinguishable from a gate nobody configured.
+async function refreshStandDowns() {
+  const section = document.getElementById('inbox-standdown-section');
+  const root = document.getElementById('inbox-standdown');
+  const cnt = document.getElementById('inbox-standdown-count');
+  if (!section || !root) return;
+
+  const d = await api(`/api/stand-downs${pqs()}`);
+  if (!d) { section.style.display = 'none'; return; }
+
+  if (d.state === 'unreadable') {
+    section.style.display = '';
+    if (cnt) cnt.textContent = '?';
+    root.innerHTML = `<div class="inbox-row"><span class="ttl">The stand-down ledger could not be read
+      <span class="meta">${esc(d.why || '')} — gates may have proceeded unattended without appearing here</span></span></div>`;
+    return;
+  }
+  if (d.state !== 'some' || !d.rows.length) { section.style.display = 'none'; root.innerHTML = ''; return; }
+
+  section.style.display = '';
+  if (cnt) cnt.textContent = d.rows.length;
+  // Newest first — the ledger appends, but a reader wants the most recent thing
+  // that happened without them.
+  root.innerHTML = d.rows.slice().reverse().map(r => {
+    // `notify-thin` means the gate stood down on ONE eval: sound statistics,
+    // unmeasured coverage. That is the row most worth a second look, so it is
+    // the row that looks different.
+    const thin = r.tier === 'notify-thin';
+    const tierTag = `<span style="font-family:var(--mono);font-size:10px;padding:1px 5px;border-radius:3px;border:1px solid var(--border);color:${thin ? 'var(--status-gate)' : 'var(--text3)'}">${esc(r.tier || 'unknown')}</span>`;
+    return `
+      <div class="inbox-row">
+        <span class="id">gate:${esc(r.gate || '?')}</span>
+        <span class="ttl">${esc(r.agent || 'unknown agent')} proceeded without asking
+          <span class="ttl-desc">${esc(r.evidence || '')}</span>
+          <span class="meta">${tierTag} · <span title="${esc(r.ts || '')}">${r.ts ? relTime(r.ts) : 'no timestamp'}</span></span>
+        </span>
+      </div>`;
+  }).join('');
+}
+
 function renderInboxList(rootId, items, countId, opts = {}) {
   const root = document.getElementById(rootId);
   const cnt = document.getElementById(countId);
@@ -2794,9 +3059,17 @@ function renderInboxList(rootId, items, countId, opts = {}) {
   if (section) section.style.display = items.length ? '' : 'none';
   if (!items.length) { root.innerHTML = ''; return; }
   root.innerHTML = items.map(t => {
+    // A task now appears in one section only, so the states it ALSO matched are
+    // shown here rather than lost. Deduplicating the rows must not deduplicate
+    // the facts: a gate that is also blocked is still blocked, and hiding that
+    // to fix a double count would trade one wrong reading for another.
+    const alsoTag = (t.also || []).length
+      ? `<span title="also matched: ${esc((t.also || []).join(', '))}" style="color:var(--text3)">also ${esc((t.also || []).join(' + '))}</span>`
+      : '';
     const meta = [
       t.agent ? `agent: ${esc(t.agent)}` : '',
       t.priority != null ? PRIORITY_LABEL[t.priority] : '',
+      alsoTag,
       // Gates (the showApprove list) get the exact date+time the decision has been
       // waiting since; other rows keep the compact relative stamp.
       t.updated_at
@@ -2812,16 +3085,21 @@ function renderInboxList(rootId, items, countId, opts = {}) {
          </div>`
       : `<div class="actions"><span style="font-family:var(--mono);font-size:11px;color:var(--text3)">${t.status || ''}</span></div>`;
     const desc = t.description ? `<span class="ttl-desc">${esc(t.description.slice(0, 140))}${t.description.length > 140 ? '…' : ''}</span>` : '';
+    // Only gate rows can stand down, so only they carry the note.
+    const tierNote = opts.showApprove ? gateTierNote(t) : '';
     return `
       <div class="inbox-row" onclick='openSide(${JSON.stringify(t).replace(/'/g, "&apos;")})'>
         <span class="id">${esc(t.id || '')}</span>
-        <span class="ttl">${esc(t.title)}${desc}<span class="meta">${meta}</span></span>
+        <span class="ttl">${esc(t.title)}${desc}<span class="meta">${meta}</span>${tierNote}</span>
         ${actions}
       </div>`;
   }).join('');
 }
 
 async function refreshInbox() {
+  // Tiers first: the gate rows are rendered from this same call, and a row drawn
+  // before the tiers arrive would silently claim every gate is waiting.
+  await refreshGateTiers();
   const d = await api(`/api/inbox${pqs()}`);
   if (d) renderInbox(d);
   refreshPipeline();
@@ -3458,7 +3736,7 @@ async function loadDocs() {
 
   const pipeline = d.pipeline
     ? `<div class="card"><b>Pipeline</b> <span class="muted">— how a feature moves, drawn from shared/pipeline.toml</span>
-         ${renderPipeline(d.pipeline)}
+         ${renderDeclaredPipeline(d.pipeline)}
          <details style="margin-top:8px"><summary class="muted">Mermaid source</summary>
            <pre style="white-space:pre-wrap;font-size:11px">${esc(d.pipeline)}</pre></details></div>`
     : '';
@@ -3481,6 +3759,7 @@ async function loadDocs() {
         <div style="padding:4px 0;border-bottom:1px solid var(--border,#eee)">
           <a href="#" onclick="openDoc('${esc(doc.path)}');return false">${esc(doc.title)}</a>
           <span class="muted" style="font-size:11px"> · ${esc(doc.path)} · ${ago(doc.modified)}</span>
+          ${freshnessBadge(doc)}
         </div>`).join('')}</div>
       </div>`).join('');
 
@@ -3541,7 +3820,18 @@ function projectRootHint() {
 }
 
 /** The pipeline as boxes and gates — no diagram library, so it always renders. */
-function renderPipeline(mermaid) {
+// Named `renderDeclaredPipeline`, not `renderPipeline`, because there is already
+// a `renderPipeline(stages)` above that draws the LIVE rail. Both were declared
+// at the top level of this one <script>, so the later declaration won and every
+// call carrying an array of stages — refreshPipeline() and the SSE handler —
+// reached this mermaid parser instead. It returned a string nobody used and
+// never touched `#pipeline-track`, so the rail stayed the empty div in the
+// markup and the status stayed the hardcoded `idle` beside it.
+//
+// The first section of the first screen therefore read "idle" whatever the
+// pipeline was doing: not an empty state, but a confident wrong answer, which is
+// the failure this project spends its time removing.
+function renderDeclaredPipeline(mermaid) {
   const edges = [];
   for (const line of String(mermaid).split('\n')) {
     const m = line.match(/^\s*(\w+)\s*-->(?:\|([^|]*)\|)?\s*(\w+)/);
@@ -4446,6 +4736,28 @@ function cardHTML(t) {
     </div>`;
 }
 
+// What clicking Approve actually sets in motion, in the words of what it does.
+//
+// A confirm that only asks "are you sure?" teaches people to dismiss confirms,
+// so this one states consequences instead: the approval is appended to the
+// verdict log, the pipeline is woken so the next session dispatches the
+// 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) {
+  const lines = [
+    `Approve ${id}?`,
+    '',
+    'Records your approval in the verdict log and wakes the pipeline —',
+    'the next session dispatches the following stage.',
+  ];
+  if (shareState && shareState.enabled) {
+    lines.push('', `Also republishes the public report at ${shareState.url || 'the share URL'} —`,
+                   'anyone holding that link sees the update.');
+  }
+  return lines.join('\n');
+}
+
 async function gateAction(id, action, runAgent) {
   let body;
   if (action === 'reject') {
@@ -4453,6 +4765,16 @@ async function gateAction(id, action, runAgent) {
     if (reason === null) return;
     body = { action, reason, project: currentProject };
   } else {
+    // The gate is the human signature the pipeline waits on. Rejecting has
+    // always asked for a reason and approving asked for nothing, so the cheaper
+    // click was the one that advanced work nobody can un-advance — friction
+    // pointing exactly the wrong way.
+    //
+    // Medium cost-of-undo (ADR-009): one confirm that NAMES the consequence, not
+    // 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;
     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.`;
@@ -4543,6 +4865,32 @@ async function updateTaskPriority(id, priority) {
   }
 }
 
+/* ── One glyph cannot mean five things ─────────────────────────────────────
+ *
+ * A single em dash was doing duty for at least five different facts on this
+ * board: not loaded yet, measured and there is none, cannot be computed from
+ * what we have, no verdict, no date. On a screen where the figures are money and
+ * throughput, "we looked and it is zero" and "we could not look" are not the
+ * same answer, and the reader was being asked to guess which one they had.
+ *
+ * Three kinds, because three is what actually occurs here. Vocabulary follows
+ * the distinction statistical agencies draw between a value that is missing and
+ * one that is not applicable; the wording is ours, the discipline is theirs.
+ *
+ * The caller always passes the specific reason. A generic tooltip that repeats
+ * the glyph's category would add a hover and no information.
+ */
+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
+};
+
+function absent(kind, why) {
+  const glyph = ABSENCE[kind] || ABSENCE.none;
+  return `<span class="absent" title="${esc(why)}" aria-label="${esc(why)}">${glyph}</span>`;
+}
+
 /* ── Dashboard ──────────────────────────────────────────────────────────── */
 function renderDashboard(m) {
   const llmUsd = m.cost?.llm_usd ?? 0;
@@ -4553,6 +4901,18 @@ function renderDashboard(m) {
   // 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';
 
@@ -4575,9 +4935,11 @@ function renderDashboard(m) {
     : (llmUsd > 0 ? `time-based estimate (no verdict data yet)` : 'no plans or tasks yet');
 
   const hero = [
-    { v: done || '—', sub: 'shipped', label: 'Tasks done', trend: `+${m.velocity?.this_week ?? 0} this week` },
+    { 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` },
     {
-      v: aiSpend > 0 ? `$${aiSpend < 10 ? aiSpend.toFixed(2) : fmtMoney(aiSpend)}` : '—',
+      // $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'),
       sub: '',
       label: 'AI spend',
       trend: llmTrend,
@@ -4594,7 +4956,7 @@ function renderDashboard(m) {
       : {
           // No MEASURED savings yet (no verdict cost data). Don't fabricate a
           // multiplier from the time-based estimate — show it's not measured.
-          v: '—',
+          v: absent('uncomputable', 'a measured multiplier needs verdict cost data, and there is none yet'),
           sub: '',
           label: 'Cost savings vs FTE',
           trend: aiSpend > 0
@@ -4612,12 +4974,12 @@ function renderDashboard(m) {
 
   const acc = m.acceptance || {};
   const secondary = [
-    { v: avgMin ? `${avgMin}` : '—', sub: avgMin ? 'm' : '', label: cycleStat },
-    { v: m.qa?.pass_rate != null ? m.qa.pass_rate : '—', sub: m.qa?.pass_rate != null ? '%' : '', label: m.qa?.pass_rate != null ? 'QA pass rate' : 'QA — run /qa', cls: 'green' },
+    { 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)}` : '—', sub: '', label: acc.accepted ? `Cost / accepted (${acc.accepted})` : 'Cost / accepted' },
+    { 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' },
     { v: acc.rework_rounds ?? 0, sub: '', label: 'Rework rounds', cls: acc.rework_rounds ? 'amber' : 'green' },
     { v: m.security?.blocked ?? 0, sub: '', label: 'Open security blocks', cls: m.security?.blocked ? 'red' : 'green' },
     { v: m.tasks?.in_progress ?? 0, sub: '', label: 'In progress', cls: 'amber' },
@@ -4883,6 +5245,19 @@ function setNotifStatus(text, tone) {
 
 async function toggleShare() {
   const enabled = !document.getElementById('share-toggle').checked;
+  // Only on the way ON. Switching sharing OFF is the safe direction and asking
+  // there would train people to click through the dialog that matters. The card
+  // already explains what publishing means, but a toggle can be flipped without
+  // reading the card next to it, and revoking the link afterwards does not
+  // un-see what was already served.
+  if (enabled && !confirm(
+    'Publish a public report for this project?\n\n' +
+    'Anyone holding the link can read what shipped, the metrics and the activity,\n' +
+    'with no sign-in. Approving a gate republishes it automatically.\n\n' +
+    'Turning sharing off later revokes the link — it does not unpublish what has\n' +
+    'already been read.')) {
+    return;
+  }
   document.getElementById('share-loading').style.display = enabled ? 'flex' : 'none';
   document.getElementById('share-url-section').style.display = 'none';
   // BUG FIX: scope publish to the currently-selected project, not server's cwd
@@ -5017,6 +5392,51 @@ function closeSide() {
 document.addEventListener('keydown', e => { if (e.key === 'Escape') closeSide(); });
 
 /* ── Tabs ───────────────────────────────────────────────────────────────── */
+/* ── The sidebar as a drawer on narrow screens ──────────────────────────── */
+//
+// Three things a drawer owes a keyboard, all of them things a transform alone
+// does not give you: it leaves the tab order when closed, Escape closes it, and
+// focus moves in on open and back to the button that opened it on close.
+function menuIsOpen() {
+  return !!document.getElementById('sidebar')?.classList.contains('open');
+}
+
+function openMenu() {
+  const sb = document.getElementById('sidebar');
+  if (!sb) return;
+  sb.classList.add('open');
+  document.getElementById('sidebar-scrim')?.classList.add('open');
+  document.getElementById('menu-btn')?.setAttribute('aria-expanded', 'true');
+  document.body.style.overflow = 'hidden';
+  (sb.querySelector('.nav-item.active') || sb.querySelector('.nav-item'))?.focus();
+}
+
+// `restoreFocus` is false when the drawer closes because a tab was CHOSEN — the
+// user is looking at the panel they just picked, and yanking focus back to the
+// hamburger would undo the thing they came for. It is true when the drawer is
+// dismissed (Escape, scrim, the button), where the button is where focus was.
+function closeMenu(restoreFocus = true) {
+  const sb = document.getElementById('sidebar');
+  if (!sb || !sb.classList.contains('open')) return;
+  sb.classList.remove('open');
+  document.getElementById('sidebar-scrim')?.classList.remove('open');
+  const btn = document.getElementById('menu-btn');
+  btn?.setAttribute('aria-expanded', 'false');
+  document.body.style.overflow = '';
+  if (restoreFocus) btn?.focus();
+}
+
+function toggleMenu() { menuIsOpen() ? closeMenu() : openMenu(); }
+
+document.addEventListener('keydown', (e) => { if (e.key === 'Escape' && menuIsOpen()) closeMenu(); });
+
+// Rotating a phone, or dragging a desktop window wider, un-applies the media
+// query — the drawer stops being a drawer while `overflow: hidden` is still on
+// the body, which is a page that will not scroll and no visible reason why.
+try {
+  matchMedia('(min-width: 769px)').addEventListener('change', (e) => { if (e.matches) closeMenu(false); });
+} catch (_) { /* older Safari: no addEventListener on MediaQueryList — drawer still works */ }
+
 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
@@ -5024,6 +5444,7 @@ function switchTab(id, el) {
   if (!el) el = document.querySelector(`.nav-item[data-tab="${id}"]`)
     || document.querySelector('.nav-item[data-tab="dashboard"]');
   currentTab = id;
+  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);
@@ -5463,7 +5884,6 @@ function renderAgentProfile(p) {
         ${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>`}
-        <button type="button" disabled title="Opening external files is not yet wired up">Open prompt file</button>
       </div>
       <div style="font-size:11px;color:var(--text3);margin-top:8px">
         File: <code>${esc(p.file_path)}</code>