前言¶

在 DeepSeek Harness（DSH）的工作流中，智能体通常以 Markdown 文档的形式输出项目进度。这种方式存在两个问题：一是信息结构化程度低，难以进行深层查询；二是每次查看都需要重新贴入，无法形成常驻面板。@demxyuanli/dsh-canvas 插件通过引入编译型画布，让智能体以 .canvas.tsx 文件的形式编写项目看板，宿主端实时编译并渲染到工作区右侧，面板上的操作可以回流给智能体。

是什么¶

这是一个适配 DeepSeek Harness 的项目看板插件。其核心价值在于将“给人看的产物”从散文式的 Markdown 转变为可编译、可交互的结构化面板。智能体编写画布代码，宿主编译后渲染，面板上的数据可被 Agent 读取或回写。

架构：单包双半¶

该插件采用单包双半架构，一个包同时包含 Host（Node 端）和 Browser（浏览器端）逻辑。

• Host（Node 端）：负责画布的实时编译（使用 sucrase）、内容寻址、画布发现与 watch、以及与 Agent 的交互。
• Browser（浏览器端）：零依赖，仅允许引入 React。负责渲染画布组件，并在右栏以 Tab 形式展示。

核心功能¶

• 五类画布范式：支持任务跟踪、门禁对齐、迁移进度、方案对比、审计对账。
• 意图入口集成：集成 Harness 原生意图入口（agent/pre-step）。支持强名词（如“看板”）和弱名词（如“项目文档”）触发。命中时会生成 intake 指引，协助用户对齐口径。
• 结构化数据与 Context 节省：画布数据结构化可查询。canvas_read 接口支持切片（dataPath / filter / ids / limit），可大幅节省 Agent 的 context。
• 真实门禁执行：门禁执行走真实的 ctx.shell，支持白名单与沙箱策略，而非模型自述。
• 数据回流：面板上的决定可以回流给 agent。

安装与启用¶

该插件通过 npm 注册表分发。在 Harness 侧栏的“插件”面板中，直接粘贴包名即可完成安装，Host 会自动读取并加载。

pnpm add @demxyuanli/dsh-canvas

安装后需重启 Harness。Host 半边在启动时加载，浏览器半边按包名动态加载。

使用示例¶

• 触发意图：用户说“建个项目的 canvas”或“看板”时，会触发意图入口，并生成 intake 指引。
• 创建画布：使用 canvas_new(path, 'audit') 创建审计画布。
• 组件导入：画布代码只能通过 import 'dsh/canvas' 引入组件，不是通用前端框架。

注意事项¶

• 定位：它不是 todo_write 或 goal 的替代品。前者适合短任务，后者负责决策是否继续下一轮。
• 安全性：画布代码即插件信任级别，存在沙箱风险。
• 配置限制：compileTimeoutMs 配置项当前实现未生效。
• 白名单策略：commandWhitelist 默认为空，意味着拒绝所有命令。

结尾¶

该插件适合需要长期跟踪、结构化展示以及需要真实 Shell 执行权的复杂工作流场景。如需查看更多示例或源码，请访问插件目录或 GitHub 仓库。