chore: v0.8.2 — 版本升级（跟随 DSH 的 i18n）

- host 半挂 ctx.on('session/event')（api-proxy 同款 API），镜像 task_output
  的 tool/call + tool/result 活事件（每会话 200 条有界环，无关结果不缓存）
- tasks.output 回放合并「store 事件日志 + 活事件镜像」，按 seq 去重排序配对
- 零 DSH 写入：会话 store 在宿主重启后可能冻结在再水合边界（持久化文件
  停在重启时刻），活事件只走 append 推送链；镜像绕开该滞后
- 测试：新增镜像用例（live 事件、跨会话隔离、种子+镜像合并不双计），
  全量 373 通过

AGENTS.md

@@ -6,6 +6,14 @@ better-sidebar 从 v0.4.0 起暴露 `ctx.betterSidebar` 服务（Cordis context
 
 ---
 
+## 0. 仓库硬约束（所有本仓库插件必须遵守）
+
+- **禁止修改 DeepSeek Harness (DSH) 源码**：对官方源码 checkout（`~/.dsh/source/current`）零写入——不得改 harness 包、不得把 harness 改动提交到它的分支。
+- **挂载只走 `cordis.patch.yml` + profile 机制**（`~/.dsh/profiles/<profile>/`），插件永远作为独立包被 profile 引用，不反向侵入 DSH。
+- 需要 harness 没有的能力时，用 DSH **现成的只读/公开 API** 或插件自有路由实现（参考 §7 的 `tasks.output` 事件回放：读会话事件日志而非动注册表）；如果确实做不到，先向用户说明取舍，而不是直接改 DSH。
+
+---
+
 ## 1. 服务定位
 
 - **服务名**：`betterSidebar`（即 `ctx.betterSidebar`）
