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

package/kit/studio/web/ask.js

@@ -0,0 +1,137 @@
+// The two requests that are not answered with allow or deny: a question the model asks, and a plan it wants
+// approved. This file draws the form for each and hands back what the viewer chose.
+//
+// A form is built once for a request and kept while the request waits. The dock and the List redraw around it every
+// second; a form rebuilt on each of those would lose what was picked, and what was being typed.
+import { answersOf, PLAN_CHOICES } from './approvals.js';
+
+function mk(tag, cls, text) {
+  const n = document.createElement(tag);
+  if (cls) n.className = cls;
+  if (text != null) n.textContent = text;
+  return n;
+}
+
+export class AskForms {
+  /** @param onDecide (item, verdict, extra) => void — 'answer' with { answers }, 'plan' with { mode }, or 'deny' */
+  constructor(onDecide) {
+    this.onDecide = onDecide ?? (() => {});
+    this.forms = new Map();     // request key -> { el, sent(on) }
+  }
+
+  /** The form for a request, the same element every time it is asked for. Null for an ordinary tool call. */
+  get(item) {
+    if (!item?.ask) return null;
+    let f = this.forms.get(item.key);
+    if (!f) {
+      f = item.ask.kind === 'plan' ? this.#plan(item) : this.#questions(item);
+      this.forms.set(item.key, f);
+    }
+    return f.el;
+  }
+
+  /** An answer was sent, or could not be delivered: the form's controls go off, or come back. */
+  setSent(key, on) { this.forms.get(key)?.sent(on); }
+
+  /** Forget the forms of requests that are no longer waiting. */
+  keep(keys) {
+    const alive = new Set(keys);
+    for (const k of [...this.forms.keys()]) if (!alive.has(k)) this.forms.delete(k);
+  }
+
+  #questions(item) {
+    const el = mk('div', 'ask');
+    const picked = new Map();   // question -> Set of labels
+    const typed = new Map();    // question -> the viewer's own text
+    const controls = [];
+    const send = mk('button', 'btn sm primary', 'Send answers');
+    const refresh = () => { send.disabled = send.dataset.sent === '1' || answersOf(item.ask, picked, typed) === null; };
+
+    for (const q of item.ask.questions) {
+      picked.set(q.question, new Set());
+      const box = mk('div', 'ask-q');
+      const head = mk('div', 'ask-head');
+      if (q.header) head.append(mk('span', 'ask-tag', q.header));
+      head.append(mk('span', 'ask-text', q.question));
+      if (q.multiSelect) head.append(mk('span', 'sub', 'choose any'));
+      const opts = mk('div', 'ask-opts');
+      opts.setAttribute('role', q.multiSelect ? 'group' : 'radiogroup');
+      const buttons = [];
+      for (const o of q.options) {
+        const b = mk('button', 'ask-opt', o.label);
+        b.type = 'button';
+        b.title = o.description;
+        b.setAttribute('role', q.multiSelect ? 'checkbox' : 'radio');
+        b.setAttribute('aria-checked', 'false');
+        b.addEventListener('click', () => {
+          const set = picked.get(q.question);
+          if (q.multiSelect) { if (set.has(o.label)) set.delete(o.label); else set.add(o.label); } else {
+            // One answer: choosing an option takes the place of anything typed, and of the option chosen before.
+            set.clear(); set.add(o.label);
+            own.value = ''; typed.delete(q.question);
+          }
+          for (const x of buttons) x.el.setAttribute('aria-checked', String(set.has(x.label)));
+          refresh();
+        });
+        buttons.push({ el: b, label: o.label });
+        controls.push(b);
+        opts.append(b);
+      }
+      // The model's options do not always hold the answer: the viewer's own words are an answer too.
+      const own = mk('input', 'ask-own');
+      own.type = 'text';
+      own.placeholder = q.multiSelect ? 'Something else, as well…' : 'Something else…';
+      own.setAttribute('aria-label', `Your own answer to: ${q.question}`);
+      own.addEventListener('input', () => {
+        typed.set(q.question, own.value);
+        if (!q.multiSelect && own.value.trim()) {
+          picked.get(q.question).clear();
+          for (const x of buttons) x.el.setAttribute('aria-checked', 'false');
+        }
+        refresh();
+      });
+      controls.push(own);
+      box.append(head, opts, own);
+      el.append(box);
+    }
+
+    const acts = mk('div', 'ask-acts');
+    const dismiss = mk('button', 'btn sm', 'Dismiss');
+    dismiss.type = 'button';
+    dismiss.title = 'Refuse the question. The model is told nobody answered and may ask in words instead.';
+    send.type = 'button';
+    send.addEventListener('click', () => {
+      const answers = answersOf(item.ask, picked, typed);
+      if (answers) this.onDecide(item, 'answer', { answers });
+    });
+    dismiss.addEventListener('click', () => this.onDecide(item, 'deny', {}));
+    controls.push(dismiss);
+    acts.append(dismiss, send);
+    el.append(acts);
+    refresh();
+    return { el, sent: (on) => { send.dataset.sent = on ? '1' : '0'; for (const c of controls) c.disabled = on; refresh(); } };
+  }
+
+  #plan(item) {
+    const el = mk('div', 'ask');
+    const plan = mk('pre', 'ask-plan', item.ask.plan || 'The plan was not included in the request.');
+    plan.tabIndex = 0;
+    const acts = mk('div', 'ask-acts');
+    const keep = mk('button', 'btn sm', 'Keep planning');
+    keep.type = 'button';
+    keep.title = 'Refuse to leave plan mode. The model stays in it and goes on planning.';
+    keep.addEventListener('click', () => this.onDecide(item, 'deny', {}));
+    const controls = [keep];
+    acts.append(keep);
+    PLAN_CHOICES.forEach((c, i) => {
+      const b = mk('button', i === PLAN_CHOICES.length - 1 ? 'btn sm primary' : 'btn sm', c.label);
+      b.type = 'button';
+      b.title = c.title;
+      b.addEventListener('click', () => this.onDecide(item, 'plan', { mode: c.mode }));
+      controls.push(b);
+      acts.append(b);
+    });
+    el.append(plan, acts);
+    return { el, sent: (on) => { for (const c of controls) c.disabled = on; } };
+  }
+}

