crewforth 3.1.0-rc.2 → 3.1.0-rc.4

package/kit/studio/server/lib/pricing.js

@@ -0,0 +1,63 @@
+// API list prices, for the estimate the panel shows beside a session's tokens.
+//
+// THIS IS THE ONLY PLACE A PRICE IS WRITTEN. Everything is USD per million tokens, copied from the page named
+// in SOURCE on the day named there. A model that is not in this table has no price here: its cost is not
+// estimated from a neighbour, and the panel shows a dash.
+//
+// What the page says and this file follows:
+//   - a cache write costs 1.25x the input price for the 5-minute cache and 2x for the 1-hour cache;
+//   - a cache read costs 0.1x the input price, except where a model's row says otherwise (`cacheRead`);
+//   - Claude Haiku 5.5 has a second set of prices for a prompt of over 100,000 tokens (`over`);
+//   - fast mode has its own input and output prices (`fast`), and the cache multipliers apply on top of them;
+//   - US-only inference multiplies every category by 1.1.
+// What it does not cover: the Batch API discount, web search requests ($10 per 1,000), and prices on other
+// cloud platforms. A session billed under any of those is estimated at the standard rate.
+
+export const SOURCE = {
+  url: 'https://platform.claude.com/docs/en/about-claude/pricing',
+  read: '2026-10-08',
+};
+
+export const CACHE_WRITE_5M = 1.25;
+export const CACHE_WRITE_1H = 2;
+export const CACHE_READ = 0.1;
+export const US_ONLY = 1.1;
+
+// Keyed by the Claude API model id as a transcript records it. Only ids that were checked are here: the four
+// current ones against the models overview page, and the four others against transcripts that name them.
+export const PRICES = {
+  'claude-fable-5-1': { input: 10, output: 50, cacheRead: 0.025 },
+  'claude-opus-5-5': { input: 4, output: 20, cacheRead: 0.05, fast: { input: 8, output: 40 } },
+  'claude-sonnet-5-5': { input: 2, output: 10, cacheRead: 0.05 },
+  'claude-haiku-5-5': { input: 0.10, output: 0.50, over: { promptTokens: 100_000, input: 0.50, output: 2.50 } },
+  'claude-opus-5': { input: 5, output: 25, fast: { input: 10, output: 50 } },
+  'claude-opus-4-8': { input: 5, output: 25, fast: { input: 10, output: 50 } },
+  'claude-sonnet-5': { input: 2, output: 10 },
+  'claude-haiku-4-5': { input: 1, output: 5 },
+};
+
+/** The row for a model id, or null. A dated snapshot (`<id>-20260101`) is the same model; nothing else matches. */
+export function priceOf(model) {
+  if (typeof model !== 'string') return null;
+  if (Object.hasOwn(PRICES, model)) return PRICES[model];
+  const m = model.match(/^(.*)-\d{8}$/);
+  return m && Object.hasOwn(PRICES, m[1]) ? PRICES[m[1]] : null;
+}
+
+/**
+ * What one API response cost at list price, in USD. Null when the model has no row.
+ * @param u { model, input, output, cacheWrite5m, cacheWrite1h, cacheRead, fast, usOnly } — token counts
+ */
+export function costOf(u) {
+  const row = priceOf(u.model);
+  if (!row) return null;
+  const prompt = u.input + u.cacheWrite5m + u.cacheWrite1h + u.cacheRead;
+  const tier = (u.fast && row.fast) || (row.over && prompt > row.over.promptTokens ? row.over : row);
+  const read = row.cacheRead ?? CACHE_READ;
+  const usd = (u.input * tier.input
+    + u.cacheWrite5m * tier.input * CACHE_WRITE_5M
+    + u.cacheWrite1h * tier.input * CACHE_WRITE_1H
+    + u.cacheRead * tier.input * read
+    + u.output * tier.output) / 1_000_000;
+  return u.usOnly ? usd * US_ONLY : usd;
+}

package/kit/studio/server/lib/usage.js

