create-pmos 0.240.0 → 0.242.0

package/workspace/public/pm/listen-sheet.js

@@ -0,0 +1,94 @@
+/* listen-sheet.js — the sheets Listen shows before it asks the browser to share (initiative meeting-material-replay, part 3).
+ *
+ *   askListen({ shots }) → Promise<{ app, picture, shots } | null>   "Where is the meeting?": Zoom app, Google Meet in Chrome or Another app,
+ *                                          what PMOS listens to and sees, and Start listening or Sound only. null when the PM closes it.
+ *                                          `shots: false` means Capture the shared screen is off in Settings: the sheet offers sound only.
+ *   askWindow(getStream) → Promise<MediaStream | null>   the second share: "Pick the meeting window". A browser lets a page share only
+ *                                          right after a press, so the button here makes the call itself (getStream). null when skipped.
+ *
+ * The last choice is remembered in localStorage (listen-sources.js recall / remember), wrapped so a blocked store changes nothing.
+ * The words are the mockup's (46-capture.js). Nothing here sends anything: it only draws and answers.
+ */
+import { el } from './dom.js';
+import { button } from './primitives.js';
+import { openSheet, closeSheet } from './c3-sheet.js';
+import { icon, sect, pbtn, plural } from './c3-ini-ui.js';
+import { APPS, planListen, rowsOf, recall, remember } from './listen-sources.js';
+import { ensureListenCss } from './notes-shots.js';
+
+const store = () => { try { return window.localStorage; } catch { return null; } };
+
+const tag = (t, cls) => el('span', { class: 'tag' + (cls ? ' ' + cls : '') }, t);
+function row(r, act) {
+  return el('li', { class: 'nrow', 'data-ls-row': r.icon },
+    el('span', { class: 'ki' + (r.ok ? '' : ' hot') }, icon(r.icon)),
+    el('div', { class: 'nb' }, el('span', { class: 'tt' }, r.title), el('div', { class: 'chips' }, r.tags.map((t, k) => (k === 0 && r.ok ? el('span', { class: 'tag lsn-ok' }, icon('check', 'sm'), t) : tag(t, !r.ok && k === 0 ? 'lsn-warn' : ''))))),
+    act ? el('div', { class: 'acts' }, act) : el('span'));
+}
+
+export function askListen({ shots = true } = {}) {
+  ensureListenCss();
+  return new Promise((resolve) => {
+    const c = recall(store());
+    if (!shots) c.shots = false;
+    let done = false;
+    const finish = (v) => { if (done) return; done = true; resolve(v); };
+    const body = el('div', { class: 'lsn', 'data-ls': 'listen' });
+    openSheet({ title: 'Listen to the meeting', icon: 'mic', wide: true, body, onClose: () => finish(null) });
+    const go = (withShots) => {
+      const choice = { app: c.app, picture: c.picture, shots: withShots };
+      remember(store(), { app: c.app, picture: c.picture, shots: true });   // the place, not the pictures: Sound only is for this meeting
+      finish(choice);
+      closeSheet();
+    };
+    const draw = () => {
+      const plan = planListen(c);
+      const meet = c.app === 'meet';
+      const seg = el('div', { class: 'seg', role: 'group', 'aria-label': 'Meeting app' }, APPS.map((a) => button({ label: a.label, variant: 'ghost', size: 'sm', onClick: () => { c.app = a.id; draw(); }, attrs: { 'aria-pressed': String(c.app === a.id), 'data-ls-app': a.id } })));
+      const rows = rowsOf(plan).map((r) => {
+        if (r.icon === 'eye' && !meet && c.shots) return row(r, pbtn('ghost', 'Change', null, { 'data-ls-pic': 'screen', onclick: () => { c.picture = 'screen'; draw(); } }));
+        if (r.icon === 'alert') return row(r, pbtn('outline', 'Use the meeting window', null, { 'data-ls-pic': 'window', onclick: () => { c.picture = 'window'; draw(); } }));
+        return row(r);
+      });
+      const n = plan.shares.length;
+      const help = !c.shots ? 'PMOS takes no pictures. It still hears the meeting.'
+        : meet ? 'With the PMOS extension in Chrome, Listen starts on the Meet tab in one click, with no sharing window.'
+          : c.picture === 'window' ? 'Pick the meeting window in the second sharing window. When you present, the call shows your slides, so the shots keep them too. Your other apps are never seen.'
+            : 'Shots of other apps are set aside after the meeting for you to keep or delete. They never reach the note, the replay or the agent.';
+      body.replaceChildren(
+        el('p', { class: 'dim cal3-note' }, 'The browser asks you to pick what to share' + (n > 1 ? ', once for each line below' : '') + '. Nothing leaves this machine.'),
+        sect({ ic: 'cal', title: 'Where is the meeting?', right: seg }),
+        sect({ ic: 'eye', title: 'What PMOS listens to and sees', right: el('span', { class: 'dim mono' }, plural(n, 'share')) },
+          el('ul', { class: 'list', role: 'list' }, ...rows), el('p', { class: 'dim lsn-help', 'data-ls-help': '' }, help)),
+        sect({ ic: 'clock', title: 'While it runs' },
+          el('ul', { class: 'list', role: 'list' },
+            row({ icon: 'stop', title: 'Pause shots', tags: ['stops the pictures, keeps the sound', 'on the REC chip and in Focus'], ok: false }),
+            row({ icon: 'lock', title: 'Private', tags: ['stops sound and pictures until you resume'], ok: false }))),
+        el('div', { class: 'iacts' },
+          pbtn('primary', 'Start listening', 'mic', { 'data-ls-go': 'start', onclick: () => go(c.shots) }),
+          shots ? pbtn('ghost', 'Sound only, no shots', null, { 'data-ls-go': 'sound', onclick: () => go(false) }) : null));
+    };
+    draw();
+  });
+}
+
+/** The second share. The button makes the browser call itself, because that call needs a press of its own. */
+export function askWindow(getStream) {
+  ensureListenCss();
+  return new Promise((resolve) => {
+    let done = false;
+    const finish = (v) => { if (done) return; done = true; resolve(v); };
+    const msg = el('p', { class: 'dim lsn-help', role: 'status', 'data-ls-msg': '' }, 'The sound is on. Now pick the meeting\'s window, so PMOS can take shots of it only. Your other apps are never seen.');
+    const pick = pbtn('primary', 'Pick the meeting window', 'eye', { 'data-ls-pick': '', onclick: async () => {
+      pick.disabled = true;
+      let s = null;
+      try { s = await getStream(); } catch { s = null; }
+      if (!s) { msg.textContent = 'No window was picked. Pick it again, or listen to the sound only.'; pick.disabled = false; return; }
+      finish(s);
+      closeSheet();
+    } });
+    const body = el('div', { class: 'lsn', 'data-ls': 'window' }, msg,
+      el('div', { class: 'iacts' }, pick, pbtn('ghost', 'Sound only, no shots', null, { 'data-ls-skip': '', onclick: () => { finish(null); closeSheet(); } })));
+    openSheet({ title: 'Pick the meeting window', icon: 'eye', body, onClose: () => finish(null) });
+  });
+}

