create-pmos 0.528.0 → 0.529.0

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

@@ -40,7 +40,7 @@ import { ownTab, bring, tabUrl } from './rec-tab-core.js';
 import { noteSheet, aboutChoices, aboutBody, aboutNow } from './premium-vw-meet.js';
 import { weekView, noteOfRow, sameMeeting, recordable, prevOf, taskEvent, linkBody, mmss, focusView, replayModel, RECORD_LINE, FOCUS_LINE, STOP_LINE, CONSENT_LINE, recCore } from './premium-meeting.js';
 import { APPS, recall, remember } from './listen-sources.js';
-import { replayView, phoneHtml, editHtml, mentions, phraseOf as phraseOfPage, deskHtml, leftHtml, wx, placesOf, viewTexts, wordFieldHtml } from './premium-mtg-replay.js';
+import { replayView, phoneHtml, editHtml, mentions, phraseOf as phraseOfPage, deskHtml, leftHtml, wx, placesBy, wordPopHtml, posOf, lineAtPos, captionHtml } from './premium-mtg-replay.js';
 import { announce } from './rec-state.js';
 import { presentInRecording } from './cozy-rec-bridge.js';   // while a meeting records, Present goes to the recording tab (batch 12 item 1, rule 10)
 
@@ -298,7 +298,7 @@ const SV = { link: '<path d="M10 14a4 4 0 0 0 6 0l3-3a4 4 0 0 0-6-6l-1 1M14 10a4
   prod: '<path d="M5 20V11M12 20V5M19 20v-6"/>', ticket: '<path d="M4 7h16v4a2 2 0 0 0 0 4v4H4v-4a2 2 0 0 0 0-4z"/>', warn: '<path d="M12 4l9 16H3zM12 10v4M12 17v.01"/>',
   rec: '<circle cx="12" cy="12" r="5"/>', star: '<path d="M12 3.8l2.5 5.2 5.7.8-4.1 4 1 5.7L12 16.8l-5.1 2.7 1-5.7-4.1-4 5.7-.8z"/>',
   img: '<path d="M4 4.5h16v15H4zM9 10a1.6 1.6 0 1 0 0-.01M20 16l-5-5-8 8"/>', up: '<path d="M12 16V4M7 9l5-5 5 5M5 20h14"/>',
-  tab: '<path d="M14 4h6v6M20 4l-8 8M18 14v6H4V6h6"/>', present: '<path d="M3 4h18v12H3zM10 8.5l4 2.5-4 2.5zM8 20h8M12 16v4"/>' };
+  tab: '<path d="M14 4h6v6M20 4l-8 8M18 14v6H4V6h6"/>', present: '<path d="M3 4h18v12H3zM10 8.5l4 2.5-4 2.5zM8 20h8M12 16v4"/>', undo: '<path d="M9 14L4 9l5-5M4 9h9a6 6 0 0 1 0 12h-3"/>' };
 const svg = (k, w, extra) => `<svg aria-hidden="true" width="${w}" height="${w}" viewBox="0 0 24 24"${extra || ''}>${SV[k]}</svg>`;
 /* bars split by weight (live topics): an SVG, so each length is an attribute and not an inline style */
 function weightBar(cls, parts) {
@@ -359,7 +359,8 @@ function agendaHtml(P) {
   return P.agenda.length ? `<div class="vzm-agl">${P.agenda.map((a, i) => `<div class="vz-ag"><i class="vz-num" aria-hidden="true">${a.n}</i><span>${esc(a.text)}</span><button type="button" class="vz-min vz-hv" data-a="min" data-i="${i}" title="Change the minutes for this topic" aria-label="${esc(a.text)}: ${a.min} minutes. Change">${a.min} min</button></div>`).join('')}</div>`
     : '<p class="vz-empty">The invite lists no topics yet.</p>';
 }
-const tagRows = (rows) => rows.map((x) => `<div class="vz-tagrow"><span class="vz-tag" data-k="${x.k}">${esc(x.tag)}</span><span>${esc(x.text)} <small>${esc(x.meta || x.owner || x.src || '')}</small></span></div>`).join('');
+/** Tagged rows (What matters, Since the last one, Facts). W: the word fixes, shown in the words (Facts, batch 27 item 12). */
+const tagRows = (rows, W) => rows.map((x) => `<div class="vz-tagrow"><span class="vz-tag" data-k="${x.k}">${esc(x.tag)}</span><span><span class="vz-said">${W ? wx(W, x.text) : esc(x.text)}</span> <small>${esc(x.meta || x.owner || x.src || '')}</small></span></div>`).join('');
 function readyHtml(P) {
   const h = [P.ready.map((r) => `<div class="vz-ready"><span class="vz-mk" data-k="${r.ok ? 'ok' : 'no'}" aria-hidden="true">${r.ok ? svg('check', 12) : '!'}</span><span><b>${esc(r.label)}</b> <em>${esc(r.text)}</em></span></div>`).join('')];
   if (P.purpose) h.push(`<p class="vz-p"><b>What it is for:</b> ${esc(P.purpose)}</p>`);
@@ -394,32 +395,39 @@ function transcriptHtml(m, ui, lines, seek) {
   return (lines.length ? lines.map((l, i) => lineHtml(l, i, ui, seek, W)).join('') : `<p class="vz-empty">${m.private ? 'This note is private: only what you type is kept.' : m.mk === 'live' ? 'Nothing has been said yet.' : 'Nothing was transcribed.'}</p>`)
     + `<p class="vz-note vz-fine">${esc(LIVE_FOOT)}</p>`;
 }
-function stepHtml(a, ui) {
+function stepHtml(a, ui, W) {
   const made = ui.made && ui.made[a.i];
   const act = a.made ? `<span class="vzm-pill" data-k="${a.ticket ? 'you' : ''}">${esc(a.ticket ? a.made : 'Task')}</span>`
     : `<button type="button" class="vzm-btn vzm-soft" data-a="maketask" data-i="${a.i}">Make task</button><button type="button" class="vzm-ib vz-hv" data-a="makewi" data-i="${a.i}" aria-label="Make it a work-item" title="A ticket Drafted in PMOS, shown on the Board. It goes to Jira only through the Commit gate.">${svg('ticket', 15)}</button>`;
-  return `<div class="vzm-step"><span class="vzm-grow">${esc(a.text)}</span><span class="vzm-mut vzm-sm">${esc(a.meta.replace('No owner · No date', 'No owner, no date'))}</span>${act}</div>`
+  return `<div class="vzm-step"><span class="vzm-grow vz-said">${W ? wx(W, a.text) : esc(a.text)}</span><span class="vzm-mut vzm-sm">${esc(a.meta.replace('No owner · No date', 'No owner, no date'))}</span>${act}</div>`
     + (made ? `<div class="vzm-made" role="status">${svg('check', 14)}<span>${made.html}</span>${made.undo ? `<button type="button" class="vzm-btn vzm-ghost" data-a="madeundo" data-i="${a.i}">Undo</button>` : ''}</div>` : '');
 }
 const decisionsHtml = (N) => N.decisions.map((d) => `<div class="vzm-trow vzm-top"><span class="vzm-grow">${esc(d.text)}</span>${d.why ? `<span class="vzm-mut vzm-sm vzm-why">${esc(d.why)}</span>` : ''}</div>`).join('')
   + IM.meetingLine();   // Your impact (batch 16 item 7, GmA4Moments): one quiet line under the decisions, only while it is on
-/** Names and terms (MvN): the people of the invite, and the words fixed in place (here, and in other meetings: the guesses). */
+/** The texts of the notes a word fix reaches, beyond the replay's own (the summary, Next steps, Facts, the transcript). */
+const ownTexts = (m) => ({ summary: m.notes.summary, steps: m.notes.steps.map((x) => x.text), facts: m.notes.facts.map((x) => x.text), lines: m.notes.lines.map((l) => l.text) });
+/** Names and terms (MvN, MpW2): the words fixed here (heard as, the places, Undo; the ✦ ask to remember it for the next meetings), the
+ * words fixed in other meetings and remembered, and the people of the invite. */
 function namesHtml(m, V) {
-  const row = (name, meta, extra = '') => `<div class="vzm-trow"><span class="vzm-grow"><b>${esc(name)}</b>${meta ? ` <span class="vzm-mut vzm-sm">${esc(meta)}</span>` : ''}</span>${extra}</div>`;
-  const rows = m.people.map((p) => row(p, 'Invite'))
-    .concat(V.W.fix.map((x) => row(x.means, 'heard as “' + x.heard + '” · fixed here', `<button type="button" class="vzm-btn vzm-ghost" data-a="wundo" data-id="${esc(x.id)}">Undo</button>`)))
-    .concat(V.W.guess.map((x) => row(x.means, 'heard as “' + x.heard + '” · fixed in another meeting')));
-  if (!rows.length) return '';
-  return `<p class="vzm-sm vzm-mut">Select a word that was heard wrong in the summary, a quote or the transcript to fix it everywhere. Later notes spell it your way.</p>` + rows.join('');
+  const row = (name, meta, extra = '', cls = '') => `<div class="vzm-trow vzr-trow"><span class="vzm-grow"><b${cls ? ` class="${cls}"` : ''}>${esc(name)}</b>${meta ? ` <span class="vzm-mut vzm-sm">${esc(meta)}</span>` : ''}</span>${extra}</div>`;
+  const T = ownTexts(m);
+  const fixes = V.W.fix.map((x) => { const n = placesBy(V, T, x.heard).n;
+    return row(x.means, 'heard as “' + x.heard + '”' + (n ? ' · ' + (n === 1 ? '1 place' : n + ' places') + ' in this meeting' : '') + (x.keep === 'yes' ? ' · remembered' : ''),
+      `<button type="button" class="vzm-ib vzr-ib" data-a="wundo" data-id="${esc(x.id)}" aria-label="Undo this fix" title="Undo this fix">${svg('undo', 16)}</button>`, 'vzr-fxn')
+      + (x.keep === 'ask' ? `<div class="vzr-ask"><span class="vzr-star" aria-hidden="true">✦</span><span class="vzm-grow">Remember “${esc(x.means)}” for your next meetings? Heard as “${esc(x.heard)}” here.</span>`
+        + `<button type="button" class="vzr-a" data-a="wkeep" data-id="${esc(x.id)}" data-v="0" aria-label="Not now" title="Not now">${svg('x', 15)}</button><button type="button" class="vzr-a y" data-a="wkeep" data-id="${esc(x.id)}" data-v="1" aria-label="Remember it" title="Remember it">${svg('check', 15)}</button></div>` : ''); });
+  const rows = fixes.concat(V.W.guess.map((x) => row(x.means, 'heard as “' + x.heard + '” · fixed in the meeting on ' + (shortDay(x.at) || 'an earlier day').replace(/^(\w+) (\d+)$/, '$2 $1') + ', remembered')))
+    .concat(m.people.map((p) => row(p, 'Invite')));
+  return rows.join('');
 }
 const namesCount = (m, V) => m.people.length + V.W.fix.length + V.W.guess.length;
 /** The one strip under the kept points (MvC): the parts this module owns. Left out is the replay module's own. */
 function stripOf(m, ui) {
   const N = m.notes, P = m.prep, L = m.live, V = N.replay;
   return [
-    N.steps.length ? { k: 'steps', title: 'Next steps', n: String(N.stepsSub && /proposed/.test(N.stepsSub) ? N.stepsSub : N.steps.length), html: N.steps.map((a) => stepHtml(a, ui)).join('') } : null,
+    N.steps.length ? { k: 'steps', title: 'Next steps', n: String(N.stepsSub && /proposed/.test(N.stepsSub) ? N.stepsSub : N.steps.length), html: N.steps.map((a) => stepHtml(a, ui, V.W)).join('') } : null,
     N.since ? { k: 'since', title: 'Since the last one', n: String(N.since.rows.length), html: tagRows(N.since.rows) } : null,
-    N.facts.length ? { k: 'facts', title: 'Facts mentioned', n: String(N.facts.length), html: tagRows(N.facts) } : null,
+    N.facts.length ? { k: 'facts', title: 'Facts mentioned', n: String(N.facts.length), html: tagRows(N.facts, V.W) } : null,
     namesCount(m, V) ? { k: 'names', title: 'Names and terms', n: String(namesCount(m, V)), html: namesHtml(m, V) } : null,
     { k: 'prep', title: 'Prep and material', n: m.material.length ? String(m.material.length) : '', html: (P.agenda.length ? agendaHtml(P) : '') + materialHtml(m.material, ui) },
     { k: 'tr', title: 'Transcript', n: N.lines.length ? plural(N.lines.length, 'line') : '', html: `<p class="vzm-lbl">Your notes</p>${mineHtml(L)}${L.hl.length ? '<p class="vzm-lbl">Highlights</p>' + hlHtml(L) : ''}<p class="vzm-lbl">${esc(N.trTitle)}</p>${transcriptHtml(m, ui, N.lines, true)}` },
@@ -450,9 +458,9 @@ export function sectionsOf(m, ui = {}) {
     ];
   }
   const V = N.replay;
-  const steps = N.steps.length ? { id: 'steps', title: 'Next steps', count: N.stepsSub || N.steps.length, open: !V, html: N.steps.map((a) => stepHtml(a, ui)).join('') } : null;
+  const steps = N.steps.length ? { id: 'steps', title: 'Next steps', count: N.stepsSub || N.steps.length, open: !V, html: N.steps.map((a) => stepHtml(a, ui, V && V.W)).join('') } : null;
   const since = N.since ? { id: 'since', title: 'Since the last one', count: N.since.sub, html: tagRows(N.since.rows) } : null;
-  const facts = N.facts.length ? { id: 'facts', title: 'Facts mentioned', count: N.facts.length, html: tagRows(N.facts) } : null;
+  const facts = N.facts.length ? { id: 'facts', title: 'Facts mentioned', count: N.facts.length, html: tagRows(N.facts, V && V.W) } : null;
   const prep = { id: 'prep', title: 'Prep and material', count: m.material.length ? plural(m.material.length, 'item') : '', html: (P.agenda.length ? agendaHtml(P) : '') + materialHtml(m.material, ui) };
   const tr = { id: 'tr', title: 'Transcript', count: N.lines.length ? plural(N.lines.length, 'line') : '', html: `<p class="vzm-lbl">Your notes</p>${mineHtml(L)}${L.hl.length ? '<p class="vzm-lbl">Highlights</p>' + hlHtml(L) : ''}<p class="vzm-lbl">${esc(N.trTitle)}</p>${transcriptHtml(m, ui, N.lines, !!V)}` };
   if (V) {   // the phone: the phone's Replay lists the points; Left out and the rest fold below it
@@ -477,11 +485,12 @@ export function meetHtml(m, ui = {}) {
   for (const g of m.gaps) h.push(`<div class="vzm-warn vzm-sm"><span class="vzm-grow">${g.kind === 'off' ? '<b>Earlier:</b> ' + esc(g.text.replace(/^Earlier: /, '')) : esc(g.text)}</span>${g.kind === 'quiet' ? '<button type="button" class="vzm-btn vzm-card" data-a="src">Listen to another app</button>' : ''}</div>`);
   if (ui.src && m.mk === 'live') h.push(appsHtml(m.live));
   if (ui.why) h.push(`<div class="vz-why" role="note"><p>${esc(RECORD_LINE)}</p><p>${esc(FOCUS_LINE)}</p></div>`);
-  if (ui.msg) h.push(`<p class="vz-msg" role="status" data-tone="${ui.msg.tone || ''}"><span>${esc(ui.msg.text)}</span>${ui.msg.undo ? '<button type="button" class="vz-link vz-hv" data-a="msgundo">Undo</button>' : ''}</p>`);
+  if (ui.msg && !ui.msg.toast) h.push(`<p class="vz-msg" role="status" data-tone="${ui.msg.tone || ''}"><span>${esc(ui.msg.text)}</span>${ui.msg.undo ? '<button type="button" class="vz-link vz-hv" data-a="msgundo">Undo</button>' : ''}</p>`);
   const V = m.mk === 'notes' ? m.notes.replay : null;
   if (V) {   // a recording (MvC): the desk is the two columns and the docked timeline; the phone keeps its Replay and the folds
-    h.push(deskHtml(V, ui, { summary: summaryHtml(m, ui), strip: stripOf(m, ui) }));
+    h.push(deskHtml(V, ui, { summary: summaryHtml(m, ui), strip: stripOf(m, ui), hint: !!ui.hint }));
     h.push(`<div class="vzp vzp-card vzp-mb">${phoneHtml(V, ui)}</div><div class="vzr-mbonly">${czSections(sectionsOf(m, ui), { key: 'meeting-' + m.mk })}</div>`);
+    if (ui.msg && ui.msg.toast) h.push(`<div class="vzr-toastw"><p class="vzr-toast" role="status"><span>${esc(ui.msg.text)}</span>${ui.msg.undo ? '<button type="button" data-a="msgundo">Undo</button>' : ''}</p></div>`);
     return `<div class="vzr-mbonly">${summaryHtml(m, ui)}</div><div class="vz vz-mtg vz-rec" data-mk="${m.mk}">${h.join('')}</div>`;
   }
   h.push(czSections(sectionsOf(m, ui), { key: 'meeting-' + m.mk }));
@@ -559,7 +568,7 @@ export async function openMeeting(ref, o = {}) {
   mtgStyle();
   if (!IM.cached()) IM.readWeek().catch(() => {});   // the meeting moment's switch, read once a page
   const R = refOf(ref);
-  const me = { R, ws: o.ws || new URLSearchParams(location.search).get('ws') || '', ui: { sel: new Set(), made: {} }, D: null, n: null, row: null, alive: true, timers: [], play: null };
+  const me = { R, ws: o.ws || new URLSearchParams(location.search).get('ws') || '', ui: { sel: new Set(), made: {}, hint: hintOn() }, D: null, n: null, row: null, alive: true, timers: [], play: null };
   if (MT) { MT.alive = false; MT.timers.forEach(clearInterval); stopPlay(MT); }
   MT = me;
   const id = 'meeting:' + (R.note || R.event || R.title || 'new');
@@ -706,14 +715,17 @@ function paint(me, body) {
   const line = body.querySelector('.czs-sum .czs-line > span:not(.czs-dot):not(.czs-r)'); if (line) line.dataset.clk = 'state';
   if (me.ui.edit) { const ta = body.querySelector('.vzp-ed [data-a="etext"]'); if (ta && me.ui.focusEdit) { me.ui.focusEdit = false; ta.focus(); ta.setSelectionRange(ta.value.length, ta.value.length); } }
   placePop(me, body);
-  body.querySelectorAll('.vzp-top[data-w]').forEach((b) => b.style.setProperty('flex-grow', b.dataset.w));   // the topic names under the strip, as wide as their stretch
+  crop(body);
+  hoverBar(me, body);
   body.onclick = (e) => press(me, e);
   body.onchange = (e) => change(me, e);
   // the file picker stays open for seconds while the card may draw again; the input's own handler still runs when it was replaced meanwhile
   body.querySelectorAll('input[type="file"][data-a="matfile"]').forEach((i) => { i.onchange = (e) => { e.stopPropagation(); change(me, e); }; });
   body.oninput = (e) => input(me, e);
   body.onkeydown = (e) => keydown(me, e, body);
-  body.onmouseup = () => { if (me.model && me.model.notes.replay) setTimeout(() => { if (MT === me) selectWord(me); }, 0); };   // a word selected to fix (MvF)
+  body.onmouseup = (e) => { if (me.model && me.model.notes.replay && !e.target.closest('.vzr-wpop')) setTimeout(() => { if (MT === me) selectWord(me); }, 0); };   // a word selected to fix (MvF)
+  body.ondblclick = (e) => { if (me.model && me.model.notes.replay && !e.target.closest('.vzr-wpop, input, textarea, button')) wordAt(me, e); };   // a word double-clicked (MpW1)
+  if (me.ui.wpop) placeWordPop(me, body);
 }
 /** The open popover goes in its anchor, drawn once per paint (its list is redrawn on its own while the PM types). */
 function placePop(me, body) {
@@ -727,8 +739,10 @@ function keydown(me, e, body) {
   if (e.key === 'Enter' && a === 'namein') { e.preventDefault(); nameIt(me, +e.target.dataset.i, e.target.value); }
   if (e.key === 'Enter' && a === 'minin') { e.preventDefault(); setMin(me, +e.target.dataset.i, e.target.value); }
   if (e.key === 'Enter' && a === 'matlink') { e.preventDefault(); addLink(me, e.target.value); }
-  if (a === 'wfin' && e.key === 'Enter') { e.preventDefault(); const f = e.target.closest('.vzr-fe'); if (f) fixWord(me, f.dataset.w, e.target.value); }
-  if (a === 'wfin' && e.key === 'Escape') { e.preventDefault(); e.stopPropagation(); paint(me, body); }
+  if (a === 'wfin' && e.key === 'Enter') { e.preventDefault(); const f = e.target.closest('.vzr-wpop'); if (f) fixWord(me, f.dataset.w, e.target.value); }
+  if (e.key === 'Escape' && me.ui.wpop) { e.preventDefault(); e.stopPropagation(); me.ui.wpop = null; paint(me, body); return; }
+  if (e.key === 'Escape' && me.ui.chaps) { e.stopPropagation(); me.ui.chaps = false; paint(me, body); return; }
+  if (a === 'psel' && (e.key === 'Enter' || e.key === ' ')) { e.preventDefault(); selectPoint(me, e.target.dataset.id); return; }
   if (e.key === 'Escape' && me.ui.naming != null) { me.ui.naming = null; paint(me, body); }
   if (e.key === 'Escape' && me.ui.pop) { e.stopPropagation(); me.ui.pop = ''; paint(me, body); }
   if (a === 'seek' && (e.key === 'ArrowRight' || e.key === 'ArrowLeft')) { e.preventDefault(); const P = ensurePlay(me); if (P) seek(me, P.pos + (e.key === 'ArrowRight' ? 10000 : -10000), false); }
@@ -750,6 +764,8 @@ function tick(me) {
 async function press(me, e) {
   const pa = e.target.closest('[data-czs-act]');   // the summary's one primary
   const t = pa || e.target.closest('[data-a]');
+  if (me.ui.wpop && !e.target.closest('.vzr-wpop')) { me.ui.wpop = null; repaint(me); if (!t || t.dataset.a === 'psel') return; }   // a press outside the word fix closes it
+  if (me.ui.chaps && !e.target.closest('.vzr-chs, [data-a="chaps"]')) { me.ui.chaps = false; if (!t) return repaint(me); }
   if (!t) { if (me.ui.pop && !e.target.closest('.vzm-pop')) { me.ui.pop = ''; repaint(me); } return; }
   if (t.disabled) return;
   const a = pa ? pa.dataset.czsAct : t.dataset.a, ui = me.ui, m = me.model, C = rec();
@@ -801,13 +817,18 @@ async function press(me, e) {
     /* Replay */
     case 'play': return togglePlay(me);
     case 'speed': { const P = ensurePlay(me); const sp = [1, 1.5, 2]; ui.speed = sp[(sp.indexOf(ui.speed || 1) + 1) % sp.length]; if (P && P.aud) P.aud.playbackRate = ui.speed; return repaint(me); }
+    case 'skip': { const P = ensurePlay(me); if (P) seek(me, posOf(m.notes.replay, ui) + Number(t.dataset.d || 0), false); return; }
+    case 'chprev': case 'chnext': return stepChapter(me, a === 'chnext' ? 1 : -1);
+    case 'chgo': ui.chaps = false; return seek(me, +t.dataset.t, true);
+    case 'chaps': ui.chaps = !ui.chaps; return repaint(me);
+    case 'caps': ui.caps = !ui.caps; return repaint(me);
     case 'seekto': if (t.dataset.t !== '') return seek(me, +t.dataset.t, true); return;
     case 'trseek': { seek(me, +t.dataset.t, true); const c = bodyEl() && bodyEl().querySelector('.vzp-card'); if (c && c.scrollIntoView) c.scrollIntoView({ block: 'nearest' }); return; }
     case 'seek': { const r = t.getBoundingClientRect(); return seek(me, Math.max(0, Math.min(1, (e.clientX - r.left) / r.width)) * m.notes.replay.len, false); }
-    case 'shotbig': if (m.notes.replay && m.notes.replay.noteId) window.open('/api/notes/screen?id=' + encodeURIComponent(m.notes.replay.noteId) + '&t=' + t.dataset.t, '_blank', 'noopener'); return;
+    case 'shotbig': if (m.notes.replay && m.notes.replay.noteId) window.open('/api/notes/screen?id=' + encodeURIComponent(m.notes.replay.noteId) + '&t=' + t.dataset.t, '_blank', 'noopener'); return;   // the whole frame, uncropped
     case 'leftout': ui.leftOpen = !ui.leftOpen; return repaint(me);
     /* the recording view (MvC): select a point, play it, confirm it, the strip, the filmstrip, the summary */
-    case 'psel': return selectPoint(me, t.dataset.id);
+    case 'psel': { const sl = window.getSelection && window.getSelection(); if (sl && !sl.isCollapsed && t.contains(sl.anchorNode)) return; return selectPoint(me, t.dataset.id); }   // a selection there is a word to fix, not a press
     case 'pplay': return seek(me, +t.dataset.t, true);
     case 'pconf': { const ids = String(t.dataset.ids || '').split(',').filter(Boolean), on = t.getAttribute('aria-pressed') === 'true'; return verdict(me, ids, on ? null : 'confirmed', on ? 'No longer confirmed.' : ids.length > 1 ? 'Confirmed, with its follow-up.' : 'Confirmed.'); }
     case 'pwrong': ui.edit = null; ui.draft = null; return verdict(me, [t.dataset.id], 'wrong', 'Moved to Left out.', true);
@@ -815,9 +836,11 @@ async function press(me, e) {
     case 'allshots': ui.allShots = !ui.allShots; return repaint(me);
     case 'sumall': ui.sumAll = !ui.sumAll; return repaint(me);
     /* a word fixed in place (MvF) */
-    case 'wfix': return openWordField(me, t, t.dataset.w, t.dataset.g);
-    case 'wfok': { const f = t.closest('.vzr-fe'), i = f && f.querySelector('input'); return f ? fixWord(me, f.dataset.w, i ? i.value : '') : null; }
+    case 'wfix': return openWordPop(me, t, t.dataset.w, { means: t.dataset.g, from: ['fix'], alts: [] });
+    case 'wfok': { const f = t.closest('.vzr-wpop'), i = f && f.querySelector('input'); return f ? fixWord(me, f.dataset.w, i ? i.value : '') : null; }
+    case 'walt': { const f = t.closest('.vzr-wpop'), i = f && f.querySelector('input'); if (i) { i.value = t.dataset.v; i.focus(); } if (f) f.querySelectorAll('[data-a="walt"]').forEach((b) => b.setAttribute('aria-pressed', String(b === t))); return; }
     case 'wundo': return forgetWord(me, t.dataset.id);
+    case 'wkeep': return keepWord(me, t.dataset.id, t.dataset.v === '1');
     case 'confirmall': return bulk(me, 'confirmed', m.notes.replay.points.filter((p) => !p.verdict).map((p) => p.id));
     case 'unwrong': return verdict(me, [t.dataset.id], null, 'It is back in the kept points.');
     case 'ptask': return bulk(me, 'task', [t.dataset.id]);
@@ -846,46 +869,142 @@ function selectPoint(me, id) {
   if (p.t != null) { const P = ensurePlay(me); if (P) { P.pos = Math.max(0, Math.min(V.len, p.t)); if (P.aud) { try { P.aud.currentTime = P.pos / 1000; } catch { /* not loaded */ } } ui.pos = P.pos; me.shotNow = V.shotAt(P.pos); } }
   repaint(me);
 }
-/* ── a word fixed in place (MvF): the texts it reaches, the field, the fix, Undo ── */
-function wordTexts(me) {
-  const m = me.model, V = m && m.notes.replay; if (!V) return [];
-  return viewTexts(V).concat([m.notes.summary], m.notes.lines.map((l) => l.text));
-}
-function openWordField(me, node, heard, guess) {
-  const w = String(heard || '').trim(); if (!w || !me.n) return;
-  const n = placesOf(wordTexts(me), w);
-  const box = document.createElement('span'); box.innerHTML = wordFieldHtml(w, guess || w, n);
-  const f = box.firstElementChild;
-  if (node.nodeType === 1) node.replaceWith(f); else return;
-  const i = f.querySelector('input'); if (i) { i.focus(); i.select(); }
-}
-/** A selection in the summary, a quote, Left out or the transcript (one to four words): it becomes the field. */
+/* ── a word fixed in place (MvF; batch 27 word fix A, MpW1/MpW2): the popup, the ✦ spelling, the fix, Undo, the ✦ ask to remember it ── */
+/** Where a selection may be a word to fix: every text of the notes the page draws (the kept points, their follow-ups, the caption, the
+ * summary, Next steps, Facts, Left out, the chapter names, the transcript). */
+const WORD_ZONES = '.czs-p, .vzp-kt, .vzr-fu .vzr-grow, .vzr-cap, .vzr-nt b, .vzr-chr b, .vz-said, .vzp-lr > span, .vzm-step .vzm-grow';
+const WORD_OK = /^[\p{L}\p{N}][\p{L}\p{N} .'&+-]*$/u;
+const textsFor = (me) => ownTexts(me.model);
+/** The popup for heard words at a node: it opens at once with the places; the ✦ spelling is asked for and shown when it comes. */
+function openWordPop(me, node, heard, sug) {
+  const w = String(heard || '').trim(), V = me.model && me.model.notes.replay; if (!w || !me.n || !V) return;
+  const r = node && node.getBoundingClientRect ? node.getBoundingClientRect() : null;
+  me.ui.wpop = { heard: w, sug: sug && sug.means ? sug : null, P: placesBy(V, textsFor(me), w), rect: r ? { left: r.left, top: r.top, bottom: r.bottom, width: r.width } : null };
+  const b = bodyEl(); if (b) placeWordPop(me, b);
+  if (!me.ui.wpop.sug) askSpelling(me, w);
+}
+function placeWordPop(me, body) {
+  const W = me.ui.wpop; if (!W) return;
+  let el = body.querySelector('.vzr-wpop');
+  const box = document.createElement('div'); box.innerHTML = wordPopHtml(W.heard, W.sug, W.P);
+  const fresh = box.firstElementChild;
+  if (el) el.replaceWith(fresh); else body.append(fresh);
+  el = fresh;
+  const phone = window.matchMedia && window.matchMedia('(max-width: 640px)').matches;
+  el.classList.toggle('sheet', !!phone);
+  if (!phone && W.rect) {   // under the words, its arrow at their start; above them when there is no room below
+    const vw = window.innerWidth, vh = window.innerHeight, w = Math.min(380, vw - 24);
+    const left = Math.max(12, Math.min(vw - w - 12, W.rect.left - 26));
+    el.style.setProperty('width', w + 'px'); el.style.setProperty('left', left + 'px');
+    const below = W.rect.bottom + 10, h = el.offsetHeight || 260;
+    if (below + h > vh - 12 && W.rect.top - h - 10 > 12) { el.style.setProperty('top', (W.rect.top - h - 10) + 'px'); el.classList.add('up'); } else el.style.setProperty('top', below + 'px');
+    el.style.setProperty('--arr', Math.max(16, Math.min(w - 28, W.rect.left - left + 8)) + 'px');
+  }
+  const i = el.querySelector('input'); if (i && document.activeElement !== i) { i.focus(); i.select(); }
+}
+async function askSpelling(me, heard) {
+  const m = me.model, F = me.D && me.D.F, mats = (m && m.material) || [];
+  const invite = [m.title].concat((m.prep.agenda || []).map((a) => a.text), (F && Array.isArray(F.topics) ? F.topics.map((t) => t.text) : []), mats.map((x) => x.title)).filter(Boolean).slice(0, 40);
+  const qs = new URLSearchParams({ note: me.n.id, heard });
+  invite.forEach((t) => qs.append('invite', t)); (m.people || []).slice(0, 40).forEach((p) => qs.append('people', p));
+  const r = await pmGet('/api/meeting-points/suggest?' + qs.toString());
+  const W = me.ui.wpop; if (MT !== me || !W || W.heard !== heard || !r || !r.ok || !r.suggest) return;   // nothing found: no ✦ line (zero is silence)
+  const b = bodyEl(), i = b && b.querySelector('.vzr-wpop input');
+  if (i && i.value.trim() !== heard) return;   // the PM is already typing a fix
+  W.sug = r.suggest; if (b) placeWordPop(me, b);
+}
+/** A selection of one to four words in the notes: the words stay marked and the popup opens under them. */
 function selectWord(me) {
   const sel = window.getSelection && window.getSelection(); if (!sel || sel.isCollapsed || !sel.rangeCount || me.ui.edit) return;
   const r = sel.getRangeAt(0), tn = r.startContainer;
-  if (tn !== r.endContainer || tn.nodeType !== 3 || !tn.parentElement || !tn.parentElement.closest('.czs-p, .vzr-q, .vz-said, .vzp-lr > span')) return;
+  if (tn !== r.endContainer || tn.nodeType !== 3 || !tn.parentElement || !tn.parentElement.closest(WORD_ZONES) || tn.parentElement.closest('.vzr-wpop')) return;
+  markWord(me, r, tn, sel);
+}
+/** A word double-clicked: the word under the pointer, found again after the press drew the card (the double-click's own selection is gone). */
+function wordAt(me, e) {
+  let r = null;
+  if (document.caretRangeFromPoint) r = document.caretRangeFromPoint(e.clientX, e.clientY);
+  else if (document.caretPositionFromPoint) { const c = document.caretPositionFromPoint(e.clientX, e.clientY); if (c) { r = document.createRange(); r.setStart(c.offsetNode, c.offset); } }
+  const tn = r && r.startContainer; if (!tn || tn.nodeType !== 3 || !tn.parentElement || !tn.parentElement.closest(WORD_ZONES)) return;
+  const t = tn.textContent, i = r.startOffset; let a = i, z = i;
+  while (a > 0 && /[\p{L}\p{N}'-]/u.test(t[a - 1])) a--;
+  while (z < t.length && /[\p{L}\p{N}'-]/u.test(t[z])) z++;
+  if (z <= a) return;
+  const rg = document.createRange(); rg.setStart(tn, a); rg.setEnd(tn, z);
+  markWord(me, rg, tn, window.getSelection && window.getSelection());
+}
+function markWord(me, r, tn, sel) {
   const raw = r.toString(), w = raw.trim();
-  if (!w || w.length > 60 || w.split(/\s+/).length > 4 || !/^[\p{L}\p{N}][\p{L}\p{N} .'&+-]*$/u.test(w)) return;
+  if (!w || w.length > 60 || w.split(/\s+/).length > 4 || !WORD_OK.test(w)) return;
   const lead = raw.length - raw.trimStart().length, trail = raw.length - raw.trimEnd().length;
   if (lead) r.setStart(tn, r.startOffset + lead); if (trail) r.setEnd(tn, r.endOffset - trail);
-  const mark = document.createElement('span'); r.deleteContents(); r.insertNode(mark); sel.removeAllRanges();
-  openWordField(me, mark, w, w);
+  const mark = document.createElement('span'); mark.className = 'vzr-selw'; r.surroundContents(mark); if (sel) sel.removeAllRanges();
+  const fx = mark.closest('.vzr-fx');
+  openWordPop(me, mark, fx && fx.dataset.w ? fx.dataset.w : w, null);
 }
 async function fixWord(me, heard, means) {
   const w = String(heard || '').trim(), to = String(means || '').replace(/\s+/g, ' ').trim();
+  me.ui.wpop = null;
   if (!w || !to || to === w || !me.n) return repaint(me);
-  const places = placesOf(wordTexts(me), w);
+  const V = me.model.notes.replay, places = placesBy(V, textsFor(me), w).n;
   const r = await pmPost('/api/meeting-points/term', { note: me.n.id, heard: w, means: to });
   if (!r || !r.ok) return say(me, 'Not fixed: ' + ((r && r.error) || 'no answer'), 'bad');
-  me.D.terms = r.terms || me.D.terms; draw(me);
-  say(me, (places > 1 ? 'Fixed in ' + places + ' places' : 'Fixed') + '. Later notes spell it “' + to + '”.', '', async () => forgetWord(me, r.term && r.term.id, true));
+  me.D.terms = r.terms || me.D.terms; me.ui.strip = 'names';   // the word lands in Names and terms, with the ✦ ask (MpW2)
+  hintSeen(me);
+  draw(me);
+  toastSay(me, places > 1 ? 'Fixed in ' + places + ' places' : 'Fixed', async () => forgetWord(me, r.term && r.term.id, true));
 }
 async function forgetWord(me, id, undo) {
   if (!id) return;
   const f = await pmPost('/api/meeting-points/forget', { lesson: id });
   if (!f || !f.ok) return say(me, 'Not undone: ' + ((f && f.error) || 'no answer'), 'bad');
   me.D.terms = (me.D.terms || []).filter((x) => x.id !== id); draw(me);
-  say(me, undo ? 'Undone. The word shows as it was heard.' : 'The fix is gone. The word shows as it was heard.');
+  toastSay(me, undo ? 'Undone. The words show as they were heard.' : 'The fix is gone. The words show as they were heard.');
+}
+/** The ✦ ask: ✓ remembers the fix for the next meetings, ✕ keeps it in this meeting only. */
+async function keepWord(me, id, yes) {
+  const r = await pmPost('/api/meeting-points/keep', { lesson: id, keep: yes });
+  if (!r || !r.ok) return say(me, 'Not saved: ' + ((r && r.error) || 'no answer'), 'bad');
+  me.D.terms = r.terms || me.D.terms; draw(me);
+  toastSay(me, yes ? 'Remembered. Your next meetings spell it “' + (r.term ? r.term.means : '') + '”.' : 'Kept for this meeting only.');
+}
+/** The word fix's message is a toast at the bottom of the card (MpW2), with Undo when there is one. */
+function toastSay(me, text, undo) { me.ui.msg = { text, undo, toast: true }; repaint(me); clearTimeout(me.msgT); me.msgT = setTimeout(() => { if (me.ui.msg && me.ui.msg.text === text) { me.ui.msg = null; repaint(me); } }, 8000); }
+/** The one-time hint under the kept points, "Select a word …": shown until the first fix, then never again on this machine. */
+const HINT_KEY = 'pmos.mtg.wordHint';
+function hintSeen(me) { me.ui.hint = false; try { localStorage.setItem(HINT_KEY, '1'); } catch { /* no storage: it shows again next time */ } }
+const hintOn = () => { try { return localStorage.getItem(HINT_KEY) !== '1'; } catch { return false; } };
+/** A capture Jev boxed shows only its box (MpJ): the image is scaled and moved inside its frame so the box fills it. */
+function crop(body) {
+  body.querySelectorAll('img[data-box]').forEach((im) => {
+    const [x, y, w, h] = im.dataset.box.split(',').map(Number), [fw, fh] = String(im.dataset.wh || '16,9').split(',').map(Number);
+    if (![x, y, w, h].every(Number.isFinite) || !(w > 0) || !(h > 0)) return;
+    const fr = im.closest('.vzr-crop'); if (fr) { const ar = String((w * (fw || 16)) / (h * (fh || 9))); fr.classList.add('boxed'); fr.style.setProperty('aspect-ratio', ar); fr.style.setProperty('--ar', ar); }
+    im.style.setProperty('width', (100 / w) + '%'); im.style.setProperty('height', (100 / h) + '%');
+    im.style.setProperty('left', (-x / w * 100) + '%'); im.style.setProperty('top', (-y / h * 100) + '%');
+  });
+}
+/** Hovering the bar (MpD1): a small preview of the capture there, the chapter's name and the time. */
+function hoverBar(me, body) {
+  const bar = body.querySelector('.vzr-np:not(.vzr-ph1) .vzr-bar') || null, V = me.model && me.model.notes.replay; if (!bar || !V) return;
+  const hov = bar.parentElement.querySelector('.vzr-hov'); if (!hov) return;
+  bar.onmousemove = (e) => {
+    const r = bar.getBoundingClientRect(), f = Math.max(0, Math.min(1, (e.clientX - r.left) / r.width)), t = f * V.len, ci = V.chapterAt(t), si = V.shotAt(t);
+    const st = ci >= 0 ? V.strip[ci] : null, sh = si >= 0 ? V.shots[si] : null;
+    hov.querySelector('b').textContent = st ? st.text : ''; hov.querySelector('small').textContent = mmss(t);
+    const th = hov.querySelector('.vzr-hth');
+    if (sh && V.noteId) { if (th.dataset.t !== String(sh.t)) { th.dataset.t = String(sh.t); th.innerHTML = `<span class="vzr-crop"><img src="/api/notes/screen?id=${encodeURIComponent(V.noteId)}&amp;t=${sh.t}" alt=""${sh.box ? ` data-box="${sh.box.join(',')}" data-wh="${sh.w || 16},${sh.h || 9}"` : ''}></span>`; crop(th); } th.hidden = false; } else th.hidden = true;
+    hov.hidden = false;
+    const w = hov.offsetWidth || 160; hov.style.setProperty('left', Math.max(0, Math.min(r.width - w, e.clientX - r.left - w / 2)) + 'px');
+  };
+  bar.onmouseleave = () => { hov.hidden = true; };
+}
+/** ‹ and ›: the start of the chapter before or after; ‹ goes back to the start of this one first when more than 3 s of it played. */
+function stepChapter(me, d) {
+  const V = me.model && me.model.notes.replay; if (!V || !V.strip.length) return;
+  const pos = posOf(V, me.ui), ci = V.chapterAt(pos);
+  const to = d > 0 ? V.strip[Math.min(V.strip.length - 1, ci + 1)] : pos - V.strip[ci].from > 3000 ? V.strip[ci] : V.strip[Math.max(0, ci - 1)];
+  seek(me, to.from, false);
 }
 /** Opens the correction of one kept point where the PM pressed it: "In this part" or the All kept fold. */
 function startEdit(me, id, where) {
@@ -1062,11 +1181,15 @@ function ensurePlay(me) {
 function playUi(me) {
   const P = me.play, T = me.model.notes.replay; me.ui.pos = P.pos; me.ui.playing = P.on;
   const b = bodyEl(); if (!b) return;
-  const sh = T.shotAt(P.pos);
-  if (sh !== me.shotNow || P.on !== me.wasOn) { me.shotNow = sh; me.wasOn = P.on; return repaint(me); }   // a new capture or Play/Pause: draw the tab again
-  b.querySelectorAll('[data-clk="head"]').forEach((h) => h.setAttribute('x', Math.min(100, P.pos / T.len * 100).toFixed(2) + '%'));   // an SVG attribute: where the replay is
+  const sh = T.shotAt(P.pos), ch = T.chapterAt(P.pos);
+  // a new capture, a new chapter or Play/Pause: draw the card again (not while the word fix is open: it would close it)
+  if ((sh !== me.shotNow || ch !== me.chapNow || P.on !== me.wasOn) && !me.ui.wpop) { me.shotNow = sh; me.chapNow = ch; me.wasOn = P.on; me.lineNow = lineAtPos(T, P.pos); return repaint(me); }
+  const at = Math.min(100, P.pos / T.len * 100);
+  b.querySelectorAll('[data-clk="head"]').forEach((h) => h.setAttribute('x', at.toFixed(2) + '%'));   // an SVG attribute: where the replay is
+  b.querySelectorAll('[data-clk="prog"]').forEach((r) => r.setAttribute('width', Math.max(0, Math.min(+r.dataset.w, at - +r.dataset.x)).toFixed(2) + '%'));
   b.querySelectorAll('[data-clk="pos"]').forEach((p) => { p.textContent = mmss(P.pos); });
-  b.querySelectorAll('.vzp-top').forEach((x) => { const on = T.stretchAt(P.pos) && +x.dataset.t === T.stretchAt(P.pos).from; if (on) x.setAttribute('aria-current', 'true'); else x.removeAttribute('aria-current'); });
+  const li = lineAtPos(T, P.pos);   // the caption follows the line now, as lyrics do
+  if (li !== me.lineNow) { me.lineNow = li; b.querySelectorAll('[data-pl="cap"]').forEach((c) => { c.innerHTML = captionHtml(T, P.pos); }); }
 }
 function togglePlay(me) {
   const P = ensurePlay(me); if (!P) return;

package/workspace/public/pm/report-chat.js

@@ -66,6 +66,7 @@ export function cleanBlock(b) {
     if (b.schedule !== undefined) { const s = cleanSchedule(b.schedule); if (s) out.schedule = s; }
     for (const k of ['structure', 'design', 'change']) { const v = clip(b[k], 600); if (v) out[k] = v; }
     const secs = cleanSections(b.sections); if (secs) out.sections = secs;
+    const sm = out.design ? cleanSample(b.sample) : null; if (sm) out.sample = sm;   // the file a look change follows (a deck, a screenshot)
     return out;
   }
   const p = b.proposal && typeof b.proposal === 'object' ? b.proposal : null;

package/workspace/public/pm/report-flow.js

@@ -37,8 +37,9 @@ export function chatOf(st = {}, id = '') {
     intro: 'Tell me what to change in ' + name + '. I pass it to the report\'s own session, and the draft beside us changes. Nothing is issued.',
     placeholder: 'Change the report',
     context: { title: name, subject: 'A report set up in PMOS (report id ' + id + ')' + (settings ? ': ' + settings : ''),
-      say: 'When the PM asks to change the draft, answer in a few lines and end with ONE fenced code block with the language tag pmos-report holding {"kind":"report","id":"' + id
-        + '","change":"the change, in the PM\'s words, complete"}. PMOS passes it to the report\'s own session as your answer lands, and the draft beside the chat changes; say so in one line. Do not change the draft yourself. The format, readers, schedule, look and sources change with the template icon in the report\'s header.',
+      say: 'A change to the draft text (a date, a status, a wording): end with ONE pmos-report block {"kind":"report","id":"' + id
+        + '","change":"the change, complete"}; it passes by itself. A look change (palette, tables, Gantt, a file to follow): {"kind":"report","id":"' + id
+        + '","design":"the look","sample":"<attached path>"}; the next look starts, and when the PM keeps it the draft is redrawn. Say which in one line.',
       facts: [['Report id', id]].concat(draft ? [['Latest draft', draft]] : []), files: draft ? [draft] : [] } };
 }
 
@@ -228,7 +229,10 @@ export function waitHtml(F = {}, face = '') {
   const d = F.drafting;
   if (d && d.state === 'held') return `<div class="rf-wait">${face}<p><b>The draft waits for a check of ${esc((d.sources || []).join(', '))}.</b><span>It starts by itself when the check passes.</span></p></div>`;
   if (d && d.state === 'ended') return `<div class="rf-wait" data-k="bad">${face}<p><b>The drafting session ended before a draft was written.</b><span>${esc(d.reason || '')}</span></p><button type="button" class="rf-ib pri vz-hv" data-rt="redraft" aria-label="Draft it again" title="Draft it again">${SV(ICON.go)}</button></div>`;
-  if ((d && d.state === 'drafting') || (F.session && F.session.alive)) return `<div class="rf-wait" role="status">${face}<p><b>The report's own session is drafting it.</b><span>It opens here when it lands. Keep talking to Claude in the chat.</span></p></div>`;
+  if (d && d.state === 'drafting') return `<div class="rf-wait" role="status">${face}<p><b>The report's own session is drafting it.</b><span>It opens here when it lands. Keep talking to Claude in the chat.</span></p></div>`;
+  // an open session is not a draft being written (Wawan, 2026-11-04: "drafting it" stayed after the session declined): say what it is doing
+  if (F.asking) return `<div class="rf-wait" role="status">${face}<p><b>Your change is with the report's session.</b><span>Its answer shows here when it is done.</span></p></div>`;
+  if (F.answer) return `<div class="rf-wait">${face}<p><b>${esc(F.answer.text)}</b><span>No draft is open. Draft it now, or it drafts on its day.</span></p><button type="button" class="rf-ib pri vz-hv" data-rt="redraft" aria-label="Draft it now" title="Draft it now">${SV(ICON.go)}</button></div>`;
   return `<div class="rf-wait">${face}<p><b>No draft yet.</b><span>Draft it now, or it drafts on its day.</span></p><button type="button" class="rf-ib pri vz-hv" data-rt="redraft" aria-label="Draft it now" title="Draft it now">${SV(ICON.go)}</button></div>`;
 }