diff --git a/apps/clients/web/src/adapters/browserThemePreferences.test.ts b/apps/clients/web/src/adapters/browserThemePreferences.test.ts
index a99c5069..cf5707c5 100644
--- a/apps/clients/web/src/adapters/browserThemePreferences.test.ts
+++ b/apps/clients/web/src/adapters/browserThemePreferences.test.ts
@@ -1,14 +1,17 @@
 import { describe, expect, it, vi } from 'vitest'
-import { THEME_STORAGE_KEY } from '@termflow/client-ui'
+import { LOCALE_STORAGE_KEY, setLocale, THEME_STORAGE_KEY } from '@termflow/client-ui'
 import { createBrowserThemePreferences, createBrowserThemeTarget } from './browserThemePreferences'
 
 describe('browser theme adapters', () => {
-  it('persists only a validated theme identifier', () => {
+  it('persists only a validated theme identifier and wires locale preferences', () => {
     const storage = { getItem: vi.fn(() => 'cloud-cobalt'), setItem: vi.fn() }
     const preferences = createBrowserThemePreferences(storage)
     expect(preferences.load()).toBe('cloud-cobalt')
     preferences.save('midnight-indigo')
     expect(storage.setItem).toHaveBeenCalledWith(THEME_STORAGE_KEY, 'midnight-indigo')
+    setLocale('en')
+    expect(storage.setItem).toHaveBeenCalledWith(LOCALE_STORAGE_KEY, 'en')
+    setLocale('zh')
   })
 
   it('rejects unknown stored values and applies through the injected root element', () => {
diff --git a/apps/clients/web/src/adapters/browserThemePreferences.ts b/apps/clients/web/src/adapters/browserThemePreferences.ts
index f4171006..2ff2ef8f 100644
--- a/apps/clients/web/src/adapters/browserThemePreferences.ts
+++ b/apps/clients/web/src/adapters/browserThemePreferences.ts
@@ -1,6 +1,9 @@
 import {
+  configureLocalePreferences,
   isThemeId,
+  LOCALE_STORAGE_KEY,
   THEME_STORAGE_KEY,
+  type Locale,
   type ThemeId,
   type ThemePreferences,
   type ThemeTarget,
@@ -10,6 +13,15 @@ type ThemeStorage = Pick<Storage, 'getItem' | 'setItem'>
 type ThemeRoot = Pick<HTMLElement, 'dataset'>
 
 export function createBrowserThemePreferences(storage: ThemeStorage = globalThis.localStorage): ThemePreferences {
+  configureLocalePreferences({
+    load() {
+      const v = storage.getItem(LOCALE_STORAGE_KEY)
+      return v === 'en' || v === 'zh' ? v : null
+    },
+    save(loc: Locale) {
+      storage.setItem(LOCALE_STORAGE_KEY, loc)
+    },
+  })
   return {
     load() {
       const stored = storage.getItem(THEME_STORAGE_KEY)
diff --git a/docs/assets/demo_termflow.gif b/docs/assets/demo_termflow.gif
index e1b28f74..de80ebb5 100644
Binary files a/docs/assets/demo_termflow.gif and b/docs/assets/demo_termflow.gif differ
diff --git a/packages/client-core/src/http/apiError.ts b/packages/client-core/src/http/apiError.ts
index 97a56159..b465cffc 100644
--- a/packages/client-core/src/http/apiError.ts
+++ b/packages/client-core/src/http/apiError.ts
@@ -20,16 +20,20 @@ const safeMessagesEn: Record<ApiErrorKind, string> = {
   http_capability_denied: 'Client network capability configuration is invalid. Please update or reinstall TermFlow.',
 }
 
-function isEnglishLocale(): boolean {
-  try {
-    return typeof localStorage !== 'undefined' && typeof localStorage.getItem === 'function' && localStorage.getItem('termflow_lang') === 'en'
-  } catch {
-    return false
-  }
+export type ApiErrorLocale = 'zh' | 'en'
+
+let currentApiErrorLocale: ApiErrorLocale = 'zh'
+
+export function setApiErrorLocale(locale: ApiErrorLocale): void {
+  currentApiErrorLocale = locale
+}
+
+export function getApiErrorLocale(): ApiErrorLocale {
+  return currentApiErrorLocale
 }
 
 export function safeMessageFor(kind: ApiErrorKind): string {
-  return isEnglishLocale() ? safeMessagesEn[kind] : safeMessagesZh[kind]
+  return currentApiErrorLocale === 'en' ? safeMessagesEn[kind] : safeMessagesZh[kind]
 }
 
 export interface ApiErrorDetails {
diff --git a/packages/client-ui/src/components/agent/AgentChatSession.vue b/packages/client-ui/src/components/agent/AgentChatSession.vue
index 5a17d636..8b6a0503 100644
--- a/packages/client-ui/src/components/agent/AgentChatSession.vue
+++ b/packages/client-ui/src/components/agent/AgentChatSession.vue
@@ -226,7 +226,7 @@ const bindingLabel = computed(() => {
   const binding = detail.value?.binding
   return binding === undefined
     ? t('agent.conversations.defaultTitle', { id: props.conversationId.slice(0, 8) })
-    : `Binding ${binding.binding_id} · Term ${binding.term_id}`
+    : t('agent.chat.bindingLabel', { bindingId: binding.binding_id, termId: binding.term_id })
 })
 
 /**
diff --git a/packages/client-ui/src/components/computers/ComputerNameEditor.vue b/packages/client-ui/src/components/computers/ComputerNameEditor.vue
index c319ff3d..55962d9b 100644
--- a/packages/client-ui/src/components/computers/ComputerNameEditor.vue
+++ b/packages/client-ui/src/components/computers/ComputerNameEditor.vue
@@ -12,12 +12,12 @@
 </template>
 
 <script setup lang="ts">
-import { ref, watch } from 'vue'
-import { ApiError } from '@termflow/client-core'
+import { computed, ref, watch } from 'vue'
+import { ApiError, safeMessageFor, type ApiErrorKind } from '@termflow/client-core'
 import { useI18n } from '../../i18n'
 import { useClientRuntime } from '../../runtime'
 
-const { t } = useI18n()
+const { t, locale } = useI18n()
 const props = defineProps<{ computerId: string; displayName: string }>()
 const emit = defineEmits<{ updated: [name: string] }>()
 const runtime = useClientRuntime()
@@ -25,16 +25,21 @@ const editing = ref(false)
 const busy = ref(false)
 const draft = ref(props.displayName)
 const currentName = ref(props.displayName)
-const message = ref('')
+const errorState = ref<{ type: 'api'; kind: ApiErrorKind } | { type: 'key'; key: string } | null>(null)
+const message = computed(() => {
+  void locale.value
+  if (errorState.value === null) return ''
+  return errorState.value.type === 'api' ? safeMessageFor(errorState.value.kind) : t(errorState.value.key)
+})
 watch(() => props.displayName, (value) => { currentName.value = value; if (!editing.value) draft.value = value })
 
 function validName(value: string) {
   return value.length >= 1 && value.length <= 128 && !/[\u0000-\u001f\u007f]/.test(value)
 }
-function begin() { draft.value = currentName.value; message.value = ''; editing.value = true }
-function cancel() { draft.value = currentName.value; message.value = ''; editing.value = false }
+function begin() { draft.value = currentName.value; errorState.value = null; editing.value = true }
+function cancel() { draft.value = currentName.value; errorState.value = null; editing.value = false }
 async function save() {
-  if (!validName(draft.value)) { message.value = t('computers.nameEditor.invalid'); return }
+  if (!validName(draft.value)) { errorState.value = { type: 'key', key: 'computers.nameEditor.invalid' }; return }
   const previous = currentName.value
   currentName.value = draft.value
   editing.value = false
@@ -46,7 +51,7 @@ async function save() {
   } catch (error) {
     currentName.value = previous
     editing.value = true
-    message.value = error instanceof ApiError ? error.message : t('computers.nameEditor.saveError')
+    errorState.value = error instanceof ApiError ? { type: 'api', kind: error.kind } : { type: 'key', key: 'computers.nameEditor.saveError' }
   } finally { busy.value = false }
 }
 </script>
diff --git a/packages/client-ui/src/components/computers/EnrollmentDialog.vue b/packages/client-ui/src/components/computers/EnrollmentDialog.vue
index 4b4f59a6..2053080f 100644
--- a/packages/client-ui/src/components/computers/EnrollmentDialog.vue
+++ b/packages/client-ui/src/components/computers/EnrollmentDialog.vue
@@ -38,11 +38,11 @@
 <script setup lang="ts">
 import { CircleHelp, Copy, X } from '@lucide/vue'
 import { computed, nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
-import { ApiError } from '@termflow/client-core'
+import { ApiError, safeMessageFor, type ApiErrorKind } from '@termflow/client-core'
 import { useI18n } from '../../i18n'
 import { useClientRuntime } from '../../runtime'
 
-const { t } = useI18n()
+const { t, locale } = useI18n()
 const emit = defineEmits<{ closed: []; added: [] }>()
 const runtime = useClientRuntime()
 const open = ref(true)
@@ -53,7 +53,12 @@ const code = ref<string | null>(null)
 const command = ref('')
 const expiresAt = ref<number | null>(null)
 const now = ref(runtime.clock.now())
-const message = ref('')
+const errorState = ref<{ type: 'api'; kind: ApiErrorKind } | { type: 'key'; key: string } | null>(null)
+const message = computed(() => {
+  void locale.value
+  if (errorState.value === null) return ''
+  return errorState.value.type === 'api' ? safeMessageFor(errorState.value.kind) : t(errorState.value.key)
+})
 const panel = ref<HTMLElement | null>(null)
 const nameInput = ref<HTMLInputElement | null>(null)
 const copyButton = ref<HTMLButtonElement | null>(null)
@@ -109,7 +114,7 @@ async function pollForEnrollment() {
     open.value = false
     emit('added')
     void nextTick(() => { if (returnFocus?.isConnected) returnFocus.focus() })
-  } catch (error) { if (open.value) message.value = error instanceof ApiError ? error.message : t('computers.enrollment.pollError') }
+  } catch (error) { if (open.value) errorState.value = error instanceof ApiError ? { type: 'api', kind: error.kind } : { type: 'key', key: 'computers.enrollment.pollError' } }
   finally { pollingEnrollment = false }
 }
 function startEnrollmentPolling() {
@@ -122,11 +127,11 @@ function validName(value: string) {
 async function create(automatic = false) {
   if (busy.value || !open.value) return
   if (!validName(displayName.value)) {
-    message.value = t('computers.enrollment.nameInvalid')
+    errorState.value = { type: 'key', key: 'computers.enrollment.nameInvalid' }
     return
   }
   busy.value = true
-  message.value = ''
+  errorState.value = null
   try {
     const baseline = await runtime.api.computers.list()
     if (!open.value) return
@@ -141,7 +146,7 @@ async function create(automatic = false) {
     startTimer()
     startEnrollmentPolling()
     if (!automatic) void nextTick(() => copyButton.value?.focus())
-  } catch (error) { message.value = error instanceof ApiError ? error.message : automatic ? t('computers.enrollment.refreshError') : t('computers.enrollment.createError') }
+  } catch (error) { errorState.value = error instanceof ApiError ? { type: 'api', kind: error.kind } : { type: 'key', key: automatic ? 'computers.enrollment.refreshError' : 'computers.enrollment.createError' } }
   finally { busy.value = false }
 }
 async function copy() { if (!command.value) return; await runtime.clipboard.writeText(command.value); copied.value = true }
diff --git a/packages/client-ui/src/components/settings/AuthorizedClientsPanel.vue b/packages/client-ui/src/components/settings/AuthorizedClientsPanel.vue
index 2ea63812..e6f54f43 100644
--- a/packages/client-ui/src/components/settings/AuthorizedClientsPanel.vue
+++ b/packages/client-ui/src/components/settings/AuthorizedClientsPanel.vue
@@ -26,13 +26,13 @@
 
 <script setup lang="ts">
 import type { NativeClientResponse } from '@termflow/client-contracts'
-import { nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
+import { computed, 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()
+const { t, locale } = useI18n()
 defineProps<{ totpEnabled: boolean }>()
 const runtime = useClientRuntime()
 const toast = useBottomToast()
@@ -40,14 +40,18 @@ const clients = ref<NativeClientResponse[]>([])
 const selected = ref<NativeClientResponse | null>(null)
 const adminToken = ref('')
 const totpCode = ref('')
-const error = ref('')
+const errorKey = ref('')
+const error = computed(() => {
+  void locale.value
+  return errorKey.value ? t(errorKey.value) : ''
+})
 const approvalOpen = ref(false)
 const revokePanel = ref<HTMLElement | null>(null)
 const revokeInput = ref<HTMLInputElement | null>(null)
 let restoreFocus: HTMLElement | null = null
 
 async function load() { clients.value = (await runtime.api.clients.list()).clients.filter((client) => client.revoked_at === null) }
-function clearSecrets() { adminToken.value = ''; totpCode.value = ''; error.value = '' }
+function clearSecrets() { adminToken.value = ''; totpCode.value = ''; errorKey.value = '' }
 function cancel() {
   selected.value = null
   clearSecrets()
@@ -72,7 +76,7 @@ function trapFocus(event: KeyboardEvent) {
   }
 }
 async function openRevoke(client: NativeClientResponse) {
-  error.value = ''
+  errorKey.value = ''
   selected.value = client
   restoreFocus = document.activeElement as HTMLElement | null
   await nextTick()
@@ -80,7 +84,7 @@ async function openRevoke(client: NativeClientResponse) {
 }
 async function removeSelected() {
   if (selected.value === null) return
-  error.value = ''
+  errorKey.value = ''
   try {
     await runtime.api.clients.remove(selected.value.client_id, { adminToken: adminToken.value, ...(totpCode.value ? { totpCode: totpCode.value } : {}) })
     const removed = selected.value.client_id
@@ -89,7 +93,7 @@ async function removeSelected() {
     clients.value = clients.value.filter((client) => client.client_id !== removed)
     toast.show({ text: t('settings.clients.revokedToast'), tone: 'success' })
   } catch {
-    error.value = t('settings.clients.revokeError')
+    errorKey.value = 'settings.clients.revokeError'
   }
 }
 async function onApproved() { approvalOpen.value = false; await load() }
diff --git a/packages/client-ui/src/components/settings/TotpProtectionDialog.vue b/packages/client-ui/src/components/settings/TotpProtectionDialog.vue
index c685708c..7874eb5e 100644
--- a/packages/client-ui/src/components/settings/TotpProtectionDialog.vue
+++ b/packages/client-ui/src/components/settings/TotpProtectionDialog.vue
@@ -26,11 +26,11 @@
 <script setup lang="ts">
 import type { TotpStatusResponse } from '@termflow/client-contracts'
 import { X } from '@lucide/vue'
-import { nextTick, ref, watch } from 'vue'
+import { computed, nextTick, ref, watch } from 'vue'
 import { useI18n } from '../../i18n'
 import { useClientRuntime } from '../../runtime'
 
-const { t } = useI18n()
+const { t, locale } = useI18n()
 const props = defineProps<{
   open: boolean
   targetEnabled: boolean
@@ -40,14 +40,18 @@ const emit = defineEmits<{ close: []; confirmed: [TotpStatusResponse] }>()
 const runtime = useClientRuntime()
 const adminToken = ref('')
 const code = ref('')
-const message = ref('')
+const errorKey = ref('')
+const message = computed(() => {
+  void locale.value
+  return errorKey.value ? t(errorKey.value) : ''
+})
 const busy = ref(false)
 const adminInput = ref<HTMLInputElement | null>(null)
 
 function clearSecrets() {
   adminToken.value = ''
   code.value = ''
-  message.value = ''
+  errorKey.value = ''
 }
 
 function restoreFocus() {
@@ -71,7 +75,7 @@ function onKeydown(event: KeyboardEvent) {
 async function submit() {
   if (busy.value) return
   busy.value = true
-  message.value = ''
+  errorKey.value = ''
   try {
     const credentials = { adminToken: adminToken.value, totpCode: code.value }
     const status = props.targetEnabled
@@ -82,7 +86,7 @@ async function submit() {
     emit('close')
     restoreFocus()
   } catch {
-    message.value = t('settings.totp.verifyFailed')
+    errorKey.value = 'settings.totp.verifyFailed'
   } finally {
     busy.value = false
   }
diff --git a/packages/client-ui/src/composables/useDashboard.ts b/packages/client-ui/src/composables/useDashboard.ts
index 0649980b..7fdbffa2 100644
--- a/packages/client-ui/src/composables/useDashboard.ts
+++ b/packages/client-ui/src/composables/useDashboard.ts
@@ -1,6 +1,6 @@
-import { onBeforeUnmount, onMounted, ref } from 'vue'
-import { ApiError } from '@termflow/client-core'
-import { t } from '../i18n'
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
+import { ApiError, safeMessageFor, type ApiErrorKind } from '@termflow/client-core'
+import { locale, t } from '../i18n'
 import { useClientRuntime } from '../runtime'
 import type { DashboardSnapshot } from '../types'
 
@@ -10,7 +10,12 @@ export function useDashboard() {
   const runtime = useClientRuntime()
   const snapshot = ref<DashboardSnapshot | null>(null)
   const loading = ref(true)
-  const message = ref('')
+  const errorState = ref<{ type: 'api'; kind: ApiErrorKind } | { type: 'key'; key: string } | null>(null)
+  const message = computed(() => {
+    void locale.value
+    if (errorState.value === null) return ''
+    return errorState.value.type === 'api' ? safeMessageFor(errorState.value.kind) : t(errorState.value.key)
+  })
   let controller: AbortController | null = null
   let timer: unknown | null = null
   let unsubscribeVisibility: (() => void) | null = null
@@ -27,9 +32,11 @@ export function useDashboard() {
     controller = new AbortController()
     try {
       snapshot.value = await runtime.api.dashboard.get(controller.signal)
-      message.value = ''
+      errorState.value = null
     } catch (error) {
-      if (!(error instanceof ApiError) || error.kind !== 'aborted') message.value = error instanceof ApiError ? error.message : t('dashboard.loadError')
+      if (!(error instanceof ApiError) || error.kind !== 'aborted') {
+        errorState.value = error instanceof ApiError ? { type: 'api', kind: error.kind } : { type: 'key', key: 'dashboard.loadError' }
+      }
     } finally {
       loading.value = false
       clearTimer()
diff --git a/packages/client-ui/src/composables/useDeviceAuthorizationApproval.ts b/packages/client-ui/src/composables/useDeviceAuthorizationApproval.ts
index 3c717502..ca41d211 100644
--- a/packages/client-ui/src/composables/useDeviceAuthorizationApproval.ts
+++ b/packages/client-ui/src/composables/useDeviceAuthorizationApproval.ts
@@ -2,8 +2,8 @@ import type {
   OAuthAuthorizationDecisionResponse,
   OAuthAuthorizationPreviewResponse,
 } from '@termflow/client-contracts'
-import { ref } from 'vue'
-import { t } from '../i18n'
+import { computed, ref } from 'vue'
+import { locale, t } from '../i18n'
 
 type AuthorizationDecision = 'allow' | 'deny'
 
@@ -50,7 +50,11 @@ export function useDeviceAuthorizationApproval(
   const totpCode = ref('')
   const loading = ref(false)
   const busy = ref(false)
-  const error = ref('')
+  const errorKey = ref('')
+  const error = computed(() => {
+    void locale.value
+    return errorKey.value ? t(errorKey.value) : ''
+  })
   const success = ref<DeviceAuthorizationApprovalTerminalState>(null)
 
   async function authenticationRequired(): Promise<boolean> {
@@ -62,21 +66,21 @@ export function useDeviceAuthorizationApproval(
   async function lookup(value = userCode.value): Promise<void> {
     const code = normalizeDeviceAuthorizationCode(value)
     if (!/^[A-Z0-9]{4}-[A-Z0-9]{4}$/.test(code)) {
-      error.value = t('deviceAuth.invalidCodeFormat')
+      errorKey.value = 'deviceAuth.invalidCodeFormat'
       return
     }
 
     userCode.value = code
     loading.value = true
-    error.value = ''
+    errorKey.value = ''
     success.value = null
     try {
       preview.value = await api.deviceAuthorizationPreview(code)
     } catch (cause) {
       if (apiErrorKind(cause) === 'authentication' && await authenticationRequired()) return
-      error.value = apiErrorCode(cause) === 'authorization_expired'
-        ? t('deviceAuth.codeInvalidOrExpired')
-        : t('deviceAuth.lookupError')
+      errorKey.value = apiErrorCode(cause) === 'authorization_expired'
+        ? 'deviceAuth.codeInvalidOrExpired'
+        : 'deviceAuth.lookupError'
     } finally {
       loading.value = false
     }
@@ -85,7 +89,7 @@ export function useDeviceAuthorizationApproval(
   async function decide(decision: AuthorizationDecision): Promise<void> {
     if (preview.value === null || busy.value) return
     busy.value = true
-    error.value = ''
+    errorKey.value = ''
     try {
       const result = await api.decideAuthorization({
         transactionId: preview.value.transaction_id,
@@ -97,9 +101,9 @@ export function useDeviceAuthorizationApproval(
     } catch (cause) {
       totpCode.value = ''
       if (apiErrorKind(cause) === 'authentication' && await authenticationRequired()) return
-      error.value = apiErrorCode(cause) === 'authorization_expired'
-        ? t('deviceAuth.codeInvalidOrExpired')
-        : t('nativeAuth.failed')
+      errorKey.value = apiErrorCode(cause) === 'authorization_expired'
+        ? 'deviceAuth.codeInvalidOrExpired'
+        : 'nativeAuth.failed'
     } finally {
       busy.value = false
     }
diff --git a/packages/client-ui/src/composables/useTerminalSession.ts b/packages/client-ui/src/composables/useTerminalSession.ts
index 43fab6c0..4bd407eb 100644
--- a/packages/client-ui/src/composables/useTerminalSession.ts
+++ b/packages/client-ui/src/composables/useTerminalSession.ts
@@ -4,7 +4,7 @@ import type {
   TerminalSessionLike,
 } from '@termflow/client-core'
 import type { TerminalActionResultFrame } from '@termflow/client-contracts'
-import { onBeforeUnmount, onMounted, ref, watch, type Ref } from 'vue'
+import { computed, onBeforeUnmount, onMounted, ref, watch, type Ref } from 'vue'
 import { locale, t } from '../i18n'
 import { useClientRuntime } from '../runtime'
 import type { BindingSnapshot, TerminalActionId } from '../types'
@@ -21,9 +21,9 @@ const terminalErrorKeys: Record<string, string> = {
   stream_gap: 'terminal.error.stream_gap',
 }
 
-function userFacingTerminalError(code?: string | null) {
+function terminalErrorKeyFor(code?: string | null): string {
   const key = code ? terminalErrorKeys[code] : undefined
-  return key ? t(key) : t('terminal.error.default')
+  return key ?? 'terminal.error.default'
 }
 
 export function useTerminalSession(
@@ -42,7 +42,11 @@ export function useTerminalSession(
       bindings.value = { ...bindings.value, prefix: t('terminal.unreportedPrefix') }
     }
   })
-  const terminalError = ref('')
+  const terminalErrorKey = ref('')
+  const terminalError = computed(() => {
+    void locale.value
+    return terminalErrorKey.value ? t(terminalErrorKey.value) : ''
+  })
   const lastActionResult = ref<TerminalActionResultFrame | null>(null)
   const resetKey = ref(0)
   const authenticationRequired = ref(0)
@@ -52,7 +56,7 @@ export function useTerminalSession(
   const callbacks: TerminalSessionCallbacks = {
     onStatus: (value) => {
       status.value = value
-      if (value === 'connected') terminalError.value = ''
+      if (value === 'connected') terminalErrorKey.value = ''
       adapter?.setInputEnabled(value === 'connected')
     },
     onReady: (control) => {
@@ -67,10 +71,10 @@ export function useTerminalSession(
     onOutput: (bytes) => { if (adapter) adapter.write(bytes); else pendingOutput.push(bytes) },
     onSize: (size) => { dimensions.value = size; adapter?.resize(size.cols, size.rows) },
     onBindings: (control) => { bindings.value = { prefix: control.prefix, prefix2: control.prefix2, bindings: control.bindings } },
-    onError: (error) => { terminalError.value = userFacingTerminalError(error.code) },
-    onClosed: (reason) => { terminalError.value = reason === 'replaced' ? t('terminal.closed.replaced') : t('terminal.closed.default'); resetKey.value += 1 },
+    onError: (error) => { terminalErrorKey.value = terminalErrorKeyFor(error.code) },
+    onClosed: (reason) => { terminalErrorKey.value = reason === 'replaced' ? 'terminal.closed.replaced' : 'terminal.closed.default'; resetKey.value += 1 },
     onReset: () => { adapter?.reset(); resetKey.value += 1 },
-    onActionResult: (result) => { lastActionResult.value = result; if (!result.ok) terminalError.value = userFacingTerminalError(result.error_code) },
+    onActionResult: (result) => { lastActionResult.value = result; if (!result.ok) terminalErrorKey.value = terminalErrorKeyFor(result.error_code) },
     onAuthenticationRequired: () => { authenticationRequired.value += 1 },
   }
   const terminal = (terminalFactory ?? runtime.createTerminal)(termId, callbacks)
diff --git a/packages/client-ui/src/i18n/index.ts b/packages/client-ui/src/i18n/index.ts
index 7e2133ea..007d35b8 100644
--- a/packages/client-ui/src/i18n/index.ts
+++ b/packages/client-ui/src/i18n/index.ts
@@ -1,21 +1,39 @@
+import { setApiErrorLocale } from '@termflow/client-core'
 import { readonly, ref, type DeepReadonly, type Ref } from 'vue'
 
 export type Locale = 'zh' | 'en'
 export const LOCALE_STORAGE_KEY = 'termflow_lang'
 
+export interface LocalePreferences {
+  load(): Locale | null
+  save(locale: Locale): void
+}
+
+let localePreferences: LocalePreferences = {
+  load: () => null,
+  save: () => undefined,
+}
+
 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
-    }
+    const stored = localePreferences.load()
+    if (stored === 'en' || stored === 'zh') return stored
   } catch {
-    // Ignore storage access errors in restricted environments.
+    // Ignore preference access errors in restricted environments.
   }
   return null
 }
 
 const currentLocale = ref<Locale>(readStoredLocale() ?? 'zh')
+setApiErrorLocale(currentLocale.value)
+
+export function configureLocalePreferences(prefs: LocalePreferences): void {
+  localePreferences = prefs
+  const stored = readStoredLocale()
+  if (stored !== null) {
+    setLocale(stored)
+  }
+}
 
 const messages: Record<Locale, Record<string, string>> = {
   zh: {
@@ -315,6 +333,7 @@ const messages: Record<Locale, Record<string, string>> = {
     'agent.conversations.eyebrow': '会话列表',
     'agent.conversations.heading': '会话记录',
     'agent.chat.eyebrow': '会话详情',
+    'agent.chat.bindingLabel': '绑定 {bindingId} · 终端 {termId}',
     'agent.conversations.emptyBindings': '暂无可用 Term，请先在电脑管理中连接一个 Term。',
     'agent.conversations.empty': '暂无会话记录。',
     'agent.conversations.tableAria': 'Agent 会话记录',
@@ -536,7 +555,7 @@ const messages: Record<Locale, Record<string, string>> = {
     'agent.preview.title': '部署检查',
     'agent.preview.inputPlaceholder': '输入消息…',
     'agent.preview.reauthBtn': '重新验证身份（预览）',
-    'agent.preview.mobileKeybarHeading': '移动端按键栏 (MobileKeyBar Preview)',
+    'agent.preview.mobileKeybarHeading': '移动端快捷键栏预览',
     'agent.preview.themePickerHeading': '极客主题切换器 (10 款经典配色预览)',
     'agent.preview.sampleUserPrompt': '请在当前允许的终端中执行 echo 1，并告诉我结果。',
     'agent.preview.sampleThinking1': '用户想让我在终端执行 echo 1。我先列出 pane，确认可写后再发送命令并等待审批。',
@@ -842,6 +861,7 @@ const messages: Record<Locale, Record<string, string>> = {
     'agent.conversations.eyebrow': 'Conversations',
     'agent.conversations.heading': 'Conversations',
     'agent.chat.eyebrow': 'Agent Chat',
+    'agent.chat.bindingLabel': 'Binding {bindingId} · Term {termId}',
     'agent.conversations.emptyBindings': 'No available Terms. Connect a Term in Computers first.',
     'agent.conversations.empty': 'No conversations yet.',
     'agent.conversations.tableAria': 'Agent conversations',
@@ -1078,12 +1098,11 @@ export const locale: DeepReadonly<Ref<Locale>> = readonly(currentLocale)
 
 export function setLocale(next: Locale): void {
   currentLocale.value = next
+  setApiErrorLocale(next)
   try {
-    if (typeof window !== 'undefined' && typeof window.localStorage?.setItem === 'function') {
-      window.localStorage.setItem(LOCALE_STORAGE_KEY, next)
-    }
+    localePreferences.save(next)
   } catch {
-    // Ignore storage access errors.
+    // Ignore preference persistence errors.
   }
 }
 
@@ -1107,6 +1126,7 @@ export function useI18n() {
   const stored = readStoredLocale()
   if (stored !== null && currentLocale.value !== stored) {
     currentLocale.value = stored
+    setApiErrorLocale(stored)
   }
   return {
     locale,
diff --git a/packages/client-ui/src/test/setup.ts b/packages/client-ui/src/test/setup.ts
index 8230c217..8d9a73c5 100644
--- a/packages/client-ui/src/test/setup.ts
+++ b/packages/client-ui/src/test/setup.ts
@@ -1,5 +1,5 @@
 import { afterEach, vi } from 'vitest'
-import { setLocale } from '../i18n'
+import { configureLocalePreferences, LOCALE_STORAGE_KEY, setLocale, type Locale } from '../i18n'
 
 if (typeof window !== 'undefined' && typeof window.localStorage?.getItem !== 'function') {
   const store = new Map<string, string>()
@@ -27,6 +27,16 @@ if (typeof window !== 'undefined' && typeof window.localStorage?.getItem !== 'fu
   Object.defineProperty(globalThis, 'localStorage', { value: memoryStorage, configurable: true, writable: true })
 }
 
+configureLocalePreferences({
+  load() {
+    const v = window.localStorage?.getItem(LOCALE_STORAGE_KEY)
+    return v === 'en' || v === 'zh' ? v : null
+  },
+  save(loc: Locale) {
+    window.localStorage?.setItem(LOCALE_STORAGE_KEY, loc)
+  },
+})
+
 class ResizeObserverStub {
   observe() {}
   unobserve() {}
diff --git a/packages/client-ui/src/views/AgentChatView.test.ts b/packages/client-ui/src/views/AgentChatView.test.ts
index 6ce184e3..9d92a9a7 100644
--- a/packages/client-ui/src/views/AgentChatView.test.ts
+++ b/packages/client-ui/src/views/AgentChatView.test.ts
@@ -245,6 +245,7 @@ describe('AgentChatView', () => {
 
     // The first conversation's data is displayed and its stream connected.
     expect(harness.wrapper.get('[data-agent-chat-title]').text()).toBe('会话一')
+    expect(harness.wrapper.get('[data-agent-chat-binding]').text()).toBe('绑定 b1 · 终端 term-1')
     expect(harness.wrapper.text()).toContain('来自一会话的消息')
     expect(harness.transport.requests.map((request) => request.conversationId)).toEqual([CONVERSATION])
 
diff --git a/packages/client-ui/src/views/AgentPreviewView.vue b/packages/client-ui/src/views/AgentPreviewView.vue
index c2cb326d..6a528226 100644
--- a/packages/client-ui/src/views/AgentPreviewView.vue
+++ b/packages/client-ui/src/views/AgentPreviewView.vue
@@ -5,7 +5,7 @@
         <div>
           <p class="eyebrow">{{ t('agent.chat.eyebrow') }}</p>
           <h1>{{ t('agent.preview.title') }}</h1>
-          <p class="agent-chat-header__binding">Binding 2e2b1253 · Term ca70e9a5</p>
+          <p class="agent-chat-header__binding">{{ t('agent.chat.bindingLabel', { bindingId: '2e2b1253', termId: 'ca70e9a5' }) }}</p>
         </div>
       </div>
       <div class="agent-chat-header__actions">
diff --git a/packages/client-ui/src/views/ComputersView.vue b/packages/client-ui/src/views/ComputersView.vue
index bc6338d1..b32a6dc9 100644
--- a/packages/client-ui/src/views/ComputersView.vue
+++ b/packages/client-ui/src/views/ComputersView.vue
@@ -18,8 +18,8 @@
 </template>
 
 <script setup lang="ts">
-import { onBeforeUnmount, onMounted, ref } from 'vue'
-import { ApiError } from '@termflow/client-core'
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
+import { ApiError, safeMessageFor, type ApiErrorKind } 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'
@@ -28,39 +28,53 @@ import { useClientRuntime } from '../runtime'
 import { useBottomToast } from '../composables/useBottomToast'
 import type { ComputerSummary } from '../types'
 
-const { t } = useI18n()
+const { t, locale } = useI18n()
 const runtime = useClientRuntime()
 const toast = useBottomToast()
 const computers = ref<ComputerSummary[]>([])
 const loading = ref(true)
-const message = ref('')
+const errorState = ref<{ type: 'api'; kind: ApiErrorKind } | { type: 'key'; key: string } | null>(null)
+const message = computed(() => {
+  void locale.value
+  if (errorState.value === null) return ''
+  return errorState.value.type === 'api' ? safeMessageFor(errorState.value.kind) : t(errorState.value.key)
+})
 const showEnrollment = ref(false)
 const deletingId = ref<string | null>(null)
 const selectedForDeletion = ref<ComputerSummary | null>(null)
-const deleteError = ref('')
+const deleteErrorState = ref<{ type: 'api'; kind: ApiErrorKind } | { type: 'key'; key: string } | null>(null)
+const deleteError = computed(() => {
+  void locale.value
+  if (deleteErrorState.value === null) return ''
+  return deleteErrorState.value.type === 'api' ? safeMessageFor(deleteErrorState.value.kind) : t(deleteErrorState.value.key)
+})
 const cleanupJobId = ref('')
 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 : t('computers.loadError') }
+  catch (error) {
+    if (!(error instanceof ApiError) || error.kind !== 'aborted') {
+      errorState.value = error instanceof ApiError ? { type: 'api', kind: error.kind } : { type: 'key', key: 'computers.loadError' }
+    }
+  }
   finally { loading.value = false }
 }
 function requestRemove(computer: ComputerSummary) {
   cleanupJobId.value = ''
   if (deletingId.value !== null) return
   selectedForDeletion.value = computer
-  deleteError.value = ''
+  deleteErrorState.value = null
 }
 function cancelRemove() {
   if (deletingId.value !== null) return
   selectedForDeletion.value = null
-  deleteError.value = ''
+  deleteErrorState.value = null
 }
 async function confirmRemove(installationId: string) {
   if (deletingId.value !== null) return
   deletingId.value = installationId
-  deleteError.value = ''
+  deleteErrorState.value = null
   try {
     const result = await runtime.api.computers.remove(installationId)
     computers.value = computers.value.filter((candidate) => candidate.installation_id !== installationId)
@@ -71,13 +85,13 @@ async function confirmRemove(installationId: string) {
     selectedForDeletion.value = null
     toast.show({ text: t('computers.deletedToast'), tone: 'success' })
   } catch (error) {
-    deleteError.value = error instanceof ApiError ? error.message : t('computers.deleteError')
+    deleteErrorState.value = error instanceof ApiError ? { type: 'api', kind: error.kind } : { type: 'key', key: 'computers.deleteError' }
   }
   finally { deletingId.value = null }
 }
 async function onComputerAdded() {
   showEnrollment.value = false
-  message.value = ''
+  errorState.value = null
   await loadComputers()
   if (!message.value) toast.show({ text: t('computers.addedToast'), tone: 'success' })
 }
diff --git a/packages/client-ui/src/views/DashboardView.vue b/packages/client-ui/src/views/DashboardView.vue
index e53084fe..c75cf04b 100644
--- a/packages/client-ui/src/views/DashboardView.vue
+++ b/packages/client-ui/src/views/DashboardView.vue
@@ -17,7 +17,7 @@
 </template>
 
 <script setup lang="ts">
-import { ApiError } from '@termflow/client-core'
+import { ApiError, safeMessageFor, type ApiErrorKind } from '@termflow/client-core'
 import { computed, ref } from 'vue'
 import ComputerCard from '../components/dashboard/ComputerCard.vue'
 import DeleteTermDialog from '../components/dashboard/DeleteTermDialog.vue'
@@ -26,37 +26,42 @@ import { useDashboard } from '../composables/useDashboard'
 import { useI18n } from '../i18n'
 import { useClientRuntime } from '../runtime'
 import type { TermSummary } from '../types'
-const { t } = useI18n()
+const { t, locale } = useI18n()
 const { snapshot, loading, message, refresh } = useDashboard()
 const runtime = useClientRuntime()
 const onlineComputerCount = computed(() => snapshot.value?.computers.filter((computer) => computer.online).length ?? 0)
 const selectedForDeletion = ref<TermSummary | null>(null)
 const deletePending = ref(false)
-const deleteError = ref('')
+const deleteErrorState = ref<{ type: 'api'; kind: ApiErrorKind } | { type: 'key'; key: string } | null>(null)
+const deleteError = computed(() => {
+  void locale.value
+  if (deleteErrorState.value === null) return ''
+  return deleteErrorState.value.type === 'api' ? safeMessageFor(deleteErrorState.value.kind) : t(deleteErrorState.value.key)
+})
 const cleanupJobId = ref('')
 
 function requestDelete(term: TermSummary) {
   cleanupJobId.value = ''
   selectedForDeletion.value = term
-  deleteError.value = ''
+  deleteErrorState.value = null
 }
 
 function cancelDelete() {
   if (deletePending.value) return
   selectedForDeletion.value = null
-  deleteError.value = ''
+  deleteErrorState.value = null
 }
 
-function deleteMessage(error: unknown) {
-  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')
+function deleteErrorFrom(error: unknown): { type: 'api'; kind: ApiErrorKind } | { type: 'key'; key: string } {
+  if (error instanceof ApiError && error.code === 'instance_online') return { type: 'key', key: 'dashboard.deleteError.online' }
+  if (error instanceof ApiError && error.code === 'instance_not_found') return { type: 'key', key: 'dashboard.deleteError.notFound' }
+  return error instanceof ApiError ? { type: 'api', kind: error.kind } : { type: 'key', key: 'dashboard.deleteError.generic' }
 }
 
 async function confirmDelete(instanceId: string) {
   if (deletePending.value) return
   deletePending.value = true
-  deleteError.value = ''
+  deleteErrorState.value = null
   try {
     const result = await runtime.api.terms.remove(instanceId)
     await refresh()
@@ -66,7 +71,7 @@ async function confirmDelete(instanceId: string) {
     }
     selectedForDeletion.value = null
   } catch (error) {
-    deleteError.value = deleteMessage(error)
+    deleteErrorState.value = deleteErrorFrom(error)
     if (error instanceof ApiError && error.code === 'instance_not_found') await refresh()
   } finally {
     deletePending.value = false
diff --git a/packages/client-ui/src/views/LoginView.test.ts b/packages/client-ui/src/views/LoginView.test.ts
index 4d12f372..e42dcb8a 100644
--- a/packages/client-ui/src/views/LoginView.test.ts
+++ b/packages/client-ui/src/views/LoginView.test.ts
@@ -91,11 +91,16 @@ describe('LoginView', () => {
     expect(wrapper.html()).not.toContain('123456')
   })
 
-  it('toggles language on login view and shows English ApiError when locale is en', async () => {
+  it('toggles language on login view and reactively updates visible error banner across zh and en', async () => {
     const login = vi.fn().mockRejectedValue(new ApiError('authentication'))
     const runtime = createFakeRuntime({ api: { sessions: { login } } as unknown as ClientRuntime['api'] })
     const { wrapper } = await mountLogin(runtime)
 
+    await wrapper.get('input[type="password"]').setValue('wrong-token')
+    await wrapper.get('form').trigger('submit')
+    await flushPromises()
+    expect(wrapper.get('[role="alert"]').text()).toBe('会话已过期，请重新登录。')
+
     const toggleBtn = wrapper.get('[data-action="toggle-locale"]')
     expect(toggleBtn.text()).toContain('EN')
     await toggleBtn.trigger('click')
@@ -104,14 +109,13 @@ describe('LoginView', () => {
     try {
       expect(wrapper.get('h1').text()).toBe('Sign In')
       expect(wrapper.get('label[for="admin-token"]').text()).toBe('Admin Token')
-      await wrapper.get('input[type="password"]').setValue('wrong-token')
-      await wrapper.get('form').trigger('submit')
-      await flushPromises()
+      expect(wrapper.get('[role="alert"]').text()).toBe('Session expired. Please sign in again.')
       const err = new ApiError('authentication')
       expect(err.message).toBe('Session expired. Please sign in again.')
     } finally {
       await toggleBtn.trigger('click')
       await flushPromises()
     }
+    expect(wrapper.get('[role="alert"]').text()).toBe('会话已过期，请重新登录。')
   })
 })
diff --git a/packages/client-ui/src/views/LoginView.vue b/packages/client-ui/src/views/LoginView.vue
index b2174970..9b8a2bc1 100644
--- a/packages/client-ui/src/views/LoginView.vue
+++ b/packages/client-ui/src/views/LoginView.vue
@@ -33,19 +33,24 @@
 
 <script setup lang="ts">
 import { Globe } from '@lucide/vue'
-import { nextTick, ref } from 'vue'
+import { computed, nextTick, ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-import { ApiError } from '@termflow/client-core'
+import { ApiError, safeMessageFor, type ApiErrorKind } from '@termflow/client-core'
 import { useSession } from '../composables/useSession'
 import { useI18n } from '../i18n'
 
-const { t, toggleLocale } = useI18n()
+const { t, toggleLocale, locale } = useI18n()
 const adminToken = ref('')
 const totpCode = ref('')
 const challengeId = ref<string | null>(null)
 const totpInput = ref<HTMLInputElement | null>(null)
 const busy = ref(false)
-const message = ref('')
+const errorState = ref<{ type: 'api'; kind: ApiErrorKind } | { type: 'key'; key: string } | null>(null)
+const message = computed(() => {
+  void locale.value
+  if (errorState.value === null) return ''
+  return errorState.value.type === 'api' ? safeMessageFor(errorState.value.kind) : t(errorState.value.key)
+})
 const route = useRoute()
 const router = useRouter()
 const { loginWithToken, completeTotp } = useSession()
@@ -53,7 +58,7 @@ const { loginWithToken, completeTotp } = useSession()
 async function submit() {
   if (busy.value || (challengeId.value === null ? !adminToken.value : !/^[0-9]{6}$/.test(totpCode.value))) return
   busy.value = true
-  message.value = ''
+  errorState.value = null
   try {
     if (challengeId.value === null) {
       const result = await loginWithToken(adminToken.value)
@@ -71,7 +76,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 : t('login.failed')
+    errorState.value = error instanceof ApiError ? { type: 'api', kind: error.kind } : { type: 'key', key: 'login.failed' }
   } finally {
     adminToken.value = ''
     totpCode.value = ''
diff --git a/packages/client-ui/src/views/NativeAuthorizeView.vue b/packages/client-ui/src/views/NativeAuthorizeView.vue
index e84bc3c2..8929be45 100644
--- a/packages/client-ui/src/views/NativeAuthorizeView.vue
+++ b/packages/client-ui/src/views/NativeAuthorizeView.vue
@@ -43,30 +43,36 @@
 <script setup lang="ts">
 import { Globe } from '@lucide/vue'
 import type { OAuthAuthorizationPreviewResponse } from '@termflow/client-contracts'
-import { onMounted, ref } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 import { useRoute } from 'vue-router'
-import { ApiError } from '@termflow/client-core'
+import { ApiError, safeMessageFor, type ApiErrorKind } from '@termflow/client-core'
 import { useI18n } from '../i18n'
 import { useClientRuntime } from '../runtime'
 
-const { t, toggleLocale } = useI18n()
+const { t, toggleLocale, locale } = useI18n()
 const runtime = useClientRuntime()
 const route = useRoute()
 const preview = ref<OAuthAuthorizationPreviewResponse | null>(null)
 const loading = ref(true)
 const adminToken = ref('')
 const totpCode = ref('')
-const message = ref('')
+const errorState = ref<{ type: 'api'; kind: ApiErrorKind } | { type: 'key'; key: string } | null>(null)
+const message = computed(() => {
+  void locale.value
+  if (errorState.value === null) return ''
+  return errorState.value.type === 'api' ? safeMessageFor(errorState.value.kind) : t(errorState.value.key)
+})
 
 onMounted(async () => {
   const transactionId = typeof route.query.transaction_id === 'string' ? route.query.transaction_id : ''
   try { preview.value = await runtime.api.oauth.authorizationPreview(transactionId) }
-  catch (error) { message.value = error instanceof ApiError ? error.message : t('nativeAuth.invalidOrExpired') }
+  catch (error) { errorState.value = error instanceof ApiError ? { type: 'api', kind: error.kind } : { type: 'key', key: 'nativeAuth.invalidOrExpired' } }
   finally { loading.value = false }
 })
 
 async function decide(decision: 'allow' | 'deny') {
   if (preview.value === null) return
+  errorState.value = null
   try {
     const result = await runtime.api.oauth.decideAuthorization({
       transactionId: preview.value.transaction_id,
@@ -78,7 +84,7 @@ async function decide(decision: 'allow' | 'deny') {
     runtime.authorizationCompletion.navigate(result.callback_uri)
   } catch (error) {
     adminToken.value = ''; totpCode.value = ''
-    message.value = error instanceof ApiError ? error.message : t('nativeAuth.failed')
+    errorState.value = error instanceof ApiError ? { type: 'api', kind: error.kind } : { type: 'key', key: 'nativeAuth.failed' }
   }
 }
 </script>
diff --git a/packages/client-ui/src/views/TerminalView.vue b/packages/client-ui/src/views/TerminalView.vue
index eeb294f6..f9284ba4 100644
--- a/packages/client-ui/src/views/TerminalView.vue
+++ b/packages/client-ui/src/views/TerminalView.vue
@@ -18,7 +18,7 @@
 </template>
 
 <script setup lang="ts">
-import { ApiError, MobileModifierController, type TerminalConnectionStatus } from '@termflow/client-core'
+import { ApiError, MobileModifierController, safeMessageFor, type ApiErrorKind, type TerminalConnectionStatus } from '@termflow/client-core'
 import type { AgentSetupResponse, TerminalActionResultFrame as TerminalActionResultControl } from '@termflow/client-contracts'
 import { computed, nextTick, onBeforeUnmount, onMounted, reactive, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
@@ -78,7 +78,12 @@ const connectionStatus = ref<TerminalConnectionStatus>('connecting')
 type DesktopMenu = 'display' | 'tmux'
 const openMenu = ref<DesktopMenu | null>(null)
 const viewportLocked = ref(false)
-const renameError = ref('')
+const renameErrorState = ref<{ type: 'api'; kind: ApiErrorKind } | { type: 'key'; key: string } | null>(null)
+const renameError = computed(() => {
+  void locale.value
+  if (renameErrorState.value === null) return ''
+  return renameErrorState.value.type === 'api' ? safeMessageFor(renameErrorState.value.kind) : t(renameErrorState.value.key)
+})
 const panes = ref<PaneTopology[]>([])
 const terminalCanvas = ref<InstanceType<typeof TerminalCanvas> | null>(null)
 const bindings = ref<BindingSnapshot>({ prefix: t('terminal.unreportedPrefix'), bindings: [] })
@@ -102,9 +107,9 @@ function confirmClose(payload: { paneId: string; confirmed: true }) { terminalCa
 async function updateTermName(name: string) {
   const previous = termName.value
   termName.value = name
-  renameError.value = ''
+  renameErrorState.value = null
   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 : t('terminal.renameError') }
+  catch (error) { termName.value = previous; renameErrorState.value = error instanceof ApiError ? { type: 'api', kind: error.kind } : { type: 'key', key: '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 d3c671f2..03bf4f53 100644
--- a/packages/client-ui/src/views/TotpActivationView.vue
+++ b/packages/client-ui/src/views/TotpActivationView.vue
@@ -86,7 +86,7 @@ import TotpProtectionDialog from '../components/settings/TotpProtectionDialog.vu
 import { useI18n } from '../i18n'
 import { useClientRuntime } from '../runtime'
 
-const { t } = useI18n()
+const { t, locale } = useI18n()
 const runtime = useClientRuntime()
 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 })
@@ -97,7 +97,11 @@ const setup = ref<TotpSetupResponse | null>(null)
 const adminToken = ref('')
 const currentCode = ref('')
 const confirmCode = ref('')
-const message = ref('')
+const errorKey = ref('')
+const message = computed(() => {
+  void locale.value
+  return errorKey.value ? t(errorKey.value) : ''
+})
 const setupKeyCopied = ref(false)
 const dialogOpen = ref(false)
 const switchButton = ref<HTMLButtonElement | null>(null)
@@ -133,7 +137,7 @@ async function copySetupKey() {
 async function beginSetup() {
   if (busy.value) return
   busy.value = true
-  message.value = ''
+  errorKey.value = ''
   try {
     setup.value = await runtime.api.security.createTotpSetup({
       adminToken: adminToken.value,
@@ -141,7 +145,7 @@ async function beginSetup() {
     })
     setupKeyCopied.value = false
   } catch {
-    message.value = t('settings.totp.verifyFailed')
+    errorKey.value = 'settings.totp.verifyFailed'
   } finally {
     adminToken.value = ''
     currentCode.value = ''
@@ -152,14 +156,14 @@ async function beginSetup() {
 async function confirmSetup() {
   if (busy.value || setup.value === null) return
   busy.value = true
-  message.value = ''
+  errorKey.value = ''
   try {
     const next = await runtime.api.security.confirmTotpSetup(setup.value.setup_id, confirmCode.value)
     applyStatus(next)
     setup.value = null
     setupKeyCopied.value = false
   } catch {
-    message.value = t('settings.totp.codeInvalidOrExpired')
+    errorKey.value = 'settings.totp.codeInvalidOrExpired'
   } finally {
     confirmCode.value = ''
     busy.value = false