create-pmos 0.123.0 → 0.125.0

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

@@ -0,0 +1,244 @@
+/* pm/run-card.js — one run as a card, on agent-surfaces.html's card anatomy, from scripts/card-state.js cardFor() output.
+ *   mountRunCard(host, ctx)   ctx = { id, name, card, observed?, origin?, src, refresh(), openSession(), fileBody?(path), glossary?, accepted? }
+ *   disposeRunCard(host)
+ * The card, top to bottom: the tag and where it came from; the headline; the work as a thin strip (the CLI's own tool calls when the card carries
+ * them: `observed`, otherwise the agent's reported steps, labelled as that); a permission card ("Wants to run"), the agent's question with its
+ * options as chips, or a failure box; or the result (hero and labelled claims, by type: c3-terminal-results.js); then the next moves the contract
+ * gives (Accept, Revise, Reject, Define, the agent's suggestions, Say) and a mic.
+ * Gestures (c3-swipe.js, card-state.swipeAction): swipe right = the card's primary move (Accept, on a finished result), swipe left = the reply tray
+ * (the agent's suggested chips and a free line). A swipe sends nothing outward. Keys: ArrowRight, ArrowLeft on the focused card.
+ * Presses: Accept is POST /api/runs/answer {behavior:'accept'}; Revise and Reject are POST /api/runs/correction (the correction signal); a permission
+ * is POST /api/runs/answer {allow|deny}; the agent's question is {answer, message: an offered option}. Every one is the PM's press. Anything that
+ * would send a prompt to the session (a suggestion, a revision, the free line, the mic) is drawn disabled with the reason: ctx.src.canPrompt.
+ * Per-run UI state (the open tray, the Revise chips, the flipped face) lives in `UI`, outside the render, so a poll never closes it. */
+import { el } from './dom.js';
+import { ic } from './c3-terminal-icons.js';
+import { ensureC3Css } from './pm-work-view.js';
+import { attachSwipe } from './c3-swipe.js';
+import { toast } from './c3-toast.js';
+import { resultNodes, claimsList } from './c3-terminal-results.js';
+
+const live = new WeakMap();
+const UI = new Map();
+export const uiFor = (id) => { if (!UI.has(id)) UI.set(id, {}); return UI.get(id); };
+const MOVE_ICON = { accept: 'check', revise: 'edit', reject: 'x', define: 'book', say: 'reply', suggest: 'spark' };
+const TAGS = { asking: ['Needs your answer', 'var(--warning)'], permission: ['Needs your permission', 'var(--warning)'], attention: ['Needs the terminal', 'var(--warning)'], working: ['Working', 'var(--acc)'], queued: ['Starting', 'var(--acc)'],
+  not_started: ['Not started', 'var(--warning)'], paused: ['Paused', 'var(--warning)'], quiet: ['Quiet', 'var(--warning)'], degraded: ['Plain text only', 'var(--warning)'], failed: ['Failed', 'var(--destructive)'], done: ['Result', 'var(--success)'] };
+const RESULT_TAG = { Critical: 'var(--destructive)', 'Just in': 'var(--acc)', 'Small win': 'var(--success)', 'Big win': 'var(--success)', Opportunity: 'var(--purple)' };
+const MIN_QUIET = '2 minutes';
+
+const pressErr = (r, what) => toast({ text: what + ' not recorded: ' + ((r && r.error) || 'the server did not answer'), tone: 'error' });
+const dim = (t) => el('span', { class: 'dim mono', style: 'font-size:var(--fs-2)' }, t);
+
+function stripNode(card, observed) {
+  const obs = (observed || []).slice();
+  const steps = card.steps || [];
+  const last = obs.length ? (obs[obs.length - 1].tool + ' ' + obs[obs.length - 1].what) : steps[steps.length - 1];
+  const working = card.state === 'working' || card.state === 'queued';
+  const kids = [];
+  if (working) kids.push(el('div', { class: 'line', role: 'status' }, el('span', { class: 'c3spin' }, ic('run', 'sm')), el('span', { class: 't' }, last || card.title)));
+  if (obs.length) {
+    kids.push(el('div', { class: 'c3t-obs', 'aria-label': 'Tool calls the CLI made' }, obs.slice(-4).map((o) => el('span', { class: 'chip2', title: o.tool + ' ' + o.what }, el('b', null, o.tool), ' ' + o.what))));
+    kids.push(dim('observed: ' + obs.length + ' tool call' + (obs.length === 1 ? '' : 's') + ' the CLI made' + (steps.length ? ' · the agent reported ' + steps.length + ' step' + (steps.length === 1 ? '' : 's') : '')));
+  } else if (steps.length) {
+    kids.push(el('div', { class: 'c3t-obs' }, steps.slice(-3).map((s) => el('span', { class: 'chip2' }, s))), dim('reported by the agent, not checked'));
+  }
+  if (working && steps.length) kids.push(el('div', { class: 'prog', 'aria-hidden': 'true' }, steps.map(() => el('i', { class: 'd' })), el('i')));
+  return kids.length ? el('div', { class: 'c3t-run' }, kids) : null;
+}
+
+/* ── the held requests ── */
+function permissionBox(ctx, p) {
+  const { src, id } = ctx;
+  const send = async (behavior, message) => { const r = await src.answer({ run: id, request: p.request, behavior, message: message || '' }); if (r && r.ok) { toast(behavior === 'allow' ? 'Allowed once. The CLI continues.' : 'Denied. Nothing left the repo.'); ctx.refresh(); } else pressErr(r, 'The answer'); };
+  return el('div', { class: 'ask', 'data-run-permission': p.request },
+    el('b', { class: 'chips2' }, ic('alert', 'sm'), 'Wants to run'),
+    el('div', { class: 'raw' }, '$ ' + (p.command || '')),
+    dim([p.why, 'in ' + (p.cwd || 'the session folder')].filter(Boolean).join(' · ')),
+    dim('The CLI is holding this call until you press.'),
+    el('div', { class: 'c3t-tray' }, el('button', { type: 'button', class: 'pill rec', 'data-perm': 'allow', onclick: () => send('allow') }, 'Allow once'),
+      p.remember ? el('button', { type: 'button', class: 'pill', 'data-perm': 'always', onclick: () => send('allow', 'always ' + p.remember) }, 'Allow pushes to ' + String(p.remember).split('/').pop()) : null,
+      el('button', { type: 'button', class: 'pill', 'data-perm': 'deny', onclick: () => send('deny', 'the PM denied this') }, 'Deny')));
+}
+function questionBox(ctx, card) {
+  const { src, id } = ctx;
+  const send = async (label) => { const r = await src.answer({ run: id, request: card.asked || card.ask.id, behavior: 'answer', message: label }); if (r && r.ok) { toast('Answered. The agent continues with your choice.'); ctx.refresh(); } else pressErr(r, 'The answer'); };
+  return el('div', { class: 'ask', 'data-run-question': card.ask.id }, el('b', null, card.ask.q), el('div', { class: 'c3t-tray' }, (card.ask.options || []).map((o) => el('button', { type: 'button', class: 'pill' + (o.rec ? ' rec' : ''), onclick: () => send(o.label) }, o.label))));
+}
+
+/* ── failure boxes: what failed, in words, and the way on ── */
+function failBox(ctx, card, ui) {
+  const code = card.failure && card.failure.code;
+  const rejected = (card.problems || []).find((p) => /^result rejected/.test(p));
+  let title, why, warn = false; let retry = false; let asAgain = false;
+  if (card.state === 'quiet') { title = 'No output for ' + MIN_QUIET; why = 'It may be stuck. You can open the session.'; retry = true; warn = true; }
+  else if (card.state === 'not_started') { title = 'The session has not started'; why = 'No sign of life yet. The CLI may be waiting for you to trust the folder.'; warn = true; retry = true; }
+  else if (card.state === 'attention') { title = 'This session needs something only the terminal can show'; why = (card.attention && card.attention.message) || 'Open the session to continue.'; warn = true; }
+  else if (card.state === 'degraded') { title = 'The agent replied in plain text'; why = 'It did not use the format, so nothing here is checked: no labels, no sources. It cannot back a message.'; warn = true; asAgain = true; }
+  else if (card.state === 'failed') {
+    if (rejected) { title = 'The reply could not be read'; why = rejected.replace(/^result rejected: /, 'Result rejected: ') + '. Nothing on the card changed.'; }
+    else if (code === 'blocked') { title = 'Blocked'; why = card.failure.why; }
+    else if (code === 'api_error') { title = 'The turn failed on an API error'; why = 'Nothing on the card changed. Retrying usually works.'; retry = true; }
+    else if (code === 'format') { title = 'Recorded in a newer format'; why = card.failure.why; }
+    else if (code === 'crashed') { title = 'The session ended with an error'; why = 'It exited with a non-zero code. Nothing on the card changed.'; retry = true; }
+    else { title = 'The session ended without a usable result'; why = 'Nothing on the card changed.'; retry = true; }
+  } else return null;
+  const can = ctx.src.canPrompt;
+  const nodes = [el('b', { class: 'chips2' }, ic(warn ? 'alert' : 'x', 'sm'), title), dim(why)];
+  if (card.state === 'degraded' && card.fallbackText) nodes.push(el('div', { class: 'draft' }, card.fallbackText));
+  if (ui.raw && (card.problems || []).length) nodes.push(el('div', { class: 'raw' }, (card.problems || []).map((p) => el('div', null, '> ' + p))));
+  nodes.push(el('div', { class: 'c3t-tray' },
+    (retry || asAgain) ? el('button', { type: 'button', class: 'pill rec', 'data-retry': '', disabled: !can, title: can ? '' : ctx.src.why, onclick: async () => { const r = await ctx.src.send(ctx.id, { verb: 'retry' }); if (r && r.ok) ctx.refresh(); } }, asAgain ? 'Ask again in the format' : card.state === 'not_started' ? 'Try again' : 'Retry') : null,
+    openBtn(ctx),
+    (card.problems || []).length ? el('button', { type: 'button', class: 'pill', 'aria-pressed': String(!!ui.raw), onclick: () => { ui.raw = !ui.raw; ctx.redraw(); } }, ui.raw ? 'Hide' : 'What it said') : null,
+    el('button', { type: 'button', class: 'ib', 'aria-label': 'Dismiss', title: 'Dismiss this notice', onclick: () => { ui.hidden = card.state + ':' + (code || ''); ctx.redraw(); } }, ic('x', 'sm'))));
+  return el('div', { class: 'fail' + (warn ? ' w' : ''), 'data-run-fail': card.state, role: 'group' }, nodes);
+}
+function pausedBox(ctx, card) {
+  const at = (card.pause && card.pause.resume_at) || null;
+  return el('div', { class: 'ask', 'data-run-paused': '' }, el('b', { class: 'chips2' }, ic('run', 'sm'), 'Paused: usage limit'), dim(at ? 'Resumes by itself at about ' + at + '. Everything done so far is kept.' : 'The run is paused, not failed. Everything done so far is kept.'),
+    el('div', { class: 'prog', 'aria-hidden': 'true' }, el('i', { class: 'd' }), el('i', { class: 'd' }), el('i'), el('i')), el('div', { class: 'c3t-tray' }, openBtn(ctx)));
+}
+export function openBtn(ctx) {
+  return el('button', { type: 'button', class: 'pill c3t-open', 'data-open-session': '', title: 'Open the session: its real terminal, in the main app', onclick: () => ctx.openSession && ctx.openSession(ctx.id) }, ic('term', 'sm'), 'Open the session');
+}
+
+/* ── the next moves, the sub-chips, the tray, the voice line ── */
+function movesNode(ctx, card, ui) {
+  const can = ctx.src.canPrompt;
+  const doMove = async (m) => {
+    if (m.verb === 'accept') {
+      const r = await ctx.src.answer({ run: ctx.id, request: 'result', behavior: 'accept' });
+      if (r && r.ok) { ui.accepted = true; ui.sub = null; toast('Recorded as your acceptance.'); ctx.refresh(); ctx.redraw(); } else pressErr(r, 'The acceptance');
+    } else if (m.verb === 'revise' || m.verb === 'reject' || m.verb === 'define') { ui.sub = ui.sub === m.verb ? null : m.verb; ui.def = null; ctx.redraw(); }
+    else if (m.verb === 'say') { ui.tray = !ui.tray; ctx.redraw(); }
+    else if (m.verb === 'suggest') { const r = await ctx.src.send(ctx.id, { verb: 'suggest', label: m.label, prompt: m.prompt }); if (r && r.ok) { toast('Asked: ' + m.label); ctx.refresh(); } }
+  };
+  const bar = el('div', { class: 'c3t-tray c3mv', 'data-run-moves': '' }, (card.nextMoves || []).map((m) => {
+    const off = (m.verb === 'suggest') && !can;
+    return el('button', { type: 'button', class: 'pill' + (ui.sub === m.verb || (m.verb === 'say' && ui.tray) ? ' on' : ''), 'data-move': m.verb, 'aria-pressed': ['revise', 'reject', 'define', 'say'].includes(m.verb) ? String(ui.sub === m.verb || (m.verb === 'say' && !!ui.tray)) : null,
+      disabled: off, title: m.by === 'agent' ? (off ? ctx.src.why + ' It would send: ' + m.prompt : 'The agent suggests this and will be told: ' + m.prompt) : null, onclick: () => doMove(m) }, ic(MOVE_ICON[m.verb] || 'spark', 'sm'), m.label);
+  }),
+  el('button', { type: 'button', class: 'pill', 'data-move': 'mic', 'aria-label': 'Speak', disabled: !(can || ctx.src.voice), title: ctx.src.voice ? 'Speak (transcribed on this machine; nothing leaves it)' : ctx.src.why, onclick: () => voiceStart(ctx) }, ic('mic', 'sm')),
+  el('span', { style: 'flex:1' }),
+  el('button', { type: 'button', class: 'ib', 'data-flip': '', 'aria-label': 'Flip to the case file', title: 'Case file', onclick: () => { ui.flip = true; ctx.redraw(); } }, ic('flip', 'sm')));
+  const sub = [];
+  if (ui.sub === 'revise') sub.push(el('div', { class: 'c3t-tray', 'data-run-revise': '' }, dim('How?'), (card.revise || []).map((t) => el('button', { type: 'button', class: 'pill', onclick: () => correct(ctx, 'revise', t) }, t))));
+  if (ui.sub === 'reject') sub.push(el('div', { class: 'c3t-tray', 'data-run-reject': '' }, dim('Why?'), (card.reject || []).map((t) => el('button', { type: 'button', class: 'pill', onclick: () => correct(ctx, 'reject', t) }, t))));
+  if (ui.sub === 'define') {
+    const g = ctx.glossary || {}; const keys = Object.keys(g);
+    sub.push(keys.length ? el('div', { class: 'c3t-tray' }, keys.map((k) => el('button', { type: 'button', class: 'pill' + (ui.defK === k ? ' on' : ''), onclick: () => { ui.defK = k; ui.def = g[k]; ctx.redraw(); } }, k))) : dim('No glossary term is defined for this run.'));
+    if (ui.def) sub.push(dim(ui.def));
+  }
+  return [bar, ...sub];
+}
+async function correct(ctx, kind, reason) {
+  const ui = uiFor(ctx.id);
+  const r = await ctx.src.correct({ run: ctx.id, kind, reason });
+  if (!(r && r.ok)) { pressErr(r, 'The correction'); return; }
+  ui.sub = null;
+  if (kind === 'reject') { ui.rejected = reason; toast('Rejected: ' + reason + '. Counted as a correction.'); }
+  else if (ctx.src.canPrompt) { await ctx.src.send(ctx.id, { verb: 'revise', arg: reason }); toast('Revised. Counted as a correction.'); }
+  else toast('Counted as a correction. The revision itself cannot be sent from this page: open the session.');
+  ctx.refresh(); ctx.redraw();
+}
+
+function trayNode(ctx, card, ui) {
+  const can = ctx.src.canPrompt;
+  const chips = (card.nextMoves || []).filter((m) => m.verb === 'suggest');
+  const send = async (text) => { const r = await ctx.src.send(ctx.id, { verb: 'free', text }); if (r && r.ok) { (ui.say = ui.say || []).push({ q: text, a: r.say }); ui.tray = false; ctx.refresh(); ctx.redraw(); } };
+  const input = el('input', { type: 'text', 'aria-label': 'Reply to the agent', placeholder: can ? 'Reply…' : 'Reply (not available here)', readonly: !can, disabled: !can, title: can ? '' : ctx.src.why, 'data-run-free': '' });
+  input.addEventListener('keydown', (e) => { if (e.key === 'Enter' && input.value.trim()) send(input.value.trim()); });
+  return el('div', { class: 'c3t-tray', 'data-run-tray': '' },
+    chips.map((m) => el('button', { type: 'button', class: 'pill', disabled: !can, title: can ? m.prompt : ctx.src.why + ' It would send: ' + m.prompt, onclick: async () => { const r = await ctx.src.send(ctx.id, { verb: 'suggest', label: m.label, prompt: m.prompt }); if (r && r.ok) { ui.tray = false; ctx.refresh(); ctx.redraw(); } } }, m.label)),
+    input,
+    el('button', { type: 'button', class: 'ib', 'aria-label': 'Speak', disabled: !ctx.src.voice, title: ctx.src.voice ? 'Speak (transcribed on this machine)' : ctx.src.why, onclick: () => voiceStart(ctx) }, ic('mic', 'sm')),
+    el('button', { type: 'button', class: 'ib', 'aria-label': 'Close reply', onclick: () => { ui.tray = false; ctx.redraw(); } }, ic('x', 'sm')),
+    can ? null : el('div', { class: 'dim mono', style: 'flex-basis:100%;font-size:var(--fs-1)' }, ctx.src.why));
+}
+
+function voiceStart(ctx) {
+  const ui = uiFor(ctx.id); if (ui.voice || !ctx.src.voice) return;
+  ui.tray = false; ui.voice = { phase: 'listen' }; ctx.redraw();
+  ui.vt = setTimeout(() => {
+    if (!ui.voice) return;
+    const v = ctx.src.voice(); ui.voice = { phase: 'heard', ...v, left: v.autosend_ms ? Math.round(v.autosend_ms / 1000) : 0 }; ctx.redraw();
+    if (ui.voice.left) ui.vi = setInterval(() => { if (!ui.voice || ui.voice.phase !== 'heard') { clearInterval(ui.vi); return; } ui.voice.left -= 1; if (ui.voice.left <= 0) voiceSend(ctx); else ctx.redraw(); }, 1000);
+  }, 1300);
+}
+async function voiceSend(ctx, text) {
+  const ui = uiFor(ctx.id); const v = ui.voice; if (!v) return;
+  clearInterval(ui.vi); const t = text || v.text; ui.voice = null;
+  const r = await ctx.src.send(ctx.id, { verb: 'free', text: t });
+  if (r && r.ok) (ui.say = ui.say || []).push({ q: t, a: r.say });
+  ctx.refresh(); ctx.redraw();
+}
+function voiceNode(ctx, ui) {
+  const v = ui.voice;
+  const stop = () => { clearInterval(ui.vi); clearTimeout(ui.vt); ui.voice = null; ctx.redraw(); };
+  if (v.phase === 'listen') return el('div', { class: 'ask', role: 'status' }, el('b', { class: 'chips2' }, el('span', { class: 'dotp' }), 'Listening'), dim('Transcribed on this machine. Nothing leaves it.'), el('div', { class: 'c3t-tray' }, el('button', { type: 'button', class: 'pill', onclick: stop }, 'Cancel')));
+  if (v.phase === 'edit') { const i = el('input', { type: 'text', value: v.text, 'aria-label': 'Edit the words' }); return el('div', { class: 'ask' }, dim('Edit the words, then send'), el('div', { class: 'c3t-tray' }, i, el('button', { type: 'button', class: 'pill rec', onclick: () => voiceSend(ctx, i.value) }, 'Send'), el('button', { type: 'button', class: 'pill', onclick: stop }, 'Cancel'))); }
+  return el('div', { class: 'ask', role: 'status' }, dim('Heard · ' + Math.round(v.confidence * 100) + '% sure' + (v.warn ? ' · check the words' : '')), el('b', null, '“' + v.text + '”'),
+    el('div', { class: 'c3t-tray' }, el('button', { type: 'button', class: 'pill rec', onclick: () => voiceSend(ctx) }, v.left ? 'Send in ' + v.left : 'Send'), el('button', { type: 'button', class: 'pill', onclick: () => { clearInterval(ui.vi); v.phase = 'edit'; ctx.redraw(); } }, 'Edit'), el('button', { type: 'button', class: 'pill', onclick: stop }, 'Cancel')));
+}
+
+function backNode(ctx, card, ui) {
+  const n = (card.claims || []).length;
+  const log = (ctx.observed || []).map((o) => o.tool + ' ' + o.what).join(' › ');
+  const row = (k, v) => [el('dt', null, k), el('dd', null, v)];
+  return [el('div', { class: 'top' }, el('span', { class: 'tg', style: '--tc:var(--acc)' }, ctx.card.state), dim('case file')), el('h3', null, ctx.name || ctx.id),
+    el('dl', { class: 'c3t-back' }, ...row('Origin', ctx.origin || 'your swipe'), ...row('Session', ctx.id + ' · a real CLI in a PTY, not shown'), ...row('State', card.state), ...row('Evidence', n + ' labelled claim' + (n === 1 ? '' : 's')), ...row('Log', log || (card.steps || []).join(' › ') || 'nothing run yet')),
+    el('div', { class: 'c3t-tray' }, openBtn(ctx), el('span', { style: 'flex:1' }), el('button', { type: 'button', class: 'ib', 'aria-label': 'Back to the card', onclick: () => { ui.flip = false; ctx.redraw(); } }, ic('flip', 'sm')))];
+}
+
+function draw(host, ctx) {
+  const card = ctx.card || {}; const ui = uiFor(ctx.id);
+  ctx.redraw = () => draw(host, ctx);
+  const old = live.get(host); if (old) old.off();
+  const done = card.state === 'done' && card.result;
+  const perms = (card.permissions || []).slice(); if (!perms.length && card.permission) perms.push({ request: card.permission.id, tool: card.permission.tool, command: card.permission.command, cwd: card.permission.cwd, why: card.permission.why });
+  const tag = done ? [(card.result.tag) || (ui.accepted ? 'Accepted' : 'Result'), RESULT_TAG[card.result.tag] || 'var(--success)'] : perms.length ? TAGS.permission : (TAGS[card.state] || ['Run', 'var(--acc)']);
+  const kids = [el('div', { class: 'top' }, el('span', { class: 'tg', style: '--tc:' + tag[1] }, tag[0]), dim(ctx.origin || ''))];
+  let swipeRight = false;
+  if (ui.flip) { kids.length = 0; kids.push(...backNode(ctx, card, ui)); }
+  else {
+    kids.push(el('h3', null, done && card.result.headline ? card.result.headline : (ctx.name || card.title)));
+    const strip = stripNode(card, ctx.observed); if (strip) kids.push(strip);
+    if (perms.length) perms.forEach((p) => kids.push(permissionBox(ctx, p)));
+    else if (card.state === 'asking' && card.ask) kids.push(questionBox(ctx, card));
+    else if (card.state === 'paused') kids.push(pausedBox(ctx, card));
+    else if (ui.hidden !== card.state + ':' + ((card.failure && card.failure.code) || '')) { const f = failBox(ctx, card, ui); if (f) kids.push(f); }
+    if (card.state === 'permission' && !perms.length) kids.push(dim('Waiting for your permission. Open the session to see it.'));
+    if (done) {
+      kids.push(...resultNodes(card.result, { ui, redraw: ctx.redraw, fileBody: ctx.fileBody }).filter(Boolean));
+      (ui.say || []).forEach((s) => kids.push(el('div', { class: 'sayb' }, el('div', { class: 'm me' }, s.q), el('div', { class: 'm bot' }, s.a && s.a.basis ? el('span', { class: 'lab l-est' }, s.a.basis) : null, s.a ? s.a.text : ''))));
+      if (ui.rejected) kids.push(el('div', { class: 'chips2' }, el('span', { class: 'chip2' }, 'Rejected: ' + ui.rejected + ' · counted as a correction')));
+      else if (ui.accepted || ctx.accepted) kids.push(el('div', { class: 'chips2' }, el('span', { class: 'chip2 ok' }, 'Accepted by you'), el('button', { type: 'button', class: 'ib', 'aria-label': 'Flip to the case file', onclick: () => { ui.flip = true; ctx.redraw(); } }, ic('flip', 'sm'))));
+      else if (!ctx.readonly) { kids.push(...movesNode(ctx, card, ui)); swipeRight = (card.nextMoves || []).some((m) => m.verb === 'accept'); }
+    }
+    if (ui.voice) kids.push(voiceNode(ctx, ui));
+    else if (ui.tray) kids.push(trayNode(ctx, card, ui));
+    if (!done && !ui.tray && !ui.voice && !perms.length && card.state !== 'asking' && !['working', 'queued'].includes(card.state)) { /* a failure box carries its own moves */ }
+    if (!done && !ctx.readonly) kids.push(el('div', { class: 'c3t-tray' }, el('span', { style: 'flex:1' }), el('button', { type: 'button', class: 'ib', 'aria-label': 'Flip to the case file', title: 'Case file', onclick: () => { ui.flip = true; ctx.redraw(); } }, ic('flip', 'sm'))));
+  }
+  const art = el('article', { class: 'c3t-card' + (['working', 'queued'].includes(card.state) ? ' busy' : '') + (ui.flash ? ' flash' : ''), 'data-run-card': card.state || '', 'data-run-id': ctx.id, 'aria-label': ctx.name || ctx.id }, ...kids);
+  host.replaceChildren(el('div', { class: 'c3 c3e' }, art));
+  const off = attachSwipe(art, {
+    onRight: swipeRight && !ctx.readonly ? () => { const m = (card.nextMoves || []).find((x) => x.verb === 'accept'); if (m) ctx.src.answer({ run: ctx.id, request: 'result', behavior: 'accept' }).then((r) => { if (r && r.ok) { ui.accepted = true; toast('Recorded as your acceptance.'); ctx.refresh(); ctx.redraw(); } else pressErr(r, 'The acceptance'); }); } : null,
+    onLeft: ui.flip || ctx.readonly ? null : () => { ui.tray = true; ui.sub = null; ctx.redraw(); },
+    labelRight: 'accept', labelLeft: 'reply', iconRight: 'check', iconLeft: 'reply' });
+  live.set(host, { off });
+}
+
+export function mountRunCard(host, ctx = {}) {
+  ensureC3Css();
+  const c = { ...ctx };
+  if (!c.src) c.src = { canPrompt: false, why: 'No prompt route.', answer: async () => ({ ok: false, error: 'no source' }), correct: async () => ({ ok: false, error: 'no source' }), send: async () => ({ ok: false }) };
+  if (!c.src.send) c.src = { ...c.src, send: async () => ({ ok: false, error: c.src.why }) };
+  c.refresh = c.refresh || (() => {}); c.id = c.id || 'run';
+  draw(host, c);
+}
+export function disposeRunCard(host) {
+  const o = live.get(host); if (o) o.off();
+  live.delete(host); host.replaceChildren();
+}