package/workspace/public/pm/listen-sources.js

@@ -0,0 +1,82 @@
+/* listen-sources.js — where the meeting is, and which browser shares Listen asks for (initiative meeting-material-replay, part 3).
+ *
+ *   APPS                                    the three places a meeting can be: Zoom app, Google Meet in Chrome, Another app
+ *   normalize(choice) → { app, picture, shots }   a choice with every field in its range
+ *   planListen(choice) → plan               the shares to ask for and what each one is used for
+ *   surfaceOf(track, planned) → 'window' | 'browser' | 'monitor' | null   what the picture really is
+ *   recall(storage) · remember(storage, choice)   the last choice, kept on this machine
+ *   rowsOf(plan) → [{ icon, title, tags, ok }]    the lines the Listen sheet shows
+ *
+ * WHY SEPARATE SHARES. Only the whole screen carries the sound of Zoom, but its picture holds every app the PM switches to. So for Zoom
+ * or another app the SOUND comes from one share of the whole screen with system audio (its picture is never used) and the PICTURE from a
+ * second share of the meeting's window only, which stays captured while the PM works in other apps. The second share needs its own press,
+ * and it can be skipped (sound only). Google Meet is a tab: one share of that tab carries both. The PM can still choose the whole screen
+ * as the picture; then the safety net in lib/notes-screen.js sets aside the shots that look like another app.
+ *
+ * Pure: no DOM and no network, so the unit test (listen-sources.test.js) imports it from node.
+ */
+export const APPS = [
+  { id: 'zoom', label: 'Zoom app' },
+  { id: 'meet', label: 'Google Meet in Chrome' },
+  { id: 'other', label: 'Another app' },
+];
+export const KEY = 'pmos.listen.where';
+const SURFACES = ['window', 'browser', 'monitor'];
+const AUDIO = { echoCancellation: false, noiseSuppression: false, autoGainControl: false };
+
+/** The three options of one choice, each in its range. The default is the Zoom app with the picture from its window. */
+export function normalize(c) {
+  const o = c && typeof c === 'object' ? c : {};
+  return {
+    app: APPS.some((a) => a.id === o.app) ? o.app : 'zoom',
+    picture: o.picture === 'screen' ? 'screen' : 'window',
+    shots: o.shots !== false,
+  };
+}
+
+/** getDisplayMedia options for one share. Chrome ignores a hint it does not know. */
+export function shareOptions(role, app) {
+  if (role === 'picture') return { video: { displaySurface: 'window' }, audio: false, monitorTypeSurfaces: 'exclude', surfaceSwitching: 'exclude', selfBrowserSurface: 'exclude' };
+  if (app === 'meet') return { video: { displaySurface: 'browser' }, audio: { ...AUDIO }, monitorTypeSurfaces: 'exclude', surfaceSwitching: 'include', selfBrowserSurface: 'exclude' };
+  return { video: { displaySurface: 'monitor' }, audio: { ...AUDIO }, systemAudio: 'include', monitorTypeSurfaces: 'include', surfaceSwitching: 'include', selfBrowserSurface: 'exclude' };
+}
+
+/** The shares Listen asks for. Each share says its role ('sound' | 'picture' | 'both'), whether its picture and its sound are used,
+ * and whether the PM may skip it. `surface` is what the pictures show: the meeting's window, the Meet tab, the whole screen, or null (no pictures). */
+export function planListen(choice) {
+  const c = normalize(choice);
+  const share = (role, keepVideo, keepAudio, optional = false) => ({ role, options: shareOptions(role, c.app), keepVideo, keepAudio, optional });
+  if (c.app === 'meet') return { ...c, shares: [share('both', c.shots, true)], surface: c.shots ? 'browser' : null };
+  if (!c.shots) return { ...c, shares: [share('sound', false, true)], surface: null };
+  if (c.picture === 'screen') return { ...c, shares: [share('both', true, true)], surface: 'monitor' };
+  return { ...c, shares: [share('sound', false, true), share('picture', true, false, true)], surface: 'window' };
+}
+
+/** What the picture really is: the browser's own word for the share when it gives one, else what was asked for. Null when neither is known. */
+export function surfaceOf(track, planned) {
+  let s = null;
+  try { s = track && typeof track.getSettings === 'function' ? track.getSettings().displaySurface : null; } catch { s = null; }
+  if (SURFACES.includes(s)) return s;
+  return SURFACES.includes(planned) ? planned : null;
+}
+
+/** The last choice, from a Storage (localStorage). Anything wrong with storage gives the default. */
+export function recall(storage) {
+  try { const raw = storage && storage.getItem(KEY); return normalize(raw ? JSON.parse(raw) : null); } catch { return normalize(null); }
+}
+export function remember(storage, choice) {
+  try { if (!storage) return false; storage.setItem(KEY, JSON.stringify(normalize(choice))); return true; } catch { return false; }
+}
+
+/** The lines the sheet shows for a choice: what is heard and what is seen. */
+export function rowsOf(plan) {
+  const p = plan && plan.shares ? plan : planListen(plan);
+  const win = p.app === 'zoom' ? 'Zoom Meeting' : 'meeting app\'s';
+  if (p.app === 'meet') {
+    return [{ icon: 'mic', title: p.shots ? 'Sound and picture: the Meet tab' : 'Sound: the Meet tab', tags: ['tab audio on', p.shots ? 'only this tab is seen' : 'no pictures'], ok: true }];
+  }
+  const sound = { icon: 'vol', title: 'Sound: Entire screen, with system audio', tags: ['hears every app, so ' + (p.app === 'zoom' ? 'Zoom' : 'your meeting app') + ' too', p.picture === 'screen' && p.shots ? 'its picture is kept' : 'its picture is not kept'], ok: true };
+  if (!p.shots) return [sound, { icon: 'eye', title: 'Picture: none', tags: ['sound only, no shots'], ok: true }];
+  if (p.picture === 'screen') return [sound, { icon: 'alert', title: 'Picture: Entire screen', tags: ['every app you switch to is on it', 'PMOS keeps only shots that look like the call'], ok: false }];
+  return [sound, { icon: 'eye', title: 'Picture: the ' + win + ' window', tags: ['only this window is seen', 'still captured while you are in other apps'], ok: true }];
+}

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

