create-pmos 0.116.0 → 0.118.0

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

@@ -7,6 +7,9 @@
  *                              then Queue it (the shipped background prepare: one approval is one prompt hash)
  *   addGoal(ctx, text, ini)  → POST the add; true when the goal is on the list. While Today shows one repository, the
  *                              goal belongs to it (repo); the goal's detail can change that.
+ *   goalJobsBlock(ctx, g, n) → a goal's done when and jobs, with the add and link presses: the goal's detail and a meeting's
+ *                              detail draw the same block (initiative today-goals-jobs, PRD G3, A4)
+ *   jobsWithoutGoal(ctx)     → the end of the Goals section: every job of the day with no goal, each with the link control (G5)
  *   goalsSig()               → a string that changes whenever what this module draws changes on its own
  *
  * `ctx` is the day section's (today-day.js): { ws, m (the day model), select(type, id), reload(), rerender(), cur(type, id) }.
@@ -17,10 +20,16 @@ import { el } from './dom.js';
 import { button, field, badge, toast, row, meter } from './primitives.js';
 import { pmPost } from './http.js';
 import { COPY } from './today-copy.js';
+import { statusPill, whoActs, mark as whoMark, tagged, originOf, goalPicker, linkField } from './today-jobs.js';
 
 const G = COPY.goals;
 const D = COPY.day;
+const A = COPY.act;
+const MAX_JOBS = 12;   // the jobs the PM types on one goal (lib/goals.js)
 let draft = '';
+const ctxDraft = { done_when: '', anchor: '', due: '' };   // the "Add context" fields, kept while the section is redrawn
+let ctxOpen = false;
+const jobDrafts = new Map();   // goal id -> the text typed in its "Add a job" field
 let lastAdded = null;   // { key, at }: the text of the last goal sent, so a double commit adds it once
 const prepared = new Map();     // step ref -> { key, branch, item_id, prompt_sha, initiative_id, ws } (a plan shown, not yet queued)
 
@@ -31,10 +40,12 @@ async function press(ctx, body) {
   return true;
 }
 
