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

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.4",
   "description": "Crewforth — your engineering crew for Claude Code: agents, skills and tool-level gates, in any stack.",
   "bin": {
     "crewforth": "bin/cli.js"