@steerable/agent-shell-web 0.6.53 → 0.6.56

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>,
   );
 }
@@ -91,12 +94,18 @@ export async function bootstrap(): Promise<void> {
   if (import.meta.env.DEV) {
     // 动态 import：prod 构建里 Rollup 把 DEV 分支连同 mock（含其 fixtures）
     // 整体树摇掉，浏览器 dev mock 数据不进产物。
-    const { installBrowserDevElectronMock } = await import('./lib/browser-dev-electron-mock');
-    installBrowserDevElectronMock();
+    const { installBrowserDevHostMock } = await import('./lib/browser-dev-host-mock');
+    installBrowserDevHostMock();
   }
 
   // 标题与 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.steerableHost?.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

@@ -2,10 +2,10 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useNavigate, useOutletContext, useParams, useSearchParams } from "react-router-dom";
 import { useChatStream, type SteerOutcome } from "@steerable/agent-ui";
 import type { ChatMessage, SSEEvent } from "@steerable/agent-protocol";
-import { getElectronBridge, isElectron } from "@/lib/electron-bridge";
+import { getHostBridge, hasHostBridge } from "@/lib/host-bridge";
 import { trackBehavior } from "@/lib/insights";
 import {
-  createElectronChatTransport,
+  createHostChatTransport,
   regenerateChatMessage,
 } from "@/lib/chat-transport";
 import { ChatHeader } from "@/components/ChatHeader";
