create-pmos 0.527.0 → 0.529.0

package/workspace/public/pm/premium-meeting.js

@@ -317,7 +317,8 @@ export function replayModel(rep) {
   const stretches = (Array.isArray(rep.runs) ? rep.runs : []).filter((x) => Number.isFinite(x.from_ms) && Number.isFinite(x.to_ms) && x.to_ms > x.from_ms).map((x) => { const t = topics.find((y) => y.id === x.topic); return { n: x.n || (t && t.n) || 0, text: t ? t.text : '', from: Math.max(0, x.from_ms), to: Math.min(len, x.to_ms) }; }).filter((x) => x.to > x.from);
   const keys = (Array.isArray(rep.keys) ? rep.keys : []).filter((k) => k && ['decision', 'action', 'question'].includes(k.k)).map((k, i) => ({ id: k.id || 'k' + i, k: k.k, text: clip(k.text, 240), t: Number.isFinite(k.t) ? k.t : null, owner: clip(k.owner, 60), due: k.due || '', by: clip(k.by, 60), state: k.state || '',
     need: !!k.warn || k.state === 'owner' || k.state === 'open' }));
-  const shots = (Array.isArray(rep.shots) ? rep.shots : []).filter((x) => Number.isFinite(x.t)).map((x) => ({ t: x.t, why: clip(x.why, 120) })).sort((a, b) => a.t - b.t);
+  const shots = (Array.isArray(rep.shots) ? rep.shots : []).filter((x) => Number.isFinite(x.t)).map((x) => ({ t: x.t, why: clip(x.why, 120), w: Number(x.w) || 0, h: Number(x.h) || 0,
+    ...(x.jev && (x.jev.kind === 'content' || x.jev.kind === 'faces') ? { jev: { kind: x.jev.kind, ...(Array.isArray(x.jev.box) && x.jev.box.length === 4 ? { box: x.jev.box.map(Number) } : {}) } } : {}) })).sort((a, b) => a.t - b.t);
   /* PMOS's notes (the meeting companion's, from the Focus file), the gaps where the recording was off, and the line each key point was caught from */
   const pmos = (Array.isArray(rep.notes) ? rep.notes : []).filter((x) => x && Number.isFinite(x.t) && String(x.body || '').trim()).map((x) => ({ t: Math.max(0, Math.min(len, x.t)), cat: clip(x.cat, 30), body: clip(x.body, 4000) })).sort((a, b) => a.t - b.t);
   const gaps = (Array.isArray(rep.gaps) ? rep.gaps : []).filter((g) => Number.isFinite(g.from_ms) && Number.isFinite(g.to_ms) && g.to_ms > g.from_ms).map((g) => ({ from: g.from_ms, to: Math.min(len, g.to_ms) }));

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

@@ -6,19 +6,27 @@
  *               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.
+ *   RIGHT       the player (batch 27 item 12, "Meeting player": MpD1, MpD2, MpD4; adopted from music and podcast players). The meeting is
+ *               audio plus screen captures, so the capture at the playhead is the artwork, with whose screen and when, and an icon that
+ *               shows the whole frame. Under it the chapter's name and "chapter N of M"; ONE thin bar where the chapters are gaps (no text
+ *               on the bar) and each kept point is its kind's icon inside its chapter; hovering the bar shows the capture there, the
+ *               chapter and the time. Elapsed left, total right. One centred row: ‹ back 15 s, play, forward 15 s ›; the speed chip
+ *               (1×, 1.5×, 2×) left; a captures icon (the row of captures, hidden by default) and a chapters icon (the list: name, its
+ *               kept points, its start; press one to play from there) right. Under it the caption: the line now, larger, with its
+ *               speaker, the lines before and after faded, as a music player shows lyrics. The old bottom dock is gone.
+ *   JEV CROP    (MpJ) when Jev for images read a capture, the artwork and the captures row show only the box around the slide or
+ *               document, and a capture of faces only is left out (the card keeps the last slide). Every crop keeps the whole-frame icon:
+ *               Jev's own confidence cannot flag a bad box. A capture Jev did not read shows whole, as before.
+ *   WORD FIX    (MvF, batch 27 word fix A: MpW1, MpW2) a word heard wrong is fixed in place: the PM selects it or double-clicks it in any
+ *               text of the notes; a popup offers the ✦ spelling when one is found, the places it changes, ✓. It shows fixed in every
+ *               place this note shows it. Remembering it for later notes waits for the ✦ ask in Names and terms. Undo forgets it.
+ *               lib/meeting-terms.js keeps it; the note's own files are not rewritten.
+ * Phone (MpD3): the player without the captures icon and the chapter steps, then the kept points.
  *
  * 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, 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 } */
