@schlessera/brain-ui-react 0.12.1 → 0.13.0

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

@@ -1,40 +1,19 @@
-import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
-import { createPortal } from "react-dom";
-import { Minus, Plus, Maximize2, X } from "lucide-react";
+import { useMemo } from "react";
 import { sizeSvgForExport } from "../../lib/mermaid.js";
 import { ShareMenu } from "../share/share-menu.js";
+import { ZoomViewer } from "../viewer/zoom-viewer.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.
+ * Full-screen, pan-and-zoom view of one diagram. The gesture surface is
+ * `ZoomViewer`, shared with the image viewer; this only supplies the SVG and
+ * the diagram-specific share menu.
  *
  * 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,
@@ -44,293 +23,19 @@ export function MermaidViewer({
   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.
+  // it to its viewBox pixels; the viewer's transform 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
+  return (
+    <ZoomViewer
+      onClose={onClose}
+      refitKey={sizedSvg}
+      label="Diagram viewer"
+      actions={<ShareMenu options={buildDiagramShareOptions(source)} title="Share diagram" />}
+    >
+      <div dangerouslySetInnerHTML={{ __html: sizedSvg }} />
+    </ZoomViewer>
   );
 }

package/src/components/chat/message-bubble.tsx

@@ -16,6 +16,7 @@ import { isAskUserTool } from "../../lib/tool-names.js";
 import { motion } from "framer-motion";
 import { buildMessageShareOptions } from "./message-share.js";
 import { ShareMenu } from "../share/share-menu.js";
+import { ZoomableImage } from "../images/zoomable-image.js";
 
 export function MessageBubble({
   message,
@@ -104,11 +105,14 @@ function UserAttachments({ message }: { message: ChatMessage }) {
     return (
       <div className="flex flex-wrap gap-2">
         {message.attachments.map((a, i) => (
-          <img
+          // Zoomable: the thumbnail is an object-cover crop, so the full frame
+          // is not even visible until it opens.
+          <ZoomableImage
             key={i}
             src={a.previewUrl}
             alt="Attached image"
-            className="h-20 w-20 rounded-lg border border-border/60 object-cover"
+            toolbar={false}
+            className="h-20 w-20 cursor-zoom-in rounded-lg border border-border/60 object-cover"
           />
         ))}
       </div>

package/src/components/chat/session-drawer.tsx

@@ -32,6 +32,7 @@ export function SessionDrawer({
   const clearMessages = useChatStore((s) => s.clearMessages);
   const currentSessionId = useChatStore((s) => s.activeSessionId);
   const runStates = useChatStore((s) => s.runStates);
+  const queueNotes = useChatStore((s) => s.queueNotes);
   // A running/queued session other than the one in view is reattachable. Derive
   // it from the live per-session run-state (kept current by the frame demux)
   // rather than the deprecated status.activeSessionId, which multi-session
@@ -128,7 +129,7 @@ export function SessionDrawer({
                       <div className="min-w-0 flex-1 truncate text-[13px] font-medium text-foreground">
                         {session.title || "Untitled"}
                       </div>
-                      <RunBadge state={runStates[session.id]} />
+                      <RunBadge state={runStates[session.id]} note={queueNotes[session.id]} />
                     </div>
                     <div className="mt-0.5 flex items-center gap-2">
                       <span className="text-[11px] text-muted-foreground">
@@ -153,14 +154,29 @@ export function SessionDrawer({
 }
 
 /** Live run-state pill on a session row (streaming / queued). */
-function RunBadge({ state }: { state?: "streaming" | "queued" | "idle" }) {
+function RunBadge({
+  state,
+  note,
+}: {
+  state?: "streaming" | "queued" | "idle";
+  /** Host's queue-pressure note, present only once the queue is heavy. */
+  note?: string;
+}) {
   if (state !== "streaming" && state !== "queued") return null;
   const running = state === "streaming";
+  // A note only ever accompanies a queue under pressure, so it doubles as the
+  // "this is getting heavy" signal: the pill turns red and says how much.
+  const heavy = !running && Boolean(note);
   return (
     <span
+      title={note}
       className={cn(
         "shrink-0 rounded-full px-1.5 py-0.5 text-[9px] font-medium uppercase tracking-wide",
-        running ? "bg-primary/15 text-primary" : "bg-amber-500/15 text-amber-500"
+        running
+          ? "bg-primary/15 text-primary"
+          : heavy
+            ? "bg-destructive/15 text-destructive"
+            : "bg-amber-500/15 text-amber-500"
       )}
     >
       {running ? "Running" : "Queued"}

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

@@ -0,0 +1,185 @@
+import { useEffect, useMemo, useState } from "react";
+import { Loader2, Share2, X } from "lucide-react";
+import type { StoredShare } from "@schlessera/brain-ui-sdk/share-target";
+import { useShareIntake } from "../../hooks/use-share-intake.js";
+import { useShareStore } from "../../stores/share-store.js";
+
+/**
+ * What arrived from the system share sheet, waiting for a tap.
+ *
+ * This card is the security boundary, not a convenience. The share target is
+ * reachable by any website — a page that auto-submits a cross-site form to it
+ * is indistinguishable from a real share — so nothing is uploaded and no agent
+ * turn starts until the user has seen what arrived and confirmed it. Do not
+ * "streamline" this into an automatic send.
+ */
+
+function useThumbnails(files: File[]): { url: string; name: string }[] {
+  const images = useMemo(
+    () => files.filter((file) => file.type.startsWith("image/")).slice(0, 4),
+    [files]
+  );
+  const [thumbs, setThumbs] = useState<{ url: string; name: string }[]>([]);
+
+  useEffect(() => {
+    const created = images.map((file) => ({
+      url: URL.createObjectURL(file),
+      name: file.name,
+    }));
+    setThumbs(created);
+    // These object URLs belong to this component alone — the ones handed to a
+    // sent message are made separately, and the chat store owns those.
+    return () => {
+      for (const thumb of created) URL.revokeObjectURL(thumb.url);
+      setThumbs([]);
+    };
+  }, [images]);
+
+  return thumbs;
+}
+
+function ShareCard({
+  record,
+  busy,
+  onConfirm,
+  onDismiss,
+}: {
+  record: StoredShare;
+  busy: boolean;
+  onConfirm: () => void;
+  onDismiss: () => void;
+}) {
+  const thumbs = useThumbnails(record.files);
+  const otherFiles = record.files.filter((file) => !file.type.startsWith("image/"));
+
+  return (
+    <div className="mb-2 rounded-lg border border-border bg-surface p-3">
+      <div className="mb-2 flex items-center gap-2 text-xs text-muted-foreground">
+        <Share2 className="h-3.5 w-3.5" />
+        <span className="flex-1">Shared to your brain</span>
+        <button
+          type="button"
+          onClick={onDismiss}
+          title="Dismiss"
+          className="rounded p-0.5 transition-colors hover:text-foreground"
+        >
+          <X className="h-3.5 w-3.5" />
+        </button>
+      </div>
+
+      <div className="flex gap-3">
+        {thumbs.length > 0 && (
+          <div className="flex shrink-0 flex-wrap gap-1">
+            {thumbs.map((thumb) => (
+              <img
+                key={thumb.url}
+                src={thumb.url}
+                alt={thumb.name}
+                className="h-14 w-14 rounded-md border border-border object-cover"
+              />
+            ))}
+          </div>
+        )}
+
+        <div className="min-w-0 flex-1 space-y-1 text-sm">
+          {record.title && (
+            <div className="truncate font-medium text-foreground">{record.title}</div>
+          )}
+          {record.url && (
+            <div className="truncate text-xs text-muted-foreground">{record.url}</div>
+          )}
+          {record.text && (
+            <div className="line-clamp-3 text-xs text-muted-foreground">
+              {record.text}
+            </div>
+          )}
+          {otherFiles.map((file) => (
+            <div key={file.name} className="truncate text-xs text-muted-foreground">
+              {file.name}
+            </div>
+          ))}
+        </div>
+      </div>
+
+      <div className="mt-3 flex items-center gap-2">
+        <button
+          type="button"
+          onClick={onConfirm}
+          disabled={busy}
+          className="flex items-center gap-2 rounded-lg bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground disabled:opacity-60"
+        >
+          {busy && <Loader2 className="h-3.5 w-3.5 animate-spin" />}
+          Add to brain
+        </button>
+        <button
+          type="button"
+          onClick={onDismiss}
+          disabled={busy}
+          className="rounded-lg border border-border px-3 py-1.5 text-sm text-muted-foreground disabled:opacity-60"
+        >
+          Dismiss
+        </button>
+      </div>
+    </div>
+  );
+}
+
+/**
+ * Drives the intake and renders the head of the queue.
+ *
+ * One card at a time, and the next only after the current one is gone: the
+ * client has a single unbound chat draft, so two turns started before the first
+ * `session_info` arrives would share a buffer and lose the second transcript.
+ */
+export function ShareIntake() {
+  const { confirm, dismiss } = useShareIntake();
+  const queue = useShareStore((s) => s.queue);
+  const busy = useShareStore((s) => s.busy);
+  const error = useShareStore((s) => s.error);
+  const notes = useShareStore((s) => s.notes);
+  const setError = useShareStore((s) => s.setError);
+
+  const head = queue[0];
+  if (!head && !error) return null;
+
+  return (
+    <>
+      {error && (
+        <div className="mb-2 flex items-start gap-2 rounded-lg border border-destructive/30 bg-destructive/5 px-3 py-2 text-[11px] text-destructive">
+          <div className="flex-1">{error}</div>
+          <button
+            type="button"
+            onClick={() => setError(null)}
+            title="Dismiss"
+            className="shrink-0 rounded p-0.5 transition-colors hover:text-foreground"
+          >
+            <X className="h-3.5 w-3.5" />
+          </button>
+        </div>
+      )}
+
+      {notes.length > 0 && (
+        <div className="mb-2 space-y-0.5 rounded-lg border border-border bg-surface px-3 py-2 text-[11px] text-muted-foreground">
+          {notes.map((note, i) => (
+            <div key={i}>{note}</div>
+          ))}
+        </div>
+      )}
+
+      {head && (
+        <ShareCard
+          record={head}
+          busy={busy}
+          onConfirm={() => void confirm(head)}
+          onDismiss={() => dismiss(head)}
+        />
+      )}
+
+      {queue.length > 1 && (
+        <div className="mb-2 text-[11px] text-muted-foreground">
+          {queue.length - 1} more share(s) waiting.
+        </div>
+      )}
+    </>
+  );
+}