create-pmos 0.124.0 → 0.126.0

package/workspace/public/pm/c3-misc-panels.js

@@ -0,0 +1,89 @@
+/* pm/c3-misc-panels.js — three panels of the console3 mockup that the Briefing, Work and Reports views lacked (content audit, planning/research/console3-content-parity.md).
+ *   stopCard(rows)              Briefing, Reflect lens: "What I could stop" (console3.html vBrief, line 1475): the agent's proposals, an icon and a line each.
+ *                               It is a read-only list, as in the mockup: nothing here acts, so nothing outward can be sent from it.
+ *   forecastChecksCard(opts)    Reports, Project family: "Forecast at each check, <initiative>" with the chart "Forecast date at each check against the promise"
+ *                               (console3.html driftSVG, line 3964). The points are the CHECKS of the plan from GET /api/c3-timeline?initiative=<id>
+ *                               (workspace/lib/routes-c3-timeline.js, which folds the plan ledger with scripts/plan-forecast.js checkFrames): per check the forecast end
+ *                               and the promised date. opts = { id, title }. With no id, the initiative with the largest slip among the Calendar's quarter rows is used.
+ *                               With fewer than two checks that carry a forecast, the card says so and draws nothing.
+ * Nothing here writes or sends. Built with el(): data never goes through innerHTML. */
+import { el } from './dom.js';
+import { pmGet } from './http.js';
+import { c3ic } from './pm-work-view.js';
+import { readQuarter } from './c3-plan.js';
+
+/* ── What I could stop ── */
+export function stopCard(rows) {
+  const list = (Array.isArray(rows) ? rows : []).filter((r) => r && r.text);
+  if (!list.length) return null;
+  return el('section', { class: 'card sect', 'data-c3pg': 'stop', 'aria-label': 'What I could stop' },
+    el('div', { class: 'sh2' }, el('h2', null, c3ic('moon', 'sm'), 'What I could stop')),
+    el('ul', { class: 'list', role: 'list' }, ...list.map((r) => el('li', { class: 'nrow', style: 'grid-template-columns:auto minmax(0,1fr)', 'data-stop-row': '' },
+      el('span', { class: 'ki' }, c3ic(r.icon || 'check')), el('div', { class: 'nb' }, r.text)))));
+}
+
+/* ── Forecast at each check ── */
+const NSV = 'http://www.w3.org/2000/svg';
+const sv = (tag, attrs, ...kids) => { const n = document.createElementNS(NSV, tag); for (const k of Object.keys(attrs || {})) n.setAttribute(k, attrs[k]); for (const c of kids) if (c) n.appendChild(c); return n; };
+const svt = (x, y, t, a) => { const n = sv('text', { x, y, ...(a || {}) }); n.textContent = t; return n; };
+const MON = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+const dayNum = (iso) => Math.round(Date.parse(iso + 'T00:00:00Z') / 864e5);
+const dlab = (n) => { const d = new Date(n * 864e5); return d.getUTCDate() + ' ' + MON[d.getUTCMonth()]; };
+
+/** The chart, from [{ date: 'YYYY-MM-DD', forecast_end, promised }] (the frames that carry a forecast). */
+export function forecastChart(frames) {
+  const W = 560; const H = 160; const x0 = 58; const x1 = W - 20; const y0 = 16; const y1 = H - 30;
+  const vals = frames.map((f) => dayNum(f.forecast_end)); const pr = dayNum(frames[0].promised || frames[0].forecast_end);
+  const mn = Math.min(pr, ...vals) - 2; const mx = Math.max(pr, ...vals) + 2; const n = frames.length;
+  const X = (i) => x0 + i * (x1 - x0) / (n - 1); const Y = (v) => y1 - (v - mn) / (mx - mn) * (y1 - y0);
+  const s = sv('svg', { class: 'mat', viewBox: `0 0 ${W} ${H}`, role: 'img', 'aria-label': 'Forecast date at each check against the promise', 'data-rp-chart': 'forecast-checks' });
+  [pr, Math.round((mn + mx) / 2), mx - 1].forEach((v) => s.append(sv('line', { x1: x0, x2: x1, y1: Y(v), y2: Y(v), stroke: 'var(--border)' }), svt(x0 - 5, Y(v) + 4, dlab(v), { 'text-anchor': 'end' })));
+  s.append(sv('line', { x1: x0, x2: x1, y1: Y(pr), y2: Y(pr), stroke: 'var(--success)', 'stroke-dasharray': '5 4', 'stroke-width': 2 }),
+    sv('polyline', { points: vals.map((v, i) => X(i).toFixed(1) + ',' + Y(v).toFixed(1)).join(' '), fill: 'none', stroke: 'var(--destructive)', 'stroke-width': 2.5, 'stroke-linejoin': 'round' }));
+  vals.forEach((v, i) => {
+    const c = sv('circle', { cx: X(i), cy: Y(v), r: i === n - 1 ? 6 : 4, fill: v > pr ? 'var(--destructive)' : 'var(--success)', stroke: 'var(--card)', 'stroke-width': 2 });
+    const t = sv('title', {}); t.textContent = dlab(dayNum(frames[i].date)) + ': forecast ' + dlab(v) + (v > pr ? ', ' + (v - pr) + ' days after the promise' : ', on the promise');
+    c.appendChild(t); s.append(c, svt(X(i), H - 12, dlab(dayNum(frames[i].date)), { 'text-anchor': 'middle' }));
+  });
+  s.append(svt(x1, Y(pr) - 6, 'promised ' + dlab(pr), { 'text-anchor': 'end', fill: 'var(--success)' }));
+  return s;
+}
+
+const done = new Map();   // initiative id → the frames that carry a forecast, or { error }
+const pending = new Map();
+function readChecks(id) {
+  if (done.has(id)) return Promise.resolve(done.get(id));
+  if (!pending.has(id)) {
+    pending.set(id, pmGet('/api/c3-timeline?initiative=' + encodeURIComponent(id)).then((j) => {
+      const r = j && j.ok !== false && Array.isArray(j.frames) ? j.frames.filter((f) => f.forecast_end && f.date) : { error: (j && j.error) || 'unreadable' };
+      done.set(id, r); pending.delete(id); return r;
+    }, (e) => { pending.delete(id); return { error: String((e && e.message) || e) }; }));
+  }
+  return pending.get(id);
+}
+/** With no initiative named: the one with the largest slip among the quarter rows that have a promise. */
+async function pickInitiative() {
+  const j = await readQuarter().catch(() => null);
+  const rows = ((j && j.gantt) || []).filter((g) => g.status !== 'no plan' && g.promised);
+  rows.sort((a, b) => (b.slip_days || 0) - (a.slip_days || 0));
+  return rows[0] ? { id: rows[0].id, title: rows[0].title || rows[0].id } : null;
+}
+
+export function forecastChecksCard(opts = {}) {
+  const head = (t) => el('h3', null, c3ic('clock'), 'Forecast at each check' + (t ? ', ' + t : ''));
+  const box = el('section', { class: 'card', 'data-rp-section': 'forecast-checks' });
+  const paint = (t, r) => {
+    if (r && r.error) box.replaceChildren(head(t), el('p', { class: 'dim mono', style: 'font-size:var(--fs-2)', role: 'status' }, 'The checks could not be read: ' + r.error));
+    else if (!r || r.length < 2) box.replaceChildren(head(t), el('p', { class: 'dim mono', style: 'font-size:var(--fs-2)', role: 'status', 'data-rp-empty': '' }, 'Fewer than two checks have a forecast date yet, so there is no history to draw.'));
+    else box.replaceChildren(head(t), forecastChart(r));
+  };
+  const run = async () => {
+    const who = opts.id ? { id: opts.id, title: opts.title } : await pickInitiative();
+    if (!who) { box.replaceChildren(head(''), el('p', { class: 'dim mono', style: 'font-size:var(--fs-2)', role: 'status', 'data-rp-empty': '' }, 'No initiative has a promised date yet, so there is nothing to check a forecast against.')); return; }
+    if (done.has(who.id)) { paint(who.title, done.get(who.id)); return; }
+    box.replaceChildren(head(who.title), el('p', { class: 'dim mono', style: 'font-size:var(--fs-2)', role: 'status' }, 'Reading the checks.'));
+    paint(who.title, await readChecks(who.id));
+  };
+  run();
+  return box;
+}

