create-pmos 0.124.0 → 0.126.0

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

@@ -0,0 +1,83 @@
+/* pm/shell-model.js — the pure logic behind the shell pieces of console3 wave E2b (ticker, bell, banner, recording, read-aloud,
+ * haptics, phone tiles). No DOM, no network: scripts/tests/shell-model.test.js imports this file under plain node.
+ *
+ *   tickerLines(briefing)        the running-text lines, from the briefing's own `ticker` ([] when it has none)
+ *   bellCount(briefing)          how many cards the bell counts: the number of cards, nothing else
+ *   bellItems(briefing)          { key, tag, headline } for each card, in the engine's order
+ *   bannerOf(briefing, seen)     the pinned Critical card, or null; null too when its key is in `seen` (dismissed this session)
+ *   hapticFor(kind, reduced)     a vibration pattern (array of ms) for 'critical' | 'confirm' | 'tick'; null when reduced or unknown
+ *   readText(card)               what read-aloud says: the card's own tag, headline, facts and deadline text; absent fields dropped
+ *   recView(state, reduced)      what the recording group draws for a recorder state { mode: idle | recording | paused, title, started }
+ *   clockOf(ms)                  m:ss or h:mm:ss
+ *
+ * Source: console3.html lines 2475 (buzz), 2478 (tickItems), 2518 to 2530 (listen), 4385 to 4400 (recCtl). The mockup invents its
+ * ticker lines and its spoken text; here both come from the engine's card fields only.
+ */
+
+const str = (v) => (typeof v === 'string' ? v.trim() : '');
+const cardsOf = (b) => (b && Array.isArray(b.cards) ? b.cards.filter((c) => c && typeof c === 'object') : []);
+
+/** One line per top card, as /api/briefing builds them. Nothing when the briefing has none (the ticker is then not drawn). */
+export function tickerLines(briefing) {
+  const t = briefing && Array.isArray(briefing.ticker) ? briefing.ticker : [];
+  return t.map(str).filter(Boolean).slice(0, 5);
+}
+
+/* demo only: a briefing may carry `unread` (the mockup's S.unread = 2); the real route never sends it */
+export const bellCount = (briefing) => (briefing && Number.isInteger(briefing.unread) && briefing.unread >= 0 ? briefing.unread : cardsOf(briefing).length);
+
+export function bellItems(briefing) {
+  return cardsOf(briefing).map((c) => ({ key: c.key == null ? null : String(c.key), tag: str(c.tag), headline: str(c.headline) })).filter((x) => x.headline);
+}
+
+/** The banner is the pinned Critical card the server names. A dismissed one (its key is in `seen`) does not come back this session. */
+export function bannerOf(briefing, seen) {
+  const b = briefing && briefing.banner;
+  if (!b || typeof b !== 'object' || !str(b.headline)) return null;
+  const key = b.key == null ? str(b.headline) : String(b.key);
+  const gone = seen && (typeof seen.has === 'function' ? seen.has(key) : Array.isArray(seen) && seen.includes(key));
+  return gone ? null : { key, tag: str(b.tag) || 'Critical', headline: str(b.headline) };
+}
+
+const PATTERNS = { critical: [30, 60, 30], confirm: [12, 40, 12], tick: [8] };
+
+/** The vibration pattern for a kind. Reduced motion asks for none. */
+export function hapticFor(kind, reduced) {
+  if (reduced) return null;
+  const p = PATTERNS[kind];
+  return p ? p.slice() : null;
+}
+
+/** The spoken text of one card: its tag, headline and facts, then its deadline text. Only the card's own fields; a missing one is left out. */
+export function readText(card) {
+  const c = card && typeof card === 'object' ? card : {};
+  const end = (s) => (/[.!?]$/.test(s) ? s : s + '.');
+  const parts = [];
+  if (str(c.tag)) parts.push(end(str(c.tag)));
+  if (str(c.headline)) parts.push(end(str(c.headline)));
+  for (const f of Array.isArray(c.facts) ? c.facts : []) if (str(f)) parts.push(end(str(f)));
+  const d = c.deadline && typeof c.deadline === 'object' ? str(c.deadline.text) : '';
+  if (d) parts.push(end(d));
+  return parts.join(' ');
+}
+
+export function clockOf(ms) {
+  const t = Math.max(0, Math.floor((Number(ms) || 0) / 1000));
+  const m = Math.floor(t / 60);
+  const s = String(t % 60).padStart(2, '0');
+  return m >= 60 ? Math.floor(m / 60) + ':' + String(m % 60).padStart(2, '0') + ':' + s : m + ':' + s;
+}
+
+/** What the recording group shows. Idle draws nothing; the dot pulses only while recording and motion is allowed. */
+export function recView(state, reduced) {
+  const st = state && typeof state === 'object' ? state : {};
+  const mode = st.mode === 'recording' || st.mode === 'paused' ? st.mode : 'idle';
+  if (mode === 'idle') return { mode, shown: false, dot: 'none', tabDot: false, canMark: false, canPause: false, canResume: false, canStop: false };
+  return {
+    mode, shown: true,
+    dot: mode === 'recording' && !reduced ? 'pulse' : 'static',
+    tabDot: true,
+    canMark: mode === 'recording', canPause: mode === 'recording', canResume: mode === 'paused', canStop: true,
+    title: str(st.title) || 'Untitled note',
+  };
+}

