create-pmos 0.52.0 → 0.53.1

package/workspace/public/pm/item-sheet.js

@@ -0,0 +1,251 @@
+/* pm/item-sheet.js — the item sheet (pm-os-absorb Run 1, PRD R13).
+ *
+ * One item, every field, in the order R13 sets: state buttons, Title, Owner, Stage, After, Start and Due, Milestone,
+ * Blocked (with its reason), Note, Hand to agent, History. Under the state buttons, two lines show only when they apply:
+ * "Proposed by …" with Keep all, for an item an agent proposed; and Add evidence, for an item that reads Done with no
+ * evidence (it writes the same done → done move with evidence that `pmos item move … done --evidence` writes). A 420px side sheet above 760px, a bottom sheet below it, with
+ * a sticky row: Withdraw (held for Undo) on the left, Close on the right.
+ *
+ * Every field commits by itself and writes one line: text on Enter or blur, selects, dates and boxes on change. A press
+ * on a state button writes `moved` at once, except Done, which is held for Undo. When the item changes underneath — a
+ * poll, an agent's write, the PM's own write coming back — the sheet refreshes every field the PM is not typing in.
+ */
+
+import { el } from './dom.js';
+import { sheet, tabs, field, button, iconButton } from './primitives.js';
+import { icon } from './icons.js';
+import { COPY, STATES, ago, dayOf, ownerLabel } from './breakdown-copy.js';
+import { stageLabel } from './bd-model.js';
+import { handoffBox } from './handoff-box.js';
+
+const ownerKind = (o) => (o === 'you' || o === 'agent' ? o : String(o || '').split(':')[0] || 'you');
+const ownerName = (o) => { const s = String(o || ''); const i = s.indexOf(':'); return i > 0 ? s.slice(i + 1) : ''; };
+
+/**
+ * openItemSheet(ctx, id, { handoff }) -> { id, refresh(), close() }
+ * ctx: { ws, slug, view() -> Layout, move(id,to), setFields(id,fields), flag(id,blocked,reason), withdraw(id),
+ *        attachEvidence(id, 'kind:ref'), keep(batch), sessions() -> [], onClose(id) }
+ */
+export function openItemSheet(ctx, id, { handoff = false } = {}) {
+  const L0 = ctx.view();
+  const it0 = L0 && L0.items[id];
+  if (!it0) return null;
+  const item = () => { const L = ctx.view(); return L && L.items[id]; };
+  const focused = (node) => node && document.activeElement === node;
+
+  /* 1 · state buttons */
+  const stateSlot = el('div', { class: 'bd-group', 'data-bd-field': 'state' });
+  const drawState = (it) => {
+    while (stateSlot.firstChild) stateSlot.removeChild(stateSlot.firstChild);
+    stateSlot.appendChild(tabs({
+      variant: 'segmented', role: 'radiogroup', full: true, ariaLabel: COPY.labels.state, value: it.state,
+      items: STATES.map((s) => ({ id: s, label: COPY.states[s] })),
+      onChange: (to) => { const cur = item(); if (cur && cur.state !== to) ctx.move(id, to); },
+    }));
+  };
+
+  /* under the state: proposed (Keep all) and no evidence (Add evidence) */
+  const noteSlot = el('div', { class: 'bd-group', 'data-bd-status': '' });   // part of field 1, the state
+  const evidence = field({
+    label: COPY.addEvidence, kind: 'text', placeholder: COPY.evidenceHint, attrs: { 'data-bd-input': 'evidence', spellcheck: 'false', maxlength: '220' },
+    onCommit: (v) => {
+      const t = v.trim();
+      if (!t || !ctx.attachEvidence) return;
+      // The server checks the form (commit:, pr:, file:, session:, note:). A refusal shows as a toast and leaves the
+      // text in the field to correct (Enter sends it again). Once it is attached the field goes, and focus goes back to
+      // the state buttons rather than falling to the page.
+      Promise.resolve(ctx.attachEvidence(id, t)).then((out) => {
+        const typed = evidence.control.value;
+        evidence.control.resetCommitted('');
+        if (!out || out.ok === false) { evidence.control.value = typed; return; }
+        const cur = item();
+        if (cur) drawNote(cur, true);
+      });
+    },
+  });
+  /* Drawn again only when what it says changes, so a refresh (every poll) keeps the nodes and the focus in them. While
+   * the evidence field has focus it stays until the write settles. When the focused control goes with the line (Keep
+   * all, the attached evidence), focus goes to the state buttons rather than falling to the page. */
+  let noteKey = null;
+  const drawNote = (it, force = false) => {
+    const L = ctx.view();
+    const batch = it.proposed ? ((L && L.batches) || []).find((b) => (b.items || []).includes(id)) : null;
+    const needsEvidence = it.state === 'done' && !!it.noEvidence;
+    const key = JSON.stringify([it.proposed ? [batch ? batch.byLabel : it.byLabel, dayOf(it.createdAt), !!(batch && ctx.keep)] : null, needsEvidence]);
+    if (key === noteKey) return;
+    if (!force && document.activeElement === evidence.control) return;
+    noteKey = key;
+    const had = noteSlot.contains(document.activeElement);
+    while (noteSlot.firstChild) noteSlot.removeChild(noteSlot.firstChild);
+    if (it.proposed) {
+      noteSlot.appendChild(el('div', { class: 'bd-proposed', 'data-bd-proposed': '' },
+        el('span', { class: 'bd-muted' }, COPY.proposedBy(batch ? batch.byLabel : it.byLabel, dayOf(it.createdAt))),
+        batch && ctx.keep ? button({ label: COPY.keepAll, variant: 'outline', size: 'sm', attrs: { 'data-bd-keep-all': '' }, onClick: () => ctx.keep(batch) }) : null));
+    }
+    if (needsEvidence) noteSlot.appendChild(evidence);
+    noteSlot.hidden = !noteSlot.firstChild;
+    if (had && !noteSlot.contains(document.activeElement)) { const b = stateSlot.querySelector('[aria-checked="true"]'); if (b) b.focus(); }
+  };
+
+  /* 2 · title */
+  const title = field({
+    label: COPY.labels.title, kind: 'title', value: it0.title, attrs: { 'data-bd-input': 'title', maxlength: '200' },
+    onCommit: (v) => { const t = v.trim(); const cur = item(); if (t && cur && t !== cur.title) ctx.setFields(id, { title: t }); else if (cur) title.control.resetCommitted(cur.title); },
+  });
+  title.setAttribute('data-bd-field', 'title');
+
+  /* 3 · owner (+ a name for a person or a tracker reference) and 4 · stage */
+  const ownerNameField = field({
+    label: COPY.labels.ownerName, kind: 'text', value: ownerName(it0.owner), attrs: { 'data-bd-input': 'owner-name', maxlength: '60' },
+    onCommit: (v) => {
+      const k = owner.control.value; const name = v.trim();
+      if ((k === 'person' || k === 'tracker') && name) { const o = k + ':' + name; const cur = item(); if (cur && cur.owner !== o) ctx.setFields(id, { owner: o }); }
+    },
+  });
+  const owner = field({
+    label: COPY.labels.owner, kind: 'select', value: ownerKind(it0.owner), attrs: { 'data-bd-input': 'owner' },
+    options: ['you', 'agent', 'person', 'tracker'].map((k) => ({ value: k, label: COPY.owners[k] })),
+    onCommit: (k) => {
+      showOwnerName(k);
+      if (k === 'you' || k === 'agent') { const cur = item(); if (cur && cur.owner !== k) ctx.setFields(id, { owner: k }); }
+      else { ownerNameField.querySelector('label').textContent = k === 'tracker' ? COPY.labels.trackerRef : COPY.labels.ownerName; ownerNameField.control.focus(); }
+    },
+  });
+  owner.setAttribute('data-bd-field', 'owner');
+  const showOwnerName = (k) => { ownerNameField.hidden = !(k === 'person' || k === 'tracker'); };
+  const stage = field({
+    label: COPY.labels.stage, kind: 'select', value: it0.stage, attrs: { 'data-bd-input': 'stage' },
+    options: (L0.stages || []).map((s) => ({ value: s.id, label: s.label })),
+    onCommit: (v) => { const cur = item(); if (cur && cur.stage !== v) ctx.setFields(id, { stage: v }); },
+  });
+  stage.setAttribute('data-bd-field', 'stage');
+
+  /* 5 · after */
+  const afterSlot = el('div', { class: 'bd-group', 'data-bd-field': 'after' });
+  const otherId = field({ label: COPY.otherItemId, kind: 'text', attrs: { 'data-bd-input': 'after-other', spellcheck: 'false' } });
+  const drawAfter = (it) => {
+    while (afterSlot.firstChild) afterSlot.removeChild(afterSlot.firstChild);
+    const L = ctx.view();
+    const after = it.after || [];
+    const nameOf = (x) => (L.items[x] ? L.items[x].title : x);
+    const chips = after.length
+      ? el('div', { class: 'bd-chips' }, after.map((x) => el('span', { class: 'bd-chip', 'data-after': x },
+        el('span', null, nameOf(x)),
+        iconButton({ icon: 'x', size: 'sm', ariaLabel: COPY.aria.remove(nameOf(x)), onClick: () => ctx.setFields(id, { after: after.filter((y) => y !== x) }) }))))
+      : el('div', { class: 'bd-muted' }, COPY.afterNone);
+    const choices = Object.values(L.items).filter((x) => x.id !== id && !after.includes(x.id) && !x.pending);
+    const add = field({
+      label: COPY.addPredecessor, kind: 'select', value: '', hideLabel: true, attrs: { 'data-bd-input': 'after-add' },
+      options: [{ value: '', label: COPY.addPredecessor + '…' }, ...choices.map((x) => ({ value: x.id, label: x.title }))],
+      onCommit: (v) => { if (v) ctx.setFields(id, { after: [...after, v] }); },
+    });
+    const addOther = button({
+      label: COPY.add, variant: 'outline', size: 'sm', attrs: { 'data-bd-after-other': '' },
+      onClick: () => { const v = otherId.control.value.trim(); if (v && !after.includes(v)) { otherId.control.value = ''; ctx.setFields(id, { after: [...after, v] }); } },
+    });
+    afterSlot.append(el('span', { class: 'bd-group__label' }, COPY.labels.after), chips, add,
+      el('div', { class: 'bd-after-add' }, el('div', { class: 'bd-after-add__field' }, otherId), addOther));
+  };
+
+  /* 6 · start and due, 7 · milestone, 8 · blocked */
+  const start = field({ label: COPY.labels.start, kind: 'date', value: it0.start || '', attrs: { 'data-bd-input': 'start' }, onCommit: (v) => ctx.setFields(id, { start: v || null }) });
+  const due = field({ label: COPY.labels.due, kind: 'date', value: it0.due || '', attrs: { 'data-bd-input': 'due' }, onCommit: (v) => ctx.setFields(id, { due: v || null }) });
+  start.setAttribute('data-bd-field', 'start'); due.setAttribute('data-bd-field', 'due');
+  const milestone = field({ label: COPY.labels.milestone, kind: 'check', value: !!it0.milestone, attrs: { 'data-bd-input': 'milestone' }, onCommit: (v) => ctx.setFields(id, { milestone: !!v }) });
+  milestone.setAttribute('data-bd-field', 'milestone');
+  const reason = field({
+    label: COPY.labels.blockedBecause, kind: 'text', value: (it0.blocked && it0.blocked.reason) || '', attrs: { 'data-bd-input': 'blocked-reason', maxlength: '200' },
+    onCommit: (v) => { const r = v.trim(); if (blocked.control.checked && r) ctx.flag(id, true, r); },
+  });
+  reason.setAttribute('data-bd-field', 'blocked-reason');
+  const blocked = field({
+    label: COPY.labels.blocked, kind: 'check', value: !!it0.blocked, attrs: { 'data-bd-input': 'blocked' },
+    onCommit: (on) => {
+      reason.hidden = !on;
+      const cur = item();
+      if (on) { const r = reason.control.value.trim(); if (r) ctx.flag(id, true, r); else reason.control.focus(); }
+      else if (cur && cur.blocked) ctx.flag(id, false);
+    },
+  });
+  blocked.setAttribute('data-bd-field', 'blocked');
+  reason.hidden = !it0.blocked;
+
+  /* 9 · note */
+  const note = field({ label: COPY.labels.note, kind: 'textarea', value: it0.note || '', attrs: { 'data-bd-input': 'note', maxlength: '1000' }, onCommit: (v) => ctx.setFields(id, { note: v.trim() ? v : null }) });
+  note.setAttribute('data-bd-field', 'note');
+
+  /* 10 · hand to agent */
+  const handSlot = el('div', { 'data-bd-field': 'handoff' });
+  const handButton = () => button({
+    label: COPY.handToAgent, variant: 'outline', block: true, icon: 'bot', iconEnd: 'chevron-right', attrs: { 'data-bd-hand': '' },
+    onClick: () => showHandoff(),
+  });
+  const showHandoff = () => {
+    while (handSlot.firstChild) handSlot.removeChild(handSlot.firstChild);
+    handSlot.appendChild(handoffBox({
+      ws: ctx.ws, slug: ctx.slug, item: item() || it0, sessions: ctx.sessions(),
+      onCancel: () => { while (handSlot.firstChild) handSlot.removeChild(handSlot.firstChild); const b = handButton(); handSlot.appendChild(b); b.focus(); },
+      onStarted: () => sh.close(),
+    }));
+  };
+  handSlot.appendChild(handButton());
+
+  /* 11 · history */
+  const histList = el('ol', { class: 'bd-hist', 'aria-label': COPY.labels.history });
+  const drawHistory = (it) => {
+    while (histList.firstChild) histList.removeChild(histList.firstChild);
+    const rows = [...(it.history || [])].reverse();
+    for (const h of rows) {
+      histList.appendChild(el('li', { class: 'bd-hist__row' },
+        el('span', { class: 'bd-hist__by' }, h.byLabel || ''),
+        el('span', { class: 'bd-hist__text' }, h.text || h.ev),
+        el('span', { class: 'bd-hist__when', title: h.at || '' }, ago(h.at))));
+    }
+  };
+  const history = el('div', { 'data-bd-field': 'history' },
+    el('div', { class: 'bd-hist__head' }, icon('history'), el('span', null, COPY.labels.history)), histList);
+
+  const withdraw = button({ label: COPY.labels.withdraw, variant: 'danger', attrs: { 'data-bd-withdraw': '' }, onClick: () => { sh.close(); ctx.withdraw(id); } });
+  const closeBtn = button({ label: COPY.labels.close, variant: 'outline', attrs: { 'data-bd-close': '' }, onClick: () => sh.close() });
+
+  const sh = sheet({
+    mode: 'auto', title: it0.title, sub: ctx.slug + ' · ' + stageLabel(L0, it0.stage),
+    attrs: { 'data-bd-sheet': id },
+    body: [stateSlot, noteSlot, title, el('div', { class: 'bd-grid2' }, el('div', { class: 'bd-group' }, owner, ownerNameField), stage),
+      afterSlot, el('div', { class: 'bd-grid2' }, start, due), el('div', { class: 'bd-checks' }, milestone, blocked), reason, note, handSlot, history],
+    actions: [withdraw, closeBtn],
+    onClose: () => { if (ctx.onClose) ctx.onClose(id); },
+  });
+  showOwnerName(ownerKind(it0.owner));
+
+  const refresh = () => {
+    const it = item();
+    if (!it) { sh.close(); return; }
+    const L = ctx.view();
+    sh.setHead(it.title, ctx.slug + ' · ' + stageLabel(L, it.stage));
+    const tabFocused = stateSlot.contains(document.activeElement);
+    drawState(it);
+    drawNote(it);
+    if (tabFocused) { const b = stateSlot.querySelector('[aria-checked="true"]'); if (b) b.focus(); }
+    if (!focused(title.control)) title.control.resetCommitted(it.title);
+    if (!focused(owner.control)) { owner.control.value = ownerKind(it.owner); showOwnerName(ownerKind(it.owner)); }
+    if (!focused(ownerNameField.control) && ownerName(it.owner)) ownerNameField.control.resetCommitted(ownerName(it.owner));
+    if (!focused(stage.control)) stage.control.value = it.stage;
+    if (!afterSlot.contains(document.activeElement)) drawAfter(it);
+    if (!focused(start.control)) start.control.value = it.start || '';
+    if (!focused(due.control)) due.control.value = it.due || '';
+    milestone.control.checked = !!it.milestone;
+    if (!focused(reason.control) && !focused(blocked.control)) {
+      blocked.control.checked = !!it.blocked;
+      reason.control.resetCommitted((it.blocked && it.blocked.reason) || '');
+      reason.hidden = !it.blocked;
+    }
+    if (!focused(note.control)) note.control.resetCommitted(it.note || '');
+    drawHistory(it);
+  };
+  drawState(it0); drawNote(it0); drawAfter(it0); drawHistory(it0);
+  if (handoff) showHandoff();
+  else { const b = stateSlot.querySelector('[aria-checked="true"]'); if (b) b.focus(); }
+  return { id, refresh, close: () => sh.close(), get open() { return sh.open; } };
+}
+

