crewforth 3.1.0-rc.1 → 3.1.0-rc.3

package/kit/studio/web/app.js

@@ -15,15 +15,17 @@ import {
   liveSessions, machines, seenAgo, isFirstRun,
 } from './nav.js';
 import { liveness, offlineNote } from './liveness.js';
-import { attention, AUTO } from './graph-plan.js';
-import { ServerClock, queue, settled, OUTCOME_WORD } from './approvals.js';
+import { attention, settle, AUTO } from './graph-plan.js';
+import { summaryRows, usageLine, costNote } from './usage.js';
+import { ServerClock, queue, settled, terminalWait, OUTCOME_WORD } from './approvals.js';
 import { Dock } from './dock.js';
 import { NewSession } from './newsession.js';
 import { Timeline } from './timeline.js';
 import { List } from './list.js';
 import { defaultView, narrowWarning } from './list-plan.js';
 import { fitLevel, runsOver } from './toolbar-fit.js';
-import { fmtDuration, fmtTokens, tiles, timeLine, rightNow, skillsOf, delegatedBy, reportOf, TABS as INSPECTOR_TABS, TAB_WORD } from './inspect.js';
+import { roleName, shownType } from './names.js';
+import { fmtDuration, fmtTokens, tiles, timeLine, rightNow, skillsOf, delegatedBy, reportOf, backgroundLines, TABS as INSPECTOR_TABS, TAB_WORD } from './inspect.js';
 
 const FLEET_POLL_MS = 2000;
 const SESSION_POLL_MS = 5000;
