产物画布 MexxiUK/dsh-artifacts

DeepSeek Harness Artifact Canvas

在侧边面板里渲染 HTML、Markdown、SVG、代码和交互式选项 —— 带语法高亮、划选提问，还有可扩展的插件 API。

DeepSeek Harness Artifact Canvas rendering an artifact in the side panel

Artifact Canvas 给 DeepSeek Harness 加了一个渲染后的产物查看器。模型做出网页、文档或代码文件时，画布会在专门的侧边面板里渲染它，而不是把原始文本一股脑倒进对话。

目录

- 问题
- 这个插件解决了什么
- 包
- 工作原理
- 划选提问
- 扩展性
- 安装
- 构建
- 已知限制

问题

DeepSeek Harness 是强大的编程智能体，却没有一种原生方式去展示模型产出的东西。生成的 HTML 页面、Markdown 报告或代码文件，在对话里都只是纯文本。你没法渲染它、查看它，也没法就其中某一部分提问。

这个插件解决了什么

这个插件在 details 栏里加了一块专门的 Artifact 画布。模型通过新的 artifact 工具写入产物，画布实时渲染。你可以：

- 渲染 HTML、Markdown、SVG、代码和交互式选项，在沙箱化、可滚动的面板里。
- 交互式头脑风暴 —— AI 能把选项并排展示成可视化界面；选一个，继续往下走。
- 保持对话干净 —— 产物显示为一张紧凑卡片（图标、标题、操作提示），而不是一大段代码或内联渲染的页面。
- 带语法高亮读代码（shiki）—— 不用再看纯文本。
- 划选提问 —— 在任意区域拖一个矩形，就这块内容问模型。
- 用控制台调试 —— 捕获 HTML 和 options 产物里的 JS 错误，在控制台面板里查看。
- 一键修复 —— 点一下魔杖按钮，让模型检查并修复产物。
- 扩展它 —— 其他插件通过子插槽添加渲染器、工具栏按钮和面板。
- 追踪存活状态 —— 徽章标出当前产物和旧版本的区别。
- 切换版本 —— 画布标题栏的下拉菜单可以逐个查看产物的每个版本。
- 会话互相隔离 —— 产物留在自己的对话里；切换聊天绝不会串出来。
- 进入全屏 — 把画布扩展到整个视口，再按一次还原。
- 在产物中查找 — Cmd/Ctrl+F 搜索源码并高亮匹配项。
- 复制你看到的内容 — 复制渲染后的文本（Markdown/HTML）或原始源码。
- 下载每个版本 — 下载单个版本，或一次性下载全部版本。
- 使用键盘快捷键 — Esc 关闭，Cmd/Ctrl+Enter 发送问题，Cmd/Ctrl+F 查找。
- 在宽布局中工作 — 画布打开时约占视口 55%，可调整到约 70%。

| 没有画布 | 有画布 |
| HTML、Markdown、SVG、代码和选项在聊天里以原始文本出现 | 在专用侧边面板中渲染 |
| 没有语法高亮 | 每种语言都有 shiki 语法高亮 |
| 无法针对某一部分提问 | 拖选任意区域，向模型提问 |
| 输出千篇一律 | 可扩展的渲染器、界面框架和面板 |
| 不知道哪个是最新 | 实时徽标标出最新产物 |
| 没有版本历史 | 逐个查看产物的每个版本 |
| 无法在产物中查找文本 | Cmd/Ctrl+F 搜索并高亮匹配项 |
| 产物会跨会话泄漏 | 产物留在各自的对话中 |

包

| 包 | 层面 | 作用 |
| packages/artifact | 宿主 + 浏览器 | 一个插件，两个入口：lib/index.js 注册 artifact 工具和一段系统提示词（智能体层面）；lib/client.js 注册画布、产物卡片、渲染器、选择并提问循环和实时徽标（浏览器）。 |
| packages/client-ui-layout | 浏览器 | 宽详情布局，安装时根据已安装的 dsh-client-ui-layout 生成。 |

工作原理

1. 模型调用 artifact，传入 action: create 和产物源码。
2. 工具把产物信封存入工具结果的 meta。信封包含 artifact_id、title、type、content、language 和 version。
3. 产物卡片读取 meta。它显示标题和操作提示（「点击查看」）。卡片让聊天保持整洁——内容本身不会内联渲染。
4. 点击卡片会选中产物，并调用 ctx.layout.openDetails()。侧边面板打开。它用 MarkdownText 渲染 Markdown，把 HTML 和选项放进沙箱 iframe，把 SVG 作为图片渲染，或用 CodeBlock 渲染源码。
5. 预览 / 代码 开关在渲染视图和原始源码之间切换。代码视图显示语法高亮。高亮使用产物的 language。

flowchart LR
Model[Model] -->|artifact tool| Tool[artifact tool]
Tool -->|presentationMeta| Meta[tool result meta]
Meta --> Card[artifact card]
Card -->|click| Canvas[canvas]
Canvas -->|renders| Out[HTML / Markdown / SVG / code / options]
Canvas -->|select-and-ask| Model

选择并提问