package/workspace/public/pm/shell-phone.js

@@ -0,0 +1,124 @@
+/* pm/shell-phone.js — the shell strip and the phone's one-screen head (console3 wave E2b).
+ *
+ *   mountShell({ parent, after, go }) → dispose()     builds the strip under the top bar and mounts the ticker, the recording
+ *                                                      group, the speaker and the bell in it; on a phone it adds the four tiles
+ *   disposeShell()                                    the same dispose, by name
+ *
+ * The strip is `.c3.c3e.c3shell`. On a desktop it is one row: the running text, then the recording group, the speaker and the bell.
+ * On a phone (the same `(max-width:760px)` query as pm/mobile.js isMobile(); the strip carries the mockup's `ph` class) it is the
+ * mockup's `.tickrow` (bell, running text, speaker) with the four tiles under it: Briefing, Calendar, Work and More. A tile opens a
+ * popup (a bottom sheet) and never scrolls the page. The tabs below keep their own lists; this head does not replace them.
+ *
+ * Lifted: console3.html `tile` (line 2486) and `vBriefPhone` (2487 to 2492): `.tray > button.tl > ic + b.n + span.l`. Not lifted: the
+ * mockup's tiles Needs you, Review, Next meeting and Handled, whose counts come from its sample data; the four here are the four places
+ * the phone has (Briefing, Calendar, Work, More) and their counts are the real ones: cards in the briefing, items to brief in My work.
+ * Briefing and Calendar are both on Today, so both open it.
+ */
+import { el } from './dom.js';
+import { ensureC3Css, c3ic } from './pm-work-view.js';
+import { TAG_STYLE } from './briefing-model.js';
+import { bellItems, bellCount, bannerOf } from './shell-model.js';
+import { mountTicker, disposeTicker, onBriefing, loadBriefing } from './shell-ticker.js';
+import { mountBell, disposeBell, openBellList, openPopup } from './shell-bell.js';
+import { mountRecording, disposeRecording } from './shell-recording.js';
+import { listenButton, stopAloud } from './shell-readaloud.js';
+
+const MORE = [['initiatives', 'Initiatives', 'target'], ['board', 'Board', 'cols'], ['reports', 'Reports', 'report'], ['docs', 'Docs', 'doc'],
+  ['notes', 'Notes', 'notes'], ['people', 'People', 'user'], ['settings', 'Settings', 'menu']];
+
+let disposer = null;
+export function disposeShell() { if (disposer) { const d = disposer; disposer = null; d(); } }
+
+function rowButton(icon, text, onclick, extra) {
+  return el('button', { type: 'button', class: 'nli', onclick }, el('span', { class: 'ki' }, c3ic(icon)), el('span', { class: 't' }, text), el('span', { class: 'w' }, extra || ''));
+}
+
+export function mountShell({ parent, after, go } = {}) {
+  disposeShell();
+  if (!parent) return () => {};
+  ensureC3Css();
+  const root = el('div', { class: 'c3 c3e c3shell', 'data-shell': 'strip' });
+  const tickSlot = el('div', { class: 'shell-tick' });
+  const tools = el('div', { class: 'shell-tools' });
+  const tray = el('div', { class: 'tray', hidden: true, 'data-shell': 'tiles' });
+  root.append(tickSlot, tools, tray);
+  parent.insertBefore(root, after ? after.nextSibling : parent.firstChild);
+
+  let brief = { cards: [], ticker: [], banner: null };
+  let workN = 0;
+  const topCard = () => (brief.cards && brief.cards[0]) || null;
+  const listen = listenButton(topCard);
+  tools.appendChild(listen);
+  mountRecording(tools);
+  mountBell(tools, { go });
+  mountTicker(tickSlot, { onOpen: () => openBellList() });
+
+  // The strip appears only when it has something to show: a phone (the tiles), ticker lines, bell items, a banner, or a live
+  // recording. On an empty page it is hidden, so it adds no controls (the Q5 control budget) and no row to the frame.
+  const syncVisible = () => {
+    const rg = tools.querySelector('.recg');
+    // Hidden on a phone for now: the phone frame is a separate layout whose destinations are full-screen layers, and the strip sat
+    // over their top controls (pm-initiatives-dest-phone). The phone tiles wait for the one-screen phone rework.
+    root.hidden = root.classList.contains('ph') || !(bellCount(brief) > 0 || (brief.ticker && brief.ticker.length) || bannerOf(brief, null) || (rg && !rg.hidden));
+  };
+  const watch = typeof MutationObserver === 'function' ? new MutationObserver(syncVisible) : null;
+  if (watch) watch.observe(tools, { subtree: true, attributes: true, attributeFilter: ['hidden'], childList: true });
+  /* phone: the same query as mobile.js isMobile(); the mockup's `ph` class */
+  const mq = typeof matchMedia === 'function' ? matchMedia('(max-width:760px)') : null;
+  const onMq = () => { const on = !!(mq && mq.matches); root.classList.toggle('ph', on); tray.hidden = !on; syncVisible(); };
+  onMq();
+  if (mq) { if (mq.addEventListener) mq.addEventListener('change', onMq); else mq.addListener(onMq); }
+
+  const tile = (key, icon, label, opts) => {
+    const b = el('button', { type: 'button', class: 'tl', 'aria-label': label, 'data-shell-tile': key, onclick: opts.open },
+      c3ic(icon), el('b', { class: 'n' }, ''), el('span', { class: 'l' }, label));
+    return b;
+  };
+  const tiles = {
+    brief: tile('briefing', 'inbox', 'Briefing', { open: () => openTile('briefing') }),
+    cal: tile('calendar', 'cal', 'Calendar', { open: () => openTile('calendar') }),
+    work: tile('work', 'todo', 'Work', { open: () => openTile('work') }),
+    more: tile('more', 'more', 'More', { open: () => openTile('more') }),
+  };
+  tray.append(tiles.brief, tiles.cal, tiles.work, tiles.more);
+  const setN = (t, n) => { const b = t.querySelector('.n'); b.textContent = n == null ? '' : String(n); b.hidden = n == null; };
+  const paintTiles = () => {
+    setN(tiles.brief, bellCount(brief)); setN(tiles.cal, null); setN(tiles.work, workN); setN(tiles.more, null);
+    tiles.brief.classList.toggle('hot', !!bannerOf(brief, null));
+  };
+  paintTiles();
+
+  function openTile(k) {
+    if (k === 'briefing') {
+      const items = bellItems(brief);
+      const body = el('div', null, ...(items.length ? items.map((x) => {
+        const st = TAG_STYLE[x.tag] || { icon: 'bolt', color: 'var(--muted-foreground)' };
+        return el('button', { type: 'button', class: 'nli', onclick: () => { p.close(); if (go) go('today'); } }, el('span', { class: 'ki', style: 'color:' + st.color }, c3ic(st.icon)),
+          el('span', { class: 't' }, el('b', { class: 'mono', style: 'font-size:var(--fs-1);letter-spacing:.06em;text-transform:uppercase;color:' + st.color }, x.tag), el('br'), x.headline), el('span', { class: 'w' }));
+      }) : [el('div', { class: 'fold' }, c3ic('check', 'sm'), 'Nothing is waiting for you')]));
+      var p = openPopup({ title: 'Briefing', icon: 'inbox', body });
+      return;
+    }
+    const spec = {
+      calendar: { title: 'Calendar', icon: 'cal', rows: [['cal', 'Open the calendar', 'today']] },
+      work: { title: 'Work', icon: 'todo', rows: [['todo', workN ? 'Open My work: ' + workN + ' to brief' : 'Open My work', 'mywork']] },
+      more: { title: 'More', icon: 'menu', rows: MORE.map(([id, label, ic]) => [ic, label, id]) },
+    }[k];
+    const q = openPopup({ title: spec.title, icon: spec.icon, body: el('div', null, ...spec.rows.map(([ic, text, id]) => rowButton(ic, text, () => { q.close(); if (go) go(id); }))) });
+  }
+
+  const off = onBriefing((b) => { brief = b || brief; paintTiles(); syncVisible(); });
+  const onWork = (e) => { workN = Math.max(0, Number(e && e.detail && e.detail.brief) || 0); paintTiles(); };
+  window.addEventListener('pmos:mywork', onWork);
+  loadBriefing();
+  syncVisible();
+
+  disposer = () => {
+    off(); if (watch) watch.disconnect(); window.removeEventListener('pmos:mywork', onWork);
+    if (mq) { if (mq.removeEventListener) mq.removeEventListener('change', onMq); else mq.removeListener(onMq); }
+    stopAloud();
+    disposeTicker(tickSlot); disposeBell(tools); disposeRecording(tools);
+    root.remove();
+  };
+  return disposeShell;
+}

