diff --git a/docs/assets/demo_termflow.gif b/docs/assets/demo_termflow.gif
index 29f8e3a4..e1b28f74 100644
Binary files a/docs/assets/demo_termflow.gif and b/docs/assets/demo_termflow.gif differ
diff --git a/packages/client-ui/src/App.test.ts b/packages/client-ui/src/App.test.ts
index 17f96328..f1f54da5 100644
--- a/packages/client-ui/src/App.test.ts
+++ b/packages/client-ui/src/App.test.ts
@@ -183,4 +183,41 @@ describe('shared application routes', () => {
     expect(wrapper.find('[data-action="logout"]').exists()).toBe(true)
     wrapper.unmount()
   })
+
+  it('toggles UI language between Chinese and English via header locale switcher', async () => {
+    const router = createRouter({ history: createMemoryHistory(), routes: clientRoutes })
+    await router.push('/')
+    await router.isReady()
+    const clientUi = createClientUi(createFakeRuntime())
+    await clientUi.session.loginWithToken('test-only-token')
+    const wrapper = mount(App, { global: { plugins: [router, clientUi] } })
+    await flushPromises()
+
+    const toggleBtn = wrapper.get('[data-action="toggle-locale"]')
+    expect(toggleBtn.text()).toContain('EN')
+    expect(wrapper.get('.side-nav a[href="/"]').text()).toBe('控制中心')
+    expect(wrapper.get('.side-nav a[href="/computers"]').text()).toBe('电脑管理')
+    expect(wrapper.get('.side-nav a[href="/settings"]').text()).toBe('设置')
+    expect(wrapper.get('h1').text()).toBe('控制中心')
+
+    await toggleBtn.trigger('click')
+    await flushPromises()
+
+    expect(window.localStorage.getItem('termflow_lang')).toBe('en')
+    expect(toggleBtn.text()).toContain('中文')
+    expect(wrapper.get('.side-nav a[href="/"]').text()).toBe('Dashboard')
+    expect(wrapper.get('.side-nav a[href="/computers"]').text()).toBe('Computers')
+    expect(wrapper.get('.side-nav a[href="/settings"]').text()).toBe('Settings')
+    expect(wrapper.get('h1').text()).toBe('Dashboard')
+    expect(wrapper.get('[data-action="logout"]').attributes('aria-label')).toBe('Sign Out')
+
+    await toggleBtn.trigger('click')
+    await flushPromises()
+
+    expect(window.localStorage.getItem('termflow_lang')).toBe('zh')
+    expect(toggleBtn.text()).toContain('EN')
+    expect(wrapper.get('.side-nav a[href="/"]').text()).toBe('控制中心')
+    expect(wrapper.get('h1').text()).toBe('控制中心')
+    wrapper.unmount()
+  })
 })
diff --git a/packages/client-ui/src/App.vue b/packages/client-ui/src/App.vue
index e2b3a45f..724c8e1a 100644
--- a/packages/client-ui/src/App.vue
+++ b/packages/client-ui/src/App.vue
@@ -1,34 +1,45 @@
 <template>
-  <a class="skip-link" href="#main-content">跳到主要内容</a>
+  <a class="skip-link" href="#main-content">{{ t('app.skipToMain') }}</a>
   <div class="app-shell" :class="{ 'is-terminal': terminalLayout, 'is-bare': bareLayout }">
     <header v-if="!terminalLayout && !bareLayout" class="app-header">
-      <RouterLink class="brand" to="/" aria-label="TermFlow 控制中心">TermFlow</RouterLink>
-      <span class="header-context">远程终端控制</span>
+      <RouterLink class="brand" to="/" :aria-label="t('app.brandAria')">TermFlow</RouterLink>
+      <span class="header-context">{{ t('app.headerContext') }}</span>
       <ThemePicker />
+      <button
+        data-action="toggle-locale"
+        class="text-button locale-toggle-button"
+        type="button"
+        :aria-label="t('app.switchLangAria')"
+        :title="t('app.switchLangAria')"
+        @click="toggleLocale"
+      >
+        <Globe :size="15" aria-hidden="true" />
+        <span class="locale-badge">{{ t('app.switchLangBadge') }}</span>
+      </button>
       <button
         v-if="sessionState.authenticated"
         data-action="logout"
         class="text-button logout-button"
         type="button"
-        aria-label="退出登录"
-        title="退出登录"
+        :aria-label="t('app.logout')"
+        :title="t('app.logout')"
         @click="logout"
       >
         <LogOut :size="18" aria-hidden="true" />
       </button>
     </header>
-    <aside v-if="!terminalLayout && !bareLayout" class="side-nav" aria-label="主导航">
-      <RouterLink to="/" aria-label="控制中心"><LayoutDashboard :size="18" aria-hidden="true" /><span class="nav-label">控制中心</span></RouterLink>
-      <RouterLink to="/computers" aria-label="电脑管理"><MonitorCog :size="18" aria-hidden="true" /><span class="nav-label">电脑管理</span></RouterLink>
-      <RouterLink to="/settings" aria-label="设置"><Settings :size="18" aria-hidden="true" /><span class="nav-label">设置</span></RouterLink>
-      <RouterLink v-if="agentBrokerEnabled" to="/agent" aria-label="Agent 控制台"><Bot :size="18" aria-hidden="true" /><span class="nav-label">Agent 控制台</span></RouterLink>
+    <aside v-if="!terminalLayout && !bareLayout" class="side-nav" :aria-label="t('nav.mainAria')">
+      <RouterLink to="/" :aria-label="t('nav.dashboard')"><LayoutDashboard :size="18" aria-hidden="true" /><span class="nav-label">{{ t('nav.dashboard') }}</span></RouterLink>
+      <RouterLink to="/computers" :aria-label="t('nav.computers')"><MonitorCog :size="18" aria-hidden="true" /><span class="nav-label">{{ t('nav.computers') }}</span></RouterLink>
+      <RouterLink to="/settings" :aria-label="t('nav.settings')"><Settings :size="18" aria-hidden="true" /><span class="nav-label">{{ t('nav.settings') }}</span></RouterLink>
+      <RouterLink v-if="agentBrokerEnabled" to="/agent" :aria-label="t('nav.agent')"><Bot :size="18" aria-hidden="true" /><span class="nav-label">{{ t('nav.agent') }}</span></RouterLink>
     </aside>
     <main id="main-content" tabindex="-1"><RouterView :key="routeViewKey" /></main>
-    <nav v-if="!terminalLayout && !bareLayout" class="mobile-nav" :class="{ 'mobile-nav--agent': agentBrokerEnabled }" aria-label="移动端导航">
-      <RouterLink to="/" aria-label="控制中心"><LayoutDashboard :size="18" aria-hidden="true" /><span class="nav-label">控制中心</span></RouterLink>
-      <RouterLink to="/computers" aria-label="电脑管理"><MonitorCog :size="18" aria-hidden="true" /><span class="nav-label">电脑管理</span></RouterLink>
-      <RouterLink to="/settings" aria-label="设置"><Settings :size="18" aria-hidden="true" /><span class="nav-label">设置</span></RouterLink>
-      <RouterLink v-if="agentBrokerEnabled" to="/agent" aria-label="Agent 控制台"><Bot :size="18" aria-hidden="true" /><span class="nav-label">Agent 控制台</span></RouterLink>
+    <nav v-if="!terminalLayout && !bareLayout" class="mobile-nav" :class="{ 'mobile-nav--agent': agentBrokerEnabled }" :aria-label="t('nav.mobileAria')">
+      <RouterLink to="/" :aria-label="t('nav.dashboard')"><LayoutDashboard :size="18" aria-hidden="true" /><span class="nav-label">{{ t('nav.dashboard') }}</span></RouterLink>
+      <RouterLink to="/computers" :aria-label="t('nav.computers')"><MonitorCog :size="18" aria-hidden="true" /><span class="nav-label">{{ t('nav.computers') }}</span></RouterLink>
+      <RouterLink to="/settings" :aria-label="t('nav.settings')"><Settings :size="18" aria-hidden="true" /><span class="nav-label">{{ t('nav.settings') }}</span></RouterLink>
+      <RouterLink v-if="agentBrokerEnabled" to="/agent" :aria-label="t('nav.agent')"><Bot :size="18" aria-hidden="true" /><span class="nav-label">{{ t('nav.agent') }}</span></RouterLink>
     </nav>
     <BottomToast />
     <AgentSensitiveReauthDialog />
@@ -36,7 +47,7 @@
 </template>
 
 <script setup lang="ts">
-import { Bot, LayoutDashboard, LogOut, MonitorCog, Settings } from '@lucide/vue'
+import { Bot, Globe, LayoutDashboard, LogOut, MonitorCog, Settings } from '@lucide/vue'
 import { computed, onMounted, watch } from 'vue'
 import { RouterLink, RouterView, useRoute, useRouter } from 'vue-router'
 import ThemePicker from './components/settings/ThemePicker.vue'
@@ -45,7 +56,9 @@ import AgentSensitiveReauthDialog from './components/agent/AgentSensitiveReauthD
 import { useAgentBroker } from './composables/useAgentBroker'
 import { useSession } from './composables/useSession'
 import { useTerminalPageLock } from './composables/useTerminalPageLock'
+import { useI18n } from './i18n'
 
+const { t, toggleLocale } = useI18n()
 const router = useRouter()
 const route = useRoute()
 const { logoutSession, refreshSession, sessionState } = useSession()
diff --git a/packages/client-ui/src/components/agent/AgentApprovalCard.vue b/packages/client-ui/src/components/agent/AgentApprovalCard.vue
index 7585ccb1..a16c7f66 100644
--- a/packages/client-ui/src/components/agent/AgentApprovalCard.vue
+++ b/packages/client-ui/src/components/agent/AgentApprovalCard.vue
@@ -17,17 +17,17 @@
     </div>
     <div v-if="detail !== null" class="agent-approval-card__detail">
       <p class="agent-approval-card__field"><span class="agent-approval-card__label">Pane</span><span data-agent-approval-pane>{{ pane }}</span></p>
-      <p class="agent-approval-card__field"><span class="agent-approval-card__label">操作</span><span data-agent-approval-operation>{{ operation }}</span></p>
+      <p class="agent-approval-card__field"><span class="agent-approval-card__label">{{ t('agent.approval.operation') }}</span><span data-agent-approval-operation>{{ operation }}</span></p>
       <div class="agent-approval-card__summary" data-agent-approval-summary>
         <AgentCollapsibleOutput v-if="isDiff(summary)" :content="summary" />
         <span v-else>{{ summary }}</span>
       </div>
-      <p class="agent-approval-card__hash" :data-agent-approval-hash="detail.canonical_hash">摘要 #{{ detail.canonical_hash.slice(0, 8) }}</p>
+      <p class="agent-approval-card__hash" :data-agent-approval-hash="detail.canonical_hash">{{ t('agent.approval.hashPrefix', { hash: detail.canonical_hash.slice(0, 8) }) }}</p>
     </div>
-    <p v-else-if="detailFailed" class="agent-approval-card__fallback" data-agent-approval-detail-failed-text>详情不可用</p>
+    <p v-else-if="detailFailed" class="agent-approval-card__fallback" data-agent-approval-detail-failed-text>{{ t('common.detailUnavailable') }}</p>
     <footer class="agent-approval-card__footer">
-      <span v-if="expiry !== null" class="agent-approval-card__expires" data-agent-approval-expires>有效期至 {{ expiry }}</span>
-      <button type="button" class="agent-approval-card__action" data-action="focus-approval" @click="emit('focus', permission.approvalId)">在审批面板处理</button>
+      <span v-if="expiry !== null" class="agent-approval-card__expires" data-agent-approval-expires>{{ t('agent.approval.expiresPrefix', { expiry }) }}</span>
+      <button type="button" class="agent-approval-card__action" data-action="focus-approval" @click="emit('focus', permission.approvalId)">{{ t('agent.approval.focusAction') }}</button>
     </footer>
   </article>
 </template>
@@ -56,11 +56,13 @@ import {
   hasPendingApprovalListLoads,
   whenApprovalListLoadsSettled,
 } from '../../composables/useAgentApprovals'
+import { useI18n } from '../../i18n'
 import { useClientRuntime } from '../../runtime'
 import { assessRisk, type RiskAssessment } from '../../utils/risk'
 import { isUnifiedDiff } from '../../utils/diff'
 import AgentCollapsibleOutput from './AgentCollapsibleOutput.vue'
 
