From 480d65157561ea60a8ad7a659493f3f2a76a69e7 Mon Sep 17 00:00:00 2001
From: jackiexiao <707610215@qq.com>
Date: Mon, 25 May 2026 14:17:37 +0800
Subject: [PATCH 1/4] feat: add MakerJackie fork baseline

---
 .gitmodules                                   |   3 -
 docs/makerjackie-fork-requirements.md         | 176 +++++++++++++++++
 src-tauri/src/cloudflare_auth.rs              |   7 +-
 src-tauri/src/lib.rs                          |   1 +
 src-tauri/src/setup.rs                        |  22 +--
 src-tauri/src/shell_env.rs                    |  26 +++
 src/components/Layout.tsx                     | 113 ++++++-----
 src/components/SettingsView.tsx               |  69 ++++---
 src/components/SetupWizard.tsx                |  43 ++---
 src/lib/i18n.ts                               | 135 +++++++++++++
 src/pro_modules                               |   1 -
 src/pro_modules/frontend/AuditZoneContext.tsx |   5 +
 .../frontend/IndexManagerDialog.tsx           |  16 ++
 src/pro_modules/frontend/ProFeatureGate.tsx   |  24 +++
 src/pro_modules/frontend/PurchaseScreen.tsx   |  16 ++
 src/pro_modules/frontend/R2BucketsView.tsx    | 178 ++++++++++++++++++
 src/pro_modules/frontend/useRemoteConfig.ts   |  29 +++
 src/pro_modules/hooks/useD1TrackerLogic.ts    |   9 +
 src/pro_modules/rust/domain_audit.rs          |  44 +++++
 src/pro_modules/rust/history.rs               |  30 +++
 src/pro_modules/rust/r2_pro.rs                |  84 +++++++++
 src/pro_modules/rust/r2_worker_proxy.rs       |   2 +
 src/pro_modules/ui/ActivityDashboard.tsx      |   7 +
 .../ui/audits/AuditPreferences.tsx            |   3 +
 src/pro_modules/ui/audits/DnsEmailPosture.tsx |   3 +
 src/pro_modules/ui/audits/DomainScanner.tsx   |   3 +
 src/pro_modules/ui/audits/Overview.tsx        |   3 +
 .../ui/audits/PerformancePosture.tsx          |   3 +
 src/pro_modules/ui/audits/SecurityPosture.tsx |   3 +
 src/store/useAppStore.ts                      |   7 +
 30 files changed, 932 insertions(+), 133 deletions(-)
 delete mode 100644 .gitmodules
 create mode 100644 docs/makerjackie-fork-requirements.md
 create mode 100644 src-tauri/src/shell_env.rs
 create mode 100644 src/lib/i18n.ts
 delete mode 160000 src/pro_modules
 create mode 100644 src/pro_modules/frontend/AuditZoneContext.tsx
 create mode 100644 src/pro_modules/frontend/IndexManagerDialog.tsx
 create mode 100644 src/pro_modules/frontend/ProFeatureGate.tsx
 create mode 100644 src/pro_modules/frontend/PurchaseScreen.tsx
 create mode 100644 src/pro_modules/frontend/R2BucketsView.tsx
 create mode 100644 src/pro_modules/frontend/useRemoteConfig.ts
 create mode 100644 src/pro_modules/hooks/useD1TrackerLogic.ts
 create mode 100644 src/pro_modules/rust/domain_audit.rs
 create mode 100644 src/pro_modules/rust/history.rs
 create mode 100644 src/pro_modules/rust/r2_pro.rs
 create mode 100644 src/pro_modules/rust/r2_worker_proxy.rs
 create mode 100644 src/pro_modules/ui/ActivityDashboard.tsx
 create mode 100644 src/pro_modules/ui/audits/AuditPreferences.tsx
 create mode 100644 src/pro_modules/ui/audits/DnsEmailPosture.tsx
 create mode 100644 src/pro_modules/ui/audits/DomainScanner.tsx
 create mode 100644 src/pro_modules/ui/audits/Overview.tsx
 create mode 100644 src/pro_modules/ui/audits/PerformancePosture.tsx
 create mode 100644 src/pro_modules/ui/audits/SecurityPosture.tsx

diff --git a/.gitmodules b/.gitmodules
deleted file mode 100644
index 3e69e81..0000000
--- a/.gitmodules
+++ /dev/null
@@ -1,3 +0,0 @@
-[submodule "src/pro_modules"]
-	path = src/pro_modules
-	url = https://github.com/mubashardev/cf-studio-pro.git
diff --git a/docs/makerjackie-fork-requirements.md b/docs/makerjackie-fork-requirements.md
new file mode 100644
index 0000000..34af661
--- /dev/null
+++ b/docs/makerjackie-fork-requirements.md
@@ -0,0 +1,176 @@
+# MakerJackie CF Studio Fork Requirements
+
+## Goal
+
+Create a lightweight MakerJackie fork of CF Studio for daily Cloudflare D1 and R2 work.
+
+This fork is not trying to replace the Cloudflare dashboard. It should make repeated local desktop workflows faster, especially when the dashboard is slow or too heavy for a quick D1/R2 check.
+
+## Scope for this first pass
+
+1. Make the app reliably detect Node.js, npm, npx, and Wrangler when they are installed through nvm on macOS.
+2. Add a basic language system with English and Simplified Chinese support.
+3. Keep the public clone runnable without private Pro modules.
+4. Start the local Tauri app and verify the setup screen no longer blocks when nvm provides the tools.
+
+## Non-goals
+
+- Do not build a full Cloudflare dashboard clone.
+- Do not depend on the new `cf` CLI as the backend.
+- Do not add full KV management in this pass.
+- Do not implement Local Explorer integration in this pass.
+- Do not rewrite the UI architecture.
+
+## Background
+
+Cloudflare's current tool split is:
+
+- Wrangler remains the mature developer CLI.
+- Cloudflare Dashboard remains the complete remote management surface.
+- Local Explorer is useful for local Wrangler dev state, including local D1, R2, KV, Durable Objects SQLite, and Workflows.
+- The new `cf` CLI is promising but still a technical preview.
+- CF Studio is useful as a focused remote D1/R2 desktop client.
+
+The fork should lean into the focused desktop-client role.
+
+## Requirement 1, nvm-aware dependency detection
+
+### Problem
+
+On macOS, Tauri apps launched from Finder do not reliably inherit the interactive shell PATH.
+
+The user's terminal can resolve:
+
+```bash
+which node
+which wrangler
+```
+
+But the app may still report Node.js or Wrangler as missing.
+
+### Expected behavior
+
+When the app checks dependencies, it should detect binaries installed through nvm:
+
+```txt
+~/.nvm/versions/node/*/bin/node
+~/.nvm/versions/node/*/bin/npm
+~/.nvm/versions/node/*/bin/npx
+~/.nvm/versions/node/*/bin/wrangler
+```
+
+It should also check:
+
+```txt
+~/.npm-global/bin
+/opt/homebrew/bin
+/usr/local/bin
+```
+
+### Implementation direction
+
+In Rust:
+
+- Add a reusable shell environment helper.
+- Load `~/.nvm/nvm.sh` when present.
+- Prepend common nvm, npm-global, and Homebrew bin folders before probing commands.
+- Use the same shell bootstrap for silent Wrangler refresh commands.
+
+### Acceptance checks
+
+From a normal terminal:
+
+```bash
+npm run tauri dev
+```
+
+The setup wizard should mark Node.js / npm and Cloudflare Wrangler as installed when they exist under nvm.
+
+## Requirement 2, basic i18n
+
+### Problem
+
+The app is English-only. For personal daily use, the main navigation and setup/settings surfaces should support Chinese.
+
+### Expected behavior
+
+The app should include:
+
+- English, `en-US`
+- Simplified Chinese, `zh-CN`
+- A language selector in Settings
+- Persisted language preference in localStorage
+
+### Initial translation scope
+
+Translate only high-frequency surfaces in this pass:
+
+- Setup wizard
+- Sidebar navigation
+- Top title labels
+- Settings page headings and tabs
+- Common empty-state and coming-soon labels where easy
+
+Do not try to translate every D1/R2 table cell and every Pro/hidden feature in the first pass.
+
+## Requirement 3, public clone runnable
+
+### Problem
+
+The upstream repository imports `src/pro_modules`, but that folder is ignored and absent in a public clone.
+
+### Expected behavior
+
+The MakerJackie fork should run locally without private Pro modules.
+
+### Implementation direction
+
+Add public fallback modules under `src/pro_modules` and adjust `.gitignore` so these fallback files are tracked.
+
+Fallback behavior:
+
+- Remote config defaults to disabled paid features.
+- R2 Buckets view remains usable for bucket listing and object listing with the public backend commands.
+- Pro-only actions show disabled state or a clear message.
+- Audit and query-history views render placeholder screens.
+
+## Requirement 4, keep changes small
+
+This first fork should stay close to upstream.
+
+Avoid:
+
+- Big design rewrites
+- Deep R2 upload/download refactors
+- New auth systems
+- `cf` CLI integration
+- Local Explorer integration
+
+## Future ideas
+
+Potential follow-up work:
+
+- R2 image hosting workflow, upload, compress, copy Markdown URL
+- D1 local/remote diff
+- D1 seed and backup helpers
+- KV JSON search and editor
+- Cloudflare API token permission checker
+- Local Explorer API companion view
+
+## Verification
+
+Run:
+
+```bash
+npm install
+npm run build
+npm run tauri dev
+```
+
+Expected result:
+
+- TypeScript build passes.
+- Rust build passes or surfaces only environment-specific toolchain issues.
+- App starts locally.
+- Setup wizard sees nvm-provided Node/npm/Wrangler.
+- Settings exposes language selection.
diff --git a/src-tauri/src/cloudflare_auth.rs b/src-tauri/src/cloudflare_auth.rs
index 61d55b3..6efcf89 100644
--- a/src-tauri/src/cloudflare_auth.rs
+++ b/src-tauri/src/cloudflare_auth.rs
@@ -9,6 +9,7 @@ use std::fs;
 use std::path::PathBuf;
 
 use crate::cloudflare_client::{CfError, CfResponse, CloudflareClient};
+use crate::shell_env::{login_shell, with_user_path};
 
 // ── Error type ─────────────────────────────────────────────────────────────────
 
@@ -268,8 +269,10 @@ pub async fn refresh_wrangler_token() -> Result<CloudflareCredentials, AuthError
             c.args(["/c", "npx", "wrangler", "d1", "list"]);
             c
         } else {
-            let mut c = std::process::Command::new("npx");
-            c.args(["wrangler", "d1", "list"]);
+            let (shell, login_flag) = login_shell();
+            let mut c = std::process::Command::new(shell);
+            let command = with_user_path("npx wrangler d1 list");
+            c.args([login_flag, "-c", &command]);
             c
         };
 
diff --git a/src-tauri/src/lib.rs b/src-tauri/src/lib.rs
index e7cebf3..65d84ed 100644
--- a/src-tauri/src/lib.rs
+++ b/src-tauri/src/lib.rs
@@ -5,6 +5,7 @@ pub mod cloudflare_client;
 pub mod d1;
 pub mod r2;
 pub mod setup;
+pub mod shell_env;
 pub mod user;
 pub mod db;
 
diff --git a/src-tauri/src/setup.rs b/src-tauri/src/setup.rs
index 3df6c03..9ecdc26 100644
--- a/src-tauri/src/setup.rs
+++ b/src-tauri/src/setup.rs
@@ -3,6 +3,7 @@
 use serde::Serialize;
 use tauri::{AppHandle, Emitter};
 use tokio::process::Command;
+use crate::shell_env::{login_shell, probe_command, with_user_path};
 
 // ── Types ──────────────────────────────────────────────────────────────────────
 
