create-pmos 0.123.0 → 0.125.0

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

@@ -0,0 +1,196 @@
+/* pm/c3-signals.js — the Signals sub-view of Initiatives on /c3.html (console3.html SIGS line 2861, sigRow 2881, viewLeft and viewRight at lines
+ * 3833 and 3857, creepSVG and driftSVG at 3715 and 3724, the "What the agent watches" card).
+ * REAL: GET /api/signals ({ rules, readings (latest per metric), trips, open }) and GET /api/records/kr-metrics (KR rows: metric, baseline, target,
+ * by). A rule is { id, metric, op, threshold, severity: watch|act|critical }; it is tripping when it is in `open`. The page draws one row per rule:
+ * the headline is the rule, the evidence is the latest reading, the right side is open or not tripped. The ledger keeps only the latest reading
+ * per metric, so a real row has no sparkline. Severity maps to the mockup's chips: critical Pivot, act Drift, watch Watch.
+ * DEMO ONLY (optional fields the real rule does not carry): title, evidence, action, when, spark, sev (up for upside), initiative, and the response's
+ * head and charts (scope creep, delay). They are drawn when present; real mode never shows them.
+ * Writes (page presses, through pmPost): POST /api/signals/rule and POST /api/signals/reading, from the two small forms of the empty state and the
+ * rules card. A press the server refuses shows its reason. No dialog is used. */
+import { el } from './dom.js';
+import { pmGet, pmPost } from './http.js';
+import { c3ic } from './pm-work-view.js';
+import { makeView, frame, card, listCard, emptyRow, short, wireRow, caseNode, markDone, say } from './c3-init-extras.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 SEV = { watch: ['Watch', 'var(--acc)', 'eye'], drift: ['Drift', 'var(--warning)', 'clock'], pivot: ['Pivot', 'var(--destructive)', 'alert'], up: ['Upside', 'var(--success)', 'up'] };
+const ORDER = ['pivot', 'drift', 'watch', 'up'];
+const OF_SEV = { critical: 'pivot', act: 'drift', watch: 'watch' };
+
+function spark(a, c) {
+  const W = 64; const H = 26; const mn = Math.min(...a); const mx = Math.max(...a); const X = (i) => 3 + i * (W - 6) / (a.length - 1); const Y = (v) => H - 4 - (v - mn) / (mx - mn || 1) * (H - 8);
+  return sv('svg', { class: 'spk', viewBox: `0 0 ${W} ${H}`, 'aria-hidden': 'true' }, sv('polyline', { points: a.map((v, i) => X(i) + ',' + Y(v)).join(' '), fill: 'none', stroke: c, 'stroke-width': 2, 'stroke-linecap': 'round', 'stroke-linejoin': 'round' }), sv('circle', { cx: X(a.length - 1), cy: Y(a[a.length - 1]), r: 3, fill: c }));
+}
+
+/** The signals the page draws: one per rule of the ledger, with the demo's optional narrative when the rule carries it. */
+export function signalsOf(j) {
+  const open = new Set(((j && j.open) || []).map((t) => t.rule_id));
+  const read = new Map(((j && j.readings) || []).map((r) => [r.metric, r]));
+  return ((j && j.rules) || []).map((r) => {
+    const rd = read.get(r.metric); const on = open.has(r.id);
+    return { id: r.id, sev: r.sev || OF_SEV[r.severity] || 'watch', on, initiative: r.initiative || '',
+      raw: r, read: rd || null, t: r.title || r.metric + ' ' + r.op + ' ' + r.threshold, ev: r.evidence || (rd ? 'Latest reading of ' + r.metric + ': ' + rd.value + ' (' + String(rd.at).slice(0, 10) + ').' : 'No reading of ' + r.metric + ' yet.'),
+      thr: r.action || 'Trips when ' + r.metric + ' ' + r.op + ' ' + r.threshold, ttt: r.when || (on ? 'tripped' : rd ? 'not tripped' : 'waiting for a reading'), sp: r.spark || null };
+  });
+}
+/** The count on the Signals button: the signals that drift or call for a pivot. */
+export async function badge() {
+  const j = await pmGet('/api/signals');
+  if (!j || !j.ok) return null;
+  return signalsOf(j).filter((s) => s.sev === 'drift' || s.sev === 'pivot').length;
+}
+
+const NEXT_SEV = { watch: 'act', act: 'critical' };
+const PREV_SEV = { critical: 'act', act: 'watch' };
+const SEVW = { watch: 'Watch', act: 'Drift', critical: 'Pivot' };
+
+/** The case file of a signal (console3.html SIGC, line 2864). A demo rule carries the mockup's own `case`; a real rule gets the rule, its latest reading and its
+ *  trips from the ledger, and its moves are the ones the page may make: keep watching, or change the severity (a page press on /api/signals/rule). */
+function caseOf(V, s, S) {
+  if (s.raw && s.raw.case) return s.raw.case;
+  const r = s.raw; const trips = ((S && S.trips) || []).filter((t) => t.rule_id === s.id); const rd = s.read;
+  const chg = [['target', 'The rule: ' + r.metric + ' ' + r.op + ' ' + r.threshold, 'rule'],
+    rd ? ['clock', 'Latest reading ' + rd.value + ' on ' + String(rd.at).slice(0, 10), 'ledger', s.on ? 'bad' : 'ok'] : ['clock', 'No reading of ' + r.metric + ' yet', 'ledger', 'warn']];
+  trips.slice(-3).forEach((t) => chg.push(['alert', 'Tripped ' + String(t.at).slice(0, 10) + (t.reading ? ' at ' + t.reading.value : ''), 'trip', 'bad']));
+  chg.push(['info', trips.length + ' trip' + (trips.length === 1 ? '' : 's') + ' recorded, severity ' + (SEVW[r.severity] || r.severity), 'ledger']);
+  const opts = [{ id: 'w', l: s.on ? 'Keep watching' : 'Keep watching it', rec: !s.on || !NEXT_SEV[r.severity], fx: [['eye', 'The rule stays as it is', 'ok']] }];
+  if (NEXT_SEV[r.severity]) opts.push({ id: 'up', l: 'Raise it to ' + SEVW[NEXT_SEV[r.severity]], rec: s.on, fx: [['alert', 'A trip is treated as more urgent', 'warn']] });
+  if (PREV_SEV[r.severity]) opts.push({ id: 'dn', l: 'Lower it to ' + SEVW[PREV_SEV[r.severity]], fx: [['clock', 'A trip is treated as less urgent', 'warn']] });
+  return { sit: s.on ? 'This rule is tripping now. ' + s.ev : 'This rule is not tripping. ' + s.ev, conf: s.on ? 74 : 80, chg, opts, cta: 'Slide to confirm', unsure: 'A rule is a number against a threshold. It does not know why the number moved.' };
+}
+
+async function setSeverity(V, s, sev) {
+  const r = s.raw; const was = r.severity;
+  const put = (v) => pmPost('/api/signals/rule', { id: r.id, metric: r.metric, op: r.op, threshold: r.threshold, severity: v });
+  const out = await put(sev);
+  if (!out || !out.ok) { say('Not saved: ' + ((out && out.error) || 'the server refused it.')); return null; }
+  return async () => { await put(was); reload(V); };
+}
+
+function row(V, s, S) {
+  const SV = SEV[s.sev] || SEV.watch; const key = 'sg-' + s.id;
+  const xp = el('div', { class: 'xp' }, el('div', { class: 'xi' }, caseNode(V, 'sig:' + s.id, caseOf(V, s, S), {
+    onConfirm: async (o) => {
+      if (s.raw && s.raw.case) { const m = (s.raw.case.opts || []).find((q) => q.id === o.id); markDone(V, 'sig:' + s.id, (m && m.msg) || 'Recorded.'); say((m && m.msg) || 'Recorded.'); return; }
+      if (o.id === 'w') { markDone(V, 'sig:' + s.id, 'Watching. No change to the rule.'); return; }
+      const to = o.id === 'up' ? NEXT_SEV[s.raw.severity] : PREV_SEV[s.raw.severity];
+      const undo = await setSeverity(V, s, to);
+      if (undo) { say('Severity is now ' + SEVW[to] + '.', undo); await reload(V); }
+    } })));
+  const li = el('li', { class: 'sgr', style: '--c:' + SV[1], 'data-in-signal': s.id, 'data-id': s.id, tabindex: '0' },
+    el('span', { class: 'ki', style: 'color:' + SV[1] }, c3ic(SV[2])),
+    el('div', { style: 'min-width:0' }, el('div', { class: 'st1 tt' }, s.t), el('div', { class: 'st2' }, s.ev),
+      el('div', { class: 'st3' }, el('span', { class: 'sv' }, SV[0]), el('span', null, c3ic('target', 'sm'), s.thr), el('span', null, c3ic('clock', 'sm'), s.ttt)), xp),
+    s.sp && s.sp.length > 1 ? spark(s.sp, SV[1]) : el('span'));
+  wireRow(V, li, xp, key, null);
+  return li;
+}
+
+/* the mockup's creepSVG and driftSVG, from the response's `charts` */
+function creepChart(C) {
+  const P = C.points; const W = 560; const H = 170; const x0 = 36; const x1 = W - 20; const y0 = 16; const y1 = H - 32; const mn = 15; const mx = 38;
+  const X = (i) => x0 + i * (x1 - x0) / (P.length - 1); const Y = (v) => y1 - (v - mn) / (mx - mn) * (y1 - y0);
+  const s = sv('svg', { class: 'mat', viewBox: `0 0 ${W} ${H}`, role: 'img', 'aria-label': 'Scope in points against the baseline of ' + C.baseline + ' points' });
+  [20, 30].forEach((v) => s.append(sv('line', { x1: x0, x2: x1, y1: Y(v), y2: Y(v), stroke: 'var(--border)' }), svt(x0 - 5, Y(v) + 4, v, { 'text-anchor': 'end' })));
+  const pts = []; P.forEach((p, i) => { if (i) pts.push(X(i).toFixed(1) + ',' + Y(P[i - 1][1]).toFixed(1)); pts.push(X(i).toFixed(1) + ',' + Y(p[1]).toFixed(1)); });
+  const base = []; for (let i = P.length - 1; i >= 0; i--) base.push(X(i).toFixed(1) + ',' + Y(C.baseline).toFixed(1));
+  s.append(sv('polygon', { points: pts.join(' ') + ' ' + base.join(' '), fill: 'var(--destructive)', 'fill-opacity': '.12' }),
+    sv('line', { x1: x0, x2: x1, y1: Y(C.baseline), y2: Y(C.baseline), stroke: 'var(--ring)', 'stroke-dasharray': '5 4', 'stroke-width': 2 }),
+    sv('polyline', { points: pts.join(' '), fill: 'none', stroke: 'var(--destructive)', 'stroke-width': 2.5, 'stroke-linejoin': 'round' }));
+  P.forEach((p, i) => {
+    s.append(sv('circle', { cx: X(i), cy: Y(p[1]), r: 4, fill: 'var(--destructive)', stroke: 'var(--card)', 'stroke-width': 2 }), svt(X(i), H - 16, p[0], { 'text-anchor': 'middle' }));
+    if (p[2] && i) s.append(svt(X(i), Y(p[1]) - 9, '+' + (p[1] - P[i - 1][1]) + ' ' + short(p[2], 16), { 'text-anchor': i === P.length - 1 ? 'end' : 'middle' }));
+  });
+  s.append(svt(x1, Y(C.baseline) + 14, 'baseline ' + C.baseline + ' points', { 'text-anchor': 'end' }));
+  return s;
+}
+function delayChart(C) {
+  const P = C.points; const W = 560; const H = 160; const x0 = 58; const x1 = W - 20; const y0 = 16; const y1 = H - 30; const mn = 22; const mx = 33;
+  const X = (i) => x0 + i * (x1 - x0) / (P.length - 1); const Y = (v) => y1 - (v - mn) / (mx - mn) * (y1 - y0);
+  const s = sv('svg', { class: 'mat', viewBox: `0 0 ${W} ${H}`, role: 'img', 'aria-label': 'Forecast ship date at each weekly check against the promised ' + C.promised + ' Oct' });
+  [24, 28, 32].forEach((v) => s.append(sv('line', { x1: x0, x2: x1, y1: Y(v), y2: Y(v), stroke: 'var(--border)' }), svt(x0 - 5, Y(v) + 4, v > 31 ? (v - 31) + ' Nov' : v + ' Oct', { 'text-anchor': 'end' })));
+  s.append(sv('line', { x1: x0, x2: x1, y1: Y(C.promised), y2: Y(C.promised), stroke: 'var(--success)', 'stroke-dasharray': '5 4', 'stroke-width': 2 }),
+    sv('polyline', { points: P.map((p, i) => X(i).toFixed(1) + ',' + Y(p[1]).toFixed(1)).join(' '), fill: 'none', stroke: 'var(--destructive)', 'stroke-width': 2.5, 'stroke-linejoin': 'round' }));
+  P.forEach((p, i) => s.append(sv('circle', { cx: X(i), cy: Y(p[1]), r: 4, fill: 'var(--destructive)', stroke: 'var(--card)', 'stroke-width': 2 }), svt(X(i), H - 12, p[0], { 'text-anchor': 'middle' })));
+  s.append(svt(x1, Y(C.promised) - 6, 'promised ' + C.promised + ' Oct', { 'text-anchor': 'end', fill: 'var(--success)' }), svt(X(P.length - 1), Y(P[P.length - 1][1]) - 9, P[P.length - 1][1] + ' Oct', { 'text-anchor': 'end' }));
+  return s;
+}
+
+/* a small form of the page's own: a rule or a reading, pressed through pmPost; the server's refusal is shown as it is */
+const field = (label, attrs) => el('label', { class: 'dim mono', style: 'display:grid;gap:4px;font-size:var(--fs-2)' }, label, el('input', { ...attrs, style: 'min-height:44px;width:100%;box-sizing:border-box;font:inherit;padding:8px 10px;border:1px solid var(--ring);border-radius:8px;background:var(--card);color:var(--foreground)' }));
+function ruleForm(V) {
+  const id = field('Rule id', { name: 'id', placeholder: 'conversion-floor', autocomplete: 'off', 'data-in-f': 'id' });
+  const metric = field('Metric', { name: 'metric', placeholder: 'checkout.conversion', autocomplete: 'off', 'data-in-f': 'metric' });
+  const op = el('select', { 'data-in-f': 'op', 'aria-label': 'Operator', style: 'min-height:44px;font:inherit;padding:8px;border:1px solid var(--ring);border-radius:8px;background:var(--card);color:var(--foreground)' }, ['<', '<=', '>', '>=', '=='].map((o) => el('option', { value: o }, o)));
+  const th = field('Threshold', { name: 'threshold', type: 'number', step: 'any', 'data-in-f': 'threshold' });
+  const sev = el('select', { 'data-in-f': 'severity', 'aria-label': 'Severity', style: 'min-height:44px;font:inherit;padding:8px;border:1px solid var(--ring);border-radius:8px;background:var(--card);color:var(--foreground)' }, ['watch', 'act', 'critical'].map((o) => el('option', { value: o }, o)));
+  const msg = el('p', { class: 'dim mono', style: 'font-size:var(--fs-2);margin:0', role: 'status', 'data-in-msg': '' });
+  const go = el('button', { type: 'button', class: 'pill', 'data-in-add-rule': '', style: 'min-height:44px', onClick: async () => {
+    const r = await pmPost('/api/signals/rule', { id: id.querySelector('input').value.trim(), metric: metric.querySelector('input').value.trim(), op: op.value, threshold: Number(th.querySelector('input').value), severity: sev.value });
+    if (r && r.ok) { msg.textContent = ''; reload(V); } else msg.textContent = 'Not saved: ' + ((r && r.error) || 'the server refused it.');
+  } }, c3ic('plus', 'sm'), 'Add the rule');
+  return el('div', { class: 'form', style: 'display:grid;gap:8px', 'data-in-rule-form': '' }, id, metric, el('div', { style: 'display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:end' }, op, th, sev), el('div', { class: 'chips2' }, go), msg);
+}
+function readingForm(V, rules) {
+  const metrics = [...new Set(rules.map((r) => r.metric))];
+  const metric = el('select', { 'data-in-f': 'rmetric', 'aria-label': 'Metric', style: 'min-height:44px;font:inherit;padding:8px;border:1px solid var(--ring);border-radius:8px;background:var(--card);color:var(--foreground)' }, metrics.map((m) => el('option', { value: m }, m)));
+  const val = field('Reading', { name: 'value', type: 'number', step: 'any', 'data-in-f': 'rvalue' });
+  const msg = el('p', { class: 'dim mono', style: 'font-size:var(--fs-2);margin:0', role: 'status' });
+  const go = el('button', { type: 'button', class: 'pill', 'data-in-add-reading': '', style: 'min-height:44px', onClick: async () => {
+    const r = await pmPost('/api/signals/reading', { metric: metric.value, value: Number(val.querySelector('input').value) });
+    if (r && r.ok) { msg.textContent = ''; reload(V); } else msg.textContent = 'Not saved: ' + ((r && r.error) || 'the server refused it.');
+  } }, c3ic('plus', 'sm'), 'Record the reading');
+  return el('div', { class: 'form', style: 'display:grid;gap:8px', 'data-in-reading-form': '' }, metric, val, el('div', { class: 'chips2' }, go), msg);
+}
+
+function reload(V) {
+  return Promise.all([pmGet('/api/signals'), pmGet('/api/records/kr-metrics')]).then(([s, k]) => {
+    if (V.disposed) return;
+    V.data = { s: s && s.ok ? s : null, k: k && k.ok ? k.records || [] : [], err: s && s.ok ? null : (s && s.error) || 'The signals could not be read.' };
+    V.render();
+  }, () => { V.data = { s: null, k: [], err: 'The signals could not be read.' }; V.render(); });
+}
+
+function render(V) {
+  const D = V.data;
+  const S = D && D.s ? D.s : null;
+  const all = S ? signalsOf(S) : [];
+  const scoped = V.scope && all.some((s) => s.initiative);
+  const list = (scoped ? all.filter((s) => (s.initiative || '').split(',').includes(V.scope)) : all).sort((a, b) => ORDER.indexOf(a.sev) - ORDER.indexOf(b.sev));
+  const head = !D ? { icon: 'alert', h: 'Reading the signals', s: 'A signal is a rule on a measured number.', ring: [0, 1] }
+    : S && S.head ? { icon: 'alert', ...S.head }
+      : all.length ? { icon: 'alert', h: S.open.length + ' of ' + all.length + ' rule' + (all.length === 1 ? ' is' : 's are') + ' tripping', s: 'Each row is a rule, with its latest reading. The agent watches them; you decide what to do.', ring: [all.length - S.open.length, all.length] }
+        : { icon: 'alert', h: D.err ? 'The signals could not be read' : 'No signal rules yet', s: D.err || 'A signal is a rule on a measured number, such as “conversion below 3.0%”. Add one to start watching.', ring: [0, 1] };
+
+  const left = [];
+  if (!D) left.push(listCard('alert', 'Signals', null, '', [emptyRow('clock', 'Reading the signals.', { role: 'status' })]));
+  else {
+    left.push(el('section', { class: 'card sect', 'data-in-list': 'signals' }, el('div', { class: 'sh2' }, el('h2', null, c3ic('alert', 'sm'), 'Signals ', el('span', { class: 'bdg g' }, String(list.length)))),
+      list.length ? el('ul', { class: 'sgl', style: 'list-style:none;margin:0;padding:0' }, list.map((x) => row(V, x, S))) : el('ul', { class: 'list' }, emptyRow('moon', all.length ? 'No signal belongs to this initiative.' : 'No signal rules yet, so nothing is being watched.', { 'data-in-empty': '' }))));
+    const krs = D.k || [];
+    if (krs.length) left.push(listCard('target', 'Key results', krs.length, 'baseline to target', krs.map((k) => el('li', { class: 'nrow', 'data-in-kr': k.rid },
+      el('span', { class: 'ki' }, c3ic('target')), el('div', { class: 'nb' }, el('span', { class: 'tt' }, k.metric),
+        el('div', { class: 'chips' }, el('span', { class: 'chip2 mono' }, k.baseline + ' to ' + k.target), el('span', { class: 'chip2' }, c3ic('cal', 'sm'), 'by ' + k.by)))))));
+  }
+  const right = [];
+  const ch = S && S.charts;
+  if (ch && ch.creep) right.push(card('alert', 'Scope creep', 'points against baseline', creepChart(ch.creep)));
+  if (ch && ch.delay) right.push(card('clock', 'Delay', 'forecast ship date, each weekly check', delayChart(ch.delay)));
+  if (D && S) {
+    const watch = S.watch || S.rules.map((r) => ({ tone: S.open.some((t) => t.rule_id === r.id) ? 'bad' : 'ok', text: r.metric + ' ' + r.op + ' ' + r.threshold + ' (' + r.severity + ')', note: (() => { const rd = S.readings.find((x) => x.metric === r.metric); return rd ? 'latest ' + rd.value : 'no reading yet'; })() }));
+    right.push(card('shield', 'What the agent watches', '',
+      watch.length ? el('ul', { class: 'chgl' }, watch.map((r) => el('li', { class: r.tone, 'data-in-rule': '' }, c3ic(r.tone === 'ok' ? 'check' : 'alert', 'sm'), el('span', null, r.text + (r.note ? ' · ' + r.note : ''))))) : el('p', { class: 'dim', style: 'font-size:var(--fs-2);margin:0' }, 'Nothing yet. A rule names a metric, a comparison, a threshold and a severity.')));
+    if (!ch) {   // real mode: the two page presses (the demo shows the mockup's charts instead and saves nothing)
+      right.push(card('plus', 'Add a rule', 'a number to watch', ruleForm(V)));
+      if (S.rules.length) right.push(card('plus', 'Record a reading', 'the latest value of a metric', readingForm(V, S.rules)));
+    }
+  } else if (D && D.err) right.push(card('alert', 'Not read', '', el('p', { class: 'dim', style: 'font-size:var(--fs-2);margin:0' }, D.err)));
+  frame(V, { head, left, right });
+}
+
+const view = makeView('signals', { init: reload, render });
+export const mount = view.mount;
+export const dispose = view.dispose;

