@opengeni/react 0.48.0 → 0.52.1

package/src/timeline/shared.tsx

@@ -1,9 +1,10 @@
 import { CameraIcon, CameraOffIcon, ChevronRightIcon } from "lucide-react";
-import { useState, type ReactNode } from "react";
+import { createContext, useContext, useState, type ReactNode } from "react";
 import { cn } from "../lib/cn";
 import { stringifyPayload } from "../lib/format";
 import { useForcedDefaultOpen } from "./disclosure-context";
 import { useLightboxOptional } from "./screenshot-lightbox";
+import type { ToolCallTruncation } from "./types";
 
 /* ----------------------------------------------------------------------------
    Shared timeline primitives
@@ -37,6 +38,22 @@ export type DisclosureChip = {
   text: string;
 };
 
+const ToolCallTruncationContext = createContext<ToolCallTruncation | null>(null);
+
+export function ToolCallTruncationProvider({
+  value,
+  children,
+}: {
+  value: ToolCallTruncation | null;
+  children: ReactNode;
+}) {
+  return (
+    <ToolCallTruncationContext.Provider value={value}>
+      {children}
+    </ToolCallTruncationContext.Provider>
+  );
+}
+
 export type ActivityDisclosureProps = {
   icon: ReactNode;
   /** Icon tint. Defaults to the muted foreground; renderers pass accent/failed. */
@@ -81,6 +98,8 @@ export type ActivityDisclosureProps = {
   cancelled?: boolean | undefined;
   /** When false the row is a static line (no expand affordance). */
   expandable?: boolean | undefined;
+  /** Seed this individual disclosure open; user interaction still owns it afterwards. */
+  defaultOpen?: boolean | undefined;
   children?: ReactNode | undefined;
 };
 
