crewforth 3.1.0-rc.5 → 3.1.0-rc.7

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

@@ -48,8 +48,9 @@ function rowOf(n, now) {
  * @param queue    the approval queue (every session started here), as approvals.js orders it
  * @param current  the session being looked at
  * @param folded   Map sectionKey -> boolean, the viewer's own choices; a section not in it takes its default
+ * @param all      true after "Expand all", false after "Fold all": what a section not in `folded` is
  */
-export function sections(nodes, { queue = [], current = null, folded = new Map(), now = 0 } = {}) {
+export function sections(nodes, { queue = [], current = null, folded = new Map(), all = null, now = 0 } = {}) {
   const agents = (nodes ?? []).filter((n) => n.kind === 'agent');
   const out = [];
 
@@ -89,7 +90,9 @@ export function sections(nodes, { queue = [], current = null, folded = new Map()
     if (!s.rows.length) continue;
     out.push({
       key: s.key, title: s.title, count: s.rows.length, tone: s.tone, cards: [], rows: s.rows,
-      folded: folded.has(s.key) ? folded.get(s.key) : s.foldedByDefault, foldable: true,
+      // As the viewer left it; untouched, it follows the last "Expand all" or "Fold all" (`all`), and before
+      // either its own default.
+      folded: folded.has(s.key) ? folded.get(s.key) : (typeof all === 'boolean' ? !all : s.foldedByDefault), foldable: true,
     });
   }
   return out;
@@ -97,12 +100,14 @@ export function sections(nodes, { queue = [], current = null, folded = new Map()
 
 /** What a request card says under the agent's name. */
 export function wants(item) {
+  if (item.ask?.kind === 'questions') return 'asks';
+  if (item.ask?.kind === 'plan') return 'wants its plan approved';
   return `wants to run ${item.toolName}`;
 }
 
 /** Which view a window opens on when the viewer has not chosen one: the List on a phone, the graph elsewhere. */
 export function defaultView(stored, phone) {
-  if (stored === 'graph' || stored === 'timeline' || stored === 'list') return stored;
+  if (stored === 'graph' || stored === 'timeline' || stored === 'list' || stored === 'models') return stored;
   return phone ? 'list' : 'graph';
 }
 

package/kit/studio/web/list.js

@@ -6,6 +6,7 @@ import { sections, wants } from './list-plan.js';
 import { Press } from './press.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 [

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');
 
 /**
@@ -96,3 +113,16 @@ export function modelMix(members) {
   }
   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' : ''}`;
+}

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
@@ -1009,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;
@@ -1032,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; }

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');