create-pmos 0.241.0 → 0.242.0

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

@@ -0,0 +1,413 @@
+/* pm/c3-replay.js — the meeting replay of console3 (initiative meeting-material-replay, part 2; the mockup the PM approved on 2026-10-14, #replay).
+ *   openReplay({ note, event, date })   closeReplay()   window.C3Replay = { open, close, state }
+ * Focus played back, full screen over console3 like Focus (inside #c3-root; the header, tabs and dock stay in the DOM, set inert).
+ * One read, GET /api/meeting-replay: the note (transcript, decisions, next steps, questions), the Focus state (topics, stretches, PMOS's notes)
+ * and the kept shots. The page plays the note's audio (GET /api/notes/recording) and ticks every 500 ms:
+ *   header       title and time, Back 10 s, Play or Pause, 1x 1.5x 2x; the topic track as the scrub bar: stretches numbered by topic, a mark for each
+ *                decision, question and next step (amber when it needs you: no owner, still open), a dot for each PMOS note, the playhead
+ *   now line     the topic the room was on, what is on screen, the count of key points
+ *   stage        the shot on screen at the playing time (a press opens it large), the strip of shots, "N set aside"
+ *   key points   decisions, next steps and questions, each with the time to play from; Confirm all makes a task of each next step
+ *   topics       minutes and the first time each came up
+ *   conversation the transcript lines and PMOS's notes in time order; the current line is marked and followed; All, Key points, PMOS; search
+ * A press on a stretch, a mark, a key point, a topic, a shot or a line plays from there. Without audio (none was kept) the page keeps its own
+ * clock, so the track, the shots and the lines still follow. Everything stays on this machine. */
+import { el } from './dom.js';
+import { pmGet } from './http.js';
+import { ensureC3Css } from './pm-work-view.js';
+import { ensureComponentsCss } from './primitives.js';
+import { icon, sect, pbtn, lk, btn, nrow, put, geo } from './c3-ini-ui.js';
+import { toast } from './c3-toast.js';
+import { openShot, whyText, shotIndexAt } from './notes-screen-view.js';
+
+const TICK_MS = 500;
+const NEAR_KEY_MS = 30000;          // a key point is "now" this long after its line
+const BACK_MS = 10000;
+const KIC = { decision: 'scale', action: 'todo', question: 'reply' };
+const KWORD = { decision: 'Decision', action: 'Next step', question: 'Question' };
+const KPLURAL = { decision: 'Decisions', action: 'Next steps', question: 'Questions' };
+const pad = (n) => String(n).padStart(2, '0');
+
+/** 3:07, or 1:03:07 from an hour on. Pure. */
+export function mmss(ms) {
+  const s = Math.max(0, Math.round((Number(ms) || 0) / 1000));
+  const h = Math.floor(s / 3600);
+  return (h ? h + ':' + pad(Math.floor(s / 60) % 60) : String(Math.floor(s / 60))) + ':' + pad(s % 60);
+}
+/** The index of the stretch the room was in at the time: the last stretch that began at or before it, or -1 before the first. Pure. */
+export function runIndexAt(runs, t) {
+  let at = -1;
+  (runs || []).forEach((r, i) => { if (r.from_ms <= t) at = i; });
+  return at;
+}
+/** The index of the last line said at or before the time, or -1. Pure. */
+export function lineIndexAt(lines, t) {
+  let lo = 0; let hi = (lines || []).length - 1; let at = -1;
+  while (lo <= hi) { const mid = (lo + hi) >> 1; if (lines[mid].t <= t) { at = mid; lo = mid + 1; } else hi = mid - 1; }
+  return at;
+}
+
+let S = null;   // the open page
+
+function ensureCss() {
+  ensureC3Css(); ensureComponentsCss();
+  if (document.querySelector('link[data-c3-replay]')) return;
+  const l = document.createElement('link');
+  l.rel = 'stylesheet'; l.href = new URL('./c3-replay.css', import.meta.url).href; l.setAttribute('data-c3-replay', '');
+  document.head.appendChild(l);
+}
+
+/* ── open and close ───────────────────────────────────────────────────────────────────────────────────────────── */
+
+export function closeReplay() {
+  if (!S) return;
+  const s = S; S = null;
+  clearInterval(s.timer);
+  try { s.audio.pause(); s.audio.removeAttribute('src'); s.audio.load(); } catch { /* no audio */ }
+  s.root.remove();
+  const host = document.getElementById('c3-root');
+  if (host) host.classList.remove('rpl-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 (s.opener && document.contains(s.opener) && typeof s.opener.focus === 'function') { try { s.opener.focus({ preventScroll: true }); } catch { /* not focusable */ } }
+}
+
+export function openReplay({ note, event, date } = {}) {
+  closeReplay();
+  ensureCss();
+  const host = document.getElementById('c3-root') || document.body;
+  const root = el('div', { class: 'c3replay', role: 'region', 'aria-label': 'Meeting replay', 'data-c3replay': '', 'data-rpl-state': 'loading' },
+    el('div', { class: 'rpl-page' }, el('div', { class: 'fold', 'data-rpl': 'status' }, icon('clock', 'sm'), 'Reading the meeting …')));
+  S = { root, note: String(note || ''), event: event && (event.id || event) ? String(event.id || event) : '', date: String(date || ''), data: null, t: 0, play: false, speed: 1, filter: 'all', q: '',
+    audio: null, soundOff: false, timer: null, done: new Set(), r: {}, ix: { run: -2, shot: -2, line: -2 },
+    opener: document.activeElement && document.activeElement !== document.body ? document.activeElement : null };
+  host.classList.add('rpl-open');
+  host.append(root);
+  const grid = host.querySelector && host.querySelector('.c3grid'); if (grid) grid.inert = true;
+  const comp = host.querySelector && host.querySelector('[data-c3ph]'); if (comp) comp.inert = true;
+  load(S);
+}
+
+async function load(s) {
+  const p = new URLSearchParams();
+  if (s.note) p.set('note', s.note);
+  if (s.event) p.set('event', s.event);
+  if (s.date) p.set('date', s.date);
+  let d = null;
+  try { d = await pmGet('/api/meeting-replay?' + p.toString()); } catch (e) { d = { ok: false, error: String((e && e.message) || e) }; }
+  if (S !== s) return;
+  if (!d || !d.ok) { fail(s, (d && d.error) || 'The replay could not be read.'); return; }
+  s.data = d;
+  s.root.dataset.rplState = 'ok';
+  if (d.audio) {
+    s.audio = el('audio', { preload: 'metadata', src: d.audio.url, 'data-rpl': 'audio' });
+    s.audio.addEventListener('ended', () => { if (S === s) { s.play = false; paintTop(s); } });
+    s.audio.addEventListener('error', () => { if (S === s) s.soundOff = true; });
+  }
+  build(s);
+  s.timer = setInterval(() => tick(s), TICK_MS);
+  const back = s.root.querySelector('[data-rpl="leave"]'); if (back) back.focus({ preventScroll: true });
+}
+
+function fail(s, message) {
+  s.root.dataset.rplState = 'error';
+  put(s.root, el('div', { class: 'rpl-page' }, el('div', { class: 'fold', 'data-rpl': 'status' }, icon('alert', 'sm'), message),
+    el('div', { class: 'iacts' }, pbtn('ghost', 'Back', 'prev', { 'data-rpl': 'close' }))));
+}
+
+/* ── time ─────────────────────────────────────────────────────────────────────────────────────────────────────── */
+
+const lenOf = (s) => Math.max(1, s.data.length_ms || 0);
+const wall = (s, ms) => (s.data.start_ms == null ? mmss(ms) : (() => { const d = new Date(s.data.start_ms + ms); return pad(d.getHours()) + ':' + pad(d.getMinutes()); })());
+const pct = (s, ms) => Math.max(0, Math.min(100, ms / lenOf(s) * 100));
+
+function playNow(s) {
+  s.play = true;
+  if (s.audio && !s.soundOff) {
+    s.audio.playbackRate = s.speed;
+    const p = s.audio.play();
+    if (p && typeof p.catch === 'function') p.catch(() => { s.soundOff = true; });
+  }
+}
+function pauseNow(s) { s.play = false; if (s.audio) { try { s.audio.pause(); } catch { /* none */ } } }
+
+/** Move the playhead. `andPlay`: start playing from there (a track, a key point, a topic, a shot or a line); Back 10 s keeps the state. */
+function seek(s, ms, andPlay) {
+  const len = lenOf(s);
+  s.t = Math.max(0, Math.min(len, Math.round(ms)));
+  if (s.audio && !s.soundOff) { try { s.audio.currentTime = s.t / 1000; } catch { /* not ready yet */ } }
+  if (andPlay) playNow(s);
+  paintTop(s);
+  paintTime(s, true);
+}
+
+function tick(s) {
+  if (S !== s || !s.data) return;
+  const len = lenOf(s);
+  if (s.play) {
+    if (s.audio && !s.soundOff && !s.audio.paused) s.t = Math.round(s.audio.currentTime * 1000);
+    else s.t = Math.min(len, s.t + TICK_MS * s.speed);   // no sound (none kept, or it cannot play): the page keeps the time
+    if (s.t >= len) { s.t = len; s.play = false; if (s.audio) { try { s.audio.pause(); } catch { /* none */ } } paintTop(s); }
+  }
+  paintTime(s, false);
+}
+
+/* ── building ─────────────────────────────────────────────────────────────────────────────────────────────────── */
+
+function build(s) {
+  const r = s.r;
+  r.top = el('header', { class: 'card rpl-top', 'aria-label': 'Meeting replay' });
+  r.now = el('div', { class: 'rpl-nowl', 'data-rpl': 'now-line' });
+  r.stage = el('div', { class: 'rpl-stagewrap' });
+  r.keys = el('div', { class: 'rpl-keywrap' });
+  r.topics = el('div', { class: 'rpl-topwrap' });
+  r.convo = el('section', { class: 'rpl-cv', 'aria-label': 'What was said, with PMOS\'s notes' });
+  put(s.root, el('div', { class: 'rpl-page' }, r.top, r.now,
+    el('div', { class: 'rpl-main' }, el('div', { class: 'rpl-s' }, r.stage, r.keys, r.topics), el('aside', { class: 'rpl-w', 'aria-label': 'Conversation' }, r.convo)), s.audio));
+  buildTop(s);
+  buildKeys(s);
+  buildTopics(s);
+  buildConvo(s);
+  s.ix = { run: -2, shot: -2, line: -2 };
+  paintTime(s, true);
+}
+
+function chipsOf(s) {
+  const d = s.data;
+  const start = d.meeting.at ? new Date(d.meeting.at) : null;
+  const day = start && Number.isFinite(start.getTime()) ? start.toLocaleDateString(undefined, { weekday: 'short', day: 'numeric', month: 'short' }) : '';
+  const len = Math.round(lenOf(s) / 60000);
+  const kept = d.shots.length;
+  return el('div', { class: 'chips2 dim mono' },
+    el('span', null, [day, d.start_ms != null ? wall(s, 0) + ' to ' + wall(s, lenOf(s)) : '', len + ' min'].filter(Boolean).join(' · ')),
+    d.meeting.attendees.length ? el('span', null, d.meeting.attendees.length + (d.meeting.attendees.length === 1 ? ' person' : ' people')) : null,
+    el('span', { title: 'Audio and screen shots are kept on this machine' }, icon('lock', 'sm'), (d.audio ? 'audio' : 'no audio') + (kept ? ' and ' + kept + (kept === 1 ? ' screen shot' : ' screen shots') : '')),
+    d.aside_count ? lk({ 'data-rpl': 'aside', class: 'rpl-warnc', title: 'Shots that looked like another app. They are not in the replay.' }, d.aside_count + ' set aside') : null);
+}
+
+function trackOf(s) {
+  const d = s.data;
+  const marks = d.keys.filter((k) => k.t != null).map((k) => {
+    const b = btn({ class: 'rpl-mkdot k-' + k.k + (k.warn ? ' warn' : ''), 'data-rpl-seek': String(k.t), 'data-rpl-mark': k.id, title: KWORD[k.k] + ' at ' + wall(s, k.t) + ': ' + k.text, 'aria-label': KWORD[k.k] + ' at ' + wall(s, k.t) }, icon(KIC[k.k], 'sm'));
+    return geo(b, { '--fc-left': pct(s, k.t) + '%' });
+  });
+  const pms = d.notes.map((n) => geo(btn({ class: 'rpl-mkdot pm', 'data-rpl-seek': String(n.t), 'data-rpl-pm': n.id, title: 'PMOS note at ' + wall(s, n.t) + ': ' + n.body, 'aria-label': 'PMOS note at ' + wall(s, n.t) }), { '--fc-left': pct(s, n.t) + '%' }));
+  const topicText = (id) => (d.topics.find((t) => t.id === id) || {}).text || '';
+  const runs = d.runs.map((rn, i) => {
+    const w = (rn.to_ms - rn.from_ms) / lenOf(s) * 100;
+    const b = btn({ class: 'rpl-run', 'data-rpl-seek': String(rn.from_ms), 'data-rpl-run': String(i), title: (rn.n ? rn.n + '. ' : '') + topicText(rn.topic) + ' · ' + wall(s, rn.from_ms) + ' · ' + Math.max(1, Math.round((rn.to_ms - rn.from_ms) / 60000)) + ' min' }, w >= 5 && rn.n ? String(rn.n) : '');
+    return geo(b, { '--fc-left': pct(s, rn.from_ms) + '%', '--fc-width': Math.max(0.5, w) + '%' });
+  });
+  const head = geo(el('span', { class: 'rpl-now', 'data-rpl': 'head' }), { '--fc-left': '0%' });
+  const ticks = [0, 15, 30, 45, 60, 75, 90].map((m) => m * 60000).filter((ms) => ms < lenOf(s) * 0.92)
+    .map((ms) => geo(el('span', { class: 'rpl-tick' }, wall(s, ms)), { '--fc-left': pct(s, ms) + '%' }));
+  return el('div', { class: 'rpl-track', role: 'group', 'aria-label': 'The meeting by topic, with decisions, questions and next steps. Press a stretch or a mark to play from there.' },
+    el('div', { class: 'rpl-rail', 'data-rpl': 'rail' }, el('div', { class: 'rpl-mks' }, ...marks), el('div', { class: 'rpl-runs', 'data-rpl': 'bar' }, ...runs), el('div', { class: 'rpl-pms' }, ...pms), head),
+    el('div', { class: 'rpl-ticks dim mono' }, ...ticks, el('span', { class: 'end' }, wall(s, lenOf(s)))));
+}
+
+function buildTop(s) {
+  const d = s.data;
+  const legend = el('div', { class: 'rpl-legend dim' },
+    ...['decision', 'question', 'action'].map((k) => el('span', { class: 'rpl-lg k-' + k }, icon(KIC[k], 'sm'), KPLURAL[k])),
+    el('span', { class: 'rpl-lg pm' }, el('i', { class: 'rpl-lgdot' }), 'PMOS notes'), el('span', { class: 'rpl-lg warn' }, el('i', { class: 'rpl-lgdot' }), 'needs you'));
+  put(s.r.top,
+    el('div', { class: 'rpl-id' },
+      pbtn('ghost', 'Back to the note', 'prev', { 'data-rpl': 'leave', title: 'Back to the note in Calendar' }),
+      el('div', { class: 'rpl-tt' }, el('h1', null, d.meeting.title), chipsOf(s))),
+    el('div', { class: 'rpl-clock' }, el('div', null, el('b', { class: 'mono', 'data-rpl': 't' }, mmss(s.t)),
+      el('span', { class: 'dim mono' }, 'of ' + mmss(lenOf(s)) + ' · ', el('span', { 'data-rpl': 'clk' }, wall(s, s.t))))),
+    el('div', { class: 'rpl-acts', 'data-rpl': 'acts' }),
+    trackOf(s), legend);
+  paintTop(s);
+}
+
+/** The play controls: they change with Play, Pause and the speed, so they are drawn on their own. */
+function paintTop(s) {
+  const acts = s.r.top && s.r.top.querySelector('[data-rpl="acts"]');
+  if (!acts) return;
+  const play = pbtn('primary', s.play ? 'Pause' : 'Play', s.play ? 'pause' : 'play', { 'data-rpl': 'play', 'aria-pressed': String(s.play) });
+  put(acts, pbtn('ghost', 'Back 10 s', 'undo', { 'data-rpl': 'back' }), play,
+    el('div', { class: 'seg ini-seg', role: 'group', 'aria-label': 'Speed' }, ...[1, 1.5, 2].map((v) => btn({ 'aria-pressed': String(s.speed === v), 'data-rpl-speed': String(v) }, v + '×'))));
+}
+
+function nowLine(s) {
+  const d = s.data;
+  const ri = runIndexAt(d.runs, s.t);
+  const run = ri >= 0 ? d.runs[ri] : null;
+  const tp = run ? d.topics.find((t) => t.id === run.topic) : null;
+  const si = shotIndexAt(d.shots, s.t);
+  const need = d.keys.filter((k) => k.warn).length;
+  return [el('span', { class: 'rpl-nowt' }, el('span', { class: 'ki hot' }, icon('play', 'sm')),
+    tp ? [el('span', { class: 'mono dim' }, run.n || ''), el('b', { 'data-rpl': 'topic' }, tp.text), el('span', { class: 'mono dim' }, wall(s, run.from_ms) + ' to ' + wall(s, run.to_ms))] : el('span', { class: 'dim' }, d.topics.length ? 'Before the first topic' : 'No topics were kept for this meeting')),
+  el('span', { class: 'rpl-grow' }),
+  d.shots.length ? el('span', { class: 'chip2', 'data-rpl': 'shot-state' }, icon('eye', 'sm'), si >= 0 ? 'Screen shot from ' + wall(s, d.shots[si].t) : 'Nothing shared yet') : null,
+  d.keys.length ? lk({ 'data-rpl': 'keys' }, icon('check', 'sm'), d.keys.length + (d.keys.length === 1 ? ' key point' : ' key points') + (need ? ' · ' + need + ' need you' : '')) : null];
+}
+
+function stageNode(s) {
+  const d = s.data;
+  const si = shotIndexAt(d.shots, s.t);
+  const sh = si >= 0 ? d.shots[si] : null;
+  const strip = d.shots.map((x, i) => btn({ class: 'chip2' + (i === si ? ' on' : ''), 'data-rpl-seek': String(x.t), 'data-rpl-shot': String(x.t), 'aria-pressed': String(i === si), title: whyText(x.why) }, wall(s, x.t)));
+  const screen = sh
+    ? btn({ class: 'rpl-shotb', 'data-rpl': 'open-shot', title: 'Open this shot large' },
+      el('img', { class: 'rpl-shot', src: '/api/notes/screen?id=' + encodeURIComponent(d.note.id) + '&t=' + Math.round(sh.t), alt: sh.text ? 'Screen at ' + mmss(sh.t) + ': ' + sh.text.slice(0, 200) : 'Screen at ' + mmss(sh.t), 'data-rpl-img': String(sh.t) }))
+    : el('div', { class: 'fold', 'data-rpl': 'no-shot' }, icon('moon', 'sm'), d.shots.length ? 'Nothing was shared yet. The first screen shot is at ' + wall(s, d.shots[0].t) + '.' : 'No screen shots were kept for this meeting.');
+  return sect({ ic: 'eye', title: 'On screen', attrs: { class: 'rpl-stage', 'data-rpl': 'stage' }, right: sh ? el('span', { class: 'dim mono' }, (whyText(sh.why) ? whyText(sh.why) + ' · ' : '') + wall(s, sh.t)) : null },
+    el('div', { class: 'rpl-screen' }, screen),
+    d.shots.length || d.aside_count ? el('div', { class: 'rpl-strip', role: 'group', 'aria-label': 'Screen shots kept, by time' }, ...strip, el('span', { class: 'rpl-grow' }),
+      d.aside_count ? pbtn('ghost', d.aside_count + ' set aside', 'eye', { 'data-rpl': 'aside' }) : null) : null);
+}
+
+function buildKeys(s) {
+  const d = s.data;
+  const col = (k) => {
+    const items = d.keys.filter((x) => x.k === k);
+    return el('div', { class: 'rpl-col' }, el('div', { class: 'rpl-lbl' }, icon(KIC[k], 'sm'), ' ' + KPLURAL[k] + ' ', el('span', { class: 'bdg g' }, String(items.length))),
+      items.length ? el('ul', { class: 'list', role: 'list' }, ...items.map((x) => keyRow(s, x))) : el('div', { class: 'dim rpl-none' }, 'None caught.'));
+  };
+  put(s.r.keys, d.keys.length ? sect({ ic: 'check', title: 'Key points', attrs: { 'data-rpl': 'keys-sect' }, right: d.keys.some((x) => x.k === 'action') ? pbtn('primary', 'Confirm all', 'check', { 'data-rpl': 'confirm', title: 'Make a task of each next step on the note\'s initiative' }) : null },
+    el('div', { class: 'rpl-cap' }, col('decision'), col('action'), col('question')),
+    el('p', { class: 'dim rpl-src' }, 'Each one plays from the moment it was said. Confirm all makes a task of each next step on the note\'s initiative.')) : null);
+}
+function keyRow(s, x) {
+  const made = s.done.has(x.id);
+  const meta = x.k === 'decision' ? x.by : x.k === 'action' ? [x.owner, x.due && 'due ' + x.due].filter(Boolean).join(' · ') : x.state === 'answered' ? 'answered' : 'still open';
+  return nrow({ title: x.text, ic: KIC[x.k], hot: x.warn, cls: 'rpl-key', attrs: { 'data-rpl-key': x.id, ...(x.t != null ? { 'data-rpl-keyt': String(x.t) } : {}) },
+    chips: [x.t != null ? lk({ class: 'mono', 'data-rpl-seek': String(x.t), 'data-rpl-play': x.id, title: 'Play from ' + wall(s, x.t) }, icon('play', 'sm'), wall(s, x.t)) : null,
+      x.state === 'owner' ? el('span', { class: 'tag rpl-warn' }, icon('user', 'sm'), 'no owner') : meta ? el('span', { class: 'tag' + (x.state === 'open' ? ' rpl-warn' : '') }, meta) : null,
+      made ? el('span', { class: 'tag' }, 'task made') : x.k !== 'question' ? el('span', { class: 'tag' }, 'draft') : null] });
+}
+
+function buildTopics(s) {
+  const d = s.data;
+  const rows = d.topics.map((t) => el('li', { class: 'nrow rpl-topic', 'data-rpl-topic': t.id },
+    el('span', { class: 'ki' }, t.n ? el('span', { class: 'mono' }, String(t.n)) : icon('clock', 'sm')),
+    el('div', { class: 'nb' }, el('span', { class: 'tt' }, t.text),
+      el('div', { class: 'chips' },
+        t.first_t != null ? lk({ class: 'mono', 'data-rpl-seek': String(t.first_t), title: 'Play from the first time it came up' }, icon('play', 'sm'), wall(s, t.first_t)) : null,
+        t.parked ? el('span', { class: 'tag rpl-warn' }, 'parked') : t.first_t == null ? el('span', { class: 'tag' }, 'not reached') : el('span', { class: 'tag' }, (t.minutes < 1 ? 'under 1 min' : t.minutes + ' min') + (t.stretches > 1 ? ' in ' + t.stretches + ' stretches' : '')),
+        t.by ? el('span', { class: 'tag' }, 'added by ' + t.by) : null)),
+    el('span')));
+  put(s.r.topics, d.topics.length ? sect({ ic: 'todo', title: 'Topics', count: d.topics.length, attrs: { 'data-rpl': 'topics-sect' } }, el('ul', { class: 'list', role: 'list' }, ...rows)) : null);
+}
+
+/* the conversation: built when the filter or the search changes; the current line is marked in place as time moves */
+function buildConvo(s) {
+  const d = s.data;
+  const q = s.q.trim().toLowerCase();
+  const items = [...d.lines.map((l) => ({ t: l.t, l })), ...d.notes.map((n) => ({ t: n.t, n }))].sort((a, b) => a.t - b.t || (a.n ? 1 : 0) - (b.n ? 1 : 0))
+    .filter((x) => s.filter === 'all' || (s.filter === 'key' ? x.l && x.l.key : x.n))
+    .filter((x) => !q || (x.l ? x.l.text : x.n.body).toLowerCase().includes(q));
+  const rows = items.map((x) => {
+    if (x.n) {
+      return el('li', { class: 'rpl-pm', 'data-rpl-pmt': String(x.t) }, btn({ class: 'rpl-lb', 'data-rpl-seek': String(x.t) },
+        el('span', { class: 'rpl-cvwho' }, el('span', { class: 'fc-avdot', 'aria-hidden': 'true' }, icon('spark', 'sm')), el('b', { class: 'mono' }, 'PMOS'), el('span', { class: 'rpl-cat' }, x.n.cat), el('span', { class: 'dim mono rpl-time' }, wall(s, x.t))),
+        el('span', { class: 'rpl-pb' }, x.n.body)));
+    }
+    const l = x.l;
+    const k = l.key ? d.keys.find((z) => z.id === l.key.id) : null;
+    return el('li', { class: 'rpl-l', 'data-rpl-line': String(l.i), 'data-rpl-linet': String(l.t) }, btn({ class: 'rpl-lb', 'data-rpl-seek': String(l.t) },
+      el('span', { class: 'rpl-lh' }, el('b', null, l.who || 'You'), el('span', { class: 'dim mono' }, wall(s, l.t)), k ? el('span', { class: 'tag rpl-kt k-' + k.k }, icon(KIC[k.k], 'sm'), KWORD[k.k]) : null),
+      el('span', { class: 'rpl-lt' }, l.text)));
+  });
+  const seg = el('div', { class: 'seg ini-seg', role: 'group', 'aria-label': 'Show' }, ...[['all', 'All'], ['key', 'Key points'], ['pm', 'PMOS']].map(([k, label]) => btn({ 'aria-pressed': String(s.filter === k), 'data-rpl-filter': k }, label)));
+  const input = el('input', { type: 'search', 'data-rpl-q': '', 'aria-label': 'Search what was said', placeholder: 'Search what was said', value: s.q });
+  put(s.r.convo, el('div', { class: 'rpl-cvh' }, el('b', null, 'Conversation'), seg),
+    el('ol', { class: 'rpl-cvs', role: 'list', 'data-rpl': 'list' }, rows.length ? rows : el('li', { class: 'dim' }, d.lines.length || d.notes.length ? 'Nothing matches.' : 'No words were kept for this meeting.')),
+    el('form', { class: 'rpl-cvin', onSubmit: (e) => e.preventDefault() }, input, icon('search', 'sm')));
+  s.ix.line = -2;
+}
+
+/* ── painting the time ────────────────────────────────────────────────────────────────────────────────────────── */
+
+function paintTime(s, force) {
+  const d = s.data; const root = s.root;
+  const set = (k, v) => { const n = root.querySelector('[data-rpl="' + k + '"]'); if (n && n.textContent !== v) n.textContent = v; };
+  set('t', mmss(s.t)); set('clk', wall(s, s.t));
+  const head = root.querySelector('[data-rpl="head"]'); if (head) head.style.setProperty('--fc-left', pct(s, s.t) + '%');
+  root.dataset.rplT = String(Math.round(s.t));
+  const ri = runIndexAt(d.runs, s.t); const si = shotIndexAt(d.shots, s.t); const li = lineIndexAt(d.lines, s.t);
+  if (force || ri !== s.ix.run) {
+    root.querySelectorAll('.rpl-run').forEach((b) => b.classList.toggle('c', Number(b.dataset.rplRun) === ri));
+    const cur = ri >= 0 ? d.runs[ri].topic : null;
+    root.querySelectorAll('.rpl-topic').forEach((n) => n.classList.toggle('cur', n.dataset.rplTopic === cur));
+  }
+  if (force || ri !== s.ix.run || si !== s.ix.shot) put(s.r.now, nowLine(s));
+  if (force || si !== s.ix.shot) put(s.r.stage, stageNode(s));
+  s.ix.run = ri; s.ix.shot = si;
+  root.querySelectorAll('.rpl-key[data-rpl-keyt]').forEach((n) => n.classList.toggle('cur', s.t >= Number(n.dataset.rplKeyt) && s.t - Number(n.dataset.rplKeyt) < NEAR_KEY_MS));
+  const list = root.querySelector('[data-rpl="list"]');
+  if (list && (force || li !== s.ix.line)) {
+    let curNode = null;
+    list.querySelectorAll('.rpl-l').forEach((n) => { const at = Number(n.dataset.rplLinet); const on = Number(n.dataset.rplLine) === li; n.classList.toggle('on', on); n.classList.toggle('fut', at > s.t); if (on) { curNode = n; n.setAttribute('aria-current', 'true'); } else n.removeAttribute('aria-current'); });
+    list.querySelectorAll('.rpl-pm').forEach((n) => n.classList.toggle('fut', Number(n.dataset.rplPmt) > s.t));
+    if (!curNode) {   // under a filter the current line may be hidden: follow the last one shown that is not in the future
+      const shown = [...list.querySelectorAll('.rpl-l, .rpl-pm')].filter((n) => Number(n.dataset.rplLinet != null ? n.dataset.rplLinet : n.dataset.rplPmt) <= s.t);
+      curNode = shown[shown.length - 1] || null;
+    }
+    if (curNode) list.scrollTop = Math.max(0, curNode.offsetTop - list.offsetTop - list.clientHeight / 3);
+    s.ix.line = li;
+  }
+}
+
+/* ── presses ──────────────────────────────────────────────────────────────────────────────────────────────────── */
+
+async function confirmAll(s) {
+  const d = s.data;
+  const todo = d.keys.filter((k) => k.k === 'action' && !s.done.has(k.id));
+  if (!todo.length) { toast('Every next step is already a task.'); return; }
+  const { makeTask } = await import('./notes-task.js');
+  const n = { id: d.note.id, title: d.note.title, initiative: d.note.initiative, ws: d.note.ws };
+  for (const k of todo) {
+    const id = await makeTask(n, { text: k.text, owner: k.owner, due: k.due });
+    if (!id) break;   // makeTask has said why (no initiative, no stage); the rest wait
+    s.done.add(k.id);
+    if (S !== s) return;
+  }
+  buildKeys(s); paintTime(s, true);
+}
+
+function asideSheet(s) {
+  const aside = window.NotesAside;
+  if (aside && typeof aside.open === 'function') { aside.open(s.data.note.id); return; }
+  toast(s.data.aside_count + (s.data.aside_count === 1 ? ' shot' : ' shots') + ' looked like another app and ' + (s.data.aside_count === 1 ? 'is' : 'are') + ' not in the replay. They are deleted after 7 days.');
+}
+
+function onClick(ev) {
+  if (!S || !S.data) { if (S && ev.target.closest && ev.target.closest('[data-rpl="close"]')) closeReplay(); return; }
+  const s = S;
+  if (!s.root.contains(ev.target)) return;
+  const t = ev.target.closest('[data-rpl-seek],[data-rpl-speed],[data-rpl-filter],[data-rpl]');
+  const rail = ev.target.closest('[data-rpl="rail"]');
+  if (!t && !rail) return;
+  if (t && t.dataset.rplSeek !== undefined) { ev.preventDefault(); seek(s, Number(t.dataset.rplSeek), true); return; }
+  if (t && t.dataset.rplSpeed) { s.speed = Number(t.dataset.rplSpeed); if (s.audio) s.audio.playbackRate = s.speed; paintTop(s); return; }
+  if (t && t.dataset.rplFilter) { s.filter = t.dataset.rplFilter; buildConvo(s); paintTime(s, true); return; }
+  const k = t && t.dataset.rpl;
+  if (k === 'play') { if (s.play) pauseNow(s); else { if (s.t >= lenOf(s)) seek(s, 0, false); playNow(s); } paintTop(s); return; }
+  if (k === 'back') { seek(s, s.t - BACK_MS, false); return; }
+  if (k === 'leave') { const id = s.data.note.id; closeReplay(); window.dispatchEvent(new CustomEvent('c3-open-note', { detail: { id } })); return; }
+  if (k === 'keys') { const n = s.root.querySelector('.rpl-cap'); if (n && n.scrollIntoView) n.scrollIntoView({ behavior: 'smooth', block: 'center' }); return; }
+  if (k === 'open-shot') { const i = shotIndexAt(s.data.shots, s.t); if (i >= 0) openShot({ id: s.data.note.id, frames: s.data.shots, index: i, seek: (ms) => seek(s, ms, true) }); return; }
+  if (k === 'aside') { asideSheet(s); return; }
+  if (k === 'confirm') { confirmAll(s); return; }
+  // a press on the empty rail scrubs: the time under the pointer
+  if (rail) { const b = rail.getBoundingClientRect(); if (b.width > 0) seek(s, (ev.clientX - b.left) / b.width * lenOf(s), true); }
+}
+function onInput(ev) {
+  if (!S || !S.data) return;
+  const q = ev.target.closest && ev.target.closest('[data-rpl-q]'); if (!q || !S.root.contains(q)) return;
+  const s = S; s.q = q.value; const p = q.selectionStart;
+  buildConvo(s); paintTime(s, true);
+  const n = s.root.querySelector('[data-rpl-q]'); if (n) { n.focus(); try { n.setSelectionRange(p, p); } catch { /* not a text field */ } }
+}
+document.addEventListener('click', onClick);
+document.addEventListener('input', onInput);
+
+if (typeof window !== 'undefined') {
+  window.C3Replay = { open: openReplay, close: closeReplay,
+    /** What the page is doing, for a test and for the entry points: { open, t, playing, speed } */
+    state: () => (S ? { open: true, t: S.t, playing: S.play, speed: S.speed, loaded: !!S.data, sound: !!S.audio && !S.soundOff } : { open: false }) };
+}

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

@@ -224,6 +224,7 @@ async function loadOpen(inst) {
   inst.note = r && r.ok ? r.note : null;
   inst.rec = r && r.ok ? r.recording || null : null;
   inst.shots = r && r.ok && r.screen ? r.screen.frames || [] : [];
+  inst.aside = r && r.ok && r.screen ? r.screen.aside || 0 : 0;
   drawRight(inst);
 }
 /** The replay of the note's kept audio: one <audio> per note, kept across redraws so playback goes on. Null when no audio is kept. */
@@ -282,7 +283,7 @@ function drawRight(inst, force) {
   const n = inst.note;
   const live = dock.recordState();
   const held = !!n && live.mode !== 'idle' && live.id === n.id;
-  const sig = JSON.stringify([inst.open, n && [n.updated_at, n.title, n.final_notes && n.final_notes.at, (n.transcript || []).length, (n.highlights || []).length, n.agent && n.agent.markdown, iniName(n.initiative), n.state, n.resume_until, n.ended_at, (n.sessions || []).length, n.meeting && n.meeting.context && n.meeting.context.taken_at], inst.rec && [inst.rec.bytes, inst.rec.cleaned], (inst.shots || []).length, live.mode, live.id, !!inst.rows, inst.ctxOpen, inst.info]);
+  const sig = JSON.stringify([inst.open, n && [n.updated_at, n.title, n.final_notes && n.final_notes.at, (n.transcript || []).length, (n.highlights || []).length, n.agent && n.agent.markdown, iniName(n.initiative), n.state, n.resume_until, n.ended_at, (n.sessions || []).length, n.meeting && n.meeting.context && n.meeting.context.taken_at], inst.rec && [inst.rec.bytes, inst.rec.cleaned], (inst.shots || []).length, inst.aside || 0, live.mode, live.id, !!inst.rows, inst.ctxOpen, inst.info]);
   // a held note draws again on every render: the clock, the lines and the paused minutes move. Nothing else draws without a change.
   if (!force && !held && sig === inst.rightSig) return;
   // a field being typed in is not redrawn under the cursor, except in the live block, whose fields are kept across redraws
@@ -417,7 +418,8 @@ function noteParts(inst, n, live) {
     el('p', { class: 'nt-hint' }, 'Kept on this machine. Press a time in the discussion to play from there.')));
   // the screenshots of the shared screen, on the same clock as the replay and the transcript (notes-screen-capture)
   const shots = held || n.private ? [] : inst.shots || [];
-  if (shots.length) out.push(screenStrip({ id: n.id, frames: shots, seek: replay ? (ms) => seekReplay(inst, ms) : null, replay }));
+  const asideN = held || n.private ? 0 : inst.aside || 0;
+  if (shots.length || asideN) out.push(screenStrip({ id: n.id, frames: shots, aside: asideN, seek: replay ? (ms) => seekReplay(inst, ms) : null, replay }));
 
   const cf = conflictsOf(n);
   if (cf.length) {

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 }];
+}