feat(frontend): render Mermaid markdown diagrams (#462)#994
Open
rodboev wants to merge 6 commits into
Open
Conversation
roborev: Combined Review (
|
roborev: Combined Review (
|
27ea0c1 to
383d87d
Compare
roborev: Combined Review (
|
roborev: Combined Review (
|
roborev: Combined Review (
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Mermaid fenced blocks in transcript Markdown currently go through the same code-block path as TypeScript, shell, and other ordinary source snippets, so diagrams appear as raw Mermaid text in the session viewer. This adds a frontend-only Mermaid rendering path for session message content while keeping backend export, storage, parser, and API behavior unchanged.
The implementation routes
mermaidcode segments from the transcript viewer into a dedicated Mermaid component, initializes the official Mermaid browser library through a small wrapper with SVG text labels, and sanitizes rendered SVG before insertion. Non-Mermaid fences continue through the existing code block component. Invalid Mermaid syntax falls back inside the message with localized status text and the original source still readable instead of breaking the surrounding transcript.Focused validation covers the Markdown renderer, message-content behavior for rendered and failed Mermaid blocks, the Mermaid wrapper sanitation boundary, and the Svelte/TypeScript frontend check. Mermaid's own syntax breadth and browser layout fidelity stay owned by the Mermaid runtime; this change proves the agentsview routing, sanitation boundary, and graceful fallback behavior.
Fixes #462