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

package/kit/studio/web/graph-plan.js

@@ -22,9 +22,12 @@ import { typeOf, roleName, shownType } from './names.js';
 export const SIZE = {
   padX: 24, padY: 16,          // the canvas's own margin
   colGap: 56,                  // between one depth and the next
+  waveGap: 148,                // between one wave and the next: room for the words on an inferred wire
   rowGap: 12,                  // between siblings
-  session: { w: 200, h: 84 },
-  card: { w: 248, h: 64 },     // an agent, and a folded group
+  session: { w: 200, h: 84, line: 20 },   // `line`: the extra line a session with background commands has
+  card: { w: 248, h: 84 },     // an agent: its name, its task, and a line of facts (model, time, tokens)
+  stack: { w: 248, h: 116, tight: 64 },   // a group drawn as one card: its name, its bar, its totals, its models;
+                                          // `tight` at compact density, where the two lines of totals go
   chip: { w: 248, h: 36 },     // an agent at compact density
   group: {                     // an open group: a container holding its members
     padX: 8, top: 10, head: 20, gap: 6, bar: 4, bottom: 8,
@@ -48,7 +51,7 @@ export const AUTO = {
   stackAt: 3,
 };
 
-export const GROUPINGS = ['run', 'type', 'parent', 'none'];
+export const GROUPINGS = ['run', 'type', 'parent', 'order', 'none'];
 export const DENSITIES = ['auto', 'comfortable', 'compact'];
 
 // The handful of things a status means to a reader. `killed` and `stopped` come off the transcript verbatim and
@@ -152,7 +155,10 @@ function itemsOf(nodes, { group, density, seq, stack, aside }) {
   const session = nodes.find((n) => n.kind === 'session');
   if (session) items.push({ id: session.id, kind: 'session', node: session, parent: null, depth: 0 });
 
-  const stackAt = group === 'type' ? 2 : (density === 'auto' && group !== 'none' && stack ? AUTO.stackAt : Infinity);
+  // Agents of one type under one parent are one card under `type` and under `run`, from two and wherever they
+  // stand in the order: three Privacy agents called fifth, eighth and ninth are the same thing three times.
+  // Under `parent` they fold only when the picture is too tall; under `none`, never.
+  const stackAt = group === 'type' || group === 'run' ? 2 : (density === 'auto' && group !== 'none' && stack ? AUTO.stackAt : Infinity);
 
   // `anchor` is the item a node's wire comes out of; `via` is the member row inside it, when the parent is one.
   const place = (parentId, anchor, via, depth) => {
@@ -215,6 +221,23 @@ function itemsOf(nodes, { group, density, seq, stack, aside }) {
   return items;
 }
 
+/**
+ * What a group's members add up to: time, new tokens, tokens read from the cache, and the estimate. A member with
+ * no usage read adds nothing; the cost is null when any member's is, so a sum never passes for the whole.
+ */
+export function sumOf(members) {
+  const sum = { durationMs: 0, fresh: 0, cacheRead: 0, cost: 0, timed: 0, counted: 0 };
+  for (const m of members ?? []) {
+    if (m.durationMs != null) { sum.durationMs += m.durationMs; sum.timed += 1; }
+    if (!m.usage) continue;
+    sum.counted += 1;
+    sum.fresh += m.usage.tokens?.fresh ?? 0;
+    sum.cacheRead += m.usage.tokens?.cacheRead ?? 0;
+    sum.cost = sum.cost === null || m.usage.cost == null ? null : sum.cost + m.usage.cost;
+  }
+  return sum;
+}
+
 function groupItem(id, type, members, anchor, via, depth, seq, extra) {
   return {
     id,
@@ -227,10 +250,16 @@ function groupItem(id, type, members, anchor, via, depth, seq, extra) {
     via,
     depth,
     seq: Math.min(...members.map((m) => seq.get(m.id) ?? 0), Infinity),
+    // The group stands where its first member does in the order the session called its agents.
+    first: members.filter((m) => m.order != null).sort((a, b) => a.order - b.order)[0] ?? null,
+    sum: sumOf(members),
     ...extra,
   };
 }
 
+/** A session's card: one line taller while it has commands running in the background, and never wider. */
+export const sessionHeight = (n) => SIZE.session.h + (n?.backgroundNow?.length ? SIZE.session.line : 0);
+
 /* ----------------------------------------------------------------- plan --- */
 
 /**
@@ -248,6 +277,7 @@ function groupItem(id, type, members, anchor, via, depth, seq, extra) {
 export function plan(nodes, opts = {}) {
   const group = GROUPINGS.includes(opts.group) ? opts.group : 'run';
   const asked = DENSITIES.includes(opts.density) ? opts.density : 'auto';
+  if (group === 'order') return planOrder(nodes, asked, opts);
   const seq = opts.seq ?? sequence(nodes);
   const open = opts.open ?? new Map();
   const pinned = opts.pinned ?? new Map();
@@ -280,7 +310,7 @@ export function plan(nodes, opts = {}) {
   /** Size and place everything drawn, at one density. Returns the box the picture needs. */
   const lay = (drawnItems, compact) => {
     for (const it of drawnItems) {
-      if (it.kind === 'session') { it.w = SIZE.session.w; it.h = SIZE.session.h; continue; }
+      if (it.kind === 'session') { it.w = SIZE.session.w; it.h = sessionHeight(it.node); continue; }
       if (it.kind !== 'group') {
         const sz = compact ? SIZE.chip : SIZE.card;
         it.w = sz.w; it.h = sz.h; it.compact = compact;
@@ -289,7 +319,8 @@ export function plan(nodes, opts = {}) {
       it.open = isOpen(it);
       // `boxed` is the group drawn as a container with its members inside. Open beside itself it stays a card.
       it.boxed = it.open && !it.aside;
-      if (!it.boxed) { it.w = SIZE.card.w; it.h = SIZE.card.h; it.cells = null; continue; }
+      it.compact = compact;
+      if (!it.boxed) { it.w = SIZE.stack.w; it.h = compact ? SIZE.stack.tight : SIZE.stack.h; it.cells = null; continue; }
       const n = it.members.length;
       const grid = compact || n > G.rowsMax;
       const cols = grid ? Math.min(G.colsMax, Math.max(1, Math.ceil(n / G.rowsMax))) : 1;
@@ -422,6 +453,108 @@ export function plan(nodes, opts = {}) {
   };
 }
 
+/* ---------------------------------------------------------------- order --- */
+
+// What the wire from an agent to a later wave is called, and what it is: a reading of the order of events.
+export const INFERRED_NOTE = 'Inferred from the order of events: this wave was called after that agent reported. It is not a call from one agent to another; the session calls every agent.';
+
+/**
+ * The same agents by when the session called them.
+ *
+ * Every agent is called by the session, so the tree is one level deep and says nothing of sequence. Here a
+ * column is a WAVE: the agents called in one assistant message, which is what "started together" means. Waves
+ * run left to right in the order the messages were written, and a wave's agents stack in the order of the calls.
+ * Agents the session's transcript did not call (a workflow's) have no wave and take a last column of their own.
+ *
+ * Two kinds of wire. The session is wired to the first wave: it called it. A later wave is wired, dotted, from
+ * each agent that reported after the wave before it was called and before this one was — an inference from the
+ * order of events, drawn as one and labelled as one. A wave nothing reported before has no wire.
+ */
+function planOrder(nodes, asked, opts) {
+  const pinned = opts.pinned ?? new Map();
+  const session = nodes.find((n) => n.kind === 'session') ?? null;
+  const sessionH = sessionHeight(session);
+  const agents = nodes.filter((n) => n.kind === 'agent');
+  const called = agents.filter((n) => n.wave != null);
+  const waveIds = [...new Set(called.map((n) => n.wave))].sort((a, b) => a - b);
+  const byOrder = (a, b) => (a.order ?? 0) - (b.order ?? 0) || String(a.id).localeCompare(String(b.id));
+  const columns = waveIds.map((w) => ({ wave: w, members: called.filter((n) => n.wave === w).sort(byOrder) }));
+  for (const c of columns) c.calledAt = Math.min(...c.members.map((m) => m.calledAt ?? Infinity));
+  const rest = agents.filter((n) => n.wave == null)
+    .sort((a, b) => (a.startedAt ?? Infinity) - (b.startedAt ?? Infinity) || String(a.id).localeCompare(String(b.id)));
+  if (rest.length) columns.push({ wave: null, members: rest, calledAt: Infinity });
+
+  const lay = (compact) => {
+    const sz = compact ? SIZE.chip : SIZE.card;
+    const items = [];
+    const x0 = SIZE.padX + (session ? SIZE.session.w + SIZE.colGap : 0);
+    let height = 0;
+    columns.forEach((col, i) => {
+      col.members.forEach((n, j) => {
+        items.push({
+          id: n.id, kind: 'agent', node: n, parent: null, via: null, depth: i + 1, seq: n.order ?? j, compact,
+          wave: col.wave, w: sz.w, h: sz.h, x: x0 + i * (sz.w + SIZE.waveGap), y: SIZE.padY + j * (sz.h + SIZE.rowGap),
+        });
+      });
+      height = Math.max(height, SIZE.padY * 2 + col.members.length * (sz.h + SIZE.rowGap) - SIZE.rowGap);
+    });
+    const width = x0 + Math.max(0, columns.length * (sz.w + SIZE.waveGap) - SIZE.waveGap) + SIZE.padX;
+    return { items, width, height };
+  };
+  let compact = asked === 'compact';
+  let box = lay(compact);
+  if (asked === 'auto' && box.height > AUTO.tallest) { compact = true; box = lay(true); }
+  const { items } = box;
+  let { height } = box;
+
+  let sessionY = opts.sessionY ?? null;
+  if (session) {
+    const first = items.filter((it) => it.depth === 1);
+    if (sessionY == null) {
+      const bottom = first.length ? Math.max(...first.map((it) => it.y + it.h)) : SIZE.padY + sessionH;
+      sessionY = Math.max(SIZE.padY, Math.round((SIZE.padY + bottom) / 2 - sessionH / 2));
+    }
+    items.unshift({ id: session.id, kind: 'session', node: session, parent: null, depth: 0, w: SIZE.session.w, h: sessionH, x: SIZE.padX, y: sessionY });
+    height = Math.max(height, sessionY + sessionH + SIZE.padY);
+  }
+  for (const it of items) {
+    const p = pinned.get(it.id);
+    if (p) { it.x = p.x; it.y = p.y; it.pinned = true; }
+  }
+
+  const at = new Map(items.map((it) => [it.id, it]));
+  const edges = [];
+  const wire = (from, to, extra) => edges.push({
+    key: `${from.id}\u0000${to.id}`, source: from.id, target: to.id,
+    from: { x: from.x + from.w, y: from.y + from.h / 2 }, to: { x: to.x, y: to.y + to.h / 2 },
+    status: to.node.status ?? 'unknown', state: stateOf(to.node.status), ...extra,
+  });
+  const waves = columns.filter((c) => c.wave != null);
+  if (session && waves.length) for (const m of waves[0].members) wire(at.get(session.id), at.get(m.id), {});
+  // An agent's report belongs to the first wave called after it: the one that could have been waiting for it.
+  for (let i = 1; i < waves.length; i += 1) {
+    const since = waves[i - 1].calledAt;
+    const reporters = called.filter((n) => n.reportedAt != null && n.reportedAt > since && n.reportedAt <= waves[i].calledAt
+      && n.wave < waves[i].wave).sort(byOrder);
+    waves[i].after = reporters;
+    for (const r of reporters) {
+      waves[i].members.forEach((m, k) => wire(at.get(r.id), at.get(m.id), {
+        kind: 'inferred', state: 'inferred',
+        // Said once for a reporter, on the wire to the wave's first agent; the others carry it on hover.
+        label: k === 0 ? `after ${shownType(r)} reported` : null,
+        title: `after ${shownType(r)} reported\n${INFERRED_NOTE}`,
+      }));
+    }
+    for (const m of waves[i].members) at.get(m.id).after = reporters.map((r) => shownType(r));
+  }
+
+  return {
+    items, edges, width: Math.max(box.width, SIZE.padX * 2), height: Math.max(height, SIZE.padY * 2),
+    drawn: agents.length, density: compact ? 'compact' : 'comfortable', group: 'order', stacked: false, aside: false,
+    waves: waves.length, sessionY,
+  };
+}
+
 /**
  * Which open groups to fold when a session first opens too tall even as chips: the largest first, until the
  * picture is short enough to read or there is nothing left to fold. Returns the ids to fold; an empty list when

package/kit/studio/web/inspect.js

@@ -3,7 +3,7 @@
 // Functions of the server's data, with no page in them: the four tiles, what the agent is doing right now, which
 // skills it applied, who delegated to it. The rule they share is the panel's own: a value that was not read is
 // written "Not measured", with why — never as 0 and never as an empty list.
-import { roleName } from './names.js';
+import { roleName, modelName, modelFamily, modelOf } from './names.js';
 
 const NOT_MEASURED = 'Not measured';
 
@@ -100,6 +100,38 @@ export function backgroundLines(session, now) {
   }));
 }
 
+/**
+ * What the inspector says about an agent's model, as lines: { label, text, goto }.
+ *
+ * Two facts are kept apart: what the call ASKED for (its own `model` field; none means the agent's default) and
+ * what the agent RAN on (the model its own transcript names). Then, when the transcript shows them: the call the
+ * model gate refused first, and the same work repeated one model up after a report that closed `confidence: low`.
+ * `goto` is the id of the other agent a line is about, for a line that leads somewhere.
+ */
+export function modelLines(n, nodes) {
+  if (n?.kind !== 'agent') return [];
+  const m = modelOf(n);
+  const lines = [
+    { label: 'Ran on', text: n.model ? `${m.ran} \u00b7 ${n.model}` : 'not recorded' },
+    { label: 'Asked for', text: n.modelAsked ? `${n.modelAsked}${m.differs ? ' \u2014 differs from what ran' : ''}` : 'no model named (the agent\'s default)' },
+  ];
+  // The family is the word the choice is made in (haiku, sonnet, opus); a model with none keeps its own name.
+  const short = (model) => (model ? (modelFamily(model) ?? modelName(model).toLowerCase()) : 'no model');
+  if (n.firstTry) {
+    lines.push({
+      label: 'Model gate',
+      text: `first asked: ${short(n.firstTry.asked)} \u2192 refused${n.firstTry.floor ? ` (floor: ${n.firstTry.floor})` : ''} \u2192 ${short(n.modelAsked ?? n.model)}`,
+      note: n.firstTry.text,
+    });
+  }
+  const tagOf = (id) => { const o = (nodes ?? []).find((x) => x.id === id); return o?.order != null ? ` (#${o.order})` : ''; };
+  if (n.escalatedFrom) {
+    lines.push({ label: 'Escalated', text: `escalated: ${short(n.escalatedFrom.from)} \u2192 ${short(n.escalatedFrom.to)}, after${tagOf(n.escalatedFrom.id)} closed "confidence: low"`, goto: n.escalatedFrom.id });
+  }
+  if (n.escalatedTo) lines.push({ label: 'Escalated', text: `closed "confidence: low"; repeated one model up${tagOf(n.escalatedTo)}`, goto: n.escalatedTo });
+  return lines;
+}
+
 /** Who handed this agent its work: the node it hangs from. */
 export function delegatedBy(n, nodes) {
   const p = (nodes ?? []).find((x) => x.id === n.parentId) ?? null;

package/kit/studio/web/list.js

@@ -4,7 +4,7 @@
 // own three answers, so in this view the approval dock is not needed and is not shown.
 import { sections, wants } from './list-plan.js';
 import { Press } from './press.js';
-import { hoverOf } from './names.js';
+import { hoverOf, modelOf } from './names.js';
 import { remaining, asker, allowSessionLabel, VERDICTS } from './approvals.js';
 
 function mk(tag, cls, text) {
@@ -147,8 +147,14 @@ export class List {
     if (tile) row.append(tile);
     const text = mk('span', 'ls-text');
     text.append(mk('span', 'ls-name', r.type), mk('span', 'ls-line', r.line));
-    row.title = hoverOf(r.node);
+    const mdl = modelOf(r.node);
+    row.title = [hoverOf(r.node), mdl.ran ? mdl.title : null].filter(Boolean).join('\n');
     row.append(text);
+    if (mdl.ran) {
+      const badge = mk('span', 'sub ls-model', `${mdl.ran}${mdl.differs ? ' \u2260' : ''}`);
+      badge.title = mdl.title;
+      row.append(badge);
+    }
     if (r.aside) row.append(mk('span', 'sub ls-aside', r.aside));
     const chev = mk('span', 'ls-chev');
     chev.innerHTML = '<svg class="ic" viewBox="0 0 16 16" aria-hidden="true"><path d="M6 4l4 4-4 4"/></svg>';

package/kit/studio/web/names.js

@@ -31,3 +31,68 @@ export const shownType = (n) => roleName(typeOf(n));
 
 /** What hovering an agent says: the type as it is declared, and its task in full, since both are cut on screen. */
 export const hoverOf = (n) => [n?.agentType ?? null, n?.description ?? null].filter(Boolean).join('\n');
+
+/**
+ * Where an agent stands among the ones the session called, as a tag: "#3 · 09:14". The number is the order of
+ * the calls; the time is when the call was made, in the viewer's own zone. An agent the session's transcript did
+ * not call has no place to state, and gets no tag.
+ * @param clock  (ms) => "HH:MM"
+ */
+export function orderTag(n, clock = null) {
+  if (n?.order == null) return '';
+  return `#${n.order}${clock && n.calledAt != null ? ` · ${clock(n.calledAt)}` : ''}`;
+}
+
+/* ---------------------------------------------------------------- models --- */
+
+const MODEL_FAMILIES = ['haiku', 'sonnet', 'opus', 'fable', 'mythos'];
+
+/** The family a model belongs to, from its id or from the short name a call asks with: 'sonnet'. Null when none. */
+export function modelFamily(model) {
+  if (typeof model !== 'string') return null;
+  return model.toLowerCase().split(/[^a-z]+/).find((w) => MODEL_FAMILIES.includes(w)) ?? null;
+}
+
+/**
+ * A model as a badge says it: `claude-haiku-5-5` → Haiku 5.5 · `claude-haiku-4-5-20251001` → Haiku 4.5 ·
+ * `sonnet` → Sonnet. The vendor prefix and a snapshot date go; the words lead and the numbers follow with a dot.
+ * A name that is not made of such parts is returned as it came.
+ */
+export function modelName(model) {
+  if (typeof model !== 'string' || !model) return '';
+  const parts = model.replace(/^claude-/, '').replace(/-\d{8}$/, '').split('-');
+  if (!parts.every((p) => /^[a-z]+$/.test(p) || /^\d+$/.test(p))) return model;
+  const words = parts.filter((p) => /^[a-z]+$/.test(p)).map((w) => w[0].toUpperCase() + w.slice(1));
+  const nums = parts.filter((p) => /^\d+$/.test(p));
+  return [words.join(' '), nums.join('.')].filter(Boolean).join(' ');
+}
+
+/**
+ * What a node ran on and what its call asked for, and whether the two agree.
+ * A call asks with a family ("sonnet") or with an id; it agrees with what ran when the family is the same and,
+ * if it named an id, the id is. A call that named nothing asked for the agent's default, and agrees with anything.
+ * @returns { ran, asked, differs, title } — `ran` and `asked` are badge words, '' when not known
+ */
+export function modelOf(n) {
+  const ran = modelName(n?.model);
+  const asked = n?.modelAsked ? modelName(n.modelAsked) : '';
+  const differs = Boolean(n?.model && n?.modelAsked)
+    && (modelFamily(n.model) !== modelFamily(n.modelAsked) || (n.modelAsked.includes('-') && n.modelAsked !== n.model));
+  const title = [
+    `Ran on: ${n?.model ?? 'not recorded'}`,
+    `Asked for: ${n?.modelAsked ?? 'no model named (the agent\'s default)'}`,
+    differs ? 'The two differ.' : null,
+  ].filter(Boolean).join('\n');
+  return { ran, asked, differs, title };
+}
+
+/** "2 Sonnet, 1 Opus": how many of a group's agents ran on each family, most first. */
+export function modelMix(members) {
+  const counts = new Map();
+  for (const m of members ?? []) {
+    const f = modelFamily(m.model);
+    const word = f ? f[0].toUpperCase() + f.slice(1) : (m.model ? modelName(m.model) : null);
+    if (word) counts.set(word, (counts.get(word) ?? 0) + 1);
+  }
+  return [...counts].sort((a, b) => b[1] - a[1] || a[0].localeCompare(b[0])).map(([w, c]) => `${c} ${w}`).join(', ');
+}

package/kit/studio/web/style.css

@@ -836,6 +836,42 @@ button.tl-lab { cursor: pointer; }
 }
 
 /* Working. The brightest and the only one that travels. */
+/* A wire that is an inference, not a call: dotted, still, and it can be hovered for what it means. A working wire
+   is dashed and moves; this one is neither. */
+.cv-edge[data-kind="inferred"] {
+  stroke: var(--ink-faint);
+  stroke-dasharray: 1.5 5;
+  pointer-events: stroke;
+}
+.cv-edge-label { font-size: 10px; fill: var(--ink-faint); pointer-events: none; }
+/* "#3 · 09:14": where a card stands in the order the session called its agents. */
+.cv-under { display: flex; align-items: baseline; min-width: 0; }
+/* The model a card ran on: a small badge, whole. What follows it gives way. */
+.cv-model {
+  flex: none; padding: 0 5px; border-radius: var(--radius-sm); background: var(--surface-raised);
+  font-size: 10px; line-height: 16px; color: var(--ink-dim); white-space: nowrap;
+}
+.cv-model[hidden] { display: none; }
+.cv-model[data-differs="true"] { color: var(--status-waiting); }
+.cv-third { gap: 6px; }
+.cv-facts { flex: 1 1 auto; min-width: 0; font-size: 11px; line-height: 16px; color: var(--ink-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
+.cv-totals { font-variant-numeric: tabular-nums; }
+/* The same badge outside the graph: a Timeline row, a List row, a delegation card. */
+.tl-model, .ls-model, .deleg-model {
+  flex: none; padding: 0 5px; margin-right: 6px; border-radius: var(--radius-sm); background: var(--surface-raised);
+  font-size: 10px; line-height: 16px; color: var(--ink-dim); white-space: nowrap;
+}
+.tl-model[hidden] { display: none; }
+.imodel { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: 12px; }
+.imodel dt { color: var(--ink-faint); }
+.imodel dd { margin: 0; word-break: break-word; }
+.ilink { border: 0; padding: 0; background: none; font: inherit; color: var(--studio-accent); cursor: pointer; text-decoration: underline; }
+.cv-mix { color: var(--ink-faint); }
+.cv-under .cv-task { flex: 1 1 auto; min-width: 0; }
+.cv-order { flex: none; margin-left: 6px; font-family: var(--font-mono); font-size: 10px; color: var(--ink-faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
+.cv-order[hidden] { display: none; }
+.cv-chip .cv-order, .cv-member .cv-order { margin-left: 0; margin-right: 6px; }
+
 .cv-edge[data-state="live"] {
   stroke: var(--status-busy);
   opacity: var(--cv-edge-live);
@@ -946,7 +982,7 @@ button.tl-lab { cursor: pointer; }
 .cv-row { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
 .cv-fill { flex: 1; min-width: 0; }
 .cv-indent { padding-left: 32px; }
-.cv-title { font-size: 13px; font-weight: 600; }
+.cv-title { font-size: 13px; font-weight: 600; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .cv-name {
   min-width: 0; font-family: var(--font-mono); font-size: 12px; line-height: 16px; color: var(--ink);
   overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
@@ -955,7 +991,12 @@ button.tl-lab { cursor: pointer; }
   min-width: 0; font-size: 13px; line-height: 18px; color: var(--ink-dim);
   overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
 }
-.cv-sub { font-size: 12px; line-height: 16px; color: var(--ink-dim); white-space: nowrap; flex: none; }
+/* Nothing a card says may run out of it. Every piece of text in a card is one line that gives way with an
+   ellipsis; the pieces that must stay whole (the status pill, the tile, the order tag) are short by construction
+   and do not shrink. */
+.cv-sub { font-size: 12px; line-height: 16px; color: var(--ink-dim); white-space: nowrap; flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+.cv-sub[hidden] { display: none; }
+.cv-node > .cv-row, .cv-node > .cv-under, .cv-node > .cv-name, .cv-node > .cv-sub { max-width: 100%; }
 .cv-word { font-size: 11px; color: var(--ink-dim); white-space: nowrap; flex: none; }
 
 /* The tile says whose agent it is. Crewforth's mark keeps its own colours; the
@@ -1075,10 +1116,27 @@ button.tl-lab { cursor: pointer; }
 }
 .cv-legend[hidden] { display: none; }
 /* The session's summary is the same kind of box, in the opposite corner. */
-.cv-spend { right: auto; bottom: auto; left: var(--space-6); top: var(--space-6); width: 220px; }
-.cv-spend-rows { margin: 0; display: grid; grid-template-columns: 1fr auto; gap: var(--space-1) var(--space-3); font-size: 12px; }
-.cv-spend-rows dt { color: var(--ink-dim); }
-.cv-spend-rows dd { margin: 0; font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; color: var(--ink); }
+.cv-spend { right: auto; bottom: auto; left: var(--space-6); top: var(--space-6); width: 240px; }
+.cv-spend-rows { display: flex; flex-direction: column; gap: 2px; font-size: 12px; min-width: 0; }
+.cv-spend-row {
+  display: flex; align-items: baseline; gap: var(--space-3); min-width: 0; width: 100%;
+  padding: 2px 4px; margin: 0 -4px; border: 0; border-radius: var(--radius-sm);
+  background: none; font: inherit; color: inherit; text-align: left; cursor: default;
+}
+.cv-spend-label { flex: 1 1 auto; min-width: 0; color: var(--ink-dim); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.cv-spend-value { flex: none; font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink); white-space: nowrap; }
+/* A row that opens: it looks like something to press, and says so with a mark that turns. */
+.cv-spend-more { cursor: pointer; }
+.cv-spend-more:hover { background: var(--surface-raised); }
+.cv-spend-more .cv-spend-label::before { content: '\203A'; display: inline-block; width: 10px; color: var(--ink-faint); }
+.cv-spend-more[aria-expanded="true"] .cv-spend-label::before { rotate: 90deg; }
+.cv-spend-detail {
+  margin: 0 0 var(--space-1) 10px; padding-left: var(--space-2); border-left: 1px solid var(--line);
+  display: grid; grid-template-columns: 1fr auto; gap: 2px var(--space-3);
+}
+.cv-spend-detail[hidden] { display: none; }
+.cv-spend-detail dt { color: var(--ink-faint); }
+.cv-spend-detail dd { margin: 0; font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; color: var(--ink-dim); }
 .cv-legend-head { display: flex; align-items: center; justify-content: space-between; }
 .cv-legend-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-1) var(--space-2); }
 .cv-legend-item { display: flex; align-items: center; gap: var(--space-2); font-size: 12px; color: var(--ink-dim); white-space: nowrap; }
@@ -1086,6 +1144,7 @@ button.tl-lab { cursor: pointer; }
 .cv-legend-line[data-state="live"] { border-top: 1.5px dashed var(--status-busy); }
 .cv-legend-line[data-state="waiting"] { border-top: 1.5px dashed var(--status-waiting); }
 .cv-legend-line[data-state="failed"] { border-top-color: var(--cv-fail); }
+.cv-legend-line[data-state="inferred"] { border-top: 1.5px dotted var(--ink-faint); }
 .cv-x {
   width: 20px; height: 20px; padding: 0; display: inline-flex; align-items: center; justify-content: center;
   background: none; border: 0; border-radius: var(--radius-sm); color: var(--ink-dim); cursor: pointer;

package/kit/studio/web/timeline-plan.js

@@ -120,6 +120,8 @@ export function groupsOf(nodes, grouping) {
       return { id: `parent:${p.id}`, label: p.kind === 'workflow' ? (p.workflowId ?? p.id) : `under ${shownType(p)}` };
     }
     if (grouping === 'none') return { id: 'all', label: null };
+    // `order`: the agents called in one assistant message are a wave, and a wave is a group.
+    if (grouping === 'order') return n.wave != null ? { id: `wave:${n.wave}`, label: `Wave ${n.wave}` } : { id: 'wave:none', label: 'Not called by the session' };
     // `run`: a workflow run is a group; everything the session started itself is another.
     if (n.workflow) return { id: `run:${n.workflow}`, label: String(n.workflow) };
     return { id: 'direct', label: 'Session · direct' };
@@ -135,6 +137,12 @@ export function groupsOf(nodes, grouping) {
   for (const g of out) g.members.sort((a, b) => (a.startedAt ?? Infinity) - (b.startedAt ?? Infinity) || String(a.id).localeCompare(String(b.id)));
   // What the session did itself comes first; the rest in the order they began.
   out.sort((a, b) => Number(b.id === 'direct') - Number(a.id === 'direct') || first(a) - first(b) || a.id.localeCompare(b.id));
+  // Waves are in the order they were called, which is not always the order their agents first wrote.
+  if (grouping === 'order') {
+    const wave = (g) => g.members[0].wave ?? Infinity;
+    out.sort((a, b) => wave(a) - wave(b));
+    for (const g of out) g.members.sort((a, b) => (a.order ?? Infinity) - (b.order ?? Infinity));
+  }
   return out;
 }
 

package/kit/studio/web/timeline.js

@@ -6,7 +6,7 @@ import {
   rows, groupsOf, extent, windowOf, place, ticks, clock, stepRange, waitNote, factsOf, xOf, RANGES, DEFAULT_RANGE,
 } from './timeline-plan.js';
 import { Press } from './press.js';
-import { shownType, hoverOf } from './names.js';
+import { shownType, hoverOf, modelOf, modelFamily } from './names.js';
 
 
 function mk(tag, cls, text) {
@@ -116,6 +116,7 @@ export class Timeline {
   setGroup(g) { if (g === this.group) return; this.group = g; this.folded = new Set(); this.expanded = new Set(); this.render(); }
   setWaiting(ids) { this.waiting = new Set(ids ?? []); this.render(); }
   setFilter(statuses, { keepWaiting = false } = {}) { this.filter = statuses ? new Set(statuses) : null; this.keepWaiting = keepWaiting; this.render(); }
+  setModelFilter(family) { this.modelFilter = family ?? null; this.render(); }
   setOwned(summary) { this.owned = summary ?? null; this.render(); }
   setLive(live) { if (live === this.live) return; this.live = live; this.render(); this.#changed(); }
 
@@ -159,6 +160,7 @@ export class Timeline {
   }
 
   dimmed(n) {
+    if (this.modelFilter && modelFamily(n.model) !== this.modelFilter) return true;
     if (!this.filter) return false;
     if (this.keepWaiting && this.waiting.has(n.id)) return false;
     return !this.filter.has(n.status);
@@ -320,8 +322,13 @@ export class Timeline {
       if (tile) lab.append(tile);
       const sub = mk('span', 'sub', r.sub);
       if (r.tone) sub.dataset.tone = r.tone;
-      lab.append(mk('span', 'tl-name', r.label), mk('span', 'row-fill'), sub);
-      lab.title = hoverOf(r.node);
+      // The model the row's agent ran on, before its state.
+      const mdl = modelOf(r.node);
+      const badge = mk('span', 'tl-model', `${mdl.ran}${mdl.differs ? ' \u2260' : ''}`);
+      badge.hidden = !mdl.ran;
+      badge.title = mdl.title;
+      lab.append(mk('span', 'tl-name', r.label), mk('span', 'row-fill'), badge, sub);
+      lab.title = [hoverOf(r.node), mdl.ran ? mdl.title : null].filter(Boolean).join('\n');
       // One listener, on the row: the label is a button inside it, and its click arrives here too. Two
       // listeners chose the agent and un-chose it in the same click.
       row.addEventListener('click', () => this.#choose(r.id));

package/kit/studio/web/usage.js

@@ -5,6 +5,8 @@
 // "~", and a note that says what it is. A session with tokens from a model the price table does not have gets
 // a dash, not a smaller number.
 
+import { modelName } from './names.js';
+
 export const COST_NOTE = 'Estimated at API list price; on a subscription it is not what you are billed';
 export const NO_COST = '—';
 
@@ -54,24 +56,63 @@ export function costNote(u) {
   return `No estimate: the price table has no row for ${u.unpriced.join(', ')}`;
 }
 
-/** The navigator's one line: time · tokens · ~cost. Null when nothing was read. */
-export function usageLine(u) {
+/** "40s", "4m 40s", "3h 5m": a span that is being counted, so the seconds show while they matter. */
+export function fmtRunning(ms) {
+  if (ms == null || !Number.isFinite(ms) || ms < 0) return null;
+  const s = Math.floor(ms / 1000);
+  if (s < 60) return `${s}s`;
+  if (s < 3600) return `${Math.floor(s / 60)}m ${s % 60}s`;
+  return fmtSpan(ms);
+}
+
+/**
+ * The navigator's one line: time · new tokens · ~cost. Null when nothing was read.
+ * @param live  the session is running: its time is counted from its first record to now
+ */
+export function usageLine(u, { live = false, now = null } = {}) {
   if (!u) return null;
   const t = timeOf(u);
-  const tokens = typeof u.tokens === 'number' ? u.tokens : u.tokens?.total;
-  return [t ? fmtSpan(t.ms) : null, tokens ? fmtCount(tokens) : null, tokens ? fmtCost(u.cost) : null].filter(Boolean).join(' · ') || null;
+  const span = live && u.startedAt != null && now != null ? fmtSpan(now - u.startedAt) : (t ? fmtSpan(t.ms) : null);
+  const tokens = typeof u.tokens === 'number' ? u.tokens : u.tokens?.fresh;
+  return [span, tokens ? fmtCount(tokens) : null, tokens ? fmtCost(u.cost) : null].filter(Boolean).join(' · ') || null;
 }
 
-/** The summary box's rows: [label, value, note]. */
-export function summaryRows(u) {
+const kinds = (k, cached = true) => [
+  ['Input', fmtCount(k?.input ?? 0)], ['Output', fmtCount(k?.output ?? 0)], ['Cache write', fmtCount(k?.cacheWrite ?? 0)],
+  ...(cached ? [['Cache read', fmtCount(k?.cacheRead ?? 0)]] : []),
+];
+
+/**
+ * The summary box's rows: { label, value, note, detail }. `detail` is what a click on the row opens: the same
+ * number broken down, as [name, value] pairs.
+ *
+ * "Tokens" is what was new: input, output and cache writes. What was read back from the cache is its own row —
+ * it is the same context counted again on every response, and added in it made a session that had just opened
+ * read as millions.
+ *
+ * @param opts.live  the session is running: its time is counted from its first record to `opts.now`
+ */
+export function summaryRows(u, { live = false, now = null } = {}) {
   if (!u) return [];
-  const t = timeOf(u);
   const k = u.tokens ?? {};
   const rows = [];
-  if (t) rows.push([t.kind === 'worked' ? 'Working time' : 'First to last record', fmtSpan(t.ms), t.note]);
-  if (t?.kind === 'worked' && u.durationMs != null) rows.push(['First to last record', fmtSpan(u.durationMs), 'Pauses included']);
-  rows.push(['Tokens', fmtCount(k.total ?? 0),
-    `Agents included, each response counted once\ninput ${fmtCount(k.input ?? 0)} · output ${fmtCount(k.output ?? 0)} · cache write ${fmtCount(k.cacheWrite ?? 0)} · cache read ${fmtCount(k.cacheRead ?? 0)}`]);
-  rows.push(['Cost', k.total ? fmtCost(u.cost) : NO_COST, costNote(u)]);
+  const t = timeOf(u);
+  if (live && u.startedAt != null && now != null) {
+    rows.push({ label: 'Running for', value: fmtRunning(now - u.startedAt), note: 'From the session\'s first record to now' });
+  } else if (t) {
+    rows.push({ label: t.kind === 'worked' ? 'Working time' : 'First to last record', value: fmtSpan(t.ms), note: t.note });
+    if (t.kind === 'worked' && u.durationMs != null) rows.push({ label: 'First to last record', value: fmtSpan(u.durationMs), note: 'Pauses included; the agents\' transcripts too' });
+  }
+  rows.push({ label: 'Tokens', value: fmtCount(k.fresh ?? 0), note: 'New tokens: input, output and cache writes. Agents included, each response counted once', detail: kinds(k, false) });
+  rows.push({ label: 'From cache', value: fmtCount(k.cacheRead ?? 0), note: 'Read back from the prompt cache: the same context, counted on every response that reused it' });
+  const part = (label, p, note) => {
+    if (!p?.tokens?.total) return;
+    rows.push({ label, value: `${fmtCount(p.tokens.fresh)} · ${fmtCost(p.cost)}`, note: `${note}: new tokens and estimated cost\n${costNote(p)}`, detail: kinds(p.tokens) });
+  };
+  part('Session', u.parts?.session, 'The session\'s own transcript');
+  part('Agents', u.parts?.agents, 'Everything its agents did');
+  // Behind the cost: each model's new tokens and what they come to. A model with no price says so with a dash.
+  const perModel = Object.entries(u.byModel ?? {}).map(([model, t]) => [modelName(model), `${fmtCount(t.tokens.fresh)} \u00b7 ${fmtCost(t.cost)}`]);
+  rows.push({ label: 'Cost', value: k.total ? fmtCost(u.cost) : NO_COST, note: costNote(u), detail: perModel.length ? perModel : undefined });
   return rows;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "crewforth",
-  "version": "3.1.0-rc.3",
+  "version": "3.1.0-rc.5",
   "description": "Crewforth — your engineering crew for Claude Code: agents, skills and tool-level gates, in any stack.",
   "bin": {
     "crewforth": "bin/cli.js"