great-cto 2.95.0 → 2.97.0

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

@@ -46,6 +46,18 @@
   --text2: #8a9a92;
   --text3: #8b958c;
 
+
+  /* Focus ring — a separate token from --accent on purpose.
+     #00d97e measures 9.68:1 on the dark background and 1.87:1 on white, against
+     a 3.0 minimum for a non-text indicator. One colour cannot serve both themes,
+     and using the brand colour for focus made the light theme's ring effectively
+     invisible. Dark keeps the brand green; light gets #047857 (5.48:1). */
+  --focus-ring: #00d97e;
+  --rail-ok-bg: rgba(0, 217, 126, 0.12);
+  --rail-fail-bg: rgba(255, 84, 102, 0.12);
+  --surface-drawer: #0f1411;
+  --drawer-shadow: 0 16px 32px rgba(0, 0, 0, 0.5);
+
   --accent: #00d97e;
   --accent-2: #34e69b;
   --accent-soft: rgba(0, 217, 126, 0.10);
@@ -86,6 +98,7 @@
   --text:  #0d1a14;
   --text2: #56655e;
   --text3: #55625b;
+  --focus-ring: #047857;
   --accent: #00d97e;
   --accent-2: #0a7d4d;
   --accent-soft: rgba(0, 217, 126, 0.12);
@@ -590,6 +603,24 @@ button { font-family: inherit; cursor: pointer; }
   transition: transform 0.2s ease;
 }
 .side.open { transform: translateX(0); }
+/* A document is not a task.
+ *
+ * 480px is right for a task: a dozen short property rows read fine in a
+ * column. A markdown document is prose and tables — ARCH docs, ADRs, plans —
+ * and at 480px a table wraps into unreadable confetti and a paragraph becomes
+ * six words a line. Opening one at half the window is the difference between
+ * reading it here and giving up and opening an editor, which is the failure
+ * this panel exists to prevent.
+ *
+ * `vw` rather than `%`: the panel is absolutely positioned inside the main
+ * column, so 50% is half of what is left after the sidebar — 41% of the window
+ * on a 1280px laptop, which is not the half screen this is meant to be.
+ *
+ * `clamp` rather than a flat 50vw: never narrower than the task width on a
+ * laptop, and never so wide on an ultrawide that the line length itself becomes
+ * the problem. */
+.side.wide { width: clamp(480px, 50vw, 1100px); }
+@media (max-width: 900px) { .side, .side.wide { width: 100%; } }
 .side-top {
   display: flex; align-items: center; gap: 10px;
   padding: 14px 18px;
@@ -1653,10 +1684,12 @@ button { font-family: inherit; cursor: pointer; }
   --agent-failing:   var(--status-blocked);
   --agent-retired:   var(--text3);
   --agent-unused:    var(--text3);
-  --rail-ok-bg:      rgba(0, 217, 126, 0.12);
-  --rail-fail-bg:    rgba(255, 84, 102, 0.12);
-  --surface-drawer:  #0f1411;
-  --drawer-shadow:   0 16px 32px rgba(0, 0, 0, 0.5);
+  /* The four theme-specific values that used to sit here have moved to the
+     theme blocks at the top of this file. A bare `:root` this far down the
+     stylesheet has the same specificity as `[data-theme="light"]` and comes
+     after it, so it won — the LIGHT theme was being served the dark drawer
+     surface (#0f1411) and the dark rail tints. The review read this as the dark
+     theme missing tokens; it was the other way round, and the cascade is why. */
 }
 
 /* Fleet summary — uses existing .metric-card; nothing new */
@@ -1671,7 +1704,7 @@ button { font-family: inherit; cursor: pointer; }
   padding: 8px 12px; border-radius: 6px;
 }
 .fleet-search input[type="search"]:focus {
-  outline: 2px solid var(--accent); outline-offset: 1px;
+  outline: 2px solid var(--focus-ring); outline-offset: 1px;
   border-color: transparent;
 }
 .fleet-search .search-hint { font-size: 11px; color: var(--text3); font-family: var(--mono); }
@@ -1696,7 +1729,7 @@ button { font-family: inherit; cursor: pointer; }
   transition: background-color 0.15s, color 0.15s, border-color 0.15s;
 }
 .facet-chip:hover { color: var(--text); border-color: var(--border-strong); }
