crewforth 3.1.0-rc.4 → 3.1.0-rc.6

package/kit/studio/web/style.css

@@ -434,6 +434,8 @@ mark { background: color-mix(in srgb, var(--studio-accent) 30%, transparent); co
   font-size: 13px; color: var(--ink); overflow-wrap: anywhere;
 }
 .toast[hidden] { display: none; }
+/* The one action a toast can carry. The toast takes clicks only where that button is. */
+.toast-act { pointer-events: auto; border: 0; padding: 0; background: none; font: inherit; color: var(--studio-accent); cursor: pointer; text-decoration: underline; }
 
 /* ============================================================== stage === */
 
@@ -545,6 +547,56 @@ mark { background: color-mix(in srgb, var(--studio-accent) 30%, transparent); co
 
 /* ------------------------------------------------------------ the list ---
    One column, in the order of what needs the reader. */
+/* ------------------------------------------------------------- models ---
+   The fourth view: the project's record of which model each kind of task needs. One pane, a table that scrolls
+   sideways in a narrow window, and under it what could be lowered. */
+.mv { flex: 1; min-height: 0; min-width: 0; overflow: auto; background: var(--ground); padding: var(--space-4); }
+.mv[hidden] { display: none; }
+.mv-empty { padding: var(--space-6); color: var(--ink-dim); font-size: 13px; }
+.mv-pane { border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); overflow: hidden; }
+.mv-head { display: flex; align-items: center; gap: var(--space-2); padding: 14px 18px; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
+.mv-title { margin: 0; font-size: 15px; font-weight: 700; }
+.mv .sub { white-space: normal; flex: initial; min-width: 0; }
+.mv-scroll { overflow-x: auto; }
+.mv-table { border-collapse: collapse; width: 100%; font-size: 13px; }
+.mv-table th { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-dim); text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
+.mv-table td { padding: 10px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
+.mv-table tbody tr:last-child td { border-bottom: 0; }
+.mv-table .mv-num { text-align: right; font-variant-numeric: tabular-nums; }
+.mv-table td.mv-num { font-family: var(--font-mono); }
+.mv-tag { display: inline-flex; align-items: center; height: 20px; padding: 0 8px; border-radius: var(--radius-sm); font-size: 11px; font-weight: 700; white-space: nowrap; background: var(--surface-raised); color: var(--ink-dim); }
+.mv-tag[data-risk="critical"] { color: var(--status-fail); background: color-mix(in srgb, var(--status-fail) 14%, transparent); }
+.mv-tag[data-kind="raised"] { margin-left: 6px; color: var(--status-waiting); background: color-mix(in srgb, var(--status-waiting) 14%, transparent); }
+.mv-tag[data-kind="lowered"] { margin-left: 6px; color: var(--studio-accent); background: color-mix(in srgb, var(--studio-accent) 16%, transparent); }
+.mv-raised .mv-tag[data-kind="lowered"] { margin-left: 0; }
+.mv-tag[data-tone="pass"] { color: var(--status-good); background: color-mix(in srgb, var(--status-good) 14%, transparent); }
+.mv-tag[data-tone="fail"] { color: var(--status-fail); background: color-mix(in srgb, var(--status-fail) 14%, transparent); }
+.mv-tag[data-kind="escalated"] { color: var(--studio-accent); background: color-mix(in srgb, var(--studio-accent) 16%, transparent); }
+.mv-table td[data-partial="true"] { color: var(--ink-dim); }
+.mv-meter { display: inline-block; width: 72px; height: 6px; margin-left: 8px; border-radius: 999px; background: var(--surface-raised); overflow: hidden; vertical-align: middle; }
+.mv-meter-fill { display: block; height: 6px; }
+.mv-meter-fill[data-tone="good"] { background: var(--status-good); }
+.mv-meter-fill[data-tone="waiting"] { background: var(--status-waiting); }
+.mv-suggest { margin: 16px 18px; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; border: 1px solid color-mix(in srgb, var(--studio-accent) 45%, var(--line)); border-radius: var(--radius-md); background: color-mix(in srgb, var(--studio-accent) 9%, var(--surface)); }
+.mv-suggest-h { margin: 0; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--studio-accent); }
+.mv-suggest-text { margin: 0; font-size: 14px; line-height: 21px; }
+.mv-suggest-row { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
+.mv-cmd { padding: 2px 6px; border-radius: var(--radius-sm); background: var(--surface-raised); font-size: 12px; user-select: all; }
+.mv-raised { display: flex; align-items: baseline; gap: var(--space-2); padding: 0 18px 16px; }
+.mv-raised .mv-tag { margin-left: 0; flex: none; }
+
+/* The inspector's task card: the three lines as they were written, and under them how the work went. */
+.icard { margin: 0; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 4px 12px; font-size: 12px; line-height: 18px; }
+.icard dt { color: var(--ink-faint); }
+.icard dd { margin: 0; font-family: var(--font-mono); overflow-wrap: anywhere; }
+.isec-h .mv-tag { float: right; text-transform: none; letter-spacing: 0; }
+.isteps { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 12px; line-height: 20px; }
+.isteps li { display: flex; gap: 10px; align-items: flex-start; }
+.istep-n { flex: none; width: 20px; height: 20px; border-radius: 999px; background: var(--surface-raised); color: var(--ink-dim); font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
+.istep-says { min-width: 0; overflow-wrap: anywhere; }
+.istep-says .mv-tag { margin-left: 6px; }
+.istep-note { margin: 8px 0 0; font-size: 12px; line-height: 16px; color: var(--ink-dim); }
+
 .ls { flex: 1; min-height: 0; min-width: 0; overflow-y: auto; background: var(--ground); padding: var(--space-3) var(--space-4) var(--space-6); }
 .ls[hidden] { display: none; }
 .ls-sec { max-width: 760px; margin: 0 auto var(--space-4); }
@@ -742,6 +794,37 @@ button.tl-lab { cursor: pointer; }
 }
 .terminal-wait-note { flex: none; margin-left: auto; }
 
+/* A question the model asks, or a plan it wants approved: a form in the dock, or on a card in the List. */
+.ask { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; margin-top: var(--space-1); }
+.ask-q { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
+.ask-head { display: flex; align-items: baseline; gap: var(--space-2); min-width: 0; flex-wrap: wrap; }
+.ask-tag { flex: none; padding: 0 6px; border-radius: var(--radius-sm); background: var(--surface-raised); font-size: 11px; color: var(--ink-dim); }
+.ask-text { font-size: 13px; color: var(--ink); overflow-wrap: anywhere; }
+.ask-opts { display: flex; flex-wrap: wrap; gap: 6px; }
+.ask-opt {
+  height: 28px; padding: 0 10px; border-radius: var(--radius-sm); border: 1px solid var(--line);
+  background: var(--surface); color: var(--ink); font: inherit; font-size: 12px; cursor: pointer;
+}
+.ask-opt:hover { border-color: var(--ink-faint); }
+.ask-opt[aria-checked="true"] { border-color: var(--studio-accent); box-shadow: 0 0 0 1px var(--studio-accent); }
+.ask-opt:disabled, .ask-own:disabled { opacity: 0.5; cursor: default; }
+.ask-own {
+  height: 28px; padding: 0 8px; min-width: 0; max-width: 360px; border-radius: var(--radius-sm);
+  border: 1px solid var(--line); background: var(--ground); color: var(--ink); font: inherit; font-size: 12px;
+}
+.ask-plan {
+  margin: 0; padding: var(--space-2) var(--space-3); max-height: 220px; overflow: auto;
+  border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--ground);
+  font-family: var(--font-mono); font-size: 12px; line-height: 1.5; color: var(--ink); white-space: pre-wrap; overflow-wrap: anywhere;
+}
+.ask-acts { display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: flex-end; }
+.dock-ask[hidden] { display: none; }
+/* The mode in the conversation's strip is a control: it looks like the text it sits among until it is hovered. */
+.pane-mode { border: 0; padding: 0 4px; margin: 0 -4px; border-radius: var(--radius-sm); background: none; font: inherit; color: inherit; cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
+.pane-mode:hover { background: var(--surface-raised); color: var(--ink); }
+/* With a form in it the dock is as tall as the form needs, and the countdown sits at its top. */
+.dock[data-ask="questions"], .dock[data-ask="plan"] { align-items: start; }
+
 /* -------------------------------------------------------------- dock ---
    The approval dock: a row under the canvas, there only while a tool call is
    waiting. It is part of the stage's column, so the canvas above it stays
@@ -846,6 +929,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 +1065,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 +1074,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
@@ -983,15 +1092,6 @@ button.tl-lab { cursor: pointer; }
 }
 .cv-tile svg { width: 64%; height: 64%; display: block; }
 .cv-tile-sm { width: 18px; height: 18px; }
-/* A type nobody declared is marked as one. It is not quietly drawn as built-in. */
-.cv-tile[data-source="unknown"]::after {
-  content: '?';
-  position: absolute; right: -5px; top: -5px;
-  width: 12px; height: 12px; border-radius: var(--radius-pill);
-  display: flex; align-items: center; justify-content: center;
-  background: var(--surface); border: 1px solid var(--line);
-  font-family: var(--font-mono); font-size: 9px; line-height: 1; color: var(--ink-dim);
-}
 
 .cv-pill {
   display: inline-flex; align-items: center; gap: 5px; flex: none;
@@ -1006,6 +1106,8 @@ button.tl-lab { cursor: pointer; }
 .cv-node.cv-chip { flex-direction: row; align-items: center; gap: var(--space-2); padding: 0 10px; border-radius: 8px; }
 .cv-chip .cv-name { flex: 0 1 auto; }
 .cv-chip .cv-task { flex: 1 1 0; font-size: 12px; }
+/* On a chip the model is said in full and does not shrink; the task beside it does. */
+.cv-chip .cv-model { flex: none; }
 
 /* The session: where everything starts. */
 .cv-session { cursor: pointer; }
@@ -1090,10 +1192,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-plan.js

@@ -108,6 +108,14 @@ export function lanes(bars) {
   return out[1].length ? out : [out[0]];
 }
 
+/**
+ * Which groups are folded. A group is as the viewer left it (`hand`: id -> folded); one they have not touched
+ * follows the last "Expand all" (`all` true) or "Fold all" (`all` false), and before either it is open.
+ */
+export function foldedSet(ids, hand = new Map(), all = null) {
+  return new Set(ids.filter((id) => (hand.has(id) ? hand.get(id) : all === false)));
+}
+
 /** The groups of a session's agents under one grouping, in the order they first started. */
 export function groupsOf(nodes, grouping) {
   const agents = nodes.filter((n) => n.kind === 'agent');

package/kit/studio/web/timeline.js

@@ -3,10 +3,10 @@
 // Which rows there are, where a bar starts and ends and what it says is decided in timeline-plan.js. This file
 // draws that, and hands back what the viewer did: a row chosen, a group folded, the view moved.
 import {
-  rows, groupsOf, extent, windowOf, place, ticks, clock, stepRange, waitNote, factsOf, xOf, RANGES, DEFAULT_RANGE,
+  rows, groupsOf, foldedSet, 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) {
@@ -39,7 +39,8 @@ export class Timeline {
     this.range = DEFAULT_RANGE;
     this.follow = true;
     this.end = null;               // where the view ends when it is not following
-    this.folded = new Set();
+    this.fold = new Map();       // group id -> folded, the viewer's own choices
+    this.all = null;             // true after Expand all, false after Fold all: what an untouched group is
     this.expanded = new Set();
     this.waiting = new Set();
     this.filter = null;            // Set of statuses, or null
@@ -103,7 +104,8 @@ export class Timeline {
     if (id === this.session) return;
     this.session = id;
     this.nodes = [];
-    this.folded = new Set();
+    this.fold = new Map();       // group id -> folded, the viewer's own choices
+    this.all = null;             // true after Expand all, false after Fold all: what an untouched group is
     this.expanded = new Set();
     this.selected = null;
     this.follow = true;
@@ -113,9 +115,24 @@ export class Timeline {
   }
 
   setNodes(nodes) { this.nodes = nodes ?? []; this.render(); }
-  setGroup(g) { if (g === this.group) return; this.group = g; this.folded = new Set(); this.expanded = new Set(); this.render(); }
+  setGroup(g) { if (g === this.group) return; this.group = g; this.fold = new Map(); this.all = null; this.expanded = new Set(); this.render(); }
+
+  /** Open every group and show every row of the long ones; a group that arrives later arrives open. */
+  expandAll() { this.all = true; this.fold = new Map(); this.render(); this.#changed(); }
+  /** Fold every group; one that arrives later arrives folded. */
+  foldAll() { this.all = false; this.fold = new Map(); this.expanded = new Set(); this.render(); this.#changed(); }
+  /** Whether there is anything left for each of the two to do. */
+  foldState() {
+    const heads = (this.lastRows ?? []).filter((r) => r.kind === 'group');
+    return {
+      groups: heads.length,
+      canExpand: heads.some((r) => r.folded) || (this.lastRows ?? []).some((r) => r.kind === 'more'),
+      canFold: heads.some((r) => !r.folded),
+    };
+  }
   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(); }
 
@@ -150,7 +167,7 @@ export class Timeline {
     if (id) {
       for (const g of groupsOf(this.nodes, this.group)) {
         if (!g.members.some((m) => m.id === id)) continue;
-        this.folded.delete(g.id);
+        this.fold.set(g.id, false);
         this.expanded.add(g.id);
       }
     }
@@ -159,6 +176,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);
@@ -210,10 +228,12 @@ export class Timeline {
     // The rows are drawn again from the data each time; a keyboard reader's place among them is kept.
     const focused = this.rowsEl.contains?.(document.activeElement) ? document.activeElement.dataset?.key ?? null : null;
     const top = this.body.scrollTop;
+    const ids = groupsOf(this.nodes, this.group).map((g) => g.id);
     const list = rows(this.nodes, {
-      group: this.group, folded: this.folded, expanded: this.expanded, waiting: this.waiting,
+      group: this.group, folded: foldedSet(ids, this.fold, this.all), expanded: this.all === true ? new Set(ids) : this.expanded, waiting: this.waiting,
       approvals: this.owned?.approvals ?? null, now,
     });
+    this.lastRows = list;
     this.rowsEl.replaceChildren(...list.map((r) => this.#row(r, win, width)));
     this.body.scrollTop = top;
     if (focused) [...this.rowsEl.querySelectorAll('[data-key]')].find((el) => el.dataset.key === focused)?.focus();
@@ -303,8 +323,9 @@ export class Timeline {
       chev.innerHTML = '<svg class="ic" viewBox="0 0 16 16" aria-hidden="true"><path d="M6 4l4 4-4 4"/></svg>';
       lab.append(chev, mk('span', 'tl-name', r.label), mk('span', 'row-fill'), mk('span', 'sub', r.sub));
       lab.addEventListener('click', () => {
-        if (this.folded.has(r.id)) this.folded.delete(r.id); else this.folded.add(r.id);
+        this.fold.set(r.id, !r.folded);
         this.render();
+        this.#changed();
       });
       this.#bars(track, r.lanes, win, width);
     } else if (r.kind === 'merged') {
@@ -320,8 +341,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.6",
   "description": "Crewforth — your engineering crew for Claude Code: agents, skills and tool-level gates, in any stack.",
   "bin": {
     "crewforth": "bin/cli.js"