package/workspace/public/pm/keep-card.js

@@ -0,0 +1,204 @@
+/* pm/keep-card.js — the Keep card, and the breakdown rows of Today's needs-you list (pm-os-absorb Run 1, PRD R21/R23).
+ *
+ * An agent's items arrive PROPOSED: they show in the Tree and on the Board but count in no progress until the PM keeps
+ * them. One card per batch (everything one agent session proposed on one initiative) offers Keep or Withdraw all.
+ *   Tree   "Agent · sess-3 proposed 9 items on 5 Oct."   [Keep] [Withdraw all]
+ *   Today  • <initiative> · 9 items · agent · sess-3      [Keep] [Withdraw all]
+ * The batch is named by the session label the rows already show, so two batches on one initiative read apart.
+ * Keep writes one `kept` line, and only from this page (the server refuses `kept` from anywhere else). Withdraw all goes
+ * through the Undo hold and then writes one `withdrawn` per item in one request. The card reads the batch as the server
+ * last sent it, so an item proposed after the read stays proposed and appears on the next refresh as a new count.
+ *
+ * Today's other two breakdown rows — an agent Done with no evidence, and a ledger line that has no effect (a forged Keep) —
+ * render as plain cards that open the initiative. All three come from the existing GET /api/needs.
+ */
+
+import { el } from './dom.js';
+import { button, toast, ensureComponentsCss } from './primitives.js';
+import { COPY, dayOf } from './breakdown-copy.js';
+import { postEvents, getNeeds } from './breakdown-api.js';
+import { hold, isHeld } from './undo-hold.js';
+import { wsOf } from './data.js';
+import { state, setState, FIXTURE } from './state.js';
+import { registerTodaySource } from './registry.js';
+import { records } from './board-read.js';
+import { COPY as TODAY } from './today-copy.js';
+import { todayCard, ensureFeed, onFeed } from './today-cards.js';
+
+export const keepKey = (ws, initiative, by) => 'batch:' + ws + ':' + initiative + ':' + by;
+
+/**
+ * keepCard({ ws, initiative, initiativeTitle, batch, place: 'tree'|'today', onChanged(what), onHoldApply(layout) })
+ * `onChanged` runs after Keep is written, when Withdraw all is held, undone or written. `onHoldApply` is the overlay the
+ * hold applies to a fetched layout (the Tree passes one; Today hides the card while the hold runs).
+ */
+export function keepCard({ ws, initiative, initiativeTitle, batch, place = 'tree', repo, cardId, onChanged, onHoldApply, onKeepApply }) {
+  const n = batch.count || (batch.items || []).length;
+  const key = keepKey(ws, initiative, batch.by);
+  const doKeep = async (btn) => {
+    btn.disabled = true;
+    if (onKeepApply) onKeepApply();
+    const out = await postEvents(ws, [{ ev: 'kept', initiative, batch: batch.by, items: batch.items }]);
+    if (!out || out.ok === false) { toast({ text: (out && out.error) || 'nothing was saved', tone: 'error' }); btn.disabled = false; }
+    else toast({ text: COPY.kept(n) });
+    if (onChanged) onChanged({ kept: true, ok: !!(out && out.ok !== false) });
+  };
+  const doWithdrawAll = () => {
+    hold({
+      key, ws, text: COPY.withdrewN(n),
+      events: (batch.items || []).map((id) => ({ ev: 'withdrawn', item: id })),
+      apply: onHoldApply || null,
+      onDone: () => { if (onChanged) onChanged({ withdrawn: true }); },
+      onUndo: () => { if (onChanged) onChanged({ undone: true }); },
+    });
+    if (onChanged) onChanged({ held: true });
+  };
+  const attrs = { 'data-bd-keep-card': place, 'data-batch': batch.by, 'data-initiative': initiative, 'data-count': String(n) };
+  if (place === 'today') {
+    // R12: a Today card has ONE button. Keep is it; Withdraw all is in the ⋯ menu and is said on the card.
+    return todayCard({
+      kind: 5, id: cardId || key, repo, ws, initiative, cause: (initiativeTitle || initiative) + ' · ' + COPY.keepToday(n, batch.byLabel),
+      evidence: TODAY.keepHint, act: { label: COPY.keep }, actAttrs: { 'data-bd-keep': '' },
+      menuExtra: [{ label: TODAY.withdrawAll, onSelect: doWithdrawAll }], attrs: { ...attrs, 'data-today-row': 'keep' },
+      onAct: (e) => doKeep(e.currentTarget),
+    });
+  }
+  const keep = button({ label: COPY.keep, variant: 'outline', size: 'sm', attrs: { 'data-bd-keep': '' }, onClick: () => doKeep(keep) });
+  const withdrawAll = button({ label: COPY.withdrawAll, variant: 'ghost', size: 'sm', attrs: { 'data-bd-withdraw-all': '' }, onClick: doWithdrawAll });
+  const text = [el('span', null, COPY.keepTree(n, dayOf(batch.firstAt || batch.lastAt), batch.byLabel))];
+  return el('div', { class: 'bd-keep', ...attrs }, el('div', { class: 'bd-keep__text' }, text), el('div', { class: 'bd-keep__actions' }, keep, withdrawAll));
+}
+
+/* ── Today ─────────────────────────────────────────────────────────────────────────────────────────────────────────── */
+
+const KINDS = ['keep', 'evidence', 'plan-flag'];
+const cache = new Map();   // ws -> { rows, loading, stale }
+let rerender = null;
+let hooked = false;
+
+function load(ws) {
+  const c = cache.get(ws) || { rows: [], loading: false, stale: true };
+  cache.set(ws, c);
+  // A change that arrives while a read is in flight is not dropped: that read may have started before the change, so
+  // it is read once more when the read ends.
+  if (c.loading) { c.again = true; return; }
+  c.loading = true; c.again = false;
+  getNeeds(ws).then((out) => {
+    c.loading = false; c.stale = false;
+    c.rows = out && Array.isArray(out.needs) ? out.needs.filter((r) => r && KINDS.includes(r.kind) && r.run_id !== 'plan-items:unreadable') : [];
+    if (c.again) load(ws);
+    if (rerender) rerender(); else setState({});
+  });
+}
+
+function hook() {
+  if (hooked || typeof window === 'undefined') return;
+  hooked = true;
+  window.addEventListener('pmos:ledgers', (e) => {
+    const changed = (e && e.detail && e.detail.changed) || [];
+    let any = false;
+    for (const ws of changed) { const c = cache.get(ws); if (c) { c.stale = true; any = true; load(ws); } }
+    if (any && rerender) rerender();
+  });
+}
+
+/**
+ * Read the breakdown rows of every repository once, so the nav's Today count includes them before Today has rendered.
+ * The nav calls it on each render. It starts a request only for a workspace that is not in the cache yet, and only after
+ * the first sessions poll has answered (`state.sessions` is set), so the page's startup makes no extra request. After
+ * that, a workspace is read again only on a `pmos:ledgers` change, as for Today. Fixture mode reads nothing.
+ */
+export function primePlanNeeds(repos) {
+  if (FIXTURE || !Array.isArray(state.sessions)) return;
+  hook();
+  for (const repo of repos || []) {
+    const ws = wsOf(repo);
+    if (ws && !cache.has(ws)) load(ws);
+  }
+}
+
+/**
+ * How many breakdown rows need the PM, over every workspace read so far (Keep batches not held for Undo, evidence and
+ * check rows). The nav's Today count adds it, so the badge and Today's header count the same rows. Reads the cache that
+ * primePlanNeeds() and Today fill; it fetches nothing itself. 0 in fixture mode.
+ */
+function planCount(repos) {
+  let n = 0;
+  for (const repo of repos || []) {
+    const ws = wsOf(repo);
+    if (!ws) continue;
+    primePlanNeeds([repo]);
+    ensureFeed(ws);
+    for (const row of (cache.get(ws) || { rows: [] }).rows) {
+      if (row.kind === 'keep' && row.batch && isHeld(keepKey(ws, row.initiative_id, row.batch.by))) continue;
+      n++;
+    }
+  }
+  return n;
+}
+
+export function planNeedsCount() {
+  let n = 0;
+  for (const [ws, c] of cache) {
+    for (const row of c.rows || []) {
+      if (row.kind === 'keep' && row.batch && isHeld(keepKey(ws, row.initiative_id, row.batch.by))) continue;
+      n++;
+    }
+  }
+  return n;
+}
+
+/**
+ * The breakdown cards for Today's needs-you column: Keep cards, then evidence and check cards, for the given
+ * repositories. `open(repo, slug)` opens the initiative; `titleOf(slug)` names it; `onRender` is called when new rows
+ * arrive. Reads /api/needs once per workspace and again when that workspace's ledger changes. Fixture mode reads nothing.
+ * Every card is a Today card (today-cards.js): a cause, its evidence, one button and the ⋯ menu, with the id the server
+ * ranks by (`<ws>|<run id>`).
+ */
+export function planNeedsCards({ repos, fixture, onRender, open, titleOf }) {
+  if (fixture) return [];
+  rerender = onRender || rerender;
+  hook();
+  const out = [];
+  for (const repo of repos || []) {
+    const ws = wsOf(repo);
+    if (!ws) continue;
+    ensureFeed(ws);
+    const c = cache.get(ws);
+    if (!c || (c.stale && !c.loading)) load(ws);
+    for (const row of (c && c.rows) || []) {
+      const slug = row.initiative_id;
+      const cardId = ws + '|' + row.run_id;
+      if (row.kind === 'keep' && row.batch) {
+        if (isHeld(keepKey(ws, slug, row.batch.by))) continue;
+        out.push(keepCard({
+          ws, repo, cardId, initiative: slug, initiativeTitle: titleOf ? titleOf(slug) : slug, batch: row.batch, place: 'today',
+          onChanged: () => { const cc = cache.get(ws); if (cc) { cc.stale = true; load(ws); } if (rerender) rerender(); },
+        }));
+      } else {
+        const evidence = row.kind === 'evidence';
+        out.push(todayCard({
+          kind: evidence ? 4 : 8, id: cardId, repo, ws, initiative: slug, cause: row.question,
+          evidence: [titleOf ? titleOf(slug) : slug, evidence ? COPY.needs.evidence : COPY.needs.flag, COPY.derived].filter(Boolean).join(' · '),
+          act: { label: COPY.needs.open }, onAct: () => { if (open) open(repo, slug); },
+          attrs: { 'data-bd-need': row.kind, 'data-item': row.item || null, 'data-today-row': row.kind },
+        }));
+      }
+    }
+  }
+  if (out.length) ensureComponentsCss();
+  return out;
+}
+
+/* The Today source: the breakdown's rows as cards of kinds 4, 5 and 8, counted once with every other source. */
+if (!FIXTURE) {
+  onFeed((ws) => { const c = cache.get(ws); if (c) { c.stale = true; load(ws); } });
+  registerTodaySource({
+    id: 'plan-rows', kind: null, rank: 30,
+    count: (ctx) => planCount(ctx.repos),
+    cards: (ctx) => planNeedsCards({
+      repos: ctx.repos, fixture: false, onRender: () => (ctx.setState ? ctx.setState({}) : setState({})),
+      open: (r, slug) => (ctx.open ? ctx.open(r, slug) : null), titleOf: (slug) => (records()[slug] && records()[slug].tag) || slug,
+    }),
+  });
+}

