diff --git a/frontend/app/i18n/config.ts b/frontend/app/i18n/config.ts
new file mode 100644
index 000000000..70c371a6e
--- /dev/null
+++ b/frontend/app/i18n/config.ts
@@ -0,0 +1,74 @@
+// Copyright 2025, Command Line Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import { getApi } from "@/store/global";
+import i18n from "i18next";
+import { initReactI18next } from "react-i18next";
+import { resources } from "./resources";
+
+// 自定义语言检测器,从Wave settings读取
+const waveSettingsDetector = {
+ name: "waveSettings",
+ lookup() {
+ // 尝试从全局store获取settings中的language配置
+ try {
+ const globalStore = (window as any).globalStore;
+ const settingsAtom = (window as any).globalAtoms?.settingsAtom;
+ if (globalStore && settingsAtom) {
+ const settings = globalStore.get(settingsAtom);
+ return settings?.["app:language"] || null;
+ }
+ } catch (e) {
+ // Settings可能还未初始化
+ console.debug("Wave settings not yet initialized for i18n");
+ }
+ return null;
+ },
+};
+
+i18n.use({
+ type: "languageDetector",
+ init: () => {},
+ detect: () => {
+ // 优先级: Wave settings > localStorage > 系统语言
+ const settingsLang = waveSettingsDetector.lookup();
+ if (settingsLang) {
+ return settingsLang;
+ }
+ const storedLang = localStorage.getItem("wave-language");
+ if (storedLang) {
+ return storedLang;
+ }
+ return navigator.language || "en";
+ },
+ cacheUserLanguage: (lng: string) => {
+ localStorage.setItem("wave-language", lng);
+ },
+})
+ .use(initReactI18next)
+ .init({
+ resources,
+ fallbackLng: "en",
+ supportedLngs: ["en", "zh-CN"],
+ defaultNS: "common",
+ ns: [
+ "common",
+ "editor",
+ "terminal",
+ "ai",
+ "settings",
+ "modals",
+ "notifications",
+ "onboarding",
+ "errors",
+ "help",
+ ],
+ interpolation: {
+ escapeValue: false, // React already escapes
+ },
+ react: {
+ useSuspense: false, // 避免Electron环境下的Suspense问题
+ },
+ });
+
+export default i18n;
diff --git a/frontend/app/i18n/hooks.ts b/frontend/app/i18n/hooks.ts
new file mode 100644
index 000000000..5e7b51c47
--- /dev/null
+++ b/frontend/app/i18n/hooks.ts
@@ -0,0 +1,38 @@
+// Copyright 2025, Command Line Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import { atoms } from "@/store/global";
+import { useAtomValue } from "jotai";
+import { useEffect } from "react";
+import { useTranslation } from "react-i18next";
+
+/**
+ * Hook to sync i18n language with Wave settings
+ * Automatically updates language when app:language setting changes
+ */
+export function useLanguageSync() {
+ const { i18n } = useTranslation();
+ const settings = useAtomValue(atoms.settingsAtom);
+ const settingsLang = settings?.["app:language"];
+
+ useEffect(() => {
+ if (!settingsLang) {
+ return;
+ }
+
+ // Filter out i18next special/debug codes (cimode, dev, etc.)
+ const specialCodes = ["cimode", "dev"];
+ const rawSupportedLangs = i18n.options?.supportedLngs || ["en", "zh-CN"];
+ const supportedLangs = Array.isArray(rawSupportedLangs)
+ ? rawSupportedLangs.filter((lang) => !specialCodes.includes(lang))
+ : ["en", "zh-CN"];
+
+ const isSupported = supportedLangs.includes(settingsLang);
+
+ if (isSupported && settingsLang !== i18n.language) {
+ i18n.changeLanguage(settingsLang).catch((error) => {
+ console.error("Failed to change language:", error);
+ });
+ }
+ }, [settingsLang, i18n]);
+}
diff --git a/frontend/app/i18n/resources.ts b/frontend/app/i18n/resources.ts
new file mode 100644
index 000000000..f37c13ff3
--- /dev/null
+++ b/frontend/app/i18n/resources.ts
@@ -0,0 +1,53 @@
+// Copyright 2025, Command Line Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+// 英文翻译
+import aiEN from "@/locales/en/ai.json";
+import commonEN from "@/locales/en/common.json";
+import editorEN from "@/locales/en/editor.json";
+import errorsEN from "@/locales/en/errors.json";
+import helpEN from "@/locales/en/help.json";
+import modalsEN from "@/locales/en/modals.json";
+import notificationsEN from "@/locales/en/notifications.json";
+import onboardingEN from "@/locales/en/onboarding.json";
+import settingsEN from "@/locales/en/settings.json";
+import terminalEN from "@/locales/en/terminal.json";
+
+// 中文翻译
+import aiZH from "@/locales/zh-CN/ai.json";
+import commonZH from "@/locales/zh-CN/common.json";
+import editorZH from "@/locales/zh-CN/editor.json";
+import errorsZH from "@/locales/zh-CN/errors.json";
+import helpZH from "@/locales/zh-CN/help.json";
+import modalsZH from "@/locales/zh-CN/modals.json";
+import notificationsZH from "@/locales/zh-CN/notifications.json";
+import onboardingZH from "@/locales/zh-CN/onboarding.json";
+import settingsZH from "@/locales/zh-CN/settings.json";
+import terminalZH from "@/locales/zh-CN/terminal.json";
+
+export const resources = {
+ en: {
+ common: commonEN,
+ editor: editorEN,
+ terminal: terminalEN,
+ ai: aiEN,
+ settings: settingsEN,
+ modals: modalsEN,
+ notifications: notificationsEN,
+ onboarding: onboardingEN,
+ errors: errorsEN,
+ help: helpEN,
+ },
+ "zh-CN": {
+ common: commonZH,
+ editor: editorZH,
+ terminal: terminalZH,
+ ai: aiZH,
+ settings: settingsZH,
+ modals: modalsZH,
+ notifications: notificationsZH,
+ onboarding: onboardingZH,
+ errors: errorsZH,
+ help: helpZH,
+ },
+} as const;
diff --git a/frontend/app/i18n/types.ts b/frontend/app/i18n/types.ts
new file mode 100644
index 000000000..45c1a2532
--- /dev/null
+++ b/frontend/app/i18n/types.ts
@@ -0,0 +1,12 @@
+// Copyright 2025, Command Line Inc.
+// SPDX-License-Identifier: Apache-2.0
+
+import "react-i18next";
+import { resources } from "./resources";
+
+declare module "react-i18next" {
+ interface CustomTypeOptions {
+ defaultNS: "common";
+ resources: (typeof resources)["en"];
+ }
+}
diff --git a/frontend/app/modals/about.tsx b/frontend/app/modals/about.tsx
index b448e4bbe..92a8b11dd 100644
--- a/frontend/app/modals/about.tsx
+++ b/frontend/app/modals/about.tsx
@@ -7,11 +7,13 @@ import { Modal } from "./modal";
import { isDev } from "@/util/isdev";
import { useState } from "react";
+import { useTranslation } from "react-i18next";
import { getApi } from "../store/global";
interface AboutModalProps {}
const AboutModal = ({}: AboutModalProps) => {
+ const { t } = useTranslation("common");
const currentDate = new Date();
const [details] = useState(() => getApi().getAboutModalDetails());
const [updaterChannel] = useState(() => getApi().getUpdaterChannel());
@@ -21,18 +23,20 @@ const AboutModal = ({}: AboutModalProps) => {
-
Wave Terminal
+
{t("app.name")}
- Open-Source AI-Native Terminal
+ {t("app.tagline")}
- Built for Seamless Workflows
+ {t("app.description")}
- Client Version {details.version} ({isDev() ? "dev-" : ""}
- {details.buildTime})
+ {t("common.clientVersion", {
+ version: details.version,
+ buildTime: `${isDev() ? "dev-" : ""}${details.buildTime}`,
+ })}
- Update Channel: {updaterChannel}
+ {t("common.updateChannel", { channel: updaterChannel })}
- © {currentDate.getFullYear()} Command Line Inc.
+ {t("common.copyright", { year: currentDate.getFullYear() })}
diff --git a/frontend/app/modals/modal.tsx b/frontend/app/modals/modal.tsx
index 5733ec260..734fbcf9a 100644
--- a/frontend/app/modals/modal.tsx
+++ b/frontend/app/modals/modal.tsx
@@ -5,6 +5,7 @@ import { Button } from "@/app/element/button";
import { cn } from "@/util/util";
import clsx from "clsx";
import { forwardRef } from "react";
+import { useTranslation } from "react-i18next";
import ReactDOM from "react-dom";
import "./modal.scss";
@@ -38,6 +39,7 @@ const Modal = forwardRef
(
}: ModalProps,
ref
) => {
+ const { t } = useTranslation("common");
const renderBackdrop = (onClick) => ;
const renderFooter = () => {
@@ -48,7 +50,7 @@ const Modal = forwardRef(
{renderBackdrop(onClickBackdrop)}
-
-
Join our Community
+
{t("welcome.joinCommunity")}
@@ -118,7 +111,7 @@ const InitPage = ({ isCompact }: { isCompact: boolean }) => {