[Patrick-Erichsen]

Summary

• Render fenced mermaid blocks through the shared MarkdownPreview component.
• Route skill SKILL.md rendering through MarkdownPreview so skill pages get the same Mermaid support.
• Add fallback cleanup for failed Mermaid renders so temporary render nodes do not leak into the page.

Proof

• Downloaded xrowgmbh-gitlab-agent with the ClawHub CLI, seeded it into a disposable Convex dev deployment, and verified the real local ClawHub page renders the Mermaid diagram.
• Inline screenshot proof is published in the ClawHub UI proof comment on this PR.

Tests

• bunx vitest run src/components/MarkdownPreview.test.tsx
• bunx vitest run src/components/SkillDetailTabs.test.tsx
• bun run ci:static
• bun run ci:unit
• bun run ci:types-build
• AUTOREVIEW_AUTO_TESTS=0 .agents/skills/autoreview/scripts/autoreview --mode local --reviewer codex --fallback-reviewer none

Closes #2615

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
clawhub	Ready	Preview, Comment	Jun 12, 2026 5:39pm

[Patrick-Erichsen]

ClawHub UI Proof

Status: passed
Mode: feature
Scenario: Mermaid rendering on seeded skill page
Provider: playwright-chromium
Baseline: not run for feature proof.
Candidate: pe/2615-mermaid-rendering

Seeded xrowgmbh-gitlab-agent SKILL.md renders Mermaid diagram

Raw proof files: https://github.com/openclaw/clawhub/tree/qa-artifacts/clawhub-ui-proof/pr-2616/clawhub-2615-ui-proof

[clawsweeper]

Codex review: needs maintainer review before merge. Reviewed June 12, 2026, 1:42 PM ET / 17:42 UTC.

Summary
The PR adds lazy Mermaid rendering for fenced markdown blocks, routes skill README content through the shared MarkdownPreview component, and adds related styles, tests, and dependencies.

Reproducibility: not applicable. This PR implements a new rendering capability, while current-main source and the linked public skill clearly establish the existing plain-code behavior.

Review metrics: 2 noteworthy metrics.

• Change surface: 6 files, +394/-17. The feature is focused but adds a new client-side rendering dependency and changes a shared Markdown component.
• Behavior proof: 1 real seeded skill flow verified. The published browser artifact directly exercises the user-visible Mermaid rendering path rather than relying only on mocks.

Merge readiness
Overall: 🐚 platinum hermit
Proof: 🦞 diamond lobster ✨ media proof bonus
Patch quality: 🐚 platinum hermit
Result: ready for maintainer review.

Overall follows the weaker of proof and patch quality, so missing proof can cap an otherwise strong patch.

Rank-up moves:

• none.

Next step before merge

• [P2] The implementation appears mergeable and needs ordinary maintainer approval rather than an automated repair PR.

Security
Cleared: The new dependency and SVG rendering are consistent with the feature, Mermaid is initialized in strict mode, and no concrete security or supply-chain regression was found.

Review details

Best possible solution:

Land the shared MarkdownPreview implementation after routine maintainer approval, then allow the linked issue to close through this PR.

Do we have a high-confidence way to reproduce the issue?

Not applicable; this PR implements a new rendering capability, while current-main source and the linked public skill clearly establish the existing plain-code behavior.

Is this the best way to solve the issue?

Yes; extending the existing sanitized shared MarkdownPreview and reusing it on skill pages is narrower and more maintainable than introducing a second skill-specific renderer.

AGENTS.md: found and applied where relevant.

Codex review notes: model internal, reasoning high; reviewed against b2447d750a2c.

Label changes

Label changes:

• add P3: This is a useful, low-urgency enhancement to skill documentation rendering rather than a regression or core availability problem.
• add proof: sufficient: Contributor real behavior proof is sufficient. The published Playwright-Chromium screenshot directly shows the Mermaid diagram rendered after the patch on a real locally seeded ClawHub skill page.
• add proof: 📸 screenshot: Contributor real behavior proof includes screenshot evidence. The published Playwright-Chromium screenshot directly shows the Mermaid diagram rendered after the patch on a real locally seeded ClawHub skill page.
• add rating: 🐚 platinum hermit: Overall readiness is 🐚 platinum hermit; proof is 🦞 diamond lobster and patch quality is 🐚 platinum hermit.
• add status: 👀 ready for maintainer look: ClawSweeper has no concrete contributor-facing blocker left for this PR. Sufficient (screenshot): The published Playwright-Chromium screenshot directly shows the Mermaid diagram rendered after the patch on a real locally seeded ClawHub skill page.

Label justifications:

