crewforth 3.4.0 → 3.5.0-rc.2

package/kit/studio/web/chat.js

@@ -16,6 +16,7 @@ import { renderMarkdown } from './md.js';
 import {
   toolBlock, resultsIn, isDelegation, summaryOf, outputOf, delegationCard, reminderOf, headerOf, refusals,
 } from './convo.js';
+import { t, tParts } from './i18n.js';
 
 const el = (tag, cls, text) => {
   const n = document.createElement(tag);
@@ -148,7 +149,7 @@ class Pane {
     this.remindEl = el('div', 'chat-remind');
     this.remindEl.hidden = true;
     this.remindText = el('span', 'chat-remind-text');
-    const review = el('button', 'chat-review', 'Review');
+    const review = el('button', 'chat-review', t('Review'));
     review.type = 'button';
     review.addEventListener('click', () => this.hooks.onReview?.(this));
     this.remindEl.append(el('span', 'dot'), this.remindText, review);
@@ -157,12 +158,12 @@ class Pane {
     this.formEl = el('form', 'chat-form');
     this.inputEl = el('textarea', 'chat-input');
     this.inputEl.rows = 3;
-    this.inputEl.placeholder = 'Message this session';
-    this.inputEl.setAttribute('aria-label', 'Message this session');
+    this.inputEl.placeholder = t('Message this session');
+    this.inputEl.setAttribute('aria-label', t('Message this session'));
     const formFoot = el('div', 'chat-form-foot');
-    const send = el('button', 'btn sm primary chat-send', 'Send');
+    const send = el('button', 'btn sm primary chat-send', t('Send'));
     send.type = 'submit';
-    formFoot.append(el('span', 'sub', 'Enter to send · Shift+Enter for a new line'), el('span', 'row-fill'), send);
+    formFoot.append(el('span', 'sub', t('Enter to send · Shift+Enter for a new line')), el('span', 'row-fill'), send);
     this.formEl.append(this.inputEl, formFoot);
 
     this.roEl = el('div', 'chat-ro');
@@ -205,15 +206,15 @@ class Pane {
       conv = await fetch(this.api(`/api/session/${encodeURIComponent(from)}/conversation`), { cache: 'no-store' })
         .then((r) => r.json());
     } catch (e) {
-      this.note(`History not read: ${e.message}`, 'bad');
+      this.note(t('History not read: {reason}', { reason: e.message }), 'bad');
       return;
     }
-    if (conv?.transcriptsHidden) { this.note('Transcripts are hidden on this link', 'muted'); return; }
-    if (conv?.measured === false) { this.note(`History not measured — ${conv.reason}`, 'bad'); return; }
+    if (conv?.transcriptsHidden) { this.note(t('Transcripts are hidden on this link'), 'muted'); return; }
+    if (conv?.measured === false) { this.note(t('History not measured — {reason}', { reason: conv.reason }), 'bad'); return; }
 
     const frag = document.createDocumentFragment();
     if (conv.truncated) {
-      frag.append(el('div', 'chat-note', `${conv.total - conv.messages.length} earlier message(s) not shown`));
+      frag.append(el('div', 'chat-note', t('{n} earlier message(s) not shown', { n: conv.total - conv.messages.length })));
     }
     for (const m of conv.messages ?? []) frag.append(this.renderMessage(m, { quick: false }));
     if (!this.readOnly) {
@@ -223,8 +224,8 @@ class Pane {
       // is the one thing it is not; a real continuation that calls itself a
       // fork undersells it.
       frag.append(el('div', 'chat-seam', this.session?.forked
-        ? `— forked from ${from.slice(0, 8)} · a separate session; the original does not see this —`
-        : `— continuing ${from.slice(0, 8)} · same session, same transcript —`));
+        ? t('— forked from {id} · a separate session; the original does not see this —', { id: from.slice(0, 8) })
+        : t('— continuing {id} · same session, same transcript —', { id: from.slice(0, 8) })));
     }
     this.logEl.prepend(frag);
     this.logEl.scrollTop = this.logEl.scrollHeight;
@@ -328,7 +329,7 @@ class Pane {
       return wrap;
     }
 
-    wrap.append(el('div', 'msg-role', 'Session'));
+    wrap.append(el('div', 'msg-role', t('Session')));
     const body = el('div', 'msg-body');
     for (const b of msg.blocks) {
       if (b.kind === 'text') {
@@ -355,7 +356,7 @@ class Pane {
           b.addEventListener('click', () => { row.remove(); this.sendText(o); });
           row.append(b);
         }
-        row.append(el('span', 'sub quick-hint', 'Clicking an option sends it as your reply.'));
+        row.append(el('span', 'sub quick-hint', t('Clicking an option sends it as your reply.')));
         wrap.append(row);
       }
     }
@@ -377,7 +378,7 @@ class Pane {
     row.addEventListener('click', () => {
       const text = outputOf(block);
       // A call that has not come back has nothing to open, and says which it is rather than opening an empty box.
-      out.textContent = text ?? (this.readOnly ? 'Output not read from the transcript.' : 'Not returned yet.');
+      out.textContent = text ?? (this.readOnly ? t('Output not read from the transcript.') : t('Not returned yet.'));
       out.hidden = !out.hidden;
       row.setAttribute('aria-expanded', String(!out.hidden));
     });
@@ -463,7 +464,7 @@ class Pane {
     }
     node.replaceChildren(...parts);
     node.disabled = !card.agentId;
-    node.title = card.agentId ? 'Show this agent on the graph' : 'This agent is not on the graph being shown';
+    node.title = card.agentId ? t('Show this agent on the graph') : t('This agent is not on the graph being shown');
   }
 
   /** The graph moved: the cards say what their agents are doing now. */
@@ -487,7 +488,7 @@ class Pane {
     if (!this.streaming) { node?.remove(); return; }
     if (!node) {
       node = el('div', 'msg msg-assistant msg-streaming');
-      node.append(el('div', 'msg-role', 'Session'));
+      node.append(el('div', 'msg-role', t('Session')));
       node.append(el('div', 'msg-body'));
       this.logEl.append(node);
     }
@@ -496,7 +497,7 @@ class Pane {
       body.textContent = this.streaming.text;
       body.classList.add('msg-text');
     } else {
-      body.replaceChildren(el('span', 'thinking', 'thinking…'));
+      body.replaceChildren(el('span', 'thinking', t('thinking…')));
     }
     this.scroll();
   }
@@ -512,24 +513,24 @@ class Pane {
     const parts = [badge];
     for (const p of h.parts) {
       // The mode is a control: a click offers the modes a session can be in. Everything else in the strip is said.
-      if (h.mode && p === `mode: ${h.mode}` && this.hooks.onMode && s?.state !== 'exited' && s?.state !== 'failed') {
+      if (h.mode && p === t('mode: {mode}', { mode: h.mode }) && this.hooks.onMode && s?.state !== 'exited' && s?.state !== 'failed') {
         const b = el('button', 'sub pane-mode', p);
         b.type = 'button';
-        b.title = 'Change the mode this session is in';
+        b.title = t('Change the mode this session is in');
         b.setAttribute('aria-haspopup', 'menu');
         b.addEventListener('click', (e) => { e.stopPropagation(); this.hooks.onMode(this, b, h.mode); });
         parts.push(b);
       } else parts.push(el('span', 'sub', p));
     }
     if (h.ungated) {
-      const warn = el('span', 'pill pane-ungated', 'No approval gate');
-      warn.title = 'This session was started without the approval gate: its tool calls do not wait for you.';
+      const warn = el('span', 'pill pane-ungated', t('No approval gate'));
+      warn.title = t('This session was started without the approval gate: its tool calls do not wait for you.');
       parts.push(warn);
     }
     parts.push(el('span', 'row-fill'));
     if (!this.readOnly && s?.costUsd) {
       const cost = el('span', 'sub pane-cost', `$${s.costUsd.toFixed(4)}`);
-      cost.title = 'What this session has cost, as the CLI reported it';
+      cost.title = t('What this session has cost, as the CLI reported it');
       parts.push(cost);
     }
     // Stopping ends the process. It is offered for as long as there is one.
@@ -537,7 +538,7 @@ class Pane {
       const stop = el('button', 'btn sm chat-stop');
       stop.type = 'button';
       stop.innerHTML = '<svg class="ic" viewBox="0 0 16 16" aria-hidden="true"><rect x="4" y="4" width="8" height="8" rx="1.5"/></svg>';
-      stop.append(el('span', null, 'Stop'));
+      stop.append(el('span', null, t('Stop')));
       stop.addEventListener('click', () => this.stop());
       parts.push(stop);
     }
@@ -553,36 +554,35 @@ class Pane {
    */
   paintReadOnly() {
     const lead = el('p', 'chat-ro-lead');
-    lead.append(el('strong', null, 'This session was not started here.'),
-      ' Studio can read it but cannot write to it or answer its approvals.');
+    lead.append(el('strong', null, t('This session was not started here.')),
+      ` ${t('Studio can read it but cannot write to it or answer its approvals.')}`);
 
-    const cont = el('button', 'btn sm primary', 'Continue here');
+    const cont = el('button', 'btn sm primary', t('Continue here'));
     cont.type = 'button';
     cont.addEventListener('click', () => this.hooks.onContinue?.(this, cont));
     const contRow = el('div', 'chat-ro-row');
     // Said before the press, from the server's own check (the one Continue here acts on): the same session, or a copy.
     // Until the server answers, and if it cannot: the sentence true of both outcomes.
-    const FALLBACK = 'Continues it in Studio. If it is still open somewhere else, Studio starts a copy instead: '
-      + 'the original does not see this, and messages here never reach your terminal.';
+    const FALLBACK = t('Continues it in Studio. If it is still open somewhere else, Studio starts a copy instead: the original does not see this, and messages here never reach your terminal.');
     const contText = el('span', 'sub', FALLBACK);
     contRow.append(cont, contText);
 
-    const term = el('button', 'btn sm', 'Open in terminal');
+    const term = el('button', 'btn sm', t('Open in terminal'));
     term.type = 'button';
     term.addEventListener('click', (e) => { e.stopPropagation(); this.hooks.onTerminal?.(this, term); });
     const line = el('code', 'chat-ro-cmd');
     const termText = el('span', 'sub');
-    termText.append('Shows the command first, then opens a terminal: ', line);
+    termText.append(...tParts('Shows the command first, then opens a terminal: {command}', { command: line }));
     const termRow = el('div', 'chat-ro-row');
     termRow.append(term, termText);
 
     // Back to the desktop app: the command, to copy and run where the app is.
     const deskLine = el('code', 'chat-ro-cmd');
-    const deskCopy = el('button', 'btn sm', 'Copy');
+    const deskCopy = el('button', 'btn sm', t('Copy'));
     deskCopy.type = 'button';
     deskCopy.addEventListener('click', () => { if (deskLine.dataset.cmd) navigator.clipboard?.writeText(deskLine.dataset.cmd).then(() => { deskCopy.textContent = 'Copied'; }, () => {}); });
     const deskText = el('span', 'sub');
-    deskText.append('Open it in the desktop app again: ', deskLine);
+    deskText.append(...tParts('Open it in the desktop app again: {command}', { command: deskLine }));
     const deskRow = el('div', 'chat-ro-row');
     deskRow.append(deskCopy, deskText);
 
@@ -592,18 +592,18 @@ class Pane {
     fetch(this.api(`/api/session/${encodeURIComponent(this.id)}/terminal`), { cache: 'no-store' })
       .then((r) => r.json())
       .then((r) => {
-        line.textContent = r?.plan?.line ?? 'not measured — no working directory or session id recorded';
+        line.textContent = r?.plan?.line ?? t('not measured — no working directory or session id recorded');
         // On Windows the command is a PowerShell line (no one line works in cmd and PowerShell 5.1 both): say so.
-        deskLine.textContent = r?.desktop?.line ?? 'not measured — no working directory or session id recorded';
+        deskLine.textContent = r?.desktop?.line ?? t('not measured — no working directory or session id recorded');
         if (r?.desktop?.line) deskLine.dataset.cmd = r.desktop.line; else deskCopy.disabled = true;
-        if (r?.desktop?.shell === 'PowerShell') deskText.append(' (in PowerShell)');
+        if (r?.desktop?.shell === 'PowerShell') deskText.append(` ${t('(in PowerShell)')}`);
         contText.textContent = r?.continueAs === 'same'
-          ? 'Continues this same session in Studio: its id and history stay, and the desktop app or a terminal that opens it later sees what you add here. Nothing else has it open now.'
+          ? t('Continues this same session in Studio: its id and history stay, and the desktop app or a terminal that opens it later sees what you add here. Nothing else has it open now.')
           : r?.continueAs === 'copy'
-            ? 'It is open somewhere else right now, so Studio starts a copy: the original does not see this, and messages here never reach your terminal or the desktop app.'
+            ? t('It is open somewhere else right now, so Studio starts a copy: the original does not see this, and messages here never reach your terminal or the desktop app.')
             : FALLBACK;
       })
-      .catch((e) => { line.textContent = `not read — ${e.message}`; deskLine.textContent = `not read — ${e.message}`; deskCopy.disabled = true; });
+      .catch((e) => { line.textContent = t('not read — {reason}', { reason: e.message }); deskLine.textContent = t('not read — {reason}', { reason: e.message }); deskCopy.disabled = true; });
   }
 
   paintState() {
@@ -654,7 +654,7 @@ class Pane {
       body: JSON.stringify({ text }),
     }).then((r) => r.json()).catch((e) => ({ ok: false, reason: e.message }));
 
-    if (!res.ok) { this.clearPending(); this.note(`Not sent: ${res.reason}`, 'bad'); }
+    if (!res.ok) { this.clearPending(); this.note(t('Not sent: {reason}', { reason: res.reason }), 'bad'); }
     else { this.session = res.session; this.paintState(); this.onChange(this); }
     return res;
   }
@@ -811,11 +811,11 @@ export class Chat {
       tab.append(el('span', 'tab-name', String(name).slice(0, 28)));
       if (p.permissions?.length) tab.append(el('span', 'tab-badge warn', String(p.permissions.length)));
       else if (p.unread) tab.append(el('span', 'tab-badge', String(p.unread)));
-      tab.title = `${name}\n${id}\n${p.readOnly ? 'read only' : `${p.session?.state ?? ''} · ${p.session?.permissionMode ?? ''}`}`;
+      tab.title = `${name}\n${id}\n${p.readOnly ? t('read only') : `${p.session?.state ?? ''} · ${p.session?.permissionMode ?? ''}`}`;
       tab.addEventListener('click', () => this.activate(id));
 
       const x = el('span', 'tab-x', '×');
-      x.title = 'Close this tab — the session keeps running';
+      x.title = t('Close this tab — the session keeps running');
       x.addEventListener('click', (e) => { e.stopPropagation(); this.close(id); });
       tab.append(x);
       frag.append(tab);

package/kit/studio/web/convo.js

@@ -4,6 +4,7 @@
 // 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, modelOf } from './names.js';
+import { t, numLocale } from './i18n.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;
@@ -60,7 +61,7 @@ export function summaryOf(block) {
   if (!r) return { state: 'pending', text: null };
   const lines = r.text.split('\n').map((l) => l.trim()).filter(Boolean);
   const last = lines.length ? lines[lines.length - 1] : null;
-  const text = last == null ? 'no output' : (last.length > SUMMARY_MAX ? `${last.slice(0, SUMMARY_MAX - 1)}…` : last);
+  const text = last == null ? t('no output') : (last.length > SUMMARY_MAX ? `${last.slice(0, SUMMARY_MAX - 1)}…` : last);
   return { state: r.error ? 'error' : 'ok', text };
 }
 
@@ -68,8 +69,8 @@ export function summaryOf(block) {
 export function outputOf(block) {
   const r = block?.result;
   if (!r) return null;
-  if (!r.text) return '(no output)';
-  return r.truncated ? `… ${(r.length - r.text.length).toLocaleString('en-US')} earlier characters not shown\n${r.text}` : r.text;
+  if (!r.text) return t('(no output)');
+  return r.truncated ? `${t('… {n} earlier characters not shown', { n: (r.length - r.text.length).toLocaleString(numLocale()) })}\n${r.text}` : r.text;
 }
 
 /**
@@ -112,11 +113,11 @@ export function refusals(denials, wasAllowed, resultOf = () => null) {
     // Who refused is in the result's own words. Another PreToolUse hook that blocked the call is reported by
     // the harness as a hook error; anything else is the harness's own check. With no result on screen the line
     // says only what is known: it was allowed here and did not run.
-    const by = reason == null ? 'it did not run'
-      : /^PreToolUse:\S* hook error/.test(reason) ? 'another gate blocked it' : 'Claude Code refused it';
+    const by = reason == null ? t('it did not run')
+      : /^PreToolUse:\S* hook error/.test(reason) ? t('another gate blocked it') : t('Claude Code refused it');
     out.push({
       id: d.tool_use_id,
-      text: `Allowed here, but ${by}: ${d.tool_name ?? 'tool'}${what ? ` · ${String(what).slice(0, 120)}` : ''}`
+      text: `${t('Allowed here, but {by}: {tool}', { by, tool: d.tool_name ?? t('tool') })}${what ? ` · ${String(what).slice(0, 120)}` : ''}`
         + (reason ? ` — ${reason.slice(0, 200)}` : ''),
     });
   }
@@ -127,29 +128,33 @@ export function refusals(denials, wasAllowed, resultOf = () => null) {
 export function reminderOf(waiting) {
   const list = waiting ?? [];
   if (!list.length) return null;
-  const who = list[0].agentType ? roleName(list[0].agentType) : 'This session';
+  const who = list[0].agentType ? roleName(list[0].agentType) : t('This session');
   const more = list.length - 1;
-  return `${who} is waiting for approval${more > 0 ? `, and ${more} more ${more === 1 ? 'request is' : 'requests are'}` : ''}`;
+  if (more <= 0) return t('{who} is waiting for approval', { who });
+  return more === 1 ? t('{who} is waiting for approval, and 1 more request is', { who })
+    : t('{who} is waiting for approval, and {n} more requests are', { who, n: more });
 }
 
 // The modes a session started here can be put in: the three it can be started in, and no other.
 export const SESSION_MODES = [
-  { mode: 'plan', label: 'plan', title: 'Explore and plan; nothing is edited until a plan is approved.' },
-  { mode: 'acceptEdits', label: 'acceptEdits', title: 'File edits in the project are accepted; every call is still shown in the dock first.' },
-  { mode: 'default', label: 'default', title: 'Each call is asked about in the dock.' },
+  { mode: 'plan', label: 'plan', title: t('Explore and plan; nothing is edited until a plan is approved.') },
+  { mode: 'acceptEdits', label: 'acceptEdits', title: t('File edits in the project are accepted; every call is still shown in the dock first.') },
+  { mode: 'default', label: 'default', title: t('Each call is asked about in the dock.') },
 ];
 
 /** The strip above a conversation: what kind of session this is, in the order the design has it. */
 export function headerOf(session, { readOnly = false, contextTokens = null } = {}) {
-  if (readOnly) return { badge: 'Read only', tone: 'none', parts: [] };
+  if (readOnly) return { badge: t('Read only'), tone: 'none', parts: [] };
   const parts = [];
-  if (session?.permissionMode) parts.push(`mode: ${session.permissionMode}`);
+  if (session?.permissionMode) parts.push(t('mode: {mode}', { mode: session.permissionMode }));
   const facts = [];
-  if (typeof session?.turns === 'number') facts.push(`${session.turns} ${session.turns === 1 ? 'turn' : 'turns'}`);
-  if (contextTokens != null) facts.push(`${fmtK(contextTokens)} ctx`);
+  if (typeof session?.turns === 'number') facts.push(session.turns === 1 ? t('{n} turn', { n: 1 }) : t('{n} turns', { n: session.turns }));
+  if (contextTokens != null) facts.push(t('{n} ctx', { n: fmtK(contextTokens) }));
   if (facts.length) parts.push(facts.join(' · '));
+  const changed = changesLine(session?.changes);
+  if (changed) parts.push(changed);
   return {
-    badge: 'Started here',
+    badge: t('Started here'),
     tone: 'good',
     parts,
     // The mode on its own as well: in the strip it is a control, and the rest of `parts` is not.
@@ -159,6 +164,18 @@ export function headerOf(session, { readOnly = false, contextTokens = null } = {
   };
 }
 
+/**
+ * What a session started here has changed since it started, as the server read it from git: null when it was not
+ * measured or nothing changed, so a strip never shows a 0 nobody counted.
+ */
+export function changesLine(c) {
+  if (!c?.measured || (!c.files && !c.untracked)) return null;
+  const bits = [];
+  if (c.files) bits.push(c.files === 1 ? t('{n} file changed (+{added} −{removed})', { n: 1, added: c.added, removed: c.removed }) : t('{n} files changed (+{added} −{removed})', { n: c.files, added: c.added, removed: c.removed }));
+  if (c.untracked) bits.push(t('{n} new untracked', { n: c.untracked }));
+  return bits.join(' · ');
+}
+
 function fmtK(t) {
   if (t < 1000) return `${t}`;
   if (t < 1_000_000) return `${(t / 1000).toFixed(t < 10_000 ? 1 : 0)}k`;

package/kit/studio/web/dock.js

@@ -5,6 +5,7 @@
 // approvals.js; this file draws it and hands the three answers back.
 import { remaining, asker, allowSessionLabel, VERDICTS, OUTCOME_WORD } from './approvals.js';
 import { AskForms } from './ask.js';
+import { t } from './i18n.js';
 
 const SVG = 'http://www.w3.org/2000/svg';
 const RING = 2 * Math.PI * 15;      // the countdown ring's circumference, r = 15
@@ -65,11 +66,11 @@ export class Dock {
 
     const text = mk('div', 'dock-text');
     const head = mk('div', 'dock-head');
-    const word = mk('span', 'dock-word', 'Needs you');
+    const word = mk('span', 'dock-word', t('Needs you'));
     // Who asked is the way to them: it brings that agent's card into view.
     const who = mk('button', 'dock-who');
     who.type = 'button';
-    who.title = 'Show on the canvas';
+    who.title = t('Show on the canvas');
     who.addEventListener('click', () => { if (this.current) this.onLocate(this.current); });
     const tool = mk('span', 'dock-tool');
     const where = mk('span', 'dock-where');
@@ -84,12 +85,12 @@ export class Dock {
     const nav = mk('div', 'dock-nav');
     const prev = mk('button', 'btn icon sm ghost dock-step');
     prev.type = 'button';
-    prev.setAttribute('aria-label', 'Previous request');
+    prev.setAttribute('aria-label', t('Previous request'));
     prev.innerHTML = '<svg class="ic" viewBox="0 0 16 16" aria-hidden="true"><path d="M10 4l-4 4 4 4"/></svg>';
     const count = mk('span', 'dock-count');
     const next = mk('button', 'btn icon sm ghost dock-step');
     next.type = 'button';
-    next.setAttribute('aria-label', 'Next request');
+    next.setAttribute('aria-label', t('Next request'));
     next.innerHTML = '<svg class="ic" viewBox="0 0 16 16" aria-hidden="true"><path d="M6 4l4 4-4 4"/></svg>';
     prev.addEventListener('click', () => this.step(-1));
     next.addEventListener('click', () => this.step(1));
@@ -192,14 +193,14 @@ export class Dock {
       return;
     }
     this.root.dataset.state = 'waiting';
-    p.word.textContent = 'Needs you';
+    p.word.textContent = t('Needs you');
 
     p.who.textContent = asker(item);
-    p.who.title = item.agentType ? `${item.agentType} — show on the canvas` : 'Show on the canvas';
+    p.who.title = item.agentType ? t('{type} — show on the canvas', { type: item.agentType }) : t('Show on the canvas');
     p.tool.textContent = item.toolName;
     const where = this.where(item);
     p.where.hidden = !where;
-    p.where.textContent = where ? `in ${where}` : '';
+    p.where.textContent = where ? t('in {name}', { name: where }) : '';
     // A question or a plan: its form, in place of the command and the three buttons.
     const form = this.forms.get(item);
     p.ask.hidden = !form;
@@ -207,37 +208,37 @@ export class Dock {
     // Put in once and left there: a form taken out and put back on every tick would lose the caret in it.
     if (this.shownForm !== form) { p.ask.replaceChildren(...(form ? [form] : [])); this.shownForm = form; }
     this.root.dataset.ask = form ? item.ask.kind : '';
-    p.tool.textContent = form ? (item.ask.kind === 'plan' ? 'wants its plan approved' : 'asks') : item.toolName;
+    p.tool.textContent = form ? (item.ask.kind === 'plan' ? t('wants its plan approved') : t('asks')) : item.toolName;
     p.cmd.hidden = !item.detail || Boolean(form);
     p.cmd.textContent = item.detail ?? '';
     p.cmd.classList.toggle('open', this.open);
     p.cmd.setAttribute('aria-expanded', String(this.open));
-    p.cmd.title = this.open ? 'Show on one line' : 'Show the whole command';
+    p.cmd.title = this.open ? t('Show on one line') : t('Show the whole command');
 
     const r = remaining(item, this.now());
     if (r.known) {
       p.ring.style.strokeDasharray = `${(r.fraction * RING).toFixed(1)} ${RING.toFixed(1)}`;
-      p.secs.textContent = `${r.left}s`;
-      p.timer.setAttribute('aria-label', `Auto-deny in ${r.left} seconds`);
-      p.note.textContent = form ? `Refused in ${r.left}s if nobody answers` : `Auto-deny in ${r.left}s if nobody answers`;
+      p.secs.textContent = t('{n}s', { n: r.left });
+      p.timer.setAttribute('aria-label', t('Auto-deny in {n} seconds', { n: r.left }));
+      p.note.textContent = form ? t('Refused in {n}s if nobody answers', { n: r.left }) : t('Auto-deny in {n}s if nobody answers', { n: r.left });
     } else {
       // The server did not say how long the hook waits. No clock is better than an invented one.
       p.ring.style.strokeDasharray = `0 ${RING.toFixed(1)}`;
       p.secs.textContent = '?';
-      p.timer.setAttribute('aria-label', 'Time left not measured');
-      p.note.textContent = 'Time left not measured — it is denied if nobody answers';
+      p.timer.setAttribute('aria-label', t('Time left not measured'));
+      p.note.textContent = t('Time left not measured — it is denied if nobody answers');
     }
 
     p.nav.hidden = this.items.length < 2;
-    p.count.textContent = `${this.at + 1} of ${this.items.length}`;
-    p.nav.setAttribute('aria-label', `Request ${this.at + 1} of ${this.items.length}`);
+    p.count.textContent = t('{at} of {n}', { at: this.at + 1, n: this.items.length });
+    p.nav.setAttribute('aria-label', t('Request {at} of {n}', { at: this.at + 1, n: this.items.length }));
 
     const sent = this.busy.has(item.key);
     p.always.textContent = allowSessionLabel(item.toolName);
-    p.always.title = `Allow this call, and stop asking here about ${item.toolName} for the rest of the session. Later calls are not approved for Claude Code: it still applies its own checks to them.`;
+    p.always.title = t('Allow this call, and stop asking here about {tool} for the rest of the session. Later calls are not approved for Claude Code: it still applies its own checks to them.', { tool: item.toolName });
     for (const b of [p.deny, p.always, p.allow]) b.disabled = sent;
     this.root.setAttribute('aria-label', form
-      ? `Waiting for you: ${asker(item)} ${item.ask.kind === 'plan' ? 'wants its plan approved' : 'asks a question'}`
-      : `Waiting for approval: ${asker(item)} wants to run ${item.toolName}`);
+      ? (item.ask.kind === 'plan' ? t('Waiting for you: {who} wants its plan approved', { who: asker(item) }) : t('Waiting for you: {who} asks a question', { who: asker(item) }))
+      : t('Waiting for approval: {who} wants to run {tool}', { who: asker(item), tool: item.toolName }));
   }
 }