crewforth 3.1.0-rc.2 → 3.1.0-rc.4

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

@@ -15,11 +15,14 @@
 //    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 = {
   padX: 24, padY: 16,          // the canvas's own margin
   colGap: 56,                  // between one depth and the next
+  waveGap: 148,                // between one wave and the next: room for the words on an inferred wire
   rowGap: 12,                  // between siblings
   session: { w: 200, h: 84 },
   card: { w: 248, h: 64 },     // an agent, and a folded group
@@ -46,7 +49,7 @@ export const AUTO = {
   stackAt: 3,
 };
 
-export const GROUPINGS = ['run', 'type', 'parent', 'none'];
+export const GROUPINGS = ['run', 'type', 'parent', 'order', 'none'];
 export const DENSITIES = ['auto', 'comfortable', 'compact'];
 
 // The handful of things a status means to a reader. `killed` and `stopped` come off the transcript verbatim and
@@ -68,7 +71,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 +134,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 +163,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 +181,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) {
@@ -215,6 +228,8 @@ function groupItem(id, type, members, anchor, via, depth, seq, extra) {
     via,
     depth,
     seq: Math.min(...members.map((m) => seq.get(m.id) ?? 0), Infinity),
+    // The group stands where its first member does in the order the session called its agents.
+    first: members.filter((m) => m.order != null).sort((a, b) => a.order - b.order)[0] ?? null,
     ...extra,
   };
 }
