create-pmos 0.241.0 → 0.243.0

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

@@ -111,7 +111,7 @@ async function read(s) {
     draw(s); return;
   }
   if (!s.open && s.rows.length) { s.open = s.rows[0].id; return read(s); }
-  if (one && one.ok && one.note && one.note.id === s.open) { s.note = one.note; s.shots = (one.screen && one.screen.frames) || []; s.rec = one.recording || null; s.place = one.place || null; }
+  if (one && one.ok && one.note && one.note.id === s.open) { s.note = one.note; s.shots = (one.screen && one.screen.frames) || []; s.aside = (one.screen && one.screen.aside) || 0; s.rec = one.recording || null; s.place = one.place || null; }
   draw(s);
 }
 
@@ -124,7 +124,7 @@ async function loadBoards(s) {
 
 function choose(s, id, phase) {
   if (s.open === id && !s.ser) return;
-  s.open = id; s.note = null; s.phase = phase || null; s.shots = []; s.rec = null; s.place = null; s.ser = null; s.thread = null;
+  s.open = id; s.note = null; s.phase = phase || null; s.shots = []; s.aside = 0; s.rec = null; s.place = null; s.ser = null; s.thread = null;
   draw(s); read(s);
 }
 /* open a meeting series on the right (the series page) */
@@ -376,6 +376,13 @@ function replayOf(s, n) {
   s.audio = { key, el: a };
   return a;
 }
+/* "Replay": the full-screen replay of the meeting (c3-replay.js): the topics, key points, shots and conversation along the audio */
+function openReplayBtn(s, n) {
+  return btn('chip2 lk', { 'data-cal3-notes': 'open-replay', title: 'Open the meeting replay: the topics, the key points, the screen and the conversation along the audio' }, [c3ic('play', 'sm'), 'Replay'], () => {
+    if (s.audio && s.audio.el) { try { s.audio.el.pause(); } catch { /* none */ } }
+    import('./c3-replay.js').then((m) => m.openReplay({ note: n.id })).catch(() => toast('The replay could not load.'));
+  });
+}
 function seek(s, ms) {
   const a = s.audio && s.audio.el;
   if (!a) return;
@@ -464,7 +471,7 @@ function after(s, n, mode) {
   const kids = [
     el('div', { class: 'c3cv-head' }, el('h3', null, c3ic('notes'), 'Notes'), recordButton(s, n, mode)),
     el('div', { class: 'chips2' }, el('b', null, n.title || 'Untitled note'), el('span', { class: 'dim mono cal3-sm' }, [dayOf(startOf(n)), mins(lenOf(n))].filter(Boolean).join(' · ')), ...names.map(avatar)),
-    ...(() => { const rp = mode ? null : replayOf(s, n); return rp ? [el('div', { class: 'cal3-replay', 'data-cal3-notes': 'replay' }, el('h4', null, 'Replay'), rp, el('p', { class: 'dim cal3-sm' }, 'Kept on this machine.'))] : []; })(),
+    ...(() => { const rp = mode ? null : replayOf(s, n); return rp ? [el('div', { class: 'cal3-replay', 'data-cal3-notes': 'replay' }, el('div', { class: 'c3cv-head' }, el('h4', null, 'Replay'), openReplayBtn(s, n)), rp, el('p', { class: 'dim cal3-sm' }, 'Kept on this machine.'))] : []; })(),
     ...cf.map((c) => el('div', { class: 'fold w', 'data-cal3-notes': 'conflict' }, c3ic('alert', 'sm'), '“' + c.text + '” differs from ', el('span', { class: 'mono' }, c.doc + (c.line ? ':' + c.line : '')))),
     p.overview || !mode ? editable(true, 'p', p.overview, 'Summary', (t) => saveFinal(s, n, 'overview', 0, t), { class: 'cal3-ov', 'data-cal3-notes': p.overview ? 'overview' : 'no-overview' }, p.from === 'final' ? null : 'Write a summary of the meeting')
       : el('p', { class: 'dim cal3-ov', 'data-cal3-notes': 'no-overview' }, 'The overview is written when you stop recording.'),
@@ -491,7 +498,8 @@ function after(s, n, mode) {
   if (!p.overview && !p.decisions.length && !p.actions.length && !p.questions.length && !hl.length && !cf.length && !(s.shots || []).length) kids.push(fold('moon', mode ? 'Decisions and next steps show here as they are caught, and in full after you stop.' : 'No decisions, next steps or questions are held for this note.', { 'data-cal3-notes': 'nothing' }));
   // the screenshots of the shared screen, after Stop, as the main app's Notes shows them (notes-screen-view.js)
   const shots = mode || n.private ? [] : s.shots || [];
-  if (shots.length) kids.push(el('div', { 'data-cal3-notes': 'screen' }, screenStrip({ id: n.id, frames: shots, seek: s.audio ? (ms) => seek(s, ms) : null, replay: s.audio ? s.audio.el : null })));
+  const asideN = mode || n.private ? 0 : s.aside || 0;   // shots set aside as another app: "N set aside" opens their review
+  if (shots.length || asideN) kids.push(el('div', { 'data-cal3-notes': 'screen' }, screenStrip({ id: n.id, frames: shots, aside: asideN, seek: s.audio ? (ms) => seek(s, ms) : null, replay: s.audio ? s.audio.el : null })));
   const tr = transcriptOf(n);
   if (!mode && tr.length) kids.push(el('details', { 'data-cal3-notes': 'transcript-fold' }, el('summary', { class: 'dim cal3-sm' }, 'Transcript · ' + tr.length + (tr.length === 1 ? ' line' : ' lines')),
     el('div', { class: 'term cal3-term' }, tr.map((x) => V.fmtTime(x.t || 0) + '  ' + x.text).join('\n'))));

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

@@ -0,0 +1,133 @@
+/* pm/c3-replay.css — the meeting replay (initiative meeting-material-replay, part 2; the approved mockup #replay). Scoped under .c3replay.
+ * It is Focus played back, so the header, the track, the stage and the conversation follow c3-focus.css. Tokens only. */
+.c3.rpl-open { container-type: normal; }
+.c3replay { position: fixed; inset: 0; z-index: 50; overflow: auto; background: var(--background); color: var(--foreground); }
+.c3replay [hidden] { display: none !important; }
+.c3replay .rpl-page { display: grid; gap: var(--sp-2); max-width: 1480px; margin: 0 auto; padding: var(--sp-3) var(--sp-4) var(--sp-6, 32px); box-sizing: border-box; min-width: 0; }
+.c3replay .rpl-page > * { min-width: 0; }
+.c3replay .rpl-grow { flex: 1 1 auto; }
+.c3replay .tag { display: inline-flex; align-items: center; gap: 4px; }
+.c3replay .tag.rpl-warn, .c3replay .rpl-warn { color: var(--warning); }
+.c3replay audio { display: none; }
+
+/* header: who and when, the clock, the play controls, then the track across the full width */
+.c3replay .rpl-top { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px var(--sp-4); align-items: center; padding: var(--sp-2) var(--sp-3); }
+.c3replay .rpl-id { display: flex; gap: var(--sp-3); align-items: flex-start; min-width: 0; }
+.c3replay .rpl-tt { min-width: 0; display: grid; gap: 4px; }
+.c3replay .rpl-tt h1 { margin: 0; font-size: var(--fs-4); font-weight: 600; line-height: 1.2; overflow-wrap: anywhere; }
+.c3replay .rpl-tt .chips2 { flex-wrap: wrap; gap: 6px; font-size: var(--fs-1); display: flex; align-items: center; }
+.c3replay .rpl-warnc { color: var(--warning); }
+.c3replay .rpl-clock > div { display: grid; justify-items: start; }
+.c3replay .rpl-clock b { font-size: var(--fs-5); font-weight: 500; line-height: 1; font-variant-numeric: tabular-nums; }
+.c3replay .rpl-clock .dim { font-size: var(--fs-1); }
+.c3replay .rpl-acts { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
+
+/* the track is the scrub bar: marks above, the stretches of talk, PMOS's notes below, the playhead across */
+.c3replay .rpl-track { grid-column: 1 / -1; position: relative; }
+.c3replay .rpl-rail { position: relative; cursor: pointer; }
+.c3replay .rpl-mks { position: relative; height: 26px; }
+.c3replay .rpl-runs { position: relative; height: 18px; border-radius: 6px; background: var(--muted); }
+.c3replay .rpl-pms { position: relative; height: 10px; }
+.c3replay .rpl-run { position: absolute; top: 0; bottom: 0; left: var(--fc-left, 0%); width: var(--fc-width, 0%); min-width: 0; min-height: 0; height: auto; padding: 0; margin: 0; box-sizing: border-box;
+  border: 0; border-right: 2px solid var(--card); border-radius: 6px; cursor: pointer; display: flex; align-items: center; justify-content: center; overflow: hidden;
+  background: color-mix(in oklab, var(--acc) 26%, var(--muted)); color: var(--foreground); font: 500 var(--fs-1) var(--mono); }
+@media (hover: hover) { .c3replay .rpl-run:hover { background: color-mix(in oklab, var(--acc) 40%, var(--muted)); } }
+.c3replay .rpl-run.c { background: var(--acc); color: var(--background); }
+.c3replay .rpl-mkdot { position: absolute; top: 2px; left: var(--fc-left, 0%); transform: translateX(-50%); display: inline-grid; place-items: center; width: 20px; height: 20px; min-width: 0; min-height: 0; padding: 0; margin: 0;
+  border-radius: 50%; border: 1px solid var(--border); background: var(--card); color: var(--foreground); cursor: pointer; z-index: 1; }
+.c3replay .rpl-mkdot .ic { width: 12px; height: 12px; }
+.c3replay .rpl-mkdot.k-decision { border-color: var(--acc); color: var(--acc); }
+.c3replay .rpl-mkdot.warn { border-color: var(--warning); color: var(--warning); }
+.c3replay .rpl-mkdot.pm { top: 0; width: 8px; height: 8px; border: 0; background: color-mix(in oklab, var(--acc) 55%, transparent); }
+.c3replay .rpl-now { position: absolute; top: 22px; bottom: 6px; width: 2px; margin-left: -1px; left: var(--fc-left, 0%); background: var(--foreground); pointer-events: none; transition: left .5s linear; }
+.c3replay .rpl-ticks { position: relative; height: 14px; margin-top: 2px; font-size: var(--fs-1); }
+.c3replay .rpl-tick { position: absolute; left: var(--fc-left, 0%); }
+.c3replay .rpl-ticks .end { position: absolute; right: 0; }
+.c3replay .rpl-legend { grid-column: 1 / -1; display: flex; gap: 14px; flex-wrap: wrap; font-size: var(--fs-1); }
+.c3replay .rpl-lg { display: inline-flex; align-items: center; gap: 4px; }
+.c3replay .rpl-lg.k-decision { color: var(--acc); }
+.c3replay .rpl-lgdot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
+.c3replay .rpl-lg.pm .rpl-lgdot { background: color-mix(in oklab, var(--acc) 55%, transparent); }
+.c3replay .rpl-lg.warn .rpl-lgdot { border: 1px solid var(--warning); }
+.c3replay .rpl-run:focus-visible, .c3replay .rpl-mkdot:focus-visible, .c3replay .rpl-lb:focus-visible, .c3replay .rpl-shotb:focus-visible { outline: 2px solid color-mix(in oklab, var(--ring) 50%, var(--foreground)); outline-offset: 2px; }
+
+/* the now line */
+.c3replay .rpl-nowl { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; padding: 0 var(--sp-1); min-height: 28px; }
+.c3replay .rpl-nowt { display: inline-flex; align-items: center; gap: 8px; min-width: 0; font-size: var(--fs-3); flex-wrap: wrap; }
+.c3replay .rpl-nowt .ki { width: 22px; height: 22px; }
+.c3replay .rpl-nowt .mono { font-size: var(--fs-2); font-variant-numeric: tabular-nums; }
+
+/* stage, key points, topics */
+.c3replay .rpl-main { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: var(--sp-3); align-items: start; }
+.c3replay .rpl-s { display: grid; gap: var(--sp-3); min-width: 0; }
+.c3replay .rpl-stagewrap, .c3replay .rpl-keywrap, .c3replay .rpl-topwrap { min-width: 0; }
+.c3replay .rpl-stagewrap:empty, .c3replay .rpl-keywrap:empty, .c3replay .rpl-topwrap:empty { display: none; }
+.c3replay .rpl-stage .sh2 h2 { text-transform: none; letter-spacing: 0; font-size: var(--fs-3); font-weight: 600; color: var(--foreground); }
+.c3replay .rpl-screen { display: grid; margin-top: var(--sp-2); }
+.c3replay .rpl-shotb { display: block; width: 100%; height: auto; min-height: 0; padding: 0; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: var(--muted); cursor: pointer; }
+.c3replay .rpl-shot { display: block; width: 100%; height: auto; max-height: 56vh; object-fit: contain; background: var(--muted); }
+.c3replay .rpl-strip { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: var(--sp-2) 0 0; }
+.c3replay .rpl-strip .chip2.on { background: var(--background); color: var(--foreground); box-shadow: 0 0 0 1px var(--acc); }
+.c3replay .rpl-cap { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); }
+.c3replay .rpl-col { min-width: 0; }
+.c3replay .rpl-lbl { display: flex; align-items: center; gap: 6px; font-size: var(--fs-1); padding: var(--sp-2) 0 4px; }
+.c3replay .rpl-none { font-size: var(--fs-2); padding: 4px 0; }
+.c3replay .rpl-src { margin: var(--sp-2) 0 0; font-size: var(--fs-1); line-height: 1.5; }
+.c3replay .rpl-key.cur, .c3replay .rpl-topic.cur { background: color-mix(in oklab, var(--acc) 8%, transparent); border-radius: 8px; }
+.c3replay .rpl-key .chips, .c3replay .rpl-topic .chips { flex-wrap: wrap; }
+.c3 .c3replay .nrow .nb > .chips > :nth-child(n+3) { display: inline-flex !important; }   /* c3-quiet.css shows two chips a row; a key point and a topic show all */
+
+/* the conversation: transcript lines and PMOS's notes in time order, the current line marked and followed */
+.c3replay .rpl-w { position: sticky; top: var(--sp-3); min-width: 0; }
+.c3replay .rpl-cv { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; max-height: min(760px, calc(100vh - 140px)); min-height: 280px; border: 1px solid var(--border); border-radius: 8px; background: var(--card); overflow: hidden; }
+.c3replay .rpl-cvh { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--border); font-size: var(--fs-2); flex-wrap: wrap; }
+.c3replay .rpl-cvh .seg button { font-size: var(--fs-1); }
+.c3replay .rpl-cvs { list-style: none; margin: 0; padding: 8px; display: grid; gap: 2px; overflow: auto; align-content: start; min-height: 0; position: relative; }
+.c3replay .rpl-lb { display: grid; gap: 2px; width: 100%; height: auto; min-height: 0; padding: 6px 8px; border: 0; border-radius: 6px; background: none; color: inherit; text-align: left; font: inherit; white-space: normal; cursor: pointer; justify-content: stretch; }
+.c3replay .rpl-lb > .rpl-lt, .c3replay .rpl-lb > .rpl-pb { display: block; overflow: visible; }
+.c3replay .rpl-lb > .rpl-lh, .c3replay .rpl-lb > .rpl-cvwho { display: flex; overflow: visible; }
+@media (hover: hover) { .c3replay .rpl-lb:hover { background: var(--muted); } }
+.c3replay .rpl-l.on .rpl-lb { background: color-mix(in oklab, var(--acc) 10%, transparent); box-shadow: inset 2px 0 0 var(--acc); }
+.c3replay .rpl-l.fut, .c3replay .rpl-pm.fut { opacity: .55; }
+.c3replay .rpl-lh { display: flex; gap: 6px; align-items: center; font-size: var(--fs-1); }
+.c3replay .rpl-lh .tag { margin-left: auto; }
+.c3replay .rpl-lt { font-size: var(--fs-3); line-height: 1.45; }
+.c3replay .rpl-kt.k-decision { color: var(--acc); }
+.c3replay .rpl-pm .rpl-lb { background: color-mix(in oklab, var(--acc) 6%, transparent); }
+.c3replay .rpl-cvwho { display: flex; align-items: center; gap: 6px; font-size: var(--fs-1); color: var(--muted-foreground); }
+.c3replay .rpl-cvwho b { color: var(--acc); font-weight: 600; }
+.c3replay .rpl-cvwho .rpl-time { margin-left: auto; }
+.c3replay .fc-avdot { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: color-mix(in oklab, var(--acc) 14%, transparent); color: var(--acc); flex: 0 0 auto; }
+.c3replay .fc-avdot .ic { width: 10px; height: 10px; }
+.c3replay .rpl-cat::before { content: "· "; }
+.c3replay .rpl-pb { font-size: var(--fs-2); color: var(--muted-foreground); line-height: 1.45; }
+.c3replay .rpl-cvin { display: flex; gap: 6px; align-items: center; padding: 8px 10px; border-top: 1px solid var(--border); }
+.c3replay .rpl-cvin input { flex: 1; min-width: 0; height: 32px; padding: 0 12px; border: 1px solid var(--border); border-radius: 6px; background: var(--background); color: var(--foreground); font: inherit; font-size: var(--fs-2); }
+.c3replay .rpl-cvin input:focus-visible { outline: 2px solid color-mix(in oklab, var(--ring) 50%, var(--foreground)); outline-offset: 1px; }
+
+@media (max-width: 1100px) { .c3replay .rpl-main { grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); } }
+@media (max-width: 900px) {
+  .c3replay .rpl-page { padding: var(--sp-2) 16px var(--sp-5, 24px); }
+  .c3replay .rpl-main { grid-template-columns: minmax(0, 1fr); }
+  .c3replay .rpl-w { position: static; }
+  .c3replay .rpl-cv { max-height: 520px; }
+  .c3replay .rpl-cap { grid-template-columns: minmax(0, 1fr); }
+}
+@media (max-width: 760px) {
+  .c3replay .rpl-top { grid-template-columns: minmax(0, 1fr); }
+  .c3replay .rpl-id { flex-direction: column; gap: var(--sp-2); }
+  .c3replay .rpl-acts { justify-content: flex-start; }
+  .c3replay .rpl-ticks .rpl-tick:not(:first-child) { display: none; }
+}
+@media (pointer: coarse) {
+  .c3replay .rpl-mkdot { width: 28px; height: 28px; top: 0; }
+  .c3replay .rpl-mkdot.pm { width: 12px; height: 12px; }
+  .c3replay .rpl-lb { min-height: 44px; }
+}
+@media (prefers-reduced-motion: reduce) { .c3replay .rpl-now { transition: none; } }
+
+/* meeting-material-replay-gaps: where a recording was off between two starts */
+.c3replay .rpl-gap { position: absolute; top: 0; bottom: 0; left: var(--fc-left, 0%); width: var(--fc-width, 0%); min-width: 0; min-height: 0; height: auto; padding: 0; margin: 0; box-sizing: border-box; border: 0; border-left: 1px dashed var(--muted-foreground); border-right: 1px dashed var(--muted-foreground); background: repeating-linear-gradient(135deg, transparent 0 4px, var(--border) 4px 6px); cursor: pointer; }
+.c3replay .rpl-gap:focus-visible { outline: 2px solid color-mix(in oklab, var(--ring) 50%, var(--foreground)); outline-offset: 2px; }
+.c3replay .rpl-gapnote { display: flex; gap: 8px; align-items: center; font-size: var(--fs-2); }
+.c3replay .rpl-gapkey { display: inline-block; width: 22px; height: 10px; flex: none; border: 1px dashed var(--muted-foreground); background: repeating-linear-gradient(135deg, transparent 0 3px, var(--border) 3px 5px); }

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

@@ -0,0 +1,429 @@
+/* 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');
+const NO_NOTE = 'That replay link does not match a note on this computer. It may be from another computer, or the note was deleted. Open it from Calendar, Notes.';
+/** A note id, as lib/notes-audio.js names it. The ?replay= link is checked against this before any request is made. Pure. */
+export const NOTE_ID_RE = /^n-[0-9a-z]{4,16}-[0-9a-f]{4}$/;
+/** The gap that holds time t (the recording was off), or null. Pure. */
+export const gapAt = (gaps, t) => (gaps || []).find((g) => t >= g.from_ms && t < g.to_ms) || null;
+
+/** 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) {
+  if (!s.note && !s.event) { fail(s, NO_NOTE); return; }   // a ?replay= link that is not a note id: no request is made
+  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 === 'no such note' ? NO_NOTE : (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
+    const gp = gapAt(s.data.gaps, s.t);
+    if (gp && s.t < len) { s.t = gp.to_ms; if (s.audio && !s.soundOff) { try { s.audio.currentTime = s.t / 1000; } catch { /* not ready */ } } }   // the recording was off: play on from where it began again
+    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.recordings || 1) > 1 ? el('span', { class: 'tag warn', 'data-rpl': 'recordings', title: 'The recording was stopped and started again. The gap is marked on the track.' }, icon('alert', 'sm'), d.recordings + ' recordings') : null,
+    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);
+}
+
+/** '7 min', or '40 s' under a minute. Pure. */
+export const gapText = (ms) => (ms < 60000 ? Math.max(1, Math.round(ms / 1000)) + ' s' : Math.round(ms / 60000) + ' min');
+
+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 gaps = (d.gaps || []).map((g, i) => geo(btn({ class: 'rpl-gap', 'data-rpl-seek': String(g.to_ms), 'data-rpl-gap': String(i), title: 'Not recorded ' + wall(s, g.from_ms) + ' to ' + wall(s, g.to_ms) + ' (' + gapText(g.to_ms - g.from_ms) + '). A press plays from where the recording began again.', 'aria-label': 'Not recorded ' + wall(s, g.from_ms) + ' to ' + wall(s, g.to_ms) }),
+    { '--fc-left': pct(s, g.from_ms) + '%', '--fc-width': Math.max(0.6, (g.to_ms - g.from_ms) / lenOf(s) * 100) + '%' }));
+  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, ...gaps), 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,
+    (d.gaps || []).length ? el('div', { class: 'rpl-gapnote dim', 'data-rpl': 'gapnote' }, el('i', { class: 'rpl-gapkey', 'aria-hidden': 'true' }),
+      d.gaps.map((g) => 'Not recorded ' + wall(s, g.from_ms) + ' to ' + wall(s, g.to_ms) + ' (' + gapText(g.to_ms - g.from_ms) + ').').join(' ') + ' You stopped the recording and started it again. Playing across a gap skips it.') : null);
+  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 }) };
+}