From e486574442724ff4ba79808a1ede254368b0638a Mon Sep 17 00:00:00 2001
From: ZacharyZcR <zacharyzcr1984@gmail.com>
Date: Sun, 19 Jul 2026 04:22:46 +0800
Subject: [PATCH] =?UTF-8?q?web:=20i18n=20support=20=E2=80=94=20English,=20?=
 =?UTF-8?q?=E7=AE=80=E4=BD=93=E4=B8=AD=E6=96=87,=20=E7=B9=81=E9=AB=94?=
 =?UTF-8?q?=E4=B8=AD=E6=96=87,=20Italiano?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Lightweight i18n without react-i18next: a LocaleProvider context +
useLocale() hook with {{var}} interpolation, auto-detect from
navigator.language, persisted to localStorage.

98 translation keys across 4 locale files (en/zh-CN/zh-TW/it).
All user-visible strings in App/Brain/Profiling/ErrorBoundary are
now t() calls. Language switcher added to the sidebar footer.

Build clean (tsc + vite), 18 tests pass.
---
 web/src/App.tsx           | 121 +++++++++++++++++++-----------------
 web/src/Brain.tsx         |  43 +++++++------
 web/src/ErrorBoundary.tsx |  21 +++++--
 web/src/Profiling.tsx     |  58 ++++++++----------
 web/src/i18n/en.ts        | 125 ++++++++++++++++++++++++++++++++++++++
 web/src/i18n/index.ts     |  78 ++++++++++++++++++++++++
 web/src/i18n/it.ts        | 113 ++++++++++++++++++++++++++++++++++
 web/src/i18n/zh-CN.ts     | 113 ++++++++++++++++++++++++++++++++++
 web/src/i18n/zh-TW.ts     | 113 ++++++++++++++++++++++++++++++++++
 web/src/index.css         |   4 +-
 web/src/main.tsx          |   5 +-
 11 files changed, 675 insertions(+), 119 deletions(-)
 create mode 100644 web/src/i18n/en.ts
 create mode 100644 web/src/i18n/index.ts
 create mode 100644 web/src/i18n/it.ts
 create mode 100644 web/src/i18n/zh-CN.ts
 create mode 100644 web/src/i18n/zh-TW.ts

