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

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.2",
+  "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"