使用 DSH-better-sidebar 为 DeepSeek Harness 网页界面增加侧边栏工作台

前言

DeepSeek Harness(命令行工具名为 dsh)是 DeepSeek AI 开源的智能体运行时。官方仓库把它的架构概括成一句话:一切皆插件。模型、工具、会话、沙箱、界面都可以替换或叠加,而不必改核心代码。它目前仍处于 developer preview,接口还会变。

默认用 dsh web 打开的是浏览器里的对话界面。做本地开发时,很多人还是会切到外部编辑器看文件、另开终端跑命令、再用 Git 客户端看 diff。这些能力如果能贴在同一块网页工作区里,来回切换会少很多。

社区插件 DSH-better-sidebar 就是做这件事的:在 DSH 网页界面右侧(以及底部)挂上一套工作台,覆盖文件树、编辑预览、真实终端、Git 面板和子智能体任务,并且把 ctx.betterSidebar 服务开放给其他插件。需要先说清楚来源:它由 GitHub 组织 omdsh-dev 维护,采用 MIT 许可证;本文依据的社区插件目录(https://deepseek-harness-plugin.com)是独立站点,与 DeepSeek / 幻方没有官方从属关系,不要把它理解成官方应用商店。

这是什么

DSH-better-sidebar 是一款面向 DSH 网页端(web profile)的界面增强插件。仓库 README 的定位是「服务化的侧边栏框架,一套开箱即用的完整工作台」:右侧栏加底部面板,内置文件渲染编辑、终端、Git、子智能体等页面;第三方插件可以通过 registerTab / registerFileViewer 注册新的侧边栏页面和文件预览器。

package.json 当前版本是 0.12.3,要求 Node.js ≥ 20,客户端平台声明为 web。仓库创建于 2026-08-07。本文写作当天打开 GitHub 仓库,星标数为 1645;社区目录页同期显示 925,两者可能因缓存不同,以仓库页面为准。

核心功能

根据仓库 README(与目录页介绍一致),已经落地的能力主要包括下面几项。

文件工作台。 资源管理器按需懒加载目录树;软链接按目标类型展示,目录软链接可以展开,失效链接会标红。编辑器用的是 CodeMirror。图片、Markdown、HTML、PDF 可以内联预览。Office 三件套(.docx / .xlsx / .pptx)的预览已从内置能力迁到设置页「推荐插件」,未安装时这类文件会走代码查看或下载兜底。

内嵌浏览器。 可以多开网页 tab,支持后退、前进、刷新。内容跑在沙箱 iframe 里。外链默认按协议分流:HTTP 在侧边栏打开,HTTPS 走系统浏览器,设置页可以分别调整。

真实终端。 基于 xterm.js 和 node-pty,提供真实 shell,断线后可以重连回放。设置项可以自定义 shell,Windows 上会自动探测 pwsh。也可以选择给模型注入 terminal_* 工具。node-pty 加载失败时,插件本身仍会挂载,终端页会给出修复提示,不会把整个服务拖垮。

Git 面板。 提供真实 diff、类似 VS Code 的 diff tab、提交历史,以及右键暂存、提交、还原。内置面板没有 push / pull / fetch。README 的推荐插件目录里有 dsh-git-remotes,专门补远程分支相关操作,并且不替换内置的暂存和提交。

后台任务与子智能体。 后台任务页展示 subagent 拓扑,以及后台任务的退出码、实时输出和强制终止。

双工作台与会话隔离。 右侧栏和底部面板可以同时用;Tab 可以拖到分栏边缘拆分或合并,也可以跨面板拖动。布局、Tab、面板按会话持久化,陈旧状态会自动净化。屏幕宽度小于 768px 时没有底部面板,窄屏下底部标签会一次性并入右侧栏。

按需加载与皮肤。 README 写明启动只拉取约 325KB 核心,终端、编辑器等较重的依赖用到才拉。v0.12.3 起全面消费 DSH 设计令牌,可与 dsh-web-ui 皮肤中心的皮肤一起换肤。界面文案跟随 DSH 语言在中文和英文之间切换。

设置页把各项能力做成「侧边卡片」独立开关,二级选项放在齿轮弹窗里。内置 7 个 tab 和 6 个文件预览器,与第三方插件走同一套 ctx.betterSidebar API,能力对等。

安装与启用

前置条件来自仓库 README:本机已经能跑 dsh web,Node.js ≥ 20,pnpm ≥ 10。插件只声明了 web 平台,不要指望它出现在 headless 配置里。

社区目录页给出的安装命令如下,在 DeepSeek Harness 终端里运行即可:

dsh plugin add github:omdsh-dev/DSH-better-sidebar

如需可复现安装,目录页建议固定 commit 哈希:

dsh plugin add github:omdsh-dev/DSH-better-sidebar#<commit>

把上面的 <commit> 换成仓库里实际的提交哈希。维护者 README 另外给出了按 web profile、从 npm 安装最新版的写法,和目录页是两条通道,选一条即可:

dsh plugin --profile web add dsh-better-sidebar@latest

如果本机还没有 dsh 命令,README 提供的等价写法是:

npx -y --package @deepseek-ai/dsh dsh plugin --profile web add dsh-better-sidebar@latest

装完后对浏览器做一次硬刷新(macOS 上是 Cmd+Shift+R,Windows / Linux 上是 Ctrl+Shift+R)。README 说明:DSH 对 client 改动会热加载,一般不必重启;只有 host 半更新时才需要重启 dsh

目录页和 README 都提醒:插件以当前 dsh 进程的权限运行,安装时可能执行代码。安装前应检查源代码仓库和许可证。不要同时走 npm / GitHub 安装和 dsh registry 两条通道,README 写明同时启用会双挂载,页面上会出现两个侧边栏。如果已经出现这种情况,检查 ~/.dsh/profiles/web/cordis.patch.yml 里是否还留着旧的手动挂载行,删掉其中的 better-sidebar 插入段。

pnpm 11 可能拦截构建脚本,报 Ignored build scripts。按 README,在 profile 目录(~/.dsh/profiles/web)执行:

pnpm approve-builds --all

终端提示 node-pty 加载失败时,同样在该目录执行 README 给出的修复命令,完成后重启 DSH 再点终端页的重试:

pnpm approve-builds --all && pnpm rebuild node-pty

Windows 下如果当前 Node 版本没有对应的 node-pty 预编译二进制,需要安装 VS Build Tools 才能编译。找不到 profile 目录时,先跑一次 dsh web,让它初始化 ~/.dsh/profiles/web

典型用法

硬刷新后,网页右侧应出现侧边栏。日常操作可以按 README 里的快捷键来:

操作 按键
保存编辑 Ctrl/Cmd + S
Git 提交 Ctrl + Enter
关闭 Tab 鼠标中键
拆分或合并分栏 把 Tab 拖到分栏边缘或中间
引用文件到输入框 悬浮行尾的 @文件 按钮
复制文件路径 右键行,复制相对或绝对地址

标签页栏支持鼠标滚轮横向滚动。设置页可以逐项关掉不需要的侧边卡片;Windows 上如果原生标题栏挡住了右上角按钮,可以打开「位置兼容模式」,为标题栏预留顶部空间。

文件树里打开文本会进编辑器,打开图片、Markdown、HTML、PDF 会走对应预览。HTML 预览渲染的是已保存文件,不会反映编辑器里还没保存的草稿。浏览器 tab 被 X-Frame-Optionsframe-ancestors 拒绝嵌入的站点(README 举例 arxiv.org)会显示原因面板,并提供「在浏览器中打开」。

Git 面板适合看 diff、暂存和提交。远程同步请不要默认假设内置面板能做,需要的话再按设置页推荐目录安装对应扩展。

给其他插件注册侧边栏页面

从 v0.4.0 起,插件把 ctx.betterSidebar 暴露给同一进程里的其他插件。下面这段来自仓库 README,是最小的 tab 注册例子:

import type {} from 'dsh-better-sidebar'  // 触发 ctx.betterSidebar 类型合并
export const inject = ['betterSidebar']
export function apply(ctx: Context) {
  ctx.effect(() => ctx.betterSidebar.registerTab({
    id: 'my-plugin:db',
    title: 'Database',
    component: ({ scope }) => <DbView sessionId={scope.sessionId} />,
  }))
}

要点有三条。第一,服务只在浏览器侧的 client half 上存在,host 半没有 ctx.betterSidebar。第二,要用 import type {} from 'dsh-better-sidebar' 做类型合并,外部插件才能在 Context 上看到这个服务。第三,注册调用放进 ctx.effect,卸载或热更新时会自动撤销。

v0.12 以后还补了能力探测(version / features)、状态订阅、tab 角标、onOpen / onActivate / onClose 生命周期、updateTab / activateTab / openFile、以及插件自己的设置项。完整字段和匹配算法以仓库里的 AGENTS.mddocs/external-plugin-guide.md 为准。

设置页「侧边卡片」网格末尾的虚线卡片会打开 Tab / 预览插件弹窗,里面有推荐插件目录,可以复制安装命令。README 里点名的扩展包括 Git 远程 Tab(dsh-git-remotes)和视频内联预览(dsh-video-preview)。社区里用 GitHub topic dsh-better-sidebar 可以发现更多扩展。

适用场景与注意事项

比较适合这几类用法:已经在用 dsh web 做本地编码或排障,希望文件、终端、Git 不必离开对话页;需要看智能体改了哪些文件、子智能体跑到哪一步;或者自己在写 DSH 插件,想往侧边栏挂一个页面或一种文件预览。

使用前注意下面这些限制,均来自仓库 README,不是推测。

  • Git 内置面板没有 push / pull / fetch,也没有文件 watcher,目录变化需要手动刷新。
  • 终端 Tab 拖到另一分栏会重挂载,shell 会重开。
  • 浏览器沙箱没有完整登录态,第三方 Cookie 受限;部分站点需要弹窗登录。地址栏会拒绝 javascript:data:file: 以及 localhost 等本机地址。
  • 媒体和预览路由只允许会话工作目录内的文件;Git 只调用 CLI,不会在仓库里写入用户身份。
  • 可以在设置里关掉 HTML / 浏览器沙箱,关闭后内容与界面同源。README 写明仅建议对完全可信的内容使用。
  • 平台声明覆盖 Windows / Linux / macOS。README 说明 macOS 为日常验证环境,其余主要靠单元测试覆盖。
  • 工具行里的「打开文件」按钮目前拦截不到。

安全方面再重复一次:插件与当前 dsh 进程权限相同,能读工作区、开终端、调 Git。安装前应阅读源码和 MIT 许可证,生产或敏感仓库上建议固定 commit 或 npm 版本,而不是长期追 @latest

小结

DSH-better-sidebar 把文件、编辑预览、终端、Git 和子智能体收进 DSH 网页的右侧栏与底部面板,并把同一套注册接口开放给其他插件。它是社区维护的 MIT 项目,不是 DeepSeek 官方内置功能。安装和能力边界以目录页与仓库 README 为准,遇到终端或双挂载问题,优先按 README 的常见问题表排查。

目录页:https://deepseek-harness-plugin.com/zh-CN/plugins/dsh-better-sidebar/

GitHub:https://github.com/omdsh-dev/DSH-better-sidebar

羽毛球分组比赛记分
小程序二维码

欢迎使用《羽毛球分组比赛记分》微信小程序

小夜