@@ -229,17 +244,21 @@ 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 = {}) {
   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 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;
 
   // 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 +273,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 +291,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 +371,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 +422,108 @@ 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,
+  };
+}
+
+/* ---------------------------------------------------------------- order --- */
+
+// What the wire from an agent to a later wave is called, and what it is: a reading of the order of events.
+export const INFERRED_NOTE = 'Inferred from the order of events: this wave was called after that agent reported. It is not a call from one agent to another; the session calls every agent.';
+
+/**
+ * The same agents by when the session called them.
+ *
+ * Every agent is called by the session, so the tree is one level deep and says nothing of sequence. Here a
+ * column is a WAVE: the agents called in one assistant message, which is what "started together" means. Waves
+ * run left to right in the order the messages were written, and a wave's agents stack in the order of the calls.
+ * Agents the session's transcript did not call (a workflow's) have no wave and take a last column of their own.
+ *
+ * Two kinds of wire. The session is wired to the first wave: it called it. A later wave is wired, dotted, from
+ * 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) {
+  const pinned = opts.pinned ?? new Map();
+  const session = nodes.find((n) => n.kind === 'session') ?? null;
+  const agents = nodes.filter((n) => n.kind === 'agent');
+  const called = agents.filter((n) => n.wave != null);
+  const waveIds = [...new Set(called.map((n) => n.wave))].sort((a, b) => a - b);
+  const byOrder = (a, b) => (a.order ?? 0) - (b.order ?? 0) || String(a.id).localeCompare(String(b.id));
+  const columns = waveIds.map((w) => ({ wave: w, members: called.filter((n) => n.wave === w).sort(byOrder) }));
+  for (const c of columns) c.calledAt = Math.min(...c.members.map((m) => m.calledAt ?? Infinity));
+  const rest = agents.filter((n) => n.wave == null)
+    .sort((a, b) => (a.startedAt ?? Infinity) - (b.startedAt ?? Infinity) || String(a.id).localeCompare(String(b.id)));
+  if (rest.length) columns.push({ wave: null, members: rest, calledAt: Infinity });
+
+  const lay = (compact) => {
+    const sz = compact ? SIZE.chip : SIZE.card;
+    const items = [];
+    const x0 = SIZE.padX + (session ? SIZE.session.w + SIZE.colGap : 0);
+    let height = 0;
+    columns.forEach((col, i) => {
+      col.members.forEach((n, j) => {
+        items.push({
+          id: n.id, kind: 'agent', node: n, parent: null, via: null, depth: i + 1, seq: n.order ?? j, compact,
+          wave: col.wave, w: sz.w, h: sz.h, x: x0 + i * (sz.w + SIZE.waveGap), y: SIZE.padY + j * (sz.h + SIZE.rowGap),
+        });
+      });
+      height = Math.max(height, SIZE.padY * 2 + col.members.length * (sz.h + SIZE.rowGap) - SIZE.rowGap);
+    });
+    const width = x0 + Math.max(0, columns.length * (sz.w + SIZE.waveGap) - SIZE.waveGap) + SIZE.padX;
+    return { items, width, height };
+  };
+  let compact = asked === 'compact';
+  let box = lay(compact);
+  if (asked === 'auto' && box.height > AUTO.tallest) { compact = true; box = lay(true); }
+  const { items } = box;
+  let { height } = box;
+
+  let sessionY = opts.sessionY ?? null;
+  if (session) {
+    const first = items.filter((it) => it.depth === 1);
+    if (sessionY == null) {
+      const bottom = first.length ? Math.max(...first.map((it) => it.y + it.h)) : SIZE.padY + SIZE.session.h;
+      sessionY = Math.max(SIZE.padY, Math.round((SIZE.padY + bottom) / 2 - SIZE.session.h / 2));
+    }
+    items.unshift({ id: session.id, kind: 'session', node: session, parent: null, depth: 0, w: SIZE.session.w, h: SIZE.session.h, x: SIZE.padX, y: sessionY });
+    height = Math.max(height, sessionY + SIZE.session.h + SIZE.padY);
+  }
+  for (const it of items) {
+    const p = pinned.get(it.id);
+    if (p) { it.x = p.x; it.y = p.y; it.pinned = true; }
+  }
+
+  const at = new Map(items.map((it) => [it.id, it]));
+  const edges = [];
+  const wire = (from, to, extra) => edges.push({
+    key: `${from.id}\u0000${to.id}`, source: from.id, target: to.id,
+    from: { x: from.x + from.w, y: from.y + from.h / 2 }, to: { x: to.x, y: to.y + to.h / 2 },
+    status: to.node.status ?? 'unknown', state: stateOf(to.node.status), ...extra,
+  });
+  const waves = columns.filter((c) => c.wave != null);
+  if (session && waves.length) for (const m of waves[0].members) wire(at.get(session.id), at.get(m.id), {});
+  // An agent's report belongs to the first wave called after it: the one that could have been waiting for it.
+  for (let i = 1; i < waves.length; i += 1) {
+    const since = waves[i - 1].calledAt;
+    const reporters = called.filter((n) => n.reportedAt != null && n.reportedAt > since && n.reportedAt <= waves[i].calledAt
+      && n.wave < waves[i].wave).sort(byOrder);
+    waves[i].after = reporters;
+    for (const r of reporters) {
+      waves[i].members.forEach((m, k) => wire(at.get(r.id), at.get(m.id), {
+        kind: 'inferred', state: 'inferred',
+        // Said once for a reporter, on the wire to the wave's first agent; the others carry it on hover.
+        label: k === 0 ? `after ${shownType(r)} reported` : null,
+        title: `after ${shownType(r)} reported\n${INFERRED_NOTE}`,
+      }));
+    }
+    for (const m of waves[i].members) at.get(m.id).after = reporters.map((r) => shownType(r));
+  }
+
+  return {
+    items, edges, width: Math.max(box.width, SIZE.padX * 2), height: Math.max(height, SIZE.padY * 2),
+    drawn: agents.length, density: compact ? 'compact' : 'comfortable', group: 'order', stacked: false, aside: false,
+    waves: waves.length, sessionY,
   };
 }
 
@@ -432,6 +555,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 +604,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,44 @@
+// 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');
+
+/**
+ * Where an agent stands among the ones the session called, as a tag: "#3 · 09:14". The number is the order of
+ * the calls; the time is when the call was made, in the viewer's own zone. An agent the session's transcript did
+ * not call has no place to state, and gets no tag.
+ * @param clock  (ms) => "HH:MM"
+ */
+export function orderTag(n, clock = null) {
+  if (n?.order == null) return '';
+  return `#${n.order}${clock && n.calledAt != null ? ` · ${clock(n.calledAt)}` : ''}`;
+}

package/kit/studio/web/style.css

@@ -362,6 +362,9 @@ body.resizing .cv-root { pointer-events: none; }
 .sub { font-size: 12px; line-height: 16px; color: var(--ink-dim); white-space: nowrap; flex: none; }
 .srow-sub { padding-left: var(--space-4); flex: initial; overflow: hidden; text-overflow: ellipsis; }
 .srow.remote .srow-sub { padding-left: var(--space-6); }
+/* What the session spent, under its state: time, tokens and the estimate. */
+.srow-usage { padding-left: var(--space-4); flex: initial; overflow: hidden; text-overflow: ellipsis; font-variant-numeric: tabular-nums; color: var(--ink-faint); }
+.srow.remote .srow-usage { padding-left: var(--space-6); }
 .sub.bad, .nav-line.bad { color: var(--status-bad); }
 mark { background: color-mix(in srgb, var(--studio-accent) 30%, transparent); color: inherit; border-radius: 2px; }
 
