@opengeni/react 6.1.0 → 7.0.0-canary.35625901699001

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,16 @@ 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 = {
+  /** 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;
   /** Host opt-in for assistant-authored interactive fences. */
   renderInteractiveBlock?: ((block: MarkdownInteractiveBlock) => ReactNode) | undefined;
@@ -210,10 +219,46 @@ const baseComponents: Components = {
 const MARKDOWN_LINK_CLASS =
   "break-words font-medium text-og-accent-strong underline-offset-2 hover:underline";
 
-function markdownComponents(onSandboxFile: MarkdownProps["onSandboxFile"]): Components {
+function markdownComponents(
+  onSandboxFile: MarkdownProps["onSandboxFile"],
+  artifactHref: MarkdownProps["artifactHref"],
+): Components {
   return {
     ...baseComponents,
+    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 artifactId = href ? retainedImageId(href) : null;
+      if (artifactId) {
+        const destination = artifactHref?.(artifactId);
+        return destination ? (
+          <a
+            className={MARKDOWN_LINK_CLASS}
+            href={defaultUrlTransform(destination)}
+            target="_blank"
+            rel="noreferrer noopener"
+          >
+            {children}
+          </a>
+        ) : (
+          <span title="This artifact requires a workspace-aware host">
+            {children} (artifact unavailable)
+          </span>
+        );
+      }
       const location = sandboxFileLocationFromHref(href);
       if (location !== null) {
         return (
@@ -225,7 +270,7 @@ function markdownComponents(onSandboxFile: MarkdownProps["onSandboxFile"]): Comp
       if (isSandboxHref(href) || !href) {
         return (
           <span
-            className="break-words font-medium text-og-fg-subtle underline decoration-dotted underline-offset-2"
+            className="break-words text-og-fg-subtle"
             aria-disabled="true"
             title={
               isSandboxHref(href)
@@ -233,7 +278,7 @@ function markdownComponents(onSandboxFile: MarkdownProps["onSandboxFile"]): Comp
                 : "This link is unavailable"
             }
           >
-            {children}
+            {children} (link unavailable)
           </span>
         );
       }
@@ -364,7 +409,7 @@ function MarkdownImage({ src, alt }: ComponentPropsWithoutRef<"img">) {
 }
 
 const markdownUrlTransform: UrlTransform = (url, key, node) =>
-  (key === "href" && node.tagName === "a" && isSandboxHref(url)) ||
+  (key === "href" && node.tagName === "a" && (isSandboxHref(url) || retainedImageId(url))) ||
   (key === "src" && node.tagName === "img" && retainedImageId(url))
     ? url
     : defaultUrlTransform(url);
@@ -406,7 +451,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 +473,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({
@@ -523,6 +584,7 @@ function MarkdownTable({ children, className, ...props }: ComponentPropsWithoutR
 
 function MarkdownImpl({
   children,
+  artifactHref,
   className,
   streaming = false,
   onSandboxFile,
@@ -617,15 +679,19 @@ function MarkdownImpl({
   // 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 components = useMemo(
+    () => markdownComponents(onSandboxFile, artifactHref),
+    [onSandboxFile, artifactHref],
+  );
 
   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 +722,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>