+ *   replayHtml(V, ui) → the desk and the phone. ui = { pos, playing, speed, pt (the selected point), strip, caps, chaps, allShots, 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; };
@@ -101,7 +109,10 @@ export function replayView(rep, { n = null, points = {}, edits = {}, lessons = [
   const tot = rep.stretches.reduce((s, x) => s + (x.to - x.from), 0) || 1;
   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 capture Jev called faces only is left out; one it boxed shows only the box (MpJ). Jev not asked: the capture shows whole, as before */
+  const shots = rep.shots.map((s, i) => ({ i, t: s.t, time: mmss(s.t), why: clip(s.why, 80), who: whoAt(s.t), w: s.w || 0, h: s.h || 0,
+    faces: !!(s.jev && s.jev.kind === 'faces'), box: s.jev && Array.isArray(s.jev.box) && s.jev.box.length === 4 ? s.jev.box : null }));
+  const caps = shots.filter((x) => !x.faces);
   /* 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();
@@ -115,14 +126,16 @@ export function replayView(rep, { n = null, points = {}, edits = {}, lessons = [
   const noteId = rep.noteId || (n && n.id) || '';
   return {
     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,
+    len: rep.len, lenText: mmss(rep.len), noteId, audio: rep.audio, strip, shots, caps,
+    lines: (rep.lines || []).filter((l) => l && Number.isFinite(l.t) && l.text).map((l) => ({ t: l.t, who: clip(l.who, 30), text: clip(l.text, 400) })),
     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',
     leftLine: left.length ? 'Left out · ' + left.length + (left.length === 1 ? ' remark' : ' remarks') : '',
     leftEg: left.length ? 'e.g. “' + clip(left[0].text, 50) + '”, ' + left[0].why : '',
     stretchAt: (pos) => strip.find((x) => pos >= x.from && pos < x.to) || strip[strip.length - 1] || null,
-    shotAt: (pos) => { let k = -1; shots.forEach((s, i) => { if (s.t <= pos) k = i; }); return k < 0 && shots.length ? 0 : k; },
+    shotAt: (pos) => { let k = -1; shots.forEach((s, i) => { if (s.t <= pos && !s.faces) k = i; }); return k < 0 && caps.length ? caps[0].i : k; },
+    chapterAt: (pos) => { const i = strip.findIndex((x) => pos >= x.from && pos < x.to); return i >= 0 ? i : strip.length ? (pos >= strip[strip.length - 1].from ? strip.length - 1 : 0) : -1; },
   };
 }
 
@@ -132,7 +145,7 @@ 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); }
+  for (const x of [...all].reverse()) { const k = x.heard.toLowerCase(); if (x.note === noteId || seen.has(k) || (x.keep && x.keep !== 'yes')) continue; seen.add(k); guess.push(x); }   // only a fix the PM said to remember reaches other notes
   return { fix, guess };
 }
 const reEsc = (s) => s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
@@ -147,7 +160,7 @@ export function wx(W, text) {
   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>`
+    out += x.k === 'fix' ? `<span class="vzr-fx" data-w="${esc(word)}" 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;
@@ -159,23 +172,54 @@ 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>`;
+/** The texts of the view that a word fix reaches: the points, their follow-ups, the chapter names, Left out. */
+export const viewTexts = (V) => V ? [].concat(V.points.map((p) => p.text), V.strip.map((s) => s.text), V.left.map((x) => x.text)) : [];
+const KIND_PLACE = [['points', 'kept point', 'kept points'], ['steps', 'next step', 'next steps'], ['facts', 'fact', 'facts'], ['left', 'Left out', 'Left out'],
+  ['lines', 'transcript line', 'transcript lines'], ['summary', 'in the summary', 'in the summary'], ['chapters', 'chapter name', 'chapter names']];
+/** Where a word fix changes the words (MpW1 "12 places in this meeting" and its breakdown): the count per kind of text. o = the page's own
+ * texts { summary, steps, facts, lines }. → { n, by: [{ k, n, text }] } with kinds that hold none left out (zero is silence). Pure. */
+export function placesBy(V, o, heard) {
+  const T = { points: V ? V.points.map((p) => p.text) : [], chapters: V ? V.strip.map((x) => x.text) : [], left: V ? V.left.map((x) => x.text) : [],
+    summary: [o && o.summary || ''], steps: (o && o.steps) || [], facts: (o && o.facts) || [], lines: (o && o.lines) || [] };
+  const by = KIND_PLACE.map(([k, one, many]) => { const n = placesOf(T[k], heard); return { k, n, text: k === 'summary' ? many : n + ' ' + (n === 1 ? one : many) }; }).filter((x) => x.n);
+  return { n: by.reduce((a, x) => a + x.n, 0), by };
+}
+/** The word fix's popup (MpW1; a bottom sheet on a phone, MpWPhone): "Heard as …", the field with the ✦ spelling when one was found, ✓; the
+ * ✦ line with where the spelling comes from and two other spellings to press; how many places in this meeting, by kind. Escape leaves it.
+ * sug = lib/meeting-suggest.js suggest() (null: no ✦ line, the field holds the heard words), P = placesBy(). */
+export function wordPopHtml(heard, sug, P) {
+  const h = String(heard || ''), best = sug && sug.means ? sug.means : '', n = P ? P.n : 0;
+  const from = sug ? [sug.from.includes('fix') ? 'you fixed it that way before' : '', sug.from.includes('invite') ? 'the invite' : '', sug.from.includes('repo') ? (sug.file ? sug.file : 'your repository') : ''].filter(Boolean) : [];
+  const why = !best ? '' : sug.from.includes('fix') && from.length === 1 ? 'you fixed it that way before.' : from.filter((x) => !/^you fixed/.test(x)).join(' and ') + (from.filter((x) => !/^you fixed/.test(x)).length > 1 ? ' spell' : ' spells') + ' it that way' + (sug.from.includes('fix') ? ', and you fixed it that way before.' : '.');
+  const alts = best ? [best].concat(sug.alts || [], [h]).filter((x, i, a) => x && a.indexOf(x) === i).slice(0, 3) : [];
+  const label = n > 1 ? 'Fix it in ' + n + ' places' : 'Fix it';
+  return `<div class="vzr-wpop" role="dialog" aria-label="${esc('Fix “' + h + '”')}" data-w="${esc(h)}"><span class="vzr-grab" aria-hidden="true"></span><p class="vzr-wl">Heard as “${esc(h)}”</p>`
+    + `<div class="vzr-wf"><input data-a="wfin" aria-label="${esc('Fix “' + h + '”')}" value="${esc(best || h)}" maxlength="60" spellcheck="false"><button type="button" class="vzr-go" data-a="wfok" aria-label="${esc(label)}" title="${esc(label)}">${ic('chk', 16)}</button></div>`
+    + (best ? `<p class="vzr-sug"><span class="vzr-star" aria-hidden="true">✦</span><span>Claude suggests <b>${esc(best)}</b>: ${esc(why)}</span></p><div class="vzr-alt" role="group" aria-label="Other spellings">${alts.map((x, i) => `<button type="button" data-a="walt" data-v="${esc(x)}" aria-pressed="${i === 0}">${esc(x)}</button>`).join('')}</div>` : '')
+    + (n ? `<p class="vzr-scope"><b>${n === 1 ? '1 place' : n + ' places'}</b> in this meeting</p>${P.by.length > 1 || (P.by[0] && P.by[0].k !== 'summary') ? `<div class="vzr-brk">${P.by.map((x) => `<span>${esc(x.text)}</span>`).join('')}</div>` : ''}` : '')
+    + '<i class="vzr-arr" aria-hidden="true"></i></div>';
+}
 
 /* ── 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',
-  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 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', prev: 'M14 7l-5 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',
+  caps: 'M4 6h16v12H4zM4 16l4.5-4.5 4 4 3-3L20 17M9 9.5h.01', chaps: 'M9 6h11M9 12h11M9 18h11M4.5 6h.01M4.5 12h.01M4.5 18h.01', undo: 'M9 14L4 9l5-5M4 9h9a6 6 0 0 1 0 12h-3' };
 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>`;
+/** Back or forward 15 seconds (MpD1): the round arrow with 15 in it. */
+const skipIc = (fwd) => `<svg aria-hidden="true" width="28" height="28" viewBox="0 0 24 24"><g${fwd ? ' transform="translate(24 0) scale(-1 1)"' : ''}><path d="M4.5 12a7.5 7.5 0 1 0 2.4-5.5"/><path d="M4 3.5v4h4"/></g><g transform="scale(0.577)"><text x="20.8" y="26.3" text-anchor="middle" fill="currentColor" stroke="none">15</text></g></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">` : '');
+/** A capture as an image. A capture Jev boxed carries its box; the page crops it to the box (premium-vw-mtg.js crop). */
+const img = (V, t, sh) => (V.noteId ? `<img src="/api/notes/screen?id=${encodeURIComponent(V.noteId)}&amp;t=${t}" alt="" loading="lazy"${sh && sh.box ? ` data-box="${sh.box.join(',')}" data-wh="${sh.w || 16},${sh.h || 9}"` : ''}>` : '');
 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;
+/** Where the replay is: the playhead, else the selected point's time. */
+export const posOf = (V, ui = {}) => { const p = selOf(V, ui); return ui.pos != null ? ui.pos : p && p.t != null ? p.t : 0; };
+export const WORD_HINT = 'Select a word or a few words anywhere in the notes, or double-click one.';
 
-/** 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. */
+/** One kept point as a lean row (MvC): its kind as an icon, its words (selectable: a word in them can be fixed), its time, ✓; a decision's
+ * follow-up To do under it. The selected row also holds Fix (the edit card opens under it) and Not right. */
 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(' · ') : '';
@@ -184,11 +228,14 @@ function rowHtml(V, p, ui, sel) {
     : 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(',');
+  const acts = sel ? `<div class="vzr-ra"><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', 15)}</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', 15)}</button></div>` : '';
+  const edit = sel && ui.edit === p.id ? `<div class="vzr-edit">${editHtml(p, ui.draft || {}, ui.also || 0)}</div>` : '';
   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>`
+    + `<div class="vzp-kt" data-a="psel" data-id="${esc(p.id)}" tabindex="0" role="button" aria-pressed="${sel}"><b>${wx(W, p.text)}</b></div>`
     + (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>';
+    + fu + chk + acts + edit + '</div>';
 }
 /** The kept points (MvC): "N kept", a count per kind, Confirm N in the header; the rows. */
 export function pointsCardHtml(V, ui = {}) {
@@ -210,46 +257,83 @@ export function stripHtml(items, ui = {}) {
   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 player (MpD1, MpD2, MpD4, MpD3) ── */
+/** The kept points' icons inside the bar: a decision's dot, a To do's box, a question's ?. An SVG in the bar's SVG, at the point's place. */
+function markHtml(p, on) {
+  const g = p.kind === 'decision' ? '<circle cx="7" cy="7" r="4.5" class="vzr-md"/>' : `<g transform="scale(0.5833)"><path d="${P[KIND_IC[p.kind]]}"/></g>`;
+  return `<svg x="${pct(p.at)}%" y="0" width="1" height="1" overflow="visible" class="vzr-mk${on ? ' on' : ''}" data-k="${p.kind}"><title>${esc(p.time + ' · ' + p.text)}</title><g transform="translate(-7 0)">${g}</g></svg>`;
+}
+/** ONE thin bar: the chapters are gaps (no text on it), the part played darker, the kept points as icons in their chapter, the playhead. */
+export function barHtml(V, ui = {}) {
+  const pos = posOf(V, ui), ci = V.chapterAt(pos), sel = selOf(V, ui), len = V.len || 1;
+  const bars = V.strip.length ? V.strip : [{ from: 0, to: V.len }];
+  const gap = bars.length > 1 ? 0.45 : 0;
+  const rects = bars.map((b, i) => {
+    const x = b.from / len * 100, w = Math.max(0.3, (b.to - b.from) / len * 100 - gap), k = i < ci ? 'past' : i === ci ? 'cur' : 'next';
+    const prog = i === ci ? `<rect x="${x.toFixed(2)}%" y="13" width="${Math.max(0, Math.min(w, (pos - b.from) / len * 100)).toFixed(2)}%" height="10" rx="5" class="vzr-prog" data-clk="prog" data-x="${x.toFixed(2)}" data-w="${w.toFixed(2)}"/>` : '';
+    return `<rect x="${x.toFixed(2)}%" y="${k === 'cur' ? 13 : 14}" width="${w.toFixed(2)}%" height="${k === 'cur' ? 10 : 8}" rx="${k === 'cur' ? 5 : 4}" class="vzr-sg" data-k="${k}"/>` + prog;
+  }).join('');
+  const marks = V.points.filter((p) => p.at != null).map((p) => markHtml(p, !!sel && sel.id === p.id)).join('');
+  const head = `<svg x="${pct(pos / len * 100)}%" y="0" width="1" height="1" overflow="visible" data-clk="head"><rect x="-2" y="11" width="4" height="14" rx="2" class="vzr-head"/></svg>`;
+  const st = ci >= 0 ? V.strip[ci] : null;
+  return `<div class="vzr-barw"><div class="vzp-strip vzr-bar" 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}${marks}${head}</svg></div>`
+    + `<div class="vzr-hov" hidden aria-hidden="true"><span class="vzr-hth"></span><b></b><small></small></div></div>`;
 }
-/** 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="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>`;
+/** The caption under the player, as a music player shows lyrics: the line now, larger, with its speaker; the lines before and after faded. */
+export function captionHtml(V, pos) {
+  const L = V.lines || [];
+  let i = -1; for (let k = 0; k < L.length; k++) { if (L[k].t <= pos + 500) i = k; else break; }
+  if (i < 0) i = L.length ? 0 : -1;
+  if (i < 0) return '';
+  const pv = L[i - 1], cur = L[i], nx = L[i + 1];
+  return (pv ? `<span class="vzr-cp">${wx(V.W, pv.text)}</span>` : '') + `<span class="vzr-cn">${cur.who ? `<span class="vzr-cw">${esc(cur.who)}</span>` : ''}<span class="vzr-said">${wx(V.W, cur.text)}</span></span>`
+    + (nx ? `<span class="vzr-cx">${wx(V.W, nx.text)}</span>` : '');
 }
-/** 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. */
+/** The line of the caption now: the page draws the caption again only when it changes. */
+export const lineAtPos = (V, pos) => { const L = V.lines || []; let i = -1; for (let k = 0; k < L.length; k++) { if (L[k].t <= pos + 500) i = k; else break; } return i; };
+/** The captures row (MpD4): hidden by default, the captures icon shows it. Five near the playhead and "+N more"; all of them when pressed. */
+function capsHtml(V, ui, si) {
+  if (!V.caps.length) return '';
+  const N = 5, all = !!ui.allShots || V.caps.length <= N + 1, ci = Math.max(0, V.caps.findIndex((x) => x.i === si));
+  const from = all ? 0 : Math.max(0, Math.min(ci - 2, V.caps.length - N)), seen = all ? V.caps : V.caps.slice(from, from + N);
+  return `<div class="vzr-film${all ? ' all' : ''}" role="group" aria-label="${esc('Screen captures · ' + V.caps.length)}">${seen.map((s) => `<button type="button" class="vzp-th vzr-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}"><span class="vzr-crop">${img(V, s.t, s)}</span></button>`).join('')}`
+    + (V.caps.length > N + 1 ? `<button type="button" class="vzr-more" data-a="allshots" aria-expanded="${all}" aria-label="${all ? 'Show only the captures near the playhead' : 'All ' + V.caps.length + ' screen captures'}">${all ? ic('x', 14) : '+' + (V.caps.length - seen.length) + ' more'}</button>` : '') + '</div>';
+}
+/** The chapters list (MpD2): its name, the kept points in it, its start; the chapter now highlighted; press one to play from there. */
+function chaptersHtml(V, ui, ci) {
+  return `<div class="vzr-chs" role="dialog" aria-label="Chapters"><div class="vzr-chh"><span class="vzr-lbl">Chapters · ${V.strip.length}</span><span class="vzp-sp"></span><span class="vzr-hint0">Press one to play from there</span></div>`
+    + V.strip.map((b, i) => { const ks = V.points.filter((p) => p.t != null && p.t >= b.from && p.t < b.to).slice(0, 3);
+      return `<button type="button" class="vzr-chr${i === ci ? ' cur' : ''}" data-a="chgo" data-t="${b.from}"${i === ci ? ' aria-current="true"' : ''}><b>${wx(V.W, b.text)}</b><span class="vzr-chm">${ks.map((p) => kindIcon(p.kind)).join('')}</span><span class="vzr-cht">${mmss(b.from)}</span></button>`; }).join('') + '</div>';
+}
+/** The player (MpD1): the capture as the artwork, the chapter, the bar, the times, the controls, the caption. phone: MpD3 (no chapter steps,
+ * no captures icon, no caption). */
+export function playerHtml(V, ui = {}, phone = false) {
+  const pos = posOf(V, ui), si = V.shotAt(pos), shot = si >= 0 ? V.shots[si] : null, ci = V.chapterAt(pos), st = ci >= 0 ? V.strip[ci] : null, speed = ui.speed || 1;
+  const art = shot ? `<div class="vzr-art"><span class="vzr-crop">${img(V, shot.t, shot)}</span><span class="vzr-tag">${esc((shot.who ? shot.who + '’s screen' : 'Shared screen') + ' · ' + shot.time)}</span><button type="button" class="vzr-full" data-a="shotbig" data-t="${shot.t}" aria-label="Show the whole frame" title="Show the whole frame">${ic('big', 16)}</button></div>`
+    : '<div class="vzr-noshot"><p class="vzp-mut vzp-sm">No screen was shared, so there are no captures.</p></div>';
+  const title = st ? `<div class="vzr-nt"><b data-clk="chap">${wx(V.W, st.text)}</b><span>chapter ${ci + 1} of ${V.strip.length}</span></div>` : '';
+  const nextSp = SPEEDS[(SPEEDS.indexOf(speed) + 1) % SPEEDS.length];
+  const ctl = `<div class="vzr-tr"><span class="vzr-L"><button type="button" class="vzr-speed" data-a="speed" aria-label="${esc('Speed ' + speed + ' times, press for ' + nextSp)}">${speed}×</button></span>`
+    + (!phone && V.strip.length > 1 ? `<button type="button" class="vzr-ib" data-a="chprev" aria-label="Previous chapter" title="Previous chapter">${ic('prev', 20)}</button>` : '')
+    + `<button type="button" class="vzr-skip" data-a="skip" data-d="-15000" aria-label="Back 15 seconds" title="Back 15 seconds">${skipIc(false)}</button>`
+    + `<button type="button" class="vzr-big" data-a="play" aria-label="${ui.playing ? 'Pause' : 'Play from ' + mmss(pos)}">${ic(ui.playing ? 'pause' : 'play', 24, 'vzr-fill')}</button>`
+    + `<button type="button" class="vzr-skip" data-a="skip" data-d="15000" aria-label="Forward 15 seconds" title="Forward 15 seconds">${skipIc(true)}</button>`
+    + (!phone && V.strip.length > 1 ? `<button type="button" class="vzr-ib" data-a="chnext" aria-label="Next chapter" title="Next chapter">${ic('chev', 20)}</button>` : '')
+    + `<span class="vzr-R">${!phone && V.caps.length ? `<button type="button" class="vzr-ib vzr-o${ui.caps ? ' on' : ''}" data-a="caps" aria-pressed="${!!ui.caps}" aria-label="${esc('Screen captures, ' + V.caps.length)}" title="Screen captures">${ic('caps', 18)}</button>` : ''}`
+    + (V.strip.length ? `<button type="button" class="vzr-ib vzr-o${ui.chaps ? ' on' : ''}" data-a="chaps" aria-expanded="${!!ui.chaps}" aria-label="${esc('Chapters, ' + V.strip.length)}" title="Chapters">${ic('chaps', 18)}</button>` : '') + '</span></div>';
+  const cap = phone ? '' : captionHtml(V, pos);
+  return `<section class="vzr-np${phone ? ' vzr-ph1' : ''}" aria-label="Replay">${art}`
+    + (ui.chaps && V.strip.length ? `<div class="vzr-chw">${chaptersHtml(V, ui, ci)}</div>` : '')
+    + (!phone && ui.caps ? capsHtml(V, ui, si) : '') + title + barHtml(V, ui)
+    + `<div class="vzr-times"><span data-clk="pos">${mmss(pos)}</span><span>${V.lenText}</span></div>` + ctl
+    + (cap ? `<div class="vzr-cap" data-pl="cap" aria-live="off">${cap}</div>` : '') + '</section>';
+}
+/** The desk (MvC + MpD1): the left column (the summary the page gives, the kept points, the strip, the one-time word hint) and the player.
+ * o = { summary: html, strip: [{ k, title, n, html }], hint: bool } 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>`;
+  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)}${o.hint ? `<p class="vzr-hint">${esc(WORD_HINT)}</p>` : ''}</div>${playerHtml(V, ui)}</div></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,
@@ -269,20 +353,12 @@ export function editHtml(p, d = {}, also = 0) {
     + `<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 } */
+/** The phone's Replay (MpD3, MpWPhone): the player, then "N kept" with Confirm N and the kept points (their ✓ is on the desk). */
 export function phoneHtml(V, ui = {}) {
-  const pos = ui.pos || 0, st = V.stretchAt(pos);
-  const h = [`<div class="vzp-pl vzp-phpl"><div class="vzp-ctl"><button type="button" class="vzp-ib vzp-solid" data-a="play" aria-label="${ui.playing ? 'Pause' : 'Play'}">${ic(ui.playing ? 'pause' : 'play', 16, 'vzp-fill')}</button><b data-clk="pos">${mmss(pos)}</b><span class="vzp-mut">of ${V.lenText}</span></div>`
-    + `<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)}"><svg width="100%" height="12" aria-hidden="true">${(() => { let x = 0; return (V.strip.length ? V.strip : [{ w: 1, c: 0 }]).map((b) => { const r = `<rect x="${x.toFixed(2)}%" y="2" width="${Math.max(0.5, b.w * 100 - 0.4).toFixed(2)}%" height="8" rx="4" class="vzp-st" data-c="${b.c}"/>`; x += b.w * 100; return r; }).join(''); })()}</svg></div>`
-    + (st && st.text ? `<p class="vzp-mut vzp-sm">Now: ${esc(st.text + ' · ' + st.min + ' min')}</p>` : '') + '</div>'];
-  const toConfirm = V.points.filter((p) => !p.verdict);
-  h.push(`<div class="vzp-phh"><p class="vzp-lbl">Key points · ${V.points.length}</p>${toConfirm.length ? `<button type="button" class="vzp-dark" data-a="confirmall">Confirm all</button>` : ''}</div>`);
-  for (const k of ['decision', 'action', 'question']) {
-    const rows = V.points.filter((p) => p.kind === k); if (!rows.length) continue;
-    h.push(`<p class="vzp-h3">${KIND[k].many}</p>` + rows.map((p) => `<div class="vzp-prow"><button type="button" class="vzp-tm${p.open ? ' risk' : ''}" data-a="seekto" data-t="${p.t == null ? '' : p.t}"${p.time ? '' : ' disabled'}>${p.time || '–'}</button><span>${esc(p.text)}</span>${k === 'action' ? (ui.pmade && ui.pmade[p.id] ? '<span class="vzp-pill" data-k="you">Task</span>' : `<button type="button" class="vzp-soft" data-a="ptask" data-id="${esc(p.id)}">Make task</button>`) : ''}</div>`).join(''));
-  }
-  if (!V.points.length) h.push('<p class="vzp-empty">Nothing was agreed, owned or left open in this meeting.</p>');
-  return h.join('');
+  const sel = selOf(V, ui);
+  const rows = V.rows.map((p) => rowHtml(V, p, ui, !!sel && sel.id === p.id)).join('');
+  return playerHtml(V, ui, true) + `<div class="vzr-phk"><div class="vzr-ph"><h3>${V.points.length} kept</h3><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>`
+    + (rows ? `<div class="vzp-kl">${rows}</div>` : '<p class="vzp-empty">Nothing was agreed, owned or left open in this meeting.</p>') + '</div>';
 }
 
 /** 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). */

package/workspace/public/pm/premium-report-read.js

@@ -560,7 +560,12 @@ function draw() {
   }
   const ae = document.activeElement, keep = ae && b.contains(ae) ? ae.getAttribute('data-r') : null;
   syncMore();
-  b.innerHTML = panelHtml();
+  const html = panelHtml();
+  // batch 27 item 13 (flicker while a draft is written): the same panel is not built again, and a new one keeps the scroll
+  if (R.fromFile && html === b.__rpHtml) return;
+  const top = b.scrollTop;
+  b.innerHTML = html; b.__rpHtml = html; R.draws = (R.draws || 0) + 1;
+  b.scrollTop = top;
   wire(b);
   fit(b);
   const f = R.pop && R.pop !== R.popWas ? b.querySelector('.rp-pops button:not([disabled]), .rp-pops a, .rp-pops input') : null;   // a popover that just opened takes the focus
@@ -1009,7 +1014,7 @@ export async function openReport(row, hand = {}) {
     // the template behind one icon (batch 22 item 14, canvas RfH1): format, readers, when it goes out, and its history
     presses: me.setup ? [{ act: 'chat', label: 'Talk to Claude about this report', icon: RF_ICON.chat }, { act: 'template', label: 'Template: format, readers, look, sources', icon: RF_ICON.tune }] : [],
     onPress: (a) => { if (R !== me) return; if (a === 'template') openTemplate(); else if (a === 'chat') openChat(); },
-    render: (b) => { syncMore(); b.innerHTML = panelHtml(); wire(b); }, onClose: () => { if (R === me && !me.reopen) { present(false); R = null; } } });
+    render: (b) => { syncMore(); b.__rpHtml = b.innerHTML = panelHtml(); wire(b); }, onClose: () => { if (R === me && !me.reopen) { present(false); R = null; } } });
   vOpen(head());
   try { R.text = await textOf('/api/doc?' + q({ ws: R.ws, path: row.path })); R.W = wordsOf(R.text, R.name); if (!hand.name && R.W.title) R.name = R.W.title; } catch (x) { R.err = String((x && x.message) || x); R.W = { title: R.name, sections: [] }; }
   if (R !== me) return me;
