create-pmos 0.167.0 → 0.169.0

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

@@ -0,0 +1,298 @@
+/* pm/c3-driver.js — the Initiative Driver on console3 (initiative initiative-driver, PRD section 5; mockup mockup-c3-driver, 39-driver.js).
+ * The agent works on every initiative and Work task on its own and files each result as a PROPOSAL. Nothing it writes changes a record
+ * or leaves PMOS: the PM keeps, sends back with a note, or drops. This file draws the three places the PM sees it:
+ *
+ *   driverStrip(ctx, row)            the Agent strip on an initiative's Overview: status, last action, blocker, one row per open proposal
+ *   agentSetting(state, { onPick })  the Agent setting (Off, Shadow, Approve) in the Board settings sheet; loadAgentMode(api, board) reads it
+ *   workNote(o) · openDraftSheet(o)  the one agent line under a Work task and the sheet behind its Review (c3-driver-work.js draws them)
+ *
+ * Reads: GET /api/driver/strip, /api/driver/mode, /api/driver/open. Presses: POST /api/driver/keep, return, drop, pause, resume, mode,
+ * through http.js (the nonce and the page Origin). The page sends no `by`: the server takes the PM from the call path. After each press
+ * the strip is read again. Keep, send back and drop have no Undo: each adds a line to the ledger, and nothing is removed.
+ * A proposal that was just decided stays in its strip, marked, until the page is left. Plain words for every empty and error state.
+ */
+import { el } from './dom.js';
+import { icon, pbtn, lk, chip, tag, st, note, lbl, chgl, list, nrow, sect, put, btn, plural } from './c3-ini-ui.js';
+import { toast } from './c3-toast.js';
+import { pmGet } from './http.js';
+
+/** Link c3-driver.css once, from this module's own folder (the way c3-initiatives.js links its stylesheet). */
+export function ensureDriverCss() {
+  if (typeof document === 'undefined' || document.querySelector('link[data-c3-drv]')) return;
+  const l = document.createElement('link');
+  l.rel = 'stylesheet'; l.href = new URL('./c3-driver.css', import.meta.url).href; l.setAttribute('data-c3-drv', '');
+  document.head.appendChild(l);
+}
+
+/* ── words ── */
+export const WHAT = {
+  problem: ['Problem statement', 'doc'], evidence: ['Evidence', 'doc'], sizing: ['Opportunity sizing', 'target'], assumption: ['Riskiest assumption and spike brief', 'bolt'],
+  stakeholders: ['Stakeholders', 'user'], move: ['Move', 'next'], note: ['Note', 'notes'], 'next-step': ['Next step', 'check'], 'follow-up': ['Follow-up', 'mail'],
+};
+export const MODES = [
+  ['off', 'Off', 'The agent does nothing on this board.'],
+  ['shadow', 'Shadow', 'The agent drafts but raises nothing. You see its drafts only on the initiative page.'],
+  ['approve', 'Approve', 'The agent drafts and asks you. Each draft waits for Keep, Send back or Drop.'],
+];
+const errText = (r, what) => what + ': ' + ((r && r.error) || 'the workspace did not answer') + '.';
+const isUrl = (s) => /^https?:\/\/\S+$/i.test(String(s || ''));
+const MON = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+const WD = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+const p2 = (n) => String(n).padStart(2, '0');
+const clock = (d) => p2(d.getHours()) + ':' + p2(d.getMinutes());
+/** '11:05' for today, 'Fri 9 Oct, 16:05' for any other day. */
+export function whenLabel(iso, now = new Date()) {
+  const d = new Date(iso);
+  if (!Number.isFinite(d.getTime())) return '';
+  return d.toDateString() === now.toDateString() ? clock(d) : WD[d.getDay()] + ' ' + d.getDate() + ' ' + MON[d.getMonth()] + ', ' + clock(d);
+}
+/** Whole days a time is old. */
+export const daysOld = (iso, now = Date.now()) => { const t = Date.parse(iso); return Number.isFinite(t) ? Math.floor((now - t) / 864e5) : 0; };
+/** 'Thu 15 Oct' for a YYYY-MM-DD. */
+export function dueLabel(ymd) {
+  const m = /^(\d{4})-(\d{2})-(\d{2})$/.exec(String(ymd || ''));
+  if (!m) return '';
+  const d = new Date(Number(m[1]), Number(m[2]) - 1, Number(m[3]));
+  return WD[d.getDay()] + ' ' + d.getDate() + ' ' + MON[d.getMonth()];
+}
+const textOf = (p) => (p && p.data && typeof p.data.text === 'string' ? p.data.text : '');
+export const titleOf = (p) => (p.what === 'move' && p.data && p.data.to ? 'Move to ' + p.data.to : (WHAT[p.what] || [p.what])[0]);
+
+/** The text a proposal shows when it opens: the draft, then the agent's one-line reason. */
+export function bodyOf(p) {
+  const out = [];
+  const t = textOf(p);
+  if (p.what === 'move') out.push('Move this initiative to ' + ((p.data && p.data.to) || 'the next stage') + '.');
+  else if (t) out.push(t);
+  else if (p.data && Array.isArray(p.data.items)) out.push(plural(p.data.items.length, 'item') + ' with a pointer each.');
+  else if (p.data && typeof p.data === 'object' && Object.keys(p.data).length) out.push(Object.entries(p.data).map(([k, v]) => k + ': ' + (typeof v === 'string' ? v : JSON.stringify(v))).join('\n'));
+  if (p.what === 'next-step' && p.data && p.data.due) out.push('Due: ' + dueLabel(p.data.due) + '.');
+  if (p.why) out.push('Why: ' + p.why);
+  if (p.what === 'move') out.push('Keep moves the stage. The agent only proposes.');
+  return out.join('\n');
+}
+/** The sources of a proposal: its own list, then the items of an evidence draft that carry a pointer. */
+export function sourcesOf(p) {
+  const out = (p.sources || []).map((s) => ({ label: s.label, ref: s.ref, text: '' }));
+  if (p.data && Array.isArray(p.data.items)) for (const i of p.data.items) if (i && i.ref) out.push({ label: 'Evidence', ref: String(i.ref), text: String(i.text || '') });
+  return out;
+}
+const srcIcon = (label) => (/jira/i.test(label) ? 'jira' : /slack|mail|email|thread/i.test(label) ? 'mail' : 'doc');
+function srcRow(s) {
+  const ref = isUrl(s.ref) ? el('a', { class: 'mono drv-ref', href: s.ref, target: '_blank', rel: 'noopener noreferrer' }, s.ref) : el('span', { class: 'mono drv-ref' }, s.ref);
+  return el('li', { 'data-drv-src': '' }, icon(srcIcon(s.label), 'sm'), el('span', { class: 'drv-src' }, el('b', null, s.label), ref, s.text ? el('span', null, s.text) : null));
+}
+
+/* ── what the PM decided this visit: kept and sent-back rows stay in the strip, marked ── */
+const DECIDED = new Map();   // target key -> Map(proposal id -> { st: 'kept' | 'back', note, p })
+const decidedOf = (key) => { if (!DECIDED.has(key)) DECIDED.set(key, new Map()); return DECIDED.get(key); };
+
+/** One press on the driver. Returns the server's answer; an error is a toast and null. */
+async function press(ctx, route, body, what) {
+  const r = await ctx.api.post('/api/driver/' + route, body);
+  if (!r || !r.ok) { toast({ text: errText(r, what + ' did not work'), tone: 'error', timeout: 6000 }); return null; }
+  return r;
+}
+
+/** The sheet that asks for a one-line note and sends a proposal back with it. */
+export function openSendBack(ctx, p, onSent) {
+  const input = el('input', { type: 'text', 'data-drv': 'note', placeholder: 'Tell the agent what is wrong or missing', 'aria-label': 'Note to the agent', maxlength: '500', autocomplete: 'off' });
+  const err = el('div', { class: 'fold w', role: 'alert', hidden: true, 'data-drv': 'note-error' });
+  let busy = false;
+  const send = async () => {
+    const n = input.value.trim();
+    if (!n) { err.hidden = false; put(err, icon('alert', 'sm'), 'Write one line for the agent. A note starts its next run.'); input.focus(); return; }
+    if (busy) return; busy = true;
+    const r = await press(ctx, 'return', { proposal: p.id, note: n }, 'Send back');
+    busy = false;
+    if (!r) return;
+    sh.close();
+    toast('Sent back with your note. The agent redrafts it.');
+    onSent(n);
+  };
+  input.addEventListener('keydown', (e) => { if (e.key === 'Enter' && !e.isComposing) { e.preventDefault(); send(); } });
+  const sh = ctx.openSheet({ title: 'Send back: ' + titleOf(p), icon: 'reply', body: el('div', { class: 'drv-sheet' },
+    el('p', { class: 'drv-pre' }, bodyOf(p)), el('div', { class: 'form' }, input), err,
+    el('div', { class: 'iacts chips2' }, pbtn('primary', 'Send back with note', 'reply', { 'data-drv': 'send-back', onclick: send }), pbtn('ghost', 'Cancel', null, { onclick: () => sh.close() }))) });
+  setTimeout(() => input.focus(), 30);
+  return sh;
+}
+
+/* ── the Agent strip ── */
+/** Plain words for the state of the agent on this initiative, from GET /api/driver/strip. */
+export function statusOf(d, now = Date.now()) {
+  const open = d.proposals || [];
+  const used = (d.budget && d.budget.used) || 0; const limit = (d.budget && d.budget.limit) || 3;
+  const oldest = open.map((p) => daysOld(p.at, now)).reduce((a, b) => Math.max(a, b), 0);
+  let last = 'No run yet.';
+  if (d.last) last = d.last.ok ? 'Last: ' + (d.last.proposals ? 'filed ' + plural(d.last.proposals, 'proposal') : 'looked and found nothing new') + ' · ' + whenLabel(d.last.at, new Date(now))
+    : 'Last run did not finish' + (d.last.reason ? ': ' + d.last.reason : '') + ' · ' + whenLabel(d.last.at, new Date(now));
+  if (d.paused) return { ic: 'pause', b: 'Agent is paused', sub: 'It files nothing until you resume.', last };
+  if (d.running) return { ic: 'spark', b: 'Agent is working · started ' + whenLabel(d.running.since, new Date(now)), sub: 'It works inside the limits you set and files each result as a proposal.', last };
+  if (open.length) return { ic: 'wait', b: 'Agent is idle · waiting on you', sub: oldest >= 1 ? 'The oldest proposal is ' + plural(oldest, 'day') + ' old.' : plural(open.length, 'proposal') + ' wait for your decision.', last };
+  if (used >= limit) return { ic: 'clock', b: 'Agent is idle · used its runs for today', sub: 'It runs up to ' + limit + ' times a day on each initiative. It starts again tomorrow.', last };
+  return { ic: 'spark', b: 'Agent is idle', sub: 'It starts again when something changes: a stage move, a new initiative, or a note from you.', last };
+}
+/** The line that says what stops the agent, or ''. A blocker the PM owns names the PM. */
+export function blockerLine(d) {
+  if (!d.blocker || !d.blocker.text) return '';
+  if (d.blocker.owner === 'pm') return 'Stopped by: you. ' + d.blocker.text + '. The agent starts no run until you decide.';
+  return 'Stopped by: ' + String(d.blocker.text).replace(/\.$/, '') + '.';
+}
+
+/**
+ * The Agent section of an initiative's Overview. Draws at once with "Reading the agent" and fills itself from the server.
+ * ctx: api, row (the initiative), board, refresh, openSheet, openBoardSettings.
+ */
+export function driverStrip(ctx, row) {
+  ensureDriverCss();
+  const wrap = el('div', { class: 'drv', 'data-drv': 'strip' });
+  const key = (ctx.ws || '') + ':initiative:' + row.id;
+  const S = { data: null, err: '', open: new Set(), busy: false };
+
+  async function load() {
+    const r = await ctx.api.get('/api/driver/strip', { target_kind: 'initiative', id: row.id, board: ctx.board && ctx.board.id });
+    if (!r || !r.ok) { S.data = null; S.err = errText(r, 'The agent strip could not be read'); } else { S.data = r; S.err = ''; }
+    draw();
+  }
+  const reread = load;
+
+  async function decide(route, p, extra) {
+    const r = await press(ctx, route, { proposal: p.id, ...(extra || {}) }, route === 'keep' ? 'Keep' : 'Drop');
+    return r;
+  }
+  async function keep(p) {
+    const r = await decide('keep', p);
+    if (!r) return;
+    decidedOf(key).set(p.id, { st: 'kept', p });
+    const w = (r.warnings || []).filter(Boolean);
+    toast(p.what === 'move' ? 'Kept. The stage moved to ' + ((p.data && p.data.to) || 'the next stage') + '.' + (w.length ? ' ' + w.join(' ') : '') : 'Kept: ' + titleOf(p));
+    if (['move', 'problem', 'next-step'].includes(r.wrote)) ctx.refresh();   // the stage chips and the record cards read the new record
+    else await reread();
+  }
+  async function drop(p) {
+    const r = await decide('drop', p);
+    if (!r) return;
+    S.open.delete(p.id);
+    toast('Dropped: ' + titleOf(p));
+    await reread();
+  }
+  const sendBack = (p) => openSendBack(ctx, p, (n) => { decidedOf(key).set(p.id, { st: 'back', note: n, p }); reread(); });
+  async function pause(on) {
+    const r = await press(ctx, on ? 'pause' : 'resume', { target_kind: 'initiative', id: row.id }, on ? 'Pause' : 'Resume');
+    if (!r) return;
+    toast(on ? 'Agent paused. It files nothing until you resume.' : 'Agent resumed.');
+    await reread();
+  }
+  function openRuns() {
+    const d = S.data; const runs = (d && d.today) || [];
+    const used = d && d.budget ? d.budget.used : runs.length; const limit = d && d.budget ? d.budget.limit : 3;
+    ctx.openSheet({ title: 'Agent runs today', icon: 'clock', body: el('div', { class: 'drv-sheet', 'data-drv': 'runs-sheet' },
+      note(row.title + ' · ' + used + ' of ' + limit + ' runs used today'),
+      runs.length ? chgl(runs.map((r) => el('li', { 'data-drv-run': r.run }, icon('clock', 'sm'),
+        el('span', null, el('b', null, whenLabel(r.start)), ' ', r.end ? (r.ok ? 'Run ended' : 'Run did not finish') : 'Running now'),
+        tag(r.end ? (r.ok ? (r.proposals ? 'Filed ' + plural(r.proposals, 'proposal') : 'Nothing new') : (r.reason || 'Failed')) : 'Running now'))))
+        : el('div', { class: 'fold' }, icon('info', 'sm'), 'The agent has not run on this initiative today.'),
+      el('div', { class: 'fold' }, icon('info', 'sm'), 'The agent runs up to ' + limit + ' times a day on each initiative. It stops at the limit and starts again tomorrow. A run that fails still counts.'),
+      el('div', { class: 'iacts chips2' }, pbtn('outline', 'Board settings', 'settings', { onclick: () => { closeAnd(() => ctx.openBoardSettings()); } }))) });
+  }
+  const closeAnd = (fn) => { import('./c3-sheet.js').then((m) => { m.closeSheet(); fn(); }); };
+
+  function propRow(p, state) {
+    const kept = state && state.st === 'kept'; const back = state && state.st === 'back';
+    const old = !state && daysOld(p.at) >= 1;
+    const srcs = sourcesOf(p);
+    const chips = [
+      tag(p.what === 'move' ? 'stage move' : 'draft'),
+      p.at ? chip(icon('clock', 'sm'), whenLabel(p.at)) : null,
+      srcs.length ? chip(icon('out', 'sm'), plural(srcs.length, 'source')) : null,
+      old ? el('span', { class: 'tag warn' }, 'waiting ' + plural(daysOld(p.at), 'day')) : null,
+      kept ? st('ok', 'check', 'Kept by you') : null,
+      back ? tag('Sent back · agent is redrafting') : null,
+    ];
+    const xp = el('div', { class: 'ip' },
+      el('p', { class: 'drv-pre' }, bodyOf(p)),
+      back && state.note ? el('div', { class: 'fold' }, icon('reply', 'sm'), ' Your note: ' + state.note) : null,
+      srcs.length ? [el('span', { class: 'dim ini-note' }, 'Sources'), chgl(srcs.map(srcRow))] : el('span', { class: 'dim ini-note' }, 'No sources. ' + (p.what === 'move' ? 'This is a stage proposal.' : 'The agent named none.')));
+    const acts = state ? [] : S.data.mode === 'shadow' ? [el('span', { class: 'tag', title: 'Shadow mode: the agent drafts and raises nothing.' }, 'Shadow draft')] : [
+      pbtn('outline', 'Keep', 'check', { 'data-drv-act': 'keep', onclick: () => keep(p) }),
+      pbtn('ghost', 'Send back', null, { 'data-drv-act': 'back', onclick: () => sendBack(p) }),
+      pbtn('ghost', 'Drop', null, { 'data-drv-act': 'drop', onclick: () => drop(p) })];
+    const r = nrow({ ic: (WHAT[p.what] || ['', 'doc'])[1], hot: !state, title: titleOf(p), titleAttrs: { 'data-drv-title': p.id }, chips, xp, right: acts, attrs: { 'data-drv-row': p.id, 'data-drv-state': state ? state.st : 'open' }, key: 'drv:' + p.id, open: S.open.has(p.id), onToggle: (on) => { if (on) S.open.add(p.id); else S.open.delete(p.id); } });
+    return r;
+  }
+
+  function draw() {
+    const d = S.data;
+    if (S.err || !d) { put(wrap, sect({ ic: 'spark', title: 'Agent', attrs: { 'aria-label': 'Agent' } },
+      S.err ? el('div', { class: 'fold w', role: 'alert', 'data-drv': 'error' }, icon('alert', 'sm'), S.err, ' ', pbtn('outline', 'Try again', null, { onclick: load })) : note('Reading the agent'))); return; }
+    if (!d.ledger) { put(wrap, sect({ ic: 'spark', title: 'Agent', attrs: { 'aria-label': 'Agent' } }, el('div', { class: 'fold', 'data-drv': 'no-ledger' }, icon('info', 'sm'), 'This repository has no state folder (pmos/state, state or .pmos), so the agent has nowhere to keep its drafts.'))); return; }
+    const used = d.budget.used + ' of ' + d.budget.limit + ' runs used today';
+    const right = el('div', { class: 'chips2' },
+      d.mode === 'approve' ? (d.paused ? pbtn('outline', 'Resume', 'next', { 'data-drv-act': 'resume', onclick: () => pause(false) }) : pbtn('outline', 'Pause', 'pause', { 'data-drv-act': 'pause', onclick: () => pause(true) })) : null,
+      lk({ 'data-drv': 'runs', onclick: openRuns }, icon('clock', 'sm'), used));
+    let body;
+    if (d.mode === 'off') {
+      body = [el('div', { class: 'lh', 'data-drv': 'off' }, el('span', { class: 'ki' }, icon('pause')),
+        el('div', { class: 'ini-lhm' }, el('b', null, 'Agent is off for ' + ((ctx.board && ctx.board.name) || 'this board')), el('div', { class: 'dim' }, 'Nothing is drafted on this board. Turn it on in the board settings.')),
+        el('div', { class: 'chips2' }, pbtn('outline', 'Board settings', 'settings', { onclick: () => ctx.openBoardSettings() })))];
+    } else {
+      const s = statusOf(d); const blk = blockerLine(d);
+      const decided = decidedOf(key);
+      const ids = new Set((d.proposals || []).map((p) => p.id));
+      const rows = (d.proposals || []).map((p) => propRow(p, decided.get(p.id) || null));
+      for (const [id, x] of decided) if (!ids.has(id) && x.st !== 'dropped') rows.push(propRow(x.p, x));
+      const oldest = [...(d.proposals || [])].sort((a, b) => Date.parse(a.at) - Date.parse(b.at))[0];
+      body = [
+        el('div', { class: 'lh', 'data-drv': 'status' }, el('span', { class: 'ki' }, icon(s.ic)), el('div', { class: 'ini-lhm' }, el('b', null, s.b), el('div', { class: 'dim' }, s.sub), el('div', { class: 'dim', 'data-drv': 'last' }, s.last))),
+        d.mode === 'shadow' ? el('div', { class: 'fold', 'data-drv': 'shadow' }, icon('info', 'sm'), ' Shadow mode. The agent drafts but raises nothing: no Needs you rows, no notes in Work. Switch to Approve in the board settings to act on these.') : null,
+        blk ? el('div', { class: 'fold w', role: 'alert', 'data-drv': 'blocker' }, icon('alert', 'sm'), el('span', null, blk, d.blocker.owner === 'pm' && oldest && d.mode === 'approve' ? [' ', pbtn('outline', 'Review ' + titleOf(oldest), null, { 'data-drv-act': 'focus', onclick: () => { S.open.add(oldest.id); draw(); const t = wrap.querySelector('[data-drv-row="' + oldest.id + '"]'); if (t && t.scrollIntoView) t.scrollIntoView({ block: 'center' }); } })] : null)) : null,
+        rows.length ? list(rows) : el('div', { class: 'fold', 'data-drv': 'empty' }, icon('check', 'sm'), 'No open proposals. The agent files the next one when it has something.')];
+    }
+    put(wrap, sect({ ic: 'spark', title: 'Agent', count: d.mode === 'off' ? 0 : (d.proposals || []).length, right, attrs: { 'aria-label': 'Agent' } }, ...body));
+  }
+
+  draw();
+  load();
+  return wrap;
+}
+
+/* ── the Agent setting in Board settings ── */
+/** Read a board's mode. { ok, mode } or { ok: false, error }. */
+export async function loadAgentMode(api, board) {
+  const r = await api.get('/api/driver/mode', { board });
+  return r && r.ok ? { ok: true, mode: r.mode } : { ok: false, error: errText(r, 'The agent setting could not be read') };
+}
+/** state: { mode, err, busy }. onPick(mode) saves at once (POST /api/driver/mode); the caller redraws. */
+export function agentSetting(state, { onPick } = {}) {
+  ensureDriverCss();
+  const cur = MODES.find((m) => m[0] === state.mode);
+  return el('div', { class: 'drv-set ini-field', 'data-drv': 'setting' }, lbl('AGENT'),
+    state.mode == null && !state.err ? note('Reading the agent setting') : null,
+    state.err ? el('div', { class: 'fold w', role: 'alert', 'data-drv': 'setting-error' }, icon('alert', 'sm'), state.err) : null,
+    state.mode != null ? [
+      el('div', { class: 'seg ini-seg', role: 'group', 'aria-label': 'Agent mode' }, ...MODES.map((m) => btn({ 'aria-pressed': String(state.mode === m[0]), 'data-drv-mode': m[0], disabled: !!state.busy, onclick: () => onPick(m[0]) }, m[1]))),
+      el('div', { class: 'dim ini-note', 'data-drv': 'mode-line' }, el('b', null, cur[1] + '.'), ' ' + cur[2]),
+      chgl(MODES.filter((m) => m !== cur).map((m) => el('li', null, icon('next', 'sm'), el('span', null, el('b', null, m[1] + ':'), ' ' + m[2]), el('span')))),
+      el('div', { class: 'dim ini-note' }, 'The agent files every result as a proposal. It cannot send, merge or change a record by itself. A mode is saved when you press it.')] : null);
+}
+
+/* ── Needs you: the agent's rows (Briefing) ── */
+/** The driver rows of GET /api/needs: "Agent has 3 drafts on <title>" and "<title> is waiting on you". [] when the read fails. */
+export async function loadDriverNeeds() {
+  const r = await pmGet('/api/needs');
+  return r && Array.isArray(r.needs) ? r.needs.filter((n) => n && (n.kind === 'driver-drafts' || n.kind === 'driver-blocked')) : [];
+}
+/** One li.nrow for a driver row (the mockup's two rows). `go(row)` opens the initiative or the Work page. */
+export function needsRow(n, go) {
+  ensureDriverCss();
+  const blocked = n.kind === 'driver-blocked';
+  const work = !n.initiative_id;
+  const chips = blocked ? [el('span', { class: 'tag warn' }, 'waiting on you'), chip(icon(work ? 'check' : 'init', 'sm'), work ? 'Work' : n.initiative_id)]
+    : [tag('agent'), chip(icon(work ? 'check' : 'init', 'sm'), work ? 'Work' : n.initiative_id)];
+  chips[0].className = blocked ? 'tag warn' : 'tag acc';
+  chips.push(el('span', { class: 'dim' }, blocked ? 'The agent will not go on until you decide' : 'Keep, send back or drop each one'));
+  const li = nrow({ ic: blocked ? 'next' : 'spark', hot: true, title: n.question, onOpen: () => go(n), openLabel: n.question, chips,
+    attrs: { 'data-needs-row': n.run_id, 'data-kind': n.kind, 'data-drv-need': n.kind, 'data-ref-row': n.initiative_id || n.run_id } });
+  return li;
+}

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