@@ -722,6 +725,23 @@ button.tl-lab { cursor: pointer; }
 .att-says { color: var(--ink-dim); }
 .attention-hint { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
 
+/* A session waiting on its own terminal: said where an approval would be, with no answers, because there are
+   none to give from here. */
+.terminal-wait {
+  flex: none; min-width: 0;
+  display: flex; align-items: baseline; gap: var(--space-2);
+  padding: var(--space-2) var(--space-4);
+  border-top: 1px solid var(--line); background: var(--surface);
+  font-size: 13px;
+}
+.terminal-wait[hidden] { display: none; }
+.terminal-wait-word { flex: none; font-weight: 600; color: var(--status-waiting); }
+.terminal-wait-what {
+  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
+  font-family: var(--font-mono); font-size: 12px; color: var(--ink-dim);
+}
+.terminal-wait-note { flex: none; margin-left: auto; }
+
 /* -------------------------------------------------------------- dock ---
    The approval dock: a row under the canvas, there only while a tool call is
    waiting. It is part of the stage's column, so the canvas above it stays
@@ -816,6 +836,21 @@ button.tl-lab { cursor: pointer; }
 }
 
 /* Working. The brightest and the only one that travels. */
+/* A wire that is an inference, not a call: dotted, still, and it can be hovered for what it means. A working wire
+   is dashed and moves; this one is neither. */
+.cv-edge[data-kind="inferred"] {
+  stroke: var(--ink-faint);
+  stroke-dasharray: 1.5 5;
+  pointer-events: stroke;
+}
+.cv-edge-label { font-size: 10px; fill: var(--ink-faint); pointer-events: none; }
+/* "#3 · 09:14": where a card stands in the order the session called its agents. */
+.cv-under { display: flex; align-items: baseline; min-width: 0; }
+.cv-under .cv-task { flex: 1 1 auto; min-width: 0; }
+.cv-order { flex: none; margin-left: 6px; font-family: var(--font-mono); font-size: 10px; color: var(--ink-faint); font-variant-numeric: tabular-nums; white-space: nowrap; }
+.cv-order[hidden] { display: none; }
+.cv-chip .cv-order, .cv-member .cv-order { margin-left: 0; margin-right: 6px; }
+
 .cv-edge[data-state="live"] {
   stroke: var(--status-busy);
   opacity: var(--cv-edge-live);
@@ -990,6 +1025,8 @@ button.tl-lab { cursor: pointer; }
 }
 .cv-fold .ic { width: 12px; height: 12px; }
 .cv-fold:hover { color: var(--ink); background: var(--surface-raised); }
+/* Open beside itself, the control points back at the card it would fold into. */
+.cv-group[data-aside="true"] .cv-fold .ic { rotate: 180deg; }
 
 /* How the group went: one segment per status, as wide as its share. The words
    are beside it when the group is folded and in its title when it is open. */
@@ -1052,6 +1089,11 @@ button.tl-lab { cursor: pointer; }
   cursor: default;
 }
 .cv-legend[hidden] { display: none; }
+/* The session's summary is the same kind of box, in the opposite corner. */
+.cv-spend { right: auto; bottom: auto; left: var(--space-6); top: var(--space-6); width: 220px; }
+.cv-spend-rows { margin: 0; display: grid; grid-template-columns: 1fr auto; gap: var(--space-1) var(--space-3); font-size: 12px; }
+.cv-spend-rows dt { color: var(--ink-dim); }
+.cv-spend-rows dd { margin: 0; font-family: var(--font-mono); font-variant-numeric: tabular-nums; text-align: right; color: var(--ink); }
 .cv-legend-head { display: flex; align-items: center; justify-content: space-between; }
 .cv-legend-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-1) var(--space-2); }
 .cv-legend-item { display: flex; align-items: center; gap: var(--space-2); font-size: 12px; color: var(--ink-dim); white-space: nowrap; }
@@ -1059,6 +1101,7 @@ button.tl-lab { cursor: pointer; }
 .cv-legend-line[data-state="live"] { border-top: 1.5px dashed var(--status-busy); }
 .cv-legend-line[data-state="waiting"] { border-top: 1.5px dashed var(--status-waiting); }
 .cv-legend-line[data-state="failed"] { border-top-color: var(--cv-fail); }