package/workspace/public/pm/c3-strategy-panels.js

@@ -0,0 +1,45 @@
+/* pm/c3-strategy-panels.js — the strategy panels of the Calendar's Quarter and Year panes (c3-cal-strategy.js), mounted where the console3 mockup draws the same
+ * panel a second time: Initiatives > Lifecycle > Strategize (maturity 3582, bets, north star 3595, early signals, synergy) and Reports > Product (north star,
+ * quarter outcomes, console3.html line 4345). The builders are the Calendar's own, so the two places cannot drift; this file only supplies the read.
+ *
+ *   strategyPanel(name, ctx, opts) -> a node. name: north | outcomes | signals | synergy | maturity | bets.
+ *     The node is a `display:contents` wrapper, so the card sits in its column as if it were a direct child. It shows a one-line reading note until
+ *     GET /api/c3-strategy answers (read once, kept a minute by c3-cal-strategy.js), then it holds the card. A panel with no source draws its honest
+ *     empty card (what is missing and what fills it); an unreadable route says so. Nothing is invented.
+ *   ctx = { goInit(id, title), today?, data? }   opts = { view: 'year'|'quarter', n: signals shown, plain: heading "North star" only }
+ * DATA: the same route as the Calendar (workspace/lib/routes-c3-strategy.js); in demo mode c3-demo-cal3.js answers it with the mockup's own sample. */
+import { el } from './dom.js';
+import { ensureC3Css } from './pm-work-view.js';
+import { PANEL_BUILDERS, readModel, cachedModel, todayStr } from './c3-cal-strategy.js';
+
+function build(name, M0, ctx, opts) {
+  const M = M0.signalsAll ? M0 : { ...M0, signalsAll: (M0.signals || []).map((s) => ({ ...s })) };   // the Calendar adds the late initiatives from its gantt rows; this page has none, so the rule signals stand alone
+  const live = !M.demo; const today = ctx.today || M.today || todayStr(Date.now());
+  switch (name) {
+    case 'north': return PANEL_BUILDERS.north(M, opts.view || 'year', today, !!opts.plain);
+    case 'outcomes': return PANEL_BUILDERS.outcomes(M);
+    case 'signals': return PANEL_BUILDERS.signals(M, opts.n || 4, ctx, live);
+    case 'synergy': return PANEL_BUILDERS.synergy(M);
+    case 'maturity': return PANEL_BUILDERS.maturity(M);
+    case 'bets': return PANEL_BUILDERS.bets(M, ctx);
+    default: return null;
+  }
+}
+
+export function strategyPanel(name, ctx, opts) {
+  ensureC3Css();
+  const c = ctx || {}; const o = opts || {};
+  const host = el('div', { style: 'display:contents', 'data-sp': name });
+  const fill = (M) => {
+    if (!M || !M.ok) { host.replaceChildren(el('p', { class: 'dim mono', style: 'font-size:var(--fs-2)', role: 'status', 'data-sp-error': name }, 'The strategy view could not be read: ' + ((M && M.error) || 'not available'))); return; }
+    const node = build(name, M, c, o);
+    if (node) host.replaceChildren(node); else host.replaceChildren();
+  };
+  const cached = cachedModel();
+  if (cached) fill(cached);
+  else {
+    host.replaceChildren(el('p', { class: 'dim mono', style: 'font-size:var(--fs-2)', role: 'status', 'data-sp-loading': name }, 'Reading the repository'));
+    readModel(!(typeof window !== 'undefined' && window.__c3demo)).then(fill);
+  }
+  return host;
+}

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