package/kit/studio/web/canvas.js

@@ -11,11 +11,12 @@
 //   A status is never colour alone: every dot has its word beside it.
 //   A poll that changed nothing writes nothing. Each element remembers what it last drew.
 import {
-  plan, sequence, crowdFolds, fitZoom, stateOf, ZOOM, GROUPINGS, DENSITIES, INFERRED_NOTE,
+  plan, sequence, crowdFolds, fitZoom, tallestFor, stateOf, ZOOM, GROUPINGS, DENSITIES, INFERRED_NOTE,
 } from './graph-plan.js';
 import { clock } from './timeline-plan.js';
 import { agentStatus } from './nav.js';
-import { roleName, shownType, hoverOf, orderTag } from './names.js';
+import { roleName, shownType, hoverOf, originOf, orderTag, modelOf, modelMix, modelFamily, modelBadge } from './names.js';
+import { fmtCount, fmtCost, COST_NOTE } from './usage.js';
 
 // How long an arriving wire takes to draw itself toward its new card. Short on purpose: this is a status panel,
 // and anything a viewer has to wait through is a cost they pay on every spawn.
@@ -87,12 +88,15 @@ export class Canvas {
     this.seq = new Map();        // id -> arrival number (see graph-plan.js)
     this.open = new Map();       // group id -> the viewer's own fold
     this.aside = false;          // an agent group opens into the next column, not downward
+    this.all = null;             // true after Expand all, false after Fold all: what an untouched group is
     // Ids that arrived on the last poll. A wire into one of these draws itself; every other wire is left alone,
     // so opening a group of 105 does not set 105 animations running at once.
     this.newborn = new Set();
     this.palette = { map: {} };
+    this.origins = null;
     this.icons = {};
     this.filter = null;          // statuses the page asked to isolate
+    this.modelFilter = null;     // a family of model the page asked to isolate
     this.waiting = new Set();    // agents parked on an approval
     this.sessionState = null;    // { word, tone } for the session card's pill
     this.focusId = null;         // show only this branch
@@ -162,7 +166,7 @@ export class Canvas {
     close.innerHTML = MARK.close;
     close.addEventListener('click', () => this.showSpend(false));
     head.append(close);
-    this.spendRows = mk('dl', 'cv-spend-rows');
+    this.spendRows = mk('div', 'cv-spend-rows');
     box.append(head, this.spendRows);
     this.spendOpen = readFlag('crewforth-studio-spend') !== 'closed';
     box.hidden = true;                       // until there is a session's usage to show
@@ -175,19 +179,61 @@ export class Canvas {
     this.spendEl.hidden = !on || !this.spendCount;
   }
 
-  /** The rows to show: [label, value, note], from usage.js `summaryRows`. An empty list hides the box. */
+  /**
+   * The rows to show, from usage.js `summaryRows`: { label, value, note, detail }. An empty list hides the box.
+   *
+   * A row with a `detail` is a control: a click opens the breakdown under it, and it stays open. Rows are kept and
+   * updated, never rebuilt — a live session's time changes every second, and a row replaced under a press would
+   * lose the click.
+   */
   setSpend(rows) {
-    const sig = JSON.stringify(rows ?? []);
+    const list = rows ?? [];
+    const sig = JSON.stringify(list);
     if (sig === this.spendSig) return;
     this.spendSig = sig;
-    this.spendCount = (rows ?? []).length;
-    this.spendRows.replaceChildren(...(rows ?? []).flatMap(([label, value, note]) => {
-      const dd = mk('dd', null, value ?? '');
-      dd.title = note ?? '';
-      const dt = mk('dt', null, label);
-      dt.title = note ?? '';
-      return [dt, dd];
-    }));
+    this.spendCount = list.length;
+    this.spendParts ??= new Map();
+    this.spendShown ??= new Set();
+    const alive = new Set();
+    for (const r of list) {
+      alive.add(r.label);
+      let p = this.spendParts.get(r.label);
+      if (!p) {
+        p = { row: mk('button', 'cv-spend-row'), label: mk('span', 'cv-spend-label'), value: mk('span', 'cv-spend-value'), detail: mk('dl', 'cv-spend-detail') };
+        p.row.type = 'button';
+        p.row.append(p.label, p.value);
+        p.row.addEventListener('click', () => {
+          if (!p.row.classList.contains('cv-spend-more')) return;
+          if (this.spendShown.has(r.label)) this.spendShown.delete(r.label); else this.spendShown.add(r.label);
+          p.detail.hidden = !this.spendShown.has(r.label);
+          p.row.setAttribute('aria-expanded', String(!p.detail.hidden));
+        });
+        this.spendParts.set(r.label, p);
+      }
+      const more = Boolean(r.detail?.length);
+      p.label.textContent = r.label;
+      p.value.textContent = r.value ?? '';
+      p.row.title = more ? `${r.note ?? ''}\nClick for the breakdown` : (r.note ?? '');
+      p.row.classList.toggle('cv-spend-more', more);
+      if (more) p.row.setAttribute('aria-expanded', String(this.spendShown.has(r.label))); else p.row.removeAttribute?.('aria-expanded');
+      p.detail.hidden = !more || !this.spendShown.has(r.label);
+      const dsig = JSON.stringify(r.detail ?? []);
+      if (p.dsig !== dsig) {
+        p.dsig = dsig;
+        p.detail.replaceChildren(...(r.detail ?? []).flatMap(([k, v]) => [mk('dt', null, k), mk('dd', null, v)]));
+      }
+    }
+    for (const [label, p] of this.spendParts) {
+      if (alive.has(label)) continue;
+      this.spendParts.delete(label);
+    }
+    // Which rows there are changes rarely (a session's first agent, its first timed turn); what they say changes
+    // every second. Only the first puts elements back into the box, and it puts the same elements back.
+    const order = list.map((r) => r.label).join('\u0000');
+    if (order !== this.spendOrder) {
+      this.spendOrder = order;
+      this.spendRows.replaceChildren(...list.flatMap((r) => { const p = this.spendParts.get(r.label); return [p.row, p.detail]; }));
+    }
     this.spendEl.hidden = !this.spendOpen || !this.spendCount;
   }
 
@@ -223,7 +269,7 @@ export class Canvas {
     const crew = mk('span', 'cv-tile cv-tile-sm');
     crew.innerHTML = MARK.kit;
     const a = mk('span', 'cv-legend-item');
-    a.append(this.legendBuiltin, mk('span', null, 'Claude Code built-in'));
+    a.append(this.legendBuiltin, mk('span', null, 'Claude Code agent'));
     const b = mk('span', 'cv-legend-item');
     b.append(crew, mk('span', null, 'Crewforth'));
     marks.append(a, b);
@@ -354,12 +400,20 @@ export class Canvas {
       drawn: this.drawn,
       focus: this.focusId ? (roleName(this.nodes.get(this.focusId)?.agentType) || this.focusId) : null,
       groups: (this.lastPlan?.items ?? []).filter((it) => it.kind === 'group').length,
+      // Whether there is anything left for each control to do. A group inside a folded one is not drawn, and
+      // opens with its holder: it is not something "Fold all" has left undone.
+      // How many cards the viewer has placed by hand: what "Reset layout" would forget.
+      moved: this.pinned.size,
+      canExpand: (this.lastPlan?.items ?? []).some((it) => it.kind === 'group' && !it.open),
+      canFold: (this.lastPlan?.items ?? []).some((it) => it.kind === 'group' && it.open),
     };
   }
 
   /* ---------------------------------------------------------- choices */
 
   setPalette(p) { if (p?.map) { this.palette = p; this.#redraw(); } }
+  /** Where the session's agents are defined (see `originOf`); null while it has not been read. */
+  setOrigins(o) { this.origins = o ?? null; this.#redraw(); }
 
   /** The marks that live in files. `builtin` is the markup of web/icons/builtin.svg. */
   setIcons(icons) {
@@ -376,6 +430,7 @@ export class Canvas {
     // Positions set by hand and folds chosen for one grouping say nothing about another.
     this.pinned.clear();
     this.open.clear();
+    this.all = null;
     this.sessionY = null;
     this.#crowdFold();
     this.#persist();
@@ -401,7 +456,17 @@ export class Canvas {
     this.#redraw();
   }
 
+  /** Show only the agents that ran on one family of model (`'opus'`), stepping the rest back. `null` shows all. */
+  setModelFilter(family) {
+    if ((family ?? null) === this.modelFilter) return;
+    this.modelFilter = family ?? null;
+    for (const el of this.els.values()) el.sig = null;
+    for (const el of this.cellEls.values()) el.sig = null;
+    if (this.lastPlan) this.#redraw();
+  }
+
   dimmed(n) {
+    if (n?.kind === 'agent' && this.modelFilter && modelFamily(n.model) !== this.modelFilter) return true;
     if (!this.filter || n?.kind !== 'agent') return false;
     if (this.filterKeepsWaiting && this.waiting.has(n.id)) return false;
     return !this.filter.has(n.status);
@@ -432,24 +497,23 @@ export class Canvas {
     return this.#statusOf(n);
   }
 
-  expandAll() {
-    // Beside itself an agent group opens one at a time, by its own card; "all" is then every other kind of group.
-    const mine = (it) => it.kind === 'group' && !(this.aside && it.type === 'type');
-    for (const it of this.lastPlan?.items ?? []) if (mine(it)) this.open.set(it.id, true);
-    // Opening one level can reveal groups inside it; open those too.
-    for (let i = 0; i < 4; i += 1) {
-      const p = this.#plan();
-      let more = false;
-      for (const it of p.items) if (mine(it) && !it.open) { this.open.set(it.id, true); more = true; }
-      if (!more) break;
-    }
-    this.sessionY = null;
-    this.#persist();
-    this.#redraw({ fit: true });
-  }
+  /**
+   * Open every group, of every kind, at every depth — and keep doing so: a group that arrives later arrives open.
+   * What the viewer then folds by hand stays folded.
+   *
+   * It used to pass over the cards that stand for agents of one type whenever such a card opens beside itself,
+   * on the reasoning that those open one at a time. That left "Expand all" doing nothing in a session whose
+   * only groups were of that kind.
+   */
+  expandAll() { this.#setAll(true); }
 
-  foldAll() {
-    for (const it of this.lastPlan?.items ?? []) if (it.kind === 'group') this.open.set(it.id, false);
+  /** Fold every group, and keep doing so for the ones that arrive later. */
+  foldAll() { this.#setAll(false); }
+
+  #setAll(open) {
+    this.all = open;
+    // Every group follows the one choice; what was opened or folded by hand before it is forgotten.
+    this.open.clear();
     this.sessionY = null;
     this.#persist();
     this.#redraw({ fit: true });
@@ -462,20 +526,39 @@ export class Canvas {
     this.#redraw({ fit: true });
   }
 
-  /** Forget every hand-placed card and lay the graph out again. */
+  /**
+   * Forget every hand-placed card and lay the graph out again. Only the positions go: what is selected, what is
+   * filtered, the zoom, and which groups are open stay as they are. This session's saved layout loses its
+   * positions with it, and no other session's is touched.
+   * @returns what was forgotten, for `restoreLayout` to put back; null when no card had been moved
+   */
   resetLayout() {
+    if (!this.pinned.size) return null;
+    const was = { pins: new Map(this.pinned), sessionY: this.sessionY, session: this.sessionKey, group: this.group };
     this.pinned.clear();
     this.sessionY = null;
-    this.touched = false;
     this.#persist();
-    this.#redraw({ fit: true });
+    this.#redraw();
+    this.onChange?.(this.state());
+    return was;
+  }
+
+  /** Put back the positions `resetLayout` returned. Nothing happens if the session or the grouping has changed. */
+  restoreLayout(was) {
+    if (!was || was.session !== this.sessionKey || was.group !== this.group) return false;
+    this.pinned = new Map(was.pins);
+    this.sessionY = was.sessionY;
+    this.#persist();
+    this.#redraw();
+    this.onChange?.(this.state());
+    return true;
   }
 
   /* ----------------------------------------------------------- layout */
 
   #crowdFold() {
     const nodes = this.#visibleNodes();
-    for (const id of crowdFolds(nodes, { group: this.group, density: this.density, seq: this.seq })) {
+    for (const id of crowdFolds(nodes, { group: this.group, density: this.density, seq: this.seq, tallest: this.#tallest() })) {
       if (!this.open.has(id)) this.open.set(id, false);
     }
   }
@@ -494,13 +577,22 @@ export class Canvas {
   #plan() {
     return plan(this.#visibleNodes(), {
       group: this.group, density: this.density, seq: this.seq, open: this.open, pinned: this.pinned, sessionY: this.sessionY,
-      aside: this.aside,
+      aside: this.aside, all: this.all, tallest: this.#tallest(),
     });
   }
 
+  /** How tall a picture may be here before Auto turns cards into chips: what this pane fits, read off the pane. */
+  #tallest() {
+    this.paneHeight = this.root.getBoundingClientRect?.().height ?? 0;
+    return tallestFor(this.paneHeight);
+  }
+
   /** Re-fit only while the view is still the canvas's own. Once the viewer has panned, zoomed or placed a card,
    *  moving the view under them is not helpful. */
   fitIfUntouched() {
+    // The pane changed size: what fits in it may have changed with it, and so may Auto's answer.
+    const h = this.root.getBoundingClientRect?.().height ?? 0;
+    if (this.lastPlan && this.density === 'auto' && tallestFor(h) !== tallestFor(this.paneHeight ?? 0)) this.#redraw();
     if (!this.touched && !this.pinned.size) this.fit();
   }
 
@@ -522,6 +614,7 @@ export class Canvas {
     if (this.sessionKey === sessionId) return;
     this.sessionKey = sessionId;
     this.nodes.clear(); this.pos.clear(); this.pinned.clear(); this.open.clear(); this.seq.clear();
+    this.all = null;
     this.els.clear(); this.cellEls.clear(); this.nodeLayer.replaceChildren(); this.edgeG.replaceChildren();
     this.edgeEls.clear(); this.newborn.clear();
     this.mapRects.clear(); this.mapBoxes.replaceChildren();
@@ -667,7 +760,11 @@ export class Canvas {
       row.append(p.tile, mk('span', 'cv-title', 'Session'), mk('span', 'cv-fill'), p.pill.el);
       p.name = mk('div', 'cv-name cv-indent');
       p.sub = mk('div', 'cv-sub cv-indent');
-      el.append(row, p.name, p.sub);
+      // What it has running in the background takes a line of its own, when there is any: on the line above it
+      // ran out of the card.
+      p.bg = mk('div', 'cv-sub cv-indent cv-bg');
+      p.bg.hidden = true;
+      el.append(row, p.name, p.sub, p.bg);
     } else if (it.kind === 'group') {
       el.classList.add('cv-group');
       p.tile = mk('span', 'cv-tile');
@@ -685,7 +782,10 @@ export class Canvas {
       } else {
         const row = mk('div', 'cv-row cv-indent');
         row.append(p.bar, p.count);
-        el.append(p.head, row);
+        // What its members add up to, and what they ran on. At compact density the card has no room for them.
+        p.totals = mk('div', 'cv-sub cv-indent cv-totals');
+        p.mix = mk('div', 'cv-sub cv-indent cv-mix');
+        el.append(p.head, row, p.totals, p.mix);
       }
       p.fold.addEventListener('click', (e) => { e.stopPropagation(); this.toggle(it.id); });
     } else if (it.compact) {
@@ -694,8 +794,9 @@ export class Canvas {
       p.order = mk('span', 'cv-order');
       p.name = mk('span', 'cv-name');
       p.task = mk('span', 'cv-task');
+      p.model = mk('span', 'cv-model');
       p.word = mk('span', 'cv-word');
-      el.append(p.dot, p.order, p.name, p.task, p.word);
+      el.append(p.dot, p.order, p.name, p.task, p.model, p.word);
     } else {
       p.tile = mk('span', 'cv-tile');
       p.name = mk('span', 'cv-name');
@@ -708,7 +809,12 @@ export class Canvas {
       p.task = mk('span', 'cv-task');
       const under = mk('div', 'cv-under cv-indent');
       under.append(p.task, p.order);
-      el.append(row, under);
+      // The third line: what it ran on, how long it took and what it spent.
+      p.model = mk('span', 'cv-model');
+      p.facts = mk('span', 'cv-facts');
+      const facts = mk('div', 'cv-under cv-indent cv-third');
+      facts.append(p.model, p.facts);
+      el.append(row, under, facts);
     }
     el.parts = p;
   }
@@ -731,28 +837,33 @@ export class Canvas {
   }
 
   /**
-   * Whose agent this is. The palette says where a type was declared; a type it does not know is drawn as unknown
-   * rather than guessed into one camp or the other, and a palette that could not be read makes every agent
-   * unknown, with the reason.
+   * Whose agent this is, and there are two answers. Crewforth's: named `crew-…` and in its agents directory,
+   * which is what the palette's map holds. Everything else is a Claude Code agent — built in, or defined by the
+   * project, the user or a plugin; this panel keeps no list of those, so a type Claude Code adds tomorrow is
+   * drawn like the ones it has today.
+   *
+   * One thing can be unknown: whether a `crew-…` agent is Crewforth's, when its agents could not be read.
+   * It is then drawn with the common mark and says what was not measured. A type that is not `crew-…` needs no
+   * palette to be placed.
    */
   #identity(n) {
-    if (this.palette.measured === false) {
-      return { source: 'unknown', title: `Agent identity not measured — ${this.palette.reason ?? 'no reason given'}` };
+    const type = n?.agentType ?? '';
+    if (this.palette.map?.[type]?.source === 'kit') return { source: 'kit', title: 'Crewforth agent' };
+    if (this.palette.measured === false && type.startsWith('crew-')) {
+      return { source: 'agent', title: `Agent identity not measured — ${this.palette.reason ?? 'no reason given'}` };
     }
-    const source = this.palette.map?.[n.agentType]?.source ?? null;
-    if (source === 'kit') return { source: 'kit', title: 'Crewforth agent' };
-    if (source === 'builtin') return { source: 'builtin', title: 'Claude Code built-in agent' };
-    return { source: 'unknown', title: 'Not declared by Crewforth or by Claude Code — an agent type this panel does not recognise' };
+    return { source: 'agent', title: 'Claude Code agent', where: originOf(type, this.origins) };
   }
 
   #fillTile(tile, n) {
     const who = this.#identity(n);
-    const sig = `${who.source}|${who.title}|${this.icons.builtin ? 1 : 0}`;
+    const sig = `${who.source}|${who.title}|${who.where ?? ''}|${this.icons.builtin ? 1 : 0}`;
     if (tile.sig === sig) return who;
     tile.sig = sig;
     tile.innerHTML = who.source === 'kit' ? MARK.kit : (this.icons.builtin ?? '');
     tile.dataset.source = who.source;
-    tile.title = who.title;
+    // Whose it is, and under that where it is defined, once that has been read.
+    tile.title = who.where ? `${who.title}\n${who.where}` : who.title;
     return who;
   }
 
@@ -769,12 +880,16 @@ export class Canvas {
     p.pill.dot.dataset.tone = st?.tone ?? 'none';
     p.pill.word.textContent = st?.word ?? '';
     p.name.textContent = n.gitBranch || shortPath(n.cwd) || n.sessionId || '';
+    // Cut to the card's width; hovering says it whole.
+    p.name.title = p.name.textContent;
     const bits = [`${n.turns ?? 0} ${n.turns === 1 ? 'turn' : 'turns'}`];
     if (n.tokens != null) bits.push(`${fmtTokens(n.tokens)} ctx`);
-    // What the session has running that is not an agent: commands sent to the background.
-    if (bg) bits.push(`${bg} in background`);
     p.sub.textContent = bits.join(' · ');
-    p.sub.title = bg ? n.backgroundNow.map((c) => `In the background: ${c.toolName}${c.detail ? ` · ${c.detail}` : ''}`).join('\n') : '';
+    p.sub.title = p.sub.textContent;
+    // What the session has running that is not an agent: commands sent to the background.
+    p.bg.hidden = !bg;
+    p.bg.textContent = bg ? `${bg} in background` : '';
+    p.bg.title = bg ? n.backgroundNow.map((c) => `In the background: ${c.toolName}${c.detail ? ` · ${c.detail}` : ''}`).join('\n') : '';
     el.title = 'Click to inspect this session';
     el.setAttribute('aria-label', `Session, ${st?.word ?? 'state not measured'}, ${p.name.textContent}, ${p.sub.textContent}`);
   }
@@ -787,7 +902,9 @@ export class Canvas {
     const dim = this.dimmed(n);
     // Its place in the order the session called its agents, and when: "#3 · 09:14". A chip has room for the number.
     const tag = orderTag(n, compact ? null : clock);
-    const sig = JSON.stringify([type, task, st.word, st.tone, st.state, who.source, dim, n.status, tag, after]);
+    const mdl = modelOf(n);
+    const facts = compact ? '' : factsOf(n);
+    const sig = JSON.stringify([type, task, st.word, st.tone, st.state, who.source, dim, n.status, tag, after, modelBadge(n), facts]);
     if (el.sig === sig) return;
     el.sig = sig;
     const p = el.parts;
@@ -804,6 +921,12 @@ export class Canvas {
     p.task.title = task;
     p.order.textContent = tag;
     p.order.hidden = !tag;
+    // The model it ran on, in full at every density: on a chip it is the task that gives way, not the model.
+    p.model.textContent = modelBadge(n);
+    p.model.hidden = !mdl.ran;
+    p.model.title = mdl.title;
+    p.model.dataset.differs = String(mdl.differs);
+    if (!compact) { p.facts.textContent = facts; p.facts.title = factsTitle(n); }
     p.order.title = tag ? `Called ${orderTag(n, clock)} by the session` : '';
     // In the Order view: what had reported before this wave was called. A reading of the order of events.
     el.title = after?.length ? `Called after ${after.join(', ')} reported.\n${INFERRED_NOTE}` : '';
@@ -824,7 +947,7 @@ export class Canvas {
     const p = el.parts;
     const counts = it.counts;
     const says = Object.entries(counts).map(([s, c]) => `${c} ${agentStatus(s).word}`).join(' · ');
-    const sig = JSON.stringify([it.label, says, it.open, it.boxed, it.type, it.status, it.first?.order ?? null]);
+    const sig = JSON.stringify([it.label, says, it.open, it.boxed, it.type, it.status, it.first?.order ?? null, it.compact, it.sum, modelMix(it.members)]);
     if (el.sig !== sig) {
       el.sig = sig;
       el.dataset.state = stateOf(it.status);
@@ -857,7 +980,11 @@ export class Canvas {
         return seg;
       }));
       p.bar.title = says;
-      if (!it.boxed) p.count.textContent = says;
+      // Beside the bar: how the members went — or, at compact density where the card has no line for it, the
+      // models they ran on, with how they went left to the bar and its tooltip.
+      const mix = modelMix(it.members).replace(/, /g, ' \u00b7 ');
+      if (!it.boxed) { p.count.textContent = it.compact && mix ? mix : says; p.count.title = it.compact && mix ? `${says}\nThe models its agents ran on` : ''; }
+      if (!it.boxed) this.#fillTotals(p, it);
       el.title = it.boxed ? '' : (it.open ? 'Click to fold' : `Click to show ${it.members.length} agents`);
       el.setAttribute('aria-label', `${said}, ${says}, ${it.open ? 'open' : 'folded'}`);
     }
@@ -911,13 +1038,30 @@ export class Canvas {
       c.parts.name.textContent = text;
       c.parts.order.textContent = ctag;
       c.parts.order.hidden = !ctag;
-      c.title = hoverOf(n);
+      c.title = [hoverOf(n), [modelOf(n).ran, factsOf(n)].filter(Boolean).join(' \u00b7 ')].filter(Boolean).join('\n');
       c.parts.dot.dataset.tone = st.tone ?? 'none';
       c.parts.word.textContent = st.word;
       c.setAttribute('aria-label', `${shownType(n)}, ${st.word}${n.description ? `, ${n.description}` : ''} (${who.title})`);
     }
   }
 
+  /** A group as one card: the time, the tokens and the estimate its members add up to, and the models they ran on. */
+  #fillTotals(p, it) {
+    const s = it.sum ?? {};
+    p.totals.hidden = Boolean(it.compact);
+    p.mix.hidden = Boolean(it.compact);
+    if (it.compact) return;
+    p.totals.textContent = [
+      s.timed ? fmtDuration(s.durationMs) : null,
+      s.counted ? `${fmtCount(s.fresh)} new` : null,
+      s.counted ? `${fmtCount(s.cacheRead)} cache` : null,
+      s.counted ? fmtCost(s.cost) : null,
+    ].filter(Boolean).join(' \u00b7 ');
+    p.totals.title = `${it.members.length} calls. Time, new tokens, tokens read from the cache, and cost: ${COST_NOTE}`;
+    p.mix.textContent = modelMix(it.members);
+    p.mix.title = 'The models its agents ran on';
+  }
+
   /** What an inferred wire says: on hover that it is an inference, and once per reporter, in words beside it. */
   #edgeWords(path, e, c) {
     const title = e.title ?? '';
@@ -1102,7 +1246,8 @@ export class Canvas {
     if (!it || it.kind !== 'group') return;
     this.open.set(groupId, !it.open);
     // Beside itself, one agent's tasks at a time: a second column of them from two groups reads as one list.
-    if (!it.open && it.type === 'type' && this.aside) {
+    // After "Expand all" that is not the rule: every group is open because the viewer asked for all of them.
+    if (!it.open && it.type === 'type' && this.aside && this.all !== true) {
       for (const other of this.lastPlan.items) if (other.kind === 'group' && other.type === 'type' && other.id !== groupId) this.open.set(other.id, false);
     }
     this.sessionY = null;
@@ -1298,6 +1443,7 @@ export class Canvas {
         group: this.group,
         pins: Object.fromEntries([...this.pinned].map(([id, p]) => [id, [p.x, p.y]])),
         open: Object.fromEntries(this.open),
+        all: this.all,
       }));
     } catch { /* kept for this page view only */ }
   }
@@ -1311,6 +1457,7 @@ export class Canvas {
       if (GROUPINGS.includes(saved.group)) this.group = saved.group;
       for (const [id, [x, y]] of Object.entries(saved.pins ?? {})) this.pinned.set(id, { x, y });
       for (const [id, on] of Object.entries(saved.open ?? {})) this.open.set(id, Boolean(on));
+      this.all = typeof saved.all === 'boolean' ? saved.all : null;
     } catch { /* start from the canvas's own layout */ }
   }
 }
@@ -1330,6 +1477,20 @@ function readPref(key, allowed, fallback) {
   return allowed.includes(v) ? v : fallback;
 }
 
+/** An agent's third line: how long it took and what it spent. */
+function factsOf(n) {
+  return [
+    n.durationMs != null ? fmtDuration(n.durationMs) : null,
+    n.usage ? `${fmtCount(n.usage.tokens.fresh)} new` : null,
+    n.usage ? fmtCost(n.usage.cost) : null,
+  ].filter(Boolean).join(' \u00b7 ');
+}
+function factsTitle(n) {
+  if (!n.usage) return '';
+  const t = n.usage.tokens;
+  return `New tokens ${fmtCount(t.fresh)} (input ${fmtCount(t.input)}, output ${fmtCount(t.output)}, cache write ${fmtCount(t.cacheWrite)}); read from cache ${fmtCount(t.cacheRead)}\n${COST_NOTE}`;
+}
+
 function fmtTokens(t) {
   if (t == null) return '';
   if (t < 1000) return `${t}`;