create-pmos 0.106.0 → 0.108.0

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

@@ -0,0 +1,383 @@
+/* pm/dest-notes.js — the Notes place: every meeting note, grouped by initiative, and the note itself (meeting-notes Run 12,
+ * the "Notes: next features" mockup the PM approved on 2026-10-07, board 1 "Notes menu").
+ *
+ * A DESTINATION MODULE (registry.js): mountDestination(host, ctx) on every render with the same host, disposeDestination(host).
+ * It keeps ONE persistent root per host and redraws its two cards only when what they show changed, so a title being typed
+ * keeps its focus. A link from another place (a calendar event, an initiative's Notes tab) opens a note through the tab's slug.
+ *
+ * Layout, as the mockup: the page title and a search field, then two cards side by side.
+ *   left    BY INITIATIVE · n notes. One group per initiative, then "No initiative"; each row is the meeting time or day,
+ *           the title, and an amber dot when a statement in the note differs from a file in the repository.
+ *   right   the note: one meta line (Meeting note · day time · length · initiative), the title with Record / Resume / Stop
+ *           and the ⋯ menu, then only what is there: Conflicts with other files, Highlights, the Overview, Decisions,
+ *           Next steps (owner · due, and Make task), Open questions, and the discussion and transcript folded at the end.
+ *
+ * WHERE EACH PART COMES FROM. After Stop and the final pass, the agent's final notes (note.final_notes: grounded in quotes);
+ * before that, what was caught live (view-notes.js caughtItems: the agent's minute bullets, else the labelled lines) and
+ * the overview the agent or this machine wrote. Conflicts are the lines, bullets and highlights whose repository check says
+ * the file differs (lib/notes.js conflictsOf). The overview and the final items are edited in place: a click puts the
+ * cursor in the text and leaving it saves (POST /api/notes/final-edit), as the mockup shows. Make task adds the next step
+ * to the note's initiative as a plan item in its first stage (POST /api/plan-items, the Breakdown's own writer), with Undo.
+ */
+
+import { el } from './dom.js';
+import { button, iconButton, field, row, menu, toast, empty, ensureComponentsCss } from './primitives.js';
+import { ensureSprite } from './icons.js';
+import { pmGet, pmPost } from './http.js';
+import { registerCommand, openDestination } from './registry.js';
+import { askConfirm } from './dialogs.js';
+import * as dock from './note-dock.js';
+import * as V from './view-notes.js';
+import { makeTask as makeTaskFrom } from './notes-task.js';
+
+export const COPY = Object.freeze({
+  title: 'Notes',
+  fixture: 'Notes shows your meeting notes in a real session.',
+  search: 'Search notes',
+  byInitiative: 'By initiative',
+  count: (n) => `${n} ${n === 1 ? 'note' : 'notes'}`,
+  noInitiative: 'No initiative',
+  none: 'No notes yet. Press Record at the top right to start one.',
+  noMatch: (q) => `No note matches “${q}”.`,
+  pick: 'Choose a note to read it.',
+  reading: 'Reading…',
+  readError: 'The notes could not be read.',
+  meetingNote: 'Meeting note',
+  record: 'Record', resume: 'Resume', stop: 'Stop',
+  conflicts: 'Conflicts with other files',
+  conflictWith: 'conflicts with',
+  openFile: 'Open file',
+  highlights: 'Highlights',
+  overview: 'Overview',
+  noOverview: 'No overview yet. It is written when you stop recording.',
+  decisions: 'Decisions', actions: 'Next steps', questions: 'Open questions',
+  makeTask: 'Make task',
+  taskAdded: (ini, stage) => `Added to ${ini}, under ${stage}`,
+  taskNoInitiative: 'Link the note to an initiative first. Make task adds the step to its breakdown.',
+  taskFailed: 'The task was not made',
+  undo: 'Undo',
+  discussion: 'Discussion',
+  transcript: (n) => `${n} transcript ${n === 1 ? 'line' : 'lines'}`,
+  openFull: 'Open the full note',
+  del: 'Delete note',
+  delAsk: (t) => `Delete “${t}”?`,
+  delBody: 'The note, its transcript and its audio are deleted from this machine.',
+  saved: 'Saved',
+  notSaved: 'Not saved',
+  edited: 'edited',
+});
+
+registerCommand({ id: 'notes-open', label: 'Notes', hint: 'Your meeting notes, by initiative', cli: null, run: () => openDestination('notes') });
+registerCommand({ id: 'notes-menu-open', label: 'notes menu', hint: 'All notes by initiative', cli: null, run: () => openDestination('notes') });
+
+/* ── words ───────────────────────────────────────────────────────────────────────────────────────────────────────── */
+
+const dayStart = (d) => { const t = new Date(d); t.setHours(0, 0, 0, 0); return t.getTime(); };
+/** The left column's time: "14:00" today, "Mon" this week, else "1 Oct". */
+export function whenShort(iso, now = Date.now()) {
+  const t = Date.parse(iso);
+  if (!Number.isFinite(t)) return '';
+  const d = new Date(t);
+  const days = Math.round((dayStart(now) - dayStart(t)) / 86400000);
+  if (days === 0) return d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', hour12: false });
+  if (days > 0 && days < 7) return d.toLocaleDateString('en-GB', { weekday: 'short' });
+  return d.toLocaleDateString('en-GB', { day: 'numeric', month: 'short' });
+}
+/** "Today 14:00", "Mon 6 Oct 14:00". */
+function whenLong(iso, now = Date.now()) {
+  const t = Date.parse(iso);
+  if (!Number.isFinite(t)) return '';
+  const d = new Date(t);
+  const hm = d.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', hour12: false });
+  return (dayStart(now) === dayStart(t) ? 'Today' : d.toLocaleDateString('en-GB', { weekday: 'short', day: 'numeric', month: 'short' })) + ' ' + hm;
+}
+const minutes = (ms) => (ms >= 60000 ? Math.round(ms / 60000) + ' min' : '');
+const startOf = (n) => (n.meeting && n.meeting.start) || n.recorded_from || n.created_at || n.updated_at;
+const iniName = (i) => (i ? i.title || i.id : null);
+const lengthOf = (n) => {
+  const ts = (n.transcript || []).map((x) => x.t || 0);
+  return ts.length ? Math.max(...ts) : 0;
+};
+
+/** The notes, grouped by initiative title, "No initiative" last; each group newest first. Pure. */
+export function groupNotes(rows) {
+  const groups = new Map();
+  for (const r of rows) {
+    const k = iniName(r.initiative) || '';
+    if (!groups.has(k)) groups.set(k, []);
+    groups.get(k).push(r);
+  }
+  return [...groups.entries()]
+    .sort((a, b) => (a[0] === '' ? 1 : b[0] === '' ? -1 : a[0].localeCompare(b[0])))
+    .map(([k, list]) => ({ key: k, label: k || COPY.noInitiative, rows: list }));
+}
+
+/** What the note shows, from the final notes when there are some, else from what was caught live. Pure. */
+export function partsOf(n) {
+  const f = n.final_notes;
+  if (f) {
+    return {
+      from: 'final',
+      overview: f.overview || f.purpose || '',
+      decisions: (f.decisions || []).map((x, i) => ({ ...x, sec: 'decision', i })),
+      actions: (f.actions || []).map((x, i) => ({ ...x, sec: 'action', i })),
+      questions: (f.questions || []).map((x, i) => ({ ...x, sec: 'question', i })),
+      topics: f.topics || [],
+    };
+  }
+  const c = V.caughtItems(n);
+  let overview = '';
+  if (n.agent && n.agent.markdown) overview = String(n.agent.markdown).split(/\r?\n/).map((l) => l.replace(/^\s*(?:#+|[-*]|\d+[.)])\s*/, '').replace(/\*\*|__|`/g, '').trim()).filter((l) => l && !/^(summary|overview)$/i.test(l)).join(' ');
+  else {
+    const ov = n.summary && n.summary.sections && n.summary.sections.overview;
+    if (Array.isArray(ov)) overview = ov.map((x) => String((x && x.text) || '')).filter(Boolean).join(' ');
+  }
+  return { from: 'live', overview, decisions: c.decision, actions: c.action, questions: c.question, topics: [] };
+}
+
+/** The statements that differ from a repository file (lib/notes.js conflictsOf, read on the page). Pure. */
+export function conflictsOf(n) {
+  const out = []; const seen = new Set();
+  const add = (x) => {
+    const c = x && !x.dropped && x.check;
+    if (!c || c.verdict !== 'differs' || !c.doc) return;
+    const k = c.doc + ':' + (c.line || 0);
+    if (seen.has(k)) return;
+    seen.add(k);
+    out.push({ text: x.text, doc: c.doc, line: c.line || null, t: typeof x.t === 'number' ? x.t : null });
+  };
+  (n.highlights || []).forEach(add); (n.transcript || []).forEach(add); (n.bullets || []).forEach(add);
+  return out;
+}
+
+/* ── mount ───────────────────────────────────────────────────────────────────────────────────────────────────────── */
+
+const insts = new WeakMap();
+const REREAD_MS = 4000;
+
+export function mountDestination(host, ctx) {
+  let inst = insts.get(host);
+  if (!inst) {
+    inst = { host, root: el('div', { class: 'rp-page nt-pg', 'data-notes-page': '' }), head: null, left: el('section', { class: 'nt-pg-card nt-pg-list', 'data-ntm': 'list' }),
+      right: el('section', { class: 'nt-pg-card nt-pg-note', 'data-ntm': 'note' }), rows: null, error: null, q: '', open: null, note: null, slug: null,
+      readAt: 0, seq: 0, leftSig: '', rightSig: '', repo: null, ctx };
+    insts.set(host, inst);
+  }
+  inst.ctx = ctx;
+  ensureComponentsCss();
+  if (!inst.root.isConnected || inst.root.parentNode !== host) host.replaceChildren(inst.root);
+  if (ctx && ctx.FIXTURE) { inst.root.replaceChildren(empty({ text: COPY.fixture })); return; }
+  ensureSprite();
+  if (!inst.head) {
+    const find = field({ label: COPY.search, kind: 'text', hideLabel: true, placeholder: COPY.search, attrs: { 'data-ntm': 'search', class: 'nt-pg-search' } });
+    find.control.addEventListener('input', () => { inst.q = find.control.value; drawLeft(inst, true); });
+    inst.head = el('div', { class: 'rp-head nt-pg-head' }, el('h1', { class: 'rp-head__title' }, COPY.title), find);
+    inst.root.replaceChildren(inst.head, el('div', { class: 'nt-pg-grid' }, inst.left, inst.right));
+  }
+  inst.repo = (ctx && ctx.tab && ctx.tab.repo) || (ctx && ctx.state && ctx.state.product) || null;
+  const slug = (ctx && ctx.tab && ctx.tab.slug) || null;
+  if (slug !== inst.slug) { inst.slug = slug; if (slug) { inst.open = slug; inst.note = null; } }
+  if (!inst.rows || Date.now() - inst.readAt > REREAD_MS) refresh(inst);
+  drawLeft(inst);
+  drawRight(inst);
+}
+
+export function disposeDestination(host) {
+  const inst = insts.get(host);
+  if (!inst) return;
+  inst.seq++;
+  inst.root.remove();
+  insts.delete(host);
+}
+
+async function refresh(inst) {
+  const seq = ++inst.seq;
+  inst.readAt = Date.now();
+  const [r, one] = await Promise.all([pmGet('/api/notes'), inst.open ? pmGet('/api/notes/one?id=' + encodeURIComponent(inst.open)) : null]);
+  if (seq !== inst.seq) return;
+  if (r && r.ok) { inst.rows = r.notes || []; inst.error = null; } else { inst.rows = inst.rows || []; inst.error = (r && r.error) || COPY.readError; }
+  if (!inst.open && inst.rows.length) inst.open = inst.rows[0].id;
+  if (one && one.ok && one.note && one.note.id === inst.open) inst.note = one.note;
+  else if (inst.open && !one) loadOpen(inst);
+  drawLeft(inst);
+  drawRight(inst);
+}
+async function loadOpen(inst) {
+  const id = inst.open;
+  const r = await pmGet('/api/notes/one?id=' + encodeURIComponent(id));
+  if (inst.open !== id) return;
+  inst.note = r && r.ok ? r.note : null;
+  drawRight(inst);
+}
+function choose(inst, id) {
+  if (inst.open === id) return;
+  inst.open = id; inst.note = null;
+  drawLeft(inst, true); drawRight(inst);
+  loadOpen(inst);
+}
+
+/* ── the left card: notes by initiative ──────────────────────────────────────────────────────────────────────────── */
+
+function drawLeft(inst, force) {
+  const rows = inst.rows;
+  const q = inst.q.trim().toLowerCase();
+  const sig = JSON.stringify([rows && rows.map((r) => [r.id, r.title, r.updated_at, iniName(r.initiative), r.conflicts]), q, inst.open, inst.error]);
+  if (!force && sig === inst.leftSig) return;
+  inst.leftSig = sig;
+  const shown = (rows || []).filter((r) => !q || String(r.title || '').toLowerCase().includes(q) || String(iniName(r.initiative) || '').toLowerCase().includes(q));
+  const head = el('h2', { class: 'nt-pg-label' }, el('span', null, COPY.byInitiative), el('span', { class: 'nt-pg-label__n' }, rows ? COPY.count(shown.length) : ''));
+  let body;
+  if (!rows) body = el('p', { class: 'nt-hint' }, COPY.reading);
+  else if (!rows.length) body = empty({ text: inst.error || COPY.none });
+  else if (!shown.length) body = empty({ text: COPY.noMatch(inst.q.trim()) });
+  else {
+    body = el('div', { class: 'nt-pg-groups' }, groupNotes(shown).map((g) => el('div', { class: 'nt-pg-group', 'data-ntm-group': g.label },
+      el('h3', { class: 'nt-pg-group__h' }, el('span', null, g.label), el('span', { class: 'nt-pg-label__n' }, String(g.rows.length))),
+      g.rows.map((r) => row({ title: r.title || 'Untitled note', compact: true,
+        lead: [el('span', { class: 'nt-pg-row__at' }, whenShort(startOf(r)))],
+        trail: r.conflicts ? [el('span', { class: 'nt-pg-warn-dot', 'data-ntm-conflict-dot': '', title: r.conflicts + (r.conflicts === 1 ? ' conflict' : ' conflicts') })] : null,
+        onOpen: () => choose(inst, r.id), openLabel: 'Open ' + (r.title || 'Untitled note'),
+        openAttrs: { 'aria-current': r.id === inst.open ? 'true' : 'false' },
+        attrs: { class: 'nt-pg-row', 'data-ntm-row': r.id } })))));
+  }
+  inst.left.replaceChildren(head, body);
+}
+
+/* ── the right card: the note ────────────────────────────────────────────────────────────────────────────────────── */
+
+function drawRight(inst, force) {
+  const n = inst.note;
+  const live = dock.recordState();
+  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)], live.mode, live.id, !!inst.rows]);
+  if (!force && sig === inst.rightSig) return;
+  // a field being typed in is not redrawn under the cursor; the next read after it is left draws it
+  if (inst.right.contains(document.activeElement) && document.activeElement.matches('input, [contenteditable="true"]')) return;
+  inst.rightSig = sig;
+  if (!inst.open) { inst.right.replaceChildren(empty({ text: inst.rows && inst.rows.length ? COPY.pick : COPY.none })); return; }
+  if (!n) { inst.right.replaceChildren(el('p', { class: 'nt-hint' }, COPY.reading)); return; }
+  inst.right.replaceChildren(...noteParts(inst, n, live));
+}
+
+function noteParts(inst, n, live) {
+  const p = partsOf(n);
+  const meta = [COPY.meetingNote, whenLong(startOf(n)), minutes(lengthOf(n)), iniName(n.initiative)].filter(Boolean).join(' · ');
+  const title = field({ label: 'Title', kind: 'title', hideLabel: true, value: n.title || '', placeholder: 'Untitled note',
+    attrs: { 'data-ntm': 'title', class: 'nt-pg-title' },
+    onCommit: async (v) => { const r = await pmPost('/api/notes/save', { id: n.id, title: v }); if (r && r.ok) { n.title = v; refresh(inst); } else toast({ text: COPY.notSaved, tone: 'destructive' }); } });
+  const isLive = live.mode === 'recording' && live.id === n.id;
+  const acts = [];
+  if (!n.private) {
+    acts.push(isLive
+      ? button({ label: COPY.stop, variant: 'outline', size: 'sm', onClick: () => dock.finish(), attrs: { 'data-ntm': 'stop' } })
+      : button({ label: (n.transcript || []).length ? COPY.resume : COPY.record, variant: 'primary', size: 'sm', icon: 'mic',
+        onClick: () => dock.recordNote(n.id, n.title), attrs: { 'data-ntm': (n.transcript || []).length ? 'resume' : 'record' } }));
+  }
+  const more = iconButton({ icon: 'ellipsis', ariaLabel: 'More', attrs: { 'data-ntm': 'more' },
+    onClick: () => menu({ anchor: more, ariaLabel: 'Note actions', items: [
+      { label: COPY.openFull, onSelect: () => dock.openDock(n.id) },
+      { label: COPY.del, onSelect: () => deleteNote(inst, n) },
+    ] }) });
+  acts.push(more);
+  const out = [
+    el('div', { class: 'nt-pg-top' },
+      el('span', { class: 'nt-pg-meta', 'data-ntm': 'meta' }, meta),
+      el('div', { class: 'nt-pg-titlerow' }, el('div', { class: 'nt-pg-titlewrap' }, title), el('div', { class: 'nt-pg-acts' }, acts))),
+  ];
+  if (n.private) out.push(el('p', { class: 'nt-hint' }, 'This note is private: it is not recorded, and nothing from it goes to Jev or to any agent.'));
+
+  const cf = conflictsOf(n);
+  if (cf.length) {
+    out.push(el('section', { class: 'nt-pg-conflicts', 'data-ntm': 'conflicts' },
+      el('h3', { class: 'nt-pg-sec__h nt-pg-sec__h--warn' }, el('span', null, COPY.conflicts), el('span', { class: 'nt-pg-label__n' }, String(cf.length))),
+      cf.map((c) => el('div', { class: 'nt-pg-li', 'data-ntm-conflict': c.doc },
+        el('span', { class: 'nt-pg-warn-dot' }),
+        el('span', { class: 'nt-pg-li__text' }, '“' + c.text + '” ', el('span', { class: 'nt-pg-dim' }, COPY.conflictWith + ' '), el('span', { class: 'nt-pg-mono' }, c.doc + (c.line ? ':' + c.line : ''))),
+        button({ label: COPY.openFile, variant: 'outline', size: 'sm', onClick: () => openFile(inst, c.doc), attrs: { 'data-ntm-open-file': c.doc } })))));
+  }
+
+  const hl = n.highlights || [];
+  if (hl.length) {
+    out.push(el('section', { class: 'nt-pg-sec nt-pg-sec--first', 'data-ntm': 'highlights' },
+      el('h3', { class: 'nt-pg-sec__h' }, el('span', null, COPY.highlights), el('span', { class: 'nt-pg-label__n' }, String(hl.length))),
+      hl.map((h) => el('div', { class: 'nt-pg-li', 'data-ntm-highlight': h.id },
+        el('span', { class: 'nt-pg-li__at' }, typeof h.t === 'number' ? V.fmtTime(h.t) : ''),
+        el('span', { class: 'nt-pg-tag' }, h.label || 'Highlight'),
+        el('span', { class: 'nt-pg-li__text' }, h.text,
+          h.check && h.check.doc ? el('span', { class: 'nt-pg-sub' }, (h.check.verdict === 'differs' ? 'Differs from ' : h.check.verdict === 'agrees' ? 'Agrees with ' : 'Closest file: ') + h.check.doc + (h.check.line ? ':' + h.check.line : '')) : null)))));
+  }
+
+  out.push(el('section', { class: 'nt-pg-sec nt-pg-sec--overview', 'data-ntm': 'overview' },
+    el('h3', { class: 'nt-pg-sec__h nt-pg-sr' }, COPY.overview),
+    p.overview
+      ? editable(p.from === 'final' ? { tag: 'p', cls: 'nt-pg-para', text: p.overview, label: 'Overview', save: (t) => saveFinal(inst, n, 'overview', 0, t) } : { tag: 'p', cls: 'nt-pg-para', text: p.overview })
+      : el('p', { class: 'nt-hint' }, COPY.noOverview)));
+
+  const section = (key, label, items, mark, trail) => {
+    if (!items.length) return null;
+    return el('section', { class: 'nt-pg-sec', 'data-ntm-sec': key },
+      el('h3', { class: 'nt-pg-sec__h' }, el('span', null, label), el('span', { class: 'nt-pg-label__n' }, String(items.length))),
+      items.map((x) => el('div', { class: 'nt-pg-li', 'data-ntm-item': key },
+        el('span', { class: 'nt-pg-li__mk', 'aria-hidden': 'true' }, mark),
+        p.from === 'final' ? editable({ tag: 'span', cls: 'nt-pg-li__text', text: x.text, label: label, save: (t) => saveFinal(inst, n, x.sec, x.i, t) }) : el('span', { class: 'nt-pg-li__text' }, x.text),
+        x.orig_text !== undefined ? el('span', { class: 'nt-pg-dim', title: 'First written as: ' + x.orig_text }, COPY.edited) : null,
+        trail ? trail(x) : null)));
+  };
+  out.push(section('decision', COPY.decisions, p.decisions, '—'));
+  out.push(section('action', COPY.actions, p.actions, '○', (x) => [
+    x.owner || x.due ? el('span', { class: 'nt-pg-li__who' }, [x.owner, x.due].filter(Boolean).join(' · ')) : null,
+    button({ label: COPY.makeTask, variant: 'outline', size: 'sm', onClick: (e) => makeTaskFrom(n, x, { repo: inst.repo, btn: e && e.currentTarget }), attrs: { 'data-ntm-make-task': '' } }),
+  ]));
+  out.push(section('question', COPY.questions, p.questions, '?'));
+
+  const tr = (n.final && n.final.segments && n.final.segments.length ? n.final.segments.map((g) => ({ t: g.t, text: g.text })) : (n.transcript || []).filter((x) => !x.dropped));
+  if (p.topics.length || tr.length) {
+    const bits = [p.topics.length ? p.topics.length + (p.topics.length === 1 ? ' topic' : ' topics') : null, tr.length ? COPY.transcript(tr.length) : null].filter(Boolean).join(' · ');
+    out.push(el('details', { class: 'nt-pg-sec nt-pg-fold', 'data-ntm': 'discussion' },
+      el('summary', { class: 'nt-pg-fold__sum' }, COPY.discussion + ' · ' + bits),
+      p.topics.map((tp) => el('div', { class: 'nt-pg-topic' }, el('h4', { class: 'nt-pg-topic__h' }, tp.title), (tp.points || []).map((pt) => el('p', { class: 'nt-pg-topic__p' }, pt)))),
+      tr.length ? el('div', { class: 'nt-pg-trans' }, tr.map((x) => el('div', { class: 'nt-pg-li' }, el('span', { class: 'nt-pg-li__at' }, V.fmtTime(x.t || 0)), el('span', { class: 'nt-pg-li__text' }, x.text)))) : null));
+  }
+  return out.filter(Boolean);
+}
+
+/** A text the PM corrects in place: a click puts the cursor in it, leaving it saves, Esc puts the words back. */
+function editable({ tag, cls, text, label, save }) {
+  if (!save) return el(tag, { class: cls }, text);
+  const node = el(tag, { class: cls + ' nt-pg-edit', contenteditable: 'true', spellcheck: 'true', role: 'textbox', 'aria-label': 'Edit ' + label, 'data-ntm-edit': '' }, text);
+  let last = text;
+  node.addEventListener('keydown', (e) => {
+    if (e.key === 'Enter' && tag !== 'p') { e.preventDefault(); node.blur(); }
+    if (e.key === 'Escape') { e.preventDefault(); node.textContent = last; node.blur(); }
+  });
+  node.addEventListener('blur', async () => {
+    const v = node.textContent.replace(/\s+/g, ' ').trim();
+    if (!v || v === last) { node.textContent = last; return; }
+    if (await save(v)) last = v; else node.textContent = last;
+  });
+  return node;
+}
+async function saveFinal(inst, n, sec, i, text) {
+  const r = await pmPost('/api/notes/final-edit', { id: n.id, sec, i, text });
+  if (!r || !r.ok) { toast({ text: COPY.notSaved + ((r && r.error) ? ': ' + r.error : ''), tone: 'destructive' }); return false; }
+  n.final_notes = r.final_notes;
+  toast({ text: COPY.saved, timeout: 1500 });
+  return true;
+}
+
+function openFile(inst, doc) {
+  if (!inst.repo) return;
+  import('./panel-tabs.js').then((m) => m.openDoc(inst.repo, doc, 'notes')).catch(() => toast({ text: 'The file could not be opened.', tone: 'destructive' }));
+}
+
+async function deleteNote(inst, n) {
+  const sure = await askConfirm({ title: COPY.delAsk(n.title || 'Untitled note'), body: COPY.delBody, confirmLabel: 'Delete', cancelLabel: 'Keep it' });
+  if (!sure) return;
+  const r = await pmPost('/api/notes/delete', { id: n.id });
+  if (!r || !r.ok) { toast({ text: (r && r.error) || 'The note was not deleted.', tone: 'destructive' }); return; }
+  dock.forget(n.id);
+  inst.open = null; inst.note = null;
+  refresh(inst);
+}
+
+/** Open the Notes place on one note. */
+export function openNoteHere(id) { return openDestination('notes', { slug: id }); }