@@ -0,0 +1,138 @@
+/* pm/c3-swipe.js — the console3 row swipe, as a primitive (console3.html lines 2420 to 2438, rowAct 2421).
+ *
+ *   attachSwipe(el, { onRight, onLeft, labelRight, labelLeft, iconRight, iconLeft, disabled, threshold }) -> detach()
+ *
+ * The mockup's gesture, kept as it is: a pointer drag that starts on the row (not on a button, link, field or an open row's
+ * case file) and moves mostly sideways. It locks to horizontal after 8px; a vertical move of more than 12px first hands the touch
+ * back to the page (scroll). The row follows the pointer (`--dx`; its children move at 0.55 of it), the `.rv` strip on the
+ * side being pulled fades in with the distance (`--d`, full at 90px), and the row takes `.dr` while it is held, `.swr` or `.swl`
+ * for the side. Releasing past 90px calls onRight (dx > 90) or onLeft (dx < -90); a shorter pull snaps back and does nothing.
+ * The click that a pull would end with is swallowed for 80ms, as the mockup does (`swSup`).
+ *
+ * Added: the label of the action is drawn beside its icon in the strip (`.rv .rvl`), so a swipe says what it will do; the same
+ * two actions work from the keyboard on the focused row (ArrowRight = onRight, ArrowLeft = onLeft; the row must have the focus
+ * itself, not a field inside it); under prefers-reduced-motion the row does not slide, the strip and its label show at the
+ * threshold only. The row carries tabindex=0, data-swipe, and an aria-description naming both actions.
+ *
+ * Pure parts (Node-testable): swipeStep, swipeEnd, revealOf, keyAction, SWIPE.
+ */
+export const SWIPE = { threshold: 90, lock: 8, cancelY: 12, suppressMs: 80, tracking: 0.55 };
+
+/** One pointer-move. state: null | { x, y, on, dx }. Returns the next state (null = the gesture is cancelled: it is a scroll). */
+export function swipeStep(state, dxRaw, dyRaw, cfg = SWIPE) {
+  if (!state) return null;
+  const dx = dxRaw; const dy = dyRaw;
+  if (!state.on) {
+    if (Math.abs(dx) < cfg.lock || Math.abs(dy) > Math.abs(dx)) return Math.abs(dy) > cfg.cancelY ? null : { ...state, dx: 0 };
+    return { ...state, on: true, dx };
+  }
+  return { ...state, dx };
+}
+
+/** The pointer is released (or cancelled). 'right' | 'left' | null. */
+export function swipeEnd(state, cancelled = false, cfg = SWIPE) {
+  if (!state || cancelled || !state.on) return null;
+  if (state.dx > cfg.threshold) return 'right';
+  if (state.dx < -cfg.threshold) return 'left';
+  return null;
+}
+
+/** How far the strip is revealed: { right: 0..1, left: 0..1 } for a drag of dx pixels (the mockup's `--d`). */
+export function revealOf(dx, cfg = SWIPE) {
+  const d = Math.min(1, Math.abs(dx) / cfg.threshold);
+  return { right: dx > 0 ? d : 0, left: dx < 0 ? d : 0 };
+}
+
+/** The keyboard twin of a swipe: a key on the focused row maps to a side, or null. */
+export function keyAction(key, { shift = false, meta = false, ctrl = false, alt = false } = {}) {
+  if (shift || meta || ctrl || alt) return null;
+  if (key === 'ArrowRight') return 'right';
+  if (key === 'ArrowLeft') return 'left';
+  return null;
+}
+
+const reduced = () => { try { return typeof matchMedia === 'function' && matchMedia('(prefers-reduced-motion: reduce)').matches; } catch { return false; } };
+const IGNORE = 'button,a,select,input,textarea,.xp,.slt,[data-noswipe]';
+
+function strip(side, icon, label) {
+  const s = document.createElement('span');
+  s.className = 'rv ' + (side === 'right' ? 'r' : 'l');
+  s.setAttribute('aria-hidden', 'true');
+  if (icon) {
+    const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
+    svg.setAttribute('class', 'ic'); svg.setAttribute('aria-hidden', 'true');
+    const u = document.createElementNS('http://www.w3.org/2000/svg', 'use'); u.setAttribute('href', '#c3i-' + icon); svg.appendChild(u); s.appendChild(svg);
+  }
+  const t = document.createElement('span'); t.className = 'rvl'; t.textContent = label || ''; s.appendChild(t);
+  return s;
+}
+
+export function attachSwipe(el, opts = {}) {
+  const { onRight, onLeft, labelRight = '', labelLeft = '', iconRight = 'check', iconLeft = 'moon', disabled, threshold } = opts;
+  const cfg = threshold ? { ...SWIPE, threshold } : SWIPE;
+  const off = () => typeof disabled === 'function' && disabled();
+  el.setAttribute('data-swipe', '');
+  if (!el.hasAttribute('tabindex')) el.setAttribute('tabindex', '0');
+  el.setAttribute('aria-description', (labelRight ? 'Swipe right or press the right arrow: ' + labelRight + '. ' : '') + (labelLeft ? 'Swipe left or press the left arrow: ' + labelLeft + '.' : ''));
+  let rvR = el.querySelector(':scope > .rv.r'); let rvL = el.querySelector(':scope > .rv.l');
+  if (!rvR && onRight) { rvR = strip('right', iconRight, labelRight); el.prepend(rvR); }
+  if (!rvL && onLeft) { rvL = strip('left', iconLeft, labelLeft); el.prepend(rvL); }
+  if (rvR && !rvR.querySelector('.rvl') && labelRight) { const t = document.createElement('span'); t.className = 'rvl'; t.textContent = labelRight; rvR.appendChild(t); }
+  if (rvL && !rvL.querySelector('.rvl') && labelLeft) { const t = document.createElement('span'); t.className = 'rvl'; t.textContent = labelLeft; rvL.appendChild(t); }
+
+  let st = null; let suppress = false; let tmr = null;
+  const paint = (dx) => {
+    const r = revealOf(dx, cfg);
+    if (!reduced()) el.style.setProperty('--dx', dx + 'px');
+    el.classList.toggle('swr', dx > 0); el.classList.toggle('swl', dx < 0);
+    const past = Math.abs(dx) > cfg.threshold;
+    if (rvR) rvR.style.setProperty('--d', String(reduced() ? (past && dx > 0 ? 1 : 0) : r.right));
+    if (rvL) rvL.style.setProperty('--d', String(reduced() ? (past && dx < 0 ? 1 : 0) : r.left));
+  };
+  const clear = () => {
+    el.classList.remove('dr', 'swr', 'swl'); el.style.removeProperty('--dx');
+    if (rvR) rvR.style.removeProperty('--d'); if (rvL) rvL.style.removeProperty('--d');
+  };
+  const fire = (side) => { const fn = side === 'right' ? onRight : onLeft; if (fn) fn(el, side); };
+
+  const onMove = (e) => {
+    if (!st) return;
+    const was = st.on;
+    st = swipeStep(st, e.clientX - st.x, e.clientY - st.y, cfg);
+    if (!st) { teardown(); clear(); return; }
+    if (st.on && !was) { el.classList.add('dr'); try { const g = getSelection(); if (g) g.removeAllRanges(); } catch { /* no selection API */ } }
+    if (st.on) paint(st.dx);
+  };
+  const onUp = (e) => finish(e && e.type === 'pointercancel');
+  function finish(cancelled) {
+    const s = st; st = null; teardown(); clear();
+    if (s && s.on) { suppress = true; clearTimeout(tmr); tmr = setTimeout(() => { suppress = false; }, SWIPE.suppressMs); }
+    const side = swipeEnd(s, cancelled, cfg);
+    if (side) fire(side);
+  }
+  function teardown() {
+    document.removeEventListener('pointermove', onMove); document.removeEventListener('pointerup', onUp); document.removeEventListener('pointercancel', onUp);
+  }
+  const onDown = (e) => {
+    if (e.button > 0 || off()) return;
+    if (e.target.closest && e.target.closest(IGNORE) && e.target.closest(IGNORE) !== el) return;
+    if (el.getAttribute('aria-expanded') === 'true') return;       // an open row is read, not swiped (the mockup does the same)
+    st = { x: e.clientX, y: e.clientY, on: false, dx: 0 };
+    document.addEventListener('pointermove', onMove); document.addEventListener('pointerup', onUp); document.addEventListener('pointercancel', onUp);
+  };
+  const onClickCapture = (e) => { if (suppress) { suppress = false; e.stopPropagation(); e.preventDefault(); } };
+  const onKey = (e) => {
+    if (e.target !== el || off()) return;
+    const side = keyAction(e.key, { shift: e.shiftKey, meta: e.metaKey, ctrl: e.ctrlKey, alt: e.altKey });
+    if (!side || (side === 'right' ? !onRight : !onLeft)) return;
+    e.preventDefault(); e.stopPropagation(); fire(side);
+  };
+  el.addEventListener('pointerdown', onDown);
+  el.addEventListener('click', onClickCapture, true);
+  el.addEventListener('keydown', onKey);
+  return function detach() {
+    teardown(); clear(); clearTimeout(tmr);
+    el.removeEventListener('pointerdown', onDown); el.removeEventListener('click', onClickCapture, true); el.removeEventListener('keydown', onKey);
+    el.removeAttribute('data-swipe'); el.removeAttribute('aria-description');
+  };
+}

