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 字段之前创建的收藏，无法跳转回原始会话。