package/workspace/public/pm/dom.js

@@ -53,9 +53,8 @@ export function el(tag, attrs, ...children) {
       else if (k === 'ref') { if (typeof v === 'function') v(node); }
       else if (k === 'value' || k === 'checked' || k === 'disabled' || k === 'selected') node[k] = v;
       else if (k === 'html') node.innerHTML = String(v);
-      else if (k.length > 2 && k[0] === 'o' && k[1] === 'n' && typeof v === 'function') {
-        node.addEventListener(k.slice(2).toLowerCase(), v);
-      } else if (v === true) node.setAttribute(k, '');
+      else if (k.length > 2 && k[0] === 'o' && k[1] === 'n' && typeof v === 'function') listen(node, k.slice(2).toLowerCase(), v);
+      else if (v === true) node.setAttribute(k, '');
       else node.setAttribute(k, String(v));
     }
   }
@@ -63,6 +62,14 @@ export function el(tag, attrs, ...children) {
   return node;
 }
 
+/** An `onX` handler of el(). The listener reads the handler from the node, so patch() can give a node it keeps the handler of
+ * the node drawn in its place: a kept button then runs what the newest draw says, not what the first draw said. */
+function listen(node, type, fn) {
+  const h = node.__pmOn || (node.__pmOn = Object.create(null));
+  if (!(type in h)) node.addEventListener(type, function (e) { const f = node.__pmOn[type]; return f ? f.call(this, e) : undefined; });
+  h[type] = fn;
+}
+
 /** {backgroundColor:'red', minHeight:'30px'} -> 'background-color:red;min-height:30px'. */
 export function style(obj) {
   if (typeof obj === 'string') return obj;
@@ -174,3 +181,63 @@ export function keepScroll(scroller) {
     scroller.removeEventListener('scroll', onScroll);
   };
 }
