feat(web): render Mermaid diagrams with pele#21472

10 historical turns, 5 command tools per turn, 878.9 KiB retained MCP result per historical turn, and a 1.05 MiB retained result in the measured turn.

• Codex decoded thread snapshot: 108.5 KiB
• Claude decoded thread snapshot: 108.8 KiB

⚙️ Run configuration

• Configuration used: Path: .coderabbit.config.ts
• Review profile: CHILL
• Plan: Advanced
• Run ID: a3838eeb-7c70-46d9-9947-8b965cc5f414

📥 Commits

Reviewing files that changed from the base of the PR and between 532fd1258d9f49a699f1a499f08967fb11b04fe0 and 27aeb7d769831b02f4cd7779fcda7f6b1ac9b6a3.

⛔ Files ignored due to path filters: 1

• pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml

📒 Files selected for processing: 4

• apps/web/package.json
• apps/web/src/components/ChatMarkdown.tsx
• apps/web/src/components/chat/MermaidDiagram.tsx
• pnpm-workspace.yaml

Included review availability: This review used your included allowance. Your plan provides up to 10 included reviews per hour; 8 remain after this review.

The web app replaces Mermaid with Pele to render diagrams. The component loads Pele’s core and diagram-type chunks, sanitizes rendered SVG, reports load and render errors, and creates expanded images from rendered diagrams. Pele theme variables map to the app’s semantic color tokens.

Changes: Diagram rendering

Layer / File(s)	Summary
Pele loading and theme integration apps/web/package.json, pnpm-workspace.yaml, apps/web/src/components/chat/MermaidDiagram.tsx, apps/web/src/components/ChatMarkdown.tsx, apps/web/src/index.css	The app replaces the mermaid dependency with pele. The component loads Pele’s core and detected diagram-type chunks. The caller no longer passes a theme prop, and CSS defines Pele theme variables.
SVG sanitization and renderer mounting apps/web/src/components/chat/MermaidDiagram.tsx, apps/web/src/components/chat/MermaidDiagram.browser.test.tsx	The component replaces the exported Mermaid sanitizer with internal SVG sanitizers and mounts Pele with links, images, and zoom disabled. The deleted browser tests covered SVG sanitization and MathML handling.
Render errors and diagram expansion apps/web/src/components/chat/MermaidDiagram.tsx	The component displays load and render errors, retries failed loads by clearing cached failures, and expands a cloned SVG with inherited Pele color variables.

Priority: ➖ Normal

Estimated code review effort: 3 (Moderate) | ~25 minutes

Change: Feature

Sequence Diagram(s)

mermaid

1	sequenceDiagram
2	participant ChatMarkdown
3	participant MermaidDiagram
4	participant Pele
5	participant ExpandedImage
6	ChatMarkdown->>MermaidDiagram: source and expand callback
7	MermaidDiagram->>Pele: load core and detected diagram chunk
8	Pele-->>MermaidDiagram: mounted SVG
9	MermaidDiagram->>MermaidDiagram: sanitize rendered SVG
10	MermaidDiagram->>ExpandedImage: clone SVG and create image URL

Suggested reviewers: nikitamgrimm, noojuno

Diagrams now render with Pele instead of Mermaid. Pele drops remote url() styling values from diagram source before they reach the page, and style blocks are stripped. No concrete defect remains open, so the change is ready to merge after normal checks.

The replacement changes security-sensitive rendering behavior, but the inspected implementation sanitizes generated SVG before insertion and restricts active content. No new exploitable path was established. Browser-level behavior and coverage of every renderer output path remain unverified.

Retained concerns No architecture-level concerns identified.

Security review details

Security Blast Radius

• inferred — An attacker able to supply diagram-bearing content that another user views can reach this browser rendering boundary. A boundary failure could therefore affect the viewing user's application context. The inspected path does not establish backend privilege gain, cross-tenant access, or propagation beyond affected viewers.

Security Findings and Attack Paths

• inferred — The supplied remote-CSS disclosure candidate remains deferred, not verified. Compared with base, head removes CSS URL rewriting while leaving style attributes outside its explicit forbid list. Counterevidence is substantial: the inspected Pele CSS helper permits selected properties and rejects values containing URL functions, expression functions, javascript schemes, CSS escapes, imports, and image-set. This narrows the candidate but is not exhaustive proof for every emitted style path.

Trust Boundaries and Controls

• observed — The actual Pele lazy entrypoint exports the inspected mount implementation. Its SVG insertion helper calls replaceChildren with the sanitizer's returned node, so sanitization completes before that SVG is connected. Its error display uses textContent. This resolves the specific insertion-order uncertainty for the inspected 1.8.0 mount path.

Resilience and Maintainability Implications

• observed — Successful mounts are owned by a component-local container and destroyed on effect cleanup. The inspected dependency disconnects resize observation, disables refresh after destruction, and removes pending font-refresh dispatch ownership. Failed core or type loads can clear their cached failure for retry. These controls support ordinary replacement, unmount, and concurrent-instance containment; exceptional partial-initialization behavior was not runtime-verified.

Hardening Proposals

• proposed — Add replacement integration contracts for remote-resource rejection, sanitization before connection, MathML namespace restrictions, and teardown across source changes and failures. These would make the security guarantees explicit when the renderer dependency changes, rather than relying solely on its current implementation.

^Failed Failed checks: 1 warning

Check name	Status	Explanation	Resolution
Description check	Warning	The description thoroughly explains the problem, implementation, behavior changes, benchmarks, visual results, and verification. It does not include the required Scope and approval information or an e…	Add a Scope and approval section. Link the triaged issue or discussion, include explicit maintainer approval of the direction and scope, or explain why this focused change qualifies for an exemption. Add the required Problem and Change head…

^Passed Passed checks: 3 passed

Check name	Status	Explanation
Title check	Passed	The title clearly and concisely describes the primary change: replacing Mermaid rendering with Pele in the web application.
Linked Issues check	Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	Passed	Check skipped because no linked issues were found for this pull request.

Full details: Description check

Explanation

The description thoroughly explains the problem, implementation, behavior changes, benchmarks, visual results, and verification. It does not include the required Scope and approval information or an explicit maintainer approval link.

Resolution

Add a Scope and approval section. Link the triaged issue or discussion, include explicit maintainer approval of the direction and scope, or explain why this focused change qualifies for an exemption. Add the required Problem and Change headings if repository validation expects the template structure exactly. 

📝 Generate docstrings

• Commit to this branch
• Create a new PR

🧪 Generate unit tests (beta)

• Commit to this branch
• Create a new PR