crewforth 3.1.0-rc.2 → 3.1.0-rc.3

package/kit/studio/web/canvas.js

@@ -14,6 +14,7 @@ import {
   plan, sequence, crowdFolds, fitZoom, stateOf, ZOOM, GROUPINGS, DENSITIES,
 } from './graph-plan.js';
 import { agentStatus } from './nav.js';
+import { roleName, shownType, hoverOf } from './names.js';
 
 // How long an arriving wire takes to draw itself toward its new card. Short on purpose: this is a status panel,
 // and anything a viewer has to wait through is a cost they pay on every spawn.
@@ -84,6 +85,7 @@ export class Canvas {
     this.mapRects = new Map();   // drawn item id -> its box on the minimap
     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
     // 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();
@@ -139,11 +141,53 @@ export class Canvas {
     this.mapEl.append(this.mapSvg);
 
     this.legendEl = this.#legend();
+    this.spendEl = this.#spend();
     this.tipEl = mk('div', 'cv-tip');
     this.tipEl.setAttribute('role', 'tooltip');
     this.tipEl.hidden = true;
 
-    this.root.append(this.viewport, this.emptyEl, this.mapEl, this.legendEl, this.tipEl);
+    this.root.append(this.viewport, this.emptyEl, this.mapEl, this.legendEl, this.spendEl, this.tipEl);
+  }
+
+  /** What the session spent: time, tokens and an estimate of the cost. Closed, it stays closed until asked for. */
+  #spend() {
+    const box = mk('div', 'cv-legend cv-spend');
+    box.setAttribute('aria-label', 'Session summary');
+    const head = mk('div', 'cv-legend-head');
+    head.append(mk('span', 'cv-label', 'Session'));
+    const close = mk('button', 'cv-x');
+    close.type = 'button';
+    close.setAttribute('aria-label', 'Close the session summary');
+    close.innerHTML = MARK.close;
+    close.addEventListener('click', () => this.showSpend(false));
+    head.append(close);
+    this.spendRows = mk('dl', 'cv-spend-rows');
+    box.append(head, this.spendRows);
+    this.spendOpen = readFlag('crewforth-studio-spend') !== 'closed';
+    box.hidden = true;                       // until there is a session's usage to show
+    return box;
+  }
+
+  showSpend(on) {
+    this.spendOpen = Boolean(on);
+    writeFlag('crewforth-studio-spend', on ? 'open' : 'closed');
+    this.spendEl.hidden = !on || !this.spendCount;
+  }
+
+  /** The rows to show: [label, value, note], from usage.js `summaryRows`. An empty list hides the box. */
+  setSpend(rows) {
+    const sig = JSON.stringify(rows ?? []);
+    if (sig === this.spendSig) return;
+    this.spendSig = sig;
+    this.spendCount = (rows ?? []).length;
+    this.spendRows.replaceChildren(...(rows ?? []).flatMap(([label, value, note]) => {
+      const dd = mk('dd', null, value ?? '');
+      dd.title = note ?? '';
+      const dt = mk('dt', null, label);
+      dt.title = note ?? '';
+      return [dt, dd];
+    }));
+    this.spendEl.hidden = !this.spendOpen || !this.spendCount;
   }
 
   /** What the lines and the two marks mean. Shown until it is closed, and then not again unless asked for. */
@@ -196,7 +240,7 @@ export class Canvas {
     this.root.addEventListener('pointerdown', (e) => {
       if (e.button !== 0) return;                 // right/middle must not pan
       const t = e.target;
-      if (t.closest?.('.cv-node') || t.closest?.('.cv-minimap') || t.closest?.('.cv-legend')) return;
+      if (t.closest?.('.cv-node') || t.closest?.('.cv-minimap') || t.closest?.('.cv-legend')) return;   // the summary box is a .cv-legend too
       panning = { px: e.clientX, py: e.clientY, x: this.view.x, y: this.view.y };
       this.root.setPointerCapture(e.pointerId);
       this.root.classList.add('cv-panning');
@@ -303,7 +347,7 @@ export class Canvas {
       drawnAs: this.lastPlan?.density ?? null,
       stacked: Boolean(this.lastPlan?.stacked),
       drawn: this.drawn,
-      focus: this.focusId ? (this.nodes.get(this.focusId)?.agentType ?? this.focusId) : null,
+      focus: this.focusId ? (roleName(this.nodes.get(this.focusId)?.agentType) || this.focusId) : null,
       groups: (this.lastPlan?.items ?? []).filter((it) => it.kind === 'group').length,
     };
   }
@@ -384,12 +428,14 @@ export class Canvas {
   }
 
   expandAll() {
-    for (const it of this.lastPlan?.items ?? []) if (it.kind === 'group') this.open.set(it.id, true);
+    // 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 (it.kind === 'group' && !it.open) { this.open.set(it.id, true); more = true; }
+      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;
@@ -443,6 +489,7 @@ 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,
     });
   }
 
