create-pmos 0.72.1 → 0.74.0

package/workspace/public/pm/today-day.js

@@ -25,7 +25,7 @@
  */
 
 import { el } from './dom.js';
-import { button, iconButton, badge, toast, row, tabs, field } from './primitives.js';
+import { button, iconButton, badge, toast, row, tabs, field, menu, meter } from './primitives.js';
 import { pmGet, pmPost } from './http.js';
 import { FIXTURE } from './state.js';
 import { COPY } from './today-copy.js';
@@ -35,6 +35,7 @@ import { agendaPanel, meetingDetail, memoryBlock, refreshAgenda, agendaSig, onAg
 import { notesBlock, onNotes } from './notes-links.js';
 
 const D = COPY.day;
+const A = COPY.act;
 const SLOW_MS = 30000;
 const FAST_MS = 4000;
 const MAX_REVISIONS = 3;
@@ -58,6 +59,8 @@ const ui = {
   open: (() => { const v = store.get(OPEN_KEY); return v === 'true' ? true : v === 'false' ? false : null; })(),
   sel: null, mtab: 'all', openSrc: null, showIgn: {}, showIgnDigests: false,
   revising: new Set(), notes: new Map(), siteDraft: '', placeDraft: {}, busy: new Set(), scroll: false,
+  // today-act-prepare: the folded groups the PM opened, the item whose hold form is open, and its draft
+  groupsOpen: new Set(), holding: null, holdDraft: { who: '', when: 'h2' }, compose: new Map(), verdict: new Map(),
 };
 let rerender = () => {};
 let notesSub = null;         // the redraw when the meeting notes list is read (pm/notes-links.js)
@@ -119,7 +122,8 @@ const isUrl = (s) => typeof s === 'string' && s.length <= 500 && /^https?:\/\/\S
 const srcName = (k) => D.srcName[k] || (k === 'derived' ? 'PMOS' : String(k || ''));
 
 function jobOf(item, task, worth) {
-  const kind = (item && item.kind) || (task && task.kind) || (item && item.owner === 'pm' ? 'you' : 'approve');
+  // a job the PM gave to the agent (Have the agent draft it) has the task's kind: approve
+  const kind = (task && task.kind) || (item && item.kind) || (item && item.owner === 'pm' ? 'you' : 'approve');
   const status = task ? task.status : kind === 'you' ? 'you' : 'notStarted';
   const group = worth ? 'worth' : ['you', 'review', 'failed'].includes(status) ? 'needs' : ['done', 'sent'].includes(status) ? 'done' : 'working';
   return {
@@ -160,10 +164,20 @@ function model(d, view) {
   for (const x of (brief && brief.worth_asking) || []) add(x, true);
   for (const t of tasks) if (!used.has(t.id)) jobs.push(jobOf(null, t, false));   // an item a check took off: its task stays
   const now = d && d.now ? (typeof d.now === 'number' ? d.now : Date.parse(d.now)) : Date.now();
+  const marks = (d && d.marks) || {};
   const events = ((brief && brief.calendar) || []).map((e, i) => {
     const s = Date.parse(e.start);
     const f = e.end ? Date.parse(e.end) : s + 30 * 60000;
-    return { ...e, id: e.id || 'ev-' + i, s, f, time: hhmm(e.start), ended: Number.isFinite(f) && f <= now };
+    const mark = marks[e.id] || null;
+    const checked = new Set((mark && mark.steps) || []);
+    const before = ((e.steps && e.steps.before) || []).map((st) => ({ ...st, done: !!st.done || checked.has(String(st.t || '')) }));
+    const ended = Number.isFinite(f) && f <= now;
+    // a meeting needs prep when the brief gave a prep line or Before steps (the explainer's contradiction: Before steps
+    // with no prep line read "Nothing to prepare" while the Agenda counted them as prep left)
+    const needsPrep = !ended && (!!e.prep || before.length > 0);
+    const st = mark && mark.state;
+    const group = !needsPrep ? null : st === 'done' || st === 'dismissed' ? 'done' : st === 'snoozed' ? 'later' : 'needs';
+    return { ...e, id: e.id || 'ev-' + i, s, f, time: hhmm(e.start), ended, mark, before, needsPrep, group };
   }).sort((a, b) => a.s - b.s);
   const settings = (d && d.settings) || null;
   const scopes = (settings && settings.scopes) || {};
@@ -176,6 +190,13 @@ function model(d, view) {
   const repos = (d && Array.isArray(d.repos)) ? d.repos : [];
   const repoName = (id) => { const r = repos.find((x) => x.id === id); return r ? r.name : id; };
   for (const j of jobs) j.repo = itemRepos[j.id] || null;
+  // the PM's marks (today-act-prepare, PRD M1 to M6): a job the PM owns leaves Needs you when it is done, snoozed, held
+  // or not the PM's; a snooze or hold whose time has passed comes back as open (the server reads it so)
+  for (const j of jobs) {
+    j.mark = marks[j.id] || null;
+    const st = j.mark && j.mark.state;
+    if (j.status === 'you' && st) j.group = { done: 'done', dismissed: 'done', snoozed: 'later', waiting: 'waiting' }[st] || j.group;
+  }
   for (const g of digests) g.repo = placeRepo(g.source, g.name);
   const v = view || {};
   const narrow = !v.all && !!v.here;
@@ -193,8 +214,9 @@ function model(d, view) {
     readFailed: (d && d.read_failed) || null,
     free: plan && plan.time ? plan.time.free_minutes : null,
     maxGoals: (d && d.max_goals) || 7,
-    needs: shownJobs.filter((j) => j.group === 'needs').length,
-    done: shownJobs.filter((j) => j.group === 'done').length,
+    preps: events.filter((e) => e.needsPrep),
+    needs: shownJobs.filter((j) => j.group === 'needs').length + events.filter((e) => e.group === 'needs').length,
+    done: shownJobs.filter((j) => j.group === 'done').length + events.filter((e) => e.group === 'done').length,
   };
 }
 
@@ -226,7 +248,7 @@ function statusPill(j) {
   const map = {
     notStarted: [s.notStarted, ''], waiting: [s.waiting, ''], working: [s.working, 'info'], sending: [s.sending, 'info'],
     review: [j.kind === 'auto' ? s.reviewAuto : s.review, 'purple'], sent: [s.sent, 'ok'], done: [s.done, 'ok'],
-    failed: [s.failed, 'bad'], you: [s.you, 'warn'],
+    failed: [s.failed, 'bad'],
   };
   const [t, tone] = map[j.status] || [j.status, ''];
   return pill(t, tone, { 'data-day-status': j.status });
@@ -306,6 +328,48 @@ async function decide(ws, task, action, note) {
   load(ws);
 }
 
+/* The PM's marks (today-act-prepare, PRD M1 to M6). Every press but a step check says what it did, with Undo: the
+ * answer carries the mark before the press, and Undo puts it back. */
+async function markPress(ws, id, op, said) {
+  const key = 'mark:' + id;
+  if (ui.busy.has(key)) return;
+  ui.busy.add(key); rerender();
+  const r = await pmPost('/api/proactive/day/mark', { id, ...op });
+  ui.busy.delete(key);
+  if (r && r.ok) {
+    if (op.action !== 'step') ui.holding = null;
+    if (said) toast({ text: said, actionLabel: A.undo, onAction: () => undoMark(ws, id, r.prev) });
+  } else toast({ text: (op.action === 'step' ? A.stepFailed : D.refused)((r && r.error) || D.unreached), tone: 'destructive' });
+  rerender();
+  load(ws);
+}
+async function undoMark(ws, id, prev) {
+  const r = await pmPost('/api/proactive/day/mark', { id, action: 'restore', mark: prev === undefined ? null : prev });
+  toast(r && r.ok ? { text: A.undone } : { text: D.refused((r && r.error) || D.unreached), tone: 'destructive' });
+  load(ws);
+}
+/** "Have the agent draft it" (PRD C2): one briefed task for this job; the job then shows the draft to approve. */
+async function sendPress(ws, j, body, to) {
+  const key = 'send:' + j.id;
+  if (ui.busy.has(key)) return;
+  ui.busy.add(key); rerender();
+  const r = await pmPost('/api/proactive/day/send', { item: j.id, ws, ...body });
+  ui.busy.delete(key);
+  if (r && r.ok) { ui.compose.delete(j.id); ui.verdict.delete(j.id); toast({ text: A.sendStarted(to) }); } else toast({ text: D.refused((r && r.error) || D.unreached), tone: 'destructive' });
+  rerender();
+  load(ws);
+}
+async function draftPress(ws, j) {
+  const key = 'draft:' + j.id;
+  if (ui.busy.has(key)) return;
+  ui.busy.add(key); rerender();
+  const r = await pmPost('/api/proactive/day/draft', { item: j.id, ws });
+  ui.busy.delete(key);
+  toast(r && r.ok ? { text: A.draftStarted } : { text: D.refused((r && r.error) || D.unreached), tone: 'destructive' });
+  rerender();
+  load(ws);
+}
+
 async function setSettings(ws, patch) {
   const r = await pmPost('/api/proactive/settings', patch);
   if (!r || r.ok === false) { toast({ text: D.refused((r && r.error) || D.unreached), tone: 'destructive' }); return false; }
@@ -421,7 +485,11 @@ function jobRow(ctx, j) {
   const n = j.goal ? ctx.m.goalNo.get(j.goal) : null;
   const sub = j.status === 'failed' && j.task && j.task.error ? j.task.error
     : [j.item && j.item.where, srcName(j.source)].filter(Boolean).join(' · ');
-  return rowBtn(ctx, 'job', j.id, { lead: n ? D.pill.goal(n) : '·', title: j.title, meta: sub, trail: el('span', { class: 'td-day__chips' }, repoTag(ctx.m, j.repo), statusPill(j)),
+  const mine = j.status === 'you';
+  const due = mine && j.item && j.item.due ? Date.parse(j.item.due) : NaN;
+  const meta = mine && j.mark && j.mark.state === 'waiting' ? `${A.hold.replace('…', '')} ${j.mark.on}` : sub;
+  return rowBtn(ctx, 'job', j.id, { lead: mine ? verbChip(verbOf(j.item)) : n ? D.pill.goal(n) : '·', title: j.title, meta,
+    trail: el('span', { class: 'td-day__chips' }, repoTag(ctx.m, j.repo), mine ? dueChip(ctx.m, j.mark, due, false) : statusPill(j)),
     dot: j.isNew && !seen.has(j.id) ? el('span', { class: 'td-day__newdot', 'data-day': 'new', role: 'img', 'aria-label': D.newItem }) : null });
 }
 
@@ -438,18 +506,38 @@ function owedItems(owed) {
   });
 }
 
+/** A meeting to prepare for, as a row of the jobs (PRD D4): it selects the meeting. */
+function prepRow(ctx, e) {
+  const total = e.before.length; const d = e.before.filter((x) => x.done).length;
+  return rowBtn(ctx, 'event', e.id, { lead: verbChip('prepare'), title: e.title, meta: [total ? A.readiness(d, total) : null, e.with || null].filter(Boolean).join(' · '),
+    trail: dueChip(ctx.m, e.mark, e.s, true) }, { 'data-day-prep': e.id });
+}
+
 function owedRow(ctx, o) {
-  return rowBtn(ctx, 'owed', o.id, { lead: '·', title: o.title, meta: o.meta, trail: pill(D.status2.you, 'warn') });
+  return rowBtn(ctx, 'owed', o.id, { lead: '·', title: o.title, meta: o.meta, trail: pill(A.chip.today, 'warn', { 'data-day-status': 'you' }) });
 }
 
+// Needs you holds only what the PM can do now (PRD D1): snoozed, held and done items fold into groups of their own.
+const JOB_GROUPS = ['needs', 'later', 'waiting', 'working', 'done', 'worth'];
+const FOLDED = new Set(['later', 'waiting', 'done']);
 function jobsPanel(ctx) {
   const { m } = ctx;
   const owed = ctx.owed;
-  if (!m.jobs.length && !owed.length) return panel('jobs', null, note(m.run && m.stage === 'reading' ? D.readingJobs : D.noJobs, { 'data-day': 'no-jobs' }));
-  const groups = ['needs', 'working', 'done', 'worth'].map((g) => [g, m.jobs.filter((j) => j.group === g)]).filter(([g, l]) => l.length || (g === 'needs' && owed.length));
-  return panel('jobs', D.jobsCount(m.needs + owed.length, m.done), ...groups.map(([g, l]) => el('div', { class: 'td-day__group', 'data-day-group': g },
-    el('div', { class: 'td-day__gh' }, D.groups[g], pill(String(l.length + (g === 'needs' ? owed.length : 0)), '')),
-    el('ul', { class: 'td-day__rows', 'data-day-list': 'jobs-' + g }, ...l.map((j) => jobRow(ctx, j)), ...(g === 'needs' ? owed.map((o) => owedRow(ctx, o)) : [])))));
+  if (!m.jobs.length && !owed.length && !m.preps.length) return panel('jobs', null, note(m.run && m.stage === 'reading' ? D.readingJobs : D.noJobs, { 'data-day': 'no-jobs' }));
+  const groups = JOB_GROUPS.map((g) => [g, m.jobs.filter((j) => j.group === g), m.preps.filter((e) => e.group === g)])
+    .filter(([g, l, p]) => l.length || p.length || (g === 'needs' && owed.length));
+  return panel('jobs', D.jobsCount(m.needs + owed.length, m.done), ...groups.map(([g, l, p]) => {
+    const count = l.length + p.length + (g === 'needs' ? owed.length : 0);
+    const label = A.groups[g] && g !== 'done' ? A.groups[g] : g === 'done' ? A.groups.done : D.groups[g];
+    const foldable = FOLDED.has(g);
+    const shut = foldable && !ui.groupsOpen.has(g);
+    const head = foldable
+      ? button({ label: `${label} · ${count}`, variant: 'ghost', size: 'sm', iconEnd: shut ? 'chevron-right' : 'chevron-down', attrs: { class: 'td-day__fold-head', 'aria-expanded': shut ? 'false' : 'true', 'data-day-fold': g },
+        onClick: () => { if (shut) ui.groupsOpen.add(g); else ui.groupsOpen.delete(g); rerender(); } })
+      : el('div', { class: 'td-day__gh' }, label, pill(String(count), ''));
+    return el('div', { class: 'td-day__group', 'data-day-group': g }, head,
+      shut ? null : el('ul', { class: 'td-day__rows', 'data-day-list': 'jobs-' + g }, ...p.map((e) => prepRow(ctx, e)), ...l.map((j) => jobRow(ctx, j)), ...(g === 'needs' ? owed.map((o) => owedRow(ctx, o)) : [])));
+  }));
 }
 
 /* The coordinator's view of the run: what every agent job came back with, in one place. The server runs the jobs as one
@@ -489,7 +577,8 @@ function goalsPanel(ctx) {
 
 function mentionStatus(j) {
   if (j.group === 'done') return pill(D.status2.handled, 'ok');
-  if (j.status === 'you') return j.item && j.item.reply_needed ? pill(D.status2.replyNeeded, 'warn') : pill(D.status2.you, 'warn');
+  if (j.status === 'you' && j.mark && j.mark.state) return dueChip({ now: Date.now() }, j.mark, NaN, false);
+  if (j.status === 'you') return j.item && j.item.reply_needed ? pill(D.status2.replyNeeded, 'warn', { 'data-day-status': 'you' }) : verbChip(verbOf(j.item));
   return statusPill(j);
 }
 
@@ -523,6 +612,243 @@ function mentionsPanel(ctx) {
   return panel('mentions', m.mentions.length ? D.mentionsCount(m.mentions.length, need) : null, mtabs, rows, dig);
 }
 
+/* ── act and prepare (initiative today-act-prepare) ─────────────────────────────────────────────────────────────── */
+
+const MIN_MS = 60000;
+const clockAt = (ms, hh, mm) => { const d = new Date(ms); return new Date(d.getFullYear(), d.getMonth(), d.getDate(), hh, mm).getTime(); };
+const sameDay = (a, b) => new Date(a).toDateString() === new Date(b).toDateString();
+const verbOf = (it) => (it && A.verb[it.verb] ? it.verb : it && it.reply_needed ? 'reply' : 'do');
+function verbChip(verb) {
+  return el('span', { class: 'td-day__verb', 'data-verb': verb, 'data-day': 'verb' }, A.verb[verb] || A.verb.do);
+}
+/** The chip at the end of a row the PM acts on: where its mark left it, else its due time, coloured by time left. */
+function dueChip(m, mark, due, prep) {
+  const st = mark && mark.state;
+  const at = (v) => hhmm(v);
+  if (st === 'snoozed') return pill(A.back(at(mark.until)), '', { 'data-day-status': 'snoozed' });
+  if (st === 'waiting') return pill(A.check(at(mark.until)), '', { 'data-day-status': 'waiting' });
+  if (st === 'done') return pill(prep ? A.chip.ready : A.chip.done, 'ok', { 'data-day-status': 'marked-done' });
+  if (st === 'dismissed') return pill(prep ? A.chip.skipped : A.chip.dismissed, '', { 'data-day-status': 'dismissed' });
+  const status = prep ? 'prepare' : 'you';
+  if (!Number.isFinite(due)) return pill(A.chip.today, 'warn', { 'data-day-status': status });
+  const left = Math.round((due - m.now) / MIN_MS);
+  return pill(prep ? A.at(at(due)) : A.by(at(due)), left < 60 ? 'bad' : left < 180 ? 'warn' : '', { 'data-day-status': status, title: A.left(left) });
+}
+/** The times a snooze can take, later today: [label, ms]. */
+function snoozeTimes(m, { due, start }) {
+  const out = [];
+  const add = (label, t) => { if (Number.isFinite(t) && t > m.now + 5 * MIN_MS && sameDay(t, m.now) && !out.some((x) => x[1] === t)) out.push([label, t]); };
+  if (Number.isFinite(start)) { add(A.snoozeTo.m30, start - 30 * MIN_MS); add(A.snoozeTo.m15, start - 15 * MIN_MS); return out; }
+  add(A.snoozeTo.hour, m.now + 60 * MIN_MS);
+  if (Number.isFinite(due)) add(A.snoozeTo.due, due - 30 * MIN_MS);
+  add(A.snoozeTo.later, clockAt(m.now, 16, 0));
+  add(A.snoozeTo.end, clockAt(m.now, 17, 30));
+  return out;
+}
+/** The banner of a marked item: what the mark is, and the press that undoes it. */
+function markBanner(ctx, id, mark, prep) {
+  if (!mark) return null;
+  if (mark.back) return note(A.state.back, { 'data-day': 'mark-back' });
+  const st = mark.state;
+  if (!st) return null;
+  const text = st === 'snoozed' ? A.state.snoozed(hhmm(mark.until)) : st === 'waiting' ? A.state.waiting(mark.on, hhmm(mark.until))
+    : st === 'done' ? (prep ? A.state.ready : A.state.done)(hhmm(mark.at)) : A.state.dismissed(A.why[mark.why] || mark.why);
+  return el('div', { class: 'td-day__mark', 'data-day': 'mark', 'data-day-mark-state': st }, el('span', null, text),
+    button({ label: st === 'done' ? A.reopen : A.bringBack, size: 'sm', attrs: { 'data-day-mark': 'reopen' }, onClick: () => markPress(ctx.ws, id, { action: 'reopen' }, A.did.reopen) }));
+}
+/** The steps the PM checks off. A step the brief already marked done stays done. A step that reads a source shows what
+ *  the source says under it (PRD X2), and a note step holds the PM's own note (PRD F3), so no other file needs opening. */
+function stepChecks(ctx, id, steps, { refs = [], mark = null } = {}) {
+  if (!steps.length) return null;
+  return el('ul', { class: 'td-day__steps2', 'data-day': 'steps' }, ...steps.map((st) => {
+    const f = field({ kind: 'check', label: st.t, value: !!st.done, attrs: { 'data-day-step': st.t, disabled: st.fixed ? true : null },
+      onCommit: (v) => markPress(ctx.ws, id, { action: 'step', step: st.t, done: !!v }) });
+    const r = Number.isInteger(st.ref) ? refs[st.ref] : null;
+    return el('li', { class: 'td-day__step2', 'data-done': st.done ? 'true' : 'false' },
+      el('div', { class: 'td-day__steprow' }, f, st.who ? el('span', { class: 'td-day__who' }, D.who[st.who] || st.who) : null),
+      r ? refBlock(r, { open: !st.done, step: true }) : null,
+      st.note ? noteBox(ctx, id, mark) : null);
+  }));
+}
+/** One source in a few lines, in the card: what it says, and a small link to the source for when the PM wants more. */
+function refBlock(r, { open, step } = {}) {
+  return el('details', { class: 'td-day__ref', 'data-day': 'ref', open: open ? true : null },
+    el('summary', null, el('span', null, (step ? A.refRead : '') + r.label), r.source ? el('span', { class: 'td-day__src' }, srcName(r.source)) : null),
+    el('ul', { class: 'td-day__reflines' }, ...(r.lines || []).map((l) => el('li', null, l))),
+    isUrl(r.link) ? extLink(A.refOpen, r.link, { 'data-day-link': 'ref' }) : null);
+}
+/** The sources no step names, under one heading. */
+function refsBlock(refs, steps) {
+  const named = new Set(steps.map((st) => st.ref).filter(Number.isInteger));
+  const rest = refs.filter((_, i) => !named.has(i));
+  return rest.length ? el('div', { class: 'td-day__phase', 'data-day': 'refs' }, el('h4', null, A.refsTitle), ...rest.map((r) => refBlock(r, { open: false }))) : null;
+}
+/** The conversation, as the brief read it: at most 4 messages, the last one first in weight. */
+function threadBlock(thread) {
+  if (!Array.isArray(thread) || !thread.length) return null;
+  return el('div', { class: 'td-day__phase td-day__thread', 'data-day': 'thread' }, el('h4', null, A.threadTitle),
+    ...thread.map((x, i) => el('div', { class: 'td-day__msg' + (i === thread.length - 1 ? ' td-day__msg--last' : '') },
+      el('div', { class: 'td-day__src' }, [x.who, x.at].filter(Boolean).join(' · ')), el('p', null, x.text))));
+}
+/** The PM's own note on a meeting, saved with its marks when the box loses focus. Nothing is sent. */
+function noteBox(ctx, id, mark) {
+  const f = field({ label: A.noteTitle, kind: 'textarea', value: (mark && mark.note) || '', placeholder: A.noteHint, attrs: { maxlength: '1000', 'data-day-input': 'note' },
+    onCommit: (v) => markPress(ctx.ws, id, { action: 'note', text: v }, A.noteSaved) });
+  return el('div', { class: 'td-day__notebox', 'data-day': 'note' }, f, el('span', { class: 'td-day__dim' }, A.noteStays));
+}
+/** Where the PM's own answer goes, and the box to write it in (PRD F1, F2). The press is the approval: the agent posts
+ *  exactly this text, as the PM, to the place the item names. */
+function composer(ctx, j, verb) {
+  const it = j.item || {};
+  const sd = it.send || {};
+  const to = sd.to || it.where || srcName(j.source);
+  const review = !!sd.review;
+  const busy = ui.busy.has('send:' + j.id);
+  const f = field({ label: A.compose[verb] || A.compose.reply, kind: 'textarea', value: ui.compose.get(j.id) || '', placeholder: A.composeHint,
+    attrs: { maxlength: '4000', rows: '4', 'data-day-input': 'compose' } });
+  const ta = f.control;
+  ta.addEventListener('input', () => { ui.compose.set(j.id, ta.value); });
+  const chips = (sd.suggest || []).length ? el('div', { class: 'td-day__chipsrow', 'data-day': 'suggest' }, el('span', { class: 'td-day__dim' }, A.startFrom),
+    ...sd.suggest.map((t, i) => button({ label: t.length > 60 ? t.slice(0, 57) + '…' : t, size: 'sm', variant: 'ghost', attrs: { 'data-day-suggest': String(i), title: t },
+      onClick: () => { ta.value = t; ui.compose.set(j.id, t); ta.focus(); } }))) : null;
+  const verdict = ui.verdict.get(j.id) || null;
+  const toggle = review ? tabs({ variant: 'segmented', role: 'radiogroup', ariaLabel: A.verdictLabel, value: verdict, attrs: { 'data-day': 'verdict' },
+    items: [{ id: 'approve', label: A.verdict.approve }, { id: 'changes', label: A.verdict.changes }], onChange: (k) => { ui.verdict.set(j.id, k); rerender(); } }) : null;
+  const go = () => {
+    const text = (ui.compose.get(j.id) || ta.value || '').trim();
+    if (!text) { toast({ text: A.sendNeed, tone: 'destructive' }); return; }
+    if (review && !verdict) { toast({ text: A.verdictNeed, tone: 'destructive' }); return; }
+    sendPress(ctx.ws, j, { text, verdict: review ? verdict : undefined }, to);
+  };
+  return el('div', { class: 'td-day__compose', 'data-day': 'compose' }, f, chips, toggle,
+    el('div', { class: 'td-day__acts' }, button({ label: review ? A.postReview(to) : A.sendTo(to), variant: 'primary', size: 'sm', iconEnd: 'arrow-right', disabled: busy, attrs: { 'data-day-act': 'send' }, onClick: go })),
+    el('span', { class: 'td-day__dim' }, A.sendNote));
+}
+/** The four presses of a job (Mark done, Snooze, Waiting on…, Not mine) or the three of a meeting (Mark ready, Remind
+ *  me, Skip prep). `strong` makes the first one the primary button: every step is checked. */
+function marksBar(ctx, { id, title, kind, due, start, strong }) {
+  const { m, ws } = ctx;
+  const prep = kind === 'event';
+  const busy = ui.busy.has('mark:' + id);
+  const st = (m.d && m.d.marks && m.d.marks[id] && m.d.marks[id].state) || null;
+  const times = snoozeTimes(m, { due, start });
+  const kids = [];
+  if (st !== 'done') kids.push(button({ label: prep ? A.ready : A.done, variant: strong ? 'primary' : 'outline', size: 'sm', icon: 'check', disabled: busy, attrs: { 'data-day-mark': 'done' },
+    onClick: () => markPress(ws, id, { action: 'done' }, (prep ? A.did.ready : A.did.done)(title)) }));
+  if (times.length) {
+    const b = button({ label: prep ? A.remind : A.snooze, size: 'sm', iconEnd: 'chevron-down', disabled: busy, attrs: { 'data-day-mark': 'snooze', 'aria-haspopup': 'menu' },
+      onClick: () => menu({ anchor: b, ariaLabel: prep ? A.remind : A.snooze, items: times.map(([l, t]) => ({ label: `${l} · ${hhmm(t)}`, attrs: { 'data-day-snooze': hhmm(t) },
+        onSelect: () => markPress(ws, id, { action: 'snooze', until: new Date(t).toISOString() }, A.did.snooze(hhmm(t))) })) }) });
+    kids.push(b);
+  }
+  if (!prep) kids.push(button({ label: A.hold, size: 'sm', disabled: busy, attrs: { 'data-day-mark': 'hold', 'aria-expanded': ui.holding === id ? 'true' : 'false' },
+    onClick: () => { ui.holding = ui.holding === id ? null : id; ui.holdDraft = { who: '', when: 'h2' }; rerender(); } }));
+  const reasons = prep ? ['nothing', 'elsewhere'] : ['no-action', 'someone-else', 'done-elsewhere'];
+  if (st !== 'dismissed') {
+    const nb = button({ label: prep ? A.skip : A.notMine, size: 'sm', variant: 'ghost', iconEnd: 'chevron-down', disabled: busy, attrs: { 'data-day-mark': 'dismiss', 'aria-haspopup': 'menu' },
+      onClick: () => menu({ anchor: nb, ariaLabel: prep ? A.skip : A.notMine, items: reasons.map((w) => ({ label: A.why[w], attrs: { 'data-day-why': w },
+        onSelect: () => markPress(ws, id, { action: 'dismiss', why: w }, A.did.dismiss(A.why[w])) })) }) });
+    kids.push(el('span', { class: 'td-day__grow', 'aria-hidden': 'true' }), nb);
+  }
+  return [el('div', { class: 'td-day__marks', 'data-day': 'marks', role: 'group', 'aria-label': title }, ...kids), ui.holding === id && !prep ? holdForm(ctx, id) : null];
+}
+function holdForm(ctx, id) {
+  const { m } = ctx;
+  const h2 = m.now + 120 * MIN_MS; const end = clockAt(m.now, 17, 30);
+  const opts = [['h2', A.holdWhenOpts.h2, h2], ['end', A.holdWhenOpts.end, end]].filter(([, , t]) => t > m.now && sameDay(t, m.now));
+  if (!opts.some((o) => o[0] === ui.holdDraft.when) && opts.length) ui.holdDraft.when = opts[0][0];
+  const who = field({ label: A.holdWho, value: ui.holdDraft.who, placeholder: A.holdHint, attrs: { maxlength: '80', 'data-day-input': 'hold-who' } });
+  who.control.addEventListener('input', () => { ui.holdDraft.who = who.control.value; });
+  const go = () => {
+    const v = (ui.holdDraft.who || '').trim();
+    const o = opts.find((x) => x[0] === ui.holdDraft.when);
+    if (!v || v.length > 80) { toast({ text: A.holdNeed, tone: 'destructive' }); return; }
+    if (!o) return;
+    markPress(ctx.ws, id, { action: 'hold', on: v, until: new Date(o[2]).toISOString() }, A.did.hold(v, hhmm(o[2])));
+  };
+  return el('div', { class: 'td-day__revise', 'data-day': 'hold' }, who,
+    opts.length ? el('div', { class: 'td-day__ch' }, el('span', null, A.holdWhen), tabs({ variant: 'segmented', role: 'radiogroup', ariaLabel: A.holdWhen, value: ui.holdDraft.when,
+      attrs: { 'data-day': 'hold-when' }, items: opts.map(([k, l, t]) => ({ id: k, label: `${l} (${hhmm(t)})` })), onChange: (k) => { ui.holdDraft.when = k; rerender(); } })) : null,
+    el('div', { class: 'td-day__acts' }, button({ label: A.holdGo, variant: 'primary', size: 'sm', disabled: !opts.length, attrs: { 'data-day-act': 'hold-go' }, onClick: go }),
+      button({ label: D.cancel, size: 'sm', variant: 'ghost', onClick: () => { ui.holding = null; rerender(); } })));
+}
+const open0 = (mark) => !mark || !mark.state;
+/** A link drawn as the primary button of a card. */
+function primaryLink(label, href, attrs) {
+  return extLink(label, href, { class: 'td-day__a td-day__a--primary', ...(attrs || {}) });
+}
+
+/** The card of a job only the PM can do (PRD A1, C1, C2, M1, D3): the verb and one sentence, From and Why now, the
+ *  steps, the button that fits, the marks, and the rest of the context folded. */
+function actCard(ctx, j) {
+  const { m } = ctx;
+  const it = j.item || {};
+  const mark = j.mark || null;
+  const verb = verbOf(it);
+  const todo = it.todo || it.how || it.ask || null;
+  const checked = new Set((mark && mark.steps) || []);
+  const steps = (Array.isArray(it.steps) ? it.steps : []).map((x) => (typeof x === 'string' ? { t: x } : x)).map((x) => ({ ...x, done: checked.has(x.t) }));
+  const refs = Array.isArray(it.refs) ? it.refs : [];
+  const canSend = open0(mark) && it.owner === 'pm' && isUrl(j.link) && (!!it.send || ['reply', 'review', 'decide', 'sign-off'].includes(verb));
+  const due = it.due ? Date.parse(it.due) : NaN;
+  const n = j.goal ? m.goalNo.get(j.goal) : null;
+  const open = !mark || !mark.state;
+  const allDone = steps.length > 0 && steps.every((x) => x.done);
+  const reply = typeof it.reply_needed === 'boolean' ? (it.reply_needed ? D.yes : D.no) : null;
+  const more = dl([[D.about, it.about || null], [D.ask, it.ask || null], [D.reply, reply], [D.how, todo === it.how ? null : it.how || null]]);
+  return el('article', { class: 'td-day__job td-day__job--act', 'data-day-job': j.id, 'data-day-act-card': verb },
+    el('div', { class: 'td-day__jobtop' }, el('span', { class: 'td-day__chips' }, verbChip(verb), el('span', { class: 'td-day__src' }, [srcName(j.source), n ? D.pill.goal(n) : null].filter(Boolean).join(' · '))),
+      dueChip(m, mark, due, false)),
+    el('h3', { class: 'td-day__acth' }, j.title),
+    todo ? el('p', { class: 'td-day__todo', 'data-day': 'todo' }, todo) : null,
+    markBanner(ctx, j.id, mark, false),
+    dl([[D.where, A.from(it.who, it.where)], [D.why, it.why_now || null]]),
+    threadBlock(it.thread),
+    steps.length ? el('div', { class: 'td-day__phase' }, el('h4', null, A.howTitle(steps.filter((x) => x.done).length, steps.length)), stepChecks(ctx, j.id, steps, { refs })) : null,
+    refsBlock(refs, steps),
+    canSend ? composer(ctx, j, verb) : null,
+    open ? el('div', { class: 'td-day__acts', 'data-day': 'cta' },
+      (canSend ? extLink : primaryLink)(A.open[j.source] || A.openLink, j.link, { 'data-day-link': 'conversation' }),
+      j.item && j.item.owner === 'pm' ? button({ label: A.draft, size: 'sm', disabled: ui.busy.has('draft:' + j.id), attrs: { 'data-day-act': 'draft' }, onClick: () => draftPress(ctx.ws, j) }) : null) : null,
+    marksBar(ctx, { id: j.id, title: j.title, kind: 'item', due, strong: allDone }),
+    more ? el('details', { class: 'td-day__fold', 'data-day': 'more' }, el('summary', null, A.more), more, note(A.readOnly)) : null);
+}
+
+/** Free minutes from now to the meeting's start, less the other meetings in between. */
+function freeBefore(m, e) {
+  if (!Number.isFinite(e.s) || e.s <= m.now) return 0;
+  let busy = 0;
+  for (const o of m.events) {
+    if (o.id === e.id) continue;
+    const a = Math.max(o.s, m.now); const b = Math.min(o.f, e.s);
+    if (b > a) busy += b - a;
+  }
+  return Math.max(0, Math.round((e.s - m.now - busy) / MIN_MS));
+}
+
+/** A meeting's prep (PRD A1, C1, M1, M6, D2): the verb and the prep line, how ready the PM is, the Before steps to
+ *  check off, the button that fits, and the marks. */
+function prepBlock(ctx, e) {
+  const { m } = ctx;
+  const steps = e.before.map((st) => ({ t: String(st.t || ''), who: st.who, done: st.done, ref: st.ref, note: !!st.note, fixed: !!(e.steps && e.steps.before && e.steps.before.find((x) => x.t === st.t && x.done)) }));
+  const refs = Array.isArray(e.refs) ? e.refs : [];
+  const d = steps.filter((x) => x.done).length; const total = steps.length;
+  const left = total - d;
+  const free = freeBefore(m, e);
+  const fit = !total ? null : !left ? A.fit.ok : free >= left * 15 ? A.fit.time(left, free) : A.fit.short(left, free);
+  const open = !e.mark || !e.mark.state;
+  const link = Array.isArray(e.links) ? e.links.find((l) => isUrl(l.url)) : null;
+  return el('div', { class: 'td-day__prep', 'data-day': 'prep' },
+    el('div', { class: 'td-day__jobtop' }, verbChip('prepare'), dueChip(m, e.mark, e.s, true)),
+    e.prep ? el('p', { class: 'td-day__todo', 'data-day': 'todo' }, e.prep) : null,
+    markBanner(ctx, e.id, e.mark, true),
+    total ? el('div', { class: 'td-day__ready', 'data-day': 'readiness' }, meter({ done: d, total, label: A.readiness(d, total) }), fit ? el('span', { class: 'td-day__dim' }, fit) : null) : null,
+    total ? el('div', { class: 'td-day__phase' }, el('h4', null, A.beforeTitle(e.time)), stepChecks(ctx, e.id, steps, { refs, mark: e.mark })) : null,
+    refsBlock(refs, steps),
+    open && link && left ? el('div', { class: 'td-day__acts', 'data-day': 'cta' }, primaryLink((link.label || link.url) + ' ↗', link.url, { 'data-day-link': 'prep' })) : null,
+    marksBar(ctx, { id: e.id, title: e.title, kind: 'event', start: e.s, strong: total > 0 && !left }));
+}
+
 /* ── the right column ─────────────────────────────────────────────────────────────────────────────────────────── */
 
 function dhead(kind, title) {
@@ -563,27 +889,31 @@ function eventDetail(ctx, e) {
     el('p', { class: 'td-day__dim td-day__mono' }, `${e.time}${e.end ? '–' + hhmm(e.end) : ''}${e.with ? ' · ' + e.with : ''}${e.ended ? ' · ' + D.ended : ''}`),
     e.with ? peopleLinks(ctx.ws, e.with, { 'data-day': 'people' }) : null,
     e.purpose ? el('p', null, el('b', null, D.purpose + ': '), e.purpose) : null,
-    e.prep ? el('p', null, el('b', null, D.prep + ': '), e.prep) : null,
+    e.needsPrep ? prepBlock(ctx, e) : null,
     ini ? el('div', { class: 'td-day__ini', 'data-day': 'initiative' }, el('span', null, D.initiative + ': ', el('b', { class: 'td-day__mono' }, ini.id), ini.why ? el('span', { class: 'td-day__dim' }, ' (' + D.suggested(ini.why) + ')') : null),
       ctx.openIni ? button({ label: D.openInitiative, size: 'sm', variant: 'ghost', attrs: { 'data-day-act': 'open-initiative' }, onClick: () => ctx.openIni(ini.id) }) : null) : null,
     tie,
     memoryBlock(e.id),
-    !e.ended ? el('div', { class: 'td-day__acts' }, e.prep ? pill(D.needPrep, 'warn') : steps.before && steps.before.length ? pill(D.nothingToPrep, 'ok') : null) : null,
     after,
     notesBlock(e, { ws: ctx.ws, initiative: ini }),
-    !e.ended ? [list(D.phases.before, (steps.before || []).map(stepItem)), list(D.phases.during, (steps.during || []).map(stepItem)), list(D.phases.after, (steps.after || []).map(stepItem)), mailBlock] : null,
+    // with prep, the Before steps are the checklist above; During, After and the mail fold away (PRD D2)
+    !e.ended && e.needsPrep && ((steps.during || []).length || (steps.after || []).length || mailBlock)
+      ? el('details', { class: 'td-day__fold', 'data-day': 'more' }, el('summary', null, A.moreMeeting((steps.during || []).length, (steps.after || []).length)),
+        list(D.phases.during, (steps.during || []).map(stepItem)), list(D.phases.after, (steps.after || []).map(stepItem)), mailBlock) : null,
+    !e.ended && !e.needsPrep ? [list(D.phases.during, (steps.during || []).map(stepItem)), list(D.phases.after, (steps.after || []).map(stepItem)), mailBlock] : null,
     Array.isArray(e.links) && e.links.length ? el('div', { class: 'td-day__acts', 'data-day': 'links' }, ...e.links.map((l) => extLink((l.label || l.url) + ' ↗', l.url))) : null,
   ];
 }
 
 function jobCard(ctx, j) {
+  if (j.status === 'you') return actCard(ctx, j);
   const { m, ws } = ctx;
   const t = j.task;
   const it = j.item || {};
   const n = j.goal ? m.goalNo.get(j.goal) : null;
   const busy = t && ui.busy.has(t.id);
   const revs = t && Array.isArray(t.revisions) ? t.revisions.length : 0;
-  const statusNote = { notStarted: D.notTask, waiting: D.waitingNote, working: D.workingNote, sending: D.sendingNote, you: D.youNote }[j.status]
+  const statusNote = { notStarted: D.notTask, waiting: D.waitingNote, working: D.workingNote, sending: D.sendingNote }[j.status]
     || (j.status === 'done' && j.kind === 'auto' ? D.autoNote : null);
   const draft = t && t.draft ? el('div', { class: 'td-day__draftbox', 'data-day': 'draft' }, el('h4', null, D.draft),
     t.draft.summary ? el('p', null, t.draft.summary) : null,
@@ -902,6 +1232,6 @@ export function daySection({ ws, setState, openIni, owed, here, all } = {}) {
 
 export function daySig(ws) {
   const c = cache.get(ws) || {};
-  return JSON.stringify([forced, ui.open, ui.sel, ui.mtab, ui.openSrc, ui.showIgn, ui.showIgnDigests, [...ui.revising], [...ui.busy], c.error, runs.get(ws) || null, [...seen].length])
+  return JSON.stringify([forced, ui.open, ui.sel, ui.mtab, ui.openSrc, ui.showIgn, ui.showIgnDigests, [...ui.revising], [...ui.busy], [...ui.groupsOpen], ui.holding, ui.holdDraft.when, [...ui.verdict], c.error, runs.get(ws) || null, [...seen].length])
     + dataSig(c.data) + goalsSig() + agendaSig();
 }

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

@@ -1,4 +1,4 @@
-/* pm/view-notes.js — the Notes view tab: one meeting on one screen (meeting-notes, Runs 1 to 5).
+/* pm/view-notes.js — the Notes view tab: one meeting on one screen (meeting-notes, Runs 1 to 6).
  *
  * The screen follows the simplified mockup the PM reviewed (prototype/meeting-notes):
  *   header      the title and the date, and one action: Listen; while listening a red dot, the time, the sources and Stop;
@@ -28,8 +28,10 @@
  * calendar) and which initiative it belongs to, and how that was set: from the calendar event, suggested from what was said,
  * or chosen by the PM. Change opens a sheet for each.
  *
- * IN THE EVENT'S DETAIL (Run 5). renderInline draws the same note inside a calendar event's detail (pm/notes-links.js), in
- * one column: the PM types and listens there without leaving the calendar. Open in Notes shows it on the full screen.
+ * MINIMIZED AT THE BOTTOM RIGHT (Run 6). Take notes on a calendar event starts listening at once (listenNow: no chooser) and
+ * keeps the note as a pill at the bottom right (pm/note-dock.js). The pill opens the note as a pop-up, which renderInline
+ * draws in one column. While the pop-up shows a note, the Notes tab says so and does not draw it a second time.
+ * Open in Notes shows it on the full screen.
  *
  * Reads and writes (lib/routes-notes.js). Notes live in the per-user runtime directory, never in a repository:
  *   GET  /api/notes · /api/notes/one?id=… · /api/notes/engine?ws=… · /api/notes/recording?id=… · /api/people?ws=…
@@ -67,7 +69,8 @@ let busy = '';
 let player = null;            // the replay: { id, bytes, el, playing }, kept across redraws so playback goes on
 let people = null;            // { ws, names } — the repository's people, offered in the line editor
 let pendingOpen = null;       // a note another page asked to open (openNote), selected at the next draw
-let inlineSwitch = null;      // the note an event's detail is switching to (renderInline), so a redraw does not start it twice
+let inlineSwitch = null;      // the note the pop-up is switching to (renderInline), so a redraw does not start it twice
+let popped = null;            // the note the pop-up shows (pm/note-dock.js), which the Notes tab then does not draw
 const LABELS = [['decision', 'Decision'], ['action', 'Action'], ['question', 'Question'], ['fact', 'Fact'], ['topic', 'Topic'], ['statement', 'Statement'], ['small talk', 'Small talk']];
 
 const nowClock = (iso) => { try { return new Date(iso).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' }); } catch { return ''; } };
@@ -1021,7 +1024,12 @@ export function renderBoard(inner, ctx) {
   if (banner) wrap.appendChild(el('div', { class: 'nt-banner' + (banner.tone === 'bad' ? ' nt-banner--bad' : ''), 'data-nt-banner': banner.tone, role: banner.tone === 'bad' ? 'alert' : 'status' }, banner.text));
   const n = currentId ? cache.get(currentId) : null;
   if (currentId && !n) { loadNote(ctx, currentId); wrap.appendChild(el('p', { class: 'nt-hint' }, 'reading the note …')); }
-  else if (!n) {
+  else if (n && popped === n.id) {
+    wrap.appendChild(el('div', { class: 'nt-start', 'data-nt-popped': '' },
+      el('h2', { class: 'nt-h' }, n.title || 'Untitled note'),
+      el('p', { class: 'nt-hint' }, 'This note is open in the pop-up at the bottom right.'),
+      button({ label: 'Show it here', variant: 'primary', onClick: () => openFull(ctx, n.id), attrs: { 'data-nt-unpop': '' } })));
+  } else if (!n) {
     wrap.appendChild(el('div', { class: 'nt-start' },
       el('h2', { class: 'nt-h' }, 'Notes'),
       el('p', { class: 'nt-hint', 'data-nt-about': '' }, 'Take notes in a meeting. PMOS listens on this machine, catches the decisions, actions and questions, and checks them against your repository. No audio leaves this machine, and notes are kept outside every repository.'),
@@ -1055,17 +1063,39 @@ function keepFocus() {
 }
 async function openFull(ctx, id) {
   await flushSave(ctx);
-  const c = await import('./panel-cockpit.js');
+  popped = null;
+  const [c, d] = await Promise.all([import('./panel-cockpit.js'), import('./note-dock.js')]);
+  d.minimize();
   pendingOpen = id;
   c.openView('notes');
 }
 
+/** The note the pop-up shows (pm/note-dock.js), or null. */
+export function setPopped(id) { popped = id || null; }
+/** The note's title as last read or typed, or ''. */
+export const titleOf = (id) => (editor && editor.id === id && editor.title.value.trim()) || ((cache.get(id) || {}).title) || '';
+/** When the note that is listening started, or null. */
+export const liveStarted = () => (audio && audio.state === 'on' ? audio.started : speech && speech.mode === 'record' && speech.state === 'on' ? speech.started : null);
+/** Stop the note that is listening, as its Stop does. */
+export const stopListening = (ctx) => stopRecording(ctx);
+/** Start listening on this note at once, with no chooser (Run 6, Take notes): the microphone and the meeting when Whisper is set
+ * up, else the microphone through the browser's on-device recognition. False when the note cannot listen (private, gone). */
+export async function listenNow(ctx, id) {
+  if (id !== currentId) await selectNote(ctx, id);
+  let n = cache.get(id);
+  if (!n) { await loadNote(ctx, id); n = cache.get(id); }
+  if (!n || n.private) return false;
+  const eng = engine && engine.ws === wsOf(ctx) && engine.whisper ? engine : await loadEngine(ctx);
+  if (eng.whisper && eng.whisper.ready) await startAudio(ctx, n, ['mic', 'meeting']); else await startSpeech(ctx, n, 'record');
+  return listeningId() === id;
+}
+
 /** The note that is listening now, or null. */
 export const listeningId = () => (audio && audio.id) || (speech && speech.mode === 'record' && (speech.state === 'on' || speech.state === 'checking') ? speech.id : null);
 
-/** One note drawn inside a calendar event's detail (meeting-notes Run 5): the same note, editor and listening as the Notes
- * tab, in one column, with Open in Notes for the full screen. It never stops a meeting that is being heard: when another note
- * is listening it draws nothing and returns false. */
+/** One note drawn in the pop-up (meeting-notes Run 6, pm/note-dock.js): the same note, editor and listening as the Notes tab,
+ * in one column, with Open in Notes for the full screen. It never stops a meeting that is being heard: when another note is
+ * listening it draws nothing and returns false. */
 export function renderInline(host, ctx, id) {
   if (ctx.FIXTURE) return false;
   const other = listeningId();