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

package/kit/studio/web/chat.js

@@ -370,7 +370,7 @@ class Pane {
 
   paintCard({ block, node }) {
     const card = delegationCard(block, this.hooks.agentsOf?.(this.id));
-    const sig = `${card.type}|${card.task}|${card.agentId}|${card.status}`;
+    const sig = `${card.type}|${card.task}|${card.agentId}|${card.status}|${card.model.ran}|${card.model.asked}`;
     if (node.sig === sig) return;
     node.sig = sig;
     const text = el('span', 'deleg-text');
@@ -380,6 +380,13 @@ class Pane {
     const tile = card.agentId ? this.hooks.tileOf?.(this.id, card.agentId) : null;
     if (tile) parts.push(tile);
     parts.push(text);
+    // The model: what it ran on, or what the call asks for while the agent has not been seen yet.
+    const mword = card.model.ran || card.model.asked;
+    if (mword) {
+      const badge = el('span', 'deleg-model', `${mword}${card.model.differs ? ' \u2260' : ''}`);
+      badge.title = card.model.title;
+      parts.push(badge);
+    }
     // The agent's state is the graph's. Before the graph has seen the agent there is none to show.
     const st = card.agentId ? this.hooks.statusOf?.(this.id, card.agentId) : null;
     if (st?.word) {
@@ -438,7 +445,17 @@ class Pane {
     d.dataset.tone = h.tone;
     badge.append(d, el('span', null, h.badge));
     const parts = [badge];
-    for (const p of h.parts) parts.push(el('span', 'sub', p));
+    for (const p of h.parts) {
+      // The mode is a control: a click offers the modes a session can be in. Everything else in the strip is said.
+      if (h.mode && p === `mode: ${h.mode}` && this.hooks.onMode && s?.state !== 'exited' && s?.state !== 'failed') {
+        const b = el('button', 'sub pane-mode', p);
+        b.type = 'button';
+        b.title = 'Change the mode this session is in';
+        b.setAttribute('aria-haspopup', 'menu');
+        b.addEventListener('click', (e) => { e.stopPropagation(); this.hooks.onMode(this, b, h.mode); });
+        parts.push(b);
+      } else parts.push(el('span', 'sub', p));
+    }
     if (h.ungated) {
       const warn = el('span', 'pill pane-ungated', 'No approval gate');
       warn.title = 'This session was started without the approval gate: its tool calls do not wait for you.';

package/kit/studio/web/convo.js

@@ -3,7 +3,7 @@
 // The same shapes come from two places: the server's reading of a transcript (history, and sessions Studio only
 // watches) and the live stream of a session started here. Both go through these functions, so a tool row reads
 // the same whichever way it arrived.
-import { roleName } from './names.js';
+import { roleName, modelOf } from './names.js';
 
 // How much of a tool's output the page keeps for a live result: the same tail the server keeps for history.
 const RESULT_TAIL = 4096;
@@ -20,6 +20,8 @@ export function toolBlock(c) {
     label: i.description ?? i.file_path ?? i.command ?? i.pattern ?? i.query ?? null,
     id: typeof c?.id === 'string' ? c.id : null,
     subagentType: typeof i.subagent_type === 'string' ? i.subagent_type : null,
+    // The model a delegation asks for; null when the call names none.
+    model: typeof i.model === 'string' ? i.model : null,
     result: null,
   };
 }
@@ -82,6 +84,8 @@ export function delegationCard(block, nodes) {
     task: block.label ?? node?.description ?? '',
     agentId: node?.id ?? null,
     status: node?.status ?? null,
+    // What it ran on once the graph knows the agent; before that, what the call asked for.
+    model: modelOf({ model: node?.model ?? null, modelAsked: block.model ?? node?.modelAsked ?? null }),
   };
 }
 
@@ -128,6 +132,13 @@ export function reminderOf(waiting) {
   return `${who} is waiting for approval${more > 0 ? `, and ${more} more ${more === 1 ? 'request is' : 'requests are'}` : ''}`;
 }
 
+// The modes a session started here can be put in: the three it can be started in, and no other.
+export const SESSION_MODES = [
+  { mode: 'plan', label: 'plan', title: 'Explore and plan; nothing is edited until a plan is approved.' },
+  { mode: 'acceptEdits', label: 'acceptEdits', title: 'File edits in the project are accepted; every call is still shown in the dock first.' },
+  { mode: 'default', label: 'default', title: 'Each call is asked about in the dock.' },
+];
+
 /** The strip above a conversation: what kind of session this is, in the order the design has it. */
 export function headerOf(session, { readOnly = false, contextTokens = null } = {}) {
   if (readOnly) return { badge: 'Read only', tone: 'none', parts: [] };
@@ -141,6 +152,8 @@ export function headerOf(session, { readOnly = false, contextTokens = null } = {
     badge: 'Started here',
     tone: 'good',
     parts,
+    // The mode on its own as well: in the strip it is a control, and the rest of `parts` is not.
+    mode: session?.permissionMode ?? null,
     // A session started here without the gate is running unguarded, and that is said in the strip itself.
     ungated: session ? session.gated === false : false,
   };

package/kit/studio/web/dock.js

@@ -4,6 +4,7 @@
 // request is not forgotten either, because its clock is on screen and counting. What it says and when comes from
 // approvals.js; this file draws it and hands the three answers back.
 import { remaining, asker, allowSessionLabel, VERDICTS, OUTCOME_WORD } from './approvals.js';
+import { AskForms } from './ask.js';
 
 const SVG = 'http://www.w3.org/2000/svg';
 const RING = 2 * Math.PI * 15;      // the countdown ring's circumference, r = 15
@@ -39,6 +40,8 @@ export class Dock {
     this.flash = null;        // { word, outcome, until }
     this.flashTimer = null;
     this.suppressed = false;  // another surface is showing the requests with their answers
+    // A question and a plan are answered with a form, not with the three buttons.
+    this.forms = new AskForms((item, verdict, extra) => this.decide(verdict, extra, item));
     this.#build();
   }
 
@@ -111,7 +114,11 @@ export class Dock {
       this.decide(verdict);
     });
 
-    this.parts = { timer, ring, secs, word, who, tool, where, cmd, note, nav, prev, next, count, acts, deny, always, allow };
+    // Where the form of a question or a plan goes: under the line that says who asks, in place of the command.
+    const ask = mk('div', 'dock-ask');
+    ask.hidden = true;
+    text.append(ask);
+    this.parts = { timer, ring, secs, word, who, tool, where, cmd, note, nav, prev, next, count, acts, deny, always, allow, ask };
     this.root.replaceChildren(timer, text, nav, acts);
   }
 
@@ -125,6 +132,7 @@ export class Dock {
     this.at = keep === -1 ? Math.min(this.at, Math.max(0, this.items.length - 1)) : keep;
     if (keep === -1) this.open = false;
     for (const key of [...this.busy]) if (!this.items.some((r) => r.key === key)) this.busy.delete(key);
+    this.forms.keep(this.items.map((r) => r.key));
     this.paint();
   }
 
@@ -135,18 +143,21 @@ export class Dock {
     this.paint();
   }
 
-  decide(verdict) {
-    const item = this.current;
+  decide(verdict, extra = {}, of = null) {
+    const item = of ?? this.current;
     // While the dock is saying what became of the last request, the next one is not on screen yet, and a key
     // pressed then must not answer something nobody has read.
     if (!item || this.busy.has(item.key) || this.flashing) return;
+    // The keys a/s/d answer a command. A question and a plan are answered in their form, or denied.
+    if (item.ask && !['answer', 'plan', 'deny'].includes(verdict)) return;
     this.busy.add(item.key);
+    this.forms.setSent(item.key, true);
     this.paint();
-    this.onDecide(item, verdict);
+    this.onDecide(item, verdict, extra);
   }
 
   /** An answer could not be delivered: the buttons come back. */
-  release(key) { this.busy.delete(key); this.paint(); }
+  release(key) { this.busy.delete(key); this.forms.setSent(key, false); this.paint(); }
 
   /** Say what became of a request for a moment: "Denied", "Timed out — denied". */
   say(outcome, queued = false) {
@@ -173,7 +184,7 @@ export class Dock {
     if (this.root.hidden) return;
 
     // What became of the last request is said in the place it was, before the next one takes it.
-    for (const part of [p.timer, p.who, p.tool, p.where, p.cmd, p.note, p.nav, p.acts]) part.hidden = flashing;
+    for (const part of [p.timer, p.who, p.tool, p.where, p.cmd, p.note, p.nav, p.acts, p.ask]) part.hidden = flashing;
     if (flashing) {
       this.root.dataset.state = this.flash.outcome;
       p.word.textContent = this.flash.word;
@@ -189,7 +200,15 @@ export class Dock {
     const where = this.where(item);
     p.where.hidden = !where;
     p.where.textContent = where ? `in ${where}` : '';
-    p.cmd.hidden = !item.detail;
+    // A question or a plan: its form, in place of the command and the three buttons.
+    const form = this.forms.get(item);
+    p.ask.hidden = !form;
+    p.acts.hidden = Boolean(form);
+    // Put in once and left there: a form taken out and put back on every tick would lose the caret in it.
+    if (this.shownForm !== form) { p.ask.replaceChildren(...(form ? [form] : [])); this.shownForm = form; }
+    this.root.dataset.ask = form ? item.ask.kind : '';
+    p.tool.textContent = form ? (item.ask.kind === 'plan' ? 'wants its plan approved' : 'asks') : item.toolName;
+    p.cmd.hidden = !item.detail || Boolean(form);
     p.cmd.textContent = item.detail ?? '';
     p.cmd.classList.toggle('open', this.open);
     p.cmd.setAttribute('aria-expanded', String(this.open));
@@ -200,7 +219,7 @@ export class Dock {
       p.ring.style.strokeDasharray = `${(r.fraction * RING).toFixed(1)} ${RING.toFixed(1)}`;
       p.secs.textContent = `${r.left}s`;
       p.timer.setAttribute('aria-label', `Auto-deny in ${r.left} seconds`);
-      p.note.textContent = `Auto-deny in ${r.left}s if nobody answers`;
+      p.note.textContent = form ? `Refused in ${r.left}s if nobody answers` : `Auto-deny in ${r.left}s if nobody answers`;
     } else {
       // The server did not say how long the hook waits. No clock is better than an invented one.
       p.ring.style.strokeDasharray = `0 ${RING.toFixed(1)}`;
@@ -217,6 +236,8 @@ export class Dock {
     p.always.textContent = allowSessionLabel(item.toolName);
     p.always.title = `Allow this call, and stop asking here about ${item.toolName} for the rest of the session. Later calls are not approved for Claude Code: it still applies its own checks to them.`;
     for (const b of [p.deny, p.always, p.allow]) b.disabled = sent;
-    this.root.setAttribute('aria-label', `Waiting for approval: ${asker(item)} wants to run ${item.toolName}`);
+    this.root.setAttribute('aria-label', form
+      ? `Waiting for you: ${asker(item)} ${item.ask.kind === 'plan' ? 'wants its plan approved' : 'asks a question'}`
+      : `Waiting for approval: ${asker(item)} wants to run ${item.toolName}`);
   }
 }

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

@@ -24,8 +24,10 @@ export const SIZE = {
   colGap: 56,                  // between one depth and the next
   waveGap: 148,                // between one wave and the next: room for the words on an inferred wire
   rowGap: 12,                  // between siblings
-  session: { w: 200, h: 84 },
-  card: { w: 248, h: 64 },     // an agent, and a folded group
+  session: { w: 200, h: 84, line: 20 },   // `line`: the extra line a session with background commands has
+  card: { w: 248, h: 84 },     // an agent: its name, its task, and a line of facts (model, time, tokens)
+  stack: { w: 248, h: 116, tight: 64 },   // a group drawn as one card: its name, its bar, its totals, its models;
+                                          // `tight` at compact density, where the two lines of totals go
   chip: { w: 248, h: 36 },     // an agent at compact density
   group: {                     // an open group: a container holding its members
     padX: 8, top: 10, head: 20, gap: 6, bar: 4, bottom: 8,
@@ -45,6 +47,9 @@ export const AUTO = {
   // fitting leaves 676 after its margin; a card's 12px name reads down to 9px, which is a zoom of 0.75.
   // 676 / 0.75 = 901.
   tallest: 900,
+  // The smallest zoom a card is still read at: its 12px name is 9px there. Auto asks one thing of a picture —
+  // does it fit the pane at this zoom or larger — and only goes to chips when the answer is no.
+  readable: 0.75,
   // Same-type siblings fold into one card from this many, once the picture is too tall.
   stackAt: 3,
 };
@@ -153,7 +158,10 @@ function itemsOf(nodes, { group, density, seq, stack, aside }) {
   const session = nodes.find((n) => n.kind === 'session');
   if (session) items.push({ id: session.id, kind: 'session', node: session, parent: null, depth: 0 });
 
-  const stackAt = group === 'type' ? 2 : (density === 'auto' && group !== 'none' && stack ? AUTO.stackAt : Infinity);
+  // Agents of one type under one parent are one card under `type` and under `run`, from two and wherever they
+  // stand in the order: three Privacy agents called fifth, eighth and ninth are the same thing three times.
+  // Under `parent` they fold only when the picture is too tall; under `none`, never.
+  const stackAt = group === 'type' || group === 'run' ? 2 : (density === 'auto' && group !== 'none' && stack ? AUTO.stackAt : Infinity);
 
   // `anchor` is the item a node's wire comes out of; `via` is the member row inside it, when the parent is one.
   const place = (parentId, anchor, via, depth) => {
@@ -185,7 +193,7 @@ function itemsOf(nodes, { group, density, seq, stack, aside }) {
         label: roleName(t), count: members.length, real: t, agentType: members[0].agentType ?? null,
       });
       items.push(g);
-      g.aside = Boolean(aside?.(g.id));
+      g.aside = Boolean(aside?.(g));
       for (const m of members) {
         stacked.add(m.id);
         if (!g.aside) { place(m.id, g, m.id, depth + 1); continue; }
@@ -216,6 +224,23 @@ function itemsOf(nodes, { group, density, seq, stack, aside }) {
   return items;
 }
 
+/**
+ * What a group's members add up to: time, new tokens, tokens read from the cache, and the estimate. A member with
+ * no usage read adds nothing; the cost is null when any member's is, so a sum never passes for the whole.
+ */
+export function sumOf(members) {
+  const sum = { durationMs: 0, fresh: 0, cacheRead: 0, cost: 0, timed: 0, counted: 0 };
+  for (const m of members ?? []) {
+    if (m.durationMs != null) { sum.durationMs += m.durationMs; sum.timed += 1; }
+    if (!m.usage) continue;
+    sum.counted += 1;
+    sum.fresh += m.usage.tokens?.fresh ?? 0;
+    sum.cacheRead += m.usage.tokens?.cacheRead ?? 0;
+    sum.cost = sum.cost === null || m.usage.cost == null ? null : sum.cost + m.usage.cost;
+  }
+  return sum;
+}
+
 function groupItem(id, type, members, anchor, via, depth, seq, extra) {
   return {
     id,
@@ -230,10 +255,24 @@ function groupItem(id, type, members, anchor, via, depth, seq, extra) {
     seq: Math.min(...members.map((m) => seq.get(m.id) ?? 0), Infinity),
     // The group stands where its first member does in the order the session called its agents.
     first: members.filter((m) => m.order != null).sort((a, b) => a.order - b.order)[0] ?? null,
+    sum: sumOf(members),
     ...extra,
   };
 }
 
+/**
+ * How tall a picture may be before Auto gives up cards for chips: what fits `paneHeight` at the smallest readable
+ * zoom, and never less than the reference window's. The count of agents is not asked; a tall window keeps cards
+ * for a session a short one turns to chips.
+ */
+export function tallestFor(paneHeight) {
+  const fits = typeof paneHeight === 'number' && paneHeight > 0 ? Math.floor((paneHeight - 2 * ZOOM.pad) / AUTO.readable) : 0;
+  return Math.max(AUTO.tallest, fits);
+}
+
+/** A session's card: one line taller while it has commands running in the background, and never wider. */
+export const sessionHeight = (n) => SIZE.session.h + (n?.backgroundNow?.length ? SIZE.session.line : 0);
+
 /* ----------------------------------------------------------------- plan --- */
 
 /**
@@ -242,8 +281,11 @@ function groupItem(id, type, members, anchor, via, depth, seq, extra) {
  * @param opts.density   one of DENSITIES
  * @param opts.seq       Map id -> arrival number, kept by the caller across calls (see `sequence`)
  * @param opts.open      Map groupId -> boolean, the viewer's own folds; a group not in it takes its default
+ * @param opts.all       true after "Expand all", false after "Fold all": what a group not in `open` is
  * @param opts.pinned    Map itemId -> {x, y}, positions the viewer set by hand
  * @param opts.sessionY  where the session card was put, to keep it there; omitted on a fresh layout
+ * @param opts.tallest   how tall the picture may be before Auto turns cards into chips (see `tallestFor`);
+ *                       the reference window's when it is not given
  * @param opts.aside     true when an open type group puts its agents in the next column instead of growing
  *                       downward; a narrow window leaves it off
  * @returns { items, edges, width, height, drawn, density, sessionY }
@@ -251,14 +293,18 @@ function groupItem(id, type, members, anchor, via, depth, seq, extra) {
 export function plan(nodes, opts = {}) {
   const group = GROUPINGS.includes(opts.group) ? opts.group : 'run';
   const asked = DENSITIES.includes(opts.density) ? opts.density : 'auto';
-  if (group === 'order') return planOrder(nodes, asked, opts);
+  const tallest = Math.max(AUTO.tallest, opts.tallest ?? 0);
+  if (group === 'order') return planOrder(nodes, asked, opts, tallest);
   const seq = opts.seq ?? sequence(nodes);
   const open = opts.open ?? new Map();
   const pinned = opts.pinned ?? new Map();
 
   // A type group starts folded: it is the same thing several times. A run or an agent's children start open.
-  const isOpen = (g) => (open.has(g.id) ? open.get(g.id) : g.type !== 'type');
-  const aside = opts.aside ? (id) => open.get(id) === true : null;
+  // A group is as the viewer left it; one they have not touched follows the last "Expand all" or "Fold all"
+  // (`opts.all`), and before either a type group starts folded — it is the same thing several times — while a
+  // run or an agent's children start open.
+  const isOpen = (g) => (open.has(g.id) ? open.get(g.id) : (typeof opts.all === 'boolean' ? opts.all : g.type !== 'type'));
+  const aside = opts.aside ? (g) => isOpen(g) : null;
 
   // What is drawn, and how many agents of it the viewer reads one by one: a card, a row or a chip each.
   const drawFrom = (items) => {
@@ -284,7 +330,7 @@ export function plan(nodes, opts = {}) {
   /** Size and place everything drawn, at one density. Returns the box the picture needs. */
   const lay = (drawnItems, compact) => {
     for (const it of drawnItems) {
-      if (it.kind === 'session') { it.w = SIZE.session.w; it.h = SIZE.session.h; continue; }
+      if (it.kind === 'session') { it.w = SIZE.session.w; it.h = sessionHeight(it.node); continue; }
       if (it.kind !== 'group') {
         const sz = compact ? SIZE.chip : SIZE.card;
         it.w = sz.w; it.h = sz.h; it.compact = compact;
@@ -293,7 +339,8 @@ export function plan(nodes, opts = {}) {
       it.open = isOpen(it);
       // `boxed` is the group drawn as a container with its members inside. Open beside itself it stays a card.
       it.boxed = it.open && !it.aside;
-      if (!it.boxed) { it.w = SIZE.card.w; it.h = SIZE.card.h; it.cells = null; continue; }
+      it.compact = compact;
+      if (!it.boxed) { it.w = SIZE.stack.w; it.h = compact ? SIZE.stack.tight : SIZE.stack.h; it.cells = null; continue; }
       const n = it.members.length;
       const grid = compact || n > G.rowsMax;
       const cols = grid ? Math.min(G.colsMax, Math.max(1, Math.ceil(n / G.rowsMax))) : 1;
@@ -375,12 +422,12 @@ export function plan(nodes, opts = {}) {
   let compact = asked === 'compact';
   let stacked = false;
   let box = lay(pass.shown, compact);
-  if (asked === 'auto' && box.height > AUTO.tallest) {
+  if (asked === 'auto' && box.height > tallest) {
     if (group !== 'none' && group !== 'type') {
       const folded = drawFrom(itemsOf(nodes, { group, density: asked, seq, stack: true, aside }));
       if (folded.shown.some((it) => it.kind === 'group' && it.type === 'type')) { pass = folded; stacked = true; box = lay(pass.shown, false); }
     }
-    if (box.height > AUTO.tallest) { compact = true; box = lay(pass.shown, true); }
+    if (box.height > tallest) { compact = true; box = lay(pass.shown, true); }
   }
   const drawnItems = pass.shown;
   const drawn = pass.count;
@@ -443,9 +490,10 @@ export const INFERRED_NOTE = 'Inferred from the order of events: this wave was c
  * each agent that reported after the wave before it was called and before this one was — an inference from the
  * order of events, drawn as one and labelled as one. A wave nothing reported before has no wire.
  */
-function planOrder(nodes, asked, opts) {
+function planOrder(nodes, asked, opts, tallest = AUTO.tallest) {
   const pinned = opts.pinned ?? new Map();
   const session = nodes.find((n) => n.kind === 'session') ?? null;
+  const sessionH = sessionHeight(session);
   const agents = nodes.filter((n) => n.kind === 'agent');
   const called = agents.filter((n) => n.wave != null);
   const waveIds = [...new Set(called.map((n) => n.wave))].sort((a, b) => a - b);
@@ -475,7 +523,7 @@ function planOrder(nodes, asked, opts) {
   };
   let compact = asked === 'compact';
   let box = lay(compact);
-  if (asked === 'auto' && box.height > AUTO.tallest) { compact = true; box = lay(true); }
+  if (asked === 'auto' && box.height > tallest) { compact = true; box = lay(true); }
   const { items } = box;
   let { height } = box;
 
@@ -483,11 +531,11 @@ function planOrder(nodes, asked, opts) {
   if (session) {
     const first = items.filter((it) => it.depth === 1);
     if (sessionY == null) {
-      const bottom = first.length ? Math.max(...first.map((it) => it.y + it.h)) : SIZE.padY + SIZE.session.h;
-      sessionY = Math.max(SIZE.padY, Math.round((SIZE.padY + bottom) / 2 - SIZE.session.h / 2));
+      const bottom = first.length ? Math.max(...first.map((it) => it.y + it.h)) : SIZE.padY + sessionH;
+      sessionY = Math.max(SIZE.padY, Math.round((SIZE.padY + bottom) / 2 - sessionH / 2));
     }
-    items.unshift({ id: session.id, kind: 'session', node: session, parent: null, depth: 0, w: SIZE.session.w, h: SIZE.session.h, x: SIZE.padX, y: sessionY });
-    height = Math.max(height, sessionY + SIZE.session.h + SIZE.padY);
+    items.unshift({ id: session.id, kind: 'session', node: session, parent: null, depth: 0, w: SIZE.session.w, h: sessionH, x: SIZE.padX, y: sessionY });
+    height = Math.max(height, sessionY + sessionH + SIZE.padY);
   }
   for (const it of items) {
     const p = pinned.get(it.id);
@@ -538,7 +586,7 @@ export function crowdFolds(nodes, opts = {}) {
   const folds = [];
   for (let guard = 0; guard < 64; guard += 1) {
     const p = plan(nodes, { ...opts, open, pinned: new Map(), sessionY: null });
-    if (p.height <= AUTO.tallest) break;
+    if (p.height <= Math.max(AUTO.tallest, opts.tallest ?? 0)) break;
     const next = p.items.filter((it) => it.kind === 'group' && it.open && it.members.length > 1)
       .sort((a, b) => b.members.length - a.members.length || String(a.id).localeCompare(String(b.id)))[0];
     if (!next) break;

package/kit/studio/web/icons/builtin.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" aria-hidden="true"><circle cx="8" cy="8" r="5.2"/><circle cx="8" cy="8" r="1.6" fill="currentColor" stroke="none"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width="16" height="16" fill="#D97757" role="img" aria-label="Claude Code agent"><path d="m19.6 66.5 19.7-11 .3-1-.3-.5h-1l-3.3-.2-11.2-.3L14 53l-9.5-.5-2.4-.5L0 49l.2-1.5 2-1.3 2.9.2 6.3.5 9.5.6 6.9.4L38 49.1h1.6l.2-.7-.5-.4-.4-.4L29 41l-10.6-7-5.6-4.1-3-2-1.5-2-.6-4.2 2.7-3 3.7.3.9.2 3.7 2.9 8 6.1L37 36l1.5 1.2.6-.4.1-.3-.7-1.1L33 25l-6-10.4-2.7-4.3-.7-2.6c-.3-1-.4-2-.4-3l3-4.2L28 0l4.2.6L33.8 2l2.6 6 4.1 9.3L47 29.9l2 3.8 1 3.4.3 1h.7v-.5l.5-7.2 1-8.7 1-11.2.3-3.2 1.6-3.8 3-2L61 2.6l2 2.9-.3 1.8-1.1 7.7L59 27.1l-1.5 8.2h.9l1-1.1 4.1-5.4 6.9-8.6 3-3.5L77 13l2.3-1.8h4.3l3.1 4.7-1.4 4.9-4.4 5.6-3.7 4.7-5.3 7.1-3.2 5.7.3.4h.7l12-2.6 6.4-1.1 7.6-1.3 3.5 1.6.4 1.6-1.4 3.4-8.2 2-9.6 2-14.3 3.3-.2.1.2.3 6.4.6 2.8.2h6.8l12.6 1 3.3 2 1.9 2.7-.3 2-5.1 2.6-6.8-1.6-16-3.8-5.4-1.3h-.8v.4l4.6 4.5 8.3 7.5L89 80.1l.5 2.4-1.3 2-1.4-.2-9.2-7-3.6-3-8-6.8h-.5v.7l1.8 2.7 9.8 14.7.5 4.5-.7 1.4-2.6 1-2.7-.6-5.8-8-6-9-4.7-8.2-.5.4-2.9 30.2-1.3 1.5-3 1.2-2.5-2-1.4-3 1.4-6.2 1.6-8 1.3-6.4 1.2-7.9.7-2.6v-.2H49L43 72l-9 12.3-7.2 7.6-1.7.7-3-1.5.3-2.8L24 86l10-12.8 6-7.9 4-4.6-.1-.5h-.3L17.2 77.4l-4.7.6-2-2 .2-3 1-1 8-5.5Z"/></svg>

package/kit/studio/web/index.html

@@ -92,11 +92,14 @@
         <button id="view-list" class="seg-btn" type="button" role="tab" aria-label="List view" aria-selected="false" aria-controls="list">
           <svg class="ic" viewBox="0 0 16 16" aria-hidden="true"><path d="M5 4h9M5 8h9M5 12h9M2 4h.01M2 8h.01M2 12h.01"/></svg><span class="tb-words">List</span>
         </button>
+        <button id="view-models" class="seg-btn" type="button" role="tab" aria-label="Models view" aria-selected="false" aria-controls="models">
+          <svg class="ic" viewBox="0 0 16 16" aria-hidden="true"><path d="M3 13V8M8 13V3M13 13V6"/></svg><span class="tb-words">Models</span>
+        </button>
       </div>
       <button id="tb-group" data-view="graph timeline" class="btn sm ghost tb-menu" type="button" aria-haspopup="menu">Group <span>Workflow run</span><svg class="ic" viewBox="0 0 16 16" aria-hidden="true"><path d="M4 6l4 4 4-4"/></svg></button>
       <button id="tb-density" data-view="graph" class="btn sm ghost tb-menu" type="button" aria-haspopup="menu">Density <span>Auto</span><svg class="ic" viewBox="0 0 16 16" aria-hidden="true"><path d="M4 6l4 4 4-4"/></svg></button>
-      <button id="tb-show" class="btn sm ghost tb-menu" type="button" aria-haspopup="menu">Show <span>All</span><svg class="ic" viewBox="0 0 16 16" aria-hidden="true"><path d="M4 6l4 4 4-4"/></svg></button>
-      <button id="tb-options" class="btn sm ghost tb-menu" type="button" aria-haspopup="menu" aria-label="View options"><span class="tb-name">View<span class="tb-more"> options</span></span><svg class="ic" viewBox="0 0 16 16" aria-hidden="true"><path d="M4 6l4 4 4-4"/></svg></button>
+      <button id="tb-show" data-view="graph timeline list" class="btn sm ghost tb-menu" type="button" aria-haspopup="menu">Show <span>All</span><svg class="ic" viewBox="0 0 16 16" aria-hidden="true"><path d="M4 6l4 4 4-4"/></svg></button>
+      <button id="tb-options" data-view="graph timeline list" class="btn sm ghost tb-menu" type="button" aria-haspopup="menu" aria-label="View options"><span class="tb-name">View<span class="tb-more"> options</span></span><svg class="ic" viewBox="0 0 16 16" aria-hidden="true"><path d="M4 6l4 4 4-4"/></svg></button>
       <span id="foot-note" class="toolbar-note" role="status"></span>
       <span class="toolbar-fill"></span>
       <span class="tb-follow" data-view="timeline" hidden>
@@ -110,10 +113,10 @@
       <button id="tb-range-in" class="btn icon sm ghost" type="button" data-view="timeline" aria-label="Show less time" hidden>
         <svg class="ic" viewBox="0 0 16 16" aria-hidden="true"><path d="M8 3v10M3 8h10"/></svg>
       </button>
-      <button id="tb-expand" data-view="graph" class="btn sm" type="button" aria-label="Expand all groups">
+      <button id="tb-expand" data-view="graph timeline list" class="btn sm" type="button" aria-label="Expand all groups">
         <svg class="ic" viewBox="0 0 16 16" aria-hidden="true"><path d="M3 6l5 5 5-5"/></svg><span class="tb-words">Expand all</span>
       </button>
-      <button id="tb-fold" data-view="graph" class="btn sm" type="button" aria-label="Fold all groups">
+      <button id="tb-fold" data-view="graph timeline list" class="btn sm" type="button" aria-label="Fold all groups">
         <svg class="ic" viewBox="0 0 16 16" aria-hidden="true"><path d="M6 3l5 5-5 5"/></svg><span class="tb-words">Fold all</span>
       </button>
       <button id="tb-zoom-out" data-view="graph" class="btn icon sm ghost" type="button" aria-label="Zoom out">
@@ -123,6 +126,9 @@
       <button id="tb-zoom-in" data-view="graph" class="btn icon sm ghost" type="button" aria-label="Zoom in">
         <svg class="ic" viewBox="0 0 16 16" aria-hidden="true"><path d="M8 3v10M3 8h10"/></svg>
       </button>
+      <button id="tb-reset" data-view="graph" class="btn sm" type="button" title="Reset layout (r)" aria-label="Reset layout: put the cards moved by hand back where they belong" disabled>
+        <svg class="ic" viewBox="0 0 16 16" aria-hidden="true"><path d="M3 8a5 5 0 1 0 1.6-3.7M3 3v3h3"/></svg><span class="tb-words">Reset layout</span>
+      </button>
       <button id="tb-fit" data-view="graph" class="btn sm" type="button" aria-label="Fit the graph to the view">
         <svg class="ic" viewBox="0 0 16 16" aria-hidden="true"><path d="M2.5 5.5v-3h3M10.5 2.5h3v3M13.5 10.5v3h-3M5.5 13.5h-3v-3"/></svg><span class="tb-words">Fit</span>
       </button>
@@ -132,6 +138,7 @@
     <div id="canvas" class="canvas"></div>
     <div id="timeline" role="tabpanel" aria-labelledby="view-timeline" hidden></div>
     <div id="list" role="tabpanel" aria-labelledby="view-list" hidden></div>
+    <div id="models" role="tabpanel" aria-labelledby="view-models" hidden></div>
     <div id="first-run" class="first-run" hidden></div>
     <div id="terminal-wait" class="terminal-wait" role="status" hidden></div>
     <div id="dock" role="region" aria-label="Waiting for approval" hidden></div>

package/kit/studio/web/inspect.js

@@ -3,7 +3,7 @@
 // Functions of the server's data, with no page in them: the four tiles, what the agent is doing right now, which
 // skills it applied, who delegated to it. The rule they share is the panel's own: a value that was not read is
 // written "Not measured", with why — never as 0 and never as an empty list.
-import { roleName } from './names.js';
+import { roleName, modelName, modelFamily, modelOf } from './names.js';
 
 const NOT_MEASURED = 'Not measured';
 
@@ -100,6 +100,38 @@ export function backgroundLines(session, now) {
   }));
 }
 
+/**
+ * What the inspector says about an agent's model, as lines: { label, text, goto }.
+ *
+ * Two facts are kept apart: what the call ASKED for (its own `model` field; none means the agent's default) and
+ * what the agent RAN on (the model its own transcript names). Then, when the transcript shows them: the call the
+ * model gate refused first, and the same work repeated one model up after a report that closed `confidence: low`.
+ * `goto` is the id of the other agent a line is about, for a line that leads somewhere.
+ */
+export function modelLines(n, nodes) {
+  if (n?.kind !== 'agent') return [];
+  const m = modelOf(n);
+  const lines = [
+    { label: 'Ran on', text: n.model ? `${m.ran} \u00b7 ${n.model}` : 'not recorded' },
+    { label: 'Asked for', text: n.modelAsked ? `${n.modelAsked}${m.differs ? ' \u2014 differs from what ran' : ''}` : 'no model named (the agent\'s default)' },
+  ];
+  // The family is the word the choice is made in (haiku, sonnet, opus); a model with none keeps its own name.
+  const short = (model) => (model ? (modelFamily(model) ?? modelName(model).toLowerCase()) : 'no model');
+  if (n.firstTry) {
+    lines.push({
+      label: 'Model gate',
+      text: `first asked: ${short(n.firstTry.asked)} \u2192 refused${n.firstTry.floor ? ` (floor: ${n.firstTry.floor})` : ''} \u2192 ${short(n.modelAsked ?? n.model)}`,
+      note: n.firstTry.text,
+    });
+  }
+  const tagOf = (id) => { const o = (nodes ?? []).find((x) => x.id === id); return o?.order != null ? ` (#${o.order})` : ''; };
+  if (n.escalatedFrom) {
+    lines.push({ label: 'Escalated', text: `escalated: ${short(n.escalatedFrom.from)} \u2192 ${short(n.escalatedFrom.to)}, after${tagOf(n.escalatedFrom.id)} closed "confidence: low"`, goto: n.escalatedFrom.id });
+  }
+  if (n.escalatedTo) lines.push({ label: 'Escalated', text: `closed "confidence: low"; repeated one model up${tagOf(n.escalatedTo)}`, goto: n.escalatedTo });
+  return lines;
+}
+
 /** Who handed this agent its work: the node it hangs from. */
 export function delegatedBy(n, nodes) {
   const p = (nodes ?? []).find((x) => x.id === n.parentId) ?? null;

package/kit/studio/web/keys.js

@@ -0,0 +1,29 @@
+// Which key presses are shortcuts.
+//
+// The panel's shortcuts are single letters, and a single letter is also what someone types into a field, and what
+// the browser's own shortcuts are made of once a modifier is held: Cmd+R reloads, Ctrl+F finds. A letter is a
+// shortcut here only when it is neither.
+
+/** Is the press going into something that takes text? */
+export function typingIn(target) {
+  if (!target) return false;
+  const tag = String(target.tagName ?? '').toUpperCase();
+  return tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT' || target.isContentEditable === true;
+}
+
+/**
+ * The key of a press that is a shortcut, or null.
+ *
+ * Null while Cmd or Ctrl is held: those belong to the browser and the system. Null while the press is going into a
+ * field. Alt is different, because on many keyboards it is how a symbol is typed at all: on a Turkish Mac "[" is
+ * Option+8 and "]" is Option+9, and the key the browser reports is the symbol. So Alt refuses a letter (Alt+R is
+ * not "r") and a named key, and lets a symbol through as the key it produced.
+ */
+export function shortcutOf(e) {
+  if (!e || e.metaKey || e.ctrlKey) return null;
+  if (typingIn(e.target)) return null;
+  if (typeof e.key !== 'string') return null;
+  if (e.altKey && (e.key.length !== 1 || LETTER.test(e.key))) return null;
+  return e.key;
+}
+const LETTER = /^\p{L}$/u;

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