create-pmos 0.162.0 → 0.164.0

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

@@ -0,0 +1,587 @@
+/* pm/c3-focus.js — the Meeting focus page of console3 (initiative c3-meeting-focus; the mockup the PM approved on 2026-10-12, version 7).
+ *   openFocus({ event, date })   closeFocus()
+ * One calm full-screen page over console3, inside #c3-root: it covers the header, the tabs and the dock (they stay in the DOM, set inert) and Leave
+ * focus gives them back. Recording is not touched by leaving. It reads GET /api/meeting-focus every 3 seconds while it is open:
+ *   header       title, time, people, initiative; the clock (starts in, or elapsed and left); REC with Start recording or End meeting (the note dock);
+ *                a thin bar of the stretches of talk, numbered by topic
+ *   now line     the topic the room is on, how long, change; buttons Topics, Captured and Note (side sheets)
+ *   being said   one sentence on the talk and up to four context chips
+ *   stage        the meeting's material as a card with Open (and Present for Slides); a Google Slides or Docs preview loads only on a press; before the start, what is prepared
+ *   conversation the room's last two lines as a faint ticker; PMOS notes below it (only the newest is open); the ones PMOS holds; Ask PMOS quietly
+ * Nothing is invented: with the companion off, or before it has answered, the panel shows the ticker and a quiet line. Nothing is sent anywhere.
+ * In demo mode (?demo=1) c3-demo-focus.js answers the reads with the mockup's Partner API review. */
+import { el } from './dom.js';
+import { pmGet, pmPost } from './http.js';
+import { ensureC3Css } from './pm-work-view.js';
+import { ensureComponentsCss, button } from './primitives.js';
+import { icon, sect, pbtn, lk, ib, put } from './c3-ini-ui.js';
+import { openSheet, closeSheet } from './c3-sheet.js';
+import { toast } from './c3-toast.js';
+
+const POLL_MS = 3000;
+const LAST_MINUTES = 5;                 // the last minutes of the meeting: the captured items show under the stage
+const pad = (n) => String(n).padStart(2, '0');
+const hhmm = (ms) => { const d = new Date(ms); return pad(d.getHours()) + ':' + pad(d.getMinutes()); };
+export const baseId = (id) => String(id || '').split('@')[0];
+/** 3:07, or 1:03:07 from an hour on; a minus sign before a negative time. Pure. */
+export function clockText(sec) {
+  const neg = sec < 0; const s = Math.abs(Math.round(sec));
+  const h = Math.floor(s / 3600); const m = Math.floor((s % 3600) / 60); const x = s % 60;
+  return (neg ? '-' : '') + (h ? h + ':' + pad(m) : String(m)) + ':' + pad(x);
+}
+/** What a link is, and how the page shows it: every link is a card; a Google Slides or Docs link also has a /preview address that the page loads only when the PM presses Show the preview here (no-network: the page reaches nothing by itself). Pure. */
+export function classify(url) {
+  const raw = String(url || '').trim();
+  // A link pasted without its scheme (docs.google.com/…) is a web link.
+  let u; try { u = new URL(/^[a-z][a-z0-9+.-]*:/i.test(raw) ? raw : 'https://' + raw); } catch { return { kind: 'link', app: 'Link', url: String(url), host: '' }; }
+  const m = /^\/(presentation|document)\/d\/([A-Za-z0-9_-]+)/.exec(u.pathname);
+  if (u.protocol === 'https:' && u.hostname === 'docs.google.com' && m) {
+    const base = u.origin + '/' + m[1] + '/d/' + m[2];
+    return m[1] === 'presentation' ? { kind: 'slides', app: 'Google Slides', url: u.href, host: u.hostname, preview: base + '/preview', present: base + '/present' }
+      : { kind: 'docs', app: 'Google Docs', url: u.href, host: u.hostname, preview: base + '/preview' };
+  }
+  if (/\.atlassian\.net$/.test(u.hostname) && u.pathname.startsWith('/wiki')) return { kind: 'confluence', app: 'Confluence', url: u.href, host: u.hostname };
+  return { kind: 'link', app: u.hostname || 'Link', url: u.href, host: u.hostname };
+}
+
+let F = null;   // the open page: { id, date, root, r (regions), sig, data, offset, ui, timers, sheet, ... }
+
+function ensureCss() {
+  ensureC3Css(); ensureComponentsCss();
+  if (document.querySelector('link[data-c3-focus]')) return;
+  const l = document.createElement('link');
+  l.rel = 'stylesheet'; l.href = new URL('./c3-focus.css', import.meta.url).href; l.setAttribute('data-c3-focus', '');
+  document.head.appendChild(l);
+}
+const isDemo = () => !!document.querySelector('[data-c3-demo]');
+const wsParam = () => { try { return new URLSearchParams(location.search).get('ws') || ''; } catch { return ''; } };
+const nowMs = () => Date.now() + (F ? F.offset : 0);
+const startMs = () => (F && F.data ? Date.parse(F.data.event.at) : NaN);
+const endMs = () => (F && F.data && F.data.event.end ? Date.parse(F.data.event.end) : NaN);
+
+/* ── open and close ───────────────────────────────────────────────────────────────────────────────────────────── */
+
+export function closeFocus() {
+  if (!F) return;
+  const f = F; F = null;
+  for (const t of Object.values(f.timers)) { clearTimeout(t); clearInterval(t); }
+  for (const t of f.askTimers.values()) clearInterval(t);
+  if (f.sheetOpen) closeSheet();
+  f.root.remove();
+  const host = document.getElementById('c3-root');
+  if (host) host.classList.remove('fc-open');
+  const grid = host && host.querySelector('.c3grid'); if (grid) grid.inert = false;
+  try { const u = new URL(location.href); if (u.searchParams.has('focus')) { u.searchParams.delete('focus'); u.searchParams.delete('fdate'); history.replaceState(history.state, '', u); } } catch { /* no history */ }
+  if (f.opener && document.contains(f.opener) && typeof f.opener.focus === 'function') { try { f.opener.focus({ preventScroll: true }); } catch { /* not focusable any more */ } }
+}
+
+export function openFocus({ event, date } = {}) {
+  closeFocus();
+  const ev = event || {};
+  const id = String(ev.id || '');
+  const day = String(date || String(ev.at || ev.start || '').slice(0, 10) || '');
+  ensureCss();
+  const host = document.getElementById('c3-root') || document.body;
+  const root = el('div', { class: 'c3focus', role: 'region', 'aria-label': 'Meeting focus', 'data-c3focus': '' });
+  const r = {};
+  const page = el('div', { class: 'fc-page' },
+    r.top = el('header', { class: 'card fc-top', 'aria-label': 'Meeting' }),
+    r.now = el('div', { class: 'fc-nowl', 'data-fc': 'now-line' }),
+    r.band = el('div', { class: 'fc-bandwrap' }),
+    el('div', { class: 'fc-main' },
+      el('div', { class: 'fc-s' }, r.stage = el('div', { class: 'fc-stagewrap' }), r.cap = el('div', { class: 'fc-capwrap' })),
+      el('aside', { class: 'fc-w', 'aria-label': 'Conversation' },
+        el('section', { class: 'fc-cv', 'aria-label': 'The conversation, with PMOS' },
+          el('div', { class: 'fc-cv-h' }, el('b', null, 'Conversation'), el('span', { class: 'dim' }, 'PMOS replies only to you')),
+          r.tick = el('div', { class: 'fc-tk', 'aria-label': 'Last lines in the room', 'data-fc': 'ticker' }),
+          r.stream = el('ol', { class: 'fc-s2', role: 'list', 'data-fc': 'stream' }),
+          r.form = askForm()))));
+  root.append(page);
+  F = { id, date: day, ev0: ev, root, r, sig: {}, data: null, offset: 0, ui: { open: new Set(), folded: new Set(), pulled: [], stage: 0, picker: false, newTopic: false, addTopic: false, heldOpen: false, pending: new Map(), failed: new Map() },
+    timers: {}, askTimers: new Map(), sheet: null, sheetOpen: false, status: 'reading', error: '',
+    opener: document.activeElement && document.activeElement !== document.body ? document.activeElement : null, seenNotes: 0 };
+  // a fixed box inside an element with container-type is placed against that element, not the screen: lift it while the page is open
+  host.classList.add('fc-open');
+  host.append(root);
+  const grid = host.querySelector && host.querySelector('.c3grid'); if (grid) grid.inert = true;
+  try { const u = new URL(location.href); u.searchParams.set('focus', id); if (day) u.searchParams.set('fdate', day); history.replaceState(history.state, '', u); } catch { /* no history */ }
+  draw();
+  F.timers.clock = setInterval(tick, 1000);
+  load();
+  const lv = root.querySelector('[data-fc="leave"]'); if (lv) lv.focus({ preventScroll: true });
+}
+
+/* ── reading ──────────────────────────────────────────────────────────────────────────────────────────────────── */
+
+async function load() {
+  const f = F; if (!f) return;
+  clearTimeout(f.timers.poll);
+  const e = f.ev0;
+  const p = new URLSearchParams();
+  if (f.id) p.set('event', f.id);
+  if (f.date) p.set('date', f.date);
+  if (!f.id && (e.at || e.start)) { p.set('at', e.at || e.start); if (e.title) p.set('title', e.title); }
+  const j = await pmGet('/api/meeting-focus?' + p.toString());
+  if (F !== f) return;
+  if (j && j.ok) {
+    f.data = j; f.status = 'ok'; f.error = '';
+    f.offset = Number.isFinite(j.now_ms) ? j.now_ms - Date.now() : 0;
+    refreshSheet();
+  } else if (j && j.status === 404) { f.status = 'missing'; f.error = (j && j.error) || 'no such meeting'; }
+  else { f.status = f.data ? 'ok' : 'error'; f.error = (j && j.error) || 'The meeting could not be read.'; f.stale = true; }
+  draw();
+  f.timers.poll = setTimeout(load, POLL_MS);
+}
+
+/* ── drawing ──────────────────────────────────────────────────────────────────────────────────────────────────── */
+
+/** Replace a region's children when its signature changed. */
+function region(name, sig, build) {
+  const s = typeof sig === 'string' ? sig : JSON.stringify(sig);
+  if (F.sig[name] === s) return false;
+  F.sig[name] = s;
+  put(F.r[name], ...[].concat(build()));
+  return true;
+}
+const phaseOf = () => { const n = nowMs(); const s = startMs(); const e = endMs(); return Number.isFinite(s) && n < s ? 'before' : Number.isFinite(e) && n >= e ? 'after' : 'during'; };
+const linksOf = (d) => ((d && d.event && d.event.links) || []).map((l) => ({ label: l.label, ...classify(l.url) }));
+const topicNo = (d, id) => d.topics.findIndex((t) => t.id === id) + 1;
+const currentOf = (d) => d.topics.find((t) => t.id === d.current) || null;
+const openRunOf = (d) => (d.runs || []).filter((x) => x.to_min == null).pop() || null;
+const capCount = (d) => (d.captured ? d.captured.decisions.length + d.captured.actions.length + d.captured.questions.length : 0);
+const recState = (d) => (d.note ? d.note.state : 'none');
+
+function draw() {
+  if (!F) return;
+  const d = F.data;
+  if (!d) {
+    const title = F.ev0.title || 'Meeting';
+    region('top', ['wait', F.status, F.error], () => [el('div', { class: 'fc-id' }, leaveBtn(), el('div', { class: 'fc-tt' }, el('h1', null, title),
+      el('div', { class: 'dim mono fc-sub', role: 'status' }, F.status === 'missing' ? 'PMOS has no record of this meeting on the calendar, so there is nothing to show.' : F.status === 'error' ? F.error : 'Reading the meeting.')))]);
+    for (const k of ['now', 'band', 'stage', 'cap', 'tick', 'stream']) region(k, 'wait', () => []);
+    return;
+  }
+  const ph = phaseOf();
+  drawTop(d, ph); drawNow(d, ph); drawBand(d); drawStage(d, ph); drawCap(d, ph); drawConversation(d);
+  tick();
+}
+
+const leaveBtn = () => pbtn('ghost', 'Leave focus', 'prev', { 'data-fc': 'leave', title: 'Back to where you were. The meeting keeps recording.' });
+
+function leftText(d, ph) {
+  if (ph !== 'during') return { txt: '', warn: false };
+  const left = Math.max(0, Math.round((endMs() - nowMs()) / 60000));
+  const nc = d.topics.filter((t) => t.state === 'notyet').length;
+  if (!d.current || !nc) return { txt: '', warn: false };
+  const warn = left < nc * 6;
+  return { txt: warn ? nc + ' topic' + (nc > 1 ? 's' : '') + ' left for ' + left + ' min' : '', warn };
+}
+
+function drawTop(d, ph) {
+  const e = d.event; const rec = recState(d); const ini = (d.brief && d.brief.initiative) || null; const lt = leftText(d, ph);
+  const sig = [e.title, e.at, e.end, e.attendees, ini, e.initiative, ph, rec, lt.txt, d.topics.map((t) => t.id), d.runs, F.status === 'ok' && F.stale ? 1 : 0];
+  region('top', sig, () => {
+    const s = startMs(); const f = endMs();
+    const people = (e.attendees || []);
+    const iniText = ini ? ini.title : e.initiative;
+    const when = Number.isFinite(s) ? hhmm(s) + (Number.isFinite(f) ? ' to ' + hhmm(f) : '') : '';
+    const clock = ph === 'before'
+      ? [el('div', null, el('b', { class: 'mono', 'data-fc': 'big' }, clockText((s - nowMs()) / 1000)), el('span', { class: 'dim mono' }, 'starts in'))]
+      : [el('div', null, el('b', { class: 'mono', 'data-fc': 'big' }, clockText((nowMs() - s) / 1000)), el('span', { class: 'dim mono' }, 'elapsed')),
+        Number.isFinite(f) ? el('div', null, el('b', { class: 'mono', 'data-fc': 'left' }, clockText((f - nowMs()) / 1000)), el('span', { class: 'dim mono' }, 'left')) : null];
+    const recLabel = rec === 'recording' ? 'REC' : rec === 'paused' ? 'Paused' : rec === 'ended' ? 'Ended' : '';
+    const track = d.runs.map((r) => {
+      const total = Number.isFinite(s) && Number.isFinite(f) ? (f - s) / 60000 : 60;
+      const open = r.to_min == null;
+      const to = open ? Math.max(r.from_min, (nowMs() - s) / 60000) : r.to_min;
+      const w = Math.max(0, (to - r.from_min) / total * 100);
+      const t = d.topics.find((x) => x.id === r.topic);
+      const seg = el('i', { class: open ? 'c' : 'd', ...(open ? { 'data-fc': 'currun' } : {}), title: (t ? t.text : '') + ' · ' + Math.round(to - r.from_min) + ' min' }, w >= 6 ? String(topicNo(d, r.topic)) : '');
+      seg.style.setProperty('--fc-left', Math.min(100, r.from_min / total * 100) + '%');
+      seg.style.setProperty('--fc-width', Math.min(100, w) + '%');
+      return seg;
+    });
+    return [
+      el('div', { class: 'fc-id' }, leaveBtn(),
+        el('div', { class: 'fc-tt' }, el('h1', null, e.title),
+          el('div', { class: 'chips2 dim mono' }, when ? el('span', null, when) : null, iniText ? el('span', { class: 'chip2' }, icon('init', 'sm'), iniText) : null,
+            people.length ? el('span', { title: people.join(', '), 'data-fc': 'people' }, people.length + (people.length === 1 ? ' person' : ' people')) : null))),
+      el('div', { class: 'fc-clock', role: 'timer', 'aria-live': 'off' }, ...clock, el('div', { class: 'fc-end' }, el('span', { class: 'tag' + (lt.warn ? ' fc-warn' : ''), 'data-fc': 'proj', hidden: !lt.txt }, lt.txt))),
+      el('div', { class: 'fc-acts' },
+        recLabel ? el('span', { class: 'dim mono fc-recd', 'data-fc': 'rec', 'data-rec': rec, title: rec === 'recording' ? 'Recording this meeting' : '' }, rec === 'recording' ? el('span', { class: 'fc-dot' }) : null, recLabel) : null,
+        rec === 'recording' || rec === 'paused' ? pbtn('outline', 'End meeting', 'stop', { 'data-fc': 'end', title: 'Stops the recording and saves the note' })
+          : rec !== 'ended' && ph !== 'after' ? pbtn('primary', 'Start recording', 'play', { 'data-fc': 'start', title: 'Records this meeting in a note' }) : null),
+      el('div', { class: 'fc-track', role: 'img', 'aria-label': 'What the room talked about, in order. Numbers match the topic list.' }, el('div', { class: 'fc-runs' }, ...track), el('span', { class: 'fc-nowm', 'data-fc': 'nowm' })),
+      F.stale ? el('p', { class: 'dim mono fc-stale', role: 'status' }, 'The last read failed. Showing what PMOS had.') : null,
+    ];
+  });
+}
+
+function drawNow(d, ph) {
+  const cur = currentOf(d); const nc = d.topics.filter((t) => t.state === 'notyet').length; const cap = capCount(d);
+  region('now', [cur && cur.id, cur && cur.text, d.topics.length, nc, cap, d.note && d.note.id, ph, d.topics[0] && d.topics[0].text], () => {
+    const left = cur
+      ? el('span', { class: 'fc-nowt' }, el('span', { class: 'ki hot' }, icon('play', 'sm')), el('b', { 'data-fc': 'topic' }, cur.text), el('span', { class: 'mono dim', 'data-fc': 'onfor' }, ''),
+        lk({ 'data-fc': 'topics', title: 'Not this topic? Change it here' }, 'change'))
+      : el('span', { class: 'fc-nowt dim', 'data-fc': 'first' }, d.topics.length ? [ph === 'before' ? 'First up: ' : 'No topic yet. First up: ', el('b', null, d.topics[0].text)] : 'No topics yet. PMOS adds topics as they come up.');
+    return [left, el('span', { class: 'fc-grow' }),
+      lk({ 'data-fc': 'topics' }, icon('todo', 'sm'), d.topics.length + ' topic' + (d.topics.length === 1 ? '' : 's') + (cur && nc ? ' · ' + nc + ' not covered' : '')),
+      ph !== 'before' || d.note ? lk({ 'data-fc': 'captured' }, icon('check', 'sm'), 'Captured ' + cap) : null,
+      d.note ? lk({ 'data-fc': 'note' }, icon('notes', 'sm'), 'Note') : null];
+  });
+}
+
+function ctxChip(c) {
+  return button({ variant: 'ghost', label: [el('b', null, c.label), c.sub ? el('span', null, c.sub) : null], attrs: { class: 'fc-cx', 'data-fc': 'chip', title: c.sub || c.label } });
+}
+function drawBand(d) {
+  region('band', [d.gist, d.chips], () => {
+    if (!d.gist && !(d.chips || []).length) return [];
+    F.chips = d.chips || [];
+    return [el('div', { class: 'fc-gist', 'aria-live': 'polite', 'data-fc': 'gist' },
+      d.gist ? el('p', null, icon('spark', 'sm'), el('span', null, el('span', { class: 'dim mono fc-gl' }, "What's being said"), ' ', d.gist)) : null,
+      (d.chips || []).length ? el('div', { class: 'fc-cxs', role: 'list', 'aria-label': 'Talked about, with context' }, ...d.chips.map((c, i) => { const b = ctxChip(c); b.dataset.i = String(i); return b; })) : null)];
+  });
+  F.chips = d.chips || [];
+}
+
+/* ── the stage ────────────────────────────────────────────────────────────────────────────────────────────────── */
+
+function linkRow(l) {
+  return el('li', { class: 'nrow', 'data-fc-link': l.kind },
+    el('span', { class: 'ki' }, icon(l.kind === 'confluence' || l.kind === 'link' ? 'out' : 'doc')),
+    el('div', { class: 'nb' }, el('span', { class: 'tt' }, l.label), el('div', { class: 'chips' }, el('span', { class: 'chip2' }, icon('out', 'sm'), l.app))),
+    el('div', { class: 'acts' }, openBtn(l), l.present ? presentBtn(l) : null));
+}
+const openBtn = (l) => pbtn('outline', l.kind === 'link' ? 'Open' : 'Open in ' + l.app, null, { 'data-fc': 'open-link', 'data-url': l.url, title: 'Opens it in a new tab' });
+const presentBtn = (l) => pbtn('ghost', 'Present in ' + l.app, 'play', { 'data-fc': 'present', 'data-url': l.present, title: 'Opens the deck in present mode in a new tab. Share that tab in the call.' });
+
+function beforeList(d, links) {
+  const b = d.brief || {};
+  const rows = [];
+  for (const l of links) rows.push(linkRow(l));
+  if (b.prep) rows.push(el('li', { class: 'nrow' }, el('span', { class: 'ki' }, icon('alert')), el('div', { class: 'nb' }, el('span', { class: 'tt' }, b.prep), el('div', { class: 'chips' }, el('span', { class: 'tag' }, 'To be ready'))), el('span')));
+  for (const m of (b.matters || []).slice(0, 3)) rows.push(el('li', { class: 'nrow' }, el('span', { class: 'ki' }, icon('scale')), el('div', { class: 'nb' }, el('span', { class: 'tt' }, m.text),
+    el('div', { class: 'chips' }, el('span', { class: 'tag' + (m.tone === 'bad' ? ' fc-bad' : m.tone === 'warn' ? ' fc-warn' : '') }, m.tag), m.meta ? el('span', { class: 'tag' }, m.meta) : null)), el('span')));
+  if (b.last && b.last.actions && b.last.actions.length) for (const a of b.last.actions.slice(0, 3)) rows.push(el('li', { class: 'nrow' }, el('span', { class: 'ki' }, icon('notes')), el('div', { class: 'nb' }, el('span', { class: 'tt' }, a.text),
+    el('div', { class: 'chips' }, el('span', { class: 'tag' }, 'From last time'), a.owner ? el('span', { class: 'tag' }, a.owner) : null, a.due ? el('span', { class: 'tag' }, 'due ' + a.due) : null)), el('span')));
+  return rows;
+}
+
+function drawStage(d, ph) {
+  const links = linksOf(d);
+  const cur = currentOf(d);
+  const embeddable = links.filter((l) => l.preview);
+  const pick = links[F.ui.stage] || embeddable[0] || links[0] || null;
+  const sig = [ph, links, F.ui.stage, F.ui.preview, cur && cur.text, d.brief && [d.brief.prep, d.brief.matters, d.brief.last]];
+  region('stage', sig, () => {
+    if (ph === 'before') {
+      const rows = beforeList(d, links);
+      return [sect({ ic: 'doc', title: 'Before it starts', attrs: { class: 'fc-stage', 'data-fc': 'stage', 'data-fc-stage': 'before' } },
+        rows.length ? el('ul', { class: 'list', role: 'list' }, ...rows) : el('div', { class: 'fold' }, icon('moon', 'sm'), 'Nothing is prepared for this meeting yet. Nothing is linked in the invite.'))];
+    }
+    if (!pick) return [sect({ ic: 'doc', title: 'Material', attrs: { class: 'fc-stage', 'data-fc': 'stage', 'data-fc-stage': 'none' } }, el('div', { class: 'fold' }, icon('moon', 'sm'), 'No material is linked to this meeting.'))];
+    const right = links.length > 1 ? el('div', { class: 'seg', role: 'group', 'aria-label': 'Material', 'data-fc': 'material' },
+      ...links.map((l, i) => button({ variant: 'ghost', label: [icon(l.preview ? 'doc' : 'out', 'sm'), l.app], attrs: { 'aria-pressed': String(l === pick), 'data-fc': 'material-pick', 'data-i': String(i), title: l.label } }))) : null;
+    const body = pick.preview && F.ui.preview === pick.url
+      ? [el('div', { class: 'fc-frame', 'data-fc': 'preview-wrap' }, el('iframe', { src: pick.preview, title: 'Preview of ' + pick.label + ' in ' + pick.app, loading: 'lazy', referrerpolicy: 'no-referrer', allow: 'fullscreen',
+        sandbox: 'allow-scripts allow-same-origin allow-popups allow-forms', 'data-fc': 'preview', 'data-app': pick.kind })),
+      el('div', { class: 'fc-strip' }, el('span', { class: 'dim mono fc-src' }, icon('lock', 'sm'), 'Shown by ' + pick.app + ' itself. PMOS shows nothing to the room.'), el('span', { class: 'fc-grow' }), openBtn(pick), pick.present ? presentBtn(pick) : null)]
+      : [el('div', { class: 'fc-card', 'data-fc': 'link-card' }, el('span', { class: 'ki' }, icon(pick.preview ? 'doc' : 'out')), el('div', { class: 'nb' }, el('b', null, pick.label), el('span', { class: 'dim mono' }, pick.app + (pick.host && pick.host !== pick.app ? ' · ' + pick.host : ''))), openBtn(pick), pick.present ? presentBtn(pick) : null),
+        pick.preview ? el('div', { class: 'fc-strip' }, el('span', { class: 'dim mono fc-src' }, icon('lock', 'sm'), 'PMOS loads nothing from ' + pick.app + ' until you ask.'), el('span', { class: 'fc-grow' }),
+          button({ variant: 'outline', label: [icon('eye', 'sm'), 'Show the preview here'], attrs: { 'data-fc': 'preview-on', title: 'Load the ' + pick.app + ' preview into this page' } })) : null];
+    return [sect({ ic: 'doc', title: cur ? 'Material · ' + cur.text : 'Material', right, attrs: { class: 'fc-stage', 'data-fc': 'stage', 'data-fc-stage': pick.preview && F.ui.preview === pick.url ? pick.kind : 'card' } }, ...body)];
+  });
+}
+
+/* ── captured, under the stage in the last minutes ─────────────────────────────────────────────────────────────── */
+
+function capturedBody(d) {
+  const c = d.captured || { decisions: [], actions: [], questions: [] };
+  const col = (h, ic, items, render) => el('div', { class: 'fc-col' }, el('div', { class: 'dim mono fc-lbl' }, icon(ic, 'sm'), ' ' + h + ' ', el('span', { class: 'bdg g' }, String(items.length))),
+    items.length ? el('ul', { class: 'list', role: 'list' }, ...items.map(render)) : el('div', { class: 'fold' }, 'None yet'));
+  const row = (ic, text, chips) => el('li', { class: 'nrow' }, el('span', { class: 'ki' }, icon(ic)), el('div', { class: 'nb' }, el('span', { class: 'tt' }, text), el('div', { class: 'chips' }, ...chips)), el('span'));
+  return [el('div', { class: 'fc-capg', 'data-fc': 'captured-list' },
+    col('Decisions', 'scale', c.decisions, (x) => row('scale', x.text, [el('span', { class: 'tag' }, 'draft')])),
+    col('Actions', 'todo', c.actions, (x) => row('todo', x.text, [x.owner ? el('span', { class: 'tag' }, x.owner) : el('span', { class: 'tag fc-bad' }, 'no owner yet'), x.due ? el('span', { class: 'tag' }, 'due ' + x.due) : null, el('span', { class: 'tag' }, 'draft')])),
+    col('Open questions', 'reply', c.questions, (x) => row('reply', x.text, []))),
+  el('p', { class: 'dim fc-note' }, 'Drafts from the live note. After the meeting you confirm them once. Nothing is sent to anyone.')];
+}
+function drawCap(d, ph) {
+  const left = (endMs() - nowMs()) / 60000;
+  const show = (ph === 'during' && left <= LAST_MINUTES) || ph === 'after';
+  region('cap', [show, d.captured], () => (show ? [sect({ ic: 'check', title: 'Captured so far', attrs: { class: 'fc-captured', 'data-fc': 'captured-inline' } }, ...capturedBody(d))] : []));
+}
+
+/* ── the conversation ─────────────────────────────────────────────────────────────────────────────────────────── */
+
+function actBtn(a) {
+  return pbtn('outline', a.label, a.url ? 'out' : null, { 'data-fc': 'act', 'data-i': 'x', onclick: () => (a.url ? openUrl(a.url) : openRef(a.ref)) });
+}
+function noteOpen(n, d, i, newest) {
+  const heard = n.heard ? el('span', { class: 'fc-re' }, n.heard) : null;
+  const why = n.pulledWhy || n.why;
+  return el('li', { class: 'fc-a' + (newest ? ' new' : ''), 'data-fc': 'note-card', 'data-cat': n.cat, 'data-open': 'true', 'aria-live': 'polite' },
+    el('span', { class: 'fc-who' }, el('span', { class: 'fc-avdot', 'aria-hidden': 'true' }, icon('spark', 'sm')), el('b', { class: 'mono' }, 'PMOS'), el('span', { class: 'fc-cat' }, n.cat), el('span', { class: 'dim mono fc-t' }, hhmm(n.at))),
+    heard, el('p', { class: 'fc-b' }, n.body),
+    (n.acts || []).length ? el('div', { class: 'fc-acts2' }, ...n.acts.map(actBtn)) : null,
+    el('span', { class: 'fc-meta dim' }, why ? el('span', null, el('b', null, 'Why now'), ' ' + why) : null, n.src ? el('span', null, 'from ' + n.src) : null),
+    newest ? button({ variant: 'ghost', label: icon('x', 'sm'), attrs: { class: 'fc-x', 'data-fc': 'fold', 'data-id': n.id, 'aria-label': 'Fold it', title: 'Fold it' } }) : null);
+}
+function noteShut(n) {
+  return el('li', { class: 'fc-a shut', 'data-fc': 'note-card', 'data-cat': n.cat, 'data-open': 'false' },
+    button({ variant: 'ghost', label: el('span', { class: 'fc-1' }, el('span', { class: 'fc-avdot', 'aria-hidden': 'true' }, icon('spark', 'sm')), el('span', { class: 'tag' }, n.cat), el('span', { class: 'fc-1t' }, n.body)), attrs: { class: 'fc-sb', 'data-fc': 'unfold', 'data-id': n.id, title: 'Open' } }));
+}
+function askBubble(a, err) {
+  return el('li', { class: 'fc-r me priv', 'data-fc': 'ask-q' }, el('span', { class: 'fc-who mono' }, 'You, to PMOS only'), el('p', null, a.question),
+    a.state === 'working' ? el('span', { class: 'dim mono fc-wait', role: 'status' }, 'PMOS is reading the record.') : null,
+    err ? el('span', { class: 'fc-err', role: 'status' }, 'PMOS could not answer: ' + err) : null);
+}
+
+function drawConversation(d) {
+  const tail = (d.tail || []).slice(-2);
+  region('tick', tail, () => tail.map((x) => el('p', null, el('span', { class: 'mono' }, x.who), ' ' + x.text)));
+  const notes = d.notes || [];
+  const pulled = F.ui.pulled.map((id) => notes.find((n) => n.id === id)).filter(Boolean);
+  const held = notes.filter((n) => n.show === 'hold' && !F.ui.pulled.includes(n.id));
+  const shown = notes.filter((n) => n.show !== 'hold').concat(pulled.map((n) => ({ ...n, at: F.pulledAt && F.pulledAt[n.id] || n.at, pulledWhy: 'You asked for it early. PMOS was holding it ' + (n.when || 'for later') + '.' })));
+  const asks = (d.asks || []).slice();
+  for (const [id, p] of F.ui.pending) if (!asks.some((a) => a.id === id)) asks.push({ id, at: p.at, question: p.question, state: 'working' });
+  const items = [...shown.map((n) => ({ kind: 'note', at: n.at, n })), ...asks.map((a) => ({ kind: 'ask', at: a.at, a }))]
+    .map((x, i) => ({ ...x, i })).sort((a, b) => a.at - b.at || (a.kind === 'ask' ? -1 : 1) - (b.kind === 'ask' ? -1 : 1) || a.i - b.i);
+  let newestAt = -1; items.forEach((x, k) => { if (x.kind === 'note') newestAt = k; });
+  const comp = d.companion || {};
+  const recording = recState(d) === 'recording';
+  const listen = !recording ? 'PMOS listens when the meeting records.'
+    : comp.on ? 'PMOS is listening.' : 'PMOS is listening to the transcript only. The companion is off, so it adds no notes.';
+  const sig = [items.map((x) => x.kind === 'note' ? [x.n.id, x.n.show, x.n.pulledWhy ? 1 : 0] : [x.a.id, x.a.state]), newestAt, [...F.ui.open], [...F.ui.folded], held.map((n) => n.id), F.ui.heldOpen, listen, comp.error || '', [...F.ui.failed], recording];
+  const changed = region('stream', sig, () => {
+    const rows = items.map((x, k) => {
+      if (x.kind === 'ask') return askBubble(x.a, F.ui.failed.get(x.a.id));
+      const isNew = k === newestAt;
+      const open = isNew ? !F.ui.folded.has(x.n.id) : F.ui.open.has(x.n.id);
+      return open ? noteOpen(x.n, d, k, isNew) : noteShut(x.n);
+    });
+    if (held.length) {
+      const det = el('details', { class: 'fc-held', 'data-fc': 'held', ...(F.ui.heldOpen ? { open: true } : {}) },
+        el('summary', null, el('span', { class: 'fc-avdot', 'aria-hidden': 'true' }, icon('spark', 'sm')), 'PMOS is holding ' + held.length + ' for the right moment'),
+        el('ul', { role: 'list' }, ...held.map((n) => el('li', null, button({ variant: 'ghost', label: [el('span', { class: 'tag' }, n.cat), el('span', { class: 'fc-hw dim' }, n.when || '')], attrs: { class: 'fc-pl', 'data-fc': 'pull', 'data-id': n.id, title: 'Show it now' } })))));
+      det.addEventListener('toggle', () => { if (F) F.ui.heldOpen = det.open; });
+      rows.push(el('li', { class: 'fc-heldli' }, det));
+    }
+    rows.push(el('li', { class: 'fc-listen dim', 'data-fc': 'listening' }, el('span', { class: recording ? 'fc-dot' : 'fc-dot off' }), listen));
+    if (comp.error) rows.push(el('li', { class: 'fc-listen dim', role: 'status' }, comp.error));
+    return rows;
+  });
+  const nNotes = shown.length + asks.length;
+  if (changed && nNotes > F.seenNotes) { F.r.stream.scrollTop = F.r.stream.scrollHeight; }
+  F.seenNotes = nNotes;
+}
+
+function askForm() {
+  const input = el('input', { type: 'text', 'aria-label': 'Ask PMOS, only you see it', placeholder: 'Ask PMOS quietly', maxlength: '500', autocomplete: 'off', 'data-fc': 'ask-input' });
+  const form = el('form', { class: 'fc-in', 'data-fc': 'ask-form' }, input, ib('Ask', 'next', { type: 'submit', 'data-fc': 'ask' }));
+  form.addEventListener('submit', (e) => { e.preventDefault(); const q = input.value.trim(); if (!q) return; input.value = ''; ask(q); });
+  return form;
+}
+
+async function ask(question) {
+  const f = F; if (!f || !f.data) return;
+  const body = { event: f.data.event.id, date: f.date, question };
+  if (f.data.note) body.note = f.data.note.id;
+  if (wsParam()) body.ws = wsParam();
+  const at = nowMs();
+  const r = await pmPost('/api/meeting-focus/ask', body);
+  if (F !== f) return;
+  if (!r || !r.ok) { toast({ text: (r && r.error) || 'The question was not sent.', tone: 'error' }); return; }
+  f.ui.pending.set(r.id, { question, at });
+  draw();
+  const t = setInterval(async () => {
+    const s = await pmGet('/api/meeting-focus/ask?id=' + encodeURIComponent(r.id));
+    if (F !== f) { clearInterval(t); return; }
+    if (s && s.ok && s.state === 'working') return;
+    clearInterval(t); f.askTimers.delete(r.id);
+    if (s && s.ok && s.state === 'answered') f.ui.pending.delete(r.id);
+    else f.ui.failed.set(r.id, (s && s.error) || 'The agent did not answer.');
+    await load();
+  }, 1500);
+  f.askTimers.set(r.id, t);
+}
+
+/* ── the clock ────────────────────────────────────────────────────────────────────────────────────────────────── */
+
+function tick() {
+  if (!F || !F.data) return;
+  const d = F.data; const n = nowMs(); const s = startMs(); const f = endMs();
+  if (phaseOf() !== F.sig.phase) { F.sig.phase = phaseOf(); if (F.sig.phaseSet) { draw(); return; } F.sig.phaseSet = true; }
+  const set = (k, v) => { for (const x of document.querySelectorAll('[data-fc="' + k + '"]')) if (x.textContent !== v) x.textContent = v; };
+  const ph = phaseOf();
+  if (ph === 'before') set('big', clockText((s - n) / 1000));
+  else { set('big', clockText((n - s) / 1000)); if (Number.isFinite(f)) set('left', clockText((f - n) / 1000)); }
+  const total = Number.isFinite(f) ? (f - s) / 60000 : 60;
+  const nm = F.root.querySelector('[data-fc="nowm"]'); if (nm) nm.style.setProperty('--fc-left', Math.max(0, Math.min(100, (n - s) / 60000 / total * 100)) + '%');
+  const run = openRunOf(d);
+  if (run) {
+    set('onfor', clockText((n - (s + run.from_min * 60000)) / 1000));
+    const cr = F.root.querySelector('[data-fc="currun"]'); if (cr) cr.style.setProperty('--fc-width', Math.min(100, Math.max(0, ((n - s) / 60000 - run.from_min) / total * 100)) + '%');
+  }
+}
+
+/* ── side sheets: Topics and Captured ─────────────────────────────────────────────────────────────────────────── */
+
+function refreshSheet() {
+  if (!F || !F.sheetOpen || !F.sheet) return;
+  const b = F.sheet.body;
+  if (!b.isConnected) return;
+  const a = document.activeElement;
+  if (a && b.contains(a) && a.matches('input, textarea')) return;   // not under the cursor
+  put(b, ...F.sheet.build());
+}
+function showSheet(kind, title, ic, build) {
+  const s = openSheet({ title, icon: ic, onClose: () => { if (F) { F.sheetOpen = false; F.sheet = null; F.ui.picker = false; F.ui.newTopic = false; F.ui.addTopic = false; } } });
+  F.sheet = { kind, body: s.body, build }; F.sheetOpen = true;
+  put(s.body, ...build());
+  return s;
+}
+
+async function postTopic(action, topic) {
+  const f = F; if (!f || !f.data) return false;
+  const body = { event: f.data.event.id, date: f.date, action, topic };
+  if (f.data.note) body.note = f.data.note.id;
+  if (wsParam()) body.ws = wsParam();
+  const r = await pmPost('/api/meeting-focus/topic', body);
+  if (F !== f) return false;
+  if (!r || !r.ok) { toast({ text: (r && r.error) || 'The correction was not saved.', tone: 'error' }); return false; }
+  f.ui.picker = false; f.ui.newTopic = false; f.ui.addTopic = false;
+  await load();
+  return true;
+}
+
+function inlineForm(label, placeholder, onSubmit, attr) {
+  const input = el('input', { type: 'text', 'aria-label': label, placeholder, maxlength: '120', 'data-fc': attr, autocomplete: 'off' });
+  const form = el('form', { class: 'fc-addf' }, input, pbtn('primary', 'Add', null, { type: 'submit', 'data-fc': attr + '-go' }));
+  form.addEventListener('submit', (e) => { e.preventDefault(); const v = input.value.trim(); if (v) onSubmit(v); });
+  queueMicrotask(() => { if (input.isConnected) input.focus(); });
+  return form;
+}
+
+function topicsBuild() {
+  const d = F.data; const ph = phaseOf();
+  const cur = currentOf(d);
+  const rows = d.topics.map((t, i) => {
+    const now = t.state === 'now';
+    const ki = t.state === 'discussed' ? icon('check') : now ? icon('play') : t.state === 'parked' ? icon('clock') : el('span', { class: 'mono' }, String(i + 1));
+    const chips = [
+      t.src === 'added' ? el('span', { class: 'tag fc-acc' }, icon('plus', 'sm'), 'came up ' + (t.at ? hhmm(t.at) : '') + (t.by && t.by !== 'PMOS' ? ' · ' + t.by : '')) : t.src === 'pm' ? el('span', { class: 'tag fc-acc' }, icon('plus', 'sm'), 'added by you') : el('span', { class: 'tag' }, t.src === 'last' ? 'from the last note' : 'from the invite'),
+      t.state === 'discussed' ? el('span', { class: 'tag' }, t.minutes + ' min') : null,
+      t.state === 'parked' ? el('span', { class: 'tag fc-warn' }, 'parked') : null,
+      t.state === 'notyet' && cur ? el('span', { class: 'tag' }, 'not yet') : null,
+    ];
+    const run = now ? openRunOf(d) : null;
+    return el('li', { class: 'nrow fc-ai' + (now ? ' cur' : '') + (t.state === 'discussed' || t.state === 'parked' ? ' done' : ''), 'data-fc-topic': t.id, 'data-state': t.state, ...(now ? { 'aria-current': 'true' } : {}) },
+      el('span', { class: 'ki' + (now ? ' hot' : '') }, ki),
+      el('div', { class: 'nb' }, el('span', { class: 'tt' }, t.text), el('div', { class: 'chips' }, ...chips),
+        now ? [el('div', { class: 'fc-cd' }, el('b', { class: 'mono', 'data-fc': 'onfor' }, run ? clockText((nowMs() - (startMs() + run.from_min * 60000)) / 1000) : ''), el('span', { class: 'dim mono' }, 'on this' + (t.minutes > 0 && run ? '' : ''))),
+          t.by === 'PMOS' || t.src === 'added' ? el('p', { class: 'dim fc-src' }, icon('spark', 'sm'), ' PMOS picked this up from the talk.') : null,
+          el('div', { class: 'iacts' }, pbtn('outline', 'Not this topic', null, { 'data-fc': 'picker', 'aria-expanded': String(F.ui.picker) }), pbtn('ghost', 'Park it', 'clock', { 'data-fc': 'park' })),
+          F.ui.picker ? el('div', { class: 'fc-pick', role: 'group', 'aria-label': 'The room is on' }, ...d.topics.filter((x) => x.id !== t.id).map((x) => lk({ 'data-fc': 'pick', 'data-text': x.text }, topicNo(d, x.id) + '. ' + x.text)),
+            lk({ 'data-fc': 'new-topic' }, icon('plus', 'sm'), 'Something new')) : null,
+          F.ui.newTopic ? inlineForm('The topic the room is on', 'Name the topic', (v) => postTopic('set', v), 'new-input') : null] : null),
+      el('span'));
+  });
+  const added = d.topics.filter((t) => t.src === 'added').length;
+  const from = d.topics.some((t) => t.src === 'steps') ? "the meeting's steps" : d.topics.some((t) => t.src === 'purpose') ? "the meeting's purpose" : 'the meeting card';
+  return [sect({ ic: 'todo', title: 'Topics', count: d.topics.length, right: pbtn('ghost', 'Add topic', 'plus', { 'data-fc': 'add-topic' }), attrs: { 'data-fc': 'topics-sheet' } },
+    F.ui.addTopic ? inlineForm('A new topic', 'Name the topic', (v) => postTopic('add', v), 'add-input') : null,
+    rows.length ? el('ul', { class: 'list', role: 'list' }, ...rows) : el('div', { class: 'fold' }, 'No topics yet. Add one, or PMOS adds topics as they come up.'),
+    el('p', { class: 'dim fc-src' }, 'Starts from ' + from + (added ? '; ' + added + ' added from the talk' : '') + '. PMOS marks the topic the room is on and adds topics that come up. Topics have no time limits; the minutes show how long each one took.'))];
+}
+function capturedBuild() { return [sect({ ic: 'check', title: 'Captured so far', attrs: { 'data-fc': 'captured-sheet' } }, ...capturedBody(F.data))]; }
+
+/* ── opening what a chip or an action names ───────────────────────────────────────────────────────────────────── */
+
+function openUrl(url) { try { window.open(classify(url).url, '_blank', 'noopener,noreferrer'); } catch { /* a blocked pop-up */ } }
+const goTab = (id) => { const b = document.querySelector('[data-c3-tab="' + id + '"]'); if (b) b.click(); };
+function openRef(ref) {
+  if (!ref) return;
+  const t = ref.type;
+  closeFocus();
+  if (t === 'initiative') { import('./c3-init-extras.js').then((m) => { if (!m.goInitiative(ref.id)) goTab('init'); }).catch(() => goTab('init')); return; }
+  if (t === 'note') { window.dispatchEvent(new CustomEvent('c3-open-note', { detail: { id: ref.id } })); return; }
+  if (t === 'item') { goTab('work'); return; }
+  if (t === 'plan-item' || t === 'release' || t === 'jira' || t === 'ask') {
+    if (ref.initiative) import('./c3-init-extras.js').then((m) => { if (!m.goInitiative(ref.initiative)) goTab('init'); }).catch(() => goTab('init')); else goTab('init');
+    return;
+  }
+  if (t === 'report') { goTab('rep'); return; }
+  if (t === 'event') { goTab('cal'); return; }
+  goTab(t === 'decision' ? 'brief' : 'init');
+}
+function openChip(c) {
+  if (!c) return;
+  if (c.ref) { openRef(c.ref); return; }
+  if (c.url) { openUrl(c.url); return; }
+  showSheet('chip', c.label, 'doc', () => [el('div', { class: 'fc-chipsheet', 'data-fc': 'chip-sheet' }, el('p', { class: 'fc-p' }, c.detail || c.sub || c.label), c.from ? el('p', { class: 'dim fc-note' }, 'From ' + c.from + '.') : null)]);
+}
+
+/* ── recording ────────────────────────────────────────────────────────────────────────────────────────────────── */
+
+async function startRecording() {
+  const f = F; if (!f || !f.data) return;
+  const e = f.data.event;
+  if (isDemo()) { const m = await import('./shell-recording.js'); m.simStart(e.title); return; }
+  const dock = await import('./note-dock.js');
+  const asEvent = { ...(f.ev0 || {}), id: baseId(e.id), start: e.at, end: e.end || null, title: e.title, attendees: e.attendees || [], initiative: (f.ev0 && f.ev0.initiative) || e.initiative || null };
+  await dock.recordEvent(asEvent);
+  setTimeout(() => { if (F === f) load(); }, 600);
+}
+async function endMeeting() {
+  const f = F; if (!f) return;
+  if (isDemo()) { const m = await import('./shell-recording.js'); m.simDock.stopNow(); return; }
+  const dock = await import('./note-dock.js');
+  await dock.stopNow();
+  setTimeout(() => { if (F === f) load(); }, 600);
+}
+
+/* ── presses ──────────────────────────────────────────────────────────────────────────────────────────────────── */
+
+function onClick(ev) {
+  const t = ev.target.closest('[data-fc]'); if (!t || !F || !F.root.contains(t)) return;
+  const k = t.dataset.fc; const d = F.data;
+  if (k === 'leave') { closeFocus(); return; }
+  if (!d) return;
+  if (k === 'topics') { showSheet('topics', 'Topics', 'todo', topicsBuild); return; }
+  if (k === 'captured') { showSheet('captured', 'Captured so far', 'check', capturedBuild); return; }
+  if (k === 'note') { const id = d.note && d.note.id; closeFocus(); if (id) window.dispatchEvent(new CustomEvent('c3-open-note', { detail: { id } })); return; }
+  if (k === 'chip') { openChip(F.chips[Number(t.dataset.i)]); return; }
+  if (k === 'preview-on') { const ls = linksOf(d); const pk = ls[F.ui.stage] || ls.find((l) => l.preview) || ls[0]; F.ui.preview = pk && pk.url; drawStage(d, phaseOf()); return; }
+  if (k === 'material-pick') { F.ui.stage = Number(t.dataset.i) || 0; drawStage(d, phaseOf()); return; }
+  if (k === 'open-link' || k === 'present') { openUrl(t.dataset.url); return; }
+  if (k === 'start') { startRecording(); return; }
+  if (k === 'end') { endMeeting(); return; }
+  if (k === 'fold') { F.ui.folded.add(t.dataset.id); drawConversation(d); return; }
+  if (k === 'unfold') { const id = t.dataset.id; if (F.ui.open.has(id)) F.ui.open.delete(id); else F.ui.open.add(id); F.ui.folded.delete(id); drawConversation(d); return; }
+  if (k === 'pull') {
+    const id = t.dataset.id; F.ui.pulled.push(id); (F.pulledAt ||= {})[id] = nowMs(); F.ui.folded.clear();
+    for (const x of document.querySelectorAll('[data-fc="held"]')) x.open = false; F.ui.heldOpen = false;
+    drawConversation(d); return;
+  }
+}
+
+// the side sheets live outside the page's root, so their presses are caught on the document
+document.addEventListener('click', (ev) => {
+  if (F && ev.target.closest && F.root.contains(ev.target)) { onClick(ev); return; }
+  if (!F || !F.sheetOpen || !F.sheet) return;
+  const t = ev.target.closest && ev.target.closest('[data-shell="sheet"] [data-fc]'); if (!t) return;
+  const k = t.dataset.fc;
+  if (k === 'picker') { F.ui.picker = !F.ui.picker; F.ui.newTopic = false; refreshSheet(); return; }
+  if (k === 'new-topic') { F.ui.newTopic = true; refreshSheet(); return; }
+  if (k === 'pick') { const text = t.dataset.text; postTopic('set', text).then((ok) => { if (ok) { closeSheet(); toast('Now on: ' + text + '.'); } }); return; }
+  if (k === 'park') {
+    const cur = currentOf(F.data); if (!cur) return;
+    const others = F.data.topics.some((x) => x.id !== cur.id && x.state === 'notyet');
+    postTopic('park', cur.text).then((ok) => { if (ok) closeSheet(); return ok; }).then((ok) => { if (ok) toast(others ? 'Parked. It stays in the note as an open topic.' : 'Parked. Every other topic is covered.'); });
+    return;
+  }
+  if (k === 'add-topic') { F.ui.addTopic = !F.ui.addTopic; refreshSheet(); return; }
+});