diff --git a/libs/hexagent_demo/backend/hexagent_api/config.py b/libs/hexagent_demo/backend/hexagent_api/config.py
index 53696e60..869114a4 100644
--- a/libs/hexagent_demo/backend/hexagent_api/config.py
+++ b/libs/hexagent_demo/backend/hexagent_api/config.py
@@ -92,6 +92,7 @@ class AppConfig:
     sandbox: SandboxConfig = field(default_factory=SandboxConfig)
     disabled_skills: list[str] = field(default_factory=list)
     mcp_servers: list[McpServerConfig] = field(default_factory=list)
+    language: str = "en"
 
     @property
     def main_model(self) -> ModelConfig | None:
@@ -120,7 +121,8 @@ def load_config() -> AppConfig:
         sandbox = SandboxConfig(**file_data["sandbox"]) if "sandbox" in file_data else SandboxConfig()
         disabled_skills = file_data.get("disabled_skills", [])
         mcp_servers = [McpServerConfig(**m) for m in file_data.get("mcp_servers", [])]
-        return AppConfig(models=models, main_model_id=main_id, fast_model_id=fast_id, agents=agents, tools=tools, sandbox=sandbox, disabled_skills=disabled_skills, mcp_servers=mcp_servers)
+        language = file_data.get("language", "en")
+        return AppConfig(models=models, main_model_id=main_id, fast_model_id=fast_id, agents=agents, tools=tools, sandbox=sandbox, disabled_skills=disabled_skills, mcp_servers=mcp_servers, language=language)
 
     # No config.json — return empty config (frontend will show setup flow)
     config = AppConfig()
diff --git a/libs/hexagent_demo/backend/hexagent_api/routes/config.py b/libs/hexagent_demo/backend/hexagent_api/routes/config.py
index f7b1ef26..3e56a389 100644
--- a/libs/hexagent_demo/backend/hexagent_api/routes/config.py
+++ b/libs/hexagent_demo/backend/hexagent_api/routes/config.py
@@ -82,6 +82,9 @@ async def put_config(body: dict[str, Any]) -> dict[str, Any]:
     if "mcp_servers" in body:
         current.mcp_servers = [McpServerConfig(**m) for m in body["mcp_servers"]]
 
+    if "language" in body:
+        current.language = body["language"]
+
     save_config(current)
 
     # Invalidate cached agents so they pick up new config on next use
diff --git a/libs/hexagent_demo/frontend/package-lock.json b/libs/hexagent_demo/frontend/package-lock.json
index ec9d4b22..2a40d5b2 100644
--- a/libs/hexagent_demo/frontend/package-lock.json
+++ b/libs/hexagent_demo/frontend/package-lock.json
@@ -10,12 +10,14 @@
       "dependencies": {
         "docx-preview": "^0.3.7",
         "echarts": "^6.0.0",
+        "i18next": "^25.10.10",
         "lucide-react": "^0.577.0",
         "mermaid": "^11.13.0",
         "pdfjs-dist": "^5.4.296",
         "pptx-viewer": "^0.1.0",
         "react": "^19.0.0",
         "react-dom": "^19.0.0",
+        "react-i18next": "^17.0.0",
         "react-markdown": "^9.0.1",
         "react-pdf": "^10.4.1",
         "react-syntax-highlighter": "^16.1.1",
@@ -290,9 +292,9 @@
       }
     },
     "node_modules/@babel/runtime": {
-      "version": "7.28.6",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.28.6.tgz",
-      "integrity": "sha512-05WQkdpL9COIMz4LjTxGpPNCdlpyimKppYNoJ5Di5EUObifl8t4tuLuUBBZEpoLYOmfvIWrsp9fCl0HoPRVTdA==",
+      "version": "7.29.2",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.29.2.tgz",
+      "integrity": "sha512-JiDShH45zKHWyGe4ZNVRrCjBz8Nh9TMmZG1kh4QTK8hCBTWBi8Da+i7s1fJw7/lYpM4ccepSNfqzZ/QvABBi5g==",
       "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
@@ -4116,6 +4118,15 @@
       "integrity": "sha512-PDEfEF102G23vHmPhLyPboFCD+BkMGu+GuJe2d9/eH4FsCwvgBpnc9n0pGE+ffKdph38s6foEZiEjdgHdzp+IA==",
       "license": "CC0-1.0"
     },
+    "node_modules/html-parse-stringify": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/html-parse-stringify/-/html-parse-stringify-3.0.1.tgz",
+      "integrity": "sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg==",
+      "license": "MIT",
+      "dependencies": {
+        "void-elements": "3.1.0"
+      }
+    },
     "node_modules/html-url-attributes": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/html-url-attributes/-/html-url-attributes-3.0.1.tgz",
@@ -4136,6 +4147,37 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/i18next": {
+      "version": "25.10.10",
+      "resolved": "https://registry.npmjs.org/i18next/-/i18next-25.10.10.tgz",
+      "integrity": "sha512-cqUW2Z3EkRx7NqSyywjkgCLK7KLCL6IFVFcONG7nVYIJ3ekZ1/N5jUsihHV6Bq37NfhgtczxJcxduELtjTwkuQ==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://www.locize.com/i18next"
+        },
+        {
+          "type": "individual",
+          "url": "https://www.i18next.com/how-to/faq#i18next-is-awesome.-how-can-i-support-the-project"
+        },
+        {
+          "type": "individual",
+          "url": "https://www.locize.com"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.29.2"
+      },
+      "peerDependencies": {
+        "typescript": "^5 || ^6"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/iconv-lite": {
       "version": "0.6.3",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
@@ -5868,6 +5910,33 @@
         "react": "^19.2.4"
       }
     },
+    "node_modules/react-i18next": {
+      "version": "17.0.0",
+      "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-17.0.0.tgz",
+      "integrity": "sha512-L7aqwOePCExt6nlF7000lN2YKWnR7IpSpQId9sj01798Xn3LAncBdTHKl9lA/nr+YrG78BTqWPJxq9mlrrmH7Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.29.2",
+        "html-parse-stringify": "^3.0.1",
+        "use-sync-external-store": "^1.6.0"
+      },
+      "peerDependencies": {
+        "i18next": ">= 25.10.10",
+        "react": ">= 16.8.0",
+        "typescript": "^5 || ^6"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        },
+        "react-native": {
+          "optional": true
+        },
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-markdown": {
       "version": "9.1.0",
       "resolved": "https://registry.npmjs.org/react-markdown/-/react-markdown-9.1.0.tgz",
@@ -6419,7 +6488,7 @@
       "version": "5.6.3",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.6.3.tgz",
       "integrity": "sha512-hjcS1mhfuyi4WW8IWtjP7brDrG2cuDZukyrYrSauoXGNgx0S7zceP07adYkJycEr56BOUTNPzbInooiN3fn1qw==",
-      "dev": true,
+      "devOptional": true,
       "license": "Apache-2.0",
       "bin": {
         "tsc": "bin/tsc",
@@ -6587,6 +6656,15 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/use-sync-external-store": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz",
+      "integrity": "sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/utif2": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/utif2/-/utif2-4.1.0.tgz",
@@ -6732,6 +6810,15 @@
         }
       }
     },
