crewforth 3.4.0 → 3.5.0-rc.2

package/kit/studio/web/approvals.js

@@ -8,6 +8,7 @@
 // (`askedAt`) and what time it is now (`now`) all come from the machine the hook runs on, so a viewer whose clock
 // differs — a browser on the far end of a tunnel — still counts down to the moment the hook will really give up.
 import { roleName } from './names.js';
+import { t } from './i18n.js';
 
 /** The server's clock, as seen from this page: the difference is measured each time the server says what time it is. */
 export class ServerClock {
@@ -25,8 +26,8 @@ export class ServerClock {
 
 // A plan is approved into one of these; the words are the buttons'.
 export const PLAN_CHOICES = [
-  { mode: 'acceptEdits', label: 'Approve \u00b7 accept edits', title: 'Approve the plan and go on in acceptEdits: file edits in the project are accepted without asking; every call is still shown here first.' },
-  { mode: 'default', label: 'Approve \u00b7 ask each time', title: 'Approve the plan and go on in default: each call is asked about here.' },
+  { mode: 'acceptEdits', label: t('Approve \u00b7 accept edits'), title: t('Approve the plan and go on in acceptEdits: file edits in the project are accepted without asking; every call is still shown here first.') },
+  { mode: 'default', label: t('Approve \u00b7 ask each time'), title: t('Approve the plan and go on in default: each call is asked about here.') },
 ];
 
 /**
@@ -137,22 +138,22 @@ export function terminalWait(status, session, ownedHere) {
   const call = session?.openCall ?? null;
   const who = call?.agentType ? `${roleName(call.agentType)} · ` : '';
   const what = call ? `${who}${call.toolName}${call.detail ? ` · ${call.detail}` : ''}` : (status.waitingFor ?? null);
-  return { text: 'Waiting for an answer in the terminal', what };
+  return { text: t('Waiting for an answer in the terminal'), what };
 }
 
 export function asker(item) {
-  return item.agentType ? roleName(item.agentType) : 'Session';
+  return item.agentType ? roleName(item.agentType) : t('Session');
 }
 
 export const VERDICTS = {
-  allow: { label: 'Allow once', said: 'Allowed' },
-  always: { label: null, said: 'Allowed for this session' },
-  deny: { label: 'Deny', said: 'Denied' },
+  allow: { label: t('Allow once'), said: t('Allowed') },
+  always: { label: null, said: t('Allowed for this session') },
+  deny: { label: t('Deny'), said: t('Denied') },
 };
 
 /** "Allow Bash this session": the button names the tool it widens the gate for. */
 export function allowSessionLabel(toolName) {
-  return `Allow ${toolName} this session`;
+  return t('Allow {tool} this session', { tool: toolName });
 }
 
 /**
@@ -186,9 +187,9 @@ export function settled(before, after, decided, serverNowMs, slackMs = 2500) {
 }
 
 export const OUTCOME_WORD = {
-  allowed: 'Allowed',
-  'allowed-session': 'Allowed for this session',
-  denied: 'Denied',
-  'timed-out': 'Timed out — denied',
-  'answered-elsewhere': 'Answered elsewhere',
+  allowed: t('Allowed'),
+  'allowed-session': t('Allowed for this session'),
+  denied: t('Denied'),
+  'timed-out': t('Timed out — denied'),
+  'answered-elsewhere': t('Answered elsewhere'),
 };

package/kit/studio/web/ask.js

@@ -4,6 +4,7 @@
 // A form is built once for a request and kept while the request waits. The dock and the List redraw around it every
 // second; a form rebuilt on each of those would lose what was picked, and what was being typed.
 import { answersOf, PLAN_CHOICES } from './approvals.js';
+import { t } from './i18n.js';
 
 function mk(tag, cls, text) {
   const n = document.createElement(tag);
@@ -44,7 +45,7 @@ export class AskForms {
     const picked = new Map();   // question -> Set of labels
     const typed = new Map();    // question -> the viewer's own text
     const controls = [];
-    const send = mk('button', 'btn sm primary', 'Send answers');
+    const send = mk('button', 'btn sm primary', t('Send answers'));
     const refresh = () => { send.disabled = send.dataset.sent === '1' || answersOf(item.ask, picked, typed) === null; };
 
     for (const q of item.ask.questions) {
@@ -53,7 +54,7 @@ export class AskForms {
       const head = mk('div', 'ask-head');
       if (q.header) head.append(mk('span', 'ask-tag', q.header));
       head.append(mk('span', 'ask-text', q.question));
-      if (q.multiSelect) head.append(mk('span', 'sub', 'choose any'));
+      if (q.multiSelect) head.append(mk('span', 'sub', t('choose any')));
       const opts = mk('div', 'ask-opts');
       opts.setAttribute('role', q.multiSelect ? 'group' : 'radiogroup');
       const buttons = [];
@@ -80,8 +81,8 @@ export class AskForms {
       // The model's options do not always hold the answer: the viewer's own words are an answer too.
       const own = mk('input', 'ask-own');
       own.type = 'text';
-      own.placeholder = q.multiSelect ? 'Something else, as well…' : 'Something else…';
-      own.setAttribute('aria-label', `Your own answer to: ${q.question}`);
+      own.placeholder = q.multiSelect ? t('Something else, as well…') : t('Something else…');
+      own.setAttribute('aria-label', t('Your own answer to: {question}', { question: q.question }));
       own.addEventListener('input', () => {
         typed.set(q.question, own.value);
         if (!q.multiSelect && own.value.trim()) {
@@ -96,9 +97,9 @@ export class AskForms {
     }
 
     const acts = mk('div', 'ask-acts');
-    const dismiss = mk('button', 'btn sm', 'Dismiss');
+    const dismiss = mk('button', 'btn sm', t('Dismiss'));
     dismiss.type = 'button';
-    dismiss.title = 'Refuse the question. The model is told nobody answered and may ask in words instead.';
+    dismiss.title = t('Refuse the question. The model is told nobody answered and may ask in words instead.');
     send.type = 'button';
     send.addEventListener('click', () => {
       const answers = answersOf(item.ask, picked, typed);
@@ -114,12 +115,12 @@ export class AskForms {
 
   #plan(item) {
     const el = mk('div', 'ask');
-    const plan = mk('pre', 'ask-plan', item.ask.plan || 'The plan was not included in the request.');
+    const plan = mk('pre', 'ask-plan', item.ask.plan || t('The plan was not included in the request.'));
     plan.tabIndex = 0;
     const acts = mk('div', 'ask-acts');
-    const keep = mk('button', 'btn sm', 'Keep planning');
+    const keep = mk('button', 'btn sm', t('Keep planning'));
     keep.type = 'button';
-    keep.title = 'Refuse to leave plan mode. The model stays in it and goes on planning.';
+    keep.title = t('Refuse to leave plan mode. The model stays in it and goes on planning.');
     keep.addEventListener('click', () => this.onDecide(item, 'deny', {}));
     const controls = [keep];
     acts.append(keep);

package/kit/studio/web/canvas.js

@@ -18,6 +18,7 @@ import { Viewport, draggable, swallowClick } from './viewport.js';
 import { agentStatus } from './nav.js';
 import { roleName, shownType, hoverOf, originOf, orderTag, modelOf, modelMix, modelFamily, modelBadge } from './names.js';
 import { fmtCount, fmtCost, COST_NOTE } from './usage.js';
+import { t } from './i18n.js';
 
 // How long an arriving wire takes to draw itself toward its new card. Short on purpose: this is a status panel,
 // and anything a viewer has to wait through is a cost they pay on every spawn.
@@ -139,7 +140,7 @@ export class Canvas {
 
     // The whole graph, small. The frame is what the pane shows.
     this.mapEl = mk('div', 'cv-minimap');
-    this.mapEl.setAttribute('aria-label', 'Minimap');
+    this.mapEl.setAttribute('aria-label', t('Minimap'));
     this.mapEl.hidden = true;
     this.mapSvg = document.createElementNS(SVG, 'svg');
     this.mapSvg.setAttribute('aria-hidden', 'true');
@@ -161,12 +162,12 @@ export class Canvas {
   /** What the session spent: time, tokens and an estimate of the cost. Closed, it stays closed until asked for. */
   #spend() {
     const box = mk('div', 'cv-legend cv-spend');
-    box.setAttribute('aria-label', 'Session summary');
+    box.setAttribute('aria-label', t('Session summary'));
     const head = mk('div', 'cv-legend-head');
-    head.append(mk('span', 'cv-label', 'Session'));
+    head.append(mk('span', 'cv-label', t('Session')));
     const close = mk('button', 'cv-x');
     close.type = 'button';
-    close.setAttribute('aria-label', 'Close the session summary');
+    close.setAttribute('aria-label', t('Close the session summary'));
     close.innerHTML = MARK.close;
     close.addEventListener('click', () => this.showSpend(false));
     head.append(close);
@@ -217,7 +218,7 @@ export class Canvas {
       const more = Boolean(r.detail?.length);
       p.label.textContent = r.label;
       p.value.textContent = r.value ?? '';
-      p.row.title = more ? `${r.note ?? ''}\nClick for the breakdown` : (r.note ?? '');
+      p.row.title = more ? `${r.note ?? ''}\n${t('Click for the breakdown')}` : (r.note ?? '');
       p.row.classList.toggle('cv-spend-more', more);
       if (more) p.row.setAttribute('aria-expanded', String(this.spendShown.has(r.label))); else p.row.removeAttribute?.('aria-expanded');
       p.detail.hidden = !more || !this.spendShown.has(r.label);
@@ -244,12 +245,12 @@ export class Canvas {
   /** What the lines and the two marks mean. Shown until it is closed, and then not again unless asked for. */
   #legend() {
     const box = mk('div', 'cv-legend');
-    box.setAttribute('aria-label', 'Legend');
+    box.setAttribute('aria-label', t('Legend'));
     const head = mk('div', 'cv-legend-head');
-    head.append(mk('span', 'cv-label', 'Legend'));
+    head.append(mk('span', 'cv-label', t('Legend')));
     const close = mk('button', 'cv-x');
     close.type = 'button';
-    close.setAttribute('aria-label', 'Close the legend');
+    close.setAttribute('aria-label', t('Close the legend'));
     close.innerHTML = MARK.close;
     close.addEventListener('click', () => this.showLegend(false));
     head.append(close);
@@ -262,10 +263,10 @@ export class Canvas {
       return item;
     };
     const rows = mk('div', 'cv-legend-grid');
-    rows.append(line('live', 'working now'), line('waiting', 'needs you'), line('done', 'finished'), line('failed', 'failed'));
+    rows.append(line('live', t('working now')), line('waiting', t('needs you')), line('done', t('finished')), line('failed', t('failed')));
     box.append(rows);
     // The one wire that is not a call: in the Order view, from an agent to the wave called after it reported.
-    const inferred = line('inferred', 'after it reported (inferred, not a call)');
+    const inferred = line('inferred', t('after it reported (inferred, not a call)'));
     inferred.title = INFERRED_NOTE;
     box.append(inferred);
     const marks = mk('div', 'cv-legend-grid');
@@ -273,7 +274,7 @@ export class Canvas {
     const crew = mk('span', 'cv-tile cv-tile-sm');
     crew.innerHTML = MARK.kit;
     const a = mk('span', 'cv-legend-item');
-    a.append(this.legendBuiltin, mk('span', null, 'Claude Code agent'));
+    a.append(this.legendBuiltin, mk('span', null, t('Claude Code agent')));
     const b = mk('span', 'cv-legend-item');
     b.append(crew, mk('span', null, 'Crewforth'));
     marks.append(a, b);
@@ -524,7 +525,7 @@ export class Canvas {
   #plan() {
     return plan(this.#visibleNodes(), {
       group: this.group, density: this.density, seq: this.seq, open: this.open, pinned: this.pinned, sessionY: this.sessionY,
-      aside: this.aside, all: this.all, tallest: this.#tallest(),
+      aside: this.aside, sides: this.aside, all: this.all, tallest: this.#tallest(),
     });
   }
 
@@ -588,8 +589,8 @@ export class Canvas {
     this.lastGraph = graph;
     if (!graph?.nodes?.length) {
       this.emptyEl.hidden = false;
-      this.emptyEl.replaceChildren(mk('strong', null, 'No agents yet'),
-        mk('div', null, 'This session has not delegated to a subagent. The moment it does, a card appears here.'));
+      this.emptyEl.replaceChildren(mk('strong', null, t('No agents yet')),
+        mk('div', null, t('This session has not delegated to a subagent. The moment it does, a card appears here.')));
       // els must go with the DOM. Leaving stale elements behind made the next render believe they were still
       // mounted, so cards never returned.
       this.nodeLayer.replaceChildren(); this.edgeG.replaceChildren();
@@ -710,7 +711,7 @@ export class Canvas {
       p.tile.innerHTML = MARK.session;
       p.pill = this.#pill();
       const row = mk('div', 'cv-row');
-      row.append(p.tile, mk('span', 'cv-title', 'Session'), mk('span', 'cv-fill'), p.pill.el);
+      row.append(p.tile, mk('span', 'cv-title', t('Session')), mk('span', 'cv-fill'), p.pill.el);
       p.name = mk('div', 'cv-name cv-indent');
       p.sub = mk('div', 'cv-sub cv-indent');
       // What it has running in the background takes a line of its own, when there is any: on the line above it
@@ -786,7 +787,7 @@ export class Canvas {
   /** The word and the colour an agent's status is drawn in. Waiting on the viewer outranks what the transcript
    *  says, because that is what the agent is doing now. */
   #statusOf(n) {
-    if (this.waiting.has(n.id)) return { word: 'Needs you', tone: 'waiting', known: true, state: 'waiting' };
+    if (this.waiting.has(n.id)) return { word: t('Needs you'), tone: 'waiting', known: true, state: 'waiting' };
     const s = agentStatus(n.status);
     // A status this panel has no word for keeps its own, exactly as the transcript wrote it.
     return { word: s.known ? cap(s.word) : s.word, tone: s.tone, known: s.known, state: stateOf(n.status) };
@@ -806,9 +807,9 @@ export class Canvas {
     const type = n?.agentType ?? '';
     if (this.palette.map?.[type]?.source === 'kit') return { source: 'kit', title: 'Crewforth agent' };
     if (this.palette.measured === false && type.startsWith('crew-')) {
-      return { source: 'agent', title: `Agent identity not measured — ${this.palette.reason ?? 'no reason given'}` };
+      return { source: 'agent', title: t('Agent identity not measured — {reason}', { reason: this.palette.reason ?? t('no reason given') }) };
     }
-    return { source: 'agent', title: 'Claude Code agent', where: originOf(type, this.origins) };
+    return { source: 'agent', title: t('Claude Code agent'), where: originOf(type, this.origins) };
   }
 
   #fillTile(tile, n) {
@@ -838,25 +839,25 @@ export class Canvas {
     p.name.textContent = n.gitBranch || shortPath(n.cwd) || n.sessionId || '';
     // Cut to the card's width; hovering says it whole.
     p.name.title = p.name.textContent;
-    const bits = [`${n.turns ?? 0} ${n.turns === 1 ? 'turn' : 'turns'}`];
-    if (n.tokens != null) bits.push(`${fmtTokens(n.tokens)} ctx`);
-    if (n.context?.toolShare != null) bits.push(`${n.context.toolShare}% tool output`);
+    const bits = [n.turns === 1 ? t('{n} turn', { n: 1 }) : t('{n} turns', { n: n.turns ?? 0 })];
+    if (n.tokens != null) bits.push(t('{n} ctx', { n: fmtTokens(n.tokens) }));
+    if (n.context?.toolShare != null) bits.push(t('{n}% tool output', { n: n.context.toolShare }));
     p.sub.textContent = bits.join(' · ');
     // The share is of the text since the last compaction, in characters; the compactions are the transcript's own.
     const lc = n.context?.lastCompact;
     p.sub.title = [p.sub.textContent,
-      n.context?.toolShare != null ? `${n.context.toolShare}% of the text in context since the last compaction is tool output (characters, not tokens)` : null,
-      n.context?.compactions ? `compacted ${n.context.compactions}×${lc?.before != null ? `, last ${lc.trigger ?? ''} ${fmtTokens(lc.before)} → ${fmtTokens(lc.after)}` : ''}` : null].filter(Boolean).join('\n');
+      n.context?.toolShare != null ? t('{n}% of the text in context since the last compaction is tool output (characters, not tokens)', { n: n.context.toolShare }) : null,
+      n.context?.compactions ? `${t('compacted {n}×', { n: n.context.compactions })}${lc?.before != null ? `, ${t('last {trigger} {before} → {after}', { trigger: lc.trigger ?? '', before: fmtTokens(lc.before), after: fmtTokens(lc.after) })}` : ''}` : null].filter(Boolean).join('\n');
     // What the session has running that is not an agent: commands sent to the background.
     p.bg.hidden = !bg;
-    p.bg.textContent = bg ? `${bg} in background` : '';
-    p.bg.title = bg ? n.backgroundNow.map((c) => `In the background: ${c.toolName}${c.detail ? ` · ${c.detail}` : ''}`).join('\n') : '';
+    p.bg.textContent = bg ? t('{n} in background', { n: bg }) : '';
+    p.bg.title = bg ? n.backgroundNow.map((c) => `${t('In the background: {tool}', { tool: c.toolName })}${c.detail ? ` · ${c.detail}` : ''}`).join('\n') : '';
     const refused = n.refusedCalls ?? [];
     p.refused.hidden = !refused.length;
-    p.refused.textContent = refused.length ? `${refused.length} refused by the model gate` : '';
-    p.refused.title = refused.map((r) => `${r.agent ?? 'an agent'}${r.model ? ` (${r.model})` : ''}: ${r.text}`).join('\n');
-    el.title = 'Click to inspect this session';
-    el.setAttribute('aria-label', `Session, ${st?.word ?? 'state not measured'}, ${p.name.textContent}, ${p.sub.textContent}`);
+    p.refused.textContent = refused.length ? t('{n} refused by the model gate', { n: refused.length }) : '';
+    p.refused.title = refused.map((r) => `${r.agent ?? t('an agent')}${r.model ? ` (${r.model})` : ''}: ${r.text}`).join('\n');
+    el.title = t('Click to inspect this session');
+    el.setAttribute('aria-label', `${t('Session')}, ${st?.word ?? t('state not measured')}, ${p.name.textContent}, ${p.sub.textContent}`);
   }
 
   #fillAgent(el, n, compact, after = null) {
@@ -892,9 +893,9 @@ export class Canvas {
     p.model.title = mdl.title;
     p.model.dataset.differs = String(mdl.differs);
     if (!compact) { p.facts.textContent = facts; p.facts.title = factsTitle(n); }
-    p.order.title = tag ? `Called ${orderTag(n, clock)} by the session` : '';
+    p.order.title = tag ? t('Called {order} by the session', { order: orderTag(n, clock) }) : '';
     // In the Order view: what had reported before this wave was called. A reading of the order of events.
-    el.title = after?.length ? `Called after ${after.join(', ')} reported.\n${INFERRED_NOTE}` : '';
+    el.title = after?.length ? `${t('Called after {who} reported.', { who: after.join(', ') })}\n${INFERRED_NOTE}` : '';
     if (compact) {
       p.dot.dataset.tone = st.tone ?? 'none';
       p.word.textContent = st.word;
@@ -923,17 +924,17 @@ export class Canvas {
       el.dataset.aside = String(Boolean(it.open && !it.boxed));
       p.name.textContent = it.label;
       p.name.title = it.real ?? '';
-      if (it.type === 'run') { p.tile.innerHTML = MARK.run; p.tile.title = 'Workflow run'; }
+      if (it.type === 'run') { p.tile.innerHTML = MARK.run; p.tile.title = t('Workflow run'); }
       else this.#fillTile(p.tile, it.type === 'type' ? { agentType: it.agentType } : (it.of ?? {}));
       // Several agents of one type: the number is a badge beside the role. Any other group says how many it holds.
-      const size = it.type === 'type' ? `× ${it.count}` : `${it.members.length} ${it.members.length === 1 ? 'agent' : 'agents'}`;
+      const size = it.type === 'type' ? `× ${it.count}` : (it.members.length === 1 ? t('{n} agent', { n: 1 }) : t('{n} agents', { n: it.members.length }));
       // The group stands where its first member does in the order of the calls.
       p.sub.textContent = [orderTag(it.first), size].filter(Boolean).join(' · ');
       p.sub.classList.toggle('cv-times', it.type === 'type');
       p.fold.innerHTML = it.boxed ? MARK.down : MARK.chevron;
       // Read aloud, the badge is part of the name.
       const said = it.type === 'type' ? `${it.label} × ${it.count}` : it.label;
-      p.fold.setAttribute('aria-label', `${it.open ? 'Fold' : 'Open'} ${said}`);
+      p.fold.setAttribute('aria-label', it.open ? t('Fold {name}', { name: said }) : t('Open {name}', { name: said }));
       p.fold.setAttribute('aria-expanded', String(Boolean(it.open)));
       // The bar: how the group went, in the order the eye wants it.
       const order = ['done', 'running', 'starting', 'failed', 'killed', 'stopped', 'stale', 'ended'];
@@ -948,10 +949,10 @@ export class Canvas {
       // Beside the bar: how the members went — or, at compact density where the card has no line for it, the
       // models they ran on, with how they went left to the bar and its tooltip.
       const mix = modelMix(it.members).replace(/, /g, ' \u00b7 ');
-      if (!it.boxed) { p.count.textContent = it.compact && mix ? `${says} \u00b7 ${mix}` : says; p.count.title = it.compact && mix ? `${says}\nThe models its agents ran on: ${mix}` : ''; }
+      if (!it.boxed) { p.count.textContent = it.compact && mix ? `${says} \u00b7 ${mix}` : says; p.count.title = it.compact && mix ? `${says}\n${t('The models its agents ran on: {mix}', { mix })}` : ''; }
       if (!it.boxed) this.#fillTotals(p, it);
-      el.title = it.boxed ? '' : (it.open ? 'Click to fold' : `Click to show ${it.members.length} agents`);
-      el.setAttribute('aria-label', `${said}, ${says}, ${it.open ? 'open' : 'folded'}`);
+      el.title = it.boxed ? '' : (it.open ? t('Click to fold') : t('Click to show {n} agents', { n: it.members.length }));
+      el.setAttribute('aria-label', `${said}, ${says}, ${it.open ? t('open') : t('folded')}`);
     }
     if (!it.boxed) return;
 
@@ -1018,13 +1019,13 @@ export class Canvas {
     if (it.compact) return;
     p.totals.textContent = [
       s.timed ? fmtDuration(s.durationMs) : null,
-      s.counted ? `${fmtCount(s.fresh)} new` : null,
-      s.counted ? `${fmtCount(s.cacheRead)} cache` : null,
+      s.counted ? t('{n} new', { n: fmtCount(s.fresh) }) : null,
+      s.counted ? t('{n} cache', { n: fmtCount(s.cacheRead) }) : null,
       s.counted ? fmtCost(s.cost) : null,
     ].filter(Boolean).join(' \u00b7 ');
-    p.totals.title = `${it.members.length} calls. Time, new tokens, tokens read from the cache, and cost: ${COST_NOTE}`;
+    p.totals.title = t('{n} calls. Time, new tokens, tokens read from the cache, and cost: {note}', { n: it.members.length, note: COST_NOTE });
     p.mix.textContent = modelMix(it.members);
-    p.mix.title = 'The models its agents ran on';
+    p.mix.title = t('The models its agents ran on');
   }
 
   /** What an inferred wire says: on hover that it is an inference, and once per reporter, in words beside it. */
@@ -1073,11 +1074,12 @@ export class Canvas {
         this.edgeG.append(path);
       }
 
-      // Out of the right edge of what spawned it, into the left edge of the card. The control points are pushed
-      // along the flow so siblings fan out instead of stacking on one line.
+      // Out of the right edge of what spawned it, into the left edge of the card (mirrored on the left side, where
+      // `dir` is -1). The control points are pushed along the flow so siblings fan out instead of stacking on one line.
       const { from, to } = e;
       const c = Math.max(24, Math.abs(to.x - from.x) * 0.55);
-      const d = `M ${from.x} ${from.y} C ${from.x + c} ${from.y}, ${to.x - c} ${to.y}, ${to.x} ${to.y}`;
+      const k = c * (e.dir ?? 1);
+      const d = `M ${from.x} ${from.y} C ${from.x + k} ${from.y}, ${to.x - k} ${to.y}, ${to.x} ${to.y}`;
       if (path.d !== d) {
         path.d = d;
         path.setAttribute('d', d);
@@ -1345,14 +1347,14 @@ export class Canvas {
         // What it is doing this moment, for an agent that is doing something.
         if (n.status === 'running' && n.lastTool) bits.push(`\u25b8 ${n.lastTool}`);
         if (n.durationMs != null) bits.push(fmtDuration(n.durationMs));
-        if (n.toolCount) bits.push(`${n.toolCount} ${n.toolCount === 1 ? 'call' : 'calls'}`);
-        if (n.tokens != null) bits.push(`${fmtTokens(n.tokens)} tokens`);
-        if (n.errors) bits.push(`${n.errors} ${n.errors === 1 ? 'error' : 'errors'}`);
+        if (n.toolCount) bits.push(n.toolCount === 1 ? t('{n} call', { n: 1 }) : t('{n} calls', { n: n.toolCount }));
+        if (n.tokens != null) bits.push(t('{n} tokens', { n: fmtTokens(n.tokens) }));
+        if (n.errors) bits.push(n.errors === 1 ? t('{n} error', { n: 1 }) : t('{n} errors', { n: n.errors }));
         this.tipEl.replaceChildren(
           mk('strong', null, shownType(n)),
           mk('div', 'cv-sub cv-real', n.agentType ?? ''),
-          mk('div', null, n.description || 'No task recorded'),
-          mk('div', 'cv-sub', bits.length ? bits.join(' · ') : 'No numbers yet'),
+          mk('div', null, n.description || t('No task recorded')),
+          mk('div', 'cv-sub', bits.length ? bits.join(' · ') : t('No numbers yet')),
         );
         const host = this.root.getBoundingClientRect();
         const r = el.getBoundingClientRect();
@@ -1417,14 +1419,14 @@ function readPref(key, allowed, fallback) {
 function factsOf(n) {
   return [
     n.durationMs != null ? fmtDuration(n.durationMs) : null,
-    n.usage ? `${fmtCount(n.usage.tokens.fresh)} new` : null,
+    n.usage ? t('{n} new', { n: fmtCount(n.usage.tokens.fresh) }) : null,
     n.usage ? fmtCost(n.usage.cost) : null,
   ].filter(Boolean).join(' \u00b7 ');
 }
 function factsTitle(n) {
   if (!n.usage) return '';
-  const t = n.usage.tokens;
-  return `New tokens ${fmtCount(t.fresh)} (input ${fmtCount(t.input)}, output ${fmtCount(t.output)}, cache write ${fmtCount(t.cacheWrite)}); read from cache ${fmtCount(t.cacheRead)}\n${COST_NOTE}`;
+  const k = n.usage.tokens;
+  return `${t('New tokens {fresh} (input {input}, output {output}, cache write {write}); read from cache {read}', { fresh: fmtCount(k.fresh), input: fmtCount(k.input), output: fmtCount(k.output), write: fmtCount(k.cacheWrite), read: fmtCount(k.cacheRead) })}\n${COST_NOTE}`;
 }
 
 function fmtTokens(t) {
@@ -1436,9 +1438,9 @@ function fmtTokens(t) {
 
 function fmtDuration(ms) {
   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);
-  return m < 60 ? `${m}m ${s % 60}s` : `${Math.floor(m / 60)}h ${m % 60}m`;
+  return m < 60 ? t('{m}m {s}s', { m, s: s % 60 }) : t('{h}h {m}m', { h: Math.floor(m / 60), m: m % 60 });
 }
 
 function shortPath(p, max = 28) {