@opengeni/react 6.1.0 → 7.0.0-canary.35585322809001

package/src/components/markdown.tsx

@@ -19,15 +19,19 @@ import ReactMarkdown, {
   type UrlTransform,
 } from "react-markdown";
 import remarkGfm from "remark-gfm";
+import { PanelsTopLeftIcon } from "lucide-react";
+import { ActivityDisclosure } from "../timeline/shared";
 import { cn } from "../lib/cn";
 import { tableElementToTsv } from "../lib/clipboard";
 import { prefersReducedMotion } from "../lib/motion";
 import { MOTION_INSPECT_SCALE } from "../lib/motion-inspect";
 import { CopyButton } from "./copy-button";
+import { PreviewLoading } from "./preview-loading";
 import type { observeMarkdownTableLayout } from "./markdown-table-layout";
 import { softenStreamingMarkdown } from "./soften-streaming-markdown";
 import { createStreamReveal, rehypeStreamReveal, type StreamReveal } from "./stream-reveal";
 import { TooltipProvider } from "./tooltip";
+import { searchMatchOffset, type TimelineSearchTarget } from "./timeline-search";
 
 /**
  * The default renderer for chat message bodies in {@link MessageTimeline}.
@@ -46,11 +50,14 @@ import { TooltipProvider } from "./tooltip";
 export type MarkdownInteractiveBlock = { kind: "html" | "site"; content: string };
 const InteractiveContext = createContext<{
   source: string;
+  streaming?: boolean | undefined;
   render?: (block: MarkdownInteractiveBlock) => ReactNode;
   renderImage?: (image: { src: string; alt: string }) => ReactNode;
 }>({ source: "" });
 
 export type MarkdownProps = {
+  /** Reveals a bounded source excerpt; closing Find retains it until explicit restore. */
+  searchTarget?: TimelineSearchTarget | null | undefined;
   renderImage?: ((image: { src: string; alt: string }) => ReactNode) | undefined;
   /** Host opt-in for assistant-authored interactive fences. */
   renderInteractiveBlock?: ((block: MarkdownInteractiveBlock) => ReactNode) | undefined;