@@ -0,0 +1,62 @@
+/* notes-aside.js — the review of the shots a note set aside as another app (initiative meeting-material-replay, part 3).
+ *
+ *   openAside(noteId) → Promise<sheet | null>   "Set aside: shots of other apps": each shot with its time and the app it looked like, and
+ *                                               Keep it, Delete and Delete all N. Opens nothing when the note has none.
+ *   asideCount(noteId) → Promise<number>        how many shots the note has set aside
+ *
+ * Also on `window.NotesAside` ({ open, count }), which notes-shots.js defines at once and loads this module when it is first used, so the
+ * Replay page and Calendar › Notes call `NotesAside.open(id)` without importing it. A change fires `pmos-aside` ({ detail: { id, aside } }).
+ *
+ * When the picture of a meeting was the whole screen, lib/notes-screen.js sets aside the shots whose text looks like another app. They are
+ * not in the note, the replay or anything the agent reads. Keep it puts a shot back; Delete removes the file; a shot is deleted by itself
+ * after 7 days.
+ */
+import { el } from './dom.js';
+import { pmGet, pmPost } from './http.js';
+import { openSheet } from './c3-sheet.js';
+import { icon, pbtn } from './c3-ini-ui.js';
+import { toast } from './c3-toast.js';
+import { ensureListenCss } from './notes-shots.js';
+import { fmt } from './notes-screen-view.js';
+
+const srcOf = (id, t) => '/api/notes/screen?id=' + encodeURIComponent(id) + '&t=' + Math.round(t) + '&aside=1';
+const tell = (id, aside) => { try { window.dispatchEvent(new CustomEvent('pmos-aside', { detail: { id, aside } })); } catch { /* no window */ } };
+
+export async function asideCount(id) {
+  const r = await pmGet('/api/notes/screen-aside?id=' + encodeURIComponent(id)).catch(() => null);
+  return r && r.ok ? (r.frames || []).length : 0;
+}
+
+export async function openAside(id) {
+  ensureListenCss();
+  const r = await pmGet('/api/notes/screen-aside?id=' + encodeURIComponent(id)).catch(() => null);
+  if (!r || !r.ok) { toast({ text: (r && r.error) || 'The set-aside shots could not be read.', tone: 'error' }); return null; }
+  let frames = r.frames || [];
+  const days = r.days || 7;
+  const body = el('div', { class: 'lsn', 'data-ls': 'aside' });
+  const sheet = openSheet({ title: 'Set aside: shots of other apps', icon: 'eye', wide: true, body });
+  const answer = async (action, t) => {
+    const out = await pmPost('/api/notes/screen-aside', { id, action, ...(t !== undefined ? { t } : {}) });
+    if (!out || !out.ok) { toast({ text: (out && out.error) || 'That did not work. Try again.', tone: 'error' }); return; }
+    const fresh = await pmGet('/api/notes/screen-aside?id=' + encodeURIComponent(id)).catch(() => null);
+    frames = fresh && fresh.ok ? fresh.frames || [] : frames.filter((f) => (action === 'delete-all' ? false : f.t !== t));
+    tell(id, frames.length);
+    if (action === 'delete-all') { sheet.close(); toast('Deleted. They are gone from this machine.'); return; }
+    toast(action === 'keep' ? 'Kept. It joins the replay at its time.' : 'Deleted from this machine.');
+    draw();
+  };
+  const draw = () => {
+    const rows = frames.map((f) => el('li', { class: 'nrow lsn-aside', 'data-aside': String(f.t) },
+      el('img', { class: 'lsn-thumb', src: srcOf(id, f.t), alt: '', width: 148, height: 84, loading: 'lazy' }),
+      el('div', { class: 'nb' }, el('span', { class: 'tt' }, (f.app || 'Another app') + (f.text ? ' · ' + f.text.slice(0, 60) : '')),
+        el('div', { class: 'chips' }, el('span', { class: 'tag mono' }, fmt(f.t)), el('span', { class: 'tag lsn-warn' }, 'looked like ' + (f.app || 'another app') + ', not the call'))),
+      el('div', { class: 'acts' }, pbtn('ghost', 'Keep it', null, { 'data-aside-keep': String(f.t), onclick: () => answer('keep', f.t) }), pbtn('outline', 'Delete', 'trash', { 'data-aside-delete': String(f.t), onclick: () => answer('delete', f.t) }))));
+    body.replaceChildren(
+      el('p', { class: 'dim cal3-note' }, 'This meeting was shared as the whole screen, so PMOS checked each shot. ' + (frames.length === 1 ? 'This one' : 'These ' + frames.length) + ' did not look like the call or anything shared in it. They are not in the replay, the note or what the agent reads. Next time, share the meeting window as the picture and nothing like this is taken.'),
+      frames.length ? el('ul', { class: 'list', role: 'list' }, ...rows) : el('div', { class: 'fold', 'data-aside-none': '' }, icon('check', 'sm'), 'Nothing is set aside.'),
+      frames.length ? el('div', { class: 'iacts' }, pbtn('primary', 'Delete all ' + frames.length, 'trash', { 'data-aside-all': '', onclick: () => answer('delete-all') })) : null,
+      el('p', { class: 'dim lsn-help' }, 'Set-aside shots are deleted on their own after ' + days + ' days. Kept ones join the replay at their time.'));
+  };
+  draw();
+  return sheet;
+}

