crewforth 3.1.0-rc.4 → 3.1.0-rc.5

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

@@ -36,55 +36,115 @@ export function usageOfRecord(r) {
   };
 }
 
-export class Usage {
+const KINDS = ['input', 'output', 'cacheWrite', 'cacheRead'];
+
+/** One running sum: tokens by kind, what they cost, and which models had no price. */
+class Tally {
   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) {
+  take(u, usd) {
+    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;
+    if (usd === null) this.unpriced.add(u.model ?? 'unknown model');
+    else this.usd += usd;
+  }
+
+  /**
+   * `fresh` is what was sent and written for the first time: input, output and cache writes. `cacheRead` is the
+   * same context read back from the cache on every later response, which is why it dwarfs the rest in a long
+   * session and is kept out of the headline. `cost` is null when any of the tokens came from a model the price
+   * 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, fresh: t.input + t.output + t.cacheWrite, total: KINDS.reduce((a, k) => a + t[k], 0) },
+      responses: this.responses,
+      cost: this.unpriced.size ? null : this.usd,
+      unpriced: [...this.unpriced].sort(),
+    };
+  }
+}
+
+export class Usage {
+  constructor() {
+    this.seen = new Set();
+    this.all = new Tally();
+    this.who = new Map();      // 'session', or an agent's id -> Tally
+    this.model = new Map();    // model id -> Tally
+    this.first = null;         // the earliest and the latest record of any file added
+    this.last = null;
+  }
+
+  #tally(map, key) {
+    if (!map.has(key)) map.set(key, new Tally());
+    return map.get(key);
+  }
+
+  /**
+   * Add a transcript's records. A response already counted, from this file or another, is not counted again.
+   * @param who  'session' for the session's own transcript, or the id of the agent whose transcript this is.
+   *             A record the session's transcript marks as an agent's (`isSidechain`) is counted as an agent's.
+   */
+  add(records, who = 'session') {
     for (const r of records ?? []) {
+      const t = r?.timestamp ? Date.parse(r.timestamp) : NaN;
+      if (Number.isFinite(t)) {
+        if (this.first === null || t < this.first) this.first = t;
+        if (this.last === null || t > this.last) this.last = t;
+      }
       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;
+      if (!(u.input + u.output + u.cacheWrite5m + u.cacheWrite1h + u.cacheRead)) continue;   // a record the harness made up carries no tokens
       const usd = costOf(u);
-      if (usd === null) this.unpriced.add(u.model ?? 'unknown model');
-      else { this.usd += usd; this.priced.add(u.model); }
+      this.all.take(u, usd);
+      this.#tally(this.who, who === 'session' && r.isSidechain === true ? 'agents:inline' : who).take(u, usd);
+      this.#tally(this.model, u.model ?? 'unknown model').take(u, usd);
     }
     return this;
   }
 
+  /** One agent's own share, or null when its transcript carried no usage. */
+  of(who) { return this.who.get(who)?.result() ?? null; }
+
   /**
-   * @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.
+   * @returns the whole session's tally, and the same split two ways: `parts.session` is what the session's own
+   *          transcript spent and `parts.agents` everything its agents did; `byModel` is one tally per model.
    */
   result() {
-    const t = this.tokens;
+    const agents = new Tally();
+    for (const [who, t] of this.who) {
+      if (who === 'session') continue;
+      for (const k of KINDS) agents.tokens[k] += t.tokens[k];
+      agents.usd += t.usd;
+      agents.responses += t.responses;
+      for (const m of t.unpriced) agents.unpriced.add(m);
+    }
+    const all = this.all.result();
     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(),
+      ...all,
+      models: [...this.model.keys()].filter((m) => !all.unpriced.includes(m)).sort(),
+      parts: { session: (this.who.get('session') ?? new Tally()).result(), agents: agents.result() },
+      byModel: Object.fromEntries([...this.model].map(([m, t]) => [m, t.result()]).sort((a, b) => b[1].tokens.total - a[1].tokens.total)),
+      startedAt: this.first,
+      lastAt: this.last,
       priceSource: SOURCE,
     };
   }
 }
 
 /**
- * How long a session took, two ways. `durationMs` is from its first record to its last, pauses included.
+ * How long a session's own transcript says it took. `durationMs` is from its first record to its last, pauses
+ * included; with its agents' transcripts counted too, that span is `Usage`'s `startedAt` to `lastAt`.
  * `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.
  */