@@ -406,7 +413,7 @@ function fenceLanguage(children: ReactNode): string | null {
 }
 
 function InteractiveCodeBlock({ children, node }: ComponentPropsWithoutRef<"pre"> & ExtraProps) {
-  const { source, render } = useContext(InteractiveContext);
+  const { source, render, streaming } = useContext(InteractiveContext);
   const language = fenceLanguage(children);
   if (render && (language === "opengeni-html" || language === "opengeni-site")) {
     const start = node?.position?.start.offset;
@@ -428,7 +435,23 @@ function InteractiveCodeBlock({ children, node }: ComponentPropsWithoutRef<"pre"
       closing &&
       closing.length >= opening[1]!.length &&
       [...closing].every((c) => c === opening[1]![0]);
-    if (!complete) return <p role="status">Preparing preview…</p>;
+    if (!complete) {
+      return (
+        <div role="status" aria-live="polite" aria-busy={streaming === true} className="my-3">
+          {streaming ? (
+            <PreviewLoading />
+          ) : (
+            <ActivityDisclosure
+              icon={<PanelsTopLeftIcon aria-hidden className="size-3.5" />}
+              title="Preview incomplete"
+              running={false}
+              expandable={false}
+              preview="Generation stopped before the preview was ready."
+            />
+          )}
+        </div>
+      );
+    }
     return (
       <>
         {render({
@@ -622,10 +645,11 @@ function MarkdownImpl({
   const interactiveContext = useMemo(
     () => ({
       source: children,
+      streaming,
       ...(renderInteractiveBlock ? { render: renderInteractiveBlock } : {}),
       ...(renderImage ? { renderImage } : {}),
     }),
-    [children, renderInteractiveBlock, renderImage],
+    [children, streaming, renderInteractiveBlock, renderImage],
   );
 
   // `min-w-0` lets the prose shrink inside flex parents (message bubbles) so
@@ -656,4 +680,62 @@ function MarkdownImpl({
 }
 
 /** Memoized so streaming re-renders of the parent don't re-parse settled bodies. */
-export const Markdown = memo(MarkdownImpl);
+export const Markdown = memo(function SearchableMarkdown(props: MarkdownProps) {
+  const [retained, setRetained] = useState<{ text: string; target: TimelineSearchTarget } | null>(
+    null,
+  );
+  if (
+    props.searchTarget &&
+    (retained?.target !== props.searchTarget || retained.text !== props.children)
+  ) {
+    setRetained({ text: props.children, target: props.searchTarget });
+  }
+  // Closing Find only removes the highlight. Retain the source window so a huge
+  // formatted message cannot replace it and unexpectedly move the reading point.
+  const target = props.searchTarget ?? (retained?.text === props.children ? retained.target : null);
+  if (!target) return <MarkdownImpl {...props} />;
+  const offset = searchMatchOffset(props.children, target);
+  if (offset < 0)
+    return props.searchTarget ? (
+      <div role="status">This match is no longer in the message source.</div>
+    ) : (
+      <MarkdownImpl {...props} />
+    );
+  // Bound mounted text even for multi-megabyte messages. Do not split a UTF-16 pair
+  // at excerpt edges; the selected range itself is validated against the source.
+  let start = Math.max(0, offset - 240);
+  let end = Math.min(props.children.length, offset + target.query.length + 240);
+  if (start > 0 && /[\uDC00-\uDFFF]/.test(props.children[start]!)) start--;
+  if (end < props.children.length && /[\uDC00-\uDFFF]/.test(props.children[end]!)) end++;
+  const MatchTag = props.searchTarget ? "mark" : "span";
+  return (
+    <div className={cn("og-markdown-body min-w-0 break-words", props.className)}>
+      <div data-og-annotation-chrome="" className="text-xs opacity-70">
+        Match in message source · Excerpt stays in place when Find closes
+        <button
+          type="button"
+          disabled={!!props.searchTarget}
+          title={props.searchTarget ? "Close Find to show the formatted message" : undefined}
+          className="ml-2 inline-flex min-h-7 items-center rounded-og-sm px-1.5 text-og-xs font-medium text-og-fg-muted outline-hidden hover:text-og-fg focus-visible:ring-2 focus-visible:ring-og-accent/45 pointer-coarse:min-h-11 disabled:opacity-50"
+          onClick={() => setRetained(null)}
+        >
+          Show formatted message
+        </button>
+      </div>
+      <div style={{ whiteSpace: "pre-wrap", overflowWrap: "anywhere" }}>
+        {start > 0 ? "…" : ""}
+        {props.children.slice(start, offset)}
+        <MatchTag
+          data-og-search-occurrence={target.occurrence ?? 0}
+          data-og-search-sequence={target.sequence}
+          data-og-search-query={target.query}
+          data-og-search-offset={offset}
+        >
+          {props.children.slice(offset, offset + target.query.length)}
+        </MatchTag>
+        {props.children.slice(offset + target.query.length, end)}
+        {end < props.children.length ? "…" : ""}
+      </div>
+    </div>
+  );
+});

package/src/components/message-timeline.tsx

@@ -1,9 +1,16 @@
 import { RollingActivity } from "../timeline/rolling-activity";
+import {
+  isTimelineSearchTarget,
+  TimelineSearchRevealContext,
+  useTimelineSearchNavigation,
+  type TimelineSearchTarget,
+} from "./timeline-search";
 import { GenieLoadingOptionsContext, type GenieLoadingOptions } from "../timeline/genie-loading";
 import { ChildSessionLink } from "./child-session-link";
 import { useStartupDetails } from "../timeline/startup-preference";
 import { parseSandboxFileArtifactReceipt } from "@opengeni/sdk";
 import { unwrapMcpOutput } from "../timeline/parsers";
+import { compactionSkipSubtitle } from "../timeline/compaction-copy";
 import { isRetainedImageContentType } from "../timeline/retained-image";
 import { mcpToolLeaf } from "../timeline/tool-display-name";
 import type {
@@ -134,6 +141,8 @@ const TimelineAnnotationSelection = lazy(() => import("./timeline-annotation-sel
 const TimelineAnnotationMarkers = lazy(() => import("./timeline-annotation-markers"));
 
 export type MessageTimelineProps = {
+  /** Exact durable search hit; clearing it removes highlighting without moving the reader. */
+  searchTarget?: TimelineSearchTarget | null | undefined;
   /** Localized user-message disclosure actions, including custom UserMessageBody renderers. */
   userMessageDisclosureLabels?: UserMessageDisclosureLabels | undefined;
   /** Raw session events (projected internally) … */
@@ -146,7 +155,11 @@ export type MessageTimelineProps = {
   renderMessageActions?: ((item: AgentMessageItem | UserMessageItem) => ReactNode) | undefined;
   /** Plug a markdown renderer for message bodies (e.g. streamdown). */
   renderMessageText?:
-    | ((text: string, item: AgentMessageItem | UserMessageItem) => ReactNode)
+    | ((
+        text: string,
+        item: AgentMessageItem | UserMessageItem,
+        context: { searchTarget: TimelineSearchTarget | null },
+      ) => ReactNode)
     | undefined;
   /** Drill into a spawned worker session. */
   onOpenSession?: ((sessionId: string) => void) | undefined;
@@ -413,6 +426,7 @@ function cssEscapeAttribute(value: string): string {
  */
 export function MessageTimeline({
   userMessageDisclosureLabels,
+  searchTarget,
   events,
   items,
   status: _status,
@@ -457,6 +471,46 @@ export function MessageTimeline({
       (item) => item.kind !== "auth-needed" || shouldRenderAuthNeeded(item),
     );
   }, [items, events, shouldRenderAuthNeeded]);
+  const searchItem = searchTarget
+    ? resolvedItems.find((item) => isTimelineSearchTarget(item, searchTarget))
+    : undefined;
+  const searchRevealKey =
+    searchItem && searchTarget
+      ? JSON.stringify([
+          searchItem.id,
+          searchTarget.query,
+          searchTarget.occurrence ?? 0,
+          searchTarget.offset ?? null,
+        ])
+      : null;
+  const searchTargetRef = useRef(searchTarget);
+  searchTargetRef.current = searchTarget;
+  const renderSearchableMessageText = useMemo(
+    () =>
+      renderMessageText
+        ? (text: string, item: AgentMessageItem | UserMessageItem) =>
+            renderMessageText(text, item, {
+              searchTarget: searchItem?.id === item.id ? (searchTarget ?? null) : null,
+            })
+        : (text: string, item: AgentMessageItem | UserMessageItem) => {
+            const body = (
+              <Markdown
+                searchTarget={searchItem?.id === item.id ? searchTarget : null}
+                streaming={item.kind === "agent-message" && item.streaming}
+              >
+                {text}
+              </Markdown>
+            );
+            return item.kind === "user-message" ? (
+              <UserMessageBody messageId={item.id} text={text}>
+                {body}
+              </UserMessageBody>
+            ) : (
+              body
+            );
+          },
+    [renderMessageText, searchItem?.id, searchTarget],
+  );
   // Event-window identity is independent of projected rows (partial messages
   // can acquire a different first-delta id when older text arrives).
   const sourceItems = events ?? items;
@@ -1005,7 +1059,7 @@ export function MessageTimeline({
       userMessageDisclosureContext,
       behavior: {
         renderMessageActions,
-        renderMessageText,
+        renderMessageText: renderSearchableMessageText,
         onOpenSession,
         onMemoryClick,
         onReconnect,
@@ -1028,7 +1082,7 @@ export function MessageTimeline({
       onReconnect,
       renderAuthNeeded,
       renderMessageActions,
-      renderMessageText,
+      renderSearchableMessageText,
       resolveProviderLogo,
       toolRegistry,
       genieLoading,
@@ -1037,6 +1091,19 @@ export function MessageTimeline({
     ],
   );
 
+  const releaseSearchPin = useCallback(() => {
+    applyPinned(false);
+    stopFollow();
+    setRevealed(true);
+  }, [applyPinned, stopFollow]);
+  useTimelineSearchNavigation(
+    scrollRef,
+    searchItem?.id,
+    searchTarget,
+    releaseSearchPin,
+    resolvedItems,
+  );
+
   const requestOlderIfUnderfilled = useCallback(
     (node: HTMLElement, retry?: OlderLoadAttempt) => {
       let currentAttempt = olderLoadAttemptRef.current;
@@ -1707,6 +1774,8 @@ export function MessageTimeline({
   // at what just became the live bottom — paging forward to the tip must not
   // strand them unpinned watching new content grow below.
   useEffect(() => {
+    // Closing find is paint-only; it must not trigger this history-to-tip rule.
+    if (searchTargetRef.current) return;
     if (hasNewer) {
       stopFollow();
       applyPinned(false);
@@ -2100,23 +2169,31 @@ export function MessageTimeline({
                           ) : null}
                           {groups.map(({ group, key, entranceEnabled }, index) => {
                             return (
-                              <TimelineGroupEntry
+                              <TimelineSearchRevealContext.Provider
                                 key={key}
-                                groupKey={key}
-                                group={group}
-                                nextGroup={groups[index + 1]?.group}
-                                startupDismissed={
-                                  group.kind === "activity" &&
-                                  group.items.some(
-                                    (item) => item.turnId && turnsWithOutput.has(item.turnId),
-                                  )
-                                }
-                                entranceEnabled={entranceEnabled}
-                                liveEntranceEnabled={
-                                  group.kind === "activity" ? !bulkRender : undefined
+                                value={
+                                  searchItem && timelineGroupItemIds(group).includes(searchItem.id)
+                                    ? searchRevealKey
+                                    : null
                                 }
-                                context={timelineGroupEntryContext}
-                              />
+                              >
+                                <TimelineGroupEntry
+                                  groupKey={key}
+                                  group={group}
+                                  nextGroup={groups[index + 1]?.group}
+                                  startupDismissed={
+                                    group.kind === "activity" &&
+                                    group.items.some(
+                                      (item) => item.turnId && turnsWithOutput.has(item.turnId),
+                                    )
+                                  }
+                                  entranceEnabled={entranceEnabled}
+                                  liveEntranceEnabled={
+                                    group.kind === "activity" ? !bulkRender : undefined
+                                  }
+                                  context={timelineGroupEntryContext}
+                                />
+                              </TimelineSearchRevealContext.Provider>
                             );
                           })}
                           {groups.length > 0 && trailingState ? (
@@ -2455,7 +2532,9 @@ type TimelineGroupEntryContext = {
 
 type TimelineGroupBehaviorProps = {
   renderMessageActions: MessageTimelineProps["renderMessageActions"];
-  renderMessageText: MessageTimelineProps["renderMessageText"];
+  renderMessageText:
+    | ((text: string, item: AgentMessageItem | UserMessageItem) => ReactNode)
+    | undefined;
   onOpenSession: MessageTimelineProps["onOpenSession"];
   onMemoryClick: MessageTimelineProps["onMemoryClick"];
   onReconnect: MessageTimelineProps["onReconnect"];
@@ -3260,7 +3339,7 @@ function CompactionRow({ item }: { item: ContextCompactionItem }) {
     item.phase === "compacted"
       ? "Chat history above is unchanged"
       : item.phase === "skipped"
-        ? compactionSkipSubtitle(item.skipReason)
+        ? compactionSkipSubtitle(item.skipReason, item.providerRejection)
         : null;
   const pill =
     item.phase === "skipped" && item.skipReason === "summarization_failed"
@@ -3290,21 +3369,6 @@ function CompactionRow({ item }: { item: ContextCompactionItem }) {
   );
 }
 
-function compactionSkipSubtitle(reason: string | null): string {
-  switch (reason) {
-    case "no_history":
-      return "No active history to compact";
-    case "replacement_not_smaller":
-      return "Checkpoint would not reduce memory size";
-    case "replacement_unchanged":
-      return "Checkpoint made no progress";
-    case "summarization_failed":
-      return "Request it again to retry. Chat history is unchanged.";
-    default:
-      return "Compaction was not needed. Chat history is unchanged.";
-  }
-}
-
 /** Hover-reveal clock beside the copy control (sent / finished). */
 function MessageFooterTime({ occurredAt }: { occurredAt: string }) {
   return (
@@ -3355,7 +3419,10 @@ function UserMessageRow({
         >
           <div className={MESSAGE_BUBBLE_CLASS}>
             {item.text ? (
-              <div data-og-annotation-source-key={item.annotationSource?.eventId}>
+              <div
+                data-og-search-item={item.id}
+                data-og-annotation-source-key={item.annotationSource?.eventId}
+              >
                 {renderMessageText ? (
                   renderMessageText(item.text, item)
                 ) : (
@@ -3578,6 +3645,7 @@ function AgentMessageRow({
     >
       <div
         data-og-wide-table-message=""
+        data-og-search-item={item.id}
         data-og-annotation-source-key={item.annotationSource?.eventId}
       >
         {body}

package/src/components/model-picker.tsx

@@ -59,7 +59,14 @@ function providerGroups(models: ClientModel[], codexOnly: boolean) {
       optionDisabled: codexOnly && !isCodexClientModel(model),
     });
   }
-  return [...byProvider.values()];
+  const groups = [...byProvider.values()];
+  if (codexOnly) {
+    const codexIndex = groups.findIndex((group) =>
+      group.models.some((model) => !model.optionDisabled && isCodexClientModel(model)),
+    );
+    if (codexIndex > 0) groups.unshift(...groups.splice(codexIndex, 1));
+  }
+  return groups;
 }
 
 export function ModelPicker({
@@ -78,8 +85,9 @@ export function ModelPicker({
     [rows, codexOnly],
   );
   const billingGroups = useMemo(
-    () => (effectiveRows.length > 0 ? groupPickerRowsByBillingClass(effectiveRows) : []),
-    [effectiveRows],
+    () =>
+      effectiveRows.length > 0 ? groupPickerRowsByBillingClass(effectiveRows, { codexOnly }) : [],
+    [effectiveRows, codexOnly],
   );
   const providerGroupList = useMemo(() => providerGroups(models, codexOnly), [models, codexOnly]);
   const useBillingGroups = Boolean(effectiveRows.length);

package/src/components/model-policy-picker-menu.tsx

@@ -34,7 +34,10 @@ export function ModelPolicyPickerMenu(props: ModelPolicyPickerProps) {
       `${row.label} ${row.id} ${row.providerLabel} ${row.billingClassLabel} ${payerSummaryForModel(row.catalog)}`.toLowerCase();
     return words.every((word) => text.includes(word));
   });
-  const groups = groupPickerRowsByBillingClass(filtered);
+  const matchingIds = new Set(filtered.map((row) => row.id));
+  const groups = groupPickerRowsByBillingClass(rows, { codexOnly: props.codexOnly === true })
+    .map((group) => ({ ...group, rows: group.rows.filter((row) => matchingIds.has(row.id)) }))
+    .filter((group) => group.rows.length > 0);
   const choose = (row: ClientPickerModelRow) => {
     if (!row.selectable || props.disabled) return;
     if (row.id !== props.model) props.onModelChange(row.id);
@@ -139,8 +142,12 @@ export function ModelPolicyPickerMenu(props: ModelPolicyPickerProps) {
         ) : (
           <>
             {groups.map((group) => (
-              <section key={group.billingClass} aria-label={group.label} className="py-1">
-                <div className="flex items-center gap-2 px-2.5 py-1.5 text-og-control font-medium text-og-fg-subtle">
+              <section
+                key={group.billingClass}
+                aria-label={group.label}
+                className="py-2.5 first:pt-1 [&+section]:border-t [&+section]:border-og-border"
+              >
+                <div className="flex items-center gap-2 px-2.5 py-1.5 text-og-control font-semibold text-og-fg">
                   <BillingClassMark billingClass={group.billingClass} aria-label="" />
                   {group.label}
                 </div>

package/src/components/preview-loading.tsx

@@ -0,0 +1,154 @@
+import { useEffect, useRef } from "react";
+
+/** Private loading surface: never receives or executes the unfinished fence. */
+export function PreviewLoading() {
+  const ref = useRef<HTMLCanvasElement>(null);
+  useEffect(() => {
+    const canvas = ref.current;
+    if (!canvas) return;
+    let ctx: CanvasRenderingContext2D | null;
+    try {
+      ctx = canvas.getContext("2d");
+    } catch {
+      return; // The CSS grid and status remain when canvas is unavailable.
+    }
+    if (!ctx) return;
+    const context = ctx;
+    const motion = window.matchMedia?.("(prefers-reduced-motion: reduce)");
+    let frame: number | undefined;
+    let time = 2;
+    let last: number | undefined;
+    let disposed = false;
+    // Without visibility observation, keep a static surface rather than doing
+    // unbounded work for previews that may be outside the viewport.
+    let visible = false;
+    const canAnimate = () => !disposed && visible && !document.hidden && motion?.matches === false;
+
+    function draw() {
+      const w = canvas!.clientWidth;
+      const h = canvas!.clientHeight;
+      if (!w || !h || document.hidden || disposed) return;
+      const d = Math.min(window.devicePixelRatio || 1, 2);
+      if (canvas!.width !== Math.round(w * d) || canvas!.height !== Math.round(h * d)) {
+        canvas!.width = Math.round(w * d);
+        canvas!.height = Math.round(h * d);
+      }
+      const style = getComputedStyle(canvas!);
+      const ink = style.getPropertyValue("--_og-preview-ink").trim() || "#bca3ef";
+      const glowColor = style.getPropertyValue("--_og-preview-glow").trim() || "#8f6ccc";
+      context.setTransform(d, 0, 0, d, 0, 0);
+      context.clearRect(0, 0, w, h);
+      const cx = w * (0.5 + 0.13 * Math.sin(time * 0.21));
+      const cy = h * (0.5 + 0.12 * Math.cos(time * 0.27));
+      const glow = context.createRadialGradient(cx, cy, 0, cx, cy, Math.max(w, h) * 0.65);
+      glow.addColorStop(0, glowColor);
+      glow.addColorStop(1, "transparent");
+      context.globalAlpha = 0.09;
+      context.fillStyle = glow;
+      context.fillRect(0, 0, w, h);
+      const rows = Math.ceil(h / 18) + 7;
+      const cols = Math.ceil(w / 18) + 7;
+      const points = Array.from({ length: rows }, (_row, r) =>
+        Array.from({ length: cols }, (_col, c) => {
+          const x = (c - 3) * 18;
+          const y = (r - 3) * 18;
+          const dist = Math.hypot((x - cx) * 0.8, y - cy);
+          const wave = Math.sin(dist * 0.032 - time * 0.95);
+          return {
+            x: x + ((x - cx) / Math.max(dist, 1)) * wave * 4,
+            y: y + ((y - cy) / Math.max(dist, 1)) * wave * 4,
+            l: Math.pow((wave + 1) / 2, 5),
+          };
+        }),
+      );
+      context.strokeStyle = ink;
+      context.fillStyle = ink;
+      context.lineWidth = 0.65;
+      points.forEach((row, r) =>
+        row.forEach((p, c) => {
+          context.globalAlpha = 0.035 + p.l * 0.055;
+          context.beginPath();
+          if (c + 1 < cols) {
+            context.moveTo(p.x, p.y);
+            context.lineTo(row[c + 1]!.x, row[c + 1]!.y);
+          }
+          if (r + 1 < rows) {
+            context.moveTo(p.x, p.y);
+            context.lineTo(points[r + 1]![c]!.x, points[r + 1]![c]!.y);
+          }
+          context.stroke();
+          context.globalAlpha = 0.15 + p.l * 0.55;
+          context.beginPath();
+          context.arc(p.x, p.y, 0.85 + p.l * 0.65, 0, Math.PI * 2);
+          context.fill();
+        }),
+      );
+      context.globalAlpha = 1;
+      canvas!.dataset.painted = "true";
+    }
+
+    function stop() {
+      if (frame !== undefined) window.cancelAnimationFrame(frame);
+      frame = undefined;
+      last = undefined;
+    }
+    function tick(stamp: number) {
+      frame = undefined;
+      if (!canAnimate()) return;
+      if (last !== undefined) time += Math.min((stamp - last) / 1000, 0.05);
+      last = stamp;
+      draw();
+      frame = window.requestAnimationFrame(tick);
+    }
+    function refresh() {
+      stop();
+      if (disposed || document.hidden || (!visible && intersection)) return;
+      draw();
+      if (canAnimate() && typeof window.requestAnimationFrame === "function") {
+        frame = window.requestAnimationFrame(tick);
+      }
+    }
+    const intersection =
+      typeof IntersectionObserver === "function"
+        ? new IntersectionObserver(([entry]) => {
+            visible = entry?.isIntersecting === true;
+            refresh();
+          })
+        : undefined;
+    intersection?.observe(canvas);
+    const resize = typeof ResizeObserver === "function" ? new ResizeObserver(refresh) : undefined;
+    resize?.observe(canvas);
+    // Observe only ancestors, not the document subtree. This also updates the
+    // static reduced-motion canvas when a host changes its local theme.
+    const theme =
+      typeof MutationObserver === "function" ? new MutationObserver(refresh) : undefined;
+    for (let ancestor = canvas.parentElement; ancestor; ancestor = ancestor.parentElement) {
+      theme?.observe(ancestor, {
+        attributes: true,
+        attributeFilter: ["class", "style", "data-og-theme"],
+      });
+    }
+    motion?.addEventListener?.("change", refresh);
+    document.addEventListener("visibilitychange", refresh);
+    window.addEventListener("resize", refresh);
+    // Old hosts get one still frame; observed surfaces wait until onscreen.
+    if (!intersection) draw();
+    return () => {
+      disposed = true;
+      stop();
+      intersection?.disconnect();
+      resize?.disconnect();
+      theme?.disconnect();
+      motion?.removeEventListener?.("change", refresh);
+      document.removeEventListener("visibilitychange", refresh);
+      window.removeEventListener("resize", refresh);
+    };
+  }, []);
+
+  return (
+    <div className="og-preview-loading">
+      <canvas ref={ref} aria-hidden="true" />
+      <span className="og-preview-loading-label">Preparing preview…</span>
+    </div>
+  );
+}