@schlessera/brain-ui-react 0.7.2 → 0.9.0

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

@@ -0,0 +1,106 @@
+import { useEffect, useRef, useState } from "react";
+import { Code, ChartNetwork, Expand } from "lucide-react";
+import { peekMermaidSvg, renderMermaidSvg } from "../../lib/mermaid.js";
+import { ShareMenu } from "../share/share-menu.js";
+import { CopyButton } from "./copy-button.js";
+import { buildDiagramShareOptions } from "./mermaid-share.js";
+import { MermaidViewer } from "./mermaid-viewer.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 [zoomed, setZoomed] = 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;
+
+  const iconBtn =
+    "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";
+
+  return (
+    // No `overflow-hidden` here: the share menu drops out of the toolbar and a
+    // clipping ancestor would cut off its lower entries on a short diagram.
+    // Children carry their own padding, so nothing bleeds past the radius.
+    <div className="group relative my-3 rounded-lg border border-border bg-surface">
+      {showDiagram ? (
+        <div
+          className="cursor-zoom-in overflow-x-auto p-4 [&_svg]:mx-auto [&_svg]:h-auto [&_svg]:max-w-full"
+          // The whole diagram is the affordance: a phone-sized flowchart is
+          // unreadable in place, and the hover toolbar is pointer-only.
+          onClick={() => setZoomed(true)}
+          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 focus-within:opacity-100 group-hover:opacity-100">
+        {showDiagram && (
+          <button type="button" title="Open diagram" onClick={() => setZoomed(true)} className={iconBtn}>
+            <Expand className="h-3.5 w-3.5" />
+          </button>
+        )}
+        {diagramReady && (
+          <ShareMenu
+            options={buildDiagramShareOptions(source)}
+            title="Share diagram"
+            renderTrigger={({ onClick, busy, icon }) => (
+              <button type="button" title="Share diagram" onClick={onClick} disabled={busy} className={iconBtn}>
+                {icon}
+              </button>
+            )}
+          />
+        )}
+        {diagramReady && (
+          <button
+            type="button"
+            title={showDiagram ? "Show source" : "Show diagram"}
+            onClick={() => setShowSource((s) => !s)}
+            className={iconBtn}
+          >
+            {showDiagram ? <Code className="h-3.5 w-3.5" /> : <ChartNetwork className="h-3.5 w-3.5" />}
+          </button>
+        )}
+        <CopyButton getText={() => source} className={iconBtn} />
+      </div>
+      {zoomed && svg && (
+        <MermaidViewer svg={svg} source={source} onClose={() => setZoomed(false)} />
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,91 @@
+import { uiConfig } from "../../config.js";
+import { renderMermaidSvg, sizeSvgForExport } from "../../lib/mermaid.js";
+import { renderAndShare, shareFile, shareText } from "../../lib/share.js";
+import type { ShareOption } from "../share/share-menu.js";
+
+/**
+ * Share options for a single diagram.
+ *
+ * Exports are rendered in the LIGHT theme, not the dark one on screen: a share
+ * lands in WhatsApp, a mail client or a printer, all of which assume paper.
+ * PNG and PDF go through the same /api/render path as every other share, so a
+ * diagram in a shared message and a diagram shared on its own are the same
+ * pixels.
+ */
+
+/** Guard: the render route rejects a body over 512 KiB, so fail with a readable message. */
+const MAX_CONTENT_CHARS = 480_000;
+
+function figureHtml(svg: string, tight: boolean): string {
+  // `width: fit-content` is what makes a PNG crop to the diagram instead of to
+  // the render viewport — the screenshot clips to the body box. PDF keeps the
+  // template's normal page flow, since an A4 page has a fixed width anyway.
+  const style = tight
+    ? "<style>body{width:fit-content;padding:24px}.mermaid-figure{margin:0}</style>"
+    : "";
+  return `${style}<div class="mermaid-figure">${svg.replace(/[\r\n]+/g, " ")}</div>`;
+}
+
+async function exportSvg(source: string): Promise<string> {
+  const svg = await renderMermaidSvg(source, "light");
+  if (!svg) throw new Error("This diagram can't be rendered yet");
+  return sizeSvgForExport(svg);
+}
+
+async function exportHtml(source: string, tight: boolean): Promise<string> {
+  const html = figureHtml(await exportSvg(source), tight);
+  if (html.length > MAX_CONTENT_CHARS) {
+    throw new Error("Diagram is too large to share as an image");
+  }
+  return html;
+}
+
+export function buildDiagramShareOptions(
+  source: string,
+  opts: { filename?: string } = {}
+): ShareOption[] {
+  const filename = opts.filename ?? "diagram";
+  return [
+    {
+      id: "image",
+      label: "Image (PNG)",
+      hint: "Cropped to the diagram",
+      run: async () =>
+        renderAndShare({
+          content: await exportHtml(source, true),
+          contentType: "html",
+          format: "png",
+          filename,
+          title: uiConfig.shareTitle,
+        }),
+    },
+    {
+      id: "pdf",
+      label: "PDF",
+      hint: "Vector PDF, A4",
+      run: async () =>
+        renderAndShare({
+          content: await exportHtml(source, false),
+          contentType: "html",
+          format: "pdf",
+          filename,
+          title: uiConfig.shareTitle,
+        }),
+    },
+    {
+      id: "svg",
+      label: "Vector (SVG)",
+      hint: "Scales to any size",
+      run: async () =>
+        shareFile(new File([await exportSvg(source)], `${filename}.svg`, { type: "image/svg+xml" }), {
+          title: uiConfig.shareTitle,
+        }),
+    },
+    {
+      id: "source",
+      label: "Mermaid source",
+      hint: "Paste into another tool",
+      run: () => shareText({ text: source, title: uiConfig.shareTitle }),
+    },
+  ];
+}

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

@@ -0,0 +1,336 @@
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { Minus, Plus, Maximize2, X } from "lucide-react";
+import { sizeSvgForExport } from "../../lib/mermaid.js";
+import { ShareMenu } from "../share/share-menu.js";
+import { buildDiagramShareOptions } from "./mermaid-share.js";
+
+/**
+ * Full-screen, pan-and-zoom view of one diagram.
+ *
+ * Hand-rolled on pointer events rather than pulling a pan/zoom library: the
+ * whole surface is two transforms and the repo has no other dependency of that
+ * shape. Touch gestures work because the stage sets `touch-action: none` —
+ * the browser hands us every pointer instead of scrolling the page, which is
+ * also why no preventDefault is needed on the touch path. Wheel is the one
+ * exception: React's onWheel is passive, so it is bound manually.
+ *
+ * The SVG string is the same one the block already rendered, so opening the
+ * viewer costs no mermaid work. Both copies carry mermaid's ids; that is
+ * harmless because the markup is byte-identical — a `url(#id)` in either copy
+ * resolves to an identical marker.
+ */
+
+const MIN_SCALE = 0.15;
+const MAX_SCALE = 12;
+/** Small diagrams may grow to fill the stage, but blowing one up 8x reads as broken. */
+const MAX_FIT_SCALE = 2.5;
+
+interface Point {
+  x: number;
+  y: number;
+}
+
+function clampScale(s: number): number {
+  return Math.min(MAX_SCALE, Math.max(MIN_SCALE, s));
+}
+
+export function MermaidViewer({
+  svg,
+  source,
+  onClose,
+}: {
+  svg: string;
+  source: string;
+  onClose: () => void;
+}) {
+  const stageRef = useRef<HTMLDivElement>(null);
+  const contentRef = useRef<HTMLDivElement>(null);
+  // Mermaid ships `width: 100%` + `max-width` on the svg, which has no
+  // intrinsic size to measure or to scale from. Reuse the export sizer to pin
+  // it to its viewBox pixels; the transform below does all the scaling.
+  const sizedSvg = useMemo(() => sizeSvgForExport(svg), [svg]);
+  const [scale, setScale] = useState(1);
+  const [offset, setOffset] = useState<Point>({ x: 0, y: 0 });
+  const [ready, setReady] = useState(false);
+
+  // Live gesture state lives in refs: pointer maths must not wait for a render.
+  const pointers = useRef(new Map<number, Point>());
+  const pinch = useRef<{ dist: number; center: Point } | null>(null);
+  const panFrom = useRef<{ pointer: Point; offset: Point } | null>(null);
+  const view = useRef({ scale: 1, offset: { x: 0, y: 0 } });
+  /** The scale `fit()` last produced — the baseline double-click toggles against. */
+  const fitScale = useRef(1);
+  /** Set once the user pans/zooms; after that nothing may re-fit behind their back. */
+  const touched = useRef(false);
+
+  const apply = useCallback((next: { scale: number; offset: Point }) => {
+    view.current = next;
+    setScale(next.scale);
+    setOffset(next.offset);
+  }, []);
+
+  /** Natural (untransformed) size of the diagram — offsetWidth ignores transforms. */
+  const natural = useCallback((): { w: number; h: number } | null => {
+    const el = contentRef.current;
+    if (!el || !el.offsetWidth || !el.offsetHeight) return null;
+    return { w: el.offsetWidth, h: el.offsetHeight };
+  }, []);
+
+  const fit = useCallback(() => {
+    const stage = stageRef.current;
+    const size = natural();
+    if (!stage || !size) return;
+    const pad = 32;
+    const sx = (stage.clientWidth - pad * 2) / size.w;
+    const sy = (stage.clientHeight - pad * 2) / size.h;
+    const next = clampScale(Math.min(MAX_FIT_SCALE, Math.min(sx, sy)));
+    fitScale.current = next;
+    apply({
+      scale: next,
+      offset: {
+        x: (stage.clientWidth - size.w * next) / 2,
+        y: (stage.clientHeight - size.h * next) / 2,
+      },
+    });
+  }, [apply, natural]);
+
+  useLayoutEffect(() => {
+    // Re-runs when the diagram itself changes, which happens while the message
+    // is still streaming — so a user who has already panned keeps their view.
+    if (!touched.current) fit();
+    setReady(true);
+  }, [fit, sizedSvg]);
+
+  /** Zoom about a stage-local anchor, so the point under the cursor/fingers stays put. */
+  const zoomAt = useCallback(
+    (factor: number, anchor: Point) => {
+      // Any deliberate zoom counts as touching the view — including the
+      // toolbar buttons and the wheel. Without this a diagram that is still
+      // streaming would re-fit itself out from under the reader's zoom.
+      touched.current = true;
+      const { scale: prev, offset: prevOffset } = view.current;
+      const next = clampScale(prev * factor);
+      if (next === prev) return;
+      const ratio = next / prev;
+      apply({
+        scale: next,
+        offset: {
+          x: anchor.x - (anchor.x - prevOffset.x) * ratio,
+          y: anchor.y - (anchor.y - prevOffset.y) * ratio,
+        },
+      });
+    },
+    [apply]
+  );
+
+  const zoomCenter = useCallback(
+    (factor: number) => {
+      const stage = stageRef.current;
+      if (!stage) return;
+      zoomAt(factor, { x: stage.clientWidth / 2, y: stage.clientHeight / 2 });
+    },
+    [zoomAt]
+  );
+
+  const stagePoint = (e: { clientX: number; clientY: number }): Point => {
+    const rect = stageRef.current?.getBoundingClientRect();
+    return { x: e.clientX - (rect?.left ?? 0), y: e.clientY - (rect?.top ?? 0) };
+  };
+
+  // Wheel must be bound manually: React's onWheel is passive, so it cannot
+  // preventDefault, and the page behind would scroll (or the browser would
+  // pinch-zoom the whole PWA on a ctrl+wheel trackpad gesture).
+  useEffect(() => {
+    const stage = stageRef.current;
+    if (!stage) return;
+    const onWheel = (e: WheelEvent) => {
+      e.preventDefault();
+      // A trackpad pinch arrives as ctrlKey+wheel with small deltas; a mouse
+      // wheel arrives as coarse notches. Both map to the same exponential.
+      const factor = Math.exp(-e.deltaY * (e.ctrlKey ? 0.01 : 0.0015));
+      zoomAt(factor, stagePoint(e));
+    };
+    stage.addEventListener("wheel", onWheel, { passive: false });
+    return () => stage.removeEventListener("wheel", onWheel);
+  }, [zoomAt]);
+
+  useEffect(() => {
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key === "Escape") onClose();
+      else if (e.key === "+" || e.key === "=") zoomCenter(1.25);
+      else if (e.key === "-" || e.key === "_") zoomCenter(0.8);
+      else if (e.key === "0") fit();
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [onClose, zoomCenter, fit]);
+
+  // Lock body scroll while open.
+  useEffect(() => {
+    const prev = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = prev;
+    };
+  }, []);
+
+  // Re-fit on rotation / resize only while the view is untouched, so a resize
+  // never yanks a diagram the user has deliberately panned into place.
+  useEffect(() => {
+    const onResize = () => {
+      if (!touched.current) fit();
+    };
+    window.addEventListener("resize", onResize);
+    return () => window.removeEventListener("resize", onResize);
+  }, [fit]);
+
+  const onPointerDown = (e: React.PointerEvent) => {
+    (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
+    pointers.current.set(e.pointerId, stagePoint(e));
+    if (pointers.current.size === 2) {
+      const [a, b] = [...pointers.current.values()];
+      pinch.current = {
+        dist: Math.hypot(a.x - b.x, a.y - b.y),
+        center: { x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 },
+      };
+      panFrom.current = null;
+    } else if (pointers.current.size === 1) {
+      panFrom.current = { pointer: stagePoint(e), offset: view.current.offset };
+    }
+  };
+
+  const onPointerMove = (e: React.PointerEvent) => {
+    if (!pointers.current.has(e.pointerId)) return;
+    const p = stagePoint(e);
+    pointers.current.set(e.pointerId, p);
+
+    if (pointers.current.size >= 2 && pinch.current) {
+      const [a, b] = [...pointers.current.values()];
+      const dist = Math.hypot(a.x - b.x, a.y - b.y);
+      const center = { x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 };
+      if (pinch.current.dist > 0) {
+        touched.current = true;
+        // Pan and zoom in one step: the midpoint drift moves the diagram, the
+        // distance ratio scales it about that same midpoint.
+        const drift = {
+          x: center.x - pinch.current.center.x,
+          y: center.y - pinch.current.center.y,
+        };
+        // Committed through apply(), not written straight to the ref: two
+        // fingers moving in parallel (or a pinch already clamped at min/max)
+        // produce no scale change, and zoomAt() returns early — the drift
+        // would then be stranded in the ref and the diagram would not pan.
+        apply({
+          scale: view.current.scale,
+          offset: {
+            x: view.current.offset.x + drift.x,
+            y: view.current.offset.y + drift.y,
+          },
+        });
+        zoomAt(dist / pinch.current.dist, center);
+      }
+      pinch.current = { dist, center };
+      return;
+    }
+
+    if (panFrom.current) {
+      touched.current = true;
+      apply({
+        scale: view.current.scale,
+        offset: {
+          x: panFrom.current.offset.x + (p.x - panFrom.current.pointer.x),
+          y: panFrom.current.offset.y + (p.y - panFrom.current.pointer.y),
+        },
+      });
+    }
+  };
+
+  const endPointer = (e: React.PointerEvent) => {
+    pointers.current.delete(e.pointerId);
+    if (pointers.current.size >= 2) {
+      // Still pinching, but with a DIFFERENT pair (a stray third touch got
+      // lifted). Rebase the baseline, or the next move would compare the new
+      // pair's spread against the old pair's and jump.
+      const [a, b] = [...pointers.current.values()];
+      pinch.current = {
+        dist: Math.hypot(a.x - b.x, a.y - b.y),
+        center: { x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 },
+      };
+      return;
+    }
+    pinch.current = null;
+    if (pointers.current.size === 1) {
+      // Lifting one finger of a pinch must not teleport the diagram: re-anchor
+      // the pan to whichever pointer is still down.
+      const [remaining] = [...pointers.current.values()];
+      panFrom.current = { pointer: remaining, offset: view.current.offset };
+    } else if (pointers.current.size === 0) {
+      panFrom.current = null;
+    }
+  };
+
+  const onDoubleClick = (e: React.MouseEvent) => {
+    touched.current = true;
+    // Compared against the FIT scale, not against 1: a diagram that fits at
+    // 125% would otherwise read as "already zoomed" and double-click would
+    // re-fit it to exactly where it already was.
+    if (view.current.scale > fitScale.current * 1.05) fit();
+    else zoomAt(2, stagePoint(e));
+  };
+
+  const btn =
+    "flex h-9 w-9 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-surface-raised hover:text-foreground";
+
+  // Portalled to <body>: message bubbles animate through framer-motion, and a
+  // transformed ancestor becomes the containing block for `fixed`, which would
+  // pin this overlay to the bubble instead of the viewport.
+  return createPortal(
+    <div className="fixed inset-0 z-50 flex flex-col bg-background/95 backdrop-blur-sm">
+      <div
+        className="flex items-center justify-between gap-2 border-b border-border/60 px-3 py-2"
+        style={{ paddingTop: "calc(0.5rem + env(safe-area-inset-top))" }}
+      >
+        <span className="px-1 font-[family-name:var(--font-mono)] text-xs tabular-nums text-muted-foreground">
+          {Math.round(scale * 100)}%
+        </span>
+        <div className="flex items-center gap-1">
+          <button type="button" title="Zoom out" onClick={() => zoomCenter(0.8)} className={btn}>
+            <Minus className="h-4 w-4" />
+          </button>
+          <button type="button" title="Zoom in" onClick={() => zoomCenter(1.25)} className={btn}>
+            <Plus className="h-4 w-4" />
+          </button>
+          <button type="button" title="Fit to screen" onClick={fit} className={btn}>
+            <Maximize2 className="h-4 w-4" />
+          </button>
+          <ShareMenu options={buildDiagramShareOptions(source)} title="Share diagram" />
+          <button type="button" title="Close" onClick={onClose} className={btn}>
+            <X className="h-4 w-4" />
+          </button>
+        </div>
+      </div>
+
+      <div
+        ref={stageRef}
+        className="relative flex-1 cursor-grab touch-none overflow-hidden active:cursor-grabbing [&_svg]:max-w-none"
+        onPointerDown={onPointerDown}
+        onPointerMove={onPointerMove}
+        onPointerUp={endPointer}
+        onPointerCancel={endPointer}
+        onDoubleClick={onDoubleClick}
+      >
+        <div
+          ref={contentRef}
+          className="absolute left-0 top-0 origin-top-left"
+          style={{
+            transform: `translate(${offset.x}px, ${offset.y}px) scale(${scale})`,
+            visibility: ready ? "visible" : "hidden",
+          }}
+          dangerouslySetInnerHTML={{ __html: sizedSvg }}
+        />
+      </div>
+    </div>,
+    document.body
+  );
+}

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,9 @@ 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 { buildDiagramShareOptions } from "../chat/mermaid-share.js";
 import type { FileContentResponse } from "@schlessera/brain-ui-sdk/protocol";
 
 export function FileViewer() {
@@ -32,7 +35,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 +76,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 +230,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 +245,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),
@@ -281,6 +297,22 @@ function buildFileShareOptions(content: FileContentResponse, fileName: string):
     ];
   }
 
+  // A standalone .mmd/.mermaid file is a diagram, so it shares like one — the
+  // same PNG/PDF/SVG/source set the in-chat diagram offers, plus its source file.
+  if (content.kind === "text" && isMermaidPath(content.path)) {
+    const source = content.content ?? "";
+    return [
+      ...buildDiagramShareOptions(source, { filename: baseName(fileName) }),
+      {
+        id: "mmd-file",
+        label: "Share source file",
+        hint: "Original .mmd source",
+        run: async () =>
+          shareFile(new File([source], fileName, { type: "text/plain" }), { title: fileName }),
+      },
+    ];
+  }
+
   // Raw text / unknown: no share for V1 (user limited to previewable types).
   return [];
 }