@@ -54,6 +56,7 @@ const el = {
   toast: document.getElementById('toast'),
   attention: document.getElementById('attention'),
   dock: document.getElementById('dock'),
+  terminalWait: document.getElementById('terminal-wait'),
   newPanel: document.getElementById('new-panel'),
   tbGroup: document.getElementById('tb-group'),
   tbDensity: document.getElementById('tb-density'),
@@ -132,6 +135,8 @@ systemLight.addEventListener('change', relabelTheme);
 const PANEL = {
   side: { min: 170, max: 620, def: 272, wide: 460, varName: '--side-w', key: 'crewforth-studio-side-w' },
   chat: { min: 280, max: 900, def: 480, wide: 720, varName: '--chat-w', key: 'crewforth-studio-chat-w' },
+  // The inspector's default is the stylesheet's own --inspector-w.
+  inspector: { min: 280, max: 720, def: 344, varName: '--inspector-w', key: 'crewforth-studio-inspector-w' },
 };
 
 function setPanel(which, px, persist = true) {
@@ -142,7 +147,7 @@ function setPanel(which, px, persist = true) {
   return w;
 }
 
-for (const which of ['side', 'chat']) {
+for (const which of Object.keys(PANEL)) {
   setPanel(which, Number(store.get(PANEL[which].key)) || PANEL[which].def, false);
 }
 
@@ -209,11 +214,20 @@ function dragPanel(handle, which, edge) {
 dragPanel(el.resizer, 'side', 'left');
 dragPanel(el.chatSplit, 'chat', 'right');
 
+// The inspector is filled again whenever its agent changes; its handle is made once and put back each time, so a
+// drag is not cut short by a poll.
+const inspectorSplit = document.createElement('div');
+inspectorSplit.className = 'resizer inspector-split';
+inspectorSplit.setAttribute('role', 'separator');
+inspectorSplit.setAttribute('aria-orientation', 'vertical');
+inspectorSplit.setAttribute('aria-label', 'Resize inspector');
+inspectorSplit.tabIndex = 0;
+dragPanel(inspectorSplit, 'inspector', 'right');
+
 /* ------------------------------------------------------------ full screen
    The browser's own, so it hides the browser too — a panel meant to be watched
-   while work runs should be able to take the whole display. The stylesheet
-   takes the navigator, the inspector and the conversation off with it, so what
-   is left is the canvas; Esc brings everything back. */
+   while work runs should be able to take the whole display. The panels keep
+   their state: what was open stays open, and `[` and `]` still fold the navigator. */
 
 async function toggleFullscreen() {
   try {
@@ -486,6 +500,11 @@ const pickFrom = (button, words, current, set) => button.addEventListener('click
   })));
 });
 pickFrom(el.tbGroup, GROUP_WORD, () => canvas.state().group, (g) => canvas.setGroup(g));
+
+// In a window with room an agent group opens into the next column; in the band where the navigator is a rail
+// there is no room for another column, and it opens downward as it always did.
+canvas.setAside(!railBand.matches);
+railBand.addEventListener('change', () => canvas.setAside(!railBand.matches));
 pickFrom(el.tbDensity, DENSITY_WORD, () => canvas.state().density, (d) => canvas.setDensity(d));
 pickFrom(el.tbShow, SHOW, () => show, (key) => setShow(key));
 // The toolbar is measured, not assumed: it gives up a step at a time until what it shows fits (toolbar-fit.js).
@@ -531,6 +550,10 @@ el.tbOptions.addEventListener('click', (e) => {
   if (view === 'graph' && st.groups > 0) {
     items.push({ note: 'Groups' }, { label: 'Expand all', run: () => canvas.expandAll() }, { label: 'Fold all', run: () => canvas.foldAll() });
   }
+  if (view === 'graph') {
+    const open = canvas.spendOpen;
+    items.push({ note: 'Session summary' }, { label: open ? 'Hide time, tokens and cost' : 'Show time, tokens and cost', run: () => canvas.showSpend(!open) });
+  }
   openMenu(el.tbOptions, items);
 });
 el.tbExpand.addEventListener('click', () => canvas.expandAll());
@@ -760,14 +783,18 @@ function paintInspector() {
   back.append(icon(ICON.back));
   back.addEventListener('click', () => { canvas.clearSelection(); showInspector(null); });
   close.classList.add('ihead-close');
-  const name = isSession ? 'Session' : n.kind === 'workflow' ? (n.workflowId ?? 'Workflow run') : (n.agentType ?? 'unknown agent');
-  head.append(back, canvas.tileFor(n), node('h3', 'iname', name), close);
+  const name = isSession ? 'Session' : n.kind === 'workflow' ? (n.workflowId ?? 'Workflow run') : shownType(n);
+  const iname = node('h3', 'iname', name);
+  if (n.kind === 'agent') iname.title = n.agentType ?? '';
+  head.append(back, canvas.tileFor(n), iname, close);
 
   const meta = node('div', 'imeta');
   const pill = node('span', 'pill');
   // A state nobody read is said, not left as a blank pill.
   pill.append(dot(st.tone), node('span', null, st.word ?? 'State not measured'));
   meta.append(pill, node('span', 'sub', timeLine(n, serverNow())));
+  // The role is the name; the type as it is declared is said here, where there is room for it.
+  if (n.kind === 'agent' && n.agentType) meta.append(node('code', 'ireal', n.agentType));
 
   const task = node('div', 'itask', isSession
     ? (sessionLabel(current) ?? n.sessionId ?? '')
@@ -807,7 +834,7 @@ function paintInspector() {
   copy.addEventListener('click', () => copyText(file, 'Copied'));
   foot.append(open, copy);
 
-  el.inspector.replaceChildren(head, meta, task, tabs, body, foot);
+  el.inspector.replaceChildren(inspectorSplit, head, meta, task, tabs, body, foot);
 }
 
 function paintAgentOverview(body, n, detail) {
@@ -886,6 +913,21 @@ function paintSessionOverview(body, n) {
   }
   body.append(metaRows(n));
 
+  // Commands the session sent to the background and that are still going. They are not agents and have no card.
+  const running = backgroundLines(n, serverNow());
+  if (running.length) {
+    const rows = running.map((c) => {
+      const row = node('div', 'ibg-row');
+      const what = node('code', 'ibg-what', c.what);
+      what.title = c.what;
+      row.append(what);
+      if (c.age) row.append(node('span', 'sub', c.age));
+      return row;
+    });
+    const box = isection('In the background', ...rows);
+    body.append(box);
+  }
+
   const b = kitData?.board;
   let board;
   if (!kitData) board = node('div', 'ihint', 'Reading Crewforth…');
@@ -1056,7 +1098,7 @@ function paintGates(body) {
     for (const a of answers.slice(-12)) {
       const row = node('div', 'gate-row');
       row.append(node('span', 'gate-when', new Date(a.at - clock.offset).toLocaleTimeString()));
-      row.append(node('span', 'gate-name', `${a.toolName}${a.agentType ? ` · ${a.agentType}` : ''}`));
+      row.append(node('span', 'gate-name', `${a.toolName}${a.agentType ? ` · ${roleName(a.agentType)}` : ''}`));
       const v = node('span', 'gate-verdict', OUTCOME_WORD[a.outcome]);
       v.dataset.verdict = a.outcome.startsWith('allowed') ? 'ALLOW' : a.outcome === 'answered-elsewhere' ? 'ASK' : 'BLOCK';
       row.append(v);
@@ -1456,6 +1498,14 @@ function sessionRow(project, sn) {
 
   const subText = sessionSub(sn, status) + (ownedIds.has(sn.sessionId) ? ' · started here' : '');
   if (subText) row.append(marked(subText, 'sub srow-sub'));
+  // What it spent, once the server has read it: time · tokens · ~cost. Asked for a few rows at a time.
+  const spent = usageFor(sn);
+  const line = usageLine(spent);
+  if (line) {
+    const u = node('span', 'sub srow-usage', line);
+    u.title = costNote(spent);
+    row.append(u);
+  }
 
   row.title = `${sn.sessionId}${sn.title ? `\n${sn.title}` : ''}`;
   const open = () => selectSession(sn.sessionId);
@@ -1467,6 +1517,36 @@ function sessionRow(project, sn) {
   return row;
 }
 
+/* What each session spent, for its row. The server reads a transcript once and keeps the answer until it grows, so
+   this asks only for rows that are on screen and whose transcript has changed since it last asked. */
+const usageRows = new Map();    // sessionId -> { at: modifiedAt it was read for, value }
+const usageWanted = new Set();
+let usageBusy = false;
+function usageFor(sn) {
+  const hit = usageRows.get(sn.sessionId);
+  if (!hit || hit.at !== sn.modifiedAt) { usageWanted.add(sn.sessionId); queueMicrotask(pullUsage); }
+  return hit?.value ?? null;
+}
+async function pullUsage() {
+  if (usageBusy || !usageWanted.size) return;
+  usageBusy = true;
+  const ids = [...usageWanted].slice(0, 12);
+  for (const id of ids) usageWanted.delete(id);
+  try {
+    const got = await getJson(`/api/usage?ids=${ids.map(encodeURIComponent).join(',')}`);
+    for (const id of ids) {
+      const sn = findSessionRow(id)?.session;
+      // A session the server did not answer for (another machine's) is remembered as not read, and not asked again
+      // until its row changes.
+      usageRows.set(id, { at: sn?.modifiedAt ?? null, value: got.usage?.[id] ?? null });
+    }
+    paintProjects();
+  } catch { /* the Live indicator says so; the rows keep what they had */ } finally {
+    usageBusy = false;
+    if (usageWanted.size) queueMicrotask(pullUsage);
+  }
+}
+
 function paintProjects() {
   const data = projectsData;
   if (!data || renaming && document.activeElement?.classList?.contains('srow-rename')) return;
@@ -1844,6 +1924,7 @@ function paintAttention(nodes) {
     const b = node('button', 'att');
     b.type = 'button';
     b.append(dot(a.tone), node('span', 'att-name', a.name), node('span', 'att-says', a.says));
+    b.title = a.real ?? '';
     b.addEventListener('click', () => { attentionAt = attentionIds.indexOf(a.id); goTo(a.id); });
     return b;
   });
@@ -1900,36 +1981,13 @@ function selectSession(sessionId) {
   detailCache.clear();
 
   if (source) source.close();
+  lastGraph = null;
   source = new EventSource(api(`/api/stream?session=${encodeURIComponent(sessionId)}`));
 
   source.addEventListener('graph', (e) => {
     heardNow();
-    const g = JSON.parse(e.data);
-    canvas.render(g);
-    lastNodes = g.nodes;
-    timeline.setNodes(g.nodes);
-    list.setNodes(g.nodes);
-    paintAttention(g.nodes);
-    // The conversation's delegation cards and its context figure are the graph's.
-    chat.refresh(sessionId, { contextTokens: g.nodes.find((n) => n.kind === 'session')?.tokens ?? null });
-    // The inspector holds a node object from an earlier frame; refresh it so
-    // status, tokens and tool counts keep moving while it is open.
-    if (inspectorNode) {
-      const fresh = g.nodes.find((n) => n.id === inspectorNode.id);
-      if (fresh) {
-        const changed = fresh.status !== inspectorNode.status;
-        inspectorNode = fresh;
-        paintInspector();
-        if (changed && fresh.kind === 'agent') loadDetail(fresh.id, fresh.status);
-      }
-    }
-    // Every status is named, so the chips add up to the total. A summary that
-    // reports "250 agents · 7 done" and stops invites the reader to assume the
-    // other 243 failed. A count of records that could not be read stays beside
-    // them: it is not a status, and it is not nothing.
-    const s = g.stats ?? {};
-    paintSummary(s, s.malformed ? [`${s.malformed} malformed`] : []);
-    el.foot.textContent = '';
+    lastGraph = JSON.parse(e.data);
+    showGraph();
   });
 
   source.addEventListener('idle', heardNow);
@@ -2053,6 +2111,8 @@ const outcomes = new Map();     // sessionId -> what became of its requests, as
 let waitingNow = [];
 let waitingSig = '';
 let lastNodes = null;
+let lastGraph = null;   // what the stream last sent, before it is settled against the fleet
+let lastLive = null;    // whether the session was live when that was last drawn
 
 function sessionLabel(id) {
   const known = findSessionRow(id);
@@ -2216,6 +2276,67 @@ function paintStageNote() {
   stageNote.retry.textContent = off ? off.retry : '';
   stageNote.retry.hidden = !off;
   stageNote.button.hidden = !off;
+  // The fleet can say a session ended, or came back, with no transcript changing.
+  if (lastGraph && sessionIsLive() !== lastLive) showGraph();
+  paintTerminalWait();
+}
+
+/**
+ * Draw the graph the stream last sent. What the server read from files is settled against what the machine says
+ * of the session first, so this is called again when that changes with no file changing.
+ */
+function showGraph() {
+  if (!lastGraph) return;
+  lastLive = sessionIsLive();
+  const g = settle(lastGraph, lastLive);
+  canvas.render(g);
+  canvas.setSpend(summaryRows(g.nodes.find((n) => n.kind === 'session')?.usage ?? null));
+  lastNodes = g.nodes;
+  timeline.setNodes(g.nodes);
+  list.setNodes(g.nodes);
+  paintAttention(g.nodes);
+  // The conversation's delegation cards and its context figure are the graph's.
+  chat.refresh(current, { contextTokens: g.nodes.find((n) => n.kind === 'session')?.tokens ?? null });
+  // The inspector holds a node object from an earlier frame; refresh it so
+  // status, tokens and tool counts keep moving while it is open.
+  if (inspectorNode) {
+    const fresh = g.nodes.find((n) => n.id === inspectorNode.id);
+    if (fresh) {
+      const changed = fresh.status !== inspectorNode.status;
+      inspectorNode = fresh;
+      paintInspector();
+      if (changed && fresh.kind === 'agent') loadDetail(fresh.id, fresh.status);
+    }
+  }
+  // Every status is named, so the chips add up to the total. A summary that
+  // reports "250 agents · 7 done" and stops invites the reader to assume the
+  // other 243 failed. A count of records that could not be read stays beside
+  // them: it is not a status, and it is not nothing.
+  const s = g.stats ?? {};
+  paintSummary(s, s.malformed ? [`${s.malformed} malformed`] : []);
+  el.foot.textContent = '';
+}
+
+/** A session waiting on its own terminal is said under the view, with what it asks about. */
+let terminalWaitSig = '';
+function paintTerminalWait() {
+  const session = lastNodes?.find((n) => n.kind === 'session') ?? null;
+  const w = current
+    ? terminalWait(sessionStatus(current, fleetData), session, ownedIds.has(current) || owned.has(current))
+    : null;
+  const sig = w ? `${w.text}|${w.what ?? ''}` : '';
+  if (sig === terminalWaitSig) return;
+  terminalWaitSig = sig;
+  el.terminalWait.hidden = !w;
+  if (w) {
+    const what = node('span', 'terminal-wait-what', w.what ?? '');
+    what.title = w.what ?? '';
+    el.terminalWait.replaceChildren(
+      node('span', 'terminal-wait-word', `${w.text}${w.what ? ':' : ''}`), what,
+      node('span', 'sub terminal-wait-note', 'Studio answers only for sessions started here'),
+    );
+  }
+  canvas.fitIfUntouched();
 }
 
 function retryNow() {

package/kit/studio/web/approvals.js

@@ -7,6 +7,7 @@
 // Every number here is the server's. How long the hook waits (`gateWaitSeconds`), when a request was asked
 // (`askedAt`) and what time it is now (`now`) all come from the machine the hook runs on, so a viewer whose clock
 // differs — a browser on the far end of a tunnel — still counts down to the moment the hook will really give up.
+import { roleName } from './names.js';
 
 /** The server's clock, as seen from this page: the difference is measured each time the server says what time it is. */
 export class ServerClock {
@@ -70,8 +71,26 @@ export function remaining(item, serverNowMs) {
 }
 
 /** Who asked, in the words the dock uses. A call from the session itself has no agent, and says so. */
+/**
+ * A session started in a terminal that is waiting for its user there. Studio cannot answer for it: the question
+ * is Claude Code's own prompt, in that terminal, and no hook of the panel's is in that session.
+ *
+ * @param status   the session's state as the machine reports it (nav.js `sessionStatus`)
+ * @param session  the graph's session node, whose `openCall` is the newest call with no result
+ * @param ownedHere true when the panel started this session: its requests are in the dock instead
+ * @returns null, or { text, what } — `what` is the tool and its command when the transcript has them, and
+ *          otherwise what the CLI itself says it waits for; nothing is made up when neither is there.
+ */
+export function terminalWait(status, session, ownedHere) {
+  if (ownedHere || status?.key !== 'waiting') return null;
+  const call = session?.openCall ?? null;
+  const who = call?.agentType ? `${roleName(call.agentType)} · ` : '';
+  const what = call ? `${who}${call.toolName}${call.detail ? ` · ${call.detail}` : ''}` : (status.waitingFor ?? null);
+  return { text: 'Waiting for an answer in the terminal', what };
+}
+
 export function asker(item) {
-  return item.agentType ?? 'Session';
+  return item.agentType ? roleName(item.agentType) : 'Session';
 }
 
 export const VERDICTS = {

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