create-pmos 0.186.0 → 0.188.0

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

@@ -1,5 +1,5 @@
 /* pm/c3-focus.js — the Meeting focus page of console3 (initiative c3-meeting-focus; the mockup the PM approved on 2026-10-12, version 7).
- *   openFocus({ event, date, pop, back, meet, mtitle })   closeFocus()
+ *   openFocus({ event, date, pop, back, phone, note, meet, mtitle })   closeFocus()
  * One calm full-screen page over console3, inside #c3-root: it covers the header, the tabs and the dock (they stay in the DOM, set inert) and Leave
  * focus gives them back. Recording is not touched by leaving. It reads GET /api/meeting-focus every 3 seconds while it is open:
  *   header       title, time, people, initiative; the clock (starts in, or elapsed and left); REC with Start recording or End meeting (the note dock);
@@ -15,7 +15,12 @@
  *   the captured items are not drawn, and there is no Leave focus. With back (the phone companion opens it so) the head and the foot have
  *   "Back to your day" in place of Open focus in PMOS, which closes the page as Leave focus does. ?focus=now first asks GET /api/meeting-focus/now (meet = the Meet code, mtitle = the tab's title) which
  *   meeting the call is; when none fits, the page says so and lists today's meetings to pick from. Fold shows the head only and tells the frame's parent with one
- *   message, { pmosFocus: 'fold' | 'open' }, that carries no data. */
+ *   message, { pmosFocus: 'fold' | 'open' }, that carries no data.
+ * Phone mode (phone, initiative c3-phone-companion, mockup version 5): the phone companion opens this page when a recording starts. It is the full
+ *   page in one column: a head with "Back to your day" (recording goes on), the title, the clock and the bar of the talk; the now line; chips that open
+ *   sheets (Topics, Captured, Note, and Your slides or Material for the stage); What's being said; the conversation; and a foot with Ask PMOS quietly
+ *   and Stop. Nothing on it leads to the desktop pages. A recording that is not on the calendar (a talk in the corridor) opens with note and no
+ *   event: GET /api/meeting-focus?note= answers it with no topics, no brief and no stage. The address is not changed. */
 import { el } from './dom.js';
 import { pmGet, pmPost } from './http.js';
 import { ensureC3Css } from './pm-work-view.js';
@@ -77,27 +82,37 @@ export function closeFocus() {
   const host = document.getElementById('c3-root');
   if (host) host.classList.remove('fc-open');
   const grid = host && host.querySelector('.c3grid'); if (grid) grid.inert = false;
+  const comp = host && host.querySelector('[data-c3ph]'); if (comp) comp.inert = false;
+  if (f.phone) { const st = f.phone && document.querySelector('[data-c3ph-focus-bar]'); if (st) st.focus({ preventScroll: true }); return; }
   try { const u = new URL(location.href); if (u.searchParams.has('focus')) { u.searchParams.delete('focus'); u.searchParams.delete('fdate'); history.replaceState(history.state, '', u); } } catch { /* no history */ }
   if (f.opener && document.contains(f.opener) && typeof f.opener.focus === 'function') { try { f.opener.focus({ preventScroll: true }); } catch { /* not focusable any more */ } }
 }
 
