great-cto 3.16.0 → 3.18.0

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

@@ -109,6 +109,16 @@
 }
 /* Light theme — same emerald system, AA-contrast on white. Toggle via data-theme. */
 [data-theme="light"] {
+  /* Four values that had never been measured.
+     The contrast audit read `:root` and nothing else, so this theme — 39 token
+     overrides, half the board's surface area — was unchecked for months. When it
+     was finally measured against `--bg-strong`, the hardest surface here:
+       --accent      1.51:1 against a 3:1 floor for UI boundaries. Half.
+       --accent-text 4.17, --p1-fg 4.04, --p2-fg 4.09 against a 4.5 floor.
+     `--accent` was simply the dark theme's green, which is designed to sit on
+     #0a0e0c. Each value below is the same hue darkened until it clears its floor,
+     computed rather than eyeballed. */
+
   --bg-page: #eef2f0;
   --bg-panel: rgba(255, 255, 255, 0.9);
   --bg-card: #ffffff;
@@ -121,11 +131,11 @@
   --text2: #56655e;
   --text3: #55625b;
   --focus-ring: #047857;
-  --accent: #00d97e;
+  --accent: #009657;
   --accent-2: #0a7d4d;
   --accent-soft: rgba(0, 217, 126, 0.12);
   --accent-strong: rgba(0, 168, 98, 0.20);
-  --accent-text: #0a7d4d;
+  --accent-text: #097648;
   --status-backlog: #6b7280;
   --status-todo: #6b7280;
   --status-progress: #b45309;
@@ -134,8 +144,8 @@
   --status-blocked: #c43030;
   --status-gate: #7c3aed;
   --p0-bg: rgba(196, 48, 48, 0.12);   --p0-fg: #b91c1c;
-  --p1-bg: rgba(180, 83, 9, 0.12);    --p1-fg: #b45309;
-  --p2-bg: rgba(146, 102, 10, 0.12);  --p2-fg: #92660a;
+  --p1-bg: rgba(180, 83, 9, 0.12);    --p1-fg: #a64c08;
+  --p2-bg: rgba(146, 102, 10, 0.12);  --p2-fg: #885f09;
   --p3-bg: rgba(0, 0, 0, 0.05);       --p3-fg: #5c6b65;
   --surface-drawer: #ffffff;
   --surface-translucent: rgba(255, 255, 255, 0.72);
@@ -1389,7 +1399,16 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
   background: var(--text3); flex-shrink: 0;
 }
 .pl-stage.idle .pl-name .dot { background: var(--text3); }
-.pl-stage.active .pl-name .dot { background: var(--status-progress); animation: pl-pulse 1.4s infinite; }
+/* Motion means the data is live.
+
+   A pulsing dot says "this is happening right now". Three stages pulsed on a
+   rail whose newest timestamp was 260 hours old — the strongest liveness signal
+   the design has, spent on work that stopped eleven days ago. The animation is
+   now gated on `.fresh`, which the renderer adds only when the stage's own
+   timestamp is inside the hour. An `active` stage that has not moved keeps its
+   colour and loses its heartbeat. */
+.pl-stage.active .pl-name .dot { background: var(--status-progress); }
+.pl-stage.active.fresh .pl-name .dot { animation: pl-pulse 1.4s infinite; }
 .pl-stage.done .pl-name .dot { background: var(--status-review); }
 .pl-stage.failed .pl-name .dot { background: var(--status-blocked); }
 @keyframes pl-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4); } 50% { box-shadow: 0 0 0 5px rgba(245, 158, 11, 0); } }
@@ -1471,7 +1490,19 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
   border-radius: 8px;
   display: inline-flex; align-items: center; justify-content: center;
 }
-.pl-gate.active .pl-name .gate-glyph { animation: pl-pulse 1.4s infinite; }
+.pl-gate.active.fresh .pl-name .gate-glyph { animation: pl-pulse 1.4s infinite; }
+
+/* Reduced motion, declared AFTER the pulse rules on purpose.
+
+   It was first written into the reduced-motion block near the top of this file,
+   where `css-cascade` immediately reported it: same specificity as the two rules
+   above, and the later rule wins, so `animation: none` never applied and a reader
+   who had asked for less movement still got a pulsing dot. The check exists for
+   exactly this, and it caught it within the minute. */
+@media (prefers-reduced-motion: reduce) {
+  .pl-stage.active.fresh .pl-name .dot,
+  .pl-gate.active.fresh .pl-name .gate-glyph { animation: none; }
+}
 /* The gate with nothing pending is a node like any other idle stage — the tinted
    card is reserved for the state that actually holds the pipeline, so a clear
    gate stops out-shouting the stages that ran. */
@@ -1657,6 +1688,79 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
 }
 
 /* ── Resume card ──────────────────────────────────────────────────────── */
