diff --git a/AGENTS.md b/AGENTS.md
index 41522234..fe42a0cd 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -8,6 +8,8 @@ For detailed subsystem docs, see [docs/index.md](./docs/index.md).
 
 > **The website itself is bilingual too — every indexable page must ship a Simplified Chinese sibling under `/zh`.** See [Chinese Website Pages](#chinese-website-pages-zh--mandatory-for-all-indexable-surfaces) below; a new page, tab, or blog post without its `/zh` version is 🔴 BLOCKING on PR review.
 
+> **Cursor Bugbot re-reviews on EVERY push** — each new commit to a PR can surface new inline comments, including on code an earlier review passed. Before merging, loop until convergence: wait for checks (the Bugbot review is one of the PR checks) → fetch unresolved review comments → fix or answer each with a reply → push → repeat until a push produces no new findings. Branch rules require all review threads resolved before merge, so resolve addressed threads as you go.
+
 ## Project Overview
 
 InferenceX App — Next.js 16 dashboard for ML inference benchmark data. DB-backed with Neon PostgreSQL, React Query for data fetching, D3.js for charts.
@@ -130,12 +132,13 @@ The site ships a hand-authored Simplified Chinese sibling for every indexable pa
 **Every new indexable page, dashboard tab, or blog post MUST ship its Chinese version in the same PR:**
 
 1. **New page** → create `packages/app/src/app/zh/<route>/page.tsx` with fully translated content and metadata. Metadata: `alternates: zhAlternates('<en-path>')` plus `openGraph.locale: ZH_OG_LOCALE`. Switch the English page's `alternates` to `enAlternates('<en-path>')` so both sides carry bidirectional hreflang. Register the route in `ZH_MIRRORED_ROUTES` (`src/lib/i18n.ts`) so the header nav and EN↔中文 toggle link to it, and add it to the sitemap via `localizedPair()` in `src/app/sitemap.ts`.
-2. **New dashboard tab** → add the tab to `ZH_TAB_KEYS`, `TAB_META_ZH`, `TAB_INTRO_ZH`, and `TAB_LABELS_ZH` in `src/lib/tab-meta-zh.ts`, then create `src/app/zh/(dashboard)/<tab>/page.tsx` mirroring the English page with `tabMetadataZh('<tab>')` and a `<ZhTabIntro tab="<tab>" />` block above the chart (the interactive chart UI itself stays English). `tab-meta-zh.test.ts` enforces dictionary completeness.
+2. **New dashboard tab** → add the tab to `ZH_TAB_KEYS`, `TAB_META_ZH`, `TAB_INTRO_ZH`, and `TAB_LABELS_ZH` in `src/lib/tab-meta-zh.ts`, then create `src/app/zh/(dashboard)/<tab>/page.tsx` mirroring the English page with `tabMetadataZh('<tab>')` and a `<ZhTabIntro tab="<tab>" />` block above the chart; the chart's own UI strings must follow rule 5. `tab-meta-zh.test.ts` enforces dictionary completeness.
 3. **New blog post** → the translation `packages/app/content/blog/zh/<same-filename>.mdx` is REQUIRED in the same PR. Translate frontmatter `title`/`subtitle` and the body; keep `date`, `publishDate`, `modifiedDate`, `tags`, and the filename/slug identical (English and Chinese posts pair by filename; visibility gating always follows the English post's `publishDate`). Rewrite internal `/blog/<slug>` links to `/zh/blog/<slug>`; never alter numbers, code blocks, or `<Figure>`/`<JsonLd>` structure. The `/zh/blog` listing, hreflang, and sitemap pick the file up automatically.
 4. **Editing an existing English page or post** → update its Chinese sibling in the same PR. Content drift between languages is a 🔴 BLOCKING review issue.
-5. **Shared UI chrome** (headers, footers, dashboard card titles/descriptions, control labels, buttons, nudges) is localized in place, not duplicated: client components call `useLocale()` (`src/lib/use-locale.ts`) and read from a component-local `STRINGS = { en, zh }` dict; server components take an optional `locale` prop passed from the /zh page. The `en` dict must keep the exact original strings so English pages stay byte-identical. New user-visible chrome strings MUST ship both variants. Chart-internal rendering (D3 axes/tooltips/legend series, CSV export) and data-registry display values (model/GPU/framework/precision names) stay English.
-6. **Compare slug narrative sync**: the per-slug compare pages are mirrored at `/zh/compare/[slug]` and `/zh/compare-per-dollar/[slug]`; their Chinese prose templates live in `src/lib/compare-ssr-zh.ts`, a 1:1 port of the English templates in `compare-ssr.ts`. Any PR that changes the English narrative templates MUST update the zh port in the same commit.
-7. **Intentionally not mirrored** (skip these, or add them to `ZH_MIRRORED_ROUTES` when you do mirror them): `/datasets`, feature-gated tabs (`ai-chart`, `current-inferencex-image`, `feedback`), `feed.xml`/`llms.txt`, and per-post OG images (Chinese posts reuse the English post's OG image — the OG renderer's font has no CJK glyphs).
+5. **ALL user-visible UI strings MUST have a Chinese equivalent** — no carve-outs for "chart internals" or "option labels". This includes: headers/footers, card titles/descriptions, control and filter labels, buttons, toggles (Log Scale, Optimal Only, …), nudges, dropdown OPTION display names (Y-axis metric names, token types, scale modes), searchable-select placeholders ("Search…"), table column headers and action buttons ("Prompts"), modal/drawer chrome, legend footnotes, and empty/loading/error messages. Mechanism: client components call `useLocale()` (`src/lib/use-locale.ts`) and read from a component-local `STRINGS = { en, zh }` dict; server components take an optional `locale` prop passed from the /zh page; registry-defined display names (e.g. `Y_AXIS_METRICS`, legend toggle configs) carry a `labelZh` field resolved through a locale-aware label helper at render time. The `en` values must keep the exact original strings so English pages stay byte-identical.
+6. **What stays English** (only these): brand/product names, hardware SKUs, model/framework/precision names, units (tok/s/user, GB/s, $/M tok), code identifiers and flags — per the translation quality bar — plus DB-stored _content_ (benchmark rows, dataset conversation text, run logs), which is data, not UI.
+7. **Compare slug narrative sync**: the per-slug compare pages are mirrored at `/zh/compare/[slug]` and `/zh/compare-per-dollar/[slug]`; their Chinese prose templates live in `src/lib/compare-ssr-zh.ts`, a 1:1 port of the English templates in `compare-ssr.ts`. Any PR that changes the English narrative templates MUST update the zh port in the same commit.
+8. **Every route gets a /zh sibling — including hidden/feature-gated ones** (`/datasets`, `/ai-chart`, `/current-inferencex-image`, `/feedback`, agentic detail pages). Noindex routes keep their noindex on both sides. The only exceptions: `feed.xml`/`llms.txt` (single-language machine feeds) and per-post OG images (Chinese posts reuse the English post's OG image — the OG renderer's font has no CJK glyphs).
 
 ## Chart Interpolation — TS and Python Helpers MUST Stay in Sync
 
diff --git a/docs/i18n.md b/docs/i18n.md
index 7b7ca0ae..2a6c5dde 100644
--- a/docs/i18n.md
+++ b/docs/i18n.md
@@ -25,6 +25,6 @@ Why the Simplified Chinese site is a hand-authored `/zh` page tree instead of an
 - **Reading time is CJK-aware**: `getReadingTime` counts Han characters at 400 chars/min alongside Latin words at 265 wpm; pure word-splitting counts an entire Chinese paragraph as ~1 "word".
 - **zh OG images reuse the English post meta** — the `next/og` default Satori font has no CJK glyphs, so a Chinese title would render as tofu. Loading a subset CJK font is a known follow-up.
 - **`/zh/inference` canonicalizes to `/zh`**, mirroring the English quirk where `/inference` canonicalizes to `/`.
-- **Shared chrome is localized in place** via `useLocale()` + component-local `STRINGS = { en, zh }` dicts (footer, TabNav, dashboard display headings/labels, nudges, preset cards). The `en` dict keeps the exact original strings so English pages are byte-identical; chart-internal rendering and data-registry display values stay English.
+- **All UI strings are localized in place** via `useLocale()` + component-local `STRINGS = { en, zh }` dicts (footer, TabNav, dashboard display headings/labels, nudges, preset cards, legend toggles, select placeholders), and registry-defined display names (Y-axis metrics, toggle configs) carry `labelZh` fields resolved through locale-aware helpers. The `en` values keep the exact original strings so English pages are byte-identical. Only brand/product/hardware/framework/precision names, units, code identifiers, and DB-stored content stay English.
 - **Compare slug pages are mirrored** at `/zh/compare/[slug]` and `/zh/compare-per-dollar/[slug]`. The Chinese narrative templates live in `compare-ssr-zh.ts` as a 1:1 port of `compare-ssr.ts` (data logic is imported, only sentence templates differ) — the two files must change together.
 - **Sitemap pairs**: `localizedPair()` in `sitemap.ts` emits the EN and zh URL together, both carrying the same `alternates.languages` map. Blog posts without a translation fall back to an English-only entry, so a missing translation degrades gracefully instead of 404-ing crawlers.
diff --git a/packages/app/src/app/datasets/[slug]/page.tsx b/packages/app/src/app/datasets/[slug]/page.tsx
index f32e3fa6..567f5588 100644
--- a/packages/app/src/app/datasets/[slug]/page.tsx
+++ b/packages/app/src/app/datasets/[slug]/page.tsx
@@ -1,6 +1,7 @@
 import type { Metadata } from 'next';
 
 import { DatasetDetail } from '@/components/datasets/dataset-detail';
+import { languageAlternates } from '@/lib/i18n';
 import { SITE_URL } from '@semianalysisai/inferencex-constants';
 
 interface Props {
@@ -14,7 +15,10 @@ export async function generateMetadata({ params }: Props): Promise<Metadata> {
   return {
     title,
     description,
-    alternates: { canonical: `${SITE_URL}/datasets/${slug}` },
+    alternates: {
+      canonical: `${SITE_URL}/datasets/${slug}`,
+      languages: languageAlternates(`/datasets/${slug}`),
+    },
     openGraph: { title: `${title} | InferenceX`, description, url: `${SITE_URL}/datasets/${slug}` },
     twitter: { title: `${title} | InferenceX`, description },
   };
diff --git a/packages/app/src/app/datasets/page.tsx b/packages/app/src/app/datasets/page.tsx
index 7fe46b93..6bd33e43 100644
--- a/packages/app/src/app/datasets/page.tsx
+++ b/packages/app/src/app/datasets/page.tsx
@@ -3,6 +3,7 @@ import type { Metadata } from 'next';
 import { Card } from '@/components/ui/card';
 import { JsonLd } from '@/components/json-ld';
 import { DatasetList } from '@/components/datasets/dataset-list';
+import { enAlternates } from '@/lib/i18n';
 import { SITE_URL } from '@semianalysisai/inferencex-constants';
 
 const DESCRIPTION =
@@ -11,7 +12,7 @@ const DESCRIPTION =
 export const metadata: Metadata = {
   title: 'Agentic Datasets',
   description: DESCRIPTION,
-  alternates: { canonical: `${SITE_URL}/datasets` },
+  alternates: enAlternates('/datasets'),
   openGraph: {
     title: 'Agentic Datasets | InferenceX',
     description: DESCRIPTION,
diff --git a/packages/app/src/app/sitemap.ts b/packages/app/src/app/sitemap.ts
index fbe5d987..03a1072d 100644
--- a/packages/app/src/app/sitemap.ts
+++ b/packages/app/src/app/sitemap.ts
@@ -65,6 +65,7 @@ export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
       changeFrequency: 'daily',
       priority: 0.8,
     }),
+    ...localizedPair('/datasets', { lastModified: now, changeFrequency: 'weekly', priority: 0.6 }),
     ...localizedPair('/blog', { lastModified: now, changeFrequency: 'weekly', priority: 0.8 }),
     ...getAllPosts().flatMap((post) => {
       const entry = {
diff --git a/packages/app/src/app/zh/(dashboard)/ai-chart/page.tsx b/packages/app/src/app/zh/(dashboard)/ai-chart/page.tsx
new file mode 100644
index 00000000..ed980ec8
--- /dev/null
+++ b/packages/app/src/app/zh/(dashboard)/ai-chart/page.tsx
@@ -0,0 +1,16 @@
+import type { Metadata } from 'next';
+
+import AiChartDisplay from '@/components/ai-chart/AiChartDisplay';
+import { ZhTabIntro } from '@/components/zh/zh-tab-intro';
+import { tabMetadataZh } from '@/lib/tab-meta-zh';
+
+export const metadata: Metadata = tabMetadataZh('ai-chart');
+
+export default function ZhAiChartPage() {
+  return (
+    <>
+      <ZhTabIntro tab="ai-chart" />
+      <AiChartDisplay />
+    </>
+  );
+}
diff --git a/packages/app/src/app/zh/(dashboard)/current-inferencex-image/page.tsx b/packages/app/src/app/zh/(dashboard)/current-inferencex-image/page.tsx
new file mode 100644
index 00000000..95690f1e
--- /dev/null
+++ b/packages/app/src/app/zh/(dashboard)/current-inferencex-image/page.tsx
@@ -0,0 +1,16 @@
+import type { Metadata } from 'next';
+
+import { CurrentImageContent } from '@/components/latest-image/latest-image-content';
+import { ZhTabIntro } from '@/components/zh/zh-tab-intro';
+import { tabMetadataZh } from '@/lib/tab-meta-zh';
+
+export const metadata: Metadata = tabMetadataZh('current-inferencex-image');
+
+export default function ZhCurrentInferenceXImagePage() {
+  return (
+    <>
+      <ZhTabIntro tab="current-inferencex-image" />
+      <CurrentImageContent />
+    </>
+  );
+}
diff --git a/packages/app/src/app/zh/(dashboard)/feedback/page.tsx b/packages/app/src/app/zh/(dashboard)/feedback/page.tsx
new file mode 100644
index 00000000..15897853
--- /dev/null
+++ b/packages/app/src/app/zh/(dashboard)/feedback/page.tsx
@@ -0,0 +1,19 @@
+import type { Metadata } from 'next';
+
+import FeedbackViewer from '@/components/feedback-viewer/FeedbackViewer';
+import { ZhTabIntro } from '@/components/zh/zh-tab-intro';
+import { tabMetadataZh } from '@/lib/tab-meta-zh';
+
+export const metadata: Metadata = {
+  ...tabMetadataZh('feedback'),
+  robots: { index: false, follow: false },
+};
+
+export default function ZhFeedbackPage() {
+  return (
+    <>
+      <ZhTabIntro tab="feedback" />
+      <FeedbackViewer />
+    </>
+  );
+}
diff --git a/packages/app/src/app/zh/(dashboard)/inference/agentic/[id]/page.tsx b/packages/app/src/app/zh/(dashboard)/inference/agentic/[id]/page.tsx
new file mode 100644
index 00000000..cffff62e
--- /dev/null
+++ b/packages/app/src/app/zh/(dashboard)/inference/agentic/[id]/page.tsx
@@ -0,0 +1,21 @@
+import type { Metadata } from 'next';
+import { notFound } from 'next/navigation';
+
+import { AgenticPointDetail } from '@/components/inference/agentic-point/agentic-point-detail';
+import { isPersistedBenchmarkId } from '@/lib/benchmark-id';
+
+export const metadata: Metadata = {
+  title: 'Agentic 追踪详情 | InferenceX',
+  robots: { index: false },
+};
+
+export default async function ZhAgenticPointDetailPage({
+  params,
+}: {
+  params: Promise<{ id: string }>;
+}) {
+  const { id } = await params;
+  const numericId = Number(id);
+  if (!isPersistedBenchmarkId(numericId)) notFound();
+  return <AgenticPointDetail id={numericId} />;
+}
diff --git a/packages/app/src/app/zh/datasets/[slug]/conversations/[convId]/page.tsx b/packages/app/src/app/zh/datasets/[slug]/conversations/[convId]/page.tsx
new file mode 100644
index 00000000..cbb99dec
--- /dev/null
+++ b/packages/app/src/app/zh/datasets/[slug]/conversations/[convId]/page.tsx
@@ -0,0 +1,37 @@
+import { Suspense } from 'react';
+import type { Metadata } from 'next';
+
+import { ConversationView } from '@/components/datasets/conversation-view';
+import { SITE_URL } from '@semianalysisai/inferencex-constants';
+
+interface Props {
+  params: Promise<{ slug: string; convId: string }>;
+}
+
+export async function generateMetadata({ params }: Props): Promise<Metadata> {
+  const { slug, convId } = await params;
+  const short = convId.slice(0, 12);
+  const title = `对话 ${short} | ${slug}`;
+  const description = `${slug} agentic trace 数据集中对话 ${short} 的逐轮 token 火焰图（缓存前缀 vs 未缓存 input vs output）。`;
+  return {
+    title,
+    description,
+    alternates: {
+      canonical: `${SITE_URL}/zh/datasets/${slug}/conversations/${encodeURIComponent(convId)}`,
+    },
+    robots: { index: false },
+  };
+}
+
+export default async function ConversationPageZh({ params }: Props) {
+  const { slug, convId } = await params;
+  return (
+    <main className="relative">
+      <div className="container mx-auto px-4 pb-8 lg:px-8">
+        <Suspense>
+          <ConversationView slug={slug} convId={convId} />
+        </Suspense>
+      </div>
+    </main>
+  );
+}
diff --git a/packages/app/src/app/zh/datasets/[slug]/page.tsx b/packages/app/src/app/zh/datasets/[slug]/page.tsx
new file mode 100644
index 00000000..a2aedc09
--- /dev/null
+++ b/packages/app/src/app/zh/datasets/[slug]/page.tsx
@@ -0,0 +1,38 @@
+import type { Metadata } from 'next';
+
+import { DatasetDetail } from '@/components/datasets/dataset-detail';
+import { zhAlternates, ZH_OG_LOCALE } from '@/lib/i18n';
+import { SITE_URL } from '@semianalysisai/inferencex-constants';
+
+interface Props {
+  params: Promise<{ slug: string }>;
+}
+
+export async function generateMetadata({ params }: Props): Promise<Metadata> {
+  const { slug } = await params;
+  const title = `${slug} | Agentic 数据集`;
+  const description = `${slug} agentic trace 数据集的分布、token 统计及逐对话火焰图。`;
+  return {
+    title,
+    description,
+    alternates: zhAlternates(`/datasets/${slug}`),
+    openGraph: {
+      title: `${title} | InferenceX`,
+      description,
+      url: `${SITE_URL}/zh/datasets/${slug}`,
+      locale: ZH_OG_LOCALE,
+    },
+    twitter: { title: `${title} | InferenceX`, description },
+  };
+}
+
+export default async function DatasetDetailPageZh({ params }: Props) {
+  const { slug } = await params;
+  return (
+    <main className="relative">
+      <div className="container mx-auto px-4 pb-8 lg:px-8">
+        <DatasetDetail slug={slug} />
+      </div>
+    </main>
+  );
+}
diff --git a/packages/app/src/app/zh/datasets/page.tsx b/packages/app/src/app/zh/datasets/page.tsx
new file mode 100644
index 00000000..e224ff87
--- /dev/null
+++ b/packages/app/src/app/zh/datasets/page.tsx
@@ -0,0 +1,93 @@
+import type { Metadata } from 'next';
+
+import { Card } from '@/components/ui/card';
+import { JsonLd } from '@/components/json-ld';
+import { DatasetList } from '@/components/datasets/dataset-list';
+import { zhAlternates, ZH_OG_LOCALE, ZH_LANG_TAG } from '@/lib/i18n';
+import { SITE_URL } from '@semianalysisai/inferencex-constants';
+
+const DESCRIPTION =
+  'InferenceX agentic 基准测试所回放的真实 Claude Code 对话 trace——方法论、分布及逐对话火焰图。';
+
+export const metadata: Metadata = {
+  title: 'Agentic 数据集',
+  description: DESCRIPTION,
+  alternates: zhAlternates('/datasets'),
+  openGraph: {
+    title: 'Agentic 数据集 | InferenceX',
+    description: DESCRIPTION,
+    url: `${SITE_URL}/zh/datasets`,
+    locale: ZH_OG_LOCALE,
+  },
+  twitter: { title: 'Agentic 数据集 | InferenceX', description: DESCRIPTION },
+};
+
+const jsonLd = {
+  '@context': 'https://schema.org',
+  '@type': 'CollectionPage',
+  name: 'InferenceX Agentic 数据集',
+  description: DESCRIPTION,
+  url: `${SITE_URL}/zh/datasets`,
+  inLanguage: ZH_LANG_TAG,
+};
+
+export default function DatasetsPageZh() {
+  return (
+    <main className="relative">
+      <JsonLd data={jsonLd} />
+      <div className="container mx-auto flex flex-col gap-6 px-4 pb-8 lg:px-8">
+        <section>
+          <Card>
+            <h1 className="mb-2 text-xl font-semibold text-foreground">Agentic 基准测试数据集</h1>
+            <p className="mb-3 text-sm text-muted-foreground">
+              InferenceX 的 agentic 基准测试并非回放合成 prompt——而是回放真实的 Claude Code
+              编码会话，以<strong>对话 trace</strong>
+              的形式捕获。每条 trace 是一次完整的多轮会话：包括主 agent 的各轮对话及其调用的所有
+              subagent，附带每轮的 input/output token 数以及重建 prefix-cache 复用所需的 64-token
+              KV-cache block hash。这些 trace 在 HuggingFace 上以{' '}
+              <code>semianalysisai/cc-traces-weka-*</code> 公开发布（apache-2.0 协议）。
+            </p>
+
+            <h2 className="mb-1.5 mt-4 text-sm font-semibold text-foreground">Trace 的采集方式</h2>
+            <p className="mb-3 text-sm text-muted-foreground">
+              生产环境中的 Claude Code 会话通过日志代理录制，该代理捕获每个 API 请求的 input 和
+              output token 数、使用的模型、时间指标（TTFT、token 间延迟），以及一组{' '}
+              <code>hash_ids</code>（每个对应请求 input 的一个 64-token KV block）。Subagent
+              调用被归组到其父轮次下。不存储任何 prompt 或 completion 文本——仅保存 token 计数和
+              block hash，因此语料库可共享，同时仍然是忠实的工作负载回放。
+            </p>
+
+            <h2 className="mb-1.5 mt-4 text-sm font-semibold text-foreground">
+              缓存前缀与未缓存后缀
+            </h2>
+            <p className="mb-3 text-sm text-muted-foreground">
+              Agentic 工作负载以 prefix 复用为主：每轮都会重新发送不断增长的对话，因此大部分 input
+              已在前几轮的 KV cache 中。我们精确重建了这一过程。在理想化的无限 cache
+              下按顺序遍历对话，某一轮的<strong>缓存前缀</strong>是其 <code>hash_ids</code>{' '}
+              中已出现过的最长前导序列；其余部分是需要（重新）计算的<strong>未缓存后缀</strong>
+              。每个 block 为 64 个 token；拆分时会限制使缓存 + 未缓存等于该轮的有效
+              input，即使最后一个 block 不完整。Subagent 在 spawn 时针对父 cache
+              的快照运行（其上下文独立，不会合并回父级）。
+            </p>
+
+            <h2 className="mb-1.5 mt-4 text-sm font-semibold text-foreground">数据集变体</h2>
+            <ul className="mb-1 list-disc space-y-1 pl-5 text-sm text-muted-foreground">
+              <li>
+                <strong>full</strong> — 所有捕获的请求，不做修改。
+              </li>
+              <li>
+                <strong>256k</strong> — 丢弃 input + output 超过 256,000 token 的请求，确保每轮都在
+                256k 上下文窗口内（用于在配置 256k 最大上下文的引擎上进行基准测试）。
+              </li>
+            </ul>
+          </Card>
+        </section>
+
+        <section className="flex flex-col gap-3">
+          <h2 className="text-lg font-semibold text-foreground">数据集</h2>
+          <DatasetList />
+        </section>
+      </div>
+    </main>
+  );
+}
diff --git a/packages/app/src/components/ai-chart/AiChartDisplay.tsx b/packages/app/src/components/ai-chart/AiChartDisplay.tsx
index 7b51a3ef..d43d6a06 100644
--- a/packages/app/src/components/ai-chart/AiChartDisplay.tsx
+++ b/packages/app/src/components/ai-chart/AiChartDisplay.tsx
@@ -5,6 +5,7 @@ import { AlertCircle, Eye, EyeOff, Sparkles } from 'lucide-react';
 
 import { track } from '@/lib/analytics';
 import { PROVIDER_OPTIONS, getProviderLabel } from '@/lib/ai-providers';
+import { useLocale } from '@/lib/use-locale';
 import { useAiChart } from '@/hooks/api/use-ai-chart';
 import { Button } from '@/components/ui/button';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
@@ -24,6 +25,37 @@ import type { AiProvider } from './types';
 import { EXAMPLE_PROMPTS } from './example-prompts';
 import AiChartResult from './AiChartResult';
 
+const STRINGS = {
+  en: {
+    title: 'AI Chart Generation',
+    description:
+      'Describe the chart you want in natural language. Your API key is stored in your browser and only used by your selected provider. We never see it.',
+    placeholder: 'Describe the chart you want to see...',
+    enterToGenerate: '+Enter to generate',
+    generating: 'Generating...',
+    generateChart: 'Generate Chart',
+    error: 'Error',
+    tryAgain: 'Try Again',
+    examplePrompts: 'Example prompts',
+    hideKey: 'Hide API key',
+    showKey: 'Show API key',
+  },
+  zh: {
+    title: 'AI 图表生成',
+    description:
+      '用自然语言描述您想要的图表。您的 API 密钥仅存储在浏览器中，只发送给您选择的服务商，我们绝不会读取。',
+    placeholder: '描述您想查看的图表……',
+    enterToGenerate: '+Enter 生成',
+    generating: '生成中……',
+    generateChart: '生成图表',
+    error: '错误',
+    tryAgain: '重试',
+    examplePrompts: '示例提示',
+    hideKey: '隐藏 API 密钥',
+    showKey: '显示 API 密钥',
+  },
+} as const;
+
 export default function AiChartDisplay() {
   const [provider, setProvider] = useState<AiProvider>('openai');
   const [apiKeys, setApiKeys] = useState<Record<AiProvider, string>>({
@@ -35,6 +67,8 @@ export default function AiChartDisplay() {
   const [prompt, setPrompt] = useState('');
   const [showKey, setShowKey] = useState(false);
   const { result, isLoading, error, generate, reset } = useAiChart();
+  const locale = useLocale();
+  const t = STRINGS[locale];
 
   const apiKey = apiKeys[provider];
 
@@ -72,12 +106,9 @@ export default function AiChartDisplay() {
         <CardHeader className="pb-4">
           <CardTitle className="flex items-center gap-2">
             <Sparkles className="size-5" />
-            AI Chart Generation
+            {t.title}
           </CardTitle>
-          <CardDescription>
-            Describe the chart you want in natural language. Your API key is stored in your browser
-            and only used by your selected provider. We never see it.
-          </CardDescription>
+          <CardDescription>{t.description}</CardDescription>
         </CardHeader>
         <CardContent>
           <div className="flex flex-col gap-4 sm:flex-row">
@@ -109,7 +140,7 @@ export default function AiChartDisplay() {
                 type="button"
                 className="text-muted-foreground hover:text-foreground absolute right-2.5 top-1/2 -translate-y-1/2 transition-colors"
                 onClick={() => setShowKey((s) => !s)}
-                aria-label={showKey ? 'Hide API key' : 'Show API key'}
+                aria-label={showKey ? t.hideKey : t.showKey}
               >
                 {showKey ? <EyeOff className="size-4" /> : <Eye className="size-4" />}
               </button>
@@ -117,7 +148,7 @@ export default function AiChartDisplay() {
           </div>
           <div className="mt-4 space-y-2">
             <Textarea
-              placeholder="Describe the chart you want to see..."
+              placeholder={t.placeholder}
               value={prompt}
               onChange={(e) => setPrompt(e.target.value)}
               onKeyDown={handleKeyDown}
@@ -126,13 +157,14 @@ export default function AiChartDisplay() {
             />
             <div className="flex items-center justify-between">
               <span className="text-muted-foreground text-xs">
-                {navigator.userAgent.includes('Mac') ? '⌘' : 'Ctrl'}+Enter to generate
+                {navigator.userAgent.includes('Mac') ? '⌘' : 'Ctrl'}
+                {t.enterToGenerate}
               </span>
               <Button
                 onClick={handleSubmit}
                 disabled={isLoading || !apiKey.trim() || !prompt.trim()}
               >
-                {isLoading ? 'Generating...' : 'Generate Chart'}
+                {isLoading ? t.generating : t.generateChart}
               </Button>
             </div>
           </div>
@@ -156,10 +188,10 @@ export default function AiChartDisplay() {
           <CardContent className="flex items-start gap-3 pt-6">
             <AlertCircle className="text-destructive mt-0.5 size-5 shrink-0" />
             <div>
-              <p className="text-destructive text-sm font-medium">Error</p>
+              <p className="text-destructive text-sm font-medium">{t.error}</p>
               <p className="text-muted-foreground text-sm">{error}</p>
               <Button variant="outline" size="sm" className="mt-2" onClick={reset}>
-                Try Again
+                {t.tryAgain}
               </Button>
             </div>
           </CardContent>
@@ -177,7 +209,7 @@ export default function AiChartDisplay() {
       {/* Example prompts (shown when no result) */}
       {!result && !isLoading && !error && (
         <div className="space-y-3">
-          <h3 className="text-muted-foreground text-sm font-medium">Example prompts</h3>
+          <h3 className="text-muted-foreground text-sm font-medium">{t.examplePrompts}</h3>
           <div className="grid gap-2 sm:grid-cols-2">
             {EXAMPLE_PROMPTS.map((example, i) => (
               <button
diff --git a/packages/app/src/components/datasets/conversation-view.tsx b/packages/app/src/components/datasets/conversation-view.tsx
index 415a430d..71f3098d 100644
--- a/packages/app/src/components/datasets/conversation-view.tsx
+++ b/packages/app/src/components/datasets/conversation-view.tsx
@@ -6,15 +6,51 @@ import { useSearchParams } from 'next/navigation';
 import { Card } from '@/components/ui/card';
 import { TraceFlamegraph } from '@/components/datasets/trace-flamegraph';
 import { useDatasetConversation } from '@/hooks/api/use-datasets';
+import { useLocale } from '@/lib/use-locale';
 import { compact, formatShare } from './format';
 import { Stat } from './stat';
 
+const STRINGS = {
+  en: {
+    loading: 'Loading conversation…',
+    notFound: 'Conversation not found.',
+    backToDataset: 'Back to dataset',
+    breadcrumbDatasets: 'Datasets',
+    breadcrumbConversation: 'conversation',
+    mainTurns: 'Main turns',
+    subagentGroups: 'Subagent groups',
+    input: 'Input',
+    output: 'Output',
+    cached: 'Cached',
+    cachedPct: 'Cached %',
+    flamegraph: 'Flamegraph',
+    flamegraphDesc:
+      'One bar per turn, scaled to the largest turn. Subagent groups are collapsed by default — click a group to expand it. Each bar splits input into cached prefix and uncached suffix, plus generated output. Timestamps are elapsed from conversation start; subagent headers show their full active range. A colored bracket on the left groups requests in the same main-agent or subagent scope whose original execution intervals overlapped (ran in parallel).',
+  },
+  zh: {
+    loading: '正在加载对话…',
+    notFound: '未找到对话。',
+    backToDataset: '返回数据集',
+    breadcrumbDatasets: '数据集',
+    breadcrumbConversation: '对话',
+    mainTurns: '主轮次',
+    subagentGroups: 'Subagent 组',
+    input: '输入',
+    output: '输出',
+    cached: '缓存',
+    cachedPct: '缓存 %',
+    flamegraph: '火焰图',
+    flamegraphDesc:
+      '每轮一条柱状图，按最大轮次缩放。Subagent 组默认折叠——点击组标题可展开。每条柱将输入拆分为缓存前缀和未缓存后缀，加上生成的输出。时间戳为从对话开始的经过时间；subagent 标题显示其完整活动范围。左侧彩色括号将同一主 agent 或 subagent 作用域内原始执行区间重叠（并行运行）的请求分组。',
+  },
+} as const;
+
 export function ConversationView({ slug, convId }: { slug: string; convId: string }) {
   const { data, isLoading, isError } = useDatasetConversation(slug, convId);
+  const locale = useLocale();
+  const t = STRINGS[locale];
+  const prefix = locale === 'zh' ? '/zh' : '';
 
-  // Deep-link target from a request-timeline click: ?raw=<outerIdx> or ?turn=<ti>[&sa=<agentId>].
-  // useSearchParams (not a one-shot window.location read) so the params are
-  // present on the very first client-side navigation, not just after a reload.
   const params = useSearchParams();
   const turnRaw = params.get('turn');
   const sourceRaw = params.get('raw');
@@ -27,16 +63,14 @@ export function ConversationView({ slug, convId }: { slug: string; convId: strin
   };
 
   if (isLoading) {
-    return (
-      <div className="py-12 text-center text-sm text-muted-foreground">Loading conversation…</div>
-    );
+    return <div className="py-12 text-center text-sm text-muted-foreground">{t.loading}</div>;
   }
   if (isError || !data) {
     return (
       <div className="py-12 text-center text-sm text-destructive">
-        Conversation not found.{' '}
-        <Link href={`/datasets/${slug}`} className="text-primary underline">
-          Back to dataset
+        {t.notFound}{' '}
+        <Link href={`${prefix}/datasets/${slug}`} className="text-primary underline">
+          {t.backToDataset}
         </Link>
       </div>
     );
@@ -48,15 +82,15 @@ export function ConversationView({ slug, convId }: { slug: string; convId: strin
     <div className="flex flex-col gap-6">
       <div>
         <div className="mb-1 flex flex-wrap items-center gap-2 text-xs text-muted-foreground">
-          <Link href="/datasets" className="hover:text-foreground">
-            Datasets
+          <Link href={`${prefix}/datasets`} className="hover:text-foreground">
+            {t.breadcrumbDatasets}
           </Link>
           <span>/</span>
-          <Link href={`/datasets/${slug}`} className="hover:text-foreground">
+          <Link href={`${prefix}/datasets/${slug}`} className="hover:text-foreground">
             {slug}
           </Link>
           <span>/</span>
-          <span className="text-foreground">conversation</span>
+          <span className="text-foreground">{t.breadcrumbConversation}</span>
         </div>
         <h1 className="break-all font-mono text-lg font-semibold text-foreground">
           {data.conv_id}
@@ -77,25 +111,18 @@ export function ConversationView({ slug, convId }: { slug: string; convId: strin
 
       <Card className="p-4">
         <dl className="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-6">
-          <Stat label="Main turns" value={String(data.num_turns)} />
-          <Stat label="Subagent groups" value={String(data.num_subagent_groups)} />
-          <Stat label="Input" value={`${compact(data.total_in)} tok`} />
-          <Stat label="Output" value={`${compact(data.total_out)} tok`} />
-          <Stat label="Cached" value={`${compact(data.total_cached)} tok`} />
-          <Stat label="Cached %" value={cachedPct} />
+          <Stat label={t.mainTurns} value={String(data.num_turns)} />
+          <Stat label={t.subagentGroups} value={String(data.num_subagent_groups)} />
+          <Stat label={t.input} value={`${compact(data.total_in)} tok`} />
+          <Stat label={t.output} value={`${compact(data.total_out)} tok`} />
+          <Stat label={t.cached} value={`${compact(data.total_cached)} tok`} />
+          <Stat label={t.cachedPct} value={cachedPct} />
         </dl>
       </Card>
 
       <Card className="p-4">
-        <h2 className="mb-3 text-lg font-semibold text-foreground">Flamegraph</h2>
-        <p className="mb-4 text-xs text-muted-foreground">
-          One bar per turn, scaled to the largest turn. Subagent groups are collapsed by default —
-          click a group to expand it. Each bar splits input into cached prefix and uncached suffix,
-          plus generated output. Timestamps are elapsed from conversation start; subagent headers
-          show their full active range. A colored bracket on the left groups requests in the same
-          main-agent or subagent scope whose original execution intervals overlapped (ran in
-          parallel).
-        </p>
+        <h2 className="mb-3 text-lg font-semibold text-foreground">{t.flamegraph}</h2>
+        <p className="mb-4 text-xs text-muted-foreground">{t.flamegraphDesc}</p>
         <TraceFlamegraph
           structure={data.structure}
           highlightTurn={highlight.turn}
diff --git a/packages/app/src/components/datasets/dataset-detail.tsx b/packages/app/src/components/datasets/dataset-detail.tsx
index 609a4c8f..eb2a1242 100644
--- a/packages/app/src/components/datasets/dataset-detail.tsx
+++ b/packages/app/src/components/datasets/dataset-detail.tsx
@@ -18,23 +18,114 @@ import {
   type ConversationSort,
 } from '@/hooks/api/use-datasets';
 import { track } from '@/lib/analytics';
+import { useLocale } from '@/lib/use-locale';
 import { compact, formatPct, formatShare, perConversation } from './format';
 import { Stat } from './stat';
 
 const PAGE = 50;
 
-const SORTS: { value: ConversationSort; label: string }[] = [
-  { value: 'tokens', label: 'Total input ↓' },
-  { value: 'turns', label: 'Turns ↓' },
-  { value: 'subagents', label: 'Subagent groups ↓' },
-  { value: 'id', label: 'Conversation ID' },
-];
+const STRINGS = {
+  en: {
+    loading: 'Loading dataset…',
+    notFound: 'Dataset not found.',
+    backToDatasets: 'Back to datasets',
+    breadcrumbDatasets: '← Datasets',
+    viewOnHf: 'View on HuggingFace ↗',
+    conversations: 'Conversations',
+    medianReqConvo: 'Median requests / convo',
+    meanReqConvo: 'Mean requests / convo',
+    mainTurns: 'Main turns',
+    medianSubagents: 'Median subagents / trace',
+    meanSubagents: 'Mean subagents / trace',
+    cachedInput: 'Cached input',
+    totalTokens: 'Total tokens',
+    modelMix: 'Model mix (turns)',
+    distributions: 'Distributions',
+    inputTokensPerTurn: 'Input tokens per turn',
+    outputTokensPerTurn: 'Output tokens per turn',
+    uncachedInputPerReq: 'Uncached input tokens per request',
+    turnsPerConvo: 'Turns per conversation',
+    subagentIsl: 'Subagent request ISL',
+    subagentIslSub: 'Inner subagent requests only',
+    subagentOsl: 'Subagent request OSL',
+    subagentOslSub: 'Inner subagent requests only',
+    cachedFraction: 'Cached fraction per turn',
+    searchPlaceholder: 'Search by ID…',
+    sortTokens: 'Total input ↓',
+    sortTurns: 'Turns ↓',
+    sortSubagents: 'Subagent groups ↓',
+    sortId: 'Conversation ID',
+    thConversation: 'Conversation',
+    thTurns: 'Turns',
+    thSubagents: 'Subagents',
+    thInput: 'Input',
+    thOutput: 'Output',
+    thCached: 'Cached',
+    modelSuffix: (n: number) => `${n} model${n === 1 ? '' : 's'}`,
+    noMatch: 'No conversations match.',
+    prev: '← Prev',
+    next: 'Next →',
+    pageOf: (p: number, total: number) => `Page ${p} of ${total}`,
+  },
+  zh: {
+    loading: '正在加载数据集…',
+    notFound: '未找到数据集。',
+    backToDatasets: '返回数据集列表',
+    breadcrumbDatasets: '← 数据集',
+    viewOnHf: '在 HuggingFace 查看 ↗',
+    conversations: '对话数',
+    medianReqConvo: '每对话中位请求数',
+    meanReqConvo: '每对话平均请求数',
+    mainTurns: '主轮次',
+    medianSubagents: '每 trace 中位 subagent 数',
+    meanSubagents: '每 trace 平均 subagent 数',
+    cachedInput: '缓存输入',
+    totalTokens: '总 token 数',
+    modelMix: '模型组合（按轮次）',
+    distributions: '分布',
+    inputTokensPerTurn: '每轮输入 token 数',
+    outputTokensPerTurn: '每轮输出 token 数',
+    uncachedInputPerReq: '每请求未缓存输入 token 数',
+    turnsPerConvo: '每对话轮次数',
+    subagentIsl: 'Subagent 请求 ISL',
+    subagentIslSub: '仅内部 subagent 请求',
+    subagentOsl: 'Subagent 请求 OSL',
+    subagentOslSub: '仅内部 subagent 请求',
+    cachedFraction: '每轮缓存比例',
+    searchPlaceholder: '按 ID 搜索…',
+    sortTokens: '总输入 ↓',
+    sortTurns: '轮次 ↓',
+    sortSubagents: 'Subagent 组 ↓',
+    sortId: '对话 ID',
+    thConversation: '对话',
+    thTurns: '轮次',
+    thSubagents: 'Subagent',
+    thInput: '输入',
+    thOutput: '输出',
+    thCached: '缓存',
+    modelSuffix: (n: number) => `${n} 个模型`,
+    noMatch: '没有匹配的对话。',
+    prev: '← 上一页',
+    next: '下一页 →',
+    pageOf: (p: number, total: number) => `第 ${p} 页，共 ${total} 页`,
+  },
+} as const;
 
 export function DatasetDetail({ slug }: { slug: string }) {
   const { data: dataset, isLoading, isError } = useDataset(slug);
   const [search, setSearch] = useState('');
   const [sort, setSort] = useState<ConversationSort>('tokens');
   const [page, setPage] = useState(0);
+  const locale = useLocale();
+  const t = STRINGS[locale];
+  const prefix = locale === 'zh' ? '/zh' : '';
+
+  const sorts: { value: ConversationSort; label: string }[] = [
+    { value: 'tokens', label: t.sortTokens },
+    { value: 'turns', label: t.sortTurns },
+    { value: 'subagents', label: t.sortSubagents },
+    { value: 'id', label: t.sortId },
+  ];
 
   const { data: convs, isFetching } = useDatasetConversations({
     slug,
@@ -45,14 +136,14 @@ export function DatasetDetail({ slug }: { slug: string }) {
   });
 
   if (isLoading) {
-    return <div className="py-12 text-center text-sm text-muted-foreground">Loading dataset…</div>;
+    return <div className="py-12 text-center text-sm text-muted-foreground">{t.loading}</div>;
   }
   if (isError || !dataset) {
     return (
       <div className="py-12 text-center text-sm text-destructive">
-        Dataset not found.{' '}
-        <Link href="/datasets" className="text-primary underline">
-          Back to datasets
+        {t.notFound}{' '}
+        <Link href={`${prefix}/datasets`} className="text-primary underline">
+          {t.backToDatasets}
         </Link>
       </div>
     );
@@ -68,8 +159,11 @@ export function DatasetDetail({ slug }: { slug: string }) {
       {/* header */}
       <div>
         <div className="mb-1 flex items-center gap-2">
-          <Link href="/datasets" className="text-xs text-muted-foreground hover:text-foreground">
-            ← Datasets
+          <Link
+            href={`${prefix}/datasets`}
+            className="text-xs text-muted-foreground hover:text-foreground"
+          >
+            {t.breadcrumbDatasets}
           </Link>
         </div>
         <div className="flex flex-wrap items-baseline justify-between gap-2">
@@ -86,7 +180,7 @@ export function DatasetDetail({ slug }: { slug: string }) {
                 onClick={() => track('datasets_hf_link_clicked', { slug })}
                 className="text-primary hover:underline"
               >
-                View on HuggingFace ↗
+                {t.viewOnHf}
               </a>
             )}
           </div>
@@ -99,29 +193,18 @@ export function DatasetDetail({ slug }: { slug: string }) {
       {/* summary stats */}
       <Card className="p-4">
         <dl className="grid grid-cols-2 gap-4 sm:grid-cols-4 lg:grid-cols-8">
-          <Stat label="Conversations" value={dataset.conversation_count.toLocaleString()} />
-          <Stat
-            label="Median requests / convo"
-            value={perConversation(s.medianRequestsPerConversation)}
-          />
-          <Stat
-            label="Mean requests / convo"
-            value={perConversation(s.meanRequestsPerConversation)}
-          />
-          <Stat label="Main turns" value={compact(s.mainTurns ?? 0)} />
-          <Stat
-            label="Median subagents / trace"
-            value={perConversation(s.medianSubagentsPerTrace)}
-          />
-          <Stat label="Mean subagents / trace" value={perConversation(s.meanSubagentsPerTrace)} />
-          <Stat label="Cached input" value={formatPct(s.cachedPct)} />
-          <Stat label="Total tokens" value={compact((s.totalIn ?? 0) + (s.totalOut ?? 0))} />
+          <Stat label={t.conversations} value={dataset.conversation_count.toLocaleString()} />
+          <Stat label={t.medianReqConvo} value={perConversation(s.medianRequestsPerConversation)} />
+          <Stat label={t.meanReqConvo} value={perConversation(s.meanRequestsPerConversation)} />
+          <Stat label={t.mainTurns} value={compact(s.mainTurns ?? 0)} />
+          <Stat label={t.medianSubagents} value={perConversation(s.medianSubagentsPerTrace)} />
+          <Stat label={t.meanSubagents} value={perConversation(s.meanSubagentsPerTrace)} />
+          <Stat label={t.cachedInput} value={formatPct(s.cachedPct)} />
+          <Stat label={t.totalTokens} value={compact((s.totalIn ?? 0) + (s.totalOut ?? 0))} />
         </dl>
         {s.modelMix && Object.keys(s.modelMix).length > 0 && (
           <div className="mt-4 border-t border-border/40 pt-3">
-            <div className="mb-1.5 text-xs font-medium text-muted-foreground">
-              Model mix (turns)
-            </div>
+            <div className="mb-1.5 text-xs font-medium text-muted-foreground">{t.modelMix}</div>
             <div className="flex flex-wrap gap-2">
               {Object.entries(s.modelMix)
                 .toSorted((a, b) => b[1] - a[1])
@@ -140,47 +223,47 @@ export function DatasetDetail({ slug }: { slug: string }) {
 
       {/* distribution cards */}
       <section className="flex flex-col gap-3">
-        <h2 className="text-lg font-semibold text-foreground">Distributions</h2>
+        <h2 className="text-lg font-semibold text-foreground">{t.distributions}</h2>
         <div className="grid gap-4 lg:grid-cols-2">
           <DistributionCard
-            title="Input tokens per turn"
+            title={t.inputTokensPerTurn}
             unit="tokens"
             scale="log"
             distribution={cd.inputTokensPerTurn}
           />
           <DistributionCard
-            title="Output tokens per turn"
+            title={t.outputTokensPerTurn}
             unit="tokens"
             scale="log"
             distribution={cd.outputTokensPerTurn}
           />
           <DistributionCard
-            title="Uncached input tokens per request"
+            title={t.uncachedInputPerReq}
             unit="tokens"
             scale="log"
             distribution={cd.uncachedInputTokensPerTurn}
           />
           <DistributionCard
-            title="Turns per conversation"
+            title={t.turnsPerConvo}
             unit="turns"
             distribution={cd.turnsPerConversation}
           />
           <DistributionCard
-            title="Subagent request ISL"
-            subtitle="Inner subagent requests only"
+            title={t.subagentIsl}
+            subtitle={t.subagentIslSub}
             unit="tokens"
             scale="log"
             distribution={cd.subagentInputTokensPerRequest}
           />
           <DistributionCard
-            title="Subagent request OSL"
-            subtitle="Inner subagent requests only"
+            title={t.subagentOsl}
+            subtitle={t.subagentOslSub}
             unit="tokens"
             scale="log"
             distribution={cd.subagentOutputTokensPerRequest}
           />
           <DistributionCard
-            title="Cached fraction per turn"
+            title={t.cachedFraction}
             unit=""
             distribution={cd.cachedFractionPerTurn}
             formatValue={formatPct}
@@ -192,7 +275,7 @@ export function DatasetDetail({ slug }: { slug: string }) {
       <section className="flex flex-col gap-3">
         <div className="flex flex-wrap items-center justify-between gap-3">
           <h2 className="text-lg font-semibold text-foreground">
-            Conversations{' '}
+            {t.conversations}{' '}
             <span className="text-sm font-normal text-muted-foreground">({total})</span>
           </h2>
           <div className="flex items-center gap-2">
@@ -203,7 +286,7 @@ export function DatasetDetail({ slug }: { slug: string }) {
                 setSearch(e.target.value);
                 setPage(0);
               }}
-              placeholder="Search by ID…"
+              placeholder={t.searchPlaceholder}
               className="h-8 w-40 rounded-md border border-border/40 bg-background px-2 text-xs outline-none focus:border-primary"
             />
             <Select
@@ -218,7 +301,7 @@ export function DatasetDetail({ slug }: { slug: string }) {
                 <SelectValue />
               </SelectTrigger>
               <SelectContent>
-                {SORTS.map((o) => (
+                {sorts.map((o) => (
                   <SelectItem key={o.value} value={o.value} className="text-xs">
                     {o.label}
                   </SelectItem>
@@ -232,12 +315,12 @@ export function DatasetDetail({ slug }: { slug: string }) {
           <table className="w-full text-sm">
             <thead className="border-b border-border/40 bg-muted/30 text-xs text-muted-foreground">
               <tr>
-                <th className="px-3 py-2 text-left font-medium">Conversation</th>
-                <th className="px-3 py-2 text-right font-medium">Turns</th>
-                <th className="px-3 py-2 text-right font-medium">Subagents</th>
-                <th className="px-3 py-2 text-right font-medium">Input</th>
-                <th className="px-3 py-2 text-right font-medium">Output</th>
-                <th className="px-3 py-2 text-right font-medium">Cached</th>
+                <th className="px-3 py-2 text-left font-medium">{t.thConversation}</th>
+                <th className="px-3 py-2 text-right font-medium">{t.thTurns}</th>
+                <th className="px-3 py-2 text-right font-medium">{t.thSubagents}</th>
+                <th className="px-3 py-2 text-right font-medium">{t.thInput}</th>
+                <th className="px-3 py-2 text-right font-medium">{t.thOutput}</th>
+                <th className="px-3 py-2 text-right font-medium">{t.thCached}</th>
               </tr>
             </thead>
             <tbody>
@@ -250,7 +333,7 @@ export function DatasetDetail({ slug }: { slug: string }) {
                   >
                     <td className="px-3 py-2">
                       <Link
-                        href={`/datasets/${slug}/conversations/${encodeURIComponent(c.conv_id)}`}
+                        href={`${prefix}/datasets/${slug}/conversations/${encodeURIComponent(c.conv_id)}`}
                         onClick={() => track('datasets_conversation_clicked', { slug })}
                         className="font-mono text-xs text-primary hover:underline"
                       >
@@ -258,7 +341,7 @@ export function DatasetDetail({ slug }: { slug: string }) {
                       </Link>
                       {c.models.length > 0 && (
                         <span className="ml-2 text-[11px] text-muted-foreground">
-                          {c.models.length} model{c.models.length === 1 ? '' : 's'}
+                          {t.modelSuffix(c.models.length)}
                         </span>
                       )}
                     </td>
@@ -275,7 +358,7 @@ export function DatasetDetail({ slug }: { slug: string }) {
               {!isFetching && (convs?.items.length ?? 0) === 0 && (
                 <tr>
                   <td colSpan={6} className="px-3 py-8 text-center text-xs text-muted-foreground">
-                    No conversations match.
+                    {t.noMatch}
                   </td>
                 </tr>
               )}
@@ -295,11 +378,9 @@ export function DatasetDetail({ slug }: { slug: string }) {
               }}
               className="rounded-md border border-border/40 px-2 py-1 hover:bg-accent disabled:opacity-30"
             >
-              ← Prev
+              {t.prev}
             </button>
-            <span className="text-muted-foreground">
-              Page {page + 1} of {pageCount}
-            </span>
+            <span className="text-muted-foreground">{t.pageOf(page + 1, pageCount)}</span>
             <button
               type="button"
               disabled={page >= pageCount - 1}
@@ -310,7 +391,7 @@ export function DatasetDetail({ slug }: { slug: string }) {
               }}
               className="rounded-md border border-border/40 px-2 py-1 hover:bg-accent disabled:opacity-30"
             >
-              Next →
+              {t.next}
             </button>
           </div>
         )}
diff --git a/packages/app/src/components/datasets/dataset-list.tsx b/packages/app/src/components/datasets/dataset-list.tsx
index d85d7eaa..a1886985 100644
--- a/packages/app/src/components/datasets/dataset-list.tsx
+++ b/packages/app/src/components/datasets/dataset-list.tsx
@@ -5,14 +5,48 @@ import Link from 'next/link';
 import { Card } from '@/components/ui/card';
 import { useDatasets, type DatasetRecord } from '@/hooks/api/use-datasets';
 import { track } from '@/lib/analytics';
+import { useLocale } from '@/lib/use-locale';
 import { compact, formatPct, perConversation } from './format';
 
-function DatasetCard({ d }: { d: DatasetRecord }) {
+const STRINGS = {
+  en: {
+    loading: 'Loading datasets…',
+    error: 'Failed to load datasets.',
+    empty: 'No datasets ingested yet.',
+    conversations: 'Conversations',
+    medianReqConvo: 'Median requests / convo',
+    meanReqConvo: 'Mean requests / convo',
+    mainTurns: 'Main turns',
+    subagentGroups: 'Subagent groups',
+    cachedInput: 'Cached input',
+    totalInput: 'Total input',
+    totalOutput: 'Total output',
+    viewDataset: 'View dataset →',
+  },
+  zh: {
+    loading: '正在加载数据集…',
+    error: '数据集加载失败。',
+    empty: '尚未导入数据集。',
+    conversations: '对话数',
+    medianReqConvo: '每对话中位请求数',
+    meanReqConvo: '每对话平均请求数',
+    mainTurns: '主轮次',
+    subagentGroups: 'Subagent 组',
+    cachedInput: '缓存输入',
+    totalInput: '总输入',
+    totalOutput: '总输出',
+    viewDataset: '查看数据集 →',
+  },
+} as const;
+
+function DatasetCard({ d, locale }: { d: DatasetRecord; locale: 'en' | 'zh' }) {
+  const t = STRINGS[locale];
   const s = d.summary ?? {};
   const cachedPct = formatPct(s.cachedPct);
+  const prefix = locale === 'zh' ? '/zh' : '';
   return (
     <Link
-      href={`/datasets/${d.slug}`}
+      href={`${prefix}/datasets/${d.slug}`}
       onClick={() => track('datasets_card_clicked', { slug: d.slug })}
       className="block transition-colors hover:[&_*]:border-primary/40"
     >
@@ -27,22 +61,16 @@ function DatasetCard({ d }: { d: DatasetRecord }) {
           <p className="mb-3 line-clamp-2 text-xs text-muted-foreground">{d.description}</p>
         )}
         <dl className="grid grid-cols-2 gap-x-4 gap-y-1.5 text-xs">
-          <Stat label="Conversations" value={d.conversation_count.toLocaleString()} />
-          <Stat
-            label="Median requests / convo"
-            value={perConversation(s.medianRequestsPerConversation)}
-          />
-          <Stat
-            label="Mean requests / convo"
-            value={perConversation(s.meanRequestsPerConversation)}
-          />
-          <Stat label="Main turns" value={compact(s.mainTurns ?? 0)} />
-          <Stat label="Subagent groups" value={compact(s.subagentGroups ?? 0)} />
-          <Stat label="Cached input" value={cachedPct} />
-          <Stat label="Total input" value={`${compact(s.totalIn ?? 0)} tok`} />
-          <Stat label="Total output" value={`${compact(s.totalOut ?? 0)} tok`} />
+          <Stat label={t.conversations} value={d.conversation_count.toLocaleString()} />
+          <Stat label={t.medianReqConvo} value={perConversation(s.medianRequestsPerConversation)} />
+          <Stat label={t.meanReqConvo} value={perConversation(s.meanRequestsPerConversation)} />
+          <Stat label={t.mainTurns} value={compact(s.mainTurns ?? 0)} />
+          <Stat label={t.subagentGroups} value={compact(s.subagentGroups ?? 0)} />
+          <Stat label={t.cachedInput} value={cachedPct} />
+          <Stat label={t.totalInput} value={`${compact(s.totalIn ?? 0)} tok`} />
+          <Stat label={t.totalOutput} value={`${compact(s.totalOut ?? 0)} tok`} />
         </dl>
-        <div className="mt-3 text-xs font-medium text-primary">View dataset →</div>
+        <div className="mt-3 text-xs font-medium text-primary">{t.viewDataset}</div>
       </Card>
     </Link>
   );
@@ -59,27 +87,23 @@ function Stat({ label, value }: { label: string; value: string }) {
 
 export function DatasetList() {
   const { data, isLoading, isError } = useDatasets();
+  const locale = useLocale();
+  const t = STRINGS[locale];
 
   if (isLoading) {
-    return <div className="py-12 text-center text-sm text-muted-foreground">Loading datasets…</div>;
+    return <div className="py-12 text-center text-sm text-muted-foreground">{t.loading}</div>;
   }
   if (isError || !data) {
-    return (
-      <div className="py-12 text-center text-sm text-destructive">Failed to load datasets.</div>
-    );
+    return <div className="py-12 text-center text-sm text-destructive">{t.error}</div>;
   }
   if (data.length === 0) {
-    return (
-      <div className="py-12 text-center text-sm text-muted-foreground">
-        No datasets ingested yet.
-      </div>
-    );
+    return <div className="py-12 text-center text-sm text-muted-foreground">{t.empty}</div>;
   }
 
   return (
     <div className="grid gap-4 sm:grid-cols-2">
       {data.map((d) => (
-        <DatasetCard key={d.id} d={d} />
+        <DatasetCard key={d.id} d={d} locale={locale} />
       ))}
     </div>
   );
diff --git a/packages/app/src/components/datasets/distribution-card.tsx b/packages/app/src/components/datasets/distribution-card.tsx
index 8adc02ee..d0cfe30f 100644
--- a/packages/app/src/components/datasets/distribution-card.tsx
+++ b/packages/app/src/components/datasets/distribution-card.tsx
@@ -5,15 +5,30 @@ import { useMemo } from 'react';
 import { Card } from '@/components/ui/card';
 import { ChartHover, type HoverItem } from '@/components/inference/agentic-point/chart-hover';
 import type { Distribution } from '@/hooks/api/use-datasets';
+import { useLocale } from '@/lib/use-locale';
 import { compact } from './format';
 
+const STRINGS = {
+  en: {
+    noData: 'No data',
+    logScale: 'log scale',
+    range: 'Range',
+    count: 'Count',
+  },
+  zh: {
+    noData: '暂无数据',
+    logScale: '对数刻度',
+    range: '范围',
+    count: '数量',
+  },
+} as const;
+
 interface DistributionCardProps {
   title: string;
   subtitle?: string;
   unit: string;
   distribution?: Distribution;
   scale?: 'log' | 'linear';
-  /** Format the x value (defaults to compact). e.g. percent for cached fraction. */
   formatValue?: (v: number) => string;
 }
 
@@ -21,12 +36,6 @@ const W = 720;
 const H = 240;
 const PAD = { top: 12, right: 16, bottom: 48, left: 52 };
 
-/**
- * Renders a precomputed histogram (bins + stats from datasets.chart_data) as a
- * themeable bar chart with p50/p75/p90/p95 guide lines and a hover tooltip. Bars are
- * drawn at equal visual width; for log-scaled bins the edge labels are already
- * log-spaced so the shape reads as a log histogram.
- */
 export function DistributionCard({
   title,
   subtitle,
@@ -35,6 +44,9 @@ export function DistributionCard({
   scale = 'linear',
   formatValue = compact,
 }: DistributionCardProps) {
+  const locale = useLocale();
+  const t = STRINGS[locale];
+
   const computed = useMemo(() => {
     const bins = distribution?.bins ?? [];
     if (bins.length === 0) return null;
@@ -43,9 +55,6 @@ export function DistributionCard({
     const innerH = H - PAD.top - PAD.bottom;
     const n = bins.length;
     const barW = innerW / n;
-    // Map a data value to an x pixel by locating its bin (positional — works for
-    // both linear and log bins since the edges are precomputed at ingest).
-    // Out-of-range values clamp to the first/last bin.
     const valueToX = (v: number): number => {
       for (let i = 0; i < n; i++) {
         if (v >= bins[i].x0 && (v < bins[i].x1 || i === n - 1)) {
@@ -63,7 +72,7 @@ export function DistributionCard({
       <Card className="p-4">
         <div className="mb-1 text-sm font-medium text-foreground">{title}</div>
         <div className="grid h-[240px] place-items-center text-xs text-muted-foreground">
-          No data
+          {t.noData}
         </div>
       </Card>
     );
@@ -85,7 +94,6 @@ export function DistributionCard({
       ]
     : [];
 
-  // X tick labels from a few bin edges.
   const tickIdxs = [0, Math.floor(n / 3), Math.floor((2 * n) / 3), n - 1];
 
   const resolve = (fraction: number) => {
@@ -94,10 +102,10 @@ export function DistributionCard({
     const items: HoverItem[] = [
       {
         color: 'currentColor',
-        label: 'Range',
+        label: t.range,
         value: `${formatValue(b.x0)}–${formatValue(b.x1)} ${unit}`,
       },
-      { color: 'currentColor', label: 'Count', value: b.count.toLocaleString() },
+      { color: 'currentColor', label: t.count, value: b.count.toLocaleString() },
     ];
     return { items };
   };
@@ -108,7 +116,7 @@ export function DistributionCard({
         <span className="text-sm font-medium text-foreground">{title}</span>
         {scale === 'log' && (
           <span className="text-[10px] uppercase tracking-wide text-muted-foreground">
-            log scale
+            {t.logScale}
           </span>
         )}
       </div>
diff --git a/packages/app/src/components/datasets/trace-flamegraph.tsx b/packages/app/src/components/datasets/trace-flamegraph.tsx
index d63cc691..b6a76460 100644
--- a/packages/app/src/components/datasets/trace-flamegraph.tsx
+++ b/packages/app/src/components/datasets/trace-flamegraph.tsx
@@ -5,6 +5,7 @@ import { createPortal } from 'react-dom';
 
 import type { ConversationStructure } from '@/hooks/api/use-datasets';
 import { track } from '@/lib/analytics';
+import { useLocale } from '@/lib/use-locale';
 import { compact, formatShare } from './format';
 import {
   buildRowOverlaps,
@@ -17,8 +18,6 @@ import {
   type VisibleRow,
 } from './trace-flamegraph-model';
 
-// Pure logic lives in trace-flamegraph-model.ts; re-exported here so this file
-// stays the module entry point for the flamegraph's public API.
 export {
   findRequestOverlapGroups,
   formatElapsedTime,
@@ -31,23 +30,41 @@ export type {
   TimedRequest,
 } from './trace-flamegraph-model';
 
-// Stacked-bar segment colors. Cached prefix vs uncached input vs output —
-// fixed hues (theme-independent) so the meaning is stable in light/dark.
 const SEG = {
-  cached: '#10b981', // emerald-500 — input served from prefix cache
-  uncached: '#f59e0b', // amber-500 — input that must be (re)computed
-  output: '#8b5cf6', // violet-500 — generated tokens
+  cached: '#10b981',
+  uncached: '#f59e0b',
+  output: '#8b5cf6',
 } as const;
 
-const LEGEND = [
-  { key: 'cached', label: 'Cached prefix', color: SEG.cached },
-  { key: 'uncached', label: 'Uncached input', color: SEG.uncached },
-  { key: 'output', label: 'Output', color: SEG.output },
-] as const;
+const STRINGS = {
+  en: {
+    cachedPrefix: 'Cached prefix',
+    uncachedInput: 'Uncached input',
+    output: 'Output',
+    parallelBracket: 'Bracketed rows ran in parallel',
+    expandAll: 'Expand all',
+    collapseAll: 'Collapse all',
+    denseParallel: (max: number, overflow: number) =>
+      `Dense parallel region — bracket lanes capped at ${max}; ${overflow} further overlapping ${overflow === 1 ? 'group is' : 'groups are'} folded into the last lane.`,
+    cachedPct: 'Cached %',
+    fromStart: 'From start',
+    parallelWith: (n: number) => `Ran in parallel with ${n} other request${n === 1 ? '' : 's'}`,
+  },
+  zh: {
+    cachedPrefix: '缓存前缀',
+    uncachedInput: '未缓存输入',
+    output: '输出',
+    parallelBracket: '括号内行并行运行',
+    expandAll: '全部展开',
+    collapseAll: '全部折叠',
+    denseParallel: (max: number, overflow: number) =>
+      `密集并行区域——括号通道上限 ${max}；另有 ${overflow} 个重叠组折叠到最后通道。`,
+    cachedPct: '缓存 %',
+    fromStart: '距开始',
+    parallelWith: (n: number) => `与另外 ${n} 个请求并行运行`,
+  },
+} as const;
 
-// Width (px) of one parallel-group bracket lane in the left gutter. Overlapping
-// groups (non-transitive chains) get their own lane so their brackets sit
-// side-by-side instead of stacking visually.
 const LANE_W = 14;
 
 interface TooltipState {
@@ -56,12 +73,6 @@ interface TooltipState {
   row: VisibleRow;
 }
 
-/**
- * Per-conversation flamegraph driven by the precomputed `structure` JSONB.
- * One row per turn; subagent groups render a collapsible header with indented
- * children (collapsed by default). Each bar stacks cached-prefix + uncached
- * input + output, scaled to the widest visible turn.
- */
 export function TraceFlamegraph({
   structure,
   highlightTurn,
@@ -70,19 +81,21 @@ export function TraceFlamegraph({
   highlightAgentId,
 }: {
   structure: ConversationStructure;
-  /** Turn index to scroll to / highlight (from a request-timeline deep link). */
   highlightTurn?: number | null;
-  /** Raw Weka top-level request index to scroll to / highlight. */
   highlightRawIndex?: number | null;
-  /** Raw Weka nested request index under highlightRawIndex, for subagent children. */
   highlightInnerIndex?: number | null;
-  /** Subagent id when the highlighted turn is inside a subagent group. */
   highlightAgentId?: string | null;
 }) {
   const nodes = structure.nodes;
+  const locale = useLocale();
+  const t = STRINGS[locale];
+
+  const LEGEND = [
+    { key: 'cached', label: t.cachedPrefix, color: SEG.cached },
+    { key: 'uncached', label: t.uncachedInput, color: SEG.uncached },
+    { key: 'output', label: t.output, color: SEG.output },
+  ] as const;
 
-  // Resolve the deep-link target to a row key (+ the group that must be open to
-  // show it). See resolveDeepLinkTarget for the matching rules.
   const target = useMemo(
     () =>
       resolveDeepLinkTarget(nodes, {
@@ -94,28 +107,17 @@ export function TraceFlamegraph({
     [nodes, highlightTurn, highlightRawIndex, highlightInnerIndex, highlightAgentId],
   );
 
-  // Subagent groups collapsed by default — except the deep-link target's group.
   const [expanded, setExpanded] = useState<Set<number>>(() =>
     typeof target?.expandGroup === 'number' ? new Set([target.expandGroup]) : new Set(),
   );
   const [tooltip, setTooltip] = useState<TooltipState | null>(null);
   const scrollRef = useRef<HTMLDivElement>(null);
 
-  // Portal target only exists after mount (the tooltip is portaled to body so
-  // its position:fixed is viewport-relative, immune to ancestor transforms).
   const [mounted, setMounted] = useState(false);
   useEffect(() => setMounted(true), []);
 
-  // The deep-link target row gets a state-driven highlight (ring + bg flash)
-  // that fades out — state-driven so a re-render can't clobber it, and so the
-  // fade is a real CSS transition rather than an abrupt classList removal.
   const [highlightKey, setHighlightKey] = useState<string | null>(target?.rowKey ?? null);
 
-  // When the deep-link target resolves/changes: expand its subagent group, then
-  // (after the row renders) scroll it into view and flash the highlight. Runs on
-  // first load and on any later target change (e.g. clicking another bar into
-  // the same conversation). The row query/scroll is deferred to the next frame
-  // so the just-expanded child row exists in the DOM.
   useEffect(() => {
     if (!target) return;
     if (typeof target.expandGroup === 'number') {
@@ -128,10 +130,10 @@ export function TraceFlamegraph({
         ?.querySelector<HTMLElement>(`[data-rowkey="${target.rowKey}"]`)
         ?.scrollIntoView({ block: 'center', behavior: 'smooth' });
     });
-    const t = setTimeout(() => setHighlightKey(null), 2200);
+    const tm = setTimeout(() => setHighlightKey(null), 2200);
     return () => {
       cancelAnimationFrame(raf);
-      clearTimeout(t);
+      clearTimeout(tm);
     };
   }, [target]);
 
@@ -162,11 +164,6 @@ export function TraceFlamegraph({
     [nodes, expanded, overlapsByRow],
   );
 
-  // Two scales: leaf turns/subturns share a per-turn axis (the primary signal —
-  // how cached/uncached evolves), while subagent group headers carry aggregates
-  // orders of magnitude larger, so they get their own axis to stay comparable to
-  // each other. Group bars render slim + muted, so the mixed scale reads as a
-  // distinct "group summary" track rather than a contradiction.
   const maxTotal = useMemo(
     () => Math.max(1, ...rows.filter((r) => !r.isGroup).map((r) => r.total)),
     [rows],
@@ -200,7 +197,7 @@ export function TraceFlamegraph({
               className="inline-block h-4 w-2 rounded-l-sm border-y-2 border-l-2"
               style={{ borderColor: OVERLAP_COLORS[0] }}
             />
-            <span className="text-muted-foreground">Bracketed rows ran in parallel</span>
+            <span className="text-muted-foreground">{t.parallelBracket}</span>
           </span>
         </div>
         {groupIndexes.length > 0 && (
@@ -213,7 +210,7 @@ export function TraceFlamegraph({
               }}
               className="rounded-md border border-border/40 px-2 py-1 text-xs hover:bg-accent"
             >
-              Expand all
+              {t.expandAll}
             </button>
             <button
               type="button"
@@ -223,7 +220,7 @@ export function TraceFlamegraph({
               }}
               className="rounded-md border border-border/40 px-2 py-1 text-xs hover:bg-accent"
             >
-              Collapse all
+              {t.collapseAll}
             </button>
           </div>
         )}
@@ -231,9 +228,7 @@ export function TraceFlamegraph({
 
       {braces.overflowLanes > 0 && (
         <p className="mb-2 text-[11px] text-muted-foreground">
-          Dense parallel region — bracket lanes capped at {MAX_LANES}; {braces.overflowLanes}{' '}
-          further overlapping {braces.overflowLanes === 1 ? 'group is' : 'groups are'} folded into
-          the last lane.
+          {t.denseParallel(MAX_LANES, braces.overflowLanes)}
         </p>
       )}
 
@@ -241,12 +236,8 @@ export function TraceFlamegraph({
         ref={scrollRef}
         className="max-h-[520px] overflow-y-auto overflow-x-hidden rounded-md border border-border/40 bg-muted/10 p-2"
       >
-        {/* gap-0 so the per-row bracket segments connect into a continuous
-            vertical rail across the rows of a parallel group. */}
         <div className="flex flex-col gap-0">
           {rows.map((row, idx) => {
-            // Group headers use the group axis; turns/subturns use the per-turn
-            // axis. Clamp to the track width either way.
             const denom = row.isGroup ? maxGroupTotal : maxTotal;
             const widthPct = Math.min(100, Math.max(0.5, (row.total / denom) * 100));
             const cw = row.total > 0 ? (row.cached / row.total) * 100 : 0;
@@ -262,11 +253,6 @@ export function TraceFlamegraph({
                   isHighlighted ? 'bg-primary/20 ring-2 ring-primary' : 'ring-0'
                 }`}
               >
-                {/* Parallel-group bracket gutter (only rendered when the
-                    conversation has any overlaps, so non-overlap traces keep a
-                    flush-left layout with no dead space). Segments are sparse and
-                    absolutely positioned per lane so a row only pays for the
-                    lanes it actually touches. */}
                 {braces.laneCount > 0 && (
                   <div
                     className="relative shrink-0 self-stretch"
@@ -288,13 +274,10 @@ export function TraceFlamegraph({
                             : {})}
                           title={
                             seg.isMember
-                              ? `Ran in parallel with ${seg.peerCount} other request${
-                                  seg.peerCount === 1 ? '' : 's'
-                                } (+${formatElapsedTime(seg.startS)}–${formatElapsedTime(seg.endS)})`
+                              ? `${t.parallelWith(seg.peerCount)} (+${formatElapsedTime(seg.startS)}–${formatElapsedTime(seg.endS)})`
                               : undefined
                           }
                         >
-                          {/* vertical rail */}
                           <div
                             className="absolute"
                             style={{
@@ -308,7 +291,6 @@ export function TraceFlamegraph({
                               borderBottomLeftRadius: seg.role === 'last' ? 3 : 0,
                             }}
                           />
-                          {/* right-pointing tick marking an actual member row */}
                           {seg.isMember && (
                             <div
                               className="absolute"
@@ -328,12 +310,10 @@ export function TraceFlamegraph({
                   </div>
                 )}
 
-                {/* row content (indented for subagent children) */}
                 <div
                   className="flex flex-1 items-center gap-2 py-0.5"
                   style={{ paddingLeft: row.indent * 20 }}
                 >
-                  {/* label / group toggle */}
                   <div className="flex w-52 shrink-0 items-center overflow-hidden">
                     {row.isGroup ? (
                       <button
@@ -356,7 +336,6 @@ export function TraceFlamegraph({
                     )}
                   </div>
 
-                  {/* Original interval, measured from conversation start. */}
                   <div
                     className="w-36 shrink-0 text-[11px] tabular-nums text-muted-foreground"
                     data-testid={`flamegraph-time-${row.key}`}
@@ -364,8 +343,6 @@ export function TraceFlamegraph({
                     {row.timeLabel ?? '—'}
                   </div>
 
-                  {/* stacked bar — group headers render as a slim muted summary
-                      strip so they read as aggregates, not individual turns. */}
                   <div
                     className="relative flex h-5 flex-1 items-center"
                     onMouseMove={(e) => onMove(e, row)}
@@ -383,7 +360,6 @@ export function TraceFlamegraph({
                     </div>
                   </div>
 
-                  {/* total */}
                   <div className="w-16 shrink-0 text-right text-[11px] tabular-nums text-muted-foreground">
                     {compact(row.total)}
                   </div>
@@ -410,23 +386,23 @@ export function TraceFlamegraph({
               ) : null}
             </div>
             <div className="grid grid-cols-[auto_auto] gap-x-3 gap-y-0.5 text-muted-foreground">
-              <span style={{ color: SEG.cached }}>Cached prefix</span>
+              <span style={{ color: SEG.cached }}>{t.cachedPrefix}</span>
               <span className="text-right tabular-nums text-foreground">
                 {compact(tooltip.row.cached)}
               </span>
-              <span style={{ color: SEG.uncached }}>Uncached input</span>
+              <span style={{ color: SEG.uncached }}>{t.uncachedInput}</span>
               <span className="text-right tabular-nums text-foreground">
                 {compact(tooltip.row.uncached)}
               </span>
-              <span style={{ color: SEG.output }}>Output</span>
+              <span style={{ color: SEG.output }}>{t.output}</span>
               <span className="text-right tabular-nums text-foreground">
                 {compact(tooltip.row.output)}
               </span>
-              <span>Cached %</span>
+              <span>{t.cachedPct}</span>
               <span className="text-right tabular-nums text-foreground">
                 {formatShare(tooltip.row.cached, tooltip.row.cached + tooltip.row.uncached)}
               </span>
-              <span>From start</span>
+              <span>{t.fromStart}</span>
               <span className="text-right tabular-nums text-foreground">
                 {tooltip.row.timeLabel ?? '—'}
               </span>
diff --git a/packages/app/src/components/evaluation/ui/BarChartD3.tsx b/packages/app/src/components/evaluation/ui/BarChartD3.tsx
index b86aa465..d3814657 100644
--- a/packages/app/src/components/evaluation/ui/BarChartD3.tsx
+++ b/packages/app/src/components/evaluation/ui/BarChartD3.tsx
@@ -20,6 +20,7 @@ import {
   getChartWatermark,
   getPrecisionLabel,
 } from '@/lib/data-mappings';
+import { useLocale } from '@/lib/use-locale';
 import ChartLegend from '@/components/ui/chart-legend';
 import { Skeleton } from '@/components/ui/skeleton';
 import { useUnofficialRun } from '@/components/unofficial-run-provider';
@@ -132,6 +133,19 @@ function formatYAxisLabels(axisGroup: d3.Selection<SVGGElement, unknown, null, u
   });
 }
 
+const EVAL_STRINGS = {
+  en: {
+    showLabels: 'Show Labels',
+    highContrast: 'High Contrast',
+    resetFilter: 'Reset filter',
+  },
+  zh: {
+    showLabels: '显示标签',
+    highContrast: '高对比度',
+    resetFilter: '重置筛选',
+  },
+} as const;
+
 export default function EvalBarChartD3({ caption }: { caption?: ReactNode }) {
   const {
     loading,
@@ -157,6 +171,8 @@ export default function EvalBarChartD3({ caption }: { caption?: ReactNode }) {
     setIsLegendExpanded,
     modelHasEvalData,
   } = useEvaluation();
+  const locale = useLocale();
+  const legendT = EVAL_STRINGS[locale];
   const {
     isUnofficialRun,
     unofficialRunInfo,
@@ -916,7 +932,7 @@ export default function EvalBarChartD3({ caption }: { caption?: ReactNode }) {
           switches={[
             {
               id: 'eval-show-labels',
-              label: 'Show Labels',
+              label: legendT.showLabels,
               checked: showLabels,
               onCheckedChange: (checked) => {
                 setShowLabels(checked);
@@ -925,7 +941,7 @@ export default function EvalBarChartD3({ caption }: { caption?: ReactNode }) {
             },
             {
               id: 'eval-high-contrast',
-              label: 'High Contrast',
+              label: legendT.highContrast,
               checked: highContrast,
               onCheckedChange: (checked) => {
                 setHighContrast(checked);
@@ -939,7 +955,7 @@ export default function EvalBarChartD3({ caption }: { caption?: ReactNode }) {
               ? [
                   {
                     id: 'eval-reset-filter',
-                    label: 'Reset filter',
+                    label: legendT.resetFilter,
                     onClick: () => {
                       selectAllHwTypes();
                       setLocalOfficialOverride(null);
diff --git a/packages/app/src/components/evaluation/ui/EvalSamplesDrawer.tsx b/packages/app/src/components/evaluation/ui/EvalSamplesDrawer.tsx
index 76397af6..da5b0b4d 100644
--- a/packages/app/src/components/evaluation/ui/EvalSamplesDrawer.tsx
+++ b/packages/app/src/components/evaluation/ui/EvalSamplesDrawer.tsx
@@ -8,9 +8,74 @@ import { Dialog, DialogContent, DialogTitle } from '@/components/ui/dialog';
 import { useEvalSamples } from '@/hooks/api/use-eval-samples';
 import { track } from '@/lib/analytics';
 import type { EvalSamplesFilter, EvalSamplesLiveContext } from '@/lib/api';
+import { useLocale } from '@/lib/use-locale';
 
 const PAGE_SIZE = 50;
 
+const STRINGS = {
+  en: {
+    score: 'score',
+    filterAll: 'All',
+    filterPassed: 'Passed',
+    filterFailed: 'Failed',
+    searchPlaceholder: 'Search prompt / response...',
+    searchAriaLabel: 'Search samples on this page',
+    liveUnavailable:
+      "Per-sample data isn't available for this unofficial run — the workflow URL is missing or malformed.",
+    unofficialNotice:
+      'Unofficial run — samples are streamed live from the workflow artifact. Loads may take a few seconds.',
+    loading: 'Loading samples…',
+    loadError: (err: string) => `Failed to load samples: ${err}`,
+    noData:
+      'No per-sample data available for this run yet. (Older runs may not have been re-ingested with samples enabled.)',
+    noMatch: (query: string) => `No samples on this page match “${query}”.`,
+    noPrompt: '(no prompt)',
+    prompt: 'Prompt',
+    fullModelOutput: 'Full model output',
+    target: 'Target',
+    extractedAnswer: 'Extracted answer',
+    modelResponse: 'Model response',
+    metrics: 'Metrics',
+    empty: '(empty)',
+    fewShotExamples: (count: number) => `Few-shot examples (${count})`,
+    exampleQuestion: (n: number) => `Example ${n} · Question`,
+    exampleAnswer: (n: number) => `Example ${n} · Answer`,
+    pagination: (start: number, end: number, total: number) =>
+      total === 0 ? '0 of 0' : `${start}–${end} of ${total}`,
+    prevPage: 'Previous page',
+    nextPage: 'Next page',
+  },
+  zh: {
+    score: '得分',
+    filterAll: '全部',
+    filterPassed: '通过',
+    filterFailed: '未通过',
+    searchPlaceholder: '搜索提示词/响应…',
+    searchAriaLabel: '在当前页面中搜索样本',
+    liveUnavailable: '此非官方运行的逐样本数据不可用——工作流 URL 缺失或格式错误。',
+    unofficialNotice: '非官方运行——样本从工作流产物实时加载，可能需要几秒钟。',
+    loading: '正在加载样本…',
+    loadError: (err: string) => `加载样本失败：${err}`,
+    noData: '此次运行暂无逐样本数据。（较早的运行可能未在启用样本功能后重新入库。）',
+    noMatch: (query: string) => `当前页面无匹配“${query}”的样本。`,
+    noPrompt: '（无提示词）',
+    prompt: '提示词',
+    fullModelOutput: '完整模型输出',
+    target: '目标答案',
+    extractedAnswer: '提取的答案',
+    modelResponse: '模型响应',
+    metrics: '指标',
+    empty: '（空）',
+    fewShotExamples: (count: number) => `Few-shot 示例（${count}）`,
+    exampleQuestion: (n: number) => `示例 ${n} · 问题`,
+    exampleAnswer: (n: number) => `示例 ${n} · 答案`,
+    pagination: (start: number, end: number, total: number) =>
+      total === 0 ? '共 0 条' : `第 ${start}–${end} 条，共 ${total} 条`,
+    prevPage: '上一页',
+    nextPage: '下一页',
+  },
+} as const;
+
 interface EvalSamplesDrawerProps {
   /** The selected row from the EvaluationTable, or null when closed. */
   row: EvaluationChartData | null;
@@ -28,6 +93,8 @@ interface EvalSamplesDrawerProps {
  */
 export default function EvalSamplesDrawer({ row, onClose }: EvalSamplesDrawerProps) {
   const open = row !== null;
+  const locale = useLocale();
+  const t = STRINGS[locale];
   const [filter, setFilter] = useState<EvalSamplesFilter>('all');
   const [page, setPage] = useState(0);
   const [search, setSearch] = useState('');
@@ -154,7 +221,9 @@ export default function EvalSamplesDrawer({ row, onClose }: EvalSamplesDrawerPro
               <div className="mt-1 text-xs text-muted-foreground">
                 <span className="uppercase">{row.benchmark}</span>
                 {' · '}
-                <span>score {(row.score * 100).toFixed(1)}%</span>
+                <span>
+                  {t.score} {(row.score * 100).toFixed(1)}%
+                </span>
                 {' · '}
                 <span>{row.date}</span>
               </div>
@@ -165,20 +234,20 @@ export default function EvalSamplesDrawer({ row, onClose }: EvalSamplesDrawerPro
         {/* Filter chips + search */}
         <div className="flex flex-wrap items-center gap-2 border-b border-border px-4 py-2">
           <FilterChip
-            label="All"
+            label={t.filterAll}
             count={passedTotal + failedTotal}
             active={filter === 'all'}
             onClick={() => handleFilterChange('all')}
           />
           <FilterChip
-            label="Passed"
+            label={t.filterPassed}
             count={passedTotal}
             active={filter === 'passed'}
             onClick={() => handleFilterChange('passed')}
             tone="passed"
           />
           <FilterChip
-            label="Failed"
+            label={t.filterFailed}
             count={failedTotal}
             active={filter === 'failed'}
             onClick={() => handleFilterChange('failed')}
@@ -190,9 +259,9 @@ export default function EvalSamplesDrawer({ row, onClose }: EvalSamplesDrawerPro
               type="text"
               value={search}
               onChange={(e) => setSearch(e.target.value)}
-              placeholder="Search prompt / response..."
+              placeholder={t.searchPlaceholder}
               className="h-7 w-full rounded-md border border-border bg-transparent pl-8 pr-2 text-xs focus:outline-none focus:ring-1 focus:ring-ring"
-              aria-label="Search samples on this page"
+              aria-label={t.searchAriaLabel}
             />
           </div>
         </div>
@@ -201,38 +270,31 @@ export default function EvalSamplesDrawer({ row, onClose }: EvalSamplesDrawerPro
         <div className="overflow-auto px-4 py-3">
           {liveUnavailable && (
             <p className="rounded-md border border-amber-500/40 bg-amber-500/5 px-3 py-2 text-xs text-amber-700 dark:text-amber-400">
-              Per-sample data isn&apos;t available for this unofficial run — the workflow URL is
-              missing or malformed.
+              {t.liveUnavailable}
             </p>
           )}
           {!liveUnavailable && isUnofficial && (
             <p className="mb-2 rounded-md border border-primary/40 bg-primary/5 px-3 py-1.5 text-[11px] text-primary">
-              Unofficial run — samples are streamed live from the workflow artifact. Loads may take
-              a few seconds.
+              {t.unofficialNotice}
             </p>
           )}
           {!liveUnavailable && isLoading && (
-            <p className="py-8 text-center text-sm text-muted-foreground">Loading samples…</p>
+            <p className="py-8 text-center text-sm text-muted-foreground">{t.loading}</p>
           )}
           {!liveUnavailable && isError && (
             <p className="py-8 text-center text-sm text-destructive">
-              Failed to load samples: {String(error)}
+              {t.loadError(String(error))}
             </p>
           )}
           {!liveUnavailable && !isLoading && !isError && total === 0 && (
-            <p className="py-8 text-center text-sm text-muted-foreground">
-              No per-sample data available for this run yet. (Older runs may not have been
-              re-ingested with samples enabled.)
-            </p>
+            <p className="py-8 text-center text-sm text-muted-foreground">{t.noData}</p>
           )}
           {!liveUnavailable &&
             !isLoading &&
             !isError &&
             filteredSamples.length === 0 &&
             total > 0 && (
-              <p className="py-8 text-center text-sm text-muted-foreground">
-                No samples on this page match &ldquo;{search}&rdquo;.
-              </p>
+              <p className="py-8 text-center text-sm text-muted-foreground">{t.noMatch(search)}</p>
             )}
           <ul className="space-y-2">
             {filteredSamples.map((s) => (
@@ -250,32 +312,35 @@ export default function EvalSamplesDrawer({ row, onClose }: EvalSamplesDrawerPro
                   <span className="font-mono text-[10px] text-muted-foreground tabular-nums">
                     #{s.docId}
                   </span>
-                  <span className="min-w-0 flex-1 truncate text-xs">
-                    {s.prompt ?? '(no prompt)'}
-                  </span>
+                  <span className="min-w-0 flex-1 truncate text-xs">{s.prompt ?? t.noPrompt}</span>
                 </button>
                 {expanded.has(s.docId) && (
                   <div className="space-y-2 border-t border-border/50 px-3 py-3 text-xs">
-                    <FewShotBlock demonstrations={s.demonstrations} />
-                    <Block label="Prompt" value={s.prompt} />
+                    <FewShotBlock demonstrations={s.demonstrations} locale={locale} />
+                    <Block label={t.prompt} value={s.prompt} emptyText={t.empty} />
                     {s.rawResponse !== null && s.rawResponse !== s.response ? (
                       <>
-                        <Block label="Full model output" value={s.rawResponse} />
-                        <Block label="Target" value={s.target} />
-                        <Block label="Extracted answer" value={s.response} />
+                        <Block
+                          label={t.fullModelOutput}
+                          value={s.rawResponse}
+                          emptyText={t.empty}
+                        />
+                        <Block label={t.target} value={s.target} emptyText={t.empty} />
+                        <Block label={t.extractedAnswer} value={s.response} emptyText={t.empty} />
                       </>
                     ) : (
                       <>
-                        <Block label="Target" value={s.target} />
-                        <Block label="Model response" value={s.response} />
+                        <Block label={t.target} value={s.target} emptyText={t.empty} />
+                        <Block label={t.modelResponse} value={s.response} emptyText={t.empty} />
                       </>
                     )}
                     {Object.keys(s.metrics).length > 0 && (
                       <Block
-                        label="Metrics"
+                        label={t.metrics}
                         value={Object.entries(s.metrics)
                           .map(([k, v]) => `${k} = ${v}`)
                           .join('\n')}
+                        emptyText={t.empty}
                       />
                     )}
                   </div>
@@ -288,10 +353,11 @@ export default function EvalSamplesDrawer({ row, onClose }: EvalSamplesDrawerPro
         {/* Footer pagination */}
         <div className="flex items-center justify-between border-t border-border px-4 py-2 text-xs text-muted-foreground">
           <span>
-            {total === 0
-              ? '0'
-              : `${safePage * PAGE_SIZE + 1}–${Math.min((safePage + 1) * PAGE_SIZE, total)}`}{' '}
-            of {total}
+            {t.pagination(
+              safePage * PAGE_SIZE + 1,
+              Math.min((safePage + 1) * PAGE_SIZE, total),
+              total,
+            )}
           </span>
           <div className="flex items-center gap-1">
             <button
@@ -299,7 +365,7 @@ export default function EvalSamplesDrawer({ row, onClose }: EvalSamplesDrawerPro
               onClick={() => handlePageChange(-1)}
               disabled={safePage === 0}
               className="rounded p-1 hover:bg-muted disabled:cursor-not-allowed disabled:opacity-30"
-              aria-label="Previous page"
+              aria-label={t.prevPage}
             >
               <ChevronLeft className="size-4" />
             </button>
@@ -311,7 +377,7 @@ export default function EvalSamplesDrawer({ row, onClose }: EvalSamplesDrawerPro
               onClick={() => handlePageChange(1)}
               disabled={safePage >= totalPages - 1}
               className="rounded p-1 hover:bg-muted disabled:cursor-not-allowed disabled:opacity-30"
-              aria-label="Next page"
+              aria-label={t.nextPage}
             >
               <ChevronRight className="size-4" />
             </button>
@@ -401,12 +467,15 @@ function PassFailBadge({ passed }: { passed: boolean | null }) {
  */
 function FewShotBlock({
   demonstrations,
+  locale,
 }: {
   demonstrations: { question: string; answer: string }[] | null;
+  locale: 'en' | 'zh';
 }) {
   const [open, setOpen] = useState(true);
   if (!demonstrations || demonstrations.length === 0) return null;
   const demos = demonstrations;
+  const t = STRINGS[locale];
   return (
     <div className="rounded-md border border-primary/40 bg-primary/5 p-2">
       <button
@@ -419,7 +488,7 @@ function FewShotBlock({
           className={`size-3.5 transition-transform ${open ? 'rotate-90' : ''}`}
           aria-hidden="true"
         />
-        Few-shot examples ({demos.length})
+        {t.fewShotExamples(demos.length)}
       </button>
       {open && (
         <div className="mt-2 space-y-2">
@@ -430,13 +499,13 @@ function FewShotBlock({
               className="rounded border border-border/40 bg-muted/30 p-2"
             >
               <div className="mb-1 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">
-                Example {i + 1} · Question
+                {t.exampleQuestion(i + 1)}
               </div>
               <pre className="mb-2 whitespace-pre-wrap font-mono text-[11px] leading-snug wrap-break-word">
                 {d.question}
               </pre>
               <div className="mb-1 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">
-                Example {i + 1} · Answer
+                {t.exampleAnswer(i + 1)}
               </div>
               <pre className="whitespace-pre-wrap font-mono text-[11px] leading-snug wrap-break-word">
                 {d.answer}
@@ -449,14 +518,22 @@ function FewShotBlock({
   );
 }
 
-function Block({ label, value }: { label: string; value: string | null }) {
+function Block({
+  label,
+  value,
+  emptyText,
+}: {
+  label: string;
+  value: string | null;
+  emptyText: string;
+}) {
   return (
     <div>
       <div className="mb-1 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">
         {label}
       </div>
       <pre className="max-h-72 overflow-auto whitespace-pre-wrap rounded border border-border/40 bg-muted/30 p-2 font-mono text-[11px] leading-snug wrap-break-word">
-        {value ?? <span className="italic text-muted-foreground">(empty)</span>}
+        {value ?? <span className="italic text-muted-foreground">{emptyText}</span>}
       </pre>
     </div>
   );
diff --git a/packages/app/src/components/evaluation/ui/EvaluationTable.tsx b/packages/app/src/components/evaluation/ui/EvaluationTable.tsx
index 514ec384..6620d399 100644
--- a/packages/app/src/components/evaluation/ui/EvaluationTable.tsx
+++ b/packages/app/src/components/evaluation/ui/EvaluationTable.tsx
@@ -9,6 +9,43 @@ import { useUnofficialRun } from '@/components/unofficial-run-provider';
 import { type DataTableColumn, DataTable } from '@/components/ui/data-table';
 import { track } from '@/lib/analytics';
 import { overlayRunColor, overlayRunIndex } from '@/lib/overlay-run-style';
+import { useLocale } from '@/lib/use-locale';
+
+const STRINGS = {
+  en: {
+    prompts: 'Prompts',
+    promptsTitle: 'View per-sample prompts and responses',
+    promptsAriaLabel: (configLabel: string) =>
+      `View per-sample prompts and responses for ${configLabel}`,
+    precision: 'Precision',
+    score: 'Score',
+    min: 'Min',
+    max: 'Max',
+    conc: 'Conc',
+    benchmark: 'Benchmark',
+    date: 'Date',
+    unofficial: 'Unofficial',
+    unofficialTitle: 'Data from an unofficial / un-ingested workflow run',
+    prefill: 'prefill',
+    decode: 'decode',
+  },
+  zh: {
+    prompts: '提示词',
+    promptsTitle: '查看逐样本提示词与模型响应',
+    promptsAriaLabel: (configLabel: string) => `查看 ${configLabel} 的逐样本提示词与模型响应`,
+    precision: '精度',
+    score: '得分',
+    min: '最小',
+    max: '最大',
+    conc: '并发',
+    benchmark: '基准测试',
+    date: '日期',
+    unofficial: '非官方',
+    unofficialTitle: '来自非官方/未入库工作流运行的数据',
+    prefill: '预填充',
+    decode: '解码',
+  },
+} as const;
 
 interface EvaluationTableProps {
   data: EvaluationChartData[];
@@ -16,6 +53,8 @@ interface EvaluationTableProps {
 
 export default function EvaluationTable({ data }: EvaluationTableProps) {
   const { runIndexByUrl } = useUnofficialRun();
+  const locale = useLocale();
+  const t = STRINGS[locale];
   const sorted = useMemo(() => [...data].toSorted((a, b) => b.score - a.score), [data]);
   const hasDisaggConfigs = useMemo(() => data.some((d) => d.disagg), [data]);
   const [drawerRow, setDrawerRow] = useState<EvaluationChartData | null>(null);
@@ -47,11 +86,11 @@ export default function EvaluationTable({ data }: EvaluationTableProps) {
               type="button"
               onClick={() => openDrawer(row)}
               className="inline-flex items-center gap-1 rounded-md border border-brand/30 bg-brand/10 px-2 py-1 text-xs font-medium text-brand hover:border-brand/50 hover:bg-brand/20 transition-colors whitespace-nowrap"
-              aria-label={`View per-sample prompts and responses for ${row.configLabel}`}
-              title="View per-sample prompts and responses"
+              aria-label={t.promptsAriaLabel(row.configLabel)}
+              title={t.promptsTitle}
             >
               <MessageSquareText className="size-3.5" />
-              <span className="hidden sm:inline">Prompts</span>
+              <span className="hidden sm:inline">{t.prompts}</span>
             </button>
           ) : null;
         },
@@ -71,14 +110,14 @@ export default function EvaluationTable({ data }: EvaluationTableProps) {
               {isUnofficial && (
                 <span
                   className="inline-flex items-center gap-1 rounded-sm border border-red-600/50 bg-red-600/10 px-1 py-0.5 text-[9px] font-semibold uppercase tracking-wider text-red-700 dark:text-red-400"
-                  title="Data from an unofficial / un-ingested workflow run"
+                  title={t.unofficialTitle}
                 >
                   <span
                     aria-hidden
                     className="inline-block size-1.5 rounded-full"
                     style={{ backgroundColor: overlayRunColor(runIdx) }}
                   />
-                  Unofficial
+                  {t.unofficial}
                 </span>
               )}
             </span>
@@ -88,27 +127,27 @@ export default function EvaluationTable({ data }: EvaluationTableProps) {
         className: 'font-medium whitespace-nowrap',
       },
       {
-        header: 'Precision',
+        header: t.precision,
         cell: (row) => row.precision.toUpperCase(),
         sortValue: (row) => row.precision,
         className: 'whitespace-nowrap',
       },
       {
-        header: 'Score',
+        header: t.score,
         align: 'right',
         cell: (row) => row.score.toFixed(2),
         sortValue: (row) => row.score,
         className: 'tabular-nums',
       },
       {
-        header: 'Min',
+        header: t.min,
         align: 'right',
         cell: (row) => row.minScore?.toFixed(2) ?? '-',
         sortValue: (row) => row.minScore ?? 0,
         className: 'tabular-nums',
       },
       {
-        header: 'Max',
+        header: t.max,
         align: 'right',
         cell: (row) => row.maxScore?.toFixed(2) ?? '-',
         sortValue: (row) => row.maxScore ?? 0,
@@ -122,26 +161,26 @@ export default function EvaluationTable({ data }: EvaluationTableProps) {
         className: 'tabular-nums',
       },
       {
-        header: 'Conc',
+        header: t.conc,
         align: 'right',
         cell: (row) => row.conc,
         sortValue: (row) => row.conc,
         className: 'tabular-nums',
       },
       {
-        header: 'Benchmark',
+        header: t.benchmark,
         cell: (row) => row.benchmark,
         sortValue: (row) => row.benchmark,
         className: 'whitespace-nowrap',
       },
       {
-        header: 'Date',
+        header: t.date,
         cell: (row) => row.date,
         sortValue: (row) => row.date,
         className: 'whitespace-nowrap',
       },
     ],
-    [runIndexByUrl],
+    [locale, runIndexByUrl],
   );
 
   return (
@@ -149,9 +188,9 @@ export default function EvaluationTable({ data }: EvaluationTableProps) {
       {hasDisaggConfigs && (
         <div className="mt-2 mb-2 text-[11px] text-muted-foreground/80 leading-tight">
           <div>
-            <span className="font-mono">P(·/·/·/·)</span> prefill
+            <span className="font-mono">P(·/·/·/·)</span> {t.prefill}
             <span className="mx-1">·</span>
-            <span className="font-mono">D(·/·/·/·)</span> decode
+            <span className="font-mono">D(·/·/·/·)</span> {t.decode}
           </div>
           <div>
             slots: <span className="font-mono">tp/ep/dpa/nw</span>
diff --git a/packages/app/src/components/feedback-viewer/FeedbackViewer.tsx b/packages/app/src/components/feedback-viewer/FeedbackViewer.tsx
index 0969e9d8..e6501a13 100644
--- a/packages/app/src/components/feedback-viewer/FeedbackViewer.tsx
+++ b/packages/app/src/components/feedback-viewer/FeedbackViewer.tsx
@@ -16,6 +16,7 @@ import {
 import { useFeedbackList } from '@/hooks/api/use-feedback-list';
 import type { FeedbackListRow } from '@/lib/api';
 import { track } from '@/lib/analytics';
+import { useLocale } from '@/lib/use-locale';
 import { relockFeatureGate } from '@/lib/use-feature-gate';
 import { Button } from '@/components/ui/button';
 import { Card } from '@/components/ui/card';
@@ -66,9 +67,62 @@ function decryptRow(cipher: Cipher, row: FeedbackListRow): DecryptedRow {
   };
 }
 
+const STRINGS = {
+  en: {
+    heading: 'User Feedback',
+    explanation: 'All user-supplied columns are encrypted server-side. Paste the',
+    explanationSuffix: 'to decrypt in your browser. The key never leaves this page.',
+    relock: 'Re-lock feature gate',
+    keyLabel: 'Decryption key (base64, 32 bytes)',
+    keyPlaceholder: 'base64-encoded key',
+    decrypt: 'Decrypt',
+    forgetKey: 'Forget key',
+    hideKey: 'Hide key',
+    showKey: 'Show key',
+    allDecryptsFailed: "All rows failed to decrypt — the key parses but doesn't match the data.",
+    fetchError: 'Failed to load feedback rows.',
+    loadingRows: 'Loading rows…',
+    noRows: 'No feedback rows yet.',
+    enterKey: 'Enter the key above to decrypt.',
+    encryptedRowsLoaded: (n: number) => `${n} encrypted row${n === 1 ? '' : 's'} loaded.`,
+    rowCount: (n: number) => `${n} row${n === 1 ? '' : 's'}`,
+    failedToDecrypt: (n: number) => ` · ${n} failed to decrypt`,
+    decryptFailed: 'decrypt failed',
+    whatWorksWell: 'What works well',
+    whatCouldBeBetter: 'What could be better',
+    wouldLikeToSee: 'Would like to see',
+  },
+  zh: {
+    heading: '用户反馈',
+    explanation: '所有用户提交的字段均在服务端加密。粘贴',
+    explanationSuffix: '即可在浏览器中解密。密钥不会离开此页面。',
+    relock: '重新锁定功能入口',
+    keyLabel: '解密密钥（base64，32 字节）',
+    keyPlaceholder: 'base64 编码密钥',
+    decrypt: '解密',
+    forgetKey: '忘记密钥',
+    hideKey: '隐藏密钥',
+    showKey: '显示密钥',
+    allDecryptsFailed: '所有行均解密失败——密钥格式正确但与数据不匹配。',
+    fetchError: '无法加载反馈数据。',
+    loadingRows: '加载中……',
+    noRows: '暂无反馈记录。',
+    enterKey: '请在上方输入密钥进行解密。',
+    encryptedRowsLoaded: (n: number) => `已加载 ${n} 条加密记录。`,
+    rowCount: (n: number) => `共 ${n} 条记录`,
+    failedToDecrypt: (n: number) => `，其中 ${n} 条解密失败`,
+    decryptFailed: '解密失败',
+    whatWorksWell: '做得好的地方',
+    whatCouldBeBetter: '可以改进的地方',
+    wouldLikeToSee: '希望看到的功能',
+  },
+} as const;
+
 export default function FeedbackViewer() {
   const router = useRouter();
   const { data, isLoading, error: fetchError } = useFeedbackList();
+  const locale = useLocale();
+  const t = STRINGS[locale];
   const [keyInput, setKeyInput] = useState('');
   const [showKey, setShowKey] = useState(false);
   const [cipherKey, setCipherKey] = useState<CipherKey | null>(null);
@@ -119,11 +173,11 @@ export default function FeedbackViewer() {
       <Card>
         <div className="flex items-start justify-between gap-4">
           <div>
-            <h2 className="text-lg font-semibold mb-2">User Feedback</h2>
+            <h2 className="text-lg font-semibold mb-2">{t.heading}</h2>
             <p className="text-muted-foreground text-sm">
-              All user-supplied columns are encrypted server-side. Paste the
+              {t.explanation}
               <code className="mx-1 rounded bg-muted px-1 py-0.5 text-xs">FEEDBACK_SECRET</code>
-              to decrypt in your browser. The key never leaves this page.
+              {t.explanationSuffix}
             </p>
           </div>
           <Button
@@ -133,12 +187,12 @@ export default function FeedbackViewer() {
             onClick={() => {
               relockFeatureGate();
               track('feedback_viewer_relocked');
-              router.push('/inference');
+              router.push(locale === 'zh' ? '/zh/inference' : '/inference');
             }}
-            title="Re-lock feature gate"
+            title={t.relock}
           >
             <Lock className="size-3" />
-            Re-lock feature gate
+            {t.relock}
           </Button>
         </div>
       </Card>
@@ -146,7 +200,7 @@ export default function FeedbackViewer() {
       <Card>
         <form onSubmit={handleUnlock} className="flex flex-col gap-2">
           <label htmlFor="feedback-key" className="text-xs font-medium">
-            Decryption key (base64, 32 bytes)
+            {t.keyLabel}
           </label>
           <div className="flex flex-row gap-2">
             <div className="relative flex-1">
@@ -158,13 +212,13 @@ export default function FeedbackViewer() {
                 autoComplete="off"
                 spellCheck={false}
                 data-testid="feedback-key-input"
-                placeholder="base64-encoded key"
+                placeholder={t.keyPlaceholder}
                 className="pr-9 font-mono text-sm"
               />
               <button
                 type="button"
                 onClick={() => setShowKey((v) => !v)}
-                aria-label={showKey ? 'Hide key' : 'Show key'}
+                aria-label={showKey ? t.hideKey : t.showKey}
                 className="absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
               >
                 {showKey ? <EyeOff className="size-4" /> : <Eye className="size-4" />}
@@ -176,7 +230,7 @@ export default function FeedbackViewer() {
               data-testid="feedback-key-submit"
             >
               <KeyRound className="size-4" />
-              Decrypt
+              {t.decrypt}
             </Button>
             {cipherKey && (
               <Button
@@ -185,7 +239,7 @@ export default function FeedbackViewer() {
                 onClick={handleForget}
                 data-testid="feedback-key-forget"
               >
-                Forget key
+                {t.forgetKey}
               </Button>
             )}
           </div>
@@ -196,7 +250,7 @@ export default function FeedbackViewer() {
           )}
           {allDecryptsFailed && (
             <p role="alert" className="text-xs text-destructive">
-              All rows failed to decrypt — the key parses but doesn't match the data.
+              {t.allDecryptsFailed}
             </p>
           )}
         </form>
@@ -204,27 +258,26 @@ export default function FeedbackViewer() {
 
       {fetchError && (
         <Card>
-          <p className="text-destructive text-sm">Failed to load feedback rows.</p>
+          <p className="text-destructive text-sm">{t.fetchError}</p>
         </Card>
       )}
 
       {isLoading && (
         <Card>
-          <p className="text-muted-foreground text-sm">Loading rows…</p>
+          <p className="text-muted-foreground text-sm">{t.loadingRows}</p>
         </Card>
       )}
 
       {data && data.rows.length === 0 && (
         <Card>
-          <p className="text-muted-foreground text-sm">No feedback rows yet.</p>
+          <p className="text-muted-foreground text-sm">{t.noRows}</p>
         </Card>
       )}
 
       {data && data.rows.length > 0 && decryptedRows === null && (
         <Card>
           <p className="text-muted-foreground text-sm">
-            {data.rows.length} encrypted row{data.rows.length === 1 ? '' : 's'} loaded. Enter the
-            key above to decrypt.
+            {t.encryptedRowsLoaded(data.rows.length)} {t.enterKey}
           </p>
         </Card>
       )}
@@ -235,8 +288,8 @@ export default function FeedbackViewer() {
             <FeedbackRow key={row.id} row={row} />
           ))}
           <p className="text-xs text-muted-foreground">
-            {decryptedRows.length} row{decryptedRows.length === 1 ? '' : 's'}
-            {failedDecrypts > 0 ? ` · ${failedDecrypts} failed to decrypt` : ''}
+            {t.rowCount(decryptedRows.length)}
+            {failedDecrypts > 0 ? t.failedToDecrypt(failedDecrypts) : ''}
           </p>
         </div>
       )}
@@ -245,12 +298,14 @@ export default function FeedbackViewer() {
 }
 
 function FeedbackRow({ row }: { row: DecryptedRow }) {
+  const locale = useLocale();
+  const t = STRINGS[locale];
   if (row.decryptError) {
     return (
       <Card>
         <div className="flex items-center justify-between gap-2 text-xs">
           <span className="text-muted-foreground">#{row.id}</span>
-          <span className="text-destructive">decrypt failed</span>
+          <span className="text-destructive">{t.decryptFailed}</span>
           <span className="text-muted-foreground tabular-nums">
             {new Date(row.createdAt).toISOString()}
           </span>
@@ -267,12 +322,12 @@ function FeedbackRow({ row }: { row: DecryptedRow }) {
           <span className="font-mono">{row.pagePath ?? '?'}</span>
         </div>
         {row.doingWell && (
-          <FieldRow label="What works well" value={row.doingWell} tone="positive" />
+          <FieldRow label={t.whatWorksWell} value={row.doingWell} tone="positive" />
         )}
         {row.doingPoorly && (
-          <FieldRow label="What could be better" value={row.doingPoorly} tone="negative" />
+          <FieldRow label={t.whatCouldBeBetter} value={row.doingPoorly} tone="negative" />
         )}
-        {row.wantToSee && <FieldRow label="Would like to see" value={row.wantToSee} tone="want" />}
+        {row.wantToSee && <FieldRow label={t.wouldLikeToSee} value={row.wantToSee} tone="want" />}
         {row.userAgent && (
           <p className="text-[10px] text-muted-foreground/70 font-mono">{row.userAgent}</p>
         )}
diff --git a/packages/app/src/components/gpu-specs/gpu-specs-radar-chart.tsx b/packages/app/src/components/gpu-specs/gpu-specs-radar-chart.tsx
index 957befb4..0405eb3f 100644
--- a/packages/app/src/components/gpu-specs/gpu-specs-radar-chart.tsx
+++ b/packages/app/src/components/gpu-specs/gpu-specs-radar-chart.tsx
@@ -9,6 +9,7 @@ import { GPU_SPECS, GPU_CHART_METRICS, type GpuSpec } from '@/lib/gpu-specs';
 import { D3Chart } from '@/lib/d3-chart/D3Chart';
 import type { LayerConfig } from '@/lib/d3-chart/D3Chart/types';
 import type { RadarDot } from '@/lib/d3-chart/layers/radar';
+import { useLocale } from '@/lib/use-locale';
 import ChartLegend from '@/components/ui/chart-legend';
 
 const NVIDIA_COLOR = '#76b900';
@@ -64,11 +65,18 @@ interface GpuSpecsRadarChartProps {
   caption?: ReactNode;
 }
 
+const RADAR_STRINGS = {
+  en: { resetFilter: 'Reset filter' },
+  zh: { resetFilter: '重置筛选' },
+} as const;
+
 export function GpuSpecsRadarChart({ caption }: GpuSpecsRadarChartProps) {
   const [selectedGpus, setSelectedGpus] = useState<Set<string>>(
     () => new Set(GPU_SPECS.map((s) => s.name)),
   );
   const [isLegendExpanded, setIsLegendExpanded] = useState(true);
+  const locale = useLocale();
+  const legendT = RADAR_STRINGS[locale];
 
   const metrics = RADAR_METRICS;
 
@@ -206,7 +214,7 @@ export function GpuSpecsRadarChart({ caption }: GpuSpecsRadarChartProps) {
                 ? [
                     {
                       id: 'radar-reset-filter',
-                      label: 'Reset filter',
+                      label: legendT.resetFilter,
                       onClick: () => {
                         selectAll();
                         track('gpu_specs_radar_reset_filter');
diff --git a/packages/app/src/components/inference/agentic-point/agentic-point-detail.tsx b/packages/app/src/components/inference/agentic-point/agentic-point-detail.tsx
index 64742acd..16741a84 100644
--- a/packages/app/src/components/inference/agentic-point/agentic-point-detail.tsx
+++ b/packages/app/src/components/inference/agentic-point/agentic-point-detail.tsx
@@ -11,6 +11,8 @@ import { useTraceServerMetrics } from '@/hooks/api/use-trace-server-metrics';
 import { useBenchmarkSiblings } from '@/hooks/api/use-benchmark-siblings';
 import { SegmentedToggle, type SegmentedToggleOption } from '@/components/ui/segmented-toggle';
 import { track } from '@/lib/analytics';
+import { useLocale } from '@/lib/use-locale';
+import { isZhPathname, ZH_PREFIX } from '@/lib/i18n';
 
 import { AggregatesGrid } from './aggregates-grid';
 import { MetricSourceToolbar } from './metric-source-toolbar';
@@ -38,18 +40,53 @@ import {
 import { SiblingNav } from './sibling-nav';
 import type { ThroughputSeriesKey } from './time-series-math';
 
+const STRINGS = {
+  en: {
+    back: 'Back',
+    inferenceChart: 'Inference chart',
+    loadingSku: 'Loading SKU navigator…',
+    loadingPoint: 'Loading point metadata…',
+    configsInSku: 'configs in SKU',
+    requests: 'requests',
+    interactivityOverTime: 'Interactivity over time',
+    ttftOverTime: 'TTFT over time',
+    perPoint: 'Per-point',
+    requestTimeline: 'Request timeline',
+    aggregatesAcrossConfigs: 'Aggregates across configs',
+    warmupWord: 'warmup',
+    warmupNotePrefix: 'Showing the ',
+    warmupNoteBody:
+      ' phase — a cache-warming pass whose outputs are capped at 1 token. Warmup OSL ≈ 1, and interactivity/decode are blank (single-token outputs have no inter-token latency).',
+    warmupNoServerData:
+      ' Warmup server-side metrics aren’t available for this point, so the server charts below are empty — the request-level charts above still reflect warmup.',
+  },
+  zh: {
+    back: '返回',
+    inferenceChart: '推理图表',
+    loadingSku: '加载 SKU 导航器……',
+    loadingPoint: '加载数据点元信息……',
+    configsInSku: '个配置',
+    requests: '个请求',
+    interactivityOverTime: '交互性随时间变化',
+    ttftOverTime: 'TTFT 随时间变化',
+    perPoint: '单点',
+    requestTimeline: '请求时间线',
+    aggregatesAcrossConfigs: '跨配置聚合',
+    warmupWord: 'warmup',
+    warmupNotePrefix: '当前显示 ',
+    warmupNoteBody:
+      ' 预热阶段——该阶段用于缓存预热，输出被限制为 1 个 token。预热阶段 OSL ≈ 1，交互性/解码指标为空（单 token 输出没有 token 间延迟）。',
+    warmupNoServerData:
+      ' 该数据点没有预热阶段的服务器端指标，因此下方服务器图表为空——上方请求级图表仍反映预热阶段数据。',
+  },
+} as const;
+
 interface Props {
   id: number;
 }
 
 type DetailView = 'point' | 'timeline' | 'aggregates';
 
-const VIEW_OPTIONS: SegmentedToggleOption<DetailView>[] = [
-  { value: 'point', label: 'Per-point', testId: 'detail-view-point' },
-  { value: 'timeline', label: 'Request timeline', testId: 'detail-view-timeline' },
-  { value: 'aggregates', label: 'Aggregates across configs', testId: 'detail-view-aggregates' },
-];
-
 const isDetailView = (value: string | null): value is DetailView =>
   value === 'point' || value === 'timeline' || value === 'aggregates';
 
@@ -76,6 +113,19 @@ function useDetailView(): [DetailView, (nextView: DetailView) => void] {
 
 export function AgenticPointDetail({ id }: Props) {
   const router = useRouter();
+  const pathname = usePathname();
+  const locale = useLocale();
+  const t = STRINGS[locale];
+  const isZh = isZhPathname(pathname);
+  const inferenceHref = isZh ? `${ZH_PREFIX}/inference` : '/inference';
+  const viewOptions: SegmentedToggleOption<DetailView>[] = useMemo(
+    () => [
+      { value: 'point', label: t.perPoint, testId: 'detail-view-point' },
+      { value: 'timeline', label: t.requestTimeline, testId: 'detail-view-timeline' },
+      { value: 'aggregates', label: t.aggregatesAcrossConfigs, testId: 'detail-view-aggregates' },
+    ],
+    [t],
+  );
   const metricsQuery = useTraceServerMetrics(id, true);
   const siblingsQuery = useBenchmarkSiblings(id);
 
@@ -168,24 +218,24 @@ export function AgenticPointDetail({ id }: Props) {
           onClick={() => router.back()}
           className="inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground"
         >
-          <ArrowLeft className="size-4" /> Back
+          <ArrowLeft className="size-4" /> {t.back}
         </button>
         <span className="text-sm text-muted-foreground">·</span>
-        <Link href="/inference" className="text-sm text-muted-foreground hover:text-foreground">
-          Inference chart
+        <Link href={inferenceHref} className="text-sm text-muted-foreground hover:text-foreground">
+          {t.inferenceChart}
         </Link>
       </div>
 
       {siblingsData ? (
         <SiblingNav sku={siblingsData.sku} siblings={siblingsData.siblings} />
       ) : siblingsQuery.isLoading ? (
-        <div className="text-sm text-muted-foreground">Loading SKU navigator…</div>
+        <div className="text-sm text-muted-foreground">{t.loadingSku}</div>
       ) : null}
 
       {metrics ? (
         <PointSummary meta={metrics.meta} />
       ) : metricsQuery.isLoading ? (
-        <div className="text-sm text-muted-foreground">Loading point metadata…</div>
+        <div className="text-sm text-muted-foreground">{t.loadingPoint}</div>
       ) : null}
 
       {metricsQuery.isError && (
@@ -203,7 +253,7 @@ export function AgenticPointDetail({ id }: Props) {
       <div className="flex items-center justify-between gap-3">
         <SegmentedToggle
           value={view}
-          options={VIEW_OPTIONS}
+          options={viewOptions}
           onValueChange={setView}
           ariaLabel="Detail view"
           testId="detail-view-toggle"
@@ -211,13 +261,13 @@ export function AgenticPointDetail({ id }: Props) {
         />
         {view === 'aggregates' && (
           <span className="text-xs text-muted-foreground">
-            {siblingIds.length} configs in SKU
+            {siblingIds.length} {t.configsInSku}
             {aggregatesQuery.isLoading ? ' · loading…' : ''}
           </span>
         )}
         {view === 'timeline' && timelineQuery.data && (
           <span className="text-xs text-muted-foreground">
-            {timelineQuery.data.requests.length} requests
+            {timelineQuery.data.requests.length} {t.requests}
           </span>
         )}
       </div>
@@ -264,11 +314,10 @@ export function AgenticPointDetail({ id }: Props) {
               className="rounded-md border-l-2 border-amber-500/60 bg-amber-500/10 px-3 py-2 text-xs text-muted-foreground"
               data-testid="warmup-phase-note"
             >
-              Showing the <span className="font-medium text-foreground">warmup</span> phase — a
-              cache-warming pass whose outputs are capped at 1 token. Warmup OSL ≈ 1, and
-              interactivity/decode are blank (single-token outputs have no inter-token latency).
-              {!slicedHasServerData &&
-                ' Warmup server-side metrics aren’t available for this point, so the server charts below are empty — the request-level charts above still reflect warmup.'}
+              {t.warmupNotePrefix}
+              <span className="font-medium text-foreground">{t.warmupWord}</span>
+              {t.warmupNoteBody}
+              {!slicedHasServerData && t.warmupNoServerData}
             </p>
           )}
           <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
@@ -284,14 +333,14 @@ export function AgenticPointDetail({ id }: Props) {
             />
 
             <RequestMetricOverTime
-              title="Interactivity over time"
+              title={t.interactivityOverTime}
               metric="interactivity"
               timeline={phaseTimeline}
               isLoading={timelineQuery.isLoading}
             />
 
             <RequestMetricOverTime
-              title="TTFT over time"
+              title={t.ttftOverTime}
               metric="ttft"
               timeline={phaseTimeline}
               isLoading={timelineQuery.isLoading}
diff --git a/packages/app/src/components/inference/agentic-point/request-timeline.tsx b/packages/app/src/components/inference/agentic-point/request-timeline.tsx
index 18cb76d5..04ee24be 100644
--- a/packages/app/src/components/inference/agentic-point/request-timeline.tsx
+++ b/packages/app/src/components/inference/agentic-point/request-timeline.tsx
@@ -6,6 +6,7 @@ import { useRouter } from 'next/navigation';
 import { type RequestRecord, type RequestTimeline } from '@/hooks/api/use-request-timeline';
 import { SegmentedToggle, type SegmentedToggleOption } from '@/components/ui/segmented-toggle';
 import { track } from '@/lib/analytics';
+import { useLocale } from '@/lib/use-locale';
 
 import { sliceTimelineByPhase } from './phase-slice';
 import { TimelineBars } from './timeline-bars';
@@ -67,15 +68,27 @@ export type { TimelineViewSnapshot } from './timeline-view-snapshot';
  * The reference for this layout is the agent-timeline in semianalysis-claude-code-proxy.
  */
 
-const ROW_MODE_OPTIONS: SegmentedToggleOption<RowMode>[] = [
-  { value: 'conversation', label: 'By conversation', testId: 'timeline-mode-conversation' },
-  { value: 'worker', label: 'By worker', testId: 'timeline-mode-worker' },
-];
-
-const PHASE_OPTIONS: SegmentedToggleOption<PhaseFilter>[] = [
-  { value: 'profiling', label: 'Profiling', testId: 'timeline-phase-profiling' },
-  { value: 'warmup', label: 'Warmup', testId: 'timeline-phase-warmup' },
-];
+const ROW_MODE_OPTIONS: Record<'en' | 'zh', SegmentedToggleOption<RowMode>[]> = {
+  en: [
+    { value: 'conversation', label: 'By conversation', testId: 'timeline-mode-conversation' },
+    { value: 'worker', label: 'By worker', testId: 'timeline-mode-worker' },
+  ],
+  zh: [
+    { value: 'conversation', label: '按对话', testId: 'timeline-mode-conversation' },
+    { value: 'worker', label: '按 worker', testId: 'timeline-mode-worker' },
+  ],
+};
+
+const PHASE_OPTIONS: Record<'en' | 'zh', SegmentedToggleOption<PhaseFilter>[]> = {
+  en: [
+    { value: 'profiling', label: 'Profiling', testId: 'timeline-phase-profiling' },
+    { value: 'warmup', label: 'Warmup', testId: 'timeline-phase-warmup' },
+  ],
+  zh: [
+    { value: 'profiling', label: '性能剖析', testId: 'timeline-phase-profiling' },
+    { value: 'warmup', label: '预热', testId: 'timeline-phase-warmup' },
+  ],
+};
 
 const PLOT_WIDTH = CHART_WIDTH - PADDING_RIGHT;
 
@@ -91,6 +104,7 @@ export function RequestTimelineView({
   pointId: number;
 }) {
   const router = useRouter();
+  const locale = useLocale();
   const [rowMode, setRowMode] = useState<RowMode>('conversation');
   const [phaseFilter, setPhaseFilter] = useState<PhaseFilter>('profiling');
   const [tooltip, setTooltip] = useState<TooltipData | null>(null);
@@ -131,9 +145,11 @@ export function RequestTimelineView({
         });
       }
       track('agentic_timeline_to_dataset', { slug: datasetSlug });
-      router.push(conversationHref(datasetSlug, req));
+      // Stay within the Chinese tree when this timeline renders under /zh.
+      const href = conversationHref(datasetSlug, req);
+      router.push(locale === 'zh' ? `/zh${href}` : href);
     },
-    [datasetSlug, router, pointId],
+    [datasetSlug, router, pointId, locale],
   );
   // Which multi-stream subagents currently have their per-stream rows
   // expanded. Key is the subagent row's `key` (parent_cid::sa:agent_id).
@@ -392,7 +408,7 @@ export function RequestTimelineView({
       <div className="flex flex-wrap items-center gap-2">
         <SegmentedToggle
           value={rowMode}
-          options={ROW_MODE_OPTIONS}
+          options={ROW_MODE_OPTIONS[locale]}
           onValueChange={setRowMode}
           ariaLabel="Row mode"
           testId="timeline-row-mode"
@@ -401,7 +417,7 @@ export function RequestTimelineView({
         {hasWarmup && (
           <SegmentedToggle
             value={phaseFilter}
-            options={PHASE_OPTIONS}
+            options={PHASE_OPTIONS[locale]}
             onValueChange={setPhaseFilter}
             ariaLabel="Phase filter"
             testId="timeline-phase-filter"
diff --git a/packages/app/src/components/inference/agentic-point/sibling-nav.tsx b/packages/app/src/components/inference/agentic-point/sibling-nav.tsx
index 2c3a3c27..b013f41e 100644
--- a/packages/app/src/components/inference/agentic-point/sibling-nav.tsx
+++ b/packages/app/src/components/inference/agentic-point/sibling-nav.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { useMemo, useState } from 'react';
-import { useRouter } from 'next/navigation';
+import { usePathname, useRouter } from 'next/navigation';
 import { ChevronLeft, ChevronRight } from 'lucide-react';
 
 import type { BenchmarkSibling, BenchmarkSku } from '@/hooks/api/use-benchmark-siblings';
@@ -14,6 +14,7 @@ import {
   SelectValue,
 } from '@/components/ui/select';
 import { track } from '@/lib/analytics';
+import { isZhPathname, ZH_PREFIX } from '@/lib/i18n';
 
 const HW_LABELS: Record<string, string> = {
   b200: 'B200',
@@ -131,6 +132,10 @@ const isSortMode = (v: string | null): v is SortMode =>
 
 export function SiblingNav({ sku, siblings }: { sku: BenchmarkSku; siblings: BenchmarkSibling[] }) {
   const router = useRouter();
+  const pathname = usePathname();
+  const agenticBase = isZhPathname(pathname)
+    ? `${ZH_PREFIX}/inference/agentic`
+    : '/inference/agentic';
   // Persist the sort in the URL so clicking a point (which remounts this
   // component on the new route) keeps the chosen order instead of resetting.
   // Read it once from the URL on mount — this component only renders after the
@@ -151,9 +156,7 @@ export function SiblingNav({ sku, siblings }: { sku: BenchmarkSku; siblings: Ben
 
   // Carry the active sort through every point-to-point link.
   const hrefFor = (id: number) =>
-    sortMode === 'default'
-      ? `/inference/agentic/${id}`
-      : `/inference/agentic/${id}?sort=${sortMode}`;
+    sortMode === 'default' ? `${agenticBase}/${id}` : `${agenticBase}/${id}?sort=${sortMode}`;
 
   const currentId = siblings.find((s) => s.is_current)?.id;
 
@@ -181,8 +184,8 @@ export function SiblingNav({ sku, siblings }: { sku: BenchmarkSku; siblings: Ben
               if (currentId !== undefined) {
                 const href =
                   mode === 'default'
-                    ? `/inference/agentic/${currentId}`
-                    : `/inference/agentic/${currentId}?sort=${mode}`;
+                    ? `${agenticBase}/${currentId}`
+                    : `${agenticBase}/${currentId}?sort=${mode}`;
                 router.replace(href, { scroll: false });
               }
             }}
diff --git a/packages/app/src/components/inference/inference-chart-config.json b/packages/app/src/components/inference/inference-chart-config.json
index 9617638f..e161a43a 100644
--- a/packages/app/src/components/inference/inference-chart-config.json
+++ b/packages/app/src/components/inference/inference-chart-config.json
@@ -7,107 +7,159 @@
     "y": "tput_per_gpu",
     "y_tpPerGpu": "tpPerGpu.y",
     "y_tpPerGpu_label": "Token Throughput per GPU (tok/s/gpu)",
+    "y_tpPerGpu_labelZh": "每 GPU token 吞吐量（tok/s/gpu）",
     "y_tpPerGpu_title": "Token Throughput per GPU",
+    "y_tpPerGpu_titleZh": "每 GPU token 吞吐量",
     "y_tpPerGpu_roofline": "upper_left",
     "y_inputTputPerGpu": "inputTputPerGpu.y",
     "y_inputTputPerGpu_label": "Input Token Throughput per GPU (tok/s/gpu)",
+    "y_inputTputPerGpu_labelZh": "每 GPU 输入 token 吞吐量（tok/s/gpu）",
     "y_inputTputPerGpu_title": "Input Token Throughput per GPU",
+    "y_inputTputPerGpu_titleZh": "每 GPU 输入 token 吞吐量",
     "y_inputTputPerGpu_roofline": "upper_left",
     "y_inputTputPerGpu_x": "p90_ttft",
     "y_inputTputPerGpu_x_label": "P90 Time To First Token (s)",
     "y_inputTputPerGpu_heading": "vs. P90 Time To First Token",
     "y_outputTputPerGpu": "outputTputPerGpu.y",
     "y_outputTputPerGpu_label": "Output Token Throughput per GPU (tok/s/gpu)",
+    "y_outputTputPerGpu_labelZh": "每 GPU 输出 token 吞吐量（tok/s/gpu）",
     "y_outputTputPerGpu_title": "Output Token Throughput per GPU",
+    "y_outputTputPerGpu_titleZh": "每 GPU 输出 token 吞吐量",
     "y_outputTputPerGpu_roofline": "upper_left",
     "y_tpPerMw": "tpPerMw.y",
     "y_tpPerMw_label": "Token Throughput per All in Utility MW (tok/s/MW)",
+    "y_tpPerMw_labelZh": "每全电源配置兆瓦 token 吞吐量（tok/s/MW）",
     "y_tpPerMw_title": "Token Throughput per All in Utility MW",
+    "y_tpPerMw_titleZh": "每全电源配置兆瓦 token 吞吐量",
     "y_tpPerMw_roofline": "upper_left",
     "y_inputTputPerMw": "inputTputPerMw.y",
     "y_inputTputPerMw_label": "Input Token Throughput per All in Utility MW (tok/s/MW)",
+    "y_inputTputPerMw_labelZh": "每全电源配置兆瓦输入 token 吞吐量（tok/s/MW）",
     "y_inputTputPerMw_title": "Input Token Throughput per All in Utility MW",
+    "y_inputTputPerMw_titleZh": "每全电源配置兆瓦输入 token 吞吐量",
     "y_inputTputPerMw_roofline": "upper_left",
     "y_outputTputPerMw": "outputTputPerMw.y",
     "y_outputTputPerMw_label": "Output Token Throughput per All in Utility MW (tok/s/MW)",
+    "y_outputTputPerMw_labelZh": "每全电源配置兆瓦输出 token 吞吐量（tok/s/MW）",
     "y_outputTputPerMw_title": "Output Token Throughput per All in Utility MW",
+    "y_outputTputPerMw_titleZh": "每全电源配置兆瓦输出 token 吞吐量",
     "y_outputTputPerMw_roofline": "upper_left",
     "y_costh": "costh.y",
     "y_costh_label": "Cost per Million Total Tokens ($)",
+    "y_costh_labelZh": "每百万总 token 成本（$）",
     "y_costh_title": "Cost per Million Total Tokens (Owning - Hyperscaler)",
+    "y_costh_titleZh": "每百万总 token 成本（自有 - 超大规模）",
     "y_costh_roofline": "lower_right",
     "y_costn": "costn.y",
     "y_costn_label": "Cost per Million Total Tokens ($)",
+    "y_costn_labelZh": "每百万总 token 成本（$）",
     "y_costn_title": "Cost per Million Total Tokens (Owning - Neocloud Giant)",
+    "y_costn_titleZh": "每百万总 token 成本（自有 - Neocloud Giant）",
     "y_costn_roofline": "lower_right",
     "y_costr": "costr.y",
     "y_costr_label": "Cost per Million Total Tokens ($)",
+    "y_costr_labelZh": "每百万总 token 成本（$）",
     "y_costr_title": "Cost per Million Total Tokens (3 Year Rental)",
+    "y_costr_titleZh": "每百万总 token 成本（3 年租赁）",
     "y_costr_roofline": "lower_right",
     "y_costhOutput": "costhOutput.y",
     "y_costhOutput_label": "Cost per Million Output Tokens ($)",
+    "y_costhOutput_labelZh": "每百万输出 token 成本（$）",
     "y_costhOutput_title": "Cost per Million Output Tokens (Owning - Hyperscaler)",
+    "y_costhOutput_titleZh": "每百万输出 token 成本（自有 - 超大规模）",
     "y_costhOutput_roofline": "lower_right",
     "y_costnOutput": "costnOutput.y",
     "y_costnOutput_label": "Cost per Million Output Tokens ($)",
+    "y_costnOutput_labelZh": "每百万输出 token 成本（$）",
     "y_costnOutput_title": "Cost per Million Output Tokens (Owning - Neocloud Giant)",
+    "y_costnOutput_titleZh": "每百万输出 token 成本（自有 - Neocloud Giant）",
     "y_costnOutput_roofline": "lower_right",
     "y_costrOutput": "costrOutput.y",
     "y_costrOutput_label": "Cost per Million Output Tokens ($)",
+    "y_costrOutput_labelZh": "每百万输出 token 成本（$）",
     "y_costrOutput_title": "Cost per Million Output Tokens (3 Year Rental)",
+    "y_costrOutput_titleZh": "每百万输出 token 成本（3 年租赁）",
     "y_costrOutput_roofline": "lower_right",
     "y_costhi": "costhi.y",
     "y_costhi_label": "Cost per Million Input Tokens ($)",
+    "y_costhi_labelZh": "每百万输入 token 成本（$）",
     "y_costhi_title": "Cost per Million Input Tokens (Owning - Hyperscaler)",
+    "y_costhi_titleZh": "每百万输入 token 成本（自有 - 超大规模）",
     "y_costhi_roofline": "lower_right",
     "y_costni": "costni.y",
     "y_costni_label": "Cost per Million Input Tokens ($)",
+    "y_costni_labelZh": "每百万输入 token 成本（$）",
     "y_costni_title": "Cost per Million Input Tokens (Owning - Neocloud Giant)",
+    "y_costni_titleZh": "每百万输入 token 成本（自有 - Neocloud Giant）",
     "y_costni_roofline": "lower_right",
     "y_costri": "costri.y",
     "y_costri_label": "Cost per Million Input Tokens ($)",
+    "y_costri_labelZh": "每百万输入 token 成本（$）",
     "y_costri_title": "Cost per Million Input Tokens (3 Year Rental)",
+    "y_costri_titleZh": "每百万输入 token 成本（3 年租赁）",
     "y_costri_roofline": "lower_right",
     "y_costUser": "costUser.y",
     "y_costUser_label": "Cost per Million Total Tokens ($)",
+    "y_costUser_labelZh": "每百万总 token 成本（$）",
     "y_costUser_title": "Cost per Million Total Tokens (Custom User Values)",
+    "y_costUser_titleZh": "每百万总 token 成本（自定义值）",
     "y_costUser_roofline": "lower_right",
     "y_powerUser": "powerUser.y",
     "y_powerUser_label": "Token Throughput per All in Utility MW (tok/s/MW)",
+    "y_powerUser_labelZh": "每全电源配置兆瓦 token 吞吐量（tok/s/MW）",
     "y_powerUser_title": "Token Throughput per All in Utility MW (Custom User Values)",
+    "y_powerUser_titleZh": "每全电源配置兆瓦 token 吞吐量（自定义值）",
     "y_powerUser_roofline": "upper_left",
     "y_jTotal": "jTotal.y",
     "y_jTotal_label": "All-in Provisioned J per Total Token (J/tok)",
+    "y_jTotal_labelZh": "每总 token 全电源配置能耗（J/tok）",
     "y_jTotal_title": "All-in Provisioned Joules per Total Token",
+    "y_jTotal_titleZh": "每总 token 全电源配置焦耳能耗",
     "y_jTotal_roofline": "lower_right",
     "y_jOutput": "jOutput.y",
     "y_jOutput_label": "All-in Provisioned J per Output Token (J/tok)",
+    "y_jOutput_labelZh": "每输出 token 全电源配置能耗（J/tok）",
     "y_jOutput_title": "All-in Provisioned Joules per Output Token",
+    "y_jOutput_titleZh": "每输出 token 全电源配置焦耳能耗",
     "y_jOutput_roofline": "lower_right",
     "y_jInput": "jInput.y",
     "y_jInput_label": "All-in Provisioned J per Input Token (J/tok)",
+    "y_jInput_labelZh": "每输入 token 全电源配置能耗（J/tok）",
     "y_jInput_title": "All-in Provisioned Joules per Input Token",
+    "y_jInput_titleZh": "每输入 token 全电源配置焦耳能耗",
     "y_jInput_roofline": "lower_right",
     "y_measuredAvgPower": "measuredAvgPower.y",
     "y_measuredAvgPower_label": "Measured Avg Power per GPU (W)",
+    "y_measuredAvgPower_labelZh": "每 GPU 实测平均功耗（W）",
     "y_measuredAvgPower_title": "Measured Average Power per GPU",
+    "y_measuredAvgPower_titleZh": "每 GPU 实测平均功耗",
     "y_measuredPrefillAvgPower": "measuredPrefillAvgPower.y",
     "y_measuredPrefillAvgPower_label": "Measured Prefill Power per GPU (W)",
+    "y_measuredPrefillAvgPower_labelZh": "每 GPU 实测 Prefill 功耗（W）",
     "y_measuredPrefillAvgPower_title": "Measured Prefill Power per GPU",
+    "y_measuredPrefillAvgPower_titleZh": "每 GPU 实测 Prefill 功耗",
     "y_measuredDecodeAvgPower": "measuredDecodeAvgPower.y",
     "y_measuredDecodeAvgPower_label": "Measured Decode Power per GPU (W)",
+    "y_measuredDecodeAvgPower_labelZh": "每 GPU 实测 Decode 功耗（W）",
     "y_measuredDecodeAvgPower_title": "Measured Decode Power per GPU",
+    "y_measuredDecodeAvgPower_titleZh": "每 GPU 实测 Decode 功耗",
     "y_measuredJPerOutputToken": "measuredJPerOutputToken.y",
     "y_measuredJPerOutputToken_label": "Measured J per Output Token (J/tok)",
+    "y_measuredJPerOutputToken_labelZh": "每输出 token 实测能耗（J/tok）",
     "y_measuredJPerOutputToken_title": "Measured Joules per Output Token",
+    "y_measuredJPerOutputToken_titleZh": "每输出 token 实测焦耳能耗",
     "y_measuredJPerOutputToken_roofline": "lower_right",
     "y_measuredJPerInputToken": "measuredJPerInputToken.y",
     "y_measuredJPerInputToken_label": "Measured J per Input Token (J/tok)",
+    "y_measuredJPerInputToken_labelZh": "每输入 token 实测能耗（J/tok）",
     "y_measuredJPerInputToken_title": "Measured Joules per Input Token",
+    "y_measuredJPerInputToken_titleZh": "每输入 token 实测焦耳能耗",
     "y_measuredJPerInputToken_roofline": "lower_right",
     "y_measuredJPerTotalToken": "measuredJPerTotalToken.y",
     "y_measuredJPerTotalToken_label": "Measured J per Token (J/tok)",
+    "y_measuredJPerTotalToken_labelZh": "每 token 实测能耗（J/tok）",
     "y_measuredJPerTotalToken_title": "Measured Joules per Token (incl. prompt)",
+    "y_measuredJPerTotalToken_titleZh": "每 token 实测焦耳能耗（含提示词）",
     "y_measuredJPerTotalToken_roofline": "lower_right",
     "y_cost_limit": 5,
     "y_latency_limit": 60
@@ -120,106 +172,158 @@
     "y": "tput_per_gpu",
     "y_tpPerGpu": "tpPerGpu.y",
     "y_tpPerGpu_label": "Token Throughput per GPU (tok/s/gpu)",
+    "y_tpPerGpu_labelZh": "每 GPU token 吞吐量（tok/s/gpu）",
     "y_tpPerGpu_title": "Token Throughput per GPU",
+    "y_tpPerGpu_titleZh": "每 GPU token 吞吐量",
     "y_tpPerGpu_roofline": "upper_right",
     "y_inputTputPerGpu": "inputTputPerGpu.y",
     "y_inputTputPerGpu_label": "Input Token Throughput per GPU (tok/s/gpu)",
+    "y_inputTputPerGpu_labelZh": "每 GPU 输入 token 吞吐量（tok/s/gpu）",
     "y_inputTputPerGpu_title": "Input Token Throughput per GPU",
+    "y_inputTputPerGpu_titleZh": "每 GPU 输入 token 吞吐量",
     "y_inputTputPerGpu_roofline": "upper_right",
     "y_inputTputPerGpu_x": "p90_ttft",
     "y_inputTputPerGpu_x_label": "P90 Time To First Token (s)",
     "y_outputTputPerGpu": "outputTputPerGpu.y",
     "y_outputTputPerGpu_label": "Output Token Throughput per GPU (tok/s/gpu)",
+    "y_outputTputPerGpu_labelZh": "每 GPU 输出 token 吞吐量（tok/s/gpu）",
     "y_outputTputPerGpu_title": "Output Token Throughput per GPU",
+    "y_outputTputPerGpu_titleZh": "每 GPU 输出 token 吞吐量",
     "y_outputTputPerGpu_roofline": "upper_right",
     "y_tpPerMw": "tpPerMw.y",
     "y_tpPerMw_label": "Token Throughput per All in Utility MW (tok/s/MW)",
+    "y_tpPerMw_labelZh": "每全电源配置兆瓦 token 吞吐量（tok/s/MW）",
     "y_tpPerMw_title": "Token Throughput per All in Utility MW",
+    "y_tpPerMw_titleZh": "每全电源配置兆瓦 token 吞吐量",
     "y_tpPerMw_roofline": "upper_right",
     "y_inputTputPerMw": "inputTputPerMw.y",
     "y_inputTputPerMw_label": "Input Token Throughput per All in Utility MW (tok/s/MW)",
+    "y_inputTputPerMw_labelZh": "每全电源配置兆瓦输入 token 吞吐量（tok/s/MW）",
     "y_inputTputPerMw_title": "Input Token Throughput per All in Utility MW",
+    "y_inputTputPerMw_titleZh": "每全电源配置兆瓦输入 token 吞吐量",
     "y_inputTputPerMw_roofline": "upper_right",
     "y_outputTputPerMw": "outputTputPerMw.y",
     "y_outputTputPerMw_label": "Output Token Throughput per All in Utility MW (tok/s/MW)",
+    "y_outputTputPerMw_labelZh": "每全电源配置兆瓦输出 token 吞吐量（tok/s/MW）",
     "y_outputTputPerMw_title": "Output Token Throughput per All in Utility MW",
+    "y_outputTputPerMw_titleZh": "每全电源配置兆瓦输出 token 吞吐量",
     "y_outputTputPerMw_roofline": "upper_right",
     "y_costh": "costh.y",
     "y_costh_label": "Cost per Million Total Tokens ($)",
+    "y_costh_labelZh": "每百万总 token 成本（$）",
     "y_costh_title": "Cost per Million Total Tokens (Owning - Hyperscaler)",
+    "y_costh_titleZh": "每百万总 token 成本（自有 - 超大规模）",
     "y_costh_roofline": "lower_left",
     "y_costn": "costn.y",
     "y_costn_label": "Cost per Million Total Tokens ($)",
+    "y_costn_labelZh": "每百万总 token 成本（$）",
     "y_costn_title": "Cost per Million Total Tokens (Owning - Neocloud Giant)",
+    "y_costn_titleZh": "每百万总 token 成本（自有 - Neocloud Giant）",
     "y_costn_roofline": "lower_left",
     "y_costr": "costr.y",
     "y_costr_label": "Cost per Million Total Tokens ($)",
+    "y_costr_labelZh": "每百万总 token 成本（$）",
     "y_costr_title": "Cost per Million Total Tokens (3 Year Rental)",
+    "y_costr_titleZh": "每百万总 token 成本（3 年租赁）",
     "y_costr_roofline": "lower_left",
     "y_costhOutput": "costhOutput.y",
     "y_costhOutput_label": "Cost per Million Output Tokens ($)",
+    "y_costhOutput_labelZh": "每百万输出 token 成本（$）",
     "y_costhOutput_title": "Cost per Million Output Tokens (Owning - Hyperscaler)",
+    "y_costhOutput_titleZh": "每百万输出 token 成本（自有 - 超大规模）",
     "y_costhOutput_roofline": "lower_left",
     "y_costnOutput": "costnOutput.y",
     "y_costnOutput_label": "Cost per Million Output Tokens ($)",
+    "y_costnOutput_labelZh": "每百万输出 token 成本（$）",
     "y_costnOutput_title": "Cost per Million Output Tokens (Owning - Neocloud Giant)",
+    "y_costnOutput_titleZh": "每百万输出 token 成本（自有 - Neocloud Giant）",
     "y_costnOutput_roofline": "lower_left",
     "y_costrOutput": "costrOutput.y",
     "y_costrOutput_label": "Cost per Million Output Tokens ($)",
+    "y_costrOutput_labelZh": "每百万输出 token 成本（$）",
     "y_costrOutput_title": "Cost per Million Output Tokens (3 Year Rental)",
+    "y_costrOutput_titleZh": "每百万输出 token 成本（3 年租赁）",
     "y_costrOutput_roofline": "lower_left",
     "y_costhi": "costhi.y",
     "y_costhi_label": "Cost per Million Input Tokens ($)",
+    "y_costhi_labelZh": "每百万输入 token 成本（$）",
     "y_costhi_title": "Cost per Million Input Tokens (Owning - Hyperscaler)",
+    "y_costhi_titleZh": "每百万输入 token 成本（自有 - 超大规模）",
     "y_costhi_roofline": "lower_left",
     "y_costni": "costni.y",
     "y_costni_label": "Cost per Million Input Tokens ($)",
+    "y_costni_labelZh": "每百万输入 token 成本（$）",
     "y_costni_title": "Cost per Million Input Tokens (Owning - Neocloud Giant)",
+    "y_costni_titleZh": "每百万输入 token 成本（自有 - Neocloud Giant）",
     "y_costni_roofline": "lower_left",
     "y_costri": "costri.y",
     "y_costri_label": "Cost per Million Input Tokens ($)",
+    "y_costri_labelZh": "每百万输入 token 成本（$）",
     "y_costri_title": "Cost per Million Input Tokens (3 Year Rental)",
+    "y_costri_titleZh": "每百万输入 token 成本（3 年租赁）",
     "y_costri_roofline": "lower_left",
     "y_costUser": "costUser.y",
     "y_costUser_label": "Cost per Million Total Tokens ($)",
+    "y_costUser_labelZh": "每百万总 token 成本（$）",
     "y_costUser_title": "Cost per Million Total Tokens (Custom User Values)",
+    "y_costUser_titleZh": "每百万总 token 成本（自定义值）",
     "y_costUser_roofline": "lower_left",
     "y_powerUser": "powerUser.y",
     "y_powerUser_label": "Token Throughput per All in Utility MW (tok/s/MW)",
+    "y_powerUser_labelZh": "每全电源配置兆瓦 token 吞吐量（tok/s/MW）",
     "y_powerUser_title": "Token Throughput per All in Utility MW (Custom User Values)",
+    "y_powerUser_titleZh": "每全电源配置兆瓦 token 吞吐量（自定义值）",
     "y_powerUser_roofline": "upper_right",
     "y_jTotal": "jTotal.y",
     "y_jTotal_label": "All-in Provisioned J per Total Token (J/tok)",
+    "y_jTotal_labelZh": "每总 token 全电源配置能耗（J/tok）",
     "y_jTotal_title": "All-in Provisioned Joules per Total Token",
+    "y_jTotal_titleZh": "每总 token 全电源配置焦耳能耗",
     "y_jTotal_roofline": "lower_left",
     "y_jOutput": "jOutput.y",
     "y_jOutput_label": "All-in Provisioned J per Output Token (J/tok)",
+    "y_jOutput_labelZh": "每输出 token 全电源配置能耗（J/tok）",
     "y_jOutput_title": "All-in Provisioned Joules per Output Token",
+    "y_jOutput_titleZh": "每输出 token 全电源配置焦耳能耗",
     "y_jOutput_roofline": "lower_left",
     "y_jInput": "jInput.y",
     "y_jInput_label": "All-in Provisioned J per Input Token (J/tok)",
+    "y_jInput_labelZh": "每输入 token 全电源配置能耗（J/tok）",
     "y_jInput_title": "All-in Provisioned Joules per Input Token",
+    "y_jInput_titleZh": "每输入 token 全电源配置焦耳能耗",
     "y_jInput_roofline": "lower_left",
     "y_measuredAvgPower": "measuredAvgPower.y",
     "y_measuredAvgPower_label": "Measured Avg Power per GPU (W)",
+    "y_measuredAvgPower_labelZh": "每 GPU 实测平均功耗（W）",
     "y_measuredAvgPower_title": "Measured Average Power per GPU",
+    "y_measuredAvgPower_titleZh": "每 GPU 实测平均功耗",
     "y_measuredPrefillAvgPower": "measuredPrefillAvgPower.y",
     "y_measuredPrefillAvgPower_label": "Measured Prefill Power per GPU (W)",
+    "y_measuredPrefillAvgPower_labelZh": "每 GPU 实测 Prefill 功耗（W）",
     "y_measuredPrefillAvgPower_title": "Measured Prefill Power per GPU",
+    "y_measuredPrefillAvgPower_titleZh": "每 GPU 实测 Prefill 功耗",
     "y_measuredDecodeAvgPower": "measuredDecodeAvgPower.y",
     "y_measuredDecodeAvgPower_label": "Measured Decode Power per GPU (W)",
+    "y_measuredDecodeAvgPower_labelZh": "每 GPU 实测 Decode 功耗（W）",
     "y_measuredDecodeAvgPower_title": "Measured Decode Power per GPU",
+    "y_measuredDecodeAvgPower_titleZh": "每 GPU 实测 Decode 功耗",
     "y_measuredJPerOutputToken": "measuredJPerOutputToken.y",
     "y_measuredJPerOutputToken_label": "Measured J per Output Token (J/tok)",
+    "y_measuredJPerOutputToken_labelZh": "每输出 token 实测能耗（J/tok）",
     "y_measuredJPerOutputToken_title": "Measured Joules per Output Token",
+    "y_measuredJPerOutputToken_titleZh": "每输出 token 实测焦耳能耗",
     "y_measuredJPerOutputToken_roofline": "lower_left",
     "y_measuredJPerInputToken": "measuredJPerInputToken.y",
     "y_measuredJPerInputToken_label": "Measured J per Input Token (J/tok)",
+    "y_measuredJPerInputToken_labelZh": "每输入 token 实测能耗（J/tok）",
     "y_measuredJPerInputToken_title": "Measured Joules per Input Token",
+    "y_measuredJPerInputToken_titleZh": "每输入 token 实测焦耳能耗",
     "y_measuredJPerInputToken_roofline": "lower_left",
     "y_measuredJPerTotalToken": "measuredJPerTotalToken.y",
     "y_measuredJPerTotalToken_label": "Measured J per Token (J/tok)",
+    "y_measuredJPerTotalToken_labelZh": "每 token 实测能耗（J/tok）",
     "y_measuredJPerTotalToken_title": "Measured Joules per Token (incl. prompt)",
+    "y_measuredJPerTotalToken_titleZh": "每 token 实测焦耳能耗（含提示词）",
     "y_measuredJPerTotalToken_roofline": "lower_left",
     "y_cost_limit": 5,
     "y_latency_limit": 60
diff --git a/packages/app/src/components/inference/types.ts b/packages/app/src/components/inference/types.ts
index 5d0981b8..becc946f 100644
--- a/packages/app/src/components/inference/types.ts
+++ b/packages/app/src/components/inference/types.ts
@@ -339,6 +339,7 @@ export type YAxisMetricKey =
 export type InferenceChartType = 'e2e' | 'interactivity';
 
 export interface ChartDefinition {
+  [key: string]: string | number | undefined;
   chartType: InferenceChartType;
   heading: string;
   x: keyof AggDataEntry;
diff --git a/packages/app/src/components/inference/ui/ChartControls.tsx b/packages/app/src/components/inference/ui/ChartControls.tsx
index 2ac914a0..aee5e1be 100644
--- a/packages/app/src/components/inference/ui/ChartControls.tsx
+++ b/packages/app/src/components/inference/ui/ChartControls.tsx
@@ -102,9 +102,15 @@ const STRINGS = {
  * pipeline is in the rollout phase (e.g. measured-power telemetry waiting on a runner-
  * side aggregation PR to start populating the DB).
  */
-const METRIC_GROUPS: { label: string; metrics: string[]; gated?: boolean }[] = [
+const METRIC_GROUPS: {
+  label: string;
+  labelZh: string;
+  metrics: string[];
+  gated?: boolean;
+}[] = [
   {
     label: 'Throughput',
+    labelZh: '吞吐量',
     metrics: [
       'y_tpPerGpu',
       'y_inputTputPerGpu',
@@ -114,15 +120,29 @@ const METRIC_GROUPS: { label: string; metrics: string[]; gated?: boolean }[] = [
       'y_outputTputPerMw',
     ],
   },
-  { label: 'Cost per Million Total Tokens', metrics: ['y_costh', 'y_costn', 'y_costr'] },
+  {
+    label: 'Cost per Million Total Tokens',
+    labelZh: '每百万总 token 成本',
+    metrics: ['y_costh', 'y_costn', 'y_costr'],
+  },
   {
     label: 'Cost per Million Output Tokens',
+    labelZh: '每百万输出 token 成本',
     metrics: ['y_costhOutput', 'y_costnOutput', 'y_costrOutput'],
   },
-  { label: 'Cost per Million Input Tokens', metrics: ['y_costhi', 'y_costni', 'y_costri'] },
-  { label: 'All-in Provisioned Energy per Token', metrics: ['y_jTotal', 'y_jOutput', 'y_jInput'] },
+  {
+    label: 'Cost per Million Input Tokens',
+    labelZh: '每百万输入 token 成本',
+    metrics: ['y_costhi', 'y_costni', 'y_costri'],
+  },
+  {
+    label: 'All-in Provisioned Energy per Token',
+    labelZh: '每 token 全电源配置能耗',
+    metrics: ['y_jTotal', 'y_jOutput', 'y_jInput'],
+  },
   {
     label: 'Measured Energy',
+    labelZh: '实测能耗',
     metrics: [
       'y_measuredPrefillAvgPower',
       'y_measuredDecodeAvgPower',
@@ -133,7 +153,7 @@ const METRIC_GROUPS: { label: string; metrics: string[]; gated?: boolean }[] = [
     ],
     gated: true,
   },
-  { label: 'Custom User Values', metrics: ['y_costUser', 'y_powerUser'] },
+  { label: 'Custom User Values', labelZh: '自定义值', metrics: ['y_costUser', 'y_powerUser'] },
 ];
 
 /** Map from metric key → human-readable title (e.g. "Token Throughput per GPU") */
@@ -148,6 +168,18 @@ const METRIC_TITLE_MAP = (() => {
   return map;
 })();
 
+const METRIC_TITLE_ZH_MAP = (() => {
+  const chartDef = (chartDefinitions as ChartDefinition[])[0];
+  const map = new Map<string, string>();
+  for (const key of Object.keys(chartDef)) {
+    if (key.startsWith('y_') && key.endsWith('_titleZh')) {
+      const metricKey = key.replace('_titleZh', '');
+      map.set(metricKey, chartDef[key] as string);
+    }
+  }
+  return map;
+})();
+
 /** Quick-filter pill groups: vendor, aggregation mode, spec-decoding method. */
 const QUICK_FILTER_VENDORS: { value: string; label: string }[] = [
   { value: 'NVIDIA', label: 'NVIDIA' },
@@ -173,7 +205,8 @@ interface ChartControlsProps {
 }
 
 export default function ChartControls({ hideGpuComparison = false }: ChartControlsProps) {
-  const t = STRINGS[useLocale()];
+  const locale = useLocale();
+  const t = STRINGS[locale];
   // The percentile selector is rendered conditionally on `selectedSequence`,
   // which on the client is hydrated from URL params. SSR doesn't see the URL,
   // so deferring the conditional until after mount keeps the initial DOM
@@ -242,13 +275,18 @@ export default function ChartControls({ hideGpuComparison = false }: ChartContro
     () =>
       visibleGroups
         .map((group) => ({
-          groupLabel: group.label,
+          groupLabel: locale === 'zh' ? group.labelZh : group.label,
           options: group.metrics
             .filter((m) => METRIC_TITLE_MAP.has(m))
-            .map((m) => ({ value: m, label: METRIC_TITLE_MAP.get(m)! })),
+            .map((m) => ({
+              value: m,
+              label:
+                (locale === 'zh' ? METRIC_TITLE_ZH_MAP.get(m) : undefined) ??
+                METRIC_TITLE_MAP.get(m)!,
+            })),
         }))
         .filter((g) => g.options.length > 0),
-    [visibleGroups],
+    [visibleGroups, locale],
   );
 
   const trackCombinedFilters = () => {
@@ -463,12 +501,15 @@ export default function ChartControls({ hideGpuComparison = false }: ChartContro
               triggerTestId="yaxis-metric-selector"
               value={selectedYAxisMetric}
               onValueChange={handleYAxisMetricChange}
-              placeholder="Y-Axis Metric"
+              placeholder={t.yAxisMetric}
               trackPrefix="yaxis_metric"
               groups={groupedYAxisOptions.map((g) => ({
                 label: g.groupLabel,
                 options: g.options,
               }))}
+              searchPlaceholder={locale === 'zh' ? '搜索…' : undefined}
+              noResultsLabel={locale === 'zh' ? '无结果' : undefined}
+              clearSearchLabel={locale === 'zh' ? '清除搜索' : undefined}
             />
           </div>
 
@@ -540,6 +581,10 @@ export default function ChartControls({ hideGpuComparison = false }: ChartContro
                   onOpenChange={handleDropdownOpenChange('gpu')}
                   placeholder={t.gpuConfigPlaceholder}
                   maxSelections={4}
+                  searchPlaceholder={locale === 'zh' ? '搜索…' : undefined}
+                  noResultsLabel={locale === 'zh' ? '无结果' : undefined}
+                  clearSearchLabel={locale === 'zh' ? '清除搜索' : undefined}
+                  selectedSuffix={locale === 'zh' ? ' 已选' : undefined}
                 />
               </div>
             </div>
diff --git a/packages/app/src/components/inference/ui/ChartDisplay.tsx b/packages/app/src/components/inference/ui/ChartDisplay.tsx
index b4f24c44..1754b15e 100644
--- a/packages/app/src/components/inference/ui/ChartDisplay.tsx
+++ b/packages/app/src/components/inference/ui/ChartDisplay.tsx
@@ -34,6 +34,7 @@ import { type SegmentedToggleOption, SegmentedToggle } from '@/components/ui/seg
 import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { ChartShareActions, MetricAssumptionNotes } from '@/components/ui/chart-display-helpers';
 import { UnofficialDomainNotice } from '@/components/ui/unofficial-domain-notice';
+import { metricLabel, metricTitle } from '@/lib/chart-utils';
 import { exportToCsv } from '@/lib/csv-export';
 import { inferenceChartToCsv } from '@/lib/csv-export-helpers';
 import { knownIssueCsvNote, matchKnownConfigIssues } from '@/lib/known-issues';
@@ -100,6 +101,9 @@ const STRINGS = {
     performanceOverTimeDesc:
       'Double-click points on the scatter chart to track configurations over time.',
     viewMode: 'View mode',
+    vsTtft: (word: string) => `vs. ${word} Time To First Token`,
+    vsE2eLatency: (pctl?: string) =>
+      pctl ? `vs. ${pctl} End-to-end Latency` : 'vs. End-to-end Latency',
   },
   zh: {
     inferencePerformance: '推理性能',
@@ -115,16 +119,38 @@ const STRINGS = {
     performanceOverTime: '性能趋势',
     performanceOverTimeDesc: '双击散点图上的数据点以追踪配置随时间的变化。',
     viewMode: '视图模式',
+    vsTtft: (word: string) => `vs. ${word === 'Median' ? '中位' : word} 首 token 延迟（TTFT）`,
+    vsE2eLatency: (pctl?: string) => (pctl ? `vs. ${pctl} 端到端延迟` : 'vs. 端到端延迟'),
   },
 } as const;
 
-const X_AXIS_MODE_BUTTONS: { value: XAxisMode; label: string }[] = [
-  { value: 'interactivity', label: 'Interactivity' },
-  { value: 'e2e', label: 'E2E Latency' },
-  { value: 'ttft', label: 'TTFT' },
-  { value: 'normalized-e2e', label: 'Normalized E2E' },
-  { value: 'session-time', label: 'Session Time' },
-  { value: 'prefill-tps', label: 'Prefill TPS / user' },
+// Translate the "vs. …" chart-heading suffix from inference-chart-config.json
+// into Chinese. useChartData rewrites the heading with the selected percentile
+// for agentic sequences (e.g. "vs. P90 Interactivity"), so this matches the
+// pattern instead of a fixed string; unknown headings pass through unchanged.
+const HEADING_SUBJECT_ZH: Record<string, string> = {
+  Interactivity: '交互性',
+  'End-to-end Latency': '端到端延迟',
+  'Time To First Token': '首 token 延迟（TTFT）',
+};
+
+function zhHeading(configured: string): string {
+  const match = /^vs\.\s+(?:(?<pctl>Median|Mean|P\d+(?:\.\d+)?)\s+)?(?<subject>.+)$/iu.exec(
+    configured,
+  );
+  const subjectZh = match?.groups && HEADING_SUBJECT_ZH[match.groups.subject];
+  if (!subjectZh) return configured;
+  const pctl = match.groups?.pctl;
+  return `vs. ${pctl ? `${pctl} ` : ''}${subjectZh}`;
+}
+
+const X_AXIS_MODE_BUTTONS: { value: XAxisMode; label: string; labelZh: string }[] = [
+  { value: 'interactivity', label: 'Interactivity', labelZh: '交互性' },
+  { value: 'e2e', label: 'E2E Latency', labelZh: '端到端延迟' },
+  { value: 'ttft', label: 'TTFT', labelZh: 'TTFT' },
+  { value: 'normalized-e2e', label: 'Normalized E2E', labelZh: 'Normalized E2E' },
+  { value: 'session-time', label: 'Session Time', labelZh: '会话时长' },
+  { value: 'prefill-tps', label: 'Prefill TPS / user', labelZh: 'Prefill TPS / user' },
 ];
 
 /**
@@ -135,8 +161,12 @@ const X_AXIS_MODE_BUTTONS: { value: XAxisMode; label: string }[] = [
  */
 interface DerivedXModeSpec {
   xLabel: (percentileLabel: string) => string;
+  /** Chinese x-label; omit to reuse the English one (technical terms). */
+  xLabelZh?: (percentileLabel: string) => string;
   /** Chart heading suffix ("vs. …") shown above the plot. */
   heading: (percentileLabel: string) => string;
+  /** Chinese heading suffix; omit to reuse the English one. */
+  headingZh?: (percentileLabel: string) => string;
   rooflineCorner: 'upper_right' | 'upper_left';
   /** Pull the raw metric for this mode off the derived-metrics payload. */
   value: (m: DerivedAgenticMetric | undefined, percentile: string) => number | null | undefined;
@@ -147,14 +177,18 @@ interface DerivedXModeSpec {
 const DERIVED_X_MODE_SPECS: Partial<Record<XAxisMode, DerivedXModeSpec>> = {
   'session-time': {
     xLabel: () => 'Mean Normalized Session Time (min)',
+    xLabelZh: () => '平均归一化会话时长（min）',
     heading: () => 'vs. Mean Normalized Session Time',
+    headingZh: () => 'vs. 平均归一化会话时长',
     rooflineCorner: 'upper_right',
     value: (m) => m?.normalized_session_time_s,
     toX: (raw) => raw / 60,
   },
   'normalized-e2e': {
     xLabel: (pctl) => `${pctl} Normalized E2E @ ${NORMALIZED_E2E_OUTPUT_TOKENS} output tokens (s)`,
+    xLabelZh: (pctl) => `${pctl} Normalized E2E @ ${NORMALIZED_E2E_OUTPUT_TOKENS} 输出 token（s）`,
     heading: (pctl) => `vs. ${pctl} Normalized E2E @ ${NORMALIZED_E2E_OUTPUT_TOKENS} output tokens`,
+    headingZh: (pctl) => `vs. ${pctl} Normalized E2E @ ${NORMALIZED_E2E_OUTPUT_TOKENS} 输出 token`,
     rooflineCorner: 'upper_right',
     value: (m, percentile) =>
       percentile === 'p75' ? m?.p75_normalized_e2e_400_s : m?.p90_normalized_e2e_400_s,
@@ -414,9 +448,8 @@ export default function ChartDisplay() {
   // Get the current Y-axis label from the first graph's chart definition
   const currentYLabel = useMemo(() => {
     if (graphs.length === 0) return '';
-    const yLabelKey = `${selectedYAxisMetric}_label` as keyof (typeof graphs)[0]['chartDefinition'];
-    return (graphs[0].chartDefinition[yLabelKey] as string) || '';
-  }, [graphs, selectedYAxisMetric]);
+    return metricLabel(graphs[0].chartDefinition, selectedYAxisMetric, locale);
+  }, [graphs, selectedYAxisMetric, locale]);
 
   // Derive x-axis trend lines by swapping each point's x → value
   const xTrendLines = useMemo(() => {
@@ -501,7 +534,9 @@ export default function ChartDisplay() {
   const renderableGraphs = useMemo(() => {
     if (!derivedSpec) return visibleGraphs;
     if (!derivedMetrics) return visibleGraphs.map((graph) => ({ ...graph, data: [] }));
-    const xLabel = derivedSpec.xLabel(selectedPercentile.toUpperCase());
+    const xLabelFn =
+      locale === 'zh' && derivedSpec.xLabelZh ? derivedSpec.xLabelZh : derivedSpec.xLabel;
+    const xLabel = xLabelFn(selectedPercentile.toUpperCase());
     return visibleGraphs.map((graph) => {
       const chartDefinition = {
         ...graph.chartDefinition,
@@ -520,7 +555,7 @@ export default function ChartDisplay() {
         .filter((point): point is NonNullable<typeof point> => point !== null);
       return { ...graph, chartDefinition, data };
     });
-  }, [derivedSpec, visibleGraphs, derivedMetrics, selectedYAxisMetric, selectedPercentile]);
+  }, [derivedSpec, visibleGraphs, derivedMetrics, selectedYAxisMetric, selectedPercentile, locale]);
 
   const displayGraphs =
     isFirstLoad || isDerivedLoading
@@ -612,27 +647,27 @@ export default function ChartDisplay() {
                       const chartCaption = (
                         <>
                           <h2 className="text-lg font-semibold">
-                            {
-                              graph.chartDefinition[
-                                `${selectedYAxisMetric}_title` as keyof typeof graph.chartDefinition
-                              ]
-                            }{' '}
+                            {metricTitle(graph.chartDefinition, selectedYAxisMetric, locale)}{' '}
                             {(() => {
-                              // For Input metrics with dynamic x-axis, use dynamic heading
-                              const metricTitle =
-                                (graph.chartDefinition[
-                                  `${selectedYAxisMetric}_title` as keyof typeof graph.chartDefinition
-                                ] as string) || '';
-                              const isInputMetric = metricTitle.toLowerCase().includes('input');
+                              // For Input metrics with dynamic x-axis, use dynamic heading.
+                              // Classify off the ENGLISH title — the localized one has no
+                              // 'input' substring to match on zh pages.
+                              const isInputMetric = metricTitle(
+                                graph.chartDefinition,
+                                selectedYAxisMetric,
+                                'en',
+                              )
+                                .toLowerCase()
+                                .includes('input');
                               if (
                                 graph.chartDefinition.chartType === 'interactivity' &&
                                 isInputMetric &&
                                 selectedXAxisMetric
                               ) {
                                 if (selectedXAxisMetric === 'p99_ttft') {
-                                  return 'vs. P99 Time To First Token';
+                                  return t.vsTtft('P99');
                                 } else if (selectedXAxisMetric === 'median_ttft') {
-                                  return 'vs. Median Time To First Token';
+                                  return t.vsTtft('Median');
                                 }
                               }
 
@@ -641,25 +676,29 @@ export default function ChartDisplay() {
                               if (graph.chartDefinition.chartType === 'e2e') {
                                 const modeSpec = DERIVED_X_MODE_SPECS[selectedXAxisMode];
                                 if (modeSpec) {
-                                  return modeSpec.heading(selectedPercentile.toUpperCase());
+                                  const heading =
+                                    locale === 'zh' && modeSpec.headingZh
+                                      ? modeSpec.headingZh
+                                      : modeSpec.heading;
+                                  return heading(selectedPercentile.toUpperCase());
                                 }
                                 if (selectedE2eXAxisMetric?.endsWith('_ttft')) {
                                   const percentile = selectedE2eXAxisMetric.replace(/_ttft$/u, '');
                                   const word =
                                     percentile === 'median' ? 'Median' : percentile.toUpperCase();
-                                  return `vs. ${word} Time To First Token`;
+                                  return t.vsTtft(word);
                                 }
                                 return isAgenticSequence
-                                  ? `vs. ${selectedPercentile.toUpperCase()} End-to-end Latency`
-                                  : 'vs. End-to-end Latency';
+                                  ? t.vsE2eLatency(selectedPercentile.toUpperCase())
+                                  : t.vsE2eLatency();
                               }
 
                               // Fall back to configured heading
-                              return (
+                              const configured =
                                 graph.chartDefinition[
                                   `${selectedYAxisMetric}_heading` as keyof typeof graph.chartDefinition
-                                ] || graph.chartDefinition.heading
-                              );
+                                ] || graph.chartDefinition.heading;
+                              return locale === 'zh' ? zhHeading(String(configured)) : configured;
                             })()}
                           </h2>
                           <p className="text-sm text-muted-foreground mb-2">
@@ -728,11 +767,7 @@ export default function ChartDisplay() {
                           modelLabel={graph.model}
                           data={graph.data}
                           xLabel={graph.chartDefinition.x_label}
-                          yLabel={`${
-                            graph.chartDefinition[
-                              `${selectedYAxisMetric}_label` as keyof typeof graph.chartDefinition
-                            ]
-                          }`}
+                          yLabel={metricLabel(graph.chartDefinition, selectedYAxisMetric, locale)}
                           chartDefinition={graph.chartDefinition}
                           caption={chartCaption}
                           runNumbering={runNumbering}
@@ -744,11 +779,7 @@ export default function ChartDisplay() {
                             modelLabel={graph.model}
                             data={graph.data}
                             xLabel={graph.chartDefinition.x_label}
-                            yLabel={`${
-                              graph.chartDefinition[
-                                `${selectedYAxisMetric}_label` as keyof typeof graph.chartDefinition
-                              ]
-                            }`}
+                            yLabel={metricLabel(graph.chartDefinition, selectedYAxisMetric, locale)}
                             chartDefinition={graph.chartDefinition}
                             caption={chartCaption}
                             overlayData={
@@ -778,11 +809,7 @@ export default function ChartDisplay() {
                         }}
                         parentChartId={`chart-${graphIndex}`}
                         chartDefinition={graph.chartDefinition}
-                        yLabel={`${
-                          graph.chartDefinition[
-                            `${selectedYAxisMetric}_label` as keyof typeof graph.chartDefinition
-                          ]
-                        }`}
+                        yLabel={metricLabel(graph.chartDefinition, selectedYAxisMetric, locale)}
                         xLabel={graph.chartDefinition.x_label}
                       />
                     )}
@@ -862,14 +889,14 @@ export default function ChartDisplay() {
             // Before mount, render all buttons so SSR and first client render match.
             if (!mounted) return true;
             return isAgenticSequence;
-          }).map(({ value, label }) => (
+          }).map(({ value, label, labelZh }) => (
             <TabsTrigger
               key={value}
               value={value}
               data-testid={`x-axis-mode-${value}`}
               className="min-w-[130px] sm:min-w-[140px] flex-1 sm:flex-initial justify-center"
             >
-              {label}
+              {locale === 'zh' ? labelZh : label}
             </TabsTrigger>
           ))}
         </TabsList>
diff --git a/packages/app/src/components/inference/ui/GPUGraph.tsx b/packages/app/src/components/inference/ui/GPUGraph.tsx
index da5443e4..c81aed0f 100644
--- a/packages/app/src/components/inference/ui/GPUGraph.tsx
+++ b/packages/app/src/components/inference/ui/GPUGraph.tsx
@@ -10,6 +10,7 @@ import ChartLegend from '@/components/ui/chart-legend';
 import { getHardwareConfig, getModelSortIndex } from '@/lib/constants';
 import { getChartWatermark } from '@/lib/data-mappings';
 import { generateGpuDateColors } from '@/lib/dynamic-colors';
+import { useLocale } from '@/lib/use-locale';
 import { formatNumber, getDisplayLabel, updateRepoUrl } from '@/lib/utils';
 import { useThemeColors } from '@/hooks/useThemeColors';
 import { useTraceAvailability } from '@/hooks/api/use-trace-availability';
@@ -71,6 +72,27 @@ function labelTextFor(pts: InferenceData[], numbering: Map<string, number>): str
   return `${hwLabel} • ${comparisonEntryLabel(String(pts[0].date), numbering)}`;
 }
 
+const GPU_STRINGS = {
+  en: {
+    logScale: 'Log Scale',
+    highContrast: 'High Contrast',
+    optimalOnly: 'Optimal Only',
+    labels: 'Labels',
+    parallelismLabels: 'Parallelism Labels',
+    lineLabels: 'Line Labels',
+    resetFilter: 'Reset filter',
+  },
+  zh: {
+    logScale: '对数缩放',
+    highContrast: '高对比度',
+    optimalOnly: '仅最优',
+    labels: '标签',
+    parallelismLabels: '并行配置标签',
+    lineLabels: '曲线标签',
+    resetFilter: '重置筛选',
+  },
+} as const;
+
 const GPUGraph = React.memo(
   ({
     chartId,
@@ -109,6 +131,8 @@ const GPUGraph = React.memo(
       showLineLabels,
       setShowLineLabels,
     } = useInference();
+    const locale = useLocale();
+    const legendT = GPU_STRINGS[locale];
     const { resolvedTheme } = useTheme();
     const chartRef = useRef<D3ChartHandle>(null);
 
@@ -928,7 +952,7 @@ const GPUGraph = React.memo(
             switches={[
               {
                 id: 'gpu-log-scale',
-                label: 'Log Scale',
+                label: legendT.logScale,
                 checked: logScale,
                 onCheckedChange: (c) => {
                   setLogScale(c);
@@ -937,7 +961,7 @@ const GPUGraph = React.memo(
               },
               {
                 id: 'gpu-high-contrast',
-                label: 'High Contrast',
+                label: legendT.highContrast,
                 checked: highContrast,
                 onCheckedChange: (c) => {
                   setHighContrast(c);
@@ -946,7 +970,7 @@ const GPUGraph = React.memo(
               },
               {
                 id: 'gpu-hide-non-optimal',
-                label: 'Optimal Only',
+                label: legendT.optimalOnly,
                 checked: hideNonOptimal,
                 onCheckedChange: (c) => {
                   setHideNonOptimal(c);
@@ -955,7 +979,7 @@ const GPUGraph = React.memo(
               },
               {
                 id: 'gpu-point-labels',
-                label: 'Labels',
+                label: legendT.labels,
                 checked: showPointLabels,
                 onCheckedChange: (c) => {
                   setShowPointLabels(c);
@@ -964,7 +988,7 @@ const GPUGraph = React.memo(
               },
               {
                 id: 'gpu-parallelism-labels',
-                label: 'Parallelism Labels',
+                label: legendT.parallelismLabels,
                 checked: useAdvancedLabels,
                 onCheckedChange: (c) => {
                   setUseAdvancedLabels(c);
@@ -976,7 +1000,7 @@ const GPUGraph = React.memo(
               },
               {
                 id: 'gpu-line-labels',
-                label: 'Line Labels',
+                label: legendT.lineLabels,
                 checked: showLineLabels,
                 onCheckedChange: (c) => {
                   setShowLineLabels(c);
@@ -987,7 +1011,7 @@ const GPUGraph = React.memo(
             actions={[
               {
                 id: 'gpu-reset-filter',
-                label: 'Reset filter',
+                label: legendT.resetFilter,
                 onClick: () => {
                   selectAllActiveDates();
                   track('gpu_timeseries_reset_filter');
diff --git a/packages/app/src/components/inference/ui/ScatterGraph.tsx b/packages/app/src/components/inference/ui/ScatterGraph.tsx
index dc360e15..b53c970b 100644
--- a/packages/app/src/components/inference/ui/ScatterGraph.tsx
+++ b/packages/app/src/components/inference/ui/ScatterGraph.tsx
@@ -24,6 +24,7 @@ import {
   Sequence,
 } from '@/lib/data-mappings';
 import { matchKnownConfigIssues, pointMatchesIssue } from '@/lib/known-issues';
+import { useLocale } from '@/lib/use-locale';
 import { formatNumber, getDisplayLabel, updateRepoUrl } from '@/lib/utils';
 import { D3Chart } from '@/lib/d3-chart/D3Chart';
 import type {
@@ -290,6 +291,29 @@ const lineLabelText = (
   return includePrecision ? `${base} ${getPrecisionLabel(precision as Precision)}` : base;
 };
 
+const SCATTER_STRINGS = {
+  en: {
+    logScale: 'Log Scale',
+    optimalOnly: 'Optimal Only',
+    labels: 'Labels',
+    highContrast: 'High Contrast',
+    parallelismLabels: 'Parallelism Labels',
+    gradientLabels: 'Gradient Labels',
+    lineLabels: 'Line Labels',
+    resetFilter: 'Reset filter',
+  },
+  zh: {
+    logScale: '对数缩放',
+    optimalOnly: '仅最优',
+    labels: '标签',
+    highContrast: '高对比度',
+    parallelismLabels: '并行配置标签',
+    gradientLabels: '渐变标签',
+    lineLabels: '曲线标签',
+    resetFilter: '重置筛选',
+  },
+} as const;
+
 const ScatterGraph = React.memo(
   ({
     chartId,
@@ -347,6 +371,8 @@ const ScatterGraph = React.memo(
       selectedSequence,
       quickFilters,
     } = useInference();
+    const locale = useLocale();
+    const legendT = SCATTER_STRINGS[locale];
 
     const {
       isUnofficialRun,
@@ -2662,7 +2688,7 @@ const ScatterGraph = React.memo(
                   : [
                       {
                         id: 'scatter-log-scale',
-                        label: 'Log Scale',
+                        label: legendT.logScale,
                         checked: logScale,
                         onCheckedChange: (checked: boolean) => {
                           setLogScale(checked);
@@ -2672,7 +2698,7 @@ const ScatterGraph = React.memo(
                     ]),
                 {
                   id: 'scatter-hide-non-optimal',
-                  label: 'Optimal Only',
+                  label: legendT.optimalOnly,
                   checked: hideNonOptimal,
                   onCheckedChange: (checked: boolean) => {
                     setHideNonOptimal(checked);
@@ -2692,7 +2718,7 @@ const ScatterGraph = React.memo(
                 },
                 {
                   id: 'scatter-point-labels',
-                  label: 'Labels',
+                  label: legendT.labels,
                   checked: showPointLabels,
                   onCheckedChange: (checked: boolean) => {
                     setShowPointLabels(checked);
@@ -2701,7 +2727,7 @@ const ScatterGraph = React.memo(
                 },
                 {
                   id: 'scatter-high-contrast',
-                  label: 'High Contrast',
+                  label: legendT.highContrast,
                   checked: highContrast,
                   onCheckedChange: (checked: boolean) => {
                     setHighContrast(checked);
@@ -2710,7 +2736,7 @@ const ScatterGraph = React.memo(
                 },
                 {
                   id: 'scatter-parallelism-labels',
-                  label: 'Parallelism Labels',
+                  label: legendT.parallelismLabels,
                   checked: useAdvancedLabels,
                   onCheckedChange: (checked: boolean) => {
                     setUseAdvancedLabels(checked);
@@ -2738,7 +2764,7 @@ const ScatterGraph = React.memo(
                 },
                 {
                   id: 'scatter-gradient-labels',
-                  label: 'Gradient Labels',
+                  label: legendT.gradientLabels,
                   checked: showGradientLabels,
                   onCheckedChange: (checked: boolean) => {
                     setShowGradientLabels(checked);
@@ -2747,7 +2773,7 @@ const ScatterGraph = React.memo(
                 },
                 {
                   id: 'scatter-line-labels',
-                  label: 'Line Labels',
+                  label: legendT.lineLabels,
                   checked: showLineLabels,
                   onCheckedChange: (checked: boolean) => {
                     setShowLineLabels(checked);
@@ -2784,7 +2810,7 @@ const ScatterGraph = React.memo(
                   ? [
                       {
                         id: 'scatter-reset-filter',
-                        label: 'Reset filter',
+                        label: legendT.resetFilter,
                         onClick: () => {
                           selectAllHwTypes();
                           setLocalOfficialOverride(null);
diff --git a/packages/app/src/components/latest-image/latest-image-content.tsx b/packages/app/src/components/latest-image/latest-image-content.tsx
index 3e97c3aa..a68d1d6e 100644
--- a/packages/app/src/components/latest-image/latest-image-content.tsx
+++ b/packages/app/src/components/latest-image/latest-image-content.tsx
@@ -18,6 +18,7 @@ import { useFrameworkReleases } from '@/hooks/api/use-framework-releases';
 import { useLatestImages } from '@/hooks/api/use-latest-images';
 import type { LatestImageRow } from '@/lib/api';
 import { track } from '@/lib/analytics';
+import { useLocale } from '@/lib/use-locale';
 import { getFrameworkLabel } from '@/lib/utils';
 import {
   AGE_MAX_RED_DAYS,
@@ -28,6 +29,79 @@ import {
   isOutdated,
 } from './latest-image-utils';
 
+const STRINGS = {
+  en: {
+    title: 'Current InferenceX Image',
+    description: 'Docker image tags for each model and GPU configuration.',
+    loading: 'Loading...',
+    error: 'Failed to load image data.',
+    noMatch: 'No image data matches the selected filters.',
+    labelModel: 'Model',
+    tooltipModel: 'Filter by language model.',
+    labelPrecision: 'Precision',
+    tooltipPrecision: 'Numerical precision used for model weights.',
+    labelIslOsl: 'ISL / OSL',
+    tooltipIslOsl: 'Input Sequence Length / Output Sequence Length in tokens.',
+    labelSpecDecode: 'Spec Decode',
+    tooltipSpecDecode: 'Speculative decoding method. MTP = Multi-Token Prediction.',
+    labelGpuSku: 'GPU SKU',
+    tooltipGpuSku: 'Filter by GPU model (e.g. H200, MI300X, B200).',
+    labelNodeType: 'Node Type',
+    tooltipNodeType:
+      'Single node = vLLM/SGLang/TRTLLM. Disagg = NVIDIA Dynamo or AMD Mori with separate prefill/decode pools.',
+    labelFramework: 'Framework',
+    tooltipFramework:
+      'Filter by inference engine (sglang, vllm, TensorRT, atom). Disagg variants (dynamo-*, mori-*) collapse into their base engine. Empty = all frameworks.',
+    allModels: 'All Models',
+    all: 'All',
+    singleNode: 'Single Node',
+    disagg: 'Disagg (Dynamo / Mori)',
+    allFrameworks: 'All frameworks',
+    thModel: 'Model',
+    thPrecision: 'Precision',
+    thGpuSku: 'GPU SKU',
+    thSpecDecode: 'Spec Decode',
+    thCurrentTag: 'Current InferenceX Image Tag',
+    thActualLatest: 'Actual Latest Tag',
+    thDaysSince: 'Days Since Update',
+  },
+  zh: {
+    title: 'InferenceX 当前镜像',
+    description: '各模型与 GPU 配置的 Docker 镜像标签。',
+    loading: '加载中……',
+    error: '无法加载镜像数据。',
+    noMatch: '没有符合当前筛选条件的镜像数据。',
+    labelModel: '模型',
+    tooltipModel: '按语言模型筛选。',
+    labelPrecision: '精度',
+    tooltipPrecision: '模型权重使用的数值精度。',
+    labelIslOsl: 'ISL / OSL',
+    tooltipIslOsl: '输入序列长度 / 输出序列长度（token 数）。',
+    labelSpecDecode: '投机解码',
+    tooltipSpecDecode: '投机解码方式。MTP = 多 Token 预测。',
+    labelGpuSku: 'GPU SKU',
+    tooltipGpuSku: '按 GPU 型号筛选（如 H200、MI300X、B200）。',
+    labelNodeType: '节点类型',
+    tooltipNodeType:
+      '单节点 = vLLM/SGLang/TRTLLM。分离式 = NVIDIA Dynamo 或 AMD Mori，分开的预填充/解码池。',
+    labelFramework: '框架',
+    tooltipFramework:
+      '按推理引擎筛选（sglang、vllm、TensorRT、atom）。分离式变体（dynamo-*、mori-*）归入基础引擎。留空 = 全部框架。',
+    allModels: '全部模型',
+    all: '全部',
+    singleNode: '单节点',
+    disagg: '分离式（Dynamo / Mori）',
+    allFrameworks: '全部框架',
+    thModel: '模型',
+    thPrecision: '精度',
+    thGpuSku: 'GPU SKU',
+    thSpecDecode: '投机解码',
+    thCurrentTag: '当前 InferenceX 镜像标签',
+    thActualLatest: '实际最新标签',
+    thDaysSince: '距上次更新天数',
+  },
+} as const;
+
 /**
  * Disaggregated frameworks pair a separate prefill/decode pool — identified by
  * `dynamo-*` (NVIDIA Dynamo) or `mori-*` (AMD Mori) prefix on the framework key.
@@ -86,6 +160,8 @@ function formatSpecMethod(method: string) {
 export function CurrentImageContent() {
   const { data, isLoading, error } = useLatestImages();
   const { data: releases } = useFrameworkReleases();
+  const locale = useLocale();
+  const t = STRINGS[locale];
 
   const [selectedModel, setSelectedModel] = useState<string>('all');
   const [selectedPrecision, setSelectedPrecision] = useState<string>('all');
@@ -144,17 +220,13 @@ export function CurrentImageContent() {
   return (
     <div className="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8">
       <div className="mb-8">
-        <h1 className="text-3xl font-bold tracking-tight">Current InferenceX Image</h1>
-        <p className="mt-2 text-muted-foreground">
-          Docker image tags for each model and GPU configuration.
-        </p>
+        <h1 className="text-3xl font-bold tracking-tight">{t.title}</h1>
+        <p className="mt-2 text-muted-foreground">{t.description}</p>
       </div>
 
-      {isLoading && <div className="py-12 text-center text-muted-foreground">Loading...</div>}
+      {isLoading && <div className="py-12 text-center text-muted-foreground">{t.loading}</div>}
 
-      {error && (
-        <div className="py-12 text-center text-destructive">Failed to load image data.</div>
-      )}
+      {error && <div className="py-12 text-center text-destructive">{t.error}</div>}
 
       {options && (
         <TooltipProvider delayDuration={0}>
@@ -162,8 +234,8 @@ export function CurrentImageContent() {
             <div className="flex flex-col space-y-1.5">
               <LabelWithTooltip
                 htmlFor="image-model-select"
-                label="Model"
-                tooltip="Filter by language model."
+                label={t.labelModel}
+                tooltip={t.tooltipModel}
               />
               <Select
                 value={selectedModel}
@@ -176,7 +248,7 @@ export function CurrentImageContent() {
                   <SelectValue />
                 </SelectTrigger>
                 <SelectContent>
-                  <SelectItem value="all">All Models</SelectItem>
+                  <SelectItem value="all">{t.allModels}</SelectItem>
                   {options.models.map((m) => (
                     <SelectItem key={m} value={m}>
                       {m}
@@ -189,8 +261,8 @@ export function CurrentImageContent() {
             <div className="flex flex-col space-y-1.5">
               <LabelWithTooltip
                 htmlFor="image-precision-select"
-                label="Precision"
-                tooltip="Numerical precision used for model weights."
+                label={t.labelPrecision}
+                tooltip={t.tooltipPrecision}
               />
               <Select
                 value={selectedPrecision}
@@ -203,7 +275,7 @@ export function CurrentImageContent() {
                   <SelectValue />
                 </SelectTrigger>
                 <SelectContent>
-                  <SelectItem value="all">All</SelectItem>
+                  <SelectItem value="all">{t.all}</SelectItem>
                   {options.precisions.map((p) => (
                     <SelectItem key={p} value={p}>
                       {p.toUpperCase()}
@@ -216,8 +288,8 @@ export function CurrentImageContent() {
             <div className="flex flex-col space-y-1.5">
               <LabelWithTooltip
                 htmlFor="image-sequence-select"
-                label="ISL / OSL"
-                tooltip="Input Sequence Length / Output Sequence Length in tokens."
+                label={t.labelIslOsl}
+                tooltip={t.tooltipIslOsl}
               />
               <Select
                 value={selectedSequence}
@@ -242,8 +314,8 @@ export function CurrentImageContent() {
             <div className="flex flex-col space-y-1.5">
               <LabelWithTooltip
                 htmlFor="image-spec-decode-select"
-                label="Spec Decode"
-                tooltip="Speculative decoding method. MTP = Multi-Token Prediction."
+                label={t.labelSpecDecode}
+                tooltip={t.tooltipSpecDecode}
               />
               <Select
                 value={selectedSpecMethod}
@@ -256,7 +328,7 @@ export function CurrentImageContent() {
                   <SelectValue />
                 </SelectTrigger>
                 <SelectContent>
-                  <SelectItem value="all">All</SelectItem>
+                  <SelectItem value="all">{t.all}</SelectItem>
                   {options.specMethods.map((m) => (
                     <SelectItem key={m} value={m}>
                       {formatSpecMethod(m)}
@@ -269,8 +341,8 @@ export function CurrentImageContent() {
             <div className="flex flex-col space-y-1.5">
               <LabelWithTooltip
                 htmlFor="image-hardware-select"
-                label="GPU SKU"
-                tooltip="Filter by GPU model (e.g. H200, MI300X, B200)."
+                label={t.labelGpuSku}
+                tooltip={t.tooltipGpuSku}
               />
               <Select
                 value={selectedHardware}
@@ -283,7 +355,7 @@ export function CurrentImageContent() {
                   <SelectValue />
                 </SelectTrigger>
                 <SelectContent>
-                  <SelectItem value="all">All</SelectItem>
+                  <SelectItem value="all">{t.all}</SelectItem>
                   {options.hardwares.map((h) => (
                     <SelectItem key={h} value={h}>
                       {h.toUpperCase()}
@@ -296,8 +368,8 @@ export function CurrentImageContent() {
             <div className="flex flex-col space-y-1.5">
               <LabelWithTooltip
                 htmlFor="image-node-type-select"
-                label="Node Type"
-                tooltip="Single node = vLLM/SGLang/TRTLLM. Disagg = NVIDIA Dynamo or AMD Mori with separate prefill/decode pools."
+                label={t.labelNodeType}
+                tooltip={t.tooltipNodeType}
               />
               <Select
                 value={selectedNodeType}
@@ -310,9 +382,9 @@ export function CurrentImageContent() {
                   <SelectValue />
                 </SelectTrigger>
                 <SelectContent>
-                  <SelectItem value="single">Single Node</SelectItem>
-                  <SelectItem value="disagg">Disagg (Dynamo / Mori)</SelectItem>
-                  <SelectItem value="all">All</SelectItem>
+                  <SelectItem value="single">{t.singleNode}</SelectItem>
+                  <SelectItem value="disagg">{t.disagg}</SelectItem>
+                  <SelectItem value="all">{t.all}</SelectItem>
                 </SelectContent>
               </Select>
             </div>
@@ -320,8 +392,8 @@ export function CurrentImageContent() {
             <div className="flex flex-col space-y-1.5">
               <LabelWithTooltip
                 htmlFor="image-framework-multiselect"
-                label="Framework"
-                tooltip="Filter by inference engine (sglang, vllm, TensorRT, atom). Disagg variants (dynamo-*, mori-*) collapse into their base engine. Empty = all frameworks."
+                label={t.labelFramework}
+                tooltip={t.tooltipFramework}
               />
               <MultiSelect
                 triggerId="image-framework-multiselect"
@@ -337,7 +409,7 @@ export function CurrentImageContent() {
                   });
                   setSelectedFrameworks(v);
                 }}
-                placeholder="All frameworks"
+                placeholder={t.allFrameworks}
               />
             </div>
           </div>
@@ -345,9 +417,7 @@ export function CurrentImageContent() {
       )}
 
       {data && filtered.length === 0 && (
-        <div className="py-12 text-center text-muted-foreground">
-          No image data matches the selected filters.
-        </div>
+        <div className="py-12 text-center text-muted-foreground">{t.noMatch}</div>
       )}
 
       {filtered.length > 0 && (
@@ -355,19 +425,14 @@ export function CurrentImageContent() {
           <table className="w-full border-collapse">
             <thead>
               <tr className="border-b border-border bg-muted/50">
-                <th className="px-4 py-3 text-left text-sm font-semibold">Model</th>
-                <th className="px-4 py-3 text-left text-sm font-semibold">Precision</th>
-                <th className="px-4 py-3 text-left text-sm font-semibold">GPU SKU</th>
-                <th className="px-4 py-3 text-left text-sm font-semibold">Spec Decode</th>
-                <th className="px-4 py-3 text-left text-sm font-semibold">
-                  Current InferenceX Image Tag
-                </th>
-                <th className="px-4 py-3 text-left text-sm font-semibold">Actual Latest Tag</th>
-                <th
-                  className="px-4 py-3 text-left text-sm font-semibold whitespace-nowrap"
-                  title="Whole days between today and the most recent benchmark submission for this config"
-                >
-                  Days Since Update
+                <th className="px-4 py-3 text-left text-sm font-semibold">{t.thModel}</th>
+                <th className="px-4 py-3 text-left text-sm font-semibold">{t.thPrecision}</th>
+                <th className="px-4 py-3 text-left text-sm font-semibold">{t.thGpuSku}</th>
+                <th className="px-4 py-3 text-left text-sm font-semibold">{t.thSpecDecode}</th>
+                <th className="px-4 py-3 text-left text-sm font-semibold">{t.thCurrentTag}</th>
+                <th className="px-4 py-3 text-left text-sm font-semibold">{t.thActualLatest}</th>
+                <th className="px-4 py-3 text-left text-sm font-semibold whitespace-nowrap">
+                  {t.thDaysSince}
                 </th>
               </tr>
             </thead>
diff --git a/packages/app/src/components/reliability/ui/BarChartD3.tsx b/packages/app/src/components/reliability/ui/BarChartD3.tsx
index ad0e8885..a0d003ac 100644
--- a/packages/app/src/components/reliability/ui/BarChartD3.tsx
+++ b/packages/app/src/components/reliability/ui/BarChartD3.tsx
@@ -14,6 +14,7 @@ import { computeLeftMargin, measureTextWidth } from '@/lib/d3-chart/dynamic-marg
 import { useReliabilityContext } from '@/components/reliability/ReliabilityContext';
 import type { ModelSuccessRateData } from '@/components/reliability/types';
 import { useThemeColors } from '@/hooks/useThemeColors';
+import { useLocale } from '@/lib/use-locale';
 import ChartLegend from '@/components/ui/chart-legend';
 
 type ChartItem = ModelSuccessRateData & { modelLabel: string };
@@ -73,6 +74,17 @@ function positionLabelPairs(
   apply(overlayLabels);
 }
 
+const RELIABILITY_STRINGS = {
+  en: {
+    highContrast: 'High Contrast',
+    resetFilter: 'Reset filter',
+  },
+  zh: {
+    highContrast: '高对比度',
+    resetFilter: '重置筛选',
+  },
+} as const;
+
 export default function ReliabilityBarChartD3({ caption }: { caption?: ReactNode }) {
   const hoveredBarXRef = useRef(0);
   const {
@@ -89,6 +101,8 @@ export default function ReliabilityBarChartD3({ caption }: { caption?: ReactNode
     isLegendExpanded,
     setIsLegendExpanded,
   } = useReliabilityContext();
+  const locale = useLocale();
+  const legendT = RELIABILITY_STRINGS[locale];
 
   const sortedModels = useMemo(
     () =>
@@ -297,7 +311,7 @@ export default function ReliabilityBarChartD3({ caption }: { caption?: ReactNode
             switches={[
               {
                 id: 'reliability-high-contrast',
-                label: 'High Contrast',
+                label: legendT.highContrast,
                 checked: highContrast,
                 onCheckedChange: (checked) => {
                   setHighContrast(checked);
@@ -310,7 +324,7 @@ export default function ReliabilityBarChartD3({ caption }: { caption?: ReactNode
                 ? [
                     {
                       id: 'reliability-reset-filter',
-                      label: 'Reset filter',
+                      label: legendT.resetFilter,
                       onClick: () => {
                         selectAllModels();
                         track('reliability_filter_reset');
diff --git a/packages/app/src/components/submissions/SubmissionsChart.tsx b/packages/app/src/components/submissions/SubmissionsChart.tsx
index 96011d14..d4f8a754 100644
--- a/packages/app/src/components/submissions/SubmissionsChart.tsx
+++ b/packages/app/src/components/submissions/SubmissionsChart.tsx
@@ -4,6 +4,7 @@ import * as d3 from 'd3';
 import { type ReactNode, useCallback, useMemo, useState } from 'react';
 
 import { track } from '@/lib/analytics';
+import { useLocale } from '@/lib/use-locale';
 import ChartLegend from '@/components/ui/chart-legend';
 import {
   D3Chart,
@@ -77,10 +78,17 @@ function generateTooltipContent(d: ChartPoint, isPinned: boolean): string {
     </div>`;
 }
 
+const SUBMISSIONS_STRINGS = {
+  en: { onChangeOnly: 'On-change only' },
+  zh: { onChangeOnly: '仅变更' },
+} as const;
+
 export default function SubmissionsChart({ volume, mode, caption }: SubmissionsChartProps) {
   const [isLegendExpanded, setIsLegendExpanded] = useState(true);
   const [enabledLines, setEnabledLines] = useState<Set<LineKey>>(new Set(LINE_KEYS));
   const [onChangeOnly, setOnChangeOnly] = useState(true);
+  const locale = useLocale();
+  const legendT = SUBMISSIONS_STRINGS[locale];
 
   const toggleLine = useCallback((name: string) => {
     setEnabledLines((prev) => {
@@ -292,7 +300,7 @@ export default function SubmissionsChart({ volume, mode, caption }: SubmissionsC
                 ? [
                     {
                       id: 'submissions-on-change-only',
-                      label: 'On-change only',
+                      label: legendT.onChangeOnly,
                       checked: onChangeOnly,
                       onCheckedChange: (checked) => {
                         setOnChangeOnly(checked);
diff --git a/packages/app/src/components/tab-nav.tsx b/packages/app/src/components/tab-nav.tsx
index d15ec06d..0f8d373e 100644
--- a/packages/app/src/components/tab-nav.tsx
+++ b/packages/app/src/components/tab-nav.tsx
@@ -147,7 +147,7 @@ export function TabNav() {
                   <>
                     <SelectSeparator />
                     <SelectGroup>
-                      <SelectLabel>Hidden</SelectLabel>
+                      <SelectLabel>{isZh ? '隐藏' : 'Hidden'}</SelectLabel>
                       {GATED_TABS.map((tab) => {
                         const value = tab.href.slice(1);
                         return (
@@ -156,7 +156,7 @@ export function TabNav() {
                             value={value}
                             data-ph-capture-attribute-tab={value}
                           >
-                            {tab.label}
+                            {tabLabel(tab)}
                           </SelectItem>
                         );
                       })}
@@ -193,6 +193,8 @@ export function TabNav() {
                 current={current}
                 tabHref={(path) => tabHref(localizedPath(path))}
                 onSelect={handleDesktopClick}
+                tabLabel={tabLabel}
+                isZh={isZh}
               />
             )}
           </nav>
@@ -206,10 +208,14 @@ function HiddenTabsPopover({
   current,
   tabHref,
   onSelect,
+  tabLabel,
+  isZh,
 }: {
   current: string;
   tabHref: (path: string) => string;
   onSelect: (tab: string) => void;
+  tabLabel: (tab: { href: string; label: string }) => string;
+  isZh: boolean;
 }) {
   const [open, setOpen] = useState(false);
   const active = GATED_VALUES.has(current);
@@ -221,7 +227,7 @@ function HiddenTabsPopover({
         data-ph-capture-attribute-tab="hidden"
         className={cn(tabLinkClass, currentTabClass(active), 'gap-1 cursor-pointer')}
       >
-        Hidden
+        {isZh ? '隐藏' : 'Hidden'}
         <ChevronDown
           className={cn('size-4 transition-transform', open && 'rotate-180')}
           aria-hidden
@@ -250,7 +256,7 @@ function HiddenTabsPopover({
                       : 'text-muted-foreground hover:bg-accent hover:text-foreground',
                   )}
                 >
-                  {tab.label}
+                  {tabLabel(tab)}
                 </Link>
               </li>
             );
diff --git a/packages/app/src/components/ui/chart-legend.tsx b/packages/app/src/components/ui/chart-legend.tsx
index 86fadfad..9c14c49f 100644
--- a/packages/app/src/components/ui/chart-legend.tsx
+++ b/packages/app/src/components/ui/chart-legend.tsx
@@ -18,6 +18,7 @@ import React, { useCallback, useId, useLayoutEffect, useMemo, useRef, useState }
 import { SHAPE_ORDER, type ShapeKey, getShapeKeyForPrecision } from '@/lib/chart-rendering';
 import { type Precision, getPrecisionLabel } from '@/lib/data-mappings';
 import { filterAndSortLegendItems } from '@/lib/legend-utils';
+import { useLocale } from '@/lib/use-locale';
 import { cn } from '@/lib/utils';
 
 const SHAPE_ICON: Record<ShapeKey, React.ComponentType<{ size?: number; className?: string }>> = {
@@ -34,6 +35,30 @@ import { TooltipProvider, TooltipRoot, TooltipTrigger, TooltipContent } from './
 
 export type { CommonLegendItemProps } from './chart-legend-item';
 
+const STRINGS = {
+  en: {
+    advanced: 'Advanced',
+    collapse: 'Collapse',
+    expand: 'Expand',
+    searchPlaceholder: 'Search...',
+    clearSearch: 'Clear search',
+    collapseLegend: 'Collapse legend',
+    expandLegend: 'Expand legend',
+    atomFootnote:
+      'The ATOM engine is promising, however it has yet to serve production tokens. It is still in its infant stage.',
+  },
+  zh: {
+    advanced: '高级',
+    collapse: '收起',
+    expand: '展开',
+    searchPlaceholder: '搜索…',
+    clearSearch: '清除搜索',
+    collapseLegend: '收起图例',
+    expandLegend: '展开图例',
+    atomFootnote: 'ATOM 引擎前景可期，但尚未用于生产环境 token 服务，仍处于早期阶段。',
+  },
+} as const;
+
 export interface LegendSwitchConfig {
   id: string;
   label: string;
@@ -97,6 +122,8 @@ export default function ChartLegend({
   onItemRemove,
   onAdvancedExpandedChange,
 }: ChartLegendProps) {
+  const locale = useLocale();
+  const t = STRINGS[locale];
   const isSidebar = variant === 'sidebar';
   const [hasLongText, setHasLongText] = useState(false);
   const scrollRef = useRef<HTMLDivElement>(null);
@@ -242,7 +269,7 @@ export default function ChartLegend({
             value={searchQuery}
             onChange={(e) => setSearchQuery(e.target.value)}
             onBlur={trackSearchOnBlur}
-            placeholder="Search..."
+            placeholder={t.searchPlaceholder}
             className="w-full px-2 py-1 pr-6 rounded-md border border-border bg-background text-foreground text-xs placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-sky-500/50 focus:border-sky-500/50"
           />
           {searchQuery && (
@@ -253,7 +280,7 @@ export default function ChartLegend({
                 setSearchQuery('');
               }}
               className="absolute right-1.5 top-1/2 -translate-y-1/2 p-0.5 rounded-sm text-muted-foreground hover:text-foreground transition-colors"
-              aria-label="Clear search"
+              aria-label={t.clearSearch}
             >
               <X size={12} />
             </button>
@@ -329,7 +356,7 @@ export default function ChartLegend({
               className="flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground transition-colors"
             >
               {isAdvancedExpanded ? <ChevronDown size={14} /> : <ChevronRight size={14} />}
-              Advanced
+              {t.advanced}
             </button>
             {isAdvancedExpanded && (
               <div
@@ -389,10 +416,10 @@ export default function ChartLegend({
         type="button"
         onClick={handleLegendExpand}
         className="text-xs text-accent-foreground hover:text-foreground flex items-center gap-1"
-        aria-label={isLegendExpanded ? 'Collapse legend' : 'Expand legend'}
+        aria-label={isLegendExpanded ? t.collapseLegend : t.expandLegend}
       >
         {isLegendExpanded ? <ArrowRightToLine size={16} /> : <ArrowLeftToLine size={16} />}
-        {isLegendExpanded ? 'Collapse' : 'Expand'}
+        {isLegendExpanded ? t.collapse : t.expand}
       </button>
     </div>
   ) : null;
@@ -473,8 +500,7 @@ export default function ChartLegend({
       {expandButton}
       {hasAtomFootnote && (
         <p className="mt-2 text-[10px] text-muted-foreground/70 leading-tight no-export">
-          <sup>1</sup> The ATOM engine is promising, however it has yet to serve production tokens.
-          It is still in its infant stage.
+          <sup>1</sup> {t.atomFootnote}
         </p>
       )}
     </div>
diff --git a/packages/app/src/components/ui/data-table.tsx b/packages/app/src/components/ui/data-table.tsx
index 2079bd3c..74828753 100644
--- a/packages/app/src/components/ui/data-table.tsx
+++ b/packages/app/src/components/ui/data-table.tsx
@@ -12,6 +12,7 @@ import {
 } from 'lucide-react';
 
 import { track } from '@/lib/analytics';
+import { useLocale } from '@/lib/use-locale';
 import {
   Select,
   SelectContent,
@@ -20,6 +21,35 @@ import {
   SelectValue,
 } from '@/components/ui/select';
 
+const STRINGS = {
+  en: {
+    noData: 'No data available for the current filters.',
+    searchPlaceholder: 'Search...',
+    searchLabel: 'Search table',
+    clearSearch: 'Clear search',
+    noResults: (q: string) => `No results match "${q}"`,
+    perPage: 'per page',
+    rowsPerPage: 'Rows per page',
+    prevPage: 'Previous page',
+    nextPage: 'Next page',
+    of: 'of',
+    filteredFrom: (total: number) => `(filtered from ${total})`,
+  },
+  zh: {
+    noData: '当前筛选条件下无可用数据。',
+    searchPlaceholder: '搜索…',
+    searchLabel: '搜索表格',
+    clearSearch: '清除搜索',
+    noResults: (q: string) => `无匹配"${q}"的结果`,
+    perPage: '每页',
+    rowsPerPage: '每页行数',
+    prevPage: '上一页',
+    nextPage: '下一页',
+    of: '/',
+    filteredFrom: (total: number) => `（从 ${total} 条中筛选）`,
+  },
+} as const;
+
 export interface DataTableColumn<T> {
   /** Column header text. */
   header: string;
@@ -74,6 +104,8 @@ export function DataTable<T>({
   analyticsPrefix = 'table',
   watermark = true,
 }: DataTableProps<T>) {
+  const locale = useLocale();
+  const t = STRINGS[locale];
   const [page, setPage] = useState(0);
   const [pageSize, setPageSize] = useState<number>(25);
   const [sort, setSort] = useState<SortState>({ columnIndex: -1, dir: null });
@@ -134,11 +166,7 @@ export function DataTable<T>({
   const pageData = sorted.slice(safePage * pageSize, (safePage + 1) * pageSize);
 
   if (data.length === 0) {
-    return (
-      <p className="text-sm text-muted-foreground py-8 text-center">
-        No data available for the current filters.
-      </p>
-    );
+    return <p className="text-sm text-muted-foreground py-8 text-center">{t.noData}</p>;
   }
 
   return (
@@ -154,9 +182,9 @@ export function DataTable<T>({
             setSearch(e.target.value);
             setPage(0);
           }}
-          placeholder="Search..."
+          placeholder={t.searchPlaceholder}
           className="w-full h-7 pl-8 pr-7 text-xs bg-transparent border border-border rounded-md focus:outline-none focus:ring-1 focus:ring-ring"
-          aria-label="Search table"
+          aria-label={t.searchLabel}
         />
         {search && (
           <button
@@ -167,7 +195,7 @@ export function DataTable<T>({
               searchRef.current?.focus();
             }}
             className="absolute right-2 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground"
-            aria-label="Clear search"
+            aria-label={t.clearSearch}
           >
             <X className="size-3" />
           </button>
@@ -232,7 +260,7 @@ export function DataTable<T>({
                   colSpan={columns.length}
                   className="py-8 text-center text-sm text-muted-foreground"
                 >
-                  No results match &quot;{search}&quot;
+                  {t.noResults(search)}
                 </td>
               </tr>
             ) : (
@@ -260,8 +288,8 @@ export function DataTable<T>({
             {sorted.length === 0
               ? '0'
               : `${safePage * pageSize + 1}–${Math.min((safePage + 1) * pageSize, sorted.length)}`}{' '}
-            of {sorted.length}
-            {search && ` (filtered from ${data.length})`}
+            {t.of} {sorted.length}
+            {search && ` ${t.filteredFrom(data.length)}`}
           </span>
           <Select
             value={String(pageSize)}
@@ -272,7 +300,7 @@ export function DataTable<T>({
               track(`${analyticsPrefix}_page_size_changed`, { size });
             }}
           >
-            <SelectTrigger className="h-6 w-auto gap-1 px-2 text-xs" aria-label="Rows per page">
+            <SelectTrigger className="h-6 w-auto gap-1 px-2 text-xs" aria-label={t.rowsPerPage}>
               <SelectValue />
             </SelectTrigger>
             <SelectContent>
@@ -283,7 +311,7 @@ export function DataTable<T>({
               ))}
             </SelectContent>
           </Select>
-          <span>per page</span>
+          <span>{t.perPage}</span>
         </div>
         <div className="flex items-center gap-1">
           <button
@@ -294,7 +322,7 @@ export function DataTable<T>({
             }}
             disabled={safePage === 0}
             className="p-1 rounded hover:bg-muted disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
-            aria-label="Previous page"
+            aria-label={t.prevPage}
           >
             <ChevronLeft className="size-4" />
           </button>
@@ -309,7 +337,7 @@ export function DataTable<T>({
             }}
             disabled={safePage >= totalPages - 1}
             className="p-1 rounded hover:bg-muted disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
-            aria-label="Next page"
+            aria-label={t.nextPage}
           >
             <ChevronRight className="size-4" />
           </button>
diff --git a/packages/app/src/components/ui/multi-select.tsx b/packages/app/src/components/ui/multi-select.tsx
index fa6db10e..767edcab 100644
--- a/packages/app/src/components/ui/multi-select.tsx
+++ b/packages/app/src/components/ui/multi-select.tsx
@@ -38,6 +38,11 @@ interface MultiSelectProps {
   searchable?: boolean;
   plainSelectedText?: boolean;
   showSelectionSummary?: boolean;
+  searchPlaceholder?: string;
+  noResultsLabel?: string;
+  clearSearchLabel?: string;
+  selectedSuffix?: string;
+  minimumPrefix?: string;
 }
 
 function MultiSelect({
@@ -59,6 +64,11 @@ function MultiSelect({
   searchable = true,
   plainSelectedText = false,
   showSelectionSummary = true,
+  searchPlaceholder = 'Search...',
+  noResultsLabel = 'No results',
+  clearSearchLabel = 'Clear search',
+  selectedSuffix = ' selected',
+  minimumPrefix = 'Minimum: ',
 }: MultiSelectProps) {
   const [internalIsOpen, setInternalIsOpen] = React.useState(false);
   const [search, setSearch] = React.useState('');
@@ -348,7 +358,7 @@ function MultiSelect({
                     setSearch(e.target.value);
                     if (e.target.value) searchUsedRef.current = true;
                   }}
-                  placeholder="Search..."
+                  placeholder={searchPlaceholder}
                   className="w-full bg-transparent py-1.5 text-sm outline-none placeholder:text-muted-foreground"
                 />
                 {search && (
@@ -359,7 +369,7 @@ function MultiSelect({
                       searchRef.current?.focus();
                     }}
                     className="shrink-0 text-muted-foreground hover:text-foreground transition-colors"
-                    aria-label="Clear search"
+                    aria-label={clearSearchLabel}
                   >
                     <XIcon className="size-3.5" />
                   </button>
@@ -370,15 +380,19 @@ function MultiSelect({
               (maxSelections !== undefined || minSelections !== undefined) && (
                 <div className="text-muted-foreground px-2 py-1.5 text-xs border-b mb-1">
                   {value.length}
-                  {maxSelections !== undefined && ` / ${maxSelections}`} selected
+                  {maxSelections !== undefined && ` / ${maxSelections}`}
+                  {selectedSuffix}
                   {minSelections !== undefined && minSelections > 0 && (
-                    <span className="block text-xs mt-0.5">Minimum: {minSelections}</span>
+                    <span className="block text-xs mt-0.5">
+                      {minimumPrefix}
+                      {minSelections}
+                    </span>
                   )}
                 </div>
               )}
             {filteredOptions.length === 0 && (
               <div className="text-muted-foreground px-2 py-1.5 text-sm text-center">
-                No results
+                {noResultsLabel}
               </div>
             )}
             {filteredSections
diff --git a/packages/app/src/components/ui/searchable-select.tsx b/packages/app/src/components/ui/searchable-select.tsx
index 09fe2764..3b1a5d25 100644
--- a/packages/app/src/components/ui/searchable-select.tsx
+++ b/packages/app/src/components/ui/searchable-select.tsx
@@ -28,6 +28,9 @@ interface SearchableSelectProps {
   searchable?: boolean;
   /** Analytics event prefix, e.g. "yaxis_metric" → "yaxis_metric_searched" */
   trackPrefix?: string;
+  searchPlaceholder?: string;
+  noResultsLabel?: string;
+  clearSearchLabel?: string;
 }
 
 export function SearchableSelect({
@@ -41,6 +44,9 @@ export function SearchableSelect({
   disabled = false,
   searchable = true,
   trackPrefix,
+  searchPlaceholder = 'Search...',
+  noResultsLabel = 'No results',
+  clearSearchLabel = 'Clear search',
 }: SearchableSelectProps) {
   const [isOpen, setIsOpen] = React.useState(false);
   const [search, setSearch] = React.useState('');
@@ -172,7 +178,7 @@ export function SearchableSelect({
                   setSearch(e.target.value);
                   if (e.target.value) searchUsedRef.current = true;
                 }}
-                placeholder="Search..."
+                placeholder={searchPlaceholder}
                 className="w-full bg-transparent py-1.5 text-sm outline-none placeholder:text-muted-foreground"
               />
               {search && (
@@ -183,7 +189,7 @@ export function SearchableSelect({
                     searchRef.current?.focus();
                   }}
                   className="shrink-0 text-muted-foreground hover:text-foreground transition-colors"
-                  aria-label="Clear search"
+                  aria-label={clearSearchLabel}
                 >
                   <XIcon className="size-3.5" />
                 </button>
@@ -197,7 +203,7 @@ export function SearchableSelect({
           >
             {filteredGroups.length === 0 && (
               <div className="text-muted-foreground px-2 py-1.5 text-sm text-center">
-                No results
+                {noResultsLabel}
               </div>
             )}
             {filteredGroups.map((group) => (
diff --git a/packages/app/src/lib/chart-utils.test.ts b/packages/app/src/lib/chart-utils.test.ts
index 31a79dbe..cfde6ded 100644
--- a/packages/app/src/lib/chart-utils.test.ts
+++ b/packages/app/src/lib/chart-utils.test.ts
@@ -17,6 +17,8 @@ import {
   paretoFrontLowerRight,
   paretoFrontLowerLeft,
   paretoFrontUpperLeft,
+  metricTitle,
+  metricLabel,
 } from '@/lib/chart-utils';
 
 // mock constants so createChartDataPoint (also in this module) doesn't call
@@ -2295,3 +2297,66 @@ describe('paretoFrontLowerRight', () => {
     expect(input.map((p) => p.x)).toEqual([3, 2, 1]);
   });
 });
+
+// ---------------------------------------------------------------------------
+// metricTitle / metricLabel
+// ---------------------------------------------------------------------------
+describe('metricTitle', () => {
+  const chartDef = {
+    chartType: 'interactivity',
+    heading: 'vs. Interactivity',
+    x: 'median_intvty',
+    x_label: 'Interactivity (tok/s/user)',
+    y: 'tput_per_gpu',
+    y_tpPerGpu_title: 'Token Throughput per GPU',
+    y_tpPerGpu_titleZh: '每 GPU token 吞吐量',
+    y_costh_title: 'Cost per Million Total Tokens (Owning - Hyperscaler)',
+  } as ChartDefinition;
+
+  it('returns English title for locale en', () => {
+    expect(metricTitle(chartDef, 'y_tpPerGpu', 'en')).toBe('Token Throughput per GPU');
+  });
+
+  it('returns Chinese title for locale zh', () => {
+    expect(metricTitle(chartDef, 'y_tpPerGpu', 'zh')).toBe('每 GPU token 吞吐量');
+  });
+
+  it('falls back to English when Zh field is missing', () => {
+    expect(metricTitle(chartDef, 'y_costh', 'zh')).toBe(
+      'Cost per Million Total Tokens (Owning - Hyperscaler)',
+    );
+  });
+
+  it('returns empty string for unknown metric', () => {
+    expect(metricTitle(chartDef, 'y_unknown', 'en')).toBe('');
+  });
+});
+
+describe('metricLabel', () => {
+  const chartDef = {
+    chartType: 'interactivity',
+    heading: 'vs. Interactivity',
+    x: 'median_intvty',
+    x_label: 'Interactivity (tok/s/user)',
+    y: 'tput_per_gpu',
+    y_tpPerGpu_label: 'Token Throughput per GPU (tok/s/gpu)',
+    y_tpPerGpu_labelZh: '每 GPU token 吞吐量（tok/s/gpu）',
+    y_costh_label: 'Cost per Million Total Tokens ($)',
+  } as ChartDefinition;
+
+  it('returns English label for locale en', () => {
+    expect(metricLabel(chartDef, 'y_tpPerGpu', 'en')).toBe('Token Throughput per GPU (tok/s/gpu)');
+  });
+
+  it('returns Chinese label for locale zh', () => {
+    expect(metricLabel(chartDef, 'y_tpPerGpu', 'zh')).toBe('每 GPU token 吞吐量（tok/s/gpu）');
+  });
+
+  it('falls back to English when Zh field is missing', () => {
+    expect(metricLabel(chartDef, 'y_costh', 'zh')).toBe('Cost per Million Total Tokens ($)');
+  });
+
+  it('returns empty string for unknown metric', () => {
+    expect(metricLabel(chartDef, 'y_unknown', 'en')).toBe('');
+  });
+});
diff --git a/packages/app/src/lib/chart-utils.ts b/packages/app/src/lib/chart-utils.ts
index 59718d4a..d913a8cf 100644
--- a/packages/app/src/lib/chart-utils.ts
+++ b/packages/app/src/lib/chart-utils.ts
@@ -10,6 +10,7 @@ import iwanthue from 'iwanthue';
 import type { AggDataEntry, ChartDefinition, InferenceData } from '@/components/inference/types';
 import { getGpuSpecs, isKnownGpu } from '@/lib/constants';
 import { getVendor, type Vendor } from '@/lib/dynamic-colors';
+import type { Locale } from '@/lib/i18n';
 
 // ---------------------------------------------------------------------------
 // High-contrast color generation (iwanthue — k-means in CIELab)
@@ -859,3 +860,23 @@ export function markRooflinePoints(
   }
   return finalProcessedData;
 }
+
+// ---------------------------------------------------------------------------
+// Locale-aware metric label/title helpers
+// ---------------------------------------------------------------------------
+
+export function metricTitle(chartDef: ChartDefinition, metricKey: string, locale: Locale): string {
+  if (locale === 'zh') {
+    const zh = chartDef[`${metricKey}_titleZh`];
+    if (typeof zh === 'string' && zh) return zh;
+  }
+  return (chartDef[`${metricKey}_title`] as string) || '';
+}
+
+export function metricLabel(chartDef: ChartDefinition, metricKey: string, locale: Locale): string {
+  if (locale === 'zh') {
+    const zh = chartDef[`${metricKey}_labelZh`];
+    if (typeof zh === 'string' && zh) return zh;
+  }
+  return (chartDef[`${metricKey}_label`] as string) || '';
+}
diff --git a/packages/app/src/lib/i18n.test.ts b/packages/app/src/lib/i18n.test.ts
index c3ce6356..3f33bff7 100644
--- a/packages/app/src/lib/i18n.test.ts
+++ b/packages/app/src/lib/i18n.test.ts
@@ -50,9 +50,17 @@ describe('hasZhSibling', () => {
     expect(hasZhSibling('/compare-per-dollar/deepseek-r1-h100-vs-h200')).toBe(true);
   });
 
-  it('rejects unmirrored routes', () => {
-    expect(hasZhSibling('/datasets')).toBe(false);
-    expect(hasZhSibling('/feedback')).toBe(false);
+  it('matches datasets, gated tabs, and agentic detail pages', () => {
+    expect(hasZhSibling('/datasets')).toBe(true);
+    expect(hasZhSibling('/datasets/some-set/conversations/abc123')).toBe(true);
+    expect(hasZhSibling('/ai-chart')).toBe(true);
+    expect(hasZhSibling('/current-inferencex-image')).toBe(true);
+    expect(hasZhSibling('/feedback')).toBe(true);
+    expect(hasZhSibling('/inference/agentic/42')).toBe(true);
+  });
+
+  it('rejects unknown routes', () => {
+    expect(hasZhSibling('/nonexistent')).toBe(false);
   });
 });
 
@@ -76,8 +84,13 @@ describe('switchLocalePath', () => {
     );
   });
 
+  it('switches datasets pages within the language trees', () => {
+    expect(switchLocalePath('/datasets')).toBe('/zh/datasets');
+    expect(switchLocalePath('/zh/datasets/some-set')).toBe('/datasets/some-set');
+  });
+
   it('falls back to the other homepage for unmirrored paths', () => {
-    expect(switchLocalePath('/datasets')).toBe('/zh');
+    expect(switchLocalePath('/some-unknown-route')).toBe('/zh');
     expect(switchLocalePath('/zh/unknown-page')).toBe('/');
   });
 });
diff --git a/packages/app/src/lib/i18n.ts b/packages/app/src/lib/i18n.ts
index cdd5afc8..e2393c77 100644
--- a/packages/app/src/lib/i18n.ts
+++ b/packages/app/src/lib/i18n.ts
@@ -37,6 +37,7 @@ export function isZhPathname(pathname: string): boolean {
 export const ZH_MIRRORED_ROUTES: readonly { path: string; exact?: boolean }[] = [
   { path: '/', exact: true },
   { path: '/inference', exact: true },
+  { path: '/inference/agentic' },
   { path: '/evaluation', exact: true },
   { path: '/historical', exact: true },
   { path: '/calculator', exact: true },
@@ -44,12 +45,16 @@ export const ZH_MIRRORED_ROUTES: readonly { path: string; exact?: boolean }[] =
   { path: '/gpu-specs', exact: true },
   { path: '/gpu-metrics', exact: true },
   { path: '/submissions', exact: true },
+  { path: '/ai-chart', exact: true },
+  { path: '/current-inferencex-image', exact: true },
+  { path: '/feedback', exact: true },
   { path: '/about', exact: true },
   { path: '/quotes', exact: true },
   { path: '/land-acknowledgement', exact: true },
   { path: '/compare' },
   { path: '/compare-per-dollar' },
   { path: '/blog' },
+  { path: '/datasets' },
 ];
 
 export function hasZhSibling(enPathname: string): boolean {
diff --git a/packages/app/src/lib/tab-meta-zh.test.ts b/packages/app/src/lib/tab-meta-zh.test.ts
index dd0505b5..404871ae 100644
--- a/packages/app/src/lib/tab-meta-zh.test.ts
+++ b/packages/app/src/lib/tab-meta-zh.test.ts
@@ -30,10 +30,10 @@ describe('ZH_TAB_KEYS', () => {
 });
 
 describe('isZhTab', () => {
-  it('accepts mirrored tabs and rejects unmirrored or unknown ones', () => {
+  it('accepts mirrored tabs and rejects unknown ones', () => {
     expect(isZhTab('inference')).toBe(true);
-    expect(isZhTab('ai-chart')).toBe(false);
-    expect(isZhTab('feedback')).toBe(false);
+    expect(isZhTab('ai-chart')).toBe(true);
+    expect(isZhTab('feedback')).toBe(true);
     expect(isZhTab('nonexistent')).toBe(false);
   });
 });
diff --git a/packages/app/src/lib/tab-meta-zh.ts b/packages/app/src/lib/tab-meta-zh.ts
index 643e5404..7daec602 100644
--- a/packages/app/src/lib/tab-meta-zh.ts
+++ b/packages/app/src/lib/tab-meta-zh.ts
@@ -9,11 +9,6 @@ export const LANDING_META_ZH = {
     '跨 GPU 与推理框架对比 AI 推理性能。基于 NVIDIA GB200、B200、AMD MI355X 等硬件的真实基准测试。免费、开源、持续更新。',
 };
 
-/**
- * Tabs that have a Chinese sibling page under /zh. Internal or feature-gated
- * tabs (ai-chart, current-inferencex-image, feedback) are intentionally not
- * mirrored — they are not indexable surfaces.
- */
 export const ZH_TAB_KEYS = [
   'inference',
   'evaluation',
@@ -23,6 +18,9 @@ export const ZH_TAB_KEYS = [
   'gpu-specs',
   'gpu-metrics',
   'submissions',
+  'ai-chart',
+  'current-inferencex-image',
+  'feedback',
 ] as const;
 
 export type ZhTabKey = (typeof ZH_TAB_KEYS)[number];
@@ -69,6 +67,19 @@ export const TAB_META_ZH: Record<ZhTabKey, { title: string; description: string
     description:
       '提交到 InferenceX 的全部基准测试配置。查看各 GPU 厂商的提交历史、活动趋势与数据点数量。',
   },
+  'ai-chart': {
+    title: 'AI 驱动的图表生成',
+    description: '使用自然语言提示生成自定义推理基准测试图表。借助 AI 对比 GPU、成本与性能。',
+  },
+  'current-inferencex-image': {
+    title: 'InferenceX 当前镜像',
+    description:
+      '各模型、GPU SKU 和配置的当前 InferenceX Docker 镜像标签。对比已部署镜像与最新 vLLM 和 SGLang 发布版本，标记过期标签。',
+  },
+  feedback: {
+    title: '用户反馈',
+    description: '内部工具：解密并查看用户提交的反馈。',
+  },
 };
 
 /**
@@ -93,6 +104,12 @@ export const TAB_INTRO_ZH: Record<ZhTabKey, string> = {
     '本页面展示 GPU 功耗与能效指标（PowerX）：推理负载下的实测功耗、每瓦 token 数与每兆瓦 token 产出。',
   submissions:
     '本页面列出提交到 InferenceX 的全部基准测试配置：按 GPU 厂商查看提交历史、活动趋势与数据点数量。',
+  'ai-chart':
+    '本页面提供 AI 驱动的图表生成工具：用自然语言描述您想查看的图表，系统会根据 InferenceX 基准测试数据自动生成可视化结果。',
+  'current-inferencex-image':
+    '本页面展示 InferenceX 当前使用的 Docker 镜像标签：按模型、GPU SKU 和配置列出已部署版本，并与上游 vLLM、SGLang 最新发布版本对比，方便排查过期镜像。',
+  feedback:
+    '本页面为内部反馈查看器：使用解密密钥在浏览器中解密并查阅用户提交的反馈内容，密钥不会离开此页面。',
 };
 
 /** Chinese labels for the dashboard tab bar (TabNav) on /zh pages. */
@@ -105,6 +122,9 @@ export const TAB_LABELS_ZH: Record<string, string> = {
   'gpu-specs': 'GPU 规格',
   'gpu-metrics': 'GPU 功耗',
   submissions: '提交记录',
+  'ai-chart': 'AI 图表',
+  'current-inferencex-image': '镜像',
+  feedback: '反馈',
 };
 
 /** Chinese labels for the site header nav on /zh pages, keyed by English href. */