package/workspace/public/pm/c3-terminal-data.js

@@ -0,0 +1,26 @@
+/* pm/c3-terminal-data.js — where the agent surfaces read and press, in one place.
+ *   source()  -> { demo, getRuns(), answer(body), correct(body), canPrompt, why, ... }
+ * REAL: GET /api/runs; POST /api/runs/answer and /api/runs/correction (a page press; the server refuses any other caller). Nothing here sends
+ * a prompt to a session: no page route does. `canPrompt` is false and `why` says so; every control that would send one is drawn disabled with it.
+ * DEMO: the fixtures of c3-demo-term.js, in the real response shapes, answers from memory and advances its own state; nothing is sent.
+ *
+ * needsYou(runs) is the one count for the needs-you badge: a run that asks, holds a permission, needs the terminal or did not start. */
+import { pmGet, pmPost } from './http.js';
+
+export const WHY_PROMPT = 'Sending a prompt to a session is not available on this page: no safe route sends one. The session\'s terminal is in the main app.';
+
+const real = {
+  demo: false, canPrompt: false, why: WHY_PROMPT,
+  getRuns: () => pmGet('/api/runs'),
+  answer: (b) => pmPost('/api/runs/answer', b),
+  correct: (b) => pmPost('/api/runs/correction', b),
+};
+/* demo: c3-demo.js registers the fixtures' factory (window.__c3termfx_make) by importing c3-demo-term.js; the page is in demo when installDemo() ran (window.__c3demo). */
+export const isDemo = () => typeof window !== 'undefined' && !!window.__c3demo && typeof window.__c3termfx_make === 'function';
+export const source = () => (isDemo() ? (window.__c3termfx || (window.__c3termfx = window.__c3termfx_make())) : real);
+
+export function needsYou(r) {
+  if (!r || !r.ok || !r.cards) return 0;
+  const live = new Set([].concat((r.groups && r.groups.onCard) || [], (r.groups && r.groups.startedByMe) || [], (r.groups && r.groups.automatic) || []).filter((s) => s && s.endedAt == null).map((s) => s.id));
+  return Object.entries(r.cards).filter(([id, c]) => live.has(id) && c && ((c.permissions || []).length || ['asking', 'permission', 'attention', 'not_started'].includes(c.state))).length;
+}

