create-pmos 0.124.0 → 0.126.0

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

@@ -0,0 +1,240 @@
+/* pm/c3-breakdown.js — the Breakdown sub-view of Initiatives on /c3.html, on the mockup's own markup and CSS (console3.html wbTree 3986, wbRow 3990 and
+ * patch 25 at line 4406: wbEd, capCard, the wform; wbsRight 3997). PMOS-ONLY non-development work in three phases (Discovery, Design, Launch); the
+ * engineering tickets are in the Tickets view and are never mixed in here.
+ * Left: the tree (initiative, phase, item). An item shows its phase, source and owner chips, who added it and how often it changed, and on tap its
+ * history and an editor: phase, owner, points, the Jira tickets it waits on, delete (with an 8 second undo). Right: Capacity for PMOS work, Who
+ * shaped the plan, Latest changes, Rules.
+ * REAL: GET /api/c3-init/breakdown (items, people, capacity per person over two weeks, the events of the ledger: who and why) and the writes
+ * through pmPost to /api/roadmap-ops/breakdown/{add,edit,delete,undo,dependency} and /people. A change to a field Jira owns comes back as a proposal and
+ * is shown as one. Nothing is invented: with no items the page says so. */
+import { el } from './dom.js';
+import { pmGet, pmPost } from './http.js';
+import { c3ic, c3ib } from './pm-work-view.js';
+import { makeView, frame, hBars, card, emptyRow, dayLabel, say } from './c3-init-extras.js';
+import { openSheet, closeSheet } from './c3-sheet.js';
+import { attachExpand } from './c3-expand.js';
+
+const PHASES = ['discovery', 'design', 'launch'];
+const PL = { discovery: 'Discovery', design: 'Design', launch: 'Launch' };
+const PC = { discovery: 'var(--purple)', design: 'var(--acc)', launch: 'var(--warning)' };
+const SRC = { local: 'Local', figma: 'Figma', calendar: 'Calendar', gmail: 'Gmail', notes: 'Notes' };
+const AGENTISH = /^(agent|claude)/i;
+
+/** who a ledger `by` is: { l: label, c: colour, i: icon }, as the mockup's orig(). */
+function orig(by) {
+  const b = String(by || '');
+  if (AGENTISH.test(b) || /^claude-code/.test(b)) return { l: 'Agent', c: 'var(--purple)', i: 'spark' };
+  if (/^human:wawan$/i.test(b) || b === 'You' || b === '') return { l: 'You', c: 'var(--acc)', i: 'user' };
+  return { l: b.replace(/^human:/, ''), c: 'var(--muted-foreground)', i: 'user' };
+}
+const bucket = (by) => { const l = orig(by).l; return l === 'You' || l === 'Agent' ? l : 'Team'; };
+const evOf = (V, rid) => ((V.data.bd && V.data.bd.events) || []).filter((e) => e.rid === rid);
+const isOwnerPerson = (p) => p && !AGENTISH.test(p);
+
+async function load(V) {
+  const bd = await pmGet('/api/c3-init/breakdown').catch(() => null);
+  if (V.disposed) return;
+  V.data.bd = bd && bd.ok ? bd : null; V.data.err = bd && bd.ok ? null : (bd && bd.error) || 'The breakdown could not be read.';
+  V.render();
+  if (V.sheet) V.sheet.draw();
+}
+async function write(V, path, body, note, at) {
+  const r = await pmPost(path, body);
+  if (V.disposed) return r;
+  if (r && r.ok) { V.err = ''; V.note = r.proposal ? (r.note || 'Jira owns those fields: the change is a proposal, nothing was applied.') : note || ''; await load(V); return r; }
+  V.err = (r && r.error) || 'Not recorded.'; V.errAt = at || null; V.render(); return r;
+}
+const iniName = (V, id) => { const r = (V.ctx.rows || []).find((x) => x.id === id); return r ? r.title : id || 'No initiative'; };
+
+/** the tree: initiatives (in the order of first appearance), each with the phases that hold items. */
+function tree(V) {
+  const items = ((V.data.bd && V.data.bd.items) || []).filter((x) => !V.scope || x.initiative === V.scope);
+  const ids = []; items.forEach((x) => { const k = x.initiative || ''; if (!ids.includes(k)) ids.push(k); });
+  return ids.map((id, ii) => {
+    const mine = items.filter((x) => (x.initiative || '') === id);
+    const firsts = mine.map((x) => evOf(V, x.rid)[0]).filter(Boolean); const youN = firsts.filter((e) => orig(e.by).l === 'You').length;
+    const first = firsts.length ? (youN * 2 >= firsts.length ? firsts.find((e) => orig(e.by).l === 'You') || firsts[0] : firsts[0]) : null;   // who added most of it
+    const pts = (l) => [l.filter((x) => x.done).reduce((n, x) => n + (x.points || 1), 0), l.reduce((n, x) => n + (x.points || 1), 0)];
+    return { id: 'i-' + id, type: 'ini', code: String(ii + 1), name: iniName(V, id), by: first && first.by, pts: pts(mine), kids: PHASES.map((ph, pi) => {
+      const l = mine.filter((x) => x.phase === ph); if (!l.length) return null;
+      return { id: 'p-' + id + '-' + ph, type: 'ph', code: (ii + 1) + '.' + (pi + 1), name: PL[ph], pts: pts(l), kids: l.map((x, xi) => ({ id: x.rid, type: 'it', code: (ii + 1) + '.' + (pi + 1) + '.' + (xi + 1), name: x.title, item: x, pts: [x.done ? x.points || 1 : 0, x.points || 1], kids: [] })) };
+    }).filter(Boolean) };
+  });
+}
+
+const collapsed = (V, n) => ((V.col = V.col || {})[n.id] != null ? V.col[n.id] : n.type === 'ini' && !V.scope);
+const pill = (label, on, attrs, fn) => el('button', { type: 'button', class: 'pill', 'aria-pressed': String(on), onClick: fn, ...(attrs || {}) }, label);
+
+function history(V, rid) {
+  const ev = evOf(V, rid).slice().reverse();
+  if (!ev.length) return el('div', { class: 'dim', style: 'font-size:var(--fs-2)' }, 'No history is recorded for this item.');
+  const KI = { add: 'plus', edit: 'notes', dependency: 'org', delete: 'x' };
+  return el('ul', { class: 'hx' }, ev.map((e) => { const o = orig(e.by); return el('li', null, el('span', { class: 'chip2', style: 'color:' + o.c }, c3ic(o.i, 'sm'), o.l),
+    el('span', null, c3ic(KI[e.kind] || 'notes', 'sm'), ' ' + (e.kind === 'add' ? 'Added. ' : ''), e.why, ''), el('span', { class: 'w' }, dayLabel(String(e.at).slice(0, 10)))); }));
+}
+
+function editor(V, x) {
+  const ppl = ((V.data.bd && V.data.bd.people) || []).map((p) => p.id);
+  const owners = [...new Set([...ppl, ...(x.owner && !ppl.includes(x.owner) ? [x.owner] : []), 'Agent'])];
+  /* an edit saves at once and keeps an undo: the toast puts the old values back (a page press on the same route) */
+  const edit = async (fields, note) => {
+    const prev = {}; Object.keys(fields).forEach((k) => { prev[k] = x[k]; });
+    const r = await write(V, '/api/roadmap-ops/breakdown/edit', { rid: x.rid, fields }, note, x.rid);
+    if (r && r.ok && !r.proposal) say(note || 'Saved.', () => write(V, '/api/roadmap-ops/breakdown/edit', { rid: x.rid, fields: prev }, 'Undone.', x.rid));
+    return r;
+  };
+  const title = el('input', { type: 'text', value: x.title, 'aria-label': 'Title', onChange: (e) => { const v = e.target.value.trim(); if (v && v !== x.title) edit({ title: v }, 'Renamed.'); } });
+  const dep = el('input', { type: 'text', placeholder: 'Jira key, such as CHK-144', 'aria-label': 'Add a dependency on a Jira ticket', 'data-bd-dep': x.rid });
+  return el('div', { class: 'wbed', onClick: (e) => e.stopPropagation() },
+    el('div', { class: 'chips2' }, el('span', { class: 'lb' }, 'Title'), title),
+    el('div', { class: 'chips2' }, el('span', { class: 'lb' }, 'Phase'), PHASES.map((p) => pill(PL[p], x.phase === p, { 'data-bd-phase': p }, () => x.phase !== p && edit({ phase: p }, 'Phase is now ' + PL[p] + '.')))),
+    el('div', { class: 'chips2' }, el('span', { class: 'lb' }, 'Owner'), owners.map((o) => pill(o, x.owner === o, { 'data-bd-owner': o }, () => x.owner !== o && edit({ owner: o }, 'Owner is now ' + o + '.')))),
+    el('div', { class: 'chips2' }, el('span', { class: 'lb' }, 'Points'),
+      c3ib('Fewer points', 'prev', { 'data-bd-pts': '-1', onClick: () => (x.points || 1) > 1 && edit({ points: (x.points || 1) - 1 }) }, 'sm'), el('b', null, String(x.points || 1)),
+      c3ib('More points', 'next', { 'data-bd-pts': '1', onClick: () => edit({ points: (x.points || 1) + 1 }) }, 'sm')),
+    el('div', { class: 'chips2' }, el('span', { class: 'lb' }, 'Waits on'),
+      (x.deps || []).length ? (x.deps || []).map((k) => el('span', { class: 'chip2', title: 'Waits on ' + k }, c3ic('lock', 'sm'), k,
+        el('button', { type: 'button', class: 'chv', 'aria-label': 'Stop waiting on ' + k, 'data-bd-undep': k, onClick: async () => { const r = await write(V, '/api/roadmap-ops/breakdown/dependency', { rid: x.rid, jira: k, remove: true }, 'No longer waits on ' + k + '.', x.rid); if (r && r.ok && !r.proposal) say('No longer waits on ' + k + '.', () => write(V, '/api/roadmap-ops/breakdown/dependency', { rid: x.rid, jira: k }, 'Waits on ' + k + ' again.', x.rid)); } }, c3ic('x', 'sm')))) : el('span', { class: 'dim', style: 'font-size:var(--fs-2)' }, 'Nothing'),
+      dep, c3ib('Add the dependency', 'plus', { 'data-bd-adddep': x.rid, onClick: async () => { const k = dep.value.trim().toUpperCase(); if (!k) return; const r = await write(V, '/api/roadmap-ops/breakdown/dependency', { rid: x.rid, jira: k }, x.title + ' now waits on ' + k + '.', x.rid); if (r && r.ok && !r.proposal) say(x.title + ' now waits on ' + k + '.', () => write(V, '/api/roadmap-ops/breakdown/dependency', { rid: x.rid, jira: k, remove: true }, 'No longer waits on ' + k + '.', x.rid)); } }, 'sm')),
+    el('div', { class: 'chips2' },
+      el('button', { type: 'button', class: 'pill', style: 'color:var(--destructive)', 'data-bd-del': x.rid, onClick: async () => {
+        const r = await write(V, '/api/roadmap-ops/breakdown/delete', { rid: x.rid }, '', x.rid);
+        if (r && r.ok) { if (V.sheet) V.sheet.ui.close(); startUndo(V, x); say('Deleted “' + x.title + '”.', () => write(V, '/api/roadmap-ops/breakdown/undo', { rid: x.rid }, 'Brought back “' + x.title + '”.', null)); }
+      } }, c3ic('x', 'sm'), 'Delete'), el('span', { class: 'dim', style: 'font-size:var(--fs-2)' }, 'Created here, so delete removes it. Undo brings it back for 8 seconds.')));
+}
+function startUndo(V, x) {
+  clearTimeout(V.undoT); V.undo = { rid: x.rid, title: x.title };
+  V.undoT = setTimeout(() => { V.undo = null; V.render(); }, 8000);
+  V.render();
+}
+
+/** The edit sheet of an item (the mockup's wbEd, console3.html line 4427, on the shared sheet): title, phase, owner, points, the Jira tickets it waits on, delete with an undo, and its history. */
+function openItem(V, rid) {
+  const find = () => ((V.data.bd && V.data.bd.items) || []).find((x) => x.rid === rid);
+  const first = find(); if (!first) return;
+  let ui = null;
+  const draw = () => {
+    const x = find(); if (!x) { ui.close(); return; }
+    ui.body.replaceChildren(el('div', { class: 'dpn', 'data-bd-sheet': rid },
+      V.err && V.errAt === rid ? el('div', { class: 'fold w', role: 'alert' }, c3ic('alert', 'sm'), V.err) : null,
+      V.note ? el('div', { class: 'dim mono', style: 'font-size:var(--fs-2)', role: 'status' }, V.note) : null,
+      editor(V, x), el('h4', { style: 'margin:0;font-size:var(--fs-3)' }, 'History'), history(V, rid)));
+  };
+  ui = openSheet({ title: first.title, icon: 'tree', body: el('div'), onClose: () => { if (V.sheet && V.sheet.ui === ui) V.sheet = null; } });
+  V.sheet = { rid, ui, draw };
+  draw();
+}
+
+function row(V, n) {
+  const x = n.item; const open = !!V.open['bd' + n.id]; const has = n.kids.length > 0; const col = collapsed(V, n);
+  const first = x ? evOf(V, x.rid)[0] : null; const o = orig(x ? first && first.by : n.by); const edits = x ? Math.max(0, evOf(V, x.rid).length - 1) : 0;
+  const pr = n.pts[1] ? n.pts[0] / n.pts[1] : 0;
+  const chips = [el('span', { class: 'chip2 mono' }, n.code)];
+  if (n.type !== 'ph') chips.push(el('span', { class: 'chip2', style: 'color:' + o.c, title: 'Who added it' }, c3ic(o.i, 'sm'), (o.l === 'Agent' ? 'Added by agent' : o.l === 'You' ? 'Added by you' : 'Added by ' + o.l)));
+  if (edits) chips.push(el('span', { class: 'chip2', title: 'Last change' }, c3ic('clock', 'sm'), edits + ' edit' + (edits > 1 ? 's' : '') + ', last ' + orig(evOf(V, x.rid).slice(-1)[0].by).l));
+  if (x && x.owner) chips.push(el('span', { class: 'chip2' }, x.owner));
+  chips.push(el('span', { class: 'chip2' }, n.pts[1] + ' pts'));
+  if (x) {
+    chips.push(el('span', { class: 'chip2', style: 'color:' + (PC[x.phase] || 'inherit'), title: 'Phase' }, PL[x.phase] || x.phase), el('span', { class: 'chip2', title: 'Where it comes from' }, SRC[x.source] || x.source));
+    if (x.done) chips.push(el('span', { class: 'chip2', style: 'color:var(--success)' }, 'Done'));
+    (x.deps || []).forEach((k) => chips.push(el('span', { class: 'chip2', title: 'Waits on the Jira ticket ' + k }, c3ic('lock', 'sm'), k)));
+  }
+  const li = el('li', { class: 'nrow', 'data-bd': n.id, tabindex: '0', style: 'margin-left:' + (n.type === 'ini' ? 0 : n.type === 'ph' ? 18 : 36) + 'px', ...(x ? { 'aria-haspopup': 'dialog' } : {}) });
+  const xp = x ? null : el('div', { class: 'xp' }, el('div', { class: 'xi' }, el('div', { class: 'dim', style: 'font-size:var(--fs-2)' }, n.type === 'ini' ? 'Work that lives only in PMOS for this initiative.' : 'Items of this phase.')));
+  if (x) {
+    /* an item is one object: a tap or Enter opens its edit sheet */
+    const openIt = () => openItem(V, x.rid);
+    li.addEventListener('click', (e) => { if (!e.target.closest('.chv,button,a')) openIt(); });
+    li.addEventListener('keydown', (e) => { if (e.target === li && (e.key === 'Enter' || e.key === ' ')) { e.preventDefault(); openIt(); } });
+  } else attachExpand(li, xp, { key: 'bd' + n.id, initial: !!V.open['bd' + n.id], onToggle: (on) => { V.open['bd' + n.id] = on; } });
+  li.append(el('span', { class: 'ki' }, has ? el('button', { type: 'button', class: 'chv', 'aria-expanded': String(!col), 'aria-label': 'Show or hide ' + n.name, 'data-bd-tog': n.id, onClick: (e) => { e.stopPropagation(); V.col[n.id] = !collapsed(V, n); V.render(); } }, c3ic('next', 'sm')) : c3ic('check')),
+    el('div', { class: 'nb' }, el('span', { class: 'tt', style: n.type !== 'it' ? 'font-weight:600' : '', tabindex: '-1' }, n.name), el('div', { class: 'chips' }, chips),
+      n.type !== 'it' ? el('div', { class: 'tk', style: 'margin-top:6px' }, el('u', { style: 'width:' + Math.max(2, pr * 100) + '%;background:var(--success)' })) : null, xp));
+  return [li, ...(has && !col ? n.kids.flatMap((k) => row(V, k)) : [])];
+}
+
+function addForm(V) {
+  const rows = V.ctx.rows || [];
+  const title = el('input', { type: 'text', placeholder: 'What is the work?', 'aria-label': 'What is the work', 'data-bd-new': 'title' });
+  const ini = el('select', { 'aria-label': 'Initiative', 'data-bd-new': 'initiative' }, el('option', { value: '' }, 'No initiative'), rows.map((r) => el('option', { value: r.id, selected: r.id === V.scope }, r.title)));
+  const ph = el('select', { 'aria-label': 'Phase', 'data-bd-new': 'phase' }, PHASES.map((p) => el('option', { value: p }, PL[p])));
+  const src = el('select', { 'aria-label': 'Where it comes from', 'data-bd-new': 'source' }, Object.keys(SRC).map((s) => el('option', { value: s }, SRC[s])));
+  const own = el('input', { type: 'text', placeholder: 'Owner (optional)', 'aria-label': 'Owner', 'data-bd-new': 'owner' });
+  const pts = el('input', { type: 'number', min: '1', step: '1', value: '1', 'aria-label': 'Points', 'data-bd-new': 'points' });
+  return el('div', { class: 'wform', 'data-bd-form': '' }, el('b', { style: 'font-size:var(--fs-3)' }, 'Add a work item'), title, ini, ph, src, own, pts,
+    el('div', { class: 'chips2' },
+      el('button', { type: 'button', class: 'pill', 'data-bd-save': '', onClick: () => {
+        if (!title.value.trim()) { V.err = 'Name the work first.'; V.errAt = null; V.render(); return; }
+        const body = { title: title.value.trim(), phase: ph.value, source: src.value, ...(own.value.trim() ? { owner: own.value.trim() } : {}), points: Math.max(1, Number(pts.value) || 1), ...(ini.value ? { initiative: ini.value } : {}) };
+        V.form = false; write(V, '/api/roadmap-ops/breakdown/add', body, 'Added “' + body.title + '”.', null);
+      } }, c3ic('check', 'sm'), 'Add it'),
+      el('button', { type: 'button', class: 'pill', onClick: () => { V.form = false; V.err = ''; V.render(); } }, c3ic('x', 'sm'), 'Cancel')));
+}
+
+function capacityCard(V) {
+  const bd = V.data.bd || {}; const people = bd.people || [];
+  const all = (bd.capacity || []).filter((r) => r.person && isOwnerPerson(r.person));
+  const rows = all.filter((r) => people.some((p) => p.id === r.person) || r.pmos_points > 0);   // a row for someone with no points per week and no open work is Jira load only
+  const un = (bd.capacity || []).find((r) => r.unassigned);
+  const setPpw = (id, cur, d) => write(V, '/api/roadmap-ops/people', { id, points_per_week: Math.max(0, cur + d) }, 'Points per week for ' + id + ': ' + Math.max(0, cur + d) + '.', null);
+  const jira = all.filter((r) => r.jira_points > 0).map((r) => r.person + ' ' + r.jira_points + ' pts');
+  return card('user', 'Capacity for PMOS work', 'next 2 weeks, points open of points available',
+    ...rows.map((r) => {
+      const ppw = (people.find((p) => p.id === r.person) || {}).points_per_week || r.capacity / 2; const pct = r.capacity ? Math.min(100, Math.round(r.pmos_points / r.capacity * 100)) : 0;
+      const colr = r.over ? 'var(--destructive)' : r.pmos_points > r.capacity * 0.85 ? 'var(--warning)' : 'var(--success)';
+      return el('div', { class: 'chips2', 'data-bd-cap': r.person, style: 'justify-content:space-between;gap:10px' }, el('span', { style: 'width:60px' }, r.person), el('div', { class: 'tk', style: 'flex:1' }, el('u', { style: 'width:' + Math.max(2, pct) + '%;background:' + colr })),
+        el('span', { class: 'mono dim', style: 'font-size:var(--fs-2);' + (r.over ? 'color:var(--destructive)' : '') }, r.pmos_points + ' of ' + r.capacity),
+        c3ib('Less capacity for ' + r.person, 'prev', { onClick: () => setPpw(r.person, ppw, -1) }, 'sm'), c3ib('More capacity for ' + r.person, 'next', { onClick: () => setPpw(r.person, ppw, 1) }, 'sm'));
+    }),
+    rows.length ? null : el('div', { class: 'fold' }, c3ic('moon', 'sm'), 'No one has points per week yet, so there is no capacity to compare.'),
+    rows.length ? el('div', { class: 'dim', style: 'font-size:var(--fs-2)' }, 'Points per person per week: ' + rows.map((r) => r.person + ' ' + ((people.find((p) => p.id === r.person) || {}).points_per_week || r.capacity / 2)).join(', ') + '. Use the arrows to change them.') : null,
+    un ? el('div', { class: 'dim', style: 'font-size:var(--fs-2)' }, un.pmos_points + ' points have no owner yet.') : null,
+    el('div', { class: 'dim', style: 'font-size:var(--fs-2)' }, c3ic('lock', 'sm'), ' Engineering load comes from Jira and is read-only here: ' + (jira.join(', ') || 'none') + '.'));
+}
+
+function render(V) {
+  const bd = V.data.bd; const items = ((bd && bd.items) || []).filter((x) => !V.scope || x.initiative === V.scope);
+  const agents = items.filter((x) => { const f = evOf(V, x.rid)[0]; return f && orig(f.by).l === 'Agent'; }).length;
+  const done = items.filter((x) => x.done).length;
+  const head = !bd ? { icon: 'tree', h: V.data.err || 'Reading the breakdown', s: 'Work that lives only in PMOS: discovery, design and launch.', ring: [0, 1] }
+    : { icon: 'tree', h: items.length ? items.length + ' work item' + (items.length === 1 ? '' : 's') + '. Agents added ' + agents + ', you added ' + (items.length - agents) : 'No work items yet',
+      s: 'Work that lives only in PMOS: discovery, design and launch. Engineering work is in Tickets.', ring: [done, items.length] };
+  const T = tree(V);
+  const list = el('ul', { class: 'list wbs' }, T.length ? T.flatMap((n) => row(V, n)) : [emptyRow('check', bd ? 'No work items yet. Add one with the plus.' : 'Reading the breakdown.')]);
+  const left = el('section', { class: 'card sect', 'data-bd-list': '' },
+    el('div', { class: 'sh2' }, el('h2', null, c3ic('tree', 'sm'), 'Work breakdown ', el('span', { class: 'bdg g' }, String(items.length))),
+      el('span', { class: 'chips2' }, V.scope ? null : el('span', { class: 'dim', style: 'font-size:var(--fs-2)' }, 'pick an initiative to add'), c3ib('Add a work item', 'plus', { 'data-bd-add': '', 'aria-expanded': String(!!V.form), onClick: () => { V.form = !V.form; V.err = ''; V.render(); } }, 'sm'))),
+    V.form ? addForm(V) : null,
+    V.note ? el('div', { class: 'dim mono', style: 'font-size:var(--fs-2)', role: 'status', 'data-bd-note': '' }, V.note) : null,
+    V.undo ? el('div', { class: 'fold', role: 'status', 'data-bd-undo': '' }, c3ic('undo', 'sm'), 'Deleted “' + V.undo.title + '”. ',
+      el('button', { type: 'button', class: 'chip2 lk', onClick: async () => { const u = V.undo; V.undo = null; clearTimeout(V.undoT); await write(V, '/api/roadmap-ops/breakdown/undo', { rid: u.rid }, 'Brought back “' + u.title + '”.', null); } }, c3ic('undo', 'sm'), 'Undo')) : null,
+    V.err && !V.errAt ? el('div', { class: 'fold w', role: 'alert' }, c3ic('alert', 'sm'), V.err) : null,
+    list,
+    el('div', { class: 'pgl' }, el('span', { style: 'color:var(--acc)' }, 'you'), el('span', { style: 'color:var(--purple)' }, 'agent'), el('span', null, 'teammates in grey'), el('span', null, 'tap a row for its history')));
+
+  const evs = ((bd && bd.events) || []).filter((e) => !V.scope || items.some((x) => x.rid === e.rid));
+  const adds = evs.filter((e) => e.kind === 'add' && items.some((x) => x.rid === e.rid)); const chg = evs.filter((e) => e.kind !== 'add');
+  const cnt = (l) => { const o = { You: 0, Agent: 0, Team: 0 }; l.forEach((e) => { o[bucket(e.by)]++; }); return o; };
+  const A = cnt(adds); const C = cnt(chg); const mxA = Math.max(1, adds.length); const mxC = Math.max(1, chg.length);
+  const day0 = evs.length ? String(evs[0].at).slice(0, 10) : '';
+  let feed = evs.filter((e) => e.kind !== 'add' || String(e.at).slice(0, 10) !== day0); if (!feed.length) feed = evs;
+  feed = feed.slice().reverse().slice(0, 6);
+  const right = [
+    capacityCard(V),
+    card('user', 'Who shaped the plan', '', el('div', { class: 'dim', style: 'font-size:var(--fs-2)' }, 'Items added'),
+      hBars([['You', A.You / mxA, 'var(--acc)', A.You], ['Agent', A.Agent / mxA, 'var(--purple)', A.Agent], ['Team', A.Team / mxA, 'var(--muted-foreground)', A.Team]]),
+      el('div', { class: 'dim', style: 'font-size:var(--fs-2)' }, 'Changes made'),
+      hBars([['You', C.You / mxC, 'var(--acc)', C.You], ['Agent', C.Agent / mxC, 'var(--purple)', C.Agent], ['Team', C.Team / mxC, 'var(--muted-foreground)', C.Team]])),
+    card('clock', 'Latest changes', 'who, what and why', feed.length ? el('ul', { class: 'hx' }, feed.map((e) => { const o = orig(e.by); return el('li', null, el('span', { class: 'chip2', style: 'color:' + o.c }, c3ic(o.i, 'sm'), o.l),
+      el('span', null, (e.title || (((bd.items || []).find((x) => x.rid === e.rid) || {}).title) || e.rid) + ': ' + (e.kind === 'add' ? 'added' : e.kind === 'delete' ? 'deleted' : 'edited'), el('small', null, e.why)), el('span', { class: 'w' }, dayLabel(String(e.at).slice(0, 10)))); })) : el('div', { class: 'fold' }, c3ic('moon', 'sm'), 'No changes are recorded yet.')),
+    card('shield', 'Rules', '', el('ul', { class: 'chgl' },
+      el('li', { class: 'ok' }, c3ic('check', 'sm'), el('span', null, 'Every item records who changed it and why.')),
+      el('li', { class: 'ok' }, c3ic('check', 'sm'), el('span', null, 'Agent additions are proposals until you accept them.')),
+      el('li', { class: 'warn' }, c3ic('alert', 'sm'), el('span', null, 'A fourth scope change re-baselines the plan.')))),
+  ];
+  frame(V, { head, left: [left], right });
+}
+
+const view = makeView('breakdown', { init: (V) => { V.dispose = () => { if (V.sheet) closeSheet(); clearTimeout(V.undoT); }; return load(V); }, render });
+export const mount = view.mount;
+export const dispose = view.dispose;

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