@@ -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,
@@ -263,12 +264,12 @@ function AgentChatLoader({
   useEffect(() => {
     let cancelled = false;
     void (async () => {
-      if (!isElectron()) {
+      if (!hasHostBridge()) {
         if (!cancelled) setInitialMessages([]);
         return;
       }
       try {
-        const bridge = getElectronBridge()!;
+        const bridge = getHostBridge()!;
         const [response, live] = await Promise.all([
           bridge.localBackend.request<{
             messages?: ChatMessageWithMetadata[];
@@ -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>
     );
   }
@@ -386,7 +387,7 @@ function AgentChatView({
     ? (projects.find((p) => p.id === chat.projectId) ?? null)
     : null;
   const transport = useMemo(
-    () => createElectronChatTransport(chatId),
+    () => createHostChatTransport(chatId),
     [chatId],
   );
 
@@ -889,7 +890,7 @@ function AgentChatView({
         updateRemoteFollowUps(() => []);
         void (async () => {
           try {
-            const response = await getElectronBridge()?.localBackend.request<{
+            const response = await getHostBridge()?.localBackend.request<{
               messages?: ChatMessageWithMetadata[];
             }>({
               method: "GET",
@@ -922,7 +923,7 @@ function AgentChatView({
   ]);
 
   useEffect(() => {
-    const bridge = getElectronBridge();
+    const bridge = getHostBridge();
     if (!bridge?.onSuggestedReplies) return;
     return bridge.onSuggestedReplies((payload) => {
       if (payload.chatId !== chatId) return;
@@ -1041,14 +1042,14 @@ function AgentChatView({
   const handleExecutePlan = useCallback(() => {
     handleModeChange("agent");
     setPlanReady(false);
-    void handleSubmit({ content: "请按照上面的计划开始执行。" });
+    void handleSubmit({ content: t("Start executing the plan above.") });
   }, [handleModeChange, handleSubmit]);
 
   // 分享当前对话：截取整个聊天面板区域（含 header + 消息 + 输入框），
   // 由主进程 capturePage 后写入系统剪贴板，用户可直接粘贴到任何地方。
   const handleShare = useCallback(async (): Promise<boolean> => {
-    if (!isElectron()) return false;
-    const bridge = getElectronBridge()!;
+    if (!hasHostBridge()) return false;
+    const bridge = getHostBridge()!;
     const panel = document.querySelector('.chat-panel-container');
     const rect = panel?.getBoundingClientRect();
     const result = await bridge.local?.captureScreenshot(
@@ -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
@@ -1172,7 +1173,7 @@ function AgentChatView({
         header={
           <ChatHeader
             chat={chat}
-            onBranchSwitched={isElectron() ? onBranchTick : undefined}
+            onBranchSwitched={hasHostBridge() ? onBranchTick : undefined}
             onInspectTask={ctx.inspectTask}
             tasks={tasks}
             chatSlots={ctx.chatSlots}
@@ -1182,7 +1183,7 @@ function AgentChatView({
           />
         }
         onRegenerate={
-          isElectron()
+          hasHostBridge()
             ? async (messageId) => {
                 // 后端 regenerate 流跑完后桌面 store 已是新分支投影；
                 // bump tick 重挂消息列表。
@@ -1191,7 +1192,7 @@ function AgentChatView({
               }
             : undefined
         }
-        inputPlaceholder="向本地 Agent 发送消息…"
+        inputPlaceholder={t("Message the local Agent…")}
         agents={ctx.agents}
         chats={ctx.chats}
         currentAgent={agent}
@@ -1216,11 +1217,11 @@ function AgentChatView({
         finishedTasks={finishedTasks}
         onInspectTask={handleInspectTask}
         onDismissFinishedTask={dismissFinished}
-        onShare={isElectron() ? handleShare : undefined}
+        onShare={hasHostBridge() ? handleShare : undefined}
         suggestedReplies={visibleSuggestedReplies}
         onSelectSuggestion={handleSelectSuggestion}
         onOpenSettings={
-          isElectron() && settingsChrome("llm")
+          hasHostBridge() && settingsChrome("llm")
             ? () => setLlmSettingsOpen(true)
             : undefined
         }
@@ -1231,7 +1232,7 @@ function AgentChatView({
             onSelectModel={setModelOverride}
             onSelectEffort={setEffortOverride}
             onOpenSettings={
-              isElectron() && settingsChrome("llm")
+              hasHostBridge() && settingsChrome("llm")
                 ? () => setLlmSettingsOpen(true)
                 : undefined
             }
@@ -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>
@@ -1295,7 +1298,7 @@ function AgentChatView({
           </>
         }
       />
-      {isElectron() && settingsChrome("llm") && (
+      {hasHostBridge() && settingsChrome("llm") && (
         <LocalLlmSettingsModal
           open={llmSettingsOpen}
           onClose={() => setLlmSettingsOpen(false)}
@@ -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 走多模态，非图片文件不会被图片逻辑吞掉。
@@ -1463,11 +1466,11 @@ function EmptyChatGate() {
             value={inputValue}
             onChange={setInputValue}
             onSubmit={handleSubmit}
-            disabled={!isElectron() || isCreating}
+            disabled={!hasHostBridge() || 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}
@@ -1475,7 +1478,7 @@ function EmptyChatGate() {
             selectedAgentId={ctx.selectedAgentId}
             onSelectAgent={handleSelectAgent}
             onOpenSettings={
-              isElectron() && settingsChrome("llm")
+              hasHostBridge() && settingsChrome("llm")
                 ? () => setLlmSettingsOpen(true)
                 : undefined
             }
@@ -1486,15 +1489,15 @@ function EmptyChatGate() {
                 onSelectModel={setModelOverride}
                 onSelectEffort={setEffortOverride}
                 onOpenSettings={
-                  isElectron() && settingsChrome("llm")
+                  hasHostBridge() && settingsChrome("llm")
                     ? () => setLlmSettingsOpen(true)
                     : undefined
                 }
-                disabled={!isElectron() || isCreating}
+                disabled={!hasHostBridge() || isCreating}
               />
             }
             leadingChrome={
-              isElectron() && showProjectsChrome ? (
+              hasHostBridge() && showProjectsChrome ? (
                 <ProjectPickerButton
                   projects={projects}
                   value={selectedProjectId}
@@ -1516,7 +1519,7 @@ function EmptyChatGate() {
         </div>
         {isCreating && (
           <p className="text-xs text-agent-muted-foreground">
-            正在创建对话…
+            {t("Creating chat…")}
           </p>
         )}
         {createError && (
@@ -1524,13 +1527,15 @@ function EmptyChatGate() {
             {createError}
           </p>
         )}
-        {!isElectron() && (
+        {!hasHostBridge() && (
           <p className="text-xs text-agent-destructive">
-            浏览器预览模式 — 没有 Electron IPC 桥接，聊天列表与流式响应不可用。
+            {t(
+              "Browser preview mode: no host bridge, so the chat list and streaming responses are unavailable.",
+            )}
           </p>
         )}
       </div>
-      {isElectron() && settingsChrome("llm") && (
+      {hasHostBridge() && settingsChrome("llm") && (
         <LocalLlmSettingsModal
           open={llmSettingsOpen}
           onClose={() => setLlmSettingsOpen(false)}

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}