@steerable/agent-shell-web 0.6.52 → 0.6.55

package/src/lib/portable.ts

@@ -3,6 +3,7 @@
  * 界面档位和命令权限存在 localStorage，由这里并进配置包；其余段走本地后端。
  */
 
+import { t } from '@/i18n';
 import { getElectronBridge } from '@/lib/electron-bridge';
 import { listChats } from '@/lib/local-api';
 import { persistExecPolicy, readStoredExecPolicy, type ExecPolicy } from '@/lib/exec-policy';
@@ -69,9 +70,9 @@ export interface PortableChatImportResult {
 const CLIENT_SECTION_IDS = ['appearance', 'execPolicy'] as const;
 
 export function portableErrorMessage(err: unknown): string {
-  if (!(err instanceof Error)) return '操作失败';
+  if (!(err instanceof Error)) return t('Operation failed');
   const message = err.message.trim();
-  if (!message) return '操作失败';
+  if (!message) return t('Operation failed');
   try {
     const parsed = JSON.parse(message) as { detail?: unknown; error?: unknown };
     if (typeof parsed.detail === 'string' && parsed.detail.trim()) return parsed.detail;
@@ -86,13 +87,13 @@ export function parsePortableText(text: string): { ok: true; value: unknown } |
   try {
     return { ok: true, value: JSON.parse(text) as unknown };
   } catch {
-    return { ok: false, error: '文件不是 JSON' };
+    return { ok: false, error: t('The file is not JSON') };
   }
 }
 
 export function safeDownloadName(stem: string, suffix: string): string {
   const cleaned = stem.replace(/[\\/:*?"<>|]/g, ' ').replace(/\s+/g, ' ').trim().slice(0, 40);
-  return `${cleaned || '导出'}-${suffix}.json`;
+  return `${cleaned || t('Export')}-${suffix}.json`;
 }
 
 export function readLocalSections(): { appearance: { thinkingDisplay: ThinkingDisplayMode }; execPolicy: { policy: ExecPolicy } } {
@@ -139,7 +140,7 @@ export function isClientSection(id: string): boolean {
 
 async function request<T>(method: string, path: string, body?: unknown): Promise<T> {
   const bridge = getElectronBridge();
-  if (!bridge) throw new Error('当前环境没有本地后端');
+  if (!bridge) throw new Error(t('No local backend in this environment'));
   return bridge.localBackend.request<T>(body === undefined ? { method, path } : { method, path, body });
 }
 
@@ -159,7 +160,7 @@ export async function listPortableChats(): Promise<Array<{ id: string; title: st
   for (;;) {
     const res = await listChats({ page, limit: 100 });
     for (const chat of res.chats) {
-      rows.push({ id: chat.id, title: chat.title.trim() || '未命名对话' });
+      rows.push({ id: chat.id, title: chat.title.trim() || t('Untitled chat') });
     }
     if (!res.pagination.hasMore || page >= 50) break;
     page += 1;
@@ -190,7 +191,7 @@ export async function saveJsonFile(filename: string, data: unknown): Promise<str
   const content = `${JSON.stringify(data, null, 2)}\n`;
   const save = getElectronBridge()?.local?.saveTextFile;
   if (save) {
-    const saved = await save({ title: '导出', defaultPath: filename, content });
+    const saved = await save({ title: t('Export'), defaultPath: filename, content });
     if (saved.canceled || !saved.filePath) return null;
     return saved.filePath;
   }

package/src/lib/show-thinking-content.ts

@@ -19,9 +19,21 @@ export const THINKING_DISPLAY_OPTIONS: ReadonlyArray<{
   label: string;
   hint: string;
 }> = [
-  { mode: 'hidden', label: '隐藏', hint: '不展示思考正文，只保留工作状态行。' },
-  { mode: 'peek', label: '显示5行', hint: '当前轮思考最多露出 5 行，不足不撑开；该轮结束后自动折叠。完整正文请用「完整显示」。' },
-  { mode: 'full', label: '完整显示', hint: '当前轮思考完整展开，该轮结束后自动折叠；工作行结束后仍自动折叠。' },
+  {
+    mode: 'hidden',
+    label: 'Hide',
+    hint: 'Hide the thinking text and keep only the work status line.',
+  },
+  {
+    mode: 'peek',
+    label: 'Show 5 lines',
+    hint: 'Show at most 5 lines of the current turn\'s thinking. Do not stretch the row when there is less, and collapse it when the turn ends. Use "Show all" for the full text.',
+  },
+  {
+    mode: 'full',
+    label: 'Show all',
+    hint: 'Expand the current turn\'s thinking, then collapse it when the turn ends. The work row still collapses when it finishes.',
+  },
 ];
 
 export function isThinkingDisplayMode(value: unknown): value is ThinkingDisplayMode {

package/src/lib/tauri-bridge.ts

@@ -92,6 +92,11 @@ export function createTauriBridge(): HostBridge {
     offMenuOpenTerminal: terminalMenu.off,
     onMenuPaste: pasteMenu.on,
     offMenuPaste: pasteMenu.off,
+    readClipboard: () =>
+      invoke<{
+        text: string;
+        files: Array<{ name: string; path?: string; dataBase64?: string; mime?: string }>;
+      }>('host_read_clipboard'),
     readClipboardText: () => invoke<string>('host_read_clipboard_text'),
     app: {
       snapshot: () => invoke<AppReleaseSnapshot>('app_release_snapshot'),

package/src/main.tsx

@@ -2,6 +2,7 @@ import { StrictMode, lazy, Suspense, type ReactNode } from 'react';
 import { createRoot, type Root } from 'react-dom/client';
 import { createHashRouter, RouterProvider } from 'react-router-dom';
 import { AppShell } from './AppShell';
+import { I18nProvider, configureI18n, getLocale } from './i18n';
 import { AgentLayout } from './layouts/AgentLayout';
 import { AgentPage } from './pages/AgentPage';
 import { SettingsPage } from './pages/SettingsPage';
@@ -82,7 +83,9 @@ function renderApplication(root: Root): void {
 
   root.render(
     <StrictMode>
-      <RouterProvider router={router} />
+      <I18nProvider>
+        <RouterProvider router={router} />
+      </I18nProvider>
     </StrictMode>,
   );
 }
@@ -97,6 +100,12 @@ export async function bootstrap(): Promise<void> {
 
   // 标题与 favicon 在 bootstrap 时设置——此刻产品入口已完成包注册
   // （品牌 logo 由包经 setBrandLogoUrl 注入，见 brand.ts）。
+  configureI18n({
+    locales: parseLocales(import.meta.env.VITE_LOCALES),
+    defaultLocale: import.meta.env.VITE_DEFAULT_LOCALE || 'en',
+  });
+  document.documentElement.lang = getLocale() === 'zh' ? 'zh-CN' : getLocale();
+  window.electron?.setLocale?.(getLocale());
   document.title = BRAND_NAME;
   document.querySelector<HTMLLinkElement>('link[rel="icon"]')?.setAttribute('href', getBrandLogoUrl());
   installHostPaste();
@@ -117,7 +126,9 @@ export async function bootstrap(): Promise<void> {
     const Gate = gate.Component;
     root.render(
       <StrictMode>
-        <Gate onAuthenticated={onAuthenticated} />
+        <I18nProvider>
+          <Gate onAuthenticated={onAuthenticated} />
+        </I18nProvider>
       </StrictMode>,
     );
     return;
@@ -125,3 +136,15 @@ export async function bootstrap(): Promise<void> {
 
   renderApplication(root);
 }
+
+function parseLocales(raw: string | undefined): string[] {
+  if (!raw) return ['en'];
+  try {
+    const parsed = JSON.parse(raw) as unknown;
+    if (!Array.isArray(parsed)) return ['en'];
+    const locales = parsed.filter((item): item is string => typeof item === 'string' && item.length > 0);
+    return locales.length > 0 ? locales : ['en'];
+  } catch {
+    return ['en'];
+  }
+}

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}