前言¶

在 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 倉庫。