create-pmos 0.124.0 → 0.125.0

package/workspace/public/pm/report-families-view.js

@@ -0,0 +1,503 @@
+/* pm/report-families-view.js — console3: the four report families, the claims check, the send slide and who-holds-what, behaving as the
+ * console3 mockup's Reports tab does (console3.html lines 4205 to 4380: R2F, pjSecs/pdSecs/peSecs, rsRow, r2composer, cmRow, caseFor 'rpt:'/'com:').
+ *
+ * mountReportFamilies(host, ctx) / disposeReportFamilies(host). One persistent root per host.
+ * Real mode: GET /api/report-families once; POST /api/report-families/check (pure); sections come from ctx.reportFacts (the facts route).
+ * Demo mode (window.__c3demo, with window.__c3repix from c3-demo-rep-ix.js): the mockup's own reports, sections and messages; nothing is requested.
+ *
+ * What a press does:
+ *   - a section row opens IN PLACE (c3-expand): why it is here, the claims with their label and a Traced / Needs your input mark, the sources as
+ *     jump chips (they click the Initiatives, Calendar, Work or Briefing tab), and "Fix with the agent" (disabled, with the reason).
+ *   - a swipe right approves a section and a swipe left cuts it (c3-swipe). In DEMO the decision is kept on the page, with an Undo toast. In REAL mode
+ *     no route stores a section decision, so the swipe is off and the legend and the row say why.
+ *   - the Send row opens the case file (c3-case) with the slide. DEMO: the slide marks the report Sent and adds it to the Sent card (nothing leaves).
+ *     REAL: opening the row queues ONE draft through POST /api/outbox/draft (the claim lines of the sections, labelled), the slide is bound to that
+ *     draft's hash and calls POST /api/outbox/confirm. With no channel connected the answer is "no channel connected" and the page says exactly that.
+ *     A claim line with no label or ticket key blocks the slide with the reason; customer-facing variants allow only fact and cited labels (server rule).
+ *   - Communications (demo): the message queue (swipe right sends, left holds, external needs the slide) and the who-holds-what truth table.
+ * An agent can only draft. Sending is the PM's slide. Nothing here sends anything. */
+import { el } from './dom.js';
+import { strategyPanel } from './c3-strategy-panels.js';
+import { pmGet, pmPost } from './http.js';
+import { ensureC3Css, c3ic, c3ring, c3Phone } from './pm-work-view.js';
+import { attachExpand } from './c3-expand.js';
+import { attachSwipe } from './c3-swipe.js';
+import { renderCase } from './c3-case.js';
+import { openSheet } from './c3-sheet.js';
+import { toast } from './c3-toast.js';
+import { openDocSheet, splitDoc } from './c3-doc-sheet.js';
+import { forecastChecksCard } from './c3-misc-panels.js';
+
+const insts = new WeakMap();
+const FAM_ICON = { project: 'tree', product: 'target', communications: 'out', periodic: 'cal' };
+const FIX_WHY = 'Not available here: the agent starts from a terminal session, not from this page.';
+const NO_STORE = 'Approving or cutting a section is not recorded here yet: no record stores a section decision.';
+const dim = (t) => el('span', { class: 'dim mono', style: 'font-size:var(--fs-2)' }, t);
+const rx = () => (typeof window !== 'undefined' && window.__c3demo && window.__c3repix) || null;
+const cap = (s) => { const t = String(s || '').replace(/_/g, ' '); return t.charAt(0).toUpperCase() + t.slice(1); };
+
+function make(host) {
+  return { host, root: el('div', { class: 'c3', 'data-report-families': '' }), families: null, error: null, sel: null, variant: null, rep: { project: 'pj1', product: 'pd1' }, check: null, seq: 0,
+    dec: {}, flagged: {}, sent: {}, csent: {}, chold: {}, open: {}, hist: null, docText: {}, cleanups: [], draft: null, draftErr: null, draftBusy: false, outMsg: {}, outSent: null };
+}
+
+/* ── jump to the source: the page's own tab buttons (the mockup's RSRC) ── */
+const RSRC = { time: ['init', 'forecast'], tix: ['init', 'tickets'], wbs: ['init', 'breakdown'], docs: ['init', 'documents'], sig: ['init', 'signals'], life: ['init', 'lifecycle'], roadmap: ['init', 'roadmap'], strat: ['init', 'lifecycle'], comms: ['rep', 'communications'], brief: ['brief'], cal: ['cal'], work: ['work'] };
+function jump(kind) {
+  const t = RSRC[kind];
+  if (!t) return;
+  const tab = document.querySelector('[data-c3-tab="' + t[0] + '"]');
+  if (tab) tab.click();
+  if (!t[1]) return;
+  let n = 0;
+  const go = () => {
+    const b = t[0] === 'init' ? document.querySelector('[data-c3-init="' + t[1] + '"]') : document.querySelector('[data-family="' + t[1] + '"]');
+    if (b) b.click(); else if (++n < 25) setTimeout(go, 80);
+  };
+  go();
+}
+/* a real claim's source text → the view that holds it (only the ones that name one) */
+function kindOf(text) {
+  const t = String(text || '').toLowerCase();
+  if (/jira|ticket/.test(t)) return 'tix'; if (/calendar/.test(t)) return 'cal'; if (/timeline|forecast/.test(t)) return 'time'; if (/analytics|signal/.test(t)) return 'sig'; if (/brief/.test(t)) return 'brief';
+  return '';
+}
+
+/* ── the model: variants, sections and counts, from the demo fixtures or the real facts ── */
+const famOf = (inst) => inst.families.find((f) => f.id === inst.sel);
+const variantsOf = (inst, fam) => { const R = rx(); return R ? R.pills(fam.id) : fam.variants.map((v) => ({ id: v.id, name: v.name, external: !!v.external })); };
+const repIdOf = (inst, fam) => (fam.id === 'periodic' ? inst.variant : (inst.rep[fam.id] || 'r'));
+const keyOf = (inst, fam) => fam.id + '.' + repIdOf(inst, fam) + '.' + (fam.id === 'periodic' ? 'x' : inst.variant);
+const variantOf = (inst, fam) => variantsOf(inst, fam).find((v) => v.id === inst.variant) || variantsOf(inst, fam)[0] || { id: '', name: '' };
+const repOf = (inst, fam) => { const R = rx(); return R ? ((R.REPORTS[fam.id] || []).find((r) => r.id === repIdOf(inst, fam)) || (R.REPORTS[fam.id] || [])[0] || null) : null; };
+
+/* a report is a document (the mockup's r2doc): the sections the sheet saved flow back into the rows (the mockup's r2text) */
+const docPath = (fam, rid, variant) => 'planning/reports/' + fam + '-' + rid + '-' + variant + '.md';
+const pathOf = (inst, fam) => docPath(fam.id, repIdOf(inst, fam), inst.variant);
+function withDoc(inst, fam, secs) {
+  const text = inst.docText[pathOf(inst, fam)]; if (!text) return secs;
+  const sp = splitDoc(text);
+  return secs.map((s) => { const m = sp.find((x) => x.name === s.h); return m && m.text !== s.t ? { ...s, t: m.text, edited: true } : s; });
+}
+function sectionsOf(inst, fam, ctx) { return withDoc(inst, fam, baseSections(inst, fam, ctx)); }
+function baseSections(inst, fam, ctx) {
+  const R = rx();
+  if (R) return R.sections(fam.id, repIdOf(inst, fam), inst.variant);
+  const given = (ctx && ctx.reportFacts && ctx.reportFacts[fam.id]) || [];
+  return fam.sections.map((name, i) => {
+    const g = given.find((s) => s.name === name) || { name, title: cap(name), claims: [] };
+    const r = inst.check && inst.check.sections && inst.check.sections[i];
+    const claims = (g.claims || []).map((c) => ({ text: (c && (c.text || c.id)) || String(c), label: c && c.basis, source: c && c.source, ok: !(c && c.ok === false) }));
+    const st = !r ? 'check' : r.stale_source > 0 ? 'stale' : (r.needs_input > 0 || r.traced === 0) ? 'check' : 'ok';
+    const src = []; const seen = new Set();
+    for (const c of claims) if (c.source && !seen.has(c.source)) { seen.add(c.source); src.push(['doc', c.source, kindOf(c.source)]); }
+    return { id: name, h: g.title ? cap(g.title) : cap(name), t: claims.length ? claims.map((c) => c.text).join(' ') : 'No claim has been written for this section yet.', src, st, by: 'Records', why: '', claims };
+  });
+}
+const decOf = (inst, key, id) => inst.dec[key + '|' + id] || '';
+function readyOf(inst, key, secs) {
+  const d = (s) => decOf(inst, key, s.id);
+  return { n: secs.length - secs.filter((s) => d(s) === 'cut').length, ap: secs.filter((s) => d(s) === 'ok').length, fl: secs.filter((s) => s.st !== 'ok' && d(s) !== 'ok' && d(s) !== 'cut').length };
+}
+
+/* ── loading ── */
+async function load(inst, ctx) {
+  const j = await pmGet('/api/report-families');
+  if (!insts.has(inst.host)) return;
+  if (!j || j.ok === false) inst.error = (j && j.error) || 'Could not read the report families.';
+  else { inst.families = j.families || []; inst.error = null; if (!inst.sel && inst.families[0]) { inst.sel = inst.families[0].id; inst.variant = defaultVariant(inst, inst.families[0]); } }
+  if (!rx()) { const o = await pmGet('/api/outbox'); if (insts.has(inst.host) && o && o.ok) inst.outSent = (o.entries || []).filter((e) => e.state === 'sent'); }
+  inst.hist = null;
+  await runCheck(inst, ctx);
+}
+const defaultVariant = (inst, fam) => (variantsOf(inst, fam)[0] || {}).id || null;
+
+async function runCheck(inst, ctx) {
+  const fam = inst.families && famOf(inst);
+  if (!fam) { draw(inst, ctx); return; }
+  if (rx()) { draw(inst, ctx); return; }   // the demo's sections carry their own state; no request
+  const seq = ++inst.seq;
+  const j = await pmPost('/api/report-families/check', { family: inst.sel, variant: inst.variant, sections: (fam.sections || []).map((name) => { const g = ((ctx && ctx.reportFacts && ctx.reportFacts[inst.sel]) || []).find((s) => s.name === name); return g || { name, title: cap(name), claims: [] }; }) });
+  if (seq !== inst.seq || !insts.has(inst.host)) return;
+  inst.check = j && j.ok ? j : null;
+  draw(inst, ctx);
+}
+
+function pick(inst, ctx, fam, variant) { inst.sel = fam.id; inst.variant = variant || defaultVariant(inst, fam); inst.check = null; inst.draft = null; inst.draftErr = null; draw(inst, ctx); runCheck(inst, ctx); }
+
+/* ── pieces lifted from the demo path of the earlier pass: the forecast chart, the reports list ── */
+const NSV = 'http://www.w3.org/2000/svg';
+const sv = (tag, attrs, ...kids) => { const n = document.createElementNS(NSV, tag); for (const k of Object.keys(attrs || {})) 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; };
+
+function reportsList(inst, ctx, fam, list, selId) {
+  const choose = (id) => { inst.rep[fam.id] = id; inst.draft = null; draw(inst, ctx); };
+  return el('section', { class: 'card sect', 'data-rp-section': 'reports' }, el('div', { class: 'sh2' }, el('h2', null, c3ic('doc', 'sm'), 'Reports ', el('span', { class: 'bdg g' }, String(list.length)))),
+    el('ul', { class: 'list' }, list.map((r) => {
+      const on = r.id === selId;
+      const li = el('li', { class: 'nrow', 'data-row': '', 'data-a': 'rsel', 'data-report': r.id, tabindex: '0', 'aria-current': String(on), style: on ? 'background:var(--accw);border-radius:8px' : null },
+        el('span', { class: 'ki' }, c3ic(on ? 'eye' : 'doc')),
+        el('div', { class: 'nb' }, el('span', { class: 'tt' }, r.n), el('div', { class: 'chips' }, el('span', { class: 'chip2' }, c3ic('clock', 'sm'), 'Due ' + r.due))));
+      li.addEventListener('click', () => choose(r.id));
+      li.addEventListener('keydown', (e) => { if (e.target === li && (e.key === 'Enter' || e.key === ' ')) { e.preventDefault(); choose(r.id); } });
+      return li;
+    })));
+}
+
+/* ── a section row (the mockup's rsRow) ── */
+const ORIG = { Agent: ['spark', 'var(--purple)', 'Agent wrote'], You: ['user', 'var(--acc)', 'You'], Records: ['doc', 'var(--muted-foreground)', 'From records'] };
+const STATE = { ok: ['var(--success)', 'Traced', 'check'], stale: ['var(--warning)', 'Stale source', 'alert'], check: ['var(--acc)', 'Needs your input', 'eye'] };
+const LABEL_TONE = { fact: ['check', 'ok'], cited: ['check', 'ok'], reported: ['user', ''], estimate: ['clock', 'warn'], assumption: ['alert', 'warn'], judgement: ['eye', ''] };
+
+function claimRow(c) {
+  const L = LABEL_TONE[c.label];
+  const bad = c.ok === false || !L;
+  const traced = !bad && (c.label === 'fact' || c.label === 'cited' || c.label === 'reported');
+  return el('li', { class: bad ? 'bad' : L[1], 'data-claim': '' }, c3ic(bad ? 'alert' : L[0], 'sm'), el('span', null, c.text + ' ', el('b', { class: 'dim', style: 'font-weight:500' }, traced ? 'Traced' : 'Needs your input')),
+    el('span', { class: 'tag' }, (c.label || 'unlabelled') + (c.source ? ' · ' + c.source : '')));
+}
+function detail(s) {
+  const claims = s.claims && s.claims.length ? s.claims.map(claimRow) : [el('li', { class: s.st === 'ok' ? 'ok' : s.st === 'stale' ? 'warn' : 'warn' }, c3ic(STATE[s.st][2], 'sm'), el('span', null, STATE[s.st][1] + (s.st === 'stale' ? ': a source is out of date. Refresh it before this goes out.' : s.st === 'check' ? ': a person decides this one.' : ': every number has a source.')), el('span', { class: 'tag' }, 'claims check'))];
+  const chips = s.src.length ? s.src.map((q) => (q[2] ? el('button', { type: 'button', class: 'chip2 lk', 'data-a': 'rsrc', 'data-k': q[2], onClick: (e) => { e.stopPropagation(); jump(q[2]); } }, c3ic(q[0], 'sm'), q[1], c3ic('next', 'sm'))
+    : el('span', { class: 'chip2' }, c3ic(q[0], 'sm'), q[1]))) : [el('span', { class: 'dim', style: 'font-size:var(--fs-2)' }, s.by === 'You' ? 'Your judgement. No source to trace.' : 'No source is recorded for this section.')];
+  return el('div', { class: 'dpn' },
+    s.why ? el('div', { class: 'dim', style: 'font-size:var(--fs-2)' }, c3ic('info', 'sm'), ' Why it is here: ' + s.why) : null,
+    el('div', { class: 'dim', style: 'font-size:var(--fs-2)' }, 'Claims check'), el('ul', { class: 'chgl' }, claims),
+    el('div', { class: 'dim', style: 'font-size:var(--fs-2)' }, 'Where it comes from'), el('div', { class: 'chips2', style: 'flex-wrap:wrap' }, chips),
+    s.st !== 'ok' ? el('div', { class: 'chips2', style: 'flex-wrap:wrap' }, el('button', { type: 'button', class: 'chip2', disabled: true, title: FIX_WHY, 'data-rp-act': 'fix' }, c3ic('spark', 'sm'), 'Fix with the agent'), el('span', { class: 'dim', style: 'font-size:var(--fs-2)' }, FIX_WHY)) : null);
+}
+
+function sectionRow(inst, ctx, fam, key, s) {
+  const DEMO = !!rx();
+  const k = key + '|' + s.id; const dst = decOf(inst, key, s.id);
+  const cc = STATE[s.st]; const o = ORIG[s.by] || ORIG.Agent;
+  const li = el('li', { class: 'nrow' + (dst === 'cut' ? ' cutr' : ''), 'data-row': '', 'data-section': s.id, 'data-rs': k, tabindex: '0', style: dst === 'cut' ? 'opacity:.5' : null });
+  const xp = el('div', { class: 'xp' }, el('div', { class: 'xi' }, detail(s)));
+  li.append(el('span', { class: 'ki', style: 'color:' + (dst === 'ok' ? 'var(--success)' : cc[0]) }, c3ic(dst === 'ok' ? 'check' : dst === 'cut' ? 'x' : cc[2])),
+    el('div', { class: 'nb' }, el('span', { class: 'tt' }, s.h), el('div', { class: 'dim', style: 'font-size:var(--fs-2);margin-top:2px' }, s.t),
+      el('div', { class: 'chips' }, el('span', { class: 'chip2', style: 'color:' + o[1] }, c3ic(o[0], 'sm'), o[2]), el('span', { class: 'chip2', style: 'color:' + cc[0] }, c3ic(cc[2], 'sm'), cc[1]),
+        dst ? el('span', { class: 'chip2' }, dst === 'ok' ? 'Approved' : 'Cut') : null), xp));
+  if (DEMO) li.append(el('span', { class: 'sg', title: 'Suggested: approve (drag right)' }, el('span', { class: 'g l' }, c3ic('moon')), el('span', { class: 'g r y' }, c3ic('check'))));
+  const ex = attachExpand(li, xp, { key: k, initial: !!inst.open[k], onToggle: (on) => { inst.open[k] = on; } });
+  inst.cleanups.push(ex.detach);
+  if (DEMO) {
+    const decide = (side) => {
+      const prev = inst.dec[k];
+      inst.dec[k] = side === 'right' ? 'ok' : 'cut';
+      li.classList.add('leave');
+      setTimeout(() => { toast(side === 'right' ? 'Section approved' : 'Section cut', () => { if (prev) inst.dec[k] = prev; else delete inst.dec[k]; inst.draft = null; draw(inst, ctx); }); inst.draft = null; draw(inst, ctx); }, 230);
+    };
+    inst.cleanups.push(attachSwipe(li, { onRight: () => decide('right'), onLeft: () => decide('left'), labelRight: 'Approve', labelLeft: 'Cut', iconRight: 'check', iconLeft: 'moon' }));
+  } else li.setAttribute('aria-description', NO_STORE);
+  return li;
+}
+
+/* ── the report as a document (the mockup's docopen, console3.html 4136 and 4335): the DOCUMENT SHEET with its six modes ── */
+const mdOf = (secs) => secs.map((s) => '## ' + s.h + '\n' + s.t + '\n').join('\n');
+const EDGE = { ok: ['in sync', 'ok', 'check'], stale: ['out of sync', 'bad', 'alert'], check: ['needs your input', '', 'eye'] };
+const NO_STORE_WHY = 'Issue this report first. Editing by hand and asking the agent change a stored document, and this report has none yet: it is generated from the records each time the page opens. Nothing is lost.';
+
+/** Real mode with no stored document: the checks are the claims check, one per section (traced, or not). */
+function generatedHealth(secs) {
+  const checks = secs.map((s) => ({ id: s.id, name: s.h, pass: s.st === 'ok', reason: s.st === 'ok' ? 'every number has a source' : s.st === 'stale' ? 'a source is out of date' : 'a person decides this one' }));
+  return { passed: checks.filter((c) => c.pass).length, total: checks.length, checks };
+}
+
+function reportRelations(inst, secs, repName, getSheet) {
+  return (doc) => {
+    const seen = new Map();
+    secs.forEach((s) => (s.src || []).forEach((q) => { const e = seen.get(q[1]) || { q, st: [] }; e.st.push(s); seen.set(q[1], e); }));
+    const stOf = (e) => (e.st.some((s) => s.st === 'stale') ? 'stale' : e.st.some((s) => s.st === 'check') ? 'check' : 'ok');
+    const R = rx(); const sent = R ? ((inst.hist && inst.hist[(famOf(inst) || {}).id]) || []).filter((h) => h[1] === repName) : (inst.outSent || []).filter((e) => (e.subject || '').indexOf(repName) === 0);
+    const go = (kind) => { const sh = getSheet(); if (sh) sh.close(); jump(kind); };
+    return el('div', { class: 'dpn', 'data-doc-relations': '' },
+      el('div', { class: 'dim', style: 'font-size:var(--fs-2)' }, 'This report cites'),
+      seen.size ? el('ul', { class: 'chgl' }, [...seen.values()].map((e) => { const x = EDGE[stOf(e)]; return el('li', { class: x[1], 'data-edge': stOf(e) }, c3ic(x[2], 'sm'),
+        el('span', null, e.q[1] + ' · ', el('b', null, e.st.map((s) => s.h).join(', ')), ' · ' + x[0] + ' ', e.q[2] ? el('button', { type: 'button', class: 'chip2 lk', 'data-a': 'rsrc', 'data-k': e.q[2], onClick: () => go(e.q[2]) }, c3ic('next', 'sm'), 'Open') : null)); }))
+        : el('div', { class: 'fold' }, c3ic('info', 'sm'), 'No section cites a source yet.'),
+      el('div', { class: 'dim', style: 'font-size:var(--fs-2)' }, 'Cited by'),
+      sent.length ? el('ul', { class: 'chgl' }, sent.map((h) => (Array.isArray(h)
+        ? el('li', { class: 'ok' }, c3ic('out', 'sm'), el('span', null, h[1] + ' · sent to ' + h[2] + ' · ' + h[0] + ' · ' + h[3]))
+        : el('li', { class: 'ok' }, c3ic('out', 'sm'), el('span', null, (h.subject || h.channel) + ' · ' + h.state)))))
+        : el('div', { class: 'fold' }, c3ic('info', 'sm'), 'Nothing cites this report yet: it has not been sent.'),
+      el('div', { class: 'dim', style: 'font-size:var(--fs-2)' }, 'Each section of the report is traced to its source in Initiatives, Calendar or Work.'));
+  };
+}
+
+function secExtraOf(secs, getSheet) {
+  return (name) => {
+    const s = secs.find((x) => x.h === name); if (!s) return null;
+    const claims = s.claims && s.claims.length ? s.claims.map(claimRow) : [];
+    const chips = (s.src || []).map((q) => (q[2] ? el('button', { type: 'button', class: 'chip2 lk', 'data-a': 'rsrc', 'data-k': q[2], onClick: () => { const sh = getSheet(); if (sh) sh.close(); jump(q[2]); } }, c3ic(q[0], 'sm'), q[1], c3ic('next', 'sm')) : el('span', { class: 'chip2' }, c3ic(q[0], 'sm'), q[1])));
+    const stt = STATE[s.st];
+    return el('div', { class: 'dpn', 'data-rp-claims': s.id },
+      claims.length ? el('ul', { class: 'chgl' }, claims) : null,
+      el('div', { class: 'chips2', style: 'flex-wrap:wrap' }, el('span', { class: 'chip2', style: 'color:' + stt[0] }, c3ic(stt[2], 'sm'), stt[1]), chips.length ? chips : el('span', { class: 'dim', style: 'font-size:var(--fs-2)' }, s.by === 'You' ? 'Your judgement. No source to trace.' : 'No source is recorded for this section.')));
+  };
+}
+
+/** Open a report (or a communications message) as a document. path/name name it; secs are its sections; mode is the segment to start on. */
+async function openReportDoc(inst, ctx, { fam, path, name, aud, repName, secs, mode }) {
+  const ws = (ctx && ctx.ws) || '';
+  let text = null;
+  try { const r = await fetch('/api/doc?ws=' + encodeURIComponent(ws) + '&path=' + encodeURIComponent(path)); if (r.ok) text = await r.text(); } catch { /* no stored document */ }
+  if (!insts.has(inst.host)) return;
+  const stored = text != null;
+  if (stored) inst.docText[path] = text;
+  let sheet = null; const getSheet = () => sheet;
+  const doc = { path, name, ty: 'Report', v: stored ? 'v1' : '', st: 'draft', ini: '', iniName: 'Portfolio' };
+  sheet = openDocSheet({ ws, doc, mode: mode || 'read', relations: reportRelations(inst, secs, repName || name, getSheet), secExtra: secExtraOf(secs, getSheet),
+    generated: stored ? null : { text: mdOf(secs), why: NO_STORE_WHY, health: generatedHealth(secs) },
+    onChanged: async () => { try { const r = await fetch('/api/doc?ws=' + encodeURIComponent(ws) + '&path=' + encodeURIComponent(path)); if (r.ok) { inst.docText[path] = await r.text(); draw(inst, ctx); } } catch { /* the rows keep what they show */ } } });
+  void aud; void fam;
+  return sheet;
+}
+
+/* ── Send: the case file and the slide ── */
+function bodyOf(inst, key, fam, aud, secs) {
+  const lines = [];
+  for (const s of secs) {
+    if (decOf(inst, key, s.id) === 'cut') continue;
+    for (const c of s.claims || []) { const key = /\b[A-Z][A-Z0-9]+-\d+\b/.exec(c.source || ''); const lab = key ? key[0] : c.label; lines.push('- ' + c.text + (lab ? ' [' + lab + ']' : '')); }
+  }
+  return lines.length ? fam.name + ' report for ' + aud + '\n' + lines.join('\n') : '';
+}
+async function ensureDraft(inst, ctx, fam, key, aud, secs) {
+  const body = bodyOf(inst, key, fam, aud, secs);
+  if (!body || inst.draftBusy) return;
+  if ((inst.draft && inst.draft.body === body) || (inst.draftErr && inst.draftErr.body === body)) return;
+  inst.draftBusy = true;
+  const r = await pmPost('/api/outbox/draft', { channel: 'customer-note', recipient: aud, subject: fam.name + ' report for ' + aud, body });
+  inst.draftBusy = false;
+  if (!insts.has(inst.host)) return;
+  if (r && r.ok && r.entry) { inst.draft = { entry: r.entry, body }; inst.draftErr = null; } else { inst.draft = null; inst.draftErr = { body, error: (r && (r.error || r.reason)) || 'The draft could not be queued.' }; }
+  draw(inst, ctx);
+}
+async function confirmReal(inst, ctx, hashFull) {
+  const d = inst.draft; const hash = String(hashFull).split('|')[0];
+  let text;
+  if (!d || d.entry.hash !== hash) text = 'The content changed after the slide was prepared. Nothing was sent. Slide again.';
+  else {
+    const r = await pmPost('/api/outbox/confirm', { id: d.entry.id, hash });
+    if (r && r.ok) text = 'Sent.';
+    else if (r && r.reason === 'no channel connected') text = 'No channel connected. Nothing was sent. The draft stays queued in the outbox.';
+    else text = 'Not sent: ' + ((r && (r.reason || r.error)) || 'no answer') + '.';
+  }
+  if (!insts.has(inst.host)) return;
+  inst.outMsg[inst.draft ? inst.draft.entry.id : 'x'] = text;
+  toast(text);
+  draw(inst, ctx);
+}
+
+function sendCase(inst, ctx, fam, key, secs, q, aud, repName, vr) {
+  const DEMO = !!rx();
+  /* "Resolve the flagged sections first" (the mockup's confirmCase): the case settles on that choice with an undo, and a toast says "Flags opened." The sections themselves stay as they are. */
+  const open = () => { inst.flagged[key] = 1; toast('Flags opened.', () => { delete inst.flagged[key]; draw(inst, ctx); }); draw(inst, ctx); };
+  const settled = (cs) => {
+    cs.querySelectorAll('.opts,.c3slide').forEach((n) => n.remove());
+    cs.append(el('div', { class: 'chips2', 'data-flags-settled': '' }, c3ic('check', 'sm'), el('b', { style: 'font-size:var(--fs-3);color:var(--success)' }, 'Resolve the flagged sections first'),
+      el('button', { type: 'button', class: 'chip2 lk', onclick: () => { delete inst.flagged[key]; draw(inst, ctx); } }, c3ic('undo', 'sm'), 'undo')));
+    return cs;
+  };
+  if (DEMO) {
+    const R = rx();
+    const model = { id: 'rpt:' + key, sit: 'The ' + repName + ' for ' + aud + ' has ' + q.ap + ' of ' + q.n + ' sections approved' + (q.fl ? ' and ' + q.fl + ' still need a look' : '') + '. Sending is final: it goes in the history with what it said.', conf: q.fl ? 64 : 86,
+      chg: [['check', q.ap + ' of ' + q.n + ' sections approved', 'sections', q.ap === q.n ? 'ok' : 'warn'], ['alert', q.fl ? q.fl + ' section' + (q.fl > 1 ? 's' : '') + ' stale or unconfirmed' : 'All sections traced', 'claims check', q.fl ? 'warn' : 'ok'], ['user', 'Audience: ' + aud, 'audience']],
+      opts: [{ id: 's', l: 'Send it', rec: q.fl ? 0 : 1, outward: true, fx: [['check', 'Recorded with its sources', 'ok']] }, { id: 'r', l: 'Resolve the flagged sections first', rec: q.fl ? 1 : 0, fx: [['eye', 'Review what is stale', 'ok']] }, { id: 'h', l: 'Not yet', fx: [] }] };
+    const cs = renderCase(model, { outbox: true, onConfirm: ({ option }) => {
+      if (option.id === 's') {
+        const hist = inst.hist[fam.id]; const ent = ['Thu 8 Oct', repName, aud, 'just sent', ''];
+        inst.sent[key] = 1; hist.unshift(ent);
+        toast('Sent to ' + aud + '. It is in the history.', () => { delete inst.sent[key]; const i = hist.indexOf(ent); if (i >= 0) hist.splice(i, 1); draw(inst, ctx); });
+        draw(inst, ctx);
+      } else if (option.id === 'r') open(); else { toast('Held.'); draw(inst, ctx); }
+    } });
+    void R;
+    return inst.flagged[key] ? settled(cs) : cs;
+  }
+  /* REAL: the draft is the unit; the slide is bound to its hash */
+  const d = inst.draft; const err = inst.draftErr;
+  const claimsN = secs.reduce((n, s) => n + (s.claims || []).length, 0);
+  const blocked = d && !d.entry.claims.ok;
+  const none = !claimsN || (!d && !err && !inst.draftBusy && !bodyOf(inst, key, fam, aud, secs));
+  const chg = [];
+  chg.push(['out', none ? 'No section has a claim yet: there is nothing to send.' : d ? 'Draft queued in the outbox, hash ' + d.entry.hash.slice(0, 10) : err ? err.error : 'Queuing the draft in the outbox.', 'outbox', none || err ? 'warn' : 'ok']);
+  if (d) chg.push([d.entry.claims.ok ? 'check' : 'alert', d.entry.claims.ok ? 'Every claim line has a label.' : d.entry.claims.refused.length + ' claim line' + (d.entry.claims.refused.length > 1 ? 's fail' : ' fails') + ' the outbound trust rules (a label with its source, or a ticket key).', 'claims check', d.entry.claims.ok ? 'ok' : 'bad']);
+  if (blocked) d.entry.claims.refused.forEach((l) => chg.push(['x', l, 'refused', 'bad']));
+  if (vr && vr.external) chg.push(['shield', 'A customer report allows only fact and cited labels.', 'rule', 'warn']);
+  chg.push(['user', 'Audience: ' + aud, 'audience']);
+  const msg = d && inst.outMsg[d.entry.id];
+  const model = { id: d ? d.entry.hash : 'rpt:' + key, sit: msg || 'Nothing has been sent. The slide sends exactly this draft, bound to its hash, and only when a channel is connected.', conf: q.fl ? 40 : 70, chg,
+    outboxReason: none ? 'Nothing to send: no section has a claim yet.' : blocked ? 'Blocked: a claim line has no label the rules accept, or no ticket key. Fix it or cut it.' : err ? err.error : 'The draft is not ready yet.',
+    opts: [{ id: 's', l: 'Send it', rec: q.fl ? 0 : 1, outward: true, fx: [['out', 'Goes through the outbox, bound to the hash', 'ok']] }, { id: 'r', l: 'Resolve the flagged sections first', rec: q.fl ? 1 : 0, fx: [['eye', 'Review what is stale', 'ok']] }, { id: 'h', l: 'Not yet', fx: [] }] };
+  const cr = renderCase(model, { outbox: !!d && !blocked, onConfirm: ({ option, hash }) => { if (option.id === 's') confirmReal(inst, ctx, hash); else if (option.id === 'r') open(); else { toast('Held.'); draw(inst, ctx); } } });
+  return inst.flagged[key] ? settled(cr) : cr;
+}
+
+function sendRow(inst, ctx, fam, key, secs, q, aud, repName, vr) {
+  const DEMO = !!rx(); const sent = DEMO && inst.sent[key]; const k = key + '|send';
+  const li = el('li', { class: 'nrow', 'data-row': '', 'data-send': '', tabindex: '0' });
+  const xp = el('div', { class: 'xp' }, el('div', { class: 'xi' }));
+  const fill = () => { const xi = xp.querySelector('.xi'); xi.replaceChildren(sendCase(inst, ctx, fam, key, secs, q, aud, repName, vr)); };
+  li.append(el('span', { class: 'ki', style: 'color:' + (sent ? 'var(--success)' : 'var(--acc)') }, c3ic(sent ? 'check' : 'out')),
+    el('div', { class: 'nb' }, el('span', { class: 'tt' }, sent ? 'Sent' : 'Send'), el('div', { class: 'dim', style: 'font-size:var(--fs-2)' },
+      sent ? 'It is in the history with its sources.' : DEMO ? q.ap + ' of ' + q.n + ' approved. Slide to send, or swipe sections first.' : 'Slide to send. Nothing is sent while no channel is connected.'), xp));
+  if (!sent) fill(); else xp.querySelector('.xi').replaceChildren(el('div', { class: 'fold' }, c3ic('check', 'sm'), 'Sent. It is in the history with its sources.'));
+  const ex = attachExpand(li, xp, { key: k, initial: !!inst.open[k], onToggle: (on) => { inst.open[k] = on; if (on && !DEMO) ensureDraft(inst, ctx, fam, key, aud, secs); } });
+  inst.cleanups.push(ex.detach);
+  if (inst.open[k] && !DEMO) ensureDraft(inst, ctx, fam, key, aud, secs);
+  return li;
+}
+
+/* ── Communications (demo): the queue ── */
+function cmRow(inst, ctx, c) {
+  const st = inst.csent[c.id] ? 'sent' : inst.chold[c.id] ? 'held' : 'draft';
+  const sc = { draft: ['var(--acc)', 'Draft'], held: ['var(--mfg)', 'Held'], sent: ['var(--success)', 'Sent'] }[st];
+  const k = 'cm' + c.id;
+  const sendIt = () => { inst.csent[c.id] = 1; const was = inst.chold[c.id]; delete inst.chold[c.id]; toast(c.ext ? 'Approved. Sent to ' + c.to + '.' : 'Sent to ' + c.to + '.', () => { delete inst.csent[c.id]; if (was) inst.chold[c.id] = was; draw(inst, ctx); }); draw(inst, ctx); };
+  const hold = () => { inst.chold[c.id] = 1; toast('Held.', () => { delete inst.chold[c.id]; draw(inst, ctx); }); draw(inst, ctx); };
+  const model = { id: 'com:' + c.id, quote: c.body, sit: c.why, conf: c.ext ? 72 : 84,
+    chg: [['out', 'To ' + c.to + ' by ' + c.ch, 'channel'], ['user', 'Tone: ' + c.tone, 'agent'], ['alert', c.risk, 'risk', c.ext ? 'warn' : '']],
+    opts: [{ id: 's', l: c.ext ? 'Approve and send' : 'Send now', rec: c.ext ? 0 : 1, outward: true, fx: [['check', 'Logged in the history', 'ok']] }, { id: 'o', l: 'Open and edit it first', rec: c.ext ? 1 : 0, fx: [] }, { id: 'h', l: 'Hold it', fx: [['clock', 'Reminder tomorrow']] }] };
+  const cs = renderCase(model, { outbox: true, onConfirm: ({ option }) => { if (option.id === 's') sendIt(); else if (option.id === 'h') hold(); else { const m = (id, h, t) => ({ id, h, t, src: [], st: 'ok', by: 'Agent', why: '', claims: [] }); openReportDoc(inst, ctx, { fam: 'communications', path: docPath('communications', c.id, 'msg'), name: c.t, repName: c.t, aud: c.to, mode: 'edit', secs: [m('m', 'Message', c.body), m('w', 'Why now', c.why), m('t', 'Tone and risk', c.tone + '. ' + c.risk)] }); } } });
+  inst.cleanups.push(() => cs.c3case.dispose());
+  const li = el('li', { class: 'nrow', 'data-row': '', 'data-cm': c.id, tabindex: '0' });
+  const xp = el('div', { class: 'xp' }, el('div', { class: 'xi' }, cs));
+  li.append(el('span', { class: 'ki', style: 'color:' + sc[0] }, c3ic(c.ext ? 'out' : 'reply')),
+    el('div', { class: 'nb' }, el('span', { class: 'tt' }, c.t), el('div', { class: 'chips' }, el('span', { class: 'chip2', style: 'color:' + sc[0] }, sc[1]), el('span', { class: 'chip2' }, c3ic('user', 'sm'), c.to), el('span', { class: 'chip2' }, c3ic('clock', 'sm'), c.due), el('span', { class: 'tag' }, c.ch),
+      c.ext ? el('span', { class: 'st warn' }, c3ic('shield', 'sm'), 'external, you approve') : null), xp),
+    el('span', { class: 'sg', title: 'Suggested: send (drag right)' }, el('span', { class: 'g l' }, c3ic('moon')), el('span', { class: 'g r y' }, c3ic('check'))));
+  inst.cleanups.push(attachExpand(li, xp, { key: k, initial: !!inst.open[k], onToggle: (on) => { inst.open[k] = on; } }).detach);
+  inst.cleanups.push(attachSwipe(li, { onRight: sendIt, onLeft: hold, labelRight: c.ext ? 'Approve and send' : 'Send', labelLeft: 'Hold', iconRight: 'out', iconLeft: 'moon', disabled: () => st === 'sent' }));
+  return li;
+}
+function commsQueue(inst, ctx, fam) {
+  const R = rx(); const aud = inst.variant || 'all';
+  const L = R.COMMS.filter((c) => aud === 'all' || c.aud === aud);
+  return el('section', { class: 'card sect', 'data-rp-section': 'queue' }, el('div', { class: 'sh2' }, el('h2', null, c3ic('out', 'sm'), 'Messages ', el('span', { class: 'bdg g' }, String(L.length))), dim('by when it matters')),
+    el('ul', { class: 'list' }, L.map((c) => cmRow(inst, ctx, c))),
+    el('div', { class: 'pgl' }, el('span', null, 'swipe right: send'), el('span', null, 'swipe left: hold'), el('span', null, 'external: you approve')));
+}
+
+/* ── right-hand cards ── */
+const bars = (rows) => el('div', { class: 'hbs' }, rows.map((r, i) => el('div', { class: 'hbr', style: '--c:' + r[2] }, el('div', { class: 'l' }, el('span', null, r[0]), el('i', null, String(r[3]))), el('div', { class: 'tk' }, el('u', { style: 'width:' + Math.max(2, r[1] * 100) + '%;animation-delay:' + (i * 90) + 'ms' })))));
+
+function claimsCard(secs) {
+  const t = { ok: 0, stale: 0, check: 0 }; secs.forEach((s) => { t[s.st]++; });
+  const all = Math.max(1, secs.length);
+  return el('section', { class: 'card', 'data-rp-section': 'claims' }, el('h3', null, c3ic('shield'), 'Claims check ', el('span', { class: 'dim', style: 'text-transform:none;letter-spacing:0' }, 'every number traced')),
+    bars([['Traced to a source', t.ok / all, 'var(--success)', t.ok], ['Source is stale', t.stale / all, 'var(--warning)', t.stale], ['Needs your input', t.check / all, 'var(--acc)', t.check]]),
+    el('div', { class: 'dim', style: 'font-size:var(--fs-2)' }, 'A report with an untraced number does not go out. Guesses are labelled as guesses.'));
+}
+function sentCard(inst, fam) {
+  const R = rx();
+  const head = el('h3', null, c3ic('clock'), 'Sent ', el('span', { class: 'dim', style: 'text-transform:none;letter-spacing:0' }, 'who read it, what came back'));
+  if (R) {
+    const list = (inst.hist && inst.hist[fam.id]) || [];
+    return el('section', { class: 'card', 'data-rp-section': 'sent' }, head, el('ul', { class: 'hx' }, list.map((h) => el('li', null, el('span', { class: 'chip2' }, c3ic('out', 'sm'), h[2]), el('span', null, h[1], el('small', null, h[3] + (h[4] ? ' · ' + h[4] : ''))), el('span', { class: 'w' }, h[0])))));
+  }
+  const sent = inst.outSent || [];
+  return el('section', { class: 'card', 'data-rp-section': 'sent' }, head, sent.length ? el('ul', { class: 'hx' }, sent.map((e) => el('li', null, el('span', { class: 'chip2' }, c3ic('out', 'sm'), e.recipient || e.channel), el('span', null, (e.subject || e.body.split('\n')[0]), el('small', null, e.channel)), el('span', { class: 'w' }, e.state))))
+    : el('div', { class: 'fold' }, c3ic('check', 'sm'), 'Nothing has been sent. No channel is connected, so nothing can go out yet.'));
+}
+function truthBlock(inst, ctx) {
+  const R = rx();
+  const sec = el('section', { class: 'card', 'data-rp-section': 'who-holds-what' }, el('h3', null, c3ic('user'), 'Who holds what ', el('span', { class: 'dim', style: 'text-transform:none;letter-spacing:0' }, 'told against true now')));
+  if (R) {
+    sec.appendChild(el('ul', { class: 'hx' }, R.TRUTH.map((x) => { const cur = !x[4] || inst.csent.c1;
+      return el('li', { 'data-person': x[0], 'data-state': cur ? 'in sync' : 'stale' }, el('span', { class: 'chip2', style: 'color:' + (cur ? 'var(--success)' : 'var(--destructive)') }, c3ic(cur ? 'check' : 'alert', 'sm'), x[0]),
+        el('span', null, 'Told: ' + x[2], el('small', null, 'Now: ' + x[3] + (cur ? '' : ' · ' + x[4] + ' days apart'))), el('span', { class: 'w' }, x[1])); })));
+    return sec;
+  }
+  const rows = (ctx && ctx.reportFacts && ctx.reportFacts.truthTable) || [];
+  if (!rows.length) { sec.appendChild(el('div', { class: 'fold' }, c3ic('check', 'sm'), 'No message has told anyone a claim yet.')); return sec; }
+  const tone = (s) => (s === 'contradicted' ? 'var(--destructive)' : s === 'stale' ? 'var(--warning)' : 'var(--success)');
+  sec.appendChild(el('ul', { class: 'hx' }, rows.flatMap((p) => p.claims.map((c) => el('li', { 'data-person': p.person, 'data-state': c.state },
+    el('span', { class: 'chip2', style: 'color:' + tone(c.state) }, c3ic(c.state === 'contradicted' || c.state === 'stale' ? 'alert' : 'check', 'sm'), p.person),
+    el('span', null, c.text || c.id, el('small', null, c.state)), el('span', { class: 'w' }, c.state))))));
+  return sec;
+}
+const guardCard = () => el('section', { class: 'card', 'data-rp-section': 'guardrails' }, el('h3', null, c3ic('shield'), 'Guardrails'),
+  el('ul', { class: 'chgl' }, ['External messages need your approval. They are never sent automatically.', 'A claim line with no label or ticket key blocks the slide.', 'Every message is logged with what it said.', 'With no channel connected nothing is sent, and the page says so.'].map((t) => el('li', { class: 'ok' }, c3ic('check', 'sm'), el('span', null, t)))));
+
+/* ── the page ── */
+function draw(inst, ctx) {
+  const root = inst.root;
+  inst.cleanups.splice(0).forEach((f) => { try { f(); } catch { /* a detach that fails changes nothing */ } });
+  if (inst.error) { root.replaceChildren(el('div', { class: 'fold w', role: 'alert' }, c3ic('alert', 'sm'), inst.error)); return; }
+  if (!inst.families) { root.replaceChildren(el('div', { class: 'fold a', role: 'status' }, el('span', { class: 'c3spin' }, c3ic('spark', 'sm')), 'Reading the report families.')); return; }
+  const R = rx();
+  if (R && !inst.hist) inst.hist = JSON.parse(JSON.stringify(R.HIST));
+  const fam = famOf(inst);
+  const badges = ctx && ctx.reportFacts && ctx.reportFacts.badges;
+  const draftN = R ? R.COMMS.filter((c) => !inst.csent[c.id] && !inst.chold[c.id]).length : (badges && badges.communications) || 0;
+  const seg = el('div', { class: 'seg', role: 'group', 'aria-label': 'Report type', 'data-rp-section': 'families' }, inst.families.map((f) => el('button', { type: 'button', 'data-a': 'rfam', 'data-family': f.id, 'aria-pressed': String(f.id === inst.sel), 'aria-current': f.id === inst.sel ? 'true' : null,
+    title: f.intent + ' · ' + f.cadence, onClick: () => pick(inst, ctx, f) }, c3ic(FAM_ICON[f.id] || 'doc', 'sm'), f.name, f.id === 'communications' && draftN ? [' ', el('span', { class: 'bdg' }, String(draftN))] : null)));
+  const bar = el('div', { class: 'calbar', style: 'flex-wrap:wrap' }, seg,
+    fam ? el('div', { class: 'chips2', role: 'group', 'aria-label': fam.name + ' variants' }, variantsOf(inst, fam).map((v) => el('button', { type: 'button', class: 'pill', 'data-a': fam.id === 'periodic' ? 'rsel' : 'raud', 'data-variant': v.id, 'aria-pressed': String(v.id === inst.variant), onClick: () => { inst.variant = v.id; inst.draft = null; inst.draftErr = null; if (!R) { inst.check = null; draw(inst, ctx); runCheck(inst, ctx); } else draw(inst, ctx); } }, v.name))) : null);
+  let body = el('div', { class: 'fold' }, c3ic('check', 'sm'), 'No report family is defined.');
+  if (fam) {
+    const key = keyOf(inst, fam); const vr = variantOf(inst, fam); const rep = repOf(inst, fam);
+    const secs = sectionsOf(inst, fam, ctx);
+    const q = readyOf(inst, key, secs);
+    const audName = R ? (fam.id === 'periodic' ? rep.aud : vr.name) : (vr.name || fam.name);
+    const repName = R && rep ? rep.n : fam.name;
+    const comms = { drafts: draftN, sent: R ? R.COMMS.filter((c) => inst.csent[c.id]).length : 0 };
+    const hd = R ? R.info(fam.id, repIdOf(inst, fam), audName, q, comms) : null;
+    const traced = secs.filter((s) => s.st === 'ok').length;
+    const head = el('div', { class: 'lh' }, el('span', { class: 'ki' }, c3ic(FAM_ICON[fam.id] || 'doc')),
+      el('div', { style: 'min-width:0' }, el('b', null, hd ? hd.h : fam.name + ': ' + traced + ' of ' + secs.length + ' sections traced'), el('div', { class: 'dim', 'data-rp-section-purpose': '' }, hd ? hd.s : fam.purpose)),
+      hd ? c3ring(hd.p[0], Math.max(1, hd.p[1]), 44) : c3ring(traced, Math.max(1, secs.length), 44, traced + '/' + secs.length));
+    const F = R ? R.FAMS[fam.id] : null;
+    const facts = el('div', { class: 'lkrow' }, [['target', 'Purpose', F ? F.purpose : fam.purpose], ['user', 'Audience', F ? F.aud : fam.variants.map((v) => v.audience).join(', ')], ['bolt', 'Intent', F ? F.intent : fam.intent], ['cal', 'Cadence', F ? F.cad : fam.cadence]]
+      .map((x) => el('span', { class: 'chip2', title: x[2] }, c3ic(x[0], 'sm'), el('b', { style: 'font-weight:600' }, x[1]), ' ' + String(x[2] || '').slice(0, 38))));
+    const c = inst.check;
+    const notes = !R && c ? [...(c.reasons || []).map((t) => el('div', { class: 'fold w', 'data-blocked': '' }, c3ic('alert', 'sm'), t)), ...(c.warnings || []).map((t) => el('div', { class: 'fold w' }, c3ic('info', 'sm'), t))] : [];
+    /* the report card: a row per section, then Send */
+    const doc = el('section', { class: 'card sect', 'data-rp-section': 'family', 'aria-label': fam.name },
+      el('div', { class: 'sh2' }, el('h2', null, c3ic('doc', 'sm'), repName + ' ', R ? el('span', { class: 'chip2' }, c3ic('user', 'sm'), audName) : el('span', { class: 'bdg g' }, String(secs.length)), R ? null : dim(vr.name)),
+        el('span', { class: 'chips2' }, el('button', { type: 'button', class: 'ib sm', 'data-a': 'docopen', title: 'Open as a document to edit by hand or ask the agent', 'aria-label': 'Open as a document to edit by hand or ask the agent', onClick: () => openReportDoc(inst, ctx, { fam, path: pathOf(inst, fam), name: repName + ' for ' + audName, aud: audName, repName, secs: secs.filter((s) => decOf(inst, key, s.id) !== 'cut') }) }, c3ic('notes', 'sm')))),
+      el('ul', { class: 'list' }, secs.length ? [...secs.map((s) => sectionRow(inst, ctx, fam, key, s)), sendRow(inst, ctx, fam, key, secs, q, audName, repName, vr)] : el('li', { class: 'fold' }, c3ic('check', 'sm'), 'This family has no sections.')),
+      el('div', { class: 'pgl' }, R ? [el('span', null, 'swipe right: approve'), el('span', null, 'swipe left: cut'), el('span', null, 'tap: where it comes from')] : [el('span', null, 'tap: where it comes from'), el('span', null, 'approve and cut: off, no record stores them')]),
+      notes.length ? el('div', { 'data-rp-section': 'check-notes', style: 'display:grid;gap:var(--sp-2)' }, notes) : null);
+    const rf = (ctx && ctx.reportFacts) || {};
+    const sctx = { goInit: (id) => { if (ctx && ctx.openInitiative) ctx.openInitiative(ctx.repo, id); } };
+    const left = [(ctx && ctx.plan) || null];
+    let right = [];
+    if (R && fam.id === 'communications') { left.push(commsQueue(inst, ctx, fam)); right = [truthBlock(inst, ctx), el('section', { class: 'card', 'data-rp-section': 'channels' }, el('h3', null, c3ic('out'), 'Channels'), bars(R.CHANNELS)), guardCard(), sentCard(inst, fam)]; }
+    else {
+      if (R && R.REPORTS[fam.id] && fam.id !== 'periodic') left.push(reportsList(inst, ctx, fam, R.REPORTS[fam.id], repIdOf(inst, fam)));
+      left.push(doc);
+      if (fam.id === 'project') { const rp = repOf(inst, fam); const nm = (R && R.INM) || {}; right.push((ctx && ctx.portfolio) || null, forecastChecksCard(rp && rp.i ? { id: rp.i, title: nm[rp.i] || String(rp.n || '').replace(/ status$/, '') } : {})); }
+      if (fam.id === 'product') right.push(strategyPanel('north', sctx, { view: 'year', plain: true }), strategyPanel('outcomes', sctx));   // the mockup's product report (line 4345): north star, quarter outcomes, then the benchmark
+      if (R && fam.id === 'product') right.push(el('section', { class: 'card', 'data-rp-section': 'benchmark' }, el('h3', null, c3ic('report'), 'Benchmark ', el('span', { class: 'dim', style: 'text-transform:none;letter-spacing:0' }, 'checkout conversion')), bars(R.BENCH)));
+      if (R && fam.id === 'periodic') right.push(el('section', { class: 'card', 'data-rp-section': 'rhythm' }, el('h3', null, c3ic('cal'), 'Rhythm ', el('span', { class: 'dim', style: 'text-transform:none;letter-spacing:0' }, 'next due')),
+        el('ul', { class: 'hx' }, R.REPORTS.periodic.map((x) => el('li', null, el('span', { class: 'chip2', style: 'color:' + (x.pct >= 0.8 ? 'var(--success)' : 'var(--acc)') }, c3ic('doc', 'sm'), Math.round(x.pct * 100) + '%'), el('span', null, x.n, el('small', null, x.cad + ' · ' + x.aud)), el('span', { class: 'w' }, x.due))))));
+      right.push(claimsCard(secs));
+      if (fam.id === 'communications') right.push(truthBlock(inst, ctx), guardCard());
+      right.push(sentCard(inst, fam));
+      if (R && fam.id === 'periodic') right.push(el('section', { class: 'card', 'data-rp-section': 'questions' }, el('h3', null, c3ic('reply'), 'Open questions from readers'), el('ul', { class: 'chgl' }, R.QUESTIONS.map((t) => el('li', { class: 'warn' }, c3ic('reply', 'sm'), el('span', null, t))))));
+    }
+    body = el('div', null, head, facts, el('div', { class: 'brief sbb' }, el('div', { class: 'bcols' }, el('div', { class: 'bcol l' }, left), el('div', { class: 'bcol r' }, right))));
+  }
+  root.replaceChildren(el('div', { class: 'calwrap' }, bar, el('div', { class: 'calbody' }, body)));
+  /* in demo the shell's own outbox host would repeat the Communications queue the page now draws */
+  const oh = inst.host.parentNode && inst.host.parentNode.querySelector && inst.host.parentNode.querySelector('[data-c3pg="outbox-host"]');
+  if (oh) { if (R) oh.setAttribute('data-rp-hide', ''); else oh.removeAttribute('data-rp-hide'); }
+}
+
+export function mountReportFamilies(host, ctx) {
+  let inst = insts.get(host);
+  if (!inst) { inst = make(host); insts.set(host, inst); inst.stopPhone = c3Phone(inst.root); }
+  ensureC3Css();
+  if (inst.root.parentNode !== host) host.replaceChildren(inst.root);
+  if (ctx && ctx.FIXTURE) { inst.root.replaceChildren(el('div', { class: 'fold' }, c3ic('info', 'sm'), 'Report families are not shown in fixture mode.')); return; }
+  if (!inst.families && !inst.loading) { inst.loading = true; draw(inst, ctx); load(inst, ctx).finally(() => { inst.loading = false; }); } else draw(inst, ctx);
+}
+
+export function disposeReportFamilies(host) {
+  const inst = insts.get(host);
+  if (!inst) return;
+  inst.seq++; inst.cleanups.splice(0).forEach((f) => { try { f(); } catch { /* nothing */ } });
+  if (inst.stopPhone) inst.stopPhone(); inst.root.remove(); insts.delete(host);
+}