package/workspace/public/pm/c3-terminal-edge.js

@@ -0,0 +1,91 @@
+/* pm/c3-terminal-edge.js — the "Edge cases" tab of agent-surfaces.html: each case shows the CLI event that triggers it, what you see, what you can do, and what
+ * happens if that fails. The cards are run-card.js cards over folded runs (scripts/card-state.js cardFor over reply lines; the rich results through the
+ * contract's own validators). EXAMPLE DATA, in real mode too: no run is attached, so a press answers "this is an example" and records nothing.
+ *   mountEdge(host)   disposeEdge(host)
+ * The mockup's twelve cases, plus a group for the agent's reply failing (the mockup's "Next reply" switch: no result, unreadable, crashed, quiet,
+ * unlabelled claim, plain text), so every failure state of the contract can be looked at. */
+import { el } from './dom.js';
+import { ic } from './c3-terminal-icons.js';
+import { mountRunCard, disposeRunCard, openBtn } from './run-card.js';
+import { mdNode } from './c3-terminal-results.js';
+import { toast } from './c3-toast.js';
+
+const TESTED = 'Logic tested';
+const UNV = 'Logic tested · CLI behaviour unverified';
+const CASES = [
+  { g: 'The CLI asks you', id: 'q', name: 'Its own question', status: UNV, ev: 'PreToolUse on the question tool. The workspace holds the hook open, shows this, then denies the tool with your answer as the reason.', fb: 'If the hold fails, the hook denies at once and tells the agent to use the format; the question then arrives as a normal ask. If both fail: Open the session.' },
+  { g: 'The CLI asks you', id: 'plan', name: 'Plan approval', status: UNV, ev: 'PermissionRequest for the plan-exit tool. The plan text arrives with it; allow or deny goes back.', fb: 'If the workspace is down the CLI shows its own approval in the terminal. Nothing is approved by default.' },
+  { g: 'The CLI cannot continue', id: 'start', name: 'Not started', status: UNV, fail: 'notstarted', ev: 'No SessionStart hook within 10 seconds of launch. Usually a trust-folder or update prompt that only the terminal shows.', fb: 'Prevention: worktrees are made under a folder the CLI already trusts, and its auto-update is switched off for sessions (setting to be confirmed).' },
+  { g: 'The CLI cannot continue', id: 'auth', name: 'Sign-in needed', status: UNV, fail: 'attention', ev: 'A notification of an attention type (dialog, sign-in). Only the terminal can show it.', fb: 'This is the lowest tier on purpose: the interface says what kind of thing it is and opens the real CLI.' },
+  { g: 'The CLI cannot continue', id: 'pause', name: 'Usage limit', status: UNV, fail: 'pause', ev: 'A quota notification (auto-resume fired, stale or disabled). The run is paused, not failed.', fb: 'If the notice never comes, the quiet timer applies after 2 minutes and offers Open the session.' },
+  { g: 'The CLI cannot continue', id: 'api', name: 'API error', status: UNV, fail: 'api', ev: 'The StopFailure hook: the turn ended on an API error.', fb: 'Retry is one tap. Three failures in a row stop retrying and offer Open the session.' },
+  { g: 'The agent\'s reply fails', id: 'noresult', name: 'Ends with no result', status: TESTED, fail: 'noresult', ev: 'The Stop hook told the agent to report, twice. The session still ended with no result, question or reason.', fb: 'The card says so and keeps its content. Retry or Open the session; nothing on the card changed.' },
+  { g: 'The agent\'s reply fails', id: 'rejected', name: 'Unreadable reply', status: TESTED, fail: 'rejected', ev: '`pmos reply result` refused the body (for example: headline is required). The agent is told why and can send it again.', fb: 'If it cannot, the run ends as "ended without a usable result" and the refusal is in the case file.' },
+  { g: 'The agent\'s reply fails', id: 'crashed', name: 'Crashed', status: TESTED, fail: 'crashed', ev: 'SessionEnd with a non-zero exit code and no result.', fb: 'The card says it ended with an error. Retry or Open the session.' },
+  { g: 'The agent\'s reply fails', id: 'quiet', name: 'Goes quiet', status: TESTED, fail: 'quiet', ev: 'No output for 2 minutes and no result. The quiet timer is the interface\'s own.', fb: 'It may be stuck. Open the session to see it.' },
+  { g: 'The agent\'s reply fails', id: 'unlabelled', name: 'Unlabelled claim', status: TESTED, fail: 'unlabelled', ev: 'A claim with no valid label (fact needs a source, estimate needs a range). The strict command refuses it; the interface folds leniently as a second layer.', fb: 'The claim is kept and marked "unlabelled". It cannot back a message, and an unlabelled draft cannot be slid to send.' },
+  { g: 'The agent\'s reply fails', id: 'prose', name: 'Plain text', status: TESTED, fail: 'prose', ev: 'The Stop hook\'s last assistant message, when no result was reported. Tier 2.', fb: 'Shown as unchecked text, never as a result. Ask again in the format, or Open the session.' },
+  { g: 'Richer results', id: 'deck', name: 'Slides', status: TESTED, edge: 'deck', ev: 'A deck result: up to 20 slides, 6 bullets each. Pptx stays available as an export file with no preview.', fb: 'A bullet without a label is counted. The deck cannot be shared until none is left.' },
+  { g: 'Richer results', id: 'tbl', name: 'Table', status: TESTED, edge: 'table', ev: 'A table result: up to 12 columns and 200 rows. More than that becomes a csv file.', fb: 'A row with the wrong number of cells rejects the whole table, and the agent is told why.' },
+  { g: 'Richer results', id: 'dg', name: 'Diagram and image', status: TESTED, edge: 'diagram', ev: 'A diagram result (mermaid or svg) or a png, jpg or svg file. Drawn locally; no network, no scripts.', fb: 'An svg with a script, a handler, an external link or a foreignObject is refused with the reason. The agent gets the error and can resend.' },
+  { g: 'Richer results', id: 'big', name: 'Long answer', status: TESTED, edge: 'file', ev: 'The reply command refuses a result over 8 KB and tells the agent to write a file. The agent fixes it on its own.', fb: 'If the agent cannot, the run ends as plain text (Tier 2) and you see the text.' },
+  { g: 'Runs and history', id: 'sub', name: 'Helpers (subagents)', status: UNV, ev: 'SubagentStart and SubagentStop hooks. Only the helper type and whether it is running are kept.', fb: 'A helper\'s own text is never shown or trusted. Its work reaches you only through the parent\'s result.' },
+  { g: 'Runs and history', id: 'ver', name: 'Resumed or newer format', status: TESTED, fail: 'format', ev: 'Every line carries a format number. A line newer than the workspace reads is ignored and counted. At every start, resume and compact, the CLI is given the reply instructions again.', fb: 'A run that cannot be read says so and offers Open the session. It is never shown half-read.' },
+];
+const stub = { demo: false, canPrompt: false, why: 'This is an example: no run is attached, so nothing is sent.', answer: async () => ({ ok: false, error: 'this is an example, no run is attached' }), correct: async () => ({ ok: false, error: 'this is an example, no run is attached' }), send: async () => ({ ok: false, error: 'this is an example' }) };
+const ctxFor = (fx, id, name, card, extra) => ({ id: 'edge-' + id, name, card, src: stub, origin: 'example', refresh() {}, openSession: () => toast('In the real workspace this opens the CLI session.'), glossary: fx.glossary, fileBody: (p) => fx.edge.fileBody && fx.edge.fileBody[p], ...(extra || {}) });
+
+function questionCase(fx, st) {
+  const qs = fx.edge.question.questions; const Q = st.q || (st.q = { a: [null, []], sent: false });
+  const draw = () => st.redraw();
+  const pill = (on, l, f) => el('button', { type: 'button', class: 'pill' + (on ? ' on' : ''), 'aria-pressed': String(on), onclick: f }, l);
+  const ready = Q.a[0] !== null && Q.a[1].length;
+  return el('div', { class: 'c3t-card' },
+    qs.map((q, qi) => el('div', { class: 'ask' }, el('b', null, q.q), q.multi ? dim('Pick any') : null, el('div', { class: 'c3t-tray' }, q.options.map((o, oi) => pill(qi === 0 ? Q.a[0] === oi : Q.a[1].includes(oi), o.label, () => { if (qi === 0) Q.a[0] = oi; else { const k = Q.a[1].indexOf(oi); if (k < 0) Q.a[1].push(oi); else Q.a[1].splice(k, 1); } draw(); }))))),
+    Q.sent ? el('div', { class: 'chips2' }, el('span', { class: 'chip2 ok' }, 'Sent to the CLI: ' + qs[0].options[Q.a[0]].label + ' · ' + Q.a[1].map((i) => qs[1].options[i].label).join(', ') + '. It will not ask again.'))
+      : el('div', { class: 'c3t-tray' }, dim('Two questions from the CLI'), el('span', { style: 'flex:1' }), el('button', { type: 'button', class: 'pill rec', disabled: !ready, onclick: () => { Q.sent = true; toast('Example: answered. In a run the CLI continues with your choices.'); draw(); } }, 'Answer')));
+}
+const dim = (t) => el('span', { class: 'dim mono', style: 'font-size:var(--fs-2)' }, t);
+function planCase(fx, st) {
+  const P = st.p || (st.p = { sub: null, out: null }); const draw = () => st.redraw();
+  const set = (decision, note, label) => { P.out = label; toast('Example: counted as a correction would be.'); draw(); };
+  return el('div', { class: 'c3t-card' }, el('div', { class: 'top' }, el('span', { class: 'tg', style: '--tc:var(--acc)' }, 'Plan to approve'), dim('read-only run')), el('div', { class: 'c3t-file' }, el('div', { class: 'fb' }, mdNode(fx.edge.plan.plan))),
+    P.out ? el('div', { class: 'chips2' }, el('span', { class: 'chip2 ' + (P.out[0] === 'A' ? 'ok' : '') }, P.out))
+      : [el('div', { class: 'c3t-tray' }, el('button', { type: 'button', class: 'pill rec', onclick: () => { P.out = 'Approved: allowed in the CLI'; toast('Example: plan approved. The CLI continues.'); draw(); } }, ic('check', 'sm'), 'Approve'),
+        el('button', { type: 'button', class: 'pill' + (P.sub === 'r' ? ' on' : ''), onclick: () => { P.sub = P.sub === 'r' ? null : 'r'; draw(); } }, ic('edit', 'sm'), 'Revise'),
+        el('button', { type: 'button', class: 'pill' + (P.sub === 'x' ? ' on' : ''), onclick: () => { P.sub = P.sub === 'x' ? null : 'x'; draw(); } }, ic('x', 'sm'), 'Reject')),
+      P.sub === 'r' ? el('div', { class: 'c3t-tray' }, fx.moves.revise.map((m) => el('button', { type: 'button', class: 'pill', onclick: () => set('revise', m, 'Revise sent: "' + fx.edge.planReplies.revise.hookSpecificOutput.decision.message.replace('Make it shorter.', m) + '"') }, m))) : null,
+      P.sub === 'x' ? el('div', { class: 'c3t-tray' }, dim('Why?'), fx.moves.reject.map((m) => el('button', { type: 'button', class: 'pill', onclick: () => set('reject', m, 'Rejected sent: "The PM rejected the plan: ' + m + '."') }, m))) : null]);
+}
+function subCase() {
+  return el('div', { class: 'c3t-card' }, el('div', { class: 'c3t-run' }, el('div', { class: 'line' }, el('span', { class: 'c3spin' }, ic('run', 'sm')), el('span', { class: 't' }, 'Reading the plan with 2 helpers')),
+    el('div', { class: 'c3t-tray' }, el('span', { class: 'chip2' }, ic('check', 'sm'), 'Explore · done'), el('span', { class: 'chip2', style: 'color:var(--acc)' }, ic('run', 'sm'), 'Plan · working')), el('div', { class: 'prog' }, el('i', { class: 'd' }), el('i', { class: 'd' }), el('i'))));
+}
+
+export function mountEdge(host, fx) {
+  disposeEdge(host);
+  const st = { cur: 'q', ui: {} };
+  const list = el('div', { class: 'elist', 'data-c3t': 'edge-list' }); const detail = el('div', { style: 'min-width:0', 'data-c3t': 'edge-detail' });
+  st.redraw = () => draw();
+  function draw() {
+    let last = '';
+    list.replaceChildren(...CASES.map((c) => [c.g !== last ? (last = c.g, el('div', { class: 'eyebrow eh' }, c.g)) : null, el('button', { type: 'button', 'aria-pressed': String(c.id === st.cur), 'data-edge': c.id, onclick: () => { st.cur = c.id; draw(); } }, c.name)]).flat().filter(Boolean));
+    const c = CASES.find((x) => x.id === st.cur);
+    let body;
+    const slot = el('div', { 'data-run-host': 'edge' });
+    if (c.id === 'q') body = questionCase(fx, st);
+    else if (c.id === 'plan') body = planCase(fx, st);
+    else if (c.id === 'sub') body = subCase();
+    else {
+      const rec = c.fail ? fx.fail[c.fail] : c.id === 'big' ? fx.edge.file : fx.edge[c.edge];
+      mountRunCard(slot, ctxFor(fx, c.id, c.name, rec.card, { observed: null }));
+      body = slot;
+      if (c.id === 'big') body = el('div', { class: 'c3t-bigwrap' }, el('div', { class: 'tm' }, el('div', { class: 'raw' }, 'pmos reply result --type evidence --file big.json'), el('div', { class: 'raw', style: 'color:var(--destructive)' }, 'error: result too large · hint: write it to a file in the run folder and send --type file'), el('div', { class: 'raw' }, 'pmos reply result --type file --media md --file outputs/r12/report.md')), slot, dim('You never saw the failed attempt. It is in the case file.'));
+    }
+    detail.replaceChildren(el('div', { class: 'node c3t-node' }, el('div', { class: 'top' }, el('b', { style: 'font-size:var(--fs-4)' }, c.name), el('span', { class: 'chip2 ' + (c.status === TESTED ? 'ok' : 'warn'), style: 'margin-left:auto' }, c.status)),
+      el('div', { class: 'dim mono' }, el('b', { style: 'color:var(--foreground)' }, 'CLI event'), ' · ' + c.ev), body, el('div', { class: 'dim mono' }, el('b', { style: 'color:var(--foreground)' }, 'If this fails'), ' · ' + c.fb)));
+  }
+  host.replaceChildren(el('div', { class: 'dim mono', style: 'font-size:var(--fs-2)' }, 'Example data, not from your runs. Each case shows the CLI event that triggers it, what you see, what you can do, and what happens if that fails.'), el('div', { class: 'c3t-edge' }, list, detail));
+  draw();
+}
+export function disposeEdge(host) { host.querySelectorAll('[data-run-host]').forEach((h) => { try { disposeRunCard(h); } catch { /* gone */ } }); host.replaceChildren(); }

