Internationalization: 7 languages with live switching

Custom signal-based runtime (no i18n dependency): shared src/shared/i18n
dictionaries, ui I18nService.t() reactive by construction so language
switches live, and a backend i18n.ts for native menus + thrown errors.
Every user-facing string keyed across templates, toasts, dialogs, file
kinds, columns, macOS menu/context menus, and errors. Language picker in
Options (auto-detects OS locale, falls back to English); switching
relabels the webview and native chrome instantly. English/Spanish/French/
German fully drafted; Chinese/Japanese/Basque drafted, flagged for native
review. Docs updated.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

ui/src/app/editor-window/editor-window.html

@@ -3,9 +3,9 @@
     <div class="flex flex-1 items-center justify-center">
       <div class="max-w-sm rounded-lg border border-border bg-card p-6 text-center shadow-sm">
         <ng-icon name="mynaXCircle" size="1.5rem" class="text-destructive" />
-        <p class="mt-2 text-sm font-medium">No file to edit</p>
+        <p class="mt-2 text-sm font-medium">{{ i18n.t('editor.noFileTitle') }}</p>
         <p class="mt-1 text-xs text-muted-foreground">
-          This window was opened without an editor context. Launch files from the app.
+          {{ i18n.t('editor.noFileBody') }}
         </p>
       </div>
     </div>
@@ -28,17 +28,17 @@
       <div class="flex-1"></div>
       <button
         (click)="toggleWrap()"
-        [title]="'Wrap long lines — hides line numbers (' + altLabel + 'Z)'"
+        [title]="i18n.t('editor.wrapHint', { alt: altLabel })"
         class="rounded-md px-2 py-1 text-[11px] electrobun-webkit-app-region-no-drag hover:bg-accent"
         [class.bg-accent]="wrap()"
         [class.text-foreground]="wrap()"
         [class.text-muted-foreground]="!wrap()"
       >
-        Wrap
+        {{ i18n.t('editor.wrap') }}
       </button>
       <button
         (click)="openFind()"
-        [title]="'Find (' + modLabel + 'F)'"
+        [title]="i18n.t('editor.findHint', { mod: modLabel })"
         class="grid size-6 place-items-center rounded-md text-muted-foreground electrobun-webkit-app-region-no-drag hover:bg-accent hover:text-foreground"
       >
         <ng-icon name="mynaSearch" size="0.85rem" />
@@ -53,7 +53,7 @@
           [value]="findQuery()"
           (input)="onFindInput($any($event.target).value)"
           (keydown)="onFindKeydown($event)"
-          placeholder="Find in file"
+          [placeholder]="i18n.t('editor.findPlaceholder')"
           spellcheck="false"
           class="h-6 w-56 rounded-md border border-input bg-transparent px-2 text-xs outline-none focus:ring-2 focus:ring-ring"
         />
@@ -66,14 +66,14 @@
         </span>
         <button
           (click)="findStep(-1)"
-          title="Previous match (⇧↵)"
+          [title]="i18n.t('editor.prevMatch')"
           class="grid size-5 place-items-center rounded text-muted-foreground hover:bg-accent hover:text-foreground"
         >
           <ng-icon name="mynaChevronUp" size="0.8rem" />
         </button>
         <button
           (click)="findStep(1)"
-          title="Next match (↵)"
+          [title]="i18n.t('editor.nextMatch')"
           class="grid size-5 place-items-center rounded text-muted-foreground hover:bg-accent hover:text-foreground"
         >
           <ng-icon name="mynaChevronDown" size="0.8rem" />
@@ -81,7 +81,7 @@
         <div class="flex-1"></div>
         <button
           (click)="closeFind()"
-          title="Close (Esc)"
+          [title]="i18n.t('editor.closeHint')"
           class="grid size-5 place-items-center rounded text-muted-foreground hover:bg-accent hover:text-foreground"
         >
           <ng-icon name="mynaX" size="0.8rem" />
@@ -94,8 +94,7 @@
         class="flex shrink-0 items-center gap-2 border-b border-border bg-destructive/10 px-3 py-1.5 text-[11px] text-destructive"
       >
         <ng-icon name="mynaXCircle" size="0.85rem" class="shrink-0" />
-        Disconnected from {{ ctx.sessionTitle }} — saving will fail, but your text is preserved
-        in this window.
+        {{ i18n.t('editor.disconnected', { name: ctx.sessionTitle }) }}
       </div>
     }
 
@@ -107,13 +106,13 @@
       <div class="flex flex-1 items-center justify-center">
         <div class="max-w-md rounded-lg border border-border bg-card p-6 text-center shadow-sm">
           <ng-icon name="mynaXCircle" size="1.5rem" class="text-destructive" />
