dsh-mosaic 0.2.1 → 1.0.0

package/CHANGELOG.md

@@ -1,7 +1,35 @@
 # Changelog
 
-> 版本规则：插件版本与**最近一次验证通过的 DeepSeek Harness 版本**保持一致。当前对齐 `0.2.1`（实测 rc.3 与 rc.5）。
-> 同一 Harness 版本下的插件自身修复按补丁号递增（`0.2.1` → `0.2.2` ……）；一旦换到新的 Harness 版本验证通过，版本号立即改成该 Harness 版本。
+> 版本规则：插件版本按 npm 语义独立递增，**不再与 DeepSeek Harness 版本号对齐**。
+> 兼容性分两处表达：`package.json` 的 `engines.dsh` 给机器可读的范围，README「安装」一节给「插件版本 ↔ 实测 Harness 版本」对照表；每次在真实 Harness 上验证后更新这两处。
+> `0.2.1` 及各 `0.2.1-<标签>` 是改规则前的历史版本，保留用于追溯。
+
+## 1.0.0
+
+首个稳定版，也是 npm 上第一次发布的完整版本（`0.2.1` 之后的所有改动都在这里）。
+
+- 版本规则变更：不再与 DeepSeek Harness 版本号对齐。此前用 `0.2.1-<标签>` 表示「对齐 0.2.1 的本地改动」，但这类版本在 semver 里是**预发布**（`0.2.1-harden < 0.2.1`），既不会被 `npm i` 选中，发布时还必须显式 `--tag`。兼容范围改由 `engines.dsh` 与 README 的对照表表达。
+- 发布自动化：新增 tag 触发的发布工作流（`.github/workflows/release.yml`），使用 npm trusted publishing（OIDC，无需长期 token），并在发布前校验 tag 与 `package.json` 版本一致、该版本尚未发布。
+
+### 功能（此前未发布）
+
+- 示意图与图表支持缩放/平移：`−`/`+`/`⟲`/`⤢`、拖动平移、`Ctrl/⌘ + 滚轮`、双击复位、键盘 `+`/`-`/`0`；示意图按原始尺寸渲染，超出部分裁切可拖动。
+
+### 安全与状态修正
+
+- Widget 沙箱重建：整份文档（`doctype`/`html`/`head`/`body`）由宿主统一生成，模型内容只投放到宿主给出的 head/body 槽位，CSP 因此永远排在模型脚本之前。此前完整 HTML 文档走 `<\/head>` 前插入，模型写在 `<head>` 里的 `<script>` 会在 CSP 生效前执行；模型自带的 CSP `<meta>` 与 `<base>` 一并剥离。
+- Widget 动作校验补上父窗口一侧：nonce 写在 Widget 自己的文档里，模型代码能读出来直接 `postMessage` 伪造，所以除 iframe 内的判断之外，父页面独立校验自己文档的 `navigator.userActivation`；iframe 内的判断同时改为 fail-closed。额度从「每个 Widget 一份」改为**整个会话共享**，payload 上限按 UTF-8 **字节**（16 KB）而不是字符数计算。
+- 自有路由增加 Host 权威校验：`/dsh-mosaic/prompt` 与 `/dsh-mosaic/log` 只接受 loopback、监听地址或 `config.trustedHosts` 声明的授权。仅比较 Origin 与 Host 挡不住 DNS rebinding——被 rebinding 的请求两者都等于攻击者域名。
+- Prompt 状态：`reset` 不再被迟到的 `hydrate` 覆盖（用独立标志区分「还没读过」和「用户刚清空」）；`GET` 返回 `revision`，`POST` 可带 `expectedRevision`，对不上返回 409 并附当前内容，跨浏览器编辑不再静默覆盖。
+- 日志路由在 `flush` 之后才回 204，204 变成真正的落盘回执；测试改为等待具体事件而不是「目录里有任意 jsonl」，修掉那条在 CI 上必然失败的竞态。
+- 缩放/平移：触屏改为 `touch-action: pan-y`，手指上下划可以继续滚动聊天页面；ResizeObserver 里不再在 `setZoom` 的 updater 内调用 `setOverflowing`，两个更新都在回调顶层发出。
+- 测试：新增 `test/client.test.mjs`（Widget 文档构造：CSP 顺序、外壳唯一性、剥离模型 CSP/base、bridge 策略），以及 Host 权威、reset/hydrate 竞态、revision 冲突的回归用例。`npm test` 现为 78 项。
+
+## 0.2.1-zoom
+
+- 示意图与图表可以缩放和拖动：右上角 `−`/`+`/`⟲`/`⤢`，视图内按住拖动平移，`Ctrl/⌘ + 滚轮`缩放，双击或 `⟲` 复位，键盘 `+`/`-`/`0` 同样可用；`⤢` 在遮罩层里打开更大的画布。
+- 示意图保留原始尺寸（不再被压缩到卡片宽度），超出部分在视口里裁切、可拖动查看。
+- 修复外观切换后 Mermaid 重渲染报 `Unsupported color format: "currentColor"`、随后掉到内置布局的问题：主题变量的兜底改用具体颜色。
 
 ## 0.2.1
 

package/README.md

@@ -39,7 +39,7 @@ Mosaic 是一个轻量的 DeepSeek Harness 可视化回答插件。它把模型
 
 插件向模型贡献一段说明可视化能力的 Prompt，默认是包内文本。
 
-**Settings → Mosaic** 就是这段文本的编辑页：打开即显示当前生效的内容（默认就是内置文案），可以直接改、点「保存」，随时点「恢复默认」回到插件自带文案。保存后从下一轮模型请求开始生效，所有浏览器看到的是同一份，重启也在。
+**Settings → Mosaic** 就是这段文本的编辑页：打开即显示当前生效的内容（默认就是内置文案），可以直接改、点「保存」，随时点「恢复默认」回到插件自带文案。保存后从下一轮模型请求开始生效，所有浏览器看到的是同一份，重启也在。两个浏览器同时编辑时，后保存的那个会收到「已在别处被修改」，页面载入最新内容而不覆盖别人的修改。
 
 生效顺序是「你保存的覆盖 > 配置文件里的 `config.prompt` > 内置文本」。想在 profile 里批量固定一份基线，仍然可以在 `cordis.patch.yml` 给 mosaic 行加 `config.prompt`；留空、类型不对或超过 128 KB 会回落。
 
@@ -71,7 +71,7 @@ $DSH_HOME/logs/dsh-mosaic/YYYY-MM-DD.jsonl   # 未设置 DSH_HOME 时是 ~/.dsh/
 - 记录什么：激活/停用、Prompt 的读取与保存（来源、字符数、是否落盘）、工具执行（名称、结果状态、耗时）、路由请求（方法、状态码、耗时）、技能被读取、以及浏览器侧上报的失败（`client.` 前缀：围栏解析失败、Mermaid 失败、Prompt 读写失败、Widget 动作被限流/超限丢弃）。
 - 不记录什么：Prompt 正文、组件 JSON、任何文本字段的内容。字段名为 `prompt`/`text`/`code`/`content`/`secret`/`token`/`password`/`apiKey` 时只写字符数；其它字符串超过 300 字符会被截断。
 - 体积：单文件超过 2 MB 滚动为 `<日期>.1.jsonl`；超过 7 天的文件在下次启动时删除；文件权限 `0600`。写不进去时不会影响插件，只在宿主日志里告警一次。
-- 浏览器侧的失败通过同源 `POST /dsh-mosaic/log` 上报（请求体上限 4 KB，跨站 403，客户端每分钟最多 20 条）。
+- 浏览器侧的失败通过同源 `POST /dsh-mosaic/log` 上报（请求体上限 4 KB，非本机权威或跨站一律 403，客户端每分钟最多 20 条）；接口在日志落盘之后才回 204，看到成功就是真的写进去了。
 - 默认级别 `info`；想要更细可以给 mosaic 行加 `config.logLevel: debug`（或 `warn` 减少噪音）。
 
 排查示例：
