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/StatusPage.tsx

@@ -14,37 +14,12 @@ import type { PlatformStatus, SessionInfo, StatusResponse } from "@/lib/api";
 import { timeAgo, isoTimeAgo } from "@/lib/utils";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Badge } from "@/components/ui/badge";
-
-const PLATFORM_STATE_BADGE: Record<string, { variant: "success" | "warning" | "destructive"; label: string }> = {
-  connected: { variant: "success", label: "Connected" },
-  disconnected: { variant: "warning", label: "Disconnected" },
-  fatal: { variant: "destructive", label: "Error" },
-};
-
-const GATEWAY_STATE_DISPLAY: Record<string, { badge: "success" | "warning" | "destructive" | "outline"; label: string }> = {
-  running: { badge: "success", label: "Running" },
-  starting: { badge: "warning", label: "Starting" },
-  startup_failed: { badge: "destructive", label: "Failed" },
-  stopped: { badge: "outline", label: "Stopped" },
-};
-
-function gatewayValue(status: StatusResponse): string {
-  if (status.gateway_running) return `PID ${status.gateway_pid}`;
-  if (status.gateway_state === "startup_failed") return "Start failed";
-  return "Not running";
-}
-
-function gatewayBadge(status: StatusResponse) {
-  const info = status.gateway_state ? GATEWAY_STATE_DISPLAY[status.gateway_state] : null;
-  if (info) return info;
-  return status.gateway_running
-    ? { badge: "success" as const, label: "Running" }
-    : { badge: "outline" as const, label: "Off" };
-}
+import { useI18n } from "@/i18n";
 
 export default function StatusPage() {
   const [status, setStatus] = useState<StatusResponse | null>(null);
   const [sessions, setSessions] = useState<SessionInfo[]>([]);
+  const { t } = useI18n();
 
   useEffect(() => {
     const load = () => {
@@ -64,28 +39,55 @@ export default function StatusPage() {
     );
   }
 
-  const gwBadge = gatewayBadge(status);
+  const PLATFORM_STATE_BADGE: Record<string, { variant: "success" | "warning" | "destructive"; label: string }> = {
+    connected: { variant: "success", label: t.status.connected },
+    disconnected: { variant: "warning", label: t.status.disconnected },
+    fatal: { variant: "destructive", label: t.status.error },
+  };
+
+  const GATEWAY_STATE_DISPLAY: Record<string, { badge: "success" | "warning" | "destructive" | "outline"; label: string }> = {
+    running: { badge: "success", label: t.status.running },
+    starting: { badge: "warning", label: t.status.starting },
+    startup_failed: { badge: "destructive", label: t.status.failed },
+    stopped: { badge: "outline", label: t.status.stopped },
+  };
+
+  function gatewayValue(): string {
+    if (status!.gateway_running) return `${t.status.pid} ${status!.gateway_pid}`;
+    if (status!.gateway_state === "startup_failed") return t.status.startFailed;
+    return t.status.notRunning;
+  }
+
+  function gatewayBadge() {
+    const info = status!.gateway_state ? GATEWAY_STATE_DISPLAY[status!.gateway_state] : null;
+    if (info) return info;
+    return status!.gateway_running
+      ? { badge: "success" as const, label: t.status.running }
+      : { badge: "outline" as const, label: t.common.off };
+  }
+
+  const gwBadge = gatewayBadge();
 
   const items = [
     {
       icon: Cpu,
-      label: "Agent",
+      label: t.status.agent,
       value: `v${status.version}`,
-      badgeText: "Live",
+      badgeText: t.common.live,
       badgeVariant: "success" as const,
     },
     {
       icon: Radio,
-      label: "Gateway",
-      value: gatewayValue(status),
+      label: t.status.gateway,
+      value: gatewayValue(),
       badgeText: gwBadge.label,
       badgeVariant: gwBadge.badge,
     },
     {
       icon: Activity,
-      label: "Active Sessions",
-      value: status.active_sessions > 0 ? `${status.active_sessions} running` : "None",
-      badgeText: status.active_sessions > 0 ? "Live" : "Off",
+      label: t.status.activeSessions,
+      value: status.active_sessions > 0 ? `${status.active_sessions} ${t.status.running.toLowerCase()}` : t.status.noneRunning,
+      badgeText: status.active_sessions > 0 ? t.common.live : t.common.off,
       badgeVariant: (status.active_sessions > 0 ? "success" : "outline") as "success" | "outline",
     },
   ];
@@ -98,19 +100,19 @@ export default function StatusPage() {
   const alerts: { message: string; detail?: string }[] = [];
   if (status.gateway_state === "startup_failed") {
     alerts.push({
-      message: "Gateway failed to start",
+      message: t.status.gatewayFailedToStart,
       detail: status.gateway_exit_reason ?? undefined,
     });
   }
   const failedPlatforms = platforms.filter(([, info]) => info.state === "fatal" || info.state === "disconnected");
   for (const [name, info] of failedPlatforms) {
+    const stateLabel = info.state === "fatal" ? t.status.platformError : t.status.platformDisconnected;
     alerts.push({
-      message: `${name.charAt(0).toUpperCase() + name.slice(1)} ${info.state === "fatal" ? "error" : "disconnected"}`,
+      message: `${name.charAt(0).toUpperCase() + name.slice(1)} ${stateLabel}`,
       detail: info.error_message ?? undefined,
     });
   }
 
-
   return (
     <div className="flex flex-col gap-6">
       {/* Alert banner — breaks grid monotony for critical states */}
@@ -157,7 +159,7 @@ export default function StatusPage() {
       </div>
 
       {platforms.length > 0 && (
-        <PlatformsCard platforms={platforms} />
+        <PlatformsCard platforms={platforms} platformStateBadge={PLATFORM_STATE_BADGE} />
       )}
 
       {activeSessions.length > 0 && (
@@ -165,7 +167,7 @@ export default function StatusPage() {
           <CardHeader>
             <div className="flex items-center gap-2">
               <Activity className="h-5 w-5 text-success" />
-              <CardTitle className="text-base">Active Sessions</CardTitle>
+              <CardTitle className="text-base">{t.status.activeSessions}</CardTitle>
             </div>
           </CardHeader>
 
@@ -177,16 +179,16 @@ export default function StatusPage() {
               >
                 <div className="flex flex-col gap-1 min-w-0 w-full">
                   <div className="flex items-center gap-2">
-                    <span className="font-medium text-sm truncate">{s.title ?? "Untitled"}</span>
+                    <span className="font-medium text-sm truncate">{s.title ?? t.common.untitled}</span>
 
                     <Badge variant="success" className="text-[10px] shrink-0">
                       <span className="mr-1 inline-block h-1.5 w-1.5 animate-pulse rounded-full bg-current" />
-                      Live
+                      {t.common.live}
                     </Badge>
                   </div>
 
                   <span className="text-xs text-muted-foreground truncate">
-                    <span className="font-mono-ui">{(s.model ?? "unknown").split("/").pop()}</span> · {s.message_count} msgs · {timeAgo(s.last_active)}
+                    <span className="font-mono-ui">{(s.model ?? t.common.unknown).split("/").pop()}</span> · {s.message_count} {t.common.msgs} · {timeAgo(s.last_active)}
                   </span>
                 </div>
               </div>
@@ -200,7 +202,7 @@ export default function StatusPage() {
           <CardHeader>
             <div className="flex items-center gap-2">
               <Clock className="h-5 w-5 text-muted-foreground" />
-              <CardTitle className="text-base">Recent Sessions</CardTitle>
+              <CardTitle className="text-base">{t.status.recentSessions}</CardTitle>
             </div>
           </CardHeader>
 
@@ -211,10 +213,10 @@ export default function StatusPage() {
                 className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-2 border border-border p-3 w-full"
               >
                 <div className="flex flex-col gap-1 min-w-0 w-full">
-                  <span className="font-medium text-sm truncate">{s.title ?? "Untitled"}</span>
+                  <span className="font-medium text-sm truncate">{s.title ?? t.common.untitled}</span>
 
                   <span className="text-xs text-muted-foreground truncate">
-                    <span className="font-mono-ui">{(s.model ?? "unknown").split("/").pop()}</span> · {s.message_count} msgs · {timeAgo(s.last_active)}
+                    <span className="font-mono-ui">{(s.model ?? t.common.unknown).split("/").pop()}</span> · {s.message_count} {t.common.msgs} · {timeAgo(s.last_active)}
                   </span>
 
                   {s.preview && (
@@ -237,19 +239,21 @@ export default function StatusPage() {
   );
 }
 
-function PlatformsCard({ platforms }: PlatformsCardProps) {
+function PlatformsCard({ platforms, platformStateBadge }: PlatformsCardProps) {
+  const { t } = useI18n();
+
   return (
     <Card>
       <CardHeader>
         <div className="flex items-center gap-2">
           <Radio className="h-5 w-5 text-muted-foreground" />
-          <CardTitle className="text-base">Connected Platforms</CardTitle>
+          <CardTitle className="text-base">{t.status.connectedPlatforms}</CardTitle>
         </div>
       </CardHeader>
 
       <CardContent className="grid gap-3">
         {platforms.map(([name, info]) => {
-          const display = PLATFORM_STATE_BADGE[info.state] ?? {
+          const display = platformStateBadge[info.state] ?? {
             variant: "outline" as const,
             label: info.state,
           };
@@ -278,7 +282,7 @@ function PlatformsCard({ platforms }: PlatformsCardProps) {
 
                   {info.updated_at && (
                     <span className="text-xs text-muted-foreground">
-                      Last update: {isoTimeAgo(info.updated_at)}
+                      {t.status.lastUpdate}: {isoTimeAgo(info.updated_at)}
                     </span>
                   )}
                 </div>
@@ -300,4 +304,5 @@ function PlatformsCard({ platforms }: PlatformsCardProps) {
 
 interface PlatformsCardProps {
   platforms: [string, PlatformStatus][];
+  platformStateBadge: Record<string, { variant: "success" | "warning" | "destructive"; label: string }>;
 }