• P3: This is a useful, low-urgency enhancement to skill documentation rendering rather than a regression or core availability problem.
• rating: 🐚 platinum hermit: Overall readiness is 🐚 platinum hermit; proof is 🦞 diamond lobster and patch quality is 🐚 platinum hermit.
• status: 👀 ready for maintainer look: ClawSweeper has no concrete contributor-facing blocker left for this PR. Sufficient (screenshot): The published Playwright-Chromium screenshot directly shows the Mermaid diagram rendered after the patch on a real locally seeded ClawHub skill page.
• proof: sufficient: Contributor real behavior proof is sufficient. The published Playwright-Chromium screenshot directly shows the Mermaid diagram rendered after the patch on a real locally seeded ClawHub skill page.
• proof: 📸 screenshot: Contributor real behavior proof includes screenshot evidence. The published Playwright-Chromium screenshot directly shows the Mermaid diagram rendered after the patch on a real locally seeded ClawHub skill page.

Evidence reviewed

What I checked:

• Current main lacks Mermaid rendering: The current shared renderer supports sanitized Markdown, image proxying, and optional Shiki highlighting but has no Mermaid dependency or diagram-specific rendering path. (src/components/MarkdownPreview.tsx:14, b2447d750a2c)
• Focused implementation: The PR detects Mermaid code fences in the shared pre renderer, lazily invokes Mermaid in strict security mode, cleans temporary render nodes, and falls back to source code on failure. (src/components/MarkdownPreview.tsx:91, b0469ac25ebe)
• Real behavior proof: Direct inspection of the published Playwright screenshot shows the seeded xrowgmbh skill’s complete workflow diagram rendered within the real ClawHub UI. (b0469ac25ebe)
• Validation: Unit, static, types-build, package, HTTP e2e, Playwright smoke, CodeQL, and secret-scanning checks passed on the reviewed head; no review finding was supported by the diff. (b0469ac25ebe)
• Feature provenance: Follow history and blame attribute the current shared MarkdownPreview and skill README rendering paths to Patrick Erichsen’s v0.21.0 release work, providing a strong ownership signal beyond authorship of this PR. (src/components/SkillDetailTabs.tsx:171, a63d153b1d46)
• Linked issue remains active: The related feature issue is open and this PR is its explicit implementation path, so both should remain open until the branch lands or is declined. (b0469ac25ebe)

Likely related people:

• Patrick-Erichsen: Git history attributes the existing shared MarkdownPreview, its tests, and the skill README rendering path to Patrick Erichsen’s prior v0.21.0 release work. (role: recent renderer contributor; confidence: high; commits: a63d153b1d46; files: src/components/MarkdownPreview.tsx, src/components/MarkdownPreview.test.tsx, src/components/SkillDetailTabs.tsx)

What the crustacean ranks mean

• 🦀 challenger crab: rare, exceptional readiness with strong proof, clean implementation, and convincing validation.
• 🦞 diamond lobster: very strong readiness with only minor maintainer review expected.
• 🐚 platinum hermit: good normal PR, likely mergeable with ordinary maintainer review.
• 🦐 gold shrimp: useful signal, but proof or patch confidence is still limited.
• 🦪 silver shellfish: thin signal; proof, validation, or implementation needs work.
• 🧂 unranked krab: not merge-ready because proof is missing/unusable or there are serious correctness or safety concerns.
• 🌊 off-meta tidepool: rating does not apply to this item.

Shiny media proof means a screenshot, video, or linked artifact directly shows the changed behavior. Runtime, network, CSP, and security claims still need visible diagnostics.

How this review workflow works

• ClawSweeper keeps one durable marker-backed review comment per issue or PR.
• Re-runs edit this comment so the latest verdict, findings, and automation markers stay together instead of adding duplicate bot comments.
• A fresh review can be triggered by eligible @clawsweeper re-review comments, exact-item GitHub events, scheduled/background review runs, or manual workflow dispatch.
• PR/issue authors and users with repository write access can comment @clawsweeper re-review or @clawsweeper re-run on an open PR or issue to request a fresh review only.
• Maintainers can also comment @clawsweeper review to request a fresh review only.
• Fresh-review commands do not start repair, autofix, rebase, CI repair, or automerge.
• Maintainer-only repair and merge flows require explicit commands such as @clawsweeper autofix, @clawsweeper automerge, @clawsweeper fix ci, or @clawsweeper address review.
• Maintainers can comment @clawsweeper explain to ask for more context, or @clawsweeper stop to stop active automation.

[vercel]

Suggested change

	function MarkdownPre({ children, ...props }: ComponentPropsWithoutRef<"pre">) {
	function MarkdownPre({
	children,
	node: _node,
	...props
	}: ComponentPropsWithoutRef<"pre"> & { node?: unknown }) {

Custom pre component spreads react-markdown's injected node prop onto the DOM <pre>, producing an invalid node attribute and a React warning for every non-mermaid code block.