-export function openFocus({ event, date, pop, back, meet, mtitle } = {}) {
+export function openFocus({ event, date, pop, back, phone, note, meet, mtitle } = {}) {
   closeFocus();
   const ev = event || {};
   const want = String(ev.id || '');
+  if (phone) pop = false;   // the phone has the whole page, in one column
   const resolve = !!pop && want === 'now';   // the extension names no meeting: which one this call is comes first
   const id = resolve ? '' : want;
   const day = String(date || String(ev.at || ev.start || '').slice(0, 10) || '');
   ensureCss();
   const host = document.getElementById('c3-root') || document.body;
-  const root = el('div', { class: 'c3focus' + (pop ? ' fc-pop' : ''), role: 'region', 'aria-label': pop ? 'PMOS meeting helper' : 'Meeting focus', 'data-c3focus': '', ...(pop ? { 'data-fc-pop': '' } : {}) });
+  const root = el('div', { class: 'c3focus' + (pop ? ' fc-pop' : '') + (phone ? ' fc-phone' : ''), role: 'region', 'aria-label': pop ? 'PMOS meeting helper' : 'Meeting focus', 'data-c3focus': '', ...(pop ? { 'data-fc-pop': '' } : {}), ...(phone ? { 'data-fc-phone': '' } : {}) });
   const r = {};
+  r.form = askForm();
   const convo = el('section', { class: 'fc-cv', 'aria-label': 'The conversation, with PMOS' },
-    pop ? null : el('div', { class: 'fc-cv-h' }, el('b', null, 'Conversation'), el('span', { class: 'dim' }, 'PMOS replies only to you')),
+    pop || phone ? null : el('div', { class: 'fc-cv-h' }, el('b', null, 'Conversation'), el('span', { class: 'dim' }, 'PMOS replies only to you')),
     r.tick = el('div', { class: 'fc-tk', 'aria-label': 'Last lines in the room', 'data-fc': 'ticker' }),
     r.stream = el('ol', { class: 'fc-s2', role: 'list', 'data-fc': 'stream' }),
-    r.form = askForm());
-  const page = pop
+    phone ? null : r.form);
+  const page = phone
+    ? el('div', { class: 'fc-page' },
+      r.top = el('header', { class: 'fc-phd', 'data-fc': 'phone-head' }),
+      r.now = el('div', { class: 'fc-phnow', 'data-fc': 'now-line' }),
+      r.band = el('div', { class: 'fc-bandwrap' }), convo,
+      el('div', { class: 'fc-phft', 'data-fc': 'phone-foot' }, r.form, r.act = el('span', { class: 'fc-phact' })))
+    : pop
     ? el('div', { class: 'fc-page' },
       r.top = el('header', { class: 'fc-ph', 'data-fc': 'pop-head' }),
       el('div', { class: 'fc-popbody', 'data-fc': 'pop-body' },
@@ -114,14 +129,15 @@ export function openFocus({ event, date, pop, back, meet, mtitle } = {}) {
         el('aside', { class: 'fc-w', 'aria-label': 'Conversation' }, convo)));
   root.append(page);
   F = { id, date: day, ev0: ev, root, r, sig: {}, data: null, offset: 0, ui: { open: new Set(), folded: new Set(), pulled: [], stage: 0, picker: false, newTopic: false, addTopic: false, heldOpen: false, pending: new Map(), failed: new Map(), pill: false },
-    pop: !!pop, back: !!back, meet: String(meet || ''), mtitle: String(mtitle || ''), choices: null,
+    pop: !!pop, back: !!back, phone: !!phone, noteId: id ? '' : String(note || ''), meet: String(meet || ''), mtitle: String(mtitle || ''), choices: null,
     timers: {}, askTimers: new Map(), sheet: null, sheetOpen: false, status: 'reading', error: '',
     opener: document.activeElement && document.activeElement !== document.body ? document.activeElement : null, seenNotes: 0 };
   // a fixed box inside an element with container-type is placed against that element, not the screen: lift it while the page is open
   host.classList.add('fc-open');
   host.append(root);
   const grid = host.querySelector && host.querySelector('.c3grid'); if (grid) grid.inert = true;
-  if (!pop) { try { const u = new URL(location.href); u.searchParams.set('focus', id); if (day) u.searchParams.set('fdate', day); history.replaceState(history.state, '', u); } catch { /* no history */ } }   // the compact page keeps its address: a reload asks again which meeting it is
+  const comp = host.querySelector && host.querySelector('[data-c3ph]'); if (comp) comp.inert = true;   // the phone companion under the page
+  if (!pop && !phone) { try { const u = new URL(location.href); u.searchParams.set('focus', id); if (day) u.searchParams.set('fdate', day); history.replaceState(history.state, '', u); } catch { /* no history */ } }   // the compact page keeps its address: a reload asks again which meeting it is
   draw();
   F.timers.clock = setInterval(tick, 1000);
   if (resolve) resolveNow(); else load();
@@ -162,8 +178,9 @@ async function load() {
   const e = f.ev0;
   const p = new URLSearchParams();
   if (f.id) p.set('event', f.id);
-  if (f.date) p.set('date', f.date);
-  if (!f.id && (e.at || e.start)) { p.set('at', e.at || e.start); if (e.title) p.set('title', e.title); }
+  else if (f.noteId) p.set('note', f.noteId);   // a recording with no meeting
+  if (f.date && !f.noteId) p.set('date', f.date);
+  if (!f.id && !f.noteId && (e.at || e.start)) { p.set('at', e.at || e.start); if (e.title) p.set('title', e.title); }
   const j = await pmGet('/api/meeting-focus?' + p.toString());
   if (F !== f) return;
   if (j && j.ok) {
@@ -199,6 +216,7 @@ function draw() {
   const d = F.data;
   F.root.dataset.fcState = d ? 'ok' : F.status;
   if (F.pop) { drawPop(d); return; }
+  if (F.phone) { drawPhone(d); return; }
   if (!d) {
     const title = F.ev0.title || 'Meeting';
     region('top', ['wait', F.status, F.error], () => [el('div', { class: 'fc-id' }, leaveBtn(), el('div', { class: 'fc-tt' }, el('h1', null, title),
@@ -249,6 +267,107 @@ function popMessage() {
   if (F.status === 'reading') return [el('p', { class: 'dim mono fc-popmsg', role: 'status', 'data-fc': 'pop-msg' }, 'Reading the meeting.')];
   return [el('p', { class: 'dim mono fc-popmsg', role: 'status', 'data-fc': 'pop-msg' }, F.status === 'missing' ? 'PMOS has no record of this meeting on the calendar, so there is nothing to show.' : F.error || 'The meeting could not be read.')];
 }
+/* ── phone mode: the full page in one column ────────────────────────────────────────────────────────────────── */
+
+function drawPhone(d) {
+  if (!d) {
+    const title = F.ev0.title || (F.noteId ? 'Conversation' : 'Meeting');
+    region('top', ['wait', F.status, F.error], () => [el('div', { class: 'fc-phid' }, backBtn(), el('div', { class: 'fc-tt' }, el('h1', null, title),
+      el('div', { class: 'dim mono fc-sub', role: 'status' }, F.status === 'missing' ? (F.noteId ? 'PMOS could not find the notes of this recording.' : 'PMOS has no record of this meeting on the calendar, so there is nothing to show.') : F.status === 'error' ? F.error : 'Reading the meeting.')))]);
+    for (const k of ['now', 'band', 'tick', 'stream', 'act']) region(k, 'wait', () => []);
+    return;
+  }
+  const ph = phaseOf();
+  drawPhTop(d, ph); drawPhNow(d, ph); drawBand(d); drawConversation(d); drawPhAct(d, ph);
+  tick();
+}
+const backBtn = () => ib('Back to your day', 'prev', { 'data-fc': 'leave', title: 'Back to your day. It keeps recording.' });
+function drawPhTop(d, ph) {
+  const e = d.event; const rec = recState(d); const ini = (d.brief && d.brief.initiative) || null;
+  const sig = [e.title, e.at, e.end, e.attendees, ini, e.initiative, ph, rec, !!d.talk, 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 || [];
+    const sub = d.talk ? [Number.isFinite(s) ? 'Started ' + hhmm(s) : null, 'not on the calendar']
+      : [Number.isFinite(s) ? hhmm(s) + (Number.isFinite(f) ? ' to ' + hhmm(f) : '') : null, ini ? ini.title : e.initiative, people.length ? people.length + (people.length === 1 ? ' person' : ' people') : null];
+    const clock = ph === 'before'
+      ? [el('b', { class: 'mono', 'data-fc': 'big' }, clockText((s - nowMs()) / 1000)), el('span', { class: 'dim mono' }, 'starts in')]
+      : [el('span', { class: 'fc-recd', 'data-fc': 'rec', 'data-rec': rec, title: rec === 'recording' ? 'Recording' : rec === 'paused' ? 'Paused' : '' }, rec === 'recording' ? el('span', { class: 'fc-dot' }) : null,
+        el('b', { class: 'mono', 'data-fc': 'big' }, clockText((nowMs() - s) / 1000))),
+      Number.isFinite(f) ? el('span', { class: 'dim mono' }, el('span', { 'data-fc': 'left' }, clockText((f - nowMs()) / 1000)), ' left') : rec === 'paused' ? el('span', { class: 'dim mono' }, 'paused') : null];
+    return [el('div', { class: 'fc-phid' }, backBtn(),
+      el('div', { class: 'fc-tt' }, el('h1', null, e.title), el('div', { class: 'dim mono fc-sub' }, sub.filter(Boolean).join(' · '))),
+      el('div', { class: 'fc-phclk', role: 'timer', 'aria-live': 'off' }, ...clock)),
+    d.talk || !d.runs.length ? null : trackEl(d),
+    F.stale ? el('p', { class: 'dim mono fc-stale', role: 'status' }, 'The last read failed. Showing what PMOS had.') : null];
+  });
+}
+function drawPhNow(d, ph) {
+  const cur = currentOf(d); const nc = d.topics.filter((t) => t.state === 'notyet').length; const cap = capCount(d);
+  const links = linksOf(d); const slides = links.some((l) => l.kind === 'slides');
+  region('now', [cur && cur.id, cur && cur.text, d.topics.length, nc, cap, d.note && d.note.id, ph, d.topics[0] && d.topics[0].text, !!d.talk, links.length, slides], () => [
+    d.talk ? null : cur
+      ? el('div', { class: 'fc-nowt' }, el('span', { class: 'ki hot' }, icon('play', 'sm')), el('b', { 'data-fc': 'topic' }, cur.text), el('span', { class: 'mono dim', 'data-fc': 'onfor' }, ''))
+      : el('div', { class: 'fc-nowt dim', 'data-fc': 'first' }, d.topics.length ? [ph === 'before' ? 'First up: ' : 'No topic yet. First up: ', el('b', null, d.topics[0].text)] : 'No topics yet. PMOS adds topics as they come up.'),
+    el('div', { class: 'fc-phchips', role: 'group', 'aria-label': 'Open beside the talk' },
+      d.talk ? null : lk({ 'data-fc': 'topics' }, icon('todo', 'sm'), d.topics.length + ' topic' + (d.topics.length === 1 ? '' : 's') + (cur && nc ? ' · ' + nc + ' not yet' : '')),
+      lk({ 'data-fc': 'captured' }, icon('check', 'sm'), 'Captured ' + cap),
+      d.note ? lk({ 'data-fc': 'note' }, icon('notes', 'sm'), 'Note') : null,
+      links.length ? lk({ 'data-fc': 'material' }, icon('doc', 'sm'), slides ? 'Your slides' : 'Material') : null)]);
+}
+function drawPhAct(d, ph) {
+  const rec = recState(d);
+  region('act', [rec, ph], () => (rec === 'recording' || rec === 'paused' ? [pbtn('outline', 'Stop', 'stop', { 'data-fc': 'stop', title: 'Stop recording' })]
+    : rec !== 'ended' && ph !== 'after' && !d.talk ? [pbtn('primary', 'Record', 'play', { 'data-fc': 'start', title: 'Records this meeting in a note' })] : []));
+}
+function stopBuild() {
+  const d = F.data; const f = endMs(); const left = Number.isFinite(f) ? Math.round((f - nowMs()) / 60000) : 0;
+  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' })))];
+}
+function materialBuild() { return stageBody(F.data, phaseOf()); }
+
+/* the live note, in a sheet: what PMOS picked out so far, or the last lines of the transcript (GET /api/notes/one) */
+const NOTE_MS = 6000;
+async function readNote() {
+  const f = F; if (!f || !f.data || !f.data.note) return;
+  const id = f.data.note.id;
+  if (f.noteBusy || (f.noteDoc && f.noteDoc.id === id && Date.now() - f.noteDoc.at < NOTE_MS)) return;
+  f.noteBusy = true;
+  try {
+    const [dn, vn, demo] = await Promise.all([import('./dest-notes.js'), import('./view-notes.js'), isDemo() ? import('./c3-demo-focus.js') : null]);
+    const j = demo ? demo.focusNote(id, f.data) : await pmGet('/api/notes/one?id=' + encodeURIComponent(id));
+    const n = j && j.ok !== false ? j.note : null;
+    f.noteDoc = { id, at: Date.now(), n, parts: n ? dn.partsOf(n) : null, speakerOf: vn.speakerOf };
+  } catch { f.noteDoc = { id, at: Date.now(), n: null, parts: null }; }
+  f.noteBusy = false;
+  if (F === f) refreshSheet();
+}
+function noteBuild() {
+  const doc = F.noteDoc; const tab = F.ui.noteTab || 'note';
+  const seg = el('div', { class: 'seg', role: 'group', 'aria-label': 'Show' },
+    ...[['note', 'Note'], ['said', 'Transcript']].map(([k, l]) => button({ variant: 'ghost', label: l, attrs: { 'aria-pressed': String(tab === k), 'data-fc': 'note-tab', 'data-tab': k } })));
+  if (!doc) return [el('div', { class: 'fc-notesheet', 'data-fc': 'note-sheet' }, seg, el('p', { class: 'dim fc-note', role: 'status' }, 'Opening the note.'))];
+  if (!doc.n) return [el('div', { class: 'fc-notesheet', 'data-fc': 'note-sheet' }, seg, el('p', { class: 'dim fc-note', role: 'status' }, 'The note could not be read. It is kept on your computer.'))];
+  const body = [];
+  if (tab === 'said') {
+    const lines = (doc.n.transcript || []).filter((x) => x && x.text && !x.dropped).slice(-12);
+    body.push(lines.length ? el('ul', { class: 'fc-said', role: 'list', 'data-fc': 'note-said' }, ...lines.map((x) => el('li', null, el('b', null, (doc.speakerOf ? doc.speakerOf(doc.n, x.source) : x.source) + ' '), x.text)))
+      : el('p', { class: 'dim fc-note' }, 'Nothing is heard yet.'));
+    body.push(el('p', { class: 'dim fc-note' }, 'Fast lines are provisional and corrected at each pause.'));
+  } else {
+    const p = doc.parts || { overview: '', decisions: [], actions: [], questions: [] };
+    const list = (h, rows, fmt) => (rows.length ? el('div', { 'data-fc-part': h.toLowerCase() }, el('div', { class: 'dim mono fc-lbl' }, h + ' · ' + rows.length), el('ul', { class: 'fc-said', role: 'list' }, ...rows.map((x) => el('li', null, fmt(x))))) : null);
+    if (p.overview) body.push(el('p', { class: 'fc-p' }, p.overview));
+    body.push(list('Decisions', p.decisions || [], (x) => x.text), list('Actions', p.actions || [], (x) => [x.text, x.owner ? ' · ' + x.owner : '', x.due ? ' · due ' + x.due : ''].join('')), list('Open questions', p.questions || [], (x) => x.text));
+    if (!p.overview && !(p.decisions || []).length && !(p.actions || []).length && !(p.questions || []).length) body.push(el('p', { class: 'dim fc-note' }, 'PMOS writes the note as the talk goes. Nothing is picked out yet.'));
+  }
+  return [el('div', { class: 'fc-notesheet', 'data-fc': 'note-sheet' }, seg, ...body.filter(Boolean), el('p', { class: 'dim fc-note' }, 'The whole note opens on your computer.'))];
+}
+function openNoteSheet() { F.ui.noteTab = F.ui.noteTab || 'note'; showSheet('note', 'Live note', 'notes', noteBuild); readNote(); }
+
 /** The full focus page, in a new tab: the compact page's way to everything it leaves out. */
 function fullUrl() {
   const u = new URL('/c3.html', location.origin);
@@ -276,6 +395,23 @@ function leftText(d, ph) {
   return { txt: warn ? nc + ' topic' + (nc > 1 ? 's' : '') + ' left for ' + left + ' min' : '', warn };
 }
 
+/** The thin bar of the stretches of talk, numbered by topic, with a mark for now. */
+function trackEl(d) {
+  const s = startMs(); const f = endMs();
+  const total = Number.isFinite(s) && Number.isFinite(f) ? (f - s) / 60000 : 60;
+  const track = d.runs.map((r) => {
+    const open = r.to_min == null;
+    const to = open ? Math.max(r.from_min, (nowMs() - s) / 60000) : r.to_min;
+    const w = Math.max(0, (to - r.from_min) / total * 100);
+    const t = d.topics.find((x) => x.id === r.topic);
+    const seg = el('i', { class: open ? 'c' : 'd', ...(open ? { 'data-fc': 'currun' } : {}), title: (t ? t.text : '') + ' · ' + Math.round(to - r.from_min) + ' min' }, w >= 6 ? String(topicNo(d, r.topic)) : '');
+    seg.style.setProperty('--fc-left', Math.min(100, r.from_min / total * 100) + '%');
+    seg.style.setProperty('--fc-width', Math.min(100, w) + '%');
+    return seg;
+  });
+  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' }));
+}
+
 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];
@@ -289,17 +425,6 @@ function drawTop(d, ph) {
       : [el('div', null, el('b', { class: 'mono', 'data-fc': 'big' }, clockText((nowMs() - s) / 1000)), el('span', { class: 'dim mono' }, 'elapsed')),
         Number.isFinite(f) ? el('div', null, el('b', { class: 'mono', 'data-fc': 'left' }, clockText((f - nowMs()) / 1000)), el('span', { class: 'dim mono' }, 'left')) : null];
     const recLabel = rec === 'recording' ? 'REC' : rec === 'paused' ? 'Paused' : rec === 'ended' ? 'Ended' : '';
-    const track = d.runs.map((r) => {
-      const total = Number.isFinite(s) && Number.isFinite(f) ? (f - s) / 60000 : 60;
-      const open = r.to_min == null;
-      const to = open ? Math.max(r.from_min, (nowMs() - s) / 60000) : r.to_min;
-      const w = Math.max(0, (to - r.from_min) / total * 100);
-      const t = d.topics.find((x) => x.id === r.topic);
-      const seg = el('i', { class: open ? 'c' : 'd', ...(open ? { 'data-fc': 'currun' } : {}), title: (t ? t.text : '') + ' · ' + Math.round(to - r.from_min) + ' min' }, w >= 6 ? String(topicNo(d, r.topic)) : '');
-      seg.style.setProperty('--fc-left', Math.min(100, r.from_min / total * 100) + '%');
-      seg.style.setProperty('--fc-width', Math.min(100, w) + '%');
-      return seg;
-    });
     return [
       el('div', { class: 'fc-id' }, leaveBtn(),
         el('div', { class: 'fc-tt' }, el('h1', null, e.title),
@@ -310,7 +435,7 @@ function drawTop(d, ph) {
         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' || 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),
-      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' })),
+      trackEl(d),
       F.stale ? el('p', { class: 'dim mono fc-stale', role: 'status' }, 'The last read failed. Showing what PMOS had.') : null,
     ];
   });
@@ -368,29 +493,33 @@ 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]];
+  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 sig = [ph, links, F.ui.stage, F.ui.preview, cur && cur.text, d.brief && [d.brief.prep, d.brief.matters, d.brief.last]];
-  region('stage', sig, () => {
-    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.'))];
-    }
-    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.'))];
-    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),
-        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)];
-  });
+  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.'))];
+  }
+  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.'))];
+  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),
+      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)];
 }
 
 /* ── captured, under the stage in the last minutes ─────────────────────────────────────────────────────────────── */
