From 9da8e69476a795ce70f0705d444208f5e77ad910 Mon Sep 17 00:00:00 2001
From: Haileyesus Dessie <118998054+blackmammoth@users.noreply.github.com>
Date: Wed, 14 Jan 2026 17:01:38 +0300
Subject: [PATCH 01/24] feat: add highlight for file mentions in chat input

---
 src/components/ChatInterface.jsx | 68 +++++++++++++++++++++++++++++++-
 1 file changed, 66 insertions(+), 2 deletions(-)

diff --git a/src/components/ChatInterface.jsx b/src/components/ChatInterface.jsx
index a9d5110..909d718 100644
--- a/src/components/ChatInterface.jsx
+++ b/src/components/ChatInterface.jsx
@@ -93,6 +93,10 @@ function unescapeWithMathProtection(text) {
   return processedText;
 }
 
+function escapeRegExp(value) {
+  return value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+}
+
 // Small wrapper to keep markdown behavior consistent in one place
 const Markdown = ({ children, className }) => {
   const content = normalizeInlineCodeFences(String(children ?? ''));
@@ -1855,6 +1859,7 @@ function ChatInterface({ selectedProject, selectedSession, ws, sendMessage, mess
   const messagesEndRef = useRef(null);
   const textareaRef = useRef(null);
   const inputContainerRef = useRef(null);
+  const inputHighlightRef = useRef(null);
   const scrollContainerRef = useRef(null);
   const isLoadingSessionRef = useRef(false); // Track session loading to prevent multiple scrolls
   const isLoadingMoreRef = useRef(false);
@@ -1867,6 +1872,7 @@ function ChatInterface({ selectedProject, selectedSession, ws, sendMessage, mess
   const [debouncedInput, setDebouncedInput] = useState('');
   const [showFileDropdown, setShowFileDropdown] = useState(false);
   const [fileList, setFileList] = useState([]);
+  const [fileMentions, setFileMentions] = useState([]);
   const [filteredFiles, setFilteredFiles] = useState([]);
   const [selectedFileIndex, setSelectedFileIndex] = useState(-1);
   const [cursorPosition, setCursorPosition] = useState(0);
@@ -3962,6 +3968,7 @@ function ChatInterface({ selectedProject, selectedSession, ws, sendMessage, mess
     return result;
   };
 
+
   // Handle @ symbol detection and file filtering
   useEffect(() => {
     const textBeforeCursor = input.slice(0, cursorPosition);
@@ -3992,6 +3999,43 @@ function ChatInterface({ selectedProject, selectedSession, ws, sendMessage, mess
     }
   }, [input, cursorPosition, fileList]);
 
+  const activeFileMentions = useMemo(() => {
+    if (!input || fileMentions.length === 0) return [];
+    return fileMentions.filter(path => input.includes(path));
+  }, [fileMentions, input]);
+
+  const sortedFileMentions = useMemo(() => {
+    if (activeFileMentions.length === 0) return [];
+    const unique = Array.from(new Set(activeFileMentions));
+    return unique.sort((a, b) => b.length - a.length);
+  }, [activeFileMentions]);
+
+  const fileMentionRegex = useMemo(() => {
+    if (sortedFileMentions.length === 0) return null;
+    const pattern = sortedFileMentions.map(escapeRegExp).join('|');
+    return new RegExp(`(${pattern})`, 'g');
+  }, [sortedFileMentions]);
+
+  const fileMentionSet = useMemo(() => new Set(sortedFileMentions), [sortedFileMentions]);
+
+  const renderInputWithMentions = useCallback((text) => {
+    if (!text) return '';
+    if (!fileMentionRegex) return text;
+    const parts = text.split(fileMentionRegex);
+    return parts.map((part, index) => (
+      fileMentionSet.has(part) ? (
+        <span
+          key={`mention-${index}`}
+          className="bg-blue-200/70 -ml-0.5 dark:bg-blue-300/40 px-0.5 rounded-md box-decoration-clone text-transparent"
+        >
+          {part}
+        </span>
+      ) : (
+        <span key={`text-${index}`}>{part}</span>
+      )
+    ));
+  }, [fileMentionRegex, fileMentionSet]);
+
   // Debounced input handling
   useEffect(() => {
     const timer = setTimeout(() => {
@@ -4566,8 +4610,8 @@ function ChatInterface({ selectedProject, selectedSession, ws, sendMessage, mess
     const spaceIndex = textAfterAtQuery.indexOf(' ');
     const textAfterQuery = spaceIndex !== -1 ? textAfterAtQuery.slice(spaceIndex) : '';
     
-    const newInput = textBeforeAt + '@' + file.path + ' ' + textAfterQuery;
-    const newCursorPos = textBeforeAt.length + 1 + file.path.length + 1;
+    const newInput = textBeforeAt + file.path + ' ' + textAfterQuery;
+    const newCursorPos = textBeforeAt.length + file.path.length + 1;
     
     // Immediately ensure focus is maintained
     if (textareaRef.current && !textareaRef.current.matches(':focus')) {
@@ -4577,6 +4621,7 @@ function ChatInterface({ selectedProject, selectedSession, ws, sendMessage, mess
     // Update input and cursor position
     setInput(newInput);
     setCursorPosition(newCursorPos);
+    setFileMentions(prev => (prev.includes(file.path) ? prev : [...prev, file.path]));
     
     // Hide dropdown
     setShowFileDropdown(false);
@@ -4670,6 +4715,12 @@ function ChatInterface({ selectedProject, selectedSession, ws, sendMessage, mess
     }
   };
 
+  const syncInputOverlayScroll = useCallback((target) => {
+    if (!inputHighlightRef.current || !target) return;
+    inputHighlightRef.current.scrollTop = target.scrollTop;
+    inputHighlightRef.current.scrollLeft = target.scrollLeft;
+  }, []);
+
   const handleTextareaClick = (e) => {
     setCursorPosition(e.target.selectionStart);
   };
@@ -5370,6 +5421,16 @@ function ChatInterface({ selectedProject, selectedSession, ws, sendMessage, mess
 
           <div {...getRootProps()} className={`relative bg-white dark:bg-gray-800 rounded-2xl shadow-lg border border-gray-200 dark:border-gray-600 focus-within:ring-2 focus-within:ring-blue-500 dark:focus-within:ring-blue-500 focus-within:border-blue-500 transition-all duration-200 overflow-hidden ${isTextareaExpanded ? 'chat-input-expanded' : ''}`}>
             <input {...getInputProps()} />
+            <div
+              ref={inputHighlightRef}
+              aria-hidden="true"
+              className="absolute inset-0 pointer-events-none overflow-hidden rounded-2xl"
+            >
+              <div className="chat-input-placeholder block w-full pl-12 pr-20 sm:pr-40 py-1.5 sm:py-4 text-transparent text-sm sm:text-base leading-[21px] sm:leading-6 whitespace-pre-wrap break-words">
+                {renderInputWithMentions(input)}
+              </div>
+            </div>
+            <div className="relative z-10">
             <textarea
               ref={textareaRef}
               value={input}
@@ -5377,6 +5438,7 @@ function ChatInterface({ selectedProject, selectedSession, ws, sendMessage, mess
               onClick={handleTextareaClick}
               onKeyDown={handleKeyDown}
               onPaste={handlePaste}
+              onScroll={(e) => syncInputOverlayScroll(e.target)}
               onFocus={() => setIsInputFocused(true)}
               onBlur={() => setIsInputFocused(false)}
               onInput={(e) => {
@@ -5384,6 +5446,7 @@ function ChatInterface({ selectedProject, selectedSession, ws, sendMessage, mess
                 e.target.style.height = 'auto';
                 e.target.style.height = e.target.scrollHeight + 'px';
                 setCursorPosition(e.target.selectionStart);
+                syncInputOverlayScroll(e.target);
 
                 // Check if textarea is expanded (more than 2 lines worth of height)
                 const lineHeight = parseInt(window.getComputedStyle(e.target).lineHeight);
@@ -5452,6 +5515,7 @@ function ChatInterface({ selectedProject, selectedSession, ws, sendMessage, mess
                 ? "Ctrl+Enter to send • Shift+Enter for new line • Tab to change modes • / for slash commands"
                 : "Enter to send • Shift+Enter for new line • Tab to change modes • / for slash commands"}
             </div>
+            </div>
           </div>
         </form>
       </div>

From 1f6c0c38996334cd2f670a4c17c9484bb4e0ed27 Mon Sep 17 00:00:00 2001
From: Valics Lehel <lvalics@gmail.com>
Date: Fri, 11 Jul 2025 22:16:57 +0300
Subject: [PATCH 02/24] feat: Add thinking mode selector to chat interface

- Added ThinkingModeSelector component with 5 thinking modes
- Integrated selector into chat header next to permission mode
- Automatically prefixes messages with thinking instructions
- Resets to default mode after sending message
---
 src/components/ChatInterface.jsx        |  17 +++
 src/components/ThinkingModeSelector.jsx | 164 ++++++++++++++++++++++++
 2 files changed, 181 insertions(+)
 create mode 100644 src/components/ThinkingModeSelector.jsx

diff --git a/src/components/ChatInterface.jsx b/src/components/ChatInterface.jsx
index a9d5110..f0a26cf 100644
--- a/src/components/ChatInterface.jsx
+++ b/src/components/ChatInterface.jsx
@@ -33,6 +33,7 @@ import ClaudeStatus from './ClaudeStatus';
 import TokenUsagePie from './TokenUsagePie';
 import { MicButton } from './MicButton.jsx';
 import { api, authenticatedFetch } from '../utils/api';
+import ThinkingModeSelector, { thinkingModes } from './ThinkingModeSelector.jsx';
 import Fuse from 'fuse.js';
 import CommandMenu from './CommandMenu';
 import { CLAUDE_MODELS, CURSOR_MODELS, CODEX_MODELS } from '../../shared/modelConstants';
@@ -1884,6 +1885,7 @@ function ChatInterface({ selectedProject, selectedSession, ws, sendMessage, mess
   const [slashPosition, setSlashPosition] = useState(-1);
   const [visibleMessageCount, setVisibleMessageCount] = useState(100);
   const [claudeStatus, setClaudeStatus] = useState(null);
+  const [thinkingMode, setThinkingMode] = useState('none');
   const [provider, setProvider] = useState(() => {
     return localStorage.getItem('selected-provider') || 'claude';
   });
@@ -4226,6 +4228,13 @@ function ChatInterface({ selectedProject, selectedSession, ws, sendMessage, mess
     e.preventDefault();
     if (!input.trim() || isLoading || !selectedProject) return;
 
+    // Apply thinking mode prefix if selected
+    let messageContent = input;
+    const selectedThinkingMode = thinkingModes.find(mode => mode.id === thinkingMode);
+    if (selectedThinkingMode && selectedThinkingMode.prefix) {
+      messageContent = `${selectedThinkingMode.prefix}: ${input}`;
+    }
+
     // Upload images first if any
     let uploadedImages = [];
     if (attachedImages.length > 0) {
@@ -4365,6 +4374,7 @@ function ChatInterface({ selectedProject, selectedSession, ws, sendMessage, mess
     setUploadingImages(new Map());
     setImageErrors(new Map());
     setIsTextareaExpanded(false);
+    setThinkingMode('none'); // Reset thinking mode after sending
 
     // Reset textarea height
     if (textareaRef.current) {
@@ -5180,6 +5190,13 @@ function ChatInterface({ selectedProject, selectedSession, ws, sendMessage, mess
                 </span>
               </div>
             </button>
+            
+            {/* Thinking Mode Selector */}
+            <ThinkingModeSelector
+              selectedMode={thinkingMode}
+              onModeChange={setThinkingMode}
+              className=""
+            />
             {/* Token usage pie chart - positioned next to mode indicator */}
             <TokenUsagePie
               used={tokenBudget?.used || 0}
diff --git a/src/components/ThinkingModeSelector.jsx b/src/components/ThinkingModeSelector.jsx
new file mode 100644
index 0000000..758ad40
--- /dev/null
+++ b/src/components/ThinkingModeSelector.jsx
@@ -0,0 +1,164 @@
+import React, { useState, useRef, useEffect } from 'react';
+import { Brain, Zap, Sparkles, Atom, X } from 'lucide-react';
+
+const thinkingModes = [
+  {
+    id: 'none',
+    name: 'Standard',
+    description: 'Regular Claude response',
+    icon: null,
+    prefix: '',
+    color: 'text-gray-600'
+  },
+  {
+    id: 'think',
+    name: 'Think',
+    description: 'Basic extended thinking',
+    icon: Brain,
+    prefix: 'think',
+    color: 'text-blue-600'
+  },
+  {
+    id: 'think-hard',
+    name: 'Think Hard',
+    description: 'More thorough evaluation',
+    icon: Zap,
+    prefix: 'think hard',
+    color: 'text-purple-600'
+  },
+  {
+    id: 'think-harder',
+    name: 'Think Harder',
+    description: 'Deep analysis with alternatives',
+    icon: Sparkles,
+    prefix: 'think harder',
+    color: 'text-indigo-600'
+  },
+  {
+    id: 'ultrathink',
+    name: 'Ultrathink',
+    description: 'Maximum thinking budget',
+    icon: Atom,
+    prefix: 'ultrathink',
+    color: 'text-red-600'
+  }
+];
+
+function ThinkingModeSelector({ selectedMode, onModeChange, onClose, className = '' }) {
+  const [isOpen, setIsOpen] = useState(false);
+  const dropdownRef = useRef(null);
+
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+        setIsOpen(false);
+        if (onClose) onClose();
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, [onClose]);
+
+  const currentMode = thinkingModes.find(mode => mode.id === selectedMode) || thinkingModes[0];
+  const IconComponent = currentMode.icon || Brain;
+
+  return (
+    <div className={`relative ${className}`} ref={dropdownRef}>
+      <button
+        type="button"
+        onClick={() => setIsOpen(!isOpen)}
+        className={`w-10 h-10 sm:w-10 sm:h-10 rounded-full flex items-center justify-center transition-all duration-200 ${
+          selectedMode === 'none' 
+            ? 'bg-gray-100 hover:bg-gray-200 dark:bg-gray-700 dark:hover:bg-gray-600' 
+            : 'bg-blue-100 hover:bg-blue-200 dark:bg-blue-900 dark:hover:bg-blue-800'
+        }`}
+        title={`Thinking mode: ${currentMode.name}`}
+      >
+        <IconComponent className={`w-5 h-5 ${currentMode.color}`} />
+      </button>
+
+      {isOpen && (
+        <div className="absolute bottom-full right-0 mb-2 w-64 bg-white dark:bg-gray-800 rounded-lg shadow-xl border border-gray-200 dark:border-gray-700 overflow-hidden">
+          <div className="p-3 border-b border-gray-200 dark:border-gray-700">
+            <div className="flex items-center justify-between">
+              <h3 className="text-sm font-semibold text-gray-900 dark:text-white">
+                Thinking Mode
+              </h3>
+              <button
+                onClick={() => {
+                  setIsOpen(false);
+                  if (onClose) onClose();
+                }}
+                className="p-1 hover:bg-gray-100 dark:hover:bg-gray-700 rounded"
+              >
+                <X className="w-4 h-4 text-gray-500" />
+              </button>
+            </div>
+            <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
+              Extended thinking gives Claude more time to evaluate alternatives
+            </p>
+          </div>
+          
+          <div className="py-1">
+            {thinkingModes.map((mode) => {
+              const ModeIcon = mode.icon;
+              const isSelected = mode.id === selectedMode;
+              
+              return (
+                <button
+                  key={mode.id}
+                  onClick={() => {
+                    onModeChange(mode.id);
+                    setIsOpen(false);
+                    if (onClose) onClose();
+                  }}
+                  className={`w-full px-4 py-3 text-left hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors ${
+                    isSelected ? 'bg-gray-50 dark:bg-gray-700' : ''
+                  }`}
+                >
+                  <div className="flex items-start gap-3">
+                    <div className={`mt-0.5 ${mode.icon ? mode.color : 'text-gray-400'}`}>
+                      {ModeIcon ? <ModeIcon className="w-5 h-5" /> : <div className="w-5 h-5" />}
+                    </div>
+                    <div className="flex-1 min-w-0">
+                      <div className="flex items-center gap-2">
+                        <span className={`font-medium text-sm ${
+                          isSelected ? 'text-gray-900 dark:text-white' : 'text-gray-700 dark:text-gray-300'
+                        }`}>
+                          {mode.name}
+                        </span>
+                        {isSelected && (
+                          <span className="text-xs bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300 px-2 py-0.5 rounded">
+                            Active
+                          </span>
+                        )}
+                      </div>
+                      <p className="text-xs text-gray-500 dark:text-gray-400 mt-0.5">
+                        {mode.description}
+                      </p>
+                      {mode.prefix && (
+                        <code className="text-xs bg-gray-100 dark:bg-gray-700 px-1.5 py-0.5 rounded mt-1 inline-block">
+                          {mode.prefix}
+                        </code>
+                      )}
+                    </div>
+                  </div>
+                </button>
+              );
+            })}
+          </div>
+          
+          <div className="p-3 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900">
+            <p className="text-xs text-gray-600 dark:text-gray-400">
+              <strong>Tip:</strong> Higher thinking modes take more time but provide more thorough analysis
+            </p>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}
+
+export default ThinkingModeSelector;
+export { thinkingModes };
\ No newline at end of file

From e73960ae783b9f087bef3ae5d8992a6d9eb09d10 Mon Sep 17 00:00:00 2001
From: Haileyesus Dessie <118998054+blackmammoth@users.noreply.github.com>
Date: Thu, 15 Jan 2026 21:08:30 +0300
Subject: [PATCH 03/24] feat: Conditionally render Thinking Mode Selector for
 Claude provider

---
 src/components/ChatInterface.jsx | 16 ++++++++++------
 1 file changed, 10 insertions(+), 6 deletions(-)

diff --git a/src/components/ChatInterface.jsx b/src/components/ChatInterface.jsx
index f0a26cf..3d2ee24 100644
--- a/src/components/ChatInterface.jsx
+++ b/src/components/ChatInterface.jsx
@@ -5191,12 +5191,16 @@ function ChatInterface({ selectedProject, selectedSession, ws, sendMessage, mess
               </div>
             </button>
             
-            {/* Thinking Mode Selector */}
-            <ThinkingModeSelector
-              selectedMode={thinkingMode}
-              onModeChange={setThinkingMode}
-              className=""
-            />
+              {/* Thinking Mode Selector */}
+              {
+                provider === 'claude' && (
+
+                  <ThinkingModeSelector
+                    selectedMode={thinkingMode}
+                    onModeChange={setThinkingMode}
+                    className=""
+                  />
+                )}
             {/* Token usage pie chart - positioned next to mode indicator */}
             <TokenUsagePie
               used={tokenBudget?.used || 0}

From 421667639504037034f6e1590a2ba992c4ba3360 Mon Sep 17 00:00:00 2001
From: YuanNiancai <yuanniancai@formulas.cc>
Date: Fri, 16 Jan 2026 19:11:19 +0800
Subject: [PATCH 04/24] add i18n feat && Add partial translation

---
 README.md                                     |   2 +
 README.zh-CN.md                               | 371 ++++++++++++++
 openspec/AGENTS.md                            | 456 ++++++++++++++++++
 openspec/AGENTS.zh-CN.md                      | 456 ++++++++++++++++++
 openspec/changes/add-i18n-support/design.md   | 246 ++++++++++
 openspec/changes/add-i18n-support/proposal.md |  51 ++
 .../add-i18n-support/specs/i18n/spec.md       | 202 ++++++++
 .../specs/user-interface/spec.md              | 176 +++++++
 openspec/project.md                           | 285 +++++++++++
 openspec/project.zh-CN.md                     | 285 +++++++++++
 package-lock.json                             | 111 ++++-
 package.json                                  |   3 +
 src/App.jsx                                   |  40 +-
 src/components/FileTree.jsx                   |  44 +-
 src/components/LanguageSelector.jsx           |  74 +++
 src/components/LoginForm.jsx                  |  30 +-
 src/components/MainContent.jsx                |  38 +-
 src/components/ProjectCreationWizard.jsx      | 102 ++--
 src/components/QuickSettingsPanel.jsx         |  42 +-
 src/components/Settings.jsx                   |  14 +-
 src/components/Sidebar.jsx                    | 146 +++---
 src/i18n/config.js                            | 121 +++++
 src/i18n/languages.js                         |  48 ++
 src/i18n/locales/en/auth.json                 |  37 ++
 src/i18n/locales/en/common.json               | 190 ++++++++
 src/i18n/locales/en/settings.json             |  75 +++
 src/i18n/locales/en/sidebar.json              | 102 ++++
 src/i18n/locales/zh-CN/auth.json              |  37 ++
 src/i18n/locales/zh-CN/common.json            | 190 ++++++++
 src/i18n/locales/zh-CN/settings.json          |  75 +++
 src/i18n/locales/zh-CN/sidebar.json           | 102 ++++
 src/main.jsx                                  |   3 +
 32 files changed, 3934 insertions(+), 220 deletions(-)
 create mode 100644 README.zh-CN.md
 create mode 100644 openspec/AGENTS.md
 create mode 100644 openspec/AGENTS.zh-CN.md
 create mode 100644 openspec/changes/add-i18n-support/design.md
 create mode 100644 openspec/changes/add-i18n-support/proposal.md
 create mode 100644 openspec/changes/add-i18n-support/specs/i18n/spec.md
 create mode 100644 openspec/changes/add-i18n-support/specs/user-interface/spec.md
 create mode 100644 openspec/project.md
 create mode 100644 openspec/project.zh-CN.md
 create mode 100644 src/components/LanguageSelector.jsx
 create mode 100644 src/i18n/config.js
 create mode 100644 src/i18n/languages.js
 create mode 100644 src/i18n/locales/en/auth.json
 create mode 100644 src/i18n/locales/en/common.json
 create mode 100644 src/i18n/locales/en/settings.json
 create mode 100644 src/i18n/locales/en/sidebar.json
 create mode 100644 src/i18n/locales/zh-CN/auth.json
 create mode 100644 src/i18n/locales/zh-CN/common.json
 create mode 100644 src/i18n/locales/zh-CN/settings.json
 create mode 100644 src/i18n/locales/zh-CN/sidebar.json

diff --git a/README.md b/README.md
index b01ce35..2303365 100644
--- a/README.md
+++ b/README.md
@@ -6,6 +6,8 @@
 
 A desktop and mobile UI for [Claude Code](https://docs.anthropic.com/en/docs/claude-code), [Cursor CLI](https://docs.cursor.com/en/cli/overview) and [Codex](https://developers.openai.com/codex). You can use it locally or remotely to view your active projects and sessions in Claude Code, Cursor, or Codex and make changes to them from everywhere (mobile or desktop). This gives you a proper interface that works everywhere. 
 
+ [English](./README.md) | [中文](./README.zh-CN.md)
+
 ## Screenshots
 
 <div align="center">
diff --git a/README.zh-CN.md b/README.zh-CN.md
new file mode 100644
index 0000000..0973070
--- /dev/null
+++ b/README.zh-CN.md
@@ -0,0 +1,371 @@
+<div align="center">
+  <img src="public/logo.svg" alt="Claude Code UI" width="64" height="64">
+  <h1>Cloud CLI (aka Claude Code UI)</h1>
+</div>
+
+
+[Claude Code](https://docs.anthropic.com/en/docs/claude-code)、[Cursor CLI](https://docs.cursor.com/en/cli/overview) 和 [Codex](https://developers.openai.com/codex) 的桌面端和移动端界面。您可以在本地或远程使用它来查看 Claude Code、Cursor 或 Codex 中的活跃项目和会话,并从任何地方(移动端或桌面端)对它们进行修改。这为您提供了一个在任何地方都能正常使用的合适界面。
+
+ [English](./README.md) | [中文](./README.zh-CN.md)
+
+## 截图
+
+<div align="center">
+
+<table>
+<tr>
+<td align="center">
+<h3>桌面视图</h3>
+<img src="public/screenshots/desktop-main.png" alt="Desktop Interface" width="400">
+<br>
+<em>显示项目概览和聊天界面的主界面</em>
+</td>
+<td align="center">
+<h3>移动端体验</h3>
+<img src="public/screenshots/mobile-chat.png" alt="Mobile Interface" width="250">
+<br>
+<em>具有触摸导航的响应式移动设计</em>
+</td>
+</tr>
+<tr>
+<td align="center" colspan="2">
+<h3>CLI 选择</h3>
+<img src="public/screenshots/cli-selection.png" alt="CLI Selection" width="400">
+<br>
+<em>在 Claude Code、Cursor CLI 和 Codex 之间选择</em>
+</td>
+</tr>
+</table>
+
+
+
+</div>
+
+## 功能特性
+
+- **响应式设计** - 在桌面、平板和移动设备上无缝运行,您也可以在移动端使用 Claude Code、Cursor 或 Codex
+- **交互式聊天界面** - 内置聊天界面,与 Claude Code、Cursor 或 Codex 无缝通信
+- **集成 Shell 终端** - 通过内置 shell 功能直接访问 Claude Code、Cursor CLI 或 Codex
+- **文件浏览器** - 交互式文件树,支持语法高亮和实时编辑
+- **Git 浏览器** - 查看、暂存和提交您的更改。您还可以切换分支
+- **会话管理** - 恢复对话、管理多个会话并跟踪历史记录
+- **TaskMaster AI 集成** *(可选)* - 通过 AI 驱动的任务规划、PRD 解析和工作流自动化实现高级项目管理
+- **模型兼容性** - 适用于 Claude Sonnet 4.5、Opus 4.5 和 GPT-5.2
+
+
+## 快速开始
+
+### 前置要求
+
+- [Node.js](https://nodejs.org/) v20 或更高版本
+- 已安装并配置 [Claude Code CLI](https://docs.anthropic.com/en/docs/claude-code),和/或
+- 已安装并配置 [Cursor CLI](https://docs.cursor.com/en/cli/overview),和/或
+- 已安装并配置 [Codex](https://developers.openai.com/codex)
+
+### 一键操作(推荐)
+
+无需安装,直接运行:
+
+```bash
+npx @siteboon/claude-code-ui
+```
+
+服务器将启动并可通过 `http://localhost:3001`(或您配置的 PORT)访问。
+
+**重启**: 停止服务器后只需再次运行相同的 `npx` 命令
+
+### 全局安装(供常规使用)
+
+为了频繁使用,一次性全局安装:
+
+```bash
+npm install -g @siteboon/claude-code-ui
+```
+
+然后使用简单命令启动:
+
+```bash
+claude-code-ui
+```
+
+
+**重启**: 使用 Ctrl+C 停止,然后再次运行 `claude-code-ui`。
+
+**更新**:
+```bash
+cloudcli update
+```
+
+### CLI 使用方法
+
+全局安装后,您可以访问 `claude-code-ui` 和 `cloudcli` 命令:
+
+| 命令 / 选项 | 简写 | 描述 |
+|------------------|-------|-------------|
+| `cloudcli` 或 `claude-code-ui` | | 启动服务器(默认) |
+| `cloudcli start` | | 显式启动服务器 |
+| `cloudcli status` | | 显示配置和数据位置 |
+| `cloudcli update` | | 更新到最新版本 |
+| `cloudcli help` | | 显示帮助信息 |
+| `cloudcli version` | | 显示版本信息 |
+| `--port <port>` | `-p` | 设置服务器端口(默认: 3001) |
+| `--database-path <path>` | | 设置自定义数据库位置 |
+
+**示例:**
+```bash
+cloudcli                          # 使用默认设置启动
+cloudcli -p 8080              # 在自定义端口启动
+cloudcli status                   # 显示当前配置
+```
+
+### 作为后台服务运行(推荐用于生产环境)
+
+在生产环境中,使用 PM2(Process Manager 2)将 Claude Code UI 作为后台服务运行:
+
+#### 安装 PM2
+
+```bash
+npm install -g pm2
+```
+
+#### 作为后台服务启动
+
+```bash
+# 在后台启动服务器
+pm2 start claude-code-ui --name "claude-code-ui"
+
+# 或使用更短的别名
+pm2 start cloudcli --name "claude-code-ui"
+
+# 在自定义端口启动
+pm2 start cloudcli --name "claude-code-ui" -- --port 8080
+```
+
+
+#### 系统启动时自动启动
+
+要使 Claude Code UI 在系统启动时自动启动:
+
+```bash
+# 为您的平台生成启动脚本
+pm2 startup
+
+# 保存当前进程列表
+pm2 save
+```
+
+
+### 本地开发安装
+
+1. **克隆仓库:**
+```bash
+git clone https://github.com/siteboon/claudecodeui.git
+cd claudecodeui
+```
+
+2. **安装依赖:**
+```bash
+npm install
+```
+
+3. **配置环境:**
+```bash
+cp .env.example .env
+# 使用您喜欢的设置编辑 .env
+```
+
+4. **启动应用程序:**
+```bash
+# 开发模式(支持热重载)
+npm run dev
+
+```
+应用程序将在您在 .env 中指定的端口启动
+
+5. **打开浏览器:**
+   - 开发环境: `http://localhost:3001`
+
+## 安全与工具配置
+
+**🔒 重要提示**: 所有 Claude Code 工具**默认禁用**。这可以防止潜在的有害操作自动运行。
+
+### 启用工具
+
+要使用 Claude Code 的完整功能,您需要手动启用工具:
+
+1. **打开工具设置** - 点击侧边栏中的齿轮图标
+3. **选择性启用** - 仅打开您需要的工具
+4. **应用设置** - 您的偏好设置将保存在本地
+
+<div align="center">
+
+![工具设置模态框](public/screenshots/tools-modal.png)
+*工具设置界面 - 仅启用您需要的内容*
+
+</div>
+
+**推荐方法**: 首先启用基本工具,然后根据需要添加更多。您可以随时调整这些设置。
+
+## TaskMaster AI 集成 *(可选)*
+
+Claude Code UI 支持 **[TaskMaster AI](https://github.com/eyaltoledano/claude-task-master)**(aka claude-task-master)集成,用于高级项目管理和 AI 驱动的任务规划。
+
+它提供
+- 从 PRD(产品需求文档)生成 AI 驱动的任务
+- 智能任务分解和依赖管理
+- 可视化任务板和进度跟踪
+
+**设置与文档**: 访问 [TaskMaster AI GitHub 仓库](https://github.com/eyaltoledano/claude-task-master)获取安装说明、配置指南和使用示例。
+安装后,您应该能够从设置中启用它
+
+
+## 使用指南
+
+### 核心功能
+
+#### 项目管理
+当可用时,它会自动发现 Claude Code、Cursor 或 Codex 会话并将它们分组到项目中
+- **项目操作** - 重命名、删除和组织项目
+- **智能导航** - 快速访问最近的项目和会话
+- **MCP 支持** - 通过 UI 添加您自己的 MCP 服务器
+
+#### 聊天界面
+- **使用响应式聊天或 Claude Code/Cursor CLI/Codex CLI** - 您可以使用自适应聊天界面或使用 shell 按钮连接到您选择的 CLI
+- **实时通信** - 通过 WebSocket 连接从您选择的 CLI(Claude Code/Cursor/Codex)流式传输响应
+- **会话管理** - 恢复之前的对话或启动新会话
+- **消息历史** - 带有时间戳和元数据的完整对话历史
+- **多格式支持** - 文本、代码块和文件引用
+
+#### 文件浏览器与编辑器
+- **交互式文件树** - 使用展开/折叠导航浏览项目结构
+- **实时文件编辑** - 直接在界面中读取、修改和保存文件
+- **语法高亮** - 支持多种编程语言
+- **文件操作** - 创建、重命名、删除文件和目录
+
+#### Git 浏览器
+
+
+#### TaskMaster AI 集成 *(可选)*
+- **可视化任务板** - 用于管理开发任务的看板风格界面
+- **PRD 解析器** - 创建产品需求文档并将其解析为结构化任务
+- **进度跟踪** - 实时状态更新和完成跟踪
+
+#### 会话管理
+- **会话持久化** - 所有对话自动保存
+- **会话组织** - 按项目和 timestamp 分组会话
+- **会话操作** - 重命名、删除和导出对话历史
+- **跨设备同步** - 从任何设备访问会话
+
+### 移动应用
+- **响应式设计** - 针对所有屏幕尺寸进行优化
+- **触摸友好界面** - 滑动手势和触摸导航
+- **移动导航** - 底部选项卡栏,方便拇指导航
+- **自适应布局** - 可折叠侧边栏和智能内容优先级
+- **添加到主屏幕快捷方式** - 添加快捷方式到主屏幕,应用程序将像 PWA 一样运行
+
+## 架构
+
+### 系统概览
+
+```
+┌─────────────────┐    ┌─────────────────┐    ┌─────────────────┐
+│   Frontend      │    │   Backend       │    │  Agent     │
+│   (React/Vite)  │◄──►│ (Express/WS)    │◄──►│  Integration    │
+│                 │    │                 │    │                │
+└─────────────────┘    └─────────────────┘    └─────────────────┘
+```
+
+### 后端 (Node.js + Express)
+- **Express 服务器** - 具有静态文件服务的 RESTful API
+- **WebSocket 服务器** - 用于聊天和项目刷新的通信
+- **Agent 集成 (Claude Code / Cursor CLI / Codex)** - 进程生成和管理
+- **文件系统 API** - 为项目公开文件浏览器
+
+### 前端 (React + Vite)
+- **React 18** - 带有 hooks 的现代组件架构
+- **CodeMirror** - 具有语法高亮的高级代码编辑器
+
+
+
+
+### 贡献
+
+我们欢迎贡献!请遵循以下指南:
+
+#### 入门
+1. **Fork** 仓库
+2. **克隆** 您的 fork: `git clone <your-fork-url>`
+3. **安装** 依赖: `npm install`
+4. **创建** 特性分支: `git checkout -b feature/amazing-feature`
+
+#### 开发流程
+1. **进行更改**,遵循现有代码风格
+2. **彻底测试** - 确保所有功能正常工作
+3. **运行质量检查**: `npm run lint && npm run format`
+4. **提交**,遵循 [Conventional Commits](https://conventionalcommits.org/)的描述性消息
+5. **推送** 到您的分支: `git push origin feature/amazing-feature`
+6. **提交** 拉取请求,包括:
+   - 更改的清晰描述
+   - UI 更改的截图
+   - 适用时的测试结果
+
+#### 贡献内容
+- **错误修复** - 帮助我们提高稳定性
+- **新功能** - 增强功能(先在 issue 中讨论)
+- **文档** - 改进指南和 API 文档
+- **UI/UX 改进** - 更好的用户体验
+- **性能优化** - 让它更快
+
+## 故障排除
+
+### 常见问题与解决方案
+
+
+#### "未找到 Claude 项目"
+**问题**: UI 显示没有项目或项目列表为空
+**解决方案**:
+- 确保已正确安装 [Claude Code](https://docs.anthropic.com/en/docs/claude-code)
+- 至少在一个项目目录中运行 `claude` 命令以进行初始化
+- 验证 `~/.claude/projects/` 目录存在并具有适当的权限
+
+#### 文件浏览器问题
+**问题**: 文件无法加载、权限错误、空目录
+**解决方案**:
+- 检查项目目录权限(在终端中使用 `ls -la`)
+- 验证项目路径存在且可访问
+- 查看服务器控制台日志以获取详细错误消息
+- 确保您未尝试访问项目范围之外的系统目录
+
+
+## 许可证
+
+GNU General Public License v3.0 - 详见 [LICENSE](LICENSE) 文件。
+
+本项目是开源的,在 GPL v3 许可下可自由使用、修改和分发。
+
+## 致谢
+
+### 构建工具
+- **[Claude Code](https://docs.anthropic.com/en/docs/claude-code)** - Anthropic 的官方 CLI
+- **[Cursor CLI](https://docs.cursor.com/en/cli/overview)** - Cursor 的官方 CLI
+- **[Codex](https://developers.openai.com/codex)** - OpenAI Codex
+- **[React](https://react.dev/)** - 用户界面库
+- **[Vite](https://vitejs.dev/)** - 快速构建工具和开发服务器
+- **[Tailwind CSS](https://tailwindcss.com/)** - 实用优先的 CSS 框架
+- **[CodeMirror](https://codemirror.net/)** - 高级代码编辑器
+- **[TaskMaster AI](https://github.com/eyaltoledano/claude-task-master)** *(可选)* - AI 驱动的项目管理和任务规划
+
+## 支持与社区
+
+### 保持更新
+- **Star** 此仓库以表示支持
+- **Watch** 以获取更新和新版本
+- **Follow** 项目以获取公告
+
+### 赞助商
+- [Siteboon - AI powered website builder](https://siteboon.ai)
+---
+
+<div align="center">
+  <strong>为 Claude Code、Cursor 和 Codex 社区精心打造。</strong>
+</div>
\ No newline at end of file
diff --git a/openspec/AGENTS.md b/openspec/AGENTS.md
new file mode 100644
index 0000000..6c1703e
--- /dev/null
+++ b/openspec/AGENTS.md
@@ -0,0 +1,456 @@
+# OpenSpec Instructions
+
+Instructions for AI coding assistants using OpenSpec for spec-driven development.
+
+## TL;DR Quick Checklist
+
+- Search existing work: `openspec spec list --long`, `openspec list` (use `rg` only for full-text search)
+- Decide scope: new capability vs modify existing capability
+- Pick a unique `change-id`: kebab-case, verb-led (`add-`, `update-`, `remove-`, `refactor-`)
+- Scaffold: `proposal.md`, `tasks.md`, `design.md` (only if needed), and delta specs per affected capability
+- Write deltas: use `## ADDED|MODIFIED|REMOVED|RENAMED Requirements`; include at least one `#### Scenario:` per requirement
+- Validate: `openspec validate [change-id] --strict --no-interactive` and fix issues
+- Request approval: Do not start implementation until proposal is approved
+
+## Three-Stage Workflow
+
+### Stage 1: Creating Changes
+Create proposal when you need to:
+- Add features or functionality
+- Make breaking changes (API, schema)
+- Change architecture or patterns  
+- Optimize performance (changes behavior)
+- Update security patterns
+
+Triggers (examples):
+- "Help me create a change proposal"
+- "Help me plan a change"
+- "Help me create a proposal"
+- "I want to create a spec proposal"
+- "I want to create a spec"
+
+Loose matching guidance:
+- Contains one of: `proposal`, `change`, `spec`
+- With one of: `create`, `plan`, `make`, `start`, `help`
+
+Skip proposal for:
+- Bug fixes (restore intended behavior)
+- Typos, formatting, comments
+- Dependency updates (non-breaking)
+- Configuration changes
+- Tests for existing behavior
+
+**Workflow**
+1. Review `openspec/project.md`, `openspec list`, and `openspec list --specs` to understand current context.
+2. Choose a unique verb-led `change-id` and scaffold `proposal.md`, `tasks.md`, optional `design.md`, and spec deltas under `openspec/changes/<id>/`.
+3. Draft spec deltas using `## ADDED|MODIFIED|REMOVED Requirements` with at least one `#### Scenario:` per requirement.
+4. Run `openspec validate <id> --strict --no-interactive` and resolve any issues before sharing the proposal.
+
+### Stage 2: Implementing Changes
+Track these steps as TODOs and complete them one by one.
+1. **Read proposal.md** - Understand what's being built
+2. **Read design.md** (if exists) - Review technical decisions
+3. **Read tasks.md** - Get implementation checklist
+4. **Implement tasks sequentially** - Complete in order
+5. **Confirm completion** - Ensure every item in `tasks.md` is finished before updating statuses
+6. **Update checklist** - After all work is done, set every task to `- [x]` so the list reflects reality
+7. **Approval gate** - Do not start implementation until the proposal is reviewed and approved
+
+### Stage 3: Archiving Changes
+After deployment, create separate PR to:
+- Move `changes/[name]/` → `changes/archive/YYYY-MM-DD-[name]/`
+- Update `specs/` if capabilities changed
+- Use `openspec archive <change-id> --skip-specs --yes` for tooling-only changes (always pass the change ID explicitly)
+- Run `openspec validate --strict --no-interactive` to confirm the archived change passes checks
+
+## Before Any Task
+
+**Context Checklist:**
+- [ ] Read relevant specs in `specs/[capability]/spec.md`
+- [ ] Check pending changes in `changes/` for conflicts
+- [ ] Read `openspec/project.md` for conventions
+- [ ] Run `openspec list` to see active changes
+- [ ] Run `openspec list --specs` to see existing capabilities
+
+**Before Creating Specs:**
+- Always check if capability already exists
+- Prefer modifying existing specs over creating duplicates
+- Use `openspec show [spec]` to review current state
+- If request is ambiguous, ask 1–2 clarifying questions before scaffolding
+
+### Search Guidance
+- Enumerate specs: `openspec spec list --long` (or `--json` for scripts)
+- Enumerate changes: `openspec list` (or `openspec change list --json` - deprecated but available)
+- Show details:
+  - Spec: `openspec show <spec-id> --type spec` (use `--json` for filters)
+  - Change: `openspec show <change-id> --json --deltas-only`
+- Full-text search (use ripgrep): `rg -n "Requirement:|Scenario:" openspec/specs`
+
+## Quick Start
+
+### CLI Commands
+
+```bash
+# Essential commands
+openspec list                  # List active changes
+openspec list --specs          # List specifications
+openspec show [item]           # Display change or spec
+openspec validate [item]       # Validate changes or specs
+openspec archive <change-id> [--yes|-y]   # Archive after deployment (add --yes for non-interactive runs)
+
+# Project management
+openspec init [path]           # Initialize OpenSpec
+openspec update [path]         # Update instruction files
+
+# Interactive mode
+openspec show                  # Prompts for selection
+openspec validate              # Bulk validation mode
+
+# Debugging
+openspec show [change] --json --deltas-only
+openspec validate [change] --strict --no-interactive
+```
+
+### Command Flags
+
+- `--json` - Machine-readable output
+- `--type change|spec` - Disambiguate items
+- `--strict` - Comprehensive validation
+- `--no-interactive` - Disable prompts
+- `--skip-specs` - Archive without spec updates
+- `--yes`/`-y` - Skip confirmation prompts (non-interactive archive)
+
+## Directory Structure
+
+```
+openspec/
+├── project.md              # Project conventions
+├── specs/                  # Current truth - what IS built
+│   └── [capability]/       # Single focused capability
+│       ├── spec.md         # Requirements and scenarios
+│       └── design.md       # Technical patterns
+├── changes/                # Proposals - what SHOULD change
+│   ├── [change-name]/
+│   │   ├── proposal.md     # Why, what, impact
+│   │   ├── tasks.md        # Implementation checklist
+│   │   ├── design.md       # Technical decisions (optional; see criteria)
+│   │   └── specs/          # Delta changes
+│   │       └── [capability]/
+│   │           └── spec.md # ADDED/MODIFIED/REMOVED
+│   └── archive/            # Completed changes
+```
+
+## Creating Change Proposals
+
+### Decision Tree
+
+```
+New request?
+├─ Bug fix restoring spec behavior? → Fix directly
+├─ Typo/format/comment? → Fix directly  
+├─ New feature/capability? → Create proposal
+├─ Breaking change? → Create proposal
+├─ Architecture change? → Create proposal
+└─ Unclear? → Create proposal (safer)
+```
+
+### Proposal Structure
+
+1. **Create directory:** `changes/[change-id]/` (kebab-case, verb-led, unique)
+
+2. **Write proposal.md:**
+```markdown
+# Change: [Brief description of change]
+
+## Why
+[1-2 sentences on problem/opportunity]
+
+## What Changes
+- [Bullet list of changes]
+- [Mark breaking changes with **BREAKING**]
+
+## Impact
+- Affected specs: [list capabilities]
+- Affected code: [key files/systems]
+```
+
+3. **Create spec deltas:** `specs/[capability]/spec.md`
+```markdown
+## ADDED Requirements
+### Requirement: New Feature
+The system SHALL provide...
+
+#### Scenario: Success case
+- **WHEN** user performs action
+- **THEN** expected result
+
+## MODIFIED Requirements
+### Requirement: Existing Feature
+[Complete modified requirement]
+
+## REMOVED Requirements
+### Requirement: Old Feature
+**Reason**: [Why removing]
+**Migration**: [How to handle]
+```
+If multiple capabilities are affected, create multiple delta files under `changes/[change-id]/specs/<capability>/spec.md`—one per capability.
+
+4. **Create tasks.md:**
+```markdown
+## 1. Implementation
+- [ ] 1.1 Create database schema
+- [ ] 1.2 Implement API endpoint
+- [ ] 1.3 Add frontend component
+- [ ] 1.4 Write tests
+```
+
+5. **Create design.md when needed:**
+Create `design.md` if any of the following apply; otherwise omit it:
+- Cross-cutting change (multiple services/modules) or a new architectural pattern
+- New external dependency or significant data model changes
+- Security, performance, or migration complexity
+- Ambiguity that benefits from technical decisions before coding
+
+Minimal `design.md` skeleton:
+```markdown
+## Context
+[Background, constraints, stakeholders]
+
+## Goals / Non-Goals
+- Goals: [...]
+- Non-Goals: [...]
+
+## Decisions
+- Decision: [What and why]
+- Alternatives considered: [Options + rationale]
+
+## Risks / Trade-offs
+- [Risk] → Mitigation
+
+## Migration Plan
+[Steps, rollback]
+
+## Open Questions
+- [...]
+```
+
+## Spec File Format
+
+### Critical: Scenario Formatting
+
+**CORRECT** (use #### headers):
+```markdown
+#### Scenario: User login success
+- **WHEN** valid credentials provided
+- **THEN** return JWT token
+```
+
+**WRONG** (don't use bullets or bold):
+```markdown
+- **Scenario: User login**  ❌
+**Scenario**: User login     ❌
+### Scenario: User login      ❌
+```
+
+Every requirement MUST have at least one scenario.
+
+### Requirement Wording
+- Use SHALL/MUST for normative requirements (avoid should/may unless intentionally non-normative)
+
+### Delta Operations
+
+- `## ADDED Requirements` - New capabilities
+- `## MODIFIED Requirements` - Changed behavior
+- `## REMOVED Requirements` - Deprecated features
+- `## RENAMED Requirements` - Name changes
+
+Headers matched with `trim(header)` - whitespace ignored.
+
+#### When to use ADDED vs MODIFIED
+- ADDED: Introduces a new capability or sub-capability that can stand alone as a requirement. Prefer ADDED when the change is orthogonal (e.g., adding "Slash Command Configuration") rather than altering the semantics of an existing requirement.
+- MODIFIED: Changes the behavior, scope, or acceptance criteria of an existing requirement. Always paste the full, updated requirement content (header + all scenarios). The archiver will replace the entire requirement with what you provide here; partial deltas will drop previous details.
+- RENAMED: Use when only the name changes. If you also change behavior, use RENAMED (name) plus MODIFIED (content) referencing the new name.
+
+Common pitfall: Using MODIFIED to add a new concern without including the previous text. This causes loss of detail at archive time. If you aren’t explicitly changing the existing requirement, add a new requirement under ADDED instead.
+
+Authoring a MODIFIED requirement correctly:
+1) Locate the existing requirement in `openspec/specs/<capability>/spec.md`.
+2) Copy the entire requirement block (from `### Requirement: ...` through its scenarios).
+3) Paste it under `## MODIFIED Requirements` and edit to reflect the new behavior.
+4) Ensure the header text matches exactly (whitespace-insensitive) and keep at least one `#### Scenario:`.
+
+Example for RENAMED:
+```markdown
+## RENAMED Requirements
+- FROM: `### Requirement: Login`
+- TO: `### Requirement: User Authentication`
+```
+
+## Troubleshooting
+
+### Common Errors
+
+**"Change must have at least one delta"**
+- Check `changes/[name]/specs/` exists with .md files
+- Verify files have operation prefixes (## ADDED Requirements)
+
+**"Requirement must have at least one scenario"**
+- Check scenarios use `#### Scenario:` format (4 hashtags)
+- Don't use bullet points or bold for scenario headers
+
+**Silent scenario parsing failures**
+- Exact format required: `#### Scenario: Name`
+- Debug with: `openspec show [change] --json --deltas-only`
+
+### Validation Tips
+
+```bash
+# Always use strict mode for comprehensive checks
+openspec validate [change] --strict --no-interactive
+
+# Debug delta parsing
+openspec show [change] --json | jq '.deltas'
+
+# Check specific requirement
+openspec show [spec] --json -r 1
+```
+
+## Happy Path Script
+
+```bash
+# 1) Explore current state
+openspec spec list --long
+openspec list
+# Optional full-text search:
+# rg -n "Requirement:|Scenario:" openspec/specs
+# rg -n "^#|Requirement:" openspec/changes
+
+# 2) Choose change id and scaffold
+CHANGE=add-two-factor-auth
+mkdir -p openspec/changes/$CHANGE/{specs/auth}
+printf "## Why\n...\n\n## What Changes\n- ...\n\n## Impact\n- ...\n" > openspec/changes/$CHANGE/proposal.md
+printf "## 1. Implementation\n- [ ] 1.1 ...\n" > openspec/changes/$CHANGE/tasks.md
+
+# 3) Add deltas (example)
+cat > openspec/changes/$CHANGE/specs/auth/spec.md << 'EOF'
+## ADDED Requirements
+### Requirement: Two-Factor Authentication
+Users MUST provide a second factor during login.
+
+#### Scenario: OTP required
+- **WHEN** valid credentials are provided
+- **THEN** an OTP challenge is required
+EOF
+
+# 4) Validate
+openspec validate $CHANGE --strict --no-interactive
+```
+
+## Multi-Capability Example
+
+```
+openspec/changes/add-2fa-notify/
+├── proposal.md
+├── tasks.md
+└── specs/
+    ├── auth/
+    │   └── spec.md   # ADDED: Two-Factor Authentication
+    └── notifications/
+        └── spec.md   # ADDED: OTP email notification
+```
+
+auth/spec.md
+```markdown
+## ADDED Requirements
+### Requirement: Two-Factor Authentication
+...
+```
+
+notifications/spec.md
+```markdown
+## ADDED Requirements
+### Requirement: OTP Email Notification
+...
+```
+
+## Best Practices
+
+### Simplicity First
+- Default to <100 lines of new code
+- Single-file implementations until proven insufficient
+- Avoid frameworks without clear justification
+- Choose boring, proven patterns
+
+### Complexity Triggers
+Only add complexity with:
+- Performance data showing current solution too slow
+- Concrete scale requirements (>1000 users, >100MB data)
+- Multiple proven use cases requiring abstraction
+
+### Clear References
+- Use `file.ts:42` format for code locations
+- Reference specs as `specs/auth/spec.md`
+- Link related changes and PRs
+
+### Capability Naming
+- Use verb-noun: `user-auth`, `payment-capture`
+- Single purpose per capability
+- 10-minute understandability rule
+- Split if description needs "AND"
+
+### Change ID Naming
+- Use kebab-case, short and descriptive: `add-two-factor-auth`
+- Prefer verb-led prefixes: `add-`, `update-`, `remove-`, `refactor-`
+- Ensure uniqueness; if taken, append `-2`, `-3`, etc.
+
+## Tool Selection Guide
+
+| Task | Tool | Why |
+|------|------|-----|
+| Find files by pattern | Glob | Fast pattern matching |
+| Search code content | Grep | Optimized regex search |
+| Read specific files | Read | Direct file access |
+| Explore unknown scope | Task | Multi-step investigation |
+
+## Error Recovery
+
+### Change Conflicts
+1. Run `openspec list` to see active changes
+2. Check for overlapping specs
+3. Coordinate with change owners
+4. Consider combining proposals
+
+### Validation Failures
+1. Run with `--strict` flag
+2. Check JSON output for details
+3. Verify spec file format
+4. Ensure scenarios properly formatted
+
+### Missing Context
+1. Read project.md first
+2. Check related specs
+3. Review recent archives
+4. Ask for clarification
+
+## Quick Reference
+
+### Stage Indicators
+- `changes/` - Proposed, not yet built
+- `specs/` - Built and deployed
+- `archive/` - Completed changes
+
+### File Purposes
+- `proposal.md` - Why and what
+- `tasks.md` - Implementation steps
+- `design.md` - Technical decisions
+- `spec.md` - Requirements and behavior
+
+### CLI Essentials
+```bash
+openspec list              # What's in progress?
+openspec show [item]       # View details
+openspec validate --strict --no-interactive  # Is it correct?
+openspec archive <change-id> [--yes|-y]  # Mark complete (add --yes for automation)
+```
+
+Remember: Specs are truth. Changes are proposals. Keep them in sync.
diff --git a/openspec/AGENTS.zh-CN.md b/openspec/AGENTS.zh-CN.md
new file mode 100644
index 0000000..2d64018
--- /dev/null
+++ b/openspec/AGENTS.zh-CN.md
@@ -0,0 +1,456 @@
+# OpenSpec 指令
+
+使用 OpenSpec 进行规范驱动开发的 AI 编程助手指南。
+
+## 快速检查清单
+
+- 搜索现有工作：`openspec spec list --long`、`openspec list`（仅在全文搜索时使用 `rg`）
+- 决定范围：新功能 vs 修改现有功能
+- 选择唯一的 `change-id`：kebab-case，动词开头（`add-`、`update-`、`remove-`、`refactor-`）
+- 创建骨架：`proposal.md`、`tasks.md`、`design.md`（仅在需要时）以及每个受影响功能的增量规范
+- 编写增量：使用 `## ADDED|MODIFIED|REMOVED|RENAMED Requirements`；每个需求至少包含一个 `#### Scenario:`
+- 验证：`openspec validate [change-id] --strict --no-interactive` 并修复问题
+- 请求批准：在提案获批前不要开始实施
+
+## 三阶段工作流
+
+### 阶段 1：创建变更
+在以下情况下创建提案：
+- 添加功能或特性
+- 进行破坏性更改（API、架构）
+- 更改架构或模式
+- 优化性能（改变行为）
+- 更新安全模式
+
+触发器（示例）：
+- "帮我创建变更提案"
+- "帮我规划变更"
+- "帮我创建提案"
+- "我想创建规范提案"
+- "我想创建规范"
+
+模糊匹配指南：
+- 包含以下之一：`proposal`、`change`、`spec`
+- 加上以下之一：`create`、`plan`、`make`、`start`、`help`
+
+跳过提案的情况：
+- 错误修复（恢复预期行为）
+- 拼写错误、格式、注释
+- 依赖项更新（非破坏性）
+- 配置更改
+- 为现有行为添加测试
+
+**工作流**
+1. 查看 `openspec/project.md`、`openspec list` 和 `openspec list --specs` 以了解当前上下文。
+2. 选择唯一的动词开头的 `change-id`，并在 `openspec/changes/<id>/` 下创建 `proposal.md`、`tasks.md`、可选的 `design.md` 和规范增量骨架。
+3. 使用 `## ADDED|MODIFIED|REMOVED Requirements` 起草规范增量，每个需求至少包含一个 `#### Scenario:`。
+4. 运行 `openspec validate <id> --strict --no-interactive` 并在共享提案之前解决所有问题。
+
+### 阶段 2：实施变更
+将这些步骤跟踪为 TODO 并逐一完成。
+1. **阅读 proposal.md** - 了解要构建的内容
+2. **阅读 design.md**（如果存在）- 查看技术决策
+3. **阅读 tasks.md** - 获取实施清单
+4. **按顺序实施任务** - 按顺序完成
+5. **确认完成** - 确保在更新状态之前完成 `tasks.md` 中的每一项
+6. **更新清单** - 所有工作完成后，将每个任务设置为 `- [x]`，使列表反映实际情况
+7. **批准门槛** - 在提案被审查和批准之前不要开始实施
+
+### 阶段 3：归档变更
+部署后，创建单独的 PR 以：
+- 将 `changes/[name]/` 移至 `changes/archive/YYYY-MM-DD-[name]/`
+- 如果功能发生变化，则更新 `specs/`
+- 对于仅工具的更改，使用 `openspec archive <change-id> --skip-specs --yes`（始终明确传递变更 ID）
+- 运行 `openspec validate --strict --no-interactive` 以确认归档的更改通过检查
+
+## 在任何任务之前
+
+**上下文清单：**
+- [ ] 阅读 `specs/[capability]/spec.md` 中的相关规范
+- [ ] 检查 `changes/` 中的待处理变更是否有冲突
+- [ ] 阅读 `openspec/project.md` 了解约定
+- [ ] 运行 `openspec list` 查看活动变更
+- [ ] 运行 `openspec list --specs` 查看现有功能
+
+**创建规范之前：**
+- 始终检查功能是否已存在
+- 优先修改现有规范而不是创建重复项
+- 使用 `openspec show [spec]` 查看当前状态
+- 如果请求模棱两可，请在创建骨架之前询问 1-2 个澄清问题
+
+### 搜索指南
+- 枚举规范：`openspec spec list --long`（或使用 `--json` 用于脚本）
+- 枚举变更：`openspec list`（或 `openspec change list --json` - 已弃用但可用）
+- 显示详细信息：
+  - 规范：`openspec show <spec-id> --type spec`（使用 `--json` 进行过滤）
+  - 变更：`openspec show <change-id> --json --deltas-only`
+- 全文搜索（使用 ripgrep）：`rg -n "Requirement:|Scenario:" openspec/specs`
+
+## 快速开始
+
+### CLI 命令
+
+```bash
+# 基本命令
+openspec list                  # 列出活动变更
+openspec list --specs          # 列出规范
+openspec show [item]           # 显示变更或规范
+openspec validate [item]       # 验证变更或规范
+openspec archive <change-id> [--yes|-y]   # 部署后归档（添加 --yes 以非交互运行）
+
+# 项目管理
+openspec init [path]           # 初始化 OpenSpec
+openspec update [path]         # 更新指令文件
+
+# 交互模式
+openspec show                  # 提示进行选择
+openspec validate              # 批量验证模式
+
+# 调试
+openspec show [change] --json --deltas-only
+openspec validate [change] --strict --no-interactive
+```
+
+### 命令标志
+
+- `--json` - 机器可读输出
+- `--type change|spec` - 消除项目歧义
+- `--strict` - 全面验证
+- `--no-interactive` - 禁用提示
+- `--skip-specs` - 归档而不更新规范
+- `--yes`/`-y` - 跳过确认提示（非交互式归档）
+
+## 目录结构
+
+```
+openspec/
+├── project.md              # 项目约定
+├── specs/                  # 当前事实 - 已构建的内容
+│   └── [capability]/       # 单一专注功能
+│       ├── spec.md         # 需求和场景
+│       └── design.md       # 技术模式
+├── changes/                # 提案 - 应该更改的内容
+│   ├── [change-name]/
+│   │   ├── proposal.md     # 原因、内容、影响
+│   │   ├── tasks.md        # 实施清单
+│   │   ├── design.md       # 技术决策（可选；参见标准）
+│   │   └── specs/          # 增量更改
+│   │       └── [capability]/
+│   │           └── spec.md # ADDED/MODIFIED/REMOVED
+│   └── archive/            # 已完成的变更
+```
+
+## 创建变更提案
+
+### 决策树
+
+```
+新请求？
+├─ 恢复规范行为的错误修复？ → 直接修复
+├─ 拼写错误/格式/注释？ → 直接修复
+├─ 新功能/能力？ → 创建提案
+├─ 破坏性更改？ → 创建提案
+├─ 架构更改？ → 创建提案
+└─ 不清楚？ → 创建提案（更安全）
+```
+
+### 提案结构
+
+1. **创建目录：** `changes/[change-id]/`（kebab-case，动词开头，唯一）
+
+2. **编写 proposal.md：**
+```markdown
+# 变更：[变更简要描述]
+
+## 原因
+[1-2 句话说明问题/机会]
+
+## 变更内容
+- [变更要点列表]
+- [使用 **BREAKING** 标记破坏性更改]
+
+## 影响
+- 受影响的规范：[列出功能]
+- 受影响的代码：[关键文件/系统]
+```
+
+3. **创建规范增量：** `specs/[capability]/spec.md`
+```markdown
+## ADDED Requirements
+### Requirement: 新功能
+系统应提供...
+
+#### Scenario: 成功案例
+- **WHEN** 用户执行操作
+- **THEN** 预期结果
+
+## MODIFIED Requirements
+### Requirement: 现有功能
+[完整的修改后需求]
+
+## REMOVED Requirements
+### Requirement: 旧功能
+**原因**：[为什么删除]
+**迁移**：[如何处理]
+```
+如果影响多个功能，请在 `changes/[change-id]/specs/<capability>/spec.md` 下创建多个增量文件——每个功能一个。
+
+4. **创建 tasks.md：**
+```markdown
+## 1. 实施
+- [ ] 1.1 创建数据库架构
+- [ ] 1.2 实施 API 端点
+- [ ] 1.3 添加前端组件
+- [ ] 1.4 编写测试
+```
+
+5. **在需要时创建 design.md：**
+如果符合以下任一情况，请创建 `design.md`；否则省略：
+- 跨领域更改（多个服务/模块）或新的架构模式
+- 新的外部依赖或重要的数据模型更改
+- 安全性、性能或迁移复杂性
+- 在编码之前受益于技术决策的歧义
+
+最小 `design.md` 骨架：
+```markdown
+## 上下文
+[背景、约束、利益相关者]
+
+## 目标 / 非目标
+- 目标：[...]
+- 非目标：[...]
+
+## 决策
+- 决策：[内容和原因]
+- 考虑的替代方案：[选项 + 理由]
+
+## 风险 / 权衡
+- [风险] → 缓解措施
+
+## 迁移计划
+[步骤、回滚]
+
+## 未解决的问题
+- [...]
+```
+
+## 规范文件格式
+
+### 关键：场景格式
+
+**正确**（使用 #### 标题）：
+```markdown
+#### Scenario: 用户登录成功
+- **WHEN** 提供有效凭据
+- **THEN** 返回 JWT 令牌
+```
+
+**错误**（不要使用项目符号或粗体）：
+```markdown
+- **Scenario: 用户登录**  ❌
+**Scenario**: 用户登录     ❌
+### Scenario: 用户登录      ❌
+```
+
+每个需求必须至少有一个场景。
+
+### 需求措辞
+- 对规范性要求使用 SHALL/MUST（除非有意非规范性，否则避免 should/may）
+
+### 增量操作
+
+- `## ADDED Requirements` - 新功能
+- `## MODIFIED Requirements` - 更改的行为
+- `## REMOVED Requirements` - 已弃用功能
+- `## RENAMED Requirements` - 名称更改
+
+使用 `trim(header)` 匹配标题 - 忽略空格。
+
+#### 何时使用 ADDED vs MODIFIED
+- ADDED：引入可以独立作为需求的新功能或子功能。当更改是正交的（例如，添加"斜杠命令配置"）而不是更改现有需求的语义时，优先使用 ADDED。
+- MODIFIED：更改现有需求的行为、范围或验收标准。始终粘贴完整、更新的需求内容（标题 + 所有场景）。归档器将用您在此处提供的内容替换整个需求；部分增量将丢失先前的详细信息。
+- RENAMED：仅在名称更改时使用。如果您还更改行为，请使用 RENAMED（名称）加上 MODIFIED（内容）引用新名称。
+
+常见错误：使用 MODIFIED 添加新关注点而不包含先前的文本。这会导致归档时丢失详细信息。如果您没有明确更改现有需求，请改为在 ADDED 下添加新需求。
+
+正确编写 MODIFIED 需求：
+1) 在 `openspec/specs/<capability>/spec.md` 中找到现有需求。
+2) 复制整个需求块（从 `### Requirement: ...` 到其场景）。
+3) 将其粘贴到 `## MODIFIED Requirements` 下并编辑以反映新行为。
+4) 确保标题文本完全匹配（不区分空格）并保留至少一个 `#### Scenario:`。
+
+RENAMED 示例：
+```markdown
+## RENAMED Requirements
+- FROM: `### Requirement: Login`
+- TO: `### Requirement: User Authentication`
+```
+
+## 故障排除
+
+### 常见错误
+
+**"Change must have at least one delta"**
+- 检查 `changes/[name]/specs/` 是否存在 .md 文件
+- 验证文件是否具有操作前缀（## ADDED Requirements）
+
+**"Requirement must have at least one scenario"**
+- 检查场景是否使用 `#### Scenario:` 格式（4 个井号）
+- 不要对场景标题使用项目符号或粗体
+
+**静默场景解析失败**
+- 需要精确格式：`#### Scenario: 名称`
+- 使用以下命令调试：`openspec show [change] --json --deltas-only`
+
+### 验证技巧
+
+```bash
+# 始终使用严格模式进行全面检查
+openspec validate [change] --strict --no-interactive
+
+# 调试增量解析
+openspec show [change] --json | jq '.deltas'
+
+# 检查特定需求
+openspec show [spec] --json -r 1
+```
+
+## 理想路径脚本
+
+```bash
+# 1) 探索当前状态
+openspec spec list --long
+openspec list
+# 可选全文搜索：
+# rg -n "Requirement:|Scenario:" openspec/specs
+# rg -n "^#|Requirement:" openspec/changes
+
+# 2) 选择变更 ID 并创建骨架
+CHANGE=add-two-factor-auth
+mkdir -p openspec/changes/$CHANGE/{specs/auth}
+printf "## Why\n...\n\n## What Changes\n- ...\n\n## Impact\n- ...\n" > openspec/changes/$CHANGE/proposal.md
+printf "## 1. Implementation\n- [ ] 1.1 ...\n" > openspec/changes/$CHANGE/tasks.md
+
+# 3) 添加增量（示例）
+cat > openspec/changes/$CHANGE/specs/auth/spec.md << 'EOF'
+## ADDED Requirements
+### Requirement: 双因素认证
+用户在登录期间必须提供第二个因素。
+
+#### Scenario: 需要 OTP
+- **WHEN** 提供有效凭据
+- **THEN** 需要OTP 挑战
+EOF
+
+# 4) 验证
+openspec validate $CHANGE --strict --no-interactive
+```
+
+## 多功能示例
+
+```
+openspec/changes/add-2fa-notify/
+├── proposal.md
+├── tasks.md
+└── specs/
+    ├── auth/
+    │   └── spec.md   # ADDED: 双因素认证
+    └── notifications/
+        └── spec.md   # ADDED: OTP 电子邮件通知
+```
+
+auth/spec.md
+```markdown
+## ADDED Requirements
+### Requirement: 双因素认证
+...
+```
+
+notifications/spec.md
+```markdown
+## ADDED Requirements
+### Requirement: OTP 电子邮件通知
+...
+```
+
+## 最佳实践
+
+### 简单优先
+- 默认小于 100 行新代码
+- 单文件实施，直到被证明不足
+- 避免没有明确理由的框架
+- 选择无聊、经过验证的模式
+
+### 复杂性触发器
+仅在以下情况下添加复杂性：
+- 显示当前解决方案太慢的性能数据
+- 具体的规模要求（>1000 用户，>100MB 数据）
+- 多个经过验证的用例需要抽象
+
+### 清晰参考
+- 使用 `file.ts:42` 格式表示代码位置
+- 将规范引用为 `specs/auth/spec.md`
+- 链接相关变更和 PR
+
+### 功能命名
+- 使用动词-名词：`user-auth`、`payment-capture`
+- 每个功能单一目的
+- 10 分钟可理解规则
+- 如果描述需要"AND"则拆分
+
+### 变更 ID 命名
+- 使用 kebab-case，简短且描述性：`add-two-factor-auth`
+- 优先使用动词开头的前缀：`add-`、`update-`、`remove-`、`refactor-`
+- 确保唯一性；如果已占用，请附加 `-2`、`-3` 等
+
+## 工具选择指南
+
+| 任务 | 工具 | 原因 |
+|------|------|-----|
+| 按模式查找文件 | Glob | 快速模式匹配 |
+| 搜索代码内容 | Grep | 优化的正则表达式搜索 |
+| 读取特定文件 | Read | 直接文件访问 |
+| 探索未知范围 | Task | 多步骤调查 |
+
+## 错误恢复
+
+### 变更冲突
+1. 运行 `openspec list` 查看活动变更
+2. 检查重叠的规范
+3. 与变更所有者协调
+4. 考虑合并提案
+
+### 验证失败
+1. 使用 `--strict` 标志运行
+2. 检查 JSON 输出以了解详细信息
+3. 验证规范文件格式
+4. 确保场景格式正确
+
+### 缺少上下文
+1. 首先阅读 project.md
+2. 检查相关规范
+3. 查看最近的归档
+4. 请求澄清
+
+## 快速参考
+
+### 阶段指示器
+- `changes/` - 已提议，尚未构建
+- `specs/` - 已构建和部署
+- `archive/` - 已完成的变更
+
+### 文件用途
+- `proposal.md` - 原因和内容
+- `tasks.md` - 实施步骤
+- `design.md` - 技术决策
+- `spec.md` - 需求和行为
+
+### CLI 要点
+```bash
+openspec list              # 正在进行什么？
+openspec show [item]       # 查看详细信息
+openspec validate --strict --no-interactive  # 正确吗？
+openspec archive <change-id> [--yes|-y]  # 标记完成（添加 --yes 以实现自动化）
+```
+
+记住：规范是事实。变更是提案。保持它们同步。
diff --git a/openspec/changes/add-i18n-support/design.md b/openspec/changes/add-i18n-support/design.md
new file mode 100644
index 0000000..66bca90
--- /dev/null
+++ b/openspec/changes/add-i18n-support/design.md
@@ -0,0 +1,246 @@
+# Design: i18n Implementation Architecture
+
+## Context
+
+Claude Code UI is a React-based web application with ~50 components, currently serving English-speaking users only. The application uses:
+- React 18 with functional components and hooks
+- Context-based state management (AuthContext, ThemeContext, etc.)
+- localStorage for user preferences
+- Vite for bundling
+
+**Constraints:**
+- Must not impact performance (bundle size, runtime overhead)
+- Must support hot-reload during development
+- Must allow switching language without page reload
+- Must be extensible for additional languages in the future
+
+**Stakeholders:**
+- End users: Need intuitive language switching
+- Developers: Need easy translation management workflow
+- Maintainers: Need to keep translations synchronized
+
+## Goals / Non-Goals
+
+**Goals:**
+1. Implement production-ready i18n using `react-i18next`
+2. Support English (en) and Simplified Chinese (zh-CN) in Phase 1
+3. Provide language selector in Settings > Account
+4. Store user language preference in localStorage
+5. Extract and translate top 100 most common UI strings in Phase 1
+6. Create reusable translation namespace structure
+
+**Non-Goals:**
+1. Translate AI-generated content (chat messages, code responses)
+2. Translate backend error logs or terminal output
+3. Implement server-side translation
+4. Create translation management web UI
+5. Add RTL (Right-to-Left) language support
+
+## Decisions
+
+### Decision 1: Use react-i18next Library
+
+**Rationale:**
+- Industry-standard for React internationalization (2.5M weekly downloads)
+- Built-in hooks (`useTranslation`) compatible with React 18
+- Supports interpolation, plurals, date/number formatting
+- Excellent TypeScript support (even though we use JS)
+- Lazy-loading and code-splitting for translations
+- Active community and long-term viability
+
+**Alternatives Considered:**
+- **Format.js (React Intl)**: More complex setup, larger bundle size
+- **Lingui**: Compile-time approach, requires Babel plugin, over-engineering for our needs
+- **Custom solution**: Would require building interpolation, plurals, date formatting from scratch
+
+### Decision 2: Namespace-Based Translation Structure
+
+**Structure:**
+```
+src/i18n/
+├── locales/
+│   ├── en/
+│   │   ├── common.json      # Shared UI strings
+│   │   ├── settings.json    # Settings page
+│   │   ├── auth.json        # Login/Auth
+│   │   └── sidebar.json     # Navigation/Sidebar
+│   └── zh-CN/
+│       ├── common.json
+│       ├── settings.json
+│       ├── auth.json
+│       └── sidebar.json
+├── config.js                # i18next configuration
+└── ReactSuspense.js         # Lazy-loading wrapper
+```
+
+**Rationale:**
+- Namespace-based approach aligns with feature boundaries
+- Smaller files = easier to manage translations
+- Supports code-splitting (load only needed namespaces)
+- Scalable for future languages
+
+### Decision 3: Language Preference Storage in localStorage
+
+**Rationale:**
+- Consistent with existing preferences (theme, code editor settings)
+- No backend changes required
+- Instant sync across tabs
+- Works in offline mode
+
+**Storage Key:** `userLanguage`
+**Default Value:** `'en'` (English)
+**Valid Values:** `'en'`, `'zh-CN'`
+
+### Decision 4: Translation Key Naming Convention
+
+**Pattern:** `{namespace}.{component}.{element}.{state}`
+
+**Examples:**
+- `common.buttons.save` → "Save"
+- `common.buttons.cancel` → "Cancel"
+- `settings.account.language.label` → "Language"
+- `auth.login.title` → "Sign In"
+- `sidebar.projects.new` → "New Project"
+
+**Rationale:**
+- Hierarchical structure mirrors component tree
+- Easy to locate translation key in code
+- Prevents naming collisions across namespaces
+- Self-documenting
+
+### Decision 5: Fallback Strategy
+
+**Fallback Chain:**
+1. User's selected language (e.g., `zh-CN`)
+2. English (`en`) as default fallback
+3. Return translation key if not found in any language
+
+**Configuration:**
+```javascript
+fallbackLng: 'en',
+debug: false, // Set true in development to log missing keys
+saveMissing: false, // Don't auto-create missing keys (manual review required)
+```
+
+**Rationale:**
+- English is source language, guaranteed to have all keys
+- Showing translation key in production is better than blank text
+- Manual review prevents typo propagation
+
+## Risks / Trade-offs
+
+### Risk 1: Bundle Size Increase
+
+**Impact:** Initial bundle may increase by ~30KB (gzip) for react-i18next + translations
+
+**Mitigation:**
+- Use code-splitting to load translations per namespace
+- Enable tree-shaking for unused languages
+- Target Phase 1: Top 100 strings only
+
+**Monitoring:**
+```bash
+npm run build
+# Check dist/ size before/after
+```
+
+### Risk 2: Missing Translations at Runtime
+
+**Impact:** Users may see English text mixed with Chinese
+
+**Mitigation:**
+- Use `useTranslation` with `{ fallbackLng: 'en' }`
+- Implement `missingKeyHandler` to log missing keys in development
+- Create translation coverage report in CI
+
+### Risk 3: Translation Synchronization Debt
+
+**Impact:** New features may forget to add translations
+
+**Mitigation:**
+- Add ESLint rule to detect hardcoded strings in JSX
+- Include i18n checklist in PR template
+- Document translation workflow in CLAUDE.md
+
+### Risk 4: Context-Aware Translations
+
+**Example:** "Save" could mean:
+- Save file (保存文件)
+- Save money (节省)
+- Rescue (救援)
+
+**Mitigation:**
+- Use descriptive keys: `common.buttons.saveFile` vs `common.buttons.saveMoney`
+- Add context comments for translators: `{{context}} "Save file to disk"`
+
+## Migration Plan
+
+### Phase 1: Infrastructure Setup (Day 1)
+
+1. Install `react-i18next` and `i18next`
+2. Create `src/i18n/` directory structure
+3. Configure i18next with lazy-loading
+4. Add I18nextProvider to App.jsx
+5. Create translation resource files (en, zh-CN)
+
+### Phase 2: Core UI Translation (Day 2-3)
+
+**Priority Order:**
+1. Common buttons and labels (Save, Cancel, Delete, Create)
+2. Navigation elements (Settings, menus)
+3. Settings page
+4. Auth/Login pages
+5. Sidebar labels
+
+**Process per component:**
+1. Replace hardcoded strings with `useTranslation()` hook
+2. Add translation key to JSON files
+3. Verify English still works
+4. Add Chinese translation
+5. Test language switching
+
+### Phase 3: Language Selector (Day 3)
+
+1. Add language dropdown to `AccountContent.jsx`
+2. Implement `changeLanguage()` handler
+3. Save preference to localStorage
+4. Test reload persistence
+
+### Phase 4: Validation (Day 4)
+
+1. Manual testing of all translated components
+2. Check for missing keys (console warnings)
+3. Test language switching in both directions
+4. Verify localStorage persistence
+5. Test mobile responsive layout with longer Chinese text
+
+### Rollback Plan
+
+If critical issues arise:
+1. Revert to commit before i18n changes
+2. Keep translation files for future retry
+3. Document blockers for next attempt
+
+**Rollback Command:**
+```bash
+git revert <i18n-commit-hash>
+npm install
+```
+
+## Open Questions
+
+1. **Should we add TypeScript support for translations?**
+   - Current: No, project uses JavaScript
+   - Future consideration: Migrate to TypeScript for better type safety
+
+2. **Should we integrate with translation management platform (e.g., Crowdin, Lokalise)?**
+   - Current decision: No, manual JSON editing is sufficient for 2 languages
+   - Future: Consider when adding 3+ languages or external translators
+
+3. **Should we format dates and numbers according to locale?**
+   - Current decision: No, keep ISO format for simplicity
+   - Future: Use `i18next-intlplural` if users request localized dates
+
+4. **How to handle pluralization in Chinese (which doesn't have plurals)?**
+   - Solution: Use same translation for singular/plural forms
+   - Example: `"1 file"` → `"1 个文件"`, `"2 files"` → `"2 个文件"`
diff --git a/openspec/changes/add-i18n-support/proposal.md b/openspec/changes/add-i18n-support/proposal.md
new file mode 100644
index 0000000..266430e
--- /dev/null
+++ b/openspec/changes/add-i18n-support/proposal.md
@@ -0,0 +1,51 @@
+# Change: Add i18n Internationalization Support
+
+## Why
+
+The application currently has all UI text hardcoded in English, which limits accessibility for non-English speaking users. Adding internationalization (i18n) support will enable the application to serve a broader user base, particularly Chinese-speaking users who form a significant portion of the AI development community. This will improve user experience and adoption by allowing users to interact with the application in their preferred language.
+
+## What Changes
+
+- **BREAKING**: Add `react-i18next` dependency and configure i18n infrastructure
+- Add `I18nextProvider` wrapper in App.jsx
+- Create translation resource files for English (en) and Simplified Chinese (zh-CN)
+- Extract and translate core UI text (menus, buttons, labels, error messages)
+- Add language selector in Settings > Account section
+- Store user language preference in localStorage
+- Implement language switching without page reload
+- Create translation namespace structure for scalable management
+
+**Scope - Phase 1 (Progressive Translation):**
+- Navigation elements (Settings, menus, buttons)
+- Common UI labels (Save, Cancel, Delete, Create, Loading, Error messages)
+- Settings page labels and descriptions
+- Login/Auth related text
+- Sidebar labels (Projects, Sessions, Files)
+
+**Out of Scope - Phase 1:**
+- AI-generated content (chat messages, responses)
+- Developer-facing error logs
+- Documentation and help text
+- Terminal/shell output
+
+## Impact
+
+- **Affected specs:**
+  - `i18n` (NEW capability) - Internationalization system
+  - `user-interface` (NEW capability) - Language-aware UI components
+
+- **Affected code:**
+  - `src/main.jsx` - Add i18n initialization
+  - `src/App.jsx` - Wrap with I18nextProvider
+  - `src/components/Settings.jsx` - Add language selector
+  - `src/components/settings/AccountContent.jsx` - Language preference UI
+  - All UI components - Replace hardcoded text with translation keys
+  - `src/i18n/` (NEW) - Translation resources and configuration
+  - `package.json` - Add react-i18next dependency
+
+- **Affected database:** None (language preference stored in localStorage)
+
+- **Migration:**
+  - No data migration required
+  - Default language: English (fallback for missing translations)
+  - User preference stored in `localStorage.getItem('userLanguage')`
diff --git a/openspec/changes/add-i18n-support/specs/i18n/spec.md b/openspec/changes/add-i18n-support/specs/i18n/spec.md
new file mode 100644
index 0000000..b93ecff
--- /dev/null
+++ b/openspec/changes/add-i18n-support/specs/i18n/spec.md
@@ -0,0 +1,202 @@
+# i18n Capability Specification (Delta)
+
+## ADDED Requirements
+
+### Requirement: Translation Infrastructure
+
+The system SHALL provide internationalization (i18n) infrastructure using react-i18next library to support multiple languages for user-facing text.
+
+#### Scenario: Initialize i18n on application startup
+- **WHEN** the application starts
+- **THEN** the system SHALL initialize i18next with configuration
+- **AND** load translation resources for English (en) and Chinese (zh-CN)
+- **AND** set default language to English
+- **AND** detect saved language preference from localStorage
+
+#### Scenario: Load translation namespaces lazily
+- **WHEN** a component requires translations
+- **THEN** the system SHALL load only the required namespace (e.g., 'common', 'settings')
+- **AND** cache loaded namespaces for subsequent access
+- **AND** show loading state only during initial load
+
+### Requirement: Language Selection and Persistence
+
+The system SHALL allow users to select their preferred language and persist this preference across sessions.
+
+#### Scenario: User selects language in Settings
+- **WHEN** user navigates to Settings > Account > Language selector
+- **THEN** the system SHALL display available languages: English and 简体中文
+- **AND** show currently selected language as default
+- **AND** allow user to change selection
+
+#### Scenario: System saves language preference
+- **WHEN** user selects a new language from dropdown
+- **THEN** the system SHALL immediately change application language
+- **AND** save selection to `localStorage.setItem('userLanguage', '<language>')`
+- **AND** refresh all translated components without page reload
+
+#### Scenario: System restores language preference on startup
+- **WHEN** user returns to application after closing
+- **THEN** the system SHALL read `localStorage.getItem('userLanguage')`
+- **AND** initialize i18n with saved language
+- **AND** default to English if no preference is saved
+
+### Requirement: Translation Resource Structure
+
+The system SHALL organize translation resources in namespace-based JSON files under `src/i18n/locales/{language}/`.
+
+#### Scenario: Translation file organization
+- **WHEN** developers add new translations
+- **THEN** translations SHALL be organized by namespace: `common.json`, `settings.json`, `auth.json`, `sidebar.json`
+- **AND** each namespace SHALL contain hierarchical keys with dot notation
+- **AND** each key SHALL have corresponding translations in all supported languages
+
+**Example structure:**
+```json
+{
+  "buttons": {
+    "save": "Save",
+    "cancel": "Cancel",
+    "delete": "Delete"
+  },
+  "status": {
+    "loading": "Loading...",
+    "success": "Success",
+    "error": "Error"
+  }
+}
+```
+
+#### Scenario: Translation key naming convention
+- **WHEN** developers create new translation keys
+- **THEN** keys SHALL follow pattern: `{namespace}.{component}.{element}.{state}`
+- **AND** use descriptive names to avoid ambiguity
+- **AND** avoid abbreviations except for common UI terms (btn, lbl, msg)
+
+**Examples:**
+- `common.buttons.save` ✓
+- `settings.account.language.label` ✓
+- `auth.login.title` ✓
+- `btn.save` ✗ (too generic)
+- `msg` ✗ (too vague)
+
+### Requirement: Fallback Translation Strategy
+
+The system SHALL provide fallback translations when a translation key is missing in the user's preferred language.
+
+#### Scenario: Missing translation in selected language
+- **WHEN** a translation key does not exist in Chinese (zh-CN)
+- **THEN** the system SHALL fall back to English (en) translation
+- **AND** log warning in development console
+- **AND** display English text to user
+
+#### Scenario: Missing translation in all languages
+- **WHEN** a translation key does not exist in any language
+- **THEN** the system SHALL display the translation key itself (e.g., `common.buttons.save`)
+- **AND** log error in development console
+- **AND** NOT break the application or crash
+
+### Requirement: Component Translation Integration
+
+The system SHALL provide React components and hooks for translating UI text.
+
+#### Scenario: Functional component uses useTranslation hook
+- **WHEN** a functional component needs translations
+- **THEN** the component SHALL use `useTranslation()` hook from react-i18next
+- **AND** specify namespace: `useTranslation('common')`
+- **AND** call `t()` function with translation key
+- **AND** automatically re-render when language changes
+
+**Example:**
+```javascript
+import { useTranslation } from 'react-i18next';
+
+function SaveButton() {
+  const { t } = useTranslation('common');
+  return <button>{t('buttons.save')}</button>;
+}
+```
+
+#### Scenario: Component with interpolation
+- **WHEN** a translation contains dynamic values (e.g., username, file count)
+- **THEN** the translation SHALL use interpolation syntax: `{{variableName}}`
+- **AND** the component SHALL pass variables to `t()` function
+- **AND** the system SHALL insert values into translated string
+
+**Example:**
+```json
+{
+  "welcome": "Welcome, {{username}}!",
+  "fileCount": "You have {{count}} files"
+}
+```
+
+```javascript
+const { t } = useTranslation('common');
+t('welcome', { username: 'Alice' });  // "Welcome, Alice!"
+t('fileCount', { count: 5 });        // "You have 5 files"
+```
+
+### Requirement: Excluded Content from Translation
+
+The system SHALL NOT translate certain types of content to preserve accuracy and developer experience.
+
+#### Scenario: AI-generated content remains untranslated
+- **WHEN** AI assistant generates chat messages, code, or responses
+- **THEN** the content SHALL remain in original language (usually English)
+- **AND** NOT be processed by translation system
+
+#### Scenario: Developer-facing logs remain in English
+- **WHEN** the application logs errors, warnings, or debug information
+- **THEN** log messages SHALL remain in English
+- **AND** NOT be translated to maintain debugging consistency
+
+#### Scenario: Terminal/shell output remains as-is
+- **WHEN** the application displays terminal or shell output
+- **THEN** the output SHALL remain in original language
+- **AND** NOT be modified by translation system
+
+### Requirement: Performance and Bundle Size
+
+The system SHALL minimize the impact of i18n on application bundle size and runtime performance.
+
+#### Scenario: Code-splitting for translation files
+- **WHEN** the application is built for production
+- **THEN** translation files SHALL be split by language and namespace
+- **AND** loaded only when needed (lazy-loading)
+- **AND** increase bundle size by less than 50KB (gzip)
+
+#### Scenario: No performance regression on language switch
+- **WHEN** user changes language preference
+- **THEN** the system SHALL update UI within 100ms
+- **AND** NOT require full page reload
+- **AND** maintain smooth user experience
+
+### Requirement: Developer Experience
+
+The system SHALL provide tools and guidelines for contributors to add and maintain translations.
+
+#### Scenario: Detecting missing translations in development
+- **WHEN** a developer references a non-existent translation key
+- **THEN** the system SHALL log warning in browser console
+- **AND** display translation key in UI with warning styling
+- **AND** NOT break the build process
+
+#### Scenario: Documentation for contributors
+- **WHEN** a contributor needs to add new translations
+- **THEN** CLAUDE.md SHALL document i18n workflow
+- **AND** provide examples of correct translation key usage
+- **AND** list translation naming conventions
+- **AND** explain how to add new languages
+
+## MODIFIED Requirements
+
+*N/A - This is a new capability, no existing requirements are modified.*
+
+## REMOVED Requirements
+
+*N/A - This is a new capability, no existing requirements are removed.*
+
+## RENAMED Requirements
+
+*N/A - This is a new capability, no existing requirements are renamed.*
diff --git a/openspec/changes/add-i18n-support/specs/user-interface/spec.md b/openspec/changes/add-i18n-support/specs/user-interface/spec.md
new file mode 100644
index 0000000..da9db7d
--- /dev/null
+++ b/openspec/changes/add-i18n-support/specs/user-interface/spec.md
@@ -0,0 +1,176 @@
+# User Interface Capability Specification (Delta)
+
+## ADDED Requirements
+
+### Requirement: Language-Aware UI Components
+
+All user-facing UI components SHALL support internationalization and display translated text based on user's language preference.
+
+#### Scenario: Settings page displays translated labels
+- **WHEN** user opens Settings page
+- **THEN** all section labels (Account, Permissions, MCP Servers, Appearance) SHALL be translated
+- **AND** button labels (Save, Cancel, Delete) SHALL be translated
+- **AND** description text SHALL be translated
+- **AND** technical terms (e.g., JWT, API, SSH) may remain in English if no common translation exists
+
+#### Scenario: Sidebar displays translated navigation
+- **WHEN** user views sidebar navigation
+- **THEN** section headers (Projects, Sessions) SHALL be translated
+- **AND** action buttons (New Project, Refresh, Settings) SHALL be translated
+- **AND** status messages (Loading, Error) SHALL be translated
+
+#### Scenario: Login form displays translated text
+- **WHEN** user views login form
+- **THEN** form labels (Username, Password) SHALL be translated
+- **AND** button text (Sign In, Create Account) SHALL be translated
+- **AND** validation messages (Invalid credentials, Required field) SHALL be translated
+- **AND** error messages SHALL be translated
+
+#### Scenario: File operations show translated prompts
+- **WHEN** user performs file operations (Save, Delete, Rename)
+- **THEN** confirmation dialogs SHALL be translated
+- **AND** success messages SHALL be translated
+- **AND** error messages SHALL be translated
+
+### Requirement: Language Selector in Settings
+
+The Settings > Account section SHALL provide a language selector dropdown allowing users to choose their preferred language.
+
+#### Scenario: Language selector displays current language
+- **WHEN** user navigates to Settings > Account
+- **THEN** a language selector dropdown SHALL be visible
+- **AND** display label: "Language" (or translated equivalent)
+- **AND** show currently selected language as default value
+- **AND** list available options: English, 简体中文
+
+#### Scenario: Language selector updates preference
+- **WHEN** user selects a different language from dropdown
+- **THEN** the system SHALL immediately change application language
+- **AND** show loading indicator if translations are being loaded
+- **AND** refresh all UI components with new language
+- **AND** save preference to localStorage
+- **AND** display success message: "Language changed successfully"
+
+#### Scenario: Language selector persists across sessions
+- **WHEN** user returns to application after closing
+- **THEN** the language selector SHALL display the previously selected language
+- **AND** the application UI SHALL be in the selected language
+- **AND** the selector SHALL not show "Language" as default if user previously chose Chinese
+
+### Requirement: Responsive Layout for Translated Text
+
+UI components SHALL accommodate varying text lengths across languages without breaking layout or readability.
+
+#### Scenario: Chinese text fits in buttons
+- **WHEN** UI is displayed in Chinese (which often has longer text than English)
+- **THEN** buttons SHALL expand to fit translated text
+- **AND** text SHALL NOT overflow or wrap awkwardly
+- **AND** button heights SHALL remain consistent
+
+#### Scenario: Mobile layout handles longer translations
+- **WHEN** application is viewed on mobile device with Chinese language
+- **THEN** navigation menus SHALL accommodate longer text labels
+- **AND** sidebar items SHALL not truncate important text
+- **AND** layout SHALL remain responsive and touch-friendly
+
+#### Scenario: Tables and lists maintain alignment
+- **WHEN** table headers or list items are translated
+- **THEN** column widths SHALL adjust to fit translated content
+- **AND** text alignment SHALL remain appropriate (left-to-right for both languages)
+- **AND** content SHALL remain readable without horizontal scrolling
+
+### Requirement: Error and Status Messages
+
+All error messages, success notifications, and status indicators SHALL be translated to provide clear feedback in user's preferred language.
+
+#### Scenario: Error messages are translated
+- **WHEN** an error occurs (e.g., network failure, validation error)
+- **THEN** error message SHALL be displayed in user's selected language
+- **AND** technical error codes MAY remain in English
+- **AND** suggestions for resolution SHALL be translated
+
+#### Scenario: Success notifications are translated
+- **WHEN** an operation completes successfully (e.g., file saved, settings updated)
+- **THEN** success message SHALL be displayed in user's selected language
+- **AND** action buttons in notification (e.g., "Dismiss") SHALL be translated
+
+#### Scenario: Loading states are translated
+- **WHEN** application shows loading indicator
+- **THEN** loading text SHALL be in user's selected language (e.g., "Loading..." vs "加载中...")
+- **AND** progress messages SHALL be translated
+
+#### Scenario: Validation messages are translated
+- **WHEN** user submits form with invalid data
+- **THEN** validation error SHALL be in user's selected language
+- **AND** field-specific hints SHALL be translated
+- **AND** placeholder text SHALL be translated
+
+### Requirement: Accessibility with Translations
+
+Translated UI SHALL maintain accessibility standards including screen reader compatibility and keyboard navigation.
+
+#### Scenario: Screen readers announce translated text
+- **WHEN** screen reader user navigates UI
+- **THEN** screen reader SHALL announce translated text correctly
+- **AND** language attribute SHALL be set on HTML element: `<html lang="zh-CN">`
+- **AND** dynamic language changes SHALL update lang attribute
+
+#### Scenario: Keyboard navigation works with translated labels
+- **WHEN** user navigates with keyboard
+- **THEN** all interactive elements SHALL be accessible via Tab key
+- **AND** focus indicators SHALL be visible regardless of text length
+- **AND** keyboard shortcuts SHALL work consistently across languages
+
+### Requirement: Date and Number Formatting
+
+The system SHALL format dates, numbers, and other locale-specific data according to user's language preference.
+
+#### Scenario: Dates are formatted for locale
+- **WHEN** application displays dates (e.g., file modification time, session creation time)
+- **THEN** dates SHALL be formatted according to locale conventions
+- **AND** Chinese users see: 2025年1月16日
+- **AND** English users see: January 16, 2025
+
+#### Scenario: Numbers are formatted for locale
+- **WHEN** application displays numbers (e.g., token usage, file sizes)
+- **THEN** numbers SHALL use appropriate digit grouping symbols
+- **AND** Chinese users see: 1,234 (comma separator)
+- **AND** decimal separators match locale preference
+
+#### Scenario: File sizes are human-readable
+- **WHEN** application displays file sizes
+- **THEN** sizes SHALL be formatted with appropriate units (KB, MB, GB)
+- **AND** unit labels SHALL be translated (e.g., "KB" vs "千字节")
+- **AND** formatting shall be consistent across languages
+
+## MODIFIED Requirements
+
+### Requirement: Settings Page Navigation
+
+The Settings page SHALL provide tabs for Account, Permissions, MCP Servers, and Appearance settings. All tab labels, section headers, and descriptions SHALL be translated based on user's language preference. The Account tab SHALL include a language selector dropdown that allows users to choose between English and Simplified Chinese.
+
+#### Scenario: Navigate Settings with translated labels
+- **WHEN** user opens Settings page
+- **THEN** all navigation elements SHALL be in user's selected language
+- **AND** tab labels SHALL be translated (Account → 账户, Permissions → 权限)
+- **AND** active tab SHALL be visually indicated
+- **AND** language selector SHALL be visible in Account tab
+
+### Requirement: Onboarding Flow
+
+New users SHALL see onboarding wizard explaining application features. All onboarding text, instructions, and button labels SHALL be translated based on user's language preference. The wizard SHALL automatically detect user's system language when possible.
+
+#### Scenario: Onboarding in selected language
+- **WHEN** new user first launches application
+- **THEN** onboarding wizard SHALL detect system language or default to English
+- **AND** all wizard text SHALL be translated
+- **AND** user may change language during onboarding via language selector
+- **AND** language preference SHALL persist after onboarding completes
+
+## REMOVED Requirements
+
+*N/A - No requirements are removed, only enhanced with i18n support.*
+
+## RENAMED Requirements
+
+*N/A - No requirements are renamed.*
diff --git a/openspec/project.md b/openspec/project.md
new file mode 100644
index 0000000..28e50fc
--- /dev/null
+++ b/openspec/project.md
@@ -0,0 +1,285 @@
+# Project Context
+
+## Purpose
+
+Claude Code UI (aka Cloud CLI) is a full-stack web application that provides a responsive desktop and mobile interface for [Claude Code CLI](https://docs.anthropic.com/en/docs/claude-code), [Cursor CLI](https://docs.cursor.com/en/cli/overview), and [OpenAI Codex](https://developers.openai.com/codex). It enables users to interact with their AI programming assistants from any device through a browser, providing a seamless cross-device experience for AI-powered development workflows.
+
+**Key Goals:**
+- Provide universal access to AI CLI tools from any device (desktop, tablet, mobile)
+- Enable real-time chat and terminal interactions with AI assistants
+- Offer integrated file browsing, code editing, and Git operations
+- Support session management and conversation resumption
+- Maintain security through authentication and tool permission systems
+
+## Tech Stack
+
+### Frontend
+- **React 18** - Functional components with hooks
+- **Vite 7** - Fast build tool with hot module replacement
+- **React Router v6** - Client-side routing
+- **Tailwind CSS 3** - Utility-first styling with custom components
+- **CodeMirror 6** - Code editing with syntax highlighting (JavaScript, Python, JSON, Markdown, CSS, HTML)
+- **Xterm.js 5** - Terminal emulation with WebGL rendering
+- **React Markdown** - Markdown rendering with KaTeX math support
+- **Lucide React** - Icon library
+
+### Backend
+- **Node.js** (v20+) - ES modules (type: "module")
+- **Express.js 4** - REST API server
+- **WebSocket (ws 8)** - Real-time bidirectional communication
+- **SQLite (better-sqlite3 12)** - Embedded database for users, sessions, settings
+- **JWT (jsonwebtoken 9)** - Authentication tokens
+- **bcrypt 6** - Password hashing
+- **node-pty 1** - Pseudo-terminal for shell sessions
+
+### AI SDKs
+- **@anthropic-ai/claude-agent-sdk 0.1.x** - Direct Claude integration
+- **@openai/codex-sdk 0.75.x** - OpenAI Codex integration
+- **child process spawning** - Cursor CLI integration
+
+### DevOps
+- **concurrently** - Run frontend and backend in parallel
+- **Vite** - Build system with manual chunk splitting
+- **auto-changelog** - Automated CHANGELOG generation
+- **release-it** - Release automation
+
+### Database
+- **SQLite** with three main tables:
+  - `users` - Authentication and user settings
+  - `api_keys` - External API key management
+  - `user_credentials` - Stored service credentials (GitHub, GitLab, etc.)
+
+## Project Conventions
+
+### Code Style
+
+#### JavaScript/React (Frontend)
+- **ES Modules** - All imports use `.js` or `.jsx` extensions explicitly
+- **Functional Components** - React components are functional with hooks (no class components)
+- **File Naming**:
+  - Components: PascalCase (e.g., `ChatInterface.jsx`, `Settings.jsx`)
+  - Utilities: camelCase (e.g., `api.js`, `websocket.js`)
+  - Hooks: camelCase with `use` prefix (e.g., `useAudioRecorder.js`, `useLocalStorage.jsx`)
+- **Imports**: Organized in groups (React, third-party, relative imports)
+- **JSX**: Single quotes for attributes, double quotes for strings
+- **Component Organization**:
+  - Hooks at top level
+  - Event handlers after hooks
+  - Render helpers at bottom
+  - Main render return at end
+
+#### JavaScript (Backend)
+- **ES Modules** - All files use `.js` extension with import/export
+- **Async/Await** - Preferred over callbacks for async operations
+- **Error Handling** - Try-catch blocks for file I/O, process spawning, database operations
+- **Comments**: JSDoc-style for modules and key functions
+- **Constants**: UPPER_SNAKE_CASE (e.g., `TOOL_APPROVAL_TIMEOUT_MS`, `CONTEXT_WINDOW`)
+
+#### Code Comments
+- **Block comments** (`/* */`) for file headers and complex logic explanations
+- **Line comments** (`//`) for inline explanations
+- **TODO/FIXME** markers for pending work
+- **Session Protection comments** use multi-line header format for critical integration points
+
+### Architecture Patterns
+
+#### Frontend Architecture
+- **Component Hierarchy**: `App.jsx` → Context Providers → Page Components → UI Components
+- **Context-based State Management**:
+  - `AuthContext` - User authentication state
+  - `WebSocketContext` - WebSocket connection management
+  - `ThemeContext` - Dark/light mode
+  - `TaskMasterContext` - Task management state
+  - `TasksSettingsContext` - Task settings persistence
+- **Custom Hooks** for reusable logic (e.g., `useAudioRecorder`, `useLocalStorage`)
+- **Protected Routes** - `ProtectedRoute` component wraps authenticated pages
+- **Error Boundaries** - `ErrorBoundary` wraps main app for graceful failure
+
+#### Backend Architecture
+- **Express Middleware Chain**:
+  1. CORS (cross-origin requests)
+  2. JSON body parser
+  3. JWT authentication (`middleware/auth.js`)
+  4. Route handlers
+- **Modular Routes** - Each feature has its own router in `routes/` directory
+- **Session Management**:
+  - In-memory `activeSessions` Maps per provider (Claude, Cursor, Codex)
+  - PTY sessions cached in `ptySessionsMap` with 30-minute timeout
+  - Session resumption via `sessionId` parameter
+- **WebSocket Handlers**:
+  - `/ws` - Chat and AI assistant communication
+  - `/shell` - Terminal/shell access with PTY spawning
+- **Error Handling**:
+  - Path validation prevents directory traversal
+  - Try-catch wrapping for process spawning
+  - WebSocket errors logged but don't crash server
+
+#### Communication Patterns
+- **REST API** - Standard HTTP methods for CRUD operations
+- **WebSocket Message Flow**:
+  1. Client sends command with options (projectPath, sessionId, etc.)
+  2. Server invokes SDK/CLI integration
+  3. Responses streamed via `writer.send()` with message type markers
+  4. UI renders based on message type (content, tool_use, error, etc.)
+- **Message Types**: `claude-command`, `cursor-command`, `codex-command`, `abort-session`, `claude-permission-response`
+
+### Testing Strategy
+
+**Current Status**: No formal test suite exists. Manual testing focuses on:
+- Multi-provider session management (Claude, Cursor, Codex)
+- WebSocket connection reliability
+- File operations security
+- Terminal session persistence
+- Cross-device responsiveness
+
+**Testing Guidelines** (for future tests):
+- Test WebSocket reconnection scenarios
+- Verify file system path validation (directory traversal prevention)
+- Test tool permission approval flows
+- Validate session resumption across providers
+- Test concurrent sessions and PTY cleanup
+- Verify database migrations and schema changes
+
+### Git Workflow
+
+#### Branching Strategy
+- **main** - Production-ready code, always deployable
+- **feature/*** - New features (e.g., `feat/show-grant-permission-button`)
+- **fix/*** - Bug fixes (e.g., `fix/server-crash-when-opening-settings`)
+- **Merge commits** - Pull requests merged with merge commits (not rebase)
+
+#### Commit Message Conventions
+Based on recent commit history:
+- **feat:** - New features (e.g., "feat: add Bash command approval handling")
+- **fix:** - Bug fixes (e.g., "fix: normalize file path handling")
+- **Merge pull request #XXX** - PR merges (automated)
+- **Merge branch** - Branch merges (automated)
+
+**Commit Message Format**:
+```
+type: brief description
+
+Optional detailed explanation with multiple lines.
+
+Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
+```
+
+#### Release Process
+1. Update version in `package.json`
+2. Run `npm run release` (triggers `release-it`)
+3. Auto-generated CHANGELOG via `auto-changelog`
+4. Tag and push to GitHub repository
+
+## Domain Context
+
+### AI CLI Tools Integration
+
+#### Claude Code
+- **Session Location**: `~/.claude/projects/[encoded-path]/`
+- **Models**: Claude Sonnet 4.5, Opus 4.5 (see `shared/modelConstants.js`)
+- **Tool Permissions**: All tools **disabled by default** for security
+- **Approval Timeout**: 55 seconds (configurable via `CLAUDE_TOOL_APPROVAL_TIMEOUT_MS`)
+- **SDK Integration**: Direct SDK usage (no child processes) for better performance
+
+#### Cursor CLI
+- **Session Location**: `~/.cursor/projects/`
+- **Integration**: Child process spawning (`cursor-agent` command)
+- **Resume Support**: `--resume` parameter for session continuation
+
+#### OpenAI Codex
+- **Session Location**: `~/.codex/sessions/` (JSONL format)
+- **Token Usage**: Tracked and displayed in UI
+- **Integration**: `@openai/codex-sdk` with session file parsing
+
+### Project Discovery
+Projects auto-discovered from provider-specific directories using:
+- `extractProjectDirectory()` - Resolves encoded project paths
+- `getFileTree()` - Generates file tree structure for browsing
+- `chokidar` - File watcher for live updates
+
+### File System Security
+All file operations validate paths are within project root:
+```javascript
+const normalizedRoot = path.resolve(projectRoot) + path.sep;
+if (!resolved.startsWith(normalizedRoot)) {
+    return res.status(403).json({ error: 'Path must be under project root' });
+}
+```
+
+### Session Protection System
+Prevents sidebar project updates from interrupting active chat sessions:
+- User sends message → Session marked as **active**
+- Claude completes → Session marked as **inactive**
+- Session aborted → Session marked as **inactive**
+- App.jsx pauses sidebar updates when session is **active**
+
+## Important Constraints
+
+### Technical Constraints
+- **Node.js Version**: Minimum v20 required (ES modules, crypto.randomUUID())
+- **Single User System**: Database designed for single-user instance (not multi-tenant)
+- **In-Memory State**: Active sessions and tool approvals don't persist across restarts
+- **No Native Notifications**: Uses in-app UI for all alerts
+- **Tool Approval Timeout**: Must be < 60s (SDK control timeout limit)
+
+### Security Constraints
+- **Path Traversal Protection**: All file paths validated against project root
+- **Tool Permissions**: Opt-in model (all tools disabled by default)
+- **Authentication**: JWT-based with bcrypt password hashing
+- **API Key Management**: Stored in database with user association
+- **WebSocket Security**: Same-origin policy, no CORS on WebSocket routes
+
+### Performance Constraints
+- **Context Window**: Default 160,000 tokens (configurable via `CONTEXT_WINDOW`)
+- **Chunk Size**: Vite build warns at 1000KB chunks
+- **PTY Session Cache**: 30-minute timeout to prevent memory leaks
+- **Database**: SQLite (not suitable for high-concurrency multi-user scenarios)
+
+### Business Constraints
+- **Provider Dependency**: Requires external CLI tools to be installed separately
+- **Single Instance Design**: Not designed for hosted multi-tenant deployments
+- **No Native Mobile Apps**: Web-only (can be wrapped in PWA, but not native)
+- **Open Source MIT License**: Free to use, modify, and distribute
+
+## External Dependencies
+
+### Required CLI Tools (User-Installed)
+- **Claude Code CLI** - `npm install -g @anthropic-ai/claude-code`
+- **Cursor CLI** - Installed via Cursor IDE
+- **OpenAI Codex CLI** - `npm install -g @openai/codex`
+
+### NPM Dependencies
+**Runtime** (production):
+- Web framework: `express`, `react`, `react-dom`, `react-router-dom`
+- Real-time: `ws`, `@xterm/xterm`, `node-pty`
+- Database: `better-sqlite3`, `sqlite3`
+- Auth: `jsonwebtoken`, `bcrypt`
+- AI SDKs: `@anthropic-ai/claude-agent-sdk`, `@openai/codex-sdk`
+- UI: `@uiw/react-codemirror`, `lucide-react`, `tailwindcss`
+- Utilities: `chokidar`, `fuse.js`, `gray-matter`, `katex`
+
+**Development**:
+- Build: `vite`, `@vitejs/plugin-react`, `concurrently`
+- Release: `release-it`, `auto-changelog`
+- Image processing: `sharp`
+
+### External Services
+- **GitHub API** - Via `@octokit/rest` for Git operations
+- **OpenAI API** - Optional Whisper transcription (requires `OPENAI_API_KEY`)
+- **MCP Servers** - User-configurable Model Context Protocol servers
+
+### Environment Variables
+```bash
+PORT=3001                              # Backend server port
+VITE_PORT=5173                         # Frontend dev server port
+CONTEXT_WINDOW=160000                  # Claude context size
+CLAUDE_TOOL_APPROVAL_TIMEOUT_MS=55000  # Tool approval timeout
+OPENAI_API_KEY=                        # Whisper transcription key
+VITE_IS_PLATFORM=false                 # Platform mode flag
+```
+
+### Repository Information
+- **Homepage**: https://claudecodeui.siteboon.ai
+- **Repository**: https://github.com/siteboon/claudecodeui
+- **Issues**: https://github.com/siteboon/claudecodeui/issues
+- **Package**: `@siteboon/claude-code-ui` on npm
\ No newline at end of file
diff --git a/openspec/project.zh-CN.md b/openspec/project.zh-CN.md
new file mode 100644
index 0000000..f7759d4
--- /dev/null
+++ b/openspec/project.zh-CN.md
@@ -0,0 +1,285 @@
+# 项目上下文
+
+## 目的
+
+Claude Code UI（又名 Cloud CLI）是一个全栈 Web 应用程序，为 [Claude Code CLI](https://docs.anthropic.com/en/docs/claude-code)、[Cursor CLI](https://docs.cursor.com/en/cli/overview) 和 [OpenAI Codex](https://developers.openai.com/codex) 提供响应式桌面和移动界面。它使用户能够通过浏览器从任何设备与 AI 编程助手交互，为 AI 驱动的开发工作流程提供无缝的跨设备体验。
+
+**主要目标：**
+- 提供从任何设备（桌面、平板、移动）对 AI CLI 工具的通用访问
+- 启用与 AI 助手的实时聊天和终端交互
+- 提供集成的文件浏览、代码编辑和 Git 操作
+- 支持会话管理和对话恢复
+- 通过身份验证和工具权限系统维护安全性
+
+## 技术栈
+
+### 前端
+- **React 18** - 使用 hooks 的函数式组件
+- **Vite 7** - 快速构建工具，支持热模块替换
+- **React Router v6** - 客户端路由
+- **Tailwind CSS 3** - 实用工具优先的样式，带有自定义组件
+- **CodeMirror 6** - 代码编辑，支持语法高亮（JavaScript、Python、JSON、Markdown、CSS、HTML）
+- **Xterm.js 5** - 终端模拟，使用 WebGL 渲染
+- **React Markdown** - Markdown 渲染，支持 KaTeX 数学
+- **Lucide React** - 图标库
+
+### 后端
+- **Node.js**（v20+）- ES 模块（type: "module"）
+- **Express.js 4** - REST API 服务器
+- **WebSocket (ws 8)** - 实时双向通信
+- **SQLite (better-sqlite3 12)** - 嵌入式数据库，用于用户、会话、设置
+- **JWT (jsonwebtoken 9)** - 身份验证令牌
+- **bcrypt 6** - 密码哈希
+- **node-pty 1** - 用于 shell 会话的伪终端
+
+### AI SDK
+- **@anthropic-ai/claude-agent-sdk 0.1.x** - 直接 Claude 集成
+- **@openai/codex-sdk 0.75.x** - OpenAI Codex 集成
+- **子进程生成** - Cursor CLI 集成
+
+### DevOps
+- **concurrently** - 并行运行前端和后端
+- **Vite** - 构建系统，手动代码分割
+- **auto-changelog** - 自动生成 CHANGELOG
+- **release-it** - 发布自动化
+
+### 数据库
+- **SQLite** 三个主要表：
+  - `users` - 身份验证和用户设置
+  - `api_keys` - 外部 API 密钥管理
+  - `user_credentials` - 存储的服务凭据（GitHub、GitLab 等）
+
+## 项目约定
+
+### 代码风格
+
+#### JavaScript/React（前端）
+- **ES 模块** - 所有导入都显式使用 `.js` 或 `.jsx` 扩展名
+- **函数式组件** - React 组件是使用 hooks 的函数（无类组件）
+- **文件命名**：
+  - 组件：PascalCase（例如 `ChatInterface.jsx`、`Settings.jsx`）
+  - 工具：camelCase（例如 `api.js`、`websocket.js`）
+  - Hooks：带 `use` 前缀的 camelCase（例如 `useAudioRecorder.js`、`useLocalStorage.jsx`）
+- **导入**：按组组织（React、第三方、相对导入）
+- **JSX**：属性使用单引号，字符串使用双引号
+- **组件组织**：
+  - Hooks 在顶层
+  - 事件处理程序在 hooks 之后
+  - 渲染助手在底部
+  - 主渲染返回在最后
+
+#### JavaScript（后端）
+- **ES 模块** - 所有文件都使用 `.js` 扩展名和 import/export
+- **Async/Await** - 异步操作优于回调
+- **错误处理** - 文件 I/O、进程生成、数据库操作的 try-catch 块
+- **注释**：模块和关键函数使用 JSDoc 风格
+- **常量**：UPPER_SNAKE_CASE（例如 `TOOL_APPROVAL_TIMEOUT_MS`、`CONTEXT_WINDOW`）
+
+#### 代码注释
+- **块注释**（`/* */`）用于文件头和复杂逻辑说明
+- **行注释**（`//`）用于内联说明
+- **TODO/FIXME** 标记用于待处理工作
+- **会话保护注释**在关键集成点使用多行标题格式
+
+### 架构模式
+
+#### 前端架构
+- **组件层次结构**：`App.jsx` → 上下文提供者 → 页面组件 → UI 组件
+- **基于上下文的状态管理**：
+  - `AuthContext` - 用户身份验证状态
+  - `WebSocketContext` - WebSocket 连接管理
+  - `ThemeContext` - 深色/浅色模式
+  - `TaskMasterContext` - 任务管理状态
+  - `TasksSettingsContext` - 任务设置持久化
+- **自定义 Hooks** 用于可重用逻辑（例如 `useAudioRecorder`、`useLocalStorage`）
+- **受保护路由** - `ProtectedRoute` 组件包装已验证的页面
+- **错误边界** - `ErrorBoundary` 包装主应用程序以实现优雅故障
+
+#### 后端架构
+- **Express 中间件链**：
+  1. CORS（跨域请求）
+  2. JSON 正文解析器
+  3. JWT 身份验证（`middleware/auth.js`）
+  4. 路由处理程序
+- **模块化路由** - 每个功能在 `routes/` 目录中都有自己的路由器
+- **会话管理**：
+  - 每个提供者的内存 `activeSessions` 映射（Claude、Cursor、Codex）
+  - PTY 会话缓存在 `ptySessionsMap` 中，具有 30 分钟超时
+  - 通过 `sessionId` 参数恢复会话
+- **WebSocket 处理程序**：
+  - `/ws` - 聊天和 AI 助手通信
+  - `/shell` - 终端/shell 访问，带有 PTY 生成
+- **错误处理**：
+  - 路径验证防止目录遍历
+  - 进程生成的 try-catch 包装
+  - WebSocket 错误被记录但不会导致服务器崩溃
+
+#### 通信模式
+- **REST API** - 用于 CRUD 操作的标准 HTTP 方法
+- **WebSocket 消息流**：
+  1. 客户端发送带有选项（projectPath、sessionId 等）的命令
+  2. 服务器调用 SDK/CLI 集成
+  3. 通过 `writer.send()` 流式传输响应，带有消息类型标记
+  4. UI 根据消息类型（content、tool_use、error 等）进行渲染
+- **消息类型**：`claude-command`、`cursor-command`、`codex-command`、`abort-session`、`claude-permission-response`
+
+### 测试策略
+
+**当前状态**：不存在正式测试套件。手动测试侧重于：
+- 多提供商会话管理（Claude、Cursor、Codex）
+- WebSocket 连接可靠性
+- 文件操作安全性
+- 终端会话持久性
+- 跨设备响应能力
+
+**测试指南**（用于未来测试）：
+- 测试 WebSocket 重新连接场景
+- 验证文件系统路径验证（目录遍历预防）
+- 测试工具权限批准流程
+- 验证跨提供商的会话恢复
+- 测试并发会话和 PTY 清理
+- 验证数据库迁移和架构更改
+
+### Git 工作流
+
+#### 分支策略
+- **main** - 生产就绪代码，始终可部署
+- **feature/*** - 新功能（例如 `feat/show-grant-permission-button`）
+- **fix/*** - 错误修复（例如 `fix/server-crash-when-opening-settings`）
+- **合并提交** - 使用合并提交合并的拉取请求（不是 rebase）
+
+#### 提交消息约定
+基于最近的提交历史：
+- **feat:** - 新功能（例如 "feat: add Bash command approval handling"）
+- **fix:** - 错误修复（例如 "fix: normalize file path handling"）
+- **Merge pull request #XXX** - PR 合并（自动）
+- **Merge branch** - 分支合并（自动）
+
+**提交消息格式**：
+```
+type: 简要描述
+
+可选的详细说明，多行。
+
+Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
+```
+
+#### 发布流程
+1. 更新 `package.json` 中的版本
+2. 运行 `npm run release`（触发 `release-it`）
+3. 通过 `auto-changelog` 自动生成 CHANGELOG
+4. 标记并推送到 GitHub 存储库
+
+## 领域上下文
+
+### AI CLI 工具集成
+
+#### Claude Code
+- **会话位置**：`~/.claude/projects/[encoded-path]/`
+- **模型**：Claude Sonnet 4.5、Opus 4.5（参见 `shared/modelConstants.js`）
+- **工具权限**：出于安全考虑，所有工具**默认禁用**
+- **批准超时**：55 秒（可通过 `CLAUDE_TOOL_APPROVAL_TIMEOUT_MS` 配置）
+- **SDK 集成**：直接 SDK 使用（无子进程）以获得更好的性能
+
+#### Cursor CLI
+- **会话位置**：`~/.cursor/projects/`
+- **集成**：子进程生成（`cursor-agent` 命令）
+- **恢复支持**：`--resume` 参数用于会话继续
+
+#### OpenAI Codex
+- **会话位置**：`~/.codex/sessions/`（JSONL 格式）
+- **令牌使用**：在 UI 中跟踪和显示
+- **集成**：`@openai/codex-sdk` 与会话文件解析
+
+### 项目发现
+从特定于提供程序的目录自动发现项目，使用：
+- `extractProjectDirectory()` - 解析编码的项目路径
+- `getFileTree()` - 生成文件树结构以供浏览
+- `chokidar` - 用于实时更新的文件监视程序
+
+### 文件系统安全性
+所有文件操作验证路径都在项目根目录内：
+```javascript
+const normalizedRoot = path.resolve(projectRoot) + path.sep;
+if (!resolved.startsWith(normalizedRoot)) {
+    return res.status(403).json({ error: 'Path must be under project root' });
+}
+```
+
+### 会话保护系统
+防止侧边栏项目更新中断活动聊天会话：
+- 用户发送消息 → 会话标记为**活动**
+- Claude 完成 → 会话标记为**非活动**
+- 会话中止 → 会话标记为**非活动**
+- App.jsx 在会话**活动**时暂停侧边栏更新
+
+## 重要约束
+
+### 技术约束
+- **Node.js 版本**：最低 v20（ES 模块、crypto.randomUUID()）
+- **单用户系统**：数据库设计用于单用户实例（非多租户）
+- **内存状态**：活动会话和工具批准不会在重启后持久化
+- **无原生通知**：使用应用内 UI 进行所有警报
+- **工具批准超时**：必须 < 60s（SDK 控制超时限制）
+
+### 安全约束
+- **路径遍历保护**：所有文件路径都根据项目根目录进行验证
+- **工具权限**：选择加入模式（所有工具默认禁用）
+- **身份验证**：基于 JWT，使用 bcrypt 密码哈希
+- **API 密钥管理**：存储在数据库中，与用户关联
+- **WebSocket 安全性**：同源策略，WebSocket 路由上无 CORS
+
+### 性能约束
+- **上下文窗口**：默认 160,000 个令牌（可通过 `CONTEXT_WINDOW` 配置）
+- **块大小**：Vite 构建在 1000KB 块时警告
+- **PTY 会话缓存**：30 分钟超时以防止内存泄漏
+- **数据库**：SQLite（不适合高并发多用户场景）
+
+### 业务约束
+- **提供程序依赖**：需要单独安装外部 CLI 工具
+- **单实例设计**：不适用于托管多租户部署
+- **无原生移动应用**：仅 Web（可以包装在 PWA 中，但不是原生）
+- **开源 MIT 许可证**：可免费使用、修改和分发
+
+## 外部依赖
+
+### 必需的 CLI 工具（用户安装）
+- **Claude Code CLI** - `npm install -g @anthropic-ai/claude-code`
+- **Cursor CLI** - 通过 Cursor IDE 安装
+- **OpenAI Codex CLI** - `npm install -g @openai/codex`
+
+### NPM 依赖
+**运行时**（生产）：
+- Web 框架：`express`、`react`、`react-dom`、`react-router-dom`
+- 实时：`ws`、`@xterm/xterm`、`node-pty`
+- 数据库：`better-sqlite3`、`sqlite3`
+- 身份验证：`jsonwebtoken`、`bcrypt`
+- AI SDK：`@anthropic-ai/claude-agent-sdk`、`@openai/codex-sdk`
+- UI：`@uiw/react-codemirror`、`lucide-react`、`tailwindcss`
+- 工具：`chokidar`、`fuse.js`、`gray-matter`、`katex`
+
+**开发**：
+- 构建：`vite`、`@vitejs/plugin-react`、`concurrently`
+- 发布：`release-it`、`auto-changelog`
+- 图像处理：`sharp`
+
+### 外部服务
+- **GitHub API** - 通过 `@octokit/rest` 进行 Git 操作
+- **OpenAI API** - 可选的 Whisper 转录（需要 `OPENAI_API_KEY`）
+- **MCP 服务器** - 用户可配置的模型上下文协议服务器
+
+### 环境变量
+```bash
+PORT=3001                              # 后端服务器端口
+VITE_PORT=5173                         # 前端开发服务器端口
+CONTEXT_WINDOW=160000                  # Claude 上下文大小
+CLAUDE_TOOL_APPROVAL_TIMEOUT_MS=55000  # 工具批准超时
+OPENAI_API_KEY=                        # Whisper 转录密钥
+VITE_IS_PLATFORM=false                 # 平台模式标志
+```
+
+### 存储库信息
+- **主页**：https://claudecodeui.siteboon.ai
+- **存储库**：https://github.com/siteboon/claudecodeui
+- **问题**：https://github.com/siteboon/claudecodeui/issues
+- **包**：npm 上的 `@siteboon/claude-code-ui`
diff --git a/package-lock.json b/package-lock.json
index b7ab7c0..dc7b5bf 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -39,16 +39,19 @@
         "express": "^4.18.2",
         "fuse.js": "^7.0.0",
         "gray-matter": "^4.0.3",
+        "i18next": "^25.7.4",
+        "i18next-browser-languagedetector": "^8.2.0",
         "jsonwebtoken": "^9.0.2",
         "katex": "^0.16.25",
         "lucide-react": "^0.515.0",
         "mime-types": "^3.0.1",
         "multer": "^2.0.1",
         "node-fetch": "^2.7.0",
-        "node-pty": "^1.1.0-beta34",
+        "node-pty": "^1.1.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-dropzone": "^14.2.3",
+        "react-i18next": "^16.5.3",
         "react-markdown": "^10.1.0",
         "react-router-dom": "^6.8.1",
         "rehype-katex": "^7.0.1",
@@ -359,9 +362,9 @@
       }
     },
     "node_modules/@babel/runtime": {
-      "version": "7.27.6",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.27.6.tgz",
-      "integrity": "sha512-vbavdySgbTTrmFE+EsiqUTzlOr5bzlnJtUv9PynGCAKvfQqjIXbvFdumPM/GxMDfyuGMJaJAU6TO4zc1Jf1i8Q==",
+      "version": "7.28.6",
+      "resolved": "https://registry.npmmirror.com/@babel/runtime/-/runtime-7.28.6.tgz",
+      "integrity": "sha512-05WQkdpL9COIMz4LjTxGpPNCdlpyimKppYNoJ5Di5EUObifl8t4tuLuUBBZEpoLYOmfvIWrsp9fCl0HoPRVTdA==",
       "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
@@ -5756,6 +5759,15 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/html-parse-stringify": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmmirror.com/html-parse-stringify/-/html-parse-stringify-3.0.1.tgz",
+      "integrity": "sha512-KknJ50kTInJ7qIScF3jeaFRpMpE8/lfiTdzf/twXyPBLAGrLRTmkz3AdTnKeh40X8k9L2fdYwEp/42WGXIRGcg==",
+      "license": "MIT",
+      "dependencies": {
+        "void-elements": "3.1.0"
+      }
+    },
     "node_modules/html-url-attributes": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/html-url-attributes/-/html-url-attributes-3.0.1.tgz",
@@ -5837,6 +5849,46 @@
         "ms": "^2.0.0"
       }
     },
+    "node_modules/i18next": {
+      "version": "25.7.4",
+      "resolved": "https://registry.npmmirror.com/i18next/-/i18next-25.7.4.tgz",
+      "integrity": "sha512-hRkpEblXXcXSNbw8mBNq9042OEetgyB/ahc/X17uV/khPwzV+uB8RHceHh3qavyrkPJvmXFKXME2Sy1E0KjAfw==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://locize.com"
+        },
+        {
+          "type": "individual",
+          "url": "https://locize.com/i18next.html"
+        },
+        {
+          "type": "individual",
+          "url": "https://www.i18next.com/how-to/faq#i18next-is-awesome.-how-can-i-support-the-project"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.28.4"
+      },
+      "peerDependencies": {
+        "typescript": "^5"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/i18next-browser-languagedetector": {
+      "version": "8.2.0",
+      "resolved": "https://registry.npmmirror.com/i18next-browser-languagedetector/-/i18next-browser-languagedetector-8.2.0.tgz",
+      "integrity": "sha512-P+3zEKLnOF0qmiesW383vsLdtQVyKtCNA9cjSoKCppTKPQVfKd2W8hbVo5ZhNJKDqeM7BOcvNoKJOjpHh4Js9g==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.23.2"
+      }
+    },
     "node_modules/iconv-lite": {
       "version": "0.4.24",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz",
@@ -8101,9 +8153,9 @@
       }
     },
     "node_modules/node-pty": {
-      "version": "1.1.0-beta9",
-      "resolved": "https://registry.npmjs.org/node-pty/-/node-pty-1.1.0-beta9.tgz",
-      "integrity": "sha512-/Ue38pvXJdgRZ3+me1FgfglLd301GhJN0NStiotdt61tm43N5htUyR/IXOUzOKuNaFmCwIhy6nwb77Ky41LMbw==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmmirror.com/node-pty/-/node-pty-1.1.0.tgz",
+      "integrity": "sha512-20JqtutY6JPXTUnL0ij1uad7Qe1baT46lyolh2sSENDd4sTzKZ4nmAFkeAARDKwmlLjPx6XKRlwRUxwjOy+lUg==",
       "hasInstallScript": true,
       "license": "MIT",
       "dependencies": {
@@ -9086,6 +9138,33 @@
         "react": ">= 16.8 || 18.0.0"
       }
     },
+    "node_modules/react-i18next": {
+      "version": "16.5.3",
+      "resolved": "https://registry.npmmirror.com/react-i18next/-/react-i18next-16.5.3.tgz",
+      "integrity": "sha512-fo+/NNch37zqxOzlBYrWMx0uy/yInPkRfjSuy4lqKdaecR17nvCHnEUt3QyzA8XjQ2B/0iW/5BhaHR3ZmukpGw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.28.4",
+        "html-parse-stringify": "^3.0.1",
+        "use-sync-external-store": "^1.6.0"
+      },
+      "peerDependencies": {
+        "i18next": ">= 25.6.2",
+        "react": ">= 16.8.0",
+        "typescript": "^5"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        },
+        "react-native": {
+          "optional": true
+        },
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
@@ -11536,6 +11615,15 @@
         "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
       }
     },
+    "node_modules/use-sync-external-store": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmmirror.com/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz",
+      "integrity": "sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -11708,6 +11796,15 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/void-elements": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmmirror.com/void-elements/-/void-elements-3.1.0.tgz",
+      "integrity": "sha512-Dhxzh5HZuiHQhbvTW9AMetFfBHDMYpo23Uo9btPXgdYP+3T5S+p+jgNy7spra+veYhBP2dCSgxR/i2Y02h5/6w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/w3c-keyname": {
       "version": "2.2.8",
       "resolved": "https://registry.npmjs.org/w3c-keyname/-/w3c-keyname-2.2.8.tgz",
diff --git a/package.json b/package.json
index 81c8ded..ab63528 100644
--- a/package.json
+++ b/package.json
@@ -71,6 +71,8 @@
     "express": "^4.18.2",
     "fuse.js": "^7.0.0",
     "gray-matter": "^4.0.3",
+    "i18next": "^25.7.4",
+    "i18next-browser-languagedetector": "^8.2.0",
     "jsonwebtoken": "^9.0.2",
     "katex": "^0.16.25",
     "lucide-react": "^0.515.0",
@@ -81,6 +83,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-dropzone": "^14.2.3",
+    "react-i18next": "^16.5.3",
     "react-markdown": "^10.1.0",
     "react-router-dom": "^6.8.1",
     "rehype-katex": "^7.0.1",
diff --git a/src/App.jsx b/src/App.jsx
index ed0ef58..1860fff 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -36,6 +36,8 @@ import ProtectedRoute from './components/ProtectedRoute';
 import { useVersionCheck } from './hooks/useVersionCheck';
 import useLocalStorage from './hooks/useLocalStorage';
 import { api, authenticatedFetch } from './utils/api';
+import { I18nextProvider } from 'react-i18next';
+import i18n from './i18n/config.js';
 
 
 // Main App component with routing
@@ -950,24 +952,26 @@ function AppContent() {
 // Root App component with router
 function App() {
   return (
-    <ThemeProvider>
-      <AuthProvider>
-        <WebSocketProvider>
-          <TasksSettingsProvider>
-            <TaskMasterProvider>
-              <ProtectedRoute>
-                <Router>
-                  <Routes>
-                    <Route path="/" element={<AppContent />} />
-                    <Route path="/session/:sessionId" element={<AppContent />} />
-                  </Routes>
-                </Router>
-              </ProtectedRoute>
-            </TaskMasterProvider>
-          </TasksSettingsProvider>
-        </WebSocketProvider>
-      </AuthProvider>
-    </ThemeProvider>
+    <I18nextProvider i18n={i18n}>
+      <ThemeProvider>
+        <AuthProvider>
+          <WebSocketProvider>
+            <TasksSettingsProvider>
+              <TaskMasterProvider>
+                <ProtectedRoute>
+                  <Router>
+                    <Routes>
+                      <Route path="/" element={<AppContent />} />
+                      <Route path="/session/:sessionId" element={<AppContent />} />
+                    </Routes>
+                  </Router>
+                </ProtectedRoute>
+              </TaskMasterProvider>
+            </TasksSettingsProvider>
+          </WebSocketProvider>
+        </AuthProvider>
+      </ThemeProvider>
+    </I18nextProvider>
   );
 }
 
diff --git a/src/components/FileTree.jsx b/src/components/FileTree.jsx
index 725ae7c..643d8eb 100644
--- a/src/components/FileTree.jsx
+++ b/src/components/FileTree.jsx
@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
 import { ScrollArea } from './ui/scroll-area';
 import { Button } from './ui/button';
 import { Input } from './ui/input';
@@ -9,6 +10,7 @@ import ImageViewer from './ImageViewer';
 import { api } from '../utils/api';
 
 function FileTree({ selectedProject }) {
+  const { t } = useTranslation();
   const [files, setFiles] = useState([]);
   const [loading, setLoading] = useState(false);
   const [expandedDirs, setExpandedDirs] = useState(new Set());
@@ -130,11 +132,11 @@ function FileTree({ selectedProject }) {
     const now = new Date();
     const past = new Date(date);
     const diffInSeconds = Math.floor((now - past) / 1000);
-    
-    if (diffInSeconds < 60) return 'just now';
-    if (diffInSeconds < 3600) return `${Math.floor(diffInSeconds / 60)} min ago`;
-    if (diffInSeconds < 86400) return `${Math.floor(diffInSeconds / 3600)} hours ago`;
-    if (diffInSeconds < 2592000) return `${Math.floor(diffInSeconds / 86400)} days ago`;
+
+    if (diffInSeconds < 60) return t('fileTree.justNow');
+    if (diffInSeconds < 3600) return t('fileTree.minAgo', { count: Math.floor(diffInSeconds / 60) });
+    if (diffInSeconds < 86400) return t('fileTree.hoursAgo', { count: Math.floor(diffInSeconds / 3600) });
+    if (diffInSeconds < 2592000) return t('fileTree.daysAgo', { count: Math.floor(diffInSeconds / 86400) });
     return past.toLocaleDateString();
   };
 
@@ -348,7 +350,7 @@ function FileTree({ selectedProject }) {
     return (
       <div className="h-full flex items-center justify-center">
         <div className="text-gray-500 dark:text-gray-400">
-          Loading files...
+          {t('fileTree.loading')}
         </div>
       </div>
     );
@@ -359,14 +361,14 @@ function FileTree({ selectedProject }) {
       {/* Header with Search and View Mode Toggle */}
       <div className="p-4 border-b border-border space-y-3">
         <div className="flex items-center justify-between">
-          <h3 className="text-sm font-medium text-foreground">Files</h3>
+          <h3 className="text-sm font-medium text-foreground">{t('fileTree.files')}</h3>
           <div className="flex gap-1">
             <Button
               variant={viewMode === 'simple' ? 'default' : 'ghost'}
               size="sm"
               className="h-8 w-8 p-0"
               onClick={() => changeViewMode('simple')}
-              title="Simple view"
+              title={t('fileTree.simpleView')}
             >
               <List className="w-4 h-4" />
             </Button>
@@ -375,7 +377,7 @@ function FileTree({ selectedProject }) {
               size="sm"
               className="h-8 w-8 p-0"
               onClick={() => changeViewMode('compact')}
-              title="Compact view"
+              title={t('fileTree.compactView')}
             >
               <Eye className="w-4 h-4" />
             </Button>
@@ -384,7 +386,7 @@ function FileTree({ selectedProject }) {
               size="sm"
               className="h-8 w-8 p-0"
               onClick={() => changeViewMode('detailed')}
-              title="Detailed view"
+              title={t('fileTree.detailedView')}
             >
               <TableProperties className="w-4 h-4" />
             </Button>
@@ -396,7 +398,7 @@ function FileTree({ selectedProject }) {
           <Search className="absolute left-2 top-1/2 transform -translate-y-1/2 w-4 h-4 text-muted-foreground" />
           <Input
             type="text"
-            placeholder="Search files and folders..."
+            placeholder={t('fileTree.searchPlaceholder')}
             value={searchQuery}
             onChange={(e) => setSearchQuery(e.target.value)}
             className="pl-8 pr-8 h-8 text-sm"
@@ -407,7 +409,7 @@ function FileTree({ selectedProject }) {
               size="sm"
               className="absolute right-1 top-1/2 transform -translate-y-1/2 h-6 w-6 p-0 hover:bg-accent"
               onClick={() => setSearchQuery('')}
-              title="Clear search"
+              title={t('fileTree.clearSearch')}
             >
               <X className="w-3 h-3" />
             </Button>
@@ -419,23 +421,23 @@ function FileTree({ selectedProject }) {
       {viewMode === 'detailed' && filteredFiles.length > 0 && (
         <div className="px-4 pt-2 pb-1 border-b border-border">
           <div className="grid grid-cols-12 gap-2 px-2 text-xs font-medium text-muted-foreground">
-            <div className="col-span-5">Name</div>
-            <div className="col-span-2">Size</div>
-            <div className="col-span-3">Modified</div>
-            <div className="col-span-2">Permissions</div>
+            <div className="col-span-5">{t('fileTree.name')}</div>
+            <div className="col-span-2">{t('fileTree.size')}</div>
+            <div className="col-span-3">{t('fileTree.modified')}</div>
+            <div className="col-span-2">{t('fileTree.permissions')}</div>
           </div>
         </div>
       )}
-      
+
       <ScrollArea className="flex-1 p-4">
         {files.length === 0 ? (
           <div className="text-center py-8">
             <div className="w-12 h-12 bg-muted rounded-lg flex items-center justify-center mx-auto mb-3">
               <Folder className="w-6 h-6 text-muted-foreground" />
             </div>
-            <h4 className="font-medium text-foreground mb-1">No files found</h4>
+            <h4 className="font-medium text-foreground mb-1">{t('fileTree.noFilesFound')}</h4>
             <p className="text-sm text-muted-foreground">
-              Check if the project path is accessible
+              {t('fileTree.checkProjectPath')}
             </p>
           </div>
         ) : filteredFiles.length === 0 && searchQuery ? (
@@ -443,9 +445,9 @@ function FileTree({ selectedProject }) {
             <div className="w-12 h-12 bg-muted rounded-lg flex items-center justify-center mx-auto mb-3">
               <Search className="w-6 h-6 text-muted-foreground" />
             </div>
-            <h4 className="font-medium text-foreground mb-1">No matches found</h4>
+            <h4 className="font-medium text-foreground mb-1">{t('fileTree.noMatchesFound')}</h4>
             <p className="text-sm text-muted-foreground">
-              Try a different search term or clear the search
+              {t('fileTree.tryDifferentSearch')}
             </p>
           </div>
         ) : (
diff --git a/src/components/LanguageSelector.jsx b/src/components/LanguageSelector.jsx
new file mode 100644
index 0000000..bef7cf9
--- /dev/null
+++ b/src/components/LanguageSelector.jsx
@@ -0,0 +1,74 @@
+/**
+ * Language Selector Component
+ *
+ * A dropdown component for selecting the application language.
+ * Automatically updates the i18n language and persists to localStorage.
+ *
+ * Props:
+ * @param {boolean} compact - If true, uses compact style (default: false)
+ */
+
+import { useTranslation } from 'react-i18next';
+import { Languages } from 'lucide-react';
+import { languages } from '../i18n/languages';
+
+function LanguageSelector({ compact = false }) {
+  const { i18n, t } = useTranslation('settings');
+
+  const handleLanguageChange = (event) => {
+    const newLanguage = event.target.value;
+    i18n.changeLanguage(newLanguage);
+  };
+
+  // Compact style for QuickSettingsPanel
+  if (compact) {
+    return (
+      <div className="flex items-center justify-between p-3 rounded-lg bg-gray-50 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors border border-transparent hover:border-gray-300 dark:hover:border-gray-600">
+        <span className="flex items-center gap-2 text-sm text-gray-900 dark:text-white">
+          <Languages className="h-4 w-4 text-gray-600 dark:text-gray-400" />
+          {t('account.language')}
+        </span>
+        <select
+          value={i18n.language}
+          onChange={handleLanguageChange}
+          className="w-[100px] text-sm bg-gray-50 dark:bg-gray-800 border border-gray-300 dark:border-gray-600 text-gray-900 dark:text-gray-100 rounded-lg focus:ring-blue-500 focus:border-blue-500 p-2 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400"
+        >
+          {languages.map((lang) => (
+            <option key={lang.value} value={lang.value}>
+              {lang.nativeName}
+            </option>
+          ))}
+        </select>
+      </div>
+    );
+  }
+
+  // Full style for Settings page
+  return (
+    <div className="bg-gray-50 dark:bg-gray-900/50 border border-gray-200 dark:border-gray-700 rounded-lg p-4">
+      <div className="flex items-center justify-between">
+        <div>
+          <div className="font-medium text-gray-900 dark:text-gray-100 mb-1">
+            {t('account.languageLabel')}
+          </div>
+          <div className="text-sm text-gray-600 dark:text-gray-400">
+            {t('account.languageDescription')}
+          </div>
+        </div>
+        <select
+          value={i18n.language}
+          onChange={handleLanguageChange}
+          className="text-sm bg-gray-50 dark:bg-gray-800 border border-gray-300 dark:border-gray-600 text-gray-900 dark:text-gray-100 rounded-lg focus:ring-blue-500 focus:border-blue-500 p-2 w-36"
+        >
+          {languages.map((lang) => (
+            <option key={lang.value} value={lang.value}>
+              {lang.nativeName}
+            </option>
+          ))}
+        </select>
+      </div>
+    </div>
+  );
+}
+
+export default LanguageSelector;
diff --git a/src/components/LoginForm.jsx b/src/components/LoginForm.jsx
index f2a490a..1482ad7 100644
--- a/src/components/LoginForm.jsx
+++ b/src/components/LoginForm.jsx
@@ -1,32 +1,34 @@
 import React, { useState } from 'react';
 import { useAuth } from '../contexts/AuthContext';
 import { MessageSquare } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
 
 const LoginForm = () => {
+  const { t } = useTranslation('auth');
   const [username, setUsername] = useState('');
   const [password, setPassword] = useState('');
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState('');
-  
+
   const { login } = useAuth();
 
   const handleSubmit = async (e) => {
     e.preventDefault();
     setError('');
-    
+
     if (!username || !password) {
-      setError('Please enter both username and password');
+      setError(t('errors.requiredFields'));
       return;
     }
-    
+
     setIsLoading(true);
-    
+
     const result = await login(username, password);
-    
+
     if (!result.success) {
       setError(result.error);
     }
-    
+
     setIsLoading(false);
   };
 
@@ -41,9 +43,9 @@ const LoginForm = () => {
                 <MessageSquare className="w-8 h-8 text-primary-foreground" />
               </div>
             </div>
-            <h1 className="text-2xl font-bold text-foreground">Welcome Back</h1>
+            <h1 className="text-2xl font-bold text-foreground">{t('login.title')}</h1>
             <p className="text-muted-foreground mt-2">
-              Sign in to your Claude Code UI account
+              {t('login.description')}
             </p>
           </div>
 
@@ -51,7 +53,7 @@ const LoginForm = () => {
           <form onSubmit={handleSubmit} className="space-y-4">
             <div>
               <label htmlFor="username" className="block text-sm font-medium text-foreground mb-1">
-                Username
+                {t('login.username')}
               </label>
               <input
                 type="text"
@@ -59,7 +61,7 @@ const LoginForm = () => {
                 value={username}
                 onChange={(e) => setUsername(e.target.value)}
                 className="w-full px-3 py-2 border border-border rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-                placeholder="Enter your username"
+                placeholder={t('login.placeholders.username')}
                 required
                 disabled={isLoading}
               />
@@ -67,7 +69,7 @@ const LoginForm = () => {
 
             <div>
               <label htmlFor="password" className="block text-sm font-medium text-foreground mb-1">
-                Password
+                {t('login.password')}
               </label>
               <input
                 type="password"
@@ -75,7 +77,7 @@ const LoginForm = () => {
                 value={password}
                 onChange={(e) => setPassword(e.target.value)}
                 className="w-full px-3 py-2 border border-border rounded-md bg-background text-foreground focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
-                placeholder="Enter your password"
+                placeholder={t('login.placeholders.password')}
                 required
                 disabled={isLoading}
               />
@@ -92,7 +94,7 @@ const LoginForm = () => {
               disabled={isLoading}
               className="w-full bg-blue-600 hover:bg-blue-700 disabled:bg-blue-400 text-white font-medium py-2 px-4 rounded-md transition-colors duration-200"
             >
-              {isLoading ? 'Signing in...' : 'Sign In'}
+              {isLoading ? t('login.loading') : t('login.submit')}
             </button>
           </form>
 
diff --git a/src/components/MainContent.jsx b/src/components/MainContent.jsx
index 58a8749..50949a0 100644
--- a/src/components/MainContent.jsx
+++ b/src/components/MainContent.jsx
@@ -12,6 +12,7 @@
  */
 
 import React, { useState, useEffect, useRef } from 'react';
+import { useTranslation } from 'react-i18next';
 import ChatInterface from './ChatInterface';
 import FileTree from './FileTree';
 import CodeEditor from './CodeEditor';
@@ -58,6 +59,7 @@ function MainContent({
   sendByCtrlEnter,        // Send by Ctrl+Enter mode for East Asian language input
   externalMessageUpdate   // Trigger for external CLI updates to current session
 }) {
+  const { t } = useTranslation();
   const [editingFile, setEditingFile] = useState(null);
   const [selectedTask, setSelectedTask] = useState(null);
   const [showTaskDetail, setShowTaskDetail] = useState(false);
@@ -238,8 +240,8 @@ function MainContent({
                 }} 
               />
             </div>
-            <h2 className="text-xl font-semibold mb-2">Loading Claude Code UI</h2>
-            <p>Setting up your workspace...</p>
+            <h2 className="text-xl font-semibold mb-2">{t('mainContent.loading')}</h2>
+            <p>{t('mainContent.settingUpWorkspace')}</p>
           </div>
         </div>
       </div>
@@ -271,13 +273,13 @@ function MainContent({
                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-5l-2-2H5a2 2 0 00-2 2z" />
               </svg>
             </div>
-            <h2 className="text-2xl font-semibold mb-3 text-gray-900 dark:text-white">Choose Your Project</h2>
+            <h2 className="text-2xl font-semibold mb-3 text-gray-900 dark:text-white">{t('mainContent.chooseProject')}</h2>
             <p className="text-gray-600 dark:text-gray-300 mb-6 leading-relaxed">
-              Select a project from the sidebar to start coding with Claude. Each project contains your chat sessions and file history.
+              {t('mainContent.selectProjectDescription')}
             </p>
             <div className="bg-blue-50 dark:bg-blue-900/20 rounded-lg p-4 border border-blue-200 dark:border-blue-800">
               <p className="text-sm text-blue-700 dark:text-blue-300">
-                💡 <strong>Tip:</strong> {isMobile ? 'Tap the menu button above to access projects' : 'Create a new project by clicking the folder icon in the sidebar'}
+                💡 <strong>{t('mainContent.tip')}:</strong> {isMobile ? t('mainContent.createProjectMobile') : t('mainContent.createProjectDesktop')}
               </p>
             </div>
           </div>
@@ -331,7 +333,7 @@ function MainContent({
                 ) : activeTab === 'chat' && !selectedSession ? (
                   <div className="min-w-0">
                     <h2 className="text-sm sm:text-base font-semibold text-gray-900 dark:text-white">
-                      New Session
+                      {t('mainContent.newSession')}
                     </h2>
                     <div className="text-xs text-gray-500 dark:text-gray-400 truncate">
                       {selectedProject.displayName}
@@ -340,8 +342,8 @@ function MainContent({
                 ) : (
                   <div className="min-w-0">
                     <h2 className="text-sm sm:text-base font-semibold text-gray-900 dark:text-white">
-                      {activeTab === 'files' ? 'Project Files' :
-                       activeTab === 'git' ? 'Source Control' :
+                      {activeTab === 'files' ? t('mainContent.projectFiles') :
+                       activeTab === 'git' ? t('tabs.git') :
                        (activeTab === 'tasks' && shouldShowTasksTab) ? 'TaskMaster' :
                        'Project'}
                     </h2>
@@ -357,7 +359,7 @@ function MainContent({
           {/* Modern Tab Navigation - Right Side */}
           <div className="flex-shrink-0 hidden sm:block">
             <div className="relative flex bg-gray-100 dark:bg-gray-800 rounded-lg p-1">
-              <Tooltip content="Chat" position="bottom">
+              <Tooltip content={t('tabs.chat')} position="bottom">
                 <button
                   onClick={() => setActiveTab('chat')}
                   className={`relative px-2 sm:px-3 py-1.5 text-xs sm:text-sm font-medium rounded-md ${
@@ -370,11 +372,11 @@ function MainContent({
                     <svg className="w-3 sm:w-3.5 h-3 sm:h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                       <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
                     </svg>
-                    <span className="hidden md:hidden lg:inline">Chat</span>
+                    <span className="hidden md:hidden lg:inline">{t('tabs.chat')}</span>
                   </span>
                 </button>
               </Tooltip>
-              <Tooltip content="Shell" position="bottom">
+              <Tooltip content={t('tabs.shell')} position="bottom">
                 <button
                   onClick={() => setActiveTab('shell')}
                   className={`relative px-2 sm:px-3 py-1.5 text-xs sm:text-sm font-medium rounded-md transition-all duration-200 ${
@@ -387,11 +389,11 @@ function MainContent({
                     <svg className="w-3 sm:w-3.5 h-3 sm:h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                       <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v14a2 2 0 002 2z" />
                     </svg>
-                    <span className="hidden md:hidden lg:inline">Shell</span>
+                    <span className="hidden md:hidden lg:inline">{t('tabs.shell')}</span>
                   </span>
                 </button>
               </Tooltip>
-              <Tooltip content="Files" position="bottom">
+              <Tooltip content={t('tabs.files')} position="bottom">
                 <button
                   onClick={() => setActiveTab('files')}
                   className={`relative px-2 sm:px-3 py-1.5 text-xs sm:text-sm font-medium rounded-md transition-all duration-200 ${
@@ -404,11 +406,11 @@ function MainContent({
                     <svg className="w-3 sm:w-3.5 h-3 sm:h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                       <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-5l-2-2H5a2 2 0 00-2 2z" />
                     </svg>
-                    <span className="hidden md:hidden lg:inline">Files</span>
+                    <span className="hidden md:hidden lg:inline">{t('tabs.files')}</span>
                   </span>
                 </button>
               </Tooltip>
-              <Tooltip content="Source Control" position="bottom">
+              <Tooltip content={t('tabs.git')} position="bottom">
                 <button
                   onClick={() => setActiveTab('git')}
                   className={`relative px-2 sm:px-3 py-1.5 text-xs sm:text-sm font-medium rounded-md transition-all duration-200 ${
@@ -421,12 +423,12 @@ function MainContent({
                     <svg className="w-3 sm:w-3.5 h-3 sm:h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                       <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
                     </svg>
-                    <span className="hidden md:hidden lg:inline">Source Control</span>
+                    <span className="hidden md:hidden lg:inline">{t('tabs.git')}</span>
                   </span>
                 </button>
               </Tooltip>
               {shouldShowTasksTab && (
-                <Tooltip content="Tasks" position="bottom">
+                <Tooltip content={t('tabs.tasks')} position="bottom">
                   <button
                     onClick={() => setActiveTab('tasks')}
                     className={`relative px-2 sm:px-3 py-1.5 text-xs sm:text-sm font-medium rounded-md transition-all duration-200 ${
@@ -439,7 +441,7 @@ function MainContent({
                       <svg className="w-3 sm:w-3.5 h-3 sm:h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                         <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5H7a2 2 0 00-2 2v10a2 2 0 002 2h8a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4" />
                       </svg>
-                      <span className="hidden md:hidden lg:inline">Tasks</span>
+                      <span className="hidden md:hidden lg:inline">{t('tabs.tasks')}</span>
                     </span>
                   </button>
                 </Tooltip>
diff --git a/src/components/ProjectCreationWizard.jsx b/src/components/ProjectCreationWizard.jsx
index 38564dc..bfa0cb1 100644
--- a/src/components/ProjectCreationWizard.jsx
+++ b/src/components/ProjectCreationWizard.jsx
@@ -3,8 +3,10 @@ import { X, FolderPlus, GitBranch, Key, ChevronRight, ChevronLeft, Check, Loader
 import { Button } from './ui/button';
 import { Input } from './ui/input';
 import { api } from '../utils/api';
+import { useTranslation } from 'react-i18next';
 
 const ProjectCreationWizard = ({ onClose, onProjectCreated }) => {
+  const { t } = useTranslation();
   // Wizard state
   const [step, setStep] = useState(1); // 1: Choose type, 2: Configure, 3: Confirm
   const [workspaceType, setWorkspaceType] = useState(null); // 'existing' or 'new'
@@ -88,13 +90,13 @@ const ProjectCreationWizard = ({ onClose, onProjectCreated }) => {
 
     if (step === 1) {
       if (!workspaceType) {
-        setError('Please select whether you have an existing workspace or want to create a new one');
+        setError(t('projectWizard.errors.selectType'));
         return;
       }
       setStep(2);
     } else if (step === 2) {
       if (!workspacePath.trim()) {
-        setError('Please provide a workspace path');
+        setError(t('projectWizard.errors.providePath'));
         return;
       }
 
@@ -133,7 +135,7 @@ const ProjectCreationWizard = ({ onClose, onProjectCreated }) => {
       const data = await response.json();
 
       if (!response.ok) {
-        throw new Error(data.error || 'Failed to create workspace');
+        throw new Error(data.error || t('projectWizard.errors.failedToCreate'));
       }
 
       // Success!
@@ -144,7 +146,7 @@ const ProjectCreationWizard = ({ onClose, onProjectCreated }) => {
       onClose();
     } catch (error) {
       console.error('Error creating workspace:', error);
-      setError(error.message || 'Failed to create workspace');
+      setError(error.message || t('projectWizard.errors.failedToCreate'));
     } finally {
       setIsCreating(false);
     }
@@ -165,7 +167,7 @@ const ProjectCreationWizard = ({ onClose, onProjectCreated }) => {
               <FolderPlus className="w-4 h-4 text-blue-600 dark:text-blue-400" />
             </div>
             <h3 className="text-lg font-semibold text-gray-900 dark:text-white">
-              Create New Project
+              {t('projectWizard.title')}
             </h3>
           </div>
           <button
@@ -195,7 +197,7 @@ const ProjectCreationWizard = ({ onClose, onProjectCreated }) => {
                     {s < step ? <Check className="w-4 h-4" /> : s}
                   </div>
                   <span className="text-sm font-medium text-gray-700 dark:text-gray-300 hidden sm:inline">
-                    {s === 1 ? 'Type' : s === 2 ? 'Configure' : 'Confirm'}
+                    {s === 1 ? t('projectWizard.steps.type') : s === 2 ? t('projectWizard.steps.configure') : t('projectWizard.steps.confirm')}
                   </span>
                 </div>
                 {s < 3 && (
@@ -227,7 +229,7 @@ const ProjectCreationWizard = ({ onClose, onProjectCreated }) => {
             <div className="space-y-4">
               <div>
                 <h4 className="text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">
-                  Do you already have a workspace, or would you like to create a new one?
+                  {t('projectWizard.step1.question')}
                 </h4>
                 <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                   {/* Existing Workspace */}
@@ -245,10 +247,10 @@ const ProjectCreationWizard = ({ onClose, onProjectCreated }) => {
                       </div>
                       <div className="flex-1">
                         <h5 className="font-semibold text-gray-900 dark:text-white mb-1">
-                          Existing Workspace
+                          {t('projectWizard.step1.existing.title')}
                         </h5>
                         <p className="text-sm text-gray-600 dark:text-gray-400">
-                          I already have a workspace on my server and just need to add it to the project list
+                          {t('projectWizard.step1.existing.description')}
                         </p>
                       </div>
                     </div>
@@ -269,10 +271,10 @@ const ProjectCreationWizard = ({ onClose, onProjectCreated }) => {
                       </div>
                       <div className="flex-1">
                         <h5 className="font-semibold text-gray-900 dark:text-white mb-1">
-                          New Workspace
+                          {t('projectWizard.step1.new.title')}
                         </h5>
                         <p className="text-sm text-gray-600 dark:text-gray-400">
-                          Create a new workspace, optionally clone from a GitHub repository
+                          {t('projectWizard.step1.new.description')}
                         </p>
                       </div>
                     </div>
@@ -288,14 +290,14 @@ const ProjectCreationWizard = ({ onClose, onProjectCreated }) => {
               {/* Workspace Path */}
               <div>
                 <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-                  {workspaceType === 'existing' ? 'Workspace Path' : 'Where should the workspace be created?'}
+                  {workspaceType === 'existing' ? t('projectWizard.step2.existingPath') : t('projectWizard.step2.newPath')}
                 </label>
                 <div className="relative">
                   <Input
                     type="text"
                     value={workspacePath}
                     onChange={(e) => setWorkspacePath(e.target.value)}
-                    placeholder={workspaceType === 'existing' ? '/path/to/existing/workspace' : '/path/to/new/workspace'}
+                    placeholder={workspaceType === 'existing' ? t('projectWizard.step2.existingPlaceholder') : t('projectWizard.step2.newPlaceholder')}
                     className="w-full"
                   />
                   {showPathDropdown && pathSuggestions.length > 0 && (
@@ -315,8 +317,8 @@ const ProjectCreationWizard = ({ onClose, onProjectCreated }) => {
                 </div>
                 <p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
                   {workspaceType === 'existing'
-                    ? 'Full path to your existing workspace directory'
-                    : 'Full path where the new workspace will be created'}
+                    ? t('projectWizard.step2.existingHelp')
+                    : t('projectWizard.step2.newHelp')}
                 </p>
               </div>
 
@@ -325,17 +327,17 @@ const ProjectCreationWizard = ({ onClose, onProjectCreated }) => {
                 <>
                   <div>
                     <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-                      GitHub URL (Optional)
+                      {t('projectWizard.step2.githubUrl')}
                     </label>
                     <Input
                       type="text"
                       value={githubUrl}
                       onChange={(e) => setGithubUrl(e.target.value)}
-                      placeholder="https://github.com/username/repository"
+                      placeholder={t('projectWizard.step2.githubPlaceholder')}
                       className="w-full"
                     />
                     <p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
-                      Leave empty to create an empty workspace, or provide a GitHub URL to clone
+                      {t('projectWizard.step2.githubHelp')}
                     </p>
                   </div>
 
@@ -346,10 +348,10 @@ const ProjectCreationWizard = ({ onClose, onProjectCreated }) => {
                         <Key className="w-5 h-5 text-gray-600 dark:text-gray-400 flex-shrink-0 mt-0.5" />
                         <div className="flex-1">
                           <h5 className="font-medium text-gray-900 dark:text-white mb-1">
-                            GitHub Authentication (Optional)
+                            {t('projectWizard.step2.githubAuth')}
                           </h5>
                           <p className="text-sm text-gray-600 dark:text-gray-400">
-                            Only required for private repositories. Public repos can be cloned without authentication.
+                            {t('projectWizard.step2.githubAuthHelp')}
                           </p>
                         </div>
                       </div>
@@ -357,7 +359,7 @@ const ProjectCreationWizard = ({ onClose, onProjectCreated }) => {
                       {loadingTokens ? (
                         <div className="flex items-center gap-2 text-sm text-gray-500">
                           <Loader2 className="w-4 h-4 animate-spin" />
-                          Loading stored tokens...
+                          {t('projectWizard.step2.loadingTokens')}
                         </div>
                       ) : availableTokens.length > 0 ? (
                         <>
@@ -371,7 +373,7 @@ const ProjectCreationWizard = ({ onClose, onProjectCreated }) => {
                                   : 'bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300'
                               }`}
                             >
-                              Stored Token
+                              {t('projectWizard.step2.storedToken')}
                             </button>
                             <button
                               onClick={() => setTokenMode('new')}
@@ -381,7 +383,7 @@ const ProjectCreationWizard = ({ onClose, onProjectCreated }) => {
                                   : 'bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300'
                               }`}
                             >
-                              New Token
+                              {t('projectWizard.step2.newToken')}
                             </button>
                             <button
                               onClick={() => {
@@ -395,21 +397,21 @@ const ProjectCreationWizard = ({ onClose, onProjectCreated }) => {
                                   : 'bg-gray-200 dark:bg-gray-700 text-gray-700 dark:text-gray-300'
                               }`}
                             >
-                              None (Public)
+                              {t('projectWizard.step2.nonePublic')}
                             </button>
                           </div>
 
                           {tokenMode === 'stored' ? (
                             <div>
                               <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-                                Select Token
+                                {t('projectWizard.step2.selectToken')}
                               </label>
                               <select
                                 value={selectedGithubToken}
                                 onChange={(e) => setSelectedGithubToken(e.target.value)}
                                 className="w-full px-3 py-2 bg-white dark:bg-gray-800 border border-gray-300 dark:border-gray-600 rounded-lg text-sm"
                               >
-                                <option value="">-- Select a token --</option>
+                                <option value="">{t('projectWizard.step2.selectTokenPlaceholder')}</option>
                                 {availableTokens.map((token) => (
                                   <option key={token.id} value={token.id}>
                                     {token.credential_name}
@@ -420,17 +422,17 @@ const ProjectCreationWizard = ({ onClose, onProjectCreated }) => {
                           ) : tokenMode === 'new' ? (
                             <div>
                               <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-                                GitHub Token
+                                {t('projectWizard.step2.newToken')}
                               </label>
                               <Input
                                 type="password"
                                 value={newGithubToken}
                                 onChange={(e) => setNewGithubToken(e.target.value)}
-                                placeholder="ghp_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
+                                placeholder={t('projectWizard.step2.tokenPlaceholder')}
                                 className="w-full"
                               />
                               <p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
-                                This token will be used only for this operation
+                                {t('projectWizard.step2.tokenHelp')}
                               </p>
                             </div>
                           ) : null}
@@ -439,23 +441,23 @@ const ProjectCreationWizard = ({ onClose, onProjectCreated }) => {
                         <div className="space-y-4">
                           <div className="bg-blue-50 dark:bg-blue-900/20 rounded-lg p-3 border border-blue-200 dark:border-blue-800">
                             <p className="text-sm text-blue-800 dark:text-blue-200">
-                              💡 <strong>Public repositories</strong> don't require authentication. You can skip providing a token if cloning a public repo.
+                              {t('projectWizard.step2.publicRepoInfo')}
                             </p>
                           </div>
 
                           <div>
                             <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-                              GitHub Token (Optional for Public Repos)
+                              {t('projectWizard.step2.optionalTokenPublic')}
                             </label>
                             <Input
                               type="password"
                               value={newGithubToken}
                               onChange={(e) => setNewGithubToken(e.target.value)}
-                              placeholder="ghp_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx (leave empty for public repos)"
+                              placeholder={t('projectWizard.step2.tokenPublicPlaceholder')}
                               className="w-full"
                             />
                             <p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
-                              No stored tokens available. You can add tokens in Settings → API Keys for easier reuse.
+                              {t('projectWizard.step2.noTokensHelp')}
                             </p>
                           </div>
                         </div>
@@ -472,17 +474,17 @@ const ProjectCreationWizard = ({ onClose, onProjectCreated }) => {
             <div className="space-y-4">
               <div className="bg-gray-50 dark:bg-gray-900/50 rounded-lg p-4 border border-gray-200 dark:border-gray-700">
                 <h4 className="text-sm font-semibold text-gray-900 dark:text-white mb-3">
-                  Review Your Configuration
+                  {t('projectWizard.step3.reviewConfig')}
                 </h4>
                 <div className="space-y-2">
                   <div className="flex justify-between text-sm">
-                    <span className="text-gray-600 dark:text-gray-400">Workspace Type:</span>
+                    <span className="text-gray-600 dark:text-gray-400">{t('projectWizard.step3.workspaceType')}</span>
                     <span className="font-medium text-gray-900 dark:text-white">
-                      {workspaceType === 'existing' ? 'Existing Workspace' : 'New Workspace'}
+                      {workspaceType === 'existing' ? t('projectWizard.step3.existingWorkspace') : t('projectWizard.step3.newWorkspace')}
                     </span>
                   </div>
                   <div className="flex justify-between text-sm">
-                    <span className="text-gray-600 dark:text-gray-400">Path:</span>
+                    <span className="text-gray-600 dark:text-gray-400">{t('projectWizard.step3.path')}</span>
                     <span className="font-mono text-xs text-gray-900 dark:text-white break-all">
                       {workspacePath}
                     </span>
@@ -490,19 +492,19 @@ const ProjectCreationWizard = ({ onClose, onProjectCreated }) => {
                   {workspaceType === 'new' && githubUrl && (
                     <>
                       <div className="flex justify-between text-sm">
-                        <span className="text-gray-600 dark:text-gray-400">Clone From:</span>
+                        <span className="text-gray-600 dark:text-gray-400">{t('projectWizard.step3.cloneFrom')}</span>
                         <span className="font-mono text-xs text-gray-900 dark:text-white break-all">
                           {githubUrl}
                         </span>
                       </div>
                       <div className="flex justify-between text-sm">
-                        <span className="text-gray-600 dark:text-gray-400">Authentication:</span>
+                        <span className="text-gray-600 dark:text-gray-400">{t('projectWizard.step3.authentication')}</span>
                         <span className="text-xs text-gray-900 dark:text-white">
                           {tokenMode === 'stored' && selectedGithubToken
-                            ? `Using stored token: ${availableTokens.find(t => t.id.toString() === selectedGithubToken)?.credential_name || 'Unknown'}`
+                            ? `${t('projectWizard.step3.usingStoredToken')} ${availableTokens.find(t => t.id.toString() === selectedGithubToken)?.credential_name || 'Unknown'}`
                             : tokenMode === 'new' && newGithubToken
-                            ? 'Using provided token'
-                            : 'No authentication'}
+                            ? t('projectWizard.step3.usingProvidedToken')
+                            : t('projectWizard.step3.noAuthentication')}
                         </span>
                       </div>
                     </>
@@ -513,10 +515,10 @@ const ProjectCreationWizard = ({ onClose, onProjectCreated }) => {
               <div className="bg-blue-50 dark:bg-blue-900/20 rounded-lg p-4 border border-blue-200 dark:border-blue-800">
                 <p className="text-sm text-blue-800 dark:text-blue-200">
                   {workspaceType === 'existing'
-                    ? 'The workspace will be added to your project list and will be available for Claude/Cursor sessions.'
+                    ? t('projectWizard.step3.existingInfo')
                     : githubUrl
-                    ? 'A new workspace will be created and the repository will be cloned from GitHub.'
-                    : 'An empty workspace directory will be created at the specified path.'}
+                    ? t('projectWizard.step3.newWithClone')
+                    : t('projectWizard.step3.newEmpty')}
                 </p>
               </div>
             </div>
@@ -531,11 +533,11 @@ const ProjectCreationWizard = ({ onClose, onProjectCreated }) => {
             disabled={isCreating}
           >
             {step === 1 ? (
-              'Cancel'
+              t('projectWizard.buttons.cancel')
             ) : (
               <>
                 <ChevronLeft className="w-4 h-4 mr-1" />
-                Back
+                {t('projectWizard.buttons.back')}
               </>
             )}
           </Button>
@@ -547,16 +549,16 @@ const ProjectCreationWizard = ({ onClose, onProjectCreated }) => {
             {isCreating ? (
               <>
                 <Loader2 className="w-4 h-4 mr-2 animate-spin" />
-                Creating...
+                {t('projectWizard.buttons.creating')}
               </>
             ) : step === 3 ? (
               <>
                 <Check className="w-4 h-4 mr-1" />
-                Create Project
+                {t('projectWizard.buttons.createProject')}
               </>
             ) : (
               <>
-                Next
+                {t('projectWizard.buttons.next')}
                 <ChevronRight className="w-4 h-4 ml-1" />
               </>
             )}
diff --git a/src/components/QuickSettingsPanel.jsx b/src/components/QuickSettingsPanel.jsx
index 75f8f24..93b7d07 100644
--- a/src/components/QuickSettingsPanel.jsx
+++ b/src/components/QuickSettingsPanel.jsx
@@ -15,8 +15,10 @@ import {
   Languages,
   GripVertical
 } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
 import DarkModeToggle from './DarkModeToggle';
 import { useTheme } from '../contexts/ThemeContext';
+import LanguageSelector from './LanguageSelector';
 
 const QuickSettingsPanel = ({
   isOpen,
@@ -33,6 +35,7 @@ const QuickSettingsPanel = ({
   onSendByCtrlEnterChange,
   isMobile
 }) => {
+  const { t } = useTranslation('settings');
   const [localIsOpen, setLocalIsOpen] = useState(isOpen);
   const [whisperMode, setWhisperMode] = useState(() => {
     return localStorage.getItem('whisperMode') || 'default';
@@ -253,7 +256,7 @@ const QuickSettingsPanel = ({
           <div className="p-4 border-b border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900">
             <h3 className="text-lg font-semibold text-gray-900 dark:text-white flex items-center gap-2">
               <Settings2 className="h-5 w-5 text-gray-600 dark:text-gray-400" />
-              Quick Settings
+              {t('quickSettings.title')}
             </h3>
           </div>
 
@@ -261,25 +264,30 @@ const QuickSettingsPanel = ({
           <div className={`flex-1 overflow-y-auto overflow-x-hidden p-4 space-y-6 bg-background ${isMobile ? 'pb-mobile-nav' : ''}`}>
             {/* Appearance Settings */}
             <div className="space-y-2">
-              <h4 className="text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400 mb-2">Appearance</h4>
-              
+              <h4 className="text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400 mb-2">{t('quickSettings.sections.appearance')}</h4>
+
               <div className="flex items-center justify-between p-3 rounded-lg bg-gray-50 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors border border-transparent hover:border-gray-300 dark:hover:border-gray-600">
                 <span className="flex items-center gap-2 text-sm text-gray-900 dark:text-white">
                   {isDarkMode ? <Moon className="h-4 w-4 text-gray-600 dark:text-gray-400" /> : <Sun className="h-4 w-4 text-gray-600 dark:text-gray-400" />}
-                  Dark Mode
+                  {t('quickSettings.darkMode')}
                 </span>
                 <DarkModeToggle />
               </div>
+
+              {/* Language Selector */}
+              <div>
+                <LanguageSelector compact={true} />
+              </div>
             </div>
 
             {/* Tool Display Settings */}
             <div className="space-y-2">
-              <h4 className="text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400 mb-2">Tool Display</h4>
-              
+              <h4 className="text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400 mb-2">{t('quickSettings.sections.toolDisplay')}</h4>
+
               <label className="flex items-center justify-between p-3 rounded-lg bg-gray-50 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer transition-colors border border-transparent hover:border-gray-300 dark:hover:border-gray-600">
                 <span className="flex items-center gap-2 text-sm text-gray-900 dark:text-white">
                   <Maximize2 className="h-4 w-4 text-gray-600 dark:text-gray-400" />
-                  Auto-expand tools
+                  {t('quickSettings.autoExpandTools')}
                 </span>
                 <input
                   type="checkbox"
@@ -292,7 +300,7 @@ const QuickSettingsPanel = ({
               <label className="flex items-center justify-between p-3 rounded-lg bg-gray-50 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer transition-colors border border-transparent hover:border-gray-300 dark:hover:border-gray-600">
                 <span className="flex items-center gap-2 text-sm text-gray-900 dark:text-white">
                   <Eye className="h-4 w-4 text-gray-600 dark:text-gray-400" />
-                  Show raw parameters
+                  {t('quickSettings.showRawParameters')}
                 </span>
                 <input
                   type="checkbox"
@@ -305,7 +313,7 @@ const QuickSettingsPanel = ({
               <label className="flex items-center justify-between p-3 rounded-lg bg-gray-50 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer transition-colors border border-transparent hover:border-gray-300 dark:hover:border-gray-600">
                 <span className="flex items-center gap-2 text-sm text-gray-900 dark:text-white">
                   <Brain className="h-4 w-4 text-gray-600 dark:text-gray-400" />
-                  Show thinking
+                  {t('quickSettings.showThinking')}
                 </span>
                 <input
                   type="checkbox"
@@ -317,12 +325,12 @@ const QuickSettingsPanel = ({
             </div>
             {/* View Options */}
             <div className="space-y-2">
-              <h4 className="text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400 mb-2">View Options</h4>
-              
+              <h4 className="text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400 mb-2">{t('quickSettings.sections.viewOptions')}</h4>
+
               <label className="flex items-center justify-between p-3 rounded-lg bg-gray-50 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer transition-colors border border-transparent hover:border-gray-300 dark:hover:border-gray-600">
                 <span className="flex items-center gap-2 text-sm text-gray-900 dark:text-white">
                   <ArrowDown className="h-4 w-4 text-gray-600 dark:text-gray-400" />
-                  Auto-scroll to bottom
+                  {t('quickSettings.autoScrollToBottom')}
                 </span>
                 <input
                   type="checkbox"
@@ -335,12 +343,12 @@ const QuickSettingsPanel = ({
 
             {/* Input Settings */}
             <div className="space-y-2">
-              <h4 className="text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400 mb-2">Input Settings</h4>
-              
+              <h4 className="text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400 mb-2">{t('quickSettings.sections.inputSettings')}</h4>
+
               <label className="flex items-center justify-between p-3 rounded-lg bg-gray-50 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer transition-colors border border-transparent hover:border-gray-300 dark:hover:border-gray-600">
                 <span className="flex items-center gap-2 text-sm text-gray-900 dark:text-white">
                   <Languages className="h-4 w-4 text-gray-600 dark:text-gray-400" />
-                  Send by Ctrl+Enter
+                  {t('quickSettings.sendByCtrlEnter')}
                 </span>
                 <input
                   type="checkbox"
@@ -350,13 +358,13 @@ const QuickSettingsPanel = ({
                 />
               </label>
               <p className="text-xs text-gray-500 dark:text-gray-400 ml-3">
-                When enabled, pressing Ctrl+Enter will send the message instead of just Enter. This is useful for IME users to avoid accidental sends.
+                {t('quickSettings.sendByCtrlEnterDescription')}
               </p>
             </div>
 
             {/* Whisper Dictation Settings - HIDDEN */}
             <div className="space-y-2" style={{ display: 'none' }}>
-              <h4 className="text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400 mb-2">Whisper Dictation</h4>
+              <h4 className="text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400 mb-2">{t('quickSettings.sections.whisperDictation')}</h4>
               
               <div className="space-y-2">
                 <label className="flex items-start p-3 rounded-lg bg-gray-50 dark:bg-gray-800 hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer transition-colors border border-transparent hover:border-gray-300 dark:hover:border-gray-600">
diff --git a/src/components/Settings.jsx b/src/components/Settings.jsx
index a19abbe..cc8809f 100644
--- a/src/components/Settings.jsx
+++ b/src/components/Settings.jsx
@@ -4,6 +4,7 @@ import { Input } from './ui/input';
 import { Badge } from './ui/badge';
 import { X, Plus, Settings as SettingsIcon, Shield, AlertTriangle, Moon, Sun, Server, Edit3, Trash2, Globe, Terminal, Zap, FolderOpen, LogIn, Key, GitBranch, Check } from 'lucide-react';
 import { useTheme } from '../contexts/ThemeContext';
+import { useTranslation } from 'react-i18next';
 import ClaudeLogo from './ClaudeLogo';
 import CursorLogo from './CursorLogo';
 import CodexLogo from './CodexLogo';
@@ -18,9 +19,11 @@ import AgentListItem from './settings/AgentListItem';
 import AccountContent from './settings/AccountContent';
 import PermissionsContent from './settings/PermissionsContent';
 import McpServersContent from './settings/McpServersContent';
+import LanguageSelector from './LanguageSelector';
 
 function Settings({ isOpen, onClose, projects = [], initialTab = 'agents' }) {
   const { isDarkMode, toggleDarkMode } = useTheme();
+  const { t } = useTranslation('settings');
   const [allowedTools, setAllowedTools] = useState([]);
   const [disallowedTools, setDisallowedTools] = useState([]);
   const [newAllowedTool, setNewAllowedTool] = useState('');
@@ -1062,6 +1065,11 @@ function Settings({ isOpen, onClose, projects = [], initialTab = 'agents' }) {
       </div>
     </div>
 
+    {/* Language Selector */}
+    <div className="space-y-4">
+      <LanguageSelector />
+    </div>
+
     {/* Project Sorting */}
     <div className="space-y-4">
       <div className="bg-gray-50 dark:bg-gray-900/50 border border-gray-200 dark:border-gray-700 rounded-lg p-4">
@@ -1313,7 +1321,7 @@ function Settings({ isOpen, onClose, projects = [], initialTab = 'agents' }) {
                             : 'border-transparent text-muted-foreground hover:text-foreground'
                         }`}
                       >
-                        Account
+                        {t('tabs.account')}
                       </button>
                       <button
                         onClick={() => setSelectedCategory('permissions')}
@@ -1323,7 +1331,7 @@ function Settings({ isOpen, onClose, projects = [], initialTab = 'agents' }) {
                             : 'border-transparent text-muted-foreground hover:text-foreground'
                         }`}
                       >
-                        Permissions
+                        {t('tabs.permissions')}
                       </button>
                       <button
                         onClick={() => setSelectedCategory('mcp')}
@@ -1333,7 +1341,7 @@ function Settings({ isOpen, onClose, projects = [], initialTab = 'agents' }) {
                             : 'border-transparent text-muted-foreground hover:text-foreground'
                         }`}
                       >
-                        MCP Servers
+                        {t('tabs.mcpServers')}
                       </button>
                     </div>
                   </div>
diff --git a/src/components/Sidebar.jsx b/src/components/Sidebar.jsx
index b06f56e..55f5ba5 100644
--- a/src/components/Sidebar.jsx
+++ b/src/components/Sidebar.jsx
@@ -4,6 +4,7 @@ import { ScrollArea } from './ui/scroll-area';
 import { Button } from './ui/button';
 import { Badge } from './ui/badge';
 import { Input } from './ui/input';
+import { useTranslation } from 'react-i18next';
 
 import { FolderOpen, Folder, Plus, MessageSquare, Clock, ChevronDown, ChevronRight, Edit3, Check, X, Trash2, Settings, FolderPlus, RefreshCw, Sparkles, Edit2, Star, Search } from 'lucide-react';
 import { cn } from '../lib/utils';
@@ -17,28 +18,28 @@ import { useTaskMaster } from '../contexts/TaskMasterContext';
 import { useTasksSettings } from '../contexts/TasksSettingsContext';
 
 // Move formatTimeAgo outside component to avoid recreation on every render
-const formatTimeAgo = (dateString, currentTime) => {
+const formatTimeAgo = (dateString, currentTime, t) => {
   const date = new Date(dateString);
   const now = currentTime;
-  
+
   // Check if date is valid
   if (isNaN(date.getTime())) {
-    return 'Unknown';
+    return t ? t('status.unknown') : 'Unknown';
   }
-  
+
   const diffInMs = now - date;
   const diffInSeconds = Math.floor(diffInMs / 1000);
   const diffInMinutes = Math.floor(diffInMs / (1000 * 60));
   const diffInHours = Math.floor(diffInMs / (1000 * 60 * 60));
   const diffInDays = Math.floor(diffInMs / (1000 * 60 * 60 * 24));
-  
-  if (diffInSeconds < 60) return 'Just now';
-  if (diffInMinutes === 1) return '1 min ago';
-  if (diffInMinutes < 60) return `${diffInMinutes} mins ago`;
-  if (diffInHours === 1) return '1 hour ago';
-  if (diffInHours < 24) return `${diffInHours} hours ago`;
-  if (diffInDays === 1) return '1 day ago';
-  if (diffInDays < 7) return `${diffInDays} days ago`;
+
+  if (diffInSeconds < 60) return t ? t('time.justNow') : 'Just now';
+  if (diffInMinutes === 1) return t ? t('time.oneMinuteAgo') : '1 min ago';
+  if (diffInMinutes < 60) return t ? t('time.minutesAgo', { count: diffInMinutes }) : `${diffInMinutes} mins ago`;
+  if (diffInHours === 1) return t ? t('time.oneHourAgo') : '1 hour ago';
+  if (diffInHours < 24) return t ? t('time.hoursAgo', { count: diffInHours }) : `${diffInHours} hours ago`;
+  if (diffInDays === 1) return t ? t('time.oneDayAgo') : '1 day ago';
+  if (diffInDays < 7) return t ? t('time.daysAgo', { count: diffInDays }) : `${diffInDays} days ago`;
   return date.toLocaleDateString();
 };
 
@@ -63,6 +64,7 @@ function Sidebar({
   isMobile,
   onToggleSidebar
 }) {
+  const { t } = useTranslation('sidebar');
   const [expandedProjects, setExpandedProjects] = useState(new Set());
   const [editingProject, setEditingProject] = useState(null);
   const [showNewProject, setShowNewProject] = useState(false);
@@ -304,7 +306,7 @@ function Sidebar({
   };
 
   const deleteSession = async (projectName, sessionId, provider = 'claude') => {
-    if (!confirm('Are you sure you want to delete this session? This action cannot be undone.')) {
+    if (!confirm(t('messages.deleteSessionConfirm'))) {
       return;
     }
 
@@ -332,16 +334,16 @@ function Sidebar({
       } else {
         const errorText = await response.text();
         console.error('[Sidebar] Failed to delete session:', { status: response.status, error: errorText });
-        alert('Failed to delete session. Please try again.');
+        alert(t('messages.deleteSessionFailed'));
       }
     } catch (error) {
       console.error('[Sidebar] Error deleting session:', error);
-      alert('Error deleting session. Please try again.');
+      alert(t('messages.deleteSessionError'));
     }
   };
 
   const deleteProject = async (projectName) => {
-    if (!confirm('Are you sure you want to delete this empty project? This action cannot be undone.')) {
+    if (!confirm(t('messages.deleteProjectConfirm'))) {
       return;
     }
 
@@ -356,34 +358,34 @@ function Sidebar({
       } else {
         const error = await response.json();
         console.error('Failed to delete project');
-        alert(error.error || 'Failed to delete project. Please try again.');
+        alert(error.error || t('messages.deleteProjectFailed'));
       }
     } catch (error) {
       console.error('Error deleting project:', error);
-      alert('Error deleting project. Please try again.');
+      alert(t('messages.deleteProjectError'));
     }
   };
 
   const createNewProject = async () => {
     if (!newProjectPath.trim()) {
-      alert('Please enter a project path');
+      alert(t('messages.enterProjectPath'));
       return;
     }
 
     setCreatingProject(true);
-    
+
     try {
       const response = await api.createProject(newProjectPath.trim());
 
       if (response.ok) {
         const result = await response.json();
-        
+
         // Save the path to recent paths before clearing
         saveToRecentPaths(newProjectPath.trim());
-        
+
         setShowNewProject(false);
         setNewProjectPath('');
-        
+
         // Refresh projects to show the new one
         if (window.refreshProjects) {
           window.refreshProjects();
@@ -392,11 +394,11 @@ function Sidebar({
         }
       } else {
         const error = await response.json();
-        alert(error.error || 'Failed to create project. Please try again.');
+        alert(error.error || t('messages.createProjectFailed'));
       }
     } catch (error) {
       console.error('Error creating project:', error);
-      alert('Error creating project. Please try again.');
+      alert(t('messages.createProjectError'));
     } finally {
       setCreatingProject(false);
     }
@@ -497,14 +499,14 @@ function Sidebar({
             <a
               href="https://cloudcli.ai/dashboard"
               className="flex items-center gap-3 hover:opacity-80 transition-opacity group"
-              title="View Environments"
+              title={t('tooltips.viewEnvironments')}
             >
               <div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center shadow-sm group-hover:shadow-md transition-shadow">
                 <MessageSquare className="w-4 h-4 text-primary-foreground" />
               </div>
               <div>
-                <h1 className="text-lg font-bold text-foreground">Claude Code UI</h1>
-                <p className="text-sm text-muted-foreground">AI coding assistant interface</p>
+                <h1 className="text-lg font-bold text-foreground">{t('app.title')}</h1>
+                <p className="text-sm text-muted-foreground">{t('app.subtitle')}</p>
               </div>
             </a>
           ) : (
@@ -513,8 +515,8 @@ function Sidebar({
                 <MessageSquare className="w-4 h-4 text-primary-foreground" />
               </div>
               <div>
-                <h1 className="text-lg font-bold text-foreground">Claude Code UI</h1>
-                <p className="text-sm text-muted-foreground">AI coding assistant interface</p>
+                <h1 className="text-lg font-bold text-foreground">{t('app.title')}</h1>
+                <p className="text-sm text-muted-foreground">{t('app.subtitle')}</p>
               </div>
             </div>
           )}
@@ -524,7 +526,7 @@ function Sidebar({
               size="sm"
               className="h-8 w-8 px-0 hover:bg-accent transition-colors duration-200"
               onClick={onToggleSidebar}
-              title="Hide sidebar"
+              title={t('tooltips.hideSidebar')}
             >
               <svg
                 className="w-4 h-4"
@@ -548,14 +550,14 @@ function Sidebar({
               <a
                 href="https://cloudcli.ai/dashboard"
                 className="flex items-center gap-3 active:opacity-70 transition-opacity"
-                title="View Environments"
+                title={t('tooltips.viewEnvironments')}
               >
                 <div className="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
                   <MessageSquare className="w-4 h-4 text-primary-foreground" />
                 </div>
                 <div>
-                  <h1 className="text-lg font-semibold text-foreground">Claude Code UI</h1>
-                  <p className="text-sm text-muted-foreground">Projects</p>
+                  <h1 className="text-lg font-semibold text-foreground">{t('app.title')}</h1>
+                  <p className="text-sm text-muted-foreground">{t('projects.title')}</p>
                 </div>
               </a>
             ) : (
@@ -564,8 +566,8 @@ function Sidebar({
                   <MessageSquare className="w-4 h-4 text-primary-foreground" />
                 </div>
                 <div>
-                  <h1 className="text-lg font-semibold text-foreground">Claude Code UI</h1>
-                  <p className="text-sm text-muted-foreground">Projects</p>
+                  <h1 className="text-lg font-semibold text-foreground">{t('app.title')}</h1>
+                  <p className="text-sm text-muted-foreground">{t('projects.title')}</p>
                 </div>
               </div>
             )}
@@ -604,10 +606,10 @@ function Sidebar({
               size="sm"
               className="flex-1 h-8 text-xs bg-primary hover:bg-primary/90 transition-all duration-200"
               onClick={() => setShowNewProject(true)}
-              title="Create new project"
+              title={t('tooltips.createProject')}
             >
               <FolderPlus className="w-3.5 h-3.5 mr-1.5" />
-              New Project
+              {t('projects.newProject')}
             </Button>
             <Button
               variant="outline"
@@ -622,7 +624,7 @@ function Sidebar({
                 }
               }}
               disabled={isRefreshing}
-              title="Refresh projects and sessions (Ctrl+R)"
+              title={t('tooltips.refresh')}
             >
               <RefreshCw className={`w-3.5 h-3.5 ${isRefreshing ? 'animate-spin' : ''} group-hover:rotate-180 transition-transform duration-300`} />
             </Button>
@@ -637,7 +639,7 @@ function Sidebar({
             <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 w-4 h-4 text-muted-foreground" />
             <Input
               type="text"
-              placeholder="Search projects..."
+              placeholder={t('projects.searchPlaceholder')}
               value={searchFilter}
               onChange={(e) => setSearchFilter(e.target.value)}
               className="pl-9 h-9 text-sm bg-muted/50 border-0 focus:bg-background focus:ring-1 focus:ring-primary/20"
@@ -662,9 +664,9 @@ function Sidebar({
               <div className="w-12 h-12 bg-muted rounded-lg flex items-center justify-center mx-auto mb-4 md:mb-3">
                 <div className="w-6 h-6 animate-spin rounded-full border-2 border-muted-foreground border-t-transparent" />
               </div>
-              <h3 className="text-base font-medium text-foreground mb-2 md:mb-1">Loading projects...</h3>
+              <h3 className="text-base font-medium text-foreground mb-2 md:mb-1">{t('projects.loadingProjects')}</h3>
               <p className="text-sm text-muted-foreground">
-                Fetching your Claude projects and sessions
+                {t('projects.fetchingProjects')}
               </p>
             </div>
           ) : projects.length === 0 ? (
@@ -672,9 +674,9 @@ function Sidebar({
               <div className="w-12 h-12 bg-muted rounded-lg flex items-center justify-center mx-auto mb-4 md:mb-3">
                 <Folder className="w-6 h-6 text-muted-foreground" />
               </div>
-              <h3 className="text-base font-medium text-foreground mb-2 md:mb-1">No projects found</h3>
+              <h3 className="text-base font-medium text-foreground mb-2 md:mb-1">{t('projects.noProjects')}</h3>
               <p className="text-sm text-muted-foreground">
-                Run Claude CLI in a project directory to get started
+                {t('projects.runClaudeCli')}
               </p>
             </div>
           ) : filteredProjects.length === 0 ? (
@@ -682,9 +684,9 @@ function Sidebar({
               <div className="w-12 h-12 bg-muted rounded-lg flex items-center justify-center mx-auto mb-4 md:mb-3">
                 <Search className="w-6 h-6 text-muted-foreground" />
               </div>
-              <h3 className="text-base font-medium text-foreground mb-2 md:mb-1">No matching projects</h3>
+              <h3 className="text-base font-medium text-foreground mb-2 md:mb-1">{t('projects.noMatchingProjects')}</h3>
               <p className="text-sm text-muted-foreground">
-                Try adjusting your search term
+                {t('projects.tryDifferentSearch')}
               </p>
             </div>
           ) : (
@@ -730,7 +732,7 @@ function Sidebar({
                                   value={editingName}
                                   onChange={(e) => setEditingName(e.target.value)}
                                   className="w-full px-3 py-2 text-sm border-2 border-primary/40 focus:border-primary rounded-lg bg-background text-foreground shadow-sm focus:shadow-md transition-all duration-200 focus:outline-none"
-                                  placeholder="Project name"
+                                  placeholder={t('projects.projectNamePlaceholder')}
                                   autoFocus
                                   autoComplete="off"
                                   onClick={(e) => e.stopPropagation()}
@@ -814,7 +816,7 @@ function Sidebar({
                                     toggleStarProject(project.name);
                                   }}
                                   onTouchEnd={handleTouchClick(() => toggleStarProject(project.name))}
-                                  title={isStarred ? "Remove from favorites" : "Add to favorites"}
+                                  title={isStarred ? t('tooltips.removeFromFavorites') : t('tooltips.addToFavorites')}
                                 >
                                   <Star className={cn(
                                     "w-4 h-4 transition-colors",
@@ -895,7 +897,7 @@ function Sidebar({
                                 value={editingName}
                                 onChange={(e) => setEditingName(e.target.value)}
                                 className="w-full px-2 py-1 text-sm border border-border rounded bg-background text-foreground focus:ring-2 focus:ring-primary/20"
-                                placeholder="Project name"
+                                placeholder={t('projects.projectNamePlaceholder')}
                                 autoFocus
                                 onKeyDown={(e) => {
                                   if (e.key === 'Enter') saveProjectName(project.name);
@@ -964,7 +966,7 @@ function Sidebar({
                                 e.stopPropagation();
                                 toggleStarProject(project.name);
                               }}
-                              title={isStarred ? "Remove from favorites" : "Add to favorites"}
+                              title={isStarred ? t('tooltips.removeFromFavorites') : t('tooltips.addToFavorites')}
                             >
                               <Star className={cn(
                                 "w-3 h-3 transition-colors",
@@ -979,7 +981,7 @@ function Sidebar({
                                 e.stopPropagation();
                                 startEditing(project);
                               }}
-                              title="Rename project (F2)"
+                              title={t('tooltips.renameProject')}
                             >
                               <Edit3 className="w-3 h-3" />
                             </div>
@@ -990,7 +992,7 @@ function Sidebar({
                                   e.stopPropagation();
                                   deleteProject(project.name);
                                 }}
-                                title="Delete empty project (Delete)"
+                                title={t('tooltips.deleteProject')}
                               >
                                 <Trash2 className="w-3 h-3 text-red-600 dark:text-red-400" />
                               </div>
@@ -1024,7 +1026,7 @@ function Sidebar({
                         ))
                       ) : getAllSessions(project).length === 0 && !loadingSessions[project.name] ? (
                         <div className="py-2 px-3 text-left">
-                          <p className="text-xs text-muted-foreground">No sessions yet</p>
+                          <p className="text-xs text-muted-foreground">{t('sessions.noSessions')}</p>
                         </div>
                       ) : (
                         getAllSessions(project).map((session) => {
@@ -1044,9 +1046,9 @@ function Sidebar({
 
                           // Get session display values
                           const getSessionName = () => {
-                            if (isCursorSession) return session.name || 'Untitled Session';
-                            if (isCodexSession) return session.summary || session.name || 'Codex Session';
-                            return session.summary || 'New Session';
+                            if (isCursorSession) return session.name || t('projects.untitledSession');
+                            if (isCodexSession) return session.summary || session.name || t('projects.codexSession');
+                            return session.summary || t('projects.newSession');
                           };
                           const sessionName = getSessionName();
                           const getSessionTime = () => {
@@ -1102,7 +1104,7 @@ function Sidebar({
                                 <div className="flex items-center gap-1 mt-0.5">
                                       <Clock className="w-2.5 h-2.5 text-muted-foreground" />
                                       <span className="text-xs text-muted-foreground">
-                                        {formatTimeAgo(sessionTime, currentTime)}
+                                        {formatTimeAgo(sessionTime, currentTime, t)}
                                       </span>
                                       {messageCount > 0 && (
                                         <Badge variant="secondary" className="text-xs px-1 py-0 ml-auto">
@@ -1163,7 +1165,7 @@ function Sidebar({
                                     <div className="flex items-center gap-1 mt-0.5">
                                       <Clock className="w-2.5 h-2.5 text-muted-foreground" />
                                       <span className="text-xs text-muted-foreground">
-                                        {formatTimeAgo(sessionTime, currentTime)}
+                                        {formatTimeAgo(sessionTime, currentTime, t)}
                                       </span>
                                       {messageCount > 0 && (
                                         <Badge variant="secondary" className="text-xs px-1 py-0 ml-auto">
@@ -1210,7 +1212,7 @@ function Sidebar({
                                         e.stopPropagation();
                                         updateSessionSummary(project.name, session.id, editingSessionName);
                                       }}
-                                      title="Save"
+                                      title={t('tooltips.save')}
                                     >
                                       <Check className="w-3 h-3 text-green-600 dark:text-green-400" />
                                     </button>
@@ -1221,7 +1223,7 @@ function Sidebar({
                                         setEditingSession(null);
                                         setEditingSessionName('');
                                       }}
-                                      title="Cancel"
+                                      title={t('tooltips.cancel')}
                                     >
                                       <X className="w-3 h-3 text-gray-600 dark:text-gray-400" />
                                     </button>
@@ -1234,9 +1236,9 @@ function Sidebar({
                                         onClick={(e) => {
                                           e.stopPropagation();
                                           setEditingSession(session.id);
-                                          setEditingSessionName(session.summary || 'New Session');
+                                          setEditingSessionName(session.summary || t('projects.newSession'));
                                         }}
-                                        title="Manually edit session name"
+                                        title={t('tooltips.editSessionName')}
                                       >
                                         <Edit2 className="w-3 h-3 text-gray-600 dark:text-gray-400" />
                                       </button>
@@ -1247,7 +1249,7 @@ function Sidebar({
                                         e.stopPropagation();
                                         deleteSession(project.name, session.id, session.__provider);
                                       }}
-                                      title="Delete this session permanently"
+                                      title={t('tooltips.deleteSession')}
                                     >
                                       <Trash2 className="w-3 h-3 text-red-600 dark:text-red-400" />
                                     </button>
@@ -1273,18 +1275,18 @@ function Sidebar({
                           {loadingSessions[project.name] ? (
                             <>
                               <div className="w-3 h-3 animate-spin rounded-full border border-muted-foreground border-t-transparent" />
-                              Loading...
+                              {t('sessions.loading')}
                             </>
                           ) : (
                             <>
                               <ChevronDown className="w-3 h-3" />
-                              Show more sessions
+                              {t('sessions.showMore')}
                             </>
                           )}
                         </Button>
                       )}
                       
-                      {/* New Session Button */}
+                      {/* Sessions - New Session Button */}
                       <div className="md:hidden px-3 pb-2">
                         <button
                           className="w-full h-8 bg-primary hover:bg-primary/90 text-primary-foreground rounded-md flex items-center justify-center gap-2 font-medium text-xs active:scale-[0.98] transition-all duration-150"
@@ -1294,7 +1296,7 @@ function Sidebar({
                           }}
                         >
                           <Plus className="w-3 h-3" />
-                          New Session
+                          {t('sessions.newSession')}
                         </button>
                       </div>
                       
@@ -1305,7 +1307,7 @@ function Sidebar({
                         onClick={() => onNewSession(project)}
                       >
                         <Plus className="w-3 h-3" />
-                        New Session
+                        {t('sessions.newSession')}
                       </Button>
                     </div>
                   )}
@@ -1336,7 +1338,7 @@ function Sidebar({
                 <div className="text-sm font-medium text-blue-700 dark:text-blue-300">
                   {releaseInfo?.title || `Version ${latestVersion}`}
                 </div>
-                <div className="text-xs text-blue-600 dark:text-blue-400">Update available</div>
+                <div className="text-xs text-blue-600 dark:text-blue-400">{t('version.updateAvailable')}</div>
               </div>
             </Button>
           </div>
@@ -1357,7 +1359,7 @@ function Sidebar({
                 <div className="text-sm font-medium text-blue-700 dark:text-blue-300">
                   {releaseInfo?.title || `Version ${latestVersion}`}
                 </div>
-                <div className="text-xs text-blue-600 dark:text-blue-400">Update available</div>
+                <div className="text-xs text-blue-600 dark:text-blue-400">{t('version.updateAvailable')}</div>
               </div>
             </button>
           </div>
@@ -1375,7 +1377,7 @@ function Sidebar({
             <div className="w-10 h-10 rounded-2xl bg-background/80 flex items-center justify-center">
               <Settings className="w-5 h-5 text-muted-foreground" />
             </div>
-            <span className="text-lg font-medium text-foreground">Settings</span>
+            <span className="text-lg font-medium text-foreground">{t('actions.settings')}</span>
           </button>
         </div>
         
@@ -1386,7 +1388,7 @@ function Sidebar({
           onClick={onShowSettings}
         >
           <Settings className="w-3 h-3" />
-          <span className="text-xs">Settings</span>
+          <span className="text-xs">{t('actions.settings')}</span>
         </Button>
       </div>
     </div>
diff --git a/src/i18n/config.js b/src/i18n/config.js
new file mode 100644
index 0000000..334a411
--- /dev/null
+++ b/src/i18n/config.js
@@ -0,0 +1,121 @@
+/**
+ * i18n Configuration
+ *
+ * Configures i18next for internationalization support.
+ * Features:
+ * - Lazy-loading of translation namespaces
+ * - Language detection from localStorage
+ * - Fallback to English for missing translations
+ * - Development mode warnings for missing keys
+ */
+
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+import LanguageDetector from 'i18next-browser-languagedetector';
+
+// Import translation resources
+import enCommon from './locales/en/common.json';
+import enSettings from './locales/en/settings.json';
+import enAuth from './locales/en/auth.json';
+import enSidebar from './locales/en/sidebar.json';
+
+import zhCommon from './locales/zh-CN/common.json';
+import zhSettings from './locales/zh-CN/settings.json';
+import zhAuth from './locales/zh-CN/auth.json';
+import zhSidebar from './locales/zh-CN/sidebar.json';
+
+// Import supported languages configuration
+import { languages } from './languages.js';
+
+// Get saved language preference from localStorage
+const getSavedLanguage = () => {
+  try {
+    const saved = localStorage.getItem('userLanguage');
+    // Validate that the saved language is supported
+    if (saved && languages.some(lang => lang.value === saved)) {
+      return saved;
+    }
+    return 'en';
+  } catch {
+    return 'en';
+  }
+};
+
+// Initialize i18next
+i18n
+  .use(LanguageDetector) // Detect user language
+  .use(initReactI18next) // Pass i18n instance to react-i18next
+  .init({
+    // Resources containing all translations
+    resources: {
+      en: {
+        common: enCommon,
+        settings: enSettings,
+        auth: enAuth,
+        sidebar: enSidebar,
+      },
+      'zh-CN': {
+        common: zhCommon,
+        settings: zhSettings,
+        auth: zhAuth,
+        sidebar: zhSidebar,
+      },
+    },
+
+    // Default language
+    lng: getSavedLanguage(),
+
+    // Fallback language when a translation is missing
+    fallbackLng: 'en',
+
+    // Enable debug mode in development (logs missing keys to console)
+    debug: import.meta.env.DEV,
+
+    // Namespaces - load only what's needed
+    ns: ['common', 'settings', 'auth', 'sidebar'],
+    defaultNS: 'common',
+
+    // Key separator for nested keys (default: '.')
+    keySeparator: '.',
+
+    // Namespace separator (default: ':')
+    nsSeparator: ':',
+
+    // Save missing translations (disabled - requires manual review)
+    saveMissing: false,
+
+    // Interpolation settings
+    interpolation: {
+      escapeValue: false, // React already escapes values
+    },
+
+    // React-specific settings
+    react: {
+      useSuspense: true, // Use Suspense for lazy-loading
+      bindI18n: 'languageChanged', // Re-render on language change
+      bindI18nStore: false, // Don't re-render on resource changes
+    },
+
+    // Detection options
+    detection: {
+      // Order of language detection (local storage first)
+      order: ['localStorage'],
+
+      // Keys to look for in localStorage
+      lookupLocalStorage: 'userLanguage',
+
+      // Cache user language
+      caches: ['localStorage'],
+    },
+  });
+
+// Save language preference when it changes
+i18n.on('languageChanged', (lng) => {
+  try {
+    localStorage.setItem('userLanguage', lng);
+  } catch (error) {
+    console.error('Failed to save language preference:', error);
+  }
+});
+
+export default i18n;
diff --git a/src/i18n/languages.js b/src/i18n/languages.js
new file mode 100644
index 0000000..78555f0
--- /dev/null
+++ b/src/i18n/languages.js
@@ -0,0 +1,48 @@
+/**
+ * Supported Languages Configuration
+ *
+ * This file contains the list of supported languages for the application.
+ * Each language includes:
+ * - value: Language code (e.g., 'en', 'zh-CN')
+ * - label: Display name in English
+ * - nativeName: Native language name for display
+ */
+
+export const languages = [
+  {
+    value: 'en',
+    label: 'English',
+    nativeName: 'English',
+  },
+  {
+    value: 'zh-CN',
+    label: 'Simplified Chinese',
+    nativeName: '简体中文',
+  },
+];
+
+/**
+ * Get language object by value
+ * @param {string} value - Language code
+ * @returns {Object|undefined} Language object or undefined if not found
+ */
+export const getLanguage = (value) => {
+  return languages.find(lang => lang.value === value);
+};
+
+/**
+ * Get all language values
+ * @returns {string[]} Array of language codes
+ */
+export const getLanguageValues = () => {
+  return languages.map(lang => lang.value);
+};
+
+/**
+ * Check if a language is supported
+ * @param {string} value - Language code to check
+ * @returns {boolean} True if language is supported
+ */
+export const isLanguageSupported = (value) => {
+  return languages.some(lang => lang.value === value);
+};
diff --git a/src/i18n/locales/en/auth.json b/src/i18n/locales/en/auth.json
new file mode 100644
index 0000000..2788855
--- /dev/null
+++ b/src/i18n/locales/en/auth.json
@@ -0,0 +1,37 @@
+{
+  "login": {
+    "title": "Welcome Back",
+    "description": "Sign in to your Claude Code UI account",
+    "username": "Username",
+    "password": "Password",
+    "submit": "Sign In",
+    "loading": "Signing in...",
+    "errors": {
+      "invalidCredentials": "Invalid username or password",
+      "requiredFields": "Please fill in all fields",
+      "networkError": "Network error. Please try again."
+    },
+    "placeholders": {
+      "username": "Enter your username",
+      "password": "Enter your password"
+    }
+  },
+  "register": {
+    "title": "Create Account",
+    "username": "Username",
+    "password": "Password",
+    "confirmPassword": "Confirm Password",
+    "submit": "Create Account",
+    "loading": "Creating account...",
+    "errors": {
+      "passwordMismatch": "Passwords do not match",
+      "usernameTaken": "Username is already taken",
+      "weakPassword": "Password is too weak"
+    }
+  },
+  "logout": {
+    "title": "Sign Out",
+    "confirm": "Are you sure you want to sign out?",
+    "button": "Sign Out"
+  }
+}
diff --git a/src/i18n/locales/en/common.json b/src/i18n/locales/en/common.json
new file mode 100644
index 0000000..ffc7972
--- /dev/null
+++ b/src/i18n/locales/en/common.json
@@ -0,0 +1,190 @@
+{
+  "buttons": {
+    "save": "Save",
+    "cancel": "Cancel",
+    "delete": "Delete",
+    "create": "Create",
+    "edit": "Edit",
+    "close": "Close",
+    "confirm": "Confirm",
+    "submit": "Submit",
+    "retry": "Retry",
+    "refresh": "Refresh",
+    "search": "Search",
+    "clear": "Clear",
+    "copy": "Copy",
+    "download": "Download",
+    "upload": "Upload",
+    "browse": "Browse"
+  },
+  "tabs": {
+    "chat": "Chat",
+    "shell": "Shell",
+    "files": "Files",
+    "git": "Source Control",
+    "tasks": "Tasks"
+  },
+  "status": {
+    "loading": "Loading...",
+    "success": "Success",
+    "error": "Error",
+    "failed": "Failed",
+    "pending": "Pending",
+    "completed": "Completed",
+    "inProgress": "In Progress"
+  },
+  "messages": {
+    "savedSuccessfully": "Saved successfully",
+    "deletedSuccessfully": "Deleted successfully",
+    "updatedSuccessfully": "Updated successfully",
+    "operationFailed": "Operation failed",
+    "networkError": "Network error. Please check your connection.",
+    "unauthorized": "Unauthorized. Please log in.",
+    "notFound": "Not found",
+    "invalidInput": "Invalid input",
+    "requiredField": "This field is required",
+    "unknownError": "An unknown error occurred"
+  },
+  "navigation": {
+    "settings": "Settings",
+    "home": "Home",
+    "back": "Back",
+    "next": "Next",
+    "previous": "Previous",
+    "logout": "Logout"
+  },
+  "common": {
+    "language": "Language",
+    "theme": "Theme",
+    "darkMode": "Dark Mode",
+    "lightMode": "Light Mode",
+    "name": "Name",
+    "description": "Description",
+    "enabled": "Enabled",
+    "disabled": "Disabled",
+    "optional": "Optional",
+    "version": "Version",
+    "select": "Select",
+    "selectAll": "Select All",
+    "deselectAll": "Deselect All"
+  },
+  "time": {
+    "justNow": "Just now",
+    "minutesAgo": "{{count}} mins ago",
+    "hoursAgo": "{{count}} hours ago",
+    "daysAgo": "{{count}} days ago",
+    "yesterday": "Yesterday"
+  },
+  "fileOperations": {
+    "newFile": "New File",
+    "newFolder": "New Folder",
+    "rename": "Rename",
+    "move": "Move",
+    "copyPath": "Copy Path",
+    "openInEditor": "Open in Editor"
+  },
+  "mainContent": {
+    "loading": "Loading Claude Code UI",
+    "settingUpWorkspace": "Setting up your workspace...",
+    "chooseProject": "Choose Your Project",
+    "selectProjectDescription": "Select a project from the sidebar to start coding with Claude. Each project contains your chat sessions and file history.",
+    "tip": "Tip",
+    "createProjectMobile": "Tap the menu button above to access projects",
+    "createProjectDesktop": "Create a new project by clicking the folder icon in the sidebar",
+    "newSession": "New Session",
+    "untitledSession": "Untitled Session",
+    "projectFiles": "Project Files"
+  },
+  "fileTree": {
+    "loading": "Loading files...",
+    "files": "Files",
+    "simpleView": "Simple view",
+    "compactView": "Compact view",
+    "detailedView": "Detailed view",
+    "searchPlaceholder": "Search files and folders...",
+    "clearSearch": "Clear search",
+    "name": "Name",
+    "size": "Size",
+    "modified": "Modified",
+    "permissions": "Permissions",
+    "noFilesFound": "No files found",
+    "checkProjectPath": "Check if the project path is accessible",
+    "noMatchesFound": "No matches found",
+    "tryDifferentSearch": "Try a different search term or clear the search",
+    "justNow": "just now",
+    "minAgo": "{{count}} min ago",
+    "hoursAgo": "{{count}} hours ago",
+    "daysAgo": "{{count}} days ago"
+  },
+  "projectWizard": {
+    "title": "Create New Project",
+    "steps": {
+      "type": "Type",
+      "configure": "Configure",
+      "confirm": "Confirm"
+    },
+    "step1": {
+      "question": "Do you already have a workspace, or would you like to create a new one?",
+      "existing": {
+        "title": "Existing Workspace",
+        "description": "I already have a workspace on my server and just need to add it to the project list"
+      },
+      "new": {
+        "title": "New Workspace",
+        "description": "Create a new workspace, optionally clone from a GitHub repository"
+      }
+    },
+    "step2": {
+      "existingPath": "Workspace Path",
+      "newPath": "Where should the workspace be created?",
+      "existingPlaceholder": "/path/to/existing/workspace",
+      "newPlaceholder": "/path/to/new/workspace",
+      "existingHelp": "Full path to your existing workspace directory",
+      "newHelp": "Full path where the new workspace will be created",
+      "githubUrl": "GitHub URL (Optional)",
+      "githubPlaceholder": "https://github.com/username/repository",
+      "githubHelp": "Leave empty to create an empty workspace, or provide a GitHub URL to clone",
+      "githubAuth": "GitHub Authentication (Optional)",
+      "githubAuthHelp": "Only required for private repositories. Public repos can be cloned without authentication.",
+      "loadingTokens": "Loading stored tokens...",
+      "storedToken": "Stored Token",
+      "newToken": "New Token",
+      "nonePublic": "None (Public)",
+      "selectToken": "Select Token",
+      "selectTokenPlaceholder": "-- Select a token --",
+      "tokenPlaceholder": "ghp_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
+      "tokenHelp": "This token will be used only for this operation",
+      "publicRepoInfo": "Public repositories don't require authentication. You can skip providing a token if cloning a public repo.",
+      "noTokensHelp": "No stored tokens available. You can add tokens in Settings → API Keys for easier reuse.",
+      "optionalTokenPublic": "GitHub Token (Optional for Public Repos)",
+      "tokenPublicPlaceholder": "ghp_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx (leave empty for public repos)"
+    },
+    "step3": {
+      "reviewConfig": "Review Your Configuration",
+      "workspaceType": "Workspace Type:",
+      "existingWorkspace": "Existing Workspace",
+      "newWorkspace": "New Workspace",
+      "path": "Path:",
+      "cloneFrom": "Clone From:",
+      "authentication": "Authentication:",
+      "usingStoredToken": "Using stored token:",
+      "usingProvidedToken": "Using provided token",
+      "noAuthentication": "No authentication",
+      "existingInfo": "The workspace will be added to your project list and will be available for Claude/Cursor sessions.",
+      "newWithClone": "A new workspace will be created and the repository will be cloned from GitHub.",
+      "newEmpty": "An empty workspace directory will be created at the specified path."
+    },
+    "buttons": {
+      "cancel": "Cancel",
+      "back": "Back",
+      "next": "Next",
+      "createProject": "Create Project",
+      "creating": "Creating..."
+    },
+    "errors": {
+      "selectType": "Please select whether you have an existing workspace or want to create a new one",
+      "providePath": "Please provide a workspace path",
+      "failedToCreate": "Failed to create workspace"
+    }
+  }
+}
diff --git a/src/i18n/locales/en/settings.json b/src/i18n/locales/en/settings.json
new file mode 100644
index 0000000..c23233f
--- /dev/null
+++ b/src/i18n/locales/en/settings.json
@@ -0,0 +1,75 @@
+{
+  "title": "Settings",
+  "tabs": {
+    "account": "Account",
+    "permissions": "Permissions",
+    "mcpServers": "MCP Servers",
+    "appearance": "Appearance"
+  },
+  "account": {
+    "language": "Language",
+    "languageLabel": "Display Language",
+    "languageDescription": "Choose your preferred language for the interface",
+    "username": "Username",
+    "email": "Email",
+    "profile": "Profile",
+    "changePassword": "Change Password"
+  },
+  "permissions": {
+    "allowedTools": "Allowed Tools",
+    "disallowedTools": "Disallowed Tools",
+    "addTool": "Add Tool",
+    "removeTool": "Remove Tool",
+    "description": "Configure which tools Claude can use. Tools must be enabled here before Claude can access them."
+  },
+  "mcp": {
+    "title": "MCP Servers",
+    "addServer": "Add Server",
+    "editServer": "Edit Server",
+    "deleteServer": "Delete Server",
+    "serverName": "Server Name",
+    "serverType": "Server Type",
+    "config": "Configuration",
+    "testConnection": "Test Connection",
+    "status": "Status",
+    "connected": "Connected",
+    "disconnected": "Disconnected",
+    "scope": {
+      "label": "Scope",
+      "user": "User",
+      "project": "Project"
+    }
+  },
+  "appearance": {
+    "title": "Appearance",
+    "theme": "Theme",
+    "codeEditor": "Code Editor",
+    "editorTheme": "Editor Theme",
+    "wordWrap": "Word Wrap",
+    "showMinimap": "Show Minimap",
+    "lineNumbers": "Line Numbers",
+    "fontSize": "Font Size"
+  },
+  "actions": {
+    "saveChanges": "Save Changes",
+    "resetToDefaults": "Reset to Defaults",
+    "cancelChanges": "Cancel Changes"
+  },
+  "quickSettings": {
+    "title": "Quick Settings",
+    "sections": {
+      "appearance": "Appearance",
+      "toolDisplay": "Tool Display",
+      "viewOptions": "View Options",
+      "inputSettings": "Input Settings",
+      "whisperDictation": "Whisper Dictation"
+    },
+    "darkMode": "Dark Mode",
+    "autoExpandTools": "Auto-expand tools",
+    "showRawParameters": "Show raw parameters",
+    "showThinking": "Show thinking",
+    "autoScrollToBottom": "Auto-scroll to bottom",
+    "sendByCtrlEnter": "Send by Ctrl+Enter",
+    "sendByCtrlEnterDescription": "When enabled, pressing Ctrl+Enter will send the message instead of just Enter. This is useful for IME users to avoid accidental sends."
+  }
+}
diff --git a/src/i18n/locales/en/sidebar.json b/src/i18n/locales/en/sidebar.json
new file mode 100644
index 0000000..eb7a0d9
--- /dev/null
+++ b/src/i18n/locales/en/sidebar.json
@@ -0,0 +1,102 @@
+{
+  "projects": {
+    "title": "Projects",
+    "newProject": "New Project",
+    "deleteProject": "Delete Project",
+    "renameProject": "Rename Project",
+    "noProjects": "No projects found",
+    "loadingProjects": "Loading projects...",
+    "searchPlaceholder": "Search projects...",
+    "projectNamePlaceholder": "Project name",
+    "starred": "Starred",
+    "all": "All",
+    "untitledSession": "Untitled Session",
+    "newSession": "New Session",
+    "codexSession": "Codex Session",
+    "fetchingProjects": "Fetching your Claude projects and sessions",
+    "noMatchingProjects": "No matching projects",
+    "tryDifferentSearch": "Try adjusting your search term",
+    "runClaudeCli": "Run Claude CLI in a project directory to get started"
+  },
+  "app": {
+    "title": "Claude Code UI",
+    "subtitle": "AI coding assistant interface"
+  },
+  "sessions": {
+    "title": "Sessions",
+    "newSession": "New Session",
+    "deleteSession": "Delete Session",
+    "renameSession": "Rename Session",
+    "noSessions": "No sessions yet",
+    "loadingSessions": "Loading sessions...",
+    "unnamed": "Unnamed",
+    "loading": "Loading...",
+    "showMore": "Show more sessions"
+  },
+  "tooltips": {
+    "viewEnvironments": "View Environments",
+    "hideSidebar": "Hide sidebar",
+    "createProject": "Create new project",
+    "refresh": "Refresh projects and sessions (Ctrl+R)",
+    "renameProject": "Rename project (F2)",
+    "deleteProject": "Delete empty project (Delete)",
+    "addToFavorites": "Add to favorites",
+    "removeFromFavorites": "Remove from favorites",
+    "editSessionName": "Manually edit session name",
+    "deleteSession": "Delete this session permanently",
+    "save": "Save",
+    "cancel": "Cancel"
+  },
+  "navigation": {
+    "chat": "Chat",
+    "files": "Files",
+    "git": "Git",
+    "terminal": "Terminal",
+    "tasks": "Tasks"
+  },
+  "actions": {
+    "refresh": "Refresh",
+    "settings": "Settings",
+    "collapseAll": "Collapse All",
+    "expandAll": "Expand All",
+    "cancel": "Cancel",
+    "save": "Save",
+    "delete": "Delete",
+    "rename": "Rename"
+  },
+  "status": {
+    "active": "Active",
+    "inactive": "Inactive",
+    "thinking": "Thinking...",
+    "error": "Error",
+    "aborted": "Aborted",
+    "unknown": "Unknown"
+  },
+  "time": {
+    "justNow": "Just now",
+    "oneMinuteAgo": "1 min ago",
+    "minutesAgo": "{{count}} mins ago",
+    "oneHourAgo": "1 hour ago",
+    "hoursAgo": "{{count}} hours ago",
+    "oneDayAgo": "1 day ago",
+    "daysAgo": "{{count}} days ago"
+  },
+  "messages": {
+    "deleteConfirm": "Are you sure you want to delete this?",
+    "renameSuccess": "Renamed successfully",
+    "deleteSuccess": "Deleted successfully",
+    "errorOccurred": "An error occurred",
+    "deleteSessionConfirm": "Are you sure you want to delete this session? This action cannot be undone.",
+    "deleteProjectConfirm": "Are you sure you want to delete this empty project? This action cannot be undone.",
+    "enterProjectPath": "Please enter a project path",
+    "deleteSessionFailed": "Failed to delete session. Please try again.",
+    "deleteSessionError": "Error deleting session. Please try again.",
+    "deleteProjectFailed": "Failed to delete project. Please try again.",
+    "deleteProjectError": "Error deleting project. Please try again.",
+    "createProjectFailed": "Failed to create project. Please try again.",
+    "createProjectError": "Error creating project. Please try again."
+  },
+  "version": {
+    "updateAvailable": "Update available"
+  }
+}
diff --git a/src/i18n/locales/zh-CN/auth.json b/src/i18n/locales/zh-CN/auth.json
new file mode 100644
index 0000000..3905c2b
--- /dev/null
+++ b/src/i18n/locales/zh-CN/auth.json
@@ -0,0 +1,37 @@
+{
+  "login": {
+    "title": "欢迎回来",
+    "description": "登录您的 Claude Code UI 账户",
+    "username": "用户名",
+    "password": "密码",
+    "submit": "登录",
+    "loading": "登录中...",
+    "errors": {
+      "invalidCredentials": "用户名或密码无效",
+      "requiredFields": "请填写所有字段",
+      "networkError": "网络错误，请重试。"
+    },
+    "placeholders": {
+      "username": "输入您的用户名",
+      "password": "输入您的密码"
+    }
+  },
+  "register": {
+    "title": "创建账户",
+    "username": "用户名",
+    "password": "密码",
+    "confirmPassword": "确认密码",
+    "submit": "创建账户",
+    "loading": "创建账户中...",
+    "errors": {
+      "passwordMismatch": "密码不匹配",
+      "usernameTaken": "用户名已被占用",
+      "weakPassword": "密码强度太弱"
+    }
+  },
+  "logout": {
+    "title": "退出登录",
+    "confirm": "确定要退出登录吗？",
+    "button": "退出登录"
+  }
+}
diff --git a/src/i18n/locales/zh-CN/common.json b/src/i18n/locales/zh-CN/common.json
new file mode 100644
index 0000000..1f8bc04
--- /dev/null
+++ b/src/i18n/locales/zh-CN/common.json
@@ -0,0 +1,190 @@
+{
+  "buttons": {
+    "save": "保存",
+    "cancel": "取消",
+    "delete": "删除",
+    "create": "创建",
+    "edit": "编辑",
+    "close": "关闭",
+    "confirm": "确认",
+    "submit": "提交",
+    "retry": "重试",
+    "refresh": "刷新",
+    "search": "搜索",
+    "clear": "清除",
+    "copy": "复制",
+    "download": "下载",
+    "upload": "上传",
+    "browse": "浏览"
+  },
+  "tabs": {
+    "chat": "聊天",
+    "shell": "终端",
+    "files": "文件",
+    "git": "源代码管理",
+    "tasks": "任务"
+  },
+  "status": {
+    "loading": "加载中...",
+    "success": "成功",
+    "error": "错误",
+    "failed": "失败",
+    "pending": "待处理",
+    "completed": "已完成",
+    "inProgress": "进行中"
+  },
+  "messages": {
+    "savedSuccessfully": "保存成功",
+    "deletedSuccessfully": "删除成功",
+    "updatedSuccessfully": "更新成功",
+    "operationFailed": "操作失败",
+    "networkError": "网络错误，请检查您的连接。",
+    "unauthorized": "未授权，请登录。",
+    "notFound": "未找到",
+    "invalidInput": "输入无效",
+    "requiredField": "此字段为必填项",
+    "unknownError": "发生未知错误"
+  },
+  "navigation": {
+    "settings": "设置",
+    "home": "首页",
+    "back": "返回",
+    "next": "下一步",
+    "previous": "上一步",
+    "logout": "退出登录"
+  },
+  "common": {
+    "language": "语言",
+    "theme": "主题",
+    "darkMode": "深色模式",
+    "lightMode": "浅色模式",
+    "name": "名称",
+    "description": "描述",
+    "enabled": "已启用",
+    "disabled": "已禁用",
+    "optional": "可选",
+    "version": "版本",
+    "select": "选择",
+    "selectAll": "全选",
+    "deselectAll": "取消全选"
+  },
+  "time": {
+    "justNow": "刚刚",
+    "minutesAgo": "{{count}} 分钟前",
+    "hoursAgo": "{{count}} 小时前",
+    "daysAgo": "{{count}} 天前",
+    "yesterday": "昨天"
+  },
+  "fileOperations": {
+    "newFile": "新建文件",
+    "newFolder": "新建文件夹",
+    "rename": "重命名",
+    "move": "移动",
+    "copyPath": "复制路径",
+    "openInEditor": "在编辑器中打开"
+  },
+  "mainContent": {
+    "loading": "正在加载 Claude Code UI",
+    "settingUpWorkspace": "正在设置您的工作空间...",
+    "chooseProject": "选择您的项目",
+    "selectProjectDescription": "从侧边栏选择一个项目以开始使用 Claude 进行编程。每个项目包含您的聊天会话和文件历史。",
+    "tip": "提示",
+    "createProjectMobile": "点击上方的菜单按钮以访问项目",
+    "createProjectDesktop": "点击侧边栏中的文件夹图标以创建新项目",
+    "newSession": "新会话",
+    "untitledSession": "未命名会话",
+    "projectFiles": "项目文件"
+  },
+  "fileTree": {
+    "loading": "正在加载文件...",
+    "files": "文件",
+    "simpleView": "简单视图",
+    "compactView": "紧凑视图",
+    "detailedView": "详细视图",
+    "searchPlaceholder": "搜索文件和文件夹...",
+    "clearSearch": "清除搜索",
+    "name": "名称",
+    "size": "大小",
+    "modified": "修改时间",
+    "permissions": "权限",
+    "noFilesFound": "未找到文件",
+    "checkProjectPath": "检查项目路径是否可访问",
+    "noMatchesFound": "未找到匹配项",
+    "tryDifferentSearch": "尝试不同的搜索词或清除搜索",
+    "justNow": "刚刚",
+    "minAgo": "{{count}} 分钟前",
+    "hoursAgo": "{{count}} 小时前",
+    "daysAgo": "{{count}} 天前"
+  },
+  "projectWizard": {
+    "title": "创建新项目",
+    "steps": {
+      "type": "类型",
+      "configure": "配置",
+      "confirm": "确认"
+    },
+    "step1": {
+      "question": "您已经有工作区，还是想创建一个新的工作区？",
+      "existing": {
+        "title": "现有工作区",
+        "description": "我的服务器上已经有工作区，只需要将其添加到项目列表中"
+      },
+      "new": {
+        "title": "新建工作区",
+        "description": "创建一个新工作区，可选择从 GitHub 仓库克隆"
+      }
+    },
+    "step2": {
+      "existingPath": "工作区路径",
+      "newPath": "应该在哪里创建工作区？",
+      "existingPlaceholder": "/path/to/existing/workspace",
+      "newPlaceholder": "/path/to/new/workspace",
+      "existingHelp": "您现有工作区目录的完整路径",
+      "newHelp": "将创建新工作区的完整路径",
+      "githubUrl": "GitHub URL（可选）",
+      "githubPlaceholder": "https://github.com/username/repository",
+      "githubHelp": "留空以创建空工作区，或提供 GitHub URL 以克隆",
+      "githubAuth": "GitHub 身份验证（可选）",
+      "githubAuthHelp": "仅私有仓库需要。公共仓库无需身份验证即可克隆。",
+      "loadingTokens": "正在加载已保存的令牌...",
+      "storedToken": "已保存的令牌",
+      "newToken": "新令牌",
+      "nonePublic": "无（公共）",
+      "selectToken": "选择令牌",
+      "selectTokenPlaceholder": "-- 选择令牌 --",
+      "tokenPlaceholder": "ghp_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
+      "tokenHelp": "此令牌仅用于此操作",
+      "publicRepoInfo": "公共仓库不需要身份验证。如果克隆公共仓库，可以跳过提供令牌。",
+      "noTokensHelp": "没有可用的已保存令牌。您可以在 设置 → API 密钥 中添加令牌以便重复使用。",
+      "optionalTokenPublic": "GitHub 令牌（公共仓库可选）",
+      "tokenPublicPlaceholder": "ghp_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx（公共仓库可留空）"
+    },
+    "step3": {
+      "reviewConfig": "查看您的配置",
+      "workspaceType": "工作区类型：",
+      "existingWorkspace": "现有工作区",
+      "newWorkspace": "新建工作区",
+      "path": "路径：",
+      "cloneFrom": "克隆自：",
+      "authentication": "身份验证：",
+      "usingStoredToken": "使用已保存的令牌：",
+      "usingProvidedToken": "使用提供的令牌",
+      "noAuthentication": "无身份验证",
+      "existingInfo": "工作区将被添加到您的项目列表中，并可用于 Claude/Cursor 会话。",
+      "newWithClone": "将创建新工作区，并从 GitHub 克隆仓库。",
+      "newEmpty": "将在指定路径创建一个空的工作区目录。"
+    },
+    "buttons": {
+      "cancel": "取消",
+      "back": "返回",
+      "next": "下一步",
+      "createProject": "创建项目",
+      "creating": "创建中..."
+    },
+    "errors": {
+      "selectType": "请选择您已有现有工作区还是想创建新工作区",
+      "providePath": "请提供工作区路径",
+      "failedToCreate": "创建工作区失败"
+    }
+  }
+}
diff --git a/src/i18n/locales/zh-CN/settings.json b/src/i18n/locales/zh-CN/settings.json
new file mode 100644
index 0000000..2814fb5
--- /dev/null
+++ b/src/i18n/locales/zh-CN/settings.json
@@ -0,0 +1,75 @@
+{
+  "title": "设置",
+  "tabs": {
+    "account": "账户",
+    "permissions": "权限",
+    "mcpServers": "MCP 服务器",
+    "appearance": "外观"
+  },
+  "account": {
+    "language": "语言",
+    "languageLabel": "显示语言",
+    "languageDescription": "选择您偏好的界面语言",
+    "username": "用户名",
+    "email": "邮箱",
+    "profile": "个人资料",
+    "changePassword": "修改密码"
+  },
+  "permissions": {
+    "allowedTools": "允许的工具",
+    "disallowedTools": "禁止的工具",
+    "addTool": "添加工具",
+    "removeTool": "移除工具",
+    "description": "配置 Claude 可以使用的工具。工具必须在此处启用后，Claude 才能访问它们。"
+  },
+  "mcp": {
+    "title": "MCP 服务器",
+    "addServer": "添加服务器",
+    "editServer": "编辑服务器",
+    "deleteServer": "删除服务器",
+    "serverName": "服务器名称",
+    "serverType": "服务器类型",
+    "config": "配置",
+    "testConnection": "测试连接",
+    "status": "状态",
+    "connected": "已连接",
+    "disconnected": "未连接",
+    "scope": {
+      "label": "范围",
+      "user": "用户",
+      "project": "项目"
+    }
+  },
+  "appearance": {
+    "title": "外观",
+    "theme": "主题",
+    "codeEditor": "代码编辑器",
+    "editorTheme": "编辑器主题",
+    "wordWrap": "自动换行",
+    "showMinimap": "显示缩略图",
+    "lineNumbers": "行号",
+    "fontSize": "字体大小"
+  },
+  "actions": {
+    "saveChanges": "保存更改",
+    "resetToDefaults": "重置为默认值",
+    "cancelChanges": "取消更改"
+  },
+  "quickSettings": {
+    "title": "快速设置",
+    "sections": {
+      "appearance": "外观",
+      "toolDisplay": "工具显示",
+      "viewOptions": "视图选项",
+      "inputSettings": "输入设置",
+      "whisperDictation": "Whisper 听写"
+    },
+    "darkMode": "深色模式",
+    "autoExpandTools": "自动展开工具",
+    "showRawParameters": "显示原始参数",
+    "showThinking": "显示思考过程",
+    "autoScrollToBottom": "自动滚动到底部",
+    "sendByCtrlEnter": "使用 Ctrl+Enter 发送",
+    "sendByCtrlEnterDescription": "启用后，按 Ctrl+Enter 发送消息，而不是仅按 Enter。这对于使用输入法的用户可以避免意外发送。"
+  }
+}
diff --git a/src/i18n/locales/zh-CN/sidebar.json b/src/i18n/locales/zh-CN/sidebar.json
new file mode 100644
index 0000000..e5e3c65
--- /dev/null
+++ b/src/i18n/locales/zh-CN/sidebar.json
@@ -0,0 +1,102 @@
+{
+  "projects": {
+    "title": "项目",
+    "newProject": "新建项目",
+    "deleteProject": "删除项目",
+    "renameProject": "重命名项目",
+    "noProjects": "未找到项目",
+    "loadingProjects": "加载项目中...",
+    "searchPlaceholder": "搜索项目...",
+    "projectNamePlaceholder": "项目名称",
+    "starred": "星标",
+    "all": "全部",
+    "untitledSession": "未命名会话",
+    "newSession": "新会话",
+    "codexSession": "Codex 会话",
+    "fetchingProjects": "正在获取您的 Claude 项目和会话",
+    "noMatchingProjects": "未找到匹配的项目",
+    "tryDifferentSearch": "尝试调整您的搜索词",
+    "runClaudeCli": "在项目目录中运行 Claude CLI 以开始使用"
+  },
+  "app": {
+    "title": "Claude Code UI",
+    "subtitle": "AI 编程助手"
+  },
+  "sessions": {
+    "title": "会话",
+    "newSession": "新建会话",
+    "deleteSession": "删除会话",
+    "renameSession": "重命名会话",
+    "noSessions": "暂无会话",
+    "loadingSessions": "加载会话中...",
+    "unnamed": "未命名",
+    "loading": "加载中...",
+    "showMore": "显示更多会话"
+  },
+  "tooltips": {
+    "viewEnvironments": "查看环境",
+    "hideSidebar": "隐藏侧边栏",
+    "createProject": "创建新项目",
+    "refresh": "刷新项目和会话 (Ctrl+R)",
+    "renameProject": "重命名项目 (F2)",
+    "deleteProject": "删除空项目 (Delete)",
+    "addToFavorites": "添加到收藏",
+    "removeFromFavorites": "从收藏移除",
+    "editSessionName": "手动编辑会话名称",
+    "deleteSession": "永久删除此会话",
+    "save": "保存",
+    "cancel": "取消"
+  },
+  "navigation": {
+    "chat": "聊天",
+    "files": "文件",
+    "git": "Git",
+    "terminal": "终端",
+    "tasks": "任务"
+  },
+  "actions": {
+    "refresh": "刷新",
+    "settings": "设置",
+    "collapseAll": "全部折叠",
+    "expandAll": "全部展开",
+    "cancel": "取消",
+    "save": "保存",
+    "delete": "删除",
+    "rename": "重命名"
+  },
+  "status": {
+    "active": "活动",
+    "inactive": "非活动",
+    "thinking": "思考中...",
+    "error": "错误",
+    "aborted": "已中止",
+    "unknown": "未知"
+  },
+  "time": {
+    "justNow": "刚刚",
+    "oneMinuteAgo": "1 分钟前",
+    "minutesAgo": "{{count}} 分钟前",
+    "oneHourAgo": "1 小时前",
+    "hoursAgo": "{{count}} 小时前",
+    "oneDayAgo": "1 天前",
+    "daysAgo": "{{count}} 天前"
+  },
+  "messages": {
+    "deleteConfirm": "确定要删除吗？",
+    "renameSuccess": "重命名成功",
+    "deleteSuccess": "删除成功",
+    "errorOccurred": "发生错误",
+    "deleteSessionConfirm": "确定要删除此会话吗？此操作无法撤销。",
+    "deleteProjectConfirm": "确定要删除此空项目吗？此操作无法撤销。",
+    "enterProjectPath": "请输入项目路径",
+    "deleteSessionFailed": "删除会话失败，请重试。",
+    "deleteSessionError": "删除会话时出错，请重试。",
+    "deleteProjectFailed": "删除项目失败，请重试。",
+    "deleteProjectError": "删除项目时出错，请重试。",
+    "createProjectFailed": "创建项目失败，请重试。",
+    "createProjectError": "创建项目时出错，请重试。"
+  },
+  "version": {
+    "updateAvailable": "有可用更新"
+  }
+}
diff --git a/src/main.jsx b/src/main.jsx
index f80d47a..02ca6b1 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -4,6 +4,9 @@ import App from './App.jsx'
 import './index.css'
 import 'katex/dist/katex.min.css'
 
+// Initialize i18n
+import './i18n/config.js'
+
 // Clean up stale service workers on app load to prevent caching issues after builds
 if ('serviceWorker' in navigator) {
   navigator.serviceWorker.getRegistrations().then(registrations => {

From 133c762eeabf6d6b09f8c583e19949ea89bc638c Mon Sep 17 00:00:00 2001
From: YuanNiancai <yuanniancai@formulas.cc>
Date: Fri, 16 Jan 2026 19:21:16 +0800
Subject: [PATCH 05/24] Remove openspect files

---
 openspec/AGENTS.md                            | 456 ------------------
 openspec/AGENTS.zh-CN.md                      | 456 ------------------
 openspec/changes/add-i18n-support/design.md   | 246 ----------
 openspec/changes/add-i18n-support/proposal.md |  51 --
 .../add-i18n-support/specs/i18n/spec.md       | 202 --------
 .../specs/user-interface/spec.md              | 176 -------
 openspec/project.md                           | 285 -----------
 openspec/project.zh-CN.md                     | 285 -----------
 8 files changed, 2157 deletions(-)
 delete mode 100644 openspec/AGENTS.md
 delete mode 100644 openspec/AGENTS.zh-CN.md
 delete mode 100644 openspec/changes/add-i18n-support/design.md
 delete mode 100644 openspec/changes/add-i18n-support/proposal.md
 delete mode 100644 openspec/changes/add-i18n-support/specs/i18n/spec.md
 delete mode 100644 openspec/changes/add-i18n-support/specs/user-interface/spec.md
 delete mode 100644 openspec/project.md
 delete mode 100644 openspec/project.zh-CN.md

diff --git a/openspec/AGENTS.md b/openspec/AGENTS.md
deleted file mode 100644
index 6c1703e..0000000
--- a/openspec/AGENTS.md
+++ /dev/null
@@ -1,456 +0,0 @@
-# OpenSpec Instructions
-
-Instructions for AI coding assistants using OpenSpec for spec-driven development.
-
-## TL;DR Quick Checklist
-
-- Search existing work: `openspec spec list --long`, `openspec list` (use `rg` only for full-text search)
-- Decide scope: new capability vs modify existing capability
-- Pick a unique `change-id`: kebab-case, verb-led (`add-`, `update-`, `remove-`, `refactor-`)
-- Scaffold: `proposal.md`, `tasks.md`, `design.md` (only if needed), and delta specs per affected capability
-- Write deltas: use `## ADDED|MODIFIED|REMOVED|RENAMED Requirements`; include at least one `#### Scenario:` per requirement
-- Validate: `openspec validate [change-id] --strict --no-interactive` and fix issues
-- Request approval: Do not start implementation until proposal is approved
-
-## Three-Stage Workflow
-
-### Stage 1: Creating Changes
-Create proposal when you need to:
-- Add features or functionality
-- Make breaking changes (API, schema)
-- Change architecture or patterns  
-- Optimize performance (changes behavior)
-- Update security patterns
-
-Triggers (examples):
-- "Help me create a change proposal"
-- "Help me plan a change"
-- "Help me create a proposal"
-- "I want to create a spec proposal"
-- "I want to create a spec"
-
-Loose matching guidance:
-- Contains one of: `proposal`, `change`, `spec`
-- With one of: `create`, `plan`, `make`, `start`, `help`
-
-Skip proposal for:
-- Bug fixes (restore intended behavior)
-- Typos, formatting, comments
-- Dependency updates (non-breaking)
-- Configuration changes
-- Tests for existing behavior
-
-**Workflow**
-1. Review `openspec/project.md`, `openspec list`, and `openspec list --specs` to understand current context.
-2. Choose a unique verb-led `change-id` and scaffold `proposal.md`, `tasks.md`, optional `design.md`, and spec deltas under `openspec/changes/<id>/`.
-3. Draft spec deltas using `## ADDED|MODIFIED|REMOVED Requirements` with at least one `#### Scenario:` per requirement.
-4. Run `openspec validate <id> --strict --no-interactive` and resolve any issues before sharing the proposal.
-
-### Stage 2: Implementing Changes
-Track these steps as TODOs and complete them one by one.
-1. **Read proposal.md** - Understand what's being built
-2. **Read design.md** (if exists) - Review technical decisions
-3. **Read tasks.md** - Get implementation checklist
-4. **Implement tasks sequentially** - Complete in order
-5. **Confirm completion** - Ensure every item in `tasks.md` is finished before updating statuses
-6. **Update checklist** - After all work is done, set every task to `- [x]` so the list reflects reality
-7. **Approval gate** - Do not start implementation until the proposal is reviewed and approved
-
-### Stage 3: Archiving Changes
-After deployment, create separate PR to:
-- Move `changes/[name]/` → `changes/archive/YYYY-MM-DD-[name]/`
-- Update `specs/` if capabilities changed
-- Use `openspec archive <change-id> --skip-specs --yes` for tooling-only changes (always pass the change ID explicitly)
-- Run `openspec validate --strict --no-interactive` to confirm the archived change passes checks
-
-## Before Any Task
-
-**Context Checklist:**
-- [ ] Read relevant specs in `specs/[capability]/spec.md`
-- [ ] Check pending changes in `changes/` for conflicts
-- [ ] Read `openspec/project.md` for conventions
-- [ ] Run `openspec list` to see active changes
-- [ ] Run `openspec list --specs` to see existing capabilities
-
-**Before Creating Specs:**
-- Always check if capability already exists
-- Prefer modifying existing specs over creating duplicates
-- Use `openspec show [spec]` to review current state
-- If request is ambiguous, ask 1–2 clarifying questions before scaffolding
-
-### Search Guidance
-- Enumerate specs: `openspec spec list --long` (or `--json` for scripts)
-- Enumerate changes: `openspec list` (or `openspec change list --json` - deprecated but available)
-- Show details:
-  - Spec: `openspec show <spec-id> --type spec` (use `--json` for filters)
-  - Change: `openspec show <change-id> --json --deltas-only`
-- Full-text search (use ripgrep): `rg -n "Requirement:|Scenario:" openspec/specs`
-
-## Quick Start
-
-### CLI Commands
-
-```bash
-# Essential commands
-openspec list                  # List active changes
-openspec list --specs          # List specifications
-openspec show [item]           # Display change or spec
-openspec validate [item]       # Validate changes or specs
-openspec archive <change-id> [--yes|-y]   # Archive after deployment (add --yes for non-interactive runs)
-
-# Project management
-openspec init [path]           # Initialize OpenSpec
-openspec update [path]         # Update instruction files
-
-# Interactive mode
-openspec show                  # Prompts for selection
-openspec validate              # Bulk validation mode
-
-# Debugging
-openspec show [change] --json --deltas-only
-openspec validate [change] --strict --no-interactive
-```
-
-### Command Flags
-
-- `--json` - Machine-readable output
-- `--type change|spec` - Disambiguate items
-- `--strict` - Comprehensive validation
-- `--no-interactive` - Disable prompts
-- `--skip-specs` - Archive without spec updates
-- `--yes`/`-y` - Skip confirmation prompts (non-interactive archive)
-
-## Directory Structure
-
-```
-openspec/
-├── project.md              # Project conventions
-├── specs/                  # Current truth - what IS built
-│   └── [capability]/       # Single focused capability
-│       ├── spec.md         # Requirements and scenarios
-│       └── design.md       # Technical patterns
-├── changes/                # Proposals - what SHOULD change
-│   ├── [change-name]/
-│   │   ├── proposal.md     # Why, what, impact
-│   │   ├── tasks.md        # Implementation checklist
-│   │   ├── design.md       # Technical decisions (optional; see criteria)
-│   │   └── specs/          # Delta changes
-│   │       └── [capability]/
-│   │           └── spec.md # ADDED/MODIFIED/REMOVED
-│   └── archive/            # Completed changes
-```
-
-## Creating Change Proposals
-
-### Decision Tree
-
-```
-New request?
-├─ Bug fix restoring spec behavior? → Fix directly
-├─ Typo/format/comment? → Fix directly  
-├─ New feature/capability? → Create proposal
-├─ Breaking change? → Create proposal
-├─ Architecture change? → Create proposal
-└─ Unclear? → Create proposal (safer)
-```
-
-### Proposal Structure
-
-1. **Create directory:** `changes/[change-id]/` (kebab-case, verb-led, unique)
-
-2. **Write proposal.md:**
-```markdown
-# Change: [Brief description of change]
-
-## Why
-[1-2 sentences on problem/opportunity]
-
-## What Changes
-- [Bullet list of changes]
-- [Mark breaking changes with **BREAKING**]
-
-## Impact
-- Affected specs: [list capabilities]
-- Affected code: [key files/systems]
-```
-
-3. **Create spec deltas:** `specs/[capability]/spec.md`
-```markdown
-## ADDED Requirements
-### Requirement: New Feature
-The system SHALL provide...
-
-#### Scenario: Success case
-- **WHEN** user performs action
-- **THEN** expected result
-
-## MODIFIED Requirements
-### Requirement: Existing Feature
-[Complete modified requirement]
-
-## REMOVED Requirements
-### Requirement: Old Feature
-**Reason**: [Why removing]
-**Migration**: [How to handle]
-```
-If multiple capabilities are affected, create multiple delta files under `changes/[change-id]/specs/<capability>/spec.md`—one per capability.
-
-4. **Create tasks.md:**
-```markdown
-## 1. Implementation
-- [ ] 1.1 Create database schema
-- [ ] 1.2 Implement API endpoint
-- [ ] 1.3 Add frontend component
-- [ ] 1.4 Write tests
-```
-
-5. **Create design.md when needed:**
-Create `design.md` if any of the following apply; otherwise omit it:
-- Cross-cutting change (multiple services/modules) or a new architectural pattern
-- New external dependency or significant data model changes
-- Security, performance, or migration complexity
-- Ambiguity that benefits from technical decisions before coding
-
-Minimal `design.md` skeleton:
-```markdown
-## Context
-[Background, constraints, stakeholders]
-
-## Goals / Non-Goals
-- Goals: [...]
-- Non-Goals: [...]
-
-## Decisions
-- Decision: [What and why]
-- Alternatives considered: [Options + rationale]
-
-## Risks / Trade-offs
-- [Risk] → Mitigation
-
-## Migration Plan
-[Steps, rollback]
-
-## Open Questions
-- [...]
-```
-
-## Spec File Format
-
-### Critical: Scenario Formatting
-
-**CORRECT** (use #### headers):
-```markdown
-#### Scenario: User login success
-- **WHEN** valid credentials provided
-- **THEN** return JWT token
-```
-
-**WRONG** (don't use bullets or bold):
-```markdown
-- **Scenario: User login**  ❌
-**Scenario**: User login     ❌
-### Scenario: User login      ❌
-```
-
-Every requirement MUST have at least one scenario.
-
-### Requirement Wording
-- Use SHALL/MUST for normative requirements (avoid should/may unless intentionally non-normative)
-
-### Delta Operations
-
-- `## ADDED Requirements` - New capabilities
-- `## MODIFIED Requirements` - Changed behavior
-- `## REMOVED Requirements` - Deprecated features
-- `## RENAMED Requirements` - Name changes
-
-Headers matched with `trim(header)` - whitespace ignored.
-
-#### When to use ADDED vs MODIFIED
-- ADDED: Introduces a new capability or sub-capability that can stand alone as a requirement. Prefer ADDED when the change is orthogonal (e.g., adding "Slash Command Configuration") rather than altering the semantics of an existing requirement.
-- MODIFIED: Changes the behavior, scope, or acceptance criteria of an existing requirement. Always paste the full, updated requirement content (header + all scenarios). The archiver will replace the entire requirement with what you provide here; partial deltas will drop previous details.
-- RENAMED: Use when only the name changes. If you also change behavior, use RENAMED (name) plus MODIFIED (content) referencing the new name.
-
-Common pitfall: Using MODIFIED to add a new concern without including the previous text. This causes loss of detail at archive time. If you aren’t explicitly changing the existing requirement, add a new requirement under ADDED instead.
-
-Authoring a MODIFIED requirement correctly:
-1) Locate the existing requirement in `openspec/specs/<capability>/spec.md`.
-2) Copy the entire requirement block (from `### Requirement: ...` through its scenarios).
-3) Paste it under `## MODIFIED Requirements` and edit to reflect the new behavior.
-4) Ensure the header text matches exactly (whitespace-insensitive) and keep at least one `#### Scenario:`.
-
-Example for RENAMED:
-```markdown
-## RENAMED Requirements
-- FROM: `### Requirement: Login`
-- TO: `### Requirement: User Authentication`
-```
-
-## Troubleshooting
-
-### Common Errors
-
-**"Change must have at least one delta"**
-- Check `changes/[name]/specs/` exists with .md files
-- Verify files have operation prefixes (## ADDED Requirements)
-
-**"Requirement must have at least one scenario"**
-- Check scenarios use `#### Scenario:` format (4 hashtags)
-- Don't use bullet points or bold for scenario headers
-
-**Silent scenario parsing failures**
-- Exact format required: `#### Scenario: Name`
-- Debug with: `openspec show [change] --json --deltas-only`
-
-### Validation Tips
-
-```bash
-# Always use strict mode for comprehensive checks
-openspec validate [change] --strict --no-interactive
-
-# Debug delta parsing
-openspec show [change] --json | jq '.deltas'
-
-# Check specific requirement
-openspec show [spec] --json -r 1
-```
-
-## Happy Path Script
-
-```bash
-# 1) Explore current state
-openspec spec list --long
-openspec list
-# Optional full-text search:
-# rg -n "Requirement:|Scenario:" openspec/specs
-# rg -n "^#|Requirement:" openspec/changes
-
-# 2) Choose change id and scaffold
-CHANGE=add-two-factor-auth
-mkdir -p openspec/changes/$CHANGE/{specs/auth}
-printf "## Why\n...\n\n## What Changes\n- ...\n\n## Impact\n- ...\n" > openspec/changes/$CHANGE/proposal.md
-printf "## 1. Implementation\n- [ ] 1.1 ...\n" > openspec/changes/$CHANGE/tasks.md
-
-# 3) Add deltas (example)
-cat > openspec/changes/$CHANGE/specs/auth/spec.md << 'EOF'
-## ADDED Requirements
-### Requirement: Two-Factor Authentication
-Users MUST provide a second factor during login.
-
-#### Scenario: OTP required
-- **WHEN** valid credentials are provided
-- **THEN** an OTP challenge is required
-EOF
-
-# 4) Validate
-openspec validate $CHANGE --strict --no-interactive
-```
-
-## Multi-Capability Example
-
-```
-openspec/changes/add-2fa-notify/
-├── proposal.md
-├── tasks.md
-└── specs/
-    ├── auth/
-    │   └── spec.md   # ADDED: Two-Factor Authentication
-    └── notifications/
-        └── spec.md   # ADDED: OTP email notification
-```
-
-auth/spec.md
-```markdown
-## ADDED Requirements
-### Requirement: Two-Factor Authentication
-...
-```
-
-notifications/spec.md
-```markdown
-## ADDED Requirements
-### Requirement: OTP Email Notification
-...
-```
-
-## Best Practices
-
-### Simplicity First
-- Default to <100 lines of new code
-- Single-file implementations until proven insufficient
-- Avoid frameworks without clear justification
-- Choose boring, proven patterns
-
-### Complexity Triggers
-Only add complexity with:
-- Performance data showing current solution too slow
-- Concrete scale requirements (>1000 users, >100MB data)
-- Multiple proven use cases requiring abstraction
-
-### Clear References
-- Use `file.ts:42` format for code locations
-- Reference specs as `specs/auth/spec.md`
-- Link related changes and PRs
-
-### Capability Naming
-- Use verb-noun: `user-auth`, `payment-capture`
-- Single purpose per capability
-- 10-minute understandability rule
-- Split if description needs "AND"
-
-### Change ID Naming
-- Use kebab-case, short and descriptive: `add-two-factor-auth`
-- Prefer verb-led prefixes: `add-`, `update-`, `remove-`, `refactor-`
-- Ensure uniqueness; if taken, append `-2`, `-3`, etc.
-
-## Tool Selection Guide
-
-| Task | Tool | Why |
-|------|------|-----|
-| Find files by pattern | Glob | Fast pattern matching |
-| Search code content | Grep | Optimized regex search |
-| Read specific files | Read | Direct file access |
-| Explore unknown scope | Task | Multi-step investigation |
-
-## Error Recovery
-
-### Change Conflicts
-1. Run `openspec list` to see active changes
-2. Check for overlapping specs
-3. Coordinate with change owners
-4. Consider combining proposals
-
-### Validation Failures
-1. Run with `--strict` flag
-2. Check JSON output for details
-3. Verify spec file format
-4. Ensure scenarios properly formatted
-
-### Missing Context
-1. Read project.md first
-2. Check related specs
-3. Review recent archives
-4. Ask for clarification
-
-## Quick Reference
-
-### Stage Indicators
-- `changes/` - Proposed, not yet built
-- `specs/` - Built and deployed
-- `archive/` - Completed changes
-
-### File Purposes
-- `proposal.md` - Why and what
-- `tasks.md` - Implementation steps
-- `design.md` - Technical decisions
-- `spec.md` - Requirements and behavior
-
-### CLI Essentials
-```bash
-openspec list              # What's in progress?
-openspec show [item]       # View details
-openspec validate --strict --no-interactive  # Is it correct?
-openspec archive <change-id> [--yes|-y]  # Mark complete (add --yes for automation)
-```
-
-Remember: Specs are truth. Changes are proposals. Keep them in sync.
diff --git a/openspec/AGENTS.zh-CN.md b/openspec/AGENTS.zh-CN.md
deleted file mode 100644
index 2d64018..0000000
--- a/openspec/AGENTS.zh-CN.md
+++ /dev/null
@@ -1,456 +0,0 @@
-# OpenSpec 指令
-
-使用 OpenSpec 进行规范驱动开发的 AI 编程助手指南。
-
-## 快速检查清单
-
-- 搜索现有工作：`openspec spec list --long`、`openspec list`（仅在全文搜索时使用 `rg`）
-- 决定范围：新功能 vs 修改现有功能
-- 选择唯一的 `change-id`：kebab-case，动词开头（`add-`、`update-`、`remove-`、`refactor-`）
-- 创建骨架：`proposal.md`、`tasks.md`、`design.md`（仅在需要时）以及每个受影响功能的增量规范
-- 编写增量：使用 `## ADDED|MODIFIED|REMOVED|RENAMED Requirements`；每个需求至少包含一个 `#### Scenario:`
-- 验证：`openspec validate [change-id] --strict --no-interactive` 并修复问题
-- 请求批准：在提案获批前不要开始实施
-
-## 三阶段工作流
-
-### 阶段 1：创建变更
-在以下情况下创建提案：
-- 添加功能或特性
-- 进行破坏性更改（API、架构）
-- 更改架构或模式
-- 优化性能（改变行为）
-- 更新安全模式
-
-触发器（示例）：
-- "帮我创建变更提案"
-- "帮我规划变更"
-- "帮我创建提案"
-- "我想创建规范提案"
-- "我想创建规范"
-
-模糊匹配指南：
-- 包含以下之一：`proposal`、`change`、`spec`
-- 加上以下之一：`create`、`plan`、`make`、`start`、`help`
-
-跳过提案的情况：
-- 错误修复（恢复预期行为）
-- 拼写错误、格式、注释
-- 依赖项更新（非破坏性）
-- 配置更改
-- 为现有行为添加测试
-
-**工作流**
-1. 查看 `openspec/project.md`、`openspec list` 和 `openspec list --specs` 以了解当前上下文。
-2. 选择唯一的动词开头的 `change-id`，并在 `openspec/changes/<id>/` 下创建 `proposal.md`、`tasks.md`、可选的 `design.md` 和规范增量骨架。
-3. 使用 `## ADDED|MODIFIED|REMOVED Requirements` 起草规范增量，每个需求至少包含一个 `#### Scenario:`。
-4. 运行 `openspec validate <id> --strict --no-interactive` 并在共享提案之前解决所有问题。
-
-### 阶段 2：实施变更
-将这些步骤跟踪为 TODO 并逐一完成。
-1. **阅读 proposal.md** - 了解要构建的内容
-2. **阅读 design.md**（如果存在）- 查看技术决策
-3. **阅读 tasks.md** - 获取实施清单
-4. **按顺序实施任务** - 按顺序完成
-5. **确认完成** - 确保在更新状态之前完成 `tasks.md` 中的每一项
-6. **更新清单** - 所有工作完成后，将每个任务设置为 `- [x]`，使列表反映实际情况
-7. **批准门槛** - 在提案被审查和批准之前不要开始实施
-
-### 阶段 3：归档变更
-部署后，创建单独的 PR 以：
-- 将 `changes/[name]/` 移至 `changes/archive/YYYY-MM-DD-[name]/`
-- 如果功能发生变化，则更新 `specs/`
-- 对于仅工具的更改，使用 `openspec archive <change-id> --skip-specs --yes`（始终明确传递变更 ID）
-- 运行 `openspec validate --strict --no-interactive` 以确认归档的更改通过检查
-
-## 在任何任务之前
-
-**上下文清单：**
-- [ ] 阅读 `specs/[capability]/spec.md` 中的相关规范
-- [ ] 检查 `changes/` 中的待处理变更是否有冲突
-- [ ] 阅读 `openspec/project.md` 了解约定
-- [ ] 运行 `openspec list` 查看活动变更
-- [ ] 运行 `openspec list --specs` 查看现有功能
-
-**创建规范之前：**
-- 始终检查功能是否已存在
-- 优先修改现有规范而不是创建重复项
-- 使用 `openspec show [spec]` 查看当前状态
-- 如果请求模棱两可，请在创建骨架之前询问 1-2 个澄清问题
-
-### 搜索指南
-- 枚举规范：`openspec spec list --long`（或使用 `--json` 用于脚本）
-- 枚举变更：`openspec list`（或 `openspec change list --json` - 已弃用但可用）
-- 显示详细信息：
-  - 规范：`openspec show <spec-id> --type spec`（使用 `--json` 进行过滤）
-  - 变更：`openspec show <change-id> --json --deltas-only`
-- 全文搜索（使用 ripgrep）：`rg -n "Requirement:|Scenario:" openspec/specs`
-
-## 快速开始
-
-### CLI 命令
-
-```bash
-# 基本命令
-openspec list                  # 列出活动变更
-openspec list --specs          # 列出规范
-openspec show [item]           # 显示变更或规范
-openspec validate [item]       # 验证变更或规范
-openspec archive <change-id> [--yes|-y]   # 部署后归档（添加 --yes 以非交互运行）
-
-# 项目管理
-openspec init [path]           # 初始化 OpenSpec
-openspec update [path]         # 更新指令文件
-
-# 交互模式
-openspec show                  # 提示进行选择
-openspec validate              # 批量验证模式
-
-# 调试
-openspec show [change] --json --deltas-only
-openspec validate [change] --strict --no-interactive
-```
-
-### 命令标志
-
-- `--json` - 机器可读输出
-- `--type change|spec` - 消除项目歧义
-- `--strict` - 全面验证
-- `--no-interactive` - 禁用提示
-- `--skip-specs` - 归档而不更新规范
-- `--yes`/`-y` - 跳过确认提示（非交互式归档）
-
-## 目录结构
-
-```
-openspec/
-├── project.md              # 项目约定
-├── specs/                  # 当前事实 - 已构建的内容
-│   └── [capability]/       # 单一专注功能
-│       ├── spec.md         # 需求和场景
-│       └── design.md       # 技术模式
-├── changes/                # 提案 - 应该更改的内容
-│   ├── [change-name]/
-│   │   ├── proposal.md     # 原因、内容、影响
-│   │   ├── tasks.md        # 实施清单
-│   │   ├── design.md       # 技术决策（可选；参见标准）
-│   │   └── specs/          # 增量更改
-│   │       └── [capability]/
-│   │           └── spec.md # ADDED/MODIFIED/REMOVED
-│   └── archive/            # 已完成的变更
-```
-
-## 创建变更提案
-
-### 决策树
-
-```
-新请求？
-├─ 恢复规范行为的错误修复？ → 直接修复
-├─ 拼写错误/格式/注释？ → 直接修复
-├─ 新功能/能力？ → 创建提案
-├─ 破坏性更改？ → 创建提案
-├─ 架构更改？ → 创建提案
-└─ 不清楚？ → 创建提案（更安全）
-```
-
-### 提案结构
-
-1. **创建目录：** `changes/[change-id]/`（kebab-case，动词开头，唯一）
-
-2. **编写 proposal.md：**
-```markdown
-# 变更：[变更简要描述]
-
-## 原因
-[1-2 句话说明问题/机会]
-
-## 变更内容
-- [变更要点列表]
-- [使用 **BREAKING** 标记破坏性更改]
-
-## 影响
-- 受影响的规范：[列出功能]
-- 受影响的代码：[关键文件/系统]
-```
-
-3. **创建规范增量：** `specs/[capability]/spec.md`
-```markdown
-## ADDED Requirements
-### Requirement: 新功能
-系统应提供...
-
-#### Scenario: 成功案例
-- **WHEN** 用户执行操作
-- **THEN** 预期结果
-
-## MODIFIED Requirements
-### Requirement: 现有功能
-[完整的修改后需求]
-
-## REMOVED Requirements
-### Requirement: 旧功能
-**原因**：[为什么删除]
-**迁移**：[如何处理]
-```
-如果影响多个功能，请在 `changes/[change-id]/specs/<capability>/spec.md` 下创建多个增量文件——每个功能一个。
-
-4. **创建 tasks.md：**
-```markdown
-## 1. 实施
-- [ ] 1.1 创建数据库架构
-- [ ] 1.2 实施 API 端点
-- [ ] 1.3 添加前端组件
-- [ ] 1.4 编写测试
-```
-
-5. **在需要时创建 design.md：**
-如果符合以下任一情况，请创建 `design.md`；否则省略：
-- 跨领域更改（多个服务/模块）或新的架构模式
-- 新的外部依赖或重要的数据模型更改
-- 安全性、性能或迁移复杂性
-- 在编码之前受益于技术决策的歧义
-
-最小 `design.md` 骨架：
-```markdown
-## 上下文
-[背景、约束、利益相关者]
-
-## 目标 / 非目标
-- 目标：[...]
-- 非目标：[...]
-
-## 决策
-- 决策：[内容和原因]
-- 考虑的替代方案：[选项 + 理由]
-
-## 风险 / 权衡
-- [风险] → 缓解措施
-
-## 迁移计划
-[步骤、回滚]
-
-## 未解决的问题
-- [...]
-```
-
-## 规范文件格式
-
-### 关键：场景格式
-
-**正确**（使用 #### 标题）：
-```markdown
-#### Scenario: 用户登录成功
-- **WHEN** 提供有效凭据
-- **THEN** 返回 JWT 令牌
-```
-
-**错误**（不要使用项目符号或粗体）：
-```markdown
-- **Scenario: 用户登录**  ❌
-**Scenario**: 用户登录     ❌
-### Scenario: 用户登录      ❌
-```
-
-每个需求必须至少有一个场景。
-
-### 需求措辞
-- 对规范性要求使用 SHALL/MUST（除非有意非规范性，否则避免 should/may）
-
-### 增量操作
-
-- `## ADDED Requirements` - 新功能
-- `## MODIFIED Requirements` - 更改的行为
-- `## REMOVED Requirements` - 已弃用功能
-- `## RENAMED Requirements` - 名称更改
-
-使用 `trim(header)` 匹配标题 - 忽略空格。
-
-#### 何时使用 ADDED vs MODIFIED
-- ADDED：引入可以独立作为需求的新功能或子功能。当更改是正交的（例如，添加"斜杠命令配置"）而不是更改现有需求的语义时，优先使用 ADDED。
-- MODIFIED：更改现有需求的行为、范围或验收标准。始终粘贴完整、更新的需求内容（标题 + 所有场景）。归档器将用您在此处提供的内容替换整个需求；部分增量将丢失先前的详细信息。
-- RENAMED：仅在名称更改时使用。如果您还更改行为，请使用 RENAMED（名称）加上 MODIFIED（内容）引用新名称。
-
-常见错误：使用 MODIFIED 添加新关注点而不包含先前的文本。这会导致归档时丢失详细信息。如果您没有明确更改现有需求，请改为在 ADDED 下添加新需求。
-
-正确编写 MODIFIED 需求：
-1) 在 `openspec/specs/<capability>/spec.md` 中找到现有需求。
-2) 复制整个需求块（从 `### Requirement: ...` 到其场景）。
-3) 将其粘贴到 `## MODIFIED Requirements` 下并编辑以反映新行为。
-4) 确保标题文本完全匹配（不区分空格）并保留至少一个 `#### Scenario:`。
-
-RENAMED 示例：
-```markdown
-## RENAMED Requirements
-- FROM: `### Requirement: Login`
-- TO: `### Requirement: User Authentication`
-```
-
-## 故障排除
-
-### 常见错误
-
-**"Change must have at least one delta"**
-- 检查 `changes/[name]/specs/` 是否存在 .md 文件
-- 验证文件是否具有操作前缀（## ADDED Requirements）
-
-**"Requirement must have at least one scenario"**
-- 检查场景是否使用 `#### Scenario:` 格式（4 个井号）
-- 不要对场景标题使用项目符号或粗体
-
-**静默场景解析失败**
-- 需要精确格式：`#### Scenario: 名称`
-- 使用以下命令调试：`openspec show [change] --json --deltas-only`
-
-### 验证技巧
-
-```bash
-# 始终使用严格模式进行全面检查
-openspec validate [change] --strict --no-interactive
-
-# 调试增量解析
-openspec show [change] --json | jq '.deltas'
-
-# 检查特定需求
-openspec show [spec] --json -r 1
-```
-
-## 理想路径脚本
-
-```bash
-# 1) 探索当前状态
-openspec spec list --long
-openspec list
-# 可选全文搜索：
-# rg -n "Requirement:|Scenario:" openspec/specs
-# rg -n "^#|Requirement:" openspec/changes
-
-# 2) 选择变更 ID 并创建骨架
-CHANGE=add-two-factor-auth
-mkdir -p openspec/changes/$CHANGE/{specs/auth}
-printf "## Why\n...\n\n## What Changes\n- ...\n\n## Impact\n- ...\n" > openspec/changes/$CHANGE/proposal.md
-printf "## 1. Implementation\n- [ ] 1.1 ...\n" > openspec/changes/$CHANGE/tasks.md
-
-# 3) 添加增量（示例）
-cat > openspec/changes/$CHANGE/specs/auth/spec.md << 'EOF'
-## ADDED Requirements
-### Requirement: 双因素认证
-用户在登录期间必须提供第二个因素。
-
-#### Scenario: 需要 OTP
-- **WHEN** 提供有效凭据
-- **THEN** 需要OTP 挑战
-EOF
-
-# 4) 验证
-openspec validate $CHANGE --strict --no-interactive
-```
-
-## 多功能示例
-
-```
-openspec/changes/add-2fa-notify/
-├── proposal.md
-├── tasks.md
-└── specs/
-    ├── auth/
-    │   └── spec.md   # ADDED: 双因素认证
-    └── notifications/
-        └── spec.md   # ADDED: OTP 电子邮件通知
-```
-
-auth/spec.md
-```markdown
-## ADDED Requirements
-### Requirement: 双因素认证
-...
-```
-
-notifications/spec.md
-```markdown
-## ADDED Requirements
-### Requirement: OTP 电子邮件通知
-...
-```
-
-## 最佳实践
-
-### 简单优先
-- 默认小于 100 行新代码
-- 单文件实施，直到被证明不足
-- 避免没有明确理由的框架
-- 选择无聊、经过验证的模式
-
-### 复杂性触发器
-仅在以下情况下添加复杂性：
-- 显示当前解决方案太慢的性能数据
-- 具体的规模要求（>1000 用户，>100MB 数据）
-- 多个经过验证的用例需要抽象
-
-### 清晰参考
-- 使用 `file.ts:42` 格式表示代码位置
-- 将规范引用为 `specs/auth/spec.md`
-- 链接相关变更和 PR
-
-### 功能命名
-- 使用动词-名词：`user-auth`、`payment-capture`
-- 每个功能单一目的
-- 10 分钟可理解规则
-- 如果描述需要"AND"则拆分
-
-### 变更 ID 命名
-- 使用 kebab-case，简短且描述性：`add-two-factor-auth`
-- 优先使用动词开头的前缀：`add-`、`update-`、`remove-`、`refactor-`
-- 确保唯一性；如果已占用，请附加 `-2`、`-3` 等
-
-## 工具选择指南
-
-| 任务 | 工具 | 原因 |
-|------|------|-----|
-| 按模式查找文件 | Glob | 快速模式匹配 |
-| 搜索代码内容 | Grep | 优化的正则表达式搜索 |
-| 读取特定文件 | Read | 直接文件访问 |
-| 探索未知范围 | Task | 多步骤调查 |
-
-## 错误恢复
-
-### 变更冲突
-1. 运行 `openspec list` 查看活动变更
-2. 检查重叠的规范
-3. 与变更所有者协调
-4. 考虑合并提案
-
-### 验证失败
-1. 使用 `--strict` 标志运行
-2. 检查 JSON 输出以了解详细信息
-3. 验证规范文件格式
-4. 确保场景格式正确
-
-### 缺少上下文
-1. 首先阅读 project.md
-2. 检查相关规范
-3. 查看最近的归档
-4. 请求澄清
-
-## 快速参考
-
-### 阶段指示器
-- `changes/` - 已提议，尚未构建
-- `specs/` - 已构建和部署
-- `archive/` - 已完成的变更
-
-### 文件用途
-- `proposal.md` - 原因和内容
-- `tasks.md` - 实施步骤
-- `design.md` - 技术决策
-- `spec.md` - 需求和行为
-
-### CLI 要点
-```bash
-openspec list              # 正在进行什么？
-openspec show [item]       # 查看详细信息
-openspec validate --strict --no-interactive  # 正确吗？
-openspec archive <change-id> [--yes|-y]  # 标记完成（添加 --yes 以实现自动化）
-```
-
-记住：规范是事实。变更是提案。保持它们同步。
diff --git a/openspec/changes/add-i18n-support/design.md b/openspec/changes/add-i18n-support/design.md
deleted file mode 100644
index 66bca90..0000000
--- a/openspec/changes/add-i18n-support/design.md
+++ /dev/null
@@ -1,246 +0,0 @@
-# Design: i18n Implementation Architecture
-
-## Context
-
-Claude Code UI is a React-based web application with ~50 components, currently serving English-speaking users only. The application uses:
-- React 18 with functional components and hooks
-- Context-based state management (AuthContext, ThemeContext, etc.)
-- localStorage for user preferences
-- Vite for bundling
-
-**Constraints:**
-- Must not impact performance (bundle size, runtime overhead)
-- Must support hot-reload during development
-- Must allow switching language without page reload
-- Must be extensible for additional languages in the future
-
-**Stakeholders:**
-- End users: Need intuitive language switching
-- Developers: Need easy translation management workflow
-- Maintainers: Need to keep translations synchronized
-
-## Goals / Non-Goals
-
-**Goals:**
-1. Implement production-ready i18n using `react-i18next`
-2. Support English (en) and Simplified Chinese (zh-CN) in Phase 1
-3. Provide language selector in Settings > Account
-4. Store user language preference in localStorage
-5. Extract and translate top 100 most common UI strings in Phase 1
-6. Create reusable translation namespace structure
-
-**Non-Goals:**
-1. Translate AI-generated content (chat messages, code responses)
-2. Translate backend error logs or terminal output
-3. Implement server-side translation
-4. Create translation management web UI
-5. Add RTL (Right-to-Left) language support
-
-## Decisions
-
-### Decision 1: Use react-i18next Library
-
-**Rationale:**
-- Industry-standard for React internationalization (2.5M weekly downloads)
-- Built-in hooks (`useTranslation`) compatible with React 18
-- Supports interpolation, plurals, date/number formatting
-- Excellent TypeScript support (even though we use JS)
-- Lazy-loading and code-splitting for translations
-- Active community and long-term viability
-
-**Alternatives Considered:**
-- **Format.js (React Intl)**: More complex setup, larger bundle size
-- **Lingui**: Compile-time approach, requires Babel plugin, over-engineering for our needs
-- **Custom solution**: Would require building interpolation, plurals, date formatting from scratch
-
-### Decision 2: Namespace-Based Translation Structure
-
-**Structure:**
-```
-src/i18n/
-├── locales/
-│   ├── en/
-│   │   ├── common.json      # Shared UI strings
-│   │   ├── settings.json    # Settings page
-│   │   ├── auth.json        # Login/Auth
-│   │   └── sidebar.json     # Navigation/Sidebar
-│   └── zh-CN/
-│       ├── common.json
-│       ├── settings.json
-│       ├── auth.json
-│       └── sidebar.json
-├── config.js                # i18next configuration
-└── ReactSuspense.js         # Lazy-loading wrapper
-```
-
-**Rationale:**
-- Namespace-based approach aligns with feature boundaries
-- Smaller files = easier to manage translations
-- Supports code-splitting (load only needed namespaces)
-- Scalable for future languages
-
-### Decision 3: Language Preference Storage in localStorage
-
-**Rationale:**
-- Consistent with existing preferences (theme, code editor settings)
-- No backend changes required
-- Instant sync across tabs
-- Works in offline mode
-
-**Storage Key:** `userLanguage`
-**Default Value:** `'en'` (English)
-**Valid Values:** `'en'`, `'zh-CN'`
-
-### Decision 4: Translation Key Naming Convention
-
-**Pattern:** `{namespace}.{component}.{element}.{state}`
-
-**Examples:**
-- `common.buttons.save` → "Save"
-- `common.buttons.cancel` → "Cancel"
-- `settings.account.language.label` → "Language"
-- `auth.login.title` → "Sign In"
-- `sidebar.projects.new` → "New Project"
-
-**Rationale:**
-- Hierarchical structure mirrors component tree
-- Easy to locate translation key in code
-- Prevents naming collisions across namespaces
-- Self-documenting
-
-### Decision 5: Fallback Strategy
-
-**Fallback Chain:**
-1. User's selected language (e.g., `zh-CN`)
-2. English (`en`) as default fallback
-3. Return translation key if not found in any language
-
-**Configuration:**
-```javascript
-fallbackLng: 'en',
-debug: false, // Set true in development to log missing keys
-saveMissing: false, // Don't auto-create missing keys (manual review required)
-```
-
-**Rationale:**
-- English is source language, guaranteed to have all keys
-- Showing translation key in production is better than blank text
-- Manual review prevents typo propagation
-
-## Risks / Trade-offs
-
-### Risk 1: Bundle Size Increase
-
-**Impact:** Initial bundle may increase by ~30KB (gzip) for react-i18next + translations
-
-**Mitigation:**
-- Use code-splitting to load translations per namespace
-- Enable tree-shaking for unused languages
-- Target Phase 1: Top 100 strings only
-
-**Monitoring:**
-```bash
-npm run build
-# Check dist/ size before/after
-```
-
-### Risk 2: Missing Translations at Runtime
-
-**Impact:** Users may see English text mixed with Chinese
-
-**Mitigation:**
-- Use `useTranslation` with `{ fallbackLng: 'en' }`
-- Implement `missingKeyHandler` to log missing keys in development
-- Create translation coverage report in CI
-
-### Risk 3: Translation Synchronization Debt
-
-**Impact:** New features may forget to add translations
-
-**Mitigation:**
-- Add ESLint rule to detect hardcoded strings in JSX
-- Include i18n checklist in PR template
-- Document translation workflow in CLAUDE.md
-
-### Risk 4: Context-Aware Translations
-
-**Example:** "Save" could mean:
-- Save file (保存文件)
-- Save money (节省)
-- Rescue (救援)
-
-**Mitigation:**
-- Use descriptive keys: `common.buttons.saveFile` vs `common.buttons.saveMoney`
-- Add context comments for translators: `{{context}} "Save file to disk"`
-
-## Migration Plan
-
-### Phase 1: Infrastructure Setup (Day 1)
-
-1. Install `react-i18next` and `i18next`
-2. Create `src/i18n/` directory structure
-3. Configure i18next with lazy-loading
-4. Add I18nextProvider to App.jsx
-5. Create translation resource files (en, zh-CN)
-
-### Phase 2: Core UI Translation (Day 2-3)
-
-**Priority Order:**
-1. Common buttons and labels (Save, Cancel, Delete, Create)
-2. Navigation elements (Settings, menus)
-3. Settings page
-4. Auth/Login pages
-5. Sidebar labels
-
-**Process per component:**
-1. Replace hardcoded strings with `useTranslation()` hook
-2. Add translation key to JSON files
-3. Verify English still works
-4. Add Chinese translation
-5. Test language switching
-
-### Phase 3: Language Selector (Day 3)
-
-1. Add language dropdown to `AccountContent.jsx`
-2. Implement `changeLanguage()` handler
-3. Save preference to localStorage
-4. Test reload persistence
-
-### Phase 4: Validation (Day 4)
-
-1. Manual testing of all translated components
-2. Check for missing keys (console warnings)
-3. Test language switching in both directions
-4. Verify localStorage persistence
-5. Test mobile responsive layout with longer Chinese text
-
-### Rollback Plan
-
-If critical issues arise:
-1. Revert to commit before i18n changes
-2. Keep translation files for future retry
-3. Document blockers for next attempt
-
-**Rollback Command:**
-```bash
-git revert <i18n-commit-hash>
-npm install
-```
-
-## Open Questions
-
-1. **Should we add TypeScript support for translations?**
-   - Current: No, project uses JavaScript
-   - Future consideration: Migrate to TypeScript for better type safety
-
-2. **Should we integrate with translation management platform (e.g., Crowdin, Lokalise)?**
-   - Current decision: No, manual JSON editing is sufficient for 2 languages
-   - Future: Consider when adding 3+ languages or external translators
-
-3. **Should we format dates and numbers according to locale?**
-   - Current decision: No, keep ISO format for simplicity
-   - Future: Use `i18next-intlplural` if users request localized dates
-
-4. **How to handle pluralization in Chinese (which doesn't have plurals)?**
-   - Solution: Use same translation for singular/plural forms
-   - Example: `"1 file"` → `"1 个文件"`, `"2 files"` → `"2 个文件"`
diff --git a/openspec/changes/add-i18n-support/proposal.md b/openspec/changes/add-i18n-support/proposal.md
deleted file mode 100644
index 266430e..0000000
--- a/openspec/changes/add-i18n-support/proposal.md
+++ /dev/null
@@ -1,51 +0,0 @@
-# Change: Add i18n Internationalization Support
-
-## Why
-
-The application currently has all UI text hardcoded in English, which limits accessibility for non-English speaking users. Adding internationalization (i18n) support will enable the application to serve a broader user base, particularly Chinese-speaking users who form a significant portion of the AI development community. This will improve user experience and adoption by allowing users to interact with the application in their preferred language.
-
-## What Changes
-
-- **BREAKING**: Add `react-i18next` dependency and configure i18n infrastructure
-- Add `I18nextProvider` wrapper in App.jsx
-- Create translation resource files for English (en) and Simplified Chinese (zh-CN)
-- Extract and translate core UI text (menus, buttons, labels, error messages)
-- Add language selector in Settings > Account section
-- Store user language preference in localStorage
-- Implement language switching without page reload
-- Create translation namespace structure for scalable management
-
-**Scope - Phase 1 (Progressive Translation):**
-- Navigation elements (Settings, menus, buttons)
-- Common UI labels (Save, Cancel, Delete, Create, Loading, Error messages)
-- Settings page labels and descriptions
-- Login/Auth related text
-- Sidebar labels (Projects, Sessions, Files)
-
-**Out of Scope - Phase 1:**
-- AI-generated content (chat messages, responses)
-- Developer-facing error logs
-- Documentation and help text
-- Terminal/shell output
-
-## Impact
-
-- **Affected specs:**
-  - `i18n` (NEW capability) - Internationalization system
-  - `user-interface` (NEW capability) - Language-aware UI components
-
-- **Affected code:**
-  - `src/main.jsx` - Add i18n initialization
-  - `src/App.jsx` - Wrap with I18nextProvider
-  - `src/components/Settings.jsx` - Add language selector
-  - `src/components/settings/AccountContent.jsx` - Language preference UI
-  - All UI components - Replace hardcoded text with translation keys
-  - `src/i18n/` (NEW) - Translation resources and configuration
-  - `package.json` - Add react-i18next dependency
-
-- **Affected database:** None (language preference stored in localStorage)
-
-- **Migration:**
-  - No data migration required
-  - Default language: English (fallback for missing translations)
-  - User preference stored in `localStorage.getItem('userLanguage')`
diff --git a/openspec/changes/add-i18n-support/specs/i18n/spec.md b/openspec/changes/add-i18n-support/specs/i18n/spec.md
deleted file mode 100644
index b93ecff..0000000
--- a/openspec/changes/add-i18n-support/specs/i18n/spec.md
+++ /dev/null
@@ -1,202 +0,0 @@
-# i18n Capability Specification (Delta)
-
-## ADDED Requirements
-
-### Requirement: Translation Infrastructure
-
-The system SHALL provide internationalization (i18n) infrastructure using react-i18next library to support multiple languages for user-facing text.
-
-#### Scenario: Initialize i18n on application startup
-- **WHEN** the application starts
-- **THEN** the system SHALL initialize i18next with configuration
-- **AND** load translation resources for English (en) and Chinese (zh-CN)
-- **AND** set default language to English
-- **AND** detect saved language preference from localStorage
-
-#### Scenario: Load translation namespaces lazily
-- **WHEN** a component requires translations
-- **THEN** the system SHALL load only the required namespace (e.g., 'common', 'settings')
-- **AND** cache loaded namespaces for subsequent access
-- **AND** show loading state only during initial load
-
-### Requirement: Language Selection and Persistence
-
-The system SHALL allow users to select their preferred language and persist this preference across sessions.
-
-#### Scenario: User selects language in Settings
-- **WHEN** user navigates to Settings > Account > Language selector
-- **THEN** the system SHALL display available languages: English and 简体中文
-- **AND** show currently selected language as default
-- **AND** allow user to change selection
-
-#### Scenario: System saves language preference
-- **WHEN** user selects a new language from dropdown
-- **THEN** the system SHALL immediately change application language
-- **AND** save selection to `localStorage.setItem('userLanguage', '<language>')`
-- **AND** refresh all translated components without page reload
-
-#### Scenario: System restores language preference on startup
-- **WHEN** user returns to application after closing
-- **THEN** the system SHALL read `localStorage.getItem('userLanguage')`
-- **AND** initialize i18n with saved language
-- **AND** default to English if no preference is saved
-
-### Requirement: Translation Resource Structure
-
-The system SHALL organize translation resources in namespace-based JSON files under `src/i18n/locales/{language}/`.
-
-#### Scenario: Translation file organization
-- **WHEN** developers add new translations
-- **THEN** translations SHALL be organized by namespace: `common.json`, `settings.json`, `auth.json`, `sidebar.json`
-- **AND** each namespace SHALL contain hierarchical keys with dot notation
-- **AND** each key SHALL have corresponding translations in all supported languages
-
-**Example structure:**
-```json
-{
-  "buttons": {
-    "save": "Save",
-    "cancel": "Cancel",
-    "delete": "Delete"
-  },
-  "status": {
-    "loading": "Loading...",
-    "success": "Success",
-    "error": "Error"
-  }
-}
-```
-
-#### Scenario: Translation key naming convention
-- **WHEN** developers create new translation keys
-- **THEN** keys SHALL follow pattern: `{namespace}.{component}.{element}.{state}`
-- **AND** use descriptive names to avoid ambiguity
-- **AND** avoid abbreviations except for common UI terms (btn, lbl, msg)
-
-**Examples:**
-- `common.buttons.save` ✓
-- `settings.account.language.label` ✓
-- `auth.login.title` ✓
-- `btn.save` ✗ (too generic)
-- `msg` ✗ (too vague)
-
-### Requirement: Fallback Translation Strategy
-
-The system SHALL provide fallback translations when a translation key is missing in the user's preferred language.
-
-#### Scenario: Missing translation in selected language
-- **WHEN** a translation key does not exist in Chinese (zh-CN)
-- **THEN** the system SHALL fall back to English (en) translation
-- **AND** log warning in development console
-- **AND** display English text to user
-
-#### Scenario: Missing translation in all languages
-- **WHEN** a translation key does not exist in any language
-- **THEN** the system SHALL display the translation key itself (e.g., `common.buttons.save`)
-- **AND** log error in development console
-- **AND** NOT break the application or crash
-
-### Requirement: Component Translation Integration
-
-The system SHALL provide React components and hooks for translating UI text.
-
-#### Scenario: Functional component uses useTranslation hook
-- **WHEN** a functional component needs translations
-- **THEN** the component SHALL use `useTranslation()` hook from react-i18next
-- **AND** specify namespace: `useTranslation('common')`
-- **AND** call `t()` function with translation key
-- **AND** automatically re-render when language changes
-
-**Example:**
-```javascript
-import { useTranslation } from 'react-i18next';
-
-function SaveButton() {
-  const { t } = useTranslation('common');
-  return <button>{t('buttons.save')}</button>;
-}
-```
-
-#### Scenario: Component with interpolation
-- **WHEN** a translation contains dynamic values (e.g., username, file count)
-- **THEN** the translation SHALL use interpolation syntax: `{{variableName}}`
-- **AND** the component SHALL pass variables to `t()` function
-- **AND** the system SHALL insert values into translated string
-
-**Example:**
-```json
-{
-  "welcome": "Welcome, {{username}}!",
-  "fileCount": "You have {{count}} files"
-}
-```
-
-```javascript
-const { t } = useTranslation('common');
-t('welcome', { username: 'Alice' });  // "Welcome, Alice!"
-t('fileCount', { count: 5 });        // "You have 5 files"
-```
-
-### Requirement: Excluded Content from Translation
-
-The system SHALL NOT translate certain types of content to preserve accuracy and developer experience.
-
-#### Scenario: AI-generated content remains untranslated
-- **WHEN** AI assistant generates chat messages, code, or responses
-- **THEN** the content SHALL remain in original language (usually English)
-- **AND** NOT be processed by translation system
-
-#### Scenario: Developer-facing logs remain in English
-- **WHEN** the application logs errors, warnings, or debug information
-- **THEN** log messages SHALL remain in English
-- **AND** NOT be translated to maintain debugging consistency
-
-#### Scenario: Terminal/shell output remains as-is
-- **WHEN** the application displays terminal or shell output
-- **THEN** the output SHALL remain in original language
-- **AND** NOT be modified by translation system
-
-### Requirement: Performance and Bundle Size
-
-The system SHALL minimize the impact of i18n on application bundle size and runtime performance.
-
-#### Scenario: Code-splitting for translation files
-- **WHEN** the application is built for production
-- **THEN** translation files SHALL be split by language and namespace
-- **AND** loaded only when needed (lazy-loading)
-- **AND** increase bundle size by less than 50KB (gzip)
-
-#### Scenario: No performance regression on language switch
-- **WHEN** user changes language preference
-- **THEN** the system SHALL update UI within 100ms
-- **AND** NOT require full page reload
-- **AND** maintain smooth user experience
-
-### Requirement: Developer Experience
-
-The system SHALL provide tools and guidelines for contributors to add and maintain translations.
-
-#### Scenario: Detecting missing translations in development
-- **WHEN** a developer references a non-existent translation key
-- **THEN** the system SHALL log warning in browser console
-- **AND** display translation key in UI with warning styling
-- **AND** NOT break the build process
-
-#### Scenario: Documentation for contributors
-- **WHEN** a contributor needs to add new translations
-- **THEN** CLAUDE.md SHALL document i18n workflow
-- **AND** provide examples of correct translation key usage
-- **AND** list translation naming conventions
-- **AND** explain how to add new languages
-
-## MODIFIED Requirements
-
-*N/A - This is a new capability, no existing requirements are modified.*
-
-## REMOVED Requirements
-
-*N/A - This is a new capability, no existing requirements are removed.*
-
-## RENAMED Requirements
-
-*N/A - This is a new capability, no existing requirements are renamed.*
diff --git a/openspec/changes/add-i18n-support/specs/user-interface/spec.md b/openspec/changes/add-i18n-support/specs/user-interface/spec.md
deleted file mode 100644
index da9db7d..0000000
--- a/openspec/changes/add-i18n-support/specs/user-interface/spec.md
+++ /dev/null
@@ -1,176 +0,0 @@
-# User Interface Capability Specification (Delta)
-
-## ADDED Requirements
-
-### Requirement: Language-Aware UI Components
-
-All user-facing UI components SHALL support internationalization and display translated text based on user's language preference.
-
-#### Scenario: Settings page displays translated labels
-- **WHEN** user opens Settings page
-- **THEN** all section labels (Account, Permissions, MCP Servers, Appearance) SHALL be translated
-- **AND** button labels (Save, Cancel, Delete) SHALL be translated
-- **AND** description text SHALL be translated
-- **AND** technical terms (e.g., JWT, API, SSH) may remain in English if no common translation exists
-
-#### Scenario: Sidebar displays translated navigation
-- **WHEN** user views sidebar navigation
-- **THEN** section headers (Projects, Sessions) SHALL be translated
-- **AND** action buttons (New Project, Refresh, Settings) SHALL be translated
-- **AND** status messages (Loading, Error) SHALL be translated
-
-#### Scenario: Login form displays translated text
-- **WHEN** user views login form
-- **THEN** form labels (Username, Password) SHALL be translated
-- **AND** button text (Sign In, Create Account) SHALL be translated
-- **AND** validation messages (Invalid credentials, Required field) SHALL be translated
-- **AND** error messages SHALL be translated
-
-#### Scenario: File operations show translated prompts
-- **WHEN** user performs file operations (Save, Delete, Rename)
-- **THEN** confirmation dialogs SHALL be translated
-- **AND** success messages SHALL be translated
-- **AND** error messages SHALL be translated
-
-### Requirement: Language Selector in Settings
-
-The Settings > Account section SHALL provide a language selector dropdown allowing users to choose their preferred language.
-
-#### Scenario: Language selector displays current language
-- **WHEN** user navigates to Settings > Account
-- **THEN** a language selector dropdown SHALL be visible
-- **AND** display label: "Language" (or translated equivalent)
-- **AND** show currently selected language as default value
-- **AND** list available options: English, 简体中文
-
-#### Scenario: Language selector updates preference
-- **WHEN** user selects a different language from dropdown
-- **THEN** the system SHALL immediately change application language
-- **AND** show loading indicator if translations are being loaded
-- **AND** refresh all UI components with new language
-- **AND** save preference to localStorage
-- **AND** display success message: "Language changed successfully"
-
-#### Scenario: Language selector persists across sessions
-- **WHEN** user returns to application after closing
-- **THEN** the language selector SHALL display the previously selected language
-- **AND** the application UI SHALL be in the selected language
-- **AND** the selector SHALL not show "Language" as default if user previously chose Chinese
-
-### Requirement: Responsive Layout for Translated Text
-
-UI components SHALL accommodate varying text lengths across languages without breaking layout or readability.
-
-#### Scenario: Chinese text fits in buttons
-- **WHEN** UI is displayed in Chinese (which often has longer text than English)
-- **THEN** buttons SHALL expand to fit translated text
-- **AND** text SHALL NOT overflow or wrap awkwardly
-- **AND** button heights SHALL remain consistent
-
-#### Scenario: Mobile layout handles longer translations
-- **WHEN** application is viewed on mobile device with Chinese language
-- **THEN** navigation menus SHALL accommodate longer text labels
-- **AND** sidebar items SHALL not truncate important text
-- **AND** layout SHALL remain responsive and touch-friendly
-
-#### Scenario: Tables and lists maintain alignment
-- **WHEN** table headers or list items are translated
-- **THEN** column widths SHALL adjust to fit translated content
-- **AND** text alignment SHALL remain appropriate (left-to-right for both languages)
-- **AND** content SHALL remain readable without horizontal scrolling
-
-### Requirement: Error and Status Messages
-
-All error messages, success notifications, and status indicators SHALL be translated to provide clear feedback in user's preferred language.
-
-#### Scenario: Error messages are translated
-- **WHEN** an error occurs (e.g., network failure, validation error)
-- **THEN** error message SHALL be displayed in user's selected language
-- **AND** technical error codes MAY remain in English
-- **AND** suggestions for resolution SHALL be translated
-
-#### Scenario: Success notifications are translated
-- **WHEN** an operation completes successfully (e.g., file saved, settings updated)
-- **THEN** success message SHALL be displayed in user's selected language
-- **AND** action buttons in notification (e.g., "Dismiss") SHALL be translated
-
-#### Scenario: Loading states are translated
-- **WHEN** application shows loading indicator
-- **THEN** loading text SHALL be in user's selected language (e.g., "Loading..." vs "加载中...")
-- **AND** progress messages SHALL be translated
-
-#### Scenario: Validation messages are translated
-- **WHEN** user submits form with invalid data
-- **THEN** validation error SHALL be in user's selected language
-- **AND** field-specific hints SHALL be translated
-- **AND** placeholder text SHALL be translated
-
-### Requirement: Accessibility with Translations
-
-Translated UI SHALL maintain accessibility standards including screen reader compatibility and keyboard navigation.
-
-#### Scenario: Screen readers announce translated text
-- **WHEN** screen reader user navigates UI
-- **THEN** screen reader SHALL announce translated text correctly
-- **AND** language attribute SHALL be set on HTML element: `<html lang="zh-CN">`
-- **AND** dynamic language changes SHALL update lang attribute
-
-#### Scenario: Keyboard navigation works with translated labels
-- **WHEN** user navigates with keyboard
-- **THEN** all interactive elements SHALL be accessible via Tab key
-- **AND** focus indicators SHALL be visible regardless of text length
-- **AND** keyboard shortcuts SHALL work consistently across languages
-
-### Requirement: Date and Number Formatting
-
-The system SHALL format dates, numbers, and other locale-specific data according to user's language preference.
-
-#### Scenario: Dates are formatted for locale
-- **WHEN** application displays dates (e.g., file modification time, session creation time)
-- **THEN** dates SHALL be formatted according to locale conventions
-- **AND** Chinese users see: 2025年1月16日
-- **AND** English users see: January 16, 2025
-
-#### Scenario: Numbers are formatted for locale
-- **WHEN** application displays numbers (e.g., token usage, file sizes)
-- **THEN** numbers SHALL use appropriate digit grouping symbols
-- **AND** Chinese users see: 1,234 (comma separator)
-- **AND** decimal separators match locale preference
-
-#### Scenario: File sizes are human-readable
-- **WHEN** application displays file sizes
-- **THEN** sizes SHALL be formatted with appropriate units (KB, MB, GB)
-- **AND** unit labels SHALL be translated (e.g., "KB" vs "千字节")
-- **AND** formatting shall be consistent across languages
-
-## MODIFIED Requirements
-
-### Requirement: Settings Page Navigation
-
-The Settings page SHALL provide tabs for Account, Permissions, MCP Servers, and Appearance settings. All tab labels, section headers, and descriptions SHALL be translated based on user's language preference. The Account tab SHALL include a language selector dropdown that allows users to choose between English and Simplified Chinese.
-
-#### Scenario: Navigate Settings with translated labels
-- **WHEN** user opens Settings page
-- **THEN** all navigation elements SHALL be in user's selected language
-- **AND** tab labels SHALL be translated (Account → 账户, Permissions → 权限)
-- **AND** active tab SHALL be visually indicated
-- **AND** language selector SHALL be visible in Account tab
-
-### Requirement: Onboarding Flow
-
-New users SHALL see onboarding wizard explaining application features. All onboarding text, instructions, and button labels SHALL be translated based on user's language preference. The wizard SHALL automatically detect user's system language when possible.
-
-#### Scenario: Onboarding in selected language
-- **WHEN** new user first launches application
-- **THEN** onboarding wizard SHALL detect system language or default to English
-- **AND** all wizard text SHALL be translated
-- **AND** user may change language during onboarding via language selector
-- **AND** language preference SHALL persist after onboarding completes
-
-## REMOVED Requirements
-
-*N/A - No requirements are removed, only enhanced with i18n support.*
-
-## RENAMED Requirements
-
-*N/A - No requirements are renamed.*
diff --git a/openspec/project.md b/openspec/project.md
deleted file mode 100644
index 28e50fc..0000000
--- a/openspec/project.md
+++ /dev/null
@@ -1,285 +0,0 @@
-# Project Context
-
-## Purpose
-
-Claude Code UI (aka Cloud CLI) is a full-stack web application that provides a responsive desktop and mobile interface for [Claude Code CLI](https://docs.anthropic.com/en/docs/claude-code), [Cursor CLI](https://docs.cursor.com/en/cli/overview), and [OpenAI Codex](https://developers.openai.com/codex). It enables users to interact with their AI programming assistants from any device through a browser, providing a seamless cross-device experience for AI-powered development workflows.
-
-**Key Goals:**
-- Provide universal access to AI CLI tools from any device (desktop, tablet, mobile)
-- Enable real-time chat and terminal interactions with AI assistants
-- Offer integrated file browsing, code editing, and Git operations
-- Support session management and conversation resumption
-- Maintain security through authentication and tool permission systems
-
-## Tech Stack
-
-### Frontend
-- **React 18** - Functional components with hooks
-- **Vite 7** - Fast build tool with hot module replacement
-- **React Router v6** - Client-side routing
-- **Tailwind CSS 3** - Utility-first styling with custom components
-- **CodeMirror 6** - Code editing with syntax highlighting (JavaScript, Python, JSON, Markdown, CSS, HTML)
-- **Xterm.js 5** - Terminal emulation with WebGL rendering
-- **React Markdown** - Markdown rendering with KaTeX math support
-- **Lucide React** - Icon library
-
-### Backend
-- **Node.js** (v20+) - ES modules (type: "module")
-- **Express.js 4** - REST API server
-- **WebSocket (ws 8)** - Real-time bidirectional communication
-- **SQLite (better-sqlite3 12)** - Embedded database for users, sessions, settings
-- **JWT (jsonwebtoken 9)** - Authentication tokens
-- **bcrypt 6** - Password hashing
-- **node-pty 1** - Pseudo-terminal for shell sessions
-
-### AI SDKs
-- **@anthropic-ai/claude-agent-sdk 0.1.x** - Direct Claude integration
-- **@openai/codex-sdk 0.75.x** - OpenAI Codex integration
-- **child process spawning** - Cursor CLI integration
-
-### DevOps
-- **concurrently** - Run frontend and backend in parallel
-- **Vite** - Build system with manual chunk splitting
-- **auto-changelog** - Automated CHANGELOG generation
-- **release-it** - Release automation
-
-### Database
-- **SQLite** with three main tables:
-  - `users` - Authentication and user settings
-  - `api_keys` - External API key management
-  - `user_credentials` - Stored service credentials (GitHub, GitLab, etc.)
-
-## Project Conventions
-
-### Code Style
-
-#### JavaScript/React (Frontend)
-- **ES Modules** - All imports use `.js` or `.jsx` extensions explicitly
-- **Functional Components** - React components are functional with hooks (no class components)
-- **File Naming**:
-  - Components: PascalCase (e.g., `ChatInterface.jsx`, `Settings.jsx`)
-  - Utilities: camelCase (e.g., `api.js`, `websocket.js`)
-  - Hooks: camelCase with `use` prefix (e.g., `useAudioRecorder.js`, `useLocalStorage.jsx`)
-- **Imports**: Organized in groups (React, third-party, relative imports)
-- **JSX**: Single quotes for attributes, double quotes for strings
-- **Component Organization**:
-  - Hooks at top level
-  - Event handlers after hooks
-  - Render helpers at bottom
-  - Main render return at end
-
-#### JavaScript (Backend)
-- **ES Modules** - All files use `.js` extension with import/export
-- **Async/Await** - Preferred over callbacks for async operations
-- **Error Handling** - Try-catch blocks for file I/O, process spawning, database operations
-- **Comments**: JSDoc-style for modules and key functions
-- **Constants**: UPPER_SNAKE_CASE (e.g., `TOOL_APPROVAL_TIMEOUT_MS`, `CONTEXT_WINDOW`)
-
-#### Code Comments
-- **Block comments** (`/* */`) for file headers and complex logic explanations
-- **Line comments** (`//`) for inline explanations
-- **TODO/FIXME** markers for pending work
-- **Session Protection comments** use multi-line header format for critical integration points
-
-### Architecture Patterns
-
-#### Frontend Architecture
-- **Component Hierarchy**: `App.jsx` → Context Providers → Page Components → UI Components
-- **Context-based State Management**:
-  - `AuthContext` - User authentication state
-  - `WebSocketContext` - WebSocket connection management
-  - `ThemeContext` - Dark/light mode
-  - `TaskMasterContext` - Task management state
-  - `TasksSettingsContext` - Task settings persistence
-- **Custom Hooks** for reusable logic (e.g., `useAudioRecorder`, `useLocalStorage`)
-- **Protected Routes** - `ProtectedRoute` component wraps authenticated pages
-- **Error Boundaries** - `ErrorBoundary` wraps main app for graceful failure
-
-#### Backend Architecture
-- **Express Middleware Chain**:
-  1. CORS (cross-origin requests)
-  2. JSON body parser
-  3. JWT authentication (`middleware/auth.js`)
-  4. Route handlers
-- **Modular Routes** - Each feature has its own router in `routes/` directory
-- **Session Management**:
-  - In-memory `activeSessions` Maps per provider (Claude, Cursor, Codex)
-  - PTY sessions cached in `ptySessionsMap` with 30-minute timeout
-  - Session resumption via `sessionId` parameter
-- **WebSocket Handlers**:
-  - `/ws` - Chat and AI assistant communication
-  - `/shell` - Terminal/shell access with PTY spawning
-- **Error Handling**:
-  - Path validation prevents directory traversal
-  - Try-catch wrapping for process spawning
-  - WebSocket errors logged but don't crash server
-
-#### Communication Patterns
-- **REST API** - Standard HTTP methods for CRUD operations
-- **WebSocket Message Flow**:
-  1. Client sends command with options (projectPath, sessionId, etc.)
-  2. Server invokes SDK/CLI integration
-  3. Responses streamed via `writer.send()` with message type markers
-  4. UI renders based on message type (content, tool_use, error, etc.)
-- **Message Types**: `claude-command`, `cursor-command`, `codex-command`, `abort-session`, `claude-permission-response`
-
-### Testing Strategy
-
-**Current Status**: No formal test suite exists. Manual testing focuses on:
-- Multi-provider session management (Claude, Cursor, Codex)
-- WebSocket connection reliability
-- File operations security
-- Terminal session persistence
-- Cross-device responsiveness
-
-**Testing Guidelines** (for future tests):
-- Test WebSocket reconnection scenarios
-- Verify file system path validation (directory traversal prevention)
-- Test tool permission approval flows
-- Validate session resumption across providers
-- Test concurrent sessions and PTY cleanup
-- Verify database migrations and schema changes
-
-### Git Workflow
-
-#### Branching Strategy
-- **main** - Production-ready code, always deployable
-- **feature/*** - New features (e.g., `feat/show-grant-permission-button`)
-- **fix/*** - Bug fixes (e.g., `fix/server-crash-when-opening-settings`)
-- **Merge commits** - Pull requests merged with merge commits (not rebase)
-
-#### Commit Message Conventions
-Based on recent commit history:
-- **feat:** - New features (e.g., "feat: add Bash command approval handling")
-- **fix:** - Bug fixes (e.g., "fix: normalize file path handling")
-- **Merge pull request #XXX** - PR merges (automated)
-- **Merge branch** - Branch merges (automated)
-
-**Commit Message Format**:
-```
-type: brief description
-
-Optional detailed explanation with multiple lines.
-
-Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
-```
-
-#### Release Process
-1. Update version in `package.json`
-2. Run `npm run release` (triggers `release-it`)
-3. Auto-generated CHANGELOG via `auto-changelog`
-4. Tag and push to GitHub repository
-
-## Domain Context
-
-### AI CLI Tools Integration
-
-#### Claude Code
-- **Session Location**: `~/.claude/projects/[encoded-path]/`
-- **Models**: Claude Sonnet 4.5, Opus 4.5 (see `shared/modelConstants.js`)
-- **Tool Permissions**: All tools **disabled by default** for security
-- **Approval Timeout**: 55 seconds (configurable via `CLAUDE_TOOL_APPROVAL_TIMEOUT_MS`)
-- **SDK Integration**: Direct SDK usage (no child processes) for better performance
-
-#### Cursor CLI
-- **Session Location**: `~/.cursor/projects/`
-- **Integration**: Child process spawning (`cursor-agent` command)
-- **Resume Support**: `--resume` parameter for session continuation
-
-#### OpenAI Codex
-- **Session Location**: `~/.codex/sessions/` (JSONL format)
-- **Token Usage**: Tracked and displayed in UI
-- **Integration**: `@openai/codex-sdk` with session file parsing
-
-### Project Discovery
-Projects auto-discovered from provider-specific directories using:
-- `extractProjectDirectory()` - Resolves encoded project paths
-- `getFileTree()` - Generates file tree structure for browsing
-- `chokidar` - File watcher for live updates
-
-### File System Security
-All file operations validate paths are within project root:
-```javascript
-const normalizedRoot = path.resolve(projectRoot) + path.sep;
-if (!resolved.startsWith(normalizedRoot)) {
-    return res.status(403).json({ error: 'Path must be under project root' });
-}
-```
-
-### Session Protection System
-Prevents sidebar project updates from interrupting active chat sessions:
-- User sends message → Session marked as **active**
-- Claude completes → Session marked as **inactive**
-- Session aborted → Session marked as **inactive**
-- App.jsx pauses sidebar updates when session is **active**
-
-## Important Constraints
-
-### Technical Constraints
-- **Node.js Version**: Minimum v20 required (ES modules, crypto.randomUUID())
-- **Single User System**: Database designed for single-user instance (not multi-tenant)
-- **In-Memory State**: Active sessions and tool approvals don't persist across restarts
-- **No Native Notifications**: Uses in-app UI for all alerts
-- **Tool Approval Timeout**: Must be < 60s (SDK control timeout limit)
-
-### Security Constraints
-- **Path Traversal Protection**: All file paths validated against project root
-- **Tool Permissions**: Opt-in model (all tools disabled by default)
-- **Authentication**: JWT-based with bcrypt password hashing
-- **API Key Management**: Stored in database with user association
-- **WebSocket Security**: Same-origin policy, no CORS on WebSocket routes
-
-### Performance Constraints
-- **Context Window**: Default 160,000 tokens (configurable via `CONTEXT_WINDOW`)
-- **Chunk Size**: Vite build warns at 1000KB chunks
-- **PTY Session Cache**: 30-minute timeout to prevent memory leaks
-- **Database**: SQLite (not suitable for high-concurrency multi-user scenarios)
-
-### Business Constraints
-- **Provider Dependency**: Requires external CLI tools to be installed separately
-- **Single Instance Design**: Not designed for hosted multi-tenant deployments
-- **No Native Mobile Apps**: Web-only (can be wrapped in PWA, but not native)
-- **Open Source MIT License**: Free to use, modify, and distribute
-
-## External Dependencies
-
-### Required CLI Tools (User-Installed)
-- **Claude Code CLI** - `npm install -g @anthropic-ai/claude-code`
-- **Cursor CLI** - Installed via Cursor IDE
-- **OpenAI Codex CLI** - `npm install -g @openai/codex`
-
-### NPM Dependencies
-**Runtime** (production):
-- Web framework: `express`, `react`, `react-dom`, `react-router-dom`
-- Real-time: `ws`, `@xterm/xterm`, `node-pty`
-- Database: `better-sqlite3`, `sqlite3`
-- Auth: `jsonwebtoken`, `bcrypt`
-- AI SDKs: `@anthropic-ai/claude-agent-sdk`, `@openai/codex-sdk`
-- UI: `@uiw/react-codemirror`, `lucide-react`, `tailwindcss`
-- Utilities: `chokidar`, `fuse.js`, `gray-matter`, `katex`
-
-**Development**:
-- Build: `vite`, `@vitejs/plugin-react`, `concurrently`
-- Release: `release-it`, `auto-changelog`
-- Image processing: `sharp`
-
-### External Services
-- **GitHub API** - Via `@octokit/rest` for Git operations
-- **OpenAI API** - Optional Whisper transcription (requires `OPENAI_API_KEY`)
-- **MCP Servers** - User-configurable Model Context Protocol servers
-
-### Environment Variables
-```bash
-PORT=3001                              # Backend server port
-VITE_PORT=5173                         # Frontend dev server port
-CONTEXT_WINDOW=160000                  # Claude context size
-CLAUDE_TOOL_APPROVAL_TIMEOUT_MS=55000  # Tool approval timeout
-OPENAI_API_KEY=                        # Whisper transcription key
-VITE_IS_PLATFORM=false                 # Platform mode flag
-```
-
-### Repository Information
-- **Homepage**: https://claudecodeui.siteboon.ai
-- **Repository**: https://github.com/siteboon/claudecodeui
-- **Issues**: https://github.com/siteboon/claudecodeui/issues
-- **Package**: `@siteboon/claude-code-ui` on npm
\ No newline at end of file
diff --git a/openspec/project.zh-CN.md b/openspec/project.zh-CN.md
deleted file mode 100644
index f7759d4..0000000
--- a/openspec/project.zh-CN.md
+++ /dev/null
@@ -1,285 +0,0 @@
-# 项目上下文
-
-## 目的
-
-Claude Code UI（又名 Cloud CLI）是一个全栈 Web 应用程序，为 [Claude Code CLI](https://docs.anthropic.com/en/docs/claude-code)、[Cursor CLI](https://docs.cursor.com/en/cli/overview) 和 [OpenAI Codex](https://developers.openai.com/codex) 提供响应式桌面和移动界面。它使用户能够通过浏览器从任何设备与 AI 编程助手交互，为 AI 驱动的开发工作流程提供无缝的跨设备体验。
-
-**主要目标：**
-- 提供从任何设备（桌面、平板、移动）对 AI CLI 工具的通用访问
-- 启用与 AI 助手的实时聊天和终端交互
-- 提供集成的文件浏览、代码编辑和 Git 操作
-- 支持会话管理和对话恢复
-- 通过身份验证和工具权限系统维护安全性
-
-## 技术栈
-
-### 前端
-- **React 18** - 使用 hooks 的函数式组件
-- **Vite 7** - 快速构建工具，支持热模块替换
-- **React Router v6** - 客户端路由
-- **Tailwind CSS 3** - 实用工具优先的样式，带有自定义组件
-- **CodeMirror 6** - 代码编辑，支持语法高亮（JavaScript、Python、JSON、Markdown、CSS、HTML）
-- **Xterm.js 5** - 终端模拟，使用 WebGL 渲染
-- **React Markdown** - Markdown 渲染，支持 KaTeX 数学
-- **Lucide React** - 图标库
-
-### 后端
-- **Node.js**（v20+）- ES 模块（type: "module"）
-- **Express.js 4** - REST API 服务器
-- **WebSocket (ws 8)** - 实时双向通信
-- **SQLite (better-sqlite3 12)** - 嵌入式数据库，用于用户、会话、设置
-- **JWT (jsonwebtoken 9)** - 身份验证令牌
-- **bcrypt 6** - 密码哈希
-- **node-pty 1** - 用于 shell 会话的伪终端
-
-### AI SDK
-- **@anthropic-ai/claude-agent-sdk 0.1.x** - 直接 Claude 集成
-- **@openai/codex-sdk 0.75.x** - OpenAI Codex 集成
-- **子进程生成** - Cursor CLI 集成
-
-### DevOps
-- **concurrently** - 并行运行前端和后端
-- **Vite** - 构建系统，手动代码分割
-- **auto-changelog** - 自动生成 CHANGELOG
-- **release-it** - 发布自动化
-
-### 数据库
-- **SQLite** 三个主要表：
-  - `users` - 身份验证和用户设置
-  - `api_keys` - 外部 API 密钥管理
-  - `user_credentials` - 存储的服务凭据（GitHub、GitLab 等）
-
-## 项目约定
-
-### 代码风格
-
-#### JavaScript/React（前端）
-- **ES 模块** - 所有导入都显式使用 `.js` 或 `.jsx` 扩展名
-- **函数式组件** - React 组件是使用 hooks 的函数（无类组件）
-- **文件命名**：
-  - 组件：PascalCase（例如 `ChatInterface.jsx`、`Settings.jsx`）
-  - 工具：camelCase（例如 `api.js`、`websocket.js`）
-  - Hooks：带 `use` 前缀的 camelCase（例如 `useAudioRecorder.js`、`useLocalStorage.jsx`）
-- **导入**：按组组织（React、第三方、相对导入）
-- **JSX**：属性使用单引号，字符串使用双引号
-- **组件组织**：
-  - Hooks 在顶层
-  - 事件处理程序在 hooks 之后
-  - 渲染助手在底部
-  - 主渲染返回在最后
-
-#### JavaScript（后端）
-- **ES 模块** - 所有文件都使用 `.js` 扩展名和 import/export
-- **Async/Await** - 异步操作优于回调
-- **错误处理** - 文件 I/O、进程生成、数据库操作的 try-catch 块
-- **注释**：模块和关键函数使用 JSDoc 风格
-- **常量**：UPPER_SNAKE_CASE（例如 `TOOL_APPROVAL_TIMEOUT_MS`、`CONTEXT_WINDOW`）
-
-#### 代码注释
-- **块注释**（`/* */`）用于文件头和复杂逻辑说明
-- **行注释**（`//`）用于内联说明
-- **TODO/FIXME** 标记用于待处理工作
-- **会话保护注释**在关键集成点使用多行标题格式
-
-### 架构模式
-
-#### 前端架构
-- **组件层次结构**：`App.jsx` → 上下文提供者 → 页面组件 → UI 组件
-- **基于上下文的状态管理**：
-  - `AuthContext` - 用户身份验证状态
-  - `WebSocketContext` - WebSocket 连接管理
-  - `ThemeContext` - 深色/浅色模式
-  - `TaskMasterContext` - 任务管理状态
-  - `TasksSettingsContext` - 任务设置持久化
-- **自定义 Hooks** 用于可重用逻辑（例如 `useAudioRecorder`、`useLocalStorage`）
-- **受保护路由** - `ProtectedRoute` 组件包装已验证的页面
-- **错误边界** - `ErrorBoundary` 包装主应用程序以实现优雅故障
-
-#### 后端架构
-- **Express 中间件链**：
-  1. CORS（跨域请求）
-  2. JSON 正文解析器
-  3. JWT 身份验证（`middleware/auth.js`）
-  4. 路由处理程序
-- **模块化路由** - 每个功能在 `routes/` 目录中都有自己的路由器
-- **会话管理**：
-  - 每个提供者的内存 `activeSessions` 映射（Claude、Cursor、Codex）
-  - PTY 会话缓存在 `ptySessionsMap` 中，具有 30 分钟超时
-  - 通过 `sessionId` 参数恢复会话
-- **WebSocket 处理程序**：
-  - `/ws` - 聊天和 AI 助手通信
-  - `/shell` - 终端/shell 访问，带有 PTY 生成
-- **错误处理**：
-  - 路径验证防止目录遍历
-  - 进程生成的 try-catch 包装
-  - WebSocket 错误被记录但不会导致服务器崩溃
-
-#### 通信模式
-- **REST API** - 用于 CRUD 操作的标准 HTTP 方法
-- **WebSocket 消息流**：
-  1. 客户端发送带有选项（projectPath、sessionId 等）的命令
-  2. 服务器调用 SDK/CLI 集成
-  3. 通过 `writer.send()` 流式传输响应，带有消息类型标记
-  4. UI 根据消息类型（content、tool_use、error 等）进行渲染
-- **消息类型**：`claude-command`、`cursor-command`、`codex-command`、`abort-session`、`claude-permission-response`
-
-### 测试策略
-
-**当前状态**：不存在正式测试套件。手动测试侧重于：
-- 多提供商会话管理（Claude、Cursor、Codex）
-- WebSocket 连接可靠性
-- 文件操作安全性
-- 终端会话持久性
-- 跨设备响应能力
-
-**测试指南**（用于未来测试）：
-- 测试 WebSocket 重新连接场景
-- 验证文件系统路径验证（目录遍历预防）
-- 测试工具权限批准流程
-- 验证跨提供商的会话恢复
-- 测试并发会话和 PTY 清理
-- 验证数据库迁移和架构更改
-
-### Git 工作流
-
-#### 分支策略
-- **main** - 生产就绪代码，始终可部署
-- **feature/*** - 新功能（例如 `feat/show-grant-permission-button`）
-- **fix/*** - 错误修复（例如 `fix/server-crash-when-opening-settings`）
-- **合并提交** - 使用合并提交合并的拉取请求（不是 rebase）
-
-#### 提交消息约定
-基于最近的提交历史：
-- **feat:** - 新功能（例如 "feat: add Bash command approval handling"）
-- **fix:** - 错误修复（例如 "fix: normalize file path handling"）
-- **Merge pull request #XXX** - PR 合并（自动）
-- **Merge branch** - 分支合并（自动）
-
-**提交消息格式**：
-```
-type: 简要描述
-
-可选的详细说明，多行。
-
-Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
-```
-
-#### 发布流程
-1. 更新 `package.json` 中的版本
-2. 运行 `npm run release`（触发 `release-it`）
-3. 通过 `auto-changelog` 自动生成 CHANGELOG
-4. 标记并推送到 GitHub 存储库
-
-## 领域上下文
-
-### AI CLI 工具集成
-
-#### Claude Code
-- **会话位置**：`~/.claude/projects/[encoded-path]/`
-- **模型**：Claude Sonnet 4.5、Opus 4.5（参见 `shared/modelConstants.js`）
-- **工具权限**：出于安全考虑，所有工具**默认禁用**
-- **批准超时**：55 秒（可通过 `CLAUDE_TOOL_APPROVAL_TIMEOUT_MS` 配置）
-- **SDK 集成**：直接 SDK 使用（无子进程）以获得更好的性能
-
-#### Cursor CLI
-- **会话位置**：`~/.cursor/projects/`
-- **集成**：子进程生成（`cursor-agent` 命令）
-- **恢复支持**：`--resume` 参数用于会话继续
-
-#### OpenAI Codex
-- **会话位置**：`~/.codex/sessions/`（JSONL 格式）
-- **令牌使用**：在 UI 中跟踪和显示
-- **集成**：`@openai/codex-sdk` 与会话文件解析
-
-### 项目发现
-从特定于提供程序的目录自动发现项目，使用：
-- `extractProjectDirectory()` - 解析编码的项目路径
-- `getFileTree()` - 生成文件树结构以供浏览
-- `chokidar` - 用于实时更新的文件监视程序
-
-### 文件系统安全性
-所有文件操作验证路径都在项目根目录内：
-```javascript
-const normalizedRoot = path.resolve(projectRoot) + path.sep;
-if (!resolved.startsWith(normalizedRoot)) {
-    return res.status(403).json({ error: 'Path must be under project root' });
-}
-```
-
-### 会话保护系统
-防止侧边栏项目更新中断活动聊天会话：
-- 用户发送消息 → 会话标记为**活动**
-- Claude 完成 → 会话标记为**非活动**
-- 会话中止 → 会话标记为**非活动**
-- App.jsx 在会话**活动**时暂停侧边栏更新
-
-## 重要约束
-
-### 技术约束
-- **Node.js 版本**：最低 v20（ES 模块、crypto.randomUUID()）
-- **单用户系统**：数据库设计用于单用户实例（非多租户）
-- **内存状态**：活动会话和工具批准不会在重启后持久化
-- **无原生通知**：使用应用内 UI 进行所有警报
-- **工具批准超时**：必须 < 60s（SDK 控制超时限制）
-
-### 安全约束
-- **路径遍历保护**：所有文件路径都根据项目根目录进行验证
-- **工具权限**：选择加入模式（所有工具默认禁用）
-- **身份验证**：基于 JWT，使用 bcrypt 密码哈希
-- **API 密钥管理**：存储在数据库中，与用户关联
-- **WebSocket 安全性**：同源策略，WebSocket 路由上无 CORS
-
-### 性能约束
-- **上下文窗口**：默认 160,000 个令牌（可通过 `CONTEXT_WINDOW` 配置）
-- **块大小**：Vite 构建在 1000KB 块时警告
-- **PTY 会话缓存**：30 分钟超时以防止内存泄漏
-- **数据库**：SQLite（不适合高并发多用户场景）
-
-### 业务约束
-- **提供程序依赖**：需要单独安装外部 CLI 工具
-- **单实例设计**：不适用于托管多租户部署
-- **无原生移动应用**：仅 Web（可以包装在 PWA 中，但不是原生）
-- **开源 MIT 许可证**：可免费使用、修改和分发
-
-## 外部依赖
-
-### 必需的 CLI 工具（用户安装）
-- **Claude Code CLI** - `npm install -g @anthropic-ai/claude-code`
-- **Cursor CLI** - 通过 Cursor IDE 安装
-- **OpenAI Codex CLI** - `npm install -g @openai/codex`
-
-### NPM 依赖
-**运行时**（生产）：
-- Web 框架：`express`、`react`、`react-dom`、`react-router-dom`
-- 实时：`ws`、`@xterm/xterm`、`node-pty`
-- 数据库：`better-sqlite3`、`sqlite3`
-- 身份验证：`jsonwebtoken`、`bcrypt`
-- AI SDK：`@anthropic-ai/claude-agent-sdk`、`@openai/codex-sdk`
-- UI：`@uiw/react-codemirror`、`lucide-react`、`tailwindcss`
-- 工具：`chokidar`、`fuse.js`、`gray-matter`、`katex`
-
-**开发**：
-- 构建：`vite`、`@vitejs/plugin-react`、`concurrently`
-- 发布：`release-it`、`auto-changelog`
-- 图像处理：`sharp`
-
-### 外部服务
-- **GitHub API** - 通过 `@octokit/rest` 进行 Git 操作
-- **OpenAI API** - 可选的 Whisper 转录（需要 `OPENAI_API_KEY`）
-- **MCP 服务器** - 用户可配置的模型上下文协议服务器
-
-### 环境变量
-```bash
-PORT=3001                              # 后端服务器端口
-VITE_PORT=5173                         # 前端开发服务器端口
-CONTEXT_WINDOW=160000                  # Claude 上下文大小
-CLAUDE_TOOL_APPROVAL_TIMEOUT_MS=55000  # 工具批准超时
-OPENAI_API_KEY=                        # Whisper 转录密钥
-VITE_IS_PLATFORM=false                 # 平台模式标志
-```
-
-### 存储库信息
-- **主页**：https://claudecodeui.siteboon.ai
-- **存储库**：https://github.com/siteboon/claudecodeui
-- **问题**：https://github.com/siteboon/claudecodeui/issues
-- **包**：npm 上的 `@siteboon/claude-code-ui`

From 1e8e52ce8d0b564a8dd218179427d524678f8974 Mon Sep 17 00:00:00 2001
From: YuanNiancai <yuanniancai@formulas.cc>
Date: Fri, 16 Jan 2026 20:06:29 +0800
Subject: [PATCH 06/24] Resolved package-lock.json merge conflicts by accepting
 main branch

---
 package-lock.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package-lock.json b/package-lock.json
index dc7b5bf..a5d490d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -47,7 +47,7 @@
         "mime-types": "^3.0.1",
         "multer": "^2.0.1",
         "node-fetch": "^2.7.0",
-        "node-pty": "^1.1.0",
+        "node-pty": "^1.1.0-beta34",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-dropzone": "^14.2.3",

From 515ad3b3369a74db01cd0893cce2b88b56f27115 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Eric=20Blanquer=E2=80=8B?= <eric.blanquer@gmail.com>
Date: Tue, 20 Jan 2026 23:39:24 +0100
Subject: [PATCH 07/24] fix: hide session badge and icon on hover to show
 action buttons

Hide the message count badge and provider icon when hovering over a session,
so they don't overlap with the edit/delete action buttons.
---
 src/components/Sidebar.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Sidebar.jsx b/src/components/Sidebar.jsx
index b06f56e..9b53fd9 100644
--- a/src/components/Sidebar.jsx
+++ b/src/components/Sidebar.jsx
@@ -1166,11 +1166,11 @@ function Sidebar({
                                         {formatTimeAgo(sessionTime, currentTime)}
                                       </span>
                                       {messageCount > 0 && (
-                                        <Badge variant="secondary" className="text-xs px-1 py-0 ml-auto">
+                                        <Badge variant="secondary" className="text-xs px-1 py-0 ml-auto group-hover:opacity-0 transition-opacity">
                                           {messageCount}
                                         </Badge>
                                       )}
-                                      <span className="ml-1 opacity-70">
+                                      <span className="ml-1 opacity-70 group-hover:opacity-0 transition-opacity">
                                         {isCursorSession ? (
                                           <CursorLogo className="w-3 h-3" />
                                         ) : isCodexSession ? (

From 9e03acb0db993c124acdf7d56df48564b1a05dc2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Eric=20Blanquer=E2=80=8B?= <eric.blanquer@gmail.com>
Date: Sun, 18 Jan 2026 04:58:03 +0100
Subject: [PATCH 08/24] Add loading progress indicator

Adds real-time progress feedback when loading projects:
- Server broadcasts progress updates via WebSocket
- Sidebar shows current project being loaded with progress bar
- Fixed progress counter to show correct current/total
- Completion event now fires after all projects (including manual) are processed
- Race condition fix for timeout cleanup using ref
- Added cleanup function to prevent state update on unmounted component
---
 server/index.js            | 26 ++++++++++++--
 server/projects.js         | 70 ++++++++++++++++++++++++++++++++------
 src/App.jsx                | 35 +++++++++++++++++--
 src/components/Sidebar.jsx | 26 ++++++++++++--
 4 files changed, 138 insertions(+), 19 deletions(-)

diff --git a/server/index.js b/server/index.js
index 25b25fd..91b8b64 100755
--- a/server/index.js
+++ b/server/index.js
@@ -80,6 +80,20 @@ import { validateApiKey, authenticateToken, authenticateWebSocket } from './midd
 // File system watcher for projects folder
 let projectsWatcher = null;
 const connectedClients = new Set();
+let isGetProjectsRunning = false; // Flag to prevent reentrant calls
+
+// Broadcast progress to all connected WebSocket clients
+function broadcastProgress(progress) {
+    const message = JSON.stringify({
+        type: 'loading_progress',
+        ...progress
+    });
+    connectedClients.forEach(client => {
+        if (client.readyState === WebSocket.OPEN) {
+            client.send(message);
+        }
+    });
+}
 
 // Setup file system watcher for Claude projects folder using chokidar
 async function setupProjectsWatcher() {
@@ -117,13 +131,19 @@ async function setupProjectsWatcher() {
         const debouncedUpdate = async (eventType, filePath) => {
             clearTimeout(debounceTimer);
             debounceTimer = setTimeout(async () => {
+                // Prevent reentrant calls
+                if (isGetProjectsRunning) {
+                    return;
+                }
+
                 try {
+                    isGetProjectsRunning = true;
 
                     // Clear project directory cache when files change
                     clearProjectDirectoryCache();
 
                     // Get updated projects list
-                    const updatedProjects = await getProjects();
+                    const updatedProjects = await getProjects(broadcastProgress);
 
                     // Notify all connected clients about the project changes
                     const updateMessage = JSON.stringify({
@@ -142,6 +162,8 @@ async function setupProjectsWatcher() {
 
                 } catch (error) {
                     console.error('[ERROR] Error handling project changes:', error);
+                } finally {
+                    isGetProjectsRunning = false;
                 }
             }, 300); // 300ms debounce (slightly faster than before)
         };
@@ -366,7 +388,7 @@ app.post('/api/system/update', authenticateToken, async (req, res) => {
 
 app.get('/api/projects', authenticateToken, async (req, res) => {
     try {
-        const projects = await getProjects();
+        const projects = await getProjects(broadcastProgress);
         res.json(projects);
     } catch (error) {
         res.status(500).json({ error: error.message });
diff --git a/server/projects.js b/server/projects.js
index ff7a8d1..c6deeac 100755
--- a/server/projects.js
+++ b/server/projects.js
@@ -379,22 +379,46 @@ async function extractProjectDirectory(projectName) {
   }
 }
 
-async function getProjects() {
+async function getProjects(progressCallback = null) {
   const claudeDir = path.join(os.homedir(), '.claude', 'projects');
   const config = await loadProjectConfig();
   const projects = [];
   const existingProjects = new Set();
-  
+  let totalProjects = 0;
+  let processedProjects = 0;
+  let directories = [];
+
   try {
     // Check if the .claude/projects directory exists
     await fs.access(claudeDir);
-    
+
     // First, get existing Claude projects from the file system
     const entries = await fs.readdir(claudeDir, { withFileTypes: true });
-    
-    for (const entry of entries) {
-      if (entry.isDirectory()) {
-        existingProjects.add(entry.name);
+    directories = entries.filter(e => e.isDirectory());
+
+    // Build set of existing project names for later
+    directories.forEach(e => existingProjects.add(e.name));
+
+    // Count manual projects not already in directories
+    const manualProjectsCount = Object.entries(config)
+      .filter(([name, cfg]) => cfg.manuallyAdded && !existingProjects.has(name))
+      .length;
+
+    totalProjects = directories.length + manualProjectsCount;
+
+    for (const entry of directories) {
+        processedProjects++;
+
+        // Emit progress
+        if (progressCallback) {
+          progressCallback({
+            phase: 'loading',
+            current: processedProjects,
+            total: totalProjects,
+            currentProject: entry.name
+          });
+        }
+
         const projectPath = path.join(claudeDir, entry.name);
         
         // Extract actual project directory from JSONL sessions
@@ -460,20 +484,35 @@ async function getProjects() {
             status: 'error'
           };
         }
-        
-        projects.push(project);
-      }
+
+      projects.push(project);
     }
   } catch (error) {
     // If the directory doesn't exist (ENOENT), that's okay - just continue with empty projects
     if (error.code !== 'ENOENT') {
       console.error('Error reading projects directory:', error);
     }
+    // Calculate total for manual projects only (no directories exist)
+    totalProjects = Object.entries(config)
+      .filter(([name, cfg]) => cfg.manuallyAdded)
+      .length;
   }
   
   // Add manually configured projects that don't exist as folders yet
   for (const [projectName, projectConfig] of Object.entries(config)) {
     if (!existingProjects.has(projectName) && projectConfig.manuallyAdded) {
+      processedProjects++;
+
+      // Emit progress for manual projects
+      if (progressCallback) {
+        progressCallback({
+          phase: 'loading',
+          current: processedProjects,
+          total: totalProjects,
+          currentProject: projectName
+        });
+      }
+
       // Use the original path if available, otherwise extract from potential sessions
       let actualProjectDir = projectConfig.originalPath;
       
@@ -541,7 +580,16 @@ async function getProjects() {
       projects.push(project);
     }
   }
-  
+
+  // Emit completion after all projects (including manual) are processed
+  if (progressCallback) {
+    progressCallback({
+      phase: 'complete',
+      current: totalProjects,
+      total: totalProjects
+    });
+  }
+
   return projects;
 }
 
diff --git a/src/App.jsx b/src/App.jsx
index ed0ef58..42e4e67 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -18,7 +18,7 @@
  * Handles both existing sessions (with real IDs) and new sessions (with temporary IDs).
  */
 
-import React, { useState, useEffect, useCallback } from 'react';
+import React, { useState, useEffect, useCallback, useRef } from 'react';
 import { BrowserRouter as Router, Routes, Route, useNavigate, useParams } from 'react-router-dom';
 import { Settings as SettingsIcon, Sparkles } from 'lucide-react';
 import Sidebar from './components/Sidebar';
@@ -53,6 +53,7 @@ function AppContent() {
   const [isMobile, setIsMobile] = useState(false);
   const [sidebarOpen, setSidebarOpen] = useState(false);
   const [isLoadingProjects, setIsLoadingProjects] = useState(true);
+  const [loadingProgress, setLoadingProgress] = useState(null); // { phase, current, total, currentProject }
   const [isInputFocused, setIsInputFocused] = useState(false);
   const [showSettings, setShowSettings] = useState(false);
   const [settingsInitialTab, setSettingsInitialTab] = useState('agents');
@@ -78,7 +79,10 @@ function AppContent() {
   const [externalMessageUpdate, setExternalMessageUpdate] = useState(0);
 
   const { ws, sendMessage, messages } = useWebSocketContext();
-  
+
+  // Ref to track loading progress timeout for cleanup
+  const loadingProgressTimeoutRef = useRef(null);
+
   // Detect if running as PWA
   const [isPWA, setIsPWA] = useState(false);
   
@@ -170,7 +174,23 @@ function AppContent() {
   useEffect(() => {
     if (messages.length > 0) {
       const latestMessage = messages[messages.length - 1];
-      
+
+      // Handle loading progress updates
+      if (latestMessage.type === 'loading_progress') {
+        if (loadingProgressTimeoutRef.current) {
+          clearTimeout(loadingProgressTimeoutRef.current);
+          loadingProgressTimeoutRef.current = null;
+        }
+        setLoadingProgress(latestMessage);
+        if (latestMessage.phase === 'complete') {
+          loadingProgressTimeoutRef.current = setTimeout(() => {
+            setLoadingProgress(null);
+            loadingProgressTimeoutRef.current = null;
+          }, 500);
+        }
+        return;
+      }
+
       if (latestMessage.type === 'projects_updated') {
 
         // External Session Update Detection: Check if the changed file is the current session's JSONL
@@ -247,6 +267,13 @@ function AppContent() {
         }
       }
     }
+
+    return () => {
+      if (loadingProgressTimeoutRef.current) {
+        clearTimeout(loadingProgressTimeoutRef.current);
+        loadingProgressTimeoutRef.current = null;
+      }
+    };
   }, [messages, selectedProject, selectedSession, activeSessions]);
 
   const fetchProjects = async () => {
@@ -765,6 +792,7 @@ function AppContent() {
                 onSessionDelete={handleSessionDelete}
                 onProjectDelete={handleProjectDelete}
                 isLoading={isLoadingProjects}
+                loadingProgress={loadingProgress}
                 onRefresh={handleSidebarRefresh}
                 onShowSettings={() => setShowSettings(true)}
                 updateAvailable={updateAvailable}
@@ -859,6 +887,7 @@ function AppContent() {
               onSessionDelete={handleSessionDelete}
               onProjectDelete={handleProjectDelete}
               isLoading={isLoadingProjects}
+              loadingProgress={loadingProgress}
               onRefresh={handleSidebarRefresh}
               onShowSettings={() => setShowSettings(true)}
               updateAvailable={updateAvailable}
diff --git a/src/components/Sidebar.jsx b/src/components/Sidebar.jsx
index b06f56e..223ca9b 100644
--- a/src/components/Sidebar.jsx
+++ b/src/components/Sidebar.jsx
@@ -52,6 +52,7 @@ function Sidebar({
   onSessionDelete,
   onProjectDelete,
   isLoading,
+  loadingProgress,
   onRefresh,
   onShowSettings,
   updateAvailable,
@@ -663,9 +664,28 @@ function Sidebar({
                 <div className="w-6 h-6 animate-spin rounded-full border-2 border-muted-foreground border-t-transparent" />
               </div>
               <h3 className="text-base font-medium text-foreground mb-2 md:mb-1">Loading projects...</h3>
-              <p className="text-sm text-muted-foreground">
-                Fetching your Claude projects and sessions
-              </p>
+              {loadingProgress && loadingProgress.total > 0 ? (
+                <div className="space-y-2">
+                  <div className="w-full bg-muted rounded-full h-2 overflow-hidden">
+                    <div
+                      className="bg-primary h-full transition-all duration-300 ease-out"
+                      style={{ width: `${(loadingProgress.current / loadingProgress.total) * 100}%` }}
+                    />
+                  </div>
+                  <p className="text-sm text-muted-foreground">
+                    {loadingProgress.current}/{loadingProgress.total} projects
+                  </p>
+                  {loadingProgress.currentProject && (
+                    <p className="text-xs text-muted-foreground/70 truncate max-w-[200px] mx-auto" title={loadingProgress.currentProject}>
+                      {loadingProgress.currentProject.split('-').slice(-2).join('/')}
+                    </p>
+                  )}
+                </div>
+              ) : (
+                <p className="text-sm text-muted-foreground">
+                  Fetching your Claude projects and sessions
+                </p>
+              )}
             </div>
           ) : projects.length === 0 ? (
             <div className="text-center py-12 md:py-8 px-4">

From 0517ee609ee6d4568bbdcddb2c541addc7ec7670 Mon Sep 17 00:00:00 2001
From: YuanNiancai <yuanniancai@formulas.cc>
Date: Wed, 21 Jan 2026 13:56:49 +0800
Subject: [PATCH 09/24] feat: complete internationalization (i18n) for
 components
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Implemented comprehensive i18n translation support for the following components:

1. GitSettings.jsx - Git configuration interface
2. ApiKeysSettings.jsx - API keys settings
3. CredentialsSettings.jsx - Credentials settings (GitHub tokens)
4. TasksSettings.jsx - TaskMaster task management settings
5. ChatInterface.jsx - Chat interface (major translation work)

New translation files:
- src/i18n/locales/en/chat.json - English chat interface translations
- src/i18n/locales/zh-CN/chat.json - Chinese chat interface translations

ChatInterface.jsx translations:
- Code block copy buttons (Copy, Copied, Copy code)
- Message type labels (User, Error, Tool, Claude, Cursor, Codex)
- Tool settings tooltip
- Search result display (pattern, in, results)
- Codex permission modes (Default, Accept Edits, Bypass Permissions, Plan)
- Input placeholder and hint text
- Keyboard shortcut hints (Ctrl+Enter/Enter modes)
- Command menu button

i18n configuration updates:
- Registered chat namespace in config.js
- Extended settings.json translations (git, apiKeys, tasks, agents, mcpServers sections)

完成以下组件的 i18n 翻译工作：

1. GitSettings.jsx - Git 配置界面
2. ApiKeysSettings.jsx - API 密钥设置
3. CredentialsSettings.jsx - 凭据设置（GitHub Token）
4. TasksSettings.jsx - TaskMaster 任务管理设置
5. ChatInterface.jsx - 聊天界面（主要翻译工作）

新增翻译文件：
- src/i18n/locales/en/chat.json - 英文聊天界面翻译
- src/i18n/locales/zh-CN/chat.json - 中文聊天界面翻译

ChatInterface.jsx 翻译内容：
- 代码块复制按钮
- 消息类型标签
- 工具设置提示
- 搜索结果显示
- Codex 权限模式（默认、编辑、无限制、计划模式）
- 输入框占位符和提示文本
- 键盘快捷键提示
- 命令菜单按钮

更新 i18n 配置：
- 在 config.js 中注册 chat 命名空间
- 扩展 settings.json 翻译（git、apiKeys、tasks、agents、mcpServers 等部分）
---
 src/components/ApiKeysSettings.jsx            |  60 ++--
 src/components/ChatInterface.jsx              |  87 ++---
 src/components/CredentialsSettings.jsx        |  62 ++--
 src/components/GitSettings.jsx                |  18 +-
 src/components/Settings.jsx                   | 156 ++++----
 src/components/TasksSettings.jsx              |  24 +-
 src/components/settings/AccountContent.jsx    |  30 +-
 src/components/settings/AgentListItem.jsx     |   8 +-
 src/components/settings/McpServersContent.jsx |  63 ++--
 .../settings/PermissionsContent.jsx           | 109 +++---
 src/i18n/config.js                            |   6 +-
 src/i18n/locales/en/chat.json                 | 111 ++++++
 src/i18n/locales/en/settings.json             | 340 +++++++++++++++++-
 src/i18n/locales/zh-CN/chat.json              | 111 ++++++
 src/i18n/locales/zh-CN/settings.json          | 340 +++++++++++++++++-
 15 files changed, 1214 insertions(+), 311 deletions(-)
 create mode 100644 src/i18n/locales/en/chat.json
 create mode 100644 src/i18n/locales/zh-CN/chat.json

diff --git a/src/components/ApiKeysSettings.jsx b/src/components/ApiKeysSettings.jsx
index 2687d83..1ab27df 100644
--- a/src/components/ApiKeysSettings.jsx
+++ b/src/components/ApiKeysSettings.jsx
@@ -3,8 +3,10 @@ import { Button } from './ui/button';
 import { Input } from './ui/input';
 import { Key, Plus, Trash2, Eye, EyeOff, Copy, Check, Github } from 'lucide-react';
 import { authenticatedFetch } from '../utils/api';
+import { useTranslation } from 'react-i18next';
 
 function ApiKeysSettings() {
+  const { t } = useTranslation('settings');
   const [apiKeys, setApiKeys] = useState([]);
   const [githubTokens, setGithubTokens] = useState([]);
   const [loading, setLoading] = useState(true);
@@ -63,7 +65,7 @@ function ApiKeysSettings() {
   };
 
   const deleteApiKey = async (keyId) => {
-    if (!confirm('Are you sure you want to delete this API key?')) return;
+    if (!confirm(t('apiKeys.confirmDelete'))) return;
 
     try {
       await authenticatedFetch(`/api/settings/api-keys/${keyId}`, {
@@ -113,7 +115,7 @@ function ApiKeysSettings() {
   };
 
   const deleteGithubToken = async (tokenId) => {
-    if (!confirm('Are you sure you want to delete this GitHub token?')) return;
+    if (!confirm(t('apiKeys.github.confirmDelete'))) return;
 
     try {
       await authenticatedFetch(`/api/settings/credentials/${tokenId}`, {
@@ -144,7 +146,7 @@ function ApiKeysSettings() {
   };
 
   if (loading) {
-    return <div className="text-muted-foreground">Loading...</div>;
+    return <div className="text-muted-foreground">{t('apiKeys.loading')}</div>;
   }
 
   return (
@@ -152,9 +154,9 @@ function ApiKeysSettings() {
       {/* New API Key Alert */}
       {newlyCreatedKey && (
         <div className="p-4 bg-yellow-500/10 border border-yellow-500/20 rounded-lg">
-          <h4 className="font-semibold text-yellow-500 mb-2">⚠️ Save Your API Key</h4>
+          <h4 className="font-semibold text-yellow-500 mb-2">{t('apiKeys.newKey.alertTitle')}</h4>
           <p className="text-sm text-muted-foreground mb-3">
-            This is the only time you'll see this key. Store it securely.
+            {t('apiKeys.newKey.alertMessage')}
           </p>
           <div className="flex items-center gap-2">
             <code className="flex-1 px-3 py-2 bg-background/50 rounded font-mono text-sm break-all">
@@ -174,7 +176,7 @@ function ApiKeysSettings() {
             className="mt-3"
             onClick={() => setNewlyCreatedKey(null)}
           >
-            I've saved it
+            {t('apiKeys.newKey.iveSavedIt')}
           </Button>
         </div>
       )}
@@ -184,33 +186,33 @@ function ApiKeysSettings() {
         <div className="flex items-center justify-between mb-4">
           <div className="flex items-center gap-2">
             <Key className="h-5 w-5" />
-            <h3 className="text-lg font-semibold">API Keys</h3>
+            <h3 className="text-lg font-semibold">{t('apiKeys.title')}</h3>
           </div>
           <Button
             size="sm"
             onClick={() => setShowNewKeyForm(!showNewKeyForm)}
           >
             <Plus className="h-4 w-4 mr-1" />
-            New API Key
+            {t('apiKeys.newButton')}
           </Button>
         </div>
 
         <p className="text-sm text-muted-foreground mb-4">
-          Generate API keys to access the external API from other applications.
+          {t('apiKeys.description')}
         </p>
 
         {showNewKeyForm && (
           <div className="mb-4 p-4 border rounded-lg bg-card">
             <Input
-              placeholder="API Key Name (e.g., Production Server)"
+              placeholder={t('apiKeys.form.placeholder')}
               value={newKeyName}
               onChange={(e) => setNewKeyName(e.target.value)}
               className="mb-2"
             />
             <div className="flex gap-2">
-              <Button onClick={createApiKey}>Create</Button>
+              <Button onClick={createApiKey}>{t('apiKeys.form.createButton')}</Button>
               <Button variant="outline" onClick={() => setShowNewKeyForm(false)}>
-                Cancel
+                {t('apiKeys.form.cancelButton')}
               </Button>
             </div>
           </div>
@@ -218,7 +220,7 @@ function ApiKeysSettings() {
 
         <div className="space-y-2">
           {apiKeys.length === 0 ? (
-            <p className="text-sm text-muted-foreground italic">No API keys created yet.</p>
+            <p className="text-sm text-muted-foreground italic">{t('apiKeys.empty')}</p>
           ) : (
             apiKeys.map((key) => (
               <div
@@ -229,8 +231,8 @@ function ApiKeysSettings() {
                   <div className="font-medium">{key.key_name}</div>
                   <code className="text-xs text-muted-foreground">{key.api_key}</code>
                   <div className="text-xs text-muted-foreground mt-1">
-                    Created: {new Date(key.created_at).toLocaleDateString()}
-                    {key.last_used && ` • Last used: ${new Date(key.last_used).toLocaleDateString()}`}
+                    {t('apiKeys.list.created')} {new Date(key.created_at).toLocaleDateString()}
+                    {key.last_used && ` • ${t('apiKeys.list.lastUsed')} ${new Date(key.last_used).toLocaleDateString()}`}
                   </div>
                 </div>
                 <div className="flex items-center gap-2">
@@ -239,7 +241,7 @@ function ApiKeysSettings() {
                     variant={key.is_active ? 'outline' : 'secondary'}
                     onClick={() => toggleApiKey(key.id, key.is_active)}
                   >
-                    {key.is_active ? 'Active' : 'Inactive'}
+                    {key.is_active ? t('apiKeys.status.active') : t('apiKeys.status.inactive')}
                   </Button>
                   <Button
                     size="sm"
@@ -260,25 +262,25 @@ function ApiKeysSettings() {
         <div className="flex items-center justify-between mb-4">
           <div className="flex items-center gap-2">
             <Github className="h-5 w-5" />
-            <h3 className="text-lg font-semibold">GitHub Tokens</h3>
+            <h3 className="text-lg font-semibold">{t('apiKeys.github.title')}</h3>
           </div>
           <Button
             size="sm"
             onClick={() => setShowNewTokenForm(!showNewTokenForm)}
           >
             <Plus className="h-4 w-4 mr-1" />
-            Add Token
+            {t('apiKeys.github.addButton')}
           </Button>
         </div>
 
         <p className="text-sm text-muted-foreground mb-4">
-          Add GitHub Personal Access Tokens to clone private repositories via the external API.
+          {t('apiKeys.github.description')}
         </p>
 
         {showNewTokenForm && (
           <div className="mb-4 p-4 border rounded-lg bg-card">
             <Input
-              placeholder="Token Name (e.g., Personal Repos)"
+              placeholder={t('apiKeys.github.form.namePlaceholder')}
               value={newTokenName}
               onChange={(e) => setNewTokenName(e.target.value)}
               className="mb-2"
@@ -286,7 +288,7 @@ function ApiKeysSettings() {
             <div className="relative">
               <Input
                 type={showToken['new'] ? 'text' : 'password'}
-                placeholder="GitHub Personal Access Token (ghp_...)"
+                placeholder={t('apiKeys.github.form.tokenPlaceholder')}
                 value={newGithubToken}
                 onChange={(e) => setNewGithubToken(e.target.value)}
                 className="mb-2 pr-10"
@@ -300,13 +302,13 @@ function ApiKeysSettings() {
               </button>
             </div>
             <div className="flex gap-2">
-              <Button onClick={createGithubToken}>Add Token</Button>
+              <Button onClick={createGithubToken}>{t('apiKeys.github.form.addButton')}</Button>
               <Button variant="outline" onClick={() => {
                 setShowNewTokenForm(false);
                 setNewTokenName('');
                 setNewGithubToken('');
               }}>
-                Cancel
+                {t('apiKeys.github.form.cancelButton')}
               </Button>
             </div>
           </div>
@@ -314,7 +316,7 @@ function ApiKeysSettings() {
 
         <div className="space-y-2">
           {githubTokens.length === 0 ? (
-            <p className="text-sm text-muted-foreground italic">No GitHub tokens added yet.</p>
+            <p className="text-sm text-muted-foreground italic">{t('apiKeys.github.empty')}</p>
           ) : (
             githubTokens.map((token) => (
               <div
@@ -324,7 +326,7 @@ function ApiKeysSettings() {
                 <div className="flex-1">
                   <div className="font-medium">{token.credential_name}</div>
                   <div className="text-xs text-muted-foreground mt-1">
-                    Added: {new Date(token.created_at).toLocaleDateString()}
+                    {t('apiKeys.github.added')} {new Date(token.created_at).toLocaleDateString()}
                   </div>
                 </div>
                 <div className="flex items-center gap-2">
@@ -333,7 +335,7 @@ function ApiKeysSettings() {
                     variant={token.is_active ? 'outline' : 'secondary'}
                     onClick={() => toggleGithubToken(token.id, token.is_active)}
                   >
-                    {token.is_active ? 'Active' : 'Inactive'}
+                    {token.is_active ? t('apiKeys.status.active') : t('apiKeys.status.inactive')}
                   </Button>
                   <Button
                     size="sm"
@@ -351,9 +353,9 @@ function ApiKeysSettings() {
 
       {/* Documentation Link */}
       <div className="p-4 bg-muted/50 rounded-lg">
-        <h4 className="font-semibold mb-2">External API Documentation</h4>
+        <h4 className="font-semibold mb-2">{t('apiKeys.documentation.title')}</h4>
         <p className="text-sm text-muted-foreground mb-3">
-          Learn how to use the external API to trigger Claude/Cursor sessions from your applications.
+          {t('apiKeys.documentation.description')}
         </p>
         <a
           href="/EXTERNAL_API.md"
@@ -361,7 +363,7 @@ function ApiKeysSettings() {
           rel="noopener noreferrer"
           className="text-sm text-primary hover:underline"
         >
-          View API Documentation →
+          {t('apiKeys.documentation.viewLink')}
         </a>
       </div>
     </div>
diff --git a/src/components/ChatInterface.jsx b/src/components/ChatInterface.jsx
index 42e0ee0..9c5e4e7 100644
--- a/src/components/ChatInterface.jsx
+++ b/src/components/ChatInterface.jsx
@@ -30,6 +30,7 @@ import CursorLogo from './CursorLogo.jsx';
 import CodexLogo from './CodexLogo.jsx';
 import NextTaskBanner from './NextTaskBanner.jsx';
 import { useTasksSettings } from '../contexts/TasksSettingsContext';
+import { useTranslation } from 'react-i18next';
 
 import ClaudeStatus from './ClaudeStatus';
 import TokenUsagePie from './TokenUsagePie';
@@ -336,27 +337,27 @@ function grantClaudeToolPermission(entry) {
 }
 
 // Common markdown components to ensure consistent rendering (tables, inline code, links, etc.)
-const markdownComponents = {
-  code: ({ node, inline, className, children, ...props }) => {
-    const [copied, setCopied] = React.useState(false);
-    const raw = Array.isArray(children) ? children.join('') : String(children ?? '');
-    const looksMultiline = /[\r\n]/.test(raw);
-    const inlineDetected = inline || (node && node.type === 'inlineCode');
-    const shouldInline = inlineDetected || !looksMultiline; // fallback to inline if single-line
+const CodeBlock = ({ node, inline, className, children, ...props }) => {
+  const { t } = useTranslation('chat');
+  const [copied, setCopied] = React.useState(false);
+  const raw = Array.isArray(children) ? children.join('') : String(children ?? '');
+  const looksMultiline = /[\r\n]/.test(raw);
+  const inlineDetected = inline || (node && node.type === 'inlineCode');
+  const shouldInline = inlineDetected || !looksMultiline; // fallback to inline if single-line
 
-    // Inline code rendering
-    if (shouldInline) {
-      return (
-        <code
-          className={`font-mono text-[0.9em] px-1.5 py-0.5 rounded-md bg-gray-100 text-gray-900 border border-gray-200 dark:bg-gray-800/60 dark:text-gray-100 dark:border-gray-700 whitespace-pre-wrap break-words ${
-            className || ''
-          }`}
-          {...props}
-        >
-          {children}
-        </code>
-      );
-    }
+  // Inline code rendering
+  if (shouldInline) {
+    return (
+      <code
+        className={`font-mono text-[0.9em] px-1.5 py-0.5 rounded-md bg-gray-100 text-gray-900 border border-gray-200 dark:bg-gray-800/60 dark:text-gray-100 dark:border-gray-700 whitespace-pre-wrap break-words ${
+          className || ''
+        }`}
+        {...props}
+      >
+        {children}
+      </code>
+    );
+  }
 
     // Extract language from className (format: language-xxx)
     const match = /language-(\w+)/.exec(className || '');
@@ -411,15 +412,15 @@ const markdownComponents = {
           type="button"
           onClick={handleCopy}
           className="absolute top-2 right-2 z-10 opacity-0 group-hover:opacity-100 focus:opacity-100 active:opacity-100 transition-opacity text-xs px-2 py-1 rounded-md bg-gray-700/80 hover:bg-gray-700 text-white border border-gray-600"
-          title={copied ? 'Copied' : 'Copy code'}
-          aria-label={copied ? 'Copied' : 'Copy code'}
+          title={copied ? t('codeBlock.copied') : t('codeBlock.copyCode')}
+          aria-label={copied ? t('codeBlock.copied') : t('codeBlock.copyCode')}
         >
           {copied ? (
             <span className="flex items-center gap-1">
               <svg className="w-3.5 h-3.5" viewBox="0 0 20 20" fill="currentColor">
                 <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
               </svg>
-              Copied
+              {t('codeBlock.copied')}
             </span>
           ) : (
             <span className="flex items-center gap-1">
@@ -427,7 +428,7 @@ const markdownComponents = {
                 <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
                 <path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"></path>
               </svg>
-              Copy
+              {t('codeBlock.copy')}
             </span>
           )}
         </button>
@@ -452,7 +453,11 @@ const markdownComponents = {
         </SyntaxHighlighter>
       </div>
     );
-  },
+  };
+
+// Common markdown components to ensure consistent rendering (tables, inline code, links, etc.)
+const markdownComponents = {
+  code: CodeBlock,
   blockquote: ({ children }) => (
     <blockquote className="border-l-4 border-gray-300 dark:border-gray-600 pl-4 italic text-gray-600 dark:text-gray-400 my-2">
       {children}
@@ -485,6 +490,7 @@ const markdownComponents = {
 
 // Memoized message component to prevent unnecessary re-renders
 const MessageComponent = memo(({ message, index, prevMessage, createDiff, onFileOpen, onShowSettings, onGrantToolPermission, autoExpandTools, showRawParameters, showThinking, selectedProject, provider }) => {
+  const { t } = useTranslation('chat');
   const isGrouped = prevMessage && prevMessage.type === message.type &&
                    ((prevMessage.type === 'assistant') ||
                     (prevMessage.type === 'user') ||
@@ -587,7 +593,7 @@ const MessageComponent = memo(({ message, index, prevMessage, createDiff, onFile
                 </div>
               )}
               <div className="text-sm font-medium text-gray-900 dark:text-white">
-                {message.type === 'error' ? 'Error' : message.type === 'tool' ? 'Tool' : ((localStorage.getItem('selected-provider') || 'claude') === 'cursor' ? 'Cursor' : (localStorage.getItem('selected-provider') || 'claude') === 'codex' ? 'Codex' : 'Claude')}
+                {message.type === 'error' ? t('messageTypes.error') : message.type === 'tool' ? t('messageTypes.tool') : ((localStorage.getItem('selected-provider') || 'claude') === 'cursor' ? t('messageTypes.cursor') : (localStorage.getItem('selected-provider') || 'claude') === 'codex' ? t('messageTypes.codex') : t('messageTypes.claude'))}
               </div>
             </div>
           )}
@@ -615,8 +621,8 @@ const MessageComponent = memo(({ message, index, prevMessage, createDiff, onFile
                                 const input = JSON.parse(message.toolInput);
                                 return (
                                   <span className="font-mono truncate flex-1 min-w-0">
-                                    {input.pattern && <span>pattern: <span className="text-blue-600 dark:text-blue-400">{input.pattern}</span></span>}
-                                    {input.path && <span className="ml-2">in: {input.path}</span>}
+                                    {input.pattern && <span>{t('search.pattern')} <span className="text-blue-600 dark:text-blue-400">{input.pattern}</span></span>}
+                                    {input.path && <span className="ml-2">{t('search.in')} {input.path}</span>}
                                   </span>
                                 );
                               } catch (e) {
@@ -629,7 +635,7 @@ const MessageComponent = memo(({ message, index, prevMessage, createDiff, onFile
                               href={`#tool-result-${message.toolId}`}
                               className="flex-shrink-0 text-xs text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 font-medium transition-colors flex items-center gap-1"
                             >
-                              <span>results</span>
+                              <span>{t('tools.searchResults')}</span>
                               <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
                               </svg>
@@ -673,7 +679,7 @@ const MessageComponent = memo(({ message, index, prevMessage, createDiff, onFile
                         onShowSettings();
                       }}
                       className="p-2 rounded-lg hover:bg-white/60 dark:hover:bg-gray-800/60 transition-all duration-200 group/btn backdrop-blur-sm"
-                      title="Tool Settings"
+                      title={t('tools.settings')}
                     >
                       <svg className="w-4 h-4 text-gray-600 dark:text-gray-400 group-hover/btn:text-blue-600 dark:group-hover/btn:text-blue-400 transition-colors" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                         <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
@@ -1851,6 +1857,7 @@ const ImageAttachment = ({ file, onRemove, uploadProgress, error }) => {
 // This ensures uninterrupted chat experience by pausing sidebar refreshes during conversations.
 function ChatInterface({ selectedProject, selectedSession, ws, sendMessage, messages, onFileOpen, onInputFocusChange, onSessionActive, onSessionInactive, onSessionProcessing, onSessionNotProcessing, processingSessions, onReplaceTemporarySession, onNavigateToSession, onShowSettings, autoExpandTools, showRawParameters, showThinking, autoScrollToBottom, sendByCtrlEnter, externalMessageUpdate, onTaskClick, onShowAllTasks }) {
   const { tasksEnabled, isTaskMasterInstalled } = useTasksSettings();
+  const { t } = useTranslation('chat');
   const [input, setInput] = useState(() => {
     if (typeof window !== 'undefined' && selectedProject) {
       return safeLocalStorage.getItem(`draft_input_${selectedProject.name}`) || '';
@@ -5191,7 +5198,7 @@ function ChatInterface({ selectedProject, selectedSession, ws, sendMessage, mess
                   ? 'bg-orange-50 dark:bg-orange-900/20 text-orange-700 dark:text-orange-300 border-orange-300 dark:border-orange-600 hover:bg-orange-100 dark:hover:bg-orange-900/30'
                   : 'bg-blue-50 dark:bg-blue-900/20 text-blue-700 dark:text-blue-300 border-blue-300 dark:border-blue-600 hover:bg-blue-100 dark:hover:bg-blue-900/30'
               }`}
-              title="Click to change permission mode (or press Tab in input)"
+              title={t('input.clickToChangeMode')}
             >
               <div className="flex items-center gap-2">
                 <div className={`w-2 h-2 rounded-full ${
@@ -5204,10 +5211,10 @@ function ChatInterface({ selectedProject, selectedSession, ws, sendMessage, mess
                     : 'bg-blue-500'
                 }`} />
                 <span>
-                  {permissionMode === 'default' && 'Default Mode'}
-                  {permissionMode === 'acceptEdits' && 'Accept Edits'}
-                  {permissionMode === 'bypassPermissions' && 'Bypass Permissions'}
-                  {permissionMode === 'plan' && 'Plan Mode'}
+                  {permissionMode === 'default' && t('codex.modes.default')}
+                  {permissionMode === 'acceptEdits' && t('codex.modes.acceptEdits')}
+                  {permissionMode === 'bypassPermissions' && t('codex.modes.bypassPermissions')}
+                  {permissionMode === 'plan' && t('codex.modes.plan')}
                 </span>
               </div>
             </button>
@@ -5236,7 +5243,7 @@ function ChatInterface({ selectedProject, selectedSession, ws, sendMessage, mess
                 }
               }}
               className="relative w-8 h-8 text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 rounded-full flex items-center justify-center transition-colors focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:ring-offset-gray-800"
-              title="Show all commands"
+              title={t('input.showAllCommands')}
             >
               <svg
                 className="w-5 h-5"
@@ -5421,7 +5428,7 @@ function ChatInterface({ selectedProject, selectedSession, ws, sendMessage, mess
                 const isExpanded = e.target.scrollHeight > lineHeight * 2;
                 setIsTextareaExpanded(isExpanded);
               }}
-              placeholder={`Type / for commands, @ for files, or ask ${provider === 'cursor' ? 'Cursor' : 'Claude'} anything...`}
+              placeholder={t('input.placeholder', { provider: provider === 'cursor' ? t('messageTypes.cursor') : provider === 'codex' ? t('messageTypes.codex') : t('messageTypes.claude') })}
               disabled={isLoading}
               className="chat-input-placeholder block w-full pl-12 pr-20 sm:pr-40 py-1.5 sm:py-4 bg-transparent rounded-2xl focus:outline-none text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 disabled:opacity-50 resize-none min-h-[50px] sm:min-h-[80px] max-h-[40vh] sm:max-h-[300px] overflow-y-auto text-sm sm:text-base leading-[21px] sm:leading-6 transition-all duration-200"
               style={{ height: '50px' }}
@@ -5431,7 +5438,7 @@ function ChatInterface({ selectedProject, selectedSession, ws, sendMessage, mess
               type="button"
               onClick={open}
               className="absolute left-2 top-1/2 transform -translate-y-1/2 p-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg transition-colors"
-              title="Attach images"
+              title={t('input.attachImages')}
             >
               <svg className="w-5 h-5 text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
@@ -5480,8 +5487,8 @@ function ChatInterface({ selectedProject, selectedSession, ws, sendMessage, mess
               input.trim() ? 'opacity-0' : 'opacity-100'
             }`}>
               {sendByCtrlEnter
-                ? "Ctrl+Enter to send • Shift+Enter for new line • Tab to change modes • / for slash commands"
-                : "Enter to send • Shift+Enter for new line • Tab to change modes • / for slash commands"}
+                ? t('input.hintText.ctrlEnter')
+                : t('input.hintText.enter')}
             </div>
           </div>
         </form>
diff --git a/src/components/CredentialsSettings.jsx b/src/components/CredentialsSettings.jsx
index 1150b9f..cc7d424 100644
--- a/src/components/CredentialsSettings.jsx
+++ b/src/components/CredentialsSettings.jsx
@@ -5,8 +5,10 @@ import { Key, Plus, Trash2, Eye, EyeOff, Copy, Check, Github, ExternalLink } fro
 import { useVersionCheck } from '../hooks/useVersionCheck';
 import { version } from '../../package.json';
 import { authenticatedFetch } from '../utils/api';
+import { useTranslation } from 'react-i18next';
 
 function CredentialsSettings() {
+  const { t } = useTranslation('settings');
   const [apiKeys, setApiKeys] = useState([]);
   const [githubCredentials, setGithubCredentials] = useState([]);
   const [loading, setLoading] = useState(true);
@@ -69,7 +71,7 @@ function CredentialsSettings() {
   };
 
   const deleteApiKey = async (keyId) => {
-    if (!confirm('Are you sure you want to delete this API key?')) return;
+    if (!confirm(t('apiKeys.confirmDelete'))) return;
 
     try {
       await authenticatedFetch(`/api/settings/api-keys/${keyId}`, {
@@ -121,7 +123,7 @@ function CredentialsSettings() {
   };
 
   const deleteGithubCredential = async (credentialId) => {
-    if (!confirm('Are you sure you want to delete this GitHub token?')) return;
+    if (!confirm(t('apiKeys.github.confirmDelete'))) return;
 
     try {
       await authenticatedFetch(`/api/settings/credentials/${credentialId}`, {
@@ -152,7 +154,7 @@ function CredentialsSettings() {
   };
 
   if (loading) {
-    return <div className="text-muted-foreground">Loading...</div>;
+    return <div className="text-muted-foreground">{t('apiKeys.loading')}</div>;
   }
 
   return (
@@ -160,9 +162,9 @@ function CredentialsSettings() {
       {/* New API Key Alert */}
       {newlyCreatedKey && (
         <div className="p-4 bg-yellow-500/10 border border-yellow-500/20 rounded-lg">
-          <h4 className="font-semibold text-yellow-500 mb-2">⚠️ Save Your API Key</h4>
+          <h4 className="font-semibold text-yellow-500 mb-2">{t('apiKeys.newKey.alertTitle')}</h4>
           <p className="text-sm text-muted-foreground mb-3">
-            This is the only time you'll see this key. Store it securely.
+            {t('apiKeys.newKey.alertMessage')}
           </p>
           <div className="flex items-center gap-2">
             <code className="flex-1 px-3 py-2 bg-background/50 rounded font-mono text-sm break-all">
@@ -182,7 +184,7 @@ function CredentialsSettings() {
             className="mt-3"
             onClick={() => setNewlyCreatedKey(null)}
           >
-            I've saved it
+            {t('apiKeys.newKey.iveSavedIt')}
           </Button>
         </div>
       )}
@@ -192,20 +194,20 @@ function CredentialsSettings() {
         <div className="flex items-center justify-between mb-4">
           <div className="flex items-center gap-2">
             <Key className="h-5 w-5" />
-            <h3 className="text-lg font-semibold">API Keys</h3>
+            <h3 className="text-lg font-semibold">{t('apiKeys.title')}</h3>
           </div>
           <Button
             size="sm"
             onClick={() => setShowNewKeyForm(!showNewKeyForm)}
           >
             <Plus className="h-4 w-4 mr-1" />
-            New API Key
+            {t('apiKeys.newButton')}
           </Button>
         </div>
 
         <div className="mb-4">
           <p className="text-sm text-muted-foreground mb-2">
-            Generate API keys to access the external API from other applications.
+            {t('apiKeys.description')}
           </p>
           <a
             href="/api-docs.html"
@@ -213,7 +215,7 @@ function CredentialsSettings() {
             rel="noopener noreferrer"
             className="text-sm text-primary hover:underline inline-flex items-center gap-1"
           >
-            API Documentation
+            {t('apiKeys.apiDocsLink')}
             <ExternalLink className="h-3 w-3" />
           </a>
         </div>
@@ -221,15 +223,15 @@ function CredentialsSettings() {
         {showNewKeyForm && (
           <div className="mb-4 p-4 border rounded-lg bg-card">
             <Input
-              placeholder="API Key Name (e.g., Production Server)"
+              placeholder={t('apiKeys.form.placeholder')}
               value={newKeyName}
               onChange={(e) => setNewKeyName(e.target.value)}
               className="mb-2"
             />
             <div className="flex gap-2">
-              <Button onClick={createApiKey}>Create</Button>
+              <Button onClick={createApiKey}>{t('apiKeys.form.createButton')}</Button>
               <Button variant="outline" onClick={() => setShowNewKeyForm(false)}>
-                Cancel
+                {t('apiKeys.form.cancelButton')}
               </Button>
             </div>
           </div>
@@ -237,7 +239,7 @@ function CredentialsSettings() {
 
         <div className="space-y-2">
           {apiKeys.length === 0 ? (
-            <p className="text-sm text-muted-foreground italic">No API keys created yet.</p>
+            <p className="text-sm text-muted-foreground italic">{t('apiKeys.empty')}</p>
           ) : (
             apiKeys.map((key) => (
               <div
@@ -248,8 +250,8 @@ function CredentialsSettings() {
                   <div className="font-medium">{key.key_name}</div>
                   <code className="text-xs text-muted-foreground">{key.api_key}</code>
                   <div className="text-xs text-muted-foreground mt-1">
-                    Created: {new Date(key.created_at).toLocaleDateString()}
-                    {key.last_used && ` • Last used: ${new Date(key.last_used).toLocaleDateString()}`}
+                    {t('apiKeys.list.created')} {new Date(key.created_at).toLocaleDateString()}
+                    {key.last_used && ` • ${t('apiKeys.list.lastUsed')} ${new Date(key.last_used).toLocaleDateString()}`}
                   </div>
                 </div>
                 <div className="flex items-center gap-2">
@@ -258,7 +260,7 @@ function CredentialsSettings() {
                     variant={key.is_active ? 'outline' : 'secondary'}
                     onClick={() => toggleApiKey(key.id, key.is_active)}
                   >
-                    {key.is_active ? 'Active' : 'Inactive'}
+                    {key.is_active ? t('apiKeys.status.active') : t('apiKeys.status.inactive')}
                   </Button>
                   <Button
                     size="sm"
@@ -279,25 +281,25 @@ function CredentialsSettings() {
         <div className="flex items-center justify-between mb-4">
           <div className="flex items-center gap-2">
             <Github className="h-5 w-5" />
-            <h3 className="text-lg font-semibold">GitHub Credentials</h3>
+            <h3 className="text-lg font-semibold">{t('apiKeys.github.title')}</h3>
           </div>
           <Button
             size="sm"
             onClick={() => setShowNewGithubForm(!showNewGithubForm)}
           >
             <Plus className="h-4 w-4 mr-1" />
-            Add Token
+            {t('apiKeys.github.addButton')}
           </Button>
         </div>
 
         <p className="text-sm text-muted-foreground mb-4">
-          Add GitHub Personal Access Tokens to clone private repositories. You can also pass tokens directly in API requests without storing them.
+          {t('apiKeys.github.descriptionAlt')}
         </p>
 
         {showNewGithubForm && (
           <div className="mb-4 p-4 border rounded-lg bg-card space-y-3">
             <Input
-              placeholder="Token Name (e.g., Personal Repos)"
+              placeholder={t('apiKeys.github.form.namePlaceholder')}
               value={newGithubName}
               onChange={(e) => setNewGithubName(e.target.value)}
             />
@@ -305,7 +307,7 @@ function CredentialsSettings() {
             <div className="relative">
               <Input
                 type={showToken['new'] ? 'text' : 'password'}
-                placeholder="GitHub Personal Access Token (ghp_...)"
+                placeholder={t('apiKeys.github.form.tokenPlaceholder')}
                 value={newGithubToken}
                 onChange={(e) => setNewGithubToken(e.target.value)}
                 className="pr-10"
@@ -320,20 +322,20 @@ function CredentialsSettings() {
             </div>
 
             <Input
-              placeholder="Description (optional)"
+              placeholder={t('apiKeys.github.form.descriptionPlaceholder')}
               value={newGithubDescription}
               onChange={(e) => setNewGithubDescription(e.target.value)}
             />
 
             <div className="flex gap-2">
-              <Button onClick={createGithubCredential}>Add Token</Button>
+              <Button onClick={createGithubCredential}>{t('apiKeys.github.form.addButton')}</Button>
               <Button variant="outline" onClick={() => {
                 setShowNewGithubForm(false);
                 setNewGithubName('');
                 setNewGithubToken('');
                 setNewGithubDescription('');
               }}>
-                Cancel
+                {t('apiKeys.github.form.cancelButton')}
               </Button>
             </div>
 
@@ -343,14 +345,14 @@ function CredentialsSettings() {
               rel="noopener noreferrer"
               className="text-xs text-primary hover:underline block"
             >
-              How to create a GitHub Personal Access Token →
+              {t('apiKeys.github.form.howToCreate')}
             </a>
           </div>
         )}
 
         <div className="space-y-2">
           {githubCredentials.length === 0 ? (
-            <p className="text-sm text-muted-foreground italic">No GitHub tokens added yet.</p>
+            <p className="text-sm text-muted-foreground italic">{t('apiKeys.github.empty')}</p>
           ) : (
             githubCredentials.map((credential) => (
               <div
@@ -363,7 +365,7 @@ function CredentialsSettings() {
                     <div className="text-xs text-muted-foreground">{credential.description}</div>
                   )}
                   <div className="text-xs text-muted-foreground mt-1">
-                    Added: {new Date(credential.created_at).toLocaleDateString()}
+                    {t('apiKeys.github.added')} {new Date(credential.created_at).toLocaleDateString()}
                   </div>
                 </div>
                 <div className="flex items-center gap-2">
@@ -372,7 +374,7 @@ function CredentialsSettings() {
                     variant={credential.is_active ? 'outline' : 'secondary'}
                     onClick={() => toggleGithubCredential(credential.id, credential.is_active)}
                   >
-                    {credential.is_active ? 'Active' : 'Inactive'}
+                    {credential.is_active ? t('apiKeys.status.active') : t('apiKeys.status.inactive')}
                   </Button>
                   <Button
                     size="sm"
@@ -406,7 +408,7 @@ function CredentialsSettings() {
               rel="noopener noreferrer"
               className="flex items-center gap-1.5 px-2 py-0.5 bg-green-500/10 text-green-600 dark:text-green-400 rounded-full hover:bg-green-500/20 transition-colors not-italic font-medium"
             >
-              <span className="text-[10px]">Update available: v{latestVersion}</span>
+              <span className="text-[10px]">{t('apiKeys.version.updateAvailable', { version: latestVersion })}</span>
               <ExternalLink className="h-2.5 w-2.5" />
             </a>
           )}
diff --git a/src/components/GitSettings.jsx b/src/components/GitSettings.jsx
index 91b0902..cdce8e4 100644
--- a/src/components/GitSettings.jsx
+++ b/src/components/GitSettings.jsx
@@ -3,8 +3,10 @@ import { Button } from './ui/button';
 import { Input } from './ui/input';
 import { GitBranch, Check } from 'lucide-react';
 import { authenticatedFetch } from '../utils/api';
+import { useTranslation } from 'react-i18next';
 
 function GitSettings() {
+  const { t } = useTranslation('settings');
   const [gitName, setGitName] = useState('');
   const [gitEmail, setGitEmail] = useState('');
   const [gitConfigLoading, setGitConfigLoading] = useState(false);
@@ -61,17 +63,17 @@ function GitSettings() {
       <div>
         <div className="flex items-center gap-2 mb-4">
           <GitBranch className="h-5 w-5" />
-          <h3 className="text-lg font-semibold">Git Configuration</h3>
+          <h3 className="text-lg font-semibold">{t('git.title')}</h3>
         </div>
 
         <p className="text-sm text-muted-foreground mb-4">
-          Configure your git identity for commits. These settings will be applied globally via <code className="bg-muted px-2 py-0.5 rounded text-xs">git config --global</code>
+          {t('git.description')}
         </p>
 
         <div className="p-4 border rounded-lg bg-card space-y-3">
           <div>
             <label htmlFor="settings-git-name" className="block text-sm font-medium text-foreground mb-2">
-              Git Name
+              {t('git.name.label')}
             </label>
             <Input
               id="settings-git-name"
@@ -83,13 +85,13 @@ function GitSettings() {
               className="w-full"
             />
             <p className="mt-1 text-xs text-muted-foreground">
-              Your name for git commits
+              {t('git.name.help')}
             </p>
           </div>
 
           <div>
             <label htmlFor="settings-git-email" className="block text-sm font-medium text-foreground mb-2">
-              Git Email
+              {t('git.email.label')}
             </label>
             <Input
               id="settings-git-email"
@@ -101,7 +103,7 @@ function GitSettings() {
               className="w-full"
             />
             <p className="mt-1 text-xs text-muted-foreground">
-              Your email for git commits
+              {t('git.email.help')}
             </p>
           </div>
 
@@ -110,13 +112,13 @@ function GitSettings() {
               onClick={saveGitConfig}
               disabled={gitConfigSaving || !gitName || !gitEmail}
             >
-              {gitConfigSaving ? 'Saving...' : 'Save Configuration'}
+              {gitConfigSaving ? t('git.actions.saving') : t('git.actions.save')}
             </Button>
 
             {saveStatus === 'success' && (
               <div className="text-sm text-green-600 dark:text-green-400 flex items-center gap-2">
                 <Check className="w-4 h-4" />
-                Saved successfully
+                {t('git.status.success')}
               </div>
             )}
           </div>
diff --git a/src/components/Settings.jsx b/src/components/Settings.jsx
index cc8809f..9f541e9 100644
--- a/src/components/Settings.jsx
+++ b/src/components/Settings.jsx
@@ -950,7 +950,7 @@ function Settings({ isOpen, onClose, projects = [], initialTab = 'agents' }) {
           <div className="flex items-center gap-3">
             <SettingsIcon className="w-5 h-5 md:w-6 md:h-6 text-blue-600" />
             <h2 className="text-lg md:text-xl font-semibold text-foreground">
-              Settings
+              {t('title')}
             </h2>
           </div>
           <Button
@@ -975,7 +975,7 @@ function Settings({ isOpen, onClose, projects = [], initialTab = 'agents' }) {
                     : 'border-transparent text-muted-foreground hover:text-foreground'
                 }`}
               >
-                Agents
+                {t('mainTabs.agents')}
               </button>
               <button
                 onClick={() => setActiveTab('appearance')}
@@ -985,7 +985,7 @@ function Settings({ isOpen, onClose, projects = [], initialTab = 'agents' }) {
                     : 'border-transparent text-muted-foreground hover:text-foreground'
                 }`}
               >
-                Appearance
+                {t('mainTabs.appearance')}
               </button>
               <button
                 onClick={() => setActiveTab('git')}
@@ -996,7 +996,7 @@ function Settings({ isOpen, onClose, projects = [], initialTab = 'agents' }) {
                 }`}
               >
                 <GitBranch className="w-4 h-4 inline mr-2" />
-                Git
+                {t('mainTabs.git')}
               </button>
               <button
                 onClick={() => setActiveTab('api')}
@@ -1007,7 +1007,7 @@ function Settings({ isOpen, onClose, projects = [], initialTab = 'agents' }) {
                 }`}
               >
                 <Key className="w-4 h-4 inline mr-2" />
-                API & Tokens
+                {t('mainTabs.apiTokens')}
               </button>
               <button
                 onClick={() => setActiveTab('tasks')}
@@ -1017,7 +1017,7 @@ function Settings({ isOpen, onClose, projects = [], initialTab = 'agents' }) {
                     : 'border-transparent text-muted-foreground hover:text-foreground'
                 }`}
               >
-                Tasks
+                {t('mainTabs.tasks')}
               </button>
             </div>
           </div>
@@ -1035,10 +1035,10 @@ function Settings({ isOpen, onClose, projects = [], initialTab = 'agents' }) {
         <div className="flex items-center justify-between">
           <div>
             <div className="font-medium text-foreground">
-              Dark Mode
+              {t('appearanceSettings.darkMode.label')}
             </div>
             <div className="text-sm text-muted-foreground">
-              Toggle between light and dark themes
+              {t('appearanceSettings.darkMode.description')}
             </div>
           </div>
           <button
@@ -1076,10 +1076,10 @@ function Settings({ isOpen, onClose, projects = [], initialTab = 'agents' }) {
         <div className="flex items-center justify-between">
           <div>
             <div className="font-medium text-foreground">
-              Project Sorting
+              {t('appearanceSettings.projectSorting.label')}
             </div>
             <div className="text-sm text-muted-foreground">
-              How projects are ordered in the sidebar
+              {t('appearanceSettings.projectSorting.description')}
             </div>
           </div>
           <select
@@ -1087,8 +1087,8 @@ function Settings({ isOpen, onClose, projects = [], initialTab = 'agents' }) {
             onChange={(e) => setProjectSortOrder(e.target.value)}
             className="text-sm bg-gray-50 dark:bg-gray-800 border border-gray-300 dark:border-gray-600 text-gray-900 dark:text-gray-100 rounded-lg focus:ring-blue-500 focus:border-blue-500 p-2 w-32"
           >
-            <option value="name">Alphabetical</option>
-            <option value="date">Recent Activity</option>
+            <option value="name">{t('appearanceSettings.projectSorting.alphabetical')}</option>
+            <option value="date">{t('appearanceSettings.projectSorting.recentActivity')}</option>
           </select>
         </div>
       </div>
@@ -1096,17 +1096,17 @@ function Settings({ isOpen, onClose, projects = [], initialTab = 'agents' }) {
 
     {/* Code Editor Settings */}
     <div className="space-y-4">
-      <h3 className="text-lg font-semibold text-foreground">Code Editor</h3>
+      <h3 className="text-lg font-semibold text-foreground">{t('appearanceSettings.codeEditor.title')}</h3>
 
       {/* Editor Theme */}
       <div className="bg-gray-50 dark:bg-gray-900/50 border border-gray-200 dark:border-gray-700 rounded-lg p-4">
         <div className="flex items-center justify-between">
           <div>
             <div className="font-medium text-foreground">
-              Editor Theme
+              {t('appearanceSettings.codeEditor.theme.label')}
             </div>
             <div className="text-sm text-muted-foreground">
-              Default theme for the code editor
+              {t('appearanceSettings.codeEditor.theme.description')}
             </div>
           </div>
           <button
@@ -1137,10 +1137,10 @@ function Settings({ isOpen, onClose, projects = [], initialTab = 'agents' }) {
         <div className="flex items-center justify-between">
           <div>
             <div className="font-medium text-foreground">
-              Word Wrap
+              {t('appearanceSettings.codeEditor.wordWrap.label')}
             </div>
             <div className="text-sm text-muted-foreground">
-              Enable word wrapping by default in the editor
+              {t('appearanceSettings.codeEditor.wordWrap.description')}
             </div>
           </div>
           <button
@@ -1165,10 +1165,10 @@ function Settings({ isOpen, onClose, projects = [], initialTab = 'agents' }) {
         <div className="flex items-center justify-between">
           <div>
             <div className="font-medium text-foreground">
-              Show Minimap
+              {t('appearanceSettings.codeEditor.showMinimap.label')}
             </div>
             <div className="text-sm text-muted-foreground">
-              Display a minimap for easier navigation in diff view
+              {t('appearanceSettings.codeEditor.showMinimap.description')}
             </div>
           </div>
           <button
@@ -1193,10 +1193,10 @@ function Settings({ isOpen, onClose, projects = [], initialTab = 'agents' }) {
         <div className="flex items-center justify-between">
           <div>
             <div className="font-medium text-foreground">
-              Show Line Numbers
+              {t('appearanceSettings.codeEditor.lineNumbers.label')}
             </div>
             <div className="text-sm text-muted-foreground">
-              Display line numbers in the editor
+              {t('appearanceSettings.codeEditor.lineNumbers.description')}
             </div>
           </div>
           <button
@@ -1221,10 +1221,10 @@ function Settings({ isOpen, onClose, projects = [], initialTab = 'agents' }) {
         <div className="flex items-center justify-between">
           <div>
             <div className="font-medium text-foreground">
-              Font Size
+              {t('appearanceSettings.codeEditor.fontSize.label')}
             </div>
             <div className="text-sm text-muted-foreground">
-              Editor font size in pixels
+              {t('appearanceSettings.codeEditor.fontSize.description')}
             </div>
           </div>
           <select
@@ -1452,7 +1452,7 @@ function Settings({ isOpen, onClose, projects = [], initialTab = 'agents' }) {
                 <div className="bg-background border border-border rounded-lg w-full max-w-2xl max-h-[90vh] overflow-y-auto">
                   <div className="flex items-center justify-between p-4 border-b border-border">
                     <h3 className="text-lg font-medium text-foreground">
-                      {editingMcpServer ? 'Edit MCP Server' : 'Add MCP Server'}
+                      {editingMcpServer ? t('mcpForm.title.edit') : t('mcpForm.title.add')}
                     </h3>
                     <Button variant="ghost" size="sm" onClick={resetMcpForm}>
                       <X className="w-4 h-4" />
@@ -1472,7 +1472,7 @@ function Settings({ isOpen, onClose, projects = [], initialTab = 'agents' }) {
                             : 'bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700'
                         }`}
                       >
-                        Form Input
+                        {t('mcpForm.importMode.form')}
                       </button>
                       <button
                         type="button"
@@ -1483,7 +1483,7 @@ function Settings({ isOpen, onClose, projects = [], initialTab = 'agents' }) {
                             : 'bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700'
                         }`}
                       >
-                        JSON Import
+                        {t('mcpForm.importMode.json')}
                       </button>
                     </div>
                     )}
@@ -1492,12 +1492,12 @@ function Settings({ isOpen, onClose, projects = [], initialTab = 'agents' }) {
                     {mcpFormData.importMode === 'form' && editingMcpServer && (
                       <div className="bg-gray-50 dark:bg-gray-900/50 border border-gray-200 dark:border-gray-700 rounded-lg p-3">
                         <label className="block text-sm font-medium text-foreground mb-2">
-                          Scope
+                          {t('mcpForm.scope.label')}
                         </label>
                         <div className="flex items-center gap-2">
                           {mcpFormData.scope === 'user' ? <Globe className="w-4 h-4" /> : <FolderOpen className="w-4 h-4" />}
                           <span className="text-sm">
-                            {mcpFormData.scope === 'user' ? 'User (Global)' : 'Project (Local)'}
+                            {mcpFormData.scope === 'user' ? t('mcpForm.scope.userGlobal') : t('mcpForm.scope.projectLocal')}
                           </span>
                           {mcpFormData.scope === 'local' && mcpFormData.projectPath && (
                             <span className="text-xs text-muted-foreground">
@@ -1506,7 +1506,7 @@ function Settings({ isOpen, onClose, projects = [], initialTab = 'agents' }) {
                           )}
                         </div>
                         <p className="text-xs text-muted-foreground mt-2">
-                          Scope cannot be changed when editing an existing server
+                          {t('mcpForm.scope.cannotChange')}
                         </p>
                       </div>
                     )}
@@ -1516,7 +1516,7 @@ function Settings({ isOpen, onClose, projects = [], initialTab = 'agents' }) {
                       <div className="space-y-4">
                         <div>
                           <label className="block text-sm font-medium text-foreground mb-2">
-                            Scope *
+                            {t('mcpForm.scope.label')} *
                           </label>
                           <div className="flex gap-2">
                             <button
@@ -1530,7 +1530,7 @@ function Settings({ isOpen, onClose, projects = [], initialTab = 'agents' }) {
                             >
                               <div className="flex items-center justify-center gap-2">
                                 <Globe className="w-4 h-4" />
-                                <span>User (Global)</span>
+                                <span>{t('mcpForm.scope.userGlobal')}</span>
                               </div>
                             </button>
                             <button
@@ -1544,14 +1544,14 @@ function Settings({ isOpen, onClose, projects = [], initialTab = 'agents' }) {
                             >
                               <div className="flex items-center justify-center gap-2">
                                 <FolderOpen className="w-4 h-4" />
-                                <span>Project (Local)</span>
+                                <span>{t('mcpForm.scope.projectLocal')}</span>
                               </div>
                             </button>
                           </div>
                           <p className="text-xs text-muted-foreground mt-2">
-                            {mcpFormData.scope === 'user' 
-                              ? 'User scope: Available across all projects on your machine'
-                              : 'Local scope: Only available in the selected project'
+                            {mcpFormData.scope === 'user'
+                              ? t('mcpForm.scope.userDescription')
+                              : t('mcpForm.scope.projectDescription')
                             }
                           </p>
                         </div>
@@ -1560,7 +1560,7 @@ function Settings({ isOpen, onClose, projects = [], initialTab = 'agents' }) {
                         {mcpFormData.scope === 'local' && !editingMcpServer && (
                           <div>
                             <label className="block text-sm font-medium text-foreground mb-2">
-                              Project *
+                              {t('mcpForm.fields.selectProject')} *
                             </label>
                             <select
                               value={mcpFormData.projectPath}
@@ -1568,7 +1568,7 @@ function Settings({ isOpen, onClose, projects = [], initialTab = 'agents' }) {
                               className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 bg-gray-50 dark:bg-gray-800 text-gray-900 dark:text-gray-100 rounded-lg focus:ring-blue-500 focus:border-blue-500"
                               required={mcpFormData.scope === 'local'}
                             >
-                              <option value="">Select a project...</option>
+                              <option value="">{t('mcpForm.fields.selectProject')}...</option>
                               {projects.map(project => (
                                 <option key={project.name} value={project.path || project.fullPath}>
                                   {project.displayName || project.name}
@@ -1577,7 +1577,7 @@ function Settings({ isOpen, onClose, projects = [], initialTab = 'agents' }) {
                             </select>
                             {mcpFormData.projectPath && (
                               <p className="text-xs text-muted-foreground mt-1">
-                                Path: {mcpFormData.projectPath}
+                                {t('mcpForm.projectPath', { path: mcpFormData.projectPath })}
                               </p>
                             )}
                           </div>
@@ -1589,22 +1589,22 @@ function Settings({ isOpen, onClose, projects = [], initialTab = 'agents' }) {
                     <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                       <div className={mcpFormData.importMode === 'json' ? 'md:col-span-2' : ''}>
                         <label className="block text-sm font-medium text-foreground mb-2">
-                          Server Name *
+                          {t('mcpForm.fields.serverName')} *
                         </label>
                         <Input
                           value={mcpFormData.name}
                           onChange={(e) => {
                             setMcpFormData(prev => ({...prev, name: e.target.value}));
                           }}
-                          placeholder="my-server"
+                          placeholder={t('mcpForm.placeholders.serverName')}
                           required
                         />
                       </div>
-                      
+
                       {mcpFormData.importMode === 'form' && (
                         <div>
                           <label className="block text-sm font-medium text-foreground mb-2">
-                            Transport Type *
+                            {t('mcpForm.fields.transportType')} *
                           </label>
                           <select
                             value={mcpFormData.type}
@@ -1626,7 +1626,7 @@ function Settings({ isOpen, onClose, projects = [], initialTab = 'agents' }) {
                     {editingMcpServer && mcpFormData.raw && mcpFormData.importMode === 'form' && (
                       <div className="bg-gray-50 dark:bg-gray-900/50 border border-gray-200 dark:border-gray-700 rounded-lg p-4">
                         <h4 className="text-sm font-medium text-foreground mb-2">
-                          Configuration Details (from {editingMcpServer.scope === 'global' ? '~/.claude.json' : 'project config'})
+                          {t('mcpForm.configDetails', { configFile: editingMcpServer.scope === 'global' ? '~/.claude.json' : 'project config' })}
                         </h4>
                         <pre className="text-xs bg-gray-100 dark:bg-gray-800 p-3 rounded overflow-x-auto">
                           {JSON.stringify(mcpFormData.raw, null, 2)}
@@ -1639,7 +1639,7 @@ function Settings({ isOpen, onClose, projects = [], initialTab = 'agents' }) {
                       <div className="space-y-4">
                         <div>
                           <label className="block text-sm font-medium text-foreground mb-2">
-                            JSON Configuration *
+                            {t('mcpForm.fields.jsonConfig')} *
                           </label>
                           <textarea
                             value={mcpFormData.jsonInput}
@@ -1651,18 +1651,18 @@ function Settings({ isOpen, onClose, projects = [], initialTab = 'agents' }) {
                                   const parsed = JSON.parse(e.target.value);
                                   // Basic validation
                                   if (!parsed.type) {
-                                    setJsonValidationError('Missing required field: type');
+                                    setJsonValidationError(t('mcpForm.validation.missingType'));
                                   } else if (parsed.type === 'stdio' && !parsed.command) {
-                                    setJsonValidationError('stdio type requires a command field');
+                                    setJsonValidationError(t('mcpForm.validation.stdioRequiresCommand'));
                                   } else if ((parsed.type === 'http' || parsed.type === 'sse') && !parsed.url) {
-                                    setJsonValidationError(`${parsed.type} type requires a url field`);
+                                    setJsonValidationError(t('mcpForm.validation.httpRequiresUrl', { type: parsed.type }));
                                   } else {
                                     setJsonValidationError('');
                                   }
                                 }
                               } catch (err) {
                                 if (e.target.value.trim()) {
-                                  setJsonValidationError('Invalid JSON format');
+                                  setJsonValidationError(t('mcpForm.validation.invalidJson'));
                                 } else {
                                   setJsonValidationError('');
                                 }
@@ -1677,7 +1677,7 @@ function Settings({ isOpen, onClose, projects = [], initialTab = 'agents' }) {
                             <p className="text-xs text-red-500 mt-1">{jsonValidationError}</p>
                           )}
                           <p className="text-xs text-muted-foreground mt-2">
-                            Paste your MCP server configuration in JSON format. Example formats:
+                            {t('mcpForm.validation.jsonHelp')}
                             <br />• stdio: {`{"type":"stdio","command":"npx","args":["@upstash/context7-mcp"]}`}
                             <br />• http/sse: {`{"type":"http","url":"https://api.example.com/mcp"}`}
                           </p>
@@ -1690,7 +1690,7 @@ function Settings({ isOpen, onClose, projects = [], initialTab = 'agents' }) {
                       <div className="space-y-4">
                         <div>
                           <label className="block text-sm font-medium text-foreground mb-2">
-                            Command *
+                            {t('mcpForm.fields.command')} *
                           </label>
                           <Input
                             value={mcpFormData.config.command}
@@ -1699,10 +1699,10 @@ function Settings({ isOpen, onClose, projects = [], initialTab = 'agents' }) {
                             required
                           />
                         </div>
-                        
+
                         <div>
                           <label className="block text-sm font-medium text-foreground mb-2">
-                            Arguments (one per line)
+                            {t('mcpForm.fields.arguments')}
                           </label>
                           <textarea
                             value={Array.isArray(mcpFormData.config.args) ? mcpFormData.config.args.join('\n') : ''}
@@ -1718,7 +1718,7 @@ function Settings({ isOpen, onClose, projects = [], initialTab = 'agents' }) {
                     {mcpFormData.importMode === 'form' && (mcpFormData.type === 'sse' || mcpFormData.type === 'http') && (
                       <div>
                         <label className="block text-sm font-medium text-foreground mb-2">
-                          URL *
+                          {t('mcpForm.fields.url')} *
                         </label>
                         <Input
                           value={mcpFormData.config.url}
@@ -1734,7 +1734,7 @@ function Settings({ isOpen, onClose, projects = [], initialTab = 'agents' }) {
                     {mcpFormData.importMode === 'form' && (
                       <div>
                       <label className="block text-sm font-medium text-foreground mb-2">
-                        Environment Variables (KEY=value, one per line)
+                        {t('mcpForm.fields.envVars')}
                       </label>
                       <textarea
                         value={Object.entries(mcpFormData.config.env || {}).map(([k, v]) => `${k}=${v}`).join('\n')}
@@ -1758,7 +1758,7 @@ function Settings({ isOpen, onClose, projects = [], initialTab = 'agents' }) {
                     {mcpFormData.importMode === 'form' && (mcpFormData.type === 'sse' || mcpFormData.type === 'http') && (
                       <div>
                         <label className="block text-sm font-medium text-foreground mb-2">
-                          Headers (KEY=value, one per line)
+                          {t('mcpForm.fields.headers')}
                         </label>
                         <textarea
                           value={Object.entries(mcpFormData.config.headers || {}).map(([k, v]) => `${k}=${v}`).join('\n')}
@@ -1782,14 +1782,14 @@ function Settings({ isOpen, onClose, projects = [], initialTab = 'agents' }) {
 
                     <div className="flex justify-end gap-2 pt-4">
                       <Button type="button" variant="outline" onClick={resetMcpForm}>
-                        Cancel
+                        {t('mcpForm.actions.cancel')}
                       </Button>
-                      <Button 
-                        type="submit" 
-                        disabled={mcpLoading} 
+                      <Button
+                        type="submit"
+                        disabled={mcpLoading}
                         className="bg-purple-600 hover:bg-purple-700 disabled:opacity-50"
                       >
-                        {mcpLoading ? 'Saving...' : (editingMcpServer ? 'Update Server' : 'Add Server')}
+                        {mcpLoading ? t('mcpForm.actions.saving') : (editingMcpServer ? t('mcpForm.actions.updateServer') : t('mcpForm.actions.addServer'))}
                       </Button>
                     </div>
                   </form>
@@ -1803,7 +1803,7 @@ function Settings({ isOpen, onClose, projects = [], initialTab = 'agents' }) {
                 <div className="bg-background border border-border rounded-lg w-full max-w-lg max-h-[90vh] overflow-y-auto">
                   <div className="flex items-center justify-between p-4 border-b border-border">
                     <h3 className="text-lg font-medium text-foreground">
-                      {editingCodexMcpServer ? 'Edit MCP Server' : 'Add MCP Server'}
+                      {editingCodexMcpServer ? t('mcpForm.title.edit') : t('mcpForm.title.add')}
                     </h3>
                     <Button variant="ghost" size="sm" onClick={resetCodexMcpForm}>
                       <X className="w-4 h-4" />
@@ -1813,19 +1813,19 @@ function Settings({ isOpen, onClose, projects = [], initialTab = 'agents' }) {
                   <form onSubmit={handleCodexMcpSubmit} className="p-4 space-y-4">
                     <div>
                       <label className="block text-sm font-medium text-foreground mb-2">
-                        Server Name *
+                        {t('mcpForm.fields.serverName')} *
                       </label>
                       <Input
                         value={codexMcpFormData.name}
                         onChange={(e) => setCodexMcpFormData(prev => ({...prev, name: e.target.value}))}
-                        placeholder="my-mcp-server"
+                        placeholder={t('mcpForm.placeholders.serverName')}
                         required
                       />
                     </div>
 
                     <div>
                       <label className="block text-sm font-medium text-foreground mb-2">
-                        Command *
+                        {t('mcpForm.fields.command')} *
                       </label>
                       <Input
                         value={codexMcpFormData.config?.command || ''}
@@ -1840,7 +1840,7 @@ function Settings({ isOpen, onClose, projects = [], initialTab = 'agents' }) {
 
                     <div>
                       <label className="block text-sm font-medium text-foreground mb-2">
-                        Arguments (one per line)
+                        {t('mcpForm.fields.arguments')}
                       </label>
                       <textarea
                         value={(codexMcpFormData.config?.args || []).join('\n')}
@@ -1856,7 +1856,7 @@ function Settings({ isOpen, onClose, projects = [], initialTab = 'agents' }) {
 
                     <div>
                       <label className="block text-sm font-medium text-foreground mb-2">
-                        Environment Variables (KEY=VALUE, one per line)
+                        {t('mcpForm.fields.envVars')}
                       </label>
                       <textarea
                         value={Object.entries(codexMcpFormData.config?.env || {}).map(([k, v]) => `${k}=${v}`).join('\n')}
@@ -1881,14 +1881,14 @@ function Settings({ isOpen, onClose, projects = [], initialTab = 'agents' }) {
 
                     <div className="flex justify-end gap-2 pt-4 border-t border-border">
                       <Button type="button" variant="outline" onClick={resetCodexMcpForm}>
-                        Cancel
+                        {t('mcpForm.actions.cancel')}
                       </Button>
                       <Button
                         type="submit"
                         disabled={codexMcpLoading || !codexMcpFormData.name || !codexMcpFormData.config?.command}
                         className="bg-green-600 hover:bg-green-700 text-white"
                       >
-                        {codexMcpLoading ? 'Saving...' : (editingCodexMcpServer ? 'Update Server' : 'Add Server')}
+                        {codexMcpLoading ? t('mcpForm.actions.saving') : (editingCodexMcpServer ? t('mcpForm.actions.updateServer') : t('mcpForm.actions.addServer'))}
                       </Button>
                     </div>
                   </form>
@@ -1919,7 +1919,7 @@ function Settings({ isOpen, onClose, projects = [], initialTab = 'agents' }) {
                 <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                   <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
                 </svg>
-                Settings saved successfully!
+                {t('saveStatus.success')}
               </div>
             )}
             {saveStatus === 'error' && (
@@ -1927,31 +1927,31 @@ function Settings({ isOpen, onClose, projects = [], initialTab = 'agents' }) {
                 <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                   <path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
                 </svg>
-                Failed to save settings
+                {t('saveStatus.error')}
               </div>
             )}
           </div>
           <div className="flex items-center gap-3 order-1 sm:order-2">
-            <Button 
-              variant="outline" 
-              onClick={onClose} 
+            <Button
+              variant="outline"
+              onClick={onClose}
               disabled={isSaving}
               className="flex-1 sm:flex-none h-10 touch-manipulation"
             >
-              Cancel
+              {t('footerActions.cancel')}
             </Button>
-            <Button 
-              onClick={saveSettings} 
+            <Button
+              onClick={saveSettings}
               disabled={isSaving}
               className="flex-1 sm:flex-none h-10 bg-blue-600 hover:bg-blue-700 disabled:opacity-50 touch-manipulation"
             >
               {isSaving ? (
                 <div className="flex items-center gap-2">
                   <div className="w-4 h-4 animate-spin rounded-full border-2 border-white border-t-transparent" />
-                  Saving...
+                  {t('saveStatus.saving')}
                 </div>
               ) : (
-                'Save Settings'
+                t('footerActions.save')
               )}
             </Button>
           </div>
diff --git a/src/components/TasksSettings.jsx b/src/components/TasksSettings.jsx
index ffb4cc3..dda0cf1 100644
--- a/src/components/TasksSettings.jsx
+++ b/src/components/TasksSettings.jsx
@@ -1,7 +1,9 @@
 import { Zap } from 'lucide-react';
 import { useTasksSettings } from '../contexts/TasksSettingsContext';
+import { useTranslation } from 'react-i18next';
 
 function TasksSettings() {
+  const { t } = useTranslation('settings');
   const {
     tasksEnabled,
     setTasksEnabled,
@@ -16,7 +18,7 @@ function TasksSettings() {
         <div className="bg-gray-50 dark:bg-gray-900/50 border border-gray-200 dark:border-gray-700 rounded-lg p-4">
           <div className="flex items-center gap-3">
             <div className="animate-spin w-5 h-5 border-2 border-blue-600 border-t-transparent rounded-full"></div>
-            <span className="text-sm text-muted-foreground">Checking TaskMaster installation...</span>
+            <span className="text-sm text-muted-foreground">{t('tasks.checking')}</span>
           </div>
         </div>
       ) : (
@@ -32,13 +34,13 @@ function TasksSettings() {
                 </div>
                 <div className="flex-1">
                   <div className="font-medium text-orange-900 dark:text-orange-100 mb-2">
-                    TaskMaster AI CLI Not Installed
+                    {t('tasks.notInstalled.title')}
                   </div>
                   <div className="text-sm text-orange-800 dark:text-orange-200 space-y-3">
-                    <p>TaskMaster CLI is required to use task management features. Install it to get started:</p>
+                    <p>{t('tasks.notInstalled.description')}</p>
 
                     <div className="bg-orange-100 dark:bg-orange-900/50 rounded-lg p-3 font-mono text-sm">
-                      <code>npm install -g task-master-ai</code>
+                      <code>{t('tasks.notInstalled.installCommand')}</code>
                     </div>
 
                     <div>
@@ -51,7 +53,7 @@ function TasksSettings() {
                         <svg className="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
                           <path fillRule="evenodd" d="M10 0C4.477 0 0 4.484 0 10.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0110 4.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.203 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.942.359.31.678.921.678 1.856 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0020 10.017C20 4.484 15.522 0 10 0z" clipRule="evenodd" />
                         </svg>
-                        View on GitHub
+                        {t('tasks.notInstalled.viewOnGitHub')}
                         <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                           <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
                         </svg>
@@ -59,11 +61,11 @@ function TasksSettings() {
                     </div>
 
                     <div className="space-y-2">
-                      <p className="font-medium">After installation:</p>
+                      <p className="font-medium">{t('tasks.notInstalled.afterInstallation')}</p>
                       <ol className="list-decimal list-inside space-y-1 text-xs">
-                        <li>Restart this application</li>
-                        <li>TaskMaster features will automatically become available</li>
-                        <li>Use <code className="bg-orange-100 dark:bg-orange-800 px-1 rounded">task-master init</code> in your project directory</li>
+                        <li>{t('tasks.notInstalled.steps.restart')}</li>
+                        <li>{t('tasks.notInstalled.steps.autoAvailable')}</li>
+                        <li>Use <code className="bg-orange-100 dark:bg-orange-800 px-1 rounded">task-master init</code> {t('tasks.notInstalled.steps.initCommand')}</li>
                       </ol>
                     </div>
                   </div>
@@ -79,10 +81,10 @@ function TasksSettings() {
                 <div className="flex items-center justify-between">
                   <div>
                     <div className="font-medium text-foreground">
-                      Enable TaskMaster Integration
+                      {t('tasks.settings.enableLabel')}
                     </div>
                     <div className="text-sm text-muted-foreground mt-1">
-                      Show TaskMaster tasks, banners, and sidebar indicators across the interface
+                      {t('tasks.settings.enableDescription')}
                     </div>
                   </div>
                   <label className="relative inline-flex items-center cursor-pointer">
diff --git a/src/components/settings/AccountContent.jsx b/src/components/settings/AccountContent.jsx
index 93e0a9a..e9b2d3f 100644
--- a/src/components/settings/AccountContent.jsx
+++ b/src/components/settings/AccountContent.jsx
@@ -4,6 +4,7 @@ import { LogIn } from 'lucide-react';
 import ClaudeLogo from '../ClaudeLogo';
 import CursorLogo from '../CursorLogo';
 import CodexLogo from '../CodexLogo';
+import { useTranslation } from 'react-i18next';
 
 const agentConfig = {
   claude: {
@@ -39,6 +40,7 @@ const agentConfig = {
 };
 
 export default function AccountContent({ agent, authStatus, onLogin }) {
+  const { t } = useTranslation('settings');
   const config = agentConfig[agent];
   const { Logo } = config;
 
@@ -47,8 +49,8 @@ export default function AccountContent({ agent, authStatus, onLogin }) {
       <div className="flex items-center gap-3 mb-4">
         <Logo className="w-6 h-6" />
         <div>
-          <h3 className="text-lg font-medium text-foreground">{config.name} Account</h3>
-          <p className="text-sm text-muted-foreground">{config.description}</p>
+          <h3 className="text-lg font-medium text-foreground">{config.name}</h3>
+          <p className="text-sm text-muted-foreground">{t(`agents.account.${agent}.description`)}</p>
         </div>
       </div>
 
@@ -58,30 +60,30 @@ export default function AccountContent({ agent, authStatus, onLogin }) {
           <div className="flex items-center gap-3">
             <div className="flex-1">
               <div className={`font-medium ${config.textClass}`}>
-                Connection Status
+                {t('agents.connectionStatus')}
               </div>
               <div className={`text-sm ${config.subtextClass}`}>
                 {authStatus?.loading ? (
-                  'Checking authentication status...'
+                  t('agents.authStatus.checkingAuth')
                 ) : authStatus?.authenticated ? (
-                  `Logged in as ${authStatus.email || 'authenticated user'}`
+                  t('agents.authStatus.loggedInAs', { email: authStatus.email || t('agents.authStatus.authenticatedUser') })
                 ) : (
-                  'Not connected'
+                  t('agents.authStatus.notConnected')
                 )}
               </div>
             </div>
             <div>
               {authStatus?.loading ? (
                 <Badge variant="secondary" className="bg-gray-100 dark:bg-gray-800">
-                  Checking...
+                  {t('agents.authStatus.checking')}
                 </Badge>
               ) : authStatus?.authenticated ? (
                 <Badge variant="success" className="bg-green-100 text-green-800 dark:bg-green-900/30 dark:text-green-300">
-                  Connected
+                  {t('agents.authStatus.connected')}
                 </Badge>
               ) : (
                 <Badge variant="secondary" className="bg-gray-100 text-gray-800 dark:bg-gray-800 dark:text-gray-300">
-                  Disconnected
+                  {t('agents.authStatus.disconnected')}
                 </Badge>
               )}
             </div>
@@ -91,12 +93,12 @@ export default function AccountContent({ agent, authStatus, onLogin }) {
             <div className="flex items-center justify-between">
               <div>
                 <div className={`font-medium ${config.textClass}`}>
-                  {authStatus?.authenticated ? 'Re-authenticate' : 'Login'}
+                  {authStatus?.authenticated ? t('agents.login.reAuthenticate') : t('agents.login.title')}
                 </div>
                 <div className={`text-sm ${config.subtextClass}`}>
                   {authStatus?.authenticated
-                    ? 'Sign in with a different account or refresh credentials'
-                    : `Sign in to your ${config.name} account to enable AI features`}
+                    ? t('agents.login.reAuthDescription')
+                    : t('agents.login.description', { agent: config.name })}
                 </div>
               </div>
               <Button
@@ -105,7 +107,7 @@ export default function AccountContent({ agent, authStatus, onLogin }) {
                 size="sm"
               >
                 <LogIn className="w-4 h-4 mr-2" />
-                {authStatus?.authenticated ? 'Re-login' : 'Login'}
+                {authStatus?.authenticated ? t('agents.login.reLoginButton') : t('agents.login.button')}
               </Button>
             </div>
           </div>
@@ -113,7 +115,7 @@ export default function AccountContent({ agent, authStatus, onLogin }) {
           {authStatus?.error && (
             <div className="border-t border-gray-200 dark:border-gray-700 pt-4">
               <div className="text-sm text-red-600 dark:text-red-400">
-                Error: {authStatus.error}
+                {t('agents.error', { error: authStatus.error })}
               </div>
             </div>
           )}
diff --git a/src/components/settings/AgentListItem.jsx b/src/components/settings/AgentListItem.jsx
index e550c23..06e7477 100644
--- a/src/components/settings/AgentListItem.jsx
+++ b/src/components/settings/AgentListItem.jsx
@@ -1,6 +1,7 @@
 import ClaudeLogo from '../ClaudeLogo';
 import CursorLogo from '../CursorLogo';
 import CodexLogo from '../CodexLogo';
+import { useTranslation } from 'react-i18next';
 
 const agentConfig = {
   claude: {
@@ -42,6 +43,7 @@ const colorClasses = {
 };
 
 export default function AgentListItem({ agentId, authStatus, isSelected, onClick, isMobile = false }) {
+  const { t } = useTranslation('settings');
   const config = agentConfig[agentId];
   const colors = colorClasses[config.color];
   const { Logo } = config;
@@ -84,18 +86,18 @@ export default function AgentListItem({ agentId, authStatus, isSelected, onClick
       </div>
       <div className="text-xs text-muted-foreground pl-6">
         {authStatus?.loading ? (
-          <span className="text-gray-400">Checking...</span>
+          <span className="text-gray-400">{t('agents.authStatus.checking')}</span>
         ) : authStatus?.authenticated ? (
           <div className="flex items-center gap-1">
             <span className={`w-1.5 h-1.5 rounded-full ${colors.dot}`} />
             <span className="truncate max-w-[120px]" title={authStatus.email}>
-              {authStatus.email || 'Connected'}
+              {authStatus.email || t('agents.authStatus.connected')}
             </span>
           </div>
         ) : (
           <div className="flex items-center gap-1">
             <span className="w-1.5 h-1.5 rounded-full bg-gray-400" />
-            <span>Not connected</span>
+            <span>{t('agents.authStatus.notConnected')}</span>
           </div>
         )}
       </div>
diff --git a/src/components/settings/McpServersContent.jsx b/src/components/settings/McpServersContent.jsx
index 4495ef9..257f58a 100644
--- a/src/components/settings/McpServersContent.jsx
+++ b/src/components/settings/McpServersContent.jsx
@@ -3,6 +3,7 @@ import { Button } from '../ui/button';
 import { Input } from '../ui/input';
 import { Badge } from '../ui/badge';
 import { Server, Plus, Edit3, Trash2, Terminal, Globe, Zap, X } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
 
 const getTransportIcon = (type) => {
   switch (type) {
@@ -25,16 +26,17 @@ function ClaudeMcpServers({
   serverTools,
   toolsLoading,
 }) {
+  const { t } = useTranslation('settings');
   return (
     <div className="space-y-4">
       <div className="flex items-center gap-3">
         <Server className="w-5 h-5 text-purple-500" />
         <h3 className="text-lg font-medium text-foreground">
-          MCP Servers
+          {t('mcpServers.title')}
         </h3>
       </div>
       <p className="text-sm text-muted-foreground">
-        Model Context Protocol servers provide additional tools and data sources to Claude
+        {t('mcpServers.description.claude')}
       </p>
 
       <div className="flex justify-between items-center">
@@ -44,7 +46,7 @@ function ClaudeMcpServers({
           size="sm"
         >
           <Plus className="w-4 h-4 mr-2" />
-          Add MCP Server
+          {t('mcpServers.addButton')}
         </Button>
       </div>
 
@@ -60,19 +62,19 @@ function ClaudeMcpServers({
                     {server.type}
                   </Badge>
                   <Badge variant="outline" className="text-xs">
-                    {server.scope === 'local' ? 'local' : server.scope === 'user' ? 'user' : server.scope}
+                    {server.scope === 'local' ? t('mcpServers.scope.local') : server.scope === 'user' ? t('mcpServers.scope.user') : server.scope}
                   </Badge>
                 </div>
 
                 <div className="text-sm text-muted-foreground space-y-1">
                   {server.type === 'stdio' && server.config?.command && (
-                    <div>Command: <code className="bg-gray-100 dark:bg-gray-800 px-1 rounded text-xs">{server.config.command}</code></div>
+                    <div>{t('mcpServers.config.command')}: <code className="bg-gray-100 dark:bg-gray-800 px-1 rounded text-xs">{server.config.command}</code></div>
                   )}
                   {(server.type === 'sse' || server.type === 'http') && server.config?.url && (
-                    <div>URL: <code className="bg-gray-100 dark:bg-gray-800 px-1 rounded text-xs">{server.config.url}</code></div>
+                    <div>{t('mcpServers.config.url')}: <code className="bg-gray-100 dark:bg-gray-800 px-1 rounded text-xs">{server.config.url}</code></div>
                   )}
                   {server.config?.args && server.config.args.length > 0 && (
-                    <div>Args: <code className="bg-gray-100 dark:bg-gray-800 px-1 rounded text-xs">{server.config.args.join(' ')}</code></div>
+                    <div>{t('mcpServers.config.args')}: <code className="bg-gray-100 dark:bg-gray-800 px-1 rounded text-xs">{server.config.args.join(' ')}</code></div>
                   )}
                 </div>
 
@@ -90,13 +92,13 @@ function ClaudeMcpServers({
                 {/* Tools Discovery Results */}
                 {serverTools?.[server.id] && serverTools[server.id].tools?.length > 0 && (
                   <div className="mt-2 p-2 rounded text-xs bg-blue-50 dark:bg-blue-900/20 text-blue-800 dark:text-blue-200">
-                    <div className="font-medium">Tools ({serverTools[server.id].tools.length}):</div>
+                    <div className="font-medium">{t('mcpServers.tools.title')} {t('mcpServers.tools.count', { count: serverTools[server.id].tools.length })}</div>
                     <div className="flex flex-wrap gap-1 mt-1">
                       {serverTools[server.id].tools.slice(0, 5).map((tool, i) => (
                         <code key={i} className="bg-blue-100 dark:bg-blue-800 px-1 rounded">{tool.name}</code>
                       ))}
                       {serverTools[server.id].tools.length > 5 && (
-                        <span className="text-xs opacity-75">+{serverTools[server.id].tools.length - 5} more</span>
+                        <span className="text-xs opacity-75">{t('mcpServers.tools.more', { count: serverTools[server.id].tools.length - 5 })}</span>
                       )}
                     </div>
                   </div>
@@ -109,7 +111,7 @@ function ClaudeMcpServers({
                   variant="ghost"
                   size="sm"
                   className="text-gray-600 hover:text-gray-700"
-                  title="Edit server"
+                  title={t('mcpServers.actions.edit')}
                 >
                   <Edit3 className="w-4 h-4" />
                 </Button>
@@ -118,7 +120,7 @@ function ClaudeMcpServers({
                   variant="ghost"
                   size="sm"
                   className="text-red-600 hover:text-red-700"
-                  title="Delete server"
+                  title={t('mcpServers.actions.delete')}
                 >
                   <Trash2 className="w-4 h-4" />
                 </Button>
@@ -128,7 +130,7 @@ function ClaudeMcpServers({
         ))}
         {servers.length === 0 && (
           <div className="text-center py-8 text-gray-500 dark:text-gray-400">
-            No MCP servers configured
+            {t('mcpServers.empty')}
           </div>
         )}
       </div>
@@ -138,16 +140,17 @@ function ClaudeMcpServers({
 
 // Cursor MCP Servers
 function CursorMcpServers({ servers, onAdd, onEdit, onDelete }) {
+  const { t } = useTranslation('settings');
   return (
     <div className="space-y-4">
       <div className="flex items-center gap-3">
         <Server className="w-5 h-5 text-purple-500" />
         <h3 className="text-lg font-medium text-foreground">
-          MCP Servers
+          {t('mcpServers.title')}
         </h3>
       </div>
       <p className="text-sm text-muted-foreground">
-        Model Context Protocol servers provide additional tools and data sources to Cursor
+        {t('mcpServers.description.cursor')}
       </p>
 
       <div className="flex justify-between items-center">
@@ -157,7 +160,7 @@ function CursorMcpServers({ servers, onAdd, onEdit, onDelete }) {
           size="sm"
         >
           <Plus className="w-4 h-4 mr-2" />
-          Add MCP Server
+          {t('mcpServers.addButton')}
         </Button>
       </div>
 
@@ -173,7 +176,7 @@ function CursorMcpServers({ servers, onAdd, onEdit, onDelete }) {
                 </div>
                 <div className="text-sm text-muted-foreground">
                   {server.config?.command && (
-                    <div>Command: <code className="bg-gray-100 dark:bg-gray-800 px-1 rounded text-xs">{server.config.command}</code></div>
+                    <div>{t('mcpServers.config.command')}: <code className="bg-gray-100 dark:bg-gray-800 px-1 rounded text-xs">{server.config.command}</code></div>
                   )}
                 </div>
               </div>
@@ -183,6 +186,7 @@ function CursorMcpServers({ servers, onAdd, onEdit, onDelete }) {
                   variant="ghost"
                   size="sm"
                   className="text-gray-600 hover:text-gray-700"
+                  title={t('mcpServers.actions.edit')}
                 >
                   <Edit3 className="w-4 h-4" />
                 </Button>
@@ -191,6 +195,7 @@ function CursorMcpServers({ servers, onAdd, onEdit, onDelete }) {
                   variant="ghost"
                   size="sm"
                   className="text-red-600 hover:text-red-700"
+                  title={t('mcpServers.actions.delete')}
                 >
                   <Trash2 className="w-4 h-4" />
                 </Button>
@@ -200,7 +205,7 @@ function CursorMcpServers({ servers, onAdd, onEdit, onDelete }) {
         ))}
         {servers.length === 0 && (
           <div className="text-center py-8 text-gray-500 dark:text-gray-400">
-            No MCP servers configured
+            {t('mcpServers.empty')}
           </div>
         )}
       </div>
@@ -210,16 +215,17 @@ function CursorMcpServers({ servers, onAdd, onEdit, onDelete }) {
 
 // Codex MCP Servers
 function CodexMcpServers({ servers, onAdd, onEdit, onDelete }) {
+  const { t } = useTranslation('settings');
   return (
     <div className="space-y-4">
       <div className="flex items-center gap-3">
         <Server className="w-5 h-5 text-gray-700 dark:text-gray-300" />
         <h3 className="text-lg font-medium text-foreground">
-          MCP Servers
+          {t('mcpServers.title')}
         </h3>
       </div>
       <p className="text-sm text-muted-foreground">
-        Model Context Protocol servers provide additional tools and data sources to Codex
+        {t('mcpServers.description.codex')}
       </p>
 
       <div className="flex justify-between items-center">
@@ -229,7 +235,7 @@ function CodexMcpServers({ servers, onAdd, onEdit, onDelete }) {
           size="sm"
         >
           <Plus className="w-4 h-4 mr-2" />
-          Add MCP Server
+          {t('mcpServers.addButton')}
         </Button>
       </div>
 
@@ -246,13 +252,13 @@ function CodexMcpServers({ servers, onAdd, onEdit, onDelete }) {
 
                 <div className="text-sm text-muted-foreground space-y-1">
                   {server.config?.command && (
-                    <div>Command: <code className="bg-gray-100 dark:bg-gray-800 px-1 rounded text-xs">{server.config.command}</code></div>
+                    <div>{t('mcpServers.config.command')}: <code className="bg-gray-100 dark:bg-gray-800 px-1 rounded text-xs">{server.config.command}</code></div>
                   )}
                   {server.config?.args && server.config.args.length > 0 && (
-                    <div>Args: <code className="bg-gray-100 dark:bg-gray-800 px-1 rounded text-xs">{server.config.args.join(' ')}</code></div>
+                    <div>{t('mcpServers.config.args')}: <code className="bg-gray-100 dark:bg-gray-800 px-1 rounded text-xs">{server.config.args.join(' ')}</code></div>
                   )}
                   {server.config?.env && Object.keys(server.config.env).length > 0 && (
-                    <div>Environment: <code className="bg-gray-100 dark:bg-gray-800 px-1 rounded text-xs">{Object.entries(server.config.env).map(([k, v]) => `${k}=${v}`).join(', ')}</code></div>
+                    <div>{t('mcpServers.config.environment')}: <code className="bg-gray-100 dark:bg-gray-800 px-1 rounded text-xs">{Object.entries(server.config.env).map(([k, v]) => `${k}=${v}`).join(', ')}</code></div>
                   )}
                 </div>
               </div>
@@ -263,7 +269,7 @@ function CodexMcpServers({ servers, onAdd, onEdit, onDelete }) {
                   variant="ghost"
                   size="sm"
                   className="text-gray-600 hover:text-gray-700"
-                  title="Edit server"
+                  title={t('mcpServers.actions.edit')}
                 >
                   <Edit3 className="w-4 h-4" />
                 </Button>
@@ -272,7 +278,7 @@ function CodexMcpServers({ servers, onAdd, onEdit, onDelete }) {
                   variant="ghost"
                   size="sm"
                   className="text-red-600 hover:text-red-700"
-                  title="Delete server"
+                  title={t('mcpServers.actions.delete')}
                 >
                   <Trash2 className="w-4 h-4" />
                 </Button>
@@ -282,17 +288,16 @@ function CodexMcpServers({ servers, onAdd, onEdit, onDelete }) {
         ))}
         {servers.length === 0 && (
           <div className="text-center py-8 text-gray-500 dark:text-gray-400">
-            No MCP servers configured
+            {t('mcpServers.empty')}
           </div>
         )}
       </div>
 
       {/* Help Section */}
       <div className="bg-gray-100 dark:bg-gray-800/50 border border-gray-300 dark:border-gray-600 rounded-lg p-4">
-        <h4 className="font-medium text-gray-900 dark:text-gray-100 mb-2">About Codex MCP</h4>
+        <h4 className="font-medium text-gray-900 dark:text-gray-100 mb-2">{t('mcpServers.help.title')}</h4>
         <p className="text-sm text-gray-700 dark:text-gray-300">
-          Codex supports stdio-based MCP servers. You can add servers that extend Codex's capabilities
-          with additional tools and resources.
+          {t('mcpServers.help.description')}
         </p>
       </div>
     </div>
diff --git a/src/components/settings/PermissionsContent.jsx b/src/components/settings/PermissionsContent.jsx
index 608d43e..7bbd53d 100644
--- a/src/components/settings/PermissionsContent.jsx
+++ b/src/components/settings/PermissionsContent.jsx
@@ -1,6 +1,7 @@
 import { Button } from '../ui/button';
 import { Input } from '../ui/input';
 import { Shield, AlertTriangle, Plus, X } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
 
 // Common tool patterns for Claude
 const commonClaudeTools = [
@@ -49,6 +50,7 @@ function ClaudePermissions({
   newDisallowedTool,
   setNewDisallowedTool,
 }) {
+  const { t } = useTranslation('settings');
   const addAllowedTool = (tool) => {
     if (tool && !allowedTools.includes(tool)) {
       setAllowedTools([...allowedTools, tool]);
@@ -78,7 +80,7 @@ function ClaudePermissions({
         <div className="flex items-center gap-3">
           <AlertTriangle className="w-5 h-5 text-orange-500" />
           <h3 className="text-lg font-medium text-foreground">
-            Permission Settings
+            {t('permissions.title')}
           </h3>
         </div>
         <div className="bg-orange-50 dark:bg-orange-900/20 border border-orange-200 dark:border-orange-800 rounded-lg p-4">
@@ -91,10 +93,10 @@ function ClaudePermissions({
             />
             <div>
               <div className="font-medium text-orange-900 dark:text-orange-100">
-                Skip permission prompts (use with caution)
+                {t('permissions.skipPermissions.label')}
               </div>
               <div className="text-sm text-orange-700 dark:text-orange-300">
-                Equivalent to --dangerously-skip-permissions flag
+                {t('permissions.skipPermissions.claudeDescription')}
               </div>
             </div>
           </label>
@@ -106,18 +108,18 @@ function ClaudePermissions({
         <div className="flex items-center gap-3">
           <Shield className="w-5 h-5 text-green-500" />
           <h3 className="text-lg font-medium text-foreground">
-            Allowed Tools
+            {t('permissions.allowedTools.title')}
           </h3>
         </div>
         <p className="text-sm text-muted-foreground">
-          Tools that are automatically allowed without prompting for permission
+          {t('permissions.allowedTools.description')}
         </p>
 
         <div className="flex flex-col sm:flex-row gap-2">
           <Input
             value={newAllowedTool}
             onChange={(e) => setNewAllowedTool(e.target.value)}
-            placeholder='e.g., "Bash(git log:*)" or "Write"'
+            placeholder={t('permissions.allowedTools.placeholder')}
             onKeyPress={(e) => {
               if (e.key === 'Enter') {
                 e.preventDefault();
@@ -133,14 +135,14 @@ function ClaudePermissions({
             className="h-10 px-4"
           >
             <Plus className="w-4 h-4 mr-2 sm:mr-0" />
-            <span className="sm:hidden">Add</span>
+            <span className="sm:hidden">{t('permissions.actions.add')}</span>
           </Button>
         </div>
 
         {/* Quick add buttons */}
         <div className="space-y-2">
           <p className="text-sm font-medium text-gray-700 dark:text-gray-300">
-            Quick add common tools:
+            {t('permissions.allowedTools.quickAdd')}
           </p>
           <div className="flex flex-wrap gap-2">
             {commonClaudeTools.map(tool => (
@@ -176,7 +178,7 @@ function ClaudePermissions({
           ))}
           {allowedTools.length === 0 && (
             <div className="text-center py-6 text-gray-500 dark:text-gray-400">
-              No allowed tools configured
+              {t('permissions.allowedTools.empty')}
             </div>
           )}
         </div>
@@ -187,18 +189,18 @@ function ClaudePermissions({
         <div className="flex items-center gap-3">
           <AlertTriangle className="w-5 h-5 text-red-500" />
           <h3 className="text-lg font-medium text-foreground">
-            Blocked Tools
+            {t('permissions.blockedTools.title')}
           </h3>
         </div>
         <p className="text-sm text-muted-foreground">
-          Tools that are automatically blocked without prompting for permission
+          {t('permissions.blockedTools.description')}
         </p>
 
         <div className="flex flex-col sm:flex-row gap-2">
           <Input
             value={newDisallowedTool}
             onChange={(e) => setNewDisallowedTool(e.target.value)}
-            placeholder='e.g., "Bash(rm:*)"'
+            placeholder={t('permissions.blockedTools.placeholder')}
             onKeyPress={(e) => {
               if (e.key === 'Enter') {
                 e.preventDefault();
@@ -214,7 +216,7 @@ function ClaudePermissions({
             className="h-10 px-4"
           >
             <Plus className="w-4 h-4 mr-2 sm:mr-0" />
-            <span className="sm:hidden">Add</span>
+            <span className="sm:hidden">{t('permissions.actions.add')}</span>
           </Button>
         </div>
 
@@ -236,7 +238,7 @@ function ClaudePermissions({
           ))}
           {disallowedTools.length === 0 && (
             <div className="text-center py-6 text-gray-500 dark:text-gray-400">
-              No blocked tools configured
+              {t('permissions.blockedTools.empty')}
             </div>
           )}
         </div>
@@ -245,13 +247,13 @@ function ClaudePermissions({
       {/* Help Section */}
       <div className="bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg p-4">
         <h4 className="font-medium text-blue-900 dark:text-blue-100 mb-2">
-          Tool Pattern Examples:
+          {t('permissions.toolExamples.title')}
         </h4>
         <ul className="text-sm text-blue-800 dark:text-blue-200 space-y-1">
-          <li><code className="bg-blue-100 dark:bg-blue-800 px-1 rounded">"Bash(git log:*)"</code> - Allow all git log commands</li>
-          <li><code className="bg-blue-100 dark:bg-blue-800 px-1 rounded">"Bash(git diff:*)"</code> - Allow all git diff commands</li>
-          <li><code className="bg-blue-100 dark:bg-blue-800 px-1 rounded">"Write"</code> - Allow all Write tool usage</li>
-          <li><code className="bg-blue-100 dark:bg-blue-800 px-1 rounded">"Bash(rm:*)"</code> - Block all rm commands (dangerous)</li>
+          <li><code className="bg-blue-100 dark:bg-blue-800 px-1 rounded">"Bash(git log:*)"</code> {t('permissions.toolExamples.bashGitLog')}</li>
+          <li><code className="bg-blue-100 dark:bg-blue-800 px-1 rounded">"Bash(git diff:*)"</code> {t('permissions.toolExamples.bashGitDiff')}</li>
+          <li><code className="bg-blue-100 dark:bg-blue-800 px-1 rounded">"Write"</code> {t('permissions.toolExamples.write')}</li>
+          <li><code className="bg-blue-100 dark:bg-blue-800 px-1 rounded">"Bash(rm:*)"</code> {t('permissions.toolExamples.bashRm')}</li>
         </ul>
       </div>
     </div>
@@ -271,6 +273,7 @@ function CursorPermissions({
   newDisallowedCommand,
   setNewDisallowedCommand,
 }) {
+  const { t } = useTranslation('settings');
   const addAllowedCommand = (cmd) => {
     if (cmd && !allowedCommands.includes(cmd)) {
       setAllowedCommands([...allowedCommands, cmd]);
@@ -300,7 +303,7 @@ function CursorPermissions({
         <div className="flex items-center gap-3">
           <AlertTriangle className="w-5 h-5 text-orange-500" />
           <h3 className="text-lg font-medium text-foreground">
-            Permission Settings
+            {t('permissions.title')}
           </h3>
         </div>
         <div className="bg-orange-50 dark:bg-orange-900/20 border border-orange-200 dark:border-orange-800 rounded-lg p-4">
@@ -313,10 +316,10 @@ function CursorPermissions({
             />
             <div>
               <div className="font-medium text-orange-900 dark:text-orange-100">
-                Skip permission prompts (use with caution)
+                {t('permissions.skipPermissions.label')}
               </div>
               <div className="text-sm text-orange-700 dark:text-orange-300">
-                Equivalent to -f flag in Cursor CLI
+                {t('permissions.skipPermissions.cursorDescription')}
               </div>
             </div>
           </label>
@@ -328,18 +331,18 @@ function CursorPermissions({
         <div className="flex items-center gap-3">
           <Shield className="w-5 h-5 text-green-500" />
           <h3 className="text-lg font-medium text-foreground">
-            Allowed Shell Commands
+            {t('permissions.allowedCommands.title')}
           </h3>
         </div>
         <p className="text-sm text-muted-foreground">
-          Shell commands that are automatically allowed without prompting
+          {t('permissions.allowedCommands.description')}
         </p>
 
         <div className="flex flex-col sm:flex-row gap-2">
           <Input
             value={newAllowedCommand}
             onChange={(e) => setNewAllowedCommand(e.target.value)}
-            placeholder='e.g., "Shell(ls)" or "Shell(git status)"'
+            placeholder={t('permissions.allowedCommands.placeholder')}
             onKeyPress={(e) => {
               if (e.key === 'Enter') {
                 e.preventDefault();
@@ -355,14 +358,14 @@ function CursorPermissions({
             className="h-10 px-4"
           >
             <Plus className="w-4 h-4 mr-2 sm:mr-0" />
-            <span className="sm:hidden">Add</span>
+            <span className="sm:hidden">{t('permissions.actions.add')}</span>
           </Button>
         </div>
 
         {/* Quick add buttons */}
         <div className="space-y-2">
           <p className="text-sm font-medium text-gray-700 dark:text-gray-300">
-            Quick add common commands:
+            {t('permissions.allowedCommands.quickAdd')}
           </p>
           <div className="flex flex-wrap gap-2">
             {commonCursorCommands.map(cmd => (
@@ -398,7 +401,7 @@ function CursorPermissions({
           ))}
           {allowedCommands.length === 0 && (
             <div className="text-center py-6 text-gray-500 dark:text-gray-400">
-              No allowed commands configured
+              {t('permissions.allowedCommands.empty')}
             </div>
           )}
         </div>
@@ -409,18 +412,18 @@ function CursorPermissions({
         <div className="flex items-center gap-3">
           <AlertTriangle className="w-5 h-5 text-red-500" />
           <h3 className="text-lg font-medium text-foreground">
-            Blocked Shell Commands
+            {t('permissions.blockedCommands.title')}
           </h3>
         </div>
         <p className="text-sm text-muted-foreground">
-          Shell commands that are automatically blocked
+          {t('permissions.blockedCommands.description')}
         </p>
 
         <div className="flex flex-col sm:flex-row gap-2">
           <Input
             value={newDisallowedCommand}
             onChange={(e) => setNewDisallowedCommand(e.target.value)}
-            placeholder='e.g., "Shell(rm -rf)" or "Shell(sudo)"'
+            placeholder={t('permissions.blockedCommands.placeholder')}
             onKeyPress={(e) => {
               if (e.key === 'Enter') {
                 e.preventDefault();
@@ -436,7 +439,7 @@ function CursorPermissions({
             className="h-10 px-4"
           >
             <Plus className="w-4 h-4 mr-2 sm:mr-0" />
-            <span className="sm:hidden">Add</span>
+            <span className="sm:hidden">{t('permissions.actions.add')}</span>
           </Button>
         </div>
 
@@ -458,7 +461,7 @@ function CursorPermissions({
           ))}
           {disallowedCommands.length === 0 && (
             <div className="text-center py-6 text-gray-500 dark:text-gray-400">
-              No blocked commands configured
+              {t('permissions.blockedCommands.empty')}
             </div>
           )}
         </div>
@@ -467,13 +470,13 @@ function CursorPermissions({
       {/* Help Section */}
       <div className="bg-purple-50 dark:bg-purple-900/20 border border-purple-200 dark:border-purple-800 rounded-lg p-4">
         <h4 className="font-medium text-purple-900 dark:text-purple-100 mb-2">
-          Shell Command Examples:
+          {t('permissions.shellExamples.title')}
         </h4>
         <ul className="text-sm text-purple-800 dark:text-purple-200 space-y-1">
-          <li><code className="bg-purple-100 dark:bg-purple-800 px-1 rounded">"Shell(ls)"</code> - Allow ls command</li>
-          <li><code className="bg-purple-100 dark:bg-purple-800 px-1 rounded">"Shell(git status)"</code> - Allow git status</li>
-          <li><code className="bg-purple-100 dark:bg-purple-800 px-1 rounded">"Shell(npm install)"</code> - Allow npm install</li>
-          <li><code className="bg-purple-100 dark:bg-purple-800 px-1 rounded">"Shell(rm -rf)"</code> - Block recursive delete</li>
+          <li><code className="bg-purple-100 dark:bg-purple-800 px-1 rounded">"Shell(ls)"</code> {t('permissions.shellExamples.ls')}</li>
+          <li><code className="bg-purple-100 dark:bg-purple-800 px-1 rounded">"Shell(git status)"</code> {t('permissions.shellExamples.gitStatus')}</li>
+          <li><code className="bg-purple-100 dark:bg-purple-800 px-1 rounded">"Shell(npm install)"</code> {t('permissions.shellExamples.npmInstall')}</li>
+          <li><code className="bg-purple-100 dark:bg-purple-800 px-1 rounded">"Shell(rm -rf)"</code> {t('permissions.shellExamples.rmRf')}</li>
         </ul>
       </div>
     </div>
@@ -482,17 +485,18 @@ function CursorPermissions({
 
 // Codex Permissions
 function CodexPermissions({ permissionMode, setPermissionMode }) {
+  const { t } = useTranslation('settings');
   return (
     <div className="space-y-6">
       <div className="space-y-4">
         <div className="flex items-center gap-3">
           <Shield className="w-5 h-5 text-green-500" />
           <h3 className="text-lg font-medium text-foreground">
-            Permission Mode
+            {t('permissions.codex.permissionMode')}
           </h3>
         </div>
         <p className="text-sm text-muted-foreground">
-          Controls how Codex handles file modifications and command execution
+          {t('permissions.codex.description')}
         </p>
 
         {/* Default Mode */}
@@ -513,10 +517,9 @@ function CodexPermissions({ permissionMode, setPermissionMode }) {
               className="mt-1 w-4 h-4 text-green-600"
             />
             <div>
-              <div className="font-medium text-foreground">Default</div>
+              <div className="font-medium text-foreground">{t('permissions.codex.modes.default.title')}</div>
               <div className="text-sm text-muted-foreground">
-                Only trusted commands (ls, cat, grep, git status, etc.) run automatically.
-                Other commands are skipped. Can write to workspace.
+                {t('permissions.codex.modes.default.description')}
               </div>
             </div>
           </label>
@@ -540,10 +543,9 @@ function CodexPermissions({ permissionMode, setPermissionMode }) {
               className="mt-1 w-4 h-4 text-green-600"
             />
             <div>
-              <div className="font-medium text-green-900 dark:text-green-100">Accept Edits</div>
+              <div className="font-medium text-green-900 dark:text-green-100">{t('permissions.codex.modes.acceptEdits.title')}</div>
               <div className="text-sm text-green-700 dark:text-green-300">
-                All commands run automatically within the workspace.
-                Full auto mode with sandboxed execution.
+                {t('permissions.codex.modes.acceptEdits.description')}
               </div>
             </div>
           </label>
@@ -568,12 +570,11 @@ function CodexPermissions({ permissionMode, setPermissionMode }) {
             />
             <div>
               <div className="font-medium text-orange-900 dark:text-orange-100 flex items-center gap-2">
-                Bypass Permissions
+                {t('permissions.codex.modes.bypassPermissions.title')}
                 <AlertTriangle className="w-4 h-4" />
               </div>
               <div className="text-sm text-orange-700 dark:text-orange-300">
-                Full system access with no restrictions. All commands run automatically
-                with full disk and network access. Use with caution.
+                {t('permissions.codex.modes.bypassPermissions.description')}
               </div>
             </div>
           </label>
@@ -582,13 +583,13 @@ function CodexPermissions({ permissionMode, setPermissionMode }) {
         {/* Technical Details */}
         <details className="text-sm">
           <summary className="cursor-pointer text-muted-foreground hover:text-foreground">
-            Technical details
+            {t('permissions.codex.technicalDetails')}
           </summary>
           <div className="mt-2 p-3 bg-gray-50 dark:bg-gray-900/50 rounded-lg text-xs text-muted-foreground space-y-2">
-            <p><strong>Default:</strong> sandboxMode=workspace-write, approvalPolicy=untrusted. Trusted commands: cat, cd, grep, head, ls, pwd, tail, git status/log/diff/show, find (without -exec), etc.</p>
-            <p><strong>Accept Edits:</strong> sandboxMode=workspace-write, approvalPolicy=never. All commands auto-execute within project directory.</p>
-            <p><strong>Bypass Permissions:</strong> sandboxMode=danger-full-access, approvalPolicy=never. Full system access, use only in trusted environments.</p>
-            <p className="text-xs opacity-75">You can override this per-session using the mode button in the chat interface.</p>
+            <p><strong>{t('permissions.codex.modes.default.title')}:</strong> {t('permissions.codex.technicalInfo.default')}</p>
+            <p><strong>{t('permissions.codex.modes.acceptEdits.title')}:</strong> {t('permissions.codex.technicalInfo.acceptEdits')}</p>
+            <p><strong>{t('permissions.codex.modes.bypassPermissions.title')}:</strong> {t('permissions.codex.technicalInfo.bypassPermissions')}</p>
+            <p className="text-xs opacity-75">{t('permissions.codex.technicalInfo.overrideNote')}</p>
           </div>
         </details>
       </div>
diff --git a/src/i18n/config.js b/src/i18n/config.js
index 334a411..789b993 100644
--- a/src/i18n/config.js
+++ b/src/i18n/config.js
@@ -18,11 +18,13 @@ import enCommon from './locales/en/common.json';
 import enSettings from './locales/en/settings.json';
 import enAuth from './locales/en/auth.json';
 import enSidebar from './locales/en/sidebar.json';
+import enChat from './locales/en/chat.json';
 
 import zhCommon from './locales/zh-CN/common.json';
 import zhSettings from './locales/zh-CN/settings.json';
 import zhAuth from './locales/zh-CN/auth.json';
 import zhSidebar from './locales/zh-CN/sidebar.json';
+import zhChat from './locales/zh-CN/chat.json';
 
 // Import supported languages configuration
 import { languages } from './languages.js';
@@ -53,12 +55,14 @@ i18n
         settings: enSettings,
         auth: enAuth,
         sidebar: enSidebar,
+        chat: enChat,
       },
       'zh-CN': {
         common: zhCommon,
         settings: zhSettings,
         auth: zhAuth,
         sidebar: zhSidebar,
+        chat: zhChat,
       },
     },
 
@@ -72,7 +76,7 @@ i18n
     debug: import.meta.env.DEV,
 
     // Namespaces - load only what's needed
-    ns: ['common', 'settings', 'auth', 'sidebar'],
+    ns: ['common', 'settings', 'auth', 'sidebar', 'chat'],
     defaultNS: 'common',
 
     // Key separator for nested keys (default: '.')
diff --git a/src/i18n/locales/en/chat.json b/src/i18n/locales/en/chat.json
new file mode 100644
index 0000000..4083a49
--- /dev/null
+++ b/src/i18n/locales/en/chat.json
@@ -0,0 +1,111 @@
+{
+  "codeBlock": {
+    "copy": "Copy",
+    "copied": "Copied",
+    "copyCode": "Copy code"
+  },
+  "messageTypes": {
+    "user": "U",
+    "error": "Error",
+    "tool": "Tool",
+    "claude": "Claude",
+    "cursor": "Cursor",
+    "codex": "Codex"
+  },
+  "tools": {
+    "settings": "Tool Settings",
+    "error": "Tool Error",
+    "result": "Tool Result",
+    "viewParams": "View input parameters",
+    "viewRawParams": "View raw parameters",
+    "viewDiff": "View edit diff for",
+    "creatingFile": "Creating new file:",
+    "updatingTodo": "Updating Todo List",
+    "read": "Read",
+    "readFile": "Read file",
+    "updateTodo": "Update todo list",
+    "readTodo": "Read todo list",
+    "searchResults": "results"
+  },
+  "search": {
+    "found": "Found {{count}} {{type}}",
+    "file": "file",
+    "files": "files",
+    "pattern": "pattern:",
+    "in": "in:"
+  },
+  "fileOperations": {
+    "updated": "File updated successfully",
+    "created": "File created successfully",
+    "written": "File written successfully",
+    "diff": "Diff",
+    "newFile": "New File",
+    "viewContent": "View file content",
+    "viewFullOutput": "View full output ({{count}} chars)",
+    "contentDisplayed": "The file content is displayed in the diff view above"
+  },
+  "interactive": {
+    "title": "Interactive Prompt",
+    "waiting": "Waiting for your response in the CLI",
+    "instruction": "Please select an option in your terminal where Claude is running.",
+    "selectedOption": "✓ Claude selected option {{number}}",
+    "instructionDetail": "In the CLI, you would select this option interactively using arrow keys or by typing the number."
+  },
+  "thinking": {
+    "title": "Thinking...",
+    "emoji": "💭 Thinking..."
+  },
+  "json": {
+    "response": "JSON Response"
+  },
+  "permissions": {
+    "grant": "Grant permission for {{tool}}",
+    "added": "Permission added",
+    "addTo": "Adds <span class=\"font-mono\">{{entry}}</span> to Allowed Tools.",
+    "retry": "Permission saved. Retry the request to use the tool.",
+    "error": "Unable to update permissions. Please try again.",
+    "openSettings": "Open settings"
+  },
+  "todo": {
+    "updated": "Todo list has been updated successfully",
+    "current": "Current Todo List"
+  },
+  "plan": {
+    "viewPlan": "📋 View implementation plan",
+    "title": "Implementation Plan"
+  },
+  "usageLimit": {
+    "resetAt": "Claude usage limit reached. Your limit will reset at **{{time}} {{timezone}}** - {{date}}"
+  },
+  "codex": {
+    "permissionMode": "Permission Mode",
+    "modes": {
+      "default": "Default Mode",
+      "acceptEdits": "Accept Edits",
+      "bypassPermissions": "Bypass Permissions",
+      "plan": "Plan Mode"
+    },
+    "descriptions": {
+      "default": "Only trusted commands (ls, cat, grep, git status, etc.) run automatically. Other commands are skipped. Can write to workspace.",
+      "acceptEdits": "All commands run automatically within the workspace. Full auto mode with sandboxed execution.",
+      "bypassPermissions": "Full system access with no restrictions. All commands run automatically with full disk and network access. Use with caution.",
+      "plan": "Planning mode - no commands are executed"
+    },
+    "technicalDetails": "Technical details"
+  },
+  "input": {
+    "placeholder": "Type / for commands, @ for files, or ask {{provider}} anything...",
+    "placeholderDefault": "Type your message...",
+    "disabled": "Input disabled",
+    "attachFiles": "Attach files",
+    "attachImages": "Attach images",
+    "send": "Send",
+    "stop": "Stop",
+    "hintText": {
+      "ctrlEnter": "Ctrl+Enter to send • Shift+Enter for new line • Tab to change modes • / for slash commands",
+      "enter": "Enter to send • Shift+Enter for new line • Tab to change modes • / for slash commands"
+    },
+    "clickToChangeMode": "Click to change permission mode (or press Tab in input)",
+    "showAllCommands": "Show all commands"
+  }
+}
diff --git a/src/i18n/locales/en/settings.json b/src/i18n/locales/en/settings.json
index c23233f..b8a5f71 100644
--- a/src/i18n/locales/en/settings.json
+++ b/src/i18n/locales/en/settings.json
@@ -7,6 +7,7 @@
     "appearance": "Appearance"
   },
   "account": {
+    "title": "Account",
     "language": "Language",
     "languageLabel": "Display Language",
     "languageDescription": "Choose your preferred language for the interface",
@@ -15,13 +16,6 @@
     "profile": "Profile",
     "changePassword": "Change Password"
   },
-  "permissions": {
-    "allowedTools": "Allowed Tools",
-    "disallowedTools": "Disallowed Tools",
-    "addTool": "Add Tool",
-    "removeTool": "Remove Tool",
-    "description": "Configure which tools Claude can use. Tools must be enabled here before Claude can access them."
-  },
   "mcp": {
     "title": "MCP Servers",
     "addServer": "Add Server",
@@ -71,5 +65,337 @@
     "autoScrollToBottom": "Auto-scroll to bottom",
     "sendByCtrlEnter": "Send by Ctrl+Enter",
     "sendByCtrlEnterDescription": "When enabled, pressing Ctrl+Enter will send the message instead of just Enter. This is useful for IME users to avoid accidental sends."
+  },
+  "mainTabs": {
+    "agents": "Agents",
+    "appearance": "Appearance",
+    "git": "Git",
+    "apiTokens": "API & Tokens",
+    "tasks": "Tasks"
+  },
+  "appearanceSettings": {
+    "darkMode": {
+      "label": "Dark Mode",
+      "description": "Toggle between light and dark themes"
+    },
+    "projectSorting": {
+      "label": "Project Sorting",
+      "description": "How projects are ordered in the sidebar",
+      "alphabetical": "Alphabetical",
+      "recentActivity": "Recent Activity"
+    },
+    "codeEditor": {
+      "title": "Code Editor",
+      "theme": {
+        "label": "Editor Theme",
+        "description": "Default theme for the code editor"
+      },
+      "wordWrap": {
+        "label": "Word Wrap",
+        "description": "Enable word wrapping by default in the editor"
+      },
+      "showMinimap": {
+        "label": "Show Minimap",
+        "description": "Display a minimap for easier navigation in diff view"
+      },
+      "lineNumbers": {
+        "label": "Show Line Numbers",
+        "description": "Display line numbers in the editor"
+      },
+      "fontSize": {
+        "label": "Font Size",
+        "description": "Editor font size in pixels"
+      }
+    }
+  },
+  "mcpForm": {
+    "title": {
+      "add": "Add MCP Server",
+      "edit": "Edit MCP Server"
+    },
+    "importMode": {
+      "form": "Form Input",
+      "json": "JSON Import"
+    },
+    "scope": {
+      "label": "Scope",
+      "userGlobal": "User (Global)",
+      "projectLocal": "Project (Local)",
+      "userDescription": "User scope: Available across all projects on your machine",
+      "projectDescription": "Local scope: Only available in the selected project",
+      "cannotChange": "Scope cannot be changed when editing an existing server"
+    },
+    "fields": {
+      "serverName": "Server Name",
+      "transportType": "Transport Type",
+      "command": "Command",
+      "arguments": "Arguments (one per line)",
+      "jsonConfig": "JSON Configuration",
+      "url": "URL",
+      "envVars": "Environment Variables (KEY=value, one per line)",
+      "headers": "Headers (KEY=value, one per line)",
+      "selectProject": "Select a project..."
+    },
+    "placeholders": {
+      "serverName": "my-server"
+    },
+    "validation": {
+      "missingType": "Missing required field: type",
+      "stdioRequiresCommand": "stdio type requires a command field",
+      "httpRequiresUrl": "{{type}} type requires a url field",
+      "invalidJson": "Invalid JSON format",
+      "jsonHelp": "Paste your MCP server configuration in JSON format. Example formats:",
+      "jsonExampleStdio": "• stdio: {\"type\":\"stdio\",\"command\":\"npx\",\"args\":[\"@upstash/context7-mcp\"]}",
+      "jsonExampleHttp": "• http/sse: {\"type\":\"http\",\"url\":\"https://api.example.com/mcp\"}"
+    },
+    "configDetails": "Configuration Details (from {{configFile}})",
+    "projectPath": "Path: {{path}}",
+    "actions": {
+      "cancel": "Cancel",
+      "saving": "Saving...",
+      "addServer": "Add Server",
+      "updateServer": "Update Server"
+    }
+  },
+  "saveStatus": {
+    "success": "Settings saved successfully!",
+    "error": "Failed to save settings",
+    "saving": "Saving..."
+  },
+  "footerActions": {
+    "save": "Save Settings",
+    "cancel": "Cancel"
+  },
+  "git": {
+    "title": "Git Configuration",
+    "description": "Configure your git identity for commits. These settings will be applied globally via <code />git config --global<code />",
+    "name": {
+      "label": "Git Name",
+      "help": "Your name for git commits"
+    },
+    "email": {
+      "label": "Git Email",
+      "help": "Your email for git commits"
+    },
+    "actions": {
+      "save": "Save Configuration",
+      "saving": "Saving..."
+    },
+    "status": {
+      "success": "Saved successfully"
+    }
+  },
+  "apiKeys": {
+    "title": "API Keys",
+    "description": "Generate API keys to access the external API from other applications.",
+    "newKey": {
+      "alertTitle": "⚠️ Save Your API Key",
+      "alertMessage": "This is the only time you'll see this key. Store it securely.",
+      "iveSavedIt": "I've saved it"
+    },
+    "form": {
+      "placeholder": "API Key Name (e.g., Production Server)",
+      "createButton": "Create",
+      "cancelButton": "Cancel"
+    },
+    "newButton": "New API Key",
+    "empty": "No API keys created yet.",
+    "list": {
+      "created": "Created:",
+      "lastUsed": "Last used:"
+    },
+    "confirmDelete": "Are you sure you want to delete this API key?",
+    "status": {
+      "active": "Active",
+      "inactive": "Inactive"
+    },
+    "github": {
+      "title": "GitHub Tokens",
+      "description": "Add GitHub Personal Access Tokens to clone private repositories via the external API.",
+      "descriptionAlt": "Add GitHub Personal Access Tokens to clone private repositories. You can also pass tokens directly in API requests without storing them.",
+      "addButton": "Add Token",
+      "form": {
+        "namePlaceholder": "Token Name (e.g., Personal Repos)",
+        "tokenPlaceholder": "GitHub Personal Access Token (ghp_...)",
+        "descriptionPlaceholder": "Description (optional)",
+        "addButton": "Add Token",
+        "cancelButton": "Cancel",
+        "howToCreate": "How to create a GitHub Personal Access Token →"
+      },
+      "empty": "No GitHub tokens added yet.",
+      "added": "Added:",
+      "confirmDelete": "Are you sure you want to delete this GitHub token?"
+    },
+    "apiDocsLink": "API Documentation",
+    "documentation": {
+      "title": "External API Documentation",
+      "description": "Learn how to use the external API to trigger Claude/Cursor sessions from your applications.",
+      "viewLink": "View API Documentation →"
+    },
+    "loading": "Loading...",
+    "version": {
+      "updateAvailable": "Update available: v{{version}}"
+    }
+  },
+  "tasks": {
+    "checking": "Checking TaskMaster installation...",
+    "notInstalled": {
+      "title": "TaskMaster AI CLI Not Installed",
+      "description": "TaskMaster CLI is required to use task management features. Install it to get started:",
+      "installCommand": "npm install -g task-master-ai",
+      "viewOnGitHub": "View on GitHub",
+      "afterInstallation": "After installation:",
+      "steps": {
+        "restart": "Restart this application",
+        "autoAvailable": "TaskMaster features will automatically become available",
+        "initCommand": "Use task-master init in your project directory"
+      }
+    },
+    "settings": {
+      "enableLabel": "Enable TaskMaster Integration",
+      "enableDescription": "Show TaskMaster tasks, banners, and sidebar indicators across the interface"
+    }
+  },
+  "agents": {
+    "authStatus": {
+      "checking": "Checking...",
+      "connected": "Connected",
+      "notConnected": "Not connected",
+      "disconnected": "Disconnected",
+      "checkingAuth": "Checking authentication status...",
+      "loggedInAs": "Logged in as {{email}}",
+      "authenticatedUser": "authenticated user"
+    },
+    "account": {
+      "claude": {
+        "description": "Anthropic Claude AI assistant"
+      },
+      "cursor": {
+        "description": "Cursor AI-powered code editor"
+      },
+      "codex": {
+        "description": "OpenAI Codex AI assistant"
+      }
+    },
+    "connectionStatus": "Connection Status",
+    "login": {
+      "title": "Login",
+      "reAuthenticate": "Re-authenticate",
+      "description": "Sign in to your {{agent}} account to enable AI features",
+      "reAuthDescription": "Sign in with a different account or refresh credentials",
+      "button": "Login",
+      "reLoginButton": "Re-login"
+    },
+    "error": "Error: {{error}}"
+  },
+  "permissions": {
+    "title": "Permission Settings",
+    "skipPermissions": {
+      "label": "Skip permission prompts (use with caution)",
+      "claudeDescription": "Equivalent to --dangerously-skip-permissions flag",
+      "cursorDescription": "Equivalent to -f flag in Cursor CLI"
+    },
+    "allowedTools": {
+      "title": "Allowed Tools",
+      "description": "Tools that are automatically allowed without prompting for permission",
+      "placeholder": "e.g., \"Bash(git log:*)\" or \"Write\"",
+      "quickAdd": "Quick add common tools:",
+      "empty": "No allowed tools configured"
+    },
+    "blockedTools": {
+      "title": "Blocked Tools",
+      "description": "Tools that are automatically blocked without prompting for permission",
+      "placeholder": "e.g., \"Bash(rm:*)\"",
+      "empty": "No blocked tools configured"
+    },
+    "allowedCommands": {
+      "title": "Allowed Shell Commands",
+      "description": "Shell commands that are automatically allowed without prompting",
+      "placeholder": "e.g., \"Shell(ls)\" or \"Shell(git status)\"",
+      "quickAdd": "Quick add common commands:",
+      "empty": "No allowed commands configured"
+    },
+    "blockedCommands": {
+      "title": "Blocked Shell Commands",
+      "description": "Shell commands that are automatically blocked",
+      "placeholder": "e.g., \"Shell(rm -rf)\" or \"Shell(sudo)\"",
+      "empty": "No blocked commands configured"
+    },
+    "toolExamples": {
+      "title": "Tool Pattern Examples:",
+      "bashGitLog": "- Allow all git log commands",
+      "bashGitDiff": "- Allow all git diff commands",
+      "write": "- Allow all Write tool usage",
+      "bashRm": "- Block all rm commands (dangerous)"
+    },
+    "shellExamples": {
+      "title": "Shell Command Examples:",
+      "ls": "- Allow ls command",
+      "gitStatus": "- Allow git status",
+      "npmInstall": "- Allow npm install",
+      "rmRf": "- Block recursive delete"
+    },
+    "codex": {
+      "permissionMode": "Permission Mode",
+      "description": "Controls how Codex handles file modifications and command execution",
+      "modes": {
+        "default": {
+          "title": "Default",
+          "description": "Only trusted commands (ls, cat, grep, git status, etc.) run automatically. Other commands are skipped. Can write to workspace."
+        },
+        "acceptEdits": {
+          "title": "Accept Edits",
+          "description": "All commands run automatically within the workspace. Full auto mode with sandboxed execution."
+        },
+        "bypassPermissions": {
+          "title": "Bypass Permissions",
+          "description": "Full system access with no restrictions. All commands run automatically with full disk and network access. Use with caution."
+        }
+      },
+      "technicalDetails": "Technical details",
+      "technicalInfo": {
+        "default": "sandboxMode=workspace-write, approvalPolicy=untrusted. Trusted commands: cat, cd, grep, head, ls, pwd, tail, git status/log/diff/show, find (without -exec), etc.",
+        "acceptEdits": "sandboxMode=workspace-write, approvalPolicy=never. All commands auto-execute within project directory.",
+        "bypassPermissions": "sandboxMode=danger-full-access, approvalPolicy=never. Full system access, use only in trusted environments.",
+        "overrideNote": "You can override this per-session using the mode button in the chat interface."
+      }
+    },
+    "actions": {
+      "add": "Add"
+    }
+  },
+  "mcpServers": {
+    "title": "MCP Servers",
+    "description": {
+      "claude": "Model Context Protocol servers provide additional tools and data sources to Claude",
+      "cursor": "Model Context Protocol servers provide additional tools and data sources to Cursor",
+      "codex": "Model Context Protocol servers provide additional tools and data sources to Codex"
+    },
+    "addButton": "Add MCP Server",
+    "empty": "No MCP servers configured",
+    "serverType": "Type",
+    "scope": {
+      "local": "local",
+      "user": "user"
+    },
+    "config": {
+      "command": "Command",
+      "url": "URL",
+      "args": "Args",
+      "environment": "Environment"
+    },
+    "tools": {
+      "title": "Tools",
+      "count": "({{count}}):",
+      "more": "+{{count}} more"
+    },
+    "actions": {
+      "edit": "Edit server",
+      "delete": "Delete server"
+    },
+    "help": {
+      "title": "About Codex MCP",
+      "description": "Codex supports stdio-based MCP servers. You can add servers that extend Codex's capabilities with additional tools and resources."
+    }
   }
 }
diff --git a/src/i18n/locales/zh-CN/chat.json b/src/i18n/locales/zh-CN/chat.json
new file mode 100644
index 0000000..6f20225
--- /dev/null
+++ b/src/i18n/locales/zh-CN/chat.json
@@ -0,0 +1,111 @@
+{
+  "codeBlock": {
+    "copy": "复制",
+    "copied": "已复制",
+    "copyCode": "复制代码"
+  },
+  "messageTypes": {
+    "user": "U",
+    "error": "错误",
+    "tool": "工具",
+    "claude": "Claude",
+    "cursor": "Cursor",
+    "codex": "Codex"
+  },
+  "tools": {
+    "settings": "工具设置",
+    "error": "工具错误",
+    "result": "工具结果",
+    "viewParams": "查看输入参数",
+    "viewRawParams": "查看原始参数",
+    "viewDiff": "查看编辑差异",
+    "creatingFile": "创建新文件：",
+    "updatingTodo": "更新待办事项",
+    "read": "读取",
+    "readFile": "读取文件",
+    "updateTodo": "更新待办列表",
+    "readTodo": "读取待办列表",
+    "searchResults": "结果"
+  },
+  "search": {
+    "found": "找到 {{count}} 个{{type}}",
+    "file": "文件",
+    "files": "文件",
+    "pattern": "模式：",
+    "in": "在："
+  },
+  "fileOperations": {
+    "updated": "文件更新成功",
+    "created": "文件创建成功",
+    "written": "文件写入成功",
+    "diff": "差异",
+    "newFile": "新文件",
+    "viewContent": "查看文件内容",
+    "viewFullOutput": "查看完整输出（{{count}} 个字符）",
+    "contentDisplayed": "文件内容显示在上面的差异视图中"
+  },
+  "interactive": {
+    "title": "交互式提示",
+    "waiting": "等待您在 CLI 中响应",
+    "instruction": "请在 Claude 运行的终端中选择一个选项。",
+    "selectedOption": "✓ Claude 选择了选项 {{number}}",
+    "instructionDetail": "在 CLI 中，您可以使用方向键或输入数字来交互式地选择此选项。"
+  },
+  "thinking": {
+    "title": "思考中...",
+    "emoji": "💭 思考中..."
+  },
+  "json": {
+    "response": "JSON 响应"
+  },
+  "permissions": {
+    "grant": "授予 {{tool}} 权限",
+    "added": "权限已添加",
+    "addTo": "将 <span class=\"font-mono\">{{entry}}</span> 添加到允许的工具。",
+    "retry": "权限已保存。重试请求以使用该工具。",
+    "error": "无法更新权限。请重试。",
+    "openSettings": "打开设置"
+  },
+  "todo": {
+    "updated": "待办列表已成功更新",
+    "current": "当前待办列表"
+  },
+  "plan": {
+    "viewPlan": "📋 查看实施计划",
+    "title": "实施计划"
+  },
+  "usageLimit": {
+    "resetAt": "Claude 使用限制已达到。您的限制将在 **{{time}} {{timezone}}** - {{date}} 重置"
+  },
+  "codex": {
+    "permissionMode": "权限模式",
+    "modes": {
+      "default": "默认模式",
+      "acceptEdits": "编辑模式",
+      "bypassPermissions": "无限制模式",
+      "plan": "计划模式"
+    },
+    "descriptions": {
+      "default": "只有受信任的命令（ls、cat、grep、git status 等）自动运行。其他命令将被跳过。可以写入工作区。",
+      "acceptEdits": "工作区内的所有命令自动运行。完全自动模式，具有沙盒执行功能。",
+      "bypassPermissions": "完全的系统访问，无限制。所有命令自动运行，具有完整的磁盘和网络访问权限。请谨慎使用。",
+      "plan": "计划模式 - 不执行任何命令"
+    },
+    "technicalDetails": "技术细节"
+  },
+  "input": {
+    "placeholder": "输入 / 调用命令，@ 选择文件，或向 {{provider}} 提问...",
+    "placeholderDefault": "输入您的消息...",
+    "disabled": "输入已禁用",
+    "attachFiles": "附加文件",
+    "attachImages": "附加图片",
+    "send": "发送",
+    "stop": "停止",
+    "hintText": {
+      "ctrlEnter": "Ctrl+Enter 发送 • Shift+Enter 换行 • Tab 切换模式 • / 斜杠命令",
+      "enter": "Enter 发送 • Shift+Enter 换行 • Tab 切换模式 • / 斜杠命令"
+    },
+    "clickToChangeMode": "点击更改权限模式（或在输入框中按 Tab）",
+    "showAllCommands": "显示所有命令"
+  }
+}
diff --git a/src/i18n/locales/zh-CN/settings.json b/src/i18n/locales/zh-CN/settings.json
index 2814fb5..f8a60f2 100644
--- a/src/i18n/locales/zh-CN/settings.json
+++ b/src/i18n/locales/zh-CN/settings.json
@@ -7,6 +7,7 @@
     "appearance": "外观"
   },
   "account": {
+    "title": "账户",
     "language": "语言",
     "languageLabel": "显示语言",
     "languageDescription": "选择您偏好的界面语言",
@@ -15,13 +16,6 @@
     "profile": "个人资料",
     "changePassword": "修改密码"
   },
-  "permissions": {
-    "allowedTools": "允许的工具",
-    "disallowedTools": "禁止的工具",
-    "addTool": "添加工具",
-    "removeTool": "移除工具",
-    "description": "配置 Claude 可以使用的工具。工具必须在此处启用后，Claude 才能访问它们。"
-  },
   "mcp": {
     "title": "MCP 服务器",
     "addServer": "添加服务器",
@@ -71,5 +65,337 @@
     "autoScrollToBottom": "自动滚动到底部",
     "sendByCtrlEnter": "使用 Ctrl+Enter 发送",
     "sendByCtrlEnterDescription": "启用后，按 Ctrl+Enter 发送消息，而不是仅按 Enter。这对于使用输入法的用户可以避免意外发送。"
+  },
+  "mainTabs": {
+    "agents": "智能体",
+    "appearance": "外观",
+    "git": "Git",
+    "apiTokens": "API 和令牌",
+    "tasks": "任务"
+  },
+  "appearanceSettings": {
+    "darkMode": {
+      "label": "深色模式",
+      "description": "切换浅色和深色主题"
+    },
+    "projectSorting": {
+      "label": "项目排序",
+      "description": "项目在侧边栏中的排列方式",
+      "alphabetical": "按字母顺序",
+      "recentActivity": "最近活动"
+    },
+    "codeEditor": {
+      "title": "代码编辑器",
+      "theme": {
+        "label": "编辑器主题",
+        "description": "代码编辑器的默认主题"
+      },
+      "wordWrap": {
+        "label": "自动换行",
+        "description": "在编辑器中默认启用自动换行"
+      },
+      "showMinimap": {
+        "label": "显示缩略图",
+        "description": "在差异视图中显示缩略图以便于导航"
+      },
+      "lineNumbers": {
+        "label": "显示行号",
+        "description": "在编辑器中显示行号"
+      },
+      "fontSize": {
+        "label": "字体大小",
+        "description": "编辑器字体大小（px）"
+      }
+    }
+  },
+  "mcpForm": {
+    "title": {
+      "add": "添加 MCP 服务器",
+      "edit": "编辑 MCP 服务器"
+    },
+    "importMode": {
+      "form": "表单输入",
+      "json": "JSON 导入"
+    },
+    "scope": {
+      "label": "范围",
+      "userGlobal": "用户（全局）",
+      "projectLocal": "项目（本地）",
+      "userDescription": "用户范围：在您机器上的所有项目中可用",
+      "projectDescription": "本地范围：仅在选定项目中可用",
+      "cannotChange": "编辑现有服务器时无法更改范围"
+    },
+    "fields": {
+      "serverName": "服务器名称",
+      "transportType": "传输类型",
+      "command": "命令",
+      "arguments": "参数（每行一个）",
+      "jsonConfig": "JSON 配置",
+      "url": "URL",
+      "envVars": "环境变量（KEY=值，每行一个）",
+      "headers": "请求头（KEY=值，每行一个）",
+      "selectProject": "选择项目..."
+    },
+    "placeholders": {
+      "serverName": "我的服务"
+    },
+    "validation": {
+      "missingType": "缺少必填字段：type",
+      "stdioRequiresCommand": "stdio 类型需要 command 字段",
+      "httpRequiresUrl": "{{type}} 类型需要 url 字段",
+      "invalidJson": "无效的 JSON 格式",
+      "jsonHelp": "粘贴您的 MCP 服务器配置（JSON 格式）。示例格式：",
+      "jsonExampleStdio": "• stdio: {\"type\":\"stdio\",\"command\":\"npx\",\"args\":[\"@upstash/context7-mcp\"]}",
+      "jsonExampleHttp": "• http/sse: {\"type\":\"http\",\"url\":\"https://api.example.com/mcp\"}"
+    },
+    "configDetails": "配置详细信息（来自 {{configFile}}）",
+    "projectPath": "路径：{{path}}",
+    "actions": {
+      "cancel": "取消",
+      "saving": "保存中...",
+      "addServer": "添加服务器",
+      "updateServer": "更新服务器"
+    }
+  },
+  "saveStatus": {
+    "success": "设置保存成功！",
+    "error": "保存设置失败",
+    "saving": "保存中..."
+  },
+  "footerActions": {
+    "save": "保存设置",
+    "cancel": "取消"
+  },
+  "git": {
+    "title": "Git 配置",
+    "description": "配置您的 git 提交身份。这些设置将通过 <code />git config --global<code /> 全局应用",
+    "name": {
+      "label": "Git 名称",
+      "help": "您的 git 提交名称"
+    },
+    "email": {
+      "label": "Git 邮箱",
+      "help": "您的 git 提交邮箱"
+    },
+    "actions": {
+      "save": "保存配置",
+      "saving": "保存中..."
+    },
+    "status": {
+      "success": "保存成功"
+    }
+  },
+  "apiKeys": {
+    "title": "API 密钥",
+    "description": "生成 API 密钥以从其他应用访问外部 API。",
+    "newKey": {
+      "alertTitle": "⚠️ 保存您的 API 密钥",
+      "alertMessage": "这是您唯一一次看到此密钥。请妥善保存。",
+      "iveSavedIt": "我已保存"
+    },
+    "form": {
+      "placeholder": "API 密钥名称（例如：生产服务器）",
+      "createButton": "创建",
+      "cancelButton": "取消"
+    },
+    "newButton": "新建 API 密钥",
+    "empty": "尚未创建 API 密钥。",
+    "list": {
+      "created": "创建时间：",
+      "lastUsed": "最后使用："
+    },
+    "confirmDelete": "确定要删除此 API 密钥吗？",
+    "status": {
+      "active": "激活",
+      "inactive": "未激活"
+    },
+    "github": {
+      "title": "GitHub 令牌",
+      "description": "添加 GitHub 个人访问令牌以通过外部 API 克隆私有仓库。",
+      "descriptionAlt": "添加 GitHub 个人访问令牌以克隆私有仓库。您也可以直接在 API 请求中传递令牌而无需存储。",
+      "addButton": "添加令牌",
+      "form": {
+        "namePlaceholder": "令牌名称（例如：个人仓库）",
+        "tokenPlaceholder": "GitHub 个人访问令牌（ghp_...）",
+        "descriptionPlaceholder": "描述（可选）",
+        "addButton": "添加令牌",
+        "cancelButton": "取消",
+        "howToCreate": "如何创建 GitHub 个人访问令牌 →"
+      },
+      "empty": "尚未添加 GitHub 令牌。",
+      "added": "添加时间：",
+      "confirmDelete": "确定要删除此 GitHub 令牌吗？"
+    },
+    "apiDocsLink": "API 文档",
+    "documentation": {
+      "title": "外部 API 文档",
+      "description": "了解如何使用外部 API 从您的应用程序触发 Claude/Cursor 会话。",
+      "viewLink": "查看 API 文档 →"
+    },
+    "loading": "加载中...",
+    "version": {
+      "updateAvailable": "有可用更新：v{{version}}"
+    }
+  },
+  "tasks": {
+    "checking": "正在检查 TaskMaster 安装...",
+    "notInstalled": {
+      "title": "未安装 TaskMaster AI CLI",
+      "description": "需要 TaskMaster CLI 才能使用任务管理功能。安装它以开始使用：",
+      "installCommand": "npm install -g task-master-ai",
+      "viewOnGitHub": "在 GitHub 上查看",
+      "afterInstallation": "安装后：",
+      "steps": {
+        "restart": "重启此应用程序",
+        "autoAvailable": "TaskMaster 功能将自动可用",
+        "initCommand": "在项目目录中使用 task-master init"
+      }
+    },
+    "settings": {
+      "enableLabel": "启用 TaskMaster 集成",
+      "enableDescription": "在整个界面中显示 TaskMaster 任务、横幅和侧边栏指示器"
+    }
+  },
+  "agents": {
+    "authStatus": {
+      "checking": "检查中...",
+      "connected": "已连接",
+      "notConnected": "未连接",
+      "disconnected": "已断开",
+      "checkingAuth": "正在检查认证状态...",
+      "loggedInAs": "登录为 {{email}}",
+      "authenticatedUser": "已认证用户"
+    },
+    "account": {
+      "claude": {
+        "description": "Anthropic Claude AI 助手"
+      },
+      "cursor": {
+        "description": "Cursor AI 驱动的代码编辑器"
+      },
+      "codex": {
+        "description": "OpenAI Codex AI 助手"
+      }
+    },
+    "connectionStatus": "连接状态",
+    "login": {
+      "title": "登录",
+      "reAuthenticate": "重新认证",
+      "description": "登录您的 {{agent}} 账户以启用 AI 功能",
+      "reAuthDescription": "使用其他账户登录或刷新凭据",
+      "button": "登录",
+      "reLoginButton": "重新登录"
+    },
+    "error": "错误：{{error}}"
+  },
+  "permissions": {
+    "title": "权限设置",
+    "skipPermissions": {
+      "label": "跳过权限提示（请谨慎使用）",
+      "claudeDescription": "等同于 --dangerously-skip-permissions 标志",
+      "cursorDescription": "等同于 Cursor CLI 中的 -f 标志"
+    },
+    "allowedTools": {
+      "title": "允许的工具",
+      "description": "无需权限提示即可自动使用的工具",
+      "placeholder": "例如：\"Bash(git log:*)\" 或 \"Write\"",
+      "quickAdd": "快速添加常用工具：",
+      "empty": "未配置允许的工具"
+    },
+    "blockedTools": {
+      "title": "禁用的工具",
+      "description": "无需权限提示即可自动禁用的工具",
+      "placeholder": "例如：\"Bash(rm:*)\"",
+      "empty": "未配置禁用的工具"
+    },
+    "allowedCommands": {
+      "title": "允许的 Shell 命令",
+      "description": "无需权限提示即可自动执行的 Shell 命令",
+      "placeholder": "例如：\"Shell(ls)\" 或 \"Shell(git status)\"",
+      "quickAdd": "快速添加常用命令：",
+      "empty": "未配置允许的命令"
+    },
+    "blockedCommands": {
+      "title": "阻止的 Shell 命令",
+      "description": "自动阻止的 Shell 命令",
+      "placeholder": "例如：\"Shell(rm -rf)\" 或 \"Shell(sudo)\"",
+      "empty": "未配置阻止的命令"
+    },
+    "toolExamples": {
+      "title": "工具模式示例：",
+      "bashGitLog": "- 允许所有 git log 命令",
+      "bashGitDiff": "- 允许所有 git diff 命令",
+      "write": "- 允许所有 Write 工具使用",
+      "bashRm": "- 阻止所有 rm 命令（危险）"
+    },
+    "shellExamples": {
+      "title": "Shell 命令示例：",
+      "ls": "- 允许 ls 命令",
+      "gitStatus": "- 允许 git status",
+      "npmInstall": "- 允许 npm install",
+      "rmRf": "- 阻止递归删除"
+    },
+    "codex": {
+      "permissionMode": "权限模式",
+      "description": "控制 Codex 如何处理文件修改和命令执行",
+      "modes": {
+        "default": {
+          "title": "默认",
+          "description": "只有受信任的命令（ls、cat、grep、git status 等）会自动运行。其他命令将被跳过。可以写入工作区。"
+        },
+        "acceptEdits": {
+          "title": "接受编辑",
+          "description": "所有命令在工作区内自动运行。具有沙箱执行的全自动模式。"
+        },
+        "bypassPermissions": {
+          "title": "绕过权限",
+          "description": "完全系统访问，无任何限制。所有命令自动运行，具有完整的磁盘和网络访问权限。请谨慎使用。"
+        }
+      },
+      "technicalDetails": "技术详情",
+      "technicalInfo": {
+        "default": "sandboxMode=workspace-write, approvalPolicy=untrusted。受信任的命令：cat、cd、grep、head、ls、pwd、tail、git status/log/diff/show、find（不带 -exec）等。",
+        "acceptEdits": "sandboxMode=workspace-write, approvalPolicy=never。所有命令在项目目录内自动执行。",
+        "bypassPermissions": "sandboxMode=danger-full-access, approvalPolicy=never。完全系统访问权限，仅在可信环境中使用。",
+        "overrideNote": "您可以使用聊天界面中的模式按钮按会话覆盖此设置。"
+      }
+    },
+    "actions": {
+      "add": "添加"
+    }
+  },
+  "mcpServers": {
+    "title": "MCP 服务器",
+    "description": {
+      "claude": "Model Context Protocol 服务器为 Claude 提供额外的工具和数据源",
+      "cursor": "Model Context Protocol 服务器为 Cursor 提供额外的工具和数据源",
+      "codex": "Model Context Protocol 服务器为 Codex 提供额外的工具和数据源"
+    },
+    "addButton": "添加 MCP 服务器",
+    "empty": "未配置 MCP 服务器",
+    "serverType": "类型",
+    "scope": {
+      "local": "本地",
+      "user": "用户"
+    },
+    "config": {
+      "command": "命令",
+      "url": "URL",
+      "args": "参数",
+      "environment": "环境变量"
+    },
+    "tools": {
+      "title": "工具",
+      "count": "（{{count}}）：",
+      "more": "还有 {{count}} 个"
+    },
+    "actions": {
+      "edit": "编辑服务器",
+      "delete": "删除服务器"
+    },
+    "help": {
+      "title": "关于 Codex MCP",
+      "description": "Codex 支持基于 stdio 的 MCP 服务器。您可以添加服务器，通过额外的工具和资源来扩展 Codex 的功能。"
+    }
   }
 }

From 7928285ed0bfb3ead268cac2f74241ece8f1c7b0 Mon Sep 17 00:00:00 2001
From: YuanNiancai <yuanniancai@formulas.cc>
Date: Wed, 21 Jan 2026 14:09:32 +0800
Subject: [PATCH 10/24] resolve conflict

---
 src/components/ProjectCreationWizard.jsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/ProjectCreationWizard.jsx b/src/components/ProjectCreationWizard.jsx
index db31fa3..2109e56 100644
--- a/src/components/ProjectCreationWizard.jsx
+++ b/src/components/ProjectCreationWizard.jsx
@@ -380,7 +380,7 @@ const ProjectCreationWizard = ({ onClose, onProjectCreated }) => {
                       type="text"
                       value={githubUrl}
                       onChange={(e) => setGithubUrl(e.target.value)}
-                      placeholder={t('projectWizard.step2.githubPlaceholder')}
+                      placeholder="https://github.com/username/repository"
                       className="w-full"
                     />
                     <p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
@@ -475,7 +475,7 @@ const ProjectCreationWizard = ({ onClose, onProjectCreated }) => {
                                 type="password"
                                 value={newGithubToken}
                                 onChange={(e) => setNewGithubToken(e.target.value)}
-                                placeholder={t('projectWizard.step2.tokenPlaceholder')}
+                                placeholder="ghp_xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
                                 className="w-full"
                               />
                               <p className="mt-1 text-xs text-gray-500 dark:text-gray-400">

From 73375d76536436821a13128443ac54257630ef2f Mon Sep 17 00:00:00 2001
From: YuanNiancai <yuanniancai@formulas.cc>
Date: Wed, 21 Jan 2026 14:29:16 +0800
Subject: [PATCH 11/24] fix: improve i18n translation strings based on code
 review
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Refactored translation strings to follow best practices:

1. Removed HTML tags from translation strings (en/chat.json)
   - Changed "Adds <span class=\"font-mono\">{{entry}}</span>" to "Adds {{entry}}"

2. Simplified TasksSettings.jsx component (TasksSettings.jsx)
   - Moved command code directly into translation file

3. Updated both English and Chinese translation files
   - en/chat.json: Removed HTML markup from permissions.addTo
   - zh-CN/chat.json: Corresponding Chinese translation update
   - en/settings.json: Added task-master init command
   -zh-CN/settings.json: Added task-master init command in Chinese

根据代码审查改进 i18n 翻译字符串：

1. 从翻译字符串中移除 HTML 标签（en/chat.json）
   - 将 "Adds <span class=\"font-mono\">{{entry}}</span>" 改为 "Adds {{entry}}"

2. 简化 TasksSettings.jsx 组件
   - 将命令代码直接移到翻译文件中

3. 更新英文和中文翻译文件
   - en/chat.json: 从 permissions.addTo 移除 HTML 标记
   - zh-CN/chat.json: 对应的中文翻译更新
   - en/settings.json: 添加 task-master init 命令
   - zh-CN/settings.json: 添加 task-master init 命令的中文翻译
---
 src/components/TasksSettings.jsx     | 2 +-
 src/i18n/locales/en/chat.json        | 2 +-
 src/i18n/locales/en/settings.json    | 2 +-
 src/i18n/locales/zh-CN/chat.json     | 2 +-
 src/i18n/locales/zh-CN/settings.json | 2 +-
 5 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/TasksSettings.jsx b/src/components/TasksSettings.jsx
index dda0cf1..99f35c3 100644
--- a/src/components/TasksSettings.jsx
+++ b/src/components/TasksSettings.jsx
@@ -65,7 +65,7 @@ function TasksSettings() {
                       <ol className="list-decimal list-inside space-y-1 text-xs">
                         <li>{t('tasks.notInstalled.steps.restart')}</li>
                         <li>{t('tasks.notInstalled.steps.autoAvailable')}</li>
-                        <li>Use <code className="bg-orange-100 dark:bg-orange-800 px-1 rounded">task-master init</code> {t('tasks.notInstalled.steps.initCommand')}</li>
+                        <li>{t('tasks.notInstalled.steps.initCommand')}</li>
                       </ol>
                     </div>
                   </div>
diff --git a/src/i18n/locales/en/chat.json b/src/i18n/locales/en/chat.json
index 4083a49..d612791 100644
--- a/src/i18n/locales/en/chat.json
+++ b/src/i18n/locales/en/chat.json
@@ -61,7 +61,7 @@
   "permissions": {
     "grant": "Grant permission for {{tool}}",
     "added": "Permission added",
-    "addTo": "Adds <span class=\"font-mono\">{{entry}}</span> to Allowed Tools.",
+    "addTo": "Adds {{entry}} to Allowed Tools.",
     "retry": "Permission saved. Retry the request to use the tool.",
     "error": "Unable to update permissions. Please try again.",
     "openSettings": "Open settings"
diff --git a/src/i18n/locales/en/settings.json b/src/i18n/locales/en/settings.json
index b8a5f71..c015592 100644
--- a/src/i18n/locales/en/settings.json
+++ b/src/i18n/locales/en/settings.json
@@ -168,7 +168,7 @@
   },
   "git": {
     "title": "Git Configuration",
-    "description": "Configure your git identity for commits. These settings will be applied globally via <code />git config --global<code />",
+    "description": "Configure your git identity for commits. These settings will be applied globally via git config --global",
     "name": {
       "label": "Git Name",
       "help": "Your name for git commits"
diff --git a/src/i18n/locales/zh-CN/chat.json b/src/i18n/locales/zh-CN/chat.json
index 6f20225..ef73178 100644
--- a/src/i18n/locales/zh-CN/chat.json
+++ b/src/i18n/locales/zh-CN/chat.json
@@ -61,7 +61,7 @@
   "permissions": {
     "grant": "授予 {{tool}} 权限",
     "added": "权限已添加",
-    "addTo": "将 <span class=\"font-mono\">{{entry}}</span> 添加到允许的工具。",
+    "addTo": "将 {{entry}} 添加到允许的工具。",
     "retry": "权限已保存。重试请求以使用该工具。",
     "error": "无法更新权限。请重试。",
     "openSettings": "打开设置"
diff --git a/src/i18n/locales/zh-CN/settings.json b/src/i18n/locales/zh-CN/settings.json
index f8a60f2..9aaaec9 100644
--- a/src/i18n/locales/zh-CN/settings.json
+++ b/src/i18n/locales/zh-CN/settings.json
@@ -168,7 +168,7 @@
   },
   "git": {
     "title": "Git 配置",
-    "description": "配置您的 git 提交身份。这些设置将通过 <code />git config --global<code /> 全局应用",
+    "description": "配置您的 git 提交身份。这些设置将通过 git config --global 全局应用",
     "name": {
       "label": "Git 名称",
       "help": "您的 git 提交名称"

From a173817d374ad215bb1270f9895f707116e661aa Mon Sep 17 00:00:00 2001
From: YuanNiancai <yuanniancai@formulas.cc>
Date: Wed, 21 Jan 2026 14:50:15 +0800
Subject: [PATCH 12/24] feat: add i18n translations for ThinkingModeSelector
 component

---
 src/components/ThinkingModeSelector.jsx | 41 ++++++++++++++++++-------
 src/i18n/locales/en/chat.json           | 36 ++++++++++++++++++++++
 src/i18n/locales/zh-CN/chat.json        | 36 ++++++++++++++++++++++
 3 files changed, 102 insertions(+), 11 deletions(-)

diff --git a/src/components/ThinkingModeSelector.jsx b/src/components/ThinkingModeSelector.jsx
index 758ad40..5cc6357 100644
--- a/src/components/ThinkingModeSelector.jsx
+++ b/src/components/ThinkingModeSelector.jsx
@@ -1,5 +1,6 @@
 import React, { useState, useRef, useEffect } from 'react';
 import { Brain, Zap, Sparkles, Atom, X } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
 
 const thinkingModes = [
   {
@@ -45,6 +46,24 @@ const thinkingModes = [
 ];
 
 function ThinkingModeSelector({ selectedMode, onModeChange, onClose, className = '' }) {
+  const { t } = useTranslation('chat');
+
+  // Mapping from mode ID to translation key
+  const modeKeyMap = {
+    'think-hard': 'thinkHard',
+    'think-harder': 'thinkHarder'
+  };
+  // Create translated modes for display
+  const translatedModes = thinkingModes.map(mode => {
+    const modeKey = modeKeyMap[mode.id] || mode.id;
+    return {
+      ...mode,
+      name: t(`thinkingMode.modes.${modeKey}.name`),
+      description: t(`thinkingMode.modes.${modeKey}.description`),
+      prefix: t(`thinkingMode.modes.${modeKey}.prefix`)
+    };
+  });
+
   const [isOpen, setIsOpen] = useState(false);
   const dropdownRef = useRef(null);
 
@@ -60,7 +79,7 @@ function ThinkingModeSelector({ selectedMode, onModeChange, onClose, className =
     return () => document.removeEventListener('mousedown', handleClickOutside);
   }, [onClose]);
 
-  const currentMode = thinkingModes.find(mode => mode.id === selectedMode) || thinkingModes[0];
+  const currentMode = translatedModes.find(mode => mode.id === selectedMode) || translatedModes[0];
   const IconComponent = currentMode.icon || Brain;
 
   return (
@@ -69,11 +88,11 @@ function ThinkingModeSelector({ selectedMode, onModeChange, onClose, className =
         type="button"
         onClick={() => setIsOpen(!isOpen)}
         className={`w-10 h-10 sm:w-10 sm:h-10 rounded-full flex items-center justify-center transition-all duration-200 ${
-          selectedMode === 'none' 
-            ? 'bg-gray-100 hover:bg-gray-200 dark:bg-gray-700 dark:hover:bg-gray-600' 
+          selectedMode === 'none'
+            ? 'bg-gray-100 hover:bg-gray-200 dark:bg-gray-700 dark:hover:bg-gray-600'
             : 'bg-blue-100 hover:bg-blue-200 dark:bg-blue-900 dark:hover:bg-blue-800'
         }`}
-        title={`Thinking mode: ${currentMode.name}`}
+        title={t('thinkingMode.buttonTitle', { mode: currentMode.name })}
       >
         <IconComponent className={`w-5 h-5 ${currentMode.color}`} />
       </button>
@@ -83,7 +102,7 @@ function ThinkingModeSelector({ selectedMode, onModeChange, onClose, className =
           <div className="p-3 border-b border-gray-200 dark:border-gray-700">
             <div className="flex items-center justify-between">
               <h3 className="text-sm font-semibold text-gray-900 dark:text-white">
-                Thinking Mode
+                {t('thinkingMode.selector.title')}
               </h3>
               <button
                 onClick={() => {
@@ -96,12 +115,12 @@ function ThinkingModeSelector({ selectedMode, onModeChange, onClose, className =
               </button>
             </div>
             <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
-              Extended thinking gives Claude more time to evaluate alternatives
+              {t('thinkingMode.selector.description')}
             </p>
           </div>
-          
+
           <div className="py-1">
-            {thinkingModes.map((mode) => {
+            {translatedModes.map((mode) => {
               const ModeIcon = mode.icon;
               const isSelected = mode.id === selectedMode;
               
@@ -130,7 +149,7 @@ function ThinkingModeSelector({ selectedMode, onModeChange, onClose, className =
                         </span>
                         {isSelected && (
                           <span className="text-xs bg-blue-100 dark:bg-blue-900 text-blue-700 dark:text-blue-300 px-2 py-0.5 rounded">
-                            Active
+                            {t('thinkingMode.selector.active')}
                           </span>
                         )}
                       </div>
@@ -148,10 +167,10 @@ function ThinkingModeSelector({ selectedMode, onModeChange, onClose, className =
               );
             })}
           </div>
-          
+
           <div className="p-3 border-t border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900">
             <p className="text-xs text-gray-600 dark:text-gray-400">
-              <strong>Tip:</strong> Higher thinking modes take more time but provide more thorough analysis
+              <strong>Tip:</strong> {t('thinkingMode.selector.tip')}
             </p>
           </div>
         </div>
diff --git a/src/i18n/locales/en/chat.json b/src/i18n/locales/en/chat.json
index d612791..2804554 100644
--- a/src/i18n/locales/en/chat.json
+++ b/src/i18n/locales/en/chat.json
@@ -107,5 +107,41 @@
     },
     "clickToChangeMode": "Click to change permission mode (or press Tab in input)",
     "showAllCommands": "Show all commands"
+  },
+  "thinkingMode": {
+    "selector": {
+      "title": "Thinking Mode",
+      "description": "Extended thinking gives Claude more time to evaluate alternatives",
+      "active": "Active",
+      "tip": "Higher thinking modes take more time but provide more thorough analysis"
+    },
+    "modes": {
+      "none": {
+        "name": "Standard",
+        "description": "Regular Claude response",
+        "prefix": ""
+      },
+      "think": {
+        "name": "Think",
+        "description": "Basic extended thinking",
+        "prefix": "think"
+      },
+      "thinkHard": {
+        "name": "Think Hard",
+        "description": "More thorough evaluation",
+        "prefix": "think hard"
+      },
+      "thinkHarder": {
+        "name": "Think Harder",
+        "description": "Deep analysis with alternatives",
+        "prefix": "think harder"
+      },
+      "ultrathink": {
+        "name": "Ultrathink",
+        "description": "Maximum thinking budget",
+        "prefix": "ultrathink"
+      }
+    },
+    "buttonTitle": "Thinking mode: {{mode}}"
   }
 }
diff --git a/src/i18n/locales/zh-CN/chat.json b/src/i18n/locales/zh-CN/chat.json
index ef73178..87782e6 100644
--- a/src/i18n/locales/zh-CN/chat.json
+++ b/src/i18n/locales/zh-CN/chat.json
@@ -107,5 +107,41 @@
     },
     "clickToChangeMode": "点击更改权限模式（或在输入框中按 Tab）",
     "showAllCommands": "显示所有命令"
+  },
+  "thinkingMode": {
+    "selector": {
+      "title": "思考模式",
+      "description": "扩展思考给 Claude 更多时间来评估替代方案",
+      "active": "激活",
+      "tip": "更高的思考模式需要更多时间，但提供更彻底的分析"
+    },
+    "modes": {
+      "none": {
+        "name": "标准",
+        "description": "常规 Claude 响应",
+        "prefix": ""
+      },
+      "think": {
+        "name": "思考",
+        "description": "基本扩展思考",
+        "prefix": "思考"
+      },
+      "thinkHard": {
+        "name": "深入思考",
+        "description": "更彻底的评估",
+        "prefix": "深入思考"
+      },
+      "thinkHarder": {
+        "name": "更深入思考",
+        "description": "考虑替代方案的深度分析",
+        "prefix": "更深入思考"
+      },
+      "ultrathink": {
+        "name": "超级思考",
+        "description": "最大思考预算",
+        "prefix": "超级思考"
+      }
+    },
+    "buttonTitle": "思考模式：{{mode}}"
   }
 }

From 74640a7f313065e24a86888c15dfce592b1452ae Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Eric=20Blanquer=E2=80=8B?= <eric.blanquer@gmail.com>
Date: Tue, 20 Jan 2026 22:57:10 +0100
Subject: [PATCH 13/24] feat: allow deleting projects with sessions and add
 styled confirmation modal

- Add force delete option to delete projects with existing sessions
- Add styled confirmation modal with session count warning
- Add deletingProjects state to show loading indicator during deletion
- Delete associated Codex sessions when deleting a project (with limit: 0)
- Delete associated Cursor sessions directory when deleting a project
- Add fallback to extractProjectDirectory when projectPath undefined
- Use finally block for deletingProjects cleanup
- Add fallback name in delete modal
---
 server/index.js            |   5 +-
 server/projects.js         |  70 +++++++++++----
 src/components/Sidebar.jsx | 175 +++++++++++++++++++++++++++++++------
 src/utils/api.js           |   4 +-
 4 files changed, 205 insertions(+), 49 deletions(-)

diff --git a/server/index.js b/server/index.js
index b3c72b3..2f19dcd 100755
--- a/server/index.js
+++ b/server/index.js
@@ -455,11 +455,12 @@ app.delete('/api/projects/:projectName/sessions/:sessionId', authenticateToken,
     }
 });
 
-// Delete project endpoint (only if empty)
+// Delete project endpoint (force=true to delete with sessions)
 app.delete('/api/projects/:projectName', authenticateToken, async (req, res) => {
     try {
         const { projectName } = req.params;
-        await deleteProject(projectName);
+        const force = req.query.force === 'true';
+        await deleteProject(projectName, force);
         res.json({ success: true });
     } catch (error) {
         res.status(500).json({ error: error.message });
diff --git a/server/projects.js b/server/projects.js
index c6deeac..b4606f8 100755
--- a/server/projects.js
+++ b/server/projects.js
@@ -1026,25 +1026,56 @@ async function isProjectEmpty(projectName) {
   }
 }
 
-// Delete an empty project
-async function deleteProject(projectName) {
+// Delete a project (force=true to delete even with sessions)
+async function deleteProject(projectName, force = false) {
   const projectDir = path.join(os.homedir(), '.claude', 'projects', projectName);
-  
+
   try {
-    // First check if the project is empty
     const isEmpty = await isProjectEmpty(projectName);
-    if (!isEmpty) {
+    if (!isEmpty && !force) {
       throw new Error('Cannot delete project with existing sessions');
     }
-    
-    // Remove the project directory
-    await fs.rm(projectDir, { recursive: true, force: true });
-    
-    // Remove from project config
+
     const config = await loadProjectConfig();
+    let projectPath = config[projectName]?.path || config[projectName]?.originalPath;
+
+    // Fallback to extractProjectDirectory if projectPath is not in config
+    if (!projectPath) {
+      projectPath = await extractProjectDirectory(projectName);
+    }
+
+    // Remove the project directory (includes all Claude sessions)
+    await fs.rm(projectDir, { recursive: true, force: true });
+
+    // Delete all Codex sessions associated with this project
+    if (projectPath) {
+      try {
+        const codexSessions = await getCodexSessions(projectPath, { limit: 0 });
+        for (const session of codexSessions) {
+          try {
+            await deleteCodexSession(session.id);
+          } catch (err) {
+            console.warn(`Failed to delete Codex session ${session.id}:`, err.message);
+          }
+        }
+      } catch (err) {
+        console.warn('Failed to delete Codex sessions:', err.message);
+      }
+
+      // Delete Cursor sessions directory if it exists
+      try {
+        const hash = crypto.createHash('md5').update(projectPath).digest('hex');
+        const cursorProjectDir = path.join(os.homedir(), '.cursor', 'chats', hash);
+        await fs.rm(cursorProjectDir, { recursive: true, force: true });
+      } catch (err) {
+        // Cursor dir may not exist, ignore
+      }
+    }
+
+    // Remove from project config
     delete config[projectName];
     await saveProjectConfig(config);
-    
+
     return true;
   } catch (error) {
     console.error(`Error deleting project ${projectName}:`, error);
@@ -1055,17 +1086,17 @@ async function deleteProject(projectName) {
 // Add a project manually to the config (without creating folders)
 async function addProjectManually(projectPath, displayName = null) {
   const absolutePath = path.resolve(projectPath);
-  
+
   try {
     // Check if the path exists
     await fs.access(absolutePath);
   } catch (error) {
     throw new Error(`Path does not exist: ${absolutePath}`);
   }
-  
+
   // Generate project name (encode path for use as directory name)
   const projectName = absolutePath.replace(/\//g, '-');
-  
+
   // Check if project already exists in config
   const config = await loadProjectConfig();
   const projectDir = path.join(os.homedir(), '.claude', 'projects', projectName);
@@ -1076,13 +1107,13 @@ async function addProjectManually(projectPath, displayName = null) {
 
   // Allow adding projects even if the directory exists - this enables tracking
   // existing Claude Code or Cursor projects in the UI
-  
+
   // Add to config as manually added project
   config[projectName] = {
     manuallyAdded: true,
     originalPath: absolutePath
   };
-  
+
   if (displayName) {
     config[projectName].displayName = displayName;
   }
@@ -1214,7 +1245,8 @@ async function getCursorSessions(projectPath) {
 
 
 // Fetch Codex sessions for a given project path
-async function getCodexSessions(projectPath) {
+async function getCodexSessions(projectPath, options = {}) {
+  const { limit = 5 } = options;
   try {
     const codexSessionsDir = path.join(os.homedir(), '.codex', 'sessions');
     const sessions = [];
@@ -1279,8 +1311,8 @@ async function getCodexSessions(projectPath) {
     // Sort sessions by last activity (newest first)
     sessions.sort((a, b) => new Date(b.lastActivity) - new Date(a.lastActivity));
 
-    // Return only the first 5 sessions for performance
-    return sessions.slice(0, 5);
+    // Return limited sessions for performance (0 = unlimited for deletion)
+    return limit > 0 ? sessions.slice(0, limit) : sessions;
 
   } catch (error) {
     console.error('Error fetching Codex sessions:', error);
diff --git a/src/components/Sidebar.jsx b/src/components/Sidebar.jsx
index 35a56a2..d537da2 100644
--- a/src/components/Sidebar.jsx
+++ b/src/components/Sidebar.jsx
@@ -6,7 +6,7 @@ import { Badge } from './ui/badge';
 import { Input } from './ui/input';
 import { useTranslation } from 'react-i18next';
 
-import { FolderOpen, Folder, Plus, MessageSquare, Clock, ChevronDown, ChevronRight, Edit3, Check, X, Trash2, Settings, FolderPlus, RefreshCw, Sparkles, Edit2, Star, Search } from 'lucide-react';
+import { FolderOpen, Folder, Plus, MessageSquare, Clock, ChevronDown, ChevronRight, Edit3, Check, X, Trash2, Settings, FolderPlus, RefreshCw, Sparkles, Edit2, Star, Search, AlertTriangle } from 'lucide-react';
 import { cn } from '../lib/utils';
 import ClaudeLogo from './ClaudeLogo';
 import CursorLogo from './CursorLogo.jsx';
@@ -80,6 +80,9 @@ function Sidebar({
   const [editingSessionName, setEditingSessionName] = useState('');
   const [generatingSummary, setGeneratingSummary] = useState({});
   const [searchFilter, setSearchFilter] = useState('');
+  const [deletingProjects, setDeletingProjects] = useState(new Set());
+  const [deleteConfirmation, setDeleteConfirmation] = useState(null); // { project, sessionCount }
+  const [sessionDeleteConfirmation, setSessionDeleteConfirmation] = useState(null); // { projectName, sessionId, sessionTitle, provider }
 
   // TaskMaster context
   const { setCurrentProject, mcpServerStatus } = useTaskMaster();
@@ -306,10 +309,15 @@ function Sidebar({
     setEditingName('');
   };
 
-  const deleteSession = async (projectName, sessionId, provider = 'claude') => {
-    if (!confirm(t('messages.deleteSessionConfirm'))) {
-      return;
-    }
+  const showDeleteSessionConfirmation = (projectName, sessionId, sessionTitle, provider = 'claude') => {
+    setSessionDeleteConfirmation({ projectName, sessionId, sessionTitle, provider });
+  };
+
+  const confirmDeleteSession = async () => {
+    if (!sessionDeleteConfirmation) return;
+
+    const { projectName, sessionId, provider } = sessionDeleteConfirmation;
+    setSessionDeleteConfirmation(null);
 
     try {
       console.log('[Sidebar] Deleting session:', { projectName, sessionId, provider });
@@ -343,18 +351,26 @@ function Sidebar({
     }
   };
 
-  const deleteProject = async (projectName) => {
-    if (!confirm(t('messages.deleteProjectConfirm'))) {
-      return;
-    }
+  const deleteProject = (project) => {
+    const sessionCount = getAllSessions(project).length;
+    setDeleteConfirmation({ project, sessionCount });
+  };
+
+  const confirmDeleteProject = async () => {
+    if (!deleteConfirmation) return;
+
+    const { project, sessionCount } = deleteConfirmation;
+    const isEmpty = sessionCount === 0;
+
+    setDeleteConfirmation(null);
+    setDeletingProjects(prev => new Set([...prev, project.name]));
 
     try {
-      const response = await api.deleteProject(projectName);
+      const response = await api.deleteProject(project.name, !isEmpty);
 
       if (response.ok) {
-        // Call parent callback if provided
         if (onProjectDelete) {
-          onProjectDelete(projectName);
+          onProjectDelete(project.name);
         }
       } else {
         const error = await response.json();
@@ -364,6 +380,12 @@ function Sidebar({
     } catch (error) {
       console.error('Error deleting project:', error);
       alert(t('messages.deleteProjectError'));
+    } finally {
+      setDeletingProjects(prev => {
+        const next = new Set(prev);
+        next.delete(project.name);
+        return next;
+      });
     }
   };
 
@@ -488,6 +510,110 @@ function Sidebar({
         document.body
       )}
 
+      {/* Delete Confirmation Modal */}
+      {deleteConfirmation && ReactDOM.createPortal(
+        <div className="fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center z-50 p-4">
+          <div className="bg-card border border-border rounded-xl shadow-2xl max-w-md w-full overflow-hidden">
+            <div className="p-6">
+              <div className="flex items-start gap-4">
+                <div className="w-12 h-12 rounded-full bg-red-100 dark:bg-red-900/30 flex items-center justify-center flex-shrink-0">
+                  <AlertTriangle className="w-6 h-6 text-red-600 dark:text-red-400" />
+                </div>
+                <div className="flex-1 min-w-0">
+                  <h3 className="text-lg font-semibold text-foreground mb-2">
+                    Delete Project
+                  </h3>
+                  <p className="text-sm text-muted-foreground mb-1">
+                    Are you sure you want to delete{' '}
+                    <span className="font-medium text-foreground">
+                      {deleteConfirmation.project.displayName || deleteConfirmation.project.name}
+                    </span>?
+                  </p>
+                  {deleteConfirmation.sessionCount > 0 && (
+                    <div className="mt-3 p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg">
+                      <p className="text-sm text-red-700 dark:text-red-300 font-medium">
+                        This project contains {deleteConfirmation.sessionCount} conversation{deleteConfirmation.sessionCount > 1 ? 's' : ''}.
+                      </p>
+                      <p className="text-xs text-red-600 dark:text-red-400 mt-1">
+                        All conversations will be permanently deleted.
+                      </p>
+                    </div>
+                  )}
+                  <p className="text-xs text-muted-foreground mt-3">
+                    This action cannot be undone.
+                  </p>
+                </div>
+              </div>
+            </div>
+            <div className="flex gap-3 p-4 bg-muted/30 border-t border-border">
+              <Button
+                variant="outline"
+                className="flex-1"
+                onClick={() => setDeleteConfirmation(null)}
+              >
+                Cancel
+              </Button>
+              <Button
+                variant="destructive"
+                className="flex-1 bg-red-600 hover:bg-red-700 text-white"
+                onClick={confirmDeleteProject}
+              >
+                <Trash2 className="w-4 h-4 mr-2" />
+                Delete
+              </Button>
+            </div>
+          </div>
+        </div>,
+        document.body
+      )}
+
+      {/* Session Delete Confirmation Modal */}
+      {sessionDeleteConfirmation && ReactDOM.createPortal(
+        <div className="fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center z-50 p-4">
+          <div className="bg-card border border-border rounded-xl shadow-2xl max-w-md w-full overflow-hidden">
+            <div className="p-6">
+              <div className="flex items-start gap-4">
+                <div className="w-12 h-12 rounded-full bg-red-100 dark:bg-red-900/30 flex items-center justify-center flex-shrink-0">
+                  <AlertTriangle className="w-6 h-6 text-red-600 dark:text-red-400" />
+                </div>
+                <div className="flex-1 min-w-0">
+                  <h3 className="text-lg font-semibold text-foreground mb-2">
+                    Delete Session
+                  </h3>
+                  <p className="text-sm text-muted-foreground mb-1">
+                    Are you sure you want to delete{' '}
+                    <span className="font-medium text-foreground">
+                      {sessionDeleteConfirmation.sessionTitle}
+                    </span>?
+                  </p>
+                  <p className="text-xs text-muted-foreground mt-3">
+                    This action cannot be undone.
+                  </p>
+                </div>
+              </div>
+            </div>
+            <div className="flex gap-3 p-4 bg-muted/30 border-t border-border">
+              <Button
+                variant="outline"
+                className="flex-1"
+                onClick={() => setSessionDeleteConfirmation(null)}
+              >
+                Cancel
+              </Button>
+              <Button
+                variant="destructive"
+                className="flex-1 bg-red-600 hover:bg-red-700 text-white"
+                onClick={confirmDeleteSession}
+              >
+                <Trash2 className="w-4 h-4 mr-2" />
+                Delete
+              </Button>
+            </div>
+          </div>
+        </div>,
+        document.body
+      )}
+
       <div
         className="h-full flex flex-col bg-card md:select-none"
         style={isPWA && isMobile ? { paddingTop: '44px' } : {}}
@@ -718,9 +844,10 @@ function Sidebar({
               const isExpanded = expandedProjects.has(project.name);
               const isSelected = selectedProject?.name === project.name;
               const isStarred = isProjectStarred(project.name);
-              
+              const isDeleting = deletingProjects.has(project.name);
+
               return (
-                <div key={project.name} className="md:space-y-1">
+                <div key={project.name} className={cn("md:space-y-1", isDeleting && "opacity-50 pointer-events-none")}>
                   {/* Project Header */}
                   <div className="group md:group">
                     {/* Mobile Project Item */}
@@ -849,18 +976,16 @@ function Sidebar({
                                       : "text-gray-600 dark:text-gray-400"
                                   )} />
                                 </button>
-                                {getAllSessions(project).length === 0 && (
-                                  <button
+                                <button
                                     className="w-8 h-8 rounded-lg bg-red-500/10 dark:bg-red-900/30 flex items-center justify-center active:scale-90 border border-red-200 dark:border-red-800"
                                     onClick={(e) => {
                                       e.stopPropagation();
-                                      deleteProject(project.name);
+                                      deleteProject(project);
                                     }}
-                                    onTouchEnd={handleTouchClick(() => deleteProject(project.name))}
+                                    onTouchEnd={handleTouchClick(() => deleteProject(project))}
                                   >
                                     <Trash2 className="w-4 h-4 text-red-600 dark:text-red-400" />
                                   </button>
-                                )}
                                 <button
                                   className="w-8 h-8 rounded-lg bg-primary/10 dark:bg-primary/20 flex items-center justify-center active:scale-90 border border-primary/20 dark:border-primary/30"
                                   onClick={(e) => {
@@ -1009,18 +1134,16 @@ function Sidebar({
                             >
                               <Edit3 className="w-3 h-3" />
                             </div>
-                            {getAllSessions(project).length === 0 && (
-                              <div
+                            <div
                                 className="w-6 h-6 opacity-0 group-hover:opacity-100 transition-all duration-200 hover:bg-red-50 dark:hover:bg-red-900/20 flex items-center justify-center rounded cursor-pointer touch:opacity-100"
                                 onClick={(e) => {
                                   e.stopPropagation();
-                                  deleteProject(project.name);
+                                  deleteProject(project);
                                 }}
                                 title={t('tooltips.deleteProject')}
                               >
                                 <Trash2 className="w-3 h-3 text-red-600 dark:text-red-400" />
                               </div>
-                            )}
                             {isExpanded ? (
                               <ChevronDown className="w-4 h-4 text-muted-foreground group-hover:text-foreground transition-colors" />
                             ) : (
@@ -1152,9 +1275,9 @@ function Sidebar({
                                       className="w-5 h-5 rounded-md bg-red-50 dark:bg-red-900/20 flex items-center justify-center active:scale-95 transition-transform opacity-70 ml-1"
                                       onClick={(e) => {
                                         e.stopPropagation();
-                                        deleteSession(project.name, session.id, session.__provider);
+                                        showDeleteSessionConfirmation(project.name, session.id, sessionName, session.__provider);
                                       }}
-                                      onTouchEnd={handleTouchClick(() => deleteSession(project.name, session.id, session.__provider))}
+                                      onTouchEnd={handleTouchClick(() => showDeleteSessionConfirmation(project.name, session.id, sessionName, session.__provider))}
                                     >
                                       <Trash2 className="w-2.5 h-2.5 text-red-600 dark:text-red-400" />
                                     </button>
@@ -1271,7 +1394,7 @@ function Sidebar({
                                       className="w-6 h-6 bg-red-50 hover:bg-red-100 dark:bg-red-900/20 dark:hover:bg-red-900/40 rounded flex items-center justify-center"
                                       onClick={(e) => {
                                         e.stopPropagation();
-                                        deleteSession(project.name, session.id, session.__provider);
+                                        showDeleteSessionConfirmation(project.name, session.id, sessionName, session.__provider);
                                       }}
                                       title={t('tooltips.deleteSession')}
                                     >
diff --git a/src/utils/api.js b/src/utils/api.js
index 894bce5..7f497cd 100644
--- a/src/utils/api.js
+++ b/src/utils/api.js
@@ -79,8 +79,8 @@ export const api = {
     authenticatedFetch(`/api/codex/sessions/${sessionId}`, {
       method: 'DELETE',
     }),
-  deleteProject: (projectName) =>
-    authenticatedFetch(`/api/projects/${projectName}`, {
+  deleteProject: (projectName, force = false) =>
+    authenticatedFetch(`/api/projects/${projectName}${force ? '?force=true' : ''}`, {
       method: 'DELETE',
     }),
   createProject: (path) =>

From 8cb34a73b5755cf2693d99974029a1443424d938 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Eric=20Blanquer=E2=80=8B?= <eric.blanquer@gmail.com>
Date: Wed, 21 Jan 2026 22:38:29 +0100
Subject: [PATCH 14/24] fix: localize delete confirmation modal strings

---
 src/components/Sidebar.jsx          | 24 ++++++++++++------------
 src/i18n/locales/en/sidebar.json    |  9 +++++++++
 src/i18n/locales/zh-CN/sidebar.json |  9 +++++++++
 3 files changed, 30 insertions(+), 12 deletions(-)

diff --git a/src/components/Sidebar.jsx b/src/components/Sidebar.jsx
index d537da2..512dbf6 100644
--- a/src/components/Sidebar.jsx
+++ b/src/components/Sidebar.jsx
@@ -521,10 +521,10 @@ function Sidebar({
                 </div>
                 <div className="flex-1 min-w-0">
                   <h3 className="text-lg font-semibold text-foreground mb-2">
-                    Delete Project
+                    {t('deleteConfirmation.deleteProject')}
                   </h3>
                   <p className="text-sm text-muted-foreground mb-1">
-                    Are you sure you want to delete{' '}
+                    {t('deleteConfirmation.confirmDelete')}{' '}
                     <span className="font-medium text-foreground">
                       {deleteConfirmation.project.displayName || deleteConfirmation.project.name}
                     </span>?
@@ -532,15 +532,15 @@ function Sidebar({
                   {deleteConfirmation.sessionCount > 0 && (
                     <div className="mt-3 p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg">
                       <p className="text-sm text-red-700 dark:text-red-300 font-medium">
-                        This project contains {deleteConfirmation.sessionCount} conversation{deleteConfirmation.sessionCount > 1 ? 's' : ''}.
+                        {t('deleteConfirmation.sessionCount', { count: deleteConfirmation.sessionCount })}
                       </p>
                       <p className="text-xs text-red-600 dark:text-red-400 mt-1">
-                        All conversations will be permanently deleted.
+                        {t('deleteConfirmation.allConversationsDeleted')}
                       </p>
                     </div>
                   )}
                   <p className="text-xs text-muted-foreground mt-3">
-                    This action cannot be undone.
+                    {t('deleteConfirmation.cannotUndo')}
                   </p>
                 </div>
               </div>
@@ -551,7 +551,7 @@ function Sidebar({
                 className="flex-1"
                 onClick={() => setDeleteConfirmation(null)}
               >
-                Cancel
+                {t('actions.cancel')}
               </Button>
               <Button
                 variant="destructive"
@@ -559,7 +559,7 @@ function Sidebar({
                 onClick={confirmDeleteProject}
               >
                 <Trash2 className="w-4 h-4 mr-2" />
-                Delete
+                {t('actions.delete')}
               </Button>
             </div>
           </div>
@@ -578,16 +578,16 @@ function Sidebar({
                 </div>
                 <div className="flex-1 min-w-0">
                   <h3 className="text-lg font-semibold text-foreground mb-2">
-                    Delete Session
+                    {t('deleteConfirmation.deleteSession')}
                   </h3>
                   <p className="text-sm text-muted-foreground mb-1">
-                    Are you sure you want to delete{' '}
+                    {t('deleteConfirmation.confirmDelete')}{' '}
                     <span className="font-medium text-foreground">
                       {sessionDeleteConfirmation.sessionTitle}
                     </span>?
                   </p>
                   <p className="text-xs text-muted-foreground mt-3">
-                    This action cannot be undone.
+                    {t('deleteConfirmation.cannotUndo')}
                   </p>
                 </div>
               </div>
@@ -598,7 +598,7 @@ function Sidebar({
                 className="flex-1"
                 onClick={() => setSessionDeleteConfirmation(null)}
               >
-                Cancel
+                {t('actions.cancel')}
               </Button>
               <Button
                 variant="destructive"
@@ -606,7 +606,7 @@ function Sidebar({
                 onClick={confirmDeleteSession}
               >
                 <Trash2 className="w-4 h-4 mr-2" />
-                Delete
+                {t('actions.delete')}
               </Button>
             </div>
           </div>
diff --git a/src/i18n/locales/en/sidebar.json b/src/i18n/locales/en/sidebar.json
index eb7a0d9..41689fa 100644
--- a/src/i18n/locales/en/sidebar.json
+++ b/src/i18n/locales/en/sidebar.json
@@ -98,5 +98,14 @@
   },
   "version": {
     "updateAvailable": "Update available"
+  },
+  "deleteConfirmation": {
+    "deleteProject": "Delete Project",
+    "deleteSession": "Delete Session",
+    "confirmDelete": "Are you sure you want to delete",
+    "sessionCount": "This project contains {{count}} conversation.",
+    "sessionCount_plural": "This project contains {{count}} conversations.",
+    "allConversationsDeleted": "All conversations will be permanently deleted.",
+    "cannotUndo": "This action cannot be undone."
   }
 }
diff --git a/src/i18n/locales/zh-CN/sidebar.json b/src/i18n/locales/zh-CN/sidebar.json
index e5e3c65..a3c5808 100644
--- a/src/i18n/locales/zh-CN/sidebar.json
+++ b/src/i18n/locales/zh-CN/sidebar.json
@@ -98,5 +98,14 @@
   },
   "version": {
     "updateAvailable": "有可用更新"
+  },
+  "deleteConfirmation": {
+    "deleteProject": "删除项目",
+    "deleteSession": "删除会话",
+    "confirmDelete": "您确定要删除",
+    "sessionCount": "此项目包含 {{count}} 个对话。",
+    "sessionCount_plural": "此项目包含 {{count}} 个对话。",
+    "allConversationsDeleted": "所有对话将被永久删除。",
+    "cannotUndo": "此操作无法撤销。"
   }
 }

From 9f534ce15b837377a2bd2e416fd3965d299f5ee3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Eric=20Blanquer=E2=80=8B?= <eric.blanquer@gmail.com>
Date: Wed, 21 Jan 2026 23:14:41 +0100
Subject: [PATCH 15/24] fix: use i18next v4+ pluralization format and add
 sessionTitle fallback

---
 src/components/Sidebar.jsx          | 2 +-
 src/i18n/locales/en/sidebar.json    | 4 ++--
 src/i18n/locales/zh-CN/sidebar.json | 4 ++--
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/Sidebar.jsx b/src/components/Sidebar.jsx
index 512dbf6..e558a9f 100644
--- a/src/components/Sidebar.jsx
+++ b/src/components/Sidebar.jsx
@@ -583,7 +583,7 @@ function Sidebar({
                   <p className="text-sm text-muted-foreground mb-1">
                     {t('deleteConfirmation.confirmDelete')}{' '}
                     <span className="font-medium text-foreground">
-                      {sessionDeleteConfirmation.sessionTitle}
+                      {sessionDeleteConfirmation.sessionTitle || t('sessions.unnamed')}
                     </span>?
                   </p>
                   <p className="text-xs text-muted-foreground mt-3">
diff --git a/src/i18n/locales/en/sidebar.json b/src/i18n/locales/en/sidebar.json
index 41689fa..7789ddb 100644
--- a/src/i18n/locales/en/sidebar.json
+++ b/src/i18n/locales/en/sidebar.json
@@ -103,8 +103,8 @@
     "deleteProject": "Delete Project",
     "deleteSession": "Delete Session",
     "confirmDelete": "Are you sure you want to delete",
-    "sessionCount": "This project contains {{count}} conversation.",
-    "sessionCount_plural": "This project contains {{count}} conversations.",
+    "sessionCount_one": "This project contains {{count}} conversation.",
+    "sessionCount_other": "This project contains {{count}} conversations.",
     "allConversationsDeleted": "All conversations will be permanently deleted.",
     "cannotUndo": "This action cannot be undone."
   }
diff --git a/src/i18n/locales/zh-CN/sidebar.json b/src/i18n/locales/zh-CN/sidebar.json
index a3c5808..34d52ed 100644
--- a/src/i18n/locales/zh-CN/sidebar.json
+++ b/src/i18n/locales/zh-CN/sidebar.json
@@ -103,8 +103,8 @@
     "deleteProject": "删除项目",
     "deleteSession": "删除会话",
     "confirmDelete": "您确定要删除",
-    "sessionCount": "此项目包含 {{count}} 个对话。",
-    "sessionCount_plural": "此项目包含 {{count}} 个对话。",
+    "sessionCount_one": "此项目包含 {{count}} 个对话。",
+    "sessionCount_other": "此项目包含 {{count}} 个对话。",
     "allConversationsDeleted": "所有对话将被永久删除。",
     "cannotUndo": "此操作无法撤销。"
   }

From fea8e307254f23e6f911e4293c97e0e88c9dc1b7 Mon Sep 17 00:00:00 2001
From: YuanNiancai <yuanniancai@formulas.cc>
Date: Thu, 22 Jan 2026 09:49:19 +0800
Subject: [PATCH 16/24] update: Add translations for some components

---
 README.zh-CN.md                     |  2 +-
 src/App.jsx                         | 45 +++++++++++++++--------------
 src/components/Sidebar.jsx          |  6 ++--
 src/i18n/locales/en/common.json     | 28 ++++++++++++++++++
 src/i18n/locales/en/sidebar.json    |  1 +
 src/i18n/locales/zh-CN/common.json  | 28 ++++++++++++++++++
 src/i18n/locales/zh-CN/sidebar.json |  1 +
 7 files changed, 85 insertions(+), 26 deletions(-)

diff --git a/README.zh-CN.md b/README.zh-CN.md
index 0973070..b62cd21 100644
--- a/README.zh-CN.md
+++ b/README.zh-CN.md
@@ -1,6 +1,6 @@
 <div align="center">
   <img src="public/logo.svg" alt="Claude Code UI" width="64" height="64">
-  <h1>Cloud CLI (aka Claude Code UI)</h1>
+  <h1>Cloud CLI (又名 Claude Code UI)</h1>
 </div>
 
 
diff --git a/src/App.jsx b/src/App.jsx
index 8f10ef5..a7dbc4c 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -36,7 +36,7 @@ import ProtectedRoute from './components/ProtectedRoute';
 import { useVersionCheck } from './hooks/useVersionCheck';
 import useLocalStorage from './hooks/useLocalStorage';
 import { api, authenticatedFetch } from './utils/api';
-import { I18nextProvider } from 'react-i18next';
+import { I18nextProvider, useTranslation } from 'react-i18next';
 import i18n from './i18n/config.js';
 
 
@@ -579,6 +579,7 @@ function AppContent() {
 
   // Version Upgrade Modal Component
   const VersionUpgradeModal = () => {
+    const { t } = useTranslation('common');
     const [isUpdating, setIsUpdating] = useState(false);
     const [updateOutput, setUpdateOutput] = useState('');
     const [updateError, setUpdateError] = useState('');
@@ -639,7 +640,7 @@ function AppContent() {
         <button
           className="fixed inset-0 bg-black/50 backdrop-blur-sm"
           onClick={() => setShowVersionModal(false)}
-          aria-label="Close version upgrade modal"
+          aria-label={t('versionUpdate.ariaLabels.closeModal')}
         />
 
         {/* Modal */}
@@ -653,9 +654,9 @@ function AppContent() {
                 </svg>
               </div>
               <div>
-                <h2 className="text-lg font-semibold text-gray-900 dark:text-white">Update Available</h2>
+                <h2 className="text-lg font-semibold text-gray-900 dark:text-white">{t('versionUpdate.title')}</h2>
                 <p className="text-sm text-gray-500 dark:text-gray-400">
-                  {releaseInfo?.title || 'A new version is ready'}
+                  {releaseInfo?.title || t('versionUpdate.newVersionReady')}
                 </p>
               </div>
             </div>
@@ -672,11 +673,11 @@ function AppContent() {
           {/* Version Info */}
           <div className="space-y-3">
             <div className="flex justify-between items-center p-3 bg-gray-50 dark:bg-gray-700/50 rounded-lg">
-              <span className="text-sm font-medium text-gray-700 dark:text-gray-300">Current Version</span>
+              <span className="text-sm font-medium text-gray-700 dark:text-gray-300">{t('versionUpdate.currentVersion')}</span>
               <span className="text-sm text-gray-900 dark:text-white font-mono">{currentVersion}</span>
             </div>
             <div className="flex justify-between items-center p-3 bg-blue-50 dark:bg-blue-900/20 rounded-lg border border-blue-200 dark:border-blue-700">
-              <span className="text-sm font-medium text-blue-700 dark:text-blue-300">Latest Version</span>
+              <span className="text-sm font-medium text-blue-700 dark:text-blue-300">{t('versionUpdate.latestVersion')}</span>
               <span className="text-sm text-blue-900 dark:text-blue-100 font-mono">{latestVersion}</span>
             </div>
           </div>
@@ -685,7 +686,7 @@ function AppContent() {
           {releaseInfo?.body && (
             <div className="space-y-3">
               <div className="flex items-center justify-between">
-                <h3 className="text-sm font-medium text-gray-900 dark:text-white">What's New:</h3>
+                <h3 className="text-sm font-medium text-gray-900 dark:text-white">{t('versionUpdate.whatsNew')}</h3>
                 {releaseInfo?.htmlUrl && (
                   <a
                     href={releaseInfo.htmlUrl}
@@ -693,7 +694,7 @@ function AppContent() {
                     rel="noopener noreferrer"
                     className="text-xs text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 hover:underline flex items-center gap-1"
                   >
-                    View full release
+                    {t('versionUpdate.viewFullRelease')}
                     <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                       <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
                     </svg>
@@ -711,7 +712,7 @@ function AppContent() {
           {/* Update Output */}
           {updateOutput && (
             <div className="space-y-2">
-              <h3 className="text-sm font-medium text-gray-900 dark:text-white">Update Progress:</h3>
+              <h3 className="text-sm font-medium text-gray-900 dark:text-white">{t('versionUpdate.updateProgress')}</h3>
               <div className="bg-gray-900 dark:bg-gray-950 rounded-lg p-4 border border-gray-700 max-h-48 overflow-y-auto">
                 <pre className="text-xs text-green-400 font-mono whitespace-pre-wrap">{updateOutput}</pre>
               </div>
@@ -721,14 +722,14 @@ function AppContent() {
           {/* Upgrade Instructions */}
           {!isUpdating && !updateOutput && (
             <div className="space-y-3">
-              <h3 className="text-sm font-medium text-gray-900 dark:text-white">Manual upgrade:</h3>
+              <h3 className="text-sm font-medium text-gray-900 dark:text-white">{t('versionUpdate.manualUpgrade')}</h3>
               <div className="bg-gray-100 dark:bg-gray-800 rounded-lg p-3 border">
                 <code className="text-sm text-gray-800 dark:text-gray-200 font-mono">
                   git checkout main && git pull && npm install
                 </code>
               </div>
               <p className="text-xs text-gray-600 dark:text-gray-400">
-                Or click "Update Now" to run the update automatically.
+                {t('versionUpdate.manualUpgradeHint')}
               </p>
             </div>
           )}
@@ -739,7 +740,7 @@ function AppContent() {
               onClick={() => setShowVersionModal(false)}
               className="flex-1 px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 rounded-md transition-colors"
             >
-              {updateOutput ? 'Close' : 'Later'}
+              {updateOutput ? t('versionUpdate.buttons.close') : t('versionUpdate.buttons.later')}
             </button>
             {!updateOutput && (
               <>
@@ -749,7 +750,7 @@ function AppContent() {
                   }}
                   className="flex-1 px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 bg-gray-100 dark:bg-gray-700 hover:bg-gray-200 dark:hover:bg-gray-600 rounded-md transition-colors"
                 >
-                  Copy Command
+                  {t('versionUpdate.buttons.copyCommand')}
                 </button>
                 <button
                   onClick={handleUpdateNow}
@@ -759,10 +760,10 @@ function AppContent() {
                   {isUpdating ? (
                     <>
                       <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" />
-                      Updating...
+                      {t('versionUpdate.buttons.updating')}
                     </>
                   ) : (
-                    'Update Now'
+                    t('versionUpdate.buttons.updateNow')
                   )}
                 </button>
               </>
@@ -813,8 +814,8 @@ function AppContent() {
                 <button
                   onClick={() => setSidebarVisible(true)}
                   className="p-2 hover:bg-accent rounded-md transition-colors duration-200 group"
-                  aria-label="Show sidebar"
-                  title="Show sidebar"
+                  aria-label={t('versionUpdate.ariaLabels.showSidebar')}
+                  title={t('versionUpdate.ariaLabels.showSidebar')}
                 >
                   <svg
                     className="w-5 h-5 text-foreground group-hover:scale-110 transition-transform"
@@ -830,8 +831,8 @@ function AppContent() {
                 <button
                   onClick={() => setShowSettings(true)}
                   className="p-2 hover:bg-accent rounded-md transition-colors duration-200"
-                  aria-label="Settings"
-                  title="Settings"
+                  aria-label={t('versionUpdate.ariaLabels.settings')}
+                  title={t('versionUpdate.ariaLabels.settings')}
                 >
                   <SettingsIcon className="w-5 h-5 text-muted-foreground hover:text-foreground transition-colors" />
                 </button>
@@ -841,8 +842,8 @@ function AppContent() {
                   <button
                     onClick={() => setShowVersionModal(true)}
                     className="relative p-2 hover:bg-accent rounded-md transition-colors duration-200"
-                    aria-label="Update available"
-                    title="Update available"
+                    aria-label={t('versionUpdate.ariaLabels.updateAvailable')}
+                    title={t('versionUpdate.ariaLabels.updateAvailable')}
                   >
                     <Sparkles className="w-5 h-5 text-blue-500" />
                     <span className="absolute top-1 right-1 w-2 h-2 bg-blue-500 rounded-full animate-pulse" />
@@ -870,7 +871,7 @@ function AppContent() {
               e.stopPropagation();
               setSidebarOpen(false);
             }}
-            aria-label="Close sidebar"
+            aria-label={t('versionUpdate.ariaLabels.closeSidebar')}
           />
           <div
             className={`relative w-[85vw] max-w-sm sm:w-80 h-full bg-card border-r border-border transform transition-transform duration-150 ease-out ${
diff --git a/src/components/Sidebar.jsx b/src/components/Sidebar.jsx
index 35a56a2..8b0e099 100644
--- a/src/components/Sidebar.jsx
+++ b/src/components/Sidebar.jsx
@@ -669,7 +669,7 @@ function Sidebar({
               <p className="text-sm text-muted-foreground">
                 {t('projects.fetchingProjects')}
               </p>
-              <h3 className="text-base font-medium text-foreground mb-2 md:mb-1">Loading projects...</h3>
+              <h3 className="text-base font-medium text-foreground mb-2 md:mb-1">{t('projects.loadingProjects')}</h3>
               {loadingProgress && loadingProgress.total > 0 ? (
                 <div className="space-y-2">
                   <div className="w-full bg-muted rounded-full h-2 overflow-hidden">
@@ -679,7 +679,7 @@ function Sidebar({
                     />
                   </div>
                   <p className="text-sm text-muted-foreground">
-                    {loadingProgress.current}/{loadingProgress.total} projects
+                    {loadingProgress.current}/{loadingProgress.total} {t('projects.projects')}
                   </p>
                   {loadingProgress.currentProject && (
                     <p className="text-xs text-muted-foreground/70 truncate max-w-[200px] mx-auto" title={loadingProgress.currentProject}>
@@ -689,7 +689,7 @@ function Sidebar({
                 </div>
               ) : (
                 <p className="text-sm text-muted-foreground">
-                  Fetching your Claude projects and sessions
+                  {t('projects.fetchingProjects')}
                 </p>
               )}
             </div>
diff --git a/src/i18n/locales/en/common.json b/src/i18n/locales/en/common.json
index ffc7972..bb2d6bc 100644
--- a/src/i18n/locales/en/common.json
+++ b/src/i18n/locales/en/common.json
@@ -186,5 +186,33 @@
       "providePath": "Please provide a workspace path",
       "failedToCreate": "Failed to create workspace"
     }
+  },
+  "versionUpdate": {
+    "title": "Update Available",
+    "newVersionReady": "A new version is ready",
+    "currentVersion": "Current Version",
+    "latestVersion": "Latest Version",
+    "whatsNew": "What's New:",
+    "viewFullRelease": "View full release",
+    "updateProgress": "Update Progress:",
+    "manualUpgrade": "Manual upgrade:",
+    "manualUpgradeHint": "Or click \"Update Now\" to run the update automatically.",
+    "updateCompleted": "Update completed successfully!",
+    "restartServer": "Please restart the server to apply changes.",
+    "updateFailed": "Update failed",
+    "buttons": {
+      "close": "Close",
+      "later": "Later",
+      "copyCommand": "Copy Command",
+      "updateNow": "Update Now",
+      "updating": "Updating..."
+    },
+    "ariaLabels": {
+      "closeModal": "Close version upgrade modal",
+      "showSidebar": "Show sidebar",
+      "settings": "Settings",
+      "updateAvailable": "Update available",
+      "closeSidebar": "Close sidebar"
+    }
   }
 }
diff --git a/src/i18n/locales/en/sidebar.json b/src/i18n/locales/en/sidebar.json
index eb7a0d9..5662c2e 100644
--- a/src/i18n/locales/en/sidebar.json
+++ b/src/i18n/locales/en/sidebar.json
@@ -14,6 +14,7 @@
     "newSession": "New Session",
     "codexSession": "Codex Session",
     "fetchingProjects": "Fetching your Claude projects and sessions",
+    "projects": "projects",
     "noMatchingProjects": "No matching projects",
     "tryDifferentSearch": "Try adjusting your search term",
     "runClaudeCli": "Run Claude CLI in a project directory to get started"
diff --git a/src/i18n/locales/zh-CN/common.json b/src/i18n/locales/zh-CN/common.json
index 1f8bc04..9c66ca8 100644
--- a/src/i18n/locales/zh-CN/common.json
+++ b/src/i18n/locales/zh-CN/common.json
@@ -186,5 +186,33 @@
       "providePath": "请提供工作区路径",
       "failedToCreate": "创建工作区失败"
     }
+  },
+  "versionUpdate": {
+    "title": "有可用更新",
+    "newVersionReady": "新版本已准备就绪",
+    "currentVersion": "当前版本",
+    "latestVersion": "最新版本",
+    "whatsNew": "新内容：",
+    "viewFullRelease": "查看完整发布",
+    "updateProgress": "更新进度：",
+    "manualUpgrade": "手动升级：",
+    "manualUpgradeHint": "或点击'立即更新'以自动运行更新。",
+    "updateCompleted": "更新成功完成！",
+    "restartServer": "请重启服务器以应用更改。",
+    "updateFailed": "更新失败",
+    "buttons": {
+      "close": "关闭",
+      "later": "稍后",
+      "copyCommand": "复制命令",
+      "updateNow": "立即更新",
+      "updating": "更新中..."
+    },
+    "ariaLabels": {
+      "closeModal": "关闭版本升级模态框",
+      "showSidebar": "显示侧边栏",
+      "settings": "设置",
+      "updateAvailable": "有可用更新",
+      "closeSidebar": "关闭侧边栏"
+    }
   }
 }
diff --git a/src/i18n/locales/zh-CN/sidebar.json b/src/i18n/locales/zh-CN/sidebar.json
index e5e3c65..d3de963 100644
--- a/src/i18n/locales/zh-CN/sidebar.json
+++ b/src/i18n/locales/zh-CN/sidebar.json
@@ -14,6 +14,7 @@
     "newSession": "新会话",
     "codexSession": "Codex 会话",
     "fetchingProjects": "正在获取您的 Claude 项目和会话",
+    "projects": "项目",
     "noMatchingProjects": "未找到匹配的项目",
     "tryDifferentSearch": "尝试调整您的搜索词",
     "runClaudeCli": "在项目目录中运行 Claude CLI 以开始使用"

From 4948aa3d64e521291077fd8de376f151efe5138a Mon Sep 17 00:00:00 2001
From: YuanNiancai <yuanniancai@formulas.cc>
Date: Thu, 22 Jan 2026 10:07:40 +0800
Subject: [PATCH 17/24] =?UTF-8?q?fix=EF=BC=9AFix=20missing=20imports?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.jsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/App.jsx b/src/App.jsx
index a7dbc4c..371d490 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -44,6 +44,7 @@ import i18n from './i18n/config.js';
 function AppContent() {
   const navigate = useNavigate();
   const { sessionId } = useParams();
+  const { t } = useTranslation('common');
   
   const { updateAvailable, latestVersion, currentVersion, releaseInfo } = useVersionCheck('siteboon', 'claudecodeui');
   const [showVersionModal, setShowVersionModal] = useState(false);

From 394b95ae29babe34328f8d81305db302bfc51843 Mon Sep 17 00:00:00 2001
From: YuanNiancai <yuanniancai@formulas.cc>
Date: Thu, 22 Jan 2026 14:38:24 +0800
Subject: [PATCH 18/24] add some translations for chatInterface.jsx

---
 src/components/ChatInterface.jsx | 38 ++++++++++++++++----------------
 src/i18n/locales/en/chat.json    | 32 +++++++++++++++++++++++++++
 src/i18n/locales/zh-CN/chat.json | 32 +++++++++++++++++++++++++++
 3 files changed, 83 insertions(+), 19 deletions(-)

diff --git a/src/components/ChatInterface.jsx b/src/components/ChatInterface.jsx
index 3a22238..a7e1bf1 100644
--- a/src/components/ChatInterface.jsx
+++ b/src/components/ChatInterface.jsx
@@ -4789,16 +4789,16 @@ function ChatInterface({ selectedProject, selectedSession, ws, sendMessage, mess
           <div className="text-center text-gray-500 dark:text-gray-400 mt-8">
             <div className="flex items-center justify-center space-x-2">
               <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-gray-400"></div>
-              <p>Loading session messages...</p>
+              <p>{t('session.loading.sessionMessages')}</p>
             </div>
           </div>
         ) : chatMessages.length === 0 ? (
           <div className="flex items-center justify-center h-full">
             {!selectedSession && !currentSessionId && (
               <div className="text-center px-6 sm:px-4 py-8">
-                <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-3">Choose Your AI Assistant</h2>
+                <h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-3">{t('providerSelection.title')}</h2>
                 <p className="text-gray-600 dark:text-gray-400 mb-8">
-                  Select a provider to start a new conversation
+                  {t('providerSelection.description')}
                 </p>
                 
                 <div className="flex flex-col sm:flex-row gap-4 justify-center items-center mb-8">
@@ -4820,7 +4820,7 @@ function ChatInterface({ selectedProject, selectedSession, ws, sendMessage, mess
                       <ClaudeLogo className="w-10 h-10" />
                       <div>
                         <p className="font-semibold text-gray-900 dark:text-white">Claude</p>
-                        <p className="text-xs text-gray-500 dark:text-gray-400">by Anthropic</p>
+                        <p className="text-xs text-gray-500 dark:text-gray-400">{t('providerSelection.providerInfo.anthropic')}</p>
                       </div>
                     </div>
                     {provider === 'claude' && (
@@ -4852,7 +4852,7 @@ function ChatInterface({ selectedProject, selectedSession, ws, sendMessage, mess
                       <CursorLogo className="w-10 h-10" />
                       <div>
                         <p className="font-semibold text-gray-900 dark:text-white">Cursor</p>
-                        <p className="text-xs text-gray-500 dark:text-gray-400">AI Code Editor</p>
+                        <p className="text-xs text-gray-500 dark:text-gray-400">{t('providerSelection.providerInfo.cursorEditor')}</p>
                       </div>
                     </div>
                     {provider === 'cursor' && (
@@ -4884,7 +4884,7 @@ function ChatInterface({ selectedProject, selectedSession, ws, sendMessage, mess
                       <CodexLogo className="w-10 h-10" />
                       <div>
                         <p className="font-semibold text-gray-900 dark:text-white">Codex</p>
-                        <p className="text-xs text-gray-500 dark:text-gray-400">by OpenAI</p>
+                        <p className="text-xs text-gray-500 dark:text-gray-400">{t('providerSelection.providerInfo.openai')}</p>
                       </div>
                     </div>
                     {provider === 'codex' && (
@@ -4902,7 +4902,7 @@ function ChatInterface({ selectedProject, selectedSession, ws, sendMessage, mess
                 {/* Model Selection - Always reserve space to prevent jumping */}
                 <div className={`mb-6 transition-opacity duration-200 ${provider ? 'opacity-100' : 'opacity-0 pointer-events-none'}`}>
                   <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-                    Select Model
+                    {t('providerSelection.selectModel')}
                   </label>
                   {provider === 'claude' ? (
                     <select
@@ -4952,12 +4952,12 @@ function ChatInterface({ selectedProject, selectedSession, ws, sendMessage, mess
                 
                 <p className="text-sm text-gray-500 dark:text-gray-400">
                   {provider === 'claude'
-                    ? `Ready to use Claude with ${claudeModel}. Start typing your message below.`
+                    ? t('providerSelection.readyPrompt.claude', { model: claudeModel })
                     : provider === 'cursor'
-                    ? `Ready to use Cursor with ${cursorModel}. Start typing your message below.`
+                    ? t('providerSelection.readyPrompt.cursor', { model: cursorModel })
                     : provider === 'codex'
-                    ? `Ready to use Codex with ${codexModel}. Start typing your message below.`
-                    : 'Select a provider above to begin'
+                    ? t('providerSelection.readyPrompt.codex', { model: codexModel })
+                    : t('providerSelection.readyPrompt.default')
                   }
                 </p>
                 
@@ -4974,9 +4974,9 @@ function ChatInterface({ selectedProject, selectedSession, ws, sendMessage, mess
             )}
             {selectedSession && (
               <div className="text-center text-gray-500 dark:text-gray-400 px-6 sm:px-4">
-                <p className="font-bold text-lg sm:text-xl mb-3">Continue your conversation</p>
+                <p className="font-bold text-lg sm:text-xl mb-3">{t('session.continue.title')}</p>
                 <p className="text-sm sm:text-base leading-relaxed">
-                  Ask questions about your code, request changes, or get help with development tasks
+                  {t('session.continue.description')}
                 </p>
                 
                 {/* Show NextTaskBanner for existing sessions too, only if TaskMaster is installed */}
@@ -4998,7 +4998,7 @@ function ChatInterface({ selectedProject, selectedSession, ws, sendMessage, mess
               <div className="text-center text-gray-500 dark:text-gray-400 py-3">
                 <div className="flex items-center justify-center space-x-2">
                   <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-gray-400"></div>
-                  <p className="text-sm">Loading older messages...</p>
+                  <p className="text-sm">{t('session.loading.olderMessages')}</p>
                 </div>
               </div>
             )}
@@ -5008,8 +5008,8 @@ function ChatInterface({ selectedProject, selectedSession, ws, sendMessage, mess
               <div className="text-center text-gray-500 dark:text-gray-400 text-sm py-2 border-b border-gray-200 dark:border-gray-700">
                 {totalMessages > 0 && (
                   <span>
-                    Showing {sessionMessages.length} of {totalMessages} messages • 
-                    <span className="text-xs">Scroll up to load more</span>
+                    {t('session.messages.showingOf', { shown: sessionMessages.length, total: totalMessages })} •
+                    <span className="text-xs">{t('session.messages.scrollToLoad')}</span>
                   </span>
                 )}
               </div>
@@ -5018,12 +5018,12 @@ function ChatInterface({ selectedProject, selectedSession, ws, sendMessage, mess
             {/* Legacy message count indicator (for non-paginated view) */}
             {!hasMoreMessages && chatMessages.length > visibleMessageCount && (
               <div className="text-center text-gray-500 dark:text-gray-400 text-sm py-2 border-b border-gray-200 dark:border-gray-700">
-                Showing last {visibleMessageCount} messages ({chatMessages.length} total) • 
-                <button 
+                {t('session.messages.showingLast', { count: visibleMessageCount, total: chatMessages.length })} •
+                <button
                   className="ml-1 text-blue-600 hover:text-blue-700 underline"
                   onClick={loadEarlierMessages}
                 >
-                  Load earlier messages
+                  {t('session.messages.loadEarlier')}
                 </button>
               </div>
             )}
diff --git a/src/i18n/locales/en/chat.json b/src/i18n/locales/en/chat.json
index 2804554..54e2835 100644
--- a/src/i18n/locales/en/chat.json
+++ b/src/i18n/locales/en/chat.json
@@ -143,5 +143,37 @@
       }
     },
     "buttonTitle": "Thinking mode: {{mode}}"
+  },
+  "providerSelection": {
+    "title": "Choose Your AI Assistant",
+    "description": "Select a provider to start a new conversation",
+    "selectModel": "Select Model",
+    "providerInfo": {
+      "anthropic": "by Anthropic",
+      "openai": "by OpenAI",
+      "cursorEditor": "AI Code Editor"
+    },
+    "readyPrompt": {
+      "claude": "Ready to use Claude with {{model}}. Start typing your message below.",
+      "cursor": "Ready to use Cursor with {{model}}. Start typing your message below.",
+      "codex": "Ready to use Codex with {{model}}. Start typing your message below.",
+      "default": "Select a provider above to begin"
+    }
+  },
+  "session": {
+    "continue": {
+      "title": "Continue your conversation",
+      "description": "Ask questions about your code, request changes, or get help with development tasks"
+    },
+    "loading": {
+      "olderMessages": "Loading older messages...",
+      "sessionMessages": "Loading session messages..."
+    },
+    "messages": {
+      "showingOf": "Showing {{shown}} of {{total}} messages",
+      "scrollToLoad": "Scroll up to load more",
+      "showingLast": "Showing last {{count}} messages ({{total}} total)",
+      "loadEarlier": "Load earlier messages"
+    }
   }
 }
diff --git a/src/i18n/locales/zh-CN/chat.json b/src/i18n/locales/zh-CN/chat.json
index 87782e6..5aeda37 100644
--- a/src/i18n/locales/zh-CN/chat.json
+++ b/src/i18n/locales/zh-CN/chat.json
@@ -143,5 +143,37 @@
       }
     },
     "buttonTitle": "思考模式：{{mode}}"
+  },
+  "providerSelection": {
+    "title": "选择您的 AI 助手",
+    "description": "选择一个供应商以开始新对话",
+    "selectModel": "选择模型",
+    "providerInfo": {
+      "anthropic": "Anthropic",
+      "openai": "OpenAI",
+      "cursorEditor": "AI 代码编辑器"
+    },
+    "readyPrompt": {
+      "claude": "已准备好使用 Claude {{model}}。在下方输入您的消息。",
+      "cursor": "已准备好使用 Cursor {{model}}。在下方输入您的消息。",
+      "codex": "已准备好使用 Codex {{model}}。在下方输入您的消息。",
+      "default": "请在上方选择一个供应商以开始"
+    }
+  },
+  "session": {
+    "continue": {
+      "title": "继续您的对话",
+      "description": "询问有关代码的问题、请求更改或获取开发任务的帮助"
+    },
+    "loading": {
+      "olderMessages": "正在加载更早的消息...",
+      "sessionMessages": "正在加载会话消息..."
+    },
+    "messages": {
+      "showingOf": "显示 {{shown}} / {{total}} 条消息",
+      "scrollToLoad": "向上滚动以加载更多",
+      "showingLast": "显示最近 {{count}} 条消息（共 {{total}} 条）",
+      "loadEarlier": "加载更早的消息"
+    }
   }
 }

From 5131d2ae27810b0a913032b9305217975ae3a795 Mon Sep 17 00:00:00 2001
From: YuanNiancai <yuanniancai@formulas.cc>
Date: Thu, 22 Jan 2026 14:57:32 +0800
Subject: [PATCH 19/24] =?UTF-8?q?add=20some=20translations=20for=20CodeEdi?=
 =?UTF-8?q?tor.jsx=E3=80=81QuickSettingsPanel.jsx?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/CodeEditor.jsx          | 36 ++++++++++++++------------
 src/components/QuickSettingsPanel.jsx  | 16 ++++++------
 src/i18n/config.js                     |  6 ++++-
 src/i18n/locales/en/codeEditor.json    | 30 +++++++++++++++++++++
 src/i18n/locales/en/settings.json      | 19 +++++++++++++-
 src/i18n/locales/zh-CN/codeEditor.json | 30 +++++++++++++++++++++
 src/i18n/locales/zh-CN/settings.json   | 19 +++++++++++++-
 7 files changed, 128 insertions(+), 28 deletions(-)
 create mode 100644 src/i18n/locales/en/codeEditor.json
 create mode 100644 src/i18n/locales/zh-CN/codeEditor.json

diff --git a/src/components/CodeEditor.jsx b/src/components/CodeEditor.jsx
index e998d86..978dea3 100644
--- a/src/components/CodeEditor.jsx
+++ b/src/components/CodeEditor.jsx
@@ -12,8 +12,10 @@ import { unifiedMergeView, getChunks } from '@codemirror/merge';
 import { showMinimap } from '@replit/codemirror-minimap';
 import { X, Save, Download, Maximize2, Minimize2 } from 'lucide-react';
 import { api } from '../utils/api';
+import { useTranslation } from 'react-i18next';
 
 function CodeEditor({ file, onClose, projectPath, isSidebar = false, isExpanded = false, onToggleExpand = null }) {
+  const { t } = useTranslation('codeEditor');
   const [content, setContent] = useState('');
   const [loading, setLoading] = useState(true);
   const [saving, setSaving] = useState(false);
@@ -125,13 +127,13 @@ function CodeEditor({ file, onClose, projectPath, isSidebar = false, isExpanded
         toolbarHTML += '<div style="display: flex; align-items: center; gap: 8px;">';
         if (hasDiff) {
           toolbarHTML += `
-            <span style="font-weight: 500;">${chunkCount > 0 ? `${currentIndex + 1}/${chunkCount}` : '0'} changes</span>
-            <button class="cm-diff-nav-btn cm-diff-nav-prev" title="Previous change" ${chunkCount === 0 ? 'disabled' : ''}>
+            <span style="font-weight: 500;">${chunkCount > 0 ? `${currentIndex + 1}/${chunkCount}` : '0'} ${t('toolbar.changes')}</span>
+            <button class="cm-diff-nav-btn cm-diff-nav-prev" title="${t('toolbar.previousChange')}" ${chunkCount === 0 ? 'disabled' : ''}>
               <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7" />
               </svg>
             </button>
-            <button class="cm-diff-nav-btn cm-diff-nav-next" title="Next change" ${chunkCount === 0 ? 'disabled' : ''}>
+            <button class="cm-diff-nav-btn cm-diff-nav-next" title="${t('toolbar.nextChange')}" ${chunkCount === 0 ? 'disabled' : ''}>
               <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
               </svg>
@@ -146,7 +148,7 @@ function CodeEditor({ file, onClose, projectPath, isSidebar = false, isExpanded
         // Show/hide diff button (only if there's diff info)
         if (file.diffInfo) {
           toolbarHTML += `
-            <button class="cm-toolbar-btn cm-toggle-diff-btn" title="${showDiff ? 'Hide diff highlighting' : 'Show diff highlighting'}">
+            <button class="cm-toolbar-btn cm-toggle-diff-btn" title="${showDiff ? t('toolbar.hideDiff') : t('toolbar.showDiff')}">
               <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 ${showDiff ?
                   '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21" />' :
@@ -159,7 +161,7 @@ function CodeEditor({ file, onClose, projectPath, isSidebar = false, isExpanded
 
         // Settings button
         toolbarHTML += `
-          <button class="cm-toolbar-btn cm-settings-btn" title="Editor Settings">
+          <button class="cm-toolbar-btn cm-settings-btn" title="${t('toolbar.settings')}">
             <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
               <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" /><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
             </svg>
@@ -169,7 +171,7 @@ function CodeEditor({ file, onClose, projectPath, isSidebar = false, isExpanded
         // Expand button (only in sidebar mode)
         if (isSidebar && onToggleExpand) {
           toolbarHTML += `
-            <button class="cm-toolbar-btn cm-expand-btn" title="${isExpanded ? 'Collapse editor' : 'Expand editor to full width'}">
+            <button class="cm-toolbar-btn cm-expand-btn" title="${isExpanded ? t('toolbar.collapse') : t('toolbar.expand')}">
               <svg width="16" height="16" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 ${isExpanded ?
                   '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 9V4.5M9 9H4.5M9 9L3.75 3.75M9 15v4.5M9 15H4.5M9 15l-5.25 5.25M15 9h4.5M15 9V4.5M15 9l5.25-5.25M15 15h4.5M15 15v4.5m0-4.5l5.25 5.25" />' :
@@ -463,7 +465,7 @@ function CodeEditor({ file, onClose, projectPath, isSidebar = false, isExpanded
           <div className="w-full h-full flex items-center justify-center bg-background">
             <div className="flex items-center gap-3">
               <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-blue-600"></div>
-              <span className="text-gray-900 dark:text-white">Loading {file.name}...</span>
+              <span className="text-gray-900 dark:text-white">{t('loading', { fileName: file.name })}</span>
             </div>
           </div>
         ) : (
@@ -471,7 +473,7 @@ function CodeEditor({ file, onClose, projectPath, isSidebar = false, isExpanded
             <div className="code-editor-loading w-full h-full md:rounded-lg md:w-auto md:h-auto p-8 flex items-center justify-center">
               <div className="flex items-center gap-3">
                 <div className="animate-spin rounded-full h-6 w-6 border-b-2 border-blue-600"></div>
-                <span className="text-gray-900 dark:text-white">Loading {file.name}...</span>
+                <span className="text-gray-900 dark:text-white">{t('loading', { fileName: file.name })}</span>
               </div>
             </div>
           </div>
@@ -574,7 +576,7 @@ function CodeEditor({ file, onClose, projectPath, isSidebar = false, isExpanded
                 <h3 className="font-medium text-gray-900 dark:text-white truncate">{file.name}</h3>
                 {file.diffInfo && (
                   <span className="text-xs bg-blue-100 dark:bg-blue-900 text-blue-600 dark:text-blue-300 px-2 py-1 rounded whitespace-nowrap">
-                    Showing changes
+                    {t('header.showingChanges')}
                   </span>
                 )}
               </div>
@@ -586,7 +588,7 @@ function CodeEditor({ file, onClose, projectPath, isSidebar = false, isExpanded
             <button
               onClick={handleDownload}
               className="p-2 md:p-2 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white rounded-md hover:bg-gray-100 dark:hover:bg-gray-800 min-w-[44px] min-h-[44px] md:min-w-0 md:min-h-0 flex items-center justify-center"
-              title="Download file"
+              title={t('actions.download')}
             >
               <Download className="w-5 h-5 md:w-4 md:h-4" />
             </button>
@@ -605,12 +607,12 @@ function CodeEditor({ file, onClose, projectPath, isSidebar = false, isExpanded
                   <svg className="w-5 h-5 md:w-4 md:h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                     <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
                   </svg>
-                  <span className="hidden sm:inline">Saved!</span>
+                  <span className="hidden sm:inline">{t('actions.saved')}</span>
                 </>
               ) : (
                 <>
                   <Save className="w-5 h-5 md:w-4 md:h-4" />
-                  <span className="hidden sm:inline">{saving ? 'Saving...' : 'Save'}</span>
+                  <span className="hidden sm:inline">{saving ? t('actions.saving') : t('actions.save')}</span>
                 </>
               )}
             </button>
@@ -619,7 +621,7 @@ function CodeEditor({ file, onClose, projectPath, isSidebar = false, isExpanded
               <button
                 onClick={toggleFullscreen}
                 className="hidden md:flex p-2 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white rounded-md hover:bg-gray-100 dark:hover:bg-gray-800 items-center justify-center"
-                title={isFullscreen ? 'Exit fullscreen' : 'Fullscreen'}
+                title={isFullscreen ? t('actions.exitFullscreen') : t('actions.fullscreen')}
               >
                 {isFullscreen ? <Minimize2 className="w-4 h-4" /> : <Maximize2 className="w-4 h-4" />}
               </button>
@@ -628,7 +630,7 @@ function CodeEditor({ file, onClose, projectPath, isSidebar = false, isExpanded
             <button
               onClick={onClose}
               className="p-2 md:p-2 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-white rounded-md hover:bg-gray-100 dark:hover:bg-gray-800 min-w-[44px] min-h-[44px] md:min-w-0 md:min-h-0 flex items-center justify-center"
-              title="Close"
+              title={t('actions.close')}
             >
               <X className="w-6 h-6 md:w-4 md:h-4" />
             </button>
@@ -686,12 +688,12 @@ function CodeEditor({ file, onClose, projectPath, isSidebar = false, isExpanded
         {/* Footer */}
         <div className="flex items-center justify-between p-3 border-t border-border bg-muted flex-shrink-0">
           <div className="flex items-center gap-4 text-sm text-gray-600 dark:text-gray-400">
-            <span>Lines: {content.split('\n').length}</span>
-            <span>Characters: {content.length}</span>
+            <span>{t('footer.lines')} {content.split('\n').length}</span>
+            <span>{t('footer.characters')} {content.length}</span>
           </div>
 
           <div className="text-sm text-gray-500 dark:text-gray-400">
-            Press Ctrl+S to save • Esc to close
+            {t('footer.shortcuts')}
           </div>
         </div>
       </div>
diff --git a/src/components/QuickSettingsPanel.jsx b/src/components/QuickSettingsPanel.jsx
index 93b7d07..6da0289 100644
--- a/src/components/QuickSettingsPanel.jsx
+++ b/src/components/QuickSettingsPanel.jsx
@@ -233,8 +233,8 @@ const QuickSettingsPanel = ({
           isDragging ? 'cursor-grabbing' : 'cursor-pointer'
         } touch-none`}
         style={{ ...getPositionStyle(), touchAction: 'none', WebkitTouchCallout: 'none', WebkitUserSelect: 'none' }}
-        aria-label={isDragging ? 'Dragging handle' : localIsOpen ? 'Close settings panel' : 'Open settings panel'}
-        title={isDragging ? 'Dragging...' : 'Click to toggle, drag to move'}
+        aria-label={isDragging ? t('quickSettings.dragHandle.dragging') : localIsOpen ? t('quickSettings.dragHandle.closePanel') : t('quickSettings.dragHandle.openPanel')}
+        title={isDragging ? t('quickSettings.dragHandle.draggingStatus') : t('quickSettings.dragHandle.toggleAndMove')}
       >
         {isDragging ? (
           <GripVertical className="h-5 w-5 text-blue-500 dark:text-blue-400" />
@@ -383,10 +383,10 @@ const QuickSettingsPanel = ({
                   <div className="ml-3 flex-1">
                     <span className="flex items-center gap-2 text-sm font-medium text-gray-900 dark:text-white">
                       <Mic className="h-4 w-4 text-gray-600 dark:text-gray-400" />
-                      Default Mode
+                      {t('quickSettings.whisper.modes.default')}
                     </span>
                     <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
-                      Direct transcription of your speech
+                      {t('quickSettings.whisper.modes.defaultDescription')}
                     </p>
                   </div>
                 </label>
@@ -407,10 +407,10 @@ const QuickSettingsPanel = ({
                   <div className="ml-3 flex-1">
                     <span className="flex items-center gap-2 text-sm font-medium text-gray-900 dark:text-white">
                       <Sparkles className="h-4 w-4 text-gray-600 dark:text-gray-400" />
-                      Prompt Enhancement
+                      {t('quickSettings.whisper.modes.prompt')}
                     </span>
                     <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
-                      Transform rough ideas into clear, detailed AI prompts
+                      {t('quickSettings.whisper.modes.promptDescription')}
                     </p>
                   </div>
                 </label>
@@ -431,10 +431,10 @@ const QuickSettingsPanel = ({
                   <div className="ml-3 flex-1">
                     <span className="flex items-center gap-2 text-sm font-medium text-gray-900 dark:text-white">
                       <FileText className="h-4 w-4 text-gray-600 dark:text-gray-400" />
-                      Vibe Mode
+                      {t('quickSettings.whisper.modes.vibe')}
                     </span>
                     <p className="text-xs text-gray-500 dark:text-gray-400 mt-1">
-                      Format ideas as clear agent instructions with details
+                      {t('quickSettings.whisper.modes.vibeDescription')}
                     </p>
                   </div>
                 </label>
diff --git a/src/i18n/config.js b/src/i18n/config.js
index 789b993..5d3889f 100644
--- a/src/i18n/config.js
+++ b/src/i18n/config.js
@@ -19,12 +19,14 @@ import enSettings from './locales/en/settings.json';
 import enAuth from './locales/en/auth.json';
 import enSidebar from './locales/en/sidebar.json';
 import enChat from './locales/en/chat.json';
+import enCodeEditor from './locales/en/codeEditor.json';
 
 import zhCommon from './locales/zh-CN/common.json';
 import zhSettings from './locales/zh-CN/settings.json';
 import zhAuth from './locales/zh-CN/auth.json';
 import zhSidebar from './locales/zh-CN/sidebar.json';
 import zhChat from './locales/zh-CN/chat.json';
+import zhCodeEditor from './locales/zh-CN/codeEditor.json';
 
 // Import supported languages configuration
 import { languages } from './languages.js';
@@ -56,6 +58,7 @@ i18n
         auth: enAuth,
         sidebar: enSidebar,
         chat: enChat,
+        codeEditor: enCodeEditor,
       },
       'zh-CN': {
         common: zhCommon,
@@ -63,6 +66,7 @@ i18n
         auth: zhAuth,
         sidebar: zhSidebar,
         chat: zhChat,
+        codeEditor: zhCodeEditor,
       },
     },
 
@@ -76,7 +80,7 @@ i18n
     debug: import.meta.env.DEV,
 
     // Namespaces - load only what's needed
-    ns: ['common', 'settings', 'auth', 'sidebar', 'chat'],
+    ns: ['common', 'settings', 'auth', 'sidebar', 'chat', 'codeEditor'],
     defaultNS: 'common',
 
     // Key separator for nested keys (default: '.')
diff --git a/src/i18n/locales/en/codeEditor.json b/src/i18n/locales/en/codeEditor.json
new file mode 100644
index 0000000..11808a4
--- /dev/null
+++ b/src/i18n/locales/en/codeEditor.json
@@ -0,0 +1,30 @@
+{
+  "toolbar": {
+    "changes": "changes",
+    "previousChange": "Previous change",
+    "nextChange": "Next change",
+    "hideDiff": "Hide diff highlighting",
+    "showDiff": "Show diff highlighting",
+    "settings": "Editor Settings",
+    "collapse": "Collapse editor",
+    "expand": "Expand editor to full width"
+  },
+  "loading": "Loading {{fileName}}...",
+  "header": {
+    "showingChanges": "Showing changes"
+  },
+  "actions": {
+    "download": "Download file",
+    "save": "Save",
+    "saving": "Saving...",
+    "saved": "Saved!",
+    "exitFullscreen": "Exit fullscreen",
+    "fullscreen": "Fullscreen",
+    "close": "Close"
+  },
+  "footer": {
+    "lines": "Lines:",
+    "characters": "Characters:",
+    "shortcuts": "Press Ctrl+S to save • Esc to close"
+  }
+}
diff --git a/src/i18n/locales/en/settings.json b/src/i18n/locales/en/settings.json
index c015592..12f9737 100644
--- a/src/i18n/locales/en/settings.json
+++ b/src/i18n/locales/en/settings.json
@@ -64,7 +64,24 @@
     "showThinking": "Show thinking",
     "autoScrollToBottom": "Auto-scroll to bottom",
     "sendByCtrlEnter": "Send by Ctrl+Enter",
-    "sendByCtrlEnterDescription": "When enabled, pressing Ctrl+Enter will send the message instead of just Enter. This is useful for IME users to avoid accidental sends."
+    "sendByCtrlEnterDescription": "When enabled, pressing Ctrl+Enter will send the message instead of just Enter. This is useful for IME users to avoid accidental sends.",
+    "dragHandle": {
+      "dragging": "Dragging handle",
+      "closePanel": "Close settings panel",
+      "openPanel": "Open settings panel",
+      "draggingStatus": "Dragging...",
+      "toggleAndMove": "Click to toggle, drag to move"
+    },
+    "whisper": {
+      "modes": {
+        "default": "Default Mode",
+        "defaultDescription": "Direct transcription of your speech",
+        "prompt": "Prompt Enhancement",
+        "promptDescription": "Transform rough ideas into clear, detailed AI prompts",
+        "vibe": "Vibe Mode",
+        "vibeDescription": "Format ideas as clear agent instructions with details"
+      }
+    }
   },
   "mainTabs": {
     "agents": "Agents",
diff --git a/src/i18n/locales/zh-CN/codeEditor.json b/src/i18n/locales/zh-CN/codeEditor.json
new file mode 100644
index 0000000..1286112
--- /dev/null
+++ b/src/i18n/locales/zh-CN/codeEditor.json
@@ -0,0 +1,30 @@
+{
+  "toolbar": {
+    "changes": "个更改",
+    "previousChange": "上一个更改",
+    "nextChange": "下一个更改",
+    "hideDiff": "隐藏差异高亮",
+    "showDiff": "显示差异高亮",
+    "settings": "编辑器设置",
+    "collapse": "折叠编辑器",
+    "expand": "展开编辑器到全宽"
+  },
+  "loading": "正在加载 {{fileName}}...",
+  "header": {
+    "showingChanges": "显示更改"
+  },
+  "actions": {
+    "download": "下载文件",
+    "save": "保存",
+    "saving": "保存中...",
+    "saved": "已保存！",
+    "exitFullscreen": "退出全屏",
+    "fullscreen": "全屏",
+    "close": "关闭"
+  },
+  "footer": {
+    "lines": "行数：",
+    "characters": "字符数：",
+    "shortcuts": "按 Ctrl+S 保存 • Esc 关闭"
+  }
+}
diff --git a/src/i18n/locales/zh-CN/settings.json b/src/i18n/locales/zh-CN/settings.json
index 9aaaec9..24dd6c1 100644
--- a/src/i18n/locales/zh-CN/settings.json
+++ b/src/i18n/locales/zh-CN/settings.json
@@ -64,7 +64,24 @@
     "showThinking": "显示思考过程",
     "autoScrollToBottom": "自动滚动到底部",
     "sendByCtrlEnter": "使用 Ctrl+Enter 发送",
-    "sendByCtrlEnterDescription": "启用后，按 Ctrl+Enter 发送消息，而不是仅按 Enter。这对于使用输入法的用户可以避免意外发送。"
+    "sendByCtrlEnterDescription": "启用后，按 Ctrl+Enter 发送消息，而不是仅按 Enter。这对于使用输入法的用户可以避免意外发送。",
+    "dragHandle": {
+      "dragging": "正在拖拽手柄",
+      "closePanel": "关闭设置面板",
+      "openPanel": "打开设置面板",
+      "draggingStatus": "正在拖拽...",
+      "toggleAndMove": "点击切换，拖拽移动"
+    },
+    "whisper": {
+      "modes": {
+        "default": "默认模式",
+        "defaultDescription": "直接转录您的语音",
+        "prompt": "提示词增强",
+        "promptDescription": "将粗略的想法转化为清晰、详细的 AI 提示词",
+        "vibe": "Vibe 模式",
+        "vibeDescription": "将想法格式化为带有详细说明的清晰智能体指令"
+      }
+    }
   },
   "mainTabs": {
     "agents": "智能体",

From cc3368c591252456c564f55b07ffbafd2ebaa13b Mon Sep 17 00:00:00 2001
From: YuanNiancai <yuanniancai@formulas.cc>
Date: Thu, 22 Jan 2026 15:12:01 +0800
Subject: [PATCH 20/24] add translations for Shell.jsx

---
 src/components/Shell.jsx         | 38 +++++++++++++++++---------------
 src/i18n/locales/en/chat.json    | 25 +++++++++++++++++++++
 src/i18n/locales/zh-CN/chat.json | 25 +++++++++++++++++++++
 3 files changed, 70 insertions(+), 18 deletions(-)

diff --git a/src/components/Shell.jsx b/src/components/Shell.jsx
index 9a74436..5cee346 100644
--- a/src/components/Shell.jsx
+++ b/src/components/Shell.jsx
@@ -4,6 +4,7 @@ import { FitAddon } from '@xterm/addon-fit';
 import { WebglAddon } from '@xterm/addon-webgl';
 import { WebLinksAddon } from '@xterm/addon-web-links';
 import '@xterm/xterm/css/xterm.css';
+import { useTranslation } from 'react-i18next';
 
 const xtermStyles = `
   .xterm .xterm-screen {
@@ -25,6 +26,7 @@ if (typeof document !== 'undefined') {
 }
 
 function Shell({ selectedProject, selectedSession, initialCommand, isPlainShell = false, onProcessComplete, minimal = false, autoConnect = false }) {
+  const { t } = useTranslation('chat');
   const terminalRef = useRef(null);
   const terminal = useRef(null);
   const fitAddon = useRef(null);
@@ -373,8 +375,8 @@ function Shell({ selectedProject, selectedSession, initialCommand, isPlainShell
               <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 9l3 3-3 3m5 0h3M5 20h14a2 2 0 002-2V6a2 2 0 00-2-2H5a2 2 0 00-2 2v14a2 2 0 002 2z" />
             </svg>
           </div>
-          <h3 className="text-lg font-semibold mb-2">Select a Project</h3>
-          <p>Choose a project to open an interactive shell in that directory</p>
+          <h3 className="text-lg font-semibold mb-2">{t('shell.selectProject.title')}</h3>
+          <p>{t('shell.selectProject.description')}</p>
         </div>
       </div>
     );
@@ -400,13 +402,13 @@ function Shell({ selectedProject, selectedSession, initialCommand, isPlainShell
               </span>
             )}
             {!selectedSession && (
-              <span className="text-xs text-gray-400">(New Session)</span>
+              <span className="text-xs text-gray-400">{t('shell.status.newSession')}</span>
             )}
             {!isInitialized && (
-              <span className="text-xs text-yellow-400">(Initializing...)</span>
+              <span className="text-xs text-yellow-400">{t('shell.status.initializing')}</span>
             )}
             {isRestarting && (
-              <span className="text-xs text-blue-400">(Restarting...)</span>
+              <span className="text-xs text-blue-400">{t('shell.status.restarting')}</span>
             )}
           </div>
           <div className="flex items-center space-x-3">
@@ -414,12 +416,12 @@ function Shell({ selectedProject, selectedSession, initialCommand, isPlainShell
               <button
                 onClick={disconnectFromShell}
                 className="px-3 py-1 text-xs bg-red-600 text-white rounded hover:bg-red-700 flex items-center space-x-1"
-                title="Disconnect from shell"
+                title={t('shell.actions.disconnectTitle')}
               >
                 <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
                 </svg>
-                <span>Disconnect</span>
+                <span>{t('shell.actions.disconnect')}</span>
               </button>
             )}
 
@@ -427,12 +429,12 @@ function Shell({ selectedProject, selectedSession, initialCommand, isPlainShell
               onClick={restartShell}
               disabled={isRestarting || isConnected}
               className="text-xs text-gray-400 hover:text-white disabled:opacity-50 disabled:cursor-not-allowed flex items-center space-x-1"
-              title="Restart Shell (disconnect first)"
+              title={t('shell.actions.restartTitle')}
             >
               <svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
               </svg>
-              <span>Restart</span>
+              <span>{t('shell.actions.restart')}</span>
             </button>
           </div>
         </div>
@@ -443,7 +445,7 @@ function Shell({ selectedProject, selectedSession, initialCommand, isPlainShell
 
         {!isInitialized && (
           <div className="absolute inset-0 flex items-center justify-center bg-gray-900 bg-opacity-90">
-            <div className="text-white">Loading terminal...</div>
+            <div className="text-white">{t('shell.loading')}</div>
           </div>
         )}
 
@@ -453,19 +455,19 @@ function Shell({ selectedProject, selectedSession, initialCommand, isPlainShell
               <button
                 onClick={connectToShell}
                 className="px-6 py-3 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors flex items-center justify-center space-x-2 text-base font-medium w-full sm:w-auto"
-                title="Connect to shell"
+                title={t('shell.actions.connectTitle')}
               >
                 <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 10V3L4 14h7v7l9-11h-7z" />
                 </svg>
-                <span>Continue in Shell</span>
+                <span>{t('shell.actions.connect')}</span>
               </button>
               <p className="text-gray-400 text-sm mt-3 px-2">
                 {isPlainShell ?
-                  `Run ${initialCommand || 'command'} in ${selectedProject.displayName}` :
+                  t('shell.runCommand', { command: initialCommand || 'command', projectName: selectedProject.displayName }) :
                   selectedSession ?
-                    `Resume session: ${sessionDisplayNameLong}...` :
-                    'Start a new Claude session'
+                    t('shell.resumeSession', { displayName: sessionDisplayNameLong }) :
+                    t('shell.startSession')
                 }
               </p>
             </div>
@@ -477,12 +479,12 @@ function Shell({ selectedProject, selectedSession, initialCommand, isPlainShell
             <div className="text-center max-w-sm w-full">
               <div className="flex items-center justify-center space-x-3 text-yellow-400">
                 <div className="w-6 h-6 animate-spin rounded-full border-2 border-yellow-400 border-t-transparent"></div>
-                <span className="text-base font-medium">Connecting to shell...</span>
+                <span className="text-base font-medium">{t('shell.connecting')}</span>
               </div>
               <p className="text-gray-400 text-sm mt-3 px-2">
                 {isPlainShell ?
-                  `Running ${initialCommand || 'command'} in ${selectedProject.displayName}` :
-                  `Starting Claude CLI in ${selectedProject.displayName}`
+                  t('shell.runCommand', { command: initialCommand || 'command', projectName: selectedProject.displayName }) :
+                  t('shell.startCli', { projectName: selectedProject.displayName })
                 }
               </p>
             </div>
diff --git a/src/i18n/locales/en/chat.json b/src/i18n/locales/en/chat.json
index 54e2835..6cada03 100644
--- a/src/i18n/locales/en/chat.json
+++ b/src/i18n/locales/en/chat.json
@@ -175,5 +175,30 @@
       "showingLast": "Showing last {{count}} messages ({{total}} total)",
       "loadEarlier": "Load earlier messages"
     }
+  },
+  "shell": {
+    "selectProject": {
+      "title": "Select a Project",
+      "description": "Choose a project to open an interactive shell in that directory"
+    },
+    "status": {
+      "newSession": "New Session",
+      "initializing": "Initializing...",
+      "restarting": "Restarting..."
+    },
+    "actions": {
+      "disconnect": "Disconnect",
+      "disconnectTitle": "Disconnect from shell",
+      "restart": "Restart",
+      "restartTitle": "Restart Shell (disconnect first)",
+      "connect": "Continue in Shell",
+      "connectTitle": "Connect to shell"
+    },
+    "loading": "Loading terminal...",
+    "connecting": "Connecting to shell...",
+    "startSession": "Start a new Claude session",
+    "resumeSession": "Resume session: {{displayName}}...",
+    "runCommand": "Run {{command}} in {{projectName}}",
+    "startCli": "Starting Claude CLI in {{projectName}}"
   }
 }
diff --git a/src/i18n/locales/zh-CN/chat.json b/src/i18n/locales/zh-CN/chat.json
index 5aeda37..a6d9cd0 100644
--- a/src/i18n/locales/zh-CN/chat.json
+++ b/src/i18n/locales/zh-CN/chat.json
@@ -175,5 +175,30 @@
       "showingLast": "显示最近 {{count}} 条消息（共 {{total}} 条）",
       "loadEarlier": "加载更早的消息"
     }
+  },
+  "shell": {
+    "selectProject": {
+      "title": "选择项目",
+      "description": "选择一个项目以在该目录中打开交互式 Shell"
+    },
+    "status": {
+      "newSession": "新会话",
+      "initializing": "初始化中...",
+      "restarting": "重启中..."
+    },
+    "actions": {
+      "disconnect": "断开连接",
+      "disconnectTitle": "断开 Shell 连接",
+      "restart": "重启",
+      "restartTitle": "重启 Shell（请先断开连接）",
+      "connect": "在 Shell 中继续",
+      "connectTitle": "连接到 Shell"
+    },
+    "loading": "正在加载终端...",
+    "connecting": "正在连接到 Shell...",
+    "startSession": "启动新的 Claude 会话",
+    "resumeSession": "恢复会话：{{displayName}}...",
+    "runCommand": "在 {{projectName}} 中运行 {{command}}",
+    "startCli": "在 {{projectName}} 中启动 Claude CLI"
   }
 }

From e85cc746b1289a71be6dc025334cf6304b102c67 Mon Sep 17 00:00:00 2001
From: YuanNiancai <yuanniancai@formulas.cc>
Date: Thu, 22 Jan 2026 15:24:27 +0800
Subject: [PATCH 21/24] fix: add missing translation

---
 src/components/Shell.jsx         | 2 +-
 src/i18n/locales/en/chat.json    | 3 ++-
 src/i18n/locales/zh-CN/chat.json | 3 ++-
 3 files changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/components/Shell.jsx b/src/components/Shell.jsx
index 5cee346..a549ba9 100644
--- a/src/components/Shell.jsx
+++ b/src/components/Shell.jsx
@@ -483,7 +483,7 @@ function Shell({ selectedProject, selectedSession, initialCommand, isPlainShell
               </div>
               <p className="text-gray-400 text-sm mt-3 px-2">
                 {isPlainShell ?
-                  t('shell.runCommand', { command: initialCommand || 'command', projectName: selectedProject.displayName }) :
+                  t('shell.runCommand', { command: initialCommand || t('shell.defaultCommand'), projectName: selectedProject.displayName }) :
                   t('shell.startCli', { projectName: selectedProject.displayName })
                 }
               </p>
diff --git a/src/i18n/locales/en/chat.json b/src/i18n/locales/en/chat.json
index 6cada03..663c139 100644
--- a/src/i18n/locales/en/chat.json
+++ b/src/i18n/locales/en/chat.json
@@ -199,6 +199,7 @@
     "startSession": "Start a new Claude session",
     "resumeSession": "Resume session: {{displayName}}...",
     "runCommand": "Run {{command}} in {{projectName}}",
-    "startCli": "Starting Claude CLI in {{projectName}}"
+    "startCli": "Starting Claude CLI in {{projectName}}",
+    "defaultCommand": "command"
   }
 }
diff --git a/src/i18n/locales/zh-CN/chat.json b/src/i18n/locales/zh-CN/chat.json
index a6d9cd0..2d52ba4 100644
--- a/src/i18n/locales/zh-CN/chat.json
+++ b/src/i18n/locales/zh-CN/chat.json
@@ -199,6 +199,7 @@
     "startSession": "启动新的 Claude 会话",
     "resumeSession": "恢复会话：{{displayName}}...",
     "runCommand": "在 {{projectName}} 中运行 {{command}}",
-    "startCli": "在 {{projectName}} 中启动 Claude CLI"
+    "startCli": "在 {{projectName}} 中启动 Claude CLI",
+    "defaultCommand": "命令"
   }
 }

From 79f7bf9a6315f47481c25395b671feeae156598e Mon Sep 17 00:00:00 2001
From: Haileyesus Dessie <118998054+blackmammoth@users.noreply.github.com>
Date: Thu, 22 Jan 2026 12:51:12 +0300
Subject: [PATCH 22/24] fix: use messageContent instead of `input` for Claude
 command messages

---
 src/components/ChatInterface.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ChatInterface.jsx b/src/components/ChatInterface.jsx
index 3a22238..2d0820f 100644
--- a/src/components/ChatInterface.jsx
+++ b/src/components/ChatInterface.jsx
@@ -4393,7 +4393,7 @@ function ChatInterface({ selectedProject, selectedSession, ws, sendMessage, mess
       // Send Claude command (existing code)
       sendMessage({
         type: 'claude-command',
-        command: input,
+        command: messageContent,
         options: {
           projectPath: selectedProject.path,
           cwd: selectedProject.fullPath,

From cf0f60bc48fa334c38607c87995d070e2b914801 Mon Sep 17 00:00:00 2001
From: Haileyesus Dessie <118998054+blackmammoth@users.noreply.github.com>
Date: Thu, 22 Jan 2026 13:40:35 +0300
Subject: [PATCH 23/24] fix: handleSubmit useCalback add thinkingMode to
 dependencies

---
 src/components/ChatInterface.jsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/ChatInterface.jsx b/src/components/ChatInterface.jsx
index 2d0820f..f04be23 100644
--- a/src/components/ChatInterface.jsx
+++ b/src/components/ChatInterface.jsx
@@ -4361,7 +4361,7 @@ function ChatInterface({ selectedProject, selectedSession, ws, sendMessage, mess
       // Send Cursor command (always use cursor-command; include resume/sessionId when replying)
       sendMessage({
         type: 'cursor-command',
-        command: input,
+        command: messageContent,
         sessionId: effectiveSessionId,
         options: {
           // Prefer fullPath (actual cwd for project), fallback to path
@@ -4378,7 +4378,7 @@ function ChatInterface({ selectedProject, selectedSession, ws, sendMessage, mess
       // Send Codex command
       sendMessage({
         type: 'codex-command',
-        command: input,
+        command: messageContent,
         sessionId: effectiveSessionId,
         options: {
           cwd: selectedProject.fullPath || selectedProject.path,
@@ -4423,7 +4423,7 @@ function ChatInterface({ selectedProject, selectedSession, ws, sendMessage, mess
     if (selectedProject) {
       safeLocalStorage.removeItem(`draft_input_${selectedProject.name}`);
     }
-  }, [input, isLoading, selectedProject, attachedImages, currentSessionId, selectedSession, provider, permissionMode, onSessionActive, cursorModel, claudeModel, codexModel, sendMessage, setInput, setAttachedImages, setUploadingImages, setImageErrors, setIsTextareaExpanded, textareaRef, setChatMessages, setIsLoading, setCanAbortSession, setClaudeStatus, setIsUserScrolledUp, scrollToBottom]);
+  }, [input, isLoading, selectedProject, attachedImages, currentSessionId, selectedSession, provider, permissionMode, onSessionActive, cursorModel, claudeModel, codexModel, sendMessage, setInput, setAttachedImages, setUploadingImages, setImageErrors, setIsTextareaExpanded, textareaRef, setChatMessages, setIsLoading, setCanAbortSession, setClaudeStatus, setIsUserScrolledUp, scrollToBottom, thinkingMode]);
 
   const handleGrantToolPermission = useCallback((suggestion) => {
     if (!suggestion || provider !== 'claude') {

From 9cd0cfc88f20a10e8db1c7c7edb26243b161ad34 Mon Sep 17 00:00:00 2001
From: YuanNiancai <yuanniancai@formulas.cc>
Date: Fri, 23 Jan 2026 09:26:43 +0800
Subject: [PATCH 24/24] fix: add missing translation

---
 src/components/Shell.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/Shell.jsx b/src/components/Shell.jsx
index a549ba9..212ed9b 100644
--- a/src/components/Shell.jsx
+++ b/src/components/Shell.jsx
@@ -464,7 +464,7 @@ function Shell({ selectedProject, selectedSession, initialCommand, isPlainShell
               </button>
               <p className="text-gray-400 text-sm mt-3 px-2">
                 {isPlainShell ?
-                  t('shell.runCommand', { command: initialCommand || 'command', projectName: selectedProject.displayName }) :
+                  t('shell.runCommand', { command: initialCommand || t('shell.defaultCommand'), projectName: selectedProject.displayName }) :
                   selectedSession ?
                     t('shell.resumeSession', { displayName: sessionDisplayNameLong }) :
                     t('shell.startSession')