chore: v0.7.0 — 版本升级（客户端懒加载、移动端体验、内容打开自动展开）

feat: 内容型打开自动展开承载面板（宽视口）
宽视口下 openTab 带 path/url seed 时，承载落点 pane 的面板折叠则自动展开：落点在底部树展开底部面板，否则展开右侧面板；去重聚焦既有 tab 同样展开（打开必须落在视野内）。窄视口抽屉逻辑不变；类型型打开（+ 菜单、agent 终端自动补 tab）不展开。同步 AGENTS.md / README 文档与测试。
2026-08-12 18:39:19 +08:00 · 2026-08-12 18:39:17 +08:00 · 2026-08-12 18:27:28 +08:00 · 2026-08-12 18:20:34 +08:00 · 2026-08-12 18:19:44 +08:00 · 2026-08-12 16:54:36 +08:00
51 changed files with 3867 additions and 547 deletions
@@ -364,6 +364,9 @@ interface BetterSidebarService {
   * url 可选：落地后把 tab 的 path 预填为 URL（侧边栏浏览器导航种子，
   * 通常配合 hostname title；对 createTab 铸造的 tab 同样生效）。
   * 被设置禁用的类型是 no-op（console.warn 提示）。
+   * 内容型打开（带 path/url seed）必须落在视野内：承载落点 pane 的面板
+   * 折叠时自动展开（右侧面板；落点 pane 在底部树则展开底部面板；窄视口
+   * 展开合并抽屉）；类型型打开（+ 菜单、agent 终端自动补 tab）不展开。
   */
  openTab(seed: { type: string; title?: string; path?: string; diff?: SidebarTab['diff']; id?: string; url?: string }): void
  /** 关闭一个 tab */
@@ -396,6 +399,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`） |
+| **懒加载 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` 纯渲染函数）不变 |

 ---

@@ -1,6 +1,6 @@
 # dsh-better-sidebar

-> DeepSeek Harness Web GUI 的 **VSCode 风格右侧侧边栏**插件：文件管理、编辑预览、内嵌浏览器、真实终端、Git 面板、Subagent 页面，一个面板全部搞定。
+> DeepSeek Harness Web GUI 的 **VSCode 风格侧边栏**插件：文件管理、编辑预览、内嵌浏览器、真实终端、Git 面板、Subagent 页面——**右侧栏 + 底部面板双工作台**，一个插件全部搞定。

 <img width="4632" height="2720" alt="image" src="https://github.com/user-attachments/assets/39d86636-7654-412f-86ea-c60a2d5f20f0" />

@@ -8,13 +8,16 @@

 - **🗂️ 资源管理器**：懒加载目录树（根 = 会话 cwd）、点击在侧边栏打开、行尾 `@文件` 引用到输入框、右键复制路径
 - **📝 编辑与预览**：CodeMirror 6 多语言高亮 + Ctrl/Cmd+S 原子保存；图片 / Markdown（预览/编辑切换）/ HTML（沙箱 iframe 预览，相对资源可加载）/ PDF / Word / Excel / PPT 内联预览，切换 Tab 不丢草稿
- **🌐 浏览器**：内嵌网页浏览 tab（多开），后退/前进/刷新 +「在浏览器中打开」；页面在**沙箱 iframe** 中运行（不透明源：无法访问界面数据与本地文件，拒绝 localhost 等本机地址），界面实时显示沙箱状态、可临时解锁（关闭时红色警示）；被站点拒绝嵌入（X-Frame-Options）时显示原因面板；聊天/界面里的 http(s) 外链默认在侧边栏打开
+- **⚡ 客户端懒加载**：Office / 终端 / 代码编辑器等重依赖按需分块加载——启动只拉 ~325KB 核心，打开 .xlsx 才拉 Univer（~20MB）、打开 .docx 只拉 docx 预览器、打开终端才拉 xterm；首次打开短暂 loading 后即用（详见 `docs/plans/2026-08-12-lazy-chunks-design.md`）
+- **🌐 浏览器**：内嵌网页浏览 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 拓扑、点击直达执行记录、实时工具调用轮询、新子代理自动展开
- **🔧 分栏工作台**：拖 Tab 拆分/合并分栏、分隔线调比例、宽度拖拽、折叠 + 全屏
- **🔁 会话隔离**：布局/分栏/Tab 按会话持久化（localStorage），陈旧状态自动净化；聊天「产出文件」改在侧边栏打开
- **⚙️ 声明式设置**：设置页「侧边卡片」分区按注册表渲染功能清单（小卡片网格，高亮 = 启用），每项可独立开/关；二级设置（子代理自动展开、终端工具、沙箱开关等）经齿轮按钮在原生弹窗中编辑
+- **🪟 底部面板**：独立的第二个工作台（与右侧栏同类的标签页），只挤占中间 Agent 输出区、不覆盖左右侧边栏；**首次展开自动开一个新终端**（终端卡片二级设置可关）；右上角 x 一键折叠
+- **📱 移动端**：视口 < 768px（真正的移动端宽度，不对齐宿主 1024 断点）时只显示右侧栏——进入窄屏时底部面板的标签页**直接并入右侧栏标签条**，右上角只剩一枚开关，面板为全宽抽屉；新会话默认收起，聊天里点文件/外链自动展开，不挤压对话区
+- **🔧 分栏工作台**：拖 Tab 拆分/合并分栏（可**跨面板拖 Tab**）、分隔线调比例；右上角持久按钮簇（底栏 + 侧拉 glyph）折叠/展开两个面板；两面板共享拐角双向拖动调节尺寸，拖动 rAF 直写 DOM 保持流畅
+- **🔁 会话隔离**：布局/分栏/Tab/两面板状态按会话持久化（localStorage），陈旧状态自动净化；聊天「产出文件」改在侧边栏打开（面板折叠时自动展开）
+- **⚙️ 声明式设置**：设置页「侧边卡片」分区按注册表渲染功能清单（小卡片网格，高亮 = 启用），每项可独立开/关；二级设置（子代理自动展开、终端工具、底部面板首展自动开终端、沙箱开关等）经齿轮按钮在原生弹窗中编辑
 - **🔌 服务化**：暴露 `ctx.betterSidebar` 服务，其他插件可注册侧边栏 tab 与文件预览器（内置 7 tab + 9 viewer 也走同一服务，详见 [AGENTS.md](./AGENTS.md)）

 ## ⌨️ 快捷键
@@ -116,6 +119,7 @@ pnpm watch        # tsdown --watch
 - `.xlsx` 预览不保留单元格样式（SheetJS 社区版限制）；Office/PPTX 预览内联进 client bundle（约 23MB），首次加载较慢
 - 浏览器沙箱无登录态/第三方 Cookie 受限，部分站点登录需走弹窗；被 `X-Frame-Options`/`frame-ancestors` 拒绝嵌入的站点（如 arxiv.org）显示原因面板（含「在浏览器中打开」）；iframe 内部跳转不进后退栈
 - HTML 预览渲染的是已保存文件（不反映未保存草稿）
+- 移动端（<768px）无底部面板：进入窄屏时其标签页一次性并入右侧栏（迁移后回桌面仍保留在右侧栏），桌面端的底部面板只在宽视口下可用；移动端底部首展自动开终端不触发

 ## 🖥️ 平台支持

@@ -0,0 +1,88 @@
+# 客户端懒加载分块（lazy chunks）设计
+
+> 日期:2026-08-12
+> 状态:已实现
+> 范围:`dsh-better-sidebar` 插件,客户端 bundle 拆分
+
+## 1. 背景与问题
+
+改造前客户端是单文件 bundle(`lib/client.js`,约 24.6MB),页面启动时全部**下载 + 解析 + 执行**。实测构成(按 sourcemap 源字节):
+
+| 依赖 | 体积 | 用途 |
+|---|---|---|
+| `@univerjs/*` 全家桶 + echarts/zrender 等 | ~18MB | .xlsx 预览 |
+| `@codemirror/*` + `@lezer/*` | ~1.9MB | 文本编辑器高亮 |
+| `xlsx`(SheetJS) | ~0.6MB | .xlsx 解析 |
+| `@aiden0z/pptx-renderer` | ~0.5MB | .pptx 预览 |
+| `xterm` | ~0.3MB | 终端 |
+| `docx-preview` + `jszip` | ~0.2MB | .docx 预览 |
+| 插件自身代码 | ~0.35MB | — |
+
+虽然 `office-view.tsx` 用了动态 `import()`,但 `codeSplitting: false` 只保证**延迟执行**(`Promise.resolve().then(() => (init_docx_preview(), ...))`),下载与解析成本仍在启动时;且 `xlsx-to-univer.ts` 对 `@univerjs/presets` 的静态 value-import 让 Univer 核心实际在启动时执行。
+
+**目标**:重依赖拆成独立脚本,首次打开对应功能才下载/解析/执行;启动只拉核心(~325KB)。
+
+## 2. 机制
+
+chunk 脚本**不经过** `window.__ModuleLoader__` / `ClientModuleSystem.import()` 的物化路径——模块系统的 import() 只解析 seed word / shell-own 模块 / 已注册 factory / boot graph row,chunk id 四者皆非,解析行为依赖 DSH 版本(实测某些版本在 factory 已注册时仍抛 "cannot resolve")。因此改为插件自有的全局 factory 注册表:
+
+1. **构建期**:每个 chunk 是独立 tsdown 浏览器 bundle(`lib/client-<name>.js`),脚本首行为:
+   ```js
+   globalThis.__dshChunks__ = globalThis.__dshChunks__ || {};
+   globalThis.__dshChunks__["terminal"] = (require) => { /* CJS 闭包体 */ };
+   ```
+   与主 bundle 相同的 externals(react 等走 module table)、纯度门、CSS 内联管线;`codeSplitting: false` 保持单文件。
+2. **运行期** `loadChunk(name)`:
+   - 注入 `<script src="/sidebar/bundle/<name>.js">`(经典同源脚本;官方 `/plugins/<id>/client.js` 路由的路径白名单无法服务任意文件名,故走插件自有路由);
+   - 从 `globalThis.__dshChunks__[name]` 读取 factory(脚本执行即赋值,幂等——重复执行覆盖槽位,无 "duplicate factory registration" 错误类);
+   - 用**自定义 require** 物化:externals(CLIENT_EXTERNALS 清单)经 `__DSH_MODULES__.import(spec)` 的 **seed 分支**逐一解析(页面级记忆化;解析失败的 spec 标记未解析,仅当 chunk 实际 require 时才报错)——seed 分支是模块系统最稳定、跨版本一致的部分。
+
+## 3. 分块清单
+
+| chunk 名 | 入口 | 内容 | 构建产物 | 触发 |
+|---|---|---|---|---|
+| `xlsx` | `src/client/chunks/xlsx.tsx` | `XlsxView` + Univer 全家桶 + xlsx + Univer CSS | lib/client-xlsx.js(~20MB) | 打开 .xlsx |
+| `docx` | `src/client/chunks/docx.tsx` | `DocxView` + docx-preview + jszip | lib/client-docx.js(~330KB) | 打开 .docx |
+| `pptx` | `src/client/chunks/pptx.tsx` | `PptxView` + pptx-renderer | lib/client-pptx.js(~2.4MB) | 打开 .pptx |
+| `terminal` | `src/client/chunks/terminal.tsx` | `TerminalView` + xterm + addon-fit + xterm.css | lib/client-terminal.js(~450KB) | 打开终端 tab |
+| `editor` | `src/client/chunks/editor.tsx` | `TextEditor` + @codemirror/* + lang.ts + cm-themes | lib/client-editor.js(~1.6MB) | 打开 code/md/html 文件 |
+| 核心 | `src/client/index.tsx` | 其余全部 | lib/client.js(~325KB) | 启动 |
+
+关键拆分:**`office-view.tsx` 拆为 `docx-view.tsx` + `xlsx-view.tsx` + `office-shared.tsx`**(共享 `LoadState`/`BinaryFallback`)。若不拆,docx chunk 会经共享文件静态拖入 `xlsx-to-univer` → Univer 14.5MB。原路径 `office-view.tsx` 保留为 re-export 垫片,兼容 `./src/*` 深导入。
+
+## 4. 缓存契约(三层,各带失败路径)
+
+| 层 | 机制 | 失败路径 |
+|---|---|---|
+| 内存 | `loadChunk` 每 chunk 一个 in-flight promise,并发去重,常驻到 `resetChunks` | 失败删除缓存项 → 下次调用重试 |
+| 执行 | 脚本执行即覆盖全局注册表槽位(赋值幂等) | 物化失败清缓存 → 重试重新注入 + 重新执行脚本 |
+| HTTP | `/sidebar/bundle` 路由 `cache-control: no-cache` + ETag(内容哈希,按 mtime/size 记忆化),`If-None-Match` 命中返回 304 | 页面刷新/HMR 重激活时 304 免重下载 17MB;文件变化 ETag 轮转返回 200 |
+
+**HMR**:`apply()` 每次激活调用 `resetChunks()`(清内存缓存 + externals 记忆),热更新后重新拉取新代码。chunk 源码单独改动需手动刷新页面(HMR 轮询只盯 client.js)。
+
+## 5. 对外 API 兼容性(硬约束)
+
+- `ctx.betterSidebar` 服务方法签名与行为零变化;懒加载只作用于**内置** descriptor,外部插件注册的原样存储/渲染。
+- `component` 契约 `(props) => ReactNode` 保持:懒包装是**纯渲染函数**(函数体无 hooks,hooks 在内部 `LazyChunkView`),兼容 Sidebar 的函数式调用与 EditorHost 的 `createElement` 渲染两种风格。
+- 内置 viewer/tab 的 id、exts、priority、detect、icon、title、settings 全部不变 → `matchFileViewer` 语义、外部插件同扩展名高优先级覆盖、设置页清单不变。
+- 公开类型面(`./client/service`、`./client/api`)不变;无新增 peerDeps。
+- 契约测试:`tests/lazy-chunk.spec.tsx` 钉住"component 可直接函数调用不抛错"。
+
+## 6. 边界与失败模式
+
+- chunk 加载/执行/物化失败 → 视图级错误 + 重试 UI(`css.editorError` + `css.terminalRetry`),面板其余部分不受影响;
+- host 旧版本无 `/sidebar/bundle` 路由(404) → 同样的错误 + 重试,升级 host 后重试即可;
+- `window.__DSH_MODULES__` 缺失(异常环境) → 明确报错,不触网;
+- chunk 注册 id 恒定 `dsh-better-sidebar/<name>`,两渠道共用(每页只活一个渠道——双渠道并存本就双挂载,属既有破损组合);
+- 跨 chunk 复用:`t()`/`api.ts`/`SandboxStatusBar`/`clsx`/`sidebar.module.css` 等无状态小模块允许在各 chunk 内联(几十 KB 级重复),避免 chunk→主 bundle require 的脆弱耦合;
+- CSS:`sidebar.module.css` 的 tagId 与官方渠道核心一致 → 幂等跳过注入;registry 渠道会多注入一份同内容样式(数据标签差异,无功能影响);xterm.css/Univer.css 随各自 chunk 注入。
+
+## 7. 实施偏差记录
+
+- 原设想 React.lazy + Suspense 被否决:错误处理需 error boundary,重试语义差;改用有状态包装组件(loading/error/retry 三态),与本库"每个视图自带 loading/error/retry"风格一致。
+- 原设想 chunk 注册 id 按渠道区分(`__DSH_PLUGIN_ID__` define)被否决:chunk 文件两渠道共用,恒定槽位即可;避免重复构建 6 份产物。
+- `resetChunks` 同时清空测试注册表(测试隔离需要)。
+- `lazy-chunk.tsx` 内部渲染用 `ComponentType<any>` 状态成员规避 React 18 createElement 泛型重载限制(仅内部一处显式 any)。
+- **v2(运行时修复)**:最初实现经 `window.__ModuleLoader__.load({id})` 注册 chunk factory、再 `__DSH_MODULES__.import(id)` 物化——真实环境报 `client-modules: cannot resolve "dsh-better-sidebar/terminal"`(某 DSH 版本的 import() 不解析已注册的非 boot 图 id)。改为全局 factory 注册表(`globalThis.__dshChunks__`) + 自定义 externals require(seed 分支),彻底不依赖模块系统的 factory 解析行为;`resetChunks` 不再需要 invalidate。
+- **v3(运行时修复)**:terminal 懒包装把整个 `TabComponentProps` 原样透传,但 `TerminalView` 的 props 是 `{ scope, tabId, store }` 而 `TabComponentProps` 只有 `tab` 对象、没有 `tabId` → `tabId` 为 undefined → `isAgentTabId` 里 `undefined.startsWith` 崩溃(`dsh-better-sidebar: Cannot read properties of undefined (reading 'startsWith')`)。修复:descriptor 显式映射 `tabId={tab.id}`,懒包装的 props 泛型 = TerminalView 真实签名(`{ scope, tabId, store }`);回归测试钉住映射(lazy-chunk.spec.tsx)。**教训:懒包装的 props 泛型必须等于目标组件真实 props,而非描述符 props 全集**。
+- **v2 附加**:bundled 产物经真实 `ClientModuleSystem`(带真实 react seed)端到端验证——5 个 chunk 均能物化出真实 React 组件;产物契约由 `tests/chunk-artifact.spec.ts` 长期钉住(脚本执行赋值槽位 + factory 可被 externals require 物化)。
@@ -0,0 +1,77 @@
+# 移动端（窄视口 <768px）侧边栏布局设计
+
+**日期**：2026-08-12
+**状态**：已实施（本文档含实施偏差记录）
+**目标版本**：v0.7.0
+
+## 1. 目标
+
+按**视口宽度**（<768px——"真正的移动端宽度"，刻意不对齐宿主 1024 断点）切换移动端侧边栏体验：
+
+1. 移动端**不提供底部面板按钮**（右上角按钮簇只剩一枚右侧面板开关）。
+2. **合并显示 = 只显示右侧栏**：进入窄屏时底部面板的标签页**直接并入右侧栏**（一次性状态迁移），右侧栏成为全宽抽屉，底部面板浮层整体不存在。
+3. 附带移动端优化：新会话默认收起抽屉、文件/外链打开自动展开、宽度拖动条禁用、布局不挤压（抽屉悬浮）、窄屏标签收窄。
+
+## 2. 非目标
+
+- 不改持久化 schema：`bottomOpen` / `bottomHeight` / `bottomSplits` 字段原样保留。
+- 不改桌面行为：≥768px 时双面板布局与之前完全一致（含布局挤压、拐角、底部首展自动终端）。
+- 不改公开服务 API、PrefsSchema、host 半。
+- 不处理 DSH 详情栏（宿主让步链在 <~996px 自动关闭详情栏，与本改动无交互）。
+
+## 3. 现状回顾
+
+- `Sidebar.tsx` 渲染两个独立浮层：右侧面板（全高、宽度可拖、布局挤压 `--dsh-sidebar-width`）与底部面板（只挤中间列、高度可拖、右上角按钮簇双按钮、共享拐角）。
+- 底部面板状态字段：`bottomOpen` / `bottomHeight`（钳制 `[BOTTOM_MIN, innerHeight-PANEL_MIN]`）/ `bottomOpenedOnce` / `bottomSplits`（独立 split 树，pane/tab id 全局唯一）。
+- 首次展开底部面板自动开终端（`bottomPanelAutoTerminal` pref）。
+
+## 4. 设计
+
+### 4.1 断点模块（新 `src/client/breakpoints.ts`）
+
+- `NARROW_MAX_WIDTH = 768`；`isNarrowWidth(width)` 纯函数；`useNarrowViewport()` hook（初始读 `window.innerWidth`，resize + rAF 节流，`typeof window` 守卫；不用 matchMedia——jsdom 未实现）。
+- CSS 侧配对 `@media (max-width: 767px)`（767 ≡ <768），两端注释互指。
+- 刻意**不对齐**宿主 `SIDEBAR_AUTO_COLLAPSE = 1024`：1024px 窗口（小笔记本、分屏）保留桌面双面板；只有手机/竖屏平板才进移动布局。
+
+### 4.2 合并 = 底部标签并入右侧栏（状态迁移）
+
+- **新 reducer `migrateBottomTabs(state)`**（`state.ts`）：
+  - 底部树所有标签按深度优先序**追加到右侧树第一个 leaf**（`firstLeaf(splits)`）的标签条；
+  - 底部树清空（结构保留——桌面端回显欢迎卡片）、`bottomOpen=false`、`activePane` 指向右侧树第一个 leaf（保证迁移后新开的标签落在可见面板）；
+  - 幂等：底部无标签且面板已关且 activePane 不在底部树时返回同一引用。
+- **Sidebar 触发 effect**：`narrow && sessionId 已定义` 时执行（覆盖：窄屏挂载、会话切换、桌面→窄屏过渡）；幂等性保证其自然收敛，不循环。
+- 迁移是**永久**的（符合"直接丢到右侧栏中"）：回桌面后标签仍留在右侧树，底部面板为空（欢迎卡片）；用户可在桌面重新往底部面板开标签，再进窄屏会再次迁移。
+- 迁移后右侧栏用**现有 `Workbench` 原样渲染**——零视图层特判、零 action 路由修补（标签真实住在右侧树，close/activate/drag 全部走原路径）。
+
+### 4.3 窄屏渲染（`Sidebar.tsx`）
+
+- 面板宽度 `100vw`（全宽抽屉）；`--dsh-sidebar-*` 布局变量恒 0（抽屉悬浮，不挤压 AppFrame）；宽度拖动条、底部浮层、`bottomClose`、拐角、底部面板按钮全部不渲染。
+- `visible` 语义回到原始：底部树只在桌面底部面板场景（`bottomOpen && active`）——窄屏下底部树为空且不渲染。
+- 底部首展自动终端 effect 加 `narrow` 守卫。
+
+### 4.4 行为修正
+
+- `state.ts` `loadState`：窄屏新会话默认 `panelOpen=false`（首开才生效；用户手动展开后照常持久化）。
+- `service.ts` `openTab`：窄屏且 seed 带 `path`/`url` 且面板收起 → 自动展开抽屉（dedupe-focus 分支同样生效）；纯类型打开不展开；宽屏行为不变。
+
+### 4.5 样式（`sidebar.module.css`）
+
+- `@media (max-width: 767px)`：开放面板标签条预留宽度 72px → 40px（按钮簇只剩一枚）；`.tab` min/max 宽收窄（48/128px）。
+
+### 4.6 测试
+
+- `tests/breakpoints.spec.ts`：断点边界（767 窄 / 768 宽；1024 明确为宽）。
+- `tests/unit.spec.ts`：`migrateBottomTabs` 4 例（并入第一 leaf 且底部清空/面板关/activePane 重指、右树为 split 时并入最左 leaf、幂等性、空底部树但 activePane 在底部树时重指）+ 窄屏新会话默认收起（stub `window.innerWidth=390`）。
+- `tests/service.spec.ts`：窄屏 auto-expand 5 例（390 < 768 仍窄）。
+
+## 5. 边界情况
+
+- 迁移触发：窄屏挂载 / 会话切换 / 桌面→窄屏过渡，均由同一 effect 覆盖；幂等保证收敛。
+- 迁移后新开标签：`activePane` 已重指右侧树第一 leaf，`openTabInActivePane` 必落在可见面板（含"空底部树但 activePane 指向它"的陈旧指针场景）。
+- 跨断点往返：迁移永久；桌面底部面板空显欢迎卡片；`bottomHeight` 不受影响。
+- jsdom 兼容：hook 不用 matchMedia；既有测试 stub `innerWidth=1024` 自动走桌面路径，零行为变化。
+
+## 6. 实施偏差记录
+
+- **v1（已提交 b391ebf，用户反馈推翻）**：合并 = 单面板内上下堆叠两个工作台（`MobileWorkbench` + 可拖分隔条，高度复用 `bottomHeight`），断点 1024（对齐宿主）。用户明确：合并 = 只显示右侧栏、底部标签直接丢进右侧栏；窄屏 = 真窄屏、不对齐 1024。
+- **v2（本文档，最终形态）**：删除 `MobileWorkbench`（组件 + CSS + spec），改为 `migrateBottomTabs` 状态迁移 + 现有 `Workbench` 渲染；断点 768。`bottomHeight` 不再参与移动端布局（仅桌面底部面板使用）。
@@ -1,6 +1,6 @@
 {
  "id": "dsh-external/dsh-better-sidebar",
-  "version": "0.5.0",
+  "version": "0.7.0",
  "main": "./lib/index.js",
  "description": "VSCode 风格右侧侧边栏：文件资源管理器 / 编辑器 / 终端 / Git / 浏览器，按会话隔离。暴露服务供其他插件注册侧边栏页面和文件预览器",
  "engines": {
@@ -1,6 +1,6 @@
 {
  "name": "dsh-better-sidebar",
-  "version": "0.5.0",
+  "version": "0.7.0",
  "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",
@@ -47,6 +47,12 @@
    "lib/index.js",
    "lib/invariant.js",
    "lib/client.js",
+    "lib/client-registry.js",
+    "lib/client-docx.js",
+    "lib/client-xlsx.js",
+    "lib/client-pptx.js",
+    "lib/client-terminal.js",
+    "lib/client-editor.js",
    "lib/types/**/*.d.ts",
    "src"
  ],
@@ -134,6 +140,7 @@
    "@types/ws": "^8.5.10",
    "@cordisjs/plugin-loader": "^1.0.0-rc.5",
    "cordis": "^4.0.0-rc.7",
+    "jsdom": "^29.1.1",
    "lightningcss": "^1.32.0",
    "react": "^18.2.0",
    "react-dom": "18.2.0",
@@ -168,6 +168,9 @@ importers:
      cordis:
        specifier: ^4.0.0-rc.7
        version: 4.0.0-rc.7(@cordisjs/plugin-loader@1.0.0-rc.5)
+      jsdom:
+        specifier: ^29.1.1
+        version: 29.1.1
      lightningcss:
        specifier: ^1.32.0
        version: 1.33.0
@@ -185,7 +188,7 @@ importers:
        version: 5.6.2
      vitest:
        specifier: ^4.1.8
-        version: 4.1.10(@types/node@24.13.3)(vite@8.2.1(@types/node@24.13.3))
+        version: 4.1.10(@types/node@24.13.3)(jsdom@29.1.1)(vite@8.2.1(@types/node@24.13.3))

 packages:

@@ -197,10 +200,29 @@ packages:
      pdfjs-dist:
        optional: true

+  '@asamuzakjp/css-color@5.1.11':
+    resolution: {integrity: sha512-KVw6qIiCTUQhByfTd78h2yD1/00waTmm9uy/R7Ck/ctUyAPj+AEDLkQIdJW0T8+qGgj3j5bpNKK7Q3G+LedJWg==}
+    engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0}
+
+  '@asamuzakjp/dom-selector@7.1.1':
+    resolution: {integrity: sha512-67RZDnYRc8H/8MLDgQCDE//zoqVFwajkepHZgmXrbwybzXOEwOWGPYGmALYl9J2DOLfFPPs6kKCqmbzV895hTQ==}
+    engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0}
+
+  '@asamuzakjp/generational-cache@1.0.1':
+    resolution: {integrity: sha512-wajfB8KqzMCN2KGNFdLkReeHncd0AslUSrvHVvvYWuU8ghncRJoA50kT3zP9MVL0+9g4/67H+cdvBskj9THPzg==}
+    engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0}
+
+  '@asamuzakjp/nwsapi@2.3.9':
+    resolution: {integrity: sha512-n8GuYSrI9bF7FFZ/SjhwevlHc8xaVlb/7HmHelnc/PZXBD2ZR49NnN9sMMuDdEGPeeRQ5d0hqlSlEpgCX3Wl0Q==}
+
  '@babel/runtime@7.29.7':
    resolution: {integrity: sha512-Nq8OhGWiZIZGV6hLHoyAKLLcJihP/xFeBMGJoUrxTX2psI8dCifzLhZISFb+VWS3wFMRDmCGw5R+dOySCqPLhw==}
    engines: {node: '>=6.9.0'}

+  '@bramus/specificity@2.4.2':
+    resolution: {integrity: sha512-ctxtJ/eA+t+6q2++vj5j7FYX3nRu311q1wfYH3xjlLOsczhlhxAg2FWNUXhpGvAw3BWo1xBcvOV6/YLc2r5FJw==}
+    hasBin: true
+
  '@codemirror/autocomplete@6.20.3':
    resolution: {integrity: sha512-tlosUqb+3BbxCxZdu4tKeRghPFC+QM7q4X5YhKV2eCmPG+1r2F3f4AaSz5sCrFqUtX4Jh20VFTKecl16MgiV9g==}

@@ -276,6 +298,42 @@ packages:
      node-addon-require-builtin:
        optional: true

+  '@csstools/color-helpers@6.1.0':
+    resolution: {integrity: sha512-064IFJdjTfUqnjpCVpMOdbr8FLQBhinbZj6yRv2An2E41O/pLEXqfFRWqGq/SxlE5PEUYTlvWsG2r8MswAVvkg==}
+    engines: {node: '>=20.19.0'}
+
+  '@csstools/css-calc@3.3.0':
+    resolution: {integrity: sha512-c5ihYsPkdG6JCkU2zTMm4+k6r7RXuGxtWYhu5DHMIiF1FHzrfmHL5so11AoFpUv/tu61xfcmT4AmKoFfMPoqdQ==}
+    engines: {node: '>=20.19.0'}
+    peerDependencies:
+      '@csstools/css-parser-algorithms': ^4.0.0
+      '@csstools/css-tokenizer': ^4.0.0
+
+  '@csstools/css-color-parser@4.1.10':
+    resolution: {integrity: sha512-UZhQLIUyJaaMepqehrCODwCg2KW25vFvLWBmqYFaPclYvvxzj/sG8LBOhBFCp11i9uE7t1EyS+RAoV9tztPFyw==}
+    engines: {node: '>=20.19.0'}
+    peerDependencies:
+      '@csstools/css-parser-algorithms': ^4.0.0
+      '@csstools/css-tokenizer': ^4.0.0
+
+  '@csstools/css-parser-algorithms@4.0.0':
+    resolution: {integrity: sha512-+B87qS7fIG3L5h3qwJ/IFbjoVoOe/bpOdh9hAjXbvx0o8ImEmUsGXN0inFOnk2ChCFgqkkGFQ+TpM5rbhkKe4w==}
+    engines: {node: '>=20.19.0'}
+    peerDependencies:
+      '@csstools/css-tokenizer': ^4.0.0
+
+  '@csstools/css-syntax-patches-for-csstree@1.1.7':
+    resolution: {integrity: sha512-fQ+05118eQS1cofO3aJpB5efgpBZMvIzwr/sbC8kDLVA5XLG8q1kJV5yzrUAI1f7lvhPnm8fgIjzFB8/O/5Dig==}
+    peerDependencies:
+      css-tree: ^3.2.1
+    peerDependenciesMeta:
+      css-tree:
+        optional: true
+
+  '@csstools/css-tokenizer@4.0.0':
+    resolution: {integrity: sha512-QxULHAm7cNu72w97JUNCBFODFaXpbDg+dP8b/oWFAZ2MTRppA3U00Y2L1HqaS4J6yBqxwa/Y3nMBaxVKbB/NsA==}
+    engines: {node: '>=20.19.0'}
+
  '@deepseek-ai/cordis-plugin-include@1.0.5-rc.1':
    resolution: {integrity: sha512-fwDm2DvCUawaP7o2xx9kPQ46FU8krYkB51iQxOIXwZFNRCamfGkdYwIEe4ycEnXoEpjm4P/gA9pZovbJJNqnAw==}
    peerDependencies:
@@ -779,6 +837,15 @@ packages:
  '@deepseek-ai/schemastery@3.18.1-rc.1':
    resolution: {integrity: sha512-gilia4mY6S/j6oFYsn4x2Ve9K6QfvzTgqJntkty0wFsKjTYHQ6e2WDvXLMw48t75WRBhpLt+ZpFm3GHmTWkNMw==}

+  '@exodus/bytes@1.15.1':
+    resolution: {integrity: sha512-S6mL0yNB/Abt9Ei4tq8gDhcczc4S3+vQ4ra7vxnAf+YHC02srtqxKKZghx2Dq6p0e66THKwR6r8N6P95wEty7Q==}
+    engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0}
+    peerDependencies:
+      '@noble/hashes': ^1.8.0 || ^2.0.0
+    peerDependenciesMeta:
+      '@noble/hashes':
+        optional: true
+
  '@flatten-js/interval-tree@1.1.3':
    resolution: {integrity: sha512-xhFWUBoHJFF77cJO1D6REjdgJEMRf2Y2Z+eKEPav8evGKcLSnj1ud5pLXQSbGuxF3VSvT1rWhMfVpXEKJLTL+A==}

@@ -2152,6 +2219,9 @@ packages:
  async-lock@1.4.1:
    resolution: {integrity: sha512-Az2ZTpuytrtqENulXwO3GGv1Bztugx6TT37NIo7imr/Qo0gsYiGtSdBa2B6fsXhTpVZDNfu1Qn3pk531e3q+nQ==}

+  bidi-js@1.0.3:
+    resolution: {integrity: sha512-RKshQI1R3YQ+n9YJz2QQ147P66ELpa1FQEg20Dk8oW9t2KgLbpDLLp9aGZ7y8WHSshDknG0bknqGw5/tyCs5tw==}
+
  cac@7.0.0:
    resolution: {integrity: sha512-tixWYgm5ZoOD+3g6UTea91eow5z6AAHaho3g0V9CNSNb45gM8SmflpAc+GRd1InC4AqN/07Unrgp56Y94N9hJQ==}
    engines: {node: '>=20.19.0'}
@@ -2241,9 +2311,17 @@ packages:
  crelt@1.0.7:
    resolution: {integrity: sha512-aK6BbWfhf4U/wCcLHKPJl/xa6VkVstRaPywWtMKGwuOLc/wZTyQYuoxgvZnNsBvv7Kg3YTBQYYBCggcviQczuA==}

+  css-tree@3.2.1:
+    resolution: {integrity: sha512-X7sjQzceUhu1u7Y/ylrRZFU2FS6LRiFVp6rKLPg23y3x3c3DOKAwuXGDp+PAGjh6CSnCjYeAul8pcT8bAl+lSA==}
+    engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0}
+
  csstype@3.2.3:
    resolution: {integrity: sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==}

+  data-urls@7.0.0:
+    resolution: {integrity: sha512-23XHcCF+coGYevirZceTVD7NdJOqVn+49IHyxgszm+JIiHLoB2TkmPtsYkNWT1pvRSGkc35L6NHs0yHkN2SumA==}
+    engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0}
+
  debug@4.4.3:
    resolution: {integrity: sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==}
    engines: {node: '>=6.0'}
@@ -2301,6 +2379,10 @@ packages:
    resolution: {integrity: sha512-YGRs8knHhKHVShLkFET/rWAU8kmHbOV5LwN938RHI0pljAJ1Gf6SzXsSmRaEzcXTtOOmVqJ5+WtQPL5uigY50Q==}
    engines: {node: '>=14'}

