create-pmos 0.240.0 → 0.242.0

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

@@ -0,0 +1,413 @@
+/* pm/c3-replay.js — the meeting replay of console3 (initiative meeting-material-replay, part 2; the mockup the PM approved on 2026-10-14, #replay).
+ *   openReplay({ note, event, date })   closeReplay()   window.C3Replay = { open, close, state }
+ * Focus played back, full screen over console3 like Focus (inside #c3-root; the header, tabs and dock stay in the DOM, set inert).
+ * One read, GET /api/meeting-replay: the note (transcript, decisions, next steps, questions), the Focus state (topics, stretches, PMOS's notes)
+ * and the kept shots. The page plays the note's audio (GET /api/notes/recording) and ticks every 500 ms:
+ *   header       title and time, Back 10 s, Play or Pause, 1x 1.5x 2x; the topic track as the scrub bar: stretches numbered by topic, a mark for each
+ *                decision, question and next step (amber when it needs you: no owner, still open), a dot for each PMOS note, the playhead
+ *   now line     the topic the room was on, what is on screen, the count of key points
+ *   stage        the shot on screen at the playing time (a press opens it large), the strip of shots, "N set aside"
+ *   key points   decisions, next steps and questions, each with the time to play from; Confirm all makes a task of each next step
+ *   topics       minutes and the first time each came up
+ *   conversation the transcript lines and PMOS's notes in time order; the current line is marked and followed; All, Key points, PMOS; search
+ * A press on a stretch, a mark, a key point, a topic, a shot or a line plays from there. Without audio (none was kept) the page keeps its own
+ * clock, so the track, the shots and the lines still follow. Everything stays on this machine. */
+import { el } from './dom.js';
+import { pmGet } from './http.js';
+import { ensureC3Css } from './pm-work-view.js';
+import { ensureComponentsCss } from './primitives.js';
+import { icon, sect, pbtn, lk, btn, nrow, put, geo } from './c3-ini-ui.js';
+import { toast } from './c3-toast.js';
+import { openShot, whyText, shotIndexAt } from './notes-screen-view.js';
+
+const TICK_MS = 500;
+const NEAR_KEY_MS = 30000;          // a key point is "now" this long after its line
+const BACK_MS = 10000;
+const KIC = { decision: 'scale', action: 'todo', question: 'reply' };
+const KWORD = { decision: 'Decision', action: 'Next step', question: 'Question' };
+const KPLURAL = { decision: 'Decisions', action: 'Next steps', question: 'Questions' };
+const pad = (n) => String(n).padStart(2, '0');
+
+/** 3:07, or 1:03:07 from an hour on. Pure. */
+export function mmss(ms) {
+  const s = Math.max(0, Math.round((Number(ms) || 0) / 1000));
+  const h = Math.floor(s / 3600);
+  return (h ? h + ':' + pad(Math.floor(s / 60) % 60) : String(Math.floor(s / 60))) + ':' + pad(s % 60);
+}
+/** The index of the stretch the room was in at the time: the last stretch that began at or before it, or -1 before the first. Pure. */
+export function runIndexAt(runs, t) {
+  let at = -1;
+  (runs || []).forEach((r, i) => { if (r.from_ms <= t) at = i; });
+  return at;
+}
+/** The index of the last line said at or before the time, or -1. Pure. */
+export function lineIndexAt(lines, t) {
+  let lo = 0; let hi = (lines || []).length - 1; let at = -1;
+  while (lo <= hi) { const mid = (lo + hi) >> 1; if (lines[mid].t <= t) { at = mid; lo = mid + 1; } else hi = mid - 1; }
+  return at;
+}
+
+let S = null;   // the open page
+
+function ensureCss() {
+  ensureC3Css(); ensureComponentsCss();
+  if (document.querySelector('link[data-c3-replay]')) return;
+  const l = document.createElement('link');
+  l.rel = 'stylesheet'; l.href = new URL('./c3-replay.css', import.meta.url).href; l.setAttribute('data-c3-replay', '');
+  document.head.appendChild(l);
+}
+
+/* ── open and close ───────────────────────────────────────────────────────────────────────────────────────────── */
+
+export function closeReplay() {
+  if (!S) return;
+  const s = S; S = null;
+  clearInterval(s.timer);
+  try { s.audio.pause(); s.audio.removeAttribute('src'); s.audio.load(); } catch { /* no audio */ }
+  s.root.remove();
+  const host = document.getElementById('c3-root');
+  if (host) host.classList.remove('rpl-open');
+  const grid = host && host.querySelector('.c3grid'); if (grid) grid.inert = false;
+  const comp = host && host.querySelector('[data-c3ph]'); if (comp) comp.inert = false;
+  if (s.opener && document.contains(s.opener) && typeof s.opener.focus === 'function') { try { s.opener.focus({ preventScroll: true }); } catch { /* not focusable */ } }
+}
+
+export function openReplay({ note, event, date } = {}) {
+  closeReplay();
+  ensureCss();
+  const host = document.getElementById('c3-root') || document.body;
+  const root = el('div', { class: 'c3replay', role: 'region', 'aria-label': 'Meeting replay', 'data-c3replay': '', 'data-rpl-state': 'loading' },
+    el('div', { class: 'rpl-page' }, el('div', { class: 'fold', 'data-rpl': 'status' }, icon('clock', 'sm'), 'Reading the meeting …')));
+  S = { root, note: String(note || ''), event: event && (event.id || event) ? String(event.id || event) : '', date: String(date || ''), data: null, t: 0, play: false, speed: 1, filter: 'all', q: '',
+    audio: null, soundOff: false, timer: null, done: new Set(), r: {}, ix: { run: -2, shot: -2, line: -2 },
+    opener: document.activeElement && document.activeElement !== document.body ? document.activeElement : null };
+  host.classList.add('rpl-open');
+  host.append(root);
+  const grid = host.querySelector && host.querySelector('.c3grid'); if (grid) grid.inert = true;
+  const comp = host.querySelector && host.querySelector('[data-c3ph]'); if (comp) comp.inert = true;
+  load(S);
+}
+
+async function load(s) {
+  const p = new URLSearchParams();
+  if (s.note) p.set('note', s.note);
+  if (s.event) p.set('event', s.event);
+  if (s.date) p.set('date', s.date);
+  let d = null;
+  try { d = await pmGet('/api/meeting-replay?' + p.toString()); } catch (e) { d = { ok: false, error: String((e && e.message) || e) }; }
+  if (S !== s) return;
+  if (!d || !d.ok) { fail(s, (d && d.error) || 'The replay could not be read.'); return; }
+  s.data = d;
+  s.root.dataset.rplState = 'ok';
+  if (d.audio) {
+    s.audio = el('audio', { preload: 'metadata', src: d.audio.url, 'data-rpl': 'audio' });
+    s.audio.addEventListener('ended', () => { if (S === s) { s.play = false; paintTop(s); } });
+    s.audio.addEventListener('error', () => { if (S === s) s.soundOff = true; });
+  }
+  build(s);
+  s.timer = setInterval(() => tick(s), TICK_MS);
+  const back = s.root.querySelector('[data-rpl="leave"]'); if (back) back.focus({ preventScroll: true });
+}
+
+function fail(s, message) {
+  s.root.dataset.rplState = 'error';
+  put(s.root, el('div', { class: 'rpl-page' }, el('div', { class: 'fold', 'data-rpl': 'status' }, icon('alert', 'sm'), message),
+    el('div', { class: 'iacts' }, pbtn('ghost', 'Back', 'prev', { 'data-rpl': 'close' }))));
+}
+
+/* ── time ─────────────────────────────────────────────────────────────────────────────────────────────────────── */
+
+const lenOf = (s) => Math.max(1, s.data.length_ms || 0);
+const wall = (s, ms) => (s.data.start_ms == null ? mmss(ms) : (() => { const d = new Date(s.data.start_ms + ms); return pad(d.getHours()) + ':' + pad(d.getMinutes()); })());
+const pct = (s, ms) => Math.max(0, Math.min(100, ms / lenOf(s) * 100));
+
+function playNow(s) {
+  s.play = true;
+  if (s.audio && !s.soundOff) {
+    s.audio.playbackRate = s.speed;
+    const p = s.audio.play();
+    if (p && typeof p.catch === 'function') p.catch(() => { s.soundOff = true; });
+  }
+}
+function pauseNow(s) { s.play = false; if (s.audio) { try { s.audio.pause(); } catch { /* none */ } } }
+
+/** Move the playhead. `andPlay`: start playing from there (a track, a key point, a topic, a shot or a line); Back 10 s keeps the state. */
+function seek(s, ms, andPlay) {
+  const len = lenOf(s);
+  s.t = Math.max(0, Math.min(len, Math.round(ms)));
+  if (s.audio && !s.soundOff) { try { s.audio.currentTime = s.t / 1000; } catch { /* not ready yet */ } }
+  if (andPlay) playNow(s);
+  paintTop(s);
+  paintTime(s, true);
+}
+
+function tick(s) {
+  if (S !== s || !s.data) return;
+  const len = lenOf(s);
+  if (s.play) {
+    if (s.audio && !s.soundOff && !s.audio.paused) s.t = Math.round(s.audio.currentTime * 1000);
+    else s.t = Math.min(len, s.t + TICK_MS * s.speed);   // no sound (none kept, or it cannot play): the page keeps the time
+    if (s.t >= len) { s.t = len; s.play = false; if (s.audio) { try { s.audio.pause(); } catch { /* none */ } } paintTop(s); }
+  }
+  paintTime(s, false);
+}
+
+/* ── building ─────────────────────────────────────────────────────────────────────────────────────────────────── */
+
+function build(s) {
+  const r = s.r;
+  r.top = el('header', { class: 'card rpl-top', 'aria-label': 'Meeting replay' });
+  r.now = el('div', { class: 'rpl-nowl', 'data-rpl': 'now-line' });
+  r.stage = el('div', { class: 'rpl-stagewrap' });
+  r.keys = el('div', { class: 'rpl-keywrap' });
+  r.topics = el('div', { class: 'rpl-topwrap' });
+  r.convo = el('section', { class: 'rpl-cv', 'aria-label': 'What was said, with PMOS\'s notes' });
+  put(s.root, el('div', { class: 'rpl-page' }, r.top, r.now,
+    el('div', { class: 'rpl-main' }, el('div', { class: 'rpl-s' }, r.stage, r.keys, r.topics), el('aside', { class: 'rpl-w', 'aria-label': 'Conversation' }, r.convo)), s.audio));
+  buildTop(s);
+  buildKeys(s);
+  buildTopics(s);
+  buildConvo(s);
+  s.ix = { run: -2, shot: -2, line: -2 };
+  paintTime(s, true);
+}
+
+function chipsOf(s) {
+  const d = s.data;
+  const start = d.meeting.at ? new Date(d.meeting.at) : null;
+  const day = start && Number.isFinite(start.getTime()) ? start.toLocaleDateString(undefined, { weekday: 'short', day: 'numeric', month: 'short' }) : '';
+  const len = Math.round(lenOf(s) / 60000);
+  const kept = d.shots.length;
+  return el('div', { class: 'chips2 dim mono' },
+    el('span', null, [day, d.start_ms != null ? wall(s, 0) + ' to ' + wall(s, lenOf(s)) : '', len + ' min'].filter(Boolean).join(' · ')),
+    d.meeting.attendees.length ? el('span', null, d.meeting.attendees.length + (d.meeting.attendees.length === 1 ? ' person' : ' people')) : null,
+    el('span', { title: 'Audio and screen shots are kept on this machine' }, icon('lock', 'sm'), (d.audio ? 'audio' : 'no audio') + (kept ? ' and ' + kept + (kept === 1 ? ' screen shot' : ' screen shots') : '')),
+    d.aside_count ? lk({ 'data-rpl': 'aside', class: 'rpl-warnc', title: 'Shots that looked like another app. They are not in the replay.' }, d.aside_count + ' set aside') : null);
+}
+
+function trackOf(s) {
+  const d = s.data;
+  const marks = d.keys.filter((k) => k.t != null).map((k) => {
+    const b = btn({ class: 'rpl-mkdot k-' + k.k + (k.warn ? ' warn' : ''), 'data-rpl-seek': String(k.t), 'data-rpl-mark': k.id, title: KWORD[k.k] + ' at ' + wall(s, k.t) + ': ' + k.text, 'aria-label': KWORD[k.k] + ' at ' + wall(s, k.t) }, icon(KIC[k.k], 'sm'));
+    return geo(b, { '--fc-left': pct(s, k.t) + '%' });
+  });
+  const pms = d.notes.map((n) => geo(btn({ class: 'rpl-mkdot pm', 'data-rpl-seek': String(n.t), 'data-rpl-pm': n.id, title: 'PMOS note at ' + wall(s, n.t) + ': ' + n.body, 'aria-label': 'PMOS note at ' + wall(s, n.t) }), { '--fc-left': pct(s, n.t) + '%' }));
+  const topicText = (id) => (d.topics.find((t) => t.id === id) || {}).text || '';
+  const runs = d.runs.map((rn, i) => {
+    const w = (rn.to_ms - rn.from_ms) / lenOf(s) * 100;
+    const b = btn({ class: 'rpl-run', 'data-rpl-seek': String(rn.from_ms), 'data-rpl-run': String(i), title: (rn.n ? rn.n + '. ' : '') + topicText(rn.topic) + ' · ' + wall(s, rn.from_ms) + ' · ' + Math.max(1, Math.round((rn.to_ms - rn.from_ms) / 60000)) + ' min' }, w >= 5 && rn.n ? String(rn.n) : '');
+    return geo(b, { '--fc-left': pct(s, rn.from_ms) + '%', '--fc-width': Math.max(0.5, w) + '%' });
+  });
+  const head = geo(el('span', { class: 'rpl-now', 'data-rpl': 'head' }), { '--fc-left': '0%' });
+  const ticks = [0, 15, 30, 45, 60, 75, 90].map((m) => m * 60000).filter((ms) => ms < lenOf(s) * 0.92)
+    .map((ms) => geo(el('span', { class: 'rpl-tick' }, wall(s, ms)), { '--fc-left': pct(s, ms) + '%' }));
+  return el('div', { class: 'rpl-track', role: 'group', 'aria-label': 'The meeting by topic, with decisions, questions and next steps. Press a stretch or a mark to play from there.' },
+    el('div', { class: 'rpl-rail', 'data-rpl': 'rail' }, el('div', { class: 'rpl-mks' }, ...marks), el('div', { class: 'rpl-runs', 'data-rpl': 'bar' }, ...runs), el('div', { class: 'rpl-pms' }, ...pms), head),
+    el('div', { class: 'rpl-ticks dim mono' }, ...ticks, el('span', { class: 'end' }, wall(s, lenOf(s)))));
+}
+
+function buildTop(s) {
+  const d = s.data;
+  const legend = el('div', { class: 'rpl-legend dim' },
+    ...['decision', 'question', 'action'].map((k) => el('span', { class: 'rpl-lg k-' + k }, icon(KIC[k], 'sm'), KPLURAL[k])),
+    el('span', { class: 'rpl-lg pm' }, el('i', { class: 'rpl-lgdot' }), 'PMOS notes'), el('span', { class: 'rpl-lg warn' }, el('i', { class: 'rpl-lgdot' }), 'needs you'));
+  put(s.r.top,
+    el('div', { class: 'rpl-id' },
+      pbtn('ghost', 'Back to the note', 'prev', { 'data-rpl': 'leave', title: 'Back to the note in Calendar' }),
+      el('div', { class: 'rpl-tt' }, el('h1', null, d.meeting.title), chipsOf(s))),
+    el('div', { class: 'rpl-clock' }, el('div', null, el('b', { class: 'mono', 'data-rpl': 't' }, mmss(s.t)),
+      el('span', { class: 'dim mono' }, 'of ' + mmss(lenOf(s)) + ' · ', el('span', { 'data-rpl': 'clk' }, wall(s, s.t))))),
+    el('div', { class: 'rpl-acts', 'data-rpl': 'acts' }),
+    trackOf(s), legend);
+  paintTop(s);
+}
+
+/** The play controls: they change with Play, Pause and the speed, so they are drawn on their own. */
+function paintTop(s) {
+  const acts = s.r.top && s.r.top.querySelector('[data-rpl="acts"]');
+  if (!acts) return;
+  const play = pbtn('primary', s.play ? 'Pause' : 'Play', s.play ? 'pause' : 'play', { 'data-rpl': 'play', 'aria-pressed': String(s.play) });
+  put(acts, pbtn('ghost', 'Back 10 s', 'undo', { 'data-rpl': 'back' }), play,
+    el('div', { class: 'seg ini-seg', role: 'group', 'aria-label': 'Speed' }, ...[1, 1.5, 2].map((v) => btn({ 'aria-pressed': String(s.speed === v), 'data-rpl-speed': String(v) }, v + '×'))));
+}
+
+function nowLine(s) {
+  const d = s.data;
+  const ri = runIndexAt(d.runs, s.t);
+  const run = ri >= 0 ? d.runs[ri] : null;
+  const tp = run ? d.topics.find((t) => t.id === run.topic) : null;
+  const si = shotIndexAt(d.shots, s.t);
+  const need = d.keys.filter((k) => k.warn).length;
+  return [el('span', { class: 'rpl-nowt' }, el('span', { class: 'ki hot' }, icon('play', 'sm')),
+    tp ? [el('span', { class: 'mono dim' }, run.n || ''), el('b', { 'data-rpl': 'topic' }, tp.text), el('span', { class: 'mono dim' }, wall(s, run.from_ms) + ' to ' + wall(s, run.to_ms))] : el('span', { class: 'dim' }, d.topics.length ? 'Before the first topic' : 'No topics were kept for this meeting')),
+  el('span', { class: 'rpl-grow' }),
+  d.shots.length ? el('span', { class: 'chip2', 'data-rpl': 'shot-state' }, icon('eye', 'sm'), si >= 0 ? 'Screen shot from ' + wall(s, d.shots[si].t) : 'Nothing shared yet') : null,
+  d.keys.length ? lk({ 'data-rpl': 'keys' }, icon('check', 'sm'), d.keys.length + (d.keys.length === 1 ? ' key point' : ' key points') + (need ? ' · ' + need + ' need you' : '')) : null];
+}
+
+function stageNode(s) {
+  const d = s.data;
+  const si = shotIndexAt(d.shots, s.t);
+  const sh = si >= 0 ? d.shots[si] : null;
+  const strip = d.shots.map((x, i) => btn({ class: 'chip2' + (i === si ? ' on' : ''), 'data-rpl-seek': String(x.t), 'data-rpl-shot': String(x.t), 'aria-pressed': String(i === si), title: whyText(x.why) }, wall(s, x.t)));
+  const screen = sh
+    ? btn({ class: 'rpl-shotb', 'data-rpl': 'open-shot', title: 'Open this shot large' },
+      el('img', { class: 'rpl-shot', src: '/api/notes/screen?id=' + encodeURIComponent(d.note.id) + '&t=' + Math.round(sh.t), alt: sh.text ? 'Screen at ' + mmss(sh.t) + ': ' + sh.text.slice(0, 200) : 'Screen at ' + mmss(sh.t), 'data-rpl-img': String(sh.t) }))
+    : el('div', { class: 'fold', 'data-rpl': 'no-shot' }, icon('moon', 'sm'), d.shots.length ? 'Nothing was shared yet. The first screen shot is at ' + wall(s, d.shots[0].t) + '.' : 'No screen shots were kept for this meeting.');
+  return sect({ ic: 'eye', title: 'On screen', attrs: { class: 'rpl-stage', 'data-rpl': 'stage' }, right: sh ? el('span', { class: 'dim mono' }, (whyText(sh.why) ? whyText(sh.why) + ' · ' : '') + wall(s, sh.t)) : null },
+    el('div', { class: 'rpl-screen' }, screen),
+    d.shots.length || d.aside_count ? el('div', { class: 'rpl-strip', role: 'group', 'aria-label': 'Screen shots kept, by time' }, ...strip, el('span', { class: 'rpl-grow' }),
+      d.aside_count ? pbtn('ghost', d.aside_count + ' set aside', 'eye', { 'data-rpl': 'aside' }) : null) : null);
+}
+
+function buildKeys(s) {
+  const d = s.data;
+  const col = (k) => {
+    const items = d.keys.filter((x) => x.k === k);
+    return el('div', { class: 'rpl-col' }, el('div', { class: 'rpl-lbl' }, icon(KIC[k], 'sm'), ' ' + KPLURAL[k] + ' ', el('span', { class: 'bdg g' }, String(items.length))),
+      items.length ? el('ul', { class: 'list', role: 'list' }, ...items.map((x) => keyRow(s, x))) : el('div', { class: 'dim rpl-none' }, 'None caught.'));
+  };
+  put(s.r.keys, d.keys.length ? sect({ ic: 'check', title: 'Key points', attrs: { 'data-rpl': 'keys-sect' }, right: d.keys.some((x) => x.k === 'action') ? pbtn('primary', 'Confirm all', 'check', { 'data-rpl': 'confirm', title: 'Make a task of each next step on the note\'s initiative' }) : null },
+    el('div', { class: 'rpl-cap' }, col('decision'), col('action'), col('question')),
+    el('p', { class: 'dim rpl-src' }, 'Each one plays from the moment it was said. Confirm all makes a task of each next step on the note\'s initiative.')) : null);
+}
+function keyRow(s, x) {
+  const made = s.done.has(x.id);
+  const meta = x.k === 'decision' ? x.by : x.k === 'action' ? [x.owner, x.due && 'due ' + x.due].filter(Boolean).join(' · ') : x.state === 'answered' ? 'answered' : 'still open';
+  return nrow({ title: x.text, ic: KIC[x.k], hot: x.warn, cls: 'rpl-key', attrs: { 'data-rpl-key': x.id, ...(x.t != null ? { 'data-rpl-keyt': String(x.t) } : {}) },
+    chips: [x.t != null ? lk({ class: 'mono', 'data-rpl-seek': String(x.t), 'data-rpl-play': x.id, title: 'Play from ' + wall(s, x.t) }, icon('play', 'sm'), wall(s, x.t)) : null,
+      x.state === 'owner' ? el('span', { class: 'tag rpl-warn' }, icon('user', 'sm'), 'no owner') : meta ? el('span', { class: 'tag' + (x.state === 'open' ? ' rpl-warn' : '') }, meta) : null,
+      made ? el('span', { class: 'tag' }, 'task made') : x.k !== 'question' ? el('span', { class: 'tag' }, 'draft') : null] });
+}
+
+function buildTopics(s) {
+  const d = s.data;
+  const rows = d.topics.map((t) => el('li', { class: 'nrow rpl-topic', 'data-rpl-topic': t.id },
+    el('span', { class: 'ki' }, t.n ? el('span', { class: 'mono' }, String(t.n)) : icon('clock', 'sm')),
+    el('div', { class: 'nb' }, el('span', { class: 'tt' }, t.text),
+      el('div', { class: 'chips' },
+        t.first_t != null ? lk({ class: 'mono', 'data-rpl-seek': String(t.first_t), title: 'Play from the first time it came up' }, icon('play', 'sm'), wall(s, t.first_t)) : null,
+        t.parked ? el('span', { class: 'tag rpl-warn' }, 'parked') : t.first_t == null ? el('span', { class: 'tag' }, 'not reached') : el('span', { class: 'tag' }, (t.minutes < 1 ? 'under 1 min' : t.minutes + ' min') + (t.stretches > 1 ? ' in ' + t.stretches + ' stretches' : '')),
+        t.by ? el('span', { class: 'tag' }, 'added by ' + t.by) : null)),
+    el('span')));
+  put(s.r.topics, d.topics.length ? sect({ ic: 'todo', title: 'Topics', count: d.topics.length, attrs: { 'data-rpl': 'topics-sect' } }, el('ul', { class: 'list', role: 'list' }, ...rows)) : null);
+}
+
+/* the conversation: built when the filter or the search changes; the current line is marked in place as time moves */
+function buildConvo(s) {
+  const d = s.data;
+  const q = s.q.trim().toLowerCase();
+  const items = [...d.lines.map((l) => ({ t: l.t, l })), ...d.notes.map((n) => ({ t: n.t, n }))].sort((a, b) => a.t - b.t || (a.n ? 1 : 0) - (b.n ? 1 : 0))
+    .filter((x) => s.filter === 'all' || (s.filter === 'key' ? x.l && x.l.key : x.n))
+    .filter((x) => !q || (x.l ? x.l.text : x.n.body).toLowerCase().includes(q));
+  const rows = items.map((x) => {
+    if (x.n) {
+      return el('li', { class: 'rpl-pm', 'data-rpl-pmt': String(x.t) }, btn({ class: 'rpl-lb', 'data-rpl-seek': String(x.t) },
+        el('span', { class: 'rpl-cvwho' }, el('span', { class: 'fc-avdot', 'aria-hidden': 'true' }, icon('spark', 'sm')), el('b', { class: 'mono' }, 'PMOS'), el('span', { class: 'rpl-cat' }, x.n.cat), el('span', { class: 'dim mono rpl-time' }, wall(s, x.t))),
+        el('span', { class: 'rpl-pb' }, x.n.body)));
+    }
+    const l = x.l;
+    const k = l.key ? d.keys.find((z) => z.id === l.key.id) : null;
+    return el('li', { class: 'rpl-l', 'data-rpl-line': String(l.i), 'data-rpl-linet': String(l.t) }, btn({ class: 'rpl-lb', 'data-rpl-seek': String(l.t) },
+      el('span', { class: 'rpl-lh' }, el('b', null, l.who || 'You'), el('span', { class: 'dim mono' }, wall(s, l.t)), k ? el('span', { class: 'tag rpl-kt k-' + k.k }, icon(KIC[k.k], 'sm'), KWORD[k.k]) : null),
+      el('span', { class: 'rpl-lt' }, l.text)));
+  });
+  const seg = el('div', { class: 'seg ini-seg', role: 'group', 'aria-label': 'Show' }, ...[['all', 'All'], ['key', 'Key points'], ['pm', 'PMOS']].map(([k, label]) => btn({ 'aria-pressed': String(s.filter === k), 'data-rpl-filter': k }, label)));
+  const input = el('input', { type: 'search', 'data-rpl-q': '', 'aria-label': 'Search what was said', placeholder: 'Search what was said', value: s.q });
+  put(s.r.convo, el('div', { class: 'rpl-cvh' }, el('b', null, 'Conversation'), seg),
+    el('ol', { class: 'rpl-cvs', role: 'list', 'data-rpl': 'list' }, rows.length ? rows : el('li', { class: 'dim' }, d.lines.length || d.notes.length ? 'Nothing matches.' : 'No words were kept for this meeting.')),
+    el('form', { class: 'rpl-cvin', onSubmit: (e) => e.preventDefault() }, input, icon('search', 'sm')));
+  s.ix.line = -2;
+}
+
+/* ── painting the time ────────────────────────────────────────────────────────────────────────────────────────── */
+
+function paintTime(s, force) {
+  const d = s.data; const root = s.root;
+  const set = (k, v) => { const n = root.querySelector('[data-rpl="' + k + '"]'); if (n && n.textContent !== v) n.textContent = v; };
+  set('t', mmss(s.t)); set('clk', wall(s, s.t));
+  const head = root.querySelector('[data-rpl="head"]'); if (head) head.style.setProperty('--fc-left', pct(s, s.t) + '%');
+  root.dataset.rplT = String(Math.round(s.t));
+  const ri = runIndexAt(d.runs, s.t); const si = shotIndexAt(d.shots, s.t); const li = lineIndexAt(d.lines, s.t);
+  if (force || ri !== s.ix.run) {
+    root.querySelectorAll('.rpl-run').forEach((b) => b.classList.toggle('c', Number(b.dataset.rplRun) === ri));
+    const cur = ri >= 0 ? d.runs[ri].topic : null;
+    root.querySelectorAll('.rpl-topic').forEach((n) => n.classList.toggle('cur', n.dataset.rplTopic === cur));
+  }
+  if (force || ri !== s.ix.run || si !== s.ix.shot) put(s.r.now, nowLine(s));
+  if (force || si !== s.ix.shot) put(s.r.stage, stageNode(s));
+  s.ix.run = ri; s.ix.shot = si;
+  root.querySelectorAll('.rpl-key[data-rpl-keyt]').forEach((n) => n.classList.toggle('cur', s.t >= Number(n.dataset.rplKeyt) && s.t - Number(n.dataset.rplKeyt) < NEAR_KEY_MS));
+  const list = root.querySelector('[data-rpl="list"]');
+  if (list && (force || li !== s.ix.line)) {
+    let curNode = null;
+    list.querySelectorAll('.rpl-l').forEach((n) => { const at = Number(n.dataset.rplLinet); const on = Number(n.dataset.rplLine) === li; n.classList.toggle('on', on); n.classList.toggle('fut', at > s.t); if (on) { curNode = n; n.setAttribute('aria-current', 'true'); } else n.removeAttribute('aria-current'); });
+    list.querySelectorAll('.rpl-pm').forEach((n) => n.classList.toggle('fut', Number(n.dataset.rplPmt) > s.t));
+    if (!curNode) {   // under a filter the current line may be hidden: follow the last one shown that is not in the future
+      const shown = [...list.querySelectorAll('.rpl-l, .rpl-pm')].filter((n) => Number(n.dataset.rplLinet != null ? n.dataset.rplLinet : n.dataset.rplPmt) <= s.t);
+      curNode = shown[shown.length - 1] || null;
+    }
+    if (curNode) list.scrollTop = Math.max(0, curNode.offsetTop - list.offsetTop - list.clientHeight / 3);
+    s.ix.line = li;
+  }
+}
+
+/* ── presses ──────────────────────────────────────────────────────────────────────────────────────────────────── */
+
+async function confirmAll(s) {
+  const d = s.data;
+  const todo = d.keys.filter((k) => k.k === 'action' && !s.done.has(k.id));
+  if (!todo.length) { toast('Every next step is already a task.'); return; }
+  const { makeTask } = await import('./notes-task.js');
+  const n = { id: d.note.id, title: d.note.title, initiative: d.note.initiative, ws: d.note.ws };
+  for (const k of todo) {
+    const id = await makeTask(n, { text: k.text, owner: k.owner, due: k.due });
+    if (!id) break;   // makeTask has said why (no initiative, no stage); the rest wait
+    s.done.add(k.id);
+    if (S !== s) return;
+  }
+  buildKeys(s); paintTime(s, true);
+}
+
+function asideSheet(s) {
+  const aside = window.NotesAside;
+  if (aside && typeof aside.open === 'function') { aside.open(s.data.note.id); return; }
+  toast(s.data.aside_count + (s.data.aside_count === 1 ? ' shot' : ' shots') + ' looked like another app and ' + (s.data.aside_count === 1 ? 'is' : 'are') + ' not in the replay. They are deleted after 7 days.');
+}
+
+function onClick(ev) {
+  if (!S || !S.data) { if (S && ev.target.closest && ev.target.closest('[data-rpl="close"]')) closeReplay(); return; }
+  const s = S;
+  if (!s.root.contains(ev.target)) return;
+  const t = ev.target.closest('[data-rpl-seek],[data-rpl-speed],[data-rpl-filter],[data-rpl]');
+  const rail = ev.target.closest('[data-rpl="rail"]');
+  if (!t && !rail) return;
+  if (t && t.dataset.rplSeek !== undefined) { ev.preventDefault(); seek(s, Number(t.dataset.rplSeek), true); return; }
+  if (t && t.dataset.rplSpeed) { s.speed = Number(t.dataset.rplSpeed); if (s.audio) s.audio.playbackRate = s.speed; paintTop(s); return; }
+  if (t && t.dataset.rplFilter) { s.filter = t.dataset.rplFilter; buildConvo(s); paintTime(s, true); return; }
+  const k = t && t.dataset.rpl;
+  if (k === 'play') { if (s.play) pauseNow(s); else { if (s.t >= lenOf(s)) seek(s, 0, false); playNow(s); } paintTop(s); return; }
+  if (k === 'back') { seek(s, s.t - BACK_MS, false); return; }
+  if (k === 'leave') { const id = s.data.note.id; closeReplay(); window.dispatchEvent(new CustomEvent('c3-open-note', { detail: { id } })); return; }
+  if (k === 'keys') { const n = s.root.querySelector('.rpl-cap'); if (n && n.scrollIntoView) n.scrollIntoView({ behavior: 'smooth', block: 'center' }); return; }
+  if (k === 'open-shot') { const i = shotIndexAt(s.data.shots, s.t); if (i >= 0) openShot({ id: s.data.note.id, frames: s.data.shots, index: i, seek: (ms) => seek(s, ms, true) }); return; }
+  if (k === 'aside') { asideSheet(s); return; }
+  if (k === 'confirm') { confirmAll(s); return; }
+  // a press on the empty rail scrubs: the time under the pointer
+  if (rail) { const b = rail.getBoundingClientRect(); if (b.width > 0) seek(s, (ev.clientX - b.left) / b.width * lenOf(s), true); }
+}
+function onInput(ev) {
+  if (!S || !S.data) return;
+  const q = ev.target.closest && ev.target.closest('[data-rpl-q]'); if (!q || !S.root.contains(q)) return;
+  const s = S; s.q = q.value; const p = q.selectionStart;
+  buildConvo(s); paintTime(s, true);
+  const n = s.root.querySelector('[data-rpl-q]'); if (n) { n.focus(); try { n.setSelectionRange(p, p); } catch { /* not a text field */ } }
+}
+document.addEventListener('click', onClick);
+document.addEventListener('input', onInput);
+
+if (typeof window !== 'undefined') {
+  window.C3Replay = { open: openReplay, close: closeReplay,
+    /** What the page is doing, for a test and for the entry points: { open, t, playing, speed } */
+    state: () => (S ? { open: true, t: S.t, playing: S.play, speed: S.speed, loaded: !!S.data, sound: !!S.audio && !S.soundOff } : { open: false }) };
+}

