@steerable/agent-shell-web 0.6.53 → 0.6.56

package/src/components/chat/StreamingStatus.tsx

@@ -1,4 +1,5 @@
 import { motion } from 'framer-motion';
+import { t } from '@/i18n';
 
 /**
  * StreamingStatus — informative placeholder for an assistant bubble that has
@@ -71,12 +72,12 @@ export function StreamingStatus({
 
 function selectLabel(round: number, actionCount: number): string {
   if (round >= 2 && actionCount === 0) {
-    return `Round ${round} · 继续推理...`;
+    return t('Round {round} · Continuing reasoning...', { round });
   }
   if (actionCount > 0) {
-    return `已调用 ${actionCount} 个工具，正在分析...`;
+    return t('Called {count} tools, analyzing...', { count: actionCount });
   }
-  return '正在思考...';
+  return t('Now thinking...');
 }
 
 function Dots() {

package/src/components/chat/SuggestedReplies.tsx

@@ -1,4 +1,5 @@
 import { LuSparkles } from 'react-icons/lu';
+import { t } from '@/i18n';
 
 /**
  * WorkBuddy-style follow-up chips: next-turn user inputs rendered under the
@@ -22,8 +23,8 @@ export function SuggestedReplies({
     >
       <div
         className="mr-0.5 inline-flex items-center select-none"
-        title="建议"
-        aria-label="建议"
+        title={t('Suggestions')}
+        aria-label={t('Suggestions')}
       >
         <LuSparkles className="h-3 w-3 text-agent-muted-foreground/80" />
       </div>

package/src/components/chat/TaskOutcomeCards.tsx

@@ -10,6 +10,7 @@
  * 不写库。worktree 的合并/丢弃仍归任务弹层——卡片只通知，不重复那套操作。
  */
 import { LuCheck, LuGitBranch, LuX } from 'react-icons/lu';
+import { t } from '@/i18n';
 import type { LocalTask } from '@/lib/local-api';
 
 /** 同时挤在消息列尾部的卡片上限；更多的只留一行汇总指回角标。 */
@@ -41,7 +42,9 @@ export function TaskOutcomeCards({ tasks, onInspect, onDismiss }: TaskOutcomeCar
       ))}
       {overflow > 0 && (
         <div className="px-1 text-[11px] text-agent-muted-foreground">
-          另有 {overflow} 个后台任务已结束 — 见标题栏的任务按钮。
+          {t('{count} more background tasks finished. See the tasks button in the title bar.', {
+            count: overflow,
+          })}
         </div>
       )}
     </div>
