From b987197fb4d0ab9a55c137a0931ddc530d0ac9fa Mon Sep 17 00:00:00 2001
From: Ralf Anton Beier <ralf_beier@me.com>
Date: Tue, 12 May 2026 18:00:40 +0200
Subject: [PATCH 1/2] fix(serve): emit fenced ```mermaid bodies verbatim, not
 HTML-escaped
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

`render_markdown` injected synthetic `<pre class="mermaid">` wrappers but
still let the fenced body flow through pulldown-cmark's `html::push_html`,
which HTML-entity-escapes Event::Text — so mermaid's core `-->` arrow
rendered as `--&gt;` (and class-diagram `<|--` as `&lt;|--`), and
mermaid.js rejected the diagram with "Syntax error in text". Reported by
a user against v0.6.0 and v0.8.0.

Re-tag the in-mermaid Text segments as Event::Html so they pass through
unescaped. Mermaid diagram source contains no HTML tags; a `</pre>`
smuggled into a ```mermaid block would at worst close the block early,
and `<script>` etc. are still stripped by the `sanitize_html` pass.
(`document.rs`'s separate document renderer already emits the body
verbatim via `join("\n")` — only `render_markdown` had the bug.)

Coverage:
- two markdown.rs unit tests: stateDiagram `[*] -->` arrows survive
  verbatim with no `--&gt;`; classDiagram `<|--` survives with no `&lt;|--`.
- new tests/playwright/mermaid.spec.ts: ARCH-CORE-001's embedded
  ```mermaid flowchart serves with `Config --> Store` verbatim, and
  mermaid.js renders it to an SVG with no "Syntax error" box.

Fixes REQ-032.

Implements: REQ-032
Verifies: REQ-032

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 rivet-core/src/markdown.rs       | 47 +++++++++++++++++++++++++++++--
 tests/playwright/mermaid.spec.ts | 48 ++++++++++++++++++++++++++++++++
 2 files changed, 92 insertions(+), 3 deletions(-)
 create mode 100644 tests/playwright/mermaid.spec.ts

diff --git a/rivet-core/src/markdown.rs b/rivet-core/src/markdown.rs
index 2b0202da..865cd6fc 100644
--- a/rivet-core/src/markdown.rs
+++ b/rivet-core/src/markdown.rs
@@ -128,9 +128,15 @@ pub fn render_markdown(input: &str) -> String {
             in_mermaid = false;
             Some(Event::Html(MERMAID_CLOSE.into()))
         }
-        // Inside a mermaid block, pass text through as-is (pulldown-cmark
-        // emits the fenced body as Event::Text segments).
-        Event::Text(_) if in_mermaid => Some(event),
+        // Inside a mermaid block, emit the fenced body verbatim. pulldown-cmark
+        // delivers it as Event::Text segments, but `html::push_html` HTML-entity-
+        // escapes Text events — turning mermaid's core `-->` arrow into `--&gt;`
+        // and `<|--` into `&lt;|--`, which mermaid.js then rejects with "Syntax
+        // error in text". Re-tag the segments as Event::Html so they pass through
+        // unescaped (mermaid diagram source contains no HTML tags; a `</pre>`
+        // smuggled inside a ```mermaid block would at worst end the block early,
+        // and `<script>` etc. are still stripped by sanitize_html below).
+        Event::Text(t) if in_mermaid => Some(Event::Html(t)),
         // Drop all other raw HTML events for XSS defence.
         Event::Html(_) | Event::InlineHtml(_) => None,
         other => Some(other),
@@ -444,4 +450,39 @@ mod tests {
             "sentinel label must not leak, got: {html}"
         );
     }
+
+    // Regression: mermaid body must NOT be HTML-entity-escaped. `-->` is core
+    // mermaid syntax (flowchart/stateDiagram arrows); if it renders as `--&gt;`
+    // mermaid.js fails with "Syntax error in text". Reported against v0.6.0/v0.8.0.
+    // rivet: verifies REQ-032
+    #[test]
+    fn mermaid_body_not_html_escaped() {
+        let input = "```mermaid\nstateDiagram-v2\n  [*] --> init_mode\n  init_mode --> run_mode : wake\n```";
+        let html = render_markdown(input);
+        assert!(
+            html.contains("[*] --> init_mode"),
+            "arrow must survive verbatim, not as --&gt;, got: {html}"
+        );
+        assert!(
+            html.contains("init_mode --> run_mode : wake"),
+            "arrow must survive verbatim, got: {html}"
+        );
+        assert!(
+            !html.contains("--&gt;"),
+            "mermaid body must not be HTML-entity-escaped, got: {html}"
+        );
+        // The whole diagram is one logical block inside <pre class="mermaid">,
+        // newlines preserved, no paragraph splitting.
+        assert!(html.contains("<pre class=\"mermaid\">stateDiagram-v2"), "got: {html}");
+    }
+
+    // Class-diagram arrows use `<` and `>` too (`<|--`, `*--`, `o--`); those
+    // must survive verbatim as well.
+    // rivet: verifies REQ-032
+    #[test]
+    fn mermaid_class_diagram_arrows_not_escaped() {
+        let html = render_markdown("```mermaid\nclassDiagram\n  Animal <|-- Dog\n```");
+        assert!(html.contains("Animal <|-- Dog"), "got: {html}");
+        assert!(!html.contains("&lt;|--"), "got: {html}");
+    }
 }