package/workspace/public/pm/shell-readaloud.js

@@ -0,0 +1,53 @@
+/* pm/shell-readaloud.js — read the open card aloud (console3 wave E2b).
+ *
+ *   readAloud(card, btn)   speak readText(card) through window.speechSynthesis; a second press stops it
+ *   stopAloud()            cancel what is being said
+ *   listenButton(getCard)  the speaker `.ib`: the mockup's `data-a=listen` control (the equaliser shows while speaking)
+ *
+ * Local only: speechSynthesis runs in the browser and sends nothing. The spoken text is shell-model.readText(card): the card's own tag,
+ * headline, facts and deadline, and nothing else. Lifted: console3.html `listen` and `syncEq` (lines 2518 to 2530, 2518). Not lifted:
+ * the mockup's spoken day-part intro and "N more items need you", which it makes up.
+ */
+import { el } from './dom.js';
+import { ensureC3Css, c3ic } from './pm-work-view.js';
+import { readText } from './shell-model.js';
+
+let speaking = null;     // the button whose text is being said
+
+function paint(btn, on) {
+  if (!btn) return;
+  btn.replaceChildren(on ? el('span', { class: 'eq' }, el('i'), el('i'), el('i')) : c3ic('vol'));
+  btn.title = on ? 'Stop' : 'Hear this card';
+  btn.setAttribute('aria-label', btn.title);
+  btn.setAttribute('aria-pressed', on ? 'true' : 'false');
+}
+
+export function stopAloud() {
+  const sy = typeof window !== 'undefined' ? window.speechSynthesis : null;
+  if (sy) sy.cancel();
+  const b = speaking; speaking = null; paint(b, false);
+}
+
+export function readAloud(card, btn) {
+  const sy = typeof window !== 'undefined' ? window.speechSynthesis : null;
+  if (!sy || typeof SpeechSynthesisUtterance !== 'function') return false;
+  if (speaking) { const same = speaking === btn; stopAloud(); if (same) return true; }
+  const text = readText(card);
+  if (!text) return false;
+  const u = new SpeechSynthesisUtterance(text);
+  u.rate = 1.02;
+  const done = () => { if (speaking === btn) { speaking = null; paint(btn, false); } };
+  u.onend = u.onerror = done;
+  speaking = btn; paint(btn, true);
+  sy.speak(u);
+  return true;
+}
+
+export function listenButton(getCard) {
+  ensureC3Css();
+  const b = el('button', { type: 'button', class: 'ib', 'data-shell': 'listen' });
+  paint(b, false);
+  if (typeof window === 'undefined' || !window.speechSynthesis) { b.disabled = true; b.title = 'Audio is not available in this browser'; return b; }
+  b.addEventListener('click', () => readAloud(getCard(), b));
+  return b;
+}

