feat: v0.13.0 — add i18n support with Chinese/English translations

Implements a zero-dependency i18n framework with TypeScript type safety.
Thanks to @gy212 for the original i18n infrastructure design (PR #89)
and comprehensive translation files (PR #90-96) that inspired this implementation.

## New files (5)

- src/i18n/en.ts: English translations (source of truth, ~270 keys),
  exports TranslationKey type for compile-time key completeness
- src/i18n/zh.ts: Chinese translations, typed as Record<TranslationKey, string>
- src/i18n/index.ts: translate() function with {param} interpolation,
  Locale type, SUPPORTED_LOCALES array
- src/components/layout/I18nProvider.tsx: React Context provider,
  loads/persists locale preference via /api/settings/app
- src/hooks/useTranslation.ts: useTranslation() hook returning
  { locale, setLocale, t }

## Infrastructure wiring

- src/app/layout.tsx: I18nProvider wrapped inside ThemeProvider
- src/app/api/settings/app/route.ts: added "locale" to ALLOWED_KEYS
  for persistence

## Language picker

- src/components/settings/GeneralSection.tsx: added language selection
  dropdown (Select component) in Settings > General, using
  SUPPORTED_LOCALES and setLocale()

## String replacements (33 component files)

All hardcoded user-facing strings replaced with t() calls:

High priority (chat):
- ChatListPanel.tsx: session list, search, empty state, relative time
- NavRail.tsx: nav labels, theme toggle, auto-approve indicator
- MessageInput.tsx: command descriptions, mode labels, attach tooltip
- MessageList.tsx: empty state, load earlier, loading indicator
- StreamingMessage.tsx: thinking, permission actions
- chat/[id]/page.tsx: session title fallback

Settings:
- GeneralSection.tsx: update card, auto-approve section, warning dialog
- SettingsLayout.tsx: title, description, sidebar labels
- CliSettingsSection.tsx: form/json tabs, buttons, dynamic field labels
  (skipDangerousModePermissionPrompt etc.), Enabled/Disabled states
- ProviderForm.tsx: dialog title, form labels, buttons
- ProviderManager.tsx: status badges, delete dialog, section headers

Extensions:
- extensions/page.tsx: title, tab labels
- SkillsManager.tsx: empty state, loading, search
- SkillEditor.tsx: toolbar buttons, placeholder
- SkillListItem.tsx: delete confirmation
- CreateSkillDialog.tsx: form labels, scope, templates, validation

Plugins:
- McpManager.tsx: header, tabs, loading state
- McpServerList.tsx: empty state, badges, field labels
- McpServerEditor.tsx: dialog title, form labels, buttons
- ConfigEditor.tsx: save/format buttons

Layout:
- RightPanel.tsx: panel header, open/close tooltips
- FileTree.tsx: search placeholder, empty states
- FilePreview.tsx: back button, line count, copy path
- DocPreview.tsx: iframe title
- ConnectionStatus.tsx: install prompts, version display
- InstallWizard.tsx: phase descriptions, button labels
- ImportSessionDialog.tsx: search, relative time, import buttons
- FolderPicker.tsx: dialog title, loading, buttons
- TaskList.tsx: filter tabs, input placeholder, empty states

Author: 7418

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "codepilot",
-  "version": "0.12.0",
+  "version": "0.13.0",
   "private": true,
   "author": {
     "name": "op7418",

package.json

@@ -10,6 +10,7 @@ const ALLOWED_KEYS = [
   'anthropic_auth_token',
   'anthropic_base_url',
   'dangerously_skip_permissions',
+  'locale',
 ];
 
 export async function GET() {

src/app/api/settings/app/route.ts

@@ -9,6 +9,7 @@ import { Loading02Icon, PencilEdit01Icon } from "@hugeicons/core-free-icons";
 import { Input } from '@/components/ui/input';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
 import { usePanel } from '@/hooks/usePanel';
+import { useTranslation } from '@/hooks/useTranslation';
 
 interface ChatSessionPageProps {
   params: Promise<{ id: string }>;
@@ -29,9 +30,10 @@ export default function ChatSessionPage({ params }: ChatSessionPageProps) {
   const [editTitle, setEditTitle] = useState('');
   const titleInputRef = useRef<HTMLInputElement>(null);
   const { setWorkingDirectory, setSessionId, setSessionTitle: setPanelSessionTitle, setPanelOpen } = usePanel();
+  const { t } = useTranslation();
 
   const handleStartEditTitle = useCallback(() => {
-    setEditTitle(sessionTitle || 'New Conversation');
+    setEditTitle(sessionTitle || t('chat.newConversation'));
     setIsEditingTitle(true);
   }, [sessionTitle]);
 
@@ -88,7 +90,7 @@ export default function ChatSessionPage({ params }: ChatSessionPageProps) {
           }
           setSessionId(id);
           setPanelOpen(true);
-          const title = data.session.title || 'New Conversation';
+          const title = data.session.title || t('chat.newConversation');
           setSessionTitle(title);
           setPanelSessionTitle(title);
           setSessionModel(data.session.model || '');

src/app/chat/[id]/page.tsx

@@ -7,6 +7,7 @@ import { HugeiconsIcon } from "@hugeicons/react";
 import { Loading02Icon } from "@hugeicons/core-free-icons";
 import { SkillsManager } from "@/components/skills/SkillsManager";
 import { McpManager } from "@/components/plugins/McpManager";
+import { useTranslation } from "@/hooks/useTranslation";
 
 type ExtTab = "skills" | "mcp";
 
@@ -28,15 +29,16 @@ function ExtensionsPageInner() {
   const searchParams = useSearchParams();
   const initialTab = (searchParams.get("tab") as ExtTab) || "skills";
   const [tab, setTab] = useState<ExtTab>(initialTab);
+  const { t } = useTranslation();
 
   return (
     <div className="flex h-full flex-col">
       <div className="px-6 pt-4 pb-0">
-        <h1 className="text-xl font-semibold mb-3">Extensions</h1>
+        <h1 className="text-xl font-semibold mb-3">{t('extensions.title')}</h1>
         <Tabs value={tab} onValueChange={(v) => setTab(v as ExtTab)}>
           <TabsList>
-            <TabsTrigger value="skills">Skills</TabsTrigger>
-            <TabsTrigger value="mcp">MCP Servers</TabsTrigger>
+            <TabsTrigger value="skills">{t('extensions.skills')}</TabsTrigger>
+            <TabsTrigger value="mcp">{t('extensions.mcpServers')}</TabsTrigger>
           </TabsList>
         </Tabs>
       </div>

src/app/extensions/page.tsx

@@ -2,6 +2,7 @@ import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
 import { ThemeProvider } from "@/components/layout/ThemeProvider";
+import { I18nProvider } from "@/components/layout/I18nProvider";
 import { AppShell } from "@/components/layout/AppShell";
 
 const geistSans = Geist({
@@ -30,7 +31,9 @@ export default function RootLayout({
         className={`${geistSans.variable} ${geistMono.variable} antialiased`}
       >
         <ThemeProvider>
-          <AppShell>{children}</AppShell>
+          <I18nProvider>
+            <AppShell>{children}</AppShell>
+          </I18nProvider>
         </ThemeProvider>
       </body>
     </html>

src/app/layout.tsx

@@ -19,6 +19,7 @@ import {
 } from '@/components/ui/dropdown-menu';
 import { Input } from '@/components/ui/input';
 import { ScrollArea } from '@/components/ui/scroll-area';
+import { useTranslation } from '@/hooks/useTranslation';
 
 interface FolderEntry {
   name: string;
@@ -40,6 +41,7 @@ interface FolderPickerProps {
 }
 
 export function FolderPicker({ open, onOpenChange, onSelect, initialPath }: FolderPickerProps) {
+  const { t } = useTranslation();
   const [currentDir, setCurrentDir] = useState('');
   const [parentDir, setParentDir] = useState<string | null>(null);
   const [directories, setDirectories] = useState<FolderEntry[]>([]);
@@ -99,7 +101,7 @@ export function FolderPicker({ open, onOpenChange, onSelect, initialPath }: Fold
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent className="max-w-lg overflow-hidden">
         <DialogHeader>
-          <DialogTitle>Select Project Folder</DialogTitle>
+          <DialogTitle>{t('folderPicker.title')}</DialogTitle>
         </DialogHeader>
 
         {/* Path input */}
@@ -162,11 +164,11 @@ export function FolderPicker({ open, onOpenChange, onSelect, initialPath }: Fold
           <ScrollArea className="h-64">
             {loading ? (
               <div className="flex items-center justify-center py-8 text-sm text-muted-foreground">
-                Loading...
+                {t('folderPicker.loading')}
               </div>
             ) : directories.length === 0 ? (
               <div className="flex items-center justify-center py-8 text-sm text-muted-foreground">
-                No subdirectories
+                {t('folderPicker.noSubdirs')}
               </div>
             ) : (
               <div className="p-1">
@@ -188,11 +190,11 @@ export function FolderPicker({ open, onOpenChange, onSelect, initialPath }: Fold
 
         <DialogFooter>
           <Button variant="outline" onClick={() => onOpenChange(false)}>
-            Cancel
+            {t('folderPicker.cancel')}
           </Button>
           <Button onClick={handleSelect} className="gap-2">
             <HugeiconsIcon icon={FolderOpenIcon} className="h-4 w-4" />
-            Select This Folder
+            {t('folderPicker.select')}
           </Button>
         </DialogFooter>
       </DialogContent>

src/components/chat/FolderPicker.tsx

@@ -21,6 +21,8 @@ import {
   StopIcon,
 } from "@hugeicons/core-free-icons";
 import { cn } from '@/lib/utils';
+import { useTranslation } from '@/hooks/useTranslation';
+import type { TranslationKey } from '@/i18n';
 import {
   PromptInput,
   PromptInputTextarea,
@@ -65,6 +67,7 @@ interface PopoverItem {
   label: string;
   value: string;
   description?: string;
+  descriptionKey?: TranslationKey;
   builtIn?: boolean;
   immediate?: boolean;
   installedSource?: "agents" | "claude";
@@ -91,15 +94,15 @@ const COMMAND_PROMPTS: Record<string, string> = {
 };
 
 const BUILT_IN_COMMANDS: PopoverItem[] = [
-  { label: 'help', value: '/help', description: 'Show available commands and tips', builtIn: true, immediate: true, icon: HelpCircleIcon },
-  { label: 'clear', value: '/clear', description: 'Clear conversation history', builtIn: true, immediate: true, icon: Delete02Icon },
-  { label: 'cost', value: '/cost', description: 'Show token usage statistics', builtIn: true, immediate: true, icon: Coins01Icon },
-  { label: 'compact', value: '/compact', description: 'Compress conversation context', builtIn: true, icon: FileZipIcon },
-  { label: 'doctor', value: '/doctor', description: 'Diagnose project health', builtIn: true, icon: Stethoscope02Icon },
-  { label: 'init', value: '/init', description: 'Initialize CLAUDE.md for project', builtIn: true, icon: FileEditIcon },
-  { label: 'review', value: '/review', description: 'Review code quality', builtIn: true, icon: SearchList01Icon },
-  { label: 'terminal-setup', value: '/terminal-setup', description: 'Configure terminal settings', builtIn: true, icon: CommandLineIcon },
-  { label: 'memory', value: '/memory', description: 'Edit project memory file', builtIn: true, icon: BrainIcon },
+  { label: 'help', value: '/help', description: 'Show available commands and tips', descriptionKey: 'messageInput.helpDesc', builtIn: true, immediate: true, icon: HelpCircleIcon },
+  { label: 'clear', value: '/clear', description: 'Clear conversation history', descriptionKey: 'messageInput.clearDesc', builtIn: true, immediate: true, icon: Delete02Icon },
+  { label: 'cost', value: '/cost', description: 'Show token usage statistics', descriptionKey: 'messageInput.costDesc', builtIn: true, immediate: true, icon: Coins01Icon },
+  { label: 'compact', value: '/compact', description: 'Compress conversation context', descriptionKey: 'messageInput.compactDesc', builtIn: true, icon: FileZipIcon },
+  { label: 'doctor', value: '/doctor', description: 'Diagnose project health', descriptionKey: 'messageInput.doctorDesc', builtIn: true, icon: Stethoscope02Icon },
+  { label: 'init', value: '/init', description: 'Initialize CLAUDE.md for project', descriptionKey: 'messageInput.initDesc', builtIn: true, icon: FileEditIcon },
+  { label: 'review', value: '/review', description: 'Review code quality', descriptionKey: 'messageInput.reviewDesc', builtIn: true, icon: SearchList01Icon },
+  { label: 'terminal-setup', value: '/terminal-setup', description: 'Configure terminal settings', descriptionKey: 'messageInput.terminalSetupDesc', builtIn: true, icon: CommandLineIcon },
+  { label: 'memory', value: '/memory', description: 'Edit project memory file', descriptionKey: 'messageInput.memoryDesc', builtIn: true, icon: BrainIcon },
 ];
 
 interface ModeOption {
@@ -183,11 +186,12 @@ function FileAwareSubmitButton({
  */
 function AttachFileButton() {
   const attachments = usePromptInputAttachments();
+  const { t } = useTranslation();
 
   return (
     <PromptInputButton
       onClick={() => attachments.openFileDialog()}
-      tooltip="Attach files"
+      tooltip={t('messageInput.attachFiles')}
     >
       <HugeiconsIcon icon={PlusSignIcon} className="h-3.5 w-3.5" />
     </PromptInputButton>
@@ -331,6 +335,7 @@ export function MessageInput({
   mode = 'code',
   onModeChange,
 }: MessageInputProps) {
+  const { t } = useTranslation();
   const textareaRef = useRef<HTMLTextAreaElement>(null);
   const popoverRef = useRef<HTMLDivElement>(null);
   const searchInputRef = useRef<HTMLInputElement>(null);
@@ -752,9 +757,9 @@ export function MessageInput({
                   <HugeiconsIcon icon={CommandLineIcon} className="h-4 w-4 shrink-0 text-muted-foreground" />
                 )}
                 <span className="font-mono text-xs truncate">{item.label}</span>
-                {item.description && (
+                {(item.descriptionKey || item.description) && (
                   <span className="text-xs text-muted-foreground truncate max-w-[200px]">
-                    {item.description}
+                    {item.descriptionKey ? t(item.descriptionKey) : item.description}
                   </span>
                 )}
                 {!item.builtIn && item.installedSource && (
@@ -919,7 +924,7 @@ export function MessageInput({
                         )}
                         onClick={() => onModeChange?.(opt.value)}
                       >
-                        {opt.label}
+                        {opt.value === 'code' ? t('messageInput.modeCode') : opt.value === 'plan' ? t('messageInput.modePlan') : opt.label}
                       </button>
                     );
                   })}

src/components/chat/MessageInput.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { useRef, useEffect } from 'react';
+import { useTranslation } from '@/hooks/useTranslation';
 import type { Message, PermissionRequestEvent } from '@/types';
 import {
   Conversation,
@@ -57,6 +58,7 @@ export function MessageList({
   loadingMore,
   onLoadMore,
 }: MessageListProps) {
+  const { t } = useTranslation();
   // Scroll anchor: preserve position when older messages are prepended
   const anchorIdRef = useRef<string | null>(null);
   const prevMessageCountRef = useRef(messages.length);
@@ -86,7 +88,7 @@ export function MessageList({
       <div className="flex flex-1 items-center justify-center">
         <ConversationEmptyState
           title="Claude Chat"
-          description="Start a conversation with Claude. Ask questions, get help with code, or explore ideas."
+          description={t('messageList.emptyDescription')}
           icon={<CodePilotLogo className="h-16 w-16" />}
         />
       </div>
@@ -103,7 +105,7 @@ export function MessageList({
               disabled={loadingMore}
               className="text-sm text-muted-foreground hover:text-foreground transition-colors disabled:opacity-50"
             >
-              {loadingMore ? 'Loading...' : 'Load earlier messages'}
+              {loadingMore ? t('messageList.loading') : t('messageList.loadEarlier')}
             </button>
           </div>
         )}

src/components/chat/MessageList.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import { useState, useEffect, useRef } from 'react';
+import { useTranslation } from '@/hooks/useTranslation';
 import {
   Message as AIMessage,
   MessageContent,
@@ -295,6 +296,7 @@ export function StreamingMessage({
   permissionResolved,
   onForceStop,
 }: StreamingMessageProps) {
+  const { t } = useTranslation();
   const runningTools = toolUses.filter(
     (tool) => !toolResults.some((r) => r.tool_use_id === tool.id)
   );
@@ -430,18 +432,18 @@ export function StreamingMessage({
                     variant="default"
                     onClick={() => onPermissionResponse?.('allow_session')}
                   >
-                    Allow for Session
+                    {t('streaming.allowForSession')}
                   </ConfirmationAction>
                 )}
               </ConfirmationActions>
             </ConfirmationRequest>
 
             <ConfirmationAccepted>
-              <p className="text-xs text-green-600 dark:text-green-400">Allowed</p>
+              <p className="text-xs text-green-600 dark:text-green-400">{t('streaming.allowed')}</p>
             </ConfirmationAccepted>
 
             <ConfirmationRejected>
-              <p className="text-xs text-red-600 dark:text-red-400">Denied</p>
+              <p className="text-xs text-red-600 dark:text-red-400">{t('streaming.denied')}</p>
             </ConfirmationRejected>
           </Confirmation>
         )}
@@ -454,7 +456,7 @@ export function StreamingMessage({
         {/* Loading indicator when no content yet */}
         {isStreaming && !content && toolUses.length === 0 && !pendingPermission && (
           <div className="py-2">
-            <Shimmer>Thinking...</Shimmer>
+            <Shimmer>{t('streaming.thinking')}</Shimmer>
           </div>
         )}