crewforth 3.1.0-rc.3 → 3.1.0-rc.5

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;
@@ -419,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 },
@@ -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

@@ -11,10 +11,12 @@
 //   A status is never colour alone: every dot has its word beside it.
 //   A poll that changed nothing writes nothing. Each element remembers what it last drew.
 import {
-  plan, sequence, crowdFolds, fitZoom, stateOf, ZOOM, GROUPINGS, DENSITIES,
+  plan, sequence, crowdFolds, fitZoom, stateOf, ZOOM, GROUPINGS, DENSITIES, INFERRED_NOTE,
 } from './graph-plan.js';
+import { clock } from './timeline-plan.js';
 import { agentStatus } from './nav.js';
-import { roleName, shownType, hoverOf } 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.
@@ -92,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
@@ -161,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
@@ -174,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;
   }
 
@@ -213,6 +258,10 @@ export class Canvas {
     const rows = mk('div', 'cv-legend-grid');
     rows.append(line('live', 'working now'), line('waiting', 'needs you'), line('done', 'finished'), line('failed', 'failed'));
     box.append(rows);
+    // The one wire that is not a call: in the Order view, from an agent to the wave called after it reported.
+    const inferred = line('inferred', 'after it reported (inferred, not a call)');
+    inferred.title = INFERRED_NOTE;
+    box.append(inferred);
     const marks = mk('div', 'cv-legend-grid');
     this.legendBuiltin = mk('span', 'cv-tile cv-tile-sm');
     const crew = mk('span', 'cv-tile cv-tile-sm');
@@ -396,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);
@@ -647,7 +706,7 @@ export class Canvas {
     el.classList.toggle('cv-pinned', Boolean(it.pinned));
     if (it.kind === 'session') this.#fillSession(el, it);
     else if (it.kind === 'group') this.#fillGroup(el, it, liveCells);
-    else this.#fillAgent(el, it.node, it.compact);
+    else this.#fillAgent(el, it.node, it.compact, it.after ?? null);
   }
 
   /** The skeleton of a card: the parts it will fill. */
@@ -662,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');
@@ -680,24 +743,39 @@ 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) {
       el.classList.add('cv-chip');
       p.dot = mk('span', 'dot');
+      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.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');
+      p.order = mk('span', 'cv-order');
       p.pill = this.#pill();
       const row = mk('div', 'cv-row');
       row.append(p.tile, p.name, mk('span', 'cv-fill'), p.pill.el);
-      p.task = mk('div', 'cv-task cv-indent');
-      el.append(row, p.task);
+      // The second line: the task, and at its end where the card stands in the order of the calls. The name
+      // keeps the first line to itself.
+      p.task = mk('span', 'cv-task');
+      const under = mk('div', 'cv-under cv-indent');
+      under.append(p.task, p.order);
+      // 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;
   }
@@ -758,23 +836,31 @@ 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}`);
   }
 
-  #fillAgent(el, n, compact) {
+  #fillAgent(el, n, compact, after = null) {
     const st = this.#statusOf(n);
     const who = compact ? this.#identity(n) : this.#fillTile(el.parts.tile, n);
     const type = n.kind === 'workflow' ? (n.workflowId ?? 'workflow run') : shownType(n);
     const task = n.kind === 'workflow' ? `${n.members ?? 0} agents` : (n.description ?? '');
     const dim = this.dimmed(n);
-    const sig = JSON.stringify([type, task, st.word, st.tone, st.state, who.source, dim, n.status]);
+    // 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 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;
@@ -789,6 +875,18 @@ export class Canvas {
     // Both are cut to the card's width; hovering says them whole, and the type as it is declared.
     p.name.title = n.kind === 'workflow' ? '' : (n.agentType ?? '');
     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}` : '';
     if (compact) {
       p.dot.dataset.tone = st.tone ?? 'none';
       p.word.textContent = st.word;
@@ -806,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]);
+    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);
@@ -820,7 +918,9 @@ export class Canvas {
       if (it.type === 'run') { p.tile.innerHTML = MARK.run; p.tile.title = 'Workflow run'; }
       else this.#fillTile(p.tile, it.type === 'type' ? { agentType: it.agentType } : (it.of ?? {}));
       // Several agents of one type: the number is a badge beside the role. Any other group says how many it holds.
-      p.sub.textContent = it.type === 'type' ? `× ${it.count}` : `${it.members.length} ${it.members.length === 1 ? 'agent' : 'agents'}`;
+      const size = it.type === 'type' ? `× ${it.count}` : `${it.members.length} ${it.members.length === 1 ? 'agent' : 'agents'}`;
+      // The group stands where its first member does in the order of the calls.
+      p.sub.textContent = [orderTag(it.first), size].filter(Boolean).join(' · ');
       p.sub.classList.toggle('cv-times', it.type === 'type');
       p.fold.innerHTML = it.boxed ? MARK.down : MARK.chevron;
       // Read aloud, the badge is part of the name.
@@ -838,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'}`);
     }