-.facet-chip:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
+.facet-chip:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
 .facet-chip[aria-checked="true"] {
   background: var(--accent-soft); color: var(--accent);
   border-color: var(--accent-strong);
@@ -1735,7 +1768,7 @@ button { font-family: inherit; cursor: pointer; }
   transition: background-color 0.15s, border-color 0.15s;
 }
 .agent-row:hover { background: var(--bg-muted); border-color: var(--border); }
-.agent-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
+.agent-row:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
 .agent-row[aria-current="true"] {
   background: var(--accent-soft);
   border-color: var(--accent-strong);
@@ -1824,7 +1857,7 @@ button { font-family: inherit; cursor: pointer; }
   display: flex; align-items: center; justify-content: center;
 }
 .agent-drawer-close:hover { color: var(--text); border-color: var(--border-strong); }
-.agent-drawer-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
+.agent-drawer-close:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
 .agent-drawer-body {
   flex: 1; overflow-y: auto; padding: 16px 20px;
   display: flex; flex-direction: column; gap: 16px;
@@ -1866,7 +1899,7 @@ button { font-family: inherit; cursor: pointer; }
   padding: 6px 12px; border-radius: 6px;
 }
 .agent-actions button:hover { border-color: var(--border-strong); }
-.agent-actions button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
+.agent-actions button:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; }
 .agent-actions button.danger { color: var(--agent-failing); }
 .agent-actions button.danger:hover { border-color: var(--agent-failing); }
 .agent-actions button[disabled] { opacity: 0.4; cursor: not-allowed; }
@@ -2180,31 +2213,26 @@ button { font-family: inherit; cursor: pointer; }
         <span>Inbox</span>
         <span class="count" id="nav-inbox-count">0</span>
       </div>
-      <div class="nav-item" data-tab="kanban" onclick="switchTab('kanban', this)">
+      <div class="nav-item" data-tab="kanban" role="tab" tabindex="0" onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();this.click();}" onclick="switchTab('kanban', this)">
         <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M9 11l3 3L22 4 M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></svg>
         <span>Tasks</span>
         <span class="count" id="nav-task-count">0</span>
       </div>
-      <div class="nav-item" data-tab="dashboard" onclick="switchTab('dashboard', this)">
+      <div class="nav-item" data-tab="dashboard" role="tab" tabindex="0" onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();this.click();}" onclick="switchTab('dashboard', this)">
         <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M3 3v18h18 M7 14l3-3 4 4 5-5"/></svg>
         <span>Metrics</span>
       </div>
-      <div class="nav-item" data-tab="memory" onclick="switchTab('memory', this)">
-        <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
-        <span>Memory</span>
-        <span class="count" id="nav-memory-count">0</span>
-      </div>
-      <div class="nav-item" data-tab="sessions" onclick="switchTab('sessions', this)">
-        <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01"/></svg>
-        <span>Sessions</span>
-        <span class="count" id="nav-sessions-count">0</span>
+      <div class="nav-item" data-tab="docs" role="tab" tabindex="0" onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();this.click();}" onclick="switchTab('docs', this)">
+        <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/></svg>
+        <span>Docs</span>
+        <span class="count" id="nav-docs-count">0</span>
       </div>
-      <div class="nav-item" data-tab="logs" onclick="switchTab('logs', this)">
+      <div class="nav-item" data-tab="logs" role="tab" tabindex="0" onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();this.click();}" onclick="switchTab('logs', this)">
         <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><line x1="10" y1="9" x2="8" y2="9"/></svg>
-        <span>Logs</span>
+        <span>Activity</span>
         <span class="count" id="nav-logs-count">0</span>
       </div>
-      <div class="nav-item" data-tab="notifications" onclick="switchTab('notifications', this); loadNotifHistory()">
+      <div class="nav-item" data-tab="notifications" role="tab" tabindex="0" onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();this.click();}" onclick="switchTab('notifications', this); loadNotifHistory()">
         <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><path d="M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9 M10.3 21a1.94 1.94 0 0 0 3.4 0"/></svg>
         <span>Notifications</span>
         <span id="nav-notifications-badge" class="share-badge off" style="margin-left:auto;">