-/** Add a goal. `ini` ties it to an initiative, so the brief's items and meetings of that initiative join it. */
-export function addGoal(ctx, text, ini) {
+/** Add a goal. `ini` ties it to an initiative, so the brief's items and meetings of that initiative join it. `extra` holds the
+ *  optional context: done_when, anchor, due and event_id (the meeting it was made from). */
+export function addGoal(ctx, text, ini, extra) {
   const body = { action: 'add', text: String(text || '').trim().slice(0, 140) };
   if (ini) body.initiative_id = ini;
+  for (const k of ['done_when', 'anchor', 'due', 'event_id']) if (extra && typeof extra[k] === 'string' && extra[k].trim()) body[k] = extra[k].trim();
   // one day for every repository: a goal added while Today shows one repository belongs to it; otherwise to none
   if (ctx.m && ctx.m.narrow && ctx.m.here) body.repo = ctx.m.here;
   return press(ctx, body);
@@ -42,21 +53,28 @@ export function addGoal(ctx, text, ini) {
 
 /** The jobs of a goal: the day model's jobs that name it. */
 const jobsOf = (m, id) => m.jobs.filter((j) => j.goal === id && !j.worth);
+const typedOf = (g) => (Array.isArray(g.jobs) ? g.jobs : []);
+/** "N of M jobs done": the jobs made from the brief and the ones the PM typed. Information only: it never closes a goal (G2). */
+function tally(m, g) {
+  const js = jobsOf(m, g.id);
+  const typed = typedOf(g);
+  return { js, typed, total: js.length + typed.length, done: js.filter((j) => j.group === 'done').length + typed.filter((x) => x.done).length, need: js.filter((j) => j.group === 'needs').length };
+}
 
 export function goalRows(ctx) {
   const { m } = ctx;
   if (!m.goals.length) return null;
   return el('ul', { class: 'td-day__rows', 'data-day-list': 'goals' }, ...m.goals.map((g) => {
-    const js = jobsOf(m, g.id);
-    const done = js.filter((j) => j.group === 'done').length;
-    const need = js.filter((j) => j.group === 'needs').length;
+    const t = tally(m, g);
     const closed = g.status !== 'open';
-    const sub = closed ? (G.coverage[g.coverage] || g.status) : js.length ? D.goalJobs(done, js.length) + (need ? ' · ' + D.goalNeed(need) : '') : (G.coverage[g.coverage] || D.goalNone);
+    const sub = closed ? (G.coverage[g.coverage] || g.status) : t.total ? D.goalJobs(t.done, t.total) + (t.need ? ' · ' + D.goalNeed(t.need) : '') : (G.coverage[g.coverage] || D.goalNone);
     const cur = ctx.cur('goal', g.id);
+    // the optional context (G1): when it is due, what it serves, and the prompt to say what done looks like
+    const meta = [sub, g.due ? G.dueMeta(g.due) : null, g.anchor ? G.anchorMeta(g.anchor) : null, !closed && !g.done_when ? G.addDoneWhen : null];
     return el('li', null, row({
-      title: g.text, meta: [sub], done: closed, onOpen: () => ctx.select('goal', g.id),
+      title: g.text, meta, done: closed, onOpen: () => ctx.select('goal', g.id),
       lead: [el('span', { class: 'td-day__lead' }, String(m.goalNo.get(g.id)))],
-      trail: [el('span', { class: 'td-day__chips' }, g.repo ? badge({ text: m.repoName(g.repo), tone: 'outline', attrs: { 'data-day-repo': g.repo } }) : null), meter({ done: js.length ? done : g.status === 'done' ? 1 : 0, total: js.length || 1, label: '' })],
+      trail: [el('span', { class: 'td-day__chips' }, g.repo ? badge({ text: m.repoName(g.repo), tone: 'outline', attrs: { 'data-day-repo': g.repo } }) : null), meter({ done: t.total ? t.done : g.status === 'done' ? 1 : 0, total: t.total || 1, label: '' })],
       attrs: { class: 'td-day__r', 'data-day-sel': 'goal:' + g.id, 'data-goal': g.id, 'data-goal-coverage': g.coverage, 'data-cur': cur },
       openAttrs: { 'aria-current': cur },
     }));
@@ -77,13 +95,32 @@ export function goalAdd(ctx) {
       lastAdded = { key, at: Date.now() };
       // clear before the press: its reload re-renders the section, and a rebuild must not bring the text back
       draft = '';
-      if (await addGoal(ctx, v)) { if (f.control.resetCommitted) f.control.resetCommitted(''); f.control.value = ''; ctx.rerender(); }
-      else { lastAdded = null; draft = v; ctx.rerender(); }
+      const extra = { ...ctxDraft };
+      clearContext();
+      if (await addGoal(ctx, v, null, extra)) { if (f.control.value.trim() === String(v).trim()) { if (f.control.resetCommitted) f.control.resetCommitted(''); f.control.value = ''; } ctx.rerender(); }
+      else { lastAdded = null; draft = v; Object.assign(ctxDraft, extra); ctxOpen = true; ctx.rerender(); }
     } });
   // a rebuild keeps what is typed. The field is made empty and filled after, so Enter still commits the restored text.
   f.control.value = draft;
   f.control.addEventListener('input', () => { draft = f.control.value; });
-  return el('div', { class: 'td-day__goaladd' }, f);
+  return el('div', { class: 'td-day__goaladd' }, f, contextFold());
+}
+
+function clearContext() { ctxDraft.done_when = ''; ctxDraft.anchor = ''; ctxDraft.due = ''; ctxOpen = false; }
+
+/** "Add context" (G6): done when, anchor and due. The jobs carry who does the work and what comes after, so no field asks. */
+function contextFold() {
+  const one = (key, label, hint, max) => {
+    const f = field({ label, value: '', placeholder: hint, attrs: { maxlength: String(max), 'data-goals': 'ctx-' + key, 'data-goal-ctx-new': key }, onCommit: (v) => { ctxDraft[key] = v; } });
+    f.control.value = ctxDraft[key];
+    f.control.addEventListener('input', () => { ctxDraft[key] = f.control.value; });
+    return f;
+  };
+  const d = el('details', { class: 'td-day__fold td-goal__ctxfold', open: ctxOpen ? true : null, 'data-goals': 'context' },
+    el('summary', null, G.addContext),
+    el('div', { class: 'td-goal__ctxfields' }, one('done_when', G.doneWhen, G.doneWhenHint, 200), one('anchor', G.anchor, G.anchorHint, 80), one('due', G.due, G.dueHint, 40)));
+  d.addEventListener('toggle', () => { ctxOpen = d.open; });
+  return d;
 }
 
 async function prepareStep(ctx, st) {
@@ -117,6 +154,113 @@ function stepNode(ctx, st) {
     acts);
 }
 
+const srcOf = (k) => D.srcName[k] || String(k || '');
+
+/** A job made from the brief, as a line of a goal (G3): a check for the PM's own job that has no task yet, the title, who
+ *  acts, where it came from (when not from the goal), and its status. The press on the title opens the job. */
+function jobLine(ctx, j) {
+  const who = whoActs(j);
+  const origin = originOf(j);
+  const cur = ctx.cur('job', j.id);
+  const checkable = j.status === 'you' && !j.task;
+  const check = checkable ? field({ kind: 'check', label: '', value: j.group === 'done', attrs: { 'aria-label': `${A.done}: ${j.title}`, 'data-goal-job-check': j.id },
+    onCommit: (v) => ctx.mark(j.id, { action: v ? 'done' : 'reopen' }, v ? A.did.done(j.title) : A.did.reopen) }) : null;
+  return el('li', null, row({
+    title: j.title, meta: [who.text, origin !== 'goal' ? D.origin[origin] : null, srcOf(j.source)], done: j.group === 'done',
+    lead: [check, whoMark(who.who)].filter(Boolean), trail: [statusPill(j)], onOpen: () => ctx.select('job', j.id),
+    attrs: { class: 'td-day__r', 'data-day-sel': 'job:' + j.id, 'data-goal-job': j.id, 'data-who': who.who, 'data-cur': cur }, openAttrs: { 'aria-current': cur },
+  }));
+}
+
+/** A job the PM typed on the goal (G3): the PM's own, with no agent and no session. Check, uncheck and remove are the PM's presses. */
+function typedLine(ctx, g, j) {
+  const who = whoActs({ typed: true, done: j.done });
+  const open = g.status === 'open';
+  const check = field({ kind: 'check', label: '', value: !!j.done, attrs: { 'aria-label': `${A.done}: ${j.text}`, 'data-goal-typed-check': j.id, disabled: open ? null : true },
+    onCommit: (v) => press(ctx, { action: v ? 'job-done' : 'job-reopen', id: g.id, job: j.id }) });
+  return el('li', null, row({
+    title: j.text, meta: [who.text, D.origin.you], done: !!j.done, lead: [check, whoMark('pm')],
+    trail: open ? [button({ label: tagged(G.removeJob, 'you'), size: 'sm', variant: 'ghost', attrs: { 'data-goal-typed-remove': j.id, 'aria-label': `${G.removeJob}: ${j.text}` },
+      onClick: () => press(ctx, { action: 'job-remove', id: g.id, job: j.id }) })] : [],
+    attrs: { class: 'td-day__r', 'data-goal-typed': j.id, 'data-who': 'pm' },
+  }));
+}
+
+/** The "Add a job" field (G3, L2): typed text becomes a job the PM owns. Enter adds it. */
+function jobAdd(ctx, g) {
+  if (typedOf(g).length >= MAX_JOBS) return el('p', { class: 'td-day__note' }, G.jobFull(MAX_JOBS));
+  const f = field({ label: G.addJob, value: '', placeholder: G.addJobHint, hideLabel: true, attrs: { 'data-goals': 'job-input', 'data-goal-job-input': g.id, maxlength: '140' },
+    onCommit: async (v) => {
+      const text = String(v).trim();
+      if (!text) { jobDrafts.set(g.id, ''); return; }
+      const key = g.id + '|' + text.toLowerCase();
+      if (lastAdded && lastAdded.key === key && Date.now() - lastAdded.at < 10000) { jobDrafts.set(g.id, ''); f.control.value = ''; ctx.rerender(); return; }
+      lastAdded = { key, at: Date.now() };
+      jobDrafts.set(g.id, '');
+      if (await press(ctx, { action: 'job-add', id: g.id, text })) { if (f.control.value.trim() === text) { if (f.control.resetCommitted) f.control.resetCommitted(''); f.control.value = ''; } ctx.rerender(); }
+      else { lastAdded = null; jobDrafts.set(g.id, text); ctx.rerender(); }
+    } });
+  f.control.value = jobDrafts.get(g.id) || '';
+  f.control.addEventListener('input', () => { jobDrafts.set(g.id, f.control.value); });
+  return f;
+}
+
+/** Link a job of the day that has no goal to this goal (G3, G4): the picker offers only jobs with no goal. */
+function jobLink(ctx, g) {
+  const free = ctx.m.jobs.filter((j) => !j.goal);
+  if (!free.length) return null;
+  return linkField(free, (j) => ctx.mark(j.linkId, { action: 'link', goal: g.id }, D.linked(g.text)), { label: G.linkJob, prompt: G.linkJobPick, attrs: { 'data-goal-link': g.id } });
+}
+
+/** The jobs of a goal and what finished looks like. `n` is the goal's number. The goal's detail and a meeting's detail draw it. */
+export function goalJobsBlock(ctx, g, n) {
+  const t = tally(ctx.m, g);
+  const open = g.status === 'open';
+  return el('div', { class: 'td-day__rel td-goal__jobs', 'data-goals': 'jobs', 'data-goal-jobs': g.id },
+    el('h4', null, n ? G.forGoal(n, g.text) : G.jobsTitle),
+    g.done_when ? el('p', { class: 'td-goal__donewhen', 'data-goal-donewhen': g.id }, el('b', null, G.doneWhen + ': '), g.done_when) : null,
+    t.total ? el('p', { class: 'td-day__note', 'data-goal-tally': g.id }, D.goalJobs(t.done, t.total)) : null,
+    t.total ? el('ul', { class: 'td-day__rows', 'data-goal-job-list': g.id }, ...t.js.map((j) => jobLine(ctx, j)), ...t.typed.map((j) => typedLine(ctx, g, j)))
+      : el('p', { class: 'td-day__note' }, G.noJobs),
+    open ? jobAdd(ctx, g) : null,
+    open ? jobLink(ctx, g) : null);
+}
+
+/** The context of a goal (G1): done when, anchor and due. The PM edits it while the goal is open; an empty value clears it. */
+function contextFields(ctx, g) {
+  if (g.status !== 'open') {
+    const bits = [[G.doneWhen, g.done_when], [G.anchor, g.anchor], [G.due, g.due]].filter(([, v]) => v);
+    return bits.length ? el('dl', { class: 'td-day__ctx' }, ...bits.flatMap(([k, v]) => [el('dt', null, k), el('dd', null, v)])) : null;
+  }
+  const one = (key, label, hint, max) => {
+    const f = field({ label, value: g[key] || '', placeholder: hint, attrs: { maxlength: String(max), 'data-goals': 'ctx-' + key, 'data-goal-ctx': key },
+      onCommit: (v) => press(ctx, { action: 'context', id: g.id, [key]: String(v).trim() }) });
+    return f;
+  };
+  return el('div', { class: 'td-goal__ctxfields', 'data-goals': 'context-fields' }, one('done_when', G.doneWhen, G.doneWhenHint, 200), one('anchor', G.anchor, G.anchorHint, 80), one('due', G.due, G.dueHint, 40));
+}
+
+/** The end of the Goals section (G5): every job of the day with no goal, each with a picker of today's open goals. */
+export function jobsWithoutGoal(ctx) {
+  const { m } = ctx;
+  const free = m.jobs.filter((j) => !j.goal);
+  if (!m.jobs.length) return null;
+  const hasGoals = m.allGoals.some((g) => g.status === 'open');
+  return el('div', { class: 'td-day__rel td-goal__nogoal', 'data-goals': 'no-goal' },
+    el('h4', null, G.noGoalTitle, free.length ? el('span', null, String(free.length)) : null),
+    free.length ? el('ul', { class: 'td-day__rows', 'data-day-list': 'no-goal' }, ...free.map((j) => {
+      const who = whoActs(j);
+      const pick = hasGoals ? goalPicker(m, null, (gid) => {
+        const g = gid ? m.allGoals.find((x) => x.id === gid) : null;
+        if (g) ctx.mark(j.linkId, { action: 'link', goal: g.id }, D.linked(g.text));
+      }, { label: G.linkLabel(j.title), none: G.linkTo, attrs: { 'data-nogoal-link': j.id } }) : null;
+      return el('li', null, row({
+        title: j.title, meta: [who.text, srcOf(j.source)], lead: [whoMark(who.who)], trail: pick ? [el('span', { class: 'td-goal__pick' }, pick)] : [], onOpen: () => ctx.select('job', j.id),
+        attrs: { class: 'td-day__r', 'data-nogoal-job': j.id, 'data-who': who.who },
+      }));
+    })) : el('p', { class: 'td-day__note' }, G.noGoalNone));
+}
+
 /** The detail of one goal. `row(type, id, label, lead, trail)` draws a selectable row (today-day.js). */
 export function goalDetail(ctx, id, row) {
   const { m } = ctx;
@@ -124,8 +268,7 @@ export function goalDetail(ctx, id, row) {
   if (i < 0) return null;
   const g = m.allGoals[i];
   const closed = g.status !== 'open';
-  const js = jobsOf(m, g.id);
-  const meets = m.events.filter((e) => e.goal === g.id);
+  const meets = m.events.filter((e) => e.gid === g.id);
   const ctrls = closed
     ? [button({ label: G.reopen, size: 'sm', attrs: { 'data-goal-act': 'reopen' }, onClick: () => press(ctx, { action: 'reopen', id: g.id }) })]
     : [button({ label: G.done, size: 'sm', attrs: { 'data-goal-act': 'done' }, onClick: () => press(ctx, { action: 'done', id: g.id }) }),
@@ -137,12 +280,13 @@ export function goalDetail(ctx, id, row) {
     el('div', { class: 'td-day__dhead' }, el('span', { class: 'td-day__kind' }, D.kind.goal(i + 1)), el('h3', null, g.text)),
     el('div', { class: 'td-day__acts' }, badge({ text: G.coverage[g.coverage] || g.coverage, tone: g.coverage === 'needs-plan' ? 'warning' : 'outline' }),
       g.initiative_id ? el('span', { class: 'td-day__mono' }, g.initiative_id) : null),
+    contextFields(ctx, g),
+    closed ? null : el('p', { class: 'td-day__note', 'data-goals': 'close-note' }, G.closeNote),
     ctx.repoPicker && m.repos.length ? el('div', { class: 'td-day__ch', 'data-goals': 'repo' }, el('span', null, D.repo.label),
       ctx.repoPicker(m, g.repo, (r) => press(ctx, { action: 'tag', id: g.id, repo: r }), { 'data-goal-repo': g.id })) : null,
     ctx.repoPicker && m.repos.length ? el('p', { class: 'td-day__note' }, D.repo.goalHint) : null,
-    js.length ? el('p', null, D.goalJobs(js.filter((j) => j.group === 'done').length, js.length)) : el('p', { class: 'td-day__note' }, G.noStep),
     meets.length ? el('div', { class: 'td-day__rel' }, el('h4', null, D.meetings), el('ul', { class: 'td-day__rows' }, ...meets.map((e) => row('event', e.id, e.title, e.time)))) : null,
-    js.length ? el('div', { class: 'td-day__rel' }, el('h4', null, D.jobs), el('ul', { class: 'td-day__rows' }, ...js.map((j) => row('job', j.id, j.title, '', j)))) : null,
+    goalJobsBlock(ctx, g, null),
     !closed && steps.length ? el('div', { class: 'td-day__rel', 'data-goals': 'steps' }, el('h4', null, D.stepsTitle), el('ul', { class: 'td-goal__steps' }, ...steps.map((st) => stepNode(ctx, st)))) : null,
     el('div', { class: 'td-day__acts' }, ...ctrls),
   ];

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

@@ -0,0 +1,84 @@
+/* pm/today-jobs.js — what a job says about itself on Today (initiative today-goals-jobs, PRD J1 to J4).
+ *
+ *   statusPill(j)           → the status badge: To do, Needs you, Running, Done or Blocked
+ *   whoActs(j)              → { who: 'pm'|'agent', text }: who acts on the job's next press
+ *   mark(who)               → the square beside it: open for the PM, filled for the agent
+ *   tag(who)                → the small YOU or AGENT tag a press carries
+ *   originOf(j)             → 'goal'|'found'|'mention'|'you': where the job came from, derived from the data
+ *   goalPicker(m, cur, ...) → a select: No goal, or one of today's open goals
+ *   linkField(...)          → a select of the jobs of the day that have no goal
+ *
+ * Pure drawing: no request is sent here. The presses are the day section's (today-day.js) and the goals module's.
+ */
+
+import { el } from './dom.js';
+import { badge, field } from './primitives.js';
+import { COPY } from './today-copy.js';
+
+const D = COPY.day;
+const TONE = { '': 'muted', ok: 'outline', info: 'outline', warn: 'warning', purple: 'warning', bad: 'destructive' };
+
+/** The status of a job as a badge. The raw status stays in data-day-status for the suites. */
+export function statusPill(j) {
+  const s = D.status2;
+  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'],
+  };
+  const [t, tone] = map[j.status] || [j.status, ''];
+  return badge({ text: t, tone: TONE[tone] || 'muted', attrs: { 'data-day-status': j.status } });
+}
+
+/** Who acts on the next press. A draft to approve, a failed job and the PM's own job wait on the PM. */
+export function whoActs(j) {
+  const W = D.who2;
+  if (j.typed) return j.done ? { who: 'pm', text: W.youDone } : { who: 'pm', text: W.you };
+  if (j.status === 'you') return j.group === 'done' ? { who: 'pm', text: W.youDone } : { who: 'pm', text: W.you };
+  if (j.status === 'working' || j.status === 'sending') return { who: 'agent', text: W.working };
+  if (j.status === 'done' || j.status === 'sent') return { who: 'agent', text: W.finished };
+  if (j.status === 'notStarted' || j.status === 'waiting') return { who: 'agent', text: W.queued };
+  return { who: 'pm', text: W.you };   // review and failed
+}
+
+/** The square: filled for the agent, open for the PM. It is a picture; the words beside it say the same. */
+export function mark(who) {
+  return el('span', { class: 'td-day__sq', 'data-who': who, 'aria-hidden': 'true' });
+}
+
+/** The small tag on a press: YOU when the PM does it, AGENT when the press starts the agent. */
+export function tag(who) {
+  return el('span', { class: 'td-day__tag', 'data-who': who, 'data-day': 'tag' }, who === 'agent' ? D.tag.agent : D.tag.you);
+}
+
+/** A button label with its tag: [text, tag]. */
+export const tagged = (text, who) => [text, ' ', tag(who)];
+
+const MEETING_SOURCES = ['calendar', 'wispr'];
+/** Where a job came from, from the data and never from a field the PM edits. */
+export function originOf(j) {
+  if (j.typed) return 'you';
+  if (j.item && j.item.mention) return 'mention';
+  if (j.item && (MEETING_SOURCES.includes(j.item.source) || j.item.verb === 'prepare')) return 'found';
+  if (!j.item) return 'you';   // a briefed task with no item: the PM gave it to the agent by hand
+  return j.goal ? 'goal' : 'found';
+}
+
+/** A select of today's open goals with No goal first. `onPick(goalId|null)`. */
+export function goalPicker(m, cur, onPick, { label, none = D.goalCtl.none, attrs } = {}) {
+  const open = m.allGoals.filter((g) => g.status === 'open');
+  const f = field({ label: label || D.goalCtl.label, kind: 'select', value: cur || '', hideLabel: true,
+    options: [{ value: '', label: none }, ...open.map((g) => ({ value: g.id, label: `${m.goalNo.get(g.id)} · ${g.text}` })),
+      // a goal that is closed stays shown while the job is under it, so the picker never hides what is stored
+      ...(cur && !open.some((g) => g.id === cur) ? [{ value: cur, label: (m.allGoals.find((g) => g.id === cur) || { text: cur }).text }] : [])],
+    attrs, onCommit: (v) => onPick(v || null) });
+  return f;
+}
+
+/** A select of jobs with no goal: the first option is the prompt. `onPick(job)`. */
+export function linkField(jobs, onPick, { label, prompt, attrs } = {}) {
+  const f = field({ label, kind: 'select', value: '', hideLabel: true, attrs,
+    options: [{ value: '', label: prompt }, ...jobs.map((j) => ({ value: j.linkId, label: j.title }))],
+    onCommit: (v) => { const j = jobs.find((x) => x.linkId === v); if (j) onPick(j); } });
+  return f;
+}

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

@@ -0,0 +1,50 @@
+/* pm/today-mentions.js — a mention in the look of its source (initiative today-goals-jobs, PRD M1 to M3).
+ *
+ *   hasCard(source)   → true for Slack, Confluence and Figma: the sources that draw as a card
+ *   mentionCard(j)    → the card of a mention job: the source line, the author, the time, the text, and, only when the
+ *                       brief item carries them, the quoted passage (Confluence) or the frame (Figma)
+ *
+ * Pure drawing from the brief item's own fields (who, about, ask, where, quote, thread). A field the item lacks is left
+ * out, never made up. No press lives here: the card sits inside the row's open button or in the detail, and the card
+ * links to the conversation. Nothing here posts to, resolves in or reacts in a service.
+ */
+
+import { el } from './dom.js';
+import { icon } from './icons.js';
+import { COPY } from './today-copy.js';
+
+const D = COPY.day;
+const ICON = { slack: 'message-square', confluence: 'file-text', figma: 'diamond' };
+
+export const hasCard = (source) => Object.prototype.hasOwnProperty.call(ICON, source);
+
+const initials = (who) => String(who || '').replace(/[^\p{L}\p{N}\s]/gu, ' ').split(/\s+/).filter(Boolean).slice(0, 2).map((w) => w[0].toUpperCase()).join('');
+
+/** The time of the author's last message in the thread the item carries; none when it carries none. */
+function timeOf(it) {
+  const mine = (Array.isArray(it.thread) ? it.thread : []).filter((m) => m && m.at && (!it.who || m.who === it.who));
+  return mine.length ? mine[mine.length - 1].at : null;
+}
+
+/** The card of one mention. `name` is the display name of the source (Slack, Confluence, Figma). */
+export function mentionCard(j, name) {
+  const it = j.item || {};
+  const svc = j.source;
+  const ini = initials(it.who);
+  const words = [it.about, it.ask].filter(Boolean);
+  const when = timeOf(it);
+  const quote = svc === 'confluence' && typeof it.quote === 'string' && it.quote.trim() ? it.quote.trim() : null;
+  const frame = svc === 'figma'
+    ? el('span', { class: 'td-day__mc-frame', 'data-mc': 'frame', 'aria-hidden': 'true' }, icon('circle-dot')) : null;
+  const avatar = svc !== 'figma' && ini ? el('span', { class: 'td-day__av', 'data-mc': 'avatar', 'aria-hidden': 'true' }, ini) : null;
+  return el('span', { class: 'td-day__mc', 'data-mention-card': svc },
+    el('span', { class: 'td-day__mc-head', 'data-mc': 'source' }, icon(ICON[svc]), D.mc.via(name, it.where)),
+    quote ? el('span', { class: 'td-day__mc-quote', 'data-mc': 'quote' }, quote) : null,
+    el('span', { class: 'td-day__mc-main' },
+      frame || avatar,
+      el('span', { class: 'td-day__mc-col' },
+        it.who || when ? el('span', { class: 'td-day__mc-line' },
+          it.who ? el('strong', { class: 'td-day__mc-name', 'data-mc': 'who' }, it.who) : null,
+          when ? el('span', { class: 'td-day__mc-time', 'data-mc': 'time' }, when) : null) : null,
+        ...words.map((w) => el('span', { class: 'td-day__mc-text', 'data-mc': 'text' }, w)))));
+}

package/workspace/public/pm/topbar.js

@@ -19,11 +19,12 @@
  */
 
 import { el, setChildren } from './dom.js';
-import { button, needsDot, needsCount } from './primitives.js';
+import { button, iconButton, menu, needsDot, needsCount } from './primitives.js';
 import { COPY } from './frame-copy.js';
 import * as dock from './note-dock.js';
-import { iconButton } from './primitives.js';
 import { el as h } from './dom.js';
+import { upcomingToday, upcomingWithoutNote } from './notes-links.js';
+import { contextOf, peopleOf } from './notes-context.js';
 
 /** The destinations the bar names, in order. Settings sits at the end of the bar, after Sync. Docs joined the bar at the
  * PM's word (2026-10-06, docs-three-way-sync: "I thought Docs is one of the main menu"). People joined after Docs when the
@@ -57,8 +58,9 @@ export function createTopbar({ go, openPalette, openView, repoMenu, sync } = {})
   const dot = needsDot();
   const links = {};
   for (const id of [...BAR_DESTS, 'settings']) {
-    links[id] = button({
-      label: COPY.nav[id], variant: 'ghost', icon: NAV_ICON[id],
+    // icon only (meeting-notes Run 13): the place's name is its tooltip and its aria-label
+    links[id] = iconButton({
+      icon: NAV_ICON[id], ariaLabel: COPY.nav[id],
       attrs: { class: 'fr-link', 'data-fr-dest': id, 'aria-current': 'false' },
       onClick: () => go && go(id),
     });
@@ -80,42 +82,80 @@ export function createTopbar({ go, openPalette, openView, repoMenu, sync } = {})
   }
   const nav = el('nav', { class: 'fr-nav', 'aria-label': COPY.nav.label }, BAR_DESTS.map((id) => links[id]));
 
-  const search = button({
-    label: COPY.search, variant: 'outline', icon: 'search',
+  const search = iconButton({
+    icon: 'search', ariaLabel: COPY.search + ' (' + COPY.searchKey + ')',
     attrs: { class: 'fr-search', 'data-fr': 'search', 'aria-keyshortcuts': 'Meta+K Control+K' },
     onClick: () => openPalette && openPalette(),
   });
-  search.appendChild(el('kbd', { class: 'fr-kbd' }, COPY.searchKey));
 
-  /* The Record control (meeting-notes Run 12, mockup board 2), right of the bar before Settings. Idle: Record. Recording: the
-   * red dot and the clock (a press opens the note), the highlight and Pause. Paused: the clock and Resume. Stop is in the note. */
+  /* The Record control (meeting-notes Run 13, prototype/meeting-notes/record-control-mockup.html). Two groups, always in the same
+   * place. Left, only while a meeting is recording or paused: the chip that names it, then Highlight, Pause and Stop (recording)
+   * or Resume and Stop (paused). Nothing to resume: no left group. Right, always: New (an untitled note) and an arrow that lists
+   * today's meetings that have not started; both are unavailable while a meeting is recording. The highlight's pop-up hangs
+   * under the control. */
   const recSlot = el('div', { class: 'fr-rec', 'data-fr': 'record' });
   let recKey = '';
   let recTick = null;
-  const recClock = () => { const st = dock.recordState(); return st.started ? fmtClock(Date.now() - st.started) : ''; };
+  const left = (until) => Math.max(1, Math.ceil((until - Date.now()) / 60000));
+  const chipText = (st) => (st.mode === 'recording' ? (st.started ? fmtClock(Date.now() - st.started) : '') : st.until ? 'paused · ' + left(st.until) + ' min left' : 'paused');
+  const tip = (b, text) => { b.title = text; b.setAttribute('aria-label', text); return b; };
+  const off = (b, why) => { b.setAttribute('aria-disabled', 'true'); b.classList.add('fr-rec__off'); tip(b, why); return b; };
+  const chipOf = (st) => {
+    const clock = h('span', { class: 'fr-rec__clock', 'data-fr-rec-clock': '' }, chipText(st));
+    const dotEl = h('span', { class: 'fr-rec-dot' + (st.mode === 'paused' ? ' fr-rec-dot--paused' : ''), 'aria-hidden': 'true' });
+    const b = button({ label: h('span', { class: 'fr-rec__txt' }, dotEl, h('b', { class: 'fr-rec__title' }, st.title), clock), variant: 'ghost',
+      attrs: { class: 'fr-rec__seg fr-rec__chip', 'data-fr-rec': st.mode, 'aria-label': (st.mode === 'recording' ? 'Recording ' : 'Paused: ') + st.title + '. Open the note.' }, onClick: () => dock.openDock(st.id) });
+    return b;
+  };
   function drawRecord() {
     const st = dock.recordState();
-    const busy = st.mode === 'recording' && dockHighlight();
-    const key = st.mode + ':' + st.id + ':' + (busy ? busy.state + busy.open : '');
+    const hl = st.mode === 'recording' ? dock.highlightBusy() : null;
+    const key = [st.mode, st.id, st.title, hl ? hl.state + hl.open : ''].join(':');
     if (key === recKey) return;
     recKey = key;
     clearInterval(recTick); recTick = null;
-    if (st.mode === 'idle') {
-      setChildren(recSlot, [button({ label: 'Record', variant: 'outline', icon: 'mic', attrs: { class: 'fr-rec__start', 'data-fr-rec': 'idle', title: 'Start a note and record the meeting' }, onClick: (e) => dock.recordNew(e && e.currentTarget) })]);
-      return;
-    }
-    if (st.mode === 'paused') {
-      setChildren(recSlot, [button({ label: 'Resume', variant: 'outline', icon: 'mic', attrs: { class: 'fr-rec__start', 'data-fr-rec': 'paused', title: 'Resume recording ' + (st.title || 'the note') }, onClick: () => dock.resumeNow() })]);
-      return;
+    const kids = [];
+    const recording = st.mode === 'recording';
+    if (st.mode !== 'idle') {
+      const chip = chipOf(st);
+      const group = [chip];
+      if (recording) {
+        const hlb = iconButton({ icon: 'highlighter', ariaLabel: hl ? 'Highlight in progress: show it' : 'Highlight the last 30 seconds and what is said next',
+          attrs: { class: 'fr-rec__seg' + (hl ? ' fr-rec__seg--busy' : ''), 'data-fr-rec-highlight': hl ? hl.state : '' }, onClick: () => dock.highlightNow() });
+        group.push(hlb, iconButton({ icon: 'pause', ariaLabel: 'Pause (you can resume within 1 hour)', attrs: { class: 'fr-rec__seg', 'data-fr-rec-pause': '' }, onClick: () => dock.pauseNow() }));
+      } else {
+        group.push(iconButton({ icon: 'play', ariaLabel: 'Resume ' + st.title, attrs: { class: 'fr-rec__seg fr-rec__resume', 'data-fr-rec-resume': '' }, onClick: () => dock.resumeNow() }));
+      }
+      group.push(iconButton({ icon: 'square', ariaLabel: 'Stop for good (cannot be resumed)', attrs: { class: 'fr-rec__seg fr-rec__stop', 'data-fr-rec-stop': '' }, onClick: () => dock.stopNow() }));
+      kids.push(h('div', { class: 'fr-rec__group', role: 'group', 'aria-label': (recording ? 'Recording ' : 'Paused: ') + st.title }, group));
+      const clockNode = chip.querySelector('[data-fr-rec-clock]');
+      recTick = setInterval(() => { const s2 = dock.recordState(); if (clockNode) clockNode.textContent = chipText(s2); }, 1000);
     }
-    const clock = h('span', { class: 'fr-rec__clock', 'data-fr-rec-clock': '' }, recClock());
-    recTick = setInterval(() => { clock.textContent = recClock(); }, 1000);
-    const open = button({ label: h('span', { class: 'fr-rec__txt' }, h('span', { class: 'fr-rec-dot', 'aria-hidden': 'true' }), clock), variant: 'ghost',
-      attrs: { class: 'fr-rec__seg fr-rec__open', 'data-fr-rec': 'recording', 'aria-label': 'Recording ' + (st.title || 'a note') + '. Open the note.' }, onClick: () => dock.openDock(st.id) });
-    const hl = iconButton({ icon: 'highlighter', ariaLabel: busy ? 'Highlight in progress: show it' : 'Highlight the last 30 seconds and what is said next',
-      attrs: { class: 'fr-rec__seg' + (busy ? ' fr-rec__seg--busy' : ''), 'data-fr-rec-highlight': busy ? busy.state : '' }, onClick: () => dock.highlightNow() });
-    const pause = iconButton({ icon: 'pause', ariaLabel: 'Pause recording', attrs: { class: 'fr-rec__seg', 'data-fr-rec-pause': '' }, onClick: () => dock.pauseNow() });
-    setChildren(recSlot, [h('div', { class: 'fr-rec__group', role: 'group', 'aria-label': 'Recording' }, open, hl, pause)]);
+    const why = 'Pause or stop the meeting being recorded to start a new one';
+    const mic = iconButton({ icon: 'mic', ariaLabel: 'Record an untitled note', attrs: { class: 'fr-rec__seg fr-rec__new', 'data-fr-rec-new': '' }, onClick: (e) => { if (recording) return; dock.recordNew(e && e.currentTarget); } });
+    const arrow = iconButton({ icon: 'chevron-down', ariaLabel: 'Record for an upcoming meeting', size: 'sm', attrs: { class: 'fr-rec__seg fr-rec__upcoming', 'data-fr-rec-upcoming': '' },
+      onClick: (e) => { if (!recording) openUpcoming(e && e.currentTarget); } });
+    if (recording) { off(mic, why); off(arrow, why); }
+    kids.push(h('div', { class: 'fr-rec__group fr-rec__group--new', role: 'group', 'aria-label': 'New recording' }, mic, arrow));
+    const panel = recording ? dock.highlightPanel() : null;
+    if (panel) kids.push(panel);
+    setChildren(recSlot, kids);
+  }
+  /** 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 evs = upcomingWithoutNote(await upcomingToday());
+    const fmt = (e, i) => {
+      const c = contextOf(e) || {};
+      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' : '');
+      const who = peopleOf(c); const extra = c.attendees ? ' (' + c.attendees + ' attendees)' : '';
+      const bits = [i === 0 ? 'Next' : null, inText, who.length ? who.slice(0, 2).join(', ') + (who.length > 2 ? ' +' + (who.length - 2) : '') : c.attendees ? c.attendees + ' attendees' : null, c.agenda && c.agenda.length ? c.agenda.length + ' agenda item' + (c.agenda.length === 1 ? '' : 's') : null].filter(Boolean);
+      void extra;
+      return { label: e.title, hint: e.time || '', detail: bits.join(' · '), attrs: { 'data-fr-rec-event': e.id || '' }, onSelect: () => dock.recordEvent(e) };
+    };
+    const 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: () => {} }])];
+    menu({ anchor, items, ariaLabel: 'Record a new meeting' });
   }
 
   let syncBtn = null;
@@ -130,11 +170,10 @@ export function createTopbar({ go, openPalette, openView, repoMenu, sync } = {})
     return b;
   }
   function syncButton(label, busy) {
-    return button({
-      label, variant: 'outline', size: 'sm', disabled: busy,
-      attrs: { class: 'fr-sync', 'data-fr': 'sync', title: COPY.sync.title },
-      onClick: () => sync && sync(),
-    });
+    const b = iconButton({ icon: 'refresh-cw', ariaLabel: busy ? label : COPY.sync.title || label,
+      attrs: { class: 'fr-sync', 'data-fr': 'sync', 'data-fr-sync-label': label, 'aria-busy': busy ? 'true' : 'false' }, onClick: () => { if (!busy && sync) sync(); } });
+    if (busy) { b.setAttribute('aria-disabled', 'true'); b.classList.add('fr-sync--busy'); }
+    return b;
   }
 
   function update(m) {