yichus 0.2.0 → 0.3.0

package/dist/studio-page/what-happens.js

@@ -0,0 +1,752 @@
+// What happens when: one entry's scenario tree, drawn from a what-happens-1
+// record (web/what-happens-record.js) that scripts/what-happens-examples.mjs
+// copies from the engine. It never measures code.
+//
+//   renderWhatHappens(record, { width, entry, open, cross, ghosts })   any width; 390 and 1100 are tuned
+//   renderNotes(record)                                  the author's text that is not a claim (HTML, outside the frame)
+//
+// The tree is the journey view's metro line turned on its side: a request
+// comes in at the top and runs down. The path that reaches the main outcome
+// (an answer a claim names, else the one with the most effects) is one
+// straight spine; an arm that ends at once is a stub off to its side, the
+// arm and what the request gets on one line; only an arm that branches
+// again nests, with its own spine. The rack above draws the described
+// entries and one line counting the rest (data-open="ghosts" opens it). Effects are the map's stations, a
+// branch the code takes is the map's fork, the declared sign-in or role
+// check is the map's red diamond, and a subtree too large for the view is
+// the map's bundle, opened with a breadcrumb. The one new mark is the
+// outcome cap at the end of each path. Colour comes only from checks: red
+// where a claim fails or a check's witness ends, green where every
+// obligation that failed at the base is checked here and holds (its base
+// drawn faded beside it), hollow and dashed where the engine cannot say
+// (an inconclusive claim, or a base failure no longer checked), grey
+// otherwise. Inside the "Yichus output" frame every word is computed; the
+// author's words sit only on ids the engine computed, in italic, with the
+// code name beside them or in the tooltip.
+//
+// Concerns: the engine classifies every branch and effect by where it
+// comes from in value flow (concern.layer: core, cross, beside, platform).
+// The handler's own work is drawn in full. Each step that is not
+// (a wrapper's guard or short-circuit, the platform's declared check or its
+// transaction, work beside the wrapper, a wrapper's work after the handler)
+// is folded by default into one shaded box on the line, the map's hull,
+// that keeps each arm that skips the handler, read as a side stub ("not
+// signed in → refused 401"), then "continue", and its effects. cross:
+// 'shown' draws them inline, each under its role and where it comes from on
+// a light band of the same hull; opening a box
+// (data-open="step:<node id>") draws that step's own tree with a
+// breadcrumb, its way on to the handler a bundle.
+//
+// The scenario tree and its bug/fix colouring come from Lauren Tan's
+// (poteto) TLA+ diagrams.
+
+import { mark, tg, MIN_LABEL, COLORS as C } from './system-map.js';
+import { leavesOf, pathEffects, allEffects, stationLabel, outcomeLabel, isWriteOp } from './what-happens-record.js';
+import { SANS, MONO, textWidth, clipText, boxAttr, fitAttr, labelAttr, labelled } from './label-fit.js';
+
+const RED = C.guard, GREEN = '#1f7a45', GREEN_SOFT = '#e4f4ea', RED_SOFT = '#fbe9e7';
+const esc = s => String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+const f1 = n => (+n).toFixed(1);
+const width = (s, size, mono, weight = 400, italic = false) => textWidth(s, size, mono, weight, italic);
+const clip = (s, size, room, mono = true, weight = 400, italic = false) => clipText(s, size, room, mono, weight, italic);
+// break text into at most n lines that fit `room`, cutting at a space or separator
+function lines(s, size, room, mono, n = 2, weight = 400) {
+  const out = []; let rest = String(s);
+  while (rest && out.length < n) {
+    if (width(rest, size, mono, weight) <= room || out.length === n - 1) { out.push(clip(rest, size, room, mono, weight)); break; }
+    let cut = -1;
+    for (let i = 1; i < rest.length; i++) if (' ,/(·'.includes(rest[i]) && width(rest.slice(0, i), size, mono, weight) <= room) cut = i;
+    if (cut <= 0) cut = Math.max(1, Math.floor(room / (size * (mono ? 0.602 : 0.56))));
+    out.push(rest.slice(0, cut).trimEnd()); rest = rest.slice(cut).trimStart();
+  }
+  return out;
+}
+const T = (x, y, s, o = {}) => `<text x="${f1(x)}" y="${f1(y)}"${o.anchor ? ` text-anchor="${o.anchor}"` : ''} font-family="${o.mono === false ? SANS : MONO}" font-size="${f1(Math.max(MIN_LABEL, o.size || 10))}"${o.weight ? ` font-weight="${o.weight}"` : ''}${o.italic ? ' font-style="italic"' : ''} fill="${o.fill || C.ink2}"${o.opacity ? ` opacity="${o.opacity}"` : ''}${o.fit ? fitAttr(o.fit) : ''}${o.label ? labelAttr(o.label) : ''} stroke="${C.paper}" stroke-width="3" stroke-linejoin="round" paint-order="stroke">${esc(s)}</text>`;
+const title = s => `<title>${esc(s)}</title>`;
+const shape = (kind, svg) => `<g data-mark="${kind}">${svg}</g>`;
+const opener = (key, label) => ` data-open="${esc(key)}" tabindex="0" role="button" aria-label="${esc(label)}"`;
+
+// The new mark: the cap at the end of a path. status grey | red | green |
+// unchecked; a refusal's cap is a bar across the line (the request stops
+// there), a returned value's cap is a filled disc on a ring (it is
+// answered). Unchecked is the cap's outline only, dashed like the struck
+// ghosts: the engine cannot say, so nothing is filled in.
+export function outcomeMark(x, y, status, refused, s = 1, faded = false) {
+  const op = faded ? ' opacity="0.45"' : '';
+  if (status === 'unchecked') {
+    const dash = `stroke="${C.muted}" stroke-width="${f1(1.4 * s)}" stroke-dasharray="2 1.6"`;
+    const body = refused
+      ? `<rect x="${f1(x - 8 * s)}" y="${f1(y - 3 * s)}" width="${f1(16 * s)}" height="${f1(6 * s)}" rx="${f1(2 * s)}" fill="${C.paper}" ${dash}/>`
+      : `<circle cx="${f1(x)}" cy="${f1(y)}" r="${f1(7 * s)}" fill="${C.paper}" ${dash}/>`;
+    return `<g data-mark="outcome" data-status="unchecked"${op}>${body}</g>`;
+  }
+  const col = status === 'red' ? RED : status === 'green' ? GREEN : C.ink2;
+  const soft = status === 'red' ? RED_SOFT : status === 'green' ? GREEN_SOFT : C.paper;
+  const body = refused
+    ? `<rect x="${f1(x - 8 * s)}" y="${f1(y - 3 * s)}" width="${f1(16 * s)}" height="${f1(6 * s)}" rx="${f1(2 * s)}" fill="${col}"/>`
+    : `<circle cx="${f1(x)}" cy="${f1(y)}" r="${f1(7 * s)}" fill="${soft}" stroke="${col}" stroke-width="${f1(2 * s)}"/><circle cx="${f1(x)}" cy="${f1(y)}" r="${f1(3 * s)}" fill="${col}"/>`;
+  return `<g data-mark="outcome" data-status="${status}"${op}>${body}</g>`;
+}
+const statusInk = status => (status === 'red' ? RED : status === 'green' ? GREEN : status === 'unchecked' ? C.muted : C.ink);
+// a claim's tick: ✓ holds, ✗ fails, ? the engine cannot say
+export const tick = c => (c.verdict === 'holds' ? '✓' : c.verdict === 'fails' ? '✗' : '?');
+const ticksOf = l => l.claims.map(tick).join('');
+const ticksInk = l => (l.claims.some(c => c.verdict === 'fails') ? RED : C.ink2);
+const claimsTextOf = l => l.claims.map(c => `${c.verdict}: ${c.parsed}`).join('; ');
+const holdsAbsent = c => c.verdict === 'holds' && c.property.negated && (c.property.is === 'writes' || c.property.is === 'reads');
+
+// ---------------------------------------------------------------- views
+
+const countLeaves = t => leavesOf(t).length;
+const bare = s => String(s).split('::').pop();
+const isCore = e => !e.layer || e.layer === 'core';
+const ROLE = { guard: 'guard', 'short-circuit': 'short-circuit', beside: 'beside the wrapper', after: 'after the handler', branch: 'wrapper branch' };
+// A node the folded view draws as one box: a step that is not the
+// handler's own work, with exactly one arm on to the handler.
+export function foldOf(t) {
+  if (!t || t.kind !== 'node' || !t.concern || t.concern.layer === 'core') return null;
+  if (!['guard', 'short-circuit', 'beside'].includes(t.concern.role)) return null;
+  const go = t.arms.filter(a => a.handler), skip = t.arms.filter(a => !a.handler);
+  return go.length === 1 && skip.length ? { go: go[0], skip } : null;
+}
+// the status and codes, less what the label already says
+const shortDetail = o => {
+  const head = outcomeLabel(o);
+  return [o.status && !head.includes(String(o.status)) ? String(o.status) : '', ...o.codes.filter(c => !head.split(' ').includes(c))].filter(Boolean).join(' ');
+};
+const outcomeText = o => {
+  const head = outcomeLabel(o), detail = shortDetail(o);
+  return `${o.kind === 'refused' ? 'refused ' : ''}${head}${detail ? ` ${detail}` : ''}`;
+};
+// What a folded step can answer instead of running the handler: one row per
+// arm that skips it, read as a side stub reads (the arm, the writes a claim
+// says it does not make, struck, then what the request gets, its witness
+// number and the claims' ticks), then "continue" (a transaction: "runs").
+// A skip that is not a refusal still ends the request there: "ends Denied".
+const humane = p => p.replace(/([a-z])([A-Z])/g, '$1 $2').toLowerCase();
+const absentOf = l => l.claims.filter(holdsAbsent).map(c => {
+  const { is: verb, subject: table } = c.property;
+  return `${verb === 'writes' ? 'write' : 'read'} · ${table}`;
+});
+const endText = o => (o.kind === 'refused' ? outcomeText(o) : `ends ${outcomeLabel(o)}`);
+export function foldArms(t, witnessNo = new Map()) {
+  const f = foldOf(t);
+  if (!f) return null;
+  const rows = f.skip.map(a => {
+    const ls = leavesOf(a.next);
+    const segs = [{ text: a.words || (a.pattern === '_' ? 'otherwise' : t.from && t.from.kind === 'platform' ? humane(a.pattern) : a.pattern), italic: !!a.words, mono: !a.words, fill: a.words ? C.ink : C.muted }];
+    for (const w of [...new Set(ls.flatMap(absentOf))]) segs.push({ text: w, struck: true, fill: C.faint });
+    segs.push({ text: '→', mono: false, fill: C.faint });
+    ls.forEach((l, i) => {
+      const no = witnessNo.get(l.id);
+      if (i) segs.push({ text: 'or', mono: false, fill: C.faint });
+      segs.push({ text: `${endText(l.outcome)}${no ? ` [${no}]` : ''}`, weight: 600, fill: statusInk(l.status) });
+      if (l.claims.length) segs.push({ text: ticksOf(l), mono: false, fill: ticksInk(l) });
+    });
+    return segs;
+  });
+  return [...rows, [{ text: t.from && t.from.kind === 'platform' ? f.go.arm : 'continue', fill: C.ink2 }]];
+}
+export function foldOutcomes(t) {
+  const rows = foldArms(t);
+  return rows && rows.map(r => r.map(x => (x.struck ? `~${x.text}~` : x.text)).join(' '));
+}
+function armInto(tree, node) {
+  let hit = null;
+  const go = t => { if (!t || hit || t.kind !== 'node') return; for (const a of t.arms) { if (a.next === node) { hit = a; return; } go(a.next); } };
+  go(tree);
+  return hit;
+}
+const effectKey = e => `${e.primitive}|${e.site}|${e.line}|${e.tables.join(',')}|${e.phase || ''}`;
+function findNode(tree, id) {
+  let hit = null;
+  const go = t => { if (!t || hit || t.kind !== 'node') return; if (t.id === id) { hit = t; return; } for (const a of t.arms) go(a.next); };
+  go(tree);
+  return hit;
+}
+function findArm(tree, id) {
+  let hit = null;
+  const go = t => { if (!t || hit || t.kind !== 'node') return; for (const a of t.arms) { if (a.id === id) { hit = a; return; } go(a.next); } };
+  go(tree);
+  return hit;
+}
+function pathTo(tree, id) {
+  const go = (t, acc) => {
+    if (!t || t.kind !== 'node') return null;
+    for (const a of t.arms) { const here = [...acc, { node: t, arm: a }]; if (a.id === id) return here; const deeper = go(a.next, here); if (deeper) return deeper; }
+    return null;
+  };
+  return go(tree, []) || [];
+}
+export const armLabel = a => a.words || a.pattern;
+// open: 'arm:<id>' (a bundle), 'step:<node id>' (a folded step), or a bare arm id
+const parseOpen = open => !open || open === 'ghosts' ? null : open.startsWith('step:') ? { step: open.slice(5) } : { arm: open.startsWith('arm:') ? open.slice(4) : open };
+export function openLabel(record, entryKey, open) {
+  const e = record.entries.find(x => x.entry === entryKey);
+  const o = parseOpen(open);
+  if (!e || !o) return e ? e.label : entryKey;
+  if (o.arm) return pathTo(e.tree, o.arm).map(p => armLabel(p.arm)).join(' › ');
+  const n = findNode(e.tree, o.step);
+  if (!n) return e.label;
+  const into = armInto(e.tree, n);
+  const before = into ? pathTo(e.tree, into.id).map(p => armLabel(p.arm)) : [];
+  return [...before, `${ROLE[n.concern.role] || n.concern.role}: ${n.words || n.test}`].join(' › ');
+}
+
+export function renderWhatHappens(record, opts = {}) {
+  const W = Math.max(320, opts.width || 1100);
+  const phone = W < 600;
+  const P = {
+    phone, W, pad: phone ? 10 : 24, step: phone ? 16 : 26, fs: phone ? 10 : 11.5, fsS: phone ? 9 : 10, row: phone ? 15 : 17,
+    limit: opts.limit || (phone ? 16 : 24), witnessNo: new Map(), cross: opts.cross === 'shown' ? 'shown' : 'folded', stepRoot: null,
+  };
+  const entry = record.entries.find(e => e.entry === opts.entry) || record.entries.find(e => e.described) || record.entries[0];
+  const out = [];
+  let y = 14;
+  // the frame label
+  const frameTop = 8;
+  y = frameTop + (phone ? 18 : 22);
+  // the entry rack: the described entries, then one line for the others
+  y = rack(record, entry, P, y, out, !!opts.ghosts || opts.open === 'ghosts');
+  // whether a base was compared, always in this place: a fix is then read
+  // off the frame, also when nothing is green
+  y = compared(record, P, y + (phone ? 13 : 15), out);
+  y += phone ? 10 : 14;
+  // the entry's own line
+  const o = parseOpen(opts.open);
+  const root = o && o.arm ? findArm(entry.tree, o.arm) : null;
+  const stepNode = o && o.step ? findNode(entry.tree, o.step) : null;
+  if (stepNode) { P.stepRoot = stepNode.id; P.stepArms = new Set(stepNode.arms.filter(a => a.handler).map(a => a.id)); P.cross = 'shown'; }
+  // the folded steps: each node step's effects go in its box, and so do a
+  // wrapper's effects after the handler and the work beside it
+  P.paths = pathEffects(entry);
+  P.steps = new Map((entry.steps || []).filter(st => st.node).map(st => [st.node, st]));
+  P.hidden = new Set((entry.steps || []).filter(st => !st.node || foldOf(findNode(entry.tree, st.node))).flatMap(st => st.effects.map(effectKey)));
+  const x0 = P.pad + (phone ? 6 : 12);
+  y = entryHead(entry, root || stepNode, record, P, x0, y, out, opts.open);
+  const subject = root ? root.next : stepNode || entry.tree;
+  // work beside the wrapper, folded; a wrapper's work after the handler is
+  // folded on each path that runs it, just before its outcome
+  P.wrapperName = entry.wrapper && entry.wrapper.generator ? bare(entry.wrapper.generator) : null;
+  P.afterSteps = (entry.steps || []).filter(st => st.role === 'after' && !st.node);
+  P.after = P.cross === 'folded' ? P.afterSteps : [];
+  if (P.cross === 'folded' && !root && !stepNode) for (const st of entry.steps || []) if (!st.node && st.role !== 'after') y = foldBox(x0, y, P, out, {
+    key: st.id, role: st.role, head: `${ROLE[st.role] || st.role}${st.wrapper ? ` · in ${bare(st.wrapper)}` : ''}`, outs: [], effects: st.effects });
+  // stations before the first branch; an opened step's own effects before it
+  if (!root && !stepNode) y = stations(entry.effects, x0, y, P, out, 'entry');
+  if (stepNode) { const into = armInto(entry.tree, stepNode); y = stations(into ? into.effects : entry.effects, x0, y, P, out, 'step'); }
+  if (entry.unsupported && !entry.tree) {
+    out.push(T(x0 + 12, y + P.row * 0.7, entry.truncated ? `not drawn: ${entry.unsupported}` : entry.unsupported, { size: P.fsS, fill: C.muted, mono: false }));
+    y += P.row * 1.4;
+  } else {
+    const red = leavesOf(subject).filter(l => l.status === 'red' || l.status === 'green' || l.status === 'unchecked');
+    red.forEach((l, i) => P.witnessNo.set(l.id, i + 1));
+    y = tree(subject, 0, x0, y, P, out, entry, true);
+  }
+  y = witnessList(record, entry, subject, P, x0, y + (phone ? 10 : 14), out);
+  const H = Math.ceil(y + (phone ? 10 : 16));
+  const frame = labelled('frame', `<rect x="2.5" y="${frameTop}" width="${W - 5}" height="${H - frameTop - 3}" rx="10" fill="none" stroke="${C.frame}" stroke-width="1"/>` +
+    `<text x="14" y="${frameTop + 4}" font-family="${SANS}" font-size="${phone ? 9 : 10}" font-weight="600" fill="${C.muted}" stroke="${C.page}" stroke-width="6" paint-order="stroke">Yichus output</text>`);
+  const label = `${record.program}: what happens when ${entry.label} runs`;
+  return `<svg xmlns="http://www.w3.org/2000/svg" class="what-happens-svg" data-cross="${P.cross}" width="${W}" height="${H}" viewBox="0 0 ${W} ${H}" role="group" aria-label="${esc(label)}" data-fit="canvas">` +
+    `<rect width="${W}" height="${H}" fill="${C.page}"${boxAttr('canvas')}/>${frame}${out.join('')}</svg>`;
+}
+
+function rack(record, selected, P, y, out, expanded) {
+  const { pad, W, phone } = P;
+  const fs = P.fsS, gap = phone ? 12 : 18, lh = phone ? 17 : 19;
+  const x0 = pad + (phone ? 6 : 12);
+  let x = x0, yy = y;
+  const ghosts = record.entries.filter(e => !e.described);
+  out.push(T(x, yy, ghosts.length ? `entries · ${record.entries.length - ghosts.length} of ${record.entries.length} described by a scenario` : `entries · every one described`,
+    { size: fs, fill: C.muted, mono: false }));
+  yy += lh;
+  // the described entries, and the one on view; the others are one line
+  // that opens to show each of them, struck
+  const shown = record.entries.filter(e => e.described || e.entry === selected.entry || expanded);
+  const place = w => { if (x + w > W - pad - 6 && x > x0 + 8) { x = x0; yy += lh; } };
+  for (const e of shown) {
+    const red = leavesOf(e.tree).some(l => l.status === 'red'), green = leavesOf(e.tree).some(l => l.status === 'green');
+    const unchecked = !red && !green && leavesOf(e.tree).some(l => l.status === 'unchecked');
+    const text = clip(e.label, fs, W - 2 * pad - 30);
+    const w = 12 + width(text, fs, true) + (red || green || unchecked ? 9 : 0);
+    place(w);
+    const on = e.entry === selected.entry;
+    const ghost = !e.described;
+    let g = '';
+    g += ghost ? ghostHead(x, yy) : mark.head(x + 7, yy - 4, allEffects(e).some(f => isWriteOp(f.op)), 0.7);
+    g += T(x + 11, yy, text, { size: fs, fill: ghost ? C.faint : on ? C.ink : C.ink2, weight: on ? 700 : null });
+    if (ghost) g += shape('struck', `<path d="M${f1(x + 10)} ${f1(yy - 3.5)} H${f1(x + 11 + width(text, fs, true))}" stroke="${C.faint}" stroke-width="1.1"/>`);
+    if (on) g += `<path d="M${f1(x + 11)} ${f1(yy + 3)} H${f1(x + 11 + width(text, fs, true))}" stroke="${C.ink}" stroke-width="1.6"/>`;
+    if (red || green) g += `<circle cx="${f1(x + 11 + width(text, fs, true) + 5)}" cy="${f1(yy - 3.5)}" r="3" fill="${red ? RED : GREEN}"/>`;
+    else if (unchecked) g += `<circle data-status="unchecked" cx="${f1(x + 11 + width(text, fs, true) + 5)}" cy="${f1(yy - 3.5)}" r="3" fill="${C.paper}" stroke="${C.muted}" stroke-width="1.1" stroke-dasharray="1.6 1.2"/>`;
+    const what = `${e.label}${e.title ? `: ${e.title}` : ''}${ghost ? ' (no scenario describes it)' : ''}`;
+    out.push(tg([`${ghost ? 'ghost' : 'entry'}:${e.entry}`], `<g${labelAttr(`entry:${e.entry}`)}${opener(`entry:${e.entry}`, `Show ${what}`)}>${title(what)}${g}</g>`));
+    x += w + gap;
+  }
+  const hidden = ghosts.filter(e => !shown.includes(e)).length;
+  if (ghosts.length && (hidden || expanded)) {
+    const n = expanded ? ghosts.length : hidden;
+    const text = `${n} ${n === 1 ? 'entry' : 'entries'} not described${expanded ? ' · fold' : ''}`;
+    x = x0; yy += lh;
+    const g = ghostHead(x, yy) + T(x + 11, yy, text, { size: fs, fill: C.muted, mono: false });
+    out.push(tg([`ghosts:${n}`], `<g data-ghosts="${expanded ? 'open' : 'folded'}"${opener('ghosts', expanded ? 'Fold the entries no scenario describes' : `Show the ${n} entries no scenario describes`)}>${title(`${n} entries no scenario describes`)}${g}</g>`));
+  }
+  return yy + 4;
+}
+function compared(record, P, y, out) {
+  const x = P.pad + (P.phone ? 6 : 12), d = record.diff;
+  if (!d) {
+    const text = 'no base compared', w = width(text, P.fsS, false);
+    out.push(tg(['compared:none'], `<g${labelAttr('compared')}>${title('no earlier version of the program was compared, so nothing here says what was fixed')}${T(x, y, text, { size: P.fsS, fill: C.faint, mono: false })}${shape('struck', `<path d="M${f1(x - 1)} ${f1(y - 3.5)} H${f1(x + w + 1)}" stroke="${C.faint}" stroke-width="1.1"/>`)}</g>`));
+    return y + 4;
+  }
+  const parts = [[`compared with ${d.base}`, C.muted, null], [`${d.fixed.length} fixed`, d.fixed.length ? GREEN : C.muted, 600], [`${d.stillRed.length} still failing`, d.stillRed.length ? RED : C.muted, 600]];
+  if (d.unresolved.length) parts.push([`${d.unresolved.length} no longer checked`, C.muted, 600]);
+  if (d.goneAtHead.length) parts.push([`${d.goneAtHead.length} gone with ${d.goneAtHead.length === 1 ? 'its entry' : 'their entries'}`, C.muted, null]);
+  let cx = x, g = '', yy = y;
+  parts.forEach(([text, fill, weight], i) => {
+    const t = `${i ? '· ' : ''}${text}`, w = width(t, P.fsS, false);
+    if (cx > x && cx + w > P.W - P.pad - 6) { cx = x + 8; yy += P.row * 0.8; }
+    g += T(cx, yy, t, { size: P.fsS, fill, weight, mono: false });
+    cx += w + 5;
+  });
+  out.push(tg([`compared:${d.base}`], `<g>${title(`compared with ${d.base}: ${d.fixed.length} red leaves of the base have every failure checked and holding here; ${d.stillRed.length} are red in both; ${d.unresolved.length} have a failure not checked here`)}${g}</g>`));
+  return yy + 4;
+}
+const ghostHead = (x, y) => `<g data-mark="entry"><path d="M${f1(x)} ${f1(y - 8)} L${f1(x + 7)} ${f1(y - 4)} L${f1(x)} ${f1(y)}" fill="none" stroke="${C.faint}" stroke-width="1.3" stroke-dasharray="2 1.6"/></g>`;
+
+function entryHead(entry, root, record, P, x0, y, out, open) {
+  const { phone, W, pad } = P;
+  y += P.row;
+  out.push(mark.head(x0 + 1, y - 4, allEffects(entry).some(f => isWriteOp(f.op)), 0.95));
+  // rotate nothing: the head points into the program; the line runs down from it
+  const room = W - pad - (x0 + 12) - 6;
+  out.push(tg([`entry:${entry.entry}`], T(x0 + 12, y, clip(entry.label, P.fs + 1, room), { size: P.fs + 1, weight: 700, fill: C.ink })));
+  if (entry.title) {
+    y += P.row;
+    out.push(tg([`words:${entry.entry}`], `<g>${title(`author's title for ${entry.entry}`)}${T(x0 + 12, y, clip(entry.title, P.fs, room, false), { size: P.fs, italic: true, mono: false, fill: C.ink })}</g>`));
+  }
+  if (root) {
+    y += P.row;
+    out.push(T(x0 + 12, y, clip(`opened at ${openLabel(record, entry.entry, open)}`, P.fsS, room, false), { size: P.fsS, mono: false, fill: C.muted }));
+  }
+  y += phone ? 6 : 8;
+  out.push(line(x0, y - 2, x0, y + 6));
+  return y + 6;
+}
+
+const line = (x1, y1, x2, y2, o = {}) => `<path d="M${f1(x1)} ${f1(y1)} ${x1 === x2 ? `V${f1(y2)}` : `C${f1(x1)} ${f1(y1 + (y2 - y1) * 0.55)} ${f1(x2)} ${f1(y1 + (y2 - y1) * 0.35)} ${f1(x2)} ${f1(y2)}`}" fill="none" stroke="${o.color || C.ink2}" stroke-width="${o.w || 2.2}" stroke-linecap="round"${o.dash ? ` stroke-dasharray="${o.dash}"` : ''}/>`;
+
+function stations(effects, x, y, P, out, key) {
+  for (const e of (effects || []).filter(e => P.cross === 'shown' || isCore(e) || !P.hidden.has(effectKey(e)))) {
+    const r = P.phone ? 4.6 : 5.4;
+    const cy = y + P.row * 0.6;
+    out.push(line(x, y, x, cy + P.row * 0.6));
+    const color = e.resource === 'model' ? C.model : e.resource === 'net' ? C.net : e.resource === 'db' ? C.db : C.muted;
+    const kind = e.resource === 'model' ? 'modelRing' : e.resource === 'net' ? 'netRing' : 'station';
+    const ring = kind === 'station' ? mark.station(x, cy, r, isWriteOp(e.op), color) : shape(kind, `<circle cx="${f1(x)}" cy="${f1(cy)}" r="${r}" fill="${C.paper}" stroke="${color}" stroke-width="2.2"/>`);
+    // a wrapper's effect says so, and one after the handler whether every path that runs the handler runs it
+    const after = e.phase === 'after' ? (P.afterSteps || []).find(st => st.effects.some(x => effectKey(x) === effectKey(e))) : null;
+    const whose = e.layer && e.layer !== 'core' && e.layer !== 'beside' && e.layer !== 'platform' && P.wrapperName ? `, in ${P.wrapperName}` : '';
+    const text = stationLabel(e) + (isCore(e) ? '' : ` · ${e.phase === 'after' ? `after the handler${whose}${after ? (after.everyPath ? ' · on every path that runs it' : ' · not on every path that runs it') : ''}` : e.layer === 'beside' ? 'beside the wrapper' : `before the handler${whose}`}`);
+    const where = `${text} in ${String(e.site).split('::').pop()}${e.line ? `, line ${e.line}` : ''}`;
+    const rows = lines(text, P.fsS, P.W - P.pad - x - r - 10, true, 2);
+    out.push(tg([`effect:${key}:${e.op}:${e.tables.join(',')}`], `<g data-layer="${e.layer || 'core'}">${title(where)}${ring}${rows.map((l, i) => T(x + r + 6 + (i ? 8 : 0), cy + 3.5 + i * P.row * 0.8, l, { size: P.fsS, fill: isCore(e) ? color : C.hullInk })).join('')}</g>`));
+    if (rows.length > 1) out.push(line(x, cy, x, cy + P.row * 1.2));
+    y = cy + P.row * 0.6 + (rows.length - 1) * P.row * 0.8;
+  }
+  return y;
+}
+
+// One subtree from (x, y) down. Returns the y where it ends.
+// A folded step: one shaded box on the line (the map's hull), its role,
+// what it answers instead of running the handler, and its effects.
+function foldBox(x, y, P, out, { key, role, head, outs, effects, open }) {
+  const lx = x + (P.phone ? 13 : 16), room = P.W - P.pad - lx - 10;
+  const lh = P.row * 0.82, fs = P.fsS;
+  // each row is a list of pieces laid out left to right; a piece that does
+  // not fit starts the next line, indented
+  const rows = [];
+  for (const l of lines(head, fs, room - 8, false, 3, 700)) rows.push([{ text: l, fill: C.hullInk, weight: 700, mono: false }]);
+  for (const o of outs) rows.push(typeof o === 'string' ? [{ text: o, fill: C.ink2 }] : o);
+  const eff = [...new Set((effects || []).map(stationLabel))];
+  if (eff.length) for (const l of lines(eff.join(', '), fs, room, true, 2)) rows.push([{ text: l, fill: C.hullInk }]);
+  const placed = [];
+  let line_ = 0, wMax = 0;
+  for (const r of rows) {
+    let cx = 0;
+    for (const piece of r) {
+      const mono = piece.mono !== false;
+      const text = clip(piece.text, fs, room - 8, mono, piece.weight, piece.italic), w = width(text, fs, mono, piece.weight, piece.italic);
+      if (cx > 0 && cx + w > room) { line_ += 1; cx = 8; }
+      placed.push({ ...piece, text, mono, x: cx, line: line_, w });
+      cx += w + 6;
+      wMax = Math.max(wMax, cx - 6);
+    }
+    line_ += 1;
+  }
+  const top = y + P.row * 0.35, h = line_ * lh + 8;
+  out.push(line(x, y, x, top + h + P.row * 0.35));
+  const box = `fold:${key}`;
+  let g = shape('hull', `<rect x="${f1(x - 8)}" y="${f1(top)}" width="${f1(lx - x + Math.min(room, wMax) + 16)}" height="${f1(h)}" rx="${P.phone ? 7 : 9}" fill="${C.hull}" stroke="${C.hullEdge}" stroke-width="1.2"${boxAttr(box)}/>`);
+  g += `<path d="M${f1(x)} ${f1(top - 1)} V${f1(top + h + 1)}" stroke="${C.ink2}" stroke-width="2.2"/>`;
+  for (const p of placed) {
+    const px = lx + p.x, py = top + 4 + lh * (p.line + 0.72);
+    const strike = p.struck ? `strike:${key}:${p.line}:${p.x}` : null;
+    g += T(px, py, p.text, { size: fs, fill: p.fill, weight: p.weight, mono: p.mono, italic: p.italic, fit: box, label: strike });
+    if (strike) g += shape('struck', `<path d="M${f1(px)} ${f1(py - 3.5)} H${f1(px + p.w)}" stroke="${C.faint}" stroke-width="1"${labelAttr(strike)}/>`);
+  }
+  const said = outs.map(o => (typeof o === 'string' ? o : o.map(x => (x.struck ? `no ${x.text}` : x.text)).join(' ')));
+  const what = `${head}: ${said.join('; ')}${eff.length ? `; ${eff.join(', ')}` : ''}`;
+  out.push(tg([`fold:${key}`], `<g data-fold="${esc(key)}" data-role="${esc(role)}"${open ? opener(open, `Open ${what}`) : ''}>${title(what)}${g}</g>`));
+  return top + h + P.row * 0.35;
+}
+
+// a step's role and where it comes from: its folded box's head, and the
+// line above its test when it is drawn inline
+function stepParts(t) {
+  const platform = t.from && t.from.kind === 'platform';
+  const where = t.concern.wrapper ? `in ${bare(t.concern.wrapper)}` : platform ? `in ${bare(t.from.site)}` : t.concern.layer === 'platform' ? 'declared on the route' : t.concern.layer === 'beside' ? 'beside the wrapper' : bare(t.site);
+  return [platform ? 'platform step' : ROLE[t.concern.role] || t.concern.layer, where];
+}
+const stepHead = t => stepParts(t).join(' · ');
+
+function tree(t, depth, x, y, P, out, entry, top) {
+  if (!t) return y;
+  if (t.kind === 'leaf') return leaf(t, x, y, P, out);
+  const f = P.cross === 'folded' && P.stepRoot !== t.id ? foldOf(t) : null;
+  if (f) {
+    const [role, where] = stepParts(t);
+    const effects = P.steps.get(t.id)?.effects || [];
+    y = foldBox(x, y, P, out, { key: t.id, role: t.concern.role, head: `${role} · ${t.words || t.test} · ${where}`,
+      outs: foldArms(t, P.witnessNo), effects, open: `step:${t.id}` });
+    y = stations(f.go.effects, x, y, P, out, f.go.id);
+    return sub(f.go, depth + 1, x, y, P, out, entry);
+  }
+  const guard = t.from && t.from.kind === 'guard';
+  // a step that is not the handler's own work keeps its concern when it is
+  // drawn inline: its role and where it comes from, in the wrapper's ink,
+  // above the test, and a light band behind the step and its exits
+  const concern = t.concern && t.concern.layer !== 'core' ? stepHead(t) : null;
+  const bandAt = out.length, bandTop = y;
+  if (concern) {
+    const hy = y + P.row * 0.75, hx = x + (P.phone ? 13 : 16);
+    out.push(line(x, y, x, hy + 2));
+    for (const [i, l] of lines(concern, P.fsS, P.W - P.pad - hx - 6, false, 2, 700).entries())
+      out.push(tg([`concern:${t.id}`], T(hx, hy + i * P.row * 0.8, l, { size: P.fsS, mono: false, weight: 700, fill: C.hullInk, fit: `band:${t.id}` })));
+    y = hy + (width(concern, P.fsS, false, 700) > P.W - P.pad - hx - 6 ? P.row * 0.8 : 0);
+  }
+  const ny = y + P.row * 0.7;
+  out.push(line(x, y, x, ny));
+  const crossNode = !!concern && !guard;
+  out.push(tg([`node:${t.id}`], `<g${t.concern ? ` data-layer="${t.concern.layer}"${t.concern.role ? ` data-role="${t.concern.role}"` : ''}` : ''}>${title(`${t.test} · ${t.key}${t.from && t.from.site ? ` in ${String(t.from.site).split('::').pop()}` : ''}${t.from && t.from.line ? `, line ${t.from.line}` : ''}`)}${guard ? mark.guard(x, ny, P.phone ? 0.75 : 0.85) : mark.fork(x - 1, ny, P.phone ? 0.85 : 1)}</g>`));
+  // the test: the author's words in italic, else the code
+  const lx = x + (P.phone ? 13 : 16), room = P.W - P.pad - lx - 6;
+  let yy = ny + 3.5;
+  if (t.words) {
+    out.push(tg([`words:${t.id}`], `<g>${title(`${t.test} (${t.key})`)}${T(lx, yy, clip(t.words, P.fs, room, false, 400, true), { size: P.fs, italic: true, mono: false, fill: crossNode ? C.hullInk : C.ink })}</g>`));
+    if (!P.phone) out.push(T(lx + Math.min(room, width(clip(t.words, P.fs, room, false, 400, true), P.fs, false, 400, true)) + 8, yy, clip(t.test, P.fsS, Math.max(0, room - width(t.words, P.fs, false, 400, true) - 10)), { size: P.fsS, fill: C.faint }));
+  } else {
+    for (const [i, l] of lines(t.test, P.fs, room, !guard, 2, guard ? 600 : 400).entries())
+      out.push(T(lx, yy + i * P.row * 0.85, l, { size: P.fs, mono: !guard, fill: guard ? RED : crossNode ? C.hullInk : C.ink2, weight: guard ? 600 : null }));
+    if (width(t.test, P.fs, !guard, guard ? 600 : 400) > room) yy += P.row * 0.85;
+  }
+  y = yy + P.row * 0.35;
+  // the spine continues straight down: the arm that reaches the main
+  // outcome. An arm that ends at once is a stub off to the side, its arm
+  // and outcome on one line; only an arm with branches of its own nests.
+  const main = mainLeaf(t, P);
+  const trunk = t.arms.find(a => leavesOf(a.next).includes(main)) || t.arms[t.arms.length - 1];
+  const others = t.arms.filter(a => a !== trunk);
+  const xs = x + P.step;
+  for (const a of others) {
+    if (stubbable(a, P)) { y = stub(a, x, y, P, out, guard); continue; }
+    const start = y;
+    const ay = start + P.row * 0.9;
+    out.push(line(x, start - 2, xs, ay));
+    out.push(line(x, start - 2, x, ay + 2));
+    y = armText(a, xs, ay, P, out, guard);
+    y = stations(a.effects, xs, y, P, out, a.id);
+    y = sub(a, depth + 1, xs, y, P, out, entry);
+    y += P.phone ? 4 : 6;
+  }
+  if (concern) {
+    const bx = x - (P.phone ? 7 : 9), bw = P.W - P.pad - 4 - bx;
+    out.splice(bandAt, 0, shape('hull', `<rect data-band="${esc(t.id)}" x="${f1(bx)}" y="${f1(bandTop + 2)}" width="${f1(bw)}" height="${f1(y + P.row * 0.2 - bandTop - 2)}" rx="6" fill="${C.hull}" opacity="0.55"${boxAttr(`band:${t.id}`)}/>`));
+  }
+  // the spine's arm, below the band when there is one
+  const ay = Math.max(y + P.row * 0.5, concern ? y + P.row * 0.2 + P.fs * 0.9 + 2 : 0);
+  out.push(line(x, y - 2, x, ay));
+  y = armText(trunk, x, ay, P, out, guard, true);
+  y = stations(trunk.effects, x, y, P, out, trunk.id);
+  // a leaf right under its arm does not repeat the arm's words
+  P.armWords = trunk.next.kind === 'leaf' ? trunk.words : null;
+  return sub(trunk, depth + 1, x, y, P, out, entry);
+}
+
+// The main outcome under a node: a leaf that is not a refusal (a refusal
+// only when every path is one); among those, one a holding claim names
+// (not a negation), then the one with the most effects on its path. Ties
+// go to the earlier leaf.
+function mainLeaf(t, P) {
+  const ls = leavesOf(t);
+  const rank = l => [l.outcome.kind === 'refused' ? 0 : 1, l.claims.some(c => c.verdict === 'holds' && !c.property.negated) ? 1 : 0, (P.paths.get(l.id) || []).length];
+  const better = (a, b) => { const ra = rank(a), rb = rank(b); for (let i = 0; i < ra.length; i++) if (rb[i] !== ra[i]) return rb[i] > ra[i] ? b : a; return a; };
+  return ls.reduce(better);
+}
+
+// An early exit drawn as one line: the arm ends at a leaf, and nothing on
+// the way needs a row of its own (no folded step after the handler).
+const stubbable = (a, P) => a.next.kind === 'leaf' && !(a.next.handler && P.after.some(st => st.effects.some(e => (P.paths.get(a.next.id) || []).some(h => effectKey(h) === effectKey(e)))));
+
+function stub(a, x, y, P, out, guard) {
+  const l = a.next, refused = l.outcome.kind === 'refused';
+  const ry = y + P.row * 0.85, bx = x + (P.phone ? 12 : 16), s = P.phone ? 0.7 : 0.8;
+  out.push(`<path d="M${f1(x)} ${f1(ry - P.row * 0.45)} C${f1(x)} ${f1(ry - 1)} ${f1(x + 3)} ${f1(ry)} ${f1(bx)} ${f1(ry)}" fill="none" stroke="${C.ink2}" stroke-width="1.6" stroke-linecap="round"/>`);
+  const right = P.W - P.pad - 4, lx = bx + 4;
+  // one line, left to right; a piece that does not fit starts the next row
+  let cx = lx, cy = ry;
+  const place = w => { if (cx > lx && cx + w > right) { cx = lx + 8; cy += P.row * 0.8; } const at = cx; cx += w + 6; return at; };
+  // the arm, in the author's words or the code
+  const words = a.words, text = words || (a.pattern === '_' ? 'otherwise' : a.pattern);
+  const ao = { size: P.fsS, italic: !!words, mono: !words && !guard, fill: words ? C.ink : C.muted };
+  const at = clip(text, P.fsS, (right - lx) * 0.6, !!ao.mono);
+  out.push(tg([`arm:${a.id}`], `<g>${title(`${a.pattern}${a.from && a.from.line ? `, line ${a.from.line}` : ''}`)}${T(place(width(at, P.fsS, !!ao.mono)), cy + 3.5, at, ao)}</g>`));
+  // what the exit does on the way: its effects, and the writes a claim says it does not make
+  for (const e of a.effects.filter(e => P.cross === 'shown' || isCore(e) || !P.hidden.has(effectKey(e)))) {
+    const r = 3.6, lbl = clip(stationLabel(e), P.fsS, right - lx - 20);
+    const ex = place(2 * r + 3 + width(lbl, P.fsS, true));
+    const color = e.resource === 'model' ? C.model : e.resource === 'net' ? C.net : e.resource === 'db' ? C.db : C.muted;
+    out.push(tg([`effect:${a.id}:${e.op}:${e.tables.join(',')}`], `<g data-layer="${e.layer || 'core'}">${title(`${stationLabel(e)} in ${bare(e.site)}${e.line ? `, line ${e.line}` : ''}`)}${mark.station(ex + r, cy, r, isWriteOp(e.op), color)}${T(ex + 2 * r + 3, cy + 3.5, lbl, { size: P.fsS, fill: isCore(e) ? color : C.hullInk })}</g>`));
+  }
+  for (const c of l.claims.filter(holdsAbsent)) {
+    const { is: verb, subject: table } = c.property;
+    const lbl = `${verb === 'writes' ? 'write' : 'read'} · ${table}`, lw = width(lbl, P.fsS, true), sx = place(lw);
+    out.push(tg([`absent:${l.id}:${verb}:${table}`], labelled(`absent:${l.id}:${verb}:${table}`, shape('struck', `${title(`checked: this path ${verb} no ${table}`)}${T(sx, cy + 3.5, lbl, { size: P.fsS, fill: C.faint })}<path d="M${f1(sx)} ${f1(cy)} H${f1(sx + lw)}" stroke="${C.faint}" stroke-width="1"/>`))));
+  }
+  out.push(T(place(8), cy + 3.5, '→', { size: P.fsS, fill: C.faint, mono: false }));
+  // the outcome, its status and codes, and the claims' ticks
+  const head = outcomeLabel(l.outcome), detail = shortDetail(l.outcome);
+  const no = P.witnessNo.get(l.id), badge = no ? ` [${no}]` : '';
+  const color = statusInk(l.status);
+  const tt = clip(`${refused ? 'refused ' : ''}${head}${badge}`, P.fsS, right - lx - 30);
+  const ox = place(18 + width(tt, P.fsS, true));
+  let g = outcomeMark(ox + 7, cy, l.status, refused, s) + T(ox + 18, cy + 3.5, tt, { size: P.fsS, fill: color, weight: 600 });
+  if (detail) g += T(place(width(detail, P.fsS, true)), cy + 3.5, detail, { size: P.fsS, fill: C.muted });
+  const ticks = ticksOf(l);
+  if (ticks) g += T(place(width(ticks, P.fsS, false)), cy + 3.5, ticks, { size: P.fsS, fill: ticksInk(l), mono: false });
+  // a second row only for the author's words or the base it fixes
+  if (l.words && l.words !== a.words) { cy += P.row * 0.8; g += `<g>${title(`author's words for ${l.id}`)}${T(lx, cy + 3.5, clip(l.words, P.fsS, right - lx, false), { size: P.fsS, italic: true, mono: false, fill: C.ink })}</g>`; }
+  if (l.status === 'green' && l.base) {
+    cy += P.row * 0.85;
+    const extra = l.base.effects.filter(e => !(P.paths.get(l.id) || []).some(h => h.op === e.op && h.tables.join() === e.tables.join())).map(stationLabel);
+    const btxt = clip(`base: ${l.base.outcome.kind === 'refused' ? 'refused ' : ''}${outcomeLabel(l.base.outcome)}${extra.length ? ` after ${extra.join(', ')}` : ''}`, P.fsS, right - lx - 14);
+    g += `<g data-f="${encodeURIComponent(`base:${l.id}`)}">${title('the same leaf at the base, where it was red')}${outcomeMark(lx + 4, cy, 'red', l.base.outcome.kind === 'refused', s * 0.8, true)}${T(lx + 13, cy + 3.5, btxt, { size: P.fsS, fill: RED, opacity: 0.6 })}</g>`;
+  }
+  out.push(line(x, y - 2, x, cy + P.row * 0.45));
+  const claimsText = claimsTextOf(l);
+  out.push(tg([`leaf:${l.id}`], `<g data-stub="1"${no ? ` data-witness="${no}"` : ''}>${title(`${l.id}: ${l.outcome.shown}${claimsText ? ` · ${claimsText}` : ''}`)}${g}</g>`));
+  return cy + P.row * 0.45;
+}
+
+function sub(a, depth, x, y, P, out, entry) {
+  const n = countLeaves(a.next);
+  // an opened step: its way on to the handler is a bundle that opens it
+  const onward = !!P.stepArms && P.stepArms.has(a.id);
+  if (a.next.kind === 'node' && (n > P.limit || onward)) {
+    // too large for this view: a bundle that opens the arm's own tree
+    const by = y + P.row * 0.9;
+    out.push(line(x, y, x, by, { w: 2.2 + Math.min(n, 30) * 0.12 }));
+    const count = st => leavesOf(a.next).filter(l => l.status === st).length;
+    const red = count('red'), green = count('green'), unchecked = count('unchecked');
+    const txt = `${onward ? 'on to the handler · ' : ''}×${n} paths · open`;
+    const fill = red ? RED : green ? GREEN : C.ink2;
+    out.push(tg([`bundle:${a.id}`], `<g${opener(`arm:${a.id}`, `Open ${armLabel(a)}: ${n} paths`)}>${title(`${n} paths under ${armLabel(a)}${red ? `, ${red} red` : ''}${green ? `, ${green} fixed` : ''}${unchecked ? `, ${unchecked} unchecked` : ''}`)}` +
+      shape('cable', `<rect x="${f1(x - 6)}" y="${f1(by - 2)}" width="12" height="9" rx="3" fill="${C.ink2}"/>`) +
+      T(x + 12, by + 6, txt, { size: P.fsS, fill, weight: 600 }) +
+      (red ? T(x + 16 + width(txt, P.fsS, true), by + 6, `${red} red`, { size: P.fsS, fill: RED }) : '') + `</g>`));
+    return by + P.row * 0.9;
+  }
+  return tree(a.next, depth, x, y, P, out, entry, false);
+}
+
+function armText(a, x, y, P, out, guard, trunk = false) {
+  const lx = x + (P.phone ? 7 : 9), room = P.W - P.pad - lx - 4;
+  const words = a.words;
+  const text = words || (a.pattern === '_' ? 'otherwise' : a.pattern);
+  const o = { size: P.fsS, italic: !!words, mono: !words && !guard, fill: words ? C.ink : C.muted };
+  out.push(tg([`arm:${a.id}`], `<g>${title(`${a.pattern}${a.from && a.from.line ? `, line ${a.from.line}` : ''}`)}${T(lx, y + 3, clip(`${trunk ? '' : ''}${text}`, P.fsS, room, !!o.mono), o)}</g>`));
+  return y + P.row * 0.45;
+}
+
+function leaf(l, x, y, P, out) {
+  const refused = l.outcome.kind === 'refused';
+  const here = new Set((P.paths.get(l.id) || []).map(effectKey));
+  for (const st of P.after) if (l.handler && st.effects.some(e => here.has(effectKey(e))))
+    y = foldBox(x, y, P, out, { key: `${st.id}:${l.id}`, role: 'after', head: `${ROLE.after}${st.wrapper ? ` · in ${bare(st.wrapper)}` : ''}`,
+      outs: [st.everyPath ? 'on every path that runs the handler' : 'on this path, not on every one'], effects: st.effects.filter(e => here.has(effectKey(e))) });
+  // a claim that a path makes no write: the write it does not make, struck
+  const absent = l.claims.filter(holdsAbsent);
+  for (const c of absent) {
+    const { is: verb, subject: table } = c.property;
+    const cy = y + P.row * 0.6;
+    out.push(line(x, y, x, cy + P.row * 0.5));
+    out.push(tg([`absent:${l.id}:${verb}:${table}`], labelled(`absent:${l.id}:${verb}:${table}`, shape('struck', `${title(`checked: this path ${verb === 'writes' ? 'writes' : 'reads'} no ${table}`)}<circle cx="${f1(x)}" cy="${f1(cy)}" r="4.6" fill="${C.paper}" stroke="${C.faint}" stroke-width="1.3" stroke-dasharray="2 1.6"/>` +
+      `<path d="M${f1(x - 6)} ${f1(cy + 5)} L${f1(x + 6)} ${f1(cy - 5)}" stroke="${C.faint}" stroke-width="1.2"/>` +
+      T(x + 10, cy + 3.5, `${verb === 'writes' ? 'write' : 'read'} · ${table}`, { size: P.fsS, fill: C.faint }) +
+      `<path d="M${f1(x + 10)} ${f1(cy)} H${f1(x + 10 + width(`${verb === 'writes' ? 'write' : 'read'} · ${table}`, P.fsS, true))}" stroke="${C.faint}" stroke-width="1"/>`))));
+    y = cy + P.row * 0.5;
+  }
+  const cy = y + P.row * 0.75;
+  out.push(line(x, y, x, cy - 4));
+  const s = P.phone ? 0.85 : 1;
+  const lx = x + (P.phone ? 13 : 15), room = P.W - P.pad - lx - 4;
+  const head = outcomeLabel(l.outcome), detail = shortDetail(l.outcome);
+  const color = statusInk(l.status);
+  const no = P.witnessNo.get(l.id);
+  const badge = no ? ` [${no}]` : '';
+  const claimsText = claimsTextOf(l);
+  let g = outcomeMark(x, cy, l.status, refused, s);
+  const t1 = clip(`${refused ? 'refused ' : ''}${head}${badge}`, P.fs, room);
+  g += T(lx, cy + 4, t1, { size: P.fs, fill: color, weight: 600 });
+  let after = width(t1, P.fs, true) + 8;
+  const ticks = ticksOf(l);
+  if (detail && after + width(detail, P.fsS, true) < room) { g += T(lx + after, cy + 4, detail, { size: P.fsS, fill: C.muted }); after += width(detail, P.fsS, true) + 8; }
+  if (ticks && after + width(ticks, P.fs, false) < room) g += T(lx + after, cy + 4, ticks, { size: P.fs, fill: ticksInk(l), mono: false });
+  let yy = cy + 4;
+  if (l.words && l.words !== P.armWords) { yy += P.row * 0.85; g += `<g>${title(`author's words for ${l.id}`)}${T(lx, yy, clip(l.words, P.fsS, room, false), { size: P.fsS, italic: true, mono: false, fill: C.ink })}</g>`; }
+  if (l.status === 'green' && l.base) {
+    // the base's red leaf, faded beside the fix
+    yy += P.row * 0.95;
+    const bx = lx + 6;
+    const extra = l.base.effects.filter(e => !(P.paths.get(l.id) || []).some(h => h.op === e.op && h.tables.join() === e.tables.join())).map(stationLabel);
+    const btxt = clip(`base: ${l.base.outcome.kind === 'refused' ? 'refused ' : ''}${outcomeLabel(l.base.outcome)}${extra.length ? ` after ${extra.join(', ')}` : ''}`, P.fsS, room - 14);
+    g += `<g data-f="${encodeURIComponent(`base:${l.id}`)}">${title('the same leaf at the base, where it was red')}${outcomeMark(bx, yy - 3, 'red', l.base.outcome.kind === 'refused', s * 0.8, true)}${T(bx + 11, yy, btxt, { size: P.fsS, fill: RED, opacity: 0.6 })}</g>`;
+  }
+  const what = `${l.id}: ${l.outcome.shown}${claimsText ? ` · ${claimsText}` : ''}`;
+  out.push(tg([`leaf:${l.id}`], `<g${no ? ` data-witness="${no}"` : ''}>${title(what)}${g}</g>`));
+  return yy + P.row * 0.75;
+}
+
+function witnessList(record, entry, subject, P, x0, y, out) {
+  const ls = leavesOf(subject).filter(l => P.witnessNo.has(l.id));
+  if (!ls.length) return y;
+  const room = P.W - P.pad - x0 - 22;
+  out.push(T(x0, y, 'why each coloured leaf is coloured', { size: P.fsS, fill: C.muted, mono: false, weight: 600 }));
+  y += P.row;
+  for (const l of ls) {
+    const no = P.witnessNo.get(l.id);
+    const rows = [];
+    for (const c of l.claims.filter(c => c.verdict === 'fails')) rows.push({ text: `the claim ${c.parsed} fails here`, claim: true });
+    for (const c of l.claims.filter(c => c.verdict === 'inconclusive')) rows.push({ text: `the engine cannot say whether ${c.parsed} holds here: ${c.reasons.join('; ')}` });
+    for (const wid of l.witnesses) { const w = record.witnesses.find(x => x.id === wid); if (w) rows.push({ text: `${w.check} check: ${String(w.site).split('::').pop()} ${w.operation} on ${w.resource}: ${w.detail}` }); }
+    const unresolved = record.diff ? record.diff.unresolved.find(u => u.id === l.id) : null;
+    if (unresolved) for (const r of unresolved.reasons) rows.push({ text: `not fixed, not checked: ${r}` });
+    if (l.status === 'green' && l.base) {
+      for (const c of l.base.claims.filter(c => c.verdict === 'fails')) rows.push({ text: `fixed: at the base the claim ${c.parsed} failed here; it holds now`, fixed: true });
+      for (const w of l.base.witnesses) rows.push({ text: `fixed: at the base the ${w.check} check reported ${String(w.site).split('::').pop()} ${w.operation} on ${w.resource}`, fixed: true });
+    }
+    const color = statusInk(l.status);
+    out.push(T(x0, y, `[${no}]`, { size: P.fsS, fill: color, weight: 700 }));
+    for (const r of rows) {
+      for (const t of lines(r.text, P.fsS, room, false, 3)) { out.push(tg([`why:${l.id}`], T(x0 + 22, y, t, { size: P.fsS, fill: r.fixed ? GREEN : C.ink2, mono: false }))); y += P.row * 0.85; }
+    }
+    y += P.row * 0.3;
+  }
+  return y;
+}
+
+// The author's text the engine could not check, outside the frame.
+export function renderNotes(record) {
+  const items = [];
+  for (const n of record.notes) items.push(`<li><span class="wh-note-kind">not a claim</span> <q>${esc(n.text)}</q> <span class="wh-note-at">${esc(n.at)}</span></li>`);
+  for (const r of record.refused) items.push(`<li><span class="wh-note-kind">refused</span> <q>${esc(r.words)}</q> names <code>${esc(r.id)}</code>, which the engine did not compute</li>`);
+  for (const m of record.mismatches) items.push(`<li><span class="wh-note-kind">mismatch</span> a scenario names <code>${esc(m.entry)}</code>, which is not an entry of this program</li>`);
+  if (!items.length) return '';
+  return `<aside class="wh-notes" aria-label="Unverified notes"><h3>Unverified notes from the author</h3><p>Outside the frame: text that is not a checkable claim, and names for ids the engine did not compute. Nothing here is checked or drawn.</p><ul>${items.join('')}</ul></aside>`;
+}
+
+// ---------------------------------------------------------------- on a page
+// <div data-what-happens="notes-api" data-entry="route:/notes/add"> draws
+// evidence/what-happens/notes-api-what-happens.json.
+const evidenceRoot = typeof document === 'undefined' ? null : new URL('evidence/what-happens/', import.meta.url);
+
+export function mount(root, record) {
+  let entry = root.dataset.entry || null, open = null, ghosts = false;
+  let cross = root.dataset.cross === 'shown' ? 'shown' : 'folded';
+  // the control that expands or folds the steps that are not the handler's own work
+  const toggle = document.createElement('button');
+  toggle.type = 'button';
+  toggle.className = 'what-happens-cross';
+  toggle.addEventListener('click', () => { cross = cross === 'folded' ? 'shown' : 'folded'; draw(); });
+  const crumb = document.createElement('nav');
+  crumb.className = 'system-map-crumb';
+  crumb.setAttribute('aria-label', `${record.program}: what happens when`);
+  const drawing = document.createElement('div');
+  drawing.className = 'system-map-drawing';
+  const notes = document.createElement('div');
+  notes.innerHTML = renderNotes(record);
+  root.replaceChildren(crumb, toggle, drawing, notes);
+  let w = 0;
+  const draw = () => {
+    w = Math.max(320, Math.floor(drawing.clientWidth || root.clientWidth || 1100));
+    const e = record.entries.find(x => x.entry === entry) || record.entries.find(x => x.described) || record.entries[0];
+    entry = e.entry;
+    const here = document.createElement('span');
+    here.setAttribute('aria-current', 'page');
+    if (open) {
+      const back = document.createElement('button');
+      back.type = 'button';
+      back.textContent = e.label;
+      back.addEventListener('click', () => { open = null; draw(); });
+      here.textContent = openLabel(record, e.entry, open);
+      crumb.replaceChildren(back, document.createTextNode(' › '), here);
+    } else {
+      here.textContent = `${record.program}: what happens when ${e.label} runs`;
+      crumb.replaceChildren(here);
+    }
+    root.dataset.cross = cross;
+    const steps = (e.steps || []).length;
+    toggle.hidden = !steps;
+    toggle.setAttribute('aria-pressed', String(cross === 'shown'));
+    toggle.textContent = cross === 'folded' ? `Show the ${steps} wrapper and platform step${steps === 1 ? '' : 's'} inline` : 'Fold the wrapper and platform steps';
+    drawing.innerHTML = renderWhatHappens(record, { width: w, entry, open, cross, ghosts });
+  };
+  const choose = target => {
+    const g = target.closest('[data-open]');
+    if (!g) return;
+    const key = g.getAttribute('data-open');
+    if (key === 'ghosts') ghosts = !ghosts;
+    else if (key.startsWith('entry:')) { entry = key.slice(6); open = null; }
+    else if (key.startsWith('arm:') || key.startsWith('step:')) open = key;
+    draw();
+    drawing.querySelector(`[data-open="${CSS.escape(key)}"]`)?.focus();
+  };
+  drawing.addEventListener('click', event => choose(event.target));
+  drawing.addEventListener('keydown', event => {
+    if ((event.key === 'Enter' || event.key === ' ') && event.target.closest('[data-open]')) { event.preventDefault(); choose(event.target); }
+  });
+  new ResizeObserver(() => { if (Math.floor(drawing.clientWidth) !== w) draw(); }).observe(drawing);
+  draw();
+}
+
+if (typeof document !== 'undefined') for (const root of document.querySelectorAll('[data-what-happens]')) {
+  const load = async () => {
+    try {
+      const response = await fetch(new URL(`${root.dataset.whatHappens}-what-happens.json`, evidenceRoot));
+      if (!response.ok) throw new Error(`request failed (${response.status})`);
+      mount(root, (await response.json()).record);
+    } catch (error) {
+      const message = document.createElement('p');
+      message.setAttribute('role', 'alert');
+      message.textContent = `The scenario tree could not be loaded: ${error.message}.`;
+      const retry = document.createElement('button');
+      retry.type = 'button';
+      retry.textContent = 'Retry';
+      retry.addEventListener('click', load);
+      root.replaceChildren(message, retry);
+    }
+  };
+  load();
+}