dsh-plugin-canvas-pro

Readme

# dsh-plugin-canvas-pro

Canvas-Pro for [DeepSeek Harness](https://github.com/deepseek-ai/deepseek-harness): a Web drawer plus eight model tools for creating, patching, versioning, and exporting canvas artifacts.

## What it does

After install, the Web session header gets a **Canvas** button. The agent can create HTML, Markdown, Mermaid, SVG, or React artifacts; the drawer previews them in a sandboxed iframe.

Model tools:

| Tool | Purpose |
| --- | --- |
| `create_canvas_artifact` | Create an artifact |
| `update_canvas_artifact` | Patch by selection, line range, or overwrite |
| `get_canvas_selection` | Read the latest preview selection |
| `get_canvas_artifact` | Read current content |
| `list_canvas_versions` | List snapshots |
| `revert_canvas_artifact` | Restore a previous snapshot as a new version |
| `diff_canvas_artifact` | Unified or split diff between versions |
| `export_canvas_artifact` | Export markdown, html, svg, png data URL, or json |

Selecting text in the preview opens Explain / Refactor / Fix / custom prompt actions and submits them into the current chat.

## Compared with open-source DSH plugins

Sources are the plugins' own listings on [awesome-dsh-plugin](https://github.com/awesome-dsh-plugin/awesome-dsh-plugin). This table only covers claims that those listings make and that this repo implements.

| | [dsh-live-canvas](https://github.com/GooDAnDReaDY/dsh-live-canvas) | [dsh-canvas-preview](https://github.com/jiuyuechuwuhao/dsh-canvas-preview) | [dsh-generative-ui](https://github.com/CNSeniorious000/dsh-generative-ui) | Canvas-Pro |
| --- | --- | --- | --- | --- |
| What it is | Live sandbox for HTML / React / Vue / SVG / Mermaid / Markdown | Conversation tab that previews workspace HTML | Streaming TSX UI inline or in a side canvas | Artifact workspace: drawer + eight model tools |
| Agent tools | Preview-oriented | `canvas_preview`-style HTML preview | Agent writes TSX; cards can run bash / curl / model / files | `create` / `update` / `get` / `get_selection` / `list_versions` / `revert` / `diff` / `export` |
| Partial edit | Not the product focus | Typically whole HTML | New TSX frames | `replace_selection`, `replace_range`, `full_overwrite` |
| Selection → next turn | DOM click inspector | Not listed | Click on a card drives the next chat turn | Explain / Refactor / Fix / custom prompt from a text selection |
| Versions | Side-by-side visual diff | Not listed | State kept across stream frames | Snapshot history, revert as a new version, unified and split line diff |
| Export | Vite ZIP | Local PNG / JPG / SVG | Not listed | Markdown, standalone HTML, SVG, PNG rasterization (SVG fallback), JSON archive |
| Persistence | Session / HMR | Workspace HTML files | In-memory UI state | `$DSH_HOME/storages/canvas-pro/artifacts.json` |
| Drawer | Preview surface | Conversation tab | Inline + side canvas | Resizable overlay; chat turns do not force it open |

Same-name plugins that are **not** competitors here:

- [dsh-agent-canvas](https://github.com/Lhy723/dsh-agent-canvas) — Agent / Subagent / Workflow graph, not document artifacts.
- [dsh-ark9canvas](https://github.com/Aik358/dsh-ark9canvas) — image generation workbench.
- [dsh-web-artifact-designer](https://github.com/xulelenlp/dsh-web-artifact-designer) — a skill that writes HTML/SVG files, not a live drawer.

Where the others are stronger:

- **live-canvas**: real React / Vue / Mermaid runtimes, SSE hot reload, device matrix, Vite ZIP.
- **canvas-preview**: first-class PNG / JPG export from workspace HTML.
- **generative-ui**: streaming TSX compile, no extra tool schema, clicks inside a card start the next turn.

Where Canvas-Pro is stronger for DSH artifact work:

1. **Patch instead of regenerate.** The agent can replace a selected span or a line range. Preview plugins usually take a new full document.
2. **Text selection is a first-class agent input.** The drawer posts the span into the current composer; the host can also read it via `get_canvas_selection`.
3. **Version time machine.** Each patch is a snapshot; the agent can list, diff, and revert without rewriting the file from scratch.
4. **Export is a model tool**, not only a UI button: markdown / html / svg / png / json from `export_canvas_artifact`.
5. **Local artifact store** survives Web restarts under `$DSH_HOME`.

Not claimed: richer live React/Mermaid than live-canvas; streaming TSX than generative-ui; raster PNG/JPG reliability than canvas-preview.

## Install

```bash
dsh plugin --profile web add github:lokih1028/dsh-plugin-canvas-pro
```

Restart the Web profile, then refresh the GUI.

## Config

```yaml
- id: canvas-pro
  name: dsh-plugin-canvas-pro
  config:
    maxHistoryPerArtifact: 50
    enableReactPreview: true
```

Artifacts are stored under `$DSH_HOME/storages/canvas-pro/artifacts.json` when `DSH_HOME` is set.

## Limits

- React artifacts currently show source in the preview sandbox; they are not executed as a live React tree.
- Mermaid artifacts show source unless you convert them to HTML.
- PNG export tries a browser rasterization of the SVG preview; if that fails it falls back to SVG.
- Selection line numbers come from the rendered preview, not always from source lines. Prefer `replace_selection` over `replace_range` when the two disagree.

## License

MIT