+/* Project status — one disclosure for everything the operator cannot act on. */
+/* Focus, visible against every surface it can land on.
+
+   Queue rows became keyboard-reachable and the buttons on them are real buttons,
+   but nothing drew a ring — so a keyboard user could reach a row and not see
+   where they were. `outline-offset: 2px` is not decoration: `.gate-approve` is a
+   filled green button, and a ring drawn ON that fill disappears into it. Offset
+   puts the ring on the surface behind, where it keeps its contrast. */
+.inbox-row:focus-visible,
+.gate-btn:focus-visible,
+.ac-btn:focus-visible,
+.ac-primary:focus-visible {
+  outline: 2px solid var(--focus-ring);
+  outline-offset: 2px;
+  border-radius: 8px;
+}
+
+/* Reason chip — why a row is in the queue, carried by the row itself. */
+.why {
+  display: inline-block;
+  font-family: var(--mono);
+  font-size: var(--fs-eyebrow);
+  letter-spacing: 0.04em;
+  padding: 1px 7px;
+  margin-right: 8px;
+  border-radius: 5px;
+  border: 1px solid var(--border-strong);
+  color: var(--text2);
+  vertical-align: 1px;
+}
+.why-gate    { color: var(--status-gate);     border-color: var(--status-gate); }
+.why-p0      { color: var(--status-blocked);  border-color: var(--status-blocked); }
+.why-blocked { color: var(--status-progress); border-color: var(--status-progress); }
+.why-stale   { color: var(--text3); }
+
+.proj-status {
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  background: var(--bg-card);
+  margin: 10px 0 18px;
+}
+.proj-status-summary {
+  cursor: pointer;
+  padding: 11px 16px;
+  font-size: var(--fs-small);
+  color: var(--text2);
+  list-style: none;
+  display: flex; align-items: center; gap: 8px;
+}
+.proj-status-summary::-webkit-details-marker { display: none; }
+.proj-status-summary::before {
+  content: "\25B8";
+  color: var(--text3);
+  transition: transform 0.12s;
+}
+.proj-status[open] .proj-status-summary::before { transform: rotate(90deg); }
+.proj-status-summary:hover { color: var(--text); }
+.proj-status-summary:focus-visible {
+  outline: 2px solid var(--focus-ring);
+  outline-offset: 2px;
+  border-radius: 8px;
+}
+/* A link with no colour rule gets the browser's default, which is on nobody's
+   palette. This one — "stale, listed below" in the empty resume column — was
+   added today without one, and the rendered-layout check found it on both themes
+   within the hour. That is the check working on its author. */
+.resume-list a, .empty a { color: var(--accent-text); text-decoration: underline; }
+.resume-list a:hover, .empty a:hover { color: var(--accent); }
+
+.proj-status-verdict { color: var(--text3); font-family: var(--mono); font-size: var(--fs-eyebrow); }
+.proj-status-body { padding: 0 16px 14px; }
+.proj-status-body .inbox-section { margin-top: 6px; }
+
 .resume-card {
   background: linear-gradient(135deg, rgba(0, 217, 126, 0.04), var(--surface-translucent));
   border: 1px solid rgba(0, 217, 126, 0.18);
@@ -2022,7 +2126,11 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
    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;
+  /* `0.55em` is a size relative to whatever it lands inside. Next to a 52px
+     display numeral that resolves to 28.6px — a step the ramp does not have, and
+     the rendered-layout check flagged it on two screens. The "n/a" beside a
+     figure is a caption; it is sized like one. */
+  font-family: var(--mono); font-size: var(--fs-caption);
   color: var(--text3); letter-spacing: 0.04em;
   cursor: help; border-bottom: 1px dotted var(--border-strong);
 }
@@ -2912,14 +3020,26 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
     <div class="panel active" id="panel-inbox">
       <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 — and now only
              used for `differs`, the one reading that needs a decision. The other
              two speaking states render into #inbox-receipt-foot at the bottom of
              this page (see refreshReceipt). -->
         <div id="inbox-receipt" style="display:none;margin:6px 0 2px;font-size:var(--fs-small)"></div>
-
+        <!-- Everything below is STATUS, and status is not a decision.
+
+             Six of the seven blocks on this screen were read-only: a pipeline rail,
+             a resume card, two advisory notices, a strip of stat tiles. They sat
+             ABOVE the one item the operator could act on, under a headline promising
+             decisions. The rule the design spec states — a block earns the top of a
+             screen only if the operator can act on it now — puts all of it here,
+             one disclosure, closed by default.
+
+             Not deleted. "How is the project" is a real question; it is simply not
+             the question this screen is named after. -->
+        <details class="proj-status" id="proj-status">
+          <summary class="proj-status-summary">Project status<span class="proj-status-verdict" id="proj-status-verdict"></span></summary>
+          <div class="proj-status-body">
         <!-- Resume — pick up where you left off -->
         <div class="resume-card" id="resume-card" style="display:none">
           <div class="resume-head">
@@ -2944,6 +3064,20 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
             </div>
           </div>
         </div>
+        <div id="tool-failure-rate" style="display:none;font-size:var(--fs-small);color:var(--status-blocked,#f87171);background:rgba(248,113,113,0.08);padding:6px 10px;border-radius:6px;margin-bottom:10px;"></div>
+
+        <div class="inbox-section">
+          <div class="inbox-section-head">
+            <span class="dot dot-blue"></span>
+            <h3>Active pipeline</h3>
+            <span class="inbox-count" id="pipeline-status">idle</span>
+            <span class="tier-badge" id="tier-badge" title="change_tier for the current working-tree diff — which gates + judge open (ADR-003/004)"></span>
+          </div>
+          <div class="pipeline-track" id="pipeline-track"></div>
+        </div>
+          </div>
+        </details>
+
 
         <!-- Project archetype / compliance / phase used to be a full-width mono
              row here, between the KPI tiles and the pipeline. On a screen whose
@@ -2956,24 +3090,27 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
              Not deleted: `PROJECT.md` is not in the Docs list, so compliance and
              phase would have become unreachable. -->
         <!-- Tool failure rate watchdog warning -->
