feat: add Chinese (简体中文) i18n support

app/src/App.tsx

@@ -19,6 +19,7 @@ import PersistRehydrationScreen from './components/PersistRehydrationScreen';
 import GlobalUpsellBanner from './components/upsell/GlobalUpsellBanner';
 import AppWalkthrough from './components/walkthrough/AppWalkthrough';
 import { MascotFrameProducer } from './features/meet/MascotFrameProducer';
+import { I18nProvider } from './lib/i18n/I18nContext';
 // [#1123] Commented out — welcome-agent onboarding replaced by Joyride walkthrough
 // import { isWelcomeLocked } from './lib/coreState/store';
 import { startNativeNotificationsService } from './lib/nativeNotifications';
@@ -51,24 +52,26 @@ function App() {
       )}>
       <Provider store={store}>
         <PersistGate loading={<PersistRehydrationScreen />} persistor={persistor}>
-          <BootCheckGate>
-            <CoreStateProvider>
-              <SocketProvider>
-                <ChatRuntimeProvider>
-                  <Router>
-                    <CommandProvider>
-                      <ServiceBlockingGate>
-                        <AppShell />
-                        <DictationHotkeyManager />
-                        <LocalAIDownloadSnackbar />
-                        <AppUpdatePrompt />
-                      </ServiceBlockingGate>
-                    </CommandProvider>
-                  </Router>
-                </ChatRuntimeProvider>
-              </SocketProvider>
-            </CoreStateProvider>
-          </BootCheckGate>
+          <I18nProvider>
+            <BootCheckGate>
+              <CoreStateProvider>
+                <SocketProvider>
+                  <ChatRuntimeProvider>
+                    <Router>
+                      <CommandProvider>
+                        <ServiceBlockingGate>
+                          <AppShell />
+                          <DictationHotkeyManager />
+                          <LocalAIDownloadSnackbar />
+                          <AppUpdatePrompt />
+                        </ServiceBlockingGate>
+                      </CommandProvider>
+                    </Router>
+                  </ChatRuntimeProvider>
+                </SocketProvider>
+              </CoreStateProvider>
+            </BootCheckGate>
+          </I18nProvider>
         </PersistGate>
       </Provider>
     </Sentry.ErrorBoundary>

app/src/components/BottomTabBar.tsx

@@ -1,17 +1,18 @@
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
 
+import { useT } from '../lib/i18n/I18nContext';
 // [#1123] Commented out — welcome-agent onboarding replaced by Joyride walkthrough
 // import { isWelcomeLocked } from '../lib/coreState/store';
 import { useCoreState } from '../providers/CoreStateProvider';
 import { useAppSelector } from '../store/hooks';
 import { selectUnreadCount } from '../store/notificationSlice';
 import { isAccountsFullscreen } from '../utils/accountsFullscreen';
 
