create-pmos 0.134.0 → 0.136.0

package/workspace/public/pm/console3.css

@@ -201,7 +201,6 @@
 .c3 .vz .chart{max-width:540px}
 .c3{container-type:inline-size}
 .c3 .brief{position:relative;isolation:isolate;display:grid;gap:16px}
-.c3 .brief::before{content:"";position:absolute;left:-24px;right:-24px;top:-28px;height:380px;background:radial-gradient(60% 100% at 12% 0%,var(--accw),transparent 70%);z-index:-1;pointer-events:none}
 .c3 .bcols{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(300px,1fr);gap:20px;align-items:start}
 .c3 .bcol{display:grid;gap:16px;min-width:0}
 .c3 .bcol.r{position:sticky;top:12px}
@@ -494,8 +493,6 @@
 /* console3.css addition: the Calendar page (c3-calendar.js, initiative calendar-time-page). Classes start with cal3-, colours are tokens.
  * The controls are primitives (button()), so each rule below sets the box itself: it wins over components.css when that sheet is loaded. */
 .c3 .cal3{display:grid;gap:var(--sp-3);min-width:0}
-.c3 .cal3-head{display:flex;gap:4px 12px;align-items:baseline;flex-wrap:wrap}
-.c3 .cal3-head h2{margin:0;font:600 var(--fs-5) var(--sans)}
 .c3 .cal3 .calbar{margin-bottom:0}
 .c3 .cal3-chips{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
 .c3 .cal3 button.cal3-chip{display:inline-flex;align-items:center;gap:6px;height:auto;min-height:30px;padding:3px 10px;border:1px solid var(--border);border-radius:8px;background:var(--card);color:var(--muted-foreground);font:500 var(--fs-2) var(--sans);cursor:pointer;white-space:nowrap}
@@ -528,7 +525,9 @@
 .c3 .tag.cal3-tone-warn{color:var(--warning)}
 .c3 .tag.cal3-tone-bad{color:var(--destructive)}
 .c3 .tag.cal3-up{color:var(--acc)}
-.c3 .cal3-more,.c3 .cal3-fcnt{font:var(--fs-1) var(--mono);color:var(--muted-foreground)}
+.c3 .cal3-more,.c3 .cal3 button.cal3-more{font:var(--fs-1) var(--mono);color:var(--muted-foreground)}
+.c3 .cal3 button.cal3-more{display:inline-flex;align-items:center;height:auto;min-height:20px;padding:0 6px;border:0;border-radius:6px;background:transparent;cursor:pointer}
+@media (hover:hover){.c3 .cal3 button.cal3-more:hover{background:var(--accw);color:var(--foreground)}}
 .c3 .cal3-cnt{font:var(--fs-1) var(--mono);color:var(--acc)}
 /* Day and Week: the timeline, its day heads and the all-day marker strip */
 .c3 .cal3-tg{min-width:0}
@@ -545,9 +544,29 @@
 .c3 .vday.cal3-col{height:var(--cal3-hgt);margin-top:0;border-left:1px solid var(--border);background:repeating-linear-gradient(to bottom,var(--border) 0 1px,transparent 1px var(--cal3-pph))}
 .c3 .vday.cal3-col.we{background-color:var(--muted)}
 .c3 .vday.cal3-col.today{background-color:var(--accw)}
-.c3 .vday .cal3-free{left:2px;right:2px;top:var(--cal3-y);height:var(--cal3-h);display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:4px 6px;overflow:hidden;border:1px dashed var(--ring);z-index:1}
-.c3 .vday .cal3-free b{font:500 var(--fs-1) var(--mono);color:var(--foreground)}
-.c3 .vday .cal3-free span{font:var(--fs-1)/1.3 var(--sans);color:var(--muted-foreground)}
+.c3 .vday .cal3-free{left:2px;right:2px;top:var(--cal3-y);height:var(--cal3-h);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2px 6px;overflow:hidden;border:1px dashed var(--focus-window);background:color-mix(in oklab,var(--focus-window) 7%,transparent);z-index:1}
+.c3 .vday .cal3-free b{font:var(--fs-2) var(--mono);color:var(--focus-window)}
+/* the day header: the day button with its hours, and the load bar (tied to a promise or decision, routine, the rest) */
+.c3 .cal3-dh{display:grid;gap:2px;align-content:start}
+.c3 .cal3-dh .dhl{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:0 6px}
+.c3 .cal3-dh .hrs{font:var(--fs-1) var(--mono);color:var(--muted-foreground);white-space:nowrap}
+.c3 .cal3-dh .dhl button.cal3-dbtn{white-space:nowrap;padding:2px 2px;min-width:0}
+.c3 .cal3-dh .lbar{height:5px;margin:0 4px 4px}
+.c3 .cal3-dh .lbar i{width:var(--cal3-w,0);background:var(--muted)}
+.c3 .cal3-dh .lbar i.tied{background:var(--acc)}
+.c3 .cal3-dh .lbar i.rt{background:var(--ring)}
+.c3 .cal3-dh .lbar i.rest{flex:1;width:auto;background:var(--muted)}
+/* the legend keys: a shape and a word */
+.c3 .legend .lgk{display:inline-block;width:9px;height:9px;margin-right:4px;background:var(--muted-foreground)}
+.c3 .legend .lgk.tied{background:var(--acc)}
+.c3 .legend .lgk.fw{border:1px dashed var(--focus-window);background:transparent}
+.c3 .legend .lgk.rel{transform:rotate(45deg) scale(.8)}
+.c3 .legend .lgk.pro{transform:rotate(45deg) scale(.8);background:transparent;border:1px solid var(--muted-foreground)}
+.c3 .legend .lgk.rep{width:6px;height:6px}
+.c3 .legend .lgfw{color:var(--focus-window)}
+.c3 .sheet.calpop .calpop-esc{font:var(--fs-1) var(--mono)}
+.c3 .cal3-grid .legend{padding:var(--sp-2) var(--sp-2) 0}
+.c3 .cal3-tidyl .iacts,.c3 .cal3-tidy-i .iacts{display:flex;flex-wrap:wrap;gap:8px;align-items:center;flex:1 1 100%}
 .c3 .vday button.cal3-ev{top:var(--cal3-y);height:var(--cal3-h);min-height:0;left:calc(2px + (100% - 4px) * var(--cal3-l) / var(--cal3-lc));right:auto;width:calc((100% - 4px) / var(--cal3-lc) - 2px);display:block;padding:3px 8px;z-index:2;white-space:nowrap;cursor:pointer}
 .c3 .vday button.cal3-ev>span{display:block;overflow:hidden}
 .c3 .vday .cal3-ev b{display:block;overflow:hidden;text-overflow:ellipsis;font-weight:500}
@@ -590,6 +609,17 @@
 .c3 .cal3 a.cal3-ref{display:inline-flex;gap:4px;align-items:center;color:var(--acc);font:500 var(--fs-2) var(--sans);text-decoration:underline;text-underline-offset:2px}
 .c3 .cal3-lane{display:grid;grid-template-columns:auto auto minmax(0,1fr);gap:8px;align-items:center;font-size:var(--fs-2)}
 .c3 .cal3-why{text-align:right}
+/* the tidy-up: a meeting a suggestion names carries an inset ring in the tone of its most severe suggestion; the panel groups by severity */
+.c3 .cal3 button.cal3-tidy-ev{--cal3-tc:var(--foreground);box-shadow:inset 0 0 0 2px var(--cal3-tc)}
+.c3 .cal3 button.cal3-tidy-ev.cal3-tidy-warn{--cal3-tc:var(--warning)}
+.c3 .cal3 button.cal3-tidy-ev.cal3-tidy-bad{--cal3-tc:var(--destructive)}
+.c3 .cal3-ctx h4.cal3-tone-warn{color:var(--warning)}
+.c3 .cal3-ctx h4.cal3-tone-bad{color:var(--destructive)}
+.c3 .cal3-tidy-i{--cal3-tc:var(--border);border-left:3px solid var(--cal3-tc);padding-left:8px;overflow-wrap:anywhere;min-width:0}
+.c3 .cal3-tidy-i.cal3-tidy-warn{--cal3-tc:var(--warning)}
+.c3 .cal3-tidy-i.cal3-tidy-bad{--cal3-tc:var(--destructive)}
+.c3 .cal3-tidy-t,.c3 .cal3-tidy-why,.c3 .cal3-tidy-fix{flex:1 1 100%;min-width:0}
+.c3 .cal3-tidy-refs{display:flex;flex-wrap:wrap;gap:4px 12px;min-width:0}
 .c3 .cal3 button.cal3-close{margin-left:auto;height:auto;min-height:24px;padding:2px 8px;border:1px solid var(--border);border-radius:6px;background:transparent;color:var(--muted-foreground);font:500 var(--fs-1) var(--mono);cursor:pointer}
 .c3 .cal3 button:focus-visible,.c3 .cal3 a:focus-visible{outline:2px solid color-mix(in oklab, var(--ring) 50%, var(--foreground));outline-offset:2px}
 @media (hover:hover){
@@ -1212,13 +1242,13 @@
 .c3 .sheet:focus{outline:none}
 .c3 .sheet.bs.dragging{transition:none}
 .c3 .sheet .sh2 .ib{flex:none}
-/* the calendar popup (c3-calpop.js): the sheet, centred and wide on a desktop, the whole screen on a phone */
-.c3 .sheet.calpop{left:12px;right:12px;margin-inline:auto;width:min(1100px,calc(100% - 24px))}
+/* the calendar popup (c3-calpop.js): the Calendar page's grid in a 780px drawer (.sheet.dw), the whole screen on a phone */
 .c3 .sheet.calpop .sb{padding:var(--sp-3);min-width:0}
 .c3 .calpop-host{min-width:0;max-width:100%}
 .c3.ph .sheet.calpop{top:0;left:0;right:0;bottom:0;width:auto;max-height:none;border-radius:0;margin:0}
 .c3.ph .sheet.bs.calpop{max-height:none;animation:none}
 .c3 .sheet.calpop .ib,.c3 .sheet.calpop .seg button,.c3 .sheet.calpop .tdy{min-height:44px;min-width:44px}
+.c3 .sheet.calpop .cal3 button.cal3-chip{min-height:44px}
 @media (prefers-reduced-motion:reduce){.c3 .sheet,.c3 .scrim,.c3.ph .sheet.bs{animation:none}}
 /* a slide that cannot be used: the action goes outside and no outbox is connected. The reason sits under it (c3-case.js). */
 .c3 .slt.off{opacity:.55;--tc:var(--muted-foreground)}
@@ -1603,9 +1633,20 @@
 @media (max-width:760px){.c3 .psess{min-height:44px}}
 .c3 .psess .c{font:var(--fs-1) var(--mono)}
 /* Briefing as the brief (initiative briefing-brief): one column; Today agenda; own-item rows of Needs you; inline Portfolio pulse */
-.c3 .brief.one{max-width:900px}
-.c3 .brief.one .bcols{grid-template-columns:minmax(0,1fr)}
-.c3 .brief.one .bcol{display:grid;gap:16px;min-width:0}
+/* Briefing, console3-briefing-parity: the day-part switch in the stance bar, the tags, the Today rows */
+.c3 .stance .seg.dp{flex:none}
+.c3 .stance{flex-wrap:wrap}
+.c3 .tag.acc{background:var(--accw);color:var(--acc)}
+.c3 .tag.ok{color:var(--foreground)}
+.c3 .tag.warn{color:var(--warning)}
+.c3 .tag.bad{color:var(--destructive)}
+.c3 .tag.opp{color:var(--acc)}
+.c3 .brief .nrow.over{opacity:.6}
+.c3 .lh-main{min-width:0}
+.c3 .lh svg text{font-size:var(--fs-2)}
+.c3 .pulse-attn{font-size:var(--fs-1)}
+.c3 .pulse-foot{justify-content:space-between}
+.c3 .brief .lh .rg{transition:stroke-dasharray .4s}
 .c3 .c3s2{font-size:var(--fs-2)}
 .c3 .c3s3{font-size:var(--fs-3)}
 .c3 .ki.t-bad{color:var(--destructive)}
@@ -1647,7 +1688,7 @@
 .c3[data-daypart="afternoon"]{--dp-tint:color-mix(in oklab,var(--warning) 4%,transparent);--dp-warm:var(--warning)}
 .c3[data-daypart="evening"]{--dp-tint:color-mix(in oklab,var(--destructive) 4%,transparent);--dp-warm:var(--destructive)}
 .c3[data-daypart="night"]{--dp-tint:color-mix(in oklab,var(--muted-foreground) 6%,transparent);--dp-warm:var(--foreground)}
-.c3pg[data-daypart]{background-image:linear-gradient(var(--dp-tint),var(--dp-tint))}
+/* The page stays white: the day part keeps --dp-warm for the daylight strip and no longer washes the background. */
 /* The daylight strip in the top bar: an arc, a sun or a moon on it, and the two times. 22px tall, well under the 32px limit. */
 .c3 .c3top .c3pg-daylight{order:1;display:inline-flex;align-items:center;gap:8px;height:22px;max-height:32px;overflow:hidden;font:var(--fs-1)/1 var(--mono);color:var(--muted-foreground);white-space:nowrap}
 .c3 .c3top .tools{order:2}
@@ -1736,25 +1777,37 @@
 .c3 .wkoff-o input[type=text]{width:100%}
 .c3 .wkev{display:flex;flex-wrap:wrap;gap:var(--sp-2);align-items:center;border:1px dashed var(--warning);border-radius:8px;padding:var(--sp-2) var(--sp-3);font-size:var(--fs-2)}
 .c3 .wkev>.wk-min{flex:1 1 200px}
-.c3 .wkfg{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:var(--sp-3)}
-.c3 .wkfc{border:1px solid var(--border);background:var(--card);border-radius:8px;padding:var(--sp-3);display:grid;gap:var(--sp-2);align-content:start;min-width:0}
-.c3 .wkfc.on{border-color:var(--acc);background:var(--accw)}
-.c3 .wkfc-t{font-size:var(--fs-3);line-height:1.3;overflow-wrap:anywhere}
 .c3 .wkfc-why{margin:0;font-size:var(--fs-2);color:var(--muted-foreground)}
-.c3 .wkfc-r{margin:0;padding:0;list-style:none;display:grid;gap:2px;font-size:var(--fs-2)}
-.c3 .wkfc-r li{display:flex;gap:4px;align-items:center;min-width:0}
-.c3 .wkfc .wkq{margin-top:0}
 .c3 .wkdays{display:grid}
-.c3 .wkday h3{margin:0;padding:var(--sp-2) 0 var(--sp-1);font:500 var(--fs-2) var(--mono);color:var(--foreground);display:flex;gap:var(--sp-2);align-items:baseline}
-.c3 .wkday h3 .dim{font-weight:400}
+.c3 .wkday h3.wkdayh{margin:0;padding:var(--sp-3) 0 var(--sp-1);font:500 var(--fs-2) var(--mono);color:var(--muted-foreground);display:flex;gap:var(--sp-2);align-items:baseline;text-transform:none;letter-spacing:0}
+.c3 .wkday h3.wkdayh .dim{font-weight:400}
 .c3 .wkday-none{color:var(--muted-foreground);font-size:var(--fs-2);padding:0 0 var(--sp-2);border-bottom:1px solid var(--border)}
+/* console3-work-parity: the mockup's Work rows have a button at the right, so the swipe glyphs give way (the swipe itself stays) */
+.c3 .wk .sh2{flex-wrap:wrap}
+.c3 .wk .brief .nrow{grid-template-columns:auto minmax(0,1fr) auto}
+.c3 .wk .brief .nrow .nb{padding-right:0}
+.c3 .wk .brief .nrow>.sg{display:none}
+.c3 .wk .brief .nrow>.acts{align-self:center}
+.c3.ph .wk .brief .nrow>.acts{grid-column:auto}
+.c3 .card h3 .wk-nocase{text-transform:none;letter-spacing:0}
+.c3 .wkfr .pbar{width:90px}
+.c3 .wkfr .pbar i{width:var(--wl-w,0)}
+.c3 .wkfr-b{margin-top:6px}
+.c3 .flow>div i{width:var(--wl-w,0)}
+.c3 .flow .wkm-captured{--c:var(--muted-foreground)}
+.c3 .flow .wkm-clarified{--c:var(--acc)}
+.c3 .flow .wkm-committed{--c:var(--warning)}
+.c3 .flow .wkm-done{--c:var(--foreground)}
+.c3 .wkjob{max-width:100%}
+.c3 .wkfr .form input{width:100%}
+
 .c3 .wkrv{gap:var(--sp-3)}
 .c3 .wkrv-p{display:flex;justify-content:space-between;font:var(--fs-2) var(--mono);color:var(--muted-foreground)}
 .c3 .wkrv-t{margin:0;font:600 var(--fs-4)/1.3 var(--sans);color:var(--foreground);overflow-wrap:anywhere}
 .c3 .wkrv-x{display:grid;gap:var(--sp-2)}
 @media (max-width:760px){
   .c3 .wkq input[type=date],.c3 .wkq-f input[type=text]{min-height:44px;max-width:none}
-  .c3 .wkoff-o input[type=text],.c3 .wkfc input[type=text]{min-height:44px}
+  .c3 .wkoff-o input[type=text],.c3 .wkfr input[type=text]{min-height:44px}
 }
 
 .c3 .wk-sm{font-size:var(--fs-2)}
@@ -1762,3 +1815,26 @@
 .c3 .wk-bar::-webkit-progress-bar{background:var(--muted)}
 .c3 .wk-bar::-webkit-progress-value{background:var(--acc);border-radius:6px}
 .c3 .wk-bar::-moz-progress-bar{background:var(--acc);border-radius:6px}
+
+/* console3 foundation: ambient motion background (c3-ambient.js). One fixed canvas behind the page; the grid sits above it. */
+.c3 .c3amb{position:fixed;inset:0;width:100vw;height:100vh;z-index:0;pointer-events:none}
+.c3 .c3grid{position:relative;z-index:1}
+/* Build fix from the mockup (the primary button label colour is in components.css): console3 styled .sect .sh2 only under .brief. */
+.c3 .sect > .sh2{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;padding:var(--sp-3) 0 var(--sp-2);border-bottom:1px solid var(--border)}
+.c3 .sect > .sh2 h2{margin:0;font:500 var(--fs-2) var(--mono);color:var(--muted-foreground);text-transform:uppercase;letter-spacing:.06em;display:flex;gap:8px;align-items:center}
+
+/* console3 foundation: the front shows the number tiles; the flipped back grows to fit its content (options and the slide are never clipped). */
+.c3 .cfh .kps{display:flex;gap:var(--sp-2);flex-wrap:wrap;justify-content:flex-end;align-content:center}
+.c3 .fc.flipcard.back{height:auto;overflow:visible}
+.c3 .fc.flipcard.back .fb{position:relative;inset:auto;overflow:visible;min-height:var(--fc-h)}
+.c3 .fc.flipcard.back .ff{position:absolute;inset:0}
+@container card (max-width:399px){
+.c3 .fc .cf .cfh .kps{justify-content:stretch}
+}
+/* Number-tile tones: the tile names its colour by class, not by an inline style. */
+.c3 .kp.k-acc{--c:var(--acc)}
+.c3 .kp.k-destructive{--c:var(--destructive)}
+.c3 .kp.k-warning{--c:var(--warning)}
+.c3 .kp.k-foreground{--c:var(--foreground)}
+.c3 .kp.k-muted-foreground{--c:var(--muted-foreground)}
+.c3 .psess{display:inline-flex;gap:6px;align-items:center}

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

@@ -26,6 +26,7 @@
 import { el, patchChildren } from './dom.js';
 import { button, iconButton, field, row, menu, toast, empty, ensureComponentsCss } from './primitives.js';
 import { onNotes } from './notes-links.js';
+import { screenStrip, shotButton, shotFor } from './notes-screen-view.js';
 import { agendaHeard, peopleOf } from './notes-context.js';
 import { ensureSprite, icon } from './icons.js';
 import { pmGet, pmPost } from './http.js';
@@ -69,7 +70,10 @@ export const COPY = Object.freeze({
   transcript: (n) => `${n} transcript ${n === 1 ? 'line' : 'lines'}`,
   del: 'Delete note',
   delAsk: (t) => `Delete “${t}”?`,
-  delBody: 'The note, its transcript and its audio are deleted from this machine.',
+  delBody: 'The note, its transcript, its audio and its screenshots are deleted from this machine.',
+  delShots: 'Delete screenshots',
+  delShotsAsk: 'Delete this note\'s screenshots?',
+  delShotsBody: 'The screenshots of the shared screen are deleted from this machine. The notes, the transcript and the audio stay. This cannot be undone.',
   saved: 'Saved',
   notSaved: 'Not saved',
   edited: 'edited',
@@ -218,6 +222,7 @@ async function loadOpen(inst) {
   if (inst.open !== id) return;
   inst.note = r && r.ok ? r.note : null;
   inst.rec = r && r.ok ? r.recording || null : null;
+  inst.shots = r && r.ok && r.screen ? r.screen.frames || [] : [];
   drawRight(inst);
 }
 /** The replay of the note's kept audio: one <audio> per note, kept across redraws so playback goes on. Null when no audio is kept. */
@@ -276,7 +281,7 @@ function drawRight(inst, force) {
   const n = inst.note;
   const live = dock.recordState();
   const held = !!n && live.mode !== 'idle' && live.id === n.id;
-  const sig = JSON.stringify([inst.open, n && [n.updated_at, n.title, n.final_notes && n.final_notes.at, (n.transcript || []).length, (n.highlights || []).length, n.agent && n.agent.markdown, iniName(n.initiative), n.state, n.resume_until, n.ended_at, (n.sessions || []).length, n.meeting && n.meeting.context && n.meeting.context.taken_at], inst.rec && [inst.rec.bytes, inst.rec.cleaned], live.mode, live.id, !!inst.rows, inst.ctxOpen, inst.info]);
+  const sig = JSON.stringify([inst.open, n && [n.updated_at, n.title, n.final_notes && n.final_notes.at, (n.transcript || []).length, (n.highlights || []).length, n.agent && n.agent.markdown, iniName(n.initiative), n.state, n.resume_until, n.ended_at, (n.sessions || []).length, n.meeting && n.meeting.context && n.meeting.context.taken_at], inst.rec && [inst.rec.bytes, inst.rec.cleaned], (inst.shots || []).length, live.mode, live.id, !!inst.rows, inst.ctxOpen, inst.info]);
   // a held note draws again on every render: the clock, the lines and the paused minutes move. Nothing else draws without a change.
   if (!force && !held && sig === inst.rightSig) return;
   // a field being typed in is not redrawn under the cursor, except in the live block, whose fields are kept across redraws
@@ -387,8 +392,9 @@ function noteParts(inst, n, live) {
       { label: COPY.linkMeeting, icon: 'link', onSelect: () => V.linkMeeting({ state: inst.ctx.state, setState: inst.ctx.setState }, n.id), attrs: { 'data-ntm-more-meeting': '' } },
       { label: COPY.linkInitiative, icon: 'target', onSelect: () => V.linkInitiative({ state: inst.ctx.state, setState: inst.ctx.setState }, n.id), attrs: { 'data-ntm-more-initiative': '' } },
       { sep: true },
+      (inst.shots || []).length ? { label: COPY.delShots, danger: true, onSelect: () => deleteShots(inst, n), attrs: { 'data-ntm-del-shots': '' } } : null,
       { label: COPY.del, danger: true, onSelect: () => deleteNote(inst, n) },
-    ] }) });
+    ].filter(Boolean) }) });
   acts.push(more);
   const out = [
     el('div', { class: 'nt-pg-top' },
@@ -408,6 +414,9 @@ function noteParts(inst, n, live) {
   if (replay) out.push(el('section', { class: 'nt-pg-sec nt-pg-sec--first nt-pg-replay', 'data-ntm': 'replay' },
     el('h3', { class: 'nt-pg-sec__h' }, el('span', null, 'Replay')), replay,
     el('p', { class: 'nt-hint' }, 'Kept on this machine. Press a time in the discussion to play from there.')));
+  // the screenshots of the shared screen, on the same clock as the replay and the transcript (notes-screen-capture)
+  const shots = held || n.private ? [] : inst.shots || [];
+  if (shots.length) out.push(screenStrip({ id: n.id, frames: shots, seek: replay ? (ms) => seekReplay(inst, ms) : null, replay }));
 
   const cf = conflictsOf(n);
   if (cf.length) {
@@ -460,7 +469,12 @@ function noteParts(inst, n, live) {
     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' }, inst.audio && !held ? button({ label: V.fmtTime(x.t || 0), variant: 'ghost', size: 'sm', onClick: () => seekReplay(inst, x.t || 0), attrs: { 'data-ntm-seek': '', title: 'Play from here' } }) : el('span', { class: 'nt-pg-li__at' }, V.fmtTime(x.t || 0)), el('span', { class: 'nt-pg-li__text' }, x.text)))) : null));
+      tr.length ? el('div', { class: 'nt-pg-trans' }, tr.map((x, k) => {
+        // the shot that came up while this line was said, as a small picture beside it
+        const sh = shots.length ? shotFor(shots, x.t || 0, k + 1 < tr.length ? tr[k + 1].t || 0 : Infinity) : null;
+        return el('div', { class: 'nt-pg-li' }, inst.audio && !held ? button({ label: V.fmtTime(x.t || 0), variant: 'ghost', size: 'sm', onClick: () => seekReplay(inst, x.t || 0), attrs: { 'data-ntm-seek': '', title: 'Play from here' } }) : el('span', { class: 'nt-pg-li__at' }, V.fmtTime(x.t || 0)), el('span', { class: 'nt-pg-li__text' }, x.text),
+          sh ? shotButton({ id: n.id, frames: shots, frame: sh, seek: inst.audio ? (ms) => seekReplay(inst, ms) : null }) : null);
+      })) : null));
   }
   return out.filter(Boolean);
 }
@@ -498,6 +512,14 @@ function openFile(inst, doc) {
   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 deleteShots(inst, n) {
+  const sure = await askConfirm({ title: COPY.delShotsAsk, body: COPY.delShotsBody, confirmLabel: 'Delete', cancelLabel: 'Keep them' });
+  if (!sure) return;
+  const r = await pmPost('/api/notes/screen-delete', { id: n.id });
+  if (!r || !r.ok) { toast({ text: (r && r.error) || 'The screenshots were not deleted.', tone: 'destructive' }); return; }
+  inst.shots = [];
+  drawRight(inst, true);
+}
 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;

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

@@ -0,0 +1,165 @@
+/* notes-screen-capture.js — screenshots of the shared screen while a note listens (notes-screen-capture).
+ *
+ *   startScreen({ track, id, cap, clock, post, … }) → { stop(), cue(t, why), hear(lines), count, lost }   take shots of one shared screen
+ *   cueOf(line) → why | null                              does a transcript line point at the screen, or decide something? Pure.
+ *   greyOf(source, w, h, canvas?) → Uint8Array             a small grey copy of a frame, for the comparison
+ *   changed(prev, cur, { pixel?, share? }) → boolean      true when enough of the picture changed. Pure.
+ *
+ * WHERE THE PICTURE COMES FROM. Listen already asks the browser to share the screen, to hear the meeting (view-notes.js
+ * openSource). That share carries the picture too. The browser's own sharing window is the PM's permission, and the browser
+ * shows that it is sharing for as long as the track is live. This module never asks for a screen of its own.
+ *
+ * WHEN IT KEEPS A SHOT. It follows the meeting, not a timer. Every `every` ms (2 s) the frame is drawn into a 64 × 36 grey copy.
+ *   - settled: the picture changed from the last kept shot (more than `share`, 2 %, of the small pixels moved by more than `pixel`,
+ *     24 of 255) and then held still for one check. So a slide is kept once it is drawn, a scroll once it stops, and the frames of
+ *     a transition are not kept. A cursor, a pointer or compression noise is not a change. After a run of movement it takes two
+ *     still checks, because a video can repeat one frame.
+ *   - moving: a picture that never holds still (a video, an animation) is sampled once every `slowGap` ms (15 s) while it moves.
+ *   - said: a transcript line that points at the screen ("as you can see", "this slide", "let me share") or that the workspace
+ *     labels a decision or a next step keeps the picture that was on screen when the line was said. The page keeps the changed
+ *     pictures of the last RING_MS (20 s) in memory for this, because a line is transcribed some seconds after it is said.
+ *   - highlight: the PM's Highlight keeps the picture on screen at that moment.
+ *   A picture the last kept shot already shows is never kept again, whatever the reason. Each shot carries why it was kept.
+ * The shot is a JPEG of the frame at most MAX_W px wide. It is posted with the meeting time, the note and the capture token, so
+ * the server keeps it beside the transcript and refuses a second tab (lib/notes-screen.js).
+ *
+ * WHAT IT NEVER DOES. It sends a shot only to this workspace's own server (`post`), never anywhere else.
+ */
+const SMALL_W = 64;
+const SMALL_H = 36;
+const MAX_W = 1600;
+const QUALITY = 0.72;
+
+export function changed(prev, cur, { pixel = 24, share = 0.02 } = {}) {
+  if (!prev || !cur || prev.length !== cur.length) return true;
+  let moved = 0;
+  for (let i = 0; i < cur.length; i++) if (Math.abs(cur[i] - prev[i]) > pixel) moved++;
+  return moved / cur.length > share;
+}
+
+export function greyOf(source, w = SMALL_W, h = SMALL_H, canvas = null) {
+  const c = canvas || document.createElement('canvas');
+  c.width = w; c.height = h;
+  const g = c.getContext('2d', { willReadFrequently: true });
+  g.drawImage(source, 0, 0, w, h);
+  const d = g.getImageData(0, 0, w, h).data;
+  const out = new Uint8Array(w * h);
+  for (let i = 0, j = 0; i < out.length; i++, j += 4) out[i] = (d[j] * 299 + d[j + 1] * 587 + d[j + 2] * 114) / 1000;
+  return out;
+}
+
+const b64 = (blob) => new Promise((res, rej) => {
+  const r = new FileReader();
+  r.onload = () => res(String(r.result).slice(String(r.result).indexOf(',') + 1));
+  r.onerror = () => rej(r.error);
+  r.readAsDataURL(blob);
+});
+
+const RING_MS = 20000;
+const CUES = /\b(as you can see|you can see (here|this|that|it)|on (the|my|your) screen|(this|that|the next|the previous|next|previous|last) (slide|chart|graph|diagram|table|dashboard|screen|page|demo|mock-?up|figure|picture|image)|let me (share|show)|i('| a)m (sharing|showing)|look(ing)? at (this|that|the screen)|shown here|right here|over here|scroll(ing)? (up|down)|zoom in|on screen)\b/i;
+
+/** Why a transcript line asks for the picture on screen, or null. */
+export function cueOf(line) {
+  if (!line || typeof line.text !== 'string') return null;
+  const m = CUES.exec(line.text);
+  if (m) return 'said: "' + m[0].toLowerCase() + '"';
+  if (line.cat === 'decision') return 'decision';
+  if (line.cat === 'action') return 'next step';
+  return null;
+}
+
+export function startScreen({ track, id, cap, clock, post, every = 2000, slowGap = 15000, ringMs = RING_MS }) {
+  const video = document.createElement('video');
+  video.muted = true; video.playsInline = true;
+  video.srcObject = new MediaStream([track]);
+  // in the page, though not seen: a browser stops painting new frames into a video element that is not in the document
+  video.className = 'nt-screen-feed';
+  video.setAttribute('aria-hidden', 'true');
+  document.body.appendChild(video);
+  video.play().catch(() => {});
+  const small = document.createElement('canvas');
+  const big = document.createElement('canvas');
+  const s = { count: 0, lost: 0, stopped: false, last: null, lastAt: 0, prev: null, moving: 0, still: 0, run: 0, ring: [], kept: new Map(), cues: [], heard: new Set(), chain: Promise.resolve(), timer: null };
+
+  const snap = async (t, grey) => {
+    const w = Math.min(MAX_W, video.videoWidth);
+    const h = Math.round(video.videoHeight * (w / video.videoWidth));
+    big.width = w; big.height = h;
+    big.getContext('2d').drawImage(video, 0, 0, w, h);
+    const blob = await new Promise((res) => big.toBlob(res, 'image/jpeg', QUALITY));
+    return blob ? { t: Math.max(0, Math.round(t)), grey, blob, w, h } : null;
+  };
+  // one post at a time, in order; a shot the last kept one already shows is dropped here
+  // a shot a line or a highlight points at that is already kept is posted again, so it carries that better reason
+  const keep = (shot, why, cue = false) => {
+    s.chain = s.chain.then(async () => {
+      if (s.stopped || !shot) return;
+      const again = cue && s.kept.has(shot.t) && !s.kept.get(shot.t).cue;
+      if (!again && !changed(s.last, shot.grey)) return;
+      const r = await post({ id, cap, t: shot.t, img: await b64(shot.blob), w: shot.w, h: shot.h, why });
+      if (r && r.ok) {
+        s.kept.set(shot.t, { cue });
+        if (again) return;
+        s.count++; s.last = shot.grey; s.lastAt = Date.now(); s.ring = s.ring.filter((x) => x.t >= shot.t);
+        return;
+      }
+      // the server stopped taking shots (switched off, the capture ended, the note went private): stop asking
+      if (r && (r.status === 409 || r.status === 404)) { stop(); return; }
+      s.lost++;
+    }).catch(() => { s.lost++; });
+    return s.chain;
+  };
+  /** The picture on screen at meeting time t, from memory: the last changed picture at or before it, else the first one just after. */
+  const at = (t) => { let pick = null; for (const x of s.ring) if (x.t <= t) pick = x; return pick || s.ring.find((x) => x.t > t && x.t - t <= 2500) || null; };
+
+  let busy = false;
+  const tick = async () => {
+    if (s.stopped || busy || track.readyState !== 'live' || !video.videoWidth) return;
+    busy = true;
+    try {
+      const now = clock();
+      // lines said earlier that asked for the picture, and highlights: their time has passed, so the memory has the picture
+      for (const c of s.cues.splice(0)) keep(at(c.t), c.why, true);
+      const grey = greyOf(video, SMALL_W, SMALL_H, small);
+      const moved = !!s.prev && changed(s.prev, grey);
+      s.prev = grey;
+      // a still check right after a run of movement may be one repeated frame of a video: then it takes two still checks
+      if (moved) { s.moving++; s.still = 0; } else { if (s.moving) s.run = s.moving; s.moving = 0; s.still++; }
+      const settled = !moved && s.still >= (s.run >= 2 ? 2 : 1);
+      if (settled && s.still >= 2) s.run = 0;
+      const fresh = changed(s.last, grey);
+      if (fresh) {
+        const shot = await snap(now, grey);
+        if (shot) { s.ring.push(shot); s.ring = s.ring.filter((x) => x.t >= now - ringMs); }
+        // settled: changed, and still since the last check (the very first picture counts as settled)
+        if (shot && (settled || !s.last)) keep(shot, s.last ? 'the screen changed' : 'sharing started');
+        // moving: a sample while it keeps moving
+        else if (shot && (s.moving >= 2 || s.run >= 2) && Date.now() - s.lastAt >= slowGap) keep(shot, 'the screen is moving');
+      }
+    } catch { s.lost++; } finally { busy = false; }
+  };
+  s.timer = setInterval(tick, every);
+  setTimeout(tick, 600);   // the first frame of the share, without waiting a whole interval
+  function stop() {
+    if (s.stopped) return;
+    s.stopped = true;
+    clearInterval(s.timer);
+    try { track.stop(); } catch { /* stopped */ }
+    video.srcObject = null;
+    video.remove();
+    s.ring = [];
+  }
+  /** Keep the picture on screen at meeting time t, for a reason (the PM's Highlight, a cue). */
+  function cue(t, why) { if (!s.stopped) s.cues.push({ t, why }); }
+  /** New transcript lines: each one that asks for the screen keeps the picture of its time, once. */
+  function hear(lines) {
+    for (const l of lines || []) {
+      const key = l.t + '|' + l.source + '|' + l.text + '|' + (l.cat || '');   // a line labelled later is heard again
+      if (s.heard.has(key)) continue;
+      s.heard.add(key);
+      const why = cueOf(l);
+      if (why) cue(l.t || 0, why);
+    }
+  }
+  return { stop, cue, hear, get count() { return s.count; }, get lost() { return s.lost; } };
+}

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

@@ -0,0 +1,98 @@
+/* notes-screen-view.js — the screenshots a note kept, beside its transcript (notes-screen-capture).
+ *
+ *   screenStrip({ id, frames, seek?, replay? }) → <section> | null   the Screen strip: one thumbnail per shot with its meeting time
+ *   shotFor(frames, from, to) → frame | null                         the shot that came up while a line was said, [from, to)
+ *   shotButton({ id, frames, frame, seek? }) → <button>               a small thumbnail that opens one shot (beside a transcript line)
+ *   openShot({ id, frames, index, seek? })                            the shot large: its time, why it was kept, its text, Previous, Next, Play from here
+ *
+ * The note's GET /api/notes/one carries `screen.frames` ([{ t, w, h, bytes, text? }], by meeting time); each image is
+ * GET /api/notes/screen?id=…&t=…. A shot stays on screen until the next one, so the shot "at" a time is the last one at or before it.
+ * While the replay plays, the strip marks the shot on screen at the replay's time. Used by the console3 Notes place
+ * (dest-notes.js) and the classic Notes view (view-notes.js).
+ */
+import { el } from './dom.js';
+import { button, sheet } from './primitives.js';
+
+const pad = (n) => String(n).padStart(2, '0');
+export function fmt(ms) {
+  const s = Math.max(0, Math.floor((ms || 0) / 1000));
+  const h = Math.floor(s / 3600);
+  return (h ? h + ':' + pad(Math.floor(s / 60) % 60) : String(Math.floor(s / 60))) + ':' + pad(s % 60);
+}
+/** Why a shot was kept, in words: the page's reason (lib/notes-screen-capture.js) or none for an older shot. */
+export function whyText(why) {
+  if (!why) return '';
+  const said = /^said: (.*)$/.exec(why);
+  if (said) return 'Kept when someone said ' + said[1];
+  return ({ 'the screen changed': 'Kept when the screen changed', 'sharing started': 'Kept when sharing started', 'the screen is moving': 'A sample while the screen was moving',
+    decision: 'Kept at a decision', 'next step': 'Kept at a next step', highlight: 'Kept at your highlight' })[why] || 'Kept: ' + why;
+}
+const srcOf = (id, t) => '/api/notes/screen?id=' + encodeURIComponent(id) + '&t=' + Math.round(t);
+
+/** The index of the shot on screen at `ms`: the last one at or before it, or -1. */
+export function shotIndexAt(frames, ms) {
+  let lo = 0; let hi = (frames || []).length - 1; let at = -1;
+  while (lo <= hi) { const mid = (lo + hi) >> 1; if (frames[mid].t <= ms) { at = mid; lo = mid + 1; } else hi = mid - 1; }
+  return at;
+}
+export function shotFor(frames, from, to) {
+  for (const f of frames || []) if (f.t >= from && f.t < to) return f;
+  return null;
+}
+
+function thumb({ id, f, label, cls, onClick, attrs }) {
+  const b = button({ label, variant: 'ghost', size: 'sm', onClick, attrs: { class: cls, 'aria-label': 'Screen at ' + fmt(f.t), title: 'Screen at ' + fmt(f.t), ...attrs } });
+  b.prepend(el('img', { class: 'nt-shot__img', src: srcOf(id, f.t), alt: '', loading: 'lazy', width: 160, height: Math.round(160 * ((f.h || 9) / (f.w || 16))) }));
+  return b;
+}
+
+export function shotButton({ id, frames, frame, seek }) {
+  const index = frames.indexOf(frame);
+  return thumb({ id, f: frame, label: '', cls: 'nt-shot nt-shot--line', onClick: () => openShot({ id, frames, index, seek }), attrs: { 'data-nt-shot-line': String(frame.t) } });
+}
+
+export function openShot({ id, frames, index, seek }) {
+  let i = Math.max(0, Math.min(frames.length - 1, index));
+  const h = sheet({ mode: 'center', title: 'Screen', body: [], attrs: { 'data-nt-shot-sheet': '' } });
+  const paint = () => {
+    const f = frames[i];
+    h.setHead('Screen at ' + fmt(f.t), '');
+    h.body.replaceChildren(
+      el('img', { class: 'nt-shot-big', src: srcOf(id, f.t), alt: f.text ? 'Screen at ' + fmt(f.t) + ': ' + f.text.slice(0, 200) : 'Screen at ' + fmt(f.t), 'data-nt-shot-big': String(f.t) }),
+      el('p', { class: 'nt-hint', 'data-nt-shot-why': f.why || '' }, 'Shot ' + (i + 1) + ' of ' + frames.length + ' · ' + fmt(f.t) + ' into the meeting' + (f.why ? ' · ' + whyText(f.why) : '')),
+      f.text ? el('p', { class: 'nt-shot-text', 'data-nt-shot-text': '' }, f.text) : null,
+      el('div', { class: 'nt-row' },
+        button({ label: 'Previous', variant: 'ghost', size: 'sm', disabled: i === 0, onClick: () => { i--; paint(); }, attrs: { 'data-nt-shot-prev': '' } }),
+        button({ label: 'Next', variant: 'ghost', size: 'sm', disabled: i === frames.length - 1, onClick: () => { i++; paint(); }, attrs: { 'data-nt-shot-next': '' } }),
+        seek ? button({ label: 'Play from here', size: 'sm', onClick: () => { h.close(); seek(f.t); }, attrs: { 'data-nt-shot-play': '' } }) : null));
+  };
+  paint();
+  return h;
+}
+
+/** Mark the shot on screen at the replay's time; the replay's own timeupdate calls it. */
+function follow(replay, id) {
+  if (!replay || replay.__ntShots) return;
+  replay.__ntShots = true;
+  const mark = () => {
+    const strip = document.querySelector('[data-nt-screen="' + CSS.escape(id) + '"]');
+    if (!strip) return;
+    const ms = replay.currentTime * 1000;
+    const shots = [...strip.querySelectorAll('[data-nt-shot]')];
+    let at = -1;
+    shots.forEach((b, k) => { if (Number(b.dataset.ntShot) <= ms) at = k; });
+    shots.forEach((b, k) => b.classList.toggle('nt-shot--now', k === at && (replay.currentTime > 0)));
+    if (at >= 0 && !replay.paused && shots[at].scrollIntoView) shots[at].scrollIntoView({ block: 'nearest', inline: 'nearest' });
+  };
+  replay.addEventListener('timeupdate', mark);
+  replay.addEventListener('seeked', mark);
+}
+
+export function screenStrip({ id, frames, seek, replay }) {
+  if (!frames || !frames.length) return null;
+  follow(replay, id);
+  return el('section', { class: 'nt-screen', 'data-nt-screen': id },
+    el('h3', { class: 'nt-sec__h' }, 'Screen · ' + frames.length + (frames.length === 1 ? ' shot' : ' shots')),
+    el('div', { class: 'nt-screen__strip', role: 'list' },
+      frames.map((f, k) => el('div', { role: 'listitem' }, thumb({ id, f, label: fmt(f.t), cls: 'nt-shot', onClick: () => openShot({ id, frames, index: k, seek }), attrs: { 'data-nt-shot': String(f.t) } })))));
+}

package/workspace/public/pm/panel-trees.js

@@ -26,8 +26,10 @@ const MUTED = 'color:var(--muted-foreground)';
 
 let dataMod = null; let termMod = null; let iniMod = null; let tabsMod = null;
 import('./data.js').then((m) => { dataMod = m; }).catch(() => { dataMod = null; });
-import('./tab-term.js').then((m) => { termMod = m; }).catch(() => { termMod = null; });
-import('./panel-initiatives.js').then((m) => { iniMod = m; }).catch(() => { iniMod = null; });
+// Kept as promises as well: a press that lands before these resolve (a slow first load) waits for them
+// instead of being dropped with a note.
+const termReady = import('./tab-term.js').then((m) => { termMod = m; return m; }).catch(() => { termMod = null; return null; });
+const iniReady = import('./panel-initiatives.js').then((m) => { iniMod = m; return m; }).catch(() => { iniMod = null; return null; });
 import('./panel-tabs.js').then((m) => { tabsMod = m; }).catch(() => { tabsMod = null; });
 
 const note = (name, text, tone) => setState({ treeNote: { name, text, tone: tone || null } });
@@ -55,6 +57,7 @@ function openSession(s) {
 
 /** Start a session in THIS tree: the workspace id is the tree's, so the server runs it in that folder. */
 export async function startHere(name, t) {
+  await Promise.all([termReady, iniReady]);
   if (!termMod || !iniMod) { note(name, 'the terminal module has not loaded — nothing was started', 'bad'); return; }
   const label = (t.branch || 'tree').replace(/^initiative\//, '');
   const res = await termMod.requestSpawn({ name: 'shell · ' + label, agent: 'shell', ws: t.ws, branch: null, createBranch: false, isolate: null, profile: null });