@@ -2256,6 +2284,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">
@@ -2304,6 +2335,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>
@@ -2379,6 +2421,14 @@ button { font-family: inherit; cursor: pointer; }
           <h2>Session logs</h2>
           <span class="logs-hint">Written by <code>/save</code> · Restored by <code>/resume</code></span>
         </div>
+        <!-- Sessions used to be its own sidebar entry. Both answered "what did
+             the agents do" — this panel from written summaries, that one from raw
+             transcripts — so a reader had to choose which to open before knowing
+             which held the answer. One entry, two depths. -->
+        <div style="display:flex;gap:8px;margin:0 0 12px">
+          <button id="act-tab-logs" class="facet-chip active" onclick="setActivityView('logs')">Summaries</button>
+          <button id="act-tab-sessions" class="facet-chip" onclick="setActivityView('sessions')">Transcripts</button>
+        </div>
         <div class="logs-layout">
           <div class="logs-list" id="logs-list"><div class="empty">Loading…</div></div>
           <div class="logs-detail" id="logs-detail"><div class="empty">Select a session to view</div></div>
@@ -2482,6 +2532,11 @@ button { font-family: inherit; cursor: pointer; }
       <div id="sessions-body" class="muted">Loading…</div>
     </div>
 
+    <div class="panel" id="panel-docs">
+      <h1>Docs</h1>
+      <div id="docs-body" class="muted">loading…</div>
+    </div>
+
     <div class="panel" id="panel-memory">
       <div class="memory-page">
         <div class="memory-side">
@@ -2713,7 +2768,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()
@@ -2730,6 +2790,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;
@@ -2744,6 +2806,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);
@@ -2753,9 +2959,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
@@ -2771,16 +2985,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();
@@ -2842,6 +3061,33 @@ async function refreshResume() {
   if (d) renderResume(d);
 }
 