package/workspace/public/pm/notes-screen-capture.js

@@ -1,12 +1,15 @@
 /* notes-screen-capture.js — screenshots of the shared screen while a note listens (notes-screen-capture).
  *
- *   startScreen({ track, id, cap, clock, post, … }) → { stop(), cue(t, why), hear(lines), count, lost }   take shots of one shared screen
+ *   startScreen({ track, id, cap, clock, post, surface?, … }) → { stop(), cue(t, why), hear(lines), setPaused(bool), paused, count, lost }   take shots of one shared picture
  *   cueOf(line) → why | null                              does a transcript line point at the screen, or decide something? Pure.
  *   greyOf(source, w, h, canvas?) → Uint8Array             a small grey copy of a frame, for the comparison
  *   changed(prev, cur, { pixel?, share? }) → boolean      true when enough of the picture changed. Pure.
  *
- * WHERE THE PICTURE COMES FROM. Listen already asks the browser to share the screen, to hear the meeting (view-notes.js
- * openSource). That share carries the picture too. The browser's own sharing window is the PM's permission, and the browser
+ * WHERE THE PICTURE COMES FROM. Listen asks the browser for the meeting (view-notes.js openSource, listen-sources.js): for Meet one tab
+ * share carries the sound and the picture; for Zoom or another app the picture is a second share of the meeting's window, and the
+ * whole screen is used for sound only. `surface` says what the picture shows; the server keeps it with each shot (lib/notes-screen.js).
+ * Pause shots (notes-shots.js) stops the pictures and keeps the sound.
+ * Before that, Listen asked for one share and its picture was the whole screen. The browser's own sharing window is the PM's permission, and the browser
  * shows that it is sharing for as long as the track is live. This module never asks for a screen of its own.
  *
  * WHEN IT KEEPS A SHOT. It follows the meeting, not a timer. Every `every` ms (2 s) the frame is drawn into a 64 × 36 grey copy.
@@ -25,6 +28,8 @@
  *
  * WHAT IT NEVER DOES. It sends a shot only to this workspace's own server (`post`), never anywhere else.
  */
+import { bind, unbind } from './notes-shots.js';
+
 const SMALL_W = 64;
 const SMALL_H = 36;
 const MAX_W = 1600;
@@ -68,7 +73,7 @@ export function cueOf(line) {
   return null;
 }
 
