create-pmos 0.132.0 → 0.134.0

package/workspace/public/pm/calendar-views.js

@@ -3,7 +3,7 @@
  * (.calbar, .lens, .seg, .ib), the Today chip (.tdy), the lens header (.lh), the day timeline (.vday, .vb), the month grid
  * (.cal, .cd), the progress chart (svg.pg: progSVG, line 2712), the direction card (.fc.dir with .dial and .sevs), the key
  * result rows (.krg, .krt) and the swipe and key gestures. The styles are pm/console3.css (see pm/console3-lift.md).
- * This file keeps the data call and draws what the server sent. It reads GET /api/calendar-views only and writes nothing.
+ * This file keeps the data call and draws what the server sent. It reads GET /api/calendar-views only; its Record button starts, resumes or stops a recording through pm/note-dock.js.
  * A KR without a metric reads "no metric" and is not scored; an empty lens says why; nothing is invented.
  *
  * mountCalendarViews(host, ctx) is safe to call on every render. disposeCalendarViews(host) drops the host's state. */
@@ -18,6 +18,7 @@ import { renderCase } from './c3-case.js';
 import { makeXp, attachExpand } from './c3-expand.js';
 import { mountQuarter, mountYear, dispose as disposeStrategy } from './c3-cal-strategy.js';   // the Quarter and Year panes
 import { simDock, simStart, simState, isDemo } from './shell-recording.js';
+import * as dock from './note-dock.js';
 import { drawCalendarPage } from './c3-calendar.js';   // the Calendar tab as a page about time (ctx.page)
 
 /* ── shared state of the /c3.html page (console3 wave C3) ──────────────────────────────────────────────────────────
@@ -597,18 +598,30 @@ function scrubWire(v, timed, end, t0, pph) {
 /* ── the stage under a day's cards on the Calendar tab: the mockup's Before, During and After (stageHtml line 2598) ── */
 
 const autoPhase = (e) => (endH(e) <= nowH() ? 'after' : timeOf(e.at) <= nowH() ? 'during' : 'before');
-const NOREC = 'Nothing on a page can record. Recording happens in the main app\'s note dock.';
 const IX2 = () => (typeof window !== 'undefined' && window.__c3cal2) || null;   // c3-demo-cal2.js (demo only): the After notes, the Week grid, the progress rows
 const simOn = () => simState().mode !== 'idle';
