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

package/kit/studio/web/canvas.js

@@ -11,11 +11,11 @@
 //   A status is never colour alone: every dot has its word beside it.
 //   A poll that changed nothing writes nothing. Each element remembers what it last drew.
 import {
-  plan, sequence, crowdFolds, fitZoom, stateOf, ZOOM, GROUPINGS, DENSITIES, INFERRED_NOTE,
+  plan, sequence, crowdFolds, fitZoom, tallestFor, stateOf, ZOOM, GROUPINGS, DENSITIES, INFERRED_NOTE,
 } from './graph-plan.js';
 import { clock } from './timeline-plan.js';
 import { agentStatus } from './nav.js';
-import { roleName, shownType, hoverOf, orderTag, modelOf, modelMix, modelFamily } from './names.js';
+import { roleName, shownType, hoverOf, originOf, orderTag, modelOf, modelMix, modelFamily, modelBadge } from './names.js';
 import { fmtCount, fmtCost, COST_NOTE } from './usage.js';
 
 // How long an arriving wire takes to draw itself toward its new card. Short on purpose: this is a status panel,
@@ -88,10 +88,12 @@ export class Canvas {
     this.seq = new Map();        // id -> arrival number (see graph-plan.js)
     this.open = new Map();       // group id -> the viewer's own fold
     this.aside = false;          // an agent group opens into the next column, not downward
+    this.all = null;             // true after Expand all, false after Fold all: what an untouched group is
     // Ids that arrived on the last poll. A wire into one of these draws itself; every other wire is left alone,
     // so opening a group of 105 does not set 105 animations running at once.
     this.newborn = new Set();
     this.palette = { map: {} };
+    this.origins = null;
     this.icons = {};
     this.filter = null;          // statuses the page asked to isolate
     this.modelFilter = null;     // a family of model the page asked to isolate
@@ -267,7 +269,7 @@ export class Canvas {
     const crew = mk('span', 'cv-tile cv-tile-sm');
     crew.innerHTML = MARK.kit;
     const a = mk('span', 'cv-legend-item');
-    a.append(this.legendBuiltin, mk('span', null, 'Claude Code built-in'));
+    a.append(this.legendBuiltin, mk('span', null, 'Claude Code agent'));
     const b = mk('span', 'cv-legend-item');
     b.append(crew, mk('span', null, 'Crewforth'));
     marks.append(a, b);
@@ -398,12 +400,20 @@ export class Canvas {
       drawn: this.drawn,
       focus: this.focusId ? (roleName(this.nodes.get(this.focusId)?.agentType) || this.focusId) : null,
       groups: (this.lastPlan?.items ?? []).filter((it) => it.kind === 'group').length,
+      // Whether there is anything left for each control to do. A group inside a folded one is not drawn, and
+      // opens with its holder: it is not something "Fold all" has left undone.
+      // How many cards the viewer has placed by hand: what "Reset layout" would forget.
+      moved: this.pinned.size,
+      canExpand: (this.lastPlan?.items ?? []).some((it) => it.kind === 'group' && !it.open),
+      canFold: (this.lastPlan?.items ?? []).some((it) => it.kind === 'group' && it.open),
     };
   }
 
   /* ---------------------------------------------------------- choices */
 
   setPalette(p) { if (p?.map) { this.palette = p; this.#redraw(); } }
+  /** Where the session's agents are defined (see `originOf`); null while it has not been read. */
+  setOrigins(o) { this.origins = o ?? null; this.#redraw(); }
 
   /** The marks that live in files. `builtin` is the markup of web/icons/builtin.svg. */
   setIcons(icons) {
@@ -420,6 +430,7 @@ export class Canvas {
     // Positions set by hand and folds chosen for one grouping say nothing about another.
     this.pinned.clear();
     this.open.clear();
+    this.all = null;
     this.sessionY = null;
     this.#crowdFold();
     this.#persist();
@@ -486,24 +497,23 @@ export class Canvas {
     return this.#statusOf(n);
   }
 
-  expandAll() {
-    // Beside itself an agent group opens one at a time, by its own card; "all" is then every other kind of group.
-    const mine = (it) => it.kind === 'group' && !(this.aside && it.type === 'type');
-    for (const it of this.lastPlan?.items ?? []) if (mine(it)) this.open.set(it.id, true);
-    // Opening one level can reveal groups inside it; open those too.
-    for (let i = 0; i < 4; i += 1) {
-      const p = this.#plan();
-      let more = false;
-      for (const it of p.items) if (mine(it) && !it.open) { this.open.set(it.id, true); more = true; }
-      if (!more) break;
-    }
-    this.sessionY = null;
-    this.#persist();
-    this.#redraw({ fit: true });
-  }
+  /**
+   * Open every group, of every kind, at every depth — and keep doing so: a group that arrives later arrives open.
+   * What the viewer then folds by hand stays folded.
+   *
+   * It used to pass over the cards that stand for agents of one type whenever such a card opens beside itself,
+   * on the reasoning that those open one at a time. That left "Expand all" doing nothing in a session whose
+   * only groups were of that kind.
+   */
+  expandAll() { this.#setAll(true); }
 
-  foldAll() {
-    for (const it of this.lastPlan?.items ?? []) if (it.kind === 'group') this.open.set(it.id, false);
+  /** Fold every group, and keep doing so for the ones that arrive later. */
+  foldAll() { this.#setAll(false); }
+
+  #setAll(open) {
+    this.all = open;
+    // Every group follows the one choice; what was opened or folded by hand before it is forgotten.
+    this.open.clear();
     this.sessionY = null;
     this.#persist();
     this.#redraw({ fit: true });
@@ -516,20 +526,39 @@ export class Canvas {
     this.#redraw({ fit: true });
   }
 
-  /** Forget every hand-placed card and lay the graph out again. */
+  /**
+   * Forget every hand-placed card and lay the graph out again. Only the positions go: what is selected, what is
+   * filtered, the zoom, and which groups are open stay as they are. This session's saved layout loses its
+   * positions with it, and no other session's is touched.
+   * @returns what was forgotten, for `restoreLayout` to put back; null when no card had been moved
+   */
   resetLayout() {
+    if (!this.pinned.size) return null;
+    const was = { pins: new Map(this.pinned), sessionY: this.sessionY, session: this.sessionKey, group: this.group };
     this.pinned.clear();
     this.sessionY = null;
-    this.touched = false;
     this.#persist();
-    this.#redraw({ fit: true });
+    this.#redraw();
+    this.onChange?.(this.state());
+    return was;
+  }
+
+  /** Put back the positions `resetLayout` returned. Nothing happens if the session or the grouping has changed. */
+  restoreLayout(was) {
+    if (!was || was.session !== this.sessionKey || was.group !== this.group) return false;
+    this.pinned = new Map(was.pins);
+    this.sessionY = was.sessionY;
+    this.#persist();
+    this.#redraw();
+    this.onChange?.(this.state());
+    return true;
   }
 
   /* ----------------------------------------------------------- layout */
 
   #crowdFold() {
     const nodes = this.#visibleNodes();
-    for (const id of crowdFolds(nodes, { group: this.group, density: this.density, seq: this.seq })) {
+    for (const id of crowdFolds(nodes, { group: this.group, density: this.density, seq: this.seq, tallest: this.#tallest() })) {
       if (!this.open.has(id)) this.open.set(id, false);
     }
   }
@@ -548,13 +577,22 @@ export class Canvas {
   #plan() {
     return plan(this.#visibleNodes(), {
       group: this.group, density: this.density, seq: this.seq, open: this.open, pinned: this.pinned, sessionY: this.sessionY,
-      aside: this.aside,
+      aside: this.aside, all: this.all, tallest: this.#tallest(),
     });
   }
 
+  /** How tall a picture may be here before Auto turns cards into chips: what this pane fits, read off the pane. */
+  #tallest() {
+    this.paneHeight = this.root.getBoundingClientRect?.().height ?? 0;
+    return tallestFor(this.paneHeight);
+  }
+
   /** Re-fit only while the view is still the canvas's own. Once the viewer has panned, zoomed or placed a card,
    *  moving the view under them is not helpful. */
   fitIfUntouched() {
+    // The pane changed size: what fits in it may have changed with it, and so may Auto's answer.
+    const h = this.root.getBoundingClientRect?.().height ?? 0;
+    if (this.lastPlan && this.density === 'auto' && tallestFor(h) !== tallestFor(this.paneHeight ?? 0)) this.#redraw();
     if (!this.touched && !this.pinned.size) this.fit();
   }
 
@@ -576,6 +614,7 @@ export class Canvas {
     if (this.sessionKey === sessionId) return;
     this.sessionKey = sessionId;
     this.nodes.clear(); this.pos.clear(); this.pinned.clear(); this.open.clear(); this.seq.clear();
+    this.all = null;
     this.els.clear(); this.cellEls.clear(); this.nodeLayer.replaceChildren(); this.edgeG.replaceChildren();
     this.edgeEls.clear(); this.newborn.clear();
     this.mapRects.clear(); this.mapBoxes.replaceChildren();
@@ -798,28 +837,33 @@ export class Canvas {
   }
 
   /**
-   * Whose agent this is. The palette says where a type was declared; a type it does not know is drawn as unknown
-   * rather than guessed into one camp or the other, and a palette that could not be read makes every agent
-   * unknown, with the reason.
+   * Whose agent this is, and there are two answers. Crewforth's: named `crew-…` and in its agents directory,
+   * which is what the palette's map holds. Everything else is a Claude Code agent — built in, or defined by the
+   * project, the user or a plugin; this panel keeps no list of those, so a type Claude Code adds tomorrow is
+   * drawn like the ones it has today.
+   *
+   * One thing can be unknown: whether a `crew-…` agent is Crewforth's, when its agents could not be read.
+   * It is then drawn with the common mark and says what was not measured. A type that is not `crew-…` needs no
+   * palette to be placed.
    */
   #identity(n) {
-    if (this.palette.measured === false) {
-      return { source: 'unknown', title: `Agent identity not measured — ${this.palette.reason ?? 'no reason given'}` };
+    const type = n?.agentType ?? '';
+    if (this.palette.map?.[type]?.source === 'kit') return { source: 'kit', title: 'Crewforth agent' };
+    if (this.palette.measured === false && type.startsWith('crew-')) {
+      return { source: 'agent', title: `Agent identity not measured — ${this.palette.reason ?? 'no reason given'}` };
     }
-    const source = this.palette.map?.[n.agentType]?.source ?? null;
-    if (source === 'kit') return { source: 'kit', title: 'Crewforth agent' };
-    if (source === 'builtin') return { source: 'builtin', title: 'Claude Code built-in agent' };
-    return { source: 'unknown', title: 'Not declared by Crewforth or by Claude Code — an agent type this panel does not recognise' };
+    return { source: 'agent', title: 'Claude Code agent', where: originOf(type, this.origins) };
   }
 
   #fillTile(tile, n) {
     const who = this.#identity(n);
-    const sig = `${who.source}|${who.title}|${this.icons.builtin ? 1 : 0}`;
+    const sig = `${who.source}|${who.title}|${who.where ?? ''}|${this.icons.builtin ? 1 : 0}`;
     if (tile.sig === sig) return who;
     tile.sig = sig;
     tile.innerHTML = who.source === 'kit' ? MARK.kit : (this.icons.builtin ?? '');
     tile.dataset.source = who.source;
-    tile.title = who.title;
+    // Whose it is, and under that where it is defined, once that has been read.
+    tile.title = who.where ? `${who.title}\n${who.where}` : who.title;
     return who;
   }
 
@@ -860,7 +904,7 @@ export class Canvas {
     const tag = orderTag(n, compact ? null : clock);
     const mdl = modelOf(n);
     const facts = compact ? '' : factsOf(n);
-    const sig = JSON.stringify([type, task, st.word, st.tone, st.state, who.source, dim, n.status, tag, after, mdl.ran, mdl.differs, facts]);
+    const sig = JSON.stringify([type, task, st.word, st.tone, st.state, who.source, dim, n.status, tag, after, modelBadge(n), facts]);
     if (el.sig === sig) return;
     el.sig = sig;
     const p = el.parts;
@@ -877,9 +921,8 @@ export class Canvas {
     p.task.title = task;
     p.order.textContent = tag;
     p.order.hidden = !tag;
-    // The model it ran on, as a badge; marked when the call asked for another. A chip has room for the family.
-    const family = modelFamily(n.model);
-    p.model.textContent = `${compact ? (family ? family[0].toUpperCase() + family.slice(1) : mdl.ran) : mdl.ran}${mdl.differs ? ' \u2260' : ''}`;
+    // The model it ran on, in full at every density: on a chip it is the task that gives way, not the model.
+    p.model.textContent = modelBadge(n);
     p.model.hidden = !mdl.ran;
     p.model.title = mdl.title;
     p.model.dataset.differs = String(mdl.differs);
@@ -937,7 +980,10 @@ export class Canvas {
         return seg;
       }));
       p.bar.title = says;
-      if (!it.boxed) p.count.textContent = says;
+      // Beside the bar: how the members went — or, at compact density where the card has no line for it, the
+      // models they ran on, with how they went left to the bar and its tooltip.
+      const mix = modelMix(it.members).replace(/, /g, ' \u00b7 ');
+      if (!it.boxed) { p.count.textContent = it.compact && mix ? mix : says; p.count.title = it.compact && mix ? `${says}\nThe models its agents ran on` : ''; }
       if (!it.boxed) this.#fillTotals(p, it);
       el.title = it.boxed ? '' : (it.open ? 'Click to fold' : `Click to show ${it.members.length} agents`);
       el.setAttribute('aria-label', `${said}, ${says}, ${it.open ? 'open' : 'folded'}`);
@@ -1200,7 +1246,8 @@ export class Canvas {
     if (!it || it.kind !== 'group') return;
     this.open.set(groupId, !it.open);
     // Beside itself, one agent's tasks at a time: a second column of them from two groups reads as one list.
-    if (!it.open && it.type === 'type' && this.aside) {
+    // After "Expand all" that is not the rule: every group is open because the viewer asked for all of them.
+    if (!it.open && it.type === 'type' && this.aside && this.all !== true) {
       for (const other of this.lastPlan.items) if (other.kind === 'group' && other.type === 'type' && other.id !== groupId) this.open.set(other.id, false);
     }
     this.sessionY = null;
@@ -1396,6 +1443,7 @@ export class Canvas {
         group: this.group,
         pins: Object.fromEntries([...this.pinned].map(([id, p]) => [id, [p.x, p.y]])),
         open: Object.fromEntries(this.open),
+        all: this.all,
       }));
     } catch { /* kept for this page view only */ }
   }
@@ -1409,6 +1457,7 @@ export class Canvas {
       if (GROUPINGS.includes(saved.group)) this.group = saved.group;
       for (const [id, [x, y]] of Object.entries(saved.pins ?? {})) this.pinned.set(id, { x, y });
       for (const [id, on] of Object.entries(saved.open ?? {})) this.open.set(id, Boolean(on));
+      this.all = typeof saved.all === 'boolean' ? saved.all : null;
     } catch { /* start from the canvas's own layout */ }
   }
 }

package/kit/studio/web/chat.js

@@ -445,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

@@ -132,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: [] };
@@ -145,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

@@ -47,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,
 };
@@ -190,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; }
@@ -257,6 +260,16 @@ function groupItem(id, type, members, anchor, via, depth, seq, 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);
 
@@ -268,8 +281,11 @@ export const sessionHeight = (n) => SIZE.session.h + (n?.backgroundNow?.length ?
  * @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 }
@@ -277,14 +293,18 @@ export const sessionHeight = (n) => SIZE.session.h + (n?.backgroundNow?.length ?
 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) => {
@@ -402,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;
@@ -470,7 +490,7 @@ 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);
@@ -503,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;
 
@@ -566,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/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;