@@ -167,3 +167,34 @@
 .c3focus .fc-cx > span { display: grid; gap: 1px; overflow: visible; text-align: left; }
 .c3focus .fc-cx > span > b { font-weight: 600; }
 .c3.fc-open { container-type: normal; }
+
+/* compact mode (?pop=1, initiative c3-meet-extension): the panel the Chrome extension frames over a Google Meet call. A head, What is being said,
+ * the conversation and a foot. Folded to a pill, only the head shows. The look is the mockup's "Over Google Meet" panel. Tokens only. */
+.c3focus.fc-pop { overflow: hidden; }
+.c3focus.fc-pop .fc-page { display: flex; flex-direction: column; gap: 8px; height: 100%; max-width: none; margin: 0; padding: 10px; }
+.c3focus.fc-pop .fc-ph { display: flex; align-items: center; gap: 8px; min-height: 24px; font-size: var(--fs-2); flex: 0 0 auto; }
+.c3focus.fc-pop .fc-ph b { font-size: var(--fs-1); color: var(--acc); }
+.c3focus.fc-pop .fc-ph-topic { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
+.c3focus.fc-pop .fc-ph .mono.dim { font-variant-numeric: tabular-nums; }
+.c3focus.fc-pop .fc-popbody { display: flex; flex-direction: column; gap: 8px; flex: 1 1 auto; min-height: 0; overflow: auto; }
+.c3focus.fc-pop .fc-ph .ib { flex: 0 0 auto; width: 28px; height: 28px; min-width: 0; min-height: 0; padding: 0; }
+.c3focus.fc-pop .fc-bandwrap { flex: 0 0 auto; }
+.c3focus.fc-pop .fc-gist { padding: 8px; border-radius: 8px; }
+.c3focus.fc-pop .fc-gist p { font-size: var(--fs-2); }
+.c3focus.fc-pop .fc-gl { display: block; margin: 0 0 2px; }
+.c3focus.fc-pop .fc-cx { padding: 2px 8px; }
+.c3focus.fc-pop .fc-cx > span { display: block; }
+.c3focus.fc-pop .fc-cx > span > span { display: none; }
+.c3focus.fc-pop .fc-cv { display: flex; flex-direction: column; flex: 1 0 auto; min-height: 200px; max-height: none; border: 0; background: none; border-radius: 0; }
+.c3focus.fc-pop .fc-tk { padding: 4px 2px 6px; }
+.c3focus.fc-pop .fc-s2 { flex: 1 1 auto; padding: 4px 2px; }
+.c3focus.fc-pop .fc-in { padding: 6px 2px 0; }
+.c3focus.fc-pop .fc-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex: 0 0 auto; position: sticky; bottom: 0; padding-top: 4px; background: var(--background); font-size: var(--fs-1); }
+.c3focus.fc-pop .fc-popmsg { display: grid; gap: 6px; margin: 0; padding: 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--card); font-size: var(--fs-2); }
+.c3focus.fc-pop .fc-popmsg p { margin: 0; line-height: 1.5; }
+.c3focus.fc-pop .fc-choices { display: grid; gap: 6px; }
+.c3focus.fc-pop .fc-choices button { justify-content: flex-start; text-align: left; white-space: normal; height: auto; }
+.c3focus.fc-pop .fc-choices .mono { margin-right: 4px; }
+.c3focus.fc-pop:not([data-fc-state="ok"]) .fc-cv, .c3focus.fc-pop:not([data-fc-state="ok"]) .fc-foot { display: none; }
+.c3focus.fc-pop.fc-pill .fc-popbody { display: none; }
+.c3focus.fc-pop.fc-pill .fc-page { padding: 6px 10px; justify-content: center; }

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