diff --git a/tests/playwright/mermaid.spec.ts b/tests/playwright/mermaid.spec.ts
new file mode 100644
index 00000000..c7a15709
--- /dev/null
+++ b/tests/playwright/mermaid.spec.ts
@@ -0,0 +1,48 @@
+import { test, expect } from "@playwright/test";
+
+// Regression coverage for the fenced-mermaid HTML-escaping bug (reported
+// against v0.6.0 and v0.8.0): `render_markdown` passed the body of a
+// ```mermaid fenced block through pulldown-cmark's `html::push_html`, which
+// HTML-entity-escapes Text events — turning mermaid's core `-->` arrow into
+// `--&gt;` (and class-diagram `<|--` into `&lt;|--`). mermaid.js then failed
+// with "Syntax error in text" and the diagram never rendered.
+//
+// ARCH-CORE-001 in artifacts/architecture.yaml has a real ```mermaid
+// `flowchart LR` with `-->` arrows in its description, so it doubles as the
+// end-to-end fixture.
+
+test.describe("Mermaid diagram rendering", () => {
+  test("fenced mermaid body is emitted verbatim — arrows not HTML-escaped", async ({
+    request,
+  }) => {
+    // Raw HTML response: no JS runs, so mermaid.js hasn't transformed the
+    // <pre> yet — we see exactly what render_markdown produced.
+    const res = await request.get("/artifacts/ARCH-CORE-001");
+    expect(res.status()).toBe(200);
+    const html = await res.text();
+    expect(html).toContain('<pre class="mermaid">');
+    // The flowchart arrow must survive verbatim.
+    expect(html).toContain("Config --> Store");
+    // ...and must NOT be entity-escaped anywhere in the page.
+    expect(html).not.toContain("--&gt;");
+  });
+
+  test("mermaid.js renders the diagram to SVG with no syntax error", async ({
+    page,
+  }) => {
+    await page.goto("/artifacts/ARCH-CORE-001");
+
+    // mermaid (startOnLoad) parses the .mermaid element's text and replaces
+    // it with an inline <svg>. mermaid SVGs carry an aria-roledescription
+    // like "flowchart-v2"; matching either that or `.mermaid svg` is robust
+    // across the wrapper shape mermaid uses.
+    const rendered = page
+      .locator(".mermaid svg, svg[aria-roledescription]")
+      .first();
+    await expect(rendered).toBeVisible({ timeout: 15_000 });
+
+    // On a parse failure mermaid injects a visible "Syntax error in text"
+    // box instead of the diagram — assert that never happens.
+    await expect(page.locator("body")).not.toContainText("Syntax error");
+  });
+});

From 90bb1a132fcc5b76fe334166c8453002e8ceb438 Mon Sep 17 00:00:00 2001
From: Ralf Anton Beier <ralf_beier@me.com>
Date: Tue, 12 May 2026 19:18:02 +0200
Subject: [PATCH 2/2] style: cargo fmt the new mermaid regression test

Wraps an over-long assert!() the formatter flagged. No behaviour change.

Trace: skip

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 rivet-core/src/markdown.rs | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/rivet-core/src/markdown.rs b/rivet-core/src/markdown.rs
index 865cd6fc..6745fad8 100644
--- a/rivet-core/src/markdown.rs
+++ b/rivet-core/src/markdown.rs
@@ -473,7 +473,10 @@ mod tests {
         );
         // The whole diagram is one logical block inside <pre class="mermaid">,
         // newlines preserved, no paragraph splitting.
-        assert!(html.contains("<pre class=\"mermaid\">stateDiagram-v2"), "got: {html}");
+        assert!(
+            html.contains("<pre class=\"mermaid\">stateDiagram-v2"),
+            "got: {html}"
+        );
     }
 
     // Class-diagram arrows use `<` and `>` too (`<|--`, `*--`, `o--`); those