-const noRecNode = () => el('div', { class: 'fold', 'data-cv': 'norec' }, c3ic('mic', 'sm'), NOREC + ' ', el('a', { href: '/', target: '_blank', rel: 'noopener', 'data-cv': 'main-app' }, 'Open the main app'));
+const realMode = () => { try { return dock.recordState().mode; } catch { return 'idle'; } };
 
 /* the Record button of the During and After stages (the mockup's data-a="nlive"). In demo it drives the simulated recorder, which the top bar's
- * recording group shows (shell-recording.js). In real mode it is disabled: a page records nothing, so it says where recording happens. */
-function recordBtn(m) {
+ * recording group shows (shell-recording.js). In real mode it records through the note dock, the same recorder as the top bar's Record control:
+ * Record starts a note linked to this calendar event, Resume continues a paused meeting, Stop asks first. `ev` is the calendar cell's event. */
+const asEvent = (ev) => ({ ...ev, id: baseId(ev), start: ev.start || ev.at, end: ev.end || null });
+function recordBtn(m, ev, redraw) {
   const demo = isDemo(); const on = demo && simOn();
-  return el('button', { type: 'button', class: 'ib pri', style: 'width:auto;padding:0 14px;gap:6px;display:inline-flex;align-items:center', 'data-cv': 'record', disabled: !demo,
-    title: demo ? (on ? 'Stop and write final notes' : 'Record (a simulation: the demo records nothing)') : NOREC + ' Use the link below.',
-    onClick: () => { if (simOn()) simDock.stopNow(); else simStart(m.title); } }, c3ic(on ? 'stop' : 'mic'), on ? 'Stop' : 'Record');
+  const mode = demo ? 'idle' : realMode();
+  const label = demo ? (on ? 'Stop' : 'Record') : mode === 'recording' ? 'Stop' : mode === 'paused' ? 'Resume' : 'Record';
+  const done = () => { if (redraw) setTimeout(redraw, 300); };
+  const real = async () => {
+    if (mode === 'recording') await dock.stopNow();
+    else if (mode === 'paused') await dock.resumeNow();
+    else if (ev) await dock.recordEvent(asEvent(ev));
+    done();
+  };
+  const title = demo ? (on ? 'Stop and write final notes' : 'Record (a simulation: the demo records nothing)') : mode === 'recording' ? 'Stop and write final notes' : mode === 'paused' ? 'Resume the paused meeting' : 'Record this meeting. Notes stay on this machine.';
+  const b = c3ib(title, label === 'Stop' ? 'stop' : 'mic', { 'data-cv': 'record', 'aria-label': label,
+    onClick: () => { if (!demo) { real(); return; } if (simOn()) simDock.stopNow(); else simStart(m.title); } }, 'pri c3cv-rec');
+  b.append(label);
+  return b;
 }
 const liveBody = () => [el('div', { class: 'wave', 'aria-hidden': 'true' }, ...new Array(28).fill(0).map(() => el('i'))),
   el('div', { class: 'term', 'data-cv': 'live-text' }, (IX2() && IX2().NOTES.live) || 'Dara: the keys are the real blocker, not the scope.\nYou: then we cut to three flows and keep 24 Oct.\n[highlight] decision: cut to three flows\n[caught] action: Dara confirms sandbox keys'),
@@ -618,9 +631,9 @@ const avN = (n) => el('span', { class: 'av', title: n }, String(n)[0]);
 /* the After stage's notes card: the mockup's notesView (line 1494). Decisions, actions with owner and due, routing, and who was told what. */
 function notesCard(host, r, m) {
   const N = isDemo() && IX2() && IX2().NOTES; const redraw = () => refreshSel(host, r);
-  const head = el('div', { style: 'display:flex;justify-content:space-between;align-items:center;gap:10px' }, el('h3', null, c3ic('notes'), 'Notes'), recordBtn(m));
+  const head = el('div', { class: 'c3cv-head' }, el('h3', null, c3ic('notes'), 'Notes'), recordBtn(m, selEvent(r), redraw));
   if (isDemo() && simOn()) return el('section', { class: 'card', 'data-cv': 'notes' }, head, ...liveBody());
-  if (!N) return el('section', { class: 'card', 'data-cv': 'notes' }, head, el('div', { class: 'fold', 'data-cv': 'no-notes' }, c3ic('moon', 'sm'), 'No notes, decisions or actions are held for this meeting. This page reads the calendar and records nothing.'), isDemo() ? null : noRecNode());
+  if (!N) return el('section', { class: 'card', 'data-cv': 'notes' }, head, el('div', { class: 'fold', 'data-cv': 'no-notes' }, c3ic('moon', 'sm'), 'No notes, decisions or actions are held for this meeting. Press Record to take them. Notes stay on this machine.'));
   const nt = r.nt || (r.nt = { owners: {}, due: {}, logged: {}, diff: false, sent: false });
   const sel = (label, opts, val, on) => el('select', { 'aria-label': label, onChange: (e) => on(e.target.value) }, ...opts.map((x) => el('option', { value: x, selected: x === val }, x || 'No owner')));
   const small2 = 'font-size:var(--fs-2)';
@@ -681,8 +694,8 @@ function stageNode(host, r) {
   } else if (ph === 'during') {
     const sim = isDemo() && simOn();
     body = el('section', { class: 'card', 'data-cv': 'stage-during' },
-      el('div', { style: 'display:flex;justify-content:space-between;align-items:center;gap:10px' }, el('h3', null, c3ic('mic'), 'Live notes'), recordBtn(m)),
-      sim ? liveBody() : isDemo() ? el('div', { class: 'fold' }, c3ic('mic', 'sm'), 'press Record. Notes stay on this machine.') : noRecNode());
+      el('div', { class: 'c3cv-head' }, el('h3', null, c3ic('mic'), 'Live notes'), recordBtn(m, e, () => refreshSel(host, r))),
+      sim ? liveBody() : el('div', { class: 'fold', 'data-cv': 'live-idle' }, c3ic('mic', 'sm'), realMode() === 'idle' ? 'Press Record. Notes stay on this machine.' : 'A meeting is ' + (realMode() === 'recording' ? 'recording' : 'paused') + '. Use the Record control in the top bar to mark a moment, pause or stop.'));
   } else {
     const D = m.demo ? [['Note to Priya: 24 Oct is conditional', 'out'], ['Note to design: scope decision', 'out']] : [];
     const drafts = el('section', { class: 'card', 'data-cv': 'stage-after' }, el('h3', null, c3ic('spark'), 'Drafted after the meeting'),

package/workspace/public/pm/components.css

@@ -7965,5 +7965,285 @@
    containers). The tab strip and the scratchpad are drawn with inline radii (workspace-cockpit-nav); the inline radii
    (8px tab strip, 6px controls) stay. A tab's colour dot is a dot and keeps its circle. */
 
+/* -- layouts · .wl- Welcome: the first-run page (onboarding-scan-and-map slice 2) -- */
+.wl-page {
+  background: var(--background);
+}
+.wl-body {
+  margin: 0;
+  background: var(--background);
+  color: var(--foreground);
+  font-family: var(--sans);
+  font-size: 16px;
+  line-height: 1.5;
+}
+.wl-wrap {
+  max-width: 720px;
+  margin: 0 auto;
+  padding: 24px 16px 64px;
+  box-sizing: border-box;
+}
+.wl-wrap * {
+  box-sizing: border-box;
+}
+.wl-steps {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin: 0 0 20px;
+  padding: 0;
+  list-style: none;
+  font-family: var(--mono);
+  font-size: 12px;
+  color: var(--muted-foreground);
+}
+.wl-steps li {
+  padding: 2px 8px;
+  border: 1px solid var(--border);
+  border-radius: 6px;
+}
+.wl-steps li[aria-current="step"] {
+  color: var(--foreground);
+  border-color: var(--foreground);
+}
+.wl-h1 {
+  font-size: 20px;
+  line-height: 1.2;
+  margin: 0 0 8px;
+  font-weight: 600;
+}
+.wl-h2 {
+  font-size: 16px;
+  margin: 0;
+  font-weight: 600;
+}
+.wl-p {
+  margin: 0 0 12px;
+}
+.wl-muted {
+  color: var(--muted-foreground);
+}
+.wl-card {
+  background: var(--card);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 14px 16px;
+  margin: 0 0 14px;
+}
+.wl-path {
+  font-family: var(--mono);
+  font-size: 12px;
+  color: var(--muted-foreground);
+  word-break: break-all;
+}
+.wl-promise {
+  font-family: var(--mono);
+  font-size: 12px;
+  margin: 16px 0;
+  padding: 10px 12px;
+  border-left: 3px solid var(--foreground);
+  background: var(--muted);
+}
+.wl-actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 12px;
+  margin-top: 18px;
+}
+.wl-btn {
+  font: inherit;
+  cursor: pointer;
+  border-radius: 8px;
+  padding: 10px 16px;
+  min-height: 44px;
+  border: 1px solid var(--border);
+  background: var(--secondary);
+  color: var(--foreground);
+  text-decoration: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+.wl-btn.wl-primary {
+  background: var(--primary);
+  color: var(--primary-foreground);
+  border-color: var(--primary);
+  font-weight: 600;
+}
+.wl-btn:disabled {
+  opacity: 0.55;
+  cursor: default;
+}
+.wl-btn.wl-quiet {
+  background: none;
+  border: none;
+  color: var(--muted-foreground);
+  text-decoration: underline;
+  padding: 8px 4px;
+  min-height: 36px;
+}
+.wl-btn.wl-small {
+  min-height: 32px;
+  padding: 4px 10px;
+  font-size: 14px;
+}
+.wl-btn:focus-visible,
+.wl-input:focus-visible,
+.wl-check:focus-visible {
+  outline: 2px solid color-mix(in oklab, var(--ring) 50%, var(--foreground));
+  outline-offset: 2px;
+}
+.wl-spin {
+  display: inline-block;
+  width: 14px;
+  height: 14px;
+  border: 2px solid var(--border);
+  border-top-color: var(--foreground);
+  border-radius: 6px;
+  animation: wlspin 0.8s linear infinite;
+  margin-right: 8px;
+}
+@keyframes wlspin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+.wl-error {
+  border: 1px solid var(--destructive);
+  color: var(--destructive);
+  border-radius: 8px;
+  padding: 10px 12px;
+  margin: 0 0 14px;
+}
+.wl-findings {
+  margin: 0;
+  padding-left: 22px;
+}
+.wl-findings li {
+  margin: 0 0 12px;
+}
+.wl-ref {
+  font-family: var(--mono);
+  font-size: 12px;
+  color: var(--muted-foreground);
+  word-break: break-all;
+}
+.wl-board > header {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  gap: 8px;
+  align-items: baseline;
+  margin-bottom: 8px;
+}
+.wl-row {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 6px 10px;
+  padding: 10px 0;
+  border-top: 1px solid var(--border);
+  align-items: start;
+}
+.wl-check {
+  width: 20px;
+  height: 20px;
+  margin: 10px 0 0;
+}
+.wl-input {
+  font: inherit;
+  color: var(--foreground);
+  background: var(--background);
+  border: 1px solid var(--input);
+  border-radius: 6px;
+  padding: 6px 8px;
+  min-height: 36px;
+  max-width: 100%;
+}
+.wl-row .wl-input[type="text"] {
+  width: 100%;
+}
+.wl-meta {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px 10px;
+  align-items: center;
+  font-family: var(--mono);
+  font-size: 12px;
+  color: var(--muted-foreground);
+}
+.wl-chip {
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 1px 8px;
+}
+.wl-docs {
+  margin: 4px 0 0;
+  padding-left: 18px;
+  font-family: var(--mono);
+  font-size: 12px;
+  color: var(--muted-foreground);
+  word-break: break-all;
+}
+.wl-q {
+  margin: 0 0 14px;
+}
+.wl-label {
+  display: block;
+  margin: 4px 0;
+}
+.wl-q .wl-free {
+  margin-top: 10px;
+  color: var(--muted-foreground);
+}
+.wl-q .wl-free .wl-input {
+  display: block;
+  margin-top: 4px;
+}
+.wl-added {
+  margin: 8px 0 0;
+  padding-left: 18px;
+  font-size: 14px;
+}
+.wl-sources {
+  list-style: none;
+  margin: 0 0 12px;
+  padding: 0;
+  display: grid;
+  gap: 12px;
+}
+.wl-source {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+  padding-bottom: 12px;
+  border-bottom: 1px solid var(--border);
+}
+.wl-source-text {
+  flex: 1 1 260px;
+  min-width: 0;
+}
+.wl-source-actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px;
+}
+@media (max-width: 520px) {
+  .wl-actions {
+    flex-direction: column;
+    align-items: stretch;
+  }
+  .wl-actions .wl-btn {
+    width: 100%;
+  }
+  .wl-actions .wl-btn.wl-quiet {
+    width: auto;
+    align-self: center;
+  }
+}
+
 /* -- layouts · .cal3- the console3 Calendar page (calendar-time-page): its rules sit in console3.css beside the .vday rules they extend -- */
 /* -- end of the layout sections: add nothing below this line -- */

package/workspace/public/pm/console3.css

@@ -1699,6 +1699,25 @@
 .c3 .c3hold .hb.off{opacity:.55;cursor:not-allowed}
 .c3 .c3hold .hint{font:var(--fs-1) var(--mono);color:var(--muted-foreground)}
 .c3 .c3hold .cq{display:flex;gap:var(--sp-2);align-items:center;flex-wrap:wrap;font:var(--fs-2) var(--mono)}
+/* The Record control, always in the top bar (shell-recording.js, real mode). Left, while a meeting records or is paused: the red .recg group
+ * with the chip, Highlight, Pause or Resume, and Stop. Right, always: the neutral .recg.idle group with New and the arrow that lists today's meetings. */
+.c3 .c3rec{position:relative;display:inline-flex;align-items:stretch;gap:6px;z-index:31}
+.c3 .c3rec .recg.idle{color:var(--foreground);border-color:var(--border);background:var(--card)}
+.c3 .c3rec .recg.idle>*+*{border-left-color:var(--border)}
+.c3 .c3rec .recg.idle .ic{color:var(--destructive)}
+.c3 .c3rec .recg .ic{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
+.c3 .c3rec .recg .c3rec__chip{max-width:44ch}
+.c3 .c3rec .c3rec__eng{margin-left:6px;font-size:11px;color:var(--muted-foreground);white-space:nowrap}
+.c3.ph .c3rec .c3rec__eng{display:none}
+.c3 .c3rec .c3rec__off{opacity:.45;cursor:not-allowed}
+@media (hover:hover){.c3 .c3rec .recg.idle button:hover{background:var(--muted)}.c3 .c3rec .c3rec__off:hover{background:none}}
+.c3 .c3rec .recg button>span{display:inline-flex;align-items:center;gap:6px;min-width:0}
+/* the calendar's Record button (calendar-views.js recordBtn) and the card heads it sits in */
+.c3 .ib.c3cv-rec{width:auto;padding:0 14px;gap:6px;display:inline-flex;align-items:center}
+.c3 .c3cv-head{display:flex;justify-content:space-between;align-items:center;gap:10px}
+.c3 .c3rec .c3rec__pop{position:absolute;top:calc(100% + 6px);right:0;z-index:40;min-width:280px}
+.c3.ph .c3rec .c3rec__lbl{display:none}
+.c3.ph .c3rec .c3rec__live{order:-1}
 /* ===== the Work page (pm/pm-work-view.js, initiative console3-work-page): Focus, Upcoming by day, the weekly Review, offline work and the
  * shared actions. Tokens only; corners 6px on a control and 8px on a container. */
 .c3 .wk-min{min-width:0}

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

@@ -1,14 +1,18 @@
-/* pm/shell-recording.js — the recording indicator beside the bell (console3 wave E2b).
+/* pm/shell-recording.js — the Record control in console3's top bar (console3 wave E2b; the Record control port).
  *
  *   mountRecording(host) / disposeRecording(host)
  *
- * It starts nothing. It reads the real recorder through note-dock.js (recordState) and offers only the controls the Record control in
- * the top bar already has: open the note, mark a moment (highlightNow), pause, resume and stop (pauseNow, resumeNow, stopNow). When
- * nothing is recording or paused the group is hidden. While one is, a red dot sits on the Notes tab (`[data-fr-dest="notes"]` in the
- * frame's bar; a phone tab `[data-dest="notes"]` if one is drawn). Lifted: console3.html `.recg` and `recCtl` (lines 916 to 924, 4385
- * to 4400). The group shows the recorder's state under reduced motion as a static dot. The clock is the recorder's own start time.
+ * The control is always there, idle included, with the same capabilities as the main app's Record control (pm/topbar.js, pm/note-dock.js):
+ * New (an untitled note that records at once), an arrow that lists today's meetings that have not started (a pick makes a note linked to that
+ * calendar event and records it), and, while a meeting records or is paused, a chip that names it with Highlight, Pause or Resume, and Stop
+ * (Stop asks first and offers "Pause instead"). All of it goes through pm/note-dock.js, which owns the real recorder, so the audio capture of
+ * pm/view-notes.js runs here without the main app's Notes place on screen. The chip opens the note in the main app, because console3 has no
+ * Notes place. While one meeting records, a red dot sits on the Calendar tab (`[data-c3-tab="cal"]`) and on a Notes tab if a frame draws one.
+ * On /c3.html?demo=1 the control drives a SIMULATED recorder (see below): it opens no microphone and saves nothing, and it shows only while
+ * the simulation runs. Lifted: console3.html `.recg` and `recCtl` (lines 916 to 924, 4385 to 4400). The clock is the recorder's own start time.
  */
 import { el } from './dom.js';
+import { button } from './primitives.js';
 import { ensureC3Css, c3ic } from './pm-work-view.js';
 import * as dock from './note-dock.js';
 import { recView, clockOf } from './shell-model.js';
@@ -20,10 +24,10 @@ import { toast } from './c3-toast.js';
 const TAB = '[data-fr-dest="notes"], #mobNav [data-dest="notes"], [data-c3-tab="cal"]';
 
 /* ── demo mode: a SIMULATED recorder ──────────────────────────────────────────────────────────────────────────────────────────────
- * A page cannot record (nothing on a page may record). On /c3.html?demo=1 the Record button of the Calendar's During and After stages drives
- * this stand-in, so the top bar shows the mockup's recording group: a pulsing dot, the clock, mark moment, pause or resume, and stop.
- * It keeps a clock (performance.now: the demo freezes Date) and nothing else. No microphone is opened and nothing is saved.
- * Real mode never reaches it: `isDemo()` reads the page's data-c3-demo mark, which only the demo sets. */
+ * On /c3.html?demo=1 the Record button of the Calendar's During and After stages drives this stand-in, so the top bar shows the mockup's
+ * recording group: a pulsing dot, the clock, mark moment, pause or resume, and stop. It keeps a clock (performance.now: the demo freezes
+ * Date) and nothing else. No microphone is opened and nothing is saved. Real mode never reaches it: `isDemo()` reads the page's
+ * data-c3-demo mark, which only the demo sets. */
 export const isDemo = () => typeof document !== 'undefined' && !!document.querySelector('[data-c3-demo]');
 const SIM = { mode: 'idle', id: 'sim', title: '', started: 0, pausedAt: 0 };
 const tick = () => performance.now();
@@ -50,7 +54,8 @@ export function mountRecording(host, opts) {
   if (!host) return;
   disposeRecording(host);
   ensureC3Css();
-  const d = (opts && opts.dock) || (isDemo() ? simDock : dock);
+  if (!(opts && opts.dock) && !isDemo()) return mountReal(host);
+  const d = (opts && opts.dock) || simDock;
   const nowMs = () => (d.now ? d.now() : Date.now());
   const grp = el('span', { class: 'recg', role: 'group', 'aria-label': 'Recording', hidden: true, 'data-shell': 'recording' });
   host.insertBefore(grp, host.firstChild);
@@ -80,7 +85,8 @@ export function mountRecording(host, opts) {
       else {
         rec.clock = el('span', { class: 'recclk', 'data-shell-rec-clock': '' });
         const open = el('button', { type: 'button', title: (v.mode === 'recording' ? 'Recording: ' : 'Paused: ') + v.title + '. Open the live note', 'aria-label': 'Open the note: ' + v.title, 'data-shell-rec-open': '', onclick: () => d.openDock(st.id) },
-          el('span', { class: 'recdot' + (v.dot === 'static' ? ' static' : ''), 'data-dot': v.dot }), rec.clock, el('span', { class: 'rt' }, v.title));
+          el('span', { class: 'recdot' + (v.dot === 'static' ? ' static' : ''), 'data-dot': v.dot }), rec.clock, el('span', { class: 'rt' }, v.title),
+          ...(eng.text ? [el('span', { class: 'c3rec__eng', 'data-fr-rec-engine': '', title: 'The live transcript: engine and language (Notes settings)' }, eng.text)] : []));
         const kids = [open];
         if (v.canMark) kids.push(btn('Mark this moment', 'highlighter', () => d.highlightNow(), 'data-shell-rec-mark'));
         if (v.canPause) kids.push(btn('Pause', 'pause', () => d.pauseNow(), 'data-shell-rec-pause'));
@@ -103,8 +109,112 @@ export function disposeRecording(host) {
   const rec = host && live.get(host);
   if (!rec) return;
   clearInterval(rec.timer);
+  if (rec.off) rec.off();
   if (rec.onSim) window.removeEventListener('c3-sim-rec', rec.onSim);
   rec.grp.remove();
   for (const t of document.querySelectorAll(TAB)) { const dot = t.querySelector('.shell-recdot'); if (dot) dot.remove(); }
   live.delete(host);
 }
+
+/* ── real mode: the always-visible Record control ─────────────────────────────────────────────────────────────────────────────────── */
+
+const NS_SVG = 'http://www.w3.org/2000/svg';
+const glyph = (d) => { const s = document.createElementNS(NS_SVG, 'svg'); s.setAttribute('class', 'ic sm'); s.setAttribute('viewBox', '0 0 24 24'); s.setAttribute('aria-hidden', 'true'); const p = document.createElementNS(NS_SVG, 'path'); p.setAttribute('d', d); s.appendChild(p); return s; };
+const RGL = { highlighter: () => c3ic('flag', 'sm'), pause: () => glyph('M8 5v14M16 5v14'), play: () => c3ic('play', 'sm'), square: () => c3ic('stop', 'sm'), mic: () => c3ic('mic', 'sm'), down: () => glyph('M6 9l6 6 6-6') };
+
+/** The chip opens the note. console3 has no Notes place, so it opens the main app, where the full note is. */
+const openNote = () => { try { window.open('/', '_blank', 'noopener'); } catch { /* a blocked pop-up */ } };
+
+/* The engine and language the live transcript uses, on the chip (notes-recording-reliability): a meeting transcribed in the wrong
+ * language because of a setting is visible while it records. Read once per recording from GET /api/notes/engine. */
+const ENGINE = { Whisper: 'whisper', Qwen: 'qwen' };
+async function engineLabel() {
+  try {
+    const { pmGet } = await import('./http.js');
+    const r = await pmGet('/api/notes/engine');
+    const w = r && r.ok ? r.whisper : null;
+    if (!w || !w.live) return '';
+    const name = Object.keys(ENGINE).find((k) => ENGINE[k] === w.live) || w.live;
+    const lang = ((w.languages || []).find((x) => x.value === w.language) || {}).label || w.language || '';
+    return name + (lang ? ' · ' + lang : '');
+  } catch { return ''; }
+}
+
+function mountReal(host) {
+  ensureC3Css();
+  let ready = false;
+  const wrap = el('span', { class: 'c3rec', 'data-fr': 'record', 'data-shell': 'recording' });
+  host.insertBefore(wrap, host.firstChild);
+  const rec = { grp: wrap, key: '', clock: null };
+  const tabDot = (on) => {
+    for (const t of document.querySelectorAll(TAB)) {
+      let dot = t.querySelector('.shell-recdot');
+      if (!dot) { dot = el('span', { class: 'shell-recdot', 'aria-hidden': 'true' }); t.appendChild(dot); }
+      dot.hidden = !on;
+    }
+  };
+  const btn = (label, name, fn, attrs) => button({ label: RGL[name](), variant: 'ghost', onClick: fn, attrs: { title: label, 'aria-label': label, ...attrs } });
+  const off = (b, why) => { b.setAttribute('aria-disabled', 'true'); b.classList.add('c3rec__off'); b.title = why; b.setAttribute('aria-label', why); return b; };
+  const chipText = (st) => (st.mode === 'recording' ? (st.started ? clockOf(Date.now() - st.started) : '') : st.until ? 'paused · ' + Math.max(1, Math.ceil((st.until - Date.now()) / 60000)) + ' min left' : 'paused');
+
+  /** The arrow beside New: Untitled note, then today's meetings that have not started and have no note, the next one marked. */
+  async function openUpcoming(anchor) {
+    const { menu } = await import('./primitives.js');
+    const links = await import('./notes-links.js');
+    const evs = links.upcomingWithoutNote(await links.upcomingToday());
+    const fmt = (e, i) => {
+      const mins = Math.max(1, Math.round((Date.parse(e.start) - Date.now()) / 60000));
+      const inText = mins < 60 ? 'in ' + mins + ' min' : 'in ' + Math.floor(mins / 60) + ' h' + (mins % 60 ? ' ' + (mins % 60) + ' min' : '');
+      return { label: e.title, hint: e.time || '', detail: [i === 0 ? 'Next' : null, inText, e.with || null].filter(Boolean).join(' · '), attrs: { 'data-fr-rec-event': e.id || '' }, onSelect: () => dock.recordEvent(e) };
+    };
+    menu({ anchor, ariaLabel: 'Record a new meeting', items: [{ label: 'Untitled note', icon: 'plus', detail: 'not linked to a meeting', attrs: { 'data-fr-rec-untitled': '' }, onSelect: () => dock.recordNew() }, { sep: true },
+      ...(evs.length ? evs.map(fmt) : [{ label: 'No more meetings today', attrs: { 'data-fr-rec-none': '' }, onSelect: () => {} }])] });
+  }
+
+  let eng = { id: null, text: '' };
+  const sync = () => {
+    let st; try { st = dock.recordState(); } catch { st = { mode: 'idle' }; }
+    if (st.mode !== 'idle' && eng.id !== st.id) { eng = { id: st.id, text: '' }; const want = st.id; engineLabel().then((t) => { if (eng.id === want && t) { eng.text = t; rec.key = ''; sync(); } }); }
+    const hl = st.mode === 'recording' && dock.highlightBusy ? dock.highlightBusy() : null;
+    const key = [st.mode, st.id, st.title, hl ? hl.state + hl.open : '', eng.text].join(':');
+    if (key !== rec.key) {
+      rec.key = key; rec.clock = null;
+      const recording = st.mode === 'recording';
+      const kids = [];
+      if (st.mode !== 'idle') {
+        const v = recView(st, reducedMotion());
+        rec.clock = el('span', { class: 'recclk', 'data-fr-rec-clock': '' }, chipText(st));
+        const chip = button({ variant: 'ghost', onClick: () => openNote(st.id),
+          attrs: { class: 'c3rec__chip', title: (recording ? 'Recording: ' : 'Paused: ') + v.title + '. Open the note in the main app', 'aria-label': (recording ? 'Recording ' : 'Paused: ') + v.title + '. Open the note.', 'data-fr-rec': st.mode, 'data-shell-rec-open': '' },
+          label: [el('span', { class: 'recdot' + (v.dot === 'static' ? ' static' : ''), 'data-dot': v.dot }), rec.clock, el('span', { class: 'rt' }, v.title),
+            ...(eng.text ? [el('span', { class: 'c3rec__eng', 'data-fr-rec-engine': '', title: 'The live transcript: engine and language (Notes settings)' }, eng.text)] : [])] });
+        const group = [chip];
+        if (recording) {
+          group.push(btn(hl ? 'Highlight in progress: show it' : 'Highlight the last 30 seconds and what is said next', 'highlighter', () => dock.highlightNow(), { 'data-fr-rec-highlight': hl ? hl.state : '', 'data-shell-rec-mark': '' }),
+            btn('Pause (you can resume within 1 hour)', 'pause', () => dock.pauseNow(), { 'data-fr-rec-pause': '', 'data-shell-rec-pause': '' }));
+        } else group.push(btn('Resume ' + st.title, 'play', () => dock.resumeNow(), { 'data-fr-rec-resume': '', 'data-shell-rec-resume': '' }));
+        group.push(btn('Stop for good (cannot be resumed)', 'square', () => dock.stopNow(), { 'data-fr-rec-stop': '', 'data-shell-rec-stop': '' }));
+        kids.push(el('span', { class: 'recg c3rec__live' + (recording ? '' : ' paused'), role: 'group', 'aria-label': (recording ? 'Recording ' : 'Paused: ') + st.title }, group));
+      }
+      const why = 'Pause or stop the meeting being recorded to start a new one';
+      const mic = button({ variant: 'ghost', label: [RGL.mic(), el('span', { class: 'c3rec__lbl' }, 'Record')], onClick: (e) => { if (!recording) dock.recordNew(e.currentTarget); },
+        attrs: { title: 'Record an untitled note', 'aria-label': 'Record an untitled note', 'data-fr-rec-new': '' } });
+      const arrow = btn('Record for an upcoming meeting', 'down', (e) => { if (!recording) openUpcoming(e.currentTarget); }, { 'data-fr-rec-upcoming': '', 'aria-haspopup': 'menu' });
+      if (recording) { off(mic, why); off(arrow, why); }
+      kids.push(el('span', { class: 'recg idle', role: 'group', 'aria-label': 'New recording' }, mic, arrow));
+      const panel = recording && dock.highlightPanel ? dock.highlightPanel() : null;
+      if (panel) kids.push(el('div', { class: 'c3rec__pop' }, panel));
+      wrap.replaceChildren(...kids);
+      tabDot(st.mode !== 'idle');
+    }
+    if (rec.clock) rec.clock.textContent = chipText(st);
+  };
+  /* note-dock reads the notes (a meeting the server still holds open is found again) and re-draws on every state change */
+  try { dock.mountDock(); } catch { /* the dock is not available on this page */ }
+  let unsub = null;
+  import('./state.js').then((m) => { unsub = m.subscribe(sync); }).catch(() => {});
+  rec.timer = setInterval(sync, 1000);
+  rec.off = () => { if (unsub) unsub(); };
+  sync();
+  live.set(host, rec);
+}

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

@@ -647,7 +647,7 @@ function checkSilence(ctx, a) {
   ctx.setState({});
 }
 async function startAudio(ctx, n, want) {
-  const a = { id: n.id, state: 'starting', sources: [], streams: [], ctx: null, started: Date.now(), clock: null, msg: null, queue: {}, buf: {}, rs: {}, rs24: {}, buf24: {}, peak: {}, began: Date.now(), lost: 0, ended: 0 };
+  const a = { id: n.id, state: 'starting', sources: [], streams: [], ctx: null, started: Date.now(), clock: null, msg: null, queue: {}, buf: {}, rs: {}, rs24: {}, buf24: {}, peak: {}, began: Date.now(), lost: 0, ended: 0, cap: null, seq: {}, off: {} };
   const opened = [];
   // the meeting first, straight from the press: the browser lets a page share a screen only right after a click
   for (const kind of want.slice().sort((x, y) => (x === 'meeting' ? -1 : y === 'meeting' ? 1 : 0))) {
@@ -662,6 +662,8 @@ async function startAudio(ctx, n, want) {
   n.recorded_from = r.recorded_from;
   // the clock counts the meeting time, as the line times do: Listen again carries on from where it stopped
   a.started = Date.parse(r.clock_from || r.recorded_from) || a.started;
+  // each chunk names its capture, its sequence number and its sample offset, so the server writes it once and in its place
+  a.cap = r.capture && r.capture.token ? r.capture.token : null;
   let ac;
   // the device's own rate: the 16 kHz audio for transcription and the 24 kHz audio for the replay are both made from the same blocks (D92 as amended)
   try { ac = new AudioContext(); } catch { ac = new AudioContext({ sampleRate: RATE }); }
@@ -694,13 +696,16 @@ async function startAudio(ctx, n, want) {
 function sendChunk(ctx, a, kind, final) {
   const b = a.buf[kind] || []; a.buf[kind] = [];
   const pcm = b64(Int16Array.from(b));
+  const seq = a.seq[kind] = a.seq[kind] === undefined ? 0 : a.seq[kind] + 1;
+  const off = a.off[kind] || 0; a.off[kind] = off + b.length;
+  const where = a.cap ? { cap: a.cap, seq, off } : {};
   const b24 = a.buf24[kind] || []; a.buf24[kind] = [];
   const pcm24 = b24.length ? b64(Int16Array.from(b24)) : undefined;
   const seconds = b.length / RATE;
   a.queue[kind] = a.queue[kind].then(async () => {
     let r = null;
     for (let tries = 0; tries < SEND_TRIES; tries++) {
-      r = await pmPost('/api/notes/audio', { id: a.id, source: kind, pcm, pcm24, final });
+      r = await pmPost('/api/notes/audio', { id: a.id, source: kind, pcm, pcm24, final, ...where });
       if (r && r.ok) return;
       if (r && (r.status === 409 || r.status === 404)) break;   // the server refused this note's audio: sending again changes nothing
       if (tries + 1 < SEND_TRIES) await new Promise((res) => setTimeout(res, SEND_BACKOFF_MS * 3 ** tries));