-export function startScreen({ track, id, cap, clock, post, every = 2000, slowGap = 15000, ringMs = RING_MS }) {
+export function startScreen({ track, id, cap, clock, post, every = 2000, slowGap = 15000, ringMs = RING_MS, surface = null }) {
   const video = document.createElement('video');
   video.muted = true; video.playsInline = true;
   video.srcObject = new MediaStream([track]);
@@ -79,7 +84,7 @@ export function startScreen({ track, id, cap, clock, post, every = 2000, slowGap
   video.play().catch(() => {});
   const small = document.createElement('canvas');
   const big = document.createElement('canvas');
-  const s = { count: 0, lost: 0, stopped: false, last: null, lastAt: 0, prev: null, moving: 0, still: 0, run: 0, ring: [], kept: new Map(), cues: [], heard: new Set(), chain: Promise.resolve(), timer: null };
+  const s = { count: 0, lost: 0, stopped: false, paused: false, last: null, lastAt: 0, prev: null, moving: 0, still: 0, run: 0, ring: [], kept: new Map(), cues: [], heard: new Set(), chain: Promise.resolve(), timer: null };
 
   const snap = async (t, grey) => {
     const w = Math.min(MAX_W, video.videoWidth);
@@ -93,10 +98,10 @@ export function startScreen({ track, id, cap, clock, post, every = 2000, slowGap
   // a shot a line or a highlight points at that is already kept is posted again, so it carries that better reason
   const keep = (shot, why, cue = false) => {
     s.chain = s.chain.then(async () => {
-      if (s.stopped || !shot) return;
+      if (s.stopped || s.paused || !shot) return;
       const again = cue && s.kept.has(shot.t) && !s.kept.get(shot.t).cue;
       if (!again && !changed(s.last, shot.grey)) return;
-      const r = await post({ id, cap, t: shot.t, img: await b64(shot.blob), w: shot.w, h: shot.h, why });
+      const r = await post({ id, cap, t: shot.t, img: await b64(shot.blob), w: shot.w, h: shot.h, why, ...(surface ? { surface } : {}) });
       if (r && r.ok) {
         s.kept.set(shot.t, { cue });
         if (again) return;
@@ -114,7 +119,7 @@ export function startScreen({ track, id, cap, clock, post, every = 2000, slowGap
 
   let busy = false;
   const tick = async () => {
-    if (s.stopped || busy || track.readyState !== 'live' || !video.videoWidth) return;
+    if (s.stopped || s.paused || busy || track.readyState !== 'live' || !video.videoWidth) return;
     busy = true;
     try {
       const now = clock();
@@ -143,6 +148,7 @@ export function startScreen({ track, id, cap, clock, post, every = 2000, slowGap
   function stop() {
     if (s.stopped) return;
     s.stopped = true;
+    unbind(api);
     clearInterval(s.timer);
     try { track.stop(); } catch { /* stopped */ }
     video.srcObject = null;
@@ -150,7 +156,12 @@ export function startScreen({ track, id, cap, clock, post, every = 2000, slowGap
     s.ring = [];
   }
   /** Keep the picture on screen at meeting time t, for a reason (the PM's Highlight, a cue). */
-  function cue(t, why) { if (!s.stopped) s.cues.push({ t, why }); }
+  function cue(t, why) { if (!s.stopped && !s.paused) s.cues.push({ t, why }); }
+  /** Pause shots: no picture is taken or kept, and none from before the pause can be kept later. The sound is not touched. */
+  function setPaused(on) {
+    s.paused = !!on;
+    if (s.paused) { s.ring = []; s.cues = []; s.prev = null; s.moving = 0; s.still = 0; s.run = 0; }
+  }
   /** New transcript lines: each one that asks for the screen keeps the picture of its time, once. */
   function hear(lines) {
     for (const l of lines || []) {
@@ -161,5 +172,7 @@ export function startScreen({ track, id, cap, clock, post, every = 2000, slowGap
       if (why) cue(l.t || 0, why);
     }
   }
-  return { stop, cue, hear, get count() { return s.count; }, get lost() { return s.lost; } };
+  const api = { stop, cue, hear, setPaused, get paused() { return s.paused; }, get count() { return s.count; }, get lost() { return s.lost; } };
+  bind(api, { surface });
+  return api;
 }

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

@@ -1,6 +1,7 @@
 /* notes-screen-view.js — the screenshots a note kept, beside its transcript (notes-screen-capture).
  *
- *   screenStrip({ id, frames, seek?, replay? }) → <section> | null   the Screen strip: one thumbnail per shot with its meeting time
+ *   screenStrip({ id, frames, seek?, replay?, aside? }) → <section> | null   the Screen strip: one thumbnail per shot with its meeting time;
+ *                                                   `aside` is how many shots were set aside as another app: "N set aside" opens their review (notes-aside.js)
  *   shotFor(frames, from, to) → frame | null                         the shot that came up while a line was said, [from, to)
  *   shotButton({ id, frames, frame, seek? }) → <button>               a small thumbnail that opens one shot (beside a transcript line)
  *   openShot({ id, frames, index, seek? })                            the shot large: its time, why it was kept, its text, Previous, Next, Play from here
@@ -88,11 +89,23 @@ function follow(replay, id) {
   replay.addEventListener('seeked', mark);
 }
 
-export function screenStrip({ id, frames, seek, replay }) {
-  if (!frames || !frames.length) return null;
+/** "N set aside": a button that opens the review of the shots set aside as another app. It follows the count when the review changes it. */
+function asideLink(id, count) {
+  const b = button({ label: '', variant: 'ghost', size: 'sm', attrs: { 'data-nt-aside': id, title: 'Shots that looked like another app, not the call. Keep or delete them.' },
+    onClick: () => { if (typeof window !== 'undefined' && window.NotesAside) window.NotesAside.open(id); } });
+  const set = (n) => { b.textContent = n + ' set aside'; b.hidden = n < 1; };
+  set(count);
+  const on = (e) => { if (!b.isConnected) { window.removeEventListener('pmos-aside', on); return; } if (e.detail && e.detail.id === id) set(e.detail.aside); };
+  window.addEventListener('pmos-aside', on);
+  return b;
+}
+
+export function screenStrip({ id, frames, seek, replay, aside = 0 }) {
+  const none = !frames || !frames.length;
+  if (none && !(aside > 0)) return null;
   follow(replay, id);
   return el('section', { class: 'nt-screen', 'data-nt-screen': id },
-    el('h3', { class: 'nt-sec__h' }, 'Screen · ' + frames.length + (frames.length === 1 ? ' shot' : ' shots')),
-    el('div', { class: 'nt-screen__strip', role: 'list' },
+    el('h3', { class: 'nt-sec__h' }, none ? 'Screen' : 'Screen · ' + frames.length + (frames.length === 1 ? ' shot' : ' shots'), aside > 0 ? [' ', asideLink(id, aside)] : null),
+    none ? null : el('div', { class: 'nt-screen__strip', role: 'list' },
       frames.map((f, k) => el('div', { role: 'listitem' }, thumb({ id, f, label: fmt(f.t), cls: 'nt-shot', onClick: () => openShot({ id, frames, index: k, seek }), attrs: { 'data-nt-shot': String(f.t) } })))));
 }

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

@@ -0,0 +1,55 @@
+/* notes-shots.js — Pause shots: the one switch for the pictures of the meeting being recorded (initiative meeting-material-replay, part 3).
+ *
+ *   active() → boolean            a capture is taking shots now (false when Listen has no picture, or nothing listens)
+ *   paused() → boolean            the pictures are paused; the sound goes on
+ *   setPaused(bool) → boolean     pause or resume the pictures; returns the new state (false when no capture is active)
+ *   surface() → 'window' | 'browser' | 'monitor' | null   what the pictures show
+ *   chipText() · chipTitle()      the words for the Pause-shots chip in Focus and on the recording chip
+ *   bind(handle, { surface }) · unbind(handle)   notes-screen-capture.js calls these when a capture starts and stops
+ *
+ * Also on `window.NotesShots` ({ active, paused, setPaused, surface }) so any page can read it. A change fires `pmos-shots` on window.
+ * The state lives in memory only: a new capture starts with the pictures on.
+ */
+let handle = null;
+let isPaused = false;
+let shown = null;
+
+const emit = () => { try { window.dispatchEvent(new CustomEvent('pmos-shots')); } catch { /* no window */ } };
+
+export function bind(h, { surface = null } = {}) { handle = h; isPaused = false; shown = surface; emit(); }
+export function unbind(h) { if (handle !== h) return; handle = null; isPaused = false; shown = null; emit(); }
+export const active = () => !!handle;
+export const paused = () => !!handle && isPaused;
+export const surface = () => (handle ? shown : null);
+export function setPaused(on) {
+  if (!handle) return false;
+  isPaused = !!on;
+  try { handle.setPaused(isPaused); } catch { /* the capture ended */ }
+  emit();
+  return isPaused;
+}
+
+/** Link c3-listen.css once: the Listen sheet, the set-aside review and the chip. */
+export function ensureListenCss() {
+  if (typeof document === 'undefined' || document.querySelector('link[data-c3-listen]')) return;
+  const l = document.createElement('link');
+  l.rel = 'stylesheet'; l.href = new URL('./c3-listen.css', import.meta.url).href; l.setAttribute('data-c3-listen', '');
+  document.head.appendChild(l);
+}
+
+const WHAT ={ window: 'meeting window', browser: 'Meet tab', monitor: 'whole screen' };
+/** The chip's words: what the shots show, or that they are paused. */
+export const chipText = () => (paused() ? 'Shots paused' : 'Shots: ' + (WHAT[shown] || 'on'));
+export const chipTitle = () => (paused()
+  ? 'Shots are paused. The sound is still recorded. Press to take shots again.'
+  : 'Press to pause the shots, for example before you show something private. The sound is still recorded.');
+
+if (typeof window !== 'undefined') window.NotesShots = { active, paused, setPaused, surface };
+
+// The review of the shots a note set aside (notes-aside.js), loaded when first used, so a page calls NotesAside.open(id) without importing it.
+if (typeof window !== 'undefined' && !window.NotesAside) {
+  window.NotesAside = {
+    open: (id) => import('./notes-aside.js').then((m) => m.openAside(id)),
+    count: (id) => import('./notes-aside.js').then((m) => m.asideCount(id)),
+  };
+}

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

@@ -19,6 +19,7 @@ import { noteById } from './notes-links.js';
 import { recView, clockOf } from './shell-model.js';
 import { reducedMotion } from './shell-ticker.js';
 import { toast } from './c3-toast.js';
+import * as Shots from './notes-shots.js';
 
 /* the red dot sits on the Notes tab (the app's frame) and, on /c3.html, on the Calendar tab, where the meeting is recorded (the mockup's
  * `#tabbtns [data-k=cal]` .tabdot, line 4395) */
@@ -142,7 +143,7 @@ export function disposeRecording(host) {
 
 const NS_SVG = 'http://www.w3.org/2000/svg';
 const glyph = (d) => { const s = document.createElementNS(NS_SVG, 'svg'); s.setAttribute('class', 'ic sm'); s.setAttribute('viewBox', '0 0 24 24'); s.setAttribute('aria-hidden', 'true'); const p = document.createElementNS(NS_SVG, 'path'); p.setAttribute('d', d); s.appendChild(p); return s; };
-const RGL = { highlighter: () => c3ic('flag', 'sm'), pause: () => glyph('M8 5v14M16 5v14'), play: () => c3ic('play', 'sm'), square: () => c3ic('stop', 'sm'), mic: () => c3ic('mic', 'sm'), focus: () => c3ic('target', 'sm'), down: () => glyph('M6 9l6 6 6-6') };
+const RGL = { highlighter: () => c3ic('flag', 'sm'), pause: () => glyph('M8 5v14M16 5v14'), play: () => c3ic('play', 'sm'), square: () => c3ic('stop', 'sm'), eye: () => c3ic('eye', 'sm'), mic: () => c3ic('mic', 'sm'), focus: () => c3ic('target', 'sm'), down: () => glyph('M6 9l6 6 6-6') };
 
 /** The chip opens the note: on console3, Calendar › Notes on the During stage (calendar-views.js listens for c3-open-note);
  * elsewhere the main app, where the full note is. */
@@ -221,7 +222,7 @@ function mountReal(host) {
     if (st.mode !== 'idle' && eng.id !== st.id) { eng = { id: st.id, text: '' }; const want = st.id; engineLabel().then((t) => { if (eng.id === want && t) { eng.text = t; rec.key = ''; sync(); } }); }
     const hl = st.mode === 'recording' && dock.highlightBusy ? dock.highlightBusy() : null;
     const mt = st.mode !== 'idle' ? meetingOfNote(st.id) : null;
-    const key = [st.mode, st.id, st.title, hl ? hl.state + hl.open : '', eng.text, mt ? 'f' + (mt.event_id || '') + mt.start : ''].join(':');
+    const key = [st.mode, st.id, st.title, hl ? hl.state + hl.open : '', Shots.active() ? Shots.chipText() : '', eng.text, mt ? 'f' + (mt.event_id || '') + mt.start : ''].join(':');
     if (key !== rec.key) {
       rec.key = key; rec.clock = null;
       const recording = st.mode === 'recording';
@@ -237,6 +238,13 @@ function mountReal(host) {
         if (recording) {
           group.push(btn(hl ? 'Highlight in progress: show it' : 'Highlight the last 30 seconds and what is said next', 'highlighter', () => dock.highlightNow(), { 'data-fr-rec-highlight': hl ? hl.state : '', 'data-shell-rec-mark': '' }),
             btn('Pause (you can resume within 1 hour)', 'pause', () => dock.pauseNow(), { 'data-fr-rec-pause': '', 'data-shell-rec-pause': '' }));
+          // Pause shots: stops the pictures and keeps the sound (notes-shots.js; the same switch is in Focus next to REC)
+          if (Shots.active()) {
+            const off = Shots.paused();
+            group.push(btn(off ? 'Shots are paused. The sound is still recorded. Press to take shots again.' : 'Pause shots. The sound is still recorded.', off ? 'play' : 'eye',
+              () => { const now = Shots.setPaused(!Shots.paused()); toast({ text: now ? 'Shots paused. The sound is still recorded.' : 'Shots back on.' }); rec.key = ''; sync(); },
+              { 'data-fr-rec-shots': off ? 'paused' : 'on', 'aria-pressed': String(off) }));
+          }
         } else group.push(btn('Resume ' + st.title, 'play', () => dock.resumeNow(), { 'data-fr-rec-resume': '', 'data-shell-rec-resume': '' }));
         group.push(btn('Open the focus page for this meeting', 'focus', () => (mt ? openFocusFor(mt) : openFocusNote(st.id, st.title)), { 'data-fr-rec-focus': '', 'data-shell-rec-focus': '' }));
         group.push(btn('Stop for good (cannot be resumed)', 'square', () => dock.stopNow(), { 'data-fr-rec-stop': '', 'data-shell-rec-stop': '' }));

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

@@ -49,6 +49,7 @@ import { button, iconButton, field, row, sheet, empty, menu, toast, ensureCompon
 import { toInt16, makeResampler, openCapture } from './audio-capture.js';
 import { startScreen } from './notes-screen-capture.js';
 import { screenStrip } from './notes-screen-view.js';
+import { planListen, surfaceOf } from './listen-sources.js';
 import { agendaHeard, peopleOf as contextPeople } from './notes-context.js';
 
 const SAVE_MS = 700;          // a pause this long in typing saves the note
@@ -262,6 +263,7 @@ async function loadNote(ctx, id) {
     r.note.__audio = r.audio || null;
     r.note.__recording = r.recording || null;
     r.note.__shots = r.screen ? r.screen.frames || [] : [];
+    r.note.__aside = r.screen ? r.screen.aside || 0 : 0;
     // 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;
@@ -636,9 +638,40 @@ async function cleanNow(ctx, n) {
 }
 
 /* ── listening with local Whisper ─────────────────────────────────────────────────────────────── */
-async function openSource(kind, { screen = false } = {}) {
+/** The meeting from the shares the Listen sheet planned (listen-sources.js): for Zoom or another app the whole screen gives the sound only and
+ * a second share of the meeting's window gives the picture (skippable); for Meet one tab share gives both. Its stream carries screenTrack and
+ * screenSurface (what the picture really is) when there are pictures. */
+async function openPlanned(plan) {
+  const md = navigator.mediaDevices;
+  const first = plan.shares[0];
+  const s = await md.getDisplayMedia(first.options);
+  const tracks = s.getAudioTracks();
+  let video = first.keepVideo ? 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(plan.app === 'meet' ? 'The shared tab has no audio. Share it again, and tick "Share tab audio".' : 'The shared screen has no audio. Share it again, and tick "Also share system audio".'), { noAudio: true });
+  }
+  let surface = video ? surfaceOf(video, plan.surface) : null;
+  const second = plan.shares[1];
+  if (second && second.keepVideo) {
+    const { askWindow } = await import('./listen-sheet.js');
+    const w = await askWindow(() => md.getDisplayMedia(second.options));
+    if (w) { video = w.getVideoTracks()[0] || null; for (const t of w.getAudioTracks()) t.stop(); surface = video ? surfaceOf(video, plan.surface) : null; }
+  }
+  return Object.assign(new MediaStream(tracks), { screenTrack: video, screenSurface: surface });
+}
+/** Where is the meeting? The Listen sheet asks, once for each Listen. A browser under automation (the test suites) has no one to ask. */
+async function chooseListen() {
+  if (typeof navigator !== 'undefined' && navigator.webdriver === true && window.__ntListenAsk !== true) return { plan: null };
+  const { askListen } = await import('./listen-sheet.js');
+  const c = await askListen({ shots: screenOn() });
+  return c ? { plan: planListen(c) } : { cancelled: true };
+}
+async function openSource(kind, { screen = false, plan = null } = {}) {
   const md = navigator.mediaDevices;
   if (kind === 'mic') return md.getUserMedia({ audio: { echoCancellation: true, noiseSuppression: true, channelCount: 1 } });
+  if (plan) return openPlanned(plan);
   // 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' });
@@ -647,7 +680,7 @@ async function openSource(kind, { screen = false } = {}) {
   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 });
+  return Object.assign(new MediaStream(tracks), { screenTrack: video, screenSurface: video ? surfaceOf(video, null) : null });
 }
 /** 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. */
@@ -663,12 +696,12 @@ function checkSilence(ctx, a) {
     + 'If the meeting is talking, press Stop, press Listen again, choose Entire screen in the sharing window (or the meeting\'s tab) and tick "Share tab audio" or "Also share system audio".' };
   ctx.setState({});
 }
-async function startAudio(ctx, n, want) {
+async function startAudio(ctx, n, want, plan = null) {
   const a = { id: n.id, state: 'starting', sources: [], streams: [], ctx: null, started: Date.now(), clock: null, msg: null, queue: {}, buf: {}, rs: {}, rs24: {}, buf24: {}, peak: {}, began: Date.now(), lost: 0, ended: 0, cap: null, seq: {}, off: {} };
   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, { screen: kind === 'meeting' && screenOn() })]); }
+    try { opened.push([kind, await openSource(kind, { screen: kind === 'meeting' && screenOn(), plan: kind === 'meeting' ? plan : null })]); }
     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);
@@ -708,7 +741,7 @@ async function startAudio(ctx, n, want) {
   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) });
+    a.screen = startScreen({ track, id: a.id, cap: a.cap, clock: () => Date.now() - a.started, post: (b) => pmPost('/api/notes/screen', b), surface: shared[1].screenSurface || null });
     // 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();
@@ -1031,7 +1064,10 @@ async function chooseSources(ctx, n) {
   const local = !!(eng.whisper && eng.whisper.ready);
   // Default to both mic and meeting (skip the chooser dialog entirely per Wawan's streamlining request)
   const want = local ? ['mic', 'meeting'] : ['speech'];
-  if (local) startAudio(ctx, n, want); else startSpeech(ctx, n, 'record');
+  if (!local) { startSpeech(ctx, n, 'record'); return; }
+  const pick = await chooseListen();
+  if (pick.cancelled) { banner = { tone: 'bad', text: 'Listening was not started.' }; ctx.setState({}); return; }
+  startAudio(ctx, n, want, pick.plan);
 }
 async function setSwitch(ctx, patch) {
   const ws = wsOf(ctx);
@@ -1814,7 +1850,7 @@ export function renderBoard(inner, ctx) {
     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 }));
+    if (!listening(n) && !n.private && ((n.__shots || []).length || n.__aside)) wrap.appendChild(screenStrip({ id: n.id, frames: n.__shots, aside: n.__aside || 0, 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);
@@ -1850,7 +1886,11 @@ export async function listenNow(ctx, id) {
     if (!n) { await loadNote(ctx, id); n = cache.get(id); }
     if (!n || n.private) return false;
     const eng = engine && engine.ws === wsOf(ctx) && engine.whisper ? engine : await loadEngine(ctx);
-    if (eng.whisper && eng.whisper.ready) await startAudio(ctx, n, ['mic', 'meeting']); else await startSpeech(ctx, n, 'record');
+    if (eng.whisper && eng.whisper.ready) {
+      const pick = await chooseListen();   // where the meeting is: the sheet, then the sharing windows
+      if (pick.cancelled) { banner = { tone: 'bad', text: 'Listening was not started.' }; return false; }
+      await startAudio(ctx, n, ['mic', 'meeting'], pick.plan);
+    } else await startSpeech(ctx, n, 'record');
     return listeningId() === id;
   } finally { starting = false; ctx.setState({}); }
 }