@@ -399,6 +407,7 @@ interface BetterSidebarService {
 | **host 半无此服务** | `ctx.betterSidebar` 只在 client 侧存在；host 半需要 better-sidebar 数据走 `/sidebar/api/*` HTTP 路由 |
 | **portal 限制** | 整面板 slot 由 ui-layout 独占，外部 tab 只能进入 better-sidebar 的 portal 内部，无法全屏替换 |
 | **id 冲突** | `registerTab` / `registerFileViewer` 对重复 id 抛错；建议用包前缀（`my-plugin:xxx`） |
+| **i18n 跟随** | 侧边栏界面文案跟随 DSH 的 `ctx.locale`（`@deepseek-ai/dsh-client-locale`）：词典注册在 `betterSidebar` 命名空间，语言偏好（Host-backed `locale.preference`）与浏览器语言不一致时以 DSH 为准并实时切换；locale 服务缺失时回退浏览器语言。插件自身的 `t()`（`src/client/locales.ts`）由 `apply()` 挂接服务；消费插件**不要**依赖此内部函数——标题等字段传字符串或 `() => string` 即可（i18n 友好） |
 | **懒加载 chunk** | 内置重依赖（Univer/xterm/CodeMirror/pptx/docx）在独立 bundle（`lib/client-<name>.js`）中，经 `/sidebar/bundle` 路由按需下发；每个脚本把 factory 赋到插件自有全局注册表 `globalThis.__dshChunks__[<name>]`，由 `src/client/chunk-loader.ts` 用自定义 require（externals 经 `__DSH_MODULES__` seed 分支解析）物化——**不经过** `__ModuleLoader__` 注册；**核心 bundle 禁止静态 import `src/client/chunks/*`**（会把库拖回启动路径）；对消费插件透明——懒加载只作用于内置 descriptor，`component` 契约（`(props) => ReactNode` 纯渲染函数）不变 |
 
 ---

README.md

@@ -1,8 +1,14 @@
 # dsh-better-sidebar
 
-> DeepSeek Harness Web GUI 的 **VSCode 风格侧边栏**插件：文件管理、编辑预览、内嵌浏览器、真实终端、Git 面板、Subagent 页面——**右侧栏 + 底部面板双工作台**，一个插件全部搞定。
+> 一个插件，一套完整工作台：
+>
+> 文件管理、编辑预览、内嵌浏览器、真实终端、Git 面板、任务管理页——**右侧栏 + 底部面板双工作台**，一个插件全部搞定。
+>
+> 支持Tab窗口随意拖拽，支持三方拓展注册新Tab页面和文件预览
 
-<img width="4632" height="2720" alt="image" src="https://github.com/user-attachments/assets/39d86636-7654-412f-86ea-c60a2d5f20f0" />
+https://github.com/user-attachments/assets/23187822-047e-45cc-b480-fe997bd55b86
+
+<img width="2630" height="1794" alt="6c4293e1bec2e935031bf0e986d6ec65" src="https://github.com/user-attachments/assets/dfdb875e-a1a8-4d4b-8340-353736b1708f" />
 
 ## ✨ 功能一览
 
@@ -12,13 +18,14 @@
 - **🌐 浏览器**：内嵌网页浏览 tab（多开），后退/前进/刷新 +「在浏览器中打开」；页面在**沙箱 iframe** 中运行（不透明源：无法访问界面数据与本地文件，拒绝 localhost 等本机地址），界面实时显示沙箱状态、可临时解锁（关闭时红色警示）；被站点拒绝嵌入（X-Frame-Options）时显示原因面板；聊天/界面里的 http(s) 外链默认在侧边栏打开（侧边栏折叠时自动展开面板）
 - **💻 终端**：xterm.js + node-pty 真实 shell（每会话 3 个 UI 上限）、Tab 保活重连回放；可选为模型注入 8 个 `terminal_*` 工具
 - **🌿 Git 面板**：真 diff + VSCode 式 diff tab、懒加载历史、右键暂存/放弃/提交/还原/捡取
-- **🧩 Subagent 页面**：主会话完整 agent 拓扑、点击直达执行记录、实时工具调用轮询、新子代理自动展开
+- **🧩 任务管理页**：主会话完整 agent 拓扑、点击直达执行记录、实时工具调用轮询、新子代理自动展开；**同页显示后台命令**（当前树全部任务，bash/pwsh 类型徽标 + 退出码，点击查看实时输出——自动跟随底部、非消费 peek，不干扰模型的 `task_output`；两击确认可强制终止）
 - **🪟 底部面板**：独立的第二个工作台（与右侧栏同类的标签页），只挤占中间 Agent 输出区、不覆盖左右侧边栏；**首次展开自动开一个新终端**（终端卡片二级设置可关）；右上角 x 一键折叠
 - **📱 移动端**：视口 < 768px（真正的移动端宽度，不对齐宿主 1024 断点）时只显示右侧栏——进入窄屏时底部面板的标签页**直接并入右侧栏标签条**，右上角只剩一枚开关，面板为全宽抽屉；新会话默认收起，聊天里点文件/外链自动展开，不挤压对话区
 - **🔧 分栏工作台**：拖 Tab 拆分/合并分栏（可**跨面板拖 Tab**）、分隔线调比例；右上角持久按钮簇（底栏 + 侧拉 glyph）折叠/展开两个面板；两面板共享拐角双向拖动调节尺寸，拖动 rAF 直写 DOM 保持流畅
 - **🔁 会话隔离**：布局/分栏/Tab/两面板状态按会话持久化（localStorage），陈旧状态自动净化；聊天「产出文件」改在侧边栏打开（面板折叠时自动展开）
 - **⚙️ 声明式设置**：设置页「侧边卡片」分区按注册表渲染功能清单（小卡片网格，高亮 = 启用），每项可独立开/关；二级设置（子代理自动展开、终端工具、底部面板首展自动开终端、沙箱开关等）经齿轮按钮在原生弹窗中编辑
 - **🔌 服务化**：暴露 `ctx.betterSidebar` 服务，其他插件可注册侧边栏 tab 与文件预览器（内置 7 tab + 9 viewer 也走同一服务，详见 [AGENTS.md](./AGENTS.md)）
+- **🌏 多语言**：界面文案跟随 DSH 的语言设置（zh/en）实时切换——Host 偏好优先于浏览器语言，词典注册进 DSH 的 i18n 命名空间；切换语言无需刷新
 
 ## ⌨️ 快捷键
 

docs/plans/2026-08-12-follow-dsh-i18n-design.md

@@ -0,0 +1,60 @@
+# 跟随 DSH 的 i18n（ctx.locale）设计
+
+> 2026-08-12 · 随 v0.8.2 发布
+
+## 背景
+
+better-sidebar 的界面文案（约 260 处 `t()` 调用、28 个文件）此前自带 zh/en 词典并直接读
+`navigator.language`（`src/client/locales.ts` 头注释曾明言"renders outside the slot
+system's locale seat, so it reads the browser language directly"）。问题：
+
+- DSH 的语言偏好是 Host-backed（`locale.preference`，存于 `$DSH_HOME/settings.yaml`），
+  用户设置与浏览器语言不一致时侧边栏不跟随（如偏好 zh、浏览器 en 时侧边栏仍为英文）。
+- 词典游离在 DSH 的 i18n 注册表之外，无法参与公共命名空间回退等机制。
+
+DSH 的 i18n 系统（`@deepseek-ai/dsh-client-locale`）：
+
+- `ctx.locale` 服务（client-only）：`getSnapshot()/subscribe()` 是 LocaleFace
+  （uSES 安全，revision 递增），`locale/change` 事件在切换时触发；
+- `ctx.locale.register(ns, {zh, en})` 命名空间词典注册（typed 变体要求合并
+  `LocaleNamespaceMap`）；查询链 ns → common → zh → key；
+- 所有 DSH 客户端包以 `inject = [..., 'locale']` 消费。
+
+## 设计决策
+
+1. **结构镜像服务**（仓库惯例，`src/context-types.ts` 头注释）：本插件解析在 DSH
+   monorepo 单一 cordis 实例之外，上游 `declare module 'cordis'` augmentation 不达此
+   Context。新增 `SidebarLocaleService` 结构脸（只镜像用到的切片：
+   `getSnapshot` / `subscribe` / `register`），merge `Context.locale`。不引入
+   `@deepseek-ai/dsh-client-locale` 依赖、不做 value import（client bundle 纯度门）。
+2. **保留模块级 `t()`**：`t()` 被 28 个文件使用，穿 props 不可行。改为模块级 holder：
+   `apply()` 调 `attachLocale(ctx.locale)`，`t()`/`isZh()` 从 holder 读活跃 locale；
+   无 holder 时回退既有 `navigator.language` 检测（行为与改动前完全一致，也是 jsdom
+   测试与非标准组合的降级路径）。
+3. **根级重渲染触发**：侧边栏自行 `createRoot` 挂在 slot 系统之外，拿不到 `t` seat。
+   在 `Sidebar.tsx` 根组件加 `useSyncExternalStore(ctx.locale.getSnapshot/subscribe)`
+   （该文件已用此 API 订阅 sessions/store）；树内无 `React.memo`，根重渲染即整树
+   重渲染，所有渲染期 `t()` 求值读到新语言。事件期调用（intercept、api、subagent-tasks）
+   在调用时刻读当前语言，天然正确。SideCardSection 由 settings shell 渲染，shell 自身
+   订阅 locale revision（ui-settings-general 的 section rows 缓存含 locale revision），
+   自动跟随。
+4. **命名空间 `'betterSidebar'`**：`'sidebar'` 已被 DSH 的 ui-sidebar 占用。注册走
+   非类型化单语言重载 `register(ns, locale, dict)`（DSH 内 ui-permission 同款先例）；
+   键型安全由本地 `const en: Record<keyof typeof zh, string>` + 测试键集相等断言保证。
+5. **词典注册进 DSH 注册表**：`ctx.effect` 内注册 zh/en 并返回合并 disposer
+   （fiber 卸载时撤销，HMR 重激活不抛 "already registered"）。
+6. **xlsx 预览的 Univer locale pack**：`xlsx-view.tsx` 原内联 navigator 检测改走
+   `isZh()`（跟随 DSH 语言；Univer 实例在挂载时创建，语言切换不重建实例——可接受）。
+
+## 实施偏差记录
+
+- 无。计划与实施一致。
+- 版本号随 v0.8.2 发版提交（`package.json` + `dsh.plugin.json`）。
+
+## 验收
+
+- `pnpm typecheck` / `pnpm test` / `pnpm build`（纯度门）全绿；`tests/locales.spec.ts`
+  覆盖：无服务回退、attach 后跟随活跃 locale 实时切换、detach 恢复回退、占位符插值、
+  relativeTime 链路、命名空间名、zh/en 键集相等。
+- 手动：设置页切换语言 → 侧边栏全部文案实时切换；`locale.preference: zh` 且浏览器 en
+  → 侧边栏中文。

docs/plans/2026-08-12-subagent-background-tasks-design.md

@@ -0,0 +1,43 @@
+# 任务管理页后台命令区块（查看输出 + 强制终止）设计
+
+> 2026-08-12 · v0.8.0
+
+## 目标
+
+任务管理页（当前树的主代理拓扑，原「子代理」页）在拓扑树下方同页显示**当前树全部会话**（主代理 + 子代理）的后台任务：
+
+- 点击任务行，输出显示在**侧边栏底部共享 Dock**（sticky 终端式，滚动时保持可见；运行中每 2s 轮询，页面不可见时暂停；自动跟随底部）；
+- 运行中的任务行带两击确认的终止按钮；
+- **不破坏模型契约、不修改 DSH 源码**（本仓库规则：对官方源码 checkout 零写入，挂载只走 cordis.patch.yml + profile 机制）：输出查看是**模型已读输出的回放**，绝不推进 `task_output` 的读取游标。
+
+## 数据流
+
+```
+bash/tool  run_in_background → ctx.tasks.start（owner = 执行 agent）
+api-proxy  session/tasks 帧（TaskView[]，无输出）→ 客户端 tasksBySession 镜像
+SubagentView 读镜像 → collectTreeTasks(树内会话) → 行渲染（单 Dock，选中行）
+点行 → POST /sidebar/api/tasks.output（事件回放）→ 扫描属主会话 events 里
+        task_output 的 tool/call + tool/result 对 → 模型已读文本
+终止 → POST /sidebar/api/tasks.kill → ctx.tasks.kill（DSH 现成 API）
+```
+
+## 关键决策
+
+1. **输出 = 会话事件回放，零 DSH 写入**：`TaskService.read()` 是单一消费游标——UI 直接读会偷走模型 `task_output` 的字节（或读到空）。而 DSH 源码禁止修改，所以 `tasks.output` **不碰注册表**：扫描属主会话的 append-only 事件日志，取 `task_output` 调用的 `tool/call`（`arguments.task_id` 配对）与其 `tool/result`（finalize 后的文本，即模型实际收到的内容）按序拼接；`"(no new output)"` 增量与错误结果跳过；`read: false` 表示模型尚未读过。模型游标天然不被触碰。
+   - 语义代价（用户已确认接受）：面板只在模型读过之后才有内容——没有实时流。
+2. **列表不新增路由**：任务清单由 harness 的 `session/tasks` 推送镜像提供；只加 `tasks.output`（回放）与 `tasks.kill`（注册表原生 `kill`）两个路由（信任围栏与其余路由一致）。注册表缺席时 kill 降级 503（output 不需要注册表）。
+3. **终止的访问围栏**：caller 由请求的 `sessionId` 现场解析 `ctx.agents.get(sessionId)`，注册表按 owner session id 拒绝 foreign 任务；未知/foreign 统一映射 404 `task-error`。
+4. **展示范围 = 整棵树**：与页面作用域一致（拓扑即当前树）；树跨多会话时行尾显示属主标题。
+5. **单共享 Dock（大量任务的形态）**：行内展开会让列表随任务数膨胀、排序变化时面板跳动；改为一个底部 sticky Dock + 单一轮询实例，行保持紧凑、排序变动不惊吓，选中行高亮。
+6. **两击确认终止**：首次点击进入「再次点击确认」态（3s 自动解除），防止误杀长任务。
+7. **输出上限**：路由按 `readLimit`（默认 512KB）截断并置 `truncated` 标记。
+
+## 实施偏差
+
+- 曾实现 harness 侧非消费 peek 缝隙（`BashProcess.peekOutput` / `TaskService.peek`），因「禁止修改 DSH 源码」规则**整体回退**（harness 提交已 reset，checkout 恢复纯净快照），改用事件回放。
+- 宿主不新增 `@deepseek-ai/*` 依赖（`ctx.tasks`/`ctx.agents` 走结构性镜像 + 运行时 `ctx.get`，可选服务降级 503）；`ctx.sessions.get(id).events` 为只读访问。
+
+## 验证
+
+- 插件单测：tasks-routes（回放拼接/过滤/read 标志/截断/404/503 降级）；subagent-tasks 纯函数；jsdom 视图（行渲染、单 Dock 切换、关闭、两击终止、read:false 提示、大量任务、隐藏不轮询、镜像清空 hook 顺序回归 #300）。
+- 集成（真实 dsh web）：启动 `run_in_background` bash → 模型 `task_output` 读取 → `/sidebar/api/tasks.output` 返回模型已读内容 → `/sidebar/api/tasks.kill` 后进程退出、任务结算 `killed (signal: SIGTERM)`。

dsh.plugin.json

@@ -1,6 +1,6 @@
 {
   "id": "dsh-external/dsh-better-sidebar",
-  "version": "0.7.0",
+  "version": "0.8.2",
   "main": "./lib/index.js",
   "description": "VSCode 风格右侧侧边栏：文件资源管理器 / 编辑器 / 终端 / Git / 浏览器，按会话隔离。暴露服务供其他插件注册侧边栏页面和文件预览器",
   "engines": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-better-sidebar",
-  "version": "0.7.0",
+  "version": "0.8.2",
   "description": "DSH web plugin: a VSCode-like right sidebar (explorer / editor / terminal / git / browser), isolated per conversation session. Exposes a service for other plugins to register sidebar tabs and file viewers.",
   "private": true,
   "type": "module",
@@ -37,6 +37,7 @@
     "client": {
       "inject": [
         "@deepseek-ai/dsh-client-runtime",
+        "@deepseek-ai/dsh-client-locale",
         "@deepseek-ai/dsh-client-ui-slots",
         "@deepseek-ai/dsh-client-ui-conversation"
       ],

src/client/Sidebar.tsx

@@ -44,6 +44,7 @@ import type { TabDragPayload } from './TabBar.tsx'
 import { relativeTo } from './paths.ts'
 import { OrphanedTab } from './OrphanedTab.tsx'
 import { detectNewDirectSubagent } from './subagent-detect.ts'
+import { detectNewTask } from './subagent-tasks.ts'
 import { t } from './locales.ts'
 import { api, type SessionScope } from './api.ts'
 import css from './sidebar.module.css'
@@ -103,6 +104,15 @@ function buildNewTabOptions(state: SidebarState, ctx: Context, scope: SessionSco
 export function Sidebar(props: { ctx: Context; store: SidebarStore }) {
   const { ctx, store } = props
 
+  // Copy freshness: re-render the whole tree when the DSH locale switches.
+  // The module-level t() reads the active locale at call time, so a root
+  // re-render alone re-localizes every panel (no memo barriers below).
+  const localeRevision = useSyncExternalStore(
+    useMemo(() => (callback: () => void) => ctx.locale.subscribe(callback), [ctx]),
+    useCallback(() => ctx.locale.getSnapshot().active, [ctx]),
+  )
+  void localeRevision
+
   // Narrow (mobile) viewports collapse the two panels into one: the right
   // panel becomes a full-width drawer holding BOTH workbenches, the bottom
   // panel (and its toggle button) disappears, and the layout push is
@@ -241,6 +251,28 @@ export function Sidebar(props: { ctx: Context; store: SidebarStore }) {
     ctx.betterSidebar?.openTab({ type: 'subagent', title: t('subagent') })
   }, [sessionList, sessionId, store, ctx])
 
+  /**
+   * Task auto-activation: the moment a NEW background task appears for the
+   * current conversation (a task id the previous snapshot lacked), the
+   * auto-open pref is on, and the Tasks tab type is enabled, open the panel
+   * (if collapsed) and focus the Tasks page. Unlike the subagent trigger
+   * (0 → N only), ANY new task id triggers: the agent may start several
+   * tasks in one session, and each should surface. A fresh page load never
+   * triggers — its baseline starts at the current snapshot.
+   */
+  const taskBaselineRef = useRef<SidebarSessionList | undefined>(undefined)
+  useEffect(() => {
+    const prev = taskBaselineRef.current
+    taskBaselineRef.current = sessionList
+    if (sessionId === undefined || prev === undefined) return
+    if (!detectNewTask(prev, sessionList, sessionId)) return
+    if (!store.getPrefs().autoOpenTasks) return
+    if (ctx.betterSidebar?.isTabEnabled('subagent') === false) return
+    store.reduce(s => s.panelOpen ? s : togglePanel(s))
+    store.reduce(s => ({ ...s, activePane: firstLeaf(s.splits).id }))
+    ctx.betterSidebar?.openTab({ type: 'subagent', title: t('subagent') })
+  }, [sessionList, sessionId, store, ctx])
+
   /**
    * Topology jump-back: clicking a subagent node on the Subagent page calls
    * the official `openSubagent`, which switches the sidebar to that child

src/client/SubagentView.module.css

@@ -273,3 +273,275 @@
   background: var(--dsw-alias-interactive-bg-hover);
   color: var(--dsw-alias-label-primary);
 }
+
+/* ── Background-task section (below the topology tree) ────────────────── */
+
+.tasks {
+  margin-top: 10px;
+  border-top: 1px solid var(--dsw-alias-border-l2);
+  padding-top: 8px;
+}
+
+.tasksHeader {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  height: 26px;
+  padding: 0 2px;
+}
+
+.tasksTitle {
+  flex: 1;
+  min-width: 0;
+  font: var(--dsw-font-xxxs-strong-11);
+  color: var(--dsw-alias-label-secondary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.tasksCount {
+  flex: none;
+  font: var(--dsw-font-xxxs-11);
+  color: var(--dsw-alias-label-tertiary);
+}
+
+.tasksList {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+/* One task row; the whole row lights up on hover, the expandable target
+   stays transparent (the kill button rides on the row's right edge). */
+.tasksRow {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  border-radius: 8px;
+}
+
+.tasksRow:hover {
+  background: var(--dsw-alias-interactive-bg-hover);
+}
+
+.tasksRowSettled {
+  opacity: 0.8;
+}
+
+/* The row whose output is shown in the bottom dock. */
+.tasksRowSelected,
+.tasksRowSelected:hover {
+  background: var(--dsw-alias-interactive-bg-active);
+}
+
+.tasksRowMain {
+  flex: 1;
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  min-width: 0;
+  padding: 6px 8px 6px 11px;
+  border: none;
+  border-radius: 8px;
+  background: transparent;
+  font: var(--dsw-font-s-14);
+  color: var(--dsw-alias-label-primary);
+  text-align: left;
+  cursor: pointer;
+  outline: none;
+}
+
+.tasksRowMain:focus-visible {
+  background: var(--dsw-alias-interactive-bg-hover);
+}
+
+.tasksDot {
+  margin-top: 5px;
+}
+
+.tasksContent {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  gap: 1px;
+}
+
+/* The command line: a kind badge followed by the command itself in the code
+   face, like the terminal's live lines. */
+.tasksLabelLine {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+}
+
+.tasksKind {
+  flex: none;
+  max-width: 90px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  padding: 0 5px;
+  border: 1px solid var(--dsw-alias-border-l2);
+  border-radius: 4px;
+  font: var(--dsw-font-xxxs-strong-11);
+  line-height: 14px;
+  color: var(--dsw-alias-label-tertiary);
+}
+
+.tasksLabel {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-family: var(--ds-font-family-code);
+  font-size: var(--dsw-font-xxxs-11-font-size);
+  line-height: var(--dsw-font-xxxs-11-line-height);
+  color: var(--dsw-alias-label-primary);
+}
+
+.tasksSecondary {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font: var(--dsw-font-xxxs-11);
+  color: var(--dsw-alias-label-tertiary);
+}
+
+.tasksKill {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  margin-right: 4px;
+  border: none;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--dsw-alias-label-secondary);
+  cursor: pointer;
+}
+
+.tasksKill:hover {
+  background: color-mix(in srgb, var(--dsw-alias-state-error-primary) 12%, transparent);
+  color: var(--dsw-alias-state-error-primary);
+}
+
+/* The armed (first-click) state: a filled confirm chip instead of the icon. */
+.tasksKillArmed,
+.tasksKillArmed:hover {
+  width: auto;
+  height: 20px;
+  padding: 0 8px;
+  background: color-mix(in srgb, var(--dsw-alias-state-error-primary) 12%, transparent);
+  color: var(--dsw-alias-state-error-primary);
+  font: var(--dsw-font-xxxs-strong-11);
+  white-space: nowrap;
+}
+
+.tasksKill:disabled {
+  opacity: 0.5;
+  cursor: default;
+}
+
+.tasksKillError {
+  flex: none;
+  margin-right: 4px;
+  font: var(--dsw-font-xxxs-11);
+  color: var(--dsw-alias-state-error-primary);
+}
+
+/* ── The shared output dock (bottom of the page, sticky like a terminal) ── */
+
+/* Direct child of the scrolling body, so it docks at the scrollport's bottom
+   edge while the task list scrolls above it; a solid background keeps the
+   tree from showing through. */
+.tasksPane {
+  position: sticky;
+  bottom: 0;
+  z-index: 1;
+  margin-top: 4px;
+  border: 1px solid var(--dsw-alias-border-l2);
+  border-radius: 8px;
+  background: var(--dsw-alias-bg-base);
+  box-shadow: 0 -6px 12px -8px rgba(0, 0, 0, 0.35);
+  overflow: hidden;
+}
+
+.tasksPaneHeader {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  height: 28px;
+  padding: 0 4px 0 10px;
+  border-bottom: 1px solid var(--dsw-alias-border-l1);
+}
+
+.tasksPaneDot {
+  flex: none;
+}
+
+.tasksPaneLabel {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-family: var(--ds-font-family-code);
+  font-size: var(--dsw-font-xxxs-11-font-size);
+  line-height: var(--dsw-font-xxxs-11-line-height);
+  color: var(--dsw-alias-label-primary);
+}
+
+.tasksPaneStatus {
+  flex: none;
+  font: var(--dsw-font-xxxs-11);
+  color: var(--dsw-alias-label-tertiary);
+}
+
+.tasksPaneClose {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  border: none;
+  border-radius: 5px;
+  background: transparent;
+  color: var(--dsw-alias-label-secondary);
+  cursor: pointer;
+}
+
+.tasksPaneClose:hover {
+  background: var(--dsw-alias-interactive-bg-hover);
+}
+
+.tasksPanePre {
+  margin: 0;
+  max-height: 200px;
+  overflow: auto;
+  padding: 6px 10px;
+  font-family: var(--ds-font-family-code);
+  font-size: var(--dsw-font-xxxs-11-font-size);
+  line-height: 1.5;
+  color: var(--dsw-alias-label-primary);
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.tasksPaneHint {
+  padding: 8px 10px;
+  font: var(--dsw-font-xxxs-11);
+  color: var(--dsw-alias-label-tertiary);
+}
+
+.tasksPaneError {
+  color: var(--dsw-alias-state-error-primary);
+}

src/client/SubagentView.tsx

@@ -27,11 +27,13 @@ import {
 } from '@deepseek-ai/dsh-client-ui-primitives'
 import type {
   Context,
+  SidebarSessionList,
   SidebarSessionSummary,
   SidebarSubagentAddress,
   SidebarSubagentCatalog,
   SidebarSubagentChildEntry,
   SidebarSubagentDiagnosticEntry,
+  SidebarTaskView,
 } from '../context-types.ts'
 import {
   collectBranchIds,
@@ -39,6 +41,17 @@ import {
   rootAncestor,
 } from './subagent-detect.ts'
 import { lastActivity } from './subagent-activity.ts'
+import {
+  collectTreeTasks,
+  formatTaskDuration,
+  isTaskLive,
+  orderTasks,
+  taskDotState,
+  taskStatusLabel,
+  type TreeTask,
+} from './subagent-tasks.ts'
+import { api, type TaskOutputResult } from './api.ts'
+import { IconStopOutline16 } from './icons.tsx'
 import { t } from './locales.ts'
 import css from './SubagentView.module.css'
 
@@ -46,6 +59,10 @@ import css from './SubagentView.module.css'
 const POLL_MS = 3000
 /** Preview cap of one tool-call argument line. */
 const ARGS_PREVIEW = 60
+/** Refresh cadence of an expanded task-output panel while its task runs. */
+const TASK_POLL_MS = 2000
+/** How long the kill button stays armed before it needs re-confirming. */
+const TASK_KILL_ARM_MS = 3000
 
 /** The direct subagent children of one parent (durable `origin` rows). */
 function directChildren(
@@ -340,6 +357,262 @@ function CatalogRows({
   )
 }
 
+/**
+ * The shared output dock of the tasks section: ONE pane at the bottom of the
+ * sidebar body (sticky, terminal-like) shows the SELECTED task's output as
+ * the MODEL has read it so far (replayed from the owner session's event
+ * log), refreshed every {@link TASK_POLL_MS} while the task runs and the
+ * page is visible. The model's `task_output` cursor is never touched — the
+ * pane can never steal the agent's bytes, and it stays empty until the
+ * agent reads the task. A single dock — not a panel per row — keeps the
+ * task list compact and stable when many tasks are running.
+ */
+function TaskOutputPane(props: {
+  ownerSessionId: string
+  task: SidebarTaskView
+  /** The page is visible (active tab + open panel): skip polling otherwise. */
+  active: boolean
+  onClose: () => void
+}) {
+  const { ownerSessionId, task, active, onClose } = props
+  const [state, setState] = useState<'loading' | TaskOutputResult | 'error'>('loading')
+  const controllerRef = useRef<AbortController | undefined>(undefined)
+  const preRef = useRef<HTMLPreElement>(null)
+
+  const load = useCallback(async (): Promise<void> => {
+    controllerRef.current?.abort()
+    const controller = new AbortController()
+    controllerRef.current = controller
+    try {
+      const result = await api.taskOutput({ sessionId: ownerSessionId }, task.id, controller.signal)
+      setState(result)
+    } catch {
+      // A newer pull aborted this one, or the wire failed: keep the last
+      // known output; only a dock that never loaded anything shows an error.
+      setState(current => (current === 'loading' ? 'error' : current))
+    }
+  }, [ownerSessionId, task.id])
+
+  useEffect(() => {
+    void load()
+    if (!active || !isTaskLive(task)) return
+    const timer = window.setInterval(() => { void load() }, TASK_POLL_MS)
+    return () => { window.clearInterval(timer) }
+  }, [load, active, task.status])
+
+  useEffect(() => () => { controllerRef.current?.abort() }, [])
+
+  // Terminal-tail behavior: while the task runs, each refresh pins the view
+  // to the newest output; a settled dock leaves scrolling to the reader.
+  useEffect(() => {
+    if (!isTaskLive(task) || typeof state !== 'object' || state.text.length === 0) return
+    const pre = preRef.current
+    if (pre !== null) pre.scrollTop = pre.scrollHeight
+  }, [state, task.status])
+
+  return (
+    <div className={css.tasksPane} role="region" aria-label={`${task.label} ${t('tasks')}`}>
+      <div className={css.tasksPaneHeader}>
+        <StateDot state={taskDotState(task.status)} className={css.tasksPaneDot} />
+        <span className={css.tasksPaneLabel} title={task.label}>{task.label}</span>
+        <span className={css.tasksPaneStatus}>
+          {taskStatusLabel(task.status, t)}
+          {task.detail !== undefined && task.detail !== '' ? ` · ${task.detail}` : ''}
+        </span>
+        <button
+          type="button"
+          className={css.tasksPaneClose}
+          aria-label={t('close')}
+          title={t('close')}
+          onClick={onClose}
+        >
+          <IconStopOutline16 size={10} />
+        </button>
+      </div>
+      {state === 'loading' && <div className={css.tasksPaneHint}>{t('loading')}</div>}
+      {state === 'error' && (
+        <div className={`${css.tasksPaneHint} ${css.tasksPaneError}`}>{t('taskOutputError')}</div>
+      )}
+      {typeof state === 'object' && (
+        <>
+          {state.text.length > 0
+            ? <pre ref={preRef} className={css.tasksPanePre}>{state.text}</pre>
+            : state.read
+              ? <div className={css.tasksPaneHint}>{t('taskNoOutput')}</div>
+              : <div className={css.tasksPaneHint}>{t('taskNotReadYet')}</div>}
+          {state.truncated && <div className={css.tasksPaneHint}>{t('taskOutputTruncated')}</div>}
+        </>
+      )}
+    </div>
+  )
+}
+
+/**
+ * The background-task section of the Subagent page: every task of the whole
+ * current tree (main agent + subagents, owner-labeled), fed by the harness
+ * `session/tasks` push mirror. Clicking a row feeds its model-read output to
+ * the shared bottom dock (event replay — never the model's cursor); live
+ * rows carry a two-click-confirm kill button. Renders nothing while the
+ * tree has no tasks.
+ */
+function TasksSection(props: {
+  byId: SidebarSessionList['byId']
+  tasksBySession: SidebarSessionList['tasksBySession']
+  rootId: string | undefined
+  /** The page is visible (active tab + open panel): skip polling otherwise. */
+  active: boolean
+}) {
+  const { byId, tasksBySession, rootId, active } = props
+  const rows = useMemo(
+    () => orderTasks(collectTreeTasks(byId, tasksBySession, rootId)),
+    [byId, tasksBySession, rootId],
+  )
+  const [selectedId, setSelectedId] = useState<string | undefined>(undefined)
+  const [armedId, setArmedId] = useState<string | undefined>(undefined)
+  const [killingId, setKillingId] = useState<string | undefined>(undefined)
+  const [killErrorId, setKillErrorId] = useState<string | undefined>(undefined)
+  // The duration clock only runs while a live row is on screen.
+  const [now, setNow] = useState(() => Date.now())
+
+  const selectedRow = useMemo(
+    () => (selectedId === undefined ? undefined : rows.find(row => row.task.id === selectedId)),
+    [rows, selectedId],
+  )
+
+  const liveCount = useMemo(
+    () => rows.reduce((count, row) => count + (isTaskLive(row.task) ? 1 : 0), 0),
+    [rows],
+  )
+  const multiOwner = useMemo(
+    () => new Set(rows.map(row => row.ownerSessionId)).size > 1,
+    [rows],
+  )
+
+  // The kill button stays armed only briefly; a stray click must never kill.
+  useEffect(() => {
+    if (armedId === undefined) return
+    const timer = window.setTimeout(() => { setArmedId(undefined) }, TASK_KILL_ARM_MS)
+    return () => { window.clearTimeout(timer) }
+  }, [armedId])
+
+  useEffect(() => {
+    if (liveCount === 0) return
+    setNow(Date.now())
+    const timer = window.setInterval(() => { setNow(Date.now()) }, 1_000)
+    return () => { window.clearInterval(timer) }
+  }, [liveCount])
+
+  // The docked output pane follows its task: when the selected task leaves
+  // the mirror (settled and dropped, or the tree switched), close the dock.
+  useEffect(() => {
+    if (selectedId !== undefined && selectedRow === undefined) setSelectedId(undefined)
+  }, [selectedId, selectedRow])
+
+  // NOTE: every hook must live ABOVE the empty-state return — a hook below it
+  // would flip this component's hook count when the mirror empties and crash
+  // React with "Rendered fewer hooks than expected" (the #300 regression).
+  const kill = useCallback(async (row: TreeTask): Promise<void> => {
+    setKillingId(row.task.id)
+    setKillErrorId(undefined)
+    try {
+      await api.taskKill({ sessionId: row.ownerSessionId }, row.task.id)
+    } catch {
+      setKillErrorId(row.task.id)
+    } finally {
+      setKillingId(undefined)
+      setArmedId(undefined)
+    }
+  }, [])
+
+  if (rows.length === 0) return null
+
+  const countLabel = liveCount > 0
+    ? t('tasksCountRunning', { count: rows.length, running: liveCount })
+    : t('tasksCount', { count: rows.length })
+
+  return (
+    <>
+      <section className={css.tasks} aria-label={t('tasks')}>
+        <div className={css.tasksHeader}>
+          <span className={css.tasksTitle}>{t('tasks')}</span>
+          <span className={css.tasksCount}>{countLabel}</span>
+        </div>
+        <ul className={css.tasksList} aria-label={t('tasks')}>
+          {rows.map((row) => {
+            const { task } = row
+            const live = isTaskLive(task)
+            const selected = selectedId === task.id
+            const armed = armedId === task.id
+            const killing = killingId === task.id
+            const killFailed = killErrorId === task.id
+            const elapsed = live
+              ? now - task.startedAt
+              : (task.finishedAt ?? task.startedAt) - task.startedAt
+            const secondary = [
+              ...(multiOwner ? [row.ownerTitle] : []),
+              taskStatusLabel(task.status, t),
+              ...(task.detail !== undefined && task.detail !== '' ? [task.detail] : []),
+              formatTaskDuration(elapsed, t),
+            ].filter(Boolean).join(' · ')
+            return (
+              <li
+                key={task.id}
+                className={clsx(
+                  css.tasksRow,
+                  !live && css.tasksRowSettled,
+                  selected && css.tasksRowSelected,
+                )}
+              >
+                <button
+                  type="button"
+                  className={css.tasksRowMain}
+                  aria-pressed={selected}
+                  aria-label={`${task.label} ${secondary}`}
+                  onClick={() => { setSelectedId(selected ? undefined : task.id) }}
+                >
+                  <StateDot state={taskDotState(task.status)} className={css.tasksDot} />
+                  <span className={css.tasksContent}>
+                    <span className={css.tasksLabelLine}>
+                      <span className={css.tasksKind}>{task.kind}</span>
+                      <span className={css.tasksLabel} title={task.label}>{task.label}</span>
+                    </span>
+                    <span className={css.tasksSecondary}>{secondary}</span>
+                  </span>
+                </button>
+                {task.status === 'running' && (
+                  <button
+                    type="button"
+                    className={armed ? `${css.tasksKill} ${css.tasksKillArmed}` : css.tasksKill}
+                    aria-label={armed ? t('taskKillConfirm') : t('taskKill')}
+                    title={armed ? t('taskKillConfirm') : t('taskKill')}
+                    disabled={killing}
+                    onClick={(event) => {
+                      event.stopPropagation()
+                      if (armed) void kill(row)
+                      else setArmedId(task.id)
+                    }}
+                  >
+                    {armed ? t('taskKillConfirm') : <IconStopOutline16 size={12} />}
+                  </button>
+                )}
+                {killFailed && <span className={css.tasksKillError}>{t('taskKillError')}</span>}
+              </li>
+            )
+          })}
+        </ul>
+      </section>
+      {selectedRow !== undefined && (
+        <TaskOutputPane
+          ownerSessionId={selectedRow.ownerSessionId}
+          task={selectedRow.task}
+          active={active}
+          onClose={() => { setSelectedId(undefined) }}
+        />
+      )}
+    </>
+  )
+}
+
 /**
  * The sidebar's Subagent topology page.
  * @param props - current session id, whether the page is actually visible
@@ -515,69 +788,78 @@ export function SubagentView(props: {
       <div
         ref={bodyRef}
         className={css.subagentBody}
-        role="tree"
-        aria-label={t('subagent')}
-        aria-busy={summaryBackedLoading || undefined}
         onKeyDown={onTreeKeyDown}
       >
-        {rootId !== undefined && rootSummary !== undefined && (
-          <div
-            role="treeitem"
-            tabIndex={0}
-            aria-level={0}
-            aria-label={`${rootSummary.displayTitle !== '' ? rootSummary.displayTitle : t('subagentMainAgent')} ${t('subagentMainAgent')}`}
-            aria-current={rootId === sessionId ? 'true' : undefined}
-            className={clsx(css.subagentRow, rootId === sessionId && css.subagentRowActive)}
-            onClick={openMain}
-            onKeyDown={(event) => {
-              if (event.key === 'Enter' || event.key === ' ') {
-                event.preventDefault()
-                event.stopPropagation()
-                openMain()
-              }
-            }}
-          >
-            <StateDot
-              state={rootSummary.running === true ? 'ongoing' : 'done'}
-              className={css.subagentDot}
-            />
-            <span className={css.subagentContent}>
-              <span className={css.subagentLabel}>
-                {rootSummary.displayTitle !== '' ? rootSummary.displayTitle : t('subagentMainAgent')}
-              </span>
-              <span className={css.subagentSecondary}>
-                {`${t('subagentMainAgent')} · ${rootSummary.running === true ? t('subagentRunning') : t('subagentInactive')}`}
-              </span>
-            </span>
-          </div>
-        )}
-        {rootId !== undefined && (
-          <div className={css.subagentChildren} role="group" aria-busy={summaryBackedLoading || undefined}>
-            {summaryBackedLoading && (
-              <CatalogLoadingRows parentSessionId={rootId} byId={byId} level={1} />
-            )}
-            {!summaryBackedLoading && (
-              <CatalogRows
-                parentSessionId={rootId}
-                catalog={rootCatalog}
-                catalogs={catalogs}
-                byId={byId}
-                level={1}
-                currentSessionId={sessionId}
-                active={active}
-                ctx={ctx}
-                openChild={openChild}
-                refresh={refresh}
+        <div
+          role="tree"
+          aria-label={t('subagent')}
+          aria-busy={summaryBackedLoading || undefined}
+        >
+          {rootId !== undefined && rootSummary !== undefined && (
+            <div
+              role="treeitem"
+              tabIndex={0}
+              aria-level={0}
+              aria-label={`${rootSummary.displayTitle !== '' ? rootSummary.displayTitle : t('subagentMainAgent')} ${t('subagentMainAgent')}`}
+              aria-current={rootId === sessionId ? 'true' : undefined}
+              className={clsx(css.subagentRow, rootId === sessionId && css.subagentRowActive)}
+              onClick={openMain}
+              onKeyDown={(event) => {
+                if (event.key === 'Enter' || event.key === ' ') {
+                  event.preventDefault()
+                  event.stopPropagation()
+                  openMain()
+                }
+              }}
+            >
+              <StateDot
+                state={rootSummary.running === true ? 'ongoing' : 'done'}
+                className={css.subagentDot}
               />
-            )}
-          </div>
-        )}
-        {readyEmpty && (
-          <div className={css.subagentEmpty}>
-            <div>{t('subagentEmpty')}</div>
-            <div className={css.subagentEmptyHint}>{t('subagentEmptyDesc')}</div>
-          </div>
-        )}
+              <span className={css.subagentContent}>
+                <span className={css.subagentLabel}>
+                  {rootSummary.displayTitle !== '' ? rootSummary.displayTitle : t('subagentMainAgent')}
+                </span>
+                <span className={css.subagentSecondary}>
+                  {`${t('subagentMainAgent')} · ${rootSummary.running === true ? t('subagentRunning') : t('subagentInactive')}`}
+                </span>
+              </span>
+            </div>
+          )}
+          {rootId !== undefined && (
+            <div className={css.subagentChildren} role="group" aria-busy={summaryBackedLoading || undefined}>
+              {summaryBackedLoading && (
+                <CatalogLoadingRows parentSessionId={rootId} byId={byId} level={1} />
+              )}
+              {!summaryBackedLoading && (
+                <CatalogRows
+                  parentSessionId={rootId}
+                  catalog={rootCatalog}
+                  catalogs={catalogs}
+                  byId={byId}
+                  level={1}
+                  currentSessionId={sessionId}
+                  active={active}
+                  ctx={ctx}
+                  openChild={openChild}
+                  refresh={refresh}
+                />
+              )}
+            </div>
+          )}
+          {readyEmpty && (
+            <div className={css.subagentEmpty}>
+              <div>{t('subagentEmpty')}</div>
+              <div className={css.subagentEmptyHint}>{t('subagentEmptyDesc')}</div>
+            </div>
+          )}
+        </div>
+        <TasksSection
+          byId={byId}
+          tasksBySession={list.tasksBySession}
+          rootId={rootId}
+          active={active}
+        />
       </div>
     </div>
   )

src/client/api.ts

@@ -60,6 +60,21 @@ export interface FsTextResult { kind: 'text'; content: string; truncated: boolea
  *  `head` carries the first bytes (base64) for viewer detect sniffing. */
 export interface FsBinaryResult { kind: 'binary'; size: number; truncated: boolean; head: string }
 
+/**
+ * One tasks.output response: the output the MODEL has read so far for the
+ * task (replayed from the owner session's event log — the model's
+ * task_output cursor is never touched, so the pane can never steal the
+ * agent's bytes). `read` is false until the model actually called
+ * task_output for the task.
+ */
+export interface TaskOutputResult {
+  text: string
+  /** True when the host capped the text at its output limit. */
+  truncated: boolean
+  /** Whether the model has read the task at least once. */
+  read: boolean
+}
+
 async function call<T>(method: string, payload: Record<string, unknown>, signal?: AbortSignal): Promise<T> {
   let response: Response
   try {
@@ -145,6 +160,19 @@ export const api = {
   /** Release an agent terminal by uuid (tab closed while WS was down). */
   agentPtyClose: (uuid: string) =>
     call<{ ok: true }>('agent-pty.close', { uuid }),
+  /**
+   * The output the model has read so far for one background task (replayed
+   * from the owner session's event log — never the model's task_output
+   * cursor). The scope MUST be the task's OWNER session.
+   */
+  taskOutput: (scope: SessionScope, id: string, signal?: AbortSignal) =>
+    call<TaskOutputResult>('tasks.output', scopePayload(scope, { id }), signal),
+  /** Request cancellation of one background task (live tasks flip to stopping). */
+  taskKill: (scope: SessionScope, id: string, reason?: string) =>
+    call<{ ok: true; outcome: 'requested' | 'already-finished' }>('tasks.kill', scopePayload(scope, {
+      id,
+      ...(reason !== undefined ? { reason } : {}),
+    })),
   /** Read the side card preferences (plugin-global, no session scope). */
   settingsGet: () =>
     call<{ value?: unknown; revision?: number }>('settings.get', {}),

src/client/builtins/tabs.tsx

@@ -109,13 +109,17 @@ export function builtinTabs(ctx: Context): readonly TabDescriptor[] {
       icon: (size: number) => <IconThinkOutline16 size={size} />,
       order: 30,
       single: true,
-      // Declarative settings: the auto-open switch renders under this row in
-      // the Side card settings page (the Subagent page's own related setting).
+      // Declarative settings: the auto-open switches render under this row in
+      // the Side card settings page (the Tasks page's own related settings).
       settings: {
         toggles: [{
           key: 'autoOpenSubagent',
           title: () => t('settingsSubagentTitle'),
           desc: () => t('settingsSubagentDesc'),
+        }, {
+          key: 'autoOpenTasks',
+          title: () => t('settingsTasksTitle'),
+          desc: () => t('settingsTasksDesc'),
         }],
       },
       component: ({ ctx, scope, visible, onSubagentJump }) => (

src/client/icons.tsx

@@ -51,6 +51,16 @@ export const IconDiffOutline16 = ({ size = 16, className }: IconProps) => (
   </svg>
 )
 
+/**
+ * Stop glyph for the background-task kill button: a filled square in the
+ * app's outline scale (16), the universal "halt this work" mark.
+ */
+export const IconStopOutline16 = ({ size = 16, className }: IconProps) => (
+  <svg width={size} height={size} className={className} viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect x="4" y="4" width="8" height="8" rx="1.5" fill="currentColor" stroke="none" />
+  </svg>
+)
+
 // ── File-viewer inventory glyphs (Side card settings page) ────────────────
 
 /** Image viewer glyph: a picture frame with a sun and a mountain. */

src/client/index.tsx

@@ -22,12 +22,13 @@ import { registerImeGuard } from './ime-guard.ts'
 import { loadPrefs } from './prefs.ts'
 import { SideCardSection } from './SideCardSection.tsx'
 import { api } from './api.ts'
-import { t } from './locales.ts'
+import { LOCALE_NS, attachLocale, t, zh, en } from './locales.ts'
 import css from './sidebar.module.css'
 import './layout.css'
 
-/** Services required before mounting (provided by the client runtime). */
-export const inject = ['slots', 'sessions', 'connection', 'workspaces']
+/** Services required before mounting (provided by the client runtime; the
+ *  locale service backs the sidebar's copy — see locales.ts). */
+export const inject = ['slots', 'sessions', 'connection', 'workspaces', 'locale']
 
 /**
  * Error boundary over the sidebar tree: a render error must never blank the
@@ -69,6 +70,17 @@ class SidebarBoundary extends Component<{ children: ReactNode }, { error: string
  * @param ctx - the client cordis context (slots, sessions).
  */
 export function apply(ctx: Context): void {
+  // The sidebar follows the DSH i18n system: attach the locale service so
+  // the module-level t()/isZh() resolve the Host-backed language preference
+  // (and switch live — the Sidebar root subscribes to it), and register the
+  // plugin's dictionaries into the shared locale registry. The disposers
+  // run on fiber disposal, so re-activation (HMR) re-registers cleanly.
+  attachLocale(ctx.locale)
+  ctx.effect(() => {
+    const offZh = ctx.locale.register(LOCALE_NS, 'zh', zh)
+    const offEn = ctx.locale.register(LOCALE_NS, 'en', en)
+    return () => { offZh(); offEn() }
+  }, 'dsh-better-sidebar: dictionaries')
   // One store instance per activation: production code creates it only here,
   // then hands it to the mounted panel and closes over it in the slot
   // registrations (the official createXXXStore() factory rule — no

src/client/locales.ts

@@ -1,11 +1,16 @@
 /**
- * Minimal zh/en copy for the sidebar. The plugin renders outside the slot
- * system's locale seat, so it reads the browser language directly (the DSH
- * locale preference and the browser language agree in practice; both default
- * from navigator.language anyway).
+ * Minimal zh/en copy for the sidebar. The copy follows the DSH i18n system:
+ * the client apply attaches the locale service (`ctx.locale`, provided by
+ * `@deepseek-ai/dsh-client-locale`) through {@link attachLocale}, and
+ * `t()`/`isZh()` resolve the active locale from it — the Host-backed
+ * `locale.preference` wins over the raw browser language and switches live.
+ * Without an attached service (standalone/test compositions) the browser
+ * language is used, matching the previous behavior. The dictionaries are
+ * also registered into the DSH locale registry under {@link LOCALE_NS}.
  */
 
-const zh = {
+/** The zh dictionary (also registered into the DSH locale registry under {@link LOCALE_NS}). */
+export const zh = {
   explorer: '资源管理器',
   git: '源代码管理',
   terminal: '终端',
@@ -119,8 +124,10 @@ const zh = {
   nextSlide: '下一页',
   zoom: '缩放',
   zoomHint: 'Alt + 滚轮',
-  settingsSubagentTitle: '检测到子代理时自动展开子代理页面',
-  settingsSubagentDesc: '当前会话产生新的子代理时，自动展开侧边栏并打开子代理页面；关闭后需手动打开',
+  settingsSubagentTitle: '检测到子代理时自动展开任务管理页',
+  settingsSubagentDesc: '当前会话产生新的子代理时，自动展开侧边栏并打开任务管理页；关闭后需手动打开',
+  settingsTasksTitle: '有新后台任务时自动展开任务管理页',
+  settingsTasksDesc: '当前会话出现新的后台任务时，自动展开侧边栏并打开任务管理页（每个新任务都会触发）；关闭后需手动打开',
   settingsToolsTitle: '为模型注入终端工具',
   settingsToolsDesc: '开启后，模型可通过 terminal_create 等 8 个工具创建并操作侧边栏终端（默认关闭）',
   settingsBottomTerminalTitle: '底部面板首次展开自动开终端',
@@ -165,8 +172,8 @@ const zh = {
   browserEmbedBlocked: '{host} 拒绝了嵌入请求',
   browserEmbedBlockedDesc: '该站点通过 X-Frame-Options / frame-ancestors 禁止在其它页面中显示，无法在侧边栏内加载。可在浏览器中直接打开',
   browserEmbedAnyway: '仍然加载',
-  subagent: '子代理',
-  openSubagent: '子代理',
+  subagent: '任务管理',
+  openSubagent: '任务管理',
   subagentMainAgent: '主代理',
   subagentEmpty: '暂无子代理',
   subagentEmptyDesc: '当前主代理派生的子代理将显示在这里',
@@ -180,9 +187,30 @@ const zh = {
   subagentDiagUnsupported: '不支持的条目',
   subagentDiagUnavailable: '不可用',
   subagentThinking: '思考中…',
+  tasks: '后台命令',
+  tasksCount: '{count} 个后台命令',
+  tasksCountRunning: '{count} 个后台命令 · {running} 运行中',
+  taskStatusRunning: '运行中',
+  taskStatusStopping: '终止中',
+  taskStatusCompleted: '已完成',
+  taskStatusKilled: '已终止',
+  taskStatusFailed: '失败',
+  taskDurationSeconds: '{seconds} 秒',
+  taskDurationMinutes: '{minutes} 分 {seconds} 秒',
+  taskDurationHours: '{hours} 小时 {minutes} 分',
+  taskViewOutput: '查看输出',
+  taskHideOutput: '收起输出',
+  taskNoOutput: '暂无输出',
+  taskNotReadYet: '等待模型读取该任务的输出（模型执行 task_output 后，输出会显示在这里）',
+  taskOutputTruncated: '输出过长，已截断显示',
+  taskOutputError: '输出读取失败',
+  taskKill: '终止',
+  taskKillConfirm: '再次点击确认终止',
+  taskKillError: '终止失败',
 }
 
-const en: Record<keyof typeof zh, string> = {
+/** The en dictionary (key-set-equal to zh, enforced by the type annotation). */
+export const en: Record<keyof typeof zh, string> = {
   explorer: 'Explorer',
   git: 'Source Control',
   terminal: 'Terminal',
@@ -296,8 +324,10 @@ const en: Record<keyof typeof zh, string> = {
   nextSlide: 'Next',
   zoom: 'Zoom',
   zoomHint: 'Alt + wheel',
-  settingsSubagentTitle: 'Auto-open the Subagent page when a subagent appears',
-  settingsSubagentDesc: 'Expand the side card and open the Subagent page when the current conversation spawns a new subagent; turn off to open it manually',
+  settingsSubagentTitle: 'Auto-open the Tasks page when a subagent appears',
+  settingsSubagentDesc: 'Expand the side card and open the Tasks page when the current conversation spawns a new subagent; turn off to open it manually',
+  settingsTasksTitle: 'Auto-open the Tasks page on a new background task',
+  settingsTasksDesc: 'Expand the side card and open the Tasks page whenever a new background task appears for the current conversation (every new task triggers); turn off to open it manually',
   settingsToolsTitle: 'Inject terminal tools for the model',
   settingsToolsDesc: 'When enabled, the model can create and drive sidebar terminals through the 8 terminal_* tools (off by default)',
   settingsBottomTerminalTitle: 'Auto-open a terminal on the bottom panel\'s first expansion',
@@ -342,8 +372,8 @@ const en: Record<keyof typeof zh, string> = {
   browserEmbedBlocked: '{host} refused to be embedded',
   browserEmbedBlockedDesc: 'The site forbids being displayed inside other pages (X-Frame-Options / frame-ancestors), so it cannot load in the sidebar. Open it directly in your browser instead.',
   browserEmbedAnyway: 'Load anyway',
-  subagent: 'Subagents',
-  openSubagent: 'Subagents',
+  subagent: 'Tasks',
+  openSubagent: 'Tasks',
   subagentMainAgent: 'Main agent',
   subagentEmpty: 'No subagents',
   subagentEmptyDesc: 'Subagents spawned under the main agent will appear here',
@@ -357,15 +387,64 @@ const en: Record<keyof typeof zh, string> = {
   subagentDiagUnsupported: 'Unsupported',
   subagentDiagUnavailable: 'Unavailable',
   subagentThinking: 'Thinking…',
+  tasks: 'Background tasks',
+  tasksCount: '{count} background tasks',
+  tasksCountRunning: '{count} background tasks · {running} running',
+  taskStatusRunning: 'Running',
+  taskStatusStopping: 'Stopping',
+  taskStatusCompleted: 'Completed',
+  taskStatusKilled: 'Killed',
+  taskStatusFailed: 'Failed',
+  taskDurationSeconds: '{seconds}s',
+  taskDurationMinutes: '{minutes}m {seconds}s',
+  taskDurationHours: '{hours}h {minutes}m',
+  taskViewOutput: 'View output',
+  taskHideOutput: 'Hide output',
+  taskNoOutput: 'No output yet',
+  taskNotReadYet: 'Waiting for the model to read this task; its output appears here once the model runs task_output',
+  taskOutputTruncated: 'Output truncated',
+  taskOutputError: 'Failed to read output',
+  taskKill: 'Kill',
+  taskKillConfirm: 'Click again to confirm kill',
+  taskKillError: 'Kill failed',
 }
 
-/** Translate a copy key in the browser's language (zh → zh, else en). */
+/**
+ * The dictionary namespace this plugin owns in the DSH locale registry
+ * (`'sidebar'` is taken by DSH's own ui-sidebar, hence this distinct name).
+ */
+export const LOCALE_NS = 'betterSidebar'
+
+/** The DSH locale service attached by the client apply (absent → browser detection). */
+let localeService: { getSnapshot(): { active: string } } | undefined
+
+/**
+ * Attach (or detach, with undefined) the DSH locale service. The sidebar
+ * mounts its own React root outside the slot system's locale seat, so the
+ * service rides this module-level holder: components keep calling the plain
+ * `t()` function, and the Sidebar root's locale subscription re-renders the
+ * whole tree on switches.
+ */
+export function attachLocale(service: { getSnapshot(): { active: string } } | undefined): void {
+  localeService = service
+}
+
+/**
+ * The active locale id ('zh' | 'en'): the DSH locale service's snapshot when
+ * attached, else the browser language.
+ */
+function activeLocale(): string {
+  return localeService?.getSnapshot().active
+    ?? (typeof navigator !== 'undefined' ? navigator.language : '')
+    ?? 'en'
+}
+
+/** Translate a copy key in the active locale (zh → zh, else en). */
 export type CopyKey = keyof typeof zh
 
 /** Translate a copy key; `{name}` placeholders interpolate from `params`. */
 export function t(key: CopyKey, params?: Record<string, string | number>): string {
-  const lang = typeof navigator !== 'undefined' ? navigator.language : 'en'
-  const dict = lang.toLowerCase().startsWith('zh') ? zh : en
+  const dict = activeLocale().toLowerCase().startsWith('zh') ? zh : en
   let text = dict[key]
   if (params !== undefined) {
     for (const [name, value] of Object.entries(params)) {
@@ -375,9 +454,9 @@ export function t(key: CopyKey, params?: Record<string, string | number>): strin
   return text
 }
 
-/** Whether the browser language is Chinese (used for selectors). */
+/** Whether the active locale is Chinese (used for selectors). */
 export function isZh(): boolean {
-  return typeof navigator !== 'undefined' && navigator.language.toLowerCase().startsWith('zh')
+  return activeLocale().toLowerCase().startsWith('zh')
 }
 
 /** Format an ISO 8601 author date relative to now (刚刚 / N 分钟前 / N 小时前 / 昨天 / date). */

src/client/prefs.ts

@@ -40,6 +40,9 @@ export function parsePrefs(value: unknown): SidebarPrefs {
     autoOpenSubagent: typeof record.autoOpenSubagent === 'boolean'
       ? record.autoOpenSubagent
       : SIDEBAR_PREFS_DEFAULTS.autoOpenSubagent,
+    autoOpenTasks: typeof record.autoOpenTasks === 'boolean'
+      ? record.autoOpenTasks
+      : SIDEBAR_PREFS_DEFAULTS.autoOpenTasks,
     agentTerminalTools: typeof record.agentTerminalTools === 'boolean'
       ? record.agentTerminalTools
       : SIDEBAR_PREFS_DEFAULTS.agentTerminalTools,

src/client/subagent-tasks.ts

@@ -0,0 +1,161 @@
+/**
+ * Pure derivations for the Subagent page's background-task section. Kept
+ * framework-free so the node test environment can unit-test them: the task
+ * rows arrive through the harness `session/tasks` push mirror
+ * (`tasksBySession` in the sessions list feed) — nothing here issues
+ * requests, and the row ordering / status mapping mirror the official
+ * ui-task header list.
+ */
+import type {
+  SidebarSessionList,
+  SidebarSessionSummary,
+  SidebarTaskStatus,
+  SidebarTaskView,
+} from '../context-types.ts'
+import type { CopyKey } from './locales.ts'
+
+/** One row of the tasks section: the task plus its owning session's title. */
+export interface TreeTask {
+  ownerSessionId: string
+  ownerTitle: string
+  task: SidebarTaskView
+}
+
+/** Whether the registry still holds the task open (its duration ticks). */
+export function isTaskLive(task: SidebarTaskView): boolean {
+  return task.status === 'running' || task.status === 'stopping'
+}
+
+/**
+ * Every session id of the topology tree rooted at `rootId` (the root plus
+ * each session whose uninterrupted subagent-origin chain reaches it — same
+ * lineage semantics as {@link countSubagentDescendants}; cycles fail soft).
+ * Sessions outside the tree (orphans, other trees) are excluded, so the
+ * tasks section never shows foreign work.
+ */
+export function treeSessionIds(
+  byId: SidebarSessionList['byId'],
+  rootId: string | undefined,
+): Set<string> {
+  const ids = new Set<string>()
+  if (rootId === undefined) return ids
+  for (const summary of Object.values(byId)) {
+    const seen = new Set<string>()
+    let current: SidebarSessionSummary | undefined = summary
+    let reachesRoot = false
+    while (current !== undefined && !seen.has(current.id)) {
+      seen.add(current.id)
+      if (current.id === rootId) {
+        reachesRoot = true
+        break
+      }
+      if (current.origin !== 'subagent' || current.parentId === undefined) break
+      current = byId[current.parentId]
+    }
+    if (reachesRoot) ids.add(summary.id)
+  }
+  return ids
+}
+
+/**
+ * Whether a NEW background task appeared for one session between two
+ * consecutive list snapshots (a task id the previous snapshot lacked).
+ * Unlike the subagent auto-open (0 → N only), ANY new task id triggers: the
+ * agent may start several tasks over a session, and each new one should
+ * surface the Tasks page (a fresh page load never triggers — its baseline
+ * starts at the current snapshot).
+ */
+export function detectNewTask(
+  prev: SidebarSessionList,
+  next: SidebarSessionList,
+  sessionId: string,
+): boolean {
+  const prevIds = new Set((prev.tasksBySession?.[sessionId] ?? []).map(task => task.id))
+  return (next.tasksBySession?.[sessionId] ?? []).some(task => !prevIds.has(task.id))
+}
+
+/**
+ * Collect the background tasks of the whole current tree, owner-labeled.
+ * Sessions without a mirror entry contribute nothing; an absent mirror
+ * (runtime older than the tasks feed) yields an empty list.
+ */
+export function collectTreeTasks(
+  byId: SidebarSessionList['byId'],
+  tasksBySession: Readonly<Record<string, readonly SidebarTaskView[]>> | undefined,
+  rootId: string | undefined,
+): TreeTask[] {
+  const rows: TreeTask[] = []
+  if (tasksBySession === undefined) return rows
+  for (const sessionId of treeSessionIds(byId, rootId)) {
+    const tasks = tasksBySession[sessionId]
+    if (tasks === undefined || tasks.length === 0) continue
+    const ownerTitle = byId[sessionId]?.displayTitle ?? sessionId
+    for (const task of tasks) rows.push({ ownerSessionId: sessionId, ownerTitle, task })
+  }
+  return rows
+}
+
+/**
+ * Live rows first in start order, then settled rows newest-first (mirror of
+ * the official ui-task ordering); a tie falls back to start order so the
+ * sort never depends on the host's map iteration.
+ */
+export function orderTasks(rows: readonly TreeTask[]): TreeTask[] {
+  return [...rows].sort((left, right) => {
+    const liveLeft = isTaskLive(left.task)
+    if (liveLeft !== isTaskLive(right.task)) return liveLeft ? -1 : 1
+    if (liveLeft) return left.task.startedAt - right.task.startedAt
+    const finished = (right.task.finishedAt ?? right.task.startedAt) - (left.task.finishedAt ?? left.task.startedAt)
+    return finished !== 0 ? finished : left.task.startedAt - right.task.startedAt
+  })
+}
+
+/** The sidebar's StateDot states for the five wire statuses. */
+export type TaskDotState = 'ongoing' | 'warning' | 'done' | 'error'
+
+/**
+ * Status marker semantics. `stopping` and `killed` share the attention
+ * color: both mean the work ended (or is ending) on request rather than on
+ * its own.
+ */
+export function taskDotState(status: SidebarTaskStatus): TaskDotState {
+  switch (status) {
+    case 'running': return 'ongoing'
+    case 'stopping': return 'warning'
+    case 'completed': return 'done'
+    case 'killed': return 'warning'
+    case 'failed': return 'error'
+  }
+}
+
+/** Human status word of one wire status (localized through the passed translator). */
+export function taskStatusLabel(
+  status: SidebarTaskStatus,
+  t: (key: CopyKey, params?: Record<string, string | number>) => string,
+): string {
+  switch (status) {
+    case 'running': return t('taskStatusRunning')
+    case 'stopping': return t('taskStatusStopping')
+    case 'completed': return t('taskStatusCompleted')
+    case 'killed': return t('taskStatusKilled')
+    case 'failed': return t('taskStatusFailed')
+  }
+}
+
+/**
+ * Elapsed time in at most two adjacent units (mirror of the official
+ * ui-task duration wording). A background task that outlives an hour is
+ * already exceptional, so hours is the widest unit.
+ */
+export function formatTaskDuration(
+  elapsedMs: number,
+  t: (key: CopyKey, params?: Record<string, string | number>) => string,
+): string {
+  const total = Math.max(0, Math.floor(elapsedMs / 1_000))
+  const seconds = total % 60
+  const minutes = Math.floor(total / 60) % 60
+  const hours = Math.floor(total / 3_600)
+  if (hours > 0) return t('taskDurationHours', { hours, minutes })
+  if (minutes > 0) return t('taskDurationMinutes', { minutes, seconds })
+  return t('taskDurationSeconds', { seconds })
+}

src/client/xlsx-view.tsx

@@ -11,7 +11,7 @@
  */
 import { useEffect, useRef, useState } from 'react'
 import { mediaUrl } from './api.ts'
-import { t } from './locales.ts'
+import { isZh, t } from './locales.ts'
 import { BinaryFallback, type LoadState, type OfficeViewProps } from './office-shared.tsx'
 import { xlsxWorkbookToUniver } from './xlsx-to-univer.ts'
 import css from './sidebar.module.css'
@@ -54,14 +54,14 @@ export function XlsxView(props: OfficeViewProps): JSX.Element {
         const XLSX = await import('xlsx')
         const { createUniver, LocaleType, mergeLocales } = await import('@univerjs/presets')
         const { UniverSheetsCorePreset } = await import('@univerjs/preset-sheets-core')
-        // Locales pick the browser language; falls back to en-US.
-        const isZh = typeof navigator !== 'undefined' && navigator.language.toLowerCase().startsWith('zh')
-        const localePack = await (isZh
+        // Locales follow the DSH i18n system (the active locale); falls
+        // back to the browser language, then en-US.
+        const localePack = await (isZh()
           ? import('@univerjs/preset-sheets-core/locales/zh-CN').then(m => m.default).catch(() => null)
           : import('@univerjs/preset-sheets-core/locales/en-US').then(m => m.default).catch(() => null))
 
         const wb = XLSX.read(buf, { type: 'array' })
-        const locale = isZh ? LocaleType.ZH_CN : LocaleType.EN_US
+        const locale = isZh() ? LocaleType.ZH_CN : LocaleType.EN_US
         const workbookData = xlsxWorkbookToUniver(wb, '0.25.1', locale)
 
         if (cancelled) return

src/config.ts

@@ -79,6 +79,7 @@ export const PrefsSchema: z<SidebarPrefs> = z.object({
   openByDefault: z.boolean().default(true),
   defaultWidthPercent: z.number().step(1).min(WIDTH_PERCENT_MIN).max(WIDTH_PERCENT_MAX).default(WIDTH_PERCENT_DEFAULT),
   autoOpenSubagent: z.boolean().default(true),
+  autoOpenTasks: z.boolean().default(true),
   agentTerminalTools: z.boolean().default(false),
   bottomPanelAutoTerminal: z.boolean().default(true),
   interceptOpenPath: z.boolean().default(true),

src/context-types.ts

@@ -48,7 +48,15 @@ export interface SidebarSessionHeader {
 
 /** The host session store face (`ctx.sessions.get(id)` returns the live session). */
 export interface SidebarSessionStore {
-  get(id: string): { header: SidebarSessionHeader } | undefined
+  get(id: string): {
+    header: SidebarSessionHeader
+    /**
+     * The live session's append-only event log (immutable snapshot; absent
+     * on sessions the runtime has not hydrated). Read-only access — the
+     * tasks.output route replays `task_output` tool/result rows from it.
+     */
+    events?: readonly SidebarSessionEvent[]
+  } | undefined
 }
 
 /** One loader entry's options slice (the connection row's resolved config). */
@@ -150,6 +158,42 @@ export interface SidebarHistoryEntry {
   view?: unknown
 }
 
+/** Lifecycle status set of one background task (closed wire union). */
+export type SidebarTaskStatus = 'running' | 'stopping' | 'completed' | 'killed' | 'failed'
+
+/**
+ * One background task as the client mirror sees it (wire `TaskView` shape:
+ * id/kind/label/status/detail?/startedAt/finishedAt?).
+ */
+export interface SidebarTaskView {
+  /** Registry-issued `<kind>-N` identity, stable for the task's whole life. */
+  id: string
+  /** Producer kind (`bash`, `pwsh`, `subagent`, …; open string by design). */
+  kind: string
+  /** Producer-supplied one-line label: the command, or the delegation description. */
+  label: string
+  /** Current lifecycle state. */
+  status: SidebarTaskStatus
+  /** Kind-specific status detail ('exit code: 3'), present once supplied. */
+  detail?: string
+  /** Epoch ms when the task was registered. */
+  startedAt: number
+  /** Epoch ms when the task settled; absent while live. */
+  finishedAt?: number
+}
+
+/** The host tasks registry face the sidebar routes touch (structural mirror of `TaskService`). */
+export interface SidebarTasksService {
+  /** Request cancellation; throws for an unknown or foreign task. */
+  kill(id: string, caller?: SidebarAgent, reason?: string): 'requested' | 'already-finished'
+}
+
+/** The host agent registry face (structural mirror of the runtime `ctx.agents`). */
+export interface SidebarAgentsService {
+  /** The live agent registered under a session id, or undefined when not live. */
+  get(id: string): SidebarAgent | undefined
+}
+
 /** RPC result slot mirror (`RpcResult<T>` on the wire). */
 export type SidebarRpcResult<T> = { ok: true; value: T } | { ok: false; error: { code: string; message: string } }
 
@@ -177,6 +221,12 @@ export interface SidebarSessionList {
   byId: Record<string, SidebarSessionSummary>
   /** Direct durable catalogs keyed by their selected parent address. */
   subagentsByParent?: Readonly<Record<string, SidebarSubagentCatalog>>
+  /**
+   * Background tasks per session, last-wins from the harness's `session/tasks`
+   * push (a missing key is an empty set). Absent on runtime snapshots older
+   * than the tasks mirror — the sidebar simply shows no task rows.
+   */
+  tasksBySession?: Readonly<Record<string, readonly SidebarTaskView[]>>
 }
 
 /** The client sessions service face (only the list feed is needed). */
@@ -215,6 +265,23 @@ export interface SidebarSessionsService {
   refreshSubagents?(parentSessionId: string): Promise<void>
 }
 
+/**
+ * The client locale service face (mirror of @deepseek-ai/dsh-client-locale's
+ * LocaleService — only the slices the sidebar touches). The sidebar follows
+ * the DSH i18n system: the active locale is the Host-backed preference
+ * (`locale.preference` in settings.yaml) rather than the raw browser
+ * language, and the sidebar's zh/en dictionaries register into the service's
+ * namespace registry under `betterSidebar`.
+ */
+export interface SidebarLocaleService {
+  /** Current immutable locale snapshot (uSES-safe; `active` is 'zh' | 'en' today). */
+  getSnapshot(): { active: string }
+  /** Subscribe to snapshot changes (locale switch or dictionary registration). */
+  subscribe(fn: () => void): () => void
+  /** Register one locale's dictionary for a namespace; returns the disposer. */
+  register(ns: string, locale: string, dict: Record<string, string>): () => void
+}
+
 /** The composer draft face the sidebar reaches through `ctx.conversation.input`. */
 export interface SidebarSessionInput {
   /** The live input store (draft read for append). */
@@ -322,12 +389,37 @@ declare module 'cordis' {
     settings: SidebarSettingsService
     invariants: SidebarInvariantsService
     tools: SidebarToolsService
+    /**
+     * The client locale service (`@deepseek-ai/dsh-client-locale`): the
+     * sidebar's copy follows its active locale and registers its
+     * dictionaries under the `betterSidebar` namespace. Client side only.
+     */
+    locale: SidebarLocaleService
+    /**
+     * The host background-task registry (`ctx.get('tasks')`; optional — the
+     * sidebar routes degrade to a 503 when the deployment lacks it).
+     */
+    tasks: SidebarTasksService
+    /**
+     * The host live-agent registry (`ctx.get('agents')`; optional — used to
+     * resolve the caller the tasks fence compares against).
+     */
+    agents: SidebarAgentsService
     /**
      * The client-side sidebar registry: external plugins register tab types
      * and file previewers here. Provided by the client half (see
      * {@link ./client/index.tsx}); undefined on the host side.
      */
     betterSidebar: BetterSidebarService
+    /**
+     * Subscribe to the session append feed (mirror of the cordis event API):
+     * the listener receives every appended session event with the LIVE
+     * Session instance that appended it. The api-proxy pushes the same feed
+     * to browsers; the sidebar uses it to mirror task_output events the
+     * session store's own log can lag behind (restart divergence). Returns
+     * the disposer.
+     */
+    on(event: string, listener: (session: unknown, event: SidebarSessionEvent) => void): () => void
     /**
      * Register a lifecycle callback (DSH-vendored cordis): runs at plugin
      * activation; its returned cleanup runs at disposal.

src/index.ts

@@ -36,6 +36,7 @@ import { SettingsConflictError, settingsNamespace, type SettingsNamespace } from
 import { defaultShell, ensureSpawnHelper, PtyManager } from './pty-manager.ts'
 import { AgentPtyRegistry, clampDims, type AgentTerminalHandle } from './agent-pty.ts'
 import { registerTools } from './tools.ts'
+import { buildTasksApi, type SidebarTasksRoutes } from './tasks-routes.ts'
 import { readJsonBody, requireString, SidebarError, writeError, writeJson, writeOk } from './wire.ts'
 
 export { Config }
@@ -198,6 +199,12 @@ function buildApi(
     const clientCwd = typeof record?.cwd === 'string' && record.cwd !== '' ? record.cwd : undefined
     return { sessionId, cwd: sessionCwdOf(ctx, sessionId, clientCwd) }
   }
+  // Background tasks: the LIST rides the harness's `session/tasks` push
+  // mirror, so these routes only replay output the model has read (from the
+  // session's own event log — no DSH source is touched, the model's
+  // task_output cursor is never consumed) and kill (the registry's stock
+  // API). A deployment without the tasks registry downgrades kill to a 503.
+  const tasksApi: SidebarTasksRoutes = buildTasksApi(ctx, resolved.readLimit)
   return {
     'session.cwd': (payload) => {
       const { sessionId, cwd } = cwdOf(payload)
@@ -327,6 +334,14 @@ function buildApi(
       agentPtyRegistry.close(uuid)
       return { ok: true }
     },
+    // Background tasks: read one task's output (a REPLAY of what the model
+    // has read so far, from the owner session's event log — the model's
+    // task_output cursor is never touched, so the human pane can never steal
+    // the agent's bytes), and kill one task. The task LIST itself arrives
+    // through the harness's session/tasks push mirror, so no list route
+    // exists. Kill is fenced to the owning session by the tasks registry.
+    'tasks.output': (payload) => tasksApi.output(payload),
+    'tasks.kill': (payload) => tasksApi.kill(payload),
     // The side card preferences. The settings service is optional in the
     // composition; while absent the routes report undefined and the client
     // keeps the schema defaults. Writes are revision-guarded: a stale editor

src/prefs-shared.ts

@@ -20,6 +20,12 @@ export interface SidebarPrefs {
    * Subagent page when the current conversation spawns a new subagent.
    */
   autoOpenSubagent: boolean
+  /**
+   * Whether the sidebar auto-activates (opens the panel) and expands the
+   * Tasks page when a NEW background task appears for the current
+   * conversation (any new task id, not just the first one).
+   */
+  autoOpenTasks: boolean
   /**
    * Whether the model-facing agent terminal tools (terminal_create / list /
    * send / read / wait_for / resize / signal / close) are injected into the
@@ -103,6 +109,7 @@ export const SIDEBAR_PREFS_DEFAULTS: SidebarPrefs = {
   openByDefault: true,
   defaultWidthPercent: WIDTH_PERCENT_DEFAULT,
   autoOpenSubagent: true,
+  autoOpenTasks: true,
   agentTerminalTools: false,
   bottomPanelAutoTerminal: true,
   interceptOpenPath: true,

src/tasks-routes.ts

@@ -0,0 +1,257 @@
+/**
+ * Background-task routes of the /sidebar JSON API ('tasks.output' /
+ * 'tasks.kill'). The task LIST needs no route: it arrives through the
+ * harness's `session/tasks` push mirror (`tasksBySession` in the sessions
+ * list feed). The routes:
+ *
+ * - 'tasks.output' — REPLAYS the output the MODEL has read so far for one
+ *   task. The source is the owner session's own event log: `tool/call` rows
+ *   of `task_output` name the task via `arguments.task_id`, and the paired
+ *   `tool/result` rows carry the finalized content the model received.
+ *   Because the session store's in-memory log can lag the live append feed
+ *   after a host restart (the store session stays frozen at its
+ *   rehydration boundary), the plugin ALSO mirrors task_output events from
+ *   the live `session/event` feed and merges both sources (deduped by seq).
+ *   This touches NO DSH source: the model's `task_output` cursor is never
+ *   consumed, and the pane stays empty until the agent reads the task.
+ * - 'tasks.kill' — the registry's stock `kill` (a pristine DSH API),
+ *   fenced by the owning session via the live agent caller. Absent registry
+ *   → 503, mirroring the settings routes' optional-service downgrade.
+ */
+import type { Context, SidebarSessionEvent } from './context-types.ts'
+import { requireString, SidebarError } from './wire.ts'
+
+/** The two background-task routes of the sidebar API. */
+export interface SidebarTasksRoutes {
+  /** The output the model has read so far for one task (event replay, capped). */
+  output(payload: unknown): { text: string; truncated: boolean; read: boolean }
+  /** Request cancellation of one task (live tasks flip to stopping). */
+  kill(payload: unknown): { ok: true; outcome: 'requested' | 'already-finished' }
+}
+
+/** The 'tool/result' message envelope inside a session event's data. */
+interface ToolResultMessageLike {
+  source?: { kind?: unknown; callId?: unknown }
+  content?: unknown
+}
+
+/** One 'tool-result' content block (the inner blocks carry the text). */
+interface ToolResultBlockLike {
+  type?: unknown
+  content?: unknown
+  isError?: unknown
+}
+
+/**
+ * Extract the plain text of a finalized tool result: the text blocks inside
+ * the 'tool-result' block, joined with newlines. Error results and
+ * non-text blocks contribute nothing.
+ */
+function resultText(message: ToolResultMessageLike): string | undefined {
+  if (!Array.isArray(message.content)) return undefined
+  const parts: string[] = []
+  for (const block of message.content) {
+    if (block === null || typeof block !== 'object') continue
+    const candidate = block as ToolResultBlockLike
+    if (candidate.type !== 'tool-result') continue
+    const inner = candidate.content
+    if (!Array.isArray(inner)) continue
+    for (const item of inner) {
+      if (item === null || typeof item !== 'object') continue
+      const textItem = item as { type?: unknown; text?: unknown }
+      if (textItem.type === 'text' && typeof textItem.text === 'string') {
+        parts.push(textItem.text)
+      }
+    }
+  }
+  return parts.length > 0 ? parts.join('\n') : undefined
+}
+
+/** Whether a tool/result is an error result (the inner block's isError flag). */
+function resultIsError(message: ToolResultMessageLike): boolean {
+  if (!Array.isArray(message.content)) return false
+  return message.content.some((block) => {
+    if (block === null || typeof block !== 'object') return false
+    return (block as ToolResultBlockLike).type === 'tool-result'
+      && (block as ToolResultBlockLike).isError === true
+  })
+}
+
+/** Whether a task_output result carries no new output — the controller's
+ *  model-facing "(no new output)" body, noise for the human pane. */
+function isNoNewOutput(text: string): boolean {
+  return text.startsWith('(no new output)')
+}
+
+/** One compact task_output trace (a tool/call or its paired tool/result). */
+interface TaskOutputTrace {
+  seq: number
+  kind: 'call' | 'result'
+  /** The tool call identity pairing the two rows. */
+  callId: string
+  /** tool/call: the task id parsed from the model arguments. */
+  taskId?: string
+  /** tool/result: the finalized text the model received. */
+  text?: string
+  /** tool/result: whether the result was an error (read counts, text skipped). */
+  isError?: boolean
+}
+
+/** Extract the task_output trace of one raw session event (undefined = unrelated). */
+function traceOf(event: SidebarSessionEvent): TaskOutputTrace | undefined {
+  if (event.type === 'tool/call') {
+    const data = event.data as { name?: unknown; callId?: unknown; arguments?: unknown }
+    if (data.name !== 'task_output' || typeof data.callId !== 'string') return undefined
+    let taskId: string | undefined
+    try {
+      const args = JSON.parse(typeof data.arguments === 'string' ? data.arguments : '') as { task_id?: unknown }
+      if (typeof args.task_id === 'string') taskId = args.task_id
+    } catch {
+      // Malformed model arguments: not a task_output pair.
+    }
+    if (taskId === undefined) return undefined
+    return { seq: event.seq, kind: 'call', callId: data.callId, taskId }
+  }
+  if (event.type === 'tool/result') {
+    const message = (event.data as { message?: unknown }).message as ToolResultMessageLike | undefined
+    if (message === undefined) return undefined
+    const callId = message.source?.callId
+    if (typeof callId !== 'string') return undefined
+    return {
+      seq: event.seq,
+      kind: 'result',
+      callId,
+      text: resultText(message),
+      isError: resultIsError(message),
+    }
+  }
+  return undefined
+}
+
+/** Per-session cap of mirrored live traces (a bounded, lossy ring). */
+const MIRROR_MAX_ENTRIES = 200
+
+/**
+ * The live task_output mirror: subscribes to the session append feed and
+ * caches the task_output traces the session store's own log can lag behind
+ * (after a host restart the store session stays frozen at its rehydration
+ * boundary, so `session.events` misses everything appended since — the very
+ * reads the pane exists to show). Zero DSH writes: the api-proxy pushes the
+ * same feed to browsers.
+ */
+function createTaskOutputMirror(ctx: Context): { entries(sessionId: string): readonly TaskOutputTrace[] } {
+  const perSession = new Map<string, TaskOutputTrace[]>()
+  // tool/call identities per session, so unrelated tool/result rows are
+  // never cached (only task_output results pair with a cached call).
+  const callIds = new Map<string, Set<string>>()
+  if (typeof ctx.on !== 'function') {
+    // Test doubles without the event API degrade to seed-only replay.
+    return { entries: () => [] }
+  }
+  const dispose = ctx.on('session/event', (session, event) => {
+    const sessionId = (session as { id?: unknown } | null)?.id
+    if (typeof sessionId !== 'string') return
+    if (event.type === 'tool/call') {
+      const trace = traceOf(event)
+      if (trace?.kind !== 'call') return
+      let ids = callIds.get(sessionId)
+      if (ids === undefined) callIds.set(sessionId, ids = new Set())
+      ids.add(trace.callId)
+      push(sessionId, trace)
+    } else if (event.type === 'tool/result') {
+      const trace = traceOf(event)
+      if (trace?.kind !== 'result') return
+      if (!callIds.get(sessionId)?.has(trace.callId)) return
+      push(sessionId, trace)
+    }
+  })
+  ctx.effect(() => dispose, 'dsh-better-sidebar: task-output event mirror')
+
+  const push = (sessionId: string, trace: TaskOutputTrace): void => {
+    let list = perSession.get(sessionId)
+    if (list === undefined) perSession.set(sessionId, list = [])
+    list.push(trace)
+    if (list.length > MIRROR_MAX_ENTRIES) {
+      const removed = list.splice(0, list.length - MIRROR_MAX_ENTRIES)
+      const ids = callIds.get(sessionId)
+      if (ids !== undefined) {
+        for (const entry of removed) {
+          if (entry.kind === 'call') ids.delete(entry.callId)
+        }
+        if (ids.size === 0) callIds.delete(sessionId)
+      }
+    }
+  }
+
+  return { entries: (sessionId) => perSession.get(sessionId) ?? [] }
+}
+
+/**
+ * Build the tasks routes bound to the plugin context. `output` merges the
+ * owner session's own event log with the live task_output mirror; `kill`
+ * reads the tasks/agents services lazily and degrades to a 503 when the
+ * deployment lacks the registry.
+ * @param ctx - host plugin context.
+ * @param outputLimit - response cap for one output replay in bytes; longer
+ *   texts are sliced and flagged `truncated` (mirrors the fs.read cap).
+ */
+export function buildTasksApi(ctx: Context, outputLimit: number): SidebarTasksRoutes {
+  const tasks = ctx.get('tasks')
+  const agents = ctx.get('agents')
+  const mirror = createTaskOutputMirror(ctx)
+  /** The live caller whose session id the registry fence compares against. */
+  const callerOf = (sessionId: string) => agents?.get(sessionId)
+  /** Registry refusals become a 404 task-error; unknown and foreign ids are indistinguishable. */
+  const registryError = (error: unknown): SidebarError =>
+    new SidebarError('task-error', error instanceof Error ? error.message : String(error), 404)
+  return {
+    output(payload) {
+      const sessionId = requireString(payload, 'sessionId')
+      const id = requireString(payload, 'id')
+      // Merge the store's event log (durable seed + whatever it received)
+      // with the live mirror, deduped by seq — a trace never double-counts.
+      const bySeq = new Map<number, TaskOutputTrace>()
+      for (const event of ctx.sessions.get(sessionId)?.events ?? []) {
+        const trace = traceOf(event)
+        if (trace !== undefined) bySeq.set(trace.seq, trace)
+      }
+      for (const trace of mirror.entries(sessionId)) bySeq.set(trace.seq, trace)
+      // Pair calls with results in seq order: the model's reads, oldest first.
+      const taskOf = new Map<string, string>()
+      const parts: string[] = []
+      let read = false
+      for (const trace of [...bySeq.values()].sort((left, right) => left.seq - right.seq)) {
+        if (trace.kind === 'call') {
+          if (trace.taskId !== undefined) taskOf.set(trace.callId, trace.taskId)
+        } else if (taskOf.get(trace.callId) === id) {
+          read = true
+          if (trace.isError !== true && trace.text !== undefined && !isNoNewOutput(trace.text)) {
+            parts.push(trace.text)
+          }
+        }
+      }
+      const text = parts.join('\n')
+      return {
+        text: text.length > outputLimit ? text.slice(0, outputLimit) : text,
+        truncated: text.length > outputLimit,
+        read,
+      }
+    },
+    kill(payload) {
+      if (tasks === undefined) {
+        throw new SidebarError('task-error', 'the background-task registry is not mounted in this deployment', 503)
+      }
+      const sessionId = requireString(payload, 'sessionId')
+      const id = requireString(payload, 'id')
+      const record = payload as { reason?: unknown } | null
+      const reason = typeof record?.reason === 'string' && record.reason !== ''
+        ? record.reason
+        : 'user requested via sidebar'
+      try {
+        return { ok: true, outcome: tasks.kill(id, callerOf(sessionId), reason) }
+      } catch (error) {
+        throw registryError(error)
+      }
+    },
+  }
+}

src/wire.ts

@@ -15,6 +15,7 @@ export type SidebarErrorCode =
   | 'fs-error'
   | 'git-error'
   | 'pty-error'
+  | 'task-error'
   | 'settings-rejected'
   | 'settings-conflict'
   | 'internal'

tests/builtins.spec.ts

@@ -41,10 +41,10 @@ describe('built-in tab registrations', () => {
     }
   })
 
-  it('the subagent tab declares its auto-open related setting', () => {
+  it('the subagent tab declares its auto-open related settings', () => {
     const { service } = setup()
     const toggles = service.getTab('subagent')?.settings?.toggles ?? []
-    expect(toggles.map(t => t.key)).toEqual(['autoOpenSubagent'])
+    expect(toggles.map(t => t.key)).toEqual(['autoOpenSubagent', 'autoOpenTasks'])
   })
 
   it('the terminal tab declares the model terminal-tools related setting', () => {

tests/locales.spec.ts

@@ -0,0 +1,109 @@
+/**
+ * Locale-following spec: the sidebar copy follows the DSH locale service
+ * (`ctx.locale`, provided by @deepseek-ai/dsh-client-locale) when attached
+ * through `attachLocale`, and falls back to the browser language otherwise.
+ * Covers attach/detach, live switching, dictionary parity, and placeholder
+ * interpolation.
+ */
+import { afterEach, describe, expect, it } from 'vitest'
+import { LOCALE_NS, attachLocale, en, isZh, relativeTime, t, zh } from '../src/client/locales.ts'
+
+/** Minimal structural fake of the DSH LocaleService face the sidebar uses. */
+class FakeLocale {
+  active: string = 'en'
+  getSnapshot(): { active: string } {
+    return { active: this.active }
+  }
+  subscribe(_fn: () => void): () => void {
+    return () => {}
+  }
+  register(_ns: string, _locale: string, _dict: Record<string, string>): () => void {
+    return () => {}
+  }
+  switchTo(id: string): void {
+    this.active = id
+  }
+}
+
+/** Point the browser-language fallback at a specific language (undefined = none). */
+function stubNavigatorLanguage(lang: string | undefined): void {
+  Object.defineProperty(globalThis, 'navigator', {
+    value: lang === undefined ? undefined : { language: lang },
+    configurable: true,
+  })
+}
+
+afterEach(() => {
+  attachLocale(undefined)
+  stubNavigatorLanguage(undefined)
+})
+
+describe('locales (DSH i18n following)', () => {
+  it('falls back to the browser language without an attached service', () => {
+    stubNavigatorLanguage('en-US')
+    expect(t('explorer')).toBe('Explorer')
+    expect(isZh()).toBe(false)
+
+    stubNavigatorLanguage('zh-CN')
+    expect(t('explorer')).toBe('资源管理器')
+    expect(isZh()).toBe(true)
+  })
+
+  it('defaults to English when no locale service and no browser language are available', () => {
+    expect(t('explorer')).toBe('Explorer')
+    expect(isZh()).toBe(false)
+  })
+
+  it('follows the attached locale service instead of the browser language', () => {
+    stubNavigatorLanguage('en-US')
+    const locale = new FakeLocale()
+    attachLocale(locale)
+
+    locale.switchTo('zh')
+    expect(t('git')).toBe('源代码管理')
+    expect(isZh()).toBe(true)
+
+    // Live switch: the service's active locale wins even though the
+    // browser still asks for en-US.
+    locale.switchTo('en')
+    expect(t('git')).toBe('Source Control')
+    expect(isZh()).toBe(false)
+  })
+
+  it('detaches back to the browser-language fallback', () => {
+    const locale = new FakeLocale()
+    locale.switchTo('zh')
+    attachLocale(locale)
+    expect(t('terminal')).toBe('终端')
+
+    stubNavigatorLanguage('en-US')
+    attachLocale(undefined)
+    expect(t('terminal')).toBe('Terminal')
+  })
+
+  it('interpolates {name} placeholders in the active locale', () => {
+    const locale = new FakeLocale()
+    attachLocale(locale)
+    locale.switchTo('zh')
+    expect(t('timeMinutesAgo', { n: 5 })).toBe('5 分钟前')
+    locale.switchTo('en')
+    expect(t('timeMinutesAgo', { n: 5 })).toBe('5 min ago')
+  })
+
+  it('drives the relative-time chain through the active locale', () => {
+    const locale = new FakeLocale()
+    attachLocale(locale)
+    locale.switchTo('zh')
+    expect(relativeTime(new Date().toISOString())).toBe('刚刚')
+    locale.switchTo('en')
+    expect(relativeTime(new Date().toISOString())).toBe('just now')
+  })
+
+  it('registers a namespace distinct from DSH ui-sidebar\'s own \'sidebar\'', () => {
+    expect(LOCALE_NS).toBe('betterSidebar')
+  })
+
+  it('keeps the zh and en dictionaries key-set-equal', () => {
+    expect(Object.keys(en).sort()).toEqual(Object.keys(zh).sort())
+  })
+})

tests/plugin-shape.spec.ts

@@ -45,6 +45,8 @@ describe('dsh-better-sidebar plugin export shape', () => {
     expect(resolved.openByDefault).toBe(true)
     expect(resolved.defaultWidthPercent).toBe(30)
     expect(resolved.autoOpenSubagent).toBe(true)
+    // A new background task auto-opens the Tasks page too.
+    expect(resolved.autoOpenTasks).toBe(true)
     // The terminal tools default OFF (the feature is dormant until the user
     // enables it in the side card settings).
     expect(resolved.agentTerminalTools).toBe(false)
@@ -57,6 +59,6 @@ describe('dsh-better-sidebar plugin export shape', () => {
     const overridden = (PrefsSchema as unknown as {
       (input: Record<string, unknown> | undefined): Record<string, unknown>
     })({ openByDefault: false, defaultWidthPercent: 45 })
-    expect(overridden).toEqual({ openByDefault: false, defaultWidthPercent: 45, autoOpenSubagent: true, agentTerminalTools: false, bottomPanelAutoTerminal: true, interceptOpenPath: true, htmlViewerNoSandbox: false, htmlViewerDefaultUnsafe: false, browserNoSandbox: false, browserInterceptLinks: true, tabsEnabled: {}, viewersEnabled: {} })
+    expect(overridden).toEqual({ openByDefault: false, defaultWidthPercent: 45, autoOpenSubagent: true, autoOpenTasks: true, agentTerminalTools: false, bottomPanelAutoTerminal: true, interceptOpenPath: true, htmlViewerNoSandbox: false, htmlViewerDefaultUnsafe: false, browserNoSandbox: false, browserInterceptLinks: true, tabsEnabled: {}, viewersEnabled: {} })
   })
 })

tests/smoke.spec.ts

@@ -27,6 +27,8 @@ interface FakeContext {
   /** The settings service never appears in the smoke context: the inject
    *  callback must never run (mirror of cordis' service-less inject). */
   inject: (deps: readonly string[], callback: (sctx: never) => void) => () => void
+  /** Optional services (tasks/agents) are read lazily; absent → undefined. */
+  get: (key: string) => undefined
 }
 
 describe('host plugin smoke', () => {
@@ -56,6 +58,8 @@ describe('host plugin smoke', () => {
       // No settings service in the smoke context: the registration callback
       // never runs (cordis' service-less inject behaves the same).
       inject: () => () => {},
+      // No tasks/agents services: the tasks routes degrade to a 503.
+      get: () => undefined,
     }
     apply(ctx as never)
     expect(routes.map(route => route.path)).toEqual(['/sidebar/api', '/sidebar/bundle', '/sidebar/file', '/sidebar/html'])
@@ -315,6 +319,8 @@ describe('session cwd resolution over the API route', () => {
       effect: (fn: () => void | (() => void)) => { fn() },
       // No settings service: the namespace registration never runs.
       inject: () => () => {},
+      // No tasks/agents services in the smoke context: the routes degrade.
+      get: () => undefined,
     }
     apply(ctx as never)
     return routes.find(route => route.path === '/sidebar/api')!
@@ -464,6 +470,8 @@ describe('side card settings routes', () => {
         if (deps.includes('settings') && settings !== undefined) callback({ settings })
         return () => {}
       },
+      // No tasks/agents services: the tasks routes degrade to a 503.
+      get: () => undefined,
     }
     apply(ctx as never)
     return routes.find(route => route.path === '/sidebar/api')!
@@ -506,6 +514,7 @@ describe('side card settings routes', () => {
         openByDefault: true,
         defaultWidthPercent: 30,
         autoOpenSubagent: true,
+        autoOpenTasks: true,
         agentTerminalTools: false,
         bottomPanelAutoTerminal: true,
         interceptOpenPath: true,
@@ -647,6 +656,8 @@ describe('agent terminal tool gating', () => {
         if (deps.includes('settings')) callback({ settings })
         return () => {}
       },
+      // No tasks/agents services: the tasks routes degrade to a 503.
+      get: () => undefined,
     }
     apply(ctx as never)
     // Default off: no tools are registered even though the settings service is mounted.

tests/subagent-tasks-view.spec.tsx

@@ -0,0 +1,295 @@
+/**
+ * Subagent page tests for the background-task section: rows render from the
+ * `tasksBySession` mirror, clicking a row peeks its output through
+ * `tasks.output` with the OWNER session scope, the kill button needs a
+ * two-click confirm, settled rows offer no kill, and the output panel never
+ * polls while the page is hidden.
+ */
+// @vitest-environment jsdom
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { createElement, type ReactNode } from 'react'
+import { createRoot, type Root } from 'react-dom/client'
+import { act } from 'react-dom/test-utils'
+import { SubagentView } from '../src/client/SubagentView.tsx'
+import type { Context, SidebarSessionList } from '../src/context-types.ts'
+
+/** A subscribable sessions-list snapshot (mirror of the runtime list feed). */
+function makeStore(initial: SidebarSessionList) {
+  let snapshot = initial
+  const listeners = new Set<() => void>()
+  return {
+    getSnapshot: () => snapshot,
+    subscribe: (fn: () => void) => {
+      listeners.add(fn)
+      return () => { listeners.delete(fn) }
+    },
+    set(next: SidebarSessionList) {
+      snapshot = next
+      for (const fn of [...listeners]) fn()
+    },
+  }
+}
+
+type Store = ReturnType<typeof makeStore>
+
+/** The client context face SubagentView touches (history stub; everything else inert). */
+function makeCtx(store: Store): Context {
+  return {
+    sessions: {
+      list: store,
+      setSubagentCatalogOpen: () => {},
+      openSubagent: () => {},
+      open: () => {},
+      refreshSubagents: async () => {},
+    },
+    connection: {
+      api: {
+        subagents: {
+          history: async () => ({ result: { ok: true, value: { events: [], hasMore: false } } }),
+        },
+      },
+    },
+  } as unknown as Context
+}
+
+/** Render `node` into a detached body container under React's act(). */
+function mount(node: ReactNode): { container: HTMLDivElement; unmount: () => void } {
+  const container = document.createElement('div')
+  document.body.append(container)
+  const root: Root = createRoot(container)
+  act(() => { root.render(node) })
+  const unmount = (): void => {
+    act(() => { root.unmount() })
+    container.remove()
+  }
+  return { container, unmount }
+}
+
+const outputCalls: Array<{ sessionId: string; id: string }> = []
+const killCalls: Array<{ sessionId: string; id: string }> = []
+
+function jsonResponse(value: unknown): Response {
+  return { ok: true, status: 200, json: async () => value } as unknown as Response
+}
+
+function baseSnapshot(): SidebarSessionList {
+  return {
+    current: 'root',
+    byId: {
+      root: { id: 'root', displayTitle: '主会话', running: true },
+      child: { id: 'child', displayTitle: '子代理', origin: 'subagent', parentId: 'root', running: true },
+    },
+    subagentsByParent: {},
+    tasksBySession: {
+      root: [
+        { id: 'bash-1', kind: 'bash', label: 'sleep 300', status: 'running', startedAt: 1_000 },
+      ],
+      child: [
+        { id: 'bash-2', kind: 'bash', label: 'echo hi', status: 'completed', startedAt: 2_000, finishedAt: 3_000 },
+      ],
+    },
+  }
+}
+
+beforeEach(() => {
+  outputCalls.length = 0
+  killCalls.length = 0
+  vi.stubGlobal('fetch', async (url: string | URL | Request, init?: RequestInit) => {
+    const method = String(url).split('/').pop()
+    const body = JSON.parse(String(init?.body)) as { sessionId: string; id: string }
+    if (method === 'tasks.output') {
+      outputCalls.push({ sessionId: body.sessionId, id: body.id })
+      // bash-9 stands for a task the model never read (read:false).
+      return jsonResponse({
+        ok: true,
+        value: {
+          text: body.id === 'bash-9' ? '' : `output-of-${body.id}`,
+          truncated: false,
+          read: body.id !== 'bash-9',
+        },
+      })
+    }
+    if (method === 'tasks.kill') {
+      killCalls.push({ sessionId: body.sessionId, id: body.id })
+      return jsonResponse({ ok: true, value: { ok: true, outcome: 'requested' } })
+    }
+    throw new Error(`unexpected fetch ${String(url)}`)
+  })
+  Object.defineProperty(globalThis.navigator, 'language', { value: 'zh-CN', configurable: true })
+})
+
+afterEach(() => {
+  vi.unstubAllGlobals()
+  for (const el of document.querySelectorAll('body > div')) el.remove()
+})
+
+describe('SubagentView background tasks', () => {
+  it('renders the tree tasks with status, durations, and owner labels', () => {
+    const store = makeStore(baseSnapshot())
+    const { container, unmount } = mount(
+      createElement(SubagentView, { sessionId: 'root', active: true, ctx: makeCtx(store) }),
+    )
+    const text = container.textContent ?? ''
+    expect(text).toContain('后台命令')
+    expect(text).toContain('2 个后台命令 · 1 运行中')
+    // Both rows of the whole tree, owner-labeled (the tree spans two sessions).
+    expect(text).toContain('sleep 300')
+    expect(text).toContain('echo hi')
+    expect(text).toContain('主会话')
+    expect(text).toContain('子代理')
+    // Only the running row offers a kill button.
+    expect(container.querySelectorAll('button[aria-label="终止"]')).toHaveLength(1)
+    unmount()
+  })
+
+  it('renders nothing task-related when the mirror is empty', () => {
+    const store = makeStore({ current: 'root', byId: { root: { id: 'root', displayTitle: '主会话' } }, subagentsByParent: {}, tasksBySession: {} })
+    const { container, unmount } = mount(
+      createElement(SubagentView, { sessionId: 'root', active: true, ctx: makeCtx(store) }),
+    )
+    expect(container.textContent).not.toContain('后台命令')
+    unmount()
+  })
+
+  it('survives the mirror emptying while mounted (hook-order regression #300)', async () => {
+    const store = makeStore(baseSnapshot())
+    const { container, unmount } = mount(
+      createElement(SubagentView, { sessionId: 'root', active: true, ctx: makeCtx(store) }),
+    )
+    expect(container.textContent).toContain('sleep 300')
+    // The mirror empties (all tasks settled and dropped): the section must
+    // vanish WITHOUT reordering hooks — a hook below the empty-state return
+    // would crash React with "Rendered fewer hooks than expected" (the
+    // minified #300 the sidebar boundary surfaces with a retry button).
+    await act(async () => { store.set({ ...baseSnapshot(), tasksBySession: {} }) })
+    expect(container.textContent).not.toContain('后台命令')
+    // And returning tasks must work too, with the same hook order.
+    await act(async () => { store.set(baseSnapshot()) })
+    expect(container.textContent).toContain('sleep 300')
+    unmount()
+  })
+
+  it('shows the selected task output in the bottom dock, closeable', async () => {
+    const store = makeStore(baseSnapshot())
+    const { container, unmount } = mount(
+      createElement(SubagentView, { sessionId: 'root', active: true, ctx: makeCtx(store) }),
+    )
+    const row = container.querySelector('button[aria-label*="sleep 300"]') as HTMLButtonElement
+    await act(async () => { row.click() })
+    // The peek request carries the OWNER session (the fence compares it).
+    expect(outputCalls).toEqual([{ sessionId: 'root', id: 'bash-1' }])
+    expect(container.textContent).toContain('output-of-bash-1')
+    // Exactly one dock region exists (never one per row).
+    expect(container.querySelectorAll('[role="region"]')).toHaveLength(1)
+    // The selected row is marked, and the close button dismisses the dock.
+    expect(row.getAttribute('aria-pressed')).toBe('true')
+    const close = container.querySelector('button[aria-label="关闭"]') as HTMLButtonElement
+    await act(async () => { close.click() })
+    expect(container.textContent).not.toContain('output-of-bash-1')
+    expect(container.querySelectorAll('[role="region"]')).toHaveLength(0)
+    unmount()
+  })
+
+  it('switches the single dock between selected rows', async () => {
+    const store = makeStore(baseSnapshot())
+    const { container, unmount } = mount(
+      createElement(SubagentView, { sessionId: 'root', active: true, ctx: makeCtx(store) }),
+    )
+    const first = container.querySelector('button[aria-label*="sleep 300"]') as HTMLButtonElement
+    await act(async () => { first.click() })
+    expect(container.textContent).toContain('output-of-bash-1')
+    const second = container.querySelector('button[aria-label*="echo hi"]') as HTMLButtonElement
+    await act(async () => { second.click() })
+    // One dock, now fed by the second task (its owner session scopes the replay).
+    expect(outputCalls).toEqual([
+      { sessionId: 'root', id: 'bash-1' },
+      { sessionId: 'child', id: 'bash-2' },
+    ])
+    expect(container.querySelectorAll('[role="region"]')).toHaveLength(1)
+    expect(container.textContent).not.toContain('output-of-bash-1')
+    expect(container.textContent).toContain('output-of-bash-2')
+    unmount()
+  })
+
+  it('explains when the model has not read the task yet', async () => {
+    const snapshot = baseSnapshot()
+    snapshot.tasksBySession = {
+      root: [
+        ...(snapshot.tasksBySession?.root ?? []),
+        { id: 'bash-9', kind: 'bash', label: 'unread cmd', status: 'running', startedAt: 9_000 },
+      ],
+    }
+    const store = makeStore(snapshot)
+    const { container, unmount } = mount(
+      createElement(SubagentView, { sessionId: 'root', active: true, ctx: makeCtx(store) }),
+    )
+    const row = container.querySelector('button[aria-label*="unread cmd"]') as HTMLButtonElement
+    await act(async () => { row.click() })
+    // read:false → the pane explains the output awaits the model's task_output
+    // (never the model's cursor, so there is nothing to steal yet).
+    expect(container.textContent).toContain('等待模型读取该任务的输出')
+    unmount()
+  })
+
+  it('stays compact and functional with many tasks', async () => {
+    const many = Array.from({ length: 60 }, (_, index) => ({
+      id: `bash-${index + 10}`,
+      kind: 'bash' as const,
+      label: `bulk cmd ${index}`,
+      status: index % 2 === 0 ? ('running' as const) : ('completed' as const),
+      startedAt: 1_000 + index,
+      ...(index % 2 === 0 ? {} : { finishedAt: 2_000 + index, detail: 'exit code: 1' }),
+    }))
+    const store = makeStore({
+      current: 'root',
+      byId: { root: { id: 'root', displayTitle: '主会话' } },
+      subagentsByParent: {},
+      tasksBySession: { root: many },
+    })
+    const { container, unmount } = mount(
+      createElement(SubagentView, { sessionId: 'root', active: true, ctx: makeCtx(store) }),
+    )
+    expect(container.textContent).toContain('60 个后台命令 · 30 运行中')
+    expect(container.querySelectorAll('button[aria-label*="bulk cmd"]')).toHaveLength(60)
+    // Clicking a row anywhere in the long list still feeds the single dock.
+    const row = container.querySelector('button[aria-label*="bulk cmd 59"]') as HTMLButtonElement
+    await act(async () => { row.click() })
+    expect(outputCalls).toEqual([{ sessionId: 'root', id: 'bash-69' }])
+    expect(container.textContent).toContain('output-of-bash-69')
+    unmount()
+  })
+
+  it('kills a live task only after the two-click confirm', async () => {
+    const store = makeStore(baseSnapshot())
+    const { container, unmount } = mount(
+      createElement(SubagentView, { sessionId: 'root', active: true, ctx: makeCtx(store) }),
+    )
+    const kill = container.querySelector('button[aria-label="终止"]') as HTMLButtonElement
+    await act(async () => { kill.click() })
+    // First click only arms the confirm — no request leaves the page.
+    expect(killCalls).toEqual([])
+    const confirm = container.querySelector('button[aria-label="再次点击确认终止"]')
+    expect(confirm).not.toBeNull()
+    await act(async () => { (confirm as HTMLButtonElement).click() })
+    expect(killCalls).toEqual([{ sessionId: 'root', id: 'bash-1' }])
+    unmount()
+  })
+
+  it('does not poll the output while the page is hidden', async () => {
+    vi.useFakeTimers()
+    try {
+      const store = makeStore(baseSnapshot())
+      const { container, unmount } = mount(
+        createElement(SubagentView, { sessionId: 'root', active: false, ctx: makeCtx(store) }),
+      )
+      const row = container.querySelector('button[aria-label*="sleep 300"]') as HTMLButtonElement
+      await act(async () => { row.click() })
+      await act(async () => { await vi.advanceTimersByTimeAsync(10_000) })
+      // One peek for the initial load; the 2s poll never ran while inactive.
+      expect(outputCalls).toHaveLength(1)
+      unmount()
+    } finally {
+      vi.useRealTimers()
+    }
+  })
+})

tests/subagent-tasks.spec.ts

@@ -0,0 +1,165 @@
+/**
+ * Pure-helper tests for the Subagent page's background-task section:
+ * tree-membership collection, ordering, and status presentation mapping.
+ */
+import { describe, expect, it } from 'vitest'
+import {
+  collectTreeTasks,
+  detectNewTask,
+  formatTaskDuration,
+  isTaskLive,
+  orderTasks,
+  taskDotState,
+  taskStatusLabel,
+  treeSessionIds,
+} from '../src/client/subagent-tasks.ts'
+import type { SidebarSessionList, SidebarSessionSummary, SidebarTaskStatus, SidebarTaskView } from '../src/context-types.ts'
+
+/** The translator stub: renders duration templates like the real locale copy. */
+const templates: Record<string, string> = {
+  taskDurationSeconds: '{seconds}秒',
+  taskDurationMinutes: '{minutes}分{seconds}秒',
+  taskDurationHours: '{hours}小时{minutes}分',
+}
+const t = (key: string, params?: Record<string, string | number>): string => {
+  let text = templates[key] ?? key
+  if (params !== undefined) {
+    for (const [name, value] of Object.entries(params)) text = text.replaceAll(`{${name}}`, String(value))
+  }
+  return text
+}
+
+function summary(id: string, over: Partial<SidebarSessionSummary> = {}): SidebarSessionSummary {
+  return { id, displayTitle: `title-${id}`, ...over }
+}
+
+function task(id: string, over: Partial<SidebarTaskView> = {}): SidebarTaskView {
+  return { id, kind: 'bash', label: `cmd ${id}`, status: 'running', startedAt: 1_000, ...over }
+}
+
+describe('treeSessionIds', () => {
+  it('includes the root and every subagent-origin session whose chain reaches it', () => {
+    const byId = {
+      root: summary('root'),
+      child: summary('child', { origin: 'subagent', parentId: 'root' }),
+      grand: summary('grand', { origin: 'subagent', parentId: 'child' }),
+      orphan: summary('orphan', { origin: 'subagent', parentId: 'gone' }),
+      other: summary('other', { origin: 'subagent', parentId: 'other-root' }),
+    }
+    const ids = treeSessionIds(byId, 'root')
+    expect([...ids].sort()).toEqual(['child', 'grand', 'root'])
+  })
+
+  it('fails soft on parent cycles and yields nothing without a root', () => {
+    const byId = {
+      root: summary('root'),
+      a: summary('a', { origin: 'subagent', parentId: 'b' }),
+      b: summary('b', { origin: 'subagent', parentId: 'a' }),
+    }
+    expect(treeSessionIds(byId, 'root').size).toBe(1)
+    expect(treeSessionIds(byId, undefined).size).toBe(0)
+  })
+})
+
+describe('collectTreeTasks', () => {
+  it('collects tasks of the whole tree with owner titles, ignoring outside sessions', () => {
+    const byId = {
+      root: summary('root'),
+      child: summary('child', { origin: 'subagent', parentId: 'root' }),
+    }
+    const tasksBySession = {
+      root: [task('bash-1')],
+      child: [task('bash-2', { status: 'completed', finishedAt: 2_000 })],
+      stranger: [task('bash-9')],
+    }
+    const rows = collectTreeTasks(byId, tasksBySession, 'root')
+    expect(rows.map(row => [row.ownerSessionId, row.ownerTitle, row.task.id]))
+      .toEqual([['root', 'title-root', 'bash-1'], ['child', 'title-child', 'bash-2']])
+  })
+
+  it('returns an empty list for an absent mirror or empty sets', () => {
+    const byId = { root: summary('root') }
+    expect(collectTreeTasks(byId, undefined, 'root')).toEqual([])
+    expect(collectTreeTasks(byId, {}, 'root')).toEqual([])
+  })
+})
+
+describe('orderTasks', () => {
+  it('puts live rows first in start order, then settled rows newest-first', () => {
+    const row = (id: string, status: SidebarTaskStatus, startedAt: number, finishedAt?: number) => ({
+      ownerSessionId: 'root',
+      ownerTitle: 'root',
+      task: task(id, { status, startedAt, ...(finishedAt !== undefined ? { finishedAt } : {}) }),
+    })
+    const rows = [
+      row('old-settled', 'completed', 1_000, 2_000),
+      row('live-2', 'running', 4_000),
+      row('new-settled', 'killed', 1_500, 1_800),
+      row('live-1', 'stopping', 3_000),
+    ]
+    expect(orderTasks(rows).map(r => r.task.id)).toEqual(['live-1', 'live-2', 'old-settled', 'new-settled'])
+  })
+})
+
+describe('status presentation helpers', () => {
+  it('treats running and stopping as live', () => {
+    expect(isTaskLive(task('a', { status: 'running' }))).toBe(true)
+    expect(isTaskLive(task('b', { status: 'stopping' }))).toBe(true)
+    expect(isTaskLive(task('c', { status: 'completed' }))).toBe(false)
+    expect(isTaskLive(task('d', { status: 'killed' }))).toBe(false)
+    expect(isTaskLive(task('e', { status: 'failed' }))).toBe(false)
+  })
+
+  it('maps the five wire statuses to dot states and localized labels', () => {
+    expect(taskDotState('running')).toBe('ongoing')
+    expect(taskDotState('stopping')).toBe('warning')
+    expect(taskDotState('completed')).toBe('done')
+    expect(taskDotState('killed')).toBe('warning')
+    expect(taskDotState('failed')).toBe('error')
+    expect(taskStatusLabel('running', t)).toBe('taskStatusRunning')
+    expect(taskStatusLabel('stopping', t)).toBe('taskStatusStopping')
+    expect(taskStatusLabel('completed', t)).toBe('taskStatusCompleted')
+    expect(taskStatusLabel('killed', t)).toBe('taskStatusKilled')
+    expect(taskStatusLabel('failed', t)).toBe('taskStatusFailed')
+  })
+
+  it('formats durations in at most two adjacent units', () => {
+    expect(formatTaskDuration(0, t)).toBe('0秒')
+    expect(formatTaskDuration(45_000, t)).toBe('45秒')
+    expect(formatTaskDuration(90_000, t)).toBe('1分30秒')
+    expect(formatTaskDuration(3_661_000, t)).toBe('1小时1分')
+    // Negative or fractional input clamps to zero seconds.
+    expect(formatTaskDuration(-5, t)).toBe('0秒')
+  })
+})
+
+describe('detectNewTask', () => {
+  const list = (tasksBySession: Record<string, SidebarTaskView[]>): SidebarSessionList => ({
+    current: 'root',
+    byId: { root: { id: 'root', displayTitle: 'root' } },
+    subagentsByParent: {},
+    tasksBySession: tasksBySession,
+  })
+
+  it('fires on EVERY new task id for the session (not just the first)', () => {
+    expect(detectNewTask(list({}), list({ root: [task('bash-1')] }), 'root')).toBe(true)
+    expect(detectNewTask(
+      list({ root: [task('bash-1')] }),
+      list({ root: [task('bash-1'), task('bash-2')] }),
+      'root',
+    )).toBe(true)
+  })
+
+  it('stays quiet on settling, same ids, other sessions, or an absent mirror', () => {
+    // Settling only mutates status, never adds ids.
+    expect(detectNewTask(
+      list({ root: [task('bash-1')] }),
+      list({ root: [task('bash-1', { status: 'completed', finishedAt: 2_000 })] }),
+      'root',
+    )).toBe(false)
+    expect(detectNewTask(list({ root: [task('bash-1')] }), list({ root: [task('bash-1')] }), 'root')).toBe(false)
+    // Tasks owned by another session do not trigger the current one.
+    expect(detectNewTask(list({}), list({ child: [task('bash-1')] }), 'root')).toBe(false)
+    expect(detectNewTask(list({}), list({}), 'root')).toBe(false)
+  })
+})

tests/tasks-routes.spec.ts

@@ -0,0 +1,219 @@
+/**
+ * Host route tests for the background-task API ('tasks.output' / 'tasks.kill').
+ * 'tasks.output' REPLAYS the output the model has read so far from the owner
+ * session's event log (tool/call + tool/result pairs of task_output calls) —
+ * the model's cursor is never touched, so nothing is stolen and unread tasks
+ * report `read: false`. 'tasks.kill' uses the registry's stock kill, fenced
+ * by the owning session, with a 503 when the registry is absent.
+ */
+import { describe, expect, it, vi } from 'vitest'
+import { buildTasksApi } from '../src/tasks-routes.ts'
+import { SidebarError } from '../src/wire.ts'
+import type { Context, SidebarSessionEvent } from '../src/context-types.ts'
+
+/** A context whose `get` serves only the tasks/agents faces, with a session store. */
+function ctxWith(sessions: unknown, tasks: unknown, agents: unknown): Context {
+  return {
+    sessions,
+    get: (key: string) => (key === 'tasks' ? tasks : key === 'agents' ? agents : undefined),
+  } as unknown as Context
+}
+
+/** A context that additionally captures the session/event listener (live mirror). */
+function ctxWithFeed(sessions: unknown): {
+  ctx: Context
+  emit: (session: unknown, event: SidebarSessionEvent) => void
+} {
+  let listener: ((session: unknown, event: SidebarSessionEvent) => void) | undefined
+  const base = ctxWith(sessions, undefined, undefined) as unknown as {
+    on: (event: string, fn: (session: unknown, event: SidebarSessionEvent) => void) => () => void
+    effect: (fn: () => void | (() => void)) => void
+  }
+  base.on = (_event: string, fn) => {
+    listener = fn
+    return () => { if (listener === fn) listener = undefined }
+  }
+  // The vendored cordis runs the registration effect immediately.
+  base.effect = (fn) => { fn() }
+  return {
+    ctx: base as unknown as Context,
+    emit: (session, event) => { listener?.(session, event) },
+  }
+}
+
+/** A stub live agent (the fence compares `id` only). */
+const agent = (id: string) => ({ id, session: { header: { cwd: '/p' } } })
+
+/** One task_output tool/call event. */
+function taskOutputCall(seq: number, callId: string, taskId: string): SidebarSessionEvent {
+  return { type: 'tool/call', seq, time: seq, data: { name: 'task_output', callId, arguments: JSON.stringify({ task_id: taskId }) } }
+}
+
+/** One tool/result event carrying the finalized text the model received. */
+function taskOutputResult(seq: number, callId: string, text: string, over: { isError?: boolean } = {}): SidebarSessionEvent {
+  return {
+    type: 'tool/result',
+    seq,
+    time: seq,
+    data: {
+      message: {
+        source: { kind: 'tool', callId },
+        content: [{
+          type: 'tool-result',
+          toolCallId: callId,
+          isError: over.isError === true,
+          content: [{ type: 'text', text }],
+        }],
+      },
+    },
+  }
+}
+
+/** The owner session with the given event log. */
+function session(events: SidebarSessionEvent[]): unknown {
+  return { header: { cwd: '/p' }, events }
+}
+
+describe('tasks.output route (event replay)', () => {
+  it('concatenates the task_output results the model read for the task, oldest first', () => {
+    const events = [
+      taskOutputCall(0, 'c1', 'bash-1'),
+      taskOutputResult(1, 'c1', 'line1\nline2\n[status: running]'),
+      taskOutputCall(2, 'c2', 'bash-1'),
+      taskOutputResult(3, 'c2', 'line3\n[status: completed, exit code: 0]'),
+      // Another task's reads are ignored.
+      taskOutputCall(4, 'c3', 'bash-2'),
+      taskOutputResult(5, 'c3', 'other task output'),
+    ]
+    const api = buildTasksApi(ctxWith({ get: () => session(events) }, undefined, undefined), 512 * 1024)
+    expect(api.output({ sessionId: 's1', id: 'bash-1' })).toEqual({
+      text: 'line1\nline2\n[status: running]\nline3\n[status: completed, exit code: 0]',
+      truncated: false,
+      read: true,
+    })
+  })
+
+  it('skips the controller\'s "(no new output)" deltas and error results', () => {
+    const events = [
+      taskOutputCall(0, 'c1', 'bash-1'),
+      taskOutputResult(1, 'c1', 'real output\n[status: running]'),
+      taskOutputCall(2, 'c2', 'bash-1'),
+      taskOutputResult(3, 'c2', '(no new output)\n[status: running]'),
+      taskOutputCall(4, 'c3', 'bash-1'),
+      taskOutputResult(5, 'c3', 'boom', { isError: true }),
+    ]
+    const api = buildTasksApi(ctxWith({ get: () => session(events) }, undefined, undefined), 512 * 1024)
+    expect(api.output({ sessionId: 's1', id: 'bash-1' })).toEqual({
+      text: 'real output\n[status: running]',
+      truncated: false,
+      read: true,
+    })
+  })
+
+  it('reports read:false until the model reads the task (no registry call at all)', () => {
+    const events = [taskOutputCall(0, 'c1', 'bash-2')]
+    const tasks = { kill: vi.fn() }
+    const api = buildTasksApi(ctxWith({ get: () => session(events) }, tasks, undefined), 100)
+    expect(api.output({ sessionId: 's1', id: 'bash-1' })).toEqual({ text: '', truncated: false, read: false })
+    // The replay never touches the registry — the model's cursor is safe by construction.
+    expect(tasks.kill).not.toHaveBeenCalled()
+  })
+
+  it('mirrors live task_output events the store log misses (restart divergence)', () => {
+    // The store session is frozen at its rehydration boundary (no events);
+    // the read exists only on the live session/event feed.
+    const { ctx, emit } = ctxWithFeed({ get: () => session([]) })
+    const api = buildTasksApi(ctx, 512 * 1024)
+    expect(api.output({ sessionId: 's1', id: 'bash-1' })).toEqual({ text: '', truncated: false, read: false })
+
+    // The live feed delivers the task_output call and its result.
+    emit({ id: 's1' }, taskOutputCall(100, 'c-live', 'bash-1'))
+    emit({ id: 's1' }, taskOutputResult(101, 'c-live', 'live line\n[status: completed, exit code: 0]'))
+    expect(api.output({ sessionId: 's1', id: 'bash-1' })).toEqual({
+      text: 'live line\n[status: completed, exit code: 0]',
+      truncated: false,
+      read: true,
+    })
+
+    // Unrelated results are never cached (no task_output call paired them),
+    // and another session's feed does not leak into this one.
+    emit({ id: 's1' }, taskOutputResult(102, 'c-other', 'unpaired line'))
+    emit({ id: 's2' }, taskOutputCall(103, 'c-s2', 'bash-1'))
+    emit({ id: 's2' }, taskOutputResult(104, 'c-s2', 'other session line'))
+    expect(api.output({ sessionId: 's1', id: 'bash-1' })).toEqual({
+      text: 'live line\n[status: completed, exit code: 0]',
+      truncated: false,
+      read: true,
+    })
+    expect(api.output({ sessionId: 's2', id: 'bash-1' })).toEqual({
+      text: 'other session line',
+      truncated: false,
+      read: true,
+    })
+  })
+
+  it('merges store-log traces with live mirror traces without double-counting', () => {
+    // A seed read (seq 5) in the store log plus a live read (seq 106) that
+    // ALSO reached the store log would double-count — the seq dedupe keeps
+    // exactly one copy of each.
+    const events = [taskOutputCall(5, 'c-seed', 'bash-1'), taskOutputResult(6, 'c-seed', 'seed line')]
+    const { ctx, emit } = ctxWithFeed({ get: () => session(events) })
+    const api = buildTasksApi(ctx, 512 * 1024)
+    emit({ id: 's1' }, taskOutputCall(106, 'c-live', 'bash-1'))
+    emit({ id: 's1' }, taskOutputResult(107, 'c-live', 'live line'))
+    expect(api.output({ sessionId: 's1', id: 'bash-1' })).toEqual({
+      text: 'seed line\nlive line',
+      truncated: false,
+      read: true,
+    })
+  })
+
+  it('caps oversized replays with the truncated flag', () => {
+    const events = [taskOutputCall(0, 'c1', 'bash-1'), taskOutputResult(1, 'c1', 'x'.repeat(10_000))]
+    const api = buildTasksApi(ctxWith({ get: () => session(events) }, undefined, undefined), 100)
+    const value = api.output({ sessionId: 's1', id: 'bash-1' })
+    expect(value.text).toBe('x'.repeat(100))
+    expect(value.truncated).toBe(true)
+    expect(value.read).toBe(true)
+  })
+
+  it('rejects a missing sessionId or id as bad-request', () => {
+    const api = buildTasksApi(ctxWith({ get: () => undefined }, undefined, undefined), 100)
+    expect(() => api.output({ id: 'bash-1' })).toThrowError(expect.objectContaining<Partial<SidebarError>>({ code: 'bad-request' }))
+    expect(() => api.output({ sessionId: 's1' })).toThrowError(expect.objectContaining<Partial<SidebarError>>({ code: 'bad-request' }))
+  })
+})
+
+describe('tasks.kill route', () => {
+  it('kills with the forwarded reason and the live caller', () => {
+    const tasks = { kill: vi.fn(() => 'requested' as const) }
+    const agents = { get: vi.fn((id: string) => agent(id)) }
+    const api = buildTasksApi(ctxWith({ get: () => undefined }, tasks, agents), 100)
+    expect(api.kill({ sessionId: 's1', id: 'bash-1', reason: 'user pressed stop' }))
+      .toEqual({ ok: true, outcome: 'requested' })
+    expect(tasks.kill).toHaveBeenCalledWith('bash-1', agent('s1'), 'user pressed stop')
+  })
+
+  it('defaults the reason when none is supplied', () => {
+    const tasks = { kill: vi.fn(() => 'already-finished' as const) }
+    const api = buildTasksApi(ctxWith({ get: () => undefined }, tasks, undefined), 100)
+    expect(api.kill({ sessionId: 's1', id: 'bash-1' })).toEqual({ ok: true, outcome: 'already-finished' })
+    expect(tasks.kill).toHaveBeenCalledWith('bash-1', undefined, 'user requested via sidebar')
+  })
+
+  it('maps registry refusals to a 404 task-error', () => {
+    const tasks = { kill: vi.fn(() => { throw new Error('unknown task bash-9') }) }
+    const api = buildTasksApi(ctxWith({ get: () => undefined }, tasks, undefined), 100)
+    expect(() => api.kill({ sessionId: 's1', id: 'bash-9' })).toThrowError(
+      expect.objectContaining<Partial<SidebarError>>({ code: 'task-error', status: 404 }),
+    )
+  })
+
+  it('degrades to a 503 when the tasks registry is absent (output keeps working)', () => {
+    const api = buildTasksApi(ctxWith({ get: () => session([]) }, undefined, undefined), 100)
+    expect(() => api.kill({ sessionId: 's1', id: 'bash-1' })).toThrowError(
+      expect.objectContaining<Partial<SidebarError>>({ code: 'task-error', status: 503 }),
+    )
+    expect(api.output({ sessionId: 's1', id: 'bash-1' })).toEqual({ text: '', truncated: false, read: false })
+  })
+})

tests/unit.spec.ts

@@ -1150,6 +1150,7 @@ describe('side card preferences', () => {
         openByDefault: false,
         defaultWidthPercent: 60,
         autoOpenSubagent: false,
+        autoOpenTasks: true,
         agentTerminalTools: true,
         bottomPanelAutoTerminal: true,
         interceptOpenPath: true,
@@ -1168,6 +1169,7 @@ describe('side card preferences', () => {
         openByDefault: true,
         defaultWidthPercent: 33,
         autoOpenSubagent: true,
+        autoOpenTasks: true,
         agentTerminalTools: false,
         bottomPanelAutoTerminal: true,
         interceptOpenPath: true,
@@ -1186,6 +1188,7 @@ describe('side card preferences', () => {
         openByDefault: false,
         defaultWidthPercent: 40,
         autoOpenSubagent: true,
+        autoOpenTasks: true,
         agentTerminalTools: false,
         bottomPanelAutoTerminal: true,
         interceptOpenPath: true,
@@ -1205,6 +1208,11 @@ describe('side card preferences', () => {
       .toBe(false)
     expect((await loadPrefs(wire({ openByDefault: true, defaultWidthPercent: 40, agentTerminalTools: true }))).agentTerminalTools)
       .toBe(true)
+    // The task auto-open is ON by default; only an explicit false turns it off.
+    expect((await loadPrefs(wire({ openByDefault: true, defaultWidthPercent: 40, autoOpenTasks: 1 }))).autoOpenTasks)
+      .toBe(true)
+    expect((await loadPrefs(wire({ openByDefault: true, defaultWidthPercent: 40, autoOpenTasks: false }))).autoOpenTasks)
+      .toBe(false)
   })
 
   it('defaults interceptOpenPath to true; only an explicit false turns the takeover off', async () => {
@@ -1234,9 +1242,9 @@ describe('side card preferences', () => {
     const store = createSidebarStore()
     // Node environment: no window → the width falls back to PANEL_DEFAULT,
     // while the open flag still follows the preference.
-    store.setPrefs({ openByDefault: false, defaultWidthPercent: 45, autoOpenSubagent: true, agentTerminalTools: false, bottomPanelAutoTerminal: true, interceptOpenPath: true, htmlViewerNoSandbox: false, htmlViewerDefaultUnsafe: false, browserNoSandbox: false, browserInterceptLinks: true, tabsEnabled: {}, viewersEnabled: {} })
+    store.setPrefs({ openByDefault: false, defaultWidthPercent: 45, autoOpenSubagent: true, autoOpenTasks: true, agentTerminalTools: false, bottomPanelAutoTerminal: true, interceptOpenPath: true, htmlViewerNoSandbox: false, htmlViewerDefaultUnsafe: false, browserNoSandbox: false, browserInterceptLinks: true, tabsEnabled: {}, viewersEnabled: {} })
     store.setSession('fresh-session')
-    expect(store.getPrefs()).toEqual({ openByDefault: false, defaultWidthPercent: 45, autoOpenSubagent: true, agentTerminalTools: false, bottomPanelAutoTerminal: true, interceptOpenPath: true, htmlViewerNoSandbox: false, htmlViewerDefaultUnsafe: false, browserNoSandbox: false, browserInterceptLinks: true, tabsEnabled: {}, viewersEnabled: {} })
+    expect(store.getPrefs()).toEqual({ openByDefault: false, defaultWidthPercent: 45, autoOpenSubagent: true, autoOpenTasks: true, agentTerminalTools: false, bottomPanelAutoTerminal: true, interceptOpenPath: true, htmlViewerNoSandbox: false, htmlViewerDefaultUnsafe: false, browserNoSandbox: false, browserInterceptLinks: true, tabsEnabled: {}, viewersEnabled: {} })
     const snapshot = store.getSnapshot()
     expect(snapshot.sessionId).toBe('fresh-session')
     expect(snapshot.state?.panelOpen).toBe(false)
@@ -1272,7 +1280,7 @@ describe('side card preferences', () => {
 
   it('skips the default explorer tab when the explorer type is disabled', () => {
     const store = createSidebarStore()
-    store.setPrefs({ openByDefault: true, defaultWidthPercent: 30, autoOpenSubagent: true, agentTerminalTools: false, bottomPanelAutoTerminal: true, interceptOpenPath: true, htmlViewerNoSandbox: false, htmlViewerDefaultUnsafe: false, browserNoSandbox: false, browserInterceptLinks: true, tabsEnabled: { explorer: false }, viewersEnabled: {} })
+    store.setPrefs({ openByDefault: true, defaultWidthPercent: 30, autoOpenSubagent: true, autoOpenTasks: true, agentTerminalTools: false, bottomPanelAutoTerminal: true, interceptOpenPath: true, htmlViewerNoSandbox: false, htmlViewerDefaultUnsafe: false, browserNoSandbox: false, browserInterceptLinks: true, tabsEnabled: { explorer: false }, viewersEnabled: {} })
     store.setSession('no-explorer')
     const state = store.getSnapshot().state!
     const tabs = allLeaves(state.splits).flatMap(leaf => leaf.tabs)
@@ -1280,7 +1288,7 @@ describe('side card preferences', () => {
     expect(state.splits.kind).toBe('leaf')
     // Re-enabling seeds the explorer tab again.
     const openStore = createSidebarStore()
-    openStore.setPrefs({ openByDefault: true, defaultWidthPercent: 30, autoOpenSubagent: true, agentTerminalTools: false, bottomPanelAutoTerminal: true, interceptOpenPath: true, htmlViewerNoSandbox: false, htmlViewerDefaultUnsafe: false, browserNoSandbox: false, browserInterceptLinks: true, tabsEnabled: {}, viewersEnabled: {} })
+    openStore.setPrefs({ openByDefault: true, defaultWidthPercent: 30, autoOpenSubagent: true, autoOpenTasks: true, agentTerminalTools: false, bottomPanelAutoTerminal: true, interceptOpenPath: true, htmlViewerNoSandbox: false, htmlViewerDefaultUnsafe: false, browserNoSandbox: false, browserInterceptLinks: true, tabsEnabled: {}, viewersEnabled: {} })
     openStore.setSession('with-explorer')
     const openTabs = allLeaves(openStore.getSnapshot().state!.splits).flatMap(leaf => leaf.tabs)
     expect(openTabs.map(tab => tab.type)).toEqual(['explorer'])