画布右下角的浮动操作栈里有一个 Select 按钮。点击按钮进入选择模式。十字准星覆盖层会覆盖预览。拖动鼠标画出矩形。松开后弹出窗口。输入问题或描述问题。按 Enter 或点击 Send —— 也可以在画布任意位置按 Cmd/Ctrl+Enter。

画布会提取选区下方的文本。对于 Markdown 和代码，它提取文本。对于 HTML，它报告区域几何信息。iframe 是不透明源，父级无法读取其文本。画布把文本和你的问题作为排队的用户消息喂给模型。

可扩展性（子插槽）

画布声明四个子插槽。其他插件用这些插槽扩展画布。

| 插槽 | 类型 | 插件添加的内容 |
| artifact.renderer | 按 artifact type 键控 | 新渲染器。内置：html、markdown、code、svg、options。 |
| artifact.interaction | 列表 | iframe 的 postMessage 处理器。 |
| artifact.chrome | 列表 | 工具栏按钮和状态指示器。 |
| artifact.panel | 列表 | 额外面板和标签页。 |

像注册任何 DSH 插槽一样注册到插槽：

ctx.slots.inject("artifact.renderer", () =>
ctx.slots.register({ name: "artifact.renderer", key: "mermaid" }, MermaidRenderer),
);

交互循环

HTML artifact 在不透明源的 iframe 中运行。artifact 可以向父级发送 postMessage({ v: 1, type: "artifact:select", value, label })。画布检查 event.origin === "null"，以及 event.source 是 artifact 自己的 iframe。然后它把选区作为排队的用户消息喂给模型。

控制台

HTML 和 options artifact 的源码中会注入一小段错误捕获脚本。它把 JavaScript 错误、未处理的 promise rejection、console.error 调用和资源加载失败报告回画布。浮动操作栈中的控制台按钮会打开控制台面板，列出这些内容。

同一栈中的魔法棒按钮会让模型修复 artifact。有捕获到的错误时，它发送错误列表；没有时，它让模型检查 artifact 的视觉或布局问题。

活跃状态

画布把选中的 artifact 标记为 Live（绿色，脉动），只要它是最新的那个。它把较旧的 artifact 标记为 Older（弱化）。

安装

快速安装

运行安装脚本：

./install.sh

脚本复制三个包，修补配置档，并创建 artifact 智能体预设。作为预设基础，它使用你已安装的 DeepSeek Harness 自带的 standard 预设（这样能匹配你的版本），回退到本仓库中附带的冻结副本。它是幂等的 —— 再次运行即可重新安装或获取变更。然后重启 DeepSeek Harness：

ollama launch dsh

手动安装

1. 把包安装到 $DSH_HOME/profiles/node_modules/@dsh-artifact/。
2. 把客户端插件添加到 $DSH_HOME/profiles/web/cordis.patch.yml。details 注册会遮蔽内置的 DetailsPanel。它以 priority: -10 注册。不要依赖加载顺序。加载器按并行。同一个槽位上，同一优先级的两个注册会抛错，并中止插件加载。
3. 在 $DSH_HOME/.agent-presets/artifact/ 创建智能体预设 artifact。
它是 standard 的副本，再加上 artifact 那一行。把它设为默认。
4. 安装布局 @dsh-artifact/client-ui-layout。通过补丁层把它换进来。禁用随包发布的 ui-layout 行。把这个分支作为 ui-layout-wide 插入。安装器会从已安装的 dsh-client-ui-layout 重新生成它，只打一个小补丁，因此它能跟上正在运行的 DSH 版本。

构建

用 esbuild 构建客户端 bundle。bundle 使用 window.__ModuleLoader__.load 格式。

cd packages/artifact
npx esbuild src/client.tsx \
--bundle --format=cjs --jsx=automatic \
--external:react --external:react/jsx-runtime \
--external:@deepseek-ai/dsh-client-ui-primitives \
--outfile=lib/client.js \
--banner:js='window.__ModuleLoader__.load({ id: "@dsh-artifact/artifact", factory: (require) => { var module = { exports: {} }; var exports = module.exports;' \
--footer:js='return module.exports; } });'

重启以生效

服务器会热重载补丁层。每次请求都会重新读取 bundle 文件。所以改补丁和 bundle 只需刷新页面。服务器在启动时读取 package.json 元数据（dsh.client.inject）。这里一改，就得完整重启 ollama launch dsh。在那之前，过期的 inject 提示无害。cordis 运行时会把每个插件的 apply 推迟到它所需的服务就位之后。

已知限制

- 一次只能选中一个 artifact。
- HTML 在不透明来源的沙箱里运行脚本，CSP 很严格，会阻断网络访问（远程脚本、样式、图片，以及 fetch/XHR）。
- 本地化是硬编码的英文。
- 内置的交互循环只处理 artifact:select。其他消息类型走 artifact.interaction 槽位。画布目前还不能把消息发回 iframe。
- 宽详情布局在安装时生成，方式是给已安装的 dsh-client-ui-layout 打补丁。如果 DSH 改动了被补丁的代码，安装器会退回使用本仓库随附的冻结副本。