@xhulz/nina 0.50.3 → 0.52.0

package/src/gate.mjs

@@ -628,7 +628,7 @@ function onPost(input, project, path, at) {
   const resumed = tool === 'SendMessage' ? Boolean(response.resumedAgentId) : undefined;
   // The name an agent was launched with, if any: a later SendMessage may reach it by that name alone.
   const name = tool !== 'SendMessage' && typeof input.tool_input?.name === 'string' ? input.tool_input.name.slice(0, 80) : null;
-  append(path, { k: 'dispatch', at, role, agent, via: tool, id: input.tool_use_id ?? null, ...(name ? { name } : {}), ...(resumed === undefined ? {} : { resumed }) });
+  append(path, { k: 'dispatch', at, role, agent, via: tool, id: input.tool_use_id ?? null, ...describedAs(input), ...(name ? { name } : {}), ...(resumed === undefined ? {} : { resumed }) });
   return null;
 }
 
@@ -663,6 +663,18 @@ function confirmation(r) {
   };
 }
 
+/**
+ * The few words the orchestrator gave a dispatch — the `description` the measurement store keeps as `desc` — which
+ * the office names a piece of work by. A message to an agent carries none: it adds to work already named.
+ *
+ * @param {object} input - The hook's input.
+ * @returns {{desc?: string}}
+ */
+const describedAs = (input) => {
+  const desc = input.tool_name === 'SendMessage' ? null : input.tool_input?.description;
+  return typeof desc === 'string' && desc.trim() ? { desc: desc.trim().slice(0, 200) } : {};
+};
+
 /** A dispatch is about to go out: note when, and send the round past its edge's cap to the owner to confirm. */
 function onPre(input, project, path, at) {
   // The orchestrator asking the owner, as it asks: when it was, and nothing it said. Nothing counts it; the office
@@ -681,7 +693,7 @@ function onPre(input, project, path, at) {
   // names its agent when the ledger already knows it — never a name the model wrote that nothing launched — so the
   // office can tell a message to a running agent from a resume before the `dispatch` entry is written.
   const known = to?.agent && entries.some((e) => e.k === 'dispatch' && e.agent === to.agent);
-  append(path, { k: 'pre', at, role, id: input.tool_use_id ?? null, ...(to ? { via: 'SendMessage', ...(known ? { agent: to.agent } : {}) } : {}) });
+  append(path, { k: 'pre', at, role, id: input.tool_use_id ?? null, ...describedAs(input), ...(to ? { via: 'SendMessage', ...(known ? { agent: to.agent } : {}) } : {}) });
   const over = roundsFor(entries, role, project.loops, project.forward)
     .filter((r) => excess(r) > 0)
     .sort((a, b) => excess(b) - excess(a));

package/src/office.html

@@ -14,15 +14,41 @@
   #zoom button { font: 600 14px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; min-width: 34px; height: 30px; padding: 0 9px; color: #fff8e8; background: rgba(34, 32, 43, 0.88); border: 2px solid #262331; border-radius: 4px; cursor: pointer; }
   #zoom button:hover { background: #3a3f58; }
   #zoom button[aria-pressed="true"] { color: #ffd34d; }
+  #tasks { position: fixed; top: 0; right: 0; bottom: 0; width: 300px; box-sizing: border-box; padding: 16px 16px 24px 18px; overflow-y: auto; color: #e6e8ee; background: #22202b; border-left: 2px solid #262331; font: 13px/1.35 ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; }
+  #tasks.overlay { top: 50px; width: min(300px, 88vw); border-top: 2px solid #262331; box-shadow: -6px 6px 18px rgba(0, 0, 0, 0.4); }
+  #tasks[hidden] { display: none; }
+  #tasks h2 { margin: 0; font: 600 12px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: 0.08em; text-transform: uppercase; color: #ffd34d; }
+  #tasks .sub { margin: 2px 0 16px; color: #8a8fa8; font-size: 12px; }
+  #tasks .empty { color: #8a8fa8; margin: 0; }
+  #tasks ol { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 2px solid #3a3f58; }
+  #tasks li { position: relative; margin: 0 0 16px; padding-left: 8px; }
+  #tasks li::before { content: ''; position: absolute; left: -21px; top: 3px; width: 10px; height: 10px; border-radius: 50%; background: #6b7089; border: 2px solid #22202b; }
+  #tasks li.running::before { background: #ffd34d; animation: beat 1.2s ease-in-out infinite; }
+  #tasks li.idle::before { background: #c9a227; }
+  #tasks li.done::before { background: #3ec74d; }
+  #tasks .name { font-weight: 600; color: #fff8e8; overflow-wrap: anywhere; }
+  #tasks .when { margin-top: 3px; color: #a9adbf; font: 12px ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
+  #tasks .who { margin-top: 3px; color: #c9cde0; font-size: 12px; overflow-wrap: anywhere; }
+  #tasks .now { margin-top: 2px; color: #ffd34d; font-size: 12px; }
+  #tasks .now.quiet { color: #8a8fa8; }
+  @keyframes beat { 50% { opacity: 0.35; } }
+  @media (prefers-reduced-motion: reduce) { #tasks li.running::before { animation: none; } }
 </style>
 </head>
 <body>
 <canvas id="screen"></canvas>
 <div id="zoom" role="toolbar" aria-label="zoom">
+  <button id="tasks-toggle" type="button" title="the session's tasks (t)" aria-controls="tasks">tasks</button>
   <button id="zoom-out" type="button" title="zoom out (−)" aria-label="zoom out">−</button>
   <button id="zoom-fit" type="button" title="the whole office (0)">fit</button>
   <button id="zoom-in" type="button" title="zoom in (+)" aria-label="zoom in">+</button>
 </div>
+<aside id="tasks" aria-label="the session's tasks" hidden>
+  <h2>Tasks</h2>
+  <p class="sub">this session, newest first</p>
+  <p id="task-empty" class="empty">Nothing yet: the first dispatch starts a task.</p>
+  <ol id="task-list"></ol>
+</aside>
 <script>
 'use strict';
 /*
@@ -525,6 +551,7 @@ function settleCap() {
 }
 
 function onBeat(b) {
+  if (b.type === 'work' || b.type === 'verdict') lastActivity = Math.max(lastActivity, b.at);
   const stage = b.role ? stages.get(b.role) : null;
   if (b.type === 'work') {
     if (!stage) return;
@@ -687,6 +714,9 @@ function reset() {
     place(p, p.home);
   }
   lines.length = 0;
+  tasks = [];
+  lastActivity = 0;
+  drawTasks();
   confetti = [];
   banner = null;
   capRole = null;
@@ -704,6 +734,10 @@ events.addEventListener('hello', (m) => {
   status = hello.session ? (hello.replay ? 'replay' : 'live') : 'waiting for the first dispatch';
 });
 events.addEventListener('beat', (m) => onBeat(JSON.parse(m.data)));
+events.addEventListener('timeline', (m) => {
+  tasks = JSON.parse(m.data).tasks ?? [];
+  drawTasks();
+});
 events.addEventListener('end', () => (status = 'replay finished — reload to watch it again'));
 events.onerror = () => {
   if (!status.startsWith('replay finished')) status = 'reconnecting…';
@@ -808,11 +842,114 @@ function syncButtons() {
   document.getElementById('zoom-fit').setAttribute('aria-pressed', String(level() <= (fit / dpr) * 1.001));
 }
 
+// ─── the timeline beside the room ─────────────────────────────────────────────────────────────
+/*
+ * The session's work, task by task, as the server cuts it — the way `nina runs` does: each named by the words the
+ * orchestrator gave its first dispatch, with the stages that worked on it, from when that went out to the verdict
+ * that closed it. The server sends the whole list whenever it changes, and it replaces what is here. A task still
+ * open counts up while anyone is at work on it, and stops at the last thing that happened while nobody is.
+ */
+const SIDE = 300;
+/** Narrower than this, the timeline is drawn over the room, and starts hidden. */
+const NARROW = 760;
+const TASKS_KEY = 'nina-office-tasks';
+let tasks = [];
+/** The newest dispatch or verdict: a replay's clock, and where an idle task's count stops. */
+let lastActivity = 0;
+let tasksOpen = (() => {
+  try {
+    const kept = localStorage.getItem(TASKS_KEY);
+    if (kept !== null) return kept === 'open';
+  } catch {
+    // Kept for this page only.
+  }
+  return window.innerWidth >= NARROW;
+})();
+
+/** The stages someone is at work for now. */
+const atWork = () => [...new Set([...people.values()].filter((p) => p.work && !p.reported && !p.leaving).map((p) => p.role))];
+
+const two = (n) => String(n).padStart(2, '0');
+/** A moment as the hour, with the day when it is not the day of `beside` — now, or the moment it follows. */
+function stamp(at, beside) {
+  const t = new Date(at);
+  const hm = `${two(t.getHours())}:${two(t.getMinutes())}`;
+  return t.toDateString() === new Date(beside).toDateString() ? hm : `${t.toLocaleDateString(undefined, { month: 'short', day: 'numeric' })} ${hm}`;
+}
+/** A finished length of time: 2h05m, 41m, 50s. */
+function span(ms) {
+  const s = Math.max(0, Math.round(ms / 1000));
+  if (s < 60) return `${s}s`;
+  const m = Math.round(s / 60);
+  return m >= 60 ? `${Math.floor(m / 60)}h${two(m % 60)}m` : `${m}m`;
+}
+/** A running count: 1:27:04, 27:04. */
+function counter(ms) {
+  const s = Math.max(0, Math.floor(ms / 1000));
+  const h = Math.floor(s / 3600);
+  return h > 0 ? `${h}:${two(Math.floor((s % 3600) / 60))}:${two(s % 60)}` : `${Math.floor(s / 60)}:${two(s % 60)}`;
+}
+
+function drawTasks() {
+  if (!tasksOpen) return;
+  const clock = status.startsWith('replay') ? lastActivity : Date.now();
+  const working = atWork();
+  const line = (cls, text) => {
+    const el = document.createElement('div');
+    el.className = cls;
+    el.textContent = text;
+    return el;
+  };
+  const shown = [...tasks].sort((a, b) => b.start - a.start);
+  document.getElementById('task-list').replaceChildren(
+    ...shown.map((t) => {
+      const li = document.createElement('li');
+      const running = t.end === null;
+      const idle = running && working.length === 0;
+      li.className = running ? (idle ? 'idle' : 'running') : t.how === 'closed' ? 'done' : 'ended';
+      li.append(line('name', t.name || '(no description)'));
+      if (t.who?.length > 0) li.append(line('who', t.who.map(([role, n]) => (n > 1 ? `${role} ×${n}` : role)).join(' · ')));
+      if (running) {
+        const upTo = idle ? Math.max(t.start, lastActivity) : Math.max(t.start, clock);
+        li.append(line('when', `${stamp(t.start, clock)} → now · ${counter(upTo - t.start)}`));
+        li.append(line('now', idle ? `idle since ${stamp(lastActivity, clock)}` : `at work: ${working.join(', ')}`));
+      } else {
+        li.append(line('when', `${stamp(t.start, clock)} → ${stamp(t.end, t.start)} · ${span(t.end - t.start)}`));
+        // A task that waited — overnight, on the owner — says how much of it anyone was at work.
+        if (t.busy !== null && t.busy < (t.end - t.start) * 0.8) li.append(line('now quiet', `${span(t.busy)} at work`));
+      }
+      return li;
+    }),
+  );
+  document.getElementById('task-empty').hidden = tasks.length > 0;
+}
+setInterval(drawTasks, 1000);
+
+function showTasks(open) {
+  tasksOpen = open;
+  try {
+    localStorage.setItem(TASKS_KEY, open ? 'open' : 'closed');
+  } catch {
+    // Kept for this page only.
+  }
+  resize();
+  drawTasks();
+}
+document.getElementById('tasks-toggle').addEventListener('click', () => showTasks(!tasksOpen));
+
 function resize() {
   dpr = window.devicePixelRatio || 1;
-  screen.width = Math.floor(window.innerWidth * dpr);
+  // The timeline takes its width from the room on a wide window, and is drawn over it on a narrow one.
+  const overlay = window.innerWidth < NARROW;
+  const side = tasksOpen && !overlay ? SIDE : 0;
+  const aside = document.getElementById('tasks');
+  aside.hidden = !tasksOpen;
+  aside.classList.toggle('overlay', overlay);
+  document.getElementById('zoom').style.right = `${side + 10}px`;
+  document.getElementById('tasks-toggle').setAttribute('aria-pressed', String(tasksOpen));
+  screen.width = Math.floor((window.innerWidth - side) * dpr);
   screen.height = Math.floor(window.innerHeight * dpr);
-  screen.style.width = `${window.innerWidth}px`;
+  screen.style.width = `${window.innerWidth - side}px`;
   screen.style.height = `${window.innerHeight}px`;
   band = Math.round(BAND * dpr);
   fit = Math.min(screen.width / LW, (screen.height - band) / LH);
@@ -849,6 +986,7 @@ window.addEventListener('keydown', (e) => {
   if (e.key === '+' || e.key === '=') zoomBy(1.25);
   else if (e.key === '-' || e.key === '_') zoomBy(0.8);
   else if (e.key === '0') zoomBy(0);
+  else if (e.key === 't') showTasks(!tasksOpen);
 });
 let drag = null;
 screen.addEventListener('pointerdown', (e) => {
@@ -1059,13 +1197,13 @@ function drawScreen(now) {
   const size = ui(12);
   {
     // Whether anything is going on: between dispatches the room is still, and says so.
-    const working = [...new Set([...people.values()].filter((p) => p.work && !p.reported && !p.leaving).map((p) => p.role))];
+    const working = atWork();
     const going = status === 'live' || status === 'replay' ? (working.length > 0 ? ` · at work: ${working.join(', ')}` : ' · waiting for the next dispatch') : '';
     const title = `NINA office · ${ROOM.project}${session ? ` · ${session.slice(0, 8)}` : ''} · ${status}${going}`;
     s.font = `${size}px ${MONO}`;
     s.fillStyle = '#1b1d26';
     s.fillRect(0, 0, screen.width, band);
-    const width = Math.min(s.measureText(title).width + ui(16), screen.width - ui(150));
+    const width = Math.min(s.measureText(title).width + ui(16), screen.width - ui(230));
     panel(ui(10), ui(9), width, ui(30));
     text(title, ui(18), ui(24), size, '#e6e8ee', 'left', width - ui(16));
   }

package/src/office.mjs

@@ -2,8 +2,10 @@
  * `nina pipeline --view` — the pipeline as an office seen from above, drawn in a browser page.
  *
  * Each stage of the project's composed graph has a desk, and each agent the loop gate saw launched is someone
- * sitting at one. The gate's ledger is the only thing read, and it holds metadata only, so the office shows who
- * worked, what they answered and the ids of the issues they named — never what anyone wrote:
+ * sitting at one. The gate's ledger is what is read, and it holds metadata only, so the office shows who worked,
+ * what they answered, the ids of the issues they named and the few words the orchestrator gave each dispatch —
+ * never what an agent wrote or reported. Beside the room, a timeline of the session's tasks (`officeTimeline`), cut
+ * and named as `nina runs` cuts and names them:
  *
  *   a dispatch                        someone sits down to work, the folder carried over by whoever handed it on
  *   a verdict                         a check over their head, or a cross when it sends work back
@@ -28,6 +30,8 @@ import { fileURLToPath } from 'node:url';
 import { TERMINALS, parseGraph } from './graph.mjs';
 import { readLedger, sessionLedgers } from './gate.mjs';
 import { readProfile } from './paths.mjs';
+import { projectStoreFile, readStoreFile } from './store.mjs';
+import { IN_FLIGHT, cyclesOf } from './commands/stats.mjs';
 import { isLoopBack } from './transcripts.mjs';
 import { shapeOf } from './commands/pipeline.mjs';
 
@@ -64,26 +68,38 @@ const REFUSED_AFTER_MS = 5000;
 /** How often a live office looks at the ledger. The gate appends to it as each fact happens. */
 const POLL_MS = 700;
 
+/**
+ * How long anyone was at work on a piece of work: its runs' spans joined, so runs side by side count once and a
+ * night between two of them not at all — a piece begun one evening and closed the next morning was at work two hours.
+ *
+ * @param {{at: number, end: number|null}[]} starts - Its runs.
+ * @returns {number} Milliseconds.
+ */
+export function busyFor(starts) {
+  const spans = starts.map((s) => [s.at, Math.max(s.at, s.end ?? s.at)]).sort((a, b) => a[0] - b[0]);
+  let total = 0;
+  let open = null;
+  for (const [from, to] of spans) {
+    if (open && from <= open[1]) open[1] = Math.max(open[1], to);
+    else {
+      if (open) total += open[1] - open[0];
+      open = [from, to];
+    }
+  }
+  return open ? total + open[1] - open[0] : total;
+}
+
 /** The longest a replay waits between two beats, and the shortest: hours of a session play in minutes. */
 const REPLAY_MAX_GAP_MS = 3000;
 const REPLAY_MIN_GAP_MS = 500;
 
 /**
- * A session's ledger as the office's beats, in the order they happened.
+ * Each run the ledger saw start, in order: when, at which stage, by which agent once known, whether it was a message
+ * to a running agent, when it was refused, and when its verdict ended it. The beats and the timeline read the same.
  *
- * A foreground dispatch's `dispatch` entry is written when the agent has finished, after its own verdict, so work
- * starts where its `pre` entry stands, joined to the agent by the tool_use id; until that entry is written, the
- * agent is not known yet, and the page binds the next verdict from that desk to it. The work ends — a party — on a
- * pass when nothing since the last dispatch was sent back, something since then could route to `done`, nobody is
- * still at work, and no dispatch follows within `PARTY_QUIET_MS`; at once when the pass routes only to a terminal.
- * A party that waits on the quiet is only beaten once `now` has passed it.
- *
- * @param {object[]} entries - The ledger, oldest first.
- * @param {{edges: {from: string, to: string, token: string}[]}} graph - The project's parsed graph.
- * @param {number} [now] - The time a waiting party is judged against; `Infinity` for a session that has ended.
- * @returns {object[]} Beats, each `{id, at, type, ...}`; the id is stable as the ledger grows.
+ * @param {object[]} ledger - The ledger, oldest first.
  */
-export function officeBeats(ledger, graph, now = Date.now()) {
+function readStarts(ledger) {
   const entries = ledger.filter((e) => Number.isFinite(Date.parse(e?.at)));
   const time = (e) => Date.parse(e.at);
   const dispatches = new Map();
@@ -113,11 +129,28 @@ export function officeBeats(ledger, graph, now = Date.now()) {
     const after = e.k === 'pre' && e.id && asked.has(e.id) && !dispatches.has(e.id) ? entries.slice(i + 1).find((x) => x.k === 'pre' && time(x) > at + REFUSED_AFTER_MS) : null;
     starts.push({ i, at, role: e.role, agent: launched?.agent ?? null, message, refusedAt: after ? time(after) : null });
   });
-  const endOf = (s) => {
-    const v = verdicts.find((x) => time(x) >= s.at && (s.agent ? x.agent === s.agent : x.role === s.role));
-    return v ? time(v) : null;
-  };
-  for (const s of starts) s.end = s.message ? s.at : endOf(s);
+  const verdictOf = (s) => verdicts.find((x) => time(x) >= s.at && (s.agent ? x.agent === s.agent : x.role === s.role)) ?? null;
+  for (const s of starts) s.end = s.message ? s.at : verdictOf(s) ? time(verdictOf(s)) : null;
+  return { entries, time, startsWork, launchOf, starts, verdictOf };
+}
+
+/**
+ * A session's ledger as the office's beats, in the order they happened.
+ *
+ * A foreground dispatch's `dispatch` entry is written when the agent has finished, after its own verdict, so work
+ * starts where its `pre` entry stands, joined to the agent by the tool_use id; until that entry is written, the
+ * agent is not known yet, and the page binds the next verdict from that desk to it. The work ends — a party — on a
+ * pass when nothing since the last dispatch was sent back, something since then could route to `done`, nobody is
+ * still at work, and no dispatch follows within `PARTY_QUIET_MS`; at once when the pass routes only to a terminal.
+ * A party that waits on the quiet is only beaten once `now` has passed it.
+ *
+ * @param {object[]} entries - The ledger, oldest first.
+ * @param {{edges: {from: string, to: string, token: string}[]}} graph - The project's parsed graph.
+ * @param {number} [now] - The time a waiting party is judged against; `Infinity` for a session that has ended.
+ * @returns {object[]} Beats, each `{id, at, type, ...}`; the id is stable as the ledger grows.
+ */
+export function officeBeats(ledger, graph, now = Date.now()) {
+  const { entries, time, startsWork, launchOf, starts } = readStarts(ledger);
   const busyAt = (moment) =>
     starts.some((s) => !s.message && s.at <= moment && moment - s.at < STALE_MS && !(s.refusedAt !== null && s.refusedAt <= moment) && !(s.end !== null && s.end <= moment));
 
@@ -187,6 +220,74 @@ export function officeBeats(ledger, graph, now = Date.now()) {
   return beats.sort((a, b) => a.at - b.at);
 }
 
+/**
+ * The session's tasks for the timeline beside the room, oldest first: its runs cut the way `nina runs` cuts a session
+ * (`cyclesOf`), each named by the description its first dispatch was given — the ledger's, or, for a ledger from
+ * before the gate kept one, the measurement store's (`names`) — with who worked on it, when it started and ended, and
+ * how long anyone was at work on it.
+ *
+ * It is the whole list, cut again each time, and the page replaces what it has with it: the cut moves as the ledger
+ * grows — a run still at work lets nothing through until its verdict, a dispatch is known refused only seconds later
+ * — and sent piece by piece, a task that a later fact merged away stayed on the page for good.
+ *
+ * @param {object[]} ledger - The ledger, oldest first.
+ * @param {number} [now] - The moment it is read at: a run younger than `STALE_MS` with no verdict is still at work.
+ * @param {Map<string, string>} [names] - Descriptions by dispatch id, for entries that carry none.
+ * @returns {{key: string, name: string|null, start: number, end: number|null, how: string|null, busy: number|null, who: [string, number][]}[]}
+ */
+export function officeTimeline(ledger, now = Date.now(), names = new Map()) {
+  const { entries, starts, verdictOf } = readStarts(ledger);
+  const runs = starts
+    .filter((s) => !s.message && s.refusedAt === null)
+    .map((s) => {
+      const e = entries[s.i];
+      const v = verdictOf(s);
+      return { ts: e.at, role: s.role, verdict: v ? v.verdict : now < s.at + STALE_MS ? IN_FLIGHT : null, desc: e.desc ?? names.get(e.id) ?? null, start: s, key: e.id ?? `at${s.i}` };
+    });
+  return cyclesOf(runs).map((cycle) => {
+    const first = cycle.runs[0];
+    const who = new Map();
+    for (const r of cycle.runs) who.set(r.role, (who.get(r.role) ?? 0) + 1);
+    const open = cycle.end === 'open';
+    return {
+      key: first.key,
+      name: first.desc ? String(first.desc) : null,
+      start: first.start.at,
+      end: open ? null : Math.max(...cycle.runs.map((r) => r.start.end ?? r.start.at)),
+      how: open ? null : cycle.end,
+      busy: open ? null : busyFor(cycle.runs.map((r) => r.start)),
+      who: [...who],
+    };
+  });
+}
+
+/**
+ * Descriptions by dispatch id from a project's measurement store, for a ledger written before the gate kept them:
+ * read again only when the store has changed since — a dispatch the store never names would otherwise have it read
+ * whole every few seconds for as long as the office runs.
+ *
+ * @param {string} target - The project directory.
+ * @returns {(entries: object[]) => Map<string, string>}
+ */
+export function storeNames(target) {
+  let seen = { file: null, mtime: -1, names: new Map() };
+  return (entries) => {
+    const missing = entries.some((e) => (e.k === 'pre' || e.k === 'dispatch') && e.via !== 'SendMessage' && e.id && !e.desc && !seen.names.has(e.id));
+    if (!missing) return seen.names;
+    try {
+      const file = projectStoreFile(target);
+      const mtime = file ? statSync(file).mtimeMs : -1;
+      if (file !== seen.file || mtime !== seen.mtime) {
+        const records = file ? readStoreFile(file) : [];
+        seen = { file, mtime, names: new Map(records.filter((r) => r.dispatch_id && r.desc).map((r) => [r.dispatch_id, String(r.desc)])) };
+      }
+    } catch {
+      // A store that cannot be read names nothing; the ledger's own words still do.
+    }
+    return seen.names;
+  };
+}
+
 /**
  * What the page is told about the room: the project, its stages in the order the line takes them, the stages that
  * run as several agents at once, and what to call the owner.
@@ -222,6 +323,8 @@ export async function serveOffice({ target, wanted, replay = false, port = OFFIC
   const clients = new Set();
   const timers = new Set();
 
+  const names = storeNames(target);
+
   /** The session to show, and its entries; read again only when its ledger changed. */
   let cached = { path: null, size: -1, mtime: 0, entries: [] };
   const current = () => {
@@ -248,19 +351,34 @@ export async function serveOffice({ target, wanted, replay = false, port = OFFIC
     client.since = client.restoring ? Number.NEGATIVE_INFINITY : Date.now() - SWITCH_GRACE_MS;
     client.session = state.session;
     client.sent = new Set();
+    client.timeline = null;
     send(client.res, 'hello', { session: state.session, replay });
   };
 
+  // The timeline, whole, to a client whose copy differs from it.
+  const tell = (client, tasks) => {
+    const text = JSON.stringify(tasks);
+    if (client.timeline === text) return;
+    client.timeline = text;
+    send(client.res, 'timeline', { tasks });
+  };
+
   const tick = () => {
+    // Nobody watching live: nothing to cut or send.
+    if (![...clients].some((client) => !client.replay)) return;
     const state = current();
+    const now = Date.now();
+    const beats = officeBeats(state.entries, graph, now);
+    const tasks = officeTimeline(state.entries, now, names(state.entries));
     for (const client of clients) {
       if (client.replay) continue;
       if (client.session !== state.session) greet(client, state);
-      for (const beat of officeBeats(state.entries, graph, Date.now())) {
+      for (const beat of beats) {
         if (client.sent.has(beat.id)) continue;
         client.sent.add(beat.id);
         send(client.res, 'beat', { ...beat, instant: client.restoring || beat.at < client.since });
       }
+      tell(client, tasks);
       client.restoring = false;
     }
   };
@@ -269,10 +387,14 @@ export async function serveOffice({ target, wanted, replay = false, port = OFFIC
     const state = current();
     greet(client, state);
     const beats = officeBeats(state.entries, graph, Number.POSITIVE_INFINITY);
+    // The timeline as it stood at each beat: cut from the ledger up to that moment, so a replay tells nothing early.
+    const known = names(state.entries);
+    const tasksAt = (moment) => officeTimeline(state.entries.filter((e) => Date.parse(e?.at) <= moment), moment, known);
     // What came before the first dispatch sets the room, at once: a session often opens on many of the owner's
     // messages, and played out they kept the office empty for a minute.
     let i = Math.max(0, beats.findIndex((b) => b.type === 'work'));
     for (const beat of beats.slice(0, i)) send(client.res, 'beat', { ...beat, instant: true });
+    if (i > 0) tell(client, tasksAt(beats[i - 1].at));
     const next = () => {
       if (!clients.has(client)) return;
       if (i >= beats.length) {
@@ -281,6 +403,7 @@ export async function serveOffice({ target, wanted, replay = false, port = OFFIC
       }
       const beat = beats[i];
       send(client.res, 'beat', beat);
+      tell(client, tasksAt(beat.at));
       i += 1;
       // The owner speaking moves nobody across the room: it passes quickly. An answer keeps its wait, or the question
       // it answers would not be seen.

package/src/store.mjs

@@ -92,9 +92,21 @@ function storeNamesOf(dir) {
  * @returns {object[]|null} Null when the store has nothing for it.
  */
 export function projectRecords(dir, store = snapshotsDir()) {
+  const file = projectStoreFile(dir, store);
+  return file === null ? null : readStoreFile(file);
+}
+
+/**
+ * The file a project's records are kept in, or null when the store has none for it.
+ *
+ * @param {string} dir - The project.
+ * @param {string} [store] - The store directory.
+ * @returns {string|null}
+ */
+export function projectStoreFile(dir, store = snapshotsDir()) {
   for (const name of storeNamesOf(dir)) {
     const file = join(store, `${name}.jsonl`);
-    if (existsSync(file)) return readStoreFile(file);
+    if (existsSync(file)) return file;
   }
   return null;
 }