@@ -856,8 +957,9 @@ export class Canvas {
         c.tabIndex = 0;
         const q = {};
         if (!it.grid) { q.tile = mk('span', 'cv-tile'); c.append(q.tile); } else { q.dot = mk('span', 'dot'); c.append(q.dot); }
+        q.order = mk('span', 'cv-order');
         q.name = mk('span', 'cv-name');
-        c.append(q.name);
+        c.append(q.order, q.name);
         if (!it.grid) { c.append(mk('span', 'cv-fill')); q.dot = mk('span', 'dot'); c.append(q.dot); }
         q.word = mk('span', 'cv-word');
         c.append(q.word);
@@ -879,7 +981,8 @@ export class Canvas {
       // Inside a group of one type the type is the group's name, so a member is told apart by its task.
       const text = it.type === 'type' ? (n.description || shownType(n) || n.id) : shownType(n);
       const dim = this.dimmed(n);
-      const csig = JSON.stringify([text, st.word, st.tone, st.state, dim, this.selected === n.id]);
+      const ctag = orderTag(n, it.grid ? null : clock);
+      const csig = JSON.stringify([text, st.word, st.tone, st.state, dim, this.selected === n.id, ctag]);
       if (c.sig === csig) continue;
       c.sig = csig;
       c.dataset.state = st.state;
@@ -887,13 +990,56 @@ export class Canvas {
       c.classList.toggle('cv-dim', dim);
       c.classList.toggle('cv-selected', this.selected === n.id);
       c.parts.name.textContent = text;
-      c.title = hoverOf(n);
+      c.parts.order.textContent = ctag;
+      c.parts.order.hidden = !ctag;
+      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 ?? '';
+    if (path.said !== title) {
+      path.said = title;
+      path.querySelector?.('title')?.remove();
+      if (title) {
+        const t = document.createElementNS(SVG, 'title');
+        t.textContent = title;
+        path.append(t);
+      }
+    }
+    if (!e.label) { path.label?.remove(); path.label = null; return; }
+    if (!path.label) {
+      path.label = document.createElementNS(SVG, 'text');
+      path.label.setAttribute('class', 'cv-edge-label');
+      this.edgeG.append(path.label);
+    }
+    path.label.textContent = e.label;
+    // Just off the reporter's edge, above the wire, where it does not sit on a card.
+    path.label.setAttribute('x', String(e.from.x + 8));
+    path.label.setAttribute('y', String(e.from.y - 6));
+  }
+
   // Wires are kept and updated, never rebuilt.
   //
   // Replacing the whole layer each pass was the reason motion could not live here: a CSS animation restarts when
@@ -932,9 +1078,13 @@ export class Canvas {
 
       const target = this.nodes.get(e.target);
       const waiting = target && this.waiting.has(target.id);
-      const state = waiting ? 'waiting' : e.state;
+      // A wire that is a reading of the order of events says nothing about what its target is doing now.
+      const inferred = e.kind === 'inferred';
+      const state = inferred ? 'inferred' : (waiting ? 'waiting' : e.state);
       path.dataset.status = e.status;
       path.dataset.state = state;
+      path.dataset.kind = inferred ? 'inferred' : 'call';
+      this.#edgeWords(path, e, c);
       path.classList.toggle('cv-dim', Boolean(target) && this.dimmed(target));
       path.classList.toggle('cv-path', onPath.has(e.target));
 
@@ -950,6 +1100,7 @@ export class Canvas {
 
     for (const [key, path] of this.edgeEls) {
       if (alive.has(key)) continue;
+      path.label?.remove();
       path.remove();
       this.edgeEls.delete(key);
     }
@@ -1277,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 }),
   };
 }