+const { t } = useI18n()
 const props = defineProps<{
   /** CUSTOM-event-derived record, exactly as tracked by the history reducer. */
   permission: AgentPermissionState
@@ -105,25 +107,28 @@ async function resolveDetail(approvalId: string): Promise<ApprovalResponse> {
   return fetched
 }
 
-const STATE_LABELS: Record<string, string> = {
-  pending: '待处理',
-  approved: '已批准',
-  denied: '已拒绝',
-  expired: '已过期',
-  revoked: '已撤销',
-  consumed: '已消费',
+const STATE_LABEL_KEYS: Record<string, string> = {
+  pending: 'agent.approval.state.pending',
+  approved: 'agent.approval.state.approved',
+  denied: 'agent.approval.state.denied',
+  expired: 'agent.approval.state.expired',
+  revoked: 'agent.approval.state.revoked',
+  consumed: 'agent.approval.state.consumed',
 }
 
 /** REST detail is authoritative once loaded; the CUSTOM record fills in before/on failure. */
 const rawState = computed(() => detail.value?.state ?? props.permission.state)
-const stateLabel = computed(() => STATE_LABELS[rawState.value] ?? '未知')
-const tool = computed(() => (props.permission.toolName !== null ? stripAnsiOsc(props.permission.toolName) : '工具调用'))
+const stateLabel = computed(() => {
+  const key = STATE_LABEL_KEYS[rawState.value]
+  return key ? t(key) : t('common.unknown')
+})
+const tool = computed(() => (props.permission.toolName !== null ? stripAnsiOsc(props.permission.toolName) : t('agent.chat.toolCall')))
 const evidence = computed(() => (props.permission.evidence !== null ? stripAnsiOsc(props.permission.evidence) : null))
-const pane = computed(() => (detail.value?.pane_id !== null && detail.value?.pane_id !== undefined ? stripAnsiOsc(detail.value.pane_id) : '详情不可用'))
-const operation = computed(() => (detail.value?.operation !== null && detail.value?.operation !== undefined ? stripAnsiOsc(detail.value.operation) : '详情不可用'))
+const pane = computed(() => (detail.value?.pane_id !== null && detail.value?.pane_id !== undefined ? stripAnsiOsc(detail.value.pane_id) : t('common.detailUnavailable')))
+const operation = computed(() => (detail.value?.operation !== null && detail.value?.operation !== undefined ? stripAnsiOsc(detail.value.operation) : t('common.detailUnavailable')))
 const summary = computed(() => {
   const value = detail.value?.intent_summary
-  return value !== null && value !== undefined ? stripAnsiOsc(value) : '详情不可用'
+  return value !== null && value !== undefined ? stripAnsiOsc(value) : t('common.detailUnavailable')
 })
 const expiry = computed(() => {
   const iso = detail.value?.expires_at ?? props.permission.expiresAt
@@ -140,9 +145,9 @@ function formatExpiry(iso: string): string {
 
 const isDiff = (text: string | null) => text !== null && isUnifiedDiff(text)
 const risk = computed<RiskAssessment>(() => assessRisk({
-  operation: operation.value !== '详情不可用' ? operation.value : null,
-  summary: summary.value !== '详情不可用' ? summary.value : null,
-  toolName: tool.value !== '工具调用' ? tool.value : null,
+  operation: detail.value?.operation !== null && detail.value?.operation !== undefined ? stripAnsiOsc(detail.value.operation) : null,
+  summary: detail.value?.intent_summary !== null && detail.value?.intent_summary !== undefined ? stripAnsiOsc(detail.value.intent_summary) : null,
+  toolName: props.permission.toolName !== null ? stripAnsiOsc(props.permission.toolName) : null,
   evidence: evidence.value,
 }))
 </script>
diff --git a/packages/client-ui/src/components/agent/AgentApprovalPanel.vue b/packages/client-ui/src/components/agent/AgentApprovalPanel.vue
index bd737ea6..60546445 100644
--- a/packages/client-ui/src/components/agent/AgentApprovalPanel.vue
+++ b/packages/client-ui/src/components/agent/AgentApprovalPanel.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="agent-approval-panel" data-agent-approval-panel>
-    <p v-if="loading && visibleApprovals.length === 0" class="agent-approval-panel__state" data-agent-approval-loading>加载中…</p>
-    <p v-else-if="visibleApprovals.length === 0" class="agent-approval-panel__state" data-agent-approval-empty>暂无待处理审批</p>
+    <p v-if="loading && visibleApprovals.length === 0" class="agent-approval-panel__state" data-agent-approval-loading>{{ t('common.loading') }}</p>
+    <p v-else-if="visibleApprovals.length === 0" class="agent-approval-panel__state" data-agent-approval-empty>{{ t('agent.approval.empty') }}</p>
     <div v-else class="agent-approval-panel__list">
       <section
         v-for="approval in visibleApprovals"
@@ -12,17 +12,17 @@
         :aria-busy="isBusy(approval.approval_id) ? 'true' : 'false'"
       >
         <div class="agent-approval-item__meta">
-          <span class="agent-approval-item__pane" data-agent-approval-pane>{{ approval.pane_id !== null ? stripAnsiOsc(approval.pane_id) : '详情不可用' }}</span>
-          <span class="agent-approval-item__operation" data-agent-approval-operation>{{ approval.operation !== null ? stripAnsiOsc(approval.operation) : '详情不可用' }}</span>
+          <span class="agent-approval-item__pane" data-agent-approval-pane>{{ approval.pane_id !== null ? stripAnsiOsc(approval.pane_id) : t('common.detailUnavailable') }}</span>
+          <span class="agent-approval-item__operation" data-agent-approval-operation>{{ approval.operation !== null ? stripAnsiOsc(approval.operation) : t('common.detailUnavailable') }}</span>
           <span class="agent-risk-badge" :class="getRisk(approval).badgeClass" :data-agent-risk-level="getRisk(approval).level">{{ getRisk(approval).label }}</span>
           <span class="agent-approval-item__countdown" data-agent-approval-countdown>{{ countdown(approval.expires_at) }}</span>
         </div>
         <div class="agent-approval-item__summary" data-agent-approval-summary>
           <AgentCollapsibleOutput v-if="isDiff(approval.intent_summary ?? '')" :content="approval.intent_summary ?? ''" />
-          <p v-else>{{ approval.intent_summary !== null ? stripAnsiOsc(approval.intent_summary) : '详情不可用' }}</p>
+          <p v-else>{{ approval.intent_summary !== null ? stripAnsiOsc(approval.intent_summary) : t('common.detailUnavailable') }}</p>
         </div>
         <div class="agent-approval-item__footer">
-          <span class="agent-approval-item__hash" :data-agent-approval-hash="approval.canonical_hash">摘要 #{{ approval.canonical_hash.slice(0, 8) }}</span>
+          <span class="agent-approval-item__hash" :data-agent-approval-hash="approval.canonical_hash">{{ t('agent.approval.hashPrefix', { hash: approval.canonical_hash.slice(0, 8) }) }}</span>
           <span class="agent-approval-item__actions">
             <button
               type="button"
@@ -31,21 +31,21 @@
               :ref="(element) => setApprovalControl(approval.approval_id, element)"
               :disabled="isBusy(approval.approval_id)"
               @click="openConfirm(approval.approval_id)"
-            >批准</button>
+            >{{ t('agent.approval.approve') }}</button>
             <button
               type="button"
               class="agent-approval-button agent-approval-button--deny"
               data-action="deny-approval"
               :disabled="isBusy(approval.approval_id)"
               @click="decide(approval.approval_id, 'deny')"
-            >拒绝</button>
+            >{{ t('agent.approval.deny') }}</button>
             <button
               type="button"
               class="agent-approval-button"
               data-action="revoke-approval"
               :disabled="isBusy(approval.approval_id)"
               @click="revoke(approval.approval_id)"
-            >撤销</button>
+            >{{ t('agent.approval.revoke') }}</button>
           </span>
         </div>
       </section>
@@ -63,13 +63,11 @@
         @keydown="trapFocus"
       >
         <h2 id="agent-approval-confirm-title">
-          <span v-if="isConfirmTargetCritical" class="agent-risk-badge agent-risk-badge--level-4" style="margin-inline-end: 0.5rem">极高危</span>
-          批准该审批请求？
+          <span v-if="isConfirmTargetCritical" class="agent-risk-badge agent-risk-badge--level-4" style="margin-inline-end: 0.5rem">{{ t('agent.risk.level4') }}</span>
+          {{ t('agent.approval.confirmTitle') }}
         </h2>
         <p id="agent-approval-confirm-description">
-          批准后 Agent 将立即执行
-          <strong>{{ confirmTarget === undefined ? '未知操作' : confirmTarget.operation !== null ? stripAnsiOsc(confirmTarget.operation) : '未知操作' }}</strong>。
-          此操作不可撤销，请确认内容无误。
+          {{ t('agent.approval.confirmDesc1') }}<strong>{{ confirmTarget === undefined ? t('agent.approval.unknownOp') : confirmTarget.operation !== null ? stripAnsiOsc(confirmTarget.operation) : t('agent.approval.unknownOp') }}</strong>{{ t('agent.approval.confirmDesc2') }}
         </p>
         <div v-if="confirmTarget !== undefined && confirmTarget.intent_summary !== null" class="agent-approval-dialog__summary">
           <AgentCollapsibleOutput v-if="isDiff(confirmTarget.intent_summary)" :content="confirmTarget.intent_summary" />
@@ -77,26 +75,26 @@
         </div>
 
         <div v-if="isConfirmTargetCritical" class="agent-critical-box" data-agent-critical-box>
-          <p class="agent-critical-warning">⚠️ 极高风险警示：此操作具有高危破坏性，请二次确认！</p>
+          <p class="agent-critical-warning">{{ t('agent.approval.criticalWarning') }}</p>
           <label class="agent-critical-confirm">
             <input
               type="checkbox"
               v-model="criticalAcknowledged"
               data-action="critical-confirm-checkbox"
             />
-            <span>我已知晓该操作具有高危破坏性，确认执行</span>
+            <span>{{ t('agent.approval.criticalAck') }}</span>
           </label>
         </div>
 
         <div class="dialog-actions">
-          <button ref="cancelButton" class="text-button" type="button" data-action="approve-cancel" @click="closeConfirm">取消</button>
+          <button ref="cancelButton" class="text-button" type="button" data-action="approve-cancel" @click="closeConfirm">{{ t('common.cancel') }}</button>
           <button
             class="primary-button"
             type="button"
             data-action="approve-confirm"
             :disabled="(pendingApproveId !== null && isBusy(pendingApproveId)) || (isConfirmTargetCritical && !criticalAcknowledged)"
             @click="confirmApprove"
-          >确认批准</button>
+          >{{ t('agent.approval.confirmApprove') }}</button>
         </div>
       </section>
     </div>
@@ -121,11 +119,14 @@ import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import { stripAnsiOsc, type AgentHistoryState } from '@termflow/client-core'
 import type { ApprovalResponse } from '@termflow/client-contracts'
 import { useAgentApprovals } from '../../composables/useAgentApprovals'
+import { useI18n } from '../../i18n'
 import { useClientRuntime } from '../../runtime'
 import { assessRisk, type RiskAssessment } from '../../utils/risk'
 import { isUnifiedDiff } from '../../utils/diff'
 import AgentCollapsibleOutput from './AgentCollapsibleOutput.vue'
 
+const { t } = useI18n()
+
 const props = defineProps<{
   /** Conversation scope for the approvals list (B REST filter). */
   conversationId: string
diff --git a/packages/client-ui/src/components/agent/AgentBackendStatus.vue b/packages/client-ui/src/components/agent/AgentBackendStatus.vue
index 64f5c454..41ae4598 100644
--- a/packages/client-ui/src/components/agent/AgentBackendStatus.vue
+++ b/packages/client-ui/src/components/agent/AgentBackendStatus.vue
@@ -12,22 +12,24 @@
 //: value verbatim so wire drift never hides data.
 import { computed } from 'vue'
 import { isBackendRuntimeState, type BackendRuntimeState } from '@termflow/client-core'
+import { useI18n } from '../../i18n'
 
+const { t } = useI18n()
 const props = defineProps<{
   /** Raw STATE_DELTA ``/backend`` value from the history reducer (null before the first delta). */
   state: string | null
 }>()
 
-const LABELS: Record<BackendRuntimeState, string> = {
-  connecting: '连接中',
-  idle: '空闲',
-  busy: '处理中',
-  retry: '重试中',
-  ready: '就绪',
-  unavailable: '不可用',
-  context_lost: '上下文丢失',
-  reconciling: '恢复中',
-  closed: '已关闭',
+const LABEL_KEYS: Record<BackendRuntimeState, string> = {
+  connecting: 'agent.backend.connecting',
+  idle: 'agent.backend.idle',
+  busy: 'agent.backend.busy',
+  retry: 'agent.backend.retry',
+  ready: 'agent.backend.ready',
+  unavailable: 'agent.backend.unavailable',
+  context_lost: 'agent.backend.context_lost',
+  reconciling: 'agent.backend.reconciling',
+  closed: 'agent.backend.closed',
 }
 
 const known = computed<BackendRuntimeState | null>(() =>
@@ -37,5 +39,5 @@ const displayState = computed(() => props.state === null ? 'connecting' : (known
 // Keep the diagnostic attribute faithful to the wire value: null is exposed
 // as ``unknown`` while the visual label still tells the user it is opening.
 const dataState = computed(() => props.state ?? 'unknown')
-const label = computed(() => props.state === null ? LABELS.connecting : (known.value !== null ? LABELS[known.value] : '未知'))
+const label = computed(() => props.state === null ? t(LABEL_KEYS.connecting) : (known.value !== null ? t(LABEL_KEYS[known.value]) : t('common.unknown')))
 </script>
diff --git a/packages/client-ui/src/components/agent/AgentChatSession.vue b/packages/client-ui/src/components/agent/AgentChatSession.vue
index c807f82a..d833f9d5 100644
--- a/packages/client-ui/src/components/agent/AgentChatSession.vue
+++ b/packages/client-ui/src/components/agent/AgentChatSession.vue
@@ -4,7 +4,7 @@
     <div class="agent-chat-header__left">
       <RouterLink v-if="variant === 'page'" to="/agent" class="text-button agent-chat-header__back" data-testid="agent-overview-link" data-action="back-to-overview">
         <ArrowLeft :size="16" aria-hidden="true" />
-        <span>Agent 总览</span>
+        <span>{{ t('agent.chat.backOverview') }}</span>
       </RouterLink>
       <div>
         <p class="eyebrow">Agent Chat</p>
@@ -13,9 +13,9 @@
       </div>
     </div>
     <div class="agent-chat-header__actions">
-      <div class="agent-policy-toggle" role="group" aria-label="本对话写入审批" data-agent-conversation-policy>
-        <button type="button" :class="{ 'is-active': conversationPolicy === 'manual' }" :aria-pressed="conversationPolicy === 'manual'" :disabled="policyPending" data-action="conversation-policy-manual" @click="changePolicy('manual')">手动审批</button>
-        <button type="button" :class="{ 'is-active': conversationPolicy === 'auto' }" :aria-pressed="conversationPolicy === 'auto'" :disabled="policyPending" data-action="conversation-policy-auto" @click="policyConfirm = true">完全放行</button>
+      <div class="agent-policy-toggle" role="group" :aria-label="t('agent.chat.policyGroupAria')" data-agent-conversation-policy>
+        <button type="button" :class="{ 'is-active': conversationPolicy === 'manual' }" :aria-pressed="conversationPolicy === 'manual'" :disabled="policyPending" data-action="conversation-policy-manual" @click="changePolicy('manual')">{{ t('agent.chat.policyManual') }}</button>
+        <button type="button" :class="{ 'is-active': conversationPolicy === 'auto' }" :aria-pressed="conversationPolicy === 'auto'" :disabled="policyPending" data-action="conversation-policy-auto" @click="policyConfirm = true">{{ t('agent.chat.policyAuto') }}</button>
       </div>
       
       <button
@@ -27,15 +27,15 @@
         data-action="cancel-run"
         @click="cancelRun"
       >
-        {{ canceling ? '正在取消…' : '取消运行' }}
+        {{ canceling ? t('agent.chat.canceling') : t('agent.chat.cancelRun') }}
       </button>
       <button
         v-if="variant === 'page'"
         type="button"
         class="icon-button icon-only"
         :disabled="deletePending"
-        aria-label="删除会话"
-        title="删除会话"
+        :aria-label="t('agent.conversations.deleteTitle')"
+        :title="t('agent.conversations.deleteTitle')"
         data-action="delete-conversation"
         @click="deleteConfirm = true"
       >
@@ -55,7 +55,7 @@
       data-action="cancel-run"
       @click="cancelRun"
     >
-      {{ canceling ? '正在取消…' : '取消运行' }}
+      {{ canceling ? t('agent.chat.canceling') : t('agent.chat.cancelRun') }}
     </button>
   </div>
 
@@ -63,19 +63,19 @@
     {{ revokedBannerText }}
   </div>
 
-  <div v-if="deleteConfirm" class="agent-policy-confirm" role="alertdialog" aria-label="确认删除会话" data-agent-delete-confirm>
-    <p>删除后该会话及其事件会被清理，无法恢复。</p>
+  <div v-if="deleteConfirm" class="agent-policy-confirm" role="alertdialog" :aria-label="t('agent.chat.deleteConfirmAria')" data-agent-delete-confirm>
+    <p>{{ t('agent.chat.deleteConfirmDesc') }}</p>
     <div class="agent-policy-confirm__actions">
-      <button type="button" class="danger-button" :disabled="deletePending" data-action="confirm-delete-conversation" @click="removeConversation">确认删除</button>
-      <button type="button" class="text-button" :disabled="deletePending" @click="deleteConfirm = false">取消</button>
+      <button type="button" class="danger-button" :disabled="deletePending" data-action="confirm-delete-conversation" @click="removeConversation">{{ t('agent.conversations.deleteConfirm') }}</button>
+      <button type="button" class="text-button" :disabled="deletePending" @click="deleteConfirm = false">{{ t('common.cancel') }}</button>
     </div>
   </div>
 
-  <div v-if="policyConfirm" class="agent-policy-confirm" role="alertdialog" aria-label="确认完全放行本对话" data-agent-policy-confirm>
-    <p>本对话内，Agent 对已授权 Pane 的每次写入都会立即执行，不再弹审批。</p>
+  <div v-if="policyConfirm" class="agent-policy-confirm" role="alertdialog" :aria-label="t('agent.chat.policyConfirmAria')" data-agent-policy-confirm>
+    <p>{{ t('agent.chat.policyConfirmDesc') }}</p>
     <div class="agent-policy-confirm__actions">
-      <button type="button" class="primary-button" :disabled="policyPending" data-action="confirm-conversation-policy" @click="changePolicy('auto')">确认放行</button>
-      <button type="button" class="text-button" :disabled="policyPending" @click="policyConfirm = false">取消</button>
+      <button type="button" class="primary-button" :disabled="policyPending" data-action="confirm-conversation-policy" @click="changePolicy('auto')">{{ t('agent.panel.confirmAutoBtn') }}</button>
+      <button type="button" class="text-button" :disabled="policyPending" @click="policyConfirm = false">{{ t('common.cancel') }}</button>
     </div>
   </div>
 
@@ -86,7 +86,7 @@
 
   <!-- Approval prompt sits directly above the composer (Codex-style). The
        panel stays mounted so it can report the pending count. -->
-  <section v-show="pendingCount > 0" class="agent-approval-prompt" role="region" aria-label="待批准操作" data-agent-approval-prompt>
+  <section v-show="pendingCount > 0" class="agent-approval-prompt" role="region" :aria-label="t('agent.chat.approvalPromptAria')" data-agent-approval-prompt>
     <AgentApprovalPanel ref="approvalPanel" :conversation-id="conversationId" :history="conversation.history.value" @pending-count="updatePendingCount" />
   </section>
 
@@ -123,8 +123,11 @@ import AgentPartsList, { type AgentConversationPart } from './AgentPartsList.vue
 import AgentMessageList from './AgentMessageList.vue'
 import { useAgentConversation } from '../../composables/useAgentConversation'
 import { useBottomToast } from '../../composables/useBottomToast'
+import { useI18n } from '../../i18n'
 import { useClientRuntime } from '../../runtime'
 
+const { t } = useI18n()
+
 const props = withDefaults(defineProps<{
   /** Conversation scope; the parent keys this component on it (remount = re-scope). */
   conversationId: string
@@ -215,14 +218,14 @@ async function changePolicy(policy: 'manual' | 'auto') {
 }
 const revokedBannerText = computed(() =>
   conversation.closeReason.value === 'conversation_not_found'
-    ? '该会话不存在或已被删除，无法继续连接。'
-    : 'Agent Binding 已撤销，无法继续连接。',
+    ? t('agent.chat.notFoundBanner')
+    : t('agent.chat.revokedBanner'),
 )
-const title = computed(() => detail.value?.title ?? `会话 ${props.conversationId.slice(0, 8)}`)
+const title = computed(() => detail.value?.title ?? t('agent.conversations.defaultTitle', { id: props.conversationId.slice(0, 8) }))
 const bindingLabel = computed(() => {
   const binding = detail.value?.binding
   return binding === undefined
-    ? `会话 ${props.conversationId.slice(0, 8)}`
+    ? t('agent.conversations.defaultTitle', { id: props.conversationId.slice(0, 8) })
     : `Binding ${binding.binding_id} · Term ${binding.term_id}`
 })
 
@@ -237,7 +240,7 @@ const displayHistory = computed<AgentHistoryState>(() => {
   for (const [id, message] of base.userMessages) {
     if (message.text === '' && message.deliveryState === 'accepted') {
       if (mapped === null) mapped = new Map(base.userMessages)
-      mapped.set(id, { ...message, text: '历史消息内容不可用' })
+      mapped.set(id, { ...message, text: t('agent.chat.historyUnavailable') })
     }
   }
   return mapped === null ? base : { ...base, userMessages: mapped }
diff --git a/packages/client-ui/src/components/agent/AgentCollapsibleOutput.vue b/packages/client-ui/src/components/agent/AgentCollapsibleOutput.vue
index 884b84fe..91aa7953 100644
--- a/packages/client-ui/src/components/agent/AgentCollapsibleOutput.vue
+++ b/packages/client-ui/src/components/agent/AgentCollapsibleOutput.vue
@@ -18,7 +18,7 @@
           data-action="toggle-fold"
           @click="expanded = false"
         >
-          收起代码 ▴
+          {{ t('agent.chat.collapseCode') }}
         </button>
       </template>
       <template v-else>
@@ -37,7 +37,7 @@
           data-action="toggle-fold"
           @click="expanded = true"
         >
-          展开其余 {{ foldedCount }} 行 (共 {{ totalLines }} 行) ▾
+          {{ t('agent.chat.expandLines', { folded: foldedCount, total: totalLines }) }}
         </button>
         <div
           v-for="(line, idx) in diffLines.slice(diffLines.length - tailCount)"
@@ -61,7 +61,7 @@
           data-action="toggle-fold"
           @click="expanded = false"
         >
-          收起输出 ▴
+          {{ t('agent.chat.collapseOutput') }}
         </button>
       </template>
       <template v-else>
@@ -72,7 +72,7 @@
           data-action="toggle-fold"
           @click="expanded = true"
         >
-          展开其余 {{ foldedCount }} 行 (共 {{ totalLines }} 行) ▾
+          {{ t('agent.chat.expandLines', { folded: foldedCount, total: totalLines }) }}
         </button>
         <pre class="agent-output-pre">{{ tailContent }}</pre>
       </template>
@@ -83,8 +83,11 @@
 <script setup lang="ts">
 import { computed, ref, watch } from 'vue'
 import { stripAnsiOsc } from '@termflow/client-core'
+import { useI18n } from '../../i18n'
 import { isUnifiedDiff, parseUnifiedDiff, type DiffLine } from '../../utils/diff'
 
+const { t } = useI18n()
+
 const props = withDefaults(
   defineProps<{
     content: string
diff --git a/packages/client-ui/src/components/agent/AgentComposer.vue b/packages/client-ui/src/components/agent/AgentComposer.vue
index 41df8c5a..f798c2ae 100644
--- a/packages/client-ui/src/components/agent/AgentComposer.vue
+++ b/packages/client-ui/src/components/agent/AgentComposer.vue
@@ -14,7 +14,7 @@
           rows="1"
           :maxlength="MAX_AGENT_TEXT_BYTES"
           :disabled="unavailable"
-          aria-label="发送给 Agent 的消息"
+          :aria-label="t('agent.composer.inputAria')"
           data-agent-composer-input
           @keydown="onKeydown"
         />
@@ -23,8 +23,8 @@
           class="icon-button icon-only agent-composer__send"
           :disabled="!canSend"
           data-action="send-message"
-          aria-label="发送消息"
-          title="发送消息"
+          :aria-label="t('agent.composer.sendAria')"
+          :title="t('agent.composer.sendAria')"
           @click="submit"
         >
           <Send :size="18" aria-hidden="true" />
@@ -39,14 +39,14 @@
         data-action="cancel-run"
         @click="cancelRun"
       >
-        {{ canceling ? '正在取消…' : '取消运行' }}
+        {{ canceling ? t('agent.chat.canceling') : t('agent.chat.cancelRun') }}
       </button>
     </div>
     <p v-if="tooLong" class="form-error agent-composer__hint" role="alert" data-agent-composer-hint>
-      文本超出长度限制（最多 {{ MAX_AGENT_TEXT_BYTES }} 字节），请精简后重试。
+      {{ t('agent.composer.tooLong', { max: MAX_AGENT_TEXT_BYTES }) }}
     </p>
     <p v-if="runtimeDown" class="agent-composer__unavailable" role="status" data-agent-composer-unavailable>
-      后端运行时未就绪，暂时无法发送消息。
+      {{ t('agent.composer.unavailable') }}
     </p>
   </div>
 </template>
@@ -68,9 +68,12 @@
 import { computed, nextTick, ref, watch } from 'vue'
 import { Send } from '@lucide/vue'
 import { ApiError } from '@termflow/client-core'
+import { useI18n } from '../../i18n'
 import { useClientRuntime } from '../../runtime'
 import { useBottomToast } from '../../composables/useBottomToast'
 
+const { t } = useI18n()
+
 const props = defineProps<{
   conversationId: string
   /** Parent-level fail-closed disable (binding revoked, conversation closed). */
diff --git a/packages/client-ui/src/components/agent/AgentMessageBubble.vue b/packages/client-ui/src/components/agent/AgentMessageBubble.vue
index d694b41f..007fe67b 100644
--- a/packages/client-ui/src/components/agent/AgentMessageBubble.vue
+++ b/packages/client-ui/src/components/agent/AgentMessageBubble.vue
@@ -7,11 +7,11 @@
     <summary class="agent-message__summary">
       <span class="agent-message__role" data-agent-message-role-label>
         <Settings2 :size="14" aria-hidden="true" />
-        系统
+        {{ `${t('agent.chat.roleSystem')} ` }}
       </span>
-      <span class="agent-message__summary-title">系统上下文</span>
+      <span class="agent-message__summary-title">{{ t('agent.chat.systemContext') }}</span>
     </summary>
-    <p class="agent-message__text">{{ text || '系统上下文内容不可用' }}</p>
+    <p class="agent-message__text">{{ text || t('agent.chat.systemUnavailable') }}</p>
   </details>
   <div
     v-else
@@ -22,7 +22,7 @@
     <div class="agent-message__role" data-agent-message-role-label>
       <UserRound v-if="isUser" :size="14" aria-hidden="true" />
       <Bot v-else :size="14" aria-hidden="true" />
-      {{ isUser ? '你' : 'Agent' }}
+      {{ isUser ? t('agent.chat.roleUser') : 'Agent' }}
     </div>
     <p class="agent-message__text">{{ text }}<span v-if="streaming" class="agent-message__cursor" aria-hidden="true"></span></p>
   </div>
@@ -37,7 +37,9 @@
 import { computed } from 'vue'
 import { Bot, Settings2, UserRound } from '@lucide/vue'
 import { stripAnsiOsc, type AgentMessageState, type AgentUserMessageState } from '@termflow/client-core'
+import { useI18n } from '../../i18n'
 
+const { t } = useI18n()
 const props = defineProps<{
   /** Assistant message (streaming/complete) or user echo, exactly as stored by the M6b history reducer. */
   message: AgentMessageState | AgentUserMessageState
diff --git a/packages/client-ui/src/components/agent/AgentMessageList.vue b/packages/client-ui/src/components/agent/AgentMessageList.vue
index 3c5a3dab..a61a2587 100644
--- a/packages/client-ui/src/components/agent/AgentMessageList.vue
+++ b/packages/client-ui/src/components/agent/AgentMessageList.vue
@@ -10,7 +10,7 @@
       @scroll="onScroll"
     >
       <p v-if="items.length === 0" class="agent-message-list__empty" data-agent-message-empty>
-        输入一条消息，开始与 Agent 对话。
+        {{ t('agent.chat.emptyPrompt') }}
       </p>
       <template v-for="item in items" :key="item.key">
         <AgentMessageBubble v-if="item.kind === 'message' || item.kind === 'user'" :message="item.message" />
@@ -41,11 +41,14 @@
 //: (app.css).
 import { computed, nextTick, onMounted, ref, watch } from 'vue'
 import type { AgentHistoryState, AgentMessageState, AgentPermissionState, AgentThinkingState, AgentToolCallState, AgentUserMessageState } from '@termflow/client-core'
+import { useI18n } from '../../i18n'
 import AgentApprovalCard from './AgentApprovalCard.vue'
 import AgentMessageBubble from './AgentMessageBubble.vue'
 import AgentThinkingBlock from './AgentThinkingBlock.vue'
 import AgentToolActivity from './AgentToolActivity.vue'
 
+const { t } = useI18n()
+
 const props = defineProps<{
   /** Whole reducer state, exactly as returned by the M6b conversation composable. */
   history: AgentHistoryState
diff --git a/packages/client-ui/src/components/agent/AgentPanePicker.vue b/packages/client-ui/src/components/agent/AgentPanePicker.vue
index a6ff85ec..a7a5d9e9 100644
--- a/packages/client-ui/src/components/agent/AgentPanePicker.vue
+++ b/packages/client-ui/src/components/agent/AgentPanePicker.vue
@@ -1,13 +1,13 @@
 <template>
   <fieldset class="agent-panes" :disabled="disabled">
     <legend>
-      {{ legend }}
-      <ContextHelp label="窗格授权说明" text="窗格是终端里的一块分屏（% 编号）。Agent 只能读取勾选窗格的内容；写入仍会逐一弹审批。" />
+      {{ legend ?? t('agent.panes.defaultLegend') }}
+      <ContextHelp :label="t('agent.panes.helpLabel')" :text="t('agent.panes.helpText')" />
     </legend>
     <div class="agent-panes__actions">
-      <button type="button" :disabled="disabled || !panes.length" data-action="select-all-panes" @click="selectAll">全选</button>
-      <button type="button" :disabled="disabled || !modelValue.length" data-action="clear-panes" @click="clear">清空</button>
-      <span class="agent-panes__count">已选 {{ modelValue.length }}/{{ panes.length }}</span>
+      <button type="button" :disabled="disabled || !panes.length" data-action="select-all-panes" @click="selectAll">{{ t('agent.panes.selectAll') }}</button>
+      <button type="button" :disabled="disabled || !modelValue.length" data-action="clear-panes" @click="clear">{{ t('agent.panes.clear') }}</button>
+      <span class="agent-panes__count">{{ t('agent.panes.selectedCount', { selected: modelValue.length, total: panes.length }) }}</span>
     </div>
     <div class="agent-panes__list">
       <label v-for="pane in panes" :key="pane.pane_id" class="agent-pane">
@@ -17,14 +17,16 @@
           <span class="agent-pane__title">{{ pane.current_command || pane.title || pane.window_id }}</span>
         </span>
       </label>
-      <p v-if="!panes.length" class="agent-panes__empty">暂无可用窗格，请连接终端后刷新。</p>
+      <p v-if="!panes.length" class="agent-panes__empty">{{ t('agent.panes.empty') }}</p>
     </div>
   </fieldset>
 </template>
 <script setup lang="ts">
+import { useI18n } from '../../i18n'
 import type { PaneTopology } from '../../types'
 import ContextHelp from '../common/ContextHelp.vue'
-const props = withDefaults(defineProps<{ modelValue: string[]; panes: PaneTopology[]; legend?: string; disabled?: boolean }>(), { legend: '允许 Agent 访问的窗格', disabled: false })
+const { t } = useI18n()
+const props = withDefaults(defineProps<{ modelValue: string[]; panes: PaneTopology[]; legend?: string; disabled?: boolean }>(), { disabled: false })
 const emit = defineEmits<{ 'update:modelValue': [value: string[]] }>()
 function toggle(paneId: string, event: Event) {
   const checked = (event.target as HTMLInputElement).checked
diff --git a/packages/client-ui/src/components/agent/AgentPartsList.vue b/packages/client-ui/src/components/agent/AgentPartsList.vue
index ba33dd5a..1d3adb71 100644
--- a/packages/client-ui/src/components/agent/AgentPartsList.vue
+++ b/packages/client-ui/src/components/agent/AgentPartsList.vue
@@ -6,14 +6,14 @@
         class="agent-message"
         :class="part.role === 'user' ? 'agent-message--user' : 'agent-message--assistant'"
       >
-        <p v-if="part.role === 'user'" class="agent-message__role">你</p>
+        <p v-if="part.role === 'user'" class="agent-message__role">{{ t('agent.chat.roleUser') }}</p>
         <p class="agent-message__text">{{ part.text }}</p>
       </div>
 
       <details v-else-if="part.type === 'reasoning'" class="agent-part-entry agent-part-entry--thinking" data-agent-thinking>
         <summary class="agent-part-entry__head">
           <Sparkles :size="14" aria-hidden="true" />
-          <span class="agent-part-entry__title">思考</span>
+          <span class="agent-part-entry__title">{{ t('agent.chat.thinking') }}</span>
         </summary>
         <p class="agent-part-entry__text">{{ part.text }}</p>
       </details>
@@ -31,25 +31,25 @@
         </summary>
         <div v-if="part.input || part.output || part.error || part.input_omitted?.length" class="agent-tool-activity__detail" data-agent-tool-detail>
           <template v-if="part.input && part.input !== '{}'">
-            <p class="agent-tool-activity__label">输入</p>
+            <p class="agent-tool-activity__label">{{ t('agent.chat.toolInput') }}</p>
             <AgentCollapsibleOutput :content="pretty(part.input)" />
           </template>
           <p v-if="part.input_omitted?.length" class="agent-tool-activity__label" data-agent-tool-defaults>
-            默认参数已省略：{{ part.input_omitted.join('、') }}
+            {{ t('agent.chat.toolDefaultsOmitted', { items: part.input_omitted.join('、') }) }}
           </p>
           <template v-if="part.output">
-            <p class="agent-tool-activity__label">结果</p>
+            <p class="agent-tool-activity__label">{{ t('agent.chat.toolOutput') }}</p>
             <AgentCollapsibleOutput :content="pretty(part.output)" :status="part.status" />
           </template>
           <template v-if="part.error">
-            <p class="agent-tool-activity__label">错误</p>
+            <p class="agent-tool-activity__label">{{ t('agent.chat.toolError') }}</p>
             <AgentCollapsibleOutput :content="part.error" status="error" code-class="agent-tool-activity__code--error" />
           </template>
         </div>
       </details>
 
       <div v-else-if="part.type === 'step-start'" class="agent-part-step" aria-hidden="true">
-        <span>开始</span>
+        <span>{{ t('agent.chat.stepStart') }}</span>
       </div>
     </template>
   </div>
@@ -60,8 +60,11 @@
 //: returned by `/api/v1/agent/conversations/{id}/parts` and renders text,
 //: reasoning, structured tool input/output, and step markers.
 import { Sparkles, Wrench } from '@lucide/vue'
+import { useI18n } from '../../i18n'
 import AgentCollapsibleOutput from './AgentCollapsibleOutput.vue'
 
+const { t } = useI18n()
+
 export interface AgentConversationPart {
   type: string
   id?: string | null
@@ -78,21 +81,22 @@ export interface AgentConversationPart {
 
 defineProps<{ parts: readonly AgentConversationPart[] }>()
 
-const STATUS_LABELS: Record<string, string> = {
-  completed: '已完成',
-  error: '失败',
-  failed: '失败',
-  running: '运行中',
-  pending: '等待中',
+const STATUS_LABEL_KEYS: Record<string, string> = {
+  completed: 'agent.chat.toolStatus.completed',
+  error: 'agent.chat.toolStatus.failed',
+  failed: 'agent.chat.toolStatus.failed',
+  running: 'agent.chat.toolStatus.running',
+  pending: 'agent.chat.toolStatus.pending',
 }
 
 function bareTool(name: string | null | undefined): string {
   const bare = (name ?? '').replace(/^termflow_termflow_/, '').replace(/^termflow_/, '')
-  return bare === '' ? '工具调用' : bare
+  return bare === '' ? t('agent.chat.toolCall') : bare
 }
 
 function statusLabel(status: string | null | undefined): string {
-  return STATUS_LABELS[status ?? ''] ?? (status ?? '')
+  const key = STATUS_LABEL_KEYS[status ?? '']
+  return key ? t(key) : (status ?? '')
 }
 
 function pretty(value: string): string {
diff --git a/packages/client-ui/src/components/agent/AgentSetupForm.vue b/packages/client-ui/src/components/agent/AgentSetupForm.vue
index c9a4fcdd..401a2375 100644
--- a/packages/client-ui/src/components/agent/AgentSetupForm.vue
+++ b/packages/client-ui/src/components/agent/AgentSetupForm.vue
@@ -1,8 +1,8 @@
 <template>
   <form class="agent-setup-form" @submit.prevent="submit">
     <h3 class="agent-setup-form__title">
-      设置 Term Agent
-      <ContextHelp label="Term Agent 说明" :text="introHelp" />
+      {{ t('agent.setup.title') }}
+      <ContextHelp :label="t('agent.setup.helpLabel')" :text="introHelp" />
     </h3>
 
     <AgentPanePicker
@@ -14,17 +14,19 @@
 
     <p v-if="localError || error" class="form-error" role="alert">{{ localError || error }}</p>
     <div class="agent-setup-form__actions">
-      <button type="button" class="text-button" :disabled="busy" data-action="refresh-setup" @click="emit('refresh')">刷新状态</button>
-      <button type="submit" class="primary-button" :disabled="busy">{{ busy ? '正在设置…' : '启用 Agent' }}</button>
+      <button type="button" class="text-button" :disabled="busy" data-action="refresh-setup" @click="emit('refresh')">{{ t('agent.panel.refreshStatus') }}</button>
+      <button type="submit" class="primary-button" :disabled="busy">{{ busy ? t('agent.setup.settingUp') : t('agent.setup.enable') }}</button>
     </div>
   </form>
 </template>
 <script setup lang="ts">
 import { computed, ref, watch } from 'vue'
 import type { AgentSetupProfileSummary, AgentSetupResponse } from '@termflow/client-contracts'
+import { useI18n } from '../../i18n'
 import type { PaneTopology } from '../../types'
 import AgentPanePicker from './AgentPanePicker.vue'
 import ContextHelp from '../common/ContextHelp.vue'
+const { t } = useI18n()
 export type AgentSetupSelection = { paneIds: string[]; topologyRevision: number; disclosureFingerprint: string; accepted: true } & ({ kind: 'existing'; profileId: string } | { kind: 'new'; profileDisplayName: string })
 const props = defineProps<{ setup: AgentSetupResponse; profiles: AgentSetupProfileSummary[]; panes: PaneTopology[]; busy: boolean; error: string }>()
 const emit = defineEmits<{ submit: [selection: AgentSetupSelection]; refresh: [] }>()
diff --git a/packages/client-ui/src/components/agent/AgentThinkingBlock.vue b/packages/client-ui/src/components/agent/AgentThinkingBlock.vue
index 8895bc02..4f47c359 100644
--- a/packages/client-ui/src/components/agent/AgentThinkingBlock.vue
+++ b/packages/client-ui/src/components/agent/AgentThinkingBlock.vue
@@ -2,7 +2,7 @@
   <details class="agent-thinking" :open="thinking.status === 'streaming'" :data-state="thinking.status" data-agent-thinking>
     <summary class="agent-thinking__summary">
       <Sparkles :size="14" aria-hidden="true" />
-      <span>思考{{ thinking.status === 'streaming' ? '中…' : '' }}</span>
+      <span>{{ thinking.status === 'streaming' ? t('agent.chat.thinkingStreaming') : t('agent.chat.thinking') }}</span>
     </summary>
     <p class="agent-thinking__text">{{ text }}</p>
   </details>
@@ -14,7 +14,9 @@
 import { computed } from 'vue'
 import { Sparkles } from '@lucide/vue'
 import { stripAnsiOsc, type AgentThinkingState } from '@termflow/client-core'
+import { useI18n } from '../../i18n'
 
+const { t } = useI18n()
 const props = defineProps<{ thinking: AgentThinkingState }>()
 const text = computed(() => stripAnsiOsc(props.thinking.text))
 </script>
diff --git a/packages/client-ui/src/components/agent/AgentToolActivity.vue b/packages/client-ui/src/components/agent/AgentToolActivity.vue
index 94e223ff..7223fbc0 100644
--- a/packages/client-ui/src/components/agent/AgentToolActivity.vue
+++ b/packages/client-ui/src/components/agent/AgentToolActivity.vue
@@ -37,17 +37,19 @@
 import { computed, ref, useId } from 'vue'
 import { ChevronDown, ChevronRight } from '@lucide/vue'
 import { stripAnsiOsc, type AgentToolCallState } from '@termflow/client-core'
+import { useI18n } from '../../i18n'
 import AgentCollapsibleOutput from './AgentCollapsibleOutput.vue'
 
+const { t } = useI18n()
 const props = defineProps<{
   /** Tool call record, exactly as tracked by the M6b history reducer. */
   call: AgentToolCallState
 }>()
 
-const STATUS_LABELS: Record<AgentToolCallState['status'], string> = {
-  running: '运行中',
-  completed: '已完成',
-  failed: '执行失败',
+const STATUS_LABEL_KEYS: Record<AgentToolCallState['status'], string> = {
+  running: 'agent.chat.toolStatus.running',
+  completed: 'agent.chat.toolStatus.completed',
+  failed: 'agent.chat.toolStatus.failedExec',
 }
 
 const expanded = ref(false)
@@ -58,8 +60,8 @@ const hasSummary = computed(() => props.call.summary !== null)
 // name carries a doubled ``termflow_`` prefix; show the bare tool name.
 const displayName = computed(() => {
   const bare = props.call.toolName.replace(/^termflow_termflow_/, '').replace(/^termflow_/, '')
-  return bare === '' ? '工具调用' : bare
+  return bare === '' ? t('agent.chat.toolCall') : bare
 })
-const statusLabel = computed(() => STATUS_LABELS[props.call.status])
+const statusLabel = computed(() => t(STATUS_LABEL_KEYS[props.call.status]))
 const summaryText = computed(() => stripAnsiOsc(props.call.summary ?? ''))
 </script>
diff --git a/packages/client-ui/src/components/agent/TerminalAgentPanel.vue b/packages/client-ui/src/components/agent/TerminalAgentPanel.vue
index de330911..911d719c 100644
--- a/packages/client-ui/src/components/agent/TerminalAgentPanel.vue
+++ b/packages/client-ui/src/components/agent/TerminalAgentPanel.vue
@@ -13,14 +13,14 @@
     :style="mobilePage ? undefined : panelStyle"
   >
     <header class="terminal-agent-panel__header">
-      <div class="terminal-agent-panel__toolbar" aria-label="Agent 工具">
+      <div class="terminal-agent-panel__toolbar" :aria-label="t('agent.panel.toolsAria')">
         <button
           v-if="!mobilePage"
           type="button"
           class="icon-button icon-only"
           data-action="drag-agent"
-          aria-label="拖动 Agent 面板"
-          title="拖动 Agent 面板"
+          :aria-label="t('agent.panel.dragAria')"
+          :title="t('agent.panel.dragAria')"
           @pointerdown.stop.prevent="beginDrag"
         >
           <Move :size="17" aria-hidden="true" />
@@ -29,8 +29,8 @@
           type="button"
           class="icon-button icon-only"
           data-action="new-agent-conversation"
-          aria-label="新建会话"
-          title="新建会话"
+          :aria-label="t('agent.panel.newConversation')"
+          :title="t('agent.panel.newConversation')"
           :disabled="!isReady || mutating"
           @click="createConversation"
         >
@@ -40,8 +40,8 @@
           type="button"
           class="icon-button icon-only"
           data-action="toggle-agent-history"
-          aria-label="历史记录"
-          title="历史记录"
+          :aria-label="t('agent.panel.history')"
+          :title="t('agent.panel.history')"
           :aria-expanded="historyOpen ? 'true' : 'false'"
           :disabled="!isReady"
           @click="historyOpen = !historyOpen"
@@ -53,8 +53,8 @@
           type="button"
           class="icon-button icon-only"
           data-action="toggle-agent-settings"
-          aria-label="Agent 设置"
-          title="Agent 设置：调整可访问的窗格"
+          :aria-label="t('agent.panel.settingsAria')"
+          :title="t('agent.panel.settingsTitle')"
           :aria-expanded="settingsOpen ? 'true' : 'false'"
           :disabled="!isReady || mutating"
           @click="toggleSettings"
@@ -68,7 +68,7 @@
         v-model="renameDraft"
         class="terminal-agent-panel__rename"
         data-agent-rename-input
-        aria-label="重命名会话"
+        :aria-label="t('agent.conversations.renameTitle')"
         @keydown.enter.prevent="commitRename"
         @keydown.esc="cancelRename"
         @blur="commitRename"
@@ -78,7 +78,7 @@
         type="button"
         class="terminal-agent-panel__title"
         data-agent-panel-title
-        title="重命名会话"
+        :title="t('agent.conversations.renameTitle')"
         @click="beginRename(selectedConversationId)"
       >{{ panelTitle }}</button>
       <div class="terminal-agent-panel__actions">
@@ -87,8 +87,8 @@
           type="button"
           class="icon-button icon-only"
           data-action="close-agent"
-          aria-label="关闭 Agent"
-          title="关闭 Agent"
+          :aria-label="t('agent.panel.closeAria')"
+          :title="t('agent.panel.closeAria')"
           @click="emit('close')"
         >
           <X :size="18" aria-hidden="true" />
@@ -104,78 +104,78 @@
         :data-backend-state="backendState ?? undefined"
       >{{ mergedStatusLabel }}</span>
       <div v-if="isReady && bindingId" class="terminal-agent-policy" data-agent-write-policy>
-        <span class="terminal-agent-policy__label">写入审批</span>
-        <div class="terminal-agent-policy__options" role="group" aria-label="新会话写入审批">
-          <button type="button" :class="{ 'is-active': writePolicy === 'manual' }" :aria-pressed="writePolicy === 'manual'" :disabled="mutating" data-action="policy-manual" @click="changeWritePolicy('manual')">手动</button>
-          <button type="button" :class="{ 'is-active': writePolicy === 'auto' }" :aria-pressed="writePolicy === 'auto'" :disabled="mutating" data-action="policy-auto" @click="pendingAutoPolicy = true">放行</button>
+        <span class="terminal-agent-policy__label">{{ t('agent.panel.writePolicy') }}</span>
+        <div class="terminal-agent-policy__options" role="group" :aria-label="t('agent.panel.writePolicyGroupAria')">
+          <button type="button" :class="{ 'is-active': writePolicy === 'manual' }" :aria-pressed="writePolicy === 'manual'" :disabled="mutating" data-action="policy-manual" @click="changeWritePolicy('manual')">{{ t('agent.panel.policyManual') }}</button>
+          <button type="button" :class="{ 'is-active': writePolicy === 'auto' }" :aria-pressed="writePolicy === 'auto'" :disabled="mutating" data-action="policy-auto" @click="pendingAutoPolicy = true">{{ t('agent.panel.policyAuto') }}</button>
         </div>
       </div>
     </div>
 
     <div class="terminal-agent-panel__content">
       <section v-if="settingsOpen && isReady" class="terminal-agent-panel__scroll" data-agent-panel-settings>
-        <h3 class="agent-setup-form__title">Agent 设置</h3>
+        <h3 class="agent-setup-form__title">{{ t('agent.panel.settingsAria') }}</h3>
         <AgentPanePicker v-model="settingsPaneIds" :panes="panes" :disabled="mutating" />
         <p v-if="settingsError" class="form-error" role="alert">{{ settingsError }}</p>
         <div class="agent-setup-form__actions">
-          <button type="button" class="text-button" :disabled="mutating" data-action="cancel-agent-settings" @click="settingsOpen = false">取消</button>
-          <button type="button" class="primary-button" :disabled="mutating || !settingsPaneIds.length" data-action="save-agent-settings" @click="savePaneSettings">保存</button>
+          <button type="button" class="text-button" :disabled="mutating" data-action="cancel-agent-settings" @click="settingsOpen = false">{{ t('common.cancel') }}</button>
+          <button type="button" class="primary-button" :disabled="mutating || !settingsPaneIds.length" data-action="save-agent-settings" @click="savePaneSettings">{{ t('common.save') }}</button>
         </div>
       </section>
-      <section v-else-if="loading" class="terminal-agent-panel__scroll" data-agent-panel-state="loading" role="status">正在加载 Agent…</section>
+      <section v-else-if="loading" class="terminal-agent-panel__scroll" data-agent-panel-state="loading" role="status">{{ t('agent.panel.loading') }}</section>
       <section v-else-if="setup?.state === 'unconfigured'" class="terminal-agent-panel__scroll" data-agent-panel-state="unconfigured">
         <AgentSetupForm :setup="setup" :profiles="profiles" :panes="panes" :busy="mutating" :error="error" @submit="submitSetup" @refresh="refresh" />
       </section>
       <section v-else-if="setup?.state === 'deployment_required'" class="terminal-agent-panel__scroll" data-agent-panel-state="deployment_required">
         <div class="agent-panel-empty">
-          <h3>需要部署 Agent 服务</h3>
-          <p>请管理员完成运行环境和提供方配置。</p>
+          <h3>{{ t('agent.panel.deploymentRequiredTitle') }}</h3>
+          <p>{{ t('agent.panel.deploymentRequiredDesc') }}</p>
           <div class="agent-setup-form__actions">
-            <button type="button" class="text-button" :disabled="mutating" @click="refresh">检查部署状态</button>
+            <button type="button" class="text-button" :disabled="mutating" @click="refresh">{{ t('agent.panel.checkDeployment') }}</button>
           </div>
         </div>
       </section>
       <section v-else-if="setup?.state === 'activating'" class="terminal-agent-panel__scroll" data-agent-panel-state="activating" role="status">
         <div class="agent-panel-empty">
-          <h3>Agent 正在激活</h3>
-          <p class="muted">运行时正在连接，稍候会自动刷新。</p>
+          <h3>{{ t('agent.panel.activatingTitle') }}</h3>
+          <p class="muted">{{ t('agent.panel.activatingDesc') }}</p>
           <div class="agent-setup-form__actions">
-            <button type="button" class="text-button" :disabled="mutating" @click="refresh">刷新状态</button>
+            <button type="button" class="text-button" :disabled="mutating" @click="refresh">{{ t('agent.panel.refreshStatus') }}</button>
           </div>
         </div>
       </section>
       <section v-else-if="disclosureRecoveryRequired" class="terminal-agent-panel__scroll" data-agent-panel-state="unavailable" data-agent-disclosure-recovery>
-        <h3>请重新启用 Agent</h3>
-        <p class="muted">部署的提供方配置已更新。</p>
-        <button type="button" class="primary-button" data-action="accept-current-disclosure" :disabled="mutating" @click="acceptCurrentDisclosure">重新启用</button>
+        <h3>{{ t('agent.panel.reEnableTitle') }}</h3>
+        <p class="muted">{{ t('agent.panel.reEnableDesc') }}</p>
+        <button type="button" class="primary-button" data-action="accept-current-disclosure" :disabled="mutating" @click="acceptCurrentDisclosure">{{ t('agent.panel.reEnable') }}</button>
         <p v-if="error" role="alert">{{ error }}</p>
-        <button type="button" :disabled="mutating" @click="refresh">刷新</button>
+        <button type="button" :disabled="mutating" @click="refresh">{{ t('common.refresh') }}</button>
       </section>
       <section v-else-if="setup?.state !== 'ready'" class="terminal-agent-panel__scroll" data-agent-panel-state="unavailable">
         <div class="agent-panel-empty">
-          <h3>{{ error ? 'Agent 暂不可用' : 'Agent 正在恢复' }}</h3>
-          <p role="alert">{{ error || '运行时还在连接中，稍候会自动刷新。' }}</p>
+          <h3>{{ error ? t('agent.panel.unavailableTitle') : t('agent.panel.recoveringTitle') }}</h3>
+          <p role="alert">{{ error || t('agent.panel.recoveringDesc') }}</p>
           <div class="agent-setup-form__actions">
-            <button type="button" class="text-button" :disabled="mutating" @click="retry">重试</button>
-            <button v-if="bindingId" type="button" class="primary-button" :disabled="mutating" @click="activate">重新激活</button>
+            <button type="button" class="text-button" :disabled="mutating" @click="retry">{{ t('common.retry') }}</button>
+            <button v-if="bindingId" type="button" class="primary-button" :disabled="mutating" @click="activate">{{ t('agent.panel.reactivate') }}</button>
           </div>
         </div>
       </section>
       <div v-else data-agent-panel-state="ready" class="terminal-agent-panel__ready">
-        <div v-if="pendingAutoPolicy" class="terminal-agent-policy__confirm" role="alertdialog" aria-label="确认完全放行" data-agent-policy-confirm>
-          <p>完全放行后，Agent 对已授权 Pane 的每次写入都会立即执行，不再弹审批。</p>
+        <div v-if="pendingAutoPolicy" class="terminal-agent-policy__confirm" role="alertdialog" :aria-label="t('agent.panel.confirmAutoAria')" data-agent-policy-confirm>
+          <p>{{ t('agent.panel.confirmAutoDesc') }}</p>
           <div class="terminal-agent-policy__confirm-actions">
-            <button type="button" class="primary-button" :disabled="mutating" data-action="confirm-policy-auto" @click="changeWritePolicy('auto')">确认放行</button>
-            <button type="button" class="text-button" :disabled="mutating" @click="pendingAutoPolicy = false">取消</button>
+            <button type="button" class="primary-button" :disabled="mutating" data-action="confirm-policy-auto" @click="changeWritePolicy('auto')">{{ t('agent.panel.confirmAutoBtn') }}</button>
+            <button type="button" class="text-button" :disabled="mutating" @click="pendingAutoPolicy = false">{{ t('common.cancel') }}</button>
           </div>
         </div>
         <div v-if="historyOpen" class="terminal-agent-history-backdrop" data-agent-history-backdrop @click="historyOpen = false" />
         <div v-if="historyOpen" class="terminal-agent-history" data-agent-history>
           <div class="terminal-agent-history__heading">
-            <strong>历史记录</strong>
-            <span>{{ conversations.length }} 个会话</span>
+            <strong>{{ t('agent.panel.history') }}</strong>
+            <span>{{ t('agent.panel.historyCount', { count: conversations.length }) }}</span>
           </div>
-          <p v-if="conversations.length === 0" class="muted">暂无会话</p>
+          <p v-if="conversations.length === 0" class="muted">{{ t('agent.panel.historyEmpty') }}</p>
           <div v-for="entry in conversations" :key="entry.conversation_id" class="terminal-agent-history__row">
             <button
               type="button"
@@ -191,20 +191,20 @@
                 v-model="renameDraft"
                 class="terminal-agent-history__rename-input"
                 data-agent-history-rename-input
-                aria-label="重命名会话"
+                :aria-label="t('agent.conversations.renameTitle')"
                 @keydown.enter.prevent="commitRename"
                 @keydown.esc="cancelRename"
                 @blur="commitRename"
                 @click.stop
               />
-              <span v-else class="terminal-agent-history__item-title">{{ entry.title || '未命名会话' }}</span>
-              <span class="terminal-agent-history__item-status">{{ entry.status === 'open' ? '进行中' : '已停止' }}</span>
+              <span v-else class="terminal-agent-history__item-title">{{ entry.title || t('agent.panel.untitledConversation') }}</span>
+              <span class="terminal-agent-history__item-status">{{ entry.status === 'open' ? t('agent.panel.statusOpen') : t('agent.status.stopped') }}</span>
             </button>
             <button
               type="button"
               class="icon-button icon-only terminal-agent-history__rename"
-              :aria-label="`重命名会话 ${entry.title || '未命名会话'}`"
-              title="重命名会话"
+              :aria-label="t('agent.conversations.renameAria', { title: entry.title || t('agent.panel.untitledConversation') })"
+              :title="t('agent.conversations.renameTitle')"
               data-action="rename-history-conversation"
               @click="beginRename(entry.conversation_id)"
             >
@@ -213,8 +213,8 @@
             <button
               type="button"
               class="icon-button icon-only terminal-agent-history__delete"
-              :aria-label="`删除会话 ${entry.title || '未命名会话'}`"
-              title="删除会话"
+              :aria-label="t('agent.conversations.deleteAria', { title: entry.title || t('agent.panel.untitledConversation') })"
+              :title="t('agent.conversations.deleteTitle')"
               data-action="delete-history-conversation"
               @click="deleteHistoryConversation(entry.conversation_id)"
             >
@@ -224,7 +224,7 @@
         </div>
         <p v-if="error" class="agent-panel-error" role="alert">{{ error }}</p>
         <AgentChatSession v-if="selectedConversationId" :key="selectedConversationId" :conversation-id="selectedConversationId" :enabled="true" variant="floating" @pending-count="forwardPending" @backend-state="backendState = $event" @missing="refreshAfterMissingConversation" />
-        <p v-else class="terminal-agent-empty">选择历史会话或点击“新建会话”。</p>
+        <p v-else class="terminal-agent-empty">{{ t('agent.panel.emptyPrompt') }}</p>
       </div>
     </div>
 
@@ -251,11 +251,14 @@ import type { AgentSetupResponse } from '@termflow/client-contracts'
 import { ApiError } from '@termflow/client-core'
 import { useFloatingPanel, type FloatingPanelResizeEdge } from '../../composables/useFloatingPanel'
 import { agentReasonMessage, useTermAgent } from '../../composables/useTermAgent'
+import { useI18n } from '../../i18n'
 import { useClientRuntime } from '../../runtime'
 import AgentChatSession from './AgentChatSession.vue'
 import AgentPanePicker from './AgentPanePicker.vue'
 import AgentSetupForm from './AgentSetupForm.vue'
 
+const { t } = useI18n()
+
 const props = withDefaults(defineProps<{ termId: string; conversationId: string | null; open?: boolean; mobilePage?: boolean }>(), { open: true, mobilePage: false })
 const emit = defineEmits<{ close: []; selectConversation: [conversationId: string | null]; pendingCount: [count: number]; readiness: [state: AgentSetupResponse['state']] }>()
 const runtime = useClientRuntime()
@@ -366,24 +369,36 @@ async function commitRename() {
   }
 }
 function cancelRename() { renamingId.value = null }
-const panelTitle = computed(() => selectedEntry.value?.title?.trim() || (selectedConversationId.value ? 'Agent 对话' : 'Term Agent'))
+const panelTitle = computed(() => selectedEntry.value?.title?.trim() || (selectedConversationId.value ? t('agent.panel.defaultChatTitle') : 'Term Agent'))
 const disclosureRecoveryRequired = computed(() => setup.value?.state === 'unavailable' && (
   setup.value.reason_code === 'binding_disclosure_stale'
   || setup.value.reason_code === 'binding_disclosure_required'
 ))
-const backendLabels: Record<string, string> = {
-  connecting: '连接中', idle: '空闲', busy: '处理中', retry: '重试中', ready: '已就绪',
-  unavailable: '离线', context_lost: '上下文丢失', reconciling: '恢复中', closed: '已关闭',
+const backendLabelKeys: Record<string, string> = {
+  connecting: 'agent.backend.connecting',
+  idle: 'agent.backend.idle',
+  busy: 'agent.backend.busy',
+  retry: 'agent.backend.retry',
+  ready: 'agent.backend.readyPanel',
+  unavailable: 'agent.backend.offline',
+  context_lost: 'agent.backend.context_lost',
+  reconciling: 'agent.backend.reconciling',
+  closed: 'agent.backend.closed',
+}
+const readinessLabelKeys: Record<AgentSetupResponse['state'], string> = {
+  unconfigured: 'agent.readiness.unconfigured',
+  deployment_required: 'agent.readiness.deployment_required',
+  activating: 'agent.readiness.activating',
+  ready: 'agent.readiness.ready',
+  unavailable: 'agent.readiness.unavailable',
 }
 const mergedStatusLabel = computed(() => {
   const state = setup.value?.state
-  if (state !== 'ready') return state === undefined ? '' : readinessLabels[state]
-  if (backendState.value === null || backendState.value === 'ready') return '已就绪'
-  return backendLabels[backendState.value] ?? backendState.value
+  if (state !== 'ready') return state === undefined ? '' : t(readinessLabelKeys[state])
+  if (backendState.value === null || backendState.value === 'ready') return t('agent.backend.readyPanel')
+  const key = backendLabelKeys[backendState.value]
+  return key ? t(key) : backendState.value
 })
-const readinessLabels: Record<AgentSetupResponse['state'], string> = {
-  unconfigured: '未设置', deployment_required: '需部署', activating: '激活中', ready: '已就绪', unavailable: '不可用',
-}
 const resizeEdges: FloatingPanelResizeEdge[] = ['n', 'e', 's', 'w', 'ne', 'se', 'sw', 'nw']
 const resizeLabels: Record<FloatingPanelResizeEdge, string> = {
   n: '上边缘', e: '右边缘', s: '下边缘', w: '左边缘', ne: '右上角', se: '右下角', sw: '左下角', nw: '左上角',
diff --git a/packages/client-ui/src/components/agent/TerminalAgentToggle.vue b/packages/client-ui/src/components/agent/TerminalAgentToggle.vue
index d72bd50b..ec347f70 100644
--- a/packages/client-ui/src/components/agent/TerminalAgentToggle.vue
+++ b/packages/client-ui/src/components/agent/TerminalAgentToggle.vue
@@ -9,21 +9,16 @@
 import { computed, ref } from 'vue'
 import { Bot } from '@lucide/vue'
 import type { AgentSetupResponse } from '@termflow/client-contracts'
+import { useI18n } from '../../i18n'
+const { t } = useI18n()
 const props = defineProps<{ open: boolean; pendingCount: number; readiness: AgentSetupResponse['state'] | null }>()
 const emit = defineEmits<{ toggle: [] }>()
 const button = ref<HTMLButtonElement | null>(null)
-const readinessLabels: Record<AgentSetupResponse['state'], string> = {
-  unconfigured: '未设置',
-  deployment_required: '需部署',
-  activating: '激活中',
-  ready: '已就绪',
-  unavailable: '不可用',
-}
-const readinessLabel = computed(() => props.readiness === null ? null : readinessLabels[props.readiness])
+const readinessLabel = computed(() => props.readiness === null ? null : t(`agent.readiness.${props.readiness}`))
 const accessibleLabel = computed(() => [
   'Agent',
   readinessLabel.value,
-  props.pendingCount ? `${props.pendingCount} 个待处理审批` : null,
+  props.pendingCount ? t('agent.conversations.pendingBadgeAria', { count: props.pendingCount }) : null,
 ].filter(Boolean).join('，'))
 defineExpose({ focus: () => button.value?.focus() })
 </script>
diff --git a/packages/client-ui/src/components/common/QrCodeDialog.vue b/packages/client-ui/src/components/common/QrCodeDialog.vue
index 2421c817..38719347 100644
--- a/packages/client-ui/src/components/common/QrCodeDialog.vue
+++ b/packages/client-ui/src/components/common/QrCodeDialog.vue
@@ -11,7 +11,7 @@
     >
       <header class="qr-dialog-heading">
         <h2 :id="titleId">{{ title }}</h2>
-        <button ref="closeButton" data-action="close-qr" class="icon-button icon-only" type="button" aria-label="关闭二维码" @click="requestClose">
+        <button ref="closeButton" data-action="close-qr" class="icon-button icon-only" type="button" :aria-label="t('settings.qr.closeAria')" @click="requestClose">
           <X :size="18" aria-hidden="true" />
         </button>
       </header>
@@ -24,8 +24,11 @@
 <script setup lang="ts">
 import { X } from '@lucide/vue'
 import { nextTick, ref, watch } from 'vue'
+import { useI18n } from '../../i18n'
 import ThemedQrCode from './ThemedQrCode.vue'
 
+const { t } = useI18n()
+
 const props = defineProps<{
   open: boolean
   title: string
diff --git a/packages/client-ui/src/components/computers/ComputerNameEditor.vue b/packages/client-ui/src/components/computers/ComputerNameEditor.vue
index adc86ae0..c319ff3d 100644
--- a/packages/client-ui/src/components/computers/ComputerNameEditor.vue
+++ b/packages/client-ui/src/components/computers/ComputerNameEditor.vue
@@ -1,12 +1,12 @@
 <template>
   <div class="name-editor">
     <template v-if="editing">
-      <label class="sr-only" :for="`computer-name-${computerId}`">Computer 显示名称</label>
+      <label class="sr-only" :for="`computer-name-${computerId}`">{{ t('computers.nameEditor.label') }}</label>
       <input :id="`computer-name-${computerId}`" v-model="draft" name="display-name" maxlength="128" @keydown.esc="cancel" @keydown.enter.prevent="save" />
-      <button data-action="save-name" class="primary-button compact" type="button" :disabled="busy" @click="save">保存</button>
-      <button class="text-button compact" type="button" @click="cancel">取消</button>
+      <button data-action="save-name" class="primary-button compact" type="button" :disabled="busy" @click="save">{{ t('common.save') }}</button>
+      <button class="text-button compact" type="button" @click="cancel">{{ t('common.cancel') }}</button>
     </template>
-    <button v-else data-action="edit-name" class="name-edit-trigger" type="button" :aria-label="`修改 Computer 名称：${currentName}`" title="点击修改 Computer 名称" @click="begin"><strong>{{ currentName }}</strong></button>
+    <button v-else data-action="edit-name" class="name-edit-trigger" type="button" :aria-label="t('computers.nameEditor.editAria', { name: currentName })" :title="t('computers.nameEditor.editTitle')" @click="begin"><strong>{{ currentName }}</strong></button>
     <p v-if="message" role="alert" class="form-error">{{ message }}</p>
   </div>
 </template>
@@ -14,8 +14,10 @@
 <script setup lang="ts">
 import { ref, watch } from 'vue'
 import { ApiError } from '@termflow/client-core'
+import { useI18n } from '../../i18n'
 import { useClientRuntime } from '../../runtime'
 
+const { t } = useI18n()
 const props = defineProps<{ computerId: string; displayName: string }>()
 const emit = defineEmits<{ updated: [name: string] }>()
 const runtime = useClientRuntime()
@@ -32,7 +34,7 @@ function validName(value: string) {
 function begin() { draft.value = currentName.value; message.value = ''; editing.value = true }
 function cancel() { draft.value = currentName.value; message.value = ''; editing.value = false }
 async function save() {
-  if (!validName(draft.value)) { message.value = '显示名称须为 1 至 128 个无控制字符的字符。'; return }
+  if (!validName(draft.value)) { message.value = t('computers.nameEditor.invalid'); return }
   const previous = currentName.value
   currentName.value = draft.value
   editing.value = false
@@ -44,7 +46,7 @@ async function save() {
   } catch (error) {
     currentName.value = previous
     editing.value = true
-    message.value = error instanceof ApiError ? error.message : '无法保存显示名称。'
+    message.value = error instanceof ApiError ? error.message : t('computers.nameEditor.saveError')
   } finally { busy.value = false }
 }
 </script>
diff --git a/packages/client-ui/src/components/computers/ComputerTable.vue b/packages/client-ui/src/components/computers/ComputerTable.vue
index 78a810d7..049d2b4d 100644
--- a/packages/client-ui/src/components/computers/ComputerTable.vue
+++ b/packages/client-ui/src/components/computers/ComputerTable.vue
@@ -1,22 +1,24 @@
 <template>
-  <div class="computer-table" role="table" aria-label="已注册 Computers">
-    <div class="computer-table-head" role="row"><span role="columnheader">名称</span><span role="columnheader">终端</span><span role="columnheader">最近在线</span><span role="columnheader">注册时间</span><span role="columnheader">操作</span></div>
+  <div class="computer-table" role="table" :aria-label="t('computers.tableAria')">
+    <div class="computer-table-head" role="row"><span role="columnheader">{{ t('computers.col.name') }}</span><span role="columnheader">{{ t('computers.col.terms') }}</span><span role="columnheader">{{ t('computers.col.lastSeen') }}</span><span role="columnheader">{{ t('computers.col.registeredAt') }}</span><span role="columnheader">{{ t('computers.col.actions') }}</span></div>
     <article v-for="computer in computers" :key="computer.installation_id" class="computer-table-row" role="row" :data-computer-id="computer.installation_id">
-      <div role="cell" data-label="名称"><ComputerNameEditor :computer-id="computer.installation_id" :display-name="computer.display_name" @updated="computer.display_name = $event" /><span v-if="computer.hostname" class="muted">{{ computer.hostname }}</span></div>
-      <div role="cell" data-label="终端"><StatusPill :online="onlineTermCount(computer) > 0" :label="onlineTermCount(computer) > 0 ? `在线 (${onlineTermCount(computer)})` : '离线 (0)'" /></div>
-      <div role="cell" data-label="最近在线"><time v-if="computer.last_seen_at" :datetime="computer.last_seen_at">{{ format(computer.last_seen_at) }}</time><span v-else class="muted">尚未在线</span></div>
-      <div role="cell" data-label="注册时间"><time v-if="computer.registered_at" :datetime="computer.registered_at">{{ format(computer.registered_at) }}</time><span v-else class="muted">未记录</span></div>
-      <div role="cell" data-label="操作" class="computer-table-actions"><button data-action="delete-computer" class="icon-button icon-only destructive" type="button" :disabled="onlineTermCount(computer) > 0" :aria-label="onlineTermCount(computer) > 0 ? `${computer.display_name}：有终端在线时不能删除` : `删除电脑：${computer.display_name}`" :title="onlineTermCount(computer) > 0 ? '有终端在线时不能删除' : `删除电脑：${computer.display_name}`" @click="requestRemove(computer)"><Trash2 :size="17" aria-hidden="true" /></button></div>
+      <div role="cell" :data-label="t('computers.col.name')"><ComputerNameEditor :computer-id="computer.installation_id" :display-name="computer.display_name" @updated="computer.display_name = $event" /><span v-if="computer.hostname" class="muted">{{ computer.hostname }}</span></div>
+      <div role="cell" :data-label="t('computers.col.terms')"><StatusPill :online="onlineTermCount(computer) > 0" :label="onlineTermCount(computer) > 0 ? t('status.onlineCount', { count: onlineTermCount(computer) }) : t('status.offlineZero')" /></div>
+      <div role="cell" :data-label="t('computers.col.lastSeen')"><time v-if="computer.last_seen_at" :datetime="computer.last_seen_at">{{ format(computer.last_seen_at) }}</time><span v-else class="muted">{{ t('dashboard.neverOnline') }}</span></div>
+      <div role="cell" :data-label="t('computers.col.registeredAt')"><time v-if="computer.registered_at" :datetime="computer.registered_at">{{ format(computer.registered_at) }}</time><span v-else class="muted">{{ t('computers.notRecorded') }}</span></div>
+      <div role="cell" :data-label="t('computers.col.actions')" class="computer-table-actions"><button data-action="delete-computer" class="icon-button icon-only destructive" type="button" :disabled="onlineTermCount(computer) > 0" :aria-label="onlineTermCount(computer) > 0 ? t('computers.cannotDeleteOnlineAria', { name: computer.display_name }) : t('computers.deleteAria', { name: computer.display_name })" :title="onlineTermCount(computer) > 0 ? t('computers.cannotDeleteOnlineTitle') : t('computers.deleteAria', { name: computer.display_name })" @click="requestRemove(computer)"><Trash2 :size="17" aria-hidden="true" /></button></div>
     </article>
   </div>
 </template>
 
 <script setup lang="ts">
 import { Trash2 } from '@lucide/vue'
+import { useI18n } from '../../i18n'
 import type { ComputerSummary } from '../../types'
 import StatusPill from '../dashboard/StatusPill.vue'
 import ComputerNameEditor from './ComputerNameEditor.vue'
 import { formatBRecordedTime } from '../../utils/time'
+const { t } = useI18n()
 defineProps<{ computers: ComputerSummary[] }>()
 const emit = defineEmits<{ remove: [computer: ComputerSummary] }>()
 const format = formatBRecordedTime
diff --git a/packages/client-ui/src/components/computers/DeleteComputerDialog.vue b/packages/client-ui/src/components/computers/DeleteComputerDialog.vue
index 0eea664c..64e020e2 100644
--- a/packages/client-ui/src/components/computers/DeleteComputerDialog.vue
+++ b/packages/client-ui/src/components/computers/DeleteComputerDialog.vue
@@ -9,13 +9,13 @@
       aria-describedby="delete-computer-description"
       @keydown="trapFocus"
     >
-      <h2 id="delete-computer-title">删除电脑？</h2>
+      <h2 id="delete-computer-title">{{ t('computers.deleteDialog.title') }}</h2>
       <div id="delete-computer-description">
-        <p>将永久删除远端注册和控制凭据：<strong>{{ computer.display_name }}</strong>。</p>
-        <p>删除后，这台电脑需要重新注册才能恢复远程控制。</p>
+        <p>{{ t('computers.deleteDialog.desc1') }}<strong>{{ computer.display_name }}</strong>。</p>
+        <p>{{ t('computers.deleteDialog.desc2') }}</p>
       </div>
       <p v-if="error" class="form-error" role="alert">{{ error }}</p>
-      <p v-if="cleanupJobId" role="status">清理待完成 · 任务 {{ cleanupJobId.slice(0, 64) }}</p>
+      <p v-if="cleanupJobId" role="status">{{ t('dashboard.deleteDialog.cleanupPending', { jobId: cleanupJobId.slice(0, 64) }) }}</p>
       <div class="dialog-actions">
         <button
           ref="cancelButton"
@@ -24,14 +24,14 @@
           type="button"
           :disabled="pending"
           @click="cancel"
-        >取消</button>
+        >{{ t('common.cancel') }}</button>
         <button
           data-action="confirm-delete-computer"
           class="danger-button"
           type="button"
           :disabled="pending || Boolean(cleanupJobId)"
           @click="$emit('confirm', computer.installation_id)"
-        >{{ pending ? '正在删除…' : '永久删除电脑' }}</button>
+        >{{ pending ? t('dashboard.deleteDialog.deleting') : t('computers.deleteDialog.confirm') }}</button>
       </div>
     </section>
   </div>
@@ -39,7 +39,9 @@
 
 <script setup lang="ts">
 import { nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
+import { useI18n } from '../../i18n'
 import type { ComputerSummary } from '../../types'
+const { t } = useI18n()
 
 const props = defineProps<{ computer: ComputerSummary; pending: boolean; error: string; cleanupJobId?: string }>()
 const emit = defineEmits<{ confirm: [installationId: string]; cancel: [] }>()
diff --git a/packages/client-ui/src/components/computers/EnrollmentDialog.vue b/packages/client-ui/src/components/computers/EnrollmentDialog.vue
index 772124b9..9f39210a 100644
--- a/packages/client-ui/src/components/computers/EnrollmentDialog.vue
+++ b/packages/client-ui/src/components/computers/EnrollmentDialog.vue
@@ -2,34 +2,34 @@
   <div v-if="open" class="dialog-backdrop" @click.self="close">
     <section ref="panel" class="dialog-panel" role="dialog" aria-modal="true" aria-labelledby="enrollment-title" @keydown="onDialogKeydown">
       <header>
-        <h2 id="enrollment-title">添加电脑</h2>
-        <button data-action="close-enrollment" class="icon-button icon-only" type="button" aria-label="关闭" @click="close"><X :size="18" aria-hidden="true" /></button>
+        <h2 id="enrollment-title">{{ t('computers.enrollment.title') }}</h2>
+        <button data-action="close-enrollment" class="icon-button icon-only" type="button" :aria-label="t('common.close')" @click="close"><X :size="18" aria-hidden="true" /></button>
       </header>
       <p v-if="message" role="alert" class="form-error">{{ message }}</p>
       <form v-if="!code" class="enrollment-create-form" @submit.prevent="create()">
-        <label for="enrollment-computer-name">电脑名称</label>
-        <input id="enrollment-computer-name" ref="nameInput" v-model="displayName" name="computer-name" type="text" maxlength="128" placeholder="输入电脑名称" autocomplete="off" required />
-        <button data-action="create-code" class="primary-button" type="submit" :disabled="busy || !displayName">{{ busy ? '正在创建…' : '创建' }}</button>
+        <label for="enrollment-computer-name">{{ t('computers.enrollment.nameLabel') }}</label>
+        <input id="enrollment-computer-name" ref="nameInput" v-model="displayName" name="computer-name" type="text" maxlength="128" :placeholder="t('computers.enrollment.namePlaceholder')" autocomplete="off" required />
+        <button data-action="create-code" class="primary-button" type="submit" :disabled="busy || !displayName">{{ busy ? t('computers.enrollment.creating') : t('computers.enrollment.create') }}</button>
       </form>
       <div v-else class="enrollment-secret">
-        <p class="warning-text">此注册码只显示一次，将在 {{ secondsRemaining }} 秒后过期并自动刷新。</p>
+        <p class="warning-text">{{ t('computers.enrollment.warning', { seconds: secondsRemaining }) }}</p>
         <section data-enrollment-field="code" class="enrollment-field">
-          <h3>注册码</h3>
-          <output class="registration-code" aria-label="一次性注册码">{{ code }}</output>
+          <h3>{{ t('computers.enrollment.codeHeading') }}</h3>
+          <output class="registration-code" :aria-label="t('computers.enrollment.codeAria')">{{ code }}</output>
         </section>
         <section data-enrollment-field="command" class="enrollment-field">
           <div class="enrollment-field-heading">
-            <h3>终端执行</h3>
+            <h3>{{ t('computers.enrollment.commandHeading') }}</h3>
             <span class="help-tooltip">
-              <button data-help="login-command" class="icon-button icon-only" type="button" aria-label="终端执行说明" aria-describedby="login-command-help" title="复制到安装有 TermFlow 的电脑上，在终端中执行">
+              <button data-help="login-command" class="icon-button icon-only" type="button" :aria-label="t('computers.enrollment.commandHelpAria')" aria-describedby="login-command-help" :title="t('computers.enrollment.commandHelpTitle')">
                 <CircleHelp :size="17" aria-hidden="true" />
               </button>
-              <span id="login-command-help" role="tooltip">复制到安装有 TermFlow 的电脑上，在终端中执行。</span>
+              <span id="login-command-help" role="tooltip">{{ t('computers.enrollment.commandHelpText') }}</span>
             </span>
           </div>
           <code class="login-command">{{ command }}</code>
         </section>
-        <button ref="copyButton" data-action="copy-command" class="primary-button enrollment-copy-button" type="button" @click="copy"><Copy :size="17" aria-hidden="true" />{{ copied ? '已复制' : '复制命令' }}</button>
+        <button ref="copyButton" data-action="copy-command" class="primary-button enrollment-copy-button" type="button" @click="copy"><Copy :size="17" aria-hidden="true" />{{ copied ? t('common.copied') : t('computers.enrollment.copyCommand') }}</button>
       </div>
     </section>
   </div>
@@ -39,8 +39,10 @@
 import { CircleHelp, Copy, X } from '@lucide/vue'
 import { computed, nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
 import { ApiError } from '@termflow/client-core'
+import { useI18n } from '../../i18n'
 import { useClientRuntime } from '../../runtime'
 
+const { t } = useI18n()
 const emit = defineEmits<{ closed: []; added: [] }>()
 const runtime = useClientRuntime()
 const open = ref(true)
diff --git a/packages/client-ui/src/components/dashboard/ComputerCard.vue b/packages/client-ui/src/components/dashboard/ComputerCard.vue
index e7eb7a62..5a4a400e 100644
--- a/packages/client-ui/src/components/dashboard/ComputerCard.vue
+++ b/packages/client-ui/src/components/dashboard/ComputerCard.vue
@@ -5,15 +5,17 @@
       <StatusPill :online="computer.online" />
     </header>
     <div v-if="computer.terms.length" class="term-list"><TermRow v-for="term in computer.terms" :key="term.instance_id" :term="term" @request-delete="$emit('request-delete', $event)" /></div>
-    <p v-else class="empty-state">这台 Computer 还没有 Term。</p>
+    <p v-else class="empty-state">{{ t('dashboard.emptyTerms') }}</p>
   </article>
 </template>
 
 <script setup lang="ts">
 import { computed } from 'vue'
+import { useI18n } from '../../i18n'
 import type { ComputerSummary } from '../../types'
 import StatusPill from './StatusPill.vue'
 import TermRow from './TermRow.vue'
+const { t } = useI18n()
 const props = defineProps<{ computer: ComputerSummary }>()
 defineEmits<{ 'request-delete': [term: ComputerSummary['terms'][number]] }>()
 const metadata = computed(() => [props.computer.hostname, props.computer.platform].filter(Boolean).join(' · '))
diff --git a/packages/client-ui/src/components/dashboard/DeleteTermDialog.vue b/packages/client-ui/src/components/dashboard/DeleteTermDialog.vue
index b06c2815..db96f5a7 100644
--- a/packages/client-ui/src/components/dashboard/DeleteTermDialog.vue
+++ b/packages/client-ui/src/components/dashboard/DeleteTermDialog.vue
@@ -9,15 +9,15 @@
       aria-describedby="delete-term-description"
       @keydown="trapFocus"
     >
-      <h2 id="delete-term-title">永久删除离线 Term？</h2>
+      <h2 id="delete-term-title">{{ t('dashboard.deleteDialog.title') }}</h2>
       <div id="delete-term-description">
-        <p>将永久删除远端注册和控制凭据：<strong>{{ term.name }}</strong>（{{ term.instance_id }}）。</p>
-        <p>这不会删除本地 tmux Session；它仍可能在所属 Computer 上运行。</p>
-        <p>如需恢复远程访问，请在所属 Computer 上运行：</p>
+        <p>{{ t('dashboard.deleteDialog.desc1') }}<strong>{{ term.name }}</strong>（{{ term.instance_id }}）。</p>
+        <p>{{ t('dashboard.deleteDialog.desc2') }}</p>
+        <p>{{ t('dashboard.deleteDialog.desc3') }}</p>
         <code class="delete-term-activation">termflow activate {{ term.instance_id }}</code>
       </div>
       <p v-if="error" class="form-error" role="alert">{{ error }}</p>
-      <p v-if="cleanupJobId" role="status">清理待完成 · 任务 {{ cleanupJobId.slice(0, 64) }}</p>
+      <p v-if="cleanupJobId" role="status">{{ t('dashboard.deleteDialog.cleanupPending', { jobId: cleanupJobId.slice(0, 64) }) }}</p>
       <div class="dialog-actions">
         <button
           ref="cancelButton"
@@ -26,14 +26,14 @@
           type="button"
           :disabled="pending"
           @click="cancel"
-        >取消</button>
+        >{{ t('common.cancel') }}</button>
         <button
           data-action="confirm-delete-term"
           class="danger-button"
           type="button"
           :disabled="pending || Boolean(cleanupJobId)"
           @click="$emit('confirm', term.instance_id)"
-        >{{ pending ? '正在删除…' : '永久删除远程 Term' }}</button>
+        >{{ pending ? t('dashboard.deleteDialog.deleting') : t('dashboard.deleteDialog.confirm') }}</button>
       </div>
     </section>
   </div>
@@ -41,7 +41,9 @@
 
 <script setup lang="ts">
 import { nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
+import { useI18n } from '../../i18n'
 import type { TermSummary } from '../../types'
+const { t } = useI18n()
 
 const props = defineProps<{ term: TermSummary; pending: boolean; error: string; cleanupJobId?: string }>()
 const emit = defineEmits<{ confirm: [instanceId: string]; cancel: [] }>()
diff --git a/packages/client-ui/src/components/dashboard/StatusPill.vue b/packages/client-ui/src/components/dashboard/StatusPill.vue
index 5ac4cf54..49f7b0f1 100644
--- a/packages/client-ui/src/components/dashboard/StatusPill.vue
+++ b/packages/client-ui/src/components/dashboard/StatusPill.vue
@@ -1,4 +1,6 @@
-<template><span class="status-pill" :data-online="online"><span class="status-dot" aria-hidden="true" />{{ label ?? (online ? '在线' : '离线') }}</span></template>
+<template><span class="status-pill" :data-online="online"><span class="status-dot" aria-hidden="true" />{{ label ?? (online ? t('status.online') : t('status.offline')) }}</span></template>
 <script setup lang="ts">
+import { useI18n } from '../../i18n'
+const { t } = useI18n()
 defineProps<{ online: boolean; label?: string }>()
 </script>
diff --git a/packages/client-ui/src/components/dashboard/TermRow.vue b/packages/client-ui/src/components/dashboard/TermRow.vue
index 5b1fc665..22e5e759 100644
--- a/packages/client-ui/src/components/dashboard/TermRow.vue
+++ b/packages/client-ui/src/components/dashboard/TermRow.vue
@@ -1,5 +1,5 @@
 <template>
-  <component :is="term.online ? RouterLink : 'article'" class="term-row term-card" :class="{ 'term-row-link': term.online, 'term-row-offline': !term.online }" :data-term-id="term.instance_id" :to="term.online ? route : undefined" :aria-label="term.online ? `打开终端：${term.name}` : undefined">
+  <component :is="term.online ? RouterLink : 'article'" class="term-row term-card" :class="{ 'term-row-link': term.online, 'term-row-offline': !term.online }" :data-term-id="term.instance_id" :to="term.online ? route : undefined" :aria-label="term.online ? t('dashboard.openTermAria', { name: term.name }) : undefined">
     <div class="term-primary">
       <strong>{{ term.name }}</strong>
       <code>{{ term.current_command || '—' }}</code>
@@ -7,18 +7,20 @@
     <div class="term-counts"><span>{{ term.window_count }} Windows</span><span>{{ term.pane_count }} Panes</span></div>
     <StatusPill :online="term.online" />
     <time v-if="term.last_seen_at" class="term-last-seen" :datetime="term.last_seen_at">{{ formatTime(term.last_seen_at) }}</time>
-    <span v-else class="muted term-last-seen">尚未在线</span>
-    <button v-if="!term.online" data-action="delete-offline-term" class="icon-button icon-only destructive term-delete-button" type="button" :aria-label="`删除离线 Term：${term.name}`" :title="`删除离线 Term：${term.name}`" @click="$emit('request-delete', term)"><Trash2 :size="18" aria-hidden="true" /></button>
+    <span v-else class="muted term-last-seen">{{ t('dashboard.neverOnline') }}</span>
+    <button v-if="!term.online" data-action="delete-offline-term" class="icon-button icon-only destructive term-delete-button" type="button" :aria-label="t('dashboard.deleteOfflineTermAria', { name: term.name })" :title="t('dashboard.deleteOfflineTermAria', { name: term.name })" @click="$emit('request-delete', term)"><Trash2 :size="18" aria-hidden="true" /></button>
   </component>
 </template>
 
 <script setup lang="ts">
 import { Trash2 } from '@lucide/vue'
 import { RouterLink } from 'vue-router'
+import { useI18n } from '../../i18n'
 import type { TermSummary } from '../../types'
 import { formatBRecordedTime } from '../../utils/time'
 import StatusPill from './StatusPill.vue'
 
+const { t } = useI18n()
 const props = defineProps<{ term: TermSummary }>()
 defineEmits<{ 'request-delete': [term: TermSummary] }>()
 const route = `/terms/${encodeURIComponent(props.term.instance_id)}`
diff --git a/packages/client-ui/src/components/settings/AuthorizedClientsPanel.vue b/packages/client-ui/src/components/settings/AuthorizedClientsPanel.vue
index b20e864a..b5a1802b 100644
--- a/packages/client-ui/src/components/settings/AuthorizedClientsPanel.vue
+++ b/packages/client-ui/src/components/settings/AuthorizedClientsPanel.vue
@@ -1,22 +1,22 @@
 <template>
   <section class="settings-panel" aria-labelledby="clients-heading">
-    <div class="settings-panel-heading"><div><p class="eyebrow">Access</p><h2 id="clients-heading">已授权客户端</h2></div><div class="page-heading-actions"><span class="status-chip">{{ clients.length }}</span><button data-action="authorize-new-client" class="text-button" type="button" title="输入设备码以批准另一台已发起连接的客户端。" @click="approvalOpen = true">授权新客户端</button></div></div>
-    <p v-if="clients.length === 0" class="empty-state">尚未授权手机或桌面客户端。</p>
+    <div class="settings-panel-heading"><div><p class="eyebrow">Access</p><h2 id="clients-heading">{{ t('settings.clients.heading') }}</h2></div><div class="page-heading-actions"><span class="status-chip">{{ clients.length }}</span><button data-action="authorize-new-client" class="text-button" type="button" :title="t('settings.clients.authorizeNewTitle')" @click="approvalOpen = true">{{ t('settings.clients.authorizeNew') }}</button></div></div>
+    <p v-if="clients.length === 0" class="empty-state">{{ t('settings.clients.empty') }}</p>
     <ul v-else class="authorized-client-list">
       <li v-for="client in clients" :key="client.client_id">
         <div><strong>{{ client.display_name }}</strong><span>{{ client.platform }} · {{ client.key_thumbprint.slice(0, 12) }}…</span><small>{{ client.scopes.join(' · ') }}</small></div>
-        <button class="danger-button" type="button" @click="openRevoke(client)">撤销</button>
+        <button class="danger-button" type="button" @click="openRevoke(client)">{{ t('settings.clients.revoke') }}</button>
       </li>
     </ul>
     <div v-if="selected" class="dialog-backdrop" @click.self="cancel">
       <section ref="revokePanel" class="dialog-panel revoke-client-dialog" role="alertdialog" aria-modal="true" aria-labelledby="revoke-client-title" @keydown="trapFocus">
-        <header><div><p class="eyebrow">Access</p><h2 id="revoke-client-title">撤销客户端</h2></div><button class="icon-button icon-only" type="button" aria-label="关闭" @click="cancel">×</button></header>
-        <p>将注销 <strong>{{ selected.display_name }}</strong>，不会影响其他设备，也不会中断正在运行的会话。</p>
+        <header><div><p class="eyebrow">Access</p><h2 id="revoke-client-title">{{ t('settings.clients.revokeTitle') }}</h2></div><button class="icon-button icon-only" type="button" :aria-label="t('common.close')" @click="cancel">×</button></header>
+        <p>{{ t('settings.clients.revokeDesc', { name: selected.display_name }) }}</p>
         <form class="security-form" @submit.prevent="removeSelected">
-          <label for="revoke-admin-token">管理员令牌</label><input id="revoke-admin-token" ref="revokeInput" v-model="adminToken" type="password" autocomplete="off" required />
-          <label v-if="totpEnabled" for="revoke-totp">双重验证码</label><input v-if="totpEnabled" id="revoke-totp" v-model="totpCode" inputmode="numeric" pattern="[0-9]{6}" maxlength="6" autocomplete="one-time-code" required />
+          <label for="revoke-admin-token">{{ t('settings.totp.adminToken') }}</label><input id="revoke-admin-token" ref="revokeInput" v-model="adminToken" type="password" autocomplete="off" required />
+          <label v-if="totpEnabled" for="revoke-totp">{{ t('settings.totp.code') }}</label><input v-if="totpEnabled" id="revoke-totp" v-model="totpCode" inputmode="numeric" pattern="[0-9]{6}" maxlength="6" autocomplete="one-time-code" required />
           <p v-if="error" class="form-error" role="alert">{{ error }}</p>
-          <div class="dialog-actions"><button type="button" class="secondary-button" @click="cancel">取消</button><button type="submit" class="danger-button">确认撤销</button></div>
+          <div class="dialog-actions"><button type="button" class="secondary-button" @click="cancel">{{ t('common.cancel') }}</button><button type="submit" class="danger-button">{{ t('settings.clients.confirmRevoke') }}</button></div>
         </form>
       </section>
     </div>
@@ -28,9 +28,11 @@
 import type { NativeClientResponse } from '@termflow/client-contracts'
 import { nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
 import { useBottomToast } from '../../composables/useBottomToast'
+import { useI18n } from '../../i18n'
 import { useClientRuntime } from '../../runtime'
 import DeviceAuthorizationApprovalDialog from './DeviceAuthorizationApprovalDialog.vue'
 
+const { t } = useI18n()
 defineProps<{ totpEnabled: boolean }>()
 const runtime = useClientRuntime()
 const toast = useBottomToast()
diff --git a/packages/client-ui/src/components/settings/DeviceAuthorizationApprovalDialog.vue b/packages/client-ui/src/components/settings/DeviceAuthorizationApprovalDialog.vue
index 391e5d17..9089799f 100644
--- a/packages/client-ui/src/components/settings/DeviceAuthorizationApprovalDialog.vue
+++ b/packages/client-ui/src/components/settings/DeviceAuthorizationApprovalDialog.vue
@@ -1,24 +1,24 @@
 <template>
   <div class="dialog-backdrop" role="presentation">
     <section data-action="device-approval-dialog" class="dialog-panel device-approval-dialog" role="dialog" aria-modal="true" aria-labelledby="device-approval-title">
-      <header><div><p class="eyebrow">Client authorization</p><h2 id="device-approval-title">授权新客户端</h2></div><button class="icon-button icon-only" type="button" aria-label="关闭" title="关闭" @click="emit('closed')">×</button></header>
+      <header><div><p class="eyebrow">Client authorization</p><h2 id="device-approval-title">{{ t('settings.clients.authorizeNew') }}</h2></div><button class="icon-button icon-only" type="button" :aria-label="t('common.close')" :title="t('common.close')" @click="emit('closed')">×</button></header>
       <form v-if="preview === null" data-action="lookup-device-approval" class="security-form" @submit.prevent="lookup()">
-        <label for="device-approval-code">设备码</label>
+        <label for="device-approval-code">{{ t('settings.deviceApproval.codeLabel') }}</label>
         <input id="device-approval-code" v-model="userCode" inputmode="text" autocomplete="off" placeholder="ABCD-EFGH" required />
         <p v-if="error" role="alert" class="form-error">{{ error }}</p>
-        <button class="primary-button" type="submit" :disabled="busy">{{ busy ? '正在查找…' : '继续' }}</button>
+        <button class="primary-button" type="submit" :disabled="busy">{{ busy ? t('settings.deviceApproval.lookingUp') : t('common.continue') }}</button>
       </form>
       <template v-else>
         <dl class="consent-details device-approval-details">
-          <div><dt>客户端</dt><dd>{{ preview.client_name }}</dd></div>
-          <div><dt>平台</dt><dd>{{ preview.platform }}{{ preview.client_version ? ` · ${preview.client_version}` : '' }}</dd></div>
-          <div><dt>权限</dt><dd>{{ preview.scopes.join(' · ') }}</dd></div>
-          <div><dt>有效期至</dt><dd>{{ formatExpiry(preview.expires_at) }}</dd></div>
+          <div><dt>{{ t('settings.deviceApproval.client') }}</dt><dd>{{ preview.client_name }}</dd></div>
+          <div><dt>{{ t('settings.deviceApproval.platform') }}</dt><dd>{{ preview.platform }}{{ preview.client_version ? ` · ${preview.client_version}` : '' }}</dd></div>
+          <div><dt>{{ t('settings.deviceApproval.scopes') }}</dt><dd>{{ preview.scopes.join(' · ') }}</dd></div>
+          <div><dt>{{ t('settings.deviceApproval.expiresAt') }}</dt><dd>{{ formatExpiry(preview.expires_at) }}</dd></div>
         </dl>
         <form class="security-form" @submit.prevent="approve('allow')">
-          <template v-if="preview.totp_required"><label for="device-approval-totp">双重验证码</label><input id="device-approval-totp" v-model="totpCode" inputmode="numeric" autocomplete="one-time-code" pattern="[0-9]{6}" maxlength="6" required /></template>
+          <template v-if="preview.totp_required"><label for="device-approval-totp">{{ t('settings.totp.code') }}</label><input id="device-approval-totp" v-model="totpCode" inputmode="numeric" autocomplete="one-time-code" pattern="[0-9]{6}" maxlength="6" required /></template>
           <p v-if="error" role="alert" class="form-error">{{ error }}</p>
-          <div class="dialog-actions"><button class="secondary-button" type="button" :disabled="busy" @click="approve('deny')">拒绝</button><button data-action="approve-device" class="primary-button" type="submit" :disabled="busy">允许此设备</button></div>
+          <div class="dialog-actions"><button class="secondary-button" type="button" :disabled="busy" @click="approve('deny')">{{ t('settings.deviceApproval.deny') }}</button><button data-action="approve-device" class="primary-button" type="submit" :disabled="busy">{{ t('settings.deviceApproval.allow') }}</button></div>
         </form>
       </template>
     </section>
@@ -28,8 +28,10 @@
 <script setup lang="ts">
 import { useBottomToast } from '../../composables/useBottomToast'
 import { useDeviceAuthorizationApproval } from '../../composables/useDeviceAuthorizationApproval'
+import { useI18n } from '../../i18n'
 import { useClientRuntime } from '../../runtime'
 
+const { t } = useI18n()
 const emit = defineEmits<{ approved: []; closed: [] }>()
 const runtime = useClientRuntime()
 const toast = useBottomToast()
@@ -37,7 +39,7 @@ const { preview, userCode, totpCode, busy, error, success, lookup, decide } = us
 function formatExpiry(value: string) { const date = new Date(value); return Number.isNaN(date.getTime()) ? value : date.toLocaleString() }
 async function approve(decision: 'allow' | 'deny') {
   await decide(decision)
-  if (success.value === 'approved') { toast.show({ text: '已授权', tone: 'success' }); emit('approved') }
+  if (success.value === 'approved') { toast.show({ text: t('settings.deviceApproval.approvedToast'), tone: 'success' }); emit('approved') }
   else if (success.value === 'denied') emit('closed')
 }
 </script>
diff --git a/packages/client-ui/src/components/settings/ServerConnectionPanel.vue b/packages/client-ui/src/components/settings/ServerConnectionPanel.vue
index 2cc11ecc..60b560f0 100644
--- a/packages/client-ui/src/components/settings/ServerConnectionPanel.vue
+++ b/packages/client-ui/src/components/settings/ServerConnectionPanel.vue
@@ -1,17 +1,17 @@
 <template>
   <section class="settings-panel" aria-labelledby="server-heading">
     <div class="settings-panel-heading">
-      <div><p class="eyebrow">Server</p><h2 id="server-heading">中继服务器</h2></div>
+      <div><p class="eyebrow">Server</p><h2 id="server-heading">{{ t('settings.server.heading') }}</h2></div>
     </div>
     <div data-server-field class="server-field">
       <div class="server-field-heading">
-        <span id="server-url-label" data-server-label class="field-label">服务网址</span>
+        <span id="server-url-label" data-server-label class="field-label">{{ t('settings.server.urlLabel') }}</span>
         <button
           ref="qrTrigger"
           data-action="show-server-qr"
           class="icon-button icon-only server-qr-trigger"
           type="button"
-          aria-label="显示服务网址二维码"
+          :aria-label="t('settings.server.qrAria')"
           @click="qrOpen = true"
         >
           <QrCode :size="18" aria-hidden="true" />
@@ -19,12 +19,12 @@
       </div>
       <div class="server-address-row" aria-labelledby="server-url-label">
         <code id="server-url-value" data-server-issuer>{{ issuer }}</code>
-        <button data-action="copy-server-url" class="secondary-button" type="button" @click="copyIssuer">{{ copied ? '已复制' : '复制' }}</button>
+        <button data-action="copy-server-url" class="secondary-button" type="button" @click="copyIssuer">{{ copied ? t('common.copied') : t('common.copy') }}</button>
       </div>
     </div>
     <QrCodeDialog
       :open="qrOpen"
-      title="服务网址二维码"
+      :title="t('settings.server.qrTitle')"
       :value="qrPayload"
       :return-focus="qrTrigger"
       @close="qrOpen = false"
@@ -36,8 +36,10 @@
 import { QrCode } from '@lucide/vue'
 import { computed, ref } from 'vue'
 import QrCodeDialog from '../common/QrCodeDialog.vue'
+import { useI18n } from '../../i18n'
 import { useClientRuntime } from '../../runtime'
 
+const { t } = useI18n()
 const props = defineProps<{ issuer: string }>()
 const runtime = useClientRuntime()
 const copied = ref(false)
diff --git a/packages/client-ui/src/components/settings/SetupKeyPopover.vue b/packages/client-ui/src/components/settings/SetupKeyPopover.vue
index 75f177e9..dfbfae77 100644
--- a/packages/client-ui/src/components/settings/SetupKeyPopover.vue
+++ b/packages/client-ui/src/components/settings/SetupKeyPopover.vue
@@ -9,7 +9,7 @@
       :aria-expanded="open"
       aria-controls="totp-setup-key-popover"
       @click="toggle"
-    >无法扫描？使用设置密钥</button>
+    >{{ t('settings.totp.setupKeyToggle') }}</button>
     <section
       v-if="open"
       id="totp-setup-key-popover"
@@ -17,20 +17,23 @@
       role="dialog"
       aria-labelledby="totp-setup-key-title"
     >
-      <h3 id="totp-setup-key-title">设置密钥</h3>
+      <h3 id="totp-setup-key-title">{{ t('settings.totp.setupKeyTitle') }}</h3>
       <code data-setup-key>{{ setupKey }}</code>
       <button
         data-action="copy-setup-key"
         class="compact-secondary-button"
         type="button"
         @click="$emit('copy')"
-      >{{ copied ? '已复制' : '复制密钥' }}</button>
+      >{{ copied ? t('common.copied') : t('settings.totp.copyKey') }}</button>
     </section>
   </div>
 </template>
 
 <script setup lang="ts">
 import { nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
+import { useI18n } from '../../i18n'
+
+const { t } = useI18n()
 
 defineProps<{
   setupKey: string
diff --git a/packages/client-ui/src/components/settings/ThemePicker.vue b/packages/client-ui/src/components/settings/ThemePicker.vue
index b59abf42..2c62faa4 100644
--- a/packages/client-ui/src/components/settings/ThemePicker.vue
+++ b/packages/client-ui/src/components/settings/ThemePicker.vue
@@ -3,7 +3,7 @@
     class="theme-picker"
     data-layout="theme-grid"
     role="radiogroup"
-    aria-label="界面主题"
+    :aria-label="t('settings.appearance.heading')"
     @keydown.right.prevent="move(1)"
     @keydown.down.prevent="move(1)"
     @keydown.left.prevent="move(-1)"
@@ -29,16 +29,18 @@
 </template>
 
 <script setup lang="ts">
-import { nextTick, ref } from 'vue'
+import { computed, nextTick, ref } from 'vue'
 import type { ThemeId } from '@termflow/design-tokens'
+import { useI18n } from '../../i18n'
 import { useTheme } from '../../theme/theme'
 
+const { t } = useI18n()
 const { active: activeTheme, select: selectTheme } = useTheme()
 
-const themes: ReadonlyArray<{ id: ThemeId; label: string }> = [
-  { id: 'graphite-signal', label: '石墨信号 (默认)' },
-  { id: 'cloud-cobalt', label: '云端钴蓝' },
-  { id: 'midnight-indigo', label: '午夜靛蓝' },
+const themes = computed<ReadonlyArray<{ id: ThemeId; label: string }>>(() => [
+  { id: 'graphite-signal', label: t('settings.theme.graphite-signal') },
+  { id: 'cloud-cobalt', label: t('settings.theme.cloud-cobalt') },
+  { id: 'midnight-indigo', label: t('settings.theme.midnight-indigo') },
   { id: 'catppuccin-mocha', label: 'Catppuccin Mocha' },
   { id: 'catppuccin-latte', label: 'Catppuccin Latte' },
   { id: 'tokyo-night', label: 'Tokyo Night' },
@@ -46,7 +48,7 @@ const themes: ReadonlyArray<{ id: ThemeId; label: string }> = [
   { id: 'dracula', label: 'Dracula' },
   { id: 'solarized-dark', label: 'Solarized Dark' },
   { id: 'solarized-light', label: 'Solarized Light' },
-]
+])
 const radioButtons = ref<HTMLButtonElement[]>([])
 
 function choose(id: ThemeId) {
@@ -54,9 +56,9 @@ function choose(id: ThemeId) {
 }
 
 async function move(offset: number) {
-  const current = themes.findIndex((theme) => theme.id === activeTheme.value)
-  const next = (current + offset + themes.length) % themes.length
-  const theme = themes[next]
+  const current = themes.value.findIndex((theme) => theme.id === activeTheme.value)
+  const next = (current + offset + themes.value.length) % themes.value.length
+  const theme = themes.value[next]
   if (theme === undefined) return
   choose(theme.id)
   await nextTick()
diff --git a/packages/client-ui/src/components/settings/TotpPanel.vue b/packages/client-ui/src/components/settings/TotpPanel.vue
index 742cd6d5..93881955 100644
--- a/packages/client-ui/src/components/settings/TotpPanel.vue
+++ b/packages/client-ui/src/components/settings/TotpPanel.vue
@@ -4,27 +4,27 @@
       <div>
         <p class="eyebrow">Two Factor Authentication</p>
         <div class="settings-heading-label">
-          <h2 id="totp-heading">双重因素认证</h2>
+          <h2 id="totp-heading">{{ t('settings.totp.heading') }}</h2>
           <ContextHelp
             v-if="!loading && status.available && !status.configured"
             data-action="explain-totp"
-            label="说明双重因素认证"
-            text="绑定验证器 App 后，可为新的登录和客户端授权增加一次性验证码。"
+            :label="t('settings.totp.helpLabel')"
+            :text="t('settings.totp.helpText')"
           />
         </div>
       </div>
       <div v-if="!loading && status.configured" data-authenticator-actions class="settings-panel-heading-actions">
-        <span class="status-chip">验证器已绑定</span>
-        <button data-action="reconfigure-totp" class="compact-secondary-button" type="button" @click="activate">重新配置</button>
+        <span class="status-chip">{{ t('settings.totp.bound') }}</span>
+        <button data-action="reconfigure-totp" class="compact-secondary-button" type="button" @click="activate">{{ t('settings.totp.reconfigure') }}</button>
       </div>
-      <span v-else-if="!loading" class="status-chip" data-status="disabled">未激活</span>
+      <span v-else-if="!loading" class="status-chip" data-status="disabled">{{ t('settings.totp.inactive') }}</span>
     </div>
-    <p v-if="loading" role="status">正在读取安全状态…</p>
+    <p v-if="loading" role="status">{{ t('settings.totp.loading') }}</p>
     <template v-else-if="!status.available">
-      <p class="settings-warning" role="status">双重因素认证暂时不可用，请联系服务器管理员。</p>
+      <p class="settings-warning" role="status">{{ t('settings.totp.unavailable') }}</p>
     </template>
     <template v-else-if="!status.configured">
-      <button data-action="activate-totp" class="primary-button settings-action-button" type="button" @click="activate">激活双重因素认证</button>
+      <button data-action="activate-totp" class="primary-button settings-action-button" type="button" @click="activate">{{ t('settings.totp.activate') }}</button>
     </template>
     <template v-else>
       <div class="security-setting-row">
@@ -35,7 +35,7 @@
           type="button"
           role="switch"
           :aria-checked="status.enabled"
-          aria-label="启用双重认证登录"
+          :aria-label="t('settings.totp.protectionLabel')"
           @click="openProtectionDialog"
         ><span aria-hidden="true" /></button>
       </div>
@@ -55,10 +55,12 @@ import type { TotpStatusResponse } from '@termflow/client-contracts'
 import { onMounted, reactive, ref } from 'vue'
 import { useRouter } from 'vue-router'
 import ContextHelp from '../common/ContextHelp.vue'
+import { useI18n } from '../../i18n'
 import { useClientRuntime } from '../../runtime'
 import TotpProtectionLabel from './TotpProtectionLabel.vue'
 import TotpProtectionDialog from './TotpProtectionDialog.vue'
 
+const { t } = useI18n()
 const emit = defineEmits<{ changed: [TotpStatusResponse] }>()
 const runtime = useClientRuntime()
 const router = useRouter()
diff --git a/packages/client-ui/src/components/settings/TotpProtectionDialog.vue b/packages/client-ui/src/components/settings/TotpProtectionDialog.vue
index 56d32232..1a4ba7e8 100644
--- a/packages/client-ui/src/components/settings/TotpProtectionDialog.vue
+++ b/packages/client-ui/src/components/settings/TotpProtectionDialog.vue
@@ -4,19 +4,19 @@
       <header>
         <div>
           <p class="eyebrow">Security Check</p>
-          <h2 id="protection-dialog-title">{{ targetEnabled ? '启用双重认证登录' : '停用双重认证登录' }}</h2>
+          <h2 id="protection-dialog-title">{{ targetEnabled ? t('settings.totp.protectionLabel') : t('settings.totp.disableTitle') }}</h2>
         </div>
-        <button data-action="close-protection-dialog" class="icon-button icon-only" type="button" aria-label="关闭" @click="close"><X :size="18" aria-hidden="true" /></button>
+        <button data-action="close-protection-dialog" class="icon-button icon-only" type="button" :aria-label="t('common.close')" @click="close"><X :size="18" aria-hidden="true" /></button>
       </header>
       <form class="security-form" @submit.prevent="submit">
-        <label for="protection-admin-token">管理员令牌</label>
+        <label for="protection-admin-token">{{ t('settings.totp.adminToken') }}</label>
         <input id="protection-admin-token" ref="adminInput" v-model="adminToken" name="admin-token" type="password" autocomplete="off" required />
-        <label for="protection-totp-code">双重验证码</label>
+        <label for="protection-totp-code">{{ t('settings.totp.code') }}</label>
         <input id="protection-totp-code" v-model="code" name="totp-code" inputmode="numeric" autocomplete="one-time-code" pattern="[0-9]{6}" maxlength="6" required />
         <p v-if="message" class="form-error" role="alert">{{ message }}</p>
         <div class="dialog-actions">
-          <button class="secondary-button" type="button" :disabled="busy" @click="close">取消</button>
-          <button class="primary-button" type="submit" :disabled="busy">{{ busy ? '正在验证…' : '确认' }}</button>
+          <button class="secondary-button" type="button" :disabled="busy" @click="close">{{ t('common.cancel') }}</button>
+          <button class="primary-button" type="submit" :disabled="busy">{{ busy ? t('settings.totp.verifying') : t('common.confirm') }}</button>
         </div>
       </form>
     </section>
@@ -27,8 +27,10 @@
 import type { TotpStatusResponse } from '@termflow/client-contracts'
 import { X } from '@lucide/vue'
 import { nextTick, ref, watch } from 'vue'
+import { useI18n } from '../../i18n'
 import { useClientRuntime } from '../../runtime'
 
+const { t } = useI18n()
 const props = defineProps<{
   open: boolean
   targetEnabled: boolean
@@ -80,7 +82,7 @@ async function submit() {
     emit('close')
     restoreFocus()
   } catch {
-    message.value = '验证失败，请检查凭据后重试。'
+    message.value = t('settings.totp.verifyFailed')
   } finally {
     busy.value = false
   }
diff --git a/packages/client-ui/src/components/settings/TotpProtectionLabel.vue b/packages/client-ui/src/components/settings/TotpProtectionLabel.vue
index ed93dff9..fee4c6f7 100644
--- a/packages/client-ui/src/components/settings/TotpProtectionLabel.vue
+++ b/packages/client-ui/src/components/settings/TotpProtectionLabel.vue
@@ -1,14 +1,16 @@
 <template>
   <div data-totp-protection-label class="security-setting-label">
-    <strong>启用双重认证登录</strong>
+    <strong>{{ t('settings.totp.protectionLabel') }}</strong>
     <ContextHelp
       data-action="explain-totp-protection"
-      label="说明启用双重认证登录"
-      text="启用后，新的管理员登录和客户端授权都需要验证器生成的一次性验证码。"
+      :label="t('settings.totp.protectionHelpLabel')"
+      :text="t('settings.totp.protectionHelpText')"
     />
   </div>
 </template>
 
 <script setup lang="ts">
 import ContextHelp from '../common/ContextHelp.vue'
+import { useI18n } from '../../i18n'
+const { t } = useI18n()
 </script>
diff --git a/packages/client-ui/src/components/terminal/ClosePaneDialog.vue b/packages/client-ui/src/components/terminal/ClosePaneDialog.vue
index 7408d526..bde72c80 100644
--- a/packages/client-ui/src/components/terminal/ClosePaneDialog.vue
+++ b/packages/client-ui/src/components/terminal/ClosePaneDialog.vue
@@ -1,15 +1,17 @@
 <template>
   <div class="dialog-backdrop" @click.self="$emit('cancel')">
     <section ref="panel" class="dialog-panel close-pane-dialog" role="alertdialog" aria-modal="true" aria-labelledby="close-pane-title" aria-describedby="close-pane-description" @keydown="trapFocus">
-      <h2 id="close-pane-title">关闭 Pane？</h2>
-      <p id="close-pane-description">将关闭 <strong>{{ paneName }}</strong>（{{ paneId }}）。Pane 中未保存的工作可能丢失。</p>
-      <div class="dialog-actions"><button ref="cancelButton" class="text-button" type="button" @click="$emit('cancel')">取消</button><button data-action="confirm-close-pane" class="danger-button" type="button" @click="$emit('confirm', { paneId, confirmed: true })">确认关闭 Pane</button></div>
+      <h2 id="close-pane-title">{{ t('terminal.closePane.title') }}</h2>
+      <p id="close-pane-description">{{ t('terminal.closePane.desc', { name: paneName, id: paneId }) }}</p>
+      <div class="dialog-actions"><button ref="cancelButton" class="text-button" type="button" @click="$emit('cancel')">{{ t('common.cancel') }}</button><button data-action="confirm-close-pane" class="danger-button" type="button" @click="$emit('confirm', { paneId, confirmed: true })">{{ t('terminal.closePane.confirm') }}</button></div>
     </section>
   </div>
 </template>
 
 <script setup lang="ts">
 import { nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
+import { useI18n } from '../../i18n'
+const { t } = useI18n()
 const props = defineProps<{ paneId: string; paneName: string; returnFocus?: HTMLElement | null }>()
 defineEmits<{ confirm: [payload: { paneId: string; confirmed: true }]; cancel: [] }>()
 const panel = ref<HTMLElement | null>(null)
diff --git a/packages/client-ui/src/components/terminal/DisplayMenu.vue b/packages/client-ui/src/components/terminal/DisplayMenu.vue
index 59eb4884..c3833991 100644
--- a/packages/client-ui/src/components/terminal/DisplayMenu.vue
+++ b/packages/client-ui/src/components/terminal/DisplayMenu.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="titlebar-menu">
-    <button ref="trigger" data-action="toggle-display-menu" class="titlebar-button" :class="{ 'is-open': open }" type="button" aria-label="显示设置" aria-haspopup="menu" :aria-expanded="open" @click="toggleMenu"><MonitorCog :size="16" aria-hidden="true" /><span class="control-label">显示</span><ChevronDown class="menu-chevron" :size="15" aria-hidden="true" /></button>
-    <div v-if="open" class="floating-menu display-menu" role="menu" aria-label="终端显示比例" @keydown.esc.prevent="closeAndFocus" @keydown.down.prevent="moveFocus(1)" @keydown.up.prevent="moveFocus(-1)">
+    <button ref="trigger" data-action="toggle-display-menu" class="titlebar-button" :class="{ 'is-open': open }" type="button" :aria-label="t('terminal.display.buttonAria')" aria-haspopup="menu" :aria-expanded="open" @click="toggleMenu"><MonitorCog :size="16" aria-hidden="true" /><span class="control-label">{{ t('terminal.display.buttonLabel') }}</span><ChevronDown class="menu-chevron" :size="15" aria-hidden="true" /></button>
+    <div v-if="open" class="floating-menu display-menu" role="menu" :aria-label="t('terminal.display.menuAria')" @keydown.esc.prevent="closeAndFocus" @keydown.down.prevent="moveFocus(1)" @keydown.up.prevent="moveFocus(-1)">
       <button v-for="choice in choices" ref="choiceButtons" :key="choice.id" type="button" role="menuitemradio" :aria-label="choice.label" :aria-checked="modelValue === choice.id" @click="select(choice.id)">
         <CircleDot v-if="modelValue === choice.id" :size="16" aria-hidden="true" /><Circle v-else :size="16" aria-hidden="true" /><span>{{ choice.label }}</span>
       </button>
@@ -11,20 +11,25 @@
 
 <script setup lang="ts">
 import { ChevronDown, Circle, CircleDot, MonitorCog } from '@lucide/vue'
-import { nextTick, ref, watch } from 'vue'
+import { computed, nextTick, ref, watch } from 'vue'
+import { useI18n } from '../../i18n'
 import type { DisplayMode } from '../../terminal/viewport'
+const { t } = useI18n()
 const props = withDefaults(defineProps<{ modelValue: DisplayMode; open?: boolean }>(), { open: false })
 const emit = defineEmits<{ 'update:modelValue': [mode: DisplayMode]; 'update:open': [open: boolean] }>()
 const trigger = ref<HTMLButtonElement | null>(null)
 const choiceButtons = ref<HTMLButtonElement[]>([])
-const choices: Array<{ id: DisplayMode; label: string }> = [
-  { id: 'scale-50', label: '50%' }, { id: 'scale-75', label: '75%' }, { id: 'font-100', label: '100% 实际字号' }, { id: 'fit', label: '适应窗口' },
-]
+const choices = computed<Array<{ id: DisplayMode; label: string }>>(() => [
+  { id: 'scale-50', label: '50%' },
+  { id: 'scale-75', label: '75%' },
+  { id: 'font-100', label: t('terminal.display.font100') },
+  { id: 'fit', label: t('terminal.display.fit') },
+])
 function toggleMenu() { emit('update:open', !props.open) }
 watch(() => props.open, async (open) => {
   if (!open) return
   await nextTick()
-  choiceButtons.value[choices.findIndex((choice) => choice.id === props.modelValue)]?.focus()
+  choiceButtons.value[choices.value.findIndex((choice) => choice.id === props.modelValue)]?.focus()
 })
 async function select(mode: DisplayMode) { emit('update:modelValue', mode); emit('update:open', false); await nextTick(); trigger.value?.focus() }
 function moveFocus(offset: number) {
diff --git a/packages/client-ui/src/components/terminal/MobileKeyBar.vue b/packages/client-ui/src/components/terminal/MobileKeyBar.vue
index 23d0f902..cc70c610 100644
--- a/packages/client-ui/src/components/terminal/MobileKeyBar.vue
+++ b/packages/client-ui/src/components/terminal/MobileKeyBar.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="mobile-keybar-shell">
-    <div class="mobile-keybar" aria-label="移动端修饰键" @pointermove.stop>
+    <div class="mobile-keybar" :aria-label="t('terminal.mobileKeybar.aria')" @pointermove.stop>
       <!-- 修饰键组 -->
       <button
         v-for="key in modifierKeys"
@@ -11,7 +11,7 @@
         :aria-pressed="controller.state[key.id] !== 'off'"
         @click="pressModifier(key.id)"
       >
-        {{ key.label }}<span v-if="controller.state[key.id] === 'sticky'" class="locked-indicator" aria-label="已锁定" />
+        {{ key.label }}<span v-if="controller.state[key.id] === 'sticky'" class="locked-indicator" :aria-label="t('terminal.mobileKeybar.locked')" />
       </button>
       <button type="button" class="mobile-key-btn" :disabled="disabled" @click="special('Escape')">Esc</button>
       <button type="button" class="mobile-key-btn" :disabled="disabled" @click="special('Tab')">Tab</button>
@@ -20,7 +20,7 @@
         class="mobile-key-btn"
         :disabled="disabled || !usablePrefix"
         :aria-pressed="controller.state.prefix"
-        :title="usablePrefix ? `实际 Prefix：${prefix}` : 'Prefix 未报告'"
+        :title="usablePrefix ? t('terminal.mobileKeybar.prefixReported', { prefix }) : t('terminal.mobileKeybar.prefixUnreported')"
         @click="sendPrefix"
       >
         Prefix
@@ -28,16 +28,16 @@
 
       <!-- 方向导航组 -->
       <span class="mobile-keybar-divider" aria-hidden="true" />
-      <button type="button" class="mobile-key-btn mobile-key-btn--nav" :disabled="disabled" aria-label="上箭头" @click="sendArrow('\u001b[A')">↑</button>
-      <button type="button" class="mobile-key-btn mobile-key-btn--nav" :disabled="disabled" aria-label="下箭头" @click="sendArrow('\u001b[B')">↓</button>
-      <button type="button" class="mobile-key-btn mobile-key-btn--nav" :disabled="disabled" aria-label="左箭头" @click="sendArrow('\u001b[D')">←</button>
-      <button type="button" class="mobile-key-btn mobile-key-btn--nav" :disabled="disabled" aria-label="右箭头" @click="sendArrow('\u001b[C')">→</button>
+      <button type="button" class="mobile-key-btn mobile-key-btn--nav" :disabled="disabled" :aria-label="t('terminal.mobileKeybar.up')" @click="sendArrow('\u001b[A')">↑</button>
+      <button type="button" class="mobile-key-btn mobile-key-btn--nav" :disabled="disabled" :aria-label="t('terminal.mobileKeybar.down')" @click="sendArrow('\u001b[B')">↓</button>
+      <button type="button" class="mobile-key-btn mobile-key-btn--nav" :disabled="disabled" :aria-label="t('terminal.mobileKeybar.left')" @click="sendArrow('\u001b[D')">←</button>
+      <button type="button" class="mobile-key-btn mobile-key-btn--nav" :disabled="disabled" :aria-label="t('terminal.mobileKeybar.right')" @click="sendArrow('\u001b[C')">→</button>
 
       <!-- 高频控制与中断组 -->
       <span class="mobile-keybar-divider" aria-hidden="true" />
-      <button type="button" class="mobile-key-btn mobile-key-btn--danger" :disabled="disabled" aria-label="中断 (Ctrl+C)" @click="sendInterrupt">^C</button>
+      <button type="button" class="mobile-key-btn mobile-key-btn--danger" :disabled="disabled" :aria-label="t('terminal.mobileKeybar.interrupt')" @click="sendInterrupt">^C</button>
       <button type="button" class="mobile-key-btn" :disabled="disabled" aria-label="EOF (Ctrl+D)" @click="sendEof">^D</button>
-      <button type="button" class="mobile-key-btn mobile-key-btn--primary" :disabled="disabled" aria-label="回车 (Enter)" @click="sendEnter">↵</button>
+      <button type="button" class="mobile-key-btn mobile-key-btn--primary" :disabled="disabled" :aria-label="t('terminal.mobileKeybar.enter')" @click="sendEnter">↵</button>
 
       <!-- 高频 Shell 符号组 -->
       <button type="button" class="mobile-key-btn mobile-key-btn--sym" :disabled="disabled" @click="sendChar('/')">/</button>
@@ -52,8 +52,10 @@
 <script setup lang="ts">
 import { computed, onBeforeUnmount, onMounted, watch } from 'vue'
 import { keyNotationBytes, type MobileModifierController, type ModifierKey } from '@termflow/client-core'
+import { useI18n } from '../../i18n'
 import { useClientRuntime } from '../../runtime'
 
+const { t } = useI18n()
 const props = withDefaults(defineProps<{
   prefix: string
   controller: MobileModifierController
@@ -70,7 +72,7 @@ const modifierKeys: Array<{ id: ModifierKey; label: string }> = [
   { id: 'shift', label: 'Shift' },
 ]
 
-const usablePrefix = computed(() => !!props.prefix && !/未报告|未绑定/.test(props.prefix))
+const usablePrefix = computed(() => !!props.prefix && !/未报告|未绑定|Unreported|Unbound/i.test(props.prefix))
 let blurTimer: unknown | null = null
 
 function vibrate(ms = 12) {
diff --git a/packages/client-ui/src/components/terminal/TerminalCanvas.vue b/packages/client-ui/src/components/terminal/TerminalCanvas.vue
index 3993073a..6b0f4be2 100644
--- a/packages/client-ui/src/components/terminal/TerminalCanvas.vue
+++ b/packages/client-ui/src/components/terminal/TerminalCanvas.vue
@@ -1,9 +1,9 @@
 <template>
   <div ref="frameElement" class="terminal-frame" :data-status="status" :data-display-mode="displayMode" :data-viewport-lock="viewportLocked ? 'locked' : 'unlocked'" :data-cell-width="renderedCellMetrics?.width" :data-cell-height="renderedCellMetrics?.height" :data-visual-scale="appliedVisualScale" @wheel.capture="onWheel" @pointerdown="onPointerDown" @pointermove="onPointerMove" @pointerup="onPointerUp" @pointercancel="onPointerCancel">
     <div class="terminal-viewport-content" :style="contentStyle">
-      <div class="terminal-grid" :style="gridStyle"><div ref="host" class="terminal-host" role="application" :aria-label="`Term ${termId} 终端`" /></div>
+      <div class="terminal-grid" :style="gridStyle"><div ref="host" class="terminal-host" role="application" :aria-label="t('terminal.canvas.aria', { id: termId })" /></div>
     </div>
-    <div v-if="status === 'connecting' || status === 'reconnecting'" class="terminal-overlay" role="status">{{ status === 'reconnecting' ? '连接中断，正在恢复…' : '正在连接终端…' }}</div>
+    <div v-if="status === 'connecting' || status === 'reconnecting'" class="terminal-overlay" role="status">{{ status === 'reconnecting' ? t('terminal.canvas.reconnecting') : t('terminal.canvas.connecting') }}</div>
     <p v-if="terminalError" class="terminal-error" role="alert">{{ terminalError }}</p>
   </div>
 </template>
@@ -19,8 +19,11 @@ import { useTerminalSession } from '../../composables/useTerminalSession'
 import { displayPresentation, type DisplayMode } from '../../terminal/viewport'
 import { createPointerViewport, type PointerViewportSnapshot } from '../../composables/usePointerViewport'
 import { createTerminalTouchGestures } from '../../composables/useTerminalTouchGestures'
+import { useI18n } from '../../i18n'
 import { useTheme } from '../../theme/theme'
 
+const { t } = useI18n()
+
 const props = withDefaults(defineProps<{ termId: string; displayMode?: DisplayMode; selectionActive?: boolean; mouseReportingActive?: boolean; viewportLocked?: boolean; transformInput?: (value: string | Uint8Array) => string | Uint8Array; createTerminal?: TerminalFactory; createAdapter?: TerminalAdapterFactory }>(), { displayMode: 'font-100', selectionActive: false, mouseReportingActive: false, viewportLocked: false })
 const emit = defineEmits<{ bindings: [value: { prefix: string; prefix2?: string | null; bindings: Array<{ action: TerminalActionId; key: string | null; tooltip: string }> }]; 'reset-input': [key: number]; status: [value: TerminalConnectionStatus]; 'authentication-required': []; 'action-result': [value: TerminalActionResultFrame] }>()
 const { active: activeTheme } = useTheme()
diff --git a/packages/client-ui/src/components/terminal/TerminalTitlebar.vue b/packages/client-ui/src/components/terminal/TerminalTitlebar.vue
index 737bbb9a..1f975443 100644
--- a/packages/client-ui/src/components/terminal/TerminalTitlebar.vue
+++ b/packages/client-ui/src/components/terminal/TerminalTitlebar.vue
@@ -1,18 +1,18 @@
 <template>
   <header class="terminal-titlebar">
-    <RouterLink data-action="back-dashboard" class="terminal-back" to="/" aria-label="返回控制中心"><ArrowLeft :size="19" aria-hidden="true" /></RouterLink>
+    <RouterLink data-action="back-dashboard" class="terminal-back" to="/" :aria-label="t('terminal.backDashboard')"><ArrowLeft :size="19" aria-hidden="true" /></RouterLink>
     <div class="terminal-identity">
       <span class="terminal-light" :data-status="status" aria-hidden="true" />
       <div class="terminal-metadata">
         <div data-terminal-identifiers class="terminal-identifiers">
           <form v-if="editing" class="terminal-name-form" @submit.prevent="save">
-            <label class="sr-only" for="terminal-name-input">Term 名称</label>
+            <label class="sr-only" for="terminal-name-input">{{ t('terminal.nameLabel') }}</label>
             <input id="terminal-name-input" ref="nameInput" v-model="draft" data-term-name-input maxlength="128" required @keydown.escape.prevent="cancel" />
-            <button data-action="save-term-name" class="icon-button icon-only compact" type="submit" aria-label="保存 Term 名称" title="保存"><Check :size="16" aria-hidden="true" /></button>
-            <button class="icon-button icon-only compact" type="button" aria-label="取消修改 Term 名称" title="取消" @click="cancel"><X :size="16" aria-hidden="true" /></button>
+            <button data-action="save-term-name" class="icon-button icon-only compact" type="submit" :aria-label="t('terminal.saveNameAria')" :title="t('common.save')"><Check :size="16" aria-hidden="true" /></button>
+            <button class="icon-button icon-only compact" type="button" :aria-label="t('terminal.cancelNameAria')" :title="t('common.cancel')" @click="cancel"><X :size="16" aria-hidden="true" /></button>
             <span v-if="validationError" class="form-error" role="alert">{{ validationError }}</span>
           </form>
-          <button v-else data-term-name data-action="edit-term-name" class="terminal-name-trigger" type="button" :aria-label="`修改 Term 名称：${title}`" title="点击修改 Term 名称" @click="startEditing"><strong>{{ title }}</strong></button>
+          <button v-else data-term-name data-action="edit-term-name" class="terminal-name-trigger" type="button" :aria-label="t('terminal.editNameAria', { title })" :title="t('terminal.editNameTitle')" @click="startEditing"><strong>{{ title }}</strong></button>
           <small data-computer-name :title="computerName">{{ computerName }}</small>
         </div>
       </div>
@@ -21,12 +21,23 @@
     <div class="terminal-titlebar-actions">
       <DisplayMenu :model-value="displayMode" :open="displayMenuOpen ?? false" @update:model-value="$emit('update:displayMode', $event)" @update:open="$emit('update:displayMenuOpen', $event)" />
       <slot />
+      <button
+        data-action="toggle-locale"
+        class="titlebar-button locale-toggle-button"
+        type="button"
+        :aria-label="t('app.switchLangAria')"
+        :title="t('app.switchLangAria')"
+        @click="toggleLocale"
+      >
+        <Globe :size="15" aria-hidden="true" />
+        <span class="locale-toggle-badge">{{ t('app.switchLangBadge') }}</span>
+      </button>
       <button
         data-action="toggle-viewport-lock"
         class="titlebar-button viewport-lock-button"
         type="button"
-        :aria-label="viewportLocked ? '解除画布锁定' : '锁定画布'"
-        :title="viewportLocked ? '解除画布锁定' : '锁定画布'"
+        :aria-label="viewportLocked ? t('terminal.unlockViewport') : t('terminal.lockViewport')"
+        :title="viewportLocked ? t('terminal.unlockViewport') : t('terminal.lockViewport')"
         :aria-pressed="viewportLocked"
         @click="emit('update:viewportLocked', !viewportLocked)"
       >
@@ -38,24 +49,26 @@
 </template>
 
 <script setup lang="ts">
-import { ArrowLeft, Check, Lock, Unlock, X } from '@lucide/vue'
+import { ArrowLeft, Check, Globe, Lock, Unlock, X } from '@lucide/vue'
 import { computed, nextTick, ref } from 'vue'
 import { RouterLink } from 'vue-router'
 import type { TerminalConnectionStatus } from '@termflow/client-core'
+import { useI18n } from '../../i18n'
 import type { DisplayMode } from '../../terminal/viewport'
 import DisplayMenu from './DisplayMenu.vue'
+const { t, toggleLocale } = useI18n()
 const props = withDefaults(defineProps<{ title: string; computerName?: string; status?: TerminalConnectionStatus; displayMode: DisplayMode; displayMenuOpen?: boolean; viewportLocked?: boolean }>(), { computerName: 'Computer 未报告', status: 'connecting', displayMenuOpen: false, viewportLocked: false })
 const emit = defineEmits<{ 'update:displayMode': [mode: DisplayMode]; 'update:displayMenuOpen': [open: boolean]; 'update:viewportLocked': [locked: boolean]; rename: [name: string] }>()
 const editing = ref(false)
 const draft = ref('')
 const validationError = ref('')
 const nameInput = ref<HTMLInputElement | null>(null)
-const statusLabel = computed(() => ({ connecting: '正在连接', connected: '已连接', reconnecting: '正在恢复连接', closed: '连接已关闭' })[props.status])
+const statusLabel = computed(() => t(`terminal.status.${props.status}`))
 function startEditing() { draft.value = props.title; validationError.value = ''; editing.value = true; void nextTick(() => nameInput.value?.focus()) }
 function cancel() { editing.value = false; validationError.value = '' }
 function save() {
   const name = draft.value.trim()
-  if (!name || name.length > 128 || /[\u0000-\u001f\u007f]/.test(name)) { validationError.value = '名称需为 1–128 个可见字符。'; return }
+  if (!name || name.length > 128 || /[\u0000-\u001f\u007f]/.test(name)) { validationError.value = t('terminal.nameInvalid'); return }
   emit('rename', name)
   cancel()
 }
diff --git a/packages/client-ui/src/components/terminal/TmuxActionMenu.vue b/packages/client-ui/src/components/terminal/TmuxActionMenu.vue
index 4dde7d4c..2403e172 100644
--- a/packages/client-ui/src/components/terminal/TmuxActionMenu.vue
+++ b/packages/client-ui/src/components/terminal/TmuxActionMenu.vue
@@ -1,12 +1,12 @@
 <template>
   <div class="tmux-controls">
     <div class="titlebar-menu desktop-action-menu">
-      <button ref="desktopTrigger" data-action="toggle-tmux-menu" class="titlebar-button" :class="{ 'is-open': open }" type="button" :disabled="disabled" aria-label="tmux 操作" aria-haspopup="menu" :aria-expanded="open" @click="$emit('update:open', !open)"><Command :size="16" aria-hidden="true" /><span class="control-label">tmux 操作</span><ChevronDown class="menu-chevron" :size="15" aria-hidden="true" /></button>
-      <div v-if="open" class="floating-menu action-menu" role="menu" aria-label="tmux 操作" @keydown.esc.prevent="closeDesktopMenu">
-        <label class="action-search"><span class="sr-only">搜索更多操作</span><input v-model="query" type="search" placeholder="搜索更多操作" /></label>
+      <button ref="desktopTrigger" data-action="toggle-tmux-menu" class="titlebar-button" :class="{ 'is-open': open }" type="button" :disabled="disabled" :aria-label="t('terminal.tmux.buttonLabel')" aria-haspopup="menu" :aria-expanded="open" @click="$emit('update:open', !open)"><Command :size="16" aria-hidden="true" /><span class="control-label">{{ t('terminal.tmux.buttonLabel') }}</span><ChevronDown class="menu-chevron" :size="15" aria-hidden="true" /></button>
+      <div v-if="open" class="floating-menu action-menu" role="menu" :aria-label="t('terminal.tmux.buttonLabel')" @keydown.esc.prevent="closeDesktopMenu">
+        <label class="action-search"><span class="sr-only">{{ t('terminal.tmux.searchPlaceholder') }}</span><input v-model="query" type="search" :placeholder="t('terminal.tmux.searchPlaceholder')" /></label>
         <button v-for="action in filteredActions" :key="action.id" :data-action-id="action.id" type="button" :disabled="disabled" role="menuitem" :class="{ destructive: action.destructive }" :aria-describedby="bindingTooltipId(action.id)" @click="choose(action)">
-          <span class="action-label">{{ action.label }}</span>
-          <span :id="bindingTooltipId(action.id)" class="action-binding-tooltip" role="tooltip"><template v-if="bindingKey(action.id)">快捷键 <code>{{ readableBinding(action.id) }}</code></template><template v-else>未绑定</template></span>
+          <span class="action-label">{{ actionLabel(action) }}</span>
+          <span :id="bindingTooltipId(action.id)" class="action-binding-tooltip" role="tooltip"><template v-if="bindingKey(action.id)">{{ t('terminal.tmux.shortcut') }} <code>{{ readableBinding(action.id) }}</code></template><template v-else>{{ t('terminal.tmux.unbound') }}</template></span>
         </button>
       </div>
     </div>
@@ -16,14 +16,17 @@
 <script setup lang="ts">
 import { ChevronDown, Command } from '@lucide/vue'
 import { computed, nextTick, ref, useId } from 'vue'
+import { useI18n } from '../../i18n'
 import type { BindingSnapshot, TerminalActionId } from '../../types'
 import { tmuxActions, type TmuxActionDefinition } from '../../terminal/actions'
+const { t } = useI18n()
 const props = withDefaults(defineProps<{ bindings: BindingSnapshot; activePaneId: string | null; disabled?: boolean; open?: boolean }>(), { disabled: false, open: false })
 const emit = defineEmits<{ action: [actionId: TerminalActionId, paneId: string | null]; 'request-close': [paneId: string | null, returnFocus: HTMLElement | null]; 'update:open': [open: boolean] }>()
 const desktopTrigger = ref<HTMLButtonElement | null>(null)
 const query = ref('')
 const tooltipScope = useId()
-const filteredActions = computed(() => tmuxActions.filter((action) => action.label.toLocaleLowerCase().includes(query.value.trim().toLocaleLowerCase())))
+const actionLabel = (action: TmuxActionDefinition) => t(`terminal.tmux.action.${action.id}`)
+const filteredActions = computed(() => tmuxActions.filter((action) => actionLabel(action).toLocaleLowerCase().includes(query.value.trim().toLocaleLowerCase()) || action.label.toLocaleLowerCase().includes(query.value.trim().toLocaleLowerCase())))
 const binding = (id: TerminalActionId) => props.bindings.bindings.find((item) => item.action === id)
 const bindingKey = (id: TerminalActionId) => binding(id)?.key ?? null
 const bindingTooltipId = (id: TerminalActionId) => `tmux-binding-${tooltipScope}-${id}`
diff --git a/packages/client-ui/src/i18n/index.ts b/packages/client-ui/src/i18n/index.ts
new file mode 100644
index 00000000..cc11c772
--- /dev/null
+++ b/packages/client-ui/src/i18n/index.ts
@@ -0,0 +1,871 @@
+import { readonly, ref, type DeepReadonly, type Ref } from 'vue'
+
+export type Locale = 'zh' | 'en'
+export const LOCALE_STORAGE_KEY = 'termflow_lang'
+
+function readStoredLocale(): Locale | null {
+  try {
+    if (typeof window !== 'undefined' && typeof window.localStorage?.getItem === 'function') {
+      const stored = window.localStorage.getItem(LOCALE_STORAGE_KEY)
+      if (stored === 'en' || stored === 'zh') return stored
+    }
+  } catch {
+    // Ignore storage access errors in restricted environments.
+  }
+  return null
+}
+
+const currentLocale = ref<Locale>(readStoredLocale() ?? 'zh')
+
+const messages: Record<Locale, Record<string, string>> = {
+  zh: {
+    // App Shell & Navigation
+    'app.skipToMain': '跳到主要内容',
+    'app.brandAria': 'TermFlow 控制中心',
+    'app.headerContext': '远程终端控制',
+    'app.switchLangAria': '切换语言',
+    'app.switchLangBadge': 'EN',
+    'app.logout': '退出登录',
+    'nav.mainAria': '主导航',
+    'nav.mobileAria': '移动端导航',
+    'nav.dashboard': '控制中心',
+    'nav.computers': '电脑管理',
+    'nav.settings': '设置',
+    'nav.agent': 'Agent 控制台',
+
+    // Dashboard
+    'dashboard.eyebrow': '实时状态',
+    'dashboard.title': '控制中心',
+    'dashboard.refresh': '刷新',
+    'dashboard.loading': '正在读取状态…',
+    'dashboard.metricsAria': '关键指标',
+    'dashboard.metric.onlineTerms': '在线 Terms',
+    'dashboard.metric.totalTerms': '共 {count} Terms',
+    'dashboard.metric.onlineTermsHelp': '当前在线并可远程控制的 Term，共 {count} 个 Term。',
+    'dashboard.metric.activePanes': '活动 Panes',
+    'dashboard.metric.activePanesHelp': '在线 Term 中当前处于活动状态的 Pane 数量。',
+    'dashboard.metric.interactions24h': '24 小时交互',
+    'dashboard.metric.interactions24hHelp': '过去 24 小时内由控制节点记录的交互次数。',
+    'dashboard.metric.computers': 'Computers',
+    'dashboard.metric.computersHelp': '已注册到当前控制节点的 Computer 数量，其中 {count} 台在线。',
+    'dashboard.loadError': '无法加载控制中心。',
+    'dashboard.emptyTerms': '这台 Computer 还没有 Term。',
+    'dashboard.openTermAria': '打开终端：{name}',
+    'dashboard.neverOnline': '尚未在线',
+    'dashboard.deleteOfflineTermAria': '删除离线 Term：{name}',
+    'dashboard.deleteError.online': 'Term 已重新上线，无法删除。',
+    'dashboard.deleteError.notFound': 'Term 已不存在；列表已按服务器状态刷新。',
+    'dashboard.deleteError.generic': '无法删除 Term，请重试。',
+    'dashboard.deleteDialog.title': '永久删除离线 Term？',
+    'dashboard.deleteDialog.desc1': '将永久删除远端注册和控制凭据：',
+    'dashboard.deleteDialog.desc2': '这不会删除本地 tmux Session；它仍可能在所属 Computer 上运行。',
+    'dashboard.deleteDialog.desc3': '如需恢复远程访问，请在所属 Computer 上运行：',
+    'dashboard.deleteDialog.cleanupPending': '清理待完成 · 任务 {jobId}',
+    'dashboard.deleteDialog.deleting': '正在删除…',
+    'dashboard.deleteDialog.confirm': '永久删除远程 Term',
+
+    // Status
+    'status.online': '在线',
+    'status.offline': '离线',
+    'status.onlineCount': '在线 ({count})',
+    'status.offlineZero': '离线 (0)',
+    'common.cancel': '取消',
+    'common.confirm': '确认',
+    'common.save': '保存',
+    'common.close': '关闭',
+    'common.copy': '复制',
+    'common.copied': '已复制',
+    'common.continue': '继续',
+    'common.retry': '重试',
+    'common.refresh': '刷新',
+    'common.loading': '加载中…',
+    'common.unknown': '未知',
+    'common.unavailable': '详情不可用',
+
+    // Computers View
+    'computers.eyebrow': '设备与注册',
+    'computers.title': '电脑管理',
+    'computers.add': '添加电脑',
+    'computers.loading': '正在读取 Computers…',
+    'computers.loadError': '无法加载 Computers。',
+    'computers.deletedToast': '已删除',
+    'computers.addedToast': '已添加',
+    'computers.deleteError': '无法删除电脑。',
+    'computers.tableAria': '已注册 Computers',
+    'computers.col.name': '名称',
+    'computers.col.terms': '终端',
+    'computers.col.lastSeen': '最近在线',
+    'computers.col.registeredAt': '注册时间',
+    'computers.col.actions': '操作',
+    'computers.notRecorded': '未记录',
+    'computers.cannotDeleteOnlineAria': '{name}：有终端在线时不能删除',
+    'computers.cannotDeleteOnlineTitle': '有终端在线时不能删除',
+    'computers.deleteAria': '删除电脑：{name}',
+    'computers.nameEditor.label': 'Computer 显示名称',
+    'computers.nameEditor.editAria': '修改 Computer 名称：{name}',
+    'computers.nameEditor.editTitle': '点击修改 Computer 名称',
+    'computers.nameEditor.invalid': '显示名称须为 1 至 128 个无控制字符的字符。',
+    'computers.nameEditor.saveError': '无法保存显示名称。',
+    'computers.enrollment.title': '添加电脑',
+    'computers.enrollment.nameLabel': '电脑名称',
+    'computers.enrollment.namePlaceholder': '输入电脑名称',
+    'computers.enrollment.creating': '正在创建…',
+    'computers.enrollment.create': '创建',
+    'computers.enrollment.warning': '此注册码只显示一次，将在 {seconds} 秒后过期并自动刷新。',
+    'computers.enrollment.codeHeading': '注册码',
+    'computers.enrollment.codeAria': '一次性注册码',
+    'computers.enrollment.commandHeading': '终端执行',
+    'computers.enrollment.commandHelpAria': '终端执行说明',
+    'computers.enrollment.commandHelpTitle': '复制到安装有 TermFlow 的电脑上，在终端中执行',
+    'computers.enrollment.commandHelpText': '复制到安装有 TermFlow 的电脑上，在终端中执行。',
+    'computers.enrollment.copyCommand': '复制命令',
+    'computers.enrollment.pollError': '无法检查电脑是否已添加。',
+    'computers.enrollment.nameInvalid': '电脑名称须为 1 至 128 个无控制字符的字符。',
+    'computers.enrollment.refreshError': '注册码刷新失败，请手动重试。',
+    'computers.enrollment.createError': '无法创建注册码。',
+    'computers.deleteDialog.title': '删除电脑？',
+    'computers.deleteDialog.desc1': '将永久删除远端注册和控制凭据：',
+    'computers.deleteDialog.desc2': '删除后，这台电脑需要重新注册才能恢复远程控制。',
+    'computers.deleteDialog.confirm': '永久删除电脑',
+
+    // Terminal View & Controls
+    'terminal.srTitle': '远程终端',
+    'terminal.unreportedComputer': 'Computer 未报告',
+    'terminal.unreportedPrefix': '未报告',
+    'terminal.renameError': '无法更新 Term 名称。',
+    'terminal.backDashboard': '返回控制中心',
+    'terminal.nameLabel': 'Term 名称',
+    'terminal.saveNameAria': '保存 Term 名称',
+    'terminal.cancelNameAria': '取消修改 Term 名称',
+    'terminal.editNameAria': '修改 Term 名称：{title}',
+    'terminal.editNameTitle': '点击修改 Term 名称',
+    'terminal.nameInvalid': '名称需为 1–128 个可见字符。',
+    'terminal.status.connecting': '正在连接',
+    'terminal.status.connected': '已连接',
+    'terminal.status.reconnecting': '正在恢复连接',
+    'terminal.status.closed': '连接已关闭',
+    'terminal.unlockViewport': '解除画布锁定',
+    'terminal.lockViewport': '锁定画布',
+    'terminal.display.buttonAria': '显示设置',
+    'terminal.display.buttonLabel': '显示',
+    'terminal.display.menuAria': '终端显示比例',
+    'terminal.display.font100': '100% 实际字号',
+    'terminal.display.fit': '适应窗口',
+    'terminal.tmux.buttonLabel': 'tmux 操作',
+    'terminal.tmux.searchPlaceholder': '搜索更多操作',
+    'terminal.tmux.shortcut': '快捷键',
+    'terminal.tmux.unbound': '未绑定',
+    'terminal.tmux.action.split_left_right': '左右切分 Pane',
+    'terminal.tmux.action.split_top_bottom': '上下切分 Pane',
+    'terminal.tmux.action.new_window': '新建 Window',
+    'terminal.tmux.action.select_left': '选择左侧 Pane',
+    'terminal.tmux.action.select_right': '选择右侧 Pane',
+    'terminal.tmux.action.select_up': '选择上方 Pane',
+    'terminal.tmux.action.select_down': '选择下方 Pane',
+    'terminal.tmux.action.toggle_zoom': '切换 tmux Zoom',
+    'terminal.tmux.action.copy_mode': '进入 Copy Mode',
+    'terminal.tmux.action.close_pane': '关闭 Pane',
+    'terminal.closePane.title': '关闭 Pane？',
+    'terminal.closePane.desc': '将关闭 {name}（{id}）。Pane 中未保存的工作可能丢失。',
+    'terminal.closePane.confirm': '确认关闭 Pane',
+    'terminal.canvas.aria': 'Term {id} 终端',
+    'terminal.canvas.reconnecting': '连接中断，正在恢复…',
+    'terminal.canvas.connecting': '正在连接终端…',
+    'terminal.mobileKeybar.aria': '移动端修饰键',
+    'terminal.mobileKeybar.locked': '已锁定',
+    'terminal.mobileKeybar.prefixReported': '实际 Prefix：{prefix}',
+    'terminal.mobileKeybar.prefixUnreported': 'Prefix 未报告',
+    'terminal.mobileKeybar.up': '上箭头',
+    'terminal.mobileKeybar.down': '下箭头',
+    'terminal.mobileKeybar.left': '左箭头',
+    'terminal.mobileKeybar.right': '右箭头',
+    'terminal.mobileKeybar.interrupt': '中断 (Ctrl+C)',
+    'terminal.mobileKeybar.enter': '回车 (Enter)',
+
+    // Settings View
+    'settings.title': '设置',
+    'settings.appearance.heading': '界面主题',
+    'settings.deviceConnection.heading': '设备连接',
+    'settings.deviceConnection.note': '安全设置只能从已认证的网页管理端修改；本机只保存自己的设备凭据。',
+    'settings.theme.graphite-signal': '石墨信号 (默认)',
+    'settings.theme.cloud-cobalt': '云端钴蓝',
+    'settings.theme.midnight-indigo': '午夜靛蓝',
+    'settings.server.heading': '中继服务器',
+    'settings.server.urlLabel': '服务网址',
+    'settings.server.qrAria': '显示服务网址二维码',
+    'settings.server.qrTitle': '服务网址二维码',
+    'settings.qr.closeAria': '关闭二维码',
+    'settings.totp.heading': '双重因素认证',
+    'settings.totp.helpLabel': '说明双重因素认证',
+    'settings.totp.helpText': '绑定验证器 App 后，可为新的登录和客户端授权增加一次性验证码。',
+    'settings.totp.bound': '验证器已绑定',
+    'settings.totp.reconfigure': '重新配置',
+    'settings.totp.inactive': '未激活',
+    'settings.totp.loading': '正在读取安全状态…',
+    'settings.totp.unavailable': '双重因素认证暂时不可用，请联系服务器管理员。',
+    'settings.totp.activate': '激活双重因素认证',
+    'settings.totp.protectionLabel': '启用双重认证登录',
+    'settings.totp.protectionHelpLabel': '说明启用双重认证登录',
+    'settings.totp.protectionHelpText': '启用后，新的管理员登录和客户端授权都需要验证器生成的一次性验证码。',
+    'settings.totp.disableTitle': '停用双重认证登录',
+    'settings.totp.adminToken': '管理员令牌',
+    'settings.totp.code': '双重验证码',
+    'settings.totp.verifying': '正在验证…',
+    'settings.totp.verifyFailed': '验证失败，请检查凭据后重试。',
+    'settings.totp.setupKeyToggle': '无法扫描？使用设置密钥',
+    'settings.totp.setupKeyTitle': '设置密钥',
+    'settings.totp.copyKey': '复制密钥',
+    'settings.totp.backToSettings': '返回设置',
+    'settings.totp.stepsAria': '激活步骤',
+    'settings.totp.step1': '验证身份',
+    'settings.totp.step2': '绑定验证器',
+    'settings.totp.step3': '启用登录保护',
+    'settings.totp.wizardComplete': '设置完成',
+    'settings.totp.wizardProgress': '第 {step} 步，共 3 步',
+    'settings.totp.wizardTitle.bind': '绑定验证器',
+    'settings.totp.wizardTitle.enabled': '双重认证已启用',
+    'settings.totp.wizardTitle.enableProtection': '启用登录保护',
+    'settings.totp.wizardTitle.reconfigure': '重新配置验证器',
+    'settings.totp.wizardTitle.verifyAdmin': '验证管理员身份',
+    'settings.totp.qrAlt': '验证器设置二维码',
+    'settings.totp.confirmCodeLabel': '验证器验证码',
+    'settings.totp.confirmBind': '确认绑定',
+    'settings.totp.currentCodeLabel': '当前验证器验证码',
+    'settings.totp.codeInvalidOrExpired': '验证码无效或设置已过期，请重试。',
+    'settings.clients.heading': '已授权客户端',
+    'settings.clients.authorizeNew': '授权新客户端',
+    'settings.clients.authorizeNewTitle': '输入设备码以批准另一台已发起连接的客户端。',
+    'settings.clients.empty': '尚未授权手机或桌面客户端。',
+    'settings.clients.revoke': '撤销',
+    'settings.clients.revokeTitle': '撤销客户端',
+    'settings.clients.revokeDesc': '将注销 {name}，不会影响其他设备，也不会中断正在运行的会话。',
+    'settings.clients.confirmRevoke': '确认撤销',
+    'settings.clients.revokedToast': '已撤销',
+    'settings.clients.revokeError': '撤销失败，请检查凭据后重试。',
+    'settings.deviceApproval.codeLabel': '设备码',
+    'settings.deviceApproval.lookingUp': '正在查找…',
+    'settings.deviceApproval.client': '客户端',
+    'settings.deviceApproval.platform': '平台',
+    'settings.deviceApproval.scopes': '权限',
+    'settings.deviceApproval.expiresAt': '有效期至',
+    'settings.deviceApproval.deny': '拒绝',
+    'settings.deviceApproval.allow': '允许此设备',
+    'settings.deviceApproval.approvedToast': '已授权',
+
+    // Auth / Login Views
+    'login.title': '登录',
+    'login.adminToken': '管理员令牌',
+    'login.totpCode': '双重验证码',
+    'login.totpHint': '（请输入验证器应用当前显示的 6 位验证码。）',
+    'login.submit': '登录',
+    'login.verifyAndLogin': '验证并登录',
+    'login.failed': '登录失败，请重试。',
+    'notFound.title': '页面不存在',
+    'notFound.back': '返回控制中心',
+
+    // Agent Console & Panel & Chat
+    'agent.title': 'Agent 控制台',
+    'agent.disabledTitle': 'Agent Broker 未启用',
+    'agent.disabledDesc': '服务器未开启 Agent Broker 能力，无法使用 Agent 会话。',
+    'agent.conversations.heading': '会话记录',
+    'agent.conversations.emptyBindings': '暂无可用 Term，请先在电脑管理中连接一个 Term。',
+    'agent.conversations.empty': '暂无会话记录。',
+    'agent.conversations.tableAria': 'Agent 会话记录',
+    'agent.conversations.col.name': '会话名称',
+    'agent.conversations.col.term': 'Term',
+    'agent.conversations.col.status': '工作状态',
+    'agent.conversations.col.actions': '操作',
+    'agent.conversations.saveNameAria': '保存会话名称',
+    'agent.conversations.cancelNameAria': '取消重命名',
+    'agent.conversations.pendingBadgeAria': '{count} 个待处理审批',
+    'agent.conversations.openInTermAria': '在终端中打开：{title}',
+    'agent.conversations.openInTermTitle': '在终端中打开',
+    'agent.conversations.renameAria': '重命名会话：{title}',
+    'agent.conversations.renameTitle': '重命名会话',
+    'agent.conversations.deleteAria': '删除会话：{title}',
+    'agent.conversations.deleteTitle': '删除会话',
+    'agent.conversations.deleteDialogTitle': '删除该会话？',
+    'agent.conversations.deleteDialogDesc': '将删除会话 {title} 及其全部消息历史，此操作不可撤销。',
+    'agent.conversations.deleteConfirm': '确认删除',
+    'agent.conversations.loadError': '无法加载 Agent 会话数据，请稍后重试。',
+    'agent.conversations.termNameError': '无法加载 Term 名称，部分会话信息可能不完整。',
+    'agent.conversations.termUnknown': 'Term 未知',
+    'agent.conversations.defaultTitle': '会话 {id}',
+    'agent.status.running': '运行中',
+    'agent.status.attention': '需要注意',
+    'agent.status.stopped': '已停止',
+    'agent.readiness.unconfigured': '未设置',
+    'agent.readiness.deployment_required': '需部署',
+    'agent.readiness.activating': '激活中',
+    'agent.readiness.ready': '已就绪',
+    'agent.readiness.unavailable': '不可用',
+    'agent.backend.connecting': '连接中',
+    'agent.backend.idle': '空闲',
+    'agent.backend.busy': '处理中',
+    'agent.backend.retry': '重试中',
+    'agent.backend.ready': '就绪',
+    'agent.backend.readyPanel': '已就绪',
+    'agent.backend.unavailable': '不可用',
+    'agent.backend.offline': '离线',
+    'agent.backend.context_lost': '上下文丢失',
+    'agent.backend.reconciling': '恢复中',
+    'agent.backend.closed': '已关闭',
+    'agent.panel.toolsAria': 'Agent 工具',
+    'agent.panel.dragAria': '拖动 Agent 面板',
+    'agent.panel.newConversation': '新建会话',
+    'agent.panel.history': '历史记录',
+    'agent.panel.settingsAria': 'Agent 设置',
+    'agent.panel.settingsTitle': 'Agent 设置：调整可访问的窗格',
+    'agent.panel.closeAria': '关闭 Agent',
+    'agent.panel.writePolicy': '写入审批',
+    'agent.panel.writePolicyGroupAria': '新会话写入审批',
+    'agent.panel.policyManual': '手动',
+    'agent.panel.policyAuto': '放行',
+    'agent.panel.loading': '正在加载 Agent…',
+    'agent.panel.deploymentRequiredTitle': '需要部署 Agent 服务',
+    'agent.panel.deploymentRequiredDesc': '请管理员完成运行环境和提供方配置。',
+    'agent.panel.checkDeployment': '检查部署状态',
+    'agent.panel.activatingTitle': 'Agent 正在激活',
+    'agent.panel.activatingDesc': '运行时正在连接，稍候会自动刷新。',
+    'agent.panel.refreshStatus': '刷新状态',
+    'agent.panel.reEnableTitle': '请重新启用 Agent',
+    'agent.panel.reEnableDesc': '部署的提供方配置已更新。',
+    'agent.panel.reEnable': '重新启用',
+    'agent.panel.unavailableTitle': 'Agent 暂不可用',
+    'agent.panel.recoveringTitle': 'Agent 正在恢复',
+    'agent.panel.recoveringDesc': '运行时还在连接中，稍候会自动刷新。',
+    'agent.panel.reactivate': '重新激活',
+    'agent.panel.confirmAutoAria': '确认完全放行',
+    'agent.panel.confirmAutoDesc': '完全放行后，Agent 对已授权 Pane 的每次写入都会立即执行，不再弹审批。',
+    'agent.panel.confirmAutoBtn': '确认放行',
+    'agent.panel.historyCount': '{count} 个会话',
+    'agent.panel.historyEmpty': '暂无会话',
+    'agent.panel.untitledConversation': '未命名会话',
+    'agent.panel.statusOpen': '进行中',
+    'agent.panel.emptyPrompt': '选择历史会话或点击“新建会话”。',
+    'agent.panel.defaultChatTitle': 'Agent 对话',
+    'agent.panel.savePanesError': '无法保存窗格授权。',
+    'agent.panel.writePolicyError': '无法更新写入审批方式。',
+    'agent.chat.backOverview': 'Agent 总览',
+    'agent.chat.policyGroupAria': '本对话写入审批',
+    'agent.chat.policyManual': '手动审批',
+    'agent.chat.policyAuto': '完全放行',
+    'agent.chat.canceling': '正在取消…',
+    'agent.chat.cancelRun': '取消运行',
+    'agent.chat.deleteConfirmAria': '确认删除会话',
+    'agent.chat.deleteConfirmDesc': '删除后该会话及其事件会被清理，无法恢复。',
+    'agent.chat.policyConfirmAria': '确认完全放行本对话',
+    'agent.chat.policyConfirmDesc': '本对话内，Agent 对已授权 Pane 的每次写入都会立即执行，不再弹审批。',
+    'agent.chat.approvalPromptAria': '待批准操作',
+    'agent.chat.notFoundBanner': '该会话不存在或已被删除，无法继续连接。',
+    'agent.chat.revokedBanner': 'Agent Binding 已撤销，无法继续连接。',
+    'agent.chat.historyUnavailable': '历史消息内容不可用',
+    'agent.chat.emptyPrompt': '输入一条消息，开始与 Agent 对话。',
+    'agent.chat.roleSystem': '系统',
+    'agent.chat.systemContext': '系统上下文',
+    'agent.chat.systemUnavailable': '系统上下文内容不可用',
+    'agent.chat.roleUser': '你',
+    'agent.chat.thinking': '思考',
+    'agent.chat.thinkingStreaming': '思考中…',
+    'agent.chat.toolCall': '工具调用',
+    'agent.chat.toolInput': '输入',
+    'agent.chat.toolDefaultsOmitted': '默认参数已省略：{items}',
+    'agent.chat.toolOutput': '结果',
+    'agent.chat.toolError': '错误',
+    'agent.chat.stepStart': '开始',
+    'agent.chat.toolStatus.completed': '已完成',
+    'agent.chat.toolStatus.failed': '失败',
+    'agent.chat.toolStatus.failedExec': '执行失败',
+    'agent.chat.toolStatus.running': '运行中',
+    'agent.chat.toolStatus.pending': '等待中',
+    'agent.chat.collapseCode': '收起代码 ▴',
+    'agent.chat.collapseOutput': '收起输出 ▴',
+    'agent.chat.expandLines': '展开其余 {folded} 行 (共 {total} 行) ▾',
+    'agent.composer.inputAria': '发送给 Agent 的消息',
+    'agent.composer.sendAria': '发送消息',
+    'agent.composer.tooLong': '文本超出长度限制（最多 {max} 字节），请精简后重试。',
+    'agent.composer.unavailable': '后端运行时未就绪，暂时无法发送消息。',
+    'agent.approval.state.pending': '待处理',
+    'agent.approval.state.approved': '已批准',
+    'agent.approval.state.denied': '已拒绝',
+    'agent.approval.state.expired': '已过期',
+    'agent.approval.state.revoked': '已撤销',
+    'agent.approval.state.consumed': '已消费',
+    'agent.approval.operation': '操作',
+    'agent.approval.hashPrefix': '摘要 #{hash}',
+    'agent.approval.expiresPrefix': '有效期至 {expiry}',
+    'agent.approval.focusAction': '在审批面板处理',
+    'agent.approval.empty': '暂无待处理审批',
+    'agent.approval.approve': '批准',
+    'agent.approval.deny': '拒绝',
+    'agent.approval.revoke': '撤销',
+    'agent.approval.confirmTitle': '批准该审批请求？',
+    'agent.approval.confirmDesc1': '批准后 Agent 将立即执行',
+    'agent.approval.confirmDesc2': '。此操作不可撤销，请确认内容无误。',
+    'agent.approval.unknownOp': '未知操作',
+    'agent.approval.criticalWarning': '⚠️ 极高风险警示：此操作具有高危破坏性，请二次确认！',
+    'agent.approval.criticalAck': '我已知晓该操作具有高危破坏性，确认执行',
+    'agent.approval.confirmApprove': '确认批准',
+    'agent.risk.level4': '极高危',
+    'agent.risk.level3': '高风险',
+    'agent.risk.level2': '中风险',
+    'agent.risk.level1': '低风险',
+    'agent.setup.title': '设置 Term Agent',
+    'agent.setup.helpLabel': 'Term Agent 说明',
+    'agent.setup.enable': '启用 Agent',
+    'agent.setup.settingUp': '正在设置…',
+    'agent.panes.defaultLegend': '允许 Agent 访问的窗格',
+    'agent.panes.helpLabel': '窗格授权说明',
+    'agent.panes.helpText': '窗格是终端里的一块分屏（% 编号）。Agent 只能读取勾选窗格的内容；写入仍会逐一弹审批。',
+    'agent.panes.selectAll': '全选',
+    'agent.panes.clear': '清空',
+    'agent.panes.selectedCount': '已选 {selected}/{total}',
+    'agent.panes.empty': '暂无可用窗格，请连接终端后刷新。',
+  },
+  en: {
+    // App Shell & Navigation
+    'app.skipToMain': 'Skip to main content',
+    'app.brandAria': 'TermFlow Dashboard',
+    'app.headerContext': 'Remote Terminal Control',
+    'app.switchLangAria': 'Switch Language',
+    'app.switchLangBadge': '中文',
+    'app.logout': 'Sign Out',
+    'nav.mainAria': 'Main navigation',
+    'nav.mobileAria': 'Mobile navigation',
+    'nav.dashboard': 'Dashboard',
+    'nav.computers': 'Computers',
+    'nav.settings': 'Settings',
+    'nav.agent': 'Agent Console',
+
+    // Dashboard
+    'dashboard.eyebrow': 'Live Status',
+    'dashboard.title': 'Dashboard',
+    'dashboard.refresh': 'Refresh',
+    'dashboard.loading': 'Loading status…',
+    'dashboard.metricsAria': 'Key metrics',
+    'dashboard.metric.onlineTerms': 'Online Terms',
+    'dashboard.metric.totalTerms': '{count} total Terms',
+    'dashboard.metric.onlineTermsHelp': 'Currently online and controllable Terms ({count} total).',
+    'dashboard.metric.activePanes': 'Active Panes',
+    'dashboard.metric.activePanesHelp': 'Active panes across all online Terms.',
+    'dashboard.metric.interactions24h': '24h Interactions',
+    'dashboard.metric.interactions24hHelp': 'Interactions recorded by the control node over the past 24 hours.',
+    'dashboard.metric.computers': 'Computers',
+    'dashboard.metric.computersHelp': 'Computers registered to this control node ({count} online).',
+    'dashboard.loadError': 'Unable to load Dashboard.',
+    'dashboard.emptyTerms': 'No Terms on this Computer yet.',
+    'dashboard.openTermAria': 'Open terminal: {name}',
+    'dashboard.neverOnline': 'Never online',
+    'dashboard.deleteOfflineTermAria': 'Delete offline Term: {name}',
+    'dashboard.deleteError.online': 'Term is back online and cannot be deleted.',
+    'dashboard.deleteError.notFound': 'Term no longer exists; list refreshed.',
+    'dashboard.deleteError.generic': 'Unable to delete Term. Please try again.',
+    'dashboard.deleteDialog.title': 'Permanently delete offline Term?',
+    'dashboard.deleteDialog.desc1': 'This permanently removes remote registration and credentials for: ',
+    'dashboard.deleteDialog.desc2': 'This will not kill the local tmux session on the host Computer.',
+    'dashboard.deleteDialog.desc3': 'To restore remote access, run on the host Computer:',
+    'dashboard.deleteDialog.cleanupPending': 'Cleanup pending · Job {jobId}',
+    'dashboard.deleteDialog.deleting': 'Deleting…',
+    'dashboard.deleteDialog.confirm': 'Delete Remote Term',
+
+    // Status
+    'status.online': 'Online',
+    'status.offline': 'Offline',
+    'status.onlineCount': 'Online ({count})',
+    'status.offlineZero': 'Offline (0)',
+    'common.cancel': 'Cancel',
+    'common.confirm': 'Confirm',
+    'common.save': 'Save',
+    'common.close': 'Close',
+    'common.copy': 'Copy',
+    'common.copied': 'Copied',
+    'common.continue': 'Continue',
+    'common.retry': 'Retry',
+    'common.refresh': 'Refresh',
+    'common.loading': 'Loading…',
+    'common.unknown': 'Unknown',
+    'common.unavailable': 'Details unavailable',
+
+    // Computers View
+    'computers.eyebrow': 'Devices & Enrollment',
+    'computers.title': 'Computers',
+    'computers.add': 'Add Computer',
+    'computers.loading': 'Loading Computers…',
+    'computers.loadError': 'Unable to load Computers.',
+    'computers.deletedToast': 'Deleted',
+    'computers.addedToast': 'Added',
+    'computers.deleteError': 'Unable to delete computer.',
+    'computers.tableAria': 'Registered Computers',
+    'computers.col.name': 'Name',
+    'computers.col.terms': 'Terms',
+    'computers.col.lastSeen': 'Last Seen',
+    'computers.col.registeredAt': 'Registered',
+    'computers.col.actions': 'Actions',
+    'computers.notRecorded': 'Not recorded',
+    'computers.cannotDeleteOnlineAria': '{name}: Cannot delete while a Term is online',
+    'computers.cannotDeleteOnlineTitle': 'Cannot delete while a Term is online',
+    'computers.deleteAria': 'Delete computer: {name}',
+    'computers.nameEditor.label': 'Computer display name',
+    'computers.nameEditor.editAria': 'Edit Computer name: {name}',
+    'computers.nameEditor.editTitle': 'Click to edit Computer name',
+    'computers.nameEditor.invalid': 'Display name must be 1–128 characters without control characters.',
+    'computers.nameEditor.saveError': 'Unable to save display name.',
+    'computers.enrollment.title': 'Add Computer',
+    'computers.enrollment.nameLabel': 'Computer Name',
+    'computers.enrollment.namePlaceholder': 'Enter computer name',
+    'computers.enrollment.creating': 'Creating…',
+    'computers.enrollment.create': 'Create',
+    'computers.enrollment.warning': 'This enrollment code is shown once and refreshes in {seconds}s.',
+    'computers.enrollment.codeHeading': 'Enrollment Code',
+    'computers.enrollment.codeAria': 'One-time enrollment code',
+    'computers.enrollment.commandHeading': 'Run in Terminal',
+    'computers.enrollment.commandHelpAria': 'Terminal command instructions',
+    'computers.enrollment.commandHelpTitle': 'Copy and run in a terminal on the computer with TermFlow installed',
+    'computers.enrollment.commandHelpText': 'Copy and run in a terminal on the computer with TermFlow installed.',
+    'computers.enrollment.copyCommand': 'Copy Command',
+    'computers.enrollment.pollError': 'Unable to check enrollment status.',
+    'computers.enrollment.nameInvalid': 'Computer name must be 1–128 characters without control characters.',
+    'computers.enrollment.refreshError': 'Failed to refresh enrollment code. Please retry.',
+    'computers.enrollment.createError': 'Unable to create enrollment code.',
+    'computers.deleteDialog.title': 'Delete Computer?',
+    'computers.deleteDialog.desc1': 'This permanently removes remote registration and credentials for: ',
+    'computers.deleteDialog.desc2': 'Once deleted, this computer must be re-enrolled for remote control.',
+    'computers.deleteDialog.confirm': 'Delete Computer',
+
+    // Terminal View & Controls
+    'terminal.srTitle': 'Remote Terminal',
+    'terminal.unreportedComputer': 'Computer Unreported',
+    'terminal.unreportedPrefix': 'Unreported',
+    'terminal.renameError': 'Unable to update Term name.',
+    'terminal.backDashboard': 'Back to Dashboard',
+    'terminal.nameLabel': 'Term Name',
+    'terminal.saveNameAria': 'Save Term name',
+    'terminal.cancelNameAria': 'Cancel editing Term name',
+    'terminal.editNameAria': 'Edit Term name: {title}',
+    'terminal.editNameTitle': 'Click to edit Term name',
+    'terminal.nameInvalid': 'Name must be 1–128 printable characters.',
+    'terminal.status.connecting': 'Connecting',
+    'terminal.status.connected': 'Connected',
+    'terminal.status.reconnecting': 'Reconnecting',
+    'terminal.status.closed': 'Disconnected',
+    'terminal.unlockViewport': 'Unlock Viewport',
+    'terminal.lockViewport': 'Lock Viewport',
+    'terminal.display.buttonAria': 'Display Settings',
+    'terminal.display.buttonLabel': 'Display',
+    'terminal.display.menuAria': 'Terminal display scale',
+    'terminal.display.font100': '100% Actual Size',
+    'terminal.display.fit': 'Fit Window',
+    'terminal.tmux.buttonLabel': 'tmux Actions',
+    'terminal.tmux.searchPlaceholder': 'Search actions…',
+    'terminal.tmux.shortcut': 'Shortcut',
+    'terminal.tmux.unbound': 'Unbound',
+    'terminal.tmux.action.split_left_right': 'Split Left / Right',
+    'terminal.tmux.action.split_top_bottom': 'Split Top / Bottom',
+    'terminal.tmux.action.new_window': 'New Window',
+    'terminal.tmux.action.select_left': 'Focus Left Pane',
+    'terminal.tmux.action.select_right': 'Focus Right Pane',
+    'terminal.tmux.action.select_up': 'Focus Up Pane',
+    'terminal.tmux.action.select_down': 'Focus Down Pane',
+    'terminal.tmux.action.toggle_zoom': 'Toggle Pane Zoom',
+    'terminal.tmux.action.copy_mode': 'Enter Copy Mode',
+    'terminal.tmux.action.close_pane': 'Close Pane',
+    'terminal.closePane.title': 'Close Pane?',
+    'terminal.closePane.desc': 'Close {name} ({id})? Unsaved work inside the pane may be lost.',
+    'terminal.closePane.confirm': 'Close Pane',
+    'terminal.canvas.aria': 'Term {id} terminal',
+    'terminal.canvas.reconnecting': 'Connection interrupted, reconnecting…',
+    'terminal.canvas.connecting': 'Connecting to terminal…',
+    'terminal.mobileKeybar.aria': 'Mobile modifier keys',
+    'terminal.mobileKeybar.locked': 'Locked',
+    'terminal.mobileKeybar.prefixReported': 'Active Prefix: {prefix}',
+    'terminal.mobileKeybar.prefixUnreported': 'Prefix unreported',
+    'terminal.mobileKeybar.up': 'Up Arrow',
+    'terminal.mobileKeybar.down': 'Down Arrow',
+    'terminal.mobileKeybar.left': 'Left Arrow',
+    'terminal.mobileKeybar.right': 'Right Arrow',
+    'terminal.mobileKeybar.interrupt': 'Interrupt (Ctrl+C)',
+    'terminal.mobileKeybar.enter': 'Enter',
+
+    // Settings View
+    'settings.title': 'Settings',
+    'settings.appearance.heading': 'Appearance Theme',
+    'settings.deviceConnection.heading': 'Device Connection',
+    'settings.deviceConnection.note': 'Security settings can only be changed from an authenticated web admin session; this device only stores its own credentials.',
+    'settings.theme.graphite-signal': 'Graphite Signal',
+    'settings.theme.cloud-cobalt': 'Cloud Cobalt',
+    'settings.theme.midnight-indigo': 'Midnight Indigo',
+    'settings.server.heading': 'Relay Server',
+    'settings.server.urlLabel': 'Server URL',
+    'settings.server.qrAria': 'Show server URL QR code',
+    'settings.server.qrTitle': 'Server URL QR Code',
+    'settings.qr.closeAria': 'Close QR code',
+    'settings.totp.heading': 'Two-Factor Authentication',
+    'settings.totp.helpLabel': 'About Two-Factor Authentication',
+    'settings.totp.helpText': 'Bind an authenticator app to require a one-time code for new logins and client authorizations.',
+    'settings.totp.bound': 'Authenticator Bound',
+    'settings.totp.reconfigure': 'Reconfigure',
+    'settings.totp.inactive': 'Inactive',
+    'settings.totp.loading': 'Loading security status…',
+    'settings.totp.unavailable': 'Two-factor authentication is temporarily unavailable. Contact the server administrator.',
+    'settings.totp.activate': 'Enable 2FA',
+    'settings.totp.protectionLabel': 'Require 2FA at Sign-In',
+    'settings.totp.protectionHelpLabel': 'About 2FA Sign-In Protection',
+    'settings.totp.protectionHelpText': 'When enabled, new admin sign-ins and client authorizations require a 6-digit code from your authenticator app.',
+    'settings.totp.disableTitle': 'Disable 2FA at Sign-In',
+    'settings.totp.adminToken': 'Admin Token',
+    'settings.totp.code': '2FA Code',
+    'settings.totp.verifying': 'Verifying…',
+    'settings.totp.verifyFailed': 'Verification failed. Check your credentials and try again.',
+    'settings.totp.setupKeyToggle': 'Cannot scan? Use setup key',
+    'settings.totp.setupKeyTitle': 'Setup Key',
+    'settings.totp.copyKey': 'Copy Key',
+    'settings.totp.backToSettings': 'Back to Settings',
+    'settings.totp.stepsAria': 'Activation steps',
+    'settings.totp.step1': 'Verify Identity',
+    'settings.totp.step2': 'Bind Authenticator',
+    'settings.totp.step3': 'Enable Sign-In Guard',
+    'settings.totp.wizardComplete': 'Setup Complete',
+    'settings.totp.wizardProgress': 'Step {step} of 3',
+    'settings.totp.wizardTitle.bind': 'Bind Authenticator',
+    'settings.totp.wizardTitle.enabled': '2FA Enabled',
+    'settings.totp.wizardTitle.enableProtection': 'Enable Sign-In Guard',
+    'settings.totp.wizardTitle.reconfigure': 'Reconfigure Authenticator',
+    'settings.totp.wizardTitle.verifyAdmin': 'Verify Admin Identity',
+    'settings.totp.qrAlt': 'Authenticator setup QR code',
+    'settings.totp.confirmCodeLabel': 'Authenticator Code',
+    'settings.totp.confirmBind': 'Confirm Binding',
+    'settings.totp.currentCodeLabel': 'Current Authenticator Code',
+    'settings.totp.codeInvalidOrExpired': 'Invalid code or expired setup session. Please try again.',
+    'settings.clients.heading': 'Authorized Clients',
+    'settings.clients.authorizeNew': 'Authorize Client',
+    'settings.clients.authorizeNewTitle': 'Enter a device code to approve another client.',
+    'settings.clients.empty': 'No mobile or desktop clients authorized yet.',
+    'settings.clients.revoke': 'Revoke',
+    'settings.clients.revokeTitle': 'Revoke Client',
+    'settings.clients.revokeDesc': 'This revokes {name} without affecting other devices or active terminal sessions.',
+    'settings.clients.confirmRevoke': 'Confirm Revoke',
+    'settings.clients.revokedToast': 'Revoked',
+    'settings.clients.revokeError': 'Failed to revoke client. Check your credentials and try again.',
+    'settings.deviceApproval.codeLabel': 'Device Code',
+    'settings.deviceApproval.lookingUp': 'Looking up…',
+    'settings.deviceApproval.client': 'Client',
+    'settings.deviceApproval.platform': 'Platform',
+    'settings.deviceApproval.scopes': 'Scopes',
+    'settings.deviceApproval.expiresAt': 'Expires At',
+    'settings.deviceApproval.deny': 'Deny',
+    'settings.deviceApproval.allow': 'Allow Device',
+    'settings.deviceApproval.approvedToast': 'Authorized',
+
+    // Auth / Login Views
+    'login.title': 'Sign In',
+    'login.adminToken': 'Admin Token',
+    'login.totpCode': '2FA Code',
+    'login.totpHint': ' (Enter the 6-digit code from your authenticator app.)',
+    'login.submit': 'Sign In',
+    'login.verifyAndLogin': 'Verify & Sign In',
+    'login.failed': 'Sign-in failed. Please try again.',
+    'notFound.title': 'Page Not Found',
+    'notFound.back': 'Back to Dashboard',
+
+    // Agent Console & Panel & Chat
+    'agent.title': 'Agent Console',
+    'agent.disabledTitle': 'Agent Broker Disabled',
+    'agent.disabledDesc': 'The server has not enabled Agent Broker capabilities.',
+    'agent.conversations.heading': 'Conversations',
+    'agent.conversations.emptyBindings': 'No available Terms. Connect a Term in Computers first.',
+    'agent.conversations.empty': 'No conversations yet.',
+    'agent.conversations.tableAria': 'Agent conversations',
+    'agent.conversations.col.name': 'Conversation',
+    'agent.conversations.col.term': 'Term',
+    'agent.conversations.col.status': 'Status',
+    'agent.conversations.col.actions': 'Actions',
+    'agent.conversations.saveNameAria': 'Save conversation name',
+    'agent.conversations.cancelNameAria': 'Cancel rename',
+    'agent.conversations.pendingBadgeAria': '{count} pending approvals',
+    'agent.conversations.openInTermAria': 'Open in terminal: {title}',
+    'agent.conversations.openInTermTitle': 'Open in terminal',
+    'agent.conversations.renameAria': 'Rename conversation: {title}',
+    'agent.conversations.renameTitle': 'Rename conversation',
+    'agent.conversations.deleteAria': 'Delete conversation: {title}',
+    'agent.conversations.deleteTitle': 'Delete conversation',
+    'agent.conversations.deleteDialogTitle': 'Delete Conversation?',
+    'agent.conversations.deleteDialogDesc': 'This permanently deletes {title} and its entire message history.',
+    'agent.conversations.deleteConfirm': 'Delete',
+    'agent.conversations.loadError': 'Unable to load Agent conversations. Please try again later.',
+    'agent.conversations.termNameError': 'Unable to load Term names; some details may be incomplete.',
+    'agent.conversations.termUnknown': 'Unknown Term',
+    'agent.conversations.defaultTitle': 'Session {id}',
+    'agent.status.running': 'Running',
+    'agent.status.attention': 'Attention',
+    'agent.status.stopped': 'Stopped',
+    'agent.readiness.unconfigured': 'Unconfigured',
+    'agent.readiness.deployment_required': 'Deploy Needed',
+    'agent.readiness.activating': 'Activating',
+    'agent.readiness.ready': 'Ready',
+    'agent.readiness.unavailable': 'Unavailable',
+    'agent.backend.connecting': 'Connecting',
+    'agent.backend.idle': 'Idle',
+    'agent.backend.busy': 'Busy',
+    'agent.backend.retry': 'Retrying',
+    'agent.backend.ready': 'Ready',
+    'agent.backend.readyPanel': 'Ready',
+    'agent.backend.unavailable': 'Unavailable',
+    'agent.backend.offline': 'Offline',
+    'agent.backend.context_lost': 'Context Lost',
+    'agent.backend.reconciling': 'Recovering',
+    'agent.backend.closed': 'Closed',
+    'agent.panel.toolsAria': 'Agent tools',
+    'agent.panel.dragAria': 'Drag Agent panel',
+    'agent.panel.newConversation': 'New Session',
+    'agent.panel.history': 'History',
+    'agent.panel.settingsAria': 'Agent Settings',
+    'agent.panel.settingsTitle': 'Agent Settings: adjust accessible panes',
+    'agent.panel.closeAria': 'Close Agent',
+    'agent.panel.writePolicy': 'Approval',
+    'agent.panel.writePolicyGroupAria': 'Write approval policy',
+    'agent.panel.policyManual': 'Manual',
+    'agent.panel.policyAuto': 'Auto',
+    'agent.panel.loading': 'Loading Agent…',
+    'agent.panel.deploymentRequiredTitle': 'Agent Deployment Required',
+    'agent.panel.deploymentRequiredDesc': 'Ask the administrator to configure the runtime and model provider.',
+    'agent.panel.checkDeployment': 'Check Status',
+    'agent.panel.activatingTitle': 'Activating Agent',
+    'agent.panel.activatingDesc': 'Connecting to runtime; this will refresh automatically.',
+    'agent.panel.refreshStatus': 'Refresh Status',
+    'agent.panel.reEnableTitle': 'Re-enable Agent',
+    'agent.panel.reEnableDesc': 'Provider disclosure configuration has been updated.',
+    'agent.panel.reEnable': 'Re-enable',
+    'agent.panel.unavailableTitle': 'Agent Unavailable',
+    'agent.panel.recoveringTitle': 'Recovering Agent',
+    'agent.panel.recoveringDesc': 'Runtime is still connecting; this will refresh automatically.',
+    'agent.panel.reactivate': 'Reactivate',
+    'agent.panel.confirmAutoAria': 'Confirm Auto Approval',
+    'agent.panel.confirmAutoDesc': 'In Auto mode, Agent writes to authorized panes execute immediately without prompts.',
+    'agent.panel.confirmAutoBtn': 'Confirm Auto',
+    'agent.panel.historyCount': '{count} sessions',
+    'agent.panel.historyEmpty': 'No sessions yet',
+    'agent.panel.untitledConversation': 'Untitled Session',
+    'agent.panel.statusOpen': 'Active',
+    'agent.panel.emptyPrompt': 'Select a session or click "New Session".',
+    'agent.panel.defaultChatTitle': 'Agent Chat',
+    'agent.panel.savePanesError': 'Unable to save pane permissions.',
+    'agent.panel.writePolicyError': 'Unable to update write approval policy.',
+    'agent.chat.backOverview': 'Agent Console',
+    'agent.chat.policyGroupAria': 'Session write approval policy',
+    'agent.chat.policyManual': 'Manual',
+    'agent.chat.policyAuto': 'Auto',
+    'agent.chat.canceling': 'Canceling…',
+    'agent.chat.cancelRun': 'Cancel Run',
+    'agent.chat.deleteConfirmAria': 'Confirm Delete Session',
+    'agent.chat.deleteConfirmDesc': 'This permanently deletes the session and its events.',
+    'agent.chat.policyConfirmAria': 'Confirm Session Auto Approval',
+    'agent.chat.policyConfirmDesc': 'In this session, Agent writes to authorized panes will execute immediately without prompts.',
+    'agent.chat.approvalPromptAria': 'Pending approvals',
+    'agent.chat.notFoundBanner': 'This session no longer exists and cannot be connected.',
+    'agent.chat.revokedBanner': 'Agent Binding was revoked and cannot be connected.',
+    'agent.chat.historyUnavailable': 'Historical message content unavailable',
+    'agent.chat.emptyPrompt': 'Send a message to start chatting with the Agent.',
+    'agent.chat.roleSystem': 'System',
+    'agent.chat.systemContext': 'System Context',
+    'agent.chat.systemUnavailable': 'System context unavailable',
+    'agent.chat.roleUser': 'You',
+    'agent.chat.thinking': 'Thinking',
+    'agent.chat.thinkingStreaming': 'Thinking…',
+    'agent.chat.toolCall': 'Tool Call',
+    'agent.chat.toolInput': 'Input',
+    'agent.chat.toolDefaultsOmitted': 'Defaults omitted: {items}',
+    'agent.chat.toolOutput': 'Output',
+    'agent.chat.toolError': 'Error',
+    'agent.chat.stepStart': 'Step',
+    'agent.chat.toolStatus.completed': 'Done',
+    'agent.chat.toolStatus.failed': 'Failed',
+    'agent.chat.toolStatus.failedExec': 'Failed',
+    'agent.chat.toolStatus.running': 'Running',
+    'agent.chat.toolStatus.pending': 'Pending',
+    'agent.chat.collapseCode': 'Collapse diff ▴',
+    'agent.chat.collapseOutput': 'Collapse output ▴',
+    'agent.chat.expandLines': 'Expand {folded} more lines ({total} total) ▾',
+    'agent.composer.inputAria': 'Message to Agent',
+    'agent.composer.sendAria': 'Send message',
+    'agent.composer.tooLong': 'Message exceeds maximum length ({max} bytes). Please shorten it.',
+    'agent.composer.unavailable': 'Backend runtime is not ready; cannot send messages right now.',
+    'agent.approval.state.pending': 'Pending',
+    'agent.approval.state.approved': 'Approved',
+    'agent.approval.state.denied': 'Rejected',
+    'agent.approval.state.expired': 'Expired',
+    'agent.approval.state.revoked': 'Undone',
+    'agent.approval.state.consumed': 'Executed',
+    'agent.approval.operation': 'Operation',
+    'agent.approval.hashPrefix': 'Digest #{hash}',
+    'agent.approval.expiresPrefix': 'Expires {expiry}',
+    'agent.approval.focusAction': 'Review in Panel',
+    'agent.approval.empty': 'No pending approvals',
+    'agent.approval.approve': 'Approve',
+    'agent.approval.deny': 'Reject',
+    'agent.approval.revoke': 'Undo',
+    'agent.approval.confirmTitle': 'Approve this request?',
+    'agent.approval.confirmDesc1': 'Once approved, the Agent will immediately execute ',
+    'agent.approval.confirmDesc2': '. This action cannot be undone.',
+    'agent.approval.unknownOp': 'unknown operation',
+    'agent.approval.criticalWarning': '⚠️ Critical Risk Warning: This operation is destructive. Please confirm carefully!',
+    'agent.approval.criticalAck': 'I understand this operation is destructive and confirm execution',
+    'agent.approval.confirmApprove': 'Confirm Approve',
+    'agent.risk.level4': 'Critical',
+    'agent.risk.level3': 'High Risk',
+    'agent.risk.level2': 'Med Risk',
+    'agent.risk.level1': 'Low Risk',
+    'agent.setup.title': 'Configure Term Agent',
+    'agent.setup.helpLabel': 'About Term Agent',
+    'agent.setup.enable': 'Enable Agent',
+    'agent.setup.settingUp': 'Configuring…',
+    'agent.panes.defaultLegend': 'Panes accessible to Agent',
+    'agent.panes.helpLabel': 'About Pane Permissions',
+    'agent.panes.helpText': 'A pane is a split terminal view (% ID). The Agent can only read checked panes; writes still require approval.',
+    'agent.panes.selectAll': 'Select All',
+    'agent.panes.clear': 'Clear',
+    'agent.panes.selectedCount': 'Selected {selected}/{total}',
+    'agent.panes.empty': 'No panes available. Connect the terminal and refresh.',
+  },
+}
+
+export const locale: DeepReadonly<Ref<Locale>> = readonly(currentLocale)
+
+export function setLocale(next: Locale): void {
+  currentLocale.value = next
+  try {
+    if (typeof window !== 'undefined' && typeof window.localStorage?.setItem === 'function') {
+      window.localStorage.setItem(LOCALE_STORAGE_KEY, next)
+    }
+  } catch {
+    // Ignore storage access errors.
+  }
+}
+
+export function toggleLocale(): Locale {
+  const next: Locale = currentLocale.value === 'zh' ? 'en' : 'zh'
+  setLocale(next)
+  return next
+}
+
+export function t(key: string, params?: Record<string, string | number>): string {
+  const dict = messages[currentLocale.value] ?? messages.zh
+  const template = dict[key] ?? messages.zh[key] ?? key
+  if (!params) return template
+  return template.replace(/\{(\w+)\}/g, (_, token: string) => {
+    const val = params[token]
+    return val === undefined ? `{${token}}` : String(val)
+  })
+}
+
+export function useI18n() {
+  const stored = readStoredLocale()
+  if (stored !== null && currentLocale.value !== stored) {
+    currentLocale.value = stored
+  }
+  return {
+    locale,
+    setLocale,
+    toggleLocale,
+    t,
+  }
+}
diff --git a/packages/client-ui/src/index.ts b/packages/client-ui/src/index.ts
index fd45b10f..ff3a96a2 100644
--- a/packages/client-ui/src/index.ts
+++ b/packages/client-ui/src/index.ts
@@ -15,6 +15,7 @@ export { default as AgentSetupForm } from './components/agent/AgentSetupForm.vue
 export { default as TerminalAgentPanel } from './components/agent/TerminalAgentPanel.vue'
 export { default as TerminalAgentToggle } from './components/agent/TerminalAgentToggle.vue'
 export * from './theme/theme'
+export * from './i18n'
 export * from './composables/useSession'
 export * from './composables/useBottomToast'
 export * from './composables/useTerminalSession'
diff --git a/packages/client-ui/src/styles/app.css b/packages/client-ui/src/styles/app.css
index 024122e5..4626f4de 100644
--- a/packages/client-ui/src/styles/app.css
+++ b/packages/client-ui/src/styles/app.css
@@ -49,6 +49,7 @@
   input[type='checkbox'], input[type='radio'] { width: auto; min-height: 0; padding: 0; background: transparent; accent-color: var(--color-accent); }
   .primary-button, .text-button { min-height: 2.75rem; border: 1px solid var(--color-accent); border-radius: var(--radius-md); padding: var(--space-2) var(--space-4); background: var(--color-accent); color: var(--color-accent-contrast); font-weight: 700; white-space: nowrap; flex-shrink: 0; }
   .text-button { margin-inline-start: var(--space-2); min-height: 2.25rem; background: transparent; color: var(--color-text-primary); }
+  .locale-toggle-button { margin-inline-start: 0; height: 2.25rem; min-height: 2.25rem; padding: 0 0.65rem; flex-shrink: 0; white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; border-radius: var(--radius-md); border: 1px solid var(--color-border); background: var(--color-elevated); color: var(--color-text-secondary); font-size: 0.78rem; font-weight: 700; line-height: 1; }
   .logout-button { margin-inline-start: 0; width: 2.25rem; height: 2.25rem; min-width: 2.25rem; min-height: 2.25rem; padding: 0; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-md); border: 1px solid var(--color-border); background: var(--color-elevated); color: var(--color-text-secondary); }
   .primary-button, .text-button, .icon-button, .theme-option, .titlebar-button, .terminal-back, .mobile-keybar button { transition: background 130ms ease, border-color 130ms ease, color 130ms ease, filter 130ms ease, transform 80ms ease; }
   .primary-button:hover:not(:disabled), .danger-button:hover:not(:disabled) { filter: brightness(1.08); }
diff --git a/packages/client-ui/src/test/setup.ts b/packages/client-ui/src/test/setup.ts
index fbc0b13f..8230c217 100644
--- a/packages/client-ui/src/test/setup.ts
+++ b/packages/client-ui/src/test/setup.ts
@@ -1,4 +1,31 @@
 import { afterEach, vi } from 'vitest'
+import { setLocale } from '../i18n'
+
+if (typeof window !== 'undefined' && typeof window.localStorage?.getItem !== 'function') {
+  const store = new Map<string, string>()
+  const memoryStorage: Storage = {
+    get length() {
+      return store.size
+    },
+    clear() {
+      store.clear()
+    },
+    getItem(key: string) {
+      return store.get(key) ?? null
+    },
+    key(index: number) {
+      return [...store.keys()][index] ?? null
+    },
+    removeItem(key: string) {
+      store.delete(key)
+    },
+    setItem(key: string, value: string) {
+      store.set(key, String(value))
+    },
+  }
+  Object.defineProperty(window, 'localStorage', { value: memoryStorage, configurable: true, writable: true })
+  Object.defineProperty(globalThis, 'localStorage', { value: memoryStorage, configurable: true, writable: true })
+}
 
 class ResizeObserverStub {
   observe() {}
@@ -28,6 +55,12 @@ Object.defineProperty(globalThis, 'matchMedia', {
 })
 
 afterEach(() => {
+  setLocale('zh')
+  try {
+    if (typeof window.localStorage?.removeItem === 'function') {
+      window.localStorage.removeItem('termflow_lang')
+    }
+  } catch {}
   document.body.innerHTML = ''
   vi.restoreAllMocks()
   vi.unstubAllGlobals()
diff --git a/packages/client-ui/src/utils/risk.ts b/packages/client-ui/src/utils/risk.ts
index 97765f7a..cc14ab6f 100644
--- a/packages/client-ui/src/utils/risk.ts
+++ b/packages/client-ui/src/utils/risk.ts
@@ -1,3 +1,5 @@
+import { t } from '../i18n'
+
 export type RiskLevel = 1 | 2 | 3 | 4
 
 export interface RiskAssessment {
@@ -59,7 +61,7 @@ export function assessRisk(params: {
     if (CRITICAL_PATTERNS.some((p) => p.test(text)) || /(-r|--recursive|\*|\/)/i.test(text)) {
       return {
         level: 4,
-        label: '极高危',
+        label: t('agent.risk.level4'),
         badgeClass: 'agent-risk-badge--level-4',
         isCritical: true,
       }
@@ -70,7 +72,7 @@ export function assessRisk(params: {
     if (pattern.test(text)) {
       return {
         level: 4,
-        label: '极高危',
+        label: t('agent.risk.level4'),
         badgeClass: 'agent-risk-badge--level-4',
         isCritical: true,
       }
@@ -81,7 +83,7 @@ export function assessRisk(params: {
     if (pattern.test(text)) {
       return {
         level: 3,
-        label: '高风险',
+        label: t('agent.risk.level3'),
         badgeClass: 'agent-risk-badge--level-3',
         isCritical: false,
       }
@@ -93,7 +95,7 @@ export function assessRisk(params: {
     if (!/\b(rm|write|edit|delete|touch|mkdir|chmod|kill|git\s+commit|git\s+push)\b/i.test(text)) {
       return {
         level: 1,
-        label: '低风险',
+        label: t('agent.risk.level1'),
         badgeClass: 'agent-risk-badge--level-1',
         isCritical: false,
       }
@@ -102,7 +104,7 @@ export function assessRisk(params: {
 
   return {
     level: 2,
-    label: '中风险',
+    label: t('agent.risk.level2'),
     badgeClass: 'agent-risk-badge--level-2',
     isCritical: false,
   }
diff --git a/packages/client-ui/src/utils/time.ts b/packages/client-ui/src/utils/time.ts
index 18d9476c..07d55025 100644
--- a/packages/client-ui/src/utils/time.ts
+++ b/packages/client-ui/src/utils/time.ts
@@ -1,4 +1,6 @@
-const localTimestampFormatter = new Intl.DateTimeFormat('zh-CN', {
+import { locale } from '../i18n'
+
+const zhTimestampFormatter = new Intl.DateTimeFormat('zh-CN', {
   year: 'numeric',
   month: 'long',
   day: 'numeric',
@@ -7,6 +9,16 @@ const localTimestampFormatter = new Intl.DateTimeFormat('zh-CN', {
   hourCycle: 'h23',
 })
 
+const enTimestampFormatter = new Intl.DateTimeFormat('en-US', {
+  year: 'numeric',
+  month: 'short',
+  day: 'numeric',
+  hour: '2-digit',
+  minute: '2-digit',
+  hourCycle: 'h23',
+})
+
 export function formatBRecordedTime(value: string) {
-  return localTimestampFormatter.format(new Date(value))
+  const formatter = locale.value === 'en' ? enTimestampFormatter : zhTimestampFormatter
+  return formatter.format(new Date(value))
 }
diff --git a/packages/client-ui/src/views/AgentChatView.vue b/packages/client-ui/src/views/AgentChatView.vue
index 7e682132..35212351 100644
--- a/packages/client-ui/src/views/AgentChatView.vue
+++ b/packages/client-ui/src/views/AgentChatView.vue
@@ -2,11 +2,11 @@
   <div class="page agent-chat-view">
     <template v-if="!agentBrokerEnabled">
       <header class="page-heading">
-        <div><p class="eyebrow">Agent</p><h1>Agent 控制台</h1></div>
+        <div><p class="eyebrow">Agent</p><h1>{{ t('agent.title') }}</h1></div>
       </header>
       <section class="agent-placeholder" data-agent-disabled>
-        <h2>Agent Broker 未启用</h2>
-        <p>服务器未开启 Agent Broker 能力，无法使用 Agent 会话。</p>
+        <h2>{{ t('agent.disabledTitle') }}</h2>
+        <p>{{ t('agent.disabledDesc') }}</p>
       </section>
     </template>
 
@@ -37,7 +37,9 @@ import { computed } from 'vue'
 import { useRoute } from 'vue-router'
 import AgentChatSession from '../components/agent/AgentChatSession.vue'
 import { useAgentBroker } from '../composables/useAgentBroker'
+import { useI18n } from '../i18n'
 
+const { t } = useI18n()
 const route = useRoute()
 const conversationId = computed(() => String(route.params.conversationId))
 
diff --git a/packages/client-ui/src/views/AgentView.vue b/packages/client-ui/src/views/AgentView.vue
index cf9c658f..dddfea5e 100644
--- a/packages/client-ui/src/views/AgentView.vue
+++ b/packages/client-ui/src/views/AgentView.vue
@@ -3,13 +3,13 @@
     <header class="page-heading">
       <div>
         <p class="eyebrow">Agent</p>
-        <h1 id="agent-title">Agent 控制台</h1>
+        <h1 id="agent-title">{{ t('agent.title') }}</h1>
       </div>
     </header>
 
     <section v-if="!agentBrokerEnabled" class="agent-placeholder" data-agent-disabled>
-      <h2>Agent Broker 未启用</h2>
-      <p>服务器未开启 Agent Broker 能力，无法使用 Agent 会话。</p>
+      <h2>{{ t('agent.disabledTitle') }}</h2>
+      <p>{{ t('agent.disabledDesc') }}</p>
     </section>
 
     <template v-else>
@@ -21,24 +21,24 @@
         <div class="settings-panel-heading">
           <div>
             <p class="eyebrow">Conversations</p>
-            <h2 id="agent-conversations-heading">会话记录</h2>
+            <h2 id="agent-conversations-heading">{{ t('agent.conversations.heading') }}</h2>
           </div>
           <span class="status-chip" data-agent-conversation-count>{{ conversationRows.length }}</span>
         </div>
 
-        <p v-if="directoryLoading || conversations.loading.value" class="agent-conversation-panel__state" data-agent-conversations-loading>加载中…</p>
+        <p v-if="directoryLoading || conversations.loading.value" class="agent-conversation-panel__state" data-agent-conversations-loading>{{ t('common.loading') }}</p>
         <p v-else-if="bindings.length === 0" class="agent-conversation-panel__state" data-agent-bindings-empty>
-          暂无可用 Term，请先在电脑管理中连接一个 Term。
+          {{ t('agent.conversations.emptyBindings') }}
         </p>
         <p v-else-if="conversationRows.length === 0" class="agent-conversation-panel__state" data-agent-conversations-empty>
-          暂无会话记录。
+          {{ t('agent.conversations.empty') }}
         </p>
-        <div v-else class="agent-conversation-table" role="table" aria-label="Agent 会话记录" data-agent-conversation-table>
+        <div v-else class="agent-conversation-table" role="table" :aria-label="t('agent.conversations.tableAria')" data-agent-conversation-table>
           <div class="agent-conversation-table__head" role="row">
-            <span role="columnheader">会话名称</span>
-            <span role="columnheader">Term</span>
-            <span role="columnheader">工作状态</span>
-            <span role="columnheader">操作</span>
+            <span role="columnheader">{{ t('agent.conversations.col.name') }}</span>
+            <span role="columnheader">{{ t('agent.conversations.col.term') }}</span>
+            <span role="columnheader">{{ t('agent.conversations.col.status') }}</span>
+            <span role="columnheader">{{ t('agent.conversations.col.actions') }}</span>
           </div>
           <article
             v-for="conversation in conversationRows"
@@ -47,9 +47,9 @@
             role="row"
             :data-agent-conversation-id="conversation.conversation_id"
           >
-            <div role="cell" data-label="会话名称" class="agent-conversation-table__name">
+            <div role="cell" :data-label="t('agent.conversations.col.name')" class="agent-conversation-table__name">
               <form v-if="editingConversationId === conversation.conversation_id" class="agent-rename-form" @submit.prevent="saveRename(conversation.conversation_id)">
-                <label class="sr-only" :for="`agent-rename-${conversation.conversation_id}`">会话名称</label>
+                <label class="sr-only" :for="`agent-rename-${conversation.conversation_id}`">{{ t('agent.conversations.col.name') }}</label>
                 <input
                   :id="`agent-rename-${conversation.conversation_id}`"
                   v-model="renameDraft"
@@ -57,10 +57,10 @@
                   data-agent-rename-input
                   @keydown.esc.prevent="cancelRename"
                 />
-                <button class="icon-button icon-only" type="submit" data-action="save-conversation-name" aria-label="保存会话名称" title="保存会话名称">
+                <button class="icon-button icon-only" type="submit" data-action="save-conversation-name" :aria-label="t('agent.conversations.saveNameAria')" :title="t('agent.conversations.saveNameAria')">
                   <Check :size="17" aria-hidden="true" />
                 </button>
-                <button class="icon-button icon-only" type="button" data-action="cancel-conversation-name" aria-label="取消重命名" title="取消重命名" @click="cancelRename">
+                <button class="icon-button icon-only" type="button" data-action="cancel-conversation-name" :aria-label="t('agent.conversations.cancelNameAria')" :title="t('agent.conversations.cancelNameAria')" @click="cancelRename">
                   <X :size="17" aria-hidden="true" />
                 </button>
               </form>
@@ -73,27 +73,27 @@
                 <span>{{ conversationTitle(conversation) }}</span>
               </RouterLink>
             </div>
-            <div role="cell" data-label="Term" class="agent-conversation-table__term">
+            <div role="cell" :data-label="t('agent.conversations.col.term')" class="agent-conversation-table__term">
               {{ termName(bindingTermId(conversation.binding_id)) }}
             </div>
-            <div role="cell" data-label="工作状态" class="agent-conversation-table__status">
+            <div role="cell" :data-label="t('agent.conversations.col.status')" class="agent-conversation-table__status">
               <span class="agent-status-tag" :data-status="conversationStatus(conversation.status).tone">
                 {{ conversationStatus(conversation.status).label }}
               </span>
               <span
                 v-if="conversations.pendingCount(conversation.conversation_id) > 0"
                 class="agent-pending-badge"
-                :aria-label="`${conversations.pendingCount(conversation.conversation_id)} 个待处理审批`"
+                :aria-label="t('agent.conversations.pendingBadgeAria', { count: conversations.pendingCount(conversation.conversation_id) })"
                 data-agent-pending-badge
               >{{ conversations.pendingCount(conversation.conversation_id) }}</span>
             </div>
-            <div role="cell" data-label="操作" class="agent-conversation-table__actions">
+            <div role="cell" :data-label="t('agent.conversations.col.actions')" class="agent-conversation-table__actions">
               <RouterLink
                 class="icon-button icon-only"
                 :to="`/terms/${bindingTermId(conversation.binding_id)}?agent=${conversation.conversation_id}`"
                 data-action="open-conversation"
-                :aria-label="`在终端中打开：${conversationTitle(conversation)}`"
-                title="在终端中打开"
+                :aria-label="t('agent.conversations.openInTermAria', { title: conversationTitle(conversation) })"
+                :title="t('agent.conversations.openInTermTitle')"
               >
                 <Terminal :size="17" aria-hidden="true" />
               </RouterLink>
@@ -101,8 +101,8 @@
                 class="icon-button icon-only"
                 type="button"
                 data-action="rename-conversation"
-                :aria-label="`重命名会话：${conversationTitle(conversation)}`"
-                title="重命名会话"
+                :aria-label="t('agent.conversations.renameAria', { title: conversationTitle(conversation) })"
+                :title="t('agent.conversations.renameTitle')"
                 @click="startRename(conversation)"
               >
                 <Pencil :size="17" aria-hidden="true" />
@@ -111,8 +111,8 @@
                 class="icon-button icon-only destructive"
                 type="button"
                 data-action="delete-conversation"
-                :aria-label="`删除会话：${conversationTitle(conversation)}`"
-                title="删除会话"
+                :aria-label="t('agent.conversations.deleteAria', { title: conversationTitle(conversation) })"
+                :title="t('agent.conversations.deleteTitle')"
                 @click="requestDelete(conversation.conversation_id)"
               >
                 <Trash2 :size="17" aria-hidden="true" />
@@ -134,13 +134,13 @@
         data-agent-delete-dialog
         @keydown="trapFocus"
       >
-        <h2 id="agent-delete-confirm-title">删除该会话？</h2>
+        <h2 id="agent-delete-confirm-title">{{ t('agent.conversations.deleteDialogTitle') }}</h2>
         <p id="agent-delete-confirm-description">
-          将删除会话 <strong>{{ deleteTargetTitle }}</strong> 及其全部消息历史，此操作不可撤销。
+          {{ t('agent.conversations.deleteDialogDesc', { title: deleteTargetTitle }) }}
         </p>
         <div class="dialog-actions">
-          <button ref="cancelButton" class="text-button" type="button" data-action="delete-cancel" @click="closeDeleteDialog">取消</button>
-          <button class="danger-button" type="button" data-action="delete-confirm" @click="confirmDelete">确认删除</button>
+          <button ref="cancelButton" class="text-button" type="button" data-action="delete-cancel" @click="closeDeleteDialog">{{ t('common.cancel') }}</button>
+          <button class="danger-button" type="button" data-action="delete-confirm" @click="confirmDelete">{{ t('agent.conversations.deleteConfirm') }}</button>
         </div>
       </section>
     </div>
@@ -159,8 +159,10 @@ import { RouterLink } from 'vue-router'
 import { useAgentBroker } from '../composables/useAgentBroker'
 import { useAgentConversations } from '../composables/useAgentConversations'
 import { useBottomToast } from '../composables/useBottomToast'
+import { useI18n } from '../i18n'
 import { useClientRuntime } from '../runtime'
 
+const { t } = useI18n()
 const runtime = useClientRuntime()
 const toast = useBottomToast()
 const { agentBrokerEnabled } = useAgentBroker()
@@ -194,7 +196,7 @@ async function loadDirectory() {
   if (bindingResult.status === 'fulfilled') {
     bindings.value = bindingResult.value.bindings
   } else if (!isAborted(bindingResult.reason)) {
-    directoryError.value = '无法加载 Agent 会话数据，请稍后重试。'
+    directoryError.value = t('agent.conversations.loadError')
     toast.show({ text: directoryError.value, tone: 'error' })
   }
   if (computerResult.status === 'fulfilled') {
@@ -204,7 +206,7 @@ async function loadDirectory() {
     }
     termNames.value = names
   } else if (!isAborted(computerResult.reason) && directoryError.value === null) {
-    directoryError.value = '无法加载 Term 名称，部分会话信息可能不完整。'
+    directoryError.value = t('agent.conversations.termNameError')
   }
   directoryLoading.value = false
 }
@@ -214,22 +216,22 @@ function bindingTermId(bindingId: string): string {
 }
 
 function termName(termId: string): string {
-  return termNames.value.get(termId) ?? (termId === '' ? 'Term 未知' : `Term · ${termId.slice(0, 8)}`)
+  return termNames.value.get(termId) ?? (termId === '' ? t('agent.conversations.termUnknown') : `Term · ${termId.slice(0, 8)}`)
 }
 
 function conversationTitle(conversation: AgentConversationResponse): string {
-  return conversation.title?.trim() || `会话 ${conversation.conversation_id.slice(0, 8)}`
+  return conversation.title?.trim() || t('agent.conversations.defaultTitle', { id: conversation.conversation_id.slice(0, 8) })
 }
 
 function conversationStatus(status: string): { label: string, tone: 'running' | 'stopped' | 'attention' } {
   const normalized = status.toLowerCase()
   if (['active', 'open', 'running', 'processing', 'queued'].includes(normalized)) {
-    return { label: '运行中', tone: 'running' }
+    return { label: t('agent.status.running'), tone: 'running' }
   }
   if (['failed', 'error', 'degraded'].includes(normalized)) {
-    return { label: '需要注意', tone: 'attention' }
+    return { label: t('agent.status.attention'), tone: 'attention' }
   }
-  return { label: '已停止', tone: 'stopped' }
+  return { label: t('agent.status.stopped'), tone: 'stopped' }
 }
 
 const editingConversationId = ref<string | null>(null)
diff --git a/packages/client-ui/src/views/ComputersView.vue b/packages/client-ui/src/views/ComputersView.vue
index e4fea12c..bc6338d1 100644
--- a/packages/client-ui/src/views/ComputersView.vue
+++ b/packages/client-ui/src/views/ComputersView.vue
@@ -1,8 +1,8 @@
 <template>
   <section class="computers-view" aria-labelledby="computers-title">
-    <header class="page-heading"><div><p class="eyebrow">设备与注册</p><h1 id="computers-title">电脑管理</h1></div><button class="primary-button" type="button" @click="showEnrollment = true">添加电脑</button></header>
+    <header class="page-heading"><div><p class="eyebrow">{{ t('computers.eyebrow') }}</p><h1 id="computers-title">{{ t('computers.title') }}</h1></div><button class="primary-button" type="button" @click="showEnrollment = true">{{ t('computers.add') }}</button></header>
     <p v-if="message" role="alert" class="form-error">{{ message }}</p>
-    <p v-if="loading" class="muted">正在读取 Computers…</p>
+    <p v-if="loading" class="muted">{{ t('computers.loading') }}</p>
     <ComputerTable v-else :computers="computers" @remove="requestRemove" />
     <EnrollmentDialog v-if="showEnrollment" @added="onComputerAdded" @closed="showEnrollment = false" />
     <DeleteComputerDialog
@@ -23,10 +23,12 @@ import { ApiError } from '@termflow/client-core'
 import ComputerTable from '../components/computers/ComputerTable.vue'
 import EnrollmentDialog from '../components/computers/EnrollmentDialog.vue'
 import DeleteComputerDialog from '../components/computers/DeleteComputerDialog.vue'
+import { useI18n } from '../i18n'
 import { useClientRuntime } from '../runtime'
 import { useBottomToast } from '../composables/useBottomToast'
 import type { ComputerSummary } from '../types'
 
+const { t } = useI18n()
 const runtime = useClientRuntime()
 const toast = useBottomToast()
 const computers = ref<ComputerSummary[]>([])
@@ -41,7 +43,7 @@ const controller = new AbortController()
 async function loadComputers() {
   loading.value = true
   try { computers.value = (await runtime.api.computers.list(controller.signal)).computers }
-  catch (error) { if (!(error instanceof ApiError) || error.kind !== 'aborted') message.value = error instanceof ApiError ? error.message : '无法加载 Computers。' }
+  catch (error) { if (!(error instanceof ApiError) || error.kind !== 'aborted') message.value = error instanceof ApiError ? error.message : t('computers.loadError') }
   finally { loading.value = false }
 }
 function requestRemove(computer: ComputerSummary) {
@@ -67,9 +69,9 @@ async function confirmRemove(installationId: string) {
       return
     }
     selectedForDeletion.value = null
-    toast.show({ text: '已删除', tone: 'success' })
+    toast.show({ text: t('computers.deletedToast'), tone: 'success' })
   } catch (error) {
-    deleteError.value = error instanceof ApiError ? error.message : '无法删除电脑。'
+    deleteError.value = error instanceof ApiError ? error.message : t('computers.deleteError')
   }
   finally { deletingId.value = null }
 }
@@ -77,7 +79,7 @@ async function onComputerAdded() {
   showEnrollment.value = false
   message.value = ''
   await loadComputers()
-  if (!message.value) toast.show({ text: '已添加', tone: 'success' })
+  if (!message.value) toast.show({ text: t('computers.addedToast'), tone: 'success' })
 }
 onMounted(() => { void loadComputers() })
 onBeforeUnmount(() => {
diff --git a/packages/client-ui/src/views/DashboardView.vue b/packages/client-ui/src/views/DashboardView.vue
index a84fc308..e53084fe 100644
--- a/packages/client-ui/src/views/DashboardView.vue
+++ b/packages/client-ui/src/views/DashboardView.vue
@@ -1,14 +1,14 @@
 <template>
   <section class="dashboard-view" aria-labelledby="dashboard-title">
-    <header class="page-heading"><div><p class="eyebrow">实时状态</p><h1 id="dashboard-title">控制中心</h1></div><div class="page-heading-actions"><button class="text-button" type="button" @click="refresh">刷新</button></div></header>
+    <header class="page-heading"><div><p class="eyebrow">{{ t('dashboard.eyebrow') }}</p><h1 id="dashboard-title">{{ t('dashboard.title') }}</h1></div><div class="page-heading-actions"><button class="text-button" type="button" @click="refresh">{{ t('dashboard.refresh') }}</button></div></header>
     <p v-if="message" role="alert" class="form-error">{{ message }}</p>
-    <p v-if="loading && !snapshot" class="muted" aria-live="polite">正在读取状态…</p>
+    <p v-if="loading && !snapshot" class="muted" aria-live="polite">{{ t('dashboard.loading') }}</p>
     <template v-if="snapshot">
-      <div class="metrics-grid" aria-label="关键指标">
-        <MetricCard label="在线 Terms" :value="snapshot.metrics.online_terms" :detail="`共 ${snapshot.metrics.total_terms} Terms`" :help="`当前在线并可远程控制的 Term，共 ${snapshot.metrics.total_terms} 个 Term。`" />
-        <MetricCard label="活动 Panes" :value="snapshot.metrics.active_panes" help="在线 Term 中当前处于活动状态的 Pane 数量。" />
-        <MetricCard label="24 小时交互" :value="snapshot.metrics.interactions_24h" help="过去 24 小时内由控制节点记录的交互次数。" />
-        <MetricCard label="Computers" :value="snapshot.metrics.computers" :help="`已注册到当前控制节点的 Computer 数量，其中 ${onlineComputerCount} 台在线。`" />
+      <div class="metrics-grid" :aria-label="t('dashboard.metricsAria')">
+        <MetricCard :label="t('dashboard.metric.onlineTerms')" :value="snapshot.metrics.online_terms" :detail="t('dashboard.metric.totalTerms', { count: snapshot.metrics.total_terms })" :help="t('dashboard.metric.onlineTermsHelp', { count: snapshot.metrics.total_terms })" />
+        <MetricCard :label="t('dashboard.metric.activePanes')" :value="snapshot.metrics.active_panes" :help="t('dashboard.metric.activePanesHelp')" />
+        <MetricCard :label="t('dashboard.metric.interactions24h')" :value="snapshot.metrics.interactions_24h" :help="t('dashboard.metric.interactions24hHelp')" />
+        <MetricCard :label="t('dashboard.metric.computers')" :value="snapshot.metrics.computers" :help="t('dashboard.metric.computersHelp', { count: onlineComputerCount })" />
       </div>
       <div class="computer-grid"><ComputerCard v-for="computer in snapshot.computers" :key="computer.installation_id" :computer="computer" @request-delete="requestDelete" /></div>
     </template>
@@ -23,8 +23,10 @@ import ComputerCard from '../components/dashboard/ComputerCard.vue'
 import DeleteTermDialog from '../components/dashboard/DeleteTermDialog.vue'
 import MetricCard from '../components/dashboard/MetricCard.vue'
 import { useDashboard } from '../composables/useDashboard'
+import { useI18n } from '../i18n'
 import { useClientRuntime } from '../runtime'
 import type { TermSummary } from '../types'
+const { t } = useI18n()
 const { snapshot, loading, message, refresh } = useDashboard()
 const runtime = useClientRuntime()
 const onlineComputerCount = computed(() => snapshot.value?.computers.filter((computer) => computer.online).length ?? 0)
@@ -46,9 +48,9 @@ function cancelDelete() {
 }
 
 function deleteMessage(error: unknown) {
-  if (error instanceof ApiError && error.code === 'instance_online') return 'Term 已重新上线，无法删除。'
-  if (error instanceof ApiError && error.code === 'instance_not_found') return 'Term 已不存在；列表已按服务器状态刷新。'
-  return error instanceof ApiError ? error.message : '无法删除 Term，请重试。'
+  if (error instanceof ApiError && error.code === 'instance_online') return t('dashboard.deleteError.online')
+  if (error instanceof ApiError && error.code === 'instance_not_found') return t('dashboard.deleteError.notFound')
+  return error instanceof ApiError ? error.message : t('dashboard.deleteError.generic')
 }
 
 async function confirmDelete(instanceId: string) {
diff --git a/packages/client-ui/src/views/LoginView.vue b/packages/client-ui/src/views/LoginView.vue
index 78d62834..7d4b8fa5 100644
--- a/packages/client-ui/src/views/LoginView.vue
+++ b/packages/client-ui/src/views/LoginView.vue
@@ -1,18 +1,18 @@
 <template>
   <section class="login-view">
     <div class="auth-card">
-      <h1>登录</h1>
+      <h1>{{ t('login.title') }}</h1>
       <form @submit.prevent="submit">
         <template v-if="challengeId === null">
-          <label for="admin-token">管理员令牌</label>
+          <label for="admin-token">{{ t('login.adminToken') }}</label>
           <input id="admin-token" v-model="adminToken" type="password" autocomplete="off" required autofocus />
         </template>
         <template v-else>
-          <label for="totp-code">双重验证码<span class="totp-hint">（请输入验证器应用当前显示的 6 位验证码。）</span></label>
+          <label for="totp-code">{{ t('login.totpCode') }}<span class="totp-hint">{{ t('login.totpHint') }}</span></label>
           <input id="totp-code" ref="totpInput" v-model="totpCode" type="text" inputmode="numeric" autocomplete="one-time-code" pattern="[0-9]{6}" maxlength="6" required />
         </template>
         <p v-if="message" role="alert" class="form-error">{{ message }}</p>
-        <div class="dialog-actions"><button class="primary-button" type="submit" :disabled="busy">{{ busy ? '正在验证…' : challengeId === null ? '登录' : '验证并登录' }}</button></div>
+        <div class="dialog-actions"><button class="primary-button" type="submit" :disabled="busy">{{ busy ? t('settings.totp.verifying') : challengeId === null ? t('login.submit') : t('login.verifyAndLogin') }}</button></div>
       </form>
     </div>
   </section>
@@ -23,7 +23,9 @@ import { nextTick, ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import { ApiError } from '@termflow/client-core'
 import { useSession } from '../composables/useSession'
+import { useI18n } from '../i18n'
 
+const { t } = useI18n()
 const adminToken = ref('')
 const totpCode = ref('')
 const challengeId = ref<string | null>(null)
@@ -55,7 +57,7 @@ async function submit() {
     const requested = typeof route.query.redirect === 'string' ? route.query.redirect : '/'
     await router.replace(requested.startsWith('/') && !requested.startsWith('//') ? requested : '/')
   } catch (error) {
-    message.value = error instanceof ApiError ? error.message : '登录失败，请重试。'
+    message.value = error instanceof ApiError ? error.message : t('login.failed')
   } finally {
     adminToken.value = ''
     totpCode.value = ''
diff --git a/packages/client-ui/src/views/NotFoundView.vue b/packages/client-ui/src/views/NotFoundView.vue
index 145a7582..0db8e53f 100644
--- a/packages/client-ui/src/views/NotFoundView.vue
+++ b/packages/client-ui/src/views/NotFoundView.vue
@@ -1,5 +1,7 @@
-<template><section><h1>页面不存在</h1><RouterLink to="/">返回控制中心</RouterLink></section></template>
+<template><section><h1>{{ t('notFound.title') }}</h1><RouterLink to="/">{{ t('notFound.back') }}</RouterLink></section></template>
 
 <script setup lang="ts">
 import { RouterLink } from 'vue-router'
+import { useI18n } from '../i18n'
+const { t } = useI18n()
 </script>
diff --git a/packages/client-ui/src/views/SettingsView.vue b/packages/client-ui/src/views/SettingsView.vue
index a81f9a7e..3f80117b 100644
--- a/packages/client-ui/src/views/SettingsView.vue
+++ b/packages/client-ui/src/views/SettingsView.vue
@@ -1,24 +1,26 @@
 <template>
   <div class="page settings-page">
-    <header class="page-heading"><div><p class="eyebrow">Settings</p><h1>设置</h1></div></header>
-    <section class="settings-panel" aria-labelledby="appearance-heading"><div class="settings-panel-heading"><div><p class="eyebrow">Appearance</p><h2 id="appearance-heading">界面主题</h2></div></div><ThemePicker /></section>
+    <header class="page-heading"><div><p class="eyebrow">Settings</p><h1>{{ t('settings.title') }}</h1></div></header>
+    <section class="settings-panel" aria-labelledby="appearance-heading"><div class="settings-panel-heading"><div><p class="eyebrow">Appearance</p><h2 id="appearance-heading">{{ t('settings.appearance.heading') }}</h2></div></div><ThemePicker /></section>
     <ServerConnectionPanel :issuer="issuer" />
     <template v-if="runtime.capabilities.manageSecurity">
       <TotpPanel @changed="totpEnabled = $event.enabled" />
       <AuthorizedClientsPanel v-if="runtime.capabilities.manageAuthorizedClients" :totp-enabled="totpEnabled" />
     </template>
-    <section v-else class="settings-panel" aria-labelledby="device-connection-heading"><div class="settings-panel-heading"><div><p class="eyebrow">Device Connection</p><h2 id="device-connection-heading">设备连接</h2></div></div><p>安全设置只能从已认证的网页管理端修改；本机只保存自己的设备凭据。</p></section>
+    <section v-else class="settings-panel" aria-labelledby="device-connection-heading"><div class="settings-panel-heading"><div><p class="eyebrow">Device Connection</p><h2 id="device-connection-heading">{{ t('settings.deviceConnection.heading') }}</h2></div></div><p>{{ t('settings.deviceConnection.note') }}</p></section>
   </div>
 </template>
 
 <script setup lang="ts">
 import { onMounted, ref } from 'vue'
+import { useI18n } from '../i18n'
 import { useClientRuntime } from '../runtime'
 import AuthorizedClientsPanel from '../components/settings/AuthorizedClientsPanel.vue'
 import ServerConnectionPanel from '../components/settings/ServerConnectionPanel.vue'
 import ThemePicker from '../components/settings/ThemePicker.vue'
 import TotpPanel from '../components/settings/TotpPanel.vue'
 
+const { t } = useI18n()
 const runtime = useClientRuntime()
 const issuer = ref(runtime.canonicalServerUrl)
 const totpEnabled = ref(false)
diff --git a/packages/client-ui/src/views/TerminalView.vue b/packages/client-ui/src/views/TerminalView.vue
index 3ba9800d..2d55605f 100644
--- a/packages/client-ui/src/views/TerminalView.vue
+++ b/packages/client-ui/src/views/TerminalView.vue
@@ -1,6 +1,6 @@
 <template>
   <section class="terminal-view" aria-labelledby="terminal-title">
-    <h1 id="terminal-title" class="sr-only">远程终端</h1>
+    <h1 id="terminal-title" class="sr-only">{{ t('terminal.srTitle') }}</h1>
     <TerminalTitlebar :title="termName" :computer-name="computerName" :status="connectionStatus" :display-menu-open="openMenu === 'display'" v-model:display-mode="displayMode" v-model:viewport-locked="viewportLocked" @update:display-menu-open="setMenuOpen('display', $event)" @rename="updateTermName">
       <TmuxActionMenu :bindings="bindings" :active-pane-id="activePane?.pane_id ?? null" :disabled="connectionStatus !== 'connected'" :open="openMenu === 'tmux'" @update:open="setMenuOpen('tmux', $event)" @action="runAction" @request-close="requestClose" />
       <TerminalAgentToggle v-if="agentBrokerEnabled" ref="agentToggle" :open="agentOpen" :pending-count="agentPendingCount" :readiness="agentReadiness" @toggle="toggleAgent" />
@@ -30,12 +30,14 @@ import MobileKeyBar from '../components/terminal/MobileKeyBar.vue'
 import ClosePaneDialog from '../components/terminal/ClosePaneDialog.vue'
 import { createOrientationViewState, orientationFor } from '../terminal/orientation'
 import { useSession } from '../composables/useSession'
+import { useI18n } from '../i18n'
 import { useClientRuntime } from '../runtime'
 import type { BindingSnapshot, PaneTopology, TerminalActionId } from '../types'
 import TerminalAgentPanel from '../components/agent/TerminalAgentPanel.vue'
 import TerminalAgentToggle from '../components/agent/TerminalAgentToggle.vue'
 import { isAgentConversationId } from '../router/terminalQuery'
 import { useAgentBroker } from '../composables/useAgentBroker'
+const { t } = useI18n()
 const route = useRoute()
 const router = useRouter()
 const runtime = useClientRuntime()
@@ -71,7 +73,7 @@ const displayMode = computed<DisplayMode>({
   },
 })
 const termName = ref(`Term · ${termId.value}`)
-const computerName = ref('Computer 未报告')
+const computerName = ref(t('terminal.unreportedComputer'))
 const connectionStatus = ref<TerminalConnectionStatus>('connecting')
 type DesktopMenu = 'display' | 'tmux'
 const openMenu = ref<DesktopMenu | null>(null)
@@ -79,7 +81,7 @@ const viewportLocked = ref(false)
 const renameError = ref('')
 const panes = ref<PaneTopology[]>([])
 const terminalCanvas = ref<InstanceType<typeof TerminalCanvas> | null>(null)
-const bindings = ref<BindingSnapshot>({ prefix: '未报告', bindings: [] })
+const bindings = ref<BindingSnapshot>({ prefix: t('terminal.unreportedPrefix'), bindings: [] })
 const modifiers = reactive(new MobileModifierController())
 const modifierResetKey = ref(0)
 const closePaneId = ref<string | null>(null)
@@ -97,7 +99,7 @@ async function updateTermName(name: string) {
   termName.value = name
   renameError.value = ''
   try { termName.value = (await runtime.api.terms.rename(termId.value, name, controller.signal)).name }
-  catch (error) { termName.value = previous; renameError.value = error instanceof ApiError ? error.message : '无法更新 Term 名称。' }
+  catch (error) { termName.value = previous; renameError.value = error instanceof ApiError ? error.message : t('terminal.renameError') }
 }
 function restoreOrientationView() {
   const saved = orientationViews[orientation.value].viewport
diff --git a/packages/client-ui/src/views/TotpActivationView.vue b/packages/client-ui/src/views/TotpActivationView.vue
index a6010950..0e96e55c 100644
--- a/packages/client-ui/src/views/TotpActivationView.vue
+++ b/packages/client-ui/src/views/TotpActivationView.vue
@@ -1,13 +1,13 @@
 <template>
   <div class="page settings-page totp-activation-view">
     <header class="page-heading totp-guide-heading">
-      <div class="totp-guide-heading-copy"><p class="eyebrow">Two Factor Authentication</p><h1>双重因素认证</h1></div>
-      <RouterLink class="secondary-button" to="/settings">返回设置</RouterLink>
+      <div class="totp-guide-heading-copy"><p class="eyebrow">Two Factor Authentication</p><h1>{{ t('settings.totp.heading') }}</h1></div>
+      <RouterLink class="secondary-button" to="/settings">{{ t('settings.totp.backToSettings') }}</RouterLink>
     </header>
-    <ol v-if="!loading && status.available" class="totp-guide-steps" aria-label="激活步骤">
+    <ol v-if="!loading && status.available" class="totp-guide-steps" :aria-label="t('settings.totp.stepsAria')">
       <li
         v-for="(step, index) in guideSteps"
-        :key="step"
+        :key="index"
         data-guide-step
         :data-state="guideStepState(index + 1)"
         :aria-current="guideStepState(index + 1) === 'current' ? 'step' : undefined"
@@ -17,17 +17,17 @@
       </li>
     </ol>
     <section class="settings-panel totp-guide-card" aria-live="polite">
-      <p v-if="loading" role="status">正在读取安全状态…</p>
-      <p v-else-if="!status.available" class="settings-warning" role="status">双重因素认证暂时不可用，请联系服务器管理员。</p>
+      <p v-if="loading" role="status">{{ t('settings.totp.loading') }}</p>
+      <p v-else-if="!status.available" class="settings-warning" role="status">{{ t('settings.totp.unavailable') }}</p>
       <template v-else>
         <header class="totp-wizard-card-heading">
           <h2 data-wizard-card-title>{{ wizardTitle }}</h2>
-          <span data-wizard-progress>{{ wizardComplete ? '设置完成' : `第 ${currentStep} 步，共 3 步` }}</span>
+          <span data-wizard-progress>{{ wizardComplete ? t('settings.totp.wizardComplete') : t('settings.totp.wizardProgress', { step: currentStep }) }}</span>
         </header>
         <template v-if="setup">
           <div data-totp-bind-layout class="totp-bind-layout">
             <div class="totp-bind-qr">
-              <ThemedQrCode :value="setup.provisioning_uri" alt="验证器设置二维码" />
+              <ThemedQrCode :value="setup.provisioning_uri" :alt="t('settings.totp.qrAlt')" />
               <SetupKeyPopover
                 :setup-key="setup.setup_key"
                 :copied="setupKeyCopied"
@@ -35,33 +35,33 @@
               />
             </div>
             <form data-action="confirm-totp-setup" class="inline-security-form totp-confirm-form" @submit.prevent="confirmSetup">
-              <label for="activation-confirm-code">验证器验证码</label>
+              <label for="activation-confirm-code">{{ t('settings.totp.confirmCodeLabel') }}</label>
               <input id="activation-confirm-code" v-model="confirmCode" name="setup-confirm-code" inputmode="numeric" autocomplete="one-time-code" pattern="[0-9]{6}" maxlength="6" required />
               <p v-if="message" class="form-error" role="alert">{{ message }}</p>
-              <button class="primary-button" type="submit" :disabled="busy">确认绑定</button>
+              <button class="primary-button" type="submit" :disabled="busy">{{ t('settings.totp.confirmBind') }}</button>
             </form>
           </div>
         </template>
         <template v-else-if="!status.configured || reconfiguring">
           <form data-action="begin-totp-setup" class="security-form" @submit.prevent="beginSetup">
-            <label for="activation-admin-token">管理员令牌</label>
+            <label for="activation-admin-token">{{ t('settings.totp.adminToken') }}</label>
             <input id="activation-admin-token" v-model="adminToken" name="setup-admin-token" type="password" autocomplete="off" required />
             <template v-if="status.configured">
-              <label for="activation-current-code">当前验证器验证码</label>
+              <label for="activation-current-code">{{ t('settings.totp.currentCodeLabel') }}</label>
               <input id="activation-current-code" v-model="currentCode" name="setup-current-code" inputmode="numeric" autocomplete="one-time-code" pattern="[0-9]{6}" maxlength="6" required />
             </template>
             <p v-if="message" class="form-error" role="alert">{{ message }}</p>
-            <button class="primary-button" type="submit" :disabled="busy">继续</button>
+            <button class="primary-button" type="submit" :disabled="busy">{{ t('common.continue') }}</button>
           </form>
         </template>
         <template v-else>
           <div data-configured-authenticator-heading class="configured-authenticator-heading">
-            <strong>验证器已绑定</strong>
-            <button data-action="reconfigure-totp" class="compact-secondary-button" type="button" @click="reconfiguring = true">重新配置</button>
+            <strong>{{ t('settings.totp.bound') }}</strong>
+            <button data-action="reconfigure-totp" class="compact-secondary-button" type="button" @click="reconfiguring = true">{{ t('settings.totp.reconfigure') }}</button>
           </div>
           <div class="security-setting-row">
             <TotpProtectionLabel />
-            <button ref="switchButton" class="toggle-switch" type="button" role="switch" :aria-checked="status.enabled" aria-label="启用双重认证登录" @click="dialogOpen = true"><span aria-hidden="true" /></button>
+            <button ref="switchButton" class="toggle-switch" type="button" role="switch" :aria-checked="status.enabled" :aria-label="t('settings.totp.protectionLabel')" @click="dialogOpen = true"><span aria-hidden="true" /></button>
           </div>
         </template>
       </template>
@@ -83,10 +83,12 @@ import ThemedQrCode from '../components/common/ThemedQrCode.vue'
 import SetupKeyPopover from '../components/settings/SetupKeyPopover.vue'
 import TotpProtectionLabel from '../components/settings/TotpProtectionLabel.vue'
 import TotpProtectionDialog from '../components/settings/TotpProtectionDialog.vue'
+import { useI18n } from '../i18n'
 import { useClientRuntime } from '../runtime'
 
+const { t } = useI18n()
 const runtime = useClientRuntime()
-const guideSteps = ['验证身份', '绑定验证器', '启用登录保护'] as const
+const guideSteps = computed(() => [t('settings.totp.step1'), t('settings.totp.step2'), t('settings.totp.step3')] as const)
 const status = reactive<TotpStatusResponse>({ configured: false, enabled: false, available: false })
 const loading = ref(true)
 const busy = ref(false)
@@ -107,9 +109,9 @@ const currentStep = computed<1 | 2 | 3>(() => {
 })
 const wizardComplete = computed(() => status.enabled && !reconfiguring.value && setup.value === null)
 const wizardTitle = computed(() => {
-  if (setup.value) return '绑定验证器'
-  if (status.configured && !reconfiguring.value) return status.enabled ? '双重认证已启用' : '启用登录保护'
-  return status.configured ? '重新配置验证器' : '验证管理员身份'
+  if (setup.value) return t('settings.totp.wizardTitle.bind')
+  if (status.configured && !reconfiguring.value) return status.enabled ? t('settings.totp.wizardTitle.enabled') : t('settings.totp.wizardTitle.enableProtection')
+  return status.configured ? t('settings.totp.wizardTitle.reconfigure') : t('settings.totp.wizardTitle.verifyAdmin')
 })
 
 function guideStepState(index: number) {
@@ -139,7 +141,7 @@ async function beginSetup() {
     })
     setupKeyCopied.value = false
   } catch {
-    message.value = '验证失败，请检查凭据后重试。'
+    message.value = t('settings.totp.verifyFailed')
   } finally {
     adminToken.value = ''
     currentCode.value = ''
@@ -157,7 +159,7 @@ async function confirmSetup() {
     setup.value = null
     setupKeyCopied.value = false
   } catch {
-    message.value = '验证码无效或设置已过期，请重试。'
+    message.value = t('settings.totp.codeInvalidOrExpired')
   } finally {
     confirmCode.value = ''
     busy.value = false