@@ -1032,14 +1037,16 @@ const CHECK_MS = 2500;
 /** Read the report again when its file changed on disk (a chat or a draft run wrote it). Stops when another report opens or the panel closes. */
 async function watchFile(me) {
   const stamp = async () => { const j = await Promise.resolve(pmGet('/api/doc-sheet/stamp?' + q({ ws: me.ws, path: me.row.path }))).catch(() => null); return j && j.ok ? j.hash : null; };
-  let seen = await stamp();
+  let seen = await stamp(), pending = false;
   while (R === me) {
     await new Promise((ok) => setTimeout(ok, CHECK_MS));
     if (R !== me) return;
     if (document.hidden || me.edit || me.busy || me.pop || (me.cuts && me.cuts.on === 'sponsors')) continue;   // the sponsors cut is read from the file, not the file
     const h = await stamp();
     if (R !== me || !h) continue;
-    if (seen && h !== seen) { await reread(); if (R === me && !me.edit && !me.pop) { draw(); readReview(); } }
+    // a session writes the draft in many steps: read it when the file has been still for one more check, so a burst of writes is one redraw
+    if (seen && h !== seen) { seen = h; pending = true; continue; }
+    if (pending) { pending = false; await reread(); if (R === me && !me.edit && !me.pop) { me.fromFile = true; draw(); me.fromFile = false; readReview(); } }
     seen = h;
   }
 }

