diff --git a/web/src/App.tsx b/web/src/App.tsx
index dfdd9903..9f835120 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -14,6 +14,7 @@ import { queryKeys } from '@/lib/query-keys'
 import { AppContextProvider } from '@/lib/app-context'
 import { fetchLatestMessages } from '@/lib/message-window-store'
 import { useAppGoBack } from '@/hooks/useAppGoBack'
+import { useTranslation } from '@/lib/use-translation'
 import { LoginPrompt } from '@/components/LoginPrompt'
 import { InstallPrompt } from '@/components/InstallPrompt'
 import { OfflineBanner } from '@/components/OfflineBanner'
@@ -34,6 +35,7 @@ export function App() {
 }
 
 function AppInner() {
+    const { t } = useTranslation()
     const { serverUrl, baseUrl, setServerUrl, clearServerUrl } = useServerUrl()
     const { authSource, isLoading: isAuthSourceLoading, setAccessToken } = useAuthSource(baseUrl)
     const { token, api, isLoading: isAuthLoading, error: authError, needsBinding, bind } = useAuth(authSource, baseUrl)
@@ -223,7 +225,7 @@ function AppInner() {
     if (isAuthSourceLoading) {
         return (
             <div className="h-full flex items-center justify-center p-4">
-                <LoadingState label="Loading…" className="text-sm" />
+                <LoadingState label={t('loading')} className="text-sm" />
             </div>
         )
     }
@@ -259,7 +261,7 @@ function AppInner() {
     if (isAuthLoading || (authSource && !token && !authError)) {
         return (
             <div className="h-full flex items-center justify-center p-4">
-                <LoadingState label="Authorizing…" className="text-sm" />
+                <LoadingState label={t('authorizing')} className="text-sm" />
             </div>
         )
     }
@@ -275,7 +277,7 @@ function AppInner() {
                     serverUrl={serverUrl}
                     setServerUrl={setServerUrl}
                     clearServerUrl={clearServerUrl}
-                    error={authError ?? 'Authentication failed'}
+                    error={authError ?? t('login.error.authFailed')}
                 />
             )
         }
@@ -283,9 +285,9 @@ function AppInner() {
         // Telegram auth failed
         return (
             <div className="p-4 space-y-3">
-                <div className="text-base font-semibold">HAPI</div>
+                <div className="text-base font-semibold">{t('login.title')}</div>
                 <div className="text-sm text-red-600">
-                    {authError ?? 'Not authorized'}
+                    {authError ?? t('login.error.authFailed')}
                 </div>
                 <div className="text-xs text-[var(--app-hint)]">
                     Open this page from Telegram using the bot's "Open App" button (not "Open in browser").
diff --git a/web/src/components/AssistantChat/ComposerButtons.tsx b/web/src/components/AssistantChat/ComposerButtons.tsx
index 32f10c24..7d2a084f 100644
--- a/web/src/components/AssistantChat/ComposerButtons.tsx
+++ b/web/src/components/AssistantChat/ComposerButtons.tsx
@@ -1,4 +1,5 @@
 import { ComposerPrimitive } from '@assistant-ui/react'
+import { useTranslation } from '@/lib/use-translation'
 
 function SettingsIcon() {
     return (
@@ -126,14 +127,16 @@ export function ComposerButtons(props: {
     isSwitching: boolean
     onSwitch: () => void
 }) {
+    const { t } = useTranslation()
+
     return (
         <div className="flex items-center justify-between px-2 pb-2">
             <div className="flex items-center gap-1">
                 {props.showSettingsButton ? (
                     <button
                         type="button"
-                        aria-label="Settings"
-                        title="Settings"
+                        aria-label={t('composer.settings')}
+                        title={t('composer.settings')}
                         className="settings-button flex h-8 w-8 items-center justify-center rounded-full text-[var(--app-fg)]/60 transition-colors hover:bg-[var(--app-bg)] hover:text-[var(--app-fg)]"
                         onClick={props.onSettingsToggle}
                         disabled={props.controlsDisabled}
@@ -145,8 +148,8 @@ export function ComposerButtons(props: {
                 {props.showTerminalButton ? (
                     <button
                         type="button"
-                        aria-label="Terminal"
-                        title="Terminal"
+                        aria-label={t('composer.terminal')}
+                        title={t('composer.terminal')}
                         className="flex h-8 w-8 items-center justify-center rounded-full text-[var(--app-fg)]/60 transition-colors hover:bg-[var(--app-bg)] hover:text-emerald-500 disabled:cursor-not-allowed disabled:opacity-50"
                         onClick={props.onTerminal}
                         disabled={props.terminalDisabled}
@@ -158,8 +161,8 @@ export function ComposerButtons(props: {
                 {props.showAbortButton ? (
                     <button
                         type="button"
-                        aria-label="Abort"
-                        title="Abort"
+                        aria-label={t('composer.abort')}
+                        title={t('composer.abort')}
                         disabled={props.abortDisabled}
                         className="flex h-8 w-8 items-center justify-center rounded-full text-[var(--app-fg)]/60 transition-colors hover:bg-[var(--app-bg)] hover:text-red-500 disabled:cursor-not-allowed disabled:opacity-50"
                         onClick={props.onAbort}
@@ -171,8 +174,8 @@ export function ComposerButtons(props: {
                 {props.showSwitchButton ? (
                     <button
                         type="button"
-                        aria-label="Switch to remote"
-                        title="Switch to remote mode"
+                        aria-label={t('composer.switchRemote')}
+                        title={t('composer.switchRemote')}
                         disabled={props.switchDisabled}
                         className="flex h-8 w-8 items-center justify-center rounded-full text-[var(--app-fg)]/60 transition-colors hover:bg-[var(--app-bg)] hover:text-blue-500 disabled:cursor-not-allowed disabled:opacity-50"
                         onClick={props.onSwitch}
@@ -184,8 +187,8 @@ export function ComposerButtons(props: {
 
             <ComposerPrimitive.Send
                 disabled={props.controlsDisabled || !props.canSend}
-                aria-label="Send"
-                title="Send"
+                aria-label={t('composer.send')}
+                title={t('composer.send')}
                 className={`flex h-8 w-8 items-center justify-center rounded-full transition-colors ${
                     props.canSend && !props.controlsDisabled
                         ? 'bg-black text-white'
diff --git a/web/src/components/AssistantChat/HappyComposer.tsx b/web/src/components/AssistantChat/HappyComposer.tsx
index 329d9852..fe75dfdf 100644
--- a/web/src/components/AssistantChat/HappyComposer.tsx
+++ b/web/src/components/AssistantChat/HappyComposer.tsx
@@ -21,6 +21,7 @@ import { FloatingOverlay } from '@/components/ChatInput/FloatingOverlay'
 import { Autocomplete } from '@/components/ChatInput/Autocomplete'
 import { StatusBar } from '@/components/AssistantChat/StatusBar'
 import { ComposerButtons } from '@/components/AssistantChat/ComposerButtons'
+import { useTranslation } from '@/lib/use-translation'
 
 export interface TextInputState {
     text: string
@@ -46,6 +47,7 @@ export function HappyComposer(props: {
     autocompletePrefixes?: string[]
     autocompleteSuggestions?: (query: string) => Promise<Suggestion[]>
 }) {
+    const { t } = useTranslation()
     const {
         disabled = false,
         permissionMode: rawPermissionMode,
@@ -344,7 +346,7 @@ export function HappyComposer(props: {
                         {showPermissionSettings ? (
                             <div className="py-2">
                                 <div className="px-3 pb-1 text-xs font-semibold text-[var(--app-hint)]">
-                                    Permission Mode
+                                    {t('misc.permissionMode')}
                                 </div>
                                 {permissionModeOptions.map((option) => (
                                     <button
@@ -385,7 +387,7 @@ export function HappyComposer(props: {
                         {showModelSettings ? (
                             <div className="py-2">
                                 <div className="px-3 pb-1 text-xs font-semibold text-[var(--app-hint)]">
-                                    Model
+                                    {t('misc.model')}
                                 </div>
                                 {MODEL_MODES.map((mode) => (
                                     <button
@@ -474,7 +476,7 @@ export function HappyComposer(props: {
                             <ComposerPrimitive.Input
                                 ref={textareaRef}
                                 autoFocus={!controlsDisabled && !isTouch}
-                                placeholder={showContinueHint ? "Type 'continue' to resume..." : "Type a message..."}
+                                placeholder={showContinueHint ? t('misc.typeMessage') : t('misc.typeAMessage')}
                                 disabled={controlsDisabled}
                                 maxRows={5}
                                 submitOnEnter
diff --git a/web/src/components/AssistantChat/HappyThread.tsx b/web/src/components/AssistantChat/HappyThread.tsx
index 03e7871b..371ee774 100644
--- a/web/src/components/AssistantChat/HappyThread.tsx
+++ b/web/src/components/AssistantChat/HappyThread.tsx
@@ -8,8 +8,10 @@ import { HappyUserMessage } from '@/components/AssistantChat/messages/UserMessag
 import { HappySystemMessage } from '@/components/AssistantChat/messages/SystemMessage'
 import { Button } from '@/components/ui/button'
 import { Spinner } from '@/components/Spinner'
+import { useTranslation } from '@/lib/use-translation'
 
 function NewMessagesIndicator(props: { count: number; onClick: () => void }) {
+    const { t } = useTranslation()
     if (props.count === 0) {
         return null
     }
@@ -19,12 +21,13 @@ function NewMessagesIndicator(props: { count: number; onClick: () => void }) {
             onClick={props.onClick}
             className="absolute bottom-20 left-1/2 -translate-x-1/2 bg-[var(--app-button)] text-[var(--app-button-text)] px-3 py-1.5 rounded-full text-sm font-medium shadow-lg animate-bounce-in z-10"
         >
-            {props.count} new message{props.count > 1 ? 's' : ''} &#8595;
+            {t('misc.newMessage', { n: props.count })} &#8595;
         </button>
     )
 }
 
 function MessageSkeleton() {
+    const { t } = useTranslation()
     const rows = [
         { align: 'end', width: 'w-2/3', height: 'h-10' },
         { align: 'start', width: 'w-3/4', height: 'h-12' },
@@ -34,7 +37,7 @@ function MessageSkeleton() {
 
     return (
         <div role="status" aria-live="polite">
-            <span className="sr-only">Loading messages…</span>
+            <span className="sr-only">{t('misc.loadingMessages')}</span>
             <div className="space-y-3 animate-pulse">
                 {rows.map((row, index) => (
                     <div key={`skeleton-${index}`} className={row.align === 'end' ? 'flex justify-end' : 'flex justify-start'}>
@@ -72,6 +75,7 @@ export function HappyThread(props: {
     messagesVersion: number
     forceScrollToken: number
 }) {
+    const { t } = useTranslation()
     const viewportRef = useRef<HTMLDivElement | null>(null)
     const topSentinelRef = useRef<HTMLDivElement | null>(null)
     const loadLockRef = useRef(false)
@@ -300,12 +304,12 @@ export function HappyThread(props: {
                                                     {props.isLoadingMoreMessages ? (
                                                         <>
                                                             <Spinner size="sm" label={null} className="text-current" />
-                                                            Loading…
+                                                            {t('misc.loading')}
                                                         </>
                                                     ) : (
                                                         <>
                                                             <span aria-hidden="true">↑</span>
-                                                            Load older
+                                                            {t('misc.loadOlder')}
                                                         </>
                                                     )}
                                                 </Button>
diff --git a/web/src/components/AssistantChat/StatusBar.tsx b/web/src/components/AssistantChat/StatusBar.tsx
index 0cb4928e..584b565c 100644
--- a/web/src/components/AssistantChat/StatusBar.tsx
+++ b/web/src/components/AssistantChat/StatusBar.tsx
@@ -3,6 +3,7 @@ import type { PermissionModeTone } from '@hapi/protocol'
 import { useMemo } from 'react'
 import type { AgentState, ModelMode, PermissionMode } from '@/types/api'
 import { getContextBudgetTokens } from '@/chat/modelConfig'
+import { useTranslation } from '@/lib/use-translation'
 
 // Vibing messages for thinking state
 const VIBING_MESSAGES = [
@@ -33,13 +34,14 @@ const PERMISSION_TONE_CLASSES: Record<PermissionModeTone, string> = {
 function getConnectionStatus(
     active: boolean,
     thinking: boolean,
-    agentState: AgentState | null | undefined
+    agentState: AgentState | null | undefined,
+    t: (key: string) => string
 ): { text: string; color: string; dotColor: string; isPulsing: boolean } {
     const hasPermissions = agentState?.requests && Object.keys(agentState.requests).length > 0
 
     if (!active) {
         return {
-            text: 'offline',
+            text: t('misc.offline'),
             color: 'text-[#999]',
             dotColor: 'bg-[#999]',
             isPulsing: false
@@ -48,7 +50,7 @@ function getConnectionStatus(
 
     if (hasPermissions) {
         return {
-            text: 'permission required',
+            text: t('misc.permissionRequired'),
             color: 'text-[#FF9500]',
             dotColor: 'bg-[#FF9500]',
             isPulsing: true
@@ -66,23 +68,24 @@ function getConnectionStatus(
     }
 
     return {
-        text: 'online',
+        text: t('misc.online'),
         color: 'text-[#34C759]',
         dotColor: 'bg-[#34C759]',
         isPulsing: false
     }
 }
 
-function getContextWarning(contextSize: number, maxContextSize: number): { text: string; color: string } | null {
+function getContextWarning(contextSize: number, maxContextSize: number, t: (key: string, params?: Record<string, string | number>) => string): { text: string; color: string } | null {
     const percentageUsed = (contextSize / maxContextSize) * 100
     const percentageRemaining = Math.max(0, 100 - percentageUsed)
 
+    const percent = Math.round(percentageRemaining)
     if (percentageRemaining <= 5) {
-        return { text: `${Math.round(percentageRemaining)}% left`, color: 'text-red-500' }
+        return { text: t('misc.percentLeft', { percent }), color: 'text-red-500' }
     } else if (percentageRemaining <= 10) {
-        return { text: `${Math.round(percentageRemaining)}% left`, color: 'text-amber-500' }
+        return { text: t('misc.percentLeft', { percent }), color: 'text-amber-500' }
     } else {
-        return { text: `${Math.round(percentageRemaining)}% left`, color: 'text-[var(--app-hint)]' }
+        return { text: t('misc.percentLeft', { percent }), color: 'text-[var(--app-hint)]' }
     }
 }
 
@@ -95,9 +98,10 @@ export function StatusBar(props: {
     permissionMode?: PermissionMode
     agentFlavor?: string | null
 }) {
+    const { t } = useTranslation()
     const connectionStatus = useMemo(
-        () => getConnectionStatus(props.active, props.thinking, props.agentState),
-        [props.active, props.thinking, props.agentState]
+        () => getConnectionStatus(props.active, props.thinking, props.agentState, t),
+        [props.active, props.thinking, props.agentState, t]
     )
 
     const contextWarning = useMemo(
@@ -105,9 +109,9 @@ export function StatusBar(props: {
             if (props.contextSize === undefined) return null
             const maxContextSize = getContextBudgetTokens(props.modelMode)
             if (!maxContextSize) return null
-            return getContextWarning(props.contextSize, maxContextSize)
+            return getContextWarning(props.contextSize, maxContextSize, t)
         },
-        [props.contextSize, props.modelMode]
+        [props.contextSize, props.modelMode, t]
     )
 
     const permissionMode = props.permissionMode
diff --git a/web/src/components/CliOutputBlock.tsx b/web/src/components/CliOutputBlock.tsx
index 36f96b1a..939696cc 100644
--- a/web/src/components/CliOutputBlock.tsx
+++ b/web/src/components/CliOutputBlock.tsx
@@ -2,6 +2,7 @@ import { useMemo } from 'react'
 import { stripAnsiAndControls } from '@/components/assistant-ui/markdown-utils'
 import { Card, CardHeader, CardTitle } from '@/components/ui/card'
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog'
+import { useTranslation } from '@/lib/use-translation'
 
 const CLI_TAG_PATTERN = '(?:local-command-[a-z-]+|command-(?:name|message|args))'
 const CLI_TAG_CHECK_REGEX = new RegExp(`<${CLI_TAG_PATTERN}>`, 'i')
@@ -9,11 +10,11 @@ const CLI_TAG_REGEX_SOURCE = `<(${CLI_TAG_PATTERN})>([\\s\\S]*?)<\\/\\1>`
 const BR_REGEX = /<br\s*\/?>/gi
 
 const LABELS: Record<string, string> = {
-    'command-name': 'Command',
-    'command-message': 'Command message',
-    'command-args': 'Command args',
-    'local-command-stdout': 'Stdout',
-    'local-command-stderr': 'Stderr',
+    'command-name': 'terminal.commandName',
+    'command-message': 'terminal.commandMessage',
+    'command-args': 'terminal.commandArgs',
+    'local-command-stdout': 'terminal.stdout',
+    'local-command-stderr': 'terminal.stderr',
 }
 const COMMAND_NAME_REGEX = /<command-name>([\s\S]*?)<\/command-name>/i
 
@@ -26,15 +27,15 @@ function normalizeCliText(text: string): string {
     return withoutAnsi.replace(BR_REGEX, '\n')
 }
 
-function formatLabel(tag: string): string {
+function formatLabel(tag: string, t?: (key: string) => string): string {
     const normalized = tag.toLowerCase()
     if (LABELS[normalized]) {
-        return LABELS[normalized]
+        return t ? t(LABELS[normalized]) : LABELS[normalized]
     }
     return normalized.replace(/-/g, ' ')
 }
 
-function buildCliOutput(text: string): string {
+function buildCliOutput(text: string, t?: (key: string) => string): string {
     const matches = Array.from(text.matchAll(new RegExp(CLI_TAG_REGEX_SOURCE, 'gi')))
     if (matches.length === 0) {
         return normalizeCliText(text)
@@ -54,7 +55,7 @@ function buildCliOutput(text: string): string {
 
         const tagName = match[1] ?? ''
         const content = normalizeCliText(match[2] ?? '')
-        const label = formatLabel(tagName)
+        const label = formatLabel(tagName, t)
 
         if (content.length > 0) {
             sections.push(`${label}:\n${content}`)
@@ -101,7 +102,8 @@ function CliIcon() {
 }
 
 export function CliOutputBlock(props: { text: string }) {
-    const content = useMemo(() => buildCliOutput(props.text), [props.text])
+    const { t } = useTranslation()
+    const content = useMemo(() => buildCliOutput(props.text, t), [props.text, t])
     const commandName = useMemo(() => extractCommandName(props.text), [props.text])
 
     return (
@@ -117,7 +119,7 @@ export function CliOutputBlock(props: { text: string }) {
                                             <CliIcon />
                                         </div>
                                         <CardTitle className="min-w-0 text-sm font-medium leading-tight break-words">
-                                            {commandName ?? 'CLI output'}
+                                            {commandName ?? t('terminal.commandName')}
                                         </CardTitle>
                                     </div>
                                     <span className="text-[var(--app-hint)]">
@@ -129,7 +131,7 @@ export function CliOutputBlock(props: { text: string }) {
                     </DialogTrigger>
                     <DialogContent className="max-w-2xl">
                         <DialogHeader>
-                            <DialogTitle>CLI output</DialogTitle>
+                            <DialogTitle>{t('terminal.commandName')}</DialogTitle>
                         </DialogHeader>
                         <div className="mt-3 max-h-[75vh] overflow-auto">
                             <div className="min-w-0 max-w-full overflow-x-auto overflow-y-hidden">
diff --git a/web/src/components/CodeBlock.tsx b/web/src/components/CodeBlock.tsx
index f4ea8838..e979d867 100644
--- a/web/src/components/CodeBlock.tsx
+++ b/web/src/components/CodeBlock.tsx
@@ -1,12 +1,14 @@
 import { useCopyToClipboard } from '@/hooks/useCopyToClipboard'
 import { useShikiHighlighter } from '@/lib/shiki'
 import { CopyIcon, CheckIcon } from '@/components/icons'
+import { useTranslation } from '@/lib/use-translation'
 
 export function CodeBlock(props: {
     code: string
     language?: string
     showCopyButton?: boolean
 }) {
+    const { t } = useTranslation()
     const showCopyButton = props.showCopyButton ?? true
     const { copied, copy } = useCopyToClipboard()
     const highlighted = useShikiHighlighter(props.code, props.language)
@@ -18,7 +20,7 @@ export function CodeBlock(props: {
                     type="button"
                     onClick={() => copy(props.code)}
                     className="absolute right-1.5 top-1.5 rounded p-1 text-[var(--app-hint)] hover:bg-[var(--app-subtle-bg)] hover:text-[var(--app-fg)] transition-colors"
-                    title="Copy"
+                    title={t('code.copy')}
                 >
                     {copied ? <CheckIcon className="h-3.5 w-3.5" /> : <CopyIcon className="h-3.5 w-3.5" />}
                 </button>
diff --git a/web/src/components/DiffView.tsx b/web/src/components/DiffView.tsx
index e1a897db..a24b6f10 100644
--- a/web/src/components/DiffView.tsx
+++ b/web/src/components/DiffView.tsx
@@ -3,6 +3,7 @@ import { useMemo } from 'react'
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog'
 import { usePointerFocusRing } from '@/hooks/usePointerFocusRing'
 import { cn } from '@/lib/utils'
+import { useTranslation } from '@/lib/use-translation'
 
 export function DiffView(props: {
     oldString: string
@@ -10,6 +11,7 @@ export function DiffView(props: {
     filePath?: string
     variant?: 'preview' | 'inline'
 }) {
+    const { t } = useTranslation()
     const variant = props.variant ?? 'preview'
     const { suppressFocusRing, onTriggerPointerDown, onTriggerKeyDown, onTriggerBlur } = usePointerFocusRing()
 
@@ -21,8 +23,8 @@ export function DiffView(props: {
         return { oldChars, newChars, label: `old: ${oldLabel} → new: ${newLabel}` }
     }, [props.oldString.length, props.newString.length])
 
-    const title = props.filePath ? props.filePath : 'Diff'
-    const subtitle = props.filePath ? stats.label : `Diff • ${stats.label}`
+    const title = props.filePath ? props.filePath : t('diff.title')
+    const subtitle = props.filePath ? stats.label : `${t('diff.title')} • ${stats.label}`
 
     const DiffInline = (
         <DiffInlineView
@@ -61,7 +63,7 @@ export function DiffView(props: {
                                     {props.filePath ? stats.label : subtitle}
                                 </div>
                                 <div className="shrink-0 text-xs text-[var(--app-link)]">
-                                    View
+                                    {t('diff.view')}
                                 </div>
                             </div>
                         </div>
diff --git a/web/src/components/InstallPrompt.tsx b/web/src/components/InstallPrompt.tsx
index feaa6dd7..d790a60a 100644
--- a/web/src/components/InstallPrompt.tsx
+++ b/web/src/components/InstallPrompt.tsx
@@ -2,8 +2,10 @@ import { useState } from 'react'
 import { usePWAInstall } from '@/hooks/usePWAInstall'
 import { usePlatform } from '@/hooks/usePlatform'
 import { CloseIcon, ShareIcon, PlusCircleIcon } from '@/components/icons'
+import { useTranslation } from '@/lib/use-translation'
 
 export function InstallPrompt() {
+    const { t } = useTranslation()
     const { canInstall, canInstallIOS, promptInstall, dismissInstall, isStandalone } = usePWAInstall()
     const { isTelegram, haptic } = usePlatform()
     const [showIOSGuide, setShowIOSGuide] = useState(false)
@@ -20,7 +22,7 @@ export function InstallPrompt() {
                     <div className="w-full max-w-lg bg-[var(--app-bg)] rounded-t-2xl p-5 pb-8 space-y-4 animate-slide-up">
                         <div className="flex items-center justify-between">
                             <h3 className="text-base font-semibold text-[var(--app-fg)]">
-                                Install HAPI
+                                {t('install.title')}
                             </h3>
                             <button
                                 onClick={() => setShowIOSGuide(false)}
@@ -73,7 +75,7 @@ export function InstallPrompt() {
                             }}
                             className="w-full py-3 text-sm text-[var(--app-hint)] active:opacity-60"
                         >
-                            Don't show again
+                            {t('button.dismiss')}
                         </button>
                     </div>
                 </div>
@@ -85,10 +87,10 @@ export function InstallPrompt() {
                 <div className="flex items-center justify-between gap-3">
                     <div className="flex-1 min-w-0">
                         <p className="text-sm font-medium text-[var(--app-fg)]">
-                            Install HAPI
+                            {t('install.title')}
                         </p>
                         <p className="text-xs text-[var(--app-hint)] mt-0.5">
-                            Add to home screen for the best experience
+                            {t('install.description')}
                         </p>
                     </div>
                     <button
@@ -98,7 +100,7 @@ export function InstallPrompt() {
                         }}
                         className="shrink-0 px-4 py-2 bg-[var(--app-fg)] text-[var(--app-bg)] rounded-lg text-sm font-medium active:opacity-80"
                     >
-                        Install
+                        {t('install.button')}
                     </button>
                     <button
                         onClick={() => {
@@ -133,17 +135,17 @@ export function InstallPrompt() {
             <div className="flex items-center justify-between gap-3">
                 <div className="flex-1 min-w-0">
                     <p className="text-sm font-medium text-[var(--app-fg)]">
-                        Install HAPI
+                        {t('install.title')}
                     </p>
                     <p className="text-xs text-[var(--app-hint)] mt-0.5">
-                        Add to home screen for the best experience
+                        {t('install.description')}
                     </p>
                 </div>
                 <button
                     onClick={handleInstall}
                     className="shrink-0 px-4 py-2 bg-[var(--app-fg)] text-[var(--app-bg)] rounded-lg text-sm font-medium active:opacity-80"
                 >
-                    Install
+                    {t('install.button')}
                 </button>
                 <button
                     onClick={() => {
diff --git a/web/src/components/LanguageSwitcher.tsx b/web/src/components/LanguageSwitcher.tsx
new file mode 100644
index 00000000..45fbbf8e
--- /dev/null
+++ b/web/src/components/LanguageSwitcher.tsx
@@ -0,0 +1,136 @@
+import { useState, useRef, useEffect } from 'react'
+import { useTranslation, type Locale } from '@/lib/use-translation'
+
+const locales: { value: Locale; label: string }[] = [
+  { value: 'en', label: 'English' },
+  { value: 'zh-CN', label: '简体中文' },
+]
+
+function LanguageIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="18"
+      height="18"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="m5 8 6 6" />
+      <path d="m4 14 6-6 2-3" />
+      <path d="M2 5h12" />
+      <path d="M7 2h1" />
+      <path d="m22 22-5-10-5 10" />
+      <path d="M14 18h6" />
+    </svg>
+  )
+}
+
+function CheckIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="16"
+      height="16"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <polyline points="20 6 9 17 4 12" />
+    </svg>
+  )
+}
+
+export function LanguageSwitcher() {
+  const { locale, setLocale, t } = useTranslation()
+  const [isOpen, setIsOpen] = useState(false)
+  const containerRef = useRef<HTMLDivElement>(null)
+
+  const handleLocaleChange = (newLocale: Locale) => {
+    setLocale(newLocale)
+    setIsOpen(false)
+  }
+
+  // Close dropdown when clicking outside
+  useEffect(() => {
+    if (!isOpen) return
+
+    const handleClickOutside = (event: MouseEvent) => {
+      if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
+        setIsOpen(false)
+      }
+    }
+
+    document.addEventListener('mousedown', handleClickOutside)
+    return () => document.removeEventListener('mousedown', handleClickOutside)
+  }, [isOpen])
+
+  // Close on escape key
+  useEffect(() => {
+    if (!isOpen) return
+
+    const handleEscape = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        setIsOpen(false)
+      }
+    }
+
+    document.addEventListener('keydown', handleEscape)
+    return () => document.removeEventListener('keydown', handleEscape)
+  }, [isOpen])
+
+  return (
+    <div ref={containerRef} className="relative">
+      <button
+        type="button"
+        onClick={() => setIsOpen(!isOpen)}
+        className="flex items-center justify-center h-8 w-8 rounded-md text-[var(--app-hint)] hover:text-[var(--app-fg)] hover:bg-[var(--app-subtle-bg)] transition-colors"
+        title={t('language.title')}
+        aria-label={t('language.title')}
+        aria-expanded={isOpen}
+        aria-haspopup="listbox"
+      >
+        <LanguageIcon />
+      </button>
+
+      {isOpen && (
+        <div
+          className="absolute right-0 top-full mt-1 min-w-[140px] rounded-lg border border-[var(--app-border)] bg-[var(--app-bg)] shadow-lg overflow-hidden z-50"
+          role="listbox"
+          aria-label={t('language.title')}
+        >
+          {locales.map((loc) => {
+            const isSelected = locale === loc.value
+            return (
+              <button
+                key={loc.value}
+                type="button"
+                role="option"
+                aria-selected={isSelected}
+                onClick={() => handleLocaleChange(loc.value)}
+                className={`flex items-center justify-between w-full px-3 py-2 text-sm text-left transition-colors ${
+                  isSelected
+                    ? 'text-[var(--app-link)] bg-[var(--app-subtle-bg)]'
+                    : 'text-[var(--app-fg)] hover:bg-[var(--app-subtle-bg)]'
+                }`}
+              >
+                <span>{loc.label}</span>
+                {isSelected && (
+                  <span className="ml-2 text-[var(--app-link)]">
+                    <CheckIcon />
+                  </span>
+                )}
+              </button>
+            )
+          })}
+        </div>
+      )}
+    </div>
+  )
+}
diff --git a/web/src/components/LoadingState.tsx b/web/src/components/LoadingState.tsx
index e80b2c8d..975d7439 100644
--- a/web/src/components/LoadingState.tsx
+++ b/web/src/components/LoadingState.tsx
@@ -1,5 +1,6 @@
 import { Spinner } from '@/components/Spinner'
 import { cn } from '@/lib/utils'
+import { useTranslation } from '@/lib/use-translation'
 
 type LoadingStateProps = {
     label?: string
@@ -8,10 +9,13 @@ type LoadingStateProps = {
 }
 
 export function LoadingState({
-    label = 'Loading…',
+    label,
     className,
     spinnerSize = 'md'
 }: LoadingStateProps) {
+    const { t } = useTranslation()
+    const displayLabel = label ?? t('loading')
+
     return (
         <div
             className={cn('inline-flex items-center gap-2 text-[var(--app-hint)]', className)}
@@ -19,7 +23,7 @@ export function LoadingState({
             aria-live="polite"
         >
             <Spinner size={spinnerSize} label={null} />
-            <span>{label}</span>
+            <span>{displayLabel}</span>
         </div>
     )
 }
diff --git a/web/src/components/LoginPrompt.tsx b/web/src/components/LoginPrompt.tsx
index bebd4708..b1f3bc7c 100644
--- a/web/src/components/LoginPrompt.tsx
+++ b/web/src/components/LoginPrompt.tsx
@@ -1,8 +1,10 @@
 import { useCallback, useEffect, useState } from 'react'
 import { ApiClient } from '@/api/client'
+import { LanguageSwitcher } from '@/components/LanguageSwitcher'
 import { Spinner } from '@/components/Spinner'
 import { Button } from '@/components/ui/button'
 import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from '@/components/ui/dialog'
+import { useTranslation } from '@/lib/use-translation'
 import type { ServerUrlResult } from '@/hooks/useServerUrl'
 
 type LoginPromptProps = {
@@ -17,6 +19,7 @@ type LoginPromptProps = {
 }
 
 export function LoginPrompt(props: LoginPromptProps) {
+    const { t } = useTranslation()
     const isBindMode = props.mode === 'bind'
     const [accessToken, setAccessToken] = useState('')
     const [isLoading, setIsLoading] = useState(false)
@@ -30,7 +33,7 @@ export function LoginPrompt(props: LoginPromptProps) {
 
         const trimmedToken = accessToken.trim()
         if (!trimmedToken) {
-            setError('Please enter an access token')
+            setError(t('login.error.enterToken'))
             return
         }
 
@@ -40,28 +43,28 @@ export function LoginPrompt(props: LoginPromptProps) {
         try {
             if (isBindMode) {
                 if (!props.onBind) {
-                    setError('Binding is unavailable.')
+                    setError(t('login.error.bindingUnavailable'))
                     return
                 }
                 await props.onBind(trimmedToken)
             } else {
-                // Validate the token by attempting to authenticate
+                // Validate token by attempting to authenticate
                 const client = new ApiClient('', { baseUrl: props.baseUrl })
                 await client.authenticate({ accessToken: trimmedToken })
-                // If successful, pass the token to parent
+                // If successful, pass token to parent
                 if (!props.onLogin) {
-                    setError('Login is unavailable.')
+                    setError(t('login.error.loginUnavailable'))
                     return
                 }
                 props.onLogin(trimmedToken)
             }
         } catch (e) {
-            const fallbackMessage = isBindMode ? 'Binding failed' : 'Authentication failed'
+            const fallbackMessage = isBindMode ? t('login.error.bindFailed') : t('login.error.authFailed')
             setError(e instanceof Error ? e.message : fallbackMessage)
         } finally {
             setIsLoading(false)
         }
-    }, [accessToken, props])
+    }, [accessToken, props, t, isBindMode])
 
     useEffect(() => {
         if (!isServerDialogOpen) {
@@ -91,13 +94,18 @@ export function LoginPrompt(props: LoginPromptProps) {
     }, [props])
 
     const displayError = error || props.error
-    const serverSummary = props.serverUrl ?? `${props.baseUrl} (same origin)`
-    const title = isBindMode ? 'Bind Telegram' : 'HAPI'
-    const subtitle = 'Vibe Coding Anytime, Anywhere'
-    const submitLabel = isBindMode ? 'Bind' : 'Sign In'
+    const serverSummary = props.serverUrl ?? `${props.baseUrl} ${t('login.server.default')}`
+    const title = isBindMode ? t('login.bind.title') : t('login.title')
+    const subtitle = t('login.subtitle')
+    const submitLabel = isBindMode ? t('login.bind.submit') : t('login.submit')
 
     return (
         <div className="relative h-full flex items-center justify-center p-4">
+            {/* Language switcher */}
+            <div className="absolute top-4 right-4">
+                <LanguageSwitcher />
+            </div>
+
             <div className="w-full max-w-sm space-y-6">
                 {/* Header */}
                 <div className="text-center space-y-2">
@@ -114,7 +122,7 @@ export function LoginPrompt(props: LoginPromptProps) {
                             type="password"
                             value={accessToken}
                             onChange={(e) => setAccessToken(e.target.value)}
-                            placeholder="Access token"
+                            placeholder={t('login.placeholder')}
                             autoComplete="current-password"
                             disabled={isLoading}
                             className="w-full px-3 py-2.5 rounded-lg border border-[var(--app-border)] bg-[var(--app-bg)] text-[var(--app-fg)] placeholder:text-[var(--app-hint)] focus:outline-none focus:ring-2 focus:ring-[var(--app-button)] focus:border-transparent disabled:opacity-50"
@@ -136,7 +144,7 @@ export function LoginPrompt(props: LoginPromptProps) {
                         {isLoading ? (
                             <>
                                 <Spinner size="sm" label={null} className="text-[var(--app-button-text)]" />
-                                {isBindMode ? 'Binding...' : 'Signing in...'}
+                                {isBindMode ? t('login.bind.submitting') : t('login.submitting')}
                             </>
                         ) : (
                             submitLabel
@@ -148,27 +156,27 @@ export function LoginPrompt(props: LoginPromptProps) {
                 {!isBindMode && (
                     <div className="flex items-center justify-between text-xs text-[var(--app-hint)]">
                         <a href="https://hapi.run/docs" target="_blank" rel="noopener noreferrer" className="underline hover:text-[var(--app-fg)]">
-                            Needs help?
+                            {t('login.help')}
                         </a>
                         <Dialog open={isServerDialogOpen} onOpenChange={setIsServerDialogOpen}>
                             <DialogTrigger asChild>
                                 <button type="button" className="underline hover:text-[var(--app-fg)]">
-                                    Server {props.serverUrl ? '(Custom)' : '(Default)'}
+                                    Server {props.serverUrl ? `${t('login.server.custom')}` : `${t('login.server.default')}`}
                                 </button>
                             </DialogTrigger>
                             <DialogContent className="max-w-md">
                                 <DialogHeader>
-                                    <DialogTitle>Server URL</DialogTitle>
+                                    <DialogTitle>{t('login.server.title')}</DialogTitle>
                                     <DialogDescription>
-                                        Set the hapi server origin for API and live updates.
+                                        {t('login.server.description')}
                                     </DialogDescription>
                                 </DialogHeader>
                                 <form onSubmit={handleSaveServer} className="space-y-4">
                                     <div className="text-xs text-[var(--app-hint)]">
-                                        Current: {serverSummary}
+                                        {t('login.server.current')} {serverSummary}
                                     </div>
                                     <div className="space-y-2">
-                                        <label className="text-xs font-medium">Server origin</label>
+                                        <label className="text-xs font-medium">{t('login.server.origin')}</label>
                                         <input
                                             type="url"
                                             value={serverInput}
@@ -176,11 +184,11 @@ export function LoginPrompt(props: LoginPromptProps) {
                                                 setServerInput(e.target.value)
                                                 setServerError(null)
                                             }}
-                                            placeholder="https://hapi.example.com"
+                                            placeholder={t('login.server.placeholder')}
                                             className="w-full px-3 py-2.5 rounded-lg border border-[var(--app-border)] bg-[var(--app-bg)] text-[var(--app-fg)] placeholder:text-[var(--app-hint)] focus:outline-none focus:ring-2 focus:ring-[var(--app-button)] focus:border-transparent"
                                         />
                                         <div className="text-[11px] text-[var(--app-hint)]">
-                                            Use http(s) only. Any path is ignored.
+                                            {t('login.server.hint')}
                                         </div>
                                     </div>
 
@@ -193,11 +201,11 @@ export function LoginPrompt(props: LoginPromptProps) {
                                     <div className="flex items-center justify-end gap-2">
                                         {props.serverUrl && (
                                             <Button type="button" variant="outline" onClick={handleClearServer}>
-                                                Use same origin
+                                                {t('login.server.useSameOrigin')}
                                             </Button>
                                         )}
                                         <Button type="submit">
-                                            Save server
+                                            {t('login.server.save')}
                                         </Button>
                                     </div>
                                 </form>
@@ -209,8 +217,8 @@ export function LoginPrompt(props: LoginPromptProps) {
 
             {/* Footer */}
             <div className="absolute bottom-4 left-0 right-0 text-center text-xs text-[var(--app-hint)] space-y-1">
-                <div>Designed with <span className="text-red-500">♥</span> for Vibe Coding</div>
-                <div>© {new Date().getFullYear()} HAPI</div>
+                <div>{t('login.footer')} <span className="text-red-500">♥</span> {t('login.footer.for')}</div>
+                <div>{t('login.footer.copyright')} {new Date().getFullYear()} HAPI</div>
             </div>
         </div>
     )
diff --git a/web/src/components/NewSession/ActionButtons.tsx b/web/src/components/NewSession/ActionButtons.tsx
index c1b44b54..e35daede 100644
--- a/web/src/components/NewSession/ActionButtons.tsx
+++ b/web/src/components/NewSession/ActionButtons.tsx
@@ -1,5 +1,6 @@
 import { Button } from '@/components/ui/button'
 import { Spinner } from '@/components/Spinner'
+import { useTranslation } from '@/lib/use-translation'
 
 export function ActionButtons(props: {
     isPending: boolean
@@ -8,6 +9,8 @@ export function ActionButtons(props: {
     onCancel: () => void
     onCreate: () => void
 }) {
+    const { t } = useTranslation()
+
     return (
         <div className="flex gap-2 px-3 py-3">
             <Button
@@ -15,7 +18,7 @@ export function ActionButtons(props: {
                 onClick={props.onCancel}
                 disabled={props.isDisabled}
             >
-                Cancel
+                {t('button.cancel')}
             </Button>
             <Button
                 onClick={props.onCreate}
@@ -26,10 +29,10 @@ export function ActionButtons(props: {
                 {props.isPending ? (
                     <>
                         <Spinner size="sm" label={null} className="text-[var(--app-button-text)]" />
-                        Creating...
+                        {t('newSession.creating')}
                     </>
                 ) : (
-                    'Create'
+                    t('newSession.create')
                 )}
             </Button>
         </div>
diff --git a/web/src/components/NewSession/AgentSelector.tsx b/web/src/components/NewSession/AgentSelector.tsx
index d53a2758..aa3fbd98 100644
--- a/web/src/components/NewSession/AgentSelector.tsx
+++ b/web/src/components/NewSession/AgentSelector.tsx
@@ -1,14 +1,17 @@
 import type { AgentType } from './types'
+import { useTranslation } from '@/lib/use-translation'
 
 export function AgentSelector(props: {
     agent: AgentType
     isDisabled: boolean
     onAgentChange: (value: AgentType) => void
 }) {
+    const { t } = useTranslation()
+
     return (
         <div className="flex flex-col gap-1.5 px-3 py-3">
             <label className="text-xs font-medium text-[var(--app-hint)]">
-                Agent
+                {t('newSession.agent')}
             </label>
             <div className="flex gap-3">
                 {(['claude', 'codex', 'gemini'] as const).map((agentType) => (
diff --git a/web/src/components/NewSession/DirectorySection.tsx b/web/src/components/NewSession/DirectorySection.tsx
index f431b062..a322d13a 100644
--- a/web/src/components/NewSession/DirectorySection.tsx
+++ b/web/src/components/NewSession/DirectorySection.tsx
@@ -2,6 +2,7 @@ import type { KeyboardEvent as ReactKeyboardEvent } from 'react'
 import type { Suggestion } from '@/hooks/useActiveSuggestions'
 import { Autocomplete } from '@/components/ChatInput/Autocomplete'
 import { FloatingOverlay } from '@/components/ChatInput/FloatingOverlay'
+import { useTranslation } from '@/lib/use-translation'
 
 export function DirectorySection(props: {
     directory: string
@@ -16,15 +17,17 @@ export function DirectorySection(props: {
     onSuggestionSelect: (index: number) => void
     onPathClick: (path: string) => void
 }) {
+    const { t } = useTranslation()
+
     return (
         <div className="flex flex-col gap-1.5 px-3 py-3">
             <label className="text-xs font-medium text-[var(--app-hint)]">
-                Directory
+                {t('newSession.directory')}
             </label>
             <div className="relative">
                 <input
                     type="text"
-                    placeholder="/path/to/project"
+                    placeholder={t('newSession.placeholder')}
                     value={props.directory}
                     onChange={(event) => props.onDirectoryChange(event.target.value)}
                     onKeyDown={props.onDirectoryKeyDown}
@@ -48,7 +51,7 @@ export function DirectorySection(props: {
 
             {props.recentPaths.length > 0 && (
                 <div className="flex flex-col gap-1 mt-1">
-                    <span className="text-xs text-[var(--app-hint)]">Recent:</span>
+                    <span className="text-xs text-[var(--app-hint)]">{t('newSession.recent')}:</span>
                     <div className="flex flex-wrap gap-1">
                         {props.recentPaths.map((path) => (
                             <button
diff --git a/web/src/components/NewSession/MachineSelector.tsx b/web/src/components/NewSession/MachineSelector.tsx
index 5732efb7..070b72ce 100644
--- a/web/src/components/NewSession/MachineSelector.tsx
+++ b/web/src/components/NewSession/MachineSelector.tsx
@@ -1,4 +1,5 @@
 import type { Machine } from '@/types/api'
+import { useTranslation } from '@/lib/use-translation'
 
 function getMachineTitle(machine: Machine): string {
     if (machine.metadata?.displayName) return machine.metadata.displayName
@@ -13,10 +14,12 @@ export function MachineSelector(props: {
     isDisabled: boolean
     onChange: (machineId: string) => void
 }) {
+    const { t } = useTranslation()
+
     return (
         <div className="flex flex-col gap-1.5 px-3 py-3">
             <label className="text-xs font-medium text-[var(--app-hint)]">
-                Machine
+                {t('newSession.machine')}
             </label>
             <select
                 value={props.machineId ?? ''}
@@ -25,10 +28,10 @@ export function MachineSelector(props: {
                 className="w-full rounded-md border border-[var(--app-border)] bg-[var(--app-bg)] p-2 text-sm focus:outline-none focus:ring-2 focus:ring-[var(--app-link)] disabled:opacity-50"
             >
                 {props.isLoading && (
-                    <option value="">Loading machines...</option>
+                    <option value="">{t('loading.machines')}</option>
                 )}
                 {!props.isLoading && props.machines.length === 0 && (
-                    <option value="">No machines available</option>
+                    <option value="">{t('misc.noMachines')}</option>
                 )}
                 {props.machines.map((m) => (
                     <option key={m.id} value={m.id}>
diff --git a/web/src/components/NewSession/SessionTypeSelector.tsx b/web/src/components/NewSession/SessionTypeSelector.tsx
index 78d1613e..8e1141f7 100644
--- a/web/src/components/NewSession/SessionTypeSelector.tsx
+++ b/web/src/components/NewSession/SessionTypeSelector.tsx
@@ -1,5 +1,6 @@
 import type { RefObject } from 'react'
 import type { SessionType } from './types'
+import { useTranslation } from '@/lib/use-translation'
 
 export function SessionTypeSelector(props: {
     sessionType: SessionType
@@ -9,10 +10,12 @@ export function SessionTypeSelector(props: {
     onSessionTypeChange: (value: SessionType) => void
     onWorktreeNameChange: (value: string) => void
 }) {
+    const { t } = useTranslation()
+
     return (
         <div className="flex flex-col gap-1.5 px-3 py-3">
             <label className="text-xs font-medium text-[var(--app-hint)]">
-                Session type
+                {t('newSession.type')}
             </label>
             <div className="flex flex-col gap-1.5">
                 {(['simple', 'worktree'] as const).map((type) => (
@@ -35,7 +38,7 @@ export function SessionTypeSelector(props: {
                                             <input
                                                 ref={props.worktreeInputRef}
                                                 type="text"
-                                                placeholder="Branch name (optional)"
+                                                placeholder={t('newSession.type.worktree.placeholder')}
                                                 value={props.worktreeName}
                                                 onChange={(e) => props.onWorktreeNameChange(e.target.value)}
                                                 disabled={props.isDisabled}
@@ -47,10 +50,10 @@ export function SessionTypeSelector(props: {
                                                     htmlFor="session-type-worktree"
                                                     className="text-sm capitalize cursor-pointer"
                                                 >
-                                                    Worktree
+                                                    {t('newSession.type.worktree')}
                                                 </label>
                                                 <span className="ml-2 text-xs text-[var(--app-hint)]">
-                                                    Create a new git worktree next to the repo
+                                                    {t('newSession.type.worktree.desc')}
                                                 </span>
                                             </>
                                         )}
@@ -69,9 +72,9 @@ export function SessionTypeSelector(props: {
                                     disabled={props.isDisabled}
                                     className="accent-[var(--app-link)]"
                                 />
-                                <span className="text-sm capitalize">Simple</span>
+                                <span className="text-sm capitalize">{t('newSession.type.simple')}</span>
                                 <span className="text-xs text-[var(--app-hint)]">
-                                    Use the selected directory as-is
+                                    {t('newSession.type.simple.desc')}
                                 </span>
                             </label>
                         )}
diff --git a/web/src/components/NewSession/YoloToggle.tsx b/web/src/components/NewSession/YoloToggle.tsx
index cdbaac3f..f0d0d25f 100644
--- a/web/src/components/NewSession/YoloToggle.tsx
+++ b/web/src/components/NewSession/YoloToggle.tsx
@@ -1,20 +1,24 @@
+import { useTranslation } from '@/lib/use-translation'
+
 export function YoloToggle(props: {
     yoloMode: boolean
     isDisabled: boolean
     onToggle: (value: boolean) => void
 }) {
+    const { t } = useTranslation()
+
     return (
         <div className="flex flex-col gap-1.5 px-3 py-3">
             <label className="text-xs font-medium text-[var(--app-hint)]">
-                YOLO mode
+                {t('newSession.yolo')}
             </label>
             <div className="flex items-center justify-between gap-3">
                 <div className="flex flex-col">
                     <span className="text-sm text-[var(--app-fg)]">
-                        Bypass approvals and sandbox
+                        {t('newSession.yolo.title')}
                     </span>
                     <span className="text-xs text-[var(--app-hint)]">
-                        Uses dangerous agent flags when spawning.
+                        {t('newSession.yolo.desc')}
                     </span>
                 </div>
                 <label className="relative inline-flex h-5 w-9 items-center">
diff --git a/web/src/components/OfflineBanner.tsx b/web/src/components/OfflineBanner.tsx
index 6923409e..9d5d0c61 100644
--- a/web/src/components/OfflineBanner.tsx
+++ b/web/src/components/OfflineBanner.tsx
@@ -1,6 +1,8 @@
 import { useOnlineStatus } from '@/hooks/useOnlineStatus'
+import { useTranslation } from '@/lib/use-translation'
 
 export function OfflineBanner() {
+    const { t } = useTranslation()
     const isOnline = useOnlineStatus()
 
     if (isOnline) {
@@ -9,7 +11,7 @@ export function OfflineBanner() {
 
     return (
         <div className="fixed top-0 left-0 right-0 bg-amber-500 text-white text-center py-2 text-sm font-medium z-50">
-            You're offline. Some features may be unavailable.
+            {t('offline.message')}
         </div>
     )
 }
diff --git a/web/src/components/RenameSessionDialog.tsx b/web/src/components/RenameSessionDialog.tsx
index 7d2a217f..38178243 100644
--- a/web/src/components/RenameSessionDialog.tsx
+++ b/web/src/components/RenameSessionDialog.tsx
@@ -6,6 +6,7 @@ import {
     DialogTitle
 } from '@/components/ui/dialog'
 import { Button } from '@/components/ui/button'
+import { useTranslation } from '@/lib/use-translation'
 
 type RenameSessionDialogProps = {
     isOpen: boolean
@@ -16,6 +17,7 @@ type RenameSessionDialogProps = {
 }
 
 export function RenameSessionDialog(props: RenameSessionDialogProps) {
+    const { t } = useTranslation()
     const { isOpen, onClose, currentName, onRename, isPending } = props
     const [name, setName] = useState(currentName)
     const [error, setError] = useState<string | null>(null)
@@ -44,8 +46,7 @@ export function RenameSessionDialog(props: RenameSessionDialogProps) {
             await onRename(trimmed)
             onClose()
         } catch (err) {
-            const message = err instanceof Error ? err.message : 'Failed to rename. Please try again.'
-            setError(message)
+            setError(t('dialog.rename.error'))
         }
     }
 
@@ -59,7 +60,7 @@ export function RenameSessionDialog(props: RenameSessionDialogProps) {
         <Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
             <DialogContent className="max-w-sm">
                 <DialogHeader>
-                    <DialogTitle>Rename Session</DialogTitle>
+                    <DialogTitle>{t('dialog.rename.title')}</DialogTitle>
                 </DialogHeader>
                 <form onSubmit={handleSubmit} className="mt-4 flex flex-col gap-4">
                     <input
@@ -68,7 +69,7 @@ export function RenameSessionDialog(props: RenameSessionDialogProps) {
                         value={name}
                         onChange={(e) => setName(e.target.value)}
                         onKeyDown={handleKeyDown}
-                        placeholder="Session name"
+                        placeholder={t('dialog.rename.placeholder')}
                         className="w-full px-3 py-2.5 rounded-lg border border-[var(--app-border)] bg-[var(--app-bg)] text-[var(--app-fg)] placeholder:text-[var(--app-hint)] focus:outline-none focus:ring-2 focus:ring-[var(--app-button)] focus:border-transparent"
                         disabled={isPending}
                         maxLength={255}
@@ -87,13 +88,13 @@ export function RenameSessionDialog(props: RenameSessionDialogProps) {
                             onClick={onClose}
                             disabled={isPending}
                         >
-                            Cancel
+                            {t('button.cancel')}
                         </Button>
                         <Button
                             type="submit"
                             disabled={isPending || !name.trim()}
                         >
-                            {isPending ? 'Saving...' : 'Save'}
+                            {isPending ? t('dialog.rename.saving') : t('button.save')}
                         </Button>
                     </div>
                 </form>
diff --git a/web/src/components/SessionActionMenu.tsx b/web/src/components/SessionActionMenu.tsx
index 9c4c2d4e..5d225602 100644
--- a/web/src/components/SessionActionMenu.tsx
+++ b/web/src/components/SessionActionMenu.tsx
@@ -8,6 +8,7 @@ import {
     type CSSProperties,
     type RefObject
 } from 'react'
+import { useTranslation } from '@/lib/use-translation'
 
 type SessionActionMenuProps = {
     isOpen: boolean
@@ -92,6 +93,7 @@ type MenuPosition = {
 }
 
 export function SessionActionMenu(props: SessionActionMenuProps) {
+    const { t } = useTranslation()
     const {
         isOpen,
         onClose,
@@ -236,7 +238,7 @@ export function SessionActionMenu(props: SessionActionMenuProps) {
                 id={headingId}
                 className="px-3 py-1.5 text-[10px] font-semibold uppercase tracking-wide text-[var(--app-hint)]"
             >
-                Session actions
+                {t('session.more')}
             </div>
             <div
                 id={resolvedMenuId}
@@ -251,7 +253,7 @@ export function SessionActionMenu(props: SessionActionMenuProps) {
                     onClick={handleRename}
                 >
                     <EditIcon className="text-[var(--app-hint)]" />
-                    Rename
+                    {t('session.action.rename')}
                 </button>
 
                 {sessionActive ? (
@@ -262,7 +264,7 @@ export function SessionActionMenu(props: SessionActionMenuProps) {
                         onClick={handleArchive}
                     >
                         <ArchiveIcon className="text-red-500" />
-                        Archive
+                        {t('session.action.archive')}
                     </button>
                 ) : (
                     <button
@@ -272,7 +274,7 @@ export function SessionActionMenu(props: SessionActionMenuProps) {
                         onClick={handleDelete}
                     >
                         <TrashIcon className="text-red-500" />
-                        Delete
+                        {t('session.action.delete')}
                     </button>
                 )}
             </div>
diff --git a/web/src/components/SessionHeader.tsx b/web/src/components/SessionHeader.tsx
index e81a1078..b5d58e9e 100644
--- a/web/src/components/SessionHeader.tsx
+++ b/web/src/components/SessionHeader.tsx
@@ -6,6 +6,7 @@ import { useSessionActions } from '@/hooks/mutations/useSessionActions'
 import { SessionActionMenu } from '@/components/SessionActionMenu'
 import { RenameSessionDialog } from '@/components/RenameSessionDialog'
 import { ConfirmDialog } from '@/components/ui/ConfirmDialog'
+import { useTranslation } from '@/lib/use-translation'
 
 function getSessionTitle(session: Session): string {
     if (session.metadata?.name) {
@@ -65,6 +66,7 @@ export function SessionHeader(props: {
     api: ApiClient | null
     onSessionDeleted?: () => void
 }) {
+    const { t } = useTranslation()
     const { session, api, onSessionDeleted } = props
     const title = useMemo(() => getSessionTitle(session), [session])
     const worktreeBranch = session.metadata?.worktree?.branch
@@ -122,9 +124,17 @@ export function SessionHeader(props: {
                         <div className="truncate font-semibold">
                             {title}
                         </div>
-                        <div className="text-xs text-[var(--app-hint)] truncate">
-                            {session.metadata?.path ?? session.id}
-                            {worktreeBranch ? ` • worktree: ${worktreeBranch}` : ''}
+                        <div className="flex flex-wrap items-center gap-x-3 gap-y-0.5 text-xs text-[var(--app-hint)]">
+                            <span className="inline-flex items-center gap-1">
+                                <span aria-hidden="true">❖</span>
+                                {session.metadata?.flavor?.trim() || 'unknown'}
+                            </span>
+                            <span>
+                                {t('session.item.modelMode')}: {session.modelMode || 'default'}
+                            </span>
+                            {worktreeBranch ? (
+                                <span>{t('session.item.worktree')}: {worktreeBranch}</span>
+                            ) : null}
                         </div>
                     </div>
 
@@ -133,7 +143,7 @@ export function SessionHeader(props: {
                             type="button"
                             onClick={props.onViewFiles}
                             className="flex h-8 w-8 items-center justify-center rounded-full text-[var(--app-hint)] transition-colors hover:bg-[var(--app-secondary-bg)] hover:text-[var(--app-fg)]"
-                            title="Files"
+                            title={t('session.title')}
                         >
                             <FilesIcon />
                         </button>
@@ -147,7 +157,7 @@ export function SessionHeader(props: {
                         aria-expanded={menuOpen}
                         aria-controls={menuOpen ? menuId : undefined}
                         className="flex h-8 w-8 items-center justify-center rounded-full text-[var(--app-hint)] transition-colors hover:bg-[var(--app-secondary-bg)] hover:text-[var(--app-fg)]"
-                        title="More actions"
+                        title={t('session.more')}
                     >
                         <MoreVerticalIcon />
                     </button>
@@ -177,10 +187,10 @@ export function SessionHeader(props: {
             <ConfirmDialog
                 isOpen={archiveOpen}
                 onClose={() => setArchiveOpen(false)}
-                title="Archive Session"
-                description={`Are you sure you want to archive "${title}"? This will disconnect the active session.`}
-                confirmLabel="Archive"
-                confirmingLabel="Archiving..."
+                title={t('dialog.archive.title')}
+                description={t('dialog.archive.description', { name: title })}
+                confirmLabel={t('dialog.archive.confirm')}
+                confirmingLabel={t('dialog.archive.confirming')}
                 onConfirm={archiveSession}
                 isPending={isPending}
                 destructive
@@ -189,10 +199,10 @@ export function SessionHeader(props: {
             <ConfirmDialog
                 isOpen={deleteOpen}
                 onClose={() => setDeleteOpen(false)}
-                title="Delete Session"
-                description={`Are you sure you want to delete "${title}"? This action cannot be undone.`}
-                confirmLabel="Delete"
-                confirmingLabel="Deleting..."
+                title={t('dialog.delete.title')}
+                description={t('dialog.delete.description', { name: title })}
+                confirmLabel={t('dialog.delete.confirm')}
+                confirmingLabel={t('dialog.delete.confirming')}
                 onConfirm={handleDelete}
                 isPending={isPending}
                 destructive
diff --git a/web/src/components/SessionList.tsx b/web/src/components/SessionList.tsx
index 57ee840a..9e3c7d90 100644
--- a/web/src/components/SessionList.tsx
+++ b/web/src/components/SessionList.tsx
@@ -7,6 +7,7 @@ import { useSessionActions } from '@/hooks/mutations/useSessionActions'
 import { SessionActionMenu } from '@/components/SessionActionMenu'
 import { RenameSessionDialog } from '@/components/RenameSessionDialog'
 import { ConfirmDialog } from '@/components/ui/ConfirmDialog'
+import { useTranslation } from '@/lib/use-translation'
 
 type SessionGroup = {
     directory: string
@@ -146,21 +147,17 @@ function getAgentLabel(session: SessionSummary): string {
     return 'unknown'
 }
 
-function getModelLabel(session: SessionSummary): string {
-    return session.modelMode ?? 'default'
-}
-
-function formatRelativeTime(value: number): string | null {
+function formatRelativeTime(value: number, t: (key: string, params?: Record<string, string | number>) => string): string | null {
     const ms = value < 1_000_000_000_000 ? value * 1000 : value
     if (!Number.isFinite(ms)) return null
     const delta = Date.now() - ms
-    if (delta < 60_000) return 'just now'
+    if (delta < 60_000) return t('session.time.justNow')
     const minutes = Math.floor(delta / 60_000)
-    if (minutes < 60) return `${minutes}m ago`
+    if (minutes < 60) return t('session.time.minutesAgo', { n: minutes })
     const hours = Math.floor(minutes / 60)
-    if (hours < 24) return `${hours}h ago`
+    if (hours < 24) return t('session.time.hoursAgo', { n: hours })
     const days = Math.floor(hours / 24)
-    if (days < 7) return `${days}d ago`
+    if (days < 7) return t('session.time.daysAgo', { n: days })
     return new Date(ms).toLocaleDateString()
 }
 
@@ -170,6 +167,7 @@ function SessionItem(props: {
     showPath?: boolean
     api: ApiClient | null
 }) {
+    const { t } = useTranslation()
     const { session: s, onSelect, showPath = true, api } = props
     const { haptic } = usePlatform()
     const [menuOpen, setMenuOpen] = useState(false)
@@ -222,6 +220,11 @@ function SessionItem(props: {
                         </div>
                     </div>
                     <div className="flex items-center gap-2 shrink-0 text-xs">
+                        {s.thinking ? (
+                            <span className="text-[#007AFF] animate-pulse">
+                                {t('session.item.thinking')}
+                            </span>
+                        ) : null}
                         {(() => {
                             const progress = getTodoProgress(s)
                             if (!progress) return null
@@ -234,11 +237,11 @@ function SessionItem(props: {
                         })()}
                         {s.pendingRequestsCount > 0 ? (
                             <span className="text-[var(--app-badge-warning-text)]">
-                                pending {s.pendingRequestsCount}
+                                {t('session.item.pending')} {s.pendingRequestsCount}
                             </span>
                         ) : null}
                         <span className="text-[var(--app-hint)]">
-                            {formatRelativeTime(s.updatedAt)}
+                            {formatRelativeTime(s.updatedAt, t)}
                         </span>
                     </div>
                 </div>
@@ -254,9 +257,9 @@ function SessionItem(props: {
                         </span>
                         {getAgentLabel(s)}
                     </span>
-                    <span>model: {getModelLabel(s)}</span>
+                    <span>{t('session.item.modelMode')}: {s.modelMode || 'default'}</span>
                     {s.metadata?.worktree?.branch ? (
-                        <span>worktree: {s.metadata.worktree.branch}</span>
+                        <span>{t('session.item.worktree')}: {s.metadata.worktree.branch}</span>
                     ) : null}
                 </div>
             </button>
@@ -283,10 +286,10 @@ function SessionItem(props: {
             <ConfirmDialog
                 isOpen={archiveOpen}
                 onClose={() => setArchiveOpen(false)}
-                title="Archive Session"
-                description={`Are you sure you want to archive "${sessionName}"? This will disconnect the active session.`}
-                confirmLabel="Archive"
-                confirmingLabel="Archiving..."
+                title={t('dialog.archive.title')}
+                description={t('dialog.archive.description', { name: sessionName })}
+                confirmLabel={t('dialog.archive.confirm')}
+                confirmingLabel={t('dialog.archive.confirming')}
                 onConfirm={archiveSession}
                 isPending={isPending}
                 destructive
@@ -295,10 +298,10 @@ function SessionItem(props: {
             <ConfirmDialog
                 isOpen={deleteOpen}
                 onClose={() => setDeleteOpen(false)}
-                title="Delete Session"
-                description={`Are you sure you want to delete "${sessionName}"? This action cannot be undone.`}
-                confirmLabel="Delete"
-                confirmingLabel="Deleting..."
+                title={t('dialog.delete.title')}
+                description={t('dialog.delete.description', { name: sessionName })}
+                confirmLabel={t('dialog.delete.confirm')}
+                confirmingLabel={t('dialog.delete.confirming')}
                 onConfirm={deleteSession}
                 isPending={isPending}
                 destructive
@@ -316,6 +319,7 @@ export function SessionList(props: {
     renderHeader?: boolean
     api: ApiClient | null
 }) {
+    const { t } = useTranslation()
     const { renderHeader = true, api } = props
     const groups = useMemo(
         () => groupSessionsByDirectory(props.sessions),
@@ -359,13 +363,13 @@ export function SessionList(props: {
             {renderHeader ? (
                 <div className="flex items-center justify-between px-3 py-1">
                     <div className="text-xs text-[var(--app-hint)]">
-                        {props.sessions.length} sessions in {groups.length} projects
+                        {t('sessions.count', { n: props.sessions.length, m: groups.length })}
                     </div>
                     <button
                         type="button"
                         onClick={props.onNewSession}
                         className="session-list-new-button p-1.5 rounded-full text-[var(--app-link)] transition-colors"
-                        title="New Session"
+                        title={t('sessions.new')}
                     >
                         <PlusIcon className="h-5 w-5" />
                     </button>
diff --git a/web/src/components/Spinner.tsx b/web/src/components/Spinner.tsx
index 5643fdbb..484c24b1 100644
--- a/web/src/components/Spinner.tsx
+++ b/web/src/components/Spinner.tsx
@@ -1,4 +1,5 @@
 import { cn } from '@/lib/utils'
+import { useTranslation } from '@/lib/use-translation'
 
 type SpinnerProps = {
     size?: 'sm' | 'md' | 'lg'
@@ -11,12 +12,13 @@ export function Spinner({
     className,
     label
 }: SpinnerProps) {
+    const { t } = useTranslation()
     const sizeClasses = {
         sm: 'h-4 w-4',
         md: 'h-5 w-5',
         lg: 'h-6 w-6'
     }
-    const effectiveLabel = label === undefined ? 'Loading' : label
+    const effectiveLabel = label === undefined ? t('loading') : label
     const accessibilityProps = effectiveLabel === null
         ? { 'aria-hidden': true }
         : { role: 'status', 'aria-label': effectiveLabel }
diff --git a/web/src/components/SyncingBanner.tsx b/web/src/components/SyncingBanner.tsx
index a34a60d8..8499b1e0 100644
--- a/web/src/components/SyncingBanner.tsx
+++ b/web/src/components/SyncingBanner.tsx
@@ -1,7 +1,9 @@
 import { useOnlineStatus } from '@/hooks/useOnlineStatus'
 import { Spinner } from '@/components/Spinner'
+import { useTranslation } from '@/lib/use-translation'
 
 export function SyncingBanner({ isSyncing }: { isSyncing: boolean }) {
+    const { t } = useTranslation()
     const isOnline = useOnlineStatus()
 
     // Don't show syncing banner when offline (OfflineBanner takes precedence)
@@ -12,7 +14,7 @@ export function SyncingBanner({ isSyncing }: { isSyncing: boolean }) {
     return (
         <div className="fixed top-0 left-0 right-0 bg-[var(--app-banner-bg)] text-[var(--app-banner-text)] text-center py-2 text-sm font-medium z-50 flex items-center justify-center gap-2 border-b border-[var(--app-divider)]">
             <Spinner size="sm" label={null} className="text-[var(--app-banner-text)]" />
-            Syncing…
+            {t('syncing.title')}
         </div>
     )
 }
diff --git a/web/src/components/ToolCard/AskUserQuestionFooter.tsx b/web/src/components/ToolCard/AskUserQuestionFooter.tsx
index 55ccc7a4..a8164711 100644
--- a/web/src/components/ToolCard/AskUserQuestionFooter.tsx
+++ b/web/src/components/ToolCard/AskUserQuestionFooter.tsx
@@ -7,6 +7,7 @@ import { isAskUserQuestionToolName, parseAskUserQuestionInput, type AskUserQuest
 import { cn } from '@/lib/utils'
 import { usePlatform } from '@/hooks/usePlatform'
 import { Spinner } from '@/components/Spinner'
+import { useTranslation } from '@/lib/use-translation'
 
 function SelectionMark(props: { checked: boolean; mode: 'single' | 'multi' }) {
     const mark = props.mode === 'multi'
@@ -80,6 +81,7 @@ export function AskUserQuestionFooter(props: {
     disabled: boolean
     onDone: () => void
 }) {
+    const { t } = useTranslation()
     const { haptic } = usePlatform()
     const permission = props.tool.permission
     const parsed = useMemo(() => parseAskUserQuestionInput(props.tool.input), [props.tool.input])
@@ -116,7 +118,7 @@ export function AskUserQuestionFooter(props: {
             props.onDone()
         } catch (e) {
             haptic.notification('error')
-            setError(e instanceof Error ? e.message : 'Request failed')
+            setError(e instanceof Error ? e.message : t('dialog.error.default'))
         }
     }
 
@@ -149,7 +151,7 @@ export function AskUserQuestionFooter(props: {
         if (questions.length === 0) {
             const a0 = validateQuestion(0)
             if (!a0) {
-                setError('Please type an answer.')
+                setError(t('tool.selectOption'))
                 return
             }
             answers['0'] = a0
@@ -157,7 +159,7 @@ export function AskUserQuestionFooter(props: {
             for (let i = 0; i < questions.length; i += 1) {
                 const a = validateQuestion(i)
                 if (!a) {
-                    setError(`Please answer question ${i + 1} before submitting.`)
+                    setError(t('tool.selectOption'))
                     setStep(i)
                     return
                 }
@@ -174,7 +176,7 @@ export function AskUserQuestionFooter(props: {
         if (questions.length === 0) return
         const a = validateQuestion(clampedStep)
         if (!a) {
-            setError('Please select at least one option or type an answer.')
+            setError(t('tool.selectOption'))
             return
         }
         setError(null)
@@ -261,7 +263,7 @@ export function AskUserQuestionFooter(props: {
                 <div className="min-w-0">
                     <div className="flex items-center gap-2">
                         <Badge variant="default">
-                            Question
+                            {t('tool.question')}
                         </Badge>
                         <span className="font-mono text-xs text-[var(--app-hint)]">
                             [{clampedStep + 1}/{total}]
@@ -279,13 +281,13 @@ export function AskUserQuestionFooter(props: {
             {questions.length === 0 ? (
                 <div className="mt-3">
                     <div className="text-sm text-[var(--app-hint)]">
-                        AskUserQuestion payload is not in the expected format. Type your answer:
+                        {t('tool.askUserQuestion.fallback')}
                     </div>
                     <textarea
                         value={fallbackText}
                         onChange={(e) => setFallbackText(e.target.value)}
                         disabled={props.disabled || loading}
-                        placeholder="Type your answer…"
+                        placeholder={t('tool.askUserQuestion.placeholder')}
                         className="mt-2 w-full min-h-[88px] resize-y rounded-md border border-[var(--app-border)] bg-[var(--app-bg)] px-3 py-2 text-sm text-[var(--app-fg)] placeholder:text-[var(--app-hint)] focus:outline-none focus:ring-2 focus:ring-[var(--app-button)] focus:border-transparent disabled:opacity-50"
                     />
                 </div>
@@ -331,8 +333,8 @@ export function AskUserQuestionFooter(props: {
                             checked={otherSelectedByQuestion[clampedStep] ?? false}
                             mode={mode}
                             disabled={props.disabled || loading}
-                            title="Other"
-                            description="Type your own answer"
+                            title={t('tool.other')}
+                            description={t('tool.otherDescription')}
                             onClick={() => toggleOther(clampedStep)}
                         />
 
@@ -341,7 +343,7 @@ export function AskUserQuestionFooter(props: {
                                 value={otherTextByQuestion[clampedStep] ?? ''}
                                 onChange={(e) => updateOtherText(clampedStep, e.target.value)}
                                 disabled={props.disabled || loading}
-                                placeholder="Or type your own answer…"
+                                placeholder={t('tool.askUserQuestion.otherPlaceholder')}
                                 className="mt-2 w-full min-h-[88px] resize-y rounded-md border border-[var(--app-border)] bg-[var(--app-bg)] px-3 py-2 text-sm text-[var(--app-fg)] placeholder:text-[var(--app-hint)] focus:outline-none focus:ring-2 focus:ring-[var(--app-button)] focus:border-transparent disabled:opacity-50"
                             />
                         ) : null}
@@ -359,7 +361,7 @@ export function AskUserQuestionFooter(props: {
                             disabled={props.disabled || loading || clampedStep === 0}
                             onClick={prev}
                         >
-                            ← Prev
+                            {t('tool.prev')}
                         </Button>
                     ) : null}
                 </div>
@@ -373,7 +375,7 @@ export function AskUserQuestionFooter(props: {
                             disabled={props.disabled || loading}
                             onClick={next}
                         >
-                            Next →
+                            {t('tool.next')}
                         </Button>
                     ) : (
                         <Button
@@ -388,10 +390,10 @@ export function AskUserQuestionFooter(props: {
                             {loading ? (
                                 <>
                                     <Spinner size="sm" label={null} className="text-[var(--app-button-text)]" />
-                                    Submitting…
+                                    {t('tool.submitting')}
                                 </>
                             ) : (
-                                'Submit'
+                                t('tool.submit')
                             )}
                         </Button>
                     )}
diff --git a/web/src/components/ToolCard/PermissionFooter.tsx b/web/src/components/ToolCard/PermissionFooter.tsx
index 1fd88d86..e40bec87 100644
--- a/web/src/components/ToolCard/PermissionFooter.tsx
+++ b/web/src/components/ToolCard/PermissionFooter.tsx
@@ -4,6 +4,7 @@ import type { SessionMetadataSummary } from '@/types/api'
 import type { ChatToolCall, ToolPermission } from '@/chat/types'
 import { usePlatform } from '@/hooks/usePlatform'
 import { Spinner } from '@/components/Spinner'
+import { useTranslation } from '@/lib/use-translation'
 
 function isObject(value: unknown): value is Record<string, unknown> {
     return Boolean(value) && typeof value === 'object'
@@ -39,29 +40,29 @@ function isCodexSession(metadata: SessionMetadataSummary | null, toolName: strin
         || toolName.startsWith('Gemini')
 }
 
-function formatPermissionSummary(permission: ToolPermission, toolName: string, toolInput: unknown, codex: boolean): string {
-    if (permission.status === 'pending') return 'Waiting for approval…'
-    if (permission.status === 'canceled') return permission.reason ? `Canceled: ${permission.reason}` : 'Canceled'
+function formatPermissionSummary(permission: ToolPermission, toolName: string, toolInput: unknown, codex: boolean, t: (key: string) => string): string {
+    if (permission.status === 'pending') return t('tool.waitingForApproval')
+    if (permission.status === 'canceled') return permission.reason ? `${t('tool.canceled')}: ${permission.reason}` : t('tool.canceled')
 
     if (codex) {
-        if (permission.status === 'approved' && permission.decision === 'approved_for_session') return 'Approved for session'
-        if (permission.status === 'approved') return 'Approved'
-        if (permission.status === 'denied' && permission.decision === 'abort') return permission.reason ? `Aborted: ${permission.reason}` : 'Aborted'
-        if (permission.status === 'denied') return permission.reason ? `Denied: ${permission.reason}` : 'Denied'
-        return 'Permission'
+        if (permission.status === 'approved' && permission.decision === 'approved_for_session') return t('tool.approvedForSession')
+        if (permission.status === 'approved') return t('tool.approved')
+        if (permission.status === 'denied' && permission.decision === 'abort') return permission.reason ? `${t('tool.aborted')}: ${permission.reason}` : t('tool.aborted')
+        if (permission.status === 'denied') return permission.reason ? `${t('tool.deny')}: ${permission.reason}` : t('tool.deny')
+        return t('tool.allow')
     }
 
     if (permission.status === 'approved') {
-        if (permission.mode === 'acceptEdits') return 'Approved: Allow all edits'
-        if (isToolAllowedForSession(toolName, toolInput, permission.allowedTools)) return 'Approved: Allow for session'
-        return 'Approved'
+        if (permission.mode === 'acceptEdits') return t('tool.approvedAllowAllEdits')
+        if (isToolAllowedForSession(toolName, toolInput, permission.allowedTools)) return t('tool.approvedForSession')
+        return t('tool.approved')
     }
 
     if (permission.status === 'denied') {
-        return permission.reason ? `Denied: ${permission.reason}` : 'Denied'
+        return permission.reason ? `${t('tool.deny')}: ${permission.reason}` : t('tool.deny')
     }
 
-    return 'Permission'
+    return t('tool.allow')
 }
 
 function PermissionRowButton(props: {
@@ -104,6 +105,7 @@ export function PermissionFooter(props: {
     disabled: boolean
     onDone: () => void
 }) {
+    const { t } = useTranslation()
     const { haptic } = usePlatform()
     const permission = props.tool.permission
     const [loading, setLoading] = useState<'allow' | 'deny' | 'abort' | null>(null)
@@ -115,7 +117,7 @@ export function PermissionFooter(props: {
 
     if (!permission) return null
 
-    const summary = formatPermissionSummary(permission, props.tool.name, props.tool.input, codex)
+    const summary = formatPermissionSummary(permission, props.tool.name, props.tool.input, codex, t)
     const isPending = permission.status === 'pending'
 
     const run = async (action: () => Promise<void>, hapticType: 'success' | 'error') => {
@@ -127,7 +129,7 @@ export function PermissionFooter(props: {
             props.onDone()
         } catch (e) {
             haptic.notification('error')
-            setError(e instanceof Error ? e.message : 'Request failed')
+            setError(e instanceof Error ? e.message : t('tool.requestFailed'))
         }
     }
 
@@ -223,21 +225,21 @@ export function PermissionFooter(props: {
                 {codex ? (
                     <>
                         <PermissionRowButton
-                            label="Yes"
+                            label={t('tool.yes')}
                             tone="allow"
                             loading={loading === 'allow'}
                             disabled={props.disabled || loading !== null || loadingForSession}
                             onClick={() => codexApprove('approved')}
                         />
                         <PermissionRowButton
-                            label="Yes for session"
+                            label={t('tool.yesForSession')}
                             tone="neutral"
                             loading={loadingForSession}
                             disabled={props.disabled || loading !== null || loadingForSession}
                             onClick={() => codexApprove('approved_for_session')}
                         />
                         <PermissionRowButton
-                            label="Abort"
+                            label={t('tool.abortLabel')}
                             tone="deny"
                             loading={loading === 'abort'}
                             disabled={props.disabled || loading !== null || loadingForSession}
@@ -247,7 +249,7 @@ export function PermissionFooter(props: {
                 ) : (
                     <>
                         <PermissionRowButton
-                            label="Allow"
+                            label={t('tool.allow')}
                             tone="allow"
                             loading={loading === 'allow'}
                             disabled={props.disabled || loading !== null || loadingAllEdits || loadingForSession}
@@ -255,7 +257,7 @@ export function PermissionFooter(props: {
                         />
                         {canAllowForSession ? (
                             <PermissionRowButton
-                                label="Allow for session"
+                                label={t('tool.allowForSession')}
                                 tone="neutral"
                                 loading={loadingForSession}
                                 disabled={props.disabled || loading !== null || loadingAllEdits || loadingForSession}
@@ -264,7 +266,7 @@ export function PermissionFooter(props: {
                         ) : null}
                         {canAllowAllEdits ? (
                             <PermissionRowButton
-                                label="Allow all edits"
+                                label={t('tool.allowAll')}
                                 tone="neutral"
                                 loading={loadingAllEdits}
                                 disabled={props.disabled || loading !== null || loadingAllEdits || loadingForSession}
@@ -272,7 +274,7 @@ export function PermissionFooter(props: {
                             />
                         ) : null}
                         <PermissionRowButton
-                            label="Deny"
+                            label={t('tool.deny')}
                             tone="deny"
                             loading={loading === 'deny'}
                             disabled={props.disabled || loading !== null || loadingAllEdits || loadingForSession}
diff --git a/web/src/components/ToolCard/ToolCard.tsx b/web/src/components/ToolCard/ToolCard.tsx
index af5c891e..2c336393 100644
--- a/web/src/components/ToolCard/ToolCard.tsx
+++ b/web/src/components/ToolCard/ToolCard.tsx
@@ -15,6 +15,7 @@ import { getToolFullViewComponent, getToolViewComponent } from '@/components/Too
 import { getToolResultViewComponent } from '@/components/ToolCard/views/_results'
 import { usePointerFocusRing } from '@/hooks/usePointerFocusRing'
 import { cn } from '@/lib/utils'
+import { useTranslation } from '@/lib/use-translation'
 
 function isObject(value: unknown): value is Record<string, unknown> {
     return Boolean(value) && typeof value === 'object'
@@ -310,6 +311,7 @@ type ToolCardProps = {
 }
 
 function ToolCardInner(props: ToolCardProps) {
+    const { t } = useTranslation()
     const presentation = useMemo(() => getToolPresentation({
         toolName: props.block.tool.name,
         input: props.block.tool.input,
@@ -407,7 +409,7 @@ function ToolCardInner(props: ToolCardProps) {
                                 <div className="mt-3 flex max-h-[75vh] flex-col gap-4 overflow-auto">
                                     <div>
                                         <div className="mb-1 text-xs font-medium text-[var(--app-hint)]">
-                                            {isAskUserQuestionWithAnswers ? 'Questions & Answers' : 'Input'}
+                                            {isAskUserQuestionWithAnswers ? t('tool.questionsAnswers') : t('tool.input')}
                                         </div>
                                         {FullToolView ? (
                                             <FullToolView block={props.block} metadata={props.metadata} />
@@ -417,7 +419,7 @@ function ToolCardInner(props: ToolCardProps) {
                                     </div>
                                     {!isAskUserQuestionWithAnswers && (
                                         <div>
-                                            <div className="mb-1 text-xs font-medium text-[var(--app-hint)]">Result</div>
+                                            <div className="mb-1 text-xs font-medium text-[var(--app-hint)]">{t('tool.result')}</div>
                                             <ResultToolView block={props.block} metadata={props.metadata} />
                                         </div>
                                     )}
@@ -444,11 +446,11 @@ function ToolCardInner(props: ToolCardProps) {
                         ) : (
                             <div className="mt-3 flex flex-col gap-3">
                                 <div>
-                                    <div className="mb-1 text-xs font-medium text-[var(--app-hint)]">Input</div>
+                                    <div className="mb-1 text-xs font-medium text-[var(--app-hint)]">{t('tool.input')}</div>
                                     {renderToolInput(props.block)}
                                 </div>
                                 <div>
-                                    <div className="mb-1 text-xs font-medium text-[var(--app-hint)]">Result</div>
+                                    <div className="mb-1 text-xs font-medium text-[var(--app-hint)]">{t('tool.result')}</div>
                                     <ResultToolView block={props.block} metadata={props.metadata} />
                                 </div>
                             </div>
diff --git a/web/src/components/ui/ConfirmDialog.tsx b/web/src/components/ui/ConfirmDialog.tsx
index 8b16b72b..712bd03e 100644
--- a/web/src/components/ui/ConfirmDialog.tsx
+++ b/web/src/components/ui/ConfirmDialog.tsx
@@ -7,6 +7,7 @@ import {
     DialogDescription
 } from '@/components/ui/dialog'
 import { Button } from '@/components/ui/button'
+import { useTranslation } from '@/lib/use-translation'
 
 type ConfirmDialogProps = {
     isOpen: boolean
@@ -21,6 +22,7 @@ type ConfirmDialogProps = {
 }
 
 export function ConfirmDialog(props: ConfirmDialogProps) {
+    const { t } = useTranslation()
     const {
         isOpen,
         onClose,
@@ -48,7 +50,10 @@ export function ConfirmDialog(props: ConfirmDialogProps) {
             await onConfirm()
             onClose()
         } catch (err) {
-            const message = err instanceof Error ? err.message : 'Operation failed. Please try again.'
+            const message =
+                err instanceof Error && err.message
+                    ? err.message
+                    : t('dialog.error.default')
             setError(message)
         }
     }
@@ -76,12 +81,11 @@ export function ConfirmDialog(props: ConfirmDialogProps) {
                         onClick={onClose}
                         disabled={isPending}
                     >
-                        Cancel
+                        {t('button.cancel')}
                     </Button>
                     <Button
                         type="button"
-                        variant="secondary"
-                        className={destructive ? 'text-red-500' : ''}
+                        variant={destructive ? 'destructive' : 'secondary'}
                         onClick={handleConfirm}
                         disabled={isPending}
                     >
diff --git a/web/src/lib/i18n-context.tsx b/web/src/lib/i18n-context.tsx
new file mode 100644
index 00000000..99979c56
--- /dev/null
+++ b/web/src/lib/i18n-context.tsx
@@ -0,0 +1,54 @@
+import { createContext, useEffect, useState, useCallback, type ReactNode } from 'react'
+import { en, zhCN } from './locales'
+
+export type Locale = 'en' | 'zh-CN'
+
+export type Translations = Record<string, string>
+
+export type I18nContextValue = {
+  t: (key: string, params?: Record<string, string | number>) => string
+  locale: Locale
+  setLocale: (locale: Locale) => void
+}
+
+export const I18nContext = createContext<I18nContextValue | null>(null)
+
+const locales: Record<Locale, Translations> = { en, 'zh-CN': zhCN }
+
+function interpolate(str: string, params?: Record<string, string | number>): string {
+  if (!params) return str
+  return str.replace(/\{(\w+)\}/g, (match, key) => {
+    const value = params[key]
+    return value !== undefined ? String(value) : match
+  })
+}
+
+export function I18nProvider({ children }: { children: ReactNode }) {
+  const [locale, setLocaleState] = useState<Locale>(() => {
+    const saved = localStorage.getItem('hapi-lang')
+    return (saved === 'en' || saved === 'zh-CN') ? saved : 'en'
+  })
+
+  const setLocale = useCallback((newLocale: Locale) => {
+    setLocaleState(newLocale)
+    localStorage.setItem('hapi-lang', newLocale)
+    document.documentElement.lang = newLocale
+  }, [])
+
+  const t = useCallback((key: string, params?: Record<string, string | number>): string => {
+    const dict = locales[locale] ?? locales.en
+    const value = dict[key]
+    const fallback = locales.en[key] ?? key
+    return interpolate(value ?? fallback, params)
+  }, [locale])
+
+  useEffect(() => {
+    document.documentElement.lang = locale
+  }, [locale])
+
+  return (
+    <I18nContext.Provider value={{ t, locale, setLocale }}>
+      {children}
+    </I18nContext.Provider>
+  )
+}
diff --git a/web/src/lib/locales/en.ts b/web/src/lib/locales/en.ts
new file mode 100644
index 00000000..6a2ef5ff
--- /dev/null
+++ b/web/src/lib/locales/en.ts
@@ -0,0 +1,224 @@
+export default {
+  // Loading states
+  'loading': 'Loading…',
+  'authorizing': 'Authorizing…',
+  'loading.session': 'Loading session…',
+  'loading.git': 'Loading Git status…',
+  'loading.files': 'Loading files…',
+  'loading.messages': 'Loading messages…',
+  'loading.machines': 'Loading machines…',
+
+  // Login / Auth
+  'login.title': 'HAPI',
+  'login.subtitle': 'Vibe Coding Anytime, Anywhere',
+  'login.bind.title': 'Bind Telegram',
+  'login.submit': 'Sign In',
+  'login.bind.submit': 'Bind',
+  'login.submitting': 'Signing in…',
+  'login.bind.submitting': 'Binding…',
+  'login.placeholder': 'Access token',
+  'login.error.enterToken': 'Please enter an access token',
+  'login.error.bindingUnavailable': 'Binding is unavailable.',
+  'login.error.loginUnavailable': 'Login is unavailable.',
+  'login.error.bindFailed': 'Binding failed',
+  'login.error.authFailed': 'Authentication failed',
+  'login.help': 'Needs help?',
+  'login.server.default': '(Default)',
+  'login.server.custom': '(Custom)',
+  'login.server.title': 'Server URL',
+  'login.server.description': 'Set hapi server origin for API and live updates.',
+  'login.server.current': 'Current:',
+  'login.server.origin': 'Server origin',
+  'login.server.placeholder': 'https://hapi.example.com',
+  'login.server.hint': 'Use http(s) only. Any path is ignored.',
+  'login.server.useSameOrigin': 'Use same origin',
+  'login.server.save': 'Save server',
+  'login.footer': 'Designed with',
+  'login.footer.for': 'for Vibe Coding',
+  'login.footer.copyright': '©',
+
+  // Sessions page
+  'sessions.count': '{n} sessions in {m} projects',
+  'sessions.new': 'New Session',
+
+  // Session list
+  'session.item.path': 'path',
+  'session.item.agent': 'agent',
+  'session.item.model': 'model',
+  'session.item.modelMode': 'mode',
+  'session.item.worktree': 'worktree',
+  'session.item.pending': 'pending',
+  'session.item.thinking': 'thinking',
+  'session.time.justNow': 'just now',
+  'session.time.minutesAgo': '{n}m ago',
+  'session.time.hoursAgo': '{n}h ago',
+  'session.time.daysAgo': '{n}d ago',
+
+  // Session header
+  'session.title': 'Files',
+  'session.more': 'More actions',
+
+  // Session actions
+  'session.action.rename': 'Rename',
+  'session.action.archive': 'Archive',
+  'session.action.delete': 'Delete',
+  'session.action.copy': 'Copy',
+
+  // Dialogs
+  'dialog.rename.title': 'Rename Session',
+  'dialog.rename.placeholder': 'Session name',
+  'dialog.rename.save': 'Save',
+  'dialog.rename.saving': 'Saving…',
+  'dialog.rename.error': 'Failed to rename. Please try again.',
+  'dialog.archive.title': 'Archive Session',
+  'dialog.archive.description': 'Are you sure you want to archive "{name}"? This will disconnect active session.',
+  'dialog.archive.confirm': 'Archive',
+  'dialog.archive.confirming': 'Archiving…',
+  'dialog.delete.title': 'Delete Session',
+  'dialog.delete.description': 'Are you sure you want to delete "{name}"? This action cannot be undone.',
+  'dialog.delete.confirm': 'Delete',
+  'dialog.delete.confirming': 'Deleting…',
+  'dialog.error.default': 'Operation failed. Please try again.',
+
+  // Common buttons
+  'button.cancel': 'Cancel',
+  'button.save': 'Save',
+  'button.confirm': 'Confirm',
+  'button.close': 'Close',
+  'button.dismiss': 'Dismiss',
+  'button.copy': 'Copy',
+
+  // New session form
+  'newSession.machine': 'Machine',
+  'newSession.directory': 'Directory',
+  'newSession.placeholder': '/path/to/project',
+  'newSession.recent': 'Recent paths',
+  'newSession.type': 'Session type',
+  'newSession.type.simple': 'Simple',
+  'newSession.type.simple.desc': 'Use selected directory as-is',
+  'newSession.type.worktree': 'Worktree',
+  'newSession.type.worktree.desc': 'Create a new worktree next to repo',
+  'newSession.type.worktree.placeholder': 'feature-x (default 1228-xxxx)',
+  'newSession.agent': 'Agent',
+  'newSession.yolo': 'YOLO mode',
+  'newSession.yolo.title': 'Bypass approvals and sandbox',
+  'newSession.yolo.desc': 'Uses dangerous agent flags when spawning.',
+  'newSession.create': 'Create',
+  'newSession.creating': 'Creating…',
+
+  // Spawn session (old component)
+  'spawn.title': 'Create Session',
+  'spawn.sessionType': 'Session type',
+  'spawn.useAsIs': 'Use selected directory as-is',
+  'spawn.createWorktree': 'Create a new worktree next to repo',
+  'spawn.worktreePlaceholder': 'feature-x (default 1228-xxxx)',
+  'spawn.cancel': 'Cancel',
+  'spawn.create': 'Create Session',
+  'spawn.creating': 'Creating…',
+
+  // Machine
+  'machine.unknown': 'Unknown platform',
+
+  // Chat
+  'chat.placeholder': 'Type a message…',
+  'chat.send': 'Send',
+  'chat.abort': 'Abort',
+  'chat.settings': 'Settings',
+  'chat.terminal': 'Terminal',
+  'chat.switchRemote': 'Switch to remote mode',
+
+  // Terminal
+  'terminal.commandName': 'Command',
+  'terminal.commandMessage': 'Command message',
+  'terminal.commandArgs': 'Command args',
+  'terminal.stdout': 'Stdout',
+  'terminal.stderr': 'Stderr',
+
+  // Code block
+  'code.copy': 'Copy',
+
+  // Diff view
+  'diff.title': 'Diff',
+  'diff.view': 'View',
+
+  // Tool card
+  'tool.askQuestion': 'Other',
+  'tool.edit': 'Edit',
+  'tool.multiedit': 'Multi-edit',
+  'tool.write': 'Write',
+  'tool.todo': 'Todo',
+  'tool.confirm': 'Confirm',
+  'tool.deny': 'Deny',
+  'tool.abort': 'Abort',
+  'tool.allow': 'Allow',
+  'tool.allowAll': 'Allow all edits',
+  'tool.denyAll': 'Deny all edits',
+  'tool.approved': 'Approved',
+  'tool.rejected': 'Rejected',
+  'tool.cancel': 'Cancel',
+  'tool.exitPlan': 'Exit Plan Mode',
+  'tool.patch': 'Patch',
+  'tool.input': 'Input',
+  'tool.result': 'Result',
+  'tool.questionsAnswers': 'Questions & Answers',
+  'tool.submit': 'Submit',
+  'tool.submitting': 'Submitting…',
+  'tool.prev': '← Prev',
+  'tool.next': 'Next →',
+  'tool.yes': 'Yes',
+  'tool.yesForSession': 'Yes for session',
+  'tool.allowForSession': 'Allow for session',
+  'tool.abortLabel': 'Abort',
+  'tool.other': 'Other',
+  'tool.otherDescription': 'Type your own answer',
+  'tool.question': 'Question',
+  'tool.selectOption': 'Please select at least one option or type an answer.',
+  'tool.waitingForApproval': 'Waiting for approval…',
+  'tool.canceled': 'Canceled',
+  'tool.approvedForSession': 'Approved for session',
+  'tool.aborted': 'Aborted',
+  'tool.approvedAllowAllEdits': 'Approved: Allow all edits',
+  'tool.requestFailed': 'Request failed',
+  'tool.askUserQuestion.fallback': 'AskUserQuestion payload is not in the expected format. Type your answer:',
+  'tool.askUserQuestion.placeholder': 'Type your answer…',
+  'tool.askUserQuestion.otherPlaceholder': 'Or type your own answer…',
+
+  // Composer buttons
+  'composer.settings': 'Settings',
+  'composer.terminal': 'Terminal',
+  'composer.abort': 'Abort',
+  'composer.switchRemote': 'Switch to remote mode',
+  'composer.send': 'Send',
+
+  // Banners
+  'offline.title': 'Offline',
+  'offline.message': 'You are currently offline. Some features may be limited.',
+  'syncing.title': 'Syncing…',
+  'syncing.message': 'Your data is being synchronized.',
+
+  // Install prompt
+  'install.title': 'Install HAPI',
+  'install.description': 'Add HAPI to your home screen for quick access.',
+  'install.button': 'Install',
+
+  // Language switcher
+  'language.title': 'Language',
+  'language.english': 'English',
+  'language.chinese': '简体中文',
+
+  // Misc
+  'misc.noMachines': 'No machines available',
+  'misc.machine': 'Machine',
+  'misc.permissionMode': 'Permission Mode',
+  'misc.model': 'Model',
+  'misc.loading': 'Loading…',
+  'misc.loadOlder': 'Load older',
+  'misc.newMessage': '{n} new message{s}',
+  'misc.loadingMessages': 'Loading messages…',
+  'misc.typeMessage': "Type 'continue' to resume...",
+  'misc.typeAMessage': 'Type a message...',
+  'misc.offline': 'offline',
+  'misc.permissionRequired': 'permission required',
+  'misc.percentLeft': '{percent}% left',
+  'misc.online': 'online',
+} as const
\ No newline at end of file
diff --git a/web/src/lib/locales/index.ts b/web/src/lib/locales/index.ts
new file mode 100644
index 00000000..e4668824
--- /dev/null
+++ b/web/src/lib/locales/index.ts
@@ -0,0 +1,2 @@
+export { default as en } from './en'
+export { default as zhCN } from './zh-CN'
diff --git a/web/src/lib/locales/zh-CN.ts b/web/src/lib/locales/zh-CN.ts
new file mode 100644
index 00000000..73327340
--- /dev/null
+++ b/web/src/lib/locales/zh-CN.ts
@@ -0,0 +1,226 @@
+export default {
+  // Loading states
+  'loading': '加载中…',
+  'authorizing': '认证中…',
+  'loading.session': '加载会话…',
+  'loading.git': '加载 Git 状态…',
+  'loading.files': '加载文件…',
+  'loading.messages': '加载消息…',
+  'loading.machines': '加载机器…',
+
+  // Login / Auth
+  'login.title': 'HAPI',
+  'login.subtitle': '随时随地，Vibe Coding',
+  'login.bind.title': '绑定 Telegram',
+  'login.submit': '登录',
+  'login.bind.submit': '绑定',
+  'login.submitting': '登录中…',
+  'login.bind.submitting': '绑定中…',
+  'login.placeholder': '访问令牌',
+  'login.error.enterToken': '请输入访问令牌',
+  'login.error.bindingUnavailable': '绑定服务不可用。',
+  'login.error.loginUnavailable': '登录服务不可用。',
+  'login.error.bindFailed': '绑定失败',
+  'login.error.authFailed': '认证失败',
+  'login.help': '需要帮助？',
+  'login.server.default': '(默认)',
+  'login.server.custom': '(自定义)',
+  'login.server.title': '服务器地址',
+  'login.server.description': '设置 HAPI 服务器地址以使用 API 和实时更新。',
+  'login.server.current': '当前：',
+  'login.server.origin': '服务器地址',
+  'login.server.placeholder': 'https://hapi.example.com',
+  'login.server.hint': '仅使用 http(s) 协议。任何路径将被忽略。',
+  'login.server.useSameOrigin': '使用同源',
+  'login.server.save': '保存',
+  'login.footer': '用',
+  'login.footer.for': '设计，Vibe Coding',
+  'login.footer.copyright': '©',
+
+  // Sessions page
+  'sessions.count': '{n} 个会话，{m} 个项目',
+  'sessions.new': '新建会话',
+
+  // Session list
+  'session.item.path': '路径',
+  'session.item.agent': '代理',
+  'session.item.model': '模型',
+  'session.item.modelMode': '模型',
+  'session.item.worktree': '工作树',
+  'session.item.pending': '待处理',
+  'session.item.thinking': '思考中',
+  'session.time.justNow': '刚刚',
+  'session.time.minutesAgo': '{n} 分钟前',
+  'session.time.hoursAgo': '{n} 小时前',
+  'session.time.daysAgo': '{n} 天前',
+
+  // Session header
+  'session.title': '文件',
+  'session.more': '更多操作',
+
+  // Session actions
+  'session.action.rename': '重命名',
+  'session.action.archive': '归档',
+  'session.action.delete': '删除',
+  'session.action.copy': '复制',
+
+  // Dialogs
+  'dialog.rename.title': '重命名会话',
+  'dialog.rename.placeholder': '会话名称',
+  'dialog.rename.save': '保存',
+  'dialog.rename.saving': '保存中…',
+  'dialog.rename.error': '重命名失败，请重试。',
+
+  'dialog.archive.title': '归档会话',
+  'dialog.archive.description': '确定要归档 "{name}" 吗？这将断开活动会话。',
+  'dialog.archive.confirm': '归档',
+  'dialog.archive.confirming': '归档中…',
+
+  'dialog.delete.title': '删除会话',
+  'dialog.delete.description': '确定要删除 "{name}" 吗？此操作无法撤销。',
+  'dialog.delete.confirm': '删除',
+  'dialog.delete.confirming': '删除中…',
+  'dialog.error.default': '操作失败，请重试。',
+
+  // Common buttons
+  'button.cancel': '取消',
+  'button.save': '保存',
+  'button.confirm': '确认',
+  'button.close': '关闭',
+  'button.dismiss': '忽略',
+  'button.copy': '复制',
+
+  // New session form
+  'newSession.machine': '机器',
+  'newSession.directory': '目录',
+  'newSession.placeholder': '/path/to/project',
+  'newSession.recent': '最近路径',
+  'newSession.type': '会话类型',
+  'newSession.type.simple': '简单',
+  'newSession.type.simple.desc': '直接使用选定的目录',
+  'newSession.type.worktree': '工作树',
+  'newSession.type.worktree.desc': '在仓库旁创建新工作树',
+  'newSession.type.worktree.placeholder': 'feature-x (默认 1228-xxxx)',
+  'newSession.agent': '代理',
+  'newSession.yolo': 'YOLO 模式',
+  'newSession.yolo.title': '跳过审批和沙箱',
+  'newSession.yolo.desc': '启动时使用危险的代理标志。',
+  'newSession.create': '创建',
+  'newSession.creating': '创建中…',
+
+  // Spawn session (old component)
+  'spawn.title': '创建会话',
+  'spawn.sessionType': '会话类型',
+  'spawn.useAsIs': '直接使用选定的目录',
+  'spawn.createWorktree': '在仓库旁创建新工作树',
+  'spawn.worktreePlaceholder': 'feature-x (默认 1228-xxxx)',
+  'spawn.cancel': '取消',
+  'spawn.create': '创建会话',
+  'spawn.creating': '创建中…',
+
+  // Machine
+  'machine.unknown': '未知平台',
+
+  // Chat
+  'chat.placeholder': '输入消息…',
+  'chat.send': '发送',
+  'chat.abort': '中止',
+  'chat.settings': '设置',
+  'chat.terminal': '终端',
+  'chat.switchRemote': '切换到远程模式',
+
+  // Terminal
+  'terminal.commandName': '命令',
+  'terminal.commandMessage': '命令消息',
+  'terminal.commandArgs': '命令参数',
+  'terminal.stdout': '标准输出',
+  'terminal.stderr': '标准错误',
+
+  // Code block
+  'code.copy': '复制',
+
+  // Diff view
+  'diff.title': '差异',
+  'diff.view': '查看',
+
+  // Tool card
+  'tool.askQuestion': '其他',
+  'tool.edit': '编辑',
+  'tool.multiedit': '多文件编辑',
+  'tool.write': '写入',
+  'tool.todo': '任务',
+  'tool.confirm': '确认',
+  'tool.deny': '拒绝',
+  'tool.abort': '中止',
+  'tool.allow': '允许',
+  'tool.allowAll': '允许所有编辑',
+  'tool.denyAll': '拒绝所有编辑',
+  'tool.approved': '已批准',
+  'tool.rejected': '已拒绝',
+  'tool.cancel': '取消',
+  'tool.exitPlan': '退出计划模式',
+  'tool.patch': '补丁',
+  'tool.input': '输入',
+  'tool.result': '结果',
+  'tool.questionsAnswers': '问答',
+  'tool.submit': '提交',
+  'tool.submitting': '提交中…',
+  'tool.prev': '← 上一个',
+  'tool.next': '下一个 →',
+  'tool.yes': '是',
+  'tool.yesForSession': '本会话允许',
+  'tool.allowForSession': '本会话允许',
+  'tool.abortLabel': '中止',
+  'tool.other': '其他',
+  'tool.otherDescription': '输入您自己的答案',
+  'tool.question': '问题',
+  'tool.selectOption': '请至少选择一个选项或输入答案。',
+  'tool.waitingForApproval': '等待审批…',
+  'tool.canceled': '已取消',
+  'tool.approvedForSession': '本会话已批准',
+  'tool.aborted': '已中止',
+  'tool.approvedAllowAllEdits': '已批准：允许所有编辑',
+  'tool.requestFailed': '请求失败',
+  'tool.askUserQuestion.fallback': 'AskUserQuestion 格式不正确。请输入您的答案：',
+  'tool.askUserQuestion.placeholder': '输入您的答案…',
+  'tool.askUserQuestion.otherPlaceholder': '或输入您自己的答案…',
+
+  // Composer buttons
+  'composer.settings': '设置',
+  'composer.terminal': '终端',
+  'composer.abort': '中止',
+  'composer.switchRemote': '切换到远程模式',
+  'composer.send': '发送',
+
+  // Banners
+  'offline.title': '离线',
+  'offline.message': '您当前处于离线状态。某些功能可能受限。',
+  'syncing.title': '同步中…',
+  'syncing.message': '正在同步您的数据。',
+
+  // Install prompt
+  'install.title': '安装 HAPI',
+  'install.description': '将 HAPI 添加到主屏幕以便快速访问。',
+  'install.button': '安装',
+
+  // Language switcher
+  'language.title': '语言',
+  'language.english': 'English',
+  'language.chinese': '简体中文',
+
+  // Misc
+  'misc.noMachines': '无可用机器',
+  'misc.machine': '机器',
+  'misc.permissionMode': '权限模式',
+  'misc.model': '模型',
+  'misc.loading': '加载中…',
+  'misc.loadOlder': '加载更早的',
+  'misc.newMessage': '{n} 条新消息',
+  'misc.loadingMessages': '加载消息中…',
+  'misc.typeMessage': "输入 'continue' 继续...",
+  'misc.typeAMessage': '输入消息...',
+  'misc.offline': '离线',
+  'misc.permissionRequired': '需要权限',
+  'misc.percentLeft': '剩余 {percent}%',
+  'misc.online': '在线',
+} as const
diff --git a/web/src/lib/use-translation.ts b/web/src/lib/use-translation.ts
new file mode 100644
index 00000000..defedfd4
--- /dev/null
+++ b/web/src/lib/use-translation.ts
@@ -0,0 +1,12 @@
+import { useContext } from 'react'
+import { I18nContext } from './i18n-context'
+
+export type { Locale, I18nContextValue } from './i18n-context'
+
+export function useTranslation() {
+  const context = useContext(I18nContext)
+  if (!context) {
+    throw new Error('useTranslation must be used within I18nProvider')
+  }
+  return context
+}
diff --git a/web/src/main.tsx b/web/src/main.tsx
index 3f857164..c8138d08 100644
--- a/web/src/main.tsx
+++ b/web/src/main.tsx
@@ -8,6 +8,7 @@ import { registerSW } from 'virtual:pwa-register'
 import { getTelegramWebApp, isTelegramEnvironment, loadTelegramSdk } from './hooks/useTelegram'
 import { queryClient } from './lib/query-client'
 import { createAppRouter } from './router'
+import { I18nProvider } from './lib/i18n-context'
 
 function getStartParam(): string | null {
     const query = new URLSearchParams(window.location.search)
@@ -65,10 +66,12 @@ async function bootstrap() {
 
     ReactDOM.createRoot(document.getElementById('root')!).render(
         <React.StrictMode>
-            <QueryClientProvider client={queryClient}>
-                <RouterProvider router={router} />
-                {import.meta.env.DEV ? <ReactQueryDevtools initialIsOpen={false} /> : null}
-            </QueryClientProvider>
+            <I18nProvider>
+                <QueryClientProvider client={queryClient}>
+                    <RouterProvider router={router} />
+                    {import.meta.env.DEV ? <ReactQueryDevtools initialIsOpen={false} /> : null}
+                </QueryClientProvider>
+            </I18nProvider>
         </React.StrictMode>
     )
 }
diff --git a/web/src/router.tsx b/web/src/router.tsx
index eed9d29e..41e07b2c 100644
--- a/web/src/router.tsx
+++ b/web/src/router.tsx
@@ -13,6 +13,7 @@ import { SessionChat } from '@/components/SessionChat'
 import { SessionList } from '@/components/SessionList'
 import { NewSession } from '@/components/NewSession'
 import { LoadingState } from '@/components/LoadingState'
+import { LanguageSwitcher } from '@/components/LanguageSwitcher'
 import { useAppContext } from '@/lib/app-context'
 import { useAppGoBack } from '@/hooks/useAppGoBack'
 import { isTelegramApp } from '@/hooks/useTelegram'
@@ -23,6 +24,7 @@ import { useSessions } from '@/hooks/queries/useSessions'
 import { useSlashCommands } from '@/hooks/queries/useSlashCommands'
 import { useSendMessage } from '@/hooks/mutations/useSendMessage'
 import { queryKeys } from '@/lib/query-keys'
+import { useTranslation } from '@/lib/use-translation'
 import FilesPage from '@/routes/sessions/files'
 import FilePage from '@/routes/sessions/file'
 import TerminalPage from '@/routes/sessions/terminal'
@@ -69,6 +71,7 @@ function PlusIcon(props: { className?: string }) {
 function SessionsPage() {
     const { api } = useAppContext()
     const navigate = useNavigate()
+    const { t } = useTranslation()
     const { sessions, isLoading, error, refetch } = useSessions(api)
 
     const handleRefresh = useCallback(() => {
@@ -82,16 +85,19 @@ function SessionsPage() {
             <div className="bg-[var(--app-bg)] pt-[env(safe-area-inset-top)]">
                 <div className="mx-auto w-full max-w-content flex items-center justify-between px-3 py-2">
                     <div className="text-xs text-[var(--app-hint)]">
-                        {sessions.length} sessions in {projectCount} projects
+                        {t('sessions.count', { n: sessions.length, m: projectCount })}
+                    </div>
+                    <div className="flex items-center gap-2">
+                        <LanguageSwitcher />
+                        <button
+                            type="button"
+                            onClick={() => navigate({ to: '/sessions/new' })}
+                            className="session-list-new-button p-1.5 rounded-full text-[var(--app-link)] transition-colors"
+                            title={t('sessions.new')}
+                        >
+                            <PlusIcon className="h-5 w-5" />
+                        </button>
                     </div>
-                    <button
-                        type="button"
-                        onClick={() => navigate({ to: '/sessions/new' })}
-                        className="session-list-new-button p-1.5 rounded-full text-[var(--app-link)] transition-colors"
-                        title="New Session"
-                    >
-                        <PlusIcon className="h-5 w-5" />
-                    </button>
                 </div>
             </div>
             <div className="flex-1 overflow-y-auto">