@steerable/agent-shell-web 0.6.53 → 0.6.55

package/src/pages/AgentPage.tsx

@@ -63,6 +63,7 @@ import {
 } from "@/lib/pending-first-message";
 import { isOrchestrationSettingEnabled } from "@/lib/orchestration-settings";
 import { pickDefaultAgentId } from "@/brand";
+import { t } from "@/i18n";
 import {
   appendAttachmentRefs,
   collectImageAttachments,
@@ -318,7 +319,7 @@ function AgentChatLoader({
   if (initialMessages === null) {
     return (
       <div className="flex h-full w-full items-center justify-center text-xs text-agent-muted-foreground">
-        加载对话历史…
+        {t("Loading chat history…")}
       </div>
     );
   }
@@ -1041,7 +1042,7 @@ function AgentChatView({
   const handleExecutePlan = useCallback(() => {
     handleModeChange("agent");
     setPlanReady(false);
-    void handleSubmit({ content: "请按照上面的计划开始执行。" });
+    void handleSubmit({ content: t("Start executing the plan above.") });
   }, [handleModeChange, handleSubmit]);
 
   // 分享当前对话：截取整个聊天面板区域（含 header + 消息 + 输入框），
@@ -1154,7 +1155,7 @@ function AgentChatView({
     <div className="flex h-full w-full flex-col">
       {hydrationError && (
         <div className="border-b border-agent-border bg-agent-muted/60 px-2.5 py-1 text-xs text-agent-destructive">
-          加载对话历史失败：{hydrationError}
+          {t("Failed to load chat history: {error}", { error: hydrationError })}
         </div>
       )}
       <LocalChatPanel
@@ -1191,7 +1192,7 @@ function AgentChatView({
               }
             : undefined
         }
-        inputPlaceholder="向本地 Agent 发送消息…"
+        inputPlaceholder={t("Message the local Agent…")}
         agents={ctx.agents}
         chats={ctx.chats}
         currentAgent={agent}
@@ -1269,7 +1270,9 @@ function AgentChatView({
             <div className="mx-2.5 mb-1 flex items-center justify-between gap-2 rounded-agent-md border border-amber-400/50 bg-amber-400/10 px-2.5 py-1.5 text-xs">
               <div className="flex items-center gap-2 text-amber-700 dark:text-amber-300">
                 <LuListChecks className="h-4 w-4 shrink-0" />
-                <span>计划已生成。确认无误后可切换到 Agent 模式开始执行。</span>
+                <span>
+                  {t("The plan is ready. Once it looks right, switch to Agent mode to execute it.")}
+                </span>
               </div>
               <div className="flex items-center gap-2">
                 <button
@@ -1278,7 +1281,7 @@ function AgentChatView({
                   className="rounded-full px-2 py-1 text-agent-muted-foreground transition-colors hover:text-agent-foreground"
                   data-testid="plan-dismiss"
                 >
-                  忽略
+                  {t("Dismiss")}
                 </button>
                 <button
                   type="button"
@@ -1286,7 +1289,7 @@ function AgentChatView({
                   className="inline-flex items-center gap-1 rounded-full bg-agent-foreground px-3 py-1 font-medium text-agent-canvas transition hover:opacity-90"
                   data-testid="plan-execute"
                 >
-                  开始执行计划
+                  {t("Execute plan")}
                   <LuArrowRight className="h-3.5 w-3.5" />
                 </button>
               </div>
@@ -1416,7 +1419,7 @@ function EmptyChatGate() {
         ...(selectedProjectId && showProjectsChrome ? { projectId: selectedProjectId } : {}),
         ...(ctx.selectedAgentId ? { agentId: ctx.selectedAgentId } : {}),
       });
-      if (!id) throw new Error("创建对话失败，请重试");
+      if (!id) throw new Error(t("Failed to create the chat. Please try again."));
       // 会话已建，把附件落进会话空间（与 LocalChatPanel 同一套语义）：
       // 所有文件都写落盘路径引用（agent 用 local_read_file 读回）；仅图片
       // 额外进 metadata.images 走多模态，非图片文件不会被图片逻辑吞掉。
@@ -1466,8 +1469,8 @@ function EmptyChatGate() {
             disabled={!isElectron() || isCreating}
             placeholder={
               mode === "plan"
-                ? "描述你的目标，Agent 将先制定计划…"
-                : "向本地 Agent 发送消息…"
+                ? t("Describe your goal. The Agent will make a plan first…")
+                : t("Message the local Agent…")
             }
             currentAgent={selectedAgent}
             agents={ctx.agents}
@@ -1516,7 +1519,7 @@ function EmptyChatGate() {
         </div>
         {isCreating && (
           <p className="text-xs text-agent-muted-foreground">
-            正在创建对话…
+            {t("Creating chat…")}
           </p>
         )}
         {createError && (
@@ -1526,7 +1529,9 @@ function EmptyChatGate() {
         )}
         {!isElectron() && (
           <p className="text-xs text-agent-destructive">
-            浏览器预览模式 — 没有 Electron IPC 桥接，聊天列表与流式响应不可用。
+            {t(
+              "Browser preview mode: no Electron IPC bridge, so the chat list and streaming responses are unavailable.",
+            )}
           </p>
         )}
       </div>

package/src/pages/ChatPanelPreviewPage.tsx

@@ -5,6 +5,7 @@ import { ChatHeader } from '@/components/ChatHeader';
 import type { ExecutedAction } from '@/components/chat/ExecutedActionsCard';
 import type { TurnBlock } from '@/components/chat/turn-timeline';
 import type { LocalChat, LocalChatAgent } from '@/lib/local-api';
+import { t } from '@/i18n';
 
 /**
  * ChatPanelPreviewPage — dev-only visual harness for `LocalChatPanel`.
@@ -22,10 +23,10 @@ import type { LocalChat, LocalChatAgent } from '@/lib/local-api';
 const MOCK_AGENT: LocalChatAgent = {
   id: 'agent_local_default',
   slug: 'local-coder',
-  name: '本地 Coder',
+  name: 'Local coder',
   icon: '🤖',
   color: '#0ea5e9',
-  description: '本地代码助手 — 跑 shell / 工具演示 / 简单读写',
+  description: 'Local coding assistant — shell, tool demos, and simple file edits',
   rolePrompt: null,
   isBuiltin: true,
 };
@@ -34,7 +35,7 @@ const MOCK_CHAT: LocalChat = {
   id: 'preview-chat',
   projectId: null,
   userId: 'preview-user',
-  title: '预览：检查服务连通性 + 跑测试套件',
+  title: 'Preview: check the service, then run the test suite',
   agentId: MOCK_AGENT.id,
   createdAt: new Date().toISOString(),
   updatedAt: new Date().toISOString(),
@@ -47,21 +48,21 @@ const MOCK_MESSAGES: ChatMessage[] = [
   {
     id: 'm1',
     role: 'user',
-    content: '帮我看下本地服务是否连通，再跑一下本目录的测试套件。',
+    content: 'Check whether the local service is up, then run the test suite in this directory.',
     createdAt: new Date(Date.now() - 1000 * 60 * 5).toISOString(),
   },
   {
     id: 'm2',
     role: 'assistant',
     agentId: MOCK_AGENT.id,
-    content: `好的，先检查服务连通性，然后跑测试。
+    content: `I'll check the service, then run the tests.
 
 \`\`\`bash
 $ check_connection
 ✓ Mock service @ 127.0.0.1:8765 reachable (latency 4ms)
 \`\`\`
 
-连接正常。接下来跑测试套件：
+The connection is fine. Next, the test suite:
 
 \`\`\`bash
 $ npm test
@@ -74,18 +75,17 @@ FAIL  src/components/chat/AssistantMessage.test.tsx
 Tests: 1 failed, 2 passed, 3 total
 \`\`\`
 
-有 1 个失败：\`AssistantMessage\` 的默认 agent 色没有从 props 传过来。建议在
-\`agentInitial\` 之前先 \`a.color ?? '#7c3aed'\`，让 fallback 优先于硬编码。
+1 failure: \`AssistantMessage\` did not take the agent color from props. Use \`a.color ?? '#7c3aed'\` before \`agentInitial\` so the fallback wins over the hardcoded color.
 
-要我帮你直接改这个文件吗？`,
+Want me to edit that file?`,
     createdAt: new Date(Date.now() - 1000 * 60 * 3).toISOString(),
   },
 ];
 
 const MOCK_TODOS = [
-  { id: 'survey', content: '检查服务连通性', status: 'completed' as const },
-  { id: 'test', content: '跑本目录测试套件', status: 'in_progress' as const },
-  { id: 'fix', content: '修失败的断言颜色', status: 'pending' as const },
+  { id: 'survey', content: 'Check service connectivity', status: 'completed' as const },
+  { id: 'test', content: 'Run the test suite in this directory', status: 'in_progress' as const },
+  { id: 'fix', content: 'Fix the failing assertion color', status: 'pending' as const },
 ];
 
 const MOCK_TODO_ACTION: ExecutedAction = {
@@ -127,12 +127,12 @@ const MOCK_ACTIONS: ExecutedAction[] = [
 ];
 
 const MOCK_TIMELINE: TurnBlock[] = [
-  { type: 'reasoning', content: '先检查服务连通性，再跑测试套件。' },
+  { type: 'reasoning', content: 'Check connectivity first, then run the test suite.' },
   { type: 'tools', actions: [MOCK_TODO_ACTION] },
   { type: 'tools', actions: [MOCK_ACTIONS[1]] },
-  { type: 'text', content: '连接正常。接下来跑测试套件。' },
+  { type: 'text', content: 'The connection is fine. Next, the test suite.' },
   { type: 'tools', actions: [MOCK_ACTIONS[2]] },
-  { type: 'reasoning', content: '测试失败，读一下失败文件再给建议。' },
+  { type: 'reasoning', content: 'The tests failed. Read the failing file, then suggest a fix.' },
   { type: 'tools', actions: [MOCK_ACTIONS[3]] },
   { type: 'text', content: MOCK_MESSAGES[1].content ?? '' },
 ];
@@ -142,33 +142,35 @@ const MOCK_TIMELINE: TurnBlock[] = [
  *   • `static`     — finished conversation; verifies copy buttons, action
  *     cards, markdown rendering on history.
  *   • `thinking`   — in-flight assistant bubble before any content; verifies
- *     StreamingStatus's "正在思考..." baseline.
+ *     StreamingStatus's "Now thinking..." baseline.
  *   • `tools-run`  — in-flight bubble, round 2, 2 tools just ran; verifies
- *     StreamingStatus's "已调用 N 个工具" + "Round N" badge interaction.
+ *     StreamingStatus's "Called N tools" line and the Round N badge.
  *   • `reasoning-stream` — reasoning tokens arrive over time; verifies the
  *     5-line peek stays visible and the list scrollbar sticks to the bottom.
  */
 type PreviewScene = 'static' | 'thinking' | 'tools-run' | 'reasoning-stream';
 
 const STREAMING_REASONING = [
-  '先检查服务是否还能连上。',
-  '如果端口通了，再跑本目录的测试套件。',
-  '失败的话只读失败文件，不要整仓扫一遍。',
-  '断言颜色对不上时优先看 AssistantMessage 的默认色。',
-  '改完再复跑一次，确认没有带出新的失败。',
-  '工具调用保持最少：连通性检查、跑测试、必要时读文件。',
-  '最后用一两句说清楚结果和下一步。',
-  '如果还在思考，后面的句子会被 5 行窗口裁掉。',
-  '比较 a < b 时不要被 Markdown 当成 HTML 标签吃掉。',
-  '滚动条应一直钉在最下面，不要随着 token 上下跳。',
+  'Check whether the service is still reachable.',
+  'If the port is open, run the test suite in this directory.',
+  'If it fails, read only the failing file. Do not scan the whole repo.',
+  "When an assertion color is wrong, look at AssistantMessage's default color first.",
+  'After the edit, run the tests again and check for new failures.',
+  'Keep tool calls few: connectivity, tests, and a file read only if needed.',
+  'Finish with one or two sentences on the result and the next step.',
+  'If thinking is still streaming, later sentences are cut by the 5-line window.',
+  'Comparing a < b must not be eaten as an HTML tag by Markdown.',
+  'The scrollbar should stay pinned to the bottom and not jump with each token.',
 ].join('\n');
 
-const SCENES: { id: PreviewScene; label: string }[] = [
-  { id: 'static', label: '静态历史' },
-  { id: 'thinking', label: '流式 · 空内容' },
-  { id: 'tools-run', label: '流式 · 工具已跑 · round 2' },
-  { id: 'reasoning-stream', label: '流式 · 推理打字' },
-];
+function previewScenes(): { id: PreviewScene; label: string }[] {
+  return [
+    { id: 'static', label: t('Static history') },
+    { id: 'thinking', label: t('Streaming · empty content') },
+    { id: 'tools-run', label: t('Streaming · tools ran · round 2') },
+    { id: 'reasoning-stream', label: t('Streaming · reasoning typing') },
+  ];
+}
 
 export function ChatPanelPreviewPage() {
   const [scene, setScene] = useState<PreviewScene>('static');
@@ -249,14 +251,14 @@ export function ChatPanelPreviewPage() {
             {
               type: 'reasoning',
               content: [
-                '先检查服务是否还能连上。',
-                '如果端口通了，再跑本目录的测试套件。',
-                '失败的话只读失败文件，不要整仓扫一遍。',
-                '断言颜色对不上时优先看 AssistantMessage 的默认色。',
-                '改完再复跑一次，确认没有带出新的失败。',
-                '工具调用保持最少：连通性检查、跑测试、必要时读文件。',
-                '最后用一两句说清楚结果和下一步。',
-                '如果还在思考，后面的句子会被 5 行窗口裁掉。',
+                'Check whether the service is still reachable.',
+                'If the port is open, run the test suite in this directory.',
+                'If it fails, read only the failing file. Do not scan the whole repo.',
+                "When an assertion color is wrong, look at AssistantMessage's default color first.",
+                'After the edit, run the tests again and check for new failures.',
+                'Keep tool calls few: connectivity, tests, and a file read only if needed.',
+                'Finish with one or two sentences on the result and the next step.',
+                'If thinking is still streaming, later sentences are cut by the 5-line window.',
               ].join('\n'),
             },
             {
@@ -299,7 +301,7 @@ export function ChatPanelPreviewPage() {
           timelineByMsgId: { m2: MOCK_TIMELINE },
           durationByMessageId: { m2: 83_000 },
           currentRound: 1,
-          suggestedReplies: ['修一下失败的断言颜色', '把测试再跑一遍', '解释这次失败的原因'],
+          suggestedReplies: ['Fix the failing assertion color', 'Run the tests again', 'Explain this failure'],
         };
     }
   }, [scene, streamedReasoning]);
@@ -311,7 +313,7 @@ export function ChatPanelPreviewPage() {
           /preview/chat (dev harness)
         </span>
         <div className="flex gap-1">
-          {SCENES.map((s) => (
+          {previewScenes().map((s) => (
             <button
               key={s.id}
               type="button"
@@ -339,7 +341,7 @@ export function ChatPanelPreviewPage() {
           header={
             <ChatHeader chat={MOCK_CHAT} />
           }
-          inputPlaceholder="预览模式 — 输入不会真的发送…"
+          inputPlaceholder={t('Preview mode: input is not actually sent…')}
           agents={[MOCK_AGENT]}
           currentAgent={MOCK_AGENT}
           executedActionsByMessageId={config.actionsByMsgId}

package/src/pages/SettingsPage.tsx

@@ -17,6 +17,7 @@ import {
 } from 'react-icons/lu';
 import { useOutletContext, useSearchParams } from 'react-router-dom';
 import { isElectron } from '@/lib/electron-bridge';
+import { getLocale, t } from '@/i18n';
 import { useAppRelease } from '@/components/SidebarRelease';
 import { AgentsSettingsPanel } from '@/components/settings/AgentsSettingsPanel';
 import { AppearanceSettingsPanel } from '@/components/settings/AppearanceSettingsPanel';
@@ -49,24 +50,28 @@ type PluginTab = 'agents' | 'skills' | 'mcp' | 'web-search';
 
 const PLUGIN_TABS: readonly PluginTab[] = ['agents', 'skills', 'mcp', 'web-search'];
 
-const PLUGIN_TAB_META: Record<
-  PluginTab,
-  { label: string; noun: string; Icon: typeof LuBot }
-> = {
-  agents: { label: '智能体', noun: '智能体', Icon: LuBot },
-  skills: { label: 'Skills', noun: '技能', Icon: LuBlocks },
-  mcp: { label: 'MCP', noun: 'MCP 服务', Icon: LuPlug },
-  'web-search': { label: '网络搜索', noun: '网络搜索', Icon: LuSearch },
-};
+/** 每次渲染现取，文案跟随当前语言。 */
+function pluginTabMeta(): Record<PluginTab, { label: string; noun: string; Icon: typeof LuBot }> {
+  return {
+    agents: { label: t('Agents'), noun: t('agents'), Icon: LuBot },
+    skills: { label: 'Skills', noun: t('skills'), Icon: LuBlocks },
+    mcp: { label: 'MCP', noun: t('MCP servers'), Icon: LuPlug },
+    'web-search': { label: t('Web search'), noun: t('web search'), Icon: LuSearch },
+  };
+}
 
 function isPluginTab(value: string | null): value is PluginTab {
   return (PLUGIN_TABS as readonly string[]).includes(value ?? '');
 }
 
 function pluginsSummary(tabs: readonly PluginTab[]): string {
-  const nouns = tabs.map((id) => PLUGIN_TAB_META[id].noun);
-  if (nouns.length <= 1) return `管理${nouns[0] ?? '插件'}。`;
-  return `管理${nouns.slice(0, -1).join('、')}和${nouns[nouns.length - 1]}。`;
+  const meta = pluginTabMeta();
+  const nouns = tabs.map((id) => meta[id].noun);
+  const items =
+    nouns.length === 0
+      ? t('plugins')
+      : new Intl.ListFormat(getLocale(), { type: 'conjunction' }).format(nouns);
+  return t('Manage {items}.', { items });
 }
 
 function enabledPluginTabs(): PluginTab[] {
@@ -185,30 +190,30 @@ export function SettingsPage() {
     const list: SettingsNavItem[] = [];
 
     if (settingsChrome('appearance')) {
-      list.push({ id: 'appearance', label: '界面', Icon: LuMonitor });
+      list.push({ id: 'appearance', label: t('Interface'), Icon: LuMonitor });
     }
-    list.push({ id: 'orchestration', label: '协同编排', Icon: LuGitFork });
+    list.push({ id: 'orchestration', label: t('Orchestration'), Icon: LuGitFork });
 
     if (settingsChrome('llm')) {
-      list.push({ id: 'llm', label: '本地模型设置', Icon: LuSettings });
+      list.push({ id: 'llm', label: t('Local model settings'), Icon: LuSettings });
     }
     if (settingsChrome('web-search')) {
-      list.push({ id: 'web-search', label: '网络搜索', Icon: LuSearch });
+      list.push({ id: 'web-search', label: t('Web search'), Icon: LuSearch });
     }
     if (settingsChrome('usage')) {
-      list.push({ id: 'usage', label: '用量与成本', Icon: LuChartBar });
+      list.push({ id: 'usage', label: t('Usage and cost'), Icon: LuChartBar });
     }
     if (settingsChrome('diagnose')) {
-      list.push({ id: 'diagnose', label: '链路诊断', Icon: LuNetwork });
+      list.push({ id: 'diagnose', label: t('Connection diagnostics'), Icon: LuNetwork });
     }
     if (settingsChrome('security')) {
-      list.push({ id: 'security', label: '安全', Icon: LuShieldCheck });
+      list.push({ id: 'security', label: t('Security'), Icon: LuShieldCheck });
     }
     if (settingsChrome('insights')) {
-      list.push({ id: 'insights', label: '帮助改进产品', Icon: LuChartBar });
+      list.push({ id: 'insights', label: t('Help improve the product'), Icon: LuChartBar });
     }
     if (settingsChrome('telemetry')) {
-      list.push({ id: 'telemetry', label: '遥测(OTLP)', Icon: LuActivity });
+      list.push({ id: 'telemetry', label: t('Telemetry (OTLP)'), Icon: LuActivity });
     }
 
     const packPanels = getPackSettingsPanels();
@@ -221,13 +226,13 @@ export function SettingsPage() {
     }
 
     if (isPortableEnabled()) {
-      list.push({ id: 'portable', label: '备份与迁移', Icon: LuDownload });
+      list.push({ id: 'portable', label: t('Backup and migration'), Icon: LuDownload });
     }
     if (isElectron()) {
-      list.push({ id: 'python-runner', label: 'Python 运行环境', Icon: LuCodeXml });
+      list.push({ id: 'python-runner', label: t('Python runtime'), Icon: LuCodeXml });
     }
     if (release.version) {
-      list.push({ id: 'update', label: '软件更新', Icon: LuInfo });
+      list.push({ id: 'update', label: t('Software update'), Icon: LuInfo });
     }
 
     return list;
@@ -271,7 +276,8 @@ export function SettingsPage() {
     }
   }, [menuItems]);
 
-  const title = section === 'plugins' ? '插件' : '设置';
+  const title = section === 'plugins' ? t('Plugins') : t('Settings');
+  const pluginMeta = pluginTabMeta();
 
   return (
     <div ref={pageContainerRef} className="flex h-full w-full flex-col overflow-hidden">
@@ -281,12 +287,12 @@ export function SettingsPage() {
           {section === 'plugins' && pluginTabs.length > 1 && (
             <div
               role="tablist"
-              aria-label="插件"
+              aria-label={t('Plugins')}
               data-testid="plugins-tabs"
               className="flex min-w-0 items-center gap-1"
             >
               {pluginTabs.map((id) => {
-                const meta = PLUGIN_TAB_META[id];
+                const meta = pluginMeta[id];
                 const active = pluginTab === id;
                 return (
                   <button
@@ -343,7 +349,7 @@ export function SettingsPage() {
           <div ref={contentRef} className="min-w-0 flex-1 max-w-3xl space-y-4">
             {!isElectron() && (
               <p className="rounded-agent-md border border-agent-destructive/20 bg-agent-destructive/10 p-2.5 text-xs text-agent-destructive">
-                浏览器预览模式 — 没有 Electron IPC 桥接，部分设置不可用。
+                {t('Browser preview mode: no Electron IPC bridge, so some settings are unavailable.')}
               </p>
             )}
 
@@ -356,7 +362,7 @@ export function SettingsPage() {
                 <section className="space-y-2" data-testid="settings-section-skills">
                   <h2 className="flex items-center gap-1.5 text-xs font-semibold text-agent-foreground">
                     <LuBlocks className="h-3.5 w-3.5 text-agent-muted-foreground" />
-                    本地技能
+                    {t('Local skills')}
                   </h2>
                   <SkillsSettingsPanel />
                 </section>
@@ -365,7 +371,7 @@ export function SettingsPage() {
                 <section className="space-y-2" data-testid="settings-section-mcp">
                   <h2 className="flex items-center gap-1.5 text-xs font-semibold text-agent-foreground">
                     <LuPlug className="h-3.5 w-3.5 text-agent-muted-foreground" />
-                    MCP 服务
+                    {t('MCP servers')}
                   </h2>
                   <McpSettingsPanel />
                 </section>
@@ -374,7 +380,7 @@ export function SettingsPage() {
                 <section className="space-y-2" data-testid="settings-section-agents">
                   <h2 className="flex items-center gap-1.5 text-xs font-semibold text-agent-foreground">
                     <LuBot className="h-3.5 w-3.5 text-agent-muted-foreground" />
-                    智能体
+                    {t('Agents')}
                   </h2>
                   <AgentsSettingsPanel onCatalogChange={catalog?.refreshAgents} />
                 </section>
@@ -383,7 +389,7 @@ export function SettingsPage() {
                 <section className="space-y-2" data-testid="settings-section-web-search">
                   <h2 className="flex items-center gap-1.5 text-xs font-semibold text-agent-foreground">
                     <LuSearch className="h-3.5 w-3.5 text-agent-muted-foreground" />
-                    网络搜索
+                    {t('Web search')}
                   </h2>
                   <WebSearchSettingsPanel />
                 </section>
@@ -397,7 +403,7 @@ export function SettingsPage() {
               <section className="space-y-2" data-testid="settings-section-appearance">
                 <h2 className="flex items-center gap-1.5 text-xs font-semibold text-agent-foreground">
                   <LuMonitor className="h-3.5 w-3.5 text-agent-muted-foreground" />
-                  界面
+                  {t('Interface')}
                 </h2>
                 <AppearanceSettingsPanel />
               </section>
@@ -406,7 +412,7 @@ export function SettingsPage() {
               <section className="space-y-2" data-testid="settings-section-orchestration">
                 <h2 className="flex items-center gap-1.5 text-xs font-semibold text-agent-foreground">
                   <LuSettings className="h-3.5 w-3.5 text-agent-muted-foreground" />
-                  协同编排
+                  {t('Orchestration')}
                 </h2>
                 <OrchestrationSettingsPanel />
               </section>
@@ -415,7 +421,7 @@ export function SettingsPage() {
               <section className="space-y-2" data-testid="settings-section-llm">
                 <h2 className="flex items-center gap-1.5 text-xs font-semibold text-agent-foreground">
                   <LuSettings className="h-3.5 w-3.5 text-agent-muted-foreground" />
-                  本地模型设置
+                  {t('Local model settings')}
                 </h2>
                 <LlmSettingsPanel
                   ref={llmPanelRef}
@@ -429,7 +435,7 @@ export function SettingsPage() {
               <section className="space-y-2" data-testid="settings-section-web-search">
                 <h2 className="flex items-center gap-1.5 text-xs font-semibold text-agent-foreground">
                   <LuSearch className="h-3.5 w-3.5 text-agent-muted-foreground" />
-                  网络搜索
+                  {t('Web search')}
                 </h2>
                 <WebSearchSettingsPanel />
               </section>
@@ -439,7 +445,7 @@ export function SettingsPage() {
               <section className="space-y-2" data-testid="settings-section-usage">
                 <h2 className="flex items-center gap-1.5 text-xs font-semibold text-agent-foreground">
                   <LuChartBar className="h-3.5 w-3.5 text-agent-muted-foreground" />
-                  用量与成本
+                  {t('Usage and cost')}
                 </h2>
                 <UsagePanel />
               </section>
@@ -449,7 +455,7 @@ export function SettingsPage() {
               <section className="space-y-2" data-testid="settings-section-diagnose">
                 <h2 className="flex items-center gap-1.5 text-xs font-semibold text-agent-foreground">
                   <LuNetwork className="h-3.5 w-3.5 text-agent-muted-foreground" />
-                  链路诊断
+                  {t('Connection diagnostics')}
                 </h2>
                 <DiagnoseSettingsPanel />
               </section>
@@ -459,7 +465,7 @@ export function SettingsPage() {
               <section className="space-y-2" data-testid="settings-section-security">
                 <h2 className="flex items-center gap-1.5 text-xs font-semibold text-agent-foreground">
                   <LuShieldCheck className="h-3.5 w-3.5 text-agent-muted-foreground" />
-                  安全
+                  {t('Security')}
                 </h2>
                 <SecuritySettingsPanel />
               </section>
@@ -469,7 +475,7 @@ export function SettingsPage() {
               <section className="space-y-2" data-testid="settings-section-insights">
                 <h2 className="flex items-center gap-1.5 text-xs font-semibold text-agent-foreground">
                   <LuChartBar className="h-3.5 w-3.5 text-agent-muted-foreground" />
-                  帮助改进产品
+                  {t('Help improve the product')}
                 </h2>
                 <InsightsSettingsPanel />
               </section>
@@ -479,7 +485,7 @@ export function SettingsPage() {
               <section className="space-y-2" data-testid="settings-section-telemetry">
                 <h2 className="flex items-center gap-1.5 text-xs font-semibold text-agent-foreground">
                   <LuActivity className="h-3.5 w-3.5 text-agent-muted-foreground" />
-                  遥测(OTLP)
+                  {t('Telemetry (OTLP)')}
                 </h2>
                 <TelemetrySettingsPanel />
               </section>
@@ -507,7 +513,7 @@ export function SettingsPage() {
               <section className="space-y-2" data-testid="settings-section-portable">
                 <h2 className="flex items-center gap-1.5 text-xs font-semibold text-agent-foreground">
                   <LuDownload className="h-3.5 w-3.5 text-agent-muted-foreground" />
-                  备份与迁移
+                  {t('Backup and migration')}
                 </h2>
                 <PortableSettingsPanel />
               </section>

package/src/vite-env.d.ts

@@ -14,6 +14,9 @@ interface ImportMetaEnv {
   readonly VITE_SETTINGS?: string;
   /** `'true'` 才打开对话与配置的导出/导入。缺省关。 */
   readonly VITE_PORTABLE?: string;
+  /** JSON 数组，产品声明的界面语言。缺省 `["en"]`。 */
+  readonly VITE_LOCALES?: string;
+  readonly VITE_DEFAULT_LOCALE?: string;
 }
 
 interface ImportMeta {

package/vite.base.js

@@ -51,8 +51,8 @@ export function createProductViteConfig(options) {
             // 在注册时经 setBrandLogoUrl 注入（本包 src/brand.ts）。
             'import.meta.env.VITE_BRAND_NAME': JSON.stringify(brand?.displayName ?? 'Steerable Shell'),
             'import.meta.env.VITE_BRAND_TITLE': JSON.stringify(brand?.title ?? ''),
-            'import.meta.env.VITE_BRAND_TAGLINE': JSON.stringify(brand?.tagline ?? '一款本地桌面 AI 伙伴'),
-            'import.meta.env.VITE_BRAND_HOME_HINT': JSON.stringify(brand?.homeHint ?? '输入消息，直接开始一段新对话。'),
+            'import.meta.env.VITE_BRAND_TAGLINE': JSON.stringify(brand?.tagline ?? 'A local desktop AI partner'),
+            'import.meta.env.VITE_BRAND_HOME_HINT': JSON.stringify(brand?.homeHint ?? 'Type a message to start a new chat.'),
             'import.meta.env.VITE_DEFAULT_AGENT_ID': JSON.stringify(brand?.defaultAgentId ?? 'local-assistant'),
             // 宿主工具族 / 安全询问：与 node 侧 setProductConfig 读同一份 product.json。
             'import.meta.env.VITE_HOST_TOOLS': JSON.stringify(JSON.stringify(product.hostTools ?? {})),
@@ -60,6 +60,10 @@ export function createProductViteConfig(options) {
             'import.meta.env.VITE_CHAT_MODES': JSON.stringify(JSON.stringify(product.chatModes ?? ['agent', 'plan'])),
             'import.meta.env.VITE_SETTINGS': JSON.stringify(JSON.stringify(product.settings ?? {})),
             'import.meta.env.VITE_PORTABLE': JSON.stringify(product.portable === true ? 'true' : 'false'),
+            'import.meta.env.VITE_LOCALES': JSON.stringify(JSON.stringify(Array.isArray(product.i18n?.locales) && product.i18n.locales.length > 0
+                ? product.i18n.locales
+                : ['en'])),
+            'import.meta.env.VITE_DEFAULT_LOCALE': JSON.stringify(product.i18n?.defaultLocale ?? 'en'),
         },
         resolve: {
             alias: {