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

package/kit/studio/web/list.js

@@ -4,8 +4,9 @@
 // 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';
+import { AskForms } from './ask.js';
 
 function mk(tag, cls, text) {
   const n = document.createElement(tag);
@@ -34,11 +35,27 @@ export class List {
     this.folded = new Map();
     this.selected = null;
     this.busy = new Set();
+    this.forms = new AskForms((item, verdict, extra) => {
+      if (this.busy.has(item.key)) return;
+      this.busy.add(item.key);
+      this.forms.setSent(item.key, true);
+      this.hooks.onDecide?.(item, verdict, extra);
+    });
     this.now = () => Date.now();
     this.root.classList.add('ls');
   }
 
-  setSession(id) { if (id !== this.current) { this.current = id; this.nodes = []; this.folded = new Map(); this.selected = null; this.render(); } }
+  setSession(id) { if (id !== this.current) { this.current = id; this.nodes = []; this.folded = new Map(); this.all = null; this.selected = null; this.render(); } }
+
+  /** Open every section; one that appears later appears open. What is folded by hand afterwards stays folded. */
+  expandAll() { this.all = true; this.folded = new Map(); this.render(); this.hooks.onFold?.(); }
+  /** Fold every section that can fold. "Needs you" cannot: it is what the view is for. */
+  foldAll() { this.all = false; this.folded = new Map(); this.render(); this.hooks.onFold?.(); }
+  /** Whether there is anything left for each of the two to do. */
+  foldState() {
+    const can = (this.lastSections ?? []).filter((s) => s.foldable);
+    return { groups: can.length, canExpand: can.some((s) => s.folded), canFold: can.some((s) => !s.folded) };
+  }
   setNodes(nodes) { this.nodes = nodes ?? []; this.render(); }
 
   setQueue(queue) {
@@ -50,7 +67,7 @@ export class List {
   select(id) { this.selected = id; this.render(); }
 
   /** An answer did not reach the server: the buttons come back. */
-  release(key) { this.busy.delete(key); this.render(); }
+  release(key) { this.busy.delete(key); this.forms.setSent(key, false); this.render(); }
 
   /** Once a second: the countdowns and the running times move. */
   tick() { if (!this.root.hidden && (this.queue.length || this.nodes.some((n) => n.status === 'running'))) this.render(); }
@@ -59,7 +76,9 @@ export class List {
     if (this.root.hidden) return;
     if (this.press.defer()) return;
     const now = this.now();
-    const list = sections(this.nodes, { queue: this.queue, current: this.current, folded: this.folded, now });
+    this.forms.keep(this.queue.map((r) => r.key));
+    const list = sections(this.nodes, { queue: this.queue, current: this.current, folded: this.folded, all: this.all ?? null, now });
+    this.lastSections = list;
     if (!list.length) {
       const empty = mk('div', 'ls-empty');
       empty.append(mk('strong', null, 'No agents yet'),
@@ -86,7 +105,7 @@ export class List {
       head.dataset.key = `sec:${s.key}`;
       head.setAttribute('aria-expanded', String(!s.folded));
       head.append(mk('span', 'row-fill'), mk('span', 'sub', s.folded ? 'show' : 'hide'));
-      head.addEventListener('click', () => { this.folded.set(s.key, !s.folded); this.render(); });
+      head.addEventListener('click', () => { this.folded.set(s.key, !s.folded); this.render(); this.hooks.onFold?.(); });
     }
     sec.append(head);
     for (const item of s.cards) sec.append(this.#card(item, now));
@@ -106,7 +125,7 @@ export class List {
     clock.setAttribute('aria-label', r.known ? `Auto-deny in ${r.left} seconds` : 'Time left not measured');
     head.append(who, mk('span', 'row-fill'), clock);
     card.append(head);
-    if (item.detail) card.append(mk('pre', 'ls-cmd', item.detail));
+    if (item.detail && !item.ask) card.append(mk('pre', 'ls-cmd', item.detail));
     // A request from another session says which, and goes there.
     if (item.sessionId !== this.current) {
       const where = mk('button', 'ls-where', `in ${item.sessionName}`);
@@ -114,6 +133,9 @@ export class List {
       where.addEventListener('click', () => this.hooks.onLocate?.(item));
       card.append(where);
     }
+    // A question or a plan carries its own form instead of the three answers.
+    const form = this.forms.get(item);
+    if (form) { card.append(form); return card; }
     const sent = this.busy.has(item.key);
     const acts = mk('div', 'ls-acts');
     for (const [verdict, label, cls] of [
@@ -147,8 +169,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/models-plan.js

@@ -0,0 +1,167 @@
+// What the Models view and the inspector say about which model did which work. No page in it.
+//
+// The numbers are Crewforth's own record (server/lib/model-outcomes.js reads it); this file turns them into words.
+// A rate with nothing under it is not written as zero, and a call whose verify command gave no verdict is shown
+// apart from the ones that passed or failed.
+import { roleName, modelName } from './names.js';
+import { fmtCost, fmtCount } from './usage.js';
+
+const TIER = { haiku: 'Haiku', sonnet: 'Sonnet', opus: 'Opus', fable: 'Fable' };
+export const tierWord = (t) => TIER[t] ?? (t ? String(t) : 'no model');
+const pct = (r) => `${Math.round(r * 100)}%`;
+const plural = (n, word, many = `${word}s`) => `${n} ${n === 1 ? word : many}`;
+
+/**
+ * The task card a crew agent's work starts with: three lines at the top of its task text.
+ *   files: what it may touch · change: the kind of change · verify: the command that checks it, or none
+ * Returns null when the text does not begin with a card; a card with a line missing keeps the others.
+ */
+export function cardOf(prompt) {
+  if (typeof prompt !== 'string') return null;
+  const card = {};
+  for (const line of prompt.split('\n').slice(0, 12)) {
+    const m = line.match(/^\s*(files|change|verify)\s*:\s*(.*)$/i);
+    if (m && card[m[1].toLowerCase()] === undefined) card[m[1].toLowerCase()] = m[2].trim();
+  }
+  return Object.keys(card).length ? { files: card.files ?? null, change: card.change ?? null, verify: card.verify ?? null } : null;
+}
+
+const VERIFY_TONE = { pass: 'pass', fail: 'fail' };
+const VERIFY_SAYS = { none: 'no verify command', blocked: 'verify not run: the command was not allowed', timeout: 'verify not finished: the command ran out of time' };
+
+/** The card as the inspector lists it: the three lines, each kept as it was written. */
+export function cardLines(card, row) {
+  const out = [];
+  if (card?.files) out.push({ label: 'files', text: card.files });
+  if (card?.change || row?.change) out.push({ label: 'change', text: row?.change ?? card.change });
+  if (card?.verify) out.push({ label: 'verify', text: card.verify });
+  return out;
+}
+
+function stepOf(r, again) {
+  const on = r.ranOn ? modelName(r.ranOn) : tierWord(r.model);
+  const bits = [again ? `Re-run on ${on}` : `Ran on ${on}`];
+  if (r.fixes > 0) bits.push(`fixed ${r.fixes === 1 ? 'once' : `${r.fixes} times`} inside the agent`);
+  // A verdict is a tag (pass, fail); anything else is said in words, because it is no verdict.
+  const tone = VERIFY_TONE[r.verify] ?? null;
+  if (!tone) bits.push(VERIFY_SAYS[r.verify] ?? `verify ${r.verify}`);
+  return { text: bits.join(' \u00b7 '), verify: tone ? r.verify : null, tone, escalated: again };
+}
+
+/**
+ * How the work went, as steps: the earlier calls of the same card, then this one. `row` is Crewforth's line for
+ * the agent with `before` (see server/lib/model-outcomes.js), or null when it has none: it has not stopped, or it
+ * is not a crew agent.
+ * @returns { risk, steps: [{ text, verify, tone, escalated }], note }
+ */
+export function workSteps(row) {
+  if (!row) return { risk: null, steps: [], note: 'Not recorded yet: the line is written when the agent stops.' };
+  const steps = [...(row.before ?? []).map((r) => stepOf(r, false)), stepOf(row, Boolean(row.escalatedFrom))];
+  if (row.escalatedFrom && !(row.before ?? []).length) {
+    steps.unshift({ text: `An earlier call on ${tierWord(row.escalatedFrom)} did not pass; its line is not in the record`, verify: null, tone: null, escalated: false });
+  }
+  return { risk: row.risk ?? null, steps, note: row.escalatedFrom ? 'A re-run with the same or a lower model is refused by the gate.' : null };
+}
+
+/**
+ * What is said about a class's floor. Raised and standing: the tag `raised` and what raised it. Raised and then
+ * lowered by the user: the tag `lowered`, and both facts, because the raise is still on record and the floor that
+ * holds is the lowered one. `floorTag` is the tag's word, or null when the class has no floor on record.
+ */
+export function floorWords(floor) {
+  if (!floor) return { floorTag: null, raised: null, raisedWhy: '' };
+  const why = `Raised to ${tierWord(floor.model)} automatically: ${floor.notFirstTry} of ${floor.calls ?? '?'} calls one model down did not pass first time`;
+  if (!floor.lowered) return { floorTag: 'raised', raised: tierWord(floor.model), raisedWhy: why };
+  return {
+    floorTag: 'lowered',
+    raised: null,
+    raisedWhy: `${why}. You lowered it to ${tierWord(floor.lowered.to)} on ${String(floor.lowered.ts).slice(0, 10)}; its outcomes are counted afresh from then.`,
+  };
+}
+
+/**
+ * The cost cell of a class. `cost` is { cost, costed, runs } for it, or null while costs have not been read.
+ * Every call priced: the estimate. Some priced: a floor, marked as one, with how many it is the sum of
+ * ("\u2265$0.75 \u00b7 2/7"), because a sum of two calls must not be read as the cost of seven. None: a dash.
+ */
+export function costCell(cost, runs) {
+  if (!cost) return { cost: '\u2026', costNote: 'Reading what this class cost\u2026', partial: false };
+  if (!cost.costed) return { cost: '\u2014', costNote: 'No agent of this class has a transcript on this machine that could be priced', partial: false };
+  const usd = fmtCost(cost.cost);
+  if (cost.costed >= runs) return { cost: usd, costNote: `All ${runs} ${runs === 1 ? 'task' : 'tasks'} priced, at API list price. An estimate: what a subscription is charged is not known here.`, partial: false };
+  return {
+    cost: `\u2265${usd.replace(/^~/, '')} \u00b7 ${cost.costed}/${runs}`,
+    costNote: `At least this much: ${cost.costed} of ${runs} tasks could be priced; the others have no transcript on this machine. At API list price.`,
+    partial: true,
+  };
+}
+
+/** One class as the view's row: who and what kind of change, how risky, what ran it, and how it went. */
+export function classRow(c, cost = null) {
+  const models = Object.entries(c.models ?? {}).sort((a, b) => b[1].runs - a[1].runs).map(([t, m]) => `${tierWord(t)} ${m.runs}`).join(' \u00b7 ');
+  const apart = [
+    c.notVerified?.none ? `${c.notVerified.none} with no verify command` : null,
+    c.notVerified?.blocked ? `${c.notVerified.blocked} not run` : null,
+    c.notVerified?.timeout ? `${c.notVerified.timeout} timed out` : null,
+  ].filter(Boolean);
+  return {
+    key: c.key,
+    who: roleName(c.agent),
+    real: c.agent,
+    change: c.change,
+    risk: c.risk,
+    models,
+    ranOn: Object.keys(c.ranOn ?? {}).map(modelName).join(', '),
+    // Held one model up by the record of outcomes: said beside the model, with the count that did it.
+    ...floorWords(c.floor),
+    tasks: String(c.runs),
+    // The rate and what it is a rate of: "83%" of five calls is not "83%" of five hundred.
+    firstTry: c.firstTryRate === null ? '\u2014' : pct(c.firstTryRate),
+    firstTryOf: c.firstTryRate === null ? 'No call of this class got a verdict from its verify command' : `${c.firstTry} of ${c.verified} verified calls passed the first time`,
+    rate: c.firstTryRate,
+    notVerified: apart.join(' \u00b7 '),
+    after: [c.fixed ? `${c.fixed} fixed by the agent` : null, c.failed ? `${c.failed} failed` : null].filter(Boolean).join(' \u00b7 '),
+    escalated: String(c.escalated ?? 0),
+    ...costCell(cost, c.runs),
+  };
+}
+
+/**
+ * The command that lowers one hold: Crewforth's own, typed by the user in their own session. Studio copies it and
+ * runs nothing. Three words, the class as Crewforth's record names it; the model is not in it, because the command
+ * lowers by one step and works that out itself. Null when a word is not one the command could take.
+ */
+export function lowerCommand(s) {
+  const words = [s?.agent, s?.change, s?.risk];
+  return words.every((w) => typeof w === 'string' && /^[A-Za-z0-9._-]+$/.test(w)) ? `/crew-loosen ${words.join(' ')}` : null;
+}
+
+/** A hold that could be lowered, in words. */
+export function suggestionText(s) {
+  return {
+    title: `${roleName(s.agent)} \u00b7 ${s.change}`,
+    says: `passed ${s.passed} of ${s.passed} on ${tierWord(s.from)}: try ${tierWord(s.to)} for this class?`,
+    how: 'Yours to decide: send the command in your own session. Studio does not write it.',
+    command: lowerCommand(s),
+  };
+}
+
+/** What the view says when there is nothing to list. */
+export function emptyNote(data) {
+  if (!data) return 'Reading the record…';
+  if (data.measured === false) return `Not measured — ${data.reason}`;
+  if (!data.classes?.length) return 'The record is there and has no line yet.';
+  return null;
+}
+
+export const SOURCE = 'Source: .claude/state/model-outcomes.tsv';
+export const LOWER_RULE = 'Lowering a floor is never automatic. Raising it is.';
+
+/** What was read for cost, for the header's tooltip; null before it has been. */
+export const costLine = (costs) => (costs?.measured ? `${fmtCount(costs.sessionsRead ?? 0)} ${costs.sessionsRead === 1 ? 'session' : 'sessions'} read for cost` : null);
+
+export const totalsLine = (data) => [
+  `${plural(data.rows ?? 0, 'task')} in ${plural(data.classes?.length ?? 0, 'class', 'classes')}`,
+  data.dropped ? `${data.dropped} ${data.dropped === 1 ? 'line' : 'lines'} not read (${Object.entries(data.droppedWhy ?? {}).map(([why, n]) => `${n}: ${why}`).join('; ') || 'no reason kept'})` : null,
+  data.truncated ? 'only the end of a long record was read' : null,
+].filter(Boolean).join(' · ');

package/kit/studio/web/models.js

@@ -0,0 +1,127 @@
+// The Models view: which model each kind of task needs in this project, from Crewforth's record of outcomes.
+//
+// A class is an agent, a kind of change and a risk. Each line says what ran it, how many tasks, how many of the
+// verified ones passed the first time, how many were repeated one model up, and what the agents' tokens come to.
+// Under the table: the holds the record could let go of. They are shown, not acted on: the one button copies
+// Crewforth's command for it and lowers nothing.
+import { classRow, suggestionText, emptyNote, totalsLine, costLine, SOURCE, LOWER_RULE } from './models-plan.js';
+
+function mk(tag, cls, text) {
+  const n = document.createElement(tag);
+  if (cls) n.className = cls;
+  if (text != null) n.textContent = text;
+  return n;
+}
+
+const COLUMNS = [['Agent · change', ''], ['Risk', ''], ['Model', ''], ['Tasks', 'mv-num'], ['First try', 'mv-num'], ['Escalated', 'mv-num'], ['Est. cost', 'mv-num']];
+
+export class Models {
+  /** @param hooks.onCopy(text) put the command on the clipboard */
+  constructor(root, hooks = {}) {
+    this.root = root;
+    this.hooks = hooks;
+    this.data = null;
+    this.costs = null;
+    this.root.classList.add('mv');
+  }
+
+  setData(data) { this.data = data; this.render(); }
+  /** What the classes cost, read apart and less often: { measured, costs: { classKey: { cost, costed, runs } } }. */
+  setCosts(costs) { this.costs = costs; this.render(); }
+
+  render() {
+    if (this.root.hidden) return;
+    const note = emptyNote(this.data);
+    if (note) { this.root.replaceChildren(mk('div', 'mv-empty', note)); return; }
+    const d = this.data;
+    const pane = mk('section', 'mv-pane');
+    const head = mk('header', 'mv-head');
+    const source = mk('span', 'sub', SOURCE);
+    source.title = [totalsLine(d), costLine(this.costs)].filter(Boolean).join(' \u00b7 ');
+    // Lines the hooks could not have written are not counted, and that is said where the count is.
+    if (d.dropped) source.textContent = `${SOURCE} \u00b7 ${d.dropped} ${d.dropped === 1 ? 'line' : 'lines'} not read`;
+    head.append(mk('h2', 'mv-title', 'Which model each kind of task needs'), mk('span', 'row-fill'), source);
+    pane.append(head);
+
+    const scroll = mk('div', 'mv-scroll');
+    const table = mk('table', 'mv-table');
+    const hr = mk('tr');
+    for (const [h, cls] of COLUMNS) { const th = mk('th', cls, h); th.scope = 'col'; hr.append(th); }
+    const thead = mk('thead'); thead.append(hr);
+    const tbody = mk('tbody');
+    const raisedNotes = [];
+    for (const c of d.classes) {
+      const r = classRow(c, this.costs?.measured ? (this.costs.costs?.[c.key] ?? { cost: 0, costed: 0, runs: c.runs }) : null);
+      const tr = mk('tr');
+      const who = mk('td');
+      const name = mk('span', null, `${r.who} · ${r.change}`);
+      name.title = r.real;
+      who.append(name);
+      const risk = mk('td');
+      const tag = mk('span', 'mv-tag', r.risk);
+      tag.dataset.risk = r.risk;
+      risk.append(tag);
+      const model = mk('td');
+      const ran = mk('span', null, r.models);
+      ran.title = r.ranOn ? `Ran on: ${r.ranOn}` : '';
+      model.append(ran);
+      if (r.floorTag) {
+        const raised = mk('span', 'mv-tag', r.floorTag);
+        raised.dataset.kind = r.floorTag;
+        raised.title = r.raisedWhy;
+        model.append(raised);
+        raisedNotes.push({ tag: r.floorTag, text: `${r.who} · ${r.change}: ${r.raisedWhy}` });
+      }
+      const first = mk('td', 'mv-num');
+      first.title = [r.firstTryOf, r.after, r.notVerified ? `Not verified: ${r.notVerified}` : null].filter(Boolean).join('\n');
+      first.append(mk('span', null, r.firstTry));
+      if (r.rate !== null) {
+        const meter = mk('span', 'mv-meter');
+        const fill = mk('span', 'mv-meter-fill');
+        fill.style.width = `${Math.round(r.rate * 100)}%`;
+        // Under four in five the bar is the colour of something to look at.
+        fill.dataset.tone = r.rate >= 0.8 ? 'good' : 'waiting';
+        meter.setAttribute('aria-hidden', 'true');
+        meter.append(fill);
+        first.append(meter);
+      }
+      const cost = mk('td', 'mv-num', r.cost);
+      cost.title = r.costNote;
+      if (r.partial) cost.dataset.partial = 'true';
+      tr.append(who, risk, model, mk('td', 'mv-num', r.tasks), first, mk('td', 'mv-num', r.escalated), cost);
+      tbody.append(tr);
+    }
+    table.append(thead, tbody);
+    scroll.append(table);
+    pane.append(scroll);
+
+    if (d.suggestions?.length) {
+      const box = mk('section', 'mv-suggest');
+      box.append(mk('h3', 'mv-suggest-h', 'Suggestion · needs your approval'));
+      for (const s of d.suggestions) {
+        const t = suggestionText(s);
+        box.append(mk('p', 'mv-suggest-text', `${t.title} ${t.says}`));
+        const row = mk('div', 'mv-suggest-row');
+        row.append(mk('span', 'sub', `${LOWER_RULE} ${t.how}`), mk('span', 'row-fill'));
+        if (t.command) {
+          // It copies the words and does nothing else: the hold is lowered where the user sends them.
+          const b = mk('button', 'btn sm', 'Copy command');
+          b.type = 'button';
+          b.title = 'Copies the command. Nothing is lowered until you send it in your own session.';
+          b.addEventListener('click', () => this.hooks.onCopy?.(t.command));
+          row.append(mk('code', 'mv-cmd', t.command), b);
+        }
+        box.append(row);
+      }
+      pane.append(box);
+    }
+    for (const note of raisedNotes) {
+      const row = mk('div', 'mv-raised');
+      const tag = mk('span', 'mv-tag', note.tag);
+      tag.dataset.kind = note.tag;
+      row.append(tag, mk('span', 'sub', note.text));
+      pane.append(row);
+    }
+    this.root.replaceChildren(pane);
+  }
+}

package/kit/studio/web/names.js

@@ -30,6 +30,23 @@ export function roleName(type) {
 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. */
+/**
+ * Where a Claude Code agent is defined, in words, or null while that has not been read.
+ * `origins` is the server's answer: { project, user }, each a map of agent name to file name, or null where the
+ * directory was not read. A plugin's agent is told by its name. An agent in none of these is said to be in none:
+ * it is built in to Claude Code, or defined somewhere this panel does not look, and which is not known.
+ */
+export function originOf(type, origins) {
+  if (!origins || typeof type !== 'string' || !type) return null;
+  const at = type.indexOf(':');
+  if (at > 0 && at < type.length - 1) return `Defined in the plugin \u201c${type.slice(0, at)}\u201d`;
+  if (origins.project && Object.hasOwn(origins.project, type)) return `Defined in this project: .claude/agents/${origins.project[type]}`;
+  if (origins.user && Object.hasOwn(origins.user, type)) return `Defined in your own agents: ~/.claude/agents/${origins.user[type]}`;
+  const unread = [origins.project ? null : 'the project', origins.user ? null : 'your own'].filter(Boolean);
+  return unread.length === 2 ? 'Where it is defined was not read: no agents directory in the project or your own'
+    : `No definition file found${unread.length ? ` (${unread[0]} agents directory was not read)` : ''}: built in to Claude Code, or defined where Studio does not look`;
+}
+
 export const hoverOf = (n) => [n?.agentType ?? null, n?.description ?? null].filter(Boolean).join('\n');
 
 /**
@@ -42,3 +59,70 @@ 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(', ');
+}
+
+/**
+ * The badge a card carries for its model: the model in full ("Opus 5.5"), at every density. For work that was
+ * repeated one model up, the step that was taken ("Sonnet \u2192 Opus"); and a mark when the call asked for another
+ * model than the one that ran.
+ */
+export function modelBadge(n) {
+  const m = modelOf(n);
+  if (!m.ran) return '';
+  const word = (model) => { const f = modelFamily(model); return f ? f[0].toUpperCase() + f.slice(1) : modelName(model); };
+  const text = n?.escalatedFrom?.from ? `${word(n.escalatedFrom.from)} \u2192 ${word(n.model)}` : m.ran;
+  return `${text}${m.differs ? ' \u2260' : ''}`;
+}