Render Mermaid diagrams, and keep the sidebar search smooth on large histories

- Mermaid: a completed ```mermaid code block now renders as an actual
  diagram (mermaid.js, lazy-loaded so it does not add to every app boot),
  matching the existing "Convert to Mermaid diagram" analyze preset which
  previously produced text that just sat there highlighted as code. Streams
  as plain code while the message is still generating, since partial Mermaid
  syntax is invalid by definition, then swaps to the live diagram once done.
  Invalid syntax degrades to an inline error card instead of mermaid's
  default behavior of leaking a stray error SVG into document.body.

- Sidebar search: full-text search scans every message of every chat, which
  can get slow with a large history. The query now runs through
  useDeferredValue so typing never blocks on it, and per-project filtering
  is precomputed into a single memoized map instead of re-scanning per
  project on every render.

- react-markdown was rebuilding its entire processor pipeline on every
  streamed token because its plugin arrays/components object were recreated
  each render; hoisted them to stable references.

Author: voidstackloop

frontend/package-lock.json

@@ -20,6 +20,7 @@
     "fast-glob": "^3.3.3",
     "highlight.js": "^11.11.1",
     "lucide-react": "^1.24.0",
+    "mermaid": "^11.16.0",
     "react": "^19.2.7",
     "react-dom": "^19.2.7",
     "react-markdown": "^10.1.0",

frontend/package.json

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from "react";
+import { useDeferredValue, useEffect, useMemo, useState } from "react";
 import { Outlet, useNavigate, useParams } from "react-router-dom";
 import {
     BookMarked,
@@ -566,7 +566,11 @@ export default function Layout() {
         };
     }, [hasApi]);
 
-    const query = search.trim().toLowerCase();
+    // Filtering re-scans every message of every chat, which can get expensive
+    // with a large history — defer it a frame behind the input so typing in
+    // the search box never feels laggy, even while the filter itself is slow.
+    const deferredSearch = useDeferredValue(search);
+    const query = deferredSearch.trim().toLowerCase();
     const matchesSearch = (s: ChatSession) =>
         (!query ||
             s.title.toLowerCase().includes(query) ||
@@ -600,6 +604,19 @@ export default function Layout() {
         query,
         activeTags,
     ]);
+    /* eslint-disable react-hooks/exhaustive-deps --
+       matchesSearch is a plain function derived from `query`/`activeTags`, already listed below */
+    const sessionsByProject = useMemo(() => {
+        const map = new Map<string, ChatSession[]>();
+        for (const s of sessions) {
+            if (!s.projectId || !matchesSearch(s)) continue;
+            const list = map.get(s.projectId);
+            if (list) list.push(s);
+            else map.set(s.projectId, [s]);
+        }
+        return map;
+    }, [sessions, query, activeTags]);
+    /* eslint-enable react-hooks/exhaustive-deps */
 
     async function handleNewChat(projectId?: string) {
         const session = await createSession(null, projectId ?? null);
@@ -761,7 +778,7 @@ export default function Layout() {
                             <ProjectGroup
                                 key={project.id}
                                 project={project}
-                                sessions={sessions.filter((s) => s.projectId === project.id && matchesSearch(s))}
+                                sessions={sessionsByProject.get(project.id) ?? []}
                                 activeSessionId={sessionId}
                                 onOpenSession={(id) => navigate(`/chat/${id}`)}
                                 onDeleteSession={handleDelete}

frontend/src/components/layout.tsx

@@ -1,11 +1,18 @@
-import { useState } from "react";
-import ReactMarkdown from "react-markdown";
+import { memo, useMemo, useState } from "react";
+import ReactMarkdown, { type Components } from "react-markdown";
 import remarkGfm from "remark-gfm";
 import rehypeHighlight from "rehype-highlight";
 import { Check, Copy } from "lucide-react";
 import { cn } from "@/lib/utils";
+import { MermaidDiagram } from "@/components/mermaid-diagram";
 import "highlight.js/styles/github-dark.css";
 
+// Hoisted to module scope: react-markdown rebuilds its unified processor
+// whenever these array/object references change, so keeping them stable
+// across renders avoids redoing that work on every streamed token.
+const REMARK_PLUGINS = [remarkGfm];
+const REHYPE_PLUGINS = [rehypeHighlight];
+
 function CodeBlock({ className, children }: { className?: string; children: React.ReactNode }) {
     const [copied, setCopied] = useState(false);
     const text = String(children).replace(/\n$/, "");
@@ -33,37 +40,49 @@ function CodeBlock({ className, children }: { className?: string; children: Reac
     );
 }
 
-export function Markdown({ content }: { content: string }) {
+// isStreaming gates Mermaid rendering: a ```mermaid block is invalid syntax
+// for most of the time it's still being typed out token by token, so we show
+// it as a plain code block until the message is done, then swap it for the
+// live diagram — same pattern the agent write_file preview already uses for
+// its diff view.
+function createComponents(isStreaming: boolean): Components {
+    return {
+        pre: ({ children }) => <>{children}</>,
+        code: ({ className, children, ...props }) => {
+            const isInline = !className;
+            if (isInline) {
+                return (
+                    <code className="rounded bg-muted px-1 py-0.5 text-[0.85em]" {...props}>
+                        {children}
+                    </code>
+                );
+            }
+            const language = className?.replace("hljs language-", "").replace("language-", "").trim();
+            if (language === "mermaid" && !isStreaming) {
+                return <MermaidDiagram code={String(children).replace(/\n$/, "")} />;
+            }
+            return <CodeBlock className={className}>{children}</CodeBlock>;
+        },
+        a: ({ className, ...props }) => (
+            <a
+                className={cn(className, "underline underline-offset-2")}
+                target="_blank"
+                rel="noopener noreferrer"
+                {...props}
+            />
+        ),
+    };
+}
+
+const STATIC_COMPONENTS = createComponents(false);
+
+export const Markdown = memo(function Markdown({ content, isStreaming = false }: { content: string; isStreaming?: boolean }) {
+    const components = useMemo(() => (isStreaming ? createComponents(true) : STATIC_COMPONENTS), [isStreaming]);
     return (
         <div className="prose-chat">
-            <ReactMarkdown
-                remarkPlugins={[remarkGfm]}
-                rehypePlugins={[rehypeHighlight]}
-                components={{
-                    pre: ({ children }) => <>{children}</>,
-                    code: ({ className, children, ...props }) => {
-                        const isInline = !className;
-                        if (isInline) {
-                            return (
-                                <code className="rounded bg-muted px-1 py-0.5 text-[0.85em]" {...props}>
-                                    {children}
-                                </code>
-                            );
-                        }
-                        return <CodeBlock className={className}>{children}</CodeBlock>;
-                    },
-                    a: ({ className, ...props }) => (
-                        <a
-                            className={cn(className, "underline underline-offset-2")}
-                            target="_blank"
-                            rel="noopener noreferrer"
-                            {...props}
-                        />
-                    ),
-                }}
-            >
+            <ReactMarkdown remarkPlugins={REMARK_PLUGINS} rehypePlugins={REHYPE_PLUGINS} components={components}>
                 {content}
             </ReactMarkdown>
         </div>
     );
-}
+});