@@ -528,8 +657,10 @@ function tick() {
 
 /* ── side sheets: Topics and Captured ─────────────────────────────────────────────────────────────────────────── */
 
-function refreshSheet() {
+function refreshSheet(force) {
   if (!F || !F.sheetOpen || !F.sheet) return;
+  if (!force && (F.sheet.kind === 'material' || F.sheet.kind === 'stop' || F.sheet.kind === 'chip')) return;   // a loaded preview is not loaded again on each read
+  if (!force && F.sheet.kind === 'note') readNote();
   const b = F.sheet.body;
   if (!b.isConnected) return;
   const a = document.activeElement;
@@ -605,6 +736,10 @@ function openRef(ref) {
   if (!ref) return;
   const t = ref.type;
   if (F && F.pop) { openFull(); return; }   // the compact page is a small frame: what a note names opens in the full page
+  if (F && F.phone) {   // the phone has no desktop pages to go to
+    if (t === 'note' && F.data && F.data.note && ref.id === F.data.note.id) openNoteSheet(); else toast('That opens on your computer.');
+    return;
+  }
   closeFocus();
   if (t === 'initiative') { import('./c3-init-extras.js').then((m) => { if (!m.goInitiative(ref.id)) goTab('init'); }).catch(() => goTab('init')); return; }
   if (t === 'note') { window.dispatchEvent(new CustomEvent('c3-open-note', { detail: { id: ref.id } })); return; }
@@ -619,7 +754,7 @@ function openRef(ref) {
 }
 function openChip(c) {
   if (!c) return;
-  if (c.ref) { openRef(c.ref); return; }
+  if (c.ref && !(F && F.phone && (c.detail || c.sub))) { openRef(c.ref); return; }
   if (c.url) { openUrl(c.url); return; }
   showSheet('chip', c.label, 'doc', () => [el('div', { class: 'fc-chipsheet', 'data-fc': 'chip-sheet' }, el('p', { class: 'fc-p' }, c.detail || c.sub || c.label), c.from ? el('p', { class: 'dim fc-note' }, 'From ' + c.from + '.') : null)]);
 }
@@ -655,6 +790,9 @@ function onClick(ev) {
   if (!d) 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; }
+  if (k === 'material') { showSheet('material', linksOf(d).some((l) => l.kind === 'slides') ? 'Your slides' : 'Material', 'doc', materialBuild); return; }
+  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; }
@@ -687,4 +825,10 @@ document.addEventListener('click', (ev) => {
     return;
   }
   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 === 'note-tab') { F.ui.noteTab = t.dataset.tab === 'said' ? 'said' : 'note'; refreshSheet(true); return; }
+  if (k === 'stop-keep') { closeSheet(); return; }
+  if (k === 'stop-ok') { closeSheet(); endMeeting().then(() => { if (F && F.phone) closeFocus(); }); return; }
 });