create-pmos 0.186.0 → 0.187.0

package/workspace/public/pm/c3-ini-life.js

@@ -0,0 +1,379 @@
+/* pm/c3-ini-life.js — On hold, Cancelled, Merge and Archive for an initiative (c3-initiative-lifecycle; mockup v2, 34-initiatives.js
+ * "LIFECYCLE", approved 2026-10-13; planning/prd/c3-initiative-lifecycle-prd.md).
+ *
+ * Stage says where the work is in its workflow. Status says how it is going: On track, At risk or Late while it is active, or a stop
+ * the PM chose: On hold, Cancelled. Done is the end of the workflow. Archive is not a status: it takes an initiative out of every
+ * board list and count and keeps it whole, so Restore brings it back as it was. Merge archives a duplicate as "Merged into <id>"
+ * after moving its Jira epic links and PMOS tasks.
+ *
+ *   rowMenu(anchor, L, r)         the row's "…" menu: Move to a stage, Status, Tidy up
+ *   pageMenu(anchor, L, r)        the initiative page's "…" menu: Status and Tidy up
+ *   lifeBanner(L, r)              the page banner of an on-hold, cancelled or archived initiative, or null
+ *   lifeChips(r) · archivedChips(r) · dupChip(L, r)   the chips a row shows
+ *   restoreBtn(L, r)              Restore, or Undo merge
+ * L = { ctx, done(change) }: ctx is the tab or page ctx of c3-initiatives.js; done() is called after a write lands, with
+ *   { kind, id, status?, archived? } so the caller can read again until the answer shows it.
+ *
+ * WRITES. Hold, cancel, resume and reopen are D70 lifecycle lines (POST /api/lifecycle, a PM press). Archive, restore, merge and
+ * not-a-duplicate are board-ledger lines (POST /api/boards/archive, /merge, /notdup). Moving to another board is POST
+ * /api/boards/assign. Every action's toast has Undo, which writes the opposite line. Nothing here writes a record or Jira. */
+import { el } from './dom.js';
+import { btn, icon, pill, lk, pbtn, chip, st, lbl, statusChip, sw, openMenu, closeMenu, put, trunc, day, plural, card, chgl, chgli } from './c3-ini-ui.js';
+import { openSheet, closeSheet } from './c3-sheet.js';
+import { toast } from './c3-toast.js';
+import { wfOf } from './c3-ini-work.js';
+
+/** Link c3-ini-life.css once, from this module's own folder. */
+export function ensureLifeCss() {
+  if (typeof document === 'undefined' || document.querySelector('link[data-c3-life]')) return;
+  const l = document.createElement('link');
+  l.rel = 'stylesheet'; l.href = new URL('./c3-ini-life.css', import.meta.url).href; l.setAttribute('data-c3-life', '');
+  document.head.appendChild(l);
+}
+ensureLifeCss();
+
+export const ACTIVE = ['on track', 'at risk', 'late'];
+export const isActive = (r) => !!r && ACTIVE.includes(r.status);
+const BACK = [['two', 'In 2 weeks', 14], ['month', 'In a month', 30], ['quarter', 'Next quarter', 80], ['none', 'No date', null]];
+const WHY = [['needed', 'No longer needed'], ['replaced', 'Replaced by another initiative'], ['worth', 'Not worth it now'], ['kill', 'Hit a kill condition'], ['other', 'Other']];
+const AWHY = [['unrelated', 'Not related to this board'], ['stale', 'Old idea, never started'], ['dup', 'Duplicate'], ['other', 'Other']];
+const LC = { 'on hold': 'on-hold', cancelled: 'cancelled' };
+
+function addDays(iso, n) {
+  const [y, m, d] = String(iso || '').split('-').map(Number);
+  const t = new Date(Date.UTC(y || 2026, (m || 1) - 1, d || 1) + n * 864e5);
+  return t.toISOString().slice(0, 10);
+}
+/* A sheet's line of text. Not `.ini-note`: the quiet pages hide those, and a sheet's sentences are what it asks. */
+const inote = (...kids) => el('div', { class: 'dim il-note' }, ...kids);
+const dayOf = (v) => (v ? day(String(v).slice(0, 10)) : '');
+const errText = (r) => (r && r.error) || 'no answer';
+const pct = (r) => Math.round((Number(r.progress) || 0) * 100) + '% done';
+
+/* ── the writes ── */
+async function lifecycle(L, id, state, reason, back) {
+  const body = { initiative_id: id, state, reason: reason || '' };
+  if (back) body.back = back;
+  return L.ctx.api.post('/api/lifecycle', body);
+}
+const archive = (L, id, archived, reason) => L.ctx.api.post('/api/boards/archive', { board: L.ctx.board.id, id, archived, ...(reason ? { reason } : {}) });
+const merge = (L, id, into, epics, tasks) => L.ctx.api.post('/api/boards/merge', { board: L.ctx.board.id, id, into, epics, tasks });
+const failed = (what, r) => { toast({ text: what + ' did not save: ' + errText(r) + '.', tone: 'error' }); return false; };
+
+/** The lifecycle line that puts `r` back as it was before this change (Undo). */
+function priorState(r) {
+  if (r.status === 'on hold') return { state: 'on-hold', reason: (r.stopped && r.stopped.reason) || '', back: (r.stopped && r.stopped.back) || null };
+  if (r.status === 'cancelled') return { state: 'cancelled', reason: (r.stopped && r.stopped.reason) || '', back: null };
+  return { state: 'active', reason: '', back: null };
+}
+const statusAfter = (state) => (state === 'on-hold' ? 'on hold' : state === 'cancelled' ? 'cancelled' : null);
+
+async function setState(L, r, state, reason, back, words) {
+  const prev = priorState(r);
+  const res = await lifecycle(L, r.id, state, reason, back);
+  if (!res || !res.ok) return failed('The change', res);
+  closeSheet();
+  L.done({ kind: 'status', id: r.id, status: statusAfter(state) });
+  toast(words, async () => {
+    const u = await lifecycle(L, r.id, prev.state, prev.reason, prev.back);
+    if (!u || !u.ok) { failed('The undo', u); return; }
+    L.done({ kind: 'status', id: r.id, status: statusAfter(prev.state) || r.status });
+  });
+  return true;
+}
+const resume = (L, r) => setState(L, r, 'active', '', null, r.id + ' is active again, in ' + r.stage);
+const reopen = (L, r) => setState(L, r, 'active', '', null, r.id + ' is reopened, in ' + r.stage);
+
+async function restore(L, r) {
+  const a = r.archived || {};
+  const res = await archive(L, r.id, false);
+  if (!res || !res.ok) return failed('The restore', res);
+  L.done({ kind: 'archive', id: r.id, archived: false });
+  toast(a.into ? 'The merge of ' + r.id + ' is undone. What moved went back.' : r.id + ' restored', async () => {
+    const u = a.into ? await merge(L, r.id, a.into, (a.moved && a.moved.epics) || [], (a.moved && a.moved.tasks) || []) : await archive(L, r.id, true, a.reason || '');
+    if (!u || !u.ok) { failed('The undo', u); return; }
+    L.done({ kind: 'archive', id: r.id, archived: true });
+  });
+  return true;
+}
+
+/* ── the sheet frame ── */
+const field = (label, ...kids) => el('div', { class: 'ini-field' }, lbl(label), ...kids);
+function pills(key, opts, cur, onPick) {
+  return el('div', { class: 'chips2', role: 'radiogroup', 'aria-label': key },
+    ...opts.map(([v, l]) => pill({ role: 'radio', 'aria-checked': String(cur === v), 'aria-pressed': String(cur === v), 'data-il-set': key, 'data-v': v, onclick: () => onPick(v) }, l)));
+}
+const happens = (lines) => card({ ic: 'info', title: 'What happens' }, chgl(lines.filter(Boolean).map(([ic, t]) => chgli(ic, t))));
+const jiraLine = (L) => (L.ctx.board.build ? ['jira', 'Its Jira epics are not changed. PMOS records this; you decide in Jira.'] : null);
+function foot(sh, label, onDo, attrs, busy) {
+  return el('div', { class: 'chips2 il-foot' }, pbtn('ghost', 'Not now', null, { 'data-il': 'not-now', onclick: () => sh.close() }),
+    pbtn('primary', busy ? 'Saving' : label, null, { 'data-il-do': attrs, disabled: !!busy, onclick: onDo }));
+}
+function textBox(label, ph, value, onInput, key) {
+  return el('textarea', { rows: '2', 'aria-label': label, placeholder: ph, 'data-il-text': key, oninput: (e) => onInput(e.target.value) }, value || '');
+}
+const head = (r) => inote(el('b', null, r.title || r.id), ' · ' + (r.stage || 'no stage') + ' · ' + pct(r));
+function sheet(title, ic, wide) {
+  const host = el('div', { class: 'ini-form il-sheet', 'data-il': 'sheet' });
+  const sh = openSheet({ title, icon: ic, body: host, wide: !!wide });
+  return { host, sh };
+}
+
+/* ── Put on hold ── */
+export function openHold(L, r) {
+  const F = { reason: '', back: 'month', busy: false };
+  const { host, sh } = sheet('Put on hold · ' + r.id, 'moon');
+  const ta = textBox('Why is it paused', 'For example: waiting for the Q1 budget decision', '', (v) => { F.reason = v; }, 'reason');
+  const backDay = () => { const b = BACK.find((x) => x[0] === F.back); return b && b[2] != null ? addDays(L.ctx.today, b[2]) : null; };
+  function render() {
+    const d = backDay();
+    put(host, head(r), field('WHY IS IT PAUSED', el('div', { class: 'form' }, ta)), field('CHECK BACK', pills('back', BACK, F.back, (v) => { F.back = v; render(); })),
+      happens([['check', 'Keeps its stage (' + (r.stage || 'none') + '), its work and its history'],
+        ['moon', 'Shows as On hold. It leaves Now and next and the at-risk counts, and never turns Late while paused'],
+        ['spark', 'The agent stops driving it'],
+        ['bell', d ? 'The check-back date, ' + day(d) + ', shows on its row and its page' : 'No check-back date: it stays paused until you resume it'],
+        jiraLine(L)]),
+      foot(sh, 'Put on hold', go, 'hold', F.busy));
+  }
+  async function go() {
+    F.busy = true; render();
+    const ok = await setState(L, r, 'on-hold', F.reason.trim(), backDay(), r.id + ' is on hold');
+    if (!ok) { F.busy = false; if (host.isConnected) render(); }
+  }
+  render(); ta.focus();
+}
+
+/* ── Cancel ── */
+export function openCancel(L, r) {
+  const F = { why: '', note: '', busy: false };
+  const { host, sh } = sheet('Cancel · ' + r.id, 'x');
+  const ta = textBox('Note', 'What did we learn, and who was told', '', (v) => { F.note = v; }, 'note');
+  function render() {
+    put(host, head(r), field('WHY', pills('why', WHY, F.why, (v) => { F.why = v; render(); })),
+      F.why === 'replaced' ? inote('If the other initiative does the same thing, ', lk({ 'data-il': 'merge-instead', onclick: () => openMerge(L, r) }, 'merge it instead'), '. Its work then moves over.') : null,
+      field('NOTE (OPTIONAL)', el('div', { class: 'form' }, ta)),
+      happens([['x', 'Shows as Cancelled. The Summary and the counts treat it as cancelled, not done'],
+        ['eye', 'Hidden from every view until the Status filter asks for Cancelled'],
+        ['check', 'Keeps its stage (' + (r.stage || 'none') + '), its work and its history'],
+        ['spark', 'The agent stops driving it'],
+        ['undo', 'Reopen it any time; it comes back at the same stage'],
+        jiraLine(L)]),
+      F.why ? foot(sh, 'Cancel initiative', go, 'cancel', F.busy) : el('div', { class: 'chips2 il-foot' }, inote('Pick a reason to cancel.')));
+  }
+  async function go() {
+    const why = (WHY.find((w) => w[0] === F.why) || [null, ''])[1];
+    F.busy = true; render();
+    const ok = await setState(L, r, 'cancelled', why + (F.note.trim() ? ': ' + F.note.trim() : ''), null, r.id + ' is cancelled');
+    if (!ok) { F.busy = false; if (host.isConnected) render(); }
+  }
+  render();
+}
+
+/* ── Merge ── */
+const words = (s) => new Set(String(s || '').toLowerCase().replace(/[^a-z0-9 ]/g, ' ').split(/\s+/).filter((w) => w.length > 3));
+/** The three initiatives most like `r`: shared title words, the same anchor (+2), the duplicate hint (+5). */
+export function similar(r, rows) {
+  const w = words(r.title);
+  return rows.filter((x) => x.id !== r.id && !x.archived).map((x) => {
+    const xw = words(x.title); let n = 0; w.forEach((k) => { if (xw.has(k)) n++; });
+    return { x, n: n + (x.anchor && x.anchor === r.anchor ? 2 : 0) + (x.id === r.dupOf ? 5 : 0) };
+  }).filter((s) => s.n >= 2).sort((a, c) => c.n - a.n).slice(0, 3).map((s) => s.x);
+}
+async function boardRows(L) {
+  const out = [];
+  for (let off = 0; off < 500; off += 100) {
+    const r = await L.ctx.api.get('/api/boards/backlog', { board: L.ctx.board.id, view: 'all', sort: 'id', offset: off, limit: 100 });
+    if (!r || !r.ok) break;
+    out.push(...(r.rows || []));
+    if (out.length >= (r.total || 0)) break;
+  }
+  return out;
+}
+export function openMerge(L, r, into) {
+  const F = { pick: into || null, rows: null, tasks: null, moveEpics: true, moveTasks: true, busy: false };
+  const { host, sh } = sheet('Merge ' + r.id, 'branch', true);
+  Promise.all([boardRows(L), L.ctx.api.get('/api/boards/items', { board: L.ctx.board.id })]).then(([rows, it]) => {
+    F.rows = rows;
+    F.tasks = it && it.ok ? (it.items || []).filter((w) => w.src === 'pmos' && w.ini === r.id).map((w) => w.uid) : [];
+    if (!F.pick) { const s = similar(r, rows)[0]; F.pick = s ? s.id : null; }
+    if (host.isConnected) render();
+  });
+  function opt(x, k) {
+    const on = F.pick === x.id;
+    return btn({ class: 'opt' + (k === 0 ? ' rec' : ''), role: 'radio', 'aria-pressed': String(on), 'aria-checked': String(on), 'data-il-set': 'pick', 'data-v': x.id, onclick: () => { F.pick = x.id; render(); } },
+      el('span', { class: 'pk' }, icon('check')), el('span', { class: 'rk' }, k === 0 ? [icon('spark'), 'Most alike'] : null),
+      el('b', null, x.id + ' ' + (x.title || '')), el('div', { class: 'fx' }, el('span', null, x.stage || ''), el('span', null, x.anchor || 'no anchor'), el('span', null, x.owner || 'No owner')));
+  }
+  function render() {
+    if (!F.rows) { put(host, inote('Reading the initiatives of ' + L.ctx.board.name)); return; }
+    const sim = similar(r, F.rows);
+    const others = F.rows.filter((x) => x.id !== r.id && !x.archived && !sim.includes(x));
+    const tgt = F.rows.find((x) => x.id === F.pick) || null;
+    const epics = L.ctx.board.build ? (r.epics || []) : [];
+    const mv = (key, ic, label, n, hint, on, set) => el('label', { class: 'chips2 il-move' },
+      el('input', { type: 'checkbox', 'data-il-move': key, checked: !!(on && n), disabled: !n, onchange: (e) => set(e.target.checked) }),
+      el('span', null, icon(ic, 'sm'), ' ', el('b', null, label), ' ', el('span', { class: 'bdg g' }, String(n)), hint ? [el('br'), el('span', { class: 'dim il-hint' }, hint)] : null));
+    put(host,
+      inote('Merging moves what you pick from ', el('b', null, r.id + ' ' + (r.title || '')), ' into the initiative you keep. ' + r.id + ' then goes to the Archive as Merged.'),
+      field('KEEP WHICH INITIATIVE', sim.length ? el('div', { class: 'opts', role: 'radiogroup', 'aria-label': 'Keep which initiative' }, ...sim.map(opt)) : null,
+        el('label', { class: 'chips2' }, el('span', { class: 'dim il-hint' }, sim.length ? 'Or pick another' : 'Pick the initiative to keep'),
+          el('select', { 'data-il-pick': '', 'aria-label': 'Pick another initiative', onchange: (e) => { if (e.target.value) { F.pick = e.target.value; render(); } } },
+            el('option', { value: '' }, 'Choose…'), ...others.map((x) => el('option', { value: x.id, selected: F.pick === x.id && !sim.includes(x) }, x.id + ' ' + trunc(x.title, 50)))))),
+      tgt ? [
+        field('WHAT MOVES TO ' + tgt.id,
+          L.ctx.board.build ? mv('epics', 'jira', 'Jira epic links', epics.length, 'The link moves. Nothing changes in Jira.', F.moveEpics, (v) => { F.moveEpics = v; }) : null,
+          mv('tasks', 'todo', 'PMOS tasks', (F.tasks || []).length, '', F.moveTasks, (v) => { F.moveTasks = v; })),
+        happens([['check', tgt.id + ' keeps its title, stage (' + (tgt.stage || 'none') + '), owner and dates'],
+          ['clip', r.id + ' goes to the Archive as Merged into ' + tgt.id + ', with its history'],
+          ['doc', 'Documents, asks and notes stay with ' + r.id + ' and open from it'],
+          ['undo', 'Undo the merge from ' + r.id + ' in the Archive; what moved goes back']]),
+        r.dupOf === tgt.id ? inote(lk({ 'data-il': 'not-dup', onclick: notDup }, 'Not a duplicate'), ': the hint on ' + r.id + ' stops.') : null,
+        foot(sh, 'Merge into ' + tgt.id, () => go(tgt, epics), 'merge', F.busy)]
+        : inote('Pick the initiative to keep.'));
+  }
+  async function notDup() {
+    const res = await L.ctx.api.post('/api/boards/notdup', { board: L.ctx.board.id, id: r.id, of: r.dupOf });
+    if (!res || !res.ok) { failed('Not a duplicate', res); return; }
+    sh.close(); L.done({ kind: 'notdup', id: r.id });
+    toast(r.id + ' is not marked as a duplicate of ' + r.dupOf + ' again');
+  }
+  async function go(tgt, epics) {
+    F.busy = true; render();
+    const e = F.moveEpics ? epics : []; const t = F.moveTasks ? (F.tasks || []) : [];
+    const res = await merge(L, r.id, tgt.id, e, t);
+    if (!res || !res.ok) { F.busy = false; if (host.isConnected) render(); failed('The merge', res); return; }
+    sh.close();
+    L.done({ kind: 'archive', id: r.id, archived: true });
+    toast(r.id + ' merged into ' + tgt.id, async () => {
+      const u = await archive(L, r.id, false);
+      if (!u || !u.ok) { failed('The undo', u); return; }
+      L.done({ kind: 'archive', id: r.id, archived: false });
+    });
+  }
+  render();
+}
+
+/* ── Archive ── */
+export function openArchive(L, r) {
+  const F = { why: 'unrelated', note: '', board: '', boards: null, busy: false };
+  const { host, sh } = sheet('Archive · ' + r.id, 'clip');
+  const ta = textBox('Note', 'Anything you want to remember about it', '', (v) => { F.note = v; }, 'note');
+  L.ctx.api.get('/api/boards').then((res) => {
+    F.boards = res && res.ok ? (res.boards || []).filter((x) => x.ws === L.ctx.ws && x.id !== L.ctx.board.id) : [];
+    if (host.isConnected) render();
+  });
+  function render() {
+    const to = (F.boards || []).find((x) => x.id === F.board);
+    put(host, inote(el('b', null, r.title || r.id), ' · ' + (r.stage || 'no stage') + ' · ', statusChip(r.status)),
+      field('WHY', pills('why', AWHY, F.why, (v) => { F.why = v; render(); })),
+      F.why === 'dup' ? el('div', { class: 'fold w' }, icon('branch', 'sm'), ' A duplicate is better merged: its work moves to the one you keep. ',
+        lk({ 'data-il': 'merge-instead', onclick: () => openMerge(L, r, r.dupOf || null) }, 'Merge it instead')) : null,
+      F.why === 'unrelated' && F.boards && F.boards.length ? el('label', { class: 'chips2' }, el('span', { class: 'dim il-hint' }, 'Belongs on another board? Move it there instead'),
+        el('select', { 'data-il-board': '', 'aria-label': 'Move to board', onchange: (e) => { F.board = e.target.value; render(); } },
+          el('option', { value: '' }, 'Choose a board…'), ...F.boards.map((x) => el('option', { value: x.id, selected: x.id === F.board }, x.name))),
+        to ? pbtn('outline', 'Move to ' + to.name, 'next', { 'data-il-do': 'moveboard', onclick: () => moveBoard(to) }) : null) : null,
+      field('NOTE (OPTIONAL)', el('div', { class: 'form' }, ta)),
+      happens([['eye', 'It leaves every list, count and timeline of the board'],
+        ['check', 'Nothing is deleted. The record, its work and its history stay in the repository'],
+        ['undo', 'Restore it from the Archive any time, as it was'],
+        jiraLine(L)]),
+      foot(sh, 'Archive', go, 'archive', F.busy));
+  }
+  async function go() {
+    const why = (AWHY.find((w) => w[0] === F.why) || [null, ''])[1];
+    F.busy = true; render();
+    const res = await archive(L, r.id, true, why + (F.note.trim() ? ': ' + F.note.trim() : ''));
+    if (!res || !res.ok) { F.busy = false; if (host.isConnected) render(); failed('The archive', res); return; }
+    sh.close();
+    L.done({ kind: 'archive', id: r.id, archived: true });
+    toast(r.id + ' archived', async () => {
+      const u = await archive(L, r.id, false);
+      if (!u || !u.ok) { failed('The undo', u); return; }
+      L.done({ kind: 'archive', id: r.id, archived: false });
+    });
+  }
+  async function moveBoard(to) {
+    const from = L.ctx.board;
+    const res = await L.ctx.api.post('/api/boards/assign', { id: r.id, to: to.id });
+    if (!res || !res.ok) { failed('The move', res); return; }
+    sh.close();
+    L.done({ kind: 'board', id: r.id });
+    toast(r.id + ' moved to ' + to.name, async () => {
+      const u = await L.ctx.api.post('/api/boards/assign', { id: r.id, to: from.id });
+      if (!u || !u.ok) { failed('The undo', u); return; }
+      L.done({ kind: 'board', id: r.id });
+    });
+  }
+  render();
+}
+
+/* ── menus ── */
+const mi = (ic, label, hint, attr, onPick) => ({ kids: [icon(ic, 'sm'), el('span', null, label, hint ? [el('br'), el('span', { class: 'dim il-hint' }, hint)] : null)], attrs: { [attr]: '' }, onPick });
+function statusItems(L, r) {
+  if (r.archived) return [];
+  if (r.status === 'on hold') return [mi('play', 'Resume', 'Back to ' + r.stage + ', active again', 'data-il-resume', () => resume(L, r)), mi('x', 'Cancel…', 'Stop it for good, with a reason', 'data-il-cancel', () => openCancel(L, r))];
+  if (r.status === 'cancelled') return [mi('undo', 'Reopen', 'Back to ' + r.stage + ', active again', 'data-il-reopen', () => reopen(L, r))];
+  if (r.status === 'done') return [];
+  return [mi('moon', 'Put on hold…', 'Pause it; keeps its stage and work', 'data-il-hold', () => openHold(L, r)), mi('x', 'Cancel…', 'Stop it for good, with a reason', 'data-il-cancel', () => openCancel(L, r))];
+}
+function tidyItems(L, r) {
+  if (r.archived) return [mi('undo', r.archived.into ? 'Undo merge' : 'Restore', r.archived.into ? 'What moved goes back' : 'Back in the lists, as it was', 'data-il-restore', () => restore(L, r))];
+  return [mi('branch', 'Merge into another…', 'For a duplicate: its work moves over', 'data-il-merge', () => openMerge(L, r)), mi('clip', 'Archive…', 'Out of every list; restore any time', 'data-il-archive', () => openArchive(L, r))];
+}
+/** The row menu. stageItems: the Move to items (empty on a board that keeps the derived ladder, or for a cancelled initiative). */
+export function rowMenu(anchor, L, r, onMove) {
+  const stages = !onMove || r.status === 'cancelled' || r.archived ? [] : wfOf(r, L.ctx.board).map((s) => ({ kids: [sw(s.cat), s.name, s.name === r.stage ? el('span', { class: 'dim' }, ' (here)') : null], current: s.name === r.stage, disabled: s.name === r.stage, attrs: { 'data-ini-moveto': s.name }, onPick: () => onMove(s.name) }));
+  const status = statusItems(L, r);
+  openMenu(anchor, { label: 'Actions for ' + r.id, items: [
+    ...(stages.length ? [{ group: 'Move to a stage' }, ...stages] : []),
+    ...(status.length ? [{ group: 'Status' }, ...status] : []),
+    { group: 'Tidy up' }, ...tidyItems(L, r)] });
+}
+export function pageMenu(anchor, L, r) {
+  const status = statusItems(L, r);
+  openMenu(anchor, { label: 'Actions for ' + r.id, items: [...(status.length ? [{ group: 'Status' }, ...status] : []), { group: 'Tidy up' }, ...tidyItems(L, r)] });
+}
+
+/* ── chips and the banner ── */
+export function lifeChips(r) {
+  const s = r.stopped || {};
+  if (r.status === 'on hold') return [chip('since ' + (dayOf(s.at) || 'today')), s.back ? chip(icon('bell', 'sm'), 'check back ' + dayOf(s.back)) : null, s.reason ? el('span', { class: 'chip2 dim', title: 'Reason' }, trunc(s.reason, 48)) : null];
+  if (r.status === 'cancelled') return [s.at ? chip(dayOf(s.at)) : null, s.reason ? el('span', { class: 'chip2 dim', title: 'Reason' }, trunc(s.reason, 48)) : null];
+  return [];
+}
+export function archivedChips(r) {
+  const a = r.archived || {};
+  return [el('span', { class: 'chip2 mono' }, r.id),
+    a.into ? [el('span', { class: 'tag' }, icon('branch', 'sm'), 'Merged into ' + a.into), a.intoTitle && a.intoTitle !== a.into ? chip(trunc(a.intoTitle, 36)) : null]
+      : [el('span', { class: 'tag' }, icon('clip', 'sm'), 'Archived'), a.reason ? el('span', { class: 'chip2 dim' }, trunc(a.reason, 56)) : null],
+    a.at ? chip(dayOf(a.at)) : null, r.stage ? chip('was ' + r.stage) : null];
+}
+export const restoreBtn = (L, r) => pbtn('outline', r.archived && r.archived.into ? 'Undo merge' : 'Restore', 'undo', { 'data-il-restore': r.id, onclick: () => restore(L, r) });
+export function dupChip(L, r) {
+  if (!r.dupOf || r.archived) return null;
+  return btn({ class: 'tag acc', 'data-il-merge': r.id, 'data-into': r.dupOf, title: 'The same anchor and most of the same words', onclick: () => openMerge(L, r, r.dupOf) },
+    icon('spark', 'sm'), 'Looks like a duplicate of ' + r.dupOf);
+}
+export const mergedFromChip = (r) => (r.mergedFrom && r.mergedFrom.length ? chip(icon('branch', 'sm'), 'Merged from ' + r.mergedFrom.join(', ')) : null);
+export function lifeBanner(L, r) {
+  const s = r.stopped || {};
+  if (r.archived) {
+    const a = r.archived;
+    return el('div', { class: 'fold w il-banner', role: 'status', 'data-il': 'banner' }, icon('clip', 'sm'),
+      el('span', null, a.into ? 'Merged into ' + a.into + (a.intoTitle && a.intoTitle !== a.into ? ' ' + trunc(a.intoTitle, 40) : '') + ' on ' + dayOf(a.at) + '. This initiative is in the Archive.'
+        : 'Archived on ' + dayOf(a.at) + (a.reason ? ': ' + a.reason : '') + '. It is out of every list.'), restoreBtn(L, r));
+  }
+  if (r.status === 'on hold') {
+    return el('div', { class: 'fold w il-banner', role: 'status', 'data-il': 'banner' }, icon('moon', 'sm'),
+      el('span', null, 'On hold since ' + (dayOf(s.at) || 'today') + (s.reason ? ': ' + s.reason : '') + '.' + (s.back ? ' Check back ' + dayOf(s.back) + '.' : '') + ' Stage, work and history are kept.'),
+      el('span', { class: 'chips2' }, pbtn('outline', 'Resume', 'play', { 'data-il-resume': r.id, onclick: () => resume(L, r) }), lk({ 'data-il-cancel': r.id, onclick: () => openCancel(L, r) }, 'Cancel…')));
+  }
+  if (r.status === 'cancelled') {
+    return el('div', { class: 'fold il-banner', role: 'status', 'data-il': 'banner' }, icon('x', 'sm'),
+      el('span', null, 'Cancelled' + (s.at ? ' on ' + dayOf(s.at) : '') + (s.reason ? ': ' + s.reason : '') + '. Counted as cancelled, not done.'),
+      pbtn('outline', 'Reopen', 'undo', { 'data-il-reopen': r.id, onclick: () => reopen(L, r) }));
+  }
+  return null;
+}
+export const rowIcon = (r) => (r.archived ? (r.archived.into ? 'branch' : 'clip') : r.status === 'late' || r.status === 'at risk' ? 'alert' : r.status === 'done' ? 'check' : r.status === 'on hold' ? 'moon' : r.status === 'cancelled' ? 'x' : 'init');
+export { closeMenu, plural, st };

