@schlessera/brain-ui-react 0.7.1 → 0.8.0

package/src/components/chat/mermaid-block.tsx

@@ -0,0 +1,77 @@
+import { useEffect, useRef, useState } from "react";
+import { Code, ChartNetwork } from "lucide-react";
+import { peekMermaidSvg, renderMermaidSvg } from "../../lib/mermaid.js";
+import { CopyButton } from "./copy-button.js";
+
+/**
+ * A ```mermaid fence, rendered as a diagram.
+ *
+ * Streaming-safe by construction: while the fence is still arriving (or the
+ * source is invalid) the raw source shows as an ordinary code block; each
+ * debounced parse that succeeds swaps in the fresh SVG, and a parse that
+ * fails keeps the last good diagram instead of flashing an error. Renders
+ * are cached module-wide, so the per-token re-render of a streaming message
+ * costs a cache lookup, not a mermaid parse.
+ */
+export function MermaidBlock({ source }: { source: string }) {
+  const [svg, setSvg] = useState<string | null>(() => peekMermaidSvg(source));
+  const [showSource, setShowSource] = useState(false);
+  const latest = useRef(0);
+  const lastAttempt = useRef(0);
+
+  useEffect(() => {
+    const id = ++latest.current;
+    const cached = peekMermaidSvg(source);
+    if (cached) {
+      setSvg(cached);
+      return;
+    }
+    // Debounce with a throttle floor: a pure debounce would starve during a
+    // continuous stream of WS deltas and only render once the stream pauses.
+    // Attempting at least every 400ms lets the diagram grow mid-stream while
+    // still coalescing per-token churn.
+    const wait = Date.now() - lastAttempt.current > 400 ? 0 : 150;
+    const t = setTimeout(() => {
+      lastAttempt.current = Date.now();
+      void renderMermaidSvg(source).then((result) => {
+        if (latest.current !== id || !result) return;
+        setSvg(result);
+      });
+    }, wait);
+    return () => clearTimeout(t);
+  }, [source]);
+
+  const diagramReady = svg !== null;
+  const showDiagram = diagramReady && !showSource;
+
+  return (
+    <div className="group relative my-3 overflow-hidden rounded-lg border border-border bg-surface">
+      {showDiagram ? (
+        <div
+          className="overflow-x-auto p-4 [&_svg]:mx-auto [&_svg]:h-auto [&_svg]:max-w-full"
+          dangerouslySetInnerHTML={{ __html: svg ?? "" }}
+        />
+      ) : (
+        <pre className="overflow-x-auto p-4 font-[family-name:var(--font-mono)] text-[13px] leading-relaxed">
+          <code>{source}</code>
+        </pre>
+      )}
+      <div className="absolute right-2 top-2 flex items-center gap-1 opacity-0 transition-all group-hover:opacity-100">
+        {diagramReady && (
+          <button
+            type="button"
+            title={showDiagram ? "Show source" : "Show diagram"}
+            onClick={() => setShowSource((s) => !s)}
+            className="flex h-7 w-7 items-center justify-center rounded-md bg-surface-raised/80 text-muted-foreground transition-all hover:bg-surface-overlay hover:text-foreground"
+          >
+            {showDiagram ? <Code className="h-3.5 w-3.5" /> : <ChartNetwork className="h-3.5 w-3.5" />}
+          </button>
+        )}
+        <CopyButton
+          getText={() => source}
+          className="flex h-7 w-7 items-center justify-center rounded-md bg-surface-raised/80 text-muted-foreground transition-all hover:bg-surface-overlay hover:text-foreground"
+        />
+      </div>
+    </div>
+  );
+}

package/src/components/chat/message-share.ts

@@ -2,6 +2,7 @@ import { uiConfig } from "../../config.js";
 import type { RefObject } from "react";
 import { renderAndShare, shareFile, shareText, copyRichText } from "../../lib/share.js";
 import { stripMarkdown } from "../../lib/strip-markdown.js";
