@steerable/agent-shell-web 0.6.52 → 0.6.55

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@steerable/agent-shell-web",
-  "version": "0.6.52",
+  "version": "0.6.55",
   "type": "module",
   "description": "Steerable framework — product-neutral renderer SPA source for @steerable/agent-shell (React + Vite). Consumed by product web entry points via the `@/` alias (anchored at this package's src/) and the createProductViteConfig factory. Published as a source package (src/), plus the compiled vite.base config factory (vite.base.js + .d.ts) for Node-side config loading.",
   "license": "Apache-2.0",
@@ -45,8 +45,8 @@
     "react-router-dom": "^6.30.0",
     "rehype-raw": "^7.0.0",
     "remark-gfm": "^4.0.1",
-    "@steerable/agent-protocol": "0.6.52",
-    "@steerable/agent-ui": "0.6.52"
+    "@steerable/agent-protocol": "0.6.55",
+    "@steerable/agent-ui": "0.6.55"
   },
   "devDependencies": {
     "@tailwindcss/vite": "^4.3.0",
@@ -59,7 +59,7 @@
     "typescript": "^5.8.3",
     "vite": "^5.4.21",
     "vitest": "^3.2.4",
-    "@steerable/pack-sdk": "0.6.52"
+    "@steerable/pack-sdk": "0.6.55"
   },
   "scripts": {
     "gen": "echo agent-shell-web",

package/src/brand.ts

@@ -28,7 +28,7 @@ export const BRAND_TITLE: string =
  * 空字符串表示不显示这句。未 define 时用这句默认。
  */
 export const BRAND_HOME_HINT: string =
-  import.meta.env.VITE_BRAND_HOME_HINT ?? '输入消息，直接开始一段新对话。';
+  import.meta.env.VITE_BRAND_HOME_HINT ?? 'Type a message to start a new chat.';
 
 /** shell 默认 logo（Steerable 舵轮标）；包品牌 logo 由包 web 模块注册覆盖。 */
 let brandLogoUrl: string = shellLogoUrl;

package/src/components/AgentSidebar.tsx

@@ -117,6 +117,7 @@ import {
   useAppRelease,
 } from "@/components/SidebarRelease";
 import { CreateProjectModal } from "@/components/CreateProjectModal";
+import { t } from "@/i18n";
 
 function placeProjectMenu(anchor: HTMLElement): { top: number; left: number } {
   const box = anchor.getBoundingClientRect();
@@ -169,7 +170,7 @@ function ProjectOverflowMenu({
             <span className="min-w-0 truncate">{project.name}</span>
           </div>
           <div className="mt-0.5 pl-[22px] text-[10px] text-agent-muted-foreground">
-            {chatCount} 个会话
+            {t("Chats: {count}", { count: chatCount })}
           </div>
           <div
             className="mt-0.5 truncate pl-[22px] font-mono text-[10px] text-agent-muted-foreground/70"
@@ -182,22 +183,22 @@ function ProjectOverflowMenu({
         <button
           type="button"
           role="menuitem"
-          title="重命名项目"
+          title={t("Rename project")}
           onClick={onRename}
           className="flex w-full items-center gap-2 rounded-lg px-2 py-1.5 text-left text-xs text-agent-foreground hover:bg-agent-foreground/5"
         >
           <LuPencil className="h-3.5 w-3.5 shrink-0 text-agent-muted-foreground" />
-          重命名
+          {t("Rename")}
         </button>
         <button
           type="button"
           role="menuitem"
-          title="编辑项目"
+          title={t("Edit project")}
           onClick={onChangeFolder}
           className="flex w-full items-center gap-2 rounded-lg px-2 py-1.5 text-left text-xs text-agent-foreground hover:bg-agent-foreground/5"
         >
           <LuFolderOpen className="h-3.5 w-3.5 shrink-0 text-agent-muted-foreground" />
-          编辑项目
+          {t("Edit project")}
         </button>
         {onReveal && (
         <button
@@ -215,12 +216,12 @@ function ProjectOverflowMenu({
         <button
           type="button"
           role="menuitem"
-          title="删除项目（会话保留为无项目对话）"
+          title={t("Delete project (its chats stay as chats without a project)")}
           onClick={onDelete}
           className="flex w-full items-center gap-2 rounded-lg px-2 py-1.5 text-left text-xs text-agent-foreground hover:bg-agent-destructive/10"
         >
           <LuTrash2 className="h-3.5 w-3.5 shrink-0" />
-          删除项目
+          {t("Delete project")}
         </button>
       </div>
     </>,
@@ -644,7 +645,7 @@ export function AgentSidebar({
         const { displayTitle, isAutomation } = parseChatTitle(chat.title);
         return {
           id: chat.id,
-          title: displayTitle || "新会话",
+          title: displayTitle || t("New conversation"),
           isAutomation,
           isPinned: chat.isPinned,
           sortDate,
@@ -710,7 +711,7 @@ export function AgentSidebar({
         if (!map.has(label)) {
           map.set(label, {
             label,
-            priority: getDateGroupPriority(label),
+            priority: getDateGroupPriority(chat.sortDate),
             items: [],
           });
         }
@@ -746,7 +747,7 @@ export function AgentSidebar({
         await setChatPinned(id, nextPinned);
         await refreshChats();
       } catch (err) {
-        console.error("切换会话置顶失败:", err);
+        console.error("Failed to toggle chat pin:", err);
       } finally {
         setPinningChatId(null);
       }
@@ -787,22 +788,24 @@ export function AgentSidebar({
               : "text-agent-muted-foreground hover:bg-agent-foreground/5 hover:text-agent-foreground",
           ].join(" ")}
           title={
-            chat.isAutomation ? `[由自动化触发] ${chat.title}` : chat.title
+            chat.isAutomation
+              ? t("[Triggered by automation] {title}", { title: chat.title })
+              : chat.title
           }
         >
           {needsUserInput ? (
             <span
               className="flex shrink-0 items-center justify-center text-amber-500 dark:text-amber-400"
-              title="有问题需要输入"
-              aria-label="等待用户输入"
+              title={t("Has a question that needs your input")}
+              aria-label={t("Waiting for user input")}
             >
               <LuCircleHelp className="h-3.5 w-3.5 animate-pulse" />
             </span>
           ) : isStreaming ? (
             <span
               className="flex shrink-0 items-center justify-center text-agent-foreground/70"
-              title="正在对话中"
-              aria-label="正在生成"
+              title={t("Conversation in progress")}
+              aria-label={t("Generating")}
             >
               <LuLoaderCircle className="h-3.5 w-3.5 animate-spin" />
             </span>
@@ -810,7 +813,7 @@ export function AgentSidebar({
           {chat.isAutomation && (
             <LuCloudCog
               className="h-3 w-3 shrink-0 text-agent-muted-foreground"
-              aria-label="由自动化触发"
+              aria-label={t("Triggered by automation")}
             />
           )}
           <span className="min-w-0 truncate leading-none">{chat.title}</span>
@@ -832,8 +835,8 @@ export function AgentSidebar({
             }}
             disabled={isPinning}
             className="flex h-6 w-6 items-center justify-center rounded-full text-agent-foreground/70 transition-all duration-200 hover:bg-agent-foreground/10 hover:text-agent-foreground disabled:cursor-not-allowed"
-            title={chat.isPinned ? "取消置顶" : "置顶会话"}
-            aria-label={chat.isPinned ? "取消置顶" : "置顶会话"}
+            title={chat.isPinned ? t("Unpin") : t("Pin chat")}
+            aria-label={chat.isPinned ? t("Unpin") : t("Pin chat")}
             data-testid="sidebar-chat-pin"
           >
             {chat.isPinned ? (
@@ -850,8 +853,8 @@ export function AgentSidebar({
             }}
             disabled={isDeleting}
             className="flex h-6 w-6 items-center justify-center rounded-full text-agent-foreground/70 transition-all duration-200 hover:bg-agent-foreground/10 hover:text-agent-destructive disabled:cursor-not-allowed disabled:opacity-100"
-            title="删除会话"
-            aria-label="删除会话"
+            title={t("Delete chat")}
+            aria-label={t("Delete chat")}
             data-testid="sidebar-chat-delete"
           >
             <LuTrash2
@@ -917,8 +920,8 @@ export function AgentSidebar({
             type="button"
             onClick={onCollapse}
             className="flex h-7 w-7 items-center justify-center rounded-full text-agent-muted-foreground transition-colors duration-200 hover:bg-agent-foreground/5 hover:text-agent-foreground"
-            title="收起侧边栏"
-            aria-label="收起侧边栏"
+            title={t("Collapse sidebar")}
+            aria-label={t("Collapse sidebar")}
           >
             <LuPanelLeftClose className="h-3.5 w-3.5" />
           </button>
@@ -938,11 +941,11 @@ export function AgentSidebar({
                 ? "bg-agent-foreground/10 font-medium text-agent-foreground"
                 : "text-agent-muted-foreground hover:bg-agent-foreground/5 hover:text-agent-foreground",
             ].join(" ")}
-            title="新建对话"
+            title={t("Start a new chat")}
             data-testid="sidebar-new-chat"
           >
             <LuSquarePen className="h-3.5 w-3.5" />
-            <span>新对话</span>
+            <span>{t("New chat")}</span>
           </button>
           {pluginsAvailable && (
           <button
@@ -954,11 +957,11 @@ export function AgentSidebar({
                 ? "bg-agent-foreground/10 font-medium text-agent-foreground"
                 : "text-agent-muted-foreground hover:bg-agent-foreground/5 hover:text-agent-foreground",
             ].join(" ")}
-            title="插件"
+            title={t("Plugins")}
             data-testid="sidebar-plugins"
           >
             <LuBlocks className="h-3.5 w-3.5" />
-            <span>插件</span>
+            <span>{t("Plugins")}</span>
           </button>
           )}
         </div>
@@ -970,7 +973,7 @@ export function AgentSidebar({
           {isChatLoading && chats.length === 0 && projects.length === 0 ? (
             <div className="flex items-center justify-center py-4 text-xs text-agent-muted-foreground">
               <LuLoaderCircle className="mr-1.5 h-3 w-3 animate-spin" />
-              加载中...
+              {t("Loading...")}
             </div>
           ) : (
             <>
@@ -988,7 +991,7 @@ export function AgentSidebar({
                     }}
                     className="flex flex-1 min-w-0 items-center gap-1 text-left font-medium text-agent-muted-foreground hover:text-agent-foreground"
                   >
-                    <span>置顶</span>
+                    <span>{t("Pinned")}</span>
                     {isPinnedExpanded ? (
                       <LuChevronDown className="h-3 w-3 shrink-0 opacity-70" />
                     ) : (
@@ -1018,7 +1021,7 @@ export function AgentSidebar({
                       }}
                       className="flex flex-1 min-w-0 items-center gap-1 text-left font-medium text-agent-muted-foreground hover:text-agent-foreground"
                     >
-                      <span>项目</span>
+                      <span>{t("Projects")}</span>
                       {isProjectsExpanded ? (
                         <LuChevronDown className="h-3 w-3 shrink-0 opacity-70" />
                       ) : (
@@ -1033,8 +1036,8 @@ export function AgentSidebar({
                           setCreateProjectOpen(true);
                         }}
                         className="flex h-5 w-5 items-center justify-center rounded-full text-agent-muted-foreground opacity-0 transition-opacity duration-200 hover:bg-agent-foreground/10 hover:text-agent-foreground group-hover/section:opacity-100 focus:opacity-100"
-                        title="新建项目"
-                        aria-label="新建项目"
+                        title={t("New project")}
+                        aria-label={t("New project")}
                       >
                         <LuFolderPlus className="h-3.5 w-3.5" />
                       </button>
@@ -1044,7 +1047,7 @@ export function AgentSidebar({
                     <div className="space-y-0.5">
                       {projectGroups.length === 0 ? (
                         <div className="px-2.5 py-1 text-[11px] text-agent-muted-foreground/60">
-                          暂无项目
+                          {t("No projects")}
                         </div>
                       ) : (
                         projectGroups.map(({ project, items }) => (
@@ -1103,13 +1106,13 @@ export function AgentSidebar({
                                       type="button"
                                       onClick={() => handleOpenNewChat(project.id)}
                                       className="flex h-5 w-5 items-center justify-center rounded-full text-agent-muted-foreground hover:bg-agent-foreground/10 hover:text-agent-foreground"
-                                      title="在此项目下新建对话"
+                                      title={t("New chat in this project")}
                                     >
                                       <LuSquarePen className="h-3 w-3" />
                                     </button>
                                     <button
                                       type="button"
-                                      aria-label="项目菜单"
+                                      aria-label={t("Project menu")}
                                       aria-expanded={projectMenu?.id === project.id}
                                       onClick={(event) => {
                                         const button = event.currentTarget;
@@ -1120,7 +1123,7 @@ export function AgentSidebar({
                                         );
                                       }}
                                       className="flex h-5 w-5 items-center justify-center rounded-full text-agent-muted-foreground hover:bg-agent-foreground/10 hover:text-agent-foreground"
-                                      title="项目菜单"
+                                      title={t("Project menu")}
                                     >
                                       <LuEllipsis className="h-3 w-3" />
                                     </button>
@@ -1132,7 +1135,7 @@ export function AgentSidebar({
                               <div className="space-y-0.5 pl-2">
                                 {items.length === 0 ? (
                                   <div className="px-2.5 py-0.5 text-[11px] text-agent-muted-foreground/60">
-                                    暂无会话 — hover 项目名点 + 新建
+                                    {t("No chats yet. Hover the project name and click + to start one.")}
                                   </div>
                                 ) : (
                                   items.map((chat) => renderChatRow(chat))
@@ -1160,7 +1163,7 @@ export function AgentSidebar({
                     }}
                     className="flex flex-1 min-w-0 items-center gap-1 text-left font-medium text-agent-muted-foreground hover:text-agent-foreground"
                   >
-                    <span>最近</span>
+                    <span>{t("Recent")}</span>
                     {isRecentsExpanded ? (
                       <LuChevronDown className="h-3 w-3 shrink-0 opacity-70" />
                     ) : (
@@ -1175,8 +1178,8 @@ export function AgentSidebar({
                         handleOpenNewChat();
                       }}
                       className="flex h-5 w-5 items-center justify-center rounded-full text-agent-muted-foreground hover:bg-agent-foreground/10 hover:text-agent-foreground"
-                      title="新对话"
-                      aria-label="新对话"
+                      title={t("New chat")}
+                      aria-label={t("New chat")}
                     >
                       <LuSquarePen className="h-3 w-3" />
                     </button>
@@ -1188,11 +1191,11 @@ export function AgentSidebar({
                       chats.length === 0 && projects.length === 0 ? (
                         <div className="flex flex-col items-center gap-1.5 py-4 text-xs text-agent-muted-foreground">
                           <LuMessageSquare className="h-4 w-4 text-agent-muted-foreground/60" />
-                          暂无会话
+                          {t("No chats yet")}
                         </div>
                       ) : (
                         <div className="px-2.5 py-1 text-[11px] text-agent-muted-foreground/60">
-                          暂无会话
+                          {t("No chats yet")}
                         </div>
                       )
                     ) : (
@@ -1217,12 +1220,12 @@ export function AgentSidebar({
               {isLoadingMoreChats ? (
                 <span className="inline-flex items-center gap-1">
                   <LuLoaderCircle className="h-3 w-3 animate-spin" />
-                  加载更多...
+                  {t("Loading more...")}
                 </span>
               ) : hasMoreChats ? (
-                "继续下滑加载更多"
+                t("Scroll down to load more")
               ) : (
-                `共 ${normalizedChats.length} 个会话`
+                t("Total chats: {count}", { count: normalizedChats.length })
               )}
             </div>
           )}
@@ -1250,11 +1253,11 @@ export function AgentSidebar({
               ? "bg-agent-foreground/10 font-medium text-agent-foreground"
               : "text-agent-muted-foreground hover:bg-agent-foreground/5 hover:text-agent-foreground",
           ].join(" ")}
-          title="设置"
+          title={t("Settings")}
           data-testid="sidebar-llm-settings"
         >
           <LuSettings className="h-3.5 w-3.5" />
-          <span>设置</span>
+          <span>{t("Settings")}</span>
           <SidebarVersionLabel release={release} />
         </button>
         )}
@@ -1277,7 +1280,7 @@ export function AgentSidebar({
               project={project}
               chatCount={chatCount}
               anchor={projectMenu.anchor}
-              revealLabel={isMac ? "在访达中显示" : "在文件管理器中显示"}
+              revealLabel={isMac ? t("Show in Finder") : t("Show in file manager")}
               onClose={closeProjectMenu}
               onRename={() => {
                 setProjectMenu(null);
@@ -1306,10 +1309,12 @@ export function AgentSidebar({
 
       <ConfirmDialog
         open={pendingDeleteChat !== null}
-        title="删除会话"
+        title={t("Delete chat")}
         description={
           pendingDeleteChat
-            ? `确定删除「${pendingDeleteChat.title}」？此操作无法撤销。`
+            ? t("Delete \"{title}\"? This cannot be undone.", {
+                title: pendingDeleteChat.title,
+              })
             : ""
         }
         pending={
@@ -1324,13 +1329,16 @@ export function AgentSidebar({
       />
       <ConfirmDialog
         open={pendingDeleteProject !== null}
-        title="删除项目"
+        title={t("Delete project")}
         description={
           pendingDeleteProject
-            ? `确定删除项目「${pendingDeleteProject.name}」？会话会保留为无项目对话。`
+            ? t(
+                "Delete project \"{name}\"? Its chats will stay as chats without a project.",
+                { name: pendingDeleteProject.name },
+              )
             : ""
         }
-        confirmLabel="删除项目"
+        confirmLabel={t("Delete project")}
         pending={
           pendingDeleteProject !== null &&
           deletingProjectId === pendingDeleteProject.id

package/src/components/ChatHeader.tsx

@@ -19,6 +19,7 @@ import {
   saveJsonFile,
 } from '@/lib/portable';
 import { hostToolChrome } from '@/lib/host-tools';
+import { t } from '@/i18n';
 
 interface ChatHeaderProps {
   chat: LocalChat | null;
@@ -147,8 +148,8 @@ export function ChatHeader({
   useEffect(() => {
     if (!branchMenuOpen) return;
     const onPointerDown = (e: MouseEvent) => {
-      const t = e.target as Node;
-      if (buttonRef.current?.contains(t) || menuRef.current?.contains(t)) return;
+      const target = e.target as Node;
+      if (buttonRef.current?.contains(target) || menuRef.current?.contains(target)) return;
       setBranchMenuOpen(false);
     };
     document.addEventListener('mousedown', onPointerDown);
@@ -166,7 +167,7 @@ export function ChatHeader({
           >
             {!branches || branchCount === 0 ? (
               <div className="px-2.5 py-1.5 text-xs text-agent-muted-foreground">
-                暂无分支 — 重新生成回复后，旧版本会保留在这里。
+                {t('No branches yet. After you regenerate a reply, the old version stays here.')}
               </div>
             ) : (
               <>
@@ -201,7 +202,7 @@ export function ChatHeader({
                     data-action="branch-tree"
                   >
                     <LuListTree className="h-3 w-3 shrink-0" />
-                    查看完整分支树
+                    {t('View full branch tree')}
                   </button>
                 </div>
               </>
@@ -218,7 +219,7 @@ export function ChatHeader({
           className="break-words text-xs font-medium text-agent-foreground"
           title={chat?.title}
         >
-          {chat?.title ?? '未选择对话'}
+          {chat?.title ?? t('No chat selected')}
         </span>
       </div>
       {chat && isPortableEnabled() && (
@@ -229,7 +230,7 @@ export function ChatHeader({
             setExporting(true);
             setExportError(null);
             void fetchChatDocument(chat.id)
-              .then((doc) => saveJsonFile(safeDownloadName(chat.title, '对话'), doc))
+              .then((doc) => saveJsonFile(safeDownloadName(chat.title, t('Chat')), doc))
               .then((saved) => {
                 if (!saved) return;
               })
@@ -237,12 +238,12 @@ export function ChatHeader({
               .finally(() => setExporting(false));
           }}
           className="flex h-7 shrink-0 items-center gap-1 rounded-full px-2 text-xs text-agent-muted-foreground transition-colors hover:bg-agent-foreground/5 hover:text-agent-foreground disabled:opacity-60"
-          title={exportError ?? '导出此对话'}
-          aria-label="导出此对话"
+          title={exportError ?? t('Export this chat')}
+          aria-label={t('Export this chat')}
           data-testid="header-export-chat"
         >
           <LuDownload className="h-3.5 w-3.5" />
-          {exportError ? '导出失败' : exporting ? '导出中' : '导出'}
+          {exportError ? t('Export failed') : exporting ? t('Exporting') : t('Export')}
         </button>
       )}
       {chat && onBranchSwitched && (
@@ -252,8 +253,8 @@ export function ChatHeader({
             type="button"
             onClick={() => void openBranchMenu()}
             className="flex h-7 items-center gap-1 rounded-full px-2 text-xs text-agent-muted-foreground transition-colors hover:bg-agent-foreground/5 hover:text-agent-foreground"
-            title="会话分支（重新生成产生的分叉）"
-            aria-label="会话分支"
+            title={t('Chat branches (forks created by regenerating)')}
+            aria-label={t('Chat branches')}
             data-action="branches"
           >
             <LuGitBranch className="h-3.5 w-3.5" />
@@ -282,7 +283,11 @@ export function ChatHeader({
               : 'w-7 justify-center text-agent-muted-foreground hover:bg-agent-foreground/5 hover:text-agent-foreground'
           }`}
           title={taskButtonTitle(taskBadge, taskShortcut)}
-          aria-label={taskBadge ? `后台任务：${taskBadge.title}` : '后台任务'}
+          aria-label={
+            taskBadge
+              ? t('Background tasks: {title}', { title: taskBadge.title })
+              : t('Background tasks')
+          }
           data-action="tasks"
           data-task-state={taskBadge?.state}
           data-task-shortcut={taskShortcut?.kind}
@@ -308,7 +313,11 @@ export function ChatHeader({
                   ? 'bg-agent-foreground/10 text-agent-foreground'
                   : 'text-agent-muted-foreground hover:bg-agent-foreground/5 hover:text-agent-foreground'
               }`}
-              title={`${open ? '关闭' : '打开'}${slot.title}`}
+              title={
+                open
+                  ? t('Close {name}', { name: slot.title })
+                  : t('Open {name}', { name: slot.title })
+              }
               aria-label={slot.title}
               aria-pressed={open}
               data-action={`chat-slot-${slot.slotId}`}
@@ -328,8 +337,12 @@ export function ChatHeader({
               ? 'bg-agent-foreground/10 text-agent-foreground'
               : 'text-agent-muted-foreground hover:bg-agent-foreground/5 hover:text-agent-foreground'
           }`}
-          title={`${rightPanel === 'terminal' ? '关闭' : '打开'}终端面板 (${isMac ? '⌘T' : 'Ctrl+T'})`}
-          aria-label="终端"
+          title={
+            rightPanel === 'terminal'
+              ? t('Close terminal panel ({shortcut})', { shortcut: isMac ? '⌘T' : 'Ctrl+T' })
+              : t('Open terminal panel ({shortcut})', { shortcut: isMac ? '⌘T' : 'Ctrl+T' })
+          }
+          aria-label={t('Terminal')}
           aria-pressed={rightPanel === 'terminal'}
           data-action="terminal"
           data-testid="header-terminal"
@@ -386,14 +399,16 @@ function describeTaskBadge(summary: ChatTaskSummary): TaskBadge | null {
   if (summary.total === 0) return null;
 
   const detail = [
-    summary.running > 0 ? `${summary.running} 个运行中` : null,
-    summary.blocked > 0 ? `${summary.blocked} 个等依赖` : null,
-    summary.needsReview > 0 ? `${summary.needsReview} 个待合并` : null,
-    summary.failed > 0 ? `${summary.failed} 个失败` : null,
+    summary.running > 0 ? t('{count} in progress', { count: summary.running }) : null,
+    summary.blocked > 0 ? t('{count} waiting on dependencies', { count: summary.blocked }) : null,
+    summary.needsReview > 0 ? t('{count} awaiting merge', { count: summary.needsReview }) : null,
+    summary.failed > 0 ? t('{count} failed', { count: summary.failed }) : null,
   ]
     .filter((part) => part !== null)
-    .join('，');
-  const title = `共 ${summary.total} 个后台任务${detail ? `（${detail}）` : ''}`;
+    .join(t(', '));
+  const title = detail
+    ? t('Background tasks: {total} ({detail})', { total: summary.total, detail })
+    : t('Background tasks: {total}', { total: summary.total });
 
   // 等依赖的任务也算在推进中：依赖跑完它会自动点火，用户不用做任何事。
   const active = summary.running + summary.blocked;
@@ -459,11 +474,12 @@ function taskButtonTitle(
   badge: TaskBadge | null,
   shortcut: TaskShortcut | null,
 ): string {
-  const base = badge?.title ?? '后台任务（跨轮运行，可查看结果与合并 worktree）';
+  const base =
+    badge?.title ?? t('Background tasks (run across turns; view results and merge worktrees)');
   if (!shortcut) return base;
   return shortcut.kind === 'process'
-    ? `${base} · 点击查看推理过程`
-    : `${base} · 点击处理 worktree`;
+    ? t('{base} · Click to view the reasoning', { base })
+    : t('{base} · Click to handle the worktree', { base });
 }
 
 /** Pin the branch menu to the trigger, clamped inside the chat panel so
@@ -505,7 +521,7 @@ function BranchRow({
       data-branch-row
       data-active={active || undefined}
     >
-      <span className="min-w-0 flex-1 truncate">{label || '(空分支)'}</span>
+      <span className="min-w-0 flex-1 truncate">{label || t('(empty branch)')}</span>
       {active && (
         <LuCheck className="h-3 w-3 shrink-0 text-emerald-600 dark:text-emerald-400" />
       )}

package/src/components/ConfirmDialog.tsx

@@ -3,6 +3,7 @@
  */
 import { useEffect, useId } from 'react';
 import { createPortal } from 'react-dom';
+import { t } from '@/i18n';
 
 export interface ConfirmDialogProps {
   open: boolean;
@@ -19,7 +20,7 @@ export function ConfirmDialog({
   open,
   title,
   description,
-  confirmLabel = '删除',
+  confirmLabel = t('Delete'),
   pending = false,
   onCancel,
   onConfirm,
@@ -71,7 +72,7 @@ export function ConfirmDialog({
             className="h-9 rounded-full px-4 text-sm text-agent-muted-foreground transition-colors hover:bg-agent-muted hover:text-agent-foreground disabled:opacity-40"
             data-testid={`${testId}-cancel`}
           >
-            取消
+            {t('Cancel')}
           </button>
           <button
             type="button"
@@ -80,7 +81,7 @@ export function ConfirmDialog({
             className="h-9 rounded-full bg-agent-destructive px-4 text-sm font-medium text-white transition-opacity hover:opacity-90 disabled:opacity-40"
             data-testid={`${testId}-confirm`}
           >
-            {pending ? '删除中…' : confirmLabel}
+            {pending ? t('Deleting…') : confirmLabel}
           </button>
         </div>
       </div>