frontend/src/components/markdown.tsx

@@ -0,0 +1,89 @@
+import { useEffect, useId, useState } from "react";
+import { AlertTriangle } from "lucide-react";
+import { useTheme } from "@/components/theme-provider";
+
+// Loaded lazily and cached: mermaid is a large library that most sessions
+// never touch a diagram in, so it shouldn't add to every app boot's parse
+// and eval cost — only fetched the first time a ```mermaid block is seen.
+let mermaidPromise: Promise<typeof import("mermaid")> | null = null;
+function loadMermaid() {
+    if (!mermaidPromise) mermaidPromise = import("mermaid");
+    return mermaidPromise;
+}
+
+function useIsDark() {
+    const { theme } = useTheme();
+    const [systemDark, setSystemDark] = useState(() => window.matchMedia("(prefers-color-scheme: dark)").matches);
+
+    useEffect(() => {
+        const mql = window.matchMedia("(prefers-color-scheme: dark)");
+        const onChange = () => setSystemDark(mql.matches);
+        mql.addEventListener("change", onChange);
+        return () => mql.removeEventListener("change", onChange);
+    }, []);
+
+    return theme === "system" ? systemDark : theme === "dark";
+}
+
+// Only invoked once a fenced ```mermaid block's content has stopped changing
+// (see markdown.tsx) — mermaid.render() throws on the truncated/invalid
+// syntax a diagram has while it's still streaming in token by token, and on
+// error it also injects a stray error SVG into document.body, not just the
+// target element, so we validate with parse() first and never call render()
+// on text we know is incomplete.
+export function MermaidDiagram({ code }: { code: string }) {
+    const rawId = useId();
+    const diagramId = `mermaid-${rawId.replace(/[^a-zA-Z0-9]/g, "")}`;
+    const isDark = useIsDark();
+    const [svg, setSvg] = useState<string | null>(null);
+    const [error, setError] = useState<string | null>(null);
+
+    useEffect(() => {
+        let cancelled = false;
+
+        (async () => {
+            const { default: mermaid } = await loadMermaid();
+            mermaid.initialize({
+                startOnLoad: false,
+                securityLevel: "strict",
+                fontFamily: "inherit",
+                theme: isDark ? "dark" : "default",
+            });
+
+            const valid = await mermaid.parse(code, { suppressErrors: true });
+            if (!valid) {
+                if (!cancelled) setError("Couldn't parse this as a Mermaid diagram.");
+                return;
+            }
+            try {
+                const { svg: rendered } = await mermaid.render(diagramId, code);
+                if (!cancelled) {
+                    setSvg(rendered);
+                    setError(null);
+                }
+            } catch {
+                if (!cancelled) setError("Couldn't render this Mermaid diagram.");
+            }
+        })();
+
+        return () => {
+            cancelled = true;
+        };
+    }, [code, diagramId, isDark]);
+
+    if (error) {
+        return (
+            <div className="my-2 flex items-center gap-1.5 rounded-lg border border-destructive/30 bg-destructive/5 px-3 py-2 text-xs text-destructive">
+                <AlertTriangle className="size-3.5 shrink-0" /> {error}
+            </div>
+        );
+    }
+
+    if (!svg) {
+        return <div className="my-2 h-24 animate-pulse rounded-lg bg-muted/50" />;
+    }
+
+    // Mermaid's own sanitized SVG output — safe under securityLevel: "strict",
+    // which strips script tags and dangerous attributes before we get here.
+    return <div className="mermaid-diagram my-2 overflow-x-auto rounded-lg border border-border bg-background p-3" dangerouslySetInnerHTML={{ __html: svg }} />;
+}

frontend/src/components/mermaid-diagram.tsx

@@ -302,7 +302,13 @@ const MessageBubble = memo(function MessageBubble({
                             ))}
                         </div>
                     )}
-                    {m.content ? <Markdown content={m.content} /> : isStreaming && isLastAssistant ? "…" : ""}
+                    {m.content ? (
+                        <Markdown content={m.content} isStreaming={isStreaming && isLastAssistant} />
+                    ) : isStreaming && isLastAssistant ? (
+                        "…"
+                    ) : (
+                        ""
+                    )}
                 </div>
             )}
             <div className="mt-1 flex gap-1 opacity-0 transition-opacity group-hover:opacity-100">

frontend/src/pages/Chat.tsx

@@ -157,7 +157,7 @@ export default function Compare() {
                                     {result?.error ? (
                                         <p className="text-destructive">{result.error}</p>
                                     ) : result?.content ? (
-                                        <Markdown content={result.content} />
+                                        <Markdown content={result.content} isStreaming={!!result.streaming} />
                                     ) : result?.streaming ? (
                                         <Loader2 className="size-4 animate-spin text-muted-foreground" />
                                     ) : (