-        <div id="tool-failure-rate" style="display:none;font-size:var(--fs-small);color:var(--status-blocked,#f87171);background:rgba(248,113,113,0.08);padding:6px 10px;border-radius:6px;margin-bottom:10px;"></div>
+        <!-- One queue, not four sections.
 
-        <div class="inbox-section">
-          <div class="inbox-section-head">
-            <span class="dot dot-blue"></span>
-            <h3>Active pipeline</h3>
-            <span class="inbox-count" id="pipeline-status">idle</span>
-            <span class="tier-badge" id="tier-badge" title="change_tier for the current working-tree diff — which gates + judge open (ADR-003/004)"></span>
-          </div>
-          <div class="pipeline-track" id="pipeline-track"></div>
-        </div>
-        <div class="inbox-section" id="inbox-gates-section">
+             Gates, P0s, blocked and stale were four headed lists, each with its own
+             count, on a screen that shows five to seven rows in total. The headings
+             cost more vertical space than the rows and forced the reader to work out
+             which bucket a thing was in before reading what it was.
+
+             Linear and GitHub both do the opposite: one ranked stream, and the reason
+             an item is there rides ON the row as a chip. The reason is a property of
+             the item, so it survives the item moving between buckets — which is what
+             made an expired gate unrecognisable when it fell out of the gate list.
+
+             Order: gates first (a signature is owed), then oldest first, because the
+             longest-ignored row is the one a triage list is read for. -->
+        <div class="inbox-section" id="inbox-queue-section">
           <div class="inbox-section-head">
             <span class="dot dot-purple"></span>
-            <h3>Pending decisions</h3>
-            <span class="inbox-count" id="inbox-gates-count">0</span>
+            <h3>Needs you</h3>
+            <span class="inbox-count" id="inbox-queue-count">0</span>
           </div>
-          <div id="inbox-gates"></div>
+          <div id="inbox-queue"></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
@@ -2986,30 +3123,6 @@ h1, h2, h3, h4 { font-weight: 600; font-family: var(--sans); }
           </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>
-            <h3>P0 open</h3>
-            <span class="inbox-count" id="inbox-p0-count">0</span>
-          </div>
-          <div id="inbox-p0"></div>
-        </div>
-        <div class="inbox-section" id="inbox-blocked-section">
-          <div class="inbox-section-head">
-            <span class="dot dot-orange"></span>
-            <h3>Blocked</h3>
-            <span class="inbox-count" id="inbox-blocked-count">0</span>
-          </div>
-          <div id="inbox-blocked"></div>
-        </div>
-        <div class="inbox-section" id="inbox-stale-section">
-          <div class="inbox-section-head">
-            <span class="dot dot-amber"></span>
-            <h3>Stale (in progress &gt; 48h)</h3>
-            <span class="inbox-count" id="inbox-stale-count">0</span>
-          </div>
-          <div id="inbox-stale"></div>
-        </div>
         <!-- Idle focus: when nothing needs a decision, the four sections above collapse and this shows instead. -->
         <div class="inbox-allclear" id="inbox-allclear" style="display:none">
           <div class="ac-mark">✓</div>
