create-pmos 0.123.0 → 0.125.0

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

@@ -0,0 +1,249 @@
+/* pm/c3-roadmap.js — the Roadmap sub-view of Initiatives on /c3.html, on the mockup's own markup and CSS (console3.html: rmRow line 3765, genRm 3778,
+ * viewLeft 3840, viewRight 3848, roadSVG 3754, rmBar 4485, calSyncCard 3795).
+ * Left: the Plan lens and deck, an intro card with the plus (add a bet), then Now, Next and Later (`.card.sect.rmcol`) with a row per bet and a
+ * case file on tap. Right: By quarter (the SVG), Capacity (bets in flight, of the limit 4) and On your Calendar (dates that reach it).
+ * REAL: bets from GET /api/c3-init/roadmap (the bets records; capacity derived from people), writes through pmPost to /api/roadmap-ops/bet/add,
+ * /move and /take-off exactly as that route's header says. A move into a full column is answered with a PROPOSAL (which bet goes back); nothing
+ * moves until the PM presses "Confirm the swap" (confirmSwap: true). No bet record yet: each column shows the repository's own roadmap rows
+ * (ctx.rows) read-only and says so; nothing is invented. Dates on the Calendar card come from GET /api/forecast for the Now initiatives. */
+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, short, dayLabel, rowShell, caseNode, markDone, say } from './c3-init-extras.js';
+import { mountSlide } from './slide-confirm.js';
+
+const COLS = ['now', 'next', 'later'];
+const CL = { now: 'Now', next: 'Next', later: 'Later' };
+const CS = { now: 'Committed, in build or about to be', next: 'Likely, one quarter out', later: 'Direction only, no date' };
+const CI = { now: 'bolt', next: 'next', later: 'moon' };
+const LIMIT = 4;
+const NSV = 'http://www.w3.org/2000/svg';
+const confColor = (c) => (c >= 0.7 ? 'var(--success)' : c >= 0.45 ? 'var(--warning)' : 'var(--destructive)');
+const q0Of = (b) => (b.q0 != null ? b.q0 : b.horizon === 'now' ? 0 : b.horizon === 'next' ? 1 : 2);
+const q1Of = (b) => (b.q1 != null ? b.q1 : b.horizon === 'later' ? 3 : q0Of(b));
+const quarters = () => { const d = new Date(); let q = Math.floor(d.getMonth() / 3); let y = d.getFullYear(); const out = []; for (let i = 0; i < 4; i++) { out.push('Q' + (q + 1) + ' ' + String(y).slice(2)); q++; if (q > 3) { q = 0; y++; } } return out; };
+
+/** A bet's delay word: the bet's own `risk` hint when it has one, else the repository row's health. Only Now bets show it. */
+function riskOf(V, b) {
+  if (b.horizon !== 'now') return null;
+  const r = b.risk || (() => { const row = (V.ctx.rows || []).find((x) => x.id === b.initiative); const l = row && row.health && row.health.level; return l === 'at-risk' ? 'risk' : /off|block|delay|late/.test(l || '') ? 'late' : ''; })();
+  return r === 'late' ? { l: 'Delayed', c: 'bad', i: 'clock' } : r === 'risk' ? { l: 'At risk', c: 'warn', i: 'alert' } : null;
+}
+const krTitle = (V, id) => { const k = ((V.data.rd && V.data.rd.krs) || []).find((x) => x.id === id); return k ? k.title : id; };
+const betsIn = (V) => (((V.data.rd && V.data.rd.bets) || []).filter((b) => !b.off && (!V.scope || b.initiative === V.scope)));
+
+async function load(V) {
+  const rd = await pmGet('/api/c3-init/roadmap').catch(() => null);
+  if (V.disposed) return;
+  V.data.rd = rd && rd.ok ? rd : null; V.data.err = rd && rd.ok ? null : (rd && rd.error) || 'The roadmap could not be read.';
+  V.render();
+  const ids = (V.ctx.rows || []).filter((r) => r.horizon === 'now').map((r) => r.id).slice(0, 4);
+  const fcs = await Promise.all(ids.map((id) => pmGet('/api/forecast?initiative=' + encodeURIComponent(id)).catch(() => null)));
+  if (V.disposed) return;
+  V.data.fc = ids.map((id, i) => [id, fcs[i]]).filter(([, j]) => j && j.ok);
+  V.render();
+}
+
+async function press(V, path, body, done, at) {
+  const r = await pmPost(path, body);
+  if (V.disposed) return r;
+  if (r && r.ok && r.proposal) { V.proposal = { ...r.proposal }; V.open['rm:' + (r.proposal.move && r.proposal.move.id)] = true; V.note = ''; V.render(); return r; }
+  if (r && r.ok) { V.proposal = null; V.note = done || 'Done.'; V.err = ''; V.errAt = null; await load(V); return r; }
+  V.err = (r && r.error) || 'Not recorded.'; V.errAt = at || null; if (at) V.open['rm:' + at] = true; V.render(); return r;
+}
+
+const live = (V, col) => ((V.data.rd && V.data.rd.bets) || []).filter((x) => !x.off && x.horizon === col);
+/** The lowest-confidence bet of a column: the one a full column sends back (the route's own rule). */
+const weakest = (V, col, but) => live(V, col).filter((x) => x.rid !== but).sort((p, q) => (typeof p.confidence === 'number' ? p.confidence : 0.5) - (typeof q.confidence === 'number' ? q.confidence : 0.5))[0] || null;
+
+/** Move a bet one column (the page press). A full column answers with a proposal: it is shown on the row for the PM to confirm, never applied here. */
+async function moveBet(V, b, to, msg) {
+  V.proposal = null; V.err = '';
+  const from = b.horizon;
+  const r = await press(V, '/api/roadmap-ops/bet/move', { id: b.rid, to }, msg, b.rid);
+  if (r && r.ok && !r.proposal) say(msg, () => press(V, '/api/roadmap-ops/bet/move', { id: b.rid, to: from }, 'Moved back to ' + CL[from] + '.', b.rid));
+  return r;
+}
+
+/* ── one row of a column ── */
+function betRow(V, b) {
+  const risk = riskOf(V, b); const QL = quarters(); const key = 'rm:' + b.rid; const i = COLS.indexOf(b.horizon);
+  const conf = typeof b.confidence === 'number' ? b.confidence : null;
+  /* the swipe: right pulls it forward, left pushes it back (console3.html line 3881). A swipe never applies a swap: the route answers with a proposal and the row opens on it. */
+  const edge = () => say('Already at the edge');
+  const sw = {
+    labelRight: i > 0 ? 'pull it forward to ' + CL[COLS[Math.max(0, i - 1)]] : 'already at the edge', labelLeft: i < 2 ? 'push it back to ' + CL[COLS[Math.min(2, i + 1)]] : 'already at the edge', iconRight: 'next', iconLeft: 'moon',
+    onRight: () => (i > 0 ? moveBet(V, b, COLS[i - 1], 'Pulled forward to ' + CL[COLS[i - 1]] + '.') : edge()),
+    onLeft: () => (i < 2 ? moveBet(V, b, COLS[i + 1], 'Pushed back to ' + CL[COLS[i + 1]] + '.') : edge()),
+  };
+  return rowShell(V, { key, attrs: { 'data-rm': b.rid, 'data-id': b.rid }, icon: CI[b.horizon], title: b.title, sw, xpContent: caseFile(V, b),
+    chips: [conf == null ? null : el('span', { class: 'chip2', style: 'color:' + confColor(conf), title: 'Confidence' }, c3ic('target', 'sm'), Math.round(conf * 100) + '%'),
+      b.parent_kr ? el('span', { class: 'chip2' }, c3ic('flag', 'sm'), short(krTitle(V, b.parent_kr), 26)) : el('span', { class: 'st bad' }, c3ic('alert', 'sm'), 'No anchor'),
+      risk ? el('span', { class: 'st ' + risk.c }, c3ic(risk.i, 'sm'), risk.l) : null,
+      el('span', { class: 'tag' }, QL[q0Of(b)] + (q1Of(b) > q0Of(b) ? ' to ' + QL[q1Of(b)] : ''))] });
+}
+
+/** The case file of a bet (console3.html genRm, line 3778): the situation, the evidence with the capacity check, and each move with what it costs.
+ *  The slide runs the picked move through the page-press routes; a move into a full column comes back as a swap proposal the PM confirms on its own slide. */
+function caseFile(V, b) {
+  const i = COLS.indexOf(b.horizon); const conf = typeof b.confidence === 'number' ? b.confidence : null; const risk = riskOf(V, b); const key = 'rm:' + b.rid;
+  const here = live(V, b.horizon).length;
+  const chg = [['target', conf == null ? 'Confidence not rated (counts as 50 percent)' : 'Confidence ' + Math.round(conf * 100) + '%', 'agent'],
+    ['flag', b.parent_kr ? 'Serves ' + krTitle(V, b.parent_kr) : 'No KR or health budget anchor', 'anchor', b.parent_kr ? '' : 'bad'],
+    ['scale', CL[b.horizon] + ' holds ' + here + ' of ' + LIMIT + ' bets', 'capacity', here > LIMIT ? 'bad' : '']];
+  if (b.why) chg.push(['info', b.why, 'evidence']);
+  const sit = risk && b.horizon === 'now' ? 'This bet is on the roadmap as committed but its date is slipping. Decide whether the roadmap still believes the date.' : (b.why || 'Roadmap items move on evidence and capacity. Each option shows what it costs.');
+  const opts = [];
+  if (i > 0) {
+    const T = COLS[i - 1]; const full = T !== 'later' && live(V, T).length >= LIMIT; const vic = full ? weakest(V, T, b.rid) : null;
+    opts.push({ id: 'pf', l: 'Pull it forward to ' + CL[T], rec: !!b.parent_kr && conf != null && conf >= 0.7,
+      fx: [b.parent_kr ? ['check', 'Gets capacity and dates', 'ok'] : ['alert', 'No anchor: refused until it has one', 'bad'], ...(full ? [['alert', 'Pushes ' + (vic ? '“' + short(vic.title, 22) + '”' : 'something else') + ' back', 'warn']] : [['scale', CL[T] + ' would hold ' + (live(V, T).length + 1) + ' of ' + LIMIT, 'ok']])] });
+  }
+  for (const x of (b.options || [])) opts.push({ id: 'x:' + x.id, l: x.l, rec: !!x.rec, fx: x.fx || [] });
+  if (i < 2) opts.push({ id: 'pb', l: 'Push it back to ' + CL[COLS[i + 1]], rec: !b.parent_kr, fx: [['clock', 'Frees capacity in ' + CL[b.horizon], 'ok'], ...(b.horizon === 'now' ? [['alert', 'Dates already promised move too', 'warn']] : [])] });
+  opts.push({ id: 'off', l: 'Take it off the roadmap', fx: [['clock', 'Frees a slot', 'ok'], ['info', 'A reason is kept in the record', '']] });
+  opts.push({ id: 'k', l: 'Keep it where it is', rec: !opts.some((o) => o.rec) && !!b.parent_kr, fx: [] });
+  const model = { sit, conf: Math.round(60 + (conf == null ? 0.5 : conf) * 30), chg, opts, cta: 'Slide to confirm' };
+  const rm = V.reasons = V.reasons || {};
+  const reason = el('input', { type: 'text', placeholder: 'Why is it coming off?', 'aria-label': 'Why it comes off the roadmap', 'data-rm-reason': b.rid, value: rm[b.rid] || '', onInput: (e) => { rm[b.rid] = e.target.value; } });
+  const reasonBox = el('div', { class: 'wform', 'data-rm-off': b.rid }, reason, el('div', { class: 'dim', style: 'font-size:var(--fs-2)' }, 'The reason is kept in the record. Slide below to take it off.'));
+  reasonBox.hidden = (V.pick && V.pick[key]) !== 'off';
+  const onConfirm = async (o) => {
+    if (o.id === 'pf') return moveBet(V, b, COLS[i - 1], 'Moved to ' + CL[COLS[i - 1]] + '. The Calendar and Plan follow.');
+    if (o.id === 'pb') return moveBet(V, b, COLS[i + 1], 'Moved to ' + CL[COLS[i + 1]] + '.');
+    if (o.id === 'off') {
+      if (!(rm[b.rid] || '').trim()) { V.err = 'Say why it comes off: the reason is kept.'; V.errAt = b.rid; V.render(); return; }
+      return press(V, '/api/roadmap-ops/bet/take-off', { id: b.rid, reason: rm[b.rid].trim() }, 'Taken off the roadmap. The record stays.', b.rid);
+    }
+    if (o.id.startsWith('x:')) { const x = (b.options || []).find((q) => 'x:' + q.id === o.id); return markDone(V, key, (x && x.msg) || 'Recorded.'); }
+    return markDone(V, key, 'Kept where it is. No change.');
+  };
+  const mine = V.proposal && V.proposal.move && V.proposal.move.id === b.rid ? V.proposal : null;
+  const node = el('div', { 'data-rm-case': b.rid, onClick: (e) => e.stopPropagation() },
+    V.err && V.errAt === b.rid ? el('div', { class: 'fold w', role: 'alert' }, c3ic('alert', 'sm'), V.err) : null,
+    mine ? swapProposal(V, b, mine) : null,
+    caseNode(V, key, model, { onConfirm }),
+    reasonBox);
+  // the reason box shows only while "Take it off" is the picked option
+  node.addEventListener('click', () => { reasonBox.hidden = (V.pick && V.pick[key]) !== 'off'; });
+  return node;
+}
+
+/** The swap the route proposed: nothing has moved. Its own slide, bound to what the PM sees (the move and the bets sent back), applies it. */
+function swapProposal(V, b, mine) {
+  const sendBack = mine.send_back.map((s) => '“' + s.title + '”' + (s.confidence == null ? '' : ' (' + Math.round(s.confidence * 100) + '%)') + ' to ' + CL[s.to]).join(', then ');
+  const host = el('div', { class: 'c3slide' });
+  const box = el('div', { class: 'fold w', role: 'status', 'data-rm-proposal': b.rid }, c3ic('scale', 'sm'),
+    el('span', null, 'Proposal, nothing moved yet: ' + CL[mine.move.to] + ' is full. To make room, send back ' + sendBack + '.'),
+    host,
+    el('div', { class: 'chips2' }, el('button', { type: 'button', class: 'pill', onClick: () => { V.proposal = null; V.render(); } }, c3ic('x', 'sm'), 'Leave it')));
+  mountSlide(host, { label: 'Slide to swap and move', hash: b.rid + '|' + mine.move.to + '|' + mine.send_back.map((s) => s.id).join(','),
+    onConfirm: () => press(V, '/api/roadmap-ops/bet/move', { id: b.rid, to: mine.move.to, confirmSwap: true }, 'Swapped and moved to ' + CL[mine.move.to] + '.', b.rid) });
+  return box;
+}
+
+/** A repository row (no bet records yet): read-only, from ctx.rows. */
+function repoRow(V, r) {
+  return el('li', { class: 'nrow', 'data-rm-repo': r.id },
+    el('span', { class: 'ki' }, c3ic(CI[r.horizon] || 'init')),
+    el('div', { class: 'nb' }, el('span', { class: 'tt' }, r.title || r.id),
+      el('div', { class: 'chips' }, r.anchor ? el('span', { class: 'chip2' }, c3ic('flag', 'sm'), short(r.anchor, 26)) : el('span', { class: 'st bad' }, c3ic('alert', 'sm'), 'No anchor'),
+        r.health && r.health.level && r.health.level !== 'on' ? el('span', { class: 'st warn' }, c3ic('alert', 'sm'), String(r.health.level).replace('-', ' ')) : null,
+        el('span', { class: 'tag' }, 'repository'))));
+}
+
+/* ── the add form ── */
+function addForm(V) {
+  const title = el('input', { type: 'text', placeholder: 'What is the bet?', 'aria-label': 'What is the bet', 'data-rm-new': 'title' });
+  const krs = (V.data.rd && V.data.rd.krs) || [];
+  const dl = el('datalist', { id: 'c3-rm-anchors' }, krs.map((k) => el('option', { value: k.id }, k.title)));
+  const anchor = el('input', { type: 'text', list: 'c3-rm-anchors', placeholder: 'Anchor: a KR id or health:<id>', 'aria-label': 'Anchor', 'data-rm-new': 'anchor' });
+  const col = el('select', { 'aria-label': 'Column', 'data-rm-new': 'horizon' }, el('option', { value: 'later' }, 'Later'), el('option', { value: 'next' }, 'Next'), el('option', { value: 'now' }, 'Now'));
+  const scoped = V.scope ? (V.ctx.rows || []).find((r) => r.id === V.scope) : null;
+  return el('div', { class: 'wform', 'data-rm-form': '' }, el('b', { style: 'font-size:var(--fs-3)' }, 'Add a bet'), title, anchor, dl, col,
+    el('div', { class: 'chips2' },
+      el('button', { type: 'button', class: 'pill', 'data-rm-save': '', onClick: () => {
+        if (!title.value.trim()) { V.err = 'Name the bet first.'; V.errAt = null; V.render(); return; }
+        const body = { title: title.value.trim(), anchor: anchor.value.trim(), horizon: col.value, ...(scoped ? { initiative: scoped.id } : {}) };
+        V.form = false; press(V, '/api/roadmap-ops/bet/add', body, 'Added to ' + CL[body.horizon] + '.', null);
+      } }, c3ic('check', 'sm'), 'Add it'),
+      el('button', { type: 'button', class: 'pill', onClick: () => { V.form = false; V.err = ''; V.render(); } }, c3ic('x', 'sm'), 'Cancel')));
+}
+
+/* ── By quarter: the mockup's roadSVG ── */
+function roadSVG(V, L) {
+  const W = 560; const LW = 150; const QW = (W - LW) / 4; const rh = 34; const top = 26; const H = top + L.length * rh + 8; const QL = quarters();
+  const s = document.createElementNS(NSV, 'svg');
+  const add = (tag, a, txt) => { const n = document.createElementNS(NSV, tag); for (const k in a) n.setAttribute(k, a[k]); if (txt != null) n.textContent = txt; s.appendChild(n); return n; };
+  for (const [k, v] of Object.entries({ class: 'pg', viewBox: `0 0 ${W} ${H}`, role: 'img', 'aria-label': 'Roadmap by quarter. Fainter bars are less certain.' })) s.setAttribute(k, v);
+  QL.forEach((q, i) => { add('line', { x1: LW + i * QW, x2: LW + i * QW, y1: 18, y2: H - 4, stroke: 'var(--border)' }); add('text', { x: LW + i * QW + QW / 2, y: 14, 'text-anchor': 'middle' }, q); });
+  add('rect', { x: LW + 3, y: 20, width: 6, height: H - 24, fill: 'var(--acc)', rx: 3 });
+  L.forEach((b, i) => {
+    const y = top + i * rh + rh / 2; const conf = typeof b.confidence === 'number' ? b.confidence : 0.5; const risk = riskOf(V, b);
+    const col = b.horizon === 'now' && risk ? (risk.c === 'bad' ? 'var(--destructive)' : 'var(--warning)') : 'var(--acc)';
+    const xs = LW + q0Of(b) * QW + 4; const xe = LW + (q1Of(b) + 1) * QW - 4;
+    add('text', { x: 0, y: y + 4, class: 't' }, short(b.title, 19));
+    add('rect', { x: xs, y: y - 8, width: xe - xs, height: 16, rx: 8, fill: col, 'fill-opacity': (0.15 + conf * 0.65).toFixed(2), ...(conf < 0.4 ? { stroke: col, 'stroke-dasharray': '4 3' } : {}) });
+    if (!b.parent_kr) add('text', { x: xs + 8, y: y + 4, style: 'fill:var(--destructive)' }, 'no anchor'); else add('text', { x: xs + 8, y: y + 4, style: 'fill:var(--foreground)' }, Math.round(conf * 100) + '%');
+  });
+  return s;
+}
+
+/* ── On your Calendar: dated items from the forecast of the Now initiatives ── */
+function calendarCard(V) {
+  const dated = ((V.data.rd && V.data.rd.dated) || []).slice();   // optional (demo): the dated rows as the mockup lists them; real mode derives them from the forecast
+  for (const [id, j] of dated.length ? [] : V.data.fc || []) {
+    if (V.scope && id !== V.scope) continue;
+    const after = new Set((j.items || []).flatMap((x) => x.after || []));
+    for (const x of j.items || []) {
+      if (x.state === 'done') continue;
+      const f = x.forecast || {}; const late = f.status && f.status !== 'on time';
+      if (late || !after.has(x.id)) dated.push({ t: x.title, fe: f.end || x.due, plan: x.due, bad: !!late && f.status !== 'at risk' });
+    }
+  }
+  dated.sort((a, b) => String(a.fe).localeCompare(String(b.fe)));
+  return card('cal', 'On your Calendar', 'dates that reach it',
+    el('ul', { class: 'chgl' }, dated.length ? dated.slice(0, 6).map((d) => el('li', { class: d.bad ? 'bad' : 'ok' }, c3ic(d.bad ? 'clock' : 'check', 'sm'), el('span', null, d.t + ' · ' + dayLabel(d.fe) + (d.bad ? ' (plan ' + dayLabel(d.plan) + ')' : '')))) : [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.'));
+}
+
+function render(V) {
+  V.more = V.more || {};
+  const rd = V.data.rd; const bets = betsIn(V); const hasBets = !!(rd && (rd.bets || []).some((b) => !b.off));
+  const byCol = (c) => bets.filter((b) => b.horizon === c).sort((a, z) => (a.rank || 0) - (z.rank || 0));
+  const nowN = byCol('now').length; const nextN = byCol('next').length;
+  const risky = byCol('now').find((b) => riskOf(V, b) && riskOf(V, b).c === 'bad') || byCol('now').find((b) => riskOf(V, b));
+  const repoRows = (V.ctx.rows || []).filter((r) => !V.scope || r.id === V.scope);
+  const total = hasBets ? bets.length : repoRows.length;
+  const head = !rd ? { icon: 'flag', h: V.data.err || 'Reading the roadmap', s: V.data.err ? 'The bets are read from the repository records.' : 'The bets and their capacity are being read.', ring: [0, LIMIT] }
+    : { icon: 'flag', h: hasBets ? nowN + ' bet' + (nowN === 1 ? '' : 's') + ' Now, room for ' + Math.max(0, LIMIT - nowN) + ' more' + (risky ? '. ' + risky.title + ' is the risk' : '') : 'No bets on the roadmap yet',
+      s: hasBets ? 'Move items on evidence and capacity. Each one names its goal.' : 'Add one with the plus. A bet needs a goal: a KR or a health budget. The initiatives below are the repository\'s own roadmap.', ring: [nowN, LIMIT] };
+
+  const intro = el('section', { class: 'card sect', 'data-rm-intro': '' },
+    el('div', { class: 'sh2' }, el('h2', null, c3ic('flag', 'sm'), 'Roadmap ', el('span', { class: 'bdg g' }, String(total))), el('span', { class: 'chips2' }, c3ib('Add a bet', 'plus', { 'data-a': 'rmform', 'data-rm-add': '', 'aria-expanded': String(!!V.form), onClick: () => { V.form = !V.form; V.err = ''; V.render(); } }, 'sm'))),
+    V.form ? addForm(V) : null,
+    el('div', { class: 'dim', style: 'font-size:var(--fs-2)' }, 'Tap a bet to see where it can move and what each move costs. Swipe a row right to take the agent\u2019s suggestion, left to push it back. Every move checks the anchor and the capacity first.'),
+    V.note ? el('div', { class: 'dim mono', style: 'font-size:var(--fs-2)', role: 'status', 'data-rm-note': '' }, V.note) : null,
+    V.err && !V.errAt ? el('div', { class: 'fold w', role: 'alert' }, c3ic('alert', 'sm'), V.err) : null);
+
+  const cols = COLS.map((c) => {
+    const all = hasBets ? byCol(c).map((b) => betRow(V, b)) : repoRows.filter((r) => r.horizon === c).map((r) => repoRow(V, r));
+    const rows = V.more[c] ? all : all.slice(0, 15);   // a repository has hundreds of initiatives: the first 15, then "Show all"
+    if (all.length > rows.length) rows.push(el('li', { class: 'fold' }, el('button', { type: 'button', class: 'pill', 'data-rm-showall': c, onClick: () => { V.more[c] = true; V.render(); } }, 'Show all ' + all.length)));
+    return el('section', { class: 'card sect rmcol', 'data-rm-col': c },
+      el('div', { class: 'sh2' }, el('h2', null, c3ic(CI[c], 'sm'), CL[c] + ' ', el('span', { class: 'bdg g' }, String(all.length))), el('span', { class: 'dim', style: 'font-size:var(--fs-2)' }, CS[c])),
+      el('ul', { class: 'list' }, rows.length ? rows : [emptyRow('check', 'Nothing here.')]));
+  });
+
+  const right = [
+    card('flag', 'By quarter', 'fainter means less certain', bets.length ? roadSVG(V, bets) : el('div', { class: 'fold' }, c3ic('moon', 'sm'), 'No bets to chart yet.')),
+    card('user', 'Capacity', 'bets in flight', hBars([['Now', nowN / LIMIT, 'var(--acc)', nowN + ' of ' + LIMIT], ['Next', nextN / LIMIT, 'var(--purple)', nextN + ' of ' + LIMIT]]),
+      rd && rd.capacity && rd.capacity.over ? el('div', { class: 'fold w' }, c3ic('alert', 'sm'), 'A column holds more than ' + LIMIT + ' bets.') : null),
+    calendarCard(V),
+  ];
+  frame(V, { head, left: [intro, ...cols], right });
+}
+
+const view = makeView('roadmap', { init: (V) => load(V), render });
+export const mount = view.mount;
+export const dispose = view.dispose;

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

@@ -0,0 +1,107 @@
+/* pm/c3-sheet.js — the console3 sheet, as a primitive (console3.html: bsHtml line 2502, the .sheet rules 143 to 145, 180, 496 to 502,
+ * the Esc handler 2536 and the phone drag 2538 to 2540).
+ *
+ *   openSheet({ title, icon, body, wide, dw, scrim, onClose }) -> { close, root, sheet, body }
+ *   closeSheet()                                          closes the open sheet, if any
+ *
+ * On a desktop window the sheet is the right-hand panel (340px; `wide` 600px; `dw` the document sheet, up to 780px) over a
+ * scrim; at 640px or less (`.c3.ph`, the page's own phone switch) it is a bottom sheet with a grab bar that slides up (.3s) and
+ * can be dragged down: past 90px it closes, otherwise it springs back. Markup, as the mockup draws it:
+ *   div.c3.c3e.c3pop > div.scrim + div.sheet.bs[role=dialog][aria-modal] > div.grab + div.sh2(span.chips2 icon+b title, span.chips2 close .ib.sm)
+ *                      + div.sb > div.brief.sbb > body
+ * Behaviour: one sheet at a time (opening a second closes the first and runs its onClose); Esc closes (capture phase, so a card
+ * under the sheet does not also flip back); a press on the scrim closes; Tab and Shift+Tab stay inside the sheet; focus moves to
+ * the sheet on open and returns to the control that opened it on close. `body` is a Node, an array of Nodes, or a function that
+ * returns one. Real data is passed as DOM built with el(); nothing here sets innerHTML.
+ * Pure parts (Node-testable): trapNext, dragDismiss, bodyNodes, DRAG_CLOSE.
+ */
+import { el } from './dom.js';
+import { ensureC3Css, c3ic, c3Phone } from './pm-work-view.js';
+
+export const DRAG_CLOSE = 90;
+
+/** Where Tab goes inside a trap of `count` focusable controls: index of the next one, wrapping. `at` = -1 when the focus is outside. */
+export function trapNext(count, at, shift) {
+  if (count <= 0) return -1;
+  if (at < 0) return shift ? count - 1 : 0;
+  return shift ? (at - 1 + count) % count : (at + 1) % count;
+}
+
+/** A downward drag of dy pixels on the grab bar or the header: close past the threshold, else spring back. */
+export const dragDismiss = (dy) => dy > DRAG_CLOSE;
+
+export function bodyNodes(body) {
+  const b = typeof body === 'function' ? body() : body;
+  if (b == null) return [];
+  return Array.isArray(b) ? b.filter(Boolean) : [b];
+}
+
+const FOCUSABLE = 'a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])';
+let current = null;   // { root, onKey, stopPhone, close, opener, onClose }
+
+export function closeSheet() {
+  if (!current) return;
+  const c = current; current = null;
+  document.removeEventListener('keydown', c.onKey, true);
+  if (c.stopPhone) c.stopPhone();
+  c.root.remove();
+  const back = c.opener;
+  if (back && typeof back.focus === 'function' && document.contains(back)) { try { back.focus({ preventScroll: true }); } catch { /* not focusable any more */ } }
+  if (typeof c.onClose === 'function') { try { c.onClose(); } catch { /* the caller reports its own errors */ } }
+}
+
+export function openSheet({ title = '', icon = 'doc', body, wide = false, dw = false, scrim = true, onClose } = {}) {
+  closeSheet();
+  ensureC3Css();
+  const opener = document.activeElement && document.activeElement !== document.body ? document.activeElement : null;
+  const root = el('div', { class: 'c3 c3e c3pop', 'data-shell': 'sheet' });
+  const stopPhone = c3Phone(root);
+  const close = () => { if (current && current.root === root) closeSheet(); };
+  const sbb = el('div', { class: 'brief sbb' }, ...bodyNodes(body));
+  const closeBtn = el('button', { type: 'button', class: 'ib sm', 'aria-label': 'Close', title: 'Close (Esc)', onclick: close }, c3ic('x', 'sm'));
+  const grab = el('div', { class: 'grab' });
+  const head = el('div', { class: 'sh2' }, el('span', { class: 'chips2' }, c3ic(icon), el('b', null, title)), el('span', { class: 'chips2' }, closeBtn));
+  const sheet = el('div', { class: 'sheet bs' + (wide ? ' wide' : '') + (dw ? ' dw' : ''), role: 'dialog', 'aria-modal': String(!!scrim), 'aria-label': title, tabindex: '-1' },
+    grab, head, el('div', { class: 'sb' }, sbb));
+  /* the mockup's person and playbooks sheets have no scrim (they are panels beside the page, closed by their own button or Esc): `scrim: false` */
+  root.append(...(scrim ? [el('div', { class: 'scrim', onclick: close })] : []), sheet);
+
+  /* the phone drag (mockup 2538 to 2540): only on a bottom sheet, only from the grab bar or the header, never from a button */
+  let drag = null;
+  const phone = () => root.classList.contains('ph');
+  sheet.addEventListener('pointerdown', (e) => {
+    if (!phone() || e.button > 0) return;
+    const h = e.target.closest && e.target.closest('.grab,.sh2');
+    if (!h || e.target.closest('button')) return;
+    drag = { y: e.clientY, dy: 0 };
+    try { sheet.setPointerCapture(e.pointerId); } catch { /* not capturable */ }
+  });
+  sheet.addEventListener('pointermove', (e) => {
+    if (!drag) return;
+    drag.dy = Math.max(0, e.clientY - drag.y);
+    sheet.classList.add('dragging'); sheet.style.transform = 'translateY(' + drag.dy + 'px)';
+  });
+  const endDrag = () => {
+    if (!drag) return;
+    const d = drag; drag = null;
+    sheet.classList.remove('dragging');
+    if (dragDismiss(d.dy)) close(); else sheet.style.transform = '';
+  };
+  sheet.addEventListener('pointerup', endDrag);
+  sheet.addEventListener('pointercancel', () => { if (drag) { drag = null; sheet.classList.remove('dragging'); sheet.style.transform = ''; } });
+
+  const onKey = (e) => {
+    if (e.key === 'Escape') { e.stopPropagation(); e.preventDefault(); close(); return; }
+    if (e.key !== 'Tab') return;
+    const items = [...sheet.querySelectorAll(FOCUSABLE)].filter((n) => n.offsetWidth > 0 || n.offsetHeight > 0 || n === document.activeElement);
+    const at = items.indexOf(document.activeElement);
+    const ni = trapNext(items.length, at, e.shiftKey);
+    if (ni < 0) { e.preventDefault(); sheet.focus(); return; }
+    if (at < 0 || (e.shiftKey && at === 0) || (!e.shiftKey && at === items.length - 1)) { e.preventDefault(); items[ni].focus(); }
+  };
+  document.addEventListener('keydown', onKey, true);
+  document.body.appendChild(root);
+  current = { root, onKey, stopPhone, close, opener, onClose };
+  sheet.focus({ preventScroll: true });
+  return { close, root, sheet, body: sbb };
+}