package/workspace/public/pm/shell-recording.js

@@ -0,0 +1,110 @@
+/* pm/shell-recording.js — the recording indicator beside the bell (console3 wave E2b).
+ *
+ *   mountRecording(host) / disposeRecording(host)
+ *
+ * It starts nothing. It reads the real recorder through note-dock.js (recordState) and offers only the controls the Record control in
+ * the top bar already has: open the note, mark a moment (highlightNow), pause, resume and stop (pauseNow, resumeNow, stopNow). When
+ * nothing is recording or paused the group is hidden. While one is, a red dot sits on the Notes tab (`[data-fr-dest="notes"]` in the
+ * frame's bar; a phone tab `[data-dest="notes"]` if one is drawn). Lifted: console3.html `.recg` and `recCtl` (lines 916 to 924, 4385
+ * to 4400). The group shows the recorder's state under reduced motion as a static dot. The clock is the recorder's own start time.
+ */
+import { el } from './dom.js';
+import { ensureC3Css, c3ic } from './pm-work-view.js';
+import * as dock from './note-dock.js';
+import { recView, clockOf } from './shell-model.js';
+import { reducedMotion } from './shell-ticker.js';
+import { toast } from './c3-toast.js';
+
+/* the red dot sits on the Notes tab (the app's frame) and, on /c3.html, on the Calendar tab, where the meeting is recorded (the mockup's
+ * `#tabbtns [data-k=cal]` .tabdot, line 4395) */
+const TAB = '[data-fr-dest="notes"], #mobNav [data-dest="notes"], [data-c3-tab="cal"]';
+
+/* ── demo mode: a SIMULATED recorder ──────────────────────────────────────────────────────────────────────────────────────────────
+ * A page cannot record (nothing on a page may record). On /c3.html?demo=1 the Record button of the Calendar's During and After stages drives
+ * this stand-in, so the top bar shows the mockup's recording group: a pulsing dot, the clock, mark moment, pause or resume, and stop.
+ * It keeps a clock (performance.now: the demo freezes Date) and nothing else. No microphone is opened and nothing is saved.
+ * Real mode never reaches it: `isDemo()` reads the page's data-c3-demo mark, which only the demo sets. */
+export const isDemo = () => typeof document !== 'undefined' && !!document.querySelector('[data-c3-demo]');
+const SIM = { mode: 'idle', id: 'sim', title: '', started: 0, pausedAt: 0 };
+const tick = () => performance.now();
+const emit = () => window.dispatchEvent(new CustomEvent('c3-sim-rec'));
+const simClock = () => clockOf(Math.max(0, (SIM.mode === 'paused' ? SIM.pausedAt : tick()) - SIM.started));
+export const simState = () => ({ mode: SIM.mode, id: SIM.id, title: SIM.title, started: SIM.started });
+export function simStart(title) {
+  if (SIM.mode !== 'idle') return;
+  Object.assign(SIM, { mode: 'recording', title: title || 'Customer interview', started: tick(), pausedAt: 0 });
+  toast('Recording started. Notes stay on this machine. (Demo: nothing is recorded.)'); emit();
+}
+export const simDock = {
+  recordState: simState,
+  now: tick,
+  openDock() { window.dispatchEvent(new CustomEvent('c3-sim-open')); },
+  highlightNow() { toast('Moment marked at ' + simClock()); },
+  pauseNow() { if (SIM.mode !== 'recording') return; SIM.mode = 'paused'; SIM.pausedAt = tick(); toast('Paused. Nothing is captured until you resume.'); emit(); },
+  resumeNow() { if (SIM.mode !== 'paused') return; SIM.started += tick() - SIM.pausedAt; SIM.mode = 'recording'; toast('Resumed.'); emit(); },
+  stopNow() { if (SIM.mode === 'idle') return; SIM.mode = 'idle'; toast('Saved. The summary is being written.'); emit(); },
+};
+const live = new WeakMap();
+
+export function mountRecording(host, opts) {
+  if (!host) return;
+  disposeRecording(host);
+  ensureC3Css();
+  const d = (opts && opts.dock) || (isDemo() ? simDock : dock);
+  const nowMs = () => (d.now ? d.now() : Date.now());
+  const grp = el('span', { class: 'recg', role: 'group', 'aria-label': 'Recording', hidden: true, 'data-shell': 'recording' });
+  host.insertBefore(grp, host.firstChild);
+  const rec = { grp, key: '', clock: null, tabs: [] };
+  const tabDot = (on) => {
+    for (const t of document.querySelectorAll(TAB)) {
+      let dot = t.querySelector('.shell-recdot');
+      if (!dot) { dot = el('span', { class: 'shell-recdot', 'aria-hidden': 'true' }); t.appendChild(dot); }
+      dot.hidden = !on;
+    }
+  };
+  /* the page's own sprite (c3i-*) draws these; it has no pause glyph, so that one is two bars (the mockup's recCtl, line 4389) */
+  const NS = 'http://www.w3.org/2000/svg';
+  const bars = () => { const s = document.createElementNS(NS, 'svg'); s.setAttribute('class', 'ic sm'); s.setAttribute('viewBox', '0 0 24 24'); s.setAttribute('aria-hidden', 'true'); const pth = document.createElementNS(NS, 'path'); pth.setAttribute('d', 'M8 5v14M16 5v14'); s.appendChild(pth); return s; };
+  const GL = { highlighter: () => c3ic('flag', 'sm'), pause: bars, play: () => c3ic('next', 'sm'), square: () => c3ic('stop', 'sm') };
+  const btn = (label, name, fn, attr) => el('button', { type: 'button', title: label, 'aria-label': label, [attr]: '', onclick: fn }, GL[name]());
+  const sync = () => {
+    let st; try { st = d.recordState(); } catch { st = { mode: 'idle' }; }
+    const v = recView(st, reducedMotion());
+    const key = [v.mode, st.id, v.title, v.dot].join(':');
+    if (key !== rec.key) {
+      rec.key = key;
+      grp.hidden = !v.shown;
+      grp.classList.toggle('paused', v.mode === 'paused');
+      grp.setAttribute('aria-label', v.shown ? (v.mode === 'recording' ? 'Recording ' : 'Paused: ') + v.title : 'Recording');
+      if (!v.shown) { grp.replaceChildren(); rec.clock = null; }
+      else {
+        rec.clock = el('span', { class: 'recclk', 'data-shell-rec-clock': '' });
+        const open = el('button', { type: 'button', title: (v.mode === 'recording' ? 'Recording: ' : 'Paused: ') + v.title + '. Open the live note', 'aria-label': 'Open the note: ' + v.title, 'data-shell-rec-open': '', onclick: () => d.openDock(st.id) },
+          el('span', { class: 'recdot' + (v.dot === 'static' ? ' static' : ''), 'data-dot': v.dot }), rec.clock, el('span', { class: 'rt' }, v.title));
+        const kids = [open];
+        if (v.canMark) kids.push(btn('Mark this moment', 'highlighter', () => d.highlightNow(), 'data-shell-rec-mark'));
+        if (v.canPause) kids.push(btn('Pause', 'pause', () => d.pauseNow(), 'data-shell-rec-pause'));
+        if (v.canResume) kids.push(btn('Resume', 'play', () => d.resumeNow(), 'data-shell-rec-resume'));
+        if (v.canStop) kids.push(btn('Stop and save', 'square', () => d.stopNow(), 'data-shell-rec-stop'));
+        grp.replaceChildren(...kids);
+      }
+      tabDot(v.tabDot);
+    }
+    if (rec.clock) rec.clock.textContent = v.mode === 'recording' && st.started ? clockOf(nowMs() - st.started) : v.mode === 'paused' ? 'paused' : '';
+  };
+  rec.timer = setInterval(sync, 1000);
+  rec.onSim = () => sync();
+  window.addEventListener('c3-sim-rec', rec.onSim);
+  sync();
+  live.set(host, rec);
+}
+
+export function disposeRecording(host) {
+  const rec = host && live.get(host);
+  if (!rec) return;
+  clearInterval(rec.timer);
+  if (rec.onSim) window.removeEventListener('c3-sim-rec', rec.onSim);
+  rec.grp.remove();
+  for (const t of document.querySelectorAll(TAB)) { const dot = t.querySelector('.shell-recdot'); if (dot) dot.remove(); }
+  live.delete(host);
+}