-const tabs = [
+const makeTabs = (t: (key: string) => string) => [
   {
     id: 'home',
-    label: 'Home',
+    label: t('nav.home'),
     path: '/home',
     icon: (
       <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -26,7 +27,7 @@ const tabs = [
   },
   {
     id: 'human',
-    label: 'Human',
+    label: t('nav.human'),
     path: '/human',
     icon: (
       <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -41,7 +42,7 @@ const tabs = [
   },
   {
     id: 'chat',
-    label: 'Chat',
+    label: t('nav.chat'),
     path: '/chat',
     icon: (
       <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -56,7 +57,7 @@ const tabs = [
   },
   {
     id: 'skills',
-    label: 'Connections',
+    label: t('nav.connections'),
     path: '/skills',
     icon: (
       <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -71,7 +72,7 @@ const tabs = [
   },
   {
     id: 'intelligence',
-    label: 'Memory',
+    label: t('nav.memory'),
     path: '/intelligence',
     icon: (
       <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -86,7 +87,7 @@ const tabs = [
   },
   {
     id: 'notifications',
-    label: 'Alerts',
+    label: t('nav.alerts'),
     path: '/notifications',
     icon: (
       <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -101,7 +102,7 @@ const tabs = [
   },
   {
     id: 'rewards',
-    label: 'Rewards',
+    label: t('nav.rewards'),
     path: '/rewards',
     icon: (
       <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -116,7 +117,7 @@ const tabs = [
   },
   {
     id: 'settings',
-    label: 'Settings',
+    label: t('nav.settings'),
     path: '/settings',
     icon: (
       <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -138,6 +139,8 @@ const tabs = [
 ];
 
 const BottomTabBar = () => {
+  const { t } = useT();
+  const tabs = useMemo(() => makeTabs(t), [t]);
   const location = useLocation();
   const navigate = useNavigate();
   const { snapshot } = useCoreState();
@@ -230,7 +233,7 @@ const BottomTabBar = () => {
                 }`}
                 aria-label={
                   tab.id === 'notifications' && unreadCount > 0
-                    ? `${tab.label} (${unreadCount} unread)`
+                    ? `${tab.label} (${unreadCount} ${t('alerts.unread')})`
                     : tab.label
                 }>
                 <span className="relative inline-flex flex-shrink-0">

app/src/components/channels/ChannelSetupModal.tsx

@@ -5,6 +5,7 @@
 import { useEffect, useRef } from 'react';
 import { createPortal } from 'react-dom';
 
+import { useT } from '../../lib/i18n/I18nContext';
 import type { ChannelDefinition, ChannelType } from '../../types/channels';
 import DiscordConfig from './DiscordConfig';
 import TelegramConfig from './TelegramConfig';
@@ -21,6 +22,7 @@ interface ChannelSetupModalProps {
 }
 
 function ChannelConfigContent({ definition }: { definition: ChannelDefinition }) {
+  const { t } = useT();
   const channelId = definition.id as ChannelType;
   switch (channelId) {
     case 'telegram':
@@ -30,13 +32,14 @@ function ChannelConfigContent({ definition }: { definition: ChannelDefinition })
     default:
       return (
         <p className="text-sm text-stone-400 py-4">
-          Configuration for {definition.display_name} is not available yet.
+          {t('channels.configNotAvailable')} {definition.display_name}
         </p>
       );
   }
 }
 
 export default function ChannelSetupModal({ definition, onClose }: ChannelSetupModalProps) {
+  const { t } = useT();
   const modalRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
@@ -88,7 +91,7 @@ export default function ChannelSetupModal({ definition, onClose }: ChannelSetupM
                   {definition.display_name}
                 </h2>
                 <span className="px-1.5 py-0.5 text-[10px] font-medium rounded-md bg-primary-500/15 text-primary-600">
-                  channel
+                  {t('channels.channel')}
                 </span>
               </div>
               <p className="text-xs text-stone-500 mt-1.5">{definition.description}</p>

app/src/components/chat/TokenUsagePill.tsx

@@ -1,4 +1,5 @@
 import { useUsageState } from '../../hooks/useUsageState';
+import { useT } from '../../lib/i18n/I18nContext';
 import { useAppSelector } from '../../store/hooks';
 import { BILLING_DASHBOARD_URL } from '../../utils/links';
 import { openUrl } from '../../utils/openUrl';
@@ -42,6 +43,7 @@ function severityFromPct(pct: number): PillSeverity {
 }
 
 const TokenUsagePill = () => {
+  const { t } = useT();
   const sessionTokens = useAppSelector(state => state.chatRuntime.sessionTokenUsage);
   const { usagePct10h, usagePct7d, isAtLimit, isNearLimit, currentTier, teamUsage } =
     useUsageState();
@@ -54,9 +56,9 @@ const TokenUsagePill = () => {
   const showPlanPill = teamUsage !== null;
 
   const planTitle = (() => {
-    if (isAtLimit) return 'Usage limit reached — click to top up';
-    if (isNearLimit) return 'Approaching usage limit';
-    return `${currentTier.toLowerCase()} plan — click for details`;
+    if (isAtLimit) return t('token.usageLimitReached');
+    if (isNearLimit) return t('token.approachingLimit');
+    return `${currentTier.toLowerCase()} ${t('token.planClickForDetails')}`;
   })();
 
   if (!showSessionCounter && !showPlanPill) return null;
@@ -66,7 +68,10 @@ const TokenUsagePill = () => {
       {showSessionCounter ? (
         <span
           className="inline-flex items-center gap-1 rounded-full bg-stone-100 px-2 py-1 font-mono text-stone-600 ring-1 ring-stone-200/60"
-          title={`Session tokens: ${sessionTokens.inputTokens.toLocaleString()} in / ${sessionTokens.outputTokens.toLocaleString()} out across ${sessionTokens.turns} turn(s)`}>
+          title={t('token.sessionTokens')
+            .replace('{in}', sessionTokens.inputTokens.toLocaleString())
+            .replace('{out}', sessionTokens.outputTokens.toLocaleString())
+            .replace('{turns}', String(sessionTokens.turns))}>
           <svg className="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
             <path
               strokeLinecap="round"
@@ -86,7 +91,7 @@ const TokenUsagePill = () => {
           }}
           title={planTitle}
           className={`inline-flex items-center gap-1 rounded-full px-2 py-1 font-medium ring-1 transition-colors ${planSeverity.bg} ${planSeverity.text} ${planSeverity.ring} hover:opacity-80`}>
-          {isAtLimit ? 'Limit' : planSeverity.label}
+          {isAtLimit ? t('token.limit') : planSeverity.label}
         </button>
       ) : null}
     </div>

app/src/components/intelligence/ActionableCard.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 
+import { useT } from '../../lib/i18n/I18nContext';
 import type { ActionableItem, SnoozeOption } from '../../types/intelligence';
 
 interface ActionableCardProps {
@@ -207,6 +208,7 @@ export function ActionableCard({
   onSnooze,
   className = '',
 }: ActionableCardProps) {
+  const { t } = useT();
   const [showSnoozeMenu, setShowSnoozeMenu] = useState(false);
   const [isAnimatingOut, setIsAnimatingOut] = useState(false);
   const snoozeButtonRef = useRef<HTMLButtonElement>(null);
@@ -284,7 +286,7 @@ export function ActionableCard({
                 <button
                   onClick={handleComplete}
                   className="w-6 h-6 flex items-center justify-center rounded-md text-stone-400 hover:text-sage-400 hover:bg-sage-400/10 transition-all duration-150"
-                  title="Complete">
+                  title={t('actionable.complete')}>
                   <svg
                     className="w-3.5 h-3.5"
                     fill="none"
@@ -303,7 +305,7 @@ export function ActionableCard({
                 <button
                   onClick={handleDismiss}
                   className="w-6 h-6 flex items-center justify-center rounded-md text-stone-400 hover:text-coral-400 hover:bg-coral-400/10 transition-all duration-150"
-                  title="Dismiss">
+                  title={t('actionable.dismiss')}>
                   <svg
                     className="w-3.5 h-3.5"
                     fill="none"
@@ -324,7 +326,7 @@ export function ActionableCard({
                     ref={snoozeButtonRef}
                     onClick={() => setShowSnoozeMenu(!showSnoozeMenu)}
                     className="w-6 h-6 flex items-center justify-center rounded-md text-stone-400 hover:text-amber-400 hover:bg-amber-400/10 transition-all duration-150"
-                    title="Snooze">
+                    title={t('actionable.snooze')}>
                     <svg
                       className="w-3.5 h-3.5"
                       fill="none"
@@ -354,7 +356,7 @@ export function ActionableCard({
                 <>
                   <span className="text-xs text-stone-600">•</span>
                   <span className="text-xs bg-sage-500 text-white px-1.5 py-0.5 rounded-sm font-medium">
-                    New
+                    {t('actionable.new')}
                   </span>
                 </>
               )}

app/src/components/intelligence/BackendChooser.tsx

@@ -1,5 +1,6 @@
 import { useState } from 'react';
 
+import { useT } from '../../lib/i18n/I18nContext';
 import type { Backend } from '../../lib/intelligence/settingsApi';
 
 interface BackendChooserProps {
@@ -28,13 +29,17 @@ export default function BackendChooser({
   costEstimate = '$0.42 / mo est.',
   busy = false,
 }: BackendChooserProps) {
+  const { t } = useT();
   const [hoveredCloud, setHoveredCloud] = useState(false);
 
   const cardBase =
     'flex-1 min-h-[160px] px-6 py-5 rounded-2xl text-left transition-all duration-150 disabled:opacity-50 disabled:cursor-not-allowed';
 
   return (
-    <div className="flex gap-4 flex-col sm:flex-row" role="radiogroup" aria-label="AI backend">
+    <div
+      className="flex gap-4 flex-col sm:flex-row"
+      role="radiogroup"
+      aria-label={t('backend.aiBackend')}>
       {/* Cloud */}
       <button
         type="button"
@@ -54,14 +59,14 @@ export default function BackendChooser({
         <div className="flex items-center justify-between mb-3">
           <div className="flex items-center gap-2">
             <RadioDot active={value === 'cloud'} />
-            <span className="text-sm font-semibold text-stone-900">Cloud</span>
+            <span className="text-sm font-semibold text-stone-900">{t('backend.cloud')}</span>
             <span className="text-[10px] uppercase tracking-wider px-1.5 py-0.5 rounded-full bg-primary-50 text-primary-700 border border-primary-100">
-              Recommended
+              {t('backend.recommended')}
             </span>
           </div>
         </div>
         <p className="text-xs text-stone-600 leading-relaxed mb-3">
-          Runs on OpenHuman servers. Costs credits. No local CPU.
+          {t('backend.cloudDescription')}
         </p>
         <div className="font-mono text-[11px] text-stone-500">{costEstimate}</div>
         {/* Privacy reassurance — appears on hover/focus of the Cloud card. */}
@@ -70,7 +75,7 @@ export default function BackendChooser({
             hoveredCloud ? 'opacity-100' : 'opacity-0'
           }`}
           aria-live="polite">
-          Your data still stays local. bge-m3 embedder runs on your machine regardless.
+          {t('backend.privacyNote')}
         </div>
       </button>
 
@@ -89,14 +94,14 @@ export default function BackendChooser({
         <div className="flex items-center justify-between mb-3">
           <div className="flex items-center gap-2">
             <RadioDot active={value === 'local'} />
-            <span className="text-sm font-semibold text-stone-900">Local</span>
+            <span className="text-sm font-semibold text-stone-900">{t('backend.local')}</span>
             <span className="text-[10px] uppercase tracking-wider px-1.5 py-0.5 rounded-full bg-stone-100 text-stone-600 border border-stone-200">
-              Advanced
+              {t('backend.advanced')}
             </span>
           </div>
         </div>
         <p className="text-xs text-stone-600 leading-relaxed mb-3">
-          Runs on your machine. Free. Uses your CPU and battery.
+          {t('backend.localDescription')}
         </p>
         <div className="flex items-center gap-1.5 text-[11px] text-amber-700">
           <svg
@@ -111,7 +116,7 @@ export default function BackendChooser({
               d="M12 9v3.75m0 3.75h.008v.008H12v-.008zM21 12a9 9 0 11-18 0 9 9 0 0118 0z"
             />
           </svg>
-          <span>≥8 GB RAM recommended</span>
+          <span>{t('backend.ramRecommended')}</span>
         </div>
       </button>
     </div>