create-pmos 0.123.0 → 0.125.0

package/workspace/public/pm/c3-docs.js

@@ -0,0 +1,290 @@
+/* pm/c3-docs.js — the Documents sub-view of Initiatives on /c3.html (console3.html: IDOCS and dcRow at lines 3652 to 3665 and 3790, docHealthCard 4105,
+ * the coverage matrix at 3849, the List and Graph toggle dvToggle 4191, the graph graphSVG and relHtml at 4160 to 4190).
+ * REAL: GET /api/docs/library (the repository's documents: files { path, title, category, date, initiative }, edges [from, to, kind] and the kinds) and
+ * POST /api/doc-health/check { ws, path } (the six health checks, recomputed from the text: { health: { passed, total, checks } }, read-only).
+ *   - A real document's state is derived from its date only: Current, or Stale when it has not changed for 30 days. Draft and Missing need a record of
+ *     what a lane requires, which the library does not carry, so they are not shown for real documents.
+ *   - A real edge has no sync state; the page marks an edge "out of sync" when its source changed after the document it feeds (dates from the library)
+ *     for the link, cites and anchor kinds, and "in sync" otherwise. No edge is marked conflict or missing from real data.
+ *   - Health is asked for the first eight documents shown, one at a time, and is drawn as "N of M checks" on the row and in the health card.
+ * DEMO ONLY (optional fields the real library does not carry): per file ty, v, st, why, by, up, node (Goal, Decision, Data, Tickets) and col; a 4th
+ * edge element (state); the response's `cards` (Benchmark, Research themes). The 14 documents, the graph and the cards are the mockup's own.
+ * ROW AND SHEET: a row opens its case file in place and swipes (right: ask the agent for the update, left: later); its Open chip opens the document sheet (c3-doc-sheet.js:
+ * Read, Edit by hand with a why, Ask the agent, History, Health, Relations). The list itself writes nothing; an edit is written by the sheet through POST /api/doc-sheet/edit. */
+import { el } from './dom.js';
+import { pmGet, pmPost } from './http.js';
+import { c3ic, c3ring } from './pm-work-view.js';
+import { makeView, frame, hBars, card, emptyRow, dayLabel, short, rowShell, caseNode, markDone, say } from './c3-init-extras.js';
+import { openDocSheet } from './c3-doc-sheet.js';
+
+const NS = 'http://www.w3.org/2000/svg';
+const sv = (tag, a, ...kids) => { const n = document.createElementNS(NS, tag); for (const k of Object.keys(a || {})) if (a[k] != null) n.setAttribute(k, a[k]); for (const c of kids) if (c) n.appendChild(c); return n; };
+const svt = (x, y, t, a) => { const n = sv('text', { x, y, ...(a || {}) }); n.textContent = t; return n; };
+
+const DST = { current: ['Current', 'var(--success)', 'check'], stale: ['Stale', 'var(--warning)', 'alert'], draft: ['Draft', 'var(--acc)', 'clock'], missing: ['Missing', 'var(--destructive)', 'plus'] };
+const DTI = { PRD: 'doc', Rubric: 'scale', Research: 'notes', Benchmark: 'report', Design: 'img', Brief: 'flag', Specs: 'doc', Evals: 'scale', Decisions: 'scale', Explainers: 'info', Prototypes: 'img' };
+const COLS = [['Spec', ['PRD', 'Brief', 'Spec']], ['Rubric', ['Rubric']], ['Research', ['Research']], ['Benchmark', ['Benchmark']], ['Design', ['Design']]];
+const ESTATE = { ok: ['in sync', 'var(--ring)'], drift: ['out of sync', 'var(--warning)'], conflict: ['conflict', 'var(--destructive)'], missing: ['missing', 'var(--muted-foreground)'] };
+const REAL_TYPE = { spec: 'Spec', eval: 'Rubric', res: 'Research', proto: 'Design' };   // the library's categories that are the mockup's document types
+const REAL_COL = { dec: 0, guide: 0, know: 0, res: 1, spec: 2, ini: 2, eval: 3, proto: 3, exp: 3 };
+const STALE_DAYS = 30;
+const hcol = (h) => (h.total === 0 ? 'var(--muted-foreground)' : h.passed === h.total ? 'var(--success)' : h.total - h.passed === 1 ? 'var(--warning)' : 'var(--destructive)');
+const dayNum = (iso) => Math.round(Date.parse(String(iso).slice(0, 10) + 'T00:00:00Z') / 86400000);
+const todayIso = () => { const d = new Date(); return d.getFullYear() + '-' + String(d.getMonth() + 1).padStart(2, '0') + '-' + String(d.getDate()).padStart(2, '0'); };
+
+/** The documents of a library response in the page's own shape. */
+export function docsOf(lib, today) {
+  if (!lib || !lib.files) return [];
+  const catName = Object.fromEntries((lib.categories || []).map((c) => [c.key, c.name]));
+  return lib.files.map((f, i) => {
+    const real = !f.st;
+    const age = real && f.date && today ? dayNum(today) - dayNum(f.date) : 0;
+    return { i, path: f.path, name: f.title || f.path, ty: f.ty || REAL_TYPE[f.category] || catName[f.category] || f.category, cat: f.category, node: f.node || null,
+      col: f.col != null ? f.col : (REAL_COL[f.category] != null ? REAL_COL[f.category] : 3), ini: f.initiative || '', v: f.v || '', up: f.up || (f.date ? dayLabel(f.date) : ''), date: f.date || '',
+      st: f.st || (age > STALE_DAYS ? 'stale' : 'current'), why: f.why || '', real };
+  });
+}
+const isDoc = (d) => !d.node;
+const needs = (d) => d.st === 'stale' || d.st === 'missing';
+/** The count on the Documents button: documents that need attention. A real document counts only when it is stale and its initiative is in Now. */
+export async function badge(ctx) {
+  const lib = await pmGet('/api/docs/library' + (ctx && ctx.ws ? '?ws=' + encodeURIComponent(ctx.ws) : ''));
+  if (!lib || !lib.ok) return null;
+  const now = new Set(((ctx && ctx.rows) || []).filter((r) => r.horizon === 'now').map((r) => r.id));
+  return docsOf(lib, todayIso()).filter((d) => isDoc(d) && d.ini && needs(d) && (!d.real || now.has(d.ini))).length;
+}
+
+/** The document sheet for a document (the Open chip, the Documents graph, a related document). `ask` opens it on Ask the agent with that request. */
+function openDoc(V, d, ask) {
+  if (!d || d.st === 'missing' || d.node) return;
+  const ui = openDocSheet({ ws: V.ctx.ws, doc: { path: d.path, name: d.name, ty: d.ty, v: d.v, st: d.st, ini: d.ini, iniName: iniName(V, d.ini) }, mode: ask ? 'ask' : 'read', prompt: ask || '',
+    relations: (doc, openOther) => relationsOf(V, d, openOther), onChanged: () => { delete V.health[d.path]; V.asking = false; load(V); } });
+  ui.setOpener((o) => openDoc(V, o));
+}
+const iniName = (V, id) => { const i = V.lib && V.lib.initiatives && V.lib.initiatives[id]; return i ? i.short || i.title : id || ''; };
+
+/** The first thing to ask the agent about a document: the first failing check's own request, else a plain one. */
+function askFor(V, d) {
+  const h = V.health[d.path]; const c = h && h.checks && h.checks.find((x) => x.pass === false && x.fix);
+  return c ? c.fix : d.st === 'draft' ? 'Finish the draft: fill the missing sections' : 'Update this document so it matches the current plan';
+}
+
+/** The case file of a document (console3.html genDoc, line 3787). "Have the agent draft the update" opens the sheet on Ask the agent: the agent proposes, the slide that accepts is in the sheet. */
+function caseOf(V, d) {
+  const chg = [['doc', d.ty + (d.v ? ' ' + d.v : ''), 'version']];
+  if (d.why) chg.push(['info', d.why, 'agent']);
+  else if (d.st === 'stale') chg.push(['clock', 'Not changed for more than ' + STALE_DAYS + ' days', 'git']);
+  if (d.up) chg.push(['clock', 'Updated ' + d.up, '']);
+  const h = V.health[d.path]; if (h && h.total) chg.push([h.passed === h.total ? 'check' : 'alert', h.passed + ' of ' + h.total + ' health checks pass', 'health', h.passed === h.total ? 'ok' : 'warn']);
+  const opts = [];
+  if (d.st === 'stale' || d.st === 'missing' || d.st === 'draft') opts.push({ id: 'dr', l: d.st === 'draft' ? 'Review the agent draft' : 'Have the agent draft ' + (d.st === 'missing' ? 'it' : 'the update'), rec: 1, fx: [['check', 'You approve before anything is shared', 'ok'], ['lock', d.st === 'missing' ? 'Nothing is written until you accept' : 'Opens the document on Ask the agent', '']] });
+  opts.push({ id: 'lt', l: 'Later', fx: [] });
+  const sit = d.st === 'stale' ? 'This document no longer matches the plan. People may be reading an old version.' : d.st === 'missing' ? 'The initiative has no ' + String(d.ty).toLowerCase() + '. ' + (d.ty === 'Benchmark' ? 'It is optional but cheap.' : 'The gate needs it.') : d.why || (d.name + ' is ' + d.st + (d.up ? ', last changed ' + d.up : '') + '.');
+  return caseNode(V, 'doc:' + d.path, { sit, conf: d.st === 'current' ? 90 : 78, chg, opts, cta: 'Slide to confirm', go: d.st !== 'missing' ? ['open', d.path, 'Open the document'] : null }, {
+    onGo: () => openDoc(V, d),
+    onConfirm: (o) => {
+      if (o.id === 'lt') { markDone(V, 'doc:' + d.path, 'Parked for this week.'); return; }
+      if (d.st === 'missing') { markDone(V, 'doc:' + d.path, 'Draft started. It lands in Review as a diff you approve.'); return; }
+      openDoc(V, d, askFor(V, d));
+    } });
+}
+
+function docRow(V, d) {
+  const S = DST[d.st] || DST.current; const h = V.health[d.path];
+  const ini = V.lib.initiatives && V.lib.initiatives[d.ini];
+  /* the swipe (console3.html line 3881): right asks the agent for the update, left leaves it for later */
+  const sw = { labelRight: d.st === 'current' ? 'already current' : 'have the agent draft the update', labelLeft: 'later', iconRight: 'spark', iconLeft: 'moon',
+    onRight: () => { if (d.st === 'current' || d.st === 'missing') { say(d.st === 'current' ? 'Already current' : 'Open its case to start the draft'); return; } say('Opened on Ask the agent. The draft is a proposal you accept.'); openDoc(V, d, askFor(V, d)); },
+    onLeft: () => say('Later') };
+  return rowShell(V, { key: 'doc:' + d.path, attrs: { 'data-in-doc': d.path, 'data-id': d.path, 'data-dc': '1' }, icon: DTI[d.ty] || 'doc', iconColor: S[1], title: d.name, sw, xpContent: caseOf(V, d),
+    chips: [el('span', { class: 'chip2', style: 'color:' + S[1] }, c3ic(S[2], 'sm'), S[0]),
+      el('span', { class: 'chip2' }, d.ty),
+      d.v ? el('span', { class: 'chip2 mono' }, d.v) : null,
+      h && h.total ? el('span', { class: 'chip2', style: 'color:' + hcol(h), 'data-in-health': d.path }, c3ic('shield', 'sm'), h.passed + ' of ' + h.total + ' checks') : null,
+      d.up ? el('span', { class: 'chip2' }, c3ic('clock', 'sm'), d.up) : null,
+      ini ? el('span', { class: 'tag' }, V.lib.initiatives[d.ini].short || short(ini.title, 24)) : d.ini ? el('span', { class: 'tag' }, d.ini) : null,
+      d.st !== 'missing' ? el('button', { type: 'button', class: 'chip2 lk', 'data-doc-open': d.path, onclick: () => openDoc(V, d) }, c3ic('doc', 'sm'), 'Open') : null] });
+}
+
+/* ── health: asked per document, one at a time ─────────────────────────────────────────────────────────────── */
+function askHealth(V, docs) {
+  const todo = docs.filter((d) => !V.health[d.path] && !d.node && d.st !== 'missing').slice(0, docs.some((d) => !d.real) ? 14 : 8);
+  if (V.asking || !todo.length) return;
+  V.asking = true;
+  (async () => {
+    for (const d of todo) {
+      if (V.disposed) return;
+      const r = await pmPost('/api/doc-health/check', { ws: V.ctx.ws, path: d.path });
+      V.health[d.path] = r && r.ok && r.health ? { passed: r.health.passed, total: r.health.total, checks: r.health.checks } : { passed: 0, total: 0, checks: [], err: true };
+      V.render();
+    }
+    V.asking = false;
+  })();
+}
+
+function healthCard(V, docs) {
+  const hs = docs.map((d) => [d, V.health[d.path]]).filter(([, h]) => h && h.total);
+  if (!hs.length) return card('shield', 'Document health', 'can I trust it without rereading', el('p', { class: 'dim', style: 'font-size:var(--fs-2);margin:0', role: 'status' }, V.asking ? 'Checking the documents.' : 'No document has been checked yet.'));
+  const good = hs.filter(([, h]) => h.passed === h.total).length;
+  hs.sort((a, b) => a[1].passed / a[1].total - b[1].passed / b[1].total);
+  return card('shield', 'Document health', 'can I trust it without rereading',
+    el('div', { class: 'chips2' }, el('span', { style: 'display:inline-flex' }, c3ring(good, Math.max(1, hs.length), 44)), el('span', { class: 'dim', style: 'font-size:var(--fs-2)' }, good + ' of ' + hs.length + ' pass every check: fresh, matches decisions and data, complete, traced, readers current')),
+    hBars(hs.slice(0, 5).map(([d, h]) => [short(d.name, 28), h.passed / h.total, hcol(h), h.passed + ' of ' + h.total])));
+}
+
+function coverageCard(V, docs) {
+  const rows = (V.scope ? V.ctx.rows.filter((r) => r.id === V.scope) : V.ctx.rows).slice(0, 5);
+  if (!rows.length) return null;
+  const used = COLS.filter((c, ci) => ci < 2 || ci === 2 || docs.some((d) => c[1].includes(d.ty)));
+  const cell = (r, c, ci) => {
+    const L = docs.filter((d) => d.ini === r.id && c[1].includes(d.ty)); const req = ci < (r.lane === 'feature' ? 2 : 1);
+    const k = !L.length ? (req ? 'x' : 'o') : L.some((d) => d.st === 'current') ? '' : L.some((d) => d.st === 'stale' || d.st === 'draft') ? 'w' : (req ? 'x' : 'o');
+    return el('span', { class: 'c' }, el('i', { class: k }));
+  };
+  return card('shield', 'Coverage', 'features need spec and rubric first',
+    el('div', { class: 'dxm' + (used.length === 4 ? ' c4' : ''), 'data-in-coverage': '' }, el('span'), ...used.map((c) => el('span', { class: 'h' }, c[0].slice(0, 5))),
+      ...rows.flatMap((r) => [el('span', null, short(r.title, 18) + ' ', el('span', { class: 'dim' }, r.lane || '')), ...used.map((c) => cell(r, c, COLS.indexOf(c)))])),
+    el('div', { class: 'pgl' }, el('span', { style: 'color:var(--success)' }, '● current'), el('span', { style: 'color:var(--warning)' }, '◯ stale or draft'), el('span', null, '◌ none'), el('span', { style: 'color:var(--destructive)' }, '● required, missing')));
+}
+
+/* ── the graph ─────────────────────────────────────────────────────────────────────────────────────────────── */
+function edgesOf(lib, docs) {
+  const byIdx = new Map(docs.map((d) => [d.i, d]));
+  const edges = (lib.edges || []).map(([a, b, k, st]) => ({ a, b, k: lib.kinds[k] || String(k), st })).filter((e) => byIdx.has(e.a) && byIdx.has(e.b) && e.a !== e.b);
+  for (const e of edges) {
+    if (e.st) continue;
+    const A = byIdx.get(e.a); const B = byIdx.get(e.b);
+    e.st = ['link', 'cites', 'anchor'].includes(e.k) && A.date && B.date && A.date > B.date ? 'drift' : 'ok';
+  }
+  return edges;
+}
+function graphModel(V, docs) {
+  const lib = V.lib; const byIdx = new Map(docs.map((d) => [d.i, d]));
+  const edges = edgesOf(lib, docs);
+  const deg = new Map(); edges.forEach((e) => { deg.set(e.a, (deg.get(e.a) || 0) + 1); deg.set(e.b, (deg.get(e.b) || 0) + 1); });
+  const keep = new Set();
+  if (V.scope) docs.forEach((d) => { if (d.ini === V.scope) keep.add(d.i); });
+  else if (docs.some((d) => d.node)) docs.forEach((d) => keep.add(d.i));
+  else [...deg.entries()].filter(([i]) => byIdx.get(i).ini && byIdx.get(i).ini !== 'README').sort((x, y) => y[1] - x[1]).slice(0, 16).forEach(([i]) => keep.add(i));
+  edges.forEach((e) => { if (keep.has(e.a) && keep.size < 26) keep.add(e.b); if (keep.has(e.b) && keep.size < 26) keep.add(e.a); });
+  const nodes = [...keep].map((i) => byIdx.get(i)).filter(Boolean).slice(0, 26);
+  const ids = new Set(nodes.map((n) => n.i));
+  return { nodes, edges: edges.filter((e) => ids.has(e.a) && ids.has(e.b)) };
+}
+function downstream(edges, id) {
+  const seen = new Set(); const q = [id]; const out = [];
+  while (q.length) { const x = q.shift(); edges.forEach((e) => { if (e.a === x && !seen.has(e.b) && e.st !== 'conflict') { seen.add(e.b); out.push(e.b); q.push(e.b); } }); }
+  return out;
+}
+function graphSvg(V, G) {
+  const CW = 152; const NW = 124; const NH = 50; const top = 26; const cols = [[], [], [], [], []]; const sel = V.sel;
+  G.nodes.forEach((n) => cols[Math.min(4, Math.max(0, n.col))].push(n));
+  cols.forEach((c) => c.sort((a, b) => (a.ini || '').localeCompare(b.ini || '') || a.name.localeCompare(b.name)));
+  const mx = Math.max(1, ...cols.map((c) => c.length)); const H = top + mx * (NH + 10) + 10; const W = 760; const pos = {};
+  cols.forEach((c, ci) => { const gap = (H - top - 10) / Math.max(1, c.length); c.forEach((n, i) => { pos[n.i] = { x: 8 + ci * CW, y: top + i * gap + (gap - NH) / 2 }; }); });
+  const nb = new Set([sel]); G.edges.forEach((e) => { if (e.a === sel) nb.add(e.b); if (e.b === sel) nb.add(e.a); });
+  const s = sv('svg', { class: 'pg', viewBox: `0 0 ${W} ${H}`, role: 'img', 'aria-label': 'Document relationship graph. Amber lines are out of sync, red lines conflict.', style: 'width:100%;min-width:760px;height:auto;display:block' });
+  ['Goals and sources', 'Evidence', 'Specs', 'Rubric and design', 'Delivery'].forEach((t, i) => s.append(svt(8 + i * CW, 14, t)));
+  G.edges.forEach((e) => {
+    const p = pos[e.a]; const q = pos[e.b]; if (!p || !q) return;
+    const c = ESTATE[e.st][1]; const x1 = p.x + NW; const y1 = p.y + NH / 2; const x2 = q.x; const y2 = q.y + NH / 2; const m = (x1 + x2) / 2; const on = e.a === sel || e.b === sel; const op = on || sel == null ? 1 : .25;
+    s.append(sv('path', { d: `M${x1} ${y1} C${m} ${y1} ${m} ${y2} ${x2} ${y2}`, fill: 'none', stroke: c, 'stroke-width': on ? 2.5 : 1.4, opacity: op, 'stroke-dasharray': e.st === 'missing' ? '4 3' : null }), sv('path', { d: `M${x2} ${y2} l-6 -3.5 v7z`, fill: c, opacity: op }));
+    if (on) s.append(svt(m, (y1 + y2) / 2 - 5, e.k, { 'text-anchor': 'middle', style: 'fill:' + c }));
+  });
+  G.nodes.forEach((n) => {
+    const p = pos[n.i]; const c = n.node ? 'var(--muted-foreground)' : (DST[n.st] || DST.current)[1]; const on = n.i === sel;
+    const g = sv('g', { tabindex: '0', role: 'button', 'aria-label': 'Show the relations of ' + n.name, 'data-in-node': n.i, style: 'cursor:pointer', opacity: nb.has(n.i) || sel == null ? 1 : .35 },
+      sv('rect', { x: p.x, y: p.y, width: NW, height: NH, rx: 8, fill: 'var(--card)', stroke: c, 'stroke-width': on ? 3 : 1.5, 'stroke-dasharray': n.st === 'missing' ? '4 3' : null }),
+      svt(p.x + 8, p.y + 19, (n.node || n.ty) + (n.v ? ' ' + n.v : ''), { style: 'font-size:var(--fs-1);fill:var(--muted-foreground)' }), svt(p.x + 8, p.y + 37, short(n.name, 17), { class: 't' }));
+    const pick = () => { V.sel = n.i; V.render(); };
+    g.addEventListener('click', pick); g.addEventListener('keydown', (e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); pick(); } });
+    s.append(g);
+  });
+  return s;
+}
+/** The Relations of a document (the sheet's sixth mode): every edge that touches it, from the whole library, not the graph's capped node set. */
+function relationsOf(V, d, openOther) {
+  const docs = V.docs; const G = { nodes: docs, edges: edgesOf(V.lib, docs) };
+  return relations(d.i, G, docs, openOther);
+}
+function relations(sel, G, docs, openOther) {
+  const n = docs.find((d) => d.i === sel);
+  if (!n) return el('p', { class: 'dim', style: 'font-size:var(--fs-2);margin:0' }, 'Pick a node to see what feeds it and what it feeds.');
+  const by = new Map(docs.map((d) => [d.i, d]));
+  const inn = G.edges.filter((e) => e.b === n.i); const out = G.edges.filter((e) => e.a === n.i); const dn = downstream(G.edges, n.i); const dr = out.filter((e) => e.st === 'drift');
+  const line = (e, dir) => { const o = by.get(dir === 'in' ? e.a : e.b); const E = ESTATE[e.st];
+    return el('li', { class: e.st === 'ok' ? 'ok' : e.st === 'missing' ? '' : 'bad' }, c3ic(e.st === 'ok' ? 'check' : 'alert', 'sm'), el('span', null, o.name + ' · ', el('b', null, e.k), ' · ' + E[0] + ' ',
+      openOther && !o.node && o.st !== 'missing' ? el('button', { type: 'button', class: 'chip2 lk', 'data-doc-rel-open': o.path, onclick: () => openOther(o) }, c3ic('doc', 'sm'), 'Open') : null)); };
+  return el('div', { class: 'dpn' },
+    el('div', { class: 'chips2' }, el('b', null, n.name), el('span', { class: 'chip2' }, n.node || n.ty)),
+    inn.length ? el('div', null, el('div', { class: 'dim', style: 'font-size:var(--fs-2)' }, 'Comes from'), el('ul', { class: 'chgl' }, inn.map((e) => line(e, 'in')))) : null,
+    out.length ? el('div', null, el('div', { class: 'dim', style: 'font-size:var(--fs-2)' }, 'Feeds'), el('ul', { class: 'chgl' }, out.map((e) => line(e, 'out')))) : null,
+    el('div', { class: 'chips2', 'data-in-impact': '' }, el('span', { class: 'ki', style: 'color:' + (dr.length ? 'var(--warning)' : 'var(--success)') }, c3ic(dr.length ? 'alert' : 'check')),
+      el('span', { style: 'font-size:var(--fs-3)' }, 'If you change this, ', el('b', null, String(dn.length)), ' item' + (dn.length === 1 ? '' : 's') + ' downstream are affected' + (dr.length ? ', ' + dr.length + ' already out of sync' : '') + '.')));
+}
+function graphCards(V, docs) {
+  const G = graphModel(V, docs);
+  if (V.sel == null || !G.nodes.some((n) => n.i === V.sel)) { const hub = [...G.nodes].sort((a, b) => G.edges.filter((e) => e.a === b.i || e.b === b.i).length - G.edges.filter((e) => e.a === a.i || e.b === a.i).length)[0]; V.sel = hub ? hub.i : null; }
+  const c = { drift: 0, conflict: 0, missing: 0 }; G.edges.forEach((e) => { if (c[e.st] != null) c[e.st]++; });
+  if (!G.nodes.length) return [card('init', 'Document graph', 'tap a node to see what feeds it and what it feeds', el('p', { class: 'dim', style: 'font-size:var(--fs-2);margin:0', 'data-in-empty': '' }, 'No document has a recorded relation yet, so there is no graph to draw.'))];
+  return [
+    card('init', 'Document graph', 'tap a node to see what feeds it and what it feeds', el('div', { style: 'overflow-x:auto;max-width:100%' }, graphSvg(V, G)),
+      el('div', { class: 'pgl' }, el('span', { style: 'color:var(--destructive)' }, '━ conflict ' + c.conflict), el('span', { style: 'color:var(--warning)' }, '━ out of sync ' + c.drift), el('span', null, '━ in sync'), el('span', null, '┄ missing'))),
+    card('tree', 'Relations', '', relations(V.sel, G, docs, (d) => openDoc(V, d))),
+  ];
+}
+
+function load(V) {
+  Promise.all([pmGet('/api/docs/library?ws=' + encodeURIComponent(V.ctx.ws))]).then(([lib]) => {
+    if (V.disposed) return;
+    V.lib = lib && lib.ok ? lib : null; V.err = V.lib ? null : (lib && lib.error) || 'The documents could not be read.';
+    V.docs = V.lib ? docsOf(V.lib, todayIso()) : [];
+    V.render();
+  }, () => { V.err = 'The documents could not be read.'; V.render(); });
+}
+
+const LIST_MAX = 30;
+function render(V) {
+  V.health = V.health || {}; V.view = V.view || 'list';
+  if (V.lib === undefined) {
+    frame(V, { head: { icon: 'doc', h: 'Reading the documents', s: 'A feature needs its spec and rubric before build. Discovery needs a brief.', ring: [0, 1] }, left: [el('section', { class: 'card sect' }, el('ul', { class: 'list' }, emptyRow('clock', 'Reading the documents.', { role: 'status' })))], right: [] });
+    return;
+  }
+  if (!V.lib) {
+    frame(V, { head: { icon: 'doc', h: 'The documents could not be read', s: V.err, ring: [0, 1] }, left: [el('section', { class: 'card sect' }, el('ul', { class: 'list' }, emptyRow('alert', V.err)))], right: [] });
+    return;
+  }
+  const all = V.docs.filter(isDoc);
+  const inScope = all.filter((d) => (V.scope ? d.ini === V.scope : !!d.ini && d.ini !== 'README'));
+  const O = { missing: 0, stale: 1, draft: 2, current: 3 };
+  const list = inScope.slice().sort((a, b) => O[a.st] - O[b.st] || String(b.date).localeCompare(String(a.date)));
+  const shown = V.all ? list : list.slice(0, LIST_MAX);
+  const cur = inScope.filter((d) => d.st === 'current').length; const need = inScope.filter(needs).length;
+  askHealth(V, shown);
+  const hs = shown.map((d) => V.health[d.path]).filter((h) => h && h.total); const good = hs.filter((h) => h.passed === h.total).length;
+  const head = { icon: 'doc', h: inScope.length + ' document' + (inScope.length === 1 ? '' : 's') + ', ' + need + ' need attention',
+    s: (hs.length ? 'Health: ' + good + ' of ' + hs.length + ' checked pass every check. ' : '') + 'A feature needs its spec and rubric before build. Discovery needs a brief.', ring: [cur, Math.max(1, inScope.length)] };
+  const toggle = el('div', { class: 'calbar', style: 'margin-bottom:8px' }, el('div', { class: 'seg', role: 'group', 'aria-label': 'Documents view' },
+    [['list', 'doc', 'List'], ['graph', 'init', 'Graph']].map(([k, ic, l]) => el('button', { type: 'button', 'aria-pressed': String(V.view === k), 'data-in-dview': k, onClick: () => { V.view = k; V.render(); } }, c3ic(ic, 'sm'), l))));
+  const left = [toggle]; const right = [];
+  if (V.view === 'graph') {
+    left.push(...graphCards(V, V.docs));
+    right.push(healthCard(V, shown), card('info', 'How to read it', '', el('ul', { class: 'chgl' },
+      el('li', null, c3ic('init', 'sm'), el('span', null, 'Arrows run from the source to what is built on it.')),
+      el('li', { class: 'bad' }, c3ic('alert', 'sm'), el('span', null, 'Red: a decision or data source disagrees with the document.')),
+      el('li', { class: 'bad' }, c3ic('alert', 'sm'), el('span', null, 'Amber: the source changed after the document last used it.')))));
+  } else {
+    left.push(el('section', { class: 'card sect', 'data-in-list': 'documents' }, el('div', { class: 'sh2' }, el('h2', null, c3ic('doc', 'sm'), 'Documents ', el('span', { class: 'bdg g' }, String(list.length)))),
+      el('ul', { class: 'list' }, list.length ? [...shown.map((d) => docRow(V, d)), list.length > shown.length ? el('li', { class: 'fold' }, el('button', { type: 'button', class: 'pill', 'data-in-showall': '', onClick: () => { V.all = true; V.render(); } }, 'Show all ' + list.length)) : null]
+        : [emptyRow('moon', V.scope ? 'No document belongs to this initiative.' : 'No document belongs to an initiative yet.', { 'data-in-empty': '' })])));
+    right.push(healthCard(V, shown), coverageCard(V, V.docs.filter(isDoc)));
+    const C = V.lib.cards || {};
+    if (C.benchmark) right.push(card('report', 'Benchmark', C.benchmark.sub, hBars(C.benchmark.rows)));
+    if (C.research) right.push(card('notes', 'Research themes', C.research.sub, hBars(C.research.rows)));
+  }
+  frame(V, { head, left, right: right.filter(Boolean) });
+}
+
+const view = makeView('documents', { init: load, render });
+export const mount = view.mount;
+export const dispose = view.dispose;

