create-pmos 0.124.0 → 0.126.0

package/workspace/public/pm/lifecycle-lens.js

@@ -0,0 +1,261 @@
+/* pm/lifecycle-lens.js — the Lifecycle lens of Initiatives (console3 wave B1; R4b: on the console3 mockup's own markup and CSS).
+ *
+ * The mockup (prototype/pmos-console-handoff/mockups/console3.html) is the UI. Lifted: the view bar `.calbar` with the nine stages
+ * as `.seg` buttons (icon, label, `.bdg.g` count) and the scope as `.chips2` pills (iniHead, line 3576); the lens header `.lh`
+ * (iniLensHead, line 3579); `.calwrap > .calbody > .brief.sbb > .bcols > .bcol.l/.r` (vIni, line 3600); the card deck `.cdeck >
+ * .deck > .fc` with the dots `.dk .dkd` (iniDeck, line 3580); the lifecycle line `.lc` for one initiative (lifecycle, line 3487;
+ * the mockup's seven columns are nine here, as the mockup's own override at c3:20 makes them); and the stage's list as
+ * `section.card.sect > .sh2 + ul.list > li.nrow` with a case file in `.xp > .xi` (c3needs, line 4714). Styles: pm/console3.css.
+ *
+ * What is real: the rows of the Initiatives view ctx (the roadmap horizons rows) and the nine stages derived from them
+ * (lifecycle-lens-model.js). Stage is derived, never set; a stage with no signal reads "no signal yet", never done or pending;
+ * a stage the lane skips reads skipped. Park (on hold) and Kill (cancelled) go through setLifecycle with a reason, as the sheet's
+ * lifecycle menu does. `nine_stages` is not in that payload yet, so the model mirrors scripts/nine-stages.js; the page says so.
+ * Not lifted: the mockup's invented cards (hypotheses, scores, ideas, charts, lines 3490 to 3562) and its right-column charts;
+ * the Build and Deliver lists of Jira tickets and releases (Releases is its own view).
+ * What a stage needs (c3needs, line 4713): one row per requirement of the stage (REQ in the model), for each initiative at it, each with a
+ * case file in place: an agent's requirement offers "Have the agent: draft it" and "Not yet"; the PM's decision offers its two answers;
+ * the factory's is read-only. This page cannot start an agent or record a stage decision, so in real mode those slides are drawn
+ * disabled with the reason; the demo (?demo=1) lets the slide mark it done. Park or Kill goes through the lifecycle route with the reason
+ * as the option. Swipe right or left and the keys e, n, j, k work on every row. A deck card per initiative at the stage (five at most; the rest are in
+ * the list) replaces the mockup's five invented cards.
+ * Self-registers as the 'lifecycle' Initiatives view, like Timeline and Releases.
+ */
+import { el } from './dom.js';
+import { ensureComponentsCss } from './primitives.js';
+import { registerInitiativesView } from './registry.js';
+import { setLifecycle } from './initiatives-api.js';
+import { STAGES, LABELS, bucketRows, stageNote, nineOf, REQ, reqWho, prevPending, DRAFT_TEXT, DECIDE_TEXT } from './lifecycle-lens-model.js';
+import { rowShell, caseNode, markDone, say } from './c3-init-extras.js';
+import { lensPanels } from './c3-lifecycle-panels.js';
+import { strategyPanel } from './c3-strategy-panels.js';
+import { ensureC3Css, c3ic, c3ring, c3Phone } from './pm-work-view.js';
+
+const views = new WeakMap();
+const PILLS = 7;     // the mockup's scope row has five initiatives; a repository has hundreds, so the row shows the first few and says so
+const LIST_MAX = 20;  // a stage's list shows this many rows, then "Show all"
+const ICON = { discover: 'search', ideate: 'spark', strategize: 'flag', prioritize: 'scale', plan: 'tree', build: 'branch', deliver: 'out', monitor: 'report', evaluate: 'check' };   // ILI, lines 3437 and 4686
+const short = (t, n) => { t = String(t || ''); return t.length > n ? t.slice(0, n - 1) + '…' : t; };
+
+/* ── the mockup's Strategize lens (console3.html nsChart line 2833, sigCard 2883, matCard 2894), drawn only when ctx.strategy is given. The
+ * roadmap route does not send one; the /c3.html demo mode does (the mockup's north star series, early signals and maturity table). ───── */
+const SVGNS = 'http://www.w3.org/2000/svg';
+const sv = (tag, attrs, ...kids) => { const n = document.createElementNS(SVGNS, tag); for (const k of Object.keys(attrs || {})) if (attrs[k] != null) n.setAttribute(k, attrs[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'] };
+
+function miniSpark(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', style: 'width:64px;height:26px' }, 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 }));
+}
+function signalsCard(list) {
+  const order = ['pivot', 'drift', 'watch', 'up'];
+  return el('section', { class: 'card', 'data-lc-strategy': 'signals' }, el('h3', null, c3ic('alert'), 'Early signals ', el('span', { class: 'dim', style: 'text-transform:none;letter-spacing:0' }, 'before the numbers say it')),
+    el('ul', { class: 'sgl', style: 'list-style:none;margin:0;padding:0' }, list.slice().sort((a, b) => order.indexOf(a.sev) - order.indexOf(b.sev)).slice(0, 4).map((g) => { const V = SEV[g.sev];
+      return el('li', { class: 'sgr', style: '--c:' + V[1] }, el('span', { class: 'ki', style: 'color:' + V[1] }, c3ic(V[2])),
+        el('div', { style: 'min-width:0' }, el('div', { class: 'st1' }, g.t), el('div', { class: 'st2' }, g.ev), el('div', { class: 'st3' }, el('span', { class: 'sv' }, V[0]), el('span', null, c3ic('target', 'sm'), g.thr), el('span', null, c3ic('clock', 'sm'), g.ttt))), miniSpark(g.sp, V[1])); })));
+}
+/** The mockup's lifecycle(id) line: one cell per stage; done is `d`, the current one `n`. */
+function lcLine(row) {
+  const nine = nineOf(row);
+  return el('div', { class: 'lc', role: 'img', 'aria-label': 'Lifecycle' }, nine.map((s) => el('div', {
+    class: s.status === 'done' ? 'd' : s.status === 'current' ? 'n' : '', title: s.label + ': ' + (s.status === 'no-signal' ? 'no signal yet' : s.status),
+    'data-lc-cell': s.key, 'data-status': s.status, style: s.status === 'skipped' ? 'opacity:.4' : null,
+  }, el('i'), (s.label || s.key).slice(0, 5))));
+}
+
+/** One deck card for an initiative at the stage: the mockup's card (`.fc > .cf > .cfa + .cfh + .cff`) with real fields only. */
+function deckCard(V, row, i, n) {
+  const nine = nineOf(row);
+  const signalled = nine.filter((s) => s.status === 'done' || s.status === 'current' || s.status === 'pending');
+  const done = nine.filter((s) => s.status === 'done').length;
+  const cur = nine.find((s) => s.status === 'current');
+  const open = () => V.ctx.openInitiative(V.ctx.repo, row.id);
+  return el('article', { class: 'fc lnk' + (i === 0 ? ' on' : ''), tabindex: '0', role: 'button', 'aria-label': 'Open ' + row.title + ', card ' + (i + 1) + ' of ' + n,
+    'data-lc-deck': row.id, style: '--tc:var(--acc)', onClick: open, onKeydown: (e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); open(); } } },
+    el('div', { class: 'ff' },
+      el('div', null, el('span', { class: 'tg f', style: '--tc:var(--acc)' }, c3ic('init', 'sm'), row.lane || 'feature')),
+      el('div', { class: 'cf' },
+        el('div', { class: 'cfa' }, el('h2', null, row.title)),
+        el('div', { class: 'cfh' }, el('div', { class: 'hero', 'data-hero': 'ring' }, c3ring(done, Math.max(1, signalled.length), 64, done + '/' + signalled.length))),
+        el('div', { class: 'cff' },
+          el('div', { class: 'cfx' }, el('span', null, c3ic('clock', 'sm'), cur ? 'now: ' + cur.label : 'all signalled stages are done')),
+          el('span', { class: 'cfr n' }, 'Tap to open it ', c3ic('next', 'sm'))))));
+}
+
+/* ── what a stage needs: one row per requirement, each with a case file (console3.html c3needs, line 4713; C3.cases.rq line 4719) ── */
+const isDemo = () => !!window.__c3demo;
+/** Is a requirement done for an initiative at this stage? The nine-stage rule says a stage that is done has all its requirements; at the current stage nothing is
+ *  recorded per requirement, so none is shown done unless the PM's slide has just recorded it (the demo also carries the mockup's own table). */
+function reqDone(V, row, L, key) {
+  const st = (nineOf(row).find((x) => x.key === L) || {}).status;
+  if (st === 'done') return true;
+  if ((V.rq || {})[row.id + '|' + key]) return true;
+  const d = window.__c3reqDone && window.__c3reqDone[row.id]; return !!(d && d[key]);
+}
+const openIt = (V, row) => V.ctx.openInitiative(V.ctx.repo, row.id);
+
+function rqCase(V, row, L, r) {
+  const [key, text, who] = r; const nm = row.title; const stg = LABELS[L]; const demo = isDemo();
+  const done = reqDone(V, row, L, key);
+  const lane = nineOf(row); void lane;
+  const base = [['init', nm + ', ' + (row.lane || 'feature') + ' lane', 'Lane'], ['target', 'Anchor: ' + (row.anchor || 'none'), 'Anchor', row.anchor ? 'ok' : 'bad']];
+  const go = ['open', row.id, 'Open ' + nm];
+  if (done) return { sit: text + ' is done for ' + nm + '.', conf: 90, chg: [['check', 'Counted in the derived stage', '', 'ok']], opts: [], go };
+  if (who === 'factory') return { sit: 'The factory builds from the tickets and opens pull requests. Its progress fills this by itself. You cannot tick it.', conf: 88, chg: [['branch', 'Merged work is counted from Jira, read-only', 'Jira, CI', 'ok'], ['shield', 'The factory is propose-only: it never merges and never writes this record', 'D65']], opts: [], go };
+  if (who === 'agent') {
+    const t = DRAFT_TEXT[key] || ['Draft it', ''];
+    return { sit: 'Nothing has this yet. An agent drafts it and you read it before it counts. ' + nm + ' stays at ' + stg + ' until it exists.', conf: 82, chg: base, cta: 'Slide to start the draft', go,
+      outboxReason: 'An agent session does the drafting, and this page cannot start one. Ask it in your terminal; the draft comes back for you to read.',
+      opts: [{ id: 'go', l: 'Have the agent: ' + t[0].toLowerCase(), rec: 1, outward: !demo, fx: [['spark', t[1], 'ok'], ['shield', 'Inside the repo; nothing goes outside', 'ok']] }, { id: 'nt', l: 'Not yet', fx: [['clock', 'The stage stays at ' + stg, 'warn']] }] };
+  }
+  const pend = prevPending(L, key, (k) => reqDone(V, row, L, k));
+  if (pend.length) return { sit: 'This is your decision, and it comes after the agent’s drafts. Read them first: approving without reading is how errors go out.', conf: 70, chg: [['clock', 'Waiting for: ' + pend.map((q) => q[1]).join('; '), 'agent', 'warn']], opts: [], go };
+  const d = DECIDE_TEXT[key] || [['Decide yes', ''], ['Not yet', ''], 'This is your decision.'];
+  return { sit: d[2], conf: key === 'cont' ? 62 : 78, chg: [['init', nm + ' · ' + stg, 'Stage'], base[1]], cta: 'Slide to decide', unsure: key === 'cont' ? 'It is a close call.' : '', ign: 'The initiative stays at ' + stg + '.', go,
+    outboxReason: 'This page has no route to record that decision yet, so it stays a proposal. Nothing is written.',
+    opts: [{ id: 'ok', l: d[0][0], rec: 1, outward: !demo, fx: [['check', d[0][1], 'ok']] }, { id: 'no', l: d[1][0], fx: [['clock', d[1][1], 'warn']] }] };
+}
+
+/** A requirement row. Swipe right starts the draft (the agent's requirements only); swipe left leaves it. Both say what they did; a draft only starts where the page can start one. */
+function rqRow(V, row, L, r) {
+  const key = row.id + '|' + r[0]; const w = reqWho(r[2]); const done = reqDone(V, row, L, r[0]); const scope = V.scope;
+  const decide = (o) => {
+    if (o.id === 'go' || o.id === 'ok') { V.rq = V.rq || {}; V.rq[key] = 1; const m = o.id === 'go' ? 'Drafted. It waits in Review for you.' : o.l + '. Recorded as your decision.'; say(m, () => { delete V.rq[key]; V.render(); }); markDone(V, 'rq:' + key, m, () => { delete V.rq[key]; }); } else markDone(V, 'rq:' + key, 'Left as it is.');
+  };
+  const sw = { labelRight: r[2] === 'agent' ? 'start the draft' : 'open it first', labelLeft: 'leave it', iconRight: 'spark', iconLeft: 'moon',
+    onRight: () => say(r[2] === 'agent' && !done ? (isDemo() ? 'Open it, pick the draft, then slide: a draft starts only from its case file.' : 'An agent session does the drafting. This page cannot start one.') : done ? 'Already done.' : 'Open it first: a decision needs its case file.'),
+    onLeft: () => say('Left as it is.') };
+  const pend = !done && r[2] === 'pm' && prevPending(L, r[0], (k) => reqDone(V, row, L, k)).length;
+  return rowShell(V, { key: 'rq' + key, attrs: { 'data-rq': key, 'data-id': 'rq|' + key, 'data-lc-card': row.id }, icon: done ? 'check' : w[0], iconColor: done ? 'var(--success)' : null, sw,
+    titleNode: el('span', { class: 'tt', style: done ? 'text-decoration:line-through;color:var(--muted-foreground)' : '' }, r[1]),
+    xpContent: caseNode(V, 'rq:' + key, rqCase(V, row, L, r), { onConfirm: decide, onGo: () => openIt(V, row) }),
+    chips: [el('span', { class: 'tag' }, w[1]), scope ? null : el('span', { class: 'chip2' }, c3ic('init', 'sm'), row.title), pend ? el('span', { class: 'chip2' }, c3ic('clock', 'sm'), 'after the agent’s drafts') : null] });
+}
+
+/** Park it or kill it (console3.html C3.cases.ini, line 4745): the reason is the option, so a reason is always recorded. Both go through the same lifecycle route as the initiative sheet. */
+function parkRow(V, row) {
+  const key = 'par|' + row.id; const demo = isDemo();
+  const mk = (id, why, kill) => ({ id, l: (kill ? 'Kill it: ' : 'Park it: ') + why, fx: [['moon', kill ? 'Closed for good' : 'Comes back to the planning list', 'warn']], state: kill ? 'cancelled' : 'on-hold', why });
+  const opts = [{ id: 'keep', l: 'Keep it going', rec: 1, fx: [['check', 'Nothing changes', 'ok']] }, mk('p1', 'not now'), mk('p2', 'no evidence'), mk('p3', 'replaced'), mk('k1', 'out of scope', true)];
+  const decide = async (o) => {
+    if (o.id === 'keep') { markDone(V, 'rq:' + key, 'Kept going.'); return; }
+    const out = await setLifecycle(V.ctx.ws, row.id, o.state, o.why);
+    if (!out || !out.ok) { say((out && out.error) || 'Not recorded.'); return; }
+    try { window.dispatchEvent(new CustomEvent('pmos:initiatives-changed')); } catch { /* no window */ }
+    const undo = async () => { await setLifecycle(V.ctx.ws, row.id, 'active', 'Undone from the lifecycle lens'); try { window.dispatchEvent(new CustomEvent('pmos:initiatives-changed')); } catch { /* no window */ } };
+    say((o.state === 'cancelled' ? 'Killed: ' : 'Parked: ') + o.why + '.', undo); markDone(V, 'rq:' + key, (o.state === 'cancelled' ? 'Killed: ' : 'Parked: ') + o.why + '. Undo reopens it.', undo);
+  };
+  void demo;
+  return rowShell(V, { key: 'rq' + key, attrs: { 'data-lc-park-row': row.id, 'data-id': 'par|' + row.id }, icon: 'moon', hint: false,
+    titleNode: el('span', { class: 'tt' }, 'Park it or kill it'),
+    xpContent: caseNode(V, 'rq:' + key, { sit: 'Stopping is a decision too. Pick the reason; it is recorded and the agent reads it before suggesting the idea again.', conf: 74, chg: [['init', row.title, 'Initiative']], opts, cta: 'Slide to record it', go: ['open', row.id, 'Open ' + row.title] }, { onConfirm: decide, onGo: () => openIt(V, row) }),
+    chips: [el('span', { class: 'tag' }, 'you'), el('span', { class: 'dim mono', style: 'font-size:var(--fs-2)' }, 'a reason is always recorded'), V.scope ? null : el('span', { class: 'chip2' }, c3ic('init', 'sm'), row.title)] });
+}
+
+function render(V) {
+  const rows = V.ctx.rows || [];
+  const scope = V.scope;
+  const { buckets, unplaced } = bucketRows(rows, scope);
+  const ST = V.ctx.strategy || null;   // optional (demo): the mockup's Strategize lens content; the lens opens on it
+  if (!V.lens) V.lens = ST ? 'strategize' : STAGES.find((k) => buckets[k].length) || 'discover';
+  const lens = V.lens;
+  const stratOn = lens === 'strategize';   // the Calendar's strategy panels (c3-strategy-panels.js), as the mockup draws them under Strategize (iniLeft 3586, iniRight 3595)
+  const list = buckets[lens];
+  const note = stageNote(lens, rows, scope);
+
+  const seg = el('div', { class: 'seg', role: 'group', 'aria-label': 'Initiative lifecycle', style: 'overflow-x:auto;max-width:100%' }, STAGES.map((k) => {
+    const n = buckets[k].length;
+    return el('button', { type: 'button', 'aria-pressed': String(lens === k), 'data-lc-stage': k, 'data-lc-note': stageNote(k, rows, scope) || '', onClick: () => { V.lens = k; render(V); } },
+      c3ic(ICON[k], 'sm'), LABELS[k], n ? [' ', el('span', { class: 'bdg g' }, String(n))] : null);
+  }));
+  const pills = el('div', { class: 'chips2', 'data-lc-scope': '' },
+    el('button', { type: 'button', class: 'pill', 'aria-pressed': String(!scope), onClick: () => { V.scope = null; V.lens = null; render(V); } }, 'All'),
+    ...rows.slice(0, PILLS).map((r) => el('button', { type: 'button', class: 'pill', 'aria-pressed': String(scope === r.id), 'data-lc-pill': r.id, title: r.title, onClick: () => { V.scope = r.id; V.lens = null; render(V); } }, short(r.title, 14))),
+    rows.length > PILLS ? el('span', { class: 'dim mono', style: 'font-size:var(--fs-2)', 'data-lc-more': '' }, '+' + (rows.length - PILLS) + ' more in the list') : null);
+
+  const placed = STAGES.reduce((n, k) => n + buckets[k].length, 0);
+  const PN = stratOn ? null : lensPanels(V, lens, scope);   // the panels the mockup draws for this stage (c3-lifecycle-panels.js)
+  const HD = PN && PN.head;
+  const head = stratOn && ST ? el('div', { class: 'lh', 'data-lc-derived': '' }, el('span', { class: 'ki' }, c3ic('flag')), el('div', { style: 'min-width:0' }, el('b', null, ST.head.h), el('div', { class: 'dim' }, ST.head.s)), c3ring(ST.head.ring[0], ST.head.ring[1], 44, ST.head.ring[0] + '/' + ST.head.ring[1]))
+    : HD ? el('div', { class: 'lh', 'data-lc-derived': '', 'data-lc-head': lens }, el('span', { class: 'ki' }, c3ic(HD.icon)), el('div', { style: 'min-width:0' }, el('b', null, HD.h), el('div', { class: 'dim' }, HD.s)), c3ring(HD.ring[0], Math.max(1, HD.ring[1]), 44, HD.ring[0] + '/' + HD.ring[1]))
+    : el('div', { class: 'lh', 'data-lc-derived': '' },
+    el('span', { class: 'ki' }, c3ic(ICON[lens])),
+    el('div', { style: 'min-width:0' },
+      el('b', null, note === 'skipped' ? LABELS[lens] + ': skipped by the lane' : note === 'no-signal' ? LABELS[lens] + ': no signal yet' : list.length + ' initiative' + (list.length === 1 ? '' : 's') + ' at ' + LABELS[lens]),
+      el('div', { class: 'dim' }, 'Stage is derived from the records; nothing here sets it.')),
+    c3ring(placed, Math.max(1, scope ? 1 : rows.length), 44, placed + '/' + (scope ? 1 : rows.length)));
+
+  const sctx = { goInit: (id) => V.ctx.openInitiative(V.ctx.repo, id) };
+  const deckCards = list.slice(0, 5);
+  const deck = deckCards.length ? el('section', { class: 'cdeck', 'data-n': '1' },
+    el('div', { class: 'deck', tabindex: '-1', role: 'group', 'aria-label': 'Initiatives at ' + LABELS[lens] }, deckCards.map((r, i) => deckCard(V, r, i, deckCards.length))),
+    deckCards.length > 1 ? el('div', { class: 'dk', role: 'group', 'aria-label': 'Cards' }, deckCards.map((r, i) => el('button', { type: 'button', class: 'dkd', 'aria-label': 'Card ' + (i + 1), 'aria-current': String(i === 0) }))) : null) : null;
+  if (deck) {
+    const d = deck.querySelector('.deck');
+    d.addEventListener('scroll', () => {
+      const f = d.children[0]; if (!f) return;
+      const i = Math.max(0, Math.min(d.children.length - 1, Math.round(d.scrollLeft / (f.offsetWidth + 12))));
+      [].forEach.call(d.children, (c, j) => c.classList.toggle('on', j === i));
+      deck.querySelectorAll('.dkd').forEach((x, j) => x.setAttribute('aria-current', String(j === i)));
+    });
+    deck.querySelectorAll('.dkd').forEach((b, j) => b.addEventListener('click', () => { const c = d.children[j]; if (c) d.scrollTo({ left: c.offsetLeft - d.children[0].offsetLeft, behavior: 'smooth' }); }));
+  }
+
+  const scoped = scope ? rows.find((r) => r.id === scope) : null;
+  const lcCard = scoped ? el('section', { class: 'card' }, el('h3', null, c3ic('init'), scoped.title + ' ', el('span', { class: 'dim', style: 'text-transform:none;letter-spacing:0' }, 'lifecycle')), lcLine(scoped)) : null;
+  const reqRows = [];
+  const needRows = scope ? rows.filter((r) => r.id === scope && (nineOf(r).find((x) => x.key === lens) || {}).status !== 'skipped') : list;   // the mockup (c3needs, line 4715): a chosen initiative shows its rows for any stage its lane uses
+  for (const row of needRows) { REQ[lens].forEach((r) => reqRows.push(() => rqRow(V, row, lens, r))); reqRows.push(() => parkRow(V, row)); }
+  const shown = V.all ? reqRows : reqRows.slice(0, LIST_MAX);
+  const needs = el('section', { class: 'card sect', 'data-lc-list': lens },
+    el('div', { class: 'sh2' }, el('h2', null, c3ic('check', 'sm'), 'What ' + LABELS[lens] + ' needs'), el('span', { class: 'dim mono', style: 'font-size:var(--fs-2)' }, 'stage is derived, not chosen')),
+    el('ul', { class: 'list' }, needRows.length ? [...shown.map((f) => f()),
+      reqRows.length > LIST_MAX && !V.all ? el('li', { class: 'fold' }, el('button', { type: 'button', class: 'pill', 'data-lc-showall': '', onClick: () => { V.all = true; render(V); } }, 'Show all ' + reqRows.length)) : null]
+      : el('li', { class: 'fold', 'data-lc-empty': '' }, c3ic(note === 'skipped' ? 'moon' : 'check', 'sm'),
+        note === 'skipped' || scope ? 'The ' + ((rows.find((r) => r.id === scope) || {}).lane || 'feature') + ' lane skips ' + LABELS[lens] + '.' : note === 'no-signal' ? 'No signal yet for ' + LABELS[lens] + '. Nothing is done or pending until a record shows it.' : 'No initiative is at ' + LABELS[lens] + ' now.')));
+  const right = [
+    ...(PN && PN.right.length ? [...PN.right, ...(lens === 'monitor' && ST && ST.signals ? [signalsCard(ST.signals.slice(0, 3))] : [])] : lens === 'monitor' && ST && ST.signals ? [signalsCard(ST.signals.slice(0, 3))] : [el('section', { class: 'card' }, el('h3', null, c3ic('info'), 'How the stage is derived'),
+      el('ul', { class: 'chgl' },
+        el('li', null, c3ic('check', 'sm'), el('span', null, 'Discover, Plan, Build and Evaluate read from the records.')),
+        el('li', null, c3ic('clock', 'sm'), el('span', null, 'The other stages have no signal yet, so none is shown done or pending.')),
+        el('li', null, c3ic('moon', 'sm'), el('span', null, 'A stage the lane skips reads skipped.'))))]),
+    unplaced.length ? el('section', { class: 'card', 'data-lc-unplaced': '' }, el('h3', null, c3ic('alert'), 'No stage shown yet'),
+      el('ul', { class: 'chgl' }, unplaced.map((r) => el('li', null, c3ic('init', 'sm'), el('span', null, r.title))))) : null,
+  ];
+
+  V.root.replaceChildren(el('div', { class: 'calwrap' },
+    el('div', { class: 'calbar' }, pills),
+    el('div', { class: 'calbar', style: 'flex-wrap:wrap;gap:8px' }, seg),
+    el('div', { class: 'calbody' },
+      head, V.ctx.links || null,
+      V.notice ? el('div', { class: 'fold w', role: 'alert' }, c3ic('alert', 'sm'), V.notice) : null,
+      stratOn && rows.length
+        ? el('div', { class: 'brief sbb' }, el('div', { class: 'bcols' }, el('div', { class: 'bcol l' }, V.ctx.plan || deck, lcCard, strategyPanel('maturity', sctx), strategyPanel('bets', sctx), needs), el('div', { class: 'bcol r' }, strategyPanel('north', sctx, { view: 'year', plain: true }), strategyPanel('signals', sctx, { n: 4 }), strategyPanel('synergy', sctx))))
+      : rows.length
+        ? el('div', { class: 'brief sbb' }, el('div', { class: 'bcols' }, el('div', { class: 'bcol l' }, V.ctx.plan || deck, lcCard, ...(PN ? PN.left : []), needs, ...(PN ? PN.after : [])), el('div', { class: 'bcol r' }, right)))
+        : el('div', { class: 'brief sbb' }, el('div', { class: 'bcols' }, el('div', { class: 'bcol l' }, V.ctx.plan || null, el('div', { class: 'fold' }, c3ic('check', 'sm'), 'No initiatives yet.')))))));
+}
+
+export function mountLifecycle(host, ctx) {
+  let V = views.get(host);
+  if (V) { V.ctx = ctx; render(V); if (host.firstChild !== V.root) host.replaceChildren(V.root); return; }
+  ensureComponentsCss();
+  ensureC3Css();
+  V = { ctx, scope: null, lens: null, open: {}, notice: null, root: el('div', { class: 'c3', 'data-in-view': 'lifecycle' }) };
+  V.render = () => render(V);
+  V.stopPhone = c3Phone(V.root);
+  views.set(host, V);
+  host.replaceChildren(V.root);
+  render(V);
+}
+
+export function disposeLifecycle(host) {
+  const V = views.get(host);
+  if (!V) return;
+  views.delete(host);
+  if (V.stopPhone) V.stopPhone();
+  if (V.root.parentNode === host) V.root.remove();
+}
+
+registerInitiativesView('lifecycle', { label: 'Lifecycle', mount: mountLifecycle, dispose: disposeLifecycle });

package/workspace/public/pm/new-initiative-sheet.js

@@ -1,19 +1,33 @@
 /* pm/new-initiative-sheet.js — the New-initiative form (pm-os-absorb Run 2, slice 2D; PRD R17, R25).
  *
  * Title, Lane, Anchor, Add. An initiative with no anchor is refused here, before any request, and again by the server.
+ * One line of intent can be drafted first (POST /api/intake/draft): it shows the lane guess with its confidence, the anchor
+ * suggestion (offered, never filled in: null reads 'no anchor yet') and any prior rejection. A refused draft blocks Add until the
+ * PM ticks the acknowledgement, which re-drafts with acknowledged:true. The stage shown at the start is Discover; it is derived.
  * The new initiative starts in Later: only the PM's press moves it into Now. The anchors on offer are the ones the List
  * already shows (a KR or a `health:<id>`), plus one typed by hand.
  *
  *   openNewInitiative({ repo, ws, anchors: string[], prefill?: { title, lane, from }, onAdded(id) })
  *   `prefill` is a triaged capture that still needs an anchor: the title and the lane are filled in, and `from` names the capture.
+ *
+ * R4b: the sheet body is the mockup's new-initiative intake (console3.html c3niLine and c3niCard, lines 4786 and 4787): the one-line
+ * add `.c3add > .form` (the input and the spark button), the suggestion as `section.card.sect` with `.sh2`, then `.case > .sit +
+ * .chgl` rows (the lane guess, the anchor, the prior rejection as `li.ok` or `li.warn` or `li.bad` with a `.tag`), and the
+ * fields as `.c3jf` label rows. The sheet itself is the real dialog (primitives sheet), and its Cancel and Add are the sheet's.
+ * Not lifted: the microphone (nothing transcribes), the "try" example pills (invented lines), the four-step progress list
+ * (the draft answers at once), the lane options with a slide (Add is a press, as before), the anchor pills (the anchor stays a
+ * select, since the page and its tests set it by value), and the phone bottom sheet. The anchors on offer are the List's.
  */
 
 import { el } from './dom.js';
-import { button, field, sheet, toast, ensureComponentsCss } from './primitives.js';
+import { button, sheet, toast, ensureComponentsCss } from './primitives.js';
 import { repoLanes, repoProfile } from './data.js';
 import { COPY } from './initiatives-copy.js';
 import { createInitiative } from './initiatives-api.js';
+import { pmPost } from './http.js';
 import { changed } from './initiative-sheet.js';
+import { ensureC3Css, c3ic, c3ib } from './pm-work-view.js';
+import { renderCase } from './c3-case.js';
 
 const OTHER = '__other__';
 
@@ -24,38 +38,114 @@ export function laneNames(repo) {
   return lanes.length ? lanes : null;
 }
 
+const row = (label, control) => el('label', null, el('span', { class: 'dim mono', style: 'font-size:var(--fs-2)' }, label), control);
+
 export function openNewInitiative({ repo, ws, anchors, prefill, onAdded }) {
   ensureComponentsCss();
+  ensureC3Css();
   const anchorList = Array.from(new Set((anchors || []).filter(Boolean)));
-  const t = field({ label: COPY.newForm.titleLabel, kind: 'title', value: prefill && prefill.title, attrs: { 'data-in-new-title': '' } });
+  const t = el('input', { type: 'text', 'aria-label': COPY.newForm.titleLabel, 'data-in-new-title': '', autocomplete: 'off', value: (prefill && prefill.title) || '' });
   const lanes = laneNames(repo);
-  const l = lanes
-    ? field({ label: COPY.newForm.laneLabel, kind: 'select', value: prefill && lanes.includes(prefill.lane) ? prefill.lane : lanes[0], options: lanes.map((x) => ({ value: x, label: x })), attrs: { 'data-in-new-lane': '' } })
-    : field({ label: COPY.newForm.laneLabel, kind: 'text', value: prefill && prefill.lane, placeholder: COPY.newForm.laneHint, attrs: { 'data-in-new-lane': '' } });
-  const opts = [{ value: '', label: COPY.newForm.anchorPick }, ...anchorList.map((a) => ({ value: a, label: a })), { value: OTHER, label: COPY.newForm.anchorOther }];
-  const a = field({ label: COPY.newForm.anchorLabel, kind: 'select', value: '', options: opts, attrs: { 'data-in-new-anchor': '' } });
-  const typed = field({ label: COPY.newForm.anchorLabel, kind: 'text', placeholder: COPY.newForm.anchorHint, attrs: { 'data-in-new-anchor-text': '' } });
+  let l;
+  if (lanes) {
+    l = el('select', { 'aria-label': COPY.newForm.laneLabel, 'data-in-new-lane': '' }, lanes.map((x) => el('option', { value: x }, x)));
+    l.value = prefill && lanes.includes(prefill.lane) ? prefill.lane : lanes[0];
+  } else l = el('input', { type: 'text', 'aria-label': COPY.newForm.laneLabel, 'data-in-new-lane': '', placeholder: COPY.newForm.laneHint, value: (prefill && prefill.lane) || '' });
+  const a = el('select', { 'aria-label': COPY.newForm.anchorLabel, 'data-in-new-anchor': '' }, [{ value: '', label: COPY.newForm.anchorPick }, ...anchorList.map((x) => ({ value: x, label: x })), { value: OTHER, label: COPY.newForm.anchorOther }].map((o) => el('option', { value: o.value }, o.label)));
+  a.value = '';
+  const typed = el('input', { type: 'text', 'aria-label': COPY.newForm.anchorLabel, 'data-in-new-anchor-text': '', placeholder: COPY.newForm.anchorHint, autocomplete: 'off' });
   typed.hidden = true;
-  a.control.addEventListener('change', () => { typed.hidden = a.control.value !== OTHER; if (!typed.hidden) typed.control.focus(); });
-  const err = el('p', { class: 'in-error', role: 'alert', 'data-in-error': '' });
+  a.addEventListener('change', () => { typed.hidden = a.value !== OTHER; if (!typed.hidden) typed.focus(); });
+  // One-line intake draft (planning-flows run 4). It only suggests: the create below is unchanged and still needs a PM-chosen anchor.
+  const line = el('input', { type: 'text', id: 'c3nit', 'aria-label': 'Describe it in one line', 'data-in-new-line': '', placeholder: 'Start something new: one line is enough (e.g. Cut checkout drop-off, KR2)', autocomplete: 'off' });
+  const draftBtn = el('button', { type: 'button', class: 'ib pri', title: 'Draft: an agent runs the intake', 'aria-label': 'Draft: an agent runs the intake', 'data-in-draft-go': '' }, c3ic('spark'));
+  const draftOut = el('div', { 'data-in-draft': '' });
+  draftOut.hidden = true;
+  const startNote = el('div', { class: 'fold', 'data-in-start-stage': '' }, c3ic('init', 'sm'), 'Starts in stage: Discover.');
+  let refused = false;
+  let ack = false;
+  const ackInput = el('input', { type: 'checkbox', 'data-in-ack': '' });
+  const ackBox = el('label', { class: 'chips2' }, ackInput, el('span', { style: 'font-size:var(--fs-3)' }, 'I have read the prior rejection and still want to create this'));
+  ackBox.hidden = true;
+  ackInput.addEventListener('change', () => { ack = ackInput.checked; gate(); if (ack) runDraft(true); });
+  const gate = () => { add.disabled = busy || (refused && !ack); };
+  /* the intake as the mockup shows it (console3.html c3niCard, line 4787): four steps tick while the draft is made, then "The agent suggests" with the lane, the
+   * anchor and any prior rejection as a case file, options, and a slide to create. The draft is the real one (POST /api/intake/draft); the steps pace it. */
+  const STEPS = ['Checking what was rejected before', 'Running the sharpness test', 'Choosing a lane', 'Finding an anchor'];
+  let last = null;   // the last draft, so a change to the anchor or the lane redraws the case
+  const anchorNow = () => (a.value === OTHER ? typed.value : a.value).trim();
+  const stepsCard = (text, n) => el('section', { class: 'card sect', id: 'c3ni', 'data-in-draft-run': '' }, el('div', { class: 'sh2' }, el('h2', null, c3ic('spark', 'sm'), text)),
+    el('ul', { class: 'chgl' }, STEPS.map((st, i) => el('li', { class: i < n ? 'ok' : '' }, i < n ? c3ic('check', 'sm') : i === n ? el('span', { class: 'c3spin' }, c3ic('spark', 'sm')) : el('span', { style: 'width:14px' }), el('span', { class: i > n ? 'dim' : '' }, st)))));
+  const suggest = (d, acknowledged) => {
+    last = { d, acknowledged };
+    const pr = d.prior_rejections || []; const anc = anchorNow() || d.anchor_suggestion || '';
+    const blocked = !anchorNow() ? 'Pick an anchor below first: unanchored work is not created.' : refused && !ack ? 'A prior rejection is on record. Tick the acknowledgement first.' : '';
+    const lane = l.value || d.lane || 'feature'; const conf = typeof d.confidence === 'number' ? Math.round(d.confidence * 100) : 0;
+    const model = { id: 'ni:new', sit: 'The line reads as a ' + (d.lane || 'feature') + '. Nothing is created until you slide, and the anchor is yours to choose.', conf: conf || 60, cta: 'Slide to create', outboxReason: blocked,
+      chg: [['init', 'Lane guess: ' + (d.lane || 'none') + ' (confidence ' + (typeof d.confidence === 'number' ? d.confidence : 'unknown') + ')', 'Lane'], [d.anchor_suggestion ? 'target' : 'alert', d.anchor_suggestion ? 'Anchor suggestion: ' + d.anchor_suggestion : 'no anchor yet', 'Anchor', d.anchor_suggestion ? 'ok' : 'bad'],
+        [pr.length ? 'alert' : 'check', pr.length ? 'Prior rejections: ' + pr.map((r) => r.title || r.path || String(r)).join('; ') : 'Prior rejections: none', 'prior rejection', pr.length ? 'warn' : 'ok']],
+      opts: [{ id: 'mk', l: 'Create it as a ' + lane + ' initiative', rec: 1, outward: !!blocked, fx: [['check', 'Starts in Later; only your press moves it into Now', 'ok'], [anc ? 'target' : 'alert', anc ? 'Anchored to ' + anc : 'No anchor yet', anc ? 'ok' : 'warn']] },
+        ...(lane !== 'discovery' && (!conf || conf < 70) ? [{ id: 'ds', l: 'Start with discovery first', outward: !!blocked, fx: [['clock', 'A spike brief with a stop rule, no score', '']] }] : []), { id: 'no', l: 'Not now', fx: [] }],
+      unsure: conf && conf < 70 ? 'A keyword match is not a judgment.' : '' };
+    const c = renderCase(model, { onConfirm: async ({ option }) => {
+      if (option.id === 'no') { draftOut.hidden = true; return; }
+      if (option.id === 'ds' && l.tagName === 'SELECT') l.value = [...l.options].some((o) => o.value === 'discovery') ? 'discovery' : l.value;
+      add.click();
+    } });
+    ['lane', 'anchor', 'prior'].forEach((k, i) => { const li = c.querySelectorAll('.chgl li')[i]; if (li) li.setAttribute('data-in-draft-' + k, ''); });
+    const kids = [];
+    if (d.anchor_suggestion) kids.push(el('div', { class: 'chips2' }, el('button', { type: 'button', class: 'chip2 lk', 'data-in-use-anchor': '', onClick: () => {
+      if (anchorList.includes(d.anchor_suggestion)) a.value = d.anchor_suggestion;
+      else { a.value = OTHER; typed.hidden = false; typed.value = d.anchor_suggestion; }
+      suggest(d, acknowledged);
+    } }, c3ic('target', 'sm'), 'Use ' + d.anchor_suggestion)));
+    kids.push(c);
+    if (d.refused) kids.push(el('div', { class: 'fold w', role: 'alert', 'data-in-draft-refused': '' }, c3ic('alert', 'sm'), d.refused_reason || 'Refused: a prior rejection is on record.'));
+    draftOut.replaceChildren(el('section', { class: 'card sect', id: 'c3ni' }, el('div', { class: 'sh2' }, el('h2', null, c3ic('spark', 'sm'), 'The agent suggests'), el('span', { class: 'r' }, c3ib('Start over', 'x', { 'data-in-draft-reset': '', onClick: () => { draftOut.hidden = true; last = null; line.value = ''; line.focus(); } }, 'sm'))), ...kids));
+  };
+  async function runDraft(acknowledged) {
+    const text = line.value.trim();
+    if (!text) return;
+    draftOut.hidden = false;
+    let n = 0; if (!acknowledged) draftOut.replaceChildren(stepsCard(text, n));
+    const pace = acknowledged ? null : setInterval(() => { if (n < STEPS.length - 1) { n++; draftOut.replaceChildren(stepsCard(text, n)); } }, 260);
+    const started = Date.now();
+    const out = await pmPost('/api/intake/draft', { line: text, ...(acknowledged ? { acknowledged: true } : {}) });
+    if (!acknowledged) { const wait = Math.max(0, 260 * (STEPS.length - 1) + 160 - (Date.now() - started)); if (wait) await new Promise((r) => setTimeout(r, wait)); }
+    if (pace) clearInterval(pace);
+    if (!out || !out.ok || !out.draft) { draftOut.hidden = false; draftOut.replaceChildren(el('div', { class: 'fold w' }, c3ic('alert', 'sm'), (out && out.error) || 'The draft did not answer.')); return; }
+    const d = out.draft;
+    if (!t.value.trim() && d.title) t.value = d.title;
+    if (!prefill && lanes && lanes.includes(d.lane)) l.value = d.lane;
+    refused = !!d.refused && !acknowledged;
+    if (!acknowledged) { ack = false; ackInput.checked = false; }
+    suggest(d, acknowledged);
+    ackBox.hidden = !d.refused;
+    gate();
+  }
+  const redraw = () => { if (last && !draftOut.hidden) suggest(last.d, last.acknowledged); };
+  a.addEventListener('change', redraw); typed.addEventListener('input', redraw); l.addEventListener('change', redraw);
+  line.addEventListener('keydown', (e) => { if (e.key === 'Enter') { e.preventDefault(); runDraft(false); } });
+  draftBtn.addEventListener('click', () => runDraft(false));
+  const err = el('div', { class: 'fold w', role: 'alert', 'data-in-error': '' });
   err.hidden = true;
-  const lands = el('p', { class: 'in-note' }, COPY.newForm.lands);
+  const lands = el('div', { class: 'dim', style: 'font-size:var(--fs-2)' }, COPY.newForm.lands);
   const fail = (text) => { err.textContent = text; err.hidden = false; };
 
   let busy = false;
   const add = button({
     label: COPY.newForm.add, variant: 'primary', attrs: { 'data-in-new-add': '' },
     onClick: async () => {
-      if (busy) return;
+      if (busy || (refused && !ack)) return;
       err.hidden = true;
-      const title = t.control.value.trim();
-      const pick = a.control.value;
-      const anchor = (pick === OTHER ? typed.control.value : pick).trim();
-      if (!title) { fail(COPY.newForm.noTitle); t.control.focus(); return; }
+      const title = t.value.trim();
+      const pick = a.value;
+      const anchor = (pick === OTHER ? typed.value : pick).trim();
+      if (!title) { fail(COPY.newForm.noTitle); t.focus(); return; }
       if (!anchor) { fail(COPY.newForm.noAnchor); return; }
-      busy = true; add.disabled = true;
-      const out = await createInitiative(ws, { title, ...(l.control.value.trim() ? { lane: l.control.value.trim() } : {}), anchor, ...(prefill && prefill.from ? { from: prefill.from } : {}) });
-      busy = false; add.disabled = false;
+      busy = true; gate();
+      const out = await createInitiative(ws, { title, ...(l.value.trim() ? { lane: l.value.trim() } : {}), anchor, ...(prefill && prefill.from ? { from: prefill.from } : {}) });
+      busy = false; gate();
       if (out && out.ok) {
         const id = (out.initiative && out.initiative.id) || out.id || (out.ids && out.ids[0]) || null;
         s.close();
@@ -65,10 +155,15 @@ export function openNewInitiative({ repo, ws, anchors, prefill, onAdded }) {
       } else fail(COPY.refused((out && out.error) || 'The server did not answer.'));
     },
   });
+  const body = el('div', { class: 'c3 c3e' },
+    el('div', { class: 'c3add' }, el('div', { class: 'form' }, line, draftBtn)),
+    draftOut, ackBox,
+    el('div', { class: 'c3jf' }, row(COPY.newForm.titleLabel, t), row(COPY.newForm.laneLabel, l), row(COPY.newForm.anchorLabel, a), typed),
+    startNote, lands, err);
   const s = sheet({
-    mode: 'auto', title: COPY.newForm.title, body: [t, l, a, typed, lands, err], attrs: { 'data-in-sheet': 'new' },
+    mode: 'auto', title: COPY.newForm.title, body: [body], attrs: { 'data-in-sheet': 'new' },
     actions: [button({ label: COPY.cancel, variant: 'outline', onClick: () => s.close(), attrs: { 'data-in-cancel': '' } }), add],
   });
-  t.control.focus();
+  if (prefill && prefill.title && !prefill.lane && !prefill.from) { line.value = prefill.title; runDraft(false); } else t.focus();
   return s;
 }

package/workspace/public/pm/outbox-panel.js

@@ -0,0 +1,125 @@
+/* pm/outbox-panel.js — the outbox queue view (console3 wave B3), on the console3 mockup's own markup and CSS (R4b).
+ *
+ *   mountOutbox(host, ctx)   draws the queue from GET /api/outbox; ctx is optional: { get, post } (defaults to http.js)
+ *   disposeOutbox(host)      removes it and its slides
+ *
+ * The markup is the mockup's message queue (console3.html lines 4283 to 4284, r2queue 4338): `section.card.sect > .sh2` with the
+ * count in `.bdg.g`, `ul.list > li.nrow` with `.ki`, `.nb > .tt + .chips + .xp > .xi`, and the case file `.case > .sit + .qd
+ * + .chgl + .slt`. Each entry shows its channel, recipient, an editable body (editing voids the hash, and the panel says so),
+ * the claim check result as `.chgl` rows, a slide bound to the CURRENT hash and, after a slide, the plain result. No channel
+ * is connected in this wave, so a slide ends in "no channel connected" and the entry stays queued. Nothing is sent.
+ * Not lifted: the mockup's swipe on a message row (right = send, left = hold): a send here is only the slide; the mockup's
+ * three states (draft, held, sent) and its "external, you approve" chip, which the entry does not carry. */
+import { el } from './dom.js';
+import { pmGet, pmPost } from './http.js';
+import { mountSlide, disposeSlide } from './slide-confirm.js';
+import { ensureC3Css, c3ic } from './pm-work-view.js';
+
+const live = new WeakMap();   // host → { slideHosts: [], gone }
+
+export function disposeOutbox(host) {
+  const s = live.get(host);
+  if (!s) return;
+  s.gone = true;
+  s.slideHosts.forEach(disposeSlide);
+  live.delete(host);
+  host.textContent = '';
+}
+
+export async function mountOutbox(host, ctx = {}) {
+  disposeOutbox(host);
+  ensureC3Css();
+  const get = ctx.get || pmGet, post = ctx.post || pmPost;
+  const st = { slideHosts: [], gone: false };
+  live.set(host, st);
+  const results = {};   // id → plain result text, kept across redraws
+  const voided = {};    // id → true after an edit, until the next press
+  const open = {};      // id → false when the PM folded the row
+
+  async function draw() {
+    const r = await get('/api/outbox');
+    if (st.gone) return;
+    st.slideHosts.forEach(disposeSlide);
+    st.slideHosts = [];
+    const root = el('div', { class: 'c3 c3e', 'data-outbox': '' });
+    if (!r || r.ok === false) {
+      root.append(el('div', { class: 'fold w', role: 'alert' }, c3ic('alert', 'sm'), (r && r.error) || 'Could not read the outbox.'));
+    } else {
+      const entries = r.entries || [];
+      root.append(el('section', { class: 'card sect' },
+        el('div', { class: 'sh2' }, el('h2', null, c3ic('out', 'sm'), 'Outbox ', el('span', { class: 'bdg g' }, String(entries.length))),
+          el('span', { class: 'dim', style: 'font-size:var(--fs-2)' }, 'Nothing here is sent. No channel is connected.')),
+        el('ul', { class: 'list' }, entries.length ? entries.map((e) => row(e)) : el('li', { class: 'fold' }, c3ic('check', 'sm'), 'The outbox is empty.'))));
+    }
+    host.replaceChildren(root);
+  }
+
+  function row(e) {
+    const op = open[e.id] !== false;
+    const li = el('li', { class: 'nrow', 'data-row': '', 'data-outbox-entry': e.id, tabindex: '0', 'aria-expanded': String(op) });
+    const xp = el('div', { class: 'xp' + (op ? ' open' : '') });
+    const toggle = () => { open[e.id] = !(open[e.id] !== false); li.setAttribute('aria-expanded', String(open[e.id])); xp.classList.toggle('open', open[e.id]); };
+    li.addEventListener('click', (ev) => { if (ev.target.closest('.xi')) return; toggle(); });
+    li.addEventListener('keydown', (ev) => { if (ev.target === li && (ev.key === 'Enter' || ev.key === ' ')) { ev.preventDefault(); toggle(); } });
+    const claimTone = e.claims.ok ? 'ok' : 'bad';
+    xp.append(el('div', { class: 'xi' }, theCase(e)));
+    li.append(
+      el('span', { class: 'ki' }, c3ic('out')),
+      el('div', { class: 'nb' },
+        el('span', { class: 'tt' }, e.recipient || e.channel),
+        el('div', { class: 'chips' },
+          el('span', { class: 'chip2' }, e.state),
+          el('span', { class: 'chip2' }, c3ic('user', 'sm'), e.recipient || 'no recipient'),
+          el('span', { class: 'tag' }, e.channel),
+          el('span', { class: 'tag' }, e.origin),
+          el('span', { class: 'st ' + claimTone }, c3ic(e.claims.ok ? 'check' : 'alert', 'sm'), e.claims.ok ? 'claims labelled' : 'blocked')),
+        xp));
+    return li;
+  }
+
+  function theCase(e) {
+    const ta = el('textarea', { 'aria-label': 'Body of the entry for ' + (e.recipient || e.channel), style: 'width:100%;min-height:84px;box-sizing:border-box' });
+    ta.value = e.body;
+    const save = el('button', { type: 'button', class: 'pill', disabled: true }, c3ic('check', 'sm'), 'Save edit');
+    const hashLine = el('span', { class: 'dim mono', style: 'font-size:var(--fs-2)' }, 'hash ' + e.hash.slice(0, 10));
+    const slideHost = el('div');
+    ta.addEventListener('input', () => {
+      const changed = ta.value !== e.body;
+      save.disabled = !changed;
+      hashLine.textContent = changed ? 'Editing voids hash ' + e.hash.slice(0, 10) + '. Save, then slide on the new hash.' : 'hash ' + e.hash.slice(0, 10);
+      slideHost.style.display = changed ? 'none' : '';
+    });
+    save.addEventListener('click', async () => {
+      const r = await post('/api/outbox/edit', { id: e.id, body: ta.value });
+      if (r && r.ok) { voided[e.id] = true; delete results[e.id]; await draw(); } else hashLine.textContent = (r && r.error) || 'The edit failed.';
+    });
+    const chg = el('ul', { class: 'chgl' });
+    if (!e.claims.ok) {
+      chg.append(el('li', { class: 'bad' }, c3ic('alert', 'sm'), el('span', null, 'Blocked: these claim lines have no label ([fact], [estimate], [assumption], [reported] or a ticket key).'), el('span', { class: 'tag' }, 'claims check')));
+      for (const l of e.claims.refused) chg.append(el('li', { class: 'bad' }, c3ic('x', 'sm'), el('span', { class: 'mono' }, l)));
+    } else chg.append(el('li', { class: 'ok' }, c3ic('check', 'sm'), el('span', null, 'Claim check passed.'), el('span', { class: 'tag' }, 'claims check')));
+    const c = el('div', { class: 'case', 'data-case': e.id, style: '--tc:var(--acc)' },
+      el('p', { class: 'sit' }, results[e.id] || e.last_result || 'Nothing has been sent. The slide below sends exactly this text, bound to its hash.'),
+      ta,
+      el('div', { class: 'chips2' }, save, hashLine),
+      voided[e.id] ? el('div', { class: 'fold w' }, c3ic('alert', 'sm'), 'The old hash is void. The slide below is bound to the new content.') : null,
+      chg,
+      slideHost);
+    if (e.claims.ok) {
+      st.slideHosts.push(slideHost);
+      mountSlide(slideHost, {
+        label: 'Slide to confirm', hash: e.hash,
+        onConfirm: async (hash) => {
+          const r = await post('/api/outbox/confirm', { id: e.id, hash });
+          const text = !r ? 'No answer.' : r.ok ? 'Confirmed.' : (r.reason || r.error || 'Refused.');
+          results[e.id] = text;
+          delete voided[e.id];
+          await draw();
+        },
+      });
+    } else slideHost.appendChild(el('div', { class: 'cft' }, el('span', null, c3ic('lock', 'sm'), 'The slide is held until every claim line has a label.')));
+    return c;
+  }
+
+  await draw();
+}