create-pmos 0.123.0 → 0.125.0

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

@@ -0,0 +1,141 @@
+/* pm/c3-terminal-results.js — what a finished run shows, by result type (agent-surfaces.html: claims, hero, fileBox, deck, table, diagram, draft).
+ *   resultNodes(result, ctx)  result = the contract's folded result ({ type, ...value }); returns the nodes under the headline.
+ * Everything from a run goes in as a text node (el() never takes HTML). An svg is never inserted: a diagram is drawn from its source.
+ * ctx = { ui, redraw, canShare }: ui is the per-run state kept outside the render (the deck slide, the table sort), redraw repaints the card. */
+import { el } from './dom.js';
+import { ic } from './c3-terminal-icons.js';
+import { normalizeCase, slideFor } from './c3-case.js';
+
+const NS = 'http://www.w3.org/2000/svg';
+const LAB = { fact: ['l-fact', 'fact'], estimate: ['l-est', 'estimate'], assumption: ['l-ass', 'assumption'], reported: ['l-rep', 'reported'] };
+const NO_CHANNEL = 'No channel is connected, so this stays a draft. Nothing is sent.';
+
+/** The label chip of one claim: its basis, or "unlabelled" when the contract marked it not ok. */
+export function labelChip(c) {
+  const l = c && c.ok !== false && LAB[c.basis] ? LAB[c.basis] : ['l-unl', 'unlabelled'];
+  return el('span', { class: 'lab ' + l[0], title: c && c.ok === false ? 'No valid label. It cannot back a message.' : null }, l[1]);
+}
+export function claimsList(list) {
+  return el('ul', { class: 'c3t-claims', role: 'list' }, (list || []).map((c) => el('li', null, labelChip(c), el('span', null, c.text, (c.source || c.range) ? el('span', { class: 'dim mono c3t-src' }, ' ' + (c.source || c.range)) : null))));
+}
+
+/** The hero of a card.update (the mockup's three: a promise-versus-forecast line, a quote, a CI strip). Anything else is not drawn. */
+export function heroNode(h) {
+  if (!h || typeof h !== 'object') return null;
+  if (h.t === 'tl' && Number.isFinite(+h.p) && Number.isFinite(+h.f)) {
+    const pos = (v) => ((v - 1) / 29 * 100).toFixed(1) + '%';
+    return el('div', { class: 'c3t-tl', role: 'img', 'aria-label': 'Promise ' + h.p + ' Nov, forecast ' + h.f + ' Nov' }, el('div', { class: 'axis' }),
+      +h.f > +h.p ? el('div', { class: 'gap', style: 'left:' + pos(+h.p) + ';width:' + (((+h.f - +h.p) / 29) * 100).toFixed(1) + '%' }) : null,
+      el('div', { class: 'mk pr', style: 'left:' + pos(+h.p) }, el('span', null, 'promise ' + h.p + ' Nov')), el('div', { class: 'mk fc', style: 'left:' + pos(+h.f) }, el('span', null, 'forecast ' + h.f + ' Nov')));
+  }
+  if (h.t === 'q') return el('blockquote', { class: 'c3t-q' }, '“' + String(h.x || '') + '”', el('cite', null, String(h.by || '')));
+  if (h.t === 'ci' && Array.isArray(h.p)) return el('div', { class: 'c3t-ci' }, ...h.p.map((s) => el('i', { class: ['ok', 'bad', 'run'].includes(s) ? s : '' })), el('span', { class: 'dim mono' }, String(h.l || '')));
+  return null;
+}
+
+/** The mockup's md(): # and ## headings, "- " bullets, **bold**, paragraphs. Built as nodes. */
+export function mdNode(text) {
+  const out = []; let ul = null;
+  const bold = (s) => String(s).split(/(\*\*[^*]+\*\*)/).map((p) => (/^\*\*[^*]+\*\*$/.test(p) ? el('b', null, p.slice(2, -2)) : p));
+  for (const l of String(text || '').split('\n')) {
+    if (l.startsWith('- ')) { if (!ul) { ul = el('ul'); out.push(ul); } ul.append(el('li', null, ...bold(l.slice(2)))); continue; }
+    ul = null;
+    if (l.startsWith('## ') || l.startsWith('# ')) out.push(el('h4', null, ...bold(l.replace(/^#+ /, '')))); else if (l.trim()) out.push(el('p', null, ...bold(l)));
+  }
+  return el('div', { class: 'c3t-md' }, ...out);
+}
+
+function fileNode(r, ctx) {
+  const body = ctx.fileBody && ctx.fileBody(r.path);
+  return el('div', { class: 'c3t-file' },
+    el('div', { class: 'fh' }, ic('doc', 'sm'), el('b', null, r.title), el('span', { class: 'chip2' }, r.media + ' · ' + (r.render || ''))),
+    body ? el('div', { class: 'fb' }, mdNode(body)) : el('div', { class: 'fb dim mono' }, 'The page does not read run files. Open the session to read it.'),
+    el('div', { class: 'dim mono ft' }, r.path + (r.sha256 ? ' · checksum ' + r.sha256 : ' · no checksum')));
+}
+
+function draftNode(r) {
+  const c = normalizeCase({ id: 'draft', outward: true, outboxReason: NO_CHANNEL, options: [{ id: 'send', l: 'Send to ' + r.to, rec: 1, outward: true }] });
+  const s = slideFor(c, 'send', { outbox: false });
+  return el('div', { class: 'c3t-draft' },
+    el('div', { class: 'draft' }, r.body),
+    claimsList(r.claims),
+    r.can_send === false ? el('div', { class: 'dim mono', style: 'color:var(--destructive)' }, 'Send is blocked: a claim in this draft has no label. Ask for evidence or retry.')
+      : el('div', { class: 'dim mono' }, ic('next', 'sm'), ' Queued for ' + r.to + '. The slide sends exactly this text (hash ' + r.hash + ', computed by the workspace, not the agent). The session cannot send.'),
+    el('div', { class: 'slt off', 'aria-disabled': 'true', 'data-draft-slide': '', style: '--tc:var(--muted-foreground)' }, el('span', { class: 'lb' }, s.label + ' ›››'),
+      el('button', { type: 'button', class: 'th', disabled: true, 'aria-label': 'Send: not available. ' + s.reason }, ic('lock'))),
+    el('div', { class: 'slt-why', role: 'note' }, ic('lock', 'sm'), s.reason));
+}
+
+function optionsNode(r) {
+  return el('div', { class: 'c3t-opts' }, (r.options || []).map((o) => el('div', { class: 'opt-r' + (o.rec ? ' rec' : '') }, el('b', null, o.label), el('span', { class: 'dim mono' }, o.when || ''), el('span', { class: 'dim mono' }, (o.cost || '') + (o.rec ? ' · suggested' : '') + (r.close_call ? ' · a close call' : '')))));
+}
+
+function deckNode(r, ctx) {
+  const ui = ctx.ui; const sl = r.slides || []; const i = Math.max(0, Math.min(sl.length - 1, ui.slide || 0)); const s = sl[i];
+  if (!s) return null;
+  const go = (d) => { ui.slide = Math.max(0, Math.min(sl.length - 1, i + d)); ctx.redraw(); };
+  const box = el('div', { class: 'c3t-dk', 'data-c3t-deck': '' },
+    el('div', { class: 'sl' }, el('h4', null, s.title), ...(s.bullets || []).map((b) => el('div', { class: 'c3t-bul' }, labelChip(b), el('span', null, b.text)))),
+    el('div', { class: 'nv' }, el('button', { type: 'button', class: 'ib sm', 'aria-label': 'Previous slide', disabled: i === 0, onclick: () => go(-1) }, ic('chevl', 'sm')), el('span', { class: 'dim mono' }, (i + 1) + ' / ' + sl.length + ' · swipe or press'),
+      el('button', { type: 'button', class: 'ib sm', 'aria-label': 'Next slide', disabled: i === sl.length - 1, onclick: () => go(1) }, ic('chev', 'sm'))));
+  let x0 = null;
+  box.addEventListener('pointerdown', (e) => { if (!e.target.closest('button')) x0 = e.clientX; });
+  box.addEventListener('pointerup', (e) => { if (x0 === null) return; const dx = e.clientX - x0; x0 = null; if (Math.abs(dx) > 50) go(dx < 0 ? 1 : -1); });
+  return el('div', { class: 'c3t-deck' }, box, el('div', { class: 'foot' },
+    r.unlabelled ? el('span', { style: 'color:var(--destructive)' }, r.unlabelled + ' bullet' + (r.unlabelled > 1 ? 's' : '') + ' without a label. Cannot be shared.') : el('span', { class: 'dim mono' }, 'All bullets labelled.'),
+    el('button', { type: 'button', class: 'pill', disabled: true, title: 'A pptx export is not built on this page. Nothing leaves the machine.' }, ic('doc', 'sm'), 'Export as pptx')));
+}
+
+function tableNode(r, ctx) {
+  const ui = ctx.ui; const cols = r.columns || []; ui.col = ui.col == null ? 1 : ui.col; ui.dir = ui.dir || -1;
+  const rows = (r.rows || []).slice().sort((a, b) => { const x = a[ui.col], y = b[ui.col]; return (typeof x === 'number' ? x - y : String(x).localeCompare(String(y))) * ui.dir; });
+  const tog = el('div', { class: 'chips2' }, el('button', { type: 'button', class: 'pill', 'aria-pressed': String(!ui.cards), onclick: () => { ui.cards = false; ctx.redraw(); } }, 'Table'), el('button', { type: 'button', class: 'pill', 'aria-pressed': String(!!ui.cards), onclick: () => { ui.cards = true; ctx.redraw(); } }, 'Cards'),
+    el('span', { class: 'dim mono' }, 'Showing ' + rows.length + ' of ' + (r.total || rows.length) + ' · tap a heading to sort'));
+  if (ui.cards) return el('div', { class: 'c3t-tbl' }, tog, el('div', { class: 'c3t-opts' }, rows.map((row) => el('div', { class: 'opt-r' }, el('b', null, String(row[0])), el('span', { class: 'dim mono' }, row.slice(1, 2).join('') + (cols[1] ? ' ' + cols[1].label : '')), el('span', { class: 'dim mono' }, row.slice(2).join(' · '))))));
+  const head = el('tr', null, cols.map((c, i) => el('th', { class: c.type === 'number' ? 'n' : '', 'aria-sort': ui.col === i ? (ui.dir > 0 ? 'ascending' : 'descending') : 'none' },
+    el('button', { type: 'button', class: 'c3t-th', onclick: () => { ui.dir = ui.col === i ? -ui.dir : 1; ui.col = i; ctx.redraw(); } }, c.label + (ui.col === i ? (ui.dir > 0 ? ' ▲' : ' ▼') : '')))));
+  return el('div', { class: 'c3t-tbl' }, tog, el('div', { class: 'tw' }, el('table', { class: 'tbl' }, head, rows.map((row) => el('tr', null, row.map((v, i) => el('td', { class: cols[i] && cols[i].type === 'number' ? 'n' : '' }, v == null ? '' : String(v))))))));
+}
+
+/** A mermaid "graph LR" of edges, drawn as layers (the longest chain in the accent). Anything it cannot read stays as source text. */
+function diagramNode(r) {
+  const src = String(r.source || '');
+  const edges = []; const names = [];
+  for (const part of src.replace(/^\s*(graph|flowchart)\s+\w+\s*;?/i, '').split(/[;\n]/)) {
+    const m = /^\s*([\w-]+)\s*-->\s*([\w-]+)\s*$/.exec(part);
+    if (m) { edges.push([m[1], m[2]]); for (const n of [m[1], m[2]]) if (!names.includes(n)) names.push(n); }
+  }
+  const text = el('details', { class: 'c3t-src' }, el('summary', { class: 'chips2 dim' }, ic('chev', 'sm'), 'Source (' + r.kind + ')'), el('div', { class: 'raw' }, src));
+  if (r.kind !== 'mermaid' || !edges.length) return el('div', { class: 'c3t-dg' }, el('div', { class: 'dim mono' }, 'The diagram is shown as its source: this page draws only edge lists.'), text);
+  const depth = {}; const longest = {};
+  const lay = (n, seen = []) => { if (depth[n] != null) return depth[n]; if (seen.includes(n)) return 0; const ins = edges.filter((e) => e[1] === n).map((e) => e[0]); depth[n] = ins.length ? 1 + Math.max(...ins.map((x) => lay(x, seen.concat(n)))) : 0; return depth[n]; };
+  names.forEach((n) => lay(n));
+  const maxD = Math.max(...Object.values(depth));
+  const end = names.find((n) => depth[n] === maxD); let cur = end; longest[cur] = 1;
+  while (cur) { const prev = edges.map((e) => e).filter((e) => e[1] === cur && depth[e[0]] === depth[cur] - 1)[0]; cur = prev && prev[0]; if (cur) longest[cur] = 1; }
+  const rowOf = {}; const cnt = {};
+  names.forEach((n) => { cnt[depth[n]] = (cnt[depth[n]] || 0); rowOf[n] = longest[n] ? 0 : (cnt[depth[n]] += 1); });
+  const W = 120, H = 40, GX = 150, GY = 62; const maxRow = Math.max(...Object.values(rowOf));
+  const pt = (n) => ({ x: 10 + depth[n] * GX, y: 10 + rowOf[n] * GY });
+  const svg = document.createElementNS(NS, 'svg'); svg.setAttribute('viewBox', '0 0 ' + (20 + maxD * GX + W) + ' ' + (20 + maxRow * GY + H)); svg.setAttribute('role', 'img'); svg.setAttribute('aria-label', r.title || 'Diagram');
+  const mk = (tag, a, txt) => { const n = document.createElementNS(NS, tag); for (const k of Object.keys(a)) n.setAttribute(k, a[k]); if (txt) n.textContent = txt; svg.appendChild(n); return n; };
+  for (const [a, b] of edges) { const p = pt(a), q = pt(b); const cp = longest[a] && longest[b] && depth[b] === depth[a] + 1; mk('path', { d: 'M' + (p.x + W) + ' ' + (p.y + H / 2) + 'L' + q.x + ' ' + (q.y + H / 2), class: cp ? 'ec' : 'ed' }); }
+  for (const n of names) { const p = pt(n); mk('rect', { x: p.x, y: p.y, width: W, height: H, rx: 8, class: 'nd' + (longest[n] ? ' cp' : '') }); mk('text', { x: p.x + W / 2, y: p.y + H / 2 + 4, 'text-anchor': 'middle' }, n); }
+  return el('div', { class: 'c3t-dg' }, el('div', { class: 'dg' }, svg), text, el('div', { class: 'dim mono' }, 'The longest chain is blue. Drawn here from its source; the page loads nothing from the network.'));
+}
+
+export function resultNodes(r, ctx) {
+  if (!r) return [];
+  switch (r.type) {
+    case 'card.update': return [r.hero ? heroNode(r.hero) : null, claimsList(r.claims), r.chip ? el('div', { class: 'chips2' }, el('span', { class: 'chip2 ok' }, r.chip)) : null];
+    case 'evidence': return [claimsList(r.claims)];
+    case 'options': return [optionsNode(r)];
+    case 'draft': return [draftNode(r)];
+    case 'note': return [el('p', { class: 'c3t-note' }, r.note)];
+    case 'file': return [fileNode(r, ctx)];
+    case 'deck': return [deckNode(r, ctx)];
+    case 'table': return [tableNode(r, ctx)];
+    case 'diagram': return [diagramNode(r)];
+    default: return [el('p', { class: 'dim mono' }, 'A result of type ' + String(r.type) + ' that this page does not draw.')];
+  }
+}

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

@@ -0,0 +1,52 @@
+/* pm/c3-terminal.js — the Terminal page: the agent surfaces of agent-surfaces.html, opened by the header's agent button (spark, with the needs-you badge).
+ *   openTerminalPage({ tab })   closeTerminalPage()
+ * One wide sheet (c3-sheet.js: Esc closes, focus is kept inside, a bottom sheet on a phone) with the mockup's two views:
+ *   Sessions     On a card, Started by me, Past (7 days, with the observed / reported / you timeline), Automatic (hidden until switched on): sessions-panel.js,
+ *                every run a card (run-card.js) with its strip, its questions, its permission cards, its result and next moves.
+ *   Edge cases   the mockup's cases, one card each: c3-terminal-edge.js (example data, also in real mode).
+ * The mockup's third view, "Structure", is the design note (how a session is read); it is not drawn on the page.
+ * Real mode reads GET /api/runs and records presses; demo mode (the sample content) answers from c3-demo-term.js. Nothing here sends anything outward. */
+import { el } from './dom.js';
+import { openSheet, closeSheet } from './c3-sheet.js';
+import { ic } from './c3-terminal-icons.js';
+import { source, isDemo } from './c3-terminal-data.js';
+import { mountSessions, disposeSessions } from './sessions-panel.js';
+import { mountEdge, disposeEdge } from './c3-terminal-edge.js';
+
+const TABS = [['sessions', 'Sessions', 'pulse'], ['edge', 'Edge cases', 'alert']];
+const NEXT = [['', 'replies normally'], ['noresult', 'ends with no result'], ['rejected', 'is unreadable'], ['quiet', 'goes quiet'], ['unlabelled', 'has an unlabelled claim'], ['prose', 'answers in plain text'], ['attention', 'needs a sign-in'], ['crashed', 'crashes']];
+let sheet = null;
+
+export function closeTerminalPage() { if (sheet) closeSheet(); }
+
+export async function openTerminalPage(o = {}) {
+  const src = source();
+  const st = { tab: o.tab === 'edge' ? 'edge' : 'sessions' };
+  const host = el('div', { class: 'c3t-host', 'data-c3t': 'host' });
+  const seg = el('div', { class: 'seg', role: 'group', 'aria-label': 'Agent surfaces view', 'data-c3t': 'tabs' });
+  const note = el('div', { class: 'dim mono c3t-note', 'data-c3t': 'note' });
+  const demoBar = src.demo ? el('div', { class: 'chips2 c3t-demo', 'data-c3t': 'demo-controls' },
+    el('label', { class: 'dim mono', for: 'c3t-next' }, 'Demo: next reply'),
+    el('select', { id: 'c3t-next', 'aria-label': 'How the next reply ends', onchange: (e) => src.setNext(e.target.value) }, NEXT.map(([v, l]) => el('option', { value: v }, l))),
+    el('button', { type: 'button', class: 'pill', 'data-c3t': 'fire', onclick: () => src.fire() }, ic('bolt', 'sm'), 'Fire a detector')) : null;
+  let fx = null;
+  const draw = async () => {
+    seg.replaceChildren(...TABS.map(([id, label, icon]) => el('button', { type: 'button', 'aria-pressed': String(st.tab === id), 'data-c3t-tab': id, onclick: () => { if (st.tab !== id) { st.tab = id; draw(); } } }, ic(icon, 'sm'), label)));
+    disposeSessions(host); disposeEdge(host);
+    if (demoBar) demoBar.hidden = st.tab !== 'sessions';
+    if (st.tab === 'sessions') {
+      note.textContent = isDemo() ? 'Example data. A swipe right accepts a finished result, a swipe left opens the reply tray. Tap the corner icon to flip a card.' : 'Your runs, read from this workspace. A run is a real CLI session; the page reads its replies and records your presses. Nothing is sent outward.';
+      mountSessions(host, {});
+    } else {
+      note.textContent = '';
+      if (!fx) { try { fx = (await import('./c3-demo-term.js')).FX; } catch { fx = null; } }
+      if (st.tab !== 'edge') return;
+      if (fx) mountEdge(host, fx); else host.replaceChildren(el('p', { class: 'dim mono', role: 'status' }, 'The examples could not be loaded.'));
+    }
+  };
+  const body = [el('div', { class: 'c3 c3e c3t c3t-page', 'data-c3t': 'page' }, el('div', { class: 'chips2', style: 'justify-content:space-between' }, seg, demoBar), note, host)];
+  const s = openSheet({ title: 'Agent surfaces', icon: 'pulse', dw: true, body, onClose: () => { disposeSessions(host); disposeEdge(host); sheet = null; } });
+  sheet = s;
+  await draw();
+  return s;
+}

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

@@ -0,0 +1,163 @@
+/* pm/c3-tickets.js — the Tickets sub-view of Initiatives on /c3.html (console3.html patch at lines 3764 to 3860 and 4488: tkRow, list20, the
+ * "Open points by owner" card, raciCard and the agent-drafts card).
+ * Tickets are JIRA ONLY and their status is MIRRORED, read-only: the server never reads Jira (D53). The rows come from the cached Jira
+ * read the My work route serves: GET /api/my-work, the items with source 'jira' (id jira:KEY, key, title, status, category todo|doing|done,
+ * due, estimate, blocks, open, initiative). Nothing on this view writes.
+ * Real: key, title, status, category, due, estimate (XS 1, S 2, M 3, L 5, XL 8 points), blocks, initiative; "late" is an overdue date.
+ * Optional fields the real read does not carry (owner, pts, forecast_due, blocker, critical, in_work) and the cards `raci` and `drafts`
+ * are drawn only when present: the demo's fixtures carry them, a real read does not, so real mode never shows an invented owner or draft.
+ * Late or at risk = a forecast past the due date, an overdue date, or a named blocker. */
+import { el } from './dom.js';
+import { pmGet, pmPost } from './http.js';
+import { c3ic } from './pm-work-view.js';
+import { makeView, frame, hBars, card, listCard, emptyRow, dayLabel, short, rowShell, caseNode, markDone, say } from './c3-init-extras.js';
+
+const SIZE_PTS = { XS: 1, S: 2, M: 3, L: 5, XL: 8 };
+const OWN_COL = ['var(--acc)', 'var(--success)', 'var(--purple)', 'var(--warning)', 'var(--muted-foreground)', 'var(--destructive)'];
+const dayNum = (iso) => Math.round(Date.parse(String(iso).slice(0, 10) + 'T00:00:00Z') / 86400000);
+
+/** One ticket the view draws: the my-work item plus the derived state (late days, late or at risk). */
+export function ticketOf(it, today) {
+  const due = it.due || null; const fc = it.forecast_due || due;
+  const slip = due && fc ? Math.max(0, dayNum(fc) - dayNum(due)) : 0;
+  const over = !slip && due && today && it.category !== 'done' && dayNum(today) > dayNum(due) ? dayNum(today) - dayNum(due) : 0;
+  const risk = it.category !== 'done' && (it.blocker || (it.blocks > 0) || (it.open && it.open.length));
+  const bad = it.category !== 'done' && (slip > 0 || over > 0 || !!it.blocker);
+  return { ...it, due, fc, slip, over, bad, risk: !!risk, owner: it.owner || null, pts: it.pts != null ? it.pts : (SIZE_PTS[it.estimate] || null) };
+}
+export const jiraTickets = (j) => ((j && j.items) || []).filter((i) => i.source === 'jira').map((i) => ticketOf(i, j.today));
+
+const goTab = (V, k) => { const b = V.ctx.links && V.ctx.links.querySelector && V.ctx.links.querySelector('[data-c3-link=' + k + ']'); if (b) b.click(); };
+const mineish = (t) => !t.owner || /^(wawan|you)$/i.test(t.owner);
+
+/** The case file of a ticket (console3.html genTk, line 3770). READ-ONLY: Jira owns status, dates and owners; this page never changes them.
+ *  "Take it into today" is the page's own Work list (a page press); a nudge goes outside, so its slide is disabled until a channel is connected. */
+function caseOf(V, t) {
+  const chg = [];
+  if (t.blocker) chg.push(['alert', t.blocker, 'Jira', 'bad']);
+  if (t.slip > 0) chg.push(['clock', 'Forecast ' + dayLabel(t.fc) + ', ' + t.slip + ' day' + (t.slip === 1 ? '' : 's') + ' after plan', 'timeline', 'warn']);
+  else if (t.over > 0) chg.push(['clock', 'Overdue by ' + t.over + ' day' + (t.over === 1 ? '' : 's') + ', due ' + dayLabel(t.due), 'Jira', 'bad']);
+  if (t.critical) chg.push(['flag', 'On the critical path: it moves the ship date', 'path']);
+  if (t.in_work) chg.push(['check', 'Also in your Work list', 'Work']);
+  if (!chg.length) chg.push(['check', t.due ? 'On plan, due ' + dayLabel(t.fc || t.due) : 'No date in Jira', 'timeline', t.due ? 'ok' : '']);
+  chg.push(['lock', 'Status, dates and owner are Jira’s: ' + (t.status || 'no status read') + (t.owner ? ', ' + t.owner : ''), 'Jira, read-only']);
+  const opts = [];
+  if (!t.in_work && t.category !== 'done') opts.push({ id: 'tk', l: 'Take it into today', rec: mineish(t), fx: [['check', 'Appears in your Work list', 'ok']] });
+  if (t.category !== 'done' && !mineish(t)) opts.push({ id: 'nd', l: 'Ask ' + t.owner + ' for an update', rec: t.slip > 0 || !!t.blocker, outward: true, fx: [['reply', 'A draft to ' + t.owner, 'ok'], ['out', 'Goes out only by your slide', 'warn']] });
+  opts.push({ id: 'ok', l: 'Leave it', fx: [] });
+  const model = { sit: t.why || 'Ticket ' + t.key + (t.initiative ? ' in ' + (V.ctx.rows || []).reduce((n, r) => (r.id === t.initiative ? r.title : n), t.initiative) : '') + (t.owner ? ', owned by ' + t.owner : '') + '. Jira owns it: a change here is only ever a proposal.',
+    conf: Math.round(72 + (t.slip > 0 ? 6 : 10)), chg, opts, cta: 'Slide to confirm', outboxReason: 'This message goes outside. No channel is connected, so it stays a draft and nothing is sent.' };
+  return caseNode(V, 'tk:' + t.key, model, { onConfirm: (o) => decide(V, t, o) });
+}
+
+async function takeIntoToday(V, t) {
+  const r = await pmPost('/api/pm-items/add', { line: t.title + ' (' + t.key + ') today' });
+  if (!r || !r.ok) { say((r && r.error) || 'Not added to Work.'); return null; }
+  const id = r.item && r.item.id;
+  return () => (id ? pmPost('/api/pm-items/remove', { id }) : null);
+}
+async function decide(V, t, o) {
+  if (o.id === 'tk') {
+    const undo = await takeIntoToday(V, t); if (undo === null) return;
+    say('In your Work list for today.', undo); markDone(V, 'tk:' + t.key, 'Added to your Work list for today.', undo);
+  } else markDone(V, 'tk:' + t.key, 'Left as it is. No change.');
+}
+
+function row(V, t) {
+  const col = t.category === 'done' ? 'var(--success)' : t.bad ? 'var(--destructive)' : t.risk ? 'var(--warning)' : 'var(--success)';
+  const word = t.category === 'done' ? 'Done' : t.slip ? 'Delayed +' + t.slip + ' d' : t.over ? 'Overdue ' + t.over + ' d' : t.risk ? 'At risk' : 'On time';
+  const wcol = t.category === 'done' ? 'var(--success)' : t.slip || t.over ? 'var(--destructive)' : t.risk ? 'var(--warning)' : 'var(--success)';
+  const icon = t.category === 'done' ? 'check' : t.bad ? 'clock' : 'check';
+  /* the swipe (console3.html line 3879): right takes it into today, left drafts a nudge to the owner. A nudge goes outside: no channel, so nothing is sent. */
+  const sw = {
+    labelRight: 'take it into today', labelLeft: t.owner && !mineish(t) ? 'draft a nudge to ' + t.owner : 'nothing to nudge', iconRight: 'sun', iconLeft: 'bolt',
+    onRight: async () => { if (t.in_work || t.category === 'done') { say('Already in Work'); return; } const undo = await takeIntoToday(V, t); if (undo) { say('In your Work list for today', undo); markDone(V, 'tk:' + t.key, 'Added to your Work list for today.', undo); } },
+    onLeft: () => say(t.owner && !mineish(t) ? (window.__c3demo ? 'Nudge drafted for ' + t.owner : 'A nudge to ' + t.owner + ' goes outside. No channel is connected, so nothing was drafted or sent.') : 'Nothing to nudge: the ticket is yours or has no owner.'),
+  };
+  return rowShell(V, { key: 'tk:' + t.key, attrs: { 'data-in-ticket': t.key, 'data-id': t.key, 'data-tk': '1' }, icon, iconColor: col, sw, xpContent: caseOf(V, t),
+    titleNode: el('span', { class: 'tt' }, t.critical ? el('span', { class: 'st bad', title: 'On the critical path', style: 'margin-right:6px' }, c3ic('flag', 'sm')) : null, t.title),
+    chips: [el('span', { class: 'chip2 mono' }, t.key),
+      el('span', { class: 'chip2', style: 'color:' + wcol }, word),
+      t.owner ? el('span', { class: 'chip2' }, el('span', { class: 'av' }, t.owner.slice(0, 1)), t.owner) : null,
+      t.fc ? el('span', { class: 'chip2' }, c3ic('cal', 'sm'), dayLabel(t.fc)) : null,
+      t.blocker && t.category !== 'done' ? el('span', { class: 'st warn' }, c3ic('alert', 'sm'), t.blocker) : null,
+      t.in_work ? el('button', { type: 'button', class: 'chip2 lk', 'data-gowork': t.key, onclick: () => goTab(V, 'work') }, c3ic('check', 'sm'), 'In Work') : null,
+      t.status && !t.owner ? el('span', { class: 'chip2' }, t.status) : null,
+      el('span', { class: 'tag' }, 'Jira')] });
+}
+
+function raciCard(R) {
+  const cell = (v) => el('span', { class: 'c ' + v }, v);
+  return card('org', 'Who does what', 'responsible, accountable, consulted, informed',
+    el('div', { class: 'rcg' }, el('span'), ...R.people.map((p) => el('span', { class: 'h' }, p.slice(0, 3))),
+      ...R.rows.flatMap((r) => [el('span', null, r.title), ...r.cells.map(cell)])),
+    el('ul', { class: 'chgl' }, R.notes.map((n) => el('li', { class: n.tone }, c3ic('alert', 'sm'), el('span', null, n.text)))));
+}
+
+function load(V) {
+  pmGet('/api/my-work').then((j) => {
+    if (V.disposed) return;
+    V.data = { j: j && j.ok ? j : null, err: j && j.ok ? null : (j && j.error) || 'The Jira read could not be reached.' };
+    V.render();
+  }, () => { V.data = { j: null, err: 'The Jira read could not be reached.' }; V.render(); });
+}
+
+function render(V) {
+  const D = V.data;
+  const all = D && D.j ? jiraTickets(D.j) : [];
+  const T = V.scope ? all.filter((t) => t.initiative === V.scope) : all;
+  const bad = T.filter((t) => t.bad || t.risk);
+  const sorted = (f) => T.filter(f).sort((a, b) => String(a.fc || '9').localeCompare(String(b.fc || '9')));
+  const late = sorted((t) => t.category !== 'done' && (t.bad || t.risk));
+  const doing = sorted((t) => t.category === 'doing' && !late.includes(t));
+  const todo = sorted((t) => t.category === 'todo' && !late.includes(t));
+  const done = sorted((t) => t.category === 'done');
+  const reading = !D;
+  const none = !reading && !all.length;
+  const head = reading ? { icon: 'check', h: 'Reading the Jira tickets', s: 'Tickets live in Jira. The agent proposes, you accept.', ring: [0, 1] }
+    : none ? { icon: 'check', h: 'No Jira tickets read yet', s: D.err || 'The agent has not read Jira yet. A read from My work in the main app fills this view.', ring: [0, 1] }
+      : { icon: 'check', h: T.length + ' Jira ticket' + (T.length === 1 ? '' : 's') + ', ' + bad.length + ' late or at risk', s: 'Tickets live in Jira. The agent proposes, you accept.', ring: [done.length, T.length] };
+
+  const left = [];
+  if (reading) left.push(listCard('check', 'Tickets', null, '', [emptyRow('clock', 'Reading the Jira tickets.', { role: 'status' })]));
+  else if (none) left.push(listCard('check', 'Tickets', 0, 'Jira only, read-only', [emptyRow('moon', 'The agent has not read Jira yet, so there are no tickets to show. Nothing here is invented.', { 'data-in-empty': '' })]));
+  else if (!T.length) left.push(listCard('check', 'Tickets', 0, 'Jira only, read-only', [emptyRow('check', 'No Jira ticket belongs to this initiative.', { 'data-in-empty': '' })]));
+  else {
+    if (late.length) left.push(listCard('alert', 'Late or at risk', late.length, '', late.map((t) => row(V, t)), { 'data-in-list': 'late' }));
+    if (doing.length) left.push(listCard('clock', 'Doing', doing.length, '', doing.map((t) => row(V, t)), { 'data-in-list': 'doing' }));
+    if (todo.length) left.push(listCard('moon', 'To do', todo.length, '', todo.map((t) => row(V, t)), { 'data-in-list': 'todo' }));
+    if (done.length) left.push(listCard('check', 'Done', done.length, '', done.map((t) => row(V, t)), { 'data-in-list': 'done' }));
+  }
+
+  const right = [];
+  if (T.length) {
+    const by = {};
+    T.forEach((t) => { if (t.category !== 'done') { const o = t.owner || 'You'; by[o] = (by[o] || 0) + (t.pts || 0); } });
+    const names = Object.keys(by).sort((a, b) => by[b] - by[a]);
+    const mx = Math.max(1, ...names.map((n) => by[n]));
+    if (names.some((n) => by[n] > 0)) right.push(card('user', 'Open points by owner', '', hBars(names.map((n, i) => [n, by[n] / mx, OWN_COL[i % OWN_COL.length], by[n] + ' pts']))));
+  }
+  if (D && D.j && D.j.raci) right.push(raciCard(D.j.raci));
+  if (D && D.j && Array.isArray(D.j.drafts) && D.j.drafts.length) {
+    right.push(card('plus', 'Agent drafts', 'propose only, you accept',
+      el('ul', { class: 'chgl' }, D.j.drafts.map((t) => el('li', { class: 'warn' }, c3ic('plus', 'sm'), el('span', null, t.title + ' · ' + t.pts + ' pts')))),
+      el('div', { class: 'dim', style: 'font-size:var(--fs-2)' }, 'Nothing reaches Jira until you accept. Slide the card in the deck.')));
+  }
+  if (!right.length) right.push(card('info', 'Read-only mirror', '', el('ul', { class: 'chgl' },
+    el('li', null, c3ic('lock', 'sm'), el('span', null, 'Status, dates and owners are Jira’s. This view never writes to Jira.')),
+    el('li', null, c3ic('clock', 'sm'), el('span', null, 'The agent reads Jira with your connection and the server keeps the last read.')))));
+  const readAt = D && D.j && D.j.read_at;
+  if (readAt) right.push(el('p', { class: 'dim mono', style: 'font-size:var(--fs-2)', 'data-in-readat': '' }, 'Last read of Jira: ' + short(readAt, 25)));
+  frame(V, { head, left, right });
+}
+
+const view = makeView('tickets', { init: load, render });
+export const mount = view.mount;
+export const dispose = view.dispose;
+
+/** The count on the Tickets button: the Jira tickets that are late or at risk. */
+export async function badge(ctx) {
+  const j = await pmGet('/api/my-work' + (ctx && ctx.ws ? '?ws=' + encodeURIComponent(ctx.ws) : ''));
+  if (!j || !j.ok) return null;
+  return jiraTickets(j).filter((t) => t.category !== 'done' && (t.bad || t.risk)).length;
+}

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

@@ -0,0 +1,201 @@
+/* pm/c3-timeline.js — the drawing of the Initiatives Timeline of /c3.html, ported from the console3 mockup (console3.html, patch21, lines 4014 to 4042):
+ * scrubHtml (the track of checks and Replay), ganttTix (the Gantt), timeRight (What changed), driftSVG and creepSVG (forecast and scope at each check),
+ * fcMatrix (the forecast of every initiative at every check) and calSyncCard (the dates that reach the Calendar).
+ *
+ * INPUT is one payload of GET /api/c3-timeline (workspace/lib/routes-c3-timeline.js): `frames`, one whole plan per check. Every function here takes a
+ * frame (or the frames) and returns DOM; nothing is fetched and nothing is written. A replay is a loop over frames, so the Gantt is redrawn from the
+ * frame of each check: bars move, forecast and slip change, items appear as they were added. The mockup folds ticket histories in the browser (tixAt,
+ * planOf); here the server has already folded the events and planned them with plan.js, so the same drawing reads the result.
+ * DIFFERENCES FROM THE MOCKUP, kept honest: the mockup's tickets carry a typed "critical" flag and a progress number; here the critical path is derived
+ * (slack 0 in plan.js) and progress comes from the item's state. Origin (Jira, Local, Figma, Calendar, Plan) is in each row's tooltip and in What
+ * changed; the mockup draws no origin chip inside the Gantt either (its chips are in the Breakdown rows).
+ */
+import { el } from './dom.js';
+import { c3ic } from './pm-work-view.js';
+
+const NS = 'http://www.w3.org/2000/svg';
+const DAY = 86400000;
+export const dnum = (s) => Math.round(Date.parse(String(s).slice(0, 10) + 'T00:00:00Z') / DAY);
+const MON = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+export const dlab = (n) => { const d = new Date(n * DAY); return d.getUTCDate() + ' ' + MON[d.getUTCMonth()]; };
+export const dlabS = (s) => dlab(dnum(s));
+export const short = (t, n) => { t = String(t == null ? '' : t); return t.length > n ? t.slice(0, n - 1) + '…' : t; };
+const STATUS = { done: ['Done', 'var(--success)'], 'on time': ['On time', 'var(--success)'], 'at risk': ['At risk', 'var(--warning)'], delayed: ['Delayed', 'var(--destructive)'], overdue: ['Overdue', 'var(--destructive)'] };
+const stat = (s) => STATUS[s] || STATUS['on time'];
+
+function svg(tag, attrs, ...kids) {
+  const n = document.createElementNS(NS, tag);
+  for (const k of Object.keys(attrs || {})) if (attrs[k] != null) n.setAttribute(k, attrs[k]);
+  for (const c of kids) if (c) n.appendChild(c);
+  return n;
+}
+const text = (x, y, s, attrs) => { const t = svg('text', { x, y, ...(attrs || {}) }); t.textContent = s; return t; };
+const title = (s) => { const t = svg('title', {}); t.textContent = s; return t; };
+
+/** Who changed it, as the mockup's orig(): You, Agent, or the teammate. */
+export function whoOf(by) {
+  const b = String(by || '');
+  if (/^(agent|claude-code)/i.test(b)) return { l: 'Agent', c: 'var(--opp, var(--accent))', i: 'spark' };
+  if (/^(pm:|human:wawan)/i.test(b) || b === 'Wawan' || b === 'You') return { l: 'You', c: 'var(--acc)', i: 'user' };
+  return { l: b.replace(/^(pm|human|agent):/, '') || 'Someone', c: 'var(--muted-foreground)', i: 'user' };
+}
+
+/** A key a person would say out loud: the Jira key or PM-n, else the title alone. */
+const rowName = (t) => (t.key ? t.key + ' ' + short(t.title, 17) : short(t.title || t.id, 22));
+
+/** The mockup's ganttTix. frame: one entry of `frames`; prev: the frame before it (the dashed "where it was before"); hl: ids touched at this check. */
+export function ganttSvg(frame, prev, hl, today) {
+  const items = frame.items.slice().sort((a, b) => dnum(a.start) - dnum(b.start) || (a.id < b.id ? -1 : 1));
+  const crit = new Set(frame.critical || []);
+  const ghost = new Map((prev ? prev.items : []).map((t) => [t.id, t.forecast]));
+  const idx = {}; items.forEach((t, i) => { idx[t.id] = i; });
+  const days = [];
+  for (const t of items) days.push(dnum(t.start), dnum(t.due), dnum(t.forecast.end));
+  const a = Math.min(...days) - 1; const b = Math.max(...days) + 2;
+  const W = 720; const LW = 176; const SW = 76; const CW = W - LW - SW; const N = b - a + 1; const dw = CW / N; const rh = 30; const top = 26; const H = top + items.length * rh + 10;
+  const X = (n) => LW + (n - a) * dw; const Xc = (n) => X(n) + dw / 2; const cy = (i) => top + i * rh + rh / 2;
+  const s = svg('svg', { class: 'pg', viewBox: `0 0 ${W} ${H}`, role: 'img', 'aria-label': 'Ticket timeline with dependencies and the critical path', 'data-tl-gantt': '', 'data-tl-check': frame.check });
+  for (let n = a; n <= b; n++) if (new Date(n * DAY).getUTCDay() === 1) { s.appendChild(svg('line', { x1: X(n), x2: X(n), y1: 18, y2: H - 4, stroke: 'var(--border)' })); s.appendChild(text(X(n) + 3, 14, dlab(n))); }
+  const td = dnum(today);
+  if (td >= a && td <= b) s.appendChild(svg('rect', { x: X(td), y: 20, width: dw, height: H - 24, fill: 'var(--accw)', rx: 6 }));
+  if (frame.promised) { const px = Xc(dnum(frame.promised)); s.appendChild(svg('line', { x1: px, x2: px, y1: 20, y2: H - 4, stroke: 'var(--success)', 'stroke-dasharray': '4 4', 'stroke-width': 2, 'data-tl-promised': frame.promised })); s.appendChild(text(px + 4, H - 8, 'promised', { fill: 'var(--success)' })); }
+  items.forEach((t, i) => (t.after || []).forEach((dk) => {
+    if (idx[dk] == null) return;
+    const pd = items[idx[dk]].forecast; const pt = t.forecast;
+    const x1 = X(dnum(pd.end) + 1); const y1 = cy(idx[dk]); const x2 = Math.max(X(dnum(pt.start)), x1 + 2); const y2 = cy(i); const xm = x1 + 6; const c = crit.has(t.id) && crit.has(dk);
+    s.appendChild(svg('path', { d: `M${x1} ${y1} H${xm} V${y2} H${x2 - 1}`, fill: 'none', stroke: c ? 'var(--destructive)' : 'var(--ring)', 'stroke-width': c ? 2 : 1.2, 'data-tl-dep': dk + '>' + t.id }));
+    s.appendChild(svg('path', { d: `M${x2} ${y2} l-5 -3 v6z`, fill: c ? 'var(--destructive)' : 'var(--ring)' }));
+  }));
+  items.forEach((t, i) => {
+    const p = t.forecast; const st = stat(p.status); const y = cy(i); const done = t.state === 'done'; const xs = X(dnum(t.start)); const xe = X(dnum(t.due) + 1); const g = ghost.get(t.id);
+    if (hl && hl.has(t.id)) s.appendChild(svg('rect', { x: 0, y: y - 13, width: W, height: 26, rx: 8, fill: 'var(--accw)', 'data-tl-hl': t.id }));
+    if (g && (g.end !== p.end || g.start !== p.start)) s.appendChild(svg('rect', { x: X(dnum(g.start)), y: y - 10, width: Math.max(4, X(dnum(g.end) + 1) - X(dnum(g.start))), height: 4, rx: 2, fill: 'none', stroke: 'var(--muted-foreground)', 'stroke-dasharray': '3 2', 'data-tl-ghost': t.id }));
+    const grp = svg('g', { opacity: done ? '.6' : '1', 'data-tl-row': t.id, 'data-tl-origin': t.origin || null, 'data-critical': crit.has(t.id) ? 'true' : null });
+    grp.appendChild(title(`${t.title || t.id} (${t.src || t.origin || 'plan'}${t.phase ? ', ' + t.phase : ''}${t.owner ? ', ' + t.owner : ''}), forecast ${p.start} to ${p.end}: ${st[0]}${p.slip_days > 0 ? ', ' + p.slip_days + ' days past the plan' : ''}`));
+    grp.appendChild(text(0, y + 4, (crit.has(t.id) ? '● ' : '') + rowName(t), { class: 't' + (crit.has(t.id) ? ' crit' : '') }));
+    if (t.ms) grp.appendChild(svg('path', { d: `M${Xc(dnum(t.due))} ${y - 9} l8 9 -8 9 -8 -9z`, fill: 'var(--card)', stroke: st[1], 'stroke-width': 2 }));
+    else {
+      grp.appendChild(svg('rect', { x: xs, y: y - 5, width: Math.max(4, xe - xs), height: 10, rx: 5, fill: st[1], 'fill-opacity': '.2' }));
+      const frac = done ? 1 : Math.max(0, Math.min(1, t.progress || 0));
+      if (frac > 0) grp.appendChild(svg('rect', { x: xs, y: y - 5, width: Math.max(done ? 4 : 0, (xe - xs) * frac), height: 10, rx: 5, fill: st[1] }));
+    }
+    if (!done && (p.end > t.due || p.start > t.start)) {
+      grp.appendChild(svg('rect', { x: X(dnum(p.start)), y: y + 6, width: Math.max(4, X(dnum(p.end) + 1) - X(dnum(p.start))), height: 4, rx: 2, fill: st[1], 'fill-opacity': '.7', 'data-tl-forecast': t.id }));
+      if (p.end > t.due) grp.appendChild(svg('circle', { cx: Xc(dnum(p.end)), cy: y, r: 5, fill: 'var(--destructive)', stroke: 'var(--card)', 'stroke-width': 2 }));
+    }
+    grp.appendChild(text(W - SW + 6, y + 4, done ? 'Done' : p.slip_days > 0 ? '+' + p.slip_days + ' d' : st[0], { style: 'fill:' + st[1], 'data-tl-status': t.id }));
+    s.appendChild(grp);
+  });
+  return s;
+}
+
+/** The mockup's scrubHtml: the header (As of …, Replay) and the track of checks. */
+export function scrub(frames, n, h) {
+  const last = frames.length - 1;
+  const f = frames[n];
+  const dateLab = dlabS(f.date);
+  const track = el('div', { class: 'sntrack', role: 'group', 'aria-label': 'Timeline history', style: `grid-template-columns:repeat(${frames.length},minmax(0,1fr));--n:${frames.length}`, 'data-n': frames.length },
+    frames.map((fr, i) => el('button', { type: 'button', class: 'sn', 'aria-pressed': String(i === n), 'data-past': String(i <= n), 'data-tl-snap': i, onClick: () => h.snap(i) },
+      el('i'), el('b', null, dlabS(fr.date)), el('span', null, fr.label))));
+  const play = el('button', { type: 'button', class: 'ib sm', title: 'Replay how the plan changed', 'aria-label': 'Replay how the plan changed', 'data-tl-replay': '', onClick: () => h.replay() }, c3ic('next', 'sm'));
+  return el('div', null, el('div', { class: 'snh' }, el('span', { class: 'dim', style: 'font-size:var(--fs-2)', 'data-tl-asof': '' }, n === last ? 'Today' : 'As of ' + dateLab), play), track);
+}
+
+/** The Timeline history card: header, the track, the Gantt, the legend. */
+export function historyCard(frames, n, h, today) {
+  const frame = frames[n]; const prev = n > 0 ? frames[n - 1] : null;
+  const hl = new Set((frame.events || []).map((e) => e.id));
+  return el('section', { class: 'card', 'data-tl-history': '' }, el('h3', null, c3ic('cal'), 'Timeline history ', el('span', { class: 'dim', style: 'text-transform:none;letter-spacing:0' }, 'scrub or replay how the plan changed')),
+    scrub(frames, n, h), frame.items.length ? ganttSvg(frame, prev, hl, today) : el('div', { class: 'fold' }, c3ic('check', 'sm'), 'Nothing was in the plan at this check.'),
+    el('div', { class: 'pgl' }, el('span', null, '◆ milestone'), el('span', { style: 'color:var(--destructive)' }, '● critical path'), el('span', { style: 'color:var(--success)' }, '┆ promised'), el('span', null, 'thin bar = forecast'), el('span', null, 'dashed = where it was before')));
+}
+
+const wordsTx = (e) => (e.op === 'add' ? 'added' : e.op === 'remove' ? 'removed' : e.tx || 'edited');
+/** The mockup's timeRight, first card: what changed at this check, who, and why. */
+export function whatChangedCard(frames, n) {
+  const f = frames[n]; const p = n > 0 ? frames[n - 1] : null;
+  const head = n === 0 ? `Baseline: ${f.items.length} item${f.items.length === 1 ? '' : 's'}, ${f.points} points${f.promised ? ', promised ' + dlabS(f.promised) : ''}`
+    : `Since ${dlabS(p.date)}: ${f.points - p.points > 0 ? '+' + (f.points - p.points) + ' points' : f.points - p.points < 0 ? (f.points - p.points) + ' points' : 'no scope change'}${f.forecast_end && p.forecast_end && f.forecast_end !== p.forecast_end ? ', forecast ' + dlabS(p.forecast_end) + ' to ' + dlabS(f.forecast_end) : ', forecast unchanged'}`;
+  const ev = (f.events || []).slice(0, 12);
+  const more = (f.events || []).length - ev.length;
+  return el('section', { class: 'card', 'data-tl-changed': '' }, el('h3', null, c3ic('clock'), 'What changed ', el('span', { class: 'dim', style: 'text-transform:none;letter-spacing:0' }, dlabS(f.date))),
+    el('div', { class: 'dim', style: 'font-size:var(--fs-2)', 'data-tl-head': '' }, head),
+    el('ul', { class: 'hx' }, ev.length ? ev.map((e) => { const o = whoOf(e.by);
+      return el('li', { 'data-tl-change': e.id }, el('span', { class: 'chip2', style: 'color:' + o.c }, c3ic(o.i, 'sm'), o.l),
+        el('span', null, (e.title || e.id) + ': ' + wordsTx(e), e.why ? el('small', null, e.why) : (e.origin ? el('small', null, 'No reason recorded · ' + e.origin) : null)), el('span', { class: 'w' }, e.key || '')); })
+      : [el('li', null, el('span'), el('span', null, 'No change at this check.'), el('span'))], more > 0 ? el('li', null, el('span'), el('span', { class: 'dim' }, '+' + more + ' more'), el('span')) : null));
+}
+
+/** The mockup's driftSVG: the forecast date at each check against the promise. */
+export function driftSvg(frames, n) {
+  const W = 560; const H = 160; const x0 = 58; const x1 = W - 20; const y0 = 16; const y1 = H - 30;
+  const F2 = frames.map((f) => (f.forecast_end ? { fe: dnum(f.forecast_end), e: f.promised ? dnum(f.promised) : null } : null));
+  const have = F2.filter(Boolean);
+  const first = have[0];
+  const pr = first ? (first.e != null ? first.e : first.fe) : 0;
+  const vals = have.map((x) => x.fe);
+  const mn = Math.min(pr, ...vals) - 2; const mx = Math.max(pr, ...vals) + 2; const span = Math.max(1, mx - mn);
+  const X = (i) => x0 + i * (x1 - x0) / Math.max(1, frames.length - 1); const Y = (v) => y1 - (v - mn) / span * (y1 - y0);
+  const s = svg('svg', { class: 'mat', viewBox: `0 0 ${W} ${H}`, role: 'img', 'aria-label': 'Forecast date at each check against the promise', 'data-tl-drift': '' });
+  [pr, Math.round((mn + mx) / 2), mx - 1].forEach((v) => { s.appendChild(svg('line', { x1: x0, x2: x1, y1: Y(v), y2: Y(v), stroke: 'var(--border)' })); s.appendChild(text(x0 - 5, Y(v) + 4, dlab(v), { 'text-anchor': 'end' })); });
+  if (first && first.e != null) s.appendChild(svg('line', { x1: x0, x2: x1, y1: Y(pr), y2: Y(pr), stroke: 'var(--success)', 'stroke-dasharray': '5 4', 'stroke-width': 2 }));
+  const pts = []; F2.forEach((x, i) => { if (x) pts.push(X(i).toFixed(1) + ',' + Y(x.fe).toFixed(1)); });
+  s.appendChild(svg('polyline', { points: pts.join(' '), fill: 'none', stroke: 'var(--destructive)', 'stroke-width': 2.5, 'stroke-linejoin': 'round' }));
+  F2.forEach((x, i) => { if (!x) return; s.appendChild(svg('circle', { cx: X(i), cy: Y(x.fe), r: i === n ? 6 : 4, fill: x.fe > pr ? 'var(--destructive)' : 'var(--success)', stroke: 'var(--card)', 'stroke-width': 2 })); s.appendChild(text(X(i), H - 12, dlabS(frames[i].date), { 'text-anchor': 'middle' })); });
+  if (first && first.e != null) s.appendChild(text(x1, Y(pr) - 6, 'promised ' + dlab(pr), { 'text-anchor': 'end', fill: 'var(--success)' }));
+  return s;
+}
+
+/** The mockup's creepSVG: scope in points at each check against the baseline. */
+export function creepSvg(frames, n) {
+  const W = 560; const H = 170; const x0 = 36; const x1 = W - 20; const y0 = 16; const y1 = H - 32;
+  const pp = frames.map((f) => f.points); const b0 = pp[0];
+  const mx = Math.max(...pp) + 6; const mn = Math.max(0, Math.min(...pp) - 6); const span = Math.max(1, mx - mn);
+  const X = (i) => x0 + i * (x1 - x0) / Math.max(1, frames.length - 1); const Y = (v) => y1 - (v - mn) / span * (y1 - y0);
+  const s = svg('svg', { class: 'mat', viewBox: `0 0 ${W} ${H}`, role: 'img', 'aria-label': 'Scope in points against the baseline of ' + b0 + ' points', 'data-tl-creep': '' });
+  const pts = []; pp.forEach((v, i) => { if (i) pts.push(X(i).toFixed(1) + ',' + Y(pp[i - 1]).toFixed(1)); pts.push(X(i).toFixed(1) + ',' + Y(v).toFixed(1)); });
+  const base = []; for (let i = pp.length - 1; i >= 0; i--) base.push(X(i).toFixed(1) + ',' + Y(b0).toFixed(1));
+  s.appendChild(svg('polygon', { points: pts.join(' ') + ' ' + base.join(' '), fill: 'var(--destructive)', 'fill-opacity': '.12' }));
+  s.appendChild(svg('line', { x1: x0, x2: x1, y1: Y(b0), y2: Y(b0), stroke: 'var(--ring)', 'stroke-dasharray': '5 4', 'stroke-width': 2 }));
+  s.appendChild(svg('polyline', { points: pts.join(' '), fill: 'none', stroke: 'var(--destructive)', 'stroke-width': 2.5, 'stroke-linejoin': 'round' }));
+  pp.forEach((v, i) => {
+    s.appendChild(svg('circle', { cx: X(i), cy: Y(v), r: i === n ? 6 : 4, fill: 'var(--destructive)', stroke: 'var(--card)', 'stroke-width': 2 }));
+    s.appendChild(text(X(i), H - 16, dlabS(frames[i].date), { 'text-anchor': 'middle' }));
+    if (i && v > pp[i - 1]) {
+      const add = (frames[i].events || []).find((e) => e.op === 'add');
+      s.appendChild(text(X(i), Y(v) - 10, '+' + (v - pp[i - 1]) + ' ' + short(add ? add.title : '', 16), { 'text-anchor': i === pp.length - 1 ? 'end' : 'middle' }));
+    }
+  });
+  s.appendChild(text(x1, Y(b0) + 14, 'baseline ' + b0 + ' points', { 'text-anchor': 'end' }));
+  return s;
+}
+
+/** The mockup's calSyncCard: milestones and late dates, the ones that reach the Calendar. */
+export function calSyncCard(frame) {
+  const list = frame.items.filter((t) => t.state !== 'done' && (t.ms || t.forecast.status !== 'on time')).sort((a, b) => (a.forecast.end < b.forecast.end ? -1 : a.forecast.end > b.forecast.end ? 1 : 0)).slice(0, 6);
+  return el('section', { class: 'card', 'data-tl-cal': '' }, el('h3', null, c3ic('cal'), 'On your Calendar ', el('span', { class: 'dim', style: 'text-transform:none;letter-spacing:0' }, 'dates that reach it')),
+    el('ul', { class: 'chgl' }, list.length ? list.map((t) => { const bad = t.forecast.status === 'delayed' || t.forecast.status === 'overdue';
+      return el('li', { class: bad ? 'bad' : 'ok' }, c3ic(bad ? 'clock' : 'check', 'sm'), el('span', null, (t.title || t.id) + ' · ' + dlabS(t.forecast.end) + (bad ? ' (plan ' + dlabS(t.due) + ')' : ''))); })
+      : [el('li', null, c3ic('check', 'sm'), el('span', null, 'Nothing dated.'))]),
+    el('div', { class: 'dim', style: 'font-size:var(--fs-2)' }, 'Milestones and late dates appear in Calendar week and month. Meetings carry their initiative back here.'));
+}
+
+/** The mockup's fcMatrix: the forecast of every initiative at every check; a cell replays that check. */
+export function matrixCard(data, titles, onCell) {
+  const checks = data.checks || [];
+  const head = el('tr', null, el('th'), checks.map((c) => el('th', { class: 'mono', style: 'font-size:var(--fs-1)' }, dlabS(c.date))));
+  const rows = (data.rows || []).map((r) => el('tr', null, el('th', { style: 'text-align:left' }, titles[r.id] || r.id), r.cells.map((c, n) => {
+    if (!c || !c.forecast_end) return el('td', null, '-');
+    const bad = c.promised && c.forecast_end > c.promised;
+    return el('td', null, el('button', { type: 'button', 'data-a': 'isnapgo', 'data-k': r.id + '|' + n, 'data-tl-cell': r.id + '|' + n, style: `color:${bad ? 'var(--destructive)' : 'var(--success)'};background:${bad ? 'color-mix(in oklab,var(--destructive) 10%,transparent)' : 'transparent'}`, onClick: () => onCell(r.id, n) }, dlabS(c.forecast_end)));
+  })));
+  return el('section', { class: 'card', 'data-tl-matrix': '' }, el('h3', null, c3ic('clock'), 'Forecast at each check ', el('span', { class: 'dim', style: 'text-transform:none;letter-spacing:0' }, 'tap a cell to replay it')),
+    el('div', { style: 'overflow-x:auto' }, el('table', { class: 'fcm' }, el('tbody', null, head, rows))), el('div', { class: 'pgl' }, el('span', { style: 'color:var(--success)' }, 'on the promised date'), el('span', { style: 'color:var(--destructive)' }, 'after it')));
+}
+
+/** The Calendar card for the All scope: the commitments of c3-plan-panels.js (rows with a due date and a status) drawn as one frame, so the same card reads them. */
+const FSTAT = { ok: 'on time', risk: 'at risk', late: 'delayed', over: 'overdue', done: 'on time', park: 'on time' };
+export function calSyncFromCommits(rows) {
+  const items = (rows || []).filter((r) => r.st !== 'done' && r.st !== 'park').map((r) => ({ id: r.id, title: r.n, state: 'todo', ms: true, due: r.due, forecast: { end: r.fc || r.due, status: FSTAT[r.st] || 'on time' } }));
+  return calSyncCard({ items });
+}

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

@@ -0,0 +1,16 @@
+/* pm/c3-toast.js — the one toast every console3 view uses (console3.html toast(), line 1166): a dark pill at the bottom, 4.2 s, with an
+ * Undo button when the action can be taken back. One at a time. Two call shapes: toast('text', undoFn) like the mockup, or
+ * toast({ text, actionLabel, onAction, timeout, tone }) for a view that names its own button. The CSS is `.c3 .toast` in console3.css. */
+import { el } from './dom.js';
+import { ensureC3Css } from './pm-work-view.js';
+
+let host = null; let timer = null;
+export function toast(arg, undo) {
+  const o = arg && typeof arg === 'object' ? arg : { text: arg, onAction: undo };
+  ensureC3Css();
+  if (!host || !host.isConnected) { host = el('div', { class: 'c3 c3e c3pop', 'data-shell': 'toast' }); document.body.appendChild(host); }
+  const t = el('div', { class: 'toast' + (o.tone === 'error' ? ' err' : ''), role: 'status', 'aria-live': 'polite', 'data-c3-toast': '' }, el('span', null, o.text));
+  if (o.onAction) t.append(el('button', { type: 'button', 'data-c3-toast-action': '', onclick: () => { clearTimeout(timer); t.remove(); o.onAction(); } }, o.actionLabel || 'Undo'));
+  host.replaceChildren(t);
+  clearTimeout(timer); timer = setTimeout(() => t.remove(), o.timeout || 4200);
+}