前言¶

在 DeepSeek Harness（DSH）里跑代理会话时，模型会通过 write、edit 或 shell 命令在工作区里产生文件。主对话区适合看推理与工具调用，但想快速浏览「这次会话改了哪些文件」、点开预览、或把路径写回输入框，往往要在终端和编辑器之间来回切。

下面介绍 e2mcc 维护的 dsh-popout-sidebar：在 Web UI 右上角提供常驻「产物」侧边栏，列出代理产物与文件树，支持多类型预览，并可一键弹出为独立浏览器标签页——拖到另一块显示器上也能更大、更清晰地查看。它与其他 sidebar 插件可同时显示，不必二选一。

这是什么¶

dsh-popout-sidebar（GitHub：e2mcc/dsh-popout-sidebar）是 DSH 生态中的客户端插件，当前版本 1.0.1，许可证 MIT，要求 Node >= 20。

一句话定位：给 DSH Web UI 增加展示产物（artifacts）与文件树的侧边栏，并可弹出为独立浏览器标签页。

插件已收录进 DSH 插件生态，可通过 awesome-dsh-plugin.com 详情页 或 dsh-market（DSH 内：设置 → Plugin Market）安装。社区目录 SkillHub 亦有收录。

核心功能¶

产物追踪与预览¶

侧边栏实时列出代理通过 write / edit 创建或修改的文件，以及 bash / pwsh 命令在工作区里间接产生的文件（例如脚本生成的图片）。列表与预览区之间的分界线可拖动调整。

预览按文件类型区分：

• 代码 / 纯文本：语法高亮 + 行号
• Markdown：渲染显示
• 图片、PDF：浏览器原生查看
• HTML：沙箱 iframe
• 超长内容自动截断

edit 修改过的文件在预览里展示「删除 / 新增」改动片段对比。

文件树¶

侧边栏与独立标签页内都有「文件树」，可浏览当前工作区目录（懒加载展开，点击文件即预览），并实时跟随工作区切换。

弹出为独立标签页¶

点击面板右上角 ↗，侧边栏弹出为独立网页标签页（路由 /popout-sidebar），每 1.5s 自动刷新，可拖到另一块显示器上观看。独立标签页刻意固定为浅色配色；如需深色，可在地址后手动加 ?scheme=dark。

复制与引用¶

列表行悬浮时可一键复制文件路径，或把 @path 引用写入会话输入框。

与其他 sidebar 兼容¶

其他「侧边卡片」打开时，本侧边栏自动让位到其左侧，两者同时可见。

设置与清除¶

DSH 设置面板新增「Popout Sidebar」选项卡，可开关默认展开、自动刷新、文件树，设置最短面板宽度等（存于浏览器 localStorage，键 dsh-popout-sidebar:settings）。右上角进入清除模式后，点击产物标红，再点红色 × 可移除列表条目（仅移除条目，不动磁盘文件）。

安装与启用¶

前置：DSH 已装好，dsh web 能正常运行。

通过插件市场（推荐）¶

先安装市场插件：

dsh plugin --profile web add dshmarket

重启 dsh web 后，打开 设置 → Plugin Market，搜索 popout 或 sidebar，点「安装」。

通过注册表直接安装¶

dsh plugin --profile web add github:e2mcc/dsh-popout-sidebar

装完后重启 dsh web 并硬刷新浏览器（Cmd/Ctrl+Shift+R），界面右上角出现常驻「产物」图标按钮（无会话时也可见）。

包内 cordis.patch.yml 让 CLI 自动挂进 dsh.profile.bundles；client 半由 package.json 的 dsh.client.platform: "web" 自动发现并加载。

更新¶

从 GitHub 源码安装时，更新按 commit 比对。命令行：

dsh plugin --profile web update dsh-popout-sidebar

随后重启 dsh web 并硬刷新浏览器。通过 dsh-market 安装时，市场会比对本地锁定 commit 与仓库 HEAD，有新提交即提示更新。

典型用法¶

静态安装后的日常操作¶

1. 启动 DSH Web UI，点击右上角「产物」图标展开侧边栏。
2. 在会话中让代理 write 或 edit 文件，或执行会产生文件的 shell 命令；侧边栏列表会自动更新（面板打开时默认每 2s 拉取，可在设置里开关「自动刷新」）。
3. 点击列表中的文件，在下方预览区查看内容；edit 过的文件可看 diff。
4. 需要更大视野时，点面板右上角 ↗ 打开 /popout-sidebar 独立标签页，拖到第二显示器。
5. 切换「文件树」标签页浏览工作区目录，点击文件即预览。
6. 悬浮列表行，复制路径或插入 @path 到输入框继续对话。
7. 点击右上角「产物」图标收起面板。

动态加载（临时，进程级）¶

适合临时试用，无需写入 profile。在 Harness 会话中：

1. 调用 cordis_define：code.host 填 src/host.js 的 return { ... } 主体；code.client 填 src/client.js 的 return { ... } 主体。
2. 调用 cordis_run 激活返回的 pluginId / packageId。
3. 点击「产物」按钮；点面板右上角 ↗ 打开独立标签页。

两种模式下 host 与 client 都通过 /popout-sidebar/* HTTP 路由通信，行为一致。

工作原理概要¶

Host（Node 进程） 监听 tools/result 追踪 write / edit，监听 tools/execute 对 bash / pwsh 做工作区前后快照对比，把间接产生的文件并入产物列表；通过 harness.handle 暴露 RPC，通过 webServer.register 提供 /popout-sidebar 系列路由。

Client（浏览器） 在 shell.overlay 注册右上角常驻按钮与浮动面板，订阅 session store，并通过跨标签页 localStorage 同步当前会话，使侧边栏与独立标签页的文件树行为一致。

设置项¶

在 DSH 设置（左下角 ⚙️）的「Popout Sidebar」选项卡：

右上角的「产物」图标、独立标签页按钮 ↗、以及自动让位到其他侧边栏左侧，均为常驻行为，无需开关。

适用场景与注意¶

适合谁： 经常在 DSH Web UI 里跑长会话、需要盯产物列表、预览 Markdown/代码/图片、或想把侧边栏拖到第二块屏的开发者。

权限与安全： 插件以当前 dsh 进程权限运行，能读取工作区文件并通过 HTTP 路由提供预览。安装前应查看 源码 与 MIT 许可证，确认符合你的环境策略。

生态说明： DSH 理念是「一切皆插件」；SkillHub、awesome-dsh-plugin、dsh-market 等社区目录为独立站点，与 DeepSeek / 幻方无官方从属关系。

本地开发可将插件目录以符号链接安装：

dsh plugin --profile web add /绝对路径/dsh-popout-sidebar

改 src/ 后重启服务并硬刷新即可；修改源码后需 npm run build 重新生成 bundle。

结尾¶

dsh-popout-sidebar 把「会话产物 + 文件树 + 多类型预览」收进可弹出的侧边栏，解决主界面信息密度不足、跨屏查看不便的问题，且与其他 sidebar 并存。若你已在用 DSH Web UI，可按上文命令安装，重启并硬刷新后即可从右上角「产物」按钮开始用。

• 目录页：https://www.skillhub.cn/plugins/e2mcc/dsh-popout-sidebar
• GitHub：https://github.com/e2mcc/dsh-popout-sidebar