package/workspace/public/pm/c3-plan-panels.js

@@ -0,0 +1,163 @@
+/* pm/c3-plan-panels.js — the commitments panels of the console3 mockup, built for the Initiatives Timeline (All scope) and the Lifecycle Plan and Monitor stages.
+ * Ported from console3.html: progSVG (2716), commits (2704), the Timeline All scope (3841), Why it slips and Dependencies (3850), Path and dates
+ * and Progress and timing (3597, 3598).
+ *
+ *   ensureCommits(V)                 reads the commitments once; V.commits = { state, rows, range, today }. V.render() runs when they land.
+ *   progressCard(V, title, sub, o)   the "Progress of commitments: on time, at risk, delayed and overdue" chart in a card (o.cap rows, o.onOpen(id, title)).
+ *   whySlipsCard(V, causes)          bars of days past plan per cause. causes: { head, rows: [[label, fraction, color, text]], note } | null
+ *   dependenciesCard(list)           rows { cls, text }
+ *   slipFacts(frames)                derives the causes and the dependencies from the whole-plan frames of GET /api/c3-timeline
+ *
+ * DATA. Real mode: initiatives come from GET /api/calendar-views (view=quarter, the `gantt` rows the Calendar Quarter draws: promised date, forecast,
+ * progress, status); the PM's own dated tasks come from GET /api/pm-items (an open task is on time until its due date passes, then overdue). Nothing is
+ * invented: an initiative with no promised date is not drawn, a task with no due date is not drawn, and a bar fills only where progress is recorded.
+ * Demo (/c3.html?demo=1): window.__c3planfx (c3-demo-plan2.js) holds the mockup's rows in the same row shape. Built with el(); every string from data is a text node. */
+import { el } from './dom.js';
+import { pmGet } from './http.js';
+import { c3ic } from './pm-work-view.js';
+import { card } from './c3-init-extras.js';
+
+const NS = 'http://www.w3.org/2000/svg';
+const DAY = 864e5;
+const MN = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+const OK = 'var(--success)'; const WARN = 'var(--warning)'; const BAD = 'var(--destructive)'; const MFG = 'var(--muted-foreground)';
+const ST = { done: { l: 'Done', c: OK }, ok: { l: 'On time', c: OK }, risk: { l: 'At risk', c: WARN }, late: { l: 'Delayed', c: BAD }, over: { l: 'Overdue', c: BAD }, park: { l: 'Parked', c: MFG } };
+const SEVR = { over: 0, late: 1, risk: 2, ok: 3, park: 4, done: 5 };
+const STKEY = { 'on time': 'ok', 'at risk': 'risk', delayed: 'late', overdue: 'over' };
+const utc = (s) => Date.parse(String(s).slice(0, 10) + 'T00:00:00Z');
+const ymd = (t) => new Date(t).toISOString().slice(0, 10);
+const localYmd = () => { const d = new Date(); return d.getFullYear() + '-' + String(d.getMonth() + 1).padStart(2, '0') + '-' + String(d.getDate()).padStart(2, '0'); };
+const clamp = (v, a, b) => Math.max(a, Math.min(b, v));
+const isPhone = () => typeof matchMedia === 'function' && matchMedia('(max-width:640px)').matches;
+const sv = (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 tx = (x, y, s, attrs) => { const n = sv('text', { x, y, ...(attrs || {}) }); n.textContent = s; return n; };
+const dlab = (iso) => { const t = utc(iso); const d = new Date(t); return d.getUTCDate() + ' ' + MN[d.getUTCMonth()]; };
+
+/* ── the reads ── */
+/** The range the chart draws: the first of this month and 61 days on (the mockup's 1 to 61). */
+function rangeOf(today) { const d = new Date(utc(today)); const s = Date.UTC(d.getUTCFullYear(), d.getUTCMonth(), 1); return { start: ymd(s), end: ymd(s + 60 * DAY) }; }
+
+async function readReal(V, today) {
+  const ws = V.ctx.ws ? '&ws=' + encodeURIComponent(V.ctx.ws) : '';
+  const range = rangeOf(today);
+  const [cal, items] = await Promise.all([pmGet('/api/calendar-views?view=quarter&date=' + today + ws).catch(() => null), pmGet('/api/pm-items').catch(() => null)]);
+  const rows = []; const day = (s) => s;
+  const gantt = cal && cal.ok !== false && Array.isArray(cal.gantt) ? cal.gantt : [];
+  gantt.forEach((g) => {
+    const st = STKEY[g.status]; if (!st || !g.promised) return;
+    const f = g.forecast && (g.forecast.end || g.forecast.start); const p = g.planned && g.planned.start;
+    rows.push({ id: g.id, n: g.title || g.id, kind: 'init', start: day(p || g.promised), due: day(g.promised), fc: f ? day(f) : day(g.promised), pct: typeof g.progress === 'number' ? g.progress : null, st,
+      why: (g.title || g.id) + ': ' + g.status + (g.slip_days > 0 ? ', ' + g.slip_days + ' days past the plan' : ''), go: g.id });
+  });
+  const seen = new Set();
+  if (items && items.ok !== false && items.lists) Object.values(items.lists).forEach((l) => (l || []).forEach((i) => {
+    if (!i || i.done || seen.has(i.id) || !/^\d{4}-\d{2}-\d{2}/.test(String(i.due || ''))) return; seen.add(i.id);
+    const d = String(i.due).slice(0, 10); const over = d < today;
+    rows.push({ id: 'item-' + i.id, n: i.title, kind: 'task', due: d, st: over ? 'over' : 'ok', why: i.title + (over ? ', overdue' : ', due ' + d), late: over ? Math.round((utc(today) - utc(d)) / DAY) : 0 });
+  }));
+  return { rows, range, today, real: true, error: cal && cal.ok === false ? cal.error || null : null };
+}
+
+/** Start the reads once. V.commits.state: 'loading' | 'ready'. */
+export function ensureCommits(V) {
+  if (V.commits) return V.commits;
+  const C = V.commits = { state: 'loading', rows: [], range: null, today: localYmd() };
+  const fx = typeof window !== 'undefined' && window.__c3planfx;
+  const done = (d) => { if (V.disposed) return; Object.assign(C, d, { state: 'ready' }); if (V.render) V.render(); };
+  if (window.__c3demo && fx) { Promise.resolve().then(() => done({ rows: fx.rows, range: rangeOf(C.today), real: false })); return C; }
+  readReal(V, C.today).then(done).catch(() => done({ rows: [], range: rangeOf(C.today), real: true, error: 'The commitments could not be read.' }));
+  return C;
+}
+
+/* ── progSVG ── */
+function progSvg(all, range, today, o) {
+  const a = 1; const b = Math.round((utc(range.end) - utc(range.start)) / DAY) + 1;
+  const day = (s) => Math.round((utc(s) - utc(range.start)) / DAY) + 1;
+  const TD = day(today); const cap = o.cap || 9;
+  const R = all.map((c) => ({ ...c, d: day(c.due), s: c.start ? day(c.start) : null, f: c.fc ? day(c.fc) : null }))
+    .filter((c) => { const lo = c.kind === 'init' ? c.s : c.d; const hi = Math.max(c.d, c.f || c.d); return (c.st === 'over' && TD >= a && TD <= b) || (hi >= a && lo <= b); })
+    .sort((x, y) => SEVR[x.st] - SEVR[y.st] || x.d - y.d).slice(0, cap);
+  const W = 720; const LW = 150; const SW = 104; const CW = W - LW - SW; const N = b - a + 1; const dw = CW / N; const rh = 30; const top = 28; const H = top + R.length * rh + 8;
+  const Xl = (n) => LW + (n - a) * dw; const Xc = (n) => Xl(n) + dw / 2;
+  const dl = (n) => dlab(ymd(utc(range.start) + (n - 1) * DAY));
+  const cid = 'pgc' + (o.uid || 'x');
+  const s = sv('svg', { class: 'pg', viewBox: `0 0 ${W} ${H}`, role: 'img', 'aria-label': 'Progress of commitments: on time, at risk, delayed and overdue', 'data-plan-chart': o.uid || '' }, sv('defs', {}, sv('clipPath', { id: cid }, sv('rect', { x: LW, y: 18, width: CW, height: H - 18 }))));
+  for (let n = a; n <= b; n++) { const d = new Date(utc(range.start) + (n - 1) * DAY); if (d.getUTCDay() === 1) s.append(sv('line', { x1: Xl(n), x2: Xl(n), y1: 18, y2: H - 4, stroke: 'var(--border)' }), tx(Xl(n) + 3, 14, String(d.getUTCDate()))); }
+  if (TD >= a && TD <= b) { const now = new Date(); const fr = clamp((now.getHours() + now.getMinutes() / 60 - 8) / 10, 0, 1); const tX = Xl(TD) + dw * fr; s.append(sv('rect', { x: Xl(TD), y: 20, width: dw, height: H - 24, fill: 'var(--accw)', rx: 6 }), sv('line', { x1: tX, x2: tX, y1: 20, y2: H - 4, stroke: 'var(--foreground)', 'stroke-width': 2 })); }
+  const stat = (c) => (c.st === 'over' ? 'Overdue ' + (c.late || Math.max(1, TD - c.d)) + ' d' : c.st === 'late' ? 'Delayed +' + (c.f - c.d) + ' d' : ST[c.st].l);
+  const phone = isPhone();
+  R.forEach((c, i) => {
+    const y = top + i * rh; const cy = y + rh / 2; const S = ST[c.st]; const nm = c.n.length > 17 ? c.n.slice(0, 16) + '…' : c.n; const dim = c.st === 'done' || c.st === 'park';
+    const g = sv('g', { opacity: dim ? 0.6 : 1, 'data-plan-row': c.id, 'data-status': c.st, ...(c.go && o.onOpen && !phone ? { role: 'button', tabindex: '0', 'data-a': 'goinit', 'data-k': String(c.go), 'aria-label': 'Open ' + c.n + ': ' + stat(c), style: 'cursor:pointer' } : {}) });
+    g.append(sv('rect', { x: 0, y, width: W, height: rh, fill: 'transparent' }), tx(0, cy + 4, nm, { class: 't' }));
+    if (c.kind === 'init') {
+      const xs = Xl(c.s); const xe = Xc(c.d); const has = c.pct != null; const xf = xs + (xe - xs) * (c.pct || 0); const ex = clamp((TD - c.s) / Math.max(1, c.d - c.s), 0, 1); const xt = xs + (xe - xs) * ex;
+      const bars = sv('g', { 'clip-path': `url(#${cid})` }, sv('rect', { x: xs, y: cy - 5, width: Math.max(2, xe - xs), height: 10, rx: 5, fill: S.c, 'fill-opacity': 0.2 }));
+      if (has) bars.append(sv('rect', { x: xs, y: cy - 5, width: Math.max(2, xf - xs), height: 10, rx: 5, fill: S.c }));
+      if (c.st !== 'park') bars.append(sv('line', { x1: xt, x2: xt, y1: cy - 9, y2: cy + 9, stroke: 'var(--foreground)', 'stroke-width': 2 }));
+      if (c.f > c.d) bars.append(sv('rect', { x: xe, y: cy - 2.5, width: Xc(c.f) - xe, height: 5, rx: 2.5, fill: BAD, 'fill-opacity': 0.6 }), sv('circle', { cx: Xc(c.f), cy, r: 6, fill: BAD, stroke: 'var(--card)', 'stroke-width': 2 }));
+      bars.append(sv('path', { d: `M${xe} ${cy - 9} l8 9 -8 9 -8 -9z`, fill: 'var(--card)', stroke: S.c, 'stroke-width': 2 }));
+      g.append(bars);
+      if (c.d > b) g.append(tx(Xl(b + 1) - 4, cy - 12, 'due ' + dl(c.d) + (c.f > c.d ? ' → ' + dl(c.f) : ''), { 'text-anchor': 'end', style: 'font-size:var(--fs-1)' }));
+    } else {
+      if (c.st === 'over') g.append(sv('line', { x1: Xc(Math.max(a, c.d)), x2: Xc(Math.min(b, TD)), y1: cy, y2: cy, stroke: BAD, 'stroke-width': 3, 'stroke-dasharray': '5 4', 'stroke-linecap': 'round' }));
+      if (c.d >= a && c.d <= b) { if (c.st === 'done') g.append(sv('circle', { cx: Xc(c.d), cy, r: 8, fill: OK, 'fill-opacity': 0.18 }), sv('path', { d: `M${Xc(c.d) - 4} ${cy} l3 3 5 -6`, fill: 'none', stroke: OK, 'stroke-width': 2, 'stroke-linecap': 'round' })); else g.append(sv('path', { d: `M${Xc(c.d)} ${cy - 8} l7 8 -7 8 -7 -8z`, fill: c.st === 'over' ? S.c : 'var(--card)', stroke: S.c, 'stroke-width': 2 })); }
+    }
+    g.append(tx(W - SW + 10, cy + 4, stat(c), { style: 'fill:' + S.c + ';font-weight:500' }));
+    const t = sv('title', {}); t.textContent = c.why || c.n; g.append(t);
+    if (c.go && o.onOpen && !phone) { const open = () => o.onOpen(c.go, c.n); g.addEventListener('click', open); g.addEventListener('keydown', (e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); open(); } }); }
+    s.append(g);
+  });
+  return { svg: s, shown: R, stat, hasFill: R.some((c) => c.kind === 'init' && c.pct != null), more: all.length - R.length };
+}
+
+/** The "Progress of commitments" card. title/sub as the mockup's heading. o: { cap, uid, onOpen(id, title) }. */
+export function progressCard(V, title, sub, o) {
+  const C = ensureCommits(V); const head = ['target', title, sub || ''];
+  const c = (...k) => card(head[0], head[1], head[2], ...k);
+  if (C.state !== 'ready') return c(el('div', { class: 'fold', 'data-plan-loading': '' }, c3ic('clock', 'sm'), 'Reading the commitments…'));
+  const rows = C.rows;
+  const out = rows.length ? progSvg(rows, C.range, C.today, o || {}) : null;
+  if (!out || !out.shown.length) { const e = c(el('div', { class: 'fold' }, c3ic('moon', 'sm'), C.error || 'No initiative has a promised date and no task has a due date in these two months. Give an initiative a promised date and a plan, or a task a due date, and it is drawn here with its forecast.')); e.setAttribute('data-plan-empty', 'true'); e.setAttribute('data-plan-card', (o && o.uid) || ''); return e; }
+  const sec = c(out.svg, isPhone() && o && o.onOpen ? el('ul', { class: 'list', role: 'list', style: 'margin:0;list-style:none;padding:0', 'data-plan-phone-rows': '' }, out.shown.filter((r) => r.go).map((r) => el('li', null,
+    el('button', { type: 'button', class: 'nrow', style: 'width:100%;min-height:44px;border:0;background:none;text-align:left;display:flex;justify-content:space-between;gap:8px;align-items:center;cursor:pointer', 'aria-label': 'Open ' + r.n, onClick: () => o.onOpen(r.go, r.n) },
+      el('b', null, r.n), el('span', { class: 'mono', style: 'font-size:var(--fs-2);color:' + ST[r.st].c }, out.stat({ ...r, d: Math.round((utc(r.due) - utc(C.range.start)) / DAY) + 1, f: r.fc ? Math.round((utc(r.fc) - utc(C.range.start)) / DAY) + 1 : 0 })))))) : null,
+  out.more > 0 && !window.__c3demo ? el('div', { class: 'dim mono', style: 'font-size:var(--fs-2)' }, '+' + out.more + ' more commitments not drawn') : null,
+  el('div', { class: 'pgl' }, el('span', null, '◇ due'), el('span', { style: 'color:' + BAD }, '● forecast'), out.hasFill ? el('span', null, '▬ actual progress') : el('span', null, '▬ planned span (no progress is recorded)'), el('span', null, '| where it should be today'),
+    el('span', { style: 'color:' + BAD }, '┅ overdue'), el('span', { style: 'color:' + OK }, '■ on time'), el('span', { style: 'color:' + WARN }, '■ at risk'), el('span', { style: 'color:' + BAD }, '■ delayed')));
+  sec.setAttribute('data-plan-card', (o && o.uid) || '');
+  return sec;
+}
+
+/* ── Why it slips and Dependencies ── */
+export function whySlipsCard(causes) {
+  if (!causes) return card('alert', 'Why it slips', '', el('div', { class: 'fold', 'data-plan-empty': 'why' }, c3ic('check', 'sm'), 'No initiative is past its promised date, so nothing slips.'));
+  const bars = el('div', { class: 'hbs' }, causes.rows.map((r, i) => el('div', { class: 'hbr', style: '--c:' + r[2] }, el('div', { class: 'l' }, el('span', null, r[0]), el('i', null, r[3])), el('div', { class: 'tk' }, el('u', { style: 'width:' + Math.max(2, Math.min(100, r[1] * 100)) + '%;animation-delay:' + (i * 90) + 'ms' })))));
+  const s = card('alert', 'Why it slips', causes.head, bars, el('div', { class: 'dim', style: 'font-size:var(--fs-2)' }, causes.note));
+  s.setAttribute('data-plan-why', '');
+  return s;
+}
+export function dependenciesCard(list) {
+  const s = card('org', 'Dependencies', '', list.length ? el('ul', { class: 'chgl' }, list.map((d) => el('li', { class: d.cls }, c3ic('alert', 'sm'), el('span', null, d.text))))
+    : el('div', { class: 'fold', 'data-plan-empty': 'deps' }, c3ic('check', 'sm'), 'No item waits on a late item. Dependencies between initiatives are not recorded, so only those inside one initiative are checked.'));
+  s.setAttribute('data-plan-deps', '');
+  return s;
+}
+
+/** Causes and dependencies from the whole-plan frames (GET /api/c3-timeline?initiative=). byInit: { id: { title, frames } }. Days past plan are per item, so chains overlap and do not add up. */
+export function slipFacts(byInit) {
+  let worst = null; const deps = [];
+  Object.keys(byInit).forEach((id) => {
+    const T = byInit[id]; const frames = (T && T.frames) || []; const f = frames[frames.length - 1]; if (!f) return;
+    if (f.slip_days > 0 && (!worst || f.slip_days > worst.f.slip_days)) worst = { id, f, title: T.title || id };
+    const by = new Map(f.items.map((t) => [t.id, t]));
+    f.items.forEach((t) => (t.after || []).forEach((k) => { const p = by.get(k); if (!p || p.state === 'done') return; const ps = p.forecast && p.forecast.status;
+      if (ps === 'delayed' || ps === 'overdue' || ps === 'at risk') deps.push({ cls: ps === 'at risk' ? 'warn' : 'bad', text: (T.title || id) + ': ' + (t.title || t.id) + ' waits on ' + (p.title || p.id) + ', which is ' + ps + '.', w: ps === 'at risk' ? 1 : 0 }); }));
+  });
+  deps.sort((a, b) => a.w - b.w);
+  if (!worst) return { causes: null, deps: deps.slice(0, 5) };
+  const items = worst.f.items.filter((t) => t.state !== 'done' && t.forecast && t.forecast.slip_days > 0).sort((a, b) => b.forecast.slip_days - a.forecast.slip_days).slice(0, 4);
+  const top = Math.max(1, ...items.map((t) => t.forecast.slip_days));
+  return { causes: { head: worst.title + ', ' + worst.f.slip_days + ' day' + (worst.f.slip_days === 1 ? '' : 's'),
+    rows: items.map((t, i) => [t.title || t.id, t.forecast.slip_days / top, i === 0 ? BAD : WARN, t.forecast.slip_days + ' d']), note: 'Days past each item\'s planned end. Items on one chain overlap, so the days do not add up. A cause such as scope or capacity is not recorded.' }, deps: deps.slice(0, 5) };
+}

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