+  entities@8.0.0:
+    resolution: {integrity: sha512-zwfzJecQ/Uej6tusMqwAqU/6KL2XaB2VZ2Jg54Je6ahNBGNH6Ek6g3jjNCF0fG9EWQKGZNddNjU5F1ZQn/sBnA==}
+    engines: {node: '>=20.19.0'}
+
  es-module-lexer@2.3.1:
    resolution: {integrity: sha512-shc1dbU90Yl/xq1QrC7QRtfcwURZuVRfPhZbDoldJ1cn1gzDvBaBWlv0eFolj5+0znnPJz5TXLxsN77X/12KTA==}

@@ -2367,6 +2449,10 @@ packages:
  hookable@6.1.1:
    resolution: {integrity: sha512-U9LYDy1CwhMCnprUfeAZWZGByVbhd54hwepegYTK7Pi5NvqEj63ifz5z+xukznehT7i6NIZRu89Ay1AZmRsLEQ==}

+  html-encoding-sniffer@6.0.0:
+    resolution: {integrity: sha512-CV9TW3Y3f8/wT0BRFc1/KAVQ3TUHiXmaAb6VW9vtiMFf7SLoMd1PdAc4W3KFOFETBJUb90KatHqlsZMWV+R9Gg==}
+    engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0}
+
  html-void-elements@3.0.0:
    resolution: {integrity: sha512-bEqo66MRXsUGxWHV5IP0PUiAWwoEjba4VCzg0LjFJBpchPaTfyfCKTG6bc5F8ucKec3q5y6qOdGyYTSBEvhCrg==}

@@ -2387,6 +2473,9 @@ packages:
    resolution: {integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==}
    engines: {node: '>=8'}

+  is-potential-custom-element-name@1.0.1:
+    resolution: {integrity: sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==}
+
  isarray@1.0.0:
    resolution: {integrity: sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==}

@@ -2397,6 +2486,15 @@ packages:
    resolution: {integrity: sha512-CY6crGq313MX8GkwvB7tzgp99vjQxY1++5y10/BKN/GUfHqWaOGQMNZkBvqSzsZKWk/ijwHlWzzkLulsGHhjWQ==}
    hasBin: true

+  jsdom@29.1.1:
+    resolution: {integrity: sha512-ECi4Fi2f7BdJtUKTflYRTiaMxIB0O6zfR1fX0GXpUrf6flp8QIYn1UT20YQqdSOfk2dfkCwS8LAFoJDEppNK5Q==}
+    engines: {node: ^20.19.0 || ^22.13.0 || >=24.0.0}
+    peerDependencies:
+      canvas: ^3.0.0
+    peerDependenciesMeta:
+      canvas:
+        optional: true
+
  jszip@3.10.1:
    resolution: {integrity: sha512-xXDvecyTpGLrqFrvkrUSoxxfJI5AH7U8zxxtVclpsUtMCq4JQ290LY8AW5c7Ggnr/Y/oK+bQMbqK2qmtk3pN4g==}

@@ -2506,6 +2604,10 @@ packages:
    resolution: {integrity: sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==}
    hasBin: true

+  lru-cache@11.5.2:
+    resolution: {integrity: sha512-4pfM1Ff0x50o0tQwb5ucw/RzNyD0/YJME6IVcStalZuMWxdt3sR3huStTtxz4PUmvZfRguvDejasvQ2kifR11g==}
+    engines: {node: 20 || >=22}
+
  magic-string@0.30.21:
    resolution: {integrity: sha512-vd2F4YUyEXKGcLHoq+TEyCjxueSeHnFxyyjNp80yg0XV4vUhnDer/lvvlqM/arB5bXQN5K2/3oinyCRyx8T2CQ==}

@@ -2551,6 +2653,9 @@ packages:
  mdast-util-to-string@4.0.0:
    resolution: {integrity: sha512-0H44vDimn51F0YwvxSJSm0eCDOJTRlmN0R1yBh4HLj9wiV1Dn0QoXGbvFAWj2hSItVTlCmBF1hqKlIyUBVFLPg==}

+  mdn-data@2.27.1:
+    resolution: {integrity: sha512-9Yubnt3e8A0OKwxYSXyhLymGW4sCufcLG6VdiDdUGVkPhpqLxlvP5vl1983gQjJl3tqbrM731mjaZaP68AgosQ==}
+
  micromark-core-commonmark@2.0.3:
    resolution: {integrity: sha512-RDBrHEMSxVFLg6xvnXmb1Ayr2WzLAWjeSATAoxwKYJV94TeNavgoIdA0a9ytzDSVzBy2YKFK+emCPOEibLeCrg==}

@@ -2691,6 +2796,9 @@ packages:
  pako@1.0.2:
    resolution: {integrity: sha512-qCaDHl8pk5JSbz5k1Bi5zTZf430DUuV13pmcFEHHan4fW++WIwm2HXUirpzfciBRyFUN+eeZW11bfIM/Y4Zeog==}

+  parse5@8.0.1:
+    resolution: {integrity: sha512-z1e/HMG90obSGeidlli3hj7cbocou0/wa5HacvI3ASx34PecNjNQeaHNo5WIZpWofN9kgkqV1q5YvXe3F0FoPw==}
+
  pathe@2.0.3:
    resolution: {integrity: sha512-WUjGcAqP1gQacoQe+OBJsFA7Ld4DyXuUIjZ5cc75cLHvJ7dtNsTugphxIADwspS+AraAUePCKrSVtPLFj/F88w==}

@@ -2718,6 +2826,10 @@ packages:
    resolution: {integrity: sha512-/FPD0nUc9jH6rfFjji9IBqOz4pcSE3CsT1m7Ep6Mdb0LxSUMj8hgl6GomOvZzpNpAqqGaXA0P3VSrZLFzIhQrw==}
    engines: {node: '>=12.0.0'}

+  punycode@2.3.1:
+    resolution: {integrity: sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==}
+    engines: {node: '>=6'}
+
  quansync@1.0.0:
    resolution: {integrity: sha512-5xZacEEufv3HSTPQuchrvV6soaiACMFnq1H8wkVioctoH3TRha9Sz66lOxRwPK/qZj7HPiSveih9yAyh98gvqA==}

@@ -2795,6 +2907,10 @@ packages:
    resolution: {integrity: sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==}
    engines: {node: '>=0.10.0'}

+  require-from-string@2.0.2:
+    resolution: {integrity: sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==}
+    engines: {node: '>=0.10.0'}
+
  resolve-pkg-maps@1.0.0:
    resolution: {integrity: sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==}

@@ -2828,6 +2944,10 @@ packages:
  safe-buffer@5.1.2:
    resolution: {integrity: sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==}

+  saxes@6.0.0:
+    resolution: {integrity: sha512-xAg7SOnEhrm5zI3puOOKyy1OMcMlIJZYNJY7xLBwSze0UjhPLnWfj2GF2EpT0jmzaJKIWKHLsaSSajf35bcYnA==}
+    engines: {node: '>=v12.22.7'}
+
  scheduler@0.23.0:
    resolution: {integrity: sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==}

@@ -2884,6 +3004,9 @@ packages:
  style-mod@4.1.3:
    resolution: {integrity: sha512-i/n8VsZydrugj3Iuzll8+x/00GH2vnYsk1eomD8QiRrSAeW6ItbCQDtfXCeJHd0iwiNagqjQkvpvREEPtW3IoQ==}

+  symbol-tree@3.2.4:
+    resolution: {integrity: sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==}
+
  tailwind-merge@2.6.0:
    resolution: {integrity: sha512-P+Vu1qXfzediirmHOC3xKGAYeZtPcV9g76X+xg2FD4tYgR71ewMA35Y3sCz3zhiN/dwefRpJX0yBcgwi1fXNQA==}

@@ -2902,6 +3025,21 @@ packages:
    resolution: {integrity: sha512-yau8yJdTt989Mm0Bd/236QnzEiPf2xLLTqUZRUJOo/3CB078LSwzei343DgtJVmfJKJE3TMINY1u42SQsP6mXw==}
    engines: {node: '>=14.0.0'}

+  tldts-core@7.4.10:
+    resolution: {integrity: sha512-KnQjp53ZekKgm/r3l+u8kJGGzYgrWdP8+Mql7a4vijh2WE0IrZWspQj/TpTxDho/YxO+AnOZnIjQcCD+q6iJsw==}
+
+  tldts@7.4.10:
+    resolution: {integrity: sha512-GgouD1B+sWwvkaEq8vXC15DjQitxbvs12oIXELpconwm+Tg3zfcEv4jgzq3vtKverDXsg3VI8aRgNL2Nra0Iog==}
+    hasBin: true
+
+  tough-cookie@6.0.2:
+    resolution: {integrity: sha512-exgYmnmL/sJpR3upZfXG5PoatXQii55xAiXGXzY+sROLZ/Y+SLcp9PgJNI9Vz37HpQ74WvDcLT8eqm+kV3FzrA==}
+    engines: {node: '>=16'}
+
+  tr46@6.0.0:
+    resolution: {integrity: sha512-bLVMLPtstlZ4iMQHpFHTR7GAGj2jxi8Dg0s2h2MafAE4uSWF98FC/3MomU51iQAMf8/qDUbKWf5GxuvvVcXEhw==}
+    engines: {node: '>=20'}
+
  tree-kill@1.2.2:
    resolution: {integrity: sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A==}
    hasBin: true
@@ -2963,6 +3101,10 @@ packages:
  undici-types@7.18.2:
    resolution: {integrity: sha512-AsuCzffGHJybSaRrmr5eHr81mwJU3kjw6M+uprWvCXiNeN9SOGwQ3Jn8jb8m3Z6izVgknn1R0FTCEAP2QrLY/w==}

+  undici@7.29.0:
+    resolution: {integrity: sha512-IDxfleLmmbSskfWSUATiN1nfn2rDuvnMOqb5CWR92iIfojA0Ud+ulOAAEQ57LPr9rWmsreUyf5lwyao+7GNNVw==}
+    engines: {node: '>=20.18.1'}
+
  unicode-regex@4.2.0:
    resolution: {integrity: sha512-fEYz7CCnvHDAdrb8OYAP7qlQCWzXBO5cHXQ3XI+HoZaBpiAwyC6b2nixMGl91yrDYEIRm7NDskgTvnLZ7mqrKQ==}
    engines: {node: '>=16'}
@@ -3117,6 +3259,22 @@ packages:
  w3c-keyname@2.2.8:
    resolution: {integrity: sha512-dpojBhNsCNN7T82Tm7k26A6G9ML3NkhDsnw9n/eoxSRlVBB4CEtIQ/KTCLI2Fwf3ataSXRhYFkQi3SlnFwPvPQ==}

+  w3c-xmlserializer@5.0.0:
+    resolution: {integrity: sha512-o8qghlI8NZHU1lLPrpi2+Uq7abh4GGPpYANlalzWxyWteJOCsr/P+oPBA49TOLu5FTZO4d3F9MnWJfiMo4BkmA==}
+    engines: {node: '>=18'}
+
+  webidl-conversions@8.0.1:
+    resolution: {integrity: sha512-BMhLD/Sw+GbJC21C/UgyaZX41nPt8bUTg+jWyDeg7e7YN4xOM05YPSIXceACnXVtqyEw/LMClUQMtMZ+PGGpqQ==}
+    engines: {node: '>=20'}
+
+  whatwg-mimetype@5.0.0:
+    resolution: {integrity: sha512-sXcNcHOC51uPGF0P/D4NVtrkjSU2fNsm9iog4ZvZJsL3rjoDAzXZhkm2MWt1y+PUdggKAYVoMAIYcs78wJ51Cw==}
+    engines: {node: '>=20'}
+
+  whatwg-url@16.0.1:
+    resolution: {integrity: sha512-1to4zXBxmXHV3IiSSEInrreIlu02vUOvrhxJJH5vcxYTBDAx51cqZiKdyTxlecdKNSjj8EcxGBxNf6Vg+945gw==}
+    engines: {node: ^20.19.0 || ^22.12.0 || >=24.0.0}
+
  why-is-node-running@2.3.0:
    resolution: {integrity: sha512-hUrmaWBdVDcxvYqnyh09zunKzROWjbZTiNy8dBEjkS7ehEDQibXJ7XvlmtbwuTclUiIyN+CyXQD4Vmko8fNm8w==}
    engines: {node: '>=8'}
@@ -3151,6 +3309,13 @@ packages:
    engines: {node: '>=0.8'}
    hasBin: true

+  xml-name-validator@5.0.0:
+    resolution: {integrity: sha512-EvGK8EJ3DhaHfbRlETOWAS5pO9MZITeauHKJyb8wyajUfQUenkIg2MvLDTZ4T/TgIcm3HU0TFBgWWboAZ30UHg==}
+    engines: {node: '>=18'}
+
+  xmlchars@2.2.0:
+    resolution: {integrity: sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw==}
+
  xterm@5.3.0:
    resolution: {integrity: sha512-8QqjlekLUFTrU6x7xck1MsPzPA571K5zNqWm0M0oroYEWVOptZ0+ubQSkQ3uxIEhcIHRujJy6emDWX4A7qyFzg==}
    deprecated: This package is now deprecated. Move to @xterm/xterm instead.
@@ -3207,8 +3372,32 @@ snapshots:
      echarts: 6.1.0
      jszip: 3.10.1

+  '@asamuzakjp/css-color@5.1.11':
+    dependencies:
+      '@asamuzakjp/generational-cache': 1.0.1
+      '@csstools/css-calc': 3.3.0(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
+      '@csstools/css-color-parser': 4.1.10(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
+      '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
+      '@csstools/css-tokenizer': 4.0.0
+
+  '@asamuzakjp/dom-selector@7.1.1':
+    dependencies:
+      '@asamuzakjp/generational-cache': 1.0.1
+      '@asamuzakjp/nwsapi': 2.3.9
+      bidi-js: 1.0.3
+      css-tree: 3.2.1
+      is-potential-custom-element-name: 1.0.1
+
+  '@asamuzakjp/generational-cache@1.0.1': {}
+
+  '@asamuzakjp/nwsapi@2.3.9': {}
+
  '@babel/runtime@7.29.7': {}

+  '@bramus/specificity@2.4.2':
+    dependencies:
+      css-tree: 3.2.1
+
  '@codemirror/autocomplete@6.20.3':
    dependencies:
      '@codemirror/language': 6.12.4
@@ -3376,6 +3565,30 @@ snapshots:
      cordis: 4.0.0-rc.7(@cordisjs/plugin-loader@1.0.0-rc.5)
      cosmokit: 1.8.1

+  '@csstools/color-helpers@6.1.0': {}
+
+  '@csstools/css-calc@3.3.0(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)':
+    dependencies:
+      '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
+      '@csstools/css-tokenizer': 4.0.0
+
+  '@csstools/css-color-parser@4.1.10(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)':
+    dependencies:
+      '@csstools/color-helpers': 6.1.0
+      '@csstools/css-calc': 3.3.0(@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0))(@csstools/css-tokenizer@4.0.0)
+      '@csstools/css-parser-algorithms': 4.0.0(@csstools/css-tokenizer@4.0.0)
+      '@csstools/css-tokenizer': 4.0.0
+
+  '@csstools/css-parser-algorithms@4.0.0(@csstools/css-tokenizer@4.0.0)':
+    dependencies:
+      '@csstools/css-tokenizer': 4.0.0
+
+  '@csstools/css-syntax-patches-for-csstree@1.1.7(css-tree@3.2.1)':
+    optionalDependencies:
+      css-tree: 3.2.1
+
+  '@csstools/css-tokenizer@4.0.0': {}
+
  '@deepseek-ai/cordis-plugin-include@1.0.5-rc.1(@deepseek-ai/cordis-plugin-loader@1.0.1-rc.1)(@deepseek-ai/cordis@4.0.1-rc.1)':
    dependencies:
      '@deepseek-ai/cordis': 4.0.1-rc.1(@deepseek-ai/cordis-plugin-include@1.0.5-rc.1)(@deepseek-ai/cordis-plugin-loader@1.0.1-rc.1)
@@ -3961,6 +4174,8 @@ snapshots:
      '@deepseek-ai/cosmokit': 1.8.2-rc.1
      '@standard-schema/spec': 1.1.0

+  '@exodus/bytes@1.15.1': {}
+
  '@flatten-js/interval-tree@1.1.3': {}

  '@floating-ui/core@1.8.0':
@@ -6121,6 +6336,10 @@ snapshots:

  async-lock@1.4.1: {}

+  bidi-js@1.0.3:
+    dependencies:
+      require-from-string: 2.0.2
+
  cac@7.0.0: {}

  ccount@2.0.1: {}
@@ -6186,8 +6405,20 @@ snapshots:

  crelt@1.0.7: {}

+  css-tree@3.2.1:
+    dependencies:
+      mdn-data: 2.27.1
+      source-map-js: 1.2.1
+
  csstype@3.2.3: {}

+  data-urls@7.0.0:
+    dependencies:
+      whatwg-mimetype: 5.0.0
+      whatwg-url: 16.0.1
+    transitivePeerDependencies:
+      - '@noble/hashes'
+
  debug@4.4.3:
    dependencies:
      ms: 2.1.3
@@ -6230,6 +6461,8 @@ snapshots:

  empathic@2.0.1: {}

+  entities@8.0.0: {}
+
  es-module-lexer@2.3.1: {}

  escalade@3.2.0: {}
@@ -6287,6 +6520,12 @@ snapshots:

  hookable@6.1.1: {}

+  html-encoding-sniffer@6.0.0:
+    dependencies:
+      '@exodus/bytes': 1.15.1
+    transitivePeerDependencies:
+      - '@noble/hashes'
+
  html-void-elements@3.0.0: {}

  immediate@3.0.6: {}
@@ -6299,6 +6538,8 @@ snapshots:

  is-fullwidth-code-point@3.0.0: {}

+  is-potential-custom-element-name@1.0.1: {}
+
  isarray@1.0.0: {}

  js-tokens@3.0.0: {}
@@ -6307,6 +6548,32 @@ snapshots:
    dependencies:
      argparse: 2.0.1

+  jsdom@29.1.1:
+    dependencies:
+      '@asamuzakjp/css-color': 5.1.11
+      '@asamuzakjp/dom-selector': 7.1.1
+      '@bramus/specificity': 2.4.2
+      '@csstools/css-syntax-patches-for-csstree': 1.1.7(css-tree@3.2.1)
+      '@exodus/bytes': 1.15.1
+      css-tree: 3.2.1
+      data-urls: 7.0.0
+      decimal.js: 10.6.0
+      html-encoding-sniffer: 6.0.0
+      is-potential-custom-element-name: 1.0.1
+      lru-cache: 11.5.2
+      parse5: 8.0.1
+      saxes: 6.0.0
+      symbol-tree: 3.2.4
+      tough-cookie: 6.0.2
+      undici: 7.29.0
+      w3c-xmlserializer: 5.0.0
+      webidl-conversions: 8.0.1
+      whatwg-mimetype: 5.0.0
+      whatwg-url: 16.0.1
+      xml-name-validator: 5.0.0
+    transitivePeerDependencies:
+      - '@noble/hashes'
+
  jszip@3.10.1:
    dependencies:
      lie: 3.3.0
@@ -6393,6 +6660,8 @@ snapshots:
    dependencies:
      js-tokens: 3.0.0

+  lru-cache@11.5.2: {}
+
  magic-string@0.30.21:
    dependencies:
      '@jridgewell/sourcemap-codec': 1.5.5
@@ -6525,6 +6794,8 @@ snapshots:
    dependencies:
      '@types/mdast': 4.0.4

+  mdn-data@2.27.1: {}
+
  micromark-core-commonmark@2.0.3:
    dependencies:
      decode-named-character-reference: 1.3.0
@@ -6766,6 +7037,10 @@ snapshots:

  pako@1.0.2: {}

+  parse5@8.0.1:
+    dependencies:
+      entities: 8.0.0
+
  pathe@2.0.3: {}

  picocolors@1.1.1: {}
@@ -6802,6 +7077,8 @@ snapshots:
      '@types/node': 24.13.3
      long: 5.3.2

+  punycode@2.3.1: {}
+
  quansync@1.0.0: {}

  quickselect@3.0.0: {}
@@ -6882,6 +7159,8 @@ snapshots:

  require-directory@2.1.1: {}

+  require-from-string@2.0.2: {}
+
  resolve-pkg-maps@1.0.0: {}

  rolldown-plugin-dts@0.27.14(rolldown@1.2.3)(typescript@5.6.2):
@@ -6924,6 +7203,10 @@ snapshots:

  safe-buffer@5.1.2: {}

+  saxes@6.0.0:
+    dependencies:
+      xmlchars: 2.2.0
+
  scheduler@0.23.0:
    dependencies:
      loose-envify: 1.4.0
@@ -6986,6 +7269,8 @@ snapshots:

  style-mod@4.1.3: {}

+  symbol-tree@3.2.4: {}
+
  tailwind-merge@2.6.0: {}

  tinybench@2.9.0: {}
@@ -6999,6 +7284,20 @@ snapshots:

  tinyrainbow@3.1.1: {}

+  tldts-core@7.4.10: {}
+
+  tldts@7.4.10:
+    dependencies:
+      tldts-core: 7.4.10
+
+  tough-cookie@6.0.2:
+    dependencies:
+      tldts: 7.4.10
+
+  tr46@6.0.0:
+    dependencies:
+      punycode: 2.3.1
+
  tree-kill@1.2.2: {}

  trigram-utils@2.0.1:
@@ -7046,6 +7345,8 @@ snapshots:

  undici-types@7.18.2: {}

+  undici@7.29.0: {}
+
  unicode-regex@4.2.0:
    dependencies:
      regexp-util: 2.0.3
@@ -7126,7 +7427,7 @@ snapshots:
      '@types/node': 24.13.3
      fsevents: 2.3.3

-  vitest@4.1.10(@types/node@24.13.3)(vite@8.2.1(@types/node@24.13.3)):
+  vitest@4.1.10(@types/node@24.13.3)(jsdom@29.1.1)(vite@8.2.1(@types/node@24.13.3)):
    dependencies:
      '@vitest/expect': 4.1.10
      '@vitest/mocker': 4.1.10(vite@8.2.1(@types/node@24.13.3))
@@ -7150,11 +7451,28 @@ snapshots:
      why-is-node-running: 2.3.0
    optionalDependencies:
      '@types/node': 24.13.3
+      jsdom: 29.1.1
    transitivePeerDependencies:
      - msw

  w3c-keyname@2.2.8: {}

+  w3c-xmlserializer@5.0.0:
+    dependencies:
+      xml-name-validator: 5.0.0
+
+  webidl-conversions@8.0.1: {}
+
+  whatwg-mimetype@5.0.0: {}
+
+  whatwg-url@16.0.1:
+    dependencies:
+      '@exodus/bytes': 1.15.1
+      tr46: 6.0.0
+      webidl-conversions: 8.0.1
+    transitivePeerDependencies:
+      - '@noble/hashes'
+
  why-is-node-running@2.3.0:
    dependencies:
      siginfo: 2.0.0
@@ -7182,6 +7500,10 @@ snapshots:
      wmf: 1.0.2
      word: 0.3.0

+  xml-name-validator@5.0.0: {}
+
+  xmlchars@2.2.0: {}
+
  xterm@5.3.0: {}

  y18n@5.0.8: {}
@@ -29,6 +29,18 @@ const files = [
  'lib/invariant.js',
  'lib/client-registry.js',
  'lib/client-registry.js.map',
+  // Lazy chunks: the client fetches these from the host's /sidebar/bundle
+  // route on first use (see src/client/chunk-loader.ts / src/bundle-route.ts).
+  'lib/client-docx.js',
+  'lib/client-docx.js.map',
+  'lib/client-xlsx.js',
+  'lib/client-xlsx.js.map',
+  'lib/client-pptx.js',
+  'lib/client-pptx.js.map',
+  'lib/client-terminal.js',
+  'lib/client-terminal.js.map',
+  'lib/client-editor.js',
+  'lib/client-editor.js.map',
  'README.md',
  'LICENSE',
 ]
@@ -0,0 +1,130 @@
+/**
+ * Lazy chunk route: serves the client bundle's chunk scripts
+ * (/sidebar/bundle/<name>.js). The official /plugins/<id>/client.js route
+ * cannot serve arbitrary file names, so the plugin serves its own split
+ * bundles (lib/client-<name>.js) here; the client injects the script on
+ * first use of the feature that needs it (see src/client/chunk-loader.ts).
+ *
+ * Caching contract: every response carries `cache-control: no-cache` plus an
+ * ETag (content hash, memoized per file by mtime/size) and honors
+ * If-None-Match — the browser revalidates each fetch, but a 304 avoids
+ * re-downloading multi-MB chunks that did not change (page refresh, HMR
+ * re-activation). Same browser-trust fence as every other /sidebar route;
+ * only allowlisted chunk names are servable (no path traversal).
+ */
+import { createHash } from 'node:crypto'
+import { stat, readFile } from 'node:fs/promises'
+import { dirname, join } from 'node:path'
+import { fileURLToPath } from 'node:url'
+import type { IncomingMessage, ServerResponse } from 'node:http'
+import type { Context } from './context-types.ts'
+
+/** The chunk names the client may request (mirror of src/client/chunk-loader.ts). */
+export const CHUNK_NAMES = ['docx', 'xlsx', 'pptx', 'terminal', 'editor'] as const
+export type ChunkName = (typeof CHUNK_NAMES)[number]
+
+/** Directory of this host-half module (lib/ — the chunk scripts live next to it). */
+const LIB_DIR = dirname(fileURLToPath(import.meta.url))
+
+/** sha1 content hash shortened to 12 hex chars (same shape as the client-modules rev). */
+function shortHash(input: string | Buffer): string {
+  return createHash('sha1').update(input).digest('hex').slice(0, 12)
+}
+
+interface ChunkEtag {
+  mtimeMs: number
+  size: number
+  etag: string
+}
+
+/** ETag memo: recompute the content hash only when the file's stat changed. */
+const etags = new Map<string, ChunkEtag>()
+
+/**
+ * The chunk file's ETag (quoted hash), or undefined when the file is
+ * missing. Hash is recomputed only when mtime/size changed (hashing a
+ * multi-MB chunk per request is wasteful).
+ */
+async function etagOf(name: ChunkName, chunkDir: string): Promise<string | undefined> {
+  const path = join(chunkDir, `client-${name}.js`)
+  const key = `${chunkDir}:${name}`
+  try {
+    const info = await stat(path)
+    const memo = etags.get(key)
+    if (memo !== undefined && memo.mtimeMs === info.mtimeMs && memo.size === info.size) {
+      return memo.etag
+    }
+    const etag = `"${shortHash(await readFile(path))}"`
+    etags.set(key, { mtimeMs: info.mtimeMs, size: info.size, etag })
+    return etag
+  } catch {
+    return undefined
+  }
+}
+
+/**
+ * Build the /sidebar/bundle route handler. `fence` is the shared browser-
+ * trust check every /sidebar route applies; `chunkDir` is the directory the
+ * chunk scripts live in (overridable for tests).
+ */
+export function createBundleRouteHandler(
+  fence: (req: IncomingMessage) => boolean,
+  chunkDir: string = LIB_DIR,
+): (req: IncomingMessage, res: ServerResponse) => Promise<void> {
+  return async (req, res): Promise<void> => {
+    if (!fence(req)) {
+      res.writeHead(403)
+      res.end('forbidden')
+      return
+    }
+    if (req.method !== 'GET' && req.method !== 'HEAD') {
+      res.writeHead(405)
+      res.end()
+      return
+    }
+    const pathname = new URL(req.url ?? '/', 'http://dsh.internal').pathname
+    const match = /^\/sidebar\/bundle\/([a-z0-9-]+)\.js$/.exec(pathname)
+    const name = match?.[1] as ChunkName | undefined
+    if (name === undefined || !(CHUNK_NAMES as readonly string[]).includes(name)) {
+      res.writeHead(404)
+      res.end('not found')
+      return
+    }
+    const etag = await etagOf(name, chunkDir)
+    if (etag === undefined) {
+      // Registered name but unreadable (bundle not built yet): loud 404.
+      res.writeHead(404)
+      res.end('not found')
+      return
+    }
+    if (req.headers['if-none-match'] === etag) {
+      // Revalidation hit: unchanged chunk, no body — avoids re-downloading
+      // multi-MB scripts on page refresh / HMR re-activation.
+      res.writeHead(304, { 'cache-control': 'no-cache', etag })
+      res.end()
+      return
+    }
+    try {
+      const body = await readFile(join(chunkDir, `client-${name}.js`))
+      res.writeHead(200, {
+        'content-type': 'text/javascript; charset=utf-8',
+        'cache-control': 'no-cache',
+        etag,
+      })
+      res.end(body)
+    } catch {
+      // Read raced a delete/rebuild between the stat and the read.
+      res.writeHead(404)
+      res.end('not found')
+    }
+  }
+}
+
+/** Register the /sidebar/bundle route (disposed with the fiber). */
+export function registerBundleRoute(ctx: Context, fence: (req: IncomingMessage) => boolean): () => void {
+  return ctx.httpServer.register({
+    kind: 'prefix',
+    path: '/sidebar/bundle',
+    handler: createBundleRouteHandler(fence),
+  })
+}
@@ -1,26 +1,44 @@
 /**
- * The sidebar shell: a fixed-position right panel portalled onto
- * document.body (the core AppFrame owns the left sidebar / center / details
- * columns and has no right-side hole for plugins), plus the edge toggle
- * button. The panel width drags from its left edge; the whole layout lives
- * in the per-session store, so switching conversations swaps the sidebar.
+ * The sidebar shell: fixed-position panels portalled onto document.body
+ * (the core AppFrame owns the left sidebar / center / details columns and
+ * has no right-side hole for plugins). The right panel hosts the original
+ * workbench; the bottom panel hosts a second, independent workbench. The
+ * bottom panel squeezes ONLY the center column (the agent output area): it
+ * spans from the app shell's own left sidebar to the right panel's left
+ * edge, so neither sidebar gives up any position (the right panel keeps its
+ * full height). A persistent two-button cluster at the top-right corner
+ * toggles each panel; the right panel's width drags from its left edge, the
+ * bottom panel's height from its top edge, and the shared corner drags both
+ * at once. The whole layout lives in the per-session store, so switching
+ * conversations swaps the sidebar.
 *
 * The shell binds the workbench actions to the store and dispatches tab
- * content to the four views. New tabs come from the + menu (explorer / git /
- * terminal; editors open from the explorer).
+ * content to the views. New tabs come from the + menu (explorer / git /
+ * terminal; editors open from the explorer). Tabs live in one tree only —
+ * they never cross panels; only the panel sizes drag against each other.
+ *
+ * Narrow (mobile, <768px) viewports show ONLY the right sidebar: entering
+ * narrow migrates the bottom panel's tabs INTO the right tree
+ * (migrateBottomTabs) — one workbench, the bottom tabs thrown into its
+ * strips. The right panel becomes a full-width drawer, the bottom panel
+ * and its toggle button disappear, and the layout push is disabled (the
+ * drawer floats). Widening does not migrate back: the tabs keep living in
+ * the right tree.
 */
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import { useCallback, useEffect, useMemo, useRef, useState, type ReactNode } from 'react'
 import { useSyncExternalStore } from 'react'
 import clsx from 'clsx'
-import { IconChevronRightOutline14, IconFullscreenOutline16, IconPanelLeftOutline16, Tooltip } from '@deepseek-ai/dsh-client-ui-primitives'
+import { IconCloseFill14, Tooltip } from '@deepseek-ai/dsh-client-ui-primitives'
 import type { Context, SidebarConversation, SidebarSessionList } from '../context-types.ts'
 import {
-  agentUuidOf, closeTab, isAgentTabId, leafWithTab, mapLeaf, moveTab, moveTabToEdge, openDiffTab,
+  BOTTOM_MIN, PANEL_MIN, agentUuidOf, closeTab, firstLeaf, isAgentTabId, leafWithTab, mapLeaf, migrateBottomTabs, moveTab, moveTabToEdge, openDiffTab,
  reconcileAgentTerminals,
-  resizeSplit, setWidth, toggleExpanded, togglePanel,
+  resizeSplitIn, setBottomHeight, setWidth, toggleBottomPanel, toggleExpanded, togglePanel,
  type DropZone, type SidebarState, type SidebarStore, type SidebarTab, type SplitNode,
 } from './state.ts'
+import { IconPanelBottomOutline16, IconPanelRightOutline16 } from './icons.tsx'
 import { Workbench, type WorkbenchActions } from './split-pane.tsx'
+import { useNarrowViewport } from './breakpoints.ts'
 import type { NewTabOption } from './TabBar.tsx'
 import type { TabDragPayload } from './TabBar.tsx'
 import { relativeTo } from './paths.ts'
@@ -85,6 +103,16 @@ function buildNewTabOptions(state: SidebarState, ctx: Context, scope: SessionSco
 export function Sidebar(props: { ctx: Context; store: SidebarStore }) {
  const { ctx, store } = props

+  // 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
+  // disabled (the drawer floats over the app shell). Entering narrow
+  // MIGRATES the bottom tree's tabs into the right tree (migrateBottomTabs)
+  // — the merged display is the right sidebar alone, the bottom tabs thrown
+  // into its strips. Widening never rewrites the migrated state: the tabs
+  // keep living in the right tree.
+  const narrow = useNarrowViewport()
+
  // Current conversation (the sessions list feed).
  const sessionList = useSyncExternalStore(
    useMemo(() => (callback: () => void) => ctx.sessions.list.subscribe(callback), [ctx]),
@@ -103,6 +131,18 @@ export function Sidebar(props: { ctx: Context; store: SidebarStore }) {
  const sessionId = snapshot.sessionId
  const summaryCwd = sessionId === undefined ? undefined : sessionList.byId[sessionId]?.cwd

+  /**
+   * Bottom-panel merge on narrow viewports: whenever a session is current
+   * while narrow (mount, session switch, or a desktop→narrow transition),
+   * throw the bottom tree's tabs into the right tree. Idempotent — after
+   * the first migration the bottom tree is empty and the reducer returns
+   * the same reference, so this effect settles immediately.
+   */
+  useEffect(() => {
+    if (!narrow || sessionId === undefined) return
+    store.reduce(migrateBottomTabs)
+  }, [narrow, sessionId, store])
+
  // While the session's header is still hydrating (or the session is blank),
  // the list summary may carry no cwd; ask the host once (it falls back to
  // the process cwd) so the explorer root and terminal cwd are real from
@@ -194,6 +234,10 @@ export function Sidebar(props: { ctx: Context; store: SidebarStore }) {
    if (!store.getPrefs().autoOpenSubagent) return
    if (ctx.betterSidebar?.isTabEnabled('subagent') === false) return
    store.reduce(s => s.panelOpen ? s : togglePanel(s))
+    // Pin the landing to the right panel: the auto-opened Subagent page must
+    // appear where the panel just expanded, not in a bottom-panel pane the
+    // user last touched.
+    store.reduce(s => ({ ...s, activePane: firstLeaf(s.splits).id }))
    ctx.betterSidebar?.openTab({ type: 'subagent', title: t('subagent') })
  }, [sessionList, sessionId, store, ctx])

@@ -214,33 +258,157 @@ export function Sidebar(props: { ctx: Context; store: SidebarStore }) {
    if (pending === undefined || sessionId !== pending) return
    subagentJumpRef.current = undefined
    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') })
  }, [sessionId, store, ctx])

-  // Panel width drag (left edge strip).
+  // The app shell's own columns: the bottom panel spans ONLY the center
+  // column ("squeezes the agent output area") — it starts at the app
+  // sidebar's right edge and ends at the details column's left edge (the
+  // details column sits between the center and the right panel). Measured
+  // from the AppFrame's DOM (the plugin already couples to #root in
+  // layout.css); a missing frame degrades to 0 (full width).
+  const [appSidebarWidth, setAppSidebarWidth] = useState(0)
+  const [detailsWidth, setDetailsWidth] = useState(0)
+  useEffect(() => {
+    const frame = document.querySelector('#root > div')
+    const sidebarCol = frame?.children[0] as HTMLElement | undefined
+    const detailsCol = frame?.children[2] as HTMLElement | undefined
+    if (sidebarCol === undefined || detailsCol === undefined) return
+    const measure = (): void => {
+      setAppSidebarWidth(sidebarCol.getBoundingClientRect().width)
+      setDetailsWidth(detailsCol.getBoundingClientRect().width)
+    }
+    measure()
+    const observer = new ResizeObserver(measure)
+    observer.observe(sidebarCol)
+    observer.observe(detailsCol)
+    return () => { observer.disconnect() }
+  }, [])
+
+  /**
+   * Bottom-panel first-expansion auto terminal: the FIRST time the user
+   * expands the bottom panel in a session, try to open a fresh terminal tab
+   * there. "Try" is literal — the terminal's own quota and enable switch
+   * gate the attempt (a full quota or a disabled terminal type makes it a
+   * no-op). Gated on the bottomPanelAutoTerminal pref (the terminal tab's
+   * nested settings toggle, default on). Only a false→true TRANSITION fires
+   * (a panel persisted open never counts as an expansion), and the session's
+   * bottomOpenedOnce flag is set atomically with the first fire so later
+   * expansions never repeat it.
+   */
+  const bottomWasOpenRef = useRef<boolean | undefined>(undefined)
+  useEffect(() => {
+    // The bottom panel does not exist on narrow viewports (the two
+    // workbenches merge into one panel), so the first-expansion auto
+    // terminal is a desktop-only behavior.
+    if (narrow) return
+    if (state === undefined) return
+    const wasOpen = bottomWasOpenRef.current
+    bottomWasOpenRef.current = state.bottomOpen
+    if (wasOpen === undefined || wasOpen || !state.bottomOpen) return
+    if (state.bottomOpenedOnce) return
+    if (store.getPrefs().bottomPanelAutoTerminal === false) return
+    if (ctx.betterSidebar?.isTabEnabled('terminal') === false) return
+    // Land the tab in the bottom panel's first pane; the once-flag is set
+    // atomically so later expansions never repeat the auto-open.
+    store.reduce(s => ({ ...s, activePane: firstLeaf(s.bottomSplits).id, bottomOpenedOnce: true }))
+    ctx.betterSidebar?.openTab({ type: 'terminal' })
+  }, [state, store, ctx, narrow])
+
+  // Panel drags: the right panel's width (left edge strip), the bottom
+  // panel's height (top edge strip), and the shared corner (both at once).
+  // Drags write the sizes DIRECTLY to the DOM (panel styles + the layout CSS
+  // variables) instead of round-tripping the store on every pointer move —
+  // a store reduce re-renders both workbenches (terminals, editors…) per
+  // move, which is the visible drag lag. The store is committed once on
+  // pointer up (clamping + persistence).
+  const panelRef = useRef<HTMLDivElement | null>(null)
+  const bottomRef = useRef<HTMLDivElement | null>(null)
+  const cornerRef = useRef<HTMLDivElement | null>(null)
  const widthDrag = useRef({ startX: 0, startWidth: 0 })
  const [draggingWidth, setDraggingWidth] = useState(false)
+  const bottomDrag = useRef({ startY: 0, startHeight: 0 })
+  const [draggingBottom, setDraggingBottom] = useState(false)
+  const cornerDrag = useRef({ startX: 0, startY: 0, startWidth: 0, startHeight: 0 })
+  const [draggingCorner, setDraggingCorner] = useState(false)
+  const anyDragging = draggingWidth || draggingBottom || draggingCorner

-  // Layout push: the app shell gives up the panel's width while it is open
-  // (0 while collapsed), so the conversation and input bar are squeezed
-  // instead of covered. The margin is capped at the viewport so a stale
-  // persisted width (e.g. fullscreen on a bigger window) can never crush
-  // the app shell to zero. Dragging disables the layout transition.
+  // Clamp mirrors of setWidth/setBottomHeight for mid-drag values (the store
+  // re-clamps on commit; these keep the panels from overshooting mid-drag).
+  const clampWidth = (width: number): number =>
+    Math.min(Math.max(PANEL_MIN, Math.round(width)), Math.max(PANEL_MIN, window.innerWidth))
+  const clampHeight = (height: number): number =>
+    Math.min(Math.max(BOTTOM_MIN, Math.round(height)), Math.max(BOTTOM_MIN, window.innerHeight - PANEL_MIN))
+
+  /** Apply a drag size to the DOM without touching React state or the store.
+   *  The bottom panel's right edge tracks the right panel's left edge HERE
+   *  too — React state only updates on release, so the inline right must be
+   *  written directly or the bottom panel would lag the sidebar mid-drag. */
+  const applyDrag = (width: number, height: number): void => {
+    panelRef.current?.style.setProperty('width', `${width}px`)
+    bottomRef.current?.style.setProperty('height', `${height}px`)
+    bottomRef.current?.style.setProperty('right', `${width + detailsWidth}px`)
+    document.documentElement.style.setProperty('--dsh-sidebar-width', `${width}px`)
+    document.documentElement.style.setProperty('--dsh-sidebar-height', `${height}px`)
+    if (cornerRef.current !== null) {
+      cornerRef.current.style.left = `${window.innerWidth - width - 6}px`
+      cornerRef.current.style.top = `${window.innerHeight - height - 6}px`
+    }
+  }
+
+  // Drags write at most once per frame: pointer events fire several times
+  // faster than the display refresh, and each write reflows the app shell
+  // (the layout push) plus the panels — batching to one write per frame is
+  // what keeps the drag smooth. The store is still committed once on release.
+  const dragFrame = useRef<number | null>(null)
+  const pendingDrag = useRef<{ width: number; height: number } | null>(null)
+  const scheduleDrag = (width: number, height: number): void => {
+    pendingDrag.current = { width, height }
+    if (dragFrame.current !== null) return
+    dragFrame.current = requestAnimationFrame(() => {
+      dragFrame.current = null
+      const pending = pendingDrag.current
+      if (pending !== null) {
+        pendingDrag.current = null
+        applyDrag(pending.width, pending.height)
+      }
+    })
+  }
+
+  /** Flush any pending drag write and stop scheduling (the store commit on
+   *  pointer up applies the final clamped values). */
+  const stopDragScheduling = (): void => {
+    if (dragFrame.current !== null) {
+      cancelAnimationFrame(dragFrame.current)
+      dragFrame.current = null
+    }
+    pendingDrag.current = null
+  }
+
+  // Layout push: the app shell gives up the panel's width/height while the
+  // panels are open (0 while collapsed), so the conversation and input bar
+  // are squeezed instead of covered. The margins are capped at the viewport
+  // so a stale persisted size (e.g. fullscreen on a bigger window) can never
+  // crush the app shell to zero. Dragging disables the layout transition.
+  // On NARROW viewports the drawer FLOATS over the app shell — no push, the
+  // conversation keeps the full width behind the drawer.
  useEffect(() => {
-    const width = snapshot.state?.panelOpen === true
+    const width = !narrow && snapshot.state?.panelOpen === true
      ? Math.min(snapshot.state.width, window.innerWidth)
      : 0
+    const height = !narrow && snapshot.state?.bottomOpen === true
+      ? Math.min(snapshot.state.bottomHeight, window.innerHeight)
+      : 0
    document.documentElement.style.setProperty('--dsh-sidebar-width', `${width}px`)
-  }, [snapshot.state?.panelOpen, snapshot.state?.width])
+    document.documentElement.style.setProperty('--dsh-sidebar-height', `${height}px`)
+  }, [narrow, snapshot.state?.panelOpen, snapshot.state?.width, snapshot.state?.bottomOpen, snapshot.state?.bottomHeight])
  useEffect(() => {
-    if (draggingWidth) document.body.setAttribute('data-dsh-sidebar-dragging', '')
+    if (anyDragging) document.body.setAttribute('data-dsh-sidebar-dragging', '')
    else document.body.removeAttribute('data-dsh-sidebar-dragging')
-  }, [draggingWidth])
+  }, [anyDragging])