+
+/**
+ * Patch `live`'s children to look like `fresh`'s, keeping every node that is still there (note pop-up flicker, 2026-10-08).
+ * A view that draws itself again on every state change can draw into a detached `fresh` and patch the screen from it: what
+ * did not change stays the same element, so its scroll, focus, caret, open state and CSS animation stay; what changed is
+ * updated in place; what is new is inserted. Children are matched by tag and by their data-* attributes (so a list keyed
+ * by `data-x="3"` keeps its rows), else by position. A kept node takes the attributes, the el() handlers and the form
+ * values of the node drawn in its place. A `kept(node)` placeholder in `fresh` stands for a node the view owns and keeps
+ * itself (an editor field): that node is left where it is, or moved there, and never patched.
+ */
+export function patchChildren(live, fresh) {
+  let cur = live.firstChild;
+  for (const n of [...fresh.childNodes]) {
+    if (n.__pmKeep) {
+      const t = n.__pmKeep;
+      if (cur === t) cur = cur.nextSibling;
+      else live.insertBefore(t, cur);
+      continue;
+    }
+    if (cur && sameNode(cur, n)) { patchNode(cur, n); cur = cur.nextSibling; continue; }
+    let found = null;
+    if (n.nodeType === 1 && keyOf(n)) for (let c = cur; c; c = c.nextSibling) if (sameNode(c, n)) { found = c; break; }
+    if (found) { live.insertBefore(found, cur); patchNode(found, n); continue; }
+    live.insertBefore(n, cur);
+  }
+  while (cur) { const x = cur.nextSibling; live.removeChild(cur); cur = x; }
+  return live;
+}
+/** A placeholder for patchChildren(): `node` is the view's own, and stays as it is. Off a page, the node itself. */
+export function kept(node) {
+  if (!node || !node.isConnected) return node;
+  const p = document.createElement('pm-kept');
+  p.__pmKeep = node;
+  node.__pmOwned = true;   // never matched to, and patched into, another node drawn beside it
+  return p;
+}
+function keyOf(n) {
+  let k = '';
+  for (const a of n.attributes) if (a.name.startsWith('data-')) k += a.name + '=' + a.value + ';';
+  return k;
+}
+function sameNode(a, b) {
+  if (a.nodeType !== b.nodeType) return false;
+  if (a.nodeType !== 1) return true;
+  return a.tagName === b.tagName && !a.__pmOwned && keyOf(a) === keyOf(b);
+}
+function patchNode(a, b) {
+  if (a.nodeType !== 1) { if (a.nodeValue !== b.nodeValue) a.nodeValue = b.nodeValue; return; }
+  for (const x of [...a.attributes]) if (!b.hasAttribute(x.name)) a.removeAttribute(x.name);
+  for (const x of b.attributes) if (a.getAttribute(x.name) !== x.value) a.setAttribute(x.name, x.value);
+  const ha = a.__pmOn; const hb = b.__pmOn;
+  if (ha) for (const t in ha) if (!hb || !hb[t]) ha[t] = null;
+  if (hb) for (const t in hb) listen(a, t, hb[t]);
+  const tag = a.tagName;
+  if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT') {
+    if (a.value !== b.value && a !== document.activeElement) a.value = b.value;
+    if (a.checked !== b.checked) a.checked = b.checked;
+  }
+  patchChildren(a, b);
+}