@@ -87,15 +87,17 @@ grep -c '"event":"tool.failed"' "$DSH_HOME"/logs/dsh-mosaic/*.jsonl
 
 ## 已知边界
 
-- 版本号跟随「最近一次验证通过的 DeepSeek Harness 版本」：当前是 `0.2.1`（实测 rc.3、rc.5）。同一 Harness 版本下的插件修复递增补丁号；换到新 Harness 版本验证后再把版本号对齐过去。
+- 本插件的 npm 版本独立递增（当前 `1.0.0`），不再与 Harness 版本号对齐；兼容范围由 `package.json` 的 `engines.dsh` 声明，最近一次实测的 Harness 版本见「安装」一节。
 - 围栏渲染靠扫描页面里的代码块实现：0.2.1 全系列（实测 rc.3 与 rc.5，master 同样）都没有给插件开放「渲染 fenced code block」的扩展点。工具通道 `render_view` + `tool.call.toolview` 是原生做法，围栏是它的补充。
 - 从 0.2.1 起代码块由 Shiki 渲染，`<code>` 上**没有** `language-*` 类；识别靠「代码块位于 assistant 行内 + 正文能解析成合法视图 spec」这条路径，用户消息、工具结果、推理块里的代码块都被排除。
-- `widget` 里调用 `window.mosaic.action()` 只有**真实用户手势**之后才会把动作发回模型（用浏览器的 `navigator.userActivation` 判断，Widget 自己伪造不了）；确实需要自行提交的 Widget 要在节点上写 `actions: "programmatic"`，并且仍受「每分钟 10 次、单次 16 KB」的限制。
+- `diagram` 与 `chart` 自带缩放/平移：卡片右上角有 `−`/`+`/`⟲`/`⤢`，放大后按住图面拖动即可平移，`Ctrl/⌘ + 滚轮`缩放，双击复位；示意图按原始尺寸渲染，不会被压缩到卡片宽度。触屏上图表区域只拦横向拖动（`touch-action: pan-y`），手指上下划仍然滚动聊天页面。
+- `widget` 里调用 `window.mosaic.action()` 只有**真实用户手势**之后才会把动作发回模型：Widget 自己也在判断 `navigator.userActivation`，但决定权在宿主——消息的 nonce 就写在 Widget 自己的文档里，模型代码能读出来直接伪造，所以父页面独立再校验一次自己文档的激活状态。确实需要自行提交的 Widget 要在节点上写 `actions: "programmatic"`；无论哪种，整个会话共享「每分钟 10 次、单次 payload 16 KB（按 UTF-8 字节算）」的额度，新开一个 Widget 不会重置。浏览器若不提供 `navigator.userActivation`，非 `programmatic` 的 Widget 会被按「没有手势」处理，按钮不会回模型。
 - `widget` 是 iframe，拿不到宿主的 `ctx.locale`，因此内部文案由调用方自己写；主题靠宿主令牌值传入。围栏是独立的 React root，切换外观不会触发它重渲染，所以 widget 会观察 `body[data-ds-dark-theme]` 这一个外观属性并在变化时重发令牌——这是插件唯一读取的宿主属性。
 - Mermaid 资产走包内私有路由 `/dsh-mosaic/assets`；没有 Web 服务时 diagram 回落到内置 SVG 布局。
+- 自有路由（`/prompt`、`/log`）先验 **Host 必须是本机权威**（loopback、监听地址，或 `config.trustedHosts` 里声明的），再验 `Sec-Fetch-Site` 与 `Origin`。只比 Origin 和 Host 挡不住 DNS rebinding：被 rebinding 的页面这两者都等于攻击者域名，看起来完全同源。宿主把 Web 服务绑到非 loopback 地址时，请把对应主机名写进 `config.trustedHosts`，否则这些路由会拒绝请求。
 - bundle patch 只插入 Mosaic 自己这一行，不改动任何其他插件。若你还装了别的围栏类插件，两者可以对同一段围栏各显一套，按需在 profile 里关掉其中一个即可。
 - 持久化只用「Host 数据目录里的一个 JSON 文件」，没有走 DSH 的 storageDomain。实测（rc.5）：`storageDomain` 可用，但记录校验只在**重新打开**时执行（`put` 不校验）；`single` 布局遇到版本变化会直接拒绝打开，`compatibleVersions` 也不适用。对一份 Prompt 来说这些能力换不来收益，反而多一个依赖和三条失败分支。
-- Prompt 编辑页是对平台形态的**补充，不是平台标准做法**。DSH 把 Prompt 视为 composition 配置（system-prompt 的 README 明确写着没有终端用户编辑 Prompt 的 API），标准平面是 `Config` + `cordis.patch.yml`，客户端改值应走 `@Remote`，插件自有数据应走存储服务。这里为了「只装一个包、不引入 peer 依赖」，写入用了自建的同源校验路由、持久化用了自建的 `mosaic/prompt.json`。将来宿主提供多行配置表单或标准 Remote 时，这块应当迁移过去。
+- Prompt 编辑页是对平台形态的**补充，不是平台标准做法**。DSH 把 Prompt 视为 composition 配置（system-prompt 的 README 明确写着没有终端用户编辑 Prompt 的 API），标准平面是 `Config` + `cordis.patch.yml`，客户端改值应走 `@Remote`，插件自有数据应走存储服务。这里为了「只装一个包、不引入 peer 依赖」，写入用了自建路由（Host 权威校验 + 同源校验）、持久化用了自建的 `mosaic/prompt.json`。将来宿主提供多行配置表单或标准 Remote 时，这块应当迁移过去。
 
 ## 本地优先
 
@@ -131,6 +133,15 @@ dsh plugin --profile desktop add link:/absolute/path/to/dsh-mosaic
 
 安装后重启或刷新 DSH Web，新会话即可使用。bundle patch 只插入本插件一行，不会关闭或覆盖别人的插件。
 
+**兼容性**：npm 版本独立于 DeepSeek Harness 版本，`1.0.x` 对应下方实测的 Harness 范围；声明式范围见 `package.json` 的 `engines.dsh`（当前 `>=0.2.1-rc.1 <0.3.0-0`）。
+
+| 插件版本 | 实测通过的 DeepSeek Harness | 说明 |
+| --- | --- | --- |
+| `1.0.0` | `0.2.1-rc.5`（同时复核 rc.3 行为） | 首个稳定版；含 Widget 沙箱、路由权威、Prompt 并发等修正 |
+| `0.2.1` | `0.2.1-rc.3`、`0.2.1-rc.5` | 上一版，npm 上的历史发布 |
+
+Harness 升级到 `0.3.x` 后，请先在新版本上验证再放宽 `engines.dsh`，并在此表补一行。
+
 ## 限制
 
 - 80 节点、6 层嵌套、表格 40×8、图表 40 点、diagram 12 节点/20 边、widget 代码 20k。

package/SKILL.md

@@ -122,7 +122,7 @@ A widget is for content the fixed components cannot express: a game, a physics/m
 - CSP: no network; inline scripts/styles and `data:`/`blob:` images or media only
 - no access to the host page, cookies, or local storage
 
-`window.mosaic.action(name, payload)` reaches the model only after a real user gesture inside the widget; set `actions: "programmatic"` when the widget must submit on its own (still capped at 10 calls a minute and 16 KB per payload).
+`window.mosaic.action(name, payload)` reaches the model only after a real user gesture; the Host re-checks that gesture, because a widget can read the message nonce out of its own document. Set `actions: "programmatic"` when the widget must submit on its own. Either way the whole session shares a budget of 10 actions a minute and 16 KB per payload, so a widget cannot reset it by re-rendering.
 
 Inside the widget:
 

package/docs/publishing.md

@@ -4,7 +4,7 @@
 
 1. Create the GitHub repository. Add the topic `dsh-plugin`; the catalog's automated check looks for it.
 2. Fill `repository`, `homepage`, and `bugs` in `package.json` after the repository URL exists.
-3. Keep at least one version published on npm before submitting to the catalog. The package version tracks the most recently verified DeepSeek Harness version (`0.2.1` today); plugin-only fixes bump the patch number until the next Harness verification realigns it. `npm pack --dry-run` must include `lib/assets/mermaid.min.js`, `screenshots.json`, and `assets/screenshots/`.
+3. Keep at least one version published on npm before submitting to the catalog. The package version follows plain semver (currently `1.0.0`) and is independent of the DeepSeek Harness version; the verified Harness range lives in `engines.dsh` and in the README compatibility table, and both are updated after each real verification. `npm pack --dry-run` must include `lib/assets/mermaid.min.js`, `screenshots.json`, and `assets/screenshots/`.
 4. Add the repository to the catalog with `docs/catalog-entry.example.yml` copied to `data/plugins/imwhatiam__dsh-mosaic.yml` in `awesome-dsh-plugin/awesome-dsh-plugin`. One entry per PR; the repo must be at least one day old.
 5. Add real screenshots under `assets/screenshots/` and list them in `screenshots.json`. Verified against installed DSH 0.2.1-rc.5: the Plugins page reads only `meta.title`, `meta.description` and the icon, so `screenshots.json` is a **catalog/community** convention, not a DSH one. Keep the paths inside the package and in sync with the filenames.
 6. The catalog `icon` must be a GitHub-hosted raster image. This repo ships `assets/icon-180.png`; SVG is rejected by the catalog.

package/lib/client.js

@@ -61,6 +61,11 @@ window.__ModuleLoader__.load({
         reload: '重载',
         fullscreen: '全屏',
         close: '关闭',
+        zoomIn: '放大',
+        zoomOut: '缩小',
+        zoomReset: '恢复 100%',
+        zoomFullscreen: '放大查看',
+        zoomHint: '按住拖动查看，Ctrl/⌘ + 滚轮缩放，双击复位',
         drawio: '下载 draw.io 文件',
         mermaidFallback: 'Mermaid 渲染失败，已使用内置布局：{message}',
         parseFailed: 'dsh-view 解析失败：{detail}（已保留代码块）',
@@ -81,6 +86,7 @@ window.__ModuleLoader__.load({
         promptSourceBuiltin: '内置默认',
         promptLoadFailed: '读取失败：{reason}',
         promptSaveFailed: '保存失败：{reason}',
+        promptConflict: '这份 Prompt 已在别处被修改，已载入最新内容；确认后再保存一次即可。',
         promptMemoryOnly: '未能写入 Host 数据目录，本次仅在进程内生效。',
         promptReadCorrupt: '保存的内容无法解析，已按内置内容运行；原文件已保留，可手工修复。',
         promptReadUnreadable: '保存的内容读取失败（权限或路径问题），已按内置内容运行。',
@@ -105,6 +111,11 @@ window.__ModuleLoader__.load({
         reload: 'Reload',
         fullscreen: 'Fullscreen',
         close: 'Close',
+        zoomIn: 'Zoom in',
+        zoomOut: 'Zoom out',
+        zoomReset: 'Reset to 100%',
+        zoomFullscreen: 'Open larger',
+        zoomHint: 'Drag to pan, Ctrl/⌘ + wheel to zoom, double-click to reset',
         drawio: 'Download a draw.io file',
         mermaidFallback: 'Mermaid rendering failed; the built-in layout was used: {message}',
         parseFailed: 'dsh-view could not be parsed: {detail} (the code block is kept)',
@@ -125,6 +136,7 @@ window.__ModuleLoader__.load({
         promptSourceBuiltin: 'Built-in default',
         promptLoadFailed: 'Could not read the prompt: {reason}',
         promptSaveFailed: 'Could not save: {reason}',
+        promptConflict: 'Another tab changed this prompt. The latest text is loaded; review it and save again.',
         promptMemoryOnly: 'Could not write the Host data directory, so this change only lives in this process.',
         promptReadCorrupt: 'The saved override is not valid JSON, so the built-in text is used. The file was kept for manual repair.',
         promptReadUnreadable: 'The saved override could not be read (permissions or path), so the built-in text is used.', 
@@ -329,10 +341,23 @@ window.__ModuleLoader__.load({
 .mosaic-chart .mosaic-dot{stroke:var(--m-bg);stroke-width:1.5}
 .mosaic-chart .mosaic-bar{shape-rendering:geometricPrecision}
 .mosaic-chart .mosaic-donut-label{font-size:11px;fill:var(--m-text)}
-.mosaic-diagram-wrap{max-width:100%;max-height:560px;overflow:auto;padding-bottom:2px}
+.mosaic-diagram-wrap{max-width:100%;overflow:hidden;padding-bottom:2px}
 .mosaic-diagram{display:block;width:auto;max-width:none;height:auto;margin:0 auto;overflow:visible}
-.mosaic-mermaid{max-width:100%;max-height:560px;overflow:auto;padding:2px 0}
-.mosaic-mermaid svg{display:block;max-width:100%;height:auto;margin:0 auto}
+.mosaic-mermaid{max-width:100%;padding:2px 0}
+.mosaic-mermaid svg{display:block;max-width:none!important;height:auto;margin:0 auto}
+.mosaic-zoom{display:flex;flex-direction:column;gap:6px;min-width:0}
+.mosaic-zoom-bar{display:flex;align-items:center;gap:6px;justify-content:flex-end}
+.mosaic-zoom-btn{border:1px solid var(--m-border);background:var(--m-bg);color:var(--m-muted);border-radius:6px;min-width:26px;height:24px;padding:0 6px;font:12px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;cursor:pointer}
+.mosaic-zoom-btn:hover:not(:disabled){color:var(--m-text);border-color:var(--m-accent)}
+.mosaic-zoom-btn:disabled{opacity:.45;cursor:default}
+.mosaic-zoom-value{min-width:46px;text-align:center;font:11px/1.6 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--m-muted);font-variant-numeric:tabular-nums}
+.mosaic-zoom-viewport{position:relative;overflow:hidden;max-height:min(70vh,560px);border-radius:8px;outline:none;touch-action:pan-y}
+.mosaic-zoom-viewport[data-pannable="true"]{cursor:grab}
+.mosaic-zoom-viewport[data-panning="true"]{cursor:grabbing}
+.mosaic-zoom-viewport:focus-visible{box-shadow:0 0 0 2px var(--m-accent)}
+.mosaic-zoom-stage{transform-origin:0 0;display:inline-block;min-width:100%;will-change:transform}
+.mosaic-zoom-stage[data-panning="true"]{user-select:none}
+.mosaic-zoom-full .mosaic-zoom-viewport{max-height:calc(92vh - 96px);min-height:min(70vh,560px)}
 .mosaic-mermaid .labelBkg{background:var(--m-bg)!important;color:var(--m-text)!important;padding:0 3px;border-radius:3px}
 .mosaic-mermaid .edgeLabel{color:var(--m-text)!important}
 .mosaic-diagram-head{display:flex;align-items:center;gap:8px;margin:0 0 6px}
@@ -427,6 +452,7 @@ window.__ModuleLoader__.load({
 .mosaic-overlay-body{position:relative;width:min(1120px,96vw);max-height:92vh;overflow:auto;background:var(--m-bg);color:var(--m-text);border:1px solid var(--m-border);border-radius:14px;padding:16px;box-shadow:0 24px 70px rgba(0,0,0,.35)}
 .mosaic-overlay-close{position:sticky;top:0;float:right;z-index:2;border:1px solid var(--m-border);background:var(--m-bg);color:var(--m-text);border-radius:8px;width:30px;height:30px;font-size:18px;line-height:1;cursor:pointer}
 .mosaic-overlay-close:hover{background:var(--m-bg2)}
+.mosaic-overlay-body[data-figure="true"]{width:min(1440px,97vw);overflow:hidden}
 .mosaic-overlay-image{display:block;max-width:100%;max-height:76vh;margin:0 auto;border-radius:10px;object-fit:contain}
 .mosaic-diagnostic{margin:0 0 6px;padding:6px 10px;border:1px solid color-mix(in srgb,var(--m-danger) 40%,transparent);border-radius:7px;background:color-mix(in srgb,var(--m-danger) 10%,transparent);color:var(--m-danger);font-size:12px;line-height:1.5;white-space:pre-wrap}
 .mosaic-error{margin:8px 0;padding:8px 10px;border:1px solid color-mix(in srgb,var(--m-danger) 40%,transparent);border-radius:8px;background:color-mix(in srgb,var(--m-danger) 8%,var(--m-bg));color:var(--m-danger);font-size:12px}
@@ -555,6 +581,11 @@ window.__ModuleLoader__.load({
     function MosaicSettings({ t }) {
       const alive = useRef(true)
       const [state, setState] = useState({ loading: true, text: '', saved: '', info: null, notice: null, saving: false })
+      // The save callback is cached on `t`, so the revision it echoes comes from a ref.
+      const infoRef = useRef(null)
+      useEffect(() => {
+        infoRef.current = state.info
+      }, [state.info])
       useEffect(() => () => { alive.current = false }, [])
       const reason = (error) => (error instanceof Error ? error.message : String(error))
 
@@ -575,8 +606,12 @@ window.__ModuleLoader__.load({
         return () => { current = false }
       }, [t])
 
-      const submit = useCallback(async (body) => {
+      const submit = useCallback(async (payload) => {
         setState((previous) => ({ ...previous, saving: true, notice: null }))
+        // Name the version this tab read: another tab may have saved since, and the
+        // Host refuses the write instead of silently replacing that edit.
+        const revision = infoRef.current?.revision
+        const body = revision === undefined ? payload : { ...payload, expectedRevision: revision }
         try {
           const response = await fetch(PROMPT_URL, {
             method: 'POST',
@@ -584,6 +619,19 @@ window.__ModuleLoader__.load({
             body: JSON.stringify(body),
           })
           const data = await response.json().catch(() => ({}))
+          if (response.status === 409) {
+            if (!alive.current) return
+            const text = typeof data.prompt === 'string' ? data.prompt : ''
+            setState({
+              loading: false,
+              text,
+              saved: text,
+              info: data,
+              saving: false,
+              notice: { kind: 'error', text: t('promptConflict') },
+            })
+            return
+          }
           if (!response.ok) throw new Error(data.error ?? `HTTP ${response.status}`)
           if (!alive.current) return
           const text = typeof data.prompt === 'string' ? data.prompt : ''
@@ -1861,7 +1909,7 @@ window.__ModuleLoader__.load({
   var schedule=function(){requestAnimationFrame(report)};
   // A browser-verified gesture, not a widget-supplied flag: userActivation cannot be forged
   // by page script, so an auto-firing widget is refused unless it opted into programmatic.
-  var activated=function(){var ua=navigator.userActivation;return ua===undefined||ua.isActive===true};
+  var activated=function(){var ua=navigator.userActivation;return ua!==undefined&&ua.isActive===true};
   window.mosaic={action:function(name,payload){if(policy!=='programmatic'&&!activated())return;send({type:'mosaic:action',action:String(name||'action'),payload:payload&&typeof payload==='object'?payload:{}})},resize:report};
   window.addEventListener('message',function(event){var data=event&&event.data;if(!data||typeof data!=='object'||data.type!=='mosaic:theme')return;if(data.nonce!==undefined&&data.nonce!==nonce)return;try{if(data.theme&&typeof data.theme==='object'){Object.keys(data.theme).forEach(function(key){document.documentElement.style.setProperty('--mosaic-'+key,String(data.theme[key]))})}report()}catch(error){}},false);
   window.addEventListener('load',function(){schedule();setTimeout(schedule,120);setTimeout(schedule,600)});
@@ -1872,27 +1920,89 @@ window.__ModuleLoader__.load({
 })();`
     }
 
-    function widgetDocument(code, nonce, theme, policy) {
-      const safe = String(code).slice(0, 20000)
+    /**
+     * Split model-authored HTML into the two places the Host will accept it.
+     *
+     * A complete document keeps its head material (styles, metas, title) and its body
+     * material separate, but neither keeps its own wrapper tags: the Host emits
+     * `html`/`head`/`body` itself, so no model tag can appear before the policy.
+     *
+     * @param {string} code - model-authored widget source.
+     * @returns {{ head: string, body: string }} content for the two Host-owned slots.
+     */
+    function widgetParts(code) {
+      const text = String(code).slice(0, 20000)
         .replace(/<meta\b[^>]*http-equiv\s*=\s*["']?Content-Security-Policy["']?[^>]*>/gi, '')
         .replace(/<base\b[^>]*>/gi, '')
-      const style = `<style>:root{${Object.keys(theme).map((key) => `--mosaic-${key}:${theme[key]};`).join('')}color-scheme:light dark}html,body{margin:0;padding:0;background:var(--mosaic-bg,transparent);color:var(--mosaic-text,canvastext);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:14px;line-height:1.55}*,*::before,*::after{box-sizing:border-box}a{color:var(--mosaic-accent)}</style>`
-      const head = `<!-- dsh-mosaic sandbox --><meta http-equiv="Content-Security-Policy" content="${WIDGET_CSP}">${style}<script>${widgetBridge(nonce, policy)}</script>`
-      if (/<html[\s>]/i.test(safe)) {
-        if (/<head[\s>]/i.test(safe)) {
-          if (/<\/head>/i.test(safe)) return safe.replace(/<\/head>/i, `${head}</head>`)
-          if (/<body[\s>]/i.test(safe)) return safe.replace(/<body[\s>]/i, `${head}<body`)
-          return safe.replace(/<head[^>]*>/i, (match) => `${match}${head}`)
-        }
-        return safe.replace(/<html[^>]*>/i, (match) => `${match}<head>${head}</head>`)
+        .replace(/<!doctype[^>]*>/gi, '')
+        .replace(/<\/?html\b[^>]*>/gi, '')
+        .replace(/<\/?head\b[^>]*>/gi, '')
+      const document = /<body\b[^>]*>([\s\S]*?)<\/body>/i.exec(text)
+      if (document === null) {
+        return /<body\b[^>]*>/i.test(text)
+          ? { head: '', body: text.replace(/<\/?body\b[^>]*>/gi, '') }
+          : { head: '', body: text }
       }
-      return `<!doctype html><html lang="${(typeof document !== 'undefined' && document.documentElement.lang) || 'en'}"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">${head}</head><body>${safe}</body></html>`
+      return { head: text.replace(/<body\b[^>]*>[\s\S]*?<\/body>/i, ''), body: document[1] }
+    }
+
+    /**
+     * Build the sandboxed document the widget iframe runs.
+     *
+     * The Host owns the whole shell and the policy comes first, because a `<meta>` CSP
+     * only governs what the parser reaches after it: anything the model put earlier —
+     * a `<script>` in `<head>` is the ordinary case, not an exotic one — would run
+     * before the network ban existed. Model content therefore only ever lands after
+     * the policy, in the head slot or the body slot.
+     *
+     * @param {string} code - model-authored widget source.
+     * @param {string} nonce - per-frame message tag.
+     * @param {Record<string, string>} theme - resolved Host tokens.
+     * @param {'user' | 'programmatic'} policy - whether `mosaic.action` needs a gesture.
+     * @returns {string} the complete iframe document.
+     */
+    function widgetDocument(code, nonce, theme, policy) {
+      const parts = widgetParts(code)
+      const style = `<style>:root{${Object.keys(theme).map((key) => `--mosaic-${key}:${theme[key]};`).join('')}color-scheme:light dark}html,body{margin:0;padding:0;background:var(--mosaic-bg,transparent);color:var(--mosaic-text,canvastext);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;font-size:14px;line-height:1.55}*,*::before,*::after{box-sizing:border-box}a{color:var(--mosaic-accent)}</style>`
+      const lang = (typeof document !== 'undefined' && document.documentElement.lang) || 'en'
+      return `<!doctype html><html lang="${lang}"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><!-- dsh-mosaic sandbox --><meta http-equiv="Content-Security-Policy" content="${WIDGET_CSP}">${style}<script>${widgetBridge(nonce, policy)}</script>${parts.head}</head><body>${parts.body}</body></html>`
     }
 
-    /** One widget may send this many actions per window; larger payloads are dropped. */
+    /**
+     * Widget actions are capped per *session*, not per frame: a reopened or newly
+     * rendered widget used to start with a fresh allowance, which is exactly what an
+     * action loop needs.
+     */
     const WIDGET_ACTIONS_PER_WINDOW = 10
     const WIDGET_ACTION_WINDOW_MS = 60000
-    const WIDGET_ACTION_MAX_CHARS = 16384
+    const WIDGET_ACTION_MAX_BYTES = 16 * 1024
+    let widgetActionTimes = []
+
+    /** Whether one widget action fits this window's allowance; consumes it when it does. */
+    function admitWidgetAction() {
+      const now = Date.now()
+      widgetActionTimes = widgetActionTimes.filter((at) => now - at < WIDGET_ACTION_WINDOW_MS)
+      if (widgetActionTimes.length >= WIDGET_ACTIONS_PER_WINDOW) return false
+      widgetActionTimes.push(now)
+      return true
+    }
+
+    /**
+     * Whether this document currently holds transient user activation.
+     *
+     * The widget's own copy of this check cannot be trusted: the policy tag, the bridge
+     * and model code share one document, so a widget can read the nonce and post the
+     * same shape itself. The parent answers about its own document instead, and user
+     * activation propagates from a focused subframe to its ancestors, so a real click
+     * inside the iframe still counts here.
+     */
+    function hasUserGesture() {
+      try {
+        return window.navigator.userActivation?.isActive === true
+      } catch {
+        return false
+      }
+    }
 
     function WidgetFrame({ node, onAction, onFullscreen, fullscreen = false }) {
       const [height, setHeight] = useState(node.height ?? 320)
@@ -1905,7 +2015,6 @@ window.__ModuleLoader__.load({
       const initialTheme = useMemo(() => themeSnapshot(iframeRef.current?.parentElement), [])
       const policy = node.actions === 'programmatic' ? 'programmatic' : 'user'
       const html = useMemo(() => widgetDocument(node.code, nonce, initialTheme, policy), [node.code, nonce, initialTheme, policy])
-      const actionTimes = useRef([])
       const sendTheme = useCallback(() => {
         const next = themeSnapshot(iframeRef.current?.parentElement)
         iframeRef.current?.contentWindow?.postMessage({ type: 'mosaic:theme', nonce, theme: next }, '*')
@@ -1918,11 +2027,16 @@ window.__ModuleLoader__.load({
           if (data.type === 'mosaic:height') {
             setHeight(clamp(Number(data.height) || 320, 120, 900))
           } else if (data.type === 'mosaic:action') {
-            const now = Date.now()
-            const recent = actionTimes.current.filter((at) => now - at < WIDGET_ACTION_WINDOW_MS)
-            actionTimes.current = recent
-            if (recent.length >= WIDGET_ACTIONS_PER_WINDOW) {
-              reportLog('warn', 'widget.action-dropped', { reason: 'rate', action: String(data.action ?? '').slice(0, 64) })
+            const action = String(data.action || 'action').slice(0, 64)
+            // The nonce proves which frame spoke, not that a person acted: a widget can
+            // read it out of its own document. A non-programmatic widget therefore still
+            // needs activation in *this* document, which model code cannot fake.
+            if (policy !== 'programmatic' && !hasUserGesture()) {
+              reportLog('warn', 'widget.action-dropped', { reason: 'gesture', action })
+              return
+            }
+            if (!admitWidgetAction()) {
+              reportLog('warn', 'widget.action-dropped', { reason: 'rate', action })
               return
             }
             const payload = data.payload && typeof data.payload === 'object' ? data.payload : {}
@@ -1932,12 +2046,14 @@ window.__ModuleLoader__.load({
             } catch {
               return
             }
-            if (serialized.length > WIDGET_ACTION_MAX_CHARS) {
-              reportLog('warn', 'widget.action-dropped', { reason: 'size', chars: serialized.length })
+            const bytes = typeof TextEncoder === 'function'
+              ? new TextEncoder().encode(serialized).byteLength
+              : serialized.length
+            if (bytes > WIDGET_ACTION_MAX_BYTES) {
+              reportLog('warn', 'widget.action-dropped', { reason: 'size', bytes })
               return
             }
-            recent.push(now)
-            onAction?.(String(data.action || 'action').slice(0, 64), payload)
+            onAction?.(action, payload)
           }
         }
         window.addEventListener('message', onMessage)
@@ -2072,14 +2188,21 @@ window.__ModuleLoader__.load({
     /** Resolved host tokens mapped onto Mermaid's base theme. */
     function mermaidThemeVariables(host) {
       const theme = themeSnapshot(host)
+      // Mermaid parses every value as a colour and rejects `currentColor`, so a token
+      // that is briefly unreadable (an appearance switch mid-render) must still fall
+      // back to a concrete colour instead of failing the whole diagram.
+      const background = theme.bg ?? '#ffffff'
+      const card = theme.card ?? background
+      const text = theme.text ?? '#111111'
+      const border = theme.border ?? '#8a8a8a'
       return {
-        background: theme.bg ?? 'transparent',
-        primaryColor: theme.card ?? theme.bg ?? 'transparent',
-        primaryTextColor: theme.text ?? 'canvastext',
-        primaryBorderColor: theme.border ?? 'currentColor',
-        lineColor: theme.muted ?? theme.border ?? 'currentColor',
-        secondaryColor: theme.card ?? theme.bg ?? 'transparent',
-        tertiaryColor: theme.bg ?? 'transparent',
+        background,
+        primaryColor: card,
+        primaryTextColor: text,
+        primaryBorderColor: border,
+        lineColor: theme.muted ?? border,
+        secondaryColor: card,
+        tertiaryColor: background,
         fontFamily: 'inherit',
         fontSize: '12px',
       }
@@ -2369,6 +2492,181 @@ window.__ModuleLoader__.load({
       setTimeout(() => URL.revokeObjectURL(url), 1000)
     }
 
+    const ZOOM_MIN = 1
+    const ZOOM_MAX = 4
+    const ZOOM_STEP = 1.25
+
+    /**
+     * Zoom and pan for an SVG or rich figure.
+     *
+     * The figure keeps its natural layout size; only a transform changes, so text stays
+     * crisp and the card never reflows. Dragging pans the clipped viewport, and plain
+     * wheel scrolling is left alone so the page still scrolls over the card.
+     */
+    function ZoomPan({ children, label, fullscreen = false }) {
+      const view = useView()
+      const [zoom, setZoom] = useState({ scale: 1, x: 0, y: 0 })
+      const [panning, setPanning] = useState(false)
+      const [overflowing, setOverflowing] = useState(false)
+      const viewportRef = useRef(null)
+      const stageRef = useRef(null)
+      const drag = useRef(null)
+      // The observer below reads the current view without re-subscribing per frame.
+      const zoomRef = useRef(zoom)
+      useEffect(() => {
+        zoomRef.current = zoom
+      }, [zoom])
+
+      const sizes = () => {
+        const stage = stageRef.current
+        const viewport = viewportRef.current
+        return {
+          width: stage?.offsetWidth ?? 0,
+          height: stage?.offsetHeight ?? 0,
+          viewW: viewport?.clientWidth ?? 0,
+          viewH: viewport?.clientHeight ?? 0,
+        }
+      }
+      const clampOffset = (next, scale) => {
+        const box = sizes()
+        const limitX = Math.max(0, box.width * scale - box.viewW)
+        const limitY = Math.max(0, box.height * scale - box.viewH)
+        return {
+          x: Math.min(0, Math.max(-limitX, next.x)),
+          y: Math.min(0, Math.max(-limitY, next.y)),
+        }
+      }
+      const zoomBy = useCallback((factor) => {
+        setZoom((current) => {
+          const next = Math.min(ZOOM_MAX, Math.max(ZOOM_MIN, current.scale * factor))
+          if (Math.abs(next - current.scale) < 0.001) return current
+          if (next === ZOOM_MIN) return { scale: ZOOM_MIN, x: 0, y: 0 }
+          const box = sizes()
+          const ratio = next / current.scale
+          // Keep the viewport center fixed while the figure grows around it.
+          const centered = {
+            x: (current.x - box.viewW / 2) * ratio + box.viewW / 2,
+            y: (current.y - box.viewH / 2) * ratio + box.viewH / 2,
+          }
+          return { scale: next, ...clampOffset(centered, next) }
+        })
+      }, [])
+      const reset = useCallback(() => setZoom({ scale: ZOOM_MIN, x: 0, y: 0 }), [])
+
+      useEffect(() => {
+        const element = viewportRef.current
+        if (!element) return undefined
+        const onWheel = (event) => {
+          if (!(event.ctrlKey || event.metaKey)) return
+          event.preventDefault()
+          zoomBy(event.deltaY < 0 ? ZOOM_STEP : 1 / ZOOM_STEP)
+        }
+        element.addEventListener('wheel', onWheel, { passive: false })
+        return () => element.removeEventListener('wheel', onWheel)
+      }, [zoomBy])
+
+      // A redraw or a card resize changes the pannable area; keep the offset in range.
+      useEffect(() => {
+        const stage = stageRef.current
+        const viewport = viewportRef.current
+        if (typeof ResizeObserver !== 'function' || !stage || !viewport) return undefined
+        const observer = new ResizeObserver(() => {
+          const current = zoomRef.current
+          const box = sizes()
+          // Both updates are issued here rather than inside a state updater: an updater
+          // must stay pure, and React may run it twice while detecting impurity.
+          setOverflowing(box.width * current.scale > box.viewW + 1 || box.height * current.scale > box.viewH + 1)
+          if (current.scale === ZOOM_MIN && current.x === 0 && current.y === 0) return
+          const clamped = clampOffset({ x: current.x, y: current.y }, current.scale)
+          if (clamped.x !== current.x || clamped.y !== current.y) setZoom({ ...current, ...clamped })
+        })
+        observer.observe(stage)
+        observer.observe(viewport)
+        return () => observer.disconnect()
+      }, [])
+
+      useEffect(() => {
+        if (!fullscreen) return undefined
+        const body = viewportRef.current?.closest('.mosaic-overlay-body')
+        if (!body) return undefined
+        body.setAttribute('data-figure', 'true')
+        return () => body.removeAttribute('data-figure')
+      }, [fullscreen])
+
+      const pannable = zoom.scale > ZOOM_MIN || overflowing
+      const onPointerDown = (event) => {
+        if (event.button !== 0 || !pannable) return
+        drag.current = { pointerId: event.pointerId, x: event.clientX, y: event.clientY, origin: { x: zoom.x, y: zoom.y } }
+        try { event.currentTarget.setPointerCapture?.(event.pointerId) } catch {}
+        setPanning(true)
+      }
+      const onPointerMove = (event) => {
+        const current = drag.current
+        if (!current || current.pointerId !== event.pointerId) return
+        const next = clampOffset({
+          x: current.origin.x + (event.clientX - current.x),
+          y: current.origin.y + (event.clientY - current.y),
+        }, zoom.scale)
+        setZoom((state) => ({ ...state, ...next }))
+      }
+      const endDrag = (event) => {
+        if (!drag.current || drag.current.pointerId !== event.pointerId) return
+        drag.current = null
+        setPanning(false)
+        try { event.currentTarget.releasePointerCapture?.(event.pointerId) } catch {}
+      }
+      const onKeyDown = (event) => {
+        if (event.key === '+' || event.key === '=') { event.preventDefault(); zoomBy(ZOOM_STEP) }
+        else if (event.key === '-') { event.preventDefault(); zoomBy(1 / ZOOM_STEP) }
+        else if (event.key === '0') { event.preventDefault(); reset() }
+      }
+
+      return h('div', {
+        className: `mosaic-zoom${fullscreen ? ' mosaic-zoom-full' : ''}`,
+        'data-mosaic-zoom': '',
+        role: 'group',
+        'aria-label': label ?? translate('zoomIn'),
+      },
+      h('div', { className: 'mosaic-zoom-bar' },
+        h('button', {
+          type: 'button', className: 'mosaic-zoom-btn', disabled: zoom.scale <= ZOOM_MIN,
+          title: translate('zoomOut'), 'aria-label': translate('zoomOut'), onClick: () => zoomBy(1 / ZOOM_STEP),
+        }, '−'),
+        h('span', { className: 'mosaic-zoom-value', 'aria-live': 'polite' }, `${Math.round(zoom.scale * 100)}%`),
+        h('button', {
+          type: 'button', className: 'mosaic-zoom-btn', disabled: zoom.scale >= ZOOM_MAX,
+          title: translate('zoomIn'), 'aria-label': translate('zoomIn'), onClick: () => zoomBy(ZOOM_STEP),
+        }, '+'),
+        h('button', {
+          type: 'button', className: 'mosaic-zoom-btn', disabled: zoom.scale === ZOOM_MIN && zoom.x === 0 && zoom.y === 0,
+          title: translate('zoomReset'), 'aria-label': translate('zoomReset'), onClick: reset,
+        }, '⟲'),
+        !fullscreen && view ? h('button', {
+          type: 'button', className: 'mosaic-zoom-btn', title: translate('zoomFullscreen'), 'aria-label': translate('zoomFullscreen'),
+          onClick: () => view.openOverlay(h(ZoomPan, { key: 'zoom-fullscreen', label, fullscreen: true }, children)),
+        }, '⤢') : null),
+      h('div', {
+        ref: viewportRef,
+        className: 'mosaic-zoom-viewport',
+        tabIndex: 0,
+        'data-pannable': String(pannable),
+        'data-panning': String(panning),
+        title: translate('zoomHint'),
+        onPointerDown,
+        onPointerMove,
+        onPointerUp: endDrag,
+        onPointerCancel: endDrag,
+        onDoubleClick: reset,
+        onKeyDown,
+      },
+      h('div', {
+        ref: stageRef,
+        className: 'mosaic-zoom-stage',
+        'data-panning': String(panning),
+        style: { transform: `translate(${zoom.x}px, ${zoom.y}px) scale(${zoom.scale})` },
+      }, children)))
+    }
+
     function MermaidDiagram({ node, fallback }) {
       const containerRef = useRef(null)
       const [state, setState] = useState({ status: 'loading', svg: '' })
@@ -2391,14 +2689,15 @@ window.__ModuleLoader__.load({
         return () => { alive = false }
       }, [node, revision])
       if (state.status === 'ready') {
-        return h('div', {
-          ref: containerRef,
-          className: 'mosaic-mermaid',
-          'data-diagram-engine': 'mermaid',
-          // The string already passed sanitizeMermaidSvg; Mermaid itself runs with
-          // securityLevel 'strict' and htmlLabels off.
-          dangerouslySetInnerHTML: { __html: state.svg },
-        })
+        return h(ZoomPan, { label: node.title ?? 'diagram' },
+          h('div', {
+            ref: containerRef,
+            className: 'mosaic-mermaid',
+            'data-diagram-engine': 'mermaid',
+            // The string already passed sanitizeMermaidSvg; Mermaid itself runs with
+            // securityLevel 'strict' and htmlLabels off.
+            dangerouslySetInnerHTML: { __html: state.svg },
+          }))
       }
       if (state.status === 'error') {
         return h('div', null, fallback, h('div', { className: 'mosaic-caption-line' }, translate('mermaidFallback', { message: state.message })))
@@ -2694,14 +2993,20 @@ window.__ModuleLoader__.load({
       if (node.kind === 'sequence') {
         return h('div', null, head, h(MermaidDiagram, {
           node,
-          fallback: h('div', { className: 'mosaic-diagram-wrap' }, h(SequenceDiagram, { node })),
+          fallback: h(ZoomPan, { label: node.title ?? 'diagram' },
+            h('div', { className: 'mosaic-diagram-wrap' }, h(SequenceDiagram, { node }))),
         }))
       }
-      if (node.kind === 'timeline') return h('div', null, head, h(TimelineDiagram, { node }))
-      if (node.kind === 'layers') return h('div', null, head, h(LayersDiagram, { node }))
+      if (node.kind === 'timeline') {
+        return h('div', null, head, h(ZoomPan, { label: node.title ?? 'diagram' }, h(TimelineDiagram, { node })))
+      }
+      if (node.kind === 'layers') {
+        return h('div', null, head, h(ZoomPan, { label: node.title ?? 'diagram' }, h(LayersDiagram, { node })))
+      }
       return h('div', null, head, h(MermaidDiagram, {
         node,
-        fallback: h('div', { className: 'mosaic-diagram-wrap' }, h(FlowchartDiagram, { node })),
+        fallback: h(ZoomPan, { label: node.title ?? 'diagram' },
+          h('div', { className: 'mosaic-diagram-wrap' }, h(FlowchartDiagram, { node }))),
       }))
     }
 
@@ -2752,7 +3057,7 @@ window.__ModuleLoader__.load({
         case 'callout': return h(CalloutNode, { node })
         case 'code': return h(CodeNode, { node })
         case 'diff': return h(DiffNode, { node })
-        case 'chart': return h(ChartNode, { node })
+        case 'chart': return h(ZoomPan, { label: node.title ?? `chart` }, h(ChartNode, { node }))
         case 'diagram': return h(DiagramNode, { node })
         case 'image': return h(ImageNode, { node })
         case 'video': return h(VideoNode, { node })
@@ -3186,6 +3491,10 @@ window.__ModuleLoader__.load({
       console.info('[mosaic] client active; fence=dsh-view')
     }
 
-    return { inject: ['slots', 'sessions', 'locale'], apply }
+    // Pure helpers the Node test suite can reach; the loader reads only `apply` and
+    // `inject`, so this extra key is inert at runtime.
+    const __test = { widgetDocument, widgetParts, WIDGET_CSP, widgetBridge }
+
+    return { inject: ['slots', 'sessions', 'locale'], apply, __test }
   },
 })

package/lib/index.js

@@ -312,18 +312,25 @@ export function apply(ctx, config) {
     }
   }
 
-  /** Accept one bounded diagnostic line from the browser half. */
-  async function handleClientLog(req, res) {
+  /**
+   * Accept one bounded diagnostic line from the browser half.
+   *
+   * @param {import('node:http').IncomingMessage} req - request.
+   * @param {import('node:http').ServerResponse} res - response.
+   * @param {{ bindHost?: string, trustedHosts?: readonly string[] }} policy - the
+   *   authorities this listener answers.
+   */
+  async function handleClientLog(req, res, policy) {
     if (req.method !== 'POST') {
       res.writeHead(405)
       res.end()
       return
     }
-    const policy = crossSiteError(req)
-    if (policy !== undefined) {
-      log.warn('client.log-rejected', { reason: policy })
+    const rejection = crossSiteError(req, policy)
+    if (rejection !== undefined) {
+      log.warn('client.log-rejected', { reason: rejection })
       res.writeHead(403, { 'content-type': 'application/json; charset=utf-8' })
-      res.end(JSON.stringify({ error: policy }))
+      res.end(JSON.stringify({ error: rejection }))
       return
     }
     let body
@@ -339,6 +346,11 @@ export function apply(ctx, config) {
     const fields = { source: 'client', ...detail }
     if (body?.level === 'error') log.error(`client.${event}`, body?.message === undefined ? undefined : new Error(String(body.message)), fields)
     else log.warn(`client.${event}`, fields)
+    // Answer only once the line is durable, so 204 is a receipt rather than a promise
+    // the caller has to confirm by polling the file.
+    try {
+      await log.flush()
+    } catch {}
     res.writeHead(204)
     res.end()
   }
@@ -347,18 +359,33 @@ export function apply(ctx, config) {
   // A host without a webserver keeps the built-in SVG fallback.
   ctx.inject(['webServer'], (webCtx) => {
     const webServer = webCtx.webServer
+    // A request authority is ours when it names loopback, this listener's own bind
+    // address, or a host the deployment declared. Comparing Origin to Host is not
+    // enough: under DNS rebinding both carry the attacker's name.
+    const authority = {
+      ...typeof webServer.host === 'string' && webServer.host !== '' ? { bindHost: webServer.host } : {},
+      ...Array.isArray(config?.trustedHosts) ? { trustedHosts: config.trustedHosts } : {},
+    }
     webCtx.effect(
       () => webServer.register({ kind: 'prefix', path: ASSET_ROUTE_PATH, handler: tracedRoute('assets', serveMosaicAsset) }),
       'dsh-mosaic: asset route',
     )
-    // The settings page reads and writes the prompt here. State-changing requests are
-    // same-origin only; see requestPolicyError for the exact checks.
+    // The settings page reads and writes the prompt here. Requests must name this
+    // listener and come from its own origin; see requestPolicyError for the checks.
     webCtx.effect(
-      () => webServer.register({ kind: 'exact', path: PROMPT_ROUTE, handler: tracedRoute('prompt', (req, res) => prompts.handle(req, res)) }),
+      () => webServer.register({
+        kind: 'exact',
+        path: PROMPT_ROUTE,
+        handler: tracedRoute('prompt', (req, res) => prompts.handle(req, res, authority)),
+      }),
       'dsh-mosaic: prompt route',
     )
     webCtx.effect(
-      () => webServer.register({ kind: 'exact', path: LOG_ROUTE, handler: (req, res) => handleClientLog(req, res) }),
+      () => webServer.register({
+        kind: 'exact',
+        path: LOG_ROUTE,
+        handler: tracedRoute('log', (req, res) => handleClientLog(req, res, authority)),
+      }),
       'dsh-mosaic: log route',
     )
   })

package/lib/prompt-store.js

@@ -120,17 +120,90 @@ export function parsePromptBody(body) {
   return { ok: true, prompt }
 }
 
+/**
+ * Parse one bare `Host` authority into a lowercase hostname, or `undefined` when the
+ * value is not a plain `host[:port]`.
+ *
+ * @param {unknown} authority - the raw header value.
+ * @returns {string | undefined} the hostname, without IPv6 brackets.
+ */
+function hostnameOf(authority) {
+  if (typeof authority !== 'string' || authority.trim() === '') return undefined
+  let url
+  try {
+    url = new URL(`http://${authority}`)
+  } catch {
+    return undefined
+  }
+  // A bare authority cannot carry a path, query or fragment.
+  if (url.pathname !== '/' || url.search !== '' || url.hash !== '') return undefined
+  return url.hostname.replace(/^\[/u, '').replace(/\]$/u, '').toLowerCase()
+}
+
+/** The port one authority names, or `undefined` when it omits one. */
+function portOf(authority) {
+  try {
+    const url = new URL(`http://${authority}`)
+    return url.port === '' ? undefined : url.port
+  } catch {
+    return undefined
+  }
+}
+
+/** Whether a hostname names this machine's loopback interface. */
+function isLoopbackHostname(name) {
+  if (name === 'localhost' || name === '::1') return true
+  if (/^127\.\d{1,3}\.\d{1,3}\.\d{1,3}$/u.test(name)) return true
+  return /^::ffff:127\./u.test(name)
+}
+
+/**
+ * Reject a request whose `Host` this deployment does not answer.
+ *
+ * The `Origin`/`Host` comparison alone cannot stop DNS rebinding: an attacker page at
+ * `evil.example` that resolves to this listener sends `Host: evil.example`,
+ * `Origin: http://evil.example` and `Sec-Fetch-Site: same-origin`, so every one of those
+ * agrees while the request is foreign. The authority itself therefore has to be one this
+ * listener owns — loopback, the configured bind address, or a declared trusted host —
+ * which is the fence `dsh-client-connection` already applies to `/api`.
+ *
+ * @param {import('node:http').IncomingMessage} req - the request under test.
+ * @param {{ bindHost?: string, trustedHosts?: readonly string[] }} [options] - the
+ *   authorities this deployment answers beyond loopback.
+ * @returns {string | undefined} a rejection reason, or `undefined` when it is ours.
+ */
+export function foreignHostError(req, options = {}) {
+  const raw = req.headers.host
+  const name = hostnameOf(raw)
+  if (name === undefined) return 'invalid_host'
+  if (isLoopbackHostname(name)) return undefined
+  const bind = hostnameOf(options.bindHost)
+  if (bind !== undefined && name === bind) return undefined
+  for (const entry of options.trustedHosts ?? []) {
+    const trusted = hostnameOf(entry)
+    if (trusted === undefined || trusted !== name) continue
+    const port = portOf(entry)
+    if (port === undefined || port === portOf(raw)) return undefined
+  }
+  return 'foreign_host'
+}
+
 /**
  * Reject a state-changing request that a foreign page could have triggered.
  *
  * `Sec-Fetch-Site` is sent by the browser and cannot be forged by page script; a
  * foreign origin also fails the `Origin` comparison, and a JSON content type forces a
- * preflight that this route never approves.
+ * preflight that this route never approves. The `Host` fence runs first, because every
+ * other check agrees with itself once the browser has been rebound to this listener.
  *
  * @param {import('node:http').IncomingMessage} req - the request under test.
+ * @param {{ bindHost?: string, trustedHosts?: readonly string[] }} [options] - the
+ *   authorities this deployment answers beyond loopback.
  * @returns {string | undefined} a rejection reason, or `undefined` when allowed.
  */
-export function crossSiteError(req) {
+export function crossSiteError(req, options = {}) {
+  const foreign = foreignHostError(req, options)
+  if (foreign !== undefined) return foreign
   const site = req.headers['sec-fetch-site']
   if (typeof site === 'string' && site !== 'same-origin' && site !== 'none') return 'cross_site'
   const origin = req.headers.origin
@@ -147,8 +220,8 @@ export function crossSiteError(req) {
 }
 
 /** Policy for a state-changing request: same-origin plus a JSON body. */
-export function requestPolicyError(req) {
-  const crossSite = crossSiteError(req)
+export function requestPolicyError(req, options = {}) {
+  const crossSite = crossSiteError(req, options)
   if (crossSite !== undefined) return crossSite
   const type = req.headers['content-type']
   if (typeof type !== 'string' || !type.toLowerCase().startsWith('application/json')) return 'json_required'
@@ -190,6 +263,10 @@ function sendJson(res, status, body) {
  * @param {(ctx: object, text: string) => () => void} options.registerSection - registers
  *   the prompt section and returns its disposer.
  * @param {string} [options.path] - override file path; defaults to the Host data dir.
+ * @param {string} [options.bindHost] - the listener's own bind address, accepted as a
+ *   request authority in addition to loopback.
+ * @param {readonly string[]} [options.trustedHosts] - further authorities this
+ *   deployment answers.
  */
 export function createPromptController(options) {
   const { ctx, config, resolveConfigPrompt, builtin, registerSection } = options
@@ -200,9 +277,23 @@ export function createPromptController(options) {
   // browser half working after a route change.
   const assets = options.assets ?? {}
 
+  // The authorities this listener answers beyond loopback; both routes share them.
+  const policy = {
+    ...options.bindHost === undefined ? {} : { bindHost: options.bindHost },
+    ...Array.isArray(options.trustedHosts) ? { trustedHosts: options.trustedHosts } : {},
+  }
+
   const state = {
     /** Saved by the user in this profile, or `undefined`. */
     user: undefined,
+    /**
+     * Whether a user action — a save *or* a reset — has landed in this process.
+     * `user === undefined` cannot carry that meaning, because a reset sets it too,
+     * so a hydrate that resolves after a reset would otherwise restore the old text.
+     */
+    userModified: false,
+    /** Monotonic version of the effective prompt; clients echo it back to save. */
+    revision: 0,
     /** From the row's `config.prompt`, or `undefined`. */
     configured: resolveConfigPrompt(config) === builtin ? undefined : resolveConfigPrompt(config),
     /** Whether the last write reached disk. */
@@ -231,6 +322,7 @@ export function createPromptController(options) {
       configuredPrompt: state.configured,
       customized: source() !== 'builtin',
       source: source(),
+      revision: state.revision,
       persisted: state.persisted,
       ...state.persistenceError === undefined ? {} : { persistenceError: state.persistenceError },
       ...state.readError === undefined ? {} : { readError: state.readError },
@@ -270,8 +362,10 @@ export function createPromptController(options) {
     /** Pick up a saved override on activation. */
     async hydrate() {
       const stored = await readPromptFile(state.path)
-      // A `start()` may have been revoked, or a save may have landed first.
-      if (!state.active || state.user !== undefined) return snapshot()
+      // A `start()` may have been revoked, or the user may have saved or reset while
+      // this read was in flight. A reset leaves `user` undefined, so only the flag can
+      // tell "nothing saved yet" apart from "the user cleared it".
+      if (!state.active || state.userModified) return snapshot()
       if (stored.error !== undefined) {
         // Keep the file: the user may want to recover it, and a later save overwrites it.
         state.readError = stored.error
@@ -284,6 +378,7 @@ export function createPromptController(options) {
       }
       state.user = stored.prompt
       state.persisted = true
+      state.revision += 1
       applySection()
       log.info('prompt.hydrate', { source: source(), stored: true, chars: stored.prompt.length })
       return snapshot()
@@ -299,8 +394,19 @@ export function createPromptController(options) {
         log.warn('prompt.update-rejected', { reason: parsed.error })
         return { status: 400, body: { error: parsed.error } }
       }
+      // Two browsers share this one file. A save that names the revision it read is
+      // refused when another tab has moved on, instead of silently overwriting it.
+      const expected = body !== null && typeof body === 'object' && Number.isFinite(body.expectedRevision)
+        ? body.expectedRevision
+        : undefined
+      if (expected !== undefined && expected !== state.revision) {
+        log.warn('prompt.update-rejected', { reason: 'revision_conflict' })
+        return { status: 409, body: { error: 'revision_conflict', ...snapshot() } }
+      }
       const next = parsed.reset ? undefined : parsed.prompt
+      state.userModified = true
       state.user = next
+      state.revision += 1
       const write = await (writes = writes.then(() => writeStoredPrompt(state.path, next)))
       if (!state.active) return { status: 503, body: { error: 'inactive' } }
       state.persisted = write.persisted
@@ -319,10 +425,13 @@ export function createPromptController(options) {
      *
      * @param {import('node:http').IncomingMessage} req - request.
      * @param {import('node:http').ServerResponse} res - response.
+     * @param {{ bindHost?: string, trustedHosts?: readonly string[] }} [overrides] -
+     *   authorities known only once the route is registered.
      */
-    async handle(req, res) {
+    async handle(req, res, overrides) {
+      const active = overrides === undefined ? policy : { ...policy, ...overrides }
       if (req.method === 'GET' || req.method === 'HEAD') {
-        const readPolicy = crossSiteError(req)
+        const readPolicy = crossSiteError(req, active)
         if (readPolicy !== undefined) {
           sendJson(res, 403, { error: readPolicy })
           return
@@ -334,9 +443,9 @@ export function createPromptController(options) {
         sendJson(res, 405, { error: 'method_not_allowed' })
         return
       }
-      const policy = requestPolicyError(req)
-      if (policy !== undefined) {
-        sendJson(res, 403, { error: policy })
+      const rejection = requestPolicyError(req, active)
+      if (rejection !== undefined) {
+        sendJson(res, 403, { error: rejection })
         return
       }
       let body

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-mosaic",
-  "version": "0.2.1",
+  "version": "1.0.0",
   "type": "module",
   "description": "Lightweight visual answers for DeepSeek Harness: one compact visual style, an editable model prompt, dsh-view components, Mermaid diagrams, a sandboxed HTML/JS escape hatch, local-first interactions, and link-only media cards.",
   "author": "imwhatiam",