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

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

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
@@ -990,6 +1010,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 +1074,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; }
@@ -1076,6 +1103,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 +1140,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 +1193,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 +1629,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 +1664,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 +1754,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,11 +113,11 @@ 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 };
     // `run`: a workflow run is a group; everything the session started itself is another.
@@ -180,13 +180,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',
         });
       }

package/kit/studio/web/timeline.js

@@ -6,6 +6,7 @@ import {
   rows, groupsOf, extent, windowOf, place, ticks, clock, stepRange, waitNote, factsOf, xOf, RANGES, DEFAULT_RANGE,
 } from './timeline-plan.js';
 import { Press } from './press.js';
+import { shownType, hoverOf } from './names.js';
 
 
 function mk(tag, cls, text) {
@@ -260,7 +261,7 @@ export class Timeline {
         b.style.left = `${at.left}px`;
         b.style.width = `${at.width}px`;
         const node = this.nodes.find((n) => n.id === seg.id);
-        b.setAttribute('aria-label', `${node?.agentType ?? 'agent'}, ${seg.tone === 'wait' ? 'waiting for you' : (node?.status ?? '')}, ${clock(seg.from)} to ${clock(seg.to)}`);
+        b.setAttribute('aria-label', `${node ? shownType(node) : 'agent'}, ${seg.tone === 'wait' ? 'waiting for you' : (node?.status ?? '')}, ${clock(seg.from)} to ${clock(seg.to)}`);
         if (node && this.dimmed(node)) b.classList.add('dim');
         if (seg.id === this.selected) b.classList.add('on');
         b.addEventListener('click', (e) => { e.stopPropagation(); this.#choose(seg.id); });
@@ -310,6 +311,7 @@ export class Timeline {
       const tile = this.hooks.tileOf?.(r.members[0]);
       if (tile) lab.append(tile);
       lab.append(mk('span', 'tl-name', r.label), mk('span', 'row-fill'), mk('span', 'sub', r.sub));
+      lab.title = r.real ?? '';
       this.#bars(track, r.lanes, win, width);
       if (r.members.every((m) => this.dimmed(m))) row.classList.add('dim');
     } else {
@@ -319,7 +321,7 @@ export class Timeline {
       const sub = mk('span', 'sub', r.sub);
       if (r.tone) sub.dataset.tone = r.tone;
       lab.append(mk('span', 'tl-name', r.label), mk('span', 'row-fill'), sub);
-      lab.title = r.node.description ?? '';
+      lab.title = hoverOf(r.node);
       // One listener, on the row: the label is a button inside it, and its click arrives here too. Two
       // listeners chose the agent and un-chose it in the same click.
       row.addEventListener('click', () => this.#choose(r.id));
@@ -355,8 +357,12 @@ export class Timeline {
     const dot = mk('span', 'dot');
     dot.dataset.tone = st.tone ?? 'none';
     pill.append(dot, mk('span', null, st.word ?? 'State not measured'));
-    head.append(mk('span', 'tl-d-name', n.agentType ?? 'unknown agent'), pill);
-    left.append(head, mk('div', 'tl-d-task', n.description ?? ''), mk('div', 'sub tl-d-facts', factsOf(n, now, this.hooks.fmt)));
+    const dname = mk('span', 'tl-d-name', shownType(n));
+    dname.title = n.agentType ?? '';
+    head.append(dname, pill);
+    const dtask = mk('div', 'tl-d-task', n.description ?? '');
+    dtask.title = n.description ?? '';
+    left.append(head, dtask, mk('div', 'sub tl-d-facts', factsOf(n, now, this.hooks.fmt)));
 
     const mid = mk('div', 'tl-d-error');
     mid.append(mk('div', 'isec-h', 'Last error'));

package/kit/studio/web/usage.js

@@ -0,0 +1,77 @@
+// What a session spent, as words: how long, how many tokens, and an estimate of the cost.
+//
+// The numbers are the server's (server/lib/usage.js); the prices are in one file there (server/lib/pricing.js).
+// Nothing here knows a price. The cost is an estimate at API list price and is always written as one: a leading
+// "~", and a note that says what it is. A session with tokens from a model the price table does not have gets
+// a dash, not a smaller number.
+
+export const COST_NOTE = 'Estimated at API list price; on a subscription it is not what you are billed';
+export const NO_COST = '—';
+
+/** 950 · 12.4k · 3.2M · 1.53B */
+export function fmtCount(n) {
+  if (n == null || !Number.isFinite(n)) return null;
+  if (n < 1000) return String(Math.round(n));
+  if (n < 1_000_000) return `${(n / 1000).toFixed(n < 100_000 ? 1 : 0)}k`;
+  if (n < 1_000_000_000) return `${(n / 1_000_000).toFixed(n < 100_000_000 ? 1 : 0)}M`;
+  return `${(n / 1_000_000_000).toFixed(2)}B`;
+}
+
+/** "~$4.10", "~$1,240", "<$0.01"; a dash when there is no estimate to give. */
+export function fmtCost(usd) {
+  if (usd == null || !Number.isFinite(usd)) return NO_COST;
+  if (usd > 0 && usd < 0.01) return '<$0.01';
+  if (usd >= 1000) return `~$${Math.round(usd).toLocaleString('en-US')}`;
+  return `~$${usd.toFixed(2)}`;
+}
+
+/** "40s", "12m", "3h 5m", "2d 4h": coarse, for a line with no room. */
+export function fmtSpan(ms) {
+  if (ms == null || !Number.isFinite(ms) || ms < 0) return null;
+  const s = Math.round(ms / 1000);
+  if (s < 60) return `${s}s`;
+  const m = Math.floor(s / 60);
+  if (m < 60) return `${m}m`;
+  const h = Math.floor(m / 60);
+  if (h < 24) return `${h}h ${m % 60}m`;
+  return `${Math.floor(h / 24)}d ${h % 24}h`;
+}
+
+/**
+ * How long a session took. The time Claude Code itself timed its turns at, when it recorded any; otherwise the
+ * time from the first record to the last, which counts every pause as well.
+ * @returns { ms, kind: 'worked' | 'elapsed', note } or null
+ */
+export function timeOf(u) {
+  if (u?.workedMs) return { ms: u.workedMs, kind: 'worked', note: 'The turns Claude Code timed, added up; a turn still running is not in it yet' };
+  if (u?.durationMs != null) return { ms: u.durationMs, kind: 'elapsed', note: 'From the first record to the last, pauses included: no turn was timed' };
+  return null;
+}
+
+/** Why there is no estimate, when there is none. */
+export function costNote(u) {
+  if (!u?.unpriced?.length) return COST_NOTE;
+  return `No estimate: the price table has no row for ${u.unpriced.join(', ')}`;
+}
+
+/** The navigator's one line: time · tokens · ~cost. Null when nothing was read. */
+export function usageLine(u) {
+  if (!u) return null;
+  const t = timeOf(u);
+  const tokens = typeof u.tokens === 'number' ? u.tokens : u.tokens?.total;
+  return [t ? fmtSpan(t.ms) : null, tokens ? fmtCount(tokens) : null, tokens ? fmtCost(u.cost) : null].filter(Boolean).join(' · ') || null;
+}
+
+/** The summary box's rows: [label, value, note]. */
+export function summaryRows(u) {
+  if (!u) return [];
+  const t = timeOf(u);
+  const k = u.tokens ?? {};
+  const rows = [];
+  if (t) rows.push([t.kind === 'worked' ? 'Working time' : 'First to last record', fmtSpan(t.ms), t.note]);
+  if (t?.kind === 'worked' && u.durationMs != null) rows.push(['First to last record', fmtSpan(u.durationMs), 'Pauses included']);
+  rows.push(['Tokens', fmtCount(k.total ?? 0),
+    `Agents included, each response counted once\ninput ${fmtCount(k.input ?? 0)} · output ${fmtCount(k.output ?? 0)} · cache write ${fmtCount(k.cacheWrite ?? 0)} · cache read ${fmtCount(k.cacheRead ?? 0)}`]);
+  rows.push(['Cost', k.total ? fmtCost(u.cost) : NO_COST, costNote(u)]);
+  return rows;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "crewforth",
-  "version": "3.1.0-rc.1",
+  "version": "3.1.0-rc.3",
   "description": "Crewforth — your engineering crew for Claude Code: agents, skills and tool-level gates, in any stack.",
   "bin": {
     "crewforth": "bin/cli.js"