crewforth 3.5.0-rc.1 → 3.5.0-rc.2

package/kit/studio/web/timeline.js

@@ -7,6 +7,7 @@ import {
 } from './timeline-plan.js';
 import { Press } from './press.js';
 import { shownType, hoverOf, modelOf, modelFamily } from './names.js';
+import { t, numLocale } from './i18n.js';
 
 
 function mk(tag, cls, text) {
@@ -56,7 +57,7 @@ export class Timeline {
   #build() {
     this.root.classList.add('tl');
     this.axis = mk('div', 'tl-axis');
-    this.axisLabel = mk('div', 'tl-axis-label', 'Agent');
+    this.axisLabel = mk('div', 'tl-axis-label', t('Agent'));
     this.axisTrack = mk('div', 'tl-axis-track');
     this.axis.append(this.axisLabel, this.axisTrack);
 
@@ -69,7 +70,7 @@ export class Timeline {
     this.noteEl = mk('div', 'tl-note');
     this.drawer = mk('div', 'tl-drawer');
     this.drawer.setAttribute('role', 'region');
-    this.drawer.setAttribute('aria-label', 'Selected agent');
+    this.drawer.setAttribute('aria-label', t('Selected agent'));
     this.drawer.hidden = true;
     this.empty = mk('div', 'tl-empty');
     this.empty.hidden = true;
@@ -77,7 +78,7 @@ export class Timeline {
     // no word would read as a session in which nothing happened.
     this.away = mk('div', 'tl-away');
     this.away.hidden = true;
-    const whole = mk('button', 'btn sm', 'Show the whole session');
+    const whole = mk('button', 'btn sm', t('Show the whole session'));
     whole.type = 'button';
     whole.addEventListener('click', () => { this.range = 'all'; this.render(); this.#changed(); });
     this.awayText = mk('span', null);
@@ -205,8 +206,8 @@ export class Timeline {
     this.body.hidden = agents.length === 0;
     this.axis.hidden = agents.length === 0;
     if (!agents.length) {
-      this.empty.replaceChildren(mk('strong', null, 'No agents yet'),
-        mk('span', null, 'This session has not delegated to a subagent. When it does, each one gets a row here.'));
+      this.empty.replaceChildren(mk('strong', null, t('No agents yet')),
+        mk('span', null, t('This session has not delegated to a subagent. When it does, each one gets a row here.')));
       this.noteEl.hidden = true;
       this.nowLine.hidden = true;
       this.away.hidden = true;
@@ -243,7 +244,7 @@ export class Timeline {
     this.nowLine.hidden = !this.live || !win || nowX < 0 || nowX > width + 1;
     if (!this.nowLine.hidden) {
       this.nowLine.style.left = `${this.labelWidth() + Math.min(nowX, width - 1)}px`;
-      this.nowLine.dataset.label = `now ${clock(now)}`;
+      this.nowLine.dataset.label = `${t('now')} ${clock(now)}`;
     }
 
     // Bars exist, and none of them is in the stretch on screen.
@@ -253,8 +254,8 @@ export class Timeline {
     if (!this.away.hidden) {
       const last = Math.max(...timed.map((n) => n.endedAt ?? n.updatedAt ?? n.startedAt));
       this.awayText.textContent = last < win.from
-        ? `Nothing in this stretch of time. The last activity ended at ${clock(last)}.`
-        : 'Nothing in this stretch of time.';
+        ? t('Nothing in this stretch of time. The last activity ended at {time}.', { time: clock(last) })
+        : t('Nothing in this stretch of time.');
     }
 
     const note = waitNote(this.owned);
@@ -281,7 +282,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 ? shownType(node) : 'agent'}, ${seg.tone === 'wait' ? 'waiting for you' : (node?.status ?? '')}, ${clock(seg.from)} to ${clock(seg.to)}`);
+        b.setAttribute('aria-label', t('{who}, {state}, {from} to {to}', { who: node ? shownType(node) : t('agent'), state: seg.tone === 'wait' ? t('waiting for you') : (node?.status ?? ''), from: 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); });
@@ -300,7 +301,7 @@ export class Timeline {
   #row(r, win, width) {
     if (r.kind === 'more') {
       const row = mk('div', 'tl-row tl-more');
-      const b = mk('button', 'tl-more-btn', `Show ${r.count} more in this ${this.group === 'run' ? 'run' : 'group'}`);
+      const b = mk('button', 'tl-more-btn', this.group === 'run' ? t('Show {n} more in this run', { n: r.count }) : t('Show {n} more in this group', { n: r.count }));
       b.type = 'button';
       b.addEventListener('click', () => { this.expanded.add(r.group); this.render(); });
       const lab = mk('div', 'tl-lab');
@@ -353,7 +354,7 @@ export class Timeline {
       row.addEventListener('click', () => this.#choose(r.id));
       if (r.timed) this.#bars(track, [r.bars], win, width);
       // No start was recorded, so there is nowhere to put a bar; the row says that instead of drawing one at zero.
-      else track.append(mk('span', 'tl-untimed', 'no start time recorded'));
+      else track.append(mk('span', 'tl-untimed', t('no start time recorded')));
       if (r.id === this.selected) row.classList.add('on');
       if (this.dimmed(r.node)) row.classList.add('dim');
     }
@@ -382,7 +383,7 @@ export class Timeline {
     const pill = mk('span', 'pill');
     const dot = mk('span', 'dot');
     dot.dataset.tone = st.tone ?? 'none';
-    pill.append(dot, mk('span', null, st.word ?? 'State not measured'));
+    pill.append(dot, mk('span', null, st.word ?? t('State not measured')));
     const dname = mk('span', 'tl-d-name', shownType(n));
     dname.title = n.agentType ?? '';
     head.append(dname, pill);
@@ -391,36 +392,36 @@ export class Timeline {
     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'));
+    mid.append(mk('div', 'isec-h', t('Last error')));
     const detail = this.hooks.detailOf?.(n);
     if (!detail || detail.loading) {
-      mid.append(mk('div', 'ihint', 'Reading the agent transcript…'));
+      mid.append(mk('div', 'ihint', t('Reading the agent transcript…')));
     } else if (detail.measured === false) {
       const hint = mk('div', 'ihint');
-      hint.append(mk('strong', null, 'Not measured'), mk('div', null, detail.reason || 'no reason given'));
+      hint.append(mk('strong', null, t('Not measured')), mk('div', null, detail.reason || t('no reason given')));
       mid.append(hint);
     } else if (!detail.lastError) {
-      mid.append(mk('div', 'ihint', 'None — no tool call in this agent\'s transcript came back as an error.'));
+      mid.append(mk('div', 'ihint', t('None — no tool call in this agent\'s transcript came back as an error.')));
     } else {
       const e = detail.lastError;
-      const text = mk('pre', 'tl-d-errtext', e.truncated ? `… ${(e.length - e.text.length).toLocaleString('en-US')} earlier characters not shown\n${e.text}` : (e.text || '(no output)'));
+      const text = mk('pre', 'tl-d-errtext', e.truncated ? `${t('… {n} earlier characters not shown', { n: (e.length - e.text.length).toLocaleString(numLocale()) })}\n${e.text}` : (e.text || t('(no output)')));
       const count = detail.errors ?? 0;
-      const facts = [`${count} ${count === 1 ? 'error' : 'errors'}`];
-      if (e.at != null) facts.push(`last at ${clock(e.at, true)}`);
+      const facts = [count === 1 ? t('{n} error', { n: 1 }) : t('{n} errors', { n: count })];
+      if (e.at != null) facts.push(t('last at {time}', { time: clock(e.at, true) }));
       if (e.tool) facts.push(e.tool);
       mid.append(text, mk('div', 'sub', facts.join(' · ')));
     }
 
     const acts = mk('div', 'tl-d-acts');
-    const show = mk('button', 'btn sm primary', 'Show on graph');
+    const show = mk('button', 'btn sm primary', t('Show on graph'));
     show.type = 'button';
     show.addEventListener('click', () => this.hooks.onShowOnGraph?.(n));
-    const open = mk('button', 'btn sm', 'Open conversation');
+    const open = mk('button', 'btn sm', t('Open conversation'));
     open.type = 'button';
     open.addEventListener('click', () => this.hooks.onOpenConversation?.());
     const close = mk('button', 'btn icon sm ghost');
     close.type = 'button';
-    close.setAttribute('aria-label', 'Close');
+    close.setAttribute('aria-label', t('Close'));
     close.innerHTML = '<svg class="ic" viewBox="0 0 16 16" aria-hidden="true"><path d="M4 4l8 8M12 4l-8 8"/></svg>';
     close.addEventListener('click', () => this.#choose(n.id));
     acts.append(show, open, close);

package/kit/studio/web/usage.js

@@ -6,8 +6,9 @@
 // a dash, not a smaller number.
 
 import { modelName } from './names.js';
+import { t, numLocale } from './i18n.js';
 
-export const COST_NOTE = 'Estimated at API list price; on a subscription it is not what you are billed';
+export const COST_NOTE = t('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 */
@@ -23,7 +24,7 @@ export function fmtCount(n) {
 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')}`;
+  if (usd >= 1000) return `~$${Math.round(usd).toLocaleString(numLocale())}`;
   return `~$${usd.toFixed(2)}`;
 }
 
@@ -31,12 +32,12 @@ export function fmtCost(usd) {
 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`;
+  if (s < 60) return t('{n}s', { n: s });
   const m = Math.floor(s / 60);
-  if (m < 60) return `${m}m`;
+  if (m < 60) return t('{n}m', { n: 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`;
+  if (h < 24) return t('{h}h {m}m', { h, m: m % 60 });
+  return t('{d}d {h}h', { d: Math.floor(h / 24), h: h % 24 });
 }
 
 /**
@@ -45,23 +46,23 @@ export function fmtSpan(ms) {
  * @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' };
+  if (u?.workedMs) return { ms: u.workedMs, kind: 'worked', note: t('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: t('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(', ')}`;
+  return t('No estimate: the price table has no row for {models}', { models: u.unpriced.join(', ') });
 }
 
 /** "40s", "4m 40s", "3h 5m": a span that is being counted, so the seconds show while they matter. */
 export function fmtRunning(ms) {
   if (ms == null || !Number.isFinite(ms) || ms < 0) return null;
   const s = Math.floor(ms / 1000);
-  if (s < 60) return `${s}s`;
-  if (s < 3600) return `${Math.floor(s / 60)}m ${s % 60}s`;
+  if (s < 60) return t('{n}s', { n: s });
+  if (s < 3600) return t('{m}m {s}s', { m: Math.floor(s / 60), s: s % 60 });
   return fmtSpan(ms);
 }
 
@@ -71,15 +72,15 @@ export function fmtRunning(ms) {
  */
 export function usageLine(u, { live = false, now = null } = {}) {
   if (!u) return null;
-  const t = timeOf(u);
-  const span = live && u.startedAt != null && now != null ? fmtSpan(now - u.startedAt) : (t ? fmtSpan(t.ms) : null);
+  const took = timeOf(u);
+  const span = live && u.startedAt != null && now != null ? fmtSpan(now - u.startedAt) : (took ? fmtSpan(took.ms) : null);
   const tokens = typeof u.tokens === 'number' ? u.tokens : u.tokens?.fresh;
   return [span, tokens ? fmtCount(tokens) : null, tokens ? fmtCost(u.cost) : null].filter(Boolean).join(' · ') || null;
 }
 
 const kinds = (k, cached = true) => [
-  ['Input', fmtCount(k?.input ?? 0)], ['Output', fmtCount(k?.output ?? 0)], ['Cache write', fmtCount(k?.cacheWrite ?? 0)],
-  ...(cached ? [['Cache read', fmtCount(k?.cacheRead ?? 0)]] : []),
+  [t('Input'), fmtCount(k?.input ?? 0)], [t('Output'), fmtCount(k?.output ?? 0)], [t('Cache write'), fmtCount(k?.cacheWrite ?? 0)],
+  ...(cached ? [[t('Cache read'), fmtCount(k?.cacheRead ?? 0)]] : []),
 ];
 
 /**
@@ -91,40 +92,43 @@ const kinds = (k, cached = true) => [
  * read as millions.
  *
  * @param opts.live  the session is running: its time is counted from its first record to `opts.now`
+ * @param opts.agentRows  [name, value] pairs, one per kind of agent (agent-spend.js): what the Agents row opens on
+ *                        instead of the token kinds, as the Cost row opens on its models. Without any, the kinds.
  */
-export function summaryRows(u, { live = false, now = null } = {}) {
+export function summaryRows(u, { live = false, now = null, agentRows = [] } = {}) {
   if (!u) return [];
   const k = u.tokens ?? {};
   const rows = [];
-  const t = timeOf(u);
+  const took = timeOf(u);
   if (live && u.startedAt != null && now != null) {
-    rows.push({ label: 'Running for', value: fmtRunning(now - u.startedAt), note: 'From the session\'s first record to now' });
-  } else if (t) {
-    rows.push({ label: t.kind === 'worked' ? 'Working time' : 'First to last record', value: fmtSpan(t.ms), note: t.note });
-    if (t.kind === 'worked' && u.durationMs != null) rows.push({ label: 'First to last record', value: fmtSpan(u.durationMs), note: 'Pauses included; the agents\' transcripts too' });
+    rows.push({ label: t('Running for'), value: fmtRunning(now - u.startedAt), note: t('From the session\'s first record to now') });
+  } else if (took) {
+    rows.push({ label: took.kind === 'worked' ? t('Working time') : t('First to last record'), value: fmtSpan(took.ms), note: took.note });
+    if (took.kind === 'worked' && u.durationMs != null) rows.push({ label: t('First to last record'), value: fmtSpan(u.durationMs), note: t('Pauses included; the agents\' transcripts too') });
   }
-  rows.push({ label: 'Tokens', value: fmtCount(k.fresh ?? 0), note: 'New tokens: input, output and cache writes. Agents included, each response counted once', detail: kinds(k, false) });
-  rows.push({ label: 'From cache', value: fmtCount(k.cacheRead ?? 0), note: 'Read back from the prompt cache: the same context, counted on every response that reused it' });
-  const part = (label, p, note) => {
+  rows.push({ label: t('Tokens'), value: fmtCount(k.fresh ?? 0), note: t('New tokens: input, output and cache writes. Agents included, each response counted once'), detail: kinds(k, false) });
+  rows.push({ label: t('From cache'), value: fmtCount(k.cacheRead ?? 0), note: t('Read back from the prompt cache: the same context, counted on every response that reused it') });
+  const part = (label, p, note, detail = null) => {
     if (!p?.tokens?.total) return;
-    rows.push({ label, value: `${fmtCount(p.tokens.fresh)} · ${fmtCost(p.cost)}`, note: `${note}: new tokens and estimated cost\n${costNote(p)}`, detail: kinds(p.tokens) });
+    rows.push({ label, value: `${fmtCount(p.tokens.fresh)} · ${fmtCost(p.cost)}`, note: `${t('{what}: new tokens and estimated cost', { what: note })}
+${costNote(p)}`, detail: detail ?? kinds(p.tokens) });
   };
-  part('Session', u.parts?.session, 'The session\'s own transcript');
-  part('Agents', u.parts?.agents, 'Everything its agents did');
+  part(t('Session'), u.parts?.session, t('The session\'s own transcript'));
+  part(t('Agents'), u.parts?.agents, t('Everything its agents did'), agentRows.length ? agentRows : null);
   // The advisor: a second model the main one consulted mid-response. Its tokens are in the rows above already; this
   // says how much of them it was. No call recorded, no row: a session that never consulted it shows no zero.
   if (u.advisor?.calls) {
     const a = u.advisor;
     const who = Object.keys(u.advisorModels ?? {}).map(modelName).join(', ');
     rows.push({
-      label: 'Advisor',
-      value: `${a.calls} ${a.calls === 1 ? 'call' : 'calls'} \u00b7 ${fmtCount(a.tokens.fresh)} \u00b7 ${fmtCost(a.cost)}`,
-      note: `Advice the main model asked a second model for${who ? ` (${who})` : ''}, priced at that model's rates. Included in the totals above; the API's own token count leaves it out\n${costNote(a)}`,
+      label: t('Advisor'),
+      value: `${a.calls === 1 ? t('{n} call', { n: 1 }) : t('{n} calls', { n: a.calls })} \u00b7 ${fmtCount(a.tokens.fresh)} \u00b7 ${fmtCost(a.cost)}`,
+      note: `${who ? t('Advice the main model asked a second model for ({who}), priced at that model\'s rates. Included in the totals above; the API\'s own token count leaves it out', { who }) : t('Advice the main model asked a second model for, priced at that model\'s rates. Included in the totals above; the API\'s own token count leaves it out')}\n${costNote(a)}`,
       detail: kinds(a.tokens),
     });
   }
   // Behind the cost: each model's new tokens and what they come to. A model with no price says so with a dash.
-  const perModel = Object.entries(u.byModel ?? {}).map(([model, t]) => [modelName(model), `${fmtCount(t.tokens.fresh)} \u00b7 ${fmtCost(t.cost)}`]);
-  rows.push({ label: 'Cost', value: k.total ? fmtCost(u.cost) : NO_COST, note: costNote(u), detail: perModel.length ? perModel : undefined });
+  const perModel = Object.entries(u.byModel ?? {}).map(([model, m]) => [modelName(model), `${fmtCount(m.tokens.fresh)} \u00b7 ${fmtCost(m.cost)}`]);
+  rows.push({ label: t('Cost'), value: k.total ? fmtCost(u.cost) : NO_COST, note: costNote(u), detail: perModel.length ? perModel : undefined });
   return rows;
 }

package/package.json

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