feat(chat): render bounded Mermaid diagrams with source fallback

CHANGELOG.md

@@ -8,6 +8,7 @@ between releases do not reach them. Remote-PC runtime bundles are versioned sepa
 ## [Unreleased]
 
 ### Added
+- Render completed Mermaid chat diagrams on demand, with original source, copy and an accessible expanded zoom/fit view. Streaming, rejected or failed diagrams keep their source.
 - **Deep links.** The address now says where you are, and opens there: the PC, the workspace (by id and a short slug of its name, so `?ws=w2K-herdr-web-ui&pane=w2K:p1&view=chat` reads like the place), the pane and its lens, an open file, a Settings page and group (`&settings=about&section=updates`), the New workspace dialog with its fields filled (`?new=workspace&cwd=…&name=…&agent=…`; a link never creates anything), and a collapsed sidebar (`&sidebar=hidden`). Opening another pane is a history entry, so Back returns to the last one. A link to a pane that has closed opens its workspace, a link to nothing open says so, and **Copy link** in the header's More menu copies the address on a phone.
   ([#675](https://github.com/devswha/herdr-web-ui/pull/675) by @phirschybar, [#762](https://github.com/devswha/herdr-web-ui/pull/762))
 

docs/development.md

@@ -469,3 +469,29 @@ input regression matrix.
 | [`docs/`](.) | Remote PCs, updates, flow control, chat audit, brand assets and README media (`docs/media/`) |
 | [`site/`](../site/) | The website, built by `scripts/build-site.ts` and deployed by GitHub Pages |
 | [`DESIGN.md`](../DESIGN.md) | Design tokens and UI conventions |
+
+
+## Chat diagrams
+
+Completed, explicitly marked Mermaid fences can show a diagram or the original source. The
+expanded native dialog offers zoom, fit and keyboard controls; Escape closes it and returns focus.
+Streaming, malformed, oversized, unavailable and unsupported input retains the existing code view.
+
+Mermaid 11.16.1 is pinned and loaded on demand; its transitive KaTeX uses the same 0.18.9 as the
+app to avoid the older trust-bypass advisory. No external rendering service receives the source.
+The renderer fixes strict configuration, disables HTML labels and refuses configuration overrides,
+HTML, custom CSS, click/resource syntax and diagram types outside the supported grammar set.
+The input gate accepts graph/flowchart, sequence, class, state, ER, pie, journey, Gantt, Git graph,
+mindmap, timeline, quadrant, Sankey, block and packet. Rejected forms remain readable/copyable.
+
+An application queue serializes initialize/render/owned cleanup, caps pending work at eight, and
+keeps at most 32 SVGs/4 MiB UTF-8. Source is capped at 20,000 characters and the library edge limit
+at 200; output has a 1 MiB/dimension budget. Validated SVG is displayed only in Blob images, without
+bindFunctions. The temporary renderer still runs in the app document on the main thread; these
+limits do not guarantee interruption or complete execution isolation.
+
+`bun scripts/mermaid-browser-qa.ts` uses the real pinned renderer and enforcing app CSP with
+synthetic input. It is registered in `scripts/ci-browser.sh`; screenshots use UI_EVIDENCE_DIR.
+
+Synthetic browser evidence: [mobile diagram](screenshots/mermaid/mermaid-mobile.png) and
+[expanded diagram](screenshots/mermaid/mermaid-expanded.png).

package.json

@@ -34,6 +34,7 @@
     "@xterm/xterm": "5.5.0",
     "katex": "^0.18.9",
     "lucide-react": "^1.47.0",
+    "mermaid": "11.16.1",
     "qrcode-generator": "^2.0.4",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
@@ -52,5 +53,8 @@
   },
   "patchedDependencies": {
     "@xterm/xterm@5.5.0": "patches/@xterm%2Fxterm@5.5.0.patch"
+  },
+  "overrides": {
+    "katex": "0.18.9"
   }
 }

scripts/AGENTS.md

@@ -1,6 +1,6 @@
 # scripts/
 
-Build, code generation, CI orchestration and the browser QA harness. `tsconfig.tools.json` typechecks the critical check, build, CI and release entrypoints and their imports; `build-xterm.ts` is also included through `vite.config.ts`. Only the `*.test.ts` files are discovered by a test runner, so the rules that decide whether a check actually runs live in this directory.
+Build, code generation, CI orchestration and the browser QA harness. `tsconfig.tools.json` typechecks the critical check, build, CI, release and mermaid browser entrypoints and their imports; `build-xterm.ts` is also included through `vite.config.ts`. Only the `*.test.ts` files are discovered by a test runner, so the rules that decide whether a check actually runs live in this directory.
 
 ## SUITES AND DISCOVERY
 - `ci-tests.ts` globs `{src,shared,server,scripts,telemetry}/**/*.test.ts` and splits the result into exactly two suites with one predicate: a file needs herdr when it ends in `.contract.test.ts`, or it is `server/updater.test.ts`, or it sits under `server/herdr/` or `server/pty/`. Those last three run in the integration suite despite their plain names. A new test that needs a live herdr must take the `.contract.test.ts` name or be added to that predicate; otherwise it lands in the unit suite, where the socket does not exist.

scripts/ci-browser.sh

@@ -63,6 +63,7 @@ run_script scripts/settings-pages-demo-regression.ts
 run_script scripts/deep-link-demo-regression.ts
 run_script scripts/chat-history-browser-qa.ts
 run_script scripts/math-browser-qa.ts
+run_script scripts/mermaid-browser-qa.ts
 run_script scripts/file-viewer-regression.ts
 run_script scripts/keyboard-viewport-regression.ts
 run_script scripts/file-viewer-mobile-regression.ts

scripts/ci-browser.test.ts

@@ -59,8 +59,9 @@ describe("browser lane", () => {
   it("summarizes every script and exits zero on success without enabling local evidence", async () => {
     const { text, code, evidence } = await lane();
     expect(code).toBe(0);
-    expect(rows(text)).toHaveLength(29);
+    expect(rows(text)).toHaveLength(30);
     expect(rows(text).map((row) => row.script)).toContain("scripts/pending-pane-switch-regression.ts");
+    expect(rows(text).map((row) => row.script)).toContain("scripts/mermaid-browser-qa.ts");
     expect(rows(text).map((row) => row.script)).toContain("scripts/terminal-viewport-regression.ts");
     expect(rows(text).map((row) => row.script)).toContain("scripts/palette-machines-demo-regression.ts");
     expect(rows(text).map((row) => row.script)).toContain("scripts/restored-draft-demo-regression.ts");