feat(frontend): mermaid diagrams + preview card auto-close fix

frontend/package.json

@@ -29,6 +29,7 @@
     "@xterm/addon-web-links": "^0.11.0",
     "@xterm/xterm": "^5.5.0",
     "highlight.js": "^11.11.1",
+    "mermaid": "^11.16.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-markdown": "^10.1.0",

frontend/src/components/MermaidBlock.tsx

@@ -0,0 +1,92 @@
+import { useEffect, useId, useRef, useState } from 'react';
+import mermaid from 'mermaid';
+import { CopyButton } from './CopyButton';
+
+let mermaidInitialized = false;
+
+function ensureMermaidInit() {
+  if (mermaidInitialized) return;
+  mermaidInitialized = true;
+  mermaid.initialize({
+    startOnLoad: false,
+    theme: 'dark',
+    themeVariables: {
+      darkMode: true,
+      background: '#1e1e2e',
+      primaryColor: '#7c3aed',
+      primaryTextColor: '#e2e8f0',
+      primaryBorderColor: '#6366f1',
+      lineColor: '#94a3b8',
+      secondaryColor: '#374151',
+      tertiaryColor: '#1f2937',
+      noteBkgColor: '#374151',
+      noteTextColor: '#e2e8f0',
+      fontFamily: 'inherit',
+    },
+  });
+}
+
+interface MermaidBlockProps {
+  code: string;
+}
+
+export function MermaidBlock({ code }: MermaidBlockProps) {
+  const instanceId = useId();
+  const containerRef = useRef<HTMLDivElement>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [svg, setSvg] = useState<string | null>(null);
+
+  useEffect(() => {
+    ensureMermaidInit();
+    let cancelled = false;
+    // useId() returns a stable, unique string per component instance
+    const id = `mermaid-${instanceId.replace(/:/g, '')}`;
+
+    async function render() {
+      try {
+        const { svg: rendered } = await mermaid.render(id, code);
+        if (!cancelled) {
+          setSvg(rendered);
+          setError(null);
+        }
+      } catch {
+        if (!cancelled) {
+          setError('Invalid diagram');
+          setSvg(null);
+        }
+        // Clean up any leftover element mermaid may have created
+        document.getElementById(`d${id}`)?.remove();
+      }
+    }
+
+    render();
+    return () => {
+      cancelled = true;
+    };
+  }, [code]);
+
+  if (error) {
+    // Fall back to plain code block
+    return (
+      <div className="code-block-wrapper">
+        <pre>
+          <code>{code}</code>
+        </pre>
+        <CopyButton text={code} className="code-block-copy" label="Copy code" />
+      </div>
+    );
+  }
+
+  if (!svg) return null;
+
+  return (
+    <div className="mermaid-block">
+      <div
+        className="mermaid-block-svg"
+        ref={containerRef}
+        dangerouslySetInnerHTML={{ __html: svg }}
+      />
+      <CopyButton text={code} className="code-block-copy" label="Copy source" />
+    </div>
+  );
+}

frontend/src/components/MessageBubble.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useEffect, useRef, useMemo } from 'react';
 import ReactMarkdown, { defaultUrlTransform } from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 import rehypeHighlight from 'rehype-highlight';
@@ -11,6 +11,7 @@ import { ShareButton } from './ShareButton';
 import { ReadAloudButton } from './ReadAloudButton';
 import { extractText } from '../lib/extractText';
 import { MarkdownPreviewCard } from './MarkdownPreviewCard';
+import { MermaidBlock } from './MermaidBlock';
 
 const COLLAPSE_HEIGHT = 300;
 