+.cv-legend-line[data-state="inferred"] { border-top: 1.5px dotted var(--ink-faint); }
 .cv-x {
   width: 20px; height: 20px; padding: 0; display: inline-flex; align-items: center; justify-content: center;
   background: none; border: 0; border-radius: var(--radius-sm); color: var(--ink-dim); cursor: pointer;
@@ -1076,6 +1119,9 @@ button.tl-lab { cursor: pointer; }
 }
 .cv-tip[hidden] { display: none; }
 .cv-tip strong { font-family: var(--font-mono); font-weight: 600; }
+.cv-real { font-family: var(--font-mono); }
+/* "× 3": how many agents of one type a card stands for. */
+.cv-times { flex: none; padding: 0 6px; border-radius: 999px; background: var(--surface-raised); color: var(--ink); font-variant-numeric: tabular-nums; }
 
 /* The small chip the inspector's gate summary is made of. */
 .cv-bit {
@@ -1110,6 +1156,15 @@ button.tl-lab { cursor: pointer; }
 /* `display: flex` outranks the UA's `[hidden] { display: none }`, so the hidden
    panel kept its width. Restate it explicitly. */
 .inspector[hidden] { display: none; }
+/* A command the session left running in the background: what it is, cut to one line, and for how long. */
+.ibg-row { display: flex; align-items: baseline; gap: var(--space-2); min-width: 0; }
+.ibg-what { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-mono); font-size: 12px; }
+.ibg-row .sub { flex: none; }
+/* Its left edge is a handle, as the navigator's right edge is: drag to resize, double-click for the default. */
+.inspector-split {
+  position: absolute; left: -3px; top: 0; bottom: 0; width: 5px; z-index: 6;
+  background: transparent;
+}
 
 .inspector dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; }
 .inspector dt { font-size: 11px; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.05em; }
