很多开发工具的侧边栏承担着“查看信息”的角色，软件格律诗 今天推荐的 dsh-better-sidebar 对这个区域的理解明显更进一步：它把文件管理、代码编辑、文档预览、网页浏览、真实终端、Git、后台任务以及可扩展 Tab 都集中到了一个工作区里，同时提供右侧栏与底部面板两套工作台，并允许用户通过拖拽重新组织 Tab 和分栏。项目 README 将它概括为“一个插件，一套完整工作台”，目前支持 Windows、Linux 和 macOS。
dsh-better-sidebar 是什么
dsh-better-sidebar 是面向 DSH Web 环境的增强型侧边栏插件，核心思路是把原本分散在不同区域的开发工作集中到侧边栏和底部面板中。安装完成后，用户可以在同一个 DSH 会话里查看项目文件、编辑代码、预览 Markdown 和 Office 文档、打开网页、运行真实 Shell、查看 Git Diff，还能观察后台 Agent 和子代理任务的执行状态。与此同时，它还提供服务化接口，让其他插件能够注册新的侧边栏 Tab 和文件预览器。
这里值得注意的是，它并不会修改 DSH 源码。README 中说明，项目通过 npm 包以及 dsh.bundle.patch 配合 DSH 官方 CLI 自动完成挂载，运行时也不依赖 npm 或源码 checkout。
主要功能特点
- 🗂️ 资源管理器：懒加载目录树（根 = 会话 cwd）、点击在侧边栏打开、行尾
@文件引用到输入框、右键复制路径 - 📝 编辑与预览：CodeMirror 6 多语言高亮 + Ctrl/Cmd+S 原子保存；图片 / Markdown（预览/编辑切换）/ HTML（沙箱 iframe 预览，相对资源可加载）/ PDF / Word / Excel / PPT 内联预览，切换 Tab 不丢草稿
- ⚡ 客户端懒加载：Office / 终端 / 代码编辑器等重依赖按需分块加载——启动只拉 ~325 KB 核心，打开 .xlsx 才拉 Univer（~20 MB）、打开 .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、懒加载历史、右键暂存/放弃/提交/还原/捡取
- 🧩 后台任务页：主会话完整 agent 拓扑、点击直达执行记录、实时工具调用轮询、新子代理自动展开；同页显示后台任务（当前树全部后台任务，bash/pwsh 类型徽标 + 退出码，点击查看实时输出——自动跟随底部、非消费 peek，不干扰模型的
job_output；两击确认可强制终止） - 🪟 底部面板：独立的第二个工作台（与右侧栏同类的标签页），只挤占中间 Agent 输出区、不覆盖左右侧边栏；首次展开自动开一个新终端（终端卡片二级设置可关）；右上角 x 一键折叠
- 📱 移动端：视口 < 768 px（真正的移动端宽度，不对齐宿主 1024 断点）时只显示右侧栏——进入窄屏时底部面板的标签页直接并入右侧栏标签条，右上角只剩一枚开关，面板为全宽抽屉；新会话默认收起，聊天里点文件/外链自动展开，不挤压对话区
- 🔧 分栏工作台：拖 Tab 拆分/合并分栏（可跨面板拖 Tab）、分隔线调比例；右上角持久按钮簇（底栏 + 侧拉 glyph）折叠/展开两个面板；两面板共享拐角双向拖动调节尺寸，拖动 rAF 直写 DOM 保持流畅
- 🔁 会话隔离：布局/分栏/Tab/两面板状态按会话持久化（localStorage），陈旧状态自动净化；聊天「产出文件」改在侧边栏打开（面板折叠时自动展开）
- ⚙️ 声明式设置：设置页「侧边卡片」分区按注册表渲染功能清单（小卡片网格，高亮 = 启用），每项可独立开/关；二级设置（子代理自动展开、终端工具、底部面板首展自动开终端、沙箱开关等）经齿轮按钮在原生弹窗中编辑
- 🔌 服务化：暴露
ctx.betterSidebar服务，其他插件可注册侧边栏 tab 与文件预览器（内置 7 tab + 9 viewer 也走同一服务，详见 [AGENTS.md](https://github.com/omdsh-dev/DSH-better-sidebar/blob/main/AGENTS.md)） - 🌏 多语言：界面文案跟随 DSH 的语言设置（zh/en）实时切换——Host 偏好优先于浏览器语言，词典注册进 DSH 的 i 18 n 命名空间；切换语言无需刷新
一套工作区覆盖文件、代码与开发任务
资源管理器：从当前会话直接进入项目文件
资源管理器采用懒加载目录树，根目录对应当前会话的 cwd。点击文件后可以直接在侧边栏打开，文件行尾提供 @文件 操作，可以把文件引用放进输入框；右键文件还可以复制相对路径或绝对路径。对于需要一边阅读项目文件、一边让 Agent 处理内容的场景，这种交互会比较顺手。
编辑器与多格式预览
代码编辑部分采用 CodeMirror 6，并提供多语言语法高亮以及 Ctrl/Cmd + S 原子保存。项目还把图片、Markdown、HTML、PDF、Word、Excel 和 PPT 的查看能力整合到了侧边工作区中，其中 Markdown 支持预览与编辑切换，HTML 使用沙箱 iframe 预览，并能够加载相对资源；切换 Tab 时，当前草稿也不会随之丢失。
为了避免启动时一次性加载所有重量级依赖，项目还采用客户端懒加载策略，启动阶段只加载约 325 KB 的核心代码，打开 .xlsx 时才加载 Univer，约 20 MB；打开 .docx 时加载对应预览器，使用终端时才加载 xterm。
内嵌浏览器与真实终端
内嵌浏览器
浏览器功能以 Tab 形式存在，可以同时打开多个页面，并提供后退、前进、刷新以及“在浏览器中打开”等操作。页面默认运行在沙箱 iframe 中，不透明源无法访问界面数据和本地文件，同时会拒绝 localhost 等本机地址；界面还会实时显示当前沙箱状态，并允许临时解锁。
部分网站可能通过 X-Frame-Options 或其他策略拒绝 iframe 嵌入，此时项目会显示原因面板，并提供在浏览器中打开的方式。需要注意的是，浏览器沙箱默认不会提供登录态和第三方 Cookie，部分网站的登录需要通过弹窗完成。
真实终端
终端基于 xterm.js 与 node-pty，提供真实 Shell 环境，每个会话最多有 3 个终端 UI。终端 Tab 可以保持连接并在重新进入后回放内容；另外还可以选择向模型注入 8 个 `terminal_*` 工具，让模型具备相应的终端工具调用能力。
Git、后台任务与双工作台
Git 面板提供真实 Diff，并采用类似 VS Code 的 Diff Tab，同时对历史记录采用懒加载方式。文件右键菜单可以执行暂存、放弃、提交、还原和捡取等操作。当前版本的 Git 功能仍有明确边界，README 指出暂时没有 push、pull 和 fetch，同时也没有文件 watcher，因此文件变化需要手动刷新。
后台任务页则把主会话完整 Agent 拓扑展示出来，点击节点可以直接进入对应执行记录，并通过轮询实时查看工具调用。新创建的子代理能够自动展开；同一个页面还会显示当前树中的后台任务，包括 bash 和 pwsh 类型徽标、退出码以及实时输出，查看输出采用非消费式 peek，不会干扰模型的 job_output，连续两次确认后还可以强制终止任务。
底部面板可以看作第二套独立工作台，它与右侧栏使用相同的 Tab 思路，只会挤占中间的 Agent 输出区域，不覆盖左右侧边栏。第一次展开时默认自动打开一个新终端，也可以通过终端卡片的二级设置关闭这个行为。
Tab 可以自由拖拽，甚至允许第三方扩展
dsh-better-sidebar 的工作区并非固定布局，用户可以把 Tab 拖到分栏边缘进行拆分，也可以拖回中间重新合并，并且支持跨面板拖动。分隔线能够调整比例，两个面板还支持通过共享拐角双向调整尺寸。布局、分栏、Tab 以及两个面板的状态都会按会话保存到 localStorage，陈旧状态也会自动清理。
从 v 0.4.0 起，项目暴露了 ctx.betterSidebar 服务，其他插件可以注册自己的侧边栏 Tab 和文件预览器。README 明确说明，内置的 7 个 Tab 和 9 个 viewer 也使用同一套服务机制，这意味着它的扩展能力已经进入项目自身架构，而非简单增加几个预留按钮。
设置、多语言与移动端适配
设置页面通过注册表生成侧边卡片，每项功能都可以独立启用或关闭，子代理自动展开、终端工具、底部面板首次展开是否自动打开终端、浏览器沙箱等二级选项，则可以通过齿轮按钮在原生弹窗中调整。界面支持中英文切换，并优先遵循 DSH Host 的语言设置；切换语言无需刷新页面。
移动端同样进行了专门适配，当视口宽度小于 768 px 时只显示右侧栏，底部面板的 Tab 会直接并入右侧栏标签条，并将面板变成全宽抽屉。进入新会话时默认收起，聊天中点击文件或外链时可以自动展开。需要注意的是，移动端没有独立的底部面板，桌面端的底部工作台只在宽视口下可用。
怎么安装和使用
第一步：确认运行环境
安装前需要先完成 DSH 安装，并确保 dsh web 能够正常运行，同时准备 Node.js 20 或更高版本以及 pnpm 10 或更高版本。项目同时适配 Windows、Linux 和 macOS。
第二步：使用一键安装
macOS、Linux，以及安装了 Git Bash 或 WSL 的 Windows，可以执行项目提供的安装脚本；Windows 也可以直接使用 PowerShell 5.1+ 或 pwsh 安装。安装完成后重启 DSH，并执行 Cmd/Ctrl+Shift+R 硬刷新，即可看到新的侧边栏。
如果担心远程脚本直接执行，可以先下载并审阅仓库中的 scripts/install.sh 或 scripts/install.ps1。README 也提供了 --dry-run 和 PowerShell -DryRun 参数，用于先预览安装步骤。
第三步：开始使用工作台
进入 DSH 后，可以从资源管理器打开项目文件，在编辑器中修改并使用 Ctrl/Cmd+S 保存；需要查看 Git 状态时进入 Git 面板，查看真实 Diff 或执行暂存、提交等操作；需要执行 Shell 命令时打开终端；需要查看后台 Agent 工作状态，则进入后台任务页。Tab 可以根据自己的习惯重新拖动和拆分。
几个比较实用的快捷操作也值得记住：Ctrl/Cmd + S 保存编辑，Ctrl + Enter 执行 Git 提交，鼠标中键关闭 Tab，拖动 Tab 到分栏边缘或中间即可拆分、合并工作区，悬浮文件行尾的 @文件 可以把文件引用到输入框，右键文件则可以复制路径。
我的使用感受
实际体验这个项目时，我觉得它最有意思的地方在于“工作台”这个定位非常明确。单独看资源管理器、终端、Git 或 Markdown 预览，每一项都属于开发环境中比较常见的能力，但把这些内容放进可以自由组织的侧边区域后，整个操作路径会更加连贯，尤其适合需要频繁阅读项目文件、修改代码、运行命令并观察 Agent 工作过程的场景。
我比较喜欢它对 Tab 和分栏的处理方式，因为不同项目的工作习惯往往差异很大，有人喜欢把终端放在底部，有人更习惯让文件和网页并排显示，而这里可以直接通过拖动 Tab 调整布局。第三方插件注册 Tab 和文件查看器的机制也让这个工作台具备了继续扩展的空间。
当然，它仍然有一些需要提前了解的限制，例如 Git 当前没有 push、pull、fetch，文件变化没有 watcher，终端 Tab 跨分栏拖动后会重新挂载并重新打开 Shell，.xlsx 预览也不会保留单元格样式；HTML 预览只渲染已经保存的文件。
总结
dsh-better-sidebar 更适合把 DSH 当作长期开发工作环境使用的人群。它围绕侧边栏建立了一套完整的文件、编辑、预览、浏览器、终端、Git 和 Agent 工作区，同时通过可拖拽 Tab、双面板、会话级状态保存以及第三方注册机制，把工作区的组织权交给用户。对于希望减少开发过程中频繁切换区域的人来说，这种设计确实值得体验。
官方网站
https://github.com/omdsh-dev/DSH-better-sidebar
下载地址
https://pan.quark.cn/s/946deea42716