@@ -86,7 +89,7 @@ function TaskOutcomeCard({
               : 'text-emerald-700 dark:text-emerald-300'
           }
         >
-          {failed ? '后台任务失败：' : '后台任务已完成：'}
+          {failed ? t('Background task failed: ') : t('Background task completed: ')}
           <span className="font-medium">{task.task}</span>
         </div>
         {detail && (
@@ -100,7 +103,7 @@ function TaskOutcomeCard({
             <span className="min-w-0 truncate font-mono text-[10px]">
               {task.worktreeBranch}
             </span>
-            <span>待合并 — 在标题栏的任务按钮里处理。</span>
+            <span>{t('Awaiting merge. Handle it from the tasks button in the title bar.')}</span>
           </div>
         )}
       </div>
@@ -111,14 +114,14 @@ function TaskOutcomeCard({
           onClick={onDismiss}
           className="rounded px-1.5 py-0.5 text-agent-muted-foreground transition-colors hover:text-agent-foreground"
         >
-          忽略
+          {t('Dismiss')}
         </button>
         <button
           type="button"
           onClick={onInspect}
           className="rounded-full bg-agent-foreground px-3 py-1 font-medium text-agent-canvas transition hover:opacity-90"
         >
-          查看过程
+          {t('View process')}
         </button>
       </div>
     </div>

package/src/components/chat/TaskPanelModal.tsx

@@ -18,7 +18,8 @@ import {
   mergeTaskWorktree,
   type LocalTask,
 } from '@/lib/local-api';
-import { getElectronBridge } from '@/lib/electron-bridge';
+import { getHostBridge } from '@/lib/host-bridge';
+import { t } from '@/i18n';
 
 /**
  * TaskPanelModal — 跨 turn 后台任务面板（4.6a/4.6c）。
@@ -80,7 +81,7 @@ export function TaskPanelModal({
   // 任务终态推送 → 重拉列表。preload 只透传 chatId/taskId/status，
   // 记录本体以 SQLite 为准。
   useEffect(() => {
-    const bridge = getElectronBridge();
+    const bridge = getHostBridge();
     if (!bridge?.onTaskUpdated) return;
     return bridge.onTaskUpdated((payload) => {
       if (payload.chatId === chatId) void refresh();
@@ -121,14 +122,14 @@ export function TaskPanelModal({
     }
   };
 
-  const runningCount = tasks?.filter((t) => t.status === 'running').length ?? 0;
+  const runningCount = tasks?.filter((task) => task.status === 'running').length ?? 0;
 
   return createPortal(
     <div
       className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 p-4"
       role="dialog"
       aria-modal="true"
-      aria-label="后台任务"
+      aria-label={t('Background tasks')}
       onMouseDown={(e) => {
         if (e.target === e.currentTarget) onClose();
       }}
@@ -138,10 +139,15 @@ export function TaskPanelModal({
         <div className="flex items-center gap-2 border-b border-agent-border px-3 py-2">
           <LuListTodo className="h-4 w-4 shrink-0 text-agent-muted-foreground" />
           <span className="min-w-0 flex-1 truncate text-xs font-medium text-agent-foreground">
-            后台任务
+            {t('Background tasks')}
             {tasks && tasks.length > 0 && (
               <span className="ml-1.5 text-xs font-normal text-agent-muted-foreground">
-                {tasks.length} 个任务{runningCount > 0 ? `，${runningCount} 个运行中` : ''}
+                {runningCount > 0
+                  ? t('{count} tasks, {running} running', {
+                      count: tasks.length,
+                      running: runningCount,
+                    })
+                  : t('{count} tasks', { count: tasks.length })}
               </span>
             )}
           </span>
@@ -149,7 +155,7 @@ export function TaskPanelModal({
             type="button"
             onClick={onClose}
             className="flex h-6 w-6 shrink-0 items-center justify-center rounded-full text-agent-muted-foreground transition-colors hover:bg-agent-foreground/5 hover:text-agent-foreground"
-            aria-label="关闭"
+            aria-label={t('Close')}
           >
             <LuX className="h-3.5 w-3.5" />
           </button>
@@ -159,11 +165,13 @@ export function TaskPanelModal({
           {loading ? (
             <div className="flex items-center justify-center gap-2 px-3 py-6 text-xs text-agent-muted-foreground">
               <LuLoaderCircle className="h-3.5 w-3.5 animate-spin" />
-              正在加载任务…
+              {t('Loading tasks...')}
             </div>
           ) : !tasks || tasks.length === 0 ? (
             <div className="px-3 py-6 text-center text-xs text-agent-muted-foreground">
-              暂无后台任务 — 让助手用 task_run 启动一个跨轮任务后会出现在这里。
+              {t(
+                'No background tasks yet. When the assistant starts a cross-turn task with task_run, it appears here.',
+              )}
             </div>
           ) : (
             tasks.map((task) => {
@@ -190,7 +198,7 @@ export function TaskPanelModal({
                       type="button"
                       onClick={() => onInspect?.(task)}
                       className="min-w-0 flex-1 truncate text-left text-xs font-medium text-agent-foreground hover:underline"
-                      title="在右侧查看推理过程"
+                      title={t('View the reasoning process on the right')}
                     >
                       {task.task}
                     </button>
@@ -202,9 +210,9 @@ export function TaskPanelModal({
                         <LuGitBranch className="h-3 w-3" />
                         {task.worktreeBranch}
                         {task.worktreeState === 'merged'
-                          ? ' · 已合并'
+                          ? ` · ${t('Merged')}`
                           : task.worktreeState === 'discarded'
-                            ? ' · 已丢弃'
+                            ? ` · ${t('Discarded')}`
                             : ''}
                       </span>
                     )}
@@ -212,7 +220,7 @@ export function TaskPanelModal({
                       type="button"
                       onClick={() => setExpandedId(expanded ? null : task.id)}
                       className="flex h-5 w-5 shrink-0 items-center justify-center rounded text-agent-muted-foreground transition-colors hover:bg-agent-foreground/5 hover:text-agent-foreground"
-                      aria-label={expanded ? '收起' : '展开'}
+                      aria-label={expanded ? t('Collapse') : t('Expand')}
                       aria-expanded={expanded}
                     >
                       {expanded ? (
@@ -225,12 +233,12 @@ export function TaskPanelModal({
 
                   <div className="mt-1 pl-5 text-[10px] text-agent-muted-foreground/80">
                     {task.status === 'running'
-                      ? '运行中'
+                      ? t('In progress')
                       : task.status === 'blocked'
-                        ? '等待依赖'
+                        ? t('Waiting on dependencies')
                         : task.status === 'completed'
-                          ? '已完成'
-                          : '失败'}
+                          ? t('Completed')
+                          : t('Failed')}
                     {' · '}
                     {formatTime(task.updatedAt)}
                   </div>
@@ -250,10 +258,10 @@ export function TaskPanelModal({
                         !task.error && (
                           <div className="text-xs text-agent-muted-foreground">
                             {task.status === 'running'
-                              ? '任务还在运行，完成后结果会出现在这里。'
+                              ? t('The task is still running. The result appears here when it finishes.')
                               : task.status === 'blocked'
-                                ? '等待依赖任务完成，就绪后会自动开始。'
-                                : '无结果。'}
+                                ? t('Waiting for dependent tasks to finish. It starts automatically when ready.')
+                                : t('No result.')}
                           </div>
                         )
                       )}
@@ -271,7 +279,7 @@ export function TaskPanelModal({
                             ) : (
                               <LuGitMerge className="h-3 w-3" />
                             )}
-                            合并到主仓
+                            {t('Merge into main repo')}
                           </button>
                           <button
                             type="button"
@@ -281,7 +289,7 @@ export function TaskPanelModal({
                             data-task-discard
                           >
                             <LuTrash2 className="h-3 w-3" />
-                            丢弃
+                            {t('Discard')}
                           </button>
                         </div>
                       )}
@@ -299,7 +307,9 @@ export function TaskPanelModal({
         </div>
 
         <div className="border-t border-agent-border px-3 py-1.5 text-[10px] text-agent-muted-foreground/80">
-          任务由后台智能体独立执行。点任务名可在右侧看推理过程；Esc 关闭。
+          {t(
+            'Background agents run tasks on their own. Click a task name to see its reasoning on the right. Press Esc to close.',
+          )}
         </div>
       </div>
     </div>,

package/src/components/chat/TaskProcessPanel.tsx

@@ -2,7 +2,8 @@ import { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react
 import { LuArrowDown, LuLoaderCircle, LuTerminal } from 'react-icons/lu';
 import { DockHeaderButton, DockPanelHeader } from '@/components/DockPanelHeader';
 import { getChildProcess, getTaskProcess } from '@/lib/local-api';
-import { getElectronBridge } from '@/lib/electron-bridge';
+import { getHostBridge } from '@/lib/host-bridge';
+import { t } from '@/i18n';
 import { Markdown } from '@/components/chat/Markdown';
 import { TurnProcessGroup } from '@/components/chat/TurnProcessGroup';
 import {
@@ -153,7 +154,7 @@ export function TaskProcessPanel({
 
   useEffect(() => {
     if (childRecordId) return;
-    const bridge = getElectronBridge();
+    const bridge = getHostBridge();
     if (!bridge?.onTaskProcess) return;
     return bridge.onTaskProcess((payload) => {
       if (payload.taskId !== inspected.id) return;
@@ -168,11 +169,11 @@ export function TaskProcessPanel({
   }, [inspected.id, childRecordId]);
 
   const statusLabel = live
-    ? '正在推理'
+    ? t('Reasoning')
     : stale
-      ? '进程已中断（表上仍是运行中）'
-      : '已结束';
-  const panelTitle = `${childRecordId ? '子代理推理' : '后台推理'} · ${statusLabel}`;
+      ? t('Process interrupted (still marked running in the table)')
+      : t('Finished');
+  const panelTitle = `${childRecordId ? t('Subagent reasoning') : t('Background reasoning')} · ${statusLabel}`;
 
   return (
     <div
@@ -182,13 +183,13 @@ export function TaskProcessPanel({
       <DockPanelHeader
         title={panelTitle}
         onClose={onClose}
-        closeLabel="关闭过程面板"
+        closeLabel={t('Close process panel')}
         actions={
           onShowTerminal && (
             <DockHeaderButton
               icon={<LuTerminal className="h-3 w-3" />}
-              label="终端"
-              title="切换到终端"
+              label={t('Terminal')}
+              title={t('Switch to terminal')}
               onClick={onShowTerminal}
             />
           )
@@ -208,7 +209,7 @@ export function TaskProcessPanel({
           {loading ? (
             <div className="flex items-center gap-2 text-xs text-agent-muted-foreground">
               <LuLoaderCircle className="h-3.5 w-3.5 animate-spin" />
-              正在加载推理过程…
+              {t('Loading reasoning process...')}
             </div>
           ) : error ? (
             <div className="text-xs text-red-600 dark:text-red-300">{error}</div>
@@ -223,10 +224,10 @@ export function TaskProcessPanel({
               emptyFallback={
                 <div className="text-xs text-agent-muted-foreground">
                   {stale
-                    ? '任务流已随进程结束，没有留下可回放的推理记录。'
+                    ? t('The task stream ended with the process and left no reasoning record to replay.')
                     : live
-                      ? '任务已启动，推理过程会显示在这里。'
-                      : '没有可显示的推理过程。'}
+                      ? t('The task has started. Its reasoning process appears here.')
+                      : t('No reasoning process to show.')}
                 </div>
               }
               renderAnswer={(block) => (
@@ -246,8 +247,8 @@ export function TaskProcessPanel({
               scrollToBottom('smooth');
             }}
             className="absolute bottom-2 right-2 flex h-7 w-7 items-center justify-center rounded-full border border-agent-border bg-agent-canvas text-agent-foreground shadow-md transition-colors hover:bg-agent-foreground/5"
-            title="回到底部"
-            aria-label="回到底部"
+            title={t('Back to bottom')}
+            aria-label={t('Back to bottom')}
           >
             <LuArrowDown className="h-4 w-4" />
           </button>

package/src/components/chat/TurnFilesCard.tsx

@@ -16,6 +16,7 @@ import {
 } from 'react-icons/lu';
 import { openLocalPath } from '@/lib/local-api';
 import { hostToolChrome } from '@/lib/host-tools';
+import { t } from '@/i18n';
 import {
   formatFileSize,
   formatIntermediateDisplayPath,
@@ -67,7 +68,7 @@ export function TurnFilesCard({ files, executedActions }: TurnFilesCardProps) {
     try {
       const result = await openLocalPath(filePath);
       if (!result.success) {
-        setOpenError({ path: filePath, message: result.error || '打开失败' });
+        setOpenError({ path: filePath, message: result.error || t('Could not open') });
       }
     } catch (err) {
       setOpenError({
@@ -197,7 +198,7 @@ function DeliverableCard({
           </button>
           <div className="mt-0.5 flex min-w-0 items-center gap-1.5 text-[11px] text-agent-muted-foreground">
             <span className="truncate" title={file.description}>
-              {file.description ?? `${meta.label} · ${meta.extBadge}`}
+              {file.description ?? `${t(meta.label)} · ${meta.extBadge}`}
             </span>
             {size && (
               <>
@@ -221,13 +222,13 @@ function DeliverableCard({
               {busy ? (
                 <LuLoaderCircle className="h-3.5 w-3.5 animate-spin text-agent-muted-foreground" />
               ) : null}
-              <span>打开方式</span>
+              <span>{t('Open with')}</span>
             </button>
             <button
               type="button"
               onClick={() => setDropdownOpen(!dropdownOpen)}
               disabled={!allowOpen}
-              aria-label="更多操作"
+              aria-label={t('More actions')}
               className="border-l border-agent-border px-1.5 py-1 text-agent-muted-foreground hover:bg-agent-muted/50 hover:text-agent-foreground rounded-r-agent-md transition-colors"
             >
               <LuChevronDown className="h-3.5 w-3.5" />
@@ -246,7 +247,7 @@ function DeliverableCard({
                 className="flex w-full items-center gap-2 px-3 py-1.5 text-left text-agent-foreground hover:bg-agent-foreground/5"
               >
                 <LuExternalLink className="h-3.5 w-3.5 text-agent-muted-foreground" />
-                <span>用默认应用打开</span>
+                <span>{t('Open with default app')}</span>
               </button>
               <button
                 type="button"
@@ -257,7 +258,7 @@ function DeliverableCard({
                 className="flex w-full items-center gap-2 px-3 py-1.5 text-left text-agent-foreground hover:bg-agent-foreground/5"
               >
                 <LuFolderOpen className="h-3.5 w-3.5 text-agent-muted-foreground" />
-                <span>在文件夹中显示</span>
+                <span>{t('Show in folder')}</span>
               </button>
               <button
                 type="button"
@@ -272,7 +273,7 @@ function DeliverableCard({
                 ) : (
                   <LuCopy className="h-3.5 w-3.5 text-agent-muted-foreground" />
                 )}
-                <span>{copied ? '已复制完整路径' : '复制文件路径'}</span>
+                <span>{copied ? t('Copied full path') : t('Copy file path')}</span>
               </button>
             </div>
           )}
@@ -281,7 +282,7 @@ function DeliverableCard({
 
       {error && (
         <div className="mt-2 px-1 text-[11px] text-agent-destructive" role="status">
-          打开失败：{error}
+          {t('Could not open: {error}', { error })}
         </div>
       )}
     </div>
@@ -370,7 +371,7 @@ function EditedFilesCard({
           </div>
           <div className="min-w-0">
             <div className="truncate text-xs font-medium text-agent-foreground">
-              修改了 {files.length} 个文件
+              {t('Changed {count} files', { count: files.length })}
             </div>
             {(totalAdditions > 0 || totalDeletions > 0) && (
               <div className="flex items-center gap-1.5 font-mono text-[11px] tabular-nums text-agent-muted-foreground">
@@ -388,10 +389,10 @@ function EditedFilesCard({
           <button
             type="button"
             disabled
-            title="撤销本轮文件改动"
+            title={t('Undo file changes from this turn')}
             className="flex items-center gap-1 px-1.5 py-0.5 text-xs text-agent-muted-foreground/50 cursor-default"
           >
-            <span>撤销</span>
+            <span>{t('Undo')}</span>
             <LuUndo2 className="h-3 w-3" />
           </button>
           <button
@@ -400,7 +401,7 @@ function EditedFilesCard({
             onClick={() => setExpanded(!expanded)}
             className="rounded-agent-md border border-agent-border bg-agent-canvas px-2.5 py-0.5 text-xs font-medium text-agent-foreground hover:bg-agent-muted/50 transition-colors"
           >
-            查看详情
+            {t('View details')}
           </button>
         </div>
       </div>
@@ -457,7 +458,7 @@ function EditedFilesCard({
 
                 {error && (
                   <div className="px-3 pb-1 text-[11px] text-agent-destructive" role="status">
-                    打开失败：{error}
+                    {t('Could not open: {error}', { error })}
                   </div>
                 )}
               </li>

package/src/components/chat/UserMessage.tsx

@@ -3,6 +3,7 @@ import { motion } from 'framer-motion';
 import { LuChevronDown, LuChevronUp, LuCheck, LuCopy, LuCornerDownRight } from 'react-icons/lu';
 import type { ChatMessage } from '@steerable/agent-protocol';
 import type { LocalChat, LocalChatAgent } from '@/lib/local-api';
+import { t } from '@/i18n';
 import { useSlashSources } from '@/lib/slash-sources';
 import { Markdown } from './Markdown';
 import { getFriendlyDate } from './timestamp';
@@ -68,7 +69,7 @@ export function UserMessage({
           <div className="mb-1 flex items-center gap-1 text-[11px] font-medium text-agent-muted-foreground select-none">
             <LuCornerDownRight className="h-3 w-3 text-agent-primary/80" />
             <span className="rounded bg-agent-primary/10 px-1 py-0.5 text-[10px] text-agent-primary font-medium">
-              追加
+              {t('Appended')}
             </span>
           </div>
         )}
@@ -110,12 +111,12 @@ export function UserMessage({
           >
             {isExpanded ? (
               <>
-                收起
+                {t('Collapse')}
                 <LuChevronUp className="h-3 w-3" />
               </>
             ) : (
               <>
-                展开全部
+                {t('Expand all')}
                 <LuChevronDown className="h-3 w-3" />
               </>
             )}
@@ -127,14 +128,14 @@ export function UserMessage({
             type="button"
             onClick={() => void copy()}
             className="inline-flex items-center gap-0.5 rounded text-xs text-agent-muted-foreground opacity-0 transition-all duration-200 hover:text-agent-foreground focus:opacity-100 group-hover/message:opacity-100"
-            title={copied ? '已复制' : '复制消息'}
-            aria-label={copied ? '已复制' : '复制消息'}
+            title={copied ? t('Copied') : t('Copy message')}
+            aria-label={copied ? t('Copied') : t('Copy message')}
           >
             {copied ? (
               <>
                 <LuCheck className="h-3 w-3 text-emerald-600 dark:text-emerald-400" />
                 <span className="text-emerald-600 dark:text-emerald-400">
-                  已复制
+                  {t('Copied')}
                 </span>
               </>
             ) : (
@@ -200,12 +201,12 @@ export function UserMessage({
             >
               {isExpanded ? (
                 <>
-                  收起
+                  {t('Collapse')}
                   <LuChevronUp className="h-3 w-3" />
                 </>
               ) : (
                 <>
-                  展开全部
+                  {t('Expand all')}
                   <LuChevronDown className="h-3 w-3" />
                 </>
               )}
@@ -217,14 +218,14 @@ export function UserMessage({
               type="button"
               onClick={() => void copy()}
               className="inline-flex items-center gap-0.5 rounded text-xs text-agent-muted-foreground opacity-0 transition-all duration-200 hover:text-agent-foreground focus:opacity-100 group-hover/message:opacity-100"
-              title={copied ? '已复制' : '复制消息'}
-              aria-label={copied ? '已复制' : '复制消息'}
+              title={copied ? t('Copied') : t('Copy message')}
+              aria-label={copied ? t('Copied') : t('Copy message')}
             >
               {copied ? (
                 <>
                   <LuCheck className="h-3 w-3 text-emerald-600 dark:text-emerald-400" />
                   <span className="text-emerald-600 dark:text-emerald-400">
-                    已复制
+                    {t('Copied')}
                   </span>
                 </>
               ) : (