@@ -1154,6 +1209,9 @@ button.tl-lab { cursor: pointer; }
 .iname { flex: 1; min-width: 0; margin: 0; font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .imeta { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4) 0; flex: none; }
 .imeta .sub { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
+/* The agent's type as it is declared, beside the role it is shown as. */
+.imeta { flex-wrap: wrap; }
+.ireal { font-family: var(--font-mono); font-size: 11px; color: var(--ink-faint); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 /* The task in full: it is the one place the whole sentence is shown. */
 .itask { padding: var(--space-3) var(--space-4); font-size: 16px; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; flex: none; max-height: 30%; overflow-y: auto; }
 .itask:empty { padding-bottom: 0; }
@@ -1587,15 +1645,10 @@ body.vresizing { cursor: row-resize; user-select: none; }
 
 /* --------------------------------------------------------- full screen --- */
 
-/* Full screen is the canvas and nothing beside it: the navigator, its rail,
-   the inspector and the conversation step out until Esc. */
-:root:fullscreen .shell { grid-template-columns: 0 0 minmax(0, 1fr) 0 0 0; }
-:root:fullscreen .shell > .side,
-:root:fullscreen .shell > .side-rail,
-:root:fullscreen .shell > .resizer,
-:root:fullscreen .shell > .inspector,
-:root:fullscreen .shell > .chat,
-:root:fullscreen .shell > .newpanel { display: none; }
+/* Full screen takes the browser away and nothing of the panel: the navigator,
+   the inspector and the conversation stay where they were, and open and close
+   as they do in a window. A rule here used to remove them, and with them the
+   only way to an agent's details or to a conversation that was waiting. */
 
 /* ------------------------------------------------- tab bar that fits --- */
 
@@ -1627,7 +1680,7 @@ body.vresizing { cursor: row-resize; user-select: none; }
 
 @media (min-width: 1280px) {
   /* Docked: back in the grid, in the column kept for it. */
-  .shell.no-chat > .inspector { position: static; grid-column: 4; box-shadow: none; }
+  .shell.no-chat > .inspector { position: relative; top: auto; bottom: auto; right: auto; grid-column: 4; box-shadow: none; }
 }
 
 @media (max-width: 1279px) {
@@ -1717,4 +1770,5 @@ body.vresizing { cursor: row-resize; user-select: none; }
   .shell > .newpanel { grid-column: auto; position: absolute; z-index: 35; inset: 0 0 var(--dock-h, 0px) 0; border-left: none; }
   .shell > .inspector,
   .shell.no-chat > .inspector { left: 0; right: 0; top: 0; width: auto; border-left: none; }
+  .inspector-split { display: none; }
 }

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

@@ -9,6 +9,7 @@
 // records: the server's log of approvals, for sessions started here. An agent that failed is drawn failed for
 // its whole length — the transcript says how it ended, not when it started going wrong.
 import { stateOf, tally } from './graph-plan.js';
+import { typeOf, shownType } from './names.js';
 
 export const RANGES = [
   { key: '5m', ms: 5 * 60_000 },
@@ -24,7 +25,6 @@ export const GROUP_ROWS = { showAllUpTo: 6, shown: 4 };
 const SESSION = 'session';
 const TONE = { live: 'busy', waking: 'busy', done: 'done', failed: 'fail', quiet: 'quiet', unknown: 'quiet' };
 
-const typeOf = (n) => n.agentType ?? 'unknown agent';
 const isLive = (n) => { const s = stateOf(n.status); return s === 'live' || s === 'waking'; };
 
 /** Where an agent's bar ends: its recorded end, or now while it is still going. */
@@ -113,13 +113,15 @@ export function groupsOf(nodes, grouping) {
   const agents = nodes.filter((n) => n.kind === 'agent');
   const byId = new Map(nodes.map((n) => [n.id, n]));
   const key = (n) => {
-    if (grouping === 'type') return { id: `type:${typeOf(n)}`, label: typeOf(n) };
+    if (grouping === 'type') return { id: `type:${typeOf(n)}`, label: shownType(n), real: typeOf(n) };
     if (grouping === 'parent') {
       const p = byId.get(n.parentId);
       if (!p || p.kind === 'session') return { id: 'direct', label: 'Session · direct' };
-      return { id: `parent:${p.id}`, label: p.kind === 'workflow' ? (p.workflowId ?? p.id) : `under ${typeOf(p)}` };
+      return { id: `parent:${p.id}`, label: p.kind === 'workflow' ? (p.workflowId ?? p.id) : `under ${shownType(p)}` };
     }
     if (grouping === 'none') return { id: 'all', label: null };
+    // `order`: the agents called in one assistant message are a wave, and a wave is a group.
+    if (grouping === 'order') return n.wave != null ? { id: `wave:${n.wave}`, label: `Wave ${n.wave}` } : { id: 'wave:none', label: 'Not called by the session' };
     // `run`: a workflow run is a group; everything the session started itself is another.
     if (n.workflow) return { id: `run:${n.workflow}`, label: String(n.workflow) };
     return { id: 'direct', label: 'Session · direct' };
@@ -135,6 +137,12 @@ export function groupsOf(nodes, grouping) {
   for (const g of out) g.members.sort((a, b) => (a.startedAt ?? Infinity) - (b.startedAt ?? Infinity) || String(a.id).localeCompare(String(b.id)));
   // What the session did itself comes first; the rest in the order they began.
   out.sort((a, b) => Number(b.id === 'direct') - Number(a.id === 'direct') || first(a) - first(b) || a.id.localeCompare(b.id));
+  // Waves are in the order they were called, which is not always the order their agents first wrote.
+  if (grouping === 'order') {
+    const wave = (g) => g.members[0].wave ?? Infinity;
+    out.sort((a, b) => wave(a) - wave(b));
+    for (const g of out) g.members.sort((a, b) => (a.order ?? Infinity) - (b.order ?? Infinity));
+  }
   return out;
 }
 
@@ -180,13 +188,13 @@ export function rows(nodes, opts = {}) {
       for (const m of same) seen.add(m.id);
       if (same.length > 1) {
         body.push({
-          kind: 'merged', id: `${g.id}|${typeOf(n)}`, group: g.id, label: `${typeOf(n)} × ${same.length}`,
+          kind: 'merged', id: `${g.id}|${typeOf(n)}`, group: g.id, label: `${shownType(n)} × ${same.length}`, real: typeOf(n),
           sub: countsSub(same, waiting), members: same, lanes: lanes(same.flatMap(bar)), indent: headed && g.id !== 'direct',
         });
       } else {
         const sub = agentSub(n, waiting);
         body.push({
-          kind: 'agent', id: n.id, group: g.id, node: n, label: typeOf(n), sub: sub.text, tone: sub.tone,
+          kind: 'agent', id: n.id, group: g.id, node: n, label: shownType(n), real: typeOf(n), sub: sub.text, tone: sub.tone,
           bars: bar(n), timed: n.startedAt != null, indent: headed && g.id !== 'direct',
         });
       }