feat(app): i18n (#48)

src/pages/Setup/index.tsx

@@ -5,12 +5,12 @@
 import { useState, useEffect, useCallback, useRef, useMemo } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { motion, AnimatePresence } from 'framer-motion';
-import { 
-  Check, 
+import {
+  Check,
   ChevronDown,
-  ChevronLeft, 
-  ChevronRight, 
-  Loader2, 
+  ChevronLeft,
+  ChevronRight,
+  Loader2,
   AlertCircle,
   Eye,
   EyeOff,
@@ -26,6 +26,8 @@ import { Label } from '@/components/ui/label';
 import { cn } from '@/lib/utils';
 import { useGatewayStore } from '@/stores/gateway';
 import { useSettingsStore } from '@/stores/settings';
+import { useTranslation } from 'react-i18next';
+import { SUPPORTED_LANGUAGES } from '@/i18n';
 import { toast } from 'sonner';
 import {
   CHANNEL_META,
@@ -107,9 +109,10 @@ const providers = SETUP_PROVIDERS;
 // NOTE: Skill bundles moved to Settings > Skills page - auto-install essential skills during setup
 
 export function Setup() {
+  const { t } = useTranslation(['setup', 'channels']);
   const navigate = useNavigate();
   const [currentStep, setCurrentStep] = useState<number>(STEP.WELCOME);
-  
+
   // Setup state
   const [selectedProvider, setSelectedProvider] = useState<string | null>(null);
   const [providerConfigured, setProviderConfigured] = useState(false);
@@ -118,16 +121,16 @@ export function Setup() {
   const [installedSkills, setInstalledSkills] = useState<string[]>([]);
   // Runtime check status
   const [runtimeChecksPassed, setRuntimeChecksPassed] = useState(false);
-  
+
   const safeStepIndex = Number.isInteger(currentStep)
     ? Math.min(Math.max(currentStep, STEP.WELCOME), steps.length - 1)
     : STEP.WELCOME;
   const step = steps[safeStepIndex] ?? steps[STEP.WELCOME];
   const isFirstStep = safeStepIndex === STEP.WELCOME;
   const isLastStep = safeStepIndex === steps.length - 1;
-  
+
   const markSetupComplete = useSettingsStore((state) => state.markSetupComplete);
-  
+
   // Derive canProceed based on current step - computed directly to avoid useEffect
   const canProceed = useMemo(() => {
     switch (safeStepIndex) {
@@ -147,27 +150,27 @@ export function Setup() {
         return true;
     }
   }, [safeStepIndex, providerConfigured, runtimeChecksPassed]);
-  
+
   const handleNext = async () => {
     if (isLastStep) {
       // Complete setup
       markSetupComplete();
-      toast.success('Setup complete! Welcome to ClawX');
+      toast.success(t('complete.title'));
       navigate('/');
     } else {
       setCurrentStep((i) => i + 1);
     }
   };
-  
+
   const handleBack = () => {
     setCurrentStep((i) => Math.max(i - 1, 0));
   };
-  
+
   const handleSkip = () => {
     markSetupComplete();
     navigate('/');
   };
-  
+
   // Auto-proceed when installation is complete
   const handleInstallationComplete = useCallback((skills: string[]) => {
     setInstalledSkills(skills);
@@ -176,7 +179,8 @@ export function Setup() {
       setCurrentStep((i) => i + 1);
     }, 1000);
   }, []);
-  
+
+
   return (
     <div className="min-h-screen bg-gradient-to-br from-slate-900 to-slate-800 text-white">
       {/* Progress Indicator */}
@@ -190,8 +194,8 @@ export function Setup() {
                   i < safeStepIndex
                     ? 'border-primary bg-primary text-primary-foreground'
                     : i === safeStepIndex
-                    ? 'border-primary text-primary'
-                    : 'border-slate-600 text-slate-600'
+                      ? 'border-primary text-primary'
+                      : 'border-slate-600 text-slate-600'
                 )}
               >
                 {i < safeStepIndex ? (
@@ -212,7 +216,7 @@ export function Setup() {
           ))}
         </div>
       </div>
-      
+
       {/* Step Content */}
       <AnimatePresence mode="wait">
         <motion.div
@@ -223,15 +227,15 @@ export function Setup() {
           className="mx-auto max-w-2xl p-8"
         >
           <div className="text-center mb-8">
-            <h1 className="text-3xl font-bold mb-2">{step.title}</h1>
-            <p className="text-slate-400">{step.description}</p>
+            <h1 className="text-3xl font-bold mb-2">{t(`steps.${step.id}.title`)}</h1>
+            <p className="text-slate-400">{t(`steps.${step.id}.description`)}</p>
           </div>
-          
+
           {/* Step-specific content */}
           <div className="rounded-xl bg-white/10 backdrop-blur p-8 mb-8">
-                {safeStepIndex === STEP.WELCOME && <WelcomeContent />}
-                {safeStepIndex === STEP.RUNTIME && <RuntimeContent onStatusChange={setRuntimeChecksPassed} />}
-                {safeStepIndex === STEP.PROVIDER && (
+            {safeStepIndex === STEP.WELCOME && <WelcomeContent />}
+            {safeStepIndex === STEP.RUNTIME && <RuntimeContent onStatusChange={setRuntimeChecksPassed} />}
+            {safeStepIndex === STEP.PROVIDER && (
               <ProviderContent
                 providers={providers}
                 selectedProvider={selectedProvider}
@@ -241,22 +245,22 @@ export function Setup() {
                 onConfiguredChange={setProviderConfigured}
               />
             )}
-                {safeStepIndex === STEP.CHANNEL && <SetupChannelContent />}
-                {safeStepIndex === STEP.INSTALLING && (
+            {safeStepIndex === STEP.CHANNEL && <SetupChannelContent />}
+            {safeStepIndex === STEP.INSTALLING && (
               <InstallingContent
                 skills={defaultSkills}
                 onComplete={handleInstallationComplete}
                 onSkip={() => setCurrentStep((i) => i + 1)}
               />
             )}
-                {safeStepIndex === STEP.COMPLETE && (
+            {safeStepIndex === STEP.COMPLETE && (
               <CompleteContent
                 selectedProvider={selectedProvider}
                 installedSkills={installedSkills}
               />
             )}
           </div>
-          
+
           {/* Navigation - hidden during installation step */}
           {safeStepIndex !== STEP.INSTALLING && (
             <div className="flex justify-between">
@@ -264,27 +268,27 @@ export function Setup() {
                 {!isFirstStep && (
                   <Button variant="ghost" onClick={handleBack}>
                     <ChevronLeft className="h-4 w-4 mr-2" />
-                    Back
+                    {t('nav.back')}
                   </Button>
                 )}
               </div>
               <div className="flex gap-2">
                 {safeStepIndex === STEP.CHANNEL && (
                   <Button variant="ghost" onClick={handleNext}>
-                    Skip this step
+                    {t('nav.skipStep')}
                   </Button>
                 )}
                 {!isLastStep && safeStepIndex !== STEP.RUNTIME && safeStepIndex !== STEP.CHANNEL && (
                   <Button variant="ghost" onClick={handleSkip}>
-                    Skip Setup
+                    {t('nav.skipSetup')}
                   </Button>
                 )}
                 <Button onClick={handleNext} disabled={!canProceed}>
                   {isLastStep ? (
-                    'Get Started'
+                    t('nav.getStarted')
                   ) : (
                     <>
-                      Next
+                      {t('nav.next')}
                       <ChevronRight className="h-4 w-4 ml-2" />
                     </>
                   )}
@@ -301,30 +305,48 @@ export function Setup() {
 // ==================== Step Content Components ====================
 
 function WelcomeContent() {
+  const { t } = useTranslation(['setup', 'settings']);
+  const { language, setLanguage } = useSettingsStore();
+
   return (
     <div className="text-center space-y-4">
       <div className="text-6xl mb-4">🤖</div>
-      <h2 className="text-xl font-semibold">Welcome to ClawX</h2>
+      <h2 className="text-xl font-semibold">{t('welcome.title')}</h2>
       <p className="text-slate-300">
-        ClawX is a graphical interface for OpenClaw, making it easy to use AI
-        assistants across your favorite messaging platforms.
+        {t('welcome.description')}
       </p>
-      <ul className="text-left space-y-2 text-slate-300">
+
+      {/* Language Selector */}
+      <div className="flex justify-center gap-2 py-2">
+        {SUPPORTED_LANGUAGES.map((lang) => (
+          <Button
+            key={lang.code}
+            variant={language === lang.code ? 'secondary' : 'ghost'}
+            size="sm"
+            onClick={() => setLanguage(lang.code)}
+            className="h-7 text-xs"
+          >
+            {lang.label}
+          </Button>
+        ))}
+      </div>
+
+      <ul className="text-left space-y-2 text-slate-300 pt-2">
         <li className="flex items-center gap-2">
           <CheckCircle2 className="h-5 w-5 text-green-400" />
-          Zero command-line required
+          {t('welcome.features.noCommand')}
         </li>
         <li className="flex items-center gap-2">
           <CheckCircle2 className="h-5 w-5 text-green-400" />
-          Modern, beautiful interface
+          {t('welcome.features.modernUI')}
         </li>
         <li className="flex items-center gap-2">
           <CheckCircle2 className="h-5 w-5 text-green-400" />
-          Pre-installed skill bundles
+          {t('welcome.features.bundles')}
         </li>
         <li className="flex items-center gap-2">
           <CheckCircle2 className="h-5 w-5 text-green-400" />
-          Cross-platform support
+          {t('welcome.features.crossPlatform')}
         </li>
       </ul>
     </div>
@@ -336,9 +358,10 @@ interface RuntimeContentProps {
 }
 
 function RuntimeContent({ onStatusChange }: RuntimeContentProps) {
+  const { t } = useTranslation('setup');
   const gatewayStatus = useGatewayStore((state) => state.status);
   const startGateway = useGatewayStore((state) => state.start);
-  
+
   const [checks, setChecks] = useState({
     nodejs: { status: 'checking' as 'checking' | 'success' | 'error', message: '' },
     openclaw: { status: 'checking' as 'checking' | 'success' | 'error', message: '' },
@@ -348,7 +371,7 @@ function RuntimeContent({ onStatusChange }: RuntimeContentProps) {
   const [logContent, setLogContent] = useState('');
   const [openclawDir, setOpenclawDir] = useState('');
   const gatewayTimeoutRef = useRef<NodeJS.Timeout | null>(null);
-  
+
   const runChecks = useCallback(async () => {
     // Reset checks
     setChecks({
@@ -356,13 +379,13 @@ function RuntimeContent({ onStatusChange }: RuntimeContentProps) {
       openclaw: { status: 'checking', message: '' },
       gateway: { status: 'checking', message: '' },
     });
-    
+
     // Check Node.js — always available in Electron
     setChecks((prev) => ({
       ...prev,
-      nodejs: { status: 'success', message: 'Node.js is available (Electron built-in)' },
+      nodejs: { status: 'success', message: t('runtime.status.success') },
     }));
-    
+
     // Check OpenClaw package status
     try {
       const openclawStatus = await window.electron.ipcRenderer.invoke('openclaw:status') as {
@@ -371,32 +394,32 @@ function RuntimeContent({ onStatusChange }: RuntimeContentProps) {
         dir: string;
         version?: string;
       };
-      
+
       setOpenclawDir(openclawStatus.dir);
-      
+
       if (!openclawStatus.packageExists) {
         setChecks((prev) => ({
           ...prev,
-          openclaw: { 
-            status: 'error', 
-            message: `OpenClaw package not found at: ${openclawStatus.dir}` 
+          openclaw: {
+            status: 'error',
+            message: `OpenClaw package not found at: ${openclawStatus.dir}`
           },
         }));
       } else if (!openclawStatus.isBuilt) {
         setChecks((prev) => ({
           ...prev,
-          openclaw: { 
-            status: 'error', 
-            message: 'OpenClaw package found but dist is missing' 
+          openclaw: {
+            status: 'error',
+            message: 'OpenClaw package found but dist is missing'
           },
         }));
       } else {
         const versionLabel = openclawStatus.version ? ` v${openclawStatus.version}` : '';
         setChecks((prev) => ({
           ...prev,
-          openclaw: { 
-            status: 'success', 
-            message: `OpenClaw package ready${versionLabel}` 
+          openclaw: {
+            status: 'success',
+            message: `OpenClaw package ready${versionLabel}`
           },
         }));
       }
@@ -406,7 +429,7 @@ function RuntimeContent({ onStatusChange }: RuntimeContentProps) {
         openclaw: { status: 'error', message: `Check failed: ${error}` },
       }));
     }
-    
+
     // Check Gateway — read directly from store to avoid stale closure
     // Don't immediately report error; gateway may still be initializing
     const currentGateway = useGatewayStore.getState().status;
@@ -418,39 +441,39 @@ function RuntimeContent({ onStatusChange }: RuntimeContentProps) {
     } else if (currentGateway.state === 'error') {
       setChecks((prev) => ({
         ...prev,
-        gateway: { status: 'error', message: currentGateway.error || 'Failed to start' },
+        gateway: { status: 'error', message: currentGateway.error || t('runtime.status.error') },
       }));
     } else {
       // Gateway is 'stopped', 'starting', or 'reconnecting'
       // Keep as 'checking' — the dedicated useEffect will update when status changes
       setChecks((prev) => ({
         ...prev,
-        gateway: { 
-          status: 'checking', 
-          message: currentGateway.state === 'starting' ? 'Starting...' : 'Waiting for gateway...'
+        gateway: {
+          status: 'checking',
+          message: currentGateway.state === 'starting' ? t('runtime.status.checking') : 'Waiting for gateway...'
         },
       }));
     }
-  }, []);
-  
+  }, [t]);
+
   useEffect(() => {
     runChecks();
   }, [runChecks]);
-  
+
   // Update canProceed when gateway status changes
   useEffect(() => {
-    const allPassed = checks.nodejs.status === 'success' 
-      && checks.openclaw.status === 'success' 
+    const allPassed = checks.nodejs.status === 'success'
+      && checks.openclaw.status === 'success'
       && (checks.gateway.status === 'success' || gatewayStatus.state === 'running');
     onStatusChange(allPassed);
   }, [checks, gatewayStatus, onStatusChange]);
-  
+
   // Update gateway check when gateway status changes
   useEffect(() => {
     if (gatewayStatus.state === 'running') {
       setChecks((prev) => ({
         ...prev,
-        gateway: { status: 'success', message: `Running on port ${gatewayStatus.port}` },
+        gateway: { status: 'success', message: t('runtime.status.gatewayRunning', { port: gatewayStatus.port }) },
       }));
     } else if (gatewayStatus.state === 'error') {
       setChecks((prev) => ({
@@ -464,20 +487,20 @@ function RuntimeContent({ onStatusChange }: RuntimeContentProps) {
       }));
     }
     // 'stopped' state: keep current check status (likely 'checking') to allow startup time
-  }, [gatewayStatus]);
-  
+  }, [gatewayStatus, t]);
+
   // Gateway startup timeout — show error only after giving enough time to initialize
   useEffect(() => {
     if (gatewayTimeoutRef.current) {
       clearTimeout(gatewayTimeoutRef.current);
       gatewayTimeoutRef.current = null;
     }
-    
+
     // If gateway is already in a terminal state, no timeout needed
     if (gatewayStatus.state === 'running' || gatewayStatus.state === 'error') {
       return;
     }
-    
+
     // Set timeout for non-terminal states (stopped, starting, reconnecting)
     gatewayTimeoutRef.current = setTimeout(() => {
       setChecks((prev) => {
@@ -490,7 +513,7 @@ function RuntimeContent({ onStatusChange }: RuntimeContentProps) {
         return prev;
       });
     }, 120 * 1000); // 120 seconds — enough for gateway to fully initialize
-    
+
     return () => {
       if (gatewayTimeoutRef.current) {
         clearTimeout(gatewayTimeoutRef.current);
@@ -498,7 +521,7 @@ function RuntimeContent({ onStatusChange }: RuntimeContentProps) {
       }
     };
   }, [gatewayStatus.state]);
-  
+
   const handleStartGateway = async () => {
     setChecks((prev) => ({
       ...prev,
@@ -506,7 +529,7 @@ function RuntimeContent({ onStatusChange }: RuntimeContentProps) {
     }));
     await startGateway();
   };
-  
+
   const handleShowLogs = async () => {
     try {
       const logs = await window.electron.ipcRenderer.invoke('log:readFile', 100) as string;
@@ -528,7 +551,7 @@ function RuntimeContent({ onStatusChange }: RuntimeContentProps) {
       // ignore
     }
   };
-  
+
   const renderStatus = (status: 'checking' | 'success' | 'error', message: string) => {
     if (status === 'checking') {
       return (
@@ -553,29 +576,29 @@ function RuntimeContent({ onStatusChange }: RuntimeContentProps) {
       </span>
     );
   };
-  
+
   return (
     <div className="space-y-4">
       <div className="flex items-center justify-between mb-4">
-        <h2 className="text-xl font-semibold">Checking Environment</h2>
+        <h2 className="text-xl font-semibold">{t('runtime.title')}</h2>
         <div className="flex gap-2">
           <Button variant="ghost" size="sm" onClick={handleShowLogs}>
-            View Logs
+            {t('runtime.viewLogs')}
           </Button>
           <Button variant="ghost" size="sm" onClick={runChecks}>
             <RefreshCw className="h-4 w-4 mr-2" />
-            Re-check
+            {t('runtime.recheck')}
           </Button>
         </div>
       </div>
       <div className="space-y-3">
         <div className="flex items-center justify-between p-3 rounded-lg bg-white/5">
-          <span>Node.js Runtime</span>
+          <span>{t('runtime.nodejs')}</span>
           {renderStatus(checks.nodejs.status, checks.nodejs.message)}
         </div>
         <div className="flex items-center justify-between p-3 rounded-lg bg-white/5">
           <div>
-            <span>OpenClaw Package</span>
+            <span>{t('runtime.openclaw')}</span>
             {openclawDir && (
               <p className="text-xs text-slate-500 mt-0.5 font-mono truncate max-w-[300px]">
                 {openclawDir}
@@ -596,21 +619,21 @@ function RuntimeContent({ onStatusChange }: RuntimeContentProps) {
           {renderStatus(checks.gateway.status, checks.gateway.message)}
         </div>
       </div>
-      
+
       {(checks.nodejs.status === 'error' || checks.openclaw.status === 'error') && (
         <div className="mt-4 p-4 rounded-lg bg-red-900/20 border border-red-500/20">
           <div className="flex items-start gap-2">
             <AlertCircle className="h-5 w-5 text-red-400 mt-0.5" />
             <div>
-              <p className="font-medium text-red-400">Environment issue detected</p>
+              <p className="font-medium text-red-400">{t('runtime.issue.title')}</p>
               <p className="text-sm text-slate-300 mt-1">
-                Please ensure OpenClaw is properly installed. Check the logs for details.
+                {t('runtime.issue.desc')}
               </p>
             </div>
           </div>
         </div>
       )}
-      
+
       {/* Log viewer panel */}
       {showLogs && (
         <div className="mt-4 p-4 rounded-lg bg-black/40 border border-slate-600">
@@ -644,14 +667,15 @@ interface ProviderContentProps {
   onConfiguredChange: (configured: boolean) => void;
 }
 
-function ProviderContent({ 
-  providers, 
-  selectedProvider, 
-  onSelectProvider, 
-  apiKey, 
+function ProviderContent({
+  providers,
+  selectedProvider,
+  onSelectProvider,
+  apiKey,
   onApiKeyChange,
   onConfiguredChange,
 }: ProviderContentProps) {
+  const { t } = useTranslation('setup');
   const [showKey, setShowKey] = useState(false);
   const [validating, setValidating] = useState(false);
   const [keyValid, setKeyValid] = useState<boolean | null>(null);
@@ -732,18 +756,18 @@ function ProviderContent({
     })();
     return () => { cancelled = true; };
   }, [onApiKeyChange, selectedProvider, providers]);
-  
+
   const selectedProviderData = providers.find((p) => p.id === selectedProvider);
   const showBaseUrlField = selectedProviderData?.showBaseUrl ?? false;
   const showModelIdField = selectedProviderData?.showModelId ?? false;
   const requiresKey = selectedProviderData?.requiresApiKey ?? false;
-  
+
   const handleValidateAndSave = async () => {
     if (!selectedProvider) return;
-    
+
     setValidating(true);
     setKeyValid(null);
-    
+
     try {
       // Validate key if the provider requires one and a key was entered
       if (requiresKey && apiKey) {
@@ -753,11 +777,11 @@ function ProviderContent({
           apiKey,
           { baseUrl: baseUrl.trim() || undefined }
         ) as { valid: boolean; error?: string };
-        
+
         setKeyValid(result.valid);
-        
+
         if (!result.valid) {
-          toast.error(result.error || 'Invalid API key');
+          toast.error(result.error || t('provider.invalid'));
           setValidating(false);
           return;
         }
@@ -773,8 +797,8 @@ function ProviderContent({
       const providerIdForSave =
         selectedProvider === 'custom'
           ? (selectedProviderConfigId?.startsWith('custom-')
-              ? selectedProviderConfigId
-              : `custom-${crypto.randomUUID()}`)
+            ? selectedProviderConfigId
+            : `custom-${crypto.randomUUID()}`)
           : selectedProvider;
 
       // Save provider config + API key, then set as default
@@ -808,7 +832,7 @@ function ProviderContent({
 
       setSelectedProviderConfigId(providerIdForSave);
       onConfiguredChange(true);
-      toast.success('Provider configured');
+      toast.success(t('provider.valid'));
     } catch (error) {
       setKeyValid(false);
       onConfiguredChange(false);
@@ -823,12 +847,12 @@ function ProviderContent({
     selectedProvider
     && (requiresKey ? apiKey.length > 0 : true)
     && (showModelIdField ? modelId.trim().length > 0 : true);
-  
+
   return (
     <div className="space-y-6">
       {/* Provider selector — dropdown */}
       <div className="space-y-2">
-        <Label htmlFor="provider">Model Provider</Label>
+        <Label htmlFor="provider">{t('provider.label')}</Label>
         <div className="relative">
           <select
             id="provider"
@@ -847,7 +871,7 @@ function ProviderContent({
               'focus:outline-none focus:ring-2 focus:ring-ring',
             )}
           >
-            <option value="" disabled className="bg-slate-800 text-slate-400">Select a provider...</option>
+            <option value="" disabled className="bg-slate-800 text-slate-400">{t('provider.selectPlaceholder')}</option>
             {providers.map((p) => (
               <option key={p.id} value={p.id} className="bg-slate-800 text-white">
                 {p.icon}  {p.name}{p.model ? ` — ${p.model}` : ''}
@@ -869,7 +893,7 @@ function ProviderContent({
           {/* Base URL field (for siliconflow, ollama, custom) */}
           {showBaseUrlField && (
             <div className="space-y-2">
-              <Label htmlFor="baseUrl">Base URL</Label>
+              <Label htmlFor="baseUrl">{t('provider.baseUrl')}</Label>
               <Input
                 id="baseUrl"
                 type="text"
@@ -888,7 +912,7 @@ function ProviderContent({
           {/* Model ID field (for siliconflow etc.) */}
           {showModelIdField && (
             <div className="space-y-2">
-              <Label htmlFor="modelId">Model ID</Label>
+              <Label htmlFor="modelId">{t('provider.modelId')}</Label>
               <Input
                 id="modelId"
                 type="text"
@@ -902,7 +926,7 @@ function ProviderContent({
                 className="bg-white/5 border-white/10"
               />
               <p className="text-xs text-slate-500">
-                The model identifier from your provider (e.g. deepseek-ai/DeepSeek-V3)
+                {t('provider.modelIdDesc')}
               </p>
             </div>
           )}
@@ -910,7 +934,7 @@ function ProviderContent({
           {/* API Key field (hidden for ollama) */}
           {requiresKey && (
             <div className="space-y-2">
-              <Label htmlFor="apiKey">API Key</Label>
+              <Label htmlFor="apiKey">{t('provider.apiKey')}</Label>
               <div className="relative">
                 <Input
                   id="apiKey"
@@ -945,17 +969,17 @@ function ProviderContent({
             {validating ? (
               <Loader2 className="h-4 w-4 animate-spin mr-2" />
             ) : null}
-            {requiresKey ? 'Validate & Save' : 'Save'}
+            {requiresKey ? t('provider.validateSave') : t('provider.save')}
           </Button>
 
           {keyValid !== null && (
             <p className={cn('text-sm text-center', keyValid ? 'text-green-400' : 'text-red-400')}>
-              {keyValid ? '✓ Provider configured successfully' : '✗ Invalid API key'}
+              {keyValid ? `✓ ${t('provider.valid')}` : `✗ ${t('provider.invalid')}`}
             </p>
           )}
 
           <p className="text-sm text-slate-400 text-center">
-            Your API key is stored locally on your machine.
+            {t('provider.storedLocally')}
           </p>
         </motion.div>
       )}
@@ -966,6 +990,7 @@ function ProviderContent({
 // ==================== Setup Channel Content ====================
 
 function SetupChannelContent() {
+  const { t } = useTranslation(['setup', 'channels']);
   const [selectedChannel, setSelectedChannel] = useState<ChannelType | null>(null);
   const [configValues, setConfigValues] = useState<Record<string, string>>({});
   const [showSecrets, setShowSecrets] = useState<Record<string, boolean>>({});
@@ -1046,10 +1071,10 @@ function SetupChannelContent() {
       <div className="text-center space-y-4">
         <div className="text-5xl">✅</div>
         <h2 className="text-xl font-semibold">
-          {meta?.name || 'Channel'} Connected
+          {t('channel.connected', { name: meta?.name || 'Channel' })}
         </h2>
         <p className="text-slate-300">
-          Your channel has been configured. It will connect when the Gateway starts.
+          {t('channel.connectedDesc')}
         </p>
         <Button
           variant="ghost"
@@ -1060,7 +1085,7 @@ function SetupChannelContent() {
             setConfigValues({});
           }}
         >
-          Configure another channel
+          {t('channel.configureAnother')}
         </Button>
       </div>
     );
@@ -1072,9 +1097,9 @@ function SetupChannelContent() {
       <div className="space-y-4">
         <div className="text-center mb-2">
           <div className="text-4xl mb-3">📡</div>
-          <h2 className="text-xl font-semibold">Connect a Messaging Channel</h2>
+          <h2 className="text-xl font-semibold">{t('channel.title')}</h2>
           <p className="text-slate-300 text-sm mt-1">
-            Choose a platform to connect your AI assistant to. You can add more channels later in Settings.
+            {t('channel.subtitle')}
           </p>
         </div>
         <div className="grid grid-cols-2 gap-3">
@@ -1090,7 +1115,7 @@ function SetupChannelContent() {
                 <span className="text-3xl">{channelMeta.icon}</span>
                 <p className="font-medium mt-2">{channelMeta.name}</p>
                 <p className="text-xs text-slate-400 mt-1 line-clamp-2">
-                  {channelMeta.description}
+                  {t(channelMeta.description)}
                 </p>
               </button>
             );
@@ -1112,16 +1137,16 @@ function SetupChannelContent() {
         </button>
         <div>
           <h2 className="text-xl font-semibold flex items-center gap-2">
-            <span>{meta?.icon}</span> Configure {meta?.name}
+            <span>{meta?.icon}</span> {t('channel.configure', { name: meta?.name })}
           </h2>
-          <p className="text-slate-400 text-sm">{meta?.description}</p>
+          <p className="text-slate-400 text-sm mt-1">{t(meta?.description || '')}</p>
         </div>
       </div>
 
       {/* Instructions */}
       <div className="p-3 rounded-lg bg-white/5 text-sm">
         <div className="flex items-center justify-between mb-2">
-          <p className="font-medium text-slate-200">How to connect:</p>
+          <p className="font-medium text-slate-200">{t('channel.howTo')}</p>
           {meta?.docsUrl && (
             <button
               onClick={() => {
@@ -1134,14 +1159,14 @@ function SetupChannelContent() {
               className="flex items-center gap-1 text-xs text-blue-400 hover:text-blue-300 transition-colors"
             >
               <BookOpen className="h-3 w-3" />
-              View docs
+              {t('channel.viewDocs')}
               <ExternalLink className="h-3 w-3" />
             </button>
           )}
         </div>
         <ol className="list-decimal list-inside text-slate-400 space-y-1">
           {meta?.instructions.map((inst, i) => (
-            <li key={i}>{inst}</li>
+            <li key={i}>{t(inst)}</li>
           ))}
         </ol>
       </div>
@@ -1152,14 +1177,14 @@ function SetupChannelContent() {
         return (
           <div key={field.key} className="space-y-1.5">
             <Label htmlFor={`setup-${field.key}`} className="text-slate-200">
-              {field.label}
+              {t(field.label)}
               {field.required && <span className="text-red-400 ml-1">*</span>}
             </Label>
             <div className="flex gap-2">
               <Input
                 id={`setup-${field.key}`}
                 type={isPassword && !showSecrets[field.key] ? 'password' : 'text'}
-                placeholder={field.placeholder}
+                placeholder={field.placeholder ? t(field.placeholder) : undefined}
                 value={configValues[field.key] || ''}
                 onChange={(e) => setConfigValues((prev) => ({ ...prev, [field.key]: e.target.value }))}
                 autoComplete="off"
@@ -1178,7 +1203,7 @@ function SetupChannelContent() {
               )}
             </div>
             {field.description && (
-              <p className="text-xs text-slate-500">{field.description}</p>
+              <p className="text-xs text-slate-500 mt-1">{t(field.description)}</p>
             )}
           </div>
         );
@@ -1201,12 +1226,12 @@ function SetupChannelContent() {
         {saving ? (
           <>
             <Loader2 className="h-4 w-4 mr-2 animate-spin" />
-            Validating & Saving...
+            {t('provider.validateSave')}
           </>
         ) : (
           <>
             <Check className="h-4 w-4 mr-2" />
-            Validate & Save
+            {t('provider.validateSave')}
           </>
         )}
       </Button>
@@ -1233,18 +1258,19 @@ interface InstallingContentProps {
 }
 
 function InstallingContent({ skills, onComplete, onSkip }: InstallingContentProps) {
+  const { t } = useTranslation('setup');
   const [skillStates, setSkillStates] = useState<SkillInstallState[]>(
     skills.map((s) => ({ ...s, status: 'pending' as InstallStatus }))
   );
   const [overallProgress, setOverallProgress] = useState(0);
   const [errorMessage, setErrorMessage] = useState<string | null>(null);
   const installStarted = useRef(false);
-  
+
   // Real installation process
   useEffect(() => {
     if (installStarted.current) return;
     installStarted.current = true;
-    
+
     const runRealInstall = async () => {
       try {
         // Step 1: Initialize all skills to 'installing' state for UI
@@ -1252,15 +1278,15 @@ function InstallingContent({ skills, onComplete, onSkip }: InstallingContentProp
         setOverallProgress(10);
 
         // Step 2: Call the backend to install uv and setup Python
-        const result = await window.electron.ipcRenderer.invoke('uv:install-all') as { 
-          success: boolean; 
-          error?: string 
+        const result = await window.electron.ipcRenderer.invoke('uv:install-all') as {
+          success: boolean;
+          error?: string
         };
 
         if (result.success) {
           setSkillStates(prev => prev.map(s => ({ ...s, status: 'completed' })));
           setOverallProgress(100);
-          
+
           await new Promise((resolve) => setTimeout(resolve, 800));
           onComplete(skills.map(s => s.id));
         } else {
@@ -1274,7 +1300,7 @@ function InstallingContent({ skills, onComplete, onSkip }: InstallingContentProp
         toast.error('Installation error');
       }
     };
-    
+
     runRealInstall();
   }, [skills, onComplete]);
 
@@ -1290,34 +1316,34 @@ function InstallingContent({ skills, onComplete, onSkip }: InstallingContentProp
         return <XCircle className="h-5 w-5 text-red-400" />;
     }
   };
-  
+
   const getStatusText = (skill: SkillInstallState) => {
     switch (skill.status) {
       case 'pending':
-        return <span className="text-slate-500">Pending</span>;
+        return <span className="text-slate-500">{t('installing.status.pending')}</span>;
       case 'installing':
-        return <span className="text-primary">Installing...</span>;
+        return <span className="text-primary">{t('installing.status.installing')}</span>;
       case 'completed':
-        return <span className="text-green-400">Installed</span>;
+        return <span className="text-green-400">{t('installing.status.installed')}</span>;
       case 'failed':
-        return <span className="text-red-400">Failed</span>;
+        return <span className="text-red-400">{t('installing.status.failed')}</span>;
     }
   };
-  
+
   return (
     <div className="space-y-6">
       <div className="text-center">
         <div className="text-4xl mb-4">⚙️</div>
-        <h2 className="text-xl font-semibold mb-2">Installing Essential Components</h2>
+        <h2 className="text-xl font-semibold mb-2">{t('installing.title')}</h2>
         <p className="text-slate-300">
-          Setting up the tools needed to power your AI assistant
+          {t('installing.subtitle')}
         </p>
       </div>
-      
+
       {/* Progress bar */}
       <div className="space-y-2">
         <div className="flex justify-between text-sm">
-          <span className="text-slate-400">Progress</span>
+          <span className="text-slate-400">{t('installing.progress')}</span>
           <span className="text-primary">{overallProgress}%</span>
         </div>
         <div className="h-2 bg-slate-700 rounded-full overflow-hidden">
@@ -1329,7 +1355,7 @@ function InstallingContent({ skills, onComplete, onSkip }: InstallingContentProp
           />
         </div>
       </div>
-      
+
       {/* Skill list */}
       <div className="space-y-2 max-h-48 overflow-y-auto">
         {skillStates.map((skill) => (
@@ -1356,7 +1382,7 @@ function InstallingContent({ skills, onComplete, onSkip }: InstallingContentProp
 
       {/* Error Message Display */}
       {errorMessage && (
-        <motion.div 
+        <motion.div
           initial={{ opacity: 0, scale: 0.95 }}
           animate={{ opacity: 1, scale: 1 }}
           className="p-4 rounded-lg bg-red-900/30 border border-red-500/50 text-red-200 text-sm"
@@ -1364,25 +1390,25 @@ function InstallingContent({ skills, onComplete, onSkip }: InstallingContentProp
           <div className="flex items-start gap-2">
             <AlertCircle className="h-5 w-5 text-red-400 shrink-0 mt-0.5" />
             <div className="space-y-1">
-              <p className="font-semibold">Setup Error:</p>
+              <p className="font-semibold">{t('installing.error')}</p>
               <pre className="text-xs bg-black/30 p-2 rounded overflow-x-auto whitespace-pre-wrap font-monospace">
                 {errorMessage}
               </pre>
-              <Button 
-                variant="link" 
+              <Button
+                variant="link"
                 className="text-red-400 p-0 h-auto text-xs underline"
                 onClick={() => window.location.reload()}
               >
-                Try restarting the app
+                {t('installing.restart')}
               </Button>
             </div>
           </div>
         </motion.div>
       )}
-      
+
       {!errorMessage && (
         <p className="text-sm text-slate-400 text-center">
-          This may take a few moments...
+          {t('installing.wait')}
         </p>
       )}
       <div className="flex justify-end">
@@ -1391,7 +1417,7 @@ function InstallingContent({ skills, onComplete, onSkip }: InstallingContentProp
           className="text-slate-400"
           onClick={onSkip}
         >
-          Skip this step
+          {t('installing.skip')}
         </Button>
       </div>
     </div>
@@ -1403,46 +1429,46 @@ interface CompleteContentProps {
 }
 
 function CompleteContent({ selectedProvider, installedSkills }: CompleteContentProps) {
+  const { t } = useTranslation('setup');
   const gatewayStatus = useGatewayStore((state) => state.status);
-  
+
   const providerData = providers.find((p) => p.id === selectedProvider);
   const installedSkillNames = defaultSkills
     .filter((s) => installedSkills.includes(s.id))
     .map((s) => s.name)
     .join(', ');
-  
+
   return (
     <div className="text-center space-y-6">
       <div className="text-6xl mb-4">🎉</div>
-      <h2 className="text-xl font-semibold">Setup Complete!</h2>
+      <h2 className="text-xl font-semibold">{t('complete.title')}</h2>
       <p className="text-slate-300">
-        ClawX is configured and ready to use. You can now start chatting with
-        your AI assistant.
+        {t('complete.subtitle')}
       </p>
-      
+
       <div className="space-y-3 text-left max-w-md mx-auto">
         <div className="flex items-center justify-between p-3 rounded-lg bg-white/5">
-          <span>AI Provider</span>
+          <span>{t('complete.provider')}</span>
           <span className="text-green-400">
             {providerData ? `${providerData.icon} ${providerData.name}` : '—'}
           </span>
         </div>
         <div className="flex items-center justify-between p-3 rounded-lg bg-white/5">
-          <span>Components</span>
+          <span>{t('complete.components')}</span>
           <span className="text-green-400">
-            {installedSkillNames || `${installedSkills.length} installed`}
+            {installedSkillNames || `${installedSkills.length} ${t('installing.status.installed')}`}
           </span>
         </div>
         <div className="flex items-center justify-between p-3 rounded-lg bg-white/5">
-          <span>Gateway</span>
+          <span>{t('complete.gateway')}</span>
           <span className={gatewayStatus.state === 'running' ? 'text-green-400' : 'text-yellow-400'}>
-            {gatewayStatus.state === 'running' ? '✓ Running' : gatewayStatus.state}
+            {gatewayStatus.state === 'running' ? `✓ ${t('complete.running')}` : gatewayStatus.state}
           </span>
         </div>
       </div>
-      
+
       <p className="text-sm text-slate-400">
-        You can customize skills and connect channels in Settings
+        {t('complete.footer')}
       </p>
     </div>
   );