From 503c8a93adb990b35ef7bbbdd6c558fe23879d9e Mon Sep 17 00:00:00 2001
From: huahai0202 <2023217276@mail.hfut.edu.cn>
Date: Thu, 26 Feb 2026 13:24:07 +0800
Subject: [PATCH 1/4] feat(settings): add i18n support and translate settings
 UI to zh-CN

---
 .gitignore                                    |   1 +
 src-tauri/src/types.rs                        |   8 +
 src/App.tsx                                   |  17 +-
 .../settings/components/SettingsNav.tsx       |  28 +-
 .../settings/components/SettingsView.test.tsx |   1 +
 .../settings/components/SettingsView.tsx      |  12 +-
 .../sections/SettingsAboutSection.tsx         |  46 +-
 .../sections/SettingsAgentsSection.tsx        | 257 ++++----
 .../sections/SettingsCodexSection.tsx         | 208 ++++---
 .../sections/SettingsComposerSection.tsx      | 276 +++++---
 .../sections/SettingsDictationSection.tsx     | 111 ++--
 .../sections/SettingsDisplaySection.test.tsx  |  50 ++
 .../sections/SettingsDisplaySection.tsx       | 332 ++++++----
 .../sections/SettingsEnvironmentsSection.tsx  |  40 +-
 .../sections/SettingsFeaturesSection.tsx      | 240 ++++---
 .../sections/SettingsGitSection.tsx           |  84 +--
 .../sections/SettingsOpenAppsSection.tsx      |  64 +-
 .../sections/SettingsProjectsSection.tsx      |  57 +-
 .../sections/SettingsServerSection.tsx        | 222 ++++---
 .../sections/SettingsShortcutsSection.tsx     |  93 +--
 .../components/settingsViewConstants.ts       |  26 +-
 src/features/settings/hooks/useAppSettings.ts |   5 +
 src/i18n/index.test.ts                        |  33 +
 src/i18n/index.ts                             |  44 ++
 src/i18n/locales/en.ts                        | 589 ++++++++++++++++++
 src/i18n/locales/zh-CN.ts                     | 521 ++++++++++++++++
 src/i18n/provider.tsx                         |  53 ++
 src/i18n/types.ts                             |   9 +
 src/i18n/useI18n.ts                           |   6 +
 src/types.ts                                  |   2 +
 30 files changed, 2571 insertions(+), 864 deletions(-)
 create mode 100644 src/i18n/index.test.ts
 create mode 100644 src/i18n/index.ts
 create mode 100644 src/i18n/locales/en.ts
 create mode 100644 src/i18n/locales/zh-CN.ts
 create mode 100644 src/i18n/provider.tsx
 create mode 100644 src/i18n/types.ts
 create mode 100644 src/i18n/useI18n.ts

diff --git a/.gitignore b/.gitignore
index 05b62d7c2..e9eef9f36 100644
--- a/.gitignore
+++ b/.gitignore
@@ -37,3 +37,4 @@ public/assets/material-icons/
 # Nix
 result
 skills-lock.json
+.vs/
diff --git a/src-tauri/src/types.rs b/src-tauri/src/types.rs
index cbb8afbaa..87b05408f 100644
--- a/src-tauri/src/types.rs
+++ b/src-tauri/src/types.rs
@@ -487,6 +487,8 @@ pub(crate) struct AppSettings {
     pub(crate) ui_scale: f64,
     #[serde(default = "default_theme", rename = "theme")]
     pub(crate) theme: String,
+    #[serde(default = "default_ui_language", rename = "uiLanguage")]
+    pub(crate) ui_language: String,
     #[serde(
         default = "default_usage_show_remaining",
         rename = "usageShowRemaining"
@@ -698,6 +700,10 @@ fn default_theme() -> String {
     "system".to_string()
 }
 
+fn default_ui_language() -> String {
+    "system".to_string()
+}
+
 fn default_usage_show_remaining() -> bool {
     false
 }
@@ -1142,6 +1148,7 @@ impl Default for AppSettings {
             last_composer_reasoning_effort: None,
             ui_scale: 1.0,
             theme: default_theme(),
+            ui_language: default_ui_language(),
             usage_show_remaining: default_usage_show_remaining(),
             show_message_file_path: default_show_message_file_path(),
             chat_history_scrollback_items: default_chat_history_scrollback_items(),
@@ -1306,6 +1313,7 @@ mod tests {
         assert!(settings.last_composer_reasoning_effort.is_none());
         assert!((settings.ui_scale - 1.0).abs() < f64::EPSILON);
         assert_eq!(settings.theme, "system");
+        assert_eq!(settings.ui_language, "system");
         assert!(!settings.usage_show_remaining);
         assert!(settings.show_message_file_path);
         assert_eq!(settings.chat_history_scrollback_items, Some(200));
diff --git a/src/App.tsx b/src/App.tsx
index 1a0694b5d..ec63e86af 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -157,6 +157,7 @@ import {
   resolveWorkspaceRuntimeCodexArgsOverride,
 } from "@threads/utils/threadCodexParamsSeed";
 import { setWorkspaceRuntimeCodexArgs } from "@services/tauri";
+import { I18nProvider } from "@/i18n/provider";
 
 const AboutView = lazy(() =>
   import("@/features/about/components/AboutView").then((module) => ({
@@ -2630,7 +2631,12 @@ function MainApp() {
   );
 
   return (
-    <div className={`${appClassName}${isResizing ? " is-resizing" : ""}`} style={appStyle} ref={appRef}>
+    <I18nProvider languagePreference={appSettings.uiLanguage}>
+      <div
+        className={`${appClassName}${isResizing ? " is-resizing" : ""}`}
+        style={appStyle}
+        ref={appRef}
+      >
       <div className="drag-strip" id="titlebar" />
       <TitlebarExpandControls {...sidebarToggleProps} />
       <WindowCaptionControls />
@@ -2776,10 +2782,11 @@ function MainApp() {
           onRemoveDictationModel: dictationModel.remove,
         }}
       />
-      {showMobileSetupWizard && (
-        <MobileServerSetupWizard {...mobileSetupWizardProps} />
-      )}
-    </div>
+        {showMobileSetupWizard && (
+          <MobileServerSetupWizard {...mobileSetupWizardProps} />
+        )}
+      </div>
+    </I18nProvider>
   );
 }
 
diff --git a/src/features/settings/components/SettingsNav.tsx b/src/features/settings/components/SettingsNav.tsx
index 9e51920b0..0c636d327 100644
--- a/src/features/settings/components/SettingsNav.tsx
+++ b/src/features/settings/components/SettingsNav.tsx
@@ -12,6 +12,7 @@ import ServerCog from "lucide-react/dist/esm/icons/server-cog";
 import Bot from "lucide-react/dist/esm/icons/bot";
 import Info from "lucide-react/dist/esm/icons/info";
 import { PanelNavItem, PanelNavList } from "@/features/design-system/components/panel/PanelPrimitives";
+import { useI18n } from "@/i18n/useI18n";
 import type { CodexSection } from "./settingsTypes";
 
 type SettingsNavProps = {
@@ -25,6 +26,7 @@ export function SettingsNav({
   onSelectSection,
   showDisclosure = false,
 }: SettingsNavProps) {
+  const { t } = useI18n();
   return (
     <aside className="settings-sidebar">
       <PanelNavList className="settings-nav-list">
@@ -35,7 +37,7 @@ export function SettingsNav({
           showDisclosure={showDisclosure}
           onClick={() => onSelectSection("projects")}
         >
-          Projects
+          {t("settings.nav.projects")}
         </PanelNavItem>
         <PanelNavItem
           className="settings-nav"
@@ -44,7 +46,7 @@ export function SettingsNav({
           showDisclosure={showDisclosure}
           onClick={() => onSelectSection("environments")}
         >
-          Environments
+          {t("settings.nav.environments")}
         </PanelNavItem>
         <PanelNavItem
           className="settings-nav"
@@ -53,7 +55,7 @@ export function SettingsNav({
           showDisclosure={showDisclosure}
           onClick={() => onSelectSection("display")}
         >
-          Display &amp; Sound
+          {t("settings.nav.display")}
         </PanelNavItem>
         <PanelNavItem
           className="settings-nav"
@@ -62,7 +64,7 @@ export function SettingsNav({
           showDisclosure={showDisclosure}
           onClick={() => onSelectSection("composer")}
         >
-          Composer
+          {t("settings.nav.composer")}
         </PanelNavItem>
         <PanelNavItem
           className="settings-nav"
@@ -71,7 +73,7 @@ export function SettingsNav({
           showDisclosure={showDisclosure}
           onClick={() => onSelectSection("dictation")}
         >
-          Dictation
+          {t("settings.nav.dictation")}
         </PanelNavItem>
         <PanelNavItem
           className="settings-nav"
@@ -80,7 +82,7 @@ export function SettingsNav({
           showDisclosure={showDisclosure}
           onClick={() => onSelectSection("shortcuts")}
         >
-          Shortcuts
+          {t("settings.nav.shortcuts")}
         </PanelNavItem>
         <PanelNavItem
           className="settings-nav"
@@ -89,7 +91,7 @@ export function SettingsNav({
           showDisclosure={showDisclosure}
           onClick={() => onSelectSection("open-apps")}
         >
-          Open in
+          {t("settings.nav.openApps")}
         </PanelNavItem>
         <PanelNavItem
           className="settings-nav"
@@ -98,7 +100,7 @@ export function SettingsNav({
           showDisclosure={showDisclosure}
           onClick={() => onSelectSection("git")}
         >
-          Git
+          {t("settings.nav.git")}
         </PanelNavItem>
         <PanelNavItem
           className="settings-nav"
@@ -107,7 +109,7 @@ export function SettingsNav({
           showDisclosure={showDisclosure}
           onClick={() => onSelectSection("server")}
         >
-          Server
+          {t("settings.nav.server")}
         </PanelNavItem>
         <PanelNavItem
           className="settings-nav"
@@ -116,7 +118,7 @@ export function SettingsNav({
           showDisclosure={showDisclosure}
           onClick={() => onSelectSection("agents")}
         >
-          Agents
+          {t("settings.nav.agents")}
         </PanelNavItem>
         <PanelNavItem
           className="settings-nav"
@@ -125,7 +127,7 @@ export function SettingsNav({
           showDisclosure={showDisclosure}
           onClick={() => onSelectSection("codex")}
         >
-          Codex
+          {t("settings.nav.codex")}
         </PanelNavItem>
         <PanelNavItem
           className="settings-nav"
@@ -134,7 +136,7 @@ export function SettingsNav({
           showDisclosure={showDisclosure}
           onClick={() => onSelectSection("features")}
         >
-          Features
+          {t("settings.nav.features")}
         </PanelNavItem>
         <PanelNavItem
           className="settings-nav"
@@ -143,7 +145,7 @@ export function SettingsNav({
           showDisclosure={showDisclosure}
           onClick={() => onSelectSection("about")}
         >
-          About
+          {t("settings.nav.about")}
         </PanelNavItem>
       </PanelNavList>
     </aside>
diff --git a/src/features/settings/components/SettingsView.test.tsx b/src/features/settings/components/SettingsView.test.tsx
index e8d5a7e03..ace7a5f31 100644
--- a/src/features/settings/components/SettingsView.test.tsx
+++ b/src/features/settings/components/SettingsView.test.tsx
@@ -101,6 +101,7 @@ const baseSettings: AppSettings = {
   lastComposerReasoningEffort: null,
   uiScale: 1,
   theme: "system",
+  uiLanguage: "system",
   usageShowRemaining: false,
   showMessageFilePath: true,
   chatHistoryScrollbackItems: 200,
diff --git a/src/features/settings/components/SettingsView.tsx b/src/features/settings/components/SettingsView.tsx
index 62327c2a8..74fe08741 100644
--- a/src/features/settings/components/SettingsView.tsx
+++ b/src/features/settings/components/SettingsView.tsx
@@ -13,6 +13,7 @@ import { useSettingsViewCloseShortcuts } from "@settings/hooks/useSettingsViewCl
 import { useSettingsViewNavigation } from "@settings/hooks/useSettingsViewNavigation";
 import { useSettingsViewOrchestration } from "@settings/hooks/useSettingsViewOrchestration";
 import { ModalShell } from "@/features/design-system/components/modal/ModalShell";
+import { useI18n } from "@/i18n/useI18n";
 import { SettingsNav } from "./SettingsNav";
 import type { CodexSection } from "./settingsTypes";
 import { SETTINGS_SECTION_LABELS } from "./settingsViewConstants";
@@ -97,6 +98,7 @@ export function SettingsView({
   onRemoveDictationModel,
   initialSection,
 }: SettingsViewProps) {
+  const { t } = useI18n();
   const {
     activeSection,
     showMobileDetail,
@@ -137,7 +139,7 @@ export function SettingsView({
 
   useSettingsViewCloseShortcuts(onClose);
 
-  const activeSectionLabel = SETTINGS_SECTION_LABELS[activeSection];
+  const activeSectionLabel = t(`settings.nav.${SETTINGS_SECTION_LABELS[activeSection]}`);
   const settingsBodyClassName = `settings-body${
     useMobileMasterDetail ? " settings-body-mobile-master-detail" : ""
   }${useMobileMasterDetail && showMobileDetail ? " is-detail-visible" : ""}`;
@@ -151,13 +153,13 @@ export function SettingsView({
     >
       <div className="settings-titlebar">
         <div className="settings-title" id="settings-modal-title">
-          Settings
+          {t("settings.shell.title")}
         </div>
         <button
           type="button"
           className="ghost icon-button settings-close"
           onClick={onClose}
-          aria-label="Close settings"
+          aria-label={t("settings.shell.close")}
         >
           <X aria-hidden />
         </button>
@@ -180,10 +182,10 @@ export function SettingsView({
                   type="button"
                   className="settings-mobile-back"
                   onClick={() => setShowMobileDetail(false)}
-                  aria-label="Back to settings sections"
+                  aria-label={t("settings.shell.mobile.back")}
                 >
                   <ChevronLeft aria-hidden />
-                  Sections
+                  {t("settings.shell.mobile.sections")}
                 </button>
                 <div className="settings-mobile-detail-title">{activeSectionLabel}</div>
               </div>
diff --git a/src/features/settings/components/sections/SettingsAboutSection.tsx b/src/features/settings/components/sections/SettingsAboutSection.tsx
index f78e35d35..ebb7234a9 100644
--- a/src/features/settings/components/sections/SettingsAboutSection.tsx
+++ b/src/features/settings/components/sections/SettingsAboutSection.tsx
@@ -5,7 +5,7 @@ import {
   type AppBuildType,
 } from "@services/tauri";
 import { useUpdater } from "@/features/update/hooks/useUpdater";
-import { SettingsSection } from "@/features/design-system/components/settings/SettingsPrimitives";
+import { useI18n } from "@/i18n/useI18n";
 
 function formatBytes(value: number) {
   if (!Number.isFinite(value) || value <= 0) {
@@ -22,6 +22,7 @@ function formatBytes(value: number) {
 }
 
 export function SettingsAboutSection() {
+  const { t } = useI18n();
   const [appBuildType, setAppBuildType] = useState<AppBuildType | "unknown">("unknown");
   const [updaterEnabled, setUpdaterEnabled] = useState(false);
   const { state: updaterState, checkForUpdates, startUpdate } = useUpdater({
@@ -72,42 +73,42 @@ export function SettingsAboutSection() {
   const buildDateValue = __APP_BUILD_DATE__.trim();
   const parsedBuildDate = Date.parse(buildDateValue);
   const buildDateLabel = Number.isNaN(parsedBuildDate)
-    ? buildDateValue || "unknown"
+    ? buildDateValue || t("settings.about.unknown")
     : new Date(parsedBuildDate).toLocaleString();
 
   return (
-    <SettingsSection title="About" subtitle="App version, build metadata, and update controls.">
+    <section className="settings-section">
       <div className="settings-field">
         <div className="settings-help">
-          Version: <code>{__APP_VERSION__}</code>
+          {t("settings.about.version")}: <code>{__APP_VERSION__}</code>
         </div>
         <div className="settings-help">
-          Build type: <code>{appBuildType}</code>
+          {t("settings.about.buildType")}: <code>{appBuildType}</code>
         </div>
         <div className="settings-help">
-          Branch: <code>{__APP_GIT_BRANCH__ || "unknown"}</code>
+          {t("settings.about.branch")}: <code>{__APP_GIT_BRANCH__ || t("settings.about.unknown")}</code>
         </div>
         <div className="settings-help">
-          Commit: <code>{__APP_COMMIT_HASH__ || "unknown"}</code>
+          {t("settings.about.commit")}: <code>{__APP_COMMIT_HASH__ || t("settings.about.unknown")}</code>
         </div>
         <div className="settings-help">
-          Build date: <code>{buildDateLabel}</code>
+          {t("settings.about.buildDate")}: <code>{buildDateLabel}</code>
         </div>
       </div>
       <div className="settings-field">
-        <div className="settings-label">App Updates</div>
+        <div className="settings-label">{t("settings.about.updates.title")}</div>
         <div className="settings-help">
-          Currently running version <code>{__APP_VERSION__}</code>
+          {t("settings.about.updates.currentVersion")} <code>{__APP_VERSION__}</code>
         </div>
         {!updaterEnabled && (
           <div className="settings-help">
-            Updates are unavailable in this runtime.
+            {t("settings.about.updates.unavailable")}
           </div>
         )}
 
         {updaterState.stage === "error" && (
           <div className="settings-help ds-text-danger">
-            Update failed: {updaterState.error}
+            {t("settings.about.updates.error")}: {updaterState.error}
           </div>
         )}
 
@@ -117,23 +118,26 @@ export function SettingsAboutSection() {
           <div className="settings-help">
             {updaterState.stage === "downloading" ? (
               <>
-                Downloading update...{" "}
+                {t("settings.about.updates.downloading")}{" "}
                 {updaterState.progress?.totalBytes
                   ? `${Math.round((updaterState.progress.downloadedBytes / updaterState.progress.totalBytes) * 100)}%`
                   : formatBytes(updaterState.progress?.downloadedBytes ?? 0)}
               </>
             ) : updaterState.stage === "installing" ? (
-              "Installing update..."
+              t("settings.about.updates.installing")
             ) : (
-              "Restarting..."
+              t("settings.about.updates.restarting")
             )}
           </div>
         ) : updaterState.stage === "available" ? (
           <div className="settings-help">
-            Version <code>{updaterState.version}</code> is available.
+            {t("settings.about.updates.available.prefix")} <code>{updaterState.version}</code>{" "}
+            {t("settings.about.updates.available.suffix")}
           </div>
         ) : updaterState.stage === "latest" ? (
-          <div className="settings-help">You are on the latest version.</div>
+          <div className="settings-help">
+            {t("settings.about.updates.latest")}
+          </div>
         ) : null}
 
         <div className="settings-controls">
@@ -144,7 +148,7 @@ export function SettingsAboutSection() {
               disabled={!updaterEnabled}
               onClick={() => void startUpdate()}
             >
-              Download & Install
+              {t("settings.about.updates.downloadInstall")}
             </button>
           ) : (
             <button
@@ -159,11 +163,13 @@ export function SettingsAboutSection() {
               }
               onClick={() => void checkForUpdates({ announceNoUpdate: true })}
             >
-              {updaterState.stage === "checking" ? "Checking..." : "Check for updates"}
+              {updaterState.stage === "checking"
+                ? t("settings.about.updates.checking")
+                : t("settings.about.updates.check")}
             </button>
           )}
         </div>
       </div>
-    </SettingsSection>
+    </section>
   );
 }
diff --git a/src/features/settings/components/sections/SettingsAgentsSection.tsx b/src/features/settings/components/sections/SettingsAgentsSection.tsx
index 85b588cb2..413e216cc 100644
--- a/src/features/settings/components/sections/SettingsAgentsSection.tsx
+++ b/src/features/settings/components/sections/SettingsAgentsSection.tsx
@@ -7,12 +7,7 @@ import {
 } from "@/features/shared/components/MagicSparkleIcon";
 import type { SettingsAgentsSectionProps } from "@settings/hooks/useSettingsAgentsSection";
 import { fileManagerName, openInFileManagerLabel } from "@utils/platformPaths";
-import {
-  SettingsSection,
-  SettingsSubsection,
-  SettingsToggleRow,
-  SettingsToggleSwitch,
-} from "@/features/design-system/components/settings/SettingsPrimitives";
+import { useI18n } from "@/i18n/useI18n";
 
 const FALLBACK_AGENT_MODELS: ModelOption[] = [
   {
@@ -62,6 +57,8 @@ export function SettingsAgentsSection({
   modelOptionsLoading,
   modelOptionsError,
 }: SettingsAgentsSectionProps) {
+  const { locale, t } = useI18n();
+  const zh = locale === "zh-CN";
   const [openPathError, setOpenPathError] = useState<string | null>(null);
   const [maxThreadsDraft, setMaxThreadsDraft] = useState("6");
   const [maxDepthDraft, setMaxDepthDraft] = useState("1");
@@ -162,7 +159,7 @@ export function SettingsAgentsSection({
       await revealItemInDir(path);
     } catch (openError) {
       setOpenPathError(
-        openError instanceof Error ? openError.message : "Unable to open path.",
+        openError instanceof Error ? openError.message : t("settings.agents.openPathError"),
       );
     }
   };
@@ -181,7 +178,9 @@ export function SettingsAgentsSection({
       setCreateError(null);
       setEditError(null);
       setOpenPathError(
-        `Max threads must be an integer between ${MIN_MAX_THREADS} and ${MAX_MAX_THREADS}.`,
+        zh
+          ? `最大线程数必须是 ${MIN_MAX_THREADS} 到 ${MAX_MAX_THREADS} 之间的整数。`
+          : `Max threads must be an integer between ${MIN_MAX_THREADS} and ${MAX_MAX_THREADS}.`,
       );
       return;
     }
@@ -216,7 +215,9 @@ export function SettingsAgentsSection({
       setCreateError(null);
       setEditError(null);
       setOpenPathError(
-        `Max depth must be an integer between ${MIN_MAX_DEPTH} and ${MAX_MAX_DEPTH}.`,
+        zh
+          ? `最大深度必须是 ${MIN_MAX_DEPTH} 到 ${MAX_MAX_DEPTH} 之间的整数。`
+          : `Max depth must be an integer between ${MIN_MAX_DEPTH} and ${MAX_MAX_DEPTH}.`,
       );
       return;
     }
@@ -247,7 +248,7 @@ export function SettingsAgentsSection({
   const handleCreateAgent = async () => {
     const name = createName.trim();
     if (!name) {
-      setCreateError("Agent name is required.");
+      setCreateError(t("settings.agents.nameRequired"));
       return;
     }
     setCreateError(null);
@@ -282,7 +283,7 @@ export function SettingsAgentsSection({
     }
     const nextName = editNameDraft.trim();
     if (!nextName) {
-      setEditError("Agent name is required.");
+      setEditError(t("settings.agents.nameRequired"));
       return;
     }
     const editingAgent = settings?.agents.find((agent) => agent.name === editingName) ?? null;
@@ -350,22 +351,29 @@ export function SettingsAgentsSection({
   };
 
   return (
-    <SettingsSection
-      title="Agents"
-      subtitle="Configure multi-agent mode, limits, and custom agent roles."
-    >
+    <section className="settings-section">
+      <div className="settings-section-title">{t("settings.agents.sectionTitle")}</div>
+      <div className="settings-section-subtitle">{t("settings.agents.sectionSubtitle")}</div>
       <div className="settings-help settings-agents-builtins-help">
-        Built-in roles from Codex are still available: <code>default</code>, <code>explorer</code>,
-        and <code>worker</code>.
+        {t("settings.agents.builtins.before")}
+        <code>default</code>
+        {t("settings.agents.builtins.middle1")}
+        <code>explorer</code>
+        {t("settings.agents.builtins.middle2")}
+        <code>worker</code>
+        {t("settings.agents.builtins.after")}
       </div>
 
-      <SettingsToggleRow
-        title="Config file"
-        subtitle={<>Open global Codex config in {fileManagerName()}.</>}
-      >
+      <div className="settings-toggle-row">
+        <div>
+          <div className="settings-toggle-title">{t("settings.agents.configFile.title")}</div>
+          <div className="settings-toggle-subtitle">
+            {t("settings.agents.configFile.subtitle", { fileManager: fileManagerName() })}
+          </div>
+        </div>
         <div className="settings-agents-actions">
           <button type="button" className="ghost" onClick={onRefresh} disabled={isLoading}>
-            Refresh
+            {t("settings.agents.refresh")}
           </button>
           <button
             type="button"
@@ -376,32 +384,40 @@ export function SettingsAgentsSection({
             {openInFileManagerLabel()}
           </button>
         </div>
-      </SettingsToggleRow>
+      </div>
 
-      <SettingsToggleRow
-        title="Enable Multi-Agent"
-        subtitle={
-          <>
+      <div className="settings-toggle-row">
+        <div>
+          <div className="settings-toggle-title">{t("settings.agents.multiAgent.title")}</div>
+          <div className="settings-toggle-subtitle">
             Writes <code>features.multi_agent</code> in config.toml.
-          </>
-        }
-      >
-        <SettingsToggleSwitch
-          pressed={settings?.multiAgentEnabled ?? false}
+          </div>
+        </div>
+        <button
+          type="button"
+          className={`settings-toggle ${settings?.multiAgentEnabled ? "on" : ""}`}
           onClick={() => void handleToggleMultiAgent()}
+          aria-pressed={settings?.multiAgentEnabled ?? false}
           disabled={!settings || isUpdatingCore}
-        />
-      </SettingsToggleRow>
-
-      <SettingsToggleRow
-        title="Max Threads"
-        subtitle={
-          <>
-            Maximum open agent threads. Valid range: <code>1-12</code>. Changes save immediately.
-          </>
-        }
-      >
-        <div className="settings-agents-stepper" role="group" aria-label="Maximum agent threads">
+        >
+          <span className="settings-toggle-knob" />
+        </button>
+      </div>
+
+      <div className="settings-toggle-row">
+        <div>
+          <div className="settings-toggle-title">{t("settings.agents.maxThreads.title")}</div>
+          <div className="settings-toggle-subtitle">
+            {t("settings.agents.maxThreads.subtitle.before")}
+            <code>1-12</code>
+            {t("settings.agents.maxThreads.subtitle.after")}
+          </div>
+        </div>
+        <div
+          className="settings-agents-stepper"
+          role="group"
+          aria-label={t("settings.agents.maxThreads.groupAria")}
+        >
           <button
             type="button"
             className="ghost settings-agents-stepper-button"
@@ -409,7 +425,7 @@ export function SettingsAgentsSection({
               void handleMaxThreadsStep(-1);
             }}
             disabled={!settings || isUpdatingCore || currentMaxThreads <= MIN_MAX_THREADS}
-            aria-label="Decrease max threads"
+            aria-label={t("settings.agents.maxThreads.decreaseAria")}
           >
             ▼
           </button>
@@ -423,22 +439,27 @@ export function SettingsAgentsSection({
               void handleMaxThreadsStep(1);
             }}
             disabled={!settings || isUpdatingCore || currentMaxThreads >= MAX_MAX_THREADS}
-            aria-label="Increase max threads"
+            aria-label={t("settings.agents.maxThreads.increaseAria")}
           >
             ▲
           </button>
         </div>
-      </SettingsToggleRow>
-
-      <SettingsToggleRow
-        title="Max Depth"
-        subtitle={
-          <>
-            Maximum nested spawn depth. Valid range: <code>1-4</code>. Changes save immediately.
-          </>
-        }
-      >
-        <div className="settings-agents-stepper" role="group" aria-label="Maximum agent depth">
+      </div>
+
+      <div className="settings-toggle-row">
+        <div>
+          <div className="settings-toggle-title">{t("settings.agents.maxDepth.title")}</div>
+          <div className="settings-toggle-subtitle">
+            {t("settings.agents.maxDepth.subtitle.before")}
+            <code>1-4</code>
+            {t("settings.agents.maxDepth.subtitle.after")}
+          </div>
+        </div>
+        <div
+          className="settings-agents-stepper"
+          role="group"
+          aria-label={t("settings.agents.maxDepth.groupAria")}
+        >
           <button
             type="button"
             className="ghost settings-agents-stepper-button"
@@ -446,7 +467,7 @@ export function SettingsAgentsSection({
               void handleMaxDepthStep(-1);
             }}
             disabled={!settings || isUpdatingCore || currentMaxDepth <= MIN_MAX_DEPTH}
-            aria-label="Decrease max depth"
+            aria-label={t("settings.agents.maxDepth.decreaseAria")}
           >
             ▼
           </button>
@@ -460,25 +481,23 @@ export function SettingsAgentsSection({
               void handleMaxDepthStep(1);
             }}
             disabled={!settings || isUpdatingCore || currentMaxDepth >= MAX_MAX_DEPTH}
-            aria-label="Increase max depth"
+            aria-label={t("settings.agents.maxDepth.increaseAria")}
           >
             ▲
           </button>
         </div>
-      </SettingsToggleRow>
-
-      <SettingsSubsection
-        title="Create Agent"
-        subtitle={
-          <>
-            Add a custom role under <code>[agents.&lt;name&gt;]</code> and create its config file.
-          </>
-        }
-      />
+      </div>
+
+      <div className="settings-subsection-title">{t("settings.agents.create.title")}</div>
+      <div className="settings-subsection-subtitle">
+        {t("settings.agents.create.subtitle.before")}
+        <code>[agents.&lt;name&gt;]</code>
+        {t("settings.agents.create.subtitle.after")}
+      </div>
       <div className="settings-field settings-agents-form">
         <div className="settings-agents-description-row">
           <label className="settings-label" htmlFor="settings-agent-create-name">
-            Name
+            {t("settings.agents.field.name")}
           </label>
           <button
             type="button"
@@ -504,8 +523,8 @@ export function SettingsAgentsSection({
               })();
             }}
             disabled={creatingAgent || createDescriptionGenerating || !canGenerateCreateFromName}
-            title="Generate description and developer instructions with AI"
-            aria-label="Generate fields for new agent"
+            title={t("settings.agents.generate.title")}
+            aria-label={t("settings.agents.generate.createAria")}
           >
             {createDescriptionGenerating ? (
               <MagicSparkleLoaderIcon className="settings-agents-generate-loader" />
@@ -519,30 +538,30 @@ export function SettingsAgentsSection({
           className="settings-input"
           value={createName}
           onChange={(event) => setCreateName(event.target.value)}
-          placeholder="researcher"
+          placeholder={t("settings.agents.create.namePlaceholder")}
           disabled={creatingAgent}
         />
         <label className="settings-label" htmlFor="settings-agent-create-description">
-          Description
+          {t("settings.agents.field.description")}
         </label>
         <textarea
           id="settings-agent-create-description"
           className="settings-agents-textarea settings-agents-textarea--compact"
           value={createDescription}
           onChange={(event) => setCreateDescription(event.target.value)}
-          placeholder="Short role summary."
+          placeholder={t("settings.agents.create.descriptionPlaceholder")}
           rows={2}
           disabled={creatingAgent}
         />
         <label className="settings-label" htmlFor="settings-agent-create-developer-instructions">
-          Developer instructions
+          {t("settings.agents.field.developerInstructions")}
         </label>
         <textarea
           id="settings-agent-create-developer-instructions"
           className="settings-agents-textarea"
           value={createDeveloperInstructions}
           onChange={(event) => setCreateDeveloperInstructions(event.target.value)}
-          placeholder="Multiline per-agent developer instructions."
+          placeholder={t("settings.agents.create.developerInstructionsPlaceholder")}
           disabled={creatingAgent}
         />
         <div className="settings-agents-model-row">
@@ -554,7 +573,7 @@ export function SettingsAgentsSection({
               value={createModel}
               onChange={(event) => setCreateModel(event.target.value)}
               disabled={creatingAgent}
-              aria-label="Agent model"
+              aria-label={t("settings.agents.create.modelAria")}
             >
               {effectiveModelOptions.map((option) => (
                 <option key={option.model} value={option.model}>
@@ -567,16 +586,20 @@ export function SettingsAgentsSection({
             |
           </span>
           <div className="settings-agents-model-field settings-agents-model-field--effort">
-            <span className="settings-agents-inline-label">reasoning:</span>
+            <span className="settings-agents-inline-label">
+              {t("settings.agents.create.reasoningLabel")}
+            </span>
             <select
               id="settings-agent-create-effort"
               className="settings-select settings-select--compact"
               value={createReasoningEffort}
               onChange={(event) => setCreateReasoningEffort(event.target.value)}
               disabled={creatingAgent || createReasoningOptions.length === 0}
-              aria-label="Agent reasoning effort"
+              aria-label={t("settings.agents.create.reasoningAria")}
             >
-              {createReasoningOptions.length === 0 && <option value="">not supported</option>}
+              {createReasoningOptions.length === 0 && (
+                <option value="">{t("settings.agents.create.notSupported")}</option>
+              )}
               {createReasoningOptions.map((effort) => (
                 <option key={effort} value={effort}>
                   {effort}
@@ -587,27 +610,31 @@ export function SettingsAgentsSection({
         </div>
         <div className="settings-agents-actions">
           <button type="button" className="ghost" onClick={() => void handleCreateAgent()}>
-            {creatingAgent ? "Creating..." : "Create Agent"}
+            {creatingAgent ? t("settings.agents.create.creating") : t("settings.agents.create.create")}
           </button>
         </div>
         {modelOptions.length === 0 && (
           <div className="settings-help">
             {modelOptionsLoading
-              ? "Loading workspace model metadata. Using fallback model defaults for now."
-              : "Using fallback model defaults until workspace model metadata is available."}
+              ? zh
+                ? "正在加载工作区模型元数据，当前先使用回退模型默认值。"
+                : "Loading workspace model metadata. Using fallback model defaults for now."
+              : zh
+                ? "在工作区模型元数据可用前，先使用回退模型默认值。"
+                : "Using fallback model defaults until workspace model metadata is available."}
           </div>
         )}
         {modelOptionsError && <div className="settings-help">{modelOptionsError}</div>}
         {createError && <div className="settings-agents-error">{createError}</div>}
       </div>
 
-      <SettingsSubsection
-        title="Configured Agents"
-        subtitle="Manage custom roles and their per-agent config files."
-      />
+      <div className="settings-subsection-title">{t("settings.agents.configured.title")}</div>
+      <div className="settings-subsection-subtitle">
+        {t("settings.agents.configured.subtitle")}
+      </div>
 
       {settings && settings.agents.length === 0 && !isLoading && (
-        <div className="settings-help">No custom agents configured yet.</div>
+        <div className="settings-help">{t("settings.agents.configured.empty")}</div>
       )}
 
       {settings?.agents.map((agent) => {
@@ -625,13 +652,13 @@ export function SettingsAgentsSection({
               <div>
                 <div className="settings-toggle-title">{agent.name}</div>
                 <div className="settings-toggle-subtitle">
-                  {agent.description || "No description."}
+                  {agent.description || t("settings.agents.card.noDescription")}
                 </div>
               </div>
             </div>
 
             <div className="settings-help settings-help-inline">
-              <code>{agent.configFile || "(missing config_file)"}</code>
+              <code>{agent.configFile || t("settings.agents.card.missingConfigFile")}</code>
             </div>
             <div className="settings-agents-actions">
               {!isPendingDelete && (
@@ -642,7 +669,7 @@ export function SettingsAgentsSection({
                     onClick={() => startEditing(agent)}
                     disabled={isUpdating || isDeleting}
                   >
-                    Edit
+                    {t("settings.agents.card.edit")}
                   </button>
                   <button
                     type="button"
@@ -650,7 +677,7 @@ export function SettingsAgentsSection({
                     onClick={() => handleDeleteAgent(agent.name)}
                     disabled={isUpdating || isDeleting}
                   >
-                    Delete
+                    {t("settings.agents.card.delete")}
                   </button>
                 </>
               )}
@@ -667,16 +694,18 @@ export function SettingsAgentsSection({
                 onClick={() => void handleOpenConfigEditor(agent.name)}
                 disabled={!agent.managedByApp || isReadingConfig || isWritingConfig}
               >
-                {isReadingConfig ? "Opening..." : "Edit File"}
+                {isReadingConfig ? t("settings.agents.card.opening") : t("settings.agents.card.editFile")}
               </button>
               {!agent.managedByApp && (
-                <span className="settings-help settings-help-inline">External path</span>
+                <span className="settings-help settings-help-inline">
+                  {t("settings.agents.card.externalPath")}
+                </span>
               )}
             </div>
             {isPendingDelete && (
               <div className="settings-agents-actions">
                 <span className="settings-help settings-help-inline">
-                  Delete agent and managed config file?
+                  {t("settings.agents.card.deleteConfirmPrompt")}
                 </span>
                 <button
                   type="button"
@@ -686,7 +715,7 @@ export function SettingsAgentsSection({
                   }}
                   disabled={isDeleting}
                 >
-                  Cancel
+                  {t("settings.agents.card.cancel")}
                 </button>
                 <button
                   type="button"
@@ -694,7 +723,7 @@ export function SettingsAgentsSection({
                   onClick={() => void handleConfirmDeleteAgent(agent.name)}
                   disabled={isDeleting}
                 >
-                  {isDeleting ? "Deleting..." : "Confirm Delete"}
+                  {isDeleting ? t("settings.agents.card.deleting") : t("settings.agents.card.confirmDelete")}
                 </button>
               </div>
             )}
@@ -706,7 +735,7 @@ export function SettingsAgentsSection({
                     className="settings-label"
                     htmlFor={`settings-agent-edit-name-${agent.name}`}
                   >
-                    Name
+                    {t("settings.agents.field.name")}
                   </label>
                   <button
                     type="button"
@@ -734,8 +763,8 @@ export function SettingsAgentsSection({
                     disabled={
                       isUpdating || editDescriptionGenerating || !canGenerateEditFromName
                     }
-                    title="Generate description and developer instructions with AI"
-                    aria-label={`Generate fields for ${agent.name}`}
+                    title={t("settings.agents.generate.title")}
+                    aria-label={t("settings.agents.generate.editAria", { name: agent.name })}
                   >
                     {editDescriptionGenerating ? (
                       <MagicSparkleLoaderIcon className="settings-agents-generate-loader" />
@@ -755,14 +784,14 @@ export function SettingsAgentsSection({
                   className="settings-label"
                   htmlFor={`settings-agent-edit-description-${agent.name}`}
                 >
-                  Description
+                  {t("settings.agents.field.description")}
                 </label>
                 <textarea
                   id={`settings-agent-edit-description-${agent.name}`}
                   className="settings-agents-textarea settings-agents-textarea--compact"
                   value={editDescriptionDraft}
                   onChange={(event) => setEditDescriptionDraft(event.target.value)}
-                  placeholder="Short role summary."
+                  placeholder={t("settings.agents.create.descriptionPlaceholder")}
                   rows={2}
                   disabled={isUpdating}
                 />
@@ -770,7 +799,7 @@ export function SettingsAgentsSection({
                   className="settings-label"
                   htmlFor={`settings-agent-edit-developer-instructions-${agent.name}`}
                 >
-                  Developer instructions
+                  {t("settings.agents.field.developerInstructions")}
                 </label>
                 <textarea
                   id={`settings-agent-edit-developer-instructions-${agent.name}`}
@@ -779,7 +808,7 @@ export function SettingsAgentsSection({
                   onChange={(event) =>
                     setEditDeveloperInstructionsDraft(event.target.value)
                   }
-                  placeholder="Multiline per-agent developer instructions."
+                  placeholder={t("settings.agents.create.developerInstructionsPlaceholder")}
                   disabled={isUpdating}
                 />
                 <label className="settings-checkbox">
@@ -788,7 +817,7 @@ export function SettingsAgentsSection({
                     checked={renameManagedFile}
                     onChange={(event) => setRenameManagedFile(event.target.checked)}
                   />
-                  Rename managed config file when agent name changes
+                  {t("settings.agents.edit.renameManagedFile")}
                 </label>
                 <div className="settings-agents-actions">
                   <button
@@ -800,7 +829,7 @@ export function SettingsAgentsSection({
                     }}
                     disabled={isUpdating}
                   >
-                    Cancel
+                    {t("settings.agents.card.cancel")}
                   </button>
                   <button
                     type="button"
@@ -808,7 +837,7 @@ export function SettingsAgentsSection({
                     onClick={() => void handleUpdateAgent()}
                     disabled={isUpdating}
                   >
-                    {isUpdating ? "Saving..." : "Save"}
+                    {isUpdating ? t("settings.agents.edit.saving") : t("settings.agents.edit.save")}
                   </button>
                 </div>
                 {editError && <div className="settings-agents-error">{editError}</div>}
@@ -819,7 +848,9 @@ export function SettingsAgentsSection({
               <div className="settings-field settings-agents-editor">
                 <div className="settings-agents-header">
                   <div>
-                    <div className="settings-toggle-title">{agent.name} config file</div>
+                    <div className="settings-toggle-title">
+                      {agent.name} {t("settings.agents.editor.configFileSuffix")}
+                    </div>
                     <div className="settings-toggle-subtitle">
                       <code>{agent.configFile}</code>
                     </div>
@@ -833,7 +864,7 @@ export function SettingsAgentsSection({
                         setConfigEditorDirty(false);
                       }}
                     >
-                      Close
+                      {t("settings.agents.editor.close")}
                     </button>
                     <button
                       type="button"
@@ -841,7 +872,7 @@ export function SettingsAgentsSection({
                       onClick={() => void handleSaveConfigEditor()}
                       disabled={!configEditorDirty || writingConfigAgentName === agent.name}
                     >
-                      {isWritingConfig ? "Saving..." : "Save"}
+                      {isWritingConfig ? t("settings.agents.edit.saving") : t("settings.agents.edit.save")}
                     </button>
                   </div>
                 </div>
@@ -859,9 +890,9 @@ export function SettingsAgentsSection({
         );
       })}
 
-      {isLoading && <div className="settings-help">Loading agents settings...</div>}
+      {isLoading && <div className="settings-help">{t("settings.agents.loading")}</div>}
       {openPathError && <div className="settings-agents-error">{openPathError}</div>}
       {error && <div className="settings-agents-error">{error}</div>}
-    </SettingsSection>
+    </section>
   );
 }
diff --git a/src/features/settings/components/sections/SettingsCodexSection.tsx b/src/features/settings/components/sections/SettingsCodexSection.tsx
index a522b3ac1..c8c8d2e05 100644
--- a/src/features/settings/components/sections/SettingsCodexSection.tsx
+++ b/src/features/settings/components/sections/SettingsCodexSection.tsx
@@ -7,11 +7,8 @@ import type {
   CodexUpdateResult,
   ModelOption,
 } from "@/types";
-import {
-  SettingsSection,
-  SettingsToggleRow,
-} from "@/features/design-system/components/settings/SettingsPrimitives";
 import { FileEditorCard } from "@/features/shared/components/FileEditorCard";
+import { useI18n } from "@/i18n/useI18n";
 
 type SettingsCodexSectionProps = {
   appSettings: AppSettings;
@@ -146,6 +143,7 @@ export function SettingsCodexSection({
   onRefreshGlobalConfig,
   onSaveGlobalConfig,
 }: SettingsCodexSectionProps) {
+  const { t } = useI18n();
   const latestModelSlug = defaultModels[0]?.model ?? null;
   const savedModelSlug = useMemo(
     () => coerceSavedModelSlug(appSettings.lastComposerModelId, defaultModels),
@@ -228,13 +226,12 @@ export function SettingsCodexSection({
   ]);
 
   return (
-    <SettingsSection
-      title="Codex"
-      subtitle="Configure the Codex CLI used by CodexMonitor and validate the install."
-    >
+    <section className="settings-section">
+      <div className="settings-section-title">{t("settings.codex.sectionTitle")}</div>
+      <div className="settings-section-subtitle">{t("settings.codex.sectionSubtitle")}</div>
       <div className="settings-field">
         <label className="settings-field-label" htmlFor="codex-path">
-          Default Codex path
+          {t("settings.codex.path.label")}
         </label>
         <div className="settings-field-row">
           <input
@@ -251,19 +248,21 @@ export function SettingsCodexSection({
               void onBrowseCodex();
             }}
           >
-            Browse
+            {t("settings.codex.path.browse")}
           </button>
           <button
             type="button"
             className="ghost"
             onClick={() => onSetCodexPathDraft("")}
           >
-            Use PATH
+            {t("settings.codex.path.usePath")}
           </button>
         </div>
-        <div className="settings-help">Leave empty to use the system PATH resolution.</div>
+        <div className="settings-help">
+          {t("settings.codex.path.help")}
+        </div>
         <label className="settings-field-label" htmlFor="codex-args">
-          Default Codex args
+          {t("settings.codex.args.label")}
         </label>
         <div className="settings-field-row">
           <input
@@ -278,21 +277,24 @@ export function SettingsCodexSection({
             className="ghost"
             onClick={() => onSetCodexArgsDraft("")}
           >
-            Clear
+            {t("settings.codex.args.clear")}
           </button>
         </div>
         <div className="settings-help">
-          Extra flags passed before <code>app-server</code>. Use quotes for values with spaces.
+          {t("settings.codex.args.help.before")}
+          <code>app-server</code>
+          {t("settings.codex.args.help.after")}
         </div>
         <div className="settings-help">
-          These settings apply to the shared Codex app-server used across all connected workspaces.
+          {t("settings.codex.args.sharedHelp")}
         </div>
         <div className="settings-help">
-          Per-thread override processing ignores unsupported flags: <code>-m</code>/
-          <code>--model</code>, <code>-a</code>/<code>--ask-for-approval</code>,{" "}
+          {t("settings.codex.unsupportedFlags.prefix")}{" "}
+          <code>-m</code>/<code>--model</code>, <code>-a</code>/<code>--ask-for-approval</code>,{" "}
           <code>-s</code>/<code>--sandbox</code>, <code>--full-auto</code>,{" "}
           <code>--dangerously-bypass-approvals-and-sandbox</code>, <code>--oss</code>,{" "}
-          <code>--local-provider</code>, and <code>--no-alt-screen</code>.
+          <code>--local-provider</code>, {t("settings.codex.unsupportedFlags.and")} <code>--no-alt-screen</code>
+          {t("common.punctuation.period")}
         </div>
         <div className="settings-field-actions">
           {codexDirty && (
@@ -304,7 +306,7 @@ export function SettingsCodexSection({
               }}
               disabled={isSavingSettings}
             >
-              {isSavingSettings ? "Saving..." : "Save"}
+              {isSavingSettings ? t("settings.codex.actions.saving") : t("settings.codex.actions.save")}
             </button>
           )}
           <button
@@ -316,7 +318,9 @@ export function SettingsCodexSection({
             disabled={doctorState.status === "running"}
           >
             <Stethoscope aria-hidden />
-            {doctorState.status === "running" ? "Running..." : "Run doctor"}
+            {doctorState.status === "running"
+              ? t("settings.codex.actions.running")
+              : t("settings.codex.actions.runDoctor")}
           </button>
           <button
             type="button"
@@ -325,26 +329,38 @@ export function SettingsCodexSection({
               void onRunCodexUpdate();
             }}
             disabled={codexUpdateState.status === "running"}
-            title="Update Codex"
+            title={t("settings.codex.actions.updateCodex")}
           >
             <Stethoscope aria-hidden />
-            {codexUpdateState.status === "running" ? "Updating..." : "Update"}
+            {codexUpdateState.status === "running"
+              ? t("settings.codex.actions.updating")
+              : t("settings.codex.actions.update")}
           </button>
         </div>
 
         {doctorState.result && (
           <div className={`settings-doctor ${doctorState.result.ok ? "ok" : "error"}`}>
             <div className="settings-doctor-title">
-              {doctorState.result.ok ? "Codex looks good" : "Codex issue detected"}
+              {doctorState.result.ok
+                ? t("settings.codex.doctor.okTitle")
+                : t("settings.codex.doctor.errorTitle")}
             </div>
             <div className="settings-doctor-body">
-              <div>Version: {doctorState.result.version ?? "unknown"}</div>
-              <div>App-server: {doctorState.result.appServerOk ? "ok" : "failed"}</div>
               <div>
-                Node:{" "}
+                {t("settings.codex.doctor.version")}:{" "}
+                {doctorState.result.version ?? t("settings.codex.doctor.unknown")}
+              </div>
+              <div>
+                {t("settings.codex.doctor.appServer")}:{" "}
+                {doctorState.result.appServerOk
+                  ? t("settings.codex.doctor.ok")
+                  : t("settings.codex.doctor.failed")}
+              </div>
+              <div>
+                {t("settings.codex.doctor.node")}:{" "}
                 {doctorState.result.nodeOk
-                  ? `ok (${doctorState.result.nodeVersion ?? "unknown"})`
-                  : "missing"}
+                  ? `${t("settings.codex.doctor.ok")} (${doctorState.result.nodeVersion ?? t("settings.codex.doctor.unknown")})`
+                  : t("settings.codex.doctor.missing")}
               </div>
               {doctorState.result.details && <div>{doctorState.result.details}</div>}
               {doctorState.result.nodeDetails && <div>{doctorState.result.nodeDetails}</div>}
@@ -362,25 +378,25 @@ export function SettingsCodexSection({
             <div className="settings-doctor-title">
               {codexUpdateState.result.ok
                 ? codexUpdateState.result.upgraded
-                  ? "Codex updated"
-                  : "Codex already up-to-date"
-                : "Codex update failed"}
+                  ? t("settings.codex.update.updated")
+                  : t("settings.codex.update.upToDate")
+                : t("settings.codex.update.failed")}
             </div>
             <div className="settings-doctor-body">
-              <div>Method: {codexUpdateState.result.method}</div>
+              <div>{t("settings.codex.update.method")}: {codexUpdateState.result.method}</div>
               {codexUpdateState.result.package && (
-                <div>Package: {codexUpdateState.result.package}</div>
+                <div>{t("settings.codex.update.package")}: {codexUpdateState.result.package}</div>
               )}
               <div>
-                Version:{" "}
+                {t("settings.codex.doctor.version")}:{" "}
                 {codexUpdateState.result.afterVersion ??
                   codexUpdateState.result.beforeVersion ??
-                  "unknown"}
+                  t("settings.codex.doctor.unknown")}
               </div>
               {codexUpdateState.result.details && <div>{codexUpdateState.result.details}</div>}
               {codexUpdateState.result.output && (
                 <details>
-                  <summary>output</summary>
+                  <summary>{t("settings.codex.update.output")}</summary>
                   <pre>{codexUpdateState.result.output}</pre>
                 </details>
               )}
@@ -391,25 +407,24 @@ export function SettingsCodexSection({
 
       <div className="settings-divider" />
       <div className="settings-field-label settings-field-label--section">
-        Default parameters
+        {t("settings.codex.defaults.sectionTitle")}
       </div>
 
-      <SettingsToggleRow
-        title={
-          <label htmlFor="default-model">
-            Model
+      <div className="settings-toggle-row">
+        <div>
+          <label className="settings-toggle-title" htmlFor="default-model">
+            {t("settings.codex.defaults.model.label")}
           </label>
-        }
-        subtitle={
-          defaultModelsConnectedWorkspaceCount === 0
-            ? "Add a workspace to load available models."
-            : defaultModelsLoading
-              ? "Loading models from the first workspace…"
-              : defaultModelsError
-                ? `Couldn’t load models: ${defaultModelsError}`
-                : "Sourced from the first workspace and used when there is no thread-specific override."
-        }
-      >
+          <div className="settings-toggle-subtitle">
+            {defaultModelsConnectedWorkspaceCount === 0
+              ? t("settings.codex.defaults.model.addWorkspace")
+              : defaultModelsLoading
+                ? t("settings.codex.defaults.model.loading")
+                : defaultModelsError
+                  ? t("settings.codex.defaults.model.loadError", { error: defaultModelsError })
+                  : t("settings.codex.defaults.model.help")}
+          </div>
+        </div>
         <div className="settings-field-row">
           <select
             id="default-model"
@@ -422,7 +437,7 @@ export function SettingsCodexSection({
                 lastComposerModelId: event.target.value,
               })
             }
-            aria-label="Model"
+            aria-label={t("settings.codex.defaults.model.label")}
           >
             {defaultModels.map((model) => (
               <option key={model.model} value={model.model}>
@@ -436,23 +451,22 @@ export function SettingsCodexSection({
             onClick={onRefreshDefaultModels}
             disabled={defaultModelsLoading || defaultModelsConnectedWorkspaceCount === 0}
           >
-            Refresh
+            {t("settings.codex.defaults.model.refresh")}
           </button>
         </div>
-      </SettingsToggleRow>
+      </div>
 
-      <SettingsToggleRow
-        title={
-          <label htmlFor="default-effort">
-            Reasoning effort
+      <div className="settings-toggle-row">
+        <div>
+          <label className="settings-toggle-title" htmlFor="default-effort">
+            {t("settings.codex.defaults.reasoning.label")}
           </label>
-        }
-        subtitle={
-          reasoningSupported
-            ? "Available options depend on the selected model."
-            : "The selected model does not expose reasoning effort options."
-        }
-      >
+          <div className="settings-toggle-subtitle">
+            {reasoningSupported
+              ? t("settings.codex.defaults.reasoning.supported")
+              : t("settings.codex.defaults.reasoning.unsupported")}
+          </div>
+        </div>
         <select
           id="default-effort"
           className="settings-select"
@@ -463,26 +477,29 @@ export function SettingsCodexSection({
               lastComposerReasoningEffort: event.target.value,
             })
           }
-          aria-label="Reasoning effort"
+          aria-label={t("settings.codex.defaults.reasoning.label")}
           disabled={!reasoningSupported}
         >
-          {!reasoningSupported && <option value="">not supported</option>}
+          {!reasoningSupported && (
+            <option value="">{t("settings.codex.defaults.reasoning.notSupported")}</option>
+          )}
           {reasoningOptions.map((effort) => (
             <option key={effort} value={effort}>
               {effort}
             </option>
           ))}
         </select>
-      </SettingsToggleRow>
+      </div>
 
-      <SettingsToggleRow
-        title={
-          <label htmlFor="default-access">
-            Access mode
+      <div className="settings-toggle-row">
+        <div>
+          <label className="settings-toggle-title" htmlFor="default-access">
+            {t("settings.codex.defaults.access.label")}
           </label>
-        }
-        subtitle="Used when there is no thread-specific override."
-      >
+          <div className="settings-toggle-subtitle">
+            {t("settings.codex.defaults.access.help")}
+          </div>
+        </div>
         <select
           id="default-access"
           className="settings-select"
@@ -494,14 +511,14 @@ export function SettingsCodexSection({
             })
           }
         >
-          <option value="read-only">Read only</option>
-          <option value="current">On-request</option>
-          <option value="full-access">Full access</option>
+          <option value="read-only">{t("settings.codex.defaults.access.option.readOnly")}</option>
+          <option value="current">{t("settings.codex.defaults.access.option.current")}</option>
+          <option value="full-access">{t("settings.codex.defaults.access.option.fullAccess")}</option>
         </select>
-      </SettingsToggleRow>
+      </div>
       <div className="settings-field">
         <label className="settings-field-label" htmlFor="review-delivery">
-          Review mode
+          {t("settings.codex.review.label")}
         </label>
         <select
           id="review-delivery"
@@ -514,21 +531,22 @@ export function SettingsCodexSection({
             })
           }
         >
-          <option value="inline">Inline (same thread)</option>
-          <option value="detached">Detached (new review thread)</option>
+          <option value="inline">{t("settings.codex.review.option.inline")}</option>
+          <option value="detached">{t("settings.codex.review.option.detached")}</option>
         </select>
         <div className="settings-help">
-          Choose whether <code>/review</code> runs in the current thread or a detached review
-          thread.
+          {t("settings.codex.review.help.before")}
+          <code>/review</code>
+          {t("settings.codex.review.help.after")}
         </div>
       </div>
 
       <FileEditorCard
-        title="Global AGENTS.md"
+        title={t("settings.codex.globalAgents.title")}
         meta={globalAgentsMeta}
         error={globalAgentsError}
         value={globalAgentsContent}
-        placeholder="Add global instructions for Codex agents…"
+        placeholder={t("settings.codex.globalAgents.placeholder")}
         disabled={globalAgentsLoading}
         refreshDisabled={globalAgentsRefreshDisabled}
         saveDisabled={globalAgentsSaveDisabled}
@@ -538,7 +556,9 @@ export function SettingsCodexSection({
         onSave={onSaveGlobalAgents}
         helpText={
           <>
-            Stored at <code>~/.codex/AGENTS.md</code>.
+            {t("settings.codex.file.storedAt")}
+            <code>~/.codex/AGENTS.md</code>
+            {t("common.punctuation.period")}
           </>
         }
         classNames={{
@@ -555,11 +575,11 @@ export function SettingsCodexSection({
       />
 
       <FileEditorCard
-        title="Global config.toml"
+        title={t("settings.codex.globalConfig.title")}
         meta={globalConfigMeta}
         error={globalConfigError}
         value={globalConfigContent}
-        placeholder="Edit the global Codex config.toml…"
+        placeholder={t("settings.codex.globalConfig.placeholder")}
         disabled={globalConfigLoading}
         refreshDisabled={globalConfigRefreshDisabled}
         saveDisabled={globalConfigSaveDisabled}
@@ -569,7 +589,9 @@ export function SettingsCodexSection({
         onSave={onSaveGlobalConfig}
         helpText={
           <>
-            Stored at <code>~/.codex/config.toml</code>.
+            {t("settings.codex.file.storedAt")}
+            <code>~/.codex/config.toml</code>
+            {t("common.punctuation.period")}
           </>
         }
         classNames={{
@@ -584,6 +606,6 @@ export function SettingsCodexSection({
           help: "settings-help",
         }}
       />
-    </SettingsSection>
+    </section>
   );
 }
diff --git a/src/features/settings/components/sections/SettingsComposerSection.tsx b/src/features/settings/components/sections/SettingsComposerSection.tsx
index ae3014bbc..23e6ef7b9 100644
--- a/src/features/settings/components/sections/SettingsComposerSection.tsx
+++ b/src/features/settings/components/sections/SettingsComposerSection.tsx
@@ -1,9 +1,5 @@
 import type { AppSettings } from "@/types";
-import {
-  SettingsSection,
-  SettingsToggleRow,
-  SettingsToggleSwitch,
-} from "@/features/design-system/components/settings/SettingsPrimitives";
+import { useI18n } from "@/i18n/useI18n";
 
 type ComposerPreset = AppSettings["composerEditorPreset"];
 
@@ -24,15 +20,15 @@ export function SettingsComposerSection({
   onComposerPresetChange,
   onUpdateAppSettings,
 }: SettingsComposerSectionProps) {
+  const { t } = useI18n();
   const steerUnavailable = !appSettings.steerEnabled;
   return (
-    <SettingsSection
-      title="Composer"
-      subtitle="Control helpers and formatting behavior inside the message editor."
-    >
+    <section className="settings-section">
+      <div className="settings-section-title">{t("settings.composer.sectionTitle")}</div>
+      <div className="settings-section-subtitle">{t("settings.composer.sectionSubtitle")}</div>
       <div className="settings-field">
-        <div className="settings-field-label">Follow-up behavior</div>
-        <div className="settings-segmented" aria-label="Follow-up behavior">
+        <div className="settings-field-label">{t("settings.composer.followUp.label")}</div>
+        <div className="settings-segmented" aria-label={t("settings.composer.followUp.label")}>
           <label
             className={`settings-segmented-option${
               appSettings.followUpMessageBehavior === "queue" ? " is-active" : ""
@@ -51,13 +47,15 @@ export function SettingsComposerSection({
                 })
               }
             />
-            <span className="settings-segmented-option-label">Queue</span>
+            <span className="settings-segmented-option-label">
+              {t("settings.composer.followUp.option.queue")}
+            </span>
           </label>
           <label
             className={`settings-segmented-option${
               appSettings.followUpMessageBehavior === "steer" ? " is-active" : ""
             }${steerUnavailable ? " is-disabled" : ""}`}
-            title={steerUnavailable ? "Steer is unavailable in the current Codex config." : ""}
+            title={steerUnavailable ? t("settings.composer.followUp.steerUnavailableTitle") : ""}
           >
             <input
               className="settings-segmented-input"
@@ -76,41 +74,49 @@ export function SettingsComposerSection({
                 });
               }}
             />
-            <span className="settings-segmented-option-label">Steer</span>
+            <span className="settings-segmented-option-label">
+              {t("settings.composer.followUp.option.steer")}
+            </span>
           </label>
         </div>
         <div className="settings-help">
-          Choose the default while a run is active. Press {followUpShortcutLabel} to send the
-          opposite behavior for one message.
+          {t("settings.composer.followUp.help.before")}
+          {followUpShortcutLabel}
+          {t("settings.composer.followUp.help.after")}
         </div>
-        <SettingsToggleRow
-          title="Show follow-up hint while processing"
-          subtitle="Displays queue/steer shortcut guidance above the composer."
-        >
-          <SettingsToggleSwitch
-            pressed={appSettings.composerFollowUpHintEnabled}
+        <div className="settings-toggle-row">
+          <div>
+            <div className="settings-toggle-title">{t("settings.composer.followUp.hint.title")}</div>
+            <div className="settings-toggle-subtitle">
+              {t("settings.composer.followUp.hint.subtitle")}
+            </div>
+          </div>
+          <button
+            type="button"
+            className={`settings-toggle ${appSettings.composerFollowUpHintEnabled ? "on" : ""}`}
             onClick={() =>
               void onUpdateAppSettings({
                 ...appSettings,
                 composerFollowUpHintEnabled: !appSettings.composerFollowUpHintEnabled,
               })
             }
-          />
-        </SettingsToggleRow>
+            aria-pressed={appSettings.composerFollowUpHintEnabled}
+          >
+            <span className="settings-toggle-knob" />
+          </button>
+        </div>
         {steerUnavailable && (
           <div className="settings-help">
-            Steer is unavailable in the current Codex config. Follow-ups will queue.
+            {t("settings.composer.followUp.steerUnavailableHelp")}
           </div>
         )}
       </div>
       <div className="settings-divider" />
-      <div className="settings-subsection-title">Presets</div>
-      <div className="settings-subsection-subtitle">
-        Choose a starting point and fine-tune the toggles below.
-      </div>
+      <div className="settings-subsection-title">{t("settings.composer.presets.title")}</div>
+      <div className="settings-subsection-subtitle">{t("settings.composer.presets.subtitle")}</div>
       <div className="settings-field">
         <label className="settings-field-label" htmlFor="composer-preset">
-          Preset
+          {t("settings.composer.presets.label")}
         </label>
         <select
           id="composer-preset"
@@ -127,77 +133,111 @@ export function SettingsComposerSection({
           ))}
         </select>
         <div className="settings-help">
-          Presets update the toggles below. Customize any setting after selecting.
+          {t("settings.composer.presets.help")}
         </div>
       </div>
       <div className="settings-divider" />
-      <div className="settings-subsection-title">Code fences</div>
-      <SettingsToggleRow
-        title="Expand fences on Space"
-        subtitle="Typing ``` then Space inserts a fenced block."
-      >
-        <SettingsToggleSwitch
-          pressed={appSettings.composerFenceExpandOnSpace}
+      <div className="settings-subsection-title">{t("settings.composer.codeFences.title")}</div>
+      <div className="settings-toggle-row">
+        <div>
+          <div className="settings-toggle-title">{t("settings.composer.codeFences.space.title")}</div>
+          <div className="settings-toggle-subtitle">
+            {t("settings.composer.codeFences.space.subtitle")}
+          </div>
+        </div>
+        <button
+          type="button"
+          className={`settings-toggle ${appSettings.composerFenceExpandOnSpace ? "on" : ""}`}
           onClick={() =>
             void onUpdateAppSettings({
               ...appSettings,
               composerFenceExpandOnSpace: !appSettings.composerFenceExpandOnSpace,
             })
           }
-        />
-      </SettingsToggleRow>
-      <SettingsToggleRow
-        title="Expand fences on Enter"
-        subtitle="Use Enter to expand ``` lines when enabled."
-      >
-        <SettingsToggleSwitch
-          pressed={appSettings.composerFenceExpandOnEnter}
+          aria-pressed={appSettings.composerFenceExpandOnSpace}
+        >
+          <span className="settings-toggle-knob" />
+        </button>
+      </div>
+      <div className="settings-toggle-row">
+        <div>
+          <div className="settings-toggle-title">{t("settings.composer.codeFences.enter.title")}</div>
+          <div className="settings-toggle-subtitle">
+            {t("settings.composer.codeFences.enter.subtitle")}
+          </div>
+        </div>
+        <button
+          type="button"
+          className={`settings-toggle ${appSettings.composerFenceExpandOnEnter ? "on" : ""}`}
           onClick={() =>
             void onUpdateAppSettings({
               ...appSettings,
               composerFenceExpandOnEnter: !appSettings.composerFenceExpandOnEnter,
             })
           }
-        />
-      </SettingsToggleRow>
-      <SettingsToggleRow
-        title="Support language tags"
-        subtitle="Allows ```lang + Space to include a language."
-      >
-        <SettingsToggleSwitch
-          pressed={appSettings.composerFenceLanguageTags}
+          aria-pressed={appSettings.composerFenceExpandOnEnter}
+        >
+          <span className="settings-toggle-knob" />
+        </button>
+      </div>
+      <div className="settings-toggle-row">
+        <div>
+          <div className="settings-toggle-title">{t("settings.composer.codeFences.langTags.title")}</div>
+          <div className="settings-toggle-subtitle">
+            {t("settings.composer.codeFences.langTags.subtitle")}
+          </div>
+        </div>
+        <button
+          type="button"
+          className={`settings-toggle ${appSettings.composerFenceLanguageTags ? "on" : ""}`}
           onClick={() =>
             void onUpdateAppSettings({
               ...appSettings,
               composerFenceLanguageTags: !appSettings.composerFenceLanguageTags,
             })
           }
-        />
-      </SettingsToggleRow>
-      <SettingsToggleRow
-        title="Wrap selection in fences"
-        subtitle="Wraps selected text when creating a fence."
-      >
-        <SettingsToggleSwitch
-          pressed={appSettings.composerFenceWrapSelection}
+          aria-pressed={appSettings.composerFenceLanguageTags}
+        >
+          <span className="settings-toggle-knob" />
+        </button>
+      </div>
+      <div className="settings-toggle-row">
+        <div>
+          <div className="settings-toggle-title">
+            {t("settings.composer.codeFences.wrapSelection.title")}
+          </div>
+          <div className="settings-toggle-subtitle">
+            {t("settings.composer.codeFences.wrapSelection.subtitle")}
+          </div>
+        </div>
+        <button
+          type="button"
+          className={`settings-toggle ${appSettings.composerFenceWrapSelection ? "on" : ""}`}
           onClick={() =>
             void onUpdateAppSettings({
               ...appSettings,
               composerFenceWrapSelection: !appSettings.composerFenceWrapSelection,
             })
           }
-        />
-      </SettingsToggleRow>
-      <SettingsToggleRow
-        title="Copy blocks without fences"
-        subtitle={
-          <>
-            When enabled, Copy is plain text. Hold {optionKeyLabel} to include ``` fences.
-          </>
-        }
-      >
-        <SettingsToggleSwitch
-          pressed={appSettings.composerCodeBlockCopyUseModifier}
+          aria-pressed={appSettings.composerFenceWrapSelection}
+        >
+          <span className="settings-toggle-knob" />
+        </button>
+      </div>
+      <div className="settings-toggle-row">
+        <div>
+          <div className="settings-toggle-title">
+            {t("settings.composer.codeFences.copyNoFence.title")}
+          </div>
+          <div className="settings-toggle-subtitle">
+            {t("settings.composer.codeFences.copyNoFence.subtitle.before")}
+            {optionKeyLabel}
+            {t("settings.composer.codeFences.copyNoFence.subtitle.after")}
+          </div>
+        </div>
+        <button
+          type="button"
+          className={`settings-toggle ${appSettings.composerCodeBlockCopyUseModifier ? "on" : ""}`}
           onClick={() =>
             void onUpdateAppSettings({
               ...appSettings,
@@ -205,16 +245,25 @@ export function SettingsComposerSection({
                 !appSettings.composerCodeBlockCopyUseModifier,
             })
           }
-        />
-      </SettingsToggleRow>
+          aria-pressed={appSettings.composerCodeBlockCopyUseModifier}
+        >
+          <span className="settings-toggle-knob" />
+        </button>
+      </div>
       <div className="settings-divider" />
-      <div className="settings-subsection-title">Pasting</div>
-      <SettingsToggleRow
-        title="Auto-wrap multi-line paste"
-        subtitle="Wraps multi-line paste inside a fenced block."
-      >
-        <SettingsToggleSwitch
-          pressed={appSettings.composerFenceAutoWrapPasteMultiline}
+      <div className="settings-subsection-title">{t("settings.composer.pasting.title")}</div>
+      <div className="settings-toggle-row">
+        <div>
+          <div className="settings-toggle-title">
+            {t("settings.composer.pasting.multiline.title")}
+          </div>
+          <div className="settings-toggle-subtitle">
+            {t("settings.composer.pasting.multiline.subtitle")}
+          </div>
+        </div>
+        <button
+          type="button"
+          className={`settings-toggle ${appSettings.composerFenceAutoWrapPasteMultiline ? "on" : ""}`}
           onClick={() =>
             void onUpdateAppSettings({
               ...appSettings,
@@ -222,14 +271,23 @@ export function SettingsComposerSection({
                 !appSettings.composerFenceAutoWrapPasteMultiline,
             })
           }
-        />
-      </SettingsToggleRow>
-      <SettingsToggleRow
-        title="Auto-wrap code-like single lines"
-        subtitle="Wraps long single-line code snippets on paste."
-      >
-        <SettingsToggleSwitch
-          pressed={appSettings.composerFenceAutoWrapPasteCodeLike}
+          aria-pressed={appSettings.composerFenceAutoWrapPasteMultiline}
+        >
+          <span className="settings-toggle-knob" />
+        </button>
+      </div>
+      <div className="settings-toggle-row">
+        <div>
+          <div className="settings-toggle-title">
+            {t("settings.composer.pasting.codeLike.title")}
+          </div>
+          <div className="settings-toggle-subtitle">
+            {t("settings.composer.pasting.codeLike.subtitle")}
+          </div>
+        </div>
+        <button
+          type="button"
+          className={`settings-toggle ${appSettings.composerFenceAutoWrapPasteCodeLike ? "on" : ""}`}
           onClick={() =>
             void onUpdateAppSettings({
               ...appSettings,
@@ -237,24 +295,36 @@ export function SettingsComposerSection({
                 !appSettings.composerFenceAutoWrapPasteCodeLike,
             })
           }
-        />
-      </SettingsToggleRow>
+          aria-pressed={appSettings.composerFenceAutoWrapPasteCodeLike}
+        >
+          <span className="settings-toggle-knob" />
+        </button>
+      </div>
       <div className="settings-divider" />
-      <div className="settings-subsection-title">Lists</div>
-      <SettingsToggleRow
-        title="Continue lists on Shift+Enter"
-        subtitle="Continues numbered and bulleted lists when the line has content."
-      >
-        <SettingsToggleSwitch
-          pressed={appSettings.composerListContinuation}
+      <div className="settings-subsection-title">{t("settings.composer.lists.title")}</div>
+      <div className="settings-toggle-row">
+        <div>
+          <div className="settings-toggle-title">
+            {t("settings.composer.lists.continue.title")}
+          </div>
+          <div className="settings-toggle-subtitle">
+            {t("settings.composer.lists.continue.subtitle")}
+          </div>
+        </div>
+        <button
+          type="button"
+          className={`settings-toggle ${appSettings.composerListContinuation ? "on" : ""}`}
           onClick={() =>
             void onUpdateAppSettings({
               ...appSettings,
               composerListContinuation: !appSettings.composerListContinuation,
             })
           }
-        />
-      </SettingsToggleRow>
-    </SettingsSection>
+          aria-pressed={appSettings.composerListContinuation}
+        >
+          <span className="settings-toggle-knob" />
+        </button>
+      </div>
+    </section>
   );
 }
diff --git a/src/features/settings/components/sections/SettingsDictationSection.tsx b/src/features/settings/components/sections/SettingsDictationSection.tsx
index 83c37279e..0dee0b8e1 100644
--- a/src/features/settings/components/sections/SettingsDictationSection.tsx
+++ b/src/features/settings/components/sections/SettingsDictationSection.tsx
@@ -1,10 +1,6 @@
 import type { AppSettings, DictationModelStatus } from "@/types";
-import {
-  SettingsSection,
-  SettingsToggleRow,
-  SettingsToggleSwitch,
-} from "@/features/design-system/components/settings/SettingsPrimitives";
 import { formatDownloadSize } from "@utils/formatting";
+import { useI18n } from "@/i18n/useI18n";
 
 type DictationModelOption = {
   id: string;
@@ -40,19 +36,23 @@ export function SettingsDictationSection({
   onCancelDictationDownload,
   onRemoveDictationModel,
 }: SettingsDictationSectionProps) {
+  const { t } = useI18n();
   const dictationProgress = dictationModelStatus?.progress ?? null;
 
   return (
-    <SettingsSection
-      title="Dictation"
-      subtitle="Enable microphone dictation with on-device transcription."
-    >
-      <SettingsToggleRow
-        title="Enable dictation"
-        subtitle="Downloads the selected Whisper model on first use."
-      >
-        <SettingsToggleSwitch
-          pressed={appSettings.dictationEnabled}
+    <section className="settings-section">
+      <div className="settings-section-title">{t("settings.dictation.sectionTitle")}</div>
+      <div className="settings-section-subtitle">{t("settings.dictation.sectionSubtitle")}</div>
+      <div className="settings-toggle-row">
+        <div>
+          <div className="settings-toggle-title">{t("settings.dictation.enable.title")}</div>
+          <div className="settings-toggle-subtitle">
+            {t("settings.dictation.enable.subtitle")}
+          </div>
+        </div>
+        <button
+          type="button"
+          className={`settings-toggle ${appSettings.dictationEnabled ? "on" : ""}`}
           onClick={() => {
             const nextEnabled = !appSettings.dictationEnabled;
             void onUpdateAppSettings({
@@ -74,11 +74,14 @@ export function SettingsDictationSection({
               onDownloadDictationModel();
             }
           }}
-        />
-      </SettingsToggleRow>
+          aria-pressed={appSettings.dictationEnabled}
+        >
+          <span className="settings-toggle-knob" />
+        </button>
+      </div>
       <div className="settings-field">
         <label className="settings-field-label" htmlFor="dictation-model">
-          Dictation model
+          {t("settings.dictation.model.label")}
         </label>
         <select
           id="dictation-model"
@@ -98,12 +101,13 @@ export function SettingsDictationSection({
           ))}
         </select>
         <div className="settings-help">
-          {selectedDictationModel.note} Download size: {selectedDictationModel.size}.
+          {selectedDictationModel.note} {t("settings.dictation.model.downloadSize")}:{" "}
+          {selectedDictationModel.size}.
         </div>
       </div>
       <div className="settings-field">
         <label className="settings-field-label" htmlFor="dictation-language">
-          Preferred dictation language
+          {t("settings.dictation.language.label")}
         </label>
         <select
           id="dictation-language"
@@ -116,33 +120,33 @@ export function SettingsDictationSection({
             })
           }
         >
-          <option value="">Auto-detect only</option>
-          <option value="en">English</option>
-          <option value="es">Spanish</option>
-          <option value="fr">French</option>
-          <option value="de">German</option>
-          <option value="it">Italian</option>
-          <option value="pt">Portuguese</option>
-          <option value="nl">Dutch</option>
-          <option value="sv">Swedish</option>
-          <option value="no">Norwegian</option>
-          <option value="da">Danish</option>
-          <option value="fi">Finnish</option>
-          <option value="pl">Polish</option>
-          <option value="tr">Turkish</option>
-          <option value="ru">Russian</option>
-          <option value="uk">Ukrainian</option>
-          <option value="ja">Japanese</option>
-          <option value="ko">Korean</option>
-          <option value="zh">Chinese</option>
+          <option value="">{t("settings.dictation.language.autoDetect")}</option>
+          <option value="en">{t("settings.dictation.language.en")}</option>
+          <option value="es">{t("settings.dictation.language.es")}</option>
+          <option value="fr">{t("settings.dictation.language.fr")}</option>
+          <option value="de">{t("settings.dictation.language.de")}</option>
+          <option value="it">{t("settings.dictation.language.it")}</option>
+          <option value="pt">{t("settings.dictation.language.pt")}</option>
+          <option value="nl">{t("settings.dictation.language.nl")}</option>
+          <option value="sv">{t("settings.dictation.language.sv")}</option>
+          <option value="no">{t("settings.dictation.language.no")}</option>
+          <option value="da">{t("settings.dictation.language.da")}</option>
+          <option value="fi">{t("settings.dictation.language.fi")}</option>
+          <option value="pl">{t("settings.dictation.language.pl")}</option>
+          <option value="tr">{t("settings.dictation.language.tr")}</option>
+          <option value="ru">{t("settings.dictation.language.ru")}</option>
+          <option value="uk">{t("settings.dictation.language.uk")}</option>
+          <option value="ja">{t("settings.dictation.language.ja")}</option>
+          <option value="ko">{t("settings.dictation.language.ko")}</option>
+          <option value="zh">{t("settings.dictation.language.zh")}</option>
         </select>
         <div className="settings-help">
-          Auto-detect stays on; this nudges the decoder toward your preference.
+          {t("settings.dictation.language.help")}
         </div>
       </div>
       <div className="settings-field">
         <label className="settings-field-label" htmlFor="dictation-hold-key">
-          Hold-to-dictate key
+          {t("settings.dictation.holdKey.label")}
         </label>
         <select
           id="dictation-hold-key"
@@ -155,25 +159,28 @@ export function SettingsDictationSection({
             })
           }
         >
-          <option value="">Off</option>
+          <option value="">{t("settings.dictation.holdKey.off")}</option>
           <option value="alt">{optionKeyLabel}</option>
           <option value="shift">Shift</option>
           <option value="control">Control</option>
           <option value="meta">{metaKeyLabel}</option>
         </select>
         <div className="settings-help">
-          Hold the key to start dictation, release to stop and process.
+          {t("settings.dictation.holdKey.help")}
         </div>
       </div>
       {dictationModelStatus && (
         <div className="settings-field">
-          <div className="settings-field-label">Model status ({selectedDictationModel.label})</div>
+          <div className="settings-field-label">
+            {t("settings.dictation.status.label")} ({selectedDictationModel.label})
+          </div>
           <div className="settings-help">
-            {dictationModelStatus.state === "ready" && "Ready for dictation."}
-            {dictationModelStatus.state === "missing" && "Model not downloaded yet."}
-            {dictationModelStatus.state === "downloading" && "Downloading model..."}
+            {dictationModelStatus.state === "ready" && t("settings.dictation.status.ready")}
+            {dictationModelStatus.state === "missing" && t("settings.dictation.status.missing")}
+            {dictationModelStatus.state === "downloading" &&
+              t("settings.dictation.status.downloading")}
             {dictationModelStatus.state === "error" &&
-              (dictationModelStatus.error ?? "Download error.")}
+              (dictationModelStatus.error ?? t("settings.dictation.status.errorFallback"))}
           </div>
           {dictationProgress && (
             <div className="settings-download-progress">
@@ -203,7 +210,7 @@ export function SettingsDictationSection({
                 onClick={onDownloadDictationModel}
                 disabled={!onDownloadDictationModel}
               >
-                Download model
+                {t("settings.dictation.actions.download")}
               </button>
             )}
             {dictationModelStatus.state === "downloading" && (
@@ -213,7 +220,7 @@ export function SettingsDictationSection({
                 onClick={onCancelDictationDownload}
                 disabled={!onCancelDictationDownload}
               >
-                Cancel download
+                {t("settings.dictation.actions.cancelDownload")}
               </button>
             )}
             {dictationReady && (
@@ -223,12 +230,12 @@ export function SettingsDictationSection({
                 onClick={onRemoveDictationModel}
                 disabled={!onRemoveDictationModel}
               >
-                Remove model
+                {t("settings.dictation.actions.removeModel")}
               </button>
             )}
           </div>
         </div>
       )}
-    </SettingsSection>
+    </section>
   );
 }
diff --git a/src/features/settings/components/sections/SettingsDisplaySection.test.tsx b/src/features/settings/components/sections/SettingsDisplaySection.test.tsx
index 2f273d437..b81be2213 100644
--- a/src/features/settings/components/sections/SettingsDisplaySection.test.tsx
+++ b/src/features/settings/components/sections/SettingsDisplaySection.test.tsx
@@ -61,6 +61,56 @@ describe("SettingsDisplaySection", () => {
       expect.objectContaining({ threadTitleAutogenerationEnabled: true }),
     );
   });
+
+  it("updates interface language", () => {
+    const onUpdateAppSettings = vi.fn(async () => {});
+
+    render(
+      <SettingsDisplaySection
+        appSettings={
+          ({
+            theme: "system",
+            usageShowRemaining: false,
+            showMessageFilePath: true,
+            threadTitleAutogenerationEnabled: false,
+            uiFontFamily: "",
+            codeFontFamily: "",
+            codeFontSize: 11,
+            notificationSoundsEnabled: true,
+            systemNotificationsEnabled: true,
+          } as unknown) as AppSettings
+        }
+        reduceTransparency={false}
+        scaleShortcutTitle=""
+        scaleShortcutText=""
+        scaleDraft="100%"
+        uiFontDraft=""
+        codeFontDraft=""
+        codeFontSizeDraft={11}
+        onUpdateAppSettings={onUpdateAppSettings}
+        onToggleTransparency={vi.fn()}
+        onSetScaleDraft={vi.fn() as any}
+        onCommitScale={vi.fn(async () => {})}
+        onResetScale={vi.fn(async () => {})}
+        onSetUiFontDraft={vi.fn() as any}
+        onCommitUiFont={vi.fn(async () => {})}
+        onSetCodeFontDraft={vi.fn() as any}
+        onCommitCodeFont={vi.fn(async () => {})}
+        onSetCodeFontSizeDraft={vi.fn() as any}
+        onCommitCodeFontSize={vi.fn(async () => {})}
+        onTestNotificationSound={vi.fn()}
+        onTestSystemNotification={vi.fn()}
+      />,
+    );
+
+    fireEvent.change(screen.getByLabelText("Interface language"), {
+      target: { value: "zh-CN" },
+    });
+
+    expect(onUpdateAppSettings).toHaveBeenCalledWith(
+      expect.objectContaining({ uiLanguage: "zh-CN" }),
+    );
+  });
   it("toggles unlimited chat history", () => {
     const onUpdateAppSettings = vi.fn(async () => {});
 
diff --git a/src/features/settings/components/sections/SettingsDisplaySection.tsx b/src/features/settings/components/sections/SettingsDisplaySection.tsx
index 0dc2b9583..23343639f 100644
--- a/src/features/settings/components/sections/SettingsDisplaySection.tsx
+++ b/src/features/settings/components/sections/SettingsDisplaySection.tsx
@@ -16,11 +16,7 @@ import {
   clampChatScrollbackItems,
   isChatScrollbackPreset,
 } from "@utils/chatScrollback";
-import {
-  SettingsSection,
-  SettingsToggleRow,
-  SettingsToggleSwitch,
-} from "@/features/design-system/components/settings/SettingsPrimitives";
+import { useI18n } from "@/i18n/useI18n";
 
 type SettingsDisplaySectionProps = {
   appSettings: AppSettings;
@@ -69,6 +65,8 @@ export function SettingsDisplaySection({
   onTestNotificationSound,
   onTestSystemNotification,
 }: SettingsDisplaySectionProps) {
+  const { t } = useI18n();
+  const uiLanguage = appSettings.uiLanguage ?? "system";
   const scrollbackUnlimited = appSettings.chatHistoryScrollbackItems === null;
   const [scrollbackDraft, setScrollbackDraft] = useState(() => {
     const value = appSettings.chatHistoryScrollbackItems;
@@ -159,17 +157,16 @@ export function SettingsDisplaySection({
   };
 
   return (
-    <SettingsSection
-      title="Display & Sound"
-      subtitle="Tune visuals and audio alerts to your preferences."
-    >
-      <div className="settings-subsection-title">Display</div>
+    <section className="settings-section">
+      <div className="settings-section-title">{t("settings.display.sectionTitle")}</div>
+      <div className="settings-section-subtitle">{t("settings.display.sectionSubtitle")}</div>
+      <div className="settings-subsection-title">{t("settings.display.subsectionDisplayTitle")}</div>
       <div className="settings-subsection-subtitle">
-        Adjust how the window renders backgrounds and effects.
+        {t("settings.display.subsectionDisplaySubtitle")}
       </div>
       <div className="settings-field">
         <label className="settings-field-label" htmlFor="theme-select">
-          Theme
+          {t("settings.display.theme.label")}
         </label>
         <select
           id="theme-select"
@@ -182,60 +179,102 @@ export function SettingsDisplaySection({
             })
           }
         >
-          <option value="system">System</option>
-          <option value="light">Light</option>
-          <option value="dark">Dark</option>
-          <option value="dim">Dim</option>
+          <option value="system">{t("settings.display.theme.option.system")}</option>
+          <option value="light">{t("settings.display.theme.option.light")}</option>
+          <option value="dark">{t("settings.display.theme.option.dark")}</option>
+          <option value="dim">{t("settings.display.theme.option.dim")}</option>
+        </select>
+      </div>
+      <div className="settings-field">
+        <label className="settings-field-label" htmlFor="ui-language-select">
+          {t("settings.display.uiLanguage.label")}
+        </label>
+        <select
+          id="ui-language-select"
+          className="settings-select"
+          value={uiLanguage}
+          onChange={(event) =>
+            void onUpdateAppSettings({
+              ...appSettings,
+              uiLanguage: event.target.value as AppSettings["uiLanguage"],
+            })
+          }
+        >
+          <option value="system">{t("settings.display.uiLanguage.option.system")}</option>
+          <option value="en">{t("settings.display.uiLanguage.option.en")}</option>
+          <option value="zh-CN">{t("settings.display.uiLanguage.option.zh-CN")}</option>
         </select>
+        <div className="settings-help">{t("settings.display.uiLanguage.help")}</div>
       </div>
-      <SettingsToggleRow
-        title="Show remaining Codex limits"
-        subtitle="Display what is left instead of what is used."
-      >
-        <SettingsToggleSwitch
-          pressed={appSettings.usageShowRemaining}
+      <div className="settings-toggle-row">
+        <div>
+          <div className="settings-toggle-title">{t("settings.display.usageRemaining.title")}</div>
+          <div className="settings-toggle-subtitle">{t("settings.display.usageRemaining.subtitle")}</div>
+        </div>
+        <button
+          type="button"
+          className={`settings-toggle ${appSettings.usageShowRemaining ? "on" : ""}`}
           onClick={() =>
             void onUpdateAppSettings({
               ...appSettings,
               usageShowRemaining: !appSettings.usageShowRemaining,
             })
           }
-        />
-      </SettingsToggleRow>
-      <SettingsToggleRow
-        title="Show file path in messages"
-        subtitle="Display the parent path next to file links in messages."
-      >
-        <SettingsToggleSwitch
-          pressed={appSettings.showMessageFilePath}
+          aria-pressed={appSettings.usageShowRemaining}
+        >
+          <span className="settings-toggle-knob" />
+        </button>
+      </div>
+      <div className="settings-toggle-row">
+        <div>
+          <div className="settings-toggle-title">
+            {t("settings.display.filePathInMessages.title")}
+          </div>
+          <div className="settings-toggle-subtitle">
+            {t("settings.display.filePathInMessages.subtitle")}
+          </div>
+        </div>
+        <button
+          type="button"
+          className={`settings-toggle ${appSettings.showMessageFilePath ? "on" : ""}`}
           onClick={() =>
             void onUpdateAppSettings({
               ...appSettings,
               showMessageFilePath: !appSettings.showMessageFilePath,
             })
           }
-        />
-      </SettingsToggleRow>
-      <SettingsToggleRow
-        title="Split chat and diff center panes"
-        subtitle="Show chat and diff side by side instead of swapping between them."
-      >
-        <SettingsToggleSwitch
-          pressed={appSettings.splitChatDiffView}
+          aria-pressed={appSettings.showMessageFilePath}
+        >
+          <span className="settings-toggle-knob" />
+        </button>
+      </div>
+      <div className="settings-toggle-row">
+        <div>
+          <div className="settings-toggle-title">{t("settings.display.splitChatDiff.title")}</div>
+          <div className="settings-toggle-subtitle">{t("settings.display.splitChatDiff.subtitle")}</div>
+        </div>
+        <button
+          type="button"
+          className={`settings-toggle ${appSettings.splitChatDiffView ? "on" : ""}`}
           onClick={() =>
             void onUpdateAppSettings({
               ...appSettings,
               splitChatDiffView: !appSettings.splitChatDiffView,
             })
           }
-        />
-      </SettingsToggleRow>
-      <SettingsToggleRow
-        title="Auto-generate new thread titles"
-        subtitle="Generate a short title from your first message (uses extra tokens)."
-      >
-        <SettingsToggleSwitch
-          pressed={appSettings.threadTitleAutogenerationEnabled}
+          aria-pressed={appSettings.splitChatDiffView}
+        >
+          <span className="settings-toggle-knob" />
+        </button>
+      </div>
+      <div className="settings-toggle-row">
+        <div>
+          <div className="settings-toggle-title">{t("settings.display.autoThreadTitle.title")}</div>
+          <div className="settings-toggle-subtitle">{t("settings.display.autoThreadTitle.subtitle")}</div>
+        </div>
+        <button
+          type="button"
+          className={`settings-toggle ${appSettings.threadTitleAutogenerationEnabled ? "on" : ""}`}
           onClick={() =>
             void onUpdateAppSettings({
               ...appSettings,
@@ -243,25 +282,35 @@ export function SettingsDisplaySection({
                 !appSettings.threadTitleAutogenerationEnabled,
             })
           }
-        />
-      </SettingsToggleRow>
-      <div className="settings-subsection-title">Chat</div>
-      <div className="settings-subsection-subtitle">
-        Control how much conversation history is retained per thread.
+          aria-pressed={appSettings.threadTitleAutogenerationEnabled}
+        >
+          <span className="settings-toggle-knob" />
+        </button>
       </div>
-      <SettingsToggleRow
-        title="Unlimited chat history"
-        subtitle="Keep full thread history in memory (may impact performance)."
-      >
-        <SettingsToggleSwitch
-          pressed={scrollbackUnlimited}
+      <div className="settings-subsection-title">{t("settings.display.subsectionChatTitle")}</div>
+      <div className="settings-subsection-subtitle">{t("settings.display.subsectionChatSubtitle")}</div>
+      <div className="settings-toggle-row">
+        <div>
+          <div className="settings-toggle-title">
+            {t("settings.display.unlimitedChatHistory.title")}
+          </div>
+          <div className="settings-toggle-subtitle">
+            {t("settings.display.unlimitedChatHistory.subtitle")}
+          </div>
+        </div>
+        <button
+          type="button"
+          className={`settings-toggle ${scrollbackUnlimited ? "on" : ""}`}
           onClick={toggleUnlimitedScrollback}
           data-scrollback-control="true"
-        />
-      </SettingsToggleRow>
+          aria-pressed={scrollbackUnlimited}
+        >
+          <span className="settings-toggle-knob" />
+        </button>
+      </div>
       <div className="settings-field">
         <label className="settings-field-label" htmlFor="chat-scrollback-preset">
-          Scrollback preset
+          {t("settings.display.scrollbackPreset.label")}
         </label>
         <select
           id="chat-scrollback-preset"
@@ -271,21 +320,20 @@ export function SettingsDisplaySection({
           data-scrollback-control="true"
           disabled={scrollbackUnlimited}
         >
-          <option value="custom">Custom</option>
+          <option value="custom">{t("settings.display.scrollbackPreset.option.custom")}</option>
           {CHAT_SCROLLBACK_PRESETS.map((value) => (
             <option key={value} value={value}>
-              {value === CHAT_SCROLLBACK_DEFAULT ? `${value} (Default)` : value}
+              {value === CHAT_SCROLLBACK_DEFAULT
+                ? t("settings.display.scrollbackPreset.option.default", { value })
+                : value}
             </option>
           ))}
         </select>
-        <div className="settings-help">
-          Higher values keep more history but may increase memory usage. Use “Sync from
-          server” on a thread to re-fetch older messages.
-        </div>
+        <div className="settings-help">{t("settings.display.scrollbackPreset.help")}</div>
       </div>
       <div className="settings-field">
         <label className="settings-field-label" htmlFor="chat-scrollback-items">
-          Max items per thread
+          {t("settings.display.maxItemsPerThread.label")}
         </label>
         <div className="settings-field-row">
           <input
@@ -326,26 +374,37 @@ export function SettingsDisplaySection({
               });
             }}
           >
-            Reset
+            {t("common.reset")}
           </button>
         </div>
         <div className="settings-help">
-          Range: {CHAT_SCROLLBACK_MIN}–{CHAT_SCROLLBACK_MAX}. Counts messages, tool calls,
-          and other conversation items.
+          {t("settings.display.maxItemsPerThread.help", {
+            min: CHAT_SCROLLBACK_MIN,
+            max: CHAT_SCROLLBACK_MAX,
+          })}
         </div>
       </div>
-      <SettingsToggleRow
-        title="Reduce transparency"
-        subtitle="Use solid surfaces instead of glass."
-      >
-        <SettingsToggleSwitch
-          pressed={reduceTransparency}
+      <div className="settings-toggle-row">
+        <div>
+          <div className="settings-toggle-title">
+            {t("settings.display.reduceTransparency.title")}
+          </div>
+          <div className="settings-toggle-subtitle">
+            {t("settings.display.reduceTransparency.subtitle")}
+          </div>
+        </div>
+        <button
+          type="button"
+          className={`settings-toggle ${reduceTransparency ? "on" : ""}`}
           onClick={() => onToggleTransparency(!reduceTransparency)}
-        />
-      </SettingsToggleRow>
+          aria-pressed={reduceTransparency}
+        >
+          <span className="settings-toggle-knob" />
+        </button>
+      </div>
       <div className="settings-toggle-row settings-scale-row">
         <div>
-          <div className="settings-toggle-title">Interface scale</div>
+          <div className="settings-toggle-title">{t("settings.display.interfaceScale.title")}</div>
           <div className="settings-toggle-subtitle" title={scaleShortcutTitle}>
             {scaleShortcutText}
           </div>
@@ -357,7 +416,7 @@ export function SettingsDisplaySection({
             inputMode="decimal"
             className="settings-input settings-input--scale"
             value={scaleDraft}
-            aria-label="Interface scale"
+            aria-label={t("settings.display.interfaceScale.aria")}
             onChange={(event) => onSetScaleDraft(event.target.value)}
             onBlur={() => {
               void onCommitScale();
@@ -376,13 +435,13 @@ export function SettingsDisplaySection({
               void onResetScale();
             }}
           >
-            Reset
+            {t("common.reset")}
           </button>
         </div>
       </div>
       <div className="settings-field">
         <label className="settings-field-label" htmlFor="ui-font-family">
-          UI font family
+          {t("settings.display.uiFontFamily.label")}
         </label>
         <div className="settings-field-row">
           <input
@@ -412,16 +471,14 @@ export function SettingsDisplaySection({
               });
             }}
           >
-            Reset
+            {t("common.reset")}
           </button>
         </div>
-        <div className="settings-help">
-          Applies to all UI text. Leave empty to use the default system font stack.
-        </div>
+        <div className="settings-help">{t("settings.display.uiFontFamily.help")}</div>
       </div>
       <div className="settings-field">
         <label className="settings-field-label" htmlFor="code-font-family">
-          Code font family
+          {t("settings.display.codeFontFamily.label")}
         </label>
         <div className="settings-field-row">
           <input
@@ -451,14 +508,14 @@ export function SettingsDisplaySection({
               });
             }}
           >
-            Reset
+            {t("common.reset")}
           </button>
         </div>
-        <div className="settings-help">Applies to git diffs and other mono-spaced readouts.</div>
+        <div className="settings-help">{t("settings.display.codeFontFamily.help")}</div>
       </div>
       <div className="settings-field">
         <label className="settings-field-label" htmlFor="code-font-size">
-          Code font size
+          {t("settings.display.codeFontSize.label")}
         </label>
         <div className="settings-field-row">
           <input
@@ -475,7 +532,9 @@ export function SettingsDisplaySection({
               void onCommitCodeFontSize(nextValue);
             }}
           />
-          <div className="settings-scale-value">{codeFontSizeDraft}px</div>
+          <div className="settings-scale-value">
+            {t("settings.display.codeFontSize.value", { size: codeFontSizeDraft })}
+          </div>
           <button
             type="button"
             className="ghost settings-button-compact"
@@ -484,47 +543,73 @@ export function SettingsDisplaySection({
               void onCommitCodeFontSize(CODE_FONT_SIZE_DEFAULT);
             }}
           >
-            Reset
+            {t("common.reset")}
           </button>
         </div>
-        <div className="settings-help">Adjusts code and diff text size.</div>
+        <div className="settings-help">{t("settings.display.codeFontSize.help")}</div>
       </div>
-      <div className="settings-subsection-title">Sounds</div>
-      <div className="settings-subsection-subtitle">Control notification audio alerts.</div>
-      <SettingsToggleRow
-        title="Notification sounds"
-        subtitle="Play a sound when a long-running agent finishes while the window is unfocused."
-      >
-        <SettingsToggleSwitch
-          pressed={appSettings.notificationSoundsEnabled}
+      <div className="settings-subsection-title">{t("settings.display.subsectionSoundsTitle")}</div>
+      <div className="settings-subsection-subtitle">
+        {t("settings.display.subsectionSoundsSubtitle")}
+      </div>
+      <div className="settings-toggle-row">
+        <div>
+          <div className="settings-toggle-title">
+            {t("settings.display.notificationSounds.title")}
+          </div>
+          <div className="settings-toggle-subtitle">
+            {t("settings.display.notificationSounds.subtitle")}
+          </div>
+        </div>
+        <button
+          type="button"
+          className={`settings-toggle ${appSettings.notificationSoundsEnabled ? "on" : ""}`}
           onClick={() =>
             void onUpdateAppSettings({
               ...appSettings,
               notificationSoundsEnabled: !appSettings.notificationSoundsEnabled,
             })
           }
-        />
-      </SettingsToggleRow>
-      <SettingsToggleRow
-        title="System notifications"
-        subtitle="Show a system notification when a long-running agent finishes while the window is unfocused."
-      >
-        <SettingsToggleSwitch
-          pressed={appSettings.systemNotificationsEnabled}
+          aria-pressed={appSettings.notificationSoundsEnabled}
+        >
+          <span className="settings-toggle-knob" />
+        </button>
+      </div>
+      <div className="settings-toggle-row">
+        <div>
+          <div className="settings-toggle-title">
+            {t("settings.display.systemNotifications.title")}
+          </div>
+          <div className="settings-toggle-subtitle">
+            {t("settings.display.systemNotifications.subtitle")}
+          </div>
+        </div>
+        <button
+          type="button"
+          className={`settings-toggle ${appSettings.systemNotificationsEnabled ? "on" : ""}`}
           onClick={() =>
             void onUpdateAppSettings({
               ...appSettings,
               systemNotificationsEnabled: !appSettings.systemNotificationsEnabled,
             })
           }
-        />
-      </SettingsToggleRow>
-      <SettingsToggleRow
-        title="Sub-agent notifications"
-        subtitle="Include spawned sub-agent threads in system notifications."
-      >
-        <SettingsToggleSwitch
-          pressed={appSettings.subagentSystemNotificationsEnabled}
+          aria-pressed={appSettings.systemNotificationsEnabled}
+        >
+          <span className="settings-toggle-knob" />
+        </button>
+      </div>
+      <div className="settings-toggle-row">
+        <div>
+          <div className="settings-toggle-title">
+            {t("settings.display.subagentNotifications.title")}
+          </div>
+          <div className="settings-toggle-subtitle">
+            {t("settings.display.subagentNotifications.subtitle")}
+          </div>
+        </div>
+        <button
+          type="button"
+          className={`settings-toggle ${appSettings.subagentSystemNotificationsEnabled ? "on" : ""}`}
           onClick={() =>
             void onUpdateAppSettings({
               ...appSettings,
@@ -532,24 +617,27 @@ export function SettingsDisplaySection({
                 !appSettings.subagentSystemNotificationsEnabled,
             })
           }
-        />
-      </SettingsToggleRow>
+          aria-pressed={appSettings.subagentSystemNotificationsEnabled}
+        >
+          <span className="settings-toggle-knob" />
+        </button>
+      </div>
       <div className="settings-sound-actions">
         <button
           type="button"
           className="ghost settings-button-compact"
           onClick={onTestNotificationSound}
         >
-          Test sound
+          {t("settings.display.testSound")}
         </button>
         <button
           type="button"
           className="ghost settings-button-compact"
           onClick={onTestSystemNotification}
         >
-          Test notification
+          {t("settings.display.testNotification")}
         </button>
       </div>
-    </SettingsSection>
+    </section>
   );
 }
diff --git a/src/features/settings/components/sections/SettingsEnvironmentsSection.tsx b/src/features/settings/components/sections/SettingsEnvironmentsSection.tsx
index a04312c67..2bfc18ed5 100644
--- a/src/features/settings/components/sections/SettingsEnvironmentsSection.tsx
+++ b/src/features/settings/components/sections/SettingsEnvironmentsSection.tsx
@@ -1,7 +1,7 @@
 import type { Dispatch, SetStateAction } from "react";
-import { SettingsSection } from "@/features/design-system/components/settings/SettingsPrimitives";
 import type { WorkspaceInfo } from "@/types";
 import { pushErrorToast } from "@services/toasts";
+import { useI18n } from "@/i18n/useI18n";
 
 type SettingsEnvironmentsSectionProps = {
   mainWorkspaces: WorkspaceInfo[];
@@ -28,18 +28,20 @@ export function SettingsEnvironmentsSection({
   onSetEnvironmentDraftScript,
   onSaveEnvironmentSetup,
 }: SettingsEnvironmentsSectionProps) {
+  const { t } = useI18n();
   return (
-    <SettingsSection
-      title="Environments"
-      subtitle="Configure per-project setup scripts that run after worktree creation."
-    >
+    <section className="settings-section">
+      <div className="settings-section-title">{t("settings.environments.sectionTitle")}</div>
+      <div className="settings-section-subtitle">
+        {t("settings.environments.sectionSubtitle")}
+      </div>
       {mainWorkspaces.length === 0 ? (
-        <div className="settings-empty">No projects yet.</div>
+        <div className="settings-empty">{t("settings.environments.emptyNoProjects")}</div>
       ) : (
         <>
           <div className="settings-field">
             <label className="settings-field-label" htmlFor="settings-environment-project">
-              Project
+              {t("settings.environments.project.label")}
             </label>
             <select
               id="settings-environment-project"
@@ -60,9 +62,9 @@ export function SettingsEnvironmentsSection({
           </div>
 
           <div className="settings-field">
-            <div className="settings-field-label">Setup script</div>
+            <div className="settings-field-label">{t("settings.environments.setupScript.label")}</div>
             <div className="settings-help">
-              Runs once in a dedicated terminal after each new worktree is created.
+              {t("settings.environments.setupScript.help")}
             </div>
             {environmentError ? (
               <div className="settings-agents-error">{environmentError}</div>
@@ -83,24 +85,22 @@ export function SettingsEnvironmentsSection({
                   const clipboard = typeof navigator === "undefined" ? null : navigator.clipboard;
                   if (!clipboard?.writeText) {
                     pushErrorToast({
-                      title: "Copy failed",
-                      message:
-                        "Clipboard access is unavailable in this environment. Copy the script manually instead.",
+                      title: t("settings.environments.clipboard.copyFailedTitle"),
+                      message: t("settings.environments.clipboard.unavailable"),
                     });
                     return;
                   }
 
                   void clipboard.writeText(environmentDraftScript).catch(() => {
                     pushErrorToast({
-                      title: "Copy failed",
-                      message:
-                        "Could not write to the clipboard. Copy the script manually instead.",
+                      title: t("settings.environments.clipboard.copyFailedTitle"),
+                      message: t("settings.environments.clipboard.writeFailed"),
                     });
                   });
                 }}
                 disabled={environmentSaving || environmentDraftScript.length === 0}
               >
-                Copy
+                {t("settings.environments.actions.copy")}
               </button>
               <button
                 type="button"
@@ -108,7 +108,7 @@ export function SettingsEnvironmentsSection({
                 onClick={() => onSetEnvironmentDraftScript(environmentSavedScript ?? "")}
                 disabled={environmentSaving || !environmentDirty}
               >
-                Reset
+                {t("settings.environments.actions.reset")}
               </button>
               <button
                 type="button"
@@ -118,12 +118,14 @@ export function SettingsEnvironmentsSection({
                 }}
                 disabled={environmentSaving || !environmentDirty}
               >
-                {environmentSaving ? "Saving..." : "Save"}
+                {environmentSaving
+                  ? t("settings.environments.actions.saving")
+                  : t("settings.environments.actions.save")}
               </button>
             </div>
           </div>
         </>
       )}
-    </SettingsSection>
+    </section>
   );
 }
diff --git a/src/features/settings/components/sections/SettingsFeaturesSection.tsx b/src/features/settings/components/sections/SettingsFeaturesSection.tsx
index 9362ef311..acf3a7d7a 100644
--- a/src/features/settings/components/sections/SettingsFeaturesSection.tsx
+++ b/src/features/settings/components/sections/SettingsFeaturesSection.tsx
@@ -1,12 +1,7 @@
 import type { CodexFeature } from "@/types";
-import {
-  SettingsSection,
-  SettingsSubsection,
-  SettingsToggleRow,
-  SettingsToggleSwitch,
-} from "@/features/design-system/components/settings/SettingsPrimitives";
 import type { SettingsFeaturesSectionProps } from "@settings/hooks/useSettingsFeaturesSection";
 import { fileManagerName, openInFileManagerLabel } from "@utils/platformPaths";
+import { useI18n } from "@/i18n/useI18n";
 
 const FEATURE_DESCRIPTION_FALLBACKS: Record<string, string> = {
   undo: "Create a ghost commit at each turn.",
@@ -47,7 +42,79 @@ const FEATURE_DESCRIPTION_FALLBACKS: Record<string, string> = {
   responses_websockets_v2: "Enable Responses API WebSocket v2 mode.",
 };
 
-function formatFeatureLabel(feature: CodexFeature): string {
+const FEATURE_LABELS_ZH: Record<string, string> = {
+  undo: "撤销快照",
+  shell_tool: "Shell 工具",
+  unified_exec: "统一执行",
+  shell_snapshot: "Shell 快照",
+  js_repl: "JavaScript REPL",
+  js_repl_tools_only: "仅暴露 js_repl 工具",
+  web_search_request: "Web 搜索请求（旧）",
+  web_search_cached: "Web 搜索缓存（旧）",
+  search_tool: "搜索工具（旧）",
+  runtime_metrics: "运行时指标",
+  sqlite: "SQLite",
+  memory_tool: "记忆工具",
+  child_agents_md: "附加 AGENTS.md",
+  apply_patch_freeform: "自由格式 apply_patch",
+  use_linux_sandbox_bwrap: "Linux bwrap 沙箱",
+  request_rule: "审批请求规则",
+  experimental_windows_sandbox: "Windows 沙箱（旧）",
+  elevated_windows_sandbox: "提升权限 Windows 沙箱（旧）",
+  remote_models: "远程模型刷新",
+  powershell_utf8: "PowerShell UTF-8",
+  enable_request_compression: "启用请求压缩",
+  apps: "ChatGPT Apps 集成",
+  apps_mcp_gateway: "Apps MCP 网关",
+  skill_mcp_dependency_install: "Skill MCP 依赖安装",
+  skill_env_var_dependency_prompt: "Skill 环境变量依赖提示",
+  steer: "Steer 引导",
+  collaboration_modes: "协作模式",
+  personality: "人格风格",
+  responses_websockets: "Responses WebSocket",
+  responses_websockets_v2: "Responses WebSocket v2",
+};
+
+const FEATURE_DESCRIPTION_FALLBACKS_ZH: Record<string, string> = {
+  undo: "在每个回合创建一个幽灵提交（ghost commit）。",
+  shell_tool: "启用默认 shell 工具。",
+  unified_exec: "使用单一统一的 PTY 执行工具。",
+  shell_snapshot: "启用 shell 快照能力。",
+  js_repl: "启用基于持久化 Node 内核的 JavaScript REPL 工具。",
+  js_repl_tools_only: "仅将 js_repl 工具直接暴露给模型。",
+  web_search_request: "已弃用。请改用顶层 web_search。",
+  web_search_cached: "已弃用。请改用顶层 web_search。",
+  search_tool: "已移除的旧搜索开关，仅为向后兼容保留。",
+  runtime_metrics: "通过手动读取器启用运行时指标快照。",
+  sqlite: "将 rollout 元数据持久化到本地 SQLite 数据库。",
+  memory_tool: "启用启动记忆提取与记忆整合。",
+  child_agents_md: "向用户指令追加额外的 AGENTS.md 指南。",
+  apply_patch_freeform: "包含自由格式的 apply_patch 工具。",
+  use_linux_sandbox_bwrap: "使用基于 bubblewrap 的 Linux 沙箱流程。",
+  request_rule: "允许审批请求和执行规则提案。",
+  experimental_windows_sandbox: "已移除的 Windows 沙箱开关，仅为向后兼容保留。",
+  elevated_windows_sandbox: "已移除的提权 Windows 沙箱开关，仅为向后兼容保留。",
+  remote_models: "在 AppReady 前刷新远程模型。",
+  powershell_utf8: "在 PowerShell 中强制使用 UTF-8 输出。",
+  enable_request_compression: "压缩发送到 codex-backend 的流式请求体。",
+  apps: "启用 ChatGPT Apps 集成。",
+  apps_mcp_gateway: "通过配置的网关路由 Apps MCP 调用。",
+  skill_mcp_dependency_install: "允许提示并安装缺失的 MCP 依赖。",
+  skill_env_var_dependency_prompt: "为缺失的 skill 环境变量依赖进行提示。",
+  steer: "在 Codex 支持时启用回合引导能力。",
+  collaboration_modes: "启用协作模式预设。",
+  personality: "启用人格风格选择。",
+  responses_websockets: "默认使用 OpenAI 的 Responses API WebSocket 传输。",
+  responses_websockets_v2: "启用 Responses API WebSocket v2 模式。",
+};
+
+function formatFeatureLabel(feature: CodexFeature, zh: boolean): string {
+  if (zh) {
+    const translatedLabel = FEATURE_LABELS_ZH[feature.name];
+    if (translatedLabel) {
+      return translatedLabel;
+    }
+  }
   const displayName = feature.displayName?.trim();
   if (displayName) {
     return displayName;
@@ -59,7 +126,17 @@ function formatFeatureLabel(feature: CodexFeature): string {
     .join(" ");
 }
 
-function featureSubtitle(feature: CodexFeature): string {
+function featureSubtitle(
+  feature: CodexFeature,
+  zh: boolean,
+  t: (key: string, params?: Record<string, string>) => string,
+): string {
+  if (zh) {
+    const translatedFallback = FEATURE_DESCRIPTION_FALLBACKS_ZH[feature.name];
+    if (translatedFallback) {
+      return translatedFallback;
+    }
+  }
   if (feature.description?.trim()) {
     return feature.description;
   }
@@ -71,12 +148,12 @@ function featureSubtitle(feature: CodexFeature): string {
     return fallbackDescription;
   }
   if (feature.stage === "deprecated") {
-    return "Deprecated feature flag.";
+    return t("settings.features.feature.deprecated");
   }
   if (feature.stage === "removed") {
-    return "Legacy feature flag kept for backward compatibility.";
+    return t("settings.features.feature.removed");
   }
-  return `Feature key: features.${feature.name}`;
+  return t("settings.features.feature.key", { name: feature.name });
 }
 
 export function SettingsFeaturesSection({
@@ -93,33 +170,37 @@ export function SettingsFeaturesSection({
   onToggleCodexFeature,
   onUpdateAppSettings,
 }: SettingsFeaturesSectionProps) {
+  const { locale, t } = useI18n();
+  const zh = locale === "zh-CN";
   return (
-    <SettingsSection
-      title="Features"
-      subtitle="Manage stable and experimental Codex features."
-    >
-      <SettingsToggleRow
-        title="Config file"
-        subtitle={`Open the Codex config in ${fileManagerName()}.`}
-      >
+    <section className="settings-section">
+      <div className="settings-section-title">{t("settings.features.sectionTitle")}</div>
+      <div className="settings-section-subtitle">{t("settings.features.sectionSubtitle")}</div>
+      <div className="settings-toggle-row">
+        <div>
+          <div className="settings-toggle-title">{t("settings.features.configFile.title")}</div>
+          <div className="settings-toggle-subtitle">
+            {t("settings.features.configFile.subtitle", {
+              fileManager: fileManagerName(),
+            })}
+          </div>
+        </div>
         <button type="button" className="ghost" onClick={onOpenConfig}>
           {openInFileManagerLabel()}
         </button>
-      </SettingsToggleRow>
+      </div>
       {openConfigError && <div className="settings-help">{openConfigError}</div>}
-      <SettingsSubsection
-        title="Stable Features"
-        subtitle="Production-ready features enabled by default."
-      />
-      <SettingsToggleRow
-        title="Personality"
-        subtitle={
-          <>
-            Choose Codex communication style (writes top-level <code>personality</code> in
-            config.toml).
-          </>
-        }
-      >
+      <div className="settings-subsection-title">{t("settings.features.stable.title")}</div>
+      <div className="settings-subsection-subtitle">{t("settings.features.stable.subtitle")}</div>
+      <div className="settings-toggle-row">
+        <div>
+          <div className="settings-toggle-title">{t("settings.features.personality.title")}</div>
+          <div className="settings-toggle-subtitle">
+            {t("settings.features.personality.subtitle.before")}
+            <code>personality</code>
+            {t("settings.features.personality.subtitle.after")}
+          </div>
+        </div>
         <select
           id="features-personality-select"
           className="settings-select"
@@ -130,18 +211,20 @@ export function SettingsFeaturesSection({
               personality: event.target.value as (typeof appSettings)["personality"],
             })
           }
-          aria-label="Personality"
+          aria-label={t("settings.features.personality.title")}
         >
-          <option value="friendly">Friendly</option>
-          <option value="pragmatic">Pragmatic</option>
+          <option value="friendly">{t("settings.features.personality.option.friendly")}</option>
+          <option value="pragmatic">{t("settings.features.personality.option.pragmatic")}</option>
         </select>
-      </SettingsToggleRow>
-      <SettingsToggleRow
-        title="Pause queued messages when a response is required"
-        subtitle="Keep queued messages paused while Codex is waiting for plan accept/changes or your answers."
-      >
-        <SettingsToggleSwitch
-          pressed={appSettings.pauseQueuedMessagesWhenResponseRequired}
+      </div>
+      <div className="settings-toggle-row">
+        <div>
+          <div className="settings-toggle-title">{t("settings.features.pauseQueue.title")}</div>
+          <div className="settings-toggle-subtitle">{t("settings.features.pauseQueue.subtitle")}</div>
+        </div>
+        <button
+          type="button"
+          className={`settings-toggle ${appSettings.pauseQueuedMessagesWhenResponseRequired ? "on" : ""}`}
           onClick={() =>
             void onUpdateAppSettings({
               ...appSettings,
@@ -149,43 +232,54 @@ export function SettingsFeaturesSection({
                 !appSettings.pauseQueuedMessagesWhenResponseRequired,
             })
           }
-        />
-      </SettingsToggleRow>
-      {stableFeatures.map((feature) => (
-        <SettingsToggleRow
-          key={feature.name}
-          title={formatFeatureLabel(feature)}
-          subtitle={featureSubtitle(feature)}
+          aria-pressed={appSettings.pauseQueuedMessagesWhenResponseRequired}
         >
-          <SettingsToggleSwitch
-            pressed={feature.enabled}
+          <span className="settings-toggle-knob" />
+        </button>
+      </div>
+      {stableFeatures.map((feature) => (
+        <div className="settings-toggle-row" key={feature.name}>
+          <div>
+            <div className="settings-toggle-title">{formatFeatureLabel(feature, zh)}</div>
+            <div className="settings-toggle-subtitle">{featureSubtitle(feature, zh, t)}</div>
+          </div>
+          <button
+            type="button"
+            className={`settings-toggle ${feature.enabled ? "on" : ""}`}
             onClick={() => onToggleCodexFeature(feature)}
+            aria-pressed={feature.enabled}
             disabled={featureUpdatingKey === feature.name}
-          />
-        </SettingsToggleRow>
+          >
+            <span className="settings-toggle-knob" />
+          </button>
+        </div>
       ))}
       {hasFeatureWorkspace &&
         !featuresLoading &&
         !featureError &&
         stableFeatures.length === 0 && (
-        <div className="settings-help">No stable feature flags returned by Codex.</div>
+        <div className="settings-help">{t("settings.features.noStable")}</div>
       )}
-      <SettingsSubsection
-        title="Experimental Features"
-        subtitle="Preview and under-development features."
-      />
+      <div className="settings-subsection-title">{t("settings.features.experimental.title")}</div>
+      <div className="settings-subsection-subtitle">
+        {t("settings.features.experimental.subtitle")}
+      </div>
       {experimentalFeatures.map((feature) => (
-        <SettingsToggleRow
-          key={feature.name}
-          title={formatFeatureLabel(feature)}
-          subtitle={featureSubtitle(feature)}
-        >
-          <SettingsToggleSwitch
-            pressed={feature.enabled}
+        <div className="settings-toggle-row" key={feature.name}>
+          <div>
+            <div className="settings-toggle-title">{formatFeatureLabel(feature, zh)}</div>
+            <div className="settings-toggle-subtitle">{featureSubtitle(feature, zh, t)}</div>
+          </div>
+          <button
+            type="button"
+            className={`settings-toggle ${feature.enabled ? "on" : ""}`}
             onClick={() => onToggleCodexFeature(feature)}
+            aria-pressed={feature.enabled}
             disabled={featureUpdatingKey === feature.name}
-          />
-        </SettingsToggleRow>
+          >
+            <span className="settings-toggle-knob" />
+          </button>
+        </div>
       ))}
       {hasFeatureWorkspace &&
         !featuresLoading &&
@@ -193,18 +287,16 @@ export function SettingsFeaturesSection({
         hasDynamicFeatureRows &&
         experimentalFeatures.length === 0 && (
           <div className="settings-help">
-            No preview or under-development feature flags returned by Codex.
+            {t("settings.features.noExperimental")}
           </div>
         )}
       {featuresLoading && (
-        <div className="settings-help">Loading Codex feature flags...</div>
+        <div className="settings-help">{t("settings.features.loading")}</div>
       )}
       {!hasFeatureWorkspace && !featuresLoading && (
-        <div className="settings-help">
-          Connect a workspace to load Codex feature flags.
-        </div>
+        <div className="settings-help">{t("settings.features.connectWorkspace")}</div>
       )}
       {featureError && <div className="settings-help">{featureError}</div>}
-    </SettingsSection>
+    </section>
   );
 }
diff --git a/src/features/settings/components/sections/SettingsGitSection.tsx b/src/features/settings/components/sections/SettingsGitSection.tsx
index a99887221..78ee6a6f8 100644
--- a/src/features/settings/components/sections/SettingsGitSection.tsx
+++ b/src/features/settings/components/sections/SettingsGitSection.tsx
@@ -1,9 +1,5 @@
 import type { AppSettings, ModelOption } from "@/types";
-import {
-  SettingsSection,
-  SettingsToggleRow,
-  SettingsToggleSwitch,
-} from "@/features/design-system/components/settings/SettingsPrimitives";
+import { useI18n } from "@/i18n/useI18n";
 
 type SettingsGitSectionProps = {
   appSettings: AppSettings;
@@ -28,44 +24,61 @@ export function SettingsGitSection({
   onSaveCommitMessagePrompt,
   onResetCommitMessagePrompt,
 }: SettingsGitSectionProps) {
+  const { t } = useI18n();
   return (
-    <SettingsSection
-      title="Git"
-      subtitle="Manage how diffs are loaded in the Git sidebar."
-    >
-      <SettingsToggleRow
-        title="Preload git diffs"
-        subtitle="Make viewing git diff faster."
-      >
-        <SettingsToggleSwitch
-          pressed={appSettings.preloadGitDiffs}
+    <section className="settings-section">
+      <div className="settings-section-title">Git</div>
+      <div className="settings-section-subtitle">
+        {t("settings.git.sectionSubtitle")}
+      </div>
+      <div className="settings-toggle-row">
+        <div>
+          <div className="settings-toggle-title">{t("settings.git.preloadDiffs.title")}</div>
+          <div className="settings-toggle-subtitle">
+            {t("settings.git.preloadDiffs.subtitle")}
+          </div>
+        </div>
+        <button
+          type="button"
+          className={`settings-toggle ${appSettings.preloadGitDiffs ? "on" : ""}`}
           onClick={() =>
             void onUpdateAppSettings({
               ...appSettings,
               preloadGitDiffs: !appSettings.preloadGitDiffs,
             })
           }
-        />
-      </SettingsToggleRow>
-      <SettingsToggleRow
-        title="Ignore whitespace changes"
-        subtitle="Hides whitespace-only changes in local and commit diffs."
-      >
-        <SettingsToggleSwitch
-          pressed={appSettings.gitDiffIgnoreWhitespaceChanges}
+          aria-pressed={appSettings.preloadGitDiffs}
+        >
+          <span className="settings-toggle-knob" />
+        </button>
+      </div>
+      <div className="settings-toggle-row">
+        <div>
+          <div className="settings-toggle-title">{t("settings.git.ignoreWhitespace.title")}</div>
+          <div className="settings-toggle-subtitle">
+            {t("settings.git.ignoreWhitespace.subtitle")}
+          </div>
+        </div>
+        <button
+          type="button"
+          className={`settings-toggle ${appSettings.gitDiffIgnoreWhitespaceChanges ? "on" : ""}`}
           onClick={() =>
             void onUpdateAppSettings({
               ...appSettings,
               gitDiffIgnoreWhitespaceChanges: !appSettings.gitDiffIgnoreWhitespaceChanges,
             })
           }
-        />
-      </SettingsToggleRow>
+          aria-pressed={appSettings.gitDiffIgnoreWhitespaceChanges}
+        >
+          <span className="settings-toggle-knob" />
+        </button>
+      </div>
       <div className="settings-field">
-        <div className="settings-field-label">Commit message prompt</div>
+        <div className="settings-field-label">{t("settings.git.commitPrompt.label")}</div>
         <div className="settings-help">
-          Used when generating commit messages. Include <code>{"{diff}"}</code> to insert the
-          git diff.
+          {t("settings.git.commitPrompt.help.before")}
+          <code>{"{diff}"}</code>
+          {t("settings.git.commitPrompt.help.after")}
         </div>
         <textarea
           className="settings-agents-textarea"
@@ -83,7 +96,7 @@ export function SettingsGitSection({
             }}
             disabled={commitMessagePromptSaving || !commitMessagePromptDirty}
           >
-            Reset
+            {t("settings.git.commitPrompt.reset")}
           </button>
           <button
             type="button"
@@ -93,18 +106,19 @@ export function SettingsGitSection({
             }}
             disabled={commitMessagePromptSaving || !commitMessagePromptDirty}
           >
-            {commitMessagePromptSaving ? "Saving..." : "Save"}
+            {commitMessagePromptSaving
+              ? t("settings.git.commitPrompt.saving")
+              : t("settings.git.commitPrompt.save")}
           </button>
         </div>
       </div>
       {models.length > 0 && (
         <div className="settings-field">
           <label className="settings-field-label" htmlFor="commit-message-model-select">
-            Commit message model
+            {t("settings.git.commitModel.label")}
           </label>
           <div className="settings-help">
-            The model used when generating commit messages. Leave on default to use the
-            workspace model.
+            {t("settings.git.commitModel.help")}
           </div>
           <select
             id="commit-message-model-select"
@@ -118,7 +132,7 @@ export function SettingsGitSection({
               });
             }}
           >
-            <option value="">Default</option>
+            <option value="">{t("settings.git.commitModel.default")}</option>
             {models.map((model) => (
               <option key={model.id} value={model.model}>
                 {model.displayName?.trim() || model.model}
@@ -127,6 +141,6 @@ export function SettingsGitSection({
           </select>
         </div>
       )}
-    </SettingsSection>
+    </section>
   );
 }
diff --git a/src/features/settings/components/sections/SettingsOpenAppsSection.tsx b/src/features/settings/components/sections/SettingsOpenAppsSection.tsx
index c3c37ffc6..e6110bbcc 100644
--- a/src/features/settings/components/sections/SettingsOpenAppsSection.tsx
+++ b/src/features/settings/components/sections/SettingsOpenAppsSection.tsx
@@ -1,7 +1,6 @@
 import ChevronDown from "lucide-react/dist/esm/icons/chevron-down";
 import ChevronUp from "lucide-react/dist/esm/icons/chevron-up";
 import Trash2 from "lucide-react/dist/esm/icons/trash-2";
-import { SettingsSection } from "@/features/design-system/components/settings/SettingsPrimitives";
 import type { OpenAppTarget } from "@/types";
 import {
   fileManagerName,
@@ -12,6 +11,7 @@ import {
   getKnownOpenAppIcon,
 } from "@app/utils/openAppIcons";
 import type { OpenAppDraft } from "@settings/components/settingsTypes";
+import { useI18n } from "@/i18n/useI18n";
 
 type SettingsOpenAppsSectionProps = {
   openAppDrafts: OpenAppDraft[];
@@ -40,11 +40,11 @@ export function SettingsOpenAppsSection({
   onAddOpenApp,
   onSelectOpenAppDefault,
 }: SettingsOpenAppsSectionProps) {
+  const { t } = useI18n();
   return (
-    <SettingsSection
-      title="Open in"
-      subtitle="Customize the Open in menu shown in the title bar and file previews."
-    >
+    <section className="settings-section">
+      <div className="settings-section-title">{t("settings.openApps.sectionTitle")}</div>
+      <div className="settings-section-subtitle">{t("settings.openApps.sectionSubtitle")}</div>
       <div className="settings-open-apps">
         {openAppDrafts.map((target, index) => {
           const iconSrc =
@@ -55,12 +55,12 @@ export function SettingsOpenAppsSection({
             target.kind !== "command" || Boolean(target.command?.trim());
           const isComplete = labelValid && appNameValid && commandValid;
           const incompleteHint = !labelValid
-            ? "Label required"
+            ? t("settings.openApps.validation.labelRequired")
             : target.kind === "app"
-              ? "App name required"
+              ? t("settings.openApps.validation.appNameRequired")
               : target.kind === "command"
-                ? "Command required"
-                : "Complete required fields";
+                ? t("settings.openApps.validation.commandRequired")
+                : t("settings.openApps.validation.completeRequired");
 
           return (
             <div
@@ -78,11 +78,11 @@ export function SettingsOpenAppsSection({
               </div>
               <div className="settings-open-app-fields">
                 <label className="settings-open-app-field settings-open-app-field--label">
-                  <span className="settings-visually-hidden">Label</span>
+                  <span className="settings-visually-hidden">{t("settings.openApps.field.label")}</span>
                   <input
                     className="settings-input settings-input--compact settings-open-app-input settings-open-app-input--label"
                     value={target.label}
-                    placeholder="Label"
+                    placeholder={t("settings.openApps.field.label")}
                     onChange={(event) =>
                       onOpenAppDraftChange(index, {
                         label: event.target.value,
@@ -94,27 +94,27 @@ export function SettingsOpenAppsSection({
                   />
                 </label>
                 <label className="settings-open-app-field settings-open-app-field--type">
-                  <span className="settings-visually-hidden">Type</span>
+                  <span className="settings-visually-hidden">{t("settings.openApps.field.type")}</span>
                   <select
                     className="settings-select settings-select--compact settings-open-app-kind"
                     value={target.kind}
                     onChange={(event) =>
                       onOpenAppKindChange(index, event.target.value as OpenAppTarget["kind"])
                     }
-                    aria-label={`Open app type ${index + 1}`}
+                    aria-label={t("settings.openApps.field.typeAria", { index: index + 1 })}
                   >
-                    <option value="app">App</option>
-                    <option value="command">Command</option>
+                    <option value="app">{t("settings.openApps.option.app")}</option>
+                    <option value="command">{t("settings.openApps.option.command")}</option>
                     <option value="finder">{fileManagerName()}</option>
                   </select>
                 </label>
                 {target.kind === "app" && (
                   <label className="settings-open-app-field settings-open-app-field--appname">
-                    <span className="settings-visually-hidden">App name</span>
+                    <span className="settings-visually-hidden">{t("settings.openApps.field.appName")}</span>
                     <input
                       className="settings-input settings-input--compact settings-open-app-input settings-open-app-input--appname"
                       value={target.appName ?? ""}
-                      placeholder="App name"
+                      placeholder={t("settings.openApps.field.appName")}
                       onChange={(event) =>
                         onOpenAppDraftChange(index, {
                           appName: event.target.value,
@@ -128,11 +128,11 @@ export function SettingsOpenAppsSection({
                 )}
                 {target.kind === "command" && (
                   <label className="settings-open-app-field settings-open-app-field--command">
-                    <span className="settings-visually-hidden">Command</span>
+                    <span className="settings-visually-hidden">{t("settings.openApps.field.command")}</span>
                     <input
                       className="settings-input settings-input--compact settings-open-app-input settings-open-app-input--command"
                       value={target.command ?? ""}
-                      placeholder="Command"
+                      placeholder={t("settings.openApps.field.command")}
                       onChange={(event) =>
                         onOpenAppDraftChange(index, {
                           command: event.target.value,
@@ -146,11 +146,11 @@ export function SettingsOpenAppsSection({
                 )}
                 {target.kind !== "finder" && (
                   <label className="settings-open-app-field settings-open-app-field--args">
-                    <span className="settings-visually-hidden">Args</span>
+                    <span className="settings-visually-hidden">{t("settings.openApps.field.args")}</span>
                     <input
                       className="settings-input settings-input--compact settings-open-app-input settings-open-app-input--args"
                       value={target.argsText}
-                      placeholder="Args"
+                      placeholder={t("settings.openApps.field.args")}
                       onChange={(event) =>
                         onOpenAppDraftChange(index, {
                           argsText: event.target.value,
@@ -169,7 +169,7 @@ export function SettingsOpenAppsSection({
                     title={incompleteHint}
                     aria-label={incompleteHint}
                   >
-                    Incomplete
+                    {t("settings.openApps.status.incomplete")}
                   </span>
                 )}
                 <label className="settings-open-app-default">
@@ -180,7 +180,7 @@ export function SettingsOpenAppsSection({
                     onChange={() => onSelectOpenAppDefault(target.id)}
                     disabled={!isComplete}
                   />
-                  Default
+                  {t("settings.openApps.default")}
                 </label>
                 <div className="settings-open-app-order">
                   <button
@@ -188,7 +188,7 @@ export function SettingsOpenAppsSection({
                     className="ghost icon-button"
                     onClick={() => onMoveOpenApp(index, "up")}
                     disabled={index === 0}
-                    aria-label="Move up"
+                    aria-label={t("settings.openApps.moveUp")}
                   >
                     <ChevronUp aria-hidden />
                   </button>
@@ -197,7 +197,7 @@ export function SettingsOpenAppsSection({
                     className="ghost icon-button"
                     onClick={() => onMoveOpenApp(index, "down")}
                     disabled={index === openAppDrafts.length - 1}
-                    aria-label="Move down"
+                    aria-label={t("settings.openApps.moveDown")}
                   >
                     <ChevronDown aria-hidden />
                   </button>
@@ -207,8 +207,8 @@ export function SettingsOpenAppsSection({
                   className="ghost icon-button"
                   onClick={() => onDeleteOpenApp(index)}
                   disabled={openAppDrafts.length <= 1}
-                  aria-label="Remove app"
-                  title="Remove app"
+                  aria-label={t("settings.openApps.remove")}
+                  title={t("settings.openApps.remove")}
                 >
                   <Trash2 aria-hidden />
                 </button>
@@ -219,15 +219,15 @@ export function SettingsOpenAppsSection({
       </div>
       <div className="settings-open-app-footer">
         <button type="button" className="ghost" onClick={onAddOpenApp}>
-          Add app
+          {t("settings.openApps.add")}
         </button>
         <div className="settings-help">
-          Commands receive the selected path as the final argument.{" "}
+          {t("settings.openApps.help.commandsPrefix")}
           {isMacPlatform()
-            ? "Apps open via `open -a` with optional args."
-            : "Apps run as an executable with optional args."}
+            ? t("settings.openApps.help.apps.mac")
+            : t("settings.openApps.help.apps.other")}
         </div>
       </div>
-    </SettingsSection>
+    </section>
   );
 }
diff --git a/src/features/settings/components/sections/SettingsProjectsSection.tsx b/src/features/settings/components/sections/SettingsProjectsSection.tsx
index e95cc8cd2..900678347 100644
--- a/src/features/settings/components/sections/SettingsProjectsSection.tsx
+++ b/src/features/settings/components/sections/SettingsProjectsSection.tsx
@@ -2,11 +2,8 @@ import ChevronDown from "lucide-react/dist/esm/icons/chevron-down";
 import ChevronUp from "lucide-react/dist/esm/icons/chevron-up";
 import Trash2 from "lucide-react/dist/esm/icons/trash-2";
 import type { Dispatch, SetStateAction } from "react";
-import {
-  SettingsSection,
-  SettingsSubsection,
-} from "@/features/design-system/components/settings/SettingsPrimitives";
 import type { WorkspaceGroup, WorkspaceInfo } from "@/types";
+import { useI18n } from "@/i18n/useI18n";
 
 type GroupedWorkspaces = Array<{
   id: string | null;
@@ -57,21 +54,19 @@ export function SettingsProjectsSection({
   onMoveWorkspace,
   onDeleteWorkspace,
 }: SettingsProjectsSectionProps) {
+  const { t } = useI18n();
   return (
-    <SettingsSection
-      title="Projects"
-      subtitle="Group related workspaces and reorder projects within each group."
-    >
-      <SettingsSubsection
-        title="Groups"
-        subtitle="Create group labels for related repositories."
-      />
+    <section className="settings-section">
+      <div className="settings-section-title">{t("settings.projects.sectionTitle")}</div>
+      <div className="settings-section-subtitle">{t("settings.projects.sectionSubtitle")}</div>
+      <div className="settings-subsection-title">{t("settings.projects.groups.title")}</div>
+      <div className="settings-subsection-subtitle">{t("settings.projects.groups.subtitle")}</div>
       <div className="settings-groups">
         <div className="settings-group-create">
           <input
             className="settings-input settings-input--compact"
             value={newGroupName}
-            placeholder="New group name"
+            placeholder={t("settings.projects.groups.newPlaceholder")}
             onChange={(event) => onSetNewGroupName(event.target.value)}
             onKeyDown={(event) => {
               if (event.key === "Enter" && canCreateGroup) {
@@ -88,7 +83,7 @@ export function SettingsProjectsSection({
             }}
             disabled={!canCreateGroup}
           >
-            Add group
+            {t("settings.projects.groups.add")}
           </button>
         </div>
         {groupError && <div className="settings-group-error">{groupError}</div>}
@@ -117,13 +112,13 @@ export function SettingsProjectsSection({
                     }}
                   />
                   <div className="settings-group-copies">
-                    <div className="settings-group-copies-label">Copies folder</div>
+                    <div className="settings-group-copies-label">{t("settings.projects.groups.copiesFolder")}</div>
                     <div className="settings-group-copies-row">
                       <div
                         className={`settings-group-copies-path${group.copiesFolder ? "" : " empty"}`}
                         title={group.copiesFolder ?? ""}
                       >
-                        {group.copiesFolder ?? "Not set"}
+                        {group.copiesFolder ?? t("settings.projects.groups.copiesFolder.notSet")}
                       </div>
                       <button
                         type="button"
@@ -132,7 +127,7 @@ export function SettingsProjectsSection({
                           void onChooseGroupCopiesFolder(group);
                         }}
                       >
-                        Choose…
+                        {t("settings.projects.groups.choose")}
                       </button>
                       <button
                         type="button"
@@ -142,7 +137,7 @@ export function SettingsProjectsSection({
                         }}
                         disabled={!group.copiesFolder}
                       >
-                        Clear
+                        {t("settings.projects.groups.clear")}
                       </button>
                     </div>
                   </div>
@@ -155,7 +150,7 @@ export function SettingsProjectsSection({
                       void onMoveWorkspaceGroup(group.id, "up");
                     }}
                     disabled={index === 0}
-                    aria-label="Move group up"
+                    aria-label={t("settings.projects.groups.moveUp")}
                   >
                     <ChevronUp aria-hidden />
                   </button>
@@ -166,7 +161,7 @@ export function SettingsProjectsSection({
                       void onMoveWorkspaceGroup(group.id, "down");
                     }}
                     disabled={index === workspaceGroups.length - 1}
-                    aria-label="Move group down"
+                    aria-label={t("settings.projects.groups.moveDown")}
                   >
                     <ChevronDown aria-hidden />
                   </button>
@@ -176,7 +171,7 @@ export function SettingsProjectsSection({
                     onClick={() => {
                       void onDeleteGroup(group);
                     }}
-                    aria-label="Delete group"
+                    aria-label={t("settings.projects.groups.delete")}
                   >
                     <Trash2 aria-hidden />
                   </button>
@@ -185,13 +180,11 @@ export function SettingsProjectsSection({
             ))}
           </div>
         ) : (
-          <div className="settings-empty">No groups yet.</div>
+          <div className="settings-empty">{t("settings.projects.groups.empty")}</div>
         )}
       </div>
-      <SettingsSubsection
-        title="Projects"
-        subtitle="Assign projects to groups and adjust their order."
-      />
+      <div className="settings-subsection-title">{t("settings.projects.list.title")}</div>
+      <div className="settings-subsection-subtitle">{t("settings.projects.list.subtitle")}</div>
       <div className="settings-projects">
         {groupedWorkspaces.map((group) => (
           <div key={group.id ?? "ungrouped"} className="settings-project-group">
@@ -229,7 +222,7 @@ export function SettingsProjectsSection({
                       className="ghost icon-button"
                       onClick={() => onMoveWorkspace(workspace.id, "up")}
                       disabled={index === 0}
-                      aria-label="Move project up"
+                      aria-label={t("settings.projects.list.moveUp")}
                     >
                       <ChevronUp aria-hidden />
                     </button>
@@ -238,7 +231,7 @@ export function SettingsProjectsSection({
                       className="ghost icon-button"
                       onClick={() => onMoveWorkspace(workspace.id, "down")}
                       disabled={index === group.workspaces.length - 1}
-                      aria-label="Move project down"
+                      aria-label={t("settings.projects.list.moveDown")}
                     >
                       <ChevronDown aria-hidden />
                     </button>
@@ -246,7 +239,7 @@ export function SettingsProjectsSection({
                       type="button"
                       className="ghost icon-button"
                       onClick={() => onDeleteWorkspace(workspace.id)}
-                      aria-label="Delete project"
+                      aria-label={t("settings.projects.list.delete")}
                     >
                       <Trash2 aria-hidden />
                     </button>
@@ -256,8 +249,10 @@ export function SettingsProjectsSection({
             })}
           </div>
         ))}
-        {projects.length === 0 && <div className="settings-empty">No projects yet.</div>}
+        {projects.length === 0 && (
+          <div className="settings-empty">{t("settings.projects.list.empty")}</div>
+        )}
       </div>
-    </SettingsSection>
+    </section>
   );
 }
diff --git a/src/features/settings/components/sections/SettingsServerSection.tsx b/src/features/settings/components/sections/SettingsServerSection.tsx
index 7a1139d6b..4b9622e74 100644
--- a/src/features/settings/components/sections/SettingsServerSection.tsx
+++ b/src/features/settings/components/sections/SettingsServerSection.tsx
@@ -8,11 +8,7 @@ import type {
   TcpDaemonStatus,
 } from "@/types";
 import { ModalShell } from "@/features/design-system/components/modal/ModalShell";
-import {
-  SettingsSection,
-  SettingsToggleRow,
-  SettingsToggleSwitch,
-} from "@/features/design-system/components/settings/SettingsPrimitives";
+import { useI18n } from "@/i18n/useI18n";
 
 type AddRemoteBackendDraft = {
   name: string;
@@ -107,6 +103,8 @@ export function SettingsServerSection({
   onTcpDaemonStatus,
   onMobileConnectTest,
 }: SettingsServerSectionProps) {
+  const { locale, t } = useI18n();
+  const zh = locale === "zh-CN";
   const [pendingDeleteRemoteId, setPendingDeleteRemoteId] = useState<string | null>(
     null,
   );
@@ -130,13 +128,19 @@ export function SettingsServerSection({
     }
     if (tcpDaemonStatus.state === "running") {
       return tcpDaemonStatus.pid
-        ? `Mobile daemon is running (pid ${tcpDaemonStatus.pid}) on ${tcpDaemonStatus.listenAddr ?? "configured listen address"}.`
-        : `Mobile daemon is running on ${tcpDaemonStatus.listenAddr ?? "configured listen address"}.`;
+        ? zh
+          ? `移动端守护进程正在运行（pid ${tcpDaemonStatus.pid}），监听 ${tcpDaemonStatus.listenAddr ?? "已配置监听地址"}。`
+          : `Mobile daemon is running (pid ${tcpDaemonStatus.pid}) on ${tcpDaemonStatus.listenAddr ?? "configured listen address"}.`
+        : zh
+          ? `移动端守护进程正在运行，监听 ${tcpDaemonStatus.listenAddr ?? "已配置监听地址"}。`
+          : `Mobile daemon is running on ${tcpDaemonStatus.listenAddr ?? "configured listen address"}.`;
     }
     if (tcpDaemonStatus.state === "error") {
-      return tcpDaemonStatus.lastError ?? "Mobile daemon is in an error state.";
+      return tcpDaemonStatus.lastError ?? t("settings.server.mobileDaemon.errorFallback");
     }
-    return `Mobile daemon is stopped${tcpDaemonStatus.listenAddr ? ` (${tcpDaemonStatus.listenAddr})` : ""}.`;
+    return zh
+      ? `移动端守护进程已停止${tcpDaemonStatus.listenAddr ? `（${tcpDaemonStatus.listenAddr}）` : ""}。`
+      : `Mobile daemon is stopped${tcpDaemonStatus.listenAddr ? ` (${tcpDaemonStatus.listenAddr})` : ""}.`;
   })();
 
   const openAddRemoteModal = () => {
@@ -170,7 +174,9 @@ export function SettingsServerSection({
         });
         setAddRemoteOpen(false);
       } catch (error) {
-        setAddRemoteError(error instanceof Error ? error.message : "Unable to add remote.");
+        setAddRemoteError(
+          error instanceof Error ? error.message : t("settings.server.addRemote.error"),
+        );
       } finally {
         setAddRemoteBusy(false);
       }
@@ -178,19 +184,18 @@ export function SettingsServerSection({
   };
 
   return (
-    <SettingsSection
-      title="Server"
-      subtitle={
-        isMobileSimplified
-          ? "Configure TCP host/token from your desktop setup, then run a connection test."
-          : "Configure how CodexMonitor exposes TCP backend access for mobile and remote clients. Desktop usage remains local unless you explicitly connect through remote mode."
-      }
-    >
+    <section className="settings-section">
+      <div className="settings-section-title">{t("settings.server.sectionTitle")}</div>
+      <div className="settings-section-subtitle">
+        {isMobileSimplified
+          ? t("settings.server.sectionSubtitle.mobile")
+          : t("settings.server.sectionSubtitle.desktop")}
+      </div>
 
       {!isMobileSimplified && (
         <div className="settings-field">
           <label className="settings-field-label" htmlFor="backend-mode">
-            Backend mode
+            {t("settings.server.backendMode.label")}
           </label>
           <select
             id="backend-mode"
@@ -203,12 +208,11 @@ export function SettingsServerSection({
               })
             }
           >
-            <option value="local">Local (default)</option>
-            <option value="remote">Remote (daemon)</option>
+            <option value="local">{t("settings.server.backendMode.option.local")}</option>
+            <option value="remote">{t("settings.server.backendMode.option.remote")}</option>
           </select>
           <div className="settings-help">
-            Local keeps desktop requests in-process. Remote routes desktop requests through the same
-            TCP transport path used by mobile clients.
+            {t("settings.server.backendMode.help")}
           </div>
         </div>
       )}
@@ -217,8 +221,12 @@ export function SettingsServerSection({
         {isMobileSimplified && (
           <>
             <div className="settings-field">
-              <div className="settings-field-label">Saved remotes</div>
-              <div className="settings-mobile-remotes" role="list" aria-label="Saved remotes">
+              <div className="settings-field-label">{t("settings.server.savedRemotes.label")}</div>
+              <div
+                className="settings-mobile-remotes"
+                role="list"
+                aria-label={t("settings.server.savedRemotes.label")}
+              >
                 {remoteBackends.map((entry, index) => {
                   const isActive = entry.id === activeRemoteBackendId;
                   return (
@@ -230,14 +238,18 @@ export function SettingsServerSection({
                       <div className="settings-mobile-remote-main">
                         <div className="settings-mobile-remote-name-row">
                           <div className="settings-mobile-remote-name">{entry.name}</div>
-                          {isActive && <span className="settings-mobile-remote-badge">Active</span>}
+                          {isActive && (
+                            <span className="settings-mobile-remote-badge">
+                              {t("settings.server.savedRemotes.active")}
+                            </span>
+                          )}
                         </div>
                         <div className="settings-mobile-remote-meta">TCP · {entry.host}</div>
                         <div className="settings-mobile-remote-last">
-                          Last connected:{" "}
+                          {t("settings.server.savedRemotes.lastConnected")}:{" "}
                           {typeof entry.lastConnectedAtMs === "number"
                             ? new Date(entry.lastConnectedAtMs).toLocaleString()
-                            : "Never"}
+                            : t("settings.server.savedRemotes.never")}
                         </div>
                       </div>
                       <div className="settings-mobile-remote-actions">
@@ -248,9 +260,11 @@ export function SettingsServerSection({
                             void onSelectRemoteBackend(entry.id);
                           }}
                           disabled={isActive}
-                          aria-label={`Use ${entry.name} remote`}
+                          aria-label={t("settings.server.savedRemotes.useAria", { name: entry.name })}
                         >
-                          {isActive ? "Using" : "Use"}
+                          {isActive
+                            ? t("settings.server.savedRemotes.using")
+                            : t("settings.server.savedRemotes.use")}
                         </button>
                         <button
                           type="button"
@@ -259,7 +273,7 @@ export function SettingsServerSection({
                             void onMoveRemoteBackend(entry.id, "up");
                           }}
                           disabled={index === 0}
-                          aria-label={`Move ${entry.name} up`}
+                          aria-label={t("settings.server.savedRemotes.moveUpAria", { name: entry.name })}
                         >
                           ↑
                         </button>
@@ -270,7 +284,7 @@ export function SettingsServerSection({
                             void onMoveRemoteBackend(entry.id, "down");
                           }}
                           disabled={index === remoteBackends.length - 1}
-                          aria-label={`Move ${entry.name} down`}
+                          aria-label={t("settings.server.savedRemotes.moveDownAria", { name: entry.name })}
                         >
                           ↓
                         </button>
@@ -280,9 +294,9 @@ export function SettingsServerSection({
                           onClick={() => {
                             setPendingDeleteRemoteId(entry.id);
                           }}
-                          aria-label={`Delete ${entry.name}`}
+                          aria-label={t("settings.server.savedRemotes.deleteAria", { name: entry.name })}
                         >
-                          Delete
+                          {t("settings.server.savedRemotes.delete")}
                         </button>
                       </div>
                     </div>
@@ -295,7 +309,7 @@ export function SettingsServerSection({
                   className="button settings-button-compact"
                   onClick={openAddRemoteModal}
                 >
-                  Add remote
+                  {t("settings.server.savedRemotes.add")}
                 </button>
               </div>
               {remoteStatusText && (
@@ -304,19 +318,19 @@ export function SettingsServerSection({
                 </div>
               )}
               <div className="settings-help">
-                Switch the active remote here. The fields below edit the active entry.
+                {t("settings.server.savedRemotes.help")}
               </div>
             </div>
 
             <div className="settings-field">
               <label className="settings-field-label" htmlFor="mobile-remote-name">
-                Remote name
+                {t("settings.server.remoteName.label")}
               </label>
               <input
                 id="mobile-remote-name"
                 className="settings-input settings-input--compact"
                 value={remoteNameDraft}
-                placeholder="My desktop"
+                placeholder={t("settings.server.remoteName.placeholder")}
                 onChange={(event) => onSetRemoteNameDraft(event.target.value)}
                 onBlur={() => {
                   void onCommitRemoteName();
@@ -334,24 +348,31 @@ export function SettingsServerSection({
         )}
 
         {!isMobileSimplified && (
-          <SettingsToggleRow
-            title="Keep daemon running after app closes"
-            subtitle="If disabled, CodexMonitor stops managed TCP daemon processes before exit."
-          >
-            <SettingsToggleSwitch
-              pressed={appSettings.keepDaemonRunningAfterAppClose}
+          <div className="settings-toggle-row">
+            <div>
+              <div className="settings-toggle-title">{t("settings.server.keepDaemon.title")}</div>
+              <div className="settings-toggle-subtitle">
+                {t("settings.server.keepDaemon.subtitle")}
+              </div>
+            </div>
+            <button
+              type="button"
+              className={`settings-toggle ${appSettings.keepDaemonRunningAfterAppClose ? "on" : ""}`}
               onClick={() =>
                 void onUpdateAppSettings({
                   ...appSettings,
                   keepDaemonRunningAfterAppClose: !appSettings.keepDaemonRunningAfterAppClose,
                 })
               }
-            />
-          </SettingsToggleRow>
+              aria-pressed={appSettings.keepDaemonRunningAfterAppClose}
+            >
+              <span className="settings-toggle-knob" />
+            </button>
+          </div>
         )}
 
         <div className="settings-field">
-          <div className="settings-field-label">Remote backend</div>
+          <div className="settings-field-label">{t("settings.server.remoteBackend.label")}</div>
           <div className="settings-field-row">
             <input
               className="settings-input settings-input--compact"
@@ -367,13 +388,13 @@ export function SettingsServerSection({
                   void onCommitRemoteHost();
                 }
               }}
-              aria-label="Remote backend host"
+              aria-label={t("settings.server.remoteBackend.hostAria")}
             />
             <input
               type="password"
               className="settings-input settings-input--compact"
               value={remoteTokenDraft}
-              placeholder="Token (required)"
+              placeholder={t("settings.server.remoteBackend.tokenPlaceholder")}
               onChange={(event) => onSetRemoteTokenDraft(event.target.value)}
               onBlur={() => {
                 void onCommitRemoteToken();
@@ -384,20 +405,24 @@ export function SettingsServerSection({
                   void onCommitRemoteToken();
                 }
               }}
-              aria-label="Remote backend token"
+              aria-label={t("settings.server.remoteBackend.tokenAria")}
             />
           </div>
           {remoteHostError && <div className="settings-help settings-help-error">{remoteHostError}</div>}
           <div className="settings-help">
             {isMobileSimplified
-              ? "Use the Tailscale host from your desktop CodexMonitor app (Server section), for example `macbook.your-tailnet.ts.net:4732`."
-              : "This host/token is used by mobile clients and desktop remote-mode testing."}
+              ? (zh
+                ? "使用桌面端 CodexMonitor（Server 分区）里的 Tailscale 主机，例如 `macbook.your-tailnet.ts.net:4732`。"
+                : "Use the Tailscale host from your desktop CodexMonitor app (Server section), for example `macbook.your-tailnet.ts.net:4732`.")
+              : (zh
+                ? "此主机/令牌用于移动端客户端和桌面端远程模式测试。"
+                : "This host/token is used by mobile clients and desktop remote-mode testing.")}
           </div>
         </div>
 
         {isMobileSimplified && (
           <div className="settings-field">
-            <div className="settings-field-label">Connection test</div>
+            <div className="settings-field-label">{t("settings.server.connectionTest.label")}</div>
             <div className="settings-field-row">
               <button
                 type="button"
@@ -405,7 +430,9 @@ export function SettingsServerSection({
                 onClick={onMobileConnectTest}
                 disabled={mobileConnectBusy}
               >
-                {mobileConnectBusy ? "Connecting..." : "Connect & test"}
+                {mobileConnectBusy
+                  ? t("settings.server.connectionTest.connecting")
+                  : t("settings.server.connectionTest.button")}
               </button>
             </div>
             {mobileConnectStatusText && (
@@ -414,15 +441,14 @@ export function SettingsServerSection({
               </div>
             )}
             <div className="settings-help">
-              Make sure your desktop app daemon is running and reachable on Tailscale, then retry
-              this test.
+              {t("settings.server.connectionTest.help")}
             </div>
           </div>
         )}
 
         {!isMobileSimplified && (
           <div className="settings-field">
-            <div className="settings-field-label">Mobile access daemon</div>
+            <div className="settings-field-label">{t("settings.server.mobileDaemon.label")}</div>
             <div className="settings-field-row">
               <button
                 type="button"
@@ -432,7 +458,9 @@ export function SettingsServerSection({
                 }}
                 disabled={tcpDaemonBusyAction !== null}
               >
-                {tcpDaemonBusyAction === "start" ? "Starting..." : "Start daemon"}
+                {tcpDaemonBusyAction === "start"
+                  ? t("settings.server.mobileDaemon.starting")
+                  : t("settings.server.mobileDaemon.start")}
               </button>
               <button
                 type="button"
@@ -442,7 +470,9 @@ export function SettingsServerSection({
                 }}
                 disabled={tcpDaemonBusyAction !== null}
               >
-                {tcpDaemonBusyAction === "stop" ? "Stopping..." : "Stop daemon"}
+                {tcpDaemonBusyAction === "stop"
+                  ? t("settings.server.mobileDaemon.stopping")
+                  : t("settings.server.mobileDaemon.stop")}
               </button>
               <button
                 type="button"
@@ -452,25 +482,29 @@ export function SettingsServerSection({
                 }}
                 disabled={tcpDaemonBusyAction !== null}
               >
-                {tcpDaemonBusyAction === "status" ? "Refreshing..." : "Refresh status"}
+                {tcpDaemonBusyAction === "status"
+                  ? t("settings.server.mobileDaemon.refreshing")
+                  : t("settings.server.mobileDaemon.refresh")}
               </button>
             </div>
             {tcpRunnerStatusText && <div className="settings-help">{tcpRunnerStatusText}</div>}
             {tcpDaemonStatus?.startedAtMs && (
               <div className="settings-help">
-                Started at: {new Date(tcpDaemonStatus.startedAtMs).toLocaleString()}
+                {t("settings.server.mobileDaemon.startedAt")}:{" "}
+                {new Date(tcpDaemonStatus.startedAtMs).toLocaleString()}
               </div>
             )}
             <div className="settings-help">
-              Start this daemon before connecting from iOS. It uses your current token and listens
-              on <code>0.0.0.0:&lt;port&gt;</code>, matching your configured host port.
+              {t("settings.server.mobileDaemon.help.before")}
+              <code>0.0.0.0:&lt;port&gt;</code>
+              {t("settings.server.mobileDaemon.help.after")}
             </div>
           </div>
         )}
 
         {!isMobileSimplified && (
           <div className="settings-field">
-            <div className="settings-field-label">Tailscale helper</div>
+            <div className="settings-field-label">{t("settings.server.tailscale.label")}</div>
             <div className="settings-field-row">
               <button
                 type="button"
@@ -478,7 +512,9 @@ export function SettingsServerSection({
                 onClick={onRefreshTailscaleStatus}
                 disabled={tailscaleStatusBusy}
               >
-                {tailscaleStatusBusy ? "Checking..." : "Detect Tailscale"}
+                {tailscaleStatusBusy
+                  ? t("settings.server.tailscale.checking")
+                  : t("settings.server.tailscale.detect")}
               </button>
               <button
                 type="button"
@@ -486,7 +522,9 @@ export function SettingsServerSection({
                 onClick={onRefreshTailscaleCommandPreview}
                 disabled={tailscaleCommandBusy}
               >
-                {tailscaleCommandBusy ? "Refreshing..." : "Refresh daemon command"}
+                {tailscaleCommandBusy
+                  ? t("settings.server.tailscale.refreshing")
+                  : t("settings.server.tailscale.refreshCommand")}
               </button>
               <button
                 type="button"
@@ -496,7 +534,7 @@ export function SettingsServerSection({
                   void onUseSuggestedTailscaleHost();
                 }}
               >
-                Use suggested host
+                {t("settings.server.tailscale.useSuggestedHost")}
               </button>
             </div>
             {tailscaleStatusError && (
@@ -507,12 +545,13 @@ export function SettingsServerSection({
                 <div className="settings-help">{tailscaleStatus.message}</div>
                 <div className="settings-help">
                   {tailscaleStatus.installed
-                    ? `Version: ${tailscaleStatus.version ?? "unknown"}`
-                    : "Install Tailscale on both desktop and iOS to continue."}
+                    ? `${t("settings.server.tailscale.version")}: ${tailscaleStatus.version ?? t("settings.server.tailscale.unknown")}`
+                    : t("settings.server.tailscale.installHelp")}
                 </div>
                 {tailscaleStatus.suggestedRemoteHost && (
                   <div className="settings-help">
-                    Suggested remote host: <code>{tailscaleStatus.suggestedRemoteHost}</code>
+                    {t("settings.server.tailscale.suggestedHost")}:{" "}
+                    <code>{tailscaleStatus.suggestedRemoteHost}</code>
                   </div>
                 )}
                 {tailscaleStatus.tailnetName && (
@@ -528,14 +567,14 @@ export function SettingsServerSection({
             {tailscaleCommandPreview && (
               <>
                 <div className="settings-help">
-                  Command template (manual fallback) for starting the daemon:
+                  {t("settings.server.tailscale.commandTemplate")}
                 </div>
                 <pre className="settings-command-preview">
                   <code>{tailscaleCommandPreview.command}</code>
                 </pre>
                 {!tailscaleCommandPreview.tokenConfigured && (
                   <div className="settings-help settings-help-error">
-                    Remote backend token is empty. Set one before exposing daemon access.
+                    {t("settings.server.tailscale.tokenMissing")}
                   </div>
                 )}
               </>
@@ -546,23 +585,23 @@ export function SettingsServerSection({
 
       <div className="settings-help">
         {isMobileSimplified
-          ? "Use your own infrastructure only. On iOS, get the Tailscale hostname and token from your desktop CodexMonitor setup."
-          : "Mobile access should stay scoped to your own infrastructure (tailnet). CodexMonitor does not provide hosted backend services."}
+          ? t("settings.server.footerHelp.mobile")
+          : t("settings.server.footerHelp.desktop")}
       </div>
       {addRemoteOpen && (
         <ModalShell
           className="settings-add-remote-overlay"
           cardClassName="settings-add-remote-card"
           onBackdropClick={closeAddRemoteModal}
-          ariaLabel="Add remote"
+          ariaLabel={t("settings.server.addModal.ariaLabel")}
         >
           <div className="settings-add-remote-header">
-            <div className="settings-add-remote-title">Add remote</div>
+            <div className="settings-add-remote-title">{t("settings.server.addModal.title")}</div>
             <button
               type="button"
               className="ghost icon-button settings-add-remote-close"
               onClick={closeAddRemoteModal}
-              aria-label="Close add remote modal"
+              aria-label={t("settings.server.addModal.closeAria")}
               disabled={addRemoteBusy}
             >
               <X aria-hidden />
@@ -570,7 +609,7 @@ export function SettingsServerSection({
           </div>
           <div className="settings-field">
             <label className="settings-field-label" htmlFor="settings-add-remote-name">
-              New remote name
+              {t("settings.server.addModal.nameLabel")}
             </label>
             <input
               id="settings-add-remote-name"
@@ -582,7 +621,7 @@ export function SettingsServerSection({
           </div>
           <div className="settings-field">
             <label className="settings-field-label" htmlFor="settings-add-remote-host">
-              New remote host
+              {t("settings.server.addModal.hostLabel")}
             </label>
             <input
               id="settings-add-remote-host"
@@ -595,14 +634,14 @@ export function SettingsServerSection({
           </div>
           <div className="settings-field">
             <label className="settings-field-label" htmlFor="settings-add-remote-token">
-              New remote token
+              {t("settings.server.addModal.tokenLabel")}
             </label>
             <input
               id="settings-add-remote-token"
               type="password"
               className="settings-input settings-input--compact"
               value={addRemoteTokenDraft}
-              placeholder="Token"
+              placeholder={t("settings.server.addModal.tokenPlaceholder")}
               onChange={(event) => setAddRemoteTokenDraft(event.target.value)}
               onKeyDown={(event) => {
                 if (event.key === "Enter") {
@@ -616,7 +655,7 @@ export function SettingsServerSection({
           {addRemoteError && <div className="settings-help settings-help-error">{addRemoteError}</div>}
           <div className="settings-add-remote-actions">
             <button type="button" className="ghost" onClick={closeAddRemoteModal} disabled={addRemoteBusy}>
-              Cancel
+              {t("settings.server.addModal.cancel")}
             </button>
             <button
               type="button"
@@ -624,7 +663,9 @@ export function SettingsServerSection({
               onClick={handleAddRemoteConfirm}
               disabled={addRemoteBusy}
             >
-              {addRemoteBusy ? "Connecting..." : "Connect & add"}
+              {addRemoteBusy
+                ? t("settings.server.connectionTest.connecting")
+                : t("settings.server.addModal.confirm")}
             </button>
           </div>
         </ModalShell>
@@ -634,12 +675,13 @@ export function SettingsServerSection({
           className="settings-delete-remote-overlay"
           cardClassName="settings-delete-remote-card"
           onBackdropClick={() => setPendingDeleteRemoteId(null)}
-          ariaLabel="Delete remote confirmation"
+          ariaLabel={t("settings.server.deleteModal.ariaLabel")}
         >
-          <div className="settings-delete-remote-title">Delete remote?</div>
+          <div className="settings-delete-remote-title">{t("settings.server.deleteModal.title")}</div>
           <div className="settings-delete-remote-message">
-            Remove <strong>{pendingDeleteRemote.name}</strong> from saved remotes? This only
-            removes the profile from this device.
+            {t("settings.server.deleteModal.message.before")}
+            <strong>{pendingDeleteRemote.name}</strong>
+            {t("settings.server.deleteModal.message.after")}
           </div>
           <div className="settings-delete-remote-actions">
             <button
@@ -647,7 +689,7 @@ export function SettingsServerSection({
               className="ghost"
               onClick={() => setPendingDeleteRemoteId(null)}
             >
-              Cancel
+              {t("settings.server.deleteModal.cancel")}
             </button>
             <button
               type="button"
@@ -657,11 +699,11 @@ export function SettingsServerSection({
                 setPendingDeleteRemoteId(null);
               }}
             >
-              Delete remote
+              {t("settings.server.deleteModal.confirm")}
             </button>
           </div>
         </ModalShell>
       )}
-    </SettingsSection>
+    </section>
   );
 }
diff --git a/src/features/settings/components/sections/SettingsShortcutsSection.tsx b/src/features/settings/components/sections/SettingsShortcutsSection.tsx
index 8c8f815cf..a2d921c91 100644
--- a/src/features/settings/components/sections/SettingsShortcutsSection.tsx
+++ b/src/features/settings/components/sections/SettingsShortcutsSection.tsx
@@ -1,10 +1,7 @@
 import { useMemo, useState, type KeyboardEvent } from "react";
-import {
-  SettingsSection,
-  SettingsSubsection,
-} from "@/features/design-system/components/settings/SettingsPrimitives";
 import { formatShortcut, getDefaultInterruptShortcut } from "@utils/shortcuts";
 import { isMacPlatform } from "@utils/platformPaths";
+import { useI18n } from "@/i18n/useI18n";
 import type {
   ShortcutDraftKey,
   ShortcutDrafts,
@@ -47,6 +44,7 @@ function ShortcutField({
   ) => void;
   onClearShortcut: (key: ShortcutSettingKey) => void;
 }) {
+  const { t } = useI18n();
   return (
     <div className="settings-field">
       <div className="settings-field-label">{item.label}</div>
@@ -55,7 +53,7 @@ function ShortcutField({
           className="settings-input settings-input--shortcut"
           value={formatShortcut(shortcutDrafts[item.draftKey])}
           onKeyDown={(event) => onShortcutKeyDown(event, item.settingKey)}
-          placeholder="Type shortcut"
+          placeholder={t("settings.shortcuts.field.inputPlaceholder")}
           readOnly
         />
         <button
@@ -63,7 +61,7 @@ function ShortcutField({
           className="ghost settings-button-compact"
           onClick={() => onClearShortcut(item.settingKey)}
         >
-          Clear
+          {t("settings.shortcuts.field.clear")}
         </button>
       </div>
       <div className="settings-help">{item.help}</div>
@@ -76,35 +74,36 @@ export function SettingsShortcutsSection({
   onShortcutKeyDown,
   onClearShortcut,
 }: SettingsShortcutsSectionProps) {
+  const { t } = useI18n();
   const isMac = isMacPlatform();
   const [searchQuery, setSearchQuery] = useState("");
 
   const groups = useMemo<ShortcutGroup[]>(
     () => [
       {
-        title: "File",
-        subtitle: "Create agents and worktrees from the keyboard.",
+        title: t("settings.shortcuts.group.file.title"),
+        subtitle: t("settings.shortcuts.group.file.subtitle"),
         items: [
           {
-            label: "New Agent",
+            label: t("settings.shortcuts.item.newAgent"),
             draftKey: "newAgent",
             settingKey: "newAgentShortcut",
             help: `Default: ${formatShortcut("cmd+n")}`,
           },
           {
-            label: "New Worktree Agent",
+            label: t("settings.shortcuts.item.newWorktreeAgent"),
             draftKey: "newWorktreeAgent",
             settingKey: "newWorktreeAgentShortcut",
             help: `Default: ${formatShortcut("cmd+shift+n")}`,
           },
           {
-            label: "New Clone Agent",
+            label: t("settings.shortcuts.item.newCloneAgent"),
             draftKey: "newCloneAgent",
             settingKey: "newCloneAgentShortcut",
             help: `Default: ${formatShortcut("cmd+alt+n")}`,
           },
           {
-            label: "Archive active thread",
+            label: t("settings.shortcuts.item.archiveThread"),
             draftKey: "archiveThread",
             settingKey: "archiveThreadShortcut",
             help: `Default: ${formatShortcut(isMac ? "cmd+ctrl+a" : "ctrl+alt+a")}`,
@@ -112,35 +111,35 @@ export function SettingsShortcutsSection({
         ],
       },
       {
-        title: "Composer",
-        subtitle: "Cycle between model, access, reasoning, and collaboration modes.",
+        title: t("settings.shortcuts.group.composer.title"),
+        subtitle: t("settings.shortcuts.group.composer.subtitle"),
         items: [
           {
-            label: "Cycle model",
+            label: t("settings.shortcuts.item.cycleModel"),
             draftKey: "model",
             settingKey: "composerModelShortcut",
             help: `Press a new shortcut while focused. Default: ${formatShortcut("cmd+shift+m")}`,
           },
           {
-            label: "Cycle access mode",
+            label: t("settings.shortcuts.item.cycleAccess"),
             draftKey: "access",
             settingKey: "composerAccessShortcut",
             help: `Default: ${formatShortcut("cmd+shift+a")}`,
           },
           {
-            label: "Cycle reasoning mode",
+            label: t("settings.shortcuts.item.cycleReasoning"),
             draftKey: "reasoning",
             settingKey: "composerReasoningShortcut",
             help: `Default: ${formatShortcut("cmd+shift+r")}`,
           },
           {
-            label: "Cycle collaboration mode",
+            label: t("settings.shortcuts.item.cycleCollaboration"),
             draftKey: "collaboration",
             settingKey: "composerCollaborationShortcut",
             help: `Default: ${formatShortcut("shift+tab")}`,
           },
           {
-            label: "Stop active run",
+            label: t("settings.shortcuts.item.stopRun"),
             draftKey: "interrupt",
             settingKey: "interruptShortcut",
             help: `Default: ${formatShortcut(getDefaultInterruptShortcut())}`,
@@ -148,35 +147,35 @@ export function SettingsShortcutsSection({
         ],
       },
       {
-        title: "Panels",
-        subtitle: "Toggle sidebars and panels.",
+        title: t("settings.shortcuts.group.panels.title"),
+        subtitle: t("settings.shortcuts.group.panels.subtitle"),
         items: [
           {
-            label: "Toggle projects sidebar",
+            label: t("settings.shortcuts.item.toggleProjectsSidebar"),
             draftKey: "projectsSidebar",
             settingKey: "toggleProjectsSidebarShortcut",
             help: `Default: ${formatShortcut("cmd+shift+p")}`,
           },
           {
-            label: "Toggle git sidebar",
+            label: t("settings.shortcuts.item.toggleGitSidebar"),
             draftKey: "gitSidebar",
             settingKey: "toggleGitSidebarShortcut",
             help: `Default: ${formatShortcut("cmd+shift+g")}`,
           },
           {
-            label: "Branch switcher",
+            label: t("settings.shortcuts.item.branchSwitcher"),
             draftKey: "branchSwitcher",
             settingKey: "branchSwitcherShortcut",
             help: `Default: ${formatShortcut("cmd+b")}`,
           },
           {
-            label: "Toggle debug panel",
+            label: t("settings.shortcuts.item.toggleDebugPanel"),
             draftKey: "debugPanel",
             settingKey: "toggleDebugPanelShortcut",
             help: `Default: ${formatShortcut("cmd+shift+d")}`,
           },
           {
-            label: "Toggle terminal panel",
+            label: t("settings.shortcuts.item.toggleTerminalPanel"),
             draftKey: "terminal",
             settingKey: "toggleTerminalShortcut",
             help: `Default: ${formatShortcut("cmd+shift+t")}`,
@@ -184,29 +183,29 @@ export function SettingsShortcutsSection({
         ],
       },
       {
-        title: "Navigation",
-        subtitle: "Cycle between agents and workspaces.",
+        title: t("settings.shortcuts.group.navigation.title"),
+        subtitle: t("settings.shortcuts.group.navigation.subtitle"),
         items: [
           {
-            label: "Next agent",
+            label: t("settings.shortcuts.item.nextAgent"),
             draftKey: "cycleAgentNext",
             settingKey: "cycleAgentNextShortcut",
             help: `Default: ${formatShortcut(isMac ? "cmd+ctrl+down" : "ctrl+alt+down")}`,
           },
           {
-            label: "Previous agent",
+            label: t("settings.shortcuts.item.prevAgent"),
             draftKey: "cycleAgentPrev",
             settingKey: "cycleAgentPrevShortcut",
             help: `Default: ${formatShortcut(isMac ? "cmd+ctrl+up" : "ctrl+alt+up")}`,
           },
           {
-            label: "Next workspace",
+            label: t("settings.shortcuts.item.nextWorkspace"),
             draftKey: "cycleWorkspaceNext",
             settingKey: "cycleWorkspaceNextShortcut",
             help: `Default: ${formatShortcut(isMac ? "cmd+shift+down" : "ctrl+alt+shift+down")}`,
           },
           {
-            label: "Previous workspace",
+            label: t("settings.shortcuts.item.prevWorkspace"),
             draftKey: "cycleWorkspacePrev",
             settingKey: "cycleWorkspacePrevShortcut",
             help: `Default: ${formatShortcut(isMac ? "cmd+shift+up" : "ctrl+alt+shift+up")}`,
@@ -214,7 +213,7 @@ export function SettingsShortcutsSection({
         ],
       },
     ],
-    [isMac],
+    [isMac, t],
   );
 
   const normalizedSearchQuery = searchQuery.trim().toLowerCase();
@@ -234,19 +233,18 @@ export function SettingsShortcutsSection({
   }, [groups, normalizedSearchQuery]);
 
   return (
-    <SettingsSection
-      title="Shortcuts"
-      subtitle="Customize keyboard shortcuts for file actions, composer, panels, and navigation."
-    >
+    <section className="settings-section">
+      <div className="settings-section-title">{t("settings.shortcuts.sectionTitle")}</div>
+      <div className="settings-section-subtitle">{t("settings.shortcuts.sectionSubtitle")}</div>
       <div className="settings-field settings-shortcuts-search">
         <label className="settings-field-label" htmlFor="settings-shortcuts-search">
-          Search shortcuts
+          {t("settings.shortcuts.search.label")}
         </label>
         <div className="settings-field-row">
           <input
             id="settings-shortcuts-search"
             className="settings-input"
-            placeholder="Search shortcuts"
+            placeholder={t("settings.shortcuts.search.placeholder")}
             value={searchQuery}
             onChange={(event) => setSearchQuery(event.target.value)}
           />
@@ -256,16 +254,19 @@ export function SettingsShortcutsSection({
               className="ghost settings-button-compact"
               onClick={() => setSearchQuery("")}
             >
-              Clear
+              {t("settings.shortcuts.field.clear")}
             </button>
           )}
         </div>
-        <div className="settings-help">Filter by section name, action, or default shortcut.</div>
+        <div className="settings-help">
+          {t("settings.shortcuts.search.help")}
+        </div>
       </div>
       {filteredGroups.map((group, index) => (
         <div key={group.title}>
           {index > 0 && <div className="settings-divider" />}
-          <SettingsSubsection title={group.title} subtitle={group.subtitle} />
+          <div className="settings-subsection-title">{group.title}</div>
+          <div className="settings-subsection-subtitle">{group.subtitle}</div>
           {group.items.map((item) => (
             <ShortcutField
               key={item.settingKey}
@@ -279,9 +280,13 @@ export function SettingsShortcutsSection({
       ))}
       {filteredGroups.length === 0 && (
         <div className="settings-empty">
-          No shortcuts match {normalizedSearchQuery ? `"${searchQuery.trim()}"` : "your search"}.
+          {t("settings.shortcuts.empty.prefix")}
+          {normalizedSearchQuery
+            ? `"${searchQuery.trim()}"`
+            : t("settings.shortcuts.empty.fallback")}
+          {t("settings.shortcuts.empty.suffix")}
         </div>
       )}
-    </SettingsSection>
+    </section>
   );
 }
diff --git a/src/features/settings/components/settingsViewConstants.ts b/src/features/settings/components/settingsViewConstants.ts
index 1219a4f92..5e491d3c1 100644
--- a/src/features/settings/components/settingsViewConstants.ts
+++ b/src/features/settings/components/settingsViewConstants.ts
@@ -74,19 +74,19 @@ export const SETTINGS_MOBILE_BREAKPOINT_PX = 720;
 export const DEFAULT_REMOTE_HOST = "127.0.0.1:4732";
 
 export const SETTINGS_SECTION_LABELS: Record<CodexSection, string> = {
-  projects: "Projects",
-  environments: "Environments",
-  display: "Display & Sound",
-  about: "About",
-  composer: "Composer",
-  dictation: "Dictation",
-  shortcuts: "Shortcuts",
-  "open-apps": "Open in",
-  git: "Git",
-  server: "Server",
-  agents: "Agents",
-  codex: "Codex",
-  features: "Features",
+  projects: "projects",
+  environments: "environments",
+  display: "display",
+  about: "about",
+  composer: "composer",
+  dictation: "dictation",
+  shortcuts: "shortcuts",
+  "open-apps": "openApps",
+  git: "git",
+  server: "server",
+  agents: "agents",
+  codex: "codex",
+  features: "features",
 };
 
 export const SHORTCUT_DRAFT_KEY_BY_SETTING: Record<
diff --git a/src/features/settings/hooks/useAppSettings.ts b/src/features/settings/hooks/useAppSettings.ts
index e4dafaccc..4bb7b3e18 100644
--- a/src/features/settings/hooks/useAppSettings.ts
+++ b/src/features/settings/hooks/useAppSettings.ts
@@ -21,6 +21,7 @@ import { isMobilePlatform } from "@utils/platformPaths";
 import { DEFAULT_COMMIT_MESSAGE_PROMPT } from "@utils/commitMessagePrompt";
 
 const allowedThemes = new Set(["system", "light", "dark", "dim"]);
+const allowedUiLanguages = new Set(["system", "en", "zh-CN"]);
 const allowedPersonality = new Set(["friendly", "pragmatic"]);
 const allowedFollowUpMessageBehavior = new Set(["queue", "steer"]);
 const DEFAULT_REMOTE_BACKEND_HOST = "127.0.0.1:4732";
@@ -167,6 +168,7 @@ function buildDefaultSettings(): AppSettings {
     lastComposerReasoningEffort: null,
     uiScale: UI_SCALE_DEFAULT,
     theme: "system",
+    uiLanguage: "system",
     usageShowRemaining: false,
     showMessageFilePath: true,
     chatHistoryScrollbackItems: CHAT_SCROLLBACK_DEFAULT,
@@ -245,6 +247,9 @@ function normalizeAppSettings(settings: AppSettings): AppSettings {
     codexArgs: settings.codexArgs?.trim() ? settings.codexArgs.trim() : null,
     uiScale: clampUiScale(settings.uiScale),
     theme: allowedThemes.has(settings.theme) ? settings.theme : "system",
+    uiLanguage: allowedUiLanguages.has(settings.uiLanguage)
+      ? settings.uiLanguage
+      : "system",
     uiFontFamily: normalizeFontFamily(
       settings.uiFontFamily,
       DEFAULT_UI_FONT_FAMILY,
diff --git a/src/i18n/index.test.ts b/src/i18n/index.test.ts
new file mode 100644
index 000000000..ae3768021
--- /dev/null
+++ b/src/i18n/index.test.ts
@@ -0,0 +1,33 @@
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { en } from "./locales/en";
+import { zhCN } from "./locales/zh-CN";
+import { resolveEffectiveLocale } from "./index";
+
+describe("i18n dictionaries", () => {
+  it("keeps en and zh-CN keys aligned", () => {
+    const enKeys = Object.keys(en).sort();
+    const zhKeys = Object.keys(zhCN).sort();
+    expect(zhKeys).toEqual(enKeys);
+  });
+});
+
+describe("resolveEffectiveLocale", () => {
+  afterEach(() => {
+    vi.unstubAllGlobals();
+  });
+
+  it("uses explicit supported preference", () => {
+    expect(resolveEffectiveLocale("en")).toBe("en");
+    expect(resolveEffectiveLocale("zh-CN")).toBe("zh-CN");
+  });
+
+  it("maps system zh locales to zh-CN", () => {
+    vi.stubGlobal("navigator", { language: "zh-SG" });
+    expect(resolveEffectiveLocale("system")).toBe("zh-CN");
+  });
+
+  it("falls back to en for non-zh system locales", () => {
+    vi.stubGlobal("navigator", { language: "fr-FR" });
+    expect(resolveEffectiveLocale("system")).toBe("en");
+  });
+});
diff --git a/src/i18n/index.ts b/src/i18n/index.ts
new file mode 100644
index 000000000..ded995168
--- /dev/null
+++ b/src/i18n/index.ts
@@ -0,0 +1,44 @@
+import { en } from "./locales/en";
+import { zhCN } from "./locales/zh-CN";
+import type {
+  SupportedLocale,
+  TranslationDictionary,
+  TranslationParams,
+  UiLanguagePreference,
+} from "./types";
+
+export const DEFAULT_LOCALE: SupportedLocale = "en";
+
+export const dictionaries: Record<SupportedLocale, TranslationDictionary> = {
+  en,
+  "zh-CN": zhCN,
+};
+
+export function resolveEffectiveLocale(
+  languagePreference: UiLanguagePreference | string | null | undefined,
+): SupportedLocale {
+  if (languagePreference === "en" || languagePreference === "zh-CN") {
+    return languagePreference;
+  }
+  if (typeof navigator === "undefined") {
+    return DEFAULT_LOCALE;
+  }
+  const normalized = String(navigator.language ?? "").toLowerCase();
+  if (normalized.startsWith("zh")) {
+    return "zh-CN";
+  }
+  return DEFAULT_LOCALE;
+}
+
+export function formatTranslation(
+  template: string,
+  params?: TranslationParams,
+): string {
+  if (!params) {
+    return template;
+  }
+  return template.replace(/\{(\w+)\}/g, (_, key: string) => {
+    const value = params[key];
+    return value === null || value === undefined ? "" : String(value);
+  });
+}
diff --git a/src/i18n/locales/en.ts b/src/i18n/locales/en.ts
new file mode 100644
index 000000000..22d2fd28f
--- /dev/null
+++ b/src/i18n/locales/en.ts
@@ -0,0 +1,589 @@
+import type { TranslationDictionary } from "../types";
+
+export const en: TranslationDictionary = {
+  "common.reset": "Reset",
+  "common.punctuation.period": ".",
+  "settings.shell.title": "Settings",
+  "settings.shell.close": "Close settings",
+  "settings.shell.mobile.back": "Back to settings sections",
+  "settings.shell.mobile.sections": "Sections",
+  "settings.nav.projects": "Projects",
+  "settings.nav.environments": "Environments",
+  "settings.nav.display": "Display & Sound",
+  "settings.nav.composer": "Composer",
+  "settings.nav.dictation": "Dictation",
+  "settings.nav.shortcuts": "Shortcuts",
+  "settings.nav.openApps": "Open in",
+  "settings.nav.git": "Git",
+  "settings.nav.server": "Server",
+  "settings.nav.agents": "Agents",
+  "settings.nav.codex": "Codex",
+  "settings.nav.features": "Features",
+  "settings.nav.about": "About",
+  "settings.codex.sectionTitle": "Codex",
+  "settings.codex.sectionSubtitle":
+    "Configure the Codex CLI used by CodexMonitor and validate the install.",
+  "settings.codex.path.label": "Default Codex path",
+  "settings.codex.path.browse": "Browse",
+  "settings.codex.path.usePath": "Use PATH",
+  "settings.codex.path.help": "Leave empty to use the system PATH resolution.",
+  "settings.codex.args.label": "Default Codex args",
+  "settings.codex.args.clear": "Clear",
+  "settings.codex.args.help.before": "Extra flags passed before ",
+  "settings.codex.args.help.after": ". Use quotes for values with spaces.",
+  "settings.codex.args.sharedHelp":
+    "These settings apply to the shared Codex app-server used across all connected workspaces.",
+  "settings.codex.unsupportedFlags.prefix":
+    "Per-thread override processing ignores unsupported flags:",
+  "settings.codex.unsupportedFlags.and": "and",
+  "settings.codex.actions.save": "Save",
+  "settings.codex.actions.saving": "Saving...",
+  "settings.codex.actions.runDoctor": "Run doctor",
+  "settings.codex.actions.running": "Running...",
+  "settings.codex.actions.updateCodex": "Update Codex",
+  "settings.codex.actions.update": "Update",
+  "settings.codex.actions.updating": "Updating...",
+  "settings.codex.doctor.okTitle": "Codex looks good",
+  "settings.codex.doctor.errorTitle": "Codex issue detected",
+  "settings.codex.doctor.version": "Version",
+  "settings.codex.doctor.unknown": "unknown",
+  "settings.codex.doctor.appServer": "App-server",
+  "settings.codex.doctor.ok": "ok",
+  "settings.codex.doctor.failed": "failed",
+  "settings.codex.doctor.node": "Node",
+  "settings.codex.doctor.missing": "missing",
+  "settings.codex.update.updated": "Codex updated",
+  "settings.codex.update.upToDate": "Codex already up-to-date",
+  "settings.codex.update.failed": "Codex update failed",
+  "settings.codex.update.method": "Method",
+  "settings.codex.update.package": "Package",
+  "settings.codex.update.output": "output",
+  "settings.codex.defaults.sectionTitle": "Default parameters",
+  "settings.codex.defaults.model.label": "Model",
+  "settings.codex.defaults.model.addWorkspace":
+    "Add a workspace to load available models.",
+  "settings.codex.defaults.model.loading":
+    "Loading models from the first workspace…",
+  "settings.codex.defaults.model.loadError": "Couldn’t load models: {error}",
+  "settings.codex.defaults.model.help":
+    "Sourced from the first workspace and used when there is no thread-specific override.",
+  "settings.codex.defaults.model.refresh": "Refresh",
+  "settings.codex.defaults.reasoning.label": "Reasoning effort",
+  "settings.codex.defaults.reasoning.supported":
+    "Available options depend on the selected model.",
+  "settings.codex.defaults.reasoning.unsupported":
+    "The selected model does not expose reasoning effort options.",
+  "settings.codex.defaults.reasoning.notSupported": "not supported",
+  "settings.codex.defaults.access.label": "Access mode",
+  "settings.codex.defaults.access.help":
+    "Used when there is no thread-specific override.",
+  "settings.codex.defaults.access.option.readOnly": "Read only",
+  "settings.codex.defaults.access.option.current": "On-request",
+  "settings.codex.defaults.access.option.fullAccess": "Full access",
+  "settings.codex.review.label": "Review mode",
+  "settings.codex.review.option.inline": "Inline (same thread)",
+  "settings.codex.review.option.detached": "Detached (new review thread)",
+  "settings.codex.review.help.before": "Choose whether ",
+  "settings.codex.review.help.after":
+    " runs in the current thread or a detached review thread.",
+  "settings.codex.globalAgents.title": "Global AGENTS.md",
+  "settings.codex.globalAgents.placeholder":
+    "Add global instructions for Codex agents…",
+  "settings.codex.globalConfig.title": "Global config.toml",
+  "settings.codex.globalConfig.placeholder":
+    "Edit the global Codex config.toml…",
+  "settings.codex.file.storedAt": "Stored at ",
+  "settings.server.sectionTitle": "Server",
+  "settings.server.sectionSubtitle.mobile":
+    "Configure TCP host/token from your desktop setup, then run a connection test.",
+  "settings.server.sectionSubtitle.desktop":
+    "Configure how CodexMonitor exposes TCP backend access for mobile and remote clients. Desktop usage remains local unless you explicitly connect through remote mode.",
+  "settings.server.addRemote.error": "Unable to add remote.",
+  "settings.server.backendMode.label": "Backend mode",
+  "settings.server.backendMode.option.local": "Local (default)",
+  "settings.server.backendMode.option.remote": "Remote (daemon)",
+  "settings.server.backendMode.help":
+    "Local keeps desktop requests in-process. Remote routes desktop requests through the same TCP transport path used by mobile clients.",
+  "settings.server.savedRemotes.label": "Saved remotes",
+  "settings.server.savedRemotes.active": "Active",
+  "settings.server.savedRemotes.lastConnected": "Last connected",
+  "settings.server.savedRemotes.never": "Never",
+  "settings.server.savedRemotes.useAria": "Use {name} remote",
+  "settings.server.savedRemotes.use": "Use",
+  "settings.server.savedRemotes.using": "Using",
+  "settings.server.savedRemotes.moveUpAria": "Move {name} up",
+  "settings.server.savedRemotes.moveDownAria": "Move {name} down",
+  "settings.server.savedRemotes.deleteAria": "Delete {name}",
+  "settings.server.savedRemotes.delete": "Delete",
+  "settings.server.savedRemotes.add": "Add remote",
+  "settings.server.savedRemotes.help":
+    "Switch the active remote here. The fields below edit the active entry.",
+  "settings.server.remoteName.label": "Remote name",
+  "settings.server.remoteName.placeholder": "My desktop",
+  "settings.server.keepDaemon.title": "Keep daemon running after app closes",
+  "settings.server.keepDaemon.subtitle":
+    "If disabled, CodexMonitor stops managed TCP daemon processes before exit.",
+  "settings.server.remoteBackend.label": "Remote backend",
+  "settings.server.remoteBackend.hostAria": "Remote backend host",
+  "settings.server.remoteBackend.tokenPlaceholder": "Token (required)",
+  "settings.server.remoteBackend.tokenAria": "Remote backend token",
+  "settings.server.connectionTest.label": "Connection test",
+  "settings.server.connectionTest.connecting": "Connecting...",
+  "settings.server.connectionTest.button": "Connect & test",
+  "settings.server.connectionTest.help":
+    "Make sure your desktop app daemon is running and reachable on Tailscale, then retry this test.",
+  "settings.server.mobileDaemon.label": "Mobile access daemon",
+  "settings.server.mobileDaemon.starting": "Starting...",
+  "settings.server.mobileDaemon.start": "Start daemon",
+  "settings.server.mobileDaemon.stopping": "Stopping...",
+  "settings.server.mobileDaemon.stop": "Stop daemon",
+  "settings.server.mobileDaemon.refreshing": "Refreshing...",
+  "settings.server.mobileDaemon.refresh": "Refresh status",
+  "settings.server.mobileDaemon.startedAt": "Started at",
+  "settings.server.mobileDaemon.help.before":
+    "Start this daemon before connecting from iOS. It uses your current token and listens on ",
+  "settings.server.mobileDaemon.help.after":
+    ", matching your configured host port.",
+  "settings.server.mobileDaemon.errorFallback": "Mobile daemon is in an error state.",
+  "settings.server.tailscale.label": "Tailscale helper",
+  "settings.server.tailscale.checking": "Checking...",
+  "settings.server.tailscale.detect": "Detect Tailscale",
+  "settings.server.tailscale.refreshing": "Refreshing...",
+  "settings.server.tailscale.refreshCommand": "Refresh daemon command",
+  "settings.server.tailscale.useSuggestedHost": "Use suggested host",
+  "settings.server.tailscale.version": "Version",
+  "settings.server.tailscale.unknown": "unknown",
+  "settings.server.tailscale.installHelp":
+    "Install Tailscale on both desktop and iOS to continue.",
+  "settings.server.tailscale.suggestedHost": "Suggested remote host",
+  "settings.server.tailscale.commandTemplate":
+    "Command template (manual fallback) for starting the daemon:",
+  "settings.server.tailscale.tokenMissing":
+    "Remote backend token is empty. Set one before exposing daemon access.",
+  "settings.server.footerHelp.mobile":
+    "Use your own infrastructure only. On iOS, get the Tailscale hostname and token from your desktop CodexMonitor setup.",
+  "settings.server.footerHelp.desktop":
+    "Mobile access should stay scoped to your own infrastructure (tailnet). CodexMonitor does not provide hosted backend services.",
+  "settings.server.addModal.ariaLabel": "Add remote",
+  "settings.server.addModal.title": "Add remote",
+  "settings.server.addModal.closeAria": "Close add remote modal",
+  "settings.server.addModal.nameLabel": "New remote name",
+  "settings.server.addModal.hostLabel": "New remote host",
+  "settings.server.addModal.tokenLabel": "New remote token",
+  "settings.server.addModal.tokenPlaceholder": "Token",
+  "settings.server.addModal.cancel": "Cancel",
+  "settings.server.addModal.confirm": "Connect & add",
+  "settings.server.deleteModal.ariaLabel": "Delete remote confirmation",
+  "settings.server.deleteModal.title": "Delete remote?",
+  "settings.server.deleteModal.message.before": "Remove ",
+  "settings.server.deleteModal.message.after":
+    " from saved remotes? This only removes the profile from this device.",
+  "settings.server.deleteModal.cancel": "Cancel",
+  "settings.server.deleteModal.confirm": "Delete remote",
+  "settings.agents.openPathError": "Unable to open path.",
+  "settings.agents.nameRequired": "Agent name is required.",
+  "settings.agents.sectionTitle": "Agents",
+  "settings.agents.sectionSubtitle":
+    "Configure multi-agent mode, limits, and custom agent roles.",
+  "settings.agents.builtins.before": "Built-in roles from Codex are still available: ",
+  "settings.agents.builtins.middle1": ", ",
+  "settings.agents.builtins.middle2": ", and ",
+  "settings.agents.builtins.after": ".",
+  "settings.agents.configFile.title": "Config file",
+  "settings.agents.configFile.subtitle": "Open global Codex config in {fileManager}.",
+  "settings.agents.refresh": "Refresh",
+  "settings.agents.multiAgent.title": "Enable Multi-Agent",
+  "settings.agents.maxThreads.title": "Max Threads",
+  "settings.agents.maxThreads.subtitle.before": "Maximum open agent threads. Valid range: ",
+  "settings.agents.maxThreads.subtitle.after": ". Changes save immediately.",
+  "settings.agents.maxThreads.groupAria": "Maximum agent threads",
+  "settings.agents.maxThreads.decreaseAria": "Decrease max threads",
+  "settings.agents.maxThreads.increaseAria": "Increase max threads",
+  "settings.agents.maxDepth.title": "Max Depth",
+  "settings.agents.maxDepth.subtitle.before": "Maximum nested spawn depth. Valid range: ",
+  "settings.agents.maxDepth.subtitle.after": ". Changes save immediately.",
+  "settings.agents.maxDepth.groupAria": "Maximum agent depth",
+  "settings.agents.maxDepth.decreaseAria": "Decrease max depth",
+  "settings.agents.maxDepth.increaseAria": "Increase max depth",
+  "settings.agents.create.title": "Create Agent",
+  "settings.agents.create.subtitle.before": "Add a custom role under ",
+  "settings.agents.create.subtitle.after": " and create its config file.",
+  "settings.agents.field.name": "Name",
+  "settings.agents.field.description": "Description",
+  "settings.agents.field.developerInstructions": "Developer instructions",
+  "settings.agents.generate.title":
+    "Generate description and developer instructions with AI",
+  "settings.agents.generate.createAria": "Generate fields for new agent",
+  "settings.agents.generate.editAria": "Generate fields for {name}",
+  "settings.agents.create.namePlaceholder": "researcher",
+  "settings.agents.create.descriptionPlaceholder": "Short role summary.",
+  "settings.agents.create.developerInstructionsPlaceholder":
+    "Multiline per-agent developer instructions.",
+  "settings.agents.create.modelAria": "Agent model",
+  "settings.agents.create.reasoningLabel": "reasoning:",
+  "settings.agents.create.reasoningAria": "Agent reasoning effort",
+  "settings.agents.create.notSupported": "not supported",
+  "settings.agents.create.creating": "Creating...",
+  "settings.agents.create.create": "Create Agent",
+  "settings.agents.configured.title": "Configured Agents",
+  "settings.agents.configured.subtitle":
+    "Manage custom roles and their per-agent config files.",
+  "settings.agents.configured.empty": "No custom agents configured yet.",
+  "settings.agents.card.noDescription": "No description.",
+  "settings.agents.card.missingConfigFile": "(missing config_file)",
+  "settings.agents.card.edit": "Edit",
+  "settings.agents.card.delete": "Delete",
+  "settings.agents.card.opening": "Opening...",
+  "settings.agents.card.editFile": "Edit File",
+  "settings.agents.card.externalPath": "External path",
+  "settings.agents.card.deleteConfirmPrompt":
+    "Delete agent and managed config file?",
+  "settings.agents.card.cancel": "Cancel",
+  "settings.agents.card.deleting": "Deleting...",
+  "settings.agents.card.confirmDelete": "Confirm Delete",
+  "settings.agents.edit.renameManagedFile":
+    "Rename managed config file when agent name changes",
+  "settings.agents.edit.saving": "Saving...",
+  "settings.agents.edit.save": "Save",
+  "settings.agents.editor.configFileSuffix": "config file",
+  "settings.agents.editor.close": "Close",
+  "settings.agents.loading": "Loading agents settings...",
+  "settings.shortcuts.field.inputPlaceholder": "Type shortcut",
+  "settings.shortcuts.field.clear": "Clear",
+  "settings.shortcuts.group.file.title": "File",
+  "settings.shortcuts.group.file.subtitle": "Create agents and worktrees from the keyboard.",
+  "settings.shortcuts.item.newAgent": "New Agent",
+  "settings.shortcuts.item.newWorktreeAgent": "New Worktree Agent",
+  "settings.shortcuts.item.newCloneAgent": "New Clone Agent",
+  "settings.shortcuts.item.archiveThread": "Archive active thread",
+  "settings.shortcuts.group.composer.title": "Composer",
+  "settings.shortcuts.group.composer.subtitle":
+    "Cycle between model, access, reasoning, and collaboration modes.",
+  "settings.shortcuts.item.cycleModel": "Cycle model",
+  "settings.shortcuts.item.cycleAccess": "Cycle access mode",
+  "settings.shortcuts.item.cycleReasoning": "Cycle reasoning mode",
+  "settings.shortcuts.item.cycleCollaboration": "Cycle collaboration mode",
+  "settings.shortcuts.item.stopRun": "Stop active run",
+  "settings.shortcuts.group.panels.title": "Panels",
+  "settings.shortcuts.group.panels.subtitle": "Toggle sidebars and panels.",
+  "settings.shortcuts.item.toggleProjectsSidebar": "Toggle projects sidebar",
+  "settings.shortcuts.item.toggleGitSidebar": "Toggle git sidebar",
+  "settings.shortcuts.item.branchSwitcher": "Branch switcher",
+  "settings.shortcuts.item.toggleDebugPanel": "Toggle debug panel",
+  "settings.shortcuts.item.toggleTerminalPanel": "Toggle terminal panel",
+  "settings.shortcuts.group.navigation.title": "Navigation",
+  "settings.shortcuts.group.navigation.subtitle":
+    "Cycle between agents and workspaces.",
+  "settings.shortcuts.item.nextAgent": "Next agent",
+  "settings.shortcuts.item.prevAgent": "Previous agent",
+  "settings.shortcuts.item.nextWorkspace": "Next workspace",
+  "settings.shortcuts.item.prevWorkspace": "Previous workspace",
+  "settings.shortcuts.sectionTitle": "Shortcuts",
+  "settings.shortcuts.sectionSubtitle":
+    "Customize keyboard shortcuts for file actions, composer, panels, and navigation.",
+  "settings.shortcuts.search.label": "Search shortcuts",
+  "settings.shortcuts.search.placeholder": "Search shortcuts",
+  "settings.shortcuts.search.help":
+    "Filter by section name, action, or default shortcut.",
+  "settings.shortcuts.empty.prefix": "No shortcuts match ",
+  "settings.shortcuts.empty.fallback": "your search",
+  "settings.shortcuts.empty.suffix": ".",
+  "settings.openApps.sectionTitle": "Open in",
+  "settings.openApps.sectionSubtitle":
+    "Customize the Open in menu shown in the title bar and file previews.",
+  "settings.openApps.validation.labelRequired": "Label required",
+  "settings.openApps.validation.appNameRequired": "App name required",
+  "settings.openApps.validation.commandRequired": "Command required",
+  "settings.openApps.validation.completeRequired": "Complete required fields",
+  "settings.openApps.field.label": "Label",
+  "settings.openApps.field.type": "Type",
+  "settings.openApps.field.typeAria": "Open app type {index}",
+  "settings.openApps.option.app": "App",
+  "settings.openApps.option.command": "Command",
+  "settings.openApps.field.appName": "App name",
+  "settings.openApps.field.command": "Command",
+  "settings.openApps.field.args": "Args",
+  "settings.openApps.status.incomplete": "Incomplete",
+  "settings.openApps.default": "Default",
+  "settings.openApps.moveUp": "Move up",
+  "settings.openApps.moveDown": "Move down",
+  "settings.openApps.remove": "Remove app",
+  "settings.openApps.add": "Add app",
+  "settings.openApps.help.commandsPrefix":
+    "Commands receive the selected path as the final argument. ",
+  "settings.openApps.help.apps.mac": "Apps open via `open -a` with optional args.",
+  "settings.openApps.help.apps.other":
+    "Apps run as an executable with optional args.",
+  "settings.projects.sectionTitle": "Projects",
+  "settings.projects.sectionSubtitle":
+    "Group related workspaces and reorder projects within each group.",
+  "settings.projects.groups.title": "Groups",
+  "settings.projects.groups.subtitle":
+    "Create group labels for related repositories.",
+  "settings.projects.groups.newPlaceholder": "New group name",
+  "settings.projects.groups.add": "Add group",
+  "settings.projects.groups.copiesFolder": "Copies folder",
+  "settings.projects.groups.copiesFolder.notSet": "Not set",
+  "settings.projects.groups.choose": "Choose…",
+  "settings.projects.groups.clear": "Clear",
+  "settings.projects.groups.moveUp": "Move group up",
+  "settings.projects.groups.moveDown": "Move group down",
+  "settings.projects.groups.delete": "Delete group",
+  "settings.projects.groups.empty": "No groups yet.",
+  "settings.projects.list.title": "Projects",
+  "settings.projects.list.subtitle":
+    "Assign projects to groups and adjust their order.",
+  "settings.projects.list.moveUp": "Move project up",
+  "settings.projects.list.moveDown": "Move project down",
+  "settings.projects.list.delete": "Delete project",
+  "settings.projects.list.empty": "No projects yet.",
+  "settings.about.unknown": "unknown",
+  "settings.about.version": "Version",
+  "settings.about.buildType": "Build type",
+  "settings.about.branch": "Branch",
+  "settings.about.commit": "Commit",
+  "settings.about.buildDate": "Build date",
+  "settings.about.updates.title": "App Updates",
+  "settings.about.updates.currentVersion": "Currently running version",
+  "settings.about.updates.unavailable":
+    "Updates are unavailable in this runtime.",
+  "settings.about.updates.error": "Update failed",
+  "settings.about.updates.downloading": "Downloading update...",
+  "settings.about.updates.installing": "Installing update...",
+  "settings.about.updates.restarting": "Restarting...",
+  "settings.about.updates.available.prefix": "Version",
+  "settings.about.updates.available.suffix": "is available.",
+  "settings.about.updates.latest": "You are on the latest version.",
+  "settings.about.updates.downloadInstall": "Download & Install",
+  "settings.about.updates.checking": "Checking...",
+  "settings.about.updates.check": "Check for updates",
+  "settings.composer.sectionTitle": "Composer",
+  "settings.composer.sectionSubtitle":
+    "Control helpers and formatting behavior inside the message editor.",
+  "settings.composer.followUp.label": "Follow-up behavior",
+  "settings.composer.followUp.option.queue": "Queue",
+  "settings.composer.followUp.option.steer": "Steer",
+  "settings.composer.followUp.steerUnavailableTitle":
+    "Steer is unavailable in the current Codex config.",
+  "settings.composer.followUp.help.before":
+    "Choose the default while a run is active. Press ",
+  "settings.composer.followUp.help.after":
+    " to send the opposite behavior for one message.",
+  "settings.composer.followUp.hint.title":
+    "Show follow-up hint while processing",
+  "settings.composer.followUp.hint.subtitle":
+    "Displays queue/steer shortcut guidance above the composer.",
+  "settings.composer.followUp.steerUnavailableHelp":
+    "Steer is unavailable in the current Codex config. Follow-ups will queue.",
+  "settings.composer.presets.title": "Presets",
+  "settings.composer.presets.subtitle":
+    "Choose a starting point and fine-tune the toggles below.",
+  "settings.composer.presets.label": "Preset",
+  "settings.composer.presets.help":
+    "Presets update the toggles below. Customize any setting after selecting.",
+  "settings.composer.codeFences.title": "Code fences",
+  "settings.composer.codeFences.space.title": "Expand fences on Space",
+  "settings.composer.codeFences.space.subtitle":
+    "Typing ``` then Space inserts a fenced block.",
+  "settings.composer.codeFences.enter.title": "Expand fences on Enter",
+  "settings.composer.codeFences.enter.subtitle":
+    "Use Enter to expand ``` lines when enabled.",
+  "settings.composer.codeFences.langTags.title": "Support language tags",
+  "settings.composer.codeFences.langTags.subtitle":
+    "Allows ```lang + Space to include a language.",
+  "settings.composer.codeFences.wrapSelection.title":
+    "Wrap selection in fences",
+  "settings.composer.codeFences.wrapSelection.subtitle":
+    "Wraps selected text when creating a fence.",
+  "settings.composer.codeFences.copyNoFence.title":
+    "Copy blocks without fences",
+  "settings.composer.codeFences.copyNoFence.subtitle.before":
+    "When enabled, Copy is plain text. Hold ",
+  "settings.composer.codeFences.copyNoFence.subtitle.after":
+    " to include ``` fences.",
+  "settings.composer.pasting.title": "Pasting",
+  "settings.composer.pasting.multiline.title": "Auto-wrap multi-line paste",
+  "settings.composer.pasting.multiline.subtitle":
+    "Wraps multi-line paste inside a fenced block.",
+  "settings.composer.pasting.codeLike.title":
+    "Auto-wrap code-like single lines",
+  "settings.composer.pasting.codeLike.subtitle":
+    "Wraps long single-line code snippets on paste.",
+  "settings.composer.lists.title": "Lists",
+  "settings.composer.lists.continue.title":
+    "Continue lists on Shift+Enter",
+  "settings.composer.lists.continue.subtitle":
+    "Continues numbered and bulleted lists when the line has content.",
+  "settings.dictation.sectionTitle": "Dictation",
+  "settings.dictation.sectionSubtitle":
+    "Enable microphone dictation with on-device transcription.",
+  "settings.dictation.enable.title": "Enable dictation",
+  "settings.dictation.enable.subtitle":
+    "Downloads the selected Whisper model on first use.",
+  "settings.dictation.model.label": "Dictation model",
+  "settings.dictation.model.downloadSize": "Download size",
+  "settings.dictation.language.label": "Preferred dictation language",
+  "settings.dictation.language.autoDetect": "Auto-detect only",
+  "settings.dictation.language.en": "English",
+  "settings.dictation.language.es": "Spanish",
+  "settings.dictation.language.fr": "French",
+  "settings.dictation.language.de": "German",
+  "settings.dictation.language.it": "Italian",
+  "settings.dictation.language.pt": "Portuguese",
+  "settings.dictation.language.nl": "Dutch",
+  "settings.dictation.language.sv": "Swedish",
+  "settings.dictation.language.no": "Norwegian",
+  "settings.dictation.language.da": "Danish",
+  "settings.dictation.language.fi": "Finnish",
+  "settings.dictation.language.pl": "Polish",
+  "settings.dictation.language.tr": "Turkish",
+  "settings.dictation.language.ru": "Russian",
+  "settings.dictation.language.uk": "Ukrainian",
+  "settings.dictation.language.ja": "Japanese",
+  "settings.dictation.language.ko": "Korean",
+  "settings.dictation.language.zh": "Chinese",
+  "settings.dictation.language.help":
+    "Auto-detect stays on; this nudges the decoder toward your preference.",
+  "settings.dictation.holdKey.label": "Hold-to-dictate key",
+  "settings.dictation.holdKey.off": "Off",
+  "settings.dictation.holdKey.help":
+    "Hold the key to start dictation, release to stop and process.",
+  "settings.dictation.status.label": "Model status",
+  "settings.dictation.status.ready": "Ready for dictation.",
+  "settings.dictation.status.missing": "Model not downloaded yet.",
+  "settings.dictation.status.downloading": "Downloading model...",
+  "settings.dictation.status.errorFallback": "Download error.",
+  "settings.dictation.actions.download": "Download model",
+  "settings.dictation.actions.cancelDownload": "Cancel download",
+  "settings.dictation.actions.removeModel": "Remove model",
+  "settings.git.sectionSubtitle":
+    "Manage how diffs are loaded in the Git sidebar.",
+  "settings.git.preloadDiffs.title": "Preload git diffs",
+  "settings.git.preloadDiffs.subtitle": "Make viewing git diff faster.",
+  "settings.git.ignoreWhitespace.title": "Ignore whitespace changes",
+  "settings.git.ignoreWhitespace.subtitle":
+    "Hides whitespace-only changes in local and commit diffs.",
+  "settings.git.commitPrompt.label": "Commit message prompt",
+  "settings.git.commitPrompt.help.before":
+    "Used when generating commit messages. Include ",
+  "settings.git.commitPrompt.help.after": " to insert the git diff.",
+  "settings.git.commitPrompt.reset": "Reset",
+  "settings.git.commitPrompt.saving": "Saving...",
+  "settings.git.commitPrompt.save": "Save",
+  "settings.git.commitModel.label": "Commit message model",
+  "settings.git.commitModel.help":
+    "The model used when generating commit messages. Leave on default to use the workspace model.",
+  "settings.git.commitModel.default": "Default",
+  "settings.environments.sectionTitle": "Environments",
+  "settings.environments.sectionSubtitle":
+    "Configure per-project setup scripts that run after worktree creation.",
+  "settings.environments.emptyNoProjects": "No projects yet.",
+  "settings.environments.project.label": "Project",
+  "settings.environments.setupScript.label": "Setup script",
+  "settings.environments.setupScript.help":
+    "Runs once in a dedicated terminal after each new worktree is created.",
+  "settings.environments.clipboard.copyFailedTitle": "Copy failed",
+  "settings.environments.clipboard.unavailable":
+    "Clipboard access is unavailable in this environment. Copy the script manually instead.",
+  "settings.environments.clipboard.writeFailed":
+    "Could not write to the clipboard. Copy the script manually instead.",
+  "settings.environments.actions.copy": "Copy",
+  "settings.environments.actions.reset": "Reset",
+  "settings.environments.actions.saving": "Saving...",
+  "settings.environments.actions.save": "Save",
+  "settings.features.sectionTitle": "Features",
+  "settings.features.sectionSubtitle": "Manage stable and experimental Codex features.",
+  "settings.features.configFile.title": "Config file",
+  "settings.features.configFile.subtitle": "Open the Codex config in {fileManager}.",
+  "settings.features.stable.title": "Stable Features",
+  "settings.features.stable.subtitle": "Production-ready features enabled by default.",
+  "settings.features.personality.title": "Personality",
+  "settings.features.personality.subtitle.before":
+    "Choose Codex communication style (writes top-level ",
+  "settings.features.personality.subtitle.after": " in config.toml).",
+  "settings.features.personality.option.friendly": "Friendly",
+  "settings.features.personality.option.pragmatic": "Pragmatic",
+  "settings.features.pauseQueue.title":
+    "Pause queued messages when a response is required",
+  "settings.features.pauseQueue.subtitle":
+    "Keep queued messages paused while Codex is waiting for plan accept/changes or your answers.",
+  "settings.features.noStable": "No stable feature flags returned by Codex.",
+  "settings.features.experimental.title": "Experimental Features",
+  "settings.features.experimental.subtitle": "Preview and under-development features.",
+  "settings.features.noExperimental":
+    "No preview or under-development feature flags returned by Codex.",
+  "settings.features.loading": "Loading Codex feature flags...",
+  "settings.features.connectWorkspace":
+    "Connect a workspace to load Codex feature flags.",
+  "settings.features.feature.deprecated": "Deprecated feature flag.",
+  "settings.features.feature.removed":
+    "Legacy feature flag kept for backward compatibility.",
+  "settings.features.feature.key": "Feature key: features.{name}",
+  "settings.display.sectionTitle": "Display & Sound",
+  "settings.display.sectionSubtitle": "Tune visuals and audio alerts to your preferences.",
+  "settings.display.subsectionDisplayTitle": "Display",
+  "settings.display.subsectionDisplaySubtitle":
+    "Adjust how the window renders backgrounds and effects.",
+  "settings.display.theme.label": "Theme",
+  "settings.display.theme.option.system": "System",
+  "settings.display.theme.option.light": "Light",
+  "settings.display.theme.option.dark": "Dark",
+  "settings.display.theme.option.dim": "Dim",
+  "settings.display.uiLanguage.label": "Interface language",
+  "settings.display.uiLanguage.help":
+    "Use System to follow your device language. Changes apply immediately.",
+  "settings.display.uiLanguage.option.system": "System",
+  "settings.display.uiLanguage.option.en": "English",
+  "settings.display.uiLanguage.option.zh-CN": "简体中文",
+  "settings.display.usageRemaining.title": "Show remaining Codex limits",
+  "settings.display.usageRemaining.subtitle": "Display what is left instead of what is used.",
+  "settings.display.filePathInMessages.title": "Show file path in messages",
+  "settings.display.filePathInMessages.subtitle":
+    "Display the parent path next to file links in messages.",
+  "settings.display.splitChatDiff.title": "Split chat and diff center panes",
+  "settings.display.splitChatDiff.subtitle":
+    "Show chat and diff side by side instead of swapping between them.",
+  "settings.display.autoThreadTitle.title": "Auto-generate new thread titles",
+  "settings.display.autoThreadTitle.subtitle":
+    "Generate a short title from your first message (uses extra tokens).",
+  "settings.display.subsectionChatTitle": "Chat",
+  "settings.display.subsectionChatSubtitle":
+    "Control how much conversation history is retained per thread.",
+  "settings.display.unlimitedChatHistory.title": "Unlimited chat history",
+  "settings.display.unlimitedChatHistory.subtitle":
+    "Keep full thread history in memory (may impact performance).",
+  "settings.display.scrollbackPreset.label": "Scrollback preset",
+  "settings.display.scrollbackPreset.option.custom": "Custom",
+  "settings.display.scrollbackPreset.option.default": "{value} (Default)",
+  "settings.display.scrollbackPreset.help":
+    "Higher values keep more history but may increase memory usage. Use “Sync from server” on a thread to re-fetch older messages.",
+  "settings.display.maxItemsPerThread.label": "Max items per thread",
+  "settings.display.maxItemsPerThread.help":
+    "Range: {min}–{max}. Counts messages, tool calls, and other conversation items.",
+  "settings.display.reduceTransparency.title": "Reduce transparency",
+  "settings.display.reduceTransparency.subtitle": "Use solid surfaces instead of glass.",
+  "settings.display.interfaceScale.title": "Interface scale",
+  "settings.display.interfaceScale.aria": "Interface scale",
+  "settings.display.uiFontFamily.label": "UI font family",
+  "settings.display.uiFontFamily.help":
+    "Applies to all UI text. Leave empty to use the default system font stack.",
+  "settings.display.codeFontFamily.label": "Code font family",
+  "settings.display.codeFontFamily.help":
+    "Applies to git diffs and other mono-spaced readouts.",
+  "settings.display.codeFontSize.label": "Code font size",
+  "settings.display.codeFontSize.value": "{size}px",
+  "settings.display.codeFontSize.help": "Adjusts code and diff text size.",
+  "settings.display.subsectionSoundsTitle": "Sounds",
+  "settings.display.subsectionSoundsSubtitle": "Control notification audio alerts.",
+  "settings.display.notificationSounds.title": "Notification sounds",
+  "settings.display.notificationSounds.subtitle":
+    "Play a sound when a long-running agent finishes while the window is unfocused.",
+  "settings.display.systemNotifications.title": "System notifications",
+  "settings.display.systemNotifications.subtitle":
+    "Show a system notification when a long-running agent finishes while the window is unfocused.",
+  "settings.display.subagentNotifications.title": "Sub-agent notifications",
+  "settings.display.subagentNotifications.subtitle":
+    "Include spawned sub-agent threads in system notifications.",
+  "settings.display.testSound": "Test sound",
+  "settings.display.testNotification": "Test notification",
+};
diff --git a/src/i18n/locales/zh-CN.ts b/src/i18n/locales/zh-CN.ts
new file mode 100644
index 000000000..39738773a
--- /dev/null
+++ b/src/i18n/locales/zh-CN.ts
@@ -0,0 +1,521 @@
+import type { TranslationDictionary } from "../types";
+
+export const zhCN: TranslationDictionary = {
+  "common.reset": "重置",
+  "common.punctuation.period": "。",
+  "settings.shell.title": "设置",
+  "settings.shell.close": "关闭设置",
+  "settings.shell.mobile.back": "返回设置分区",
+  "settings.shell.mobile.sections": "分区",
+  "settings.nav.projects": "项目",
+  "settings.nav.environments": "环境",
+  "settings.nav.display": "显示与声音",
+  "settings.nav.composer": "编辑器",
+  "settings.nav.dictation": "听写",
+  "settings.nav.shortcuts": "快捷键",
+  "settings.nav.openApps": "打开方式",
+  "settings.nav.git": "Git",
+  "settings.nav.server": "服务端",
+  "settings.nav.agents": "代理",
+  "settings.nav.codex": "Codex",
+  "settings.nav.features": "功能",
+  "settings.nav.about": "关于",
+  "settings.codex.sectionTitle": "Codex",
+  "settings.codex.sectionSubtitle": "配置 CodexMonitor 使用的 Codex CLI，并验证安装状态。",
+  "settings.codex.path.label": "默认 Codex 路径",
+  "settings.codex.path.browse": "浏览",
+  "settings.codex.path.usePath": "使用 PATH",
+  "settings.codex.path.help": "留空则使用系统 PATH 解析。",
+  "settings.codex.args.label": "默认 Codex 参数",
+  "settings.codex.args.clear": "清除",
+  "settings.codex.args.help.before": "在 ",
+  "settings.codex.args.help.after": " 前追加的额外参数。包含空格的值请使用引号。",
+  "settings.codex.args.sharedHelp":
+    "这些设置会应用到所有已连接工作区共享的 Codex app-server。",
+  "settings.codex.unsupportedFlags.prefix": "线程级覆盖会忽略以下不支持参数：",
+  "settings.codex.unsupportedFlags.and": "以及",
+  "settings.codex.actions.save": "保存",
+  "settings.codex.actions.saving": "保存中...",
+  "settings.codex.actions.runDoctor": "运行诊断",
+  "settings.codex.actions.running": "运行中...",
+  "settings.codex.actions.updateCodex": "更新 Codex",
+  "settings.codex.actions.update": "更新",
+  "settings.codex.actions.updating": "更新中...",
+  "settings.codex.doctor.okTitle": "Codex 状态正常",
+  "settings.codex.doctor.errorTitle": "检测到 Codex 问题",
+  "settings.codex.doctor.version": "版本",
+  "settings.codex.doctor.unknown": "未知",
+  "settings.codex.doctor.appServer": "App-server",
+  "settings.codex.doctor.ok": "正常",
+  "settings.codex.doctor.failed": "失败",
+  "settings.codex.doctor.node": "Node",
+  "settings.codex.doctor.missing": "缺失",
+  "settings.codex.update.updated": "Codex 已更新",
+  "settings.codex.update.upToDate": "Codex 已是最新",
+  "settings.codex.update.failed": "Codex 更新失败",
+  "settings.codex.update.method": "方式",
+  "settings.codex.update.package": "包",
+  "settings.codex.update.output": "输出",
+  "settings.codex.defaults.sectionTitle": "默认参数",
+  "settings.codex.defaults.model.label": "模型",
+  "settings.codex.defaults.model.addWorkspace": "添加工作区以加载可用模型。",
+  "settings.codex.defaults.model.loading": "正在从第一个工作区加载模型…",
+  "settings.codex.defaults.model.loadError": "无法加载模型: {error}",
+  "settings.codex.defaults.model.help": "来自第一个工作区；当没有线程级覆盖时使用。",
+  "settings.codex.defaults.model.refresh": "刷新",
+  "settings.codex.defaults.reasoning.label": "推理强度",
+  "settings.codex.defaults.reasoning.supported": "可用选项取决于所选模型。",
+  "settings.codex.defaults.reasoning.unsupported": "当前模型不提供推理强度选项。",
+  "settings.codex.defaults.reasoning.notSupported": "不支持",
+  "settings.codex.defaults.access.label": "权限模式",
+  "settings.codex.defaults.access.help": "当没有线程级覆盖时使用。",
+  "settings.codex.defaults.access.option.readOnly": "只读",
+  "settings.codex.defaults.access.option.current": "按需请求",
+  "settings.codex.defaults.access.option.fullAccess": "完全访问",
+  "settings.codex.review.label": "审查模式",
+  "settings.codex.review.option.inline": "内联（同一线程）",
+  "settings.codex.review.option.detached": "分离（新审查线程）",
+  "settings.codex.review.help.before": "选择 ",
+  "settings.codex.review.help.after": " 在当前线程运行，还是在独立审查线程运行。",
+  "settings.codex.globalAgents.title": "全局 AGENTS.md",
+  "settings.codex.globalAgents.placeholder": "为 Codex agents 添加全局说明…",
+  "settings.codex.globalConfig.title": "全局 config.toml",
+  "settings.codex.globalConfig.placeholder": "编辑全局 Codex config.toml…",
+  "settings.codex.file.storedAt": "存储位置：",
+  "settings.server.sectionTitle": "服务端",
+  "settings.server.sectionSubtitle.mobile": "从桌面端配置 TCP 主机/令牌，然后运行连接测试。",
+  "settings.server.sectionSubtitle.desktop":
+    "配置 CodexMonitor 如何为移动端与远程客户端暴露 TCP 后端访问。除非明确切换到远程模式，否则桌面端仍使用本地模式。",
+  "settings.server.addRemote.error": "无法添加远程配置。",
+  "settings.server.backendMode.label": "后端模式",
+  "settings.server.backendMode.option.local": "本地（默认）",
+  "settings.server.backendMode.option.remote": "远程（守护进程）",
+  "settings.server.backendMode.help":
+    "本地模式在进程内处理桌面端请求。远程模式会通过与移动端相同的 TCP 传输路径转发桌面端请求。",
+  "settings.server.savedRemotes.label": "已保存远程配置",
+  "settings.server.savedRemotes.active": "当前",
+  "settings.server.savedRemotes.lastConnected": "上次连接",
+  "settings.server.savedRemotes.never": "从未",
+  "settings.server.savedRemotes.useAria": "使用远程配置 {name}",
+  "settings.server.savedRemotes.use": "使用",
+  "settings.server.savedRemotes.using": "使用中",
+  "settings.server.savedRemotes.moveUpAria": "上移 {name}",
+  "settings.server.savedRemotes.moveDownAria": "下移 {name}",
+  "settings.server.savedRemotes.deleteAria": "删除 {name}",
+  "settings.server.savedRemotes.delete": "删除",
+  "settings.server.savedRemotes.add": "添加远程配置",
+  "settings.server.savedRemotes.help": "在此切换当前远程配置。下方字段用于编辑当前条目。",
+  "settings.server.remoteName.label": "远程名称",
+  "settings.server.remoteName.placeholder": "我的桌面端",
+  "settings.server.keepDaemon.title": "应用关闭后保持守护进程运行",
+  "settings.server.keepDaemon.subtitle": "关闭后 CodexMonitor 会在退出前停止受管 TCP 守护进程。",
+  "settings.server.remoteBackend.label": "远程后端",
+  "settings.server.remoteBackend.hostAria": "远程后端主机",
+  "settings.server.remoteBackend.tokenPlaceholder": "令牌（必填）",
+  "settings.server.remoteBackend.tokenAria": "远程后端令牌",
+  "settings.server.connectionTest.label": "连接测试",
+  "settings.server.connectionTest.connecting": "连接中...",
+  "settings.server.connectionTest.button": "连接并测试",
+  "settings.server.connectionTest.help":
+    "请确认桌面端守护进程已运行且可通过 Tailscale 访问，然后重试此测试。",
+  "settings.server.mobileDaemon.label": "移动端访问守护进程",
+  "settings.server.mobileDaemon.starting": "启动中...",
+  "settings.server.mobileDaemon.start": "启动守护进程",
+  "settings.server.mobileDaemon.stopping": "停止中...",
+  "settings.server.mobileDaemon.stop": "停止守护进程",
+  "settings.server.mobileDaemon.refreshing": "刷新中...",
+  "settings.server.mobileDaemon.refresh": "刷新状态",
+  "settings.server.mobileDaemon.startedAt": "启动时间",
+  "settings.server.mobileDaemon.help.before":
+    "从 iOS 连接前先启动该守护进程。它会使用当前令牌，并监听",
+  "settings.server.mobileDaemon.help.after":
+    "（端口与已配置主机端口一致）。",
+  "settings.server.mobileDaemon.errorFallback": "移动端守护进程处于错误状态。",
+  "settings.server.tailscale.label": "Tailscale 助手",
+  "settings.server.tailscale.checking": "检测中...",
+  "settings.server.tailscale.detect": "检测 Tailscale",
+  "settings.server.tailscale.refreshing": "刷新中...",
+  "settings.server.tailscale.refreshCommand": "刷新守护进程命令",
+  "settings.server.tailscale.useSuggestedHost": "使用建议主机",
+  "settings.server.tailscale.version": "版本",
+  "settings.server.tailscale.unknown": "未知",
+  "settings.server.tailscale.installHelp": "请在桌面端和 iOS 端都安装 Tailscale 后继续。",
+  "settings.server.tailscale.suggestedHost": "建议远程主机",
+  "settings.server.tailscale.commandTemplate": "启动守护进程的命令模板（手动备用方案）：",
+  "settings.server.tailscale.tokenMissing":
+    "远程后端令牌为空。暴露守护进程访问前请先设置令牌。",
+  "settings.server.footerHelp.mobile":
+    "仅使用你自己的基础设施。在 iOS 上，请从桌面端 CodexMonitor 配置获取 Tailscale 主机名和令牌。",
+  "settings.server.footerHelp.desktop":
+    "移动端访问应限制在你自己的基础设施（tailnet）内。CodexMonitor 不提供托管后端服务。",
+  "settings.server.addModal.ariaLabel": "添加远程配置",
+  "settings.server.addModal.title": "添加远程配置",
+  "settings.server.addModal.closeAria": "关闭添加远程配置弹窗",
+  "settings.server.addModal.nameLabel": "新远程名称",
+  "settings.server.addModal.hostLabel": "新远程主机",
+  "settings.server.addModal.tokenLabel": "新远程令牌",
+  "settings.server.addModal.tokenPlaceholder": "令牌",
+  "settings.server.addModal.cancel": "取消",
+  "settings.server.addModal.confirm": "连接并添加",
+  "settings.server.deleteModal.ariaLabel": "删除远程配置确认",
+  "settings.server.deleteModal.title": "删除远程配置？",
+  "settings.server.deleteModal.message.before": "从已保存远程配置中移除 ",
+  "settings.server.deleteModal.message.after": "？此操作只会删除本设备上的配置。",
+  "settings.server.deleteModal.cancel": "取消",
+  "settings.server.deleteModal.confirm": "删除远程配置",
+  "settings.agents.openPathError": "无法打开路径。",
+  "settings.agents.nameRequired": "必须填写代理名称。",
+  "settings.agents.sectionTitle": "代理",
+  "settings.agents.sectionSubtitle": "配置多代理模式、限制与自定义代理角色。",
+  "settings.agents.builtins.before": "Codex 内置角色仍然可用：",
+  "settings.agents.builtins.middle1": "、",
+  "settings.agents.builtins.middle2": " 和",
+  "settings.agents.builtins.after": "。",
+  "settings.agents.configFile.title": "配置文件",
+  "settings.agents.configFile.subtitle": "在 {fileManager} 中打开全局 Codex 配置。",
+  "settings.agents.refresh": "刷新",
+  "settings.agents.multiAgent.title": "启用多代理",
+  "settings.agents.maxThreads.title": "最大线程数",
+  "settings.agents.maxThreads.subtitle.before": "最大打开代理线程数。有效范围：",
+  "settings.agents.maxThreads.subtitle.after": "。修改会立即保存。",
+  "settings.agents.maxThreads.groupAria": "最大代理线程数",
+  "settings.agents.maxThreads.decreaseAria": "减少最大线程数",
+  "settings.agents.maxThreads.increaseAria": "增加最大线程数",
+  "settings.agents.maxDepth.title": "最大深度",
+  "settings.agents.maxDepth.subtitle.before": "最大嵌套派生深度。有效范围：",
+  "settings.agents.maxDepth.subtitle.after": "。修改会立即保存。",
+  "settings.agents.maxDepth.groupAria": "最大代理深度",
+  "settings.agents.maxDepth.decreaseAria": "减少最大深度",
+  "settings.agents.maxDepth.increaseAria": "增加最大深度",
+  "settings.agents.create.title": "创建代理",
+  "settings.agents.create.subtitle.before": "在 ",
+  "settings.agents.create.subtitle.after": " 下添加自定义角色并创建其配置文件。",
+  "settings.agents.field.name": "名称",
+  "settings.agents.field.description": "描述",
+  "settings.agents.field.developerInstructions": "开发者说明",
+  "settings.agents.generate.title": "使用 AI 生成描述与开发者说明",
+  "settings.agents.generate.createAria": "为新代理生成字段",
+  "settings.agents.generate.editAria": "为 {name} 生成字段",
+  "settings.agents.create.namePlaceholder": "researcher（示例）",
+  "settings.agents.create.descriptionPlaceholder": "简短角色说明。",
+  "settings.agents.create.developerInstructionsPlaceholder": "多行的代理级开发者说明。",
+  "settings.agents.create.modelAria": "代理模型",
+  "settings.agents.create.reasoningLabel": "推理：",
+  "settings.agents.create.reasoningAria": "代理推理强度",
+  "settings.agents.create.notSupported": "不支持",
+  "settings.agents.create.creating": "创建中...",
+  "settings.agents.create.create": "创建代理",
+  "settings.agents.configured.title": "已配置代理",
+  "settings.agents.configured.subtitle": "管理自定义角色及其代理级配置文件。",
+  "settings.agents.configured.empty": "还没有配置自定义代理。",
+  "settings.agents.card.noDescription": "无描述。",
+  "settings.agents.card.missingConfigFile": "（缺少 config_file）",
+  "settings.agents.card.edit": "编辑",
+  "settings.agents.card.delete": "删除",
+  "settings.agents.card.opening": "打开中...",
+  "settings.agents.card.editFile": "编辑文件",
+  "settings.agents.card.externalPath": "外部路径",
+  "settings.agents.card.deleteConfirmPrompt": "删除代理及受管配置文件？",
+  "settings.agents.card.cancel": "取消",
+  "settings.agents.card.deleting": "删除中...",
+  "settings.agents.card.confirmDelete": "确认删除",
+  "settings.agents.edit.renameManagedFile": "代理名称变化时重命名受管配置文件",
+  "settings.agents.edit.saving": "保存中...",
+  "settings.agents.edit.save": "保存",
+  "settings.agents.editor.configFileSuffix": "配置文件",
+  "settings.agents.editor.close": "关闭",
+  "settings.agents.loading": "正在加载代理设置...",
+  "settings.shortcuts.field.inputPlaceholder": "输入快捷键",
+  "settings.shortcuts.field.clear": "清除",
+  "settings.shortcuts.group.file.title": "文件",
+  "settings.shortcuts.group.file.subtitle": "用键盘创建代理和 worktree。",
+  "settings.shortcuts.item.newAgent": "新建代理",
+  "settings.shortcuts.item.newWorktreeAgent": "新建 Worktree 代理",
+  "settings.shortcuts.item.newCloneAgent": "新建克隆代理",
+  "settings.shortcuts.item.archiveThread": "归档当前线程",
+  "settings.shortcuts.group.composer.title": "编辑器",
+  "settings.shortcuts.group.composer.subtitle": "在模型、权限、推理和协作模式间切换。",
+  "settings.shortcuts.item.cycleModel": "切换模型",
+  "settings.shortcuts.item.cycleAccess": "切换权限模式",
+  "settings.shortcuts.item.cycleReasoning": "切换推理模式",
+  "settings.shortcuts.item.cycleCollaboration": "切换协作模式",
+  "settings.shortcuts.item.stopRun": "停止当前运行",
+  "settings.shortcuts.group.panels.title": "面板",
+  "settings.shortcuts.group.panels.subtitle": "切换侧边栏和面板。",
+  "settings.shortcuts.item.toggleProjectsSidebar": "切换项目侧边栏",
+  "settings.shortcuts.item.toggleGitSidebar": "切换 Git 侧边栏",
+  "settings.shortcuts.item.branchSwitcher": "分支切换器",
+  "settings.shortcuts.item.toggleDebugPanel": "切换调试面板",
+  "settings.shortcuts.item.toggleTerminalPanel": "切换终端面板",
+  "settings.shortcuts.group.navigation.title": "导航",
+  "settings.shortcuts.group.navigation.subtitle": "在代理和工作区之间切换。",
+  "settings.shortcuts.item.nextAgent": "下一个代理",
+  "settings.shortcuts.item.prevAgent": "上一个代理",
+  "settings.shortcuts.item.nextWorkspace": "下一个工作区",
+  "settings.shortcuts.item.prevWorkspace": "上一个工作区",
+  "settings.shortcuts.sectionTitle": "快捷键",
+  "settings.shortcuts.sectionSubtitle":
+    "自定义文件操作、编辑器、面板和导航的键盘快捷键。",
+  "settings.shortcuts.search.label": "搜索快捷键",
+  "settings.shortcuts.search.placeholder": "搜索快捷键",
+  "settings.shortcuts.search.help": "按分区名称、动作或默认快捷键筛选。",
+  "settings.shortcuts.empty.prefix": "没有匹配的快捷键：",
+  "settings.shortcuts.empty.fallback": "你的搜索",
+  "settings.shortcuts.empty.suffix": "。",
+  "settings.openApps.sectionTitle": "打开方式",
+  "settings.openApps.sectionSubtitle":
+    "自定义标题栏和文件预览中的“打开方式”菜单。",
+  "settings.openApps.validation.labelRequired": "必须填写标签",
+  "settings.openApps.validation.appNameRequired": "必须填写应用名",
+  "settings.openApps.validation.commandRequired": "必须填写命令",
+  "settings.openApps.validation.completeRequired": "请填写必填项",
+  "settings.openApps.field.label": "标签",
+  "settings.openApps.field.type": "类型",
+  "settings.openApps.field.typeAria": "打开方式类型 {index}",
+  "settings.openApps.option.app": "应用",
+  "settings.openApps.option.command": "命令",
+  "settings.openApps.field.appName": "应用名",
+  "settings.openApps.field.command": "命令",
+  "settings.openApps.field.args": "参数",
+  "settings.openApps.status.incomplete": "未完成",
+  "settings.openApps.default": "默认",
+  "settings.openApps.moveUp": "上移",
+  "settings.openApps.moveDown": "下移",
+  "settings.openApps.remove": "删除项",
+  "settings.openApps.add": "添加项",
+  "settings.openApps.help.commandsPrefix": "命令会将所选路径作为最后一个参数传入。 ",
+  "settings.openApps.help.apps.mac": "应用通过 `open -a` 启动，并可附带可选参数。",
+  "settings.openApps.help.apps.other": "应用作为可执行文件运行，并可附带可选参数。",
+  "settings.projects.sectionTitle": "项目",
+  "settings.projects.sectionSubtitle": "为相关工作区分组，并调整各组内项目顺序。",
+  "settings.projects.groups.title": "分组",
+  "settings.projects.groups.subtitle": "为相关仓库创建分组标签。",
+  "settings.projects.groups.newPlaceholder": "新分组名称",
+  "settings.projects.groups.add": "添加分组",
+  "settings.projects.groups.copiesFolder": "副本目录",
+  "settings.projects.groups.copiesFolder.notSet": "未设置",
+  "settings.projects.groups.choose": "选择…",
+  "settings.projects.groups.clear": "清除",
+  "settings.projects.groups.moveUp": "分组上移",
+  "settings.projects.groups.moveDown": "分组下移",
+  "settings.projects.groups.delete": "删除分组",
+  "settings.projects.groups.empty": "还没有分组。",
+  "settings.projects.list.title": "项目",
+  "settings.projects.list.subtitle": "将项目分配到分组并调整顺序。",
+  "settings.projects.list.moveUp": "项目上移",
+  "settings.projects.list.moveDown": "项目下移",
+  "settings.projects.list.delete": "删除项目",
+  "settings.projects.list.empty": "还没有项目。",
+  "settings.about.unknown": "未知",
+  "settings.about.version": "版本",
+  "settings.about.buildType": "构建类型",
+  "settings.about.branch": "分支",
+  "settings.about.commit": "提交",
+  "settings.about.buildDate": "构建日期",
+  "settings.about.updates.title": "应用更新",
+  "settings.about.updates.currentVersion": "当前运行版本",
+  "settings.about.updates.unavailable": "当前运行环境不支持更新。",
+  "settings.about.updates.error": "更新失败",
+  "settings.about.updates.downloading": "正在下载更新...",
+  "settings.about.updates.installing": "正在安装更新...",
+  "settings.about.updates.restarting": "正在重启...",
+  "settings.about.updates.available.prefix": "发现可用版本",
+  "settings.about.updates.available.suffix": "可更新。",
+  "settings.about.updates.latest": "当前已是最新版本。",
+  "settings.about.updates.downloadInstall": "下载并安装",
+  "settings.about.updates.checking": "检查中...",
+  "settings.about.updates.check": "检查更新",
+  "settings.composer.sectionTitle": "编辑器",
+  "settings.composer.sectionSubtitle": "控制消息编辑器中的辅助功能与格式化行为。",
+  "settings.composer.followUp.label": "后续消息行为",
+  "settings.composer.followUp.option.queue": "排队",
+  "settings.composer.followUp.option.steer": "引导",
+  "settings.composer.followUp.steerUnavailableTitle": "当前 Codex 配置中不可用 Steer。",
+  "settings.composer.followUp.help.before": "运行进行中时使用的默认行为。按 ",
+  "settings.composer.followUp.help.after": " 可为单条消息发送相反行为。",
+  "settings.composer.followUp.hint.title": "处理时显示后续行为提示",
+  "settings.composer.followUp.hint.subtitle": "在编辑器上方显示 queue/steer 快捷键提示。",
+  "settings.composer.followUp.steerUnavailableHelp":
+    "当前 Codex 配置中不可用 Steer，后续消息将排队发送。",
+  "settings.composer.presets.title": "预设",
+  "settings.composer.presets.subtitle": "先选择一个起点预设，再微调下面的开关。",
+  "settings.composer.presets.label": "预设",
+  "settings.composer.presets.help":
+    "预设会更新下面的开关。选择后仍可继续自定义任意设置。",
+  "settings.composer.codeFences.title": "代码围栏",
+  "settings.composer.codeFences.space.title": "按空格展开围栏",
+  "settings.composer.codeFences.space.subtitle": "输入 ``` 后按空格插入代码块围栏。",
+  "settings.composer.codeFences.enter.title": "按回车展开围栏",
+  "settings.composer.codeFences.enter.subtitle": "启用后，使用回车展开 ``` 行。",
+  "settings.composer.codeFences.langTags.title": "支持语言标签",
+  "settings.composer.codeFences.langTags.subtitle":
+    "允许使用 ```lang + 空格 包含语言标签。",
+  "settings.composer.codeFences.wrapSelection.title": "用围栏包裹选中文本",
+  "settings.composer.codeFences.wrapSelection.subtitle":
+    "创建围栏时包裹当前选中文本。",
+  "settings.composer.codeFences.copyNoFence.title": "复制代码块时不带围栏",
+  "settings.composer.codeFences.copyNoFence.subtitle.before":
+    "启用后复制为纯文本。按住 ",
+  "settings.composer.codeFences.copyNoFence.subtitle.after": " 可包含 ``` 围栏。",
+  "settings.composer.pasting.title": "粘贴",
+  "settings.composer.pasting.multiline.title": "自动包裹多行粘贴",
+  "settings.composer.pasting.multiline.subtitle": "将多行粘贴内容包裹进代码围栏。",
+  "settings.composer.pasting.codeLike.title": "自动包裹类似代码的单行文本",
+  "settings.composer.pasting.codeLike.subtitle":
+    "粘贴时自动包裹较长的单行代码片段。",
+  "settings.composer.lists.title": "列表",
+  "settings.composer.lists.continue.title": "Shift+Enter 续写列表",
+  "settings.composer.lists.continue.subtitle":
+    "当当前行有内容时，继续编号/项目符号列表。",
+  "settings.dictation.sectionTitle": "听写",
+  "settings.dictation.sectionSubtitle": "启用麦克风听写与本地语音转写。",
+  "settings.dictation.enable.title": "启用听写",
+  "settings.dictation.enable.subtitle": "首次使用时下载所选 Whisper 模型。",
+  "settings.dictation.model.label": "听写模型",
+  "settings.dictation.model.downloadSize": "下载大小",
+  "settings.dictation.language.label": "首选听写语言",
+  "settings.dictation.language.autoDetect": "仅自动检测",
+  "settings.dictation.language.en": "英语",
+  "settings.dictation.language.es": "西班牙语",
+  "settings.dictation.language.fr": "法语",
+  "settings.dictation.language.de": "德语",
+  "settings.dictation.language.it": "意大利语",
+  "settings.dictation.language.pt": "葡萄牙语",
+  "settings.dictation.language.nl": "荷兰语",
+  "settings.dictation.language.sv": "瑞典语",
+  "settings.dictation.language.no": "挪威语",
+  "settings.dictation.language.da": "丹麦语",
+  "settings.dictation.language.fi": "芬兰语",
+  "settings.dictation.language.pl": "波兰语",
+  "settings.dictation.language.tr": "土耳其语",
+  "settings.dictation.language.ru": "俄语",
+  "settings.dictation.language.uk": "乌克兰语",
+  "settings.dictation.language.ja": "日语",
+  "settings.dictation.language.ko": "韩语",
+  "settings.dictation.language.zh": "中文",
+  "settings.dictation.language.help":
+    "自动检测仍会开启；此项只会引导解码器偏向你的语言偏好。",
+  "settings.dictation.holdKey.label": "按住说话快捷键",
+  "settings.dictation.holdKey.off": "关闭",
+  "settings.dictation.holdKey.help": "按住该键开始听写，松开后停止并处理。",
+  "settings.dictation.status.label": "模型状态",
+  "settings.dictation.status.ready": "可用于听写。",
+  "settings.dictation.status.missing": "模型尚未下载。",
+  "settings.dictation.status.downloading": "正在下载模型...",
+  "settings.dictation.status.errorFallback": "下载出错。",
+  "settings.dictation.actions.download": "下载模型",
+  "settings.dictation.actions.cancelDownload": "取消下载",
+  "settings.dictation.actions.removeModel": "移除模型",
+  "settings.git.sectionSubtitle": "管理 Git 侧边栏中 diff 的加载方式。",
+  "settings.git.preloadDiffs.title": "预加载 Git Diff",
+  "settings.git.preloadDiffs.subtitle": "加快查看 git diff 的速度。",
+  "settings.git.ignoreWhitespace.title": "忽略空白变化",
+  "settings.git.ignoreWhitespace.subtitle":
+    "在本地 diff 和提交 diff 中隐藏仅空白字符变化。",
+  "settings.git.commitPrompt.label": "提交信息提示词",
+  "settings.git.commitPrompt.help.before": "用于生成提交信息。包含 ",
+  "settings.git.commitPrompt.help.after": " 以插入 git diff。",
+  "settings.git.commitPrompt.reset": "重置",
+  "settings.git.commitPrompt.saving": "保存中...",
+  "settings.git.commitPrompt.save": "保存",
+  "settings.git.commitModel.label": "提交信息模型",
+  "settings.git.commitModel.help":
+    "用于生成提交信息的模型。保留默认则使用工作区模型。",
+  "settings.git.commitModel.default": "默认",
+  "settings.environments.sectionTitle": "环境",
+  "settings.environments.sectionSubtitle":
+    "为每个项目配置在创建 worktree 后运行的初始化脚本。",
+  "settings.environments.emptyNoProjects": "还没有项目。",
+  "settings.environments.project.label": "项目",
+  "settings.environments.setupScript.label": "初始化脚本",
+  "settings.environments.setupScript.help":
+    "每次新 worktree 创建后，在独立终端中运行一次。",
+  "settings.environments.clipboard.copyFailedTitle": "复制失败",
+  "settings.environments.clipboard.unavailable":
+    "当前环境无法访问剪贴板，请手动复制脚本。",
+  "settings.environments.clipboard.writeFailed":
+    "无法写入剪贴板，请手动复制脚本。",
+  "settings.environments.actions.copy": "复制",
+  "settings.environments.actions.reset": "重置",
+  "settings.environments.actions.saving": "保存中...",
+  "settings.environments.actions.save": "保存",
+  "settings.features.sectionTitle": "功能",
+  "settings.features.sectionSubtitle": "管理稳定版与实验版 Codex 功能。",
+  "settings.features.configFile.title": "配置文件",
+  "settings.features.configFile.subtitle": "在 {fileManager} 中打开 Codex 配置文件。",
+  "settings.features.stable.title": "稳定功能",
+  "settings.features.stable.subtitle": "默认启用、适合生产使用的功能。",
+  "settings.features.personality.title": "人格风格",
+  "settings.features.personality.subtitle.before": "选择 Codex 沟通风格（写入 config.toml 顶层 ",
+  "settings.features.personality.subtitle.after": "）。",
+  "settings.features.personality.option.friendly": "友好",
+  "settings.features.personality.option.pragmatic": "务实",
+  "settings.features.pauseQueue.title": "需要响应时暂停队列消息",
+  "settings.features.pauseQueue.subtitle":
+    "当 Codex 正在等待你接受/修改计划或等待你的回答时，保持队列消息暂停。",
+  "settings.features.noStable": "Codex 未返回稳定功能标志。",
+  "settings.features.experimental.title": "实验功能",
+  "settings.features.experimental.subtitle": "预览中或开发中的功能。",
+  "settings.features.noExperimental": "Codex 未返回预览或开发中功能标志。",
+  "settings.features.loading": "正在加载 Codex 功能标志...",
+  "settings.features.connectWorkspace": "连接一个工作区以加载 Codex 功能标志。",
+  "settings.features.feature.deprecated": "已弃用功能开关。",
+  "settings.features.feature.removed": "为向后兼容保留的旧功能开关。",
+  "settings.features.feature.key": "功能键：features.{name}",
+  "settings.display.sectionTitle": "显示与声音",
+  "settings.display.sectionSubtitle": "根据你的偏好调整界面视觉效果和提示音。",
+  "settings.display.subsectionDisplayTitle": "显示",
+  "settings.display.subsectionDisplaySubtitle": "调整窗口背景与视觉效果的呈现方式。",
+  "settings.display.theme.label": "主题",
+  "settings.display.theme.option.system": "跟随系统",
+  "settings.display.theme.option.light": "浅色",
+  "settings.display.theme.option.dark": "深色",
+  "settings.display.theme.option.dim": "微暗",
+  "settings.display.uiLanguage.label": "界面语言",
+  "settings.display.uiLanguage.help": "选择“跟随系统”会自动使用设备语言。切换后立即生效。",
+  "settings.display.uiLanguage.option.system": "跟随系统",
+  "settings.display.uiLanguage.option.en": "English",
+  "settings.display.uiLanguage.option.zh-CN": "简体中文",
+  "settings.display.usageRemaining.title": "显示 Codex 剩余额度",
+  "settings.display.usageRemaining.subtitle": "显示剩余量，而不是已使用量。",
+  "settings.display.filePathInMessages.title": "在消息中显示文件路径",
+  "settings.display.filePathInMessages.subtitle": "在消息里的文件链接旁显示父级路径。",
+  "settings.display.splitChatDiff.title": "拆分聊天与 Diff 中间面板",
+  "settings.display.splitChatDiff.subtitle": "聊天和 Diff 并排显示，而不是在两者之间切换。",
+  "settings.display.autoThreadTitle.title": "自动生成新线程标题",
+  "settings.display.autoThreadTitle.subtitle": "根据第一条消息生成简短标题（会消耗额外 tokens）。",
+  "settings.display.subsectionChatTitle": "聊天",
+  "settings.display.subsectionChatSubtitle": "控制每个线程保留多少历史内容。",
+  "settings.display.unlimitedChatHistory.title": "无限聊天历史",
+  "settings.display.unlimitedChatHistory.subtitle": "在内存中保留完整线程历史（可能影响性能）。",
+  "settings.display.scrollbackPreset.label": "历史记录预设",
+  "settings.display.scrollbackPreset.option.custom": "自定义",
+  "settings.display.scrollbackPreset.option.default": "{value}（默认）",
+  "settings.display.scrollbackPreset.help":
+    "更高的值会保留更多历史，但可能增加内存占用。可在某个线程使用“从服务器同步”重新拉取更早消息。",
+  "settings.display.maxItemsPerThread.label": "每线程最大项目数",
+  "settings.display.maxItemsPerThread.help":
+    "范围：{min}–{max}。计数包含消息、工具调用及其他会话项。",
+  "settings.display.reduceTransparency.title": "降低透明效果",
+  "settings.display.reduceTransparency.subtitle": "使用实体表面替代玻璃效果。",
+  "settings.display.interfaceScale.title": "界面缩放",
+  "settings.display.interfaceScale.aria": "界面缩放",
+  "settings.display.uiFontFamily.label": "界面字体",
+  "settings.display.uiFontFamily.help": "应用于所有界面文字。留空则使用默认系统字体栈。",
+  "settings.display.codeFontFamily.label": "代码字体",
+  "settings.display.codeFontFamily.help": "应用于 git diff 和其他等宽文本区域。",
+  "settings.display.codeFontSize.label": "代码字号",
+  "settings.display.codeFontSize.value": "{size}px",
+  "settings.display.codeFontSize.help": "调整代码与 diff 文本大小。",
+  "settings.display.subsectionSoundsTitle": "声音",
+  "settings.display.subsectionSoundsSubtitle": "控制通知声音提醒。",
+  "settings.display.notificationSounds.title": "通知声音",
+  "settings.display.notificationSounds.subtitle": "窗口未聚焦时，长时间运行的 agent 完成后播放提示音。",
+  "settings.display.systemNotifications.title": "系统通知",
+  "settings.display.systemNotifications.subtitle":
+    "窗口未聚焦时，长时间运行的 agent 完成后显示系统通知。",
+  "settings.display.subagentNotifications.title": "子代理通知",
+  "settings.display.subagentNotifications.subtitle": "在系统通知中包含已创建的子代理线程。",
+  "settings.display.testSound": "测试声音",
+  "settings.display.testNotification": "测试通知",
+};
diff --git a/src/i18n/provider.tsx b/src/i18n/provider.tsx
new file mode 100644
index 000000000..bf00a65ad
--- /dev/null
+++ b/src/i18n/provider.tsx
@@ -0,0 +1,53 @@
+import { createContext, useMemo, type ReactNode } from "react";
+import { DEFAULT_LOCALE, dictionaries, formatTranslation, resolveEffectiveLocale } from "./index";
+import type { SupportedLocale, TranslationParams, UiLanguagePreference } from "./types";
+
+export type I18nValue = {
+  locale: SupportedLocale;
+  languagePreference: UiLanguagePreference;
+  t: (key: string, params?: TranslationParams) => string;
+};
+
+function fallbackTranslate(key: string, params?: TranslationParams): string {
+  const english = dictionaries.en[key] ?? key;
+  return formatTranslation(english, params);
+}
+
+export const I18nContext = createContext<I18nValue>({
+  locale: DEFAULT_LOCALE,
+  languagePreference: "system",
+  t: fallbackTranslate,
+});
+
+type I18nProviderProps = {
+  children: ReactNode;
+  languagePreference?: UiLanguagePreference | null;
+};
+
+export function I18nProvider({ children, languagePreference }: I18nProviderProps) {
+  const resolvedPreference: UiLanguagePreference = (() => {
+    if (languagePreference === "en" || languagePreference === "zh-CN") {
+      return languagePreference;
+    }
+    return "system";
+  })();
+
+  const locale = resolveEffectiveLocale(resolvedPreference);
+  const value = useMemo<I18nValue>(() => {
+    return {
+      locale,
+      languagePreference: resolvedPreference,
+      t: (key, params) => {
+        const localized = dictionaries[locale][key];
+        const english = dictionaries.en[key];
+        const template = localized ?? english ?? key;
+        if (import.meta.env.DEV && !localized && !english) {
+          console.warn(`[i18n] Missing translation key: ${key}`);
+        }
+        return formatTranslation(template, params);
+      },
+    };
+  }, [locale, resolvedPreference]);
+
+  return <I18nContext.Provider value={value}>{children}</I18nContext.Provider>;
+}
diff --git a/src/i18n/types.ts b/src/i18n/types.ts
new file mode 100644
index 000000000..87a2d55ba
--- /dev/null
+++ b/src/i18n/types.ts
@@ -0,0 +1,9 @@
+export type SupportedLocale = "en" | "zh-CN";
+
+export type UiLanguagePreference = "system" | SupportedLocale;
+
+export type TranslationParamValue = string | number | boolean | null | undefined;
+
+export type TranslationParams = Record<string, TranslationParamValue>;
+
+export type TranslationDictionary = Record<string, string>;
diff --git a/src/i18n/useI18n.ts b/src/i18n/useI18n.ts
new file mode 100644
index 000000000..b4dbae598
--- /dev/null
+++ b/src/i18n/useI18n.ts
@@ -0,0 +1,6 @@
+import { useContext } from "react";
+import { I18nContext } from "./provider";
+
+export function useI18n() {
+  return useContext(I18nContext);
+}
diff --git a/src/types.ts b/src/types.ts
index a69f6bc21..c58d6f5d8 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -173,6 +173,7 @@ export type RemoteBackendTarget = {
   lastConnectedAtMs?: number | null;
 };
 export type ThemePreference = "system" | "light" | "dark" | "dim";
+export type UiLanguagePreference = "system" | "en" | "zh-CN";
 export type PersonalityPreference = "friendly" | "pragmatic";
 export type FollowUpMessageBehavior = "queue" | "steer";
 export type ComposerSendIntent = "default" | "queue" | "steer";
@@ -236,6 +237,7 @@ export type AppSettings = {
   lastComposerReasoningEffort: string | null;
   uiScale: number;
   theme: ThemePreference;
+  uiLanguage: UiLanguagePreference;
   usageShowRemaining: boolean;
   showMessageFilePath: boolean;
   chatHistoryScrollbackItems: number | null;

From aafdec89d9b39e181eb564e691cbf7d71a9c6318 Mon Sep 17 00:00:00 2001
From: huahai0202 <2023217276@mail.hfut.edu.cn>
Date: Thu, 26 Feb 2026 17:51:49 +0800
Subject: [PATCH 2/4] refactor(settings): align localized sections with
 settings primitives

---
 .../sections/SettingsAboutSection.tsx         |   5 +-
 .../sections/SettingsAgentsSection.tsx        |  82 +++---
 .../sections/SettingsCodexSection.tsx         |  78 +++---
 .../sections/SettingsComposerSection.tsx      | 233 ++++++-----------
 .../sections/SettingsDictationSection.tsx     |  37 ++-
 .../sections/SettingsDisplaySection.tsx       | 241 +++++++-----------
 .../sections/SettingsEnvironmentsSection.tsx  |  12 +-
 .../sections/SettingsFeaturesSection.tsx      | 111 ++++----
 .../sections/SettingsGitSection.tsx           |  59 ++---
 .../sections/SettingsOpenAppsSection.tsx      |  10 +-
 .../sections/SettingsProjectsSection.tsx      |  10 +-
 .../sections/SettingsServerSection.tsx        |  43 ++--
 .../sections/SettingsShortcutsSection.tsx     |  10 +-
 13 files changed, 397 insertions(+), 534 deletions(-)

diff --git a/src/features/settings/components/sections/SettingsAboutSection.tsx b/src/features/settings/components/sections/SettingsAboutSection.tsx
index ebb7234a9..2872bec80 100644
--- a/src/features/settings/components/sections/SettingsAboutSection.tsx
+++ b/src/features/settings/components/sections/SettingsAboutSection.tsx
@@ -4,6 +4,7 @@ import {
   isMobileRuntime,
   type AppBuildType,
 } from "@services/tauri";
+import { SettingsSection } from "@/features/design-system/components/settings/SettingsPrimitives";
 import { useUpdater } from "@/features/update/hooks/useUpdater";
 import { useI18n } from "@/i18n/useI18n";
 
@@ -77,7 +78,7 @@ export function SettingsAboutSection() {
     : new Date(parsedBuildDate).toLocaleString();
 
   return (
-    <section className="settings-section">
+    <SettingsSection title={t("settings.nav.about")}>
       <div className="settings-field">
         <div className="settings-help">
           {t("settings.about.version")}: <code>{__APP_VERSION__}</code>
@@ -170,6 +171,6 @@ export function SettingsAboutSection() {
           )}
         </div>
       </div>
-    </section>
+    </SettingsSection>
   );
 }
diff --git a/src/features/settings/components/sections/SettingsAgentsSection.tsx b/src/features/settings/components/sections/SettingsAgentsSection.tsx
index 413e216cc..d13dfa0e8 100644
--- a/src/features/settings/components/sections/SettingsAgentsSection.tsx
+++ b/src/features/settings/components/sections/SettingsAgentsSection.tsx
@@ -1,6 +1,11 @@
 import { useEffect, useMemo, useState } from "react";
 import { revealItemInDir } from "@tauri-apps/plugin-opener";
 import type { ModelOption } from "@/types";
+import {
+  SettingsSection,
+  SettingsToggleRow,
+  SettingsToggleSwitch,
+} from "@/features/design-system/components/settings/SettingsPrimitives";
 import {
   MagicSparkleIcon,
   MagicSparkleLoaderIcon,
@@ -351,9 +356,10 @@ export function SettingsAgentsSection({
   };
 
   return (
-    <section className="settings-section">
-      <div className="settings-section-title">{t("settings.agents.sectionTitle")}</div>
-      <div className="settings-section-subtitle">{t("settings.agents.sectionSubtitle")}</div>
+    <SettingsSection
+      title={t("settings.agents.sectionTitle")}
+      subtitle={t("settings.agents.sectionSubtitle")}
+    >
       <div className="settings-help settings-agents-builtins-help">
         {t("settings.agents.builtins.before")}
         <code>default</code>
@@ -364,13 +370,10 @@ export function SettingsAgentsSection({
         {t("settings.agents.builtins.after")}
       </div>
 
-      <div className="settings-toggle-row">
-        <div>
-          <div className="settings-toggle-title">{t("settings.agents.configFile.title")}</div>
-          <div className="settings-toggle-subtitle">
-            {t("settings.agents.configFile.subtitle", { fileManager: fileManagerName() })}
-          </div>
-        </div>
+      <SettingsToggleRow
+        title={t("settings.agents.configFile.title")}
+        subtitle={t("settings.agents.configFile.subtitle", { fileManager: fileManagerName() })}
+      >
         <div className="settings-agents-actions">
           <button type="button" className="ghost" onClick={onRefresh} disabled={isLoading}>
             {t("settings.agents.refresh")}
@@ -384,35 +387,33 @@ export function SettingsAgentsSection({
             {openInFileManagerLabel()}
           </button>
         </div>
-      </div>
+      </SettingsToggleRow>
 
-      <div className="settings-toggle-row">
-        <div>
-          <div className="settings-toggle-title">{t("settings.agents.multiAgent.title")}</div>
-          <div className="settings-toggle-subtitle">
+      <SettingsToggleRow
+        title={t("settings.agents.multiAgent.title")}
+        subtitle={
+          <>
             Writes <code>features.multi_agent</code> in config.toml.
-          </div>
-        </div>
-        <button
-          type="button"
-          className={`settings-toggle ${settings?.multiAgentEnabled ? "on" : ""}`}
+          </>
+        }
+      >
+        <SettingsToggleSwitch
+          pressed={settings?.multiAgentEnabled ?? false}
           onClick={() => void handleToggleMultiAgent()}
-          aria-pressed={settings?.multiAgentEnabled ?? false}
           disabled={!settings || isUpdatingCore}
-        >
-          <span className="settings-toggle-knob" />
-        </button>
-      </div>
+        />
+      </SettingsToggleRow>
 
-      <div className="settings-toggle-row">
-        <div>
-          <div className="settings-toggle-title">{t("settings.agents.maxThreads.title")}</div>
-          <div className="settings-toggle-subtitle">
+      <SettingsToggleRow
+        title={t("settings.agents.maxThreads.title")}
+        subtitle={
+          <>
             {t("settings.agents.maxThreads.subtitle.before")}
             <code>1-12</code>
             {t("settings.agents.maxThreads.subtitle.after")}
-          </div>
-        </div>
+          </>
+        }
+      >
         <div
           className="settings-agents-stepper"
           role="group"
@@ -444,17 +445,18 @@ export function SettingsAgentsSection({
             ▲
           </button>
         </div>
-      </div>
+      </SettingsToggleRow>
 
-      <div className="settings-toggle-row">
-        <div>
-          <div className="settings-toggle-title">{t("settings.agents.maxDepth.title")}</div>
-          <div className="settings-toggle-subtitle">
+      <SettingsToggleRow
+        title={t("settings.agents.maxDepth.title")}
+        subtitle={
+          <>
             {t("settings.agents.maxDepth.subtitle.before")}
             <code>1-4</code>
             {t("settings.agents.maxDepth.subtitle.after")}
-          </div>
-        </div>
+          </>
+        }
+      >
         <div
           className="settings-agents-stepper"
           role="group"
@@ -486,7 +488,7 @@ export function SettingsAgentsSection({
             ▲
           </button>
         </div>
-      </div>
+      </SettingsToggleRow>
 
       <div className="settings-subsection-title">{t("settings.agents.create.title")}</div>
       <div className="settings-subsection-subtitle">
@@ -893,6 +895,6 @@ export function SettingsAgentsSection({
       {isLoading && <div className="settings-help">{t("settings.agents.loading")}</div>}
       {openPathError && <div className="settings-agents-error">{openPathError}</div>}
       {error && <div className="settings-agents-error">{error}</div>}
-    </section>
+    </SettingsSection>
   );
 }
diff --git a/src/features/settings/components/sections/SettingsCodexSection.tsx b/src/features/settings/components/sections/SettingsCodexSection.tsx
index c8c8d2e05..bdedc5b7f 100644
--- a/src/features/settings/components/sections/SettingsCodexSection.tsx
+++ b/src/features/settings/components/sections/SettingsCodexSection.tsx
@@ -7,6 +7,10 @@ import type {
   CodexUpdateResult,
   ModelOption,
 } from "@/types";
+import {
+  SettingsSection,
+  SettingsToggleRow,
+} from "@/features/design-system/components/settings/SettingsPrimitives";
 import { FileEditorCard } from "@/features/shared/components/FileEditorCard";
 import { useI18n } from "@/i18n/useI18n";
 
@@ -226,9 +230,10 @@ export function SettingsCodexSection({
   ]);
 
   return (
-    <section className="settings-section">
-      <div className="settings-section-title">{t("settings.codex.sectionTitle")}</div>
-      <div className="settings-section-subtitle">{t("settings.codex.sectionSubtitle")}</div>
+    <SettingsSection
+      title={t("settings.codex.sectionTitle")}
+      subtitle={t("settings.codex.sectionSubtitle")}
+    >
       <div className="settings-field">
         <label className="settings-field-label" htmlFor="codex-path">
           {t("settings.codex.path.label")}
@@ -410,21 +415,22 @@ export function SettingsCodexSection({
         {t("settings.codex.defaults.sectionTitle")}
       </div>
 
-      <div className="settings-toggle-row">
-        <div>
-          <label className="settings-toggle-title" htmlFor="default-model">
+      <SettingsToggleRow
+        title={
+          <label htmlFor="default-model">
             {t("settings.codex.defaults.model.label")}
           </label>
-          <div className="settings-toggle-subtitle">
-            {defaultModelsConnectedWorkspaceCount === 0
-              ? t("settings.codex.defaults.model.addWorkspace")
-              : defaultModelsLoading
-                ? t("settings.codex.defaults.model.loading")
-                : defaultModelsError
-                  ? t("settings.codex.defaults.model.loadError", { error: defaultModelsError })
-                  : t("settings.codex.defaults.model.help")}
-          </div>
-        </div>
+        }
+        subtitle={
+          defaultModelsConnectedWorkspaceCount === 0
+            ? t("settings.codex.defaults.model.addWorkspace")
+            : defaultModelsLoading
+              ? t("settings.codex.defaults.model.loading")
+              : defaultModelsError
+                ? t("settings.codex.defaults.model.loadError", { error: defaultModelsError })
+                : t("settings.codex.defaults.model.help")
+        }
+      >
         <div className="settings-field-row">
           <select
             id="default-model"
@@ -454,19 +460,20 @@ export function SettingsCodexSection({
             {t("settings.codex.defaults.model.refresh")}
           </button>
         </div>
-      </div>
+      </SettingsToggleRow>
 
-      <div className="settings-toggle-row">
-        <div>
-          <label className="settings-toggle-title" htmlFor="default-effort">
+      <SettingsToggleRow
+        title={
+          <label htmlFor="default-effort">
             {t("settings.codex.defaults.reasoning.label")}
           </label>
-          <div className="settings-toggle-subtitle">
-            {reasoningSupported
-              ? t("settings.codex.defaults.reasoning.supported")
-              : t("settings.codex.defaults.reasoning.unsupported")}
-          </div>
-        </div>
+        }
+        subtitle={
+          reasoningSupported
+            ? t("settings.codex.defaults.reasoning.supported")
+            : t("settings.codex.defaults.reasoning.unsupported")
+        }
+      >
         <select
           id="default-effort"
           className="settings-select"
@@ -489,17 +496,16 @@ export function SettingsCodexSection({
             </option>
           ))}
         </select>
-      </div>
+      </SettingsToggleRow>
 
-      <div className="settings-toggle-row">
-        <div>
-          <label className="settings-toggle-title" htmlFor="default-access">
+      <SettingsToggleRow
+        title={
+          <label htmlFor="default-access">
             {t("settings.codex.defaults.access.label")}
           </label>
-          <div className="settings-toggle-subtitle">
-            {t("settings.codex.defaults.access.help")}
-          </div>
-        </div>
+        }
+        subtitle={t("settings.codex.defaults.access.help")}
+      >
         <select
           id="default-access"
           className="settings-select"
@@ -515,7 +521,7 @@ export function SettingsCodexSection({
           <option value="current">{t("settings.codex.defaults.access.option.current")}</option>
           <option value="full-access">{t("settings.codex.defaults.access.option.fullAccess")}</option>
         </select>
-      </div>
+      </SettingsToggleRow>
       <div className="settings-field">
         <label className="settings-field-label" htmlFor="review-delivery">
           {t("settings.codex.review.label")}
@@ -606,6 +612,6 @@ export function SettingsCodexSection({
           help: "settings-help",
         }}
       />
-    </section>
+    </SettingsSection>
   );
 }
diff --git a/src/features/settings/components/sections/SettingsComposerSection.tsx b/src/features/settings/components/sections/SettingsComposerSection.tsx
index 23e6ef7b9..f80137c6d 100644
--- a/src/features/settings/components/sections/SettingsComposerSection.tsx
+++ b/src/features/settings/components/sections/SettingsComposerSection.tsx
@@ -1,5 +1,10 @@
 import type { AppSettings } from "@/types";
 import { useI18n } from "@/i18n/useI18n";
+import {
+  SettingsSection,
+  SettingsToggleRow,
+  SettingsToggleSwitch,
+} from "@/features/design-system/components/settings/SettingsPrimitives";
 
 type ComposerPreset = AppSettings["composerEditorPreset"];
 
@@ -23,9 +28,10 @@ export function SettingsComposerSection({
   const { t } = useI18n();
   const steerUnavailable = !appSettings.steerEnabled;
   return (
-    <section className="settings-section">
-      <div className="settings-section-title">{t("settings.composer.sectionTitle")}</div>
-      <div className="settings-section-subtitle">{t("settings.composer.sectionSubtitle")}</div>
+    <SettingsSection
+      title={t("settings.composer.sectionTitle")}
+      subtitle={t("settings.composer.sectionSubtitle")}
+    >
       <div className="settings-field">
         <div className="settings-field-label">{t("settings.composer.followUp.label")}</div>
         <div className="settings-segmented" aria-label={t("settings.composer.followUp.label")}>
@@ -84,27 +90,20 @@ export function SettingsComposerSection({
           {followUpShortcutLabel}
           {t("settings.composer.followUp.help.after")}
         </div>
-        <div className="settings-toggle-row">
-          <div>
-            <div className="settings-toggle-title">{t("settings.composer.followUp.hint.title")}</div>
-            <div className="settings-toggle-subtitle">
-              {t("settings.composer.followUp.hint.subtitle")}
-            </div>
-          </div>
-          <button
-            type="button"
-            className={`settings-toggle ${appSettings.composerFollowUpHintEnabled ? "on" : ""}`}
+        <SettingsToggleRow
+          title={t("settings.composer.followUp.hint.title")}
+          subtitle={t("settings.composer.followUp.hint.subtitle")}
+        >
+          <SettingsToggleSwitch
+            pressed={appSettings.composerFollowUpHintEnabled}
             onClick={() =>
               void onUpdateAppSettings({
                 ...appSettings,
                 composerFollowUpHintEnabled: !appSettings.composerFollowUpHintEnabled,
               })
             }
-            aria-pressed={appSettings.composerFollowUpHintEnabled}
-          >
-            <span className="settings-toggle-knob" />
-          </button>
-        </div>
+          />
+        </SettingsToggleRow>
         {steerUnavailable && (
           <div className="settings-help">
             {t("settings.composer.followUp.steerUnavailableHelp")}
@@ -138,106 +137,74 @@ export function SettingsComposerSection({
       </div>
       <div className="settings-divider" />
       <div className="settings-subsection-title">{t("settings.composer.codeFences.title")}</div>
-      <div className="settings-toggle-row">
-        <div>
-          <div className="settings-toggle-title">{t("settings.composer.codeFences.space.title")}</div>
-          <div className="settings-toggle-subtitle">
-            {t("settings.composer.codeFences.space.subtitle")}
-          </div>
-        </div>
-        <button
-          type="button"
-          className={`settings-toggle ${appSettings.composerFenceExpandOnSpace ? "on" : ""}`}
+      <SettingsToggleRow
+        title={t("settings.composer.codeFences.space.title")}
+        subtitle={t("settings.composer.codeFences.space.subtitle")}
+      >
+        <SettingsToggleSwitch
+          pressed={appSettings.composerFenceExpandOnSpace}
           onClick={() =>
             void onUpdateAppSettings({
               ...appSettings,
               composerFenceExpandOnSpace: !appSettings.composerFenceExpandOnSpace,
             })
           }
-          aria-pressed={appSettings.composerFenceExpandOnSpace}
-        >
-          <span className="settings-toggle-knob" />
-        </button>
-      </div>
-      <div className="settings-toggle-row">
-        <div>
-          <div className="settings-toggle-title">{t("settings.composer.codeFences.enter.title")}</div>
-          <div className="settings-toggle-subtitle">
-            {t("settings.composer.codeFences.enter.subtitle")}
-          </div>
-        </div>
-        <button
-          type="button"
-          className={`settings-toggle ${appSettings.composerFenceExpandOnEnter ? "on" : ""}`}
+        />
+      </SettingsToggleRow>
+      <SettingsToggleRow
+        title={t("settings.composer.codeFences.enter.title")}
+        subtitle={t("settings.composer.codeFences.enter.subtitle")}
+      >
+        <SettingsToggleSwitch
+          pressed={appSettings.composerFenceExpandOnEnter}
           onClick={() =>
             void onUpdateAppSettings({
               ...appSettings,
               composerFenceExpandOnEnter: !appSettings.composerFenceExpandOnEnter,
             })
           }
-          aria-pressed={appSettings.composerFenceExpandOnEnter}
-        >
-          <span className="settings-toggle-knob" />
-        </button>
-      </div>
-      <div className="settings-toggle-row">
-        <div>
-          <div className="settings-toggle-title">{t("settings.composer.codeFences.langTags.title")}</div>
-          <div className="settings-toggle-subtitle">
-            {t("settings.composer.codeFences.langTags.subtitle")}
-          </div>
-        </div>
-        <button
-          type="button"
-          className={`settings-toggle ${appSettings.composerFenceLanguageTags ? "on" : ""}`}
+        />
+      </SettingsToggleRow>
+      <SettingsToggleRow
+        title={t("settings.composer.codeFences.langTags.title")}
+        subtitle={t("settings.composer.codeFences.langTags.subtitle")}
+      >
+        <SettingsToggleSwitch
+          pressed={appSettings.composerFenceLanguageTags}
           onClick={() =>
             void onUpdateAppSettings({
               ...appSettings,
               composerFenceLanguageTags: !appSettings.composerFenceLanguageTags,
             })
           }
-          aria-pressed={appSettings.composerFenceLanguageTags}
-        >
-          <span className="settings-toggle-knob" />
-        </button>
-      </div>
-      <div className="settings-toggle-row">
-        <div>
-          <div className="settings-toggle-title">
-            {t("settings.composer.codeFences.wrapSelection.title")}
-          </div>
-          <div className="settings-toggle-subtitle">
-            {t("settings.composer.codeFences.wrapSelection.subtitle")}
-          </div>
-        </div>
-        <button
-          type="button"
-          className={`settings-toggle ${appSettings.composerFenceWrapSelection ? "on" : ""}`}
+        />
+      </SettingsToggleRow>
+      <SettingsToggleRow
+        title={t("settings.composer.codeFences.wrapSelection.title")}
+        subtitle={t("settings.composer.codeFences.wrapSelection.subtitle")}
+      >
+        <SettingsToggleSwitch
+          pressed={appSettings.composerFenceWrapSelection}
           onClick={() =>
             void onUpdateAppSettings({
               ...appSettings,
               composerFenceWrapSelection: !appSettings.composerFenceWrapSelection,
             })
           }
-          aria-pressed={appSettings.composerFenceWrapSelection}
-        >
-          <span className="settings-toggle-knob" />
-        </button>
-      </div>
-      <div className="settings-toggle-row">
-        <div>
-          <div className="settings-toggle-title">
-            {t("settings.composer.codeFences.copyNoFence.title")}
-          </div>
-          <div className="settings-toggle-subtitle">
+        />
+      </SettingsToggleRow>
+      <SettingsToggleRow
+        title={t("settings.composer.codeFences.copyNoFence.title")}
+        subtitle={
+          <>
             {t("settings.composer.codeFences.copyNoFence.subtitle.before")}
             {optionKeyLabel}
             {t("settings.composer.codeFences.copyNoFence.subtitle.after")}
-          </div>
-        </div>
-        <button
-          type="button"
-          className={`settings-toggle ${appSettings.composerCodeBlockCopyUseModifier ? "on" : ""}`}
+          </>
+        }
+      >
+        <SettingsToggleSwitch
+          pressed={appSettings.composerCodeBlockCopyUseModifier}
           onClick={() =>
             void onUpdateAppSettings({
               ...appSettings,
@@ -245,25 +212,16 @@ export function SettingsComposerSection({
                 !appSettings.composerCodeBlockCopyUseModifier,
             })
           }
-          aria-pressed={appSettings.composerCodeBlockCopyUseModifier}
-        >
-          <span className="settings-toggle-knob" />
-        </button>
-      </div>
+        />
+      </SettingsToggleRow>
       <div className="settings-divider" />
       <div className="settings-subsection-title">{t("settings.composer.pasting.title")}</div>
-      <div className="settings-toggle-row">
-        <div>
-          <div className="settings-toggle-title">
-            {t("settings.composer.pasting.multiline.title")}
-          </div>
-          <div className="settings-toggle-subtitle">
-            {t("settings.composer.pasting.multiline.subtitle")}
-          </div>
-        </div>
-        <button
-          type="button"
-          className={`settings-toggle ${appSettings.composerFenceAutoWrapPasteMultiline ? "on" : ""}`}
+      <SettingsToggleRow
+        title={t("settings.composer.pasting.multiline.title")}
+        subtitle={t("settings.composer.pasting.multiline.subtitle")}
+      >
+        <SettingsToggleSwitch
+          pressed={appSettings.composerFenceAutoWrapPasteMultiline}
           onClick={() =>
             void onUpdateAppSettings({
               ...appSettings,
@@ -271,23 +229,14 @@ export function SettingsComposerSection({
                 !appSettings.composerFenceAutoWrapPasteMultiline,
             })
           }
-          aria-pressed={appSettings.composerFenceAutoWrapPasteMultiline}
-        >
-          <span className="settings-toggle-knob" />
-        </button>
-      </div>
-      <div className="settings-toggle-row">
-        <div>
-          <div className="settings-toggle-title">
-            {t("settings.composer.pasting.codeLike.title")}
-          </div>
-          <div className="settings-toggle-subtitle">
-            {t("settings.composer.pasting.codeLike.subtitle")}
-          </div>
-        </div>
-        <button
-          type="button"
-          className={`settings-toggle ${appSettings.composerFenceAutoWrapPasteCodeLike ? "on" : ""}`}
+        />
+      </SettingsToggleRow>
+      <SettingsToggleRow
+        title={t("settings.composer.pasting.codeLike.title")}
+        subtitle={t("settings.composer.pasting.codeLike.subtitle")}
+      >
+        <SettingsToggleSwitch
+          pressed={appSettings.composerFenceAutoWrapPasteCodeLike}
           onClick={() =>
             void onUpdateAppSettings({
               ...appSettings,
@@ -295,36 +244,24 @@ export function SettingsComposerSection({
                 !appSettings.composerFenceAutoWrapPasteCodeLike,
             })
           }
-          aria-pressed={appSettings.composerFenceAutoWrapPasteCodeLike}
-        >
-          <span className="settings-toggle-knob" />
-        </button>
-      </div>
+        />
+      </SettingsToggleRow>
       <div className="settings-divider" />
       <div className="settings-subsection-title">{t("settings.composer.lists.title")}</div>
-      <div className="settings-toggle-row">
-        <div>
-          <div className="settings-toggle-title">
-            {t("settings.composer.lists.continue.title")}
-          </div>
-          <div className="settings-toggle-subtitle">
-            {t("settings.composer.lists.continue.subtitle")}
-          </div>
-        </div>
-        <button
-          type="button"
-          className={`settings-toggle ${appSettings.composerListContinuation ? "on" : ""}`}
+      <SettingsToggleRow
+        title={t("settings.composer.lists.continue.title")}
+        subtitle={t("settings.composer.lists.continue.subtitle")}
+      >
+        <SettingsToggleSwitch
+          pressed={appSettings.composerListContinuation}
           onClick={() =>
             void onUpdateAppSettings({
               ...appSettings,
               composerListContinuation: !appSettings.composerListContinuation,
             })
           }
-          aria-pressed={appSettings.composerListContinuation}
-        >
-          <span className="settings-toggle-knob" />
-        </button>
-      </div>
-    </section>
+        />
+      </SettingsToggleRow>
+    </SettingsSection>
   );
 }
diff --git a/src/features/settings/components/sections/SettingsDictationSection.tsx b/src/features/settings/components/sections/SettingsDictationSection.tsx
index 0dee0b8e1..36dd05dcc 100644
--- a/src/features/settings/components/sections/SettingsDictationSection.tsx
+++ b/src/features/settings/components/sections/SettingsDictationSection.tsx
@@ -1,4 +1,9 @@
 import type { AppSettings, DictationModelStatus } from "@/types";
+import {
+  SettingsSection,
+  SettingsToggleRow,
+  SettingsToggleSwitch,
+} from "@/features/design-system/components/settings/SettingsPrimitives";
 import { formatDownloadSize } from "@utils/formatting";
 import { useI18n } from "@/i18n/useI18n";
 
@@ -40,19 +45,16 @@ export function SettingsDictationSection({
   const dictationProgress = dictationModelStatus?.progress ?? null;
 
   return (
-    <section className="settings-section">
-      <div className="settings-section-title">{t("settings.dictation.sectionTitle")}</div>
-      <div className="settings-section-subtitle">{t("settings.dictation.sectionSubtitle")}</div>
-      <div className="settings-toggle-row">
-        <div>
-          <div className="settings-toggle-title">{t("settings.dictation.enable.title")}</div>
-          <div className="settings-toggle-subtitle">
-            {t("settings.dictation.enable.subtitle")}
-          </div>
-        </div>
-        <button
-          type="button"
-          className={`settings-toggle ${appSettings.dictationEnabled ? "on" : ""}`}
+    <SettingsSection
+      title={t("settings.dictation.sectionTitle")}
+      subtitle={t("settings.dictation.sectionSubtitle")}
+    >
+      <SettingsToggleRow
+        title={t("settings.dictation.enable.title")}
+        subtitle={t("settings.dictation.enable.subtitle")}
+      >
+        <SettingsToggleSwitch
+          pressed={appSettings.dictationEnabled}
           onClick={() => {
             const nextEnabled = !appSettings.dictationEnabled;
             void onUpdateAppSettings({
@@ -74,11 +76,8 @@ export function SettingsDictationSection({
               onDownloadDictationModel();
             }
           }}
-          aria-pressed={appSettings.dictationEnabled}
-        >
-          <span className="settings-toggle-knob" />
-        </button>
-      </div>
+        />
+      </SettingsToggleRow>
       <div className="settings-field">
         <label className="settings-field-label" htmlFor="dictation-model">
           {t("settings.dictation.model.label")}
@@ -236,6 +235,6 @@ export function SettingsDictationSection({
           </div>
         </div>
       )}
-    </section>
+    </SettingsSection>
   );
 }
diff --git a/src/features/settings/components/sections/SettingsDisplaySection.tsx b/src/features/settings/components/sections/SettingsDisplaySection.tsx
index 23343639f..8641adffd 100644
--- a/src/features/settings/components/sections/SettingsDisplaySection.tsx
+++ b/src/features/settings/components/sections/SettingsDisplaySection.tsx
@@ -17,6 +17,11 @@ import {
   isChatScrollbackPreset,
 } from "@utils/chatScrollback";
 import { useI18n } from "@/i18n/useI18n";
+import {
+  SettingsSection,
+  SettingsToggleRow,
+  SettingsToggleSwitch,
+} from "@/features/design-system/components/settings/SettingsPrimitives";
 
 type SettingsDisplaySectionProps = {
   appSettings: AppSettings;
@@ -157,9 +162,10 @@ export function SettingsDisplaySection({
   };
 
   return (
-    <section className="settings-section">
-      <div className="settings-section-title">{t("settings.display.sectionTitle")}</div>
-      <div className="settings-section-subtitle">{t("settings.display.sectionSubtitle")}</div>
+    <SettingsSection
+      title={t("settings.display.sectionTitle")}
+      subtitle={t("settings.display.sectionSubtitle")}
+    >
       <div className="settings-subsection-title">{t("settings.display.subsectionDisplayTitle")}</div>
       <div className="settings-subsection-subtitle">
         {t("settings.display.subsectionDisplaySubtitle")}
@@ -206,75 +212,54 @@ export function SettingsDisplaySection({
         </select>
         <div className="settings-help">{t("settings.display.uiLanguage.help")}</div>
       </div>
-      <div className="settings-toggle-row">
-        <div>
-          <div className="settings-toggle-title">{t("settings.display.usageRemaining.title")}</div>
-          <div className="settings-toggle-subtitle">{t("settings.display.usageRemaining.subtitle")}</div>
-        </div>
-        <button
-          type="button"
-          className={`settings-toggle ${appSettings.usageShowRemaining ? "on" : ""}`}
+      <SettingsToggleRow
+        title={t("settings.display.usageRemaining.title")}
+        subtitle={t("settings.display.usageRemaining.subtitle")}
+      >
+        <SettingsToggleSwitch
+          pressed={appSettings.usageShowRemaining}
           onClick={() =>
             void onUpdateAppSettings({
               ...appSettings,
               usageShowRemaining: !appSettings.usageShowRemaining,
             })
           }
-          aria-pressed={appSettings.usageShowRemaining}
-        >
-          <span className="settings-toggle-knob" />
-        </button>
-      </div>
-      <div className="settings-toggle-row">
-        <div>
-          <div className="settings-toggle-title">
-            {t("settings.display.filePathInMessages.title")}
-          </div>
-          <div className="settings-toggle-subtitle">
-            {t("settings.display.filePathInMessages.subtitle")}
-          </div>
-        </div>
-        <button
-          type="button"
-          className={`settings-toggle ${appSettings.showMessageFilePath ? "on" : ""}`}
+        />
+      </SettingsToggleRow>
+      <SettingsToggleRow
+        title={t("settings.display.filePathInMessages.title")}
+        subtitle={t("settings.display.filePathInMessages.subtitle")}
+      >
+        <SettingsToggleSwitch
+          pressed={appSettings.showMessageFilePath}
           onClick={() =>
             void onUpdateAppSettings({
               ...appSettings,
               showMessageFilePath: !appSettings.showMessageFilePath,
             })
           }
-          aria-pressed={appSettings.showMessageFilePath}
-        >
-          <span className="settings-toggle-knob" />
-        </button>
-      </div>
-      <div className="settings-toggle-row">
-        <div>
-          <div className="settings-toggle-title">{t("settings.display.splitChatDiff.title")}</div>
-          <div className="settings-toggle-subtitle">{t("settings.display.splitChatDiff.subtitle")}</div>
-        </div>
-        <button
-          type="button"
-          className={`settings-toggle ${appSettings.splitChatDiffView ? "on" : ""}`}
+        />
+      </SettingsToggleRow>
+      <SettingsToggleRow
+        title={t("settings.display.splitChatDiff.title")}
+        subtitle={t("settings.display.splitChatDiff.subtitle")}
+      >
+        <SettingsToggleSwitch
+          pressed={appSettings.splitChatDiffView}
           onClick={() =>
             void onUpdateAppSettings({
               ...appSettings,
               splitChatDiffView: !appSettings.splitChatDiffView,
             })
           }
-          aria-pressed={appSettings.splitChatDiffView}
-        >
-          <span className="settings-toggle-knob" />
-        </button>
-      </div>
-      <div className="settings-toggle-row">
-        <div>
-          <div className="settings-toggle-title">{t("settings.display.autoThreadTitle.title")}</div>
-          <div className="settings-toggle-subtitle">{t("settings.display.autoThreadTitle.subtitle")}</div>
-        </div>
-        <button
-          type="button"
-          className={`settings-toggle ${appSettings.threadTitleAutogenerationEnabled ? "on" : ""}`}
+        />
+      </SettingsToggleRow>
+      <SettingsToggleRow
+        title={t("settings.display.autoThreadTitle.title")}
+        subtitle={t("settings.display.autoThreadTitle.subtitle")}
+      >
+        <SettingsToggleSwitch
+          pressed={appSettings.threadTitleAutogenerationEnabled}
           onClick={() =>
             void onUpdateAppSettings({
               ...appSettings,
@@ -282,32 +267,20 @@ export function SettingsDisplaySection({
                 !appSettings.threadTitleAutogenerationEnabled,
             })
           }
-          aria-pressed={appSettings.threadTitleAutogenerationEnabled}
-        >
-          <span className="settings-toggle-knob" />
-        </button>
-      </div>
+        />
+      </SettingsToggleRow>
       <div className="settings-subsection-title">{t("settings.display.subsectionChatTitle")}</div>
       <div className="settings-subsection-subtitle">{t("settings.display.subsectionChatSubtitle")}</div>
-      <div className="settings-toggle-row">
-        <div>
-          <div className="settings-toggle-title">
-            {t("settings.display.unlimitedChatHistory.title")}
-          </div>
-          <div className="settings-toggle-subtitle">
-            {t("settings.display.unlimitedChatHistory.subtitle")}
-          </div>
-        </div>
-        <button
-          type="button"
-          className={`settings-toggle ${scrollbackUnlimited ? "on" : ""}`}
+      <SettingsToggleRow
+        title={t("settings.display.unlimitedChatHistory.title")}
+        subtitle={t("settings.display.unlimitedChatHistory.subtitle")}
+      >
+        <SettingsToggleSwitch
+          pressed={scrollbackUnlimited}
           onClick={toggleUnlimitedScrollback}
           data-scrollback-control="true"
-          aria-pressed={scrollbackUnlimited}
-        >
-          <span className="settings-toggle-knob" />
-        </button>
-      </div>
+        />
+      </SettingsToggleRow>
       <div className="settings-field">
         <label className="settings-field-label" htmlFor="chat-scrollback-preset">
           {t("settings.display.scrollbackPreset.label")}
@@ -384,31 +357,20 @@ export function SettingsDisplaySection({
           })}
         </div>
       </div>
-      <div className="settings-toggle-row">
-        <div>
-          <div className="settings-toggle-title">
-            {t("settings.display.reduceTransparency.title")}
-          </div>
-          <div className="settings-toggle-subtitle">
-            {t("settings.display.reduceTransparency.subtitle")}
-          </div>
-        </div>
-        <button
-          type="button"
-          className={`settings-toggle ${reduceTransparency ? "on" : ""}`}
+      <SettingsToggleRow
+        title={t("settings.display.reduceTransparency.title")}
+        subtitle={t("settings.display.reduceTransparency.subtitle")}
+      >
+        <SettingsToggleSwitch
+          pressed={reduceTransparency}
           onClick={() => onToggleTransparency(!reduceTransparency)}
-          aria-pressed={reduceTransparency}
-        >
-          <span className="settings-toggle-knob" />
-        </button>
-      </div>
-      <div className="settings-toggle-row settings-scale-row">
-        <div>
-          <div className="settings-toggle-title">{t("settings.display.interfaceScale.title")}</div>
-          <div className="settings-toggle-subtitle" title={scaleShortcutTitle}>
-            {scaleShortcutText}
-          </div>
-        </div>
+        />
+      </SettingsToggleRow>
+      <SettingsToggleRow
+        className="settings-scale-row"
+        title={t("settings.display.interfaceScale.title")}
+        subtitle={<span title={scaleShortcutTitle}>{scaleShortcutText}</span>}
+      >
         <div className="settings-scale-controls">
           <input
             id="ui-scale"
@@ -438,7 +400,7 @@ export function SettingsDisplaySection({
             {t("common.reset")}
           </button>
         </div>
-      </div>
+      </SettingsToggleRow>
       <div className="settings-field">
         <label className="settings-field-label" htmlFor="ui-font-family">
           {t("settings.display.uiFontFamily.label")}
@@ -552,64 +514,40 @@ export function SettingsDisplaySection({
       <div className="settings-subsection-subtitle">
         {t("settings.display.subsectionSoundsSubtitle")}
       </div>
-      <div className="settings-toggle-row">
-        <div>
-          <div className="settings-toggle-title">
-            {t("settings.display.notificationSounds.title")}
-          </div>
-          <div className="settings-toggle-subtitle">
-            {t("settings.display.notificationSounds.subtitle")}
-          </div>
-        </div>
-        <button
-          type="button"
-          className={`settings-toggle ${appSettings.notificationSoundsEnabled ? "on" : ""}`}
+      <SettingsToggleRow
+        title={t("settings.display.notificationSounds.title")}
+        subtitle={t("settings.display.notificationSounds.subtitle")}
+      >
+        <SettingsToggleSwitch
+          pressed={appSettings.notificationSoundsEnabled}
           onClick={() =>
             void onUpdateAppSettings({
               ...appSettings,
               notificationSoundsEnabled: !appSettings.notificationSoundsEnabled,
             })
           }
-          aria-pressed={appSettings.notificationSoundsEnabled}
-        >
-          <span className="settings-toggle-knob" />
-        </button>
-      </div>
-      <div className="settings-toggle-row">
-        <div>
-          <div className="settings-toggle-title">
-            {t("settings.display.systemNotifications.title")}
-          </div>
-          <div className="settings-toggle-subtitle">
-            {t("settings.display.systemNotifications.subtitle")}
-          </div>
-        </div>
-        <button
-          type="button"
-          className={`settings-toggle ${appSettings.systemNotificationsEnabled ? "on" : ""}`}
+        />
+      </SettingsToggleRow>
+      <SettingsToggleRow
+        title={t("settings.display.systemNotifications.title")}
+        subtitle={t("settings.display.systemNotifications.subtitle")}
+      >
+        <SettingsToggleSwitch
+          pressed={appSettings.systemNotificationsEnabled}
           onClick={() =>
             void onUpdateAppSettings({
               ...appSettings,
               systemNotificationsEnabled: !appSettings.systemNotificationsEnabled,
             })
           }
-          aria-pressed={appSettings.systemNotificationsEnabled}
-        >
-          <span className="settings-toggle-knob" />
-        </button>
-      </div>
-      <div className="settings-toggle-row">
-        <div>
-          <div className="settings-toggle-title">
-            {t("settings.display.subagentNotifications.title")}
-          </div>
-          <div className="settings-toggle-subtitle">
-            {t("settings.display.subagentNotifications.subtitle")}
-          </div>
-        </div>
-        <button
-          type="button"
-          className={`settings-toggle ${appSettings.subagentSystemNotificationsEnabled ? "on" : ""}`}
+        />
+      </SettingsToggleRow>
+      <SettingsToggleRow
+        title={t("settings.display.subagentNotifications.title")}
+        subtitle={t("settings.display.subagentNotifications.subtitle")}
+      >
+        <SettingsToggleSwitch
+          pressed={appSettings.subagentSystemNotificationsEnabled}
           onClick={() =>
             void onUpdateAppSettings({
               ...appSettings,
@@ -617,11 +555,8 @@ export function SettingsDisplaySection({
                 !appSettings.subagentSystemNotificationsEnabled,
             })
           }
-          aria-pressed={appSettings.subagentSystemNotificationsEnabled}
-        >
-          <span className="settings-toggle-knob" />
-        </button>
-      </div>
+        />
+      </SettingsToggleRow>
       <div className="settings-sound-actions">
         <button
           type="button"
@@ -638,6 +573,6 @@ export function SettingsDisplaySection({
           {t("settings.display.testNotification")}
         </button>
       </div>
-    </section>
+    </SettingsSection>
   );
 }
diff --git a/src/features/settings/components/sections/SettingsEnvironmentsSection.tsx b/src/features/settings/components/sections/SettingsEnvironmentsSection.tsx
index 2bfc18ed5..d247eb32e 100644
--- a/src/features/settings/components/sections/SettingsEnvironmentsSection.tsx
+++ b/src/features/settings/components/sections/SettingsEnvironmentsSection.tsx
@@ -2,6 +2,7 @@ import type { Dispatch, SetStateAction } from "react";
 import type { WorkspaceInfo } from "@/types";
 import { pushErrorToast } from "@services/toasts";
 import { useI18n } from "@/i18n/useI18n";
+import { SettingsSection } from "@/features/design-system/components/settings/SettingsPrimitives";
 
 type SettingsEnvironmentsSectionProps = {
   mainWorkspaces: WorkspaceInfo[];
@@ -30,11 +31,10 @@ export function SettingsEnvironmentsSection({
 }: SettingsEnvironmentsSectionProps) {
   const { t } = useI18n();
   return (
-    <section className="settings-section">
-      <div className="settings-section-title">{t("settings.environments.sectionTitle")}</div>
-      <div className="settings-section-subtitle">
-        {t("settings.environments.sectionSubtitle")}
-      </div>
+    <SettingsSection
+      title={t("settings.environments.sectionTitle")}
+      subtitle={t("settings.environments.sectionSubtitle")}
+    >
       {mainWorkspaces.length === 0 ? (
         <div className="settings-empty">{t("settings.environments.emptyNoProjects")}</div>
       ) : (
@@ -126,6 +126,6 @@ export function SettingsEnvironmentsSection({
           </div>
         </>
       )}
-    </section>
+    </SettingsSection>
   );
 }
diff --git a/src/features/settings/components/sections/SettingsFeaturesSection.tsx b/src/features/settings/components/sections/SettingsFeaturesSection.tsx
index acf3a7d7a..0fd319db4 100644
--- a/src/features/settings/components/sections/SettingsFeaturesSection.tsx
+++ b/src/features/settings/components/sections/SettingsFeaturesSection.tsx
@@ -1,5 +1,10 @@
 import type { CodexFeature } from "@/types";
 import type { SettingsFeaturesSectionProps } from "@settings/hooks/useSettingsFeaturesSection";
+import {
+  SettingsSection,
+  SettingsToggleRow,
+  SettingsToggleSwitch,
+} from "@/features/design-system/components/settings/SettingsPrimitives";
 import { fileManagerName, openInFileManagerLabel } from "@utils/platformPaths";
 import { useI18n } from "@/i18n/useI18n";
 
@@ -173,34 +178,33 @@ export function SettingsFeaturesSection({
   const { locale, t } = useI18n();
   const zh = locale === "zh-CN";
   return (
-    <section className="settings-section">
-      <div className="settings-section-title">{t("settings.features.sectionTitle")}</div>
-      <div className="settings-section-subtitle">{t("settings.features.sectionSubtitle")}</div>
-      <div className="settings-toggle-row">
-        <div>
-          <div className="settings-toggle-title">{t("settings.features.configFile.title")}</div>
-          <div className="settings-toggle-subtitle">
-            {t("settings.features.configFile.subtitle", {
-              fileManager: fileManagerName(),
-            })}
-          </div>
-        </div>
+    <SettingsSection
+      title={t("settings.features.sectionTitle")}
+      subtitle={t("settings.features.sectionSubtitle")}
+    >
+      <SettingsToggleRow
+        title={t("settings.features.configFile.title")}
+        subtitle={t("settings.features.configFile.subtitle", {
+          fileManager: fileManagerName(),
+        })}
+      >
         <button type="button" className="ghost" onClick={onOpenConfig}>
           {openInFileManagerLabel()}
         </button>
-      </div>
+      </SettingsToggleRow>
       {openConfigError && <div className="settings-help">{openConfigError}</div>}
       <div className="settings-subsection-title">{t("settings.features.stable.title")}</div>
       <div className="settings-subsection-subtitle">{t("settings.features.stable.subtitle")}</div>
-      <div className="settings-toggle-row">
-        <div>
-          <div className="settings-toggle-title">{t("settings.features.personality.title")}</div>
-          <div className="settings-toggle-subtitle">
+      <SettingsToggleRow
+        title={t("settings.features.personality.title")}
+        subtitle={
+          <>
             {t("settings.features.personality.subtitle.before")}
             <code>personality</code>
             {t("settings.features.personality.subtitle.after")}
-          </div>
-        </div>
+          </>
+        }
+      >
         <select
           id="features-personality-select"
           className="settings-select"
@@ -216,15 +220,13 @@ export function SettingsFeaturesSection({
           <option value="friendly">{t("settings.features.personality.option.friendly")}</option>
           <option value="pragmatic">{t("settings.features.personality.option.pragmatic")}</option>
         </select>
-      </div>
-      <div className="settings-toggle-row">
-        <div>
-          <div className="settings-toggle-title">{t("settings.features.pauseQueue.title")}</div>
-          <div className="settings-toggle-subtitle">{t("settings.features.pauseQueue.subtitle")}</div>
-        </div>
-        <button
-          type="button"
-          className={`settings-toggle ${appSettings.pauseQueuedMessagesWhenResponseRequired ? "on" : ""}`}
+      </SettingsToggleRow>
+      <SettingsToggleRow
+        title={t("settings.features.pauseQueue.title")}
+        subtitle={t("settings.features.pauseQueue.subtitle")}
+      >
+        <SettingsToggleSwitch
+          pressed={appSettings.pauseQueuedMessagesWhenResponseRequired}
           onClick={() =>
             void onUpdateAppSettings({
               ...appSettings,
@@ -232,27 +234,20 @@ export function SettingsFeaturesSection({
                 !appSettings.pauseQueuedMessagesWhenResponseRequired,
             })
           }
-          aria-pressed={appSettings.pauseQueuedMessagesWhenResponseRequired}
-        >
-          <span className="settings-toggle-knob" />
-        </button>
-      </div>
+        />
+      </SettingsToggleRow>
       {stableFeatures.map((feature) => (
-        <div className="settings-toggle-row" key={feature.name}>
-          <div>
-            <div className="settings-toggle-title">{formatFeatureLabel(feature, zh)}</div>
-            <div className="settings-toggle-subtitle">{featureSubtitle(feature, zh, t)}</div>
-          </div>
-          <button
-            type="button"
-            className={`settings-toggle ${feature.enabled ? "on" : ""}`}
+        <SettingsToggleRow
+          key={feature.name}
+          title={formatFeatureLabel(feature, zh)}
+          subtitle={featureSubtitle(feature, zh, t)}
+        >
+          <SettingsToggleSwitch
+            pressed={feature.enabled}
             onClick={() => onToggleCodexFeature(feature)}
-            aria-pressed={feature.enabled}
             disabled={featureUpdatingKey === feature.name}
-          >
-            <span className="settings-toggle-knob" />
-          </button>
-        </div>
+          />
+        </SettingsToggleRow>
       ))}
       {hasFeatureWorkspace &&
         !featuresLoading &&
@@ -265,21 +260,17 @@ export function SettingsFeaturesSection({
         {t("settings.features.experimental.subtitle")}
       </div>
       {experimentalFeatures.map((feature) => (
-        <div className="settings-toggle-row" key={feature.name}>
-          <div>
-            <div className="settings-toggle-title">{formatFeatureLabel(feature, zh)}</div>
-            <div className="settings-toggle-subtitle">{featureSubtitle(feature, zh, t)}</div>
-          </div>
-          <button
-            type="button"
-            className={`settings-toggle ${feature.enabled ? "on" : ""}`}
+        <SettingsToggleRow
+          key={feature.name}
+          title={formatFeatureLabel(feature, zh)}
+          subtitle={featureSubtitle(feature, zh, t)}
+        >
+          <SettingsToggleSwitch
+            pressed={feature.enabled}
             onClick={() => onToggleCodexFeature(feature)}
-            aria-pressed={feature.enabled}
             disabled={featureUpdatingKey === feature.name}
-          >
-            <span className="settings-toggle-knob" />
-          </button>
-        </div>
+          />
+        </SettingsToggleRow>
       ))}
       {hasFeatureWorkspace &&
         !featuresLoading &&
@@ -297,6 +288,6 @@ export function SettingsFeaturesSection({
         <div className="settings-help">{t("settings.features.connectWorkspace")}</div>
       )}
       {featureError && <div className="settings-help">{featureError}</div>}
-    </section>
+    </SettingsSection>
   );
 }
diff --git a/src/features/settings/components/sections/SettingsGitSection.tsx b/src/features/settings/components/sections/SettingsGitSection.tsx
index 78ee6a6f8..4d44561e5 100644
--- a/src/features/settings/components/sections/SettingsGitSection.tsx
+++ b/src/features/settings/components/sections/SettingsGitSection.tsx
@@ -1,5 +1,10 @@
 import type { AppSettings, ModelOption } from "@/types";
 import { useI18n } from "@/i18n/useI18n";
+import {
+  SettingsSection,
+  SettingsToggleRow,
+  SettingsToggleSwitch,
+} from "@/features/design-system/components/settings/SettingsPrimitives";
 
 type SettingsGitSectionProps = {
   appSettings: AppSettings;
@@ -26,53 +31,35 @@ export function SettingsGitSection({
 }: SettingsGitSectionProps) {
   const { t } = useI18n();
   return (
-    <section className="settings-section">
-      <div className="settings-section-title">Git</div>
-      <div className="settings-section-subtitle">
-        {t("settings.git.sectionSubtitle")}
-      </div>
-      <div className="settings-toggle-row">
-        <div>
-          <div className="settings-toggle-title">{t("settings.git.preloadDiffs.title")}</div>
-          <div className="settings-toggle-subtitle">
-            {t("settings.git.preloadDiffs.subtitle")}
-          </div>
-        </div>
-        <button
-          type="button"
-          className={`settings-toggle ${appSettings.preloadGitDiffs ? "on" : ""}`}
+    <SettingsSection title="Git" subtitle={t("settings.git.sectionSubtitle")}>
+      <SettingsToggleRow
+        title={t("settings.git.preloadDiffs.title")}
+        subtitle={t("settings.git.preloadDiffs.subtitle")}
+      >
+        <SettingsToggleSwitch
+          pressed={appSettings.preloadGitDiffs}
           onClick={() =>
             void onUpdateAppSettings({
               ...appSettings,
               preloadGitDiffs: !appSettings.preloadGitDiffs,
             })
           }
-          aria-pressed={appSettings.preloadGitDiffs}
-        >
-          <span className="settings-toggle-knob" />
-        </button>
-      </div>
-      <div className="settings-toggle-row">
-        <div>
-          <div className="settings-toggle-title">{t("settings.git.ignoreWhitespace.title")}</div>
-          <div className="settings-toggle-subtitle">
-            {t("settings.git.ignoreWhitespace.subtitle")}
-          </div>
-        </div>
-        <button
-          type="button"
-          className={`settings-toggle ${appSettings.gitDiffIgnoreWhitespaceChanges ? "on" : ""}`}
+        />
+      </SettingsToggleRow>
+      <SettingsToggleRow
+        title={t("settings.git.ignoreWhitespace.title")}
+        subtitle={t("settings.git.ignoreWhitespace.subtitle")}
+      >
+        <SettingsToggleSwitch
+          pressed={appSettings.gitDiffIgnoreWhitespaceChanges}
           onClick={() =>
             void onUpdateAppSettings({
               ...appSettings,
               gitDiffIgnoreWhitespaceChanges: !appSettings.gitDiffIgnoreWhitespaceChanges,
             })
           }
-          aria-pressed={appSettings.gitDiffIgnoreWhitespaceChanges}
-        >
-          <span className="settings-toggle-knob" />
-        </button>
-      </div>
+        />
+      </SettingsToggleRow>
       <div className="settings-field">
         <div className="settings-field-label">{t("settings.git.commitPrompt.label")}</div>
         <div className="settings-help">
@@ -141,6 +128,6 @@ export function SettingsGitSection({
           </select>
         </div>
       )}
-    </section>
+    </SettingsSection>
   );
 }
diff --git a/src/features/settings/components/sections/SettingsOpenAppsSection.tsx b/src/features/settings/components/sections/SettingsOpenAppsSection.tsx
index e6110bbcc..d54f8d761 100644
--- a/src/features/settings/components/sections/SettingsOpenAppsSection.tsx
+++ b/src/features/settings/components/sections/SettingsOpenAppsSection.tsx
@@ -12,6 +12,7 @@ import {
 } from "@app/utils/openAppIcons";
 import type { OpenAppDraft } from "@settings/components/settingsTypes";
 import { useI18n } from "@/i18n/useI18n";
+import { SettingsSection } from "@/features/design-system/components/settings/SettingsPrimitives";
 
 type SettingsOpenAppsSectionProps = {
   openAppDrafts: OpenAppDraft[];
@@ -42,9 +43,10 @@ export function SettingsOpenAppsSection({
 }: SettingsOpenAppsSectionProps) {
   const { t } = useI18n();
   return (
-    <section className="settings-section">
-      <div className="settings-section-title">{t("settings.openApps.sectionTitle")}</div>
-      <div className="settings-section-subtitle">{t("settings.openApps.sectionSubtitle")}</div>
+    <SettingsSection
+      title={t("settings.openApps.sectionTitle")}
+      subtitle={t("settings.openApps.sectionSubtitle")}
+    >
       <div className="settings-open-apps">
         {openAppDrafts.map((target, index) => {
           const iconSrc =
@@ -228,6 +230,6 @@ export function SettingsOpenAppsSection({
             : t("settings.openApps.help.apps.other")}
         </div>
       </div>
-    </section>
+    </SettingsSection>
   );
 }
diff --git a/src/features/settings/components/sections/SettingsProjectsSection.tsx b/src/features/settings/components/sections/SettingsProjectsSection.tsx
index 900678347..c90726651 100644
--- a/src/features/settings/components/sections/SettingsProjectsSection.tsx
+++ b/src/features/settings/components/sections/SettingsProjectsSection.tsx
@@ -4,6 +4,7 @@ import Trash2 from "lucide-react/dist/esm/icons/trash-2";
 import type { Dispatch, SetStateAction } from "react";
 import type { WorkspaceGroup, WorkspaceInfo } from "@/types";
 import { useI18n } from "@/i18n/useI18n";
+import { SettingsSection } from "@/features/design-system/components/settings/SettingsPrimitives";
 
 type GroupedWorkspaces = Array<{
   id: string | null;
@@ -56,9 +57,10 @@ export function SettingsProjectsSection({
 }: SettingsProjectsSectionProps) {
   const { t } = useI18n();
   return (
-    <section className="settings-section">
-      <div className="settings-section-title">{t("settings.projects.sectionTitle")}</div>
-      <div className="settings-section-subtitle">{t("settings.projects.sectionSubtitle")}</div>
+    <SettingsSection
+      title={t("settings.projects.sectionTitle")}
+      subtitle={t("settings.projects.sectionSubtitle")}
+    >
       <div className="settings-subsection-title">{t("settings.projects.groups.title")}</div>
       <div className="settings-subsection-subtitle">{t("settings.projects.groups.subtitle")}</div>
       <div className="settings-groups">
@@ -253,6 +255,6 @@ export function SettingsProjectsSection({
           <div className="settings-empty">{t("settings.projects.list.empty")}</div>
         )}
       </div>
-    </section>
+    </SettingsSection>
   );
 }
diff --git a/src/features/settings/components/sections/SettingsServerSection.tsx b/src/features/settings/components/sections/SettingsServerSection.tsx
index 4b9622e74..a0adbb356 100644
--- a/src/features/settings/components/sections/SettingsServerSection.tsx
+++ b/src/features/settings/components/sections/SettingsServerSection.tsx
@@ -8,6 +8,11 @@ import type {
   TcpDaemonStatus,
 } from "@/types";
 import { ModalShell } from "@/features/design-system/components/modal/ModalShell";
+import {
+  SettingsSection,
+  SettingsToggleRow,
+  SettingsToggleSwitch,
+} from "@/features/design-system/components/settings/SettingsPrimitives";
 import { useI18n } from "@/i18n/useI18n";
 
 type AddRemoteBackendDraft = {
@@ -184,13 +189,14 @@ export function SettingsServerSection({
   };
 
   return (
-    <section className="settings-section">
-      <div className="settings-section-title">{t("settings.server.sectionTitle")}</div>
-      <div className="settings-section-subtitle">
-        {isMobileSimplified
+    <SettingsSection
+      title={t("settings.server.sectionTitle")}
+      subtitle={
+        isMobileSimplified
           ? t("settings.server.sectionSubtitle.mobile")
-          : t("settings.server.sectionSubtitle.desktop")}
-      </div>
+          : t("settings.server.sectionSubtitle.desktop")
+      }
+    >
 
       {!isMobileSimplified && (
         <div className="settings-field">
@@ -348,27 +354,20 @@ export function SettingsServerSection({
         )}
 
         {!isMobileSimplified && (
-          <div className="settings-toggle-row">
-            <div>
-              <div className="settings-toggle-title">{t("settings.server.keepDaemon.title")}</div>
-              <div className="settings-toggle-subtitle">
-                {t("settings.server.keepDaemon.subtitle")}
-              </div>
-            </div>
-            <button
-              type="button"
-              className={`settings-toggle ${appSettings.keepDaemonRunningAfterAppClose ? "on" : ""}`}
+          <SettingsToggleRow
+            title={t("settings.server.keepDaemon.title")}
+            subtitle={t("settings.server.keepDaemon.subtitle")}
+          >
+            <SettingsToggleSwitch
+              pressed={appSettings.keepDaemonRunningAfterAppClose}
               onClick={() =>
                 void onUpdateAppSettings({
                   ...appSettings,
                   keepDaemonRunningAfterAppClose: !appSettings.keepDaemonRunningAfterAppClose,
                 })
               }
-              aria-pressed={appSettings.keepDaemonRunningAfterAppClose}
-            >
-              <span className="settings-toggle-knob" />
-            </button>
-          </div>
+            />
+          </SettingsToggleRow>
         )}
 
         <div className="settings-field">
@@ -704,6 +703,6 @@ export function SettingsServerSection({
           </div>
         </ModalShell>
       )}
-    </section>
+    </SettingsSection>
   );
 }
diff --git a/src/features/settings/components/sections/SettingsShortcutsSection.tsx b/src/features/settings/components/sections/SettingsShortcutsSection.tsx
index a2d921c91..78a7ad305 100644
--- a/src/features/settings/components/sections/SettingsShortcutsSection.tsx
+++ b/src/features/settings/components/sections/SettingsShortcutsSection.tsx
@@ -1,4 +1,5 @@
 import { useMemo, useState, type KeyboardEvent } from "react";
+import { SettingsSection } from "@/features/design-system/components/settings/SettingsPrimitives";
 import { formatShortcut, getDefaultInterruptShortcut } from "@utils/shortcuts";
 import { isMacPlatform } from "@utils/platformPaths";
 import { useI18n } from "@/i18n/useI18n";
@@ -233,9 +234,10 @@ export function SettingsShortcutsSection({
   }, [groups, normalizedSearchQuery]);
 
   return (
-    <section className="settings-section">
-      <div className="settings-section-title">{t("settings.shortcuts.sectionTitle")}</div>
-      <div className="settings-section-subtitle">{t("settings.shortcuts.sectionSubtitle")}</div>
+    <SettingsSection
+      title={t("settings.shortcuts.sectionTitle")}
+      subtitle={t("settings.shortcuts.sectionSubtitle")}
+    >
       <div className="settings-field settings-shortcuts-search">
         <label className="settings-field-label" htmlFor="settings-shortcuts-search">
           {t("settings.shortcuts.search.label")}
@@ -287,6 +289,6 @@ export function SettingsShortcutsSection({
           {t("settings.shortcuts.empty.suffix")}
         </div>
       )}
-    </section>
+    </SettingsSection>
   );
 }

From e6a05720a5a3df4972e9aa905c3c96beddcaed42 Mon Sep 17 00:00:00 2001
From: huahai0202 <2023217276@mail.hfut.edu.cn>
Date: Fri, 27 Feb 2026 20:29:22 +0800
Subject: [PATCH 3/4] fix(settings): prefer backend feature descriptions before
 zh fallback

---
 .../components/sections/SettingsFeaturesSection.tsx  | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/features/settings/components/sections/SettingsFeaturesSection.tsx b/src/features/settings/components/sections/SettingsFeaturesSection.tsx
index 0fd319db4..5a6bc3d5e 100644
--- a/src/features/settings/components/sections/SettingsFeaturesSection.tsx
+++ b/src/features/settings/components/sections/SettingsFeaturesSection.tsx
@@ -136,18 +136,18 @@ function featureSubtitle(
   zh: boolean,
   t: (key: string, params?: Record<string, string>) => string,
 ): string {
-  if (zh) {
-    const translatedFallback = FEATURE_DESCRIPTION_FALLBACKS_ZH[feature.name];
-    if (translatedFallback) {
-      return translatedFallback;
-    }
-  }
   if (feature.description?.trim()) {
     return feature.description;
   }
   if (feature.announcement?.trim()) {
     return feature.announcement;
   }
+  if (zh) {
+    const translatedFallback = FEATURE_DESCRIPTION_FALLBACKS_ZH[feature.name];
+    if (translatedFallback) {
+      return translatedFallback;
+    }
+  }
   const fallbackDescription = FEATURE_DESCRIPTION_FALLBACKS[feature.name];
   if (fallbackDescription) {
     return fallbackDescription;

From 869731e2089468c3a4ff7a76768f212a727228db Mon Sep 17 00:00:00 2001
From: huahai0202 <2023217276@mail.hfut.edu.cn>
Date: Fri, 27 Feb 2026 21:04:17 +0800
Subject: [PATCH 4/4] refactor(i18n): keyify dynamic settings strings with
 interpolation

---
 .../sections/SettingsAgentsSection.tsx        |  25 ++-
 .../sections/SettingsFeaturesSection.tsx      | 158 +++---------------
 .../sections/SettingsServerSection.tsx        |  33 ++--
 src/i18n/index.test.ts                        |  14 +-
 src/i18n/index.ts                             |   7 +
 src/i18n/locales/en.ts                        | 112 +++++++++++++
 src/i18n/locales/zh-CN.ts                     | 109 ++++++++++++
 src/i18n/provider.tsx                         |  11 +-
 8 files changed, 304 insertions(+), 165 deletions(-)

diff --git a/src/features/settings/components/sections/SettingsAgentsSection.tsx b/src/features/settings/components/sections/SettingsAgentsSection.tsx
index d13dfa0e8..3711e6da6 100644
--- a/src/features/settings/components/sections/SettingsAgentsSection.tsx
+++ b/src/features/settings/components/sections/SettingsAgentsSection.tsx
@@ -62,8 +62,7 @@ export function SettingsAgentsSection({
   modelOptionsLoading,
   modelOptionsError,
 }: SettingsAgentsSectionProps) {
-  const { locale, t } = useI18n();
-  const zh = locale === "zh-CN";
+  const { t } = useI18n();
   const [openPathError, setOpenPathError] = useState<string | null>(null);
   const [maxThreadsDraft, setMaxThreadsDraft] = useState("6");
   const [maxDepthDraft, setMaxDepthDraft] = useState("1");
@@ -183,9 +182,10 @@ export function SettingsAgentsSection({
       setCreateError(null);
       setEditError(null);
       setOpenPathError(
-        zh
-          ? `最大线程数必须是 ${MIN_MAX_THREADS} 到 ${MAX_MAX_THREADS} 之间的整数。`
-          : `Max threads must be an integer between ${MIN_MAX_THREADS} and ${MAX_MAX_THREADS}.`,
+        t("settings.agents.maxThreads.invalidRange", {
+          min: MIN_MAX_THREADS,
+          max: MAX_MAX_THREADS,
+        }),
       );
       return;
     }
@@ -220,9 +220,10 @@ export function SettingsAgentsSection({
       setCreateError(null);
       setEditError(null);
       setOpenPathError(
-        zh
-          ? `最大深度必须是 ${MIN_MAX_DEPTH} 到 ${MAX_MAX_DEPTH} 之间的整数。`
-          : `Max depth must be an integer between ${MIN_MAX_DEPTH} and ${MAX_MAX_DEPTH}.`,
+        t("settings.agents.maxDepth.invalidRange", {
+          min: MIN_MAX_DEPTH,
+          max: MAX_MAX_DEPTH,
+        }),
       );
       return;
     }
@@ -618,12 +619,8 @@ export function SettingsAgentsSection({
         {modelOptions.length === 0 && (
           <div className="settings-help">
             {modelOptionsLoading
-              ? zh
-                ? "正在加载工作区模型元数据，当前先使用回退模型默认值。"
-                : "Loading workspace model metadata. Using fallback model defaults for now."
-              : zh
-                ? "在工作区模型元数据可用前，先使用回退模型默认值。"
-                : "Using fallback model defaults until workspace model metadata is available."}
+              ? t("settings.agents.modelFallback.loading")
+              : t("settings.agents.modelFallback.ready")}
           </div>
         )}
         {modelOptionsError && <div className="settings-help">{modelOptionsError}</div>}
diff --git a/src/features/settings/components/sections/SettingsFeaturesSection.tsx b/src/features/settings/components/sections/SettingsFeaturesSection.tsx
index 5a6bc3d5e..565b9ea08 100644
--- a/src/features/settings/components/sections/SettingsFeaturesSection.tsx
+++ b/src/features/settings/components/sections/SettingsFeaturesSection.tsx
@@ -8,133 +8,34 @@ import {
 import { fileManagerName, openInFileManagerLabel } from "@utils/platformPaths";
 import { useI18n } from "@/i18n/useI18n";
 
-const FEATURE_DESCRIPTION_FALLBACKS: Record<string, string> = {
-  undo: "Create a ghost commit at each turn.",
-  shell_tool: "Enable the default shell tool.",
-  unified_exec: "Use the single unified PTY-backed exec tool.",
-  shell_snapshot: "Enable shell snapshotting.",
-  js_repl: "Enable JavaScript REPL tools backed by a persistent Node kernel.",
-  js_repl_tools_only: "Only expose js_repl tools directly to the model.",
-  web_search_request: "Deprecated. Use top-level web_search instead.",
-  web_search_cached: "Deprecated. Use top-level web_search instead.",
-  search_tool: "Removed legacy search flag kept for backward compatibility.",
-  runtime_metrics: "Enable runtime metrics snapshots via a manual reader.",
-  sqlite: "Persist rollout metadata to a local SQLite database.",
-  memory_tool: "Enable startup memory extraction and memory consolidation.",
-  child_agents_md: "Append additional AGENTS.md guidance to user instructions.",
-  apply_patch_freeform: "Include the freeform apply_patch tool.",
-  use_linux_sandbox_bwrap: "Use the bubblewrap-based Linux sandbox pipeline.",
-  request_rule: "Allow approval requests and exec rule proposals.",
-  experimental_windows_sandbox:
-    "Removed Windows sandbox flag kept for backward compatibility.",
-  elevated_windows_sandbox:
-    "Removed elevated Windows sandbox flag kept for backward compatibility.",
-  remote_models: "Refresh remote models before AppReady.",
-  powershell_utf8: "Enforce UTF-8 output in PowerShell.",
-  enable_request_compression:
-    "Compress streaming request bodies sent to codex-backend.",
-  apps: "Enable ChatGPT Apps integration.",
-  apps_mcp_gateway: "Route Apps MCP calls through the configured gateway.",
-  skill_mcp_dependency_install:
-    "Allow prompting and installing missing MCP dependencies.",
-  skill_env_var_dependency_prompt:
-    "Prompt for missing skill environment variable dependencies.",
-  steer: "Enable turn steering capability when supported by Codex.",
-  collaboration_modes: "Enable collaboration mode presets.",
-  personality: "Enable personality selection.",
-  responses_websockets:
-    "Use Responses API WebSocket transport for OpenAI by default.",
-  responses_websockets_v2: "Enable Responses API WebSocket v2 mode.",
-};
-
-const FEATURE_LABELS_ZH: Record<string, string> = {
-  undo: "撤销快照",
-  shell_tool: "Shell 工具",
-  unified_exec: "统一执行",
-  shell_snapshot: "Shell 快照",
-  js_repl: "JavaScript REPL",
-  js_repl_tools_only: "仅暴露 js_repl 工具",
-  web_search_request: "Web 搜索请求（旧）",
-  web_search_cached: "Web 搜索缓存（旧）",
-  search_tool: "搜索工具（旧）",
-  runtime_metrics: "运行时指标",
-  sqlite: "SQLite",
-  memory_tool: "记忆工具",
-  child_agents_md: "附加 AGENTS.md",
-  apply_patch_freeform: "自由格式 apply_patch",
-  use_linux_sandbox_bwrap: "Linux bwrap 沙箱",
-  request_rule: "审批请求规则",
-  experimental_windows_sandbox: "Windows 沙箱（旧）",
-  elevated_windows_sandbox: "提升权限 Windows 沙箱（旧）",
-  remote_models: "远程模型刷新",
-  powershell_utf8: "PowerShell UTF-8",
-  enable_request_compression: "启用请求压缩",
-  apps: "ChatGPT Apps 集成",
-  apps_mcp_gateway: "Apps MCP 网关",
-  skill_mcp_dependency_install: "Skill MCP 依赖安装",
-  skill_env_var_dependency_prompt: "Skill 环境变量依赖提示",
-  steer: "Steer 引导",
-  collaboration_modes: "协作模式",
-  personality: "人格风格",
-  responses_websockets: "Responses WebSocket",
-  responses_websockets_v2: "Responses WebSocket v2",
-};
-
-const FEATURE_DESCRIPTION_FALLBACKS_ZH: Record<string, string> = {
-  undo: "在每个回合创建一个幽灵提交（ghost commit）。",
-  shell_tool: "启用默认 shell 工具。",
-  unified_exec: "使用单一统一的 PTY 执行工具。",
-  shell_snapshot: "启用 shell 快照能力。",
-  js_repl: "启用基于持久化 Node 内核的 JavaScript REPL 工具。",
-  js_repl_tools_only: "仅将 js_repl 工具直接暴露给模型。",
-  web_search_request: "已弃用。请改用顶层 web_search。",
-  web_search_cached: "已弃用。请改用顶层 web_search。",
-  search_tool: "已移除的旧搜索开关，仅为向后兼容保留。",
-  runtime_metrics: "通过手动读取器启用运行时指标快照。",
-  sqlite: "将 rollout 元数据持久化到本地 SQLite 数据库。",
-  memory_tool: "启用启动记忆提取与记忆整合。",
-  child_agents_md: "向用户指令追加额外的 AGENTS.md 指南。",
-  apply_patch_freeform: "包含自由格式的 apply_patch 工具。",
-  use_linux_sandbox_bwrap: "使用基于 bubblewrap 的 Linux 沙箱流程。",
-  request_rule: "允许审批请求和执行规则提案。",
-  experimental_windows_sandbox: "已移除的 Windows 沙箱开关，仅为向后兼容保留。",
-  elevated_windows_sandbox: "已移除的提权 Windows 沙箱开关，仅为向后兼容保留。",
-  remote_models: "在 AppReady 前刷新远程模型。",
-  powershell_utf8: "在 PowerShell 中强制使用 UTF-8 输出。",
-  enable_request_compression: "压缩发送到 codex-backend 的流式请求体。",
-  apps: "启用 ChatGPT Apps 集成。",
-  apps_mcp_gateway: "通过配置的网关路由 Apps MCP 调用。",
-  skill_mcp_dependency_install: "允许提示并安装缺失的 MCP 依赖。",
-  skill_env_var_dependency_prompt: "为缺失的 skill 环境变量依赖进行提示。",
-  steer: "在 Codex 支持时启用回合引导能力。",
-  collaboration_modes: "启用协作模式预设。",
-  personality: "启用人格风格选择。",
-  responses_websockets: "默认使用 OpenAI 的 Responses API WebSocket 传输。",
-  responses_websockets_v2: "启用 Responses API WebSocket v2 模式。",
-};
+function toTitleCaseFeatureName(name: string): string {
+  return name
+    .split("_")
+    .filter((part) => part.length > 0)
+    .map((part) => part[0].toUpperCase() + part.slice(1))
+    .join(" ");
+}
 
-function formatFeatureLabel(feature: CodexFeature, zh: boolean): string {
-  if (zh) {
-    const translatedLabel = FEATURE_LABELS_ZH[feature.name];
-    if (translatedLabel) {
-      return translatedLabel;
-    }
-  }
+function formatFeatureLabel(
+  feature: CodexFeature,
+  t: (key: string, params?: Record<string, string>) => string,
+  hasKey: (key: string) => boolean,
+): string {
   const displayName = feature.displayName?.trim();
   if (displayName) {
     return displayName;
   }
-  return feature.name
-    .split("_")
-    .filter((part) => part.length > 0)
-    .map((part) => part[0].toUpperCase() + part.slice(1))
-    .join(" ");
+  const key = `settings.features.fallback.label.${feature.name}`;
+  if (hasKey(key)) {
+    return t(key);
+  }
+  return toTitleCaseFeatureName(feature.name);
 }
 
 function featureSubtitle(
   feature: CodexFeature,
-  zh: boolean,
   t: (key: string, params?: Record<string, string>) => string,
+  hasKey: (key: string) => boolean,
 ): string {
   if (feature.description?.trim()) {
     return feature.description;
@@ -142,15 +43,9 @@ function featureSubtitle(
   if (feature.announcement?.trim()) {
     return feature.announcement;
   }
-  if (zh) {
-    const translatedFallback = FEATURE_DESCRIPTION_FALLBACKS_ZH[feature.name];
-    if (translatedFallback) {
-      return translatedFallback;
-    }
-  }
-  const fallbackDescription = FEATURE_DESCRIPTION_FALLBACKS[feature.name];
-  if (fallbackDescription) {
-    return fallbackDescription;
+  const key = `settings.features.fallback.description.${feature.name}`;
+  if (hasKey(key)) {
+    return t(key);
   }
   if (feature.stage === "deprecated") {
     return t("settings.features.feature.deprecated");
@@ -175,8 +70,7 @@ export function SettingsFeaturesSection({
   onToggleCodexFeature,
   onUpdateAppSettings,
 }: SettingsFeaturesSectionProps) {
-  const { locale, t } = useI18n();
-  const zh = locale === "zh-CN";
+  const { t, hasKey } = useI18n();
   return (
     <SettingsSection
       title={t("settings.features.sectionTitle")}
@@ -239,8 +133,8 @@ export function SettingsFeaturesSection({
       {stableFeatures.map((feature) => (
         <SettingsToggleRow
           key={feature.name}
-          title={formatFeatureLabel(feature, zh)}
-          subtitle={featureSubtitle(feature, zh, t)}
+          title={formatFeatureLabel(feature, t, hasKey)}
+          subtitle={featureSubtitle(feature, t, hasKey)}
         >
           <SettingsToggleSwitch
             pressed={feature.enabled}
@@ -262,8 +156,8 @@ export function SettingsFeaturesSection({
       {experimentalFeatures.map((feature) => (
         <SettingsToggleRow
           key={feature.name}
-          title={formatFeatureLabel(feature, zh)}
-          subtitle={featureSubtitle(feature, zh, t)}
+          title={formatFeatureLabel(feature, t, hasKey)}
+          subtitle={featureSubtitle(feature, t, hasKey)}
         >
           <SettingsToggleSwitch
             pressed={feature.enabled}
diff --git a/src/features/settings/components/sections/SettingsServerSection.tsx b/src/features/settings/components/sections/SettingsServerSection.tsx
index a0adbb356..7a573fc12 100644
--- a/src/features/settings/components/sections/SettingsServerSection.tsx
+++ b/src/features/settings/components/sections/SettingsServerSection.tsx
@@ -108,8 +108,7 @@ export function SettingsServerSection({
   onTcpDaemonStatus,
   onMobileConnectTest,
 }: SettingsServerSectionProps) {
-  const { locale, t } = useI18n();
-  const zh = locale === "zh-CN";
+  const { t } = useI18n();
   const [pendingDeleteRemoteId, setPendingDeleteRemoteId] = useState<string | null>(
     null,
   );
@@ -132,20 +131,24 @@ export function SettingsServerSection({
       return null;
     }
     if (tcpDaemonStatus.state === "running") {
+      const addr =
+        tcpDaemonStatus.listenAddr ?? t("settings.server.mobileDaemon.status.listenAddrFallback");
       return tcpDaemonStatus.pid
-        ? zh
-          ? `移动端守护进程正在运行（pid ${tcpDaemonStatus.pid}），监听 ${tcpDaemonStatus.listenAddr ?? "已配置监听地址"}。`
-          : `Mobile daemon is running (pid ${tcpDaemonStatus.pid}) on ${tcpDaemonStatus.listenAddr ?? "configured listen address"}.`
-        : zh
-          ? `移动端守护进程正在运行，监听 ${tcpDaemonStatus.listenAddr ?? "已配置监听地址"}。`
-          : `Mobile daemon is running on ${tcpDaemonStatus.listenAddr ?? "configured listen address"}.`;
+        ? t("settings.server.mobileDaemon.status.running.withPid", {
+            pid: tcpDaemonStatus.pid,
+            addr,
+          })
+        : t("settings.server.mobileDaemon.status.running.noPid", { addr });
     }
     if (tcpDaemonStatus.state === "error") {
       return tcpDaemonStatus.lastError ?? t("settings.server.mobileDaemon.errorFallback");
     }
-    return zh
-      ? `移动端守护进程已停止${tcpDaemonStatus.listenAddr ? `（${tcpDaemonStatus.listenAddr}）` : ""}。`
-      : `Mobile daemon is stopped${tcpDaemonStatus.listenAddr ? ` (${tcpDaemonStatus.listenAddr})` : ""}.`;
+    if (tcpDaemonStatus.listenAddr) {
+      return t("settings.server.mobileDaemon.status.stopped.withAddr", {
+        addr: tcpDaemonStatus.listenAddr,
+      });
+    }
+    return t("settings.server.mobileDaemon.status.stopped.noAddr");
   })();
 
   const openAddRemoteModal = () => {
@@ -410,12 +413,8 @@ export function SettingsServerSection({
           {remoteHostError && <div className="settings-help settings-help-error">{remoteHostError}</div>}
           <div className="settings-help">
             {isMobileSimplified
-              ? (zh
-                ? "使用桌面端 CodexMonitor（Server 分区）里的 Tailscale 主机，例如 `macbook.your-tailnet.ts.net:4732`。"
-                : "Use the Tailscale host from your desktop CodexMonitor app (Server section), for example `macbook.your-tailnet.ts.net:4732`.")
-              : (zh
-                ? "此主机/令牌用于移动端客户端和桌面端远程模式测试。"
-                : "This host/token is used by mobile clients and desktop remote-mode testing.")}
+              ? t("settings.server.remoteBackend.help.mobile")
+              : t("settings.server.remoteBackend.help.desktop")}
           </div>
         </div>
 
diff --git a/src/i18n/index.test.ts b/src/i18n/index.test.ts
index ae3768021..c42dbc2ef 100644
--- a/src/i18n/index.test.ts
+++ b/src/i18n/index.test.ts
@@ -1,7 +1,7 @@
 import { afterEach, describe, expect, it, vi } from "vitest";
 import { en } from "./locales/en";
 import { zhCN } from "./locales/zh-CN";
-import { resolveEffectiveLocale } from "./index";
+import { hasTranslationKey, resolveEffectiveLocale } from "./index";
 
 describe("i18n dictionaries", () => {
   it("keeps en and zh-CN keys aligned", () => {
@@ -31,3 +31,15 @@ describe("resolveEffectiveLocale", () => {
     expect(resolveEffectiveLocale("system")).toBe("en");
   });
 });
+
+describe("hasTranslationKey", () => {
+  it("returns true when key exists in locale dictionaries", () => {
+    expect(hasTranslationKey("settings.nav.server", "en")).toBe(true);
+    expect(hasTranslationKey("settings.nav.server", "zh-CN")).toBe(true);
+  });
+
+  it("returns false for unknown keys", () => {
+    expect(hasTranslationKey("settings.unknown.key", "en")).toBe(false);
+    expect(hasTranslationKey("settings.unknown.key", "zh-CN")).toBe(false);
+  });
+});
diff --git a/src/i18n/index.ts b/src/i18n/index.ts
index ded995168..a873fbfa7 100644
--- a/src/i18n/index.ts
+++ b/src/i18n/index.ts
@@ -14,6 +14,13 @@ export const dictionaries: Record<SupportedLocale, TranslationDictionary> = {
   "zh-CN": zhCN,
 };
 
+export function hasTranslationKey(
+  key: string,
+  locale: SupportedLocale = DEFAULT_LOCALE,
+): boolean {
+  return dictionaries[locale][key] !== undefined || dictionaries.en[key] !== undefined;
+}
+
 export function resolveEffectiveLocale(
   languagePreference: UiLanguagePreference | string | null | undefined,
 ): SupportedLocale {
diff --git a/src/i18n/locales/en.ts b/src/i18n/locales/en.ts
index 22d2fd28f..a40c28558 100644
--- a/src/i18n/locales/en.ts
+++ b/src/i18n/locales/en.ts
@@ -127,6 +127,10 @@ export const en: TranslationDictionary = {
   "settings.server.remoteBackend.hostAria": "Remote backend host",
   "settings.server.remoteBackend.tokenPlaceholder": "Token (required)",
   "settings.server.remoteBackend.tokenAria": "Remote backend token",
+  "settings.server.remoteBackend.help.mobile":
+    "Use the Tailscale host from your desktop CodexMonitor app (Server section), for example `macbook.your-tailnet.ts.net:4732`.",
+  "settings.server.remoteBackend.help.desktop":
+    "This host/token is used by mobile clients and desktop remote-mode testing.",
   "settings.server.connectionTest.label": "Connection test",
   "settings.server.connectionTest.connecting": "Connecting...",
   "settings.server.connectionTest.button": "Connect & test",
@@ -145,6 +149,14 @@ export const en: TranslationDictionary = {
   "settings.server.mobileDaemon.help.after":
     ", matching your configured host port.",
   "settings.server.mobileDaemon.errorFallback": "Mobile daemon is in an error state.",
+  "settings.server.mobileDaemon.status.listenAddrFallback": "configured listen address",
+  "settings.server.mobileDaemon.status.running.withPid":
+    "Mobile daemon is running (pid {pid}) on {addr}.",
+  "settings.server.mobileDaemon.status.running.noPid":
+    "Mobile daemon is running on {addr}.",
+  "settings.server.mobileDaemon.status.stopped.withAddr":
+    "Mobile daemon is stopped ({addr}).",
+  "settings.server.mobileDaemon.status.stopped.noAddr": "Mobile daemon is stopped.",
   "settings.server.tailscale.label": "Tailscale helper",
   "settings.server.tailscale.checking": "Checking...",
   "settings.server.tailscale.detect": "Detect Tailscale",
@@ -199,12 +211,16 @@ export const en: TranslationDictionary = {
   "settings.agents.maxThreads.groupAria": "Maximum agent threads",
   "settings.agents.maxThreads.decreaseAria": "Decrease max threads",
   "settings.agents.maxThreads.increaseAria": "Increase max threads",
+  "settings.agents.maxThreads.invalidRange":
+    "Max threads must be an integer between {min} and {max}.",
   "settings.agents.maxDepth.title": "Max Depth",
   "settings.agents.maxDepth.subtitle.before": "Maximum nested spawn depth. Valid range: ",
   "settings.agents.maxDepth.subtitle.after": ". Changes save immediately.",
   "settings.agents.maxDepth.groupAria": "Maximum agent depth",
   "settings.agents.maxDepth.decreaseAria": "Decrease max depth",
   "settings.agents.maxDepth.increaseAria": "Increase max depth",
+  "settings.agents.maxDepth.invalidRange":
+    "Max depth must be an integer between {min} and {max}.",
   "settings.agents.create.title": "Create Agent",
   "settings.agents.create.subtitle.before": "Add a custom role under ",
   "settings.agents.create.subtitle.after": " and create its config file.",
@@ -225,6 +241,10 @@ export const en: TranslationDictionary = {
   "settings.agents.create.notSupported": "not supported",
   "settings.agents.create.creating": "Creating...",
   "settings.agents.create.create": "Create Agent",
+  "settings.agents.modelFallback.loading":
+    "Loading workspace model metadata. Using fallback model defaults for now.",
+  "settings.agents.modelFallback.ready":
+    "Using fallback model defaults until workspace model metadata is available.",
   "settings.agents.configured.title": "Configured Agents",
   "settings.agents.configured.subtitle":
     "Manage custom roles and their per-agent config files.",
@@ -519,6 +539,98 @@ export const en: TranslationDictionary = {
   "settings.features.feature.removed":
     "Legacy feature flag kept for backward compatibility.",
   "settings.features.feature.key": "Feature key: features.{name}",
+  "settings.features.fallback.label.undo": "Undo",
+  "settings.features.fallback.description.undo": "Create a ghost commit at each turn.",
+  "settings.features.fallback.label.shell_tool": "Shell Tool",
+  "settings.features.fallback.description.shell_tool": "Enable the default shell tool.",
+  "settings.features.fallback.label.unified_exec": "Unified Exec",
+  "settings.features.fallback.description.unified_exec":
+    "Use the single unified PTY-backed exec tool.",
+  "settings.features.fallback.label.shell_snapshot": "Shell Snapshot",
+  "settings.features.fallback.description.shell_snapshot": "Enable shell snapshotting.",
+  "settings.features.fallback.label.js_repl": "JS Repl",
+  "settings.features.fallback.description.js_repl":
+    "Enable JavaScript REPL tools backed by a persistent Node kernel.",
+  "settings.features.fallback.label.js_repl_tools_only": "JS Repl Tools Only",
+  "settings.features.fallback.description.js_repl_tools_only":
+    "Only expose js_repl tools directly to the model.",
+  "settings.features.fallback.label.web_search_request": "Web Search Request",
+  "settings.features.fallback.description.web_search_request":
+    "Deprecated. Use top-level web_search instead.",
+  "settings.features.fallback.label.web_search_cached": "Web Search Cached",
+  "settings.features.fallback.description.web_search_cached":
+    "Deprecated. Use top-level web_search instead.",
+  "settings.features.fallback.label.search_tool": "Search Tool",
+  "settings.features.fallback.description.search_tool":
+    "Removed legacy search flag kept for backward compatibility.",
+  "settings.features.fallback.label.runtime_metrics": "Runtime Metrics",
+  "settings.features.fallback.description.runtime_metrics":
+    "Enable runtime metrics snapshots via a manual reader.",
+  "settings.features.fallback.label.sqlite": "Sqlite",
+  "settings.features.fallback.description.sqlite":
+    "Persist rollout metadata to a local SQLite database.",
+  "settings.features.fallback.label.memory_tool": "Memory Tool",
+  "settings.features.fallback.description.memory_tool":
+    "Enable startup memory extraction and memory consolidation.",
+  "settings.features.fallback.label.child_agents_md": "Child Agents Md",
+  "settings.features.fallback.description.child_agents_md":
+    "Append additional AGENTS.md guidance to user instructions.",
+  "settings.features.fallback.label.apply_patch_freeform": "Apply Patch Freeform",
+  "settings.features.fallback.description.apply_patch_freeform":
+    "Include the freeform apply_patch tool.",
+  "settings.features.fallback.label.use_linux_sandbox_bwrap": "Use Linux Sandbox Bwrap",
+  "settings.features.fallback.description.use_linux_sandbox_bwrap":
+    "Use the bubblewrap-based Linux sandbox pipeline.",
+  "settings.features.fallback.label.request_rule": "Request Rule",
+  "settings.features.fallback.description.request_rule":
+    "Allow approval requests and exec rule proposals.",
+  "settings.features.fallback.label.experimental_windows_sandbox":
+    "Experimental Windows Sandbox",
+  "settings.features.fallback.description.experimental_windows_sandbox":
+    "Removed Windows sandbox flag kept for backward compatibility.",
+  "settings.features.fallback.label.elevated_windows_sandbox":
+    "Elevated Windows Sandbox",
+  "settings.features.fallback.description.elevated_windows_sandbox":
+    "Removed elevated Windows sandbox flag kept for backward compatibility.",
+  "settings.features.fallback.label.remote_models": "Remote Models",
+  "settings.features.fallback.description.remote_models":
+    "Refresh remote models before AppReady.",
+  "settings.features.fallback.label.powershell_utf8": "Powershell Utf8",
+  "settings.features.fallback.description.powershell_utf8":
+    "Enforce UTF-8 output in PowerShell.",
+  "settings.features.fallback.label.enable_request_compression":
+    "Enable Request Compression",
+  "settings.features.fallback.description.enable_request_compression":
+    "Compress streaming request bodies sent to codex-backend.",
+  "settings.features.fallback.label.apps": "Apps",
+  "settings.features.fallback.description.apps": "Enable ChatGPT Apps integration.",
+  "settings.features.fallback.label.apps_mcp_gateway": "Apps Mcp Gateway",
+  "settings.features.fallback.description.apps_mcp_gateway":
+    "Route Apps MCP calls through the configured gateway.",
+  "settings.features.fallback.label.skill_mcp_dependency_install":
+    "Skill Mcp Dependency Install",
+  "settings.features.fallback.description.skill_mcp_dependency_install":
+    "Allow prompting and installing missing MCP dependencies.",
+  "settings.features.fallback.label.skill_env_var_dependency_prompt":
+    "Skill Env Var Dependency Prompt",
+  "settings.features.fallback.description.skill_env_var_dependency_prompt":
+    "Prompt for missing skill environment variable dependencies.",
+  "settings.features.fallback.label.steer": "Steer",
+  "settings.features.fallback.description.steer":
+    "Enable turn steering capability when supported by Codex.",
+  "settings.features.fallback.label.collaboration_modes": "Collaboration Modes",
+  "settings.features.fallback.description.collaboration_modes":
+    "Enable collaboration mode presets.",
+  "settings.features.fallback.label.personality": "Personality",
+  "settings.features.fallback.description.personality":
+    "Enable personality selection.",
+  "settings.features.fallback.label.responses_websockets": "Responses Websockets",
+  "settings.features.fallback.description.responses_websockets":
+    "Use Responses API WebSocket transport for OpenAI by default.",
+  "settings.features.fallback.label.responses_websockets_v2":
+    "Responses Websockets V2",
+  "settings.features.fallback.description.responses_websockets_v2":
+    "Enable Responses API WebSocket v2 mode.",
   "settings.display.sectionTitle": "Display & Sound",
   "settings.display.sectionSubtitle": "Tune visuals and audio alerts to your preferences.",
   "settings.display.subsectionDisplayTitle": "Display",
diff --git a/src/i18n/locales/zh-CN.ts b/src/i18n/locales/zh-CN.ts
index 39738773a..ffd64cc5e 100644
--- a/src/i18n/locales/zh-CN.ts
+++ b/src/i18n/locales/zh-CN.ts
@@ -113,6 +113,10 @@ export const zhCN: TranslationDictionary = {
   "settings.server.remoteBackend.hostAria": "远程后端主机",
   "settings.server.remoteBackend.tokenPlaceholder": "令牌（必填）",
   "settings.server.remoteBackend.tokenAria": "远程后端令牌",
+  "settings.server.remoteBackend.help.mobile":
+    "使用桌面端 CodexMonitor（Server 分区）里的 Tailscale 主机，例如 `macbook.your-tailnet.ts.net:4732`。",
+  "settings.server.remoteBackend.help.desktop":
+    "此主机/令牌用于移动端客户端和桌面端远程模式测试。",
   "settings.server.connectionTest.label": "连接测试",
   "settings.server.connectionTest.connecting": "连接中...",
   "settings.server.connectionTest.button": "连接并测试",
@@ -131,6 +135,14 @@ export const zhCN: TranslationDictionary = {
   "settings.server.mobileDaemon.help.after":
     "（端口与已配置主机端口一致）。",
   "settings.server.mobileDaemon.errorFallback": "移动端守护进程处于错误状态。",
+  "settings.server.mobileDaemon.status.listenAddrFallback": "已配置监听地址",
+  "settings.server.mobileDaemon.status.running.withPid":
+    "移动端守护进程正在运行（pid {pid}），监听 {addr}。",
+  "settings.server.mobileDaemon.status.running.noPid":
+    "移动端守护进程正在运行，监听 {addr}。",
+  "settings.server.mobileDaemon.status.stopped.withAddr":
+    "移动端守护进程已停止（{addr}）。",
+  "settings.server.mobileDaemon.status.stopped.noAddr": "移动端守护进程已停止。",
   "settings.server.tailscale.label": "Tailscale 助手",
   "settings.server.tailscale.checking": "检测中...",
   "settings.server.tailscale.detect": "检测 Tailscale",
@@ -181,12 +193,16 @@ export const zhCN: TranslationDictionary = {
   "settings.agents.maxThreads.groupAria": "最大代理线程数",
   "settings.agents.maxThreads.decreaseAria": "减少最大线程数",
   "settings.agents.maxThreads.increaseAria": "增加最大线程数",
+  "settings.agents.maxThreads.invalidRange":
+    "最大线程数必须是 {min} 到 {max} 之间的整数。",
   "settings.agents.maxDepth.title": "最大深度",
   "settings.agents.maxDepth.subtitle.before": "最大嵌套派生深度。有效范围：",
   "settings.agents.maxDepth.subtitle.after": "。修改会立即保存。",
   "settings.agents.maxDepth.groupAria": "最大代理深度",
   "settings.agents.maxDepth.decreaseAria": "减少最大深度",
   "settings.agents.maxDepth.increaseAria": "增加最大深度",
+  "settings.agents.maxDepth.invalidRange":
+    "最大深度必须是 {min} 到 {max} 之间的整数。",
   "settings.agents.create.title": "创建代理",
   "settings.agents.create.subtitle.before": "在 ",
   "settings.agents.create.subtitle.after": " 下添加自定义角色并创建其配置文件。",
@@ -205,6 +221,10 @@ export const zhCN: TranslationDictionary = {
   "settings.agents.create.notSupported": "不支持",
   "settings.agents.create.creating": "创建中...",
   "settings.agents.create.create": "创建代理",
+  "settings.agents.modelFallback.loading":
+    "正在加载工作区模型元数据，当前先使用回退模型默认值。",
+  "settings.agents.modelFallback.ready":
+    "在工作区模型元数据可用前，先使用回退模型默认值。",
   "settings.agents.configured.title": "已配置代理",
   "settings.agents.configured.subtitle": "管理自定义角色及其代理级配置文件。",
   "settings.agents.configured.empty": "还没有配置自定义代理。",
@@ -462,6 +482,95 @@ export const zhCN: TranslationDictionary = {
   "settings.features.feature.deprecated": "已弃用功能开关。",
   "settings.features.feature.removed": "为向后兼容保留的旧功能开关。",
   "settings.features.feature.key": "功能键：features.{name}",
+  "settings.features.fallback.label.undo": "撤销快照",
+  "settings.features.fallback.description.undo": "在每个回合创建一个幽灵提交（ghost commit）。",
+  "settings.features.fallback.label.shell_tool": "Shell 工具",
+  "settings.features.fallback.description.shell_tool": "启用默认 shell 工具。",
+  "settings.features.fallback.label.unified_exec": "统一执行",
+  "settings.features.fallback.description.unified_exec": "使用单一统一的 PTY 执行工具。",
+  "settings.features.fallback.label.shell_snapshot": "Shell 快照",
+  "settings.features.fallback.description.shell_snapshot": "启用 shell 快照能力。",
+  "settings.features.fallback.label.js_repl": "JavaScript REPL",
+  "settings.features.fallback.description.js_repl":
+    "启用基于持久化 Node 内核的 JavaScript REPL 工具。",
+  "settings.features.fallback.label.js_repl_tools_only": "仅暴露 js_repl 工具",
+  "settings.features.fallback.description.js_repl_tools_only":
+    "仅将 js_repl 工具直接暴露给模型。",
+  "settings.features.fallback.label.web_search_request": "Web 搜索请求（旧）",
+  "settings.features.fallback.description.web_search_request":
+    "已弃用。请改用顶层 web_search。",
+  "settings.features.fallback.label.web_search_cached": "Web 搜索缓存（旧）",
+  "settings.features.fallback.description.web_search_cached":
+    "已弃用。请改用顶层 web_search。",
+  "settings.features.fallback.label.search_tool": "搜索工具（旧）",
+  "settings.features.fallback.description.search_tool":
+    "已移除的旧搜索开关，仅为向后兼容保留。",
+  "settings.features.fallback.label.runtime_metrics": "运行时指标",
+  "settings.features.fallback.description.runtime_metrics":
+    "通过手动读取器启用运行时指标快照。",
+  "settings.features.fallback.label.sqlite": "SQLite",
+  "settings.features.fallback.description.sqlite":
+    "将 rollout 元数据持久化到本地 SQLite 数据库。",
+  "settings.features.fallback.label.memory_tool": "记忆工具",
+  "settings.features.fallback.description.memory_tool":
+    "启用启动记忆提取与记忆整合。",
+  "settings.features.fallback.label.child_agents_md": "附加 AGENTS.md",
+  "settings.features.fallback.description.child_agents_md":
+    "向用户指令追加额外的 AGENTS.md 指南。",
+  "settings.features.fallback.label.apply_patch_freeform": "自由格式 apply_patch",
+  "settings.features.fallback.description.apply_patch_freeform":
+    "包含自由格式的 apply_patch 工具。",
+  "settings.features.fallback.label.use_linux_sandbox_bwrap": "Linux bwrap 沙箱",
+  "settings.features.fallback.description.use_linux_sandbox_bwrap":
+    "使用基于 bubblewrap 的 Linux 沙箱流程。",
+  "settings.features.fallback.label.request_rule": "审批请求规则",
+  "settings.features.fallback.description.request_rule":
+    "允许审批请求和执行规则提案。",
+  "settings.features.fallback.label.experimental_windows_sandbox": "Windows 沙箱（旧）",
+  "settings.features.fallback.description.experimental_windows_sandbox":
+    "已移除的 Windows 沙箱开关，仅为向后兼容保留。",
+  "settings.features.fallback.label.elevated_windows_sandbox":
+    "提升权限 Windows 沙箱（旧）",
+  "settings.features.fallback.description.elevated_windows_sandbox":
+    "已移除的提权 Windows 沙箱开关，仅为向后兼容保留。",
+  "settings.features.fallback.label.remote_models": "远程模型刷新",
+  "settings.features.fallback.description.remote_models":
+    "在 AppReady 前刷新远程模型。",
+  "settings.features.fallback.label.powershell_utf8": "PowerShell UTF-8",
+  "settings.features.fallback.description.powershell_utf8":
+    "在 PowerShell 中强制使用 UTF-8 输出。",
+  "settings.features.fallback.label.enable_request_compression": "启用请求压缩",
+  "settings.features.fallback.description.enable_request_compression":
+    "压缩发送到 codex-backend 的流式请求体。",
+  "settings.features.fallback.label.apps": "ChatGPT Apps 集成",
+  "settings.features.fallback.description.apps": "启用 ChatGPT Apps 集成。",
+  "settings.features.fallback.label.apps_mcp_gateway": "Apps MCP 网关",
+  "settings.features.fallback.description.apps_mcp_gateway":
+    "通过配置的网关路由 Apps MCP 调用。",
+  "settings.features.fallback.label.skill_mcp_dependency_install":
+    "Skill MCP 依赖安装",
+  "settings.features.fallback.description.skill_mcp_dependency_install":
+    "允许提示并安装缺失的 MCP 依赖。",
+  "settings.features.fallback.label.skill_env_var_dependency_prompt":
+    "Skill 环境变量依赖提示",
+  "settings.features.fallback.description.skill_env_var_dependency_prompt":
+    "为缺失的 skill 环境变量依赖进行提示。",
+  "settings.features.fallback.label.steer": "Steer 引导",
+  "settings.features.fallback.description.steer":
+    "在 Codex 支持时启用回合引导能力。",
+  "settings.features.fallback.label.collaboration_modes": "协作模式",
+  "settings.features.fallback.description.collaboration_modes":
+    "启用协作模式预设。",
+  "settings.features.fallback.label.personality": "人格风格",
+  "settings.features.fallback.description.personality":
+    "启用人格风格选择。",
+  "settings.features.fallback.label.responses_websockets": "Responses WebSocket",
+  "settings.features.fallback.description.responses_websockets":
+    "默认使用 OpenAI 的 Responses API WebSocket 传输。",
+  "settings.features.fallback.label.responses_websockets_v2":
+    "Responses WebSocket v2",
+  "settings.features.fallback.description.responses_websockets_v2":
+    "启用 Responses API WebSocket v2 模式。",
   "settings.display.sectionTitle": "显示与声音",
   "settings.display.sectionSubtitle": "根据你的偏好调整界面视觉效果和提示音。",
   "settings.display.subsectionDisplayTitle": "显示",
diff --git a/src/i18n/provider.tsx b/src/i18n/provider.tsx
index bf00a65ad..a7bbbdb07 100644
--- a/src/i18n/provider.tsx
+++ b/src/i18n/provider.tsx
@@ -1,11 +1,18 @@
 import { createContext, useMemo, type ReactNode } from "react";
-import { DEFAULT_LOCALE, dictionaries, formatTranslation, resolveEffectiveLocale } from "./index";
+import {
+  DEFAULT_LOCALE,
+  dictionaries,
+  formatTranslation,
+  hasTranslationKey,
+  resolveEffectiveLocale,
+} from "./index";
 import type { SupportedLocale, TranslationParams, UiLanguagePreference } from "./types";
 
 export type I18nValue = {
   locale: SupportedLocale;
   languagePreference: UiLanguagePreference;
   t: (key: string, params?: TranslationParams) => string;
+  hasKey: (key: string) => boolean;
 };
 
 function fallbackTranslate(key: string, params?: TranslationParams): string {
@@ -17,6 +24,7 @@ export const I18nContext = createContext<I18nValue>({
   locale: DEFAULT_LOCALE,
   languagePreference: "system",
   t: fallbackTranslate,
+  hasKey: (key) => hasTranslationKey(key, DEFAULT_LOCALE),
 });
 
 type I18nProviderProps = {
@@ -46,6 +54,7 @@ export function I18nProvider({ children, languagePreference }: I18nProviderProps
         }
         return formatTranslation(template, params);
       },
+      hasKey: (key) => hasTranslationKey(key, locale),
     };
   }, [locale, resolvedPreference]);