@@ -107,6 +167,16 @@ export function timesOf(records) {
   return { durationMs: first !== null && last !== null ? last - first : null, workedMs, turns };
 }
 
+/**
+ * The usage with the times beside it. The span runs to the last record of ANY of the session's files: an agent
+ * can be writing long after the session's own transcript last moved.
+ */
+export function withTimes(usage, mainRecords) {
+  const u = usage.result();
+  const t = timesOf(mainRecords);
+  return { ...u, workedMs: t.workedMs, turns: t.turns, durationMs: u.startedAt !== null && u.lastAt !== null ? u.lastAt - u.startedAt : null };
+}
+
 /** A session's usage with its agents', and how long it took. */
 export async function sessionUsage(session) {
   const usage = new Usage();
@@ -114,9 +184,10 @@ export async function sessionUsage(session) {
   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 */ }
+    const agentId = path.basename(jsonl).slice('agent-'.length, -'.jsonl'.length);
+    try { usage.add((await readAll(jsonl)).records, agentId); } catch { /* an agent that has not written yet */ }
   }
-  return { ...usage.result(), ...timesOf(records) };
+  return withTimes(usage, records);
 }
 
 // One answer per session, kept until one of its files changes. The key is what the stream's own signature

package/kit/studio/web/app.js

@@ -24,8 +24,8 @@ 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 { roleName, shownType } from './names.js';
-import { fmtDuration, fmtTokens, tiles, timeLine, rightNow, skillsOf, delegatedBy, reportOf, backgroundLines, TABS as INSPECTOR_TABS, TAB_WORD } from './inspect.js';
+import { roleName, shownType, modelFamily } from './names.js';
+import { fmtDuration, fmtTokens, tiles, timeLine, rightNow, skillsOf, delegatedBy, reportOf, backgroundLines, modelLines, TABS as INSPECTOR_TABS, TAB_WORD } from './inspect.js';
 
 const FLEET_POLL_MS = 2000;
 const SESSION_POLL_MS = 5000;
@@ -506,7 +506,25 @@ pickFrom(el.tbGroup, GROUP_WORD, () => canvas.state().group, (g) => canvas.setGr
 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));