+/**
+ * What a verdict says, in the width of a column.
+ *
+ * Two shapes reach here: the legacy `agent: free text` line, and the versioned
+ * JSON record the verdict helper writes today. Only the first has anything
+ * readable after the colon — for the second, splitting on `': '` yields the
+ * whole record, which is how a JSON blob ended up rendered as a summary.
+ */
+function summariseVerdict(v, raw) {
+  let meta = null;
+  const t = String(raw || '').trim();
+  if (t.startsWith('{')) { try { meta = JSON.parse(t).meta || null; } catch { meta = null; } }
+
+  if (meta) {
+    // `scope` is what the run was about; the rest are the artefacts it produced.
+    const what = meta.scope || meta.feature || meta.task || null;
+    const artefact = Object.values(meta).find(x => typeof x === 'string' && x.endsWith('.md'));
+    const tail = what || (artefact ? artefact.split('/').pop() : null);
+    return tail ? `${v.verdict || 'verdict'} · ${tail}` : (v.verdict || 'verdict');
+  }
+
+  const i = t.indexOf(': ');
+  if (i !== -1) return t.slice(i + 2);
+  // Not JSON and not `agent: text` — a bare line, which is still readable.
+  return t || (v.verdict || 'verdict');
+}
+
 function renderResume(d) {
   const card = document.getElementById('resume-card');
   if (!card) return;
@@ -2868,8 +3114,16 @@ function renderResume(d) {
     const vu = (v.verdict || '').toUpperCase();
     const cls = ['APPROVED','DONE','PASS'].includes(vu) ? 'ok' :
                 ['BLOCKED','FAIL','REJECTED'].includes(vu) ? 'fail' : '';
+    // A verdict is written in one of two shapes: the legacy `AGENT: text` line,
+    // and the versioned JSON record the helper writes today. This column split
+    // on `': '` and printed whatever followed — which for the JSON shape is the
+    // whole record, so the column that should read "DONE · board-review" showed
+    // `{"v":1,"ts":"2026-08-09T06:19:37Z","agent":"design-advis…`.
+    //
+    // The structured fields are already parsed by the time they arrive; the raw
+    // line is a fallback for the legacy shape, not the primary source.
     const raw = v.raw || '';
-    const after = raw.indexOf(': ') !== -1 ? raw.slice(raw.indexOf(': ') + 2) : raw;
+    const after = summariseVerdict(v, raw);
     window.__resumeVerdicts = verdicts;
     return `<div class="resume-item" onclick="showVerdictDetail(${i})" role="button" tabindex="0">
       <span class="ri-tag ${cls}">${esc(v.agent || 'agent')}</span>
@@ -3302,6 +3556,234 @@ function mdToHtml(md) {
   });
 }
 
+// Activity — one entry, two depths.
+//
+// Sessions and Logs were separate sidebar items answering the same question,
+// "what did the agents do", from written summaries and from raw transcripts. A
+// reader had to choose which to open before knowing which one held the answer.
+function setActivityView(view) {
+  const logsPanel = document.getElementById('logs-list')?.closest('.panel') || document.getElementById('panel-logs');
+  const sessHost = document.getElementById('sessions-body');
+  const logsHost = document.getElementById('logs-list')?.parentElement;
+  const inPanel = document.getElementById('activity-sessions-host');
+
+  document.getElementById('act-tab-logs')?.classList.toggle('active', view === 'logs');
+  document.getElementById('act-tab-sessions')?.classList.toggle('active', view === 'sessions');
+
+  // The transcript view is rendered by the Sessions panel's own code; it is moved
+  // into this panel rather than reimplemented, so the two cannot drift apart.
+  let host = inPanel;
+  if (!host) {
+    host = document.createElement('div');
+    host.id = 'activity-sessions-host';
+    logsPanel?.appendChild(host);
+  }
+  if (view === 'sessions') {
+    if (logsHost) logsHost.style.display = 'none';
+    host.style.display = '';
+    if (sessHost && sessHost.parentElement !== host) host.appendChild(sessHost);
+    loadSessions();
+  } else {
+    host.style.display = 'none';
+    if (logsHost) logsHost.style.display = '';
+  }
+}
+
+// ── Docs ────────────────────────────────────────────────────────────────────
+//
+// A project accumulates documentation nobody can find: this repository has
+// twenty architecture documents, eleven ADRs and thirty-one plans, and the only
+// way to read one was to know its filename.
+//
+// The two diagrams are computed on request rather than stored. docs/ARCHITECTURE.md
+// is hand-drawn, three months old, and says "34 agents" where there are
+// sixty-nine — a drawn picture goes stale silently, a derived one cannot.
+let _docsCache = null;
+
+/**
+ * The sidebar badge, without rendering the panel.
+ *
+ * It was written only inside `loadDocs`, which runs when the tab is opened — so
+ * a project with a hundred and seventy-five documents showed `0` until you
+ * clicked, and `0` is the one number that reads as "there is nothing here".
+ * A dash says "not counted yet", which is what it actually means.
+ */
+async function refreshDocsCount() {
+  const el = document.getElementById('nav-docs-count');
+  if (!el) return;
+  let d;
+  try { d = await api(`/api/docs${pqs()}`); } catch { d = null; }
+  el.textContent = (d && !d.error && typeof d.total === 'number') ? d.total : '—';
+}
+
+async function loadDocs() {
+  const el = document.getElementById('docs-body');
+  el.innerHTML = '<span class="muted">loading…</span>';
+  let d;
+  try {
+    // pqs() carries the selected project — without it this panel would repeat
+    // the defect that made sixteen endpoints show the server's own directory.
+    d = await api(`/api/docs${pqs()}`);
+  } catch (e) {
+    // "Could not read" must never render as "there is nothing here" — the
+    // failure this board keeps making in other forms.
+    el.innerHTML = `<div class="card"><b>Could not read the project's documents.</b>
+      <div class="muted" style="margin-top:6px">${String(e && e.message || e)}</div></div>`;
+    return;
+  }
+  _docsCache = d;
+  document.getElementById('nav-docs-count').textContent = d.total || 0;
+
+  const pipeline = d.pipeline
+    ? `<div class="card"><b>Pipeline</b> <span class="muted">— how a feature moves, drawn from shared/pipeline.toml</span>
+         ${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>`
+    : '';
+
+  const map = d.map ? `<div class="card"><b>Components</b>
+      <span class="muted">— derived ${ago(d.map.generatedAt)}, so it cannot disagree with the code</span>
+      <div style="display:flex;flex-wrap:wrap;gap:8px;margin-top:10px">
+        ${d.map.nodes.map(n => `<div style="border:1px solid var(--border,#ddd);border-radius:6px;padding:8px 10px;min-width:120px">
+          <div><b>${esc(n.label)}</b> <span class="muted">${n.count}</span></div>
+          <div class="muted" style="font-size:11px">${esc(n.what || '')}</div></div>`).join('')}
+      </div>
+      ${d.map.edges.length ? `<div class="muted" style="margin-top:8px;font-size:11px">
+        ${d.map.edges.map(e => `${esc(e.from)}→${esc(e.to)} (${e.count})`).join(' · ')}</div>` : ''}
+      <details style="margin-top:8px"><summary class="muted">Mermaid source</summary>
+        <pre style="white-space:pre-wrap;font-size:11px">${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:11px"> · ${esc(doc.path)} · ${ago(doc.modified)}</span>
+          ${freshnessBadge(doc)}
+        </div>`).join('')}</div>
+      </div>`).join('');
+
+  // 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
+  // for documentation, as asked; what Memory knew that a directory walk does not
+  // is folded in rather than dropped.
+  const mem = await loadContextLayers();
+
+  // 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;
+}
+
+/**
+ * The context an agent reads, and the patterns learned across projects.
+ *
+ * A directory walk finds files that exist. This list is the CANONICAL set of
+ * layers, so a layer that is absent is information — "this project has recorded
+ * no lessons yet" is a fact about the project, not an empty row to hide. Three
+ * 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.
+ */
+async function loadContextLayers() {
+  let m;
+  try { m = await api(`/api/memory${pqs()}`); } catch { m = null; }
+  if (!m || m.error) {
+    return `<div class="card"><b>Agent context</b>
+      <div class="muted" style="margin-top:6px">could not be read — ${esc((m && m.error) || degradedFor('/api/memory') || 'no response')}</div></div>`;
+  }
+
+  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:11px">shared by every project</span>' : '';
+    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:11px"> · ${esc(l.path)}</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('');
+
+  const pats = (m.patterns || []).map(p =>
+    `<div style="padding:4px 0" class="muted">${esc(p.id)} — ${esc(p.title || '')}</div>`).join('');
+
+  return `<div class="card">
+      <b>Agent context</b> <span class="muted">${(m.layers || []).filter(l => l.exists).length} of ${(m.layers || []).length} written — what an agent reads before it starts</span>
+      <div style="margin-top:8px">${layers}</div>
+    </div>` + (pats ? `<div class="card">
+      <b>Learned patterns</b> <span class="muted">${(m.patterns || []).length} — failures seen often enough to be written down</span>
+      <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
+// 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+)/);
+    if (m) edges.push({ from: m[1], gate: (m[2] || '').trim(), to: m[3], join: false });
+    const j = line.match(/^\s*(\w+)\s*-\.->\|join\|\s*(\w+)/);
+    if (j) edges.push({ from: j[1], to: j[2], join: true });
+  }
+  if (!edges.length) return '<div class="muted">no transitions declared</div>';
+  const name = (id) => id.replace(/_/g, '-');
+  return `<div style="margin-top:10px;font-size:12px">${edges.map(e => `
+    <div style="display:flex;align-items:center;gap:8px;padding:3px 0">
+      <span style="border:1px solid var(--border,#ddd);border-radius:4px;padding:2px 8px">${esc(name(e.from))}</span>
+      <span class="muted">${e.join ? '⋯ join ⋯' : (e.gate ? `→ ${esc(e.gate)} →` : '→')}</span>
+      <span style="border:1px solid var(--border,#ddd);border-radius:4px;padding:2px 8px">${esc(name(e.to))}</span>
+    </div>`).join('')}</div>`;
+}
+
+/**
+ * Open a document in the side panel — the same drawer a task, a verdict and a
+ * decision open in.
+ *
+ * It used to append the rendered markdown to the BOTTOM of the Docs panel and
+ * scroll there, so reading a document meant losing the list you were browsing,
+ * and closing it meant scrolling back up. Every other section of this board
+ * answers a click by sliding the detail in from the right; this one invented its
+ * own mechanic, and a reader has to learn two.
+ */
+async function openDoc(p) {
+  const panel = document.getElementById('side-panel');
+  const body = document.getElementById('side-body');
+  const idEl = document.getElementById('side-id');
+  const tl = document.getElementById('side-timeline');
+  if (!panel || !body) return;
+
+  idEl.textContent = p.split('/').pop();
+  body.innerHTML = '<div style="padding:18px" class="muted">loading…</div>';
+  if (tl) tl.innerHTML = '';
+  panel.classList.add('open', 'wide');
+
+  try {
+    const q = pqs();
+    const d = await api(`/api/doc?path=${encodeURIComponent(p)}${q ? '&' + q.slice(1) : ''}`);
+    if (!d || d.error) throw new Error(d?.error || 'doc not found');
+    idEl.textContent = d.name || p;
+    body.innerHTML = `<div class="muted" style="font-size:11px;margin-bottom:10px">${esc(d.path)}</div>
+      <div class="side-desc md">${mdToHtml(d.content)}</div>`;
+  } catch (e) {
+    body.innerHTML = `<div class="side-desc"><b>Could not open ${esc(p)}</b>
+      <div class="muted" style="margin-top:6px">${esc(String(e && e.message || e))}</div></div>`;
+  }
+}
+
 // ── Sessions ────────────────────────────────────────────────────────────────
 //
 // Every other panel answers "what happened". This one answers "how", which is
@@ -3402,10 +3884,28 @@ async function searchTranscripts() {
 
 async function loadMemory() {
   const d = await api(`/api/memory${pqs()}`);
-  memoryData = d || { layers: [], patterns: [] };
+  // `d || {layers: []}` collapsed a failed read into "this project has no
+  // memory" — the two look identical to a reader and mean opposite things.
+  if (!d || d._neterr || d.error) {
+    memoryData = { layers: [], patterns: [] };
+    renderMemorySidebar();
+    const c = document.getElementById('nav-memory-count'); if (c) c.textContent = '—';
+    renderDegradedBanner('degraded-memory',
+      (d && (d.error || (d._neterr && 'board not reachable — restart it'))) || 'no response',
+      'Memory could not be read');
+    return;
+  }
+  renderDegradedBanner('degraded-memory', degradedFor('/api/memory'), 'Memory could not be read');
+  memoryData = d;
   renderMemorySidebar();
-  document.getElementById('nav-memory-count').textContent =
-    (memoryData.layers || []).filter(l => l.exists).length + (memoryData.patterns || []).length;
+  // Memory folded into Docs, so this badge no longer exists. It was still
+  // written unconditionally, and the TypeError left the rest of this function —
+  // including the auto-select below — unreached on every page load.
+  const memCount = document.getElementById('nav-memory-count');
+  if (memCount) {
+    memCount.textContent =
+      (memoryData.layers || []).filter(l => l.exists).length + (memoryData.patterns || []).length;
+  }
   // Auto-select first existing layer
   if (!activeMemKey) {
     const first = (memoryData.layers || []).find(l => l.exists);
@@ -3628,6 +4128,7 @@ async function switchProject(slug) {
   try { renderDashboard(metrics); } catch (e) { console.warn('renderDashboard failed', e); }
   try { renderShareState(shareState); } catch (e) { console.warn('renderShareState failed', e); }
   loadMemory();
+  refreshDocsCount();   // the badge said 0 until the tab was opened — same bug the Logs badge had
   refreshCost();
   refreshPipeline();
   refreshLogs();   // populate the Logs nav badge (was lazy — stuck at 0 until the tab was opened)
@@ -3816,6 +4317,7 @@ async function init() {
   try { renderDashboard(metrics); } catch (e) { console.warn('renderDashboard failed', e); }
   try { renderShareState(shareState); } catch (e) { console.warn('renderShareState failed', e); }
   loadMemory();
+  refreshDocsCount();   // the badge said 0 until the tab was opened — same bug the Logs badge had
   refreshCost();
   refreshPipeline();
   refreshLogs();   // populate the Logs nav badge (was lazy — stuck at 0 until the tab was opened)
@@ -3875,7 +4377,15 @@ function api(url, opts) {
     if (d) { try { BOARD_DEGRADED[key] = decodeURIComponent(d); } catch { BOARD_DEGRADED[key] = d; } }
     else delete BOARD_DEGRADED[key];
     return r.json();
-  }).catch(() => null);
+  }).catch(() => {
+    // A request that never completed is the one case the degradation mechanism
+    // could not see: the header lives on a response, and there is no response.
+    // So the board went quiet exactly when it had lost contact with itself —
+    // and worse, a key deleted by an earlier success stayed deleted, leaving
+    // every panel looking healthy while nothing could be read at all.
+    BOARD_DEGRADED[key] = 'the board is not reachable — is the server still running?';
+    return null;
+  });
 }
 
 function connectSSE() {
@@ -4647,7 +5157,10 @@ function openSide(task) {
     ${acceptanceSec}
     ${notesSec}
     ${task.close_reason ? `<div class="result-box"><div class="side-section-head">Close reason</div>${esc(task.close_reason)}</div>` : ''}`;
-  document.getElementById('side-panel').classList.add('open');
+  const sidePanel = document.getElementById('side-panel');
+  sidePanel.classList.add('open');
+  // A task after a document: back to the narrower column the rows were sized for.
+  sidePanel.classList.remove('wide');
   // Clear and load timeline
   const tlEl = document.getElementById('side-timeline');
   if (tlEl) tlEl.innerHTML = '';
@@ -4682,6 +5195,7 @@ async function openDocInSide(rel) {
   const d = await api(`/api/doc?path=${encodeURIComponent(rel)}${qs}`);
   if (!d || d.error) { showToast('✗ ' + esc(d?.error || 'doc not found'), 'error', 3500); return; }
   document.getElementById('side-id').textContent = d.name;
+  document.getElementById('side-panel').classList.add('wide');
   document.getElementById('side-body').innerHTML = `
     <button class="gate-btn" onclick="openSide(_sideTask)" style="margin-bottom:12px">← back to task</button>
     <div class="side-desc md">${mdRender(d.content)}</div>`;
@@ -4694,6 +5208,11 @@ document.addEventListener('keydown', e => { if (e.key === 'Escape') closeSide();
 
 /* ── Tabs ───────────────────────────────────────────────────────────────── */
 function switchTab(id, el) {
+  // `agents` has no sidebar entry by design: it is a drill-in from Dashboard.
+  // Without this the call fell through to code that expects a nav element and
+  // left the sidebar with nothing selected.
+  if (!el) el = document.querySelector(`.nav-item[data-tab="${id}"]`)
+    || document.querySelector('.nav-item[data-tab="dashboard"]');
   currentTab = id;
   // sidebar nav
   document.querySelectorAll('.nav-item[data-tab]').forEach(t => {
@@ -4708,15 +5227,24 @@ 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 = { dashboard: 'Board', inbox: 'Inbox', tasks: 'Tasks', agents: 'Agents', memory: 'Memory', sessions: 'Sessions', logs: 'Logs', notifications: 'Notifications', metrics: 'Metrics' };
+  const TAB_LABELS = { 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';
   if (id === 'dashboard' || id === 'agents') {
-    api(`/api/metrics${pqs()}`).then(m => { if (m) { metrics = m; renderDashboard(m); } });
+    // pqsd(), not pqs(): this call omitted `days` entirely, so the server applied
+    // its 30-day default and overwrote whatever window the period chips had
+    // selected. Pick "7d", switch tabs, come back — the chip still read 7d and
+    // the numbers were thirty days old, which is the period selector appearing
+    // not to work at all.
+    //
+    // Through the sequence guard too, so a tab switch cannot land after a newer
+    // period request and clobber it.
+    _refreshMetricsRaced(`/api/metrics${pqsd()}`).then(m => { if (m) { metrics = m; renderDashboard(m); } });
     if (id === 'dashboard') refreshCost();
     if (id === 'agents') refreshAgentsInstalled();
   }
   if (id === 'inbox') refreshInbox();
-  if (id === 'memory') loadMemory();
+  if (id === 'logs') setActivityView('logs');
+  if (id === 'docs') loadDocs();
   if (id === 'sessions') loadSessions();
   if (id === 'logs') refreshLogs();
   if (id === 'notifications') loadNotifications();
@@ -4732,6 +5260,12 @@ async function refreshLogs() {
     const countEl = document.getElementById('nav-logs-count'); if (countEl) countEl.textContent = '0';
     return;
   }
+  // The server already says WHY a read came back short — /api/logs has emitted
+  // X-Board-Degraded since the tasks fix, and until now the UI threw it away.
+  // An unreadable logs directory rendered as a project that had never run.
+  renderDegradedBanner('degraded-logs', degradedFor('/api/logs'),
+    'Session logs could not be read');
+
   allLogs = data.logs || [];
   const countEl = document.getElementById('nav-logs-count');
   if (countEl) countEl.textContent = allLogs.length;