crewforth 3.4.0 → 3.5.0-rc.2

package/kit/studio/web/models.js

@@ -6,6 +6,7 @@
 // Crewforth's command for it and lowers nothing. Then the normal work that ran above the table's model: said, with
 // the record's evidence where there is some, and not acted on either.
 import { classRow, suggestionText, aboveText, emptyNote, totalsLine, costLine, SOURCE, LOWER_RULE, ABOVE_HEAD, ABOVE_RULE } from './models-plan.js';
+import { t } from './i18n.js';
 
 function mk(tag, cls, text) {
   const n = document.createElement(tag);
@@ -14,7 +15,7 @@ function mk(tag, cls, text) {
   return n;
 }
 
-const COLUMNS = [['Agent · change', ''], ['Risk', ''], ['Model', ''], ['Tasks', 'mv-num'], ['First try', 'mv-num'], ['Escalated', 'mv-num'], ['Est. cost', 'mv-num']];
+const COLUMNS = [[t('Agent · change'), ''], [t('Risk'), ''], [t('Model'), ''], [t('Tasks'), 'mv-num'], [t('First try'), 'mv-num'], [t('Escalated'), 'mv-num'], [t('Est. cost'), 'mv-num']];
 
 export class Models {
   /** @param hooks.onCopy(text) put the command on the clipboard */
@@ -40,8 +41,8 @@ export class Models {
     const source = mk('span', 'sub', SOURCE);
     source.title = [totalsLine(d), costLine(this.costs)].filter(Boolean).join(' \u00b7 ');
     // Lines the hooks could not have written are not counted, and that is said where the count is.
-    if (d.dropped) source.textContent = `${SOURCE} \u00b7 ${d.dropped} ${d.dropped === 1 ? 'line' : 'lines'} not read`;
-    head.append(mk('h2', 'mv-title', 'Which model each kind of task needs'), mk('span', 'row-fill'), source);
+    if (d.dropped) source.textContent = `${SOURCE} \u00b7 ${d.dropped === 1 ? t('1 line not read') : t('{n} lines not read', { n: d.dropped })}`;
+    head.append(mk('h2', 'mv-title', t('Which model each kind of task needs')), mk('span', 'row-fill'), source);
     pane.append(head);
 
     const scroll = mk('div', 'mv-scroll');
@@ -64,7 +65,7 @@ export class Models {
       risk.append(tag);
       const model = mk('td');
       const ran = mk('span', null, r.models);
-      ran.title = r.ranOn ? `Ran on: ${r.ranOn}` : '';
+      ran.title = r.ranOn ? t('Ran on: {model}', { model: r.ranOn }) : '';
       model.append(ran);
       if (r.floorTag) {
         const raised = mk('span', 'mv-tag', r.floorTag);
@@ -74,7 +75,7 @@ export class Models {
         raisedNotes.push({ tag: r.floorTag, text: `${r.who} · ${r.change}: ${r.raisedWhy}` });
       }
       const first = mk('td', 'mv-num');
-      first.title = [r.firstTryOf, r.after, r.notVerified ? `Not verified: ${r.notVerified}` : null].filter(Boolean).join('\n');
+      first.title = [r.firstTryOf, r.after, r.notVerified ? t('Not verified: {what}', { what: r.notVerified }) : null].filter(Boolean).join('\n');
       first.append(mk('span', null, r.firstTry));
       if (r.rate !== null) {
         const meter = mk('span', 'mv-meter');
@@ -89,7 +90,7 @@ export class Models {
       const cost = mk('td', 'mv-num', r.cost);
       cost.title = r.costNote;
       if (r.partial) cost.dataset.partial = 'true';
-      if (r.advisor) { const t = mk('span', 'mv-tag', 'advisor'); t.dataset.kind = 'advisor'; t.title = r.advisor; cost.append(t); }
+      if (r.advisor) { const tag = mk('span', 'mv-tag', t('advisor')); tag.dataset.kind = 'advisor'; tag.title = r.advisor; cost.append(tag); }
       tr.append(who, risk, model, mk('td', 'mv-num', r.tasks), first, mk('td', 'mv-num', r.escalated), cost);
       tbody.append(tr);
     }
@@ -99,19 +100,19 @@ export class Models {
 
     if (d.suggestions?.length) {
       const box = mk('section', 'mv-suggest');
-      box.append(mk('h3', 'mv-suggest-h', 'Suggestion · needs your approval'));
+      box.append(mk('h3', 'mv-suggest-h', t('Suggestion · needs your approval')));
       for (const s of d.suggestions) {
-        const t = suggestionText(s);
-        box.append(mk('p', 'mv-suggest-text', `${t.title} ${t.says}`));
+        const s2 = suggestionText(s);
+        box.append(mk('p', 'mv-suggest-text', `${s2.title} ${s2.says}`));
         const row = mk('div', 'mv-suggest-row');
-        row.append(mk('span', 'sub', `${LOWER_RULE} ${t.how}`), mk('span', 'row-fill'));
-        if (t.command) {
+        row.append(mk('span', 'sub', `${LOWER_RULE} ${s2.how}`), mk('span', 'row-fill'));
+        if (s2.command) {
           // It copies the words and does nothing else: the hold is lowered where the user sends them.
-          const b = mk('button', 'btn sm', 'Copy command');
+          const b = mk('button', 'btn sm', t('Copy command'));
           b.type = 'button';
-          b.title = 'Copies the command. Nothing is lowered until you send it in your own session.';
-          b.addEventListener('click', () => this.hooks.onCopy?.(t.command));
-          row.append(mk('code', 'mv-cmd', t.command), b);
+          b.title = t('Copies the command. Nothing is lowered until you send it in your own session.');
+          b.addEventListener('click', () => this.hooks.onCopy?.(s2.command));
+          row.append(mk('code', 'mv-cmd', s2.command), b);
         }
         box.append(row);
       }
@@ -121,12 +122,12 @@ export class Models {
       const box = mk('section', 'mv-above');
       box.append(mk('h3', 'mv-suggest-h', ABOVE_HEAD));
       for (const a of d.above) {
-        const t = aboveText(a, this.costs?.measured ? (this.costs.above?.[a.key] ?? null) : null);
-        box.append(mk('p', 'mv-suggest-text', `${t.title} ${t.says}`));
-        const v = mk('p', 'mv-above-verdict', t.verdict);
-        v.dataset.measured = String(t.measured);
+        const at = aboveText(a, this.costs?.measured ? (this.costs.above?.[a.key] ?? null) : null);
+        box.append(mk('p', 'mv-suggest-text', `${at.title} ${at.says}`));
+        const v = mk('p', 'mv-above-verdict', at.verdict);
+        v.dataset.measured = String(at.measured);
         box.append(v);
-        if (t.costs) box.append(mk('p', 'sub', t.costs));
+        if (at.costs) box.append(mk('p', 'sub', at.costs));
       }
       box.append(mk('p', 'sub', ABOVE_RULE));
       pane.append(box);

package/kit/studio/web/names.js

@@ -6,6 +6,8 @@
 // anywhere but on screen. Keys, ids and comparisons use the type.
 
 // A word that is not written the way capitalising its first letter would write it.
+import { t } from './i18n.js';
+
 const WORD = { devops: 'DevOps' };
 
 /** The type as the transcript has it; an agent with none is said to have none. */
@@ -27,7 +29,7 @@ export function roleName(type) {
 }
 
 /** The name a node is drawn with. */
-export const shownType = (n) => roleName(typeOf(n));
+export const shownType = (n) => (n?.agentType ? roleName(n.agentType) : t('unknown agent'));
 
 /** What hovering an agent says: the type as it is declared, and its task in full, since both are cut on screen. */
 /**
@@ -39,12 +41,13 @@ export const shownType = (n) => roleName(typeOf(n));
 export function originOf(type, origins) {
   if (!origins || typeof type !== 'string' || !type) return null;
   const at = type.indexOf(':');
-  if (at > 0 && at < type.length - 1) return `Defined in the plugin \u201c${type.slice(0, at)}\u201d`;
-  if (origins.project && Object.hasOwn(origins.project, type)) return `Defined in this project: .claude/agents/${origins.project[type]}`;
-  if (origins.user && Object.hasOwn(origins.user, type)) return `Defined in your own agents: ~/.claude/agents/${origins.user[type]}`;
-  const unread = [origins.project ? null : 'the project', origins.user ? null : 'your own'].filter(Boolean);
-  return unread.length === 2 ? 'Where it is defined was not read: no agents directory in the project or your own'
-    : `No definition file found${unread.length ? ` (${unread[0]} agents directory was not read)` : ''}: built in to Claude Code, or defined where Studio does not look`;
+  if (at > 0 && at < type.length - 1) return t('Defined in the plugin \u201c{plugin}\u201d', { plugin: type.slice(0, at) });
+  if (origins.project && Object.hasOwn(origins.project, type)) return t('Defined in this project: .claude/agents/{file}', { file: origins.project[type] });
+  if (origins.user && Object.hasOwn(origins.user, type)) return t('Defined in your own agents: ~/.claude/agents/{file}', { file: origins.user[type] });
+  if (!origins.project && !origins.user) return t('Where it is defined was not read: no agents directory in the project or your own');
+  if (!origins.project) return t('No definition file found (the project agents directory was not read): built in to Claude Code, or defined where Studio does not look');
+  if (!origins.user) return t('No definition file found (your own agents directory was not read): built in to Claude Code, or defined where Studio does not look');
+  return t('No definition file found: built in to Claude Code, or defined where Studio does not look');
 }
 
 export const hoverOf = (n) => [n?.agentType ?? null, n?.description ?? null].filter(Boolean).join('\n');
@@ -96,9 +99,9 @@ export function modelOf(n) {
   const differs = Boolean(n?.model && n?.modelAsked)
     && (modelFamily(n.model) !== modelFamily(n.modelAsked) || (n.modelAsked.includes('-') && n.modelAsked !== n.model));
   const title = [
-    `Ran on: ${n?.model ?? 'not recorded'}`,
-    `Asked for: ${n?.modelAsked ?? 'no model named (the agent\'s default)'}`,
-    differs ? 'The two differ.' : null,
+    t('Ran on: {model}', { model: n?.model ?? t('not recorded') }),
+    t('Asked for: {model}', { model: n?.modelAsked ?? t('no model named (the agent\'s default)') }),
+    differs ? t('The two differ.') : null,
   ].filter(Boolean).join('\n');
   return { ran, asked, differs, title };
 }

package/kit/studio/web/nav.js

@@ -8,19 +8,21 @@
 // status nobody recognises keeps its own word and gets no colour; a branch that could not be read leaves the line
 // without one; a project that cannot be told to update by a command gets a hint instead of a command.
 
+import { t } from './i18n.js';
+
 /* ------------------------------------------------------------- status --- */
 
 // The words the design uses, and the token each is drawn in. `tone` names a status-* token; null is the hollow
 // ring of something that is over.
 const AGENT_STATUS = {
-  running: { word: 'running', tone: 'busy' },
-  starting: { word: 'starting', tone: 'busy' },
-  done: { word: 'done', tone: 'good' },
-  failed: { word: 'failed', tone: 'fail' },
-  killed: { word: 'killed', tone: 'fail' },
-  stopped: { word: 'stopped', tone: 'fail' },
-  stale: { word: 'stale', tone: 'idle' },
-  ended: { word: 'ended', tone: null },
+  running: { word: t('running'), tone: 'busy' },
+  starting: { word: t('starting'), tone: 'busy' },
+  done: { word: t('done'), tone: 'good' },
+  failed: { word: t('failed'), tone: 'fail' },
+  killed: { word: t('killed'), tone: 'fail' },
+  stopped: { word: t('stopped'), tone: 'fail' },
+  stale: { word: t('stale'), tone: 'idle' },
+  ended: { word: t('ended'), tone: null },
 };
 const CHIP_ORDER = ['running', 'starting', 'stale', 'done', 'failed', 'killed', 'stopped', 'ended'];
 
@@ -29,7 +31,7 @@ export function agentStatus(status) {
   const known = AGENT_STATUS[status];
   return known
     ? { word: known.word, tone: known.tone, known: true }
-    : { word: String(status ?? 'unknown'), tone: null, known: false };
+    : { word: String(status ?? t('unknown')), tone: null, known: false };
 }
 
 /**
@@ -55,9 +57,9 @@ export function summaryChips(byStatus) {
 // A session, as the machine reports it. `claude agents` knows three states; a session it does not list is not
 // running anywhere on this machine.
 const SESSION_STATUS = {
-  busy: { word: 'Running', tone: 'busy' },
-  waiting: { word: 'Needs you', tone: 'waiting' },
-  idle: { word: 'Idle', tone: 'idle' },
+  busy: { word: t('Running'), tone: 'busy' },
+  waiting: { word: t('Needs you'), tone: 'waiting' },
+  idle: { word: t('Idle'), tone: 'idle' },
 };
 
 /**
@@ -67,7 +69,7 @@ const SESSION_STATUS = {
 export function sessionStatus(sessionId, fleet) {
   if (!fleet || fleet.measured === false) return { key: 'unmeasured', word: null, tone: null, known: false };
   const row = (fleet.sessions ?? []).find((s) => s.sessionId === sessionId && s.local !== false);
-  if (!row) return { key: 'ended', word: 'Ended', tone: null, known: true };
+  if (!row) return { key: 'ended', word: t('Ended'), tone: null, known: true };
   const known = SESSION_STATUS[row.status];
   if (!known) return { key: String(row.status), word: String(row.status), tone: null, known: false };
   return { key: row.status, word: known.word, tone: known.tone, known: true, waitingFor: row.waitingFor ?? null };
@@ -95,9 +97,9 @@ export function sessionName(sn, labels) {
 export function sessionSub(sn, status) {
   const parts = [];
   if (sn.branch) parts.push(sn.branch);
-  if (status?.key === 'waiting' && status.waitingFor) parts.push(`Needs you · ${status.waitingFor}`);
+  if (status?.key === 'waiting' && status.waitingFor) parts.push(`${t('Needs you')} · ${status.waitingFor}`);
   else if (status?.word) parts.push(status.word);
-  if (sn.agentCount > 0) parts.push(`${sn.agentCount} ${sn.agentCount === 1 ? 'agent' : 'agents'}`);
+  if (sn.agentCount > 0) parts.push(sn.agentCount === 1 ? t('{n} agent', { n: 1 }) : t('{n} agents', { n: sn.agentCount }));
   return parts.join(' · ');
 }
 
@@ -105,20 +107,20 @@ export function sessionSub(sn, status) {
 export function ago(thenMs, nowMs) {
   if (typeof thenMs !== 'number' || !Number.isFinite(thenMs)) return '';
   const s = Math.max(0, Math.round((nowMs - thenMs) / 1000));
-  if (s < 60) return 'now';
-  if (s < 3600) return `${Math.floor(s / 60)}m`;
-  if (s < 86400) return `${Math.floor(s / 3600)}h`;
-  return `${Math.floor(s / 86400)}d`;
+  if (s < 60) return t('now');
+  if (s < 3600) return t('{n}m', { n: Math.floor(s / 60) });
+  if (s < 86400) return t('{n}h', { n: Math.floor(s / 3600) });
+  return t('{n}d', { n: Math.floor(s / 86400) });
 }
 
 /** "seen just now", "seen 3 min ago", "seen 2 h ago" — for a fact recorded earlier, not read now. */
 export function seenAgo(thenMs, nowMs) {
-  if (typeof thenMs !== 'number' || !Number.isFinite(thenMs)) return 'seen at an unrecorded time';
+  if (typeof thenMs !== 'number' || !Number.isFinite(thenMs)) return t('seen at an unrecorded time');
   const s = Math.max(0, Math.round((nowMs - thenMs) / 1000));
-  if (s < 60) return 'seen just now';
-  if (s < 3600) return `seen ${Math.floor(s / 60)} min ago`;
-  if (s < 86400) return `seen ${Math.floor(s / 3600)} h ago`;
-  return `seen ${Math.floor(s / 86400)} d ago`;
+  if (s < 60) return t('seen just now');
+  if (s < 3600) return t('seen {n} min ago', { n: Math.floor(s / 60) });
+  if (s < 86400) return t('seen {n} h ago', { n: Math.floor(s / 3600) });
+  return t('seen {n} d ago', { n: Math.floor(s / 86400) });
 }
 
 /* ------------------------------------------------------------- search --- */
@@ -161,29 +163,28 @@ export function highlight(text, query) {
 export function badgeFor(kit) {
   if (!kit || !kit.installed) {
     return {
-      text: 'no Crewforth',
+      text: t('no Crewforth'),
       tone: 'none',
       copy: null,
-      title: 'No Crewforth files in this project. A plugin install leaves none, so this cannot tell the two '
-        + 'apart; to update one, run /crew-update in the project.',
+      title: t('No Crewforth files in this project. A plugin install leaves none, so this cannot tell the two apart; to update one, run /crew-update in the project.'),
     };
   }
   const command = typeof kit.updateCommand === 'string' && kit.updateCommand ? kit.updateCommand : null;
-  const how = command ? `click to copy: ${command}` : 'run /crew-update in this project';
+  const how = command ? t('click to copy: {command}', { command }) : t('run /crew-update in this project');
   if (kit.compared === false) {
     return {
       text: `${kit.version} ?`,
       tone: 'unknown',
       copy: null,
-      title: `Crewforth ${kit.version} — not compared: ${kit.reason ?? 'no reason given'}`,
+      title: t('Crewforth {version} — not compared: {reason}', { version: kit.version, reason: kit.reason ?? t('no reason given') }),
     };
   }
   if (kit.outdated) {
     return {
-      text: `${kit.version} · update`,
+      text: `${kit.version} · ${t('update')}`,
       tone: 'old',
       copy: command,
-      title: `Crewforth ${kit.version} is behind ${kit.latest} — ${how}`,
+      title: t('Crewforth {version} is behind {latest} — {how}', { version: kit.version, latest: kit.latest, how }),
     };
   }
   if (kit.ahead) {
@@ -191,10 +192,10 @@ export function badgeFor(kit) {
       text: kit.version,
       tone: 'ahead',
       copy: null,
-      title: `Crewforth ${kit.version} is ahead of the published ${kit.latest}`,
+      title: t('Crewforth {version} is ahead of the published {latest}', { version: kit.version, latest: kit.latest }),
     };
   }
-  return { text: kit.version, tone: 'current', copy: null, title: `Crewforth ${kit.version} — current` };
+  return { text: kit.version, tone: 'current', copy: null, title: t('Crewforth {version} — current', { version: kit.version }) };
 }
 
 /* --------------------------------------------------------------- live --- */

package/kit/studio/web/newsession.js

@@ -3,6 +3,7 @@
 // The choices are the server's. The projects are the ones it listed; the modes are the ones it offers, and this
 // file can describe a mode but cannot add one. Starting is guarded by a one-shot: two clicks start one session.
 import { oneShot } from './convo.js';
+import { t, tParts } from './i18n.js';
 
 /**
  * What each permission mode means for a session started HERE.
@@ -13,9 +14,9 @@ import { oneShot } from './convo.js';
  * of repeating a difference that only exists in a terminal.
  */
 export const MODE_TEXT = {
-  plan: { word: 'Plan', says: 'Reads and plans. Cannot change files.' },
-  acceptEdits: { word: 'Accept edits', says: 'Edits files and runs commands, each one after you allow it in the approval dock.' },
-  default: { word: 'Default', says: 'The same in Studio: every call waits for you. It differs from Accept edits only in a terminal.' },
+  plan: { word: t('Plan'), says: t('Reads and plans. Cannot change files.') },
+  acceptEdits: { word: t('Accept edits'), says: t('Edits files and runs commands, each one after you allow it in the approval dock.') },
+  default: { word: t('Default'), says: t('The same in Studio: every call waits for you. It differs from Accept edits only in a terminal.') },
 };
 
 const PREFERRED = 'plan';
@@ -42,7 +43,7 @@ export function projectChoices(projects, preferKey = null) {
     cwd: p.cwd,
     label: p.label ?? p.cwd,
     branch: p.branch ?? null,
-    kit: p.kit?.installed ? (p.kit.version ?? 'installed') : null,
+    kit: p.kit?.installed ? (p.kit.version ?? t('installed')) : null,
     initial: p === initial,
   }));
 }
@@ -82,16 +83,16 @@ export class NewSession {
     const head = mk('div', 'np-head');
     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.close());
-    head.append(mk('h2', 'np-title', 'New session'), mk('span', 'row-fill'), close);
+    head.append(mk('h2', 'np-title', t('New session')), mk('span', 'row-fill'), close);
 
     const form = mk('form', 'np-body');
     form.addEventListener('submit', (e) => { e.preventDefault(); this.submit(); });
 
     const projWrap = mk('div', 'np-field');
-    const projLabel = mk('label', 'np-label', 'Project');
+    const projLabel = mk('label', 'np-label', t('Project'));
     projLabel.htmlFor = 'np-project';
     this.projectEl = mk('select', 'np-select');
     this.projectEl.id = 'np-project';
@@ -102,20 +103,20 @@ export class NewSession {
     this.modesEl = mk('fieldset', 'np-modes');
 
     const firstWrap = mk('div', 'np-field');
-    const firstLabel = mk('label', 'np-label', 'First message');
+    const firstLabel = mk('label', 'np-label', t('First message'));
     firstLabel.htmlFor = 'np-first';
     this.firstEl = mk('textarea', 'np-first');
     this.firstEl.id = 'np-first';
     this.firstEl.rows = 5;
-    this.firstEl.placeholder = 'What should this session do?';
+    this.firstEl.placeholder = t('What should this session do?');
     firstWrap.append(firstLabel, this.firstEl,
-      mk('span', 'sub', 'Optional. You can also start empty and write in the conversation panel.'));
+      mk('span', 'sub', t('Optional. You can also start empty and write in the conversation panel.')));
 
     // What starting here means, said before the button: a closed panel is a refusal.
     const note = mk('div', 'np-note');
     note.innerHTML = '<svg class="ic" viewBox="0 0 16 16" aria-hidden="true"><circle cx="8" cy="8" r="6"/><path d="M8 7.5v3.5M8 5h.01"/></svg>';
     note.append(mk('span', 'sub',
-      'Every tool call in this session waits for your approval here in Studio. If Studio is closed, the request is denied.'));
+      t('Every tool call in this session waits for your approval here in Studio. If Studio is closed, the request is denied.')));
 
     this.errorEl = mk('div', 'np-error');
     this.errorEl.setAttribute('role', 'alert');
@@ -124,10 +125,10 @@ export class NewSession {
     form.append(projWrap, this.modesEl, firstWrap, note, this.errorEl);
 
     const foot = mk('div', 'np-foot');
-    const cancel = mk('button', 'btn', 'Cancel');
+    const cancel = mk('button', 'btn', t('Cancel'));
     cancel.type = 'button';
     cancel.addEventListener('click', () => this.close());
-    this.startEl = mk('button', 'btn primary', 'Start session');
+    this.startEl = mk('button', 'btn primary', t('Start session'));
     this.startEl.type = 'button';
     this.startEl.addEventListener('click', () => this.submit());
     foot.append(cancel, this.startEl);
@@ -164,7 +165,7 @@ export class NewSession {
 
   paint() {
     this.projectEl.replaceChildren(...this.projects.map((p) => {
-      const o = mk('option', null, p.kit ? `${p.label} · Crewforth ${p.kit}` : `${p.label} · no Crewforth`);
+      const o = mk('option', null, p.kit ? `${p.label} · Crewforth ${p.kit}` : `${p.label} · ${t('no Crewforth')}`);
       o.value = p.key;
       o.selected = p.initial;
       return o;
@@ -179,17 +180,17 @@ export class NewSession {
   paintRunsIn() {
     const r = runsIn(this.project, this.shorten);
     if (!r) {
-      this.runsEl.textContent = 'No project on this machine to start a session in.';
+      this.runsEl.textContent = t('No project on this machine to start a session in.');
       return;
     }
-    const parts = ['Runs in ', mk('code', null, r.path)];
-    if (r.branch) parts.push(' on branch ', mk('code', null, r.branch));
-    parts.push('.');
-    this.runsEl.replaceChildren(...parts);
+    const path = mk('code', null, r.path);
+    this.runsEl.replaceChildren(...(r.branch
+      ? tParts('Runs in {path} on branch {branch}.', { path, branch: mk('code', null, r.branch) })
+      : tParts('Runs in {path}.', { path })));
   }
 
   paintModes() {
-    const legend = mk('legend', 'np-label', 'Permission mode');
+    const legend = mk('legend', 'np-label', t('Permission mode'));
     const rows = this.modes.map((m) => {
       const row = mk('label', 'np-mode');
       const radio = mk('input');
@@ -201,19 +202,19 @@ export class NewSession {
       row.classList.toggle('on', m.mode === this.mode);
       const text = mk('span', 'np-mode-text');
       const word = mk('span', 'np-mode-word', m.word);
-      if (m.initial) word.append(mk('span', 'sub', ' · default'));
+      if (m.initial) word.append(mk('span', 'sub', ` · ${t('default')}`));
       text.append(word);
       if (m.says) text.append(mk('span', 'sub', m.says));
       row.append(radio, text);
       return row;
     });
-    this.modesEl.replaceChildren(legend, ...rows, mk('span', 'sub', 'Modes that skip Crewforth\'s gates are not offered.'));
+    this.modesEl.replaceChildren(legend, ...rows, mk('span', 'sub', t('Modes that skip Crewforth\'s gates are not offered.')));
   }
 
   paintStart() {
     const busy = this.start.spent();
     this.startEl.disabled = busy || !this.project || !this.mode;
-    this.startEl.textContent = busy ? 'Starting…' : 'Start session';
+    this.startEl.textContent = busy ? t('Starting…') : t('Start session');
   }
 
   async submit() {
@@ -226,7 +227,7 @@ export class NewSession {
     if (out?.ok) {
       this.close();
     } else {
-      this.errorEl.textContent = `Could not start a session — ${out?.reason ?? 'no reason given'}`;
+      this.errorEl.textContent = t('Could not start a session — {reason}', { reason: out?.reason ?? t('no reason given') });
       this.errorEl.hidden = false;
       this.paintStart();
     }

package/kit/studio/web/style.css

@@ -176,6 +176,8 @@ body {
 .btn.icon:hover { color: var(--ink); }
 .btn.sm { height: 30px; padding: 0 10px; font-size: 12px; }
 .btn.icon.sm { width: 30px; padding: 0; }
+/* The language button names the language it switches to (EN, TR) in letters, where its neighbours draw an icon. */
+.lang-btn { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; }
 /* The one filled control on the page. */
 .btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
 .btn.primary:hover { background: color-mix(in srgb, var(--accent) 88%, var(--ink)); }

package/kit/studio/web/theme.js

@@ -6,6 +6,8 @@
 //
 // The choice is remembered per browser. Storage that refuses (private mode, a blocked origin) costs the memory and
 // not the click: the theme still switches for this page.
+import { t } from './i18n.js';
+
 export const THEME_KEY = 'crewforth-studio-theme';
 
 const chosen = (v) => (v === 'light' || v === 'dark' ? v : null);
@@ -28,8 +30,9 @@ export function initTheme(root, button, ls, systemLight) {
 
   const label = () => {
     const to = effectiveTheme(root.dataset.theme, systemLight()) === 'light' ? 'dark' : 'light';
-    button.setAttribute('aria-label', `Switch to ${to} theme`);
-    button.title = `Switch to ${to} theme`;
+    const say = to === 'light' ? t('Switch to light theme') : t('Switch to dark theme');
+    button.setAttribute('aria-label', say);
+    button.title = say;
   };
   label();
 

package/kit/studio/web/timeline-plan.js

@@ -10,6 +10,7 @@
 // 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';
+import { t } from './i18n.js';
 
 export const RANGES = [
   { key: '5m', ms: 5 * 60_000 },
@@ -67,14 +68,14 @@ export function segments(n, approvals, now) {
 
 /** What the right of a row says about one agent. */
 export function agentSub(n, waiting) {
-  if (waiting?.has(n.id)) return { text: 'needs you', tone: 'wait' };
+  if (waiting?.has(n.id)) return { text: t('needs you'), tone: 'wait' };
   const s = stateOf(n.status);
   if (s === 'failed') return { text: n.status, tone: 'fail' };
-  if (s === 'live') return { text: 'running', tone: null };
-  if (s === 'waking') return { text: 'starting', tone: null };
-  if (s === 'done') return { text: 'done', tone: null };
+  if (s === 'live') return { text: t('running'), tone: null };
+  if (s === 'waking') return { text: t('starting'), tone: null };
+  if (s === 'done') return { text: t('done'), tone: null };
   // A status this panel has no word for keeps its own.
-  return { text: String(n.status ?? 'unknown'), tone: null };
+  return { text: String(n.status ?? t('unknown')), tone: null };
 }
 
 /** "12 done · 2 running" for several agents, in the order a reader looks for them. */
@@ -82,8 +83,8 @@ export function countsSub(members, waiting) {
   const need = members.filter((m) => waiting?.has(m.id)).length;
   const counts = tally(members.filter((m) => !waiting?.has(m.id)));
   const parts = [];
-  if (need) parts.push(`${need} need you`);
-  const word = { running: 'running', starting: 'starting', done: 'done', failed: 'failed', killed: 'killed', stopped: 'stopped', ended: 'ended', stale: 'stale' };
+  if (need) parts.push(t('{n} need you', { n: need }));
+  const word = { running: t('running'), starting: t('starting'), done: t('done'), failed: t('failed'), killed: t('killed'), stopped: t('stopped'), ended: t('ended'), stale: t('stale') };
   for (const k of ['failed', 'killed', 'stopped', 'running', 'starting', 'done', 'ended', 'stale']) {
     if (counts[k]) parts.push(`${counts[k]} ${word[k]}`);
   }
@@ -124,15 +125,15 @@ export function groupsOf(nodes, grouping) {
     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 ${shownType(p)}` };
+      if (!p || p.kind === 'session') return { id: 'direct', label: t('Session · direct') };
+      return { id: `parent:${p.id}`, label: p.kind === 'workflow' ? (p.workflowId ?? p.id) : t('under {type}', { type: shownType(p) }) };
     }
     if (grouping === 'none') return { id: 'all', label: null };
     // `order`: the agents called in one assistant message are a wave, and a wave is a group.
-    if (grouping === 'order') return n.wave != null ? { id: `wave:${n.wave}`, label: `Wave ${n.wave}` } : { id: 'wave:none', label: 'Not called by the session' };
+    if (grouping === 'order') return n.wave != null ? { id: `wave:${n.wave}`, label: t('Wave {n}', { n: n.wave }) } : { id: 'wave:none', label: t('Not called by the session') };
     // `run`: a workflow run is a group; everything the session started itself is another.
     if (n.workflow) return { id: `run:${n.workflow}`, label: String(n.workflow) };
-    return { id: 'direct', label: 'Session · direct' };
+    return { id: 'direct', label: t('Session · direct') };
   };
   const groups = new Map();
   for (const n of agents) {
@@ -178,7 +179,7 @@ export function rows(nodes, opts = {}) {
         id: g.id,
         label: g.label,
         folded: isFolded,
-        sub: `${g.members.length} ${g.members.length === 1 ? 'agent' : 'agents'}${countsSub(g.members, waiting) ? ` · ${countsSub(g.members, waiting)}` : ''}`,
+        sub: `${g.members.length === 1 ? t('{n} agent', { n: 1 }) : t('{n} agents', { n: g.members.length })}${countsSub(g.members, waiting) ? ` · ${countsSub(g.members, waiting)}` : ''}`,
         // Folded, the header carries its members' bars, so a group that is out of sight is not out of time.
         lanes: isFolded ? lanes(g.members.flatMap(bar)) : [],
       });
@@ -290,18 +291,18 @@ export function stepRange(key, by) {
  * @param owned the session's summary when Studio started it, else null
  */
 export function waitNote(owned) {
-  if (!owned) return { measured: false, text: 'Not measured: this session\'s approvals are not seen by Studio.' };
-  if (owned.gated === false) return { measured: false, text: 'Not measured: this session runs without the approval gate.' };
-  return { measured: true, text: `Waiting periods since Studio started this session at ${clock(owned.startedAt)}.` };
+  if (!owned) return { measured: false, text: t('Not measured: this session\'s approvals are not seen by Studio.') };
+  if (owned.gated === false) return { measured: false, text: t('Not measured: this session runs without the approval gate.') };
+  return { measured: true, text: t('Waiting periods since Studio started this session at {time}.', { time: clock(owned.startedAt) }) };
 }
 
 /** "14:01 → 14:09 · 8m 12s · 31 tool calls · 57k tokens", with only the parts that were read. */
 export function factsOf(n, now, fmt) {
   const parts = [];
   const end = n.kind === 'agent' ? endOf(n, now) : n.endedAt;
-  if (n.startedAt != null) parts.push(isLive(n) || end == null ? `${clock(n.startedAt)} → now` : `${clock(n.startedAt)} → ${clock(end)}`);
+  if (n.startedAt != null) parts.push(isLive(n) || end == null ? `${clock(n.startedAt)} → ${t('now')}` : `${clock(n.startedAt)} → ${clock(end)}`);
   if (n.startedAt != null && end != null) parts.push(fmt.duration(end - n.startedAt));
-  if (n.toolCount != null) parts.push(`${n.toolCount} tool ${n.toolCount === 1 ? 'call' : 'calls'}`);
-  if (n.tokens != null) parts.push(`${fmt.tokens(n.tokens)} tokens`);
+  if (n.toolCount != null) parts.push(n.toolCount === 1 ? t('{n} tool call', { n: 1 }) : t('{n} tool calls', { n: n.toolCount }));
+  if (n.tokens != null) parts.push(t('{n} tokens', { n: fmt.tokens(n.tokens) }));
   return parts.join(' · ');
 }