package/workspace/public/pm/shell-ticker.js

@@ -0,0 +1,90 @@
+/* pm/shell-ticker.js — the running text under the top bar (console3 wave E2b), and the one shared read of GET /api/briefing that the
+ * bell, the banner and the phone tiles use too.
+ *
+ *   mountTicker(host, { onOpen }) / disposeTicker(host)   draw the lines into `host`; nothing when the briefing has none
+ *   loadBriefing(force)  → Promise of the briefing body (kept 60 s)     onBriefing(fn) → off()   called after every read
+ *
+ * Lifted: the mockup's `.tick > .tkt > .tki` drawn twice for the loop, tag in `b` (console3.html lines 539 to 545, 2478 to 2484). Hover
+ * pauses it (the stylesheet). Under prefers-reduced-motion the lines show one at a time, without movement.
+ */
+import { el } from './dom.js';
+import { ensureC3Css, c3ic } from './pm-work-view.js';
+import { TAG_STYLE } from './briefing-model.js';
+import { tickerLines } from './shell-model.js';
+
+const TTL = 60000;
+let cache = null;      // { at, body }
+let inflight = null;
+const subs = new Set();
+
+export function onBriefing(fn) { subs.add(fn); if (cache) fn(cache.body); return () => subs.delete(fn); }
+
+export function loadBriefing(force) {
+  if (!force && cache && Date.now() - cache.at < TTL) return Promise.resolve(cache.body);
+  if (inflight) return inflight;
+  inflight = fetch('/api/briefing').then((r) => (r.ok ? r.json() : null)).catch(() => null).then((body) => {
+    inflight = null;
+    if (!body || body.ok === false) return cache ? cache.body : { cards: [], ticker: [], banner: null };
+    cache = { at: Date.now(), body };
+    for (const fn of [...subs]) { try { fn(body); } catch { /* one listener's error is its own */ } }
+    return body;
+  });
+  return inflight;
+}
+
+export const reducedMotion = () => typeof matchMedia === 'function' && matchMedia('(prefers-reduced-motion: reduce)').matches;
+
+/** "Critical: Sign off (3d)" → the tag word in `b`, coloured by the tag's own token; other text as it is. */
+function itemOf(line) {
+  const i = line.indexOf(': ');
+  const tag = i > 0 ? line.slice(0, i) : '';
+  const st = TAG_STYLE[tag];
+  const color = st ? st.color : 'var(--muted-foreground)';
+  return el('span', { class: 'tki' }, el('span', { style: 'color:' + color }, c3ic(st ? st.icon : 'bolt', 'sm')),
+    st ? el('b', { style: 'color:' + color }, tag) : null, st ? line.slice(i + 2) : line);
+}
+
+const live = new WeakMap();   // host → { off, timer, mq }
+
+export function mountTicker(host, opts) {
+  if (!host) return;
+  disposeTicker(host);
+  ensureC3Css();
+  const onOpen = opts && opts.onOpen;
+  const box = el('div', { class: 'tick', role: 'button', tabindex: '0', 'aria-label': 'Open notifications', 'data-shell': 'ticker' });
+  const press = () => { if (onOpen) onOpen(); };
+  box.addEventListener('click', press);
+  box.addEventListener('keydown', (e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); press(); } });
+  host.appendChild(box);
+  const rec = { timer: null, lines: [], i: 0, box };
+  const draw = () => {
+    clearInterval(rec.timer); rec.timer = null;
+    const lines = rec.lines;
+    box.hidden = lines.length === 0;
+    box.replaceChildren();
+    if (!lines.length) return;
+    if (reducedMotion()) {
+      box.classList.add('static');
+      const show = () => { box.replaceChildren(el('div', { class: 'tkt', 'aria-live': 'off' }, itemOf(lines[rec.i % lines.length]))); rec.i++; };
+      rec.i = 0; show();
+      if (lines.length > 1) rec.timer = setInterval(show, 5000);
+      return;
+    }
+    box.classList.remove('static');
+    const one = () => lines.map(itemOf);
+    const second = el('span', { style: 'display:contents', 'aria-hidden': 'true' }, one());
+    box.appendChild(el('div', { class: 'tkt' }, el('span', { style: 'display:contents' }, one()), second));
+  };
+  rec.off = onBriefing((b) => { const next = tickerLines(b); if (next.join('\n') !== rec.lines.join('\n') || !box.childNodes.length) { rec.lines = next; draw(); } });
+  box.hidden = true;
+  live.set(host, rec);
+  loadBriefing();
+}
+
+export function disposeTicker(host) {
+  const rec = host && live.get(host);
+  if (!rec) return;
+  clearInterval(rec.timer); if (rec.off) rec.off();
+  if (rec.box.parentNode) rec.box.remove();
+  live.delete(host);
+}