-          <p class="mt-2 text-sm font-medium">Can't open {{ ctx.name }}</p>
+          <p class="mt-2 text-sm font-medium">{{ i18n.t('editor.cantOpen', { name: ctx.name }) }}</p>
           <p class="mt-1 text-xs text-muted-foreground">{{ error }}</p>
           <button
             (click)="discardAndClose()"
             class="mt-4 rounded-md border border-border px-3 py-1.5 text-xs font-medium hover:bg-accent"
           >
-            Close Window
+            {{ i18n.t('editor.closeWindow') }}
           </button>
         </div>
       </div>
@@ -142,17 +141,17 @@
       </div>
 
       <footer class="flex shrink-0 items-center gap-2 border-t border-border px-4 py-2">
-        <span class="text-[11px] text-muted-foreground">{{ modLabel }}S save · {{ modLabel }}F find · {{ modLabel }}W close</span>
+        <span class="text-[11px] text-muted-foreground">{{ i18n.t('editor.shortcuts', { mod: modLabel }) }}</span>
         <span class="text-[11px] text-muted-foreground">·</span>
         <span class="text-[11px] tabular-nums text-muted-foreground">
-          {{ lineCount() }} {{ lineCount() === 1 ? 'line' : 'lines' }}
+          {{ i18n.t('editor.lines', { count: lineCount() }) }}
         </span>
         <div class="flex-1"></div>
         <button
           (click)="requestClose()"
           class="rounded-md px-3 py-1.5 text-xs font-medium hover:bg-accent"
         >
-          Close
+          {{ i18n.t('editor.close') }}
         </button>
         <button
           (click)="save()"
@@ -162,7 +161,7 @@
           @if (saving()) {
             <ng-icon name="mynaSpinner" size="0.85rem" class="animate-spin" />
           }
-          Save
+          {{ i18n.t('common.save') }}
         </button>
       </footer>
     }
@@ -175,30 +174,30 @@
           class="w-96 rounded-lg border border-border bg-card p-4 text-card-foreground shadow-xl"
           (mousedown)="$event.stopPropagation()"
         >
-          <h2 class="text-sm font-semibold">Save changes to "{{ ctx.name }}"?</h2>
+          <h2 class="text-sm font-semibold">{{ i18n.t('editor.saveChangesTitle', { name: ctx.name }) }}</h2>
           <p class="mt-1.5 text-xs text-muted-foreground">
-            Your changes will be lost if you don't save them.
+            {{ i18n.t('editor.saveChangesBody') }}
           </p>
           <div class="mt-4 flex items-center gap-2">
             <button
               (click)="discardAndClose()"
               class="rounded-md px-3 py-1.5 text-xs font-medium text-destructive hover:bg-accent"
             >
-              Don't Save
+              {{ i18n.t('editor.dontSave') }}
             </button>
             <div class="flex-1"></div>
             <button
               (click)="cancelClose()"
               class="rounded-md px-3 py-1.5 text-xs font-medium hover:bg-accent"
             >
-              Cancel
+              {{ i18n.t('common.cancel') }}
             </button>
             <button
               (click)="saveAndClose()"
               [disabled]="saving()"
               class="rounded-md bg-primary px-3 py-1.5 text-xs font-medium text-primary-foreground hover:bg-primary/90 disabled:opacity-50"
             >
-              Save
+              {{ i18n.t('common.save') }}
             </button>
           </div>
         </div>

ui/src/app/editor-window/editor-window.ts

@@ -10,6 +10,7 @@ import {
   viewChild,
 } from '@angular/core';
 import { NgIcon } from '@ng-icons/core';
+import { I18nService } from '../i18n.service';
 import { ALT_LABEL, blockNativeContextMenu, EDITOR_CONTEXT, IS_MAC_CHROME, MOD_LABEL } from '../platform';
 import { RpcService } from '../rpc.service';
 import { SettingsService } from '../settings.service';
@@ -38,6 +39,7 @@ const DRAFT_DEBOUNCE_MS = 400;
   },
 })
 export class EditorWindow {
+  readonly i18n = inject(I18nService);
   readonly ctx = EDITOR_CONTEXT;
   readonly isMacChrome = IS_MAC_CHROME;
   readonly modLabel = MOD_LABEL;
@@ -273,7 +275,7 @@ export class EditorWindow {
       }
       this.savedContent.set(content);
       this.lastSentDirty = false; // bun record already cleaned by the handler
-      this.toast.success(`Saved ${this.ctx!.name}`);
+      this.toast.success(this.i18n.t('toasts.saved', { name: this.ctx!.name }));
       return true;
     } finally {
       this.saving.set(false);