package/workspace/public/pm/lifecycle.js

@@ -8,6 +8,7 @@
  */
 import { el } from './dom.js';
 import { state, setState, FIXTURE } from './state.js';
+import { askText } from './dialogs.js';
 
 let dataMod = null;
 const dataReady = import('./data.js').then((m) => { dataMod = m; }).catch(() => { dataMod = null; });
@@ -29,7 +30,12 @@ function refresh(product) {
 
 async function apply(product, slug, to) {
   const word = to === 'active' ? 'Reopen' : to === 'closed' ? 'Close' : to === 'on-hold' ? 'Put on hold' : 'Cancel';
-  const reason = to === 'active' ? '' : (typeof window !== 'undefined' && window.prompt ? window.prompt(word + ' “' + slug + '” — why? (one line, kept in the record)', '') : '');
+  // The two buttons never share a word: the back-out says Back and the act says what it does (Cancel initiative).
+  const act = to === 'cancelled' ? 'Cancel initiative' : word;
+  const reason = to === 'active' ? '' : await askText({
+    title: word + ' “' + slug + '”', label: 'Why? One line, kept in the record.',
+    confirmLabel: act, cancelLabel: 'Back', danger: to === 'closed' || to === 'cancelled',
+  });
   if (reason === null) return;                       // the PM backed out
   const out = await dataMod.setLifecycle(product, slug, to, String(reason).trim());
   if (!out || out.ok === false) { setState({ lcNotice: { slug, text: (out && out.error) || 'not recorded' } }); return; }

package/workspace/public/pm/mobile.css

@@ -85,9 +85,9 @@
     gap: 10px;
     height: 52px;
     padding: 0 14px;
-    background: oklch(0.1 0.004 228.8);
-    color: oklch(0.987 0.002 197.1);
-    border-bottom: 1px solid oklch(1 0 0 / 10%);
+    background: var(--sidebar);
+    color: var(--foreground);
+    border-bottom: 1px solid var(--border);
   }
   /* 44px minimums on every control: the phone's targets are thumbs, not a pointer. */
   .mob-back {
@@ -98,17 +98,17 @@
     min-width: 44px;
     min-height: 44px;
     margin-left: -6px;
-    color: oklch(0.85 0.01 214);
+    color: var(--muted-foreground);
     font-size: 14px;
   }
   .mob-brand {
     flex: none;
     display: grid;
     place-items: center;
-    width: 26px;
-    height: 26px;
-    background: oklch(0.488 0.243 264.376);
-    font-size: 14px;
+    width: auto;
+    font-family: var(--mono);
+    font-size: 12px;
+    font-weight: 600;
     line-height: 1;
   }
   .mob-title {
@@ -117,7 +117,7 @@
     text-align: center;
     font-family: var(--mono);
     font-size: 12px;
-    color: oklch(0.85 0.01 214);
+    color: var(--muted-foreground);
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -128,17 +128,40 @@
     place-items: center;
     min-width: 44px;
     min-height: 44px;
-    color: oklch(0.85 0.01 214);
+    color: var(--muted-foreground);
   }
   .mob-pal { font-family: var(--mono); font-size: 12px; }
-  .mob-theme { font-size: 15px; }
-  .mob-back:active, .mob-pal:active, .mob-theme:active { color: oklch(0.987 0.002 197.1); }
+  .mob-back:active, .mob-pal:active, .mob-theme:active { color: var(--foreground); }
+
+  /* The frame's bar controls (pm-os-absorb Run 3, slice 3A): Repository, which opens the repository menu, and
+   * Sync (only while the current repository is not in sync), and Settings. Words, at the bar's own ink; 44px targets like
+   * every control here. A button does not inherit the font, so Back says it too. */
+  .mob-back { font-family: var(--sans); }
+  .mob-repo, .mob-set, .mob-sync {
+    flex: none;
+    display: flex;
+    align-items: center;
+    min-width: 44px;
+    min-height: 44px;
+    padding: 0 6px;
+    color: inherit;
+    font-family: var(--sans);
+    font-size: 12px;
+  }
+  .mob-repo {
+    max-width: 128px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-weight: 600;
+  }
+  .mob-set[aria-current="page"] { text-decoration: underline; }
 
   /* ── the bottom block ────────────────────────────────────────────────────────────────────── */
 
   .mobmenu {
-    background: oklch(0.1 0.004 228.8);
-    border-top: 1px solid oklch(1 0 0 / 10%);
+    background: var(--sidebar);
+    border-top: 1px solid var(--border);
     /* viewport-fit=cover is on, so the home indicator's strip is ours to pad past. */
     padding-bottom: env(safe-area-inset-bottom, 0px);
   }
@@ -153,7 +176,7 @@
     overflow-x: auto;
     -webkit-overflow-scrolling: touch;
     background: var(--muted);
-    border-bottom: 1px solid oklch(1 0 0 / 10%);
+    border-bottom: 1px solid var(--border);
   }
   .mobmenu[data-view="terminal"] .ctrlbar { display: flex; }
   .ctrlbar button {
@@ -170,9 +193,9 @@
   }
   .ctrlbar button:active { background: var(--accent); }
   .ctrlbar button[aria-pressed="true"] {
-    border-color: var(--brand);
-    color: var(--brand);
-    background: var(--brand-wash);
+    border-color: var(--foreground);
+    color: var(--foreground);
+    background: var(--accent);
   }
   .ctrlbar .lbl { font-size: 11px; letter-spacing: .04em; }
 