diff --git a/web/src/App.tsx b/web/src/App.tsx
index a33cc88..39c9f3b 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -9,6 +9,7 @@ import {
   Database,
   Feather,
   Gauge,
+  Globe,
   HardDrive,
   KeyRound,
   Layers,
@@ -34,6 +35,7 @@ import { Brain } from "./Brain"
 import { Profiling } from "./Profiling"
 import { persistPublicSettings, stored } from "@/lib/storage"
 import { cn } from "@/lib/utils"
+import { useLocale } from "./i18n"
 
 const message = (role: ChatMessage["role"], content: string): ChatMessage => {
   let id: string
@@ -42,15 +44,12 @@ const message = (role: ChatMessage["role"], content: string): ChatMessage => {
 }
 
 export default function App() {
-  // When the page is served by the engine itself (coli web), same-origin is the
-  // right default: no CORS, no manual endpoint editing. The Vite dev server
-  // (port 5173) keeps the classic default.
+  const { t, locale, setLocale, locales } = useLocale()
+
   const servedByEngine = typeof window !== "undefined" && window.location.port !== "5173" && window.location.protocol.startsWith("http")
   const defaultBase = servedByEngine ? `${window.location.origin}/v1` : "http://127.0.0.1:8000/v1"
   const [baseUrl, setBaseUrl] = useState(() => {
     const saved = stored(localStorage, "colibri.baseUrl", defaultBase)
-    // migrate: a stored FACTORY default pointing at another origin would trip CORS
-    // when the page is engine-served — upgrade it to same-origin once.
     if (servedByEngine && saved === "http://127.0.0.1:8000/v1" && defaultBase !== saved) return defaultBase
     return saved
   })
@@ -120,7 +119,7 @@ export default function App() {
         const result = await getHealth(baseUrl, apiKey)
         if (!disposed) { setHealth(result); setHealthError("") }
       } catch (cause) {
-        if (!disposed) setHealthError(cause instanceof Error ? cause.message : "Runtime metrics unavailable")
+        if (!disposed) setHealthError(cause instanceof Error ? cause.message : "status.runtimeUnavailable")
       }
     }
     const timer = window.setInterval(() => void poll(), 5000)
@@ -155,13 +154,13 @@ export default function App() {
       } catch (cause) {
         if (!controller.signal.aborted) {
           setHealth(null)
-          setHealthError(cause instanceof Error ? cause.message : "Runtime metrics unavailable")
+          setHealthError(cause instanceof Error ? cause.message : "status.runtimeUnavailable")
         }
       }
     } catch (cause) {
       if (controller.signal.aborted) return
       setConnected(false)
-      setError(cause instanceof Error ? cause.message : "Could not reach the server.")
+      setError(cause instanceof Error ? cause.message : "status.serverError")
     } finally {
       if (probeRef.current === controller) { probeRef.current = null; setConnecting(false) }
     }
@@ -227,7 +226,7 @@ export default function App() {
       if (controller.signal.aborted) {
         updateMessages((current) => current.filter((item) => item.id !== assistant.id || item.content))
       } else {
-        setError(cause instanceof Error ? cause.message : "Generation failed.")
+        setError(cause instanceof Error ? cause.message : "status.generationFailed")
         updateMessages((current) => current.filter((item) => item.id !== assistant.id || item.content))
       }
     } finally {
@@ -241,22 +240,22 @@ export default function App() {
       <aside className="sidebar">
         <div className="brand-row">
           <div className="brand-mark"><Feather className="size-5" /></div>
-          <div><h1>colibrì</h1><p>local giant, tiny footprint</p></div>
+          <div><h1>colibrì</h1><p>{t("brand.tagline")}</p></div>
         </div>
 
         <section className="side-section">
-          <div className="section-title"><Link2 className="size-3.5" /> Connection</div>
-          <label>API endpoint<Input value={baseUrl} onChange={(event) => setBaseUrl(event.target.value)} /></label>
-          <label>API key<div className="relative"><KeyRound className="field-icon" /><Input className="pl-9" type="password" value={apiKey} placeholder="optional" onChange={(event) => setApiKey(event.target.value)} /></div><span className="field-help">Kept in memory only · sent to this endpoint</span></label>
+          <div className="section-title"><Link2 className="size-3.5" /> {t("sidebar.connection")}</div>
+          <label>{t("sidebar.endpoint")}<Input value={baseUrl} onChange={(event) => setBaseUrl(event.target.value)} /></label>
+          <label>{t("sidebar.apiKey")}<div className="relative"><KeyRound className="field-icon" /><Input className="pl-9" type="password" value={apiKey} placeholder={t("sidebar.apiKeyPlaceholder")} onChange={(event) => setApiKey(event.target.value)} /></div><span className="field-help">{t("sidebar.apiKeyHelp")}</span></label>
           <Button type="button" variant="secondary" onClick={connect} disabled={connecting}>
             {connecting ? <LoaderCircle className="size-4 animate-spin" /> : <RefreshCw className="size-4" />}
-            Probe server
+            {t("sidebar.probe")}
           </Button>
-          <div className={cn("connection-state", connected && "connected")} aria-live="polite"><span />{connected ? "Engine reachable" : "Not connected"}</div>
+          <div className={cn("connection-state", connected && "connected")} aria-live="polite"><span />{connected ? t("status.connected") : t("status.notConnected")}</div>
         </section>
 
         <section className="side-section runtime-section" aria-live="polite">
-          <div className="section-title"><Activity className="size-3.5" /> Runtime</div>
+          <div className="section-title"><Activity className="size-3.5" /> {t("sidebar.runtime")}</div>
           {health?.hwinfo ? <div className="hw-panel">
             {health.hwinfo.cpu ? <div className="hw-row"><Cpu className="size-3.5" /><span>{health.hwinfo.cpu}</span></div> : null}
             {health.hwinfo.gpus > 0 ? <div className="hw-row"><MonitorDot className="size-3.5" /><span>{health.hwinfo.gpus}× GPU<small>{health.hwinfo.vram_total_gb.toFixed(0)} GB VRAM</small></span></div> : null}
@@ -265,66 +264,74 @@ export default function App() {
           </div> : null}
           {health?.scheduler ? <>
             <div className="runtime-grid">
-              <div><span>Active</span><strong>{active}<small> / {capacity}</small></strong></div>
-              <div><span>Queued</span><strong>{health.scheduler.queued}<small> / {health.scheduler.max_queue}</small></strong></div>
-              <div><span>Completed</span><strong>{health.scheduler.completed}</strong></div>
-              <div><span>Failures</span><strong>{failures}</strong></div>
+              <div><span>{t("dashboard.active")}</span><strong>{active}<small> / {capacity}</small></strong></div>
+              <div><span>{t("dashboard.queued")}</span><strong>{health.scheduler.queued}<small> / {health.scheduler.max_queue}</small></strong></div>
+              <div><span>{t("dashboard.completed")}</span><strong>{health.scheduler.completed}</strong></div>
+              <div><span>{t("dashboard.failures")}</span><strong>{failures}</strong></div>
             </div>
             {health.tiers ? (() => {
-              const t = health.tiers
-              const total = Math.max(t.vram + t.ram + t.disk, 1)
+              const ti = health.tiers
+              const total = Math.max(ti.vram + ti.ram + ti.disk, 1)
               return <div className="tier-panel">
-                <div className="tier-bar" role="img" aria-label={`Experts: ${t.vram} VRAM, ${t.ram} RAM, ${t.disk} disk`}>
-                  <span className="tier-vram" style={{ width: `${(100 * t.vram) / total}%` }} />
-                  <span className="tier-ram" style={{ width: `${(100 * t.ram) / total}%` }} />
-                  <span className="tier-disk" style={{ width: `${(100 * t.disk) / total}%` }} />
+                <div className="tier-bar" role="img" aria-label={t("tier.ariaLabel", { vram: ti.vram, ram: ti.ram, disk: ti.disk })}>
+                  <span className="tier-vram" style={{ width: `${(100 * ti.vram) / total}%` }} />
+                  <span className="tier-ram" style={{ width: `${(100 * ti.ram) / total}%` }} />
+                  <span className="tier-disk" style={{ width: `${(100 * ti.disk) / total}%` }} />
                 </div>
                 <div className="tier-legend">
-                  <span><i className="tier-vram" />VRAM <strong>{t.vram.toLocaleString()}</strong><small>{t.vram_gb.toFixed(1)} GB</small></span>
-                  <span><i className="tier-ram" />RAM <strong>{t.ram.toLocaleString()}</strong><small>{t.ram_gb.toFixed(1)} GB</small></span>
-                  <span><i className="tier-disk" />Disk <strong>{t.disk.toLocaleString()}</strong></span>
+                  <span><i className="tier-vram" />{t("tier.vram")} <strong>{ti.vram.toLocaleString()}</strong><small>{ti.vram_gb.toFixed(1)} GB</small></span>
+                  <span><i className="tier-ram" />{t("tier.ram")} <strong>{ti.ram.toLocaleString()}</strong><small>{ti.ram_gb.toFixed(1)} GB</small></span>
+                  <span><i className="tier-disk" />{t("tier.disk")} <strong>{ti.disk.toLocaleString()}</strong></span>
                 </div>
               </div>
             })() : null}
             {totalTokens.prompt + totalTokens.completion > 0 ? <div className="session-stats">
-              <span><Database className="size-3" /> Session: <strong>{totalTokens.prompt.toLocaleString()}</strong> prompt + <strong>{totalTokens.completion.toLocaleString()}</strong> completion</span>
+              <span><Database className="size-3" /> {t("dashboard.session")} <strong>{totalTokens.prompt.toLocaleString()}</strong> {t("dashboard.prompt")} + <strong>{totalTokens.completion.toLocaleString()}</strong> {t("dashboard.completion")}</span>
             </div> : null}
-            <div className="runtime-foot"><span className="runtime-dot" /> Scheduler online <code>{kvSlots} KV</code></div>
-          </> : <p className="runtime-unavailable">{connected ? (healthError || "Runtime metrics unavailable") : "Probe the server to inspect runtime state."}</p>}
+            <div className="runtime-foot"><span className="runtime-dot" /> {t("sidebar.schedulerOnline")} <code>{kvSlots} KV</code></div>
+          </> : <p className="runtime-unavailable">{connected ? (healthError ? t(healthError) : t("status.runtimeUnavailable")) : t("sidebar.runtimeProbe")}</p>}
         </section>
 
         <section className="side-section">
-          <div className="section-title"><SlidersHorizontal className="size-3.5" /> Inference</div>
-          <label>Model<select value={model} onChange={(event) => setModel(event.target.value)}>{models.length ? models.map((id) => <option key={id}>{id}</option>) : <option>{model}</option>}</select></label>
-          {health?.kv_slots && health.kv_slots > 1 ? <label>KV session<select value={cacheSlot} onChange={(event) => setCacheSlot(Number(event.target.value))} disabled={loading}>
-            {Array.from({ length: kvSlots }, (_, slot) => <option key={slot} value={slot}>Session {slot + 1}</option>)}
-          </select><span className="field-help">Isolated context · conversation follows the selected slot</span></label> : null}
-          <label><span className="label-line"><span>Temperature</span><code>{temperature.toFixed(1)}</code></span><input className="range" type="range" min="0" max="2" step="0.1" value={temperature} onChange={(event) => setTemperature(Number(event.target.value))} /></label>
-          <label>Max output tokens<Input type="number" min={1} max={4096} value={maxTokens} onChange={(event) => { const value = Number(event.target.value); if (Number.isFinite(value)) setMaxTokens(Math.min(4096, Math.max(1, Math.round(value)))) }} /></label>
+          <div className="section-title"><SlidersHorizontal className="size-3.5" /> {t("sidebar.inference")}</div>
+          <label>{t("sidebar.model")}<select value={model} onChange={(event) => setModel(event.target.value)}>{models.length ? models.map((id) => <option key={id}>{id}</option>) : <option>{model}</option>}</select></label>
+          {health?.kv_slots && health.kv_slots > 1 ? <label>{t("sidebar.kvSession")}<select value={cacheSlot} onChange={(event) => setCacheSlot(Number(event.target.value))} disabled={loading}>
+            {Array.from({ length: kvSlots }, (_, slot) => <option key={slot} value={slot}>{t("sidebar.sessionLabel", { slot: slot + 1 })}</option>)}
+          </select><span className="field-help">{t("sidebar.kvSessionHelp")}</span></label> : null}
+          <label><span className="label-line"><span>{t("sidebar.temperature")}</span><code>{temperature.toFixed(1)}</code></span><input className="range" type="range" min="0" max="2" step="0.1" value={temperature} onChange={(event) => setTemperature(Number(event.target.value))} /></label>
+          <label>{t("sidebar.maxTokens")}<Input type="number" min={1} max={4096} value={maxTokens} onChange={(event) => { const value = Number(event.target.value); if (Number.isFinite(value)) setMaxTokens(Math.min(4096, Math.max(1, Math.round(value)))) }} /></label>
           <button type="button" className={cn("toggle-row", thinking && "active")} aria-pressed={thinking} onClick={() => setThinking((value) => !value)}>
-            <span><BrainCircuit className="size-4" /> Reasoning</span><i><b /></i>
+            <span><BrainCircuit className="size-4" /> {t("sidebar.reasoning")}</span><i><b /></i>
           </button>
         </section>
 
-        <div className="sidebar-foot"><Cpu className="size-3.5" /><span>OpenAI-compatible transport</span></div>
+        <div className="sidebar-foot">
+          <div><Cpu className="size-3.5" /><span>{t("sidebar.transport")}</span></div>
+          <div className="locale-switcher">
+            <Globe className="size-3.5" />
+            <select value={locale} onChange={(e) => setLocale(e.target.value)}>
+              {locales.map((l) => <option key={l.code} value={l.code}>{l.label}</option>)}
+            </select>
+          </div>
+        </div>
       </aside>
 
       <main className="chat-panel">
         <header className="topbar">
-          <div><span className="eyebrow">ACTIVE MODEL</span><strong>{model}</strong></div>
+          <div><span className="eyebrow">{t("topbar.activeModel")}</span><strong>{model}</strong></div>
           <div className="view-tabs">
-            <button className={view === "chat" ? "active" : ""} onClick={() => setView("chat")}><MessageSquareText className="size-3.5" /> Chat</button>
-            <button className={view === "brain" ? "active" : ""} onClick={() => setView("brain")}><BrainCircuit className="size-3.5" /> Brain</button>
-            <button className={view === "profiling" ? "active" : ""} onClick={() => setView("profiling")}><Gauge className="size-3.5" /> Profiling</button>
+            <button className={view === "chat" ? "active" : ""} onClick={() => setView("chat")}><MessageSquareText className="size-3.5" /> {t("nav.chat")}</button>
+            <button className={view === "brain" ? "active" : ""} onClick={() => setView("brain")}><BrainCircuit className="size-3.5" /> {t("nav.brain")}</button>
+            <button className={view === "profiling" ? "active" : ""} onClick={() => setView("profiling")}><Gauge className="size-3.5" /> {t("nav.profiling")}</button>
           </div>
           <div className="top-actions">
-              {loading && tokenCount > 0 ? <Badge className="badge-live"><Zap className="size-3 flash" /> {tokenCount} tokens</Badge> : null}
-              {!loading && tokPerSec != null ? <Badge className="badge-speed"><Gauge className="size-3" /> {tokPerSec.toFixed(1)} tok/s</Badge> : null}
+              {loading && tokenCount > 0 ? <Badge className="badge-live"><Zap className="size-3 flash" /> {t("topbar.tokens", { n: tokenCount })}</Badge> : null}
+              {!loading && tokPerSec != null ? <Badge className="badge-speed"><Gauge className="size-3" /> {t("topbar.tokPerSec", { n: tokPerSec.toFixed(1) })}</Badge> : null}
               {!loading && ttft != null ? <Badge><Timer className="size-3" /> TTFT {(ttft/1000).toFixed(1)}s</Badge> : null}
               {!loading && lastRun?.usage ? <Badge><Layers className="size-3" /> {lastRun.usage.prompt_tokens}→{lastRun.usage.completion_tokens}</Badge> : null}
               {lastRun?.queueWaitMs != null ? <Badge><Clock className="size-3" /> queue {Math.round(lastRun.queueWaitMs)}ms</Badge> : null}
-              <Badge><MonitorDot className="size-3" /> slot {cacheSlot + 1}</Badge>
-              <Button variant="ghost" size="sm" onClick={() => { updateMessages([]); setTokPerSec(null); setTtft(null); setTokenCount(0); setTotalTokens({prompt:0,completion:0}) }} disabled={!messages.length || loading}><Trash2 className="size-3.5" /> Clear</Button>
+              <Badge><MonitorDot className="size-3" /> {t("topbar.slot", { n: cacheSlot + 1 })}</Badge>
+              <Button variant="ghost" size="sm" onClick={() => { updateMessages([]); setTokPerSec(null); setTtft(null); setTokenCount(0); setTotalTokens({prompt:0,completion:0}) }} disabled={!messages.length || loading}><Trash2 className="size-3.5" /> {t("topbar.clear")}</Button>
             </div>
         </header>
 
@@ -335,11 +342,11 @@ export default function App() {
           {!messages.length ? (
             <div className="empty-state">
               <div className="orb"><Feather /></div>
-              <span className="eyebrow">COLIBRÌ ENGINE</span>
-              <h2>Ask the giant.<br /><em>Keep the machine yours.</em></h2>
-              <p>Connect to a local colibrì server and stream responses directly from your hardware. Nothing leaves the endpoint you choose.</p>
+              <span className="eyebrow">{t("hero.title")}</span>
+              <h2>{t("hero.subtitle")}<br /><em>{t("hero.tagline")}</em></h2>
+              <p>{t("hero.description")}</p>
               <div className="suggestions">
-                {["Explain how expert routing works", "Write a small C benchmark", "Compare RAM and VRAM caching"].map((item) => <button key={item} onClick={() => setDraft(item)}>{item}<ArrowUp className="size-3.5 rotate-45" /></button>)}
+                {[t("prompts.routing"), t("prompts.benchmark"), t("prompts.caching")].map((item) => <button key={item} onClick={() => setDraft(item)}>{item}<ArrowUp className="size-3.5 rotate-45" /></button>)}
               </div>
             </div>
           ) : (
@@ -347,7 +354,7 @@ export default function App() {
               {messages.map((item) => (
                 <article key={item.id} className={cn("message", item.role)}>
                   <div className="avatar">{item.role === "user" ? "Y" : <Feather className="size-4" />}</div>
-                  <div><div className="message-meta">{item.role === "user" ? "You" : "colibrì"}</div><div className="message-body">{item.content || <span className="typing" aria-label="Generating"><i /><i /><i /></span>}</div></div>
+                  <div><div className="message-meta">{item.role === "user" ? t("chat.you") : t("chat.colibri")}</div><div className="message-body">{item.content || <span className="typing" aria-label="Generating"><i /><i /><i /></span>}</div></div>
                 </article>
               ))}
               <div ref={bottomRef} />
@@ -356,10 +363,10 @@ export default function App() {
         </div>
 
         <div className="composer-wrap">
-          {error && <div className="error-banner" role="alert">{error}</div>}
+          {error && <div className="error-banner" role="alert">{t(error)}</div>}
           <div className="composer">
-            <Textarea value={draft} onChange={(event) => setDraft(event.target.value)} placeholder="Message colibrì…" onKeyDown={(event) => { if (event.key === "Enter" && !event.shiftKey && !event.nativeEvent.isComposing) { event.preventDefault(); void send() } }} />
-            <div className="composer-foot"><span><MessageSquareText className="size-3.5" /> Enter to send · Shift+Enter for newline</span>{loading ? <Button variant="destructive" size="icon" aria-label="Stop generation" onClick={() => abortRef.current?.abort()}><CircleStop className="size-4" /></Button> : <Button size="icon" aria-label="Send message" disabled={!canSend} onClick={() => void send()}><ArrowUp className="size-4" /></Button>}</div>
+            <Textarea value={draft} onChange={(event) => setDraft(event.target.value)} placeholder={t("chat.placeholder")} onKeyDown={(event) => { if (event.key === "Enter" && !event.shiftKey && !event.nativeEvent.isComposing) { event.preventDefault(); void send() } }} />
+            <div className="composer-foot"><span><MessageSquareText className="size-3.5" /> {t("chat.inputHint")}</span>{loading ? <Button variant="destructive" size="icon" aria-label={t("chat.stop")} onClick={() => abortRef.current?.abort()}><CircleStop className="size-4" /></Button> : <Button size="icon" aria-label={t("chat.send")} disabled={!canSend} onClick={() => void send()}><ArrowUp className="size-4" /></Button>}</div>
           </div>
         </div>
         </>}
diff --git a/web/src/Brain.tsx b/web/src/Brain.tsx
index 6811238..6b4f70e 100644
--- a/web/src/Brain.tsx
+++ b/web/src/Brain.tsx
@@ -2,27 +2,26 @@ import { useEffect, useRef, useState } from "react"
 import { BrainCircuit, Flame, Layers } from "lucide-react"
 
 import { endpoint } from "@/lib/api"
+import { useLocale } from "./i18n"
 
 interface ExpertMap { rows: number; cols: number; map: string; hits: string; seq: number }
 interface AtlasEntry { affinity: Record<string, number>; entropy: number; top: string; label: string }
 
-const TIER_NAME = ["Disk", "RAM", "VRAM"]
+const TIER_KEYS = ["tier.disk", "tier.ram", "tier.vram"] as const
 const TIER_RGB: [number, number, number][] = [[58, 71, 80], [90, 155, 216], [78, 214, 165]]
 
-/* Layer-depth heuristic: what this region of the network tends to specialise in.
- * Honest framing — these are the depth roles observed across MoE interpretability
- * work, not per-expert ground truth (that needs co-activation analysis, #119). */
-function depthRole(row: number, rows: number, isMtp: boolean): string {
-  if (isMtp) return "MTP head — drafts the next token for speculative decoding"
+function depthRoleKey(row: number, rows: number, isMtp: boolean): string {
+  if (isMtp) return "brain.mtp"
   const f = row / Math.max(rows - 1, 1)
-  if (f < 0.2) return "early layers — surface features: tokens, spelling, local syntax"
-  if (f < 0.45) return "lower-middle — phrase structure, word relations, simple facts"
-  if (f < 0.7) return "upper-middle — semantics, long-range context, reasoning steps"
-  if (f < 0.9) return "late layers — planning the answer, style, coherence"
-  return "final layers — output shaping: picks the actual next-token distribution"
+  if (f < 0.2) return "brain.early"
+  if (f < 0.45) return "brain.lowerMiddle"
+  if (f < 0.7) return "brain.upperMiddle"
+  if (f < 0.9) return "brain.late"
+  return "brain.final"
 }
 
 export function Brain({ baseUrl, apiKey, connected }: { baseUrl: string; apiKey: string; connected: boolean }) {
+  const { t } = useLocale()
   const canvasRef = useRef<HTMLCanvasElement>(null)
   const wrapRef = useRef<HTMLDivElement>(null)
   const [wrapSize, setWrapSize] = useState({ w: 1200, h: 700 })
@@ -142,18 +141,18 @@ export function Brain({ baseUrl, apiKey, connected }: { baseUrl: string; apiKey:
   return (
     <div className="brain-page">
       <div className="brain-head">
-        <div className="section-title"><BrainCircuit className="size-4" /> Expert Cortex — {data ? `${data.rows} layers × ${data.cols} experts` : "waiting for engine"}</div>
+        <div className="section-title"><BrainCircuit className="size-4" /> {t("brain.title")} — {data ? t("brain.layers", { rows: data.rows, cols: data.cols }) : t("brain.waiting")}</div>
         <div className="brain-legend">
-          <span><i style={{ background: "#4ed6a5" }} /> VRAM {totals[2].toLocaleString()}</span>
-          <span><i style={{ background: "#5a9bd8" }} /> RAM {totals[1].toLocaleString()}</span>
-          <span><i style={{ background: "#3a4750" }} /> Disk {totals[0].toLocaleString()}</span>
-          <span><Flame className="size-3" /> brightness = routing heat</span>
-          <span className="brain-pulse-hint">⚡ white flash = routed this turn</span>
+          <span><i style={{ background: "#4ed6a5" }} /> {t("tier.vram")} {totals[2].toLocaleString()}</span>
+          <span><i style={{ background: "#5a9bd8" }} /> {t("tier.ram")} {totals[1].toLocaleString()}</span>
+          <span><i style={{ background: "#3a4750" }} /> {t("tier.disk")} {totals[0].toLocaleString()}</span>
+          <span><Flame className="size-3" /> {t("brain.brightnessHint")}</span>
+          <span className="brain-pulse-hint">{t("brain.flashHint")}</span>
         </div>
       </div>
       <div className="brain-canvas-wrap" ref={wrapRef}>
         <canvas ref={canvasRef} onMouseMove={onMove} onMouseLeave={() => setTip(null)} />
-        {!connected && <p className="runtime-unavailable">Connect to the engine to see the cortex.</p>}
+        {!connected && <p className="runtime-unavailable">{t("brain.connectHint")}</p>}
       </div>
       {tip && data && (() => {
         const isMtp = tip.row === data.rows - 1
@@ -162,16 +161,16 @@ export function Brain({ baseUrl, apiKey, connected }: { baseUrl: string; apiKey:
         return (
         <div className="brain-tip" style={{ left: tip.x + 14, top: tip.y + 14 }}>
           <div className="brain-tip-title"><Layers className="size-3" /> Layer {realLayer}{isMtp ? " (MTP)" : ""} · Expert {tip.col}</div>
-          <div>Tier: <strong style={{ color: ["#8b9aa3", "#5a9bd8", "#4ed6a5"][tip.tier] }}>{TIER_NAME[tip.tier]}</strong></div>
-          <div>Heat: <strong>{tip.heat === 0 ? "never routed" : `~2^${tip.heat} selections`}</strong></div>
+          <div>Tier: <strong style={{ color: ["#8b9aa3", "#5a9bd8", "#4ed6a5"][tip.tier] }}>{t(TIER_KEYS[tip.tier])}</strong></div>
+          <div>Heat: <strong>{tip.heat === 0 ? t("brain.neverRouted") : t("brain.selections", { heat: tip.heat })}</strong></div>
           {entry ? <>
             <div className={entry.label.startsWith("specialist") ? "brain-tip-spec" : undefined}>
-              {entry.label.startsWith("specialist") ? `⭐ Specialist: ${entry.top}` : "Generalist"}
+              {entry.label.startsWith("specialist") ? t("brain.specialist", { top: entry.top }) : t("brain.generalist")}
               <small> (entropy {entry.entropy})</small>
             </div>
             <div className="brain-tip-aff">{Object.entries(entry.affinity).sort((a, b) => b[1] - a[1]).slice(0, 3)
               .map(([c, p]) => `${c} ${Math.round(p * 100)}%`).join(" · ")}</div>
-          </> : <div className="brain-tip-role">{depthRole(tip.row, data.rows, isMtp)}</div>}
+          </> : <div className="brain-tip-role">{t(depthRoleKey(tip.row, data.rows, isMtp))}</div>}
         </div>
         )
       })()}
diff --git a/web/src/ErrorBoundary.tsx b/web/src/ErrorBoundary.tsx
index f88b8a9..1538bf9 100644
--- a/web/src/ErrorBoundary.tsx
+++ b/web/src/ErrorBoundary.tsx
@@ -1,4 +1,18 @@
 import { Component, type ReactNode } from "react"
+import { useLocale } from "./i18n"
+
+function ErrorFallback({ error, onRetry }: { error: Error; onRetry: () => void }) {
+  const { t } = useLocale()
+  return (
+    <div style={{ padding: "2rem", fontFamily: "ui-monospace, monospace", color: "#e5e7eb", background: "#0b0f10", minHeight: "100vh" }}>
+      <h2 style={{ color: "#4ed6a5" }}>{t("error.title")}</h2>
+      <p style={{ color: "#9ca3af" }}>{t("error.hint")}</p>
+      <pre style={{ whiteSpace: "pre-wrap", color: "#f87171" }}>{String(error)}</pre>
+      <button onClick={onRetry} style={{ marginTop: "1rem", padding: "0.5rem 1rem", background: "#1f2937", color: "#e5e7eb", border: "1px solid #374151", borderRadius: 8, cursor: "pointer" }}>{t("error.retry")}</button>
+    </div>
+  )
+}
+
 interface State { error: Error | null; stack: string }
 export class ErrorBoundary extends Component<{ children: ReactNode }, State> {
   state: State = { error: null, stack: "" }
@@ -9,11 +23,6 @@ export class ErrorBoundary extends Component<{ children: ReactNode }, State> {
   }
   render() {
     if (!this.state.error) return this.props.children
-    return <div style={{ padding: "2rem", fontFamily: "ui-monospace, monospace", color: "#e5e7eb", background: "#0b0f10", minHeight: "100vh" }}>
-      <h2 style={{ color: "#4ed6a5" }}>colibrì UI hit an error</h2>
-      <p style={{ color: "#9ca3af" }}>The engine is unaffected. Try refreshing.</p>
-      <pre style={{ whiteSpace: "pre-wrap", color: "#f87171" }}>{String(this.state.error)}</pre>
-      <button onClick={() => this.setState({ error: null, stack: "" })} style={{ marginTop: "1rem", padding: "0.5rem 1rem", background: "#1f2937", color: "#e5e7eb", border: "1px solid #374151", borderRadius: 8, cursor: "pointer" }}>Retry</button>
-    </div>
+    return <ErrorFallback error={this.state.error} onRetry={() => this.setState({ error: null, stack: "" })} />
   }
 }
diff --git a/web/src/Profiling.tsx b/web/src/Profiling.tsx
index 9fdaebb..06aa6ca 100644
--- a/web/src/Profiling.tsx
+++ b/web/src/Profiling.tsx
@@ -2,19 +2,14 @@ import { useEffect, useState } from "react"
 import { Activity, Gauge, HardDrive, Timer } from "lucide-react"
 
 import { getProfile, type ProfileTurn } from "@/lib/api"
+import { useLocale } from "./i18n"
 
-/* Wall-time phases stacked per turn. The order is the palette's CVD-safe slot
- * order (validated as a set on this surface) — identity never leans on colour
- * alone: segments keep 2px gaps, the legend is always shown and the table
- * carries the exact numbers. Disk *service* time is reported separately: it
- * runs on I/O threads overlapped with compute, so only the stall the compute
- * thread actually felt (I/O wait) belongs inside the wall-time stack. */
 const PHASES = [
-  { key: "expert_wait_s", name: "I/O wait", color: "#3987e5" },
-  { key: "expert_matmul_s", name: "Expert matmul", color: "#199e70" },
-  { key: "attention_s", name: "Attention", color: "#c98500" },
-  { key: "lm_head_s", name: "LM head", color: "#008300" },
-  { key: "other_s", name: "Other", color: "#9085e9" },
+  { key: "expert_wait_s", i18n: "profile.ioWait", color: "#3987e5" },
+  { key: "expert_matmul_s", i18n: "profile.expertMatmul", color: "#199e70" },
+  { key: "attention_s", i18n: "profile.attention", color: "#c98500" },
+  { key: "lm_head_s", i18n: "profile.lmHead", color: "#008300" },
+  { key: "other_s", i18n: "profile.other", color: "#9085e9" },
 ] as const
 
 interface Turn extends ProfileTurn { other_s: number; toks: number }
@@ -28,8 +23,9 @@ const derive = (turn: ProfileTurn): Turn => ({
 const seconds = (value: number) => (value >= 10 ? value.toFixed(1) : value.toFixed(2)) + "s"
 
 function ShareBar({ label, turns }: { label: string; turns: Turn[] }) {
+  const { t } = useLocale()
   const total = turns.reduce((sum, turn) => sum + turn.wall_s, 0)
-  const parts = PHASES.map((phase) => ({ ...phase, value: turns.reduce((sum, turn) => sum + turn[phase.key], 0) }))
+  const parts = PHASES.map((phase) => ({ ...phase, name: t(phase.i18n), value: turns.reduce((sum, turn) => sum + turn[phase.key], 0) }))
   return (
     <div className="prof-share">
       <div className="prof-share-head"><span>{label}</span><code>{seconds(total)}</code></div>
@@ -47,9 +43,7 @@ function ShareBar({ label, turns }: { label: string; turns: Turn[] }) {
   )
 }
 
-/* Column chart over the recent turns; oldest on the left. Stacked mode draws the
- * wall-time composition, plain mode a single series (no legend — the title names it). */
-function TurnColumns({ turns, stacked, height, format }: { turns: Turn[]; stacked: boolean; height: number; format: (turn: Turn) => string }) {
+function TurnColumns({ turns, stacked, height, format, footLabel, footLabelOne }: { turns: Turn[]; stacked: boolean; height: number; format: (turn: Turn) => string; footLabel: string; footLabelOne: string }) {
   const [hover, setHover] = useState<number | null>(null)
   const peak = Math.max(...turns.map((turn) => (stacked ? turn.wall_s : turn.toks)), 1e-9)
   const gap = 2
@@ -71,11 +65,10 @@ function TurnColumns({ turns, stacked, height, format }: { turns: Turn[]; stacke
             return h > 0.1 ? <rect key={`${index}-${phase.key}`} x={x} y={y + 0.35} width={width} height={Math.max(h - 0.7, 0.35)} fill={phase.color} opacity={hover === null || hover === index ? 1 : 0.45} /> : null
           })
         })}
-        {/* hit targets bigger than the marks */}
         {turns.map((_, index) => <rect key={index} x={index * (width + gap) - gap / 2} y="0" width={width + gap} height={height} fill="transparent" onMouseEnter={() => setHover(index)} />)}
       </svg>
       <div className="prof-plot-foot">
-        <span>{turns.length > 1 ? `${turns.length} turns · oldest → newest` : "1 turn"}</span>
+        <span>{turns.length > 1 ? footLabel : footLabelOne}</span>
         <code>{hover !== null && turns[hover] ? format(turns[hover]) : `peak ${stacked ? seconds(peak) : peak.toFixed(1) + " tok/s"}`}</code>
       </div>
     </div>
@@ -83,6 +76,7 @@ function TurnColumns({ turns, stacked, height, format }: { turns: Turn[]; stacke
 }
 
 export function Profiling({ baseUrl, apiKey, connected }: { baseUrl: string; apiKey: string; connected: boolean }) {
+  const { t } = useLocale()
   const [turns, setTurns] = useState<Turn[]>([])
 
   useEffect(() => {
@@ -107,42 +101,42 @@ export function Profiling({ baseUrl, apiKey, connected }: { baseUrl: string; api
   return (
     <div className="prof-page">
       <div className="prof-head">
-        <div className="section-title"><Gauge className="size-4" /> Profiling — where the engine spends each turn</div>
+        <div className="section-title"><Gauge className="size-4" /> {t("profile.title")}</div>
         <div className="prof-legend">
-          {PHASES.map((phase) => <span key={phase.key}><i style={{ background: phase.color }} />{phase.name}</span>)}
+          {PHASES.map((phase) => <span key={phase.key}><i style={{ background: phase.color }} />{t(phase.i18n)}</span>)}
         </div>
       </div>
 
       {!latest ? (
-        <p className="runtime-unavailable">{connected ? "No profiled turns yet — send a chat message and the breakdown appears here." : "Connect to the engine to collect per-turn timings."}</p>
+        <p className="runtime-unavailable">{connected ? t("profile.empty") : t("profile.connectHint")}</p>
       ) : (
         <>
           <div className="prof-tiles">
-            <div><span><Gauge className="size-3" /> Last turn</span><strong>{latest.toks.toFixed(1)}</strong><small>tok/s</small></div>
-            <div><span><Timer className="size-3" /> Wall time</span><strong>{seconds(latest.wall_s)}</strong><small>{latest.prompt_tokens} → {latest.completion_tokens} tokens</small></div>
-            <div><span><Activity className="size-3" /> Batching</span><strong>{latest.forwards > 0 ? (latest.completion_tokens / latest.forwards).toFixed(2) : "—"}</strong><small>tokens / forward</small></div>
-            <div><span><HardDrive className="size-3" /> Disk service</span><strong>{seconds(latest.expert_disk_s)}</strong><small>overlapped with compute</small></div>
+            <div><span><Gauge className="size-3" /> {t("profile.lastTurn")}</span><strong>{latest.toks.toFixed(1)}</strong><small>tok/s</small></div>
+            <div><span><Timer className="size-3" /> {t("profile.wallTime")}</span><strong>{seconds(latest.wall_s)}</strong><small>{latest.prompt_tokens} → {latest.completion_tokens} tokens</small></div>
+            <div><span><Activity className="size-3" /> {t("profile.batching")}</span><strong>{latest.forwards > 0 ? (latest.completion_tokens / latest.forwards).toFixed(2) : "—"}</strong><small>{t("profile.tokensPerForward")}</small></div>
+            <div><span><HardDrive className="size-3" /> {t("profile.diskService")}</span><strong>{seconds(latest.expert_disk_s)}</strong><small>{t("profile.overlapped")}</small></div>
           </div>
 
           <div className="prof-shares">
-            <ShareBar label="Last turn" turns={[latest]} />
-            {turns.length > 1 ? <ShareBar label={`Window · last ${turns.length} turns`} turns={turns} /> : null}
+            <ShareBar label={t("profile.lastTurn")} turns={[latest]} />
+            {turns.length > 1 ? <ShareBar label={t("profile.window", { n: turns.length })} turns={turns} /> : null}
           </div>
 
           <div className="prof-charts">
             <div className="prof-chart">
-              <div className="prof-chart-title">Throughput per turn (tok/s)</div>
-              <TurnColumns turns={recent} stacked={false} height={36} format={(turn) => `${turn.toks.toFixed(1)} tok/s · ${turn.completion_tokens} tokens`} />
+              <div className="prof-chart-title">{t("profile.throughputTitle")}</div>
+              <TurnColumns turns={recent} stacked={false} height={36} footLabel={t("profile.turnsLabel", { n: recent.length })} footLabelOne={t("profile.oneTurn")} format={(turn) => `${turn.toks.toFixed(1)} tok/s · ${turn.completion_tokens} tokens`} />
             </div>
             <div className="prof-chart">
-              <div className="prof-chart-title">Turn wall time by phase (s)</div>
-              <TurnColumns turns={recent} stacked height={36} format={(turn) => `${seconds(turn.wall_s)} · ${PHASES.map((phase) => `${phase.name} ${seconds(turn[phase.key])}`).join(" · ")}`} />
+              <div className="prof-chart-title">{t("profile.phaseTitle")}</div>
+              <TurnColumns turns={recent} stacked height={36} footLabel={t("profile.turnsLabel", { n: recent.length })} footLabelOne={t("profile.oneTurn")} format={(turn) => `${seconds(turn.wall_s)} · ${PHASES.map((phase) => `${t(phase.i18n)} ${seconds(turn[phase.key])}`).join(" · ")}`} />
             </div>
           </div>
 
           <div className="prof-table-wrap">
             <table className="prof-table">
-              <thead><tr><th>Turn</th><th>Tokens</th><th>tok/s</th><th>Wall</th>{PHASES.map((phase) => <th key={phase.key}><i style={{ background: phase.color }} />{phase.name}</th>)}<th>Disk service</th></tr></thead>
+              <thead><tr><th>{t("profile.turnCol")}</th><th>{t("profile.tokensCol")}</th><th>tok/s</th><th>{t("profile.wallCol")}</th>{PHASES.map((phase) => <th key={phase.key}><i style={{ background: phase.color }} />{t(phase.i18n)}</th>)}<th>{t("profile.diskService")}</th></tr></thead>
               <tbody>
                 {recent.slice().reverse().map((turn, index) => (
                   <tr key={turns.length - index}>
@@ -156,7 +150,7 @@ export function Profiling({ baseUrl, apiKey, connected }: { baseUrl: string; api
                 ))}
               </tbody>
             </table>
-            {diskService > 0 ? <p className="prof-note">Disk service is time spent reading experts on I/O threads; it overlaps with compute, so only the <em>I/O wait</em> the compute thread felt counts inside the wall-time stack. With multiple KV sessions the shares describe the whole engine over the turn's window.</p> : null}
+            {diskService > 0 ? <p className="prof-note">{t("profile.diskNote")}</p> : null}
           </div>
         </>
       )}
diff --git a/web/src/i18n/en.ts b/web/src/i18n/en.ts
new file mode 100644
index 0000000..f3cdd01
--- /dev/null
+++ b/web/src/i18n/en.ts
@@ -0,0 +1,125 @@
+const en: Record<string, string> = {
+  // nav
+  "nav.chat": "Chat",
+  "nav.brain": "Brain",
+  "nav.profiling": "Profiling",
+
+  // brand
+  "brand.tagline": "local giant, tiny footprint",
+
+  // sidebar — connection
+  "sidebar.connection": "Connection",
+  "sidebar.endpoint": "API endpoint",
+  "sidebar.apiKey": "API key",
+  "sidebar.apiKeyPlaceholder": "optional",
+  "sidebar.apiKeyHelp": "Kept in memory only · sent to this endpoint",
+  "sidebar.probe": "Probe server",
+  "status.connected": "Engine reachable",
+  "status.notConnected": "Not connected",
+  "status.runtimeUnavailable": "Runtime metrics unavailable",
+  "status.serverError": "Could not reach the server.",
+  "status.generationFailed": "Generation failed.",
+
+  // sidebar — runtime
+  "sidebar.runtime": "Runtime",
+  "sidebar.runtimeProbe": "Probe the server to inspect runtime state.",
+  "sidebar.schedulerOnline": "Scheduler online",
+  "dashboard.active": "Active",
+  "dashboard.queued": "Queued",
+  "dashboard.completed": "Completed",
+  "dashboard.failures": "Failures",
+  "dashboard.session": "Session:",
+  "dashboard.prompt": "prompt",
+  "dashboard.completion": "completion",
+
+  // sidebar — tiers
+  "tier.vram": "VRAM",
+  "tier.ram": "RAM",
+  "tier.disk": "Disk",
+  "tier.ariaLabel": "Experts: {{vram}} VRAM, {{ram}} RAM, {{disk}} disk",
+
+  // sidebar — inference
+  "sidebar.inference": "Inference",
+  "sidebar.model": "Model",
+  "sidebar.kvSession": "KV session",
+  "sidebar.kvSessionHelp": "Isolated context · conversation follows the selected slot",
+  "sidebar.sessionLabel": "Session {{slot}}",
+  "sidebar.temperature": "Temperature",
+  "sidebar.maxTokens": "Max output tokens",
+  "sidebar.reasoning": "Reasoning",
+  "sidebar.transport": "OpenAI-compatible transport",
+
+  // top bar
+  "topbar.activeModel": "ACTIVE MODEL",
+  "topbar.tokens": "{{n}} tokens",
+  "topbar.tokPerSec": "{{n}} tok/s",
+  "topbar.slot": "slot {{n}}",
+  "topbar.clear": "Clear",
+
+  // hero / empty state
+  "hero.title": "COLIBRÌ ENGINE",
+  "hero.subtitle": "Ask the giant.",
+  "hero.tagline": "Keep the machine yours.",
+  "hero.description": "Connect to a local colibrì server and stream responses directly from your hardware. Nothing leaves the endpoint you choose.",
+  "prompts.routing": "Explain how expert routing works",
+  "prompts.benchmark": "Write a small C benchmark",
+  "prompts.caching": "Compare RAM and VRAM caching",
+
+  // chat
+  "chat.you": "You",
+  "chat.colibri": "colibrì",
+  "chat.placeholder": "Message colibrì…",
+  "chat.inputHint": "Enter to send · Shift+Enter for newline",
+  "chat.stop": "Stop generation",
+  "chat.send": "Send message",
+
+  // brain
+  "brain.title": "Expert Cortex",
+  "brain.waiting": "waiting for engine",
+  "brain.layers": "{{rows}} layers × {{cols}} experts",
+  "brain.brightnessHint": "brightness = routing heat",
+  "brain.flashHint": "⚡ white flash = routed this turn",
+  "brain.connectHint": "Connect to the engine to see the cortex.",
+  "brain.neverRouted": "never routed",
+  "brain.selections": "~2^{{heat}} selections",
+  "brain.specialist": "⭐ Specialist: {{top}}",
+  "brain.generalist": "Generalist",
+  "brain.mtp": "MTP head — drafts the next token for speculative decoding",
+  "brain.early": "early layers — surface features: tokens, spelling, local syntax",
+  "brain.lowerMiddle": "lower-middle — phrase structure, word relations, simple facts",
+  "brain.upperMiddle": "upper-middle — semantics, long-range context, reasoning steps",
+  "brain.late": "late layers — planning the answer, style, coherence",
+  "brain.final": "final layers — output shaping: picks the actual next-token distribution",
+
+  // profiling
+  "profile.title": "Profiling — where the engine spends each turn",
+  "profile.ioWait": "I/O wait",
+  "profile.expertMatmul": "Expert matmul",
+  "profile.attention": "Attention",
+  "profile.lmHead": "LM head",
+  "profile.other": "Other",
+  "profile.empty": "No profiled turns yet — send a chat message and the breakdown appears here.",
+  "profile.connectHint": "Connect to the engine to collect per-turn timings.",
+  "profile.lastTurn": "Last turn",
+  "profile.wallTime": "Wall time",
+  "profile.batching": "Batching",
+  "profile.tokensPerForward": "tokens / forward",
+  "profile.diskService": "Disk service",
+  "profile.overlapped": "overlapped with compute",
+  "profile.window": "Window · last {{n}} turns",
+  "profile.throughputTitle": "Throughput per turn (tok/s)",
+  "profile.phaseTitle": "Turn wall time by phase (s)",
+  "profile.turnCol": "Turn",
+  "profile.tokensCol": "Tokens",
+  "profile.wallCol": "Wall",
+  "profile.turnsLabel": "{{n}} turns · oldest → newest",
+  "profile.oneTurn": "1 turn",
+  "profile.diskNote": "Disk service is time spent reading experts on I/O threads; it overlaps with compute, so only the I/O wait the compute thread felt counts inside the wall-time stack. With multiple KV sessions the shares describe the whole engine over the turn's window.",
+
+  // error boundary
+  "error.title": "colibrì UI hit an error",
+  "error.hint": "The engine is unaffected. Try refreshing.",
+  "error.retry": "Retry",
+}
+
+export default en
diff --git a/web/src/i18n/index.ts b/web/src/i18n/index.ts
new file mode 100644
index 0000000..1f9bb74
--- /dev/null
+++ b/web/src/i18n/index.ts
@@ -0,0 +1,78 @@
+import { createContext, useContext, useState, useCallback, useMemo, type ReactNode } from "react"
+import { createElement } from "react"
+import en from "./en"
+import zhCN from "./zh-CN"
+import zhTW from "./zh-TW"
+import it from "./it"
+
+const LOCALES = [
+  { code: "en", label: "English" },
+  { code: "zh-CN", label: "简体中文" },
+  { code: "zh-TW", label: "繁體中文" },
+  { code: "it", label: "Italiano" },
+] as const
+
+const DICTS: Record<string, Record<string, string>> = {
+  "en": en,
+  "zh-CN": zhCN,
+  "zh-TW": zhTW,
+  "it": it,
+}
+
+const STORAGE_KEY = "colibri-locale"
+
+function detectLocale(): string {
+  try {
+    const saved = localStorage.getItem(STORAGE_KEY)
+    if (saved && DICTS[saved]) return saved
+  } catch {}
+  const nav = navigator.language || ""
+  if (DICTS[nav]) return nav
+  const prefix = nav.split("-")[0]
+  if (prefix === "zh") return nav.includes("TW") || nav.includes("Hant") ? "zh-TW" : "zh-CN"
+  for (const { code } of LOCALES) if (code.startsWith(prefix)) return code
+  return "en"
+}
+
+function interpolate(template: string, vars?: Record<string, string | number>): string {
+  if (!vars) return template
+  return template.replace(/\{\{(\w+)\}\}/g, (_, key) => String(vars[key] ?? `{{${key}}}`))
+}
+
+interface LocaleContext {
+  locale: string
+  setLocale: (code: string) => void
+  t: (key: string, vars?: Record<string, string | number>) => string
+  locales: readonly { code: string; label: string }[]
+}
+
+const Ctx = createContext<LocaleContext>({
+  locale: "en",
+  setLocale: () => {},
+  t: (key) => key,
+  locales: LOCALES,
+})
+
+export function LocaleProvider({ children }: { children: ReactNode }) {
+  const [locale, setLocaleState] = useState(detectLocale)
+
+  const setLocale = useCallback((code: string) => {
+    if (!DICTS[code]) return
+    setLocaleState(code)
+    try { localStorage.setItem(STORAGE_KEY, code) } catch {}
+  }, [])
+
+  const t = useCallback((key: string, vars?: Record<string, string | number>) => {
+    const dict = DICTS[locale] || en
+    const template = dict[key] ?? en[key] ?? key
+    return interpolate(template, vars)
+  }, [locale])
+
+  const value = useMemo(() => ({ locale, setLocale, t, locales: LOCALES }), [locale, setLocale, t])
+
+  return createElement(Ctx.Provider, { value }, children)
+}
+
+export function useLocale() {
+  return useContext(Ctx)
+}
diff --git a/web/src/i18n/it.ts b/web/src/i18n/it.ts
new file mode 100644
index 0000000..de9fee8
--- /dev/null
+++ b/web/src/i18n/it.ts
@@ -0,0 +1,113 @@
+const it: Record<string, string> = {
+  "nav.chat": "Chat",
+  "nav.brain": "Cervello",
+  "nav.profiling": "Profiling",
+
+  "brand.tagline": "gigante locale, impronta minima",
+
+  "sidebar.connection": "Connessione",
+  "sidebar.endpoint": "Endpoint API",
+  "sidebar.apiKey": "Chiave API",
+  "sidebar.apiKeyPlaceholder": "opzionale",
+  "sidebar.apiKeyHelp": "Conservata solo in memoria · inviata a questo endpoint",
+  "sidebar.probe": "Sonda il server",
+  "status.connected": "Motore raggiungibile",
+  "status.notConnected": "Non connesso",
+  "status.runtimeUnavailable": "Metriche runtime non disponibili",
+  "status.serverError": "Impossibile raggiungere il server.",
+  "status.generationFailed": "Generazione fallita.",
+
+  "sidebar.runtime": "Runtime",
+  "sidebar.runtimeProbe": "Sonda il server per ispezionare lo stato runtime.",
+  "sidebar.schedulerOnline": "Scheduler online",
+  "dashboard.active": "Attive",
+  "dashboard.queued": "In coda",
+  "dashboard.completed": "Completate",
+  "dashboard.failures": "Fallite",
+  "dashboard.session": "Sessione:",
+  "dashboard.prompt": "prompt",
+  "dashboard.completion": "completion",
+
+  "tier.vram": "VRAM",
+  "tier.ram": "RAM",
+  "tier.disk": "Disco",
+  "tier.ariaLabel": "Expert: {{vram}} VRAM, {{ram}} RAM, {{disk}} disco",
+
+  "sidebar.inference": "Inferenza",
+  "sidebar.model": "Modello",
+  "sidebar.kvSession": "Sessione KV",
+  "sidebar.kvSessionHelp": "Contesto isolato · la conversazione segue lo slot selezionato",
+  "sidebar.sessionLabel": "Sessione {{slot}}",
+  "sidebar.temperature": "Temperatura",
+  "sidebar.maxTokens": "Token di output massimi",
+  "sidebar.reasoning": "Ragionamento",
+  "sidebar.transport": "Trasporto compatibile OpenAI",
+
+  "topbar.activeModel": "MODELLO ATTIVO",
+  "topbar.tokens": "{{n}} token",
+  "topbar.tokPerSec": "{{n}} tok/s",
+  "topbar.slot": "slot {{n}}",
+  "topbar.clear": "Pulisci",
+
+  "hero.title": "MOTORE COLIBRÌ",
+  "hero.subtitle": "Interroga il gigante.",
+  "hero.tagline": "La macchina resta tua.",
+  "hero.description": "Connettiti a un server colibrì locale e ricevi le risposte in streaming direttamente dal tuo hardware. Nulla lascia l'endpoint che scegli.",
+  "prompts.routing": "Spiega come funziona il routing degli expert",
+  "prompts.benchmark": "Scrivi un piccolo benchmark in C",
+  "prompts.caching": "Confronta il caching RAM e VRAM",
+
+  "chat.you": "Tu",
+  "chat.colibri": "colibrì",
+  "chat.placeholder": "Scrivi a colibrì…",
+  "chat.inputHint": "Invio per inviare · Shift+Invio per andare a capo",
+  "chat.stop": "Ferma la generazione",
+  "chat.send": "Invia messaggio",
+
+  "brain.title": "Corteccia degli expert",
+  "brain.waiting": "in attesa del motore",
+  "brain.layers": "{{rows}} layer × {{cols}} expert",
+  "brain.brightnessHint": "luminosità = calore di routing",
+  "brain.flashHint": "⚡ flash bianco = instradato in questo turno",
+  "brain.connectHint": "Connettiti al motore per vedere la corteccia.",
+  "brain.neverRouted": "mai instradato",
+  "brain.selections": "~2^{{heat}} selezioni",
+  "brain.specialist": "⭐ Specialista: {{top}}",
+  "brain.generalist": "Generalista",
+  "brain.mtp": "Testa MTP — prepara il prossimo token per la decodifica speculativa",
+  "brain.early": "layer iniziali — caratteristiche superficiali: token, ortografia, sintassi locale",
+  "brain.lowerMiddle": "layer medio-bassi — struttura frasale, relazioni tra parole, fatti semplici",
+  "brain.upperMiddle": "layer medio-alti — semantica, contesto a lungo raggio, passi di ragionamento",
+  "brain.late": "layer avanzati — pianificazione della risposta, stile, coerenza",
+  "brain.final": "layer finali — formazione dell'output: scelta della distribuzione next-token",
+
+  "profile.title": "Profiling — dove il motore spende ogni turno",
+  "profile.ioWait": "Attesa I/O",
+  "profile.expertMatmul": "Matmul expert",
+  "profile.attention": "Attenzione",
+  "profile.lmHead": "LM head",
+  "profile.other": "Altro",
+  "profile.empty": "Nessun turno profilato — invia un messaggio e i dettagli appariranno qui.",
+  "profile.connectHint": "Connettiti al motore per raccogliere i tempi per turno.",
+  "profile.lastTurn": "Ultimo turno",
+  "profile.wallTime": "Tempo totale",
+  "profile.batching": "Batching",
+  "profile.tokensPerForward": "token / forward",
+  "profile.diskService": "Servizio disco",
+  "profile.overlapped": "sovrapposto al calcolo",
+  "profile.window": "Finestra · ultimi {{n}} turni",
+  "profile.throughputTitle": "Throughput per turno (tok/s)",
+  "profile.phaseTitle": "Tempo per turno per fase (s)",
+  "profile.turnCol": "Turno",
+  "profile.tokensCol": "Token",
+  "profile.wallCol": "Totale",
+  "profile.turnsLabel": "{{n}} turni · dal meno al più recente",
+  "profile.oneTurn": "1 turno",
+  "profile.diskNote": "Il servizio disco è il tempo speso a leggere gli expert sui thread I/O; si sovrappone al calcolo, quindi solo l'attesa I/O effettivamente percepita dal thread di calcolo conta nella ripartizione del tempo totale. Con più sessioni KV, le quote descrivono l'intero motore nella finestra del turno.",
+
+  "error.title": "L'interfaccia colibrì ha riscontrato un errore",
+  "error.hint": "Il motore non è stato coinvolto. Prova a ricaricare la pagina.",
+  "error.retry": "Riprova",
+}
+
+export default it
diff --git a/web/src/i18n/zh-CN.ts b/web/src/i18n/zh-CN.ts
new file mode 100644
index 0000000..fc0a42f
--- /dev/null
+++ b/web/src/i18n/zh-CN.ts
@@ -0,0 +1,113 @@
+const zhCN: Record<string, string> = {
+  "nav.chat": "对话",
+  "nav.brain": "大脑",
+  "nav.profiling": "性能分析",
+
+  "brand.tagline": "本地巨人，极小足迹",
+
+  "sidebar.connection": "连接",
+  "sidebar.endpoint": "API 端点",
+  "sidebar.apiKey": "API 密钥",
+  "sidebar.apiKeyPlaceholder": "可选",
+  "sidebar.apiKeyHelp": "仅保存在内存中 · 发送到此端点",
+  "sidebar.probe": "探测服务器",
+  "status.connected": "引擎已连接",
+  "status.notConnected": "未连接",
+  "status.runtimeUnavailable": "运行时指标不可用",
+  "status.serverError": "无法连接到服务器。",
+  "status.generationFailed": "生成失败。",
+
+  "sidebar.runtime": "运行时",
+  "sidebar.runtimeProbe": "探测服务器以查看运行时状态。",
+  "sidebar.schedulerOnline": "调度器在线",
+  "dashboard.active": "活跃",
+  "dashboard.queued": "排队",
+  "dashboard.completed": "已完成",
+  "dashboard.failures": "失败",
+  "dashboard.session": "会话：",
+  "dashboard.prompt": "提示词",
+  "dashboard.completion": "补全",
+
+  "tier.vram": "VRAM",
+  "tier.ram": "RAM",
+  "tier.disk": "磁盘",
+  "tier.ariaLabel": "专家分布：{{vram}} VRAM、{{ram}} RAM、{{disk}} 磁盘",
+
+  "sidebar.inference": "推理",
+  "sidebar.model": "模型",
+  "sidebar.kvSession": "KV 会话",
+  "sidebar.kvSessionHelp": "独立上下文 · 对话跟随所选槽位",
+  "sidebar.sessionLabel": "会话 {{slot}}",
+  "sidebar.temperature": "温度",
+  "sidebar.maxTokens": "最大输出 token 数",
+  "sidebar.reasoning": "推理模式",
+  "sidebar.transport": "OpenAI 兼容协议",
+
+  "topbar.activeModel": "当前模型",
+  "topbar.tokens": "{{n}} tokens",
+  "topbar.tokPerSec": "{{n}} tok/s",
+  "topbar.slot": "槽位 {{n}}",
+  "topbar.clear": "清空",
+
+  "hero.title": "COLIBRÌ 引擎",
+  "hero.subtitle": "向巨人提问。",
+  "hero.tagline": "让机器属于你。",
+  "hero.description": "连接到本地 colibrì 服务器，直接从你的硬件流式获取响应。所有数据都留在你选择的端点内。",
+  "prompts.routing": "解释专家路由是如何工作的",
+  "prompts.benchmark": "写一个简单的 C 基准测试",
+  "prompts.caching": "比较 RAM 和 VRAM 缓存",
+
+  "chat.you": "你",
+  "chat.colibri": "colibrì",
+  "chat.placeholder": "给 colibrì 发消息…",
+  "chat.inputHint": "回车发送 · Shift+回车换行",
+  "chat.stop": "停止生成",
+  "chat.send": "发送消息",
+
+  "brain.title": "专家皮层",
+  "brain.waiting": "等待引擎连接",
+  "brain.layers": "{{rows}} 层 × {{cols}} 专家",
+  "brain.brightnessHint": "亮度 = 路由热度",
+  "brain.flashHint": "⚡ 白色闪烁 = 本轮被路由",
+  "brain.connectHint": "连接引擎以查看皮层。",
+  "brain.neverRouted": "从未被路由",
+  "brain.selections": "约 2^{{heat}} 次选择",
+  "brain.specialist": "⭐ 专精：{{top}}",
+  "brain.generalist": "通用型",
+  "brain.mtp": "MTP 头 — 为投机解码起草下一个 token",
+  "brain.early": "早期层 — 表面特征：token、拼写、局部语法",
+  "brain.lowerMiddle": "中低层 — 短语结构、词语关系、简单事实",
+  "brain.upperMiddle": "中高层 — 语义、长距离上下文、推理步骤",
+  "brain.late": "后期层 — 规划答案、风格、连贯性",
+  "brain.final": "末尾层 — 输出成型：选择实际的 next-token 分布",
+
+  "profile.title": "性能分析 — 引擎每轮的时间花在哪里",
+  "profile.ioWait": "I/O 等待",
+  "profile.expertMatmul": "专家矩阵乘",
+  "profile.attention": "注意力",
+  "profile.lmHead": "LM head",
+  "profile.other": "其他",
+  "profile.empty": "暂无性能数据 — 发送一条消息，分析结果将显示在这里。",
+  "profile.connectHint": "连接引擎以采集每轮耗时。",
+  "profile.lastTurn": "最近一轮",
+  "profile.wallTime": "总耗时",
+  "profile.batching": "批处理",
+  "profile.tokensPerForward": "tokens / 前向",
+  "profile.diskService": "磁盘服务",
+  "profile.overlapped": "与计算重叠",
+  "profile.window": "窗口 · 最近 {{n}} 轮",
+  "profile.throughputTitle": "每轮吞吐量 (tok/s)",
+  "profile.phaseTitle": "每轮各阶段耗时 (s)",
+  "profile.turnCol": "轮次",
+  "profile.tokensCol": "Tokens",
+  "profile.wallCol": "总耗时",
+  "profile.turnsLabel": "{{n}} 轮 · 从旧到新",
+  "profile.oneTurn": "1 轮",
+  "profile.diskNote": "磁盘服务是在 I/O 线程上读取专家的时间；它与计算重叠，因此只有计算线程实际感受到的 I/O 等待 才计入总耗时分解。多 KV 会话时，份额描述的是整个引擎在该轮窗口内的表现。",
+
+  "error.title": "colibrì UI 遇到错误",
+  "error.hint": "引擎不受影响。请尝试刷新页面。",
+  "error.retry": "重试",
+}
+
+export default zhCN
diff --git a/web/src/i18n/zh-TW.ts b/web/src/i18n/zh-TW.ts
new file mode 100644
index 0000000..6435be2
--- /dev/null
+++ b/web/src/i18n/zh-TW.ts
@@ -0,0 +1,113 @@
+const zhTW: Record<string, string> = {
+  "nav.chat": "對話",
+  "nav.brain": "大腦",
+  "nav.profiling": "效能分析",
+
+  "brand.tagline": "本地巨人，極小足跡",
+
+  "sidebar.connection": "連線",
+  "sidebar.endpoint": "API 端點",
+  "sidebar.apiKey": "API 金鑰",
+  "sidebar.apiKeyPlaceholder": "選填",
+  "sidebar.apiKeyHelp": "僅保存在記憶體中 · 傳送到此端點",
+  "sidebar.probe": "探測伺服器",
+  "status.connected": "引擎已連線",
+  "status.notConnected": "未連線",
+  "status.runtimeUnavailable": "執行階段指標不可用",
+  "status.serverError": "無法連線到伺服器。",
+  "status.generationFailed": "生成失敗。",
+
+  "sidebar.runtime": "執行階段",
+  "sidebar.runtimeProbe": "探測伺服器以檢視執行階段狀態。",
+  "sidebar.schedulerOnline": "排程器上線",
+  "dashboard.active": "進行中",
+  "dashboard.queued": "排隊中",
+  "dashboard.completed": "已完成",
+  "dashboard.failures": "失敗",
+  "dashboard.session": "工作階段：",
+  "dashboard.prompt": "提示詞",
+  "dashboard.completion": "補全",
+
+  "tier.vram": "VRAM",
+  "tier.ram": "RAM",
+  "tier.disk": "磁碟",
+  "tier.ariaLabel": "專家分佈：{{vram}} VRAM、{{ram}} RAM、{{disk}} 磁碟",
+
+  "sidebar.inference": "推論",
+  "sidebar.model": "模型",
+  "sidebar.kvSession": "KV 工作階段",
+  "sidebar.kvSessionHelp": "獨立上下文 · 對話跟隨所選插槽",
+  "sidebar.sessionLabel": "工作階段 {{slot}}",
+  "sidebar.temperature": "溫度",
+  "sidebar.maxTokens": "最大輸出 token 數",
+  "sidebar.reasoning": "推理模式",
+  "sidebar.transport": "OpenAI 相容協定",
+
+  "topbar.activeModel": "目前模型",
+  "topbar.tokens": "{{n}} tokens",
+  "topbar.tokPerSec": "{{n}} tok/s",
+  "topbar.slot": "插槽 {{n}}",
+  "topbar.clear": "清除",
+
+  "hero.title": "COLIBRÌ 引擎",
+  "hero.subtitle": "向巨人提問。",
+  "hero.tagline": "讓機器屬於你。",
+  "hero.description": "連線到本地 colibrì 伺服器，直接從你的硬體串流取得回應。所有資料都留在你選擇的端點內。",
+  "prompts.routing": "解釋專家路由如何運作",
+  "prompts.benchmark": "撰寫一個簡單的 C 基準測試",
+  "prompts.caching": "比較 RAM 與 VRAM 快取",
+
+  "chat.you": "你",
+  "chat.colibri": "colibrì",
+  "chat.placeholder": "傳送訊息給 colibrì…",
+  "chat.inputHint": "Enter 傳送 · Shift+Enter 換行",
+  "chat.stop": "停止生成",
+  "chat.send": "傳送訊息",
+
+  "brain.title": "專家皮層",
+  "brain.waiting": "等待引擎連線",
+  "brain.layers": "{{rows}} 層 × {{cols}} 專家",
+  "brain.brightnessHint": "亮度 = 路由熱度",
+  "brain.flashHint": "⚡ 白色閃爍 = 本輪被路由",
+  "brain.connectHint": "連線引擎以檢視皮層。",
+  "brain.neverRouted": "從未被路由",
+  "brain.selections": "約 2^{{heat}} 次選擇",
+  "brain.specialist": "⭐ 專精：{{top}}",
+  "brain.generalist": "通用型",
+  "brain.mtp": "MTP 頭 — 為推測式解碼起草下一個 token",
+  "brain.early": "早期層 — 表面特徵：token、拼寫、局部語法",
+  "brain.lowerMiddle": "中低層 — 片語結構、詞語關係、簡單事實",
+  "brain.upperMiddle": "中高層 — 語意、長距離上下文、推理步驟",
+  "brain.late": "後期層 — 規劃答案、風格、連貫性",
+  "brain.final": "末尾層 — 輸出成型：選擇實際的 next-token 分佈",
+
+  "profile.title": "效能分析 — 引擎每輪的時間花在哪裡",
+  "profile.ioWait": "I/O 等待",
+  "profile.expertMatmul": "專家矩陣乘",
+  "profile.attention": "注意力",
+  "profile.lmHead": "LM head",
+  "profile.other": "其他",
+  "profile.empty": "尚無效能數據 — 傳送一則訊息，分析結果將顯示在這裡。",
+  "profile.connectHint": "連線引擎以採集每輪耗時。",
+  "profile.lastTurn": "最近一輪",
+  "profile.wallTime": "總耗時",
+  "profile.batching": "批次處理",
+  "profile.tokensPerForward": "tokens / 前向",
+  "profile.diskService": "磁碟服務",
+  "profile.overlapped": "與運算重疊",
+  "profile.window": "視窗 · 最近 {{n}} 輪",
+  "profile.throughputTitle": "每輪吞吐量 (tok/s)",
+  "profile.phaseTitle": "每輪各階段耗時 (s)",
+  "profile.turnCol": "輪次",
+  "profile.tokensCol": "Tokens",
+  "profile.wallCol": "總耗時",
+  "profile.turnsLabel": "{{n}} 輪 · 從舊到新",
+  "profile.oneTurn": "1 輪",
+  "profile.diskNote": "磁碟服務是在 I/O 執行緒上讀取專家的時間；它與運算重疊，因此只有運算執行緒實際感受到的 I/O 等待 才計入總耗時分解。多 KV 工作階段時，份額描述的是整個引擎在該輪視窗內的表現。",
+
+  "error.title": "colibrì UI 遇到錯誤",
+  "error.hint": "引擎不受影響。請嘗試重新整理頁面。",
+  "error.retry": "重試",
+}
+
+export default zhTW
diff --git a/web/src/index.css b/web/src/index.css
index 8d777f4..4a98b18 100644
--- a/web/src/index.css
+++ b/web/src/index.css
@@ -64,7 +64,9 @@ button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-
 .toggle-row { display: flex; align-items: center; justify-content: space-between; height: 42px; padding: 0 11px; border: 1px solid var(--border); border-radius: 9px; color: #a9b4b8; background: var(--input); }
 .toggle-row > span { display: flex; align-items: center; gap: 8px; font-size: 11px; font-weight: 600; }.toggle-row.active { border-color: rgba(78,214,165,.35); color: var(--foreground); }
 .toggle-row i { width: 30px; height: 17px; padding: 2px; border-radius: 20px; background: #293136; transition: .2s; }.toggle-row i b { display: block; width: 13px; height: 13px; border-radius: 50%; background: #78858a; transition: .2s; }.toggle-row.active i { background: rgba(78,214,165,.28); }.toggle-row.active i b { transform: translateX(13px); background: var(--primary); }
-.sidebar-foot { margin-top: auto; display: flex; align-items: center; gap: 7px; color: #59666b; font-size: 10px; }
+.sidebar-foot { margin-top: auto; display: flex; flex-direction: column; gap: 6px; color: #59666b; font-size: 10px; }
+.sidebar-foot > div { display: flex; align-items: center; gap: 7px; }
+.locale-switcher select { background: transparent; border: 1px solid var(--border); border-radius: 4px; color: inherit; font-size: 10px; padding: 2px 4px; cursor: pointer; }
 
 .chat-panel { min-width: 0; height: 100vh; display: grid; grid-template-rows: 72px minmax(0, 1fr) auto; }
 .topbar { display: flex; align-items: center; justify-content: space-between; padding: 0 32px; border-bottom: 1px solid var(--border); }
diff --git a/web/src/main.tsx b/web/src/main.tsx
index 9b964f6..894f4f4 100644
--- a/web/src/main.tsx
+++ b/web/src/main.tsx
@@ -2,10 +2,13 @@ import { createRoot } from "react-dom/client"
 
 import App from "./App"
 import { ErrorBoundary } from "./ErrorBoundary"
+import { LocaleProvider } from "./i18n"
 import "./index.css"
 
 createRoot(document.getElementById("root")!).render(
   <ErrorBoundary>
-    <App />
+    <LocaleProvider>
+      <App />
+    </LocaleProvider>
   </ErrorBoundary>,
 )