package/workspace/public/pm/premium-report-tab.js

@@ -93,7 +93,7 @@ export function openReportTab(block, o = {}) {
   // itself shows the report as it is
   if (block.id && block.change && !t.passed && (!o.auto || linked) && !PASSED.has(JSON.stringify(block))) { PASSED.add(JSON.stringify(block)); t.passed = true; passChange(t, !!o.auto); return show(t); }
   if (block.id && t.panel === 'current') return current(t);
-  if (block.id && t.panel === 'template') { const v = show(t); loadFlow(t).then(() => { redraw(t); if (!o.auto) makeLook(t); }); return v; }
+  if (block.id && t.panel === 'template') { const v = show(t); loadFlow(t).then(() => { redraw(t); if (!o.auto || linked) makeLook(t); }); return v; }
   return show(t);
 }
 /** The set-up report shown beside the chat `chatKey`, by id, or null (Wawan, 2026-11-04). The chat sends it with each message, so feedback in any
@@ -112,6 +112,13 @@ async function makeLook(t) {
   if (!words || PASSED.has(key) || !t.F || !t.F.ok) return;
   PASSED.add(key);
   const had = t.F.look && t.F.look.newer ? t.F.look.newer.n : null;
+  // the file the PM attached to follow (a deck, a screenshot) is added to the look's samples first (Wawan, 2026-11-04)
+  if (t.block.sample) {
+    const sm = t.block.sample, ext = (sm.split('.').pop() || '').toLowerCase(), name = sm.split('/').pop();
+    const data = KIND_OF[ext] ? await fileB64(sm) : null;
+    const a = data ? await post('/api/report-design/sample', { id: t.block.id, name, kind: KIND_OF[ext], data }) : null;
+    if (!a || !a.ok) { t.msg = 'The look could not read ' + name + (a ? ': ' + why(a, 'no answer') : '') + '. It follows your words only.'; redraw(t); }
+  }
   const r = await post('/api/report-design/turn', { id: t.block.id, text: words, points: [] });
   if (!r || !r.ok) { t.msg = 'The look was not started: ' + why(r, 'the page could not reach PMOS') + '.'; redraw(t); return; }
   t.making = words; redraw(t);
@@ -165,13 +172,32 @@ async function passChange(t, auto) {
   let said;
   if (to.frozen) said = `The ${to.frozen} report is issued, so it is frozen. The change was not passed on: change the template for the next cycle.`;
   else {
+    const since = Date.now() - 5000;
     const r = await post('/api/report-flow/ask', { id: t.block.id, text: t.block.change, ...(to.path ? { path: to.path } : {}) });
+    if (r && r.ok) setTimeout(() => answerOf(t, since), 0);
     const which = to.slot ? `the ${to.slot} draft` : 'the draft';
     said = r && r.ok ? (r.started ? `The report's session started with your change to ${which}. It shows in the report as it writes it. Nothing is issued.` : `Passed to the report's session for ${which}. It shows in the report as it writes it. Nothing is issued.`)
       : 'The change was not passed on: ' + why(r, 'the page could not reach PMOS') + '.';
   }
+  const look = t.block.design ? { kind: 'report', id: t.block.id, design: t.block.design, ...(t.block.sample ? { sample: t.block.sample } : {}) } : null;
   t.block = { kind: 'report', id: t.block.id }; t.passed = false;
-  return current(t, said);
+  const v = await current(t, said);
+  // one answer that asked for the look as well: the look starts its own version, kept with ✓ (the text change went to the session above)
+  if (look) openReportTab(look, { chat: t.chat, auto: true });
+  return v;
+}
+/** The report's session's answer to a change, once it writes one (answer.json, read by GET /api/report-flow): it shows beside the chat, so a
+ *  change the session did not make never looks like it is still drafting (Wawan, 2026-11-04). Reads every few seconds, 15 minutes at most. */
+async function answerOf(t, since) {
+  const end = Date.now() + 15 * 60000;
+  while (Date.now() < end && T.get(t.id) === t) {
+    await new Promise((ok) => setTimeout(ok, POLL_MS * 2));
+    const F = await get('/api/report-flow', { id: t.block.id });
+    if (F && F.ok && F.answer && Date.parse(F.answer.at) >= since) {
+      if (t.panel === 'current') return current(t, 'The report\'s session: ' + F.answer.text);
+      t.msg = 'The report\'s session: ' + F.answer.text; redraw(t); return;
+    }
+  }
 }
 /** The chat's proposal names a report that is set up already (an earlier page, or a reload): open that report instead of the proposal. */
 async function adoptSetUp(id, name) {
@@ -416,7 +442,10 @@ async function press(t, e) {
       if (!r || !r.ok) return 'The template did not change: ' + why(r, 'the page could not reach PMOS') + '.';
       if (body.sections) t.block = Object.assign({}, t.block, { sections: undefined, structure: undefined });
       if (r.state) t.F = r.state; await loadFlow(t);
-      return 'T' + r.n + ' is the current template. The next cycle follows it; the open draft stays as it is, and the earlier cycles keep their look.';
+      const rd = r.redraw;
+      if (rd && /report engine/.test(rd.reason || '')) return 'T' + r.n + ' is the current template. The open ' + (rd.slot ? rd.slot + ' ' : '') + 'draft draws in the new look now; its numbers stay the same. Nothing is issued.';
+      return 'T' + r.n + ' is the current template. ' + (rd && rd.started ? 'The open ' + (rd.slot ? rd.slot + ' ' : '') + 'draft is being redrawn in the new look; its numbers stay the same. Nothing is issued.'
+        : 'The next cycle follows it' + (rd && rd.reason === 'sent' ? '; the open cycle is issued, so it keeps its look.' : '; the open draft stays as it is.') + ' The earlier cycles keep their look.');
     });
     return;
   }
@@ -485,7 +514,7 @@ const KIND_OF = { pdf: 'pdf', pptx: 'pptx', docx: 'docx', png: 'image', jpg: 'im
 /** A workspace file as base64, read through /api/asset. null when it cannot be read. */
 async function fileB64(path) {
   try {
-    const res = await fetch('/api/asset?' + qs({ ws: ws(), path }));
+    const res = await fetch(String(path).startsWith('/') ? '/api/chat-file?' + qs({ path }) : '/api/asset?' + qs({ ws: ws(), path }));
     if (!res.ok) return null;
     const u8 = new Uint8Array(await res.arrayBuffer());
     let bin = ''; for (let i = 0; i < u8.length; i += 0x8000) bin += String.fromCharCode.apply(null, u8.subarray(i, i + 0x8000));