create-pmos 0.134.0 → 0.136.0

package/workspace/public/pm/shell-bell.js

@@ -66,7 +66,8 @@ let unreadSeen = 0;                    // how many the person has already looked
 let lastCount = 0;
 let bellSheet = null;
 let liveTimer = null; let liveDone = false;
-const notifList = (b) => [...arrived, ...notifsOf(b)];
+/* b.notices: what a dashboard schedule made (routes-briefing.js); each goes to Reports > Drafts. */
+const notifList = (b) => [...arrived, ...notifsOf(b), ...(b && Array.isArray(b.notices) ? b.notices : [])];
 
 export function openBellList() {
   if (bellSheet && bellSheet.root.isConnected) { bellSheet.close(); return bellSheet; }
@@ -128,7 +129,7 @@ export function mountBell(host, opts) {
   };
   rec.off = onBriefing((b) => {
     rec.b = b;
-    const n = bellCount(b) + arrived.length;
+    const n = bellCount(b) + arrived.length + (b && Array.isArray(b.notices) ? b.notices.length : 0);
     const bump = n > rec.count; rec.count = n; lastCount = n;
     rec.sync();
     if (bump) { badge.classList.remove('bump'); void badge.offsetWidth; badge.classList.add('bump'); }

package/workspace/public/pm/shell-recording.js

@@ -8,8 +8,8 @@
  * (Stop asks first and offers "Pause instead"). All of it goes through pm/note-dock.js, which owns the real recorder, so the audio capture of
  * pm/view-notes.js runs here without the main app's Notes place on screen. The chip opens the note in the main app, because console3 has no
  * Notes place. While one meeting records, a red dot sits on the Calendar tab (`[data-c3-tab="cal"]`) and on a Notes tab if a frame draws one.
- * On /c3.html?demo=1 the control drives a SIMULATED recorder (see below): it opens no microphone and saves nothing, and it shows only while
- * the simulation runs. Lifted: console3.html `.recg` and `recCtl` (lines 916 to 924, 4385 to 4400). The clock is the recorder's own start time.
+ * On /c3.html?demo=1 the control drives a SIMULATED recorder (see below): it opens no microphone and saves nothing; it shows the idle Record button and
+ * arrow, and the live group while the simulation runs. Lifted: console3.html `.recg` and `recCtl` (lines 916 to 924, 4385 to 4400). The clock is the recorder's own start time.
  */
 import { el } from './dom.js';
 import { button } from './primitives.js';
@@ -50,6 +50,25 @@ export const simDock = {
 };
 const live = new WeakMap();
 
+/* Demo mode, idle: the mockup's Record button and the arrow beside it (the same two buttons the real control draws). Record starts the simulated recorder with an
+ * untitled note; the arrow lists the same choice and today's meetings that have not started. Nothing is opened or saved. */
+function simIdle(d) {
+  const glyph = (dd) => { const sv = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); sv.setAttribute('class', 'ic sm'); sv.setAttribute('viewBox', '0 0 24 24'); sv.setAttribute('aria-hidden', 'true'); const pth = document.createElementNS('http://www.w3.org/2000/svg', 'path'); pth.setAttribute('d', dd); sv.appendChild(pth); return sv; };
+  const start = (title) => { if (d === simDock) simStart(title); };
+  const mic = button({ variant: 'ghost', label: [c3ic('mic', 'sm'), el('span', { class: 'c3rec__lbl' }, 'Record')], onClick: () => start('Untitled note'),
+    attrs: { title: 'Record an untitled note', 'aria-label': 'Record an untitled note', 'data-fr-rec-new': '' } });
+  const arrow = button({ variant: 'ghost', label: glyph('M6 9l6 6 6-6'), attrs: { title: 'Record for an upcoming meeting', 'aria-label': 'Record for an upcoming meeting', 'aria-haspopup': 'menu', 'data-fr-rec-upcoming': '' },
+    onClick: async (e) => {
+      const anchor = e.currentTarget;
+      const { menu } = await import('./primitives.js');
+      let evs = [];
+      try { const links = await import('./notes-links.js'); evs = links.upcomingWithoutNote(await links.upcomingToday()); } catch { evs = []; }
+      menu({ anchor, ariaLabel: 'Record a new meeting', items: [{ label: 'Untitled note', icon: 'plus', detail: 'not linked to a meeting', attrs: { 'data-fr-rec-untitled': '' }, onSelect: () => start('Untitled note') }, { sep: true },
+        ...(evs.length ? evs.slice(0, 4).map((x) => ({ label: x.title, hint: x.time || '', attrs: { 'data-fr-rec-event': x.id || '' }, onSelect: () => start(x.title) })) : [{ label: 'No more meetings today', attrs: { 'data-fr-rec-none': '' }, onSelect: () => {} }])] });
+    } });
+  return [mic, arrow];
+}
+
 export function mountRecording(host, opts) {
   if (!host) return;
   disposeRecording(host);
@@ -58,8 +77,9 @@ export function mountRecording(host, opts) {
   const d = (opts && opts.dock) || simDock;
   const nowMs = () => (d.now ? d.now() : Date.now());
   const grp = el('span', { class: 'recg', role: 'group', 'aria-label': 'Recording', hidden: true, 'data-shell': 'recording' });
-  host.insertBefore(grp, host.firstChild);
-  const rec = { grp, key: '', clock: null, tabs: [] };
+  const wrap = el('span', { class: 'c3rec', 'data-fr': 'record' }, grp);   // the same wrapper the real control has, so the idle group takes its look
+  host.insertBefore(wrap, host.firstChild);
+  const rec = { grp: wrap, key: '', clock: null, tabs: [] };
   const tabDot = (on) => {
     for (const t of document.querySelectorAll(TAB)) {
       let dot = t.querySelector('.shell-recdot');
@@ -78,15 +98,16 @@ export function mountRecording(host, opts) {
     const key = [v.mode, st.id, v.title, v.dot].join(':');
     if (key !== rec.key) {
       rec.key = key;
-      grp.hidden = !v.shown;
+      grp.hidden = false;   // the mockup shows the idle Record control too
       grp.classList.toggle('paused', v.mode === 'paused');
-      grp.setAttribute('aria-label', v.shown ? (v.mode === 'recording' ? 'Recording ' : 'Paused: ') + v.title : 'Recording');
-      if (!v.shown) { grp.replaceChildren(); rec.clock = null; }
+      grp.classList.toggle('idle', !v.shown);
+      grp.setAttribute('aria-label', v.shown ? (v.mode === 'recording' ? 'Recording ' : 'Paused: ') + v.title : 'New recording');
+      if (!v.shown) { rec.clock = null; grp.replaceChildren(...simIdle(d)); }
       else {
         rec.clock = el('span', { class: 'recclk', 'data-shell-rec-clock': '' });
         const open = el('button', { type: 'button', title: (v.mode === 'recording' ? 'Recording: ' : 'Paused: ') + v.title + '. Open the live note', 'aria-label': 'Open the note: ' + v.title, 'data-shell-rec-open': '', onclick: () => d.openDock(st.id) },
           el('span', { class: 'recdot' + (v.dot === 'static' ? ' static' : ''), 'data-dot': v.dot }), rec.clock, el('span', { class: 'rt' }, v.title),
-          ...(eng.text ? [el('span', { class: 'c3rec__eng', 'data-fr-rec-engine': '', title: 'The live transcript: engine and language (Notes settings)' }, eng.text)] : []));
+          el('span', { class: 'c3rec__eng', 'data-fr-rec-engine': '', title: 'The live transcript: engine and language (Notes settings). Demo value.' }, 'EN forced \u00b7 whisper'));
         const kids = [open];
         if (v.canMark) kids.push(btn('Mark this moment', 'highlighter', () => d.highlightNow(), 'data-shell-rec-mark'));
         if (v.canPause) kids.push(btn('Pause', 'pause', () => d.pauseNow(), 'data-shell-rec-pause'));

package/workspace/public/pm/tokens.css

@@ -63,7 +63,7 @@
   --brand-mark:oklch(0.623 0.214 259.815);
   --brand:var(--foreground);--brand-wash:color-mix(in oklab, var(--foreground) 8%, transparent);
   --success:oklch(0.76 0.17 152);--warning:oklch(0.82 0.15 82);--info:oklch(0.79 0.11 195);
-  --purple:oklch(0.72 0.15 300);--destructive:oklch(0.704 0.191 22.216);
+  --purple:oklch(0.72 0.15 300);--focus-window:oklch(0.72 0.15 300);--destructive:oklch(0.704 0.191 22.216);
   --term-bg:oklch(0.148 0.004 228.8);
   --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
   --sans:"Space Grotesk",ui-sans-serif,system-ui,sans-serif;
@@ -91,7 +91,7 @@
   --brand-mark:oklch(0.488 0.243 264.376);
   --brand:var(--foreground);--brand-wash:color-mix(in oklab, var(--foreground) 8%, transparent);
   --success:oklch(0.46 0.13 152);--warning:oklch(0.48 0.11 72);--info:oklch(0.47 0.09 195);
-  --purple:oklch(0.5 0.2 300);--destructive:oklch(0.5 0.21 27.325);
+  --purple:oklch(0.5 0.2 300);--focus-window:oklch(0.5 0.2 300);--destructive:oklch(0.5 0.21 27.325);
   --term-bg:oklch(0.148 0.004 228.8);
 }
 @keyframes pmblink{0%,49%{opacity:1}50%,100%{opacity:0}}

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

@@ -47,6 +47,8 @@ import { mdRender } from './markdown.js';
 import { icon } from './icons.js';
 import { button, iconButton, field, row, sheet, empty, menu, toast, ensureComponentsCss } from './primitives.js';
 import { toInt16, makeResampler, openCapture } from './audio-capture.js';
+import { startScreen } from './notes-screen-capture.js';
+import { screenStrip } from './notes-screen-view.js';
 import { agendaHeard, peopleOf as contextPeople } from './notes-context.js';
 
 const SAVE_MS = 700;          // a pause this long in typing saves the note
@@ -72,6 +74,8 @@ let banner = null;            // { tone, text }
 let speech = null;            // the browser recogniser: { mode: 'dictate'|'record', id, state, rec, interim, lang, msg, last }
 let audio = null;             // local Whisper capture: { id, state, sources, ctx, streams, started, clock, msg }
 let engine = null;            // { ws, whisper, jev, at }
+/** Capture the shared screen (notes-screen-capture): on unless the PM switched it off on this machine. */
+const screenOn = () => !(engine && engine.whisper && engine.whisper.screen === false);
 let showList = false;
 let inlineDraw = false;       // the live block is drawing: the fields it shows are left in place (renderLive)
 /** A node this view keeps across redraws (an editor field, the player). The pop-up patches itself (dom.js patchChildren), so
@@ -257,6 +261,9 @@ async function loadNote(ctx, id) {
     if (editor && editor.id === id && dirty) { r.note.title = editor.title.value; r.note.body = editor.body.value; }
     r.note.__audio = r.audio || null;
     r.note.__recording = r.recording || null;
+    r.note.__shots = r.screen ? r.screen.frames || [] : [];
+    // a new line that points at the screen, or a decision or next step, keeps the picture on screen when it was said
+    if (audio && audio.id === id && audio.screen) audio.screen.hear(r.note.transcript || []);
     r.note.bullets_state = r.bullets_state || null;
     cache.set(id, r.note);
     if (!had || sig(had) !== sig(r.note)) ctx.setState({});
@@ -365,7 +372,7 @@ async function setPrivate(ctx, n, priv) {
   // a private press drops what is still buffered: nothing more is sent, transcribed or summarized
   if (priv) await stopAll(ctx, { discard: true });
   const r = await pmPost('/api/notes/private', { id: n.id, private: priv });
-  if (r && r.ok) { n.private = r.private; if (priv) { n.__recording = null; dropPlayer(); } touchRow(n); banner = priv ? { tone: 'ok', text: 'Marked private. Listening stopped, its audio was deleted, and nothing from this note goes to Jev or to any agent.' } : null; }
+  if (r && r.ok) { n.private = r.private; if (priv) { n.__recording = null; n.__shots = []; dropPlayer(); } touchRow(n); banner = priv ? { tone: 'ok', text: 'Marked private. Listening stopped, its audio was deleted, and nothing from this note goes to Jev or to any agent.' } : null; }
   else banner = { tone: 'bad', text: (r && r.error) || 'not changed' };
   ctx.setState({});
 }
@@ -595,6 +602,14 @@ function paintNow() {
   const k = noteLineAt(editor && editor.id === n.id ? editor.body.value : n.body, n.line_times, ms);
   if (k >= 0) { const nl = document.querySelector('[data-nt-noteline="' + k + '"]'); if (nl) nl.classList.add('nt-now'); }
 }
+async function deleteShots(ctx, n) {
+  const sure = await askConfirm({ title: 'Delete this note\'s screenshots?', body: 'The screenshots of "' + (n.title || 'Untitled note') + '" are deleted from this machine. The notes, the transcript and the audio stay. This cannot be undone.', confirmLabel: 'Delete screenshots', danger: true });
+  if (!sure) return;
+  const r = await pmPost('/api/notes/screen-delete', { id: n.id });
+  if (r && r.ok) { n.__shots = []; banner = { tone: 'ok', text: 'The screenshots were deleted. The notes, the transcript and the audio are kept.' }; }
+  else banner = { tone: 'bad', text: (r && r.error) || 'the screenshots were not deleted' };
+  ctx.setState({});
+}
 async function deleteAudio(ctx, n) {
   const sure = await askConfirm({ title: 'Delete this note\'s audio?', body: 'The recording of "' + (n.title || 'Untitled note') + '" is deleted from this machine. The notes and the transcript stay. This cannot be undone.', confirmLabel: 'Delete audio', danger: true });
   if (!sure) return;
@@ -621,16 +636,18 @@ async function cleanNow(ctx, n) {
 }
 
 /* ── listening with local Whisper ─────────────────────────────────────────────────────────────── */
-async function openSource(kind) {
+async function openSource(kind, { screen = false } = {}) {
   const md = navigator.mediaDevices;
   if (kind === 'mic') return md.getUserMedia({ audio: { echoCancellation: true, noiseSuppression: true, channelCount: 1 } });
   // The meeting is often in Zoom or another app, not in this tab: offer the whole screen first (its system audio carries every app),
   // keep every window and tab selectable, and leave PMOS's own tab out, because it has no sound. Chrome ignores a hint it does not know.
   const s = await md.getDisplayMedia({ video: { displaySurface: 'monitor' }, audio: { echoCancellation: false, noiseSuppression: false, autoGainControl: false }, systemAudio: 'include', monitorTypeSurfaces: 'include', surfaceSwitching: 'include', selfBrowserSurface: 'exclude' });
   const tracks = s.getAudioTracks();
-  for (const t of s.getVideoTracks()) t.stop();           // only the sound is used
-  if (!tracks.length) throw Object.assign(new Error('The shared screen, window or tab has no audio. Share it again, and tick "Also share system audio" (entire screen) or "Share tab audio" (a tab).'), { noAudio: true });
-  return new MediaStream(tracks);
+  // the picture of the same share is kept for screenshots when Capture the shared screen is on (notes-screen-capture); else only the sound is used
+  const video = screen ? s.getVideoTracks()[0] || null : null;
+  for (const t of s.getVideoTracks()) if (t !== video) t.stop();
+  if (!tracks.length) { if (video) video.stop(); throw Object.assign(new Error('The shared screen, window or tab has no audio. Share it again, and tick "Also share system audio" (entire screen) or "Share tab audio" (a tab).'), { noAudio: true }); }
+  return Object.assign(new MediaStream(tracks), { screenTrack: video });
 }
 /** The meeting source reaches PMOS as exact silence while the microphone is heard: the other people are not being recorded. Most often the
  * sharing window had the wrong tab (PMOS's own tab has no sound). Say so once, and take the message back if sound arrives. */
@@ -651,14 +668,14 @@ async function startAudio(ctx, n, want) {
   const opened = [];
   // the meeting first, straight from the press: the browser lets a page share a screen only right after a click
   for (const kind of want.slice().sort((x, y) => (x === 'meeting' ? -1 : y === 'meeting' ? 1 : 0))) {
-    try { opened.push([kind, await openSource(kind)]); }
+    try { opened.push([kind, await openSource(kind, { screen: kind === 'meeting' && screenOn() })]); }
     catch (e) { a.msg = (a.msg ? a.msg + ' ' : '') + (kind === 'mic' ? 'The microphone was not opened' : 'The meeting audio was not opened') + ': ' + ((e && e.noAudio) ? e.message : ((e && e.message) || 'permission was refused') + '.'); }
   }
   await stopAll(ctx); await flushSave(ctx);
   audio = a; if (banner && banner.audioMsg) banner = null; ctx.setState({});
   if (!opened.length) { audio = null; banner = { tone: 'bad', text: a.msg || 'Nothing to listen to.' }; ctx.setState({}); return; }
   const r = await pmPost('/api/notes/record', wsOf(ctx) ? { id: n.id, ws: wsOf(ctx) } : { id: n.id });
-  if (!r || !r.ok) { for (const [, s] of opened) for (const t of s.getTracks()) t.stop(); audio = null; banner = { tone: 'bad', text: (r && r.error) || 'listening did not start' }; ctx.setState({}); return; }
+  if (!r || !r.ok) { for (const [, s] of opened) { for (const t of s.getTracks()) t.stop(); if (s.screenTrack) s.screenTrack.stop(); } audio = null; banner = { tone: 'bad', text: (r && r.error) || 'listening did not start' }; ctx.setState({}); return; }
   n.recorded_from = r.recorded_from;
   // the clock counts the meeting time, as the line times do: Listen again carries on from where it stopped
   a.started = Date.parse(r.clock_from || r.recorded_from) || a.started;
@@ -687,6 +704,14 @@ async function startAudio(ctx, n, want) {
     });
     for (const t of stream.getTracks()) t.addEventListener('ended', () => { if (audio !== a) return; a.ended++; if (a.ended >= a.streams.length) stopAudio(ctx); });
   }
+  // screenshots of the shared screen, on the meeting clock, while this capture lasts (notes-screen-capture)
+  const shared = opened.find(([kind, s]) => kind === 'meeting' && s.screenTrack);
+  if (shared && a.cap) {
+    const track = shared[1].screenTrack;
+    a.screen = startScreen({ track, id: a.id, cap: a.cap, clock: () => Date.now() - a.started, post: (b) => pmPost('/api/notes/screen', b) });
+    // the PM stops sharing the picture only: the sound goes on, and the shots stop
+    track.addEventListener('ended', () => { if (a.screen) a.screen.stop(); });
+  } else if (shared) shared[1].screenTrack.stop();
   a.state = 'on';
   a.clock = setInterval(() => { tickClocks(a.started); checkSilence(ctx, a); }, 1000);
   ctx.setState({});
@@ -727,6 +752,7 @@ async function stopAudio(ctx, { discard = false, resumable = true } = {}) {
   audio = null;
   if (banner && banner.silent) banner = null;
   clearInterval(a.clock);
+  if (a.screen) a.screen.stop();
   for (const s of a.streams) for (const t of s.getTracks()) { try { t.stop(); } catch { /* stopped */ } }
   try { if (a.ctx) await a.ctx.close(); } catch { /* closed */ }
   if (discard) { ctx.setState({}); return; }
@@ -855,6 +881,7 @@ export function highlightNow(ctx, id) {
   if (at === null) return false;
   if (highlight && highlight.state === 'listening') { hlOpen = true; ctx.setState({}); return true; }
   highlight = { id: n.id, title: n.title || '', at, from: Math.max(0, at - HL_BEFORE_MS), state: 'listening', pressed: Date.now(), result: null, error: null };
+  if (audio && audio.id === n.id && audio.screen) audio.screen.cue(at, 'highlight');   // the picture on screen when the PM pressed it
   hlOpen = true;
   clearInterval(highlightTimer);
   highlightTimer = setInterval(() => hlTick(ctx), 500);
@@ -1008,7 +1035,7 @@ async function chooseSources(ctx, n) {
 }
 async function setSwitch(ctx, patch) {
   const ws = wsOf(ctx);
-  if (!ws && patch.language === undefined && patch.model === undefined && patch.keep_audio === undefined && patch.clean_audio === undefined) return;
+  if (!ws && patch.language === undefined && patch.model === undefined && patch.keep_audio === undefined && patch.clean_audio === undefined && patch.screen === undefined) return;
   const r = await pmPost('/api/notes/switch', ws ? { ws, ...patch } : patch);
   if (r && r.ok) engine = { ws, whisper: r.whisper, jev: r.jev, at: Date.now() };
   ctx.setState({});
@@ -1048,7 +1075,13 @@ function openSettings(ctx, n) {
       w && w.keep_audio !== false ? el('p', { class: 'nt-hint', 'data-nt-clean-hint': w.ffmpeg ? 'ready' : 'missing' }, w.ffmpeg
         ? (w.clean_audio === true ? 'After Stop, the replay gets a cleaned copy: less rumble and hiss, and an even loudness. The transcript is not changed.'
           : 'Off. When on, the replay gets a cleaned copy after Stop: less rumble and hiss, and an even loudness.')
-        : 'This needs ffmpeg, which was not found on this machine. Install it with brew install ffmpeg, then open Settings again.') : null));
+        : 'This needs ffmpeg, which was not found on this machine. Install it with brew install ffmpeg, then open Settings again.') : null,
+      w ? field({ label: 'Capture the shared screen', kind: 'check', value: w.screen !== false,
+        onCommit: (v) => setSwitch(ctx, { screen: v }).then(() => { h.close(); openSettings(ctx, n); }), attrs: { 'data-nt-screen-switch': '' } }) : null,
+      w ? el('p', { class: 'nt-hint', 'data-nt-screen-hint': w.ocr ? 'ocr' : 'no-ocr' }, w.screen !== false
+        ? 'When you share the meeting\'s screen, a screenshot is kept each time the picture changes, on this machine, beside the transcript. Nothing is sent anywhere. '
+          + (w.ocr ? 'The text on each screenshot is read on this machine with tesseract.' : 'To also read the text on each screenshot, install tesseract (brew install tesseract).')
+        : 'Off. Only the sound of the shared screen is used.') : null));
     const fp = w && w.final;
     if (fp) {
       const have = [fp.transcriber === 'qwen' ? 'Qwen3-ASR' : fp.transcriber === 'parakeet' ? 'Parakeet' : fp.transcriber === 'whisper' ? 'Whisper with beam search' : null,
@@ -1081,6 +1114,7 @@ function openSettings(ctx, n) {
         button({ label: busy === 'agent' ? 'Starting …' : 'Summary by agent', disabled: n.private || busy === 'agent', onClick: () => { h.close(); summarizeAgent(ctx, n); }, attrs: { 'data-nt-summarize-agent': '' } }),
         n.__recording || (n.final_state && n.final_state.state === 'failed') ? button({ label: 'Transcribe again', disabled: n.private || finalPending(n), onClick: () => { h.close(); runFinal(ctx, n); }, attrs: { 'data-nt-final-again': '' } }) : null,
         n.__recording && w && w.clean_audio === true && w.ffmpeg && !n.__recording.cleaned ? button({ label: 'Clean up this note\'s sound', disabled: n.private || listening(n), onClick: () => { h.close(); cleanNow(ctx, n); }, attrs: { 'data-nt-clean-now': '' } }) : null,
+        (n.__shots || []).length ? button({ label: 'Delete this note\'s screenshots', variant: 'ghost', onClick: () => { h.close(); deleteShots(ctx, n); }, attrs: { 'data-nt-delete-shots': '' } }) : null,
         n.__recording ? button({ label: 'Delete this note\'s audio', variant: 'ghost', onClick: () => { h.close(); deleteAudio(ctx, n); }, attrs: { 'data-nt-delete-audio': '' } }) : null,
         button({ label: 'Delete', variant: 'ghost', onClick: () => { h.close(); deleteNote(ctx, n); }, attrs: { 'data-nt-delete': '' } }))));
     return parts;
@@ -1597,6 +1631,7 @@ function noteColumn(ctx, n, ed) {
   const bs = n.bullets_state;
   const parts = [];
   if (n.__audio && n.__audio.error && live) parts.push(el('p', { class: 'nt-hint nt-hint--bad', 'data-nt-audio-error': '' }, n.__audio.error));
+  if (live && audio && audio.id === n.id && audio.screen) parts.push(el('p', { class: 'nt-hint', 'data-nt-screen-live': '' }, 'The shared screen is captured each time it changes, on this machine.'));
   if (!live && n.final_notes) {
     // the notes written after Stop replace the live draft (Run 9)
     parts.push(...finalNotesSections(ctx, n), myNotes(ctx, n, ed), wisprSection(ctx, n));
@@ -1703,6 +1738,8 @@ export function renderBoard(inner, ctx) {
     const pl = !listening(n) ? playerFor(ctx, n) : null;
     if (pl) wrap.appendChild(el('div', { class: 'nt-replay', 'data-nt-part': 'replay' }, el('span', { class: 'nt-sec__h' }, 'Replay'), pl.el,
       el('span', { class: 'nt-hint' }, 'Kept on this machine. Press a time in the transcript to play from there.')));
+    // the screenshots of the shared screen, on the replay's clock (notes-screen-capture)
+    if (!listening(n) && !n.private && (n.__shots || []).length) wrap.appendChild(screenStrip({ id: n.id, frames: n.__shots, seek: pl ? (ms) => seek(ctx, n, ms) : null, replay: pl ? pl.el : null }));
     wrap.appendChild(el('div', { class: 'nt-body2' }, noteColumn(ctx, n, ed), transcriptColumn(ctx, n)));
     if (pl) queueMicrotask(paintNow);
     if (((n.agent && n.agent.started && !n.agent.markdown) || finalPending(n)) && !agentTimer) pollAgent(ctx, n.id);