package/workspace/public/pm/c3-ini-ui.js

@@ -133,7 +133,8 @@ export function ago(iso, today) {
 export { MON };
 
 /* ── chips ── */
-export const statusChip = (s) => (s === 'at risk' ? st('warn', 'alert', 'At risk') : s === 'late' ? st('bad', 'clock', 'Late') : s === 'done' ? st('ok', 'check', 'Done') : chip('On track'));
+export const statusChip = (s) => (s === 'at risk' ? st('warn', 'alert', 'At risk') : s === 'late' ? st('bad', 'clock', 'Late') : s === 'done' ? st('ok', 'check', 'Done')
+  : s === 'on hold' ? st('', 'moon', 'On hold') : s === 'cancelled' ? el('span', { class: 'tag' }, icon('x', 'sm'), 'Cancelled') : chip('On track'));
 export const HEALTH = { ok: 'On track', warn: 'Needs attention', bad: 'Off track' };
 export const healthSt = (h) => (h === 'ok' ? st('ok', 'check', 'On track') : h === 'warn' ? st('warn', 'alert', 'Needs attention') : h === 'bad' ? st('bad', 'alert', 'Off track') : chip('No health yet'));
 export const ownerText = (o) => (o ? o : el('span', { class: 'dim' }, 'No owner'));
@@ -228,23 +229,27 @@ export function closeMenu() {
   document.removeEventListener('pointerdown', m.off, true); document.removeEventListener('keydown', m.key, true);
   m.node.remove(); m.anchor.setAttribute('aria-expanded', 'false');
 }
-export function openMenu(anchor, { label, items }) {
+/** items: [{ group } | { kids|label, onPick, disabled, current, checked, attrs }]. `checked` makes it a menuitemradio. `body` (a Node) is a
+ *  panel drawn after the items, for a menu of controls such as the board's filter selects; it is a dialog then, not a menu. */
+export function openMenu(anchor, { label, items, body }) {
   if (menuOpen) { const was = menuOpen.anchor; closeMenu(); if (was === anchor) return; }
-  const node = el('div', { class: 'ini-menu', role: 'menu', 'aria-label': label, 'data-ini': 'menu' },
-    ...items.map((it) => (it.group != null ? el('div', { class: 'ini-mlbl' }, it.group)
-      : btn({ role: 'menuitem', class: 'ini-mi', disabled: !!it.disabled, ...(it.current ? { 'aria-current': 'true' } : {}), ...(it.attrs || {}), onclick: () => { closeMenu(); it.onPick(); } }, ...[].concat(it.kids || it.label)))));
+  const node = el('div', { class: 'ini-menu' + (body ? ' ini-mpanel' : ''), role: body ? 'dialog' : 'menu', 'aria-label': label, 'data-ini': 'menu' },
+    ...(items || []).map((it) => (it.group != null ? el('div', { class: 'ini-mlbl' }, it.group)
+      : btn({ role: it.checked != null ? 'menuitemradio' : 'menuitem', class: 'ini-mi', disabled: !!it.disabled, ...(it.current ? { 'aria-current': 'true' } : {}), ...(it.checked != null ? { 'aria-checked': String(!!it.checked) } : {}), ...(it.attrs || {}), onclick: () => { closeMenu(); it.onPick(); } }, ...[].concat(it.kids || it.label)))),
+    body || null);
   const host = anchor.closest('.c3pop') || anchor.closest('.c3') || document.body;
   host.appendChild(node);
   const r = anchor.getBoundingClientRect();
   const w = Math.min(300, window.innerWidth - 16);
   geo(node, { '--in-x': Math.max(8, Math.min(window.innerWidth - w - 8, r.right - w)) + 'px', '--in-y': Math.min(window.innerHeight - 60, r.bottom + 6) + 'px' });
-  const itemsOf = () => [...node.querySelectorAll('[role="menuitem"]:not(:disabled)')];
+  const itemsOf = () => [...node.querySelectorAll(body ? 'select,button:not(:disabled)' : '[role="menuitem"]:not(:disabled),[role="menuitemradio"]:not(:disabled)')];
   const off = (e) => { if (!node.contains(e.target) && !anchor.contains(e.target)) closeMenu(); };
   const key = (e) => {
     if (e.key === 'Escape') { e.preventDefault(); e.stopPropagation(); closeMenu(); anchor.focus(); return; }
     const l = itemsOf(); const at = l.indexOf(document.activeElement);
+    if (body && (e.key === 'ArrowDown' || e.key === 'ArrowUp')) return;   // a select in the panel takes the arrows
     if (e.key === 'ArrowDown' || e.key === 'ArrowUp') { e.preventDefault(); const n = l.length; if (n) l[((at < 0 ? -1 : at) + (e.key === 'ArrowDown' ? 1 : -1) + n) % n].focus(); }
-    if (e.key === 'Tab') closeMenu();
+    if (e.key === 'Tab' && !body) closeMenu();
   };
   menuOpen = { node, anchor, off, key };
   anchor.setAttribute('aria-expanded', 'true');

package/workspace/public/pm/c3-initiatives.js

@@ -49,6 +49,7 @@ import { TEMPLATES, BOARD_TEMPLATES, isBuildStage, templateBuilds, offered, wfOf
 import { timeline, tlInit, tlRange } from './c3-ini-timeline.js';
 import { RECORD_META, recordToolsFor } from './c3-ini-records.js';
 import { agentSetting, loadAgentMode, MODES as AGENT_MODES } from './c3-driver.js';
+import { lifeBanner, pageMenu, ensureLifeCss } from './c3-ini-life.js';
 import { scanSetting, takeSettingsFor } from './c3-scan.js';
 
 export { btn, geo };
@@ -104,6 +105,7 @@ function ensureCss() {
   ensureC3Css();
   ensureComponentsCss();
   ensureIniCss();   // after components.css, so the reset in c3-initiatives.css comes after the primitive's own rules
+  ensureLifeCss();
 }
 const warnChip = (w) => st('warn', 'alert', w, { title: 'An order rule, shown as a warning. It never blocks.', 'data-ini-warning': w });
 const buildTag = (b) => (b.build ? el('span', { class: 'tag' }, icon('jira', 'sm'), jiraLabel(b) ? 'Jira · ' + jiraLabel(b) : 'Jira not set') : el('span', { class: 'tag' }, 'PMOS tasks only'));
@@ -264,7 +266,7 @@ export function mountInitiatives(pane, opts) {
       if (!r.ok) continue;
       const ctx = makeCtx(b, {});
       const withWork = new Set(r.items.map((w) => w.ini));
-      const now = r.initiatives.filter((i) => i.status !== 'done' && i.start && i.end && (i.horizon === 'now' || withWork.has(i.id) || i.featured));
+      const now = r.initiatives.filter((i) => ['on track', 'at risk', 'late'].includes(i.status) && i.start && i.end && (i.horizon === 'now' || withWork.has(i.id) || i.featured));
       const pick = [...now.filter((i) => withWork.has(i.id) || i.featured), ...now.filter((i) => !withWork.has(i.id) && !i.featured && ['at risk', 'late'].includes(i.status)).sort((x, y) => String(x.end).localeCompare(String(y.end))).slice(0, 2)].slice(0, 6);
       more += now.length - pick.length;
       if (!pick.length) continue;
@@ -314,7 +316,7 @@ export function mountInitiatives(pane, opts) {
     const def = TEMPLATES[b.defTpl] || TEMPLATES[b.template] || TEMPLATES.product;
     put(root, 
       pathCrumbs(b, null, el('div', { class: 'chips2' }, pbtn('outline', 'Dashboard', 'report', { onclick: () => ctx0.showTab('rep') }),
-        pbtn('outline', 'Board settings', 'settings', { 'data-ini': 'board-settings', 'aria-haspopup': 'dialog', onclick: () => openBoardSettings(b) }))),
+        ib('Board settings', 'settings', { 'data-ini': 'board-settings', 'aria-haspopup': 'dialog', onclick: () => openBoardSettings(b) }))),
       el('div', { class: 'calbody', 'data-ini-board-page': b.id },
         lh('cols', b.name + (b.full ? ' · ' + b.full : ''), (HEALTH[b.health] || 'No health yet') + (risk ? ', ' + risk + ' at risk or late' : '') + (asks ? ', ' + plural(asks, 'new ask') + ' to triage' : '') + '. '
           + plural(c.total || 0, 'initiative') + (items.ok ? ', ' + plural(work.filter((w) => w.kind === 'Epic').length, 'epic') + ', ' + plural(work.filter((w) => w.kind !== 'Epic').length, 'item') : '') + '.'),
@@ -334,7 +336,7 @@ export function mountInitiatives(pane, opts) {
     const b = ctx.board;
     const r = await loadItems(ctx);
     if (!r.ok) { put(host, errLine('The board could not be read: ' + r.error + '.')); return; }
-    const inis = r.initiatives; const work = r.items; const open = inis.filter((i) => i.status !== 'done');
+    const inis = r.initiatives; const work = r.items; const open = inis.filter((i) => ['on track', 'at risk', 'late'].includes(i.status));   // on hold, done and cancelled are not open
     const risk = inis.filter((i) => ['at risk', 'late'].includes(i.status)).sort((x, y) => String(x.end || '9').localeCompare(String(y.end || '9')));
     const withWork = new Set(work.map((w) => w.ini));
     /* up to six open initiatives: the ones with work, featured, or Now and not on track first, then the rest by end date */
@@ -722,9 +724,17 @@ export function mountInitiatives(pane, opts) {
     const tabs = INI_TAB_LIST.filter(([k]) => k !== 'tickets' || bb.build).map(([k, l, ic]) => [k, l, ic,
       k === 'breakdown' && work.length ? el('span', { class: 'bdg g' }, String(work.length)) : k === 'tickets' ? el('span', { class: 'bdg g' }, String(work.filter((w) => w.src === 'jira').length)) : null]);
     const host = el('div', { class: 'calbody', 'data-ini-panel': tab });
+    // c3-initiative-lifecycle: a hold, cancel or resume is derived in a child process, so the page reads again until it shows it.
+    const ex = P.expect;
+    if (ex && ex.id === row.id && ex.kind === 'status' && (ex.status ? row.status !== ex.status : ['on hold', 'cancelled'].includes(row.status)) && (ex.tries = (ex.tries || 0) + 1) < 10) {
+      setTimeout(() => { if (token === P.seq && P.expect === ex) { P.ini = null; draw(); } }, 800);
+    } else if (ex && ex.id === row.id) P.expect = null;
+    const L = { ctx: ctxI, done: (change) => { P.expect = change || null; P.ini = null; P.boards = null; dropItems(); draw(); } };
     put(root, 
-      pathCrumbs(bb, row, el('div', { class: 'chips2' }, pbtn('outline', 'Dashboard', 'report', { onclick: () => ctxI.showTab('rep') }))),
+      pathCrumbs(bb, row, el('div', { class: 'chips2' }, pbtn('outline', 'Dashboard', 'report', { onclick: () => ctxI.showTab('rep') }),
+        ib('Actions for ' + row.id, 'more', { 'data-il-menu': row.id, 'aria-haspopup': 'menu', 'aria-expanded': 'false', title: 'Pause, cancel, merge or archive', onclick: (e) => pageMenu(e.currentTarget, L, row) }))),
       el('div', { class: 'calbody', 'data-ini-page': row.id },
+        lifeBanner(L, row),
         lh('target', row.title || row.id, [row.id, bb.name, row.anchor || 'no anchor', row.owner || 'no owner', row.start || row.end ? day(row.start) + ' to ' + day(row.end) : 'no dates yet', row.horizon ? row.horizon[0].toUpperCase() + row.horizon.slice(1) : '', Math.round((Number(row.progress) || 0) * 100) + '% done'].filter(Boolean).join(' · ')),
         el('div', { class: 'chips2', 'data-ini': 'ini-chips' }, statusChip(row.status), chip(icon('bolt', 'sm'), plural(ep, 'epic') + ', ' + plural(work.length - ep, 'item')), buildTag(bb),
           bb.build ? pill({ 'data-ini': 'jira-epics', 'aria-haspopup': 'dialog', title: 'The Jira epics of this initiative', onclick: () => openEpics(bb, row) }, icon('jira', 'sm'), (row.epics || []).length ? 'Jira epics ' + row.epics.join(', ') : 'Link Jira epics') : null,

package/workspace/public/pm/c3-phone.css

@@ -13,6 +13,7 @@
 .c3 .c3ph-hd b{font-size:var(--fs-4);flex:1;min-width:0}
 .c3 .c3ph-hdr{display:flex;align-items:center;gap:8px;flex:none}
 .c3 .c3ph-dotn{display:inline-flex;align-items:center;gap:4px;font:var(--fs-1) var(--mono);color:var(--muted-foreground)}
+.c3 button.c3ph-dotn{height:auto;min-height:32px;padding:4px 8px;cursor:pointer}
 .c3 .c3ph-body{flex:1;display:grid;gap:12px;align-content:start;padding:0 12px 16px}
 .c3 .c3ph-card{display:grid;gap:8px;padding:14px}
 .c3 .c3ph-card.lead{border-color:var(--acc)}
@@ -37,7 +38,8 @@
 .c3 .c3ph-ask:focus-within{border-color:var(--acc)}
 .c3 .c3ph-recdot{width:44px;height:44px;border:2px solid var(--destructive);display:grid;place-items:center;flex:none;padding:0}
 .c3 .c3ph-reddot{width:18px;height:18px;border-radius:50%;background:var(--destructive)}
-.c3 .c3ph-recbar{flex:1;display:flex;align-items:center;gap:10px;min-height:44px}
+.c3 .c3ph-recbar{flex:1;display:flex;align-items:center;gap:8px;min-height:44px;min-width:0}
+.c3 .c3ph-recbar>button{flex:none}
 .c3 .c3ph-rt{flex:1;min-width:0;display:grid}
 .c3 .c3ph-rt b{color:var(--destructive);font-size:var(--fs-3)}
 .c3 .c3ph-rt .dim{font-size:var(--fs-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

package/workspace/public/pm/c3-phone.js

@@ -3,7 +3,7 @@
  *
  * It has no tabs and no inbox to visit. It brings the one thing that matters now (c3-phone-model.js momentOf), then the PM's own items one
  * at a time, then what comes later today. Two controls sit at the bottom: "Tell PMOS" and the red Record button.
- *   moment card   meeting under way: "Record this meeting?" (Record / Not this one), and the meeting companion (c3-focus.js, compact)
+ *   moment card   meeting under way: "Record this meeting?" (Record / Not this one), and Open focus
  *                 recording (any recording): the live notes of GET /api/notes/one, read every 5 s: what was just heard, and the decisions,
  *                 actions and questions picked out so far (dest-notes.js partsOf), as the desktop note shows them
  *                 before a meeting: when it starts, who, what is prepared, the "before you go" items with Done
@@ -17,8 +17,12 @@
  *   Tell PMOS     a line of text, filed by POST /api/capture { ws, text }: it lands in the Work inbox, where triage files it. The small mic
  *                 points to the keyboard's own dictation; this page does not send audio anywhere.
  *   Record        the red button records a conversation or a meeting, the same recorder as the desktop Record control (note-dock.js).
- *                 While it records, the bar shows the clock and Stop. In demo mode it drives the simulated recorder and saves nothing.
- * There is no way to the desktop pages on a phone. The meeting companion opens as the compact focus page with "Back to your day".
+ *                 In demo mode it drives the simulated recorder and saves nothing.
+ *   focus         starting a recording opens focus (c3-focus.js, phone mode; mockup version 5): the desktop Meeting focus in one column. A meeting
+ *                 opens by its event; a recording that is not on the calendar opens by its note. "Back to your day" keeps recording; the bar
+ *                 at the bottom then shows the clock, Focus (back to it) and Stop.
+ *   N waiting     the count in the header opens the whole list (c3-phone-detail.js openAll).
+ * There is no way to the desktop pages on a phone.
  * The moment is worked out again every minute; when it changes, a short banner says so. ?at=HH:MM sets the clock in demo mode only. */
 import { el } from './dom.js';
 import { button, iconButton } from './primitives.js';
@@ -83,7 +87,20 @@ export function mountPhone(root, ctx = {}) {
   function startRec(m) {
     if (!dock) { toast('The recorder is not ready yet.'); return; }
     if (recState().mode !== 'idle') { toast('Stop the recording first.'); return; }
-    Promise.resolve(dock.start(m ? m.title : 'Conversation', m || null)).then(() => { syncRec(); draw(); });
+    Promise.resolve(dock.start(m ? m.title : 'Conversation', m || null)).then(() => {
+      syncRec(); draw();
+      const st = recState(); if (st.mode === 'idle') return;
+      S.focusOf = m ? { id: st.id, event: m } : { id: st.id, note: st.id };
+      openLive();
+    });
+  }
+  /* focus for the recording under way: its meeting when it has one, else its note */
+  function openLive() {
+    const st = recState(); if (st.mode === 'idle') return;
+    const known = S.focusOf && S.focusOf.id === st.id ? S.focusOf : null;
+    const n = S.live && S.live.id === st.id ? S.live.note : null;
+    const ev = known ? known.event : n && n.meeting && n.meeting.kind === 'event' && n.meeting.event_id ? { id: n.meeting.event_id, start: n.meeting.start, end: n.meeting.end, title: n.meeting.title } : null;
+    if (ev) focus(ev); else focusNote(st.id, st.title);
   }
   function syncRec() {
     const st = recState();
@@ -96,6 +113,7 @@ export function mountPhone(root, ctx = {}) {
         foot.replaceChildren(el('div', { class: 'c3ph-recbar', 'data-c3ph-recbar': st.mode, role: 'status' },
           el('span', { class: 'c3ph-dot' + (st.mode === 'paused' ? ' paused' : '') }),
           el('div', { class: 'c3ph-rt' }, el('b', null, st.mode === 'paused' ? 'Paused' : 'Recording'), el('span', { class: 'dim' }, (st.title || 'Conversation') + ' · ', S.clock)),
+          button({ label: 'Focus', variant: 'primary', size: 'sm', icon: 'target', attrs: { 'data-c3ph-focus-bar': '' }, onClick: openLive }),
           button({ label: 'Stop', variant: 'outline', size: 'sm', icon: 'square', attrs: { 'data-c3ph-stop': '' }, onClick: () => Promise.resolve(dock.stop()).then(() => { syncRec(); draw(); }) })));
       }
     }
@@ -195,7 +213,9 @@ export function mountPhone(root, ctx = {}) {
   }
   const decisions = () => waitRows().filter((r) => !r.pm).length;
   const needOpts = { onDone: (r) => itemDone(r), onLater: (r) => itemLater(r, 'later-today') };
-  const focus = (m) => import('./c3-focus.js').then((f) => f.openFocus({ event: { id: m.id, start: m.start }, pop: true, back: true })).catch(() => toast('The meeting companion did not open.'));
+  const focus = (m) => import('./c3-focus.js').then((f) => f.openFocus({ event: { id: m.id, start: m.start, at: m.start, end: m.end || null, title: m.title }, date: String(m.start || '').slice(0, 10), phone: true }))
+    .catch(() => toast('Focus did not open.'));
+  const focusNote = (id, title) => import('./c3-focus.js').then((f) => f.openFocus({ note: id, event: { title: title || 'Conversation' }, phone: true })).catch(() => toast('Focus did not open.'));
   /* a meeting's sheet (c3-phone-detail.js): Record it while the meeting has not ended, and the meeting companion */
   function meetingSheet(m) {
     const t = now().getTime(); const ends = Date.parse(m.end || m.start) || 0;
@@ -215,7 +235,7 @@ export function mountPhone(root, ctx = {}) {
       p ? list('Decisions', p.decisions) : null, p ? list('Actions', p.actions) : null, p ? list('Open questions', p.questions) : null,
       heard.length ? el('div', { class: 'c3ph-fit', 'data-c3ph-heard': String(heard.length) }, el('b', null, 'Just heard'), ...heard.map((x) => line((L.speakerOf ? L.speakerOf(n, x.source) + ': ' : '') + x.text)))
         : line(!L ? 'Opening the notes.' : n ? 'Listening. What is said shows here, and PMOS picks out the decisions, actions and questions as they come.' : 'The notes of this recording could not be read. They are kept on your computer.'),
-      ev ? acts(btn('Open the meeting companion', 'outline', 'target', { 'data-c3ph-focus': ev.id }, () => focus(ev))) : null);
+      acts(btn('Open focus', 'primary', 'target', { 'data-c3ph-focus': ev ? ev.id : st.id }, openLive)));
   }
 
   function itemCard(r, hero) {
@@ -231,7 +251,7 @@ export function mountPhone(root, ctx = {}) {
   function momentCard(mo) {
     const m = mo.meeting;
     if (mo.kind === 'meeting') {
-      const open = btn('Open the meeting companion', 'outline', 'target', { 'data-c3ph-focus': m.id }, () => focus(m));
+      const open = btn('Open focus', 'outline', 'target', { 'data-c3ph-focus': m.id }, () => focus(m));
       if (S.noRec.has(m.id)) return card(true, { 'data-c3ph-moment': 'meeting' }, why('Under way · ends ' + inText(mo.minutes)), big(m.title), line('Not recording. PMOS follows the agenda and what you mark.'), acts(open, btn('Record from now', 'ghost', 'mic', { 'data-c3ph-rec-meeting': m.id }, () => startRec(m))));
       return card(true, { 'data-c3ph-moment': 'meeting' }, why('Starting now' + (who(m) ? ' · ' + who(m) : '')), big('Record ' + m.title + '?'),
         el('div', { class: 'c3ph-rec-why' }, 'Recording lets PMOS follow the talk, bring up what you need at the right topic, and write the notes for you.'),
@@ -312,7 +332,7 @@ export function mountPhone(root, ctx = {}) {
     const d = now();
     const n = waitRows().length;
     head.replaceChildren(el('b', null, WD[d.getDay()] + ' ' + d.getDate() + ' ' + MO[d.getMonth()]),
-      el('span', { class: 'c3ph-hdr' }, n ? el('span', { class: 'c3ph-dotn', 'data-c3ph-count': String(n) }, c3ic('inbox', 'sm'), n + ' waiting') : null));
+      el('span', { class: 'c3ph-hdr' }, n ? button({ label: [c3ic('inbox', 'sm'), n + ' waiting'], variant: 'ghost', size: 'sm', attrs: { class: 'c3ph-dotn', 'data-c3ph-count': String(n), 'aria-label': n + ' waiting on you. See them all.' }, onClick: () => openAll(waitRows(), needOpts) }) : null));
   }
 
   const BANNER = { meeting: (m) => m.title + ' has started', before: (m, mo) => m.title + ' starts ' + inText(mo.minutes), after: (m) => m.title + ' just ended', gap: (m, mo) => (mo.minutes || 0) + ' free minutes', wrap: () => 'Time to wrap up', morning: () => 'Good morning' };