dsh-visual
在 dsh 对话中以内嵌方式显示交互式可视卡片：模型发布自包含的 HTML（在带有自身脚本的 Shadow DOM 中渲染）或可拖动的流程图；工具会一直阻塞，直到用户提交，之后评论、字段、流程和卡片状态都会作为工具结果返回。
插件会安装到这里；不确定时保持 web。
npx -y @deepseek-ai/dsh plugin --profile web add dsh-visual@0.1.1
Visual 以 dsh-visual 发布，当前版本为 0.1.1。Plugin Hub 会校验它的 manifest，并保存精确安装来源，便于复现安装结果。
Interactive cards inside a DeepSeek Harness conversation. The model publishes a self-contained HTML card (or a draggable flowchart), the tool blocks until the user submits, and the user's click, comments, form fields and card state come back as the tool result.
No assistant text, no chat message, no artifact preview — a real card in the message stream.
visual stays pending until the user submits, so the answer arrives as the tool result and the agent continues in the same turn.<script> runs per card through a small bridge (dshVisual.root, dshVisual.setState), so cards can toggle, validate and prefill themselves.data-visual-action), inputs (data-visual-field), comments and card state are merged into one JSON answer.flow graph instead of HTML: drag nodes, double-click to rename, connect, delete, then hand the edited graph back.timeoutMs and a stop button turn the card read-only instead of hanging forever.dsh plugin --profile desktop add dsh-visual
Restart DeepSeek Harness once so the host half loads. After that, changes to lib/client.js only need a page refresh (⌘R).
For local development, link the directory instead:
dsh plugin --profile desktop add /path/to/dsh-visual
dsh plugin --profile desktop remove dsh-visual # uninstall
Ask for a card in plain language:
用 visual 发一张发布确认卡，让我选版本并留一句备注
The model calls the tool roughly like this:
{
"title": "发布确认",
"height": 360,
"html": "<h3>发 0.1.1 到 npm？</h3><textarea data-visual-field=\"note\"></textarea><button data-visual-action=\"approve\">发</button><button data-visual-action=\"hold\">先别发</button>",
"actions": [{ "id": "approve", "label": "发" }, { "id": "hold", "label": "先别发" }],
"timeoutMs": 600000
}
When the user clicks, the tool returns one answer object:
{
"action": "approve",
"payload": { "fields": { "note": "记得打 tag" } },
"state": { "checks": ["install"] },
"comments": [{ "selector": "h3", "label": "h3", "text": "标题再短一点" }]
}
| Parameter | Type | Description |
|---|---|---|
title | string | Card header title. |
html | string | Complete, self-contained HTML document. Styles are scoped; scripts run per card. |
flow | object | Flow graph {nodes, edges} rendered as an editable canvas instead of HTML. |
data | object | Initial state exposed as dshVisual.data to the card script. |
height | number | Initial card height in px (160–900). The card can resize itself. |
actions | array | Action registry {id, label} for the footer chips and button labels. |
timeoutMs | number | How long to wait for a submit (default 10 min, max 1 h). |
Every field is optional except one of html or flow.
data-visual-action="id" — clicking submits that action together with the fields, state and comments.data-visual-field="name" — read from the card on submit and returned under answer.payload.fields.answer.action = "done"). It never implies approval: review cards should carry an explicit approve/revise action of their own.<script>
(function (dshVisual) {
var state = Object.assign({ on: false }, dshVisual.data || {})
dshVisual.root.querySelector('.toggle').addEventListener('click', function () {
state.on = !state.on
this.textContent = state.on ? '开' : '关'
dshVisual.setState(state) // returned as answer.state
})
})(dshVisual)
</script>
Each card is compiled as new Function('dshVisual', source)(bridge), so parallel cards cannot see each other's state.
Right-click any element inside the card, type a note, and it is pinned with a number. The answer carries them in answer.comments as { selector, label, text }.
When timeoutMs elapses the call returns action: "timeout"; stopping the turn returns action: "cancelled". In both cases the card becomes read-only and its footer explains why.
npm run check # syntax of both entries + docs/code consistency guard
npm pack --dry-run # inspect the published file list
The client half is a hand-written module-loader bundle, so no build step is required.
Publishing is automatic: pushing a v* tag runs the release workflow, which verifies npm run check, publishes to npm with provenance, and opens a GitHub Release.
npm version patch # or minor / major
git push --follow-tags
Publishing uses npm trusted publishing: the workflow exchanges the GitHub OIDC token for a short-lived npm credential, so no NPM_TOKEN secret is stored. Configure it once under the package's Settings → Trusted publishing on npmjs.com (owner MjxUpUp, repository dsh-visual, workflow publish.yml).
MIT © MjxUpUp