@@ -3464,36 +3577,53 @@ function renderInbox(d) {
     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()
-    ? "Some data could not be read — treat the counts below as incomplete."
-    : (s.gates + s.p0 ? "Here's what needs your decision." : 'Nothing urgent — back to deep work.');
-  document.getElementById('inbox-greet').textContent = `${greetByHour()} ${greetTail}`;
-  // Only the tiles that have something in them.
+  // The headline states the SITUATION, not the time of day.
   //
-  // Four rendered unconditionally, and on an ordinary morning two of them read 0
-  // — half the header spending a quarter of the width each to say "nothing here".
-  // A zero is worth stating when it is the WHOLE answer, so the all-clear is one
-  // line instead of four boxes of noughts.
-  const TILES = [
-    { n: s.gates,   dot: 'purple', lbl: 'Pending decisions' },
-    { n: s.p0,      dot: 'red',    lbl: 'P0 open' },
-    { n: s.blocked, dot: 'orange', lbl: 'Blocked' },
-    { n: s.stale,   dot: 'amber',  lbl: 'Stale &gt; 48h' },
-  ];
-  const liveTiles = TILES.filter((t) => Number(t.n) > 0);
-  document.getElementById('inbox-summary').innerHTML = liveTiles.length
-    ? liveTiles.map((t) => `<div class="pill-stat"><span class="dot dot-${t.dot}"></span>`
-        + `<div><div class="num">${t.n}</div><div class="lbl">${t.lbl}</div></div></div>`).join('')
-    : `<div class="pill-stat" style="grid-column:1/-1"><span class="dot dot-green"></span>`
-      + `<div><div class="lbl">No gates, no P0s, nothing blocked or stale.</div></div></div>`;
-  renderInboxList('inbox-gates', d?.pending_gates || [], 'inbox-gates-count', { showApprove: true });
-  // `implies` names the fact the section heading already states, so the rows
-  // below it stop repeating that fact on every card. "P0 open" states the
-  // priority; "Stale (in progress > 48h)" states the age. "Blocked" states
-  // neither, so its rows keep both.
-  renderInboxList('inbox-p0', d?.p0_open || [], 'inbox-p0-count', { implies: 'priority' });
-  renderInboxList('inbox-blocked', d?.blocked || [], 'inbox-blocked-count', {});
-  renderInboxList('inbox-stale', d?.stale_in_progress || [], 'inbox-stale-count', { implies: 'age' });
+  // "Good morning. Here's what needs your decision." sat above a screen whose
+  // every timestamp was 11 to 30 days old. The most important fact available —
+  // that nothing had moved in eleven days — was the one thing the page never
+  // said. Borrowed from Datadog's monitor states, where "No Data" is an alert in
+  // its own right rather than the absence of one: silence is a reading.
+  //
+  // Age is taken across everything the screen knows about, so a quiet queue with
+  // a live pipeline reads differently from a project that has stopped.
+  const newestEventAgeH = (() => {
+    const stamps = [
+      ...(d?.pending_gates || []), ...(d?.p0_open || []),
+      ...(d?.blocked || []), ...(d?.stale_in_progress || []),
+    ].map((t) => t?.updated_at).filter(Boolean)
+      .concat((window.__pipelineStages || []).map((st) => st?.ts).filter(Boolean))
+      .map((t) => Date.parse(t)).filter((n) => Number.isFinite(n));
+    if (!stamps.length) return null;
+    return (Date.now() - Math.max(...stamps)) / 3600e3;
+  })();
+
+  const needs = s.gates + s.p0;
+  const STALL_H = 72;               // the same 72h the gate-expiry hook uses
+  const greetEl = document.getElementById('inbox-greet');
+  greetEl.setAttribute('role', 'status');
+  greetEl.setAttribute('aria-live', 'polite');
+
+  if (anyDegraded()) {
+    // A read failed. Reassurance would be a claim about data we do not have.
+    greetEl.textContent = 'Some data could not be read — treat the counts below as incomplete.';
+  } else if (newestEventAgeH != null && newestEventAgeH > STALL_H) {
+    const days = Math.floor(newestEventAgeH / 24);
+    greetEl.textContent = needs
+      ? `Stalled — nothing has moved in ${days} days, and ${needs} item${needs > 1 ? 's' : ''} ${needs > 1 ? 'are' : 'is'} waiting on you.`
+      : `Stalled — nothing has moved in ${days} days, and nothing is waiting on you either.`;
+  } else if (needs) {
+    greetEl.textContent = "Here's what needs your decision.";
+  } else {
+    greetEl.textContent = newestEventAgeH == null
+      ? 'Nothing recorded yet for this project.'
+      : `All clear — last activity ${relTime(new Date(Date.now() - newestEventAgeH * 3600e3).toISOString())}.`;
+  }
+  // The stat-tile row is gone: two of its four boxes read 0 on an ordinary
+  // morning, and the two that did not repeated a count the section headings
+  // below already carry. The counts still reach the nav badge.
+  renderQueue(d);
+  renderStatusVerdict(d, newestEventAgeH);
   refreshStandDowns();
   refreshReceipt();
   refreshBudgetLine();
@@ -3506,11 +3636,122 @@ function renderInbox(d) {
   // zero and the card used to headline "Nothing needs your decision" — maximum
   // confidence at exactly the moment we knew least. Absence of findings is not
   // a finding of absence.
-  if (ac) ac.style.display = (attention === 0 && !anyDegraded()) ? '' : 'none';
+  //
+  // And "nothing needs you" has TWO readings that deserve different words.
+  //
+  //   quiet because the work is done   → rest, and the actions offer more work
+  //   quiet because nothing is running → that is not rest, it is a stopped
+  //                                      machine, and "back to deep work" is
+  //                                      the wrong thing to say to it
+  //
+  // Today's board is the second, and until now the screen had no way to say so:
+  // an empty queue rendered the same congratulation either way.
+  if (ac) {
+    const show = attention === 0 && !anyDegraded();
+    ac.style.display = show ? '' : 'none';
+    if (show) {
+      const stalled = newestEventAgeH != null && newestEventAgeH > STALL_H;
+      const txt = ac.querySelector('.ac-text');
+      const mark = ac.querySelector('.ac-mark');
+      if (stalled) {
+        const days = Math.floor(newestEventAgeH / 24);
+        if (mark) mark.textContent = '·';
+        if (txt) txt.innerHTML = `<b>Nothing is waiting on you.</b> Nothing has run in `
+          + `${days} days either — this project is idle, not finished.`;
+      } else {
+        if (mark) mark.textContent = '\u2713';
+        if (txt) txt.innerHTML = '<b>All clear.</b> Nothing needs your decision — back to deep work.';
+      }
+    }
+  }
   renderDegradedBanner('degraded-read', degradedFor('/api/tasks'),
     'Some project data could not be read — counts below are incomplete.');
 }
 
+/**
+ * The line a closed disclosure says out loud.
+ *
+ * "Project status" on its own is a label, not an answer: closed, it told the
+ * reader nothing, so the only way to learn anything was to open it — which is
+ * the cost the disclosure was supposed to remove. It now carries the verdict, and
+ * the reader opens it only when the verdict is worth chasing.
+ */
+function renderStatusVerdict(d, ageH) {
+  const el = document.getElementById('proj-status-verdict');
+  if (!el) return;
+  const parts = [];
+  if (ageH == null) parts.push('no activity recorded');
+  else if (ageH < 1) parts.push(`last activity ${Math.max(1, Math.round(ageH * 60))}m ago`);
+  else if (ageH < 48) parts.push(`last activity ${Math.round(ageH)}h ago`);
+  else parts.push(`idle ${Math.floor(ageH / 24)}d`);
+
+  const stages = window.__pipelineStages || [];
+  const active = stages.filter((x) => x && x.status === 'active').length;
+  if (stages.length) parts.push(active ? `${active} stage${active > 1 ? 's' : ''} active` : 'pipeline idle');
+
+  // A budget that cannot be measured is not a budget that is fine.
+  const budget = document.getElementById('inbox-budget-line');
+  if (budget) parts.push('budgets unmeasured');
+
+  el.textContent = ' · ' + parts.join(' · ');
+}
+
+/**
+ * The one queue. Extracted from renderInbox because the receipt fetch finishes
+ * AFTER the first render and has to put its row in — and calling renderInbox from
+ * refreshReceipt, which renderInbox itself calls, is an infinite loop. Rendering
+ * only the list it needs to change is both correct and cheaper.
+ */
+function renderQueue(d) {
+  // One queue. The reason an item is here travels ON the item, so it survives the
+  // item changing buckets — the failure that made an expired gate unreadable when
+  // it dropped out of `pending_gates`.
+  const ageD = (t) => {
+    const h = ageHours(t?.updated_at);
+    return h == null ? null : Math.floor(h / 24);
+  };
+  const withReason = (list, reason) => (list || []).map((t) => ({
+    ...t,
+    __reason: typeof reason === 'function' ? reason(t) : reason,
+  }));
+  const queue = [
+    // An expired gate is still a gate, and saying so is the whole point: the row
+    // that lost its buttons for 699 hours looked like an ordinary P0.
+    ...withReason(d?.pending_gates, (t) =>
+      (t.raw_status === 'blocked' ? 'expired gate' : 'gate')),
+    ...withReason(d?.p0_open, (t) => (t.is_gate ? 'expired gate' : 'P0')),
+    ...withReason(d?.blocked, 'blocked'),
+    ...withReason(d?.stale_in_progress, (t) => {
+      const dd = ageD(t);
+      return dd == null ? 'stale' : `stale ${dd}d`;
+    }),
+  ];
+  // The receipt-drift row, when there is one. It is not a task, so it arrives as
+  // a synthetic item rather than from any bucket.
+  if (window.__receiptDrift) queue.push(window.__receiptDrift);
+  // Gates first — a signature is owed. Then oldest first, because the
+  // longest-ignored row is what a triage list is read for.
+  queue.sort((a, b) => {
+    const ga = a.is_gate ? 0 : 1, gb = b.is_gate ? 0 : 1;
+    if (ga !== gb) return ga - gb;
+    const ah = ageHours(a.updated_at), bh = ageHours(b.updated_at);
+    if (ah == null) return 1;
+    if (bh == null) return -1;
+    return bh - ah;
+  });
+  renderInboxList('inbox-queue', queue, 'inbox-queue-count', { reasons: true });
+  // The heading claims what the rows can deliver, and no more. "Needs you" over a
+  // list of things you cannot touch is the same overclaim this screen spent the
+  // day removing — it was simply mine.
+  // "Needs you" means a decision only you can make — a gate to sign. Everything
+  // else is work that continues elsewhere, and saying otherwise is the overclaim
+  // that made six rows promise an action five of them did not have.
+  const decidable = queue.some((t) => t.is_gate);
+  const head = document.querySelector('#inbox-queue-section h3');
+  if (head) head.textContent = queue.length === 0 ? 'Needs you'
+    : (decidable ? 'Needs you' : 'Waiting on work elsewhere');
+}
+
 /**
  * Does the last approval still describe what is in the tree?
  *
@@ -3569,11 +3810,38 @@ async function refreshReceipt() {
   //
   // Moved, not removed: same wording, same detail, same page, still unmissable
   // if you read to the bottom, and it still never renders as "checked and fine".
+  // `differs` now becomes a ROW IN THE QUEUE rather than a line above it.
+  //
+  // The queue exists so that everything asking for the operator is in one place.
+  // A purple line floating above it was a second place — smaller, but a reader
+  // still had to notice it separately and decide whether it counted. It carries
+  // the chip `review drift`, sorts with everything else, and is reachable by
+  // keyboard like any other row.
+  //
+  // `unreadable` and `extended` stay in the footer. "Cannot check" is true and
+  // careful and asks for nothing; putting it in a queue named for what needs you
+  // would be the overclaim this whole screen has been unwinding.
   const actionable = d.state === 'differs';
-  const host = actionable ? el : (foot || el);
-  const colour = actionable ? 'var(--status-gate)' : 'var(--text3)';
-  host.style.display = '';
-  host.innerHTML = `<span style="color:${colour}">${body}</span>`;
+  if (actionable) {
+    el.style.display = 'none';
+    window.__receiptDrift = {
+      id: 'receipt',
+      title: `${changedFiles.length} reviewed file(s) changed after approval`,
+      desc: body,
+      updated_at: d.ts || null,
+      __reason: 'review drift',
+      __synthetic: true,
+      __files: changedFiles,
+    };
+  } else {
+    window.__receiptDrift = null;
+    const host = foot || el;
+    host.style.display = '';
+    host.innerHTML = `<span style="color:var(--text3)">${body}</span>`;
+  }
+  // The queue was rendered before this fetch returned, so it has to be rebuilt
+  // with the row in it. Silent if the Inbox is not the open panel.
+  if (window.__inboxData) renderQueue(window.__inboxData);
 }
 
 /**
@@ -3748,7 +4016,8 @@ function renderInboxList(rootId, items, countId, opts = {}) {
   // longest-ignored row at the top, which is the order a triage list is read in.
   // Gates keep their server order: their own list is already time-ordered and
   // their ⏳ stamp is the loud field.
-  const rows = opts.showApprove
+  // A queue built with reasons arrives already ranked; re-sorting would undo it.
+  const rows = (opts.showApprove || opts.reasons)
     ? items
     : items.slice().sort((a, b) => {
         const ah = ageHours(a.updated_at), bh = ageHours(b.updated_at);
@@ -3779,7 +4048,7 @@ function renderInboxList(rootId, items, countId, opts = {}) {
       alsoTag,
       // Gates (the showApprove list) get the exact date+time the decision has been
       // waiting since; other rows carry their age in the right-hand column instead.
-      opts.showApprove && t.updated_at
+      (opts.showApprove || t.is_gate === true) && t.updated_at
         ? `<span title="${esc(fmtDate(t.updated_at))}" style="color:var(--status-gate);font-weight:600">⏳ ${fmtDT(t.updated_at)}</span>`
         : '',
     ].filter(Boolean).join(' · ');
@@ -3793,7 +4062,43 @@ function renderInboxList(rootId, items, countId, opts = {}) {
     // this change is removing.
     const hrs = ageHours(t.updated_at);
     const aged = !opts.showApprove && opts.implies !== 'age' && hrs != null && hrs >= 48;
-    const actions = opts.showApprove
+    // A gate can be approved because it IS a gate — not because of which list it
+    // happened to land in.
+    //
+    // `gate-expiry.mjs` marks a gate `blocked` once it has waited 72 hours.
+    // `getInbox` excludes blocked gates from `pending_gates`, so the item drops
+    // into `p0_open`, which renders without `showApprove` — and loses its
+    // Approve/Reject buttons. The hook built to draw attention to a neglected
+    // gate quietly removed the only way to answer it. Observed on a gate that had
+    // then waited 699 hours with nothing on screen able to end that wait.
+    //
+    // The affordance now follows `is_gate`, which is a fact about the task rather
+    // than about the query that fetched it.
+    const canDecide = opts.showApprove || t.is_gate === true;
+    // A row with no action is a row that says "needs you" and means "look at me".
+    //
+    // Merging four sections under one "Needs you" heading made that promise for
+    // all of them, and five of six rows could not be acted on from this board at
+    // all: the only write action it has is approving a gate. The operator's words
+    // were "но я не могу ничего сделать" — and they were right.
+    //
+    // The board does not dispatch agents; it hands you the line that does. That is
+    // the same copy-not-dispatch the pipeline rail already uses on a failed stage,
+    // and it is the honest affordance for a task that has sat for a month: this
+    // cannot be finished here, here is what finishes it.
+    // The drift row is not a task and has no agent, so it needs its own line: the
+    // one that shows what changed under an approval. Files come from the receipt.
+    const diffBtn = (t.__synthetic && Array.isArray(t.__files) && t.__files.length)
+      ? `<div class="actions" onclick="event.stopPropagation()">`
+        + `<button type="button" class="gate-btn" title="Copy a git diff limited to the reviewed files"`
+        + ` onclick="event.stopPropagation(); copyDiff(${esc(JSON.stringify(JSON.stringify(t.__files)))})">Copy diff</button></div>`
+      : '';
+    const rerun = (!canDecide && !t.__synthetic && t.agent && t.id)
+      ? `<div class="actions" onclick="event.stopPropagation()">`
+        + `<button type="button" class="gate-btn" title="Copy the line that re-runs this agent"`
+        + ` onclick="event.stopPropagation(); copyRerun('${esc(t.agent)}')">Copy re-run</button></div>`
+      : '';
+    const actions = canDecide
       ? `<div class="actions" onclick="event.stopPropagation()">
            <button class="gate-btn gate-approve" onclick="event.stopPropagation(); gateAction('${esc(t.id)}', 'approve')">Approve</button>
            <button class="gate-btn gate-reject" onclick="event.stopPropagation(); gateAction('${esc(t.id)}', 'reject')">Reject</button>
@@ -3814,12 +4119,26 @@ function renderInboxList(rootId, items, countId, opts = {}) {
       ? `<span class="ttl-desc"${ctx.wire ? ` title="${esc(ctx.wire)}"` : ''}>${esc(shown.slice(0, 140))}${shown.length > 140 ? '…' : ''}</span>`
       : '';
     // Only gate rows can stand down, so only they carry the note.
-    const tierNote = opts.showApprove ? gateTierNote(t) : '';
+    const tierNote = (opts.showApprove || t.is_gate === true) ? gateTierNote(t) : '';
+    // Reachable by keyboard. Every row in this queue was a bare `div` with an
+    // onclick — no tabindex, no role, no key handler — so the whole list of
+    // things needing the operator could be seen and never opened without a
+    // mouse. Enter and Space now do what a click does, and the row announces
+    // itself as a button instead of as anonymous text.
+    // Why this row is here, as a property of the row. Four headed sections used to
+    // carry this fact in their headings, where it was lost the moment an item moved
+    // between them — which is how an expired gate became indistinguishable from an
+    // ordinary P0 for 699 hours.
+    const REASON_TONE = { 'expired gate': 'gate', gate: 'gate', P0: 'p0', blocked: 'blocked' };
+    const tone = REASON_TONE[t.__reason] || (String(t.__reason || '').startsWith('stale') ? 'stale' : '');
+    const reasonChip = (opts.reasons && t.__reason)
+      ? `<span class="why why-${tone}">${esc(t.__reason)}</span>`
+      : '';
     return `
-      <div class="inbox-row${aged ? ' row-aged' : ''}" onclick='openSide(${JSON.stringify(t).replace(/'/g, "&apos;")})'>
+      <div class="inbox-row${aged ? ' row-aged' : ''}" tabindex="0" role="button" aria-label="${esc(t.title || t.id)}" onkeydown='if(event.key==="Enter"||event.key===" "){event.preventDefault();this.click();}' onclick='openSide(${JSON.stringify(t).replace(/'/g, "&apos;")})'>
         <span class="id">${esc(t.id || '')}</span>
-        <span class="ttl">${esc(t.title)}${desc}<span class="meta">${meta}</span>${tierNote}</span>
-        ${actions}
+        <span class="ttl">${reasonChip}${esc(t.title)}${desc}<span class="meta">${meta}</span>${tierNote}</span>
+        ${actions}${rerun}${diffBtn}
       </div>`;
   }).join('');
 }
@@ -4677,7 +4996,7 @@ function renderPipeline(stages) {
         ? `oldest ${s.age_min < 60 ? s.age_min + 'm' : Math.round(s.age_min/60)+'h'}`
         : 'waiting';
       return `
-        <div class="pl-stage pl-gate active" title="Human gate — irreversible actions need a signature here. Click to see pending gates." onclick="drillToGates()">
+        <div class="pl-stage pl-gate active${(s.age_min != null && s.age_min < 60) ? ' fresh' : ''}" title="Human gate — irreversible actions need a signature here. Click to see pending gates." onclick="drillToGates()">
           <div class="pl-name"><span class="gate-glyph">✍</span>${label}<span class="gate-badge">${s.pending}</span></div>
           ${s.last_message ? `<div class="pl-msg">${esc(s.last_message)}</div>` : ''}
           <div class="pl-meta">${meta}</div>
@@ -4698,6 +5017,9 @@ function renderPipeline(stages) {
     // age, which is what the reader was looking at anyway.
     const msg = s.last_message ? `<div class="pl-msg">${esc(s.last_message)}</div>` : '';
     const meta = s.age_min != null ? `${s.age_min < 60 ? s.age_min + 'm' : Math.round(s.age_min/60)+'h'} ago` : '';
+    // Within the hour is live; anything older is a record of something that
+    // finished. Only the first earns the heartbeat.
+    const fresh = s.age_min != null && s.age_min < 60 ? ' fresh' : '';
     // 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
@@ -4712,7 +5034,7 @@ function renderPipeline(stages) {
                   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-stage ${s.status}${fresh}" title="Click to filter Kanban by ${esc(s.stage)}" onclick="drillToStage('${esc(s.stage)}')">
         <div class="pl-name"><span class="dot"></span>${label}</div>
         ${msg}
         <div class="pl-meta">${meta || s.status}</div>
@@ -4747,6 +5069,17 @@ function copyRerun(stage) {
   );
 }
 
+/** The same copy-not-dispatch: the board shows what changed, it does not open it. */
+function copyDiff(filesJson) {
+  let files = [];
+  try { files = JSON.parse(filesJson); } catch { /* nothing to scope to */ }
+  const cmd = files.length ? `git diff -- ${files.join(' ')}` : 'git diff';
+  navigator.clipboard.writeText(cmd).then(
+    () => showToast(`Copied <code>${esc(cmd.slice(0, 70))}…</code>`, 'success', 3000),
+    () => showToast(`Run <code>${esc(cmd.slice(0, 70))}</code>`, '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');
@@ -5069,6 +5402,52 @@ async function refreshDocsCount() {
   el.textContent = (d && !d.error && typeof d.total === 'number') ? d.total : '—';
 }
 
+// How many documents cite this one, and the order of the list.
+//
+// 105 of 156 documents have no inbound reference. A badge on two rows in three
+// marks nothing — so the count itself is the signal, and sorting by it answers
+// "where would I find X" while letting the zeroes surface without being shouted
+// at. "not measured" is not a zero: it means the document sits outside the link
+// graph, which is a different fact from being cited by nobody.
+let _docsSort = 'recent';
+
+function setDocsSort(mode) {
+  _docsSort = mode;
+  const host = document.getElementById('docs-groups');
+  if (host && _docsCache) host.innerHTML = renderDocGroups(_docsCache.groups || []);
+}
+
+function citedLabel(doc) {
+  if (doc.inbound === null || doc.inbound === undefined) {
+    return '<span class="muted absent" title="Outside docs/ — citations were not measured">not measured</span>';
+  }
+  return `<span class="muted">cited by ${doc.inbound}</span>`;
+}
+
+function renderDocGroups(groups) {
+  const sorted = (docs) => _docsSort === 'cited'
+    ? docs.slice().sort((a, b) => (b.inbound ?? -1) - (a.inbound ?? -1) || a.title.localeCompare(b.title))
+    : docs.slice().sort((a, b) => String(b.modified).localeCompare(String(a.modified)));
+
+  const control = `<div class="card" style="display:flex;align-items:center;gap:10px;flex-wrap:wrap">
+    <b>Sort</b>
+    <button type="button" class="ab-btn" aria-pressed="${_docsSort === 'recent'}" onclick="setDocsSort('recent')">Recently changed</button>
+    <button type="button" class="ab-btn" aria-pressed="${_docsSort === 'cited'}" onclick="setDocsSort('cited')">Most cited</button>
+    <span class="muted" style="font-size:var(--fs-caption)">How many other documents link here.</span>
+  </div>`;
+
+  return control + groups.map(g => `<div class="card">
+      <b>${esc(g.label)}</b> <span class="muted">${g.docs.length} — ${esc(g.why || '')}</span>
+      <div style="margin-top:8px">${sorted(g.docs).map(doc => `
+        <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:var(--fs-caption)"> · ${esc(doc.path)} · ${ago(doc.modified)} · </span>
+          <span style="font-size:var(--fs-caption)">${citedLabel(doc)}</span>
+          ${freshnessBadge(doc)}
+        </div>`).join('')}</div>
+      </div>`).join('');
+}
+
 async function loadDocs() {
   const el = document.getElementById('docs-body');
   el.innerHTML = '<span class="muted">loading…</span>';
@@ -5106,15 +5485,7 @@ async function loadDocs() {
       <details style="margin-top:8px"><summary class="muted">Mermaid source</summary>
         <pre style="white-space:pre-wrap;font-size:var(--fs-caption)">${esc(d.map.mermaid)}</pre></details></div>` : '';
 
-  const groups = (d.groups || []).map(g => `<div class="card">
-      <b>${esc(g.label)}</b> <span class="muted">${g.docs.length} — ${esc(g.why || '')}</span>
-      <div style="margin-top:8px">${g.docs.map(doc => `
-        <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:var(--fs-caption)"> · ${esc(doc.path)} · ${ago(doc.modified)}</span>
-          ${freshnessBadge(doc)}
-        </div>`).join('')}</div>
-      </div>`).join('');
+  const groups = renderDocGroups(d.groups || []);
 
   // Memory used to be its own tab listing PROJECT.md, CODEBASE.md and lessons —
   // the same files this panel's "This project" group already showed. One section
@@ -5124,7 +5495,7 @@ async function loadDocs() {
 
   // The document itself opens in the side panel now, so this panel no longer
   // needs a place to append one.
-  el.innerHTML = pipeline + map + mem + groups;
+  el.innerHTML = pipeline + map + mem + `<div id="docs-groups">${groups}</div>`;
 }
 
 /**
@@ -5193,12 +5564,18 @@ async function loadContextLayers() {
   }
 
   const layers = (m.layers || []).map(l => {
-    const global = String(l.path || '').includes('/.great_cto/') && !String(l.path || '').includes(projectRootHint());
-    const where = global ? ' <span class="muted" style="font-size:var(--fs-caption)">shared by every project</span>' : '';
+    // The reader sees `displayPath` — `.great_cto/PROJECT.md`, or `~/.great_cto/…`
+    // for a shared layer. The absolute path stays behind openDoc(), because it
+    // names this machine's home directory and username and this screen is
+    // photographed for the README. `scope` comes from the server, which knows;
+    // this used to be guessed by matching the breadcrumb text against the path.
+    const shared = l.scope === 'global';
+    const where = shared ? ' <span class="muted" style="font-size:var(--fs-caption)">shared by every project</span>' : '';
+    const shown = l.displayPath || l.name || l.id;
     return l.exists
       ? `<div style="padding:4px 0;border-bottom:1px solid var(--border,#eee)">
            <a href="#" onclick="openDoc('${esc(l.path)}');return false">${esc(l.id)}</a>${where}
-           <span class="muted" style="font-size:var(--fs-caption)"> · ${esc(l.path)}</span></div>`
+           <span class="muted" style="font-size:var(--fs-caption)"> · ${esc(shown)}</span></div>`
       : `<div style="padding:4px 0;border-bottom:1px solid var(--border,#eee)" class="muted">
            ${esc(l.id)} — not written yet${where}</div>`;
   }).join('');
@@ -5214,12 +5591,6 @@ async function loadContextLayers() {
       <div style="margin-top:8px">${pats}</div></div>` : '');
 }
 
-/** The selected project's root, for telling a shared layer from a local one. */
-function projectRootHint() {
-  const crumb = document.querySelector('.crumb-project, #crumb-project');
-  return (crumb && crumb.textContent || '').trim() || '\u0000';
-}
-
 /** The pipeline as boxes and gates — no diagram library, so it always renders. */
 // Named `renderDeclaredPipeline`, not `renderPipeline`, because there is already
 // a `renderPipeline(stages)` above that draws the LIVE rail. Both were declared
@@ -6115,7 +6486,11 @@ function cardHTML(t) {
   const pIdx = t.priority ?? 3;
   const pClass = `p${pIdx}`;
   const pLabel = PRIORITY_LABEL[pIdx];
-  const labels = (t.labels || []).filter(l => l !== 'gate');
+  // The agent is stored in BOTH `agent` and `labels` — deliberately, so filtering
+  // by label finds it — and the card drew a chip from each, so every card carried
+  // its owner's name twice. Keep the data; draw it once. The agent chip is the
+  // one that stays, because it is the one that is styled as an owner.
+  const labels = (t.labels || []).filter(l => l !== 'gate' && l !== t.agent);
   const isGate = !!t.is_gate || (t.labels || []).includes('gate');
   // raw_status reflects bd's actual status (open/in_progress/closed/blocked) —
   // mapStatus() returns 'gate' for gate-labeled cards regardless, so we need