package/workspace/public/pm/c3-report-setup.js

@@ -16,6 +16,7 @@ import { toast } from './c3-toast.js';
 import { FORMATS, OUTPUTS, formatOf, ensureReportCss } from './c3-doc-formats.js';
 import { createDeck } from './c3-report-deck.js';
 import { openStudio, openBrief } from './c3-design-studio.js';
+import { openStructure } from './c3-report-structure.js';
 import { RS, onReports, loadReports, askPmos, changeIt, cancelAsk, setupFrom, draftNow, dismissLater, pauseResume, fromDashboard, goTo, evidenceKind, normProposal, scheduleLabel, nextDraftDate, dayText, docsOf, outChip, copyChip, srcChip } from './c3-report-store.js';
 
 const MON = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
@@ -118,6 +119,7 @@ function askCard(a, redo) {
   return sect({ ic: 'spark', title: 'PMOS answer', attrs, right: confTag('') }, el('div', { class: 'rs-stack' }, head,
     lbl('WHAT PMOS FOUND'), ...foundList(P), lbl('PROPOSED REPORT'), proposed(key, P, redo), lbl('LEARNED FROM'), ...[].concat(learnedBlock(P)), lbl('FIXES IT WILL APPLY'), fixesList(P), ...(cb ? [].concat(cb) : []),
     el('div', { class: 'chips2' }, pbtn('primary', 'Set up', 'check', { 'data-rs-act': 'setup', onclick: () => setupFrom({ ask: a.id, proposal: P }) }),
+      pbtn('outline', 'Shape it with PMOS', 'todo', { 'data-rs-act': 'shape', title: 'Set the report up, then decide with PMOS what it answers, where each number comes from and how it is worked out', onclick: async () => { const r = await setupFrom({ ask: a.id, proposal: P }); if (r && r.ok && r.setup) openStructure({ ws: RS.ws, id: r.setup.id, name: r.setup.name }); } }),
       pbtn('outline', 'Change', 'edit', { 'data-rs-act': 'change', onclick: () => { RS.chg[key] = { ...st, open: true }; redo(); } }),
       pbtn('ghost', 'Cancel', 'x', { 'data-rs-act': 'cancel-ask', onclick: async () => { const r = await cancelAsk(a.id); if (r && r.ok) toast('Cancelled. Nothing was set up.'); } })),
     help('PMOS reads your past copies to learn the sections. It drafts only; you issue.')));
@@ -232,6 +234,7 @@ export function mountReportSetup(host, ctx) {
         open ? cycRows(s) : null),
       el('div', { class: 'acts' }, cy.length || paused || s.source !== 'work' ? pbtn('outline', 'Open', 'out', { 'data-rs-act': 'open-reg', onclick: () => openSetup(s) })
         : pbtn('outline', 'Draft it now', 'spark', { 'data-rs-act': 'draft-now', onclick: () => openSetup(s) }),
+        s.source === 'work' ? pbtn('ghost', 'Shape the report', 'todo', { 'data-rs-act': 'shape', onclick: () => openStructure({ ws: RS.ws, id: s.id, name: s.name }) }) : null,
         s.source === 'work' ? pbtn('ghost', 'Design how it looks', 'spark', { 'data-rs-act': 'design', onclick: () => openStudio({ ws: RS.ws, id: s.id, name: s.name }) }) : null,
         pbtn('ghost', 'All cycles (' + n + ')', 'fold', { 'data-rs-act': 'cyc', 'aria-expanded': String(open), onclick: () => { if (RS.cyc.has(s.id)) RS.cyc.delete(s.id); else RS.cyc.add(s.id); drawSetups(); } }),
         pbtn('ghost', paused ? 'Resume' : 'Pause', paused ? 'play' : 'pause', { 'data-rs-act': 'pause', onclick: () => pauseResume(s, !paused) })));