package/workspace/public/pm/frame-copy.js

@@ -36,6 +36,7 @@ export const COPY = {
     board: 'Board',
     reports: 'Reports',
     docs: 'Docs',
+    notes: 'Notes',
     people: 'People',
     agent: 'Agent',
     settings: 'Settings',

package/workspace/public/pm/note-dock.js

@@ -1,19 +1,21 @@
-/* pm/note-dock.js — the meeting note being taken, kept small at the bottom right of the workspace (meeting-notes Run 6).
+/* pm/note-dock.js — the meeting note being taken: the Record control's brain and the pop-up (meeting-notes Run 6, Run 12).
  *
- * Take notes on a calendar event makes the note and starts listening at once. The note stays minimized as a pill at the
- * bottom right: a red dot while it listens, its title and its time. A press on the pill opens the note as a pop-up: the same
- * note as the Notes tab, in one column (pm/view-notes.js renderInline). Minimize or Esc puts it back; Open in Notes shows it
- * on the full screen. The pill stays on every destination.
+ * The Record control lives in the top bar (pm/topbar.js, mockup board 2): Record when idle, the red dot with the clock, the
+ * highlighter and Pause while listening, Resume when paused. Take notes on a calendar event makes the note and starts
+ * listening at once. A press on the clock opens the note as a pop-up: the same note as the Notes tab, in one column
+ * (pm/view-notes.js renderInline). Minimize or Esc puts it away; the highlight pop-up sits bottom right on every place.
  *
- * One note at a time. The note is kept in this browser (KEY), so it is still there after a reload; a note that no longer
- * listens can be put away with the x. Starting another note while one is listening asks first.
+ * One note at a time. The note is kept in this browser (KEY), so it is still there after a reload. Starting another note
+ * while one is listening asks first.
  *
  *   mountDock()                → draws the dock on every render (pm/app.js boot)
- *   takeNotes(e, opts, btn)    → makes a note linked to the event, starts listening, and keeps it minimized
+ *   recordState()              → { mode: idle | recording | paused, id, title, started } for the top bar
+ *   recordNew(btn) · recordNote(id, title) · pauseNow() · resumeNow() · finish() · highlightNow()
+ *   takeNotes(e, opts, btn)    → makes a note linked to the event, starts listening
  *   openDock(id)               → shows a note in the pop-up
  *   minimize() · activeId() · forget(id)
  */
-import { el } from './dom.js';
+import { el, patchChildren } from './dom.js';
 import { button, iconButton, layer, toast, ensureComponentsCss } from './primitives.js';
 import { askConfirm } from './dialogs.js';
 import { pmPost } from './http.js';
@@ -96,6 +98,57 @@ async function switchFrom() {
   return true;
 }
 
+/* ── the Record control at the right of the top bar (meeting-notes Run 12, mockup board 2) ────────────────────────────
+ * It replaces the pill: idle it says Record; while the note listens it shows the red dot and the clock (a press opens the
+ * note), the highlight and Pause; paused it shows the clock and Resume. Stop, in the note, ends it and the control is idle
+ * again. The note it holds is the dock's one note (active). */
+
+/** { mode: 'idle'|'recording'|'paused', id, title, started } — what the Record control shows. */
+export function recordState() {
+  if (!active) return { mode: 'idle', id: null, title: '', started: null };
+  const live = !!V && liveId() === active.id;
+  return { mode: live ? 'recording' : 'paused', id: active.id, title: titleOf(), started: live && V.liveStarted ? V.liveStarted() : null };
+}
+/** Record: a new note, linked to nothing, that listens at once. */
+export async function recordNew(btn) {
+  if (active && liveId() === active.id) { openDock(active.id); return; }
+  if (btn) btn.disabled = true;
+  const r = await pmPost('/api/notes/new', {});
+  if (btn) btn.disabled = false;
+  if (!r || !r.ok) { toast({ text: (r && r.error) || 'The note was not made.', tone: 'destructive' }); return; }
+  await recordNote(r.note.id, r.note.title || '');
+  refreshNotes();
+}
+/** Record or Resume on one note: it becomes the dock's note and listens. Another note that is listening is asked about first. */
+export async function recordNote(id, title) {
+  if (active && active.id !== id && liveId() === active.id && !await switchFrom()) return;
+  active = { id, title: title || '' }; write();
+  const v = V || await import('./view-notes.js');
+  V = v;
+  setState({});
+  if (await v.listenNow(viewCtx, id)) toast({ text: 'Notes are being taken. Let people know.' });
+  setState({});
+}
+/** Pause: listening stops and the note stays here, ready to Resume. */
+export async function pauseNow() {
+  if (V && active && liveId() === active.id) await V.stopListening(viewCtx);
+  setState({});
+}
+/** Resume the paused note. */
+export function resumeNow() { if (active) return recordNote(active.id, active.title); return null; }
+/** Stop: listening stops and the note leaves the Record control (the final notes are written after Stop). */
+export async function finish() {
+  if (V && active && liveId() === active.id) await V.stopListening(viewCtx);
+  active = null; open = false; write();
+  if (V) V.setPopped(null);
+  setState({});
+}
+/** Highlight: the last 30 seconds and what is said next, on the note that is listening. */
+export function highlightNow() {
+  if (!V || !active || liveId() !== active.id) return;
+  V.highlightNow(viewCtx, active.id);
+}
+
 /** Take notes on a calendar event: make the note, start listening at once, and keep it minimized. */
 export async function takeNotes(e, { ws, repo, initiative } = {}, btn) {
   if (active && liveId() === active.id && !await switchFrom()) { openDock(active.id); return; }
@@ -122,23 +175,26 @@ function draw() {
   const v = view();
   const live = !!active && !!v && liveId() === active.id;
   clearInterval(tick); tick = null;
-  if (!active || !v) { host.replaceChildren(); return; }
+  // The dock draws on every state change, and a transcript line comes in every few seconds while it listens. It draws into
+  // a detached node and patches the screen from it, so only what changed is touched: the lines already shown, the field
+  // being typed in, the scroll stay as they are, and a new line is appended (2026-10-08 flicker).
+  const fresh = el('div');
+  // the highlight's pop-up is drawn here, on every place, whether the note is open or not
+  const hl = v && v.highlightPanel ? v.highlightPanel(viewCtx) : null;
+  if (!active || !v) { if (hl) fresh.appendChild(hl); patchChildren(host, fresh); return; }
   if (live) tick = setInterval(() => { const c = host.querySelector('[data-nt-dock-clock]'); if (c) c.textContent = clockText(); }, 1000);
-  if (!open) {
-    const pill = button({ label: el('span', { class: 'nt-pill__txt' },
-      live ? el('span', { class: 'nt-live-dot', 'aria-hidden': 'true' }) : null,
-      el('span', { class: 'nt-pill__title' }, titleOf()),
-      live ? el('span', { class: 'nt-pill__clock', 'data-nt-dock-clock': '' }, clockText()) : null),
-    variant: 'outline', attrs: { class: 'nt-pill', 'data-nt-pill': live ? 'live' : 'idle', 'aria-label': (live ? 'Notes are being taken: ' : 'Meeting note: ') + titleOf() + '. Open the note.' },
-    onClick: () => openDock(active.id) });
-    host.replaceChildren(el('div', { class: 'nt-pillrow' }, pill,
-      live ? null : iconButton({ icon: 'x', ariaLabel: 'Put the note away', onClick: close, attrs: { 'data-nt-dock-close': '' } })));
-    return;
-  }
+  // the Record control at the top right shows the note now (Run 12): no pill
+  if (!open) { if (hl) fresh.appendChild(hl); patchChildren(host, fresh); return; }
   // the note draws its own bar (status, Stop, Minimize and the ⋯ menu): the pop-up adds no second head (Run 7)
   const body = el('div', { class: 'nt-pop__body' });
   const pop = el('section', { class: 'nt-pop', role: 'dialog', 'aria-label': 'Meeting note', 'data-nt-pop': active.id }, body);
-  host.replaceChildren(pop);
+  fresh.appendChild(pop);
+  if (hl) fresh.appendChild(hl);
   if (!v.renderInline(body, viewCtx, active.id, { onMinimize: minimize })) body.appendChild(el('p', { class: 'nt-hint' }, 'Another note is being taken.'),
     button({ label: 'Minimize', variant: 'ghost', size: 'sm', onClick: minimize, attrs: { 'data-nt-minimize': '' } }));
+  // a transcript read to its end follows the new lines; one the PM scrolled up in stays where they left it
+  const box = host.querySelector('[data-nt-pop] [data-nt-transcript]');
+  const atEnd = !!box && box.scrollTop + box.clientHeight >= box.scrollHeight - 8;
+  patchChildren(host, fresh);
+  if (atEnd && box.isConnected) box.scrollTop = box.scrollHeight;
 }

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

@@ -58,10 +58,10 @@ export function meetingOf(e) {
     start: e.start, end: e.end || null, title: e.title };
 }
 
+/** Open a note in the Notes place (meeting-notes Run 12): the list by initiative, with this note open. */
 export async function openNote(id) {
-  const [v, c] = await Promise.all([import('./view-notes.js'), import('./panel-cockpit.js')]);
-  v.openNote(id);
-  c.openView('notes');
+  const r = await import('./registry.js');
+  r.openDestination('notes', { slug: id });
 }
 const dayOf = (iso) => { try { return new Date(iso).toLocaleDateString([], { weekday: 'short', day: 'numeric', month: 'short' }); } catch { return ''; } };
 const clock = (iso) => { try { return new Date(iso).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }); } catch { return ''; } };