@khorsheed/dsh-inline-html-render 0.1.13

package/CHANGELOG.md

@@ -0,0 +1,5 @@
+# 变更记录
+
+## 未发布
+
+- 从 `@khorsheed/dsh-file-preview` 接管 `3d-artifact` 作者 skill；两个 bundled skill 现在都通过既有的延迟 skills 注入注册，provider 统一为 `inline-html-render`。

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 dsh-plugins contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.en.md

@@ -0,0 +1,79 @@
+# @khorsheed/dsh-inline-html-render
+
+[English](README.en.md) | 中文
+
+A plugin that lets the agent render **interactive HTML cards** directly in the conversation. When the agent writes a ` ```dsh-card ```` fenced block, the plugin swaps that region in the middle of the message flow for a **sandboxed iframe** running the authored HTML — genuinely inline and interactive, not ASCII art or a prose description.
+
+```dsh-card
+<div style="font:14px system-ui;padding:16px;background:#1e1e1e;border-radius:10px;color:#eee">
+  <div style="font-weight:600;margin-bottom:8px">design token reference</div>
+  <div style="display:flex;gap:8px">
+    <span style="background:#4f8cff;color:#fff;padding:4px 10px;border-radius:6px">primary</span>
+    <span style="background:#2ea043;color:#fff;padding:4px 10px;border-radius:6px">success</span>
+    <span style="background:#d29922;color:#fff;padding:4px 10px;border-radius:6px">warning</span>
+  </div>
+</div>
+```
+
+In the session, that is not a code block — it is a rendered card.
+
+## Features
+
+- **Inline in the middle of the paragraph** — the card sits exactly where the agent wrote it, flowing naturally with the surrounding text.
+- **Truly interactive** — the card runs in a `sandbox="allow-scripts"` iframe and supports arbitrary DOM/CSS/JS interaction (hover, click, tab switching, inline SVG/canvas animation).
+- **Zero-invasive to official code** — it only mutates the DOM the official client has **already rendered** (inserts an iframe beside the rendered `.md-code-block` and hides that block); no official source is touched. Without this plugin the ` ```dsh-card ```` block simply degrades to a normal code block, never crashing.
+- **Strict sandbox** — a CSP is injected (`connect-src 'none'`), so the card's scripts cannot reach the network or the host. Only three controlled `window.dshBridge.openLink / copy / download` capabilities are exposed.
+
+## Install
+
+Not in the default web bundle; install and mount with one command (self-mounting via `dsh.bundle`):
+
+```sh
+dsh plugin --profile <p> add @khorsheed/dsh-inline-html-render      # install
+dsh plugin --profile <p> remove @khorsheed/dsh-inline-html-render   # uninstall
+```
+
+## Authoring for the agent
+
+The host half registers the two HTML-authoring protocols, `inline-html-card` and `3d-artifact` (both with provider `inline-html-render`). Whenever the user wants a **visible result** ("show me", "preview", "make me a card", "compare these visual options", a clickable widget) rather than a paragraph of text, the agent picks up this protocol. Core constraints (see the skills):
+
+- Exactly one fenced block whose info string is exactly `dsh-card`; use **three** backticks ( ``` ), never four — four backticks or a nested fence make the parser read it as an outer block and the card never renders.
+- Self-contained content: inline CSS/JS, `data:` URIs for images, zero external network.
+- Never reach the host — use `window.dshBridge` for opening links / copying / downloading.
+
+## Compatibility
+
+- npm release line (`@deepseek-ai/dsh@0.1.2-rc.1`): ✅ full — this plugin consumes only standard DOM + the client runtime `ClientContext`; the `.md-code-block` wrapper, its banner info-string display, and the `data-streaming` attribute that `ui-conversation` renders are unchanged on 0.1.2-rc.1; minHost moves up to 0.1.2-rc.1 — older hosts stay on the previous release line.
+- source line (deepseek-harness master): ✅ (verifiedHost: 0.1.2-rc.1)
+
+## Known limitations
+
+- **Depends on official rendered DOM details** — the renderer locates blocks via the `.md-code-block` wrapper and the leading `dsh-card` text in its banner (this release's official CodeBlock renders a hashed banner wrap with no stable `.infostring` class; also compatible with an explicit `.infostring` element), and aligns streaming completion via `AssistantMarkdown`'s `data-streaming`. This is the repo-accepted last-resort DOM-anchor pattern (same shape as message-tools' dom-hider). If the official client changes the wrapper class, the banner text shape, or the info-string placement, the MutationObserver fallback path must be re-verified.
+- **No network in the sandbox** — card scripts cannot `fetch`/load external resources (even whitelisted CDNs are not allowed; stricter than file-preview's Tier1). For network-bearing visuals use file-preview's HTML render path instead.
+- **Auto-height iframe** — the iframe is sized to its content height; rare dynamically-growing layouts may need a manual `data-dsh-card` re-mount.
+
+## Implementation
+
+<details>
+<summary>Internal structure (expand)</summary>
+
+- `src/index.ts` (node half) — registers the `inline-html-card` and `3d-artifact` skills (`skills` service optional; stays pending when absent).
+- `src/client/` (browser half, `/plugins/inline-html-render/client.js`):
+
+| Module | Responsibility |
+| --- | --- |
+| `renderer.ts` | A `MutationObserver` watches the DOM; for each `.md-code-block` whose info string is `dsh-card` (an explicit `.infostring` or the banner's leading text), reads the `<pre>` text (the raw HTML), inserts an iframe beside the block, hides the block; never mounts while streaming (`data-streaming` present), re-scans once it settles. |
+| `srcdoc.ts` | Wraps the card HTML into a full document carrying the strict CSP + `dshBridge` (`srcdoc`). |
+| `bridge.ts` | Host-side validation of iframe messages (source window + whitelist + arg shape), answering `openLink/copy/download`. |
+
+**Why a sibling instead of replacing the node**: React owns the markdown tree, so a bare `removeChild` would make React's reconciliation fight the DOM (potentially throwing or resurrecting the block). So this plugin never removes a React node — it inserts the iframe as a sibling **after** the block, hides the block with `style.display='none'` (a style React does not manage), and re-scans with a MutationObserver on every change. When React replaces a node (rebuilding it on content change), the new block is caught and hidden again.
+
+**Streaming alignment**: while a turn runs, `AssistantMarkdown` sets `data-streaming` on its root and the block content is partial and re-rendered. The plugin only mounts when there is no `[data-streaming]` ancestor, so a card never renders on a half-streamed body. When the turn ends, React re-renders, removes `data-streaming`, and rebuilds the block; the observer swaps then.
+
+**For plugin authors** — the card protocol is pull-based (a skill), not pushed to every session. Just write self-contained HTML inside ` ```dsh-card ````.
+
+</details>
+
+## License
+
+MIT

package/README.md

@@ -0,0 +1,79 @@
+# @khorsheed/dsh-inline-html-render
+
+[English](README.en.md) | 中文
+
+让 agent 直接在对话正文里渲染**可交互的 HTML 卡片**的插件:agent 写一个 ` ```dsh-card ```` fenced block,插件把这一段在消息流中间替换成**沙箱 iframe** 运行其 HTML——真正的内联、可交互,而不是 ASCII 图或一句描述。
+
+```dsh-card
+<div style="font:14px system-ui;padding:16px;background:#1e1e1e;border-radius:10px;color:#eee">
+  <div style="font-weight:600;margin-bottom:8px">设计 token 对照</div>
+  <div style="display:flex;gap:8px">
+    <span style="background:#4f8cff;color:#fff;padding:4px 10px;border-radius:6px">primary</span>
+    <span style="background:#2ea043;color:#fff;padding:4px 10px;border-radius:6px">success</span>
+    <span style="background:#d29922;color:#fff;padding:4px 10px;border-radius:6px">warning</span>
+  </div>
+</div>
+```
+
+上面这段在会话里不是一个代码块,而是一张渲染出来的卡片。
+
+## 特性
+
+- **内联在段落中间**——卡片就长在 agent 写它的位置,与文字自然衔接。
+- **真正可交互**——卡片在 `sandbox="allow-scripts"` 的 iframe 里,支持任意 DOM/CSS/JS 交互(hover、点击、tab 切换、内联 SVG/canvas 动图)。
+- **零侵入官方**——只改写官方**已经渲染出来的 DOM**(在渲染后的 `.md-code-block` 旁插入 iframe 并隐藏原块),不改一行官方源码。没有本插件时,` ```dsh-card ```` 退化成普通代码块,零崩溃。
+- **严格沙箱**——注入 CSP(`connect-src 'none'`),卡片脚本无法联网、无法访问宿主。仅开放 `window.dshBridge.openLink / copy / download` 三个受控能力。
+
+## 安装
+
+不在默认 web bundle 中;一条命令完成安装并挂载(通过 `dsh.bundle` 自挂载):
+
+```sh
+dsh plugin --profile <p> add @khorsheed/dsh-inline-html-render      # 安装
+dsh plugin --profile <p> remove @khorsheed/dsh-inline-html-render   # 卸载
+```
+
+## 给 agent 的写法
+
+host 半边注册了同属 HTML 作者协议的 `inline-html-card` 与 `3d-artifact` 两个 skill（provider 均为 `inline-html-render`）。只要用户想要**看得见的结果**(比如 "show me / 预览 / 做个卡片看看 / 对比几个视觉效果 / 想要个能点击的小组件",而不是读一段文字),agent 就会套用这个协议。核心约束(详见 skill):
+
+- 恰好一个 fenced block,info string 严格为 `dsh-card`;**用三个反引号 ```,不要用四个反引号嵌套**(嵌套会被解析成外层代码块,卡片不渲染)。
+- 内容自包含:CSS/JS 内联,图片用 `data:` URI,零外部网络。
+- 不要访问宿主——用 `window.dshBridge` 做外链/复制/下载。
+
+## Compatibility
+
+- npm 发布线（`@deepseek-ai/dsh@0.1.2-rc.1`）：✅ 完整——本插件只消费标准 DOM + 客户端运行时 `ClientContext`，`ui-conversation` 渲染出的 `.md-code-block` / banner infostring 显示位 / `data-streaming` 结构在 0.1.2-rc.1 上无变化；minHost 前移至 0.1.2-rc.1，旧宿主请停留在旧发布线。
+- 源码线（deepseek-harness master）：✅（verifiedHost: 0.1.2-rc.1）
+
+## 已知限制
+
+- **依赖官方渲染 DOM 细节**——渲染器靠 `.md-code-block` 包裹及其 banner 里 info string 的**前导文本** `dsh-card`(本版本官方 CodeBlock 用 hash banner 包裹,没有稳定的 `.infostring` 类;also 兼容显式 `.infostring` 的元素)和 `AssistantMarkdown` 的 `data-streaming` 定位并对齐流式结束。这是仓库接受的 last-resort DOM-anchor 模式(与 message-tools 的 dom-hider 同型)。官方若改动 wrapper 类名、banner 文本形状或 info string 位置,需要用 MutationObserver 的降级路径复核。
+- **沙箱无网络**——卡片脚本不能 fetch/外链资源(白名单 CDN 也不放行,比 file-preview 的 Tier1 更严)。需要联网的画面请用 file-preview 的 HTML 渲染链路,而非本插件。
+- **iframe 高度自适应**——卡片渲染后按其内容高度自动撑开;极少数动态撑高的场景可能需手动触发 `data-dsh-card` 重新挂载。
+
+## 实现原理
+
+<details>
+<summary>内部结构(点击展开)</summary>
+
+- `src/index.ts`(node 半边)——注册 `inline-html-card` 与 `3d-artifact` skill（`skills` 服务可选，缺失时保持 pending）。
+- `src/client/`(浏览器半边,`/plugins/inline-html-render/client.js`):
+
+| 模块 | 职责 |
+| --- | --- |
+| `renderer.ts` | `MutationObserver` 监控 DOM;对每个 info string 为 `dsh-card` 的 `.md-code-block`(显式 `.infostring` 或 banner 前导文本),读取 `<pre>` 文本(原始 HTML),在块旁插入 iframe、隐藏原块;流式未结束(`data-streaming` 存在)时不挂载,结束后重扫。 |
+| `srcdoc.ts` | 把卡片 HTML 包成带严格 CSP + `dshBridge` 的完整文档(`srcdoc`)。 |
+| `bridge.ts` | 宿主侧校验 iframe 消息(来源窗口 + 白名单 + 参数形状),响应 `openLink/copy/download`。 |
+
+**为什么插 sibling 而不是替换节点**:React 拥有 markdown 树,直接 `removeChild` 会让 React 的 reconciliation 与 DOM 打架(可能抛错或让原块复活)。所以本插件**从不删 React 的节点**——把 iframe 作为兄弟节点插入该块之后,再把块 `style.display='none'`(一个 React 不管的样式),并用 MutationObserver 在每次变更后重扫。React 替换节点时(内容变化重建节点),新的块同样被捕获、再次隐藏。
+
+**流式对齐**:回合运行时,`AssistantMarkdown` 在根上设 `data-streaming`,块内容是部分且会被重渲染。插件只在无 `data-streaming` 祖先时挂载,杜绝在半截内容上渲染。回合结束 React 重渲染时会移除 `data-streaming` 并重建块,observer 此时才真正替换。
+
+**给插件作者**——卡片协议是拉取式(skill),不推给每个会话。你只需照 ` ```dsh-card ```` 写自包含 HTML。
+
+</details>
+
+## License
+
+MIT

package/cordis.patch.yml

@@ -0,0 +1,8 @@
+# inline-html-render bundle patch: inserts the plugin row into the composing
+# profile. The client half is discovered through the package.json dsh.client
+# block; this row activates the host half (the inline-html-card skill
+# registration). The `name` value must stay quoted — `@` is a YAML-reserved
+# indicator and an unquoted scalar fails the parse at boot.
+- insert:
+    - id: inline-html-render
+      name: '@khorsheed/dsh-inline-html-render'

package/lib/client.js

@@ -0,0 +1,421 @@
+window.__ModuleLoader__.load({
+	id: "@khorsheed/dsh-inline-html-render",
+	factory: (require) => {
+		var module = { exports: {} };
+		var exports = module.exports;
+		Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+		//#region src/client/srcdoc.ts
+		/**
+		* Sandboxed srcDoc builder for inline HTML cards.
+		*
+		* The parent web shell has no Content-Security-Policy of its own and an
+		* iframe's `srcdoc` is not served as an HTTP response, so CSP inheritance
+		* cannot be relied on — the policy must be embedded IN the document. This
+		* helper guarantees exactly that for both shapes of input:
+		*
+		* - a bare fragment (no `<html>`/`<head>`) is wrapped into a full document
+		*   whose head carries the CSP and the capability bridge;
+		* - a full document keeps its own structure and gets the CSP meta injected
+		*   right after its `<head …>` tag (skipped when it already declares one,
+		*   e.g. a skill-compliant output that embeds the same policy).
+		*
+		* The sandbox is `allow-scripts`, NEVER `allow-same-origin` — the opaque
+		* origin is what keeps the frame's scripts from touching the host, and the
+		* CSP is the network/capability boundary. This is deliberately stricter than
+		* file-preview's Tier1 (no whitelisted CDNs): an inline card should never
+		* reach the network at all.
+		* @module @khorsheed/dsh-inline-html-render
+		*/
+		/** Strict sandbox CSP: no network, no navigation, scripts only inline. */
+		const CARD_CSP = "default-src 'none'; script-src 'unsafe-inline'; style-src 'unsafe-inline'; img-src data: blob:; font-src data:; connect-src 'none'; worker-src blob:; object-src 'none'; base-uri 'none'; form-action 'none'";
+		/** The capability bridge client, injected into the document. Exposes a tiny
+		* `window.dshBridge` (openLink / copy / download) backed by postMessage; the
+		* host validates every call. It also reports the document's content height on
+		* load (and on resize) so the parent can size the cross-origin iframe — the
+		* parent cannot read `contentDocument` on an opaque-origin frame, so the height
+		* must be posted from inside. No network and no host access exist outside
+		* these messages. */
+		const BRIDGE_SCRIPT = `<script id="dsh-inline-bridge">
+(function () {
+  var seq = 0
+  function call (fn, args, target) {
+    return new Promise(function (resolve, reject) {
+      var id = 'dshb' + (++seq)
+      function on (e) {
+        if (e.data && e.data.id === id) {
+          removeEventListener('message', on)
+          if (e.data.ok) resolve(e.data.result)
+          else reject(new Error(e.data.error || 'bridge call failed'))
+        }
+      }
+      addEventListener('message', on)
+      parent.postMessage({ id: id, fn: fn, args: args }, '*')
+    })
+  }
+  window.dshBridge = {
+    openLink: function (url) { return call('openLink', [url]) },
+    copy: function (text) { return call('copy', [text]) },
+    download: function (name, dataUrl) { return call('download', [name, dataUrl]) }
+  }
+  function report () {
+    // documentElement.scrollHeight reflects the viewport height, so a short
+    // card leaves a blank gap below. document.body.scrollHeight is the actual
+    // content height the card occupies. Use it, with documentElement only as a
+    // fallback for a body that holds no laid-out content of its own.
+    var bodyH = document.body ? document.body.scrollHeight : 0
+    var h = bodyH
+    if (h <= 0 && document.documentElement) h = document.documentElement.scrollHeight || 0
+    if (h > 0) parent.postMessage({ fn: 'resize', args: [h] }, '*')
+  }
+  if (document.readyState === 'complete') report()
+  else addEventListener('load', report)
+  addEventListener('resize', report)
+})()
+<\/script>`;
+		/** The CSP meta tag. */
+		const CSP_META = `<meta http-equiv="Content-Security-Policy" content="${CARD_CSP}">`;
+		const HEAD_OPEN = /<head[^>]*>/i;
+		const HAS_CSP = /http-equiv=["']Content-Security-Policy/i;
+		/**
+		* Wrap or annotate an untrusted HTML document so it runs inside the sandbox CSP.
+		* @param content - the card HTML, as authored inside the fenced block.
+		* @returns a complete document carrying the strict CSP and the bridge.
+		*/
+		function buildCardSrcDoc(content) {
+			const headExtras = BRIDGE_SCRIPT;
+			const head = HEAD_OPEN.exec(content);
+			if (head === null) return `<!doctype html><html lang="zh"><head><meta charset="utf-8">${CSP_META}${headExtras}</head><body>${content}</body></html>`;
+			const headInjection = (HAS_CSP.test(content) ? "" : CSP_META) + headExtras;
+			return content.slice(0, head.index + head[0].length) + headInjection + content.slice(head.index + head[0].length);
+		}
+		//#endregion
+		//#region src/client/bridge.ts
+		/** The default link route: a new window, https only enforced by the caller. */
+		function openLinkInWindow(url) {
+			window.open(url, "_blank", "noopener,noreferrer");
+		}
+		/**
+		* Each handler runs with validated args and may throw; errors become an error reply.
+		* @param capabilities - the install's wired capabilities (openLink falls back to a new window).
+		*/
+		function handlersFor(capabilities) {
+			return {
+				openLink: (args) => {
+					const url = String(args[0] ?? "");
+					if (!/^https:/i.test(url)) throw new Error(`openLink: only https: targets are allowed (got ${url.slice(0, 40)})`);
+					(capabilities.openLink ?? openLinkInWindow)(url);
+				},
+				copy: async (args) => {
+					const text = String(args[0] ?? "");
+					if (text.length > 1e6) throw new Error("copy: text too large");
+					try {
+						await navigator.clipboard.writeText(text);
+					} catch {
+						fallbackCopy(text);
+					}
+				},
+				download: (args) => {
+					const name = String(args[0] ?? "download");
+					const dataUrl = String(args[1] ?? "");
+					if (!/^data:/i.test(dataUrl)) throw new Error("download: only data: URLs are allowed");
+					const anchor = document.createElement("a");
+					anchor.href = dataUrl;
+					anchor.download = name;
+					anchor.click();
+				}
+			};
+		}
+		/** execCommand copy fallback for contexts without the async clipboard API. */
+		function fallbackCopy(text) {
+			const area = document.createElement("textarea");
+			area.value = text;
+			area.setAttribute("readonly", "");
+			area.style.position = "fixed";
+			area.style.opacity = "0";
+			document.body.appendChild(area);
+			area.select();
+			try {
+				document.execCommand("copy");
+			} finally {
+				area.remove();
+			}
+		}
+		function reply(frame, message) {
+			frame.contentWindow?.postMessage(message, "*");
+		}
+		/** Cap on the reported height, guarding against a runaway or adversarial card. */
+		const MAX_FRAME_HEIGHT = 2e4;
+		/**
+		* Listen for bridge/height messages from one controlled iframe.
+		* @param frame - the card iframe; only its window's messages are honored.
+		* @param capabilities - wired host capabilities; absence keeps browser defaults.
+		* @returns a disposer removing the listener.
+		*/
+		function attachBridge(frame, capabilities = {}) {
+			const handlers = handlersFor(capabilities);
+			const onMessage = (event) => {
+				if (event.source !== frame.contentWindow) return;
+				const data = event.data;
+				if (data === null || typeof data !== "object") return;
+				const id = data.id;
+				const fn = data.fn;
+				if (fn === "resize") {
+					const args = Array.isArray(data.args) ? data.args : [];
+					const height = Number(args[0] ?? 0);
+					if (Number.isFinite(height) && height > 0) frame.style.height = `${Math.min(Math.ceil(height) + 1, MAX_FRAME_HEIGHT)}px`;
+					return;
+				}
+				if (typeof id !== "string" || typeof fn !== "string") return;
+				const handler = handlers[fn];
+				if (handler === void 0) {
+					reply(frame, {
+						id,
+						ok: false,
+						error: `unknown bridge function: ${fn}`
+					});
+					return;
+				}
+				const args = Array.isArray(data.args) ? data.args : [];
+				Promise.resolve().then(() => handler(args)).then(() => reply(frame, {
+					id,
+					ok: true,
+					result: void 0
+				}), (error) => reply(frame, {
+					id,
+					ok: false,
+					error: error instanceof Error ? error.message : String(error)
+				}));
+			};
+			addEventListener("message", onMessage);
+			return () => removeEventListener("message", onMessage);
+		}
+		//#endregion
+		//#region src/client/renderer.ts
+		/**
+		* Inline card renderer: finds the rendered `.md-code-block` whose infostring is
+		* `dsh-card` and replaces its visual slot with a sandboxed iframe running the
+		* authored HTML, inline in the conversation flow.
+		*
+		* React owns the markdown tree, so this plugin NEVER removes a node React
+		* created — that would make React's reconciliation fight the DOM and could
+		* throw or resurrect the block. Instead it inserts the iframe as a SIBLING
+		* right after the block and hides the block (`display:none`, a style React
+		* does not manage), then re-applies on any mutation. Because React replaces
+		* nodes (it does not reuse them across a re-render of changed content), each
+		* replacement is detected fresh and re-hidden; the data marker on the *block*
+		* keeps one block from being processed twice in a single pass.
+		*
+		* Streaming gate: while a turn is running, `AssistantMarkdown` sets
+		* `data-streaming` on its root and the block content is partial and will be
+		* re-rendered. We only swap settled blocks (no `[data-streaming]` ancestor),
+		* so a card never mounts on a half-streamed body. On settle, React re-renders
+		* the markdown, which removes `data-streaming` and re-creates the block; the
+		* observer sees that and swaps then.
+		*
+		* @module @khorsheed/dsh-inline-html-render
+		*/
+		/** Info string that marks a fence as an inline card. */
+		const CARD_INFO_STRING = "dsh-card";
+		/** Marker set on the block once it has been swapped, making a pass idempotent. */
+		const PROCESSED_ATTR = "data-dsh-card-processed";
+		/** The injected iframe's class, for cleanup. */
+		const FRAME_CLASS = "dsh-inline-card-frame";
+		/** Attribute used to find the bridge-ready frame and its disposer. */
+		const BRIDGE_ATTR = "data-dsh-bridge";
+		/** True when one `.md-code-block` was authored with the `dsh-card` info string.
+		*
+		* The official `CodeBlock` renders the fence info string in the banner, but the
+		* DOM shape is not a stable contract: some builds render a dedicated
+		* `.infostring` element, while this release flattens the banner wrap
+		* (`_bannerWrap_…`) whose leading text is `<info>复制` (info string first, then
+		* the localized copy label), with no `.infostring`. So we match on the block's
+		* leading text: the info string is always rendered before the code body, and a
+		* normal code block cannot begin with `dsh-card` unless it was authored that
+		* way. Prefer the explicit `.infostring` element when present, then fall back
+		* to the text prefix.
+		*/
+		function isCardInfoBlock(block) {
+			const explicit = block.querySelector(".infostring");
+			if (explicit !== null) return explicit.textContent?.trim() === CARD_INFO_STRING;
+			return block.textContent.trimStart().startsWith(CARD_INFO_STRING);
+		}
+		/** Find every rendered `dsh-card` block under `root`. */
+		function findCardBlocks(root) {
+			const out = [];
+			for (const node of root.querySelectorAll(".md-code-block")) if (isCardInfoBlock(node)) out.push(node);
+			return out;
+		}
+		/** True when the block (or an ancestor) is inside a still-streaming message. */
+		function isStreaming(node) {
+			return node.closest("[data-streaming]") !== null;
+		}
+		/** Extract the authored HTML from a card block's `<pre>` text body. */
+		function readCardHtml(block) {
+			return (block.querySelector("pre")?.textContent ?? "").replace(/\n$/, "");
+		}
+		/**
+		* Render one card block: read the HTML, build a sandboxed srcDoc, insert the
+		* iframe after the block, hide the block, and attach the capability bridge.
+		* @param block - the rendered `dsh-card` block.
+		* @param capabilities - wired host capabilities handed to the bridge.
+		* @returns a {@link MountedCard} or null when the block had no content.
+		*/
+		function mountCard(block, capabilities) {
+			const html = readCardHtml(block);
+			if (html.trim() === "") return null;
+			const frame = document.createElement("iframe");
+			frame.className = FRAME_CLASS;
+			frame.setAttribute("sandbox", "allow-scripts");
+			frame.setAttribute("title", "inline card");
+			frame.srcdoc = buildCardSrcDoc(html);
+			frame.style.display = "block";
+			frame.style.width = "100%";
+			frame.style.height = "auto";
+			frame.style.border = "none";
+			block.parentNode?.insertBefore(frame, block.nextSibling);
+			block.style.display = "none";
+			block.setAttribute(PROCESSED_ATTR, "");
+			const disposeBridge = attachBridge(frame, capabilities);
+			frame.setAttribute(BRIDGE_ATTR, "");
+			const dispose = () => {
+				disposeBridge();
+				frame.remove();
+				block.removeAttribute(PROCESSED_ATTR);
+			};
+			return {
+				block,
+				frame,
+				dispose
+			};
+		}
+		/**
+		* Drop frames whose owning block is gone. React may replace a processed block
+		* with a fresh node (a re-render of the settled markdown); the old block's
+		* frame then has no matching block before it and would sit orphaned. A frame
+		* is owned by the immediately-preceding `.md-code-block` carrying the
+		* processed marker that paired with it — so a frame not preceded by exactly
+		* that is stale. Reactive re-scanning keeps the two in lockstep.
+		*/
+		function collectCardFrames(root) {
+			return [...root.querySelectorAll(`.${FRAME_CLASS}`)];
+		}
+		/** Remove every card frame whose predecessor block is no longer its partner. */
+		function dropOrphanFrames(root, mounted) {
+			for (const frame of collectCardFrames(root)) {
+				const prev = frame.previousElementSibling;
+				if (prev instanceof HTMLElement && prev.classList.contains("md-code-block") && prev.hasAttribute(PROCESSED_ATTR)) continue;
+				frame.remove();
+				for (const card of mounted) if (card.frame === frame) {
+					mounted.delete(card);
+					break;
+				}
+			}
+		}
+		/** Reconcile: swap every unprocessed, settled `dsh-card` block under `root`, then drop orphans. */
+		function reconcile(root, capabilities = {}) {
+			const mounted = [];
+			for (const block of findCardBlocks(root)) {
+				if (block.hasAttribute(PROCESSED_ATTR)) continue;
+				if (isStreaming(block)) continue;
+				const card = mountCard(block, capabilities);
+				if (card !== null) mounted.push(card);
+			}
+			return mounted;
+		}
+		const CHAT_ROOT = "[data-conversation-scroll]";
+		/**
+		* Install the inline-card renderer over the document.
+		* @param capabilities - wired host capabilities handed to every card's bridge.
+		* @returns a {@link CardRenderer} whose `dispose` tears everything down.
+		*/
+		function installCardRenderer(capabilities = {}) {
+			const nextFrame = typeof requestAnimationFrame === "function" ? requestAnimationFrame : (cb) => {
+				setTimeout(cb, 0);
+			};
+			const cancelFrame = typeof cancelAnimationFrame === "function" ? cancelAnimationFrame : (id) => {
+				clearTimeout(id);
+			};
+			const mounted = /* @__PURE__ */ new Set();
+			const run = () => {
+				const root = document.querySelector(CHAT_ROOT) ?? document.body;
+				for (const card of reconcile(root, capabilities)) mounted.add(card);
+				dropOrphanFrames(root, mounted);
+			};
+			let raf = 0;
+			const schedule = () => {
+				if (raf !== 0) return;
+				raf = nextFrame(() => {
+					raf = 0;
+					run();
+				});
+			};
+			const observer = new MutationObserver(schedule);
+			observer.observe(document.body, {
+				childList: true,
+				subtree: true,
+				attributes: true,
+				attributeFilter: ["data-streaming"]
+			});
+			schedule();
+			return {
+				run,
+				dispose: () => {
+					if (raf !== 0) {
+						cancelFrame(raf);
+						raf = 0;
+					}
+					observer.disconnect();
+					for (const card of mounted) card.dispose();
+					mounted.clear();
+				}
+			};
+		}
+		//#endregion
+		//#region src/client/index.ts
+		/** The client half requires no service: every host capability is probed, never injected. */
+		const inject = [];
+		/**
+		* The card-link route: host 0.1.6-alpha.2's ui-sidebar-browser registers the
+		* `browser` right-Sidebar tab kind, so a card link opens as a Sidebar tab
+		* there; any older host or missing piece (service, type, or a registry race
+		* on open) falls back to a new window. Probed per open, so a hot-added tab
+		* type counts and a hot-removed one just falls back.
+		* @param ctx - client root context.
+		* @returns the bridge's openLink capability.
+		*/
+		function createLinkOpener(ctx) {
+			return (url) => {
+				const tabs = ctx.get("sidebarRightTabs");
+				const sidebarRight = ctx.get("sidebarRight");
+				if (tabs?.get("browser") !== void 0 && sidebarRight !== void 0) try {
+					sidebarRight.openTab("browser", { params: { url } });
+					return;
+				} catch {}
+				window.open(url, "_blank", "noopener,noreferrer");
+			};
+		}
+		/**
+		* Plugin body: install the card renderer for the browser lifetime.
+		* @param ctx - client root context (probed for the optional Sidebar Browser route).
+		* @returns a disposer tearing the renderer down.
+		*/
+		function apply(ctx) {
+			let renderer;
+			const install = () => {
+				renderer = installCardRenderer({ openLink: createLinkOpener(ctx) });
+			};
+			install();
+			return () => {
+				renderer?.dispose();
+				renderer = void 0;
+			};
+		}
+		//#endregion
+		exports.apply = apply;
+		exports.createLinkOpener = createLinkOpener;
+		exports.inject = inject;
+		return module.exports;
+	}
+});
+
+//# sourceMappingURL=client.js.map