package/workspace/public/pm/c3-expand.js

@@ -0,0 +1,96 @@
+/* pm/c3-expand.js — the mockup's in-place row expansion (the `.xp` pattern), as a primitive.
+ *
+ * The mockup (console3.html, document click handler line 2135 and the rows at 1289, 2345, 2349): a row `li.nrow[data-a=expand]`
+ * with tabindex=0 and aria-expanded holds a `div.xp[data-xp] > div.xi` that carries the case file. A click on the row toggles
+ * `.open` on the xp (grid-template-rows 0fr to 1fr, 0.32s) and flips aria-expanded; a click on anything inside the xp, or on a
+ * button or link of the row, does not toggle. The mockup lets any number of rows stay open at once (S.open[k] toggles on its own).
+ *
+ *   makeXp(content)                       -> `div.xp > div.xi > content`, the collapsed panel
+ *   attachExpand(row, xp, opts)           -> { open(), close(), toggle(), isOpen(), detach() }
+ *       opts.key       a name for the row (state and grouping)
+ *       opts.group     an expandGroup(); with single:true opening this row closes the others in it
+ *       opts.onToggle  (open, row, xp) called after the state changed
+ *       opts.initial   start open
+ *   expandGroup({ single })               -> a group (default single:false, as the mockup)
+ *
+ * Keyboard: Enter or Space on the row itself toggles (the mockup binds Enter on a focused row, line 2200). aria-expanded and
+ * aria-controls are kept on the row. A closed panel is `visibility:hidden` in console3.css (`.xp:not(.open)>.xi`), so its
+ * buttons are out of the tab order. Pure parts (Node-testable): initialOpen, toggleOpen, isOpenIn.
+ */
+export const initialOpen = () => ({ open: [] });
+export const isOpenIn = (state, key) => state.open.includes(key);
+
+/** Pure state change: toggle `key`; with single:true every other key is closed. Returns a new state. */
+export function toggleOpen(state, key, { single = false, force } = {}) {
+  const has = isOpenIn(state, key);
+  const want = force === undefined ? !has : !!force;
+  if (want === has && !single) return state;
+  const rest = single ? [] : state.open.filter((k) => k !== key);
+  return { open: want ? [...rest, key] : rest };
+}
+
+export function expandGroup({ single = false } = {}) {
+  const members = new Map();     // key -> { api }
+  let state = initialOpen();
+  return {
+    single,
+    members,
+    get state() { return state; },
+    set(key, open) {
+      state = toggleOpen(state, key, { single, force: open });
+      for (const [k, m] of members) m.sync(isOpenIn(state, k));
+    },
+    isOpen: (key) => isOpenIn(state, key),
+  };
+}
+
+let seq = 0;
+export function makeXp(content) {
+  const xp = document.createElement('div');
+  xp.className = 'xp';
+  const xi = document.createElement('div');
+  xi.className = 'xi';
+  if (content) xi.append(...(Array.isArray(content) ? content : [content]));
+  xp.appendChild(xi);
+  return xp;
+}
+
+const INNER = 'button,a,input,select,textarea,summary,.xp,[data-noexpand]';
+
+export function attachExpand(row, xp, opts = {}) {
+  const key = opts.key || 'x' + (++seq);
+  const group = opts.group || null;
+  if (!xp.id) xp.id = 'xp-' + key + '-' + (++seq);
+  row.setAttribute('aria-expanded', 'false');
+  row.setAttribute('aria-controls', xp.id);
+  if (!row.hasAttribute('tabindex')) row.setAttribute('tabindex', '0');
+  row.setAttribute('data-expand', key);
+
+  let on = false;
+  const sync = (v) => {
+    if (v === on) return;
+    on = v;
+    xp.classList.toggle('open', on);
+    row.setAttribute('aria-expanded', String(on));
+    if (opts.onToggle) opts.onToggle(on, row, xp);
+  };
+  if (group) group.members.set(key, { sync });
+  const set = (v) => { if (group) group.set(key, v); else sync(v); };
+  const onClick = (e) => {
+    const inner = e.target.closest && e.target.closest(INNER);
+    if (inner && inner !== row && !inner.contains(row)) return;   // only a control INSIDE the row; a row that itself sits in a fold (.xp) still toggles            // a control inside the row keeps its own job; the case file (.xp) is read, not folded
+    set(!on);
+  };
+  const onKey = (e) => {
+    if (e.target !== row) return;
+    if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); set(!on); }
+    else if (e.key === 'Escape' && on) { e.preventDefault(); e.stopPropagation(); set(false); }
+  };
+  row.addEventListener('click', onClick);
+  row.addEventListener('keydown', onKey);
+  if (opts.initial) set(true);
+  return {
+    open: () => set(true), close: () => set(false), toggle: () => set(!on), isOpen: () => on,
+    detach() { row.removeEventListener('click', onClick); row.removeEventListener('keydown', onKey); if (group) group.members.delete(key); },
+  };
+}

