create-pmos 0.502.0 → 0.504.0

package/workspace/public/pm/premium-mtg-replay.js

@@ -1,20 +1,24 @@
-/* pm/premium-mtg-replay.js — the Replay tab of a meeting in the Viewer (initiative premium-uncovered-features, area meetings; MtReplay.dc.html,
- * and the phone's Replay in MtPhone.dc.html). Pure: the page half is in premium-vw-mtg.js.
+/* pm/premium-mtg-replay.js — a recorded meeting in the Viewer (batch 25 item 11, "Meeting recording view C": MvC, MvF, MvN on the main
+ * canvas; was MtReplay and XvAReplay). Pure: the page half is in premium-vw-mtg.js.
  *
- *   THE PLAYER   the screen capture at the playhead (whose screen, the time, open it large), Play, the time "of" the length, the speed,
- *                "Screen captures · N" (one press jumps there), the strip of topics with the playhead and a dot per key point, and each
- *                topic's name and minutes under it (the one playing in bold).
- *   KEY POINTS   ONE list. It keeps what was agreed (Decided), owned (To do: a next step with a name) or left open (Open: a question with no
- *                answer). Each row: a box to tick, its kind, the point, the quote it was caught from (who said what), and its time.
- *                All | Decided | To do | Open filter the list; "Kept N of M raised: agreed, owned, or still open" says how much was left out.
- *                Ticking shows the bulk bar: Make tasks, Confirm, Not right. A point marked Not right leaves the list for Left out.
- *   LEFT OUT     a fold: "Left out · N remarks", e.g. one remark and why it was left out (nobody took it on, answered, marked not right).
- * Phone: no capture pane and no ticking. The points are grouped by kind with Make task on each To do and Confirm all.
+ *   LEFT        the summary first (premium-vw-mtg.js draws it), then the kept points: one lean row each. The kind is an icon; the header
+ *               counts each kind and holds Confirm N. A decision and the To do that follows it (said within 2 min, in the same topic)
+ *               are one row, the To do under it with Make task. One ✓ per row confirms it. No checkbox, no filter, no bulk bar.
+ *               Under the points, ONE strip: Left out, Next steps, Since the last one, Facts, Names and terms, Prep and material,
+ *               Transcript (premium-vw-mtg.js fills the ones it owns). One opens at a time.
+ *   RIGHT       the evidence of the selected point: the screen at that moment, Play from its time, Fix (the edit card), Not right,
+ *               the quote, and a filmstrip of the screen captures near it (+N shows all). Jev for Images is not in PMOS yet, so the
+ *               filmstrip shows every kept capture, not only the shared-screen frames.
+ *   DOCK        the timeline at the bottom: Play, the time of the length, the full chapter names over the strip, a dot per kept point.
+ *   WORD FIX    (MvF) a word heard wrong is fixed in place: the PM selects it (or presses an underlined one), types the fix, ✓ or Enter.
+ *               It shows fixed in every place this note shows it, and other notes underline the heard words with the fix as the guess.
+ *               Undo forgets it. lib/meeting-learn.js term keeps it; the note's own files are not rewritten.
+ * Phone: the phone's Replay (phoneHtml), unchanged.
  *
  * DATA (nothing is invented): rep = premium-meeting.js replayModel(GET /api/meeting-replay) with rep.raw = the answer's keys (for the owner,
- * due and state); n = the note (GET /api/notes/one) for the remarks of the live transcript; points = GET /api/meeting-points.
- *   replayView(rep, { n, points, now }) → the view model
- *   replayHtml(V, ui) → the tab's body. ui = { pos, playing, speed, filter, sel: Set of point ids, leftOpen } */
+ * due and state); n = the note (GET /api/notes/one) for the remarks of the live transcript; points, edits, lessons, terms = GET /api/meeting-points.
+ *   replayView(rep, { n, points, edits, lessons, terms, now }) → the view model
+ *   replayHtml(V, ui) → the desk and the phone. ui = { pos, playing, speed, pt (the selected point), strip, allShots, leftOpen, edit, draft } */
 
 const esc = (s) => String(s == null ? '' : s).replace(/[&<>"]/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' }[c]));
 const clip = (s, n) => { const t = String(s == null ? '' : s).replace(/\s+/g, ' ').trim(); return t.length > n ? t.slice(0, n - 1) + '…' : t; };
@@ -25,6 +29,7 @@ const NEAR = 3000;   // a key point belongs to the line this close to its time (
 export const KIND = { decision: { label: 'Decided', pill: 'ok', many: 'Decided' }, action: { label: 'To do', pill: 'y', many: 'To do' }, question: { label: 'Open', pill: 'w', many: 'Open questions' } };
 export const KEPT_WHY = 'agreed, owned, or still open';
 export const SHOTS_HINT = 'A capture is taken each time the shared screen changes. Press one to jump there.';
+export const FOLLOW_MS = 120000;   // a To do said this soon after a decision, in the same topic, is its follow-up (one row)
 export const SPEEDS = [1, 1.5, 2];
 /** "Fri" for a date this week or next, else "24 Oct". */
 export function dueText(due, now = Date.now()) {
@@ -58,7 +63,7 @@ export const mentions = (text, phrase) => !!phrase && (' ' + words(text).join('
 export const KIND_OF = { decision: 'Decision', question: 'Question', action: 'Action' };
 
 /** The view model of the Replay tab. edits: the PM's corrections ({ [pointId]: { kind, text, orig } }); lessons: what PMOS learned. */
-export function replayView(rep, { n = null, points = {}, edits = {}, lessons = [], now = Date.now() } = {}) {
+export function replayView(rep, { n = null, points = {}, edits = {}, lessons = [], terms = [], now = Date.now() } = {}) {
   if (!rep) return null;
   const raw = Array.isArray(rep.raw) ? rep.raw : [];
   const rawOf = (k) => raw.find((x) => x && (x.id === k.id || (x.k === k.k && x.text === k.text))) || k;
@@ -97,8 +102,20 @@ export function replayView(rep, { n = null, points = {}, edits = {}, lessons = [
   const strip = rep.stretches.map((x, i) => ({ from: x.from, to: x.to, w: Math.max(1, x.to - x.from) / tot, c: i % 2, text: clip(x.text || 'Topic ' + (i + 1), 40), min: Math.max(1, Math.round((x.to - x.from) / 60000)) }));
   const whoAt = (t) => { let w = ''; for (const l of rep.lines) { if (l.t <= t + NEAR) w = l.who; else break; } return w; };
   const shots = rep.shots.map((s, i) => ({ i, t: s.t, time: mmss(s.t), why: clip(s.why, 80), who: whoAt(s.t) }));
+  /* a decision and the To do that follows it are one row: the To do said within FOLLOW_MS after it, in the same topic */
+  const topOf = (t) => strip.find((x) => t >= x.from && t < x.to) || null;
+  const rows = [], under = new Map();
+  for (const p of kept) {
+    if (p.kind === 'action' && p.t != null) {
+      const d = [...rows].reverse().find((r) => r.kind === 'decision' && r.t != null && !under.has(r.id) && p.t >= r.t && p.t - r.t <= FOLLOW_MS && topOf(p.t) === topOf(r.t));
+      if (d) { under.set(d.id, p); continue; }
+    }
+    rows.push(p);
+  }
+  const noteId = rep.noteId || (n && n.id) || '';
   return {
-    len: rep.len, lenText: mmss(rep.len), noteId: rep.noteId || (n && n.id) || '', audio: rep.audio, strip, shots,
+    rows: rows.map((r) => ({ ...r, follow: under.get(r.id) || null })), W: wordsOf(terms, noteId),
+    len: rep.len, lenText: mmss(rep.len), noteId, audio: rep.audio, strip, shots,
     points: kept, left, raised, toConfirm: kept.filter((x) => !x.verdict).length,
     seg: [['all', 'All', kept.length], ['decision', 'Decided', count('decision')], ['action', 'To do', count('action')], ['question', 'Open', count('question')]],
     keptLine: raised > kept.length ? 'Kept ' + kept.length + ' of ' + raised + ' raised: ' + KEPT_WHY : kept.length ? 'Kept ' + kept.length + ': ' + KEPT_WHY : 'Nothing was agreed, owned or left open',
@@ -109,39 +126,134 @@ export function replayView(rep, { n = null, points = {}, edits = {}, lessons = [
   };
 }
 
+/* ── words fixed in place (MvF) ── */
+/** The word fixes for this note (shown fixed) and from other notes (heard words underlined, the fix as the guess). Pure. */
+export function wordsOf(terms, noteId) {
+  const all = (Array.isArray(terms) ? terms : []).filter((x) => x && x.heard && x.means);
+  const fix = all.filter((x) => x.note === noteId), seen = new Set(fix.map((x) => x.heard.toLowerCase()));
+  const guess = [];
+  for (const x of [...all].reverse()) { const k = x.heard.toLowerCase(); if (x.note === noteId || seen.has(k)) continue; seen.add(k); guess.push(x); }
+  return { fix, guess };
+}
+const reEsc = (s) => s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+const wordRe = (heards) => new RegExp('(^|[^\\p{L}\\p{N}])(' + heards.map(reEsc).join('|') + ')(?=$|[^\\p{L}\\p{N}])', 'giu');
+/** The text as HTML with the word fixes in it: a fixed word shows its fix (green), a word fixed in another note is underlined and is a
+ * press that offers its fix (data-a="wfix"). Text with no fix is only escaped. */
+export function wx(W, text) {
+  const t = String(text == null ? '' : text);
+  const all = W ? [...W.fix.map((x) => ({ ...x, k: 'fix' })), ...W.guess.map((x) => ({ ...x, k: 'guess' }))].sort((a, b) => b.heard.length - a.heard.length) : [];
+  if (!all.length || !t) return esc(t);
+  let out = '', last = 0;
+  t.replace(wordRe(all.map((x) => x.heard)), (m, pre, word, off) => {
+    const at = off + pre.length, x = all.find((y) => y.heard.toLowerCase() === word.toLowerCase());
+    out += esc(t.slice(last, at));
+    out += x.k === 'fix' ? `<span class="vzr-fx" title="${esc('Heard as “' + word + '”')}">${esc(x.means)}</span>`
+      : `<button type="button" class="vzr-fl" data-a="wfix" data-w="${esc(word)}" data-g="${esc(x.means)}" title="${esc('Heard as “' + word + '”. Likely ' + x.means + ', a word you fixed before.')}">${esc(word)}</button>`;
+    last = at + word.length;
+    return m;
+  });
+  return out + esc(t.slice(last));
+}
+/** How many times the words occur in these texts (the places a fix changes). Pure. */
+export function placesOf(texts, heard) {
+  const h = String(heard || '').trim(); if (!h) return 0;
+  return (texts || []).reduce((n, t) => n + (String(t == null ? '' : t).match(wordRe([h])) || []).length, 0);
+}
+/** The texts of the view that a word fix reaches: the points, their follow-ups and quotes, the chapter names, Left out. */
+export const viewTexts = (V) => V ? [].concat(V.points.map((p) => p.text), V.points.map((p) => p.quote), V.strip.map((s) => s.text), V.left.map((x) => x.text)) : [];
+/** The inline field of a word fix: the best guess, ✓ (Enter) fixes it in every place, Escape leaves it. */
+export const wordFieldHtml = (heard, guess, places) => `<span class="vzr-fe" data-w="${esc(heard)}"><input data-a="wfin" aria-label="${esc('Fix “' + heard + '”')}" value="${esc(guess || heard)}" maxlength="60" spellcheck="false"><button type="button" class="vzr-ok" data-a="wfok" aria-label="${esc(places > 1 ? 'Fix it in ' + places + ' places' : 'Fix it')}" title="${esc(places > 1 ? 'Fix it in ' + places + ' places' : 'Fix it')}">${ic('chk', 14)}</button></span>`;
+
 /* ── html (pure) ── */
-const P = { play: 'M8 5v14l11-7z', pause: 'M8 5h3v14H8zM13 5h3v14h-3z', big: 'M14 4h6v6M10 20H4v-6M20 4l-7 7M4 20l7-7', chev: 'M10 7l5 5-5 5', chk: 'M5 12l5 5 9-10', task: 'M5 12l4 4L19 6', x: 'M6 6l12 12M18 6L6 18', bin: 'M5 7h14M10 7V4h4v3M7 7l1 13h8l1-13' };
+const P = { play: 'M8 5v14l11-7z', pause: 'M8 5h3v14H8zM13 5h3v14h-3z', big: 'M14 4h6v6M10 20H4v-6M20 4l-7 7M4 20l7-7', chev: 'M10 7l5 5-5 5', chk: 'M5 12l5 5 9-10', task: 'M5 12l4 4L19 6', x: 'M6 6l12 12M18 6L6 18', bin: 'M5 7h14M10 7V4h4v3M7 7l1 13h8l1-13',
+  box: 'M5 5h14v14H5z', ask: 'M9.2 9.2a2.8 2.8 0 1 1 3.9 2.6c-.7.3-1.1 1-1.1 1.7v.5M12 17.2v.01', pen: 'M4 20h4L19 9l-4-4L4 16zM13.5 6.5l4 4', no: 'M12 3a9 9 0 1 0 0 18 9 9 0 0 0 0-18zM5.6 5.6l12.8 12.8', more: 'M5 12h.01M12 12h.01M19 12h.01' };
 const ic = (k, w = 16, cls = '') => `<svg aria-hidden="true" width="${w}" height="${w}" viewBox="0 0 24 24"${cls ? ` class="${cls}"` : ''}><path d="${P[k]}"/></svg>`;
 const pct = (x) => Math.min(100, Math.max(0, x)).toFixed(2);
+const img = (V, t) => (V.noteId ? `<img src="/api/notes/screen?id=${encodeURIComponent(V.noteId)}&amp;t=${t}" alt="" loading="lazy">` : '');
+const KIND_IC = { decision: '', action: 'box', question: 'ask' };
+const kindIcon = (k) => `<span class="vzr-k" data-k="${k}" role="img" aria-label="${KIND[k].label}">${KIND_IC[k] ? ic(KIND_IC[k], 16) : ''}</span>`;
+/** The selected point: the one the PM pressed, else the first row. */
+export const selOf = (V, ui = {}) => (V && (V.points.find((p) => p.id === ui.pt) || V.rows[0])) || null;
 
-/** The player: capture, controls, captures, strip. Times on the strip are SVG attributes, so the markup carries no inline style. */
-export function playerHtml(V, ui = {}) {
-  const pos = ui.pos || 0, st = V.stretchAt(pos), si = V.shotAt(pos), shot = si >= 0 ? V.shots[si] : null;
-  const img = (t) => (V.noteId ? `<img src="/api/notes/screen?id=${encodeURIComponent(V.noteId)}&amp;t=${t}" alt="" loading="lazy">` : '');
-  const cap = shot ? `<div class="vzp-shot"><span class="vzp-img">${img(shot.t)}</span><span class="vzp-who">${esc((shot.who ? shot.who + '’s screen' : 'Shared screen') + ' · ' + shot.time)}</span><button type="button" class="vzp-ib vzp-big" data-a="shotbig" data-t="${shot.t}" aria-label="Open the screen capture large">${ic('big', 14)}</button></div>` : '';
-  const speed = ui.speed || 1;
-  const ctl = `<div class="vzp-ctl"><button type="button" class="vzp-ib vzp-solid" data-a="play" aria-label="${ui.playing ? 'Pause the recording' : 'Play from ' + mmss(pos)}">${ic(ui.playing ? 'pause' : 'play', 16, 'vzp-fill')}</button><b data-clk="pos">${mmss(pos)}</b><span class="vzp-mut">of ${V.lenText}</span><button type="button" class="vzp-speed" data-a="speed" aria-label="Playback speed ${speed} times. Change">${speed}×</button></div>`;
-  const thumbs = V.shots.length ? `<p class="vzp-lbl">Screen captures · ${V.shots.length}</p><div class="vzp-ths">${V.shots.map((s, i) => `<button type="button" class="vzp-th${i === si ? ' on' : ''}" data-a="seekto" data-t="${s.t}" aria-label="${esc('Screen at ' + s.time + (s.why ? ': ' + s.why : ''))}" aria-pressed="${i === si}">${img(s.t)}</button>`).join('')}</div><p class="vzp-mut vzp-sm">${esc(SHOTS_HINT)}</p>` : '<p class="vzp-mut vzp-sm">No screen was shared, so there are no captures.</p>';
+/** One kept point as a lean row (MvC): its kind as an icon, its words, its time, ✓; a decision's follow-up To do under it. */
+function rowHtml(V, p, ui, sel) {
+  const W = V.W, f = p.follow, on = p.verdict === 'confirmed' && (!f || f.verdict === 'confirmed');
+  const sub = p.kind === 'question' ? [p.by, p.open ? 'no answer at the end' : ''].filter(Boolean).join(' · ') : p.kind === 'action' ? [p.owner, p.due ? dueText(p.due) : ''].filter(Boolean).join(' · ') : '';
+  const fu = f ? `<div class="vzr-fu">${ic('box', 15, 'vzr-bx')}<span class="vzr-grow">${wx(W, f.text)}${f.owner ? ` <span class="vzr-who">· ${esc(f.owner)}${f.due ? ', ' + esc(dueText(f.due)) : ''}</span>` : ''}</span>`
+    + (ui.pmade && ui.pmade[f.id] ? '<span class="vzr-tk">Task</span>' : `<button type="button" class="vzp-ib vzr-ghost" data-a="ptask" data-id="${esc(f.id)}" aria-label="${esc('Make a task: ' + f.text)}" title="Make a task">${ic('task', 15)}</button>`) + '</div>'
+    : sub ? `<div class="vzr-fu vzr-sub"><span class="vzr-who">${esc(sub)}</span></div>` : '';
+  const chk = p.check ? `<p class="vzr-chk">Check: you said “${esc(p.check.phrase)}” means ${esc(p.check.meaning)}</p>` : '';
+  const ids = [p.id].concat(f ? [f.id] : []).join(',');
+  return `<div class="vzp-kr vzr-row${sel ? ' sel' : ''}" data-id="${esc(p.id)}">${kindIcon(p.kind)}`
+    + `<button type="button" class="vzp-kt" data-a="psel" data-id="${esc(p.id)}" aria-pressed="${sel}"><b>${wx(W, p.text)}</b></button>`
+    + (p.time ? `<button type="button" class="vzp-tm${p.open ? ' risk' : ''}" data-a="seekto" data-t="${p.t}" aria-label="Play from ${p.time}">${p.time}</button>` : '<span></span>')
+    + `<button type="button" class="vzr-cf${on ? ' on' : ''}" data-a="pconf" data-ids="${esc(ids)}" aria-pressed="${on}" aria-label="${on ? (p.edited ? 'Fixed and confirmed. Press to undo' : 'Confirmed. Press to undo') : 'Confirm this point'}" title="${on ? 'Confirmed' : 'Confirm'}">${ic('chk', 15)}</button>`
+    + fu + chk + '</div>';
+}
+/** The kept points (MvC): "N kept", a count per kind, Confirm N in the header; the rows. */
+export function pointsCardHtml(V, ui = {}) {
+  const sel = selOf(V, ui), cnt = ['decision', 'action', 'question'].map((k) => { const c = V.points.filter((p) => p.kind === k).length; return c ? `<span class="vzr-cnt">${kindIcon(k)}${c}</span>` : ''; }).join('');
+  const head = `<div class="vzr-ph"><h3>${V.points.length} kept</h3>${cnt}<span class="vzp-sp"></span>${V.toConfirm ? `<button type="button" class="vzp-dark vzr-cfall" data-a="confirmall">${ic('chk', 14)}Confirm ${V.toConfirm}</button>` : ''}</div>`;
+  const rows = V.rows.length ? V.rows.map((p) => rowHtml(V, p, ui, !!sel && sel.id === p.id)).join('') : `<p class="vzp-empty vzr-pad">Nothing was agreed, owned or left open in this meeting.</p>`;
+  return `<section class="vzr-pts" aria-label="Kept points">${head}<div class="vzp-kl">${rows}</div></section>`;
+}
+/** Left out (a panel of the strip): each remark and why it was left out; a point marked not right can be put back. */
+export function leftHtml(V) {
+  if (!V.left.length) return '';
+  return `<p class="vzp-mut vzp-sm">${esc(V.keptLine)}</p><div class="vzp-ll">${V.left.map((x) => `<div class="vzp-lr"><span>${wx(V.W, x.text)}</span><small>${esc(x.why)}</small>${x.verdict === 'wrong' ? `<button type="button" class="vzp-link" data-a="unwrong" data-id="${esc(x.id)}">Put it back</button>` : x.time ? `<button type="button" class="vzp-tm" data-a="seekto" data-t="${x.t}" aria-label="Play from ${x.time}">${x.time}</button>` : ''}</div>`).join('')}</div>`;
+}
+/** The one strip under the points: a chip per part (zero is silence), the open one's body below it. items = [{ k, title, n, html }] */
+export function stripHtml(items, ui = {}) {
+  const list = (items || []).filter((x) => x && x.html);
+  if (!list.length) return '';
+  const open = list.find((x) => x.k === ui.strip);
+  return `<div class="vzr-fold" role="group" aria-label="More from this meeting">${list.map((x) => `<button type="button" class="vzr-ch" data-a="strip" data-k="${esc(x.k)}" aria-expanded="${!!open && open.k === x.k}"><b>${esc(x.title)}</b>${x.n ? `<span>${esc(x.n)}</span>` : ''}</button>`).join('')}</div>`
+    + (open ? `<div class="vzr-panel" data-k="${esc(open.k)}">${open.html}</div>` : '');
+}
+/** The evidence of the selected point (MvC right): the screen at the replay's place, Play from the point, Fix, Not right, the quote
+ * (or the edit card), and the filmstrip of the captures near it. */
+export function evidenceHtml(V, ui = {}) {
+  const p = selOf(V, ui);
+  const pos = ui.pos != null ? ui.pos : p && p.t != null ? p.t : 0, si = V.shotAt(pos), shot = si >= 0 ? V.shots[si] : null;
+  const big = shot ? `<div class="vzp-shot vzr-shot"><span class="vzp-img">${img(V, shot.t)}</span><span class="vzp-who">${esc((shot.who ? shot.who + '’s screen' : 'Shared screen') + ' · ' + shot.time)}</span><button type="button" class="vzp-ib vzp-big" data-a="shotbig" data-t="${shot.t}" aria-label="Open the screen capture large">${ic('big', 14)}</button></div>`
+    : '<div class="vzr-noshot"><p class="vzp-mut vzp-sm">No screen was shared, so there are no captures.</p></div>';
+  const acts = p ? `<div class="vzr-acts">${p.time ? `<button type="button" class="vzp-ib vzr-pri" data-a="pplay" data-t="${p.t}" aria-label="Play from ${p.time}">${ic('play', 16, 'vzp-fill')}</button><b class="vzr-at">${p.time}</b>` : ''}<span class="vzp-sp"></span>`
+    + `<button type="button" class="vzp-ib vzr-ghost" data-a="pedit" data-id="${esc(p.id)}" aria-label="Fix its kind or its words" title="Fix its kind or its words">${ic('pen', 16)}</button>`
+    + `<button type="button" class="vzp-ib vzr-ghost" data-a="pwrong" data-id="${esc(p.id)}" aria-label="Not right: move it to Left out" title="Not right">${ic('no', 16)}</button></div>` : '';
+  const body = p && ui.edit === p.id ? editHtml(p, ui.draft || {}, ui.also || 0)
+    : p ? (p.quote ? `<p class="vzr-q">${wx(V.W, p.quote)}</p>` : '') + (p.check ? `<p class="vzr-chk">Check: you said “${esc(p.check.phrase)}” means ${esc(p.check.meaning)}</p>` : '') : '';
+  let film = '';
+  if (V.shots.length) {
+    const N = 7, all = !!ui.allShots || V.shots.length <= N + 1, from = all ? 0 : Math.max(0, Math.min(Math.max(si, 0) - 3, V.shots.length - N));
+    const seen = all ? V.shots : V.shots.slice(from, from + N);
+    film = `<div class="vzr-film${all ? ' all' : ''}" role="group" aria-label="${esc('Screen captures · ' + V.shots.length)}">${seen.map((s) => `<button type="button" class="vzp-th${s.i === si ? ' on' : ''}" data-a="seekto" data-t="${s.t}" aria-label="${esc('Screen at ' + s.time + (s.why ? ': ' + s.why : ''))}" aria-pressed="${s.i === si}">${img(V, s.t)}</button>`).join('')}`
+      + (V.shots.length > N + 1 ? `<button type="button" class="vzr-more" data-a="allshots" aria-expanded="${all}" aria-label="${all ? 'Show only the captures near this point' : 'All ' + V.shots.length + ' screen captures'}">${all ? ic('x', 14) : '+' + (V.shots.length - seen.length)}</button>` : '') + '</div>';
+  }
+  return `<section class="vzr-ev" aria-label="Evidence for the selected point">${big}${acts}${body}${film}</section>`;
+}
+/** The timeline docked at the bottom (MvC): Play, the time of the length, the full chapter names over the strip, a dot per kept point. */
+export function dockHtml(V, ui = {}) {
+  const pos = ui.pos || 0, st = V.stretchAt(pos), speed = ui.speed || 1;
   const bars = V.strip.length ? V.strip : [{ w: 1, c: 0, text: '', min: 0, from: 0, to: V.len }];
   let x = 0;
-  const rects = bars.map((b) => { const w = b.w * 100 - (bars.length > 1 ? 0.4 : 0), r = `<rect x="${x.toFixed(2)}%" y="8" width="${Math.max(0.5, w).toFixed(2)}%" height="8" rx="4" class="vzp-st" data-c="${b.c}"/>`; x += b.w * 100; return r; }).join('');
-  const dots = V.points.filter((p) => p.at != null).map((p) => `<circle cx="${pct(p.at)}%" cy="4" r="4" class="vzp-kd" data-k="${p.open ? 'risk' : 'you'}"/>`).join('');
-  const head = `<rect class="vzp-head" data-clk="head" x="${pct(pos / V.len * 100)}%" y="0" width="2" height="24" rx="1"/>`;
-  const strip = `<div class="vzp-strip" data-a="seek" role="slider" tabindex="0" aria-label="Where the replay is" aria-valuemin="0" aria-valuemax="${Math.round(V.len / 1000)}" aria-valuenow="${Math.round(pos / 1000)}" aria-valuetext="${esc(mmss(pos) + (st && st.text ? ', ' + st.text : ''))}"><svg width="100%" height="24" aria-hidden="true">${rects}${dots}${head}</svg></div>`
-    + (V.strip.length ? `<div class="vzp-tops" data-n="${V.strip.length}">${V.strip.map((b, i) => `<button type="button" class="vzp-top" data-a="seekto" data-t="${b.from}" data-w="${(b.w * 1000).toFixed(0)}"${st === b ? ' aria-current="true"' : ''}>${esc(b.text + ' · ' + b.min + ' min')}</button>`).join('')}</div>` : '');
-  return `<div class="vzp-pl" role="group" aria-label="Replay">${cap ? `<div class="vzp-pr">${cap}<div class="vzp-pc">${ctl}${thumbs}</div></div>` : `<div class="vzp-pc">${ctl}${thumbs}</div>`}${strip}</div>`;
+  const rects = bars.map((b) => { const w = b.w * 100 - (bars.length > 1 ? 0.4 : 0), r = `<rect x="${x.toFixed(2)}%" y="9" width="${Math.max(0.5, w).toFixed(2)}%" height="8" rx="4" class="vzp-st" data-c="${b.c}"/>`; x += b.w * 100; return r; }).join('');
+  const dots = V.points.filter((p) => p.at != null).map((p) => `<circle cx="${pct(p.at)}%" cy="5" r="4.5" class="vzp-kd" data-k="${p.kind}"/>`).join('');
+  const head = `<rect class="vzp-head" data-clk="head" x="${pct(pos / V.len * 100)}%" y="0" width="2" height="26" rx="1"/>`;
+  const names = V.strip.length ? `<div class="vzp-tops vzr-tops" data-n="${V.strip.length}">${V.strip.map((b) => `<button type="button" class="vzp-top" data-a="seekto" data-t="${b.from}" data-w="${(b.w * 1000).toFixed(0)}" title="${esc(b.text + ' · ' + b.min + ' min')}"${st === b ? ' aria-current="true"' : ''}>${wx(V.W, b.text)}</button>`).join('')}</div>` : '';
+  return `<div class="vzp-pl vzr-dock" role="group" aria-label="Replay"><button type="button" class="vzp-ib vzp-solid" data-a="play" aria-label="${ui.playing ? 'Pause the recording' : 'Play from ' + mmss(pos)}">${ic(ui.playing ? 'pause' : 'play', 16, 'vzp-fill')}</button>`
+    + `<div class="vzp-ctl"><b data-clk="pos">${mmss(pos)}</b><span class="vzp-mut">of ${V.lenText}</span></div>`
+    + `<div class="vzr-tl">${names}<div class="vzp-strip" data-a="seek" role="slider" tabindex="0" aria-label="Where the replay is" aria-valuemin="0" aria-valuemax="${Math.round(V.len / 1000)}" aria-valuenow="${Math.round(pos / 1000)}" aria-valuetext="${esc(mmss(pos) + (st && st.text ? ', ' + st.text : ''))}"><svg width="100%" height="26" aria-hidden="true">${rects}${dots}${head}</svg></div></div>`
+    + `<button type="button" class="vzp-speed" data-a="speed" aria-label="Playback speed ${speed} times. Change">${speed}×</button></div>`;
 }
-
-/** One kept point as a row the PM can press to correct it (XvAReplay "In this part"). */
-function pointRow(p, ui) {
-  if (ui.edit === p.id) return editHtml(p, ui.draft || {}, ui.also || 0);
-  const meta = [p.time, p.by, p.kind === 'action' && p.due ? dueText(p.due) : '', p.open ? 'open' : ''].filter(Boolean).join(' · ');
-  return `<button type="button" class="vzp-pt" data-a="pedit" data-id="${esc(p.id)}" title="Fix its kind or its words"><span class="vzp-pill" data-k="${p.pill}">${KIND_OF[p.kind]}</span><span class="vzp-kt"><b>${esc(p.text)}</b><small>${esc(meta)}</small>`
-    + (p.check ? `<small class="vzp-chk2">Check: you said “${esc(p.check.phrase)}” means ${esc(p.check.meaning)}</small>` : '') + '</span></button>';
+/** The desk (MvC): the left column (the summary the page gives, the kept points, the strip), the evidence, and the docked timeline.
+ * o = { summary: html, strip: [{ k, title, n, html }] } from the page; Left out is this module's own part of the strip. */
+export function deskHtml(V, ui = {}, o = {}) {
+  const items = [V.left.length ? { k: 'left', title: 'Left out', n: String(V.left.length), html: leftHtml(V) } : null].concat(o.strip || []);
+  return `<div class="vzp vzp-card vzp-dt vzr"><div class="vzr-cols"><div class="vzr-l">${o.summary || ''}${pointsCardHtml(V, ui)}${stripHtml(items, ui)}</div>${evidenceHtml(V, ui)}</div>${dockHtml(V, ui)}</div>`;
 }
 const stop = (t) => (/[.!?…”]$/.test(t) ? t : t + '.');
 /** The correction (XvAReplayEdit): the kind, the old words struck, the new words, what PMOS will remember, the trash (Delete: no confirm,
- * Undo in the message, like a task's Delete), Cancel and Save.
+ * Undo in the message, like a task's Delete), Not right (it moves to Left out; batch 25 item 11 moved it here from the bulk bar), Cancel and Save.
  * d = { kind, text, learn }; also = how many other points of this note use the learned words. */
 export function editHtml(p, d = {}, also = 0) {
   const kind = d.kind || p.kind, text = d.text == null ? p.text : d.text, learn = d.learn !== false;
@@ -154,31 +266,7 @@ export function editHtml(p, d = {}, also = 0) {
     + (changed ? `<p class="vzp-was"><s>${esc(KIND_OF[p.orig.kind] + ' · ' + p.orig.text)}</s></p>` : '')
     + `<textarea class="vzp-eta" data-a="etext" rows="3" aria-label="What was really said">${esc(text)}</textarea>`
     + `<div class="vzp-learn"><b>${learn && changed ? 'I will remember this.' : ''}</b> <span data-pl="lesson">${esc(lessonText)}</span>${changed ? ` <button type="button" class="vzp-link" data-a="elearn" aria-pressed="${!learn}">${learn ? 'Only fix this one' : 'Remember it'}</button>` : ''}</div>`
-    + `<div class="vzp-ef"><span class="vzp-mut vzp-sm">${esc([p.time, p.by].filter(Boolean).join(' · '))}</span><span class="vzp-sp"></span><button type="button" class="vzp-ib vzp-del" data-a="edel" data-id="${esc(p.id)}" aria-label="Delete" title="Delete">${ic('bin', 16)}</button><button type="button" class="vzp-gbtn" data-a="ecancel">Cancel</button><button type="button" class="vzp-dark" data-a="esave"${changed && text.trim() ? '' : ' disabled'}>Save</button></div></div>`;
-}
-/** "In this part · <topic>": the kept points said in the stretch the replay is in. */
-export function partHtml(V, ui = {}) {
-  const pos = ui.pos || 0, st = V.stretchAt(pos);
-  const rows = V.points.filter((p) => p.t != null && st && p.t >= st.from && p.t < st.to);
-  if (!rows.length) return '';   // zero is silence: a part with nothing kept says nothing
-  return `<p class="vzp-lbl">In this part${st && st.text ? ' · ' + esc(st.text) : ''}</p><div class="vzp-pts">${rows.map((p) => pointRow(p, ui)).join('')}</div>`;
-}
-/** Every kept point as a row to press (the "All N kept" fold): grouped as the filter says, the bulk bar for the ticked, Left out. */
-export function keptHtml(V, ui = {}) { return pointsHtml(V, { ...ui, rows: true }); }
-
-/** The kept points, desktop: filter, the kept line, the bulk bar, the rows, the Left out fold. */
-export function pointsHtml(V, ui = {}) {
-  const f = ui.filter || 'all', sel = ui.sel || new Set(), rows = V.points.filter((p) => f === 'all' || p.kind === f);
-  const h = [];
-  h.push(`<div class="vzp-fl"><div class="vzp-seg" role="group" aria-label="Show">${V.seg.map(([k, l, c]) => `<button type="button" data-a="pf" data-k="${k}" aria-pressed="${f === k}">${esc(l + ' ' + c)}</button>`).join('')}</div><span class="vzp-mut vzp-sm">${esc(V.keptLine)}</span></div>`);
-  if (sel.size) h.push(`<div class="vzp-bulk" role="toolbar" aria-label="The ticked points"><b>${sel.size} selected</b><button type="button" data-a="bulk" data-k="task">Make tasks</button><button type="button" data-a="bulk" data-k="confirmed">Confirm</button><button type="button" data-a="bulk" data-k="wrong" class="vzp-gh">Not right</button></div>`);
-  h.push(`<div class="vzp-kl">${rows.length ? rows.map((p) => ui.edit === p.id ? editHtml(p, ui.draft || {}, ui.also || 0) : `<div class="vzp-kr${sel.has(p.id) ? ' sel' : ''}"><button type="button" class="vzp-chk" role="checkbox" aria-checked="${sel.has(p.id)}" data-a="tick" data-id="${esc(p.id)}" aria-label="${esc('Tick: ' + p.text)}">${sel.has(p.id) ? ic('chk', 12) : ''}</button><span class="vzp-pill" data-k="${p.pill}">${p.label}</span><button type="button" class="vzp-kt" data-a="pedit" data-id="${esc(p.id)}" title="Fix its kind or its words"><p><b>${esc(p.text)}</b>${p.verdict === 'confirmed' ? ' <span class="vzp-conf">' + ic('chk', 12) + (p.edited ? 'Fixed' : 'Confirmed') + '</span>' : ''}</p>${p.quote ? `<p class="vzp-q">${esc(p.quote)}</p>` : ''}${p.check ? `<p class="vzp-q vzp-chk2">Check: you said “${esc(p.check.phrase)}” means ${esc(p.check.meaning)}</p>` : ''}</button>${p.time ? `<button type="button" class="vzp-tm${p.open ? ' risk' : ''}" data-a="seekto" data-t="${p.t}" aria-label="Play from ${p.time}">${p.time}</button>` : '<span></span>'}</div>`).join('')
-    : `<p class="vzp-empty">${V.points.length ? 'No point of this kind was kept.' : 'Nothing was agreed, owned or left open in this meeting.'}</p>`}</div>`);
-  if (V.left.length) {
-    h.push(`<button type="button" class="vzp-left" data-a="leftout" aria-expanded="${!!ui.leftOpen}">${ic('chev', 14)}<b>${esc(V.leftLine)}</b><span>${esc(V.leftEg)}</span></button>`);
-    if (ui.leftOpen) h.push(`<div class="vzp-ll">${V.left.map((x) => `<div class="vzp-lr"><span>${esc(x.text)}</span><small>${esc(x.why)}</small>${x.verdict === 'wrong' ? `<button type="button" class="vzp-link" data-a="unwrong" data-id="${esc(x.id)}">Put it back</button>` : x.time ? `<button type="button" class="vzp-tm" data-a="seekto" data-t="${x.t}" aria-label="Play from ${x.time}">${x.time}</button>` : ''}</div>`).join('')}</div>`);
-  }
-  return h.join('');
+    + `<div class="vzp-ef"><span class="vzp-mut vzp-sm">${esc([p.time, p.by].filter(Boolean).join(' · '))}</span><span class="vzp-sp"></span><button type="button" class="vzp-ib vzp-del" data-a="edel" data-id="${esc(p.id)}" aria-label="Delete" title="Delete">${ic('bin', 16)}</button><button type="button" class="vzp-ib vzp-del" data-a="pwrong" data-id="${esc(p.id)}" aria-label="Not right: move it to Left out" title="Not right">${ic('no', 16)}</button><button type="button" class="vzp-gbtn" data-a="ecancel">Cancel</button><button type="button" class="vzp-dark" data-a="esave"${changed && text.trim() ? '' : ' disabled'}>Save</button></div></div>`;
 }
 
 /** The phone's Replay (MtPhone.dc.html): the player without the capture, "Now: <topic>", and the points grouped by kind. made = { [pointId]: true } */
@@ -197,8 +285,8 @@ export function phoneHtml(V, ui = {}) {
   return h.join('');
 }
 
-/** The whole tab: desktop and phone, the stylesheet shows one (cozy-vw-mtg.css). */
-export function replayHtml(V, ui = {}) {
+/** The whole of it: the desk and the phone; the stylesheet shows one (cozy-vw-mtg.css). o: deskHtml's (the summary and the strip). */
+export function replayHtml(V, ui = {}, o = {}) {
   if (!V) return '<p class="vzp-empty">This meeting has no recording to replay.</p>';
-  return `<div class="vzp vzp-dt">${playerHtml(V, ui)}${pointsHtml(V, ui)}</div><div class="vzp vzp-mb">${phoneHtml(V, ui)}</div>`;
+  return `${deskHtml(V, ui, o)}<div class="vzp vzp-mb">${phoneHtml(V, ui)}</div>`;
 }