package/workspace/public/pm/c3-terminal-icons.js

@@ -0,0 +1,41 @@
+/* pm/c3-terminal-icons.js — the icon language of the agent surfaces, and the few glyphs the console3 sprite does not hold.
+ *
+ * Two glyphs, never swapped (the mockups draw them apart: agent-surfaces.html and terminal-layout.html):
+ *   AGENT  `pulse`  (the mockup's i-pulse) the agent surfaces: sessions that need you, results to accept. Header button (with the needs-you badge) and the
+ *                   dock's "Agent surfaces" button. It also means "the agent acts" everywhere else on the page (swipe right, suggested move).
+ *   TERMINAL `term` (`>_`)  a real session's terminal: the dock rail button, a session's "Open the session" link, a session row's mark.
+ * AGENT = "the interface that reads sessions for you". TERMINAL = "the raw CLI session". A button shows one or the other, with its own tooltip.
+ *
+ * The extra symbols are the mockup's own paths (agent-surfaces.html lines 168 to 184), added once under the c3i- ids c3ic() reads. A symbol
+ * another module already added is not added again. */
+import { c3ic } from './pm-work-view.js';
+
+export const ICON = { agent: 'pulse', terminal: 'term' };   // the mockup's header Sessions pill draws the pulse glyph; the rail draws the terminal glyph
+export const TIPS = {
+  agentHeader: (n) => (n ? 'Agent surfaces: ' + n + (n === 1 ? ' session needs you' : ' sessions need you') : 'Agent surfaces: sessions, results to accept, questions for you'),
+  agentDock: 'Agent surfaces: the full page of sessions that need you',
+  terminalRail: 'Sessions dock (Ctrl J): the terminals of your branches',
+  terminalOpen: 'Open the session: its real terminal, in the main app',
+};
+
+const NS = 'http://www.w3.org/2000/svg';
+const PATHS = {
+  edit: 'M4 20h4L19 9l-4-4L4 16zM13 7l4 4', book: 'M5 4h10a3 3 0 0 1 3 3v13H8a3 3 0 0 1-3-3zM5 17a3 3 0 0 1 3-3h10', flip: 'M4 8h13l-3-3M20 16H7l3 3',
+  run: 'M12 3a9 9 0 1 0 9 9', pulse: 'M3 12h4l3-7 4 14 3-7h4', chev: 'm9 6 6 6-6 6', chevl: 'm15 6-6 6 6 6', chat: 'M4 5h16v11H9l-5 4z',
+};
+let done = false;
+export function ensureTermIcons() {
+  if (done || typeof document === 'undefined') return;
+  done = true;
+  const missing = Object.keys(PATHS).filter((k) => !document.getElementById('c3i-' + k));
+  if (!missing.length) return;
+  const svg = document.createElementNS(NS, 'svg');
+  svg.setAttribute('width', '0'); svg.setAttribute('height', '0'); svg.setAttribute('aria-hidden', 'true'); svg.style.position = 'absolute';
+  for (const k of missing) {
+    const sym = document.createElementNS(NS, 'symbol'); sym.setAttribute('id', 'c3i-' + k); sym.setAttribute('viewBox', '0 0 24 24');
+    const p = document.createElementNS(NS, 'path'); p.setAttribute('d', PATHS[k]); sym.appendChild(p); svg.appendChild(sym);
+  }
+  document.body.appendChild(svg);
+}
+/** An icon element (the c3 sprite plus the extras above). */
+export function ic(name, cls) { ensureTermIcons(); return c3ic(name, cls); }