@@ -569,7 +616,7 @@ export class Canvas {
 
   #drawItem(it, liveCells) {
     let el = this.els.get(it.id);
-    const shape = it.kind === 'group' ? `group:${it.open ? `open:${it.grid ? 'grid' : 'rows'}` : 'folded'}`
+    const shape = it.kind === 'group' ? `group:${it.boxed ? `open:${it.grid ? 'grid' : 'rows'}` : 'folded'}`
       : `${it.kind}:${it.compact ? 'chip' : 'card'}`;
     // A card that changes what it IS (an agent that becomes a chip, a group that opens) is rebuilt; one that only
     // changes what it says is updated in place.
@@ -627,7 +674,7 @@ export class Canvas {
       p.head.append(p.tile, p.name, mk('span', 'cv-fill'), p.sub, p.fold);
       p.bar = mk('div', 'cv-bar');
       p.count = mk('span', 'cv-sub');
-      if (it.open) {
+      if (it.boxed) {
         el.classList.add('cv-open');
         el.append(p.head, p.bar);
       } else {
@@ -701,7 +748,8 @@ export class Canvas {
   #fillSession(el, it) {
     const n = it.node;
     const st = this.sessionState;
-    const sig = JSON.stringify([n.gitBranch, n.cwd, n.turns, n.tokens, st?.word, st?.tone]);
+    const bg = n.backgroundNow?.length ?? 0;
+    const sig = JSON.stringify([n.gitBranch, n.cwd, n.turns, n.tokens, st?.word, st?.tone, bg]);
     if (el.sig === sig) return;
     el.sig = sig;
     const p = el.parts;
@@ -712,7 +760,10 @@ export class Canvas {
     p.name.textContent = n.gitBranch || shortPath(n.cwd) || n.sessionId || '';
     const bits = [`${n.turns ?? 0} ${n.turns === 1 ? 'turn' : 'turns'}`];
     if (n.tokens != null) bits.push(`${fmtTokens(n.tokens)} ctx`);
+    // What the session has running that is not an agent: commands sent to the background.
+    if (bg) bits.push(`${bg} in background`);
     p.sub.textContent = bits.join(' · ');
+    p.sub.title = bg ? n.backgroundNow.map((c) => `In the background: ${c.toolName}${c.detail ? ` · ${c.detail}` : ''}`).join('\n') : '';
     el.title = 'Click to inspect this session';
     el.setAttribute('aria-label', `Session, ${st?.word ?? 'state not measured'}, ${p.name.textContent}, ${p.sub.textContent}`);
   }
@@ -720,7 +771,7 @@ export class Canvas {
   #fillAgent(el, n, compact) {
     const st = this.#statusOf(n);
     const who = compact ? this.#identity(n) : this.#fillTile(el.parts.tile, n);
-    const type = n.kind === 'workflow' ? (n.workflowId ?? 'workflow run') : (n.agentType ?? 'unknown agent');
+    const type = n.kind === 'workflow' ? (n.workflowId ?? 'workflow run') : shownType(n);
     const task = n.kind === 'workflow' ? `${n.members ?? 0} agents` : (n.description ?? '');
     const dim = this.dimmed(n);
     const sig = JSON.stringify([type, task, st.word, st.tone, st.state, who.source, dim, n.status]);
@@ -735,6 +786,9 @@ export class Canvas {
     el.classList.toggle('cv-dim', dim);
     p.name.textContent = type;
     p.task.textContent = task;
+    // Both are cut to the card's width; hovering says them whole, and the type as it is declared.
+    p.name.title = n.kind === 'workflow' ? '' : (n.agentType ?? '');
+    p.task.title = task;
     if (compact) {
       p.dot.dataset.tone = st.tone ?? 'none';
       p.word.textContent = st.word;
@@ -752,19 +806,26 @@ export class Canvas {
     const p = el.parts;
     const counts = it.counts;
     const says = Object.entries(counts).map(([s, c]) => `${c} ${agentStatus(s).word}`).join(' · ');
-    const sig = JSON.stringify([it.label, says, it.open, it.type, it.status]);
+    const sig = JSON.stringify([it.label, says, it.open, it.boxed, it.type, it.status]);
     if (el.sig !== sig) {
       el.sig = sig;
       el.dataset.state = stateOf(it.status);
       el.dataset.status = it.status;
       el.dataset.group = it.type;
       el.dataset.open = String(Boolean(it.open));
+      // Open beside itself: the card stays a card and its agents are the next column.
+      el.dataset.aside = String(Boolean(it.open && !it.boxed));
       p.name.textContent = it.label;
+      p.name.title = it.real ?? '';
       if (it.type === 'run') { p.tile.innerHTML = MARK.run; p.tile.title = 'Workflow run'; }
       else this.#fillTile(p.tile, it.type === 'type' ? { agentType: it.agentType } : (it.of ?? {}));
-      p.sub.textContent = it.type === 'type' ? '' : `${it.members.length} ${it.members.length === 1 ? 'agent' : 'agents'}`;
-      p.fold.innerHTML = it.open ? MARK.down : MARK.chevron;
-      p.fold.setAttribute('aria-label', `${it.open ? 'Fold' : 'Open'} ${it.label}`);
+      // Several agents of one type: the number is a badge beside the role. Any other group says how many it holds.
+      p.sub.textContent = it.type === 'type' ? `× ${it.count}` : `${it.members.length} ${it.members.length === 1 ? 'agent' : 'agents'}`;
+      p.sub.classList.toggle('cv-times', it.type === 'type');
+      p.fold.innerHTML = it.boxed ? MARK.down : MARK.chevron;
+      // Read aloud, the badge is part of the name.
+      const said = it.type === 'type' ? `${it.label} × ${it.count}` : it.label;
+      p.fold.setAttribute('aria-label', `${it.open ? 'Fold' : 'Open'} ${said}`);
       p.fold.setAttribute('aria-expanded', String(Boolean(it.open)));
       // The bar: how the group went, in the order the eye wants it.
       const order = ['done', 'running', 'starting', 'failed', 'killed', 'stopped', 'stale', 'ended'];
@@ -776,11 +837,11 @@ export class Canvas {
         return seg;
       }));
       p.bar.title = says;
-      if (!it.open) p.count.textContent = says;
-      el.title = it.open ? '' : `Click to show ${it.members.length} agents`;
-      el.setAttribute('aria-label', `${it.label}, ${says}, ${it.open ? 'open' : 'folded'}`);
+      if (!it.boxed) p.count.textContent = says;
+      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'}`);
     }
-    if (!it.open) return;
+    if (!it.boxed) return;
 
     for (const cell of it.cells) {
       liveCells.add(cell.id);
@@ -816,7 +877,7 @@ export class Canvas {
       const st = this.#statusOf(n);
       const who = it.grid ? this.#identity(n) : this.#fillTile(c.parts.tile, n);
       // Inside a group of one type the type is the group's name, so a member is told apart by its task.
-      const text = it.type === 'type' ? (n.description || n.agentType || n.id) : (n.agentType ?? 'unknown agent');
+      const text = it.type === 'type' ? (n.description || shownType(n) || n.id) : shownType(n);
       const dim = this.dimmed(n);
       const csig = JSON.stringify([text, st.word, st.tone, st.state, dim, this.selected === n.id]);
       if (c.sig === csig) continue;
@@ -826,9 +887,10 @@ export class Canvas {
       c.classList.toggle('cv-dim', dim);
       c.classList.toggle('cv-selected', this.selected === n.id);
       c.parts.name.textContent = text;
+      c.title = hoverOf(n);
       c.parts.dot.dataset.tone = st.tone ?? 'none';
       c.parts.word.textContent = st.word;
-      c.setAttribute('aria-label', `${n.agentType ?? 'unknown agent'}, ${st.word}${n.description ? `, ${n.description}` : ''} (${who.title})`);
+      c.setAttribute('aria-label', `${shownType(n)}, ${st.word}${n.description ? `, ${n.description}` : ''} (${who.title})`);
     }
   }
 
@@ -986,11 +1048,23 @@ export class Canvas {
     const it = this.lastPlan?.items.find((x) => x.id === groupId);
     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) {
+      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;
     this.#persist();
     this.#redraw();
   }
 
+  /** Whether an agent group opens into the next column (a window with room) or downward (a narrow one). */
+  setAside(on) {
+    if (this.aside === Boolean(on)) return;
+    this.aside = Boolean(on);
+    this.sessionY = null;
+    if (this.lastPlan) this.#redraw({ fit: true });
+  }
+
   /** Drop the selection without pretending a card was clicked. */
   clearSelection() {
     this.selected = null;
@@ -1141,7 +1215,8 @@ export class Canvas {
         if (n.tokens != null) bits.push(`${fmtTokens(n.tokens)} tokens`);
         if (n.errors) bits.push(`${n.errors} ${n.errors === 1 ? 'error' : 'errors'}`);
         this.tipEl.replaceChildren(
-          mk('strong', null, n.agentType ?? 'unknown agent'),
+          mk('strong', null, shownType(n)),
+          mk('div', 'cv-sub cv-real', n.agentType ?? ''),
           mk('div', null, n.description || 'No task recorded'),
           mk('div', 'cv-sub', bits.length ? bits.join(' · ') : 'No numbers yet'),
         );

package/kit/studio/web/chat.js

@@ -375,6 +375,7 @@ class Pane {
     node.sig = sig;
     const text = el('span', 'deleg-text');
     text.append(el('span', 'deleg-type', card.type), el('span', 'deleg-task', card.task));
+    text.title = [card.real, card.task].filter(Boolean).join('\n');
     const parts = [];
     const tile = card.agentId ? this.hooks.tileOf?.(this.id, card.agentId) : null;
     if (tile) parts.push(tile);

package/kit/studio/web/convo.js

@@ -3,6 +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';
 
 // 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;
@@ -76,7 +77,8 @@ export function outputOf(block) {
 export function delegationCard(block, nodes) {
   const node = block.id ? (nodes ?? []).find((n) => n.kind === 'agent' && n.toolUseId === block.id) ?? null : null;
   return {
-    type: block.subagentType ?? node?.agentType ?? 'agent',
+    type: roleName(block.subagentType ?? node?.agentType ?? 'agent'),
+    real: block.subagentType ?? node?.agentType ?? null,
     task: block.label ?? node?.description ?? '',
     agentId: node?.id ?? null,
     status: node?.status ?? null,
@@ -121,7 +123,7 @@ export function refusals(denials, wasAllowed, resultOf = () => null) {
 export function reminderOf(waiting) {
   const list = waiting ?? [];
   if (!list.length) return null;
-  const who = list[0].agentType ?? 'This session';
+  const who = list[0].agentType ? roleName(list[0].agentType) : 'This session';
   const more = list.length - 1;
   return `${who} is waiting for approval${more > 0 ? `, and ${more} more ${more === 1 ? 'request is' : 'requests are'}` : ''}`;
 }

package/kit/studio/web/dock.js

@@ -184,6 +184,7 @@ export class Dock {
     p.word.textContent = 'Needs you';
 
     p.who.textContent = asker(item);
+    p.who.title = item.agentType ? `${item.agentType} — show on the canvas` : 'Show on the canvas';
     p.tool.textContent = item.toolName;
     const where = this.where(item);
     p.where.hidden = !where;

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

@@ -15,6 +15,8 @@
 //    view, so zooming cannot move a card.
 // 3. Colour is not decided here at all. A box carries its status; the stylesheet turns status into colour.
 
+import { typeOf, roleName, shownType } from './names.js';
+
 /* ------------------------------------------------------------- measures --- */
 
 export const SIZE = {
@@ -68,7 +70,6 @@ const SESSION = 'session';
 
 /* --------------------------------------------------------------- groups --- */
 
-const typeOf = (n) => n.agentType ?? 'unknown agent';
 const byArrival = (seq) => (a, b) => (seq.get(a.id) ?? 0) - (seq.get(b.id) ?? 0);
 
 /** Counts by status, in the order a bar draws them. */
@@ -132,8 +133,11 @@ export function sequence(nodes, seq = new Map()) {
  *
  * At `auto` density, once the picture is too tall (`stack`), siblings of one type fold into a group from
  * AUTO.stackAt whatever the grouping is, except under `none`, which means none.
+ *
+ * `aside(id)` says a type group is open beside itself: its members are then items of their own, one column to the
+ * right of the group's card, and what they spawned is a column further on.
  */
-function itemsOf(nodes, { group, density, seq, stack }) {
+function itemsOf(nodes, { group, density, seq, stack, aside }) {
   const byId = new Map(nodes.map((n) => [n.id, n]));
   const kids = new Map();
   for (const n of nodes) {
@@ -158,7 +162,7 @@ function itemsOf(nodes, { group, density, seq, stack }) {
     // An agent's children as one group.
     if (group === 'parent' && list.length >= 2 && byId.get(parentId)?.kind === 'agent') {
       const g = groupItem(`kids:${parentId}`, 'parent', list, anchor, via, depth, seq, {
-        label: `${typeOf(byId.get(parentId))} → ${list.length}`, of: byId.get(parentId),
+        label: `${shownType(byId.get(parentId))} → ${list.length}`, of: byId.get(parentId),
       });
       items.push(g);
       for (const m of list) place(m.id, g, m.id, depth + 1);
@@ -176,10 +180,18 @@ function itemsOf(nodes, { group, density, seq, stack }) {
     for (const [t, members] of types) {
       if (members.length < stackAt) continue;
       const g = groupItem(`type:${parentId}:${t}`, 'type', members, anchor, via, depth, seq, {
-        label: `${t} × ${members.length}`, agentType: members[0].agentType ?? null,
+        // The role is the name and the number is a badge beside it: `count` is drawn apart from `label`.
+        label: roleName(t), count: members.length, real: t, agentType: members[0].agentType ?? null,
       });
       items.push(g);
-      for (const m of members) { stacked.add(m.id); place(m.id, g, m.id, depth + 1); }
+      g.aside = Boolean(aside?.(g.id));
+      for (const m of members) {
+        stacked.add(m.id);
+        if (!g.aside) { place(m.id, g, m.id, depth + 1); continue; }
+        const item = { id: m.id, kind: 'agent', node: m, parent: g, via: null, depth: depth + 1, seq: seq.get(m.id) ?? 0, member: true };
+        items.push(item);
+        place(m.id, item, null, depth + 2);
+      }
     }
 
     for (const n of list) {
@@ -229,6 +241,8 @@ function groupItem(id, type, members, anchor, via, depth, seq, extra) {
  * @param opts.open      Map groupId -> boolean, the viewer's own folds; a group not in it takes its default
  * @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.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 }
  */
 export function plan(nodes, opts = {}) {
@@ -240,6 +254,7 @@ export function plan(nodes, opts = {}) {
 
   // 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;
 
   // 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) => {
@@ -254,7 +269,8 @@ export function plan(nodes, opts = {}) {
     let count = 0;
     for (const it of shown) {
       if (it.kind === 'agent' || it.kind === 'run-card') count += 1;
-      else if (it.kind === 'group') count += isOpen(it) ? it.members.length : 1;
+      // A group open beside itself has its agents among the items already.
+      else if (it.kind === 'group' && !it.aside) count += isOpen(it) ? it.members.length : 1;
     }
     return { shown, count };
   };
@@ -271,7 +287,9 @@ export function plan(nodes, opts = {}) {
         continue;
       }
       it.open = isOpen(it);
-      if (!it.open) { it.w = SIZE.card.w; it.h = SIZE.card.h; it.cells = null; continue; }
+      // `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; }
       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;
@@ -349,13 +367,13 @@ export function plan(nodes, opts = {}) {
 
   // Auto, in the order it reaches for things: nothing while the picture is short enough to read; siblings of one
   // type folded together when it is not; chips if it still is not.
-  let pass = drawFrom(itemsOf(nodes, { group, density: asked, seq, stack: false }));
+  let pass = drawFrom(itemsOf(nodes, { group, density: asked, seq, stack: false, aside }));
   let compact = asked === 'compact';
   let stacked = false;
   let box = lay(pass.shown, compact);
   if (asked === 'auto' && box.height > AUTO.tallest) {
     if (group !== 'none' && group !== 'type') {
-      const folded = drawFrom(itemsOf(nodes, { group, density: asked, seq, stack: true }));
+      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); }
@@ -400,7 +418,7 @@ export function plan(nodes, opts = {}) {
 
   return {
     items: drawnItems, edges, width: Math.max(width, SIZE.padX * 2), height: Math.max(height, SIZE.padY * 2),
-    drawn, density, group, stacked, sessionY: sessionY ?? null,
+    drawn, density, group, stacked, aside: Boolean(aside), sessionY: sessionY ?? null,
   };
 }
 
@@ -432,6 +450,42 @@ export function fitZoom(width, height, paneW, paneH) {
   return Math.min(ZOOM.max, Math.max(ZOOM.min, k));
 }
 
+/* --------------------------------------------------------------- settle --- */
+
+/**
+ * What the transcript cannot say and the live session can.
+ *
+ * An agent started in the background can sit inside one tool call for twenty minutes and write nothing. The
+ * server, reading files, calls that `stale` or `ended`; it cannot tell it from an agent whose session was closed
+ * under it. The machine can: while the session is running, an agent whose transcript stops in the middle of a
+ * turn is working. So is a command sent to the background that no notice has ended.
+ *
+ * @param graph  the server's { nodes, stats }
+ * @param live   true when the machine reports the session as running; anything else changes nothing
+ * @returns the graph to draw: the same object when nothing in it needed saying differently
+ */
+export function settle(graph, live) {
+  const nodes = graph?.nodes ?? [];
+  const quiet = (n) => n.kind === 'agent' && n.background && n.midTurn && (n.status === 'stale' || n.status === 'ended');
+  const session = nodes.find((n) => n.kind === 'session');
+  const commands = live === true ? (session?.backgroundCommands ?? []) : [];
+  if (live !== true || !nodes.some(quiet)) {
+    if (!session || (session.backgroundNow ?? []).length === commands.length) {
+      return session ? { ...graph, nodes: nodes.map((n) => (n === session ? { ...n, backgroundNow: commands } : n)) } : graph;
+    }
+  }
+  const byStatus = { ...(graph.stats?.byStatus ?? {}) };
+  const out = nodes.map((n) => {
+    if (n === session) return { ...n, backgroundNow: commands };
+    if (live !== true || !quiet(n)) return n;
+    byStatus[n.status] -= 1;
+    if (!byStatus[n.status]) delete byStatus[n.status];
+    byStatus.running = (byStatus.running ?? 0) + 1;
+    return { ...n, status: 'running', quiet: true };
+  });
+  return { ...graph, nodes: out, stats: graph.stats ? { ...graph.stats, byStatus } : graph.stats };
+}
+
 /* ------------------------------------------------------------ attention --- */
 
 /**
@@ -445,11 +499,12 @@ export function attention(nodes, waiting = new Set()) {
   const needs = agents.filter((n) => waiting.has(n.id)).sort((a, b) => when(b) - when(a));
   const failed = agents.filter((n) => !waiting.has(n.id) && stateOf(n.status) === 'failed').sort((a, b) => when(b) - when(a));
   return [
-    ...needs.map((n) => ({ id: n.id, tone: 'waiting', name: typeOf(n), says: 'waiting for you' })),
+    ...needs.map((n) => ({ id: n.id, tone: 'waiting', name: shownType(n), real: typeOf(n), says: 'waiting for you' })),
     ...failed.map((n) => ({
       id: n.id,
       tone: 'fail',
-      name: typeOf(n),
+      name: shownType(n),
+      real: typeOf(n),
       says: [n.status, n.errors ? `${n.errors} ${n.errors === 1 ? 'error' : 'errors'}` : null,
         n.workflow ? `in ${n.workflow}` : null].filter(Boolean).join(' · '),
     })),

package/kit/studio/web/index.html

@@ -133,6 +133,7 @@
     <div id="timeline" role="tabpanel" aria-labelledby="view-timeline" hidden></div>
     <div id="list" role="tabpanel" aria-labelledby="view-list" 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>
   </main>
 

package/kit/studio/web/inspect.js

@@ -3,6 +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';
 
 const NOT_MEASURED = 'Not measured';
 
@@ -87,13 +88,25 @@ export function skillsOf(detail) {
   return seen;
 }
 
+/**
+ * The commands a session has running in the background, as lines: what runs, and for how long.
+ * `backgroundNow` is empty unless the session is live (graph-plan.js `settle`), so a session that is over lists none.
+ */
+export function backgroundLines(session, now) {
+  return (session?.backgroundNow ?? []).map((c) => ({
+    id: c.id,
+    what: `${c.toolName}${c.detail ? ` · ${c.detail}` : ''}`,
+    age: c.startedAt != null && now >= c.startedAt ? fmtDuration(now - c.startedAt) : null,
+  }));
+}
+
 /** 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;
   if (!p) return null;
   if (p.kind === 'session') return { id: p.id, text: `Session${p.gitBranch ? ` · ${p.gitBranch}` : ''}` };
   if (p.kind === 'workflow') return { id: p.id, text: `Workflow run · ${p.workflowId ?? p.id}` };
-  return { id: p.id, text: p.agentType ?? p.id };
+  return { id: p.id, text: p.agentType ? roleName(p.agentType) : p.id };
 }
 
 /** The report, or the plain statement that there is none yet and why. */

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

@@ -4,8 +4,7 @@
 // needs someone is always at the top. A status this panel has no word for is not put into one of the four: it
 // gets a section of its own, under its own name, after them.
 import { stateOf } from './graph-plan.js';
-
-const typeOf = (n) => n.agentType ?? 'unknown agent';
+import { typeOf, shownType } from './names.js';
 
 /** "8m", "1h 4m", "40s": how long, in as little room as a row has. */
 export function short(ms) {
@@ -28,13 +27,14 @@ function rowOf(n, now) {
     // The count the transcript gave. An agent can fail without a tool error; then there is none to report.
     if (n.errors) bits.push(`${n.errors} ${n.errors === 1 ? 'error' : 'errors'}`);
     if (n.status !== 'failed') bits.push(n.status);
-    return { id: n.id, node: n, type: typeOf(n), line: bits.join(' · ') || (n.description ?? ''), aside: null };
+    return { id: n.id, node: n, type: shownType(n), real: typeOf(n), line: bits.join(' · ') || (n.description ?? ''), aside: null };
   }
   const live = state === 'live' || state === 'waking';
   return {
     id: n.id,
     node: n,
-    type: typeOf(n),
+    type: shownType(n),
+    real: typeOf(n),
     line: n.description ?? '',
     // How long it has been going. With no start recorded there is nothing to count from, and nothing is shown.
     aside: state === 'waking' ? 'starting' : live && n.startedAt != null ? short(now - n.startedAt) : null,

package/kit/studio/web/list.js

@@ -4,6 +4,7 @@
 // own three answers, so in this view the approval dock is not needed and is not shown.
 import { sections, wants } from './list-plan.js';
 import { Press } from './press.js';
+import { hoverOf } from './names.js';
 import { remaining, asker, allowSessionLabel, VERDICTS } from './approvals.js';
 
 function mk(tag, cls, text) {
@@ -146,6 +147,7 @@ export class List {
     if (tile) row.append(tile);
     const text = mk('span', 'ls-text');
     text.append(mk('span', 'ls-name', r.type), mk('span', 'ls-line', r.line));
+    row.title = hoverOf(r.node);
     row.append(text);
     if (r.aside) row.append(mk('span', 'sub ls-aside', r.aside));
     const chev = mk('span', 'ls-chev');

package/kit/studio/web/names.js

@@ -0,0 +1,33 @@
+// What an agent is called on screen.
+//
+// An agent's type is a file name: `crew-test-expert`, `general-purpose`. Drawn as it is, a column of cards reads
+// "crew-…-expert" twelve times and the word that tells them apart is cut off first. The views show the role
+// instead ("Test", "General Purpose"); the type itself is in the inspector and on hover, and nothing is renamed
+// anywhere but on screen. Keys, ids and comparisons use the type.
+
+// A word that is not written the way capitalising its first letter would write it.
+const WORD = { devops: 'DevOps' };
+
+/** The type as the transcript has it; an agent with none is said to have none. */
+export const typeOf = (n) => n?.agentType ?? 'unknown agent';
+
+/**
+ * `crew-backend-expert` → Backend · `crew-session-manager` → Session Manager · `general-purpose` → General Purpose.
+ * Crewforth's own prefix and its `-expert` / `-agent` suffix go; what is left is the role. A name that is not
+ * made of hyphenated words (it has a space, or nothing to split) is returned as it came.
+ */
+export function roleName(type) {
+  if (typeof type !== 'string' || !type || /\s/.test(type)) return type ?? '';
+  const crew = type.startsWith('crew-');
+  const core = crew ? type.slice(5).replace(/-(expert|agent)$/, '') : type;
+  if (!core) return type;
+  return core.split('-').filter(Boolean)
+    .map((w) => WORD[w] ?? (w[0].toUpperCase() + w.slice(1)))
+    .join(' ');
+}
+
+/** The name a node is drawn with. */
+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. */
+export const hoverOf = (n) => [n?.agentType ?? null, n?.description ?? null].filter(Boolean).join('\n');