@opengeni/react 3.3.2 → 3.4.1-canary.38960406141001

package/src/components/markdown.tsx

@@ -1,5 +1,7 @@
 import {
   Children,
+  createContext,
+  useContext,
   isValidElement,
   memo,
   useEffect,
@@ -13,17 +15,40 @@ import {
 import ReactMarkdown, {
   defaultUrlTransform,
   type Components,
+  type ExtraProps,
   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 { remarkSoftLineBreaks } from "./remark-soft-line-breaks";
+import { rehypeSecretRefs } from "./rehype-secret-refs";
+import { mayContainSecretReference, SecretRefChip } from "./secret-ref-chip";
+import { useSecretsUi } from "../secrets-ui";
 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";
+import {
+  parseOpenGeniLink,
+  parseSandboxLink,
+  parseRetainedFileReference,
+  isReservedOpenGeniLink,
+  openGeniLinkScheme,
+  type OpenGeniLinkTarget,
+} from "@opengeni/sdk";
+import {
+  chainLinkResolvers,
+  useOpenGeniLinkResolver,
+  type OpenGeniLinkResolver,
+} from "./open-geni-links";
 
 /**
  * The default renderer for chat message bodies in {@link MessageTimeline}.
@@ -39,9 +64,35 @@ import { TooltipProvider } from "./tooltip";
  * the tokens land. Consumers who want a different renderer can still pass
  * `renderMessageText` to `MessageTimeline` to override this entirely.
  */
+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;
+  suppressImages?: boolean;
+}>({ source: "" });
+
 export type MarkdownProps = {
+  /** Resolve a retained-file reference to the host's authenticated artifact page. */
+  artifactHref?: ((artifactId: string) => string) | undefined;
+  /** Reveals a bounded source excerpt; closing Find retains it until explicit restore. */
+  searchTarget?: TimelineSearchTarget | null | undefined;
+  renderImage?: ((image: { src: string; alt: string }) => ReactNode) | undefined;
+  /** Show alt text without loading image URLs (e.g. in search previews). */
+  suppressImages?: boolean | undefined;
+  /** Host opt-in for assistant-authored interactive fences. */
+  renderInteractiveBlock?: ((block: MarkdownInteractiveBlock) => ReactNode) | undefined;
   children: string;
   className?: string | undefined;
+  /**
+   * Render a single newline inside prose as a line break (`<br>`), the way chat
+   * apps show messages; CommonMark otherwise folds it into a space. Chat message
+   * bodies enable this. Leave it off for documents and other authored Markdown.
+   * Code (fenced and inline), lists, tables, and blank-line paragraphs are
+   * unaffected either way.
+   */
+  softLineBreaks?: boolean | undefined;
   /**
    * While true, newly arrived source fades in through tip ink (`.og-stream-ink`):
    * an age window over each append batch — fast streams keep a large soft band,
@@ -56,6 +107,13 @@ export type MarkdownProps = {
    * exact decoded `sandbox:` payload; `line`, when present, is 1-based.
    */
   onSandboxFile?: ((path: string, line?: number) => void | Promise<void>) | undefined;
+  /**
+   * Resolve Opengeni object links (`artifact:`, `sandbox:`, editable
+   * artifacts, Sites) to a host URL or action. Asked before any
+   * {@link OpenGeniLinkProvider} above this body; `artifactHref` and
+   * `onSandboxFile` still win for their own kinds.
+   */
+  resolveLink?: OpenGeniLinkResolver | undefined;
 };
 
 /** Exact target path plus optional 1-based line from a markdown href. */
@@ -90,7 +148,7 @@ const baseComponents: Components = {
   ),
   h4: ({ children, ...props }) => (
     <h4
-      className="mt-4 mb-1.5 text-og-sm font-semibold uppercase tracking-[0.04em] text-og-fg-muted first:mt-0"
+      className="mt-4 mb-1.5 text-og-sm font-semibold uppercase tracking-[0.04em] text-og-fg first:mt-0"
       {...props}
     >
       {children}
@@ -163,14 +221,14 @@ const baseComponents: Components = {
   // the `pre` renderer), so a `code` reaching here is treated as inline.
   code: ({ children, className: _className, ...props }) => (
     <code
-      className="rounded-og-xs bg-og-surface-1 px-1 py-0.5 font-og-mono text-og-sm text-og-fg"
+      className="rounded-og-xs bg-og-surface-2 px-1 py-0.5 font-og-mono text-og-sm text-og-fg"
       {...props}
     >
       {children}
     </code>
   ),
   // Fenced code — quiet mono block (no card / no nested vertical scroll).
-  pre: ({ children }) => <MarkdownCodeBlock>{children}</MarkdownCodeBlock>,
+  pre: InteractiveCodeBlock,
   // Tables stay unboxed (hairline rules); hover reveals a TSV copy control.
   table: ({ children, ...props }) => <MarkdownTable {...props}>{children}</MarkdownTable>,
   thead: ({ children, ...props }) => <thead {...props}>{children}</thead>,
@@ -184,111 +242,201 @@ const baseComponents: Components = {
   ),
   td: ({ children, ...props }) => (
     <td
-      className="border-b border-og-border/70 px-0 py-1.5 pr-4 align-top text-og-fg-muted [tr:last-child>&]:border-b-0"
+      className="border-b border-og-border/70 px-0 py-1.5 pr-4 align-top text-og-fg-muted"
       {...props}
     >
       {children}
     </td>
   ),
-  img: ({ alt, src, ...props }) =>
-    src ? (
-      <img
-        alt={alt ?? ""}
-        src={src}
-        className="my-3 max-w-full rounded-og-md border border-og-border"
-        {...props}
-      />
-    ) : alt ? (
-      <span className="text-og-fg-subtle" aria-disabled="true">
-        {alt}
-      </span>
-    ) : null,
+  img: MarkdownImage,
 };
 
-const MARKDOWN_LINK_CLASS =
-  "break-words font-medium text-og-accent-strong underline-offset-2 hover:underline";
+const MARKDOWN_LINK_CLASS = "break-words font-medium og-link";
+
+// Keep renderer component types stable: rebuilding them remounts paragraphs,
+// destroys native selections, and resets embedded media on host updates.
+const MarkdownLinkContext = createContext<
+  Pick<MarkdownProps, "onSandboxFile" | "artifactHref" | "resolveLink">
+>({});
+
+const UNAVAILABLE_LABEL: Record<Exclude<OpenGeniLinkTarget["kind"], "sandbox-file">, string> = {
+  file: "This file needs a workspace-aware host to open",
+  "editable-artifact": "This artifact needs a workspace-aware host to open",
+  site: "This Site needs a workspace-aware host to open",
+};
 
-function markdownComponents(onSandboxFile: MarkdownProps["onSandboxFile"]): Components {
-  return {
-    ...baseComponents,
-    a: ({ children, href, ...props }) => {
-      const location = sandboxFileLocationFromHref(href);
-      if (location !== null) {
+function linkActionTitle(target: OpenGeniLinkTarget): string {
+  if (target.kind === "sandbox-file") {
+    return target.line !== null
+      ? `Open ${target.path} at line ${target.line}`
+      : `Open ${target.path}`;
+  }
+  return target.kind === "file"
+    ? "Open file"
+    : target.kind === "site"
+      ? "Open Site"
+      : "Open artifact";
+}
+
+/** A `rehypeSecretRefs` placeholder becomes a chip; every other span passes through. */
+function MarkdownSpan({
+  node: _node,
+  children,
+  ...props
+}: ComponentPropsWithoutRef<"span"> & ExtraProps) {
+  const raw = (props as Record<string, unknown>)["data-og-secret-ref"];
+  if (typeof raw === "string") return <MarkdownSecretRef raw={raw}>{children}</MarkdownSecretRef>;
+  return <span {...props}>{children}</span>;
+}
+
+function MarkdownSecretRef({ raw, children }: { raw: string; children?: ReactNode }) {
+  const ui = useSecretsUi();
+  const token = ui?.tokenize(raw).find((candidate) => candidate.type === "reference");
+  if (!token || token.type !== "reference") return <>{children}</>;
+  return <SecretRefChip reference={token.reference} />;
+}
+
+const markdownComponents: Components = {
+  ...baseComponents,
+  span: MarkdownSpan,
+  p: ({ children, node, ...props }) => {
+    const containsArtifact = node?.children.some(
+      (child) =>
+        child.type === "element" &&
+        child.tagName === "img" &&
+        typeof child.properties.src === "string" &&
+        retainedImageId(child.properties.src),
+    );
+    const Tag = containsArtifact ? "div" : "p";
+    return (
+      <Tag className="my-2.5 leading-7 first:mt-0 last:mb-0" {...props}>
+        {children}
+      </Tag>
+    );
+  },
+  a: ({ children, href, ...props }) => {
+    const { onSandboxFile, artifactHref, resolveLink } = useContext(MarkdownLinkContext);
+    const inherited = useOpenGeniLinkResolver();
+    const target = parseOpenGeniLink(href);
+    if (target) {
+      // Explicit per-kind props keep their historical precedence.
+      if (target.kind === "file" && target.workspaceId === null && artifactHref) {
+        const destination = defaultUrlTransform(artifactHref(target.fileId));
+        if (destination) {
+          return (
+            <a
+              className={MARKDOWN_LINK_CLASS}
+              href={destination}
+              target="_blank"
+              rel="noreferrer noopener"
+            >
+              {children}
+            </a>
+          );
+        }
+      }
+      const resolution =
+        target.kind === "sandbox-file" && onSandboxFile
+          ? { open: () => onSandboxFile(target.path, target.line ?? undefined) }
+          : chainLinkResolvers(resolveLink, inherited)?.(target);
+      const destination = resolution?.href ? defaultUrlTransform(resolution.href) : "";
+      if (destination) {
+        return (
+          <a
+            className={MARKDOWN_LINK_CLASS}
+            href={destination}
+            target="_blank"
+            rel="noreferrer noopener"
+          >
+            {children}
+          </a>
+        );
+      }
+      if (resolution?.open) {
         return (
-          <SandboxMarkdownLink location={location} onSandboxFile={onSandboxFile}>
+          <ActionMarkdownLink title={linkActionTitle(target)} onOpen={resolution.open}>
             {children}
-          </SandboxMarkdownLink>
+          </ActionMarkdownLink>
         );
       }
-      if (isSandboxHref(href) || !href) {
+      if (target.kind === "sandbox-file") {
         return (
           <span
             className="break-words font-medium text-og-fg-subtle underline decoration-dotted underline-offset-2"
             aria-disabled="true"
-            title={
-              isSandboxHref(href)
-                ? "This sandbox file reference is invalid"
-                : "This link is unavailable"
-            }
+            title="This sandbox file requires a session-aware handler"
           >
             {children}
           </span>
         );
       }
+      // Never navigate: a console path resolves against the host origin and 404s.
       return (
-        <a
-          className={MARKDOWN_LINK_CLASS}
-          target="_blank"
-          rel="noreferrer noopener"
-          href={href}
-          {...props}
+        <span title={UNAVAILABLE_LABEL[target.kind]} data-og-link-unavailable={target.kind}>
+          {children} (artifact unavailable)
+        </span>
+      );
+    }
+    if (isReservedOpenGeniLink(href) || !href) {
+      return (
+        <span
+          className="break-words text-og-fg-subtle"
+          aria-disabled="true"
+          title={
+            isSandboxHref(href)
+              ? "This sandbox file reference is invalid"
+              : "This link is unavailable"
+          }
         >
-          {children}
-        </a>
+          {children} (link unavailable)
+        </span>
       );
-    },
-  };
-}
+    }
+    return (
+      <a
+        className={MARKDOWN_LINK_CLASS}
+        target="_blank"
+        rel="noreferrer noopener"
+        href={href}
+        {...props}
+      >
+        {children}
+      </a>
+    );
+  },
+};
 
-function SandboxMarkdownLink({
-  location,
-  onSandboxFile,
+function ActionMarkdownLink({
+  title,
+  onOpen,
   children,
 }: {
-  location: SandboxFileLocation;
-  onSandboxFile: MarkdownProps["onSandboxFile"];
+  title: string;
+  onOpen: () => void | Promise<void>;
   children: ReactNode;
 }) {
   const [state, setState] = useState<"idle" | "loading" | "error">("idle");
-  const { path, line } = location;
-  if (!onSandboxFile) {
-    return (
-      <span
-        className="break-words font-medium text-og-fg-subtle underline decoration-dotted underline-offset-2"
-        aria-disabled="true"
-        title="This sandbox file requires a session-aware handler"
-      >
-        {children}
-      </span>
-    );
-  }
-  const idleTitle = line !== null ? `Open ${path} at line ${line}` : `Open ${path}`;
   return (
     <button
       type="button"
       className={cn(
         MARKDOWN_LINK_CLASS,
-        "inline-flex min-h-7 cursor-pointer items-center disabled:cursor-wait disabled:opacity-70 pointer-coarse:min-h-11",
+        "inline-flex min-h-7 cursor-pointer items-center aria-disabled:cursor-wait aria-disabled:opacity-70 pointer-coarse:min-h-11",
       )}
-      disabled={state === "loading"}
+      // Not `disabled`: disabling the focused control drops focus to the page,
+      // so a host viewer could not return focus to the link that opened it.
+      aria-disabled={state === "loading" || undefined}
       aria-busy={state === "loading"}
-      title={state === "error" ? "Couldn't open this file. Select to retry." : idleTitle}
+      title={state === "error" ? "Couldn't open this file. Select to retry." : title}
       onClick={() => {
+        if (state === "loading") return;
         setState("loading");
-        void Promise.resolve(onSandboxFile(path, line ?? undefined)).then(
-          () => setState("idle"),
-          () => setState("error"),
-        );
+        void Promise.resolve()
+          .then(onOpen)
+          .then(
+            () => setState("idle"),
+            () => setState("error"),
+          );
       }}
     >
       {children}
@@ -297,44 +445,18 @@ function SandboxMarkdownLink({
   );
 }
 
-const SANDBOX_SCHEME = "sandbox:";
-const LEGACY_WORKSPACE_PREFIX = "/workspace/";
-const TRAILING_LINE = /:([0-9]+)$/u;
-const TRAILING_INVALID_LINE = /:-(?:[0-9]+)$|:[0-9]+-[0-9]+$/u;
-const CONTROL_CHARACTER = /[\u0000-\u001f\u007f]/u;
-
 function isSandboxHref(href: string | undefined): boolean {
-  return href?.startsWith(SANDBOX_SCHEME) ?? false;
+  return openGeniLinkScheme(href) === "sandbox";
 }
 
 /**
- * Parse an OpenGeni `sandbox:` application href (plus the historical bare
+ * Parse an Opengeni `sandbox:` application href (plus the historical bare
  * `/workspace/...` form). The decoded path is intentionally opaque here:
  * target selection, path policy, and filesystem authority belong to the
  * session-aware host and its FileSystem boundary.
  */
 export function sandboxFileLocationFromHref(href: string | undefined): SandboxFileLocation | null {
-  if (!href) return null;
-  const encodedLocation = isSandboxHref(href)
-    ? href.slice(SANDBOX_SCHEME.length)
-    : href.startsWith(LEGACY_WORKSPACE_PREFIX)
-      ? href
-      : null;
-  if (!encodedLocation || encodedLocation.includes("?") || encodedLocation.includes("#")) {
-    return null;
-  }
-  if (TRAILING_INVALID_LINE.test(encodedLocation)) return null;
-  const lineMatch = TRAILING_LINE.exec(encodedLocation);
-  const encodedPath = lineMatch ? encodedLocation.slice(0, -lineMatch[0].length) : encodedLocation;
-  const line = lineMatch?.[1] ? Number(lineMatch[1]) : null;
-  if (line !== null && (!Number.isSafeInteger(line) || line < 1)) return null;
-  if (!encodedPath) return null;
-  try {
-    const path = decodeURIComponent(encodedPath);
-    return path && !CONTROL_CHARACTER.test(path) ? { path, line } : null;
-  } catch {
-    return null;
-  }
+  return parseSandboxLink(href);
 }
 
 /** Return the exact decoded path for a supported sandbox-link href. */
@@ -342,8 +464,28 @@ export function sandboxFilePathFromHref(href: string | undefined): string | null
   return sandboxFileLocationFromHref(href)?.path ?? null;
 }
 
+export function retainedImageId(src: string): string | null {
+  return parseRetainedFileReference(src);
+}
+function MarkdownImage({ src, alt }: ComponentPropsWithoutRef<"img">) {
+  const { renderImage, suppressImages } = useContext(InteractiveContext);
+  if (suppressImages)
+    return <span data-og-image-placeholder="">{alt || "Image"} (preview unavailable)</span>;
+  if (!src) return <span>{alt ?? "Image unavailable"}</span>;
+  if (retainedImageId(src))
+    return renderImage ? (
+      <>{renderImage({ src, alt: alt ?? "" })}</>
+    ) : (
+      <span>{alt || "Image"} (preview unavailable)</span>
+    );
+  return <img src={src} alt={alt ?? ""} loading="lazy" className="my-3 max-w-full rounded-og-md" />;
+}
+
 const markdownUrlTransform: UrlTransform = (url, key, node) =>
-  key === "href" && node.tagName === "a" && isSandboxHref(url) ? url : defaultUrlTransform(url);
+  (key === "href" && node.tagName === "a" && isReservedOpenGeniLink(url)) ||
+  (key === "src" && node.tagName === "img" && retainedImageId(url))
+    ? url
+    : defaultUrlTransform(url);
 
 /** How long after the stream ends the reveal pipeline stays for trailing animations. */
 /** Trailing ink window after stream end — keep ≥ {@link INK_FADE_MS}. */
@@ -381,6 +523,58 @@ function fenceLanguage(children: ReactNode): string | null {
   return found;
 }
 
+function InteractiveCodeBlock({ children, node }: ComponentPropsWithoutRef<"pre"> & ExtraProps) {
+  const { source, render, streaming } = useContext(InteractiveContext);
+  const language = fenceLanguage(children);
+  if (render && (language === "opengeni-html" || language === "opengeni-site")) {
+    const start = node?.position?.start.offset;
+    const end = node?.position?.end.offset;
+    const original =
+      start !== undefined && end !== undefined && end <= source.length
+        ? source.slice(start, end)
+        : "";
+    const lines = original.trimEnd().split("\n");
+    const opening = lines[0]?.match(/^ {0,3}([\x60]{3,}|~{3,})/);
+
+    const closing = lines
+      .at(-1)
+      ?.replace(/^\s*(?:>\s*)+/, "")
+      .trim();
+    const complete =
+      opening &&
+      lines.length > 1 &&
+      closing &&
+      closing.length >= opening[1]!.length &&
+      [...closing].every((c) => c === opening[1]![0]);
+    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({
+          kind: language === "opengeni-html" ? "html" : "site",
+          content: nodeText(children).replace(/\n$/, ""),
+        })}
+      </>
+    );
+  }
+  return <MarkdownCodeBlock>{children}</MarkdownCodeBlock>;
+}
+
 function MarkdownCodeBlock({ children }: { children?: ReactNode }) {
   const code = nodeText(children).replace(/\n$/, "");
   const language = fenceLanguage(children);
@@ -411,10 +605,41 @@ function MarkdownCodeBlock({ children }: { children?: ReactNode }) {
 }
 
 function MarkdownTable({ children, className, ...props }: ComponentPropsWithoutRef<"table">) {
-  const tableRef = useRef<HTMLTableElement | null>(null);
+  const wrapperRef = useRef<HTMLDivElement>(null);
+  const tableRef = useRef<HTMLTableElement>(null);
+  const layoutRef = useRef<ReturnType<typeof observeMarkdownTableLayout>>(undefined);
+  useEffect(() => {
+    const wrapper = wrapperRef.current;
+    const table = tableRef.current;
+    if (!wrapper?.closest("[data-og-wide-table-message]") || !table) return;
+    let disposed = false;
+    // Ordinary tables remain usable even if this optional layout chunk fails.
+    void import("./markdown-table-layout")
+      .then(({ observeMarkdownTableLayout }) => {
+        if (!disposed) layoutRef.current = observeMarkdownTableLayout(wrapper, table);
+      })
+      .catch(() => {});
+    return () => {
+      disposed = true;
+      layoutRef.current?.disconnect();
+      layoutRef.current = undefined;
+    };
+  }, []);
+  // ReactMarkdown recreates table children even when only later prose changes.
+  // Remeasure genuine content changes without collapsing the expanded wrapper
+  // between cleanup and the asynchronous observer-module import on each update.
+  useEffect(() => {
+    layoutRef.current?.measure();
+  }, [children]);
   return (
-    <div className="group/copy relative mt-3 max-w-full first:mt-0">
-      <div className="pointer-events-none absolute top-0 right-0 z-10">
+    // Touch shows the copy action permanently at full touch size, so it sits
+    // under the table there instead of covering the right-aligned header.
+    <div
+      ref={wrapperRef}
+      data-og-table=""
+      className="group/copy relative mt-3 max-w-full first:mt-0 pointer-coarse:pb-11"
+    >
+      <div className="pointer-events-none absolute top-0 right-0 z-10 pointer-coarse:top-auto pointer-coarse:bottom-0">
         <div className="pointer-events-auto">
           <CopyButton
             text={() => tableElementToTsv(tableRef.current)}
@@ -426,7 +651,12 @@ function MarkdownTable({ children, className, ...props }: ComponentPropsWithoutR
       <div className="overflow-x-auto" tabIndex={0}>
         <table
           ref={tableRef}
-          className={cn("w-full min-w-0 border-collapse text-og-base", className)}
+          className={cn(
+            // Leading `&` only: a trailing one (`tr:last-child>&`) under the scoped
+            // selector list needs `:is()`, which bundlers warn about for older targets.
+            "w-full min-w-0 border-collapse text-og-base [&_tr:last-child>td]:border-b-0",
+            className,
+          )}
           {...props}
         >
           {children}
@@ -436,7 +666,26 @@ function MarkdownTable({ children, className, ...props }: ComponentPropsWithoutR
   );
 }
 
-function MarkdownImpl({ children, className, streaming = false, onSandboxFile }: MarkdownProps) {
+type RemarkPlugins = NonNullable<Parameters<typeof ReactMarkdown>[0]["remarkPlugins"]>;
+const REMARK_PLUGINS: RemarkPlugins = [remarkGfm];
+// Structural plugin types (see remark-soft-line-breaks.ts) need one cast at the seam.
+const SOFT_LINE_BREAK_REMARK_PLUGINS = [
+  remarkGfm,
+  remarkSoftLineBreaks,
+] as unknown as RemarkPlugins;
+
+function MarkdownImpl({
+  children,
+  artifactHref,
+  className,
+  softLineBreaks = false,
+  streaming = false,
+  onSandboxFile,
+  renderInteractiveBlock,
+  renderImage,
+  resolveLink,
+  suppressImages,
+}: MarkdownProps) {
   // Tip-ink engine for THIS body: created on the first streaming render, kept
   // through a short linger after the stream ends (so the last age window can
   // finish), then dropped so settled bodies pay zero cost. Observing during
@@ -468,11 +717,23 @@ function MarkdownImpl({ children, className, streaming = false, onSandboxFile }:
     hadRevealRef.current = true;
   }
   const revealActive = reveal !== null && (streaming || reveal.hasActive(now));
-  // The plugin walks the standard hast tree; a structural local type keeps the
-  // module dependency-free, at the cost of this narrowing cast at the seam.
+  const secretsUi = useSecretsUi();
+  // Secret references become chip placeholders before the ink split, so a
+  // reference is never cut into ink spans. Without a host tokenizer, or when
+  // the text names no reference, the pipeline is unchanged.
+  const secretRefs =
+    secretsUi && mayContainSecretReference(children)
+      ? [[rehypeSecretRefs, { tokenize: secretsUi.tokenize }]]
+      : [];
+  // The plugins walk the standard hast tree; structural local types keep the
+  // modules dependency-free, at the cost of this narrowing cast at the seam.
+  const rehypePluginList = [
+    ...secretRefs,
+    ...(revealActive && reveal !== null ? [[rehypeStreamReveal, { reveal, now }]] : []),
+  ];
   const rehypePlugins =
-    revealActive && reveal !== null
-      ? ([[rehypeStreamReveal, { reveal, now }]] as unknown as NonNullable<
+    rehypePluginList.length > 0
+      ? (rehypePluginList as unknown as NonNullable<
           Parameters<typeof ReactMarkdown>[0]["rehypePlugins"]
         >)
       : undefined;
@@ -525,32 +786,108 @@ function MarkdownImpl({ children, className, streaming = false, onSandboxFile }:
   // fences don't snap to final GFM one commit before the crystallize morph.
   // Reveal identity still tracks the true source (`children`).
   const parseText = streaming || revealActive ? softenStreamingMarkdown(children) : children;
-  const components = useMemo(() => markdownComponents(onSandboxFile), [onSandboxFile]);
+  const linkContext = useMemo(
+    () => ({ onSandboxFile, artifactHref, resolveLink }),
+    [onSandboxFile, artifactHref, resolveLink],
+  );
+
+  const interactiveContext = useMemo(
+    () => ({
+      source: children,
+      streaming,
+      ...(renderInteractiveBlock ? { render: renderInteractiveBlock } : {}),
+      ...(renderImage ? { renderImage } : {}),
+      ...(suppressImages ? { suppressImages } : {}),
+    }),
+    [children, streaming, renderInteractiveBlock, renderImage, suppressImages],
+  );
 
   // `min-w-0` lets the prose shrink inside flex parents (message bubbles) so
   // long links and code blocks wrap/scroll instead of forcing overflow.
   return (
-    <TooltipProvider delayDuration={400}>
-      <div
-        ref={bodyRef}
-        className={cn(
-          "og-markdown-body min-w-0 break-words",
-          settling && "og-markdown-settle",
-          className,
-        )}
-      >
-        <ReactMarkdown
-          remarkPlugins={[remarkGfm]}
-          rehypePlugins={rehypePlugins}
-          components={components}
-          urlTransform={markdownUrlTransform}
-        >
-          {parseText}
-        </ReactMarkdown>
-      </div>
-    </TooltipProvider>
+    <MarkdownLinkContext.Provider value={linkContext}>
+      <InteractiveContext.Provider value={interactiveContext}>
+        <TooltipProvider delayDuration={400}>
+          <div
+            ref={bodyRef}
+            className={cn(
+              "og-markdown-body min-w-0 break-words",
+              settling && "og-markdown-settle",
+              className,
+            )}
+          >
+            <ReactMarkdown
+              remarkPlugins={softLineBreaks ? SOFT_LINE_BREAK_REMARK_PLUGINS : REMARK_PLUGINS}
+              rehypePlugins={rehypePlugins}
+              components={markdownComponents}
+              urlTransform={markdownUrlTransform}
+            >
+              {parseText}
+            </ReactMarkdown>
+          </div>
+        </TooltipProvider>
+      </InteractiveContext.Provider>
+    </MarkdownLinkContext.Provider>
   );
 }
 
 /** 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>
+  );
+});