@@ -101,6 +102,79 @@ export function TextBubble({ content, streaming = false, timestamp, readAloud }:
 
   const showCollapsed = isLong && collapsed && !streaming;
 
+  // Memoize components so react-markdown preserves component instances
+  // (e.g. MarkdownPreviewCard expanded state) across parent re-renders.
+  const mdComponents = useMemo(
+    () => ({
+      table: ({ children, ...props }: React.ComponentProps<'table'>) => (
+        <div className="table-scroll-wrapper">
+          <table {...props}>{children}</table>
+        </div>
+      ),
+      pre: ({ children, ...props }: React.ComponentProps<'pre'>) => {
+        // Detect mermaid code blocks and render as diagrams
+        const child = React.Children.toArray(children)[0];
+        if (React.isValidElement(child)) {
+          const className = (child.props as Record<string, unknown>)?.className;
+          if (typeof className === 'string' && /language-mermaid/.test(className)) {
+            const text = extractText(children);
+            return <MermaidBlock code={text} />;
+          }
+        }
+        const text = extractText(children);
+        return (
+          <div className="code-block-wrapper">
+            <pre {...props}>{children}</pre>
+            <CopyButton text={text} className="code-block-copy" label="Copy code" />
+          </div>
+        );
+      },
+      p: ({ children }: React.ComponentProps<'p'>) => {
+        const childArray = React.Children.toArray(children);
+        if (childArray.length === 1 && React.isValidElement(childArray[0])) {
+          const el = childArray[0] as React.ReactElement<Record<string, unknown>>;
+          const href = el.props?.href as string | undefined;
+          if (href?.startsWith(FILE_SCHEME)) {
+            const filePath = decodeURIComponent(href.slice(FILE_SCHEME.length));
+            if (/\.mdx?$/i.test(filePath)) {
+              return <MarkdownPreviewCard filePath={filePath} />;
+            }
+          }
+        }
+        return <p>{children}</p>;
+      },
+      a: ({ href, children }: React.ComponentProps<'a'>) => {
+        if (href?.startsWith(FILE_SCHEME)) {
+          const filePath = decodeURIComponent(href.slice(FILE_SCHEME.length));
+          return (
+            <span className="file-path-group">
+              <a
+                href="#"
+                className="file-path-link"
+                data-file-path={filePath}
+                onClick={(e) => {
+                  e.preventDefault();
+                  navigate(
+                    `/files?path=${encodeURIComponent(filePath)}&from=${encodeURIComponent(currentPath)}`,
+                  );
+                }}
+              >
+                {children}
+              </a>
+              <ShareButton filePath={filePath} className="file-path-share" />
+            </span>
+          );
+        }
+        return (
+          <a href={href} target="_blank" rel="noopener noreferrer">
+            {children}
+          </a>
+        );
+      },
+    }),
+    [navigate, currentPath],
+  );
+
   return (
     <div
       className={`msg-bubble msg-bubble--assistant${streaming ? ' msg-bubble--streaming' : ''}${showCollapsed ? ' msg-bubble--collapsed' : ''}`}
@@ -110,69 +184,7 @@ export function TextBubble({ content, streaming = false, timestamp, readAloud }:
           remarkPlugins={[remarkGfm]}
           rehypePlugins={[rehypeHighlight]}
           urlTransform={(url) => (url.startsWith(FILE_SCHEME) ? url : defaultUrlTransform(url))}
-          components={{
-            table: ({ children, ...props }) => (
-              <div className="table-scroll-wrapper">
-                <table {...props}>{children}</table>
-              </div>
-            ),
-            pre: ({ children, ...props }) => {
-              const text = extractText(children);
-              return (
-                <div className="code-block-wrapper">
-                  <pre {...props}>{children}</pre>
-                  <CopyButton text={text} className="code-block-copy" label="Copy code" />
-                </div>
-              );
-            },
-            // When a paragraph contains a single file-path link to a .md/.mdx
-            // file, promote it to an inline preview card instead of a plain link.
-            // In ReactMarkdown v10, children are unrendered component instances —
-            // the `a` handler hasn't run yet — so we check `href` (the prop
-            // ReactMarkdown passes) rather than rendered DOM attributes.
-            p: ({ children }) => {
-              const childArray = React.Children.toArray(children);
-              if (childArray.length === 1 && React.isValidElement(childArray[0])) {
-                const el = childArray[0] as React.ReactElement<Record<string, unknown>>;
-                const href = el.props?.href as string | undefined;
-                if (href?.startsWith(FILE_SCHEME)) {
-                  const filePath = decodeURIComponent(href.slice(FILE_SCHEME.length));
-                  if (/\.mdx?$/i.test(filePath)) {
-                    return <MarkdownPreviewCard filePath={filePath} />;
-                  }
-                }
-              }
-              return <p>{children}</p>;
-            },
-            a: ({ href, children }) => {
-              if (href?.startsWith(FILE_SCHEME)) {
-                const filePath = decodeURIComponent(href.slice(FILE_SCHEME.length));
-                return (
-                  <span className="file-path-group">
-                    <a
-                      href="#"
-                      className="file-path-link"
-                      data-file-path={filePath}
-                      onClick={(e) => {
-                        e.preventDefault();
-                        navigate(
-                          `/files?path=${encodeURIComponent(filePath)}&from=${encodeURIComponent(currentPath)}`,
-                        );
-                      }}
-                    >
-                      {children}
-                    </a>
-                    <ShareButton filePath={filePath} className="file-path-share" />
-                  </span>
-                );
-              }
-              return (
-                <a href={href} target="_blank" rel="noopener noreferrer">
-                  {children}
-                </a>
-              );
-            },
-          }}
+          components={mdComponents}
         >
           {processed}
         </ReactMarkdown>

frontend/src/components/__tests__/MessageBubble.test.ts

@@ -226,6 +226,26 @@ describe('TextBubble code block CopyButton', () => {
   });
 });
 
+describe('TextBubble mermaid code blocks', () => {
+  it('renders MermaidBlock for language-mermaid code blocks', () => {
+    renderToStaticMarkup(createElement(TextBubble, { content: 'test' }));
+    const pre = capturedComponents!.pre;
+    const codeEl = createElement('code', { className: 'language-mermaid' }, 'graph TD; A-->B;');
+    const result = pre({ children: codeEl });
+    // Should render MermaidBlock, not code-block-wrapper
+    expect(result.type).not.toBe('div');
+    expect(result.props.code).toBe('graph TD; A-->B;');
+  });
+
+  it('renders normal code block for non-mermaid languages', () => {
+    renderToStaticMarkup(createElement(TextBubble, { content: 'test' }));
+    const pre = capturedComponents!.pre;
+    const codeEl = createElement('code', { className: 'language-python' }, 'print("hi")');
+    const html = renderToStaticMarkup(pre({ children: codeEl }));
+    expect(html).toContain('code-block-wrapper');
+  });
+});
+
 describe('TextBubble markdown preview card promotion', () => {
   it('provides a custom p component to ReactMarkdown', () => {
     renderToStaticMarkup(createElement(TextBubble, { content: 'test' }));

frontend/src/lib/__tests__/markdown-config.test.ts

@@ -0,0 +1,29 @@
+import { describe, it, expect } from 'vitest';
+import { createElement } from 'react';
+import { markdownComponents } from '../markdown-config';
+
+describe('markdownComponents.pre', () => {
+  const pre = markdownComponents.pre!;
+
+  it('renders MermaidBlock for language-mermaid code blocks', () => {
+    const codeEl = createElement('code', { className: 'language-mermaid' }, 'graph TD; A-->B;');
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const result = (pre as any)({ children: codeEl });
+    expect(result.type).not.toBe('pre');
+    expect(result.props.code).toBe('graph TD; A-->B;');
+  });
+
+  it('renders normal pre for non-mermaid code blocks', () => {
+    const codeEl = createElement('code', { className: 'language-python' }, 'print("hi")');
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const result = (pre as any)({ children: codeEl });
+    expect(result.type).toBe('pre');
+  });
+
+  it('renders normal pre when code has no className', () => {
+    const codeEl = createElement('code', null, 'plain text');
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const result = (pre as any)({ children: codeEl });
+    expect(result.type).toBe('pre');
+  });
+});

frontend/src/lib/markdown-config.tsx

@@ -4,12 +4,16 @@ import rehypeRaw from 'rehype-raw';
 import rehypeSanitize, { defaultSchema } from 'rehype-sanitize';
 import type { Components } from 'react-markdown';
 import type { PluggableList } from 'unified';
+import { MermaidBlock } from '../components/MermaidBlock';
+import { extractText } from './extractText';
 
 const sanitizeSchema = {
   ...defaultSchema,
   attributes: {
     ...defaultSchema.attributes,
     img: [...(defaultSchema.attributes?.img ?? []), 'width', 'height'],
+    // Only allow language-* classes (set by rehype-highlight) — not arbitrary classNames
+    code: [...(defaultSchema.attributes?.code ?? []), ['className', /^language-/]],
   },
 };
 
@@ -22,4 +26,15 @@ export const markdownComponents: Components = {
       <table {...props}>{children}</table>
     </div>
   ),
+  pre: ({ children, ...props }) => {
+    const child = React.Children.toArray(children)[0];
+    if (React.isValidElement(child)) {
+      const className = (child.props as Record<string, unknown>)?.className;
+      if (typeof className === 'string' && /language-mermaid/.test(className)) {
+        const text = extractText(children);
+        return <MermaidBlock code={text} />;
+      }
+    }
+    return <pre {...props}>{children}</pre>;
+  },
 };

frontend/src/styles/global.css

@@ -2123,6 +2123,29 @@ textarea:focus {
   }
 }
 
+/* ===== Mermaid Diagrams ===== */
+
+.mermaid-block {
+  position: relative;
+  margin: 0.5em 0;
+  border-radius: 6px;
+  background: var(--code-bg);
+  border: 1px solid var(--border);
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+}
+
+.mermaid-block-svg {
+  padding: 0.75rem;
+  display: flex;
+  justify-content: center;
+}
+
+.mermaid-block-svg svg {
+  max-width: 100%;
+  height: auto;
+}
+
 /* ===== Collapsible Messages ===== */
 
 .msg-bubble--collapsed .msg-bubble-markdown {