crewforth 3.4.0 → 3.5.0-rc.2

package/kit/studio/web/map.js

@@ -10,9 +10,10 @@
 // nothing; what leaves the page is copied text: a finding as a task, or a file:line.
 import {
   nodesOf, edgesOf, edgeKey, litEdges, findingsOf, findingCounts, cardSub, summaryOf, sourceOf, inspectOf, taskOf,
-  emptyNote, layoutOf, pathOf, chipsOf, inferredOnly, groupsOf, foldView, placed, BANDS, cardOf, tourOf, searchOf, resourceWord,
+  emptyNote, layoutOf, routesOf, chipsOf, inferredOnly, groupsOf, foldView, placed, BANDS, cardOf, tourOf, searchOf, resourceWord,
 } from './map-plan.js';
 import { Viewport, draggable, swallowClick } from './viewport.js';
+import { t } from './i18n.js';
 
 const SVG = 'http://www.w3.org/2000/svg';
 export const LAYOUT_KEY = 'crewforth-studio-map-layout:';
@@ -31,9 +32,9 @@ function svg(tag, attrs = {}) {
 const BAND_ORDER = Object.fromEntries(BANDS.map(([k], i) => [k, i]));
 const BAND_WORD = Object.fromEntries(BANDS);
 
-const LAYERS = [['modules', 'Modules'], ['external', 'External'], ['endpoints', 'Endpoints'], ['findings', 'Findings']];
+const LAYERS = [['modules', t('Modules')], ['external', t('External')], ['endpoints', t('Endpoints')], ['findings', t('Findings')]];
 // How a line between two modules is named on the map.
-const EDGE_WORD = { references: 'uses', calls: 'calls', builds: 'builds' };
+const EDGE_WORD = { references: t('uses'), calls: t('calls'), builds: t('builds') };
 
 export class MapView {
   /**
@@ -76,9 +77,9 @@ export class MapView {
     });
     this.below = mk('div', 'mp-below');
     this.list = mk('section', 'mp-modlist');
-    this.list.setAttribute('aria-label', 'Modules');
+    this.list.setAttribute('aria-label', t('Modules'));
     this.side = mk('aside', 'mp-inspect');
-    this.side.setAttribute('aria-label', 'Selected node');
+    this.side.setAttribute('aria-label', t('Selected node'));
     const main = mk('div', 'mp-main');
     main.append(this.pane, this.below, this.list);
     this.body = mk('div', 'mp-body');
@@ -162,7 +163,7 @@ export class MapView {
     const note = emptyNote(this.data);
     if (note) {
       this.empty.replaceChildren(mk('p', null, note));
-      if (this.data?.missing) this.empty.append(mk('p', 'sub', 'Studio only reads the map: nothing is scanned from the panel.'));
+      if (this.data?.missing) this.empty.append(mk('p', 'sub', t('Studio only reads the map: nothing is scanned from the panel.')));
       this.root.replaceChildren(this.empty);
       return;
     }
@@ -222,17 +223,18 @@ export class MapView {
       const frame = mk('div', 'mp-group');
       frame.dataset.group = g.id;
       frame.style.left = `${x}px`; frame.style.top = `${y}px`; frame.style.width = `${w}px`; frame.style.height = `${h}px`;
-      const fold = mk('button', 'mp-group-fold', `${g.folder}/ · fold`);
+      const fold = mk('button', 'mp-group-fold', `${g.folder}/ · ${t('fold')}`);
       fold.type = 'button';
-      fold.title = `Fold the ${g.members.length} modules under ${g.folder}/ into one card`;
+      fold.title = t('Fold the {n} modules under {folder}/ into one card', { n: g.members.length, folder: g.folder });
       fold.addEventListener('click', () => this.toggleGroup(g.id));
       frame.append(fold);
       parts.push(frame);
     }
     const lines = svg('svg', { class: 'mp-lines', width: lay.width, height: lay.height, 'aria-hidden': 'true' });
     const labels = [];
-    for (const e of edges) {
-      const p = pathOf(lay.pos[e.from], lay.pos[e.to]);
+    const routes = routesOf(edges, lay.pos);
+    for (const [ei, e] of edges.entries()) {
+      const p = routes[ei];
       if (!p) continue;
       const path = svg('path', { d: p.d, class: 'mp-line' });
       path.dataset.solid = String(e.solid);
@@ -243,7 +245,7 @@ export class MapView {
       if (EDGE_WORD[e.kind] && !e.calls) tags.push(mk('span', 'mp-badge', EDGE_WORD[e.kind]));
       if (e.line === 'model') { const m = mk('span', 'mp-pill', 'model'); m.dataset.tone = 'model'; m.title = 'Proposed by the model, not shown by a file'; tags.push(m); }
       if (e.calls) {
-        tags.push(mk('span', 'mp-pill', `${e.calls} ${e.calls === 1 ? 'call' : 'calls'}`));
+        tags.push(mk('span', 'mp-pill', e.calls === 1 ? t('{n} call', { n: 1 }) : t('{n} calls', { n: e.calls })));
         if (e.missing) { const m = mk('span', 'mp-pill', `${e.missing} missing`); m.dataset.tone = 'missing'; tags.push(m); }
       }
       if (tags.length) {
@@ -271,14 +273,14 @@ export class MapView {
 
   #head(doc, findings) {
     const head = mk('header', 'mp-head');
-    head.append(mk('h2', 'mp-title', 'Map'), mk('span', 'row-fill'));
+    head.append(mk('h2', 'mp-title', t('Map')), mk('span', 'row-fill'));
     for (const s of summaryOf(doc, findings)) head.append(mk('span', 'mp-pill', s));
     return head;
   }
 
   #toolbar(d) {
     const bar = mk('div', 'mp-toolbar');
-    bar.append(mk('span', 'lbl', 'Layers'));
+    bar.append(mk('span', 'lbl', t('Layers')));
     for (const [k, label] of LAYERS) {
       const b = mk('button', 'mp-tog', label);
       b.type = 'button';
@@ -289,8 +291,8 @@ export class MapView {
     bar.append(mk('span', 'row-fill'));
     const search = mk('input', 'mp-search');
     search.type = 'search';
-    search.placeholder = 'Search files and modules';
-    search.setAttribute('aria-label', 'Search files and modules');
+    search.placeholder = t('Search files and modules');
+    search.setAttribute('aria-label', t('Search files and modules'));
     search.value = this.query;
     search.addEventListener('input', () => { this.query = search.value; this.render(); this.top.querySelector('.mp-search')?.focus(); });
     search.addEventListener('keydown', (e) => {
@@ -300,16 +302,16 @@ export class MapView {
     });
     bar.append(search);
     if (tourOf(d.doc).length) {
-      const t = mk('button', 'mp-tog', 'Tour');
-      t.type = 'button';
-      t.setAttribute('aria-pressed', String(this.tourAt >= 0));
-      t.title = 'The stops /crew-map wrote for someone new to the project, in order';
-      t.addEventListener('click', () => this.tour(this.tourAt >= 0 ? -1 : 0));
-      bar.append(t);
+      const tb = mk('button', 'mp-tog', t('Tour'));
+      tb.type = 'button';
+      tb.setAttribute('aria-pressed', String(this.tourAt >= 0));
+      tb.title = t('The stops /crew-map wrote for someone new to the project, in order');
+      tb.addEventListener('click', () => this.tour(this.tourAt >= 0 ? -1 : 0));
+      bar.append(tb);
     }
     const pick = mk('select', 'mp-compare');
-    pick.setAttribute('aria-label', 'Compare with');
-    const none = mk('option', null, d.others?.length ? 'Compare with…' : 'Compare with: no other project has a map');
+    pick.setAttribute('aria-label', t('Compare with'));
+    const none = mk('option', null, d.others?.length ? t('Compare with…') : t('Compare with: no other project has a map'));
     none.value = '';
     pick.append(none);
     for (const o of d.others ?? []) { const opt = mk('option', null, o.label); opt.value = o.cwd; pick.append(opt); }
@@ -317,20 +319,20 @@ export class MapView {
     pick.disabled = !d.others?.length;
     pick.addEventListener('change', () => this.hooks.onCompare?.(pick.value || null));
     const legend = mk('div', 'mp-legend');
-    const lb = mk('button', 'btn sm ghost', 'Legend');
+    const lb = mk('button', 'btn sm ghost', t('Legend'));
     lb.type = 'button';
     lb.setAttribute('aria-expanded', String(this.legendOpen));
     lb.addEventListener('click', () => { this.legendOpen = !this.legendOpen; this.render(); });
     legend.append(lb);
     if (this.legendOpen) {
       const lg = mk('div', 'mp-legend-box');
-      for (const [kind, text] of [['evidence', 'A file proves this line'], ['inferred', 'Inferred, not proven'], ['model', 'Proposed by the model'], ['lit', 'A line of the selected node']]) {
+      for (const [kind, text] of [['evidence', t('A file proves this line')], ['inferred', t('Inferred, not proven')], ['model', t('Proposed by the model')], ['lit', t('A line of the selected node')]]) {
         const row = mk('div', 'mp-legend-row');
         const s = mk('span', 'mp-legend-line'); s.dataset.kind = kind;
         row.append(s, mk('span', 'sub', text));
         lg.append(row);
       }
-      for (const [kind, text] of [['solid', 'A resource a file shows'], ['dashed', 'A resource only inferred']]) {
+      for (const [kind, text] of [['solid', t('A resource a file shows')], ['dashed', t('A resource only inferred')]]) {
         const row = mk('div', 'mp-legend-row');
         const s = mk('span', 'mp-legend-card'); s.dataset.kind = kind;
         row.append(s, mk('span', 'sub', text));
@@ -348,7 +350,7 @@ export class MapView {
     strip.append(mk('code', 'mp-file', s.file), mk('span', 'sub', `· ${s.at}`));
     if (s.behind) { const b = mk('span', 'mp-pill', s.behind); b.dataset.tone = 'behind'; strip.append(b); }
     if (s.behindNote) strip.append(mk('span', 'sub', s.behindNote));
-    if (d.compare?.reason) strip.append(mk('span', 'sub', `Compare: ${d.compare.reason}`));
+    if (d.compare?.reason) strip.append(mk('span', 'sub', t('Compare: {reason}', { reason: d.compare.reason })));
     strip.append(mk('span', 'row-fill'), mk('span', 'sub', s.rule));
     return strip;
   }
@@ -371,7 +373,7 @@ export class MapView {
       const name = mk('span', 'mp-name', n.name ?? n.id);
       name.title = n.name ?? n.id;
       top.append(name);
-      if (count) { const f = mk('span', 'mp-fb', String(count)); f.title = `${count} ${count === 1 ? 'finding' : 'findings'}`; top.append(f); }
+      if (count) { const f = mk('span', 'mp-fb', String(count)); f.title = count === 1 ? t('1 finding') : t('{n} findings', { n: count }); top.append(f); }
       top.append(mk('span', 'row-fill'));
       if (n.kind === 'group') { card.append(top, mk('span', 'sub', `${n.members.length} modules · click to open`)); }
       else if (n.kind !== 'module') { card.append(top, mk('span', 'sub', cardSub(n, doc))); }
@@ -386,7 +388,7 @@ export class MapView {
           card.append(row);
         }
         if (this.layers.external) {
-          const fold = mk('span', `mp-fold${c.outside.length ? '' : ' none'}`, c.outside.length ? `▸ ${c.outside.join(' · ')}` : 'no outside calls');
+          const fold = mk('span', `mp-fold${c.outside.length ? '' : ' none'}`, c.outside.length ? `▸ ${c.outside.join(' · ')}` : t('no outside calls'));
           if (c.outside.length) fold.title = c.outside.join('\n');
           card.append(fold);
         }
@@ -407,26 +409,26 @@ export class MapView {
 
   #findings(f) {
     const box = mk('section', 'mp-findings');
-    box.setAttribute('aria-label', 'Findings');
+    box.setAttribute('aria-label', t('Findings'));
     const h = mk('div', 'mp-row');
-    h.append(mk('span', 'lbl', `Findings · ${f.shown.length}`), mk('span', 'sub', `${f.proven} proven by a file · ${f.shown.length - f.proven} inferred`), mk('span', 'row-fill'));
+    h.append(mk('span', 'lbl', `${t('Findings')} · ${f.shown.length}`), mk('span', 'sub', t('{n} proven by a file · {m} inferred', { n: f.proven, m: f.shown.length - f.proven })), mk('span', 'row-fill'));
     if (f.hidden) {
-      const t = mk('button', 'btn sm ghost', this.showHidden ? `Hide ${f.hidden} hidden by default` : `Show ${f.hidden} hidden by default`);
-      t.type = 'button';
-      t.title = 'Rules wrong too often to show unasked. Their findings are kept, not deleted.';
-      t.addEventListener('click', () => { this.showHidden = !this.showHidden; this.render(); });
-      h.append(t);
+      const tb = mk('button', 'btn sm ghost', this.showHidden ? t('Hide {n} hidden by default', { n: f.hidden }) : t('Show {n} hidden by default', { n: f.hidden }));
+      tb.type = 'button';
+      tb.title = t('Rules wrong too often to show unasked. Their findings are kept, not deleted.');
+      tb.addEventListener('click', () => { this.showHidden = !this.showHidden; this.render(); });
+      h.append(tb);
     }
-    h.append(mk('span', 'sub mp-hint', 'Click a row to show it on the map'));
+    h.append(mk('span', 'sub mp-hint', t('Click a row to show it on the map')));
     box.append(h);
-    if (!f.shown.length) box.append(mk('p', 'sub', f.total ? 'Every finding of this map is hidden by default.' : 'No finding in this map.'));
+    if (!f.shown.length) box.append(mk('p', 'sub', f.total ? t('Every finding of this map is hidden by default.') : t('No finding in this map.')));
     const list = mk('div', 'mp-flist');
     for (const x of f.shown) {
       const row = mk('button', 'mp-frow');
       row.type = 'button';
       const dot = mk('span', 'mp-dot'); dot.dataset.proven = String(x.proven);
-      row.append(dot, mk('span', 'mp-ftitle', x.title), mk('span', 'mp-fwhere', x.where), mk('span', 'row-fill'), mk('span', 'mp-badge', x.proven ? 'proven' : 'inferred'));
-      if (x.hidden) row.title = x.hiddenReason ?? 'Hidden by default';
+      row.append(dot, mk('span', 'mp-ftitle', x.title), mk('span', 'mp-fwhere', x.where), mk('span', 'row-fill'), mk('span', 'mp-badge', x.proven ? t('proven') : t('inferred')));
+      if (x.hidden) row.title = x.hiddenReason ?? t('Hidden by default');
       row.addEventListener('click', () => { if (x.modules[0]) this.select(x.modules[0], { reveal: true }); });
       list.append(row);
     }
@@ -446,7 +448,7 @@ export class MapView {
       r.addEventListener('click', () => this.select(n.id));
       return r;
     });
-    this.list.replaceChildren(mk('span', 'lbl', `Modules · ${rows.length}`), ...items);
+    this.list.replaceChildren(mk('span', 'lbl', `${t('Modules')} · ${rows.length}`), ...items);
   }
 
   #inspector(node, doc, edges, findings) {
@@ -455,71 +457,82 @@ export class MapView {
       // The project's overview, when /crew-map wrote one: what it says, and the lines it rests on.
       const ov = doc?.overview;
       if (typeof ov?.text === 'string' && ov.text.trim()) {
-        parts.push(mk('span', 'lbl', 'Overview'), mk('p', 'mp-overview', ov.text));
+        parts.push(mk('span', 'lbl', t('Overview')), mk('p', 'mp-overview', ov.text));
         if (Array.isArray(ov.cites) && ov.cites.length) parts.push(mk('p', 'sub mp-cites', `From ${ov.cites.filter((c) => typeof c === 'string').join(', ')}`));
       }
-      parts.push(mk('p', 'sub', 'Select a module to see what it connects to and what was found in it. Esc lets it go.'));
+      parts.push(mk('p', 'sub', t('Select a module to see what it connects to and what was found in it. Esc lets it go.')));
     } else {
       const v = inspectOf(node, doc, edges, findings);
       const top = mk('div', 'mp-row');
       const close = mk('button', 'btn icon sm ghost', '×');
-      close.type = 'button'; close.setAttribute('aria-label', 'Close inspector');
+      close.type = 'button'; close.setAttribute('aria-label', t('Close inspector'));
       close.addEventListener('click', () => this.select(null));
       top.append(mk('span', 'mp-name', v.title), mk('span', 'row-fill'), close);
       parts.push(top);
       if (v.layer || v.domain) {
         const pills = mk('div', 'mp-row');
-        if (v.layer) pills.append(mk('span', 'mp-pill', `Layer · ${v.layer}`));
-        if (v.domain) pills.append(mk('span', 'mp-pill', `Domain · ${v.domain}`));
+        if (v.layer) pills.append(mk('span', 'mp-pill', `${t('Layer')} · ${v.layer}`));
+        if (v.domain) pills.append(mk('span', 'mp-pill', `${t('Domain')} · ${v.domain}`));
         parts.push(pills);
       }
       if (v.path) parts.push(mk('code', 'sub', v.path));
       if (v.chips.length) { const c = mk('div', 'mp-chips'); for (const t of v.chips) c.append(mk('span', 'mp-chip', t)); parts.push(c); }
       const tabs = mk('nav', 'mp-tabs');
-      for (const [k, label] of [['overview', 'Overview'], ['connections', `Connections ${v.connections.out.length + v.connections.in.length}`], ['findings', `Findings ${v.findings.length}`]]) {
-        const t = mk('button', 'mp-tab', label);
-        t.type = 'button';
-        t.setAttribute('aria-selected', String(this.tab === k));
-        t.addEventListener('click', () => { this.tab = k; this.render(); });
-        tabs.append(t);
+      for (const [k, label] of [['overview', t('Overview')], ['connections', `${t('Connections')} ${v.connections.out.length + v.connections.in.length}`], ['findings', `${t('Findings')} ${v.findings.length}`]]) {
+        const tb = mk('button', 'mp-tab', label);
+        tb.type = 'button';
+        tb.setAttribute('aria-selected', String(this.tab === k));
+        tb.addEventListener('click', () => { this.tab = k; this.render(); });
+        tabs.append(tb);
       }
       parts.push(tabs);
       const sec = mk('div', 'mp-isec');
       if (this.tab === 'overview') {
-        sec.append(mk('span', 'lbl', 'What it is for'), mk('p', v.narrative ? null : 'sub', v.narrative ?? v.narrativeNote));
-        if (v.narrative && v.narrativeCites.length) sec.append(mk('p', 'sub mp-cites', `From ${v.narrativeCites.join(', ')}`));
+        sec.append(mk('span', 'lbl', t('What it is for')), mk('p', v.narrative ? null : 'sub', v.narrative ?? v.narrativeNote));
+        if (v.narrative && v.narrativeCites.length) sec.append(mk('p', 'sub mp-cites', t('From {files}', { files: v.narrativeCites.join(', ') })));
         if (v.inside && (v.inside.entry || v.inside.folders.length)) {
-          sec.append(mk('span', 'lbl', 'Inside'));
+          sec.append(mk('span', 'lbl', t('Inside')));
           if (v.inside.entry) { const r = mk('div', 'mp-conn mp-inside'); r.append(this.#cite(v.inside.entry), mk('span', 'mp-ev', 'entry point')); sec.append(r); }
           for (const f of v.inside.folders) { const r = mk('div', 'mp-conn mp-inside'); r.append(mk('span', 'mp-file', `${f.folder === '.' ? '(root)' : `${f.folder}/`}`), mk('span', 'mp-ev', `${f.files} ${f.files === 1 ? 'file' : 'files'}`)); sec.append(r); }
-          if (v.inside.other) sec.append(mk('p', 'sub', `${v.inside.other} more files in other folders`));
-          if (v.inside.tests) sec.append(mk('p', 'sub', `${v.inside.tests} test ${v.inside.tests === 1 ? 'file' : 'files'}`));
+          if (v.inside.other) sec.append(mk('p', 'sub', t('{n} more files in other folders', { n: v.inside.other })));
+          if (v.inside.tests) sec.append(mk('p', 'sub', v.inside.tests === 1 ? t('1 test file') : t('{n} test files', { n: v.inside.tests })));
         }
-        sec.append(mk('span', 'lbl', 'Connects to'));
-        if (!v.connectsTo.length) sec.append(mk('p', 'sub', 'Nothing on this map.'));
+        if (v.changed) sec.append(mk('p', 'sub', v.changed));
+        if (v.testFiles.length) {
+          sec.append(mk('span', 'lbl', `${t('Tests')} · ${v.testTotal}`));
+          for (const f of v.testFiles) { const r = mk('div', 'mp-conn mp-inside'); r.append(mk('span', 'mp-file', f)); sec.append(r); }
+          if (v.testTotal > v.testFiles.length) sec.append(mk('p', 'sub', t('{n} more in the map file', { n: v.testTotal - v.testFiles.length })));
+        }
+        if (v.notes.length) {
+          sec.append(mk('span', 'lbl', `${t('Notes in the code')} · ${v.notesTotal}`));
+          for (const x of v.notes) { const r = mk('div', 'mp-conn mp-inside'); r.append(this.#cite(x.at), mk('span', 'mp-ev', x.text)); sec.append(r); }
+          if (v.notesTotal > v.notes.length) sec.append(mk('p', 'sub', t('{n} more in the map file', { n: v.notesTotal - v.notes.length })));
+        }
+        sec.append(mk('span', 'lbl', t('Connects to')));
+        if (!v.connectsTo.length) sec.append(mk('p', 'sub', t('Nothing on this map.')));
         for (const c of v.connectsTo) sec.append(this.#conn(c));
         if (v.evidence.length) {
-          sec.append(mk('span', 'lbl', `Evidence · ${v.evidenceTotal}`));
+          sec.append(mk('span', 'lbl', `${t('Evidence')} · ${v.evidenceTotal}`));
           for (const e of v.evidence) sec.append(this.#cite(e));
-          if (v.evidenceTotal > v.evidence.length) sec.append(mk('p', 'sub', `${v.evidenceTotal - v.evidence.length} more in the map file`));
+          if (v.evidenceTotal > v.evidence.length) sec.append(mk('p', 'sub', t('{n} more in the map file', { n: v.evidenceTotal - v.evidence.length })));
         }
       } else if (this.tab === 'connections') {
-        if (!v.byKind.length) sec.append(mk('p', 'sub', 'Nothing on this map.'));
+        if (!v.byKind.length) sec.append(mk('p', 'sub', t('Nothing on this map.')));
         for (const [kind, { out, in: into }] of v.byKind) {
           sec.append(mk('span', 'lbl', `${kind} · ${out.length + into.length}`));
           for (const c of out) sec.append(this.#conn(c, 'out'));
           for (const c of into) sec.append(this.#conn(c, 'in'));
         }
       } else {
-        if (!v.findings.length) sec.append(mk('p', 'sub', 'No finding shown for this node.'));
+        if (!v.findings.length) sec.append(mk('p', 'sub', t('No finding shown for this node.')));
         for (const f of v.findings) {
           const card = mk('div', 'mp-fcard');
           card.dataset.proven = String(f.proven);
           const r = mk('div', 'mp-row');
-          r.append(mk('span', 'mp-ftitle', f.title), mk('span', 'row-fill'), mk('span', 'mp-badge', f.proven ? 'proven' : 'inferred'));
-          const b = mk('button', 'btn sm', 'Copy as task');
+          r.append(mk('span', 'mp-ftitle', f.title), mk('span', 'row-fill'), mk('span', 'mp-badge', f.proven ? t('proven') : t('inferred')));
+          const b = mk('button', 'btn sm', t('Copy as task'));
           b.type = 'button';
-          b.title = 'Copies the finding as a task to paste into a session. Nothing is run.';
+          b.title = t('Copies the finding as a task to paste into a session. Nothing is run.');
           b.addEventListener('click', () => this.hooks.onCopy?.(taskOf(f), 'task'));
           card.append(r);
           if (f.where) card.append(this.#cite(f.where));
@@ -530,8 +543,8 @@ export class MapView {
       parts.push(sec);
     }
     const nm = mk('div', 'mp-notmeasured');
-    nm.append(mk('span', 'lbl', 'Not measured'));
-    if (!doc.notMeasured.length) nm.append(mk('p', 'sub', 'Nothing: every file of the project was read.'));
+    nm.append(mk('span', 'lbl', t('Not measured')));
+    if (!doc.notMeasured.length) nm.append(mk('p', 'sub', t('Nothing: every file of the project was read.')));
     for (const x of doc.notMeasured) nm.append(mk('p', 'sub', `${x.what} — ${x.reason}`));
     parts.push(nm);
     this.side.replaceChildren(...parts);
@@ -543,11 +556,11 @@ export class MapView {
     if (this.tourAt < 0 || !stops.length) { this.tourBox.hidden = true; return; }
     const s = stops[Math.min(this.tourAt, stops.length - 1)];
     const head = mk('div', 'mp-row');
-    head.append(mk('span', 'lbl', `Tour · ${this.tourAt + 1} of ${stops.length}`), mk('span', 'mp-name', s.name), mk('span', 'row-fill'));
+    head.append(mk('span', 'lbl', `${t('Tour')} · ${t('{at} of {n}', { at: this.tourAt + 1, n: stops.length })}`), mk('span', 'mp-name', s.name), mk('span', 'row-fill'));
     const nav = (label, at, off) => { const b = mk('button', 'btn sm ghost', label); b.type = 'button'; b.disabled = off; b.addEventListener('click', () => this.tour(at)); return b; };
-    head.append(nav('Back', this.tourAt - 1, this.tourAt === 0), nav(this.tourAt === stops.length - 1 ? 'Done' : 'Next', this.tourAt === stops.length - 1 ? -1 : this.tourAt + 1, false));
+    head.append(nav(t('Back'), this.tourAt - 1, this.tourAt === 0), nav(this.tourAt === stops.length - 1 ? t('Done') : t('Next'), this.tourAt === stops.length - 1 ? -1 : this.tourAt + 1, false));
     const body = [head, mk('p', null, s.text)];
-    if (s.cites.length) body.push(mk('p', 'sub mp-cites', `From ${s.cites.join(', ')}`));
+    if (s.cites.length) body.push(mk('p', 'sub mp-cites', t('From {files}', { files: s.cites.join(', ') })));
     this.tourBox.replaceChildren(...body);
     this.tourBox.hidden = false;
   }
@@ -556,7 +569,7 @@ export class MapView {
   #cite(text) {
     const b = mk('button', 'mp-ev mp-cite', text);
     b.type = 'button';
-    b.title = 'Copy the path';
+    b.title = t('Copy the path');
     b.addEventListener('click', () => this.hooks.onCopy?.(text, 'path'));
     return b;
   }

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

@@ -5,11 +5,11 @@
 // apart from the ones that passed or failed.
 import { roleName, modelName } from './names.js';
 import { fmtCost, fmtCount } from './usage.js';
+import { t } from './i18n.js';
 
 const TIER = { haiku: 'Haiku', sonnet: 'Sonnet', opus: 'Opus', fable: 'Fable' };
-export const tierWord = (t) => TIER[t] ?? (t ? String(t) : 'no model');
+export const tierWord = (k) => TIER[k] ?? (k ? String(k) : t('no model'));
 const pct = (r) => `${Math.round(r * 100)}%`;
-const plural = (n, word, many = `${word}s`) => `${n} ${n === 1 ? word : many}`;
 
 /**
  * The task card a crew agent's work starts with: three lines at the top of its task text.
@@ -27,7 +27,7 @@ export function cardOf(prompt) {
 }
 
 const VERIFY_TONE = { pass: 'pass', fail: 'fail' };
-const VERIFY_SAYS = { none: 'no verify command', blocked: 'verify not run: the command was not allowed', timeout: 'verify not finished: the command ran out of time' };
+const VERIFY_SAYS = { none: t('no verify command'), blocked: t('verify not run: the command was not allowed'), timeout: t('verify not finished: the command ran out of time') };
 
 /** The card as the inspector lists it: the three lines, each kept as it was written. */
 export function cardLines(card, row) {
@@ -40,11 +40,11 @@ export function cardLines(card, row) {
 
 function stepOf(r, again) {
   const on = r.ranOn ? modelName(r.ranOn) : tierWord(r.model);
-  const bits = [again ? `Re-run on ${on}` : `Ran on ${on}`];
-  if (r.fixes > 0) bits.push(`fixed ${r.fixes === 1 ? 'once' : `${r.fixes} times`} inside the agent`);
+  const bits = [again ? t('Re-run on {model}', { model: on }) : t('Ran on {model}', { model: on })];
+  if (r.fixes > 0) bits.push(r.fixes === 1 ? t('fixed once inside the agent') : t('fixed {n} times inside the agent', { n: r.fixes }));
   // A verdict is a tag (pass, fail); anything else is said in words, because it is no verdict.
   const tone = VERIFY_TONE[r.verify] ?? null;
-  if (!tone) bits.push(VERIFY_SAYS[r.verify] ?? `verify ${r.verify}`);
+  if (!tone) bits.push(VERIFY_SAYS[r.verify] ?? t('verify {verdict}', { verdict: r.verify }));
   return { text: bits.join(' \u00b7 '), verify: tone ? r.verify : null, tone, escalated: again };
 }
 
@@ -55,13 +55,13 @@ function stepOf(r, again) {
  * @returns { risk, riskWhy, steps: [{ text, verify, tone, escalated }], note }
  */
 export function workSteps(row) {
-  if (!row) return { risk: null, riskWhy: null, steps: [], note: 'Not recorded yet: the line is written when the agent stops.' };
+  if (!row) return { risk: null, riskWhy: null, steps: [], note: t('Not recorded yet: the line is written when the agent stops.') };
   const steps = [...(row.before ?? []).map((r) => stepOf(r, false)), stepOf(row, Boolean(row.escalatedFrom))];
   if (row.escalatedFrom && !(row.before ?? []).length) {
-    steps.unshift({ text: `An earlier call on ${tierWord(row.escalatedFrom)} did not pass; its line is not in the record`, verify: null, tone: null, escalated: false });
+    steps.unshift({ text: t('An earlier call on {model} did not pass; its line is not in the record', { model: tierWord(row.escalatedFrom) }), verify: null, tone: null, escalated: false });
   }
   // The reason is the gate's own sentence, kept as it wrote it; a line written before the gate kept one has none.
-  return { risk: row.risk ?? null, riskWhy: row.risk === 'critical' ? row.riskWhy ?? null : null, steps, note: row.escalatedFrom ? 'A re-run with the same or a lower model is refused by the gate.' : null };
+  return { risk: row.risk ?? null, riskWhy: row.risk === 'critical' ? row.riskWhy ?? null : null, steps, note: row.escalatedFrom ? t('A re-run with the same or a lower model is refused by the gate.') : null };
 }
 
 /**
@@ -70,7 +70,7 @@ export function workSteps(row) {
  */
 export function outsideRouting(agentType) {
   if (typeof agentType !== 'string' || !agentType || agentType.startsWith('crew-')) return null;
-  return 'Outside model routing: not a crew agent, so it has no floor and Crewforth keeps no outcome line for it. The gate only holds the expensive end: a call that asks for opus or fable, or names no model and would take the session\u2019s, is held at sonnet unless its task carries an above: <why> line or opens with a card naming critical work. An agent whose own definition names a model keeps it.';
+  return t('Outside model routing: not a crew agent, so it has no floor and Crewforth keeps no outcome line for it. The gate only holds the expensive end: a call that asks for opus or fable, or names no model and would take the session\u2019s, is held at sonnet unless its task carries an above: <why> line or opens with a card naming critical work. An agent whose own definition names a model keeps it.');
 }
 
 /**
@@ -80,12 +80,12 @@ export function outsideRouting(agentType) {
  */
 export function floorWords(floor) {
   if (!floor) return { floorTag: null, raised: null, raisedWhy: '' };
-  const why = `Raised to ${tierWord(floor.model)} automatically: ${floor.notFirstTry} of ${floor.calls ?? '?'} calls one model down did not pass first time`;
+  const why = t('Raised to {model} automatically: {n} of {calls} calls one model down did not pass first time', { model: tierWord(floor.model), n: floor.notFirstTry, calls: floor.calls ?? '?' });
   if (!floor.lowered) return { floorTag: 'raised', raised: tierWord(floor.model), raisedWhy: why };
   return {
     floorTag: 'lowered',
     raised: null,
-    raisedWhy: `${why}. You lowered it to ${tierWord(floor.lowered.to)} on ${String(floor.lowered.ts).slice(0, 10)}; its outcomes are counted afresh from then.`,
+    raisedWhy: `${why}. ${t('You lowered it to {model} on {date}; its outcomes are counted afresh from then.', { model: tierWord(floor.lowered.to), date: String(floor.lowered.ts).slice(0, 10) })}`,
   };
 }
 
@@ -95,15 +95,15 @@ export function floorWords(floor) {
  * ("\u2265$0.75 \u00b7 2/7"), because a sum of two calls must not be read as the cost of seven. None: a dash.
  */
 export function costCell(cost, runs) {
-  if (!cost) return { cost: '\u2026', costNote: 'Reading what this class cost\u2026', partial: false, advisor: null };
-  if (!cost.costed) return { cost: '\u2014', costNote: 'No agent of this class has a transcript on this machine that could be priced', partial: false, advisor: null };
+  if (!cost) return { cost: '\u2026', costNote: t('Reading what this class cost\u2026'), partial: false, advisor: null };
+  if (!cost.costed) return { cost: '\u2014', costNote: t('No agent of this class has a transcript on this machine that could be priced'), partial: false, advisor: null };
   const usd = fmtCost(cost.cost);
   const advisor = advisorWords(cost);
   const tail = advisor ? `\n${advisor}` : '';
-  if (cost.costed >= runs) return { cost: usd, costNote: `All ${runs} ${runs === 1 ? 'task' : 'tasks'} priced, at API list price. An estimate: what a subscription is charged is not known here.${tail}`, partial: false, advisor };
+  if (cost.costed >= runs) return { cost: usd, costNote: `${runs === 1 ? t('The 1 task priced, at API list price. An estimate: what a subscription is charged is not known here.') : t('All {n} tasks priced, at API list price. An estimate: what a subscription is charged is not known here.', { n: runs })}${tail}`, partial: false, advisor };
   return {
     cost: `\u2265${usd.replace(/^~/, '')} \u00b7 ${cost.costed}/${runs}`,
-    costNote: `At least this much: ${cost.costed} of ${runs} tasks could be priced; the others have no transcript on this machine. At API list price.${tail}`,
+    costNote: `${t('At least this much: {n} of {runs} tasks could be priced; the others have no transcript on this machine. At API list price.', { n: cost.costed, runs })}${tail}`,
     partial: true,
     advisor,
   };
@@ -116,17 +116,18 @@ export function costCell(cost, runs) {
 export function advisorWords(cost) {
   const n = cost?.advisorCalls ?? 0;
   if (!(n > 0)) return null;
-  const share = typeof cost.advisorCost === 'number' && cost.advisorCost > 0 ? `${fmtCost(cost.advisorCost)} of it` : 'its cost not priced';
-  return `Advisor: ${n} ${n === 1 ? 'call' : 'calls'}, ${share}. A second model the agents consulted, at that model's rates; included above.`;
+  const share = typeof cost.advisorCost === 'number' && cost.advisorCost > 0 ? t('{cost} of it', { cost: fmtCost(cost.advisorCost) }) : t('its cost not priced');
+  return n === 1 ? t('Advisor: 1 call, {share}. A second model the agents consulted, at that model\'s rates; included above.', { share })
+    : t('Advisor: {n} calls, {share}. A second model the agents consulted, at that model\'s rates; included above.', { n, share });
 }
 
 /** One class as the view's row: who and what kind of change, how risky, what ran it, and how it went. */
 export function classRow(c, cost = null) {
-  const models = Object.entries(c.models ?? {}).sort((a, b) => b[1].runs - a[1].runs).map(([t, m]) => `${tierWord(t)} ${m.runs}`).join(' \u00b7 ');
+  const models = Object.entries(c.models ?? {}).sort((a, b) => b[1].runs - a[1].runs).map(([k, m]) => `${tierWord(k)} ${m.runs}`).join(' \u00b7 ');
   const apart = [
-    c.notVerified?.none ? `${c.notVerified.none} with no verify command` : null,
-    c.notVerified?.blocked ? `${c.notVerified.blocked} not run` : null,
-    c.notVerified?.timeout ? `${c.notVerified.timeout} timed out` : null,
+    c.notVerified?.none ? t('{n} with no verify command', { n: c.notVerified.none }) : null,
+    c.notVerified?.blocked ? t('{n} not run', { n: c.notVerified.blocked }) : null,
+    c.notVerified?.timeout ? t('{n} timed out', { n: c.notVerified.timeout }) : null,
   ].filter(Boolean);
   return {
     key: c.key,
@@ -141,10 +142,10 @@ export function classRow(c, cost = null) {
     tasks: String(c.runs),
     // The rate and what it is a rate of: "83%" of five calls is not "83%" of five hundred.
     firstTry: c.firstTryRate === null ? '\u2014' : pct(c.firstTryRate),
-    firstTryOf: c.firstTryRate === null ? 'No call of this class got a verdict from its verify command' : `${c.firstTry} of ${c.verified} verified calls passed the first time`,
+    firstTryOf: c.firstTryRate === null ? t('No call of this class got a verdict from its verify command') : t('{n} of {of} verified calls passed the first time', { n: c.firstTry, of: c.verified }),
     rate: c.firstTryRate,
     notVerified: apart.join(' \u00b7 '),
-    after: [c.fixed ? `${c.fixed} fixed by the agent` : null, c.failed ? `${c.failed} failed` : null].filter(Boolean).join(' \u00b7 '),
+    after: [c.fixed ? t('{n} fixed by the agent', { n: c.fixed }) : null, c.failed ? t('{n} failed', { n: c.failed }) : null].filter(Boolean).join(' \u00b7 '),
     escalated: String(c.escalated ?? 0),
     ...costCell(cost, c.runs),
   };
@@ -164,8 +165,8 @@ export function lowerCommand(s) {
 export function suggestionText(s) {
   return {
     title: `${roleName(s.agent)} \u00b7 ${s.change}`,
-    says: `passed ${s.passed} of ${s.passed} on ${tierWord(s.from)}: try ${tierWord(s.to)} for this class?`,
-    how: 'Yours to decide: send the command in your own session. Studio does not write it.',
+    says: t('passed {n} of {n} on {from}: try {to} for this class?', { n: s.passed, from: tierWord(s.from), to: tierWord(s.to) }),
+    how: t('Yours to decide: send the command in your own session. Studio does not write it.'),
     command: lowerCommand(s),
   };
 }
@@ -179,43 +180,47 @@ export function suggestionText(s) {
  */
 export function aboveText(a, cost = null) {
   const to = tierWord(a.to);
-  const ran = Object.entries(a.models ?? {}).sort((x, y) => y[1] - x[1]).map(([t, n]) => `${n} on ${tierWord(t)}`).join(', ');
+  const ran = Object.entries(a.models ?? {}).sort((x, y) => y[1] - x[1]).map(([k, n]) => t('{n} on {model}', { n, model: tierWord(k) })).join(', ');
   let costs = null;
   if (cost?.costed) {
     const some = cost.costed < cost.runs;
     const usd = (v) => (some ? `\u2265${fmtCost(v).replace(/^~/, '')}` : fmtCost(v));
-    costs = `${usd(cost.cost)} as run; the same tokens at ${to}'s price ${usd(cost.atNormal)}${some ? ` (${cost.costed} of ${cost.runs} priced)` : ''}. API list price; another model would not spend the same tokens.`;
+    costs = some
+      ? t('{cost} as run; the same tokens at {model}\'s price {normal} ({n} of {runs} priced). API list price; another model would not spend the same tokens.', { cost: usd(cost.cost), model: to, normal: usd(cost.atNormal), n: cost.costed, runs: cost.runs })
+      : t('{cost} as run; the same tokens at {model}\'s price {normal}. API list price; another model would not spend the same tokens.', { cost: usd(cost.cost), model: to, normal: usd(cost.atNormal) });
   }
   return {
     title: `${roleName(a.agent)} \u00b7 ${a.change}`,
-    says: `normal risk, ${plural(a.runs, 'task')} above ${to}: ${ran}.`,
+    says: a.runs === 1 ? t('normal risk, 1 task above {model}: {ran}.', { model: to, ran }) : t('normal risk, {n} tasks above {model}: {ran}.', { n: a.runs, model: to, ran }),
     verdict: a.passed
-      ? `${to} is enough for this class: its latest ${a.passed} verified calls on ${to} all passed the first time.`
-      : `Whether ${to} would have done is not measured: this class does not have ${a.need ?? 'enough'} verified calls on ${to} that all passed the first time.`,
+      ? t('{model} is enough for this class: its latest {n} verified calls on {model} all passed the first time.', { model: to, n: a.passed })
+      : a.need != null
+        ? t('Whether {model} would have done is not measured: this class does not have {n} verified calls on {model} that all passed the first time.', { model: to, n: a.need })
+        : t('Whether {model} would have done is not measured: this class does not have enough verified calls on {model} that all passed the first time.', { model: to }),
     measured: Boolean(a.passed),
     costs,
   };
 }
 
-export const ABOVE_HEAD = 'Above the table \u00b7 nothing is blocked';
-export const ABOVE_RULE = 'The gate holds a floor, not a ceiling: which model runs normal work is yours to choose.';
+export const ABOVE_HEAD = t('Above the table \u00b7 nothing is blocked');
+export const ABOVE_RULE = t('The gate holds a floor, not a ceiling: which model runs normal work is yours to choose.');
 
 /** What the view says when there is nothing to list. */
 export function emptyNote(data) {
-  if (!data) return 'Reading the record…';
-  if (data.measured === false) return `Not measured — ${data.reason}`;
-  if (!data.classes?.length) return 'The record is there and has no line yet.';
+  if (!data) return t('Reading the record…');
+  if (data.measured === false) return t('Not measured — {reason}', { reason: data.reason });
+  if (!data.classes?.length) return t('The record is there and has no line yet.');
   return null;
 }
 
-export const SOURCE = 'Source: .claude/state/model-outcomes.tsv';
-export const LOWER_RULE = 'Lowering a floor is never automatic. Raising it is.';
+export const SOURCE = t('Source: .claude/state/model-outcomes.tsv');
+export const LOWER_RULE = t('Lowering a floor is never automatic. Raising it is.');
 
 /** What was read for cost, for the header's tooltip; null before it has been. */
-export const costLine = (costs) => (costs?.measured ? `${fmtCount(costs.sessionsRead ?? 0)} ${costs.sessionsRead === 1 ? 'session' : 'sessions'} read for cost` : null);
+export const costLine = (costs) => (costs?.measured ? (costs.sessionsRead === 1 ? t('1 session read for cost') : t('{n} sessions read for cost', { n: fmtCount(costs.sessionsRead ?? 0) })) : null);
 
 export const totalsLine = (data) => [
-  `${plural(data.rows ?? 0, 'task')} in ${plural(data.classes?.length ?? 0, 'class', 'classes')}`,
-  data.dropped ? `${data.dropped} ${data.dropped === 1 ? 'line' : 'lines'} not read (${Object.entries(data.droppedWhy ?? {}).map(([why, n]) => `${n}: ${why}`).join('; ') || 'no reason kept'})` : null,
-  data.truncated ? 'only the end of a long record was read' : null,
+  `${(data.rows ?? 0) === 1 ? t('1 task') : t('{n} tasks', { n: data.rows ?? 0 })} ${(data.classes?.length ?? 0) === 1 ? t('in 1 class') : t('in {n} classes', { n: data.classes?.length ?? 0 })}`,
+  data.dropped ? `${data.dropped === 1 ? t('1 line not read') : t('{n} lines not read', { n: data.dropped })} (${Object.entries(data.droppedWhy ?? {}).map(([why, n]) => `${n}: ${why}`).join('; ') || t('no reason kept')})` : null,
+  data.truncated ? t('only the end of a long record was read') : null,
 ].filter(Boolean).join(' · ');