package/workspace/public/pm/c3-init-extras.js

@@ -0,0 +1,170 @@
+/* pm/c3-init-extras.js — what the five Initiatives sub-views of /c3.html (Roadmap, Breakdown, Tickets, Documents, Signals) share.
+ * The mockup (console3.html) draws every sub-view in one frame: the scope pills (All plus each initiative), the hero line `.lh` (icon,
+ * headline, sub line, ring), the Calendar and Work links, then two columns: left = the Plan lens and deck, then the view's own cards;
+ * right = the view's charts. This file draws that frame once (frame), makes a view out of a render function (makeView), and holds the
+ * small drawing helpers the views use (hBars, dayLabel, short). The badges on the sub-view buttons are computed by each view's
+ * `badge(ctx)` and drawn by c3-shell.js. Nothing here reads or writes the server. */
+import { el } from './dom.js';
+import { ensureComponentsCss } from './primitives.js';
+import { ensureC3Css, c3ic, c3ring, c3Phone } from './pm-work-view.js';
+import { attachExpand } from './c3-expand.js';
+import { attachSwipe } from './c3-swipe.js';
+import { renderCase } from './c3-case.js';
+import { toast } from './c3-toast.js';
+
+export const short = (t, n) => { t = String(t || ''); return t.length > n ? t.slice(0, n - 1) + '…' : t; };
+const MON = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+/** '2026-10-24' to '24 Oct' (the mockup's dlab); anything else comes back as it is. */
+export const dayLabel = (v) => { const m = /^\d{4}-(\d{2})-(\d{2})/.exec(String(v || '')); return m ? Number(m[2]) + ' ' + MON[Number(m[1]) - 1] : String(v || ''); };
+
+/** The mockup's hBars: rows of [label, fraction 0..1, colour, text]. */
+export function hBars(rows) {
+  return el('div', { class: 'hbs' }, rows.map((r, i) => el('div', { class: 'hbr', style: '--c:' + r[2] },
+    el('div', { class: 'l' }, el('span', null, r[0]), el('i', null, r[3])),
+    el('div', { class: 'tk' }, el('u', { style: 'width:' + Math.max(2, Math.min(100, r[1] * 100)) + '%;animation-delay:' + (i * 90) + 'ms' })))));
+}
+
+/** A card: `<section class="card"><h3>icon Title <span class="dim">sub</span></h3> ...kids</section>` (the mockup's right-column card). */
+export function card(icon, title, sub, ...kids) {
+  return el('section', { class: 'card' }, el('h3', null, c3ic(icon), title + (sub ? ' ' : ''), sub ? el('span', { class: 'dim', style: 'text-transform:none;letter-spacing:0' }, sub) : null), ...kids);
+}
+
+/** A list card: `section.card.sect > .sh2 (h2 icon Title bdg, right note) + ul.list`. */
+export function listCard(icon, title, count, note, rows, attrs) {
+  return el('section', { class: 'card sect', ...(attrs || {}) },
+    el('div', { class: 'sh2' }, el('h2', null, c3ic(icon, 'sm'), title, count == null ? null : [' ', el('span', { class: 'bdg g' }, String(count))]), note ? el('span', { class: 'dim', style: 'font-size:var(--fs-2)' }, note) : null),
+    el('ul', { class: 'list' }, rows));
+}
+
+export const emptyRow = (icon, text, attr) => el('li', { class: 'fold', ...(attr || {}) }, c3ic(icon || 'check', 'sm'), text);
+
+/** The hero line. head = { icon, h, s, ring: [done, total] }. */
+export function heroLine(head) {
+  return el('div', { class: 'lh', 'data-in-hero': '' }, el('span', { class: 'ki' }, c3ic(head.icon)),
+    el('div', { style: 'min-width:0' }, el('b', null, head.h), el('div', { class: 'dim' }, head.s)),
+    head.ring ? c3ring(head.ring[0], Math.max(1, head.ring[1]), 44, head.ring[0] + '/' + head.ring[1]) : null);
+}
+
+/** The scope pills: All plus the first few initiatives of ctx.rows. Pressing one sets V.scope (an initiative id or null) and draws again. */
+const PILLS = 5;
+export function scopePills(V) {
+  const rows = V.ctx.rows || [];
+  return el('div', { class: 'chips2', 'data-in-scope': '' },
+    el('button', { type: 'button', class: 'pill', 'aria-pressed': String(!V.scope), onClick: () => { V.scope = null; V.render(); } }, 'All'),
+    ...rows.slice(0, PILLS).map((r) => el('button', { type: 'button', class: 'pill', 'aria-pressed': String(V.scope === r.id), 'data-in-pill': r.id, title: r.title, onClick: () => { V.scope = r.id; V.render(); } }, short(r.title, 14))),
+    rows.length > PILLS ? el('span', { class: 'dim mono', style: 'font-size:var(--fs-2)' }, '+' + (rows.length - PILLS) + ' more in the list') : null);
+}
+
+/** Draw the frame into V.root. spec = { head, left: [nodes], right: [nodes], notice? }. */
+export function frame(V, spec) {
+  V.root.replaceChildren(el('div', { class: 'calwrap' },
+    el('div', { class: 'calbar' }, scopePills(V)),
+    el('div', { class: 'calbody' },
+      heroLine(spec.head), V.ctx.links || null,
+      spec.notice ? el('div', { class: 'fold w', role: 'alert' }, c3ic('alert', 'sm'), spec.notice) : null,
+      el('div', { class: 'brief sbb' }, el('div', { class: 'bcols' },
+        el('div', { class: 'bcol l' }, V.ctx.plan || null, ...(spec.left || [])),
+        el('div', { class: 'bcol r' }, ...(spec.right || [])))))));
+}
+
+/** A view made from { id, init(V), render(V) }. V = { ctx, scope, root, open, data, disposed, render() }. init starts the reads and calls V.render() when they land.
+ * Returns { mount(host, ctx), dispose(host) }, the two functions c3-shell.js calls. */
+export function makeView(id, def) {
+  const views = new WeakMap();
+  function mount(host, ctx) {
+    let V = views.get(host);
+    if (V && V.ctx.ws !== ctx.ws) { dispose(host); V = null; }
+    if (V) { V.ctx = ctx; V.render(); if (host.firstChild !== V.root) host.replaceChildren(V.root); return; }
+    ensureComponentsCss();
+    ensureC3Css();
+    V = { ctx, scope: null, open: {}, data: {}, disposed: false, root: el('div', { class: 'c3', 'data-in-view': id }) };
+    V.render = () => { if (!V.disposed) def.render(V); };
+    V.stopPhone = c3Phone(V.root);
+    views.set(host, V);
+    host.replaceChildren(V.root);
+    V.render();
+    if (def.init) def.init(V);
+  }
+  function dispose(host) {
+    const V = views.get(host);
+    if (!V) return;
+    V.disposed = true;
+    if (V.dispose) V.dispose();
+    if (V.stopPhone) V.stopPhone();
+    views.delete(host);
+    if (V.root.parentNode === host) V.root.remove();
+  }
+  return { mount, dispose };
+}
+
+/* ── the row, as the mockup draws it: one object that opens in place, swipes and takes keys (console3.html rows 3763 to 3777, rowAct 2421, 3877) ── */
+
+/** A line under the page: a toast, with an Undo for 8 seconds when `undo` is given. */
+export function say(text, undo) {
+  toast(undo ? { text, actionLabel: 'Undo', onAction: undo, timeout: 8000 } : { text, timeout: 4000 });
+}
+
+const typing = (n) => !!(n && n.closest && n.closest('input,textarea,select,[contenteditable=true]'));
+
+/** Wire a list row: tap or Enter opens its case file in place (state kept in V.open[key] over every redraw), swipe and the arrow keys run
+ *  sw.onRight / sw.onLeft, e and n are the mockup's keys for the same two, j and k walk the rows. sw = { onRight, onLeft, labelRight, labelLeft, iconRight, iconLeft }. */
+export function wireRow(V, li, xp, key, sw) {
+  V.open = V.open || {};
+  attachExpand(li, xp, { key, initial: !!V.open[key], onToggle: (on) => { V.open[key] = on; } });
+  if (sw) attachSwipe(li, sw);
+  li.addEventListener('keydown', (e) => {
+    if (e.target !== li || e.metaKey || e.ctrlKey || e.altKey || typing(e.target)) return;
+    if (e.key === 'j' || e.key === 'k') {
+      const rows = [...V.root.querySelectorAll('li[data-expand]')].filter((r) => r.offsetWidth > 0);
+      const at = rows.indexOf(li); const to = rows[at + (e.key === 'j' ? 1 : -1)];
+      if (to) { e.preventDefault(); to.focus(); }
+    } else if (sw && e.key === 'e' && sw.onRight) { e.preventDefault(); sw.onRight(li, 'right'); }
+    else if (sw && e.key === 'n' && sw.onLeft) { e.preventDefault(); sw.onLeft(li, 'left'); }
+  });
+  return li;
+}
+
+/** The case file of a row: the shared primitive, bound to the view's state. `model` is the mockup's case ({ sit, conf, chg, opts, cta, unsure, ign, go }).
+ *  The picked option is kept in V.pick[key]; once the PM has slid, V.done[key] = { label, undo } draws the result and an undo chip instead. */
+export function caseNode(V, key, model, { onConfirm, onGo, outbox } = {}) {
+  V.pick = V.pick || {}; V.done = V.done || {};
+  const m = { ...model, id: key };
+  const d = V.done[key];
+  if (d) {
+    return el('div', { class: 'case', 'data-case': key, 'data-case-done': '', style: '--tc:var(--acc)' }, el('p', { class: 'sit' }, m.sit || ''),
+      el('div', { class: 'chips2' }, el('span', { class: 'st ok' }, c3ic('check', 'sm'), d.label),
+        d.undo ? el('button', { type: 'button', class: 'chip2 lk', 'data-case-undo': key, onclick: async () => { delete V.done[key]; try { await d.undo(); } catch { /* the caller reports its own errors */ } V.render(); } }, c3ic('undo', 'sm'), 'undo') : null));
+  }
+  return renderCase(m, { picked: V.pick[key], onPick: (id) => { V.pick[key] = id; }, onConfirm: (r) => { if (onConfirm) onConfirm(r.option, r); }, onGo, outbox: !!outbox });
+}
+
+/** Mark a case as done: the slide has been used. `undo` (optional) is what the undo chip runs. */
+export function markDone(V, key, label, undo) { V.done = V.done || {}; V.done[key] = { label, undo }; V.render(); }
+
+/** A list row skeleton: `li.nrow` with the kind glyph, the title (a span, so a press or a drag on it reaches the row), the chips and the case panel inside `.nb`. */
+export function rowShell(V, { key, attrs, icon, iconColor, title, titleNode, chips, xpContent, sw, hint }) {
+  const li = el('li', { class: 'nrow', 'data-row': '', tabindex: '0', ...(attrs || {}) });
+  const xp = el('div', { class: 'xp' }, el('div', { class: 'xi' }, xpContent));
+  li.append(...[el('span', { class: 'ki', style: iconColor ? 'color:' + iconColor : null }, c3ic(icon || 'check')),
+    el('div', { class: 'nb' }, titleNode || el('span', { class: 'tt' }, title), el('div', { class: 'chips' }, (chips || []).filter(Boolean)), xp),
+    hint === false ? null : el('span', { class: 'sg', title: (sw && sw.labelRight ? 'Drag right: ' + sw.labelRight + '. ' : '') + (sw && sw.labelLeft ? 'Drag left: ' + sw.labelLeft + '.' : '') },
+      el('span', { class: 'g l' }, c3ic('moon')), el('span', { class: 'g r y' }, c3ic('check')))].filter(Boolean));
+  wireRow(V, li, xp, key, sw);
+  return li;
+}
+
+/** The mockup's `goinit` (console3.html line 2030): leave for the Initiatives tab with that initiative chosen. Presses the page's own tab, the Lifecycle button and the initiative's
+ *  scope pill (the rows are read after the tab opens, so the pill is looked for for up to two seconds). A page without the shell finds no tab and does nothing. */
+export function goInitiative(id) {
+  const tab = document.querySelector('[data-c3-tab="init"]'); if (!tab) return false;
+  tab.click();
+  const lc = document.querySelector('[data-c3-init="lifecycle"]'); if (lc) lc.click();
+  let n = 0;
+  const find = () => {
+    const p = [...document.querySelectorAll('[data-lc-pill]')].find((b) => b.getAttribute('data-lc-pill') === id);
+    if (p) { p.click(); return; }
+    if (++n < 20) setTimeout(find, 100);
+  };
+  setTimeout(find, 60);
+  return true;
+}