@@ -109,6 +128,7 @@ export function ActivityDisclosure({
   failed,
   cancelled,
   expandable = true,
+  defaultOpen,
   children,
 }: ActivityDisclosureProps) {
   // `failed` takes precedence over `cancelled` when both are set (shouldn't happen, but be safe).
@@ -128,8 +148,9 @@ export function ActivityDisclosure({
   // An ancestor may seed the initial open state (screenshot instrumentation);
   // absent in normal app usage, where the row starts collapsed.
   const forcedDefaultOpen = useForcedDefaultOpen();
-  const [open, setOpen] = useState(forcedDefaultOpen ?? false);
-  const hasBody = expandable && children != null;
+  const [open, setOpen] = useState(defaultOpen ?? forcedDefaultOpen ?? false);
+  const truncation = useContext(ToolCallTruncationContext);
+  const hasBody = expandable && (children != null || truncation != null);
 
   // The preview is detail-on-demand: it is suppressed once the row is open so a
   // path/stat shown in the body never also sits in the collapsed row.
@@ -184,7 +205,7 @@ export function ActivityDisclosure({
       )}
       {/* The right gutter carries at most ONE signal: the media thumbnail, else a
           terse settle chip (hidden once expanded — the body owns the detail). */}
-      {media ? (
+      {media && !open ? (
         <span className="ml-auto flex shrink-0 items-center gap-2 pl-2">{media}</span>
       ) : chip && !open ? (
         <span className="ml-auto shrink-0 pl-2">
@@ -235,12 +256,31 @@ export function ActivityDisclosure({
       {open ? (
         <div className="mb-2 ml-7 mt-1.5 flex flex-col gap-2 overflow-hidden animate-og-expand">
           {children}
+          {truncation ? <ToolCallTruncationNotice truncation={truncation} /> : null}
         </div>
       ) : null}
     </div>
   );
 }
 
+function ToolCallTruncationNotice({ truncation }: { truncation: ToolCallTruncation }) {
+  const fullEvidence = truncation.fullEvidence.available
+    ? "retained"
+    : (truncation.fullEvidence.reason ?? "unavailable");
+  return (
+    <div data-og-tool-output-truncation="" className="text-og-sm leading-5 text-og-fg-subtle">
+      Output bounded at <code className="font-og-mono">{truncation.surface}</code>
+      {truncation.omittedBytes != null && truncation.omittedBytes > 0
+        ? ` · ${truncation.omittedBytes.toLocaleString()} bytes omitted`
+        : null}
+      {" · reason "}
+      <code className="font-og-mono">{truncation.reason}</code>
+      {" · full evidence "}
+      <code className="font-og-mono">{fullEvidence}</code>
+    </div>
+  );
+}
+
 /**
  * The right-gutter settle chip. Color is spent only on the exception: a failure
  * is a red dot + red text (the one colored token in a healthy run); success and
@@ -467,10 +507,14 @@ export function Thumbnail({
   src,
   caption,
   alt = "screenshot",
+  expandLabel = "Expand screenshot",
+  lightboxLabel = "Screenshot",
 }: {
   src: string;
   caption?: string | undefined;
   alt?: string;
+  expandLabel?: string | undefined;
+  lightboxLabel?: string | undefined;
 }) {
   const lightbox = useLightboxOptional();
   const [failed, setFailed] = useState(false);
@@ -498,7 +542,7 @@ export function Thumbnail({
       type="button"
       onClick={(event) => {
         event.stopPropagation();
-        lightbox.open(src, caption, event.currentTarget);
+        lightbox.open(src, caption, event.currentTarget, lightboxLabel);
       }}
       onKeyDown={(event) => {
         if (event.key === "Enter" || event.key === " ") {
@@ -510,7 +554,7 @@ export function Thumbnail({
         "group/thumb relative inline-flex overflow-hidden bg-og-bg outline-hidden",
         "focus-visible:ring-2 focus-visible:ring-og-accent",
       )}
-      aria-label="Expand screenshot"
+      aria-label={expandLabel}
     >
       {img}
     </button>
@@ -527,10 +571,14 @@ export function ScreenshotFigure({
   src,
   caption,
   alt = "screenshot",
+  expandLabel = "Expand screenshot",
+  lightboxLabel = "Screenshot",
 }: {
   src: string;
   caption?: string | undefined;
   alt?: string;
+  expandLabel?: string | undefined;
+  lightboxLabel?: string | undefined;
 }) {
   const lightbox = useLightboxOptional();
   const [failed, setFailed] = useState(false);
@@ -554,9 +602,9 @@ export function ScreenshotFigure({
       ) : lightbox ? (
         <button
           type="button"
-          onClick={(event) => lightbox.open(src, caption, event.currentTarget)}
+          onClick={(event) => lightbox.open(src, caption, event.currentTarget, lightboxLabel)}
           className={surface}
-          aria-label="Expand screenshot"
+          aria-label={expandLabel}
         >
           {img}
         </button>

package/src/timeline/tool-renderers.tsx

@@ -26,15 +26,17 @@ import {
   Share2Icon,
   TargetIcon,
   TerminalIcon,
+  VideoIcon,
   WrenchIcon,
 } from "lucide-react";
-import { useEffect, useState, type ReactNode } from "react";
+import { useEffect, useRef, useState, type ReactNode } from "react";
 import { stringifyPayload, tryParseJson } from "../lib/format";
 import { useTimelineComputeLabel } from "./compute-label";
 import {
   applyPatchOpsFromToolItem,
   controlCaret,
   execTruncated,
+  generatedImageReceipt,
   isExecSessionLostBanner,
   looksBinary,
   mediaPreviewFact,
@@ -664,11 +666,14 @@ function ComputerCallRenderer({ item, loadRetainedScreenshot }: ToolRendererProp
       );
     }
     return (
-      <RetainedScreenshotDisclosure
+      <RetainedSessionImageDisclosure
         artifact={retained}
         load={loadRetainedScreenshot}
-        verb={verb}
-        countSuffix={countSuffix}
+        title={`${verb}${countSuffix}`}
+        caption={`${verb}${countSuffix}`}
+        noun="screenshot"
+        icon={<CameraIcon className={ICON_SIZE} />}
+        lightboxLabel="Screenshot"
         batched={batched}
         failed={isFailed}
         cancelled={isCancelled}
@@ -756,30 +761,26 @@ function ComputerCallRenderer({ item, loadRetainedScreenshot }: ToolRendererProp
   );
 }
 
-function RetainedScreenshotDisclosure({
-  artifact,
-  load,
-  verb,
-  countSuffix,
-  batched,
-  failed,
-  cancelled,
-}: {
-  artifact: RetainedArtifactReference;
-  load: ToolRendererProps["loadRetainedScreenshot"];
-  verb: string;
-  countSuffix: string;
-  batched: string | null;
-  failed: boolean;
-  cancelled: boolean;
-}) {
-  const [state, setState] = useState<
-    | { kind: "loading" }
-    | { kind: "ready"; url: string }
-    | { kind: "unavailable"; label: string }
-    | { kind: "error"; message: string }
-  >({ kind: "loading" });
-
+type RetainedImageState =
+  | { kind: "loading" }
+  | { kind: "ready"; url: string }
+  | { kind: "unavailable"; label: string }
+  | { kind: "error"; message: string };
+
+function useRetainedImageObjectUrl(
+  artifact: RetainedArtifactReference,
+  load: ToolRendererProps["loadRetainedArtifact"],
+): RetainedImageState {
+  const [state, setState] = useState<RetainedImageState>({ kind: "loading" });
+  // Function outputs are commonly serialized JSON. Parsing them creates a new
+  // object on every render, so depend on the immutable wire value rather than
+  // object identity; otherwise the loader can refetch after its own setState.
+  const artifactValue = retainedArtifactValue(artifact);
+  const stableArtifactRef = useRef({ value: artifactValue, artifact });
+  if (stableArtifactRef.current.value !== artifactValue) {
+    stableArtifactRef.current = { value: artifactValue, artifact };
+  }
+  const stableArtifact = stableArtifactRef.current.artifact;
   useEffect(() => {
     if (!load) {
       setState({ kind: "unavailable", label: "retrieval is not configured" });
@@ -788,14 +789,24 @@ function RetainedScreenshotDisclosure({
     const controller = new AbortController();
     let objectUrl: string | null = null;
     setState({ kind: "loading" });
-    void load(artifact, controller.signal)
-      .then((bytes) => {
+    void load(stableArtifact, controller.signal)
+      .then((source) => {
         if (controller.signal.aborted) return;
-        if (!bytes) {
+        if (!source) {
           setState({ kind: "unavailable", label: "bytes are unavailable" });
           return;
         }
-        objectUrl = URL.createObjectURL(new Blob([Uint8Array.from(bytes)], { type: "image/png" }));
+        if (!(source instanceof Uint8Array)) {
+          if (!source.url.trim()) {
+            setState({ kind: "unavailable", label: "URL is unavailable" });
+            return;
+          }
+          setState({ kind: "ready", url: source.url });
+          return;
+        }
+        objectUrl = URL.createObjectURL(
+          new Blob([source as unknown as BlobPart], { type: stableArtifact.contentType }),
+        );
         setState({ kind: "ready", url: objectUrl });
       })
       .catch((error: unknown) => {
@@ -809,38 +820,86 @@ function RetainedScreenshotDisclosure({
             ? { kind: "unavailable", label: "deleted" }
             : status === 410
               ? { kind: "unavailable", label: "expired or unavailable" }
-              : {
-                  kind: "error",
-                  message: "retrieval failed",
-                },
+              : { kind: "error", message: "retrieval failed" },
         );
       });
     return () => {
       controller.abort();
       if (objectUrl) URL.revokeObjectURL(objectUrl);
     };
-  }, [artifact, load]);
+  }, [stableArtifact, load]);
+  return state;
+}
+
+function retainedArtifactValue(artifact: RetainedArtifactReference): string {
+  return [
+    artifact.artifactId,
+    artifact.kind,
+    artifact.contentType,
+    artifact.originalBytes,
+    artifact.sha256,
+    artifact.retainedAt,
+    artifact.dimensions?.width ?? "",
+    artifact.dimensions?.height ?? "",
+    artifact.retention.policy,
+    artifact.retention.expiresAt ?? "",
+    artifact.retrieval.method,
+    artifact.retrieval.path,
+    artifact.retrieval.acceptRanges,
+    artifact.retrieval.maxRangeBytes,
+  ].join("\0");
+}
+
+function RetainedSessionImageDisclosure({
+  artifact,
+  load,
+  title,
+  caption,
+  noun,
+  icon,
+  lightboxLabel,
+  batched,
+  failed,
+  cancelled,
+}: {
+  artifact: RetainedArtifactReference;
+  load: ToolRendererProps["loadRetainedScreenshot"];
+  title: string;
+  caption: string;
+  noun: "image" | "screenshot";
+  icon: ReactNode;
+  lightboxLabel: string;
+  batched: string | null;
+  failed: boolean;
+  cancelled: boolean;
+}) {
+  const state = useRetainedImageObjectUrl(artifact, load);
 
-  const caption = `${verb}${countSuffix}`;
   return (
     <ActivityDisclosure
-      icon={<CameraIcon className={ICON_SIZE} />}
+      icon={icon}
       iconTone={failed ? "failed" : state.kind === "ready" ? "accent" : "muted"}
-      title={caption}
+      title={title}
       failed={failed}
       cancelled={cancelled}
       preview={
         state.kind === "loading"
-          ? "loading retained screenshot…"
+          ? `loading retained ${noun}…`
           : state.kind === "error"
-            ? "screenshot retrieval failed"
+            ? `${noun} retrieval failed`
             : state.kind === "unavailable"
-              ? `screenshot ${state.label}`
+              ? `${noun} ${state.label}`
               : undefined
       }
       media={
         state.kind === "ready" ? (
-          <Thumbnail src={state.url} caption={caption} />
+          <Thumbnail
+            src={state.url}
+            caption={caption}
+            alt={caption}
+            expandLabel={`Expand ${noun}`}
+            lightboxLabel={lightboxLabel}
+          />
         ) : state.kind === "loading" ? (
           <MediaSkeleton />
         ) : (
@@ -849,19 +908,171 @@ function RetainedScreenshotDisclosure({
       }
     >
       {state.kind === "ready" ? (
-        <ScreenshotFigure src={state.url} caption={caption} />
+        <ScreenshotFigure
+          src={state.url}
+          caption={caption}
+          alt={caption}
+          expandLabel={`Expand ${noun}`}
+          lightboxLabel={lightboxLabel}
+        />
       ) : state.kind === "loading" ? (
-        <BodyNote>Loading the retained screenshot…</BodyNote>
+        <BodyNote>Loading the retained {noun}…</BodyNote>
       ) : state.kind === "unavailable" ? (
-        <BodyNote>Screenshot {state.label}.</BodyNote>
+        <BodyNote>
+          {noun === "screenshot" ? "Screenshot" : "Image"} {state.label}.
+        </BodyNote>
       ) : (
-        <BodyNote tone="error">Screenshot retrieval failed: {state.message}</BodyNote>
+        <BodyNote tone="error">
+          {noun === "screenshot" ? "Screenshot" : "Image"} retrieval failed: {state.message}
+        </BodyNote>
       )}
       {batched ? <BodyNote>batched: {batched}</BodyNote> : null}
     </ActivityDisclosure>
   );
 }
 
+function GeneratedImageRenderer({ item, loadRetainedArtifact }: ToolRendererProps) {
+  const args = parseToolArgs(item.arguments);
+  const prompt = typeof args.prompt === "string" ? args.prompt : "";
+  const raw =
+    item.raw && typeof item.raw === "object" && !Array.isArray(item.raw)
+      ? (item.raw as Record<string, unknown>)
+      : null;
+  // Function tools settle through agent.toolCall.output; OpenAI's hosted image
+  // call is already complete on agent.toolCall.created and carries the compact
+  // receipt in raw.output. Both paths deliberately converge on one renderer.
+  const receipt = generatedImageReceipt(item.output) ?? generatedImageReceipt(raw?.output);
+  if (item.status === "running") {
+    return (
+      <ActivityDisclosure
+        icon={<ImageIcon className={ICON_SIZE} />}
+        iconTone="running"
+        title="Generating image"
+        running
+        preview={<RunningPreview>{truncatePreview(prompt, 72) || "creating…"}</RunningPreview>}
+        media={<MediaSkeleton />}
+      >
+        {prompt ? <BodyNote>{prompt}</BodyNote> : null}
+      </ActivityDisclosure>
+    );
+  }
+  if (!receipt) return <GenericRenderer item={item} />;
+  return (
+    <GeneratedImageDisclosure
+      receipt={receipt}
+      load={loadRetainedArtifact}
+      prompt={prompt}
+      failed={item.status === "failed"}
+      cancelled={item.status === "cancelled"}
+    />
+  );
+}
+
+function GeneratedVideoRenderer({ item }: ToolRendererProps) {
+  const args = parseToolArgs(item.arguments);
+  const prompt = typeof args.prompt === "string" ? args.prompt : "";
+  const parsedOutput = typeof item.output === "string" ? tryParseJson(item.output) : item.output;
+  const accepted =
+    parsedOutput &&
+    typeof parsedOutput === "object" &&
+    !Array.isArray(parsedOutput) &&
+    (parsedOutput as Record<string, unknown>).status === "accepted";
+  const failed = item.status === "failed";
+  const cancelled = item.status === "cancelled";
+  const running = item.status === "running";
+  return (
+    <ActivityDisclosure
+      icon={<VideoIcon className={ICON_SIZE} />}
+      iconTone={failed ? "failed" : running ? "running" : accepted ? "accent" : "muted"}
+      title={
+        running ? "Starting video generation" : accepted ? "Generating video" : "Generate video"
+      }
+      running={running}
+      failed={failed}
+      cancelled={cancelled}
+      preview={truncatePreview(prompt, 88) || (accepted ? "request accepted" : undefined)}
+    >
+      {prompt ? <BodyNote>{prompt}</BodyNote> : null}
+      {accepted ? (
+        <BodyNote>The video will appear here when it is ready.</BodyNote>
+      ) : item.output !== undefined ? (
+        <PayloadBlock label="Output" value={item.output} />
+      ) : null}
+    </ActivityDisclosure>
+  );
+}
+function GeneratedImageDisclosure({
+  receipt,
+  load,
+  prompt,
+  failed,
+  cancelled,
+}: {
+  receipt: NonNullable<ReturnType<typeof generatedImageReceipt>>;
+  load: ToolRendererProps["loadRetainedArtifact"];
+  prompt: string;
+  failed: boolean;
+  cancelled: boolean;
+}) {
+  const state = useRetainedImageObjectUrl(receipt.artifact, load);
+  const dimensions = receipt.artifact.dimensions!;
+  const title = failed ? "Image generation failed" : "Generated image";
+  const caption = prompt || `Generated image · ${dimensions.width}×${dimensions.height}`;
+  return (
+    <ActivityDisclosure
+      icon={<ImageIcon className={ICON_SIZE} />}
+      iconTone={failed ? "failed" : state.kind === "ready" ? "accent" : "muted"}
+      title={title}
+      defaultOpen={!failed && !cancelled}
+      failed={failed}
+      cancelled={cancelled}
+      preview={
+        state.kind === "loading"
+          ? "loading image…"
+          : state.kind === "error"
+            ? "image retrieval failed"
+            : state.kind === "unavailable"
+              ? `image ${state.label}`
+              : truncatePreview(prompt, 88) || `${dimensions.width}×${dimensions.height}`
+      }
+      media={
+        state.kind === "ready" ? (
+          <Thumbnail
+            src={state.url}
+            caption={caption}
+            alt={caption}
+            expandLabel="Expand generated image"
+            lightboxLabel="Generated image"
+          />
+        ) : state.kind === "loading" ? (
+          <MediaSkeleton />
+        ) : (
+          <MediaEmpty />
+        )
+      }
+    >
+      {state.kind === "ready" ? (
+        <ScreenshotFigure
+          src={state.url}
+          caption={caption}
+          alt={caption}
+          expandLabel="Expand generated image"
+          lightboxLabel="Generated image"
+        />
+      ) : state.kind === "loading" ? (
+        <BodyNote>Loading the generated image…</BodyNote>
+      ) : state.kind === "unavailable" ? (
+        <BodyNote>Image {state.label}.</BodyNote>
+      ) : (
+        <BodyNote tone="error">Image retrieval failed.</BodyNote>
+      )}
+      <BodyNote>
+        {dimensions.width}×{dimensions.height} · {receipt.sandboxPath}
+      </BodyNote>
+    </ActivityDisclosure>
+  );
+}
+
 /* ---- web_search ------------------------------------------------------------ */
 
 type WebSearchResult = { title: string; domain: string; snippet: string };
@@ -1013,11 +1224,12 @@ const VIEW_IMAGE_ERRORS = [
   "unable to read image",
 ];
 
-function ViewImageRenderer({ item }: ToolRendererProps) {
+function ViewImageRenderer({ item, loadRetainedScreenshot }: ToolRendererProps) {
   const args = parseToolArgs(item.arguments);
   const path = typeof args.path === "string" ? args.path : "";
   const out = item.output;
   const text = typeof out === "string" ? out : "";
+  const retained = retainedScreenshotMetadata(out);
   const omittedMedia = mediaPreviewFact(out);
 
   if (item.status === "running") {
@@ -1038,6 +1250,45 @@ function ViewImageRenderer({ item }: ToolRendererProps) {
   const viewFailed = item.status === "failed";
   const viewCancelled = item.status === "cancelled";
 
+  if (retained) {
+    const title = `Viewed ${basename(path)}`;
+    if (!retained.available) {
+      const state =
+        retained.reason === "expired" || retained.reason === "deleted"
+          ? retained.reason
+          : "unavailable";
+      return (
+        <ActivityDisclosure
+          icon={<ImageIcon className={ICON_SIZE} />}
+          iconTone={viewFailed ? "failed" : "muted"}
+          title={`${title} · ${state}`}
+          failed={viewFailed}
+          cancelled={viewCancelled}
+          preview={`image ${state}`}
+          media={<MediaEmpty />}
+        >
+          <BodyNote tone={viewFailed ? "error" : undefined}>
+            Image {state}: {retained.reason.replaceAll("_", " ")}.
+          </BodyNote>
+        </ActivityDisclosure>
+      );
+    }
+    return (
+      <RetainedSessionImageDisclosure
+        artifact={retained}
+        load={loadRetainedScreenshot}
+        title={title}
+        caption={path || title}
+        noun="image"
+        icon={<ImageIcon className={ICON_SIZE} />}
+        lightboxLabel="Image"
+        batched={null}
+        failed={viewFailed}
+        cancelled={viewCancelled}
+      />
+    );
+  }
+
   const errMatch = VIEW_IMAGE_ERRORS.find((p) => text.includes(p));
   if (errMatch) {
     const tooBig = text.includes("exceeded the allowed size");
@@ -1935,7 +2186,6 @@ const BASE_ENTRIES: ToolRegistryEntry[] = [
   // truth and is consulted first by the registry.
   { match: "rawType", type: "apply_patch_call", render: ApplyPatchRenderer },
   { match: "rawType", type: "computer_call", render: ComputerCallRenderer },
-  { match: "rawType", type: "hosted_tool_call", render: WebSearchRenderer },
   { match: "rawType", type: "tool_search_call", render: ToolSearchRenderer },
   // First-party sandbox + MCP tools resolve by name (exact or MCP leaf).
   { match: "name", name: "exec_command", render: ExecRenderer },
@@ -1955,6 +2205,9 @@ const BASE_ENTRIES: ToolRegistryEntry[] = [
   { match: "name", name: "computer_keypress", render: ComputerCallRenderer },
   { match: "name", name: "computer_drag", render: ComputerCallRenderer },
   { match: "name", name: "web_search_call", render: WebSearchRenderer },
+  { match: "name", name: "image_generation_call", render: GeneratedImageRenderer },
+  { match: "name", name: "generate_image", render: GeneratedImageRenderer },
+  { match: "name", name: "generate_video", render: GeneratedVideoRenderer },
   { match: "name", name: "tool_search", render: ToolSearchRenderer },
   { match: "name", name: "view_image", render: ViewImageRenderer },
   { match: "name", name: "environment_set_variable", render: SecretSetRenderer },