@@ -41,18 +42,6 @@ impl Serialize for SetupError {
 
 // ── Helpers ────────────────────────────────────────────────────────────────────
 
-/// Resolve the correct login shell for the current platform.
-/// macOS defaults to zsh; Linux falls back to $SHELL or /bin/bash.
-fn login_shell() -> (&'static str, &'static str) {
-    if cfg!(target_os = "macos") {
-        // macOS: use zsh with login flag to load ~/.zshrc / ~/.zprofile
-        ("zsh", "-l")
-    } else {
-        // Linux: honour $SHELL, fall back to bash
-        ("bash", "-l")
-    }
-}
-
 /// Returns `true` when the given binary is reachable on PATH.
 async fn is_available(bin: &str) -> bool {
     let cmd = if cfg!(target_os = "windows") {
@@ -64,11 +53,7 @@ async fn is_available(bin: &str) -> bool {
             .await
     } else {
         let (shell, login_flag) = login_shell();
-        // Prepend the user-local npm-global bin dir so we can discover
-        // binaries installed via our custom npm prefix without a shell restart.
-        let probe = format!(
-            "export PATH=\"$HOME/.npm-global/bin:$PATH\" && {bin} --version"
-        );
+        let probe = probe_command(bin);
         Command::new(shell)
             .args([login_flag, "-c", &probe])
             .stdout(std::process::Stdio::null())
@@ -101,8 +86,9 @@ async fn run_shell(command: &str) -> Result<String, SetupError> {
             .await?
     } else {
         let (shell, login_flag) = login_shell();
+        let command = with_user_path(command);
         Command::new(shell)
-            .args([login_flag, "-c", command])
+            .args([login_flag, "-c", &command])
             .output()
             .await?
     };
diff --git a/src-tauri/src/shell_env.rs b/src-tauri/src/shell_env.rs
new file mode 100644
index 0000000..a259566
--- /dev/null
+++ b/src-tauri/src/shell_env.rs
@@ -0,0 +1,26 @@
+pub fn login_shell() -> (&'static str, &'static str) {
+    if cfg!(target_os = "macos") {
+        ("zsh", "-l")
+    } else {
+        ("bash", "-l")
+    }
+}
+
+pub fn user_path_prefix() -> &'static str {
+    r#"export NVM_DIR="${NVM_DIR:-$HOME/.nvm}";
+if [ -s "$NVM_DIR/nvm.sh" ]; then . "$NVM_DIR/nvm.sh" >/dev/null 2>&1; fi;
+for d in "$HOME"/.nvm/versions/node/*/bin "$HOME"/.npm-global/bin /opt/homebrew/bin /usr/local/bin; do
+  if [ -d "$d" ]; then PATH="$d:$PATH"; fi;
+done;
+export PATH"#
+}
+
+pub fn with_user_path(command: &str) -> String {
+    format!("{}; {}", user_path_prefix(), command)
+}
+
+pub fn probe_command(bin: &str) -> String {
+    with_user_path(&format!(
+        "command -v {bin} >/dev/null 2>&1 && {bin} --version >/dev/null 2>&1"
+    ))
+}
diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
index eded2f8..4930836 100644
--- a/src/components/Layout.tsx
+++ b/src/components/Layout.tsx
@@ -34,6 +34,7 @@ import {
 } from "@/store/useAppStore";
 import { invokeCloudflare, useCloudflareAccounts } from "@/hooks/useCloudflare";
 import { useRemoteConfig } from "@/pro_modules/frontend/useRemoteConfig";
+import { useI18n } from "@/lib/i18n";
 import { AuditZoneProvider } from "@/pro_modules/frontend/AuditZoneContext";
 import { SecurityPosture } from "@/pro_modules/ui/audits/SecurityPosture";
 import { PerformancePosture } from "@/pro_modules/ui/audits/PerformancePosture";
@@ -57,52 +58,6 @@ interface NavItem {
   badge?: string;
 }
 
-const NAV_GROUPS: NavGroup[] = [
-  {
-    label: "Storage & Data",
-    items: [
-      {
-        id: "r2",
-        label: "R2 Buckets",
-        icon: Box,
-      },
-      { id: "d1", label: "Databases (D1)", icon: Database },
-      {
-        id: "kv",
-        label: "KV Namespaces",
-        icon: KeyRound,
-        disabled: true,
-        badge: "Soon",
-      },
-    ],
-  },
-  {
-    label: "Compute",
-    items: [
-      {
-        id: "vectorize",
-        label: "Vectorize",
-        icon: Activity,
-        disabled: true,
-        badge: "Soon",
-      },
-    ],
-  },
-  {
-    label: "System",
-    items: [
-      {
-        id: "logs",
-        label: "Workers Logs",
-        icon: ScrollText,
-        disabled: true,
-        badge: "Soon",
-      },
-      { id: "settings", label: "Settings", icon: Settings },
-    ],
-  },
-];
-
 const THEME_OPTIONS: {
   value: Theme;
   icon: React.ElementType;
@@ -388,6 +343,7 @@ function TitleBar({ collapsed, onToggle, title, onNavigate }: TitleBarProps) {
 
 // ── Simple page router ────────────────────────────────────────────────────────
 function PageContent({ activeId, onNavigate }: { activeId: string; onNavigate: (id: string) => void }) {
+  const { t } = useI18n();
   if (activeId === "d1") return <DatabasesView />;
   if (activeId === "r2") return <R2BucketsView />;
   if (activeId === "settings") return <SettingsView />;
@@ -401,15 +357,15 @@ function PageContent({ activeId, onNavigate }: { activeId: string; onNavigate: (
   if (activeId.startsWith("audit")) {
     return (
       <div className="flex flex-col items-center justify-center h-full text-center gap-2">
-        <p className="text-muted-foreground text-sm">Audit view coming soon</p>
+        <p className="text-muted-foreground text-sm">{t("common.auditComingSoon")}</p>
       </div>
     );
   }
 
   // KV and Settings views will be added in subsequent steps
   return (
-    <div className="flex flex-col items-center justify-center h-full text-center gap-2">
-      <p className="text-muted-foreground text-sm">Coming soon</p>
+      <div className="flex flex-col items-center justify-center h-full text-center gap-2">
+      <p className="text-muted-foreground text-sm">{t("common.comingSoon")}</p>
     </div>
   );
 }
@@ -417,6 +373,7 @@ function PageContent({ activeId, onNavigate }: { activeId: string; onNavigate: (
 // ── Layout ─────────────────────────────────────────────────────────────────────
 
 export function Layout() {
+  const { t } = useI18n();
   const [collapsed, setCollapsed] = useState(false);
   const [activeId, setActiveId] = useState("r2");
   const userProfile = useAppStore((s) => s.userProfile);
@@ -425,22 +382,62 @@ export function Layout() {
   const { data: config } = useRemoteConfig();
 
   const navGroups = useMemo(() => {
-    const groups = [...NAV_GROUPS];
+    const groups: NavGroup[] = [
+      {
+        label: t("nav.storageData"),
+        items: [
+          { id: "r2", label: t("nav.r2"), icon: Box },
+          { id: "d1", label: t("nav.d1"), icon: Database },
+          {
+            id: "kv",
+            label: t("nav.kv"),
+            icon: KeyRound,
+            disabled: true,
+            badge: t("common.soon"),
+          },
+        ],
+      },
+      {
+        label: t("nav.compute"),
+        items: [
+          {
+            id: "vectorize",
+            label: t("nav.vectorize"),
+            icon: Activity,
+            disabled: true,
+            badge: t("common.soon"),
+          },
+        ],
+      },
+      {
+        label: t("nav.system"),
+        items: [
+          {
+            id: "logs",
+            label: t("nav.workersLogs"),
+            icon: ScrollText,
+            disabled: true,
+            badge: t("common.soon"),
+          },
+          { id: "settings", label: t("nav.settings"), icon: Settings },
+        ],
+      },
+    ];
     if (config?.enable_audits) {
       groups.splice(1, 0, {
-        label: "Audit & Optimization",
+        label: t("nav.audit"),
         items: [
-          { id: "audit", label: "Overview", icon: Globe },
-          { id: "audit-scanner", label: "Domain Scanner", icon: ScanSearch },
-          { id: "audit-security", label: "Security Posture", icon: Shield },
-          { id: "audit-performance", label: "Performance", icon: Zap },
-          { id: "audit-dns", label: "DNS & Email", icon: Mail },
-          { id: "audit-preferences", label: "Preferences", icon: Settings },
+          { id: "audit", label: t("nav.auditOverview"), icon: Globe },
+          { id: "audit-scanner", label: t("nav.domainScanner"), icon: ScanSearch },
+          { id: "audit-security", label: t("nav.securityPosture"), icon: Shield },
+          { id: "audit-performance", label: t("nav.performance"), icon: Zap },
+          { id: "audit-dns", label: t("nav.dnsEmail"), icon: Mail },
+          { id: "audit-preferences", label: t("nav.preferences"), icon: Settings },
         ],
       });
     }
     return groups;
-  }, [config?.enable_audits]);
+  }, [config?.enable_audits, t]);
 
   useCloudflareAccounts();
 
diff --git a/src/components/SettingsView.tsx b/src/components/SettingsView.tsx
index 6dd7955..a436cec 100644
--- a/src/components/SettingsView.tsx
+++ b/src/components/SettingsView.tsx
@@ -48,8 +48,11 @@ import {
   DialogDescription,
   DialogTrigger 
 } from "@/components/ui/dialog";
+import { useI18n } from "@/lib/i18n";
+import type { AppLanguage } from "@/store/useAppStore";
 
 export function SettingsView() {
+  const { language, setLanguage, t } = useI18n();
   const { theme, setTheme } = useTheme();
   const userProfile = useAppStore(s => s.userProfile);
   const cloudflareAccountId = useAppStore(s => s.cloudflareAccountId);
@@ -153,38 +156,38 @@ export function SettingsView() {
     <ScrollArea className="h-full">
       <div className="max-w-5xl mx-auto py-8 px-6 space-y-8">
         <div className="flex flex-col gap-1">
-          <h1 className="text-3xl font-bold tracking-tight">Settings</h1>
-          <p className="text-muted-foreground">Manage your application preferences and Cloudflare connection.</p>
+          <h1 className="text-3xl font-bold tracking-tight">{t("settings.title")}</h1>
+          <p className="text-muted-foreground">{t("settings.subtitle")}</p>
         </div>
         
         <Tabs defaultValue="general" className="flex flex-col md:flex-row gap-10">
           <TabsList className="flex md:flex-col h-auto justify-start bg-transparent space-y-1 p-0 w-full md:w-56 shrink-0">
             <TabsTrigger value="general" className="w-full justify-start gap-2 h-10 px-4 data-[state=active]:bg-primary/10 data-[state=active]:text-primary transition-all">
               <Settings2 size={16} />
-              General
+              {t("settings.general")}
             </TabsTrigger>
             <TabsTrigger value="appearance" className="w-full justify-start gap-2 h-10 px-4 data-[state=active]:bg-primary/10 data-[state=active]:text-primary transition-all">
               <Palette size={16} />
-              Appearance
+              {t("settings.appearance")}
             </TabsTrigger>
             <TabsTrigger value="d1" className="w-full justify-start gap-2 h-10 px-4 data-[state=active]:bg-primary/10 data-[state=active]:text-primary transition-all">
               <Database size={16} />
-              D1 Database
+              {t("settings.d1")}
             </TabsTrigger>
             <TabsTrigger value="privacy" className="w-full justify-start gap-2 h-10 px-4 data-[state=active]:bg-primary/10 data-[state=active]:text-primary transition-all">
               <Shield size={16} />
-              Privacy
+              {t("settings.privacy")}
             </TabsTrigger>
             <TabsTrigger value="updates" className="w-full justify-start gap-2 h-10 px-4 data-[state=active]:bg-primary/10 data-[state=active]:text-primary transition-all relative">
               <Download size={16} />
-              Updates
+              {t("settings.updates")}
               {status === "available" && (
                 <span className="absolute right-2 top-1/2 -translate-y-1/2 w-2 h-2 bg-primary rounded-full animate-pulse" />
               )}
             </TabsTrigger>
             <TabsTrigger value="about" className="w-full justify-start gap-2 h-10 px-4 data-[state=active]:bg-primary/10 data-[state=active]:text-primary transition-all">
               <Info size={16} />
-              About
+              {t("settings.about")}
             </TabsTrigger>
           </TabsList>
 
@@ -195,9 +198,9 @@ export function SettingsView() {
                 <CardHeader className="pb-4">
                   <div className="flex items-center gap-2 mb-1">
                     <Globe size={18} className="text-primary" />
-                    <CardTitle className="text-lg">Cloudflare Account</CardTitle>
+                    <CardTitle className="text-lg">{t("settings.cloudflareAccount")}</CardTitle>
                   </div>
-                  <CardDescription>Configure how CF Studio connects to your Cloudflare infrastructure.</CardDescription>
+                  <CardDescription>{t("settings.cloudflareAccountDesc")}</CardDescription>
                 </CardHeader>
                 <CardContent className="space-y-6">
                   <div className="flex items-center justify-between p-5 border border-border/50 rounded-xl bg-background/50 backdrop-blur-sm">
@@ -206,13 +209,13 @@ export function SettingsView() {
                         <Zap size={20} />
                       </div>
                       <div>
-                        <p className="text-sm font-semibold">Wrangler Session</p>
-                        <p className="text-xs text-muted-foreground">Connected via local CLI configuration</p>
+                        <p className="text-sm font-semibold">{t("settings.wranglerSession")}</p>
+                        <p className="text-xs text-muted-foreground">{t("settings.wranglerSessionDesc")}</p>
                       </div>
                     </div>
                     <Button variant="secondary" size="sm" onClick={handleRefreshConnection} disabled={isRefreshing} className="h-8">
                       <RefreshCw className={cn("mr-2 h-3.5 w-3.5", isRefreshing && "animate-spin")} />
-                      Refresh Token
+                      {t("settings.refreshToken")}
                     </Button>
                   </div>
 
@@ -220,19 +223,19 @@ export function SettingsView() {
                     <div className="space-y-2.5">
                       <div className="flex items-center gap-2 text-muted-foreground">
                         <User size={14} />
-                        <Label className="text-xs font-semibold uppercase tracking-wider">Account ID</Label>
+                        <Label className="text-xs font-semibold uppercase tracking-wider">{t("settings.accountId")}</Label>
                       </div>
                       <div className="group relative px-3 py-2 text-sm bg-background border border-border/50 rounded-lg font-mono truncate select-all h-10 flex items-center transition-colors hover:border-primary/30">
-                        {activeAccount?.id || cloudflareAccountId || "Not available"}
+                        {activeAccount?.id || cloudflareAccountId || t("settings.notAvailable")}
                       </div>
                     </div>
                     <div className="space-y-2.5">
                       <div className="flex items-center gap-2 text-muted-foreground">
                         <Mail size={14} />
-                        <Label className="text-xs font-semibold uppercase tracking-wider">User Email</Label>
+                        <Label className="text-xs font-semibold uppercase tracking-wider">{t("settings.userEmail")}</Label>
                       </div>
                       <div className="px-3 py-2 text-sm bg-background border border-border/50 rounded-lg font-mono truncate h-10 flex items-center">
-                        {userProfile?.email || "Fetching..."}
+                        {userProfile?.email || t("settings.fetching")}
                       </div>
                     </div>
                   </div>
@@ -241,13 +244,27 @@ export function SettingsView() {
 
               <Card className="border-none shadow-md bg-muted/20">
                 <CardHeader className="pb-4">
-                  <CardTitle className="text-lg">App Behavior</CardTitle>
+                  <CardTitle className="text-lg">{t("settings.appBehavior")}</CardTitle>
                 </CardHeader>
-                <CardContent>
+                <CardContent className="space-y-5">
+                  <div className="flex items-center justify-between gap-6 py-2">
+                    <div className="space-y-1">
+                      <Label className="text-sm font-medium">{t("settings.language")}</Label>
+                      <p className="text-xs text-muted-foreground">{t("settings.languageDesc")}</p>
+                    </div>
+                    <select
+                      value={language}
+                      onChange={(event) => setLanguage(event.target.value as AppLanguage)}
+                      className="h-9 rounded-md border border-border bg-background px-3 text-sm text-foreground outline-none focus:ring-2 focus:ring-primary/20"
+                    >
+                      <option value="en-US">{t("settings.english")}</option>
+                      <option value="zh-CN">{t("settings.chinese")}</option>
+                    </select>
+                  </div>
                   <div className="flex items-center justify-between py-2">
                     <div className="space-y-1">
-                      <Label className="text-sm font-medium">Automatic Updates</Label>
-                      <p className="text-xs text-muted-foreground">Download and install updates automatically on startup.</p>
+                      <Label className="text-sm font-medium">{t("settings.autoUpdates")}</Label>
+                      <p className="text-xs text-muted-foreground">{t("settings.autoUpdatesDesc")}</p>
                     </div>
                     <Switch checked={autoUpdate} onCheckedChange={setAutoUpdate} />
                   </div>
@@ -258,15 +275,15 @@ export function SettingsView() {
                 <CardHeader className="pb-4">
                   <div className="flex items-center gap-2 mb-1">
                     <LogOut size={18} className="text-red-500" />
-                    <CardTitle className="text-lg text-red-500">Danger Zone</CardTitle>
+                    <CardTitle className="text-lg text-red-500">{t("settings.dangerZone")}</CardTitle>
                   </div>
-                  <CardDescription>Actions that affect your session and local data.</CardDescription>
+                  <CardDescription>{t("settings.dangerZoneDesc")}</CardDescription>
                 </CardHeader>
                 <CardContent>
                   <div className="flex items-center justify-between p-4 border border-red-500/20 rounded-xl bg-red-500/5">
                     <div className="space-y-1">
-                      <p className="text-sm font-semibold text-red-600 dark:text-red-400">Sign Out</p>
-                      <p className="text-xs text-muted-foreground">Log out from Cloudflare and clear all local cache.</p>
+                      <p className="text-sm font-semibold text-red-600 dark:text-red-400">{t("settings.signOut")}</p>
+                      <p className="text-xs text-muted-foreground">{t("settings.signOutDesc")}</p>
                     </div>
                     <Button 
                       variant="destructive" 
@@ -280,7 +297,7 @@ export function SettingsView() {
                       ) : (
                         <LogOut className="mr-2 h-4 w-4" />
                       )}
-                      Log Out
+                      {t("settings.signOut")}
                     </Button>
                   </div>
                 </CardContent>
diff --git a/src/components/SetupWizard.tsx b/src/components/SetupWizard.tsx
index c87935f..bf68877 100644
--- a/src/components/SetupWizard.tsx
+++ b/src/components/SetupWizard.tsx
@@ -11,6 +11,7 @@ import {
 } from "lucide-react";
 import { cn } from "@/lib/utils";
 import { Button } from "@/components/ui/button";
+import { useI18n } from "@/lib/i18n";
 
 // ── Types ──────────────────────────────────────────────────────────────────────
 
@@ -33,6 +34,7 @@ interface SetupWizardProps {
 }
 
 export function SetupWizard({ children }: SetupWizardProps) {
+  const { t } = useI18n();
   const [phase, setPhase] = useState<Phase>("checking");
   const [status, setStatus] = useState<DependencyStatus | null>(null);
   const [progress, setProgress] = useState(0);
@@ -117,14 +119,14 @@ export function SetupWizard({ children }: SetupWizardProps) {
           <div className="flex items-center justify-center w-10 h-10 rounded-lg bg-primary/10">
             <CloudCog size={22} className="text-primary" strokeWidth={1.75} />
           </div>
-          <div>
-            <h1 className="text-lg font-semibold text-foreground tracking-tight">
-              CF Studio Setup
-            </h1>
-            <p className="text-xs text-muted-foreground">
-              Required tools for full functionality
-            </p>
-          </div>
+              <div>
+                <h1 className="text-lg font-semibold text-foreground tracking-tight">
+                  {t("setup.title")}
+                </h1>
+                <p className="text-xs text-muted-foreground">
+                  {t("setup.subtitle")}
+                </p>
+              </div>
         </div>
 
         {/* ── Phase: Checking ─────────────────────────────────────── */}
@@ -136,7 +138,7 @@ export function SetupWizard({ children }: SetupWizardProps) {
               strokeWidth={2}
             />
             <p className="text-sm text-muted-foreground">
-              Checking installed dependencies…
+              {t("setup.checking")}
             </p>
           </div>
         )}
@@ -147,12 +149,12 @@ export function SetupWizard({ children }: SetupWizardProps) {
             {/* Dependency list */}
             <div className="space-y-3 mb-6">
               <DepRow
-                label="Node.js / npm"
+                label={t("setup.nodeNpm")}
                 icon={Terminal}
                 installed={status.npm_installed}
               />
               <DepRow
-                label="Cloudflare Wrangler"
+                label={t("setup.wrangler")}
                 icon={CloudCog}
                 installed={status.wrangler_installed}
               />
@@ -164,20 +166,11 @@ export function SetupWizard({ children }: SetupWizardProps) {
               onClick={handleInstall}
             >
               <Download size={16} />
-              Install Required Tools
+              {t("setup.install")}
             </Button>
 
             <p className="mt-3 text-center text-[11px] text-muted-foreground/60">
-              On macOS this requires{" "}
-              <a
-                href="https://brew.sh"
-                target="_blank"
-                rel="noreferrer"
-                className="underline hover:text-muted-foreground transition-colors"
-              >
-                Homebrew
-              </a>
-              . On Windows it uses winget.
+              {t("setup.installNote")}
             </p>
           </>
         )}
@@ -214,7 +207,7 @@ export function SetupWizard({ children }: SetupWizardProps) {
                 strokeWidth={2}
               />
               <span className="text-xs">
-                This may take a few minutes — please don't close the app.
+                {t("setup.installingNote")}
               </span>
             </div>
           </div>
@@ -225,7 +218,7 @@ export function SetupWizard({ children }: SetupWizardProps) {
           <div className="space-y-4">
             <div className="rounded-lg border border-destructive/30 bg-destructive/5 p-4">
               <p className="text-sm text-destructive font-medium mb-1">
-                Installation failed
+                {t("setup.failed")}
               </p>
               <p className="text-xs text-destructive/80 break-words">
                 {errorMsg}
@@ -238,7 +231,7 @@ export function SetupWizard({ children }: SetupWizardProps) {
               onClick={handleInstall}
             >
               <Download size={16} />
-              Retry Installation
+              {t("setup.retry")}
             </Button>
           </div>
         )}
diff --git a/src/lib/i18n.ts b/src/lib/i18n.ts
new file mode 100644
index 0000000..55f1269
--- /dev/null
+++ b/src/lib/i18n.ts
@@ -0,0 +1,135 @@
+import { useAppStore, type AppLanguage } from "@/store/useAppStore";
+
+const translations = {
+  "en-US": {
+    "nav.storageData": "Storage & Data",
+    "nav.r2": "R2 Buckets",
+    "nav.d1": "Databases (D1)",
+    "nav.kv": "KV Namespaces",
+    "nav.compute": "Compute",
+    "nav.vectorize": "Vectorize",
+    "nav.system": "System",
+    "nav.workersLogs": "Workers Logs",
+    "nav.settings": "Settings",
+    "nav.audit": "Audit & Optimization",
+    "nav.auditOverview": "Overview",
+    "nav.domainScanner": "Domain Scanner",
+    "nav.securityPosture": "Security Posture",
+    "nav.performance": "Performance",
+    "nav.dnsEmail": "DNS & Email",
+    "nav.preferences": "Preferences",
+    "common.soon": "Soon",
+    "common.comingSoon": "Coming soon",
+    "common.auditComingSoon": "Audit view coming soon",
+    "setup.title": "CF Studio Setup",
+    "setup.subtitle": "Required tools for full functionality",
+    "setup.checking": "Checking installed dependencies...",
+    "setup.nodeNpm": "Node.js / npm",
+    "setup.wrangler": "Cloudflare Wrangler",
+    "setup.install": "Install Required Tools",
+    "setup.installNote": "On macOS this checks Homebrew, nvm, npm-global, and common shell paths. On Windows it uses winget.",
+    "setup.installingNote": "This may take a few minutes. Please keep the app open.",
+    "setup.failed": "Installation failed",
+    "setup.retry": "Retry Installation",
+    "settings.title": "Settings",
+    "settings.subtitle": "Manage your application preferences and Cloudflare connection.",
+    "settings.general": "General",
+    "settings.appearance": "Appearance",
+    "settings.d1": "D1 Database",
+    "settings.privacy": "Privacy",
+    "settings.updates": "Updates",
+    "settings.about": "About",
+    "settings.language": "Language",
+    "settings.languageDesc": "Choose the interface language for this local fork.",
+    "settings.english": "English",
+    "settings.chinese": "Simplified Chinese",
+    "settings.cloudflareAccount": "Cloudflare Account",
+    "settings.cloudflareAccountDesc": "Configure how CF Studio connects to your Cloudflare infrastructure.",
+    "settings.wranglerSession": "Wrangler Session",
+    "settings.wranglerSessionDesc": "Connected via local CLI configuration",
+    "settings.refreshToken": "Refresh Token",
+    "settings.accountId": "Account ID",
+    "settings.userEmail": "User Email",
+    "settings.notAvailable": "Not available",
+    "settings.fetching": "Fetching...",
+    "settings.appBehavior": "App Behavior",
+    "settings.autoUpdates": "Automatic Updates",
+    "settings.autoUpdatesDesc": "Download and install updates automatically on startup.",
+    "settings.dangerZone": "Danger Zone",
+    "settings.dangerZoneDesc": "Actions that affect your session and local data.",
+    "settings.signOut": "Sign Out",
+    "settings.signOutDesc": "Log out from Cloudflare and clear all local cache.",
+  },
+  "zh-CN": {
+    "nav.storageData": "存储和数据",
+    "nav.r2": "R2 存储桶",
+    "nav.d1": "D1 数据库",
+    "nav.kv": "KV 命名空间",
+    "nav.compute": "计算",
+    "nav.vectorize": "Vectorize",
+    "nav.system": "系统",
+    "nav.workersLogs": "Workers 日志",
+    "nav.settings": "设置",
+    "nav.audit": "审计和优化",
+    "nav.auditOverview": "总览",
+    "nav.domainScanner": "域名扫描",
+    "nav.securityPosture": "安全状态",
+    "nav.performance": "性能",
+    "nav.dnsEmail": "DNS 和邮件",
+    "nav.preferences": "偏好设置",
+    "common.soon": "即将支持",
+    "common.comingSoon": "即将支持",
+    "common.auditComingSoon": "审计视图即将支持",
+    "setup.title": "CF Studio 设置",
+    "setup.subtitle": "检查完整功能所需的本地工具",
+    "setup.checking": "正在检查已安装的依赖...",
+    "setup.nodeNpm": "Node.js / npm",
+    "setup.wrangler": "Cloudflare Wrangler",
+    "setup.install": "安装所需工具",
+    "setup.installNote": "macOS 会检查 Homebrew、nvm、npm-global 和常见 shell 路径。Windows 使用 winget。",
+    "setup.installingNote": "这可能需要几分钟，请保持应用打开。",
+    "setup.failed": "安装失败",
+    "setup.retry": "重试安装",
+    "settings.title": "设置",
+    "settings.subtitle": "管理应用偏好和 Cloudflare 连接。",
+    "settings.general": "通用",
+    "settings.appearance": "外观",
+    "settings.d1": "D1 数据库",
+    "settings.privacy": "隐私",
+    "settings.updates": "更新",
+    "settings.about": "关于",
+    "settings.language": "语言",
+    "settings.languageDesc": "选择这个本地 fork 的界面语言。",
+    "settings.english": "英文",
+    "settings.chinese": "简体中文",
+    "settings.cloudflareAccount": "Cloudflare 账号",
+    "settings.cloudflareAccountDesc": "配置 CF Studio 如何连接你的 Cloudflare 基础设施。",
+    "settings.wranglerSession": "Wrangler 登录态",
+    "settings.wranglerSessionDesc": "通过本地 CLI 配置连接",
+    "settings.refreshToken": "刷新 Token",
+    "settings.accountId": "账号 ID",
+    "settings.userEmail": "用户邮箱",
+    "settings.notAvailable": "不可用",
+    "settings.fetching": "获取中...",
+    "settings.appBehavior": "应用行为",
+    "settings.autoUpdates": "自动更新",
+    "settings.autoUpdatesDesc": "启动时自动下载并安装更新。",
+    "settings.dangerZone": "危险操作",
+    "settings.dangerZoneDesc": "这些操作会影响你的登录态和本地数据。",
+    "settings.signOut": "退出登录",
+    "settings.signOutDesc": "退出 Cloudflare 并清空本地缓存。",
+  },
+} satisfies Record<AppLanguage, Record<string, string>>;
+
+export type TranslationKey = keyof typeof translations["en-US"];
+
+export function useI18n() {
+  const language = useAppStore((state) => state.language);
+  const setLanguage = useAppStore((state) => state.setLanguage);
+
+  return {
+    language,
+    setLanguage,
+    t: (key: TranslationKey) => translations[language][key] ?? translations["en-US"][key] ?? key,
+  };
+}
diff --git a/src/pro_modules b/src/pro_modules
deleted file mode 160000
index 42131a1..0000000
--- a/src/pro_modules
+++ /dev/null
@@ -1 +0,0 @@
-Subproject commit 42131a18ebb9d487ab462cc55f860aa425df70e7
diff --git a/src/pro_modules/frontend/AuditZoneContext.tsx b/src/pro_modules/frontend/AuditZoneContext.tsx
new file mode 100644
index 0000000..2d36d34
--- /dev/null
+++ b/src/pro_modules/frontend/AuditZoneContext.tsx
@@ -0,0 +1,5 @@
+import type { ReactNode } from "react";
+
+export function AuditZoneProvider({ children }: { children: ReactNode }) {
+  return <>{children}</>;
+}
diff --git a/src/pro_modules/frontend/IndexManagerDialog.tsx b/src/pro_modules/frontend/IndexManagerDialog.tsx
new file mode 100644
index 0000000..5baaaa4
--- /dev/null
+++ b/src/pro_modules/frontend/IndexManagerDialog.tsx
@@ -0,0 +1,16 @@
+import type { D1TableSchema } from "@/hooks/useCloudflare";
+
+export function IndexManagerDialog({
+  open,
+  onOpenChange,
+}: {
+  databaseId: string;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  allTables: D1TableSchema[];
+}) {
+  if (open) {
+    queueMicrotask(() => onOpenChange(false));
+  }
+  return null;
+}
diff --git a/src/pro_modules/frontend/ProFeatureGate.tsx b/src/pro_modules/frontend/ProFeatureGate.tsx
new file mode 100644
index 0000000..e1373d9
--- /dev/null
+++ b/src/pro_modules/frontend/ProFeatureGate.tsx
@@ -0,0 +1,24 @@
+import { Dialog, DialogContent, DialogDescription, DialogTitle } from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+
+export function ProFeatureGate({
+  isOpen,
+  onClose,
+  featureName,
+}: {
+  isOpen: boolean;
+  onClose: () => void;
+  featureName?: string;
+}) {
+  return (
+    <Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
+      <DialogContent>
+        <DialogTitle>Feature unavailable</DialogTitle>
+        <DialogDescription>
+          {featureName ? `${featureName} is not included in this public fork yet.` : "This feature is not included in this public fork yet."}
+        </DialogDescription>
+        <Button onClick={onClose}>Close</Button>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/src/pro_modules/frontend/PurchaseScreen.tsx b/src/pro_modules/frontend/PurchaseScreen.tsx
new file mode 100644
index 0000000..f20d0ec
--- /dev/null
+++ b/src/pro_modules/frontend/PurchaseScreen.tsx
@@ -0,0 +1,16 @@
+import { Dialog, DialogContent, DialogDescription, DialogTitle } from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+
+export function PurchaseScreen({ onClose }: { onClose: () => void }) {
+  return (
+    <Dialog open onOpenChange={(open) => !open && onClose()}>
+      <DialogContent>
+        <DialogTitle>Feature unavailable</DialogTitle>
+        <DialogDescription>
+          This public fork ships without the original private Pro module. Add your own implementation here when the workflow is worth keeping.
+        </DialogDescription>
+        <Button onClick={onClose}>Close</Button>
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/src/pro_modules/frontend/R2BucketsView.tsx b/src/pro_modules/frontend/R2BucketsView.tsx
new file mode 100644
index 0000000..d5cb07d
--- /dev/null
+++ b/src/pro_modules/frontend/R2BucketsView.tsx
@@ -0,0 +1,178 @@
+import { useEffect, useState } from "react";
+import { Box, File, Folder, RefreshCw, Trash2 } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { Badge } from "@/components/ui/badge";
+import { useR2Buckets } from "@/hooks/useCloudflare";
+import { deleteR2Object, listR2Objects, type FolderListing, type R2Bucket } from "@/lib/r2";
+import { cn, formatBytes } from "@/lib/utils";
+
+function BucketRow({
+  bucket,
+  active,
+  onClick,
+}: {
+  bucket: R2Bucket;
+  active: boolean;
+  onClick: () => void;
+}) {
+  return (
+    <button
+      onClick={onClick}
+      className={cn(
+        "flex w-full items-center justify-between gap-3 rounded-md px-3 py-2 text-left text-sm transition-colors",
+        active ? "bg-primary/10 text-primary" : "hover:bg-muted"
+      )}
+    >
+      <span className="flex min-w-0 items-center gap-2">
+        <Box size={14} className="shrink-0" />
+        <span className="truncate font-medium">{bucket.name}</span>
+      </span>
+      {bucket.object_count != null && (
+        <Badge variant="secondary" className="shrink-0 text-[10px]">
+          {bucket.object_count}
+        </Badge>
+      )}
+    </button>
+  );
+}
+
+export function R2BucketsView() {
+  const { state, refresh } = useR2Buckets();
+  const [selectedBucket, setSelectedBucket] = useState<R2Bucket | null>(null);
+  const [prefix, setPrefix] = useState("");
+  const [listing, setListing] = useState<FolderListing | null>(null);
+  const [objectsState, setObjectsState] = useState<"idle" | "loading" | "error">("idle");
+  const [error, setError] = useState<string | null>(null);
+
+  const buckets = state.status === "success" ? state.data : [];
+
+  useEffect(() => {
+    if (!selectedBucket && buckets.length > 0) {
+      setSelectedBucket(buckets[0]);
+    }
+  }, [buckets, selectedBucket]);
+
+  useEffect(() => {
+    if (!selectedBucket) return;
+
+    let cancelled = false;
+    setObjectsState("loading");
+    setError(null);
+
+    listR2Objects(selectedBucket.name, prefix)
+      .then((nextListing) => {
+        if (cancelled) return;
+        setListing(nextListing);
+        setObjectsState("idle");
+      })
+      .catch((err) => {
+        if (cancelled) return;
+        setError(String(err));
+        setObjectsState("error");
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [selectedBucket, prefix]);
+
+  const goUp = () => {
+    const trimmed = prefix.replace(/\/$/, "");
+    const parent = trimmed.includes("/") ? `${trimmed.slice(0, trimmed.lastIndexOf("/") + 1)}` : "";
+    setPrefix(parent);
+  };
+
+  const handleDeleteObject = async (key: string) => {
+    if (!selectedBucket) return;
+    await deleteR2Object(selectedBucket.name, key);
+    const nextListing = await listR2Objects(selectedBucket.name, prefix);
+    setListing(nextListing);
+  };
+
+  return (
+    <div className="flex h-full flex-col gap-5">
+      <div className="flex items-center justify-between gap-4">
+        <div>
+          <h1 className="text-lg font-semibold tracking-tight text-foreground">R2 Buckets</h1>
+          <p className="mt-0.5 text-sm text-muted-foreground">
+            Public fallback view for listing buckets and objects in this fork.
+          </p>
+        </div>
+        <Button variant="ghost" size="icon" onClick={refresh} disabled={state.status === "loading"}>
+          <RefreshCw size={14} className={cn(state.status === "loading" && "animate-spin")} />
+        </Button>
+      </div>
+
+      <div className="grid min-h-0 flex-1 grid-cols-[260px_1fr] overflow-hidden rounded-lg border border-border">
+        <aside className="min-h-0 border-r border-border bg-muted/20 p-2">
+          {state.status === "loading" && <p className="p-3 text-sm text-muted-foreground">Loading buckets...</p>}
+          {state.status === "error" && <p className="p-3 text-sm text-destructive">{state.message}</p>}
+          {state.status === "success" && buckets.length === 0 && (
+            <p className="p-3 text-sm text-muted-foreground">No R2 buckets found.</p>
+          )}
+          <div className="space-y-1">
+            {buckets.map((bucket) => (
+              <BucketRow
+                key={bucket.name}
+                bucket={bucket}
+                active={selectedBucket?.name === bucket.name}
+                onClick={() => {
+                  setSelectedBucket(bucket);
+                  setPrefix("");
+                }}
+              />
+            ))}
+          </div>
+        </aside>
+
+        <section className="min-h-0 overflow-auto bg-background">
+          <div className="sticky top-0 z-10 flex items-center justify-between border-b border-border bg-background/95 px-4 py-3">
+            <div className="min-w-0">
+              <p className="truncate text-sm font-semibold">
+                {selectedBucket?.name ?? "Select a bucket"}
+              </p>
+              <p className="truncate font-mono text-xs text-muted-foreground">/{prefix}</p>
+            </div>
+            <Button variant="outline" size="sm" onClick={goUp} disabled={!prefix}>
+              Up
+            </Button>
+          </div>
+
+          {objectsState === "loading" && <p className="p-4 text-sm text-muted-foreground">Loading objects...</p>}
+          {objectsState === "error" && <p className="p-4 text-sm text-destructive">{error}</p>}
+          {objectsState === "idle" && selectedBucket && listing && (
+            <div className="divide-y divide-border">
+              {listing.folders.map((folder) => (
+                <button
+                  key={folder}
+                  onClick={() => setPrefix(folder)}
+                  className="flex w-full items-center gap-3 px-4 py-3 text-left text-sm hover:bg-muted/50"
+                >
+                  <Folder size={15} className="text-primary" />
+                  <span className="font-medium">{folder.replace(prefix, "")}</span>
+                </button>
+              ))}
+              {listing.files.map((file) => (
+                <div key={file.key} className="flex items-center justify-between gap-3 px-4 py-3 text-sm hover:bg-muted/50">
+                  <div className="flex min-w-0 items-center gap-3">
+                    <File size={15} className="text-muted-foreground" />
+                    <div className="min-w-0">
+                      <p className="truncate font-medium">{file.key.replace(prefix, "")}</p>
+                      <p className="text-xs text-muted-foreground">{formatBytes(file.size)}</p>
+                    </div>
+                  </div>
+                  <Button variant="ghost" size="icon" onClick={() => handleDeleteObject(file.key)}>
+                    <Trash2 size={14} />
+                  </Button>
+                </div>
+              ))}
+              {listing.folders.length === 0 && listing.files.length === 0 && (
+                <p className="p-4 text-sm text-muted-foreground">No objects in this prefix.</p>
+              )}
+            </div>
+          )}
+        </section>
+      </div>
+    </div>
+  );
+}
diff --git a/src/pro_modules/frontend/useRemoteConfig.ts b/src/pro_modules/frontend/useRemoteConfig.ts
new file mode 100644
index 0000000..9bfbff1
--- /dev/null
+++ b/src/pro_modules/frontend/useRemoteConfig.ts
@@ -0,0 +1,29 @@
+export interface RemoteConfig {
+  is_export_free?: boolean;
+  current_version?: string;
+  enable_audits?: boolean;
+  max_r2_upload_size?: number;
+  enable_r2_bucket_settings?: boolean;
+  enable_r2_upload?: boolean;
+  enable_r2_bucket_mgmt?: boolean;
+  enable_d1_index_management?: boolean;
+  enable_d1_query_history?: boolean;
+}
+
+const PUBLIC_FALLBACK_CONFIG: RemoteConfig = {
+  is_export_free: false,
+  enable_audits: false,
+  enable_r2_bucket_settings: false,
+  enable_r2_upload: false,
+  enable_r2_bucket_mgmt: false,
+  enable_d1_index_management: false,
+  enable_d1_query_history: false,
+};
+
+export function useRemoteConfig() {
+  return {
+    data: PUBLIC_FALLBACK_CONFIG,
+    isLoading: false,
+    error: null,
+  };
+}
diff --git a/src/pro_modules/hooks/useD1TrackerLogic.ts b/src/pro_modules/hooks/useD1TrackerLogic.ts
new file mode 100644
index 0000000..ca4ff97
--- /dev/null
+++ b/src/pro_modules/hooks/useD1TrackerLogic.ts
@@ -0,0 +1,9 @@
+import type { D1QueryResult } from "@/hooks/useCloudflare";
+
+export async function executeTrackedQueryWithLogic(
+  _options: unknown,
+  executeNetworkCall: () => Promise<D1QueryResult[]>,
+  _context?: unknown,
+): Promise<D1QueryResult[]> {
+  return executeNetworkCall();
+}
diff --git a/src/pro_modules/rust/domain_audit.rs b/src/pro_modules/rust/domain_audit.rs
new file mode 100644
index 0000000..ce9acd0
--- /dev/null
+++ b/src/pro_modules/rust/domain_audit.rs
@@ -0,0 +1,44 @@
+use serde_json::Value;
+
+fn unavailable() -> String {
+    "Domain audit is not included in this public fork yet.".to_string()
+}
+
+#[tauri::command]
+pub async fn list_cf_zones() -> Result<Value, String> { Err(unavailable()) }
+
+#[tauri::command]
+pub async fn get_zone_security_settings() -> Result<Value, String> { Err(unavailable()) }
+
+#[tauri::command]
+pub async fn update_zone_setting() -> Result<Value, String> { Err(unavailable()) }
+
+#[tauri::command]
+pub async fn validate_zone_token() -> Result<Value, String> { Err(unavailable()) }
+
+#[tauri::command]
+pub async fn verify_global_token() -> Result<Value, String> { Err(unavailable()) }
+
+#[tauri::command]
+pub async fn save_zone_token() -> Result<(), String> { Err(unavailable()) }
+
+#[tauri::command]
+pub async fn delete_zone_token() -> Result<(), String> { Ok(()) }
+
+#[tauri::command]
+pub async fn has_zone_token() -> Result<bool, String> { Ok(false) }
+
+#[tauri::command]
+pub async fn get_zone_performance_settings() -> Result<Value, String> { Err(unavailable()) }
+
+#[tauri::command]
+pub async fn get_zone_dns_health() -> Result<Value, String> { Err(unavailable()) }
+
+#[tauri::command]
+pub async fn add_dns_record() -> Result<Value, String> { Err(unavailable()) }
+
+#[tauri::command]
+pub async fn check_active_token() -> Result<Value, String> { Err(unavailable()) }
+
+#[tauri::command]
+pub async fn analyze_domain() -> Result<Value, String> { Err(unavailable()) }
diff --git a/src/pro_modules/rust/history.rs b/src/pro_modules/rust/history.rs
new file mode 100644
index 0000000..d92fb43
--- /dev/null
+++ b/src/pro_modules/rust/history.rs
@@ -0,0 +1,30 @@
+use serde_json::Value;
+
+fn unavailable() -> String {
+    "Query history is not included in this public fork yet.".to_string()
+}
+
+#[tauri::command]
+pub async fn save_query_history() -> Result<Value, String> {
+    Err(unavailable())
+}
+
+#[tauri::command]
+pub async fn get_paginated_history() -> Result<Value, String> {
+    Err(unavailable())
+}
+
+#[tauri::command]
+pub async fn get_global_stats() -> Result<Value, String> {
+    Err(unavailable())
+}
+
+#[tauri::command]
+pub async fn clear_query_history() -> Result<(), String> {
+    Err(unavailable())
+}
+
+#[tauri::command]
+pub async fn get_history_debug_status() -> Result<Value, String> {
+    Err(unavailable())
+}
diff --git a/src/pro_modules/rust/r2_pro.rs b/src/pro_modules/rust/r2_pro.rs
new file mode 100644
index 0000000..73e755d
--- /dev/null
+++ b/src/pro_modules/rust/r2_pro.rs
@@ -0,0 +1,84 @@
+use serde_json::{json, Value};
+
+fn unavailable() -> String {
+    "This R2 action is not included in this public fork yet.".to_string()
+}
+
+#[tauri::command]
+pub async fn fetch_cloudflare_zones() -> Result<Vec<Value>, String> {
+    Ok(Vec::new())
+}
+
+#[tauri::command]
+pub async fn create_r2_bucket(_bucket_name: String) -> Result<(), String> {
+    Err(unavailable())
+}
+
+#[tauri::command]
+pub async fn delete_r2_bucket(_bucket_name: String) -> Result<(), String> {
+    Err(unavailable())
+}
+
+#[tauri::command]
+pub async fn empty_r2_bucket(_bucket_name: String) -> Result<(), String> {
+    Err(unavailable())
+}
+
+#[tauri::command]
+pub async fn upload_r2_object(
+    _bucket_name: String,
+    _key: String,
+    _local_path: String,
+    _upload_id: String,
+) -> Result<(), String> {
+    Err(unavailable())
+}
+
+#[tauri::command]
+pub async fn cancel_upload_r2_object(
+    _upload_id: String,
+    _bucket_name: String,
+    _key: String,
+) -> Result<(), String> {
+    Ok(())
+}
+
+#[tauri::command]
+pub async fn download_r2_object(
+    _bucket_name: String,
+    _key: String,
+    _destination_path: String,
+) -> Result<(), String> {
+    Err(unavailable())
+}
+
+#[tauri::command]
+pub async fn update_r2_bucket_managed_domain(
+    _bucket_name: String,
+    _enabled: bool,
+) -> Result<(), String> {
+    Err(unavailable())
+}
+
+#[tauri::command]
+pub async fn add_r2_bucket_custom_domain(
+    _bucket_name: String,
+    _domain: String,
+    _zone_id: String,
+    _zone_name: String,
+) -> Result<(), String> {
+    Err(unavailable())
+}
+
+#[tauri::command]
+pub async fn remove_r2_bucket_custom_domain(
+    _bucket_name: String,
+    _domain: String,
+) -> Result<(), String> {
+    Err(unavailable())
+}
+
+#[tauri::command]
+pub async fn get_r2_bucket_domains_list(_bucket_name: String) -> Result<Value, String> {
+    Ok(json!({ "managed": null, "custom": [] }))
+}
diff --git a/src/pro_modules/rust/r2_worker_proxy.rs b/src/pro_modules/rust/r2_worker_proxy.rs
new file mode 100644
index 0000000..24813a2
--- /dev/null
+++ b/src/pro_modules/rust/r2_worker_proxy.rs
@@ -0,0 +1,2 @@
+// Public fork placeholder. The original project keeps private R2 proxy helpers
+// under src/pro_modules. This file keeps the public Tauri build self-contained.
diff --git a/src/pro_modules/ui/ActivityDashboard.tsx b/src/pro_modules/ui/ActivityDashboard.tsx
new file mode 100644
index 0000000..c3c1da8
--- /dev/null
+++ b/src/pro_modules/ui/ActivityDashboard.tsx
@@ -0,0 +1,7 @@
+export function ActivityDashboard() {
+  return (
+    <div className="flex h-screen items-center justify-center bg-background p-10 text-center text-muted-foreground">
+      Query history is not included in this public fork yet.
+    </div>
+  );
+}
diff --git a/src/pro_modules/ui/audits/AuditPreferences.tsx b/src/pro_modules/ui/audits/AuditPreferences.tsx
new file mode 100644
index 0000000..bc93100
--- /dev/null
+++ b/src/pro_modules/ui/audits/AuditPreferences.tsx
@@ -0,0 +1,3 @@
+export function AuditPreferences() {
+  return <div className="text-sm text-muted-foreground">Audit preferences are not included in this public fork yet.</div>;
+}
diff --git a/src/pro_modules/ui/audits/DnsEmailPosture.tsx b/src/pro_modules/ui/audits/DnsEmailPosture.tsx
new file mode 100644
index 0000000..f7bba9d
--- /dev/null
+++ b/src/pro_modules/ui/audits/DnsEmailPosture.tsx
@@ -0,0 +1,3 @@
+export function DnsEmailPosture() {
+  return <div className="text-sm text-muted-foreground">DNS and email audit is not included in this public fork yet.</div>;
+}
diff --git a/src/pro_modules/ui/audits/DomainScanner.tsx b/src/pro_modules/ui/audits/DomainScanner.tsx
new file mode 100644
index 0000000..363103b
--- /dev/null
+++ b/src/pro_modules/ui/audits/DomainScanner.tsx
@@ -0,0 +1,3 @@
+export function DomainScanner(_props: { onNavigate?: (id: string) => void }) {
+  return <div className="text-sm text-muted-foreground">Domain scanner is not included in this public fork yet.</div>;
+}
diff --git a/src/pro_modules/ui/audits/Overview.tsx b/src/pro_modules/ui/audits/Overview.tsx
new file mode 100644
index 0000000..613a179
--- /dev/null
+++ b/src/pro_modules/ui/audits/Overview.tsx
@@ -0,0 +1,3 @@
+export function Overview(_props: { onNavigate?: (id: string) => void }) {
+  return <div className="text-sm text-muted-foreground">Audit overview is not included in this public fork yet.</div>;
+}
diff --git a/src/pro_modules/ui/audits/PerformancePosture.tsx b/src/pro_modules/ui/audits/PerformancePosture.tsx
new file mode 100644
index 0000000..6cc4877
--- /dev/null
+++ b/src/pro_modules/ui/audits/PerformancePosture.tsx
@@ -0,0 +1,3 @@
+export function PerformancePosture() {
+  return <div className="text-sm text-muted-foreground">Performance audit is not included in this public fork yet.</div>;
+}
diff --git a/src/pro_modules/ui/audits/SecurityPosture.tsx b/src/pro_modules/ui/audits/SecurityPosture.tsx
new file mode 100644
index 0000000..85f950d
--- /dev/null
+++ b/src/pro_modules/ui/audits/SecurityPosture.tsx
@@ -0,0 +1,3 @@
+export function SecurityPosture() {
+  return <div className="text-sm text-muted-foreground">Security posture audit is not included in this public fork yet.</div>;
+}
diff --git a/src/store/useAppStore.ts b/src/store/useAppStore.ts
index d59f208..e99a5b4 100644
--- a/src/store/useAppStore.ts
+++ b/src/store/useAppStore.ts
@@ -30,6 +30,8 @@ export interface PrivacySettings {
   blurAmount: number;
 }
 
+export type AppLanguage = "en-US" | "zh-CN";
+
 // ── KV placeholder type (populated in a future step) ─────────────────────────
 
 export interface KVNamespace {
@@ -66,6 +68,7 @@ interface AppState {
   autoUpdate: boolean;
   isRefreshingSession: boolean;
   privacySettings: PrivacySettings;
+  language: AppLanguage;
   saveQueryResultsEnabled: boolean;
   saveQueryResultsRowLimit: number | null;
 
@@ -104,6 +107,7 @@ interface AppState {
   setShowTableColumnCounts: (show: boolean) => void;
   setAutoUpdate: (enabled: boolean) => void;
   setPrivacySettings: (settings: Partial<PrivacySettings>) => void;
+  setLanguage: (language: AppLanguage) => void;
   setSaveQueryResultsEnabled: (enabled: boolean) => void;
   setSaveQueryResultsRowLimit: (limit: number | null) => void;
   setSessionId: (id: string) => void;
@@ -162,6 +166,7 @@ export const useAppStore = create<AppState>()(
         r2FileNames: true,
         blurAmount: 5,
       },
+      language: "en-US",
       saveQueryResultsEnabled: false,
       saveQueryResultsRowLimit: 50,
       updateStatus: "idle",
@@ -189,6 +194,7 @@ export const useAppStore = create<AppState>()(
       setShowTableColumnCounts: (show) => set({ showTableColumnCounts: show }),
       setAutoUpdate: (enabled) => set({ autoUpdate: enabled }),
       setPrivacySettings: (settings) => set((s) => ({ privacySettings: { ...s.privacySettings, ...settings } })),
+      setLanguage: (language) => set({ language }),
       setSaveQueryResultsEnabled: (enabled) => set({ saveQueryResultsEnabled: enabled }),
       setSaveQueryResultsRowLimit: (limit) => set({ saveQueryResultsRowLimit: limit }),
       setSessionId: (id) => set({ sessionId: id }),
@@ -281,6 +287,7 @@ export const useAppStore = create<AppState>()(
         tableDensity: state.tableDensity,
         autoUpdate: state.autoUpdate,
         privacySettings: state.privacySettings,
+        language: state.language,
         saveQueryResultsEnabled: state.saveQueryResultsEnabled,
         saveQueryResultsRowLimit: state.saveQueryResultsRowLimit,
         databases: state.databases,

From 32cfc7f0527312c2d1d9ad8d228215c6c3e2dad0 Mon Sep 17 00:00:00 2001
From: jackiexiao <707610215@qq.com>
Date: Mon, 25 May 2026 14:21:31 +0800
Subject: [PATCH 2/4] fix: prefer Cloudflare API token env

---
 src-tauri/src/cloudflare_auth.rs | 24 +++++++++++++++++++++---
 1 file changed, 21 insertions(+), 3 deletions(-)

diff --git a/src-tauri/src/cloudflare_auth.rs b/src-tauri/src/cloudflare_auth.rs
index 6efcf89..f0dc1ea 100644
--- a/src-tauri/src/cloudflare_auth.rs
+++ b/src-tauri/src/cloudflare_auth.rs
@@ -1,8 +1,8 @@
 // cloudflare_auth.rs
 //
 // Reads the local Wrangler OAuth config to provide zero-touch authentication.
-// No API tokens are ever stored in CF Studio — we reuse the session that
-// `wrangler login` already created on the user's machine.
+// When the user already exports CLOUDFLARE_API_TOKEN for Wrangler, use that
+// in-memory value first. No API tokens are stored by CF Studio.
 
 use serde::{Deserialize, Serialize};
 use std::fs;
@@ -27,7 +27,7 @@ pub enum AuthError {
     #[error("Failed to parse Wrangler config TOML: {0}")]
     TomlParse(#[from] toml::de::Error),
 
-    #[error("No oauth_token found in Wrangler config. Run `wrangler login` first.")]
+    #[error("No oauth_token found in Wrangler config and CLOUDFLARE_API_TOKEN is not set. Run `wrangler login` first.")]
     NoToken,
 
     #[error("Command execution failed: {0}")]
@@ -169,8 +169,22 @@ pub fn wrangler_config_path() -> Result<PathBuf, AuthError> {
 
 // ── Core parsing logic ─────────────────────────────────────────────────────────
 
+fn env_api_token() -> Option<String> {
+    std::env::var("CLOUDFLARE_API_TOKEN")
+        .ok()
+        .map(|token| token.trim().to_string())
+        .filter(|token| !token.is_empty())
+}
+
 /// Reads and parses the Wrangler config, returning the extracted credentials.
 pub fn read_credentials() -> Result<CloudflareCredentials, AuthError> {
+    if let Some(api_token) = env_api_token() {
+        return Ok(CloudflareCredentials {
+            oauth_token: api_token,
+            account_id: std::env::var("CLOUDFLARE_ACCOUNT_ID").ok(),
+        });
+    }
+
     let candidates = wrangler_candidate_paths();
     if candidates.is_empty() {
         return Err(AuthError::ConfigDirNotFound);
@@ -263,6 +277,10 @@ pub fn read_credentials() -> Result<CloudflareCredentials, AuthError> {
 /// re-read the configuration file and return the fresh token.
 #[tauri::command]
 pub async fn refresh_wrangler_token() -> Result<CloudflareCredentials, AuthError> {
+    if env_api_token().is_some() {
+        return read_credentials();
+    }
+
     let output = tokio::task::spawn_blocking(|| {
         let mut cmd = if cfg!(target_os = "windows") {
             let mut c = std::process::Command::new("cmd");

From cd52e10a1a93b5b2767ac2123bea58ce92bc39b5 Mon Sep 17 00:00:00 2001
From: jackiexiao <707610215@qq.com>
Date: Mon, 25 May 2026 14:46:44 +0800
Subject: [PATCH 3/4] feat: expand Chinese localization

---
 .gitignore                                  |   1 +
 README.md                                   |   2 +
 README.zh-CN.md                             |  92 ++++
 src/components/DatabaseExplorer.tsx         | 111 ++---
 src/components/DatabasesView.tsx            |  59 +--
 src/components/EditColumnDialog.tsx         | 151 +++---
 src/components/ExportWrapper.tsx            |   4 +-
 src/components/FreeExportDialog.tsx         |   8 +-
 src/components/IntelligencePanel.tsx        |  20 +-
 src/components/Layout.tsx                   |  44 +-
 src/components/QueryEditor.tsx              |  80 ++--
 src/components/R2ProGate.tsx                |  32 +-
 src/components/SchemaVisualizer.tsx         |   9 +-
 src/lib/i18n.ts                             | 480 +++++++++++++++++++-
 src/pro_modules/frontend/ProFeatureGate.tsx |   8 +-
 src/pro_modules/frontend/PurchaseScreen.tsx |   8 +-
 src/pro_modules/frontend/R2BucketsView.tsx  |  18 +-
 17 files changed, 882 insertions(+), 245 deletions(-)
 create mode 100644 README.zh-CN.md

diff --git a/.gitignore b/.gitignore
index 760ce74..9c262ad 100644
--- a/.gitignore
+++ b/.gitignore
@@ -26,3 +26,4 @@ dist-ssr
 others/
 src-tauri/.wrangler
 .env
+LOCAL_DEV.md
diff --git a/README.md b/README.md
index af8a00a..6478efa 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,7 @@
 # CF Studio
 
+中文说明见 [README.zh-CN.md](README.zh-CN.md).
+
 A blazing-fast, native desktop client for Cloudflare D1 and R2.
 
 [Website](https://cfstudio.dev) • [Portfolio](https://mubashar.dev) • [YouTube](https://youtube.com/@mubashardev)
diff --git a/README.zh-CN.md b/README.zh-CN.md
new file mode 100644
index 0000000..3f56cc2
--- /dev/null
+++ b/README.zh-CN.md
@@ -0,0 +1,92 @@
+# CF Studio MakerJackie Fork
+
+这是 `makerjackie/cf-studio` 的中文说明。这个 fork 基于 `mubashardev/cf-studio`，目标是评估它是否适合作为本地 Cloudflare 管理器的基础。
+
+## 这个 fork 改了什么
+
+- 修复 macOS GUI 启动时检测不到 nvm 中 `node` / `wrangler` 的问题。
+- 增加基础中英文界面切换。
+- D1 / R2 / KV 主要页面已接入中文文案。
+- 优先读取 `CLOUDFLARE_API_TOKEN` 环境变量，再回退到 Wrangler OAuth 配置。
+- 用公开 fallback 替换上游私有 `src/pro_modules` submodule，让仓库可以直接 clone、安装、构建。
+
+## 功能范围
+
+当前公开 fork 适合用来评估这些工作流：
+
+- D1 数据库列表
+- D1 表结构查看
+- D1 表数据浏览
+- D1 SQL 查询编辑器
+- D1 可视化结构图
+- R2 存储桶和对象列表
+- KV 占位页
+
+注意：这个 fork 不包含上游私有 Pro 模块。高级导出、完整 R2 上传下载、审计能力等功能需要单独实现或继续接入。
+
+## 本地开发
+
+准备环境：
+
+```bash
+brew install bun
+curl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh
+npm install -g wrangler
+wrangler login
+```
+
+启动：
+
+```bash
+git clone git@github.com:makerjackie/cf-studio.git
+cd cf-studio
+export PATH="$HOME/.bun/bin:$PATH"
+source "$HOME/.cargo/env"
+bun install --frozen-lockfile
+bun run tauri dev
+```
+
+如果你使用 API Token，而不是 `wrangler login`：
+
+```bash
+export CLOUDFLARE_API_TOKEN="your-token"
+export CLOUDFLARE_ACCOUNT_ID="your-account-id"
+bun run tauri dev
+```
+
+## 构建本机 App
+
+```bash
+export PATH="$HOME/.bun/bin:$PATH"
+source "$HOME/.cargo/env"
+bun run tauri build
+```
+
+macOS app 通常会生成在：
+
+```bash
+src-tauri/target/release/bundle/macos/CF-Studio.app
+```
+
+安装到 `/Applications`：
+
+```bash
+cp -R "src-tauri/target/release/bundle/macos/CF-Studio.app" /Applications/
+```
+
+如果 macOS 阻止打开本地构建版本，可以移除 quarantine 标记：
+
+```bash
+xattr -dr com.apple.quarantine /Applications/CF-Studio.app
+```
+
+## 当前判断
+
+这个 fork 更适合作为“Cloudflare Dashboard / Wrangler / cf CLI 的本地伴侣”，而不是完整替代官网。短期更值得投入的方向是：
+
+- 让 D1 表格浏览和 SQL 编辑更稳定。
+- 补齐 R2 上传、下载、预览、复制公开 URL。
+- 做 Cloudflare Token 权限检测。
+- 增加本地 Wrangler / Local Explorer / 远程资源对比。
+- 把中文和英文文案整理成更完整的 i18n 结构。
+
diff --git a/src/components/DatabaseExplorer.tsx b/src/components/DatabaseExplorer.tsx
index 2bc15ea..92e0396 100644
--- a/src/components/DatabaseExplorer.tsx
+++ b/src/components/DatabaseExplorer.tsx
@@ -49,6 +49,7 @@ import {
 } from "@/components/ui/tooltip";
 import { Dialog, DialogContent, DialogTitle } from "@/components/ui/dialog";
 import { cn } from "@/lib/utils";
+import { useI18n } from "@/lib/i18n";
 import {
   useD1Schema,
   useD1TableData,
@@ -132,6 +133,7 @@ function TableListSkeleton() {
 // ── Schema tab content ────────────────────────────────────────────────────────
 
 function SchemaTab({ table }: { table: D1TableSchema }) {
+  const { t } = useI18n();
   const privacySettings = useAppStore(s => s.privacySettings);
   const blurTable = privacySettings.enabled && privacySettings.tableNames;
 
@@ -139,8 +141,8 @@ function SchemaTab({ table }: { table: D1TableSchema }) {
     return (
       <PanelMessage
         icon={AlertCircle}
-        title="No schema available"
-        body={`${table.name} has no recorded CREATE TABLE statement`}
+        title={t("d1.noSchema")}
+        body={t("d1.noSchemaBody", { table: table.name })}
       />
     );
   }
@@ -191,6 +193,7 @@ interface DataTabProps {
 }
 
 function DataTab({ databaseId, table, allTables, onTableSelect }: DataTabProps) {
+  const { t } = useI18n();
   const privacySettings = useAppStore(s => s.privacySettings);
   const blurTable = privacySettings.enabled && privacySettings.tableNames;
   const [offset, setOffset] = useState(0);
@@ -276,11 +279,11 @@ function DataTab({ databaseId, table, allTables, onTableSelect }: DataTabProps)
                       variant="secondary" 
                       className="h-5 px-1.5 text-[10px] font-mono bg-muted/40 hover:bg-muted/60 transition-colors cursor-help border-transparent"
                     >
-                      {table.columnsCount ?? 0} {table.columnsCount === 1 ? "col" : "cols"}
+                      {table.columnsCount ?? 0} {t((table.columnsCount ?? 0) === 1 ? "d1.colShort" : "d1.colsShort")}
                     </Badge>
                   </TooltipTrigger>
                   <TooltipContent side="bottom" className="text-[11px] px-2 py-1 shadow-md border-border/80 bg-background/95 backdrop-blur-sm">
-                    Total {table.columnsCount ?? 0} columns exist in {table.name}
+                    {t("d1.totalColumnsTooltip", { count: table.columnsCount ?? 0, table: table.name })}
                   </TooltipContent>
                 </Tooltip>
 
@@ -290,11 +293,11 @@ function DataTab({ databaseId, table, allTables, onTableSelect }: DataTabProps)
                       variant="secondary" 
                       className="h-5 px-1.5 text-[10px] font-mono bg-primary/10 hover:bg-primary/20 text-primary border-primary/20 transition-colors cursor-help"
                     >
-                      {state.data.rows.length} row{state.data.rows.length !== 1 ? "s" : ""}
+                      {t(state.data.rows.length === 1 ? "common.rowsSingular" : "common.rows", { count: state.data.rows.length })}
                     </Badge>
                   </TooltipTrigger>
                   <TooltipContent side="bottom" className="text-[11px] px-2 py-1 shadow-md border-border/80 bg-background/95 backdrop-blur-sm">
-                    {state.data.rows.length} rows fetched
+                    {t("d1.rowsFetchedTooltip", { count: state.data.rows.length })}
                   </TooltipContent>
                 </Tooltip>
               </div>
@@ -310,8 +313,8 @@ function DataTab({ databaseId, table, allTables, onTableSelect }: DataTabProps)
           >
             <Download size={11} />
             {selectedRowIndices.length === 0 || (state.status === "success" && selectedRowIndices.length === state.data.rows.length)
-              ? "Export All"
-              : `Export ${selectedRowIndices.length} Rows`}
+              ? t("d1.exportAll")
+              : t("d1.exportRows", { count: selectedRowIndices.length })}
           </Button>
         </div>
       </div>
@@ -325,7 +328,7 @@ function DataTab({ databaseId, table, allTables, onTableSelect }: DataTabProps)
         {state.status === "error" && (
           <PanelMessage
             icon={AlertCircle}
-            title="Query failed"
+            title={t("d1.queryFailed")}
             body={state.message}
             iconColor="text-destructive"
           />
@@ -334,8 +337,8 @@ function DataTab({ databaseId, table, allTables, onTableSelect }: DataTabProps)
         {state.status === "success" && state.data.rows.length === 0 && (
           <PanelMessage
             icon={Sheet}
-            title="No rows found"
-            body={`${table.name} is empty or has no data matching the current offset`}
+            title={t("d1.noRows")}
+            body={t("d1.noRowsBody", { table: table.name })}
           />
         )}
 
@@ -362,7 +365,7 @@ function DataTab({ databaseId, table, allTables, onTableSelect }: DataTabProps)
                           setSelectedRowIndices([]);
                         }
                       }}
-                      aria-label="Select all rows"
+                      aria-label={t("common.selectAllRows")}
                     />
                   </TableHead>
                   {/* Row number gutter */}
@@ -406,7 +409,7 @@ function DataTab({ databaseId, table, allTables, onTableSelect }: DataTabProps)
                                           onPointerDown={(e) => e.stopPropagation()}
                                           onClick={(e) => e.stopPropagation()}
                                         >
-                                          <p className="text-muted-foreground uppercase tracking-widest text-[10px] font-sans">Primary Key</p>
+                                          <p className="text-muted-foreground uppercase tracking-widest text-[10px] font-sans">{t("d1.primaryKey")}</p>
                                         </TooltipContent>
                                       </Tooltip>
                                     </TooltipProvider>
@@ -432,7 +435,7 @@ function DataTab({ databaseId, table, allTables, onTableSelect }: DataTabProps)
                                           onClick={(e) => e.stopPropagation()}
                                         >
                                           <div className="flex flex-col gap-1.5 py-0.5">
-                                            {outFks.length > 0 && <p className="text-muted-foreground uppercase tracking-widest text-[10px] font-sans pb-0.5 border-b border-border/50">References</p>}
+                                            {outFks.length > 0 && <p className="text-muted-foreground uppercase tracking-widest text-[10px] font-sans pb-0.5 border-b border-border/50">{t("d1.references")}</p>}
                                             {outFks.map((fk, idx) => (
                                               <div key={`out-${idx}`} className="flex items-center gap-2">
                                                 <span className="text-muted-foreground">{table.name}.{col.name}</span>
@@ -445,7 +448,7 @@ function DataTab({ databaseId, table, allTables, onTableSelect }: DataTabProps)
                                                 </button>
                                               </div>
                                             ))}
-                                            {inFks.length > 0 && <p className="text-muted-foreground uppercase tracking-widest text-[10px] font-sans pb-0.5 border-b border-border/50">Referenced By</p>}
+                                            {inFks.length > 0 && <p className="text-muted-foreground uppercase tracking-widest text-[10px] font-sans pb-0.5 border-b border-border/50">{t("d1.referencedBy")}</p>}
                                             {inFks.map((fk, idx) => (
                                               <div key={`in-${idx}`} className="flex items-center gap-2">
                                                 <button 
@@ -471,21 +474,21 @@ function DataTab({ databaseId, table, allTables, onTableSelect }: DataTabProps)
                         </DropdownMenuTrigger>
                         <DropdownMenuContent align="start" className="w-44 font-mono text-[11px] shadow-lg border-border/60">
                           <DropdownMenuItem className="gap-2 cursor-pointer text-muted-foreground focus:text-foreground" onClick={() => { setSortCol(col.name); setSortAsc(true); setOffset(0); }}>
-                            <ArrowUp size={13} strokeWidth={1.5} /> Sort Ascending
+                            <ArrowUp size={13} strokeWidth={1.5} /> {t("d1.sortAscending")}
                           </DropdownMenuItem>
                           <DropdownMenuItem className="gap-2 cursor-pointer text-muted-foreground focus:text-foreground" onClick={() => { setSortCol(col.name); setSortAsc(false); setOffset(0); }}>
-                            <ArrowDown size={13} strokeWidth={1.5} /> Sort Descending
+                            <ArrowDown size={13} strokeWidth={1.5} /> {t("d1.sortDescending")}
                           </DropdownMenuItem>
                           <DropdownMenuSeparator />
                           <DropdownMenuItem className="gap-2 cursor-pointer text-muted-foreground focus:text-foreground" onClick={() => navigator.clipboard.writeText(col.name)}>
-                            <Copy size={13} strokeWidth={1.5} /> Copy name
+                            <Copy size={13} strokeWidth={1.5} /> {t("d1.copyName")}
                           </DropdownMenuItem>
                           <DropdownMenuItem className="gap-2 cursor-pointer text-muted-foreground focus:text-foreground" onClick={() => setEditingColumn(col)}>
-                            <Edit size={13} strokeWidth={1.5} /> Edit column
+                            <Edit size={13} strokeWidth={1.5} /> {t("d1.editColumn")}
                           </DropdownMenuItem>
                           <DropdownMenuSeparator />
                           <DropdownMenuItem className="gap-2 cursor-pointer text-destructive focus:text-destructive focus:bg-destructive/10">
-                            <Trash2 size={13} strokeWidth={1.5} /> Delete column
+                            <Trash2 size={13} strokeWidth={1.5} /> {t("d1.deleteColumn")}
                           </DropdownMenuItem>
                         </DropdownMenuContent>
                       </DropdownMenu>
@@ -510,7 +513,7 @@ function DataTab({ databaseId, table, allTables, onTableSelect }: DataTabProps)
                             return prev.filter((i) => i !== ri);
                           });
                         }}
-                        aria-label={`Select row ${ri + 1}`}
+                        aria-label={t("common.selectRow", { row: ri + 1 })}
                       />
                     </TableCell>
                     {/* Row number */}
@@ -528,9 +531,9 @@ function DataTab({ databaseId, table, allTables, onTableSelect }: DataTabProps)
                           title={isNull ? "NULL" : String(val)}
                         >
                           {isNull ? (
-                            <span className="text-muted-foreground/30 italic text-xs uppercase">NULL</span>
+                            <span className="text-muted-foreground/30 italic text-xs uppercase">{t("common.null")}</span>
                           ) : isEmpty ? (
-                            <span className="text-muted-foreground/30 italic text-xs uppercase">EMPTY</span>
+                            <span className="text-muted-foreground/30 italic text-xs uppercase">{t("common.empty")}</span>
                           ) : (
                             <span className="text-foreground/90">{String(val)}</span>
                           )}
@@ -577,16 +580,16 @@ function DataTab({ databaseId, table, allTables, onTableSelect }: DataTabProps)
           <div className="flex items-center gap-4">
             <span className="text-xs text-muted-foreground/50 tabular-nums">
               {state.status === "success"
-                ? `Rows ${offset + 1}–${offset + (state.data?.totalFetched ?? 0)}`
-                : "Loading…"}
+                ? t("d1.rowsRange", { start: offset + 1, end: offset + (state.data?.totalFetched ?? 0) })
+                : t("common.loading")}
             </span>
 
             <div className="flex items-center gap-1.5 h-4 ml-2 pl-4 border-l border-border/50">
-              <span className="text-[10px] text-muted-foreground/30 uppercase tracking-tight font-sans">Per page</span>
+              <span className="text-[10px] text-muted-foreground/30 uppercase tracking-tight font-sans">{t("d1.perPage")}</span>
               <DropdownMenu>
                 <DropdownMenuTrigger asChild>
                   <Button variant="ghost" size="sm" className="h-6 px-1.5 text-xs font-mono text-muted-foreground hover:text-foreground hover:bg-muted/50 gap-1">
-                    {pageSize >= 1000000 ? "All" : pageSize}
+                    {pageSize >= 1000000 ? t("common.all") : pageSize}
                     <ChevronDown size={10} className="opacity-50" />
                   </Button>
                 </DropdownMenuTrigger>
@@ -604,14 +607,14 @@ function DataTab({ databaseId, table, allTables, onTableSelect }: DataTabProps)
                     className={cn("cursor-pointer", pageSize >= 1000000 && "bg-accent text-accent-foreground")}
                     onClick={() => { setPageSize(1000000); setOffset(0); }}
                   >
-                    All
+                    {t("common.all")}
                   </DropdownMenuItem>
                   <DropdownMenuSeparator />
                   <DropdownMenuItem 
                     className="cursor-pointer gap-2"
                     onClick={() => setIsCustomLimitOpen(true)}
                   >
-                    <Edit size={11} className="opacity-50" /> Custom...
+                    <Edit size={11} className="opacity-50" /> {t("common.custom")}
                   </DropdownMenuItem>
                 </DropdownMenuContent>
               </DropdownMenu>
@@ -619,14 +622,14 @@ function DataTab({ databaseId, table, allTables, onTableSelect }: DataTabProps)
           </div>
 
           <div className="flex items-center gap-2">
-            <span className="text-xs text-muted-foreground/40">Page {page}</span>
+            <span className="text-xs text-muted-foreground/40">{t("common.page", { page })}</span>
             <div className="flex items-center gap-1">
               <Button
                 variant="outline" size="icon"
                 className="h-6 w-6"
                 disabled={!hasPrev}
                 onClick={() => setOffset(Math.max(0, offset - pageSize))}
-                aria-label="Previous page"
+                aria-label={t("common.previousPage")}
               >
                 <ChevronLeft size={12} />
               </Button>
@@ -635,7 +638,7 @@ function DataTab({ databaseId, table, allTables, onTableSelect }: DataTabProps)
                 className="h-6 w-6"
                 disabled={!hasNext}
                 onClick={() => setOffset(offset + pageSize)}
-                aria-label="Next page"
+                aria-label={t("common.nextPage")}
               >
                 <ChevronRightIcon size={12} />
               </Button>
@@ -647,10 +650,10 @@ function DataTab({ databaseId, table, allTables, onTableSelect }: DataTabProps)
       {/* Custom page size dialog */}
       <Dialog open={isCustomLimitOpen} onOpenChange={setIsCustomLimitOpen}>
         <DialogContent className="sm:max-w-[300px] border-border/60 shadow-2xl">
-          <DialogTitle className="text-sm font-semibold">Custom Rows Per Page</DialogTitle>
+          <DialogTitle className="text-sm font-semibold">{t("d1.customRowsPerPage")}</DialogTitle>
           <div className="py-2 space-y-3">
             <div className="space-y-1.5">
-              <label className="text-[10px] uppercase font-sans tracking-widest text-muted-foreground/60">Limit (max 10000)</label>
+              <label className="text-[10px] uppercase font-sans tracking-widest text-muted-foreground/60">{t("d1.limitMax")}</label>
               <div className="relative">
                 <input
                   type="number"
@@ -686,7 +689,7 @@ function DataTab({ databaseId, table, allTables, onTableSelect }: DataTabProps)
                 }
               }}
             >
-              Apply Limit
+              {t("d1.applyLimit")}
             </Button>
           </div>
         </DialogContent>
@@ -704,6 +707,7 @@ function TableListItem({
   active: boolean;
   onClick: () => void;
 }) {
+  const { t } = useI18n();
   const privacySettings = useAppStore((s) => s.privacySettings);
   const showTableColumnCounts = useAppStore((s) => s.showTableColumnCounts);
   const blurTable = privacySettings.enabled && privacySettings.tableNames;
@@ -732,7 +736,7 @@ function TableListItem({
           variant="secondary" 
           className="px-1.5 py-0 h-4 text-[9px] font-mono shrink-0 bg-muted/40 text-muted-foreground/40 group-hover:bg-muted group-hover:text-muted-foreground transition-colors"
         >
-          {table.columnsCount} {table.columnsCount === 1 ? "col" : "cols"}
+          {table.columnsCount} {t(table.columnsCount === 1 ? "d1.colShort" : "d1.colsShort")}
         </Badge>
       )}
       {active && <ChevronRight size={12} className="text-primary shrink-0" />}
@@ -748,6 +752,7 @@ interface DatabaseExplorerProps {
 }
 
 export function DatabaseExplorer({ database, onBack }: DatabaseExplorerProps) {
+  const { t } = useI18n();
   const [selectedTable, setSelectedTable] = useState<D1TableSchema | null>(null);
   const [systemOpen, setSystemOpen] = useState(false);
   const [isVisualSchemaOpen, setIsVisualSchemaOpen] = useState(false);
@@ -793,7 +798,7 @@ export function DatabaseExplorer({ database, onBack }: DatabaseExplorerProps) {
           className="gap-1.5 text-muted-foreground hover:text-foreground -ml-2"
         >
           <ArrowLeft size={14} strokeWidth={2} />
-          Databases
+          {t("d1.back")}
         </Button>
 
         <Separator orientation="vertical" className="h-4" />
@@ -812,7 +817,7 @@ export function DatabaseExplorer({ database, onBack }: DatabaseExplorerProps) {
             onClick={() => setIsQueryEditorOpen(true)}
           >
             <Terminal size={11} strokeWidth={2.5} />
-            SQL Editor
+            {t("d1.sqlEditor")}
           </Badge>
           <Badge 
             variant="outline" 
@@ -820,7 +825,7 @@ export function DatabaseExplorer({ database, onBack }: DatabaseExplorerProps) {
             onClick={() => setIsVisualSchemaOpen(true)}
           >
             <Network size={11} strokeWidth={2.5} />
-            Visual Schema
+            {t("d1.visualSchema")}
           </Badge>
           <Badge 
             variant="outline" 
@@ -834,10 +839,10 @@ export function DatabaseExplorer({ database, onBack }: DatabaseExplorerProps) {
             }}
           >
             <Layers size={11} strokeWidth={2.5} />
-            Indexes
+            {t("d1.indexes")}
             {configData?.enable_d1_index_management === false && (
               <Badge variant="secondary" className="ml-1 px-1 py-0 h-3.5 text-[8px] bg-primary/10 text-primary border-transparent">
-                PRO
+                {t("common.pro")}
               </Badge>
             )}
           </Badge>
@@ -846,7 +851,7 @@ export function DatabaseExplorer({ database, onBack }: DatabaseExplorerProps) {
         <Button
           variant="ghost" size="icon" onClick={refresh} disabled={isLoading}
           className="ml-auto text-muted-foreground hover:text-foreground"
-          aria-label="Refresh schema"
+          aria-label={t("d1.refreshSchema")}
         >
           <RefreshCw size={13} className={cn(isLoading && "animate-spin")} />
         </Button>
@@ -859,7 +864,7 @@ export function DatabaseExplorer({ database, onBack }: DatabaseExplorerProps) {
         <div className="w-[200px] shrink-0 border-r border-border flex flex-col bg-muted/20">
           <div className="flex items-center justify-between px-3 py-2 border-b border-border shrink-0">
             <span className="text-[10px] uppercase tracking-widest text-muted-foreground/50 font-medium">
-              Tables
+              {t("d1.tables")}
             </span>
             {state.status === "success" && (
               <span className="text-[10px] text-muted-foreground/40">{userTables.length}</span>
@@ -877,7 +882,7 @@ export function DatabaseExplorer({ database, onBack }: DatabaseExplorerProps) {
               )}
 
               {state.status === "success" && userTables.length === 0 && sysTables.length === 0 && (
-                <p className="text-xs text-muted-foreground text-center py-6 px-2">No tables found</p>
+                <p className="text-xs text-muted-foreground text-center py-6 px-2">{t("d1.noTables")}</p>
               )}
 
               {/* User tables */}
@@ -906,7 +911,7 @@ export function DatabaseExplorer({ database, onBack }: DatabaseExplorerProps) {
                       strokeWidth={2}
                       className={cn("transition-transform", systemOpen && "rotate-90")}
                     />
-                    System ({sysTables.length})
+                    {t("d1.systemTables", { count: sysTables.length })}
                   </button>
                   {systemOpen && sysTables.map((table) => (
                     <TableListItem
@@ -928,8 +933,8 @@ export function DatabaseExplorer({ database, onBack }: DatabaseExplorerProps) {
             <div className="border-b border-border px-3 pt-2 pb-0 shrink-0 bg-muted/10">
               <TabsList className="h-8 bg-transparent p-0 gap-0">
                 {([
-                  { value: "data",   Icon: Sheet,    label: "Data"         },
-                  { value: "schema", Icon: Code2,    label: "Schema"       },
+                  { value: "data",   Icon: Sheet,    label: t("d1.tab.data") },
+                  { value: "schema", Icon: Code2,    label: t("d1.tab.schema") },
                 ] as const).map(({ value, Icon, label }) => (
                   <TabsTrigger
                     key={value}
@@ -960,14 +965,14 @@ export function DatabaseExplorer({ database, onBack }: DatabaseExplorerProps) {
                       if (t) setSelectedTable(t);
                     }}
                   />
-                : <PanelMessage icon={Sheet} title="Select a table" body="Click a table name on the left to browse its rows" />}
+                : <PanelMessage icon={Sheet} title={t("d1.selectTable")} body={t("d1.selectTableRows")} />}
             </TabsContent>
 
             {/* Schema — requires a selected table */}
             <TabsContent value="schema" className="flex-1 min-h-0 mt-0 data-[state=active]:flex data-[state=active]:flex-col">
               {selectedTable
                 ? <SchemaTab table={selectedTable} />
-                : <PanelMessage icon={BookOpen} title="Select a table" body="Click a table name on the left to view its CREATE TABLE statement" />}
+                : <PanelMessage icon={BookOpen} title={t("d1.selectTable")} body={t("d1.selectTableSchema")} />}
             </TabsContent>
           </Tabs>
         </div>
@@ -975,10 +980,10 @@ export function DatabaseExplorer({ database, onBack }: DatabaseExplorerProps) {
 
       <Dialog open={isVisualSchemaOpen} onOpenChange={setIsVisualSchemaOpen}>
         <DialogContent className="max-w-[95vw] w-full h-[95vh] p-0 overflow-hidden flex flex-col gap-0 border-border bg-background shadow-2xl">
-          <DialogTitle className="sr-only">Visual Schema</DialogTitle>
+          <DialogTitle className="sr-only">{t("d1.visualSchema")}</DialogTitle>
           <div className="flex items-center gap-2 px-4 py-3 border-b border-border bg-muted/10 shrink-0">
             <Network size={16} className="text-primary" />
-            <span className="font-semibold text-sm">Visual Schema — <span className={cn(blurDb && "blur-[4px] hover:blur-none transition-all duration-200 select-none hover:select-auto cursor-default")}>{database.name}</span></span>
+            <span className="font-semibold text-sm">{t("d1.visualSchema")} — <span className={cn(blurDb && "blur-[4px] hover:blur-none transition-all duration-200 select-none hover:select-auto cursor-default")}>{database.name}</span></span>
           </div>
           <div className="flex-1 min-h-0 relative">
             <SchemaVisualizer tables={tables} />
@@ -988,10 +993,10 @@ export function DatabaseExplorer({ database, onBack }: DatabaseExplorerProps) {
 
       <Dialog open={isQueryEditorOpen} onOpenChange={setIsQueryEditorOpen}>
         <DialogContent className="max-w-[95vw] w-full h-[95vh] p-0 overflow-hidden flex flex-col gap-0 border-border bg-background shadow-2xl">
-          <DialogTitle className="sr-only">SQL Editor</DialogTitle>
+          <DialogTitle className="sr-only">{t("d1.sqlEditor")}</DialogTitle>
           <div className="flex items-center gap-2 px-4 py-3 border-b border-border bg-muted/10 shrink-0">
             <Terminal size={16} className="text-primary" />
-            <span className="font-semibold text-sm">SQL Editor — <span className={cn(blurDb && "blur-[4px] hover:blur-none transition-all duration-200 select-none hover:select-auto cursor-default")}>{database.name}</span></span>
+            <span className="font-semibold text-sm">{t("d1.sqlEditor")} — <span className={cn(blurDb && "blur-[4px] hover:blur-none transition-all duration-200 select-none hover:select-auto cursor-default")}>{database.name}</span></span>
           </div>
           <div className="flex-1 min-h-0 relative flex flex-col">
             <QueryEditor databaseId={database.uuid} tables={allTables} />
diff --git a/src/components/DatabasesView.tsx b/src/components/DatabasesView.tsx
index 7fc3ba1..3efbdb1 100644
--- a/src/components/DatabasesView.tsx
+++ b/src/components/DatabasesView.tsx
@@ -23,6 +23,7 @@ import { DatabaseExplorer } from "@/components/DatabaseExplorer";
 import { WebviewWindow } from "@tauri-apps/api/webviewWindow";
 import { useToast } from "@/components/ui/use-toast";
 import { ProFeatureGate } from "@/pro_modules/frontend/ProFeatureGate";
+import { useI18n } from "@/lib/i18n";
 
 // ── Helpers ────────────────────────────────────────────────────────────────────
 
@@ -79,12 +80,13 @@ interface EmptyStateProps {
 
 function EmptyState({ variant, message, onRefresh, accountId }: EmptyStateProps) {
   const { toast } = useToast();
+  const { t } = useI18n();
   const handleCopyCommand = async () => {
     try {
       await navigator.clipboard.writeText("npx wrangler login");
       toast({
-        title: "Copied",
-        description: "Login command copied to clipboard.",
+        title: t("common.copied"),
+        description: t("d1.toast.loginCopied"),
       });
     } catch (e) {
       console.error(e);
@@ -93,14 +95,14 @@ function EmptyState({ variant, message, onRefresh, accountId }: EmptyStateProps)
 
   const handleRunCommand = async () => {
     toast({
-      title: "Opening Terminal",
-      description: "Launching wrangler login in a new terminal window...",
+      title: t("d1.empty.openingTerminal"),
+      description: t("d1.empty.openingTerminalDesc"),
     });
     try {
       await invokeCloudflare("run_wrangler_login");
     } catch (e) {
       toast({
-        title: "Launch Failed",
+        title: t("d1.empty.launchFailed"),
         description: String(e),
         variant: "destructive",
       });
@@ -112,21 +114,19 @@ function EmptyState({ variant, message, onRefresh, accountId }: EmptyStateProps)
     "no-auth": {
       icon: Terminal,
       iconColor: "text-amber-400",
-      title: "Wrangler session not found",
+      title: t("d1.empty.noAuthTitle"),
       body: (
         <>
-          CF Studio reads your local Wrangler session for zero-touch auth.
-          Run the command below in your terminal or click the button below. 
-          The page will automatically refresh once you are logged in.
+          {t("d1.empty.noAuthBody")}
           <div className="mt-3 flex items-center justify-between gap-2 rounded-md border border-border bg-muted/60 px-3 py-2 font-mono text-sm text-foreground">
             <span className="select-text">npx wrangler login</span>
-            <Button variant="ghost" size="icon" className="h-6 w-6" onClick={handleCopyCommand} title="Copy command">
+            <Button variant="ghost" size="icon" className="h-6 w-6" onClick={handleCopyCommand} title={t("d1.empty.copyCommand")}>
               <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>
             </Button>
           </div>
           <Button variant="secondary" size="sm" className="w-full mt-3" onClick={handleRunCommand}>
             <Terminal size={14} className="mr-2" />
-            Run Command in Background
+            {t("d1.empty.runCommand")}
           </Button>
           {message && (
             <p className="mt-3 text-xs text-destructive/80 select-text break-all">
@@ -139,10 +139,10 @@ function EmptyState({ variant, message, onRefresh, accountId }: EmptyStateProps)
     "no-databases": {
       icon: Database,
       iconColor: "text-muted-foreground",
-      title: "No D1 databases found",
+      title: t("d1.empty.noDatabasesTitle"),
       body: (
         <>
-          This Cloudflare account has no D1 databases yet. Create one with:
+          {t("d1.empty.noDatabasesBody")}
           <div className="mt-3 flex items-center gap-2 rounded-md border border-border bg-muted/60 px-3 py-2 font-mono text-sm text-foreground">
             <span className="select-text">wrangler d1 create my-database</span>
           </div>
@@ -152,10 +152,10 @@ function EmptyState({ variant, message, onRefresh, accountId }: EmptyStateProps)
     "not-enabled": {
       icon: Database,
       iconColor: "text-blue-500",
-      title: "Cloudflare D1 Not Enabled",
+      title: t("d1.empty.notEnabledTitle"),
       body: (
         <>
-          It looks like Cloudflare D1 Serverless SQL is not yet enabled for this account. You must enable it in the dashboard before creating databases.
+          {t("d1.empty.notEnabledBody")}
           <div className="mt-5 flex items-center justify-center">
             <Button
               onClick={() => {
@@ -163,7 +163,7 @@ function EmptyState({ variant, message, onRefresh, accountId }: EmptyStateProps)
               }}
               size="sm"
             >
-              Enable D1 SQL
+              {t("d1.empty.enableD1")}
             </Button>
           </div>
         </>
@@ -172,10 +172,10 @@ function EmptyState({ variant, message, onRefresh, accountId }: EmptyStateProps)
     "api-error": {
       icon: AlertCircle,
       iconColor: "text-destructive",
-      title: "Failed to load databases",
+      title: t("d1.empty.apiErrorTitle"),
       body: (
         <p className="text-sm text-muted-foreground select-text break-all">
-          {message ?? "An unknown API error occurred."}
+          {message ?? t("d1.empty.unknownApiError")}
         </p>
       ),
     },
@@ -194,7 +194,7 @@ function EmptyState({ variant, message, onRefresh, accountId }: EmptyStateProps)
       </div>
       <Button variant="outline" size="sm" onClick={onRefresh} className="gap-1.5 mt-1">
         <RefreshCw size={13} strokeWidth={2} />
-        Refresh
+        {t("common.refresh")}
       </Button>
     </div>
   );
@@ -278,6 +278,7 @@ interface DatabaseListProps {
 }
 
 function DatabaseList({ onSelect }: DatabaseListProps) {
+  const { t } = useI18n();
   const { state, refresh } = useD1Databases();
   const activeAccount = useAppStore((s) => s.activeAccount);
   const enableD1History = useAppStore((s) => s.enableD1History);
@@ -298,9 +299,9 @@ function DatabaseList({ onSelect }: DatabaseListProps) {
       {/* Header */}
       <div className="flex items-center justify-between gap-4 shrink-0">
         <div>
-          <h1 className="text-lg font-semibold tracking-tight text-foreground">Databases</h1>
+          <h1 className="text-lg font-semibold tracking-tight text-foreground">{t("d1.title")}</h1>
           <p className="text-sm text-muted-foreground mt-0.5">
-            D1 databases attached to your Cloudflare account
+            {t("d1.subtitle")}
           </p>
         </div>
         <div className="flex items-center gap-1.5">
@@ -316,8 +317,8 @@ function DatabaseList({ onSelect }: DatabaseListProps) {
 
                   if (!hasProHistory) {
                       toast({
-                        title: "History Feature Required",
-                        description: "This feature is only available in the official CF Studio Pro version.",
+                        title: t("d1.historyRequired"),
+                        description: t("d1.historyRequiredDesc"),
                         variant: "destructive",
                       });
                       return;
@@ -327,7 +328,7 @@ function DatabaseList({ onSelect }: DatabaseListProps) {
                   const historyUrl = `index.html?theme=${encodeURIComponent(storedTheme)}`;
                   const webview = new WebviewWindow("history", {
                       url: historyUrl,
-                      title: "Query History Dashboard",
+                      title: t("d1.queryHistory"),
                       width: 1200,
                       height: 800,
                       minWidth: 600,
@@ -350,14 +351,14 @@ function DatabaseList({ onSelect }: DatabaseListProps) {
                      });
                   });
               }}
-              title={enableD1History && hasProHistory ? "Query History" : "Query History (Pro)"}
+              title={enableD1History && hasProHistory ? t("d1.queryHistory") : t("d1.queryHistoryPro")}
               className="text-muted-foreground hover:text-foreground"
             >
               <History size={15} strokeWidth={2} />
             </Button>
             {(!enableD1History || !hasProHistory) && (
               <span className="absolute -top-1 -right-1 px-1 bg-amber-500 text-[8px] font-bold text-white rounded-sm pointer-events-none scale-75 uppercase">
-                Pro
+                {t("common.pro")}
               </span>
             )}
           </div>
@@ -366,7 +367,7 @@ function DatabaseList({ onSelect }: DatabaseListProps) {
             size="icon"
             onClick={refresh}
             disabled={isLoading}
-            aria-label="Refresh databases"
+            aria-label={t("common.refresh")}
             className="text-muted-foreground hover:text-foreground"
           >
             <RefreshCw size={14} strokeWidth={2} className={cn(isLoading && "animate-spin")} />
@@ -410,7 +411,7 @@ function DatabaseList({ onSelect }: DatabaseListProps) {
             <Table>
               <TableHeader>
                 <TableRow className="bg-muted/30 hover:bg-muted/30">
-                  {["Name", "Database ID", "Created At", "Tables", "Size", ""].map((h) => (
+                  {[t("d1.table.name"), t("d1.table.id"), t("d1.table.createdAt"), t("d1.table.tables"), t("d1.table.size"), ""].map((h) => (
                     <TableHead
                       key={h}
                       className="text-xs font-medium uppercase tracking-wider text-muted-foreground py-2.5"
@@ -430,7 +431,7 @@ function DatabaseList({ onSelect }: DatabaseListProps) {
             <div className="flex items-center gap-1.5 border-t border-border bg-muted/20 px-4 py-2">
               <Loader2 size={11} className="text-muted-foreground/40 hidden" />
               <span className="text-xs text-muted-foreground/60">
-                {state.data.length} database{state.data.length !== 1 ? "s" : ""} — click a row to explore
+                {t(state.data.length === 1 ? "d1.listFooterSingular" : "d1.listFooter", { count: state.data.length })}
               </span>
             </div>
           </div>
diff --git a/src/components/EditColumnDialog.tsx b/src/components/EditColumnDialog.tsx
index 7effa40..0c3e8d9 100644
--- a/src/components/EditColumnDialog.tsx
+++ b/src/components/EditColumnDialog.tsx
@@ -33,6 +33,7 @@ import { type D1Column, D1TableSchema, D1ForeignKey, D1QueryResult, invokeCloudf
 import { useToast } from "@/components/ui/use-toast";
 import { useAppStore } from "@/store/useAppStore";
 import { useD1Tracker } from "@/hooks/useD1Tracker";
+import { useI18n } from "@/lib/i18n";
 
 type DraftForeignKey = D1ForeignKey & {
   isNew: boolean;
@@ -126,6 +127,7 @@ export function EditColumnDialog({
   existingPrimaryKeyColumn,
   onSuccess,
 }: EditColumnDialogProps) {
+  const { t } = useI18n();
   const { toast } = useToast();
   const [draftColumn, setDraftColumn] = useState({
     name: "",
@@ -147,6 +149,17 @@ export function EditColumnDialog({
   const [isApplying, setIsApplying] = useState(false);
   const activeAccount = useAppStore(state => state.activeAccount);
   const { executeTrackedQuery } = useD1Tracker();
+  const fkActions = ["No action", "Cascade", "Restrict", "Set NULL", "Set default"];
+  const fkActionLabel = (action: string) => {
+    const labels: Record<string, ReturnType<typeof t>> = {
+      "No action": t("d1.edit.actionNoAction"),
+      Cascade: t("d1.edit.actionCascade"),
+      Restrict: t("d1.edit.actionRestrict"),
+      "Set NULL": t("d1.edit.actionSetNull"),
+      "Set default": t("d1.edit.actionSetDefault"),
+    };
+    return labels[action] ?? action;
+  };
 
   useEffect(() => {
     if (column && open) {
@@ -173,20 +186,20 @@ export function EditColumnDialog({
     const diffs: string[] = [];
 
     if (draftColumn.name !== column.name) {
-      diffs.push(`Renamed column from "${column.name}" to "${draftColumn.name}"`);
+      diffs.push(t("d1.edit.diffRenamed", { from: column.name, to: draftColumn.name }));
     }
     if (draftColumn.type !== (column.type || "text")) {
-      diffs.push(`Changed type from "${column.type || "text"}" to "${draftColumn.type}"`);
+      diffs.push(t("d1.edit.diffType", { from: column.type || "text", to: draftColumn.type }));
     }
     if (draftColumn.isNullable !== !!column.isNullable) {
-      diffs.push(`Changed nullable from ${!!column.isNullable ? "TRUE" : "FALSE"} to ${draftColumn.isNullable ? "TRUE" : "FALSE"}`);
+      diffs.push(t("d1.edit.diffNullable", { from: !!column.isNullable ? "TRUE" : "FALSE", to: draftColumn.isNullable ? "TRUE" : "FALSE" }));
     }
     if (draftColumn.isPrimary !== !!column.isPrimary) {
-      if (draftColumn.isPrimary) diffs.push(`Added Primary Key constraint`);
-      else diffs.push(`Removed Primary Key constraint`);
+      if (draftColumn.isPrimary) diffs.push(t("d1.edit.diffAddedPrimary"));
+      else diffs.push(t("d1.edit.diffRemovedPrimary"));
     }
     if (draftColumn.defaultValue !== (column.defaultValue || "")) {
-      diffs.push(`Changed default value from "${column.defaultValue || "NULL"}" to "${draftColumn.defaultValue || "NULL"}"`);
+      diffs.push(t("d1.edit.diffDefault", { from: column.defaultValue || "NULL", to: draftColumn.defaultValue || "NULL" }));
     }
 
     const originalFks = column.foreignKeys || [];
@@ -195,14 +208,14 @@ export function EditColumnDialog({
     draftFks.forEach(newFk => {
       const exists = originalFks.some(oldFk => oldFk.table === newFk.table && oldFk.column === newFk.column);
       if (!exists) {
-        diffs.push(`Added Foreign Key referencing ${newFk.table}.${newFk.column}`);
+        diffs.push(t("d1.edit.diffAddedForeign", { table: newFk.table, column: newFk.column }));
       }
     });
 
     originalFks.forEach(oldFk => {
       const exists = draftFks.some(newFk => newFk.table === oldFk.table && newFk.column === oldFk.column);
       if (!exists) {
-        diffs.push(`Removed Foreign Key referencing ${oldFk.table}.${oldFk.column}`);
+        diffs.push(t("d1.edit.diffRemovedForeign", { table: oldFk.table, column: oldFk.column }));
       }
     });
 
@@ -218,7 +231,7 @@ export function EditColumnDialog({
     if (!column) return;
     setIsApplying(true);
     try {
-      if (!activeAccount?.id) throw new Error("No active account selected.");
+      if (!activeAccount?.id) throw new Error(t("d1.edit.noActiveAccount"));
       
       const statements = generateTableRecreationSQL(tableName, tableColumns, column.name, draftColumn, draftColumn.draftRelations.filter(fk => !fk.isDeleted));
       
@@ -243,13 +256,13 @@ export function EditColumnDialog({
         
         const failed = results.find(r => !r.success);
         if (failed) {
-          throw new Error(failed.error || "Query failed to execute successfully.");
+          throw new Error(failed.error || t("d1.edit.queryFailed"));
         }
       }
       
       toast({
-        title: "Success",
-        description: "Schema updated successfully.",
+        title: t("common.success"),
+        description: t("d1.edit.toastSuccess"),
       });
       
       setConfirmOpen(false);
@@ -257,7 +270,7 @@ export function EditColumnDialog({
     } catch (error: any) {
       console.error(error);
       toast({
-        title: "Error applying changes",
+        title: t("d1.edit.toastError"),
         description: error.message || String(error),
         variant: "destructive"
       });
@@ -274,36 +287,36 @@ export function EditColumnDialog({
       <DialogContent className="max-w-2xl p-0 gap-0 shadow-2xl overflow-hidden flex flex-col max-h-[90vh]">
         <DialogHeader className="p-6 pb-4 border-b border-border bg-muted/30 shrink-0">
           <DialogTitle className="text-sm font-medium font-mono text-foreground">
-            Update column <span className="text-foreground">{column.name}</span> from <span className="text-foreground">{tableName}</span>
+            {t("d1.edit.title", { column: column.name, table: tableName })}
           </DialogTitle>
         </DialogHeader>
 
         <div className="flex-1 overflow-y-auto p-6 space-y-8 bg-background">
           <div className="rounded-lg border border-border/60 bg-muted/30 px-4 py-3">
             <p className="text-xs text-muted-foreground">
-              Column editing is preview-only right now. Support for real schema changes is coming soon.
+              {t("d1.edit.previewOnly")}
             </p>
           </div>
 
           {/* General Section */}
           <div className="grid grid-cols-[1fr_2.5fr] gap-6">
-            <div className="text-sm font-medium text-foreground/80">General</div>
+            <div className="text-sm font-medium text-foreground/80">{t("d1.edit.general")}</div>
             <div className="space-y-5">
               <div className="space-y-2">
-                <Label className="text-xs text-muted-foreground">Name</Label>
+                <Label className="text-xs text-muted-foreground">{t("d1.edit.name")}</Label>
                 <Input
                   value={draftColumn.name}
                   onChange={(e) => setDraftColumn({ ...draftColumn, name: e.target.value })}
                   className="font-mono h-9 text-sm"
                 />
                 <p className="text-[11px] text-muted-foreground mt-1.5 leading-relaxed">
-                  Recommended to use lowercase and use an underscore to separate words e.g. column_name
+                  {t("d1.edit.nameHelp")}
                 </p>
               </div>
               <div className="space-y-2">
                 <div className="flex justify-between items-center">
-                  <Label className="text-xs text-muted-foreground">Description</Label>
-                  <span className="text-[10px] text-muted-foreground/60 uppercase">Optional</span>
+                  <Label className="text-xs text-muted-foreground">{t("d1.edit.description")}</Label>
+                  <span className="text-[10px] text-muted-foreground/60 uppercase">{t("common.optional")}</span>
                 </div>
                 <Textarea
                   className="min-h-[60px] resize-none"
@@ -317,19 +330,19 @@ export function EditColumnDialog({
           {/* Data Type Section */}
           <div className="grid grid-cols-[1fr_2.5fr] gap-6">
             <div className="space-y-2 text-sm font-medium text-foreground/80">
-              Data Type
+              {t("d1.edit.dataType")}
               <div className="flex flex-col gap-2 mt-4">
                 <Button variant="outline" size="sm" className="h-7 text-xs text-muted-foreground hover:text-foreground justify-start">
-                  + Create enum types
+                  {t("d1.edit.createEnum")}
                 </Button>
                 <Button variant="outline" size="sm" className="h-7 text-xs text-muted-foreground hover:text-foreground justify-start">
-                  <Info size={12} className="mr-1.5" /> About data types
+                  <Info size={12} className="mr-1.5" /> {t("d1.edit.aboutTypes")}
                 </Button>
               </div>
             </div>
             <div className="space-y-5">
               <div className="space-y-2">
-                <Label className="text-xs text-muted-foreground">Type</Label>
+                <Label className="text-xs text-muted-foreground">{t("d1.edit.type")}</Label>
                 <Select value={draftColumn.type} onValueChange={(val) => setDraftColumn({ ...draftColumn, type: val })}>
                   <SelectTrigger className="w-full h-9 font-mono text-sm">
                     <span className="text-muted-foreground/50 mr-2 text-xs">T</span> <SelectValue />
@@ -349,16 +362,16 @@ export function EditColumnDialog({
                 <div className="rounded-md border border-amber-500/30 bg-amber-500/10 p-4 flex gap-3">
                   <AlertTriangle size={16} className="text-amber-500 shrink-0 mt-0.5" />
                   <div className="space-y-2">
-                    <h4 className="text-sm font-medium text-amber-500/90 leading-none">It is recommended to use <code className="bg-amber-500/20 px-1 py-0.5 rounded text-amber-400">text</code> instead</h4>
+                    <h4 className="text-sm font-medium text-amber-500/90 leading-none">{t("d1.edit.varcharTitle")}</h4>
                     <p className="text-xs text-amber-500/70 leading-relaxed">
-                      SQLite recommends against using the data type <code className="bg-amber-500/20 px-1 rounded">varchar</code> unless you have a very specific use case.
+                      {t("d1.edit.varcharBody")}
                     </p>
                     <div className="flex gap-2 pt-1">
                       <Button variant="outline" size="sm" className="h-7 text-xs border-amber-500/30 text-amber-500/90 bg-transparent hover:bg-amber-500/10">
-                        Read more
+                        {t("d1.edit.readMore")}
                       </Button>
                       <Button size="sm" className="h-7 text-xs bg-amber-600 hover:bg-amber-500 text-white border-0" onClick={() => setDraftColumn({ ...draftColumn, type: "text" })}>
-                        Use text
+                        {t("d1.edit.useText")}
                       </Button>
                     </div>
                   </div>
@@ -368,13 +381,13 @@ export function EditColumnDialog({
               <div className="flex items-start gap-2 pt-2">
                  <div className="mt-1 flex h-4 w-4 items-center justify-center rounded border border-border bg-muted/30" />
                  <div>
-                   <Label className="text-xs text-foreground font-medium">Define as Array</Label>
-                   <p className="text-[10px] text-muted-foreground">Allow column to be defined as variable-length multidimensional arrays</p>
+                   <Label className="text-xs text-foreground font-medium">{t("d1.edit.defineArray")}</Label>
+                   <p className="text-[10px] text-muted-foreground">{t("d1.edit.defineArrayBody")}</p>
                  </div>
               </div>
 
               <div className="space-y-2 pt-4">
-                <Label className="text-xs text-muted-foreground">Default Value</Label>
+                <Label className="text-xs text-muted-foreground">{t("d1.edit.defaultValue")}</Label>
                 <div className="relative">
                   <Input
                     placeholder="NULL"
@@ -387,7 +400,7 @@ export function EditColumnDialog({
                   </div>
                 </div>
                 <p className="text-[11px] text-muted-foreground mt-1.5 leading-relaxed">
-                  Can either be a literal or an expression. When using an expression wrap your expression in brackets, e.g. (gen_random_uuid())
+                  {t("d1.edit.defaultValueHelp")}
                 </p>
               </div>
             </div>
@@ -397,10 +410,10 @@ export function EditColumnDialog({
 
           {/* Foreign Keys */}
           <div className="grid grid-cols-[1fr_2.5fr] gap-6">
-            <div className="text-sm font-medium text-foreground/80 text-left">Foreign Keys</div>
+            <div className="text-sm font-medium text-foreground/80 text-left">{t("d1.edit.foreignKeys")}</div>
             <div className="space-y-4">
               <Button variant="outline" size="sm" onClick={() => setFkOpen(true)} className="h-7 text-xs text-muted-foreground hover:text-foreground">
-                Add foreign key
+                {t("d1.edit.addForeignKey")}
               </Button>
               {draftColumn.draftRelations.length > 0 && (
                 <div className="space-y-2">
@@ -412,7 +425,7 @@ export function EditColumnDialog({
                             ? 'bg-blue-500/15 text-blue-400'
                             : 'bg-emerald-500/15 text-emerald-400'
                         }`}>
-                          {rel.isNew ? 'New' : 'Saved'}
+                          {rel.isNew ? t("d1.edit.new") : t("d1.edit.saved")}
                         </span>
                         <span className={`text-xs font-mono truncate transition-all duration-200 ${
                           rel.isDeleted ? 'line-through opacity-40 text-muted-foreground' : 'text-foreground'
@@ -448,7 +461,7 @@ export function EditColumnDialog({
 
           {/* Constraints Section */}
           <div className="grid grid-cols-[1fr_2.5fr] gap-6 pb-6">
-             <div className="text-sm font-medium text-foreground/80">Constraints</div>
+             <div className="text-sm font-medium text-foreground/80">{t("d1.edit.constraints")}</div>
              <div className="space-y-6">
                  <div className="flex items-start gap-4">
                    <Switch
@@ -458,16 +471,16 @@ export function EditColumnDialog({
                      className="mt-0.5"
                    />
                    <div>
-                     <Label className="text-sm font-medium">Is Primary Key</Label>
-                     <p className="text-[11px] text-muted-foreground leading-relaxed mt-1 hidden lg:block">A primary key indicates that a column or group of columns can be used as a unique identifier for rows in the table</p>
+                     <Label className="text-sm font-medium">{t("d1.edit.isPrimaryKey")}</Label>
+                     <p className="text-[11px] text-muted-foreground leading-relaxed mt-1 hidden lg:block">{t("d1.edit.primaryKeyHelp")}</p>
                      {!!existingPrimaryKeyColumn && existingPrimaryKeyColumn !== column.name && (
                        <p className="text-[10px] text-muted-foreground mt-1.5">
-                         Table already has a primary key: {existingPrimaryKeyColumn}
+                         {t("d1.edit.tableHasPrimaryKey", { column: existingPrimaryKeyColumn })}
                        </p>
                      )}
                      {!!existingPrimaryKeyColumn && existingPrimaryKeyColumn === column.name && !draftColumn.isPrimary && (
                        <p className="text-[10px] text-amber-500 mt-1.5">
-                         Warning: This table will not have any primary key.
+                         {t("d1.edit.noPrimaryKeyWarning")}
                        </p>
                      )}
                    </div>
@@ -476,23 +489,23 @@ export function EditColumnDialog({
                  <div className="flex items-start gap-4">
                    <Switch checked={draftColumn.isNullable} onCheckedChange={(val) => setDraftColumn({ ...draftColumn, isNullable: val })} className="mt-0.5" />
                    <div>
-                     <Label className="text-sm font-medium">Allow Nullable</Label>
-                     <p className="text-[11px] text-muted-foreground leading-relaxed mt-1 hidden lg:block">Allow the column to assume a NULL value if no value is provided</p>
+                     <Label className="text-sm font-medium">{t("d1.edit.allowNullable")}</Label>
+                     <p className="text-[11px] text-muted-foreground leading-relaxed mt-1 hidden lg:block">{t("d1.edit.allowNullableHelp")}</p>
                    </div>
                  </div>
 
                  <div className="flex items-start gap-4">
                    <Switch checked={draftColumn.isUnique} onCheckedChange={(val) => setDraftColumn({ ...draftColumn, isUnique: val })} className="mt-0.5" />
                    <div>
-                     <Label className="text-sm font-medium">Is Unique</Label>
-                     <p className="text-[11px] text-muted-foreground leading-relaxed mt-1 hidden lg:block">Enforce values in the column to be unique across rows</p>
+                     <Label className="text-sm font-medium">{t("d1.edit.isUnique")}</Label>
+                     <p className="text-[11px] text-muted-foreground leading-relaxed mt-1 hidden lg:block">{t("d1.edit.isUniqueHelp")}</p>
                    </div>
                  </div>
 
                 <div className="space-y-2 pt-2">
                   <div className="flex justify-between items-center">
-                    <Label className="text-xs text-muted-foreground">CHECK Constraint</Label>
-                    <span className="text-[10px] text-muted-foreground/60 uppercase">Optional</span>
+                    <Label className="text-xs text-muted-foreground">{t("d1.edit.checkConstraint")}</Label>
+                    <span className="text-[10px] text-muted-foreground/60 uppercase">{t("common.optional")}</span>
                   </div>
                   <Input
                     placeholder={`length("${column.name}") < 500`}
@@ -505,10 +518,10 @@ export function EditColumnDialog({
 
         <DialogFooter className="p-4 border-t border-border bg-muted/20 flex justify-end gap-2 shrink-0">
           <Button variant="ghost" size="sm" disabled={isApplying} onClick={() => onOpenChange(false)} className="text-muted-foreground hover:text-foreground h-8 text-xs font-medium">
-            Cancel
+            {t("common.cancel")}
           </Button>
           <Button size="sm" disabled={isApplying} onClick={handleReviewChanges} className="bg-emerald-600 hover:bg-emerald-500 text-white h-8 text-xs font-medium px-4">
-            Save <span className="text-emerald-200/50 font-mono ml-1 text-[10px]">⏎</span>
+            {t("common.save")} <span className="text-emerald-200/50 font-mono ml-1 text-[10px]">⏎</span>
           </Button>
         </DialogFooter>
       </DialogContent>
@@ -518,7 +531,7 @@ export function EditColumnDialog({
         <DialogContent className="max-w-xl p-0 gap-0 shadow-2xl overflow-hidden flex flex-col bg-background border-border text-foreground h-[80vh]">
           <DialogHeader className="p-5 pb-4 border-b border-border bg-background shrink-0">
             <DialogTitle className="text-sm font-medium text-foreground/90">
-              Add foreign key relationship to {tableName}
+              {t("d1.edit.fkTitle", { table: tableName })}
             </DialogTitle>
           </DialogHeader>
 
@@ -528,13 +541,13 @@ export function EditColumnDialog({
                 <div className="flex h-5 w-5 items-center justify-center rounded-full border border-muted-foreground/30 text-muted-foreground/60 text-xs font-bold font-serif italic cursor-help">
                   ?
                 </div>
-                <span className="text-sm font-medium text-foreground/90">What are foreign keys?</span>
+                <span className="text-sm font-medium text-foreground/90">{t("d1.edit.whatAreForeignKeys")}</span>
               </div>
               <Expand size={14} className="text-muted-foreground/50" />
             </div>
 
             <div className="space-y-2 pt-2">
-              <Label className="text-xs text-muted-foreground">Select a table to reference to</Label>
+              <Label className="text-xs text-muted-foreground">{t("d1.edit.selectReferenceTable")}</Label>
               <Select value={draftColumn.fkTable} onValueChange={(val) => setDraftColumn({ ...draftColumn, fkTable: val })}>
                 <SelectTrigger className="w-full bg-background border-border h-10 text-sm">
                   <div className="flex items-center gap-2">
@@ -554,7 +567,7 @@ export function EditColumnDialog({
 
             <div className="space-y-4 pt-2">
                <Label className="text-xs text-muted-foreground">
-                 Select columns from <code className="bg-muted px-1 py-0.5 rounded text-foreground/80">public.{tableName}</code> to reference to
+                 {t("d1.edit.selectReferenceColumns", { table: tableName })}
                </Label>
                
                <div className="flex items-center gap-3 w-full">
@@ -590,7 +603,7 @@ export function EditColumnDialog({
                </div>
                
                <Button variant="outline" size="sm" className="h-7 text-xs bg-background border-border text-muted-foreground hover:text-foreground">
-                 Add another column
+                 {t("d1.edit.addAnotherColumn")}
                </Button>
             </div>
 
@@ -601,34 +614,34 @@ export function EditColumnDialog({
                 <div className="flex h-5 w-5 items-center justify-center rounded-full border border-muted-foreground/30 text-muted-foreground/60 text-xs font-bold font-serif italic cursor-help">
                   ?
                 </div>
-                <span className="text-sm font-medium text-foreground/90">Which action is most appropriate?</span>
+                <span className="text-sm font-medium text-foreground/90">{t("d1.edit.whichAction")}</span>
               </div>
               <Expand size={14} className="text-muted-foreground/50" />
             </div>
 
             <div className="space-y-6 pt-2">
               <div className="space-y-2">
-                 <Label className="text-xs text-muted-foreground leading-relaxed">Action if referenced row is updated</Label>
+                 <Label className="text-xs text-muted-foreground leading-relaxed">{t("d1.edit.onUpdate")}</Label>
                  <Select value={draftColumn.fkUpdateAction} onValueChange={(val) => setDraftColumn({ ...draftColumn, fkUpdateAction: val })}>
                    <SelectTrigger className="w-full bg-background border-border h-10 text-sm">
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent className="bg-background border-border">
-                     {["No action", "Cascade", "Restrict", "Set NULL", "Set default"].map(a => (
-                       <SelectItem key={a} value={a}>{a}</SelectItem>
+                     {fkActions.map(a => (
+                       <SelectItem key={a} value={a}>{fkActionLabel(a)}</SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                  <p className="text-[11px] text-muted-foreground leading-relaxed pt-1">
-                   {draftColumn.fkUpdateAction}: Updating a record from <code className="bg-muted px-1 rounded text-foreground/80 font-mono">public.{tableName}</code> will <span className="text-amber-500 font-medium">raise an error</span> if there are records existing in this table that reference it
+                   {t("d1.edit.fkActionHelpUpdate", { action: fkActionLabel(draftColumn.fkUpdateAction), table: tableName })}
                  </p>
               </div>
 
               <div className="space-y-2">
                  <div className="flex items-center justify-between">
-                   <Label className="text-xs text-muted-foreground leading-relaxed">Action if referenced row is removed</Label>
+                   <Label className="text-xs text-muted-foreground leading-relaxed">{t("d1.edit.onDelete")}</Label>
                    <Button variant="outline" size="sm" className="h-6 text-[10px] bg-background border-border text-foreground/70">
-                     <BookOpen size={10} className="mr-1.5" /> Docs
+                     <BookOpen size={10} className="mr-1.5" /> {t("common.docs")}
                    </Button>
                  </div>
                  <Select value={draftColumn.fkDeleteAction} onValueChange={(val) => setDraftColumn({ ...draftColumn, fkDeleteAction: val })}>
@@ -636,13 +649,13 @@ export function EditColumnDialog({
                      <SelectValue />
                    </SelectTrigger>
                    <SelectContent className="bg-background border-border">
-                     {["No action", "Cascade", "Restrict", "Set NULL", "Set default"].map(a => (
-                       <SelectItem key={a} value={a}>{a}</SelectItem>
+                     {fkActions.map(a => (
+                       <SelectItem key={a} value={a}>{fkActionLabel(a)}</SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                  <p className="text-[11px] text-muted-foreground leading-relaxed pt-1">
-                   {draftColumn.fkDeleteAction}: Deleting a record from <code className="bg-muted px-1 rounded text-foreground/80 font-mono">public.{tableName}</code> will <span className="text-amber-500 font-medium">raise an error</span> if there are records existing in this table that reference it
+                   {t("d1.edit.fkActionHelpDelete", { action: fkActionLabel(draftColumn.fkDeleteAction), table: tableName })}
                  </p>
               </div>
             </div>
@@ -651,7 +664,7 @@ export function EditColumnDialog({
 
           <DialogFooter className="p-4 border-t border-border bg-background flex justify-end gap-2 shrink-0">
             <Button variant="ghost" size="sm" onClick={() => setFkOpen(false)} className="text-muted-foreground hover:text-foreground h-8 text-xs font-medium border border-transparent hover:border-border">
-              Cancel
+              {t("common.cancel")}
             </Button>
             <Button size="sm" onClick={() => {
               if (draftColumn.fkTable && draftColumn.fkColumn) {
@@ -670,7 +683,7 @@ export function EditColumnDialog({
               }
               setFkOpen(false);
             }} className="bg-emerald-600 hover:bg-emerald-500 text-white h-8 text-xs font-medium px-4 border-0">
-              Save <span className="text-emerald-200/50 font-mono ml-1 text-[10px]">⏎</span>
+              {t("common.save")} <span className="text-emerald-200/50 font-mono ml-1 text-[10px]">⏎</span>
             </Button>
           </DialogFooter>
         </DialogContent>
@@ -682,9 +695,9 @@ export function EditColumnDialog({
       }}>
         <AlertDialogContent className="max-w-md p-6 overflow-hidden">
           <AlertDialogHeader>
-            <AlertDialogTitle className="text-foreground">Review Schema Changes</AlertDialogTitle>
+            <AlertDialogTitle className="text-foreground">{t("d1.edit.reviewTitle")}</AlertDialogTitle>
             <AlertDialogDescription className="text-muted-foreground text-sm leading-relaxed mt-2">
-              You are about to make critical changes to the schema of this column. Please review them below:
+              {t("d1.edit.reviewBody")}
             </AlertDialogDescription>
           </AlertDialogHeader>
           <div className="py-2">
@@ -696,7 +709,7 @@ export function EditColumnDialog({
           </div>
           <AlertDialogFooter className="mt-6 flex gap-2">
             <AlertDialogCancel disabled={isApplying} onClick={() => setConfirmOpen(false)} className="h-8 text-xs font-medium mt-0">
-              Cancel
+              {t("common.cancel")}
             </AlertDialogCancel>
             <AlertDialogAction
               disabled={isApplying}
@@ -706,7 +719,7 @@ export function EditColumnDialog({
               }}
               className="h-8 text-xs font-medium bg-emerald-600 hover:bg-emerald-500 text-white border-0 mt-0"
             >
-              {isApplying ? "Applying..." : "Apply Changes"}
+              {isApplying ? t("d1.edit.applying") : t("d1.edit.applyChanges")}
             </AlertDialogAction>
           </AlertDialogFooter>
         </AlertDialogContent>
diff --git a/src/components/ExportWrapper.tsx b/src/components/ExportWrapper.tsx
index b313de6..22bed66 100644
--- a/src/components/ExportWrapper.tsx
+++ b/src/components/ExportWrapper.tsx
@@ -1,6 +1,7 @@
 import { Suspense, lazy, type ComponentType } from 'react';
 import { FreeExportDialog, type ExportDialogProps } from './FreeExportDialog';
 import { Loader2 } from 'lucide-react';
+import { useI18n } from '@/lib/i18n';
 
 const globModules = import.meta.glob('../pro_modules/frontend/ProFeatureGate.tsx');
 const ProDialogImport = Object.values(globModules)[0] as (() => Promise<any>) | undefined;
@@ -10,13 +11,14 @@ const ProModule: ComponentType<ExportDialogProps> | null = ProDialogImport
   : null;
 
 export function ExportWrapper(props: ExportDialogProps) {
+  const { t } = useI18n();
   if (ProModule) {
     return (
       <Suspense
         fallback={
           <div className="flex items-center justify-center p-4 text-sm text-foreground">
             <Loader2 className="w-4 h-4 mr-2 animate-spin" />
-            Loading...
+            {t("d1.export.loading")}
           </div>
         }
       >
diff --git a/src/components/FreeExportDialog.tsx b/src/components/FreeExportDialog.tsx
index 6f1b5b5..4a866d8 100644
--- a/src/components/FreeExportDialog.tsx
+++ b/src/components/FreeExportDialog.tsx
@@ -7,6 +7,7 @@ import {
   DialogTitle,
 } from "@/components/ui/dialog";
 import { Button } from "@/components/ui/button";
+import { useI18n } from "@/lib/i18n";
 
 export interface ExportDialogProps {
   isOpen: boolean;
@@ -16,17 +17,18 @@ export interface ExportDialogProps {
 }
 
 export function FreeExportDialog({ isOpen, onClose }: ExportDialogProps) {
+  const { t } = useI18n();
   return (
     <Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
       <DialogContent>
         <DialogHeader>
-          <DialogTitle>Pro Feature</DialogTitle>
+          <DialogTitle>{t("d1.export.proTitle")}</DialogTitle>
           <DialogDescription>
-            Advanced Data Export is a Pro feature. Available in the official release.
+            {t("d1.export.proBody")}
           </DialogDescription>
         </DialogHeader>
         <DialogFooter>
-          <Button onClick={onClose}>Understood</Button>
+          <Button onClick={onClose}>{t("d1.export.understood")}</Button>
         </DialogFooter>
       </DialogContent>
     </Dialog>
diff --git a/src/components/IntelligencePanel.tsx b/src/components/IntelligencePanel.tsx
index 72e5807..dcc5bde 100644
--- a/src/components/IntelligencePanel.tsx
+++ b/src/components/IntelligencePanel.tsx
@@ -2,6 +2,7 @@ import { AlertCircle, CheckCircle2, Zap, Database, ArrowRight } from "lucide-rea
 import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
 import type { D1AnalysisResult } from "@/hooks/useQueryExecutor";
+import { useI18n } from "@/lib/i18n";
 
 interface IntelligencePanelProps {
   analysis: D1AnalysisResult | null;
@@ -24,6 +25,7 @@ export function IntelligencePanel({
   onApplyFix, 
   onCancelConfirmation 
 }: IntelligencePanelProps) {
+  const { t } = useI18n();
   const isHighCost = analysis?.cost_tier === "High" || analysis?.is_full_scan;
   const isLowCost = analysis?.cost_tier === "Low" && !analysis?.is_full_scan;
   const tableName = analysis?.scanned_tables[0] || previewTableName || "table_name";
@@ -76,7 +78,7 @@ export function IntelligencePanel({
                 "text-[13px] font-semibold tracking-tight",
                 showError || showWarning ? "text-amber-500" : showDestructive || isHighCost ? "text-destructive" : isLowCost ? "text-emerald-500" : "text-sky-500"
               )}>
-                {showError ? "Query Validation" : requiresConfirmation ? "Confirm Destructive Query" : isMutationPreview ? "Destructive Action Detected" : isBlindSelectPreview ? "Blind Operation Detected" : isHighCost ? "High Cost Alert" : isLowCost ? "Query Optimized" : "Query Intelligence"}
+                {showError ? t("d1.intel.validation") : requiresConfirmation ? t("d1.intel.confirmDestructive") : isMutationPreview ? t("d1.intel.destructiveDetected") : isBlindSelectPreview ? t("d1.intel.blindDetected") : isHighCost ? t("d1.intel.highCost") : isLowCost ? t("d1.intel.optimized") : t("d1.intel.intelligence")}
               </span>
               {(!showError) && (
                 <>
@@ -96,17 +98,17 @@ export function IntelligencePanel({
               {showError ? (
                 <span className="text-amber-500/90 font-medium">{validationError}</span>
               ) : requiresConfirmation ? (
-                <>Attention: This query will modify data. <span className="font-bold text-destructive underline decoration-destructive/30 underline-offset-4">Double click the Run button</span> below to execute.</>
+                t("d1.intel.confirmBody")
               ) : isMutationPreview ? (
-                <>Potential <span className="text-destructive font-bold underline decoration-destructive/30 underline-offset-4 decoration-skip-ink">destructive operation</span> detected. You will need to confirm before execution.</>
+                t("d1.intel.mutationBody")
               ) : isBlindSelectPreview ? (
-                <>Attention: This is a <span className="text-amber-500 font-bold underline decoration-amber-500/30 underline-offset-4">blind operation</span> (no filters). Resource usage may be high on large tables.</>
+                t("d1.intel.blindBody")
               ) : isHighCost ? (
-                <>This query performs a <span className="text-destructive/90 font-bold underline decoration-destructive/30 underline-offset-4">full table scan</span>. Consider adding an index.</>
+                t("d1.intel.highCostBody")
               ) : isLowCost ? (
-                "The query is optimal and efficiently utilizes existing database indexes."
+                t("d1.intel.optimizedBody")
               ) : (
-                "Cost analysis is complete. Your query performance is within acceptable limits."
+                t("d1.intel.defaultBody")
               )}
             </p>
           </div>
@@ -120,7 +122,7 @@ export function IntelligencePanel({
               onClick={onCancelConfirmation}
               className="h-8 text-[11px] font-medium text-muted-foreground hover:text-foreground"
             >
-              Cancel
+              {t("common.cancel")}
             </Button>
           )}
           {isHighCost && !requiresConfirmation && (
@@ -131,7 +133,7 @@ export function IntelligencePanel({
               className="h-8 gap-2 text-[11px] font-bold border-destructive/20 hover:bg-destructive/10 hover:text-destructive hover:border-destructive/30 transition-all group shrink-0"
             >
               <Zap size={12} className="text-amber-500 fill-amber-500 group-hover:scale-125 transition-transform" />
-              Create Index
+              {t("d1.intel.createIndex")}
               <ArrowRight size={12} className="opacity-0 -translate-x-2 group-hover:opacity-100 group-hover:translate-x-0 transition-all" />
             </Button>
           )}
diff --git a/src/components/Layout.tsx b/src/components/Layout.tsx
index 4930836..6b872ef 100644
--- a/src/components/Layout.tsx
+++ b/src/components/Layout.tsx
@@ -61,11 +61,11 @@ interface NavItem {
 const THEME_OPTIONS: {
   value: Theme;
   icon: React.ElementType;
-  label: string;
+  labelKey: "theme.light" | "theme.dark" | "theme.system";
 }[] = [
-  { value: "light", icon: Sun, label: "Light" },
-  { value: "dark", icon: Moon, label: "Dark" },
-  { value: "system", icon: Monitor, label: "System" },
+  { value: "light", icon: Sun, labelKey: "theme.light" },
+  { value: "dark", icon: Moon, labelKey: "theme.dark" },
+  { value: "system", icon: Monitor, labelKey: "theme.system" },
 ];
 
 // ── Sidebar ────────────────────────────────────────────────────────────────────
@@ -86,6 +86,7 @@ function Sidebar({
   activeAccount,
   navGroups,
 }: SidebarProps) {
+  const { t } = useI18n();
   const { theme, setTheme } = useTheme();
   const privacySettings = useAppStore(s => s.privacySettings);
 
@@ -201,14 +202,14 @@ function Sidebar({
       {!collapsed && (
         <div className="px-1.5 py-2 border-t border-sidebar-border shrink-0">
           <p className="px-2 text-[10px] uppercase tracking-widest text-sidebar-foreground/30 mb-1">
-            Appearance
+            {t("common.appearance")}
           </p>
           <div className="flex gap-1">
-            {THEME_OPTIONS.map(({ value, icon: Icon, label }) => (
+            {THEME_OPTIONS.map(({ value, icon: Icon, labelKey }) => (
               <button
                 key={value}
                 onClick={() => setTheme(value)}
-                title={label}
+                title={t(labelKey)}
                 className={cn(
                   "flex-1 flex items-center justify-center py-1.5 rounded-md transition-colors",
                   "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
@@ -239,6 +240,7 @@ interface TitleBarProps {
 }
 
 function TitleBar({ collapsed, onToggle, title, onNavigate }: TitleBarProps) {
+  const { t } = useI18n();
   const { status, downloadProgress, update } = useUpdater();
 
   return (
@@ -260,7 +262,7 @@ function TitleBar({ collapsed, onToggle, title, onNavigate }: TitleBarProps) {
           "text-muted-foreground hover:text-foreground hover:bg-muted/40 transition-all",
           "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
         )}
-        aria-label={collapsed ? "Expand sidebar" : "Collapse sidebar"}
+        aria-label={collapsed ? t("title.expandSidebar") : t("title.collapseSidebar")}
       >
         {collapsed ? (
           <PanelLeftOpen size={16} strokeWidth={2} />
@@ -316,14 +318,14 @@ function TitleBar({ collapsed, onToggle, title, onNavigate }: TitleBarProps) {
             className="flex items-center gap-1.5 px-3 py-1 bg-primary text-primary-foreground rounded-full text-[10px] font-bold shadow-lg shadow-primary/20 hover:scale-105 active:scale-95 transition-all animate-bounce"
           >
             <DownloadIcon size={12} strokeWidth={3} />
-            UPDATE V{update?.version}
+            {t("title.updateAvailable", { version: update?.version ?? "" })}
           </button>
         )}
 
         {status === "error" && (
           <Badge variant="destructive" className="flex items-center gap-1 text-[10px] py-0.5 px-2">
             <AlertCircle size={10} />
-            Update Error
+            {t("title.updateError")}
           </Badge>
         )}
 
@@ -342,10 +344,30 @@ function TitleBar({ collapsed, onToggle, title, onNavigate }: TitleBarProps) {
 }
 
 // ── Simple page router ────────────────────────────────────────────────────────
+function KVNamespacesView() {
+  const { t } = useI18n();
+  return (
+    <div className="flex h-full items-center justify-center">
+      <div className="max-w-md rounded-lg border border-border bg-muted/20 p-6 text-center">
+        <div className="mx-auto mb-4 flex h-10 w-10 items-center justify-center rounded-lg border border-border bg-background text-primary">
+          <KeyRound size={20} strokeWidth={1.75} />
+        </div>
+        <Badge variant="secondary" className="mb-3">
+          {t("kv.badge")}
+        </Badge>
+        <h1 className="text-base font-semibold text-foreground">{t("kv.title")}</h1>
+        <p className="mt-2 text-sm text-muted-foreground">{t("kv.subtitle")}</p>
+        <p className="mt-3 text-xs leading-relaxed text-muted-foreground/70">{t("kv.body")}</p>
+      </div>
+    </div>
+  );
+}
+
 function PageContent({ activeId, onNavigate }: { activeId: string; onNavigate: (id: string) => void }) {
   const { t } = useI18n();
   if (activeId === "d1") return <DatabasesView />;
   if (activeId === "r2") return <R2BucketsView />;
+  if (activeId === "kv") return <KVNamespacesView />;
   if (activeId === "settings") return <SettingsView />;
   if (activeId === "audit") return <Overview onNavigate={onNavigate} />;
   if (activeId === "audit-scanner") return <DomainScanner onNavigate={onNavigate} />;
@@ -362,7 +384,6 @@ function PageContent({ activeId, onNavigate }: { activeId: string; onNavigate: (
     );
   }
 
-  // KV and Settings views will be added in subsequent steps
   return (
       <div className="flex flex-col items-center justify-center h-full text-center gap-2">
       <p className="text-muted-foreground text-sm">{t("common.comingSoon")}</p>
@@ -392,7 +413,6 @@ export function Layout() {
             id: "kv",
             label: t("nav.kv"),
             icon: KeyRound,
-            disabled: true,
             badge: t("common.soon"),
           },
         ],
diff --git a/src/components/QueryEditor.tsx b/src/components/QueryEditor.tsx
index a152994..a33795f 100644
--- a/src/components/QueryEditor.tsx
+++ b/src/components/QueryEditor.tsx
@@ -28,6 +28,7 @@ import { type D1QueryResult, type D1TableSchema } from "@/hooks/useCloudflare";
 import { useAppStore } from "@/store/useAppStore";
 import { useQueryExecutor } from "@/hooks/useQueryExecutor";
 import { IntelligencePanel } from "@/components/IntelligencePanel";
+import { useI18n, type TranslationKey } from "@/lib/i18n";
 
 // ── Types ─────────────────────────────────────────────────────────────────────
 
@@ -63,16 +64,16 @@ function getColumnsFromSql(sql: string | null): [string, string] {
   return [cols[0] || "col1", cols[1] || cols[0] || "col2"];
 }
 
-const PRAGMA_TOOLTIPS: Record<string, string> = {
-  ncol: "Number of columns in the table",
-  wr: "WITHOUT ROWID (1 if true, 0 if false)",
-  strict: "STRICT table (1 if true, 0 if false)",
-  cid: "Column ID",
-  notnull: "NOT NULL constraint (1 if true, 0 if false)",
-  dflt_value: "Default value",
-  pk: "Primary Key (1 if true, 0 if false)",
-  schema: "The database schema (usually 'main')",
-  type: "Object type (e.g. table, view, index)",
+const PRAGMA_TOOLTIPS: Record<string, TranslationKey> = {
+  ncol: "d1.pragma.ncol",
+  wr: "d1.pragma.wr",
+  strict: "d1.pragma.strict",
+  cid: "d1.pragma.cid",
+  notnull: "d1.pragma.notnull",
+  dflt_value: "d1.pragma.dfltValue",
+  pk: "d1.pragma.pk",
+  schema: "d1.pragma.schema",
+  type: "d1.pragma.type",
 };
 
 // ── Result data table (shared display component) ───────────────────────────────
@@ -86,6 +87,7 @@ function ResultTable({
   columns: string[];
   rows: Record<string, unknown>[];
 }) {
+  const { t } = useI18n();
   const [offset, setOffset] = useState(0);
 
   const page = rows.slice(offset, offset + PAGE);
@@ -104,7 +106,8 @@ function ResultTable({
               <TableRow className="bg-muted/30 hover:bg-muted/30">
                 <TableHead className={`w-10 text-center text-[10px] text-muted-foreground/40 font-mono px-2 ${paddingY}`}>#</TableHead>
                 {columns.map((col) => {
-                  const tooltipText = PRAGMA_TOOLTIPS[col.toLowerCase()];
+                  const tooltipKey = PRAGMA_TOOLTIPS[col.toLowerCase()];
+                  const tooltipText = tooltipKey ? t(tooltipKey) : null;
                   return (
                     <TableHead key={col} className={`text-xs font-medium uppercase tracking-wider text-muted-foreground whitespace-nowrap ${paddingY}`}>
                       {tooltipText ? (
@@ -162,14 +165,18 @@ function ResultTable({
       {/* Pagination */}
       <div className="flex items-center justify-between border-t border-border bg-muted/20 px-4 py-1.5 shrink-0">
         <span className="text-xs text-muted-foreground/50 tabular-nums">
-          {rows.length} row{rows.length !== 1 ? "s" : ""} · showing {offset + 1}–{Math.min(offset + PAGE, rows.length)}
+          {t(rows.length === 1 ? "d1.query.resultFooterSingular" : "d1.query.resultFooter", {
+            count: rows.length,
+            start: offset + 1,
+            end: Math.min(offset + PAGE, rows.length),
+          })}
         </span>
         {(hasPrev || hasNext) && (
           <div className="flex items-center gap-1">
-            <Button variant="outline" size="icon" className="h-6 w-6" disabled={!hasPrev} onClick={() => setOffset(Math.max(0, offset - PAGE))} aria-label="Prev">
+            <Button variant="outline" size="icon" className="h-6 w-6" disabled={!hasPrev} onClick={() => setOffset(Math.max(0, offset - PAGE))} aria-label={t("common.previousPage")}>
               <ChevronLeft size={11} />
             </Button>
-            <Button variant="outline" size="icon" className="h-6 w-6" disabled={!hasNext} onClick={() => setOffset(offset + PAGE)} aria-label="Next">
+            <Button variant="outline" size="icon" className="h-6 w-6" disabled={!hasNext} onClick={() => setOffset(offset + PAGE)} aria-label={t("common.nextPage")}>
               <ChevronRight size={11} />
             </Button>
           </div>
@@ -179,10 +186,10 @@ function ResultTable({
   );
 }
 
-const templates = [
-  { label: "Select All", sql: "SELECT * FROM your_table LIMIT 50;" },
-  { label: "List Tables", sql: "SELECT name FROM sqlite_master WHERE type='table';" },
-  { label: "Table Schema", sql: "PRAGMA table_info(your_table);" },
+const templates: { labelKey: TranslationKey; sql: string }[] = [
+  { labelKey: "d1.query.templateSelectAll", sql: "SELECT * FROM your_table LIMIT 50;" },
+  { labelKey: "d1.query.templateListTables", sql: "SELECT name FROM sqlite_master WHERE type='table';" },
+  { labelKey: "d1.query.templateTableSchema", sql: "PRAGMA table_info(your_table);" },
 ];
 
 // ── Main Component ────────────────────────────────────────────────────────────
@@ -193,6 +200,7 @@ interface QueryEditorProps {
 }
 
 export function QueryEditor({ databaseId, tables }: QueryEditorProps) {
+  const { t } = useI18n();
   const dynamicTemplateData = useMemo(() => {
     if (!tables || tables.length === 0) return { table: "your_table", col1: "col1", col2: "col2" };
     // Prefer user tables over system tables
@@ -295,7 +303,7 @@ export function QueryEditor({ databaseId, tables }: QueryEditorProps) {
       if (tableName && tables && tables.length > 0) {
         const exists = tables.some(t => t.name.toLowerCase() === tableName.toLowerCase());
         if (!exists) {
-          executor.setValidationError(`Table "${tableName}" not found in database.`);
+          executor.setValidationError(t("d1.query.tableNotFound", { table: tableName }));
         } else {
           executor.setValidationError(null);
         }
@@ -305,7 +313,7 @@ export function QueryEditor({ databaseId, tables }: QueryEditorProps) {
     }, 150); // Faster debounce for instant feel
 
     return () => clearTimeout(timer);
-  }, [sql, tables, executor.checkMutation, executor.getTableNameFromSql, executor.setValidationError, executor.requiresConfirmation, executor.cancelConfirmation]);
+  }, [sql, tables, t, executor.checkMutation, executor.getTableNameFromSql, executor.setValidationError, executor.requiresConfirmation, executor.cancelConfirmation]);
 
   // Cmd/Ctrl + Enter submits
   const handleKeyDown = (e: KeyboardEvent<HTMLTextAreaElement>) => {
@@ -326,13 +334,13 @@ export function QueryEditor({ databaseId, tables }: QueryEditorProps) {
           {/* Template buttons */}
           <div className="flex items-center gap-1 flex-1 min-w-0 flex-wrap">
             <Sparkles size={11} strokeWidth={1.75} className="text-muted-foreground/40 shrink-0" />
-            {templates.map((t: { label: string; sql: string }) => (
+            {templates.map((template) => (
               <button
-                key={t.label}
-                onClick={() => setSql(t.sql)}
+                key={template.labelKey}
+                onClick={() => setSql(template.sql)}
                 className="text-[10px] text-muted-foreground/60 hover:text-foreground hover:bg-muted/60 rounded px-1.5 py-0.5 transition-colors font-mono"
               >
-                {t.label}
+                {t(template.labelKey)}
               </button>
             ))}
           </div>
@@ -342,7 +350,7 @@ export function QueryEditor({ databaseId, tables }: QueryEditorProps) {
             variant="ghost" size="icon"
             className="h-6 w-6 text-muted-foreground hover:text-foreground shrink-0"
             onClick={() => { setSql(""); setStatus({ kind: "idle" }); textareaRef.current?.focus(); }}
-            title="Clear"
+            title={t("d1.query.clear")}
           >
             <RotateCcw size={11} />
           </Button>
@@ -365,12 +373,12 @@ export function QueryEditor({ databaseId, tables }: QueryEditorProps) {
                 ? <AlertCircle size={12} strokeWidth={3} />
                 : <Play size={12} strokeWidth={2.5} />}
             {executor.isAnalyzing 
-              ? "Analyzing…" 
+              ? t("d1.query.analyzing")
               : isRunning 
-                ? "Running…" 
+                ? t("d1.query.running")
                 : executor.requiresConfirmation 
-                  ? "CONFIRM EXECUTION" 
-                  : "Run"}
+                  ? t("d1.query.confirmExecution")
+                  : t("d1.query.run")}
             {!isRunning && !executor.isAnalyzing && !executor.requiresConfirmation && (
               <kbd className="hidden sm:inline text-[9px] bg-primary-foreground/20 px-1 py-px rounded font-sans leading-none">
                 ⌘↵
@@ -422,7 +430,7 @@ export function QueryEditor({ databaseId, tables }: QueryEditorProps) {
         {status.kind === "idle" && (
           <div className="flex items-center justify-center h-full text-center px-6 gap-2 text-muted-foreground/30">
             <Play size={14} strokeWidth={1.5} />
-            <span className="text-xs">Run a query to see results</span>
+            <span className="text-xs">{t("d1.query.runPrompt")}</span>
           </div>
         )}
 
@@ -430,7 +438,7 @@ export function QueryEditor({ databaseId, tables }: QueryEditorProps) {
         {status.kind === "running" && (
           <div className="flex items-center justify-center h-full gap-2 text-muted-foreground/50">
             <Loader2 size={16} className="animate-spin" />
-            <span className="text-xs">Executing…</span>
+            <span className="text-xs">{t("d1.query.executing")}</span>
           </div>
         )}
 
@@ -452,7 +460,7 @@ export function QueryEditor({ databaseId, tables }: QueryEditorProps) {
             <Alert className="border-emerald-500/30 bg-emerald-500/5 text-emerald-400">
               <CheckCircle2 size={14} />
               <AlertDescription className="text-xs flex items-center gap-3">
-                <span>Query executed successfully</span>
+                <span>{t("d1.query.success")}</span>
                 {status.duration != null && (
                   <Badge variant="secondary" className="font-mono text-[10px]">
                     {status.duration.toFixed(2)} ms
@@ -470,11 +478,11 @@ export function QueryEditor({ databaseId, tables }: QueryEditorProps) {
               <CheckCircle2 size={14} />
               <AlertDescription className="text-xs flex flex-wrap items-center gap-3">
                 <span>
-                  {status.changes} row{status.changes !== 1 ? "s" : ""} affected
+                  {t(status.changes === 1 ? "d1.query.rowAffected" : "d1.query.rowsAffected", { count: status.changes })}
                 </span>
                 {status.lastRowId != null && (
                   <span className="text-emerald-400/60">
-                    Last row ID: <span className="font-mono">{status.lastRowId}</span>
+                    {t("d1.query.lastRowId")} <span className="font-mono">{status.lastRowId}</span>
                   </span>
                 )}
                 {status.duration != null && (
@@ -494,7 +502,7 @@ export function QueryEditor({ databaseId, tables }: QueryEditorProps) {
             <div className="flex items-center gap-3 px-4 py-2 border-b border-border bg-muted/20 shrink-0">
               <CheckCircle2 size={12} className="text-emerald-400 shrink-0" />
               <span className="text-xs text-muted-foreground">
-                <span className="text-foreground font-medium tabular-nums">{status.rows.length}</span> row{status.rows.length !== 1 ? "s" : ""} returned
+                {t(status.rows.length === 1 ? "d1.query.rowReturned" : "d1.query.rowsReturned", { count: status.rows.length })}
               </span>
 
               {status.duration != null && (
@@ -504,7 +512,7 @@ export function QueryEditor({ databaseId, tables }: QueryEditorProps) {
               )}
               {status.rowsRead != null && (
                 <span className="text-[10px] text-muted-foreground/40 tabular-nums">
-                  {status.rowsRead} rows scanned
+                  {t("d1.query.rowsScanned", { count: status.rowsRead })}
                 </span>
               )}
             </div>
diff --git a/src/components/R2ProGate.tsx b/src/components/R2ProGate.tsx
index a94a2cf..715a465 100644
--- a/src/components/R2ProGate.tsx
+++ b/src/components/R2ProGate.tsx
@@ -21,6 +21,7 @@
 import React from "react";
 import { useRemoteConfig } from "@/pro_modules/frontend/useRemoteConfig";
 import { useToast } from "@/components/ui/use-toast";
+import { useI18n } from "@/lib/i18n";
 
 // ── Config key resolver ────────────────────────────────────────────────────────
 
@@ -70,14 +71,6 @@ function resolveFeature(featureName: string, config: RemoteConfig | null, isLoad
   }
 }
 
-const FEATURE_LABELS: Record<string, string> = {
-  r2_upload: "File Upload",
-  r2_download: "File Download",
-  r2_create_bucket: "Create Bucket",
-  r2_delete_bucket: "Delete Bucket",
-  r2_bucket_settings: "Bucket Settings",
-};
-
 // ── Imperative hook ────────────────────────────────────────────────────────────
 
 /**
@@ -86,9 +79,17 @@ const FEATURE_LABELS: Record<string, string> = {
  * children in a JSX component isn't ergonomic.
  */
 export function useProFeature(featureName: string) {
+  const { t } = useI18n();
   const { data, isLoading } = useRemoteConfig();
   const { toast } = useToast();
-  const label = FEATURE_LABELS[featureName] ?? featureName;
+  const labels: Record<string, string> = {
+    r2_upload: t("r2.feature.upload"),
+    r2_download: t("r2.feature.download"),
+    r2_create_bucket: t("r2.feature.createBucket"),
+    r2_delete_bucket: t("r2.feature.deleteBucket"),
+    r2_bucket_settings: t("r2.feature.bucketSettings"),
+  };
+  const label = labels[featureName] ?? featureName;
   const isAvailable = resolveFeature(featureName, data, isLoading);
 
   return {
@@ -96,8 +97,8 @@ export function useProFeature(featureName: string) {
     isLoading,
     showProToast: () =>
       toast({
-        title: `🔒 Pro Feature — ${label}`,
-        description: "This feature is available in the official CF Studio Pro build.",
+        title: t("r2.proToastTitle", { label }),
+        description: t("r2.proToastBody"),
         duration: 4000,
       }),
   };
@@ -118,6 +119,7 @@ interface R2ProGateProps {
 
 export function R2ProGate({ featureName, children, inline = false }: R2ProGateProps) {
   const { isAvailable, isLoading, showProToast } = useProFeature(featureName);
+  const { t } = useI18n();
 
   // While loading: render children normally (optimistic)
   if (isLoading || isAvailable) {
@@ -136,9 +138,9 @@ export function R2ProGate({ featureName, children, inline = false }: R2ProGatePr
         <span className="pointer-events-none opacity-60">{children}</span>
         <span
           className="absolute -top-1.5 -right-2.5 bg-orange-500 text-[8px] font-bold px-1 rounded-[4px] text-white shadow-sm z-10 pointer-events-none select-none"
-          aria-label="Pro feature"
+          aria-label={t("d1.export.proTitle")}
         >
-          PRO
+          {t("common.pro")}
         </span>
       </span>
     );
@@ -149,9 +151,9 @@ export function R2ProGate({ featureName, children, inline = false }: R2ProGatePr
       <div className="pointer-events-none opacity-60">{children}</div>
       <span
         className="absolute -top-1.5 -right-2.5 bg-orange-500 text-[8px] font-bold px-1 rounded-[4px] text-white shadow-sm z-10 pointer-events-none select-none"
-        aria-label="Pro feature"
+        aria-label={t("d1.export.proTitle")}
       >
-        PRO
+        {t("common.pro")}
       </span>
       {/* Invisible click-interceptor overlay */}
       <span className="absolute inset-0 cursor-not-allowed" aria-hidden />
diff --git a/src/components/SchemaVisualizer.tsx b/src/components/SchemaVisualizer.tsx
index a1df2ff..22b8d23 100644
--- a/src/components/SchemaVisualizer.tsx
+++ b/src/components/SchemaVisualizer.tsx
@@ -26,10 +26,12 @@ import { cn } from "@/lib/utils";
 import { parseSQLiteSchemaToGraph, type TableNodeData } from "@/utils/schemaParser";
 import type { D1TableSchema } from "@/hooks/useCloudflare";
 import { useTheme } from "@/components/ThemeProvider";
+import { useI18n } from "@/lib/i18n";
 
 // ── Custom TableNode ──────────────────────────────────────────────────────────
 
 function TableNode({ data, selected }: NodeProps<Node<TableNodeData>>) {
+  const { t } = useI18n();
   const { tableName, columns, primaryKeyColumns } = data;
   const pkSet = new Set(primaryKeyColumns);
 
@@ -124,7 +126,7 @@ function TableNode({ data, selected }: NodeProps<Node<TableNodeData>>) {
 
         {columns.length === 0 && (
           <div className="px-3 py-2 text-[11px] text-muted-foreground/40 italic">
-            No columns
+            {t("d1.schema.noColumns")}
           </div>
         )}
       </div>
@@ -142,6 +144,7 @@ interface SchemaVisualizerProps {
 }
 
 export function SchemaVisualizer({ tables }: SchemaVisualizerProps) {
+  const { t } = useI18n();
   const { resolvedTheme } = useTheme();
 
   // Parse the schema once when tables change
@@ -172,9 +175,9 @@ export function SchemaVisualizer({ tables }: SchemaVisualizerProps) {
           <Share2 size={22} strokeWidth={1.5} />
         </div>
         <div className="space-y-1 max-w-xs">
-          <p className="text-sm font-medium text-foreground">No tables to visualize</p>
+          <p className="text-sm font-medium text-foreground">{t("d1.schema.noTablesVisualize")}</p>
           <p className="text-xs text-muted-foreground">
-            Create tables in your D1 database to see the ER diagram
+            {t("d1.schema.noTablesVisualizeBody")}
           </p>
         </div>
       </div>
diff --git a/src/lib/i18n.ts b/src/lib/i18n.ts
index 55f1269..efd9de1 100644
--- a/src/lib/i18n.ts
+++ b/src/lib/i18n.ts
@@ -21,6 +21,242 @@ const translations = {
     "common.soon": "Soon",
     "common.comingSoon": "Coming soon",
     "common.auditComingSoon": "Audit view coming soon",
+    "common.loading": "Loading...",
+    "common.refresh": "Refresh",
+    "common.cancel": "Cancel",
+    "common.save": "Save",
+    "common.close": "Close",
+    "common.apply": "Apply",
+    "common.copy": "Copy",
+    "common.copied": "Copied",
+    "common.error": "Error",
+    "common.success": "Success",
+    "common.optional": "Optional",
+    "common.docs": "Docs",
+    "common.pro": "Pro",
+    "common.all": "All",
+    "common.custom": "Custom...",
+    "common.null": "NULL",
+    "common.empty": "EMPTY",
+    "common.rows": "{count} rows",
+    "common.rowsSingular": "{count} row",
+    "common.columns": "{count} columns",
+    "common.columnsSingular": "{count} column",
+    "common.page": "Page {page}",
+    "common.previousPage": "Previous page",
+    "common.nextPage": "Next page",
+    "common.selectAllRows": "Select all rows",
+    "common.selectRow": "Select row {row}",
+    "common.notAvailable": "Not available",
+    "common.appearance": "Appearance",
+    "theme.light": "Light",
+    "theme.dark": "Dark",
+    "theme.system": "System",
+    "title.updateAvailable": "UPDATE V{version}",
+    "title.updateError": "Update Error",
+    "title.expandSidebar": "Expand sidebar",
+    "title.collapseSidebar": "Collapse sidebar",
+    "kv.title": "KV Namespaces",
+    "kv.subtitle": "KV management is not implemented in this public fork yet.",
+    "kv.body": "The current fork keeps KV as a placeholder while D1 and R2 workflows are evaluated first.",
+    "kv.badge": "Local fork placeholder",
+    "d1.title": "Databases",
+    "d1.subtitle": "D1 databases attached to your Cloudflare account",
+    "d1.queryHistory": "Query History",
+    "d1.queryHistoryPro": "Query History (Pro)",
+    "d1.historyRequired": "History Feature Required",
+    "d1.historyRequiredDesc": "This feature is only available in the official CF Studio Pro version.",
+    "d1.table.name": "Name",
+    "d1.table.id": "Database ID",
+    "d1.table.createdAt": "Created At",
+    "d1.table.tables": "Tables",
+    "d1.table.size": "Size",
+    "d1.listFooter": "{count} databases - click a row to explore",
+    "d1.listFooterSingular": "{count} database - click a row to explore",
+    "d1.empty.noAuthTitle": "Wrangler session not found",
+    "d1.empty.noAuthBody": "CF Studio reads your local Wrangler session for zero-touch auth. Run the command below in your terminal or click the button below. The page will automatically refresh once you are logged in.",
+    "d1.empty.copyCommand": "Copy command",
+    "d1.empty.runCommand": "Run Command in Background",
+    "d1.empty.openingTerminal": "Opening Terminal",
+    "d1.empty.openingTerminalDesc": "Launching wrangler login in a new terminal window...",
+    "d1.empty.launchFailed": "Launch Failed",
+    "d1.empty.noDatabasesTitle": "No D1 databases found",
+    "d1.empty.noDatabasesBody": "This Cloudflare account has no D1 databases yet. Create one with:",
+    "d1.empty.notEnabledTitle": "Cloudflare D1 Not Enabled",
+    "d1.empty.notEnabledBody": "It looks like Cloudflare D1 Serverless SQL is not yet enabled for this account. You must enable it in the dashboard before creating databases.",
+    "d1.empty.enableD1": "Enable D1 SQL",
+    "d1.empty.apiErrorTitle": "Failed to load databases",
+    "d1.empty.unknownApiError": "An unknown API error occurred.",
+    "d1.toast.loginCopied": "Login command copied to clipboard.",
+    "d1.back": "Databases",
+    "d1.sqlEditor": "SQL Editor",
+    "d1.visualSchema": "Visual Schema",
+    "d1.indexes": "Indexes",
+    "d1.refreshSchema": "Refresh schema",
+    "d1.tables": "Tables",
+    "d1.systemTables": "System ({count})",
+    "d1.noTables": "No tables found",
+    "d1.tab.data": "Data",
+    "d1.tab.schema": "Schema",
+    "d1.selectTable": "Select a table",
+    "d1.selectTableRows": "Click a table name on the left to browse its rows",
+    "d1.selectTableSchema": "Click a table name on the left to view its CREATE TABLE statement",
+    "d1.noSchema": "No schema available",
+    "d1.noSchemaBody": "{table} has no recorded CREATE TABLE statement",
+    "d1.totalColumnsTooltip": "Total {count} columns exist in {table}",
+    "d1.rowsFetchedTooltip": "{count} rows fetched",
+    "d1.exportAll": "Export All",
+    "d1.exportRows": "Export {count} Rows",
+    "d1.queryFailed": "Query failed",
+    "d1.noRows": "No rows found",
+    "d1.noRowsBody": "{table} is empty or has no data matching the current offset",
+    "d1.primaryKey": "Primary Key",
+    "d1.references": "References",
+    "d1.referencedBy": "Referenced By",
+    "d1.sortAscending": "Sort Ascending",
+    "d1.sortDescending": "Sort Descending",
+    "d1.copyName": "Copy name",
+    "d1.editColumn": "Edit column",
+    "d1.deleteColumn": "Delete column",
+    "d1.rowsRange": "Rows {start}-{end}",
+    "d1.perPage": "Per page",
+    "d1.customRowsPerPage": "Custom Rows Per Page",
+    "d1.limitMax": "Limit (max 10000)",
+    "d1.applyLimit": "Apply Limit",
+    "d1.colShort": "col",
+    "d1.colsShort": "cols",
+    "d1.query.runPrompt": "Run a query to see results",
+    "d1.query.executing": "Executing...",
+    "d1.query.success": "Query executed successfully",
+    "d1.query.rowsAffected": "{count} rows affected",
+    "d1.query.rowAffected": "{count} row affected",
+    "d1.query.lastRowId": "Last row ID:",
+    "d1.query.rowsReturned": "{count} rows returned",
+    "d1.query.rowReturned": "{count} row returned",
+    "d1.query.rowsScanned": "{count} rows scanned",
+    "d1.query.resultFooter": "{count} rows - showing {start}-{end}",
+    "d1.query.resultFooterSingular": "{count} row - showing {start}-{end}",
+    "d1.query.clear": "Clear",
+    "d1.query.analyzing": "Analyzing...",
+    "d1.query.running": "Running...",
+    "d1.query.confirmExecution": "CONFIRM EXECUTION",
+    "d1.query.run": "Run",
+    "d1.query.tableNotFound": "Table \"{table}\" not found in database.",
+    "d1.query.templateSelectAll": "Select All",
+    "d1.query.templateListTables": "List Tables",
+    "d1.query.templateTableSchema": "Table Schema",
+    "d1.pragma.ncol": "Number of columns in the table",
+    "d1.pragma.wr": "WITHOUT ROWID (1 if true, 0 if false)",
+    "d1.pragma.strict": "STRICT table (1 if true, 0 if false)",
+    "d1.pragma.cid": "Column ID",
+    "d1.pragma.notnull": "NOT NULL constraint (1 if true, 0 if false)",
+    "d1.pragma.dfltValue": "Default value",
+    "d1.pragma.pk": "Primary Key (1 if true, 0 if false)",
+    "d1.pragma.schema": "The database schema (usually 'main')",
+    "d1.pragma.type": "Object type (e.g. table, view, index)",
+    "d1.intel.validation": "Query Validation",
+    "d1.intel.confirmDestructive": "Confirm Destructive Query",
+    "d1.intel.destructiveDetected": "Destructive Action Detected",
+    "d1.intel.blindDetected": "Blind Operation Detected",
+    "d1.intel.highCost": "High Cost Alert",
+    "d1.intel.optimized": "Query Optimized",
+    "d1.intel.intelligence": "Query Intelligence",
+    "d1.intel.confirmBody": "Attention: This query will modify data. Double click the Run button below to execute.",
+    "d1.intel.mutationBody": "Potential destructive operation detected. You will need to confirm before execution.",
+    "d1.intel.blindBody": "Attention: This is a blind operation with no filters. Resource usage may be high on large tables.",
+    "d1.intel.highCostBody": "This query performs a full table scan. Consider adding an index.",
+    "d1.intel.optimizedBody": "The query is optimal and efficiently utilizes existing database indexes.",
+    "d1.intel.defaultBody": "Cost analysis is complete. Your query performance is within acceptable limits.",
+    "d1.intel.createIndex": "Create Index",
+    "d1.schema.noColumns": "No columns",
+    "d1.schema.noTablesVisualize": "No tables to visualize",
+    "d1.schema.noTablesVisualizeBody": "Create tables in your D1 database to see the ER diagram",
+    "d1.edit.title": "Update column {column} from {table}",
+    "d1.edit.previewOnly": "Column editing is preview-only right now. Support for real schema changes is coming soon.",
+    "d1.edit.general": "General",
+    "d1.edit.name": "Name",
+    "d1.edit.nameHelp": "Recommended to use lowercase and use an underscore to separate words e.g. column_name",
+    "d1.edit.description": "Description",
+    "d1.edit.dataType": "Data Type",
+    "d1.edit.createEnum": "+ Create enum types",
+    "d1.edit.aboutTypes": "About data types",
+    "d1.edit.type": "Type",
+    "d1.edit.varcharTitle": "It is recommended to use text instead",
+    "d1.edit.varcharBody": "SQLite recommends against using the data type varchar unless you have a very specific use case.",
+    "d1.edit.readMore": "Read more",
+    "d1.edit.useText": "Use text",
+    "d1.edit.defineArray": "Define as Array",
+    "d1.edit.defineArrayBody": "Allow column to be defined as variable-length multidimensional arrays",
+    "d1.edit.defaultValue": "Default Value",
+    "d1.edit.defaultValueHelp": "Can either be a literal or an expression. When using an expression wrap your expression in brackets, e.g. (gen_random_uuid())",
+    "d1.edit.foreignKeys": "Foreign Keys",
+    "d1.edit.addForeignKey": "Add foreign key",
+    "d1.edit.new": "New",
+    "d1.edit.saved": "Saved",
+    "d1.edit.constraints": "Constraints",
+    "d1.edit.isPrimaryKey": "Is Primary Key",
+    "d1.edit.primaryKeyHelp": "A primary key indicates that a column or group of columns can be used as a unique identifier for rows in the table",
+    "d1.edit.tableHasPrimaryKey": "Table already has a primary key: {column}",
+    "d1.edit.noPrimaryKeyWarning": "Warning: This table will not have any primary key.",
+    "d1.edit.allowNullable": "Allow Nullable",
+    "d1.edit.allowNullableHelp": "Allow the column to assume a NULL value if no value is provided",
+    "d1.edit.isUnique": "Is Unique",
+    "d1.edit.isUniqueHelp": "Enforce values in the column to be unique across rows",
+    "d1.edit.checkConstraint": "CHECK Constraint",
+    "d1.edit.fkTitle": "Add foreign key relationship to {table}",
+    "d1.edit.whatAreForeignKeys": "What are foreign keys?",
+    "d1.edit.selectReferenceTable": "Select a table to reference to",
+    "d1.edit.selectReferenceColumns": "Select columns from public.{table} to reference to",
+    "d1.edit.addAnotherColumn": "Add another column",
+    "d1.edit.whichAction": "Which action is most appropriate?",
+    "d1.edit.onUpdate": "Action if referenced row is updated",
+    "d1.edit.onDelete": "Action if referenced row is removed",
+    "d1.edit.fkActionHelpUpdate": "{action}: Updating a record from public.{table} will raise an error if there are records existing in this table that reference it",
+    "d1.edit.fkActionHelpDelete": "{action}: Deleting a record from public.{table} will raise an error if there are records existing in this table that reference it",
+    "d1.edit.actionNoAction": "No action",
+    "d1.edit.actionCascade": "Cascade",
+    "d1.edit.actionRestrict": "Restrict",
+    "d1.edit.actionSetNull": "Set NULL",
+    "d1.edit.actionSetDefault": "Set default",
+    "d1.edit.reviewTitle": "Review Schema Changes",
+    "d1.edit.reviewBody": "You are about to make critical changes to the schema of this column. Please review them below:",
+    "d1.edit.applyChanges": "Apply Changes",
+    "d1.edit.applying": "Applying...",
+    "d1.edit.toastSuccess": "Schema updated successfully.",
+    "d1.edit.toastError": "Error applying changes",
+    "d1.edit.noActiveAccount": "No active account selected.",
+    "d1.edit.queryFailed": "Query failed to execute successfully.",
+    "d1.edit.diffRenamed": "Renamed column from \"{from}\" to \"{to}\"",
+    "d1.edit.diffType": "Changed type from \"{from}\" to \"{to}\"",
+    "d1.edit.diffNullable": "Changed nullable from {from} to {to}",
+    "d1.edit.diffAddedPrimary": "Added Primary Key constraint",
+    "d1.edit.diffRemovedPrimary": "Removed Primary Key constraint",
+    "d1.edit.diffDefault": "Changed default value from \"{from}\" to \"{to}\"",
+    "d1.edit.diffAddedForeign": "Added Foreign Key referencing {table}.{column}",
+    "d1.edit.diffRemovedForeign": "Removed Foreign Key referencing {table}.{column}",
+    "d1.export.loading": "Loading...",
+    "d1.export.proTitle": "Pro Feature",
+    "d1.export.proBody": "Advanced Data Export is a Pro feature. Available in the official release.",
+    "d1.export.understood": "Understood",
+    "feature.unavailable": "Feature unavailable",
+    "feature.unavailableNamed": "{feature} is not included in this public fork yet.",
+    "feature.unavailableBody": "This feature is not included in this public fork yet.",
+    "feature.publicForkNoPro": "This public fork ships without the original private Pro module. Add your own implementation here when the workflow is worth keeping.",
+    "r2.title": "R2 Buckets",
+    "r2.subtitle": "Public fallback view for listing buckets and objects in this fork.",
+    "r2.loadingBuckets": "Loading buckets...",
+    "r2.noBuckets": "No R2 buckets found.",
+    "r2.selectBucket": "Select a bucket",
+    "r2.up": "Up",
+    "r2.loadingObjects": "Loading objects...",
+    "r2.noObjects": "No objects in this prefix.",
+    "r2.feature.upload": "File Upload",
+    "r2.feature.download": "File Download",
+    "r2.feature.createBucket": "Create Bucket",
+    "r2.feature.deleteBucket": "Delete Bucket",
+    "r2.feature.bucketSettings": "Bucket Settings",
+    "r2.proToastTitle": "Pro Feature - {label}",
+    "r2.proToastBody": "This feature is available in the official CF Studio Pro build.",
     "setup.title": "CF Studio Setup",
     "setup.subtitle": "Required tools for full functionality",
     "setup.checking": "Checking installed dependencies...",
@@ -80,6 +316,242 @@ const translations = {
     "common.soon": "即将支持",
     "common.comingSoon": "即将支持",
     "common.auditComingSoon": "审计视图即将支持",
+    "common.loading": "加载中...",
+    "common.refresh": "刷新",
+    "common.cancel": "取消",
+    "common.save": "保存",
+    "common.close": "关闭",
+    "common.apply": "应用",
+    "common.copy": "复制",
+    "common.copied": "已复制",
+    "common.error": "错误",
+    "common.success": "成功",
+    "common.optional": "可选",
+    "common.docs": "文档",
+    "common.pro": "Pro",
+    "common.all": "全部",
+    "common.custom": "自定义...",
+    "common.null": "NULL",
+    "common.empty": "空字符串",
+    "common.rows": "{count} 行",
+    "common.rowsSingular": "{count} 行",
+    "common.columns": "{count} 列",
+    "common.columnsSingular": "{count} 列",
+    "common.page": "第 {page} 页",
+    "common.previousPage": "上一页",
+    "common.nextPage": "下一页",
+    "common.selectAllRows": "选择全部行",
+    "common.selectRow": "选择第 {row} 行",
+    "common.notAvailable": "不可用",
+    "common.appearance": "外观",
+    "theme.light": "浅色",
+    "theme.dark": "深色",
+    "theme.system": "跟随系统",
+    "title.updateAvailable": "更新到 V{version}",
+    "title.updateError": "更新错误",
+    "title.expandSidebar": "展开侧边栏",
+    "title.collapseSidebar": "收起侧边栏",
+    "kv.title": "KV 命名空间",
+    "kv.subtitle": "这个公开 fork 暂未接入 KV 管理。",
+    "kv.body": "当前 fork 先保留 KV 占位，优先评估 D1 和 R2 的本地桌面工作流。",
+    "kv.badge": "本地 fork 占位",
+    "d1.title": "数据库",
+    "d1.subtitle": "当前 Cloudflare 账号下的 D1 数据库",
+    "d1.queryHistory": "查询历史",
+    "d1.queryHistoryPro": "查询历史（Pro）",
+    "d1.historyRequired": "需要历史功能",
+    "d1.historyRequiredDesc": "这个功能只在官方 CF Studio Pro 版本中可用。",
+    "d1.table.name": "名称",
+    "d1.table.id": "数据库 ID",
+    "d1.table.createdAt": "创建时间",
+    "d1.table.tables": "表",
+    "d1.table.size": "大小",
+    "d1.listFooter": "{count} 个数据库，点击任意行进入浏览",
+    "d1.listFooterSingular": "{count} 个数据库，点击该行进入浏览",
+    "d1.empty.noAuthTitle": "未找到 Wrangler 登录态",
+    "d1.empty.noAuthBody": "CF Studio 会读取本机 Wrangler 登录态来连接 Cloudflare。你可以在终端运行下面的命令，也可以点击按钮打开登录流程。登录完成后页面会自动刷新。",
+    "d1.empty.copyCommand": "复制命令",
+    "d1.empty.runCommand": "在后台运行命令",
+    "d1.empty.openingTerminal": "正在打开终端",
+    "d1.empty.openingTerminalDesc": "正在新终端窗口中启动 wrangler login...",
+    "d1.empty.launchFailed": "启动失败",
+    "d1.empty.noDatabasesTitle": "没有找到 D1 数据库",
+    "d1.empty.noDatabasesBody": "这个 Cloudflare 账号还没有 D1 数据库，可以用下面的命令创建：",
+    "d1.empty.notEnabledTitle": "Cloudflare D1 尚未启用",
+    "d1.empty.notEnabledBody": "这个账号看起来还没有启用 Cloudflare D1 Serverless SQL。创建数据库前需要先在 Dashboard 中启用。",
+    "d1.empty.enableD1": "启用 D1 SQL",
+    "d1.empty.apiErrorTitle": "加载数据库失败",
+    "d1.empty.unknownApiError": "发生未知 API 错误。",
+    "d1.toast.loginCopied": "登录命令已复制到剪贴板。",
+    "d1.back": "数据库",
+    "d1.sqlEditor": "SQL 编辑器",
+    "d1.visualSchema": "可视化结构",
+    "d1.indexes": "索引",
+    "d1.refreshSchema": "刷新结构",
+    "d1.tables": "数据表",
+    "d1.systemTables": "系统表（{count}）",
+    "d1.noTables": "没有找到数据表",
+    "d1.tab.data": "数据",
+    "d1.tab.schema": "结构",
+    "d1.selectTable": "选择数据表",
+    "d1.selectTableRows": "点击左侧表名浏览数据行",
+    "d1.selectTableSchema": "点击左侧表名查看 CREATE TABLE 语句",
+    "d1.noSchema": "没有可用结构",
+    "d1.noSchemaBody": "{table} 没有记录 CREATE TABLE 语句",
+    "d1.totalColumnsTooltip": "{table} 中共有 {count} 列",
+    "d1.rowsFetchedTooltip": "已获取 {count} 行",
+    "d1.exportAll": "导出全部",
+    "d1.exportRows": "导出 {count} 行",
+    "d1.queryFailed": "查询失败",
+    "d1.noRows": "没有找到数据行",
+    "d1.noRowsBody": "{table} 为空，或当前偏移量下没有匹配数据",
+    "d1.primaryKey": "主键",
+    "d1.references": "引用",
+    "d1.referencedBy": "被引用",
+    "d1.sortAscending": "升序排序",
+    "d1.sortDescending": "降序排序",
+    "d1.copyName": "复制名称",
+    "d1.editColumn": "编辑列",
+    "d1.deleteColumn": "删除列",
+    "d1.rowsRange": "第 {start}-{end} 行",
+    "d1.perPage": "每页",
+    "d1.customRowsPerPage": "自定义每页行数",
+    "d1.limitMax": "限制数量（最多 10000）",
+    "d1.applyLimit": "应用限制",
+    "d1.colShort": "列",
+    "d1.colsShort": "列",
+    "d1.query.runPrompt": "运行查询后查看结果",
+    "d1.query.executing": "正在执行...",
+    "d1.query.success": "查询执行成功",
+    "d1.query.rowsAffected": "影响 {count} 行",
+    "d1.query.rowAffected": "影响 {count} 行",
+    "d1.query.lastRowId": "最后行 ID：",
+    "d1.query.rowsReturned": "返回 {count} 行",
+    "d1.query.rowReturned": "返回 {count} 行",
+    "d1.query.rowsScanned": "扫描 {count} 行",
+    "d1.query.resultFooter": "{count} 行，显示 {start}-{end}",
+    "d1.query.resultFooterSingular": "{count} 行，显示 {start}-{end}",
+    "d1.query.clear": "清空",
+    "d1.query.analyzing": "分析中...",
+    "d1.query.running": "运行中...",
+    "d1.query.confirmExecution": "确认执行",
+    "d1.query.run": "运行",
+    "d1.query.tableNotFound": "数据库中不存在表 \"{table}\"。",
+    "d1.query.templateSelectAll": "查询全部",
+    "d1.query.templateListTables": "列出表",
+    "d1.query.templateTableSchema": "查看结构",
+    "d1.pragma.ncol": "表中的列数",
+    "d1.pragma.wr": "WITHOUT ROWID（1 表示 true，0 表示 false）",
+    "d1.pragma.strict": "STRICT 表（1 表示 true，0 表示 false）",
+    "d1.pragma.cid": "列 ID",
+    "d1.pragma.notnull": "NOT NULL 约束（1 表示 true，0 表示 false）",
+    "d1.pragma.dfltValue": "默认值",
+    "d1.pragma.pk": "主键（1 表示 true，0 表示 false）",
+    "d1.pragma.schema": "数据库 schema（通常是 main）",
+    "d1.pragma.type": "对象类型，例如 table、view、index",
+    "d1.intel.validation": "查询校验",
+    "d1.intel.confirmDestructive": "确认危险查询",
+    "d1.intel.destructiveDetected": "检测到危险操作",
+    "d1.intel.blindDetected": "检测到无条件操作",
+    "d1.intel.highCost": "高成本提醒",
+    "d1.intel.optimized": "查询已优化",
+    "d1.intel.intelligence": "查询分析",
+    "d1.intel.confirmBody": "注意：这条查询会修改数据。请双击下方运行按钮执行。",
+    "d1.intel.mutationBody": "检测到可能破坏数据的操作，执行前需要再次确认。",
+    "d1.intel.blindBody": "注意：这是没有过滤条件的操作。大表上可能消耗较高资源。",
+    "d1.intel.highCostBody": "这条查询会进行全表扫描，可以考虑添加索引。",
+    "d1.intel.optimizedBody": "这条查询能有效利用现有索引。",
+    "d1.intel.defaultBody": "成本分析完成，查询性能在可接受范围内。",
+    "d1.intel.createIndex": "创建索引",
+    "d1.schema.noColumns": "没有列",
+    "d1.schema.noTablesVisualize": "没有可视化的数据表",
+    "d1.schema.noTablesVisualizeBody": "在 D1 数据库中创建表后，可以在这里查看 ER 图",
+    "d1.edit.title": "更新 {table} 中的列 {column}",
+    "d1.edit.previewOnly": "列编辑目前只是预览功能，真实结构变更会在后续接入。",
+    "d1.edit.general": "通用",
+    "d1.edit.name": "名称",
+    "d1.edit.nameHelp": "建议使用小写字母，并用下划线分隔单词，例如 column_name",
+    "d1.edit.description": "描述",
+    "d1.edit.dataType": "数据类型",
+    "d1.edit.createEnum": "+ 创建枚举类型",
+    "d1.edit.aboutTypes": "关于数据类型",
+    "d1.edit.type": "类型",
+    "d1.edit.varcharTitle": "建议改用 text",
+    "d1.edit.varcharBody": "SQLite 不建议使用 varchar，除非你有非常明确的特殊需求。",
+    "d1.edit.readMore": "阅读更多",
+    "d1.edit.useText": "使用 text",
+    "d1.edit.defineArray": "定义为数组",
+    "d1.edit.defineArrayBody": "允许这一列定义为可变长度的多维数组",
+    "d1.edit.defaultValue": "默认值",
+    "d1.edit.defaultValueHelp": "可以是字面量或表达式。使用表达式时请用括号包裹，例如 (gen_random_uuid())",
+    "d1.edit.foreignKeys": "外键",
+    "d1.edit.addForeignKey": "添加外键",
+    "d1.edit.new": "新增",
+    "d1.edit.saved": "已保存",
+    "d1.edit.constraints": "约束",
+    "d1.edit.isPrimaryKey": "设为主键",
+    "d1.edit.primaryKeyHelp": "主键表示这一列或多列组合可以唯一标识表中的每一行",
+    "d1.edit.tableHasPrimaryKey": "表中已有主键：{column}",
+    "d1.edit.noPrimaryKeyWarning": "警告：这张表将不再有主键。",
+    "d1.edit.allowNullable": "允许为空",
+    "d1.edit.allowNullableHelp": "允许没有提供值时这一列为 NULL",
+    "d1.edit.isUnique": "唯一约束",
+    "d1.edit.isUniqueHelp": "要求这一列中的值在所有行中保持唯一",
+    "d1.edit.checkConstraint": "CHECK 约束",
+    "d1.edit.fkTitle": "给 {table} 添加外键关系",
+    "d1.edit.whatAreForeignKeys": "什么是外键？",
+    "d1.edit.selectReferenceTable": "选择要引用的数据表",
+    "d1.edit.selectReferenceColumns": "选择 public.{table} 中要建立引用的列",
+    "d1.edit.addAnotherColumn": "添加另一列",
+    "d1.edit.whichAction": "哪种动作最合适？",
+    "d1.edit.onUpdate": "被引用行更新时的动作",
+    "d1.edit.onDelete": "被引用行删除时的动作",
+    "d1.edit.fkActionHelpUpdate": "{action}：更新 public.{table} 中的记录时，如果当前表中仍有记录引用它，将抛出错误",
+    "d1.edit.fkActionHelpDelete": "{action}：删除 public.{table} 中的记录时，如果当前表中仍有记录引用它，将抛出错误",
+    "d1.edit.actionNoAction": "不执行动作",
+    "d1.edit.actionCascade": "级联",
+    "d1.edit.actionRestrict": "限制",
+    "d1.edit.actionSetNull": "设为 NULL",
+    "d1.edit.actionSetDefault": "设为默认值",
+    "d1.edit.reviewTitle": "确认结构变更",
+    "d1.edit.reviewBody": "你即将对这一列的结构进行关键变更，请先确认以下内容：",
+    "d1.edit.applyChanges": "应用变更",
+    "d1.edit.applying": "应用中...",
+    "d1.edit.toastSuccess": "结构已更新。",
+    "d1.edit.toastError": "应用变更失败",
+    "d1.edit.noActiveAccount": "未选择有效账号。",
+    "d1.edit.queryFailed": "查询没有成功执行。",
+    "d1.edit.diffRenamed": "将列名从 \"{from}\" 改为 \"{to}\"",
+    "d1.edit.diffType": "将类型从 \"{from}\" 改为 \"{to}\"",
+    "d1.edit.diffNullable": "将可空状态从 {from} 改为 {to}",
+    "d1.edit.diffAddedPrimary": "添加主键约束",
+    "d1.edit.diffRemovedPrimary": "移除主键约束",
+    "d1.edit.diffDefault": "将默认值从 \"{from}\" 改为 \"{to}\"",
+    "d1.edit.diffAddedForeign": "添加外键引用 {table}.{column}",
+    "d1.edit.diffRemovedForeign": "移除外键引用 {table}.{column}",
+    "d1.export.loading": "加载中...",
+    "d1.export.proTitle": "Pro 功能",
+    "d1.export.proBody": "高级数据导出是 Pro 功能，可在官方版本中使用。",
+    "d1.export.understood": "知道了",
+    "feature.unavailable": "功能不可用",
+    "feature.unavailableNamed": "{feature} 暂未包含在这个公开 fork 中。",
+    "feature.unavailableBody": "这个公开 fork 暂未包含该功能。",
+    "feature.publicForkNoPro": "这个公开 fork 不包含原项目的私有 Pro 模块。等这个工作流值得保留时，可以在这里加入自己的实现。",
+    "r2.title": "R2 存储桶",
+    "r2.subtitle": "这个公开 fork 中用于查看存储桶和对象的 fallback 页面。",
+    "r2.loadingBuckets": "正在加载存储桶...",
+    "r2.noBuckets": "没有找到 R2 存储桶。",
+    "r2.selectBucket": "选择一个存储桶",
+    "r2.up": "上一级",
+    "r2.loadingObjects": "正在加载对象...",
+    "r2.noObjects": "当前前缀下没有对象。",
+    "r2.feature.upload": "文件上传",
+    "r2.feature.download": "文件下载",
+    "r2.feature.createBucket": "创建存储桶",
+    "r2.feature.deleteBucket": "删除存储桶",
+    "r2.feature.bucketSettings": "存储桶设置",
+    "r2.proToastTitle": "Pro 功能 - {label}",
+    "r2.proToastBody": "这个功能可在官方 CF Studio Pro 版本中使用。",
     "setup.title": "CF Studio 设置",
     "setup.subtitle": "检查完整功能所需的本地工具",
     "setup.checking": "正在检查已安装的依赖...",
@@ -127,9 +599,15 @@ export function useI18n() {
   const language = useAppStore((state) => state.language);
   const setLanguage = useAppStore((state) => state.setLanguage);
 
+  const interpolate = (value: string, vars?: Record<string, string | number>) => {
+    if (!vars) return value;
+    return value.replace(/\{(\w+)\}/g, (_, key) => String(vars[key] ?? `{${key}}`));
+  };
+
   return {
     language,
     setLanguage,
-    t: (key: TranslationKey) => translations[language][key] ?? translations["en-US"][key] ?? key,
+    t: (key: TranslationKey, vars?: Record<string, string | number>) =>
+      interpolate(translations[language][key] ?? translations["en-US"][key] ?? key, vars),
   };
 }
diff --git a/src/pro_modules/frontend/ProFeatureGate.tsx b/src/pro_modules/frontend/ProFeatureGate.tsx
index e1373d9..fcc287c 100644
--- a/src/pro_modules/frontend/ProFeatureGate.tsx
+++ b/src/pro_modules/frontend/ProFeatureGate.tsx
@@ -1,5 +1,6 @@
 import { Dialog, DialogContent, DialogDescription, DialogTitle } from "@/components/ui/dialog";
 import { Button } from "@/components/ui/button";
+import { useI18n } from "@/lib/i18n";
 
 export function ProFeatureGate({
   isOpen,
@@ -10,14 +11,15 @@ export function ProFeatureGate({
   onClose: () => void;
   featureName?: string;
 }) {
+  const { t } = useI18n();
   return (
     <Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
       <DialogContent>
-        <DialogTitle>Feature unavailable</DialogTitle>
+        <DialogTitle>{t("feature.unavailable")}</DialogTitle>
         <DialogDescription>
-          {featureName ? `${featureName} is not included in this public fork yet.` : "This feature is not included in this public fork yet."}
+          {featureName ? t("feature.unavailableNamed", { feature: featureName }) : t("feature.unavailableBody")}
         </DialogDescription>
-        <Button onClick={onClose}>Close</Button>
+        <Button onClick={onClose}>{t("common.close")}</Button>
       </DialogContent>
     </Dialog>
   );
diff --git a/src/pro_modules/frontend/PurchaseScreen.tsx b/src/pro_modules/frontend/PurchaseScreen.tsx
index f20d0ec..9edae0c 100644
--- a/src/pro_modules/frontend/PurchaseScreen.tsx
+++ b/src/pro_modules/frontend/PurchaseScreen.tsx
@@ -1,15 +1,17 @@
 import { Dialog, DialogContent, DialogDescription, DialogTitle } from "@/components/ui/dialog";
 import { Button } from "@/components/ui/button";
+import { useI18n } from "@/lib/i18n";
 
 export function PurchaseScreen({ onClose }: { onClose: () => void }) {
+  const { t } = useI18n();
   return (
     <Dialog open onOpenChange={(open) => !open && onClose()}>
       <DialogContent>
-        <DialogTitle>Feature unavailable</DialogTitle>
+        <DialogTitle>{t("feature.unavailable")}</DialogTitle>
         <DialogDescription>
-          This public fork ships without the original private Pro module. Add your own implementation here when the workflow is worth keeping.
+          {t("feature.publicForkNoPro")}
         </DialogDescription>
-        <Button onClick={onClose}>Close</Button>
+        <Button onClick={onClose}>{t("common.close")}</Button>
       </DialogContent>
     </Dialog>
   );
diff --git a/src/pro_modules/frontend/R2BucketsView.tsx b/src/pro_modules/frontend/R2BucketsView.tsx
index d5cb07d..0063383 100644
--- a/src/pro_modules/frontend/R2BucketsView.tsx
+++ b/src/pro_modules/frontend/R2BucketsView.tsx
@@ -5,6 +5,7 @@ import { Badge } from "@/components/ui/badge";
 import { useR2Buckets } from "@/hooks/useCloudflare";
 import { deleteR2Object, listR2Objects, type FolderListing, type R2Bucket } from "@/lib/r2";
 import { cn, formatBytes } from "@/lib/utils";
+import { useI18n } from "@/lib/i18n";
 
 function BucketRow({
   bucket,
@@ -37,6 +38,7 @@ function BucketRow({
 }
 
 export function R2BucketsView() {
+  const { t } = useI18n();
   const { state, refresh } = useR2Buckets();
   const [selectedBucket, setSelectedBucket] = useState<R2Bucket | null>(null);
   const [prefix, setPrefix] = useState("");
@@ -93,9 +95,9 @@ export function R2BucketsView() {
     <div className="flex h-full flex-col gap-5">
       <div className="flex items-center justify-between gap-4">
         <div>
-          <h1 className="text-lg font-semibold tracking-tight text-foreground">R2 Buckets</h1>
+          <h1 className="text-lg font-semibold tracking-tight text-foreground">{t("r2.title")}</h1>
           <p className="mt-0.5 text-sm text-muted-foreground">
-            Public fallback view for listing buckets and objects in this fork.
+            {t("r2.subtitle")}
           </p>
         </div>
         <Button variant="ghost" size="icon" onClick={refresh} disabled={state.status === "loading"}>
@@ -105,10 +107,10 @@ export function R2BucketsView() {
 
       <div className="grid min-h-0 flex-1 grid-cols-[260px_1fr] overflow-hidden rounded-lg border border-border">
         <aside className="min-h-0 border-r border-border bg-muted/20 p-2">
-          {state.status === "loading" && <p className="p-3 text-sm text-muted-foreground">Loading buckets...</p>}
+          {state.status === "loading" && <p className="p-3 text-sm text-muted-foreground">{t("r2.loadingBuckets")}</p>}
           {state.status === "error" && <p className="p-3 text-sm text-destructive">{state.message}</p>}
           {state.status === "success" && buckets.length === 0 && (
-            <p className="p-3 text-sm text-muted-foreground">No R2 buckets found.</p>
+            <p className="p-3 text-sm text-muted-foreground">{t("r2.noBuckets")}</p>
           )}
           <div className="space-y-1">
             {buckets.map((bucket) => (
@@ -129,16 +131,16 @@ export function R2BucketsView() {
           <div className="sticky top-0 z-10 flex items-center justify-between border-b border-border bg-background/95 px-4 py-3">
             <div className="min-w-0">
               <p className="truncate text-sm font-semibold">
-                {selectedBucket?.name ?? "Select a bucket"}
+                {selectedBucket?.name ?? t("r2.selectBucket")}
               </p>
               <p className="truncate font-mono text-xs text-muted-foreground">/{prefix}</p>
             </div>
             <Button variant="outline" size="sm" onClick={goUp} disabled={!prefix}>
-              Up
+              {t("r2.up")}
             </Button>
           </div>
 
-          {objectsState === "loading" && <p className="p-4 text-sm text-muted-foreground">Loading objects...</p>}
+          {objectsState === "loading" && <p className="p-4 text-sm text-muted-foreground">{t("r2.loadingObjects")}</p>}
           {objectsState === "error" && <p className="p-4 text-sm text-destructive">{error}</p>}
           {objectsState === "idle" && selectedBucket && listing && (
             <div className="divide-y divide-border">
@@ -167,7 +169,7 @@ export function R2BucketsView() {
                 </div>
               ))}
               {listing.folders.length === 0 && listing.files.length === 0 && (
-                <p className="p-4 text-sm text-muted-foreground">No objects in this prefix.</p>
+                <p className="p-4 text-sm text-muted-foreground">{t("r2.noObjects")}</p>
               )}
             </div>
           )}

From 51948d6c928745497292edaa827a081b20ff7462 Mon Sep 17 00:00:00 2001
From: jackiexiao <707610215@qq.com>
Date: Mon, 25 May 2026 14:55:52 +0800
Subject: [PATCH 4/4] docs: clarify Chinese README link

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 6478efa..548052e 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
 # CF Studio
 
-中文说明见 [README.zh-CN.md](README.zh-CN.md).
+Simplified Chinese README: [README.zh-CN.md](README.zh-CN.md).
 
 A blazing-fast, native desktop client for Cloudflare D1 and R2.