create-pmos 0.123.0 → 0.125.0

package/workspace/public/pm/briefing-deck.js

@@ -0,0 +1,415 @@
+/* pm/briefing-deck.js — the Briefing view (console3 wave C1), built on the console3 mockup's own markup and CSS.
+ * The mockup (prototype/pmos-console-handoff/mockups/console3.html) is the UI: the stance bar with the day-part switch (.stance,
+ * .seg.dp), the running line (.tick, .tkt), the card deck (.deck, .fc, .cf, .hero, .dk, .dkd), the flip to the case file (.fb,
+ * .case, .chgl, .opts, .slt, .cft), the tilt and the flip animation. The styles are pm/console3.css (see pm/console3-lift.md).
+ * This file keeps the data call (GET /api/briefing, the signal engine's cards) and the model (briefing-model.js) and draws
+ * what the engine sent: at most five cards, none invented. A field the engine does not supply is left out.
+ *
+ * Read-only. The suggested move and the options are text; the slide-to-confirm on the case file is a disabled placeholder until
+ * the outbox is mounted here. Nothing in this view sends anything.
+ * Hero kinds drawn: line, big-number, ring, bars. Text only: two-bars, rows, mini-graph (the engine gives them no values to
+ * plot, so their facts are listed as text and the kind is named).
+ * Not registered with the registry (Today has no view registry): dest-today.js imports mountBriefing/disposeBriefing. */
+import { el } from './dom.js';
+import { LENSES, TAG_STYLE, PART_STYLE, cardView, dayPartFor, nextCards, swipeDir, sizeFor, caseModelOf, rawOption } from './briefing-model.js';
+import { BX, caseFile, toast } from './c3-brief.js';
+import { ensureC3Css, c3ic, c3ring, c3Phone } from './pm-work-view.js';
+import { listenButton } from './shell-readaloud.js';
+
+const NS = 'http://www.w3.org/2000/svg';
+const roots = new WeakMap();   // host -> state
+const reduced = () => typeof matchMedia === 'function' && matchMedia('(prefers-reduced-motion: reduce)').matches;
+const small = 'font-size:var(--fs-2)';
+
+function svg(tag, attrs, ...kids) {
+  const n = document.createElementNS(NS, 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;
+}
+
+/* ── the hero, one per data shape: the mockup's hNum, hRing, hBars and hRows (console3.html lines 3095 to 3101) ──── */
+
+function heroLine(v, p) {
+  const W = 340; const H = 60; const lo = Math.min(...p); const hi = Math.max(...p); const r = hi - lo || 1;
+  const X = (i) => 4 + i * (W - 8) / (p.length - 1); const Y = (y) => H - 6 - ((y - lo) / r) * (H - 26);
+  const pts = p.map((y, i) => X(i).toFixed(1) + ',' + Y(y).toFixed(1)).join(' ');
+  const last = p[p.length - 1];
+  return el('div', { class: 'hn' },
+    el('div', { class: 'a' }, el('b', null, String(last))),
+    el('div', { class: 'd', style: 'color:var(--muted-foreground)' }, 'from ' + p[0] + ' over ' + p.length + ' points'),
+    svg('svg', { viewBox: `0 0 ${W} ${H}`, role: 'img', 'aria-label': 'trend of ' + p.length + ' points, from ' + p[0] + ' to ' + last },
+      svg('polygon', { points: `4,${H - 4} ${pts} ${W - 4},${H - 4}`, fill: 'var(--acc)', 'fill-opacity': '.1' }),
+      svg('polyline', { class: 'draw', pathLength: '1', points: pts, fill: 'none', stroke: 'var(--acc)', 'stroke-width': '3', 'stroke-linecap': 'round', 'stroke-linejoin': 'round' }),
+      svg('circle', { cx: X(p.length - 1), cy: Y(last), r: '4.5', fill: 'var(--acc)', stroke: 'var(--card)', 'stroke-width': '2' })));
+}
+
+
+/* ── the mockup's richer heroes (hChain, hRing, hNum, hRows, hBars, hTiles, hSegs and the multi-line chart, console3.html lines 3095 to
+ * 3101 and 3366): drawn only when a card carries `hero.rich`, which the engine does not send (the /c3.html demo mode does). ──────────── */
+function gateRing(r) {
+  const cc = 2 * Math.PI * 38; const col = (r && r.tone) || 'var(--acc)'; const L = (r && r.lines) || [];
+  return svg('svg', { width: 96, height: 96, viewBox: '0 0 96 96', role: 'img', 'aria-label': L.join(' ') },
+    svg('circle', { cx: 48, cy: 48, r: 38, fill: 'none', stroke: 'var(--muted)', 'stroke-width': 7 }),
+    svg('circle', { class: 'rg', cx: 48, cy: 48, r: 38, fill: 'none', stroke: col, 'stroke-width': 7, 'stroke-linecap': 'round', 'stroke-dasharray': (cc * (r.frac || 0)) + ' ' + cc, transform: 'rotate(-90 48 48)' }),
+    txt(48, 50, L[0] || '', { 'text-anchor': 'middle', class: 't', style: 'font-size:var(--fs-3);font-weight:600' }), txt(48, 65, L[1] || '', { 'text-anchor': 'middle', style: 'font-size:var(--fs-1)' }));
+}
+const txt = (x, y, s, a) => { const t = svg('text', { x, y, ...(a || {}) }); t.textContent = s; return t; };
+const rows = (a) => el('div', { class: 'hrw' }, ...a.map((r) => el('div', { class: 'hrr ' + (r[2] || '') }, c3ic(r[0], 'sm'), el('span', null, r[1]), r[3] ? el('i', null, r[3]) : null)));
+
+function richHero(r) {
+  if (r.kind === 'chain') {
+    return el('div', { class: 'hg' }, gateRing(r.ring), el('div', { class: 'hch' }, ...r.steps.map((n) => el('div', { style: '--c:' + n[2] }, el('b', null, n[0]), el('span', null, n[1])))));
+  }
+  if (r.kind === 'ring') {
+    const body = r.lines
+      ? [el('b', null, r.cap), ...r.lines.map((x) => el('span', { style: 'display:flex;gap:6px;align-items:center;white-space:nowrap;' + (x[2] ? '' : 'color:var(--warning)') }, c3ic(x[2] ? 'check' : x[0], 'sm'), x[1]))]
+      : [el('b', null, r.cap), r.sub ? el('span', null, r.sub) : null];
+    return el('div', { class: 'hr' }, c3ring(r.done, r.total, r.size || 96), el('div', { class: 'c' }, ...body));
+  }
+  if (r.kind === 'rows') return rows(r.rows);
+  if (r.kind === 'bars') {
+    return el('div', { class: 'hbs' }, ...r.bars.map((b, i) => el('div', { class: 'hbr', style: '--c:' + b[2] }, el('div', { class: 'l' }, el('span', null, b[0]), el('i', null, b[3])),
+      el('div', { class: 'tk' }, el('u', { style: 'width:' + Math.max(2, b[1] * 100) + '%;animation-delay:' + (i * 90) + 'ms' })))));
+  }
+  if (r.kind === 'tiles') return el('div', { class: 'htl', style: '--n:' + r.tiles.length }, ...r.tiles.map((t) => el('div', { style: '--c:' + t[2] }, el('b', null, t[0]), el('span', null, t[1]))));
+  if (r.kind === 'num') {
+    const a = r.arr; const W = 340; const H = 60; const lo = Math.min(...a, r.target); const hi = Math.max(...a, r.target); const q = hi - lo || 1;
+    const X = (i) => 4 + i * (W - 8) / (a.length - 1); const Y = (v) => H - 6 - ((v - lo) / q) * (H - 26);
+    const pts = a.map((v, i) => X(i).toFixed(1) + ',' + Y(v).toFixed(1)).join(' ');
+    return el('div', { class: 'hn' }, el('div', { class: 'a' }, el('b', null, r.big), el('span', null, r.unit)), el('div', { class: 'd', style: 'color:' + r.tone }, r.delta),
+      svg('svg', { viewBox: `0 0 ${W} ${H}`, role: 'img', 'aria-label': 'Trend against target' },
+        svg('line', { x1: 4, x2: W - 4, y1: Y(r.target), y2: Y(r.target), stroke: 'var(--ring)', 'stroke-dasharray': '4 4' }), txt(W - 4, Y(r.target) - 4, 'target ' + r.target + r.unit, { 'text-anchor': 'end' }),
+        svg('polygon', { points: `4,${H - 4} ${pts} ${W - 4},${H - 4}`, fill: r.tone, 'fill-opacity': '.1' }),
+        svg('polyline', { class: 'draw', pathLength: '1', points: pts, fill: 'none', stroke: r.tone, 'stroke-width': 3, 'stroke-linecap': 'round', 'stroke-linejoin': 'round' }),
+        svg('circle', { cx: X(a.length - 1), cy: Y(a[a.length - 1]), r: 4.5, fill: r.tone, stroke: 'var(--card)', 'stroke-width': 2 })));
+  }
+  if (r.kind === 'segs') {
+    const W = 340; const H = 84; const tot = r.segs.reduce((t, x) => t + x[1], 0) || 1; let x0 = 0;
+    const s = svg('svg', { viewBox: `0 0 ${W} ${H}`, role: 'img', 'aria-label': 'Effort in minutes per item' });
+    r.segs.forEach((g, i) => {
+      const w = (W - (r.segs.length - 1) * 4) * (g[1] / tot); const lab = g[0].length > Math.max(5, Math.floor(w / 6.5)) ? g[0].slice(0, Math.max(4, Math.floor(w / 6.5) - 1)) + '…' : g[0];
+      s.append(svg('rect', { class: 'grow', style: 'animation-delay:' + (i * 90) + 'ms', x: x0, y: 20, width: w, height: 30, rx: 9, fill: g[2], opacity: '.92' }), txt(x0 + w / 2, 39, g[1] + ' min', { 'text-anchor': 'middle', style: 'fill:#fff;font-weight:500' }), txt(x0 + w / 2, 68, lab, { 'text-anchor': 'middle' }));
+      x0 += w + 4;
+    });
+    s.append(txt(0, 12, 'total ' + r.total, {}));
+    return s;
+  }
+  if (r.kind === 'axis') {   // the mockup's "Today with the due times" axis (08:00 to 18:00): a focus window, due-time diamonds and now
+    const X = (h) => 8 + (h - 8) / 10 * 324; const s = svg('svg', { viewBox: '0 0 340 92', role: 'img', 'aria-label': 'Today with the due times of your items' });
+    s.append(svg('rect', { x: X(r.focus[0]).toFixed(1), y: 30, width: (X(r.focus[1]) - X(r.focus[0])).toFixed(1), height: 30, rx: 8, fill: 'var(--purple)', 'fill-opacity': '.12', stroke: 'var(--purple)', 'stroke-dasharray': '4 3' }), txt(((X(r.focus[0]) + X(r.focus[1])) / 2).toFixed(1), 49, 'focus', { 'text-anchor': 'middle', style: 'fill:var(--purple)' }),
+      svg('line', { x1: 8, x2: 332, y1: 45, y2: 45, stroke: 'var(--border)', 'stroke-width': 2 }));
+    [8, 10, 12, 14, 16, 18].forEach((h) => s.append(txt(X(h), 84, String(h).padStart(2, '0') + ':00', { 'text-anchor': h === 8 ? 'start' : h === 18 ? 'end' : 'middle' }), svg('line', { x1: X(h), x2: X(h), y1: 62, y2: 68, stroke: 'var(--ring)' })));
+    r.marks.forEach((m) => { const x = X(m[0]); const g = svg('g', {}, svg('path', { d: `M${x} 36 l8 9 -8 9 -8 -9z`, fill: m[2], stroke: 'var(--card)', 'stroke-width': 2 }), txt(x, m[3] || 19, m[1], { 'text-anchor': 'middle', class: 't' })); s.append(g); });
+    s.append(svg('line', { x1: X(r.now), x2: X(r.now), y1: 30, y2: 62, stroke: 'var(--foreground)', 'stroke-width': 2 }));
+    return s;
+  }
+  if (r.kind === 'days') {   // the mockup's "items per day over the next seven working days": a tile per day, a dot where an item lands
+    const D = r.days; const w = 40.57; const s = svg('svg', { viewBox: '0 0 340 92', role: 'img', 'aria-label': 'Items per day over the next seven working days' });
+    D.forEach((d, i) => { const x = 4 + i * 48.57; s.append(svg('rect', { x, y: 8, width: w, height: 62, rx: 10, fill: i === 0 ? 'var(--accw)' : 'var(--muted)' }), txt(x + w / 2, 84, d[0], { 'text-anchor': 'middle', class: i === 0 ? 't' : '' }),
+      d[1] ? svg('circle', { cx: x + w / 2, cy: 52, r: 6, fill: 'var(--acc)' }) : txt(x + w / 2, 44, '·', { 'text-anchor': 'middle', style: 'fill:var(--ring)' })); });
+    return s;
+  }
+  if (r.kind === 'multi') {
+    const W = 340; const H = 96; const all = r.lines.flatMap((l) => l.pts); const lo = Math.min(...all); const hi = Math.max(...all); const N = Math.max(...r.lines.map((l) => (l.from || 0) + l.pts.length)) - 1;
+    const X = (i) => 6 + i / N * (W - 12); const Y = (v) => H - 14 - (v - lo) / (hi - lo || 1) * (H - 26);
+    const s = svg('svg', { viewBox: `0 0 ${W} ${H}`, role: 'img', 'aria-label': 'North star against plan' });
+    r.lines.forEach((l) => s.append(svg('polyline', { points: l.pts.map((v, i) => X((l.from || 0) + i).toFixed(1) + ',' + Y(v).toFixed(1)).join(' '), fill: 'none', stroke: l.color, 'stroke-width': l.width, 'stroke-dasharray': l.dash || null, 'stroke-linecap': 'round' })));
+    const act = r.lines[1]; s.append(svg('circle', { cx: X(act.pts.length - 1), cy: Y(act.pts[act.pts.length - 1]), r: 5, fill: 'var(--acc)', stroke: 'var(--card)', 'stroke-width': 2 }));
+    s.append(txt(X(act.pts.length - 1) - 6, H - 2, 'now', { 'text-anchor': 'end' }), txt(W - 6, Y(r.lines[0].pts[r.lines[0].pts.length - 1]) - 6, 'plan', { 'text-anchor': 'end' }),
+      txt(W - 6, Y(r.lines[2].pts[r.lines[2].pts.length - 1]) + 14, 'at today\'s pace', { 'text-anchor': 'end', style: 'fill:var(--warning)' }));
+    return s;
+  }
+  return null;
+}
+
+function hero(v) {
+  if (v.rich) { const h = richHero(v.rich); if (h) return h; }
+  const k = v.hero.kind; const t = v.terms || {};
+  if (k === 'line' && v.hero.points && v.hero.points.length >= 3) return heroLine(v, v.hero.points);
+  if (k === 'ring' && t.impact != null) {
+    const f = Math.max(0, Math.min(1, t.impact));
+    return el('div', { class: 'hr' }, c3ring(Math.round(f * 100), 100, 96, Math.round(f * 100) + '%'), el('div', { class: 'c' }, el('b', null, 'impact ' + Math.round(f * 100) + '%')));
+  }
+  if (k === 'bars' && (t.impact != null || t.urgency != null)) {
+    const row = (n, x, c, i) => (x == null ? null : el('div', { class: 'hbr', style: '--c:' + c },
+      el('div', { class: 'l' }, el('span', null, n), el('i', null, x.toFixed(2))),
+      el('div', { class: 'tk' }, el('u', { style: 'width:' + Math.max(2, Math.round(Math.max(0, Math.min(1, x)) * 100)) + '%;animation-delay:' + (i * 90) + 'ms' }))));
+    return el('div', { class: 'hbs', 'aria-label': 'score terms' }, row('impact', t.impact, 'var(--acc)', 0), row('urgency', t.urgency, 'var(--warning)', 1), row('irreversible', t.irreversible, 'var(--destructive)', 2));
+  }
+  if (k === 'big-number') {
+    const n = v.headline.match(/\d+(\.\d+)?/);
+    const big = n ? n[0] : (v.deadline && v.deadline.days != null ? String(Math.round(v.deadline.days)) : null);
+    if (big) return el('div', { class: 'hn' }, el('div', { class: 'a' }, el('b', null, big), v.deadline && !n ? el('span', null, 'days') : null));
+  }
+  // two-bars, rows, mini-graph (and any kind without values): the facts as text rows, named so the gap is visible
+  return el('div', { class: 'hrw', 'data-hero-text': k }, ...(v.facts.length ? v.facts : [v.headline]).map((f) => el('div', { class: 'hrr' }, c3ic('info', 'sm'), el('span', null, f))));
+}
+
+/* ── one card: the mockup's cardHtml (line 2324): .fc > .ff (.tg + .cf) and .fb (.fh + .case) ──────────────────────── */
+
+const tagStyle = (v) => TAG_STYLE[v.tag] || TAG_STYLE['Just in'];
+const pct = (x) => Math.round(Math.max(0, Math.min(1, x)) * 100);
+
+function eyebrow(v) {
+  const T = tagStyle(v);
+  if (v.eyebrow) return [el('span', { class: 'tg', style: '--tc:var(--muted-foreground)' }, c3ic(v.eyebrow.icon, 'sm'), v.eyebrow.label), v.pov ? el('span', { class: 'tag pov' }, v.pov) : null];
+  const tg = el('span', { class: 'tg' + (T.filled ? ' f' : ''), title: T.q }, c3ic(T.icon, 'sm'), v.tag);
+  return v.pov ? [tg, el('span', { class: 'tag pov' }, v.pov)] : tg;
+}
+
+/* the mockup's .kp tiles (line 765): numbers the card carries, only the ones it carries */
+function kpis(v) {
+  const t = v.terms || {};
+  const a = [];
+  if (t.impact != null) a.push([pct(t.impact) + '%', 'impact', 'var(--acc)']);
+  if (t.urgency != null) a.push([pct(t.urgency) + '%', 'urgency', 'var(--warning)']);
+  if (t.score != null) a.push([String(Math.round(t.score * 100) / 100), 'score', 'var(--success)']);
+  return a.slice(0, 3).map((k) => el('div', { class: 'kp', style: '--c:' + k[2] }, el('b', null, k[0]), el('span', null, k[1])));
+}
+
+function front(v) {
+  const rec = v.move ? el('span', { class: 'cfr' }, c3ic('spark', 'sm'), 'Suggested: ' + (v.move.length > 46 ? v.move.slice(0, 45) + '…' : v.move) + (v.conf != null ? ' · ' + Math.round(v.conf) + '%' : ''))
+    : el('span', { class: 'cfr n' }, 'Tap to see the story ', c3ic('next', 'sm'));
+  /* a card with factsX (the demo's mockup cards) draws its own icon per fact and no deadline line; an engine card is drawn as before */
+  const facts = v.factsX ? v.factsX.map((f) => el('span', null, c3ic(f.icon, 'sm'), f.text)) : v.facts.map((f) => el('span', null, c3ic('info', 'sm'), f));
+  if (v.deadline && !v.factsX) facts.push(el('span', null, c3ic('clock', 'sm'), 'deadline: ' + (v.deadline.days == null ? 'unknown' : v.deadline.text)));
+  return el('div', { class: 'ff' },
+    el('div', null, eyebrow(v)),
+    el('div', { class: 'cf' },
+      el('div', { class: 'cfa' }, el('h2', null, v.headline), v.sub ? el('div', { class: 'cfs' }, v.sub) : v.why ? el('div', { class: 'cfs', 'data-bf-why': '' }, 'why shown: ' + v.why) : null),
+      el('div', { class: 'cfh' }, el('div', { class: 'hero', 'data-hero': v.hero.kind }, hero(v))),
+      el('div', { class: 'cfk' }, ...(v.kpisX ? v.kpisX.map((k) => el('div', { class: 'kp', style: '--c:' + (k.c || 'var(--acc)') }, el('b', null, k.v), el('span', null, k.l))) : kpis(v))),
+      el('div', { class: 'cff' }, el('div', { class: 'cfx' }, ...facts), rec)));
+}
+
+/* the case file: .fh, then .case (c3-case.js: .sit, .chgl evidence, .opts with effects and a confidence figure, .slt, .cft). The slide is live only where
+ * something can carry the option out: in the demo (BX.sim) it records the choice in memory and toasts with an Undo; in real mode an engine card has no
+ * route and no channel, so its case is `outward` and the slide is drawn disabled with the reason (c3-brief.js, briefing-model.js caseModelOf). */
+function back(S, v) {
+  const T = tagStyle(v); const raw = caseModelOf(v, { sim: BX.sim }); const key = v.key || '';
+  let cardEl = null; let box = null;
+  const doneChips = (c) => {
+    const o = (raw.opts || raw.options || []).find((q) => String(q.id) === String(BX.cdone[key]));
+    c.querySelector('.opts') && c.querySelector('.opts').remove(); c.querySelector('.c3slide') && c.querySelector('.c3slide').remove();
+    const chips = el('div', { class: 'chips2', 'data-bf': 'done' }, el('span', { class: 'st ok' }, c3ic('check', 'sm'), o ? (o.l || o.label) : 'Done'),
+      el('button', { type: 'button', class: 'chip2 lk', 'data-bf': 'undo', onclick: (e) => { e.stopPropagation(); undo(); } }, c3ic('undo', 'sm'), 'undo'));
+    const ft = c.querySelector('.cft'); if (ft) ft.before(chips); else c.append(chips);
+  };
+  const build = () => {
+    const done = BX.cdone[key];
+    let c;
+    if (done && raw.doneModel) c = caseFile(raw.doneModel(done));
+    else {
+      c = caseFile(raw, { picked: BX.pick['c' + key], onPick: (id) => { BX.pick['c' + key] = id; }, onConfirm: choose });
+      if (done) doneChips(c);
+    }
+    c.setAttribute('data-bf-case', '');
+    return c;
+  };
+  const refresh = () => { const old = box.querySelector('.case'); const c = build(); if (old) { if (old.c3case) old.c3case.dispose(); old.replaceWith(c); } else box.append(c); };
+  const mark = () => { if (!cardEl) return; const on = !!BX.cdone[key]; cardEl.classList.toggle('ok', on); const r = cardEl.querySelector(':scope > .rsv'); if (on && !r) cardEl.querySelector('.flipg').before(el('span', { class: 'rsv' }, c3ic('check', 'sm'), 'done')); else if (!on && r) r.remove(); };
+  function undo() { delete BX.cdone[key]; mark(); refresh(); }
+  function choose({ option }) {
+    const ro = rawOption(raw, option.id) || {};
+    BX.cdone[key] = option.id; mark(); refresh();
+    const decide = String(ro.do || '').startsWith('decide:');
+    toast(ro.msg || (decide ? 'Decision logged. Follow-up drafts are in the briefing. Nothing was sent.' : 'Done: ' + option.label), undo);
+    if (decide && cardEl) flipTo(S, cardEl, false);
+  }
+  box = el('div', { class: 'fb' },
+    el('div', { class: 'fh', 'data-bf': 'back', 'data-a': 'cflip', title: 'Flip back (Esc)' }, eyebrow(v), el('span', { class: 'why2' }, T.q.split(': ')[1], c3ic('undo', 'sm'))), build());
+  box.bind = (c) => { cardEl = c; mark(); };
+  return box;
+}
+
+function card(S, v, i, n) {
+  const T = tagStyle(v); const bk = back(S, v);
+  const c = el('article', {
+    class: 'fc' + (i === 0 ? ' on' : ''), tabindex: '0', role: 'button', 'aria-expanded': 'false', 'aria-description': 'card ' + (i + 1) + ' of ' + n,
+    'data-a': 'cflip', 'data-bf': 'flip', 'data-bf-card': v.key || '', 'data-tag': T.key, 'data-tag-label': v.tag, style: '--tc:' + (v.eyebrow ? 'var(--muted-foreground)' : T.color),
+  }, front(v), el('span', { class: 'flipg', 'aria-hidden': 'true' }, c3ic('undo', 'sm')), bk);
+  bk.bind(c);
+  /* named by its own headline (aria-labelledby) rather than a long aria-label: the card's name is its text, and the position is its description */
+  const hd = c.querySelector('h2'); if (hd) { hd.id = 'fc-h-' + String(v.key || i).replace(/\W+/g, '-') + '-' + i; c.setAttribute('aria-labelledby', hd.id); } else c.setAttribute('aria-label', v.tag + ': ' + v.headline);
+  return c;
+}
+
+/* ── flip, tilt, deck sync: the mockup's flipTo (line 2403), tilt (line 2414) and deckSync (line 2163) ───────────────── */
+
+function flipTo(S, c, force) {
+  if (!c) return;
+  const deck = c.parentNode;
+  if (!c.classList.contains('on') && !c.classList.contains('back')) { deck.scrollTo({ left: c.offsetLeft - deck.children[0].offsetLeft, behavior: reduced() ? 'auto' : 'smooth' }); return; }
+  const toBack = force !== undefined ? force : !c.classList.contains('back');
+  deck.querySelectorAll('.fc.back').forEach((o) => { if (o !== c) { o.classList.remove('back'); o.setAttribute('aria-expanded', 'false'); } });
+  const sw = () => { c.classList.toggle('back', toBack); c.setAttribute('aria-expanded', String(toBack)); if (toBack && c.scrollIntoView) c.scrollIntoView({ block: 'nearest', behavior: reduced() ? 'auto' : 'smooth' }); };
+  S.flip = toBack ? c.dataset.bfCard || '1' : null;
+  if (reduced()) { sw(); return; }
+  c.classList.add('fl-out');
+  setTimeout(() => { c.classList.remove('fl-out'); sw(); c.classList.add('fl-in'); setTimeout(() => c.classList.remove('fl-in'), 320); }, 170);
+}
+
+function deckSync(S, deck) {
+  const f = deck.children[0]; if (!f) return;
+  const w = f.offsetWidth + 12;
+  const i = Math.max(0, Math.min(deck.children.length - 1, Math.round(deck.scrollLeft / w)));
+  S.i = i;
+  [].forEach.call(deck.children, (c, j) => c.classList.toggle('on', j === i));
+  S.root.querySelectorAll('.dkd').forEach((x, j) => x.setAttribute('aria-current', String(j === i)));
+}
+
+function scrollToCard(S, deck, i) {
+  const c = deck.children[i]; if (!c) return;
+  deck.scrollTo({ left: c.offsetLeft - deck.children[0].offsetLeft, behavior: reduced() ? 'auto' : 'smooth' });
+  c.focus({ preventScroll: true });
+}
+
+function wireDeck(S, deck, cards) {
+  deck.addEventListener('scroll', () => deckSync(S, deck));
+  let y0 = null;
+  deck.addEventListener('pointerdown', (e) => { y0 = e.target.closest('button,.fb .case') ? null : e.clientY; });
+  deck.addEventListener('pointerup', (e) => {
+    if (y0 === null) return; const dir = swipeDir(e.clientY - y0); y0 = null;
+    const c = deck.children[S.i]; if (dir && c) flipTo(S, c, dir > 0);   // up opens the case file, down closes it (the mockup's help text)
+  });
+  deck.addEventListener('pointercancel', () => { y0 = null; });
+  deck.addEventListener('click', (e) => {
+    const c = e.target.closest('.fc'); if (!c || e.target.closest('button')) return;
+    if (c.classList.contains('back') && !e.target.closest('.fh')) return;
+    flipTo(S, c);
+  });
+  deck.addEventListener('keydown', (e) => {
+    const c = e.target.closest && e.target.closest('.fc');
+    if (e.key === 'Escape' && S.flip) { const b = deck.querySelector('.fc.back'); if (b) { e.stopPropagation(); flipTo(S, b, false); } return; }
+    if (!c) return;
+    if (e.key === 'Enter' || e.key === ' ') { if (e.target === c) { e.preventDefault(); flipTo(S, c); } return; }
+    if (e.key === 'ArrowRight' || e.key === 'ArrowLeft') { e.preventDefault(); scrollToCard(S, deck, nextCards(cards, S.i, e.key === 'ArrowRight' ? 1 : -1)); }
+  });
+  // the mockup's tilt: the card on top leans toward the pointer
+  let tilt = null;
+  deck.addEventListener('mousemove', (e) => {
+    if (reduced()) return;
+    const c = e.target.closest && e.target.closest('.fc.on:not(.back)');
+    if (tilt && tilt !== c) { ['--rx', '--ry', '--mx', '--my'].forEach((p) => tilt.style.removeProperty(p)); tilt = null; }
+    if (!c) return;
+    const r = c.getBoundingClientRect(); const x = (e.clientX - r.left) / r.width; const yy = (e.clientY - r.top) / r.height;
+    c.style.setProperty('--ry', ((x - 0.5) * 5).toFixed(2) + 'deg'); c.style.setProperty('--rx', ((0.5 - yy) * 4).toFixed(2) + 'deg');
+    c.style.setProperty('--mx', (x * 100).toFixed(0) + '%'); c.style.setProperty('--my', (yy * 100).toFixed(0) + '%'); tilt = c;
+  });
+}
+
+/* ── state, load, draw ── */
+/* One read per lens and zoom for the whole page: a page that mounts the deck on several tabs asks the server (a cold read of the
+ * repository takes minutes) once, and every deck draws the same answer. A failed read is dropped so the next mount asks again. */
+const reads = new Map();
+function readLens(lens, zoom, scope) {
+  const k = lens + '|' + zoom + (scope ? '|' + scope : '');
+  if (!reads.has(k)) {
+    const p = fetch('/api/briefing?lens=' + encodeURIComponent(lens) + '&zoom=' + zoom + (scope ? '&scope=' + encodeURIComponent(scope) : '')).then((r) => r.json())
+      .then((j) => (j && j.ok ? j : { ok: false, error: (j && j.error) || 'not available' }), (e) => ({ ok: false, error: String(e && e.message || e) }));
+    reads.set(k, p);
+    p.then((j) => { if (!j.ok) reads.delete(k); else setTimeout(() => reads.delete(k), 60000); });
+  }
+  return reads.get(k);
+}
+
+async function load(S, lens) {
+  if (S.data[lens] !== undefined) return;
+  S.data[lens] = null;
+  S.data[lens] = await readLens(lens, S.zoom, S.ctx && S.ctx.scope);
+  if (S.dead) return;   // a deck built before its host is attached still draws: it only touches its own root
+  if (lens === S.lens) draw(S);
+  else { const old = S.root.querySelector('.stance'); if (old) old.replaceWith(stance(S)); }   // another lens arrived: update the switch, keep the open card
+}
+
+const DAYPART = [['m', 'Morning', '08:12'], ['n', 'Midday', '12:30'], ['a', 'Afternoon', '16:05'], ['e', 'Evening', '18:30']];   // LENSES order: Plan, Unblock, Close, Reflect
+/* the mockup's stanceBar (line 2332): the lens icon, its name and line, and the day-part switch as .seg.dp icon buttons */
+function stance(S) {
+  const P = PART_STYLE[S.lens] || PART_STYLE.Plan;
+  return el('div', { class: 'stance', 'data-bf': 'lens-bar' },
+    el('span', { class: 'ki' }, c3ic(P.icon)),
+    el('div', null, el('b', { title: S.lens === S.clock ? 'Follows the clock: this is the part of the day it is now.' : null }, S.lens), el('span', { class: 'dim' }, P.sub)),
+    listenButton(() => { const x = S.data[S.lens]; return x && x.ok ? x.cards[S.i] || x.cards[0] : null; }),   // the mockup's speaker (data-a=listen) reads the card on top
+    el('div', { class: 'seg dp', role: 'group', 'aria-label': 'Part of the day', title: 'Follows the clock. Tap to preview another part of the day.' },
+      ...LENSES.map((l, qi) => {
+        const Q = PART_STYLE[l]; const N = DAYPART[qi];   // the mockup's PARTS (line 2206): the part is named by its time of day, the lens by what it does
+        return el('button', { type: 'button', 'aria-pressed': String(l === S.lens), 'data-bf-lens': l, 'data-a': 'tod', 'data-k': N[0], title: N[1] + ' · ' + N[2], 'aria-label': N[1],
+          onClick: () => { S.lens = l; S.i = 0; S.flip = null; load(S, l); draw(S); if (S.ctx && S.ctx.onLens) S.ctx.onLens(l); } }, c3ic(Q.icon, 'sm'));
+      })));
+}
+
+/* the mockup's running line (.tick > .tkt, lines 539 to 545): the engine's ticker strings, twice so the marquee loops */
+function ticker(items) {
+  const one = (hide) => items.map((t) => el('span', { class: 'tki', 'aria-hidden': hide ? 'true' : null }, el('b', { style: 'color:var(--acc)' }, c3ic('bolt', 'sm')), String(t)));
+  return el('div', { class: 'tick', role: 'status', 'data-bf': 'ticker', title: items.join('  |  ') }, el('div', { class: 'tkt' }, ...one(false), ...one(true)));
+}
+
+function draw(S) {
+  const d = S.data[S.lens];
+  const kids = [stance(S)];
+  if (!d) kids.push(el('p', { class: 'dim mono', style: small, role: 'status' }, 'Reading the repository'));
+  else if (!d.ok) kids.push(el('p', { class: 'dim mono', style: small, role: 'status', 'data-bf': 'error' }, 'The briefing could not be read: ' + d.error));
+  else {
+    if (d.ticker && d.ticker.length && !(S.ctx && S.ctx.noTicker)) kids.push(ticker(d.ticker));
+    if (d.banner) {
+      const b = cardView(d.banner); const T = tagStyle(b);
+      kids.push(el('div', { class: 'incident', role: 'status', 'data-bf': 'banner' }, el('span', { class: 'tg f', style: '--tc:var(--destructive)' }, c3ic(T.icon, 'sm'), b.tag), el('span', null, b.headline)));
+    }
+    if (!d.cards.length) kids.push(el('div', { class: 'fold', 'data-bf': 'empty' }, c3ic('check', 'sm'), 'No signals for this lens. Nothing needs you.'));
+    else {
+      if (S.i >= d.cards.length) S.i = 0;
+      const views = d.cards.map(cardView);
+      const deck = el('div', { class: 'deck', tabindex: '-1', role: 'group', 'aria-roledescription': 'card deck', 'aria-label': S.lens + ' briefing, size ' + sizeFor(S.host.clientWidth || 500), 'data-bf': 'deck' }, ...views.map((v, i) => card(S, v, i, views.length)));
+      const dots = el('div', { class: 'dk', role: 'group', 'aria-label': 'Cards' }, ...views.map((v, i) => el('button', { type: 'button', class: 'dkd', 'aria-label': 'Card ' + (i + 1) + ': ' + v.tag, 'aria-current': String(i === 0), onClick: () => scrollToCard(S, deck, i) })));
+      wireDeck(S, deck, d.cards);
+      kids.push(el('section', { class: 'cdeck' }, deck, views.length > 1 ? dots : null));
+    }
+  }
+  S.root.replaceChildren(...kids);
+  S.flip = null;
+}
+
+export function mountBriefing(host, ctx) {
+  if (!host) return;
+  let S = roots.get(host);
+  if (S) { if (!S.root.isConnected) host.replaceChildren(S.root); return; }
+  ensureC3Css();
+  const root = el('section', { class: 'c3 brief', 'data-board': 'briefing', 'aria-label': 'Briefing' });
+  host.replaceChildren(root);
+  const clock = dayPartFor(new Date());
+  S = { host, root, ctx: ctx || {}, lens: clock, clock, zoom: 'week', i: 0, flip: null, data: {}, dead: false };
+  S.stopPhone = c3Phone(root);
+  roots.set(host, S);
+  draw(S);
+  if (S.ctx.onLens) S.ctx.onLens(S.lens);   // the page may follow the lens from the start (Reflect: "Carries over", "What I could stop")
+  // the shown lens first, then the others for their preview line
+  load(S, S.lens).then(() => Promise.all(LENSES.filter((l) => l !== S.lens).map((l) => load(S, l))));
+}
+
+/* Demo: a tab whose deck follows another control (the Work lens) changes the scope the deck asks for. Real mode never calls it. */
+export function setBriefingScope(host, scope) {
+  const S = roots.get(host);
+  if (!S || S.ctx.scope === scope) return;
+  S.ctx.scope = scope; S.data = {}; S.i = 0; S.flip = null; draw(S);
+  load(S, S.lens).then(() => Promise.all(LENSES.filter((l) => l !== S.lens).map((l) => load(S, l))));
+}
+
+/* Open one card on its case file (the bell's "go to the card", console3.html nopen 2533). True when the card is on this deck. */
+export function showCard(host, key) {
+  const S = roots.get(host); const deck = S && S.root.querySelector('.deck'); if (!deck) return false;
+  const i = [...deck.children].findIndex((c) => c.dataset.bfCard === String(key)); if (i < 0) return false;
+  deck.scrollTo({ left: deck.children[i].offsetLeft - deck.children[0].offsetLeft, behavior: 'auto' }); deckSync(S, deck);
+  flipTo(S, deck.children[i], true); deck.children[i].focus({ preventScroll: true }); return true;
+}
+/* Esc anywhere on the Briefing turns the open card back (the mockup binds it on the document, line 2463). True when one was open. */
+export function flipBack(host) {
+  const S = roots.get(host); const b = S && S.root.querySelector('.fc.back'); if (!b) return false;
+  flipTo(S, b, false); return true;
+}
+
+export function disposeBriefing(host) {
+  const S = roots.get(host);
+  if (S) { S.dead = true; if (S.stopPhone) S.stopPhone(); }
+  roots.delete(host);
+}

package/workspace/public/pm/briefing-model.js

@@ -0,0 +1,176 @@
+/* pm/briefing-model.js — pure model of the Briefing deck (console3 wave C1). No DOM, no fetch.
+ * The signal engine (scripts/signals) picks and scores the cards; this file only shapes one card for drawing.
+ * Every string here comes from a card field. A field the engine does not supply gives null, never a guess. */
+
+export const LENSES = ['Plan', 'Unblock', 'Close', 'Reflect'];
+export const TAGS = ['Critical', 'Just in', 'Opportunity', 'Small win', 'Big win'];
+/* A tag is a shape plus a label, never a hue alone. The deck draws the shape; `mark` names it. */
+export const TAG_MARK = { Critical: 'triangle', 'Just in': 'bolt', Opportunity: 'diamond', 'Small win': 'dot', 'Big win': 'flag' };
+/* How the mockup draws a tag (console3.html lines 2206 and 2207): its icon, its colour token, whether the tag is filled, and the
+ * one-line reason shown on the case file. `key` is the value of the card's data-tag, which console3.css styles. */
+export const TAG_STYLE = {
+  Critical: { key: 'critical', icon: 'alert', color: 'var(--destructive)', filled: true, q: 'Critical: you lose something if this waits.' },
+  'Just in': { key: 'justin', icon: 'bolt', color: 'var(--acc)', filled: false, q: 'Just in: new since you last looked, value not yet known.' },
+  Opportunity: { key: 'opp', icon: 'spark', color: 'var(--purple)', filled: false, q: 'Opportunity: upside that closes if you wait.' },
+  'Small win': { key: 'small', icon: 'up', color: 'var(--success)', filled: false, q: 'Small win: progress you can bank in one gesture.' },
+  'Big win': { key: 'big', icon: 'flag', color: 'var(--success)', filled: true, q: 'Big win: a milestone worth telling others.' },
+};
+/* The stance bar of each lens: icon and the line under its name (console3.html line 2206). */
+export const PART_STYLE = {
+  Plan: { icon: 'sun', sub: 'Decide what gates the day' },
+  Unblock: { icon: 'bolt', sub: 'What is stuck, what is next' },
+  Close: { icon: 'check', sub: 'Send and finish before you leave' },
+  Reflect: { icon: 'moon', sub: 'What moved, what carries over' },
+};
+export const HEROES = ['line', 'big-number', 'ring', 'bars', 'two-bars', 'rows', 'mini-graph'];
+
+/** 'L' at 500 and up, 'M' from 400 to 499, 'S' under 400. */
+export function sizeFor(width) {
+  const w = Number(width);
+  if (!(w >= 400)) return 'S';
+  return w >= 500 ? 'L' : 'M';
+}
+
+/** The lens the clock suggests: before 11 Plan, 11 to 14 Unblock, 14 to 17 Close, from 17 Reflect. */
+export function dayPartFor(date) {
+  const d = date instanceof Date ? date : new Date(date);
+  const h = d.getHours();
+  return h < 11 ? 'Plan' : h < 14 ? 'Unblock' : h < 17 ? 'Close' : 'Reflect';
+}
+
+const num = (v) => (typeof v === 'number' && isFinite(v) ? v : null);
+
+/** What the deck draws for one engine card. */
+export function cardView(card) {
+  const c = card || {};
+  const tag = TAGS.includes(c.tag) ? c.tag : 'Just in';
+  const h = c.hero && typeof c.hero === 'object' ? c.hero : {};
+  const kind = HEROES.includes(h.kind) ? h.kind : 'big-number';
+  const m = c.move || null;
+  const rec = m && m.suggested ? m.suggested : null;
+  const dl = c.deadline || null;
+  const w = c.why || null;
+  return {
+    key: c.key || null,
+    tag, mark: TAG_MARK[tag], pinned: !!c.pinned,
+    headline: String(c.headline || ''),
+    hero: { kind, points: Array.isArray(h.points) ? h.points.map(num).filter((x) => x !== null) : null },
+    facts: (Array.isArray(c.facts) ? c.facts : []).filter(Boolean).map(String).slice(0, 3),
+    /* text only: no control in this wave sends anything */
+    move: rec ? String(rec.label || rec.id || '') : null,
+    options: m && Array.isArray(m.options) ? m.options.map((o) => ({ id: o.id, label: String(o.label || o.id || ''), slipAfter: num(o.slipAfter), recommended: o === rec || (rec && o.id === rec.id) })) : [],
+    unsure: m && m.note ? String(m.note) : null,
+    deadline: dl ? { days: num(dl.days), source: String(dl.source || 'unknown'), text: String(dl.text || '') } : null,
+    deadlineSource: dl ? String(dl.source || 'unknown') : null,
+    waitsFor: c.waitsFor ? String(c.waitsFor) : null,
+    why: w && w.text ? String(w.text) : null,
+    /* Optional, additive fields the engine does not send (the /c3.html demo mode serves them, from the console3 mockup's sample cards).
+     * A card without them is drawn exactly as before. */
+    sub: c.sub ? String(c.sub) : null,
+    pov: c.pov ? String(c.pov) : null,
+    eyebrow: c.eyebrow && typeof c.eyebrow === 'object' && c.eyebrow.label ? { label: String(c.eyebrow.label), icon: String(c.eyebrow.icon || 'target') } : null,
+    kpisX: Array.isArray(c.kpis) ? c.kpis.filter((k) => Array.isArray(k)).slice(0, 3).map((k) => ({ v: String(k[0]), l: String(k[1]), c: k[2] ? String(k[2]) : null })) : null,
+    factsX: Array.isArray(c.factsX) ? c.factsX.filter((f) => Array.isArray(f)).slice(0, 3).map((f) => ({ icon: String(f[0]), text: String(f[1]) })) : null,
+    rich: h.rich && typeof h.rich === 'object' ? h.rich : null,
+    conf: rec ? num(rec.conf) : null,
+    terms: w ? { impact: num(w.impact), urgency: num(w.urgency), irreversible: num(w.irreversible), score: num(w.score) } : null,
+  };
+}
+
+/** Index of the card a swipe lands on. dir +1 is up (next), -1 is down (previous); the stack wraps. */
+export function nextCards(cards, i, dir = 1) {
+  const n = Array.isArray(cards) ? cards.length : 0;
+  if (!n) return 0;
+  const k = Number.isInteger(i) ? i : 0;
+  return (((k + (dir < 0 ? -1 : 1)) % n) + n) % n;
+}
+
+/** The swipe direction of a pointer drag: dy is end minus start in pixels. Under 40px is a tap, not a swipe. */
+export function swipeDir(dy, min = 40) {
+  if (!isFinite(dy) || Math.abs(dy) < min) return 0;
+  return dy < 0 ? 1 : -1;
+}
+
+/* ── the case file of a card, a need or a draft (console3.html caseHtml 2275, CARDC 2215, NEEDC 2249, DRAFTC 2259) ──────────────────────────
+ * `registerCases` is the hook for sample content: the /c3.html demo registers the mockup's cases (c3-demo-brief-ix.js). Real mode registers
+ * none, so every case is worked out from the engine card's own fields: facts are the evidence, options are the options, and nothing is added.
+ * A real card has no route that carries an option out and no channel, so its case is `outward` with its own reason: the slide is drawn
+ * disabled and says why (c3-case.js slideFor). Nothing here writes. */
+const REG = { card: {}, need: {}, draft: {}, agent: {}, people: {}, notifs: [], playbooks: [], docs: [] };
+export function registerCases(o) {
+  for (const k of Object.keys(o || {})) { if (Array.isArray(REG[k])) REG[k] = o[k].slice(); else REG[k] = Object.assign(REG[k] || {}, o[k]); }
+}
+export const registered = (kind, key) => (REG[kind] && !Array.isArray(REG[kind]) ? REG[kind][key] || null : null);
+export const registry = (kind) => REG[kind];
+
+/** The raw option (as the case was written, with its `do` and `msg`) behind a normalized option id. */
+export const rawOption = (m, id) => ((m && (m.opts || m.options)) || []).find((o, i) => String(o.id !== undefined ? o.id : 'o' + i) === String(id)) || null;
+
+export const NO_ROUTE = 'No channel connected, and no route on this page carries it out. The suggestion stays text; nothing is sent or changed.';
+
+/** The case of one engine card (v = cardView(card)). Pure; every string comes from a card field. */
+const OUTWARD = /\b(send|tell|warn|reply|replies|email|message|notify|invite|ask)\b/i;
+export function caseModelOf(v, o = {}) {
+  const reg = v && v.key && registered('card', v.key);
+  if (reg) return typeof reg === 'function' ? reg() : reg;
+  const c = v || {}; const sim = !!o.sim;
+  const ev = (c.factsX && c.factsX.length ? c.factsX.map((f) => ({ icon: f.icon, text: f.text })) : c.facts.map((f) => ({ icon: 'info', text: f })));
+  const opts = (c.options || []).map((o) => ({
+    id: o.id || o.label, label: o.label, rec: !!o.recommended, outward: !sim || OUTWARD.test(o.label || ''),
+    effects: o.slipAfter != null ? [{ icon: 'clock', text: 'slip after: ' + o.slipAfter + ' d', tone: o.slipAfter > 0 ? 'warn' : '' }] : [],
+  }));
+  const dl = c.deadline;
+  return {
+    id: 'card:' + (c.key || ''), tc: (TAG_STYLE[c.tag] || TAG_STYLE['Just in']).color,
+    situation: c.waitsFor ? 'Waiting on ' + c.waitsFor + '.' : c.sub || c.headline, evidence: ev, options: opts,
+    confidence: c.conf != null ? c.conf : null, unsure: c.unsure || '',
+    ifYouWait: dl ? (dl.days == null ? 'No deadline is known: ' + dl.text : dl.text) : '', why: c.why || '',
+    outward: !sim, outboxReason: NO_ROUTE,
+  };
+}
+
+/** The case of a "Needs you" row. A registered case wins; else the card's own, else one worked out from the row. */
+export function needCaseOf(n) {
+  const reg = registered('need', n.key);
+  if (reg) return reg;
+  if (n.view) return caseModelOf(n.view, { sim: !!n.sim });       // a real row is one engine card: its case is the card's own
+  return {
+    id: 'need:' + n.key, situation: n.headline,
+    evidence: [{ icon: 'clock', text: 'Due ' + (n.time || 'soon'), source: n.src || '' }],
+    options: [], outward: true, outboxReason: NO_ROUTE,
+  };
+}
+
+/** The case of a Review draft row (the mockup's genDraft when none is registered). */
+export function draftCaseOf(x) {
+  const reg = registered('draft', x.id);
+  if (reg) return reg;
+  return {
+    id: 'draft:' + x.id, quote: x.body || '', situation: 'Built from ' + (x.basis || 'the decision log') + '. Nothing is sent until you send it.',
+    evidence: [{ icon: 'doc', text: 'Basis: ' + (x.basis || 'decision log'), source: 'sources' }],
+    cta: 'Slide to approve',
+    options: [
+      { id: 'ok', label: 'Approve', rec: true, do: 'ready', effects: [{ icon: 'out', text: 'Nothing is sent until you send it', tone: 'ok' }] },
+      { id: 'sb', label: 'Send back with a note', do: 'back', effects: [{ icon: 'undo', text: 'The agent revises it' }] },
+    ],
+  };
+}
+
+/** What the bell lists: the briefing's `notifs` (the demo sends them) or one entry per card. `go` names the target. */
+export function notifsOf(b) {
+  if (b && Array.isArray(b.notifs)) return b.notifs;
+  return (b && Array.isArray(b.cards) ? b.cards : []).filter((c) => c && c.headline).map((c) => ({ key: String(c.key || c.headline), tag: TAGS.includes(c.tag) ? c.tag : 'Just in', headline: String(c.headline), when: '', unread: false, go: { card: c.key || null } }));
+}
+
+/** The next index of a list of rows for j (+1) / k (-1); `at` is the index of the focused row or -1. */
+export function rowStep(count, at, dir) {
+  if (count <= 0) return -1;
+  if (dir > 0) return Math.min(count - 1, at + 1);
+  return Math.max(0, at < 0 ? 0 : at - 1);
+}
+
+/** The palette's results (console3.html line 1945): `items` are { label, kind, run }; the filter is a case-blind substring, at most 9. */
+export function filterPalette(items, q, max = 9) {
+  const s = String(q || '').trim().toLowerCase();
+  return (items || []).filter((it) => !s || String(it.label).toLowerCase().includes(s) || String(it.kind || '').toLowerCase().includes(s)).slice(0, max);
+}