+    "node_modules/void-elements": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/void-elements/-/void-elements-3.1.0.tgz",
+      "integrity": "sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/vscode-jsonrpc": {
       "version": "8.2.0",
       "resolved": "https://registry.npmjs.org/vscode-jsonrpc/-/vscode-jsonrpc-8.2.0.tgz",
diff --git a/libs/hexagent_demo/frontend/package.json b/libs/hexagent_demo/frontend/package.json
index 3ce315d2..a33e4436 100644
--- a/libs/hexagent_demo/frontend/package.json
+++ b/libs/hexagent_demo/frontend/package.json
@@ -12,12 +12,14 @@
   "dependencies": {
     "docx-preview": "^0.3.7",
     "echarts": "^6.0.0",
+    "i18next": "^25.10.10",
     "lucide-react": "^0.577.0",
     "mermaid": "^11.13.0",
     "pdfjs-dist": "^5.4.296",
     "pptx-viewer": "^0.1.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
+    "react-i18next": "^17.0.0",
     "react-markdown": "^9.0.1",
     "react-pdf": "^10.4.1",
     "react-syntax-highlighter": "^16.1.1",
diff --git a/libs/hexagent_demo/frontend/src/App.tsx b/libs/hexagent_demo/frontend/src/App.tsx
index 3da8d60b..6e40130e 100644
--- a/libs/hexagent_demo/frontend/src/App.tsx
+++ b/libs/hexagent_demo/frontend/src/App.tsx
@@ -1,4 +1,5 @@
 import { useReducer, useEffect, useCallback, useRef, useState } from "react";
+import i18n from "./i18n";
 import { AppContext, initialState, reducer } from "./store";
 import { listConversations, createConversation, createWarmSession, deleteWarmSession, sendMessage, subscribeToStream, getServerConfig, getVMStatus, type ServerConfig } from "./api";
 import { useSettings } from "./hooks/useSettings";
@@ -86,6 +87,10 @@ function App() {
         loadedConfig = cfg;
         dispatch({ type: "SET_SERVER_CONFIG", payload: cfg });
         if (cfg.models.length === 0) setSetupNeeded(true);
+        // Sync language from backend config if it differs from local
+        if (cfg.language && cfg.language !== settings.language) {
+          setSettings((prev) => ({ ...prev, language: cfg.language }));
+        }
       })
       .catch(() => {});
     Promise.all([convP, cfgP]).then(() => {
@@ -202,7 +207,7 @@ function App() {
     warmSessionPromiseRef.current = p;
     p.catch(() => {
         dispatch({ type: "SHOW_NOTIFICATION", payload: {
-          message: "Session setup failed. You can still send messages.",
+          message: i18n.t("misc:sessionSetupFailed"),
           type: "info",
         }});
       })
@@ -418,7 +423,7 @@ function App() {
         doSendMessage(conv.id, content, options?.attachments);
       } catch {
         dispatch({ type: "REQUEST_END" });
-        dispatch({ type: "SHOW_NOTIFICATION", payload: { message: "Failed to create conversation", type: "error" } });
+        dispatch({ type: "SHOW_NOTIFICATION", payload: { message: i18n.t("misc:failedToCreateConversation"), type: "error" } });
       }
     },
     [dispatch, state.activeConversationId, state.isRequestPending, state.streamingByConversation, state.selectedModelId, state.selectedMode, state.warmSessionId, doSendMessage]
diff --git a/libs/hexagent_demo/frontend/src/api.ts b/libs/hexagent_demo/frontend/src/api.ts
index 6bc4dc43..da8a5950 100644
--- a/libs/hexagent_demo/frontend/src/api.ts
+++ b/libs/hexagent_demo/frontend/src/api.ts
@@ -1,4 +1,4 @@
-import type { Conversation } from "./types";
+import type { Conversation } from "./types";
 
 const API_BASE = (() => {
   if (typeof window !== 'undefined' && window.electronAPI?.backendPort) {
@@ -34,7 +34,7 @@ export async function getConversation(id: string): Promise<Conversation> {
   return res.json();
 }
 
-// ── Warm session (pre-conversation) ──
+// 鈹€鈹€ Warm session (pre-conversation) 鈹€鈹€
 
 export interface WarmSessionResponse {
   session_id: string;
@@ -264,7 +264,7 @@ export function subscribeToStream(
   return controller;
 }
 
-// ── File upload ──
+// 鈹€鈹€ File upload 鈹€鈹€
 
 export interface UploadResult {
   filename: string;
@@ -295,7 +295,7 @@ export async function deleteChatFile(conversationId: string, filename: string):
   }
 }
 
-// ── Folder picker ──
+// 鈹€鈹€ Folder picker 鈹€鈹€
 
 export async function browseFolder(): Promise<string | null> {
   const res = await fetch(`${API_BASE}/api/browse-folder`, { method: "POST" });
@@ -304,7 +304,7 @@ export async function browseFolder(): Promise<string | null> {
   return data.path || null;
 }
 
-// ── Server config ──
+// 鈹€鈹€ Server config 鈹€鈹€
 
 export interface ModelConfig {
   id: string;
@@ -359,13 +359,14 @@ export interface ServerConfig {
   tools: ToolsConfig;
   sandbox: SandboxConfig;
   mcp_servers: McpServerEntry[];
+  language: string;
 }
 
 export async function getServerConfig(): Promise<ServerConfig> {
   const res = await fetch(`${API_BASE}/api/config`);
   if (!res.ok) throw new Error(`Failed to get config: ${res.statusText}`);
   const data = await res.json();
-  return { agents: [], tools: { search_provider: "", search_api_key: "", fetch_provider: "jina", fetch_api_key: "" }, sandbox: { e2b_api_key: "", chat_enabled: false }, mcp_servers: [], ...data };
+  return { agents: [], tools: { search_provider: "", search_api_key: "", fetch_provider: "jina", fetch_api_key: "" }, sandbox: { e2b_api_key: "", chat_enabled: false }, mcp_servers: [], language: "en", ...data };
 }
 
 export async function updateServerConfig(config: ServerConfig): Promise<ServerConfig> {
@@ -388,7 +389,7 @@ export async function testMcpConnection(server: McpServerEntry): Promise<{ ok: b
   return res.json();
 }
 
-// ── Skills ──
+// 鈹€鈹€ Skills 鈹€鈹€
 
 export interface SkillsList {
   public: string[];
@@ -446,7 +447,7 @@ export async function toggleSkill(name: string, enabled: boolean): Promise<void>
   if (!res.ok) throw new Error(`Failed to toggle skill: ${res.statusText}`);
 }
 
-// ── Setup / VM backend ──
+// 鈹€鈹€ Setup / VM backend 鈹€鈹€
 
 export interface VMStatus {
   supported: boolean;
@@ -481,7 +482,7 @@ export function installVMBackend(
   });
 }
 
-// ── VM Build ──
+// 鈹€鈹€ VM Build 鈹€鈹€
 
 export interface VMBuildStatus {
   status: "idle" | "running" | "done" | "error";
@@ -562,7 +563,7 @@ export function buildVM(
   });
 }
 
-// ── VM Provision ──
+// 鈹€鈹€ VM Provision 鈹€鈹€
 
 export interface ProvisionStepDef {
   id: string;
diff --git a/libs/hexagent_demo/frontend/src/components/ChatArea.tsx b/libs/hexagent_demo/frontend/src/components/ChatArea.tsx
index 81144cdf..334c1f3d 100644
--- a/libs/hexagent_demo/frontend/src/components/ChatArea.tsx
+++ b/libs/hexagent_demo/frontend/src/components/ChatArea.tsx
@@ -1,5 +1,6 @@
-import { useState, useCallback, useRef, useEffect, useMemo } from "react";
+import { useState, useCallback, useRef, useEffect, useMemo } from "react";
 import { PanelRight } from "lucide-react";
+import { useTranslation } from "react-i18next";
 import { useAppContext } from "../store";
 import { getVMStatus } from "../api";
 import WelcomeScreen from "./WelcomeScreen";
@@ -18,6 +19,7 @@ interface ChatAreaProps {
 }
 
 export default function ChatArea({ conversation, onSendMessage, onOpenSettings, rightPanel }: ChatAreaProps) {
+  const { t } = useTranslation("chat");
   const { state, dispatch } = useAppContext();
   const [editingTitle, setEditingTitle] = useState(false);
   const chatAreaRef = useRef<HTMLDivElement>(null);
@@ -89,7 +91,7 @@ export default function ChatArea({ conversation, onSendMessage, onOpenSettings,
     [dispatch]
   );
 
-  // Keyboard shortcuts: Cmd/Ctrl+Shift+1 → Chat, Cmd/Ctrl+Shift+2 → Cowork
+  // Keyboard shortcuts: Cmd/Ctrl+Shift+1 鈫?Chat, Cmd/Ctrl+Shift+2 鈫?Cowork
   useEffect(() => {
     const handleKeyDown = (e: KeyboardEvent) => {
       const mod = isMac ? e.metaKey : e.ctrlKey;
@@ -155,10 +157,10 @@ export default function ChatArea({ conversation, onSendMessage, onOpenSettings,
                 onClick={() => handleModeChange(mode)}
                 type="button"
               >
-                {mode === "chat" ? "Chat" : "Cowork"}
+                {t(`mode.${mode}`)}
                 <span className="custom-tooltip">
-                  {mode === "chat" ? "Chat" : "Cowork"}
-                  <span className="custom-tooltip-shortcut">{isMac ? "⇧⌘" : "Ctrl+Shift+"}{idx + 1}</span>
+                  {t(`mode.${mode}`)}
+                  <span className="custom-tooltip-shortcut">{isMac ? "鈬р寴" : "Ctrl+Shift+"}{idx + 1}</span>
                 </span>
               </button>
             ))}
@@ -170,7 +172,7 @@ export default function ChatArea({ conversation, onSendMessage, onOpenSettings,
             <button
               className="right-panel-toggle"
               onClick={() => dispatch({ type: "SET_RIGHT_PANEL", payload: !(state.rightPanelByConversation[conversation?.id ?? ""] ?? false) })}
-              title="Toggle side panel"
+              title={t("toggleSidePanel")}
             >
               <PanelRight />
             </button>
diff --git a/libs/hexagent_demo/frontend/src/components/ChatInput.tsx b/libs/hexagent_demo/frontend/src/components/ChatInput.tsx
index 088c68c8..8296f754 100644
--- a/libs/hexagent_demo/frontend/src/components/ChatInput.tsx
+++ b/libs/hexagent_demo/frontend/src/components/ChatInput.tsx
@@ -1,5 +1,6 @@
 import { useState, useCallback, useRef, useEffect } from "react";
 import { Paperclip, ArrowUp, ArrowDown, X, FileText, Loader2, CircleAlert } from "lucide-react";
+import { useTranslation } from "react-i18next";
 import { useAppContext } from "../store";
 import { uploadChatFile, deleteChatFile } from "../api";
 import { useFileDrop } from "../hooks/useFileDrop";
@@ -37,6 +38,7 @@ function shouldShowScrollButton(container: HTMLElement, inputContainer: HTMLElem
 }
 
 export default function ChatInput({ conversationId, onSend, scrollContainerRef, onOpenSettings }: ChatInputProps) {
+  const { t } = useTranslation("chat");
   const { state, dispatch } = useAppContext();
   const noModels = !state.serverConfig?.models?.length;
   const missingE2bKey = state.selectedMode === "chat" && !state.serverConfig?.sandbox?.e2b_api_key;
@@ -152,7 +154,7 @@ export default function ChatInput({ conversationId, onSend, scrollContainerRef,
     // Check for name collision against existing pending files
     const collision = pendingFilesRef.current.some((f) => f.name === file.name && f.status !== "failed");
     if (collision) {
-      const error = `"${file.name}" already attached. Rename the file and try again.`;
+      const error = t("alreadyAttached", { filename: file.name });
       setPendingFiles((prev) => [...prev, { id, name: file.name, status: "failed" as const, error }]);
       dispatch({ type: "SHOW_NOTIFICATION", payload: { message: error, type: "error" } });
       return;
@@ -167,13 +169,13 @@ export default function ChatInput({ conversationId, onSend, scrollContainerRef,
         );
       })
       .catch((err) => {
-        const message = err instanceof Error ? err.message : "Upload failed";
+        const message = err instanceof Error ? err.message : t("uploadFailed");
         setPendingFiles((prev) =>
           prev.map((f) => f.id === id ? { ...f, status: "failed" as const, error: message } : f)
         );
         dispatch({
           type: "SHOW_NOTIFICATION",
-          payload: { message: `Failed to upload ${file.name}: ${message}`, type: "error" },
+          payload: { message: t("failedToUpload", { filename: file.name, message }), type: "error" },
         });
       });
   }, [conversationId, dispatch]);
@@ -231,7 +233,7 @@ export default function ChatInput({ conversationId, onSend, scrollContainerRef,
   return (
     <div className="input-container" ref={inputContainerRef}>
       <button
-        aria-label="Scroll to bottom"
+        aria-label={t("scrollToBottom")}
         className={`scroll-to-bottom ${showScrollBtn ? "" : "hidden"}`}
         onClick={scrollToBottom}
       >
@@ -266,7 +268,7 @@ export default function ChatInput({ conversationId, onSend, scrollContainerRef,
         <textarea
             ref={textareaRef}
             className="input-textarea"
-            placeholder="Ask anything..."
+            placeholder={t("askAnything")}
             value={value}
             onChange={(e) => setValue(e.target.value)}
             onKeyDown={handleKeyDown}
@@ -287,7 +289,7 @@ export default function ChatInput({ conversationId, onSend, scrollContainerRef,
               />
               <button
                 className="input-tool-btn"
-                title="Attach file"
+                title={t("attachFile")}
                 onClick={() => { if (missingE2bKey) { flashE2bHint(); return; } fileRef.current?.click(); }}
               >
                 <Paperclip />
@@ -301,21 +303,21 @@ export default function ChatInput({ conversationId, onSend, scrollContainerRef,
                   className="input-send"
                   onClick={handleSubmit}
                   disabled={(!value.trim() && doneFiles.length === 0) || !!state.streamingByConversation[conversationId] || isPreparingRequest || anyUploading || noModels || missingE2bKey}
-                  title={noModels ? "Configure a model in Settings first" : isPreparingRequest ? "Preparing request..." : "Send message"}
+                  title={noModels ? t("configureModel") : isPreparingRequest ? t("preparingRequest") : t("sendMessage")}
                 >
                   {isPreparingRequest ? <Loader2 className="model-save-spinner" /> : <ArrowUp />}
                 </button>
                 {isPreparingRequest && (
                   <div className="mount-hint mount-hint-visible">
                     <Loader2 size={12} className="model-save-spinner" />
-                    <span>Preparing request...</span>
+                    <span>{t("preparingRequest")}</span>
                   </div>
                 )}
                 {missingE2bKey && (
                   <div className={`e2b-hint${value.trim() || e2bHintFlash ? " e2b-hint-visible" : ""}`}>
-                    E2B API key required —{" "}
+                    {t("e2bKeyRequired")} —{" "}
                     <button className="e2b-hint-link" onClick={() => onOpenSettings("sandbox")}>
-                      Set in Settings
+                      {t("setInSettings")}
                     </button>
                   </div>
                 )}
@@ -324,7 +326,7 @@ export default function ChatInput({ conversationId, onSend, scrollContainerRef,
           </div>
         </div>
       <div className="input-disclaimer" role="note">
-        AI responses may be inaccurate. Please double-check important information.
+        {t("disclaimer")}
       </div>
     </div>
   );
diff --git a/libs/hexagent_demo/frontend/src/components/FolderPicker.tsx b/libs/hexagent_demo/frontend/src/components/FolderPicker.tsx
index 0a6c67f8..f81115d5 100644
--- a/libs/hexagent_demo/frontend/src/components/FolderPicker.tsx
+++ b/libs/hexagent_demo/frontend/src/components/FolderPicker.tsx
@@ -1,6 +1,7 @@
 import { useState, useRef, useEffect, useCallback } from "react";
 import { createPortal } from "react-dom";
 import { FolderOpen, FolderPlus, ChevronDown, Check, ShieldAlert } from "lucide-react";
+import { useTranslation } from "react-i18next";
 import { browseFolder } from "../api";
 import { loadRecentFolders, saveRecentFolders, shortenPath } from "../recentFolders";
 import type { RecentFolder } from "../recentFolders";
@@ -13,6 +14,7 @@ interface FolderPickerProps {
 }
 
 export default function FolderPicker({ value, onChange, disabled, onDisabledClick }: FolderPickerProps) {
+  const { t } = useTranslation("misc");
   const [open, setOpen] = useState(false);
   const [recentFolders, setRecentFolders] = useState<RecentFolder[]>(loadRecentFolders);
   const [pendingFolder, setPendingFolder] = useState<string | null>(null);
@@ -96,7 +98,7 @@ export default function FolderPicker({ value, onChange, disabled, onDisabledClic
     [onChange, requestAccess, value]
   );
 
-  const label = value ? value.split("/").pop() || value : "Work in a folder";
+  const label = value ? value.split("/").pop() || value : t("folderPicker.workInFolder");
 
   return (
     <>
@@ -105,7 +107,7 @@ export default function FolderPicker({ value, onChange, disabled, onDisabledClic
           className="input-tool-btn input-folder-btn"
           onClick={handleButtonClick}
           type="button"
-          title={value || "Work in a folder"}
+          title={value || t("folderPicker.workInFolder")}
         >
           <FolderOpen size={16} />
           <span>{label}</span>
@@ -115,12 +117,12 @@ export default function FolderPicker({ value, onChange, disabled, onDisabledClic
           <div className="dd-panel fp-dropdown">
             <button className="dd-item fp-browse" onClick={handleBrowse}>
               <FolderPlus size={14} className="fp-option-icon" />
-              <span className="dd-item-label">Choose a new folder</span>
+              <span className="dd-item-label">{t("folderPicker.chooseNewFolder")}</span>
             </button>
             {recentFolders.length > 0 && (
               <>
                 <div className="dd-divider" />
-                <div className="fp-section-label">Recent</div>
+                <div className="fp-section-label">{t("folderPicker.recent")}</div>
                 {recentFolders.map((folder) => (
                   <button
                     key={folder.path}
@@ -149,29 +151,29 @@ export default function FolderPicker({ value, onChange, disabled, onDisabledClic
               <ShieldAlert size={28} />
             </div>
             <h3 className="fp-permission-title">
-              Allow HexAgent to access files in "{pendingFolder}"?
+              {t("folderPicker.permissionTitle", { folder: pendingFolder })}
             </h3>
             <p className="fp-permission-body">
-              This grants access to all files and subfolders. HexAgent will be able to read, edit, and delete files in this directory. File contents may be shared with connected AI models and tools. Avoid selecting folders containing sensitive or private data.
+              {t("folderPicker.permissionBody")}
             </p>
             <div className="fp-permission-actions">
               <button
                 className="fp-permission-btn fp-permission-btn--cancel"
                 onClick={() => setPendingFolder(null)}
               >
-                Cancel
+                {t("folderPicker.cancel")}
               </button>
               <button
                 className="fp-permission-btn fp-permission-btn--always"
                 onClick={() => confirmFolder(pendingFolder, true)}
               >
-                Always Allow
+                {t("folderPicker.alwaysAllow")}
               </button>
               <button
                 className="fp-permission-btn fp-permission-btn--allow"
                 onClick={() => confirmFolder(pendingFolder, false)}
               >
-                Allow
+                {t("folderPicker.allow")}
               </button>
             </div>
           </div>
diff --git a/libs/hexagent_demo/frontend/src/components/InputSettingsMenu.tsx b/libs/hexagent_demo/frontend/src/components/InputSettingsMenu.tsx
index 28f6d68c..6b117f27 100644
--- a/libs/hexagent_demo/frontend/src/components/InputSettingsMenu.tsx
+++ b/libs/hexagent_demo/frontend/src/components/InputSettingsMenu.tsx
@@ -1,5 +1,6 @@
 import { useState, useEffect, useRef, useCallback } from "react";
 import { Settings2, Unplug, ScrollText, Bot, ChevronRight, Settings } from "lucide-react";
+import { useTranslation } from "react-i18next";
 import { useAppContext } from "../store";
 import { listSkills, toggleSkill, updateServerConfig, testMcpConnection } from "../api";
 import type { SkillsList, AgentConfig, McpServerEntry, ServerConfig } from "../api";
@@ -15,6 +16,7 @@ type SubmenuKey = "mcp" | "skills" | "agents";
 type McpStatus = { state: "validating" } | { state: "ok"; tools: number } | { state: "failed" };
 
 export default function InputSettingsMenu({ onOpenSettings, dropUp = false }: InputSettingsMenuProps) {
+  const { t } = useTranslation("settings");
   const { state, dispatch } = useAppContext();
   const [open, setOpen] = useState(false);
   const [submenu, setSubmenu] = useState<SubmenuKey | null>(null);
@@ -211,7 +213,7 @@ export default function InputSettingsMenu({ onOpenSettings, dropUp = false }: In
     <div className={`ism ${dirCls}`} ref={ref}>
       <button
         className="input-tool-btn"
-        title="Settings"
+        title={t("common:settings")}
         onClick={() => { if (open) close(); else setOpen(true); }}
       >
         <Settings2 />
@@ -226,7 +228,7 @@ export default function InputSettingsMenu({ onOpenSettings, dropUp = false }: In
             onClick={() => setSubmenu(submenu === "mcp" ? null : "mcp")}
           >
             <Unplug size={16} className="ism-item-icon" />
-            <span className="dd-item-label">MCP</span>
+            <span className="dd-item-label">{t("common:mcp")}</span>
             <ChevronRight size={14} className="ism-chevron" />
           </button>
 
@@ -237,7 +239,7 @@ export default function InputSettingsMenu({ onOpenSettings, dropUp = false }: In
             onClick={() => setSubmenu(submenu === "skills" ? null : "skills")}
           >
             <ScrollText size={16} className="ism-item-icon" />
-            <span className="dd-item-label">Skills</span>
+            <span className="dd-item-label">{t("common:skills")}</span>
             <ChevronRight size={14} className="ism-chevron" />
           </button>
 
@@ -248,7 +250,7 @@ export default function InputSettingsMenu({ onOpenSettings, dropUp = false }: In
             onClick={() => setSubmenu(submenu === "agents" ? null : "agents")}
           >
             <Bot size={16} className="ism-item-icon" />
-            <span className="dd-item-label">Subagent</span>
+            <span className="dd-item-label">{t("common:subagent")}</span>
             <ChevronRight size={14} className="ism-chevron" />
           </button>
 
@@ -256,7 +258,7 @@ export default function InputSettingsMenu({ onOpenSettings, dropUp = false }: In
           {submenu === "agents" &&
             renderSubmenu(
               agents.length === 0 ? (
-                <div className="ism-empty">No subagents configured</div>
+                <div className="ism-empty">{t("inputSettings.noSubagents")}</div>
               ) : (
                 agents.map((agent) => (
                   <button
@@ -264,20 +266,20 @@ export default function InputSettingsMenu({ onOpenSettings, dropUp = false }: In
                     className="dd-item ism-toggle-item"
                     onClick={() => handleToggleAgent(agent.id)}
                   >
-                    <span className="dd-item-label">{agent.name || "Untitled"}</span>
+                    <span className="dd-item-label">{agent.name || t("common:untitled")}</span>
                     <span className={`ism-switch ${agent.enabled ? "ism-switch--on" : ""}`} />
                   </button>
                 ))
               ),
               "agents",
-              "Manage Subagents..."
+              t("inputSettings.manageSubagents")
             )}
 
           {/* MCP submenu */}
           {submenu === "mcp" &&
             renderSubmenu(
               mcpServers.length === 0 ? (
-                <div className="ism-empty">No MCP servers configured</div>
+                <div className="ism-empty">{t("inputSettings.noMcpServers")}</div>
               ) : (
                 mcpServers.map((server) => (
                   <button
@@ -287,20 +289,20 @@ export default function InputSettingsMenu({ onOpenSettings, dropUp = false }: In
                     onClick={() => handleToggleMcp(server)}
                   >
                     {mcpStatusDot(server)}
-                    <span className="dd-item-label">{server.name || "Untitled"}</span>
+                    <span className="dd-item-label">{server.name || t("common:untitled")}</span>
                     <span className={mcpSwitchClass(server)} />
                   </button>
                 ))
               ),
               "mcps",
-              "Manage MCP Servers..."
+              t("inputSettings.manageMcp")
             )}
 
           {/* Skills submenu */}
           {submenu === "skills" &&
             renderSubmenu(
               allSkills.length === 0 ? (
-                <div className="ism-empty">No skills installed</div>
+                <div className="ism-empty">{t("inputSettings.noSkills")}</div>
               ) : (
                 allSkills.map(({ name, disabled }) => (
                   <button
@@ -314,7 +316,7 @@ export default function InputSettingsMenu({ onOpenSettings, dropUp = false }: In
                 ))
               ),
               "skills",
-              "Manage Skills..."
+              t("inputSettings.manageSkills")
             )}
         </div>
       )}
diff --git a/libs/hexagent_demo/frontend/src/components/MessageBubble.tsx b/libs/hexagent_demo/frontend/src/components/MessageBubble.tsx
index 92af80a8..0e36f8cf 100644
--- a/libs/hexagent_demo/frontend/src/components/MessageBubble.tsx
+++ b/libs/hexagent_demo/frontend/src/components/MessageBubble.tsx
@@ -1,5 +1,6 @@
 import { useState, useCallback, useMemo, forwardRef } from "react";
 import { Copy, Check, FileText } from "lucide-react";
+import { useTranslation } from "react-i18next";
 import Markdown from "./Markdown";
 import ToolCallBlock from "./ToolCallBlock";
 import SubagentBlock from "./SubagentBlock";
@@ -15,6 +16,7 @@ interface MessageBubbleProps {
 }
 
 const MessageBubble = forwardRef<HTMLDivElement, MessageBubbleProps>(function MessageBubble({ message, streamingBlocks, isStreaming, isLastAssistant }, ref) {
+  const { t } = useTranslation("chat");
   const [copied, setCopied] = useState(false);
 
   const handleCopy = useCallback(async () => {
@@ -79,7 +81,7 @@ const MessageBubble = forwardRef<HTMLDivElement, MessageBubbleProps>(function Me
       {showActions && (
         <div className={`message-actions ${isUser ? "user" : "assistant"} ${isLastAssistant ? "always-visible" : ""}`}>
           {isUser && <span className="message-time">{timeStr}</span>}
-          <button className="message-action-btn" onClick={handleCopy} title="Copy message">
+          <button className="message-action-btn" onClick={handleCopy} title={t("copyMessage")}>
             {copied ? <Check /> : <Copy />}
           </button>
         </div>
diff --git a/libs/hexagent_demo/frontend/src/components/ModelPicker.tsx b/libs/hexagent_demo/frontend/src/components/ModelPicker.tsx
index d1c48de4..0529171b 100644
--- a/libs/hexagent_demo/frontend/src/components/ModelPicker.tsx
+++ b/libs/hexagent_demo/frontend/src/components/ModelPicker.tsx
@@ -1,10 +1,12 @@
 import { useState, useRef, useEffect, useCallback } from "react";
 import { Check, ChevronDown } from "lucide-react";
+import { useTranslation } from "react-i18next";
 import { useAppContext } from "../store";
 import { updateConversation } from "../api";
 
 
 export default function ModelPicker({ dropUp }: { dropUp?: boolean }) {
+  const { t } = useTranslation("misc");
   const { state, dispatch } = useAppContext();
   const [open, setOpen] = useState(false);
   const ref = useRef<HTMLDivElement>(null);
@@ -13,7 +15,7 @@ export default function ModelPicker({ dropUp }: { dropUp?: boolean }) {
   const activeConv = state.conversations.find((c) => c.id === state.activeConversationId);
   const currentModelId = activeConv?.model_id || state.selectedModelId;
   const currentModel = models.find((m) => m.id === currentModelId);
-  const label = currentModel?.display_name || currentModel?.model || "Select model";
+  const label = currentModel?.display_name || currentModel?.model || t("modelPicker.selectModel");
 
   useEffect(() => {
     if (!open) return;
@@ -66,7 +68,7 @@ export default function ModelPicker({ dropUp }: { dropUp?: boolean }) {
   if (models.length === 0) {
     return (
       <div className="mp">
-        <span className="mp-trigger mp-trigger--empty">No model configured</span>
+        <span className="mp-trigger mp-trigger--empty">{t("modelPicker.noModel")}</span>
       </div>
     );
   }
@@ -99,7 +101,7 @@ export default function ModelPicker({ dropUp }: { dropUp?: boolean }) {
                   }}
                 >
                   <div className="mp-option-content">
-                    <span className="dd-item-label">{m.display_name || m.model || "Untitled"}</span>
+                    <span className="dd-item-label">{m.display_name || m.model || t("common:untitled")}</span>
                     {m.model && <span className="mp-option-provider">{m.model}</span>}
                   </div>
                   <div className="dd-item-check">
diff --git a/libs/hexagent_demo/frontend/src/components/OnboardingWizard.tsx b/libs/hexagent_demo/frontend/src/components/OnboardingWizard.tsx
index 89bb9de4..cc695399 100644
--- a/libs/hexagent_demo/frontend/src/components/OnboardingWizard.tsx
+++ b/libs/hexagent_demo/frontend/src/components/OnboardingWizard.tsx
@@ -1,4 +1,5 @@
-import { useState, useEffect, useRef } from "react";
+import { useState, useEffect, useRef } from "react";
+import { useTranslation } from "react-i18next";
 import faviconSvg from "../assets/favicon.svg";
 import {
   Eye, EyeOff, ArrowRight, ChevronDown, ChevronRight,
@@ -65,7 +66,7 @@ const PROVIDERS: ProviderOption[] = [
 /** Generate a human-friendly display name from a model ID. */
 function autoDisplayName(modelId: string): string {
   if (!modelId) return "";
-  // Strip provider prefix (e.g. "anthropic/claude-sonnet-4" → "claude-sonnet-4")
+  // Strip provider prefix (e.g. "anthropic/claude-sonnet-4" 鈫?"claude-sonnet-4")
   const base = modelId.includes("/") ? modelId.split("/").pop()! : modelId;
   return base
     .replace(/[-_]/g, " ")
@@ -123,6 +124,7 @@ function clearOnboardingDraft(): void {
 // ---------------------------------------------------------------------------
 
 export default function OnboardingWizard({ open, onComplete, settings, onSettingsChange }: OnboardingWizardProps) {
+  const { t } = useTranslation("onboarding");
   const { dispatch } = useAppContext();
   const draftReadyRef = useRef(false);
   const [step, setStep] = useState<Step>("welcome");
@@ -130,7 +132,7 @@ export default function OnboardingWizard({ open, onComplete, settings, onSetting
   const [error, setError] = useState("");
   const [config, setConfig] = useState<ServerConfig | null>(null);
 
-  // ── Step 1: Model ──
+  // 鈹€鈹€ Step 1: Model 鈹€鈹€
   const [selectedProvider, setSelectedProvider] = useState<ProviderOption | null>(null);
   const [apiKey, setApiKey] = useState("");
   const [modelId, setModelId] = useState("");
@@ -139,7 +141,7 @@ export default function OnboardingWizard({ open, onComplete, settings, onSetting
   const [showKey, setShowKey] = useState(false);
   const [showAdvanced, setShowAdvanced] = useState(false);
 
-  // ── Step 2: Summarizer ──
+  // 鈹€鈹€ Step 2: Summarizer 鈹€鈹€
   const [sumProvider, setSumProvider] = useState<ProviderOption | null>(null);
   const [sumApiKey, setSumApiKey] = useState("");
   const [sumModelId, setSumModelId] = useState("");
@@ -149,7 +151,7 @@ export default function OnboardingWizard({ open, onComplete, settings, onSetting
   const [sumSameAsMain, setSumSameAsMain] = useState(true);
   const [sumShowAdvanced, setSumShowAdvanced] = useState(false);
 
-  // ── Step 3: Web Tools ──
+  // 鈹€鈹€ Step 3: Web Tools 鈹€鈹€
   const [searchProvider, setSearchProvider] = useState("");
   const [searchKey, setSearchKey] = useState("");
   const [fetchProvider, setFetchProvider] = useState("");
@@ -157,9 +159,9 @@ export default function OnboardingWizard({ open, onComplete, settings, onSetting
   const [showSearchKey, setShowSearchKey] = useState(false);
   const [showFetchKey, setShowFetchKey] = useState(false);
 
-  // ── Step 4: Compute ──
+  // 鈹€鈹€ Step 4: Compute 鈹€鈹€
 
-  // VM setup — shared with Settings via VMSetupProvider (single source of truth)
+  // VM setup 鈥?shared with Settings via VMSetupProvider (single source of truth)
   const vm = useVMSetup();
   const vmAutoBootstrapping = vm.autoBootstrapping;
   const [vmSkipped, setVmSkipped] = useState(false);
@@ -242,7 +244,7 @@ export default function OnboardingWizard({ open, onComplete, settings, onSetting
 
   if (!open) return null;
 
-  // ── Navigation ──
+  // 鈹€鈹€ Navigation 鈹€鈹€
   const goNext = () => {
     const idx = stepIndex(step);
     if (idx < STEPS.length - 1) {
@@ -258,11 +260,11 @@ export default function OnboardingWizard({ open, onComplete, settings, onSetting
     }
   };
 
-  // ── Save all config at the end ──
+  // 鈹€鈹€ Save all config at the end 鈹€鈹€
   const handleFinish = async () => {
     if (!config) return;
     if (!selectedProvider || !apiKey.trim() || !modelId.trim()) {
-      setError("Please go back and configure your AI model first");
+      setError(t("errors.configureModelFirst"));
       return;
     }
     setSaving(true);
@@ -321,13 +323,13 @@ export default function OnboardingWizard({ open, onComplete, settings, onSetting
       clearOnboardingDraft();
       onComplete();
     } catch (e: unknown) {
-      setError(e instanceof Error ? e.message : "Failed to save configuration");
+      setError(e instanceof Error ? e.message : t("errors.failedToSave"));
     } finally {
       setSaving(false);
     }
   };
 
-  // ── Validation for model step ──
+  // 鈹€鈹€ Validation for model step 鈹€鈹€
   const isCustomProvider = selectedProvider?.id === "custom";
   const canProceedFromModel =
     selectedProvider &&
@@ -339,31 +341,31 @@ export default function OnboardingWizard({ open, onComplete, settings, onSetting
     <div className="setup-overlay">
       <div className="setup-modal">
 
-        {/* ── Step 0: Welcome — Name & Theme ── */}
+        {/* 鈹€鈹€ Step 0: Welcome 鈥?Name & Theme 鈹€鈹€ */}
         {step === "welcome" && (
           <div className="setup-step setup-welcome">
             <div className="setup-welcome-brand">
               <img className="setup-welcome-logo" width="40" height="40" src={faviconSvg} alt="" />
               <h2 className="setup-welcome-title">ClawWork</h2>
             </div>
-            <p className="setup-welcome-tagline">Powered by ClawWork harness</p>
+            <p className="setup-welcome-tagline">{t("welcome.tagline")}</p>
 
             <div className="setup-welcome-form">
               <div className="setup-field">
-                <label className="setup-label">What should ClawWork call you?</label>
+                <label className="setup-label">{t("welcome.nameLabel")}</label>
                 <input
                   className="setup-input setup-welcome-input"
                   type="text"
                   value={settings.fullName}
                   onChange={(e) => onSettingsChange((prev) => ({ ...prev, fullName: e.target.value }))}
-                  placeholder="Your name"
+                  placeholder={t("welcome.namePlaceholder")}
                   autoComplete="off"
                   autoFocus
                 />
               </div>
 
               <div className="setup-field">
-                <label className="setup-label">Theme</label>
+                <label className="setup-label">{t("welcome.themeLabel")}</label>
                 <div className="setup-theme-options">
                   {(["light", "dark", "system"] as const).map((theme) => (
                     <button
@@ -375,7 +377,7 @@ export default function OnboardingWizard({ open, onComplete, settings, onSetting
                       {theme === "light" && <Sun size={14} />}
                       {theme === "dark" && <Moon size={14} />}
                       {theme === "system" && <Monitor size={14} />}
-                      <span>{theme.charAt(0).toUpperCase() + theme.slice(1)}</span>
+                      <span>{t(`welcome.theme${theme.charAt(0).toUpperCase() + theme.slice(1)}Label`)}</span>
                     </button>
                   ))}
                 </div>
@@ -383,19 +385,19 @@ export default function OnboardingWizard({ open, onComplete, settings, onSetting
             </div>
 
             <button className="setup-btn setup-btn--primary setup-welcome-cta" onClick={goNext}>
-              Get Started <ArrowRight size={14} />
+              {t("welcome.getStarted")} <ArrowRight size={14} />
             </button>
           </div>
         )}
 
-        {/* ── Step 1: Provider selection ── */}
+        {/* 鈹€鈹€ Step 1: Provider selection 鈹€鈹€ */}
         {step === "provider" && (
           <div className="setup-step">
             <div className="setup-step-header">
               <Sparkles size={20} className="setup-step-icon" />
               <div>
-                <h2 className="setup-title">AI Model</h2>
-                <p className="setup-subtitle">Choose your AI provider to get started</p>
+                <h2 className="setup-title">{t("provider.title")}</h2>
+                <p className="setup-subtitle">{t("provider.subtitle")}</p>
               </div>
             </div>
 
@@ -419,23 +421,23 @@ export default function OnboardingWizard({ open, onComplete, settings, onSetting
             </div>
 
             <p className="setup-footer">
-              You can add more models later in Settings.
+              {t("provider.footer")}
             </p>
 
             <div className="setup-actions">
-              <button className="setup-btn setup-btn--ghost" onClick={goBack}>Back</button>
+              <button className="setup-btn setup-btn--ghost" onClick={goBack}>{t("provider.back")}</button>
             </div>
           </div>
         )}
 
-        {/* ── Step 2: Model credentials ── */}
+        {/* 鈹€鈹€ Step 2: Model credentials 鈹€鈹€ */}
         {step === "model" && selectedProvider && (
           <div className="setup-step">
             <div className="setup-step-header">
               <Sparkles size={20} className="setup-step-icon" />
               <div>
-                <h2 className="setup-title">Configure {selectedProvider.label}</h2>
-                <p className="setup-subtitle">Enter your API credentials</p>
+                <h2 className="setup-title">{t("model.title", { provider: selectedProvider.label })}</h2>
+                <p className="setup-subtitle">{t("model.subtitle")}</p>
               </div>
             </div>
 
@@ -443,7 +445,7 @@ export default function OnboardingWizard({ open, onComplete, settings, onSetting
 
             <div className="setup-form">
               <div className="setup-field">
-                <label className="setup-label">API Key</label>
+                <label className="setup-label">{t("model.apiKeyLabel")}</label>
                 <div className="setup-key-wrap">
                   <input
                     className="setup-input setup-input--key"
@@ -464,7 +466,7 @@ export default function OnboardingWizard({ open, onComplete, settings, onSetting
               </div>
 
               <div className="setup-field">
-                <label className="setup-label">Model ID</label>
+                <label className="setup-label">{t("model.modelIdLabel")}</label>
                 <input
                   className="setup-input"
                   value={modelId}
@@ -482,7 +484,7 @@ export default function OnboardingWizard({ open, onComplete, settings, onSetting
               {isCustomProvider && (
                 <>
                   <div className="setup-field">
-                    <label className="setup-label">Base URL</label>
+                    <label className="setup-label">{t("model.baseUrlLabel")}</label>
                     <input
                       className="setup-input"
                       value={baseUrl}
@@ -491,12 +493,12 @@ export default function OnboardingWizard({ open, onComplete, settings, onSetting
                     />
                   </div>
                   <div className="setup-field">
-                    <label className="setup-label">Display Name</label>
+                    <label className="setup-label">{t("model.displayNameLabel")}</label>
                     <input
                       className="setup-input"
                       value={displayName}
                       onChange={(e) => setDisplayName(e.target.value)}
-                      placeholder={autoDisplayName(modelId) || "My Model"}
+                      placeholder={autoDisplayName(modelId) || t("model.displayNamePlaceholder")}
                     />
                   </div>
                 </>
@@ -511,13 +513,13 @@ export default function OnboardingWizard({ open, onComplete, settings, onSetting
                     type="button"
                   >
                     {showAdvanced ? <ChevronDown size={14} /> : <ChevronRight size={14} />}
-                    Advanced
+                    {t("model.advanced")}
                   </button>
 
                   {showAdvanced && (
                     <div className="setup-advanced">
                       <div className="setup-field">
-                        <label className="setup-label">Base URL</label>
+                        <label className="setup-label">{t("model.baseUrlLabel")}</label>
                         <input
                           className="setup-input"
                           value={baseUrl}
@@ -526,12 +528,12 @@ export default function OnboardingWizard({ open, onComplete, settings, onSetting
                         />
                       </div>
                       <div className="setup-field">
-                        <label className="setup-label">Display Name</label>
+                        <label className="setup-label">{t("model.displayNameLabel")}</label>
                         <input
                           className="setup-input"
                           value={displayName}
                           onChange={(e) => setDisplayName(e.target.value)}
-                          placeholder={autoDisplayName(modelId) || "My Model"}
+                          placeholder={autoDisplayName(modelId) || t("model.displayNamePlaceholder")}
                         />
                       </div>
                     </div>
@@ -541,27 +543,27 @@ export default function OnboardingWizard({ open, onComplete, settings, onSetting
             </div>
 
             <div className="setup-actions">
-              <button className="setup-btn setup-btn--ghost" onClick={() => setStep("provider")}>Back</button>
+              <button className="setup-btn setup-btn--ghost" onClick={() => setStep("provider")}>{t("model.back")}</button>
               <button
                 className="setup-btn setup-btn--primary"
                 onClick={goNext}
                 disabled={!canProceedFromModel}
               >
-                Next <ArrowRight size={14} />
+                {t("model.next")} <ArrowRight size={14} />
               </button>
             </div>
           </div>
         )}
 
-        {/* ── Step 2: Summarizer ── */}
+        {/* 鈹€鈹€ Step 2: Summarizer 鈹€鈹€ */}
         {step === "summarizer" && (
           <div className="setup-step">
             <div className="setup-step-header">
               <ScrollText size={20} className="setup-step-icon" />
               <div>
-                <h2 className="setup-title">Summarizer model</h2>
+                <h2 className="setup-title">{t("summarizer.title")}</h2>
                 <p className="setup-subtitle">
-                  A fast model for web page summarization. Can be the same as your main model or a cheaper/faster one.
+                  {t("summarizer.subtitle")}
                 </p>
               </div>
             </div>
@@ -575,14 +577,14 @@ export default function OnboardingWizard({ open, onComplete, settings, onSetting
                   onClick={() => setSumSameAsMain(true)}
                   type="button"
                 >
-                  Same as main model
+                  {t("summarizer.sameAsMain")}
                 </button>
                 <button
                   className={`setup-pill ${!sumSameAsMain ? "setup-pill--active" : ""}`}
                   onClick={() => setSumSameAsMain(false)}
                   type="button"
                 >
-                  Different model
+                  {t("summarizer.differentModel")}
                 </button>
               </div>
             </div>
@@ -590,7 +592,7 @@ export default function OnboardingWizard({ open, onComplete, settings, onSetting
             {!sumSameAsMain && (
               <div className="setup-form">
                 <div className="setup-field">
-                  <label className="setup-label">Provider</label>
+                  <label className="setup-label">{t("summarizer.providerLabel")}</label>
                   <div className="setup-pill-group">
                     {PROVIDERS.map((p) => (
                       <button
@@ -612,7 +614,7 @@ export default function OnboardingWizard({ open, onComplete, settings, onSetting
                 {sumProvider && (
                   <>
                     <div className="setup-field">
-                      <label className="setup-label">API Key</label>
+                      <label className="setup-label">{t("summarizer.apiKeyLabel")}</label>
                       <div className="setup-key-wrap">
                         <input
                           className="setup-input setup-input--key"
@@ -632,7 +634,7 @@ export default function OnboardingWizard({ open, onComplete, settings, onSetting
                     </div>
 
                     <div className="setup-field">
-                      <label className="setup-label">Model ID</label>
+                      <label className="setup-label">{t("summarizer.modelIdLabel")}</label>
                       <input
                         className="setup-input"
                         value={sumModelId}
@@ -650,7 +652,7 @@ export default function OnboardingWizard({ open, onComplete, settings, onSetting
                     {sumProvider.id === "custom" && (
                       <>
                         <div className="setup-field">
-                          <label className="setup-label">Base URL</label>
+                          <label className="setup-label">{t("summarizer.baseUrlLabel")}</label>
                           <input
                             className="setup-input"
                             value={sumBaseUrl}
@@ -659,12 +661,12 @@ export default function OnboardingWizard({ open, onComplete, settings, onSetting
                           />
                         </div>
                         <div className="setup-field">
-                          <label className="setup-label">Display Name</label>
+                          <label className="setup-label">{t("summarizer.displayNameLabel")}</label>
                           <input
                             className="setup-input"
                             value={sumDisplayName}
                             onChange={(e) => setSumDisplayName(e.target.value)}
-                            placeholder={autoDisplayName(sumModelId) || "Fast Model"}
+                            placeholder={autoDisplayName(sumModelId) || t("summarizer.displayNamePlaceholder")}
                           />
                         </div>
                       </>
@@ -679,13 +681,13 @@ export default function OnboardingWizard({ open, onComplete, settings, onSetting
                           type="button"
                         >
                           {sumShowAdvanced ? <ChevronDown size={14} /> : <ChevronRight size={14} />}
-                          Advanced
+                          {t("summarizer.advanced")}
                         </button>
 
                         {sumShowAdvanced && (
                           <div className="setup-advanced">
                             <div className="setup-field">
-                              <label className="setup-label">Base URL</label>
+                              <label className="setup-label">{t("summarizer.baseUrlLabel")}</label>
                               <input
                                 className="setup-input"
                                 value={sumBaseUrl}
@@ -694,12 +696,12 @@ export default function OnboardingWizard({ open, onComplete, settings, onSetting
                               />
                             </div>
                             <div className="setup-field">
-                              <label className="setup-label">Display Name</label>
+                              <label className="setup-label">{t("summarizer.displayNameLabel")}</label>
                               <input
                                 className="setup-input"
                                 value={sumDisplayName}
                                 onChange={(e) => setSumDisplayName(e.target.value)}
-                                placeholder={autoDisplayName(sumModelId) || "Fast Model"}
+                                placeholder={autoDisplayName(sumModelId) || t("summarizer.displayNamePlaceholder")}
                               />
                             </div>
                           </div>
@@ -712,23 +714,23 @@ export default function OnboardingWizard({ open, onComplete, settings, onSetting
             )}
 
             <div className="setup-actions">
-              <button className="setup-btn setup-btn--ghost" onClick={goBack}>Back</button>
+              <button className="setup-btn setup-btn--ghost" onClick={goBack}>{t("summarizer.back")}</button>
               <button className="setup-btn setup-btn--primary" onClick={goNext}>
-                Next <ArrowRight size={14} />
+                {t("summarizer.next")} <ArrowRight size={14} />
               </button>
             </div>
           </div>
         )}
 
-        {/* ── Step 3: Web Tools ── */}
+        {/* 鈹€鈹€ Step 3: Web Tools 鈹€鈹€ */}
         {step === "tools" && (
           <div className="setup-step">
             <div className="setup-step-header">
               <Globe size={20} className="setup-step-icon" />
               <div>
-                <h2 className="setup-title">Web search & fetch</h2>
+                <h2 className="setup-title">{t("tools.title")}</h2>
                 <p className="setup-subtitle">
-                  Let the agent search the web and read pages. Optional — you can configure these later.
+                  {t("tools.subtitle")}
                 </p>
               </div>
             </div>
@@ -740,13 +742,13 @@ export default function OnboardingWizard({ open, onComplete, settings, onSetting
               <div className="setup-tool-group">
                 <div className="setup-tool-header">
                   <Globe size={14} />
-                  <span>Web Search</span>
+                  <span>{t("tools.webSearch")}</span>
                 </div>
                 <div className="setup-field">
-                  <label className="setup-label">Provider</label>
+                  <label className="setup-label">{t("tools.providerLabel")}</label>
                   <div className="setup-pill-group">
                     {[
-                      { id: "", label: "None" },
+                      { id: "", label: t("tools.providerNone") },
                       { id: "tavily", label: "Tavily" },
                       { id: "brave", label: "Brave" },
                     ].map((p) => (
@@ -763,14 +765,14 @@ export default function OnboardingWizard({ open, onComplete, settings, onSetting
                 </div>
                 {searchProvider && (
                   <div className="setup-field">
-                    <label className="setup-label">API Key</label>
+                    <label className="setup-label">{t("tools.apiKeyLabel")}</label>
                     <div className="setup-key-wrap">
                       <input
                         className="setup-input setup-input--key"
                         type={showSearchKey ? "text" : "password"}
                         value={searchKey}
                         onChange={(e) => setSearchKey(e.target.value)}
-                        placeholder={`${searchProvider} API key`}
+                        placeholder={t("tools.apiKeyPlaceholder", { provider: searchProvider })}
                       />
                       <button className="setup-key-toggle" onClick={() => setShowSearchKey(!showSearchKey)} type="button">
                         {showSearchKey ? <Eye size={14} /> : <EyeOff size={14} />}
@@ -786,13 +788,13 @@ export default function OnboardingWizard({ open, onComplete, settings, onSetting
               <div className="setup-tool-group">
                 <div className="setup-tool-header">
                   <ScrollText size={14} />
-                  <span>Web Fetch</span>
+                  <span>{t("tools.webFetch")}</span>
                 </div>
                 <div className="setup-field">
-                  <label className="setup-label">Provider</label>
+                  <label className="setup-label">{t("tools.providerLabel")}</label>
                   <div className="setup-pill-group">
                     {[
-                      { id: "", label: "None" },
+                      { id: "", label: t("tools.providerNone") },
                       { id: "jina", label: "Jina" },
                       { id: "firecrawl", label: "Firecrawl" },
                     ].map((p) => (
@@ -809,14 +811,14 @@ export default function OnboardingWizard({ open, onComplete, settings, onSetting
                 </div>
                 {fetchProvider && (
                   <div className="setup-field">
-                    <label className="setup-label">API Key</label>
+                    <label className="setup-label">{t("tools.apiKeyLabel")}</label>
                     <div className="setup-key-wrap">
                       <input
                         className="setup-input setup-input--key"
                         type={showFetchKey ? "text" : "password"}
                         value={fetchKey}
                         onChange={(e) => setFetchKey(e.target.value)}
-                        placeholder={`${fetchProvider} API key`}
+                        placeholder={t("tools.apiKeyPlaceholder", { provider: fetchProvider })}
                       />
                       <button className="setup-key-toggle" onClick={() => setShowFetchKey(!showFetchKey)} type="button">
                         {showFetchKey ? <Eye size={14} /> : <EyeOff size={14} />}
@@ -828,23 +830,23 @@ export default function OnboardingWizard({ open, onComplete, settings, onSetting
             </div>
 
             <div className="setup-actions">
-              <button className="setup-btn setup-btn--ghost" onClick={goBack}>Back</button>
+              <button className="setup-btn setup-btn--ghost" onClick={goBack}>{t("tools.back")}</button>
               <button className="setup-btn setup-btn--primary" onClick={goNext}>
-                Next <ArrowRight size={14} />
+                {t("tools.next")} <ArrowRight size={14} />
               </button>
             </div>
           </div>
         )}
 
-        {/* ── Step 4: Compute ── */}
+        {/* 鈹€鈹€ Step 4: Compute 鈹€鈹€ */}
         {step === "compute" && (
           <div className="setup-step">
             <div className="setup-step-header">
               <Server size={20} className="setup-step-icon" />
               <div>
-                <h2 className="setup-title">Compute environments</h2>
+                <h2 className="setup-title">{t("compute.title")}</h2>
                 <p className="setup-subtitle">
-                  ClawWork uses sandboxed environments to run code safely.
+                  {t("compute.subtitle")}
                 </p>
               </div>
             </div>
@@ -857,18 +859,18 @@ export default function OnboardingWizard({ open, onComplete, settings, onSetting
                 <div className="setup-compute-header">
                   <Monitor size={16} />
                   <div className="setup-compute-info">
-                    <span className="setup-compute-name">Virtual Machine</span>
-                    <span className="setup-compute-badge">Required</span>
+                    <span className="setup-compute-name">{t("compute.vmName")}</span>
+                    <span className="setup-compute-badge">{t("compute.vmRequired")}</span>
                   </div>
                 </div>
                 <p className="setup-compute-desc">
-                  Local Linux VM for cowork sessions. You can skip this and set it up later in Settings.
+                  {t("compute.vmDesc")}
                 </p>
 
                 {vmSupported === false && (
                   <div className="setup-compute-status">
                     <span className="setup-compute-status-dot" />
-                    Not supported on this platform
+                    {t("compute.vmNotSupported")}
                   </div>
                 )}
 
@@ -880,24 +882,24 @@ export default function OnboardingWizard({ open, onComplete, settings, onSetting
                        vmPhase1 === "running" ? <Loader2 size={13} className="spin" /> :
                        vmPhase1 === "error" ? <CircleAlert size={13} className="setup-vm-icon--error" /> :
                        <span className="setup-vm-dot" />}
-                      <span className="setup-vm-label">VM Engine</span>
-                      {vmPhase1 === "done" && <span className="setup-vm-badge">Installed</span>}
+                      <span className="setup-vm-label">{t("compute.vmEngine")}</span>
+                      {vmPhase1 === "done" && <span className="setup-vm-badge">{t("compute.vmEngineInstalled")}</span>}
                       {vmPhase1 === "running" && vmPhase1Msg && <span className="setup-vm-msg">{vmPhase1Msg}</span>}
                       {vmPhase1 === "pending" && (
                         vmAutoBootstrapping ? (
-                          <span className="setup-vm-msg">Auto installing...</span>
+                          <span className="setup-vm-msg">{t("compute.vmAutoInstalling")}</span>
                         ) : (
-                          <button className="vm-phase-action" type="button" onClick={vm.installLima}>Install</button>
+                          <button className="vm-phase-action" type="button" onClick={vm.installLima}>{t("compute.vmInstall")}</button>
                         )
                       )}
                       {vmPhase1 === "error" && (
                         vmPhase1NeedsRestart ? (
                           <button className="vm-phase-action vm-phase-action--retry" type="button" onClick={vm.recheckVmEngine}>
-                            I've restarted, Re-check
+                            {t("compute.vmRecheck")}
                           </button>
                         ) : (
                           <button className="vm-phase-action vm-phase-action--retry" type="button" onClick={vm.installLima}>
-                            Retry
+                            {t("compute.vmRetry")}
                           </button>
                         )
                       )}
@@ -912,18 +914,18 @@ export default function OnboardingWizard({ open, onComplete, settings, onSetting
                        vmPhase2 === "running" ? <Loader2 size={13} className="spin" /> :
                        vmPhase2 === "error" ? <CircleAlert size={13} className="setup-vm-icon--error" /> :
                        <span className="setup-vm-dot" />}
-                      <span className="setup-vm-label">VM Instance</span>
-                      {vmPhase2 === "done" && <span className="setup-vm-badge">Ready</span>}
+                      <span className="setup-vm-label">{t("compute.vmInstance")}</span>
+                      {vmPhase2 === "done" && <span className="setup-vm-badge">{t("compute.vmInstanceReady")}</span>}
                       {vmPhase2 === "running" && vmPhase2Msg && <span className="setup-vm-msg">{vmPhase2Msg}</span>}
                       {vmPhase2 === "pending" && vmPhase1 === "done" && (
                         vmAutoBootstrapping ? (
-                          <span className="setup-vm-msg">Auto installing...</span>
+                          <span className="setup-vm-msg">{t("compute.vmAutoInstalling")}</span>
                         ) : (
-                          <button className="vm-phase-action" type="button" onClick={vm.buildVMInstance}>Install</button>
+                          <button className="vm-phase-action" type="button" onClick={vm.buildVMInstance}>{t("compute.vmInstall")}</button>
                         )
                       )}
                       {vmPhase2 === "error" && (
-                        <button className="vm-phase-action vm-phase-action--retry" type="button" onClick={vm.buildVMInstance}>Retry</button>
+                        <button className="vm-phase-action vm-phase-action--retry" type="button" onClick={vm.buildVMInstance}>{t("compute.vmRetry")}</button>
                       )}
                     </div>
                     {vmPhase2 === "error" && vmPhase2Error && (
@@ -936,20 +938,20 @@ export default function OnboardingWizard({ open, onComplete, settings, onSetting
                        vmPhase3 === "running" ? <Loader2 size={13} className="spin" /> :
                        vmPhase3 === "error" ? <CircleAlert size={13} className="setup-vm-icon--error" /> :
                        <span className="setup-vm-dot" />}
-                      <span className="setup-vm-label">VM System Dependencies</span>
-                      {vmPhase3 === "done" && <span className="setup-vm-badge">Complete</span>}
-                      {vmPhase3 === "running" && <span className="setup-vm-msg">Installing...</span>}
+                      <span className="setup-vm-label">{t("compute.vmDeps")}</span>
+                      {vmPhase3 === "done" && <span className="setup-vm-badge">{t("compute.vmDepsComplete")}</span>}
+                      {vmPhase3 === "running" && <span className="setup-vm-msg">{t("compute.vmInstalling")}</span>}
                       {vmPhase3 === "pending" && vmUsable && (
-                        <button className="vm-phase-action" type="button" onClick={() => vm.startProvision()}>Install in background</button>
+                        <button className="vm-phase-action" type="button" onClick={() => vm.startProvision()}>{t("compute.vmInstallBackground")}</button>
                       )}
                       {vmPhase3 === "error" && (
-                        <button className="vm-phase-action vm-phase-action--retry" type="button" onClick={() => vm.startProvision()}>Retry</button>
+                        <button className="vm-phase-action vm-phase-action--retry" type="button" onClick={() => vm.startProvision()}>{t("compute.vmRetry")}</button>
                       )}
                     </div>
 
                     {vmUsable && vmPhase3 !== "done" && (
                       <p className="setup-vm-hint">
-                        System dependencies install in the background — you can continue using ClawWork while it runs.
+                        {t("compute.vmDepsHint")}
                       </p>
                     )}
                   </div>
@@ -959,14 +961,14 @@ export default function OnboardingWizard({ open, onComplete, settings, onSetting
                   <>
                     <div className="setup-compute-status">
                       <span className="setup-compute-status-dot" />
-                      Skipped — you can set this up later in Settings
+                      {t("compute.vmSkipped")}
                     </div>
                     <button
                       className="setup-btn--link"
                       type="button"
                       onClick={() => { setVmSkipped(false); setShowSkipConfirm(false); }}
                     >
-                      Set up Cowork
+                      {t("compute.vmSetupCowork")}
                     </button>
                   </>
                 )}
@@ -978,23 +980,23 @@ export default function OnboardingWizard({ open, onComplete, settings, onSetting
             {showSkipConfirm && (
               <div className="setup-skip-overlay" onClick={() => setShowSkipConfirm(false)}>
                 <div className="setup-skip-popup" onClick={(e) => e.stopPropagation()}>
-                  <p className="setup-skip-title">Are you sure you want to skip?</p>
+                  <p className="setup-skip-title">{t("compute.skipConfirmTitle")}</p>
                   <ul className="setup-skip-list">
                     {vmSupported && !vmUsable && !vmSkipped && (
-                      <li>Without a <strong>Virtual Machine</strong>, Cowork mode will not be available.</li>
+                      <li dangerouslySetInnerHTML={{ __html: t("compute.skipConfirmVm") }} />
                     )}
                     {vmUsable && vmPhase3 !== "done" && vmPhase3 !== "running" && (
-                      <li><strong>VM System Dependencies</strong> are not installed. Cowork mode will work but the agent may lack some tools. You can install them later in Settings (runs in the background).</li>
+                      <li dangerouslySetInnerHTML={{ __html: t("compute.skipConfirmDeps") }} />
                     )}
                   </ul>
-                  <p className="setup-skip-note">You can configure these later in Settings.</p>
+                  <p className="setup-skip-note">{t("compute.skipConfirmNote")}</p>
                   <div className="setup-skip-actions">
                     <button
                       className="setup-btn setup-btn--ghost"
                       type="button"
                       onClick={() => setShowSkipConfirm(false)}
                     >
-                      Go back
+                      {t("compute.skipConfirmBack")}
                     </button>
                     <button
                       className="setup-btn setup-btn--danger"
@@ -1005,7 +1007,7 @@ export default function OnboardingWizard({ open, onComplete, settings, onSetting
                         goNext();
                       }}
                     >
-                      Skip anyway
+                      {t("compute.skipConfirmSkip")}
                     </button>
                   </div>
                 </div>
@@ -1016,13 +1018,10 @@ export default function OnboardingWizard({ open, onComplete, settings, onSetting
             {showDepsPrompt && (
               <div className="setup-skip-overlay" onClick={() => setShowDepsPrompt(false)}>
                 <div className="setup-skip-popup" onClick={(e) => e.stopPropagation()}>
-                  <p className="setup-skip-title setup-skip-title--recommend">Install system dependencies?</p>
+                  <p className="setup-skip-title setup-skip-title--recommend">{t("compute.depsPromptTitle")}</p>
+                  <p className="setup-deps-desc" dangerouslySetInnerHTML={{ __html: t("compute.depsPromptDesc1") }} />
                   <p className="setup-deps-desc">
-                    Installing VM system dependencies is <strong>strongly recommended</strong>. It gives the agent access
-                    to tools like Python, Node.js, LaTeX, LibreOffice, and more.
-                  </p>
-                  <p className="setup-deps-desc">
-                    The installation runs in the background — you can start using ClawWork immediately.
+                    {t("compute.depsPromptDesc2")}
                   </p>
                   <div className="setup-skip-actions">
                     <button
@@ -1030,14 +1029,14 @@ export default function OnboardingWizard({ open, onComplete, settings, onSetting
                       type="button"
                       onClick={() => { setShowDepsPrompt(false); goNext(); }}
                     >
-                      Continue without
+                      {t("compute.depsPromptContinueWithout")}
                     </button>
                     <button
                       className="setup-btn setup-btn--primary"
                       type="button"
                       onClick={() => { vm.startProvision(); setShowDepsPrompt(false); goNext(); }}
                     >
-                      Install & Continue
+                      {t("compute.depsPromptInstall")}
                     </button>
                   </div>
                 </div>
@@ -1055,7 +1054,7 @@ export default function OnboardingWizard({ open, onComplete, settings, onSetting
               };
               return (
                 <div className="setup-actions">
-                  <button className="setup-btn setup-btn--ghost" onClick={goBack}>Back</button>
+                  <button className="setup-btn setup-btn--ghost" onClick={goBack}>{t("compute.back")}</button>
                   <div className="setup-actions-right">
                     {!canProceed && !showSkipConfirm && (
                       <button
@@ -1063,7 +1062,7 @@ export default function OnboardingWizard({ open, onComplete, settings, onSetting
                         type="button"
                         onClick={() => setShowSkipConfirm(true)}
                       >
-                        Skip
+                        {t("compute.skip")}
                       </button>
                     )}
                     <button
@@ -1071,7 +1070,7 @@ export default function OnboardingWizard({ open, onComplete, settings, onSetting
                       onClick={handleNext}
                       disabled={!canProceed || anyVmRunning}
                     >
-                      Next <ArrowRight size={14} />
+                      {t("compute.next")} <ArrowRight size={14} />
                     </button>
                   </div>
                 </div>
@@ -1080,15 +1079,15 @@ export default function OnboardingWizard({ open, onComplete, settings, onSetting
           </div>
         )}
 
-        {/* ── Step 5: Done ── */}
+        {/* 鈹€鈹€ Step 5: Done 鈹€鈹€ */}
         {step === "done" && (
           <div className="setup-step">
             <div className="setup-done-icon">
               <Check size={32} strokeWidth={2.5} />
             </div>
-            <h2 className="setup-title setup-title--center">You&rsquo;re all set!</h2>
+            <h2 className="setup-title setup-title--center">{t("done.title")}</h2>
             <p className="setup-subtitle setup-subtitle--center">
-              Here&rsquo;s what you configured:
+              {t("done.subtitle")}
             </p>
 
             {error && <div className="setup-error">{error}</div>}
@@ -1096,55 +1095,55 @@ export default function OnboardingWizard({ open, onComplete, settings, onSetting
             <div className="setup-summary">
               <div className="setup-summary-row">
                 <Sparkles size={14} />
-                <span className="setup-summary-label">AI Model</span>
+                <span className="setup-summary-label">{t("done.aiModel")}</span>
                 <span className="setup-summary-value">
                   {displayName || autoDisplayName(modelId) || modelId}
                 </span>
               </div>
               <div className="setup-summary-row">
                 <ScrollText size={14} />
-                <span className="setup-summary-label">Summarizer</span>
+                <span className="setup-summary-label">{t("done.summarizer")}</span>
                 <span className="setup-summary-value">
                   {sumSameAsMain
-                    ? "Same as main"
-                    : (sumDisplayName || autoDisplayName(sumModelId) || "Not configured")}
+                    ? t("done.summarizerSameAsMain")
+                    : (sumDisplayName || autoDisplayName(sumModelId) || t("done.summarizerNotConfigured"))}
                 </span>
               </div>
               <div className="setup-summary-row">
                 <Globe size={14} />
-                <span className="setup-summary-label">Web Search</span>
+                <span className="setup-summary-label">{t("done.webSearch")}</span>
                 <span className="setup-summary-value">
-                  {searchProvider ? searchProvider.charAt(0).toUpperCase() + searchProvider.slice(1) : "Skipped"}
+                  {searchProvider ? searchProvider.charAt(0).toUpperCase() + searchProvider.slice(1) : t("done.skipped")}
                 </span>
               </div>
               <div className="setup-summary-row">
                 <ScrollText size={14} />
-                <span className="setup-summary-label">Web Fetch</span>
+                <span className="setup-summary-label">{t("done.webFetch")}</span>
                 <span className="setup-summary-value">
-                  {fetchProvider ? fetchProvider.charAt(0).toUpperCase() + fetchProvider.slice(1) : "Skipped"}
+                  {fetchProvider ? fetchProvider.charAt(0).toUpperCase() + fetchProvider.slice(1) : t("done.skipped")}
                 </span>
               </div>
               <div className="setup-summary-row">
                 <Monitor size={14} />
-                <span className="setup-summary-label">Virtual Machine</span>
+                <span className="setup-summary-label">{t("done.virtualMachine")}</span>
                 <span className="setup-summary-value">
-                  {vmSkipped ? "Skipped" : vmUsable ? "Ready" : "Not set up"}
+                  {vmSkipped ? t("done.skipped") : vmUsable ? t("done.vmReady") : t("done.vmNotSetUp")}
                 </span>
               </div>
             </div>
 
             <p className="setup-footer">
-              You can change any of these later in Settings.
+              {t("done.footer")}
             </p>
 
             <div className="setup-actions setup-actions--center">
-              <button className="setup-btn setup-btn--ghost" onClick={goBack}>Back</button>
+              <button className="setup-btn setup-btn--ghost" onClick={goBack}>{t("done.back")}</button>
               <button
                 className="setup-btn setup-btn--primary setup-btn--finish"
                 onClick={handleFinish}
                 disabled={saving}
               >
-                {saving ? "Saving..." : "Start using ClawWork"}
+                {saving ? t("done.saving") : t("done.finish")}
               </button>
             </div>
           </div>
diff --git a/libs/hexagent_demo/frontend/src/components/RestartRequiredModal.tsx b/libs/hexagent_demo/frontend/src/components/RestartRequiredModal.tsx
index 15354fdd..0cfc1f25 100644
--- a/libs/hexagent_demo/frontend/src/components/RestartRequiredModal.tsx
+++ b/libs/hexagent_demo/frontend/src/components/RestartRequiredModal.tsx
@@ -1,4 +1,5 @@
 import { AlertTriangle, RefreshCw, Settings } from "lucide-react";
+import { useTranslation } from "react-i18next";
 import { useVMSetup } from "../vmSetup";
 
 interface RestartRequiredModalProps {
@@ -12,6 +13,7 @@ export default function RestartRequiredModal({
   message,
   onOpenSettings,
 }: RestartRequiredModalProps) {
+  const { t } = useTranslation("misc");
   const vm = useVMSetup();
 
   if (!open) return null;
@@ -22,24 +24,24 @@ export default function RestartRequiredModal({
         <div className="restart-required-header">
           <AlertTriangle size={18} className="restart-required-icon" />
           <h2 id="restart-required-title" className="restart-required-title">
-            Restart Required
+            {t("restartRequired.title")}
           </h2>
         </div>
         <p className="restart-required-text">
-          WSL runtime installation is complete, but Windows must restart before OpenAgent can continue.
+          {t("restartRequired.wslComplete")}
         </p>
         <p className="restart-required-text restart-required-text--strong">
-          Please restart your computer now, otherwise VM/Cowork features will not work.
+          {t("restartRequired.pleaseRestart")}
         </p>
         {message ? <p className="restart-required-detail">{message}</p> : null}
         <div className="restart-required-actions">
           <button className="restart-required-btn restart-required-btn--ghost" type="button" onClick={onOpenSettings}>
             <Settings size={14} />
-            <span>Open Sandbox Settings</span>
+            <span>{t("restartRequired.openSandboxSettings")}</span>
           </button>
           <button className="restart-required-btn restart-required-btn--primary" type="button" onClick={vm.recheckVmEngine}>
             <RefreshCw size={14} />
-            <span>I have restarted, Re-check</span>
+            <span>{t("restartRequired.recheck")}</span>
           </button>
         </div>
       </div>
diff --git a/libs/hexagent_demo/frontend/src/components/RightPanel.tsx b/libs/hexagent_demo/frontend/src/components/RightPanel.tsx
index 45a18cc4..09031287 100644
--- a/libs/hexagent_demo/frontend/src/components/RightPanel.tsx
+++ b/libs/hexagent_demo/frontend/src/components/RightPanel.tsx
@@ -1,5 +1,6 @@
 import { useState, useMemo, useRef, useCallback, useEffect, memo } from "react";
 import { ChevronDown } from "lucide-react";
+import { useTranslation } from "react-i18next";
 import TodoProgress, { extractTodos } from "../tools/renderers/TodoProgress";
 import PresentFilesResult from "../tools/renderers/PresentFilesResult";
 import type { Conversation, ContentBlock, ToolCall } from "../types";
@@ -12,6 +13,7 @@ interface RightPanelProps {
 }
 
 export default memo(function RightPanel({ visible, conversation, streamingBlocks }: RightPanelProps) {
+  const { t } = useTranslation("misc");
   const [progressOpen, setProgressOpen] = useState(true);
   const [artifactsOpen, setArtifactsOpen] = useState(true);
   const progressBodyRef = useRef<HTMLDivElement>(null);
@@ -117,7 +119,7 @@ export default memo(function RightPanel({ visible, conversation, streamingBlocks
             className="right-panel-section-header"
             onClick={() => setProgressOpen((p) => !p)}
           >
-            <span className="right-panel-section-title">Progress</span>
+            <span className="right-panel-section-title">{t("rightPanel.progress")}</span>
             <span className={`right-panel-section-toggle ${!progressOpen ? "collapsed" : ""}`}>
               <ChevronDown />
             </span>
@@ -143,7 +145,7 @@ export default memo(function RightPanel({ visible, conversation, streamingBlocks
               className="right-panel-section-header"
               onClick={() => setArtifactsOpen((p) => !p)}
             >
-              <span className="right-panel-section-title">Artifacts</span>
+              <span className="right-panel-section-title">{t("rightPanel.artifacts")}</span>
               <span className={`right-panel-section-toggle ${!artifactsOpen ? "collapsed" : ""}`}>
                 <ChevronDown />
               </span>
diff --git a/libs/hexagent_demo/frontend/src/components/SearchModal.tsx b/libs/hexagent_demo/frontend/src/components/SearchModal.tsx
index 0b3f453f..25e0e2a5 100644
--- a/libs/hexagent_demo/frontend/src/components/SearchModal.tsx
+++ b/libs/hexagent_demo/frontend/src/components/SearchModal.tsx
@@ -1,5 +1,6 @@
 import { useState, useEffect, useRef, useCallback, useMemo } from "react";
 import { Search, X } from "lucide-react";
+import { useTranslation } from "react-i18next";
 import { useAppContext } from "../store";
 import type { Conversation } from "../types";
 
@@ -17,21 +18,22 @@ function messagePreview(conv: Conversation): string {
 }
 
 /** Format a relative time string. */
-function relativeTime(dateStr: string): string {
+function relativeTime(dateStr: string, t: (key: string, opts?: Record<string, unknown>) => string): string {
   const now = Date.now();
   const then = new Date(dateStr).getTime();
   const diff = now - then;
   const mins = Math.floor(diff / 60_000);
-  if (mins < 1) return "just now";
-  if (mins < 60) return `${mins}m ago`;
+  if (mins < 1) return t("time.justNow");
+  if (mins < 60) return t("time.minutesAgo", { count: mins });
   const hours = Math.floor(mins / 60);
-  if (hours < 24) return `${hours}h ago`;
+  if (hours < 24) return t("time.hoursAgo", { count: hours });
   const days = Math.floor(hours / 24);
-  if (days < 30) return `${days}d ago`;
+  if (days < 30) return t("time.daysAgo", { count: days });
   return new Date(dateStr).toLocaleDateString();
 }
 
 export default function SearchModal({ open, onClose }: SearchModalProps) {
+  const { t } = useTranslation("search");
   const { state, dispatch } = useAppContext();
   const [query, setQuery] = useState("");
   const inputRef = useRef<HTMLInputElement>(null);
@@ -139,7 +141,7 @@ export default function SearchModal({ open, onClose }: SearchModalProps) {
           <input
             ref={inputRef}
             className="search-input"
-            placeholder="Search conversations..."
+            placeholder={t("placeholder")}
             value={query}
             onChange={(e) => setQuery(e.target.value)}
             onKeyDown={handleKeyDown}
@@ -151,7 +153,7 @@ export default function SearchModal({ open, onClose }: SearchModalProps) {
         <div className="search-results" ref={listRef}>
           {results.length === 0 && (
             <div className="search-empty">
-              {query.trim() ? "No matching conversations" : "No conversations yet"}
+              {query.trim() ? t("noMatches") : t("noConversations")}
             </div>
           )}
           {results.map((conv, i) => {
@@ -170,17 +172,17 @@ export default function SearchModal({ open, onClose }: SearchModalProps) {
                 }}
               >
                 <span className={`search-result-badge search-result-badge--${mode}`}>
-                  {mode === "chat" ? "Chat" : "Cowork"}
+                  {t("chat:mode." + mode)}
                 </span>
                 <div className="search-result-content">
                   <span className="search-result-title">
-                    {conv.title || "Untitled conversation"}
+                    {conv.title || t("sidebar:untitledConversation")}
                   </span>
                   {messagePreview(conv) && (
                     <span className="search-result-preview">{messagePreview(conv)}</span>
                   )}
                 </div>
-                <span className="search-result-time">{relativeTime(conv.updated_at)}</span>
+                <span className="search-result-time">{relativeTime(conv.updated_at, t)}</span>
               </button>
             );
           })}
diff --git a/libs/hexagent_demo/frontend/src/components/SettingsModal.tsx b/libs/hexagent_demo/frontend/src/components/SettingsModal.tsx
index dab82af5..59253023 100644
--- a/libs/hexagent_demo/frontend/src/components/SettingsModal.tsx
+++ b/libs/hexagent_demo/frontend/src/components/SettingsModal.tsx
@@ -1,5 +1,6 @@
-import { useState, useCallback, useEffect, useRef } from "react";
+import { useState, useCallback, useEffect, useRef } from "react";
 import { X, Plus, Trash2, Monitor, Moon, Sun, Unplug, SlidersHorizontal, Cpu, ChevronDown, ChevronRight, Check, Loader2, Eye, EyeOff, GripVertical, Bot, Wrench, Globe, ScrollText, Zap, FolderOpen, FolderPlus, Server, CircleCheck, CircleAlert, Upload, Package, Download, AppWindow, TriangleAlert } from "lucide-react";
+import { useTranslation } from "react-i18next";
 import type { Settings } from "../hooks/useSettings";
 import { getServerConfig, updateServerConfig, testMcpConnection, browseFolder, listSkills, uploadSkill, deleteSkill, toggleSkill, installSkill } from "../api";
 import { useAppContext } from "../store";
@@ -9,6 +10,12 @@ import type { RecentFolder } from "../recentFolders";
 import { useVMSetup } from "../vmSetup";
 import type { PhaseStatus } from "../vmSetup";
 
+/** Available languages. Add new entries here to support more languages. */
+const LANGUAGES = [
+  { code: "en", label: "English" },
+  { code: "zh-CN", label: "绠€浣撲腑鏂? },
+] as const;
+
 interface SettingsModalProps {
   open: boolean;
   onClose: () => void;
@@ -29,9 +36,10 @@ interface ConfigTabProps {
 
 export default function SettingsModal({ open, onClose, settings, onSettingsChange, initialTab }: SettingsModalProps) {
   const { dispatch } = useAppContext();
+  const { t } = useTranslation("settings");
   const [activeTab, setActiveTab] = useState<Tab>(initialTab ?? "general");
 
-  // ── Shared ServerConfig draft ──
+  // 鈹€鈹€ Shared ServerConfig draft 鈹€鈹€
   const [config, setConfig] = useState<ServerConfig | null>(null);
   const originalRef = useRef("");
   const [saving, setSaving] = useState(false);
@@ -86,7 +94,7 @@ export default function SettingsModal({ open, onClose, settings, onSettingsChang
     }
   }, [config, dispatch]);
 
-  // ── Close animation ──
+  // 鈹€鈹€ Close animation 鈹€鈹€
   const [animState, setAnimState] = useState<"open" | "closing">("open");
   const [showConfirm, setShowConfirm] = useState(false);
 
@@ -135,7 +143,7 @@ export default function SettingsModal({ open, onClose, settings, onSettingsChang
   if (!open) return null;
 
   const isClosing = animState === "closing";
-  const needsConfig = activeTab !== "general" && activeTab !== "skills";
+  const needsConfig = activeTab !== "skills";
 
   return (
     <div
@@ -155,60 +163,60 @@ export default function SettingsModal({ open, onClose, settings, onSettingsChang
             onClick={() => setActiveTab("general")}
           >
             <SlidersHorizontal className="settings-tab-icon" />
-            General
+            {t("tabs.general")}
           </button>
           <button
             className={`settings-tab ${activeTab === "sandbox" ? "active" : ""}`}
             onClick={() => setActiveTab("sandbox")}
           >
             <Monitor className="settings-tab-icon" />
-            Sandbox
+            {t("tabs.sandbox")}
           </button>
           <button
             className={`settings-tab ${activeTab === "model" ? "active" : ""}`}
             onClick={() => setActiveTab("model")}
           >
             <Cpu className="settings-tab-icon" />
-            Model
+            {t("tabs.model")}
           </button>
           <button
             className={`settings-tab ${activeTab === "tools" ? "active" : ""}`}
             onClick={() => setActiveTab("tools")}
           >
             <Wrench className="settings-tab-icon" />
-            Tool
+            {t("tabs.tool")}
           </button>
           <button
             className={`settings-tab ${activeTab === "mcps" ? "active" : ""}`}
             onClick={() => setActiveTab("mcps")}
           >
             <Unplug className="settings-tab-icon" />
-            MCP
+            {t("tabs.mcp")}
           </button>
           <button
             className={`settings-tab ${activeTab === "skills" ? "active" : ""}`}
             onClick={() => setActiveTab("skills")}
           >
             <ScrollText className="settings-tab-icon" />
-            Skills
+            {t("tabs.skills")}
           </button>
           <button
             className={`settings-tab ${activeTab === "agents" ? "active" : ""}`}
             onClick={() => setActiveTab("agents")}
           >
             <Bot className="settings-tab-icon" />
-            Subagent
+            {t("tabs.subagent")}
           </button>
         </div>
 
         <div className="settings-content">
           <div className="settings-content-body">
             <h2 className="settings-content-title">
-              {{ general: "General", model: "Model", tools: "Tool", mcps: "MCP", agents: "Subagent", sandbox: "Sandbox", skills: "Skills" }[activeTab]}
+              {{ general: t("tabs.general"), model: t("tabs.model"), tools: t("tabs.tool"), mcps: t("tabs.mcp"), agents: t("tabs.subagent"), sandbox: t("tabs.sandbox"), skills: t("tabs.skills") }[activeTab]}
             </h2>
 
             {activeTab === "general" && (
-              <GeneralTab settings={settings} onChange={onSettingsChange} />
+              <GeneralTab settings={settings} onChange={onSettingsChange} config={config} onConfigChange={handleConfigChange} />
             )}
             {activeTab === "model" && config && <ModelTab config={config} onConfigChange={handleConfigChange} />}
             {activeTab === "mcps" && config && <McpTab config={config} onConfigChange={handleConfigChange} />}
@@ -218,7 +226,7 @@ export default function SettingsModal({ open, onClose, settings, onSettingsChang
             {activeTab === "skills" && <SkillsTab />}
 
             {needsConfig && !config && !configError && (
-              <div className="settings-section"><p className="settings-hint">Loading configuration...</p></div>
+              <div className="settings-section"><p className="settings-hint">{t("loadingConfig")}</p></div>
             )}
 
             {configError && <div className="model-error">{configError}</div>}
@@ -226,20 +234,20 @@ export default function SettingsModal({ open, onClose, settings, onSettingsChang
             {/* Global save bar for all config tabs */}
             {needsConfig && config && (
               <div className="model-save-bar">
-                {configDirty && !saved && <span className="model-unsaved-hint">Unsaved changes</span>}
+                {configDirty && !saved && <span className="model-unsaved-hint">{t("save.unsaved")}</span>}
                 <button
                   className={`model-save-btn ${saved ? "saved" : ""}`}
                   onClick={handleSave}
                   disabled={saving || (!configDirty && !saved)}
                 >
                   {saving ? (
-                    <><Loader2 size={14} className="model-save-spinner" /> Applying...</>
+                    <><Loader2 size={14} className="model-save-spinner" /> {t("save.applying")}</>
                   ) : saved ? (
-                    <><Check size={14} /> Saved</>
+                    <><Check size={14} /> {t("save.saved")}</>
                   ) : configDirty ? (
-                    "Save & Apply"
+                    t("save.saveApply")
                   ) : (
-                    "No Changes"
+                    t("save.noChanges")
                   )}
                 </button>
               </div>
@@ -250,19 +258,19 @@ export default function SettingsModal({ open, onClose, settings, onSettingsChang
         {showConfirm && (
           <div className="settings-confirm-overlay" onClick={() => setShowConfirm(false)}>
             <div className="settings-confirm-dialog" onClick={(e) => e.stopPropagation()}>
-              <h3 className="settings-confirm-title">Unsaved changes</h3>
+              <h3 className="settings-confirm-title">{t("confirm.title")}</h3>
               <p className="settings-confirm-body">
-                You have unsaved changes that will be lost if you close now.
+                {t("confirm.body")}
               </p>
               <div className="settings-confirm-actions">
                 <button className="settings-confirm-btn" onClick={() => setShowConfirm(false)}>
-                  Cancel
+                  {t("confirm.cancel")}
                 </button>
                 <button className="settings-confirm-btn settings-confirm-btn--discard" onClick={animatedDiscard}>
-                  Discard
+                  {t("confirm.discard")}
                 </button>
                 <button className="settings-confirm-btn settings-confirm-btn--save" onClick={animatedSaveAndClose}>
-                  Save & Close
+                  {t("confirm.saveClose")}
                 </button>
               </div>
             </div>
@@ -276,27 +284,58 @@ export default function SettingsModal({ open, onClose, settings, onSettingsChang
 function GeneralTab({
   settings,
   onChange,
+  config,
+  onConfigChange,
 }: {
   settings: Settings;
   onChange: (s: Settings | ((prev: Settings) => Settings)) => void;
+  config: ServerConfig | null;
+  onConfigChange: (updater: (prev: ServerConfig) => ServerConfig) => void;
 }) {
+  const { t } = useTranslation("settings");
+
+  const handleLanguageChange = (code: string) => {
+    onChange((prev) => ({ ...prev, language: code }));
+    if (config) {
+      onConfigChange((prev) => ({ ...prev, language: code }));
+    }
+  };
+
   return (
     <div className="settings-rows">
       <div className="settings-row">
-        <div className="settings-row-label">Full Name</div>
+        <div className="settings-row-label">{t("general.fullName")}</div>
         <div className="settings-row-value">
           <input
             className="settings-input"
             type="text"
             value={settings.fullName}
             onChange={(e) => onChange((prev) => ({ ...prev, fullName: e.target.value }))}
-            placeholder="Your name"
+            placeholder={t("general.fullNamePlaceholder")}
           />
         </div>
       </div>
 
       <div className="settings-row">
-        <div className="settings-row-label">Appearance</div>
+        <div className="settings-row-label">{t("general.language")}</div>
+        <div className="settings-row-value">
+          <div className="settings-theme-options">
+            {LANGUAGES.map((lang) => (
+              <button
+                key={lang.code}
+                className={`settings-theme-btn ${settings.language === lang.code ? "active" : ""}`}
+                onClick={() => handleLanguageChange(lang.code)}
+              >
+                <Globe className="settings-theme-icon" />
+                <span>{lang.label}</span>
+              </button>
+            ))}
+          </div>
+        </div>
+      </div>
+
+      <div className="settings-row">
+        <div className="settings-row-label">{t("general.appearance")}</div>
         <div className="settings-row-value">
           <div className="settings-theme-options">
             {(["light", "dark", "system"] as const).map((theme) => (
@@ -308,7 +347,7 @@ function GeneralTab({
                 {theme === "light" && <Sun className="settings-theme-icon" />}
                 {theme === "dark" && <Moon className="settings-theme-icon" />}
                 {theme === "system" && <Monitor className="settings-theme-icon" />}
-                <span>{theme.charAt(0).toUpperCase() + theme.slice(1)}</span>
+                <span>{t(`general.theme${theme.charAt(0).toUpperCase() + theme.slice(1)}`)}</span>
               </button>
             ))}
           </div>
@@ -318,7 +357,7 @@ function GeneralTab({
   );
 }
 
-// ── Provider Presets ──
+// 鈹€鈹€ Provider Presets 鈹€鈹€
 
 interface ProviderPreset {
   id: string;
@@ -357,9 +396,10 @@ function presetIdFromProvider(provider: string): string {
   return match ? match.id : "openai-compatible";
 }
 
-// ── Model Tab (compact accordion) ──
+// 鈹€鈹€ Model Tab (compact accordion) 鈹€鈹€
 
 function ModelTab({ config, onConfigChange }: ConfigTabProps) {
+  const { t } = useTranslation("settings");
   const [expandedId, setExpandedId] = useState<string | null>(null);
   const [showAddPicker, setShowAddPicker] = useState(false);
   const [showKey, setShowKey] = useState<Record<string, boolean>>({});
@@ -446,10 +486,10 @@ function ModelTab({ config, onConfigChange }: ConfigTabProps) {
   return (
     <div className="settings-section">
       <p className="settings-hint">
-        Add your AI models below. The first model is the default. Drag to reorder.
+        {t("model.hint")}
       </p>
 
-      {/* ── Compact Model List ── */}
+      {/* 鈹€鈹€ Compact Model List 鈹€鈹€ */}
       <div className="ml-list">
         {config.models.map((m, idx) => {
           const presetId = presetIdFromProvider(m.provider);
@@ -484,11 +524,11 @@ function ModelTab({ config, onConfigChange }: ConfigTabProps) {
                 </div>
                 <div className="ml-row-info">
                   <div className="ml-row-top">
-                    <span className="ml-row-name">{m.display_name || m.model || "Untitled"}</span>
-                    {isDefault && <span className="ml-default-badge">Default</span>}
+                    <span className="ml-row-name">{m.display_name || m.model || t("common:untitled")}</span>
+                    {isDefault && <span className="ml-default-badge">{t("common:default")}</span>}
                   </div>
                   <div className="ml-row-meta">
-                    {preset.label}{m.model ? ` · ${m.model}` : ""}
+                    {preset.label}{m.model ? ` 路 ${m.model}` : ""}
                   </div>
                 </div>
                 <div className="ml-row-actions">
@@ -497,9 +537,9 @@ function ModelTab({ config, onConfigChange }: ConfigTabProps) {
                       className="settings-del"
                       onClick={(e) => {
                         e.stopPropagation();
-                        setDeleteConfirm({ id: m.id, name: m.display_name || m.model || "Untitled" });
+                        setDeleteConfirm({ id: m.id, name: m.display_name || m.model || t("common:untitled") });
                       }}
-                      title="Delete"
+                      title={t("common:delete")}
                     >
                       <Trash2 size={14} />
                     </button>
@@ -514,7 +554,7 @@ function ModelTab({ config, onConfigChange }: ConfigTabProps) {
                 <div className="ml-edit-inner">
                   {/* Provider pills */}
                   <div className="mc-field">
-                    <label className="mc-label">Provider</label>
+                    <label className="mc-label">{t("model.provider")}</label>
                     <div className="mc-pills">
                       {PROVIDER_PRESETS.map((p) => (
                         <button
@@ -542,27 +582,27 @@ function ModelTab({ config, onConfigChange }: ConfigTabProps) {
 
                   <div className="mc-row">
                     <div className="mc-field" style={{ flex: 1 }}>
-                      <label className="mc-label">Display Name</label>
+                      <label className="mc-label">{t("model.displayName")}</label>
                       <input
                         className="mc-input"
                         value={m.display_name}
                         onChange={(e) => updateModel(m.id, { display_name: e.target.value })}
-                        placeholder="e.g. My GPT-4"
+                        placeholder={t("model.displayNamePlaceholder")}
                       />
                     </div>
                     <div className="mc-field" style={{ flex: 1 }}>
-                      <label className="mc-label">Model ID</label>
+                      <label className="mc-label">{t("model.modelId")}</label>
                       <input
                         className="mc-input"
                         value={m.model}
                         onChange={(e) => updateModel(m.id, { model: e.target.value })}
-                        placeholder="e.g. gpt-4.1"
+                        placeholder={t("model.modelIdPlaceholder")}
                       />
                     </div>
                   </div>
 
                   <div className="mc-field">
-                    <label className="mc-label">API Key</label>
+                    <label className="mc-label">{t("model.apiKey")}</label>
                     <div className="mc-key-wrap">
                       <input
                         className="mc-input mc-input--key"
@@ -584,7 +624,7 @@ function ModelTab({ config, onConfigChange }: ConfigTabProps) {
 
                   {/* Base URL */}
                   <div className="mc-field">
-                    <label className="mc-label">Base URL</label>
+                    <label className="mc-label">{t("model.baseUrl")}</label>
                     <input
                       className="mc-input"
                       value={m.base_url}
@@ -593,11 +633,11 @@ function ModelTab({ config, onConfigChange }: ConfigTabProps) {
                     />
                   </div>
 
-                  {/* Context Window & Modalities — visually separated */}
+                  {/* Context Window & Modalities 鈥?visually separated */}
                   <div className="mc-separator" />
                   <div className="mc-row">
                     <div className="mc-field" style={{ maxWidth: 200 }}>
-                      <label className="mc-label">Context Window</label>
+                      <label className="mc-label">{t("model.contextWindow")}</label>
                       <input
                         className="mc-input"
                         value={m.context_window || ""}
@@ -606,7 +646,7 @@ function ModelTab({ config, onConfigChange }: ConfigTabProps) {
                       />
                     </div>
                     <div className="mc-field" style={{ flex: 1 }}>
-                      <label className="mc-label">Input Modalities</label>
+                      <label className="mc-label">{t("model.inputModalities")}</label>
                       <div className="mc-pills">
                         <span className="mc-pill mc-pill--active mc-pill--locked">Text</span>
                         {(["image", "audio", "video", "pdf"] as const).map((mod) => {
@@ -639,10 +679,10 @@ function ModelTab({ config, onConfigChange }: ConfigTabProps) {
         })}
       </div>
 
-      {/* ── Add Model ── */}
+      {/* 鈹€鈹€ Add Model 鈹€鈹€ */}
       {showAddPicker ? (
         <div className="add-picker">
-          <div className="add-picker-label">Choose a provider:</div>
+          <div className="add-picker-label">{t("model.chooseProvider")}</div>
           <div className="add-picker-grid">
             {PROVIDER_PRESETS.map((p) => (
               <button key={p.id} className="add-picker-btn" onClick={() => addModelWithPreset(p.id)}>
@@ -650,23 +690,23 @@ function ModelTab({ config, onConfigChange }: ConfigTabProps) {
               </button>
             ))}
           </div>
-          <button className="add-picker-cancel" onClick={() => setShowAddPicker(false)}>Cancel</button>
+          <button className="add-picker-cancel" onClick={() => setShowAddPicker(false)}>{t("common:cancel")}</button>
         </div>
       ) : (
         <div className="model-actions">
           <button className="model-add-btn" onClick={() => setShowAddPicker(true)}>
-            <Plus size={16} /> Add Model
+            <Plus size={16} /> {t("model.addModel")}
           </button>
         </div>
       )}
 
-      {/* ── Summarizer Model ── */}
+      {/* 鈹€鈹€ Summarizer Model 鈹€鈹€ */}
       {config.models.length > 0 && (
         <div className="tools-summarizer">
           <div className="tools-summarizer-left">
             <Zap size={13} className="tools-summarizer-icon" />
-            <span className="tools-summarizer-title">Summarizer Model</span>
-            <span className="tools-summarizer-desc">fast model for web page summarization</span>
+            <span className="tools-summarizer-title">{t("model.summarizerModel")}</span>
+            <span className="tools-summarizer-desc">{t("model.summarizerDesc")}</span>
           </div>
           <div className="tools-summarizer-right">
             <CustomSelect
@@ -685,16 +725,16 @@ function ModelTab({ config, onConfigChange }: ConfigTabProps) {
       {deleteConfirm && (
         <div className="settings-confirm-overlay" onClick={() => setDeleteConfirm(null)}>
           <div className="settings-confirm-dialog" onClick={(e) => e.stopPropagation()}>
-            <h3 className="settings-confirm-title">Delete &ldquo;<span className="settings-confirm-name">{deleteConfirm.name}</span>&rdquo;?</h3>
+            <h3 className="settings-confirm-title">{t("model.deleteModelTitle", { name: deleteConfirm.name })}</h3>
             <p className="settings-confirm-body">
-              This will permanently remove the model configuration. This action cannot be undone.
+              {t("model.deleteModelBody")}
             </p>
             <div className="settings-confirm-actions">
               <button className="settings-confirm-btn" onClick={() => setDeleteConfirm(null)}>
-                Cancel
+                {t("common:cancel")}
               </button>
               <button className="settings-confirm-btn settings-confirm-btn--discard" onClick={() => { deleteModel(deleteConfirm.id); setDeleteConfirm(null); }}>
-                Delete
+                {t("common:delete")}
               </button>
             </div>
           </div>
@@ -704,7 +744,7 @@ function ModelTab({ config, onConfigChange }: ConfigTabProps) {
   );
 }
 
-// ── Key-Value Pair Editor ──
+// 鈹€鈹€ Key-Value Pair Editor 鈹€鈹€
 // Stores data as JSON string but presents a friendly key/value row UI.
 
 interface KVPair { key: string; value: string }
@@ -839,9 +879,10 @@ function KeyValueEditor({
   );
 }
 
-// ── MCP Tab ──
+// 鈹€鈹€ MCP Tab 鈹€鈹€
 
 function McpTab({ config, onConfigChange }: ConfigTabProps) {
+  const { t } = useTranslation("settings");
   const [expandedId, setExpandedId] = useState<string | null>(null);
   const [deleteConfirm, setDeleteConfirm] = useState<{ id: string; name: string } | null>(null);
   const [showAddPicker, setShowAddPicker] = useState(false);
@@ -914,7 +955,7 @@ function McpTab({ config, onConfigChange }: ConfigTabProps) {
         if (debounceTimers.current[id]) clearTimeout(debounceTimers.current[id]);
       }
     }
-  }); // Intentionally no deps — runs on every render to compare fingerprints
+  }); // Intentionally no deps 鈥?runs on every render to compare fingerprints
 
   // Cleanup debounce timers on unmount
   useEffect(() => () => {
@@ -946,7 +987,7 @@ function McpTab({ config, onConfigChange }: ConfigTabProps) {
         mcp_servers: prev.mcp_servers.map((s) => {
           if (s.id !== id) return s;
           const merged = { ...s, ...updates };
-          // Config change (not toggle) → auto-disable so user must re-validate
+          // Config change (not toggle) 鈫?auto-disable so user must re-validate
           if (!isToggle && s.enabled) merged.enabled = false;
           return merged;
         }),
@@ -978,7 +1019,7 @@ function McpTab({ config, onConfigChange }: ConfigTabProps) {
         return;
       }
 
-      // Toggling ON — validate first
+      // Toggling ON 鈥?validate first
       setValidatingIds((prev) => new Set(prev).add(server.id));
       setTestStatus((prev) => ({ ...prev, [server.id]: { loading: true } }));
 
@@ -1024,7 +1065,7 @@ function McpTab({ config, onConfigChange }: ConfigTabProps) {
   return (
     <div className="settings-section">
       <p className="settings-hint">
-        Configure MCP servers that the agent can connect to. Changes take effect on next agent restart.
+        {t("mcp.hint")}
       </p>
 
       {/* Server list */}
@@ -1038,28 +1079,28 @@ function McpTab({ config, onConfigChange }: ConfigTabProps) {
               <div className="ml-row" onClick={() => setExpandedId(expanded ? null : server.id)}>
                 <div className="ml-row-info">
                   <div className="ml-row-top">
-                    <span className="ml-row-name">{server.name || "Untitled server"}</span>
+                    <span className="ml-row-name">{server.name || t("mcp.untitledServer")}</span>
                     <span className="mcp-type-badge">{server.type.toUpperCase()}</span>
                     {validatingIds.has(server.id) ? (
                       <span className="mcp-status-indicator mcp-status-testing">
-                        <Loader2 size={11} className="file-preview-spinner" /><span>Connecting…</span>
+                        <Loader2 size={11} className="file-preview-spinner" /><span>{t("mcp.connecting")}</span>
                       </span>
                     ) : (server.enabled || failedIds.has(server.id)) && testStatus[server.id] ? (
                       <span className={`mcp-status-indicator ${testStatus[server.id].loading ? "mcp-status-testing" : testStatus[server.id].ok ? "mcp-status-ok" : "mcp-status-fail"}`}>
                         {testStatus[server.id].loading ? (
-                          <><Loader2 size={11} className="file-preview-spinner" /><span>Connecting…</span></>
+                          <><Loader2 size={11} className="file-preview-spinner" /><span>{t("mcp.connecting")}</span></>
                         ) : testStatus[server.id].ok ? (
-                          <><CircleCheck size={11} /><span>{testStatus[server.id].tools} tool{testStatus[server.id].tools === 1 ? "" : "s"} available</span></>
+                          <><CircleCheck size={11} /><span>{t("mcp.toolsAvailable", { count: testStatus[server.id].tools })}</span></>
                         ) : (
-                          <><CircleAlert size={11} /><span>Failed</span></>
+                          <><CircleAlert size={11} /><span>{t("mcp.failed")}</span></>
                         )}
                       </span>
                     ) : null}
                   </div>
                   <div className="ml-row-meta">
                     {server.type === "http"
-                      ? server.url || "No URL configured"
-                      : [server.command, server.args].filter(Boolean).join(" ") || "No command configured"}
+                      ? server.url || t("mcp.noUrlConfigured")
+                      : [server.command, server.args].filter(Boolean).join(" ") || t("mcp.noCommandConfigured")}
                   </div>
                 </div>
                 <div className="ml-row-actions">
@@ -1079,9 +1120,9 @@ function McpTab({ config, onConfigChange }: ConfigTabProps) {
                     className="settings-del"
                     onClick={(e) => {
                       e.stopPropagation();
-                      setDeleteConfirm({ id: server.id, name: server.name || "Untitled" });
+                      setDeleteConfirm({ id: server.id, name: server.name || t("common:untitled") });
                     }}
-                    title="Delete"
+                    title={t("common:delete")}
                   >
                     <Trash2 size={14} />
                   </button>
@@ -1095,7 +1136,7 @@ function McpTab({ config, onConfigChange }: ConfigTabProps) {
                   <div className="ml-edit-inner">
                     {/* Type pills */}
                     <div className="mc-field">
-                      <label className="mc-label">Type</label>
+                      <label className="mc-label">{t("mcp.type")}</label>
                       <div className="mc-pills">
                         <button
                           className={`mc-pill ${server.type === "http" ? "mc-pill--active" : ""}`}
@@ -1115,28 +1156,28 @@ function McpTab({ config, onConfigChange }: ConfigTabProps) {
                     </div>
 
                     <div className="mc-field">
-                      <label className="mc-label">Name</label>
+                      <label className="mc-label">{t("mcp.name")}</label>
                       <input
                         className="mc-input"
                         value={server.name}
                         onChange={(e) => updateServer(server.id, { name: e.target.value })}
-                        placeholder="e.g. context7"
+                        placeholder={t("mcp.namePlaceholder")}
                       />
                     </div>
 
                     {server.type === "http" && (
                       <>
                         <div className="mc-field">
-                          <label className="mc-label">URL</label>
+                          <label className="mc-label">{t("mcp.url")}</label>
                           <input
                             className="mc-input"
                             value={server.url}
                             onChange={(e) => updateServer(server.id, { url: e.target.value })}
-                            placeholder="https://example.com/mcp"
+                            placeholder={t("mcp.urlPlaceholder")}
                           />
                         </div>
                         <KeyValueEditor
-                          label="Headers"
+                          label={t("mcp.headers")}
                           value={server.headers}
                           onChange={(val) => updateServer(server.id, { headers: val })}
                           keyPlaceholder="Header-Name"
@@ -1149,26 +1190,26 @@ function McpTab({ config, onConfigChange }: ConfigTabProps) {
                       <>
                         <div className="mc-row">
                           <div className="mc-field" style={{ flex: 1 }}>
-                            <label className="mc-label">Command</label>
+                            <label className="mc-label">{t("mcp.command")}</label>
                             <input
                               className="mc-input"
                               value={server.command}
                               onChange={(e) => updateServer(server.id, { command: e.target.value })}
-                              placeholder="uvx"
+                              placeholder={t("mcp.commandPlaceholder")}
                             />
                           </div>
                           <div className="mc-field" style={{ flex: 2 }}>
-                            <label className="mc-label">Arguments (space-separated)</label>
+                            <label className="mc-label">{t("mcp.args")}</label>
                             <input
                               className="mc-input"
                               value={server.args}
                               onChange={(e) => updateServer(server.id, { args: e.target.value })}
-                              placeholder="minimax-mcp --flag"
+                              placeholder={t("mcp.argsPlaceholder")}
                             />
                           </div>
                         </div>
                         <KeyValueEditor
-                          label="Environment Variables"
+                          label={t("mcp.envVars")}
                           value={server.env}
                           onChange={(val) => updateServer(server.id, { env: val })}
                           keyPlaceholder="VARIABLE_NAME"
@@ -1196,17 +1237,17 @@ function McpTab({ config, onConfigChange }: ConfigTabProps) {
       {/* Add MCP Server */}
       {showAddPicker ? (
         <div className="add-picker">
-          <div className="add-picker-label">Choose transport type:</div>
+          <div className="add-picker-label">{t("mcp.chooseTransport")}</div>
           <div className="add-picker-grid">
             <button className="add-picker-btn" onClick={() => addServer("http")}>HTTP</button>
             <button className="add-picker-btn" onClick={() => addServer("stdio")}>Stdio</button>
           </div>
-          <button className="add-picker-cancel" onClick={() => setShowAddPicker(false)}>Cancel</button>
+          <button className="add-picker-cancel" onClick={() => setShowAddPicker(false)}>{t("common:cancel")}</button>
         </div>
       ) : (
         <div className="model-actions">
           <button className="model-add-btn" onClick={() => setShowAddPicker(true)}>
-            <Plus size={16} /> Add MCP Server
+            <Plus size={16} /> {t("mcp.addServer")}
           </button>
         </div>
       )}
@@ -1215,16 +1256,16 @@ function McpTab({ config, onConfigChange }: ConfigTabProps) {
       {deleteConfirm && (
         <div className="settings-confirm-overlay" onClick={() => setDeleteConfirm(null)}>
           <div className="settings-confirm-dialog" onClick={(e) => e.stopPropagation()}>
-            <h3 className="settings-confirm-title">Delete &ldquo;<span className="settings-confirm-name">{deleteConfirm.name}</span>&rdquo;?</h3>
+            <h3 className="settings-confirm-title">{t("mcp.deleteServerTitle", { name: deleteConfirm.name })}</h3>
             <p className="settings-confirm-body">
-              This will permanently remove the MCP server. This action cannot be undone.
+              {t("mcp.deleteServerBody")}
             </p>
             <div className="settings-confirm-actions">
               <button className="settings-confirm-btn" onClick={() => setDeleteConfirm(null)}>
-                Cancel
+                {t("common:cancel")}
               </button>
               <button className="settings-confirm-btn settings-confirm-btn--discard" onClick={() => { deleteServer(deleteConfirm.id); setDeleteConfirm(null); }}>
-                Delete
+                {t("common:delete")}
               </button>
             </div>
           </div>
@@ -1234,7 +1275,7 @@ function McpTab({ config, onConfigChange }: ConfigTabProps) {
   );
 }
 
-// ── Tools Tab ──
+// 鈹€鈹€ Tools Tab 鈹€鈹€
 
 const SEARCH_PROVIDERS = [
   { id: "", label: "None" },
@@ -1249,6 +1290,7 @@ const FETCH_PROVIDERS = [
 ];
 
 function ToolsTab({ config, onConfigChange }: ConfigTabProps) {
+  const { t } = useTranslation("settings");
   const [showSearchKey, setShowSearchKey] = useState(!config.tools.search_api_key);
   const [showFetchKey, setShowFetchKey] = useState(!config.tools.fetch_api_key);
   // Per-provider key cache: { tavily: "key1", brave: "key2", jina: "key3", ... }
@@ -1295,19 +1337,19 @@ function ToolsTab({ config, onConfigChange }: ConfigTabProps) {
   return (
     <div className="settings-section">
       <p className="settings-hint">
-        Configure web search and page fetching providers for the agent.
+        {t("tools.hint")}
       </p>
 
       {/* Web Search */}
       <div className="tools-group">
         <div className="tools-group-header">
           <Globe size={14} className="tools-group-icon" />
-          <span className="tools-group-title">Web Search</span>
-          <span className="tools-group-desc">Search the web for information</span>
+          <span className="tools-group-title">{t("tools.webSearch")}</span>
+          <span className="tools-group-desc">{t("tools.webSearchDesc")}</span>
         </div>
         <div className="tools-group-body">
           <div className="mc-field">
-            <label className="mc-label">Provider</label>
+            <label className="mc-label">{t("tools.provider")}</label>
             <div className="mc-pills">
               {SEARCH_PROVIDERS.map((p) => (
                 <button
@@ -1323,7 +1365,7 @@ function ToolsTab({ config, onConfigChange }: ConfigTabProps) {
           </div>
           {tools.search_provider && (
             <div className="mc-field">
-              <label className="mc-label">API Key <span className="tools-key-required">Required</span></label>
+              <label className="mc-label">{t("tools.apiKey")} <span className="tools-key-required">{t("tools.apiKeyRequired")}</span></label>
               <div className="mc-key-wrap">
                 <input
                   className="mc-input mc-input--key"
@@ -1339,7 +1381,7 @@ function ToolsTab({ config, onConfigChange }: ConfigTabProps) {
                 <button
                   className="mc-key-toggle"
                   onClick={() => setShowSearchKey(!showSearchKey)}
-                  title={showSearchKey ? "Hide" : "Show"}
+                  title={showSearchKey ? t("common:hide") : t("common:show")}
                   type="button"
                 >
                   {showSearchKey ? <Eye size={14} /> : <EyeOff size={14} />}
@@ -1354,12 +1396,12 @@ function ToolsTab({ config, onConfigChange }: ConfigTabProps) {
       <div className="tools-group">
         <div className="tools-group-header">
           <AppWindow size={14} className="tools-group-icon" />
-          <span className="tools-group-title">Web Fetch</span>
-          <span className="tools-group-desc">Fetch and extract web page content</span>
+          <span className="tools-group-title">{t("tools.webFetch")}</span>
+          <span className="tools-group-desc">{t("tools.webFetchDesc")}</span>
         </div>
         <div className="tools-group-body">
           <div className="mc-field">
-            <label className="mc-label">Provider</label>
+            <label className="mc-label">{t("tools.provider")}</label>
             <div className="mc-pills">
               {FETCH_PROVIDERS.map((p) => (
                 <button
@@ -1376,10 +1418,10 @@ function ToolsTab({ config, onConfigChange }: ConfigTabProps) {
           {tools.fetch_provider && (
             <div className="mc-field">
               <label className="mc-label">
-                API Key
+                {t("tools.apiKey")}
                 {tools.fetch_provider === "jina"
-                  ? <span className="tools-key-hint">Optional — increases rate limit</span>
-                  : <span className="tools-key-required">Required</span>
+                  ? <span className="tools-key-hint">{t("tools.apiKeyOptional")}</span>
+                  : <span className="tools-key-required">{t("tools.apiKeyRequired")}</span>
                 }
               </label>
               <div className="mc-key-wrap">
@@ -1397,7 +1439,7 @@ function ToolsTab({ config, onConfigChange }: ConfigTabProps) {
                 <button
                   className="mc-key-toggle"
                   onClick={() => setShowFetchKey(!showFetchKey)}
-                  title={showFetchKey ? "Hide" : "Show"}
+                  title={showFetchKey ? t("common:hide") : t("common:show")}
                   type="button"
                 >
                   {showFetchKey ? <Eye size={14} /> : <EyeOff size={14} />}
@@ -1405,14 +1447,14 @@ function ToolsTab({ config, onConfigChange }: ConfigTabProps) {
               </div>
             </div>
           )}
-          <p className="tools-fetch-note">* Requires a summarizer model — configure in Model settings</p>
+          <p className="tools-fetch-note">{t("tools.fetchNote")}</p>
         </div>
       </div>
     </div>
   );
 }
 
-// ── Custom Dropdown ──
+// 鈹€鈹€ Custom Dropdown 鈹€鈹€
 
 function CustomSelect({
   value,
@@ -1468,9 +1510,10 @@ function CustomSelect({
   );
 }
 
-// ── Subagent Tab ──
+// 鈹€鈹€ Subagent Tab 鈹€鈹€
 
 function SubagentTab({ config, onConfigChange }: ConfigTabProps) {
+  const { t } = useTranslation("settings");
   const [expandedId, setExpandedId] = useState<string | null>(null);
   const [deleteConfirm, setDeleteConfirm] = useState<{ id: string; name: string } | null>(null);
   // Local string state for each agent's tools input to avoid comma-eating on keystroke
@@ -1520,7 +1563,7 @@ function SubagentTab({ config, onConfigChange }: ConfigTabProps) {
   return (
     <div className="settings-section">
       <p className="settings-hint">
-        Define specialized subagents that the main agent can delegate tasks to.
+        {t("agents.hint")}
       </p>
 
       <div className="ml-list">
@@ -1532,10 +1575,10 @@ function SubagentTab({ config, onConfigChange }: ConfigTabProps) {
               <div className="ml-row" onClick={() => setExpandedId(expanded ? null : agent.id)}>
                 <div className="ml-row-info">
                   <div className="ml-row-top">
-                    <span className="ml-row-name">{agent.name || "Untitled agent"}</span>
+                    <span className="ml-row-name">{agent.name || t("agents.untitledAgent")}</span>
                   </div>
                   <div className="ml-row-meta">
-                    {agent.description || "No description"}
+                    {agent.description || t("agents.noDescription")}
                   </div>
                 </div>
                 <div className="ml-row-actions">
@@ -1551,9 +1594,9 @@ function SubagentTab({ config, onConfigChange }: ConfigTabProps) {
                     className="settings-del"
                     onClick={(e) => {
                       e.stopPropagation();
-                      setDeleteConfirm({ id: agent.id, name: agent.name || "Untitled" });
+                      setDeleteConfirm({ id: agent.id, name: agent.name || t("common:untitled") });
                     }}
-                    title="Delete"
+                    title={t("common:delete")}
                   >
                     <Trash2 size={14} />
                   </button>
@@ -1566,23 +1609,23 @@ function SubagentTab({ config, onConfigChange }: ConfigTabProps) {
                   <div className="ml-edit-inner">
                     <div className="mc-row">
                       <div className="mc-field" style={{ flex: 1 }}>
-                        <label className="mc-label">Name</label>
+                        <label className="mc-label">{t("agents.name")}</label>
                         <input
                           className="mc-input"
                           value={agent.name}
                           onChange={(e) => updateAgent(agent.id, { name: e.target.value })}
-                          placeholder="e.g. code-reviewer"
+                          placeholder={t("agents.namePlaceholder")}
                         />
                       </div>
                       <div className="mc-field" style={{ flex: 1 }}>
-                        <label className="mc-label">Model</label>
+                        <label className="mc-label">{t("agents.model")}</label>
                         <CustomSelect
                           value={agent.model_id}
                           options={[
-                            { value: "", label: "Default" },
+                            { value: "", label: t("common:default") },
                             ...models.map((m) => ({
                               value: m.id,
-                              label: m.display_name || m.model || "Untitled",
+                              label: m.display_name || m.model || t("common:untitled"),
                             })),
                           ]}
                           onChange={(val) => updateAgent(agent.id, { model_id: val })}
@@ -1591,17 +1634,17 @@ function SubagentTab({ config, onConfigChange }: ConfigTabProps) {
                     </div>
 
                     <div className="mc-field">
-                      <label className="mc-label">Description</label>
+                      <label className="mc-label">{t("agents.description")}</label>
                       <input
                         className="mc-input"
                         value={agent.description}
                         onChange={(e) => updateAgent(agent.id, { description: e.target.value })}
-                        placeholder="What this agent does (shown to the main agent)"
+                        placeholder={t("agents.descriptionPlaceholder")}
                       />
                     </div>
 
                     <div className="mc-field">
-                      <label className="mc-label">Tools (comma or newline separated)</label>
+                      <label className="mc-label">{t("agents.toolsLabel")}</label>
                       <textarea
                         className="mc-input"
                         value={toolsText[agent.id] ?? agent.tools.join(", ")}
@@ -1624,19 +1667,19 @@ function SubagentTab({ config, onConfigChange }: ConfigTabProps) {
                           const parsed = raw.split(/[,\n]/).map((t) => t.trim()).filter(Boolean);
                           setToolsText((prev) => ({ ...prev, [agent.id]: parsed.join(", ") }));
                         }}
-                        placeholder="e.g. Read, Grep, Glob (empty = all tools)"
+                        placeholder={t("agents.toolsPlaceholder")}
                         rows={2}
                         style={{ resize: "vertical", fontFamily: "inherit" }}
                       />
                     </div>
 
                     <div className="mc-field">
-                      <label className="mc-label">System Prompt</label>
+                      <label className="mc-label">{t("agents.systemPrompt")}</label>
                       <textarea
                         className="mc-input"
                         value={agent.system_prompt}
                         onChange={(e) => updateAgent(agent.id, { system_prompt: e.target.value })}
-                        placeholder="Custom instructions for this agent..."
+                        placeholder={t("agents.systemPromptPlaceholder")}
                         rows={4}
                         style={{ resize: "vertical", fontFamily: "inherit" }}
                       />
@@ -1651,7 +1694,7 @@ function SubagentTab({ config, onConfigChange }: ConfigTabProps) {
 
       <div className="model-actions">
         <button className="model-add-btn" onClick={addAgent}>
-          <Plus size={16} /> Add Subagent
+          <Plus size={16} /> {t("agents.addAgent")}
         </button>
       </div>
 
@@ -1659,16 +1702,16 @@ function SubagentTab({ config, onConfigChange }: ConfigTabProps) {
       {deleteConfirm && (
         <div className="settings-confirm-overlay" onClick={() => setDeleteConfirm(null)}>
           <div className="settings-confirm-dialog" onClick={(e) => e.stopPropagation()}>
-            <h3 className="settings-confirm-title">Delete &ldquo;<span className="settings-confirm-name">{deleteConfirm.name}</span>&rdquo;?</h3>
+            <h3 className="settings-confirm-title">{t("agents.deleteAgentTitle", { name: deleteConfirm.name })}</h3>
             <p className="settings-confirm-body">
-              This will permanently remove the agent. This action cannot be undone.
+              {t("agents.deleteAgentBody")}
             </p>
             <div className="settings-confirm-actions">
               <button className="settings-confirm-btn" onClick={() => setDeleteConfirm(null)}>
-                Cancel
+                {t("common:cancel")}
               </button>
               <button className="settings-confirm-btn settings-confirm-btn--discard" onClick={() => { deleteAgent(deleteConfirm.id); setDeleteConfirm(null); }}>
-                Delete
+                {t("common:delete")}
               </button>
             </div>
           </div>
@@ -1678,9 +1721,10 @@ function SubagentTab({ config, onConfigChange }: ConfigTabProps) {
   );
 }
 
-// ── Sandbox Tab ──
+// 鈹€鈹€ Sandbox Tab 鈹€鈹€
 
 function SandboxTab({ config, onConfigChange }: ConfigTabProps) {
+  const { t } = useTranslation("settings");
   const vm = useVMSetup();
   const [showKey, setShowKey] = useState(!config.sandbox.e2b_api_key);
   const [folders, setFolders] = useState<RecentFolder[]>(() => loadRecentFolders());
@@ -1746,40 +1790,40 @@ function SandboxTab({ config, onConfigChange }: ConfigTabProps) {
 
   return (
     <div className="settings-section">
-      {/* ── Virtual Machine ── */}
+      {/* 鈹€鈹€ Virtual Machine 鈹€鈹€ */}
       <div className="sb-card">
         <div className="sb-card-header">
           <div className="sb-card-icon"><Monitor size={18} /></div>
           <div className="sb-card-title-group">
             <div className="sb-card-title-row">
-              <span className="sb-card-title">Virtual Machine</span>
+              <span className="sb-card-title">{t("sandbox.vm")}</span>
               <span className="sb-card-badge sb-card-badge--platform">{vmPlatformLabel}</span>
             </div>
-            <span className="sb-card-desc">Local VM sandbox — runs agent code securely on your machine</span>
+            <span className="sb-card-desc">{t("sandbox.vmDesc")}</span>
           </div>
           {vmStatus === null ? (
-            <span className="sb-card-status"><Loader2 size={14} className="spin" /> Checking...</span>
+            <span className="sb-card-status"><Loader2 size={14} className="spin" /> {t("sandbox.checking")}</span>
           ) : vmUsable ? (
-            <span className="sb-card-status sb-card-status--ok"><CircleCheck size={14} /> Ready</span>
+            <span className="sb-card-status sb-card-status--ok"><CircleCheck size={14} /> {t("sandbox.ready")}</span>
           ) : anyRunning && !vmUsable ? (
-            <span className="sb-card-status"><Loader2 size={14} className="spin" /> Setting up...</span>
+            <span className="sb-card-status"><Loader2 size={14} className="spin" /> {t("sandbox.settingUp")}</span>
           ) : coreError ? (
-            <span className="sb-card-status sb-card-status--warn"><CircleAlert size={14} /> Error</span>
+            <span className="sb-card-status sb-card-status--warn"><CircleAlert size={14} /> {t("sandbox.error")}</span>
           ) : !vmStatus.supported ? (
-            <span className="sb-card-status sb-card-status--warn"><CircleAlert size={14} /> Not supported</span>
+            <span className="sb-card-status sb-card-status--warn"><CircleAlert size={14} /> {t("sandbox.notSupported")}</span>
           ) : (
-            <span className="sb-card-status sb-card-status--warn"><CircleAlert size={14} /> Setup needed</span>
+            <span className="sb-card-status sb-card-status--warn"><CircleAlert size={14} /> {t("sandbox.setupNeeded")}</span>
           )}
         </div>
         <div className="sb-card-body">
-          {/* ── All done: clean summary ── */}
+          {/* 鈹€鈹€ All done: clean summary 鈹€鈹€ */}
           {vmStatus && vmStatus.supported && allDone && (
             <p className="vm-ready-summary">
-              <CircleCheck size={13} className="vm-phase-icon--done" /> VM is running and fully set up.
+              <CircleCheck size={13} className="vm-phase-icon--done" /> {t("sandbox.vmReady")}
             </p>
           )}
 
-          {/* ── Setup in progress or not yet started ── */}
+          {/* 鈹€鈹€ Setup in progress or not yet started 鈹€鈹€ */}
           {vmStatus && vmStatus.supported && !allDone && (
             <div className="vm-setup-phases">
               {/* Phase 1: VM backend */}
@@ -1787,25 +1831,25 @@ function SandboxTab({ config, onConfigChange }: ConfigTabProps) {
                 <div className="vm-phase-header">
                   {phaseIcon(phase1)}
                   <span className="vm-phase-label">{vmEngineLabel}</span>
-                  {phase1 === "done" && <span className="vm-phase-badge vm-phase-badge--done">Installed</span>}
+                  {phase1 === "done" && <span className="vm-phase-badge vm-phase-badge--done">{t("sandbox.installed")}</span>}
                   {phase1 === "running" && phase1Msg && <span className="vm-phase-msg">{phase1Msg}</span>}
                   {phase1 === "pending" && (
                     autoBootstrapping ? (
-                      <span className="vm-phase-msg">Auto installing...</span>
+                      <span className="vm-phase-msg">{t("sandbox.autoInstalling")}</span>
                     ) : (
                       <button className="vm-phase-action" type="button" onClick={vm.installLima}>
-                        {vmBackend === "wsl" ? "Install runtime" : "Install"}
+                        {vmBackend === "wsl" ? t("sandbox.installRuntime") : t("sandbox.install")}
                       </button>
                     )
                   )}
                   {phase1 === "error" && (
                     phase1NeedsRestart ? (
                       <button className="vm-phase-action vm-phase-action--retry" type="button" onClick={vm.recheckVmEngine}>
-                        I've restarted, Re-check
+                        {t("sandbox.recheckRestart")}
                       </button>
                     ) : (
                       <button className="vm-phase-action vm-phase-action--retry" type="button" onClick={vm.installLima}>
-                        {vmBackend === "wsl" ? "Retry install" : "Retry"}
+                        {vmBackend === "wsl" ? t("sandbox.retryInstall") : t("sandbox.retry")}
                       </button>
                     )
                   )}
@@ -1816,25 +1860,25 @@ function SandboxTab({ config, onConfigChange }: ConfigTabProps) {
                 {phase1 === "error" && /bios|firmware|vt-x|amd-v|svm|virtualization is disabled|BIOS_VIRT_DISABLED|virtualization/i.test(phase1Error || "") && (
                   <div className="vm-phase-detail" style={{ marginTop: 8 }}>
                     <p style={{ margin: "0 0 6px 0" }}>
-                      We cannot enable BIOS virtualization remotely, but you can finish it in 3 steps:
+                      {t("sandbox.biosInstructions")}
                     </p>
                     <ol style={{ margin: 0, paddingLeft: 18 }}>
-                      <li>Restart and enter BIOS/UEFI setup.</li>
-                      <li>Enable virtualization.</li>
-                      <li>Save and reboot Windows, then click Retry.</li>
+                      <li>{t("sandbox.biosStep1")}</li>
+                      <li>{t("sandbox.biosStep2")}</li>
+                      <li>{t("sandbox.biosStep3")}</li>
                     </ol>
-                    <p style={{ margin: "8px 0 4px 0" }}>Common option names:</p>
+                    <p style={{ margin: "8px 0 4px 0" }}>{t("sandbox.biosOptionNames")}</p>
                     <ul style={{ margin: 0, paddingLeft: 18 }}>
-                      <li>Intel: Intel Virtualization Technology / VT-x</li>
-                      <li>AMD: SVM Mode / AMD-V</li>
+                      <li>{t("sandbox.biosIntel")}</li>
+                      <li>{t("sandbox.biosAmd")}</li>
                     </ul>
                     <p style={{ margin: "8px 0 0 0" }}>
-                      Common BIOS keys: <code>F2</code>, <code>Del</code>, <code>Esc</code>, <code>F10</code>, <code>F12</code> (varies by brand).
+                      {t("sandbox.biosKeys")}
                     </p>
                   </div>
                 )}
                 {phase1 === "done" && (
-                  <p className="vm-phase-detail">{vmBackendName} is installed and available.</p>
+                  <p className="vm-phase-detail">{t("sandbox.isInstalledAvailable", { name: vmBackendName })}</p>
                 )}
               </div>
 
@@ -1842,18 +1886,18 @@ function SandboxTab({ config, onConfigChange }: ConfigTabProps) {
               <div className={`vm-phase ${phase2 === "running" ? "vm-phase--active" : ""}`}>
                 <div className="vm-phase-header">
                   {phaseIcon(phase2)}
-                  <span className="vm-phase-label">VM Instance</span>
-                  {phase2 === "done" && <span className="vm-phase-badge vm-phase-badge--done">Ready</span>}
+                  <span className="vm-phase-label">{t("sandbox.vmInstance")}</span>
+                  {phase2 === "done" && <span className="vm-phase-badge vm-phase-badge--done">{t("sandbox.vmInstanceReady")}</span>}
                   {phase2 === "running" && phase2Msg && <span className="vm-phase-msg">{phase2Msg}</span>}
                   {phase2 === "pending" && phase1 === "done" && (
                     autoBootstrapping ? (
-                      <span className="vm-phase-msg">Auto installing...</span>
+                      <span className="vm-phase-msg">{t("sandbox.autoInstalling")}</span>
                     ) : (
-                      <button className="vm-phase-action" type="button" onClick={vm.buildVMInstance}>Install</button>
+                      <button className="vm-phase-action" type="button" onClick={vm.buildVMInstance}>{t("sandbox.install")}</button>
                     )
                   )}
                   {phase2 === "error" && (
-                    <button className="vm-phase-action vm-phase-action--retry" type="button" onClick={vm.buildVMInstance}>Retry</button>
+                    <button className="vm-phase-action vm-phase-action--retry" type="button" onClick={vm.buildVMInstance}>{t("sandbox.retry")}</button>
                   )}
                 </div>
                 {phase2 === "error" && phase2Error && (
@@ -1865,23 +1909,23 @@ function SandboxTab({ config, onConfigChange }: ConfigTabProps) {
               <div className={`vm-phase ${phase3 === "running" ? "vm-phase--active" : ""}`}>
                 <div className="vm-phase-header">
                   {phaseIcon(phase3)}
-                  <span className="vm-phase-label">VM System Dependencies</span>
-                  {phase3 === "done" && <span className="vm-phase-badge vm-phase-badge--done">Complete</span>}
+                  <span className="vm-phase-label">{t("sandbox.vmSystemDeps")}</span>
+                  {phase3 === "done" && <span className="vm-phase-badge vm-phase-badge--done">{t("sandbox.complete")}</span>}
                   {phase3 === "pending" && vmUsable && (
-                    <button className="vm-phase-action" type="button" onClick={() => vm.startProvision()}>Install in background</button>
+                    <button className="vm-phase-action" type="button" onClick={() => vm.startProvision()}>{t("sandbox.installInBackground")}</button>
                   )}
                   {phase3 === "running" && (
-                    <button className="vm-phase-action vm-phase-action--stop" type="button" onClick={vm.stopProvision}>Stop</button>
+                    <button className="vm-phase-action vm-phase-action--stop" type="button" onClick={vm.stopProvision}>{t("sandbox.stop")}</button>
                   )}
                   {phase3 === "error" && (
                     <>
-                      <button className="vm-phase-action vm-phase-action--retry" type="button" onClick={() => vm.startProvision()}>Retry</button>
-                      <button className="vm-phase-action vm-phase-action--secondary" type="button" onClick={vm.viewLog}>Log</button>
+                      <button className="vm-phase-action vm-phase-action--retry" type="button" onClick={() => vm.startProvision()}>{t("sandbox.retry")}</button>
+                      <button className="vm-phase-action vm-phase-action--secondary" type="button" onClick={vm.viewLog}>{t("sandbox.log")}</button>
                     </>
                   )}
                 </div>
 
-                {/* Step list — visible during setup */}
+                {/* Step list 鈥?visible during setup */}
                 {(phase3 === "running" || phase3 === "error" || (phase3 === "pending" && Object.keys(provStepStatus).length > 0)) && provSteps.length > 0 && (
                   <div className="vm-provision-steps">
                     {provSteps.map((step) => {
@@ -1917,13 +1961,13 @@ function SandboxTab({ config, onConfigChange }: ConfigTabProps) {
 
           {/* Not supported message */}
           {vmStatus && !vmStatus.supported && (
-            <p className="vm-install-hint">VM backend is not available on this platform.</p>
+            <p className="vm-install-hint">{t("sandbox.vmNotSupported")}</p>
           )}
 
-          {/* Folder list — shown once VM is usable (phases 1+2 done) */}
+          {/* Folder list 鈥?shown once VM is usable (phases 1+2 done) */}
           {vmUsable && (
             <div className="vm-folder-list">
-              <label className="mc-label" style={{ marginBottom: 2 }}>Recent folders</label>
+              <label className="mc-label" style={{ marginBottom: 2 }}>{t("sandbox.recentFolders")}</label>
               {folders.map((folder) => (
                 <div key={folder.path} className="vm-folder-row">
                   <FolderOpen size={14} className="vm-folder-icon" />
@@ -1931,15 +1975,15 @@ function SandboxTab({ config, onConfigChange }: ConfigTabProps) {
                   <CustomSelect
                     value={folder.alwaysAllowed ? "allow" : "ask"}
                     options={[
-                      { value: "allow", label: "Allow" },
-                      { value: "ask", label: "Ask" },
+                      { value: "allow", label: t("sandbox.allow") },
+                      { value: "ask", label: t("sandbox.ask") },
                     ]}
                     onChange={() => toggleFolderPermission(folder.path)}
                   />
                   <button
                     className="settings-del vm-folder-remove"
                     onClick={() => removeFolder(folder.path)}
-                    title="Remove folder"
+                    title={t("sandbox.removeFolder")}
                   >
                     <Trash2 size={13} />
                   </button>
@@ -1961,23 +2005,23 @@ function SandboxTab({ config, onConfigChange }: ConfigTabProps) {
                 }}
               >
                 <FolderPlus size={14} />
-                <span>Add a folder</span>
+                <span>{t("sandbox.addFolder")}</span>
               </button>
             </div>
           )}
         </div>
       </div>
 
-      {/* ── Chat Mode (legacy) ── */}
+      {/* 鈹€鈹€ Chat Mode (legacy) 鈹€鈹€ */}
       <div className="sb-card">
         <div className="sb-card-header">
           <div className="sb-card-icon"><Server size={18} /></div>
           <div className="sb-card-title-group">
             <div className="sb-card-title-row">
-              <span className="sb-card-title">Chat Mode</span>
-              <span className="sb-card-badge sb-card-badge--chat">Optional</span>
+              <span className="sb-card-title">{t("sandbox.chatMode")}</span>
+              <span className="sb-card-badge sb-card-badge--chat">{t("sandbox.chatModeOptional")}</span>
             </div>
-            <span className="sb-card-desc">Cloud sandbox via E2B — runs agent code remotely</span>
+            <span className="sb-card-desc">{t("sandbox.chatModeDesc")}</span>
           </div>
           <label className="sb-toggle">
             <input
@@ -1996,8 +2040,8 @@ function SandboxTab({ config, onConfigChange }: ConfigTabProps) {
         {chatEnabled && (
           <div className="sb-card-body">
             <div className="mc-field">
-              <label className="mc-label">E2B API Key</label>
-              <p className="mc-hint">Get a free key at <a href="https://e2b.dev" target="_blank" rel="noreferrer">e2b.dev</a></p>
+              <label className="mc-label">{t("sandbox.e2bApiKey")}</label>
+              <p className="mc-hint">{t("sandbox.e2bHint")} <a href="https://e2b.dev" target="_blank" rel="noreferrer">e2b.dev</a></p>
               <div className="mc-key-wrap">
                 <input
                   className="mc-input mc-input--key"
@@ -2019,7 +2063,7 @@ function SandboxTab({ config, onConfigChange }: ConfigTabProps) {
                   className="mc-key-toggle"
                   type="button"
                   onClick={() => setShowKey(!showKey)}
-                  title={showKey ? "Hide" : "Show"}
+                  title={showKey ? t("common:hide") : t("common:show")}
                 >
                   {showKey ? <Eye size={14} /> : <EyeOff size={14} />}
                 </button>
@@ -2027,7 +2071,7 @@ function SandboxTab({ config, onConfigChange }: ConfigTabProps) {
             </div>
             {!e2bConfigured && (
               <p className="mc-hint" style={{ marginTop: 8, color: "var(--text-warning)" }}>
-                An E2B API key is required to use Chat mode.
+                {t("sandbox.e2bRequired")}
               </p>
             )}
           </div>
@@ -2037,9 +2081,10 @@ function SandboxTab({ config, onConfigChange }: ConfigTabProps) {
   );
 }
 
-// ── Skills Tab ──
+// 鈹€鈹€ Skills Tab 鈹€鈹€
 
 function SkillsTab() {
+  const { t } = useTranslation("settings");
   const [publicSkills, setPublicSkills] = useState<string[]>([]);
   const [privateSkills, setPrivateSkills] = useState<string[]>([]);
   const [exampleSkills, setExampleSkills] = useState<string[]>([]);
@@ -2144,7 +2189,7 @@ function SkillsTab() {
   return (
     <div className="settings-section">
       <p className="settings-hint">
-        Skills are reusable instruction sets that guide Agent on specific tasks — like creating documents, presentations, or spreadsheets.
+        {t("skills.hint")}
       </p>
 
       {/* Error popup dialog */}
@@ -2153,12 +2198,12 @@ function SkillsTab() {
           <div className="settings-confirm-dialog" onClick={(e) => e.stopPropagation()}>
             <div className="skills-error-header">
               <TriangleAlert size={18} className="skills-error-icon" />
-              <h3 className="settings-confirm-title">Error</h3>
+              <h3 className="settings-confirm-title">{t("skills.errorTitle")}</h3>
             </div>
             <p className="settings-confirm-body">{errorPopup}</p>
             <div className="settings-confirm-actions">
               <button className="settings-confirm-btn settings-confirm-btn--save" onClick={() => setErrorPopup("")}>
-                OK
+                {t("skills.ok")}
               </button>
             </div>
           </div>
@@ -2169,18 +2214,18 @@ function SkillsTab() {
       {deleteConfirm && (
         <div className="settings-confirm-overlay" onClick={() => setDeleteConfirm(null)}>
           <div className="settings-confirm-dialog" onClick={(e) => e.stopPropagation()}>
-            <h3 className="settings-confirm-title">Remove &ldquo;<span className="settings-confirm-name">{deleteConfirm.name}</span>&rdquo;?</h3>
+            <h3 className="settings-confirm-title">{t("skills.removeTitle", { name: deleteConfirm.name })}</h3>
             <p className="settings-confirm-body">
               {deleteConfirm.builtin
-                ? "This skill will be moved to Examples. You can always install it back later."
-                : "This will permanently remove the skill. This action cannot be undone."}
+                ? t("skills.removeBuiltinBody")
+                : t("skills.removeCustomBody")}
             </p>
             <div className="settings-confirm-actions">
               <button className="settings-confirm-btn" onClick={() => setDeleteConfirm(null)}>
-                Cancel
+                {t("common:cancel")}
               </button>
               <button className="settings-confirm-btn settings-confirm-btn--discard" onClick={confirmDelete}>
-                Remove
+                {t("common:remove")}
               </button>
             </div>
           </div>
@@ -2190,10 +2235,10 @@ function SkillsTab() {
       {/* Example skills */}
       {exampleSkills.length > 0 && (
         <div className="skills-group">
-          <div className="skills-group-label">Examples</div>
+          <div className="skills-group-label">{t("skills.examples")}</div>
           <div className="skills-list">
             {exampleSkills.every((name) => publicSkills.includes(name)) ? (
-              <p className="settings-hint skills-empty">All example skills are installed under Built-in.</p>
+              <p className="settings-hint skills-empty">{t("skills.allExamplesInstalled")}</p>
             ) : (
               exampleSkills.filter((name) => !publicSkills.includes(name)).map((name) => (
                 <div key={name} className="skills-item skills-item--example">
@@ -2202,10 +2247,10 @@ function SkillsTab() {
                   <button
                     className="skills-item-install"
                     onClick={() => handleInstall(name)}
-                    title="Install skill"
+                    title={t("skills.installSkill")}
                   >
                     <Download size={13} />
-                    <span>Install</span>
+                    <span>{t("skills.install")}</span>
                   </button>
                 </div>
               ))
@@ -2217,7 +2262,7 @@ function SkillsTab() {
       {/* Built-in skills */}
       {publicSkills.length > 0 && (
         <div className="skills-group">
-          <div className="skills-group-label">Built-in</div>
+          <div className="skills-group-label">{t("skills.builtIn")}</div>
           <div className="skills-list">
             {publicSkills.map((name) => (
               <div key={name} className={`skills-item ${disabledSkills.has(name) ? "skills-item--disabled" : ""}`}>
@@ -2226,12 +2271,12 @@ function SkillsTab() {
                 <button
                   className={`skills-toggle ${disabledSkills.has(name) ? "" : "skills-toggle--on"}`}
                   onClick={() => handleToggle(name, disabledSkills.has(name))}
-                  title={disabledSkills.has(name) ? "Enable skill" : "Disable skill"}
+                  title={disabledSkills.has(name) ? t("skills.enableSkill") : t("skills.disableSkill")}
                 />
                 <button
                   className="settings-del"
                   onClick={() => { deleteSkill(name).then(() => loadSkills()).catch((err: unknown) => showError(err instanceof Error ? err.message : "Delete failed")); }}
-                  title="Remove skill"
+                  title={t("skills.removeSkill")}
                 >
                   <Trash2 size={13} />
                 </button>
@@ -2243,7 +2288,7 @@ function SkillsTab() {
 
       {/* User skills */}
       <div className="skills-group">
-        <div className="skills-group-label">Custom</div>
+        <div className="skills-group-label">{t("skills.custom")}</div>
         <div className="skills-list">
           {privateSkills.map((name) => (
             <div key={name} className={`skills-item ${disabledSkills.has(name) ? "skills-item--disabled" : ""}`}>
@@ -2252,19 +2297,19 @@ function SkillsTab() {
               <button
                 className={`skills-toggle ${disabledSkills.has(name) ? "" : "skills-toggle--on"}`}
                 onClick={() => handleToggle(name, disabledSkills.has(name))}
-                title={disabledSkills.has(name) ? "Enable skill" : "Disable skill"}
+                title={disabledSkills.has(name) ? t("skills.enableSkill") : t("skills.disableSkill")}
               />
               <button
                 className="settings-del"
                 onClick={() => setDeleteConfirm({ name, builtin: false })}
-                title="Remove skill"
+                title={t("skills.removeSkill")}
               >
                 <Trash2 size={13} />
               </button>
             </div>
           ))}
           {privateSkills.length === 0 && (
-            <p className="settings-hint skills-empty">No custom skills installed.</p>
+            <p className="settings-hint skills-empty">{t("skills.noCustomSkills")}</p>
           )}
         </div>
       </div>
@@ -2285,14 +2330,14 @@ function SkillsTab() {
         onDragLeave={handleDragLeave}
       >
         {uploading ? (
-          <><Loader2 size={16} className="model-save-spinner" /> Uploading...</>
+          <><Loader2 size={16} className="model-save-spinner" /> {t("skills.uploading")}</>
         ) : (
           <>
             <Upload size={16} />
-            <span>Drop .zip or .skill file here, or click to browse</span>
+            <span>{t("skills.dropzoneText")}</span>
           </>
         )}
-        <span className="skills-dropzone-hint">SKILL.md required — name (lowercase, hyphens only) must match directory name</span>
+        <span className="skills-dropzone-hint">{t("skills.dropzoneHint")}</span>
       </div>
     </div>
   );
diff --git a/libs/hexagent_demo/frontend/src/components/Sidebar.tsx b/libs/hexagent_demo/frontend/src/components/Sidebar.tsx
index dc04bc7d..6cf650db 100644
--- a/libs/hexagent_demo/frontend/src/components/Sidebar.tsx
+++ b/libs/hexagent_demo/frontend/src/components/Sidebar.tsx
@@ -1,4 +1,5 @@
-import { useState, useCallback, useEffect, useRef } from "react";
+import { useState, useCallback, useEffect, useRef } from "react";
+import { useTranslation } from "react-i18next";
 import brandLogo from "../assets/brand-logo.png";
 import { Plus, Search, MoreHorizontal, Trash2, Pencil, Settings, PanelLeft } from "lucide-react";
 import { useAppContext } from "../store";
@@ -34,6 +35,7 @@ function getInitial(name: string): string {
 }
 
 export default function Sidebar({ onNewConversation, onOpenSettings, onOpenSearch, userName }: SidebarProps) {
+  const { t } = useTranslation("sidebar");
   const { state, dispatch } = useAppContext();
   const conversationsRef = useRef<HTMLDivElement>(null);
   const clipRef = useRef<HTMLDivElement>(null);
@@ -102,7 +104,7 @@ export default function Sidebar({ onNewConversation, onOpenSettings, onOpenSearc
 
   const handleRenameSubmit = useCallback(
     (id: string, title: string) => {
-      dispatch({ type: "UPDATE_CONVERSATION_TITLE", payload: { id, title: title || "Untitled conversation" } });
+      dispatch({ type: "UPDATE_CONVERSATION_TITLE", payload: { id, title: title || t("untitledConversation") } });
       setRenamingId(null);
     },
     [dispatch]
@@ -170,8 +172,8 @@ export default function Sidebar({ onNewConversation, onOpenSettings, onOpenSearc
         >
           <PanelLeft />
           <span className="custom-tooltip">
-            {state.sidebarCollapsed ? "Open" : "Close"} sidebar
-            <span className="custom-tooltip-shortcut">{isMac ? "⇧⌘S" : "Ctrl+Shift+S"}</span>
+            {state.sidebarCollapsed ? t("openSidebar") : t("closeSidebar")}
+            <span className="custom-tooltip-shortcut">{isMac ? "鈬р寴S" : "Ctrl+Shift+S"}</span>
           </span>
         </button>
       </div>
@@ -188,18 +190,18 @@ export default function Sidebar({ onNewConversation, onOpenSettings, onOpenSearc
             }}
           >
             <span className="sidebar-icon-wrap"><Plus /></span>
-            <span className="sidebar-action-label sidebar-fadeable">{state.selectedMode === "chat" ? "New chat" : "New task"}</span>
-            <kbd className="sidebar-shortcut">{isMac ? "⇧⌘O" : "Ctrl+Shift+O"}</kbd>
+            <span className="sidebar-action-label sidebar-fadeable">{state.selectedMode === "chat" ? t("newChat") : t("newTask")}</span>
+            <kbd className="sidebar-shortcut">{isMac ? "鈬р寴O" : "Ctrl+Shift+O"}</kbd>
           </button>
           <button className="sidebar-action-btn" onClick={onOpenSearch}>
             <span className="sidebar-icon-wrap"><Search /></span>
-            <span className="sidebar-action-label sidebar-fadeable">Search</span>
-            <kbd className="sidebar-shortcut">{isMac ? "⌘K" : "Ctrl+K"}</kbd>
+            <span className="sidebar-action-label sidebar-fadeable">{t("search")}</span>
+            <kbd className="sidebar-shortcut">{isMac ? "鈱楰" : "Ctrl+K"}</kbd>
           </button>
         </nav>
 
         <div className="sidebar-divider sidebar-fadeable" />
-        <div className="sidebar-section-label sidebar-fadeable">Recents</div>
+        <div className="sidebar-section-label sidebar-fadeable">{t("recents")}</div>
 
         <div className="sidebar-conversations sidebar-fadeable" ref={conversationsRef}>
           {state.conversations.filter((c) => (c.mode || "chat") === state.selectedMode).map((conv) => (
@@ -222,7 +224,7 @@ export default function Sidebar({ onNewConversation, onOpenSettings, onOpenSearc
                 />
               ) : (
                 <ScrollableText className="conversation-item-title">
-                  {conv.title || "Untitled conversation"}
+                  {conv.title || t("untitledConversation")}
                 </ScrollableText>
               )}
               <button
@@ -240,12 +242,12 @@ export default function Sidebar({ onNewConversation, onOpenSettings, onOpenSearc
               <div className="context-menu-inline" style={{ top: contextMenu.anchorTop }}>
                 <button className="context-menu-item" onClick={handleRenameConversation}>
                   <Pencil />
-                  <span>Rename</span>
+                  <span>{t("rename")}</span>
                 </button>
                 <div className="context-menu-divider" />
                 <button className="context-menu-item danger" onClick={handleDeleteConversation}>
                   <Trash2 />
-                  <span>Delete</span>
+                  <span>{t("delete")}</span>
                 </button>
               </div>
             </>
@@ -253,7 +255,7 @@ export default function Sidebar({ onNewConversation, onOpenSettings, onOpenSearc
 
           {state.conversations.filter((c) => (c.mode || "chat") === state.selectedMode).length === 0 && (
             <div style={{ padding: "16px 12px", fontSize: "13px", color: "var(--text-muted)", textAlign: "center" }}>
-              {state.selectedMode === "chat" ? "No chats yet" : "No tasks yet"}
+              {state.selectedMode === "chat" ? t("noChats") : t("noTasks")}
             </div>
           )}
         </div>
@@ -262,14 +264,14 @@ export default function Sidebar({ onNewConversation, onOpenSettings, onOpenSearc
         <div className="sidebar-bottom">
           <button className="sidebar-action-btn" onClick={onOpenSettings}>
             <span className="sidebar-icon-wrap"><Settings /></span>
-            <span className="sidebar-action-label sidebar-fadeable">Settings</span>
-            <kbd className="sidebar-shortcut">{isMac ? "⇧⌘," : "Ctrl+Shift+,"}</kbd>
+            <span className="sidebar-action-label sidebar-fadeable">{t("settings")}</span>
+            <kbd className="sidebar-shortcut">{isMac ? "鈬р寴," : "Ctrl+Shift+,"}</kbd>
           </button>
           <div className="sidebar-action-btn sidebar-user-row">
             <span className="sidebar-icon-wrap">
               <span className="sidebar-avatar">{getInitial(userName)}</span>
             </span>
-            <span className="sidebar-action-label sidebar-fadeable">{userName || "User"}</span>
+            <span className="sidebar-action-label sidebar-fadeable">{userName || t("user")}</span>
           </div>
         </div>
       </aside>
diff --git a/libs/hexagent_demo/frontend/src/components/VMSetupFloater.tsx b/libs/hexagent_demo/frontend/src/components/VMSetupFloater.tsx
index 4c181d71..f8b3982b 100644
--- a/libs/hexagent_demo/frontend/src/components/VMSetupFloater.tsx
+++ b/libs/hexagent_demo/frontend/src/components/VMSetupFloater.tsx
@@ -5,6 +5,7 @@
  * Click to open settings → sandbox tab for full details.
  */
 
+import { useTranslation } from "react-i18next";
 import { Loader2, ChevronRight } from "lucide-react";
 import { useVMSetup } from "../vmSetup";
 
@@ -14,6 +15,7 @@ interface VMSetupFloaterProps {
 }
 
 export default function VMSetupFloater({ settingsOpen, onOpenSettings }: VMSetupFloaterProps) {
+  const { t } = useTranslation("misc");
   const vm = useVMSetup();
 
   const anyRunning =
@@ -22,22 +24,22 @@ export default function VMSetupFloater({ settingsOpen, onOpenSettings }: VMSetup
   if (!anyRunning || settingsOpen) return null;
 
   // Determine current phase info for display
-  let title = "Setting up VM";
+  let title = t("vmSetup.settingUp");
   let msg = "";
   if (vm.phase1 === "running") {
-    title = "Installing VM Engine";
+    title = t("vmSetup.installingEngine");
     msg = vm.phase1Msg;
   } else if (vm.phase2 === "running") {
-    title = "Building VM Instance";
+    title = t("vmSetup.buildingInstance");
     msg = vm.phase2Msg;
   } else if (vm.phase3 === "running") {
-    title = "Installing Dependencies";
+    title = t("vmSetup.installingDeps");
     const runningStep = vm.provSteps.find((s) => vm.provStepStatus[s.id] === "running");
     msg = runningStep ? vm.provStepMsg[runningStep.id] || runningStep.label : "";
   }
 
   return (
-    <div className="vm-floater" onClick={onOpenSettings} title="Click to view details">
+    <div className="vm-floater" onClick={onOpenSettings} title={t("vmSetup.clickToView")}>
       <Loader2 size={16} className="vm-floater-icon spin" />
       <div className="vm-floater-text">
         <span className="vm-floater-title">{title}</span>
diff --git a/libs/hexagent_demo/frontend/src/components/WelcomeScreen.tsx b/libs/hexagent_demo/frontend/src/components/WelcomeScreen.tsx
index c26b5804..91797da3 100644
--- a/libs/hexagent_demo/frontend/src/components/WelcomeScreen.tsx
+++ b/libs/hexagent_demo/frontend/src/components/WelcomeScreen.tsx
@@ -1,4 +1,5 @@
-import { useState, useCallback, useRef, useEffect } from "react";
+import { useState, useCallback, useRef, useEffect } from "react";
+import { useTranslation } from "react-i18next";
 import { Paperclip, ArrowUp, X, FileText, Loader2, CircleAlert } from "lucide-react";
 import { useAppContext } from "../store";
 import { uploadSessionFile, deleteSessionFile, updateWarmSession } from "../api";
@@ -23,6 +24,7 @@ interface WelcomeScreenProps {
 }
 
 export default function WelcomeScreen({ onSubmit, mode, onOpenSettings }: WelcomeScreenProps) {
+  const { t } = useTranslation("welcome");
   const { state, dispatch } = useAppContext();
   const warmSessionId = state.warmSessionId;
   const isPreparingRequest = state.isRequestPending;
@@ -34,18 +36,7 @@ export default function WelcomeScreen({ onSubmit, mode, onOpenSettings }: Welcom
   const [e2bHintFlash, setE2bHintFlash] = useState(false);
   const e2bHintTimer = useRef<ReturnType<typeof setTimeout>>(null);
 
-  const chatPlaceholders = [
-    "Imagine it, I'll make it happen...",
-    "What's your idea?",
-    "Describe the impossible...",
-    "Start with an idea...",
-  ];
-  const coworkPlaceholders = [
-    "How can I help you today?",
-    "Describe the task you'd like to accomplish...",
-    "What should we work on together?",
-  ];
-  const placeholders = isCowork ? coworkPlaceholders : chatPlaceholders;
+  const placeholders = t(isCowork ? "placeholders.cowork" : "placeholders.chat", { returnObjects: true }) as string[];
 
   const [value, setValue] = useState("");
   const [current, setCurrent] = useState(0);
@@ -115,14 +106,14 @@ export default function WelcomeScreen({ onSubmit, mode, onOpenSettings }: Welcom
   const anyUploading = pendingFiles.some((f) => f.status === "uploading");
   const sendDisabled = (!value.trim() && doneFiles.length === 0) || anyUploading || mountingFolder || isPreparingRequest || noModels || sandboxBlocked;
   const sendTitle = noModels
-    ? "Configure a model in Settings first"
+    ? t("configureModel")
     : mountingFolder
-      ? "Mounting folder..."
+      ? t("mountingFolder")
       : isPreparingRequest
-        ? "Preparing request..."
+        ? t("preparingRequest")
       : sandboxBlocked
-        ? "Sandbox setup required"
-        : "Send message";
+        ? t("sandboxRequired")
+        : t("sendMessage");
 
   const handleSubmit = useCallback(() => {
     if (sandboxBlocked) { flashE2bHint(); return; }
@@ -168,7 +159,7 @@ export default function WelcomeScreen({ onSubmit, mode, onOpenSettings }: Welcom
     // Check for name collision
     const collision = pendingFilesRef.current.some((f) => f.name === file.name && f.status !== "failed");
     if (collision) {
-      const error = `"${file.name}" already attached. Rename the file and try again.`;
+      const error = t("chat:alreadyAttached", { filename: file.name });
       setPendingFiles((prev) => [...prev, { id, name: file.name, status: "failed" as const, error }]);
       dispatch({ type: "SHOW_NOTIFICATION", payload: { message: error, type: "error" } });
       return;
@@ -183,13 +174,13 @@ export default function WelcomeScreen({ onSubmit, mode, onOpenSettings }: Welcom
         );
       })
       .catch((err) => {
-        const message = err instanceof Error ? err.message : "Upload failed";
+        const message = err instanceof Error ? err.message : t("chat:uploadFailed");
         setPendingFiles((prev) =>
           prev.map((f) => f.id === id ? { ...f, status: "failed" as const, error: message } : f)
         );
         dispatch({
           type: "SHOW_NOTIFICATION",
-          payload: { message: `Failed to upload ${file.name}: ${message}`, type: "error" },
+          payload: { message: t("chat:failedToUpload", { filename: file.name, message }), type: "error" },
         });
       });
   }, [warmSessionId, dispatch, sandboxBlocked, flashE2bHint]);
@@ -214,7 +205,7 @@ export default function WelcomeScreen({ onSubmit, mode, onOpenSettings }: Welcom
           const msg = err instanceof Error ? err.message : String(err);
           // Benign race: warm session may be claimed by conversation creation.
           if (msg.includes("(404)") && msg.includes("Session was claimed")) return;
-          dispatch({ type: "SHOW_NOTIFICATION", payload: { message: "Failed to mount folder", type: "error" } });
+          dispatch({ type: "SHOW_NOTIFICATION", payload: { message: t("misc:failedToMountFolder"), type: "error" } });
         })
         .finally(() => setMountingFolder(false));
     }
@@ -229,11 +220,11 @@ export default function WelcomeScreen({ onSubmit, mode, onOpenSettings }: Welcom
         .catch((err: unknown) => {
           const msg = err instanceof Error ? err.message : String(err);
           if (msg.includes("(404)") && msg.includes("Session was claimed")) return;
-          dispatch({ type: "SHOW_NOTIFICATION", payload: { message: "Failed to mount folder", type: "error" } });
+          dispatch({ type: "SHOW_NOTIFICATION", payload: { message: t("misc:failedToMountFolder"), type: "error" } });
         })
         .finally(() => setMountingFolder(false));
     }
-    // Only trigger when warmSessionId changes (not on every folder change —
+    // Only trigger when warmSessionId changes (not on every folder change 鈥?
     // handleFolderChange already handles that when the session is ready)
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [warmSessionId]);
@@ -272,13 +263,12 @@ export default function WelcomeScreen({ onSubmit, mode, onOpenSettings }: Welcom
     }, [dispatch]),
   );
 
-  const chatHeading = "ClawWork, ready when you are.";
-  const coworkHeading = "ClawWork, here to get things done.";
+  const headingWords = t(isCowork ? "heading.coworkWords" : "heading.chatWords", { returnObjects: true }) as string[];
 
   return (
     <div className="welcome-screen" key={mode}>
       <h1 className={`welcome-heading ${isCowork ? "welcome-heading--cowork" : ""}`}>
-        {(isCowork ? coworkHeading : chatHeading).split(" ").map((word, i, arr) => {
+        {headingWords.map((word, i, arr) => {
           if (isCowork) {
             return (
               <span key={i} style={{ animationDelay: `${i * 80}ms` }}>
@@ -356,7 +346,7 @@ export default function WelcomeScreen({ onSubmit, mode, onOpenSettings }: Welcom
               />
               <button
                 className="input-tool-btn"
-                title="Attach file"
+                title={t("attachFile")}
                 onClick={() => { if (sandboxBlocked || !warmSessionId) { flashE2bHint(); return; } fileRef.current?.click(); }}
               >
                 <Paperclip />
@@ -385,20 +375,20 @@ export default function WelcomeScreen({ onSubmit, mode, onOpenSettings }: Welcom
                 {mountingFolder && (
                   <div className="mount-hint mount-hint-visible">
                     <Loader2 size={12} className="model-save-spinner" />
-                    <span>Mounting directory...</span>
+                    <span>{t("mountingDirectory")}</span>
                   </div>
                 )}
                 {!mountingFolder && isPreparingRequest && (
                   <div className="mount-hint mount-hint-visible">
                     <Loader2 size={12} className="model-save-spinner" />
-                    <span>Preparing request...</span>
+                    <span>{t("preparingRequest")}</span>
                   </div>
                 )}
                 {sandboxBlocked && (
                   <div className={`e2b-hint${value.trim() || e2bHintFlash ? " e2b-hint-visible" : ""}`}>
-                    {missingE2bKey ? "E2B API key required" : "VM setup required"} —{" "}
+                    {missingE2bKey ? t("e2bKeyRequired") : t("vmSetupRequired")} 鈥攞" "}
                     <button className="e2b-hint-link" onClick={() => onOpenSettings("sandbox")}>
-                      Set up in Settings
+                      {t("setupInSettings")}
                     </button>
                   </div>
                 )}
diff --git a/libs/hexagent_demo/frontend/src/hooks/useSettings.ts b/libs/hexagent_demo/frontend/src/hooks/useSettings.ts
index f3c617a0..88f5afdc 100644
--- a/libs/hexagent_demo/frontend/src/hooks/useSettings.ts
+++ b/libs/hexagent_demo/frontend/src/hooks/useSettings.ts
@@ -1,8 +1,10 @@
 import { useState, useEffect, useCallback } from "react";
+import i18n from "../i18n";
 
 export interface Settings {
   fullName: string;
   theme: "light" | "dark" | "system";
+  language: string;
 }
 
 const STORAGE_KEY = "hexagent-settings";
@@ -10,6 +12,7 @@ const STORAGE_KEY = "hexagent-settings";
 const DEFAULT_SETTINGS: Settings = {
   fullName: "",
   theme: "system",
+  language: "en",
 };
 
 function loadSettings(): Settings {
@@ -63,5 +66,13 @@ export function useSettings() {
     }
   }, [settings.theme]);
 
+  // Apply language to i18next and document
+  useEffect(() => {
+    if (i18n.language !== settings.language) {
+      i18n.changeLanguage(settings.language);
+    }
+    document.documentElement.lang = settings.language;
+  }, [settings.language]);
+
   return { settings, setSettings };
 }
diff --git a/libs/hexagent_demo/frontend/src/i18n.ts b/libs/hexagent_demo/frontend/src/i18n.ts
new file mode 100644
index 00000000..17149e1d
--- /dev/null
+++ b/libs/hexagent_demo/frontend/src/i18n.ts
@@ -0,0 +1,79 @@
+/**
+ * i18n initialization for HexAgent frontend.
+ *
+ * ## Adding a new language
+ * 1. Create a new folder under `src/locales/{locale}/` (e.g. `ja/`)
+ * 2. Copy all JSON files from `src/locales/en/` and translate the values
+ * 3. Import the JSON files below and add them to the `resources` object
+ * 4. Add the language to the `LANGUAGES` array in `SettingsModal.tsx`
+ */
+import i18n from "i18next";
+import { initReactI18next } from "react-i18next";
+
+// English
+import enCommon from "./locales/en/common.json";
+import enSettings from "./locales/en/settings.json";
+import enSidebar from "./locales/en/sidebar.json";
+import enWelcome from "./locales/en/welcome.json";
+import enChat from "./locales/en/chat.json";
+import enSearch from "./locales/en/search.json";
+import enMisc from "./locales/en/misc.json";
+import enOnboarding from "./locales/en/onboarding.json";
+
+// Simplified Chinese
+import zhCNCommon from "./locales/zh-CN/common.json";
+import zhCNSettings from "./locales/zh-CN/settings.json";
+import zhCNSidebar from "./locales/zh-CN/sidebar.json";
+import zhCNWelcome from "./locales/zh-CN/welcome.json";
+import zhCNChat from "./locales/zh-CN/chat.json";
+import zhCNSearch from "./locales/zh-CN/search.json";
+import zhCNMisc from "./locales/zh-CN/misc.json";
+import zhCNOnboarding from "./locales/zh-CN/onboarding.json";
+
+// Read initial language from localStorage to avoid flash of wrong language
+function getInitialLanguage(): string {
+  try {
+    const raw = localStorage.getItem("hexagent-settings");
+    if (raw) {
+      const parsed = JSON.parse(raw);
+      if (parsed.language) return parsed.language;
+    }
+  } catch {
+    // ignore
+  }
+  return "en";
+}
+
+i18n.use(initReactI18next).init({
+  resources: {
+    en: {
+      common: enCommon,
+      settings: enSettings,
+      sidebar: enSidebar,
+      welcome: enWelcome,
+      chat: enChat,
+      search: enSearch,
+      misc: enMisc,
+      onboarding: enOnboarding,
+    },
+    "zh-CN": {
+      common: zhCNCommon,
+      settings: zhCNSettings,
+      sidebar: zhCNSidebar,
+      welcome: zhCNWelcome,
+      chat: zhCNChat,
+      search: zhCNSearch,
+      misc: zhCNMisc,
+      onboarding: zhCNOnboarding,
+    },
+  },
+  lng: getInitialLanguage(),
+  fallbackLng: "en",
+  ns: ["common", "settings", "sidebar", "welcome", "chat", "search", "misc", "onboarding"],
+  defaultNS: "common",
+  interpolation: {
+    escapeValue: false, // React already escapes
+  },
+});
+
+export default i18n;
diff --git a/libs/hexagent_demo/frontend/src/locales/en/chat.json b/libs/hexagent_demo/frontend/src/locales/en/chat.json
new file mode 100644
index 00000000..9ca99eab
--- /dev/null
+++ b/libs/hexagent_demo/frontend/src/locales/en/chat.json
@@ -0,0 +1,20 @@
+{
+  "mode": {
+    "chat": "Chat",
+    "cowork": "Cowork"
+  },
+  "toggleSidePanel": "Toggle side panel",
+  "askAnything": "Ask anything...",
+  "attachFile": "Attach file",
+  "scrollToBottom": "Scroll to bottom",
+  "sendMessage": "Send message",
+  "preparingRequest": "Preparing request...",
+  "configureModel": "Configure a model in Settings first",
+  "e2bKeyRequired": "E2B API key required",
+  "setInSettings": "Set in Settings",
+  "copyMessage": "Copy message",
+  "disclaimer": "AI responses may be inaccurate. Please double-check important information.",
+  "uploadFailed": "Upload failed",
+  "failedToUpload": "Failed to upload {{filename}}: {{message}}",
+  "alreadyAttached": "\"{{filename}}\" already attached. Rename the file and try again."
+}
diff --git a/libs/hexagent_demo/frontend/src/locales/en/common.json b/libs/hexagent_demo/frontend/src/locales/en/common.json
new file mode 100644
index 00000000..c8efe971
--- /dev/null
+++ b/libs/hexagent_demo/frontend/src/locales/en/common.json
@@ -0,0 +1,20 @@
+{
+  "save": "Save",
+  "cancel": "Cancel",
+  "delete": "Delete",
+  "rename": "Rename",
+  "close": "Close",
+  "open": "Open",
+  "settings": "Settings",
+  "search": "Search",
+  "loading": "Loading...",
+  "untitled": "Untitled",
+  "add": "Add",
+  "remove": "Remove",
+  "default": "Default",
+  "show": "Show",
+  "hide": "Hide",
+  "mcp": "MCP",
+  "skills": "Skills",
+  "subagent": "Subagent"
+}
diff --git a/libs/hexagent_demo/frontend/src/locales/en/misc.json b/libs/hexagent_demo/frontend/src/locales/en/misc.json
new file mode 100644
index 00000000..1453eb3b
--- /dev/null
+++ b/libs/hexagent_demo/frontend/src/locales/en/misc.json
@@ -0,0 +1,37 @@
+{
+  "folderPicker": {
+    "workInFolder": "Work in a folder",
+    "chooseNewFolder": "Choose a new folder",
+    "recent": "Recent",
+    "permissionTitle": "Allow HexAgent to access files in \"{{folder}}\"?",
+    "permissionBody": "This grants access to all files and subfolders. HexAgent will be able to read, edit, and delete files in this directory. File contents may be shared with connected AI models and tools. Avoid selecting folders containing sensitive or private data.",
+    "cancel": "Cancel",
+    "alwaysAllow": "Always Allow",
+    "allow": "Allow"
+  },
+  "modelPicker": {
+    "noModel": "No model configured",
+    "selectModel": "Select model"
+  },
+  "rightPanel": {
+    "progress": "Progress",
+    "artifacts": "Artifacts"
+  },
+  "restartRequired": {
+    "title": "Restart Required",
+    "wslComplete": "WSL runtime installation is complete, but Windows must restart before OpenAgent can continue.",
+    "pleaseRestart": "Please restart your computer now, otherwise VM/Cowork features will not work.",
+    "openSandboxSettings": "Open Sandbox Settings",
+    "recheck": "I have restarted, Re-check"
+  },
+  "vmSetup": {
+    "settingUp": "Setting up VM",
+    "installingEngine": "Installing VM Engine",
+    "buildingInstance": "Building VM Instance",
+    "installingDeps": "Installing Dependencies",
+    "clickToView": "Click to view details"
+  },
+  "sessionSetupFailed": "Session setup failed. You can still send messages.",
+  "failedToCreateConversation": "Failed to create conversation",
+  "failedToMountFolder": "Failed to mount folder"
+}
diff --git a/libs/hexagent_demo/frontend/src/locales/en/onboarding.json b/libs/hexagent_demo/frontend/src/locales/en/onboarding.json
new file mode 100644
index 00000000..2bca4798
--- /dev/null
+++ b/libs/hexagent_demo/frontend/src/locales/en/onboarding.json
@@ -0,0 +1,116 @@
+{
+  "welcome": {
+    "tagline": "Powered by ClawWork harness",
+    "nameLabel": "What should ClawWork call you?",
+    "namePlaceholder": "Your name",
+    "themeLabel": "Theme",
+    "themeLightLabel": "Light",
+    "themeDarkLabel": "Dark",
+    "themeSystemLabel": "System",
+    "getStarted": "Get Started"
+  },
+  "provider": {
+    "title": "AI Model",
+    "subtitle": "Choose your AI provider to get started",
+    "footer": "You can add more models later in Settings.",
+    "back": "Back"
+  },
+  "model": {
+    "title": "Configure {{provider}}",
+    "subtitle": "Enter your API credentials",
+    "apiKeyLabel": "API Key",
+    "modelIdLabel": "Model ID",
+    "baseUrlLabel": "Base URL",
+    "displayNameLabel": "Display Name",
+    "displayNamePlaceholder": "My Model",
+    "advanced": "Advanced",
+    "back": "Back",
+    "next": "Next"
+  },
+  "summarizer": {
+    "title": "Summarizer model",
+    "subtitle": "A fast model for web page summarization. Can be the same as your main model or a cheaper/faster one.",
+    "sameAsMain": "Same as main model",
+    "differentModel": "Different model",
+    "providerLabel": "Provider",
+    "apiKeyLabel": "API Key",
+    "modelIdLabel": "Model ID",
+    "baseUrlLabel": "Base URL",
+    "displayNameLabel": "Display Name",
+    "displayNamePlaceholder": "Fast Model",
+    "advanced": "Advanced",
+    "back": "Back",
+    "next": "Next"
+  },
+  "tools": {
+    "title": "Web search & fetch",
+    "subtitle": "Let the agent search the web and read pages. Optional — you can configure these later.",
+    "webSearch": "Web Search",
+    "webFetch": "Web Fetch",
+    "providerLabel": "Provider",
+    "providerNone": "None",
+    "apiKeyLabel": "API Key",
+    "apiKeyPlaceholder": "{{provider}} API key",
+    "back": "Back",
+    "next": "Next"
+  },
+  "compute": {
+    "title": "Compute environments",
+    "subtitle": "ClawWork uses sandboxed environments to run code safely.",
+    "vmName": "Virtual Machine",
+    "vmRequired": "Required",
+    "vmDesc": "Local Linux VM for cowork sessions. You can skip this and set it up later in Settings.",
+    "vmNotSupported": "Not supported on this platform",
+    "vmEngine": "VM Engine",
+    "vmEngineInstalled": "Installed",
+    "vmInstance": "VM Instance",
+    "vmInstanceReady": "Ready",
+    "vmDeps": "VM System Dependencies",
+    "vmDepsComplete": "Complete",
+    "vmAutoInstalling": "Auto installing...",
+    "vmInstalling": "Installing...",
+    "vmInstall": "Install",
+    "vmInstallBackground": "Install in background",
+    "vmRetry": "Retry",
+    "vmRecheck": "I've restarted, Re-check",
+    "vmDepsHint": "System dependencies install in the background — you can continue using ClawWork while it runs.",
+    "vmSkipped": "Skipped — you can set this up later in Settings",
+    "vmSetupCowork": "Set up Cowork",
+    "skipConfirmTitle": "Are you sure you want to skip?",
+    "skipConfirmVm": "Without a <strong>Virtual Machine</strong>, Cowork mode will not be available.",
+    "skipConfirmDeps": "<strong>VM System Dependencies</strong> are not installed. Cowork mode will work but the agent may lack some tools. You can install them later in Settings (runs in the background).",
+    "skipConfirmNote": "You can configure these later in Settings.",
+    "skipConfirmBack": "Go back",
+    "skipConfirmSkip": "Skip anyway",
+    "depsPromptTitle": "Install system dependencies?",
+    "depsPromptDesc1": "Installing VM system dependencies is <strong>strongly recommended</strong>. It gives the agent access to tools like Python, Node.js, LaTeX, LibreOffice, and more.",
+    "depsPromptDesc2": "The installation runs in the background — you can start using ClawWork immediately.",
+    "depsPromptContinueWithout": "Continue without",
+    "depsPromptInstall": "Install & Continue",
+    "back": "Back",
+    "skip": "Skip",
+    "next": "Next"
+  },
+  "done": {
+    "title": "You\u2019re all set!",
+    "subtitle": "Here\u2019s what you configured:",
+    "aiModel": "AI Model",
+    "summarizer": "Summarizer",
+    "summarizerSameAsMain": "Same as main",
+    "summarizerNotConfigured": "Not configured",
+    "webSearch": "Web Search",
+    "webFetch": "Web Fetch",
+    "virtualMachine": "Virtual Machine",
+    "vmReady": "Ready",
+    "vmNotSetUp": "Not set up",
+    "skipped": "Skipped",
+    "footer": "You can change any of these later in Settings.",
+    "back": "Back",
+    "saving": "Saving...",
+    "finish": "Start using ClawWork"
+  },
+  "errors": {
+    "configureModelFirst": "Please go back and configure your AI model first",
+    "failedToSave": "Failed to save configuration"
+  }
+}
diff --git a/libs/hexagent_demo/frontend/src/locales/en/search.json b/libs/hexagent_demo/frontend/src/locales/en/search.json
new file mode 100644
index 00000000..b44bd5db
--- /dev/null
+++ b/libs/hexagent_demo/frontend/src/locales/en/search.json
@@ -0,0 +1,11 @@
+{
+  "placeholder": "Search conversations...",
+  "noMatches": "No matching conversations",
+  "noConversations": "No conversations yet",
+  "time": {
+    "justNow": "just now",
+    "minutesAgo": "{{count}}m ago",
+    "hoursAgo": "{{count}}h ago",
+    "daysAgo": "{{count}}d ago"
+  }
+}
diff --git a/libs/hexagent_demo/frontend/src/locales/en/settings.json b/libs/hexagent_demo/frontend/src/locales/en/settings.json
new file mode 100644
index 00000000..0f20a82b
--- /dev/null
+++ b/libs/hexagent_demo/frontend/src/locales/en/settings.json
@@ -0,0 +1,200 @@
+{
+  "tabs": {
+    "general": "General",
+    "sandbox": "Sandbox",
+    "model": "Model",
+    "tool": "Tool",
+    "mcp": "MCP",
+    "skills": "Skills",
+    "subagent": "Subagent"
+  },
+  "general": {
+    "fullName": "Full Name",
+    "fullNamePlaceholder": "Your name",
+    "appearance": "Appearance",
+    "language": "Language",
+    "themeLight": "Light",
+    "themeDark": "Dark",
+    "themeSystem": "System"
+  },
+  "model": {
+    "hint": "Add your AI models below. The first model is the default. Drag to reorder.",
+    "addModel": "Add Model",
+    "chooseProvider": "Choose a provider:",
+    "provider": "Provider",
+    "displayName": "Display Name",
+    "displayNamePlaceholder": "e.g. My GPT-4",
+    "modelId": "Model ID",
+    "modelIdPlaceholder": "e.g. gpt-4.1",
+    "apiKey": "API Key",
+    "baseUrl": "Base URL",
+    "contextWindow": "Context Window",
+    "inputModalities": "Input Modalities",
+    "summarizerModel": "Summarizer Model",
+    "summarizerDesc": "fast model for web page summarization",
+    "deleteModelTitle": "Delete \"{{name}}\"?",
+    "deleteModelBody": "This will permanently remove the model configuration. This action cannot be undone."
+  },
+  "save": {
+    "unsaved": "Unsaved changes",
+    "saveApply": "Save & Apply",
+    "noChanges": "No Changes",
+    "applying": "Applying...",
+    "saved": "Saved"
+  },
+  "confirm": {
+    "title": "Unsaved changes",
+    "body": "You have unsaved changes that will be lost if you close now.",
+    "cancel": "Cancel",
+    "discard": "Discard",
+    "saveClose": "Save & Close"
+  },
+  "loadingConfig": "Loading configuration...",
+  "inputSettings": {
+    "noMcpServers": "No MCP servers configured",
+    "noSkills": "No skills installed",
+    "noSubagents": "No subagents configured",
+    "manageMcp": "Manage MCP Servers...",
+    "manageSkills": "Manage Skills...",
+    "manageSubagents": "Manage Subagents..."
+  },
+  "mcp": {
+    "hint": "Configure MCP servers that the agent can connect to. Changes take effect on next agent restart.",
+    "addServer": "Add MCP Server",
+    "name": "Name",
+    "namePlaceholder": "e.g. context7",
+    "type": "Type",
+    "url": "URL",
+    "urlPlaceholder": "https://example.com/mcp",
+    "command": "Command",
+    "commandPlaceholder": "uvx",
+    "args": "Arguments (space-separated)",
+    "argsPlaceholder": "minimax-mcp --flag",
+    "envVars": "Environment Variables",
+    "headers": "Headers",
+    "testConnection": "Test Connection",
+    "testing": "Testing...",
+    "connecting": "Connecting…",
+    "toolsAvailable": "{{count}} tool{{count, plural, one {} other {s}}} available",
+    "failed": "Failed",
+    "connectionOk": "Connected — {{count}} tool(s)",
+    "connectionFailed": "Connection failed",
+    "untitledServer": "Untitled server",
+    "noUrlConfigured": "No URL configured",
+    "noCommandConfigured": "No command configured",
+    "chooseTransport": "Choose transport type:",
+    "deleteServerTitle": "Delete \"{{name}}\"?",
+    "deleteServerBody": "This will permanently remove the MCP server. This action cannot be undone."
+  },
+  "tools": {
+    "hint": "Configure web search and page fetching providers for the agent.",
+    "webSearch": "Web Search",
+    "webSearchDesc": "Search the web for information",
+    "webFetch": "Web Fetch",
+    "webFetchDesc": "Fetch and extract web page content",
+    "provider": "Provider",
+    "apiKey": "API Key",
+    "apiKeyRequired": "Required",
+    "apiKeyOptional": "Optional — increases rate limit",
+    "fetchNote": "* Requires a summarizer model — configure in Model settings",
+    "searchProvider": "Search Provider",
+    "searchApiKey": "Search API Key",
+    "fetchProvider": "Fetch Provider",
+    "fetchApiKey": "Fetch API Key"
+  },
+  "sandbox": {
+    "vm": "Virtual Machine",
+    "vmDesc": "Local VM sandbox — runs agent code securely on your machine",
+    "vmReady": "VM is running and fully set up.",
+    "vmNotSupported": "VM backend is not available on this platform.",
+    "checking": "Checking...",
+    "ready": "Ready",
+    "settingUp": "Setting up...",
+    "error": "Error",
+    "notSupported": "Not supported",
+    "setupNeeded": "Setup needed",
+    "installed": "Installed",
+    "vmInstanceReady": "Ready",
+    "complete": "Complete",
+    "vmInstance": "VM Instance",
+    "vmSystemDeps": "VM System Dependencies",
+    "installInBackground": "Install in background",
+    "stop": "Stop",
+    "log": "Log",
+    "retry": "Retry",
+    "retryInstall": "Retry install",
+    "installRuntime": "Install runtime",
+    "recheckRestart": "I've restarted, Re-check",
+    "autoInstalling": "Auto installing...",
+    "isInstalledAvailable": "{{name}} is installed and available.",
+    "recentFolders": "Recent folders",
+    "addFolder": "Add a folder",
+    "allow": "Allow",
+    "ask": "Ask",
+    "removeFolder": "Remove folder",
+    "chatMode": "Chat Mode",
+    "chatModeOptional": "Optional",
+    "chatModeDesc": "Cloud sandbox via E2B — runs agent code remotely",
+    "e2bApiKey": "E2B API Key",
+    "e2bHint": "Get a free key at",
+    "e2bRequired": "An E2B API key is required to use Chat mode.",
+    "chatEnabled": "Chat Mode",
+    "chatEnabledDesc": "Enable browser-based sandbox (requires E2B API key)",
+    "vmStatus": "VM Status",
+    "install": "Install",
+    "build": "Build",
+    "provision": "Provision",
+    "biosInstructions": "We cannot enable BIOS virtualization remotely, but you can finish it in 3 steps:",
+    "biosStep1": "Restart and enter BIOS/UEFI setup.",
+    "biosStep2": "Enable virtualization.",
+    "biosStep3": "Save and reboot Windows, then click Retry.",
+    "biosOptionNames": "Common option names:",
+    "biosIntel": "Intel: Intel Virtualization Technology / VT-x",
+    "biosAmd": "AMD: SVM Mode / AMD-V",
+    "biosKeys": "Common BIOS keys: F2, Del, Esc, F10, F12 (varies by brand)."
+  },
+  "skills": {
+    "hint": "Skills are reusable instruction sets that guide Agent on specific tasks — like creating documents, presentations, or spreadsheets.",
+    "errorTitle": "Error",
+    "ok": "OK",
+    "removeTitle": "Remove \"{{name}}\"?",
+    "removeBuiltinBody": "This skill will be moved to Examples. You can always install it back later.",
+    "removeCustomBody": "This will permanently remove the skill. This action cannot be undone.",
+    "examples": "Examples",
+    "allExamplesInstalled": "All example skills are installed under Built-in.",
+    "builtIn": "Built-in",
+    "custom": "Custom",
+    "noCustomSkills": "No custom skills installed.",
+    "uploading": "Uploading...",
+    "dropzoneText": "Drop .zip or .skill file here, or click to browse",
+    "dropzoneHint": "SKILL.md required — name (lowercase, hyphens only) must match directory name",
+    "enableSkill": "Enable skill",
+    "disableSkill": "Disable skill",
+    "installSkill": "Install skill",
+    "removeSkill": "Remove skill",
+    "upload": "Upload Skill",
+    "install": "Install",
+    "installed": "Installed",
+    "example": "Example",
+    "public": "Public",
+    "private": "Private"
+  },
+  "agents": {
+    "hint": "Define specialized subagents that the main agent can delegate tasks to.",
+    "addAgent": "Add Subagent",
+    "name": "Name",
+    "namePlaceholder": "e.g. code-reviewer",
+    "description": "Description",
+    "descriptionPlaceholder": "What this agent does (shown to the main agent)",
+    "systemPrompt": "System Prompt",
+    "systemPromptPlaceholder": "Custom instructions for this agent...",
+    "tools": "Tools",
+    "toolsLabel": "Tools (comma or newline separated)",
+    "toolsPlaceholder": "e.g. Read, Grep, Glob (empty = all tools)",
+    "model": "Model",
+    "untitledAgent": "Untitled agent",
+    "noDescription": "No description",
+    "deleteAgentTitle": "Delete \"{{name}}\"?",
+    "deleteAgentBody": "This will permanently remove the agent. This action cannot be undone."
+  }
+}
diff --git a/libs/hexagent_demo/frontend/src/locales/en/sidebar.json b/libs/hexagent_demo/frontend/src/locales/en/sidebar.json
new file mode 100644
index 00000000..63f082c8
--- /dev/null
+++ b/libs/hexagent_demo/frontend/src/locales/en/sidebar.json
@@ -0,0 +1,16 @@
+{
+  "brand": "ClawWork",
+  "openSidebar": "Open sidebar",
+  "closeSidebar": "Close sidebar",
+  "newChat": "New chat",
+  "newTask": "New task",
+  "search": "Search",
+  "settings": "Settings",
+  "recents": "Recents",
+  "noChats": "No chats yet",
+  "noTasks": "No tasks yet",
+  "untitledConversation": "Untitled conversation",
+  "rename": "Rename",
+  "delete": "Delete",
+  "user": "User"
+}
diff --git a/libs/hexagent_demo/frontend/src/locales/en/welcome.json b/libs/hexagent_demo/frontend/src/locales/en/welcome.json
new file mode 100644
index 00000000..c9ef8d55
--- /dev/null
+++ b/libs/hexagent_demo/frontend/src/locales/en/welcome.json
@@ -0,0 +1,29 @@
+{
+  "heading": {
+    "chatWords": ["ClawWork,", "ready", "when", "you", "are."],
+    "coworkWords": ["ClawWork,", "here", "to", "get", "things", "done."]
+  },
+  "placeholders": {
+    "chat": [
+      "Imagine it, I'll make it happen...",
+      "What's your idea?",
+      "Describe the impossible...",
+      "Start with an idea..."
+    ],
+    "cowork": [
+      "How can I help you today?",
+      "Describe the task you'd like to accomplish...",
+      "What should we work on together?"
+    ]
+  },
+  "attachFile": "Attach file",
+  "sendMessage": "Send message",
+  "mountingDirectory": "Mounting directory...",
+  "preparingRequest": "Preparing request...",
+  "configureModel": "Configure a model in Settings first",
+  "mountingFolder": "Mounting folder...",
+  "sandboxRequired": "Sandbox setup required",
+  "e2bKeyRequired": "E2B API key required",
+  "vmSetupRequired": "VM setup required",
+  "setupInSettings": "Set up in Settings"
+}
diff --git a/libs/hexagent_demo/frontend/src/locales/zh-CN/chat.json b/libs/hexagent_demo/frontend/src/locales/zh-CN/chat.json
new file mode 100644
index 00000000..9d2abc2b
--- /dev/null
+++ b/libs/hexagent_demo/frontend/src/locales/zh-CN/chat.json
@@ -0,0 +1,20 @@
+{
+  "mode": {
+    "chat": "聊天",
+    "cowork": "协作"
+  },
+  "toggleSidePanel": "切换侧边面板",
+  "askAnything": "问我任何问题...",
+  "attachFile": "添加附件",
+  "scrollToBottom": "滚动到底部",
+  "sendMessage": "发送消息",
+  "preparingRequest": "正在准备请求...",
+  "configureModel": "请先在设置中配置模型",
+  "e2bKeyRequired": "需要 E2B API 密钥",
+  "setInSettings": "前往设置",
+  "copyMessage": "复制消息",
+  "disclaimer": "AI 回复可能不准确，请仔细核实重要信息。",
+  "uploadFailed": "上传失败",
+  "failedToUpload": "上传 {{filename}} 失败：{{message}}",
+  "alreadyAttached": "\"{{filename}}\" 已添加。请重命名文件后重试。"
+}
diff --git a/libs/hexagent_demo/frontend/src/locales/zh-CN/common.json b/libs/hexagent_demo/frontend/src/locales/zh-CN/common.json
new file mode 100644
index 00000000..6120b212
--- /dev/null
+++ b/libs/hexagent_demo/frontend/src/locales/zh-CN/common.json
@@ -0,0 +1,20 @@
+{
+  "save": "保存",
+  "cancel": "取消",
+  "delete": "删除",
+  "rename": "重命名",
+  "close": "关闭",
+  "open": "打开",
+  "settings": "设置",
+  "search": "搜索",
+  "loading": "加载中...",
+  "untitled": "未命名",
+  "add": "添加",
+  "remove": "移除",
+  "default": "默认",
+  "show": "显示",
+  "hide": "隐藏",
+  "mcp": "MCP",
+  "skills": "技能",
+  "subagent": "子智能体"
+}
diff --git a/libs/hexagent_demo/frontend/src/locales/zh-CN/misc.json b/libs/hexagent_demo/frontend/src/locales/zh-CN/misc.json
new file mode 100644
index 00000000..ab5e58e8
--- /dev/null
+++ b/libs/hexagent_demo/frontend/src/locales/zh-CN/misc.json
@@ -0,0 +1,37 @@
+{
+  "folderPicker": {
+    "workInFolder": "选择工作目录",
+    "chooseNewFolder": "选择新文件夹",
+    "recent": "最近使用",
+    "permissionTitle": "允许 HexAgent 访问 \"{{folder}}\" 中的文件？",
+    "permissionBody": "此操作将授权访问该文件夹及其所有子文件夹。HexAgent 将能够读取、编辑和删除此目录中的文件。文件内容可能会与已连接的 AI 模型和工具共享。请避免选择包含敏感或私密数据的文件夹。",
+    "cancel": "取消",
+    "alwaysAllow": "始终允许",
+    "allow": "允许"
+  },
+  "modelPicker": {
+    "noModel": "未配置模型",
+    "selectModel": "选择模型"
+  },
+  "rightPanel": {
+    "progress": "进度",
+    "artifacts": "产出物"
+  },
+  "restartRequired": {
+    "title": "需要重启",
+    "wslComplete": "WSL 运行时安装已完成，但 Windows 需要重启才能继续使用 OpenAgent。",
+    "pleaseRestart": "请立即重启计算机，否则虚拟机/协作功能将无法使用。",
+    "openSandboxSettings": "打开沙盒设置",
+    "recheck": "已重启，重新检查"
+  },
+  "vmSetup": {
+    "settingUp": "正在配置虚拟机",
+    "installingEngine": "正在安装虚拟机引擎",
+    "buildingInstance": "正在构建虚拟机实例",
+    "installingDeps": "正在安装依赖",
+    "clickToView": "点击查看详情"
+  },
+  "sessionSetupFailed": "会话初始化失败，你仍然可以发送消息。",
+  "failedToCreateConversation": "创建对话失败",
+  "failedToMountFolder": "挂载文件夹失败"
+}
diff --git a/libs/hexagent_demo/frontend/src/locales/zh-CN/onboarding.json b/libs/hexagent_demo/frontend/src/locales/zh-CN/onboarding.json
new file mode 100644
index 00000000..f4e37f4b
--- /dev/null
+++ b/libs/hexagent_demo/frontend/src/locales/zh-CN/onboarding.json
@@ -0,0 +1,116 @@
+{
+  "welcome": {
+    "tagline": "由 ClawWork 引擎驱动",
+    "nameLabel": "ClawWork 应该怎么称呼你？",
+    "namePlaceholder": "你的名字",
+    "themeLabel": "主题",
+    "themeLightLabel": "浅色",
+    "themeDarkLabel": "深色",
+    "themeSystemLabel": "跟随系统",
+    "getStarted": "开始使用"
+  },
+  "provider": {
+    "title": "AI 模型",
+    "subtitle": "选择你的 AI 提供商以开始使用",
+    "footer": "你可以稍后在设置中添加更多模型。",
+    "back": "返回"
+  },
+  "model": {
+    "title": "配置 {{provider}}",
+    "subtitle": "输入你的 API 凭证",
+    "apiKeyLabel": "API 密钥",
+    "modelIdLabel": "模型 ID",
+    "baseUrlLabel": "基础 URL",
+    "displayNameLabel": "显示名称",
+    "displayNamePlaceholder": "我的模型",
+    "advanced": "高级选项",
+    "back": "返回",
+    "next": "下一步"
+  },
+  "summarizer": {
+    "title": "摘要模型",
+    "subtitle": "用于网页摘要的快速模型。可以与主模型相同，也可以选择更便宜/更快的模型。",
+    "sameAsMain": "与主模型相同",
+    "differentModel": "不同的模型",
+    "providerLabel": "提供商",
+    "apiKeyLabel": "API 密钥",
+    "modelIdLabel": "模型 ID",
+    "baseUrlLabel": "基础 URL",
+    "displayNameLabel": "显示名称",
+    "displayNamePlaceholder": "快速模型",
+    "advanced": "高级选项",
+    "back": "返回",
+    "next": "下一步"
+  },
+  "tools": {
+    "title": "网页搜索与抓取",
+    "subtitle": "让智能体搜索网页并阅读页面内容。此项为可选 — 你可以稍后再配置。",
+    "webSearch": "网页搜索",
+    "webFetch": "网页抓取",
+    "providerLabel": "提供商",
+    "providerNone": "无",
+    "apiKeyLabel": "API 密钥",
+    "apiKeyPlaceholder": "{{provider}} API 密钥",
+    "back": "返回",
+    "next": "下一步"
+  },
+  "compute": {
+    "title": "计算环境",
+    "subtitle": "ClawWork 使用沙盒环境来安全地运行代码。",
+    "vmName": "虚拟机",
+    "vmRequired": "必需",
+    "vmDesc": "用于协作会话的本地 Linux 虚拟机。你可以跳过此步骤，稍后在设置中配置。",
+    "vmNotSupported": "此平台不支持",
+    "vmEngine": "虚拟机引擎",
+    "vmEngineInstalled": "已安装",
+    "vmInstance": "虚拟机实例",
+    "vmInstanceReady": "就绪",
+    "vmDeps": "虚拟机系统依赖",
+    "vmDepsComplete": "完成",
+    "vmAutoInstalling": "正在自动安装...",
+    "vmInstalling": "正在安装...",
+    "vmInstall": "安装",
+    "vmInstallBackground": "后台安装",
+    "vmRetry": "重试",
+    "vmRecheck": "我已重启，重新检查",
+    "vmDepsHint": "系统依赖在后台安装 — 安装期间你可以继续使用 ClawWork。",
+    "vmSkipped": "已跳过 — 你可以稍后在设置中配置",
+    "vmSetupCowork": "设置协作模式",
+    "skipConfirmTitle": "确定要跳过吗？",
+    "skipConfirmVm": "没有<strong>虚拟机</strong>，协作模式将不可用。",
+    "skipConfirmDeps": "<strong>虚拟机系统依赖</strong>未安装。协作模式可以工作，但智能体可能缺少某些工具。你可以稍后在设置中安装（在后台运行）。",
+    "skipConfirmNote": "你可以稍后在设置中配置这些。",
+    "skipConfirmBack": "返回",
+    "skipConfirmSkip": "仍然跳过",
+    "depsPromptTitle": "安装系统依赖？",
+    "depsPromptDesc1": "<strong>强烈建议</strong>安装虚拟机系统依赖。它能让智能体访问 Python、Node.js、LaTeX、LibreOffice 等工具。",
+    "depsPromptDesc2": "安装在后台运行 — 你可以立即开始使用 ClawWork。",
+    "depsPromptContinueWithout": "不安装继续",
+    "depsPromptInstall": "安装并继续",
+    "back": "返回",
+    "skip": "跳过",
+    "next": "下一步"
+  },
+  "done": {
+    "title": "一切就绪！",
+    "subtitle": "以下是你的配置：",
+    "aiModel": "AI 模型",
+    "summarizer": "摘要模型",
+    "summarizerSameAsMain": "与主模型相同",
+    "summarizerNotConfigured": "未配置",
+    "webSearch": "网页搜索",
+    "webFetch": "网页抓取",
+    "virtualMachine": "虚拟机",
+    "vmReady": "就绪",
+    "vmNotSetUp": "未设置",
+    "skipped": "已跳过",
+    "footer": "你可以稍后在设置中更改这些。",
+    "back": "返回",
+    "saving": "正在保存...",
+    "finish": "开始使用 ClawWork"
+  },
+  "errors": {
+    "configureModelFirst": "请返回并先配置你的 AI 模型",
+    "failedToSave": "保存配置失败"
+  }
+}
diff --git a/libs/hexagent_demo/frontend/src/locales/zh-CN/search.json b/libs/hexagent_demo/frontend/src/locales/zh-CN/search.json
new file mode 100644
index 00000000..d508c71b
--- /dev/null
+++ b/libs/hexagent_demo/frontend/src/locales/zh-CN/search.json
@@ -0,0 +1,11 @@
+{
+  "placeholder": "搜索对话...",
+  "noMatches": "没有匹配的对话",
+  "noConversations": "暂无对话",
+  "time": {
+    "justNow": "刚刚",
+    "minutesAgo": "{{count}}分钟前",
+    "hoursAgo": "{{count}}小时前",
+    "daysAgo": "{{count}}天前"
+  }
+}
diff --git a/libs/hexagent_demo/frontend/src/locales/zh-CN/settings.json b/libs/hexagent_demo/frontend/src/locales/zh-CN/settings.json
new file mode 100644
index 00000000..af9f1605
--- /dev/null
+++ b/libs/hexagent_demo/frontend/src/locales/zh-CN/settings.json
@@ -0,0 +1,200 @@
+{
+  "tabs": {
+    "general": "通用",
+    "sandbox": "沙盒",
+    "model": "模型",
+    "tool": "工具",
+    "mcp": "MCP",
+    "skills": "技能",
+    "subagent": "子智能体"
+  },
+  "general": {
+    "fullName": "姓名",
+    "fullNamePlaceholder": "你的名字",
+    "appearance": "外观",
+    "language": "语言",
+    "themeLight": "浅色",
+    "themeDark": "深色",
+    "themeSystem": "跟随系统"
+  },
+  "model": {
+    "hint": "在下方添加 AI 模型。第一个模型为默认模型，拖动可调整顺序。",
+    "addModel": "添加模型",
+    "chooseProvider": "选择服务商：",
+    "provider": "服务商",
+    "displayName": "显示名称",
+    "displayNamePlaceholder": "例如 My GPT-4",
+    "modelId": "模型 ID",
+    "modelIdPlaceholder": "例如 gpt-4.1",
+    "apiKey": "API 密钥",
+    "baseUrl": "接口地址",
+    "contextWindow": "上下文窗口",
+    "inputModalities": "输入模态",
+    "summarizerModel": "摘要模型",
+    "summarizerDesc": "用于网页摘要的快速模型",
+    "deleteModelTitle": "删除 \"{{name}}\"？",
+    "deleteModelBody": "此操作将永久删除该模型配置，且无法撤销。"
+  },
+  "save": {
+    "unsaved": "有未保存的更改",
+    "saveApply": "保存并应用",
+    "noChanges": "无更改",
+    "applying": "应用中...",
+    "saved": "已保存"
+  },
+  "confirm": {
+    "title": "未保存的更改",
+    "body": "你有未保存的更改，关闭后将丢失。",
+    "cancel": "取消",
+    "discard": "放弃",
+    "saveClose": "保存并关闭"
+  },
+  "loadingConfig": "正在加载配置...",
+  "inputSettings": {
+    "noMcpServers": "未配置 MCP 服务器",
+    "noSkills": "未安装技能",
+    "noSubagents": "未配置子智能体",
+    "manageMcp": "管理 MCP 服务器...",
+    "manageSkills": "管理技能...",
+    "manageSubagents": "管理子智能体..."
+  },
+  "mcp": {
+    "hint": "配置智能体可以连接的 MCP 服务器。更改将在下次智能体重启时生效。",
+    "addServer": "添加 MCP 服务器",
+    "name": "名称",
+    "namePlaceholder": "例如 context7",
+    "type": "类型",
+    "url": "地址",
+    "urlPlaceholder": "https://example.com/mcp",
+    "command": "命令",
+    "commandPlaceholder": "uvx",
+    "args": "参数（空格分隔）",
+    "argsPlaceholder": "minimax-mcp --flag",
+    "envVars": "环境变量",
+    "headers": "请求头",
+    "testConnection": "测试连接",
+    "testing": "测试中...",
+    "connecting": "连接中…",
+    "toolsAvailable": "{{count}} 个工具可用",
+    "failed": "失败",
+    "connectionOk": "已连接 — {{count}} 个工具",
+    "connectionFailed": "连接失败",
+    "untitledServer": "未命名服务器",
+    "noUrlConfigured": "未配置 URL",
+    "noCommandConfigured": "未配置命令",
+    "chooseTransport": "选择传输类型：",
+    "deleteServerTitle": "删除 \"{{name}}\"？",
+    "deleteServerBody": "此操作将永久删除该 MCP 服务器，且无法撤销。"
+  },
+  "tools": {
+    "hint": "为智能体配置网页搜索和页面抓取服务商。",
+    "webSearch": "网页搜索",
+    "webSearchDesc": "从网络搜索信息",
+    "webFetch": "网页抓取",
+    "webFetchDesc": "抓取和提取网页内容",
+    "provider": "服务商",
+    "apiKey": "API 密钥",
+    "apiKeyRequired": "必填",
+    "apiKeyOptional": "可选 — 可提高速率限制",
+    "fetchNote": "* 需要摘要模型 — 请在模型设置中配置",
+    "searchProvider": "搜索服务商",
+    "searchApiKey": "搜索 API 密钥",
+    "fetchProvider": "抓取服务商",
+    "fetchApiKey": "抓取 API 密钥"
+  },
+  "sandbox": {
+    "vm": "虚拟机",
+    "vmDesc": "本地虚拟机沙盒 — 在您的机器上安全运行智能体代码",
+    "vmReady": "虚拟机正在运行且已完成设置。",
+    "vmNotSupported": "此平台不支持虚拟机后端。",
+    "checking": "检查中...",
+    "ready": "就绪",
+    "settingUp": "设置中...",
+    "error": "错误",
+    "notSupported": "不支持",
+    "setupNeeded": "需要设置",
+    "installed": "已安装",
+    "vmInstanceReady": "就绪",
+    "complete": "完成",
+    "vmInstance": "虚拟机实例",
+    "vmSystemDeps": "虚拟机系统依赖",
+    "installInBackground": "在后台安装",
+    "stop": "停止",
+    "log": "日志",
+    "retry": "重试",
+    "retryInstall": "重试安装",
+    "installRuntime": "安装运行时",
+    "recheckRestart": "已重启，重新检查",
+    "autoInstalling": "自动安装中...",
+    "isInstalledAvailable": "{{name}} 已安装并可用。",
+    "recentFolders": "最近文件夹",
+    "addFolder": "添加文件夹",
+    "allow": "允许",
+    "ask": "询问",
+    "removeFolder": "移除文件夹",
+    "chatMode": "聊天模式",
+    "chatModeOptional": "可选",
+    "chatModeDesc": "通过 E2B 的云端沙盒 — 远程运行智能体代码",
+    "e2bApiKey": "E2B API 密钥",
+    "e2bHint": "在以下网站获取免费密钥",
+    "e2bRequired": "使用聊天模式需要 E2B API 密钥。",
+    "chatEnabled": "聊天模式",
+    "chatEnabledDesc": "启用浏览器沙盒（需要 E2B API 密钥）",
+    "vmStatus": "虚拟机状态",
+    "install": "安装",
+    "build": "构建",
+    "provision": "配置",
+    "biosInstructions": "我们无法远程启用 BIOS 虚拟化，但您可以通过 3 个步骤完成：",
+    "biosStep1": "重启并进入 BIOS/UEFI 设置。",
+    "biosStep2": "启用虚拟化。",
+    "biosStep3": "保存并重启 Windows，然后点击重试。",
+    "biosOptionNames": "常见选项名称：",
+    "biosIntel": "Intel：Intel Virtualization Technology / VT-x",
+    "biosAmd": "AMD：SVM Mode / AMD-V",
+    "biosKeys": "常见 BIOS 快捷键：F2、Del、Esc、F10、F12（因品牌而异）。"
+  },
+  "skills": {
+    "hint": "技能是可重用的指令集，指导智能体完成特定任务 — 如创建文档、演示文稿或电子表格。",
+    "errorTitle": "错误",
+    "ok": "确定",
+    "removeTitle": "移除 \"{{name}}\"？",
+    "removeBuiltinBody": "此技能将移至示例。您可以稍后重新安装。",
+    "removeCustomBody": "此操作将永久删除该技能，且无法撤销。",
+    "examples": "示例",
+    "allExamplesInstalled": "所有示例技能均已安装在内置分类下。",
+    "builtIn": "内置",
+    "custom": "自定义",
+    "noCustomSkills": "未安装自定义技能。",
+    "uploading": "上传中...",
+    "dropzoneText": "拖放 .zip 或 .skill 文件到这里，或点击浏览",
+    "dropzoneHint": "需要 SKILL.md — 名称（小写、仅允许连字符）必须与目录名匹配",
+    "enableSkill": "启用技能",
+    "disableSkill": "禁用技能",
+    "installSkill": "安装技能",
+    "removeSkill": "移除技能",
+    "upload": "上传技能",
+    "install": "安装",
+    "installed": "已安装",
+    "example": "示例",
+    "public": "公开",
+    "private": "私有"
+  },
+  "agents": {
+    "hint": "定义专业子智能体，主智能体可以将任务委派给它们。",
+    "addAgent": "添加子智能体",
+    "name": "名称",
+    "namePlaceholder": "例如 code-reviewer",
+    "description": "描述",
+    "descriptionPlaceholder": "此智能体的功能（展示给主智能体）",
+    "systemPrompt": "系统提示词",
+    "systemPromptPlaceholder": "此智能体的自定义指令...",
+    "tools": "工具",
+    "toolsLabel": "工具（逗号或换行分隔）",
+    "toolsPlaceholder": "例如 Read, Grep, Glob（留空 = 所有工具）",
+    "model": "模型",
+    "untitledAgent": "未命名智能体",
+    "noDescription": "无描述",
+    "deleteAgentTitle": "删除 \"{{name}}\"？",
+    "deleteAgentBody": "此操作将永久删除该智能体，且无法撤销。"
+  }
+}
diff --git a/libs/hexagent_demo/frontend/src/locales/zh-CN/sidebar.json b/libs/hexagent_demo/frontend/src/locales/zh-CN/sidebar.json
new file mode 100644
index 00000000..2ff25844
--- /dev/null
+++ b/libs/hexagent_demo/frontend/src/locales/zh-CN/sidebar.json
@@ -0,0 +1,16 @@
+{
+  "brand": "ClawWork",
+  "openSidebar": "展开侧边栏",
+  "closeSidebar": "收起侧边栏",
+  "newChat": "新对话",
+  "newTask": "新任务",
+  "search": "搜索",
+  "settings": "设置",
+  "recents": "最近",
+  "noChats": "暂无对话",
+  "noTasks": "暂无任务",
+  "untitledConversation": "未命名对话",
+  "rename": "重命名",
+  "delete": "删除",
+  "user": "用户"
+}
diff --git a/libs/hexagent_demo/frontend/src/locales/zh-CN/welcome.json b/libs/hexagent_demo/frontend/src/locales/zh-CN/welcome.json
new file mode 100644
index 00000000..484e1df8
--- /dev/null
+++ b/libs/hexagent_demo/frontend/src/locales/zh-CN/welcome.json
@@ -0,0 +1,29 @@
+{
+  "heading": {
+    "chatWords": ["ClawWork，", "随时为你效劳。"],
+    "coworkWords": ["ClawWork，", "助你高效完成任务。"]
+  },
+  "placeholders": {
+    "chat": [
+      "想象一下，我来实现...",
+      "你有什么想法？",
+      "描述那些不可能的事...",
+      "从一个想法开始..."
+    ],
+    "cowork": [
+      "今天我能帮你什么？",
+      "描述你想完成的任务...",
+      "我们一起做点什么？"
+    ]
+  },
+  "attachFile": "添加附件",
+  "sendMessage": "发送消息",
+  "mountingDirectory": "正在挂载目录...",
+  "preparingRequest": "正在准备请求...",
+  "configureModel": "请先在设置中配置模型",
+  "mountingFolder": "正在挂载文件夹...",
+  "sandboxRequired": "需要设置沙盒",
+  "e2bKeyRequired": "需要 E2B API 密钥",
+  "vmSetupRequired": "需要设置虚拟机",
+  "setupInSettings": "前往设置"
+}
diff --git a/libs/hexagent_demo/frontend/src/main.tsx b/libs/hexagent_demo/frontend/src/main.tsx
index 3d7150da..88541a44 100644
--- a/libs/hexagent_demo/frontend/src/main.tsx
+++ b/libs/hexagent_demo/frontend/src/main.tsx
@@ -1,5 +1,6 @@
 import React from 'react'
 import ReactDOM from 'react-dom/client'
+import './i18n'
 import App from './App.tsx'
 import './index.css'