package/workspace/public/pm/sessions-panel.js

@@ -0,0 +1,149 @@
+/* pm/sessions-panel.js — the sessions surface of the agent surfaces page (agent-surfaces.html: the Sessions popover plus the cards it lists).
+ *   mountSessions(host, ctx)   disposeSessions(host)
+ * Four groups from GET /api/runs (scripts/sessions-list.js groupSessions): On a card (a run tied to a card, drawn as its card, open), Started by me
+ * (rows that open to the run's card and a blank-session panel), Past (7 days; rows that open to the timeline and the result), Automatic (behind a
+ * switch, off; a trigger started them and their result arrives as a card). Each run is a run-card.js card (card-state.js cardFor): the question, the
+ * permission card, the result with labelled claims and its next moves. Data and presses go through c3-terminal-data.js: real = /api/runs,
+ * /api/runs/answer, /api/runs/correction; demo = the fixtures of c3-demo-term.js.
+ * Not drawn: the mockup's Rules card ("Ask before the first push": no such setting exists). Nothing here sends anything outward. */
+import { el } from './dom.js';
+import { ensureC3Css } from './pm-work-view.js';
+import { ic } from './c3-terminal-icons.js';
+import { mountRunCard, disposeRunCard, openBtn, uiFor } from './run-card.js';
+import { source, needsYou } from './c3-terminal-data.js';
+import { attachExpand, makeXp } from './c3-expand.js';
+import { toast } from './c3-toast.js';
+
+const live = new WeakMap();
+const DOT = { working: 'w', queued: 'w', asking: 'n', permission: 'n', attention: 'n', not_started: 'n', failed: 'b', quiet: '', paused: 'n', done: '' };
+
+const ago = (iso) => { const m = Math.max(0, Math.round((Date.now() - Date.parse(iso)) / 60000)); return Number.isFinite(m) ? (m < 1 ? 'just now' : m < 60 ? m + ' min' : m < 1440 ? Math.round(m / 60) + ' h' : Math.round(m / 1440) + ' d') : ''; };
+const when = (iso) => { const d = new Date(iso); return Number.isFinite(+d) ? d.toLocaleDateString('en-GB', { weekday: 'short', day: 'numeric', month: 'short' }) : ''; };
+const stateWord = (c) => (c.permissions && c.permissions.length ? 'waiting for your allow or deny' : ({ asking: 'asking you', permission: 'waiting for your allow or deny', working: 'working', queued: 'starting', quiet: 'quiet', failed: 'failed', done: 'result ready', attention: 'needs the terminal', not_started: 'not started', paused: 'paused', degraded: 'plain text only' })[c.state] || c.state);
+function outcomeOf(card, meta) {
+  if (meta && meta.out) return meta.out;
+  if (!card) return 'ended';
+  if (card.state === 'done' && card.result) return 'Result: ' + card.result.type;
+  if (card.state === 'failed') return (card.failure && card.failure.why) || 'Failed';
+  return card.title || 'ended';
+}
+
+function cardHost(st, s, card, extra) {
+  const host = el('div', { 'data-run-host': s.id });
+  const ctx = { id: s.id, name: s.name, card, observed: st.data.demo && st.data.demo.observed ? st.data.demo.observed[s.id] : null, origin: s.origin === 'manual' ? (s.cardId ? 'on a card' : 'started by you') : s.origin, src: st.src,
+    refresh: st.refresh, openSession: st.openSession, glossary: st.data.demo && st.data.demo.glossary, fileBody: st.data.demo && st.data.demo.fileBody, accepted: false, ...(extra || {}) };
+  mountRunCard(host, ctx);
+  return host;
+}
+
+function section(icon, title, count, right, body) {
+  return el('section', { class: 'card sect c3t-sect' }, el('div', { class: 'sh2' }, el('h2', null, ic(icon, 'sm'), title + ' ', el('span', { class: 'bdg g' }, String(count))), right || null), body);
+}
+const none = (t) => el('div', { class: 'fold' }, ic('check', 'sm'), t);
+
+function row(st, s, card, parts) {
+  const d = DOT[(card && card.state)] || '';
+  const li = el('li', { class: 'nrow c3t-row', 'data-row': '', 'data-run': s.id });
+  const xp = makeXp(parts.body);
+  li.append(el('span', { class: 'ki' }, el('span', { class: 'mk ' + d }, '●')), el('div', { class: 'nb' }, el('span', { class: 'tt' }, s.name), el('div', { class: 'chips' }, dim(parts.sub))), el('span', { class: 'c3t-chev' }, ic('chev', 'sm')), xp);
+  li.style.gridTemplateColumns = 'auto minmax(0,1fr) auto';
+  xp.style.gridColumn = '1 / -1';
+  const key = 'r-' + s.id;
+  attachExpand(li, xp, { key, initial: st.open.has(key), onToggle: (on) => { if (on) st.open.add(key); else st.open.delete(key); } });
+  return li;
+}
+const dim = (t) => el('span', { class: 'dim mono', style: 'font-size:var(--fs-2)' }, t);
+
+function blankPanel(st, s, card) {
+  const ui = uiFor(s.id); const can = st.src.canPrompt;
+  const chat = ui.chat || (ui.chat = [['bot', 'What would you like to look at?']]);
+  const redraw = () => { st.redraw(); };
+  const say = async (v) => { chat.push(['me', v], ['st', 'Reading planning/ …']); redraw(); const r = await st.src.send(s.id, { verb: 'free', text: v }); chat.pop(); chat.push(['bot', (r && r.say && r.say.text) || 'Done.']); redraw(); };
+  const input = el('input', { type: 'text', 'aria-label': 'Message to the agent', placeholder: can ? 'Message the agent' : 'Message (not available here)', readonly: !can, disabled: !can, title: can ? '' : st.src.why, 'data-run-chat': '' });
+  input.addEventListener('keydown', (e) => { if (e.key === 'Enter' && input.value.trim()) say(input.value.trim()); });
+  return el('div', { class: 'c3t-panel', 'data-blank-panel': s.id },
+    can ? el('div', { class: 'feed' }, chat.map((m) => el('div', { class: 'm ' + m[0] }, m[1]))) : null,
+    can ? el('div', { class: 'c3t-tray' }, ["Review this week's slips", 'Draft the monthly report'].map((t, i) => el('button', { type: 'button', class: 'pill' + (i ? '' : ' rec'), onclick: () => say(t) }, t))) : null,
+    el('div', { class: 'c3t-tray' }, input, openBtn({ id: s.id, openSession: st.openSession })),
+    can ? null : dim(st.src.why));
+}
+
+function tlBody(st, s, card, meta) {
+  const tl = st.data.demo && st.data.demo.timeline;
+  const kids = [];
+  const items = tl ? tl.entries.filter((e) => e.run === s.id).reverse() : null;
+  if (items && items.length) {
+    kids.push(el('div', { class: 'c3t-tl2', 'data-timeline': s.id }, items.map((e) => el('div', { class: 'tlr' }, el('span', { class: 'lab ' + (e.src === 'observed' ? 'l-obs' : e.src === 'you' ? 'l-you' : 'l-rep') }, e.src), el('span', null, e.text)))),
+      dim('Observed is what the CLI did. Reported is what the agent said, with labels. You is what you pressed.'));
+  } else kids.push(dim('The timeline of what the CLI did, what the agent said and what you pressed is not served: GET /api/runs carries the cards only.'));
+  const resume = tl && tl.resume.find((r) => r.run === s.id);
+  kids.push(el('div', { class: 'c3t-tray' }, el('button', { type: 'button', class: 'pill', disabled: true, title: 'Resuming starts a session over the terminal connection. This page has no route for it.' }, ic('run', 'sm'), 'Continue this session'), openBtn({ id: s.id, openSession: st.openSession }),
+    resume ? el('span', { class: 'dim mono', style: 'font-size:var(--fs-1)' }, resume.command) : null));
+  return kids;
+}
+
+function draw(host, st) {
+  const d = st.data;
+  host.querySelectorAll('[data-run-host]').forEach((h) => { try { disposeRunCard(h); } catch { /* gone */ } });
+  host.replaceChildren();
+  if (!d || !d.ok) { host.append(el('p', { class: 'dim mono', role: 'status' }, d && d.error ? 'The runs could not be read: ' + d.error : 'Reading the runs')); return; }
+  const root = el('div', { class: 'c3 c3e c3t', 'data-sessions': '' });
+  const g = d.groups || {}; const cards = d.cards || {};
+  /* On a card: each run is its card */
+  const on = g.onCard || [];
+  root.append(section('spark', 'On a card', on.length, null, on.length
+    ? el('div', { class: 'c3t-cards', 'data-c3t': 'on-card' }, on.map((s) => cardHost(st, s, cards[s.id] || { state: 'working', title: 'Working', nextMoves: [], claims: [], steps: [] })))
+    : none('None running. A result appears on its card.')));
+  /* Started by me */
+  const mine = g.startedByMe || [];
+  const add = el('a', { class: 'chip2 lk c3t-new', href: '/', title: 'Start a session in the main app. A session starts over the terminal connection; this page has no route for it.' }, ic('plus', 'sm'), 'New');
+  root.append(section('term', 'Started by me', mine.length, add, mine.length
+    ? el('ul', { class: 'list', 'data-c3t': 'mine' }, mine.map((s) => { const c = cards[s.id]; return row(st, s, c, { sub: stateWord(c || { state: 'working' }) + ' · ' + ago(s.startedAt) + ' · main tree', body: [cardHost(st, s, c || { state: 'working', title: 'Working', nextMoves: [], claims: [], steps: [] }), blankPanel(st, s, c)] }); }))
+    : none('None. Start one in the main app.')));
+  /* Past */
+  const past = g.past || [];
+  root.append(section('clock', 'Past (7 days)', past.length, null, past.length
+    ? el('ul', { class: 'list', 'data-c3t': 'past' }, past.map((s) => { const c = cards[s.id]; const meta = d.demo && d.demo.pastMeta && d.demo.pastMeta.find((m) => m.id === s.id);
+      return row(st, s, c, { sub: when(s.endedAt || s.startedAt) + ' · ' + outcomeOf(c, meta), body: [...tlBody(st, s, c, meta), c ? cardHost(st, s, c, { readonly: true }) : null].filter(Boolean) }); }))
+    : none('Nothing in the last 7 days.')));
+  /* Automatic: hidden unless switched on */
+  const auto = g.automatic || [];
+  const running = auto.filter((s) => s.endedAt == null).length;
+  const sw = el('button', { type: 'button', class: 'c3t-sw', role: 'switch', 'aria-checked': String(st.showAuto), 'aria-label': 'Show automatic sessions', 'data-sessions-auto': '', onclick: () => { st.showAuto = !st.showAuto; st.redraw(); } }, el('i'));
+  root.append(section('bolt', 'Automatic', auto.length, el('span', { class: 'chips2' }, dim(auto.length + ' today' + (running ? ', ' + running + ' running' : '')), sw), st.showAuto
+    ? (auto.length ? el('ul', { class: 'list', 'data-c3t': 'auto' }, auto.map((s) => { const c = cards[s.id]; return row(st, s, c, { sub: s.origin + ' · ' + (s.endedAt == null ? 'running' : 'ended') + ' · ' + ago(s.startedAt) + ' · ' + outcomeOf(c), body: c ? [cardHost(st, s, c, { readonly: true })] : [dim('No card yet.')] }); })) : none('None.'))
+    : el('div', { class: 'dim', style: 'font-size:var(--fs-2)' }, 'Hidden. They run, write their result onto a card and clean up. Switch on to see them.')));
+  host.append(root);
+}
+
+export function mountSessions(host, ctx = {}) {
+  disposeSessions(host);
+  if (ctx && ctx.FIXTURE) return;
+  ensureC3Css();
+  const st = { src: source(), data: null, showAuto: false, last: '', gone: false, timer: null, refresh: null, redraw: null, open: new Set(), openSession: (id) => { try { window.dispatchEvent(new CustomEvent('pmos:open-session', { detail: { id } })); } catch { /* no event */ } } };
+  if (st.src.demo) st.openSession = () => toast('In the real workspace this opens the CLI session.');
+  st.redraw = () => draw(host, st);
+  const busy = () => host.contains(document.activeElement) && ['INPUT', 'TEXTAREA'].includes(document.activeElement.tagName);
+  st.refresh = async () => {
+    const r = await st.src.getRuns();
+    if (st.gone || !r) return;
+    const key = JSON.stringify(r);
+    if (key === st.last) return;
+    st.last = key; st.data = r;
+    if (r.ok && ctx.onNeeds) ctx.onNeeds(needsYou(r));
+    if (!busy()) draw(host, st); else st.last = '';
+  };
+  st.timer = setInterval(() => { if (!busy()) st.refresh(); }, 5000);
+  if (st.src.subscribe) st.unsub = st.src.subscribe(() => st.refresh());
+  live.set(host, st);
+  host.append(el('p', { class: 'dim mono', role: 'status' }, 'Reading the runs'));
+  st.refresh();
+}
+
+export function disposeSessions(host) {
+  const st = live.get(host);
+  if (st) { st.gone = true; clearInterval(st.timer); if (st.unsub) st.unsub(); }
+  live.delete(host);
+  host.querySelectorAll('[data-run-host]').forEach((h) => { try { disposeRunCard(h); } catch { /* gone */ } });
+  host.replaceChildren();
+}