@@ -187,14 +210,20 @@
     min-width: 0;
     min-height: 64px;
     padding: 0 2px;
-    color: oklch(0.6 0.02 213);
+    color: var(--muted-foreground);
   }
   .mobnav-b .g { font-size: 17px; line-height: 1; }
   .mobnav-b .l { font-size: 10px; line-height: 1; }
-  .mobnav-b[aria-current="page"] { color: oklch(0.987 0.002 197.1); }
+  .mobnav-b[aria-current="page"] { color: var(--foreground); }
+  /* The tabs are words (the frame's five tabs); the Today tab carries the count of what needs the PM. */
+  .mobnav-b { font-family: var(--sans); }
+  .mobnav-b .l { font-size: 12px; }
+  .mobnav-b[aria-current="page"] .l { text-decoration: underline; text-underline-offset: 4px; }
+  .mobnav-n { font-family: var(--mono); font-size: 11px; line-height: 1; }
 }
 
 /* `hidden` wins over every display above, in both directions of the breakpoint. Back is ABSENT at a
  * destination root rather than present-and-inert: a control that looks available and does nothing is
  * the thing this workspace refuses to ship. */
 .mob[hidden], .mobmenu[hidden], .mob-back[hidden], .mob-brand[hidden] { display: none !important; }
+.mob-repo[hidden], .mob-set[hidden], .mob-sync[hidden], .mob-theme[hidden], .mobnav-n[hidden] { display: none !important; }