package/workspace/public/pm/c3-report-structure.css

@@ -0,0 +1,40 @@
+/* pm/c3-report-structure.css — the Structure step of the report studio (c3-report-structure.js; mockup 43-reportstructure.css).
+   The conversation reuses the Design studio's .rd-dks-* rules (c3-report-deck.css). Tokens only; font sizes are the --fs-* scale. */
+.c3 .rs-st { display: grid; gap: var(--sp-3); min-width: 0; }
+.c3 .rs-st-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; }
+.c3 .rs-st-bar .seg button { display: inline-flex; gap: 4px; align-items: center; }
+.c3 .rs-st .rd-dks-out > .card.sect { margin: 0; }
+.c3 .rs-st-q { display: grid; gap: 4px; }
+.c3 .rs-st-q b { font-size: var(--fs-2); font-weight: 500; }
+.c3 .rs-st-small { font-size: var(--fs-2); }
+.c3 .rs-st-tiny { font-size: var(--fs-1); }
+.c3 .rs-st-fg { color: var(--foreground); }
+.c3 .rs-st-field { display: grid; gap: 2px; font-size: var(--fs-2); }
+.c3 .rs-st-field input { width: 100%; box-sizing: border-box; padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--card); color: var(--foreground); font: var(--fs-3)/1.4 var(--sans); }
+.c3 .rs-st-form { display: grid; gap: 8px; padding: 8px 10px; margin: 0 0 4px; border: 1px solid var(--border); border-radius: 8px; background: var(--background); }
+.c3 .rs-st-tw { overflow-x: auto; }
+.c3 .rs-st-tbl { min-width: 640px; font-size: var(--fs-2); }
+.c3 .rs-st-tbl td { vertical-align: top; }
+.c3 .rs-st-row.on td { background: var(--muted); }
+.c3 .rs-st-tbl .tt { text-align: left; }
+.c3 .rs-st-det > td { border-top: 0; padding-top: 0; }
+.c3 .rs-st-detb { display: grid; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--background); }
+.c3 .rs-st-detb p, .c3 .rs-st-opt p, .c3 .rs-st-p { margin: 2px 0 0; font-size: var(--fs-3); line-height: 1.5; }
+.c3 .rs-st-detb .dim.mono, .c3 .rs-st-opt .dim.mono { font-size: var(--fs-1); }
+.c3 .rs-st-code { font-size: var(--fs-2); overflow-wrap: anywhere; }
+.c3 .rs-st-ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
+.c3 .rs-st-ol > li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 8px; align-items: start; }
+.c3 .rs-st-ol .chips { margin-top: 4px; }
+.c3 .rs-st-n { display: grid; place-items: center; width: 24px; height: 24px; border: 1px solid var(--border); border-radius: 6px; font-size: var(--fs-1); color: var(--muted-foreground); }
+.c3 .rs-st-mini { margin: 0; padding-left: 20px; display: grid; gap: 2px; font-size: var(--fs-2); }
+.c3 .rs-st-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--sp-2); }
+.c3 .rs-st-opt { display: grid; gap: 10px; align-content: start; margin: 0; }
+.c3 .rs-st-chk > li { grid-template-columns: 16px minmax(0, 1fr) auto; }
+.c3 .rs-st-saved { display: grid; gap: var(--sp-3); }
+.c3 .rs-st .rd-dks-panel { display: flex; flex-direction: column; max-height: 42vh; overflow: auto; }
+.c3 .rs-st .rd-dks-panel > * { flex: none; }
+@media (max-width: 760px) {
+  .c3 .rs-st .rd-dks { grid-template-columns: minmax(0, 1fr); }
+  .c3 .rs-st .rd-dks-chat { position: static; max-height: none; }
+  .c3 .rs-st .rd-dks-log { max-height: 420px; }
+}