package/workspace/public/pm/shell-bell.js

@@ -0,0 +1,162 @@
+/* pm/shell-bell.js — the bell, its list and the banner (console3 wave E2b), and haptics.
+ *
+ *   mountBell(host, { go }) / disposeBell(host)   the bell button with a count; a press opens the list and does nothing else
+ *   openBellList()                                the list popup (also what a press on the ticker opens)
+ *   buzz(kind)                                    navigator.vibrate(hapticFor(kind)) only when it exists and motion is allowed
+ *
+ * The count is the number of cards (bellCount). The list shows each card's headline under its tag. The banner is the pinned Critical card
+ * the briefing names; it dismisses for the session and never comes back for the same card. A bell press never runs an action: a row
+ * only closes the list and goes to Today, where the card is. Lifted: console3.html lines 2476 (bellBtn), 2477 (syncBell), 2506 to 2515
+ * (bsHtml, bannerHtml), and the .nli row (line 503). Not lifted: the mockup's invented notifications and its timed live arrival.
+ */
+import { el } from './dom.js';
+import { ensureC3Css, c3ic, c3Phone } from './pm-work-view.js';
+import { TAG_STYLE } from './briefing-model.js';
+import { bellCount, bannerOf, hapticFor } from './shell-model.js';
+import { notifsOf } from './briefing-model.js';
+import { openSheet } from './c3-sheet.js';
+import { onBriefing, loadBriefing, reducedMotion } from './shell-ticker.js';
+
+export function buzz(kind) {
+  try {
+    const p = hapticFor(kind, reducedMotion());
+    if (p && typeof navigator !== 'undefined' && typeof navigator.vibrate === 'function') navigator.vibrate(p);
+  } catch { /* no haptics here */ }
+}
+
+const seenKeys = new Set();      // banners dismissed this session
+let goTo = null;
+let popup = null;                // { node, off }
+
+function closePopup() {
+  if (!popup) return;
+  document.removeEventListener('keydown', popup.onKey, true);
+  popup.off && popup.off();
+  popup.stop && popup.stop();
+  popup.node.remove();
+  popup = null;
+}
+
+/** A popup root: `.c3.c3pop` carries the scope, `.ph` on a narrow window turns the sheet into a bottom sheet. */
+export function openPopup({ title, icon, body, wide, onClose }) {
+  closePopup();
+  ensureC3Css();
+  const root = el('div', { class: 'c3 c3e c3pop', 'data-shell': 'popup' });
+  const stopPhone = c3Phone(root);
+  const close = () => { closePopup(); if (onClose) onClose(); };
+  const sheet = el('div', { class: 'sheet bs' + (wide ? ' wide' : ''), role: 'dialog', 'aria-label': title },
+    el('div', { class: 'grab' }),
+    el('div', { class: 'sh2' }, el('span', { class: 'chips2' }, c3ic(icon || 'bell'), el('b', null, title)),
+      el('button', { type: 'button', class: 'ib sm', 'aria-label': 'Close', title: 'Close', onclick: close }, c3ic('x'))),
+    el('div', { class: 'sb' }, el('div', { class: 'brief sbb' }, body)));
+  root.append(el('div', { class: 'scrim', onclick: close }), sheet);
+  const onKey = (e) => { if (e.key === 'Escape') { e.stopPropagation(); close(); } };
+  document.addEventListener('keydown', onKey, true);
+  document.body.appendChild(root);
+  popup = { node: root, onKey, off: null, stop: stopPhone };
+  return { root, sheet, close, body: sheet.querySelector('.sbb') };
+}
+
+/* The bell list, as the mockup draws it (console3.html bsHtml 2493 to 2499, nopen 2530): a sheet (c3-sheet.js) with one `button.nli` per entry, its tag colour,
+ * title, when and an unread dot. Opening it reads everything (the badge goes). On a desktop window there is no scrim, so a press outside acts on the page; Esc, the
+ * X and the bell again close it. A press on an entry closes the sheet and goes to its target: the card to flip, the row to open, or the sheet to show. */
+const live = new WeakMap();
+const arrived = [];                    // notifications that arrived while the page was open (demo: the 7 s banner)
+let unreadSeen = 0;                    // how many the person has already looked at
+let lastCount = 0;
+let bellSheet = null;
+let liveTimer = null; let liveDone = false;
+const notifList = (b) => [...arrived, ...notifsOf(b)];
+
+export function openBellList() {
+  if (bellSheet && bellSheet.root.isConnected) { bellSheet.close(); return bellSheet; }
+  const list = el('div');
+  const fill = (b) => {
+    const items = notifList(b);
+    list.replaceChildren(...(items.length ? items.map((x) => {
+      const st = TAG_STYLE[x.tag] || { icon: 'bolt', color: 'var(--muted-foreground)' };
+      return el('button', { type: 'button', class: 'nli', 'data-bell-item': x.key || '', onclick: () => open(x) },
+        el('span', { class: 'ki', style: 'color:' + st.color }, c3ic(x.icon || st.icon)),
+        el('span', { class: 't' }, el('b', { class: 'mono', style: 'font-size:var(--fs-1);letter-spacing:.06em;text-transform:uppercase;color:' + st.color }, x.tag), el('br'), x.headline),
+        el('span', { class: 'w' }, x.when || '', x.unread ? el('i', { class: 'u' }) : null));
+    }) : [el('div', { class: 'fold' }, c3ic('check', 'sm'), 'Nothing is waiting for you')]));
+  };
+  let off = null;
+  const open = (x) => { x.unread = false; if (bellSheet) bellSheet.close(); if (goTo) goTo('today', x.go || null); };
+  const p = openSheet({ title: 'Notifications', icon: 'bell', body: list, onClose: () => { if (off) off(); bellSheet = null; for (const x of arrived) x.unread = false; } });
+  p.root.classList.add('noscrim');
+  bellSheet = p;
+  off = onBriefing(fill);
+  /* opening reads them all: the badge shows only what arrives after this */
+  unreadSeen = lastCount; for (const rec of liveRecs()) rec.sync();
+  loadBriefing();
+  return p;
+}
+
+const liveRecs = () => [...recSet];
+const recSet = new Set();
+
+export function mountBell(host, opts) {
+  if (!host) return;
+  disposeBell(host);
+  ensureC3Css();
+  if (opts && opts.go) goTo = opts.go;
+  const badge = el('span', { class: 'nbdg', hidden: true, 'data-bell-count': '' }, '0');
+  const btn = el('button', { type: 'button', class: 'ib', title: 'Notifications', 'aria-label': 'Notifications', 'data-shell': 'bell', onclick: () => openBellList() }, c3ic('bell'), badge);
+  host.appendChild(btn);
+  const rec = { btn, count: 0, banner: null, b: null, sync: null, timer: null };
+  const dropBanner = () => { if (rec.banner) { clearTimeout(rec.timer); rec.banner.remove(); rec.banner = null; } };
+  const showBanner = (bn, auto) => {
+    const st = TAG_STYLE[bn.tag] || TAG_STYLE.Critical;
+    const wrap = el('div', { class: 'c3 c3e c3pop', 'data-shell': 'banner', 'data-key': bn.key });
+    const dismiss = (e) => { if (e) e.stopPropagation(); seenKeys.add(bn.key); dropBanner(); };
+    wrap.appendChild(el('div', { class: 'banner', role: 'status', 'data-a': 'nopen', tabindex: '0',
+      onclick: () => { dismiss(); if (bn.entry) bn.entry.unread = false; if (goTo) goTo('today', bn.go || null); },
+      onkeydown: (e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); e.currentTarget.click(); } else if (e.key === 'Escape') dismiss(e); } },
+      el('span', { style: 'color:' + st.color + ';filter:brightness(1.4)' }, c3ic(st.icon, 'sm')),
+      el('span', null, el('b', null, bn.tag), el('br'), bn.headline),
+      auto ? null : el('button', { type: 'button', class: 'bx', 'aria-label': 'Dismiss', title: 'Dismiss', onclick: dismiss }, c3ic('x', 'sm'))));
+    document.body.appendChild(wrap);
+    rec.banner = wrap;
+    if (auto) { clearTimeout(rec.timer); rec.timer = setTimeout(dropBanner, 5500); }
+    buzz(auto ? 'confirm' : 'critical');
+  };
+  rec.sync = () => {
+    const n = Math.max(0, rec.count - unreadSeen);
+    badge.textContent = String(n); badge.hidden = n === 0;
+    btn.setAttribute('aria-label', n ? 'Notifications, ' + n : 'Notifications');
+  };
+  rec.off = onBriefing((b) => {
+    rec.b = b;
+    const n = bellCount(b) + arrived.length;
+    const bump = n > rec.count; rec.count = n; lastCount = n;
+    rec.sync();
+    if (bump) { badge.classList.remove('bump'); void badge.offsetWidth; badge.classList.add('bump'); }
+    /* the demo's live arrival (console3.html liveArrive, line 2509): 7 s after load a banner drops in, the count goes up by one, it leaves by itself after 5.5 s */
+    if (b && b.live && !liveDone && !liveTimer) {
+      liveTimer = setTimeout(() => {
+        liveDone = true;
+        const x = { key: 'live', tag: b.live.tag || 'Just in', headline: b.live.headline, when: 'now', unread: true, go: b.live.go || null };
+        arrived.unshift(x);
+        for (const r of recSet) { r.count += 1; lastCount = r.count; r.sync(); }
+        showBanner({ key: 'live', tag: x.tag, headline: x.headline, go: x.go, entry: x }, true);
+      }, Math.max(0, 7000 - (typeof performance !== 'undefined' ? performance.now() : 0)));   // 7 s after the page loaded, as the mockup's setTimeout(liveArrive, 7000), not 7 s after the briefing came back
+    }
+    const bn = bannerOf(b, seenKeys);
+    if (!bn) { if (!rec.banner || rec.banner.dataset.key !== 'live') dropBanner(); return; }
+    if (rec.banner && rec.banner.dataset.key === bn.key) return;
+    dropBanner();
+    showBanner({ ...bn, go: { card: bn.key } }, false);
+  });
+  rec.dropBanner = dropBanner;
+  recSet.add(rec);
+  live.set(host, rec);
+  loadBriefing();
+}
+
+export function disposeBell(host) {
+  const rec = host && live.get(host);
+  if (!rec) return;
+  rec.off && rec.off(); rec.dropBanner(); rec.btn.remove(); closePopup(); if (bellSheet) bellSheet.close();
+  recSet.delete(rec); live.delete(host);
+}