@@ -1,5 +1,5 @@
 /* pm/c3-focus.js — the Meeting focus page of console3 (initiative c3-meeting-focus; the mockup the PM approved on 2026-10-12, version 7).
- *   openFocus({ event, date })   closeFocus()
+ *   openFocus({ event, date, pop, meet, mtitle })   closeFocus()
  * One calm full-screen page over console3, inside #c3-root: it covers the header, the tabs and the dock (they stay in the DOM, set inert) and Leave
  * focus gives them back. Recording is not touched by leaving. It reads GET /api/meeting-focus every 3 seconds while it is open:
  *   header       title, time, people, initiative; the clock (starts in, or elapsed and left); REC with Start recording or End meeting (the note dock);
@@ -9,7 +9,12 @@
  *   stage        the meeting's material as a card with Open (and Present for Slides); a Google Slides or Docs preview loads only on a press; before the start, what is prepared
  *   conversation the room's last two lines as a faint ticker; PMOS notes below it (only the newest is open); the ones PMOS holds; Ask PMOS quietly
  * Nothing is invented: with the companion off, or before it has answered, the panel shows the ticker and a quiet line. Nothing is sent anywhere.
- * In demo mode (?demo=1) c3-demo-focus.js answers the reads with the mockup's Partner API review. */
+ * In demo mode (?demo=1) c3-demo-focus.js answers the reads with the mockup's Partner API review.
+ * Compact mode (?pop=1, initiative c3-meet-extension): the page the Chrome extension frames over a Google Meet call. Only a head (PMOS, the topic or "Starts in",
+ *   the time left, a fold button), What's being said, the conversation and a foot (Open focus in PMOS, only you see this). The stage, the bar of the talk, the now line and
+ *   the captured items are not drawn, and there is no Leave focus. ?focus=now first asks GET /api/meeting-focus/now (meet = the Meet code, mtitle = the tab's title) which
+ *   meeting the call is; when none fits, the page says so and lists today's meetings to pick from. Fold shows the head only and tells the frame's parent with one
+ *   message, { pmosFocus: 'fold' | 'open' }, that carries no data. */
 import { el } from './dom.js';
 import { pmGet, pmPost } from './http.js';
 import { ensureC3Css } from './pm-work-view.js';
@@ -75,42 +80,78 @@ export function closeFocus() {
   if (f.opener && document.contains(f.opener) && typeof f.opener.focus === 'function') { try { f.opener.focus({ preventScroll: true }); } catch { /* not focusable any more */ } }
 }
 
-export function openFocus({ event, date } = {}) {
+export function openFocus({ event, date, pop, meet, mtitle } = {}) {
   closeFocus();
   const ev = event || {};
-  const id = String(ev.id || '');
+  const want = String(ev.id || '');
+  const resolve = !!pop && want === 'now';   // the extension names no meeting: which one this call is comes first
+  const id = resolve ? '' : want;
   const day = String(date || String(ev.at || ev.start || '').slice(0, 10) || '');
   ensureCss();
   const host = document.getElementById('c3-root') || document.body;
-  const root = el('div', { class: 'c3focus', role: 'region', 'aria-label': 'Meeting focus', 'data-c3focus': '' });
+  const root = el('div', { class: 'c3focus' + (pop ? ' fc-pop' : ''), role: 'region', 'aria-label': pop ? 'PMOS meeting helper' : 'Meeting focus', 'data-c3focus': '', ...(pop ? { 'data-fc-pop': '' } : {}) });
   const r = {};
-  const page = el('div', { class: 'fc-page' },
-    r.top = el('header', { class: 'card fc-top', 'aria-label': 'Meeting' }),
-    r.now = el('div', { class: 'fc-nowl', 'data-fc': 'now-line' }),
-    r.band = el('div', { class: 'fc-bandwrap' }),
-    el('div', { class: 'fc-main' },
-      el('div', { class: 'fc-s' }, r.stage = el('div', { class: 'fc-stagewrap' }), r.cap = el('div', { class: 'fc-capwrap' })),
-      el('aside', { class: 'fc-w', 'aria-label': 'Conversation' },
-        el('section', { class: 'fc-cv', 'aria-label': 'The conversation, with PMOS' },
-          el('div', { class: 'fc-cv-h' }, el('b', null, 'Conversation'), el('span', { class: 'dim' }, 'PMOS replies only to you')),
-          r.tick = el('div', { class: 'fc-tk', 'aria-label': 'Last lines in the room', 'data-fc': 'ticker' }),
-          r.stream = el('ol', { class: 'fc-s2', role: 'list', 'data-fc': 'stream' }),
-          r.form = askForm()))));
+  const convo = el('section', { class: 'fc-cv', 'aria-label': 'The conversation, with PMOS' },
+    pop ? null : el('div', { class: 'fc-cv-h' }, el('b', null, 'Conversation'), el('span', { class: 'dim' }, 'PMOS replies only to you')),
+    r.tick = el('div', { class: 'fc-tk', 'aria-label': 'Last lines in the room', 'data-fc': 'ticker' }),
+    r.stream = el('ol', { class: 'fc-s2', role: 'list', 'data-fc': 'stream' }),
+    r.form = askForm());
+  const page = pop
+    ? el('div', { class: 'fc-page' },
+      r.top = el('header', { class: 'fc-ph', 'data-fc': 'pop-head' }),
+      el('div', { class: 'fc-popbody', 'data-fc': 'pop-body' },
+        r.band = el('div', { class: 'fc-bandwrap' }), convo,
+        r.foot = el('div', { class: 'fc-foot', 'data-fc': 'pop-foot' },
+          lk({ 'data-fc': 'pop-open', title: 'Opens the full focus page in a new tab' }, icon('out', 'sm'), 'Open focus in PMOS'), el('span', { class: 'dim mono' }, 'only you see this'))))
+    : el('div', { class: 'fc-page' },
+      r.top = el('header', { class: 'card fc-top', 'aria-label': 'Meeting' }),
+      r.now = el('div', { class: 'fc-nowl', 'data-fc': 'now-line' }),
+      r.band = el('div', { class: 'fc-bandwrap' }),
+      el('div', { class: 'fc-main' },
+        el('div', { class: 'fc-s' }, r.stage = el('div', { class: 'fc-stagewrap' }), r.cap = el('div', { class: 'fc-capwrap' })),
+        el('aside', { class: 'fc-w', 'aria-label': 'Conversation' }, convo)));
   root.append(page);
-  F = { id, date: day, ev0: ev, root, r, sig: {}, data: null, offset: 0, ui: { open: new Set(), folded: new Set(), pulled: [], stage: 0, picker: false, newTopic: false, addTopic: false, heldOpen: false, pending: new Map(), failed: new Map() },
+  F = { id, date: day, ev0: ev, root, r, sig: {}, data: null, offset: 0, ui: { open: new Set(), folded: new Set(), pulled: [], stage: 0, picker: false, newTopic: false, addTopic: false, heldOpen: false, pending: new Map(), failed: new Map(), pill: false },
+    pop: !!pop, meet: String(meet || ''), mtitle: String(mtitle || ''), choices: null,
     timers: {}, askTimers: new Map(), sheet: null, sheetOpen: false, status: 'reading', error: '',
     opener: document.activeElement && document.activeElement !== document.body ? document.activeElement : null, seenNotes: 0 };
   // a fixed box inside an element with container-type is placed against that element, not the screen: lift it while the page is open
   host.classList.add('fc-open');
   host.append(root);
   const grid = host.querySelector && host.querySelector('.c3grid'); if (grid) grid.inert = true;
-  try { const u = new URL(location.href); u.searchParams.set('focus', id); if (day) u.searchParams.set('fdate', day); history.replaceState(history.state, '', u); } catch { /* no history */ }
+  if (!pop) { try { const u = new URL(location.href); u.searchParams.set('focus', id); if (day) u.searchParams.set('fdate', day); history.replaceState(history.state, '', u); } catch { /* no history */ } }   // the compact page keeps its address: a reload asks again which meeting it is
   draw();
   F.timers.clock = setInterval(tick, 1000);
-  load();
+  if (resolve) resolveNow(); else load();
   const lv = root.querySelector('[data-fc="leave"]'); if (lv) lv.focus({ preventScroll: true });
 }
 
+/* ── which meeting is this call (compact mode) ──────────────────────────────────────────────────────────────────── */
+
+const NOW_RETRY_MS = 30000;
+async function resolveNow() {
+  const f = F; if (!f) return;
+  clearTimeout(f.timers.poll);
+  const p = new URLSearchParams();
+  if (f.meet) p.set('meet', f.meet);
+  if (f.mtitle) p.set('title', f.mtitle);
+  const j = await pmGet('/api/meeting-focus/now?' + p.toString());
+  if (F !== f) return;
+  if (j && j.ok && j.event && j.event.id) { chooseMeeting(j.event, j.date); return; }
+  if (j && Array.isArray(j.choices)) { f.status = 'nomeeting'; f.choices = j.choices; f.error = ''; }
+  else { f.status = 'error'; f.error = (j && j.error) || 'PMOS could not look for the meeting.'; f.choices = null; }
+  draw();
+  f.timers.poll = setTimeout(resolveNow, NOW_RETRY_MS);   // a meeting that starts soon is found without a press
+}
+/** The meeting this page shows from now on: read it, and keep reading it. */
+function chooseMeeting(ev, date) {
+  const f = F; if (!f) return;
+  clearTimeout(f.timers.poll);
+  f.id = String(ev.id); f.ev0 = ev; f.date = String(date || String(ev.at || '').slice(0, 10)); f.choices = null; f.status = 'reading'; f.error = ''; f.data = null;
+  draw();
+  load();
+}
+
 /* ── reading ──────────────────────────────────────────────────────────────────────────────────────────────────── */
 
 async function load() {
@@ -154,6 +195,8 @@ const recState = (d) => (d.note ? d.note.state : 'none');
 function draw() {
   if (!F) return;
   const d = F.data;
+  F.root.dataset.fcState = d ? 'ok' : F.status;
+  if (F.pop) { drawPop(d); return; }
   if (!d) {
     const title = F.ev0.title || 'Meeting';
     region('top', ['wait', F.status, F.error], () => [el('div', { class: 'fc-id' }, leaveBtn(), el('div', { class: 'fc-tt' }, el('h1', null, title),
@@ -166,6 +209,60 @@ function draw() {
   tick();
 }
 
+/* ── compact mode: a head, what is being said, the conversation and a foot ──────────────────────────────────────── */
+
+function drawPop(d) {
+  const ph = d ? phaseOf() : 'before';
+  drawPopHead(d, ph);
+  if (!d) {
+    region('band', ['msg', F.status, F.error, F.choices], popMessage);
+    for (const k of ['tick', 'stream']) region(k, 'wait', () => []);
+    return;
+  }
+  drawBand(d); drawConversation(d);
+  tick();
+}
+function drawPopHead(d, ph) {
+  const e = d ? d.event : F.ev0 || {}; const cur = d ? currentOf(d) : null;
+  const sig = [F.status, e.title, e.at, e.end, ph, cur && cur.text, F.ui.pill];
+  region('top', sig, () => {
+    const s = startMs(); const f = endMs();
+    const label = !d ? (F.status === 'nomeeting' ? 'No meeting right now' : F.status === 'reading' ? 'Reading the meeting' : 'No meeting to show')
+      : ph === 'before' ? ['Starts in ', el('span', { class: 'mono', 'data-fc': 'big' }, clockText((s - nowMs()) / 1000))]
+        : ph === 'after' ? (e.title || 'Meeting') + ' has ended' : cur ? cur.text : e.title;
+    const left = d && ph === 'during' && Number.isFinite(f) ? el('span', { class: 'mono dim', 'data-fc': 'left', title: 'Time left' }, clockText((f - nowMs()) / 1000)) : null;
+    const lbl = F.ui.pill ? 'Open' : 'Fold to a pill';
+    return [el('b', { class: 'mono' }, 'PMOS'), el('span', { class: 'fc-ph-topic', 'data-fc': 'pop-topic', title: typeof label === 'string' ? label : '' }, label), left,
+      ib(lbl, F.ui.pill ? 'next' : 'fold', { 'data-fc': 'pill', 'aria-pressed': String(F.ui.pill) })];
+  });
+}
+function popMessage() {
+  if (F.status === 'nomeeting') {
+    const cs = F.choices || [];
+    return [el('div', { class: 'fc-popmsg', role: 'status', 'data-fc': 'pop-msg' },
+      el('p', null, el('b', null, 'No meeting right now.'), ' PMOS could not tell which meeting this call is.'),
+      cs.length ? el('p', { class: 'dim mono fc-gl' }, 'Today\'s meetings. Pick this call\'s.') : el('p', { class: 'dim' }, 'Nothing else is on today\'s calendar.'),
+      cs.length ? el('div', { class: 'fc-choices', role: 'list', 'data-fc': 'choices' }, ...cs.map((c, i) => pbtn('outline', [el('span', { class: 'mono' }, hhmm(Date.parse(c.at))), ' ' + c.title], null, { 'data-fc': 'choice', 'data-i': String(i), role: 'listitem' }))) : null)];
+  }
+  if (F.status === 'reading') return [el('p', { class: 'dim mono fc-popmsg', role: 'status', 'data-fc': 'pop-msg' }, 'Reading the meeting.')];
+  return [el('p', { class: 'dim mono fc-popmsg', role: 'status', 'data-fc': 'pop-msg' }, F.status === 'missing' ? 'PMOS has no record of this meeting on the calendar, so there is nothing to show.' : F.error || 'The meeting could not be read.')];
+}
+/** The full focus page, in a new tab: the compact page's way to everything it leaves out. */
+function fullUrl() {
+  const u = new URL('/c3.html', location.origin);
+  u.searchParams.set('focus', F.data ? F.data.event.id : F.id);
+  if (F.date) u.searchParams.set('fdate', F.date);
+  if (wsParam()) u.searchParams.set('ws', wsParam());
+  if (isDemo()) u.searchParams.set('demo', '1');
+  return u.href;
+}
+function openFull() { try { window.open(fullUrl(), '_blank', 'noopener'); } catch { /* a blocked pop-up */ } }
+function setPill(on) {
+  F.ui.pill = on; F.root.classList.toggle('fc-pill', on);
+  draw();
+  try { if (window.parent && window.parent !== window) window.parent.postMessage({ pmosFocus: on ? 'fold' : 'open' }, '*'); } catch { /* no parent */ }   // one word, no data: the extension resizes its frame
+}
+
 const leaveBtn = () => pbtn('ghost', 'Leave focus', 'prev', { 'data-fc': 'leave', title: 'Back to where you were. The meeting keeps recording.' });
 
 function leftText(d, ph) {
@@ -339,7 +436,7 @@ function askBubble(a, err) {
 }
 
 function drawConversation(d) {
-  const tail = (d.tail || []).slice(-2);
+  const tail = (d.tail || []).slice(F.pop ? -1 : -2);
   region('tick', tail, () => tail.map((x) => el('p', null, el('span', { class: 'mono' }, x.who), ' ' + x.text)));
   const notes = d.notes || [];
   const pulled = F.ui.pulled.map((id) => notes.find((n) => n.id === id)).filter(Boolean);
@@ -505,6 +602,7 @@ const goTab = (id) => { const b = document.querySelector('[data-c3-tab="' + id +
 function openRef(ref) {
   if (!ref) return;
   const t = ref.type;
+  if (F && F.pop) { openFull(); return; }   // the compact page is a small frame: what a note names opens in the full page
   closeFocus();
   if (t === 'initiative') { import('./c3-init-extras.js').then((m) => { if (!m.goInitiative(ref.id)) goTab('init'); }).catch(() => goTab('init')); return; }
   if (t === 'note') { window.dispatchEvent(new CustomEvent('c3-open-note', { detail: { id: ref.id } })); return; }
@@ -549,6 +647,9 @@ function onClick(ev) {
   const t = ev.target.closest('[data-fc]'); if (!t || !F || !F.root.contains(t)) return;
   const k = t.dataset.fc; const d = F.data;
   if (k === 'leave') { closeFocus(); return; }
+  if (k === 'pill') { setPill(!F.ui.pill); return; }
+  if (k === 'pop-open') { openFull(); return; }
+  if (k === 'choice') { const c = (F.choices || [])[Number(t.dataset.i)]; if (c) chooseMeeting(c, String(c.at || '').slice(0, 10)); return; }
   if (!d) return;
   if (k === 'topics') { showSheet('topics', 'Topics', 'todo', topicsBuild); return; }
   if (k === 'captured') { showSheet('captured', 'Captured so far', 'check', capturedBuild); return; }

package/workspace/public/pm/c3-ii-tabs.js

@@ -1,7 +1,7 @@
 /* pm/c3-ii-tabs.js — the six tabs of an initiative page (mockup v5, 34-initiatives.js iniOverview, iniBreakdown, iniDocs, iniTickets,
  * iniTimeline, iniHistory). registerInitiativeTab(id, mount(host, ctx)); ctx.row, ctx.history (newest first), ctx.tools, ctx.toolsByCat
  * and ctx.tool come from the page (c3-initiatives.js).
- *   Overview   Left: a Summary, then one card per tool of the current stage: the stage records (c3-ini-records.js: problem, RICE, launch
+ *   Overview   On top, the Agent strip (c3-driver.js: GET /api/driver/strip; not in demo mode). Left: a Summary, then one card per tool of the current stage: the stage records (c3-ini-records.js: problem, RICE, launch
  *              checklist, burndown, kill conditions, learnings) and the server's stage tools (ideas, PRD, breakdown, tickets, releases,
  *              measurements, …) drawn from what PMOS holds. ctx.tool (a tool pressed in the strip or picked in More tools) is drawn
  *              first and scrolled to. Right: Details (portfolio, board, workflow with Edit, stage, owner, anchor, horizon, lane), Progress,
@@ -19,6 +19,7 @@ import { wfOf, catOf, kindOf, tplName, toolLabel, toolIcon, loadItems, dropItems
 import { recordCards, recordToolsFor, RECORD_META } from './c3-ini-records.js';
 import { loadDocs, renderDocs } from './c3-ib-docs.js';
 import { timeline, tlInit, tlRange, tlStill } from './c3-ini-timeline.js';
+import { driverStrip } from './c3-driver.js';
 
 const errLine = (text) => el('div', { class: 'fold w', role: 'alert', 'data-ini': 'error' }, icon('alert', 'sm'), text);
 const toneOf = (s) => (s === 'late' ? 'bad' : s === 'at risk' ? 'warn' : 'ok');
@@ -138,7 +139,7 @@ tab('overview', async (ctx, isDead, host) => {
     rels.length ? card({ ic: 'out', title: 'Releases', sub: 'live in the Calendar' }, chgl(rels.map((x) => el('li', null, icon('out', 'sm'), el('span', null, (x.name || x.id) + ' · ' + day(String(x.release_at || x.deploy_at || '').slice(0, 10))), tag('Calendar'))))) : null,
   ];
   if (picked) requestAnimationFrame(() => { const n = host.querySelector('[data-ini-tool-card="' + CSS.escape(picked) + '"]'); if (n && !isDead()) { if (n.scrollIntoView) n.scrollIntoView({ block: 'nearest' }); n.classList.add('ini-flash'); setTimeout(() => n.classList.remove('ini-flash'), 1400); } });
-  return cols(left, right);
+  return [ctx.demo ? null : driverStrip(ctx, r), cols(left, right)];
 });
 
 /* ── Breakdown ── */

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

@@ -7,7 +7,7 @@
  * Rules the builders keep (the conformance gate, R28): every control is a <button> from primitives.js button() (btn() below adds the
  * console3 class it is drawn as, and `ini-b`, the reset that takes the primitive's own height and nowrap off); a colour, a width or a
  * position is a class or a `--in-…` custom property set with geo(), never an inline style; icons come from the console3 sprite
- * (c3ic) or, for the three it lacks (gear, grip, the Jira mark), from svgIcon(). Nothing here reads or writes the server.
+ * (c3ic) or, for the four it lacks (gear, grip, pause, the Jira mark), from svgIcon(). Nothing here reads or writes the server.
  *
  *   btn(attrs, ...kids)            a button; attrs.class is the console3 class (pill, chip2 lk, ib sm, tt, ...), attrs.onclick its press
  *   pbtn(variant, label, icon, attrs)  a primitive button drawn as the primitive (primary, outline, ghost), small
@@ -41,12 +41,14 @@ export function svgIcon(paths, cls) {
 }
 export const GEAR = ['M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z', 'M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0z'];
 export const GRIP = ['M9 5h.01M9 12h.01M9 19h.01M15 5h.01M15 12h.01M15 19h.01'];
+export const PAUSE = ['M8 5v14M16 5v14'];
 export const JIRA = ['M12 3l9 9-9 9-9-9z', 'M12 8l4 4-4 4-4-4z'];
 /** An icon by name: the sprite's, or one of the three drawn here. */
 export function icon(name, cls) {
   if (name === 'settings') return svgIcon(GEAR, cls);
   if (name === 'grip') return svgIcon(GRIP, cls);
   if (name === 'jira') return svgIcon(JIRA, cls);
+  if (name === 'pause') return svgIcon(PAUSE, cls);
   return c3ic(name, cls);
 }
 
@@ -170,7 +172,7 @@ export function nrow(o) {
     el('span', { class: 'ki' + (o.hot ? ' hot' : '') + (o.tone ? ' ini-k-' + o.tone : '') }, icon(o.ic || 'doc')),
     el('div', { class: 'nb' }, t, o.sub ? note(o.sub) : null, o.chips && o.chips.length ? el('div', { class: 'chips' }, ...o.chips.filter(Boolean)) : null, o.after || null, xp),
     o.right && o.right.filter(Boolean).length ? el('div', { class: 'acts' }, ...o.right.filter(Boolean)) : el('span'));
-  if (xp) attachExpand(li, xp, { key: o.key });
+  if (xp) attachExpand(li, xp, { key: o.key, initial: !!o.open, onToggle: o.onToggle });
   return li;
 }
 export function crumbs(parts, right) {