feat: add internationalization (i18n) to web dashboard — English + Chinese (#9453)

Add a lightweight i18n system to the web dashboard with English (default) and
Chinese language support. A language switcher with flag icons is placed in the
header bar, allowing users to toggle between languages. The choice persists
to localStorage.

Implementation:
- src/i18n/ — types, translation files (en.ts, zh.ts), React context + hook
- LanguageSwitcher component shows the *other* language's flag as the toggle
- I18nProvider wraps the app in main.tsx
- All 8 pages + OAuth components updated to use t() translation calls
- Zero new dependencies — pure React context + localStorage

web/src/pages/LogsPage.tsx

@@ -1,19 +1,12 @@
 import { useEffect, useState, useCallback, useRef } from "react";
-import {
-  AlertTriangle,
-  Bug,
-  ChevronRight,
-  FileText,
-  Hash,
-  Layers,
-  RefreshCw,
-} from "lucide-react";
+import { FileText, RefreshCw } from "lucide-react";
 import { api } from "@/lib/api";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
 import { Switch } from "@/components/ui/switch";
 import { Label } from "@/components/ui/label";
+import { useI18n } from "@/i18n";
 
 const FILES = ["agent", "errors", "gateway"] as const;
 const LEVELS = ["ALL", "DEBUG", "INFO", "WARNING", "ERROR"] as const;
@@ -35,6 +28,37 @@ const LINE_COLORS: Record<string, string> = {
   debug: "text-muted-foreground/60",
 };
 
+function FilterBar<T extends string>({
+  label,
+  options,
+  value,
+  onChange,
+}: {
+  label: string;
+  options: readonly T[];
+  value: T;
+  onChange: (v: T) => void;
+}) {
+  return (
+    <div className="flex items-center gap-2 flex-wrap">
+      <span className="text-xs text-muted-foreground font-medium w-20 shrink-0">{label}</span>
+      <div className="flex gap-1 flex-wrap">
+        {options.map((opt) => (
+          <Button
+            key={opt}
+            variant={value === opt ? "default" : "outline"}
+            size="sm"
+            className="text-xs h-7 px-2.5"
+            onClick={() => onChange(opt)}
+          >
+            {opt}
+          </Button>
+        ))}
+      </div>
+    </div>
+  );
+}
+
 export default function LogsPage() {
   const [file, setFile] = useState<(typeof FILES)[number]>("agent");
   const [level, setLevel] = useState<(typeof LEVELS)[number]>("ALL");
@@ -45,6 +69,7 @@ export default function LogsPage() {
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const scrollRef = useRef<HTMLDivElement>(null);
+  const { t } = useI18n();
 
   const fetchLogs = useCallback(() => {
     setLoading(true);
@@ -53,6 +78,7 @@ export default function LogsPage() {
       .getLogs({ file, lines: lineCount, level, component })
       .then((resp) => {
         setLines(resp.lines);
+        // Auto-scroll to bottom
         setTimeout(() => {
           if (scrollRef.current) {
             scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
@@ -63,10 +89,12 @@ export default function LogsPage() {
       .finally(() => setLoading(false));
   }, [file, lineCount, level, component]);
 
+  // Initial load + refetch on filter change
   useEffect(() => {
     fetchLogs();
   }, [fetchLogs]);
 
+  // Auto-refresh polling
   useEffect(() => {
     if (!autoRefresh) return;
     const interval = setInterval(fetchLogs, 5000);
@@ -74,176 +102,76 @@ export default function LogsPage() {
   }, [autoRefresh, fetchLogs]);
 
   return (
-    <div className="flex flex-col gap-4">
-      {/* ═══════════════ Header ═══════════════ */}
-      <div className="flex items-center justify-between gap-4">
-        <div className="flex items-center gap-2">
-          <FileText className="h-4 w-4 text-muted-foreground" />
-          <span className="text-xs text-muted-foreground">
-            {file} / {level.toLowerCase()} / {component}
-          </span>
-          {loading && (
-            <div className="h-3.5 w-3.5 animate-spin rounded-full border-2 border-primary border-t-transparent" />
-          )}
-        </div>
-
-        <div className="flex items-center gap-3">
-          <div className="flex items-center gap-2">
-            <Switch checked={autoRefresh} onCheckedChange={setAutoRefresh} />
-            <Label className="text-xs">Auto-refresh</Label>
-            {autoRefresh && (
-              <Badge variant="success" className="text-[10px]">
-                <span className="mr-1 inline-block h-1.5 w-1.5 animate-pulse rounded-full bg-current" />
-                Live
-              </Badge>
-            )}
-          </div>
-          <Button variant="outline" size="sm" onClick={fetchLogs} className="text-xs h-7">
-            <RefreshCw className="h-3 w-3 mr-1" />
-            Refresh
-          </Button>
-        </div>
-      </div>
-
-      {/* ═══════════════ Sidebar + Content ═══════════════ */}
-      <div className="flex flex-col sm:flex-row gap-4" style={{ minHeight: "calc(100vh - 180px)" }}>
-        {/* ---- Sidebar ---- */}
-        <div className="sm:w-52 sm:shrink-0">
-          <div className="sm:sticky sm:top-[72px] flex flex-col gap-1">
-            {/* File section */}
-            <div className="flex sm:flex-col gap-1 overflow-x-auto sm:overflow-x-visible scrollbar-none pb-1 sm:pb-0">
-              <SidebarHeading icon={FileText} label="File" />
-              {FILES.map((f) => (
-                <SidebarItem
-                  key={f}
-                  label={f}
-                  active={file === f}
-                  indented
-                  onClick={() => setFile(f)}
+    <div className="flex flex-col gap-6">
+      <Card>
+        <CardHeader>
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-2">
+              <FileText className="h-5 w-5 text-muted-foreground" />
+              <CardTitle className="text-base">{t.logs.title}</CardTitle>
+              {loading && (
+                <div className="h-4 w-4 animate-spin rounded-full border-2 border-primary border-t-transparent" />
+              )}
+            </div>
+            <div className="flex items-center gap-3">
+              <div className="flex items-center gap-2">
+                <Switch
+                  checked={autoRefresh}
+                  onCheckedChange={setAutoRefresh}
                 />
-              ))}
-
-              <div className="hidden sm:block border-t border-border my-1" />
-
-              <SidebarHeading icon={AlertTriangle} label="Level" />
-              {LEVELS.map((l) => (
-                <SidebarItem
-                  key={l}
-                  label={l.toLowerCase()}
-                  active={level === l}
-                  indented
-                  onClick={() => setLevel(l)}
-                />
-              ))}
-
-              <div className="hidden sm:block border-t border-border my-1" />
-
-              <SidebarHeading icon={Layers} label="Component" />
-              {COMPONENTS.map((c) => (
-                <SidebarItem
-                  key={c}
-                  label={c}
-                  active={component === c}
-                  indented
-                  onClick={() => setComponent(c)}
-                />
-              ))}
-
-              <div className="hidden sm:block border-t border-border my-1" />
-
-              <SidebarHeading icon={Hash} label="Lines" />
-              {LINE_COUNTS.map((n) => (
-                <SidebarItem
-                  key={n}
-                  label={String(n)}
-                  active={lineCount === n}
-                  indented
-                  onClick={() => setLineCount(n)}
-                />
-              ))}
+                <Label className="text-xs">{t.logs.autoRefresh}</Label>
+                {autoRefresh && (
+                  <Badge variant="success" className="text-[10px]">
+                    <span className="mr-1 inline-block h-1.5 w-1.5 animate-pulse rounded-full bg-current" />
+                    {t.common.live}
+                  </Badge>
+                )}
+              </div>
+              <Button variant="outline" size="sm" onClick={fetchLogs} className="text-xs h-7">
+                <RefreshCw className="h-3 w-3 mr-1" />
+                {t.common.refresh}
+              </Button>
             </div>
           </div>
-        </div>
+        </CardHeader>
 
-        {/* ---- Content ---- */}
-        <div className="flex-1 min-w-0">
-          <Card>
-            <CardHeader className="py-3 px-4">
-              <div className="flex items-center justify-between">
-                <CardTitle className="text-sm flex items-center gap-2">
-                  <Bug className="h-4 w-4" />
-                  {file} logs
-                </CardTitle>
-                <Badge variant="secondary" className="text-[10px]">
-                  {lines.length} line{lines.length !== 1 ? "s" : ""}
-                </Badge>
-              </div>
-            </CardHeader>
-            <CardContent className="px-4 pb-4">
-              {error && (
-                <div className="bg-destructive/10 border border-destructive/20 p-3 mb-4">
-                  <p className="text-sm text-destructive">{error}</p>
+        <CardContent>
+          <div className="flex flex-col gap-3 mb-4">
+            <FilterBar label={t.logs.file} options={FILES} value={file} onChange={setFile} />
+            <FilterBar label={t.logs.level} options={LEVELS} value={level} onChange={setLevel} />
+            <FilterBar label={t.logs.component} options={COMPONENTS} value={component} onChange={setComponent} />
+            <FilterBar
+              label={t.logs.lines}
+              options={LINE_COUNTS.map(String) as unknown as readonly string[]}
+              value={String(lineCount)}
+              onChange={(v) => setLineCount(Number(v) as (typeof LINE_COUNTS)[number])}
+            />
+          </div>
+
+          {error && (
+            <div className="rounded-md bg-destructive/10 border border-destructive/20 p-3 mb-4">
+              <p className="text-sm text-destructive">{error}</p>
+            </div>
+          )}
+
+          <div
+            ref={scrollRef}
+            className="border border-border bg-background p-4 font-mono-ui text-xs leading-5 overflow-auto max-h-[600px] min-h-[200px]"
+          >
+            {lines.length === 0 && !loading && (
+              <p className="text-muted-foreground text-center py-8">{t.logs.noLogLines}</p>
+            )}
+            {lines.map((line, i) => {
+              const cls = classifyLine(line);
+              return (
+                <div key={i} className={`${LINE_COLORS[cls]} hover:bg-secondary/20 px-1 -mx-1 rounded`}>
+                  {line}
                 </div>
-              )}
-
-              <div
-                ref={scrollRef}
-                className="border border-border bg-background p-4 font-mono-ui text-xs leading-5 overflow-auto max-h-[600px] min-h-[200px]"
-              >
-                {lines.length === 0 && !loading && (
-                  <p className="text-muted-foreground text-center py-8">No log lines found</p>
-                )}
-                {lines.map((line, i) => {
-                  const cls = classifyLine(line);
-                  return (
-                    <div key={i} className={`${LINE_COLORS[cls]} hover:bg-secondary/20 px-1 -mx-1`}>
-                      {line}
-                    </div>
-                  );
-                })}
-              </div>
-            </CardContent>
-          </Card>
-        </div>
-      </div>
+              );
+            })}
+          </div>
+        </CardContent>
+      </Card>
     </div>
   );
 }
-
-function SidebarHeading({ icon: Icon, label }: SidebarHeadingProps) {
-  return (
-    <div className="flex items-center gap-2 px-2.5 py-1 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground/60">
-      <Icon className="h-3.5 w-3.5" />
-      {label}
-    </div>
-  );
-}
-
-function SidebarItem({ label, active, indented, onClick }: SidebarItemProps) {
-  return (
-    <button
-      type="button"
-      onClick={onClick}
-      className={`group flex items-center gap-2 ${indented ? "sm:pl-6" : ""} px-2.5 py-1.5 text-left text-xs transition-colors cursor-pointer ${
-        active
-          ? "bg-primary/10 text-primary font-medium"
-          : "text-muted-foreground hover:text-foreground hover:bg-muted/50"
-      }`}
-    >
-      <span className="flex-1 truncate">{label}</span>
-      {active && <ChevronRight className="h-3 w-3 text-primary/50 shrink-0" />}
-    </button>
-  );
-}
-
-interface SidebarHeadingProps {
-  icon: React.ComponentType<{ className?: string }>;
-  label: string;
-}
-
-interface SidebarItemProps {
-  label: string;
-  active: boolean;
-  indented?: boolean;
-  onClick: () => void;
-}