产物浏览器 wang-junjian/dsh-artifact-viewer

@wangjunjian/dsh-artifact-viewer

一个 DeepSeek Harness 的 bundle 插件，为 Agent 对话添加产物侧边栏与收藏功能。
该插件不会修改 deepseek-harness 源码；它作为独立插件构建，然后加载到 web profile 中使用。

功能

- 自动检测对话中生成的产物：工具创建或编辑的文件，以及消息中的图片附件。
- 在右侧渲染悬浮面板（注册到 shell.overlay），列出当前会话的产物。
- 允许用户收藏产物；收藏数据由 host 端持久化到 Harness 用户目录 ~/.dsh/storages/artifact-viewer/bookmarks.json。
- 替换默认的消息图片渲染器（conversation.message.images），在图片上叠加收藏星星按钮。
- 拦截会话窗口中的文件链接，包括工具行 .fileLink 按钮、 ui-deliverables 的“产物”标签、结束语中的行内代码文件提及、Markdown 链接（如 sample.html）和行内 路径（如 /Users/.../cat.svg），点击生成的文件时直接在产物面板中打开，而不是调用宿主默认应用。
- 点击产物在面板内以标签页预览，支持 HTML（沙箱 iframe）、Markdown、图片、SVG、JSON 和源代码。
- 通过 workspace API 调用宿主默认应用打开文件，或打开预览产物所在的文件夹。
- 通过标题栏按钮将面板放大到整个窗口；当用户设置了背景图片时，全屏模式会自动使用不透明背景，避免重叠加模糊；纯色背景下仍保留半透明毛玻璃效果。
- 从收藏的文档跳转回生成它的会话：在"收藏"标签页或预览标题栏中点击 "打开对话"按钮即可切换会话。

安装

将插件安装到 DeepSeek Harness 的 profile 中。该插件不会修改 deepseek-harness 仓库本身。

从本地目录安装
dsh plugin --profile web add ~/GitHub/wang-junjian/dsh-artifact-viewer

或者发布之后从 registry 安装
dsh plugin --profile web add @wangjunjian/dsh-artifact-viewer

bundle 会被自动追加到 dsh.profile.bundles。

Cordis 配置

你可以在 profile 的 cordis.patch.yml 中覆盖插件配置：

- id: artifact-viewer
config:
enabled: true

开发

@deepseek-ai/dsh-* 依赖均为 registry 上的常规包（目前是 rc 版本），无需本地检出 deepseek-harness 仓库。

pnpm install
pnpm run typecheck
pnpm run build
pnpm run test
pnpm run lint

项目结构

src/
index.ts # Node/host 端：收藏 + 预览 RPC client/ index.ts # 浏览器端：slot 注册 store.ts # 面板 UI 状态 store locales.ts # 中英文案 current-session.ts # 当前会话快照的 observable 源 bookmarks.ts # 浏览器端收藏控制器 artifacts.ts # 从 ConversationSnapshot 中检测产物 display.ts # 展示/收藏转换辅助函数 ArtifactToggle.tsx # sidebar.footer.action 入口 ArtifactPanel.tsx # shell.overlay 面板 ArtifactList.tsx # 面板内的产物列表 ArtifactPreview.tsx # 选中产物的预览区 ArtifactMessageImages.tsx # conversation.message.images 替换

支持的预览

| 文件类型 | 渲染方式 |
| HTML、HTM | 沙箱 iframe |
| Markdown、MD | Markdown 文本（mermaid 代码块渲染为 SVG 图表） |
| SVG、PNG、JPG、JPEG、WEBP、GIF | 图片 |
| JSON | 语法高亮代码（通过 CodeBlock） |
| 源代码（py、js、ts、jsx、tsx、css、scss、less、rs、go、c、cpp、cc、java、kt、swift、rb、php、sh、sql、xml、yaml、yml、toml、dockerfile、txt、log） | 语法高亮代码 |
| 纯文本 / 未知类型 | 预格式化文本 |
| 视频（mp4、webm、mov） | 仅列出，不内联预览 |

收藏文件格式

收藏数据保存在 DeepSeek Harness 用户目录下： ~/.dsh/storages/artifact-viewer/bookmarks.json。文件按规范化的项目路径分组，多个项目可以共用同一个存储文件但彼此隔离：

{
"version": 1,
"projects": {
"/workspace/project-a": [
{
"id": "file:/workspace/foo.ts:42",
"kind": "file",
"name": "foo.ts",
"path": "/workspace/foo.ts",
"seq": 42,
"sessionId": "",
"createdAt": 1234567890
}
]
}
}

存储位置与跨浏览器一致性

DSH 用户目录通过 @deepseek-ai/dsh-home-paths 解析，优先使用环境变量 $DSH_HOME，否则回退到 ~/.dsh。由于收藏存储在 Harness 用户目录而不是项目目录下，同一项目在不同浏览器（Chrome、Safari 等）中打开时会读取同一个收藏文件，前提是两个浏览器解析出的工作空间路径一致。host 端在把路径用作查询 key 之前会先用 fs.realpath 规范化，因此 macOS 上 /var/folders 和 /private/var/folders 这类符号链接差异不会导致收藏在不同浏览器中分裂。

从旧版本迁移

在此之前的版本把收藏保存在 /.dsh/bookmarks.json。这些文件已不再被读取；如果你已有旧位置的收藏，可以手动迁移到 ~/.dsh/storages/artifact-viewer/bookmarks.json，把它们放到对应项目的规范化路径 key 下，也可以直接在 UI 中重新收藏。

Host RPC 端点

Host 端注册了一个仅本地回环的 RPC 通道 /artifact-viewer：

- bookmarks/read — 返回收藏数组。
- bookmarks/write — 写入收藏数组。
- file/preview — 返回 UTF-8 文本内容，或 base64 编码的二进制数据（用于图片/SVG/HTML），上限 512 KiB。非 UTF-8 的文本文件会被拒绝，避免二进制文件被渲染成乱码。

已知限制

- 面板通过 shell.overlay 悬浮在应用之上；如果 dsh 后续暴露原生的右栏 slot，迁移过去会更合适。
- 收藏图片的预览受限，因为收藏只保存了 attachment id，没有保存完整图片引用。
- 视频文件仅列出，不支持内联预览。
- 在增加 sessionId 字段之前创建的收藏，无法跳转回原始会话。