+// Show: by state, and by the model the work ran on. The two are separate choices and both hold at once.
+let showModel = null;
+function setShowModel(family) {
+  showModel = family;
+  canvas.setModelFilter(family);
+  timeline.setModelFilter(family);
+  list.render?.();
+  tbValue.show.textContent = [SHOW[show].word, family ? `${family[0].toUpperCase()}${family.slice(1)}` : null].filter(Boolean).join(' \u00b7 ');
+}
+el.tbShow.addEventListener('click', (e) => {
+  e.stopPropagation();
+  const items = Object.entries(SHOW).map(([key, w]) => ({ label: w.word, checked: show === key, run: () => { setShow(key); setShowModel(showModel); } }));
+  const families = [...new Set((lastNodes ?? []).filter((n) => n.kind === 'agent').map((n) => modelFamily(n.model)).filter(Boolean))].sort();
+  if (families.length) {
+    items.push({ note: 'Model' }, { label: 'Every model', checked: showModel === null, run: () => setShowModel(null) },
+      ...families.map((f) => ({ label: `Only ${f[0].toUpperCase()}${f.slice(1)}`, checked: showModel === f, run: () => setShowModel(f) })));
+  }
+  openMenu(el.tbShow, items);
+});
 // The toolbar is measured, not assumed: it gives up a step at a time until what it shows fits (toolbar-fit.js).
 // Every step is tried from the first, so a toolbar that has room again takes its words back.
 function fitToolbar() {
@@ -849,6 +867,24 @@ function paintAgentOverview(body, n, detail) {
   }
   body.append(grid);
 
+  // What it ran on and what its call asked for, and what the model gate or a low-confidence report did to it.
+  const models = modelLines(n, lastNodes);
+  if (models.length) {
+    const dl = node('dl', 'imodel');
+    for (const m of models) {
+      const dd = node('dd', null, m.text);
+      if (m.note) dd.title = m.note;
+      if (m.goto) {
+        const go = node('button', 'ilink', 'show');
+        go.type = 'button';
+        go.addEventListener('click', () => goTo(m.goto));
+        dd.append(' ', go);
+      }
+      dl.append(node('dt', null, m.label), dd);
+    }
+    body.append(isection('Model', dl));
+  }
+
   const gap = n.kind === 'agent' ? detailGap(n, detail) : null;
   const read = n.kind === 'agent' && !gap ? detail : null;
 
@@ -1500,7 +1536,7 @@ function sessionRow(project, sn) {
   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);
+  const line = usageLine(spent, { live: sessionStatus(sn.sessionId, fleetData).known && sessionStatus(sn.sessionId, fleetData).key !== 'ended', now: serverNow() });
   if (line) {
     const u = node('span', 'sub srow-usage', line);
     u.title = costNote(spent);
@@ -2278,6 +2314,7 @@ function paintStageNote() {
   stageNote.button.hidden = !off;
   // The fleet can say a session ended, or came back, with no transcript changing.
   if (lastGraph && sessionIsLive() !== lastLive) showGraph();
+  else if (lastLive === true) paintSpend();
   paintTerminalWait();
 }
 
@@ -2285,13 +2322,19 @@ function paintStageNote() {
  * 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.
  */
+/** The summary box, from the session on screen. A live session's time is counted to now, so this runs on the tick. */
+function paintSpend() {
+  const usage = lastNodes?.find((n) => n.kind === 'session')?.usage ?? null;
+  canvas.setSpend(summaryRows(usage, { live: lastLive === true, now: serverNow() }));
+}
+
 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;
+  paintSpend();
   timeline.setNodes(g.nodes);
   list.setNodes(g.nodes);
   paintAttention(g.nodes);

package/kit/studio/web/canvas.js

@@ -15,7 +15,8 @@ import {
 } from './graph-plan.js';
 import { clock } from './timeline-plan.js';
 import { agentStatus } from './nav.js';
-import { roleName, shownType, hoverOf, orderTag } from './names.js';
+import { roleName, shownType, hoverOf, orderTag, modelOf, modelMix, modelFamily } from './names.js';
+import { fmtCount, fmtCost, COST_NOTE } from './usage.js';
 
 // How long an arriving wire takes to draw itself toward its new card. Short on purpose: this is a status panel,
 // and anything a viewer has to wait through is a cost they pay on every spawn.
@@ -93,6 +94,7 @@ export class Canvas {
     this.palette = { map: {} };
     this.icons = {};
     this.filter = null;          // statuses the page asked to isolate
+    this.modelFilter = null;     // a family of model the page asked to isolate
     this.waiting = new Set();    // agents parked on an approval
     this.sessionState = null;    // { word, tone } for the session card's pill
     this.focusId = null;         // show only this branch
@@ -162,7 +164,7 @@ export class Canvas {
     close.innerHTML = MARK.close;
     close.addEventListener('click', () => this.showSpend(false));
     head.append(close);
-    this.spendRows = mk('dl', 'cv-spend-rows');
+    this.spendRows = mk('div', 'cv-spend-rows');
     box.append(head, this.spendRows);
     this.spendOpen = readFlag('crewforth-studio-spend') !== 'closed';
     box.hidden = true;                       // until there is a session's usage to show
@@ -175,19 +177,61 @@ export class Canvas {
     this.spendEl.hidden = !on || !this.spendCount;
   }
 
-  /** The rows to show: [label, value, note], from usage.js `summaryRows`. An empty list hides the box. */
+  /**
+   * The rows to show, from usage.js `summaryRows`: { label, value, note, detail }. An empty list hides the box.
+   *
+   * A row with a `detail` is a control: a click opens the breakdown under it, and it stays open. Rows are kept and
+   * updated, never rebuilt — a live session's time changes every second, and a row replaced under a press would
+   * lose the click.
+   */
   setSpend(rows) {
-    const sig = JSON.stringify(rows ?? []);
+    const list = rows ?? [];
+    const sig = JSON.stringify(list);
     if (sig === this.spendSig) return;
     this.spendSig = sig;
-    this.spendCount = (rows ?? []).length;
-    this.spendRows.replaceChildren(...(rows ?? []).flatMap(([label, value, note]) => {
-      const dd = mk('dd', null, value ?? '');
-      dd.title = note ?? '';
-      const dt = mk('dt', null, label);
-      dt.title = note ?? '';
-      return [dt, dd];
-    }));
+    this.spendCount = list.length;
+    this.spendParts ??= new Map();
+    this.spendShown ??= new Set();
+    const alive = new Set();
+    for (const r of list) {
+      alive.add(r.label);
+      let p = this.spendParts.get(r.label);
+      if (!p) {
+        p = { row: mk('button', 'cv-spend-row'), label: mk('span', 'cv-spend-label'), value: mk('span', 'cv-spend-value'), detail: mk('dl', 'cv-spend-detail') };
+        p.row.type = 'button';
+        p.row.append(p.label, p.value);
+        p.row.addEventListener('click', () => {
+          if (!p.row.classList.contains('cv-spend-more')) return;
+          if (this.spendShown.has(r.label)) this.spendShown.delete(r.label); else this.spendShown.add(r.label);
+          p.detail.hidden = !this.spendShown.has(r.label);
+          p.row.setAttribute('aria-expanded', String(!p.detail.hidden));
+        });
+        this.spendParts.set(r.label, p);
+      }
+      const more = Boolean(r.detail?.length);
+      p.label.textContent = r.label;
+      p.value.textContent = r.value ?? '';
+      p.row.title = more ? `${r.note ?? ''}\nClick for the breakdown` : (r.note ?? '');
+      p.row.classList.toggle('cv-spend-more', more);
+      if (more) p.row.setAttribute('aria-expanded', String(this.spendShown.has(r.label))); else p.row.removeAttribute?.('aria-expanded');
+      p.detail.hidden = !more || !this.spendShown.has(r.label);
+      const dsig = JSON.stringify(r.detail ?? []);
+      if (p.dsig !== dsig) {
+        p.dsig = dsig;
+        p.detail.replaceChildren(...(r.detail ?? []).flatMap(([k, v]) => [mk('dt', null, k), mk('dd', null, v)]));
+      }
+    }
+    for (const [label, p] of this.spendParts) {
+      if (alive.has(label)) continue;
+      this.spendParts.delete(label);
+    }
+    // Which rows there are changes rarely (a session's first agent, its first timed turn); what they say changes
+    // every second. Only the first puts elements back into the box, and it puts the same elements back.
+    const order = list.map((r) => r.label).join('\u0000');
+    if (order !== this.spendOrder) {
+      this.spendOrder = order;
+      this.spendRows.replaceChildren(...list.flatMap((r) => { const p = this.spendParts.get(r.label); return [p.row, p.detail]; }));
+    }
     this.spendEl.hidden = !this.spendOpen || !this.spendCount;
   }
 
@@ -401,7 +445,17 @@ export class Canvas {
     this.#redraw();
   }
 
+  /** Show only the agents that ran on one family of model (`'opus'`), stepping the rest back. `null` shows all. */
+  setModelFilter(family) {
+    if ((family ?? null) === this.modelFilter) return;
+    this.modelFilter = family ?? null;
+    for (const el of this.els.values()) el.sig = null;
+    for (const el of this.cellEls.values()) el.sig = null;
+    if (this.lastPlan) this.#redraw();
+  }
+
   dimmed(n) {
+    if (n?.kind === 'agent' && this.modelFilter && modelFamily(n.model) !== this.modelFilter) return true;
     if (!this.filter || n?.kind !== 'agent') return false;
     if (this.filterKeepsWaiting && this.waiting.has(n.id)) return false;
     return !this.filter.has(n.status);
@@ -667,7 +721,11 @@ export class Canvas {
       row.append(p.tile, mk('span', 'cv-title', 'Session'), mk('span', 'cv-fill'), p.pill.el);
       p.name = mk('div', 'cv-name cv-indent');
       p.sub = mk('div', 'cv-sub cv-indent');
-      el.append(row, p.name, p.sub);
+      // What it has running in the background takes a line of its own, when there is any: on the line above it
+      // ran out of the card.
+      p.bg = mk('div', 'cv-sub cv-indent cv-bg');
+      p.bg.hidden = true;
+      el.append(row, p.name, p.sub, p.bg);
     } else if (it.kind === 'group') {
       el.classList.add('cv-group');
       p.tile = mk('span', 'cv-tile');
@@ -685,7 +743,10 @@ export class Canvas {
       } else {
         const row = mk('div', 'cv-row cv-indent');
         row.append(p.bar, p.count);
-        el.append(p.head, row);
+        // What its members add up to, and what they ran on. At compact density the card has no room for them.
+        p.totals = mk('div', 'cv-sub cv-indent cv-totals');
+        p.mix = mk('div', 'cv-sub cv-indent cv-mix');
+        el.append(p.head, row, p.totals, p.mix);
       }
       p.fold.addEventListener('click', (e) => { e.stopPropagation(); this.toggle(it.id); });
     } else if (it.compact) {
@@ -694,8 +755,9 @@ export class Canvas {
       p.order = mk('span', 'cv-order');
       p.name = mk('span', 'cv-name');
       p.task = mk('span', 'cv-task');
+      p.model = mk('span', 'cv-model');
       p.word = mk('span', 'cv-word');
-      el.append(p.dot, p.order, p.name, p.task, p.word);
+      el.append(p.dot, p.order, p.name, p.task, p.model, p.word);
     } else {
       p.tile = mk('span', 'cv-tile');
       p.name = mk('span', 'cv-name');
@@ -708,7 +770,12 @@ export class Canvas {
       p.task = mk('span', 'cv-task');
       const under = mk('div', 'cv-under cv-indent');
       under.append(p.task, p.order);
-      el.append(row, under);
+      // The third line: what it ran on, how long it took and what it spent.
+      p.model = mk('span', 'cv-model');
+      p.facts = mk('span', 'cv-facts');
+      const facts = mk('div', 'cv-under cv-indent cv-third');
+      facts.append(p.model, p.facts);
+      el.append(row, under, facts);
     }
     el.parts = p;
   }
@@ -769,12 +836,16 @@ export class Canvas {
     p.pill.dot.dataset.tone = st?.tone ?? 'none';
     p.pill.word.textContent = st?.word ?? '';
     p.name.textContent = n.gitBranch || shortPath(n.cwd) || n.sessionId || '';
+    // Cut to the card's width; hovering says it whole.
+    p.name.title = p.name.textContent;
     const bits = [`${n.turns ?? 0} ${n.turns === 1 ? 'turn' : 'turns'}`];
     if (n.tokens != null) bits.push(`${fmtTokens(n.tokens)} ctx`);
-    // What the session has running that is not an agent: commands sent to the background.
-    if (bg) bits.push(`${bg} in background`);
     p.sub.textContent = bits.join(' · ');
-    p.sub.title = bg ? n.backgroundNow.map((c) => `In the background: ${c.toolName}${c.detail ? ` · ${c.detail}` : ''}`).join('\n') : '';
+    p.sub.title = p.sub.textContent;
+    // What the session has running that is not an agent: commands sent to the background.
+    p.bg.hidden = !bg;
+    p.bg.textContent = bg ? `${bg} in background` : '';
+    p.bg.title = bg ? n.backgroundNow.map((c) => `In the background: ${c.toolName}${c.detail ? ` · ${c.detail}` : ''}`).join('\n') : '';
     el.title = 'Click to inspect this session';
     el.setAttribute('aria-label', `Session, ${st?.word ?? 'state not measured'}, ${p.name.textContent}, ${p.sub.textContent}`);
   }
@@ -787,7 +858,9 @@ export class Canvas {
     const dim = this.dimmed(n);
     // Its place in the order the session called its agents, and when: "#3 · 09:14". A chip has room for the number.
     const tag = orderTag(n, compact ? null : clock);
-    const sig = JSON.stringify([type, task, st.word, st.tone, st.state, who.source, dim, n.status, tag, after]);
+    const mdl = modelOf(n);
+    const facts = compact ? '' : factsOf(n);
+    const sig = JSON.stringify([type, task, st.word, st.tone, st.state, who.source, dim, n.status, tag, after, mdl.ran, mdl.differs, facts]);
     if (el.sig === sig) return;
     el.sig = sig;
     const p = el.parts;
@@ -804,6 +877,13 @@ export class Canvas {
     p.task.title = task;
     p.order.textContent = tag;
     p.order.hidden = !tag;
+    // The model it ran on, as a badge; marked when the call asked for another. A chip has room for the family.
+    const family = modelFamily(n.model);
+    p.model.textContent = `${compact ? (family ? family[0].toUpperCase() + family.slice(1) : mdl.ran) : mdl.ran}${mdl.differs ? ' \u2260' : ''}`;
+    p.model.hidden = !mdl.ran;
+    p.model.title = mdl.title;
+    p.model.dataset.differs = String(mdl.differs);
+    if (!compact) { p.facts.textContent = facts; p.facts.title = factsTitle(n); }
     p.order.title = tag ? `Called ${orderTag(n, clock)} by the session` : '';
     // In the Order view: what had reported before this wave was called. A reading of the order of events.
     el.title = after?.length ? `Called after ${after.join(', ')} reported.\n${INFERRED_NOTE}` : '';
@@ -824,7 +904,7 @@ export class Canvas {
     const p = el.parts;
     const counts = it.counts;
     const says = Object.entries(counts).map(([s, c]) => `${c} ${agentStatus(s).word}`).join(' · ');
-    const sig = JSON.stringify([it.label, says, it.open, it.boxed, it.type, it.status, it.first?.order ?? null]);
+    const sig = JSON.stringify([it.label, says, it.open, it.boxed, it.type, it.status, it.first?.order ?? null, it.compact, it.sum, modelMix(it.members)]);
     if (el.sig !== sig) {
       el.sig = sig;
       el.dataset.state = stateOf(it.status);
@@ -858,6 +938,7 @@ export class Canvas {
       }));
       p.bar.title = says;
       if (!it.boxed) p.count.textContent = says;
+      if (!it.boxed) this.#fillTotals(p, it);
       el.title = it.boxed ? '' : (it.open ? 'Click to fold' : `Click to show ${it.members.length} agents`);
       el.setAttribute('aria-label', `${said}, ${says}, ${it.open ? 'open' : 'folded'}`);
     }
@@ -911,13 +992,30 @@ export class Canvas {
       c.parts.name.textContent = text;
       c.parts.order.textContent = ctag;
       c.parts.order.hidden = !ctag;
-      c.title = hoverOf(n);
+      c.title = [hoverOf(n), [modelOf(n).ran, factsOf(n)].filter(Boolean).join(' \u00b7 ')].filter(Boolean).join('\n');
       c.parts.dot.dataset.tone = st.tone ?? 'none';
       c.parts.word.textContent = st.word;
       c.setAttribute('aria-label', `${shownType(n)}, ${st.word}${n.description ? `, ${n.description}` : ''} (${who.title})`);
     }
   }
 
+  /** A group as one card: the time, the tokens and the estimate its members add up to, and the models they ran on. */
+  #fillTotals(p, it) {
+    const s = it.sum ?? {};
+    p.totals.hidden = Boolean(it.compact);
+    p.mix.hidden = Boolean(it.compact);
+    if (it.compact) return;
+    p.totals.textContent = [
+      s.timed ? fmtDuration(s.durationMs) : null,
+      s.counted ? `${fmtCount(s.fresh)} new` : null,
+      s.counted ? `${fmtCount(s.cacheRead)} cache` : null,
+      s.counted ? fmtCost(s.cost) : null,
+    ].filter(Boolean).join(' \u00b7 ');
+    p.totals.title = `${it.members.length} calls. Time, new tokens, tokens read from the cache, and cost: ${COST_NOTE}`;
+    p.mix.textContent = modelMix(it.members);
+    p.mix.title = 'The models its agents ran on';
+  }
+
   /** What an inferred wire says: on hover that it is an inference, and once per reporter, in words beside it. */
   #edgeWords(path, e, c) {
     const title = e.title ?? '';
@@ -1330,6 +1428,20 @@ function readPref(key, allowed, fallback) {
   return allowed.includes(v) ? v : fallback;
 }
 
+/** An agent's third line: how long it took and what it spent. */
+function factsOf(n) {
+  return [
+    n.durationMs != null ? fmtDuration(n.durationMs) : null,
+    n.usage ? `${fmtCount(n.usage.tokens.fresh)} new` : null,
+    n.usage ? fmtCost(n.usage.cost) : null,
+  ].filter(Boolean).join(' \u00b7 ');
+}
+function factsTitle(n) {
+  if (!n.usage) return '';
+  const t = n.usage.tokens;
+  return `New tokens ${fmtCount(t.fresh)} (input ${fmtCount(t.input)}, output ${fmtCount(t.output)}, cache write ${fmtCount(t.cacheWrite)}); read from cache ${fmtCount(t.cacheRead)}\n${COST_NOTE}`;
+}
+
 function fmtTokens(t) {
   if (t == null) return '';
   if (t < 1000) return `${t}`;

package/kit/studio/web/chat.js

@@ -370,7 +370,7 @@ class Pane {
 
   paintCard({ block, node }) {
     const card = delegationCard(block, this.hooks.agentsOf?.(this.id));
-    const sig = `${card.type}|${card.task}|${card.agentId}|${card.status}`;
+    const sig = `${card.type}|${card.task}|${card.agentId}|${card.status}|${card.model.ran}|${card.model.asked}`;
     if (node.sig === sig) return;
     node.sig = sig;
     const text = el('span', 'deleg-text');
@@ -380,6 +380,13 @@ class Pane {
     const tile = card.agentId ? this.hooks.tileOf?.(this.id, card.agentId) : null;
     if (tile) parts.push(tile);
     parts.push(text);
+    // The model: what it ran on, or what the call asks for while the agent has not been seen yet.
+    const mword = card.model.ran || card.model.asked;
+    if (mword) {
+      const badge = el('span', 'deleg-model', `${mword}${card.model.differs ? ' \u2260' : ''}`);
+      badge.title = card.model.title;
+      parts.push(badge);
+    }
     // The agent's state is the graph's. Before the graph has seen the agent there is none to show.
     const st = card.agentId ? this.hooks.statusOf?.(this.id, card.agentId) : null;
     if (st?.word) {

package/kit/studio/web/convo.js

@@ -3,7 +3,7 @@
 // The same shapes come from two places: the server's reading of a transcript (history, and sessions Studio only
 // watches) and the live stream of a session started here. Both go through these functions, so a tool row reads
 // the same whichever way it arrived.
-import { roleName } from './names.js';
+import { roleName, modelOf } from './names.js';
 
 // How much of a tool's output the page keeps for a live result: the same tail the server keeps for history.
 const RESULT_TAIL = 4096;
@@ -20,6 +20,8 @@ export function toolBlock(c) {
     label: i.description ?? i.file_path ?? i.command ?? i.pattern ?? i.query ?? null,
     id: typeof c?.id === 'string' ? c.id : null,
     subagentType: typeof i.subagent_type === 'string' ? i.subagent_type : null,
+    // The model a delegation asks for; null when the call names none.
+    model: typeof i.model === 'string' ? i.model : null,
     result: null,
   };
 }
@@ -82,6 +84,8 @@ export function delegationCard(block, nodes) {
     task: block.label ?? node?.description ?? '',
     agentId: node?.id ?? null,
     status: node?.status ?? null,
+    // What it ran on once the graph knows the agent; before that, what the call asked for.
+    model: modelOf({ model: node?.model ?? null, modelAsked: block.model ?? node?.modelAsked ?? null }),
   };
 }