-  // Whether the panel currently fills the viewport (fullscreen expansion).
-  const fullscreen = state !== undefined && window.innerWidth - state.width < 8
-
  const actions: WorkbenchActions = useMemo(() => ({
    closeTab: (paneId, tabId) => {
      // A closed terminal releases its pty immediately — including when its
@@ -287,7 +455,7 @@ export function Sidebar(props: { ctx: Context; store: SidebarStore }) {
      })
    },
    resizeSplit: (splitId, index, deltaFrac) => {
-      store.reduce(s => ({ ...s, splits: resizeSplit(s.splits, splitId, index, deltaFrac) }))
+      store.reduce(s => resizeSplitIn(s, splitId, index, deltaFrac))
    },
  }), [store, sessionId, cwd])

@@ -318,10 +486,17 @@ export function Sidebar(props: { ctx: Context; store: SidebarStore }) {

  if (state === undefined || sessionId === undefined) {
    return (
-      <div className={css.toggleRail}>
+      <div className={css.toggleCluster}>
+        {!narrow && (
+          <Tooltip label={t('noSession')} side="bottom" delayMs={500}>
+            <button type="button" className={css.toggleButton} disabled aria-label={t('noSession')}>
+              <IconPanelBottomOutline16 />
+            </button>
+          </Tooltip>
+        )}
        <Tooltip label={t('noSession')} side="bottom" delayMs={500}>
          <button type="button" className={css.toggleButton} disabled aria-label={t('noSession')}>
-            <IconPanelLeftOutline16 size={16} />
+            <IconPanelRightOutline16 />
          </button>
        </Tooltip>
      </div>
@@ -342,6 +517,13 @@ export function Sidebar(props: { ctx: Context; store: SidebarStore }) {
   * ctx and the conversation input service at click time; a missing service
   * or scope degrades to a logged no-op, never a crash.
   */
+  /** The tab icon from the tab-type registry (shared by every workbench). */
+  const tabIconOf = (tab: SidebarTab): ReactNode => {
+    const descriptor = ctx.betterSidebar?.getTab(tab.type)
+    if (descriptor === undefined) return null
+    return typeof descriptor.icon === 'function' ? descriptor.icon(14) : descriptor.icon
+  }
+
  /**
   * Render one tab's content. `active` (from the workbench) tells whether
   * this tab is the active one in its pane; combined with the panel's
@@ -349,7 +531,7 @@ export function Sidebar(props: { ctx: Context; store: SidebarStore }) {
   * polling while the page is not actually visible). The pane id travels
   * with the tab so diff tabs can split below their source pane.
   */
-  const renderTab = (tab: SidebarTab, active: boolean, paneId: string) => (
+  const renderTab = (tab: SidebarTab, active: boolean, paneId: string, bottom = false) => (
    <TabContent
      tab={tab}
      sessionId={sessionId}
@@ -359,7 +541,7 @@ export function Sidebar(props: { ctx: Context; store: SidebarStore }) {
      onReferenceFile={referenceInChat}
      ctx={ctx}
      store={store}
-      visible={state.panelOpen && active}
+      visible={bottom ? state.bottomOpen && active : state.panelOpen && active}
      onSubagentJump={(childSessionId) => { subagentJumpRef.current = childSessionId }}
      onOpenDiff={(diffTab) => { store.reduce(s => openDiffTab(s, paneId, diffTab)) }}
    />
@@ -367,77 +549,83 @@ export function Sidebar(props: { ctx: Context; store: SidebarStore }) {

  return (
    <>
-      {!state.panelOpen && (
-        <div className={css.toggleRail}>
-          <Tooltip label={t('expand')} side="bottom" delayMs={500}>
+      {/*
+        The persistent toggle cluster at the top-right corner: the bottom
+        panel's button (bottom glyph) LEFT of the right panel's (side glyph).
+        Always pinned to the viewport corner — inside the right panel's
+        top-right while it is open, sitting flush in the tab strip whose
+        right end it really squeezes (the strip reserves its width via CSS),
+        so the tabs genuinely yield space to it.
+      */}
+      <div className={css.toggleCluster}>
+        {/*
+          Narrow viewports merge the two workbenches into the one drawer —
+          there is no bottom panel, so its toggle button is not offered.
+        */}
+        {!narrow && (
+          <Tooltip label={state.bottomOpen ? t('collapseBottomPanel') : t('expandBottomPanel')} side="bottom" delayMs={500}>
            <button
              type="button"
              className={css.toggleButton}
-              aria-label={t('expand')}
-              onClick={() => { store.reduce(togglePanel) }}
+              aria-label={state.bottomOpen ? t('collapseBottomPanel') : t('expandBottomPanel')}
+              onClick={() => { store.reduce(toggleBottomPanel) }}
            >
-              <IconPanelLeftOutline16 size={16} />
+              <IconPanelBottomOutline16 />
            </button>
          </Tooltip>
-        </div>
-      )}
+        )}
+        <Tooltip label={state.panelOpen ? t('collapse') : t('expand')} side="bottom" delayMs={500}>
+          <button
+            type="button"
+            className={css.toggleButton}
+            aria-label={state.panelOpen ? t('collapse') : t('expand')}
+            onClick={() => { store.reduce(togglePanel) }}
+          >
+            <IconPanelRightOutline16 />
+          </button>
+        </Tooltip>
+      </div>
      {/*
-        The panel stays mounted while collapsed (hidden off-screen) so the
-        slide in/out can animate; visibility hides it after the slide settles.
+        The right panel stays mounted while collapsed (hidden off-screen) so
+        the slide in/out can animate; visibility hides it after the slide
+        settles. Its bottom edge follows the bottom panel's height (0 while
+        the bottom panel is closed) — the VSCode-style "sidebar above panel".
+        On NARROW viewports it is a full-width drawer holding both
+        workbenches (see MobileWorkbench); the width drag strip is not
+        offered there — a full-screen sheet has nothing to drag.
      */}
      <div
+        ref={panelRef}
        className={clsx(css.panel, !state.panelOpen && css.panelHidden)}
-        style={{ width: Math.min(state.width, window.innerWidth) }}
-        data-dragging={draggingWidth || undefined}
+        style={{ width: narrow ? '100vw' : Math.min(state.width, window.innerWidth) }}
+        data-dragging={anyDragging || undefined}
      >
-          <div
-            className={clsx(css.panelResize, draggingWidth && css.panelResizeActive)}
-            onPointerDown={(event) => {
-              event.preventDefault()
-              event.currentTarget.setPointerCapture(event.pointerId)
-              widthDrag.current = { startX: event.clientX, startWidth: state.width }
-              setDraggingWidth(true)
-            }}
-            onPointerMove={(event) => {
-              if (!event.currentTarget.hasPointerCapture(event.pointerId)) return
-              const { startX, startWidth } = widthDrag.current
-              store.reduce(s => setWidth(s, startWidth + (startX - event.clientX)))
-            }}
-            onPointerUp={(event) => {
-              if (!event.currentTarget.hasPointerCapture(event.pointerId)) return
-              event.currentTarget.releasePointerCapture(event.pointerId)
-              setDraggingWidth(false)
-            }}
-          />
-          <div className={css.panelHeader}>
-            <button
-              type="button"
-              className={css.iconButton}
-              aria-label={fullscreen ? t('restoreFullscreen') : t('expandFullscreen')}
-              title={fullscreen ? t('restoreFullscreen') : t('expandFullscreen')}
-              onClick={() => {
-                const viewport = window.innerWidth
-                store.reduce(s => setWidth(s, fullscreen
-                  ? Math.max(280, Math.round((viewport - 320) / 2))
-                  : viewport))
+          {!narrow && (
+            <div
+              className={clsx(css.panelResize, draggingWidth && css.panelResizeActive)}
+              onPointerDown={(event) => {
+                event.preventDefault()
+                event.currentTarget.setPointerCapture(event.pointerId)
+                widthDrag.current = { startX: event.clientX, startWidth: state.width }
+                setDraggingWidth(true)
              }}
-            >
-              <IconFullscreenOutline16 />
-            </button>
-            <span className={css.panelTitle}>
-              {t('explorer')}
-              {cwd !== undefined ? ` · ${cwd.split(/[\\/]/).filter(Boolean).pop() ?? cwd}` : ''}
-            </span>
-            <button
-              type="button"
-              className={css.iconButton}
-              aria-label={t('collapse')}
-              title={t('collapse')}
-              onClick={() => { store.reduce(togglePanel) }}
-            >
-              <IconChevronRightOutline14 />
-            </button>
-          </div>
+              onPointerMove={(event) => {
+                if (!event.currentTarget.hasPointerCapture(event.pointerId)) return
+                const { startX, startWidth } = widthDrag.current
+                const width = clampWidth(startWidth + (startX - event.clientX))
+                const height = state.bottomOpen ? Math.min(state.bottomHeight, window.innerHeight) : 0
+                scheduleDrag(width, height)
+              }}
+              onPointerUp={(event) => {
+                if (!event.currentTarget.hasPointerCapture(event.pointerId)) return
+                event.currentTarget.releasePointerCapture(event.pointerId)
+                const { startX, startWidth } = widthDrag.current
+                stopDragScheduling()
+                store.reduce(s => setWidth(s, startWidth + (startX - event.clientX)))
+                setDraggingWidth(false)
+              }}
+            />
+          )}
        <div className={css.panelBody}>
          <Workbench
            state={state}
@@ -445,14 +633,132 @@ export function Sidebar(props: { ctx: Context; store: SidebarStore }) {
            actions={actions}
            onNewTab={onNewTab}
            renderTab={renderTab}
-            getTabIcon={(tab) => {
-              const descriptor = ctx.betterSidebar?.getTab(tab.type)
-              if (descriptor === undefined) return null
-              return typeof descriptor.icon === 'function' ? descriptor.icon(14) : descriptor.icon
-            }}
+            getTabIcon={tabIconOf}
          />
        </div>
      </div>
+      {/*
+        The bottom panel: a second, independent workbench. It squeezes ONLY
+        the center column (the agent output area): it starts at the app
+        shell's own left sidebar and ends at the right panel's left edge —
+        neither sidebar gives up any position (the right panel keeps its
+        full height). Its resize strip is the top edge; hidden by sliding
+        down like the right panel. On NARROW viewports it does not exist —
+        the bottom workbench lives inside the drawer (MobileWorkbench).
+      */}
+      {!narrow && (
+      <div
+        ref={bottomRef}
+        className={clsx(css.bottomPanel, !state.bottomOpen && css.bottomPanelHidden)}
+        style={{
+          height: Math.min(state.bottomHeight, window.innerHeight),
+          left: appSidebarWidth,
+          // Ends at the details column's left edge (the details column sits
+          // between the center and the right panel) plus the right panel's
+          // own width — the bottom panel squeezes ONLY the center column.
+          right: detailsWidth + (state.panelOpen ? Math.min(state.width, window.innerWidth) : 0),
+          // The seam against the open right panel needs its own hairline
+          // (the right panel's border-left alone is covered by this panel's
+          // fill — without it the corner looks cut off).
+          borderRight: state.panelOpen ? '1px solid var(--dsw-alias-border-l2)' : undefined,
+        }}
+        data-dragging={(draggingBottom || draggingCorner) || undefined}
+      >
+        <div
+          className={clsx(css.bottomResize, draggingBottom && css.bottomResizeActive)}
+          onPointerDown={(event) => {
+            event.preventDefault()
+            event.currentTarget.setPointerCapture(event.pointerId)
+            bottomDrag.current = { startY: event.clientY, startHeight: state.bottomHeight }
+            setDraggingBottom(true)
+          }}
+          onPointerMove={(event) => {
+            if (!event.currentTarget.hasPointerCapture(event.pointerId)) return
+            const { startY, startHeight } = bottomDrag.current
+            const height = clampHeight(startHeight + (startY - event.clientY))
+            scheduleDrag(Math.min(state.width, window.innerWidth), height)
+          }}
+          onPointerUp={(event) => {
+            if (!event.currentTarget.hasPointerCapture(event.pointerId)) return
+            event.currentTarget.releasePointerCapture(event.pointerId)
+            const { startY, startHeight } = bottomDrag.current
+            stopDragScheduling()
+            store.reduce(s => setBottomHeight(s, startHeight + (startY - event.clientY)))
+            setDraggingBottom(false)
+          }}
+        />
+        {/*
+          The bottom panel's own close control at its tab strip's right end
+          (the strip reserves the width via CSS so the + menu never hides
+          under it): one tap collapses the panel.
+        */}
+        <Tooltip label={t('collapseBottomPanel')} side="bottom" delayMs={500}>
+          <button
+            type="button"
+            className={css.bottomClose}
+            aria-label={t('collapseBottomPanel')}
+            onClick={() => { store.reduce(toggleBottomPanel) }}
+          >
+            <IconCloseFill14 />
+          </button>
+        </Tooltip>
+        <div className={css.panelBody}>
+          <Workbench
+            state={state}
+            tree={state.bottomSplits}
+            newTabOptions={buildNewTabOptions(state, ctx, { sessionId, cwd })}
+            actions={actions}
+            onNewTab={onNewTab}
+            renderTab={(tab, active, paneId) => renderTab(tab, active, paneId, true)}
+            getTabIcon={tabIconOf}
+          />
+        </div>
+      </div>
+      )}
+      {/*
+        The shared corner (only while BOTH panels are open): the intersection
+        of the right panel's left edge and the bottom panel's top edge.
+        Horizontal drags resize the right panel's width, vertical drags the
+        bottom panel's height — the two panels drag against each other.
+        (Never on narrow viewports: the bottom panel does not exist there.)
+      */}
+      {!narrow && state.panelOpen && state.bottomOpen && (
+        <div
+          ref={cornerRef}
+          className={css.cornerHandle}
+          style={{
+            left: window.innerWidth - state.width - 6,
+            top: window.innerHeight - state.bottomHeight - 6,
+          }}
+          data-dragging={draggingCorner || undefined}
+          onPointerDown={(event) => {
+            event.preventDefault()
+            event.currentTarget.setPointerCapture(event.pointerId)
+            cornerDrag.current = {
+              startX: event.clientX,
+              startY: event.clientY,
+              startWidth: state.width,
+              startHeight: state.bottomHeight,
+            }
+            setDraggingCorner(true)
+          }}
+          onPointerMove={(event) => {
+            if (!event.currentTarget.hasPointerCapture(event.pointerId)) return
+            const { startX, startY, startWidth, startHeight } = cornerDrag.current
+            const width = clampWidth(startWidth + (startX - event.clientX))
+            const height = clampHeight(startHeight + (startY - event.clientY))
+            scheduleDrag(width, height)
+          }}
+          onPointerUp={(event) => {
+            if (!event.currentTarget.hasPointerCapture(event.pointerId)) return
+            event.currentTarget.releasePointerCapture(event.pointerId)
+            const { startX, startY, startWidth, startHeight } = cornerDrag.current
+            stopDragScheduling()
+            store.reduce(s => setBottomHeight(setWidth(s, startWidth + (startX - event.clientX)), startHeight + (startY - event.clientY)))
+            setDraggingCorner(false)
+          }}
+        />
+      )}
    </>
  )
 }
@@ -0,0 +1,51 @@
+/**
+ * Narrow-viewport ("mobile") breakpoint for the sidebar. Width-based, shared
+ * by the layout logic (JS) and the style gates (CSS). The CSS side pairs
+ * with this file via `@media (max-width: 767px)` rules (sidebar.module.css)
+ * — 767px ≡ widths below NARROW_MAX_WIDTH, documented at both ends.
+ *
+ * "Real narrow" on purpose: the mobile layout (one full-screen drawer, the
+ * bottom panel's tabs merged into the right sidebar) is a phone / portrait
+ * tablet experience. The value is deliberately NOT aligned to the DSH app
+ * shell's own 1024px breakpoint — 1024px windows (small laptops, split
+ * panes) keep the desktop two-panel layout.
+ */
+import { useEffect, useState } from 'react'
+
+/** Viewport widths strictly below this are "mobile" (paired CSS: max-width: 767px). */
+export const NARROW_MAX_WIDTH = 768
+
+/** Whether a viewport width is narrow (mobile). */
+export function isNarrowWidth(width: number): boolean {
+  return width < NARROW_MAX_WIDTH
+}
+
+/**
+ * Live narrow-viewport flag for components. Reads `window.innerWidth` and
+ * re-measures on resize (rAF-throttled, the repo's existing drag pattern).
+ * Deliberately avoids `matchMedia` (jsdom does not implement it) — the
+ * resize listener is equally exact for a breakpoint that never changes
+ * while the page is open.
+ */
+export function useNarrowViewport(): boolean {
+  const [narrow, setNarrow] = useState(
+    () => typeof window !== 'undefined' && isNarrowWidth(window.innerWidth),
+  )
+  useEffect(() => {
+    if (typeof window === 'undefined') return
+    let frame: number | null = null
+    const measure = (): void => {
+      frame = null
+      setNarrow(isNarrowWidth(window.innerWidth))
+    }
+    const onResize = (): void => {
+      if (frame === null) frame = requestAnimationFrame(measure)
+    }
+    window.addEventListener('resize', onResize)
+    return () => {
+      window.removeEventListener('resize', onResize)
+      if (frame !== null) cancelAnimationFrame(frame)
+    }
+  }, [])
+  return narrow
+}
@@ -13,14 +13,41 @@ import { t } from '../locales.ts'
 import { openSidebarFile } from '../intercept.tsx'
 import { ExplorerView } from '../ExplorerView.tsx'
 import { EditorHost } from '../EditorHost.tsx'
-import { TerminalView } from '../TerminalView.tsx'
+import { lazyChunkComponent } from '../lazy-chunk.tsx'
 import { GitView } from '../GitView.tsx'
 import { DiffTab } from '../DiffTab.tsx'
 import { SubagentView } from '../SubagentView.tsx'
 import { BrowserView } from '../BrowserView.tsx'
 import { IconTerminalOutline16, IconDiffOutline16, IconGlobeOutline16 } from '../icons.tsx'
+import type { ComponentType } from 'react'
+import type { SessionScope } from '../api.ts'
+import type { SidebarStore } from '../state.ts'
 import type { TabDescriptor } from '../service.ts'

+/**
+ * Lazy wrapper over the terminal view: xterm (and its stylesheet) is fetched
+ * only when a terminal tab is first opened (see chunk-loader.ts). The
+ * wrapper keeps the descriptor contract `(props) => ReactNode` — Sidebar
+ * calls it as a plain function.
+ *
+ * TerminalView's props are { scope, tabId, store } — `tabId` is NOT part of
+ * TabComponentProps (it carries `tab: SidebarTab` instead), so the
+ * descriptor maps it explicitly; a bare pass-through would leave tabId
+ * undefined and TerminalView's isAgentTabId(tabId) would crash on
+ * `undefined.startsWith` (regression-pinned in tests/lazy-chunk.spec.tsx).
+ */
+const LazyTerminal = lazyChunkComponent<TerminalViewProps>(
+  'terminal',
+  (mod) => mod.TerminalView as ComponentType<TerminalViewProps> | undefined,
+)
+
+/** The terminal view's props (mirror of TerminalView's own signature). */
+interface TerminalViewProps {
+  scope: SessionScope
+  tabId: string
+  store: SidebarStore
+}
+
 /** How many UI-owned terminals may be open at once (agent-owned ones are uncapped). */
 export const TERMINAL_LIMIT = 3

@@ -106,14 +133,19 @@ export function builtinTabs(ctx: Context): readonly TabDescriptor[] {
      icon: (size: number) => <IconTerminalOutline16 size={size} />,
      order: 40,
      available: (_ctx, _scope, state) => uiTerminalCount(state) < TERMINAL_LIMIT,
-      // Declarative settings: the model-facing terminal tools switch renders
-      // under this row in the Side card settings page (the Terminal page's
-      // own related setting; the host gates the toolset on it independently).
+      // Declarative settings: the model-facing terminal tools switch and the
+      // bottom-panel first-expansion auto-terminal switch render under this
+      // row in the Side card settings page (the Terminal page's own related
+      // settings; the host gates the toolset on the tools one independently).
      settings: {
        toggles: [{
          key: 'agentTerminalTools',
          title: () => t('settingsToolsTitle'),
          desc: () => t('settingsToolsDesc'),
+        }, {
+          key: 'bottomPanelAutoTerminal',
+          title: () => t('settingsBottomTerminalTitle'),
+          desc: () => t('settingsBottomTerminalDesc'),
        }],
      },
      createTab: (state) => {
@@ -128,9 +160,7 @@ export function builtinTabs(ctx: Context): readonly TabDescriptor[] {
          patch: { nextTerminal: state.nextTerminal + 1 },
        }
      },
-      component: ({ scope, tab, store }) => (
-        <TerminalView scope={scope} tabId={tab.id} store={store} />
-      ),
+      component: ({ tab, scope, store }) => <LazyTerminal scope={scope} store={store} tabId={tab.id} />,
    },
    {
      id: 'browser',
@@ -6,15 +6,21 @@
 * binaries and serves doc/xls/ppt by extension; `code` is the catch-all
 * (`exts: []`, lowest priority) that claims any file no other viewer did.
 *
+ * The heavy viewers (docx/xlsx/pptx and the CodeMirror-backed
+ * markdown/html/code) render through {@link lazyChunkComponent} wrappers —
+ * their libraries are fetched only when such a file is first opened (see
+ * chunk-loader.ts). The descriptor metadata (id/exts/priority/detect) is
+ * identical either way, so matching semantics and external-plugin
+ * overrides are unaffected; the `component` wrapper keeps the descriptor
+ * contract `(props) => ReactNode`.
+ *
 * Every viewer carries the declarative settings-surface fields — `title`
 * and `icon` — so the Side card settings page can render the enable/disable
 * inventory without hardcoding (eating our own dogfood).
 */
 import { IconCodeOutline16, IconDownloadOutline16 } from '@deepseek-ai/dsh-client-ui-primitives'
-import { DocxView, XlsxView } from '../office-view.tsx'
+import { lazyChunkComponent } from '../lazy-chunk.tsx'
 import { PdfView } from '../PdfView.tsx'
-import { PptxView } from '../PptxView.tsx'
-import { TextEditor } from '../TextEditor.tsx'
 import { BinaryDownload } from '../binary-download.tsx'
 import {
  IconImageOutline16,
@@ -25,10 +31,22 @@ import {
  IconPptxOutline16,
  IconHtmlOutline16,
 } from '../icons.tsx'
-import type { FileViewerDescriptor } from '../service.ts'
+import type { ComponentType } from 'react'
+import type { FileViewerDescriptor, FileViewerProps } from '../service.ts'
 import { t } from '../locales.ts'
 import css from '../sidebar.module.css'

+/**
+ * Lazy wrappers over the chunk-resident viewer components. The `pick`
+ * functions are module-level (stable identity — the wrapper effect depends
+ * on them); the cast bridges the chunk exports record to the descriptor
+ * prop shape (the views read only their own subset of FileViewerProps).
+ */
+const LazyDocx = lazyChunkComponent<FileViewerProps>('docx', (mod) => mod.DocxView as ComponentType<FileViewerProps> | undefined)
+const LazyXlsx = lazyChunkComponent<FileViewerProps>('xlsx', (mod) => mod.XlsxView as ComponentType<FileViewerProps> | undefined)
+const LazyPptx = lazyChunkComponent<FileViewerProps>('pptx', (mod) => mod.PptxView as ComponentType<FileViewerProps> | undefined)
+const LazyTextEditor = lazyChunkComponent<FileViewerProps>('editor', (mod) => mod.TextEditor as ComponentType<FileViewerProps> | undefined)
+
 /** The 9 built-in file viewer descriptors. */
 export function builtinViewers(): readonly FileViewerDescriptor[] {
  return [
@@ -60,9 +78,7 @@ export function builtinViewers(): readonly FileViewerDescriptor[] {
      icon: (size: number) => <IconDocxOutline16 size={size} />,
      exts: ['docx'],
      fetchStrategy: 'mediaUrl',
-      component: ({ scope, path, title }) => (
-        <DocxView scope={scope} path={path} title={title} />
-      ),
+      component: (props) => <LazyDocx {...props} />,
    },
    {
      id: 'xlsx',
@@ -70,9 +86,7 @@ export function builtinViewers(): readonly FileViewerDescriptor[] {
      icon: (size: number) => <IconXlsxOutline16 size={size} />,
      exts: ['xlsx'],
      fetchStrategy: 'mediaUrl',
-      component: ({ scope, path, title }) => (
-        <XlsxView scope={scope} path={path} title={title} />
-      ),
+      component: (props) => <LazyXlsx {...props} />,
    },
    {
      id: 'pptx',
@@ -80,9 +94,7 @@ export function builtinViewers(): readonly FileViewerDescriptor[] {
      icon: (size: number) => <IconPptxOutline16 size={size} />,
      exts: ['pptx'],
      fetchStrategy: 'mediaUrl',
-      component: ({ scope, path, title }) => (
-        <PptxView scope={scope} path={path} title={title} />
-      ),
+      component: (props) => <LazyPptx {...props} />,
    },
    {
      id: 'markdown',
@@ -90,7 +102,7 @@ export function builtinViewers(): readonly FileViewerDescriptor[] {
      icon: (size: number) => <IconMarkdownOutline16 size={size} />,
      exts: ['md', 'markdown'],
      fetchStrategy: 'fsRead',
-      component: (props) => <TextEditor {...props} />,
+      component: (props) => <LazyTextEditor {...props} />,
    },
    {
      id: 'html',
@@ -112,7 +124,7 @@ export function builtinViewers(): readonly FileViewerDescriptor[] {
          desc: () => t('settingsHtmlDefaultUnsafeDesc'),
        }],
      },
-      component: (props) => <TextEditor {...props} />,
+      component: (props) => <LazyTextEditor {...props} />,
    },
    {
      id: 'code',
@@ -121,7 +133,7 @@ export function builtinViewers(): readonly FileViewerDescriptor[] {
      exts: [],
      priority: -100,
      fetchStrategy: 'fsRead',
-      component: (props) => <TextEditor {...props} />,
+      component: (props) => <LazyTextEditor {...props} />,
    },
    {
      id: 'binary-download',
@@ -0,0 +1,196 @@
+/**
+ * Lazy chunk loader for the client bundle. The heavy preview/terminal
+ * libraries (Univer, docx-preview, pptx-renderer, CodeMirror, xterm — the
+ * office/terminal/editor stacks, tens of MB) live in separate build-time
+ * bundles (`lib/client-<name>.js`) fetched only on first use of the feature
+ * that needs them, so startup downloads/parses only the ~1MB core bundle.
+ *
+ * How a chunk script works (see tsdown.config.ts chunkBundle):
+ *
+ *   globalThis.__dshChunks__ = globalThis.__dshChunks__ || {};
+ *   globalThis.__dshChunks__["terminal"] = (require) => { ...exports };
+ *
+ * The script registers its factory on a plugin-owned global registry (NOT
+ * through window.__ModuleLoader__.load — the module loader's import() only
+ * resolves seed words, shell-own modules, registered factories, and boot
+ * graph rows; a chunk id is none of those, so resolution would be version-
+ * dependent). Materialization is plugin-owned:
+ *
+ * 1. inject <script src="/sidebar/bundle/<name>.js"> (classic same-origin
+ *    script; the official /plugins/<id>/client.js route cannot serve
+ *    arbitrary file names, so the plugin's own host route serves the chunks),
+ * 2. read the factory from the global registry,
+ * 3. call it with a require that resolves the platform externals through
+ *    `__DSH_MODULES__.import(spec)` — the seed-word branch, the one part of
+ *    the module system that is stable across versions.
+ *
+ * Caching contract (three layers, each with a failure path):
+ * - In-memory: one in-flight promise per chunk, memoized until
+ *   {@link resetChunks}; a failed load removes its entry so the next call
+ *   retries from scratch.
+ * - Script execution: each re-execution overwrites the global registry slot
+ *   (assignment, never registration) — no "duplicate factory registration"
+ *   class of errors; a failed materialization clears the cache so the retry
+ *   re-injects and re-executes.
+ * - HTTP: the bundle route revalidates every request (`cache-control:
+ *   no-cache` + ETag, 304 when unchanged), so page refreshes and HMR
+ *   re-activations never re-download a multi-MB chunk that did not change.
+ *
+ * HMR: each plugin activation calls {@link resetChunks}, which drops the
+ * in-memory cache (and any test registry), so a hot-reloaded core bundle
+ * re-fetches and re-executes the current chunk scripts on the next lazy
+ * open. Chunk-only source edits still need a manual page refresh (the HMR
+ * poll watches only client.js).
+ */
+export type ChunkName = 'docx' | 'xlsx' | 'pptx' | 'terminal' | 'editor'
+
+/** The module exports a chunk factory provides (namespace-ish record). */
+export type ChunkExports = Record<string, unknown>
+
+/** A chunk factory: (require) => exports (the chunk's CJS closure shape). */
+type ChunkFactory = (require: (spec: string) => unknown) => ChunkExports
+
+/**
+ * The platform externals a chunk bundle may require (mirror of
+ * CLIENT_EXTERNALS in tsdown.config.ts — the chunk builds keep these
+ * external and the loader resolves them here). A superset is safe: the
+ * require only answers what the chunk actually asks for.
+ */
+export const CHUNK_EXTERNALS: readonly string[] = [
+  'react',
+  'react/jsx-runtime',
+  'react-dom',
+  'react-dom/client',
+  'cordis',
+  '@deepseek-ai/dsh-client-ui-slots',
+  '@deepseek-ai/dsh-client-web-react',
+  '@deepseek-ai/dsh-client-ui-primitives',
+  '@deepseek-ai/dsh-client-schema-form',
+  '@deepseek-ai/dsh-client-runtime/client',
+]
+
+/** Chunk script endpoint served by the plugin host half (src/bundle-route.ts). */
+const CHUNK_URL = (name: ChunkName): string => `/sidebar/bundle/${name}.js`
+
+/** The client module system surface this loader needs (window.__DSH_MODULES__). */
+interface ChunkModuleSystem {
+  import(specifier: string): Promise<unknown>
+}
+
+/** Resolve the shell-installed module system (set before any plugin activates). */
+function moduleSystem(): ChunkModuleSystem | undefined {
+  return (globalThis as { __DSH_MODULES__?: ChunkModuleSystem }).__DSH_MODULES__
+}
+
+/** The plugin-owned chunk factory registry the chunk scripts populate. */
+interface ChunkRegistry {
+  [name: string]: ChunkFactory | undefined
+}
+
+function chunkRegistry(): ChunkRegistry {
+  const g = globalThis as { __dshChunks__?: ChunkRegistry }
+  return g.__dshChunks__ ??= {}
+}
+
+/** Script-load hook; tests replace it with a stub (the default needs a real DOM + network). */
+export type ChunkScriptLoader = (src: string) => Promise<void>
+
+const defaultScriptLoader: ChunkScriptLoader = (src) => new Promise((resolve, reject) => {
+  const el = document.createElement('script')
+  el.async = true
+  el.src = src
+  el.addEventListener('load', () => {
+    el.remove()
+    resolve()
+  }, { once: true })
+  el.addEventListener('error', () => {
+    el.remove()
+    reject(new Error(`[dsh-better-sidebar] chunk script ${src} failed to load`))
+  }, { once: true })
+  document.head.append(el)
+})
+
+let scriptLoader: ChunkScriptLoader = defaultScriptLoader
+
+/** Test hook: replace the chunk-script loader (pass null to restore the default). */
+export function setChunkScriptLoaderForTests(loader: ChunkScriptLoader | null): void {
+  scriptLoader = loader ?? defaultScriptLoader
+}
+
+/** Test/dev hook: resolve a chunk without fetching a script (e.g. vitest). */
+const testLoaders = new Map<ChunkName, () => Promise<ChunkExports>>()
+export function registerChunkForTests(name: ChunkName, loader: () => Promise<ChunkExports>): void {
+  testLoaders.set(name, loader)
+}
+
+/** Memoized externals require, resolved once per page from the seed table. */
+let externalsRequire: ((spec: string) => unknown) | undefined
+
+async function buildExternalsRequire(modules: ChunkModuleSystem): Promise<(spec: string) => unknown> {
+  if (externalsRequire !== undefined) return externalsRequire
+  // Per-spec tolerance: a spec the running DSH version cannot resolve (e.g.
+  // the runtime/client exemption row) stays unresolved until a chunk
+  // actually requires it — only then it is a loud error.
+  const entries = await Promise.all(CHUNK_EXTERNALS.map(async (spec) => {
+    try {
+      return [spec, await modules.import(spec)] as const
+    } catch {
+      return [spec, undefined] as const
+    }
+  }))
+  const table = new Map<string, unknown>(entries)
+  externalsRequire = (spec: string): unknown => {
+    if (!table.has(spec)) {
+      // Single quotes: the bundle-consistency scan regexes for require("...")
+      // lexical calls — a double-quoted literal here would trip it.
+      throw new Error(`[dsh-better-sidebar] chunk require('${spec}') missed the module table`)
+    }
+    return table.get(spec)
+  }
+  return externalsRequire
+}
+
+/** In-flight/memoized chunk loads; a failure removes its entry so a retry re-fetches. */
+const cache = new Map<ChunkName, Promise<ChunkExports>>()
+
+/**
+ * Load (once) and materialize a lazy chunk, returning its module exports.
+ * Concurrent callers share one in-flight load; a failure clears the cache
+ * entry so the next call retries (the script re-executes and overwrites its
+ * global registry slot — assignments are idempotent).
+ * @param name - the chunk to load.
+ */
+export function loadChunk(name: ChunkName): Promise<ChunkExports> {
+  const cached = cache.get(name)
+  if (cached !== undefined) return cached
+  const task = (async (): Promise<ChunkExports> => {
+    const test = testLoaders.get(name)
+    if (test !== undefined) return test()
+    const modules = moduleSystem()
+    if (modules === undefined) {
+      throw new Error(`[dsh-better-sidebar] chunk "${name}": client module system unavailable`)
+    }
+    await scriptLoader(CHUNK_URL(name))
+    const factory = chunkRegistry()[name]
+    if (typeof factory !== 'function') {
+      throw new Error(`[dsh-better-sidebar] chunk "${name}" script did not register its factory`)
+    }
+    const require = await buildExternalsRequire(modules)
+    return factory(require)
+  })()
+  cache.set(name, task)
+  void task.catch(() => { cache.delete(name) })
+  return task
+}
+
+/**
+ * Drop all chunk state for a fresh plugin activation (HMR-safe): clear the
+ * in-memory cache and any test-registry entries, so the next lazy open
+ * re-fetches and re-executes the current chunk scripts (the registry slots
+ * are overwritten by the re-execution — no cleanup needed).
+ */
+export function resetChunks(): void {
+  cache.clear()
+  testLoaders.clear()
+  externalsRequire = undefined
+}
@@ -0,0 +1,8 @@
+/**
+ * Lazy chunk entry: the .docx preview (docx-preview + jszip). Built as
+ * `lib/client-docx.js` and registered under `dsh-better-sidebar/docx` —
+ * fetched only when a .docx is first opened (see chunk-loader.ts and
+ * docs/plans/2026-08-12-lazy-chunks-design.md). Never import this module
+ * from the core bundle: it pulls the office library into the startup path.
+ */
+export { DocxView } from '../docx-view.tsx'
@@ -0,0 +1,9 @@
+/**
+ * Lazy chunk entry: the code/markdown/html text editor (CodeMirror 6 + the
+ * language packages). Built as `lib/client-editor.js` and registered under
+ * `dsh-better-sidebar/editor` — fetched only when a text file is first
+ * opened (see chunk-loader.ts and docs/plans/2026-08-12-lazy-chunks-design.md).
+ * Never import this module from the core bundle: it pulls CodeMirror into
+ * the startup path.
+ */
+export { TextEditor } from '../TextEditor.tsx'
@@ -0,0 +1,8 @@
+/**
+ * Lazy chunk entry: the .pptx preview (pptx-renderer). Built as
+ * `lib/client-pptx.js` and registered under `dsh-better-sidebar/pptx` —
+ * fetched only when a .pptx is first opened (see chunk-loader.ts and
+ * docs/plans/2026-08-12-lazy-chunks-design.md). Never import this module
+ * from the core bundle: it pulls the renderer into the startup path.
+ */
+export { PptxView } from '../PptxView.tsx'
@@ -0,0 +1,9 @@
+/**
+ * Lazy chunk entry: the interactive terminal (xterm + fit addon). Built as
+ * `lib/client-terminal.js` and registered under
+ * `dsh-better-sidebar/terminal` — fetched only when a terminal tab is first
+ * opened (see chunk-loader.ts and docs/plans/2026-08-12-lazy-chunks-design.md).
+ * Never import this module from the core bundle: it pulls xterm (and its
+ * stylesheet) into the startup path.
+ */
+export { TerminalView } from '../TerminalView.tsx'
@@ -0,0 +1,9 @@
+/**
+ * Lazy chunk entry: the .xlsx preview (Univer family + SheetJS, several MB).
+ * Built as `lib/client-xlsx.js` and registered under
+ * `dsh-better-sidebar/xlsx` — fetched only when a .xlsx is first opened
+ * (see chunk-loader.ts and docs/plans/2026-08-12-lazy-chunks-design.md).
+ * Never import this module from the core bundle: it pulls Univer into the
+ * startup path.
+ */
+export { XlsxView } from '../xlsx-view.tsx'
@@ -0,0 +1,113 @@
+/**
+ * The .docx preview component: renders via docx-preview (preserved
+ * styles/images/tables). Lives in its own module (split out of the former
+ * office-view.tsx) so it builds as a standalone lazy chunk
+ * (`lib/client-docx.js`) — the library is loaded only when a .docx is first
+ * opened, and never pulls in the Univer/xlsx stack.
+ *
+ * Errors degrade to the shared download-button affordance, so a corrupted /
+ * encrypted / oversized file always leaves the user with a way to get it.
+ */
+import { useEffect, useRef, useState } from 'react'
+import { mediaUrl } from './api.ts'
+import { t } from './locales.ts'
+import { BinaryFallback, type LoadState, type OfficeViewProps } from './office-shared.tsx'
+import css from './sidebar.module.css'
+
+/**
+ * Render a .docx file via docx-preview. The library renders into a container
+ * div (no canvas); images and styles are inlined. Unmounting clears the
+ * container's innerHTML — docx-preview has no dispose API, but tearing down
+ * the DOM is enough.
+ */
+export function DocxView(props: OfficeViewProps): JSX.Element {
+  const { scope, path, title } = props
+  const viewportRef = useRef<HTMLDivElement>(null)
+  const wrapRef = useRef<HTMLDivElement>(null)
+  const [load, setLoad] = useState<LoadState>({ status: 'loading' })
+  const [zoom, setZoom] = useState(100)
+
+  useEffect(() => {
+    let cancelled = false
+    const container = viewportRef.current
+    const wrap = wrapRef.current
+    if (container === null || wrap === null) return
+    setZoom(100)
+    void (async () => {
+      try {
+        const response = await fetch(mediaUrl(scope, path))
+        if (cancelled) return
+        if (!response.ok) {
+          throw new Error(`HTTP ${response.status}`)
+        }
+        const buf = await response.arrayBuffer()
+        if (cancelled) return
+        // docx-preview ships its own CSS through the className option; the
+        // wrapper div scopes its render output.
+        const { renderAsync } = await import('docx-preview')
+        await renderAsync(buf, wrap, undefined, {
+          className: 'docx',
+          inWrapper: true,
+          ignoreWidth: false,
+          ignoreHeight: false,
+          breakPages: true,
+          experimental: false,
+        })
+        if (!cancelled) setLoad({ status: 'ready' })
+      } catch (error) {
+        if (!cancelled) {
+          setLoad({ status: 'error', message: error instanceof Error ? error.message : String(error) })
+        }
+      }
+    })()
+    return () => {
+      cancelled = true
+      // Tear down the rendered DOM so a reopen starts clean.
+      if (wrap !== null) wrap.innerHTML = ''
+    }
+  }, [scope.sessionId, scope.cwd, path])
+
+  useEffect(() => {
+    const viewport = viewportRef.current
+    if (viewport === null) return
+    const onWheel = (event: WheelEvent): void => {
+      if (!event.altKey) return
+      event.preventDefault()
+      const delta = event.deltaY < 0 ? 10 : -10
+      setZoom(current => Math.max(50, Math.min(200, current + delta)))
+    }
+    viewport.addEventListener('wheel', onWheel, { passive: false })
+    return () => { viewport.removeEventListener('wheel', onWheel) }
+  }, [])
+
+  return (
+    <div className={css.editorDocx}>
+      <div className={css.editorDocxViewport} ref={viewportRef}>
+        {load.status === 'loading' && <div className={css.editorPlaceholder}>{t('loading')}</div>}
+        {load.status === 'error' && <BinaryFallback scope={scope} path={path} message={load.message} />}
+        {load.status !== 'error' && (
+          <div
+            className={css.editorDocxWrap}
+            ref={wrapRef}
+            aria-label={title}
+            style={{ zoom: zoom / 100 }}
+          />
+        )}
+      </div>
+      <div className={css.editorDocxZoom}>
+        <span className={css.editorDocxZoomHint}>{t('zoomHint')}</span>
+        <input
+          className={css.editorDocxZoomRange}
+          type="range"
+          min={50}
+          max={200}
+          step={10}
+          value={zoom}
+          aria-label={t('zoom')}
+          onChange={(event) => { setZoom(Number(event.currentTarget.value)) }}
+        />
+        <span className={css.editorDocxZoomValue}>{zoom}%</span>
+      </div>
+    </div>
+  )
+}
@@ -1,11 +1,35 @@
 /**
 * Icons the sidebar needs beyond the primitives set: a terminal glyph (the
- * icon library has none) and a diff glyph. Per-tab icons live on the tab
- * descriptors (`descriptor.icon`), not in a type-keyed switch — the icon
- * mapping was registry-ized with the tab types.
+ * icon library has none), a diff glyph, and the two panel-toggle glyphs for
+ * the top-right cluster. Per-tab icons live on the tab descriptors
+ * (`descriptor.icon`), not in a type-keyed switch — the icon mapping was
+ * registry-ized with the tab types.
 */
 import type { IconProps } from '@deepseek-ai/dsh-client-ui-primitives'

+/**
+ * Right-panel toggle glyph (the "侧拉" button): a frame with a filled strip
+ * along its RIGHT edge, in the app's outline style (1.5px stroke,
+ * currentColor).
+ */
+export const IconPanelRightOutline16 = ({ 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="1.5" y="2" width="13" height="12" rx="2.5" stroke="currentColor" strokeWidth="1.5" />
+    <rect x="10.5" y="3.25" width="2.75" height="9.5" rx="1" fill="currentColor" stroke="none" />
+  </svg>
+)
+
+/**
+ * Bottom-panel toggle glyph (the "底栏" button): a frame with a filled strip
+ * along its BOTTOM edge, in the app's outline style.
+ */
+export const IconPanelBottomOutline16 = ({ 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="1.5" y="2" width="13" height="12" rx="2.5" stroke="currentColor" strokeWidth="1.5" />
+    <rect x="3.25" y="10" width="9.5" height="2.75" rx="1" fill="currentColor" stroke="none" />
+  </svg>
+)
+
 /**
 * Terminal glyph in the app's outline style (1.5px stroke, currentColor):
 * a rounded frame with a prompt chevron and underscore cursor.
@@ -0,0 +1,47 @@
+/**
+ * IME-composition key guard.
+ *
+ * While a Chinese/Japanese/Korean input method is composing (the user is
+ * picking a candidate from the IME window), every pressed key BELONGS to the
+ * input method: arrows move the candidate highlight, Enter/Space confirm the
+ * composition, Escape cancels it. Page code must not process those keys —
+ * a component that does (a number stepper calling preventDefault() on
+ * ArrowUp/ArrowDown, a submit handler reacting to Enter, ...) silently
+ * breaks the IME: candidates stop responding, the composition gets torn
+ * apart, and only bare letters come out.
+ *
+ * This guard enforces that rule at the document boundary: a capture-phase
+ * keydown/keyup listener that stops the event from propagating further
+ * whenever a composition is in progress. Because it runs in the capture
+ * phase on `document` — the outermost node — it fires BEFORE React's
+ * delegated handlers (attached at the root container) and before any native
+ * target/bubble listener, so an inlined third-party component (e.g. the
+ * Univer office UI bundled into this plugin) can never intercept
+ * composition keys. The browser's native IME processing is untouched:
+ * stopPropagation only silences page JS, not the default action.
+ *
+ * The composition signal follows the DSH core convention (InputBar's IME
+ * guard, issue #535): `isComposing` for modern engines, keyCode 229 as the
+ * legacy signal engines emit without isComposing.
+ */
+
+/** The pure decision: is this keyboard event part of an IME composition? */
+export function isImeComposition(event: { isComposing: boolean; keyCode: number }): boolean {
+  return event.isComposing || event.keyCode === 229
+}
+
+/**
+ * Register the document-level capture guard. Returns the disposer
+ * (HMR-safe; call through `ctx.effect`).
+ */
+export function registerImeGuard(): () => void {
+  const onKey = (event: KeyboardEvent): void => {
+    if (isImeComposition(event)) event.stopPropagation()
+  }
+  document.addEventListener('keydown', onKey, true)
+  document.addEventListener('keyup', onKey, true)
+  return () => {
+    document.removeEventListener('keydown', onKey, true)
+    document.removeEventListener('keyup', onKey, true)
+  }
+}
@@ -13,10 +13,12 @@ import { createRoot, type Root } from 'react-dom/client'
 import type { Context } from '../context-types.ts'
 import { createSidebarStore } from './state.ts'
 import { createBetterSidebarService } from './service.ts'
+import { resetChunks } from './chunk-loader.ts'
 import { registerBuiltins } from './builtins/index.ts'
 import { Sidebar } from './Sidebar.tsx'
 import { registerOpenPathInterception, registerTurnTailInterception } from './intercept.tsx'
 import { registerLinkInterception } from './link-intercept.ts'
+import { registerImeGuard } from './ime-guard.ts'
 import { loadPrefs } from './prefs.ts'
 import { SideCardSection } from './SideCardSection.tsx'
 import { api } from './api.ts'
@@ -102,6 +104,10 @@ export function apply(ctx: Context): void {
    }
  }
  try {
+    // Fresh chunk state for this activation: invalidate any chunk factories
+    // registered by a previous fiber (HMR) and drop the in-memory load cache
+    // so the next lazy open re-fetches the current chunk scripts.
+    resetChunks()
    ctx.effect(() => {
      let disposed = false
      let root: Root | undefined
@@ -183,6 +189,25 @@ export function apply(ctx: Context): void {
      'dsh-better-sidebar: link interception',
    )

+    // The IME guard: composition keys (candidate arrows, confirm, cancel)
+    // belong to the input method, never to page JS. Inlined third-party UI
+    // (Univer's office controls) has shipped unguarded keydown handlers that
+    // hijack ArrowUp/ArrowDown and break Chinese input (#562 regression); the
+    // document-capture guard neutralizes the whole class before React or any
+    // native listener sees the event. Registered as early as possible so no
+    // other capture-phase listener can win the ordering race.
+    ctx.effect(
+      () => {
+        try {
+          return registerImeGuard()
+        } catch (error) {
+          fail('ime guard', error)
+          return undefined
+        }
+      },
+      'dsh-better-sidebar: IME composition guard',
+    )
+
    // The "Side card" settings section: appears in the DSH Settings shell
    // once the shell's declaration is on the ledger (slots.inject waits for
    // it); the section reads/writes the prefs through the plugin's own
@@ -1,15 +1,20 @@
 /**
- * Layout push: when the sidebar is open it OCCUPIES the layout instead of
+ * Layout push: when a panel is open it OCCUPIES the layout instead of
 * floating over it — the app shell (#root, the AppFrame three-column grid)
- * gives up the panel's width on the right. Only the center column is
- * flexible (1fr), so the squeeze lands exactly on the conversation output
- * and the input bar, like a VSCode sidebar. The fixed panel covers the
- * vacated strip, which looks seamless because #root's background is the
- * theme base.
+ * gives up space. Only the center column is flexible (1fr), so the right
+ * panel's width squeeze (margin-right on #root) lands exactly on the
+ * conversation output and the input bar, like a VSCode sidebar.
 *
- * The width rides a CSS variable updated by the Sidebar shell (0 while
- * collapsed); expand/collapse animates both the margin and the panel slide
- * on the same theme duration. Width drags disable the transition so the
+ * The bottom panel squeezes ONLY the center column — it must not cover the
+ * app's own left sidebar or the right panel. The AppFrame's grid items are
+ * (#root > div > div:nth-child(2)): sidebarCol, centerCol, detailsCol, so
+ * the vertical push lands on the center column alone. The fixed panels
+ * cover the vacated strips, which looks seamless because #root's background
+ * is the theme base.
+ *
+ * The sizes ride CSS variables updated by the Sidebar shell (0 while
+ * collapsed); expand/collapse animates both the margins and the panel
+ * slides on the same theme duration. Drags disable the transition so the
 * layout tracks the pointer.
 */
 #root {
@@ -17,12 +22,23 @@
  transition: margin-right var(--ds-transition-duration-slow) var(--ds-ease-in-out);
 }

-body[data-dsh-sidebar-dragging] #root {
+/* The AppFrame's grid items are sidebarCol, centerCol, detailsCol (children
+   1-3 of #root > div) — nth-child(2) is the center column. A stretched grid
+   item shrinks by its margins, so the conversation content (output + input
+   bar) lifts without touching the sidebars. */
+#root > div > div:nth-child(2) {
+  margin-bottom: var(--dsh-sidebar-height, 0px);
+  transition: margin-bottom var(--ds-transition-duration-slow) var(--ds-ease-in-out);
+}
+
+body[data-dsh-sidebar-dragging] #root,
+body[data-dsh-sidebar-dragging] #root > div > div:nth-child(2) {
  transition: none;
 }

@media (prefers-reduced-motion: reduce) {
-  #root {
+  #root,
+  #root > div > div:nth-child(2) {
    transition: none;
  }
 }
@@ -0,0 +1,89 @@
+/**
+ * Lazy chunk view wrapper: mounts a component that lives in a lazy chunk,
+ * showing a loading placeholder while the chunk script loads and an error +
+ * retry affordance on failure. Used by the built-in tab/viewer descriptors.
+ *
+ * Contract note: {@link lazyChunkComponent} returns a plain render-prop
+ * function — the descriptor contract is `component: (props) => ReactNode`,
+ * and the repo renders descriptors BOTH ways: Sidebar calls
+ * `descriptor.component(props)` directly, EditorHost renders it via
+ * `createElement`. The wrapper function body therefore contains no hooks;
+ * all state lives in the inner {@link LazyChunkView} component.
+ */
+import { createElement, useEffect, useState, type ComponentType, type ReactNode } from 'react'
+import { loadChunk, type ChunkExports, type ChunkName } from './chunk-loader.ts'
+import { t } from './locales.ts'
+import css from './sidebar.module.css'
+
+interface LazyChunkViewProps<P> {
+  chunk: ChunkName
+  /** Module-level-stable selector (an inline lambda would re-trigger the effect). */
+  pick: (mod: ChunkExports) => ComponentType<P> | undefined
+  props: P
+}
+
+function LazyChunkView<P>({ chunk, pick, props }: LazyChunkViewProps<P>): ReactNode {
+  const [attempt, setAttempt] = useState(0)
+  const [state, setState] = useState<
+    | { status: 'loading' }
+    | { status: 'error'; message: string }
+    | { status: 'ready'; Comp: ComponentType<any> }
+  >({ status: 'loading' })
+
+  useEffect(() => {
+    let cancelled = false
+    setState({ status: 'loading' })
+    loadChunk(chunk).then((mod) => {
+      if (cancelled) return
+      const Comp = pick(mod)
+      if (Comp === undefined) {
+        setState({ status: 'error', message: `[dsh-better-sidebar] chunk "${chunk}" is missing its component` })
+        return
+      }
+      setState({ status: 'ready', Comp })
+    }).catch((error: unknown) => {
+      if (cancelled) return
+      setState({ status: 'error', message: error instanceof Error ? error.message : String(error) })
+    })
+    return () => { cancelled = true }
+  }, [chunk, pick, attempt])
+
+  if (state.status === 'loading') {
+    return <div className={css.editorPlaceholder}>{t('loading')}</div>
+  }
+  if (state.status === 'error') {
+    return (
+      <div className={css.editorError}>
+        <span>{state.message}</span>
+        <button
+          type="button"
+          className={css.terminalRetry}
+          onClick={() => { setAttempt(current => current + 1) }}
+        >
+          {t('terminalRetry')}
+        </button>
+      </div>
+    )
+  }
+  return createElement(state.Comp, props)
+}
+
+/**
+ * Build a descriptor-compatible lazy wrapper for a chunk-resident component.
+ * The returned function is the descriptor `component` itself: it returns an
+ * element and never calls hooks, so both invocation styles (plain function
+ * call and createElement/JSX render) work. `pick` must be a module-level
+ * function (stable identity) — an inline lambda would re-trigger the load
+ * effect on every render.
+ * @param chunk - the chunk name (see chunk-loader.ts).
+ * @param pick - select the component from the chunk's exports.
+ */
+export function lazyChunkComponent<P extends object>(
+  chunk: ChunkName,
+  pick: (mod: ChunkExports) => ComponentType<P> | undefined,
+): (props: P) => ReactNode {
+  return (props: P) => createElement(
+    LazyChunkView as ComponentType<LazyChunkViewProps<P>>,
+    { chunk, pick, props },
+  )
+}
@@ -18,8 +18,8 @@ const zh = {
  close: '关闭',
  collapse: '折叠侧边栏',
  expand: '展开侧边栏',
-  expandFullscreen: '展开为全屏',
-  restoreFullscreen: '还原宽度',
+  collapseBottomPanel: '折叠底部面板',
+  expandBottomPanel: '展开底部面板',
  terminalError: '终端连接失败',
  terminalConnectFailed: '终端多次连接失败',
  terminalRetry: '重试',
@@ -123,6 +123,8 @@ const zh = {
  settingsSubagentDesc: '当前会话产生新的子代理时，自动展开侧边栏并打开子代理页面；关闭后需手动打开',
  settingsToolsTitle: '为模型注入终端工具',
  settingsToolsDesc: '开启后，模型可通过 terminal_create 等 8 个工具创建并操作侧边栏终端（默认关闭）',
+  settingsBottomTerminalTitle: '底部面板首次展开自动开终端',
+  settingsBottomTerminalDesc: '每次会话中第一次展开底部面板时，尝试在底部面板自动打开一个新终端标签（终端数量上限仍会限制；默认开启）',
  settingsTabsTitle: '侧边栏内容',
  settingsViewersTitle: '文件预览',
  settingsGeneralTitle: '常规',
@@ -193,8 +195,8 @@ const en: Record<keyof typeof zh, string> = {
  close: 'Close',
  collapse: 'Collapse sidebar',
  expand: 'Expand sidebar',
-  expandFullscreen: 'Expand to full width',
-  restoreFullscreen: 'Restore width',
+  collapseBottomPanel: 'Collapse bottom panel',
+  expandBottomPanel: 'Expand bottom panel',
  terminalError: 'Terminal connection failed',
  terminalConnectFailed: 'Terminal failed to connect repeatedly',
  terminalRetry: 'Retry',
@@ -298,6 +300,8 @@ const en: Record<keyof typeof zh, string> = {
  settingsSubagentDesc: 'Expand the side card and open the Subagent page when the current conversation spawns a new subagent; 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',
+  settingsBottomTerminalDesc: 'When the bottom panel is expanded for the first time in a session, try to open a fresh terminal tab there (the terminal quota still applies; on by default)',
  settingsTabsTitle: 'Sidebar content',
  settingsViewersTitle: 'File viewers',
  settingsGeneralTitle: 'General',
@@ -0,0 +1,40 @@
+/**
+ * Shared pieces of the Office preview views (docx / xlsx): the load-state
+ * union, the shared props, and the download fallback. The two views live in
+ * their own modules (docx-view.tsx / xlsx-view.tsx) so the bundler can emit
+ * them as separate lazy chunks — docx-preview and the Univer family (several
+ * MB) must never share a script (see docs/plans/2026-08-12-lazy-chunks-design.md).
+ */
+import { downloadUrl, type SessionScope } from './api.ts'
+import { t } from './locales.ts'
+import css from './sidebar.module.css'
+
+/** Loading / ready / error state shared by both views. */
+export type LoadState =
+  | { status: 'loading' }
+  | { status: 'ready' }
+  | { status: 'error'; message: string }
+
+/** Shared props. */
+export interface OfficeViewProps {
+  scope: SessionScope
+  path: string
+  title: string
+}
+
+/**
+ * The shared error / fallback affordance: the failure reason plus a download
+ * link, so the user always has a path to the file. Used by both DocxView and
+ * XlsxView, and matches the binary placeholder download link.
+ */
+export function BinaryFallback(props: { scope: SessionScope; path: string; message: string }): JSX.Element {
+  const { scope, path, message } = props
+  return (
+    <div className={css.editorBinary}>
+      <span className={css.editorBinaryNotice}>{message}</span>
+      <a className={css.editorDownloadLink} href={downloadUrl(scope, path)} download>
+        {t('downloadToView')}
+      </a>
+    </div>
+  )
+}
@@ -1,249 +1,12 @@
 /**
- * Office preview components: {@link DocxView} renders .docx via docx-preview
- * (preserved styles/images/tables), {@link XlsxView} renders .xlsx via the
- * Univer sheets preset (data + formulas + formatting). Both load the file
- * bytes through the existing /sidebar/file media route and own their library
- * lifecycle (dispose on unmount so canvases/workers don't leak — mirrors the
- * TerminalView dispose discipline).
- *
- * Errors degrade to the same download-button affordance the binary
- * placeholder uses, so a corrupted / encrypted / oversized file always
- * leaves the user with a way to get the file.
- *
- * Both libraries pull in several MB; tsdown's `codeSplitting: false` inlines
- * them into the single client bundle (the CJS __ModuleLoader__ wrapper's
- * `require` cannot load relative chunk URLs in the browser, so dynamic
- * import() collapses to a synchronous inline — see tsdown.config.ts).
+ * Compat re-export shim for the historical `src/client/office-view.tsx`
+ * path. The office preview views were split into docx-view.tsx /
+ * xlsx-view.tsx (+ office-shared.tsx) so the bundler can emit each library
+ * as its own lazy chunk (see docs/plans/2026-08-12-lazy-chunks-design.md).
+ * This module keeps deep imports of this path resolvable through the
+ * `./src/*` exports subpath — it deliberately re-exports BOTH views, so it
+ * must never be imported from the core bundle or a chunk entry (it would
+ * drag both libraries into that bundle).
 */
-import { useEffect, useRef, useState } from 'react'
-import { downloadUrl, mediaUrl, type SessionScope } from './api.ts'
-import { t } from './locales.ts'
-import { xlsxWorkbookToUniver } from './xlsx-to-univer.ts'
-import css from './sidebar.module.css'
-// Univer's stylesheets ride the same dsh-css-inline pipeline as xterm's CSS
-// (one <style data-plugin-css> tag, idempotent). Static import so the styles
-// are present before the first .xlsx opens.
-import '@univerjs/preset-sheets-core/lib/index.css'
-
-/** Loading / ready / error state shared by both views. */
-type LoadState =
-  | { status: 'loading' }
-  | { status: 'ready' }
-  | { status: 'error'; message: string }
-
-/** Shared props. */
-interface OfficeViewProps {
-  scope: SessionScope
-  path: string
-  title: string
-}
-
-/**
- * Render a .docx file via docx-preview. The library renders into a container
- * div (no canvas); images and styles are inlined. Unmounting clears the
- * container's innerHTML — docx-preview has no dispose API, but tearing down
- * the DOM is enough.
- */
-export function DocxView(props: OfficeViewProps): JSX.Element {
-  const { scope, path, title } = props
-  const viewportRef = useRef<HTMLDivElement>(null)
-  const wrapRef = useRef<HTMLDivElement>(null)
-  const [load, setLoad] = useState<LoadState>({ status: 'loading' })
-  const [zoom, setZoom] = useState(100)
-
-  useEffect(() => {
-    let cancelled = false
-    const container = viewportRef.current
-    const wrap = wrapRef.current
-    if (container === null || wrap === null) return
-    setZoom(100)
-    void (async () => {
-      try {
-        const response = await fetch(mediaUrl(scope, path))
-        if (cancelled) return
-        if (!response.ok) {
-          throw new Error(`HTTP ${response.status}`)
-        }
-        const buf = await response.arrayBuffer()
-        if (cancelled) return
-        // docx-preview ships its own CSS through the className option; the
-        // wrapper div scopes its render output.
-        const { renderAsync } = await import('docx-preview')
-        await renderAsync(buf, wrap, undefined, {
-          className: 'docx',
-          inWrapper: true,
-          ignoreWidth: false,
-          ignoreHeight: false,
-          breakPages: true,
-          experimental: false,
-        })
-        if (!cancelled) setLoad({ status: 'ready' })
-      } catch (error) {
-        if (!cancelled) {
-          setLoad({ status: 'error', message: error instanceof Error ? error.message : String(error) })
-        }
-      }
-    })()
-    return () => {
-      cancelled = true
-      // Tear down the rendered DOM so a reopen starts clean.
-      if (wrap !== null) wrap.innerHTML = ''
-    }
-  }, [scope.sessionId, scope.cwd, path])
-
-  useEffect(() => {
-    const viewport = viewportRef.current
-    if (viewport === null) return
-    const onWheel = (event: WheelEvent): void => {
-      if (!event.altKey) return
-      event.preventDefault()
-      const delta = event.deltaY < 0 ? 10 : -10
-      setZoom(current => Math.max(50, Math.min(200, current + delta)))
-    }
-    viewport.addEventListener('wheel', onWheel, { passive: false })
-    return () => { viewport.removeEventListener('wheel', onWheel) }
-  }, [])
-
-  return (
-    <div className={css.editorDocx}>
-      <div className={css.editorDocxViewport} ref={viewportRef}>
-        {load.status === 'loading' && <div className={css.editorPlaceholder}>{t('loading')}</div>}
-        {load.status === 'error' && <BinaryFallback scope={scope} path={path} message={load.message} />}
-        {load.status !== 'error' && (
-          <div
-            className={css.editorDocxWrap}
-            ref={wrapRef}
-            aria-label={title}
-            style={{ zoom: zoom / 100 }}
-          />
-        )}
-      </div>
-      <div className={css.editorDocxZoom}>
-        <span className={css.editorDocxZoomHint}>{t('zoomHint')}</span>
-        <input
-          className={css.editorDocxZoomRange}
-          type="range"
-          min={50}
-          max={200}
-          step={10}
-          value={zoom}
-          aria-label={t('zoom')}
-          onChange={(event) => { setZoom(Number(event.currentTarget.value)) }}
-        />
-        <span className={css.editorDocxZoomValue}>{zoom}%</span>
-      </div>
-    </div>
-  )
-}
-
-/**
- * Render a .xlsx file via Univer. The sheets preset creates a canvas-based
- * spreadsheet (formula bar, sheet tabs, formula engine) sized to its
- * container, so the host fills the pane. Unmounting calls `univer.dispose()`
- * — without it the canvas, workers, and DOM listeners leak (mirrors the
- * xterm dispose discipline in TerminalView).
- */
-export function XlsxView(props: OfficeViewProps): JSX.Element {
-  const { scope, path, title } = props
-  const hostRef = useRef<HTMLDivElement>(null)
-  const univerRef = useRef<{ dispose: () => void } | null>(null)
-  const [load, setLoad] = useState<LoadState>({ status: 'loading' })
-
-  useEffect(() => {
-    let cancelled = false
-    const host = hostRef.current
-    if (host === null) return
-    void (async () => {
-      try {
-        const response = await fetch(mediaUrl(scope, path))
-        if (cancelled) return
-        if (!response.ok) {
-          throw new Error(`HTTP ${response.status}`)
-        }
-        const buf = await response.arrayBuffer()
-        if (cancelled) return
-
-        // Dynamic imports — collapsed into the bundle by codeSplitting:false.
-        // The dynamic form keeps the source readable: each lib is only pulled
-        // in when an .xlsx is actually opened (semantically; the bundle still
-        // contains all of them).
-        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
-          ? 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 workbookData = xlsxWorkbookToUniver(wb, '0.25.1', locale)
-
-        if (cancelled) return
-        const { univer, univerAPI } = createUniver({
-          locale,
-          locales: localePack !== null ? { [locale]: mergeLocales(localePack) } : {},
-          presets: [UniverSheetsCorePreset({ container: host })],
-        })
-        univerRef.current = univer
-        univerAPI.createWorkbook(workbookData)
-        if (!cancelled) setLoad({ status: 'ready' })
-      } catch (error) {
-        if (!cancelled) {
-          try {
-            univerRef.current?.dispose()
-          } catch {
-            // Partially initialized instance — ignore disposal errors.
-          }
-          univerRef.current = null
-          host.innerHTML = ''
-          setLoad({ status: 'error', message: error instanceof Error ? error.message : String(error) })
-        }
-      }
-    })()
-    return () => {
-      cancelled = true
-      // Critical: dispose the Univer instance (canvas + workers + listeners).
-      try {
-        univerRef.current?.dispose()
-      } catch {
-        // Already torn down — ignore.
-      }
-      univerRef.current = null
-      // Clear the host in case dispose left DOM behind.
-      if (host !== null) host.innerHTML = ''
-    }
-  }, [scope.sessionId, scope.cwd, path])
-
-  return (
-    <div className={css.editorXlsx} aria-label={title}>
-      {/* Univer exclusively owns this element's descendants. React only owns
-          the sibling overlay, so Univer cannot remove a React child. */}
-      <div className={css.editorUniverHost} ref={hostRef} />
-      {load.status !== 'ready' && (
-        <div className={css.editorOfficeOverlay}>
-          {load.status === 'loading' && <div className={css.editorPlaceholder}>{t('loading')}</div>}
-          {load.status === 'error' && <BinaryFallback scope={scope} path={path} message={load.message} />}
-        </div>
-      )}
-    </div>
-  )
-}
-
-/**
- * The shared error / fallback affordance: the failure reason plus a download
- * link, so the user always has a path to the file. Used by both DocxView and
- * XlsxView, and matches the binary placeholder download link.
- */
-function BinaryFallback(props: { scope: SessionScope; path: string; message: string }): JSX.Element {
-  const { scope, path, message } = props
-  return (
-    <div className={css.editorBinary}>
-      <span className={css.editorBinaryNotice}>{message}</span>
-      <a className={css.editorDownloadLink} href={downloadUrl(scope, path)} download>
-        {t('downloadToView')}
-      </a>
-    </div>
-  )
-}
+export { DocxView } from './docx-view.tsx'
+export { XlsxView } from './xlsx-view.tsx'
@@ -43,6 +43,9 @@ export function parsePrefs(value: unknown): SidebarPrefs {
    agentTerminalTools: typeof record.agentTerminalTools === 'boolean'
      ? record.agentTerminalTools
      : SIDEBAR_PREFS_DEFAULTS.agentTerminalTools,
+    bottomPanelAutoTerminal: typeof record.bottomPanelAutoTerminal === 'boolean'
+      ? record.bottomPanelAutoTerminal
+      : SIDEBAR_PREFS_DEFAULTS.bottomPanelAutoTerminal,
    interceptOpenPath: typeof record.interceptOpenPath === 'boolean'
      ? record.interceptOpenPath
      : SIDEBAR_PREFS_DEFAULTS.interceptOpenPath,
@@ -22,9 +22,10 @@
 import type { ReactNode } from 'react'
 import type { Context } from '../context-types.ts'
 import {
-  activateTab, allLeaves, closeTab as closeTabReducer, openTabInActivePane, patchTab,
+  activateTab, allLeaves, closeTab as closeTabReducer, openTabInActivePane, patchTab, togglePanel, treeOf,
  type SidebarState, type SidebarStore, type SidebarTab,
 } from './state.ts'
+import { isNarrowWidth } from './breakpoints.ts'
 import type { SessionScope } from './api.ts'

 /** One declarative boolean setting of a tab/viewer, rendered as a nested
@@ -198,6 +199,13 @@ export interface BetterSidebarService {
   * pre-set to the URL (the browser tab's navigation seed; the caller
   * usually pairs it with a hostname `title`). A disabled tab type is a
   * no-op.
+   *
+   * A CONTENT open (a `path` or `url` seed) must land in sight: when the
+   * panel hosting the landing pane is collapsed, it is expanded
+   * automatically (the right panel by default, the bottom panel when the
+   * active pane lives there; on narrow viewports the merged drawer opens).
+   * Type-only opens (the + menu, agent-terminal auto-tabs) never expand —
+   * the panel behavior is their caller's business.
   */
  openTab(seed: { type: string; title?: string; path?: string; diff?: SidebarTab['diff']; id?: string; url?: string }): void
  /** Close a tab by id. */
@@ -335,13 +343,41 @@ export function createBetterSidebarService(store: SidebarStore): BetterSidebarSe
      // A URL seed pre-fills the tab's path (the browser tab navigates to it
      // on mount). An explicit seed.title also wins over a createTab-minted
      // default title (e.g. the sidebar-browser's hostname title).
+      let landed: SidebarState
      if (seed.url !== undefined) {
-        return patchTab(next, tab.id, {
+        landed = patchTab(next, tab.id, {
          path: seed.url,
          ...(seed.title !== undefined ? { title: seed.title } : {}),
        })
+      } else {
+        landed = next
      }
-      return next
+      // A CONTENT open (file / browser) must land in sight: when the panel
+      // hosting the landing pane is collapsed, expand it. On narrow
+      // viewports the two workbenches merge into one drawer, so the drawer
+      // (panelOpen) is the only lever; on wide viewports the landing pane's
+      // own panel opens — the bottom panel when the active pane lives in the
+      // bottom tree, else the right panel. Type-only opens (+ menu,
+      // agent-terminal auto-tabs) never expand (the panel behavior is their
+      // caller's business). The check runs on the post-dedupe state, so a
+      // content open that merely FOCUSES an existing tab expands the panel
+      // too — the open must never land out of sight.
+      if (
+        typeof window !== 'undefined'
+        && (seed.path !== undefined || seed.url !== undefined)
+      ) {
+        if (isNarrowWidth(window.innerWidth)) {
+          if (!landed.panelOpen) return togglePanel(landed)
+        } else {
+          const hostKey = treeOf(landed, landed.activePane ?? '')
+          if (hostKey === 'bottomSplits') {
+            if (!landed.bottomOpen) return { ...landed, bottomOpen: true }
+          } else if (!landed.panelOpen) {
+            return togglePanel(landed)
+          }
+        }
+      }
+      return landed
    })
  }

@@ -379,7 +415,9 @@ function applyDedupe(state: SidebarState, tab: SidebarTab, descriptor: TabDescri
  const dedupeKey = descriptor.dedupeKey ?? (descriptor.single === true ? () => descriptor.id : undefined)
  const key = dedupeKey?.(tab)
  if (key !== undefined) {
-    for (const leaf of allLeaves(state.splits)) {
+    // The scan covers BOTH trees: opening a single-instance tab from the
+    // bottom panel focuses an existing instance wherever it lives.
+    for (const leaf of allLeaves(state.splits).concat(allLeaves(state.bottomSplits))) {
      const existing = leaf.tabs.find(t => t.type === tab.type && dedupeKey!(t) === key)
      if (existing !== undefined) return activateTab(state, leaf.id, existing.id)
    }
@@ -387,9 +425,9 @@ function applyDedupe(state: SidebarState, tab: SidebarTab, descriptor: TabDescri
  return openTabInActivePane(state, tab)
 }

-/** Find which pane hosts a tab id ('' if none). */
+/** Find which pane hosts a tab id ('' if none). Either tree is searched. */
 function findPaneIdOf(state: SidebarState, tabId: string): string {
-  for (const leaf of allLeaves(state.splits)) {
+  for (const leaf of allLeaves(state.splits).concat(allLeaves(state.bottomSplits))) {
    if (leaf.tabs.some(t => t.id === tabId)) return leaf.id
  }
  return state.activePane ?? ''
@@ -10,27 +10,39 @@

 /* ── Shell ─────────────────────────────────────────────────────────────── */

-.toggleRail {
+/* The persistent expand/collapse cluster at the top-right corner: two rail
+   controls side by side (bottom panel's glyph LEFT of the right panel's).
+   Always pinned to the viewport corner — inside the right panel's top-right
+   while it is open, sitting flush in the 34px tab strip (28px buttons at
+   top: 3) whose right end it really squeezes. */
+.toggleCluster {
  position: fixed;
-  right: 0;
-  top: 50%;
-  transform: translateY(-50%);
+  top: 3px;
+  right: 10px;
  z-index: 55;
  display: flex;
-  align-items: center;
-  /* Native rail inset: the 36px control sits 10px off the column edge. */
-  padding: 0 10px;
+  flex-direction: row;
+  gap: 4px;
 }

-/* The closed-state affordance is the native rail icon control: a plain 36px
-   circle, transparent fill, secondary ink; hover raises the fill. No border,
-   no shadow — the icon alone is the affordance (SidebarRoot .iconButton). */
+/* The tab strip of the OPEN right panel reserves the cluster's width at its
+   right end, so the tabs and the + menu genuinely yield space to the cluster
+   (never hiding under it). */
+.panel:not(.panelHidden) .tabBar {
+  padding-right: 72px;
+}
+
+/* The closed-state affordance is the native rail icon control: a plain
+   28px circle (the app's icon-button size — the cluster must stay inside
+   the 34px tab-strip band so it never covers the pane headers below),
+   transparent fill, secondary ink; hover raises the fill. No border, no
+   shadow — the icon alone is the affordance. */
 .toggleButton {
  display: flex;
  align-items: center;
  justify-content: center;
-  width: 36px;
-  height: 36px;
+  width: 28px;
+  height: 28px;
  border: none;
  border-radius: 50%;
  background: transparent;
@@ -55,6 +67,8 @@
  position: fixed;
  top: 0;
  right: 0;
+  /* Full height: the bottom panel squeezes only the center column, so the
+     right panel never gives up any vertical position. */
  bottom: 0;
  z-index: 50;
  display: flex;
@@ -100,25 +114,6 @@
  background: var(--dsw-alias-interactive-bg-hover-accent);
 }

-.panelHeader {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-  height: 36px;
-  padding: 0 8px 0 12px;
-  border-bottom: 1px solid var(--dsw-alias-border-l1);
-  flex: none;
-}
-
-.panelTitle {
-  font: var(--dsw-font-s-14);
-  color: var(--dsw-alias-label-secondary);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
 .panelBody {
  flex: 1;
  min-height: 0;
@@ -126,6 +121,112 @@
  display: flex;
 }

+/* ── Bottom panel ──────────────────────────────────────────────────────── */
+
+/* The bottom panel: an independent workbench at the bottom of the CENTER
+   column only (the Sidebar shell writes left/right inline: from the app's
+   own left sidebar to the right panel's left edge) — the sidebars never
+   give up any position. Same surface as the right panel, with a top
+   hairline instead of the left one. */
+.bottomPanel {
+  position: fixed;
+  bottom: 0;
+  z-index: 50;
+  display: flex;
+  flex-direction: column;
+  background: var(--dsw-specific-sidebar-fill);
+  border-top: 1px solid var(--dsw-alias-border-l2);
+  /* Expand/collapse slides the panel; height drags animate the height. */
+  transition:
+    transform var(--ds-transition-duration-slow) var(--ds-ease-in-out),
+    height var(--ds-transition-duration-slow) var(--ds-ease-in-out);
+}
+
+/* Collapsed: slid off-screen, interactive nothing, hidden after the slide. */
+.bottomPanelHidden {
+  transform: translateY(102%);
+  pointer-events: none;
+  visibility: hidden;
+  transition:
+    transform var(--ds-transition-duration-slow) var(--ds-ease-in-out),
+    height var(--ds-transition-duration-slow) var(--ds-ease-in-out),
+    visibility 0s linear var(--ds-transition-duration-slow);
+}
+
+/* Height drags write at pointer cadence; easing would detach the edge. */
+.bottomPanel[data-dragging] {
+  transition: none;
+}
+
+/* The bottom panel's height drag: the top edge strip (mirror of the right
+   panel's width strip). */
+.bottomResize {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: -4px;
+  height: 8px;
+  cursor: row-resize;
+  z-index: 2;
+  touch-action: none;
+}
+
+.bottomResizeActive {
+  background: var(--dsw-alias-interactive-bg-hover-accent);
+}
+
+/* The bottom panel's close control: the app's icon-button pattern (28px
+   circle), pinned to the tab strip's right end — one tap collapses the
+   panel. The tab strips below reserve its width so the + menu never hides
+   under it. */
+.bottomClose {
+  position: absolute;
+  top: 3px;
+  right: 6px;
+  z-index: 4;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border: none;
+  border-radius: 50%;
+  background: transparent;
+  color: var(--dsw-alias-label-secondary);
+  cursor: pointer;
+  flex: none;
+}
+
+.bottomClose:hover:not(:disabled) {
+  background: var(--dsw-alias-interactive-bg-hover);
+  color: var(--dsw-alias-label-primary);
+}
+
+/* The bottom panel's tab strips reserve the close control's width at their
+   right end, so the + menu never hides under it. */
+.bottomPanel .tabBar {
+  padding-right: 40px;
+}
+
+/* The shared corner (both panels open): the intersection of the right
+   panel's left edge and the bottom panel's top edge. Horizontal drags
+   resize the width, vertical drags the height — the two panels drag
+   against each other. */
+.cornerHandle {
+  position: fixed;
+  width: 12px;
+  height: 12px;
+  z-index: 52;
+  cursor: nwse-resize;
+  touch-action: none;
+}
+
+.cornerHandle:hover,
+.cornerHandle[data-dragging] {
+  background: var(--dsw-alias-interactive-bg-hover-accent);
+}
+
 /* Icon button: the app's own icon-button pattern (ui-workspace) — a 28px
   circle, secondary label, hover fill; no border so the icon alone is the
   affordance. */
@@ -317,28 +418,35 @@
  display: none;
 }

+/* An empty pane's welcome cards: a responsive grid of compact cards — as
+   many per row as the pane width allows; rows that cannot fit the pane
+   height are clipped (never scrolled or squeezed smaller). */
 .paneEmptyCards {
  flex: 1;
  min-height: 0;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
+  align-content: start;
  gap: 8px;
-  padding: 16px;
+  padding: 12px;
+  overflow: hidden;
 }

 .paneCard {
  display: flex;
+  flex-direction: column;
  align-items: center;
-  gap: 10px;
-  padding: 10px 12px;
+  justify-content: center;
+  gap: 6px;
+  min-width: 0;
+  padding: 12px 8px;
  border: 1px solid var(--dsw-alias-border-l1);
  border-radius: 8px;
  background: var(--dsw-alias-bg-layer-1);
  color: var(--dsw-alias-label-secondary);
  font: var(--dsw-font-xxs-strong-12);
  cursor: pointer;
-  text-align: left;
+  text-align: center;
 }

 .paneCard:hover:not(:disabled) {
@@ -1713,6 +1821,7 @@
 /* Keyboard focus stays visible on every interactive control (the styling
   policy requires focus visibility; the accent token doubles as the ring). */
 .toggleButton:focus-visible,
+.bottomClose:focus-visible,
 .iconButton:focus-visible,
 .tab:focus-visible,
 .tabClose:focus-visible,
@@ -1739,6 +1848,9 @@
@media (prefers-reduced-motion: reduce) {
  .panel,
  .panelHidden,
+  .bottomPanel,
+  .bottomPanelHidden,
+  .toggleCluster,
  .toggleButton,
  .tab,
  .tabBarPlus,
@@ -1752,3 +1864,28 @@
    animation: none;
  }
 }
+
+/* ── Narrow (mobile) viewport ──────────────────────────────────────────── */
+
+/* Pairs with NARROW_MAX_WIDTH = 768 in src/client/breakpoints.ts: widths
+   strictly below 768px (i.e. max-width: 767px) switch the sidebar to the
+   mobile layout — one full-screen drawer (the bottom panel's tabs were
+   migrated into the right tree), one toggle button. The structural
+   switches (which panels render, the migration) are JS-driven via
+   useNarrowViewport; this block only adapts the pure style details. */
+@media (max-width: 767px) {
+  /* The toggle cluster holds a single button on narrow viewports (the
+     bottom panel button is not rendered), so the open panel's tab strip
+     reserves 40px instead of the desktop 72px — the tabs and + menu still
+     yield space to the one remaining control. */
+  .panel:not(.panelHidden) .tabBar {
+    padding-right: 40px;
+  }
+
+  /* Narrower tabs: a phone-width drawer fits more open tabs before the
+     strip scrolls. */
+  .tab {
+    min-width: 48px;
+    max-width: 128px;
+  }
+}
@@ -262,20 +262,24 @@ function NodeView(props: {
  )
 }

-/** The workbench: the split tree filling the sidebar body. */
+/** The workbench: the split tree filling the sidebar body. `tree` selects
+ *  which tree renders (the right panel's by default; the bottom panel passes
+ *  `state.bottomSplits` — the actions route by pane id, so one action set
+ *  serves both). */
 export function Workbench(props: {
  state: SidebarState
+  tree?: SplitNode
  newTabOptions: NewTabOption[]
  actions: WorkbenchActions
  onNewTab: (optionId: string) => void
  renderTab: (tab: SidebarTab, active: boolean, paneId: string) => ReactNode
  getTabIcon?: (tab: SidebarTab) => ReactNode
 }) {
-  const { state, newTabOptions, actions, onNewTab, renderTab, getTabIcon } = props
+  const { state, tree, newTabOptions, actions, onNewTab, renderTab, getTabIcon } = props
  return (
    <div className={css.workbench}>
      <NodeView
-        node={state.splits}
+        node={tree ?? state.splits}
        state={state}
        newTabOptions={newTabOptions}
        actions={actions}
@@ -10,6 +10,7 @@
 * operations are pure functions over the node, unit-tested in tests/state.spec.ts.
 */
 import { SIDEBAR_PREFS_DEFAULTS, type SidebarPrefs } from '../prefs-shared.ts'
+import { isNarrowWidth } from './breakpoints.ts'

 /**
 * Tab type identifier. Builtins register their ids (explorer / git / editor
@@ -57,7 +58,9 @@ export type SplitNode = SidebarLeaf | SidebarSplit
 export interface SidebarState {
  panelOpen: boolean
  width: number
-  /** The pane receiving newly opened tabs (last pane the user touched). */
+  /** The pane receiving newly opened tabs (last pane the user touched).
+   *  Pane ids are globally unique across BOTH trees (shared uid counter), so
+   *  one field resolves into either tree — see {@link treeOf}. */
  activePane: string | null
  /** Monotonic terminal tab counter (ids survive reloads). */
  nextTerminal: number
@@ -65,13 +68,31 @@ export interface SidebarState {
  nextBrowser: number
  /** Explorer expansion set (absolute directory paths). */
  expanded: string[]
+  /** The right sidebar's split tree (the original workbench). */
  splits: SplitNode
+  /** Whether the bottom panel (a second, independent workbench) is open. */
+  bottomOpen: boolean
+  /** The bottom panel's height (clamped to the contract range). */
+  bottomHeight: number
+  /**
+   * Whether the bottom panel has been expanded at least once in this
+   * session — the FIRST expansion tries to auto-open a terminal tab (gated
+   * on the bottomPanelAutoTerminal pref); later expansions never do.
+   */
+  bottomOpenedOnce: boolean
+  /** The bottom panel's own split tree (panes/tabs live only in ONE tree;
+   *  tabs never cross panels — the two panels only share panel-size drags). */
+  bottomSplits: SplitNode
 }

 export const PANEL_MIN = 280
 export const PANEL_MAX = 640
 export const PANEL_DEFAULT = 400
 export const TAB_MAX_WIDTH = 160
+/** Bottom panel geometry contract (mirrors the width contract; the upper
+ * bound is the viewport, enforced by {@link setBottomHeight}). */
+export const BOTTOM_MIN = 120
+export const BOTTOM_DEFAULT = 220

 let nextIdCounter = 0
 /** Unique pane/tab id within one state instance. */
@@ -110,6 +131,7 @@ function maxCounterId(parsed: unknown): number {
    }
  }
  walk((parsed as Record<string, unknown> | null)?.splits)
+  walk((parsed as Record<string, unknown> | null)?.bottomSplits)
  return max
 }

@@ -126,6 +148,9 @@ export function makeDefaultState(width = PANEL_DEFAULT, panelOpen = true, seedEx
    leaf.tabs = [{ id: uid('tab'), type: 'explorer', title: 'Explorer' }]
    leaf.active = leaf.tabs[0]!.id
  }
+  // The bottom panel starts closed with an empty pane (its welcome cards
+  // offer the openable types on first use).
+  const bottomLeaf: SidebarLeaf = { kind: 'leaf', id: uid('pane'), tabs: [], active: null }
  return {
    panelOpen,
    width,
@@ -134,9 +159,29 @@ export function makeDefaultState(width = PANEL_DEFAULT, panelOpen = true, seedEx
    nextBrowser: 1,
    expanded: [],
    splits: leaf,
+    bottomOpen: false,
+    bottomHeight: BOTTOM_DEFAULT,
+    bottomOpenedOnce: false,
+    bottomSplits: bottomLeaf,
  }
 }

+/** Whether a tree node (or any descendant) carries the given pane/split id. */
+function treeHasId(node: SplitNode, id: string): boolean {
+  if (node.id === id) return true
+  if (node.kind === 'split') return node.children.some(child => treeHasId(child, id))
+  return false
+}
+
+/** Which tree owns a pane/split id: 'bottomSplits' when the id lives in the
+ *  bottom panel's tree, else 'splits' (the right panel's tree). Ids are
+ *  globally unique (the shared uid counter), so an id in neither tree falls
+ *  back to the right tree, where tree operations no-op on a missing node —
+ *  the pre-bottom-panel behavior. */
+export function treeOf(state: SidebarState, id: string): 'splits' | 'bottomSplits' {
+  return treeHasId(state.bottomSplits, id) ? 'bottomSplits' : 'splits'
+}
+
 /** Walk the tree and apply `visit` to the leaf with the given id. */
 export function mapLeaf(node: SplitNode, paneId: string, visit: (leaf: SidebarLeaf) => void): SplitNode {
  if (node.kind === 'leaf') {
@@ -161,6 +206,44 @@ export function firstLeaf(node: SplitNode): SidebarLeaf {
  return firstLeaf(node.children[0]!)
 }

+/** Empty every leaf of a tree (the bottom tree after its tabs migrate out). */
+function clearAllTabs(node: SplitNode): SplitNode {
+  if (node.kind === 'leaf') return { ...node, tabs: [], active: null }
+  return { ...node, children: node.children.map(clearAllTabs) }
+}
+
+/**
+ * Narrow-viewport migration: the bottom panel's tabs are thrown INTO the
+ * right sidebar — the "merged display" on mobile is the right panel alone,
+ * whose tab strips now carry the bottom tree's tabs (depth-first order,
+ * appended to the right tree's FIRST leaf). The bottom tree is emptied (its
+ * structure stays — the desktop bottom panel re-renders its welcome cards)
+ * and the panel closes. The active pane moves to the right tree's first
+ * leaf so every new tab lands in the visible panel.
+ *
+ * Idempotent: a bottom tree with no tabs and a closed panel returns the
+ * same reference. Runs when the viewport enters narrow (see the Sidebar
+ * shell); migrating is permanent for the session — the tabs now live in the
+ * right tree, exactly like the user "threw them in".
+ */
+export function migrateBottomTabs(state: SidebarState): SidebarState {
+  const bottomTabs = allLeaves(state.bottomSplits).flatMap(leaf => leaf.tabs)
+  const activeInBottom = state.activePane !== null && treeHasId(state.bottomSplits, state.activePane)
+  if (bottomTabs.length === 0 && !state.bottomOpen && !activeInBottom) return state
+  const target = firstLeaf(state.splits)
+  return {
+    ...state,
+    activePane: target.id,
+    bottomOpen: false,
+    splits: bottomTabs.length > 0
+      ? mapLeaf(state.splits, target.id, leaf => {
+        leaf.tabs = [...leaf.tabs, ...bottomTabs]
+      })
+      : state.splits,
+    bottomSplits: bottomTabs.length > 0 ? clearAllTabs(state.bottomSplits) : state.bottomSplits,
+  }
+}
+
 /** Find the leaf containing a tab id, if any. */
 export function leafWithTab(node: SplitNode, tabId: string): SidebarLeaf | undefined {
  if (node.kind === 'leaf') {
@@ -179,9 +262,10 @@ export function allLeaves(node: SplitNode): SidebarLeaf[] {
  return node.children.flatMap(allLeaves)
 }

-/** Whether a tab exists anywhere in a state tree (any pane). */
+/** Whether a tab exists anywhere in a state (either tree, any pane). */
 export function tabOpenIn(state: SidebarState, tabId: string): boolean {
  return allLeaves(state.splits).some(leaf => leaf.tabs.some(tab => tab.id === tabId))
+    || allLeaves(state.bottomSplits).some(leaf => leaf.tabs.some(tab => tab.id === tabId))
 }

 /** Replace a leaf with a split of it plus a fresh empty leaf. */
@@ -237,6 +321,9 @@ export type DropZone = 'left' | 'right' | 'up' | 'down' | 'center'
 * The VSCode drag gesture: move a tab out of its pane and either merge it
 * into the target pane (center) or split the target pane with the tab in a
 * fresh leaf (edge). The source pane collapses when it empties.
+ *
+ * The panes may live in DIFFERENT trees (dragging a tab between the two
+ * panels): the tab then leaves its own tree and lands in the other one.
 */
 export function moveTabToEdge(
  state: SidebarState,
@@ -249,11 +336,43 @@ export function moveTabToEdge(
    // Dropped back onto its own pane's center: reorder to the end.
    return moveTab(state, fromPane, tabId, toPane, -1)
  }
-  const source = leafWithTab(state.splits, tabId)
+  const key = treeOf(state, fromPane)
+  const toKey = treeOf(state, toPane)
+  if (key !== toKey) {
+    // Cross-panel drop: remove the tab from its own tree, then merge (center)
+    // or split (edge) a pane of the OTHER tree with the tab.
+    const source = leafWithTab(state[key], tabId)
+    if (source === undefined) return state
+    const tab = source.tabs.find(candidate => candidate.id === tabId)!
+    let emptied = false
+    let sourceNode = mapLeaf(state[key], source.id, (leaf) => {
+      leaf.tabs = leaf.tabs.filter(candidate => candidate.id !== tabId)
+      if (leaf.active === tabId) leaf.active = leaf.tabs[leaf.tabs.length - 1]?.id ?? null
+      if (leaf.tabs.length === 0) emptied = true
+    })
+    if (emptied) sourceNode = removeLeafAt(sourceNode, source.id)
+    let targetNode = state[toKey]
+    let activePane: string
+    if (zone === 'center') {
+      targetNode = mapLeaf(targetNode, toPane, (leaf) => {
+        leaf.tabs = [...leaf.tabs, tab]
+        leaf.active = tab.id
+      })
+      activePane = toPane
+    } else {
+      const dir = zone === 'left' || zone === 'right' ? 'row' : 'col'
+      const result = insertLeafAt(targetNode, toPane, dir, tab, zone === 'left' || zone === 'up')
+      targetNode = result.node
+      activePane = result.leafId
+    }
+    return { ...state, [key]: sourceNode, [toKey]: targetNode, activePane }
+  }
+  const node = state[key]
+  const source = leafWithTab(node, tabId)
  if (source === undefined) return state
  const tab = source.tabs.find(candidate => candidate.id === tabId)!
  let emptied = false
-  let splits = mapLeaf(state.splits, source.id, (leaf) => {
+  let splits = mapLeaf(node, source.id, (leaf) => {
    leaf.tabs = leaf.tabs.filter(candidate => candidate.id !== tabId)
    if (leaf.active === tabId) leaf.active = leaf.tabs[leaf.tabs.length - 1]?.id ?? null
    if (leaf.tabs.length === 0) emptied = true
@@ -264,11 +383,11 @@ export function moveTabToEdge(
      leaf.tabs = [...leaf.tabs, tab]
      leaf.active = tab.id
    })
-    return { ...state, splits, activePane: toPane }
+    return { ...state, [key]: splits, activePane: toPane }
  }
  const dir = zone === 'left' || zone === 'right' ? 'row' : 'col'
  const result = insertLeafAt(splits, toPane, dir, tab, zone === 'left' || zone === 'up')
-  return { ...state, splits: result.node, activePane: result.leafId }
+  return { ...state, [key]: result.node, activePane: result.leafId }
 }

 /**
@@ -291,21 +410,23 @@ export function removeLeafAt(node: SplitNode, paneId: string): SplitNode {

 /** Close a tab; an emptied leaf is removed (unless it is the only pane). */
 export function closeTab(state: SidebarState, paneId: string, tabId: string): SidebarState {
+  const key = treeOf(state, paneId)
  let emptied = false
-  const splits = mapLeaf(state.splits, paneId, (leaf) => {
+  const splits = mapLeaf(state[key], paneId, (leaf) => {
    leaf.tabs = leaf.tabs.filter(tab => tab.id !== tabId)
    if (leaf.active === tabId) leaf.active = leaf.tabs[leaf.tabs.length - 1]?.id ?? null
    if (leaf.tabs.length === 0) emptied = true
  })
-  return { ...state, splits: emptied ? removeLeafAt(splits, paneId) : splits }
+  return { ...state, [key]: emptied ? removeLeafAt(splits, paneId) : splits }
 }

-/** Activate a tab in its pane. */
+/** Activate a tab in its pane (the pane's own tree). */
 export function activateTab(state: SidebarState, paneId: string, tabId: string): SidebarState {
+  const key = treeOf(state, paneId)
  return {
    ...state,
    activePane: paneId,
-    splits: mapLeaf(state.splits, paneId, (leaf) => {
+    [key]: mapLeaf(state[key], paneId, (leaf) => {
      if (leaf.tabs.some(tab => tab.id === tabId)) leaf.active = tabId
    }),
  }
@@ -314,7 +435,7 @@ export function activateTab(state: SidebarState, paneId: string, tabId: string):
 /** Update the display fields of one open tab (title / path) without
 *  re-opening it. The browser tab persists its current URL and hostname
 *  title through this reducer so a reload restores the visited page. A
- *  missing tab id is a no-op. */
+ *  missing tab id is a no-op. The tab may live in either tree. */
 export function patchTab(
  state: SidebarState,
  tabId: string,
@@ -338,7 +459,8 @@ export function patchTab(
    return children === node.children ? node : { ...node, children }
  }
  const splits = walk(state.splits)
-  return changed ? { ...state, splits } : state
+  const bottomSplits = walk(state.bottomSplits)
+  return changed ? { ...state, splits, bottomSplits } : state
 }

 /**
@@ -349,34 +471,68 @@ export function patchTab(
 * openDiffTab already check existence before calling) and the landing
 * itself — the service's dedupe path delegates here after its dedupeKey
 * check misses.
+ *
+ * The active pane may live in EITHER tree (pane ids are globally unique):
+ * a stale id that survives in neither tree falls back to the right tree's
+ * first pane instead of swallowing the open.
 */
 export function openTabInActivePane(state: SidebarState, tab: SidebarTab): SidebarState {
  let targetId = state.activePane ?? firstLeaf(state.splits).id
  // A stale activePane (its pane was closed since) must not swallow the
-  // open: fall back to the first pane instead of dropping the tab.
-  if (!allLeaves(state.splits).some(leaf => leaf.id === targetId)) {
+  // open: fall back to the first pane of the right tree instead of dropping
+  // the tab.
+  if (!allLeaves(state[treeOf(state, targetId)]).some(leaf => leaf.id === targetId)) {
    targetId = firstLeaf(state.splits).id
  }
+  const targetKey = treeOf(state, targetId)
  // Id-based safety net: if a tab with the same id exists, focus it.
-  for (const leaf of allLeaves(state.splits)) {
+  for (const leaf of allLeaves(state.splits).concat(allLeaves(state.bottomSplits))) {
    const existing = leaf.tabs.find(candidate => candidate.id === tab.id)
    if (existing !== undefined) return activateTab(state, leaf.id, existing.id)
  }
  return {
    ...state,
    activePane: targetId,
-    splits: mapLeaf(state.splits, targetId, (leaf) => {
+    [targetKey]: mapLeaf(state[targetKey], targetId, (leaf) => {
      leaf.tabs = [...leaf.tabs, tab]
      leaf.active = tab.id
    }),
  }
 }

-/** Move a tab from one pane to another (insert at index; -1 appends). */
+/** Move a tab from one pane to another (insert at index; -1 appends).
+ *  The panes may live in DIFFERENT trees — dragging a tab between the two
+ *  panels removes it from its own tree and lands it in the other one. */
 export function moveTab(state: SidebarState, fromPane: string, tabId: string, toPane: string, index = -1): SidebarState {
+  const fromKey = treeOf(state, fromPane)
+  const toKey = treeOf(state, toPane)
+  if (fromKey !== toKey) {
+    let moved: SidebarTab | undefined
+    let emptied = false
+    const source = mapLeaf(state[fromKey], fromPane, (leaf) => {
+      const found = leaf.tabs.find(tab => tab.id === tabId)
+      if (found === undefined) return
+      moved = found
+      leaf.tabs = leaf.tabs.filter(tab => tab.id !== tabId)
+      if (leaf.active === tabId) leaf.active = leaf.tabs[leaf.tabs.length - 1]?.id ?? null
+      if (leaf.tabs.length === 0) emptied = true
+    })
+    if (moved === undefined) return state
+    const target = mapLeaf(state[toKey], toPane, (leaf) => {
+      const insertAt = index >= 0 && index <= leaf.tabs.length ? index : leaf.tabs.length
+      leaf.tabs = [...leaf.tabs.slice(0, insertAt), moved!, ...leaf.tabs.slice(insertAt)]
+      leaf.active = moved!.id
+    })
+    return {
+      ...state,
+      [fromKey]: emptied ? removeLeafAt(source, fromPane) : source,
+      [toKey]: target,
+      activePane: toPane,
+    }
+  }
  let moved: SidebarTab | undefined
  let emptied = false
-  let splits = mapLeaf(state.splits, fromPane, (leaf) => {
+  let splits = mapLeaf(state[fromKey], fromPane, (leaf) => {
    const found = leaf.tabs.find(tab => tab.id === tabId)
    if (found === undefined) return
    moved = found
@@ -391,13 +547,14 @@ export function moveTab(state: SidebarState, fromPane: string, tabId: string, to
    leaf.tabs = [...leaf.tabs.slice(0, insertAt), moved!, ...leaf.tabs.slice(insertAt)]
    leaf.active = moved!.id
  })
-  return { ...state, splits, activePane: toPane }
+  return { ...state, [fromKey]: splits, activePane: toPane }
 }

 /** Split the active pane (or the pane containing the active tab). */
 export function splitPane(state: SidebarState, dir: 'row' | 'col'): SidebarState {
  const paneId = state.activePane ?? firstLeaf(state.splits).id
-  return { ...state, splits: splitLeafAt(state.splits, paneId, dir) }
+  const key = treeOf(state, paneId)
+  return { ...state, [key]: splitLeafAt(state[key], paneId, dir) }
 }

 /**
@@ -443,6 +600,11 @@ export function togglePanel(state: SidebarState): SidebarState {
  return { ...state, panelOpen: !state.panelOpen }
 }

+/** Toggle the bottom panel open/closed (independent of the right panel). */
+export function toggleBottomPanel(state: SidebarState): SidebarState {
+  return { ...state, bottomOpen: !state.bottomOpen }
+}
+
 /** Set the panel width (clamped to the contract range; the upper bound is
 * the viewport so the fullscreen expansion can fill the window). */
 export function setWidth(state: SidebarState, width: number): SidebarState {
@@ -450,6 +612,16 @@ export function setWidth(state: SidebarState, width: number): SidebarState {
  return { ...state, width: Math.min(max, Math.max(PANEL_MIN, Math.round(width))) }
 }

+/** Set the bottom panel height (clamped to the contract range). The upper
+ * bound leaves the center column (the agent output area) at least PANEL_MIN
+ * tall — without the cap the bottom panel could swallow the whole viewport
+ * and squeeze the conversation to zero height. */
+export function setBottomHeight(state: SidebarState, height: number): SidebarState {
+  const viewport = typeof window !== 'undefined' ? window.innerHeight : Infinity
+  const max = Math.max(BOTTOM_MIN, viewport - PANEL_MIN)
+  return { ...state, bottomHeight: Math.min(max, Math.max(BOTTOM_MIN, Math.round(height))) }
+}
+
 /** Toggle a directory in the explorer expansion set. */
 export function toggleExpanded(state: SidebarState, path: string): SidebarState {
  const expanded = state.expanded.includes(path)
@@ -476,6 +648,13 @@ export function resizeSplit(node: SplitNode, splitId: string, index: number, del
  }
 }

+/** State-level {@link resizeSplit} route: the divider may live in either
+ *  tree (split ids are globally unique). */
+export function resizeSplitIn(state: SidebarState, splitId: string, index: number, delta: number): SidebarState {
+  const key = treeOf(state, splitId)
+  return { ...state, [key]: resizeSplit(state[key], splitId, index, delta) }
+}
+
 /** Prefix marking a tab id as an agent-owned terminal (suffix is the uuid). */
 export const AGENT_TAB_PREFIX = 'agent:'

@@ -510,7 +689,7 @@ export function reconcileAgentTerminals(
  state: SidebarState,
  agentTerminals: ReadonlyArray<{ uuid: string; title: string }>,
 ): SidebarState {
-  const existingTabs = allLeaves(state.splits).flatMap(leaf => leaf.tabs)
+  const existingTabs = allLeaves(state.splits).concat(allLeaves(state.bottomSplits)).flatMap(leaf => leaf.tabs)
  const existingAgentTabs = existingTabs.filter(tab => isAgentTabId(tab.id))
  const existingUuids = new Set(existingAgentTabs.map(tab => agentUuidOf(tab.id)))
  const serverUuids = new Set(agentTerminals.map(t => t.uuid))
@@ -581,12 +760,18 @@ function loadState(sessionId: string, prefs: SidebarPrefs): SidebarState {
  // chosen percent of the window (clamped to the panel floor and the
  // viewport so a huge percent can never crush the app shell), the panel
  // starts open only when the preference says so, and the default explorer
-  // tab is skipped when the user disabled the explorer tab type.
+  // tab is skipped when the user disabled the explorer tab type. On a
+  // NARROW viewport a brand-new session starts collapsed instead — the
+  // panel is a full-screen drawer there, and auto-opening it on first
+  // paint would cover the conversation before the user asked. Only the
+  // first seeding is affected: once the user expands the drawer,
+  // `panelOpen: true` persists like any other state.
  const viewport = typeof window !== 'undefined' ? window.innerWidth : undefined
  const width = viewport === undefined
    ? PANEL_DEFAULT
    : defaultWidthFor(viewport, prefs.defaultWidthPercent)
-  return makeDefaultState(width, prefs.openByDefault, prefs.tabsEnabled['explorer'] !== false)
+  const openByDefault = prefs.openByDefault && (viewport === undefined || !isNarrowWidth(viewport))
+  return makeDefaultState(width, openByDefault, prefs.tabsEnabled['explorer'] !== false)
 }

 /**
@@ -613,9 +798,29 @@ export function sanitizeState(parsed: unknown): SidebarState | undefined {
    : 1
  if (typeof record.activePane !== 'string' && record.activePane !== null) return undefined
  if (!Array.isArray(record.expanded) || record.expanded.some(item => typeof item !== 'string')) return undefined
+  // The seen/reid maps are SHARED across both trees: pane/split ids must be
+  // globally unique (the runtime uid counter is shared too), so a duplicate
+  // seen first in the right tree gets a fresh id when it reappears in the
+  // bottom tree.
+  const seen = new Set<string>()
  const reid = new Map<string, string>()
-  const splits = sanitizeNode(record.splits, new Set(), reid)
+  const splits = sanitizeNode(record.splits, seen, reid)
  if (splits === undefined) return undefined
+  // Bottom-panel fields arrived in a later build: a missing or malformed
+  // value on an OLDER persisted state defaults (closed / default height /
+  // empty pane) so existing layouts keep loading, like nextBrowser.
+  const bottomOpen = record.bottomOpen === true
+  // Cap the persisted height so the center column (the agent output area)
+  // keeps at least PANEL_MIN tall (a stale full-height bottom panel from an
+  // older build must never squeeze the conversation to zero).
+  const maxHeight = typeof window !== 'undefined' ? window.innerHeight : Infinity
+  const bottomCap = Math.max(BOTTOM_MIN, maxHeight - PANEL_MIN)
+  const rawHeight = typeof record.bottomHeight === 'number' && Number.isFinite(record.bottomHeight)
+    ? record.bottomHeight
+    : BOTTOM_DEFAULT
+  const bottomHeight = Math.min(bottomCap, Math.max(BOTTOM_MIN, Math.round(rawHeight)))
+  const bottomSplits = sanitizeNode(record.bottomSplits, seen, reid)
+    ?? { kind: 'leaf' as const, id: uid('pane'), tabs: [], active: null }
  const maxWidth = typeof window !== 'undefined' ? window.innerWidth : Infinity
  return {
    panelOpen: record.panelOpen,
@@ -627,6 +832,13 @@ export function sanitizeState(parsed: unknown): SidebarState | undefined {
    nextBrowser,
    expanded: record.expanded as string[],
    splits,
+    bottomOpen,
+    bottomHeight,
+    // An older persisted state never expanded the bottom panel (the field
+    // arrived later): defaulting to false gives it the first-expansion
+    // auto-terminal exactly once after the upgrade.
+    bottomOpenedOnce: record.bottomOpenedOnce === true,
+    bottomSplits,
  }
 }

@@ -0,0 +1,116 @@
+/**
+ * The .xlsx preview component: renders via the Univer sheets preset (data +
+ * formulas + formatting). Lives in its own module (split out of the former
+ * office-view.tsx) so it builds as a standalone lazy chunk
+ * (`lib/client-xlsx.js`) — the Univer family and SheetJS pull in several MB
+ * but are loaded only when a .xlsx is first opened. The docx stack never
+ * shares this script.
+ *
+ * Errors degrade to the shared download-button affordance, so a corrupted /
+ * encrypted / oversized file always leaves the user with a way to get it.
+ */
+import { useEffect, useRef, useState } from 'react'
+import { mediaUrl } from './api.ts'
+import { 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'
+// Univer's stylesheets ride the same dsh-css-inline pipeline as xterm's CSS
+// (one <style data-plugin-css> tag, idempotent). Static import so the styles
+// are present before the first .xlsx opens.
+import '@univerjs/preset-sheets-core/lib/index.css'
+
+/**
+ * Render a .xlsx file via Univer. The sheets preset creates a canvas-based
+ * spreadsheet (formula bar, sheet tabs, formula engine) sized to its
+ * container, so the host fills the pane. Unmounting calls `univer.dispose()`
+ * — without it the canvas, workers, and DOM listeners leak (mirrors the
+ * xterm dispose discipline in TerminalView).
+ */
+export function XlsxView(props: OfficeViewProps): JSX.Element {
+  const { scope, path, title } = props
+  const hostRef = useRef<HTMLDivElement>(null)
+  const univerRef = useRef<{ dispose: () => void } | null>(null)
+  const [load, setLoad] = useState<LoadState>({ status: 'loading' })
+
+  useEffect(() => {
+    let cancelled = false
+    const host = hostRef.current
+    if (host === null) return
+    void (async () => {
+      try {
+        const response = await fetch(mediaUrl(scope, path))
+        if (cancelled) return
+        if (!response.ok) {
+          throw new Error(`HTTP ${response.status}`)
+        }
+        const buf = await response.arrayBuffer()
+        if (cancelled) return
+
+        // Dynamic imports — collapsed into the chunk by codeSplitting:false.
+        // The dynamic form keeps the source readable: each lib is only pulled
+        // in when an .xlsx is actually opened (semantically; the chunk still
+        // contains all of them — the chunk itself only loads on first .xlsx).
+        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
+          ? 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 workbookData = xlsxWorkbookToUniver(wb, '0.25.1', locale)
+
+        if (cancelled) return
+        const { univer, univerAPI } = createUniver({
+          locale,
+          locales: localePack !== null ? { [locale]: mergeLocales(localePack) } : {},
+          presets: [UniverSheetsCorePreset({ container: host })],
+        })
+        univerRef.current = univer
+        univerAPI.createWorkbook(workbookData)
+        if (!cancelled) setLoad({ status: 'ready' })
+      } catch (error) {
+        if (!cancelled) {
+          try {
+            univerRef.current?.dispose()
+          } catch {
+            // Partially initialized instance — ignore disposal errors.
+          }
+          univerRef.current = null
+          host.innerHTML = ''
+          setLoad({ status: 'error', message: error instanceof Error ? error.message : String(error) })
+        }
+      }
+    })()
+    return () => {
+      cancelled = true
+      // Critical: dispose the Univer instance (canvas + workers + listeners).
+      try {
+        univerRef.current?.dispose()
+      } catch {
+        // Already torn down — ignore.
+      }
+      univerRef.current = null
+      // Clear the host in case dispose left DOM behind.
+      if (host !== null) host.innerHTML = ''
+    }
+  }, [scope.sessionId, scope.cwd, path])
+
+  return (
+    <div className={css.editorXlsx} aria-label={title}>
+      {/* Univer exclusively owns this element's descendants. React only owns
+          the sibling overlay, so Univer cannot remove a React child. */}
+      <div className={css.editorUniverHost} ref={hostRef} />
+      {load.status !== 'ready' && (
+        <div className={css.editorOfficeOverlay}>
+          {load.status === 'loading' && <div className={css.editorPlaceholder}>{t('loading')}</div>}
+          {load.status === 'error' && <BinaryFallback scope={scope} path={path} message={load.message} />}
+        </div>
+      )}
+    </div>
+  )
+}
@@ -80,6 +80,7 @@ export const PrefsSchema: z<SidebarPrefs> = z.object({
  defaultWidthPercent: z.number().step(1).min(WIDTH_PERCENT_MIN).max(WIDTH_PERCENT_MAX).default(WIDTH_PERCENT_DEFAULT),
  autoOpenSubagent: z.boolean().default(true),
  agentTerminalTools: z.boolean().default(false),
+  bottomPanelAutoTerminal: z.boolean().default(true),
  interceptOpenPath: z.boolean().default(true),
  htmlViewerNoSandbox: z.boolean().default(false),
  htmlViewerDefaultUnsafe: z.boolean().default(false),
@@ -1,11 +1,12 @@
 /**
 * dsh-better-sidebar host half: the /sidebar JSON API (explorer listing, file
- * read/write, git), the /sidebar/file media route (images), and the terminal
- * WebSocket upgrade. Every route passes the same browser-trust fence as the
- * /api gateway — Host-header loopback or the connection row's `trustedHosts`
- * (the `dsh web` launcher derives LAN IP literals per boot) — with the
- * trustedHosts read live from the connection loader row so the fence never
- * drifts from the deployment's.
+ * read/write, git), the /sidebar/file media route (images), the /sidebar/html
+ * preview route, the /sidebar/bundle lazy-chunk route (client code splits),
+ * and the terminal WebSocket upgrade. Every route passes the same
+ * browser-trust fence as the /api gateway — Host-header loopback or the
+ * connection row's `trustedHosts` (the `dsh web` launcher derives LAN IP
+ * literals per boot) — with the trustedHosts read live from the connection
+ * loader row so the fence never drifts from the deployment's.
 *
 * All operations are conversation-scoped: requests carry a sessionId, the
 * session's authoritative cwd comes from the session store, and terminal
@@ -29,6 +30,7 @@ import { isWithin, parentOf, requireAbsolute, listDirectory, rootLabel } from '.
 import { decodeHtmlUrl } from './html-route.ts'
 import { extractFrameAncestors } from './browser-probe.ts'
 import { isTrustedApiRequest, isLoopbackHostname } from './trust-fence.ts'
+import { registerBundleRoute } from './bundle-route.ts'
 import * as git from './git.ts'
 import { SettingsConflictError, settingsNamespace, type SettingsNamespace } from '@deepseek-ai/dsh-settings'
 import { defaultShell, ensureSpawnHelper, PtyManager } from './pty-manager.ts'
@@ -517,6 +519,12 @@ export function apply(ctx: Context, config?: SidebarConfig): void {
    },
  }), 'dsh-better-sidebar: /sidebar/api routes')

+  // ── Lazy chunk route (client bundle splits) ─────────────────────────────
+  // Serves the client half's split bundles (lib/client-<name>.js) so the
+  // heavy preview/terminal libraries load on first use, not at page start
+  // (see bundle-route.ts / src/client/chunk-loader.ts).
+  ctx.effect(() => registerBundleRoute(ctx, fence), 'dsh-better-sidebar: /sidebar/bundle chunk route')
+
  // ── Media route (images for the editor) ─────────────────────────────────
  ctx.effect(() => ctx.httpServer.register({
    kind: 'prefix',
@@ -27,6 +27,13 @@ export interface SidebarPrefs {
   * user explicitly enables it in the side card settings.
   */
  agentTerminalTools: boolean
+  /**
+   * Whether expanding the bottom panel for the FIRST time in a session tries
+   * to open a fresh terminal tab there (the terminal quota/type still gates
+   * the attempt). On by default; the switch lives under the terminal tab's
+   * row in the Side card settings.
+   */
+  bottomPanelAutoTerminal: boolean
  /**
   * Whether chat-side file opens (tool-row path links, the produced-files
   * row, prose file mentions — every path that funnels through the client
@@ -97,6 +104,7 @@ export const SIDEBAR_PREFS_DEFAULTS: SidebarPrefs = {
  defaultWidthPercent: WIDTH_PERCENT_DEFAULT,
  autoOpenSubagent: true,
  agentTerminalTools: false,
+  bottomPanelAutoTerminal: true,
  interceptOpenPath: true,
  htmlViewerNoSandbox: false,
  htmlViewerDefaultUnsafe: false,
@@ -0,0 +1,26 @@
+/**
+ * Narrow-viewport breakpoint tests: the boundary the mobile sidebar layout
+ * keys off (paired with the CSS @media (max-width: 767px) gates in
+ * sidebar.module.css — 767px ≡ widths strictly below NARROW_MAX_WIDTH).
+ * Deliberately NOT aligned to the DSH app shell's 1024px breakpoint: the
+ * mobile layout is for real narrow screens (phones / portrait tablets).
+ */
+import { describe, expect, it } from 'vitest'
+import { isNarrowWidth, NARROW_MAX_WIDTH } from '../src/client/breakpoints.ts'
+
+describe('narrow-viewport breakpoint', () => {
+  it('treats widths below NARROW_MAX_WIDTH as narrow (mobile)', () => {
+    expect(NARROW_MAX_WIDTH).toBe(768)
+    expect(isNarrowWidth(320)).toBe(true)
+    expect(isNarrowWidth(390)).toBe(true)
+    expect(isNarrowWidth(600)).toBe(true)
+    expect(isNarrowWidth(767)).toBe(true)
+  })
+
+  it('treats NARROW_MAX_WIDTH and above as wide (desktop)', () => {
+    expect(isNarrowWidth(768)).toBe(false)
+    expect(isNarrowWidth(1024)).toBe(false)
+    expect(isNarrowWidth(1280)).toBe(false)
+    expect(isNarrowWidth(1920)).toBe(false)
+  })
+})
@@ -12,6 +12,8 @@ if (g.self === undefined) g.self = globalThis

 const elementStub = (): Record<string, unknown> => ({
  style: {},
+  dataset: {},
+  textContent: '',
  classList: { add: () => {}, remove: () => {}, contains: () => false },
  setAttribute: () => {},
  getAttribute: () => null,
@@ -32,9 +34,12 @@ if (g.document === undefined) {
    removeEventListener: () => {},
    defaultView: globalThis,
    body: elementStub(),
-    // CodeMirror's view module probes the UA and injects styles at load.
+    // CodeMirror's view module probes the UA and injects styles at load;
+    // the plugin's css-inline prologue probes for existing style tags.
    documentElement: elementStub(),
    head: elementStub(),
+    querySelector: () => null,
+    querySelectorAll: () => [],
    styleSheets: [],
  }
 }
@@ -48,6 +53,7 @@ if (g.window === undefined) {
    clearTimeout: () => {},
    setTimeout: (_fn: () => void) => 0,
    innerWidth: 1024,
+    innerHeight: 768,
    getComputedStyle: () => ({ getPropertyValue: () => '' }),
  }
 }
@@ -50,7 +50,7 @@ describe('built-in tab registrations', () => {
  it('the terminal tab declares the model terminal-tools related setting', () => {
    const { service } = setup()
    const toggles = service.getTab('terminal')?.settings?.toggles ?? []
-    expect(toggles.map(t => t.key)).toEqual(['agentTerminalTools'])
+    expect(toggles.map(t => t.key)).toEqual(['agentTerminalTools', 'bottomPanelAutoTerminal'])
  })

  it('the browser tab declares its sandbox and link-takeover related settings', () => {
@@ -0,0 +1,148 @@
+/**
+ * Lazy chunk route tests (src/bundle-route.ts): the /sidebar/bundle handler
+ * that serves the client's split bundles. Pins the trust fence, the name
+ * allowlist (no traversal), method gating, and the caching contract — ETag
+ * + If-None-Match 304 so multi-MB chunks revalidate cheaply instead of
+ * re-downloading.
+ */
+import { describe, expect, it } from 'vitest'
+import { mkdtempSync, rmSync, writeFileSync } from 'node:fs'
+import { tmpdir } from 'node:os'
+import { join } from 'node:path'
+import type { IncomingMessage, ServerResponse } from 'node:http'
+import { CHUNK_NAMES, createBundleRouteHandler } from '../src/bundle-route.ts'
+
+interface FakeRes {
+  status: number
+  headers: Record<string, string>
+  body: string
+  writeHead(status: number, headers?: Record<string, string>): void
+  end(body?: string | Buffer): void
+}
+
+function fakeRes(): FakeRes {
+  return {
+    status: 0,
+    headers: {},
+    body: '',
+    writeHead(status, headers = {}) {
+      this.status = status
+      this.headers = headers
+    },
+    end(body) {
+      if (body !== undefined) this.body = body.toString()
+    },
+  } as FakeRes
+}
+
+function req(method: string, url: string, headers: Record<string, string> = {}): IncomingMessage {
+  return { method, url, headers } as unknown as IncomingMessage
+}
+
+/** One handler instance over a scratch dir with a fake chunk file. */
+function setup(): { handler: (req: IncomingMessage, res: ServerResponse) => Promise<void>; dir: string; cleanup: () => void } {
+  const dir = mkdtempSync(join(tmpdir(), 'bundle-route-'))
+  writeFileSync(join(dir, 'client-xlsx.js'), 'window.__ModuleLoader__ && 0;')
+  const handler = createBundleRouteHandler(() => true, dir)
+  return { handler, dir, cleanup: () => { rmSync(dir, { recursive: true, force: true }) } }
+}
+
+describe('/sidebar/bundle route', () => {
+  it('serves an allowlisted chunk with the JS content type and an ETag', async () => {
+    const { handler, cleanup } = setup()
+    try {
+      const res = fakeRes()
+      await handler(req('GET', '/sidebar/bundle/xlsx.js'), res as unknown as ServerResponse)
+      expect(res.status).toBe(200)
+      expect(res.headers['content-type']).toBe('text/javascript; charset=utf-8')
+      expect(res.headers['cache-control']).toBe('no-cache')
+      expect(res.headers.etag).toMatch(/^"[0-9a-f]{12}"$/)
+      expect(res.body).toContain('window.__ModuleLoader__')
+    } finally {
+      cleanup()
+    }
+  })
+
+  it('revalidates with a 304 when If-None-Match matches (no re-download)', async () => {
+    const { handler, cleanup } = setup()
+    try {
+      const first = fakeRes()
+      await handler(req('GET', '/sidebar/bundle/xlsx.js'), first as unknown as ServerResponse)
+      const etag = first.headers.etag!
+      const second = fakeRes()
+      await handler(req('GET', '/sidebar/bundle/xlsx.js', { 'if-none-match': etag }), second as unknown as ServerResponse)
+      expect(second.status).toBe(304)
+      expect(second.body).toBe('')
+      expect(second.headers.etag).toBe(etag)
+    } finally {
+      cleanup()
+    }
+  })
+
+  it('serves the new body after the file changed (ETag rotates)', async () => {
+    const { handler, dir, cleanup } = setup()
+    try {
+      const first = fakeRes()
+      await handler(req('GET', '/sidebar/bundle/xlsx.js'), first as unknown as ServerResponse)
+      writeFileSync(join(dir, 'client-xlsx.js'), 'window.__ModuleLoader__ && 1;')
+      const second = fakeRes()
+      await handler(req('GET', '/sidebar/bundle/xlsx.js', { 'if-none-match': first.headers.etag! }), second as unknown as ServerResponse)
+      expect(second.status).toBe(200)
+      expect(second.headers.etag).not.toBe(first.headers.etag)
+      expect(second.body).toContain('&& 1')
+    } finally {
+      cleanup()
+    }
+  })
+
+  it('rejects unknown chunk names (including traversal attempts) with 404', async () => {
+    const { handler, cleanup } = setup()
+    try {
+      for (const url of ['/sidebar/bundle/evil.js', '/sidebar/bundle/xlsx', '/sidebar/bundle/../secret.js', '/sidebar/bundle/xlsx.js/extra']) {
+        const res = fakeRes()
+        await handler(req('GET', url), res as unknown as ServerResponse)
+        expect(res.status, url).toBe(404)
+      }
+    } finally {
+      cleanup()
+    }
+  })
+
+  it('404s an allowlisted name whose built file is missing', async () => {
+    const { handler, cleanup } = setup()
+    try {
+      const res = fakeRes()
+      await handler(req('GET', '/sidebar/bundle/editor.js'), res as unknown as ServerResponse)
+      expect(res.status).toBe(404)
+    } finally {
+      cleanup()
+    }
+  })
+
+  it('gates non-GET/HEAD methods with 405', async () => {
+    const { handler, cleanup } = setup()
+    try {
+      const res = fakeRes()
+      await handler(req('POST', '/sidebar/bundle/xlsx.js'), res as unknown as ServerResponse)
+      expect(res.status).toBe(405)
+    } finally {
+      cleanup()
+    }
+  })
+
+  it('enforces the browser-trust fence with 403 before any lookup', async () => {
+    const dir = mkdtempSync(join(tmpdir(), 'bundle-route-fence-'))
+    try {
+      const handler = createBundleRouteHandler(() => false, dir)
+      const res = fakeRes()
+      await handler(req('GET', '/sidebar/bundle/xlsx.js'), res as unknown as ServerResponse)
+      expect(res.status).toBe(403)
+    } finally {
+      rmSync(dir, { recursive: true, force: true })
+    }
+  })
+
+  it('exports the chunk allowlist (mirror of src/client/chunk-loader.ts)', () => {
+    expect([...CHUNK_NAMES]).toEqual(['docx', 'xlsx', 'pptx', 'terminal', 'editor'])
+  })
+})
@@ -0,0 +1,43 @@
+/**
+ * Built chunk artifact contract: each lib/client-<name>.js must, when
+ * executed as a classic script, assign its factory to the plugin-owned
+ * global registry (globalThis.__dshChunks__[<name>]), and the factory must
+ * be callable with a require that resolves the platform externals — the
+ * exact shape the loader (src/client/chunk-loader.ts) depends on. Reads the
+ * built lib/ output, so run `pnpm build` first (like manifest-consistency).
+ */
+import { readFileSync } from 'node:fs'
+import { describe, expect, it } from 'vitest'
+// Browser globals first: chunk bodies probe `self`/`document` at evaluation
+// (xterm's UMD wrapper, CodeMirror's UA probe).
+import './browser-globals.ts'
+import { CHUNK_EXTERNALS } from '../src/client/chunk-loader.ts'
+
+const g = globalThis as Record<string, unknown>
+
+const CHUNKS = ['docx', 'xlsx', 'pptx', 'terminal', 'editor']
+
+describe('built chunk artifacts', () => {
+  it('each chunk assigns its global registry slot when executed as a script', () => {
+    g.window = g // classic-script globals
+    for (const name of CHUNKS) {
+      const code = readFileSync(`lib/client-${name}.js`, 'utf8')
+      // eslint-disable-next-line no-new-func
+      expect(() => new Function(code)(), name).not.toThrow()
+      const registry = g.__dshChunks__ as Record<string, unknown>
+      expect(typeof registry[name], name).toBe('function')
+    }
+  })
+
+  it('each chunk factory materializes through a require over the platform externals', () => {
+    const registry = g.__dshChunks__ as Record<string, unknown>
+    const table = new Map<string, unknown>(CHUNK_EXTERNALS.map(spec => [spec, { spec }]))
+    for (const name of CHUNKS) {
+      const factory = registry[name] as (require: (spec: string) => unknown) => Record<string, unknown>
+      expect(() => factory((spec) => {
+        if (!table.has(spec)) throw new Error(`require("${spec}") missed the module table`)
+        return table.get(spec)
+      }), name).not.toThrow()
+    }
+  })
+})
@@ -0,0 +1,210 @@
+/**
+ * Chunk loader tests: the lazy chunk machinery (src/client/chunk-loader.ts).
+ * Pins the caching contract that makes the lazy mechanism correct:
+ * - one in-flight promise per chunk (concurrent opens share it),
+ * - a failed load clears the cache so the next call retries (the script
+ *   re-executes and overwrites its global registry slot — assignments are
+ *   idempotent, no duplicate-registration class of errors),
+ * - externals resolve through the module system's seed branch (the stable,
+ *   version-independent part), once per page,
+ * - resetChunks drops the cache and the externals memo (HMR).
+ * The production path runs against a fake `window.__DSH_MODULES__` and a
+ * stub script loader that simulates the executed chunk script by assigning
+ * the plugin-owned global factory registry.
+ */
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import './browser-globals.ts'
+import {
+  CHUNK_EXTERNALS,
+  loadChunk,
+  registerChunkForTests,
+  resetChunks,
+  setChunkScriptLoaderForTests,
+} from '../src/client/chunk-loader.ts'
+import type { ChunkExports } from '../src/client/chunk-loader.ts'
+
+interface FakeModuleSystem {
+  import: ReturnType<typeof vi.fn>
+}
+
+function installModuleSystem(): FakeModuleSystem {
+  const fake: FakeModuleSystem = {
+    import: vi.fn(async (specifier: string) => ({ seed: specifier })),
+  }
+  ;(globalThis as Record<string, unknown>).__DSH_MODULES__ = fake
+  return fake
+}
+
+function removeModuleSystem(): void {
+  delete (globalThis as Record<string, unknown>).__DSH_MODULES__
+}
+
+/** The global registry the chunk scripts populate (mirror of chunk-loader). */
+function registry(): Record<string, unknown> {
+  return (globalThis as { __dshChunks__?: Record<string, unknown> }).__dshChunks__ ?? {}
+}
+
+/** Simulate a chunk script executing: it assigns its factory to the registry. */
+function simulateScript(name: string, factory: (require: (spec: string) => unknown) => ChunkExports): void {
+  const g = globalThis as { __dshChunks__?: Record<string, unknown> }
+  g.__dshChunks__ = g.__dshChunks__ ?? {}
+  g.__dshChunks__[name] = factory
+}
+
+beforeEach(() => {
+  removeModuleSystem()
+  delete (globalThis as Record<string, unknown>).__dshChunks__
+  resetChunks()
+  setChunkScriptLoaderForTests(null)
+})
+
+describe('test-registry path (vitest / jsdom-less environments)', () => {
+  it('returns the registered chunk exports, loading once even for concurrent callers', async () => {
+    let calls = 0
+    registerChunkForTests('docx', async () => {
+      calls += 1
+      return { DocxView: 'docx-view' }
+    })
+    const [a, b, c] = await Promise.all([loadChunk('docx'), loadChunk('docx'), loadChunk('docx')])
+    expect(a).toEqual({ DocxView: 'docx-view' })
+    expect(b).toBe(a)
+    expect(c).toBe(a)
+    expect(calls).toBe(1)
+    // Memoized after resolution too.
+    expect(await loadChunk('docx')).toBe(a)
+    expect(calls).toBe(1)
+  })
+
+  it('a failed load clears the cache so the next call retries', async () => {
+    let calls = 0
+    registerChunkForTests('pptx', async () => {
+      calls += 1
+      if (calls === 1) throw new Error('boom')
+      return { PptxView: 'pptx-view' }
+    })
+    await expect(loadChunk('pptx')).rejects.toThrow('boom')
+    await expect(loadChunk('pptx')).resolves.toEqual({ PptxView: 'pptx-view' })
+    expect(calls).toBe(2)
+  })
+})
+
+describe('production path (script injection + global registry + externals require)', () => {
+  it('injects the chunk script, then materializes the factory with externals from the module table', async () => {
+    const modules = installModuleSystem()
+    const loaded: string[] = []
+    setChunkScriptLoaderForTests(async (src) => {
+      loaded.push(src)
+      simulateScript('xlsx', (require) => ({ XlsxView: `view:${String(require('react'))}` }))
+    })
+    const exports = await loadChunk('xlsx')
+    expect(loaded).toEqual(['/sidebar/bundle/xlsx.js'])
+    expect(exports).toEqual({ XlsxView: 'view:[object Object]' })
+    // Externals resolved through the module system's seed branch, once.
+    expect(modules.import).toHaveBeenCalledTimes(CHUNK_EXTERNALS.length)
+    // Memoized: no second script injection, no second externals resolution.
+    await loadChunk('xlsx')
+    expect(loaded).toHaveLength(1)
+    expect(modules.import).toHaveBeenCalledTimes(CHUNK_EXTERNALS.length)
+  })
+
+  it('resolves the externals table once across chunks', async () => {
+    const modules = installModuleSystem()
+    const seen: string[] = []
+    setChunkScriptLoaderForTests(async (src) => {
+      seen.push(src)
+      simulateScript(src.endsWith('editor.js') ? 'editor' : 'terminal', () => ({}))
+    })
+    await loadChunk('terminal')
+    await loadChunk('editor')
+    expect(seen).toEqual(['/sidebar/bundle/terminal.js', '/sidebar/bundle/editor.js'])
+    expect(modules.import).toHaveBeenCalledTimes(CHUNK_EXTERNALS.length)
+  })
+
+  it('a chunk requiring an unresolvable externals spec fails loudly', async () => {
+    installModuleSystem()
+    setChunkScriptLoaderForTests(async () => {
+      simulateScript('docx', (require) => { require('not-in-the-table'); return {} })
+    })
+    await expect(loadChunk('docx')).rejects.toThrow('missed the module table')
+  })
+
+  it('a script load failure rejects without materializing', async () => {
+    const modules = installModuleSystem()
+    setChunkScriptLoaderForTests(async () => { throw new Error('script 404') })
+    await expect(loadChunk('terminal')).rejects.toThrow('script 404')
+    expect(modules.import).not.toHaveBeenCalled()
+    // Cache cleared: the retry re-attempts the script load.
+    setChunkScriptLoaderForTests(async () => { simulateScript('terminal', () => ({ TerminalView: 'ok' })) })
+    await expect(loadChunk('terminal')).resolves.toEqual({ TerminalView: 'ok' })
+  })
+
+  it('a script that ran but registered no factory fails with a clear error', async () => {
+    installModuleSystem()
+    setChunkScriptLoaderForTests(async () => { /* executes but assigns nothing */ })
+    await expect(loadChunk('editor')).rejects.toThrow('did not register its factory')
+  })
+
+  it('a materialization failure clears the cache; the retry re-executes cleanly (idempotent slot assignment)', async () => {
+    const modules = installModuleSystem()
+    let calls = 0
+    setChunkScriptLoaderForTests(async () => {
+      calls += 1
+      simulateScript('pptx', () => {
+        if (calls === 1) throw new Error('materialize boom')
+        return { PptxView: 'pptx-view' }
+      })
+    })
+    await expect(loadChunk('pptx')).rejects.toThrow('materialize boom')
+    // Retry: script re-injected, slot overwritten, materialization succeeds.
+    await expect(loadChunk('pptx')).resolves.toEqual({ PptxView: 'pptx-view' })
+    expect(calls).toBe(2)
+    expect(modules.import).toHaveBeenCalled()
+  })
+
+  it('fails loudly when no module system is installed (before touching the network)', async () => {
+    const loaded: string[] = []
+    setChunkScriptLoaderForTests(async (src) => { loaded.push(src) })
+    await expect(loadChunk('docx')).rejects.toThrow('client module system unavailable')
+    expect(loaded).toEqual([])
+  })
+
+  it('resetChunks drops the cache and the externals memo (HMR re-activation)', async () => {
+    const modules = installModuleSystem()
+    let calls = 0
+    setChunkScriptLoaderForTests(async () => {
+      calls += 1
+      simulateScript('editor', () => ({ TextEditor: 'editor-view' }))
+    })
+    await loadChunk('editor')
+    expect(calls).toBe(1)
+    expect(modules.import).toHaveBeenCalledTimes(CHUNK_EXTERNALS.length)
+    resetChunks()
+    // Cache dropped: the next open re-fetches and re-executes; the externals
+    // memo is rebuilt (fresh module-table resolution).
+    await loadChunk('editor')
+    expect(calls).toBe(2)
+    expect(modules.import).toHaveBeenCalledTimes(CHUNK_EXTERNALS.length * 2)
+  })
+
+  it('resetChunks is a safe no-op without a module system', () => {
+    resetChunks()
+    expect(() => resetChunks()).not.toThrow()
+  })
+})
+
+describe('externals contract', () => {
+  it('the loader resolves exactly the platform externals the chunk builds keep external', () => {
+    expect(CHUNK_EXTERNALS).toEqual([
+      'react',
+      'react/jsx-runtime',
+      'react-dom',
+      'react-dom/client',
+      'cordis',
+      '@deepseek-ai/dsh-client-ui-slots',
+      '@deepseek-ai/dsh-client-web-react',
+      '@deepseek-ai/dsh-client-ui-primitives',
+      '@deepseek-ai/dsh-client-schema-form',
+      '@deepseek-ai/dsh-client-runtime/client',
+    ])
+  })
+})
@@ -0,0 +1,187 @@
+// @vitest-environment jsdom
+/**
+ * IME-composition guard tests.
+ *
+ * The guard registers document CAPTURE-phase keydown/keyup listeners that
+ * stopPropagation() while an input method is composing (isComposing or the
+ * legacy keyCode 229). These tests pin:
+ *
+ * 1. the pure decision (`isImeComposition`);
+ * 2. the native-listener path — a bubble listener on `document` and a
+ *    target-phase listener on the input must NOT see composition keys, but
+ *    must see every other key;
+ * 3. the React-synthetic path — a React `onKeyDown` handler (delegated at
+ *    the root container) must not fire for composition keys, proving the
+ *    document-capture listener wins the ordering race against React's
+ *    delegation (the mechanism that inlined third-party UI, e.g. Univer's
+ *    InputNumber, uses to hijack ArrowUp/ArrowDown);
+ * 4. the disposer restores normal flow (HMR-safe).
+ *
+ * Events are dispatched on a deep element (an `<input>` in `document.body`)
+ * exactly like the browser does, so capture-phase blocking behaves like in
+ * production — dispatching on `document` itself would run all listeners in
+ * the target phase where stopPropagation does not stop same-node listeners.
+ */
+import { afterEach, beforeEach, describe, expect, it } from 'vitest'
+import { createElement } from 'react'
+import { createRoot, type Root } from 'react-dom/client'
+import { act } from 'react-dom/test-utils'
+import { isImeComposition, registerImeGuard } from '../src/client/ime-guard.ts'
+
+/** Build a KeyboardEvent the way jsdom allows: keyCode/isComposing via defineProperty. */
+function keyEvent(
+  type: 'keydown' | 'keyup',
+  init: { key: string; isComposing?: boolean; keyCode?: number; bubbles?: boolean },
+): KeyboardEvent {
+  const event = new KeyboardEvent(type, { key: init.key, bubbles: init.bubbles ?? true, cancelable: true })
+  if (init.isComposing !== undefined) {
+    Object.defineProperty(event, 'isComposing', { value: init.isComposing })
+  }
+  if (init.keyCode !== undefined) {
+    Object.defineProperty(event, 'keyCode', { value: init.keyCode })
+  }
+  return event
+}
+
+describe('isImeComposition', () => {
+  it('treats isComposing as composition', () => {
+    expect(isImeComposition({ isComposing: true, keyCode: 0 })).toBe(true)
+  })
+
+  it('treats keyCode 229 as composition (legacy engines without isComposing)', () => {
+    expect(isImeComposition({ isComposing: false, keyCode: 229 })).toBe(true)
+  })
+
+  it('treats both signals together as composition', () => {
+    expect(isImeComposition({ isComposing: true, keyCode: 229 })).toBe(true)
+  })
+
+  it('lets ordinary keys through', () => {
+    expect(isImeComposition({ isComposing: false, keyCode: 40 })).toBe(false)
+    expect(isImeComposition({ isComposing: false, keyCode: 0 })).toBe(false)
+  })
+})
+
+describe('registerImeGuard — native listeners', () => {
+  let input: HTMLInputElement
+  let dispose: (() => void) | undefined
+  const seen: string[] = []
+
+  const onDocumentBubble = (event: Event): void => {
+    seen.push(`document:${event.type}`)
+  }
+  const onInputTarget = (event: Event): void => {
+    seen.push(`input:${event.type}`)
+  }
+
+  beforeEach(() => {
+    input = document.createElement('input')
+    document.body.appendChild(input)
+    seen.length = 0
+    document.addEventListener('keydown', onDocumentBubble)
+    document.addEventListener('keyup', onDocumentBubble)
+    input.addEventListener('keydown', onInputTarget)
+    input.addEventListener('keyup', onInputTarget)
+  })
+
+  afterEach(() => {
+    dispose?.()
+    dispose = undefined
+    document.removeEventListener('keydown', onDocumentBubble)
+    document.removeEventListener('keyup', onDocumentBubble)
+    input.removeEventListener('keydown', onInputTarget)
+    input.removeEventListener('keyup', onInputTarget)
+    input.remove()
+  })
+
+  it('lets ordinary keys reach document bubble and input target listeners', () => {
+    dispose = registerImeGuard()
+    input.dispatchEvent(keyEvent('keydown', { key: 'ArrowDown' }))
+    input.dispatchEvent(keyEvent('keyup', { key: 'ArrowDown' }))
+    expect(seen).toEqual(['input:keydown', 'document:keydown', 'input:keyup', 'document:keyup'])
+  })
+
+  it('blocks composition keys (isComposing) from every downstream listener', () => {
+    dispose = registerImeGuard()
+    input.dispatchEvent(keyEvent('keydown', { key: 'ArrowDown', isComposing: true }))
+    input.dispatchEvent(keyEvent('keyup', { key: 'ArrowDown', isComposing: true }))
+    expect(seen).toEqual([])
+  })
+
+  it('blocks composition keys signalled by keyCode 229 only', () => {
+    dispose = registerImeGuard()
+    input.dispatchEvent(keyEvent('keydown', { key: 'ArrowDown', keyCode: 229 }))
+    expect(seen).toEqual([])
+  })
+
+  it('still blocks after the composition signal is gone (guard is per-event)', () => {
+    dispose = registerImeGuard()
+    input.dispatchEvent(keyEvent('keydown', { key: 'ArrowDown', isComposing: true }))
+    input.dispatchEvent(keyEvent('keydown', { key: 'ArrowDown', isComposing: false }))
+    expect(seen).toEqual(['input:keydown', 'document:keydown'])
+  })
+
+  it('disposer restores normal flow', () => {
+    dispose = registerImeGuard()
+    input.dispatchEvent(keyEvent('keydown', { key: 'ArrowDown', isComposing: true }))
+    expect(seen).toEqual([])
+    dispose()
+    dispose = undefined
+    input.dispatchEvent(keyEvent('keydown', { key: 'ArrowDown', isComposing: true }))
+    expect(seen).toEqual(['input:keydown', 'document:keydown'])
+  })
+})
+
+describe('registerImeGuard — React synthetic path', () => {
+  let container: HTMLDivElement
+  let root: Root
+  let input: HTMLInputElement
+  let dispose: (() => void) | undefined
+  const seen: string[] = []
+
+  const onReactKeyDown = (): void => {
+    seen.push('react:keydown')
+  }
+
+  beforeEach(() => {
+    container = document.createElement('div')
+    document.body.appendChild(container)
+    root = createRoot(container)
+    act(() => {
+      root.render(createElement('input', { 'data-testid': 'ime-target', onKeyDown: onReactKeyDown }))
+    })
+    input = container.querySelector('input') as HTMLInputElement
+    seen.length = 0
+  })
+
+  afterEach(() => {
+    dispose?.()
+    dispose = undefined
+    act(() => { root.unmount() })
+    container.remove()
+  })
+
+  it('baseline: React onKeyDown receives composition keys when the guard is absent', () => {
+    input.dispatchEvent(keyEvent('keydown', { key: 'ArrowDown', isComposing: true }))
+    expect(seen).toEqual(['react:keydown'])
+  })
+
+  it('guard blocks React synthetic onKeyDown during composition (capture beats delegation)', () => {
+    dispose = registerImeGuard()
+    input.dispatchEvent(keyEvent('keydown', { key: 'ArrowDown', isComposing: true }))
+    expect(seen).toEqual([])
+    // Ordinary keys still flow through React after the guard is in place.
+    input.dispatchEvent(keyEvent('keydown', { key: 'ArrowDown', isComposing: false }))
+    expect(seen).toEqual(['react:keydown'])
+  })
+
+  it('disposer restores the React synthetic path', () => {
+    dispose = registerImeGuard()
+    input.dispatchEvent(keyEvent('keydown', { key: 'ArrowDown', isComposing: true }))
+    expect(seen).toEqual([])
+    dispose()
+    dispose = undefined
+    input.dispatchEvent(keyEvent('keydown', { key: 'ArrowDown', isComposing: true }))
+    expect(seen).toEqual(['react:keydown'])
+  })
+})
@@ -0,0 +1,194 @@
+/**
+ * Lazy wrapper tests (src/client/lazy-chunk.tsx): the wrapper that mounts
+ * chunk-resident components from the built-in descriptors. Pins the two
+ * contracts that matter for the descriptor API:
+ * - the wrapper is a plain render-prop function — `component(props)` can be
+ *   called directly (Sidebar's style) without a chunk registered and
+ *   without throwing; hooks live in the inner component only,
+ * - loading → placeholder, failure → error + retry that recovers, success →
+ *   the chunk component rendered.
+ */
+// @vitest-environment jsdom
+import { afterEach, beforeEach, describe, expect, it } from 'vitest'
+import { createElement, type ComponentType, type ReactNode } from 'react'
+import { createRoot, type Root } from 'react-dom/client'
+import { act } from 'react-dom/test-utils'
+import { builtinTabs } from '../src/client/builtins/tabs.tsx'
+import { builtinViewers } from '../src/client/builtins/viewers.tsx'
+import { registerChunkForTests, resetChunks } from '../src/client/chunk-loader.ts'
+import { lazyChunkComponent } from '../src/client/lazy-chunk.tsx'
+import type { Context } from '../src/context-types.ts'
+import type { FileViewerProps, TabComponentProps } from '../src/client/service.ts'
+import css from '../src/client/sidebar.module.css'
+
+/** 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() flushes the (concurrent) initial commit — the placeholder must be
+  // in the DOM before the async load flushes below.
+  act(() => { root.render(node) })
+  const unmount = (): void => {
+    act(() => { root.unmount() })
+    container.remove()
+  }
+  return { container, unmount }
+}
+
+const Marker = (): ReactNode => createElement('div', { 'data-testid': 'chunk-rendered' }, 'loaded')
+
+beforeEach(() => {
+  resetChunks()
+})
+
+afterEach(() => {
+  // Defensive: drop any containers left by failed assertions.
+  for (const el of document.querySelectorAll('body > div')) el.remove()
+})
+
+describe('lazyChunkComponent', () => {
+  it('renders the loading placeholder first, then the chunk component', async () => {
+    let calls = 0
+    registerChunkForTests('editor', async () => {
+      calls += 1
+      return { TextEditor: Marker }
+    })
+    const Wrapper = lazyChunkComponent<{ label: string }>('editor', (mod) => mod.TextEditor as ComponentType<{ label: string }> | undefined)
+    const { container, unmount } = mount(createElement(Wrapper, { label: 'x' }))
+    // Initial paint: the loading placeholder (no chunk loaded yet).
+    expect(container.querySelector(`.${css.editorPlaceholder}`)).not.toBeNull()
+    await act(async () => {})
+    expect(container.querySelector('[data-testid="chunk-rendered"]')).not.toBeNull()
+    expect(container.textContent).toContain('loaded')
+    expect(calls).toBe(1)
+    unmount()
+  })
+
+  it('shows the failure reason with a retry that recovers', async () => {
+    let fail = true
+    registerChunkForTests('docx', async () => {
+      if (fail) throw new Error('boom')
+      return { DocxView: Marker }
+    })
+    const Wrapper = lazyChunkComponent<Record<string, never>>('docx', (mod) => mod.DocxView as ComponentType<Record<string, never>> | undefined)
+    const { container, unmount } = mount(createElement(Wrapper, {}))
+    await act(async () => {})
+    expect(container.textContent).toContain('boom')
+    // The failed load cleared the loader cache; retry now succeeds.
+    fail = false
+    const button = container.querySelector('button')
+    expect(button).not.toBeNull()
+    await act(async () => { button!.click() })
+    await act(async () => {})
+    expect(container.querySelector('[data-testid="chunk-rendered"]')).not.toBeNull()
+    unmount()
+  })
+
+  it('props flow through to the chunk component', async () => {
+    const Recorder = (props: { label: string }): ReactNode => createElement('div', { 'data-testid': 'rec', 'data-label': props.label })
+    registerChunkForTests('pptx', async () => ({ PptxView: Recorder }))
+    const Wrapper = lazyChunkComponent<{ label: string }>('pptx', (mod) => mod.PptxView as ComponentType<{ label: string }> | undefined)
+    const { container, unmount } = mount(createElement(Wrapper, { label: 'hello' }))
+    await act(async () => {})
+    expect(container.querySelector('[data-testid="rec"]')?.getAttribute('data-label')).toBe('hello')
+    unmount()
+  })
+})
+
+describe('built-in descriptor contract (render-prop functions)', () => {
+  it('every heavy built-in viewer component is callable as a plain function without a chunk (returns an element)', () => {
+    const viewers = builtinViewers()
+    for (const id of ['docx', 'xlsx', 'pptx', 'markdown', 'html', 'code']) {
+      const descriptor = viewers.find(viewer => viewer.id === id)
+      expect(descriptor, id).toBeDefined()
+      // No chunk registered: calling must not throw — it returns the lazy
+      // element (the loading placeholder renders once mounted).
+      expect(() => descriptor!.component({} as FileViewerProps), id).not.toThrow()
+    }
+  })
+
+  it('the terminal tab component keeps the same contract', () => {
+    const tabs = builtinTabs({} as Context)
+    const terminal = tabs.find(tab => tab.id === 'terminal')
+    expect(terminal).toBeDefined()
+    // The descriptor reads tab.id (the tabId mapping); a real tab is part of
+    // the contract — Sidebar always provides one.
+    const props = { tab: { id: 'terminal:1', type: 'terminal', title: '终端 1' } } as unknown as TabComponentProps
+    expect(() => terminal!.component(props)).not.toThrow()
+  })
+
+  it('a built-in viewer mounted without a chunk available degrades to the error + retry affordance (no crash)', async () => {
+    // No test chunk registered and jsdom has no client module system: the
+    // load fails and the wrapper must degrade gracefully, never throw.
+    const viewers = builtinViewers()
+    const code = viewers.find(viewer => viewer.id === 'code')!
+    const { container, unmount } = mount(createElement(code.component, {} as FileViewerProps))
+    await act(async () => {})
+    expect(container.querySelector(`.${css.editorError}`)).not.toBeNull()
+    expect(container.querySelector('button')).not.toBeNull()
+    unmount()
+  })
+
+  it('a registered chunk makes the built-in viewer render through the real descriptor path', async () => {
+    registerChunkForTests('editor', async () => ({ TextEditor: Marker }))
+    const viewers = builtinViewers()
+    const markdown = viewers.find(viewer => viewer.id === 'markdown')!
+    // EditorHost renders viewer components via createElement(component, props).
+    const { container, unmount } = mount(createElement(markdown.component, {
+      ctx: {},
+      store: undefined,
+      scope: { sessionId: 's1', cwd: '/p' },
+      path: '/p/a.md',
+      title: 'a.md',
+      viewerId: 'markdown',
+    } as unknown as FileViewerProps))
+    await act(async () => {})
+    expect(container.querySelector('[data-testid="chunk-rendered"]')).not.toBeNull()
+    unmount()
+  })
+
+  it('the terminal descriptor maps tab.id → tabId (TerminalView props are not TabComponentProps)', async () => {
+    let received: unknown
+    registerChunkForTests('terminal', async () => ({
+      TerminalView: ((props: { tabId: string }) => {
+        received = props.tabId
+        return createElement('div', { 'data-testid': 'terminal-tabid' }, props.tabId)
+      }) as unknown as ComponentType<Record<string, never>>,
+    }))
+    const tabs = builtinTabs({} as Context)
+    const terminal = tabs.find(tab => tab.id === 'terminal')!
+    const props = {
+      ctx: {},
+      store: undefined,
+      scope: { sessionId: 's1', cwd: '/p' },
+      tab: { id: 'terminal:2', type: 'terminal', title: '终端 2' },
+      visible: true,
+    } as unknown as TabComponentProps
+    const { container, unmount } = mount(createElement(terminal.component, props))
+    await act(async () => {})
+    expect(container.querySelector('[data-testid="terminal-tabid"]')?.textContent).toBe('terminal:2')
+    expect(received).toBe('terminal:2')
+    unmount()
+  })
+
+  it('the loader cache survives across descriptor mounts (chunk fetched once)', async () => {
+    let calls = 0
+    registerChunkForTests('terminal', async () => {
+      calls += 1
+      return { TerminalView: Marker }
+    })
+    const tabs = builtinTabs({} as Context)
+    const terminal = tabs.find(tab => tab.id === 'terminal')!
+    const props = { tab: { id: 'terminal:1', type: 'terminal', title: '终端 1' } } as unknown as TabComponentProps
+    const { container: first, unmount: unmountFirst } = mount(createElement(terminal.component, props))
+    await act(async () => {})
+    expect(first.querySelector('[data-testid="chunk-rendered"]')).not.toBeNull()
+    unmountFirst()
+    const { container: second, unmount: unmountSecond } = mount(createElement(terminal.component, props))
+    await act(async () => {})
+    expect(second.querySelector('[data-testid="chunk-rendered"]')).not.toBeNull()
+    unmountSecond()
+    expect(calls).toBe(1)
+  })
+})
@@ -64,6 +64,17 @@ function bundleId(file: string): string {
  return match[1]!
 }

+/** The lazy chunk bundle names (mirror of src/bundle-route.ts CHUNK_NAMES). */
+const CHUNK_FILES = ['docx', 'xlsx', 'pptx', 'terminal', 'editor'].map(name => `lib/client-${name}.js`)
+
+/** The global registry slot a built chunk script assigns (its factory key). */
+function chunkSlot(file: string): string {
+  const source = readFileSync(resolve(ROOT, file), 'utf8')
+  const match = /globalThis\.__dshChunks__\["([a-z0-9-]+)"\]/.exec(source)
+  if (match === null) throw new Error(`${file} assigns no globalThis.__dshChunks__ slot — run \`pnpm build\` first`)
+  return match[1]!
+}
+
 describe('registry manifest consistency (dsh.plugin.json)', () => {
  it('id is a valid two-segment registry id (native form)', () => {
    expect(manifest.id).toMatch(ID_PATTERN)
@@ -86,13 +97,20 @@ describe('registry manifest consistency (dsh.plugin.json)', () => {
    expect(registryId).not.toBe(pkg.name)
  })

+  it('the lazy chunk bundles exist and assign their global registry slots (served by /sidebar/bundle)', () => {
+    for (const file of CHUNK_FILES) {
+      expect(existsSync(resolve(ROOT, file)), file).toBe(true)
+      expect(chunkSlot(file), file).toBe(file.slice('lib/client-'.length, -'.js'.length))
+    }
+  })
+
  it('client bundles require only frozen module-table entries', () => {
-    for (const file of ['lib/client.js', manifest.client!.main!]) {
+    for (const file of ['lib/client.js', manifest.client!.main!, ...CHUNK_FILES]) {
      const source = readFileSync(resolve(ROOT, file), 'utf8')
      // Exclude method calls such as `freeModule.require("util")`; only the
      // loader factory's lexical require() is constrained by the module table.
      const required = [...source.matchAll(/(^|[^.$\w])require\("([^"]+)"\)/gm)].map(match => match[2]!)
-      expect([...new Set(required)].filter(id => !CLIENT_REQUIRE_ALLOWED.has(id))).toEqual([])
+      expect([...new Set(required)].filter(id => !CLIENT_REQUIRE_ALLOWED.has(id)), file).toEqual([])
    }
  })

@@ -57,6 +57,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, interceptOpenPath: true, htmlViewerNoSandbox: false, htmlViewerDefaultUnsafe: false, browserNoSandbox: false, browserInterceptLinks: true, tabsEnabled: {}, viewersEnabled: {} })
+    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: {} })
  })
 })
@@ -414,3 +414,186 @@ describe('service.openTab dedupe', () => {
    expect(tabs).toHaveLength(1)
  })
 })
+
+describe('service.openTab across the two panels', () => {
+  it('openTab lands in the bottom tree when the active pane lives there', () => {
+    const store = createSidebarStore()
+    const service = createBetterSidebarService(store)
+    service.registerTab({ id: 'git', title: 'Git', component: () => null })
+    store.setSession('s1')
+    store.reduce(s => ({ ...s, activePane: (s.bottomSplits as { id: string }).id }))
+    service.openTab({ type: 'git', title: 'Git' })
+    const state = store.getSnapshot().state!
+    expect(allLeaves(state.bottomSplits).flatMap(l => l.tabs).some(t => t.type === 'git')).toBe(true)
+    expect(allLeaves(state.splits).flatMap(l => l.tabs).some(t => t.type === 'git')).toBe(false)
+  })
+
+  it('dedupeKey focuses an existing instance in the OTHER tree (single-instance across panels)', () => {
+    const store = createSidebarStore()
+    const service = createBetterSidebarService(store)
+    service.registerTab({
+      id: 'singleton',
+      title: 'Singleton',
+      single: true,
+      component: () => null,
+    })
+    store.setSession('s1')
+    // Open in the right tree first.
+    service.openTab({ type: 'singleton', title: 'Singleton' })
+    // Switch the active pane to the bottom tree and open again: the dedupe
+    // scan covers both trees, so the existing instance is focused, not
+    // duplicated in the bottom panel.
+    store.reduce(s => ({ ...s, activePane: (s.bottomSplits as { id: string }).id }))
+    service.openTab({ type: 'singleton', title: 'Singleton' })
+    const state = store.getSnapshot().state!
+    const total = allLeaves(state.splits).concat(allLeaves(state.bottomSplits))
+      .flatMap(l => l.tabs).filter(t => t.type === 'singleton')
+    expect(total).toHaveLength(1)
+  })
+
+  it('closeTab by id closes a tab living in the bottom tree', () => {
+    const store = createSidebarStore()
+    const service = createBetterSidebarService(store)
+    service.registerTab({ id: 'git', title: 'Git', component: () => null })
+    store.setSession('s1')
+    store.reduce(s => ({ ...s, activePane: (s.bottomSplits as { id: string }).id }))
+    service.openTab({ type: 'git', title: 'Git' })
+    const state = store.getSnapshot().state!
+    const gitTab = allLeaves(state.bottomSplits).flatMap(l => l.tabs).find(t => t.type === 'git')!
+    service.closeTab(gitTab.id)
+    const after = store.getSnapshot().state!
+    expect(allLeaves(after.bottomSplits).flatMap(l => l.tabs).some(t => t.id === gitTab.id)).toBe(false)
+  })
+})
+
+describe('service.openTab auto-expand for content opens', () => {
+  /** The window stub is a plain object (see the file header), so the width is writable. */
+  const setWidth = (width: number): void => {
+    ;(g.window as { innerWidth: number }).innerWidth = width
+  }
+  /** Collapse the right panel (the store defaults it open). */
+  const collapseRightPanel = (store: ReturnType<typeof createSidebarStore>): void => {
+    store.reduce(s => ({ ...s, panelOpen: false }))
+  }
+
+  it('expands the collapsed drawer for a path (file) open on a narrow viewport', () => {
+    setWidth(390)
+    try {
+      const store = createSidebarStore()
+      const service = createBetterSidebarService(store)
+      service.registerTab({ id: 'editor', title: 'Editor', component: () => null })
+      store.setSession('s1')
+      store.reduce(s => ({ ...s, panelOpen: false }))
+      service.openTab({ type: 'editor', title: 'main.ts', path: '/p/main.ts' })
+      expect(store.getSnapshot().state?.panelOpen).toBe(true)
+    } finally {
+      setWidth(1024)
+    }
+  })
+
+  it('expands the collapsed drawer for a URL (browser) open on a narrow viewport', () => {
+    setWidth(390)
+    try {
+      const store = createSidebarStore()
+      const service = createBetterSidebarService(store)
+      service.registerTab({ id: 'browser', title: 'Browser', component: () => null })
+      store.setSession('s1')
+      store.reduce(s => ({ ...s, panelOpen: false }))
+      service.openTab({ type: 'browser', url: 'https://example.com', title: 'example.com' })
+      expect(store.getSnapshot().state?.panelOpen).toBe(true)
+    } finally {
+      setWidth(1024)
+    }
+  })
+
+  it('keeps a collapsed drawer for a type-only open on a narrow viewport', () => {
+    setWidth(390)
+    try {
+      const store = createSidebarStore()
+      const service = createBetterSidebarService(store)
+      service.registerTab({ id: 'explorer', title: 'Explorer', component: () => null })
+      store.setSession('s1')
+      store.reduce(s => ({ ...s, panelOpen: false }))
+      service.openTab({ type: 'explorer', title: 'Explorer' })
+      expect(store.getSnapshot().state?.panelOpen).toBe(false)
+    } finally {
+      setWidth(1024)
+    }
+  })
+
+  it('expands the collapsed right panel for a path (file) open on a wide viewport', () => {
+    const store = createSidebarStore()
+    const service = createBetterSidebarService(store)
+    service.registerTab({ id: 'editor', title: 'Editor', component: () => null })
+    store.setSession('s1')
+    collapseRightPanel(store)
+    service.openTab({ type: 'editor', title: 'main.ts', path: '/p/main.ts' })
+    const state = store.getSnapshot().state!
+    expect(state.panelOpen).toBe(true)
+    expect(allLeaves(state.splits).flatMap(l => l.tabs).some(t => t.type === 'editor')).toBe(true)
+  })
+
+  it('expands the collapsed right panel for a URL (browser) open on a wide viewport', () => {
+    const store = createSidebarStore()
+    const service = createBetterSidebarService(store)
+    service.registerTab({ id: 'browser', title: 'Browser', component: () => null })
+    store.setSession('s1')
+    collapseRightPanel(store)
+    service.openTab({ type: 'browser', url: 'https://example.com', title: 'example.com' })
+    expect(store.getSnapshot().state!.panelOpen).toBe(true)
+  })
+
+  it('a wide-viewport path open landing in the bottom tree expands the bottom panel instead', () => {
+    const store = createSidebarStore()
+    const service = createBetterSidebarService(store)
+    service.registerTab({ id: 'editor', title: 'Editor', component: () => null })
+    store.setSession('s1')
+    // The last-touched pane lives in the bottom tree and BOTH panels are
+    // collapsed: the open must surface the bottom panel, not the right one.
+    store.reduce(s => ({ ...s, activePane: (s.bottomSplits as { id: string }).id, panelOpen: false, bottomOpen: false }))
+    service.openTab({ type: 'editor', title: 'main.ts', path: '/p/main.ts' })
+    const state = store.getSnapshot().state!
+    expect(state.bottomOpen).toBe(true)
+    expect(state.panelOpen).toBe(false)
+    expect(allLeaves(state.bottomSplits).flatMap(l => l.tabs).some(t => t.type === 'editor')).toBe(true)
+  })
+
+  it('keeps a collapsed panel for a type-only open on a wide viewport', () => {
+    const store = createSidebarStore()
+    const service = createBetterSidebarService(store)
+    service.registerTab({ id: 'explorer', title: 'Explorer', component: () => null })
+    store.setSession('s1')
+    collapseRightPanel(store)
+    service.openTab({ type: 'explorer', title: 'Explorer' })
+    expect(store.getSnapshot().state?.panelOpen).toBe(false)
+  })
+
+  it('expands on a narrow viewport even when the open focuses an existing tab (id dedupe)', () => {
+    setWidth(390)
+    try {
+      const store = createSidebarStore()
+      const service = createBetterSidebarService(store)
+      service.registerTab({ id: 'editor', title: 'Editor', component: () => null })
+      store.setSession('s1')
+      service.openTab({ type: 'editor', title: 'main.ts', path: '/p/main.ts' })
+      store.reduce(s => ({ ...s, panelOpen: false }))
+      service.openTab({ type: 'editor', title: 'main.ts', path: '/p/main.ts' })
+      expect(store.getSnapshot().state?.panelOpen).toBe(true)
+    } finally {
+      setWidth(1024)
+    }
+  })
+
+  it('expands on a wide viewport even when the open focuses an existing tab (id dedupe)', () => {
+    const store = createSidebarStore()
+    const service = createBetterSidebarService(store)
+    service.registerTab({ id: 'editor', title: 'Editor', component: () => null })
+    store.setSession('s1')
+    service.openTab({ type: 'editor', title: 'main.ts', path: '/p/main.ts' })
+    collapseRightPanel(store)
+    service.openTab({ type: 'editor', title: 'main.ts', path: '/p/main.ts' })
+    const state = store.getSnapshot().state!
+    expect(state.panelOpen).toBe(true)
+    expect(allLeaves(state.splits).flatMap(l => l.tabs).filter(t => t.type === 'editor')).toHaveLength(1)
+  })
+})
@@ -58,7 +58,7 @@ describe('host plugin smoke', () => {
      inject: () => () => {},
    }
    apply(ctx as never)
-    expect(routes.map(route => route.path)).toEqual(['/sidebar/api', '/sidebar/file', '/sidebar/html'])
+    expect(routes.map(route => route.path)).toEqual(['/sidebar/api', '/sidebar/bundle', '/sidebar/file', '/sidebar/html'])
    expect(upgrades.map(route => route.path)).toEqual(['/sidebar/ws/terminal', '/sidebar/ws/agent-terminals'])
    // Teardown runs without throwing (pty manager has nothing open).
    for (const cleanup of effects) cleanup()
@@ -507,6 +507,7 @@ describe('side card settings routes', () => {
        defaultWidthPercent: 30,
        autoOpenSubagent: true,
        agentTerminalTools: false,
+        bottomPanelAutoTerminal: true,
        interceptOpenPath: true,
        htmlViewerNoSandbox: false,
        htmlViewerDefaultUnsafe: false,
@@ -3,8 +3,8 @@ import { compareEntries, isWithin, parentOf, rootLabel, requireAbsolute } from '
 import { parseLogLines, parsePorcelainZ } from '../src/git.ts'
 import { parseUnifiedDiff } from '../src/client/DiffView.tsx'
 import {
-  activateTab, allLeaves, closeTab, createSidebarStore, defaultWidthFor, insertLeafAt, makeDefaultState,
-  moveTab, moveTabToEdge, openDiffTab, openTabInActivePane, patchTab, reconcileAgentTerminals, resizeSplit, sanitizeState, splitPane, tabOpenIn, toggleExpanded,
+  activateTab, allLeaves, BOTTOM_DEFAULT, BOTTOM_MIN, closeTab, createSidebarStore, defaultWidthFor, insertLeafAt, makeDefaultState,
+  migrateBottomTabs, moveTab, moveTabToEdge, openDiffTab, openTabInActivePane, patchTab, reconcileAgentTerminals, resizeSplit, resizeSplitIn, sanitizeState, setBottomHeight, splitPane, tabOpenIn, toggleBottomPanel, toggleExpanded, togglePanel,
  type SidebarState, type SidebarTab, type SplitNode,
 } from '../src/client/state.ts'
 import { loadPrefs, type SidebarSettingsClient } from '../src/client/prefs.ts'
@@ -520,6 +520,263 @@ describe('sidebar state', () => {
    s = openTabInActivePane(s, { id: 'terminal:9', type: 'terminal', title: 'Terminal 9' })
    expect(tabOpenIn(s, 'terminal:9')).toBe(true)
  })
+
+  // ── Bottom panel (the second, independent workbench) ───────────────────
+
+  it('toggleBottomPanel flips the bottom panel independently of the right panel', () => {
+    let s = state()
+    expect(s.bottomOpen).toBe(false)
+    s = toggleBottomPanel(s)
+    expect(s.bottomOpen).toBe(true)
+    // Collapsing the right panel leaves the bottom panel open (independent toggles).
+    s = togglePanel(s)
+    expect(s.panelOpen).toBe(false)
+    expect(s.bottomOpen).toBe(true)
+  })
+
+  it('setBottomHeight clamps to the contract range', () => {
+    expect(setBottomHeight(state(), 50).bottomHeight).toBe(BOTTOM_MIN)
+    const g = globalThis as Record<string, unknown>
+    const previous = g.window
+    g.window = { innerHeight: 800 }
+    try {
+      // The bottom panel must leave the center column at least PANEL_MIN
+      // tall (800 - 280), regardless of the right panel's open state.
+      expect(setBottomHeight(state(), 9999).bottomHeight).toBe(800 - 280)
+      expect(setBottomHeight({ ...state(), panelOpen: false }, 9999).bottomHeight).toBe(800 - 280)
+    } finally {
+      if (previous === undefined) delete g.window
+      else g.window = previous
+    }
+  })
+
+  // ── Narrow-viewport merge (bottom tabs thrown into the right sidebar) ──
+
+  it('migrateBottomTabs throws the bottom tree tabs into the right tree’s FIRST leaf', () => {
+    let s = state()
+    s = toggleBottomPanel(s)
+    const bottomPane = (s.bottomSplits as { id: string }).id
+    // Two bottom tabs in their own pane; the right pane holds explorer.
+    s = openTabInActivePane({ ...s, activePane: bottomPane }, { id: 'terminal:1', type: 'terminal', title: 'T1' })
+    s = openTabInActivePane(s, { id: 'terminal:2', type: 'terminal', title: 'T2' })
+    const migrated = migrateBottomTabs(s)
+    // All tabs now live in the right tree's first leaf, bottom tabs appended.
+    expect((migrated.splits as { tabs: SidebarTab[] }).tabs.map(t => t.id))
+      .toEqual([expect.stringMatching(/^tab:/), 'terminal:1', 'terminal:2'])
+    // The bottom tree is emptied (structure stays), the panel closes, and
+    // new tabs land in the right tree.
+    expect((migrated.bottomSplits as { tabs: SidebarTab[] }).tabs).toHaveLength(0)
+    expect(migrated.bottomOpen).toBe(false)
+    expect(migrated.activePane).toBe((migrated.splits as { id: string }).id)
+    // The migrated tabs are fully functional: closing one works through the
+    // right tree.
+    expect(tabOpenIn(migrated, 'terminal:1')).toBe(true)
+    expect(tabOpenIn(closeTab(migrated, migrated.activePane!, 'terminal:1'), 'terminal:1')).toBe(false)
+  })
+
+  it('migrateBottomTabs appends into the FIRST leaf when the right tree is a split', () => {
+    let s = state()
+    s = splitPane(s, 'row') // splits the active pane into two leaves
+    s = toggleBottomPanel(s)
+    const bottomPane = (s.bottomSplits as { id: string }).id
+    s = openTabInActivePane({ ...s, activePane: bottomPane }, { id: 'terminal:9', type: 'terminal', title: 'T9' })
+    const migrated = migrateBottomTabs(s)
+    // The first (leftmost) leaf carries the bottom tab; the second leaf
+    // keeps its own tabs untouched.
+    const leaves = allLeaves(migrated.splits)
+    expect(leaves[0]!.tabs.map(t => t.id)).toContain('terminal:9')
+    expect(allLeaves(migrated.bottomSplits).flatMap(l => l.tabs)).toHaveLength(0)
+  })
+
+  it('migrateBottomTabs is idempotent (same reference) once the bottom tree is empty and closed', () => {
+    const s = state()
+    expect(migrateBottomTabs(s)).toBe(s)
+    // With the panel open but no tabs, the migration only closes the panel.
+    const open = toggleBottomPanel(s)
+    const migrated = migrateBottomTabs(open)
+    expect(migrated).not.toBe(open)
+    expect(migrated.bottomOpen).toBe(false)
+    expect(migrateBottomTabs(migrated)).toBe(migrated)
+  })
+
+  it('migrateBottomTabs repoints an active pane that lives in the bottom tree', () => {
+    let s = state()
+    const bottomPane = (s.bottomSplits as { id: string }).id
+    s = { ...s, activePane: bottomPane } // empty bottom pane, panel closed
+    const migrated = migrateBottomTabs(s)
+    expect(migrated.activePane).toBe((migrated.splits as { id: string }).id)
+    // A tab opened after the migration lands in the VISIBLE right tree.
+    const landed = openTabInActivePane(migrated, { id: 'git', type: 'git' as const, title: 'Git' })
+    expect((landed.splits as { tabs: SidebarTab[] }).tabs.map(t => t.type)).toContain('git')
+  })
+
+  it('openTabInActivePane lands in the bottom tree when the active pane lives there', () => {
+    let s = state()
+    s = toggleBottomPanel(s)
+    const bottomPane = (s.bottomSplits as { id: string }).id
+    s = { ...s, activePane: bottomPane }
+    const tab = { id: 'git', type: 'git' as const, title: 'Git' }
+    s = openTabInActivePane(s, tab)
+    expect((s.bottomSplits as { tabs: SidebarTab[] }).tabs.map(t => t.id)).toContain('git')
+    // The right tree is untouched.
+    expect((s.splits as { tabs: SidebarTab[] }).tabs.map(t => t.type)).toEqual(['explorer'])
+    expect(s.activePane).toBe(bottomPane)
+    // The id safety net works across trees: reopening the same id focuses it.
+    const after = openTabInActivePane(s, tab)
+    expect((after.bottomSplits as { tabs: SidebarTab[] }).tabs.map(t => t.id)).toEqual(['git'])
+  })
+
+  it('openTabInActivePane falls back to the right tree when the active pane is stale', () => {
+    let s = state()
+    s = toggleBottomPanel(s)
+    s = { ...s, activePane: 'pane:gone' }
+    const after = openTabInActivePane(s, { id: 'git', type: 'git' as const, title: 'Git' })
+    expect((after.splits as { tabs: SidebarTab[] }).tabs.map(t => t.type)).toContain('git')
+  })
+
+  it('closeTab routes to the bottom tree', () => {
+    let s = state()
+    s = toggleBottomPanel(s)
+    const bottomPane = (s.bottomSplits as { id: string }).id
+    s = openTabInActivePane({ ...s, activePane: bottomPane }, { id: 'terminal:1', type: 'terminal', title: 'T1' })
+    expect(tabOpenIn(s, 'terminal:1')).toBe(true)
+    s = closeTab(s, bottomPane, 'terminal:1')
+    expect(tabOpenIn(s, 'terminal:1')).toBe(false)
+    // The right tree is untouched.
+    expect(tabOpenIn(s, (s.splits as { tabs: { id: string }[] }).tabs[0]!.id)).toBe(true)
+  })
+
+  it('moveTabToEdge splits within the bottom tree', () => {
+    let s = state()
+    s = toggleBottomPanel(s)
+    const bottomPane = (s.bottomSplits as { id: string }).id
+    s = openTabInActivePane({ ...s, activePane: bottomPane }, { id: 'terminal:1', type: 'terminal', title: 'T1' })
+    s = moveTabToEdge(s, bottomPane, 'terminal:1', bottomPane, 'right')
+    expect(s.bottomSplits.kind).toBe('split')
+    expect(s.splits.kind).toBe('leaf')
+    expect(tabOpenIn(s, 'terminal:1')).toBe(true)
+    // The fresh leaf (the drop's active pane) differs from the source pane.
+    expect(s.activePane).not.toBe(bottomPane)
+  })
+
+  it('resizeSplitIn routes a divider to its own tree', () => {
+    let s = state()
+    s = toggleBottomPanel(s)
+    const bottomPane = (s.bottomSplits as { id: string }).id
+    s = splitPane({ ...s, activePane: bottomPane }, 'row')
+    const split = s.bottomSplits as Extract<SplitNode, { kind: 'split' }>
+    s = resizeSplitIn(s, split.id, 0, 0.1)
+    const next = s.bottomSplits as Extract<SplitNode, { kind: 'split' }>
+    expect(next.sizes[0]).toBeCloseTo(0.6)
+    expect(s.splits.kind).toBe('leaf')
+  })
+
+  it('sanitize defaults the bottom fields for older persisted states and repairs a broken bottom tree', () => {
+    const base = {
+      panelOpen: true,
+      width: 400,
+      nextTerminal: 1,
+      activePane: 'pane:1',
+      expanded: [],
+      splits: {
+        kind: 'leaf',
+        id: 'pane:1',
+        active: null,
+        tabs: [{ id: 't', type: 'explorer', title: 'Explorer' }],
+      },
+    }
+    // Older persisted states lack the bottom fields: defaults, state kept.
+    const s = sanitizeState(base)
+    expect(s?.bottomOpen).toBe(false)
+    expect(s?.bottomHeight).toBe(BOTTOM_DEFAULT)
+    expect(s?.bottomSplits.kind).toBe('leaf')
+    expect((s?.bottomSplits as { tabs: SidebarTab[] }).tabs).toHaveLength(0)
+    // A malformed bottom tree is replaced with a fresh empty pane.
+    const broken = sanitizeState({ ...base, bottomSplits: 'junk' })
+    expect(broken?.splits).toBeDefined()
+    expect(broken?.bottomSplits.kind).toBe('leaf')
+    // A valid persisted bottom tree survives.
+    const withBottom = sanitizeState({
+      ...base,
+      bottomOpen: true,
+      bottomHeight: 300,
+      bottomSplits: {
+        kind: 'leaf',
+        id: 'pane:9',
+        active: 'b1',
+        tabs: [{ id: 'b1', type: 'terminal', title: 'T' }],
+      },
+    })
+    expect(withBottom?.bottomOpen).toBe(true)
+    expect(withBottom?.bottomHeight).toBe(300)
+    expect((withBottom?.bottomSplits as { tabs: SidebarTab[] }).tabs.map(t => t.id)).toEqual(['b1'])
+    // Heights are clamped to the contract range.
+    expect(sanitizeState({ ...base, bottomHeight: 10 })?.bottomHeight).toBe(BOTTOM_MIN)
+    // A stale full-height bottom panel must not squeeze the center column
+    // (the agent output area) to zero: the cap leaves it at least PANEL_MIN
+    // tall, regardless of the right panel's open state.
+    const g = globalThis as Record<string, unknown>
+    const previous = g.window
+    g.window = { innerHeight: 800 }
+    try {
+      expect(sanitizeState({ ...base, panelOpen: true, bottomHeight: 9999 })?.bottomHeight).toBe(800 - 280)
+      expect(sanitizeState({ ...base, panelOpen: false, bottomHeight: 9999 })?.bottomHeight).toBe(800 - 280)
+    } finally {
+      if (previous === undefined) delete g.window
+      else g.window = previous
+    }
+  })
+
+  it('tabOpenIn and patchTab see tabs in the bottom tree', () => {
+    let s = state()
+    s = toggleBottomPanel(s)
+    const bottomPane = (s.bottomSplits as { id: string }).id
+    s = openTabInActivePane(
+      { ...s, activePane: bottomPane },
+      { id: 'browser:1', type: 'browser', title: 'example.com', path: 'https://example.com' },
+    )
+    expect(tabOpenIn(s, 'browser:1')).toBe(true)
+    s = patchTab(s, 'browser:1', { title: 'other.com', path: 'https://other.com' })
+    const tab = allLeaves(s.bottomSplits).flatMap(leaf => leaf.tabs).find(t => t.id === 'browser:1')
+    expect(tab?.title).toBe('other.com')
+  })
+
+  it('moves a tab across panels (center merge into the other tree)', () => {
+    let s = state()
+    s = toggleBottomPanel(s)
+    const rightPane = (s.splits as { id: string }).id
+    const bottomPane = (s.bottomSplits as { id: string }).id
+    const explorerId = (s.splits as { tabs: { id: string }[] }).tabs[0]!.id
+    // Drag the explorer tab from the right panel into the bottom panel (center).
+    s = moveTabToEdge(s, rightPane, explorerId, bottomPane, 'center')
+    expect((s.bottomSplits as { tabs: SidebarTab[] }).tabs.map(t => t.id)).toContain(explorerId)
+    expect((s.splits as { tabs: SidebarTab[] }).tabs).toHaveLength(0)
+    expect(s.activePane).toBe(bottomPane)
+    // And back, inserted at an index.
+    s = moveTab(s, bottomPane, explorerId, rightPane, 0)
+    expect((s.splits as { tabs: SidebarTab[] }).tabs[0]!.id).toBe(explorerId)
+    expect((s.bottomSplits as { tabs: SidebarTab[] }).tabs).toHaveLength(0)
+  })
+
+  it('moves a tab across panels by splitting the target pane (edge drop)', () => {
+    let s = state()
+    s = toggleBottomPanel(s)
+    const rightPane = (s.splits as { id: string }).id
+    const bottomPane = (s.bottomSplits as { id: string }).id
+    const explorerId = (s.splits as { tabs: { id: string }[] }).tabs[0]!.id
+    s = moveTabToEdge(s, rightPane, explorerId, bottomPane, 'right')
+    // The source tree empties back to a leaf; the target tree splits.
+    expect(s.splits.kind).toBe('leaf')
+    expect((s.splits as { tabs: SidebarTab[] }).tabs).toHaveLength(0)
+    expect(s.bottomSplits.kind).toBe('split')
+    expect(tabOpenIn(s, explorerId)).toBe(true)
+    const split = s.bottomSplits as Extract<SplitNode, { kind: 'split' }>
+    expect(split.children.some(
+      child => child.kind === 'leaf' && (child as { tabs: SidebarTab[] }).tabs.some(t => t.id === explorerId),
+    )).toBe(true)
+    // The fresh leaf (the drop's active pane) differs from the source pane.
+    expect(s.activePane).not.toBe(rightPane)
+  })
 })

 describe('agent terminal reconciliation', () => {
@@ -576,6 +833,17 @@ describe('agent terminal reconciliation', () => {
    expect(tabOpenIn(s, 'agent:aaa-111')).toBe(false)
    expect(tabOpenIn(s, 'agent:bbb-222')).toBe(false)
  })
+
+  it('lands new agent terminals in the active tree (bottom panel pane)', () => {
+    let s = makeDefaultState(400, true)
+    s = toggleBottomPanel(s)
+    const bottomPane = (s.bottomSplits as { id: string }).id
+    s = { ...s, activePane: bottomPane }
+    s = reconcileAgentTerminals(s, [{ uuid: 'aaa-111', title: 'dev server' }])
+    expect(tabOpenIn(s, 'agent:aaa-111')).toBe(true)
+    expect(allLeaves(s.bottomSplits).flatMap(l => l.tabs).some(t => t.id === 'agent:aaa-111')).toBe(true)
+    expect(allLeaves(s.splits).flatMap(l => l.tabs).some(t => t.id === 'agent:aaa-111')).toBe(false)
+  })
 })

 describe('pty helpers', () => {
@@ -883,6 +1151,7 @@ describe('side card preferences', () => {
        defaultWidthPercent: 60,
        autoOpenSubagent: false,
        agentTerminalTools: true,
+        bottomPanelAutoTerminal: true,
        interceptOpenPath: true,
        htmlViewerNoSandbox: false,
        htmlViewerDefaultUnsafe: false,
@@ -900,6 +1169,7 @@ describe('side card preferences', () => {
        defaultWidthPercent: 33,
        autoOpenSubagent: true,
        agentTerminalTools: false,
+        bottomPanelAutoTerminal: true,
        interceptOpenPath: true,
        htmlViewerNoSandbox: false,
        htmlViewerDefaultUnsafe: false,
@@ -917,6 +1187,7 @@ describe('side card preferences', () => {
        defaultWidthPercent: 40,
        autoOpenSubagent: true,
        agentTerminalTools: false,
+        bottomPanelAutoTerminal: true,
        interceptOpenPath: true,
        htmlViewerNoSandbox: false,
        htmlViewerDefaultUnsafe: false,
@@ -963,9 +1234,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, interceptOpenPath: true, htmlViewerNoSandbox: false, htmlViewerDefaultUnsafe: false, browserNoSandbox: false, browserInterceptLinks: true, tabsEnabled: {}, viewersEnabled: {} })
+    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.setSession('fresh-session')
-    expect(store.getPrefs()).toEqual({ openByDefault: false, defaultWidthPercent: 45, autoOpenSubagent: true, agentTerminalTools: false, interceptOpenPath: true, htmlViewerNoSandbox: false, htmlViewerDefaultUnsafe: false, browserNoSandbox: false, browserInterceptLinks: true, tabsEnabled: {}, viewersEnabled: {} })
+    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: {} })
    const snapshot = store.getSnapshot()
    expect(snapshot.sessionId).toBe('fresh-session')
    expect(snapshot.state?.panelOpen).toBe(false)
@@ -976,9 +1247,32 @@ describe('side card preferences', () => {
    expect(openStore.getSnapshot().state?.panelOpen).toBe(true)
  })

+  it('seeds a brand-new session COLLAPSED on narrow viewports (the panel is a full-screen drawer there)', () => {
+    // Stub a narrow window (the file otherwise runs without one): only
+    // innerWidth is read while seeding a fresh session.
+    const original = (globalThis as Record<string, unknown>).window
+    ;(globalThis as Record<string, unknown>).window = {
+      innerWidth: 390,
+      clearTimeout: () => {},
+      setTimeout: (_fn: () => void) => 0,
+    }
+    try {
+      const store = createSidebarStore()
+      // Default prefs say openByDefault: true — the narrow viewport overrides
+      // it for the FIRST seeding only (a later user expansion persists).
+      store.setSession('narrow-fresh')
+      expect(store.getSnapshot().state?.panelOpen).toBe(false)
+      // The width seeding still follows the window (clamped to the floor).
+      expect(store.getSnapshot().state?.width).toBe(280)
+    } finally {
+      if (original === undefined) delete (globalThis as Record<string, unknown>).window
+      else (globalThis as Record<string, unknown>).window = original
+    }
+  })
+
  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, interceptOpenPath: true, htmlViewerNoSandbox: false, htmlViewerDefaultUnsafe: false, browserNoSandbox: false, browserInterceptLinks: true, tabsEnabled: { explorer: false }, viewersEnabled: {} })
+    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.setSession('no-explorer')
    const state = store.getSnapshot().state!
    const tabs = allLeaves(state.splits).flatMap(leaf => leaf.tabs)
@@ -986,7 +1280,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, interceptOpenPath: true, htmlViewerNoSandbox: false, htmlViewerDefaultUnsafe: false, browserNoSandbox: false, browserInterceptLinks: true, tabsEnabled: {}, viewersEnabled: {} })
+    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.setSession('with-explorer')
    const openTabs = allLeaves(openStore.getSnapshot().state!.splits).flatMap(leaf => leaf.tabs)
    expect(openTabs.map(tab => tab.type)).toEqual(['explorer'])
@@ -27,6 +27,17 @@
 * - each artifact registers itself via window.__ModuleLoader__.load({id,
 *   factory}) with the (require) => exports CJS closure shape.
 *
+ * Lazy chunks (lib/client-<name>.js): the heavy preview/terminal libraries
+ * (Univer, docx-preview, pptx-renderer, CodeMirror, xterm — tens of MB)
+ * build as five standalone chunk bundles (src/client/chunks/<name>.tsx),
+ * shared by both channels. Each script assigns its factory to the
+ * plugin-owned global registry (globalThis.__dshChunks__) and is fetched by
+ * the client on first use from the plugin's own /sidebar/bundle route —
+ * chunks deliberately do NOT go through the module loader (see
+ * src/client/chunk-loader.ts). `codeSplitting: false` keeps every chunk a
+ * single script; the core client.js must never statically import a chunks/
+ * entry.
+ *
 * Types ship from lib/types (tsc -p tsconfig.build.json), not from tsdown.
 */
 import { readFile } from 'node:fs/promises'
@@ -155,71 +166,7 @@ function clientBundle(pluginId: string, entryFile: string): UserConfig {
    },
    // External wins for module-table entries; every other dependency inlines.
    noExternal: (id: string) => (CLIENT_EXTERNALS.includes(id) ? undefined : true),
-    plugins: [{
-      // Bundle purity gate (mirror of the official preset): platform seed
-      // entries stay external, inline-safe wire layers inline, and every
-      // other @deepseek-ai value import is a build error — a cross-plugin
-      // value import either inlines a duplicate runtime instance or requires
-      // a specifier the frozen module table cannot answer. Cross-plugin
-      // collaboration goes through cordis services instead. Type-only
-      // imports are erased and never reach this gate.
-      name: 'dsh-client-bundle-purity',
-      resolveId(source: string) {
-        if (NODE_BUILTINS.has(source)) {
-          throw new Error(
-            `client bundle purity: Node builtin "${source}" cannot run in the browser module table — `
-            + 'select the dependency browser export or add an explicit browser implementation',
-          )
-        }
-        if (!source.startsWith('@deepseek-ai/')) return null
-        if (CLIENT_EXTERNALS.includes(source)) return null // platform module: external wins
-        if (INLINE_SAFE.test(source)) return null // wire/type layer: inline is the point
-        throw new Error(
-          `client bundle purity: "${source}" is not a platform module (CLIENT_EXTERNALS) and not an inline-safe wire layer — `
-          + 'cross-plugin value imports are forbidden; collaborate through cordis services (type-only imports are erased and never reach this gate)',
-        )
-      },
-    }, {
-      name: 'dsh-css-inline',
-      resolveId(source: string, importer: string | undefined) {
-        if (!source.endsWith('.css')) return null
-        // Relative/absolute paths resolve against the importer; bare
-        // specifiers (e.g. 'xterm/css/xterm.css') resolve from the package.
-        let abs: string
-        if (source.startsWith('.') || source.startsWith('/') || /^[A-Za-z]:[\\/]/.test(source)) {
-          abs = importer === undefined ? source : resolvePath(dirname(importer), source)
-        } else {
-          abs = require.resolve(source)
-        }
-        return CSS_VIRTUAL_PREFIX + abs + CSS_VIRTUAL_SUFFIX
-      },
-      async load(virtualId: string) {
-        if (!virtualId.startsWith(CSS_VIRTUAL_PREFIX)) return null
-        const fileId = virtualId.slice(CSS_VIRTUAL_PREFIX.length, -CSS_VIRTUAL_SUFFIX.length)
-        this.addWatchFile(fileId)
-        const source = await readFile(fileId)
-        // CSS Modules (x.module.css) become hashed class maps; plain css
-        // (xterm's stylesheet) is inlined verbatim.
-        if (fileId.endsWith('.module.css')) {
-          const { code, exports: cssExports } = transform({
-            filename: fileId,
-            code: source,
-            cssModules: { pattern: `[hash]_[local]` },
-            minify: true,
-          })
-          const classMap: Record<string, string> = {}
-          for (const [local, exp] of Object.entries(cssExports ?? {})) classMap[local] = exp.name
-          return [
-            injectTag(pluginId, fileId, code.toString()),
-            `export default ${JSON.stringify(classMap)};`,
-          ].join('\n')
-        }
-        return [
-          injectTag(pluginId, fileId, source.toString('utf8')),
-          'export default "";',
-        ].join('\n')
-      },
-    }],
+    plugins: [purityGatePlugin(), makeCssPlugin(pluginId)],
    outputOptions: {
      entryFileNames: entryFile,
      sourcemapPathTransform: browserSourcePath,
@@ -228,14 +175,144 @@ function clientBundle(pluginId: string, entryFile: string): UserConfig {
      intro: 'var module = { exports: {} }; var exports = module.exports;',
      // The CJS wrapper factory's `require` only resolves module-table entries
      // (react, cordis, ...); it cannot load relative chunk URLs in the browser.
-      // Disable code splitting so dynamic import() inlines into the single
-      // factory chunk (Office preview libs — docx-preview, Univer — pull in
-      // several MB but only when first opened, the trade-off for wrapper safety).
+      // Disable code splitting so every artifact is one script (the lazy chunk
+      // files themselves are separate bundles — see chunkBundle below).
      codeSplitting: false,
    },
  }
 }

+/**
+ * One lazy chunk bundle: a heavy feature slice of the client built as a
+ * standalone single script (lib/client-<name>.js), fetched by the client on
+ * first use through the plugin's /sidebar/bundle route. The core bundle must
+ * never statically import the chunk entry.
+ *
+ * Chunks do NOT register with window.__ModuleLoader__: the module loader's
+ * import() resolves seed words / shell-own modules / registered factories /
+ * boot graph rows, and a chunk id is none of those — resolution would be
+ * version-dependent. Instead each script assigns its CJS factory to the
+ * plugin-owned global registry `globalThis.__dshChunks__[<name>]`, and the
+ * loader (src/client/chunk-loader.ts) materializes it with a require built
+ * from the module table's seed words.
+ *
+ * Chunk css tags use the constant plugin id `dsh-better-sidebar` (matching
+ * the official channel; the registry channel re-injects an identical copy
+ * of the shared module css — same content, no functional impact).
+ * @param name - chunk name; entry src/client/chunks/<name>.tsx, output
+ *   lib/client-<name>.js. Keep in sync with CHUNK_NAMES in src/bundle-route.ts.
+ */
+function chunkBundle(name: string): UserConfig {
+  return {
+    entry: { [name]: `src/client/chunks/${name}.tsx` },
+    outDir: 'lib',
+    format: 'cjs',
+    platform: 'browser',
+    dts: false,
+    sourcemap: true,
+    clean: false,
+    external: [...CLIENT_EXTERNALS],
+    define: {
+      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV ?? 'production'),
+      'import.meta.env.MODE': JSON.stringify(process.env.NODE_ENV ?? 'production'),
+      'import.meta.env': JSON.stringify({ MODE: process.env.NODE_ENV ?? 'production' }),
+      'import.meta.resolve': 'undefined',
+    },
+    alias: {
+      jszip: JSZIP_BROWSER_ENTRY,
+      xlsx: XLSX_BROWSER_ENTRY,
+    },
+    inputOptions: {
+      resolve: {
+        conditionNames: ['browser', 'import', 'require', 'default'],
+      },
+    },
+    noExternal: (id: string) => (CLIENT_EXTERNALS.includes(id) ? undefined : true),
+    plugins: [purityGatePlugin(), makeCssPlugin('dsh-better-sidebar')],
+    outputOptions: {
+      entryFileNames: `client-${name}.js`,
+      sourcemapPathTransform: browserSourcePath,
+      banner: `globalThis.__dshChunks__ = globalThis.__dshChunks__ || {}; globalThis.__dshChunks__[${JSON.stringify(name)}] = (require) => {`,
+      footer: 'return module.exports; };',
+      intro: 'var module = { exports: {} }; var exports = module.exports;',
+      codeSplitting: false,
+    },
+  }
+}
+
+/** A rolldown plugin as tsdown's config accepts it (contextual `this` for load/resolveId). */
+type BuildPlugin = NonNullable<UserConfig['plugins']>
+
+/** The shared client-bundle purity gate (see the clientBundle doc). */
+function purityGatePlugin(): BuildPlugin {
+  return {
+    name: 'dsh-client-bundle-purity',
+    resolveId(source: string) {
+      if (NODE_BUILTINS.has(source)) {
+        throw new Error(
+          `client bundle purity: Node builtin "${source}" cannot run in the browser module table — `
+          + 'select the dependency browser export or add an explicit browser implementation',
+        )
+      }
+      if (!source.startsWith('@deepseek-ai/')) return null
+      if (CLIENT_EXTERNALS.includes(source)) return null // platform module: external wins
+      if (INLINE_SAFE.test(source)) return null // wire/type layer: inline is the point
+      throw new Error(
+        `client bundle purity: "${source}" is not a platform module (CLIENT_EXTERNALS) and not an inline-safe wire layer — `
+        + 'cross-plugin value imports are forbidden; collaborate through cordis services (type-only imports are erased and never reach this gate)',
+      )
+    },
+  }
+}
+
+/** The shared CSS-inline virtual-module plugin (one <style data-plugin> per file). */
+function makeCssPlugin(pluginId: string): BuildPlugin {
+  return {
+    name: 'dsh-css-inline',
+    resolveId(source: string, importer: string | undefined) {
+      if (!source.endsWith('.css')) return null
+      // Relative/absolute paths resolve against the importer; bare
+      // specifiers (e.g. 'xterm/css/xterm.css') resolve from the package.
+      let abs: string
+      if (source.startsWith('.') || source.startsWith('/') || /^[A-Za-z]:[\\/]/.test(source)) {
+        abs = importer === undefined ? source : resolvePath(dirname(importer), source)
+      } else {
+        abs = require.resolve(source)
+      }
+      return CSS_VIRTUAL_PREFIX + abs + CSS_VIRTUAL_SUFFIX
+    },
+    async load(virtualId: string) {
+      if (!virtualId.startsWith(CSS_VIRTUAL_PREFIX)) return null
+      const fileId = virtualId.slice(CSS_VIRTUAL_PREFIX.length, -CSS_VIRTUAL_SUFFIX.length)
+      this.addWatchFile(fileId)
+      const source = await readFile(fileId)
+      // CSS Modules (x.module.css) become hashed class maps; plain css
+      // (xterm's stylesheet) is inlined verbatim.
+      if (fileId.endsWith('.module.css')) {
+        const { code, exports: cssExports } = transform({
+          filename: fileId,
+          code: source,
+          cssModules: { pattern: `[hash]_[local]` },
+          minify: true,
+        })
+        const classMap: Record<string, string> = {}
+        for (const [local, exp] of Object.entries(cssExports ?? {})) classMap[local] = exp.name
+        return [
+          injectTag(pluginId, fileId, code.toString()),
+          `export default ${JSON.stringify(classMap)};`,
+        ].join('\n')
+      }
+      return [
+        injectTag(pluginId, fileId, source.toString('utf8')),
+        'export default "";',
+      ].join('\n')
+    },
+  }
+}
+
+/** The lazy chunk names (keep in sync with src/bundle-route.ts CHUNK_NAMES). */
+const CHUNKS = ['docx', 'xlsx', 'pptx', 'terminal', 'editor']
+
 export default [
  {
    entry: { index: 'src/index.ts', invariant: 'src/invariant.ts' },
@@ -254,4 +331,7 @@ export default [
  clientBundle('dsh-better-sidebar', 'client.js'),
  // Plugin-registry channel: bundle id = manifest id (dsh.plugin.json `id`).
  clientBundle('dsh-external/dsh-better-sidebar', 'client-registry.js'),
+  // Lazy chunks: shared by both channels, fetched on first use through the
+  // plugin's /sidebar/bundle route (see src/client/chunk-loader.ts).
+  ...CHUNKS.map(chunkBundle),
 ] satisfies UserConfig[]
Author	SHA1	Message	Date
Menghuan1918	96b83ae3b8	chore: v0.7.0 — 版本升级（客户端懒加载、移动端体验、内容打开自动展开）	2026-08-12 18:39:19 +08:00
Menghuan1918	cb9a7cf751	feat: 内容型打开自动展开承载面板（宽视口）宽视口下 openTab 带 path/url seed 时，承载落点 pane 的面板折叠则自动展开：落点在底部树展开底部面板，否则展开右侧面板；去重聚焦既有 tab 同样展开（打开必须落在视野内）。窄视口抽屉逻辑不变；类型型打开（+ 菜单、agent 终端自动补 tab）不展开。同步 AGENTS.md / README 文档与测试。	2026-08-12 18:39:17 +08:00
Menghuan1918	ffc2270d77	fix: 移动端合并改为底部标签直接并入右侧栏（迁移式，删除双工作台堆叠方案）+ 窄屏断点收紧至 768px（不对齐宿主 1024）	2026-08-12 18:27:28 +08:00
Menghuan1918	b391ebffed	feat: 移动端侧边栏体验 — 窄视口（<1024px）双工作台合并为单面板抽屉（可拖分隔条、高度与底部面板互通）、不提供底部面板按钮、文件/外链打开自动展开、新会话默认收起	2026-08-12 18:20:34 +08:00
Menghuan1918	bab659f8bd	feat: 客户端懒加载分块 — 重依赖（Univer/xterm/CodeMirror/Office）拆独立 bundle 按需下发（/sidebar/bundle 路由 + __dshChunks__ 注册表），核心启动仅 ~325KB	2026-08-12 18:19:44 +08:00
Menghuan1918	bf54a60e37	chore: v0.6.0 — README 更新双面板说明并升版本	2026-08-12 16:54:36 +08:00
Menghuan1918	c7af7dccdb	feat: 侧边栏双面板 — 右上角按钮簇、底部面板（首展自动终端/关闭按钮）、跨面板拖 Tab、拖动性能优化 - 右上角持久按钮簇：横向排列、独立 glyph（底栏/侧拉）、始终钉在视口右上角（侧边栏展开时位于其标签条右端，真实挤占 Tab 空间） - 底部面板：独立工作台，只挤占中间 Agent 输出区（不覆盖左右侧边栏），右缘分割线、关闭 x、首展自动开终端（二级设置开关，默认开） - 两面板拐角双向拖动调节尺寸；拖动改为 rAF 节流直写 DOM，消除卡顿；面板尺寸互钳制防丢失 - 跨面板拖 Tab（合并/拆分落点），moveTab/moveTabToEdge 支持跨树移动 - 欢迎卡片改响应式网格；布局/几何全部按会话持久化，旧状态平滑迁移	2026-08-12 16:43:24 +08:00
Menghuan1918	7eccc49f6e	revert: 移除构建期 IME 守卫补丁 — 补丁打在产物上不具持久性 taekchef 的 apply-ime-guard.mjs 在每次 build/prepare/bundle 后把守卫字符串注入 lib/client.js，但补丁对象是构建产物而非源码： - 裸 tsdown 重建 / 其他构建路径产出无守卫的 bundle（#562 复发根因） - 守卫逻辑游离于源码之外，难以测试与维护运行时方案（src/client/ime-guard.ts + tests/ime-guard.spec.ts）已在源码内实现同等守卫，经 document capture 覆盖全部劫持路径，任何构建方式产物都自带守卫。合并远端提交后撤掉构建期补丁，保留运行时方案。	2026-08-12 14:41:36 +08:00
Menghuan1918	d1c393a048	Merge branch 'main' of https://github.com/dsh-external/DSH-better-sidebar	2026-08-12 14:41:26 +08:00
taekchef	a465bdee38	fix(ime): 持久化 IME 守卫脚本并挂入 build/prepare/bundle 构建路径 - scripts/apply-ime-guard.mjs 纳入版本库（此前 untracked，重 clone 即丢） - Univer InputNumber 在 document capture 拦截全页 ↑/↓ 且无 isComposing 守卫，会摧毁中文输入法组合；prepare/bundle 裸 tsdown 重建会产出无守卫的 lib/client.js，2026-08-11 因此复发（dsh-external/issues#562） - 脚本幂等：已注入则跳过；目标模式匹配不到则 exit 1 显式失败 Fixes #562	2026-08-12 03:13:31 +08:00
Menghuan1918	31b78f7941	fix: IME 组合期按键守卫 — document capture 拦截，防内联第三方组件劫持方向键（#562） Univer InputNumber 的 keydown 对 ArrowUp/Down 直接 preventDefault 且无 isComposing 守卫，中文输入法组合期候选词方向键被吞（#562 回归，同类 #535）。新增 src/client/ime-guard.ts：document capture 阶段对组合期按键（isComposing 或 keyCode 229）stopPropagation，运行于 React 委托与任何原生监听之前，覆盖内联依赖的全部劫持路径；apply 时经 ctx.effect 注册（HMR-safe）。 - tests/ime-guard.spec.ts：12 个用例，覆盖纯决策、原生 document/input 监听、 React 合成事件路径与 disposer 恢复（新增 jsdom devDependency） - 全量 280 测试通过，typecheck 干净	2026-08-12 01:16:20 +08:00