create-pmos 0.241.0 → 0.242.0

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

@@ -26,6 +26,7 @@ import { pmPost } from './http.js';
 import { notesView, openNote, noteOfEvent, primeNotes } from './c3-notes.js';   // Calendar › Notes (initiative c3-notes-place)
 import { onNotes } from './notes-links.js';
 import { openSheet } from './c3-sheet.js';
+import { materialSection } from './c3-material.js';   // Material on the meeting card (initiative meeting-material-replay)
 
 const LAYERS = [
   ['meetings', 'Meetings'],
@@ -669,6 +670,15 @@ const focusBtn = (e, date, ui) => button({ label: [c3ic('target', 'sm'), 'Focus'
   attrs: { 'data-cal3': 'focus', title: 'Open the meeting focus page: the clock, the topics, the material and PMOS beside the conversation' },
   onClick: () => { if (ui) { ui.st.sel = null; closeMeetingSheet(ui.r); ui.redraw(); } import('./c3-focus.js').then((m) => m.openFocus({ event: e, date })).catch(() => toast({ text: 'The focus page could not load.', tone: 'error' })); } });
 
+/* "Replay": the full-screen replay of a meeting that has ended and has a recorded note (c3-replay.js); it closes the popup first, as Focus does */
+const replayBtn = (e, ui) => {
+  const n = noteOfEvent(e);
+  if (!n || n.private || n.state === 'recording' || n.state === 'paused' || !(n.segments > 0 || (n.words || 0) > 0)) return null;
+  return button({ label: [c3ic('play', 'sm'), 'Replay'], variant: 'ghost', size: 'sm',
+    attrs: { 'data-cal3': 'replay', title: 'Open the meeting replay: the topics, the key points, the screen and the conversation along the audio' },
+    onClick: () => { if (ui) { ui.st.sel = null; closeMeetingSheet(ui.r); ui.redraw(); } import('./c3-replay.js').then((m) => m.openReplay({ note: n.id })).catch(() => toast({ text: 'The replay could not load.', tone: 'error' })); } });
+};
+
 function meetingDetail(ui, hit, inSheet) {
   const { M, h } = ui; const e = hit.e;
   const s = h.timeOf(e.at); const f = s === null ? null : h.endH(e);
@@ -692,7 +702,7 @@ function meetingDetail(ui, hit, inSheet) {
   if (!M.ctx) body = [fold('info', 'The calendar sent no meeting context, so PMOS shows nothing for this meeting.', { 'data-cal3': 'no-context' })];
   else if (past && (!rec || rec.held === false)) body = [fold('moon', 'Nothing held for this meeting: no note, decisions or linked items yet.', { 'data-cal3': 'nothing-held' })];
   else if (past) body = [list(['decision', 'action'], 'What came out of it', 'out', 'No decision or action is recorded.'), list(['moved'], 'What moved after it', 'moved', 'Nothing moved within 48 hours that refers to it.')];
-  else body = upcomingBody(ui, rec, items);
+  else body = upcomingBody(ui, rec, items, e, hit.date);
   const b = !past && rec && rec.brief ? rec.brief : null;
   const lv = !past && rec ? rec.level || null : null;
   const iniId = lv && lv.kind !== 'initiative' ? null : typeof e.initiative === 'string' && !(lv && lv.by === 'pm') ? e.initiative : b && b.initiative ? b.initiative.id : null;
@@ -707,7 +717,7 @@ function meetingDetail(ui, hit, inSheet) {
     // the popup: the sheet's header carries the title and Close; at Half and wider the note sits beside what came out of it
     const side = noteCard(ui, e);
     return [
-      el('div', { class: 'cal3-dt' }, el('span', { class: 'tag' + (past ? '' : ' cal3-up') }, past ? 'past' : 'upcoming'), !past && s !== null && hit.date === ui.d.today ? focusBtn(e, hit.date, ui) : null),
+      el('div', { class: 'cal3-dt' }, el('span', { class: 'tag' + (past ? '' : ' cal3-up') }, past ? 'past' : 'upcoming'), !past && s !== null && hit.date === ui.d.today ? focusBtn(e, hit.date, ui) : null, past ? replayBtn(e, ui) : null),
       el('div', { class: 'dim mono cal3-when' }, h.dayLabel(hit.date) + (s === null ? ', all day' : ' · ' + h.hhmm(s) + ' to ' + h.hhmm(f))),
       chipsRow(),
       past || !M.ctx ? null : levelRow(ui, e, lv),
@@ -827,7 +837,7 @@ function openBoardTab(ui, board, tab) {
   ui.h.gotoTab('init');
 }
 
-function upcomingBody(ui, rec, items) {
+function upcomingBody(ui, rec, items, e, date) {
   const { h } = ui;
   const b = rec && rec.brief ? rec.brief : null;
   const lv = rec && rec.level ? rec.level : null;
@@ -857,6 +867,8 @@ function upcomingBody(ui, rec, items) {
       el('span', { class: 'tag' + (x.done ? ' cal3-up' : '') }, CTXWORD[x.kind] || x.kind), el('span', { class: 'cal3-ct' }, x.text),
       x.at ? el('span', { class: 'dim mono cal3-at' }, h.dayLabel(x.at) + (h.timeOf(x.at) !== null ? ' ' + h.hhmm(h.timeOf(x.at)) : '')) : null,
       x.ref && REF[x.ref.type] ? refLink(ui, x.ref, { title: x.text }) : null))])));
+  if (e) out.push(materialSection({ event: e, date, level: lv, brief: b,
+    back: () => { if (!ui.st.sel) { ui.st.sel = { type: 'event', id: e.id }; ui.redraw(); } } }));
   if (b && ((b.links || []).length || (b.refs || []).length)) out.push(el('div', { class: 'chips2', 'data-cal3': 'meeting-links' },
     ...(b.links || []).map((l) => el('a', { class: 'chip2', href: l.url, target: '_blank', rel: 'noopener noreferrer' }, c3ic('out', 'sm'), l.label)),
     ...(b.refs || []).map((r) => r.link ? el('a', { class: 'chip2', href: r.link, target: '_blank', rel: 'noopener noreferrer' }, c3ic('out', 'sm'), r.label, r.source ? el('span', { class: 'dim' }, ' ' + r.source) : null)

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

@@ -0,0 +1,58 @@
+/* pm/c3-demo-material.js — DEMO answers for the material of a meeting (initiative meeting-material-replay, part 1) on /c3.html?demo=1.
+ * c3-demo.js passes GET and POST /api/meeting-material and GET /api/meeting-material/suggest here, and adds the material of the meeting to the
+ * answer of GET /api/meeting-focus. The data is the approved mockup's: PMOS suggests the Partner API decision deck, the weekly report and a
+ * policy document; a search finds three more. The store lives in the page: a reload forgets it and nothing reaches the server. Real mode never loads this file. */
+
+const rows = [];   // { key, scope, event, item, topic, present, removed? } in the order they were added; the last of an item wins
+const TOPICS = ['Context and goal', 'Options: soft vs hard limits', 'Partner impact: top 20 traffic', 'Partner comms and timing', 'Decide and next steps']
+  .map((text) => ({ id: text.toLowerCase().replace(/[^a-z0-9]+/g, '-').replace(/^-|-$/g, ''), text }));
+const WS = '881665c933';
+const SUGGESTED = [
+  { kind: 'pmos-deck', ref: 'planning/reports/rs1/2026-10-21.md', title: 'Partner API rate limits: decision deck', meta: 'Reports · deck · draft', why: 'Your deck, edited Fri 9 Oct', present: true, ws: WS },
+  { kind: 'report', ref: 'planning/reports/rs3/2026-10-14.md', title: 'Partner API weekly report · cycle 41', meta: 'Reports · document · issued', why: 'The report this review reads each week', present: false, ws: WS },
+  { kind: 'pmos-doc', ref: 'planning/prd/partner-agreement-prd.md', title: 'Partner agreement v3: fair use (section 4.2)', meta: 'IDPF-07 documents', why: 'Named in the last note: "check the agreement"', present: false, ws: WS },
+];
+const FIND = [
+  { kind: 'pmos-deck', ref: 'planning/reports/rs1/2026-10-07.md', title: 'Payments 1.5 release review deck', meta: 'Reports · deck · issued', present: true, ws: WS },
+  { kind: 'report', ref: 'planning/reports/rs3/2026-10-02.md', title: 'Monthly product review · September', meta: 'Reports · document · issued', present: false, ws: WS },
+  { kind: 'pmos-doc', ref: 'planning/prd/idpf-07-charter.md', title: 'IDPF-07 charter', meta: 'IDPF-07 documents', present: false, ws: WS },
+];
+const norm = (t) => String(t || '').toLowerCase().replace(/[^a-z0-9]+/g, ' ').trim();
+const keyOf = (e) => (e && e.series ? 's:' + e.series : 't:' + norm(e && e.title));
+const idOf = (r) => [r.key, r.scope === 'series' ? '' : r.event || '', r.item.kind, r.item.ref || r.item.url].join('|');
+const classify = (u) => {
+  const s = String(u || '').trim(); let x; try { x = new URL(/^[a-z][a-z0-9+.-]*:/i.test(s) ? s : 'https://' + s); } catch { return null; }
+  if (x.protocol !== 'https:') return null;
+  if (x.hostname === 'docs.google.com' && /^\/presentation\/d\//.test(x.pathname)) return { kind: 'slides', url: x.href };
+  if (x.hostname === 'docs.google.com' && /^\/document\/d\//.test(x.pathname)) return { kind: 'gdoc', url: x.href };
+  if (/\.atlassian\.net$/.test(x.hostname) && x.pathname.startsWith('/wiki')) return { kind: 'conf', url: x.href };
+  return { kind: 'link', url: x.href };
+};
+
+/** The items of one meeting, in the shape of GET /api/meeting-material. event: { id?, title, series? } */
+export function materialFor(event) {
+  const key = keyOf(event); const held = new Map();
+  for (const r of rows) { const id = idOf(r); if (r.removed) held.delete(id); else held.set(id, r); }
+  return [...held.values()].filter((r) => r.key === key && (r.scope === 'series' || r.event === String(event.id || ''))).map((r) => ({
+    id: Math.abs([...idOf(r)].reduce((h, c) => (h * 31 + c.charCodeAt(0)) | 0, 7)).toString(16), kind: r.item.kind, ref: r.item.ref || null, url: r.item.url || null, title: r.item.title,
+    ws: r.item.ws || null, topic: r.topic || null, present: r.present === true, scope: r.scope, from: 'you', by: 'pm:wawan', at: null }));
+}
+
+export function materialGet(path, url) {
+  const q = new URL(url, location.origin).searchParams;
+  if (path === '/api/meeting-material/suggest') {
+    const t = (q.get('q') || '').toLowerCase();
+    return { ok: true, suggested: SUGGESTED, found: t.length >= 2 ? FIND.filter((x) => x.title.toLowerCase().includes(t)) : [] };
+  }
+  const event = { id: q.get('event') || '', title: q.get('title') || '', series: q.get('series') || '' };
+  return { ok: true, key: keyOf(event), items: materialFor(event), ...(q.get('topics') ? { topics: TOPICS } : {}) };
+}
+
+export function materialPost(b) {
+  const e = b.event || {}; const it = b.item || {};
+  const item = it.ref ? { kind: it.kind, ref: it.ref, title: it.title || it.ref, ws: it.ws } : (() => { const c = classify(it.url); return c ? { ...c, title: it.title || c.url } : null; })();
+  if (!item) return { ok: false, error: 'a link must be an https address' };
+  const scope = b.scope === 'series' ? 'series' : 'meeting';
+  rows.push({ key: keyOf(e), scope, event: scope === 'meeting' ? String(e.id || '') : '', item, topic: b.topic || null, present: b.op !== 'remove' && b.present === true, removed: b.op === 'remove' });
+  return { ok: true, items: materialFor(e) };
+}

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

@@ -12,6 +12,7 @@ import { el } from './dom.js';
 import * as D from './c3-demo-data.js';
 import { installInit } from './c3-demo-init.js';
 import { focusGet, focusPost } from './c3-demo-focus.js';   // Meeting focus: the mockup's Partner API review (GET /api/meeting-focus, its ask poll, and the topic and ask POSTs)
+import { materialGet, materialPost, materialFor } from './c3-demo-material.js';   // Meeting material: GET and POST /api/meeting-material, its suggestions, and the material in the Focus read
 import { installBoards } from './c3-demo-boards.js';   // Initiatives boards: answers every /api/boards GET and POST (installed outermost, in installDemo)
 import { installCoreDocs } from './c3-demo-coredocs.js';   // Core documents of each level: GET /api/core-docs and its POSTs (installed outermost, after installBoards)
 import './c3-demo-cal-ix.js';   // Calendar and the ribbon: sets window.__c3calix (calendar-views.js reads it in demo only)
@@ -53,7 +54,9 @@ function getRoute(path, url) {
   switch (path) {
     case '/api/briefing': return D.briefing(url);
     case '/api/calendar-views': return withCalendarPage(D.calendarViews(url));
-    case '/api/meeting-focus': case '/api/meeting-focus/ask': case '/api/meeting-focus/now': return focusGet(path, url);
+    case '/api/meeting-focus': { const o = focusGet(path, url); return o && o.ok ? { ...o, material: [...materialFor({ id: q.get('event') || '', title: q.get('title') || '' }), ...materialFor(o.event)] } : o; }   // what was asked for, and the sample meeting the demo answers with
+    case '/api/meeting-focus/ask': case '/api/meeting-focus/now': return focusGet(path, url);
+    case '/api/meeting-material': case '/api/meeting-material/suggest': return materialGet(path, url);
     case '/api/pm-items': return D.pmItems();
     case '/api/runs': return D.runs();
     case '/api/releases': return D.releases();
@@ -78,6 +81,7 @@ function postRoute(path, body) {
   let b = {};
   try { b = body ? JSON.parse(body) : {}; } catch { b = {}; }
   if (path.startsWith('/api/meeting-focus/')) return focusPost(path, body);
+  if (path === '/api/meeting-material') return materialPost(b);
   if (path === '/api/pm-items/add') return { ok: true, item: { id: 'item-demo-new' + (++added), title: String(b.line || '').trim() || 'New item', due: null, priority: null, waiting_on: null, job: null, steps: [], created_at: D.NOW_ISO + 'Z' } };
   if (path === '/api/pm-items/remove') return { ok: true, undo_ms: 8000 };
   if (path === '/api/calendar-links') return (window.__c3links = (window.__c3links || []).concat([b])), { ok: true, link: b.kind === 'none' ? null : { kind: b.kind, ws: b.ws || null, board: b.board || null, initiative: b.initiative || null, title: b.title || null, by: 'pm:wawan' } };   // nothing is saved

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

@@ -28,6 +28,8 @@ import { ensureComponentsCss, button } from './primitives.js';
 import { icon, sect, pbtn, lk, ib, put } from './c3-ini-ui.js';
 import { openSheet, closeSheet } from './c3-sheet.js';
 import { toast } from './c3-toast.js';
+import * as Shots from './notes-shots.js';
+import { openAddMaterial, openItem, presentItem, audienceItem, pmosUrl } from './c3-material.js';   // the PM's own material (initiative meeting-material-replay)
 
 const POLL_MS = 3000;
 const LAST_MINUTES = 5;                 // the last minutes of the meeting: the captured items show under the stage
@@ -43,8 +45,12 @@ export function clockText(sec) {
   return (neg ? '-' : '') + (h ? h + ':' + pad(m) : String(m)) + ':' + pad(x);
 }
 /** What a link is, and how the page shows it: every link is a card; a Google Slides or Docs link also has a /preview address that the page loads only when the PM presses Show the preview here (no-network: the page reaches nothing by itself). Pure. */
+const PMOS_APP = { 'pmos-deck': 'PMOS deck', 'pmos-doc': 'PMOS document', report: 'PMOS report' };
 export function classify(url) {
   const raw = String(url || '').trim();
+  // an item PMOS itself holds (a deck, a document, a report cycle): pmos:<kind>:<workspace>:<path>. It opens in PMOS, not in a tab.
+  const pm = /^pmos:(pmos-deck|pmos-doc|report):([^:]*):(.+)$/.exec(raw);
+  if (pm) return { kind: 'pmos', pk: pm[1], app: PMOS_APP[pm[1]], url: raw, host: 'PMOS', ref: pm[3] };
   // A link pasted without its scheme (docs.google.com/…) is a web link.
   let u; try { u = new URL(/^[a-z][a-z0-9+.-]*:/i.test(raw) ? raw : 'https://' + raw); } catch { return { kind: 'link', app: 'Link', url: String(url), host: '' }; }
   const m = /^\/(presentation|document)\/d\/([A-Za-z0-9_-]+)/.exec(u.pathname);
@@ -60,7 +66,7 @@ export function classify(url) {
 let F = null;   // the open page: { id, date, root, r (regions), sig, data, offset, ui, timers, sheet, ... }
 
 function ensureCss() {
-  ensureC3Css(); ensureComponentsCss();
+  ensureC3Css(); ensureComponentsCss(); Shots.ensureListenCss();
   if (document.querySelector('link[data-c3-focus]')) return;
   const l = document.createElement('link');
   l.rel = 'stylesheet'; l.href = new URL('./c3-focus.css', import.meta.url).href; l.setAttribute('data-c3-focus', '');
@@ -211,7 +217,24 @@ function region(name, sig, build) {
   return true;
 }
 const phaseOf = () => { const n = nowMs(); const s = startMs(); const e = endMs(); return Number.isFinite(s) && n < s ? 'before' : Number.isFinite(e) && n >= e ? 'after' : 'during'; };
-const linksOf = (d) => ((d && d.event && d.event.links) || []).map((l) => ({ label: l.label, ...classify(l.url) }));
+/** The meeting's material: the links of the invite and the brief, then the PM's own (d.material, with topic and present). A PMOS deck is presented in PMOS. */
+function linksOf(d) {
+  const mine = ((d && d.material) || []).map((m) => {
+    const c = classify(['pmos-deck', 'pmos-doc', 'report'].includes(m.kind) ? pmosUrl(m) : m.url);
+    return { label: m.title || c.url, ...c, mat: m, topic: m.topic || null, you: m.present === true, ...(c.kind === 'pmos' ? { present: m.kind === 'pmos-deck' } : {}) };
+  });
+  const own = new Set(mine.map((l) => l.url));
+  const given = ((d && d.event && d.event.links) || []).map((l) => ({ label: l.label, ...classify(l.url) })).filter((l) => !own.has(l.url));
+  return [...given, ...mine].map((l, i) => ({ ...l, i }));
+}
+const normTopic = (t) => String(t || '').toLowerCase().replace(/[^a-z0-9]+/g, ' ').trim();
+/** The material tied to the topic the room is on (by its text or its id), or null. */
+const forTopic = (links, cur) => (cur ? links.find((l) => l.topic && (normTopic(l.topic) === normTopic(cur.text) || normTopic(l.topic) === normTopic(cur.id))) || null : null);
+/** The item on the stage: the one you pressed, else the material for the topic the room is on, else the first. */
+function stagePick(d) {
+  const links = linksOf(d);
+  return (F.ui.stagePin ? links[F.ui.stage] : forTopic(links, currentOf(d))) || links[F.ui.stage] || links.find((l) => l.preview) || links[0] || null;
+}
 const topicNo = (d, id) => d.topics.findIndex((t) => t.id === id) + 1;
 const currentOf = (d) => d.topics.find((t) => t.id === d.current) || null;
 const openRunOf = (d) => (d.runs || []).filter((x) => x.to_min == null).pop() || null;
@@ -332,7 +355,7 @@ function stopBuild() {
   return [el('div', { class: 'fc-stopsheet', 'data-fc': 'stop-sheet' },
     el('p', { class: 'fc-p' }, d && d.talk ? 'PMOS keeps the notes and shows you what it caught.'
       : left > 0 ? left + ' min of the meeting is left. If you stop now, the notes use what was recorded so far.' : 'PMOS keeps the notes and writes them up from the recording.'),
-    el('div', { class: 'iacts' }, pbtn('primary', 'Stop recording', 'stop', { 'data-fc': 'stop-ok' }), pbtn('ghost', 'Keep recording', null, { 'data-fc': 'stop-keep' })))];
+    el('div', { class: 'iacts' }, pbtn('primary', 'Stop recording', 'stop', { 'data-fc': 'stop-ok' }), d && d.note && !isDemo() && !(F && F.phone) ? pbtn('outline', 'Stop and open the replay', 'play', { 'data-fc': 'stop-replay' }) : null, pbtn('ghost', 'Keep recording', null, { 'data-fc': 'stop-keep' })))];
 }
 function materialBuild() { return stageBody(F.data, phaseOf()); }
 
@@ -419,9 +442,17 @@ function trackEl(d) {
   return el('div', { class: 'fc-track', role: 'img', 'aria-label': 'What the room talked about, in order. Numbers match the topic list.' }, el('div', { class: 'fc-runs' }, ...track), el('span', { class: 'fc-nowm', 'data-fc': 'nowm' }));
 }
 
+/* Pause shots: the chip beside REC stops the pictures and keeps the sound (notes-shots.js; the same switch is on the recording chip) */
+const shotsSig = () => (Shots.active() ? Shots.chipText() : '');
+function shotsChip() {
+  const off = Shots.paused();
+  return lk({ class: 'lsn-chip' + (off ? ' off' : ''), 'data-fc': 'shots', 'aria-pressed': String(off), title: Shots.chipTitle(),
+    onclick: () => { const now = Shots.setPaused(!Shots.paused()); toast(now ? 'Shots paused. The sound is still recorded.' : 'Shots back on.'); draw(); } }, icon(off ? 'play' : 'eye', 'sm'), Shots.chipText());
+}
+
 function drawTop(d, ph) {
   const e = d.event; const rec = recState(d); const ini = (d.brief && d.brief.initiative) || null; const lt = leftText(d, ph);
-  const sig = [e.title, e.at, e.end, e.attendees, ini, e.initiative, ph, rec, lt.txt, d.topics.map((t) => t.id), d.runs, F.status === 'ok' && F.stale ? 1 : 0];
+  const sig = [e.title, e.at, e.end, e.attendees, ini, e.initiative, ph, rec, shotsSig(), lt.txt, d.topics.map((t) => t.id), d.runs, F.status === 'ok' && F.stale ? 1 : 0];
   region('top', sig, () => {
     const s = startMs(); const f = endMs();
     const people = (e.attendees || []);
@@ -440,6 +471,7 @@ function drawTop(d, ph) {
       el('div', { class: 'fc-clock', role: 'timer', 'aria-live': 'off' }, ...clock, el('div', { class: 'fc-end' }, el('span', { class: 'tag' + (lt.warn ? ' fc-warn' : ''), 'data-fc': 'proj', hidden: !lt.txt }, lt.txt))),
       el('div', { class: 'fc-acts' },
         recLabel ? el('span', { class: 'dim mono fc-recd', 'data-fc': 'rec', 'data-rec': rec, title: rec === 'recording' ? 'Recording this meeting' : '' }, rec === 'recording' ? el('span', { class: 'fc-dot' }) : null, recLabel) : null,
+        rec === 'recording' && Shots.active() ? shotsChip() : null,
         rec === 'recording' || rec === 'paused' ? pbtn('outline', 'End meeting', 'stop', { 'data-fc': 'end', title: 'Stops the recording and saves the note' })
           : rec !== 'ended' && ph !== 'after' ? pbtn('primary', 'Start recording', 'play', { 'data-fc': 'start', title: 'Records this meeting in a note' }) : null),
       trackEl(d),
@@ -484,8 +516,13 @@ function linkRow(l) {
     el('div', { class: 'nb' }, el('span', { class: 'tt' }, l.label), el('div', { class: 'chips' }, el('span', { class: 'chip2' }, icon('out', 'sm'), l.app))),
     el('div', { class: 'acts' }, openBtn(l), l.present ? presentBtn(l) : null));
 }
-const openBtn = (l) => pbtn('outline', l.kind === 'link' ? 'Open' : 'Open in ' + l.app, null, { 'data-fc': 'open-link', 'data-url': l.url, title: 'Opens it in a new tab' });
-const presentBtn = (l) => pbtn('ghost', 'Present in ' + l.app, 'play', { 'data-fc': 'present', 'data-url': l.present, title: 'Opens the deck in present mode in a new tab. Share that tab in the call.' });
+const openBtn = (l) => (l.kind === 'pmos' ? pbtn('outline', 'Open', null, { 'data-fc': 'pm-open', 'data-i': String(l.i), title: 'Opens it in PMOS' })
+  : pbtn('outline', l.kind === 'link' ? 'Open' : 'Open in ' + l.app, null, { 'data-fc': 'open-link', 'data-url': l.url, title: 'Opens it in a new tab' }));
+const presentBtn = (l) => (l.kind === 'pmos'
+  ? [pbtn('ghost', 'Audience view', 'eye', { 'data-fc': 'pm-audience', 'data-i': String(l.i), title: 'Opens the slides only, full screen, with no notes. Share the screen in the call.' }),
+    pbtn('primary', 'Present', 'play', { 'data-fc': 'pm-present', 'data-i': String(l.i), title: 'Opens the presenter view in PMOS with your speaker notes. Press Audience view before you share the screen.' })]
+  : pbtn('ghost', 'Present in ' + l.app, 'play', { 'data-fc': 'present', 'data-url': l.present, title: 'Opens the deck in present mode in a new tab. Share that tab in the call.' }));
+const addMaterialBtn = () => pbtn('outline', 'Add material', 'plus', { 'data-fc': 'mat-add', title: 'Link a PMOS document, a report or deck, or a web page to this meeting' });
 
 function beforeList(d, links) {
   const b = d.brief || {};
@@ -502,28 +539,28 @@ function beforeList(d, links) {
 function drawStage(d, ph) {
   const links = linksOf(d);
   const cur = currentOf(d);
-  const sig = [ph, links, F.ui.stage, F.ui.preview, cur && cur.text, d.brief && [d.brief.prep, d.brief.matters, d.brief.last]];
+  const sig = [ph, links, F.ui.stage, F.ui.stagePin, F.ui.preview, cur && cur.text, d.brief && [d.brief.prep, d.brief.matters, d.brief.last]];
   region('stage', sig, () => stageBody(d, ph));
 }
 /** The stage: the material the meeting links, as a card, or the loaded preview; before the start, what is prepared. The phone shows it in a sheet. */
 function stageBody(d, ph) {
   const links = linksOf(d);
   const cur = currentOf(d);
-  const embeddable = links.filter((l) => l.preview);
-  const pick = links[F.ui.stage] || embeddable[0] || links[0] || null;
+  const pick = stagePick(d);
   if (ph === 'before') {
     const rows = beforeList(d, links);
     return [sect({ ic: 'doc', title: 'Before it starts', attrs: { class: 'fc-stage', 'data-fc': 'stage', 'data-fc-stage': 'before' } },
-      rows.length ? el('ul', { class: 'list', role: 'list' }, ...rows) : el('div', { class: 'fold' }, icon('moon', 'sm'), 'Nothing is prepared for this meeting yet. Nothing is linked in the invite.'))];
+      rows.length ? el('ul', { class: 'list', role: 'list' }, ...rows) : [el('div', { class: 'fold' }, icon('moon', 'sm'), 'Nothing is prepared for this meeting yet. Nothing is linked in the invite.'), el('div', { class: 'iacts' }, addMaterialBtn())])];
   }
-  if (!pick) return [sect({ ic: 'doc', title: 'Material', attrs: { class: 'fc-stage', 'data-fc': 'stage', 'data-fc-stage': 'none' } }, el('div', { class: 'fold' }, icon('moon', 'sm'), 'No material is linked to this meeting.'))];
+  if (!pick) return [sect({ ic: 'doc', title: 'Material', attrs: { class: 'fc-stage', 'data-fc': 'stage', 'data-fc-stage': 'none' } }, el('div', { class: 'fold' }, icon('moon', 'sm'), 'No material is linked to this meeting.'), el('div', { class: 'iacts' }, addMaterialBtn()))];
   const right = links.length > 1 ? el('div', { class: 'seg', role: 'group', 'aria-label': 'Material', 'data-fc': 'material' },
     ...links.map((l, i) => button({ variant: 'ghost', label: [icon(l.preview ? 'doc' : 'out', 'sm'), l.app], attrs: { 'aria-pressed': String(l === pick), 'data-fc': 'material-pick', 'data-i': String(i), title: l.label } }))) : null;
   const body = pick.preview && F.ui.preview === pick.url
     ? [el('div', { class: 'fc-frame', 'data-fc': 'preview-wrap' }, el('iframe', { src: pick.preview, title: 'Preview of ' + pick.label + ' in ' + pick.app, loading: 'lazy', referrerpolicy: 'no-referrer', allow: 'fullscreen',
       sandbox: 'allow-scripts allow-same-origin allow-popups allow-forms', 'data-fc': 'preview', 'data-app': pick.kind })),
     el('div', { class: 'fc-strip' }, el('span', { class: 'dim mono fc-src' }, icon('lock', 'sm'), 'Shown by ' + pick.app + ' itself. PMOS shows nothing to the room.'), el('span', { class: 'fc-grow' }), openBtn(pick), pick.present ? presentBtn(pick) : null)]
-    : [el('div', { class: 'fc-card', 'data-fc': 'link-card' }, el('span', { class: 'ki' }, icon(pick.preview ? 'doc' : 'out')), el('div', { class: 'nb' }, el('b', null, pick.label), el('span', { class: 'dim mono' }, pick.app + (pick.host && pick.host !== pick.app ? ' · ' + pick.host : ''))), openBtn(pick), pick.present ? presentBtn(pick) : null),
+    : [el('div', { class: 'fc-card', 'data-fc': 'link-card', 'data-fc-kind': pick.kind }, el('span', { class: 'ki' }, icon(pick.kind === 'pmos' ? (pick.pk === 'pmos-doc' ? 'doc' : 'report') : pick.preview ? 'doc' : 'out')),
+      el('div', { class: 'nb' }, el('b', null, pick.label), el('span', { class: 'dim mono' }, pick.app + (pick.host && pick.host !== pick.app ? ' · ' + pick.host : '') + (pick.topic ? ' · for ' + pick.topic : '') + (pick.you ? ' · you present it' : ''))), openBtn(pick), pick.present ? presentBtn(pick) : null),
       pick.preview ? el('div', { class: 'fc-strip' }, el('span', { class: 'dim mono fc-src' }, icon('lock', 'sm'), 'PMOS loads nothing from ' + pick.app + ' until you ask.'), el('span', { class: 'fc-grow' }),
         button({ variant: 'outline', label: [icon('eye', 'sm'), 'Show the preview here'], attrs: { 'data-fc': 'preview-on', title: 'Load the ' + pick.app + ' preview into this page' } })) : null];
   return [sect({ ic: 'doc', title: cur ? 'Material · ' + cur.text : 'Material', right, attrs: { class: 'fc-stage', 'data-fc': 'stage', 'data-fc-stage': pick.preview && F.ui.preview === pick.url ? pick.kind : 'card' } }, ...body)];
@@ -719,6 +756,7 @@ async function ask(question) {
 function tick() {
   if (!F || !F.data) return;
   const d = F.data; const n = nowMs(); const s = startMs(); const f = endMs();
+  if (F.shotsSeen !== shotsSig()) { const first = F.shotsSeen === undefined; F.shotsSeen = shotsSig(); if (!first) { draw(); return; } }   // Pause shots was pressed elsewhere
   if (phaseOf() !== F.sig.phase) { F.sig.phase = phaseOf(); if (F.sig.phaseSet) { draw(); return; } F.sig.phaseSet = true; }
   const set = (k, v) => { for (const x of document.querySelectorAll('[data-fc="' + k + '"]')) if (x.textContent !== v) x.textContent = v; };
   const ph = phaseOf();
@@ -858,6 +896,22 @@ async function endMeeting() {
 
 /* ── presses ──────────────────────────────────────────────────────────────────────────────────────────────────── */
 
+/** Add material, and Open, Present and Audience view of the PM's PMOS material. True when the press was one of these. */
+function materialPress(k, t) {
+  const d = F && F.data; if (!d) return false;
+  if (k === 'mat-add') {
+    const e = d.event || {};
+    openAddMaterial({ event: { id: e.id, title: e.title, at: e.at, series: e.series, initiative: e.initiative, links: e.links }, date: d.date, brief: d.brief });
+    return true;
+  }
+  if (k !== 'pm-open' && k !== 'pm-present' && k !== 'pm-audience') return false;
+  const l = linksOf(d)[Number(t.dataset.i)];
+  if (l && l.mat) (k === 'pm-present' ? presentItem : k === 'pm-audience' ? audienceItem : openItem)(l.mat);
+  return true;
+}
+// the material was added or removed on the Calendar card or in the sheet: read the meeting again, so it shows at once
+window.addEventListener('c3-material-changed', () => { if (F && !F.noteId) load(); });
+
 function onClick(ev) {
   const t = ev.target.closest('[data-fc]'); if (!t || !F || !F.root.contains(t)) return;
   const k = t.dataset.fc; const d = F.data;
@@ -866,6 +920,7 @@ function onClick(ev) {
   if (k === 'pop-open') { openFull(); return; }
   if (k === 'choice') { const c = (F.choices || [])[Number(t.dataset.i)]; if (c) chooseMeeting(c, String(c.at || '').slice(0, 10)); return; }
   if (!d) return;
+  if (materialPress(k, t)) return;
   if (k === 'topics') { showSheet('topics', 'Topics', 'todo', topicsBuild); return; }
   if (k === 'captured') { showSheet('captured', 'Captured so far', 'check', capturedBuild); return; }
   if (k === 'note' && F.phone) { openNoteSheet(); return; }
@@ -873,8 +928,8 @@ function onClick(ev) {
   if (k === 'stop') { showSheet('stop', d.talk ? 'Stop recording?' : 'Stop recording ' + d.event.title + '?', 'stop', stopBuild); return; }
   if (k === 'note') { const id = d.note && d.note.id; closeFocus(); if (id) window.dispatchEvent(new CustomEvent('c3-open-note', { detail: { id } })); return; }
   if (k === 'chip') { openChip(F.chips[Number(t.dataset.i)]); return; }
-  if (k === 'preview-on') { const ls = linksOf(d); const pk = ls[F.ui.stage] || ls.find((l) => l.preview) || ls[0]; F.ui.preview = pk && pk.url; drawStage(d, phaseOf()); return; }
-  if (k === 'material-pick') { F.ui.stage = Number(t.dataset.i) || 0; drawStage(d, phaseOf()); return; }
+  if (k === 'preview-on') { const pk = stagePick(d); F.ui.preview = pk && pk.url; drawStage(d, phaseOf()); return; }
+  if (k === 'material-pick') { F.ui.stage = Number(t.dataset.i) || 0; F.ui.stagePin = true; drawStage(d, phaseOf()); return; }
   if (k === 'open-link' || k === 'present') { openUrl(t.dataset.url); return; }
   if (k === 'start') { startRecording(); return; }
   if (k === 'end') { endMeeting(); return; }
@@ -896,6 +951,7 @@ document.addEventListener('click', (ev) => {
   if (!F || !F.sheetOpen || !F.sheet) return;
   const t = ev.target.closest && ev.target.closest('[data-shell="sheet"] [data-fc]'); if (!t) return;
   const k = t.dataset.fc;
+  if (materialPress(k, t)) return;
   if (k === 'picker') { F.ui.picker = !F.ui.picker; F.ui.newTopic = false; refreshSheet(); return; }
   if (k === 'new-topic') { F.ui.newTopic = true; refreshSheet(); return; }
   if (k === 'pick') { const text = t.dataset.text; postTopic('set', text).then((ok) => { if (ok) { closeSheet(); toast('Now on: ' + text + '.'); } }); return; }
@@ -907,10 +963,21 @@ document.addEventListener('click', (ev) => {
   }
   if (k === 'add-topic') { F.ui.addTopic = !F.ui.addTopic; refreshSheet(); return; }
   if (k === 'open-link' || k === 'present') { openUrl(t.dataset.url); return; }
-  if (k === 'preview-on') { const ls = linksOf(F.data); const pk = ls[F.ui.stage] || ls.find((l) => l.preview) || ls[0]; F.ui.preview = pk && pk.url; refreshSheet(true); return; }
-  if (k === 'material-pick') { F.ui.stage = Number(t.dataset.i) || 0; refreshSheet(true); return; }
+  if (k === 'preview-on') { const pk = stagePick(F.data); F.ui.preview = pk && pk.url; refreshSheet(true); return; }
+  if (k === 'material-pick') { F.ui.stage = Number(t.dataset.i) || 0; F.ui.stagePin = true; refreshSheet(true); return; }
   if (k === 'note-tab') { F.ui.noteTab = t.dataset.tab === 'said' ? 'said' : 'note'; refreshSheet(true); return; }
   if (k === 'stop-keep') { closeSheet(); return; }
   if (k === 'pull') { const id = t.dataset.id; F.ui.pulled.push(id); (F.pulledAt ||= {})[id] = nowMs(); F.ui.ni = null; closeSheet(); drawConversation(F.data); return; }
   if (k === 'stop-ok') { closeSheet(); endMeeting().then(() => { if (F && F.phone) closeFocus(); }); return; }
+  if (k === 'stop-replay') { endAndReplay(); return; }   // End and open the replay
 });
+
+/** Stop the recording, leave Focus and open the meeting replay on the note (c3-replay.js). */
+async function endAndReplay() {
+  const f = F; const note = f && f.data && f.data.note && f.data.note.id; if (!f || !note) return;
+  closeSheet();
+  await endMeeting();
+  if (F !== f) return;
+  closeFocus();
+  import('./c3-replay.js').then((m) => m.openReplay({ note })).catch(() => toast('The replay could not load.'));
+}

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

@@ -0,0 +1,10 @@
+/* c3-listen.css — the Listen sheet, the set-aside review and the Pause-shots chip (initiative meeting-material-replay, part 3).
+ * Loaded by listen-sheet.js (ensureListenCss) and by the Focus page. Every rule is under .lsn- or .fc-shots so it changes nothing else. */
+.c3 .lsn { display: grid; gap: var(--sp-3); }
+.c3 .lsn-warn, .c3 .tag.lsn-warn { color: var(--warning); }
+.c3 .lsn-help { margin: 0; }
+.c3 .lsn-aside { align-items: center; }
+.c3 .lsn-thumb { width: 148px; height: 84px; flex: 0 0 auto; object-fit: cover; border: 1px solid var(--border); background: var(--muted); }
+.c3 .lsn-chip { font-size: 12px; }
+.c3 .lsn-chip.off { color: var(--warning); }
+@media (max-width: 640px) { .c3 .lsn-thumb { width: 96px; height: 60px; } }

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

@@ -0,0 +1,22 @@
+/* pm/c3-material.css — meeting material (initiative meeting-material-replay, part 1): the Material part of the Calendar's meeting card, the Add material sheet
+ * and the PMOS deck on the Focus stage. Tokens only. Classes are .mm- under .c3; the sheet and the card are drawn with the console3 classes they already use. */
+.c3 .mm h4 .bdg { margin-left: 4px; }
+.c3 .mm-row { align-items: center; }
+.c3 .mm-row .cal3-ct { display: grid; gap: 2px; min-width: 0; }
+.c3 .mm-meta { font-size: var(--fs-1); }
+.c3 .mm-row .ib.sm { width: 24px; height: 24px; }
+.c3 .mm .mm-foot { align-items: center; margin-top: 6px; }
+.c3 .mm-sheet { display: grid; gap: var(--sp-3); }
+.c3 .mm-in { width: 100%; box-sizing: border-box; height: 34px; padding: 0 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--background); color: var(--foreground); font: inherit; font-size: var(--fs-3); }
+.c3 .mm-in:focus-visible { outline: 2px solid color-mix(in oklab, var(--ring) 50%, var(--foreground)); outline-offset: 1px; }
+.c3 .mm-opt.on { background: color-mix(in srgb, var(--acc) 7%, transparent); border-radius: 8px; }
+.c3 .mm-why, .c3 .mm-sel { color: var(--acc); }
+.c3 .mm-opt .nb { min-width: 0; }
+.c3 .mm-opt .chips { flex-wrap: wrap; min-width: 0; }
+.c3 .mm-opt .tag { white-space: normal; overflow-wrap: anywhere; max-width: 100%; }
+.c3 .mm-set { border-color: color-mix(in srgb, var(--acc) 40%, var(--border)); }
+.c3 .mm-f { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 8px; align-items: center; padding: 4px 0; }
+.c3 .mm-f .mk-lbl { padding: 0; }
+.c3 .mm-wrap { flex-wrap: wrap; height: auto; }
+@media (max-width: 640px) { .c3 .mm-f { grid-template-columns: minmax(0, 1fr); } }
+@media (pointer: coarse) { .c3 .mm-in { min-height: 44px; } }