前言¶

DeepSeek Harness（DSH）Web 版通过插件扩展界面与交互。对经常和 AI 一起改代码的开发者来说，实际工作里常见的问题不只是“能不能生成代码”，而是如何快速查看工作区里的 Markdown、代码、图片、HTML，运行本地项目并查看日志，再把相关上下文交回对话。

dsh-web-preview-panel 针对这些动作做了一块侧边面板：本地静态托管、项目运行、元素标记批注、链接点击接管、对话框直接拖入文件，以及 Markdown/代码/图片预览。

这是什么¶

这是一个用于 DSH Web 的插件，package.json 中 name 字段为 dsh-web-preview-panel，仓库地址为 https://github.com/zoumutou/dsh-web-preview。

它把当前会话所属工作区里的静态资源通过 DSH 自身的 HTTP 服务托管，并在对话界面右侧打开预览面板。许可证为 MIT。

核心功能¶

侧边预览¶

点击对话右上角的 ▶ 按钮，可打开右侧玻璃卡片式预览面板。

• 每个会话有独立状态。
• 地址栏会实时同步。
• 面板宽度可拖动，顺序为“挤压对话 → 400px 封顶 → 覆盖模式”。

本地文件预览¶

工作区静态文件通过 Harness 自身的 HTTP 服务托管，路径形如：

/__dsh-preview/<sessionId>/...

支持：

• Markdown 渲染
• 代码带行号
• 图片直显
• HTML 原样显示

项目运行¶

插件可自动检测以下项目类型：

• Cargo
• package.json
• go.mod
• Python 项目

支持运行与停止、日志实时滚动。运行后如果能识别到 localhost:PORT，可加载预览；也可以把日志发给 AI 辅助诊断。

元素标记与批注¶

在标记模式下，可以：

• 悬停高亮
• 点击选取元素
• 显示批注气泡
• 一键发送到对话

选择器或 HTML 快照会自动剥离内部标记类。

对话框直接拖入文件¶

把文件拖入对话框后，文件会保存到工作区：

.dsh-drops/

然后以路径引用加入草稿。

• 图片单独拖入时，仍走 DSH 原生图片附件轨。
• 混合拖入时，图片也会保存为文件引用。
• 上传上限为 64 MB。

上传接口为：

POST /__dsh-preview/upload

请求头包含：

• X-Dsh-Sid
• X-File-Name
• X-File-Size
• X-File-Type

链接点击接管¶

对话中的以下内容都可以在侧边打开：

• http(s) 链接
• 相对/绝对文件路径
• 纯文本路径

路径支持 CJK/中文文件名。按住 Cmd 或 Ctrl 再点击时，保留浏览器默认行为。

主题跟随与会话隔离¶

面板 UI、输入区气泡、代码/Markdown/文件缺失预览页，以及标记/批注浮层会跟随 DSH 的白天/夜间主题，切换即时生效，默认回退夜间。

每个会话独立以下状态：

• 预览状态
• 根目录，默认当前会话所属工作区
• 运行进程

安装与启用¶

要求 DSH Web 版。

先在 profile 目录（如 ~/.dsh/profiles/web）执行安装：

npm install dsh-web-preview-panel

然后在 cordis.patch.yml 中挂载插件：

- insert:
    - name: dsh-web-preview-panel

最后重启：

dsh web

经过上面的步骤后，插件即可在 DSH Web 中启用。

package.json 中还声明了以下依赖与客户端信息：

• @deepseek-ai/cordis: ^4.0.1
• react: ^18.2.0
• dsh.client.inject:
• @deepseek-ai/dsh-client-runtime
• @deepseek-ai/dsh-client-connection
• @deepseek-ai/dsh-client-ui-slots
• @deepseek-ai/dsh-client-locale
• dsh.client.platform: web

如果本地构建，可以执行：

npm run build

产出：

• lib/index.js
• lib/client.js

典型用法¶

下面是从安装到日常使用的常见路径：

1. 在 profile 目录执行：

   npm install dsh-web-preview-panel

2. 在 cordis.patch.yml 中挂载：

   - insert:
       - name: dsh-web-preview-panel

3. 重启：

   dsh web

4. 在对话右上角点击 ▶ 按钮，打开右侧预览面板。
5. 在侧边预览中查看 Markdown、代码、图片、HTML。
6. 运行项目时，插件自动识别 localhost:PORT 并加载预览。
7. 把文件拖入对话框，文件会保存到工作区 .dsh-drops/，并以路径引用加入草稿。
8. 在对话中点击链接、相对/绝对文件路径或纯文本路径，在侧边打开。
9. 在标记模式下选取元素、写批注，并把结果发送到对话。
10. 将项目日志发给 AI，用于辅助诊断。

适用场景与注意¶

适合使用 DSH Web，并希望把以下动作集中到同一个侧边面板中的开发者：

• 查看工作区里的 Markdown、代码、图片、HTML
• 运行本地项目并查看日志
• 标记页面元素并把上下文交给 AI
• 把文件直接拖入对话框
• 在对话与预览之间保持会话隔离

需要注意：

• 该插件以当前 DSH 进程权限运行。
• 它会处理工作区静态文件、运行本地项目、接收拖入文件。
• 安装前应检查源码与许可证。
• 拖入文件上限为 64 MB。
• 许可证为 MIT。

结尾¶

dsh-web-preview-panel 的价值在于把本地文件预览、项目运行、元素批注、文件拖入和链接接管集中到 DSH 的侧边面板中，适合需要在对话、工作区和本地项目之间频繁切换的场景。

仓库地址：https://github.com/zoumutou/dsh-web-preview