dsh-html-live-preview
在 DeepSeek Harness 对话中实时预览 HTML：提供 render_html 工具，以及内联、沙箱化、自动调整大小的渲染器。
插件会安装到这里；不确定时保持 web。
npx -y @deepseek-ai/dsh plugin --profile web add github:Weihong-Liu/dsh-html-live-preview#44c254a60c77dfc53ceacff0f2493eb69d707f1e
Html Live Preview 以 dsh-html-live-preview 发布，当前版本为 1.0.1。Plugin Hub 会校验它的 manifest，并保存精确安装来源，便于复现安装结果。
Live HTML preview inside DeepSeek Harness conversations. The model calls one tool, and the HTML it writes is rendered in the chat as it streams — not as a code block, and not in a side panel.
A preview that stays under the reply once the turn is done
<script> runs once, in document order, after the markup is final. Buttons, animations, charts and canvas all work.--dsw-* / --dsh-* design tokens plus a set of readable aliases, and follows light/dark switches live.dsh web (verified against 0.1.7-rc.2 and 0.2.0-rc.1).@deepseek-ai/dsh-tools as a peer, so DSH refuses to load it on a runtime outside that range instead of failing at the first call.From the registry, into the profile that runs your Web UI:
dsh plugin --profile web add dsh-html-live-preview
The same operation is available in the Web UI under Plugins. Installation selects the bundle, so the row mounts on the next composition (HMR applies it live).
From a checkout of this repository:
dsh plugin --profile web add link:/absolute/path/to/dsh-html-live-preview
Then start a new session: an existing session keeps the tool catalog it was composed with, so the tool appears in the next one.
render_html is registered in the tools registry's global layer, so every agent in the profile can call it — no agent-preset edit needed.
Ask for something visual, in any wording:
"Draw a bar chart of this week's latency" "Mock up a login page and make the button do something" "Animate how quicksort partitions this array"
The model calls render_html({ html, title?, height? }). The card offers four controls on hover: show the HTML source, copy it, re-run scripts, and expand the height (the frame is capped at 620px by default so a single preview cannot swallow the transcript).
Host half (index.js) validates the call, caps the snippet at 256 KiB, and returns a receipt of a few tokens. The markup itself stays in the recorded tool/call arguments, so reopening a session replays the preview at no extra storage or context cost.
Browser half (client.js) is a plain classic script in DSH's client-module factory form — no build step, and nothing imported beyond the seeded react:
| Surface | When | Why |
|---|---|---|
tool.call.toolview | while the turn runs | streams the preview from the partially-written arguments |
conversation.chat.turnTail | after the turn closes | the tail is outside the folded process disclosure, so the preview survives |
The frame itself:
srcdoc — CSP, theme variables and a measurement script. Model HTML never becomes the document; it arrives over postMessage, so streaming updates never reload the frame.on* attributes are stripped before injection (markup inserted through innerHTML does not run <script>, but an <img onerror> does). Once the call settles, the complete markup is injected and its scripts run exactly once, waiting for each external script to load.sandbox="allow-scripts" with no allow-same-origin, so the frame is an opaque origin. The in-frame CSP is default-src 'none', connect-src 'none' (no fetch/XHR/WebSocket), frame-src/object-src 'none', base-uri/form-action 'none'; inline scripts, four CDNs (jsdelivr, unpkg, cdnjs, esm.sh) and data:/https: images and fonts are allowed. Links are forwarded to the host and opened externally after a scheme check.ResizeObserver inside the frame reports its content height (60 ms debounce); the card clamps it, caches it per call id so a remount never collapses to zero, and grows. Content beyond the cap keeps its own scrollbar and can be expanded to 2400px.Verified against a real DSH Web instance with real model calls, on 0.1.7-rc.2 and re-verified on 0.2.0-rc.1 (screenshots in screenshots/): the tool row renders the call, the turn tail keeps previews under their replies after those turns closed, heights came back measured (490px / 260px), and the console stayed clean.
The renderer itself is covered by test/harness.html, a standalone page that loads this plugin's client.js against real React and exercises streaming, finalizing, sanitizing, height caps, expansion, the source view, theme switching and in-frame error reporting:
mkdir -p /tmp/hp && cd /tmp/hp
cp /path/to/dsh-html-live-preview/client.js .
cp /path/to/dsh-html-live-preview/test/harness.html .
curl -sO https://unpkg.com/react@18.3.1/umd/react.development.js
curl -sO https://unpkg.com/react@18.3.1/umd/react-dom.development.js
open harness.html
renderCode inside ui-primitives is hard-coded), so ```html stays a code block. A tool call is the supported path.^0.1.7-rc.2 || ^0.2.0-rc.1, covering the 0.1.x and 0.2.x lines. A runtime outside it disables this plugin with a message naming the mismatch and the dsh plugin allow-version escape hatch, rather than breaking at the first call; adding a verified line is a one-line change.Tag-driven: npm version patch && git push origin main --follow-tags makes GitHub Actions verify the tag against the manifest, publish to npm through Trusted Publishing (with a provenance attestation), and open a GitHub release. See RELEASING.md.