zoumutou/dsh-web-preview

dsh-web-preview-panel

DeepSeek Harness（DSH）侧边网页预览面板 —— 一个标准 Cordis 插件包（Host + Client 双半）， 把工作区目录托管成 iframe 预览，并支持项目运行、元素标记批注与链接点击接管。

功能

• 侧边预览：对话右上角 ▶ 按钮打开右侧玻璃卡片式预览面板（每个会话独立状态）， 地址栏实时同步、可拖动调宽（挤压对话 → 400px 封顶 → 覆盖模式）
• 本地文件预览：工作区静态文件经 Harness 自身的 HTTP 服务托管 （/__dsh-preview/<sessionId>/...）—— Markdown 渲染、代码带行号、图片直显、 HTML 原样
• 项目运行：自动检测项目类型（Cargo / package.json / go.mod / Python）， ▶ 运行 / ⏹ 停止，日志实时滚动、自动识别 localhost:PORT 并加载预览； 「日志→对话」一键把日志发给 AI 辅助诊断
• 元素标记：🖉 标记模式（悬停手型高亮、点击选取元素、批注气泡、一键发送到对话）， 选择器/HTML 快照自动剥离内部标记类
• 对话框直接拖入文件：把文件拖进对话框即保存到工作区 .dsh-drops/ 并以 路径引用加入草稿（对话框保持干净，AI 按需读取文件内容，上限 64 MB）； 图片单独拖入仍走 DSH 原生图片附件轨，混合拖入时图片同样保存为文件引用
• 链接点击接管：对话里点击 http(s) 链接、相对/绝对文件路径、纯文本路径 （自动转链接，支持 CJK/中文文件名如 docs/候选批准总文档.md） → 全部在侧边打开；Cmd/Ctrl+点击保留浏览器默认行为
• 主题跟随：面板 UI、输入区气泡、代码/Markdown/文件缺失预览页与标记/批注浮层 自动跟随 DSH 白天/夜间主题（body[data-ds-dark-theme] + --dsw-alias-* token， 预览页经 html[data-theme] 同步，切换即时生效，默认回退夜间）
• 会话隔离：每个会话独立的预览状态、根目录（默认当前会话所属工作区）、运行进程

安装

要求 DSH（DeepSeek Harness）Web 版。在 profile 目录（如 ~/.dsh/profiles/web）：

npm install dsh-web-preview-panel

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

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

重启 dsh web 即生效。

开发

npm run build   # 产出 lib/index.js（host）与 lib/client.js（ModuleLoader bundle）

• src/host.js —— Host 半：webServer 路由（静态托管 + POST /api JSON RPC）、 subprocess 项目运行、fs 文件访问
• src/client.js —— Client 半：React 面板 UI、标记/批注、点击接管、会话隔离； 通过 fetch('/__dsh-preview/api') 与 Host 通信

协议

• GET/HEAD /__dsh-preview/<sessionId>/<path> —— 静态文件 / Markdown / 代码 / 图片
• POST /__dsh-preview/upload —— 拖入文件落盘（原始字节，头字段 X-Dsh-Sid / X-File-Name / X-File-Size / X-File-Type，保存到 <root>/.dsh-drops/，上限 64 MB）
• POST /__dsh-preview/api —— { method, args } JSON RPC： set-root pages resolve-path detect-project run-project project-status stop-project state

License

MIT