feat(frontend): mermaid diagrams + preview card auto-close fix by dimakis · Pull Request #434 · dimakis/mitzo

dimakis · 2026-07-02T22:12:23Z

Summary

Mermaid rendering: Added mermaid package and MermaidBlock component. Code blocks tagged ```mermaid now render as interactive diagrams (dark theme) instead of raw code. Works in both chat messages and file viewer.
Preview card auto-close fix: Memoized the components object in TextBubble via useMemo. Previously, every parent re-render (voice state, tokens, connection changes) recreated component functions, causing react-markdown to unmount/remount the tree and reset MarkdownPreviewCard expanded state.

Test plan

Send a message containing a mermaid code block — should render as a diagram, not raw code
Expand a markdown preview card inline — should stay open indefinitely until manually closed
Verify normal code blocks still render with syntax highlighting and copy button
Verify file viewer renders mermaid diagrams in .md files
Check mermaid fallback: invalid syntax should show raw code block

🤖 Generated with Claude Code

dimakis

Centaur Review

Found 6 issue(s) (2 warning).

`frontend/src/components/MermaidBlock.tsx`

Solid PR with good test coverage for mermaid rendering and session state tracking. Main concerns: module-scoped mutable counter for mermaid IDs could cause issues under concurrent rendering, and the transport default flip lacks EventSource feature detection as a safety net.

🟡 unsafe_assumptions (L23): Module-scoped let renderCounter = 0 is shared across all MermaidBlock instances. In React StrictMode (dev) or concurrent rendering, effects run twice per mount, causing counter skips. More importantly, if two MermaidBlock instances render concurrently, ++renderCounter is not atomic with the subsequent mermaid.render(id, code) — a second component can increment the counter between the first's increment and its render call, yielding duplicate or mismatched IDs. Consider using useId() (React 18+) or useRef with a per-instance counter. [fixable]
🔵 style (L5): mermaid.initialize() runs at module import time as a side effect. This hard-codes the dark theme — if the app ever supports light mode (or the user has useTheme set to light), diagrams will render with dark theme regardless. Consider deferring initialization or reading the current theme. [fixable]

`frontend/src/client-store.ts`

Solid PR with good test coverage for mermaid rendering and session state tracking. Main concerns: module-scoped mutable counter for mermaid IDs could cause issues under concurrent rendering, and the transport default flip lacks EventSource feature detection as a safety net.

🟡 regressions (L27): Default transport flipped from WS to SSE. Any user without mitzo:transport in localStorage will silently switch transports on next load. The SSE path is well-tested, but there's no runtime feature detection — if EventSource is unavailable (e.g. some Capacitor WebView edge cases), no graceful fallback to WS occurs. Consider adding typeof EventSource !== 'undefined' to the condition. [fixable]

`frontend/src/lib/markdown-config.tsx`

Solid PR with good test coverage for mermaid rendering and session state tracking. Main concerns: module-scoped mutable counter for mermaid IDs could cause issues under concurrent rendering, and the transport default flip lacks EventSource feature detection as a safety net.

🔵 missing_tests (L28): The new pre component in markdownComponents (used by FileViewer and MarkdownPreviewCard) has mermaid detection logic duplicated from MessageBubble, but no test coverage. If this logic diverges or breaks, there's no safety net. Consider adding a test for markdownComponents.pre similar to the MessageBubble tests. [fixable]
🔵 style (L15): The className attribute allowlist for <code> elements (code: [...(defaultSchema.attributes?.code ?? []), 'className']) is necessary for mermaid detection but is quite broad — it allows any className through the sanitizer. Since only language-* classes are needed (set by rehype-highlight), consider restricting to a regex pattern if rehype-sanitize supports it, to avoid unintended class injection in the sanitized markdown context. [fixable]

`packages/client/src/protocol-parser.ts`

Solid PR with good test coverage for mermaid rendering and session state tracking. Main concerns: module-scoped mutable counter for mermaid IDs could cause issues under concurrent rendering, and the transport default flip lacks EventSource feature detection as a safety net.

🔵 missing_tests (L295): The session_state_changed message type is handled in the protocol parser but is not defined in the frontend's ServerMessage type union (frontend/src/types/ws-messages.ts). While the parser uses a generic msg object and works at runtime, adding the type to the union would provide compile-time safety and document the protocol contract on the client side. [fixable]

dimakis · 2026-07-02T22:15:29Z

+  },
+});
+
+let renderCounter = 0;


🟡 unsafe_assumptions: Module-scoped let renderCounter = 0 is shared across all MermaidBlock instances. In React StrictMode (dev) or concurrent rendering, effects run twice per mount, causing counter skips. More importantly, if two MermaidBlock instances render concurrently, ++renderCounter is not atomic with the subsequent mermaid.render(id, code) — a second component can increment the counter between the first's increment and its render call, yielding duplicate or mismatched IDs. Consider using useId() (React 18+) or useRef with a per-instance counter. [fixable]

dimakis · 2026-07-02T22:15:29Z

+import mermaid from 'mermaid';
+import { CopyButton } from './CopyButton';
+
+mermaid.initialize({


🔵 style: mermaid.initialize() runs at module import time as a side effect. This hard-codes the dark theme — if the app ever supports light mode (or the user has useTheme set to light), diagrams will render with dark theme regardless. Consider deferring initialization or reading the current theme. [fixable]

dimakis · 2026-07-02T22:15:29Z

+ * Revert SSE: localStorage.removeItem('mitzo:transport'); location.reload();
 */
-const useSSE = typeof window !== 'undefined' && localStorage.getItem('mitzo:transport') === 'sse';
+const useSSE = typeof window !== 'undefined' && localStorage.getItem('mitzo:transport') !== 'ws';


🟡 regressions: Default transport flipped from WS to SSE. Any user without mitzo:transport in localStorage will silently switch transports on next load. The SSE path is well-tested, but there's no runtime feature detection — if EventSource is unavailable (e.g. some Capacitor WebView edge cases), no graceful fallback to WS occurs. Consider adding typeof EventSource !== 'undefined' to the condition. [fixable]

dimakis · 2026-07-02T22:15:29Z

      <table {...props}>{children}</table>
    </div>
  ),
+  pre: ({ children, ...props }) => {


🔵 missing_tests: The new pre component in markdownComponents (used by FileViewer and MarkdownPreviewCard) has mermaid detection logic duplicated from MessageBubble, but no test coverage. If this logic diverges or breaks, there's no safety net. Consider adding a test for markdownComponents.pre similar to the MessageBubble tests. [fixable]

dimakis · 2026-07-02T22:15:29Z

  attributes: {
    ...defaultSchema.attributes,
    img: [...(defaultSchema.attributes?.img ?? []), 'width', 'height'],
+    code: [...(defaultSchema.attributes?.code ?? []), 'className'],


🔵 style: The className attribute allowlist for <code> elements (code: [...(defaultSchema.attributes?.code ?? []), 'className']) is necessary for mermaid detection but is quite broad — it allows any className through the sanitizer. Since only language-* classes are needed (set by rehype-highlight), consider restricting to a regex pattern if rehype-sanitize supports it, to avoid unintended class injection in the sanitized markdown context. [fixable]

dimakis · 2026-07-02T22:15:29Z

      callbacks.onSessionRenamed?.(msg.name as string);
      break;

+    case 'session_state_changed':


🔵 missing_tests: The session_state_changed message type is handled in the protocol parser but is not defined in the frontend's ServerMessage type union (frontend/src/types/ws-messages.ts). While the parser uses a generic msg object and works at runtime, adding the type to the union would provide compile-time safety and document the protocol contract on the client side. [fixable]

…to-close Add mermaid.js support to render diagrams inline instead of showing raw code. Mermaid code blocks are detected in the pre component handler and rendered via a new MermaidBlock component with dark theme styling. Fix MarkdownPreviewCard auto-close bug by memoizing the ReactMarkdown components object in TextBubble. Previously, every parent re-render recreated the components with new function references, causing react-markdown to unmount and remount the tree, resetting expanded state. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

- Replace module-scoped renderCounter with React useId() for stable, concurrent-safe mermaid element IDs - Defer mermaid.initialize() to first render instead of module import - Restrict rehype-sanitize className allowlist to language-* pattern - Add markdown-config pre component test coverage Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

dimakis

Centaur Review

Found 7 issue(s) (2 warning).

`frontend/src/components/MermaidBlock.tsx`

Solid feature addition with good test coverage of the routing logic and a sensible useMemo fix for component stability. Main concerns: explicitly set mermaid's securityLevel: 'strict', verify the markdown-config pre handler didn't regress copy-button behavior in FileViewer/preview cards, and consider deduplicating the mermaid detection logic.

🟡 unsafe_assumptions (L10): Mermaid's securityLevel is not explicitly set. While mermaid v11 defaults to 'strict' (which uses DOMPurify), relying on a library default for security is fragile — a future upgrade could change the default. Explicitly set securityLevel: 'strict' in the mermaid.initialize() call to make the security posture intentional and auditable. [fixable]
🔵 style (L35): containerRef is assigned to the div's ref prop but never read anywhere in the component. It's dead code — remove it unless there's a planned use (e.g., zoom/pan). [fixable]
🔵 missing_tests: There are no unit tests for the MermaidBlock component itself — only for the detection/routing logic in the pre handler. The error fallback path (rendering a plain code block), the loading state (svg is null), and the cleanup of leftover DOM elements on render failure are untested. A component-level test (mocking mermaid.render) would cover these branches.
🔵 bugs (L66): instanceId (from useId()) is used inside the effect but omitted from the dependency array [code]. This is technically safe because useId() returns a stable value, but it will trigger an react-hooks/exhaustive-deps lint warning if that rule is enabled. Adding it to the array is a no-op at runtime and silences the lint. [fixable]
🔵 unsafe_assumptions (L5): The module-level mermaidInitialized flag works in production but can leak state between test runs in Vitest (which reuses the module cache by default). If MermaidBlock tests are added later, they may see stale initialization. Not a production issue, but worth noting for testability.

`frontend/src/lib/markdown-config.tsx`

Solid feature addition with good test coverage of the routing logic and a sensible useMemo fix for component stability. Main concerns: explicitly set mermaid's securityLevel: 'strict', verify the markdown-config pre handler didn't regress copy-button behavior in FileViewer/preview cards, and consider deduplicating the mermaid detection logic.

🟡 regressions (L29): The pre handler in markdown-config.tsx (used by FileViewer and MarkdownPreviewCard) renders a bare <pre> for non-mermaid code blocks, while the pre handler in MessageBubble.tsx wraps them in a code-block-wrapper div with a CopyButton. This means code blocks rendered via markdown-config (file viewer, preview cards) lost their copy button and wrapper styling in this PR, since the pre handler was changed from a passthrough to one that actively returns <pre> without the wrapper. Verify this is intentional — if those contexts previously had copy buttons, this is a regression. [fixable]

`frontend/src/components/MessageBubble.tsx`

Solid feature addition with good test coverage of the routing logic and a sensible useMemo fix for component stability. Main concerns: explicitly set mermaid's securityLevel: 'strict', verify the markdown-config pre handler didn't regress copy-button behavior in FileViewer/preview cards, and consider deduplicating the mermaid detection logic.

🔵 style (L114): The mermaid detection logic (extracting the first child, checking className against /language-mermaid/) is duplicated verbatim between MessageBubble.tsx:114-123 and markdown-config.tsx:29-37. Extract a shared helper (e.g., isMermaidCodeBlock(children): string | null) to keep the two call sites in sync. [fixable]

dimakis · 2026-07-02T22:31:04Z

+function ensureMermaidInit() {
+  if (mermaidInitialized) return;
+  mermaidInitialized = true;
+  mermaid.initialize({


🟡 unsafe_assumptions: Mermaid's securityLevel is not explicitly set. While mermaid v11 defaults to 'strict' (which uses DOMPurify), relying on a library default for security is fragile — a future upgrade could change the default. Explicitly set securityLevel: 'strict' in the mermaid.initialize() call to make the security posture intentional and auditable. [fixable]

dimakis · 2026-07-02T22:31:04Z

+
+export function MermaidBlock({ code }: MermaidBlockProps) {
+  const instanceId = useId();
+  const containerRef = useRef<HTMLDivElement>(null);


🔵 style: containerRef is assigned to the div's ref prop but never read anywhere in the component. It's dead code — remove it unless there's a planned use (e.g., zoom/pan). [fixable]

dimakis · 2026-07-02T22:31:04Z

+    return () => {
+      cancelled = true;
+    };
+  }, [code]);


🔵 bugs: instanceId (from useId()) is used inside the effect but omitted from the dependency array [code]. This is technically safe because useId() returns a stable value, but it will trigger an react-hooks/exhaustive-deps lint warning if that rule is enabled. Adding it to the array is a no-op at runtime and silences the lint. [fixable]

dimakis · 2026-07-02T22:31:04Z

+import mermaid from 'mermaid';
+import { CopyButton } from './CopyButton';
+
+let mermaidInitialized = false;


🔵 unsafe_assumptions: The module-level mermaidInitialized flag works in production but can leak state between test runs in Vitest (which reuses the module cache by default). If MermaidBlock tests are added later, they may see stale initialization. Not a production issue, but worth noting for testability.

dimakis · 2026-07-02T22:31:04Z

      <table {...props}>{children}</table>
    </div>
  ),
+  pre: ({ children, ...props }) => {


🟡 regressions: The pre handler in markdown-config.tsx (used by FileViewer and MarkdownPreviewCard) renders a bare <pre> for non-mermaid code blocks, while the pre handler in MessageBubble.tsx wraps them in a code-block-wrapper div with a CopyButton. This means code blocks rendered via markdown-config (file viewer, preview cards) lost their copy button and wrapper styling in this PR, since the pre handler was changed from a passthrough to one that actively returns <pre> without the wrapper. Verify this is intentional — if those contexts previously had copy buttons, this is a regression. [fixable]

dimakis · 2026-07-02T22:31:04Z

+          <table {...props}>{children}</table>
+        </div>
+      ),
+      pre: ({ children, ...props }: React.ComponentProps<'pre'>) => {


🔵 style: The mermaid detection logic (extracting the first child, checking className against /language-mermaid/) is duplicated verbatim between MessageBubble.tsx:114-123 and markdown-config.tsx:29-37. Extract a shared helper (e.g., isMermaidCodeBlock(children): string | null) to keep the two call sites in sync. [fixable]

- Add securityLevel: 'strict' to mermaid.initialize() - Remove dead containerRef - Add instanceId to useEffect dependency array - Extract shared getMermaidCode() helper to deduplicate detection logic between MessageBubble and markdown-config - Add MermaidBlock component tests Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

dimakis

Centaur Review

Found 5 issue(s) (2 warning).

`frontend/src/components/tests/MermaidBlock.test.ts`

Solid mermaid integration with correct security posture (strict mode + sanitize schema). Main gaps are weak test coverage for MermaidBlock's async render/error paths and an unanchored detection regex.

🟡 missing_tests (L35): The test titled 'renders fallback code block on render error' is misleading — it only verifies the initial render (empty string) before the async error resolves, not the actual error fallback UI. renderToStaticMarkup doesn't run useEffect, so none of the three tests exercise the successful SVG render path or the error fallback code-block path. The core behavior of this component (rendering SVG output and falling back on errors) is entirely untested. Consider using @testing-library/react with act() to test async state updates. [fixable]

`frontend/src/lib/mermaid-detect.ts`

Solid mermaid integration with correct security posture (strict mode + sanitize schema). Main gaps are weak test coverage for MermaidBlock's async render/error paths and an unanchored detection regex.

🟡 unsafe_assumptions (L12): The regex /language-mermaid/ is unanchored and would match 'language-mermaid-extended' or 'hljs language-mermaid' (multi-class className strings). Use /\blanguage-mermaid\b/ or an exact check like className.split(/\s+/).includes('language-mermaid') for precise matching. [fixable]

`frontend/src/components/MessageBubble.tsx`

Solid mermaid integration with correct security posture (strict mode + sanitize schema). Main gaps are weak test coverage for MermaidBlock's async render/error paths and an unanchored detection regex.

🔵 style (L115): The mermaid-aware pre component is duplicated between MessageBubble.tsx (line 115-124) and markdown-config.tsx (line 28-32). Both call getMermaidCode and return MermaidBlock identically; only the non-mermaid fallback differs (CopyButton wrapper vs. plain
```
). Consider extracting the shared mermaid detection + fallback pattern, or having MessageBubble compose on top of markdown-config's pre. [fixable]
```

`frontend/src/components/MermaidBlock.tsx`

Solid mermaid integration with correct security posture (strict mode + sanitize schema). Main gaps are weak test coverage for MermaidBlock's async render/error paths and an unanchored detection regex.

🔵 bugs (L56): The DOM cleanup document.getElementById(d${id})?.remove() runs even when cancelled is true (it's outside the if (!cancelled) block). If the component unmounts during a failed render, this removes a DOM element that may have already been cleaned up or belong to a new render cycle. Move it inside the if (!cancelled) guard for consistency, or document why it must always run. [fixable]
🔵 unsafe_assumptions (L5): The module-level mermaidInitialized flag means mermaid.initialize() is only ever called once with the hardcoded dark theme. If theme support is added later (light/dark toggle), re-initialization would be silently skipped. This is fine for now but worth noting as a design constraint.

dimakis · 2026-07-02T22:54:44Z

+    expect(html).toBe('');
+  });
+
+  it('renders fallback code block on render error', async () => {


🟡 missing_tests: The test titled 'renders fallback code block on render error' is misleading — it only verifies the initial render (empty string) before the async error resolves, not the actual error fallback UI. renderToStaticMarkup doesn't run useEffect, so none of the three tests exercise the successful SVG render path or the error fallback code-block path. The core behavior of this component (rendering SVG output and falling back on errors) is entirely untested. Consider using @testing-library/react with act() to test async state updates. [fixable]

dimakis · 2026-07-02T22:54:44Z

+  const child = React.Children.toArray(children)[0];
+  if (!React.isValidElement(child)) return null;
+  const className = (child.props as Record<string, unknown>)?.className;
+  if (typeof className === 'string' && /language-mermaid/.test(className)) {


🟡 unsafe_assumptions: The regex /language-mermaid/ is unanchored and would match 'language-mermaid-extended' or 'hljs language-mermaid' (multi-class className strings). Use /\blanguage-mermaid\b/ or an exact check like className.split(/\s+/).includes('language-mermaid') for precise matching. [fixable]

dimakis · 2026-07-02T22:54:44Z

+          <table {...props}>{children}</table>
+        </div>
+      ),
+      pre: ({ children, ...props }: React.ComponentProps<'pre'>) => {


🔵 style: The mermaid-aware pre component is duplicated between MessageBubble.tsx (line 115-124) and markdown-config.tsx (line 28-32). Both call getMermaidCode and return MermaidBlock identically; only the non-mermaid fallback differs (CopyButton wrapper vs. plain
). Consider extracting the shared mermaid detection + fallback pattern, or having MessageBubble compose on top of markdown-config's pre. [fixable]

dimakis · 2026-07-02T22:54:45Z

+          setError('Invalid diagram');
+          setSvg(null);
+        }
+        document.getElementById(`d${id}`)?.remove();


🔵 bugs: The DOM cleanup document.getElementById(d${id})?.remove() runs even when cancelled is true (it's outside the if (!cancelled) block). If the component unmounts during a failed render, this removes a DOM element that may have already been cleaned up or belong to a new render cycle. Move it inside the if (!cancelled) guard for consistency, or document why it must always run. [fixable]

dimakis · 2026-07-02T22:54:45Z

+import mermaid from 'mermaid';
+import { CopyButton } from './CopyButton';
+
+let mermaidInitialized = false;


🔵 unsafe_assumptions: The module-level mermaidInitialized flag means mermaid.initialize() is only ever called once with the hardcoded dark theme. If theme support is added later (light/dark toggle), re-initialization would be silently skipped. This is fine for now but worth noting as a design constraint.

dimakis

Centaur Review

Found 6 issue(s) (3 warning).

`frontend/src/components/tests/MermaidBlock.test.ts`

Solid feature addition with correct security posture (strict mermaid + sanitized classNames) and a good useMemo fix for the preview card auto-close bug; main gaps are in test coverage for the async render path and a substring-matching regex in mermaid detection.

🟡 missing_tests: All three tests use renderToStaticMarkup which skips useEffect — so the success path (SVG rendered and injected via dangerouslySetInnerHTML) is never tested. The error-fallback test also only verifies the initial render (''), not the error state. Consider using @testing-library/react's render + waitFor to test the async render and error states. [fixable]

`frontend/src/lib/mermaid-detect.ts`

Solid feature addition with correct security posture (strict mermaid + sanitized classNames) and a good useMemo fix for the preview card auto-close bug; main gaps are in test coverage for the async render path and a substring-matching regex in mermaid detection.

🔵 missing_tests: No standalone unit tests for getMermaidCode. It's indirectly tested via markdown-config.test.ts and MessageBubble.test.ts, but edge cases (multiple children, non-element children, className as an array) are untested. [fixable]
🟡 unsafe_assumptions (L12): The regex /language-mermaid/ matches as a substring — e.g. language-mermaid-custom would also match. Use /^language-mermaid$/ (or === 'language-mermaid') for an exact match, consistent with how rehype-highlight sets class names. [fixable]

`frontend/src/lib/markdown-config.tsx`

Solid feature addition with correct security posture (strict mermaid + sanitized classNames) and a good useMemo fix for the preview card auto-close bug; main gaps are in test coverage for the async render path and a substring-matching regex in mermaid detection.

🔵 regressions (L28): The pre handler in markdownComponents (used by FileViewer and MarkdownPreviewCard) does not wrap non-mermaid code blocks in code-block-wrapper with a CopyButton, unlike the identical handler in TextBubble. This creates an inconsistency: code blocks in chat have copy buttons, but code blocks in the file viewer and preview cards do not. [fixable]

`frontend/src/components/MermaidBlock.tsx`

Solid feature addition with correct security posture (strict mermaid + sanitized classNames) and a good useMemo fix for the preview card auto-close bug; main gaps are in test coverage for the async render path and a substring-matching regex in mermaid detection.

🟡 bugs (L56): The cleanup document.getElementById(d${id})?.remove() is only called inside the catch block, but mermaid.render() also creates a temporary DOM element on success. If the component unmounts while mermaid.render() is in-flight (cancelled = true), the temporary element created by mermaid may leak in the DOM. Consider also cleaning up the element in the effect's cleanup function. [fixable]
🔵 style (L5): Module-level let mermaidInitialized is mutable shared state. If tests reset modules or if HMR reloads the component without reloading the module, the flag could get out of sync. Consider using mermaid.initialize idempotency or checking mermaid internal state instead.

dimakis · 2026-07-04T00:08:17Z

+  const child = React.Children.toArray(children)[0];
+  if (!React.isValidElement(child)) return null;
+  const className = (child.props as Record<string, unknown>)?.className;
+  if (typeof className === 'string' && /language-mermaid/.test(className)) {


🟡 unsafe_assumptions: The regex /language-mermaid/ matches as a substring — e.g. language-mermaid-custom would also match. Use /^language-mermaid$/ (or === 'language-mermaid') for an exact match, consistent with how rehype-highlight sets class names. [fixable]

dimakis · 2026-07-04T00:08:17Z

      <table {...props}>{children}</table>
    </div>
  ),
+  pre: ({ children, ...props }) => {


🔵 regressions: The pre handler in markdownComponents (used by FileViewer and MarkdownPreviewCard) does not wrap non-mermaid code blocks in code-block-wrapper with a CopyButton, unlike the identical handler in TextBubble. This creates an inconsistency: code blocks in chat have copy buttons, but code blocks in the file viewer and preview cards do not. [fixable]

dimakis · 2026-07-04T00:08:17Z

+          setError('Invalid diagram');
+          setSvg(null);
+        }
+        document.getElementById(`d${id}`)?.remove();


🟡 bugs: The cleanup document.getElementById(d${id})?.remove() is only called inside the catch block, but mermaid.render() also creates a temporary DOM element on success. If the component unmounts while mermaid.render() is in-flight (cancelled = true), the temporary element created by mermaid may leak in the DOM. Consider also cleaning up the element in the effect's cleanup function. [fixable]

dimakis · 2026-07-04T00:08:17Z

+import mermaid from 'mermaid';
+import { CopyButton } from './CopyButton';
+
+let mermaidInitialized = false;


🔵 style: Module-level let mermaidInitialized is mutable shared state. If tests reset modules or if HMR reloads the component without reloading the module, the flag could get out of sync. Consider using mermaid.initialize idempotency or checking mermaid internal state instead.

…tests - Anchor mermaid detection regex with \b word boundaries - Move DOM cleanup inside !cancelled guard - Improve MermaidBlock tests: jsdom environment, async render/error paths, securityLevel verification Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

dimakis