@@ -0,0 +1,278 @@
+/* pm/c3-brief.js — the Briefing column below the deck (console3.html vBrief, line 1465 on) and what its rows DO.
+ *   needRow(n, i, ctx)         a "Needs you" row (needRow2, line 2345): a click opens its case file in place (the .xp panel), a swipe right
+ *                              or the key e takes the suggested move, a swipe left or n replies or defers, the keys j k Enter move and open.
+ *   belowLine(rows, fn, kept)  the "+4 below the line" fold that holds the needs past the fifth, and the "kept out" line
+ *   reviewSection(r)           "Review": the agent's drafts, one row each (draftRow2, line 2349): a click opens the draft and what it quotes,
+ *                              approving is a slide or a swipe after the draft was opened, "approve N skims" marks the low-risk ones
+ *   handledRow(h)              "6 handled for you": a fold with what the agent did and how to undo it (handled, hxHtml)
+ *   trustCard(t) / footLine(f) "Data you can lean on" and the line under both columns
+ *   caseFile(model, opts)      the shared case file (c3-case.js), with the confidence figure left out when the data carries none
+ *   toast(msg, undo)           the mockup's toast (line 1166): 4.2 s, an Undo button
+ * Trust rules. A row acts only through a route that exists (POST /api/pm-items done or move, with the row's own item id). Anything else is
+ * a disabled control that says why. Anything outward only ever queues a draft: its slide is disabled, "no channel connected" (c3-case.js
+ * slideFor). The demo (c3-demo-brief-ix.js) turns on `BX.sim` and plugs in an agent: it simulates the other results in memory, and its
+ * writes are answered by the fetch wrapper in c3-demo.js. Real mode has neither, so a real row with no item id stays a read-only case. */
+import { el } from './dom.js';
+import { pmPost } from './http.js';
+import { c3ic } from './pm-work-view.js';
+import { toast } from './c3-toast.js';
+import { renderCase } from './c3-case.js';
+import { makeXp, attachExpand } from './c3-expand.js';
+import { attachSwipe } from './c3-swipe.js';
+import { needCaseOf, draftCaseOf, rawOption, registry, NO_ROUTE } from './briefing-model.js';
+
+/* ── state: what is open, picked, seen, done. One store, keyed by item key, so a re-read of the briefing does not lose it. ───────────── */
+export const BX = { open: new Set(), pick: {}, seen: {}, dst: {}, gone: {}, hundo: {}, cdone: {}, sim: false, agent: null };
+export const setSim = (on) => { BX.sim = !!on; };
+/** The demo plugs its agent in here: { has(key), info(key) -> { label }, state(key) -> 'idle'|'busy'|'out', mount(key, host, api), run(key, intent, text), tray(key) }. */
+export const setAgent = (a) => { BX.agent = a || null; };
+
+export const rowApi = new WeakMap();   // row element -> { kind, key, right(), left(), open() }
+const reduced = () => typeof matchMedia === 'function' && matchMedia('(prefers-reduced-motion: reduce)').matches;
+const small = 'font-size:var(--fs-2)';
+
+/* ── an avatar: a button that opens the person sheet when the person is known (the mockup's `av`, line 1058), else a plain chip ───────────── */
+export const hooks = { person: null, go: null };
+export function avatar(initial, name) {
+  const people = registry('people') || {};
+  const k = Object.keys(people).find((q) => (name && people[q].n === name) || (!name && people[q].n[0] === initial) || (name && name[0] === initial && people[q].n === String(name).split(' ')[0]));
+  if (!k) return el('span', { class: 'av', title: name || initial }, initial);
+  const p = people[k];
+  return el('button', { type: 'button', class: 'av', 'data-a': 'person', 'data-k': k, title: p.n + ' · ' + p.role, 'aria-label': p.n + ', ' + p.role, onclick: (e) => { e.stopPropagation(); if (hooks.person) hooks.person(k); } }, initial);
+}
+
+/* ── the toast: one shared module (c3-toast.js), re-exported so the views that import it from here keep working ── */
+export { toast };
+
+/* ── the case file ──────────────────────────────────────────────────────────────────────────────────────────────────────────── */
+const hasConf = (m) => !!m && ((m.confidence !== undefined && m.confidence !== null) || (m.conf !== undefined && m.conf !== null));
+function noConf(root) {   // c3-case.js prints "Recommended · 0%" for a case with no figure; a card the engine sends without one says only "Recommended"
+  root.querySelectorAll('.opt.rec .rk').forEach((rk) => rk.replaceChildren(c3ic('spark', 'sm'), 'Recommended'));
+  root.querySelectorAll('.opt.rec .conf').forEach((n) => n.remove());
+}
+export function caseFile(model, opts = {}) {
+  const fig = hasConf(model);
+  const root = renderCase(model, { onGo: (g) => { if (hooks.go) hooks.go(g); }, ...opts, onPick: (id, o) => { if (!fig) noConf(root); if (opts.onPick) opts.onPick(id, o); } });
+  if (!fig) noConf(root);
+  return root;
+}
+
+const post = (path, body) => pmPost(path, body).catch(() => ({ ok: false }));
+function leaveRow(row, then) {
+  if (reduced()) { then(); return; }
+  row.style.maxHeight = row.offsetHeight + 'px'; row.style.overflow = 'hidden';
+  row.style.transition = 'opacity .2s,transform .2s,max-height .26s .12s,padding .26s .12s,border-width .26s .12s';
+  void row.offsetHeight; row.classList.add('leave'); setTimeout(then, 340);
+}
+const unleave = (row) => { row.classList.remove('leave'); row.style.maxHeight = ''; row.style.overflow = ''; row.style.transition = ''; };
+
+/* ── a "Needs you" row ──────────────────────────────────────────────────────────────────────────────────────────────────────── */
+const fuse = (left, col) => el('div', { class: 'chips2', style: 'margin-top:6px;gap:8px' }, el('div', { class: 'fuse' }, el('i', { style: 'width:' + Math.round(left.pct * 100) + '%;background:' + col })),
+  el('span', { class: 'mono', style: 'font-size:var(--fs-1);color:' + col }, left.text));
+
+/** The case of a row once an agent move exists: the move leads as the recommended option (the mockup's agDecor, line 5126). */
+function withAgent(base, label) {
+  const mv = { id: 'agmv', l: 'Let the agent act: ' + label, rec: 1, fx: [['spark', 'The suggested move, taken by an agent', 'ok'], ['shield', 'Inside the repo; outward only as a draft', 'ok']] };
+  const rest = (base.opts || base.options || []).map((q) => ({ ...q, rec: 0, recommended: false }));
+  return { ...base, opts: [mv, ...rest], options: undefined, cta: 'Slide to let the agent act' };
+}
+
+export function needRow(n, i, ctx = {}) {
+  const key = String(n.key || i);
+  const ag = BX.agent && BX.agent.has(key) ? BX.agent.info(key) : null;
+  const routed = !!n.itemId;                      // done and later go through the pm-items routes, with this id
+  const hot = n.p === 'P1'; const col = n.left ? (n.left.tone === 'warn' ? 'var(--warning)' : 'var(--acc)') : null;
+  const base0 = needCaseOf(n);
+  /* an option is carried out by a route (done or later, with the row's item id), by the demo's simulation, or by the agent; any other option is not available */
+  const gate = (m) => ({ ...m, options: undefined, opts: (m.opts || m.options || []).map((q) => ({ ...q, outward: !!q.outward || !(q.id === 'agmv' || routed || BX.sim) })) });
+  let xi = null; let row = null; let xp = null; let exp = null;
+
+  const doRoute = (act, msg) => {
+    if (!routed) { toast('Not available here: no route carries this out for this item.'); return; }
+    const gonePos = { parent: row.parentNode, next: row.nextSibling };
+    const call = act === 'done' ? post('/api/pm-items/done', { id: n.itemId }) : post('/api/pm-items/move', { id: n.itemId, list: 'later' });
+    BX.gone[key] = true;
+    leaveRow(row, () => { row.remove(); if (ctx.changed) ctx.changed(); });
+    call.then((r) => { if (r && r.ok === false) { delete BX.gone[key]; unleave(row); if (!row.isConnected && gonePos.parent) gonePos.parent.insertBefore(row, gonePos.next); if (ctx.changed) ctx.changed(); toast('That did not go through' + (r.error ? ': ' + r.error : '.')); } });
+    toast(msg || (act === 'done' ? 'Done' : 'Back Mon 09:00'), () => {
+      delete BX.gone[key];
+      post(act === 'done' ? '/api/pm-items/reopen' : '/api/pm-items/move', act === 'done' ? { id: n.itemId } : { id: n.itemId, list: 'triage' });
+      unleave(row); if (gonePos.parent && !row.isConnected) gonePos.parent.insertBefore(row, gonePos.next && gonePos.next.isConnected ? gonePos.next : null);
+      if (ctx.changed) ctx.changed();
+    });
+  };
+  const right = () => {
+    if (ag) { if (BX.agent.state(key) === 'busy') toast('A session is already working on this.'); else BX.agent.run(key, 'move'); return; }
+    doRoute('done');
+  };
+  const left = () => {
+    if (ag) { if (BX.agent.state(key) === 'busy') toast('A session is already working on this.'); else BX.agent.tray(key); return; }
+    doRoute('defer');
+  };
+  const choose = ({ option }) => {
+    if (option.id === 'agmv') { if (ag && BX.agent.state(key) !== 'busy') toast('The agent is working on it. Anything outward stays a draft for your slide.'); right(); return; }
+    const raw = rawOption(base0, option.id) || {};
+    doRoute(raw.do === 'defer' ? 'defer' : 'done', raw.msg);
+  };
+
+  const api = { kind: 'need', key, right, left, open: () => exp && exp.open(), get row() { return row; }, redraw: () => build() };
+  const build = () => {
+    const st = ag ? BX.agent.state(key) : 'idle';
+    let m = gate(base0);
+    if (ag && st === 'idle') m = gate(withAgent(base0, ag.label));
+    else if (st === 'busy') m = { ...m, opts: [], options: undefined };
+    else if (ag && st === 'out') m = { ...m, opts: (m.opts || m.options || []).filter((q) => q.id !== 'agmv') };
+    const c = caseFile({ ...m, id: base0.id || 'need:' + key }, { picked: BX.pick[key], onPick: (id) => { BX.pick[key] = id; }, onConfirm: choose });
+    if (st === 'busy') c.classList.add('ag-busy');
+    if (ag) { const host = el('div', { class: 'c3ag', 'data-ag': key }); const sit = c.querySelector('.sit'); if (sit) sit.after(host); else c.prepend(host); BX.agent.mount(key, host, api); }
+    if (xi) xi.replaceChildren(c);
+    return c;
+  };
+  const c0 = build();
+  xp = makeXp(c0); xi = xp.firstChild;
+
+  const chips = [ag ? el('span', { class: 'chip2', style: 'gap:4px', title: 'Swipe right to let the agent act' }, c3ic('spark', 'sm'), 'agent move') : null,
+    n.p ? el('span', { class: 'fl ' + n.p.toLowerCase() }, n.p) : null, n.time ? el('span', { class: 'chip2' }, c3ic('clock', 'sm'), n.time) : null,
+    n.who ? avatar(n.who) : null, n.branch ? el('span', { class: 'chip2' }, c3ic('branch', 'sm'), n.branch) : null,
+    n.old ? el('span', { class: 'st warn' }, c3ic('clock', 'sm'), 'old') : null, n.src ? el('span', { class: 'tag' }, n.src) : null,
+    ag ? el('span', { class: 'st c3strip', 'data-sxs': key }) : null];
+  const act = ag || routed;
+  const sg = el('span', { class: 'sg', title: ag ? 'Drag right: the agent acts. Drag left: reply.' : routed ? 'Suggested: later (drag left)' : 'Not available here: no route carries a swipe out for this item.' },
+    el('span', { class: 'g l' + (ag ? '' : '') }, c3ic(ag ? 'reply' : 'moon')), el('span', { class: 'g r' + (ag || !routed ? ' y' : '') }, c3ic(ag ? 'spark' : 'check')));
+  row = el('li', { class: 'nrow', 'data-row': '', 'data-id': key, 'data-needs-row': key, 'data-a': 'expand' },
+    el('span', { class: 'ki' + (hot ? ' hot' : ''), title: n.kind, style: n.color ? 'color:' + n.color : null }, c3ic(n.icon || 'check')),
+    el('div', { class: 'nb' }, el('span', { class: 'tt' }, n.headline), n.left ? fuse(n.left, col) : null, el('div', { class: 'chips' }, ...chips.filter(Boolean)), xp), sg);
+  exp = attachExpand(row, xp, { key: 'need-' + key, initial: BX.open.has(key), onToggle: (on) => { if (on) BX.open.add(key); else BX.open.delete(key); } });
+  attachSwipe(row, { onRight: right, onLeft: left, labelRight: ag ? 'agent acts' : 'done', labelLeft: ag ? 'reply' : 'later', iconRight: ag ? 'spark' : 'check', iconLeft: ag ? 'reply' : 'moon', disabled: () => !act });
+  if (ag) { row.setAttribute('data-ag', '1'); }
+  rowApi.set(row, api);
+  return row;
+}
+
+/* ── Review: a draft row and the section ───────────────────────────────────────────────────────────────────────────────────── */
+const LEVEL = ['Read carefully', 'Read', 'Skim'];
+function draftRow(x, ctx = {}) {
+  const id = String(x.id); const lv = x.lvl;
+  const col = lv === 0 ? 'var(--destructive)' : lv === 1 ? 'var(--warning)' : null;
+  const dots = x.n ? el('span', { class: 'src-dots', title: x.n + ' sources' + (x.old ? ', ' + x.old + ' old' : '') }, ...Array.from({ length: Math.min(x.n, 5) }, (_, q) => el('i', { class: q >= x.n - (x.old || 0) ? 'old' : '' }))) : el('span', { class: 'chip2' }, x.basis);
+  const chips = [x.out ? el('span', { class: 'chip2', title: 'Goes outside' }, c3ic('out', 'sm'), 'out') : null,
+    x.to ? avatar(x.to, x.toName ? x.toName.split(' ')[0] : null) : null,
+    ...(x.docs || []).map((d) => el('span', { class: 'chip2 hide-ph', title: 'Document' }, c3ic(d, 'sm'))), dots,
+    x.conflict ? el('span', { class: 'st warn', title: 'Jira and the PRD disagree on the ship date' }, c3ic('alert', 'sm'), 'dates differ') : null,
+    x.sess ? el('span', { class: 'chip2 hide-ph', title: 'A session wrote this' }, c3ic('branch', 'sm')) : null];
+  let row = null; let exp = null; const acts = el('div', { class: 'acts', style: 'position:static' });
+  const set = (s, msg) => {
+    BX.dst[id] = s; draw();
+    toast(msg, () => { delete BX.dst[id]; draw(); if (ctx.changed) ctx.changed(); });
+    if (ctx.changed) ctx.changed();
+  };
+  /* marking a draft ready or sending it back has no route on the server; the demo simulates it, real mode cannot */
+  const ready = () => { if (!BX.sim) { toast('Not available here: no route marks a draft ready.'); return; } set('ready', 'Marked ready. Nothing was sent or changed in any tool.'); };
+  const back = () => { if (!BX.sim) { toast('Not available here: no route sends a draft back.'); return; } set('back', 'Sent back'); };
+  const right = () => { if (BX.dst[id]) return; if (!BX.seen[id]) { toast('Open the draft first. Approving without reading is how errors go out.'); return; } ready(); };
+  const left = () => { if (BX.dst[id]) return; back(); };
+  const model = draftCaseOf(x);
+  const gated = { ...model, opts: (model.opts || model.options || []).map((q) => ({ ...q, outward: q.outward || !BX.sim })), outboxReason: BX.sim ? model.outboxReason : NO_ROUTE };
+  const c = caseFile({ ...gated, id: 'draft:' + id }, { picked: BX.pick['d' + id], onPick: (o) => { BX.pick['d' + id] = o; }, onConfirm: ({ option }) => { const raw = rawOption(model, option.id) || {}; if (raw.do === 'back') back(); else ready(); } });
+  const xp = makeXp(c);
+  function draw() {
+    const s = BX.dst[id];
+    acts.replaceChildren(...(s ? [el('span', { class: 'st ok' }, c3ic('check', 'sm'), s === 'ready' ? 'ready' : 'sent back'),
+      el('span', { class: 'qa' }, el('button', { type: 'button', class: 'ib sm', title: 'Undo', 'aria-label': 'Undo', onclick: (e) => { e.stopPropagation(); delete BX.dst[id]; draw(); if (ctx.changed) ctx.changed(); } }, c3ic('undo', 'sm')))] : [c3ic('next', 'sm', 'chev')]));
+    const sgn = row && row.querySelector(':scope > .sg'); if (sgn) sgn.hidden = !!s;
+  }
+  const sg = x.rec === 'o' ? el('span', { class: 'sg', title: 'Read it first' }, el('span', { class: 'g y' }, c3ic('eye')))
+    : el('span', { class: 'sg', title: 'Suggested: approve (drag right)' }, el('span', { class: 'g l' }, c3ic('undo')), el('span', { class: 'g r y' }, c3ic('check')));
+  row = el('li', { class: 'drow', 'data-row': '', 'data-id': id, 'data-a': 'peek', 'data-draft-row': id },
+    el('span', { class: 'ki', title: LEVEL[lv], style: col ? 'color:' + col : null }, c3ic(lv === 0 ? 'alert' : 'eye')),
+    el('div', { class: 'nb' }, el('span', { class: 'tt' }, x.t), el('div', { class: 'chips' }, ...chips.filter(Boolean)), xp), acts, sg);
+  exp = attachExpand(row, xp, { key: 'draft-' + id, initial: BX.open.has('d' + id), onToggle: (on) => { if (on) { BX.open.add('d' + id); BX.seen[id] = 1; } else BX.open.delete('d' + id); } });
+  attachSwipe(row, { onRight: right, onLeft: left, labelRight: 'ready', labelLeft: 'send back', iconRight: 'check', iconLeft: 'undo', disabled: () => !!BX.dst[id] });
+  draw();
+  rowApi.set(row, { kind: 'draft', key: id, right, left, open: () => exp.open(), ready, set });
+  return row;
+}
+
+export function reviewSection(r) {
+  const rows = r.rows.slice().sort((a, b) => a.lvl - b.lvl);
+  const ul = el('ul', { class: 'list', role: 'list' });
+  const skimBtn = el('button', { type: 'button', class: 'chip2 lk', 'data-a': 'skimready', title: BX.sim ? 'Mark every low-risk draft ready. Nothing is sent.' : 'Not available here: no route marks a draft ready.',
+    onclick: () => {
+      if (!BX.sim) { toast('Not available here: no route marks a draft ready.'); return; }
+      const sk = rows.filter((x) => x.lvl === 2 && !BX.dst[String(x.id)]);
+      sk.forEach((x) => { BX.dst[String(x.id)] = 'ready'; });
+      redraw();
+      toast(sk.length + ' low-risk drafts marked ready. Nothing was sent.', () => { sk.forEach((x) => { delete BX.dst[String(x.id)]; }); redraw(); });
+    } }, c3ic('eye', 'sm'), 'approve ' + r.skims + ' skims');
+  const redraw = () => ul.replaceChildren(...rows.map((x) => draftRow(x, { changed: update })));
+  const update = () => { const n = rows.filter((x) => x.lvl === 2 && !BX.dst[String(x.id)]).length; skimBtn.hidden = n < 2; skimBtn.lastChild.textContent = 'approve ' + n + ' skims'; };
+  redraw(); update();
+  return el('section', { class: 'card sect', 'data-c3pg': 'review', 'aria-label': 'Review' },
+    el('div', { class: 'sh2' }, el('h2', null, c3ic('spark', 'sm'), 'Review'),
+      el('span', { class: 'chips2' }, r.working ? el('span', { class: 'chip2', title: 'Agents working now' }, el('span', { class: 'dots' }, el('i'), el('i'), el('i')), r.working + ' working') : null, r.skims > 1 ? skimBtn : null)), ul);
+}
+
+/* ── folds: the mockup's `.xp` open and close, for the fold buttons (data-a=hand, more, trust) ────────────────────────────── */
+function fold(btn, body, onToggle) {
+  const xp = makeXp(body);
+  btn.addEventListener('click', () => { const on = !xp.classList.contains('open'); xp.classList.toggle('open', on); btn.setAttribute('aria-expanded', String(on)); if (onToggle) onToggle(on); });
+  return xp;
+}
+
+export function belowLine(rows, drawRow, kept) {
+  const out = [];
+  if (rows.length) {
+    const body = el('ul', { class: 'list', role: 'list' }, ...rows.map(drawRow));
+    const btn = el('button', { type: 'button', class: 'rowbtn', style: 'padding:8px 2px;font-size:var(--fs-3)', 'aria-expanded': 'false', 'data-a': 'more', 'data-c3pg': 'below-line' },
+      el('span', { class: 'chips2 dim' }, c3ic('next', 'sm', 'chev'), '+' + rows.length + ' below the line'));
+    out.push(btn, fold(btn, body));
+  }
+  if (kept) out.push(el('div', { class: 'chips2 dim', style: 'font-size:var(--fs-2);padding:6px 2px 0', 'data-c3pg': 'kept-out' }, c3ic('filter', 'sm'), kept));
+  return out;
+}
+
+/* ── handled for you: a fold, each row opens to four lines, and an undo ────────────────────────────────────────────────────── */
+export function handledRow(h) {
+  const total = h.rows.length;
+  const count = el('b', { style: 'font-size:var(--fs-3)' }, total + ' handled for you');
+  const recount = () => { count.textContent = h.rows.filter((_, i) => !BX.hundo[i]).length + ' handled for you'; };
+  const list = el('ul', { class: 'list', role: 'list' }, ...h.rows.map((x, i) => {
+    const d = el('div', { class: 'hx' }, ...x.d.map((t, q) => el('div', null, c3ic(['bolt', 'shield', 'check', 'undo'][q], 'sm'), el('span', null, t))));
+    const xp = makeXp(d);
+    const undo = el('button', { type: 'button', class: 'ib sm', title: x.d[3] ? 'Undo: ' + x.d[3] : 'Undo', 'aria-label': 'Undo: ' + x.t, 'data-a': 'hundo', disabled: !BX.sim,
+      onclick: (e) => {
+        e.stopPropagation();
+        BX.hundo[i] = !BX.hundo[i]; row.classList.toggle('undone', !!BX.hundo[i]); recount();
+        if (BX.hundo[i]) toast('Undone: ' + x.t, () => { BX.hundo[i] = false; row.classList.remove('undone'); recount(); });
+      } }, c3ic('undo', 'sm'));
+    const row = el('li', { class: 'nrow hrow' + (BX.hundo[i] ? ' undone' : ''), 'data-row': '', 'data-a': 'expand', 'data-handled-row': String(i) },
+      el('span', { class: 'ki', style: 'width:26px;height:26px' }, c3ic('spark', 'sm')), el('div', { class: 'nb', style: 'font-size:var(--fs-3)' }, x.t, xp), el('div', { class: 'qa' }, undo));
+    attachExpand(row, xp, { key: 'handled-' + i });
+    return row;
+  }));
+  const btn = el('button', { type: 'button', class: 'rowbtn', 'aria-expanded': 'false', 'data-a': 'hand' },
+    el('span', { class: 'chips2' }, c3ic('bolt', 'sm'), count, el('span', { class: 'dim', style: 'font-size:var(--fs-3)' }, h.note)), c3ic('next', 'sm', 'chev'));
+  recount();
+  return el('section', { class: 'card sect', 'data-c3pg': 'handled' }, btn, fold(btn, list));
+}
+
+export function trustCard(t) {
+  const body = el('div', { style: 'padding:0 14px 12px;display:grid;gap:8px' }, el('div', { class: 'chips2 st warn', style: small }, c3ic('clock', 'sm'), t.stale),
+    ...t.items.map((c) => el('div', { class: 'card', style: 'padding:10px;gap:6px;box-shadow:none' }, el('b', { style: 'font-size:var(--fs-3)' }, c.fact),
+      el('div', { class: 'chips2' }, el('span', { class: 'cmpill win' }, c.win), el('span', { class: 'mono dim' }, '≠'), el('span', { class: 'cmpill' }, c.lose)),
+      el('div', { class: 'chips2 st ok', style: small }, c3ic('check', 'sm'), 'fix drafted. It is in Review.'))));
+  const btn = el('button', { type: 'button', class: 'rowbtn', style: 'padding:12px 14px', 'aria-expanded': 'false', 'data-a': 'trust' },
+    el('span', { class: 'chips2' }, c3ic('shield'), el('b', { style: 'font-size:var(--fs-3)' }, 'Data you can lean on')),
+    el('span', { class: 'chips2' }, el('span', { class: 'chip2' }, t.fresh), el('span', { class: 'st warn' }, c3ic('alert', 'sm'), t.items.length + ' mismatches'), el('span', { class: 'st ok' }, c3ic('check', 'sm'), 'fixes drafted'), c3ic('next', 'sm', 'chev')));
+  return el('section', { class: 'card', style: 'gap:0;padding:0', 'data-c3pg': 'trust' }, btn, fold(btn, body));
+}
+
+export const footLine = (f) => el('div', { class: 'chips2 dim', style: 'font-size:var(--fs-2);justify-content:space-between', 'data-c3pg': 'foot' }, el('span', null, f.left), el('span', { class: 'mono hide-ph' }, f.right));
+
+/* Reflect lens (console3.html vBrief, line 1470): the "Needs you" panel is titled "Carries over", with the same rows and count. */
+export function setNeedsTitle(box, reflect) {
+  const h = box && box.querySelector('.sh2 h2'); if (!h) return;
+  const t = [...h.childNodes].find((n) => n.nodeType === 3);
+  if (t) t.textContent = (reflect ? 'Carries over' : 'Needs you') + ' ';
+  box.setAttribute('aria-label', reflect ? 'Carries over' : 'Needs you');
+}