create-pmos 0.241.0 → 0.242.0

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

@@ -0,0 +1,311 @@
+/* pm/c3-material.js — the material of a meeting (initiative meeting-material-replay, part 1; the mockup the PM approved on 2026-10-14, hashes #material, #material-add, #focus-material).
+ *
+ *   materialSection({ event, date, ws, level, brief, back }) → Node    the Material part of the meeting card: each linked item with its kind, topic and source,
+ *                                                                       Present or Open, remove, and Add material
+ *   openAddMaterial({ event, date, ws, level, brief, back })           the Add material sheet: Suggested from the meeting's level, Find in PMOS, Or paste a link; For,
+ *                                                                       Topic and You (Present it / Only read it)
+ *   openItem(item) · presentItem(item) · audienceItem(item)            Open in PMOS or in a new tab; Present (a PMOS deck in the presenter view, Google Slides in present
+ *                                                                       mode); the audience view of a PMOS deck
+ *   classifyLink(url) · KIND · pmosUrl(item)
+ *   window.C3Material = { open(event, opts), section, openItem, presentItem, audienceItem }   for any page that wants to add or show material
+ *
+ * It reads and writes GET and POST /api/meeting-material (lib/routes-meeting-material.js). PMOS keeps the link on its own record of the meeting; the calendar invite is not
+ * changed. A change fires `c3-material-changed` on window, so the card and Focus read again. Nothing is sent anywhere. */
+import { el } from './dom.js';
+import { pmGet, pmPost } from './http.js';
+import { ensureC3Css } from './pm-work-view.js';
+import { ensureComponentsCss } from './primitives.js';
+import { icon, pbtn, sect, put, lk, ib, list, empty } from './c3-ini-ui.js';
+import { openSheet, closeSheet } from './c3-sheet.js';
+import { toast } from './c3-toast.js';
+
+/** What each kind of item is called, and which icon it takes. `deck`: PMOS presents it itself. `present`: it can be presented at all. */
+export const KIND = {
+  'pmos-deck': { tag: 'PMOS deck', ic: 'report', deck: true, present: true },
+  'pmos-doc': { tag: 'PMOS document', ic: 'doc' },
+  report: { tag: 'PMOS report', ic: 'report' },
+  slides: { tag: 'Google Slides', ic: 'out', present: true },
+  gdoc: { tag: 'Google Docs', ic: 'out' },
+  conf: { tag: 'Confluence', ic: 'out' },
+  link: { tag: 'Link', ic: 'out' },
+};
+const BY = { invite: 'from the invite', brief: 'found by today’s brief', you: 'added by you' };
+const isPmos = (k) => k === 'pmos-deck' || k === 'pmos-doc' || k === 'report';
+
+function ensureCss() {
+  ensureC3Css(); ensureComponentsCss();
+  if (typeof document === 'undefined' || document.querySelector('link[data-c3-material]')) return;
+  const l = document.createElement('link');
+  l.rel = 'stylesheet'; l.href = new URL('./c3-material.css', import.meta.url).href; l.setAttribute('data-c3-material', '');
+  document.head.appendChild(l);
+}
+const wsParam = () => { try { return new URLSearchParams(location.search).get('ws') || ''; } catch { return ''; } };
+const pad = (n) => String(n).padStart(2, '0');
+const MON = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+const dateText = (iso) => { const m = /^(\d{4})-(\d{2})-(\d{2})/.exec(String(iso || '')); return m ? (+m[3]) + ' ' + MON[+m[2] - 1] : ''; };
+const timeText = (iso) => { const d = new Date(iso); return Number.isFinite(d.getTime()) ? pad(d.getHours()) + ':' + pad(d.getMinutes()) : ''; };
+
+/** What an address is, as the server decides it (lib/meeting-material.js classifyUrl). null for anything that is not an https address. */
+export function classifyLink(raw) {
+  const s = String(raw || '').trim();
+  if (!s || /\s/.test(s)) return null;
+  let u; try { u = new URL(/^[a-z][a-z0-9+.-]*:/i.test(s) ? s : 'https://' + s); } catch { return null; }
+  if (u.protocol !== 'https:' || !u.hostname.includes('.')) return null;
+  if (u.hostname === 'docs.google.com' && /^\/presentation\/d\//.test(u.pathname)) return { kind: 'slides', url: u.href, title: 'Google Slides deck', meta: 'read through your Google Drive connection' };
+  if (u.hostname === 'docs.google.com' && /^\/document\/d\//.test(u.pathname)) return { kind: 'gdoc', url: u.href, title: 'Google Docs page', meta: 'read through your Google Drive connection' };
+  if (/\.atlassian\.net$/.test(u.hostname) && u.pathname.startsWith('/wiki')) return { kind: 'conf', url: u.href, title: 'Confluence page', meta: 'read through your Atlassian connection' };
+  return { kind: 'link', url: u.href, title: u.hostname, meta: 'opens in a new tab · PMOS does not read it' };
+}
+/** The pseudo address Focus gives a PMOS item, so its link list can hold it beside web links (c3-focus.js classify). */
+export const pmosUrl = (item) => 'pmos:' + item.kind + ':' + (item.ws || '') + ':' + item.ref;
+
+/* ── what is stored ───────────────────────────────────────────────────────────────────────────────────────────────── */
+
+const evParams = (event, extra) => {
+  const e = event || {};
+  const p = new URLSearchParams({ title: String(e.title || e.id || '') });
+  if (e.id) p.set('event', String(e.id));
+  if (e.series) p.set('series', String(e.series));
+  const date = (extra && extra.date) || String(e.at || e.start || '').slice(0, 10);
+  if (date) p.set('date', date);
+  const ws = (extra && extra.ws) || wsParam(); if (ws) p.set('ws', ws);
+  if (extra && extra.topics) p.set('topics', '1');
+  return p;
+};
+const evKey = (e) => (e && (e.id || e.title)) + '|' + ((e && e.series) || '');
+const CACHE = new Map();   // event key → { items, at }
+const FRESH_MS = 4000;
+
+async function readItems(event, extra) {
+  const r = await pmGet('/api/meeting-material?' + evParams(event, extra).toString()).catch(() => null);
+  if (r && r.ok && Array.isArray(r.items)) { CACHE.set(evKey(event), { items: r.items, at: Date.now() }); return r; }
+  return null;
+}
+const changed = (event) => { try { window.dispatchEvent(new CustomEvent('c3-material-changed', { detail: { key: evKey(event) } })); } catch { /* no window */ } };
+
+async function save(event, body) {
+  const e = event || {};
+  const r = await pmPost('/api/meeting-material', { event: { id: e.id || undefined, title: e.title || e.id, series: e.series || undefined }, ...body }).catch((err) => ({ ok: false, error: String((err && err.message) || err) }));
+  if (!r || !r.ok) { toast({ text: 'The material was not saved: ' + ((r && (r.error || r.reason)) || 'no answer') + '.', tone: 'error', timeout: 6000 }); return null; }
+  CACHE.set(evKey(event), { items: r.items || [], at: Date.now() });
+  changed(event);
+  return r;
+}
+
+/* ── open and present ─────────────────────────────────────────────────────────────────────────────────────────────── */
+
+function openWeb(url) { try { window.open(url, '_blank', 'noopener,noreferrer'); } catch { /* a blocked pop-up */ } }
+const slidesPresentUrl = (url) => { const m = /^(https:\/\/docs\.google\.com\/presentation\/d\/[A-Za-z0-9_-]+)/.exec(String(url || '')); return m ? m[1] + '/present' : url; };
+
+async function openDocument(item) {
+  try {
+    const { openDocSheet } = await import('./c3-doc-sheet.js');
+    const ws = item.ws || wsParam();
+    openDocSheet({ ws, doc: { path: item.ref, name: item.title || item.ref, ty: 'Document', v: '', st: 'current', ini: '', iniName: '' },
+      library: () => Promise.resolve(pmGet('/api/docs/library' + (ws ? '?ws=' + encodeURIComponent(ws) : ''))).catch(() => ({ ok: true, files: [], edges: [], kinds: [], categories: [], initiatives: {} })) });
+  } catch { toast('The document sheet could not open. The file is ' + item.ref + '.'); }
+}
+async function openReport(item) {
+  try {
+    const store = await import('./c3-report-store.js');
+    const setup = await import('./c3-report-setup.js');
+    await store.loadReports(item.ws || wsParam(), true);
+    const d = store.RS.docs.find((x) => x.path === item.ref);
+    if (d) { setup.openReportDoc(d); return; }
+  } catch { /* fall back to the plain document */ }
+  openDocument(item);
+}
+/** Open an item: a PMOS item in PMOS (the document sheet), a link in a new tab. */
+export function openItem(item) {
+  if (!item) return;
+  if (item.kind === 'pmos-doc') return openDocument(item);
+  if (isPmos(item.kind)) return openReport(item);
+  if (item.url) openWeb(item.url);
+}
+
+/** The presenter view (or the audience view) of a PMOS deck: the report deck's own (c3-report-deck.js), with your speaker notes. */
+async function showDeck(item, mode) {
+  let deck = null;
+  try {
+    const { createDeck } = await import('./c3-report-deck.js');
+    deck = createDeck({ ws: item.ws || wsParam(), path: item.ref, name: item.title || 'Deck', cycle: '' });
+    const t0 = Date.now();
+    while (!deck.state.loaded && Date.now() - t0 < 10000) await new Promise((r) => setTimeout(r, 60));
+  } catch { deck = null; }
+  const S = deck && deck.state;
+  if (!S || !S.loaded || !S.cyc || !S.cyc.designed || !S.R || S.R.format !== 'deck') {
+    toast('This report has no designed deck yet, so it opens as a document.');
+    return openItem(item);
+  }
+  deck.present(mode);
+}
+export function presentItem(item) {
+  if (!item) return;
+  if (item.kind === 'slides') return openWeb(slidesPresentUrl(item.url));
+  if (item.kind === 'pmos-deck') return showDeck(item, 'pres');
+  return openItem(item);
+}
+export function audienceItem(item) { if (item && item.kind === 'pmos-deck') return showDeck(item, 'aud'); return openItem(item); }
+
+/* ── the Material part of the meeting card ────────────────────────────────────────────────────────────────────────── */
+
+/** The links the invite and today's brief already carry, as read-only rows. */
+function givenRows(event, brief) {
+  const seen = new Set(); const rows = [];
+  const add = (label, url, from) => {
+    const c = classifyLink(url); if (!c || seen.has(c.url)) return;
+    seen.add(c.url); rows.push({ id: from + ':' + c.url, kind: c.kind, url: c.url, title: label || c.title, topic: null, present: false, scope: null, from });
+  };
+  for (const l of (event && Array.isArray(event.links) ? event.links : [])) add(l && l.label, l && l.url, 'invite');
+  for (const l of (brief && Array.isArray(brief.links) ? brief.links : [])) add(l && l.label, l && l.url, 'brief');
+  for (const r of (brief && Array.isArray(brief.refs) ? brief.refs : [])) if (r && r.link) add(r.label, r.link, 'brief');
+  return rows;
+}
+
+function rowOf(item, o) {
+  const k = KIND[item.kind] || KIND.link;
+  const canPresent = !!item.present && k.present;
+  const where = item.scope === 'series' ? 'every meeting in the series' : item.scope === 'meeting' ? 'this meeting' : '';
+  const meta = [item.topic ? 'for ' + item.topic : null, BY[item.from] || BY.you, where || null, canPresent ? 'you present it' : null].filter(Boolean).join(' · ');
+  const act = canPresent
+    ? lk({ 'data-mm-act': 'present', title: item.kind === 'slides' ? 'Opens it in Google Slides in present mode. Share that tab in the call.' : 'Opens the presenter view in PMOS. Press Audience view before you share the screen.', onclick: () => presentItem(item) }, icon('play', 'sm'), 'Present')
+    : lk({ 'data-mm-act': 'open', title: isPmos(item.kind) ? 'Opens it in PMOS' : 'Opens it in a new tab', onclick: () => openItem(item) }, icon('out', 'sm'), 'Open');
+  const rm = item.from === 'you' ? ib('Remove ' + item.title, 'x', { 'data-mm-act': 'remove', title: 'Remove from this meeting. The document itself is not changed.',
+    onclick: async () => {
+      const r = await save(o.event, { op: 'remove', scope: item.scope, item: isPmos(item.kind) ? { kind: item.kind, ref: item.ref, ws: item.ws || undefined } : { url: item.url } });
+      if (r) toast('Removed from the meeting. The document itself is not changed.');
+    } }) : null;
+  return el('li', { class: 'cal3-ci mm-row', 'data-mm-item': item.kind, 'data-mm-from': item.from, ...(item.topic ? { 'data-mm-topic': item.topic } : {}) },
+    el('span', { class: 'tag' }, k.tag), el('span', { class: 'cal3-ct' }, item.title, el('span', { class: 'dim mm-meta' }, meta)), act, rm);
+}
+
+function sectionBody(o, items) {
+  const rows = [...givenRows(o.event, o.brief), ...(items || [])];
+  return [
+    el('h4', null, icon('doc', 'sm'), 'Material ', el('span', { class: 'bdg g', 'data-mm': 'count' }, String(rows.length))),
+    rows.length ? el('ul', { class: 'cal3-cl', role: 'list' }, ...rows.map((r) => rowOf(r, o))) : el('div', { class: 'fold', 'data-mm': 'none' }, icon('info', 'sm'), items ? 'Nothing is linked to this meeting yet.' : 'Reading the material of this meeting.'),
+    el('div', { class: 'chips2 mm-foot' }, pbtn('outline', 'Add material', 'plus', { 'data-mm': 'add', onclick: () => openAddMaterial(o) }), el('span', { class: 'dim cal3-note' }, 'Shows in Focus, by topic. Your calendar invite is not changed.')),
+  ];
+}
+
+/** The Material part of the meeting card (before the meeting). It draws what it holds at once and reads again when it is older than a few seconds. */
+export function materialSection(o) {
+  ensureCss();
+  const box = el('div', { class: 'cal3-ctx mm', 'data-mm': 'section', 'data-cal3-ctx': 'material' });
+  const key = evKey(o.event);
+  const draw = () => { const c = CACHE.get(key); put(box, ...sectionBody(o, c ? c.items : null)); };
+  draw();
+  const heard = () => { if (!box.isConnected) return; draw(); };
+  const onChanged = (ev) => { if (!box.isConnected) { window.removeEventListener('c3-material-changed', onChanged); return; } if (!ev.detail || ev.detail.key === key) draw(); };
+  window.addEventListener('c3-material-changed', onChanged);
+  const c = CACHE.get(key);
+  if (!c || Date.now() - c.at > FRESH_MS) readItems(o.event, { date: o.date, ws: o.ws }).then((r) => { if (r) heard(); });
+  return box;
+}
+
+/* ── the Add material sheet ───────────────────────────────────────────────────────────────────────────────────────── */
+
+const levelIni = (o) => {
+  const lv = o.level; const b = o.brief; const e = o.event || {};
+  if (lv && lv.kind === 'initiative' && lv.id) return lv.id;
+  if (lv && lv.kind) return '';
+  return (b && b.initiative && b.initiative.id) || (typeof e.initiative === 'string' ? e.initiative : '') || '';
+};
+
+function pickRow(it, on, onPick) {
+  const k = KIND[it.kind] || KIND.link;
+  return el('li', { class: 'nrow mm-opt' + (on ? ' on' : ''), 'data-mm-opt': it.kind },
+    el('span', { class: 'ki' }, icon(k.ic)),
+    el('div', { class: 'nb' }, el('span', { class: 'tt' }, it.title),
+      el('div', { class: 'chips' }, el('span', { class: 'chip2' }, icon(k.ic, 'sm'), k.tag), it.meta ? el('span', { class: 'tag' }, it.meta) : null,
+        it.why ? el('span', { class: 'tag mm-why' }, icon('spark', 'sm'), it.why) : null)),
+    el('div', { class: 'acts' }, on ? el('span', { class: 'tag mm-sel' }, icon('check', 'sm'), 'Picked') : pbtn('ghost', 'Pick', null, { 'data-mm-pick': '', onclick: () => onPick(it) })));
+}
+
+/** Add material: Suggested from the meeting's level, Find in PMOS, Or paste a link; then For, Topic and You. */
+export function openAddMaterial(o) {
+  ensureCss();
+  const event = o.event || {};
+  const S = { pick: null, scope: 'meeting', topic: null, present: true, q: '', link: '', sug: null, found: [], topics: [], busy: false, token: 0 };
+  const root = el('div', { class: 'mm-sheet', 'data-mm': 'sheet' });
+  const sugBox = el('div', { 'data-mm': 'suggested' });
+  const foundBox = el('div', { 'data-mm': 'found' });
+  const pasteBox = el('div', { 'data-mm': 'pasted' });
+  const optsBox = el('div', { 'data-mm': 'options' });
+  const findIn = el('input', { class: 'mm-in', type: 'search', 'data-mm': 'find', placeholder: 'A document, report or deck', 'aria-label': 'Find a document, report or deck in PMOS', autocomplete: 'off' });
+  const linkIn = el('input', { class: 'mm-in', type: 'url', 'data-mm': 'link', placeholder: 'Google Slides, Google Docs, Confluence or any web page', 'aria-label': 'Paste a link', autocomplete: 'off' });
+  let timer = null;
+
+  const pasted = () => { const c = classifyLink(S.link); return c ? { kind: c.kind, url: c.url, title: c.title, meta: c.meta, present: c.kind === 'slides' } : null; };
+  const same = (a, b) => !!a && !!b && a.kind === b.kind && (a.ref || a.url) === (b.ref || b.url);
+  const choose = (it) => { S.pick = it; S.present = !!(KIND[it.kind] && KIND[it.kind].present) && it.present !== false; paint(); };
+
+  function paint() {
+    put(sugBox, S.sug == null ? el('div', { class: 'fold' }, icon('info', 'sm'), 'Looking in PMOS.') : S.sug.length ? list(S.sug.map((it) => pickRow(it, same(it, S.pick), choose)), { role: 'list' }) : empty('Nothing to suggest yet. Search below, or paste a link.'));
+    put(foundBox, S.q.length >= 2 ? (S.found.length ? list(S.found.map((it) => pickRow(it, same(it, S.pick), choose)), { role: 'list' }) : el('div', { class: 'fold' }, icon('info', 'sm'), S.busy ? 'Searching.' : 'Nothing in PMOS matches that.')) : null);
+    const p = pasted();
+    put(pasteBox, p ? list([pickRow(p, same(p, S.pick), choose)], { role: 'list' }) : el('p', { class: 'dim cal3-note' }, S.link ? 'Paste an https address.' : 'Google Slides gets Present. A web page opens in a new tab and PMOS does not read it.'));
+    put(optsBox, S.pick ? settings() : null);
+  }
+  const seg = (label, rows, cur, key) => el('div', { class: 'seg mm-wrap', role: 'group', 'aria-label': label }, ...rows.map(([v, l]) => pbtn('ghost', l, null, { 'aria-pressed': String(cur === v), [key]: String(v), onclick: () => { S[key === 'data-mm-scope' ? 'scope' : key === 'data-mm-topic' ? 'topic' : 'present'] = v; paint(); } })));
+  function settings() {
+    const pick = S.pick; const k = KIND[pick.kind] || KIND.link;
+    const canPresent = !!k.present;
+    const topicName = S.topic;
+    const where = event.series ? 'Every meeting in the series' : 'Every meeting with this title';
+    const note = canPresent
+      ? (pick.kind === 'slides' ? 'Present opens it in Google Slides in present mode. You share that tab in the call. ' : 'Present opens the presenter view in PMOS with your speaker notes. The presenter view and the audience view are one switch: press Audience view, then share the screen in the call. ')
+      : '';
+    const focusNote = topicName ? 'Focus brings it up when the room gets to ' + topicName + '.' : 'Focus keeps it under Material for the whole meeting.';
+    return sect({ ic: 'settings', title: 'How it shows', attrs: { class: 'mm-set', 'data-mm': 'settings' } },
+      el('div', { class: 'mm-f' }, el('span', { class: 'mk-lbl dim mono' }, 'For'),
+        seg('For', [['meeting', 'This meeting · ' + [dateText(String(event.at || event.start || o.date || '')), timeText(event.at || event.start)].filter(Boolean).join(' ')], ['series', where]], S.scope, 'data-mm-scope')),
+      S.topics.length ? el('div', { class: 'mm-f' }, el('span', { class: 'mk-lbl dim mono' }, 'Topic'),
+        el('div', { class: 'seg mm-wrap', role: 'group', 'aria-label': 'Topic' },
+          ...S.topics.map((t, i) => pbtn('ghost', (i + 1) + '. ' + t.text, null, { 'aria-pressed': String(S.topic === t.text), 'data-mm-topic': t.id, onclick: () => { S.topic = t.text; paint(); } })),
+          pbtn('ghost', 'Whole meeting', null, { 'aria-pressed': String(S.topic == null), 'data-mm-topic': 'none', onclick: () => { S.topic = null; paint(); } }))) : null,
+      canPresent ? el('div', { class: 'mm-f' }, el('span', { class: 'mk-lbl dim mono' }, 'You'), seg('Do you present it', [[true, 'Present it'], [false, 'Only read it']], S.present, 'data-mm-pres')) : null,
+      el('p', { class: 'dim cal3-note' }, note + focusNote),
+      el('div', { class: 'iacts' }, pbtn('primary', 'Add to the meeting', 'plus', { 'data-mm': 'do', onclick: add }), pbtn('ghost', 'Cancel', null, { 'data-mm': 'cancel', onclick: () => { S.pick = null; paint(); } })));
+  }
+  async function add() {
+    const pick = S.pick; if (!pick) return;
+    const item = isPmos(pick.kind) ? { kind: pick.kind, ref: pick.ref, title: pick.title, ws: pick.ws || undefined } : { url: pick.url, title: pick.title };
+    const r = await save(event, { op: 'add', scope: S.scope, item, topic: S.topic || undefined, present: S.present && !!(KIND[pick.kind] || {}).present });
+    if (!r) return;
+    closeSheet();
+    toast('Added to ' + (S.scope === 'series' ? 'every meeting in the series' : 'this meeting') + '. Focus shows it' + (S.topic ? ' at ' + S.topic : '') + '.');
+  }
+
+  findIn.addEventListener('input', () => {
+    S.q = findIn.value.trim(); S.busy = S.q.length >= 2; S.found = []; paint();
+    clearTimeout(timer);
+    if (!S.busy) return;
+    const my = ++S.token;
+    timer = setTimeout(async () => {
+      const p = new URLSearchParams({ q: S.q }); const ws = o.ws || wsParam(); if (ws) p.set('ws', ws);
+      const r = await pmGet('/api/meeting-material/suggest?' + p.toString()).catch(() => null);
+      if (my !== S.token) return;
+      S.busy = false; S.found = r && r.ok && Array.isArray(r.found) ? r.found : []; paint();
+    }, 220);
+  });
+  linkIn.addEventListener('input', () => { S.link = linkIn.value.trim(); const p = pasted(); if (p) S.pick = p; else if (S.pick && !S.pick.ref && S.pick.url) S.pick = null; paint(); });
+
+  put(root,
+    el('p', { class: 'dim cal3-note' }, (event.title || 'This meeting') + (event.at || event.start ? ' · ' + dateText(event.at || event.start) + ' ' + timeText(event.at || event.start) : '') + '. PMOS keeps the link on its record of this meeting. The invite in your calendar is not changed.'),
+    sect({ ic: 'spark', title: 'Suggested for this meeting', attrs: { 'data-mm': 'suggest-sect' } }, sugBox),
+    sect({ ic: 'search', title: 'Find in PMOS' }, findIn, foundBox),
+    sect({ ic: 'out', title: 'Or paste a link' }, linkIn, pasteBox),
+    optsBox);
+  paint();
+  openSheet({ title: 'Add material', icon: 'doc', wide: true, body: [el('div', { class: 'c3x' }, root)], onClose: () => { clearTimeout(timer); if (typeof o.back === 'function') { try { o.back(); } catch { /* the page is gone */ } } } });
+
+  const ini = levelIni(o);
+  const p = new URLSearchParams(); const ws = o.ws || wsParam(); if (ws) p.set('ws', ws); if (ini) p.set('initiative', ini);
+  pmGet('/api/meeting-material/suggest?' + p.toString()).then((r) => { S.sug = r && r.ok && Array.isArray(r.suggested) ? r.suggested : []; paint(); }).catch(() => { S.sug = []; paint(); });
+  readItems(event, { date: o.date, ws: o.ws, topics: true }).then((r) => { S.topics = r && Array.isArray(r.topics) ? r.topics : []; paint(); });
+}
+
+if (typeof window !== 'undefined') {
+  window.C3Material = { open: (event, opts) => openAddMaterial({ event, ...(opts || {}) }), section: materialSection, openItem, presentItem, audienceItem, KIND };
+}

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

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

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

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