+import { inlineMermaidDiagrams } from "../../lib/mermaid.js";
 import type { ShareOption } from "../share/share-menu.js";
 
 interface BuildOpts {
@@ -18,9 +19,11 @@ export function buildMessageShareOptions({ content, renderedRef }: BuildOpts): S
       id: "image",
       label: "Image (PNG)",
       hint: "Rendered snapshot",
-      run: () =>
+      run: async () =>
         renderAndShare({
-          content,
+          // The render page runs without JavaScript, so mermaid fences are
+          // pre-rendered to inline SVG here on the client.
+          content: await inlineMermaidDiagrams(content),
           contentType: "markdown",
           format: "png",
           filename: "message",
@@ -31,9 +34,9 @@ export function buildMessageShareOptions({ content, renderedRef }: BuildOpts): S
       id: "pdf",
       label: "PDF",
       hint: "Vector PDF, A4",
-      run: () =>
+      run: async () =>
         renderAndShare({
-          content,
+          content: await inlineMermaidDiagrams(content),
           contentType: "markdown",
           format: "pdf",
           filename: "message",

package/src/components/chat/share-block.tsx

@@ -4,6 +4,7 @@ import { BrainMarkdown } from "./brain-markdown.js";
 import { ShareMenu, type ShareOption } from "../share/share-menu.js";
 import { renderAndShare, shareFile, shareText, copyRichText } from "../../lib/share.js";
 import { stripMarkdown } from "../../lib/strip-markdown.js";
+import { inlineMermaidDiagrams } from "../../lib/mermaid.js";
 import { Share2 } from "lucide-react";
 
 export type ShareBlockFormat = "image" | "pdf" | "text" | "markdown" | "richtext";
@@ -86,7 +87,9 @@ async function runFormat(
   switch (fmt) {
     case "image":
       return renderAndShare({
-        content: body,
+        // The render page runs without JavaScript — mermaid fences are
+        // pre-rendered to inline SVG on the client.
+        content: await inlineMermaidDiagrams(body),
         contentType: "markdown",
         format: "png",
         filename,
@@ -94,7 +97,7 @@ async function runFormat(
       });
     case "pdf":
       return renderAndShare({
-        content: body,
+        content: await inlineMermaidDiagrams(body),
         contentType: "markdown",
         format: "pdf",
         filename,

package/src/components/files/file-viewer.tsx

@@ -11,6 +11,8 @@ import { API_BASE } from "../../lib/backend.js";
 import { fetchAsFile, shareFile, renderAndShare } from "../../lib/share.js";
 import { splitFrontmatter } from "../../lib/frontmatter.js";
 import { stripMarkdown } from "../../lib/strip-markdown.js";
+import { inlineMermaidDiagrams, isMermaidPath } from "../../lib/mermaid.js";
+import { MermaidBlock } from "../chat/mermaid-block.js";
 import type { FileContentResponse } from "@schlessera/brain-ui-sdk/protocol";
 
 export function FileViewer() {
@@ -32,7 +34,10 @@ export function FileViewer() {
   }
 
   const fileName = currentPath.split("/").pop() ?? currentPath;
-  const previewAvailable = content?.kind === "markdown" || content?.kind === "html";
+  const previewAvailable =
+    content?.kind === "markdown" ||
+    content?.kind === "html" ||
+    (content?.kind === "text" && isMermaidPath(content.path));
 
   return (
     <div className="flex h-full flex-col">
@@ -70,6 +75,14 @@ function ViewerBody({ content, viewMode }: { content: NonNullable<ReturnType<typ
   if (content.kind === "binary") {
     return <FileViewerBinary content={content} />;
   }
+  // Standalone mermaid source files (.mmd / .mermaid) preview as a diagram.
+  if (viewMode === "preview" && content.kind === "text" && isMermaidPath(content.path)) {
+    return (
+      <div className="brain-prose max-w-none px-6 py-4">
+        <MermaidBlock source={content.content ?? ""} />
+      </div>
+    );
+  }
   if (viewMode === "raw" || (content.kind !== "markdown" && content.kind !== "html")) {
     return <FileViewerRaw content={content.content ?? ""} fileName={content.path} />;
   }
@@ -216,9 +229,11 @@ function buildFileShareOptions(content: FileContentResponse, fileName: string):
         id: "md-png",
         label: "Share as image",
         hint: "Rendered PNG snapshot",
-        run: () =>
+        run: async () =>
           renderAndShare({
-            content: body,
+            // The render page runs without JavaScript — mermaid fences are
+            // pre-rendered to inline SVG on the client.
+            content: await inlineMermaidDiagrams(body),
             contentType: "markdown",
             format: "png",
             filename: baseName(fileName),
@@ -229,9 +244,9 @@ function buildFileShareOptions(content: FileContentResponse, fileName: string):
         id: "md-pdf",
         label: "Share as PDF",
         hint: "Vector PDF, A4",
-        run: () =>
+        run: async () =>
           renderAndShare({
-            content: body,
+            content: await inlineMermaidDiagrams(body),
             contentType: "markdown",
             format: "pdf",
             filename: baseName(fileName),

package/src/components/graph/graph-canvas.tsx

@@ -227,11 +227,38 @@ export default function GraphCanvas({
       },
     });
 
+    // Camera gestures (mouse-drag pan, touch pan/pinch/rotate) sweep nodes
+    // under a pointer that isn't "pointing" at them, and sigma re-derives
+    // hover on every move — so without a gate, dragging flickers random nodes
+    // in and out of the hover fade. Clicks/taps are already drag-suppressed by
+    // sigma itself (draggedEventsTolerance / tapMoveTolerance); hover is not.
+    // Gate: button held or a touch in progress means the pointer is steering
+    // the camera, and mouse isMoving lingers for sigma's dragTimeout after
+    // release, absorbing the tail of the gesture.
+    const mouseCaptor = renderer.getMouseCaptor();
+    const touchCaptor = renderer.getTouchCaptor();
+    const isCameraGesture = () =>
+      mouseCaptor.isMouseDown ||
+      mouseCaptor.isMoving ||
+      touchCaptor.isMoving ||
+      touchCaptor.touchMode > 0;
+
     renderer.on("clickNode", ({ node }) => callbacksRef.current.onSelect(Number(node)));
     renderer.on("clickStage", () => callbacksRef.current.onSelect(null));
-    renderer.on("enterNode", ({ node }) => callbacksRef.current.onHover(Number(node)));
+    renderer.on("enterNode", ({ node }) => {
+      if (isCameraGesture()) return;
+      callbacksRef.current.onHover(Number(node));
+    });
     renderer.on("leaveNode", () => callbacksRef.current.onHover(null));
 
+    // A gesture that starts while a node is already hovered must drop that
+    // hover too, or the fade chases a stale node across the whole drag.
+    const clearHoverDuringGesture = () => {
+      if (isCameraGesture()) callbacksRef.current.onHover(null);
+    };
+    mouseCaptor.on("mousemovebody", clearHoverDuringGesture);
+    touchCaptor.on("touchmovebody", clearHoverDuringGesture);
+
     sigmaRef.current = renderer;
     return () => {
       renderer.kill();

package/src/index.ts

@@ -20,6 +20,11 @@ export { GraphPage } from "./components/graph/graph-page.js";
 // Markdown renderer (also useful standalone, e.g. for a dev kitchen sink).
 export { BrainMarkdown } from "./components/chat/brain-markdown.js";
 
+// Mermaid: standalone diagram block (streaming-safe) + the fence-to-SVG
+// inliner the share pipeline uses before handing markdown to the no-JS renderer.
+export { MermaidBlock } from "./components/chat/mermaid-block.js";
+export { inlineMermaidDiagrams, renderMermaidSvg } from "./lib/mermaid.js";
+
 // Stores + selectors the shell reads (service-worker busy check, deep links).
 export {
   useChatStore,

package/src/lib/mermaid.ts

@@ -0,0 +1,233 @@
+/**
+ * Mermaid runtime + fence helpers.
+ *
+ * Mermaid is ~2MB, so it loads on first use via dynamic import; nothing here
+ * pulls it in at module scope. Rendering is tolerant of partial sources
+ * (streaming deltas): parse is gated and every failure resolves to null
+ * instead of throwing, so callers keep the previous good SVG. Results are
+ * cached per (theme, source), which makes the per-token re-render of a
+ * streaming message a cache hit.
+ */
+
+export type MermaidTheme = "dark" | "neutral";
+
+type MermaidApi = typeof import("mermaid").default;
+
+let mermaidPromise: Promise<MermaidApi> | null = null;
+
+function loadMermaid(): Promise<MermaidApi> {
+  if (!mermaidPromise) {
+    mermaidPromise = import("mermaid").then((mod) => {
+      const mermaid = mod.default;
+      mermaid.initialize({
+        startOnLoad: false,
+        // "strict" sanitizes label HTML and blocks script/click payloads —
+        // diagram sources arrive from the model and from repo files.
+        securityLevel: "strict",
+        // Never inject mermaid's own error SVG into the document; failures
+        // surface as a null render result and the caller shows the source.
+        suppressErrorRendering: true,
+        theme: "dark",
+        fontFamily: "ui-sans-serif, system-ui, sans-serif",
+      });
+      return mermaid;
+    });
+  }
+  return mermaidPromise;
+}
+
+const INIT_DIRECTIVE_RE = /%%\{\s*init/;
+
+/**
+ * Theme is applied per-diagram via an init directive rather than re-calling
+ * mermaid.initialize(), so concurrent renders for different targets (dark
+ * in-app, neutral for the light share template) can't race on global config.
+ * A source that carries its own init directive is left alone.
+ */
+function withThemeDirective(source: string, theme: MermaidTheme): string {
+  if (INIT_DIRECTIVE_RE.test(source)) return source;
+  return `%%{init: {"theme": "${theme}"}}%%\n${source}`;
+}
+
+const svgCache = new Map<string, string>();
+const CACHE_MAX = 100;
+let renderSeq = 0;
+
+function cacheKey(source: string, theme: MermaidTheme): string {
+  return `${theme}\u0000${source}`;
+}
+
+/** Synchronous cache lookup, so a remounted block can show its SVG without a flash. */
+export function peekMermaidSvg(source: string, theme: MermaidTheme = "dark"): string | null {
+  return svgCache.get(cacheKey(source.trim(), theme)) ?? null;
+}
+
+/**
+ * Render a mermaid source to SVG markup. Resolves null when the source does
+ * not parse (e.g. an incomplete streaming fence) or rendering fails — never
+ * throws and never mutates the document beyond mermaid's temp container.
+ */
+export async function renderMermaidSvg(
+  source: string,
+  theme: MermaidTheme = "dark"
+): Promise<string | null> {
+  const trimmed = source.trim();
+  if (!trimmed) return null;
+  const key = cacheKey(trimmed, theme);
+  const hit = svgCache.get(key);
+  if (hit !== undefined) return hit;
+  try {
+    const mermaid = await loadMermaid();
+    const text = withThemeDirective(trimmed, theme);
+    const ok = await mermaid.parse(text, { suppressErrors: true });
+    if (!ok) return null;
+    const { svg } = await mermaid.render(`brain-mermaid-${++renderSeq}`, text);
+    if (svgCache.size >= CACHE_MAX) {
+      const oldest = svgCache.keys().next().value;
+      if (oldest !== undefined) svgCache.delete(oldest);
+    }
+    svgCache.set(key, svg);
+    return svg;
+  } catch {
+    return null;
+  }
+}
+
+export interface MermaidFence {
+  /** Offset of the opening fence line start. */
+  start: number;
+  /** Offset just past the closing fence line (and its newline, if present). */
+  end: number;
+  /** Diagram source between the fences, without the trailing newline. */
+  source: string;
+  /** Leading spaces of the opening fence line (a list-indented fence). */
+  indent: string;
+}
+
+const FENCE_LINE_RE = /^( {0,3})(`{3,}|~{3,})(.*)$/;
+
+/**
+ * Find every *closed* ```mermaid fence in a markdown string. A line scanner
+ * (not a regex over the whole text) so mermaid fences nested inside other
+ * code blocks are not matched, and an unterminated streaming fence is simply
+ * not returned.
+ */
+export function findMermaidFences(md: string): MermaidFence[] {
+  const out: MermaidFence[] = [];
+  const lines = md.split("\n");
+  let offset = 0;
+  let open: {
+    char: string;
+    len: number;
+    mermaid: boolean;
+    start: number;
+    contentStart: number;
+    indent: string;
+  } | null = null;
+
+  for (const line of lines) {
+    const lineEnd = Math.min(offset + line.length + 1, md.length);
+    const m = FENCE_LINE_RE.exec(line);
+    if (open) {
+      if (m && m[2][0] === open.char && m[2].length >= open.len && m[3].trim() === "") {
+        if (open.mermaid) {
+          out.push({
+            start: open.start,
+            end: lineEnd,
+            source: md.slice(open.contentStart, offset).replace(/\n$/, ""),
+            indent: open.indent,
+          });
+        }
+        open = null;
+      }
+    } else if (m) {
+      const info = m[3].trim();
+      // A backtick fence's info string may not contain backticks (CommonMark).
+      if (!(m[2][0] === "`" && info.includes("`"))) {
+        const lang = info.split(/\s+/)[0]?.toLowerCase() ?? "";
+        open = {
+          char: m[2][0],
+          len: m[2].length,
+          mermaid: lang === "mermaid" || lang === "mmd",
+          start: offset,
+          contentStart: lineEnd,
+          indent: m[1],
+        };
+      }
+    }
+    offset += line.length + 1;
+  }
+  return out;
+}
+
+/**
+ * Replace each closed mermaid fence via `replacement`; returning null keeps
+ * the fence verbatim. Pure — rendering is injected, so this is unit-testable
+ * without a DOM.
+ */
+export function replaceMermaidFences(
+  md: string,
+  replacement: (fence: MermaidFence, index: number) => string | null
+): string {
+  const fences = findMermaidFences(md);
+  let out = md;
+  for (let i = fences.length - 1; i >= 0; i--) {
+    const r = replacement(fences[i], i);
+    if (r == null) continue;
+    out = out.slice(0, fences[i].start) + r + out.slice(fences[i].end);
+  }
+  return out;
+}
+
+/**
+ * Inline every closed mermaid fence as a pre-rendered `<div class="mermaid-figure"><svg…>`
+ * block. Used by the share pipeline: the PNG/PDF renderer runs the page with
+ * JavaScript disabled and all network denied, so the diagram must already be
+ * SVG by the time the markdown reaches the server. Defaults to the light
+ * "neutral" theme to match the share template. Fences that fail to render are
+ * left as code fences — the pre-feature behavior.
+ */
+/**
+ * The server's render route caps `content` at 512 KiB. Inlining can expand a
+ * few-hundred-byte fence into a multi-kilobyte SVG, so stay safely below the
+ * cap and leave any fence that would cross it as source — a shared code block
+ * beats a rejected request.
+ */
+const INLINE_BUDGET_CHARS = 480_000;
+
+/** Pure inlining step: substitute pre-rendered SVGs (by fence index) under the budget. */
+export function inlineRenderedFences(
+  md: string,
+  rendered: (string | null)[],
+  budget: number = INLINE_BUDGET_CHARS
+): string {
+  let total = md.length;
+  return replaceMermaidFences(md, (fence, i) => {
+    const svg = rendered[i];
+    if (!svg) return null;
+    // Kept to a single line: marked treats <div> as an HTML block that a
+    // blank line would terminate, so newlines inside the SVG must go. The
+    // fence's own indentation is preserved so a list-nested fence doesn't
+    // break out of its list in the shared document.
+    const html = `\n${fence.indent}<div class="mermaid-figure">${svg.replace(/[\r\n]+/g, " ")}</div>\n`;
+    const expanded = total + html.length - (fence.end - fence.start);
+    if (expanded > budget) return null;
+    total = expanded;
+    return html;
+  });
+}
+
+export async function inlineMermaidDiagrams(
+  md: string,
+  theme: MermaidTheme = "neutral"
+): Promise<string> {
+  const fences = findMermaidFences(md);
+  if (fences.length === 0) return md;
+  const rendered = await Promise.all(fences.map((f) => renderMermaidSvg(f.source, theme)));
+  return inlineRenderedFences(md, rendered);
+}
+
+/** Whether a repo path is a standalone mermaid source file (previewable as a diagram). */
+export function isMermaidPath(path: string): boolean {
+  return /\.(mmd|mermaid)$/i.test(path);
+}

package/src/stores/file-store.ts

@@ -7,9 +7,19 @@ import type {
 } from "@schlessera/brain-ui-sdk/protocol";
 import { FILE_SIZE_CAP_BYTES } from "@schlessera/brain-ui-sdk/protocol";
 import { API_BASE } from "../lib/backend.js";
+import { isMermaidPath } from "../lib/mermaid.js";
 
 export type ViewMode = "preview" | "raw";
 
+/** Kinds/paths the viewer can render as a preview (vs raw text only). */
+function hasPreview(content: FileContentResponse): boolean {
+  return (
+    content.kind === "markdown" ||
+    content.kind === "html" ||
+    (content.kind === "text" && isMermaidPath(content.path))
+  );
+}
+
 const FRONTMATTER_COLLAPSED_KEY = "brain-ui:frontmatter-collapsed";
 
 function readFrontmatterCollapsed(): boolean {
@@ -204,9 +214,9 @@ export const useFileStore = create<FileState>((set, get) => ({
       set({ currentContent: content, contentLoading: false });
       // Default mode: prefer preview when available; persist otherwise
       const { viewMode } = get();
-      if (content.kind !== "markdown" && content.kind !== "html" && viewMode === "preview") {
+      if (!hasPreview(content) && viewMode === "preview") {
         set({ viewMode: "raw" });
-      } else if ((content.kind === "markdown" || content.kind === "html") && viewMode === "raw") {
+      } else if (hasPreview(content) && viewMode === "raw") {
         // Keep raw if user toggled — but on a fresh open default back to preview
         set({ viewMode: "preview" });
       }

package/src/theme.css

@@ -316,6 +316,16 @@
   font-size: inherit;
 }
 
+/* Mermaid diagrams (rendered from ```mermaid fences) */
+.brain-prose .mermaid-figure {
+  margin: 0.75rem 0;
+  text-align: center;
+}
+.brain-prose .mermaid-figure svg {
+  max-width: 100%;
+  height: auto;
+}
+
 /* Blockquotes */
 .brain-prose blockquote {
   border-left: 3px solid #e09f3e;