@nextclaw/ui 0.5.8 → 0.5.10

package/src/components/config/ModelConfig.tsx

@@ -5,6 +5,7 @@ import { Label } from '@/components/ui/label';
 import { Skeleton } from '@/components/ui/skeleton';
 import { useConfig, useConfigSchema, useUpdateModel } from '@/hooks/useConfig';
 import { hintForPath } from '@/lib/config-hints';
+import { formatNumber, t } from '@/lib/i18n';
 import { Folder, Loader2, Sliders, Sparkles } from 'lucide-react';
 import { useEffect, useState } from 'react';
 
@@ -69,8 +70,8 @@ export function ModelConfig() {
   return (
     <div className="max-w-4xl animate-fade-in pb-20">
       <div className="mb-10">
-        <h2 className="text-xl font-semibold text-gray-900">Model Configuration</h2>
-        <p className="text-sm text-gray-500 mt-1">Configure default AI model and runtime limits</p>
+        <h2 className="text-xl font-semibold text-gray-900">{t('modelPageTitle')}</h2>
+        <p className="text-sm text-gray-500 mt-1">{t('modelPageDescription')}</p>
       </div>
 
       <form onSubmit={handleSubmit} className="space-y-8">
@@ -81,7 +82,7 @@ export function ModelConfig() {
               <div className="h-10 w-10 rounded-xl bg-primary flex items-center justify-center text-white">
                 <Sparkles className="h-5 w-5" />
               </div>
-              <h3 className="text-lg font-bold text-gray-900">Default Model</h3>
+              <h3 className="text-lg font-bold text-gray-900">{t('defaultModel')}</h3>
             </div>
 
             <div className="space-y-2">
@@ -108,7 +109,7 @@ export function ModelConfig() {
               <div className="h-10 w-10 rounded-xl bg-primary flex items-center justify-center text-white">
                 <Folder className="h-5 w-5" />
               </div>
-              <h3 className="text-lg font-bold text-gray-900">Workspace</h3>
+              <h3 className="text-lg font-bold text-gray-900">{t('workspace')}</h3>
             </div>
 
             <div className="space-y-2">
@@ -132,16 +133,16 @@ export function ModelConfig() {
             <div className="h-10 w-10 rounded-xl bg-primary flex items-center justify-center text-white">
               <Sliders className="h-5 w-5" />
             </div>
-            <h3 className="text-lg font-bold text-gray-900">Generation Parameters</h3>
+            <h3 className="text-lg font-bold text-gray-900">{t('generationParameters')}</h3>
           </div>
 
           <div className="grid grid-cols-1 gap-12">
             <div className="space-y-4">
               <div className="flex justify-between items-center mb-2">
                 <Label className="text-xs font-semibold text-gray-500 uppercase tracking-wider">
-                  {maxTokensHint?.label ?? 'Max Tokens'}
+                  {maxTokensHint?.label ?? t('maxTokens')}
                 </Label>
-                <span className="text-sm font-semibold text-gray-900">{maxTokens.toLocaleString()}</span>
+                <span className="text-sm font-semibold text-gray-900">{formatNumber(maxTokens)}</span>
               </div>
               <input
                 type="range"
@@ -165,7 +166,7 @@ export function ModelConfig() {
             {updateModel.isPending ? (
               <Loader2 className="h-5 w-5 animate-spin" />
             ) : (
-              'Save Changes'
+              t('saveChanges')
             )}
           </Button>
         </div>

package/src/components/config/ProviderForm.tsx

@@ -96,7 +96,7 @@ export function ProviderForm() {
             </div>
             <div>
               <DialogTitle>{providerSpec?.displayName || providerName}</DialogTitle>
-              <DialogDescription>Configure API keys and parameters for AI provider</DialogDescription>
+              <DialogDescription>{t('providerFormDescription')}</DialogDescription>
             </div>
           </div>
         </DialogHeader>
@@ -116,7 +116,7 @@ export function ProviderForm() {
                 placeholder={
                   providerConfig?.apiKeySet
                     ? t('apiKeySet')
-                    : apiKeyHint?.placeholder ?? 'Enter API Key'
+                    : apiKeyHint?.placeholder ?? t('enterApiKey')
                 }
                 className="rounded-xl"
               />
@@ -193,7 +193,7 @@ export function ProviderForm() {
               type="submit"
               disabled={updateProvider.isPending}
             >
-              {updateProvider.isPending ? 'Saving...' : t('save')}
+              {updateProvider.isPending ? t('saving') : t('save')}
             </Button>
           </DialogFooter>
         </form>

package/src/components/config/ProvidersList.tsx

@@ -11,6 +11,7 @@ import { hintForPath } from '@/lib/config-hints';
 import { ConfigCard, ConfigCardHeader, ConfigCardBody, ConfigCardFooter } from '@/components/ui/config-card';
 import { StatusDot } from '@/components/ui/status-dot';
 import { ActionLink } from '@/components/ui/action-link';
+import { t } from '@/lib/i18n';
 
 export function ProvidersList() {
   const { data: config } = useConfig();
@@ -21,12 +22,12 @@ export function ProvidersList() {
   const uiHints = schema?.uiHints;
 
   if (!config || !meta) {
-    return <div className="p-8">Loading...</div>;
+    return <div className="p-8">{t('providersLoading')}</div>;
   }
 
   const tabs = [
-    { id: 'installed', label: 'Configured', count: config.providers ? Object.keys(config.providers).filter(k => config.providers[k].apiKeySet).length : 0 },
-    { id: 'all', label: 'All Providers' }
+    { id: 'installed', label: t('providersTabConfigured'), count: config.providers ? Object.keys(config.providers).filter(k => config.providers[k].apiKeySet).length : 0 },
+    { id: 'all', label: t('providersTabAll'), count: meta.providers.length }
   ];
 
   const filteredProviders = activeTab === 'installed'
@@ -36,7 +37,7 @@ export function ProvidersList() {
   return (
     <div className="animate-fade-in pb-20">
       <div className="flex items-center justify-between mb-6">
-        <h2 className="text-xl font-semibold text-gray-900">AI Providers</h2>
+        <h2 className="text-xl font-semibold text-gray-900">{t('providersPageTitle')}</h2>
       </div>
 
       <Tabs tabs={tabs} activeTab={activeTab} onChange={setActiveTab} />
@@ -47,7 +48,7 @@ export function ProvidersList() {
           const providerConfig = config.providers[provider.name];
           const hasConfig = providerConfig?.apiKeySet;
           const providerHint = hintForPath(`providers.${provider.name}`, uiHints);
-          const description = providerHint?.help || 'Configure AI services for your agents';
+          const description = providerHint?.help || t('providersDefaultDescription');
 
           return (
             <ConfigCard key={provider.name} onClick={() => openProviderModal(provider.name)}>
@@ -73,7 +74,7 @@ export function ProvidersList() {
                 />
                 <StatusDot
                   status={hasConfig ? 'ready' : 'setup'}
-                  label={hasConfig ? 'Ready' : 'Setup'}
+                  label={hasConfig ? t('statusReady') : t('statusSetup')}
                 />
               </ConfigCardHeader>
 
@@ -83,7 +84,7 @@ export function ProvidersList() {
               />
 
               <ConfigCardFooter>
-                <ActionLink label={hasConfig ? 'Configure' : 'Add Provider'} />
+                <ActionLink label={hasConfig ? t('actionConfigure') : t('actionAddProvider')} />
               </ConfigCardFooter>
             </ConfigCard>
           );
@@ -97,10 +98,10 @@ export function ProvidersList() {
             <KeyRound className="h-6 w-6 text-gray-300" />
           </div>
           <h3 className="text-[14px] font-semibold text-gray-900 mb-1.5">
-            No providers configured
+            {t('providersEmptyTitle')}
           </h3>
           <p className="text-[13px] text-gray-400 max-w-sm">
-            Add an AI provider to start using the platform.
+            {t('providersEmptyDescription')}
           </p>
         </div>
       )}

package/src/components/config/RuntimeConfig.tsx

@@ -7,6 +7,7 @@ import { Input } from '@/components/ui/input';
 import { Switch } from '@/components/ui/switch';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 import { hintForPath } from '@/lib/config-hints';
+import { t } from '@/lib/i18n';
 import { Plus, Save, Trash2 } from 'lucide-react';
 import { toast } from 'sonner';
 
@@ -129,7 +130,7 @@ export function RuntimeConfig() {
       const normalizedAgents = agents.map((agent, index) => {
         const id = agent.id.trim();
         if (!id) {
-          throw new Error(`agents.list[${index}].id is required`);
+          throw new Error(t('agentIdRequiredError').replace('{index}', String(index)));
         }
         const normalized: AgentProfileView = { id };
         if (agent.default) {
@@ -157,7 +158,7 @@ export function RuntimeConfig() {
         .map((agent) => agent.id)
         .filter((id, index, all) => all.indexOf(id) !== index);
       if (duplicates.length > 0) {
-        toast.error(`Duplicate agent id: ${duplicates[0]}`);
+        toast.error(`${t('duplicateAgentId')}: ${duplicates[0]}`);
         return;
       }
 
@@ -169,13 +170,13 @@ export function RuntimeConfig() {
         const peerId = binding.match.peer?.id?.trim() ?? '';
 
         if (!agentId) {
-          throw new Error(`bindings[${index}].agentId is required`);
+          throw new Error(t('bindingAgentIdRequired').replace('{index}', String(index)));
         }
         if (!knownAgentIds.has(agentId)) {
-          throw new Error(`bindings[${index}].agentId '${agentId}' not found in agents.list/main`);
+          throw new Error(`${t('bindingAgentIdNotFound').replace('{index}', String(index))}: ${agentId}`);
         }
         if (!channel) {
-          throw new Error(`bindings[${index}].match.channel is required`);
+          throw new Error(t('bindingChannelRequired').replace('{index}', String(index)));
         }
 
         const normalized: AgentBindingView = {
@@ -191,7 +192,7 @@ export function RuntimeConfig() {
 
         if (peerKind) {
           if (!peerId) {
-            throw new Error(`bindings[${index}].match.peer.id is required when peer.kind is set`);
+            throw new Error(t('bindingPeerIdRequired').replace('{index}', String(index)));
           }
           normalized.match.peer = {
             kind: peerKind,
@@ -226,27 +227,27 @@ export function RuntimeConfig() {
   };
 
   if (isLoading || !config) {
-    return <div className="p-8 text-gray-400">Loading runtime settings...</div>;
+    return <div className="p-8 text-gray-400">{t('runtimeLoading')}</div>;
   }
 
   return (
     <div className="space-y-6 pb-20 animate-fade-in">
       <div>
-        <h2 className="text-xl font-semibold text-gray-900">Routing & Runtime</h2>
+        <h2 className="text-xl font-semibold text-gray-900">{t('runtimePageTitle')}</h2>
         <p className="text-sm text-gray-500 mt-1">
-          Align multi-agent routing with OpenClaw: bindings, agent pool, and DM scope.
+          {t('runtimePageDescription')}
         </p>
       </div>
 
       <Card>
         <CardHeader>
-          <CardTitle>{dmScopeHint?.label ?? 'DM Scope'}</CardTitle>
-          <CardDescription>{dmScopeHint?.help ?? 'Control how direct-message sessions are isolated.'}</CardDescription>
+          <CardTitle>{dmScopeHint?.label ?? t('dmScope')}</CardTitle>
+          <CardDescription>{dmScopeHint?.help ?? t('dmScopeHelp')}</CardDescription>
         </CardHeader>
         <CardContent className="space-y-4">
           <div className="space-y-2">
             <label className="text-sm font-medium text-gray-800">
-              {defaultContextTokensHint?.label ?? 'Default Context Tokens'}
+              {defaultContextTokensHint?.label ?? t('defaultContextTokens')}
             </label>
             <Input
               type="number"
@@ -256,11 +257,11 @@ export function RuntimeConfig() {
               onChange={(event) => setDefaultContextTokens(Math.max(1000, Number.parseInt(event.target.value, 10) || 1000))}
             />
             <p className="text-xs text-gray-500">
-              {defaultContextTokensHint?.help ?? 'Input context budget for agents when no per-agent override is set.'}
+              {defaultContextTokensHint?.help ?? t('defaultContextTokensHelp')}
             </p>
           </div>
           <div className="space-y-2">
-            <label className="text-sm font-medium text-gray-800">{dmScopeHint?.label ?? 'DM Scope'}</label>
+            <label className="text-sm font-medium text-gray-800">{dmScopeHint?.label ?? t('dmScope')}</label>
             <Select value={dmScope} onValueChange={(v) => setDmScope(v as DmScope)}>
               <SelectTrigger>
                 <SelectValue />
@@ -276,7 +277,7 @@ export function RuntimeConfig() {
           </div>
           <div className="space-y-2">
             <label className="text-sm font-medium text-gray-800">
-              {maxPingHint?.label ?? 'Max Ping-Pong Turns'}
+              {maxPingHint?.label ?? t('maxPingPongTurns')}
             </label>
             <Input
               type="number"
@@ -286,7 +287,7 @@ export function RuntimeConfig() {
               onChange={(event) => setMaxPingPongTurns(Math.max(0, Number.parseInt(event.target.value, 10) || 0))}
             />
             <p className="text-xs text-gray-500">
-              {maxPingHint?.help ?? 'Set to 0 to block automatic agent-to-agent ping-pong loops.'}
+              {maxPingHint?.help ?? t('maxPingPongTurnsHelp')}
             </p>
           </div>
         </CardContent>
@@ -294,8 +295,8 @@ export function RuntimeConfig() {
 
       <Card>
         <CardHeader>
-          <CardTitle>{agentsHint?.label ?? 'Agent List'}</CardTitle>
-          <CardDescription>{agentsHint?.help ?? 'Run multiple fixed-role agents in one gateway process.'}</CardDescription>
+          <CardTitle>{agentsHint?.label ?? t('agentList')}</CardTitle>
+          <CardDescription>{agentsHint?.help ?? t('agentListHelp')}</CardDescription>
         </CardHeader>
         <CardContent className="space-y-3">
           {agents.map((agent, index) => (
@@ -304,17 +305,17 @@ export function RuntimeConfig() {
                 <Input
                   value={agent.id}
                   onChange={(event) => updateAgent(index, { id: event.target.value })}
-                  placeholder="Agent ID (e.g. engineer)"
+                  placeholder={t('agentIdPlaceholder')}
                 />
                 <Input
                   value={agent.workspace ?? ''}
                   onChange={(event) => updateAgent(index, { workspace: event.target.value })}
-                  placeholder="Workspace override (optional)"
+                  placeholder={t('workspaceOverridePlaceholder')}
                 />
                 <Input
                   value={agent.model ?? ''}
                   onChange={(event) => updateAgent(index, { model: event.target.value })}
-                  placeholder="Model override (optional)"
+                  placeholder={t('modelOverridePlaceholder')}
                 />
                 <div className="grid grid-cols-1 md:grid-cols-3 gap-2">
                   <Input
@@ -326,7 +327,7 @@ export function RuntimeConfig() {
                         maxTokens: parseOptionalInt(event.target.value)
                       })
                     }
-                    placeholder="Max tokens"
+                    placeholder={t('maxTokensPlaceholder')}
                   />
                   <Input
                     type="number"
@@ -338,7 +339,7 @@ export function RuntimeConfig() {
                         contextTokens: parseOptionalInt(event.target.value)
                       })
                     }
-                    placeholder={agentContextTokensHint?.label ?? 'Context tokens'}
+                    placeholder={agentContextTokensHint?.label ?? t('contextTokensPlaceholder')}
                   />
                   <Input
                     type="number"
@@ -349,7 +350,7 @@ export function RuntimeConfig() {
                         maxToolIterations: parseOptionalInt(event.target.value)
                       })
                     }
-                    placeholder="Max tools"
+                    placeholder={t('maxToolsPlaceholder')}
                   />
                 </div>
               </div>
@@ -370,11 +371,11 @@ export function RuntimeConfig() {
                       );
                     }}
                   />
-                  <span>Default agent</span>
+                  <span>{t('defaultAgent')}</span>
                 </div>
                 <Button type="button" variant="outline" size="sm" onClick={() => setAgents((prev) => prev.filter((_, cursor) => cursor !== index))}>
                   <Trash2 className="h-4 w-4 mr-1" />
-                  Remove
+                  {t('remove')}
                 </Button>
               </div>
             </div>
@@ -382,16 +383,16 @@ export function RuntimeConfig() {
 
           <Button type="button" variant="outline" onClick={() => setAgents((prev) => [...prev, createEmptyAgent()])}>
             <Plus className="h-4 w-4 mr-2" />
-            Add Agent
+            {t('addAgent')}
           </Button>
         </CardContent>
       </Card>
 
       <Card>
         <CardHeader>
-          <CardTitle>{bindingsHint?.label ?? 'Bindings'}</CardTitle>
+          <CardTitle>{bindingsHint?.label ?? t('bindings')}</CardTitle>
           <CardDescription>
-            {bindingsHint?.help ?? 'Route inbound message by channel + account + peer to target agent.'}
+            {bindingsHint?.help ?? t('bindingsHelp')}
           </CardDescription>
         </CardHeader>
         <CardContent className="space-y-3">
@@ -403,7 +404,7 @@ export function RuntimeConfig() {
                   <Input
                     value={binding.agentId}
                     onChange={(event) => updateBinding(index, { ...binding, agentId: event.target.value })}
-                    placeholder="Target agent ID"
+                    placeholder={t('targetAgentIdPlaceholder')}
                   />
                   <Input
                     value={binding.match.channel}
@@ -416,7 +417,7 @@ export function RuntimeConfig() {
                         }
                       })
                     }
-                    placeholder="Channel (e.g. discord)"
+                    placeholder={t('channelPlaceholder')}
                   />
                   <Input
                     value={binding.match.accountId ?? ''}
@@ -429,7 +430,7 @@ export function RuntimeConfig() {
                         }
                       })
                     }
-                    placeholder="Account ID (optional)"
+                    placeholder={t('accountIdOptionalPlaceholder')}
                   />
                   <Select
                     value={peerKind || '__none__'}
@@ -461,7 +462,7 @@ export function RuntimeConfig() {
                       <SelectValue />
                     </SelectTrigger>
                     <SelectContent>
-                      <SelectItem value="__none__">Peer kind (optional)</SelectItem>
+                      <SelectItem value="__none__">{t('peerKindOptional')}</SelectItem>
                       <SelectItem value="direct">direct</SelectItem>
                       <SelectItem value="group">group</SelectItem>
                       <SelectItem value="channel">channel</SelectItem>
@@ -483,7 +484,7 @@ export function RuntimeConfig() {
                         }
                       })
                     }
-                    placeholder="Peer ID (requires peer kind)"
+                    placeholder={t('peerIdPlaceholder')}
                   />
                 </div>
                 <div className="flex justify-end">
@@ -494,7 +495,7 @@ export function RuntimeConfig() {
                     onClick={() => setBindings((prev) => prev.filter((_, cursor) => cursor !== index))}
                   >
                     <Trash2 className="h-4 w-4 mr-1" />
-                    Remove
+                    {t('remove')}
                   </Button>
                 </div>
               </div>
@@ -503,7 +504,7 @@ export function RuntimeConfig() {
 
           <Button type="button" variant="outline" onClick={() => setBindings((prev) => [...prev, createEmptyBinding()])}>
             <Plus className="h-4 w-4 mr-2" />
-            Add Binding
+            {t('addBinding')}
           </Button>
         </CardContent>
       </Card>
@@ -511,7 +512,7 @@ export function RuntimeConfig() {
       <div className="flex justify-end">
         <Button type="button" onClick={handleSave} disabled={updateRuntime.isPending}>
           <Save className="h-4 w-4 mr-2" />
-          {updateRuntime.isPending ? 'Saving...' : 'Save Runtime Settings'}
+          {updateRuntime.isPending ? t('saving') : t('saveRuntimeSettings')}
         </Button>
       </div>
     </div>

package/src/components/config/SessionsConfig.tsx

@@ -6,20 +6,13 @@ import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select';
 import { cn } from '@/lib/utils';
-import { t } from '@/lib/i18n';
+import { formatDateShort, formatDateTime, t } from '@/lib/i18n';
 import { RefreshCw, Search, Clock, Inbox, Hash, Bot, User, MessageCircle, Settings as SettingsIcon } from 'lucide-react';
 
 const UNKNOWN_CHANNEL_KEY = '__unknown_channel__';
 
 function formatDate(value?: string): string {
-  if (!value) {
-    return '-';
-  }
-  const date = new Date(value);
-  if (Number.isNaN(date.getTime())) {
-    return value;
-  }
-  return date.toLocaleString();
+  return formatDateTime(value);
 }
 
 function resolveChannelFromSessionKey(key: string): string {
@@ -75,7 +68,7 @@ function SessionListItem({ session, channel, isSelected, onSelect }: SessionList
       <div className={cn("flex items-center text-xs justify-between mt-2 font-medium", isSelected ? "text-brand-600/80" : "text-gray-400")}>
         <div className="flex items-center gap-1.5">
           <Clock className="w-3.5 h-3.5 opacity-70" />
-          <span className="truncate max-w-[100px]">{formatDate(session.updatedAt).split(' ')[0]}</span>
+          <span className="truncate max-w-[100px]">{formatDateShort(session.updatedAt)}</span>
         </div>
         <div className="flex items-center gap-1">
           <MessageCircle className="w-3.5 h-3.5 opacity-70" />
@@ -248,10 +241,10 @@ export function SessionsConfig() {
 
             <Select value={selectedChannel} onValueChange={setSelectedChannel}>
               <SelectTrigger className="w-full h-8.5 rounded-lg bg-gray-50/50 hover:bg-gray-100 border-gray-200 focus:ring-0 shadow-none text-xs font-medium text-gray-700">
-                <SelectValue placeholder="All Channels" />
+                <SelectValue placeholder={t('sessionsAllChannels')} />
               </SelectTrigger>
               <SelectContent className="rounded-xl shadow-lg border-gray-100 max-w-[280px]">
-                <SelectItem value="all" className="rounded-lg text-xs">All Channels</SelectItem>
+                <SelectItem value="all" className="rounded-lg text-xs">{t('sessionsAllChannels')}</SelectItem>
                 {channels.map(c => (
                   <SelectItem key={c} value={c} className="rounded-lg text-xs truncate pr-6">{displayChannelName(c)}</SelectItem>
                 ))}
@@ -326,7 +319,7 @@ export function SessionsConfig() {
                   <div className="flex items-center gap-2 shrink-0">
                     <Button variant="outline" size="sm" onClick={() => setIsEditingMeta(!isEditingMeta)} className={cn("h-8.5 rounded-lg shadow-none border-gray-200 transition-all text-xs font-semibold", isEditingMeta ? "bg-gray-100 text-gray-900" : "hover:bg-gray-50 hover:text-gray-900")}>
                       <SettingsIcon className="w-3.5 h-3.5 mr-1.5" />
-                      Metadata
+                      {t('sessionsMetadata')}
                     </Button>
                     <Button variant="outline" size="sm" onClick={handleClearHistory} className="h-8.5 rounded-lg shadow-none hover:bg-gray-50 hover:text-gray-900 border-gray-200 text-xs font-semibold text-gray-500">
                       {t('sessionsClearHistory')}
@@ -397,9 +390,9 @@ export function SessionsConfig() {
               <div className="w-20 h-20 bg-gray-50 rounded-3xl flex items-center justify-center mb-6 border border-gray-100 shadow-[0_2px_8px_-2px_rgba(0,0,0,0.02)] rotate-3">
                 <Inbox className="h-8 w-8 text-gray-300 -rotate-3" />
               </div>
-              <h3 className="text-lg font-bold text-gray-900 mb-2">No Session Selected</h3>
+              <h3 className="text-lg font-bold text-gray-900 mb-2">{t('sessionsNoSelectionTitle')}</h3>
               <p className="text-sm text-center max-w-sm leading-relaxed">
-                Select a session from the list on the left to view its chat history and configure its metadata.
+                {t('sessionsNoSelectionDescription')}
               </p>
             </div>
           )}

package/src/components/layout/Sidebar.tsx

@@ -1,49 +1,61 @@
 import { cn } from '@/lib/utils';
-import { t } from '@/lib/i18n';
-import { Cpu, GitBranch, History, MessageSquare, Sparkles, BookOpen, Store, AlarmClock } from 'lucide-react';
+import { LANGUAGE_OPTIONS, t, type I18nLanguage } from '@/lib/i18n';
+import { Cpu, GitBranch, History, MessageSquare, Sparkles, BookOpen, Store, AlarmClock, Languages } from 'lucide-react';
 import { NavLink } from 'react-router-dom';
 import { useDocBrowser } from '@/components/doc-browser';
-
-const navItems = [
-  {
-    target: '/model',
-    label: 'Models',
-    icon: Cpu,
-  },
-  {
-    target: '/providers',
-    label: 'Providers',
-    icon: Sparkles,
-  },
-  {
-    target: '/channels',
-    label: 'Channels',
-    icon: MessageSquare,
-  },
-  {
-    target: '/runtime',
-    label: 'Routing & Runtime',
-    icon: GitBranch,
-  },
-  {
-    target: '/sessions',
-    label: t('sessions'),
-    icon: History,
-  },
-  {
-    target: '/cron',
-    label: t('cron'),
-    icon: AlarmClock,
-  },
-  {
-    target: '/marketplace',
-    label: 'Marketplace',
-    icon: Store,
-  }
-];
+import { useI18n } from '@/components/providers/I18nProvider';
+import { Select, SelectContent, SelectItem, SelectTrigger } from '@/components/ui/select';
 
 export function Sidebar() {
   const docBrowser = useDocBrowser();
+  const { language, setLanguage } = useI18n();
+  const currentLanguageLabel = LANGUAGE_OPTIONS.find((option) => option.value === language)?.label ?? language;
+
+  const handleLanguageSwitch = (nextLanguage: I18nLanguage) => {
+    if (language === nextLanguage) {
+      return;
+    }
+    setLanguage(nextLanguage);
+    window.location.reload();
+  };
+
+  const navItems = [
+    {
+      target: '/model',
+      label: t('model'),
+      icon: Cpu,
+    },
+    {
+      target: '/providers',
+      label: t('providers'),
+      icon: Sparkles,
+    },
+    {
+      target: '/channels',
+      label: t('channels'),
+      icon: MessageSquare,
+    },
+    {
+      target: '/runtime',
+      label: t('runtime'),
+      icon: GitBranch,
+    },
+    {
+      target: '/sessions',
+      label: t('sessions'),
+      icon: History,
+    },
+    {
+      target: '/cron',
+      label: t('cron'),
+      icon: AlarmClock,
+    },
+    {
+      target: '/marketplace',
+      label: t('marketplace'),
+      icon: Store,
+    }
+  ];
 
   return (
     <aside className="w-[240px] bg-[#f0f2f7] flex flex-col h-full py-6 px-4">
@@ -92,6 +104,24 @@ export function Sidebar() {
 
       {/* Help Button */}
       <div className="pt-3 border-t border-[#dde0ea] mt-3">
+        <div className="mb-2">
+          <Select value={language} onValueChange={(value) => handleLanguageSwitch(value as I18nLanguage)}>
+            <SelectTrigger className="w-full h-auto rounded-xl border-0 bg-transparent shadow-none px-3 py-2.5 text-[14px] font-medium text-gray-600 hover:bg-[#e4e7ef] focus:ring-0">
+              <div className="flex items-center gap-3 min-w-0">
+                <Languages className="h-[17px] w-[17px] text-gray-400" />
+                <span className="text-left">{t('language')}</span>
+              </div>
+              <span className="ml-auto text-xs text-gray-500">{currentLanguageLabel}</span>
+            </SelectTrigger>
+            <SelectContent>
+              {LANGUAGE_OPTIONS.map((option) => (
+                <SelectItem key={option.value} value={option.value} className="text-xs">
+                  {option.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
         <button
           onClick={() => docBrowser.open()}
           className="w-full flex items-center gap-3 px-3 py-2.5 rounded-xl text-[14px] font-medium transition-all duration-base text-gray-600 hover:bg-[#e4e7ef] hover:text-gray-800"