great-cto 2.95.0 → 2.96.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 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="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>
-      <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;">
@@ -2379,6 +2407,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 +2518,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">
@@ -2842,6 +2883,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 +2936,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 +3378,222 @@ 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>
+         ${renderPipeline(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>
+        </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. */
+function renderPipeline(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 +3694,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 +3938,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 +4127,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 +4187,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 +4967,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 +5005,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 +5018,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 +5037,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 +5070,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;

package/board/scripts/lib/verdict-record.mjs

@@ -74,7 +74,7 @@ export function validateVerdict(rec) {
 }
 
 /** Build a v1 record, normalising what the caller passed. Throws if unusable. */
-export function makeVerdict({ ts, agent, verdict, project, cost_usd, meta } = {}) {
+export function makeVerdict({ ts, agent, verdict, project, cost_usd, meta, receipt } = {}) {
   const rec = {
     v: VERDICT_FORMAT_VERSION,
     ts: String(ts ?? '').trim(),
@@ -84,6 +84,12 @@ export function makeVerdict({ ts, agent, verdict, project, cost_usd, meta } = {}
   if (project) rec.project = String(project).trim();
   if (cost_usd !== undefined && cost_usd !== null && cost_usd !== '') rec.cost_usd = Number(cost_usd);
   if (meta && Object.keys(meta).length) rec.meta = meta;
+  // The fingerprint of the tree this verdict was formed over — see receipt.mjs.
+  // Optional by design: every log written before this existed still validates,
+  // and a verdict whose receipt could not be built is still a verdict. Absent
+  // means "no receipt", which the checker reports as its own state rather than
+  // as a match.
+  if (receipt && typeof receipt === 'object' && receipt.head) rec.receipt = receipt;
 
   const { valid, errors } = validateVerdict(rec);
   // Refusing here is the point: a malformed record that reaches the log is read
@@ -92,6 +98,16 @@ export function makeVerdict({ ts, agent, verdict, project, cost_usd, meta } = {}
   return rec;
 }
 
+/** A receipt from the environment, or nothing. Never throws — an unparseable
+ * receipt must not stop a verdict from being recorded. */
+export function parseReceiptEnv(raw) {
+  if (!raw || !String(raw).trim()) return undefined;
+  try {
+    const r = JSON.parse(raw);
+    return r && r.head ? r : undefined;
+  } catch { return undefined; }
+}
+
 /** One record → one NDJSON line (no trailing newline). */
 export function formatVerdict(rec) {
   return JSON.stringify(rec);
@@ -202,6 +218,7 @@ async function main(argv) {
         project: process.env.PROJECT_SLUG || undefined,
         cost_usd: process.env.COST === '' || process.env.COST === undefined ? undefined : Number(process.env.COST),
         meta,
+        receipt: parseReceiptEnv(process.env.RECEIPT),
       })) + '\n');
       return 0;
     } catch (e) {