package/workspace/public/pm/slide-confirm.js

@@ -0,0 +1,163 @@
+/* pm/slide-confirm.js — the slide-to-confirm control, on the console3 mockup's own markup and CSS (R4b).
+ *
+ *   mountSlide(host, { label, hash, onConfirm })   draws the control into host; onConfirm(hash) fires once, only after the
+ *                                                   thumb is dragged all the way (pointer), or Enter is held / ArrowRight is
+ *                                                   pressed to the end (keyboard). Releasing early snaps back.
+ *   disposeSlide(host)                              removes the control and its listeners
+ *
+ * The markup is the mockup's caseHtml slide (console3.html line 2290): `.slt > span.lb + button.th`, and the drag is the mockup's
+ * (lines 2439 to 2447): the thumb follows the pointer with transform, --p fills the track, a short drag nudges the thumb and
+ * says a tap is not enough. The styles are pm/console3.css (`.slt`). What the mockup does not have and this control keeps: the
+ * slide is created FOR a hash and hands the same hash back, so a confirm is bound to the content the PM saw (mount again with
+ * the new hash after an edit); the keyboard paths (hold Enter, or ArrowRight four times) with role=slider; reduced motion.
+ * The mockup's `.slt` takes its colour from --tc on the case file; a bare slide has no case file, so the control sets --tc. */
+import { ensureC3Css, c3ic } from './pm-work-view.js';
+import { toast } from './c3-toast.js';
+
+const FULL = 0.96;      // share of the track the thumb must cover
+const HOLD_MS = 900;    // Enter held this long counts as a full slide
+const STEP = 0.25;      // one ArrowRight press
+
+const reduced = () => {
+  try { return typeof matchMedia === 'function' && matchMedia('(prefers-reduced-motion: reduce)').matches; } catch { return false; }
+};
+
+const state = new WeakMap();   // host → { root, dispose }
+
+export function disposeSlide(host) {
+  const s = state.get(host);
+  if (!s) return;
+  s.dispose();
+  state.delete(host);
+}
+
+export function mountSlide(host, { label = 'Slide to confirm', hash = null, onConfirm } = {}) {
+  disposeSlide(host);
+  ensureC3Css();
+  const root = document.createElement('div');
+  root.className = 'c3 c3e';
+  const track = document.createElement('div');
+  track.className = 'slt';
+  track.style.setProperty('--tc', 'var(--accent)');
+  const lb = document.createElement('span');
+  lb.className = 'lb';
+  lb.textContent = label + ' ›››';
+  const th = document.createElement('button');
+  th.type = 'button';
+  th.className = 'th';
+  th.appendChild(c3ic('next'));
+  th.setAttribute('role', 'slider');
+  th.setAttribute('aria-label', label + '. Drag to the end, or hold Enter, or press the right arrow four times.');
+  th.setAttribute('aria-valuemin', '0');
+  th.setAttribute('aria-valuemax', '100');
+  th.setAttribute('aria-valuenow', '0');
+  const hint = document.createElement('div');
+  hint.className = 'slt-hint';
+  hint.setAttribute('aria-live', 'polite');
+  track.append(lb, th);
+  root.append(track, hint);
+  host.appendChild(root);
+
+  let v = 0;            // 0..1
+  let dragging = null;  // { x, max }
+  let fired = false;
+  let holdTimer = null;
+  const maxPx = () => Math.max(1, track.clientWidth - th.offsetWidth - 6);
+
+  function show(p) {
+    v = Math.max(0, Math.min(1, p));
+    th.style.transform = `translateX(${(v * maxPx()).toFixed(1)}px)`;
+    track.style.setProperty('--p', v.toFixed(3));
+    th.setAttribute('aria-valuenow', String(Math.round(v * 100)));
+  }
+  function nudge() {
+    th.style.animation = '';
+    th.classList.remove('nd'); void th.offsetWidth; th.classList.add('nd');
+  }
+  function fire() {
+    if (fired) return;
+    fired = true;
+    track.classList.add('done');
+    th.disabled = true;
+    show(1);
+    try { if (typeof onConfirm === 'function') onConfirm(hash); } catch { /* the caller reports its own errors */ }
+  }
+  function release() {
+    if (fired) return;
+    if (v >= FULL) { fire(); return; }
+    th.style.transition = '';
+    th.style.animation = '';
+    if (v < 0.03) { toast('Slide to confirm. A tap is not enough.'); nudge(); }
+    show(0);
+  }
+
+  const onDown = (e) => {
+    if (fired) return;
+    e.preventDefault();
+    dragging = { x: e.clientX - v * maxPx(), max: maxPx() };
+    th.style.transition = 'none';
+    th.style.animation = 'none';
+    hint.textContent = '';
+    try { th.setPointerCapture(e.pointerId); } catch { /* not capturable */ }
+  };
+  const onMove = (e) => { if (dragging) show((e.clientX - dragging.x) / dragging.max); };
+  const onUp = () => {
+    if (!dragging) return;
+    dragging = null;
+    release();
+  };
+  const onCancel = () => {
+    if (!dragging) return;
+    dragging = null;
+    th.style.transition = '';
+    th.style.animation = '';
+    show(0);
+  };
+  const clearHold = () => { if (holdTimer) { clearInterval(holdTimer); holdTimer = null; } };
+  const onKeyDown = (e) => {
+    if (fired) return;
+    if (e.key === 'ArrowRight') { e.preventDefault(); hint.textContent = ''; show(v + STEP); if (v >= FULL) fire(); }
+    else if (e.key === 'ArrowLeft') { e.preventDefault(); show(v - STEP); }
+    else if (e.key === 'Enter' && !e.repeat) {
+      e.preventDefault();
+      hint.textContent = 'Keep Enter held to confirm.';
+      const t0 = Date.now();
+      clearHold();
+      holdTimer = setInterval(() => {
+        const p = (Date.now() - t0) / HOLD_MS;
+        if (reduced() && p < 1) return;   // no animation: the thumb jumps to the end when the hold completes
+        show(p);
+        if (p >= 1) { clearHold(); fire(); }
+      }, 40);
+    }
+  };
+  const onKeyUp = (e) => {
+    if (e.key !== 'Enter') return;
+    clearHold();
+    if (!fired) { show(0); hint.textContent = 'Released early. Nothing was sent.'; }
+  };
+  const onBlur = () => { clearHold(); if (!fired && !dragging) show(0); };
+
+  th.addEventListener('pointerdown', onDown);
+  th.addEventListener('pointermove', onMove);
+  th.addEventListener('pointerup', onUp);
+  th.addEventListener('pointercancel', onCancel);
+  th.addEventListener('keydown', onKeyDown);
+  th.addEventListener('keyup', onKeyUp);
+  th.addEventListener('blur', onBlur);
+
+  state.set(host, {
+    root,
+    dispose() {
+      clearHold();
+      th.removeEventListener('pointerdown', onDown);
+      th.removeEventListener('pointermove', onMove);
+      th.removeEventListener('pointerup', onUp);
+      th.removeEventListener('pointercancel', onCancel);
+      th.removeEventListener('keydown', onKeyDown);
+      th.removeEventListener('keyup', onKeyUp);
+      th.removeEventListener('blur', onBlur);
+      root.remove();
+    },
+  });
+}