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

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

@@ -24,8 +24,10 @@ export const SIZE = {
   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,
@@ -153,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) => {
@@ -216,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,
@@ -230,10 +252,14 @@ function groupItem(id, type, members, anchor, via, depth, seq, extra) {
     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 --- */
 
 /**
@@ -284,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;
@@ -293,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;
@@ -446,6 +473,7 @@ export const INFERRED_NOTE = 'Inferred from the order of events: this wave was c
 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);
@@ -483,11 +511,11 @@ function planOrder(nodes, asked, opts) {
   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 + SIZE.session.h;
-      sessionY = Math.max(SIZE.padY, Math.round((SIZE.padY + bottom) / 2 - SIZE.session.h / 2));
+      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: SIZE.session.h, x: SIZE.padX, y: sessionY });
-    height = Math.max(height, sessionY + SIZE.session.h + SIZE.padY);
+    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);

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

@@ -42,3 +42,57 @@ 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

@@ -846,6 +846,27 @@ button.tl-lab { cursor: pointer; }
 .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; }
@@ -961,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;
@@ -970,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
@@ -1090,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; }

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.4",
+  "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"