@@ -0,0 +1,192 @@
+/* pm/c3-plan.js — the small pieces /c3.html adds around the real views so each tab has the mockup's furniture (console3.html):
+ *   planNode()        the "Plan: Decide what gates the day" lens row and the card deck (mountBriefing), one instance per tab. All
+ *                     instances share one read of GET /api/briefing (briefing-deck.js keeps it), so a page with five decks asks once.
+ *   dueCard()         the Calendar's "Due and moving today" list (mockup vCal), from GET /api/pm-items: the items due today or overdue.
+ *   crossLinks(go)    the line under an Initiatives lens header: "Calendar: N events today >" and "Work: N open items >" (mockup
+ *                     c3 lkrow), from GET /api/calendar-views (day) and GET /api/pm-items.
+ *   newInitLine(ctx)  the Initiatives add line "Start something new: one line is enough": the input, a disabled microphone, the spark
+ *                     button (opens the real new-initiative sheet with the line as its title) and the "try" suggestion pills.
+ * Nothing here writes; the sheet the spark button opens is the one the main app uses. The microphone is drawn disabled: nothing on
+ * a page may record, and the on-device model belongs to a Notes document. */
+import { el } from './dom.js';
+import { pmGet, pmPost } from './http.js';
+import { c3ic, c3ib } from './pm-work-view.js';
+import { mountBriefing, setBriefingScope } from './briefing-deck.js';
+import { needRow } from './c3-brief.js';
+
+/** Re-point a plan node at another scope (the Work tab's lens). Only the demo has a deck per scope. */
+export const setPlanScope = (host, scope) => setBriefingScope(host, scope);
+
+export function planNode(scope) {
+  const host = el('div', { 'data-c3pg': 'plan' });
+  mountBriefing(host, { noTicker: true, scope });
+  return host;
+}
+
+let items = null;
+const readItems = () => (items || (items = pmGet('/api/pm-items').then((j) => (j && j.ok ? j : null), () => null)));
+export const freshItems = () => { items = null; return readItems(); };
+
+const dayDiff = (a, b) => Math.round((Date.parse(a + 'T00:00:00Z') - Date.parse(b + 'T00:00:00Z')) / 86400000);
+
+export function dueCard() {
+  const count = el('span', { class: 'bdg g' }, '0');
+  const list = el('ul', { class: 'list', role: 'list' }, el('li', { class: 'fold', role: 'status' }, c3ic('clock', 'sm'), 'Reading the repository'));
+  const box = el('section', { class: 'card sect', 'data-c3pg': 'due-today', 'aria-label': 'Due and moving today' },
+    el('div', { class: 'sh2' }, el('h2', null, c3ic('clock', 'sm'), 'Due and moving today ', count)), list);
+  readItems().then((j) => {
+    if (!j) { list.replaceChildren(el('li', { class: 'fold' }, c3ic('alert', 'sm'), 'Your items could not be read.')); return; }
+    if (Array.isArray(j.due_today)) {   // optional (demo): the mockup's "Due and moving today" rows, each with its own sub line, time-left bar and status
+      count.textContent = String(j.due_today.length);
+      list.replaceChildren(...j.due_today.map((r) => {
+        const col = r.tone === 'bad' ? 'var(--destructive)' : r.tone === 'warn' ? 'var(--warning)' : 'var(--acc)';
+        return el('li', { class: 'nrow', 'data-due-row': r.id, style: 'grid-template-columns:auto minmax(0,1fr) auto' },
+          el('span', { class: 'ki', style: r.tone === 'warn' ? 'color:var(--warning)' : r.tone === 'bad' ? 'color:var(--destructive)' : null }, c3ic('alert')),
+          el('div', { class: 'nb' }, el('span', { class: 'tt' }, r.title), el('div', { class: 'chips' }, el('span', { class: 'dim mono', style: 'font-size:var(--fs-2)' }, r.sub)),
+            r.left ? el('div', { class: 'chips2', style: 'margin-top:6px;gap:8px' }, el('div', { class: 'fuse' }, el('i', { style: 'width:' + Math.round(r.left.pct * 100) + '%;background:' + (r.left.tone === 'warn' ? 'var(--warning)' : 'var(--acc)') })),
+              el('span', { class: 'mono', style: 'font-size:var(--fs-1);color:' + (r.left.tone === 'warn' ? 'var(--warning)' : 'var(--acc)') }, r.left.text)) : null),
+          el('span', { class: 'mono', style: 'font-size:var(--fs-2);align-self:center;color:' + col }, r.right));
+      }));
+      return;
+    }
+    const rows = ((j.lists || {}).today || []).filter((i) => !i.done);
+    count.textContent = String(rows.length);
+    list.replaceChildren(...(rows.length ? rows.map((i) => {
+      const late = i.due && i.due < j.today ? dayDiff(j.today, i.due) : 0;
+      return el('li', { class: 'nrow', 'data-due-row': i.id },
+        el('span', { class: 'ki' + (late ? ' hot' : '') }, c3ic(late ? 'alert' : 'clock')),
+        el('div', { class: 'nb' }, el('span', { class: 'tt' }, i.title),
+          el('div', { class: 'chips' }, i.due ? el('span', { class: 'chip2' }, c3ic('cal', 'sm'), i.due) : null, i.priority ? el('span', { class: 'fl ' + i.priority.toLowerCase() }, i.priority) : null)),
+        late ? el('span', { class: 'mono', style: 'font-size:var(--fs-2);color:var(--destructive)' }, late + ' d late') : null);
+    }) : [el('li', { class: 'fold' }, c3ic('check', 'sm'), 'Nothing is due today.')]));
+  });
+  return box;
+}
+
+export function crossLinks(go) {
+  const cal = el('button', { type: 'button', class: 'chip2 lk', 'data-c3-link': 'cal', onclick: () => go('cal') }, c3ic('cal', 'sm'), 'Calendar: reading');
+  const work = el('button', { type: 'button', class: 'chip2 lk', 'data-c3-link': 'work', onclick: () => go('work') }, c3ic('check', 'sm'), 'Work: reading');
+  const d = new Date(); const p = (n) => String(n).padStart(2, '0');
+  pmGet('/api/calendar-views?view=day&date=' + d.getFullYear() + '-' + p(d.getMonth() + 1) + '-' + p(d.getDate())).then((j) => {
+    const n = j && j.ok !== false ? (j.cells || []).reduce((t, c) => t + c.events.length, 0) : null;
+    cal.replaceChildren(c3ic('cal', 'sm'), n === null ? 'Calendar: not read' : 'Calendar: ' + n + ' event' + (n === 1 ? '' : 's') + ' today', c3ic('next', 'sm'));
+  }, () => cal.replaceChildren(c3ic('cal', 'sm'), 'Calendar: not read'));
+  readItems().then((j) => {
+    const n = j ? (j.items || []).filter((i) => !i.done).length : null;
+    work.replaceChildren(c3ic('check', 'sm'), n === null ? 'Work: not read' : 'Work: ' + n + ' open item' + (n === 1 ? '' : 's'), c3ic('next', 'sm'));
+  });
+  return el('div', { class: 'lkrow', 'data-c3pg': 'cross-links' }, cal, work);
+}
+
+/* The Calendar's own gantt rows for the quarter (GET /api/calendar-views), read once per page: the pulse and the portfolio card share them. */
+let quarter = null;
+export function readQuarter() {
+  if (!quarter) {
+    const d = new Date(); const p2 = (n) => String(n).padStart(2, '0');
+    quarter = pmGet('/api/calendar-views?view=quarter&date=' + d.getFullYear() + '-' + p2(d.getMonth() + 1) + '-' + p2(d.getDate()));
+  }
+  return quarter;
+}
+
+/* The Reports tab's "Portfolio status: promise against forecast" (mockup r2port): promised and forecast dates of the initiatives that have one. */
+export function portfolioCard() {
+  const body = el('div', null, el('p', { class: 'dim mono', style: 'font-size:var(--fs-2)', role: 'status' }, 'Reading the repository'));
+  const box = el('section', { class: 'card', 'data-c3pg': 'portfolio' }, el('h3', null, c3ic('tree'), 'Portfolio status ', el('span', { class: 'dim', style: 'text-transform:none;letter-spacing:0' }, 'promise against forecast')), body);
+  const ST = { 'on time': ['check', 'var(--success)'], 'at risk': ['alert', 'var(--warning)'], delayed: ['alert', 'var(--destructive)'], overdue: ['alert', 'var(--destructive)'] };
+  const end = (o) => (o && (o.end || o.start)) || '';
+  const MON = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+  let mock = false;   // rows that carry `pulse` (the demo's) are drawn as the mockup draws them: dates as 24 Oct; real rows keep the ISO date
+  const dlab = (v) => { const m = mock && /^\d{4}-(\d{2})-(\d{2})$/.exec(v || ''); return m ? Number(m[2]) + ' ' + MON[Number(m[1]) - 1] : v || ''; };   // the mockup's dlab: 24 Oct
+  readQuarter().then((j) => {
+    if (!j || j.ok === false) { body.replaceChildren(el('div', { class: 'fold w' }, c3ic('alert', 'sm'), 'The initiatives could not be read.')); return; }
+    const all = j.gantt || []; const rows = all.filter((g) => g.status !== 'no plan'); mock = rows.some((g) => g.pulse);
+    if (!rows.length) { body.replaceChildren(el('div', { class: 'fold' }, c3ic('moon', 'sm'), 'No initiative has a promised date yet.'), all.length ? el('p', { class: 'dim mono', style: 'font-size:var(--fs-2)' }, all.length + ' initiatives have no plan date.') : null); return; }
+    body.replaceChildren(el('table', { class: 'tb', style: (mock ? 'width:auto;' : 'width:100%;') + 'border-collapse:collapse;font-size:var(--fs-2)' },
+      el('thead', null, el('tr', null, el('th', { style: 'text-align:left' }), el('th', { class: 'mono', style: 'font-size:var(--fs-1);padding:0 8px' }, 'PROMISED'), el('th', { class: 'mono', style: 'font-size:var(--fs-1);padding:0 8px' }, 'FORECAST'), el('th'))),
+      el('tbody', null, ...rows.slice(0, 6).map((g) => { const s = mock ? (end(g.forecast) > (g.promised || '') ? ST.delayed : ['check', 'var(--success)']) : (ST[g.status] || ['moon', 'var(--muted-foreground)']);   // the mockup's colour is the dates: past the promise is red, otherwise green
+        return el('tr', { 'data-portfolio-row': g.id }, el('td', { style: 'padding:' + (mock ? '5px 8px 5px 0' : '4px 0') + ';font-weight:600' }, g.title || g.id), el('td', { class: 'mono', style: mock ? 'padding:0 8px' : null }, dlab(g.promised || '')), el('td', { class: 'mono', style: (mock ? 'padding:0 8px;' : '') + 'color:' + s[1] }, dlab(end(g.forecast))), el('td', { style: mock ? null : 'color:' + s[1] }, c3ic(s[0], 'sm'))); }))),
+    // Real rows keep what this call always did: with six rows or fewer it passed null, which replaceChildren writes as the text "null". Demo rows (mock) pass nothing.
+    ...(rows.length > 6 ? [el('p', { class: 'dim mono', style: 'font-size:var(--fs-2)' }, '+' + (rows.length - 6) + ' more in the Calendar tab')] : mock ? [] : [null]));
+  }, () => body.replaceChildren(el('div', { class: 'fold w' }, c3ic('alert', 'sm'), 'The initiatives could not be read.')));
+  return box;
+}
+
+const TRY = ['Self-serve billing for teams', 'Why returns hurt', 'Fix flaky CI on search'];
+const INTAKE_STEPS = ['Checking what was rejected before', 'Running the sharpness test', 'Choosing a lane', 'Finding an anchor'];
+/* The mockup's c3nistart (console3.html line 4790): a pill or the spark runs the intake IN PLACE. A card under the line ticks four steps every 0.65 s, then says what the
+ * agent suggests (lane, anchor, prior rejection). The real POST /api/intake/draft runs behind the steps. Nothing is created here: "Create it" opens the real form
+ * with the line, where the anchor is chosen and the create is pressed, as before. */
+export function newInitLine(ctx) {
+  const input = el('input', { type: 'text', placeholder: 'Start something new: one line is enough', 'aria-label': 'New initiative', autocomplete: 'off', 'data-c3pg': 'new-init' });
+  const slot = el('div', { 'data-c3pg': 'new-init-card' });
+  let run = 0;
+  const openForm = () => import('./new-initiative-sheet.js').then((m) => m.openNewInitiative({ repo: ctx.repo, ws: ctx.ws, anchors: (ctx.rows || []).map((r) => r.anchor), prefill: input.value.trim() ? { title: input.value.trim() } : null, onAdded: () => { input.value = ''; slot.replaceChildren(); if (ctx.onAdded) ctx.onAdded(); } }));
+  const reset = () => { run++; slot.replaceChildren(); input.value = ''; input.focus(); };
+  const steps = (text, n) => el('section', { class: 'card sect', 'data-c3pg': 'new-init-run' }, el('div', { class: 'sh2' }, el('h2', null, c3ic('spark', 'sm'), text)),
+    el('ul', { class: 'chgl' }, INTAKE_STEPS.map((st, i) => el('li', { class: i < n ? 'ok' : '' }, i < n ? c3ic('check', 'sm') : i === n ? el('span', { class: 'c3spin' }, c3ic('spark', 'sm')) : el('span', { style: 'width:14px' }), el('span', { class: i > n ? 'dim' : '' }, st)))));
+  const answer = (text, d) => {
+    const pr = d.prior_rejections || []; const conf = typeof d.confidence === 'number' ? Math.round(d.confidence * 100) : null;
+    return el('section', { class: 'card sect', 'data-c3pg': 'new-init-done' }, el('div', { class: 'sh2' }, el('h2', null, c3ic('spark', 'sm'), 'The agent suggests'), el('span', { class: 'r' }, c3ib('Start over', 'x', { onClick: reset }, 'sm'))),
+      el('div', { class: 'case' }, el('div', { class: 'sit' }, 'A ' + (d.lane || 'feature') + ' lane fits ' + text + '. Nothing is created until you press Create it.' + (conf != null ? ' ' + conf + '% sure.' : '')),
+        el('ul', { class: 'chgl' },
+          el('li', null, c3ic('init', 'sm'), el('span', null, 'Lane guess: ' + (d.lane || 'none')), el('span', { class: 'tag' }, 'Lane')),
+          el('li', { class: d.anchor_suggestion ? 'ok' : 'bad' }, c3ic(d.anchor_suggestion ? 'target' : 'alert', 'sm'), el('span', null, d.anchor_suggestion ? 'Anchor suggestion: ' + d.anchor_suggestion : 'No anchor yet: pick a KR or a health budget'), el('span', { class: 'tag' }, 'Anchor')),
+          el('li', { class: pr.length ? 'warn' : 'ok' }, c3ic(pr.length ? 'alert' : 'check', 'sm'), el('span', null, pr.length ? 'Close to something rejected before: ' + pr.map((r) => r.title || r.path || String(r)).join('; ') : 'Nothing like it was rejected before'), el('span', { class: 'tag' }, 'prior rejection')))),
+      el('div', { class: 'chips2' }, el('button', { type: 'button', class: 'chip2 lk', 'data-c3pg': 'new-init-open', onclick: () => openForm() }, c3ic('check', 'sm'), 'Create it: choose the anchor')));
+  };
+  const start = async (raw) => {
+    const text = String(raw || '').trim(); if (!text) return;
+    input.value = text; const me = ++run; let n = 0;
+    slot.replaceChildren(steps(text, 0));
+    const call = pmPost('/api/intake/draft', { line: text }).catch(() => null);
+    const t = setInterval(() => { if (me !== run) { clearInterval(t); return; } n++; if (n < INTAKE_STEPS.length) { slot.replaceChildren(steps(text, n)); return; } clearInterval(t);
+      call.then((out) => { if (me !== run) return; slot.replaceChildren(out && out.ok && out.draft ? answer(text, out.draft) : el('div', { class: 'fold w', role: 'alert' }, c3ic('alert', 'sm'), (out && out.error) || 'The draft did not answer.')); }); }, 650);
+  };
+  input.addEventListener('keydown', (e) => { if (e.key === 'Enter' && !e.isComposing) start(input.value); });
+  const mic = c3ib('Speak is off on this line: on-device dictation runs in Notes, in the main app. Type the line here.', 'mic', { disabled: true });
+  const spark = c3ib('Start: an agent runs the intake', 'spark', { 'data-a': 'c3nigo', 'data-c3pg': 'new-init-go', onClick: () => start(input.value) }, 'pri');
+  return el('div', null, el('div', { class: 'c3add' }, el('div', { class: 'form' }, input, mic, spark),
+    el('div', { class: 'chips2' }, el('span', { class: 'dim mono', style: 'font-size:var(--fs-2)' }, 'try'),
+      ...TRY.map((t) => el('button', { type: 'button', class: 'pill', 'data-a': 'c3niex', 'data-k': t, onclick: () => start(t) }, t)))), slot);
+}
+
+/* The Briefing's "Needs you" row of the mockup (console3.html needRow2, line 2345) is c3-brief.js needRow: it opens its case file in place, swipes and
+ * answers keys. This is the old name, kept so a caller of needsRow(n, i) gets the same row. The third argument (the old jump to the deck) is gone: a
+ * press on the row opens the row, as the mockup does. */
+export const needsRow = (n, i, ctx) => needRow(n, i, ctx && typeof ctx === 'object' ? ctx : {});
+
+/* The mockup's pulse (console3.html lines 1448 to 1457): one bar of the rag colours, a row per initiative with its reason and microTL (promised
+ * against forecast on a 40 day line). Drawn only for rows that carry `pulse` ({ c, why }), which the calendar route does not send. */
+const RAGC = { red: ['bad', 'var(--destructive)'], amber: ['warn', 'var(--warning)'], green: ['ok', 'var(--success)'], park: ['', 'var(--ring)'] };
+function microTL(g, today) {
+  const NSV = 'http://www.w3.org/2000/svg'; const day = (v) => Math.round((Date.parse(String(v).slice(0, 10) + 'T00:00:00Z') - Date.parse(today + 'T00:00:00Z')) / 86400000);
+  const X = (d) => 6 + Math.min(40, Math.max(0, d)) / 40 * 98;
+  const s = document.createElementNS(NSV, 'svg'); s.setAttribute('width', 112); s.setAttribute('height', 18); s.setAttribute('viewBox', '0 0 112 18'); s.setAttribute('role', 'img'); s.setAttribute('aria-label', 'Promised against forecast');
+  const add = (tag, a) => { const n = document.createElementNS(NSV, tag); for (const k in a) n.setAttribute(k, a[k]); s.appendChild(n); };
+  add('line', { x1: 6, x2: 104, y1: 9, y2: 9, stroke: 'var(--border)', 'stroke-width': 2, 'stroke-linecap': 'round' }); add('line', { x1: 6, x2: 6, y1: 3, y2: 15, stroke: 'var(--foreground)', 'stroke-width': 2 });
+  if (g.pulse.c === 'park' || !g.promised) add('line', { x1: 6, x2: 40, y1: 9, y2: 9, stroke: 'var(--ring)', 'stroke-width': 2, 'stroke-dasharray': '3 4' });
+  else {
+    const p = day(g.promised); const f = day((g.forecast && (g.forecast.end || g.forecast.start)) || g.promised); const late = f > p;
+    if (late) add('rect', { x: X(p), y: 7, width: X(f) - X(p), height: 4, rx: 2, fill: 'var(--destructive)' });
+    add('path', { d: `M${X(p)} 3 l5 6 -5 6 -5 -6z`, fill: 'var(--background)', stroke: 'var(--foreground)', 'stroke-width': 1.8 });
+    if (late) add('circle', { cx: X(f), cy: 9, r: 3.5, fill: 'var(--destructive)' });
+  }
+  return s;
+}
+/* The mockup's pulse (line 1448): each colour of the bar is a button that filters the rows to that status (pressed again, all), and each row is a button that
+ * goes to its initiative (`goinit`). `go(id)` is the caller's jump to the Initiatives tab. */
+export const mockPulse = (rows, today, go) => {
+  const cnt = {}; rows.forEach((g) => { cnt[g.pulse.c] = (cnt[g.pulse.c] || 0) + 1; });
+  const WORD = { red: 'red', amber: 'amber', green: 'green', park: 'parked' };
+  let f = null;
+  const list = el('div');
+  const segs = ['red', 'amber', 'green', 'park'].filter((k) => cnt[k]).map((k) => el('button', { type: 'button', class: 'pseg', 'data-a': 'pulse', 'data-k': k, style: 'flex:' + cnt[k] + ';height:10px;border-radius:5px;border:0;padding:0;background:' + RAGC[k][1] + ';cursor:pointer',
+    title: cnt[k] + ' ' + WORD[k], 'aria-label': cnt[k] + ' ' + WORD[k], 'aria-pressed': 'false', onclick: () => { f = f === k ? null : k; draw(); } }));
+  const draw = () => {
+    segs.forEach((b) => { const on = f === b.dataset.k; b.setAttribute('aria-pressed', String(on)); b.style.opacity = f && !on ? '.28' : '1'; });
+    list.replaceChildren(...rows.filter((g) => !f || g.pulse.c === f).map((g) => el('button', { type: 'button', class: 'prow', 'data-c3pg-prow': g.id, 'data-a': 'goinit', 'aria-label': 'Open ' + (g.title || g.id) + ': ' + g.pulse.why, onclick: () => { if (go) go(g.id); } },
+      el('span', { class: 'dotc ' + RAGC[g.pulse.c][0] }), el('span', { style: 'min-width:0;text-align:left' }, el('b', { style: 'font-size:var(--fs-3)' }, g.title || g.id), el('div', { class: 'dim', style: 'font-size:var(--fs-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis' }, g.pulse.why)), microTL(g, today))));
+  };
+  draw();
+  return [el('div', { class: 'pbs', role: 'group', 'aria-label': 'Status of initiatives' }, ...segs), list];
+};