@@ -0,0 +1,144 @@
+// What a session spent: tokens read from its transcripts, and what they would cost at API list price.
+//
+// Claude Code writes one record per content block, and every record of one API response repeats that response's
+// usage. Measured on one machine before this was written: 23,867 assistant records carried usage, for 11,245
+// responses, and every repeat carried the same numbers. So a response is counted once, by its message id — and
+// once across the session's files too, which is what keeps an agent's tokens from being added twice.
+
+import fsp from 'node:fs/promises';
+import path from 'node:path';
+
+import { readAll } from './transcript.js';
+import { agentMetaFiles } from './projects.js';
+import { costOf, SOURCE } from './pricing.js';
+
+const num = (v) => (typeof v === 'number' && Number.isFinite(v) && v > 0 ? v : 0);
+
+/** One response's usage, in the shape pricing.js prices. Null when the record carries none. */
+export function usageOfRecord(r) {
+  const m = r?.type === 'assistant' ? r.message : null;
+  const u = m?.usage;
+  if (!u || typeof u !== 'object') return null;
+  const split = u.cache_creation && typeof u.cache_creation === 'object' ? u.cache_creation : null;
+  const w1h = num(split?.ephemeral_1h_input_tokens);
+  // With no split recorded, a cache write is the 5-minute kind: that is the default, and the cheaper of the two.
+  const w5m = split ? num(split.ephemeral_5m_input_tokens) : num(u.cache_creation_input_tokens);
+  return {
+    id: typeof m.id === 'string' ? m.id : null,
+    model: typeof m.model === 'string' ? m.model : null,
+    input: num(u.input_tokens),
+    output: num(u.output_tokens),
+    cacheWrite5m: w5m,
+    cacheWrite1h: w1h,
+    cacheRead: num(u.cache_read_input_tokens),
+    fast: u.speed === 'fast',
+    usOnly: u.inference_geo === 'us',
+  };
+}
+
+export class Usage {
+  constructor() {
+    this.seen = new Set();
+    this.tokens = { input: 0, output: 0, cacheWrite: 0, cacheRead: 0 };
+    this.usd = 0;
+    this.responses = 0;
+    this.priced = new Set();
+    this.unpriced = new Set();
+  }
+
+  /** Add a transcript's records. A response already counted, from this file or another, is not counted again. */
+  add(records) {
+    for (const r of records ?? []) {
+      const u = usageOfRecord(r);
+      if (!u) continue;
+      if (u.id) { if (this.seen.has(u.id)) continue; this.seen.add(u.id); }
+      const total = u.input + u.output + u.cacheWrite5m + u.cacheWrite1h + u.cacheRead;
+      if (!total) continue;                    // a record the harness made up for itself carries no tokens
+      this.responses += 1;
+      this.tokens.input += u.input;
+      this.tokens.output += u.output;
+      this.tokens.cacheWrite += u.cacheWrite5m + u.cacheWrite1h;
+      this.tokens.cacheRead += u.cacheRead;
+      const usd = costOf(u);
+      if (usd === null) this.unpriced.add(u.model ?? 'unknown model');
+      else { this.usd += usd; this.priced.add(u.model); }
+    }
+    return this;
+  }
+
+  /**
+   * @returns tokens by kind and in total; `cost` in USD at list price, or null when any of the tokens came from
+   *          a model the table has no row for — a sum that leaves some of them out would read as the whole.
+   */
+  result() {
+    const t = this.tokens;
+    return {
+      tokens: { ...t, total: t.input + t.output + t.cacheWrite + t.cacheRead },
+      responses: this.responses,
+      cost: this.unpriced.size ? null : this.usd,
+      models: [...this.priced].sort(),
+      unpriced: [...this.unpriced].sort(),
+      priceSource: SOURCE,
+    };
+  }
+}
+
+/**
+ * How long a session took, two ways. `durationMs` is from its first record to its last, pauses included.
+ * `workedMs` is the turns Claude Code timed itself (`system` / `turn_duration` records), added up; zero when it
+ * recorded none, and a turn that is still running is not in it.
+ */
+export function timesOf(records) {
+  let first = null;
+  let last = null;
+  let workedMs = 0;
+  let turns = 0;
+  for (const r of records ?? []) {
+    const t = r?.timestamp ? Date.parse(r.timestamp) : NaN;
+    if (Number.isFinite(t)) {
+      if (first === null || t < first) first = t;
+      if (last === null || t > last) last = t;
+    }
+    if (r?.type === 'system' && r.subtype === 'turn_duration' && typeof r.durationMs === 'number' && r.durationMs > 0) {
+      workedMs += r.durationMs;
+      turns += 1;
+    }
+  }
+  return { durationMs: first !== null && last !== null ? last - first : null, workedMs, turns };
+}
+
+/** A session's usage with its agents', and how long it took. */
+export async function sessionUsage(session) {
+  const usage = new Usage();
+  const { records } = await readAll(session.file);
+  usage.add(records);
+  for (const meta of await agentMetaFiles(session.subagentsDir)) {
+    const jsonl = meta.replace(/\.meta\.json$/, '.jsonl');
+    try { usage.add((await readAll(jsonl)).records); } catch { /* an agent that has not written yet */ }
+  }
+  return { ...usage.result(), ...timesOf(records) };
+}
+
+// One answer per session, kept until one of its files changes. The key is what the stream's own signature
+// watches: the transcript's size, and every agent file's.
+const cache = new Map();   // sessionId -> { sig, value }
+
+async function sigOf(session) {
+  const parts = [];
+  try { parts.push(String((await fsp.stat(session.file)).size)); } catch { parts.push('0'); }
+  for (const meta of await agentMetaFiles(session.subagentsDir)) {
+    const jsonl = meta.replace(/\.meta\.json$/, '.jsonl');
+    try { parts.push(`${path.basename(jsonl)}:${(await fsp.stat(jsonl)).size}`); } catch { /* not written yet */ }
+  }
+  return parts.join('|');
+}
+
+export async function cachedUsage(session) {
+  const sig = await sigOf(session);
+  const hit = cache.get(session.sessionId);
+  if (hit && hit.sig === sig) return hit.value;
+  const value = await sessionUsage(session);
+  if (cache.size > 500) cache.clear();
+  cache.set(session.sessionId, { sig, value });
+  return value;
+}

package/kit/studio/web/app.js

@@ -15,15 +15,17 @@ import {
   liveSessions, machines, seenAgo, isFirstRun,
 } from './nav.js';
 import { liveness, offlineNote } from './liveness.js';
-import { attention, AUTO } from './graph-plan.js';
-import { ServerClock, queue, settled, OUTCOME_WORD } from './approvals.js';
+import { attention, settle, AUTO } from './graph-plan.js';
+import { summaryRows, usageLine, costNote } from './usage.js';
+import { ServerClock, queue, settled, terminalWait, OUTCOME_WORD } from './approvals.js';
 import { Dock } from './dock.js';
 import { NewSession } from './newsession.js';
 import { Timeline } from './timeline.js';
 import { List } from './list.js';
 import { defaultView, narrowWarning } from './list-plan.js';
 import { fitLevel, runsOver } from './toolbar-fit.js';
-import { fmtDuration, fmtTokens, tiles, timeLine, rightNow, skillsOf, delegatedBy, reportOf, TABS as INSPECTOR_TABS, TAB_WORD } from './inspect.js';
+import { roleName, shownType } from './names.js';
+import { fmtDuration, fmtTokens, tiles, timeLine, rightNow, skillsOf, delegatedBy, reportOf, backgroundLines, TABS as INSPECTOR_TABS, TAB_WORD } from './inspect.js';
 
 const FLEET_POLL_MS = 2000;
 const SESSION_POLL_MS = 5000;
@@ -54,6 +56,7 @@ const el = {
   toast: document.getElementById('toast'),
   attention: document.getElementById('attention'),
   dock: document.getElementById('dock'),
+  terminalWait: document.getElementById('terminal-wait'),
   newPanel: document.getElementById('new-panel'),
   tbGroup: document.getElementById('tb-group'),
   tbDensity: document.getElementById('tb-density'),
@@ -132,6 +135,8 @@ systemLight.addEventListener('change', relabelTheme);
 const PANEL = {
   side: { min: 170, max: 620, def: 272, wide: 460, varName: '--side-w', key: 'crewforth-studio-side-w' },
   chat: { min: 280, max: 900, def: 480, wide: 720, varName: '--chat-w', key: 'crewforth-studio-chat-w' },
+  // The inspector's default is the stylesheet's own --inspector-w.
+  inspector: { min: 280, max: 720, def: 344, varName: '--inspector-w', key: 'crewforth-studio-inspector-w' },
 };
 
 function setPanel(which, px, persist = true) {
@@ -142,7 +147,7 @@ function setPanel(which, px, persist = true) {
   return w;
 }
 
-for (const which of ['side', 'chat']) {
+for (const which of Object.keys(PANEL)) {
   setPanel(which, Number(store.get(PANEL[which].key)) || PANEL[which].def, false);
 }
 
@@ -209,11 +214,20 @@ function dragPanel(handle, which, edge) {
 dragPanel(el.resizer, 'side', 'left');
 dragPanel(el.chatSplit, 'chat', 'right');
 
+// The inspector is filled again whenever its agent changes; its handle is made once and put back each time, so a
+// drag is not cut short by a poll.
+const inspectorSplit = document.createElement('div');
+inspectorSplit.className = 'resizer inspector-split';
+inspectorSplit.setAttribute('role', 'separator');
+inspectorSplit.setAttribute('aria-orientation', 'vertical');
+inspectorSplit.setAttribute('aria-label', 'Resize inspector');
+inspectorSplit.tabIndex = 0;
+dragPanel(inspectorSplit, 'inspector', 'right');
+
 /* ------------------------------------------------------------ full screen
    The browser's own, so it hides the browser too — a panel meant to be watched
-   while work runs should be able to take the whole display. The stylesheet
-   takes the navigator, the inspector and the conversation off with it, so what
-   is left is the canvas; Esc brings everything back. */
+   while work runs should be able to take the whole display. The panels keep
+   their state: what was open stays open, and `[` and `]` still fold the navigator. */
 
 async function toggleFullscreen() {
   try {
@@ -405,7 +419,7 @@ el.newSession.addEventListener('click', () => {
 
 /* The toolbar says what the canvas is doing. It is painted from the canvas's own
    state, so a choice restored from storage shows without being re-made. */
-const GROUP_WORD = { run: 'Workflow run', type: 'Agent type', parent: 'Parent', none: 'None' };
+const GROUP_WORD = { run: 'Workflow run', type: 'Agent type', parent: 'Parent', order: 'Order', none: 'None' };
 const DENSITY_WORD = { auto: 'Auto', comfortable: 'Comfortable', compact: 'Compact' };
 const SHOW = {
   all: { word: 'All', statuses: null },
@@ -486,6 +500,11 @@ const pickFrom = (button, words, current, set) => button.addEventListener('click
   })));
 });
 pickFrom(el.tbGroup, GROUP_WORD, () => canvas.state().group, (g) => canvas.setGroup(g));
+
+// In a window with room an agent group opens into the next column; in the band where the navigator is a rail
+// there is no room for another column, and it opens downward as it always did.
+canvas.setAside(!railBand.matches);
+railBand.addEventListener('change', () => canvas.setAside(!railBand.matches));
 pickFrom(el.tbDensity, DENSITY_WORD, () => canvas.state().density, (d) => canvas.setDensity(d));
 pickFrom(el.tbShow, SHOW, () => show, (key) => setShow(key));
 // The toolbar is measured, not assumed: it gives up a step at a time until what it shows fits (toolbar-fit.js).
@@ -531,6 +550,10 @@ el.tbOptions.addEventListener('click', (e) => {
   if (view === 'graph' && st.groups > 0) {
     items.push({ note: 'Groups' }, { label: 'Expand all', run: () => canvas.expandAll() }, { label: 'Fold all', run: () => canvas.foldAll() });
   }
+  if (view === 'graph') {
+    const open = canvas.spendOpen;
+    items.push({ note: 'Session summary' }, { label: open ? 'Hide time, tokens and cost' : 'Show time, tokens and cost', run: () => canvas.showSpend(!open) });
+  }
   openMenu(el.tbOptions, items);
 });
 el.tbExpand.addEventListener('click', () => canvas.expandAll());
@@ -760,14 +783,18 @@ function paintInspector() {
   back.append(icon(ICON.back));
   back.addEventListener('click', () => { canvas.clearSelection(); showInspector(null); });
   close.classList.add('ihead-close');
-  const name = isSession ? 'Session' : n.kind === 'workflow' ? (n.workflowId ?? 'Workflow run') : (n.agentType ?? 'unknown agent');
-  head.append(back, canvas.tileFor(n), node('h3', 'iname', name), close);
+  const name = isSession ? 'Session' : n.kind === 'workflow' ? (n.workflowId ?? 'Workflow run') : shownType(n);
+  const iname = node('h3', 'iname', name);
+  if (n.kind === 'agent') iname.title = n.agentType ?? '';
+  head.append(back, canvas.tileFor(n), iname, close);
 
   const meta = node('div', 'imeta');
   const pill = node('span', 'pill');
   // A state nobody read is said, not left as a blank pill.
   pill.append(dot(st.tone), node('span', null, st.word ?? 'State not measured'));
   meta.append(pill, node('span', 'sub', timeLine(n, serverNow())));
+  // The role is the name; the type as it is declared is said here, where there is room for it.
+  if (n.kind === 'agent' && n.agentType) meta.append(node('code', 'ireal', n.agentType));
 
   const task = node('div', 'itask', isSession
     ? (sessionLabel(current) ?? n.sessionId ?? '')
@@ -807,7 +834,7 @@ function paintInspector() {
   copy.addEventListener('click', () => copyText(file, 'Copied'));
   foot.append(open, copy);
 
-  el.inspector.replaceChildren(head, meta, task, tabs, body, foot);
+  el.inspector.replaceChildren(inspectorSplit, head, meta, task, tabs, body, foot);
 }
 
 function paintAgentOverview(body, n, detail) {
@@ -886,6 +913,21 @@ function paintSessionOverview(body, n) {
   }
   body.append(metaRows(n));
 
+  // Commands the session sent to the background and that are still going. They are not agents and have no card.
+  const running = backgroundLines(n, serverNow());
+  if (running.length) {
+    const rows = running.map((c) => {
+      const row = node('div', 'ibg-row');
+      const what = node('code', 'ibg-what', c.what);
+      what.title = c.what;
+      row.append(what);
+      if (c.age) row.append(node('span', 'sub', c.age));
+      return row;
+    });
+    const box = isection('In the background', ...rows);
+    body.append(box);
+  }
+
   const b = kitData?.board;
   let board;
   if (!kitData) board = node('div', 'ihint', 'Reading Crewforth…');
@@ -1056,7 +1098,7 @@ function paintGates(body) {
     for (const a of answers.slice(-12)) {
       const row = node('div', 'gate-row');
       row.append(node('span', 'gate-when', new Date(a.at - clock.offset).toLocaleTimeString()));
-      row.append(node('span', 'gate-name', `${a.toolName}${a.agentType ? ` · ${a.agentType}` : ''}`));
+      row.append(node('span', 'gate-name', `${a.toolName}${a.agentType ? ` · ${roleName(a.agentType)}` : ''}`));
       const v = node('span', 'gate-verdict', OUTCOME_WORD[a.outcome]);
       v.dataset.verdict = a.outcome.startsWith('allowed') ? 'ALLOW' : a.outcome === 'answered-elsewhere' ? 'ASK' : 'BLOCK';
       row.append(v);
@@ -1456,6 +1498,14 @@ function sessionRow(project, sn) {
 
   const subText = sessionSub(sn, status) + (ownedIds.has(sn.sessionId) ? ' · started here' : '');
   if (subText) row.append(marked(subText, 'sub srow-sub'));
+  // What it spent, once the server has read it: time · tokens · ~cost. Asked for a few rows at a time.
+  const spent = usageFor(sn);
+  const line = usageLine(spent);
+  if (line) {
+    const u = node('span', 'sub srow-usage', line);
+    u.title = costNote(spent);
+    row.append(u);
+  }
 
   row.title = `${sn.sessionId}${sn.title ? `\n${sn.title}` : ''}`;
   const open = () => selectSession(sn.sessionId);
@@ -1467,6 +1517,36 @@ function sessionRow(project, sn) {
   return row;
 }
 
+/* What each session spent, for its row. The server reads a transcript once and keeps the answer until it grows, so
+   this asks only for rows that are on screen and whose transcript has changed since it last asked. */
+const usageRows = new Map();    // sessionId -> { at: modifiedAt it was read for, value }
+const usageWanted = new Set();
+let usageBusy = false;
+function usageFor(sn) {
+  const hit = usageRows.get(sn.sessionId);
+  if (!hit || hit.at !== sn.modifiedAt) { usageWanted.add(sn.sessionId); queueMicrotask(pullUsage); }
+  return hit?.value ?? null;
+}
+async function pullUsage() {
+  if (usageBusy || !usageWanted.size) return;
+  usageBusy = true;
+  const ids = [...usageWanted].slice(0, 12);
+  for (const id of ids) usageWanted.delete(id);
+  try {
+    const got = await getJson(`/api/usage?ids=${ids.map(encodeURIComponent).join(',')}`);
+    for (const id of ids) {
+      const sn = findSessionRow(id)?.session;
+      // A session the server did not answer for (another machine's) is remembered as not read, and not asked again
+      // until its row changes.
+      usageRows.set(id, { at: sn?.modifiedAt ?? null, value: got.usage?.[id] ?? null });
+    }
+    paintProjects();
+  } catch { /* the Live indicator says so; the rows keep what they had */ } finally {
+    usageBusy = false;
+    if (usageWanted.size) queueMicrotask(pullUsage);
+  }
+}
+
 function paintProjects() {
   const data = projectsData;
   if (!data || renaming && document.activeElement?.classList?.contains('srow-rename')) return;
@@ -1844,6 +1924,7 @@ function paintAttention(nodes) {
     const b = node('button', 'att');
     b.type = 'button';
     b.append(dot(a.tone), node('span', 'att-name', a.name), node('span', 'att-says', a.says));
+    b.title = a.real ?? '';
     b.addEventListener('click', () => { attentionAt = attentionIds.indexOf(a.id); goTo(a.id); });
     return b;
   });
@@ -1900,36 +1981,13 @@ function selectSession(sessionId) {
   detailCache.clear();
 
   if (source) source.close();
+  lastGraph = null;
   source = new EventSource(api(`/api/stream?session=${encodeURIComponent(sessionId)}`));
 
   source.addEventListener('graph', (e) => {
     heardNow();
-    const g = JSON.parse(e.data);
-    canvas.render(g);
-    lastNodes = g.nodes;
-    timeline.setNodes(g.nodes);
-    list.setNodes(g.nodes);
-    paintAttention(g.nodes);
-    // The conversation's delegation cards and its context figure are the graph's.
-    chat.refresh(sessionId, { contextTokens: g.nodes.find((n) => n.kind === 'session')?.tokens ?? null });
-    // The inspector holds a node object from an earlier frame; refresh it so
-    // status, tokens and tool counts keep moving while it is open.
-    if (inspectorNode) {
-      const fresh = g.nodes.find((n) => n.id === inspectorNode.id);
-      if (fresh) {
-        const changed = fresh.status !== inspectorNode.status;
-        inspectorNode = fresh;
-        paintInspector();
-        if (changed && fresh.kind === 'agent') loadDetail(fresh.id, fresh.status);
-      }
-    }
-    // Every status is named, so the chips add up to the total. A summary that
-    // reports "250 agents · 7 done" and stops invites the reader to assume the
-    // other 243 failed. A count of records that could not be read stays beside
-    // them: it is not a status, and it is not nothing.
-    const s = g.stats ?? {};
-    paintSummary(s, s.malformed ? [`${s.malformed} malformed`] : []);
-    el.foot.textContent = '';
+    lastGraph = JSON.parse(e.data);
+    showGraph();
   });
 
   source.addEventListener('idle', heardNow);
@@ -2053,6 +2111,8 @@ const outcomes = new Map();     // sessionId -> what became of its requests, as
 let waitingNow = [];
 let waitingSig = '';
 let lastNodes = null;
+let lastGraph = null;   // what the stream last sent, before it is settled against the fleet
+let lastLive = null;    // whether the session was live when that was last drawn
 
 function sessionLabel(id) {
   const known = findSessionRow(id);
@@ -2216,6 +2276,67 @@ function paintStageNote() {
   stageNote.retry.textContent = off ? off.retry : '';
   stageNote.retry.hidden = !off;
   stageNote.button.hidden = !off;
+  // The fleet can say a session ended, or came back, with no transcript changing.
+  if (lastGraph && sessionIsLive() !== lastLive) showGraph();
+  paintTerminalWait();
+}
+
+/**
+ * Draw the graph the stream last sent. What the server read from files is settled against what the machine says
+ * of the session first, so this is called again when that changes with no file changing.
+ */
+function showGraph() {
+  if (!lastGraph) return;
+  lastLive = sessionIsLive();
+  const g = settle(lastGraph, lastLive);
+  canvas.render(g);
+  canvas.setSpend(summaryRows(g.nodes.find((n) => n.kind === 'session')?.usage ?? null));
+  lastNodes = g.nodes;
+  timeline.setNodes(g.nodes);
+  list.setNodes(g.nodes);
+  paintAttention(g.nodes);
+  // The conversation's delegation cards and its context figure are the graph's.
+  chat.refresh(current, { contextTokens: g.nodes.find((n) => n.kind === 'session')?.tokens ?? null });
+  // The inspector holds a node object from an earlier frame; refresh it so
+  // status, tokens and tool counts keep moving while it is open.
+  if (inspectorNode) {
+    const fresh = g.nodes.find((n) => n.id === inspectorNode.id);
+    if (fresh) {
+      const changed = fresh.status !== inspectorNode.status;
+      inspectorNode = fresh;
+      paintInspector();
+      if (changed && fresh.kind === 'agent') loadDetail(fresh.id, fresh.status);
+    }
+  }
+  // Every status is named, so the chips add up to the total. A summary that
+  // reports "250 agents · 7 done" and stops invites the reader to assume the
+  // other 243 failed. A count of records that could not be read stays beside
+  // them: it is not a status, and it is not nothing.
+  const s = g.stats ?? {};
+  paintSummary(s, s.malformed ? [`${s.malformed} malformed`] : []);
+  el.foot.textContent = '';
+}
+
+/** A session waiting on its own terminal is said under the view, with what it asks about. */
+let terminalWaitSig = '';
+function paintTerminalWait() {
+  const session = lastNodes?.find((n) => n.kind === 'session') ?? null;
+  const w = current
+    ? terminalWait(sessionStatus(current, fleetData), session, ownedIds.has(current) || owned.has(current))
+    : null;
+  const sig = w ? `${w.text}|${w.what ?? ''}` : '';
+  if (sig === terminalWaitSig) return;
+  terminalWaitSig = sig;
+  el.terminalWait.hidden = !w;
+  if (w) {
+    const what = node('span', 'terminal-wait-what', w.what ?? '');
+    what.title = w.what ?? '';
+    el.terminalWait.replaceChildren(
+      node('span', 'terminal-wait-word', `${w.text}${w.what ? ':' : ''}`), what,
+      node('span', 'sub terminal-wait-note', 'Studio answers only for sessions started here'),
+    );
+  }
+  canvas.fitIfUntouched();
 }
 
 function retryNow() {

package/kit/studio/web/approvals.js

@@ -7,6 +7,7 @@
 // Every number here is the server's. How long the hook waits (`gateWaitSeconds`), when a request was asked
 // (`askedAt`) and what time it is now (`now`) all come from the machine the hook runs on, so a viewer whose clock
 // differs — a browser on the far end of a tunnel — still counts down to the moment the hook will really give up.
+import { roleName } from './names.js';
 
 /** The server's clock, as seen from this page: the difference is measured each time the server says what time it is. */
 export class ServerClock {
@@ -70,8 +71,26 @@ export function remaining(item, serverNowMs) {
 }
 
 /** Who asked, in the words the dock uses. A call from the session itself has no agent, and says so. */
+/**
+ * A session started in a terminal that is waiting for its user there. Studio cannot answer for it: the question
+ * is Claude Code's own prompt, in that terminal, and no hook of the panel's is in that session.
+ *
+ * @param status   the session's state as the machine reports it (nav.js `sessionStatus`)
+ * @param session  the graph's session node, whose `openCall` is the newest call with no result
+ * @param ownedHere true when the panel started this session: its requests are in the dock instead
+ * @returns null, or { text, what } — `what` is the tool and its command when the transcript has them, and
+ *          otherwise what the CLI itself says it waits for; nothing is made up when neither is there.
+ */
+export function terminalWait(status, session, ownedHere) {
+  if (ownedHere || status?.key !== 'waiting') return null;
+  const call = session?.openCall ?? null;
+  const who = call?.agentType ? `${roleName(call.agentType)} · ` : '';
+  const what = call ? `${who}${call.toolName}${call.detail ? ` · ${call.detail}` : ''}` : (status.waitingFor ?? null);
+  return { text: 'Waiting for an answer in the terminal', what };
+}
+
 export function asker(item) {
-  return item.agentType ?? 'Session';
+  return item.agentType ? roleName(item.agentType) : 'Session';
 }
 
 export const VERDICTS = {