@opengeni/react 0.48.0 → 0.52.1

package/dist/{chunk-XCNTXWBB.js → chunk-JAGDUCZQ.js}

@@ -1,19 +1,23 @@
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger
+} from "./chunk-FK6VG4LL.js";
 import {
   EmptyQueueStateSurface,
+  TimelineAnnotationsChip,
   requestQueueDraftEdit
-} from "./chunk-O4VXOBGF.js";
+} from "./chunk-WSK7G5LE.js";
+import {
+  usePortalTokenStyle
+} from "./chunk-VZTQ73XT.js";
 import {
   buildTimeline,
   groupTimeline,
   mcpToolLeaf,
   toolDisplayName
-} from "./chunk-LHLYWG5R.js";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger
-} from "./chunk-FK6VG4LL.js";
+} from "./chunk-JR3QFY6B.js";
 import {
   formatClockTime,
   formatRelativeTime,
@@ -21,18 +25,19 @@ import {
   truncate,
   tryParseJson
 } from "./chunk-LAKLF4PA.js";
-import {
-  usePortalTokenStyle
-} from "./chunk-VZTQ73XT.js";
 import {
   cn
 } from "./chunk-22KP6LR5.js";
+import {
+  copyTextToClipboard,
+  tableElementToTsv
+} from "./chunk-JVYQRRC4.js";
 
 // src/components/queue-surface.tsx
 import { Loader2Icon } from "lucide-react";
 import { lazy, Suspense } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
-var loadQueueSurface = () => import("./queue-surface-implementation-U5JFG7HT.js");
+var loadQueueSurface = () => import("./queue-surface-implementation-2KVJTYXH.js");
 var QueueSurface = createQueueSurface(loadQueueSurface);
 function createQueueSurface(loadImplementation) {
   const LazyQueueSurface = lazy(async () => ({
@@ -224,6 +229,8 @@ function SessionChrome({
       queuedTurns: currentTurnId ? turns.filter((turn) => turn.id !== currentTurnId) : turns
     };
   }, [composerSteering, queue.pendingByTurn, turns]);
+  const stoppingKind = composer?.stoppingAttempt ?? (queue.stoppingPreviousAttempt ? queue.effectiveControl?.state === "paused" ? "current" : "previous" : null);
+  const stopping = stoppingKind !== null;
   const canMutateQueue = !readOnly && composer !== void 0;
   const liveGoal = record?.status === "active" && record.continuation?.state === "running" && record.continuation.reason === "goal_turn_running";
   const elapsed = useLiveElapsed(
@@ -246,13 +253,13 @@ function SessionChrome({
         icon: /* @__PURE__ */ jsx2(InboxIcon, { className: "size-3" })
       });
     }
-    if (steering) {
+    if (steering || stopping) {
       rows.push({
         id: "steering",
-        label: "Changing direction\u2026",
-        detail: steering.text,
-        tone: "accent",
-        icon: steering.phase === "submitting" ? /* @__PURE__ */ jsx2(Loader2Icon2, { className: "size-3 animate-og-spin" }) : /* @__PURE__ */ jsx2(ZapIcon, { className: "size-3" })
+        label: stopping ? stoppingKind === "current" ? "Stopping current work\u2026" : "Stopping previous work\u2026" : "Changing direction\u2026",
+        ...steering?.text ? { detail: steering.text } : {},
+        tone: stopping ? "waiting" : "accent",
+        icon: steering?.phase === "submitting" || stopping ? /* @__PURE__ */ jsx2(Loader2Icon2, { className: "size-3 animate-og-spin" }) : /* @__PURE__ */ jsx2(ZapIcon, { className: "size-3" })
       });
     }
     if (queuedTurns.length > 0) {
@@ -291,7 +298,17 @@ function SessionChrome({
       });
     }
     return rows;
-  }, [agentsSignal, elapsed, goalState, incoming, queuedTurns, record, steering]);
+  }, [
+    agentsSignal,
+    elapsed,
+    goalState,
+    incoming,
+    queuedTurns,
+    record,
+    steering,
+    stopping,
+    stoppingKind
+  ]);
   const [activeUncontrolled, setActiveUncontrolled] = useState(
     defaultActive
   );
@@ -375,7 +392,14 @@ function SessionChrome({
   const shellDuration = reduceMotion ? 0 : 0.22;
   const crossfadeDuration = reduceMotion ? 0 : 0.18;
   const ease = [0.22, 1, 0.36, 1];
-  const panelBody = active === "incoming" ? /* @__PURE__ */ jsx2(IncomingPanel, { inputs: incoming, onDismiss: onDismissIncoming }) : active === "steering" && steering ? /* @__PURE__ */ jsx2(SteeringPanel, { phase: steering.phase, text: steering.text }) : active === "queue" ? /* @__PURE__ */ jsx2(
+  const panelBody = active === "incoming" ? /* @__PURE__ */ jsx2(IncomingPanel, { inputs: incoming, onDismiss: onDismissIncoming }) : active === "steering" && (steering || stopping) ? /* @__PURE__ */ jsx2(
+    SteeringPanel,
+    {
+      phase: stopping ? "stopping" : steering?.phase ?? "accepted",
+      stoppingKind,
+      text: steering?.text
+    }
+  ) : active === "queue" ? /* @__PURE__ */ jsx2(
     QueuePanel,
     {
       turns: queuedTurns,
@@ -621,7 +645,11 @@ function IncomingPanel({
     }
   );
 }
-function SteeringPanel({ phase, text }) {
+function SteeringPanel({
+  phase,
+  stoppingKind,
+  text
+}) {
   return /* @__PURE__ */ jsxs2(
     "div",
     {
@@ -630,10 +658,10 @@ function SteeringPanel({ phase, text }) {
       "aria-live": "polite",
       "data-og-session-chrome-panel": "steering",
       children: [
-        /* @__PURE__ */ jsx2("span", { className: "mt-0.5 inline-flex size-5 shrink-0 items-center justify-center rounded-full bg-og-accent-soft text-og-accent", children: phase === "submitting" ? /* @__PURE__ */ jsx2(Loader2Icon2, { className: "size-3 animate-og-spin", "aria-hidden": "true" }) : /* @__PURE__ */ jsx2(ZapIcon, { className: "size-3", "aria-hidden": "true" }) }),
+        /* @__PURE__ */ jsx2("span", { className: "mt-0.5 inline-flex size-5 shrink-0 items-center justify-center rounded-full bg-og-accent-soft text-og-accent", children: phase === "submitting" || phase === "stopping" ? /* @__PURE__ */ jsx2(Loader2Icon2, { className: "size-3 animate-og-spin", "aria-hidden": "true" }) : /* @__PURE__ */ jsx2(ZapIcon, { className: "size-3", "aria-hidden": "true" }) }),
         /* @__PURE__ */ jsxs2("div", { className: "min-w-0", children: [
-          /* @__PURE__ */ jsx2("p", { className: "truncate text-og-xs font-medium leading-4 text-og-fg", children: text }),
-          /* @__PURE__ */ jsx2("p", { className: "mt-0.5 text-[10px] leading-4 text-og-fg-muted", children: phase === "submitting" ? "Sending your latest direction\u2026" : "Direction accepted. The agent will continue from it." })
+          text ? /* @__PURE__ */ jsx2("p", { className: "truncate text-og-xs font-medium leading-4 text-og-fg", children: text }) : null,
+          /* @__PURE__ */ jsx2("p", { className: cn(text && "mt-0.5", "text-[10px] leading-4 text-og-fg-muted"), children: phase === "submitting" ? "Sending your latest direction\u2026" : phase === "stopping" ? stoppingKind === "previous" ? "Direction saved. Waiting for the previous command to stop safely." : "Waiting for the current command to stop safely." : "Direction accepted. The agent will continue from it." })
         ] })
       ]
     }
@@ -1520,7 +1548,10 @@ function createToolRegistry(baseEntries, baseFallback, options = {}) {
 }
 
 // src/timeline/parsers.ts
-import { normalizeMcpOutput } from "@opengeni/sdk";
+import {
+  normalizeMcpOutput,
+  parseGeneratedImageReceipt
+} from "@opengeni/sdk";
 function sandboxCommandExitCode(out) {
   const match = String(out ?? "").match(/Process exited with code (-?\d+)/);
   return match ? Number(match[1]) : null;
@@ -1916,6 +1947,9 @@ function retainedScreenshotMetadata(out) {
   }
   return value.kind === "computer_screenshot" && value.contentType === "image/png" && typeof value.originalBytes === "number" && typeof value.sha256 === "string" && value.dimensions !== null && typeof value.dimensions === "object" && value.retention !== null && typeof value.retention === "object" && value.retention.policy === "session_screenshot" ? value : null;
 }
+function generatedImageReceipt(out) {
+  return parseGeneratedImageReceipt(out);
+}
 function mediaPreviewFact(out) {
   if (typeof out === "string" && (out.startsWith("{") || out.startsWith("["))) {
     const parsed = tryParseJson(out);
@@ -2009,10 +2043,13 @@ function LightboxRoot({ children }) {
   const [state, setState] = useState3(null);
   const [tokenSource, setTokenSource] = useState3(null);
   const portalStyle = usePortalTokenStyle(tokenSource);
-  const open = useCallback((src, caption, source) => {
-    setTokenSource(source ?? null);
-    setState(caption ? { src, caption } : { src });
-  }, []);
+  const open = useCallback(
+    (src, caption, source, label = "Screenshot") => {
+      setTokenSource(source ?? null);
+      setState(caption ? { src, caption, label } : { src, label });
+    },
+    []
+  );
   const close = useCallback(() => {
     setState(null);
     setTokenSource(null);
@@ -2037,7 +2074,7 @@ function LightboxRoot({ children }) {
         {
           asChild: true,
           forceMount: true,
-          "aria-label": "Screenshot",
+          "aria-label": state.label,
           onOpenAutoFocus: (event) => event.preventDefault(),
           children: /* @__PURE__ */ jsxs4(
             motion2.div,
@@ -2054,14 +2091,15 @@ function LightboxRoot({ children }) {
               className: "og-root fixed inset-0 z-50 flex items-center justify-center p-6 sm:p-12",
               style: portalStyle,
               children: [
-                /* @__PURE__ */ jsx6(Dialog.Title, { className: "sr-only", children: "Screenshot" }),
+                /* @__PURE__ */ jsx6(Dialog.Title, { className: "sr-only", children: state.label }),
+                /* @__PURE__ */ jsx6(Dialog.Description, { className: "sr-only", children: state.caption ?? `Expanded ${state.label.toLowerCase()}` }),
                 /* @__PURE__ */ jsxs4("figure", { className: "m-0 flex max-h-full max-w-5xl flex-col items-center gap-3", children: [
                   /* @__PURE__ */ jsxs4("div", { className: "relative flex min-h-0 w-fit max-w-full", children: [
                     /* @__PURE__ */ jsx6(
                       "img",
                       {
                         src: state.src,
-                        alt: state.caption ?? "Screenshot",
+                        alt: state.caption ?? state.label,
                         className: "min-h-0 max-h-[82vh] w-auto max-w-full rounded-og-md border border-white/10 object-contain shadow-og-lg"
                       }
                     ),
@@ -2091,8 +2129,15 @@ function LightboxRoot({ children }) {
 
 // src/timeline/shared.tsx
 import { CameraIcon, CameraOffIcon, ChevronRightIcon } from "lucide-react";
-import { useState as useState4 } from "react";
+import { createContext as createContext3, useContext as useContext3, useState as useState4 } from "react";
 import { Fragment as Fragment4, jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+var ToolCallTruncationContext = createContext3(null);
+function ToolCallTruncationProvider({
+  value,
+  children
+}) {
+  return /* @__PURE__ */ jsx7(ToolCallTruncationContext.Provider, { value, children });
+}
 var ICON_TONE = {
   accent: "text-og-accent",
   failed: "text-og-status-failed",
@@ -2111,13 +2156,15 @@ function ActivityDisclosure({
   failed,
   cancelled,
   expandable = true,
+  defaultOpen,
   children
 }) {
   const iconTone = failed && iconToneProp === "muted" ? "failed" : iconToneProp;
   const chip = chipProp ?? (failed ? { tone: "bad", text: "failed" } : cancelled ? { tone: "interrupted", text: "interrupted" } : void 0);
   const forcedDefaultOpen = useForcedDefaultOpen();
-  const [open, setOpen] = useState4(forcedDefaultOpen ?? false);
-  const hasBody = expandable && children != null;
+  const [open, setOpen] = useState4(defaultOpen ?? forcedDefaultOpen ?? false);
+  const truncation = useContext3(ToolCallTruncationContext);
+  const hasBody = expandable && (children != null || truncation != null);
   const previewVisible = preview != null && !open;
   const rowClass = cn(
     "group/disclosure flex w-full min-w-0 items-center gap-2 rounded-og-sm px-1.5 py-1.5 text-left text-og-base",
@@ -2141,7 +2188,7 @@ function ActivityDisclosure({
       }
     ),
     previewVisible && !media ? /* @__PURE__ */ jsx7("span", { className: "min-w-0 flex-1 truncate text-og-sm text-og-fg-subtle", children: preview }) : /* @__PURE__ */ jsx7("span", { className: "flex-1" }),
-    media ? /* @__PURE__ */ jsx7("span", { className: "ml-auto flex shrink-0 items-center gap-2 pl-2", children: media }) : chip && !open ? /* @__PURE__ */ jsx7("span", { className: "ml-auto shrink-0 pl-2", children: /* @__PURE__ */ jsx7(Chip, { chip }) }) : null
+    media && !open ? /* @__PURE__ */ jsx7("span", { className: "ml-auto flex shrink-0 items-center gap-2 pl-2", children: media }) : chip && !open ? /* @__PURE__ */ jsx7("span", { className: "ml-auto shrink-0 pl-2", children: /* @__PURE__ */ jsx7(Chip, { chip }) }) : null
   ] });
   const dataStatus = cancelled ? "cancelled" : failed ? "failed" : void 0;
   if (!hasBody) {
@@ -2171,7 +2218,22 @@ function ActivityDisclosure({
         children: inner
       }
     ),
-    open ? /* @__PURE__ */ jsx7("div", { className: "mb-2 ml-7 mt-1.5 flex flex-col gap-2 overflow-hidden animate-og-expand", children }) : null
+    open ? /* @__PURE__ */ jsxs5("div", { className: "mb-2 ml-7 mt-1.5 flex flex-col gap-2 overflow-hidden animate-og-expand", children: [
+      children,
+      truncation ? /* @__PURE__ */ jsx7(ToolCallTruncationNotice, { truncation }) : null
+    ] }) : null
+  ] });
+}
+function ToolCallTruncationNotice({ truncation }) {
+  const fullEvidence = truncation.fullEvidence.available ? "retained" : truncation.fullEvidence.reason ?? "unavailable";
+  return /* @__PURE__ */ jsxs5("div", { "data-og-tool-output-truncation": "", className: "text-og-sm leading-5 text-og-fg-subtle", children: [
+    "Output bounded at ",
+    /* @__PURE__ */ jsx7("code", { className: "font-og-mono", children: truncation.surface }),
+    truncation.omittedBytes != null && truncation.omittedBytes > 0 ? ` \xB7 ${truncation.omittedBytes.toLocaleString()} bytes omitted` : null,
+    " \xB7 reason ",
+    /* @__PURE__ */ jsx7("code", { className: "font-og-mono", children: truncation.reason }),
+    " \xB7 full evidence ",
+    /* @__PURE__ */ jsx7("code", { className: "font-og-mono", children: fullEvidence })
   ] });
 }
 function Chip({ chip }) {
@@ -2300,7 +2362,9 @@ function MediaEmpty() {
 function Thumbnail({
   src,
   caption,
-  alt = "screenshot"
+  alt = "screenshot",
+  expandLabel = "Expand screenshot",
+  lightboxLabel = "Screenshot"
 }) {
   const lightbox = useLightboxOptional();
   const [failed, setFailed] = useState4(false);
@@ -2325,7 +2389,7 @@ 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 === " ") {
@@ -2337,7 +2401,7 @@ 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,
       children: img
     }
   );
@@ -2345,7 +2409,9 @@ function Thumbnail({
 function ScreenshotFigure({
   src,
   caption,
-  alt = "screenshot"
+  alt = "screenshot",
+  expandLabel = "Expand screenshot",
+  lightboxLabel = "Screenshot"
 }) {
   const lightbox = useLightboxOptional();
   const [failed, setFailed] = useState4(false);
@@ -2364,9 +2430,9 @@ function ScreenshotFigure({
       "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,
         children: img
       }
     ) : /* @__PURE__ */ jsx7("div", { className: surface, children: img }),
@@ -2554,16 +2620,17 @@ import {
   Share2Icon,
   TargetIcon,
   TerminalIcon,
+  VideoIcon,
   WrenchIcon
 } from "lucide-react";
-import { useEffect as useEffect6, useState as useState8 } from "react";
+import { useEffect as useEffect6, useRef as useRef4, useState as useState8 } from "react";
 
 // src/timeline/compute-label.tsx
-import { createContext as createContext3, useContext as useContext3 } from "react";
-var TimelineComputeLabelContext = createContext3(null);
+import { createContext as createContext4, useContext as useContext4 } from "react";
+var TimelineComputeLabelContext = createContext4(null);
 var TimelineComputeLabelProvider = TimelineComputeLabelContext.Provider;
 function useTimelineComputeLabel() {
-  return useContext3(TimelineComputeLabelContext);
+  return useContext4(TimelineComputeLabelContext);
 }
 
 // src/timeline/tool-diff.tsx
@@ -3091,12 +3158,15 @@ function ComputerCallRenderer({ item, loadRetainedScreenshot }) {
       );
     }
     return /* @__PURE__ */ jsx10(
-      RetainedScreenshotDisclosure,
+      RetainedSessionImageDisclosure,
       {
         artifact: retained,
         load: loadRetainedScreenshot,
-        verb,
-        countSuffix,
+        title: `${verb}${countSuffix}`,
+        caption: `${verb}${countSuffix}`,
+        noun: "screenshot",
+        icon: /* @__PURE__ */ jsx10(CameraIcon2, { className: ICON_SIZE }),
+        lightboxLabel: "Screenshot",
         batched,
         failed: isFailed,
         cancelled: isCancelled
@@ -3177,16 +3247,14 @@ function ComputerCallRenderer({ item, loadRetainedScreenshot }) {
     }
   );
 }
-function RetainedScreenshotDisclosure({
-  artifact,
-  load,
-  verb,
-  countSuffix,
-  batched,
-  failed,
-  cancelled
-}) {
+function useRetainedImageObjectUrl(artifact, load) {
   const [state, setState] = useState8({ kind: "loading" });
+  const artifactValue = retainedArtifactValue(artifact);
+  const stableArtifactRef = useRef4({ value: artifactValue, artifact });
+  if (stableArtifactRef.current.value !== artifactValue) {
+    stableArtifactRef.current = { value: artifactValue, artifact };
+  }
+  const stableArtifact = stableArtifactRef.current.artifact;
   useEffect6(() => {
     if (!load) {
       setState({ kind: "unavailable", label: "retrieval is not configured" });
@@ -3195,47 +3263,110 @@ function RetainedScreenshotDisclosure({
     const controller = new AbortController();
     let objectUrl = 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], { type: stableArtifact.contentType })
+      );
       setState({ kind: "ready", url: objectUrl });
     }).catch((error) => {
       if (controller.signal.aborted) return;
       const status = error && typeof error === "object" && "status" in error ? Number(error.status) : null;
       setState(
-        status === 404 ? { kind: "unavailable", label: "deleted" } : status === 410 ? { kind: "unavailable", label: "expired or unavailable" } : {
-          kind: "error",
-          message: "retrieval failed"
-        }
+        status === 404 ? { kind: "unavailable", label: "deleted" } : status === 410 ? { kind: "unavailable", label: "expired or unavailable" } : { kind: "error", message: "retrieval failed" }
       );
     });
     return () => {
       controller.abort();
       if (objectUrl) URL.revokeObjectURL(objectUrl);
     };
-  }, [artifact, load]);
-  const caption = `${verb}${countSuffix}`;
+  }, [stableArtifact, load]);
+  return state;
+}
+function retainedArtifactValue(artifact) {
+  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
+}) {
+  const state = useRetainedImageObjectUrl(artifact, load);
   return /* @__PURE__ */ jsxs7(
     ActivityDisclosure,
     {
-      icon: /* @__PURE__ */ jsx10(CameraIcon2, { className: ICON_SIZE }),
+      icon,
       iconTone: failed ? "failed" : state.kind === "ready" ? "accent" : "muted",
-      title: caption,
+      title,
       failed,
       cancelled,
-      preview: state.kind === "loading" ? "loading retained screenshot\u2026" : state.kind === "error" ? "screenshot retrieval failed" : state.kind === "unavailable" ? `screenshot ${state.label}` : void 0,
-      media: state.kind === "ready" ? /* @__PURE__ */ jsx10(Thumbnail, { src: state.url, caption }) : state.kind === "loading" ? /* @__PURE__ */ jsx10(MediaSkeleton, {}) : /* @__PURE__ */ jsx10(MediaEmpty, {}),
+      preview: state.kind === "loading" ? `loading retained ${noun}\u2026` : state.kind === "error" ? `${noun} retrieval failed` : state.kind === "unavailable" ? `${noun} ${state.label}` : void 0,
+      media: state.kind === "ready" ? /* @__PURE__ */ jsx10(
+        Thumbnail,
+        {
+          src: state.url,
+          caption,
+          alt: caption,
+          expandLabel: `Expand ${noun}`,
+          lightboxLabel
+        }
+      ) : state.kind === "loading" ? /* @__PURE__ */ jsx10(MediaSkeleton, {}) : /* @__PURE__ */ jsx10(MediaEmpty, {}),
       children: [
-        state.kind === "ready" ? /* @__PURE__ */ jsx10(ScreenshotFigure, { src: state.url, caption }) : state.kind === "loading" ? /* @__PURE__ */ jsx10(BodyNote, { children: "Loading the retained screenshot\u2026" }) : state.kind === "unavailable" ? /* @__PURE__ */ jsxs7(BodyNote, { children: [
-          "Screenshot ",
+        state.kind === "ready" ? /* @__PURE__ */ jsx10(
+          ScreenshotFigure,
+          {
+            src: state.url,
+            caption,
+            alt: caption,
+            expandLabel: `Expand ${noun}`,
+            lightboxLabel
+          }
+        ) : state.kind === "loading" ? /* @__PURE__ */ jsxs7(BodyNote, { children: [
+          "Loading the retained ",
+          noun,
+          "\u2026"
+        ] }) : state.kind === "unavailable" ? /* @__PURE__ */ jsxs7(BodyNote, { children: [
+          noun === "screenshot" ? "Screenshot" : "Image",
+          " ",
           state.label,
           "."
         ] }) : /* @__PURE__ */ jsxs7(BodyNote, { tone: "error", children: [
-          "Screenshot retrieval failed: ",
+          noun === "screenshot" ? "Screenshot" : "Image",
+          " retrieval failed: ",
           state.message
         ] }),
         batched ? /* @__PURE__ */ jsxs7(BodyNote, { children: [
@@ -3246,6 +3377,119 @@ function RetainedScreenshotDisclosure({
     }
   );
 }
+function GeneratedImageRenderer({ item, loadRetainedArtifact }) {
+  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 : null;
+  const receipt = generatedImageReceipt(item.output) ?? generatedImageReceipt(raw?.output);
+  if (item.status === "running") {
+    return /* @__PURE__ */ jsx10(
+      ActivityDisclosure,
+      {
+        icon: /* @__PURE__ */ jsx10(ImageIcon, { className: ICON_SIZE }),
+        iconTone: "running",
+        title: "Generating image",
+        running: true,
+        preview: /* @__PURE__ */ jsx10(RunningPreview, { children: truncatePreview(prompt, 72) || "creating\u2026" }),
+        media: /* @__PURE__ */ jsx10(MediaSkeleton, {}),
+        children: prompt ? /* @__PURE__ */ jsx10(BodyNote, { children: prompt }) : null
+      }
+    );
+  }
+  if (!receipt) return /* @__PURE__ */ jsx10(GenericRenderer, { item });
+  return /* @__PURE__ */ jsx10(
+    GeneratedImageDisclosure,
+    {
+      receipt,
+      load: loadRetainedArtifact,
+      prompt,
+      failed: item.status === "failed",
+      cancelled: item.status === "cancelled"
+    }
+  );
+}
+function GeneratedVideoRenderer({ item }) {
+  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.status === "accepted";
+  const failed = item.status === "failed";
+  const cancelled = item.status === "cancelled";
+  const running = item.status === "running";
+  return /* @__PURE__ */ jsxs7(
+    ActivityDisclosure,
+    {
+      icon: /* @__PURE__ */ jsx10(VideoIcon, { className: ICON_SIZE }),
+      iconTone: failed ? "failed" : running ? "running" : accepted ? "accent" : "muted",
+      title: running ? "Starting video generation" : accepted ? "Generating video" : "Generate video",
+      running,
+      failed,
+      cancelled,
+      preview: truncatePreview(prompt, 88) || (accepted ? "request accepted" : void 0),
+      children: [
+        prompt ? /* @__PURE__ */ jsx10(BodyNote, { children: prompt }) : null,
+        accepted ? /* @__PURE__ */ jsx10(BodyNote, { children: "The video will appear here when it is ready." }) : item.output !== void 0 ? /* @__PURE__ */ jsx10(PayloadBlock, { label: "Output", value: item.output }) : null
+      ]
+    }
+  );
+}
+function GeneratedImageDisclosure({
+  receipt,
+  load,
+  prompt,
+  failed,
+  cancelled
+}) {
+  const state = useRetainedImageObjectUrl(receipt.artifact, load);
+  const dimensions = receipt.artifact.dimensions;
+  const title = failed ? "Image generation failed" : "Generated image";
+  const caption = prompt || `Generated image \xB7 ${dimensions.width}\xD7${dimensions.height}`;
+  return /* @__PURE__ */ jsxs7(
+    ActivityDisclosure,
+    {
+      icon: /* @__PURE__ */ jsx10(ImageIcon, { className: ICON_SIZE }),
+      iconTone: failed ? "failed" : state.kind === "ready" ? "accent" : "muted",
+      title,
+      defaultOpen: !failed && !cancelled,
+      failed,
+      cancelled,
+      preview: state.kind === "loading" ? "loading image\u2026" : state.kind === "error" ? "image retrieval failed" : state.kind === "unavailable" ? `image ${state.label}` : truncatePreview(prompt, 88) || `${dimensions.width}\xD7${dimensions.height}`,
+      media: state.kind === "ready" ? /* @__PURE__ */ jsx10(
+        Thumbnail,
+        {
+          src: state.url,
+          caption,
+          alt: caption,
+          expandLabel: "Expand generated image",
+          lightboxLabel: "Generated image"
+        }
+      ) : state.kind === "loading" ? /* @__PURE__ */ jsx10(MediaSkeleton, {}) : /* @__PURE__ */ jsx10(MediaEmpty, {}),
+      children: [
+        state.kind === "ready" ? /* @__PURE__ */ jsx10(
+          ScreenshotFigure,
+          {
+            src: state.url,
+            caption,
+            alt: caption,
+            expandLabel: "Expand generated image",
+            lightboxLabel: "Generated image"
+          }
+        ) : state.kind === "loading" ? /* @__PURE__ */ jsx10(BodyNote, { children: "Loading the generated image\u2026" }) : state.kind === "unavailable" ? /* @__PURE__ */ jsxs7(BodyNote, { children: [
+          "Image ",
+          state.label,
+          "."
+        ] }) : /* @__PURE__ */ jsx10(BodyNote, { tone: "error", children: "Image retrieval failed." }),
+        /* @__PURE__ */ jsxs7(BodyNote, { children: [
+          dimensions.width,
+          "\xD7",
+          dimensions.height,
+          " \xB7 ",
+          receipt.sandboxPath
+        ] })
+      ]
+    }
+  );
+}
 function webSearchQueryFromArguments(args) {
   if (typeof args === "string") {
     const trimmed = args.trim();
@@ -3344,11 +3588,12 @@ var VIEW_IMAGE_ERRORS = [
   "is not a supported image",
   "unable to read image"
 ];
-function ViewImageRenderer({ item }) {
+function ViewImageRenderer({ item, loadRetainedScreenshot }) {
   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") {
     return /* @__PURE__ */ jsx10(
@@ -3366,6 +3611,46 @@ function ViewImageRenderer({ item }) {
   }
   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 /* @__PURE__ */ jsx10(
+        ActivityDisclosure,
+        {
+          icon: /* @__PURE__ */ jsx10(ImageIcon, { className: ICON_SIZE }),
+          iconTone: viewFailed ? "failed" : "muted",
+          title: `${title} \xB7 ${state}`,
+          failed: viewFailed,
+          cancelled: viewCancelled,
+          preview: `image ${state}`,
+          media: /* @__PURE__ */ jsx10(MediaEmpty, {}),
+          children: /* @__PURE__ */ jsxs7(BodyNote, { tone: viewFailed ? "error" : void 0, children: [
+            "Image ",
+            state,
+            ": ",
+            retained.reason.replaceAll("_", " "),
+            "."
+          ] })
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx10(
+      RetainedSessionImageDisclosure,
+      {
+        artifact: retained,
+        load: loadRetainedScreenshot,
+        title,
+        caption: path || title,
+        noun: "image",
+        icon: /* @__PURE__ */ jsx10(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");
@@ -4063,7 +4348,6 @@ var BASE_ENTRIES = [
   // 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 },
@@ -4083,6 +4367,9 @@ var BASE_ENTRIES = [
   { 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 },
@@ -4098,57 +4385,9 @@ function createDefaultToolRegistry(options = {}) {
   return createToolRegistry(BASE_ENTRIES, GenericRenderer, options);
 }
 
-// src/lib/clipboard.ts
-async function copyTextToClipboard(text) {
-  const value = text.replace(/\u00a0/g, " ");
-  if (value.length === 0) {
-    return false;
-  }
-  try {
-    if (typeof navigator !== "undefined" && navigator.clipboard?.writeText) {
-      await navigator.clipboard.writeText(value);
-      return true;
-    }
-  } catch {
-  }
-  if (typeof document === "undefined") {
-    return false;
-  }
-  try {
-    const area = document.createElement("textarea");
-    area.value = value;
-    area.setAttribute("readonly", "");
-    area.style.position = "fixed";
-    area.style.left = "-9999px";
-    area.style.top = "0";
-    document.body.appendChild(area);
-    area.select();
-    const ok = document.execCommand("copy");
-    document.body.removeChild(area);
-    return ok;
-  } catch {
-    return false;
-  }
-}
-function tableElementToTsv(table) {
-  if (!table) {
-    return "";
-  }
-  const rows = Array.from(table.querySelectorAll("tr"));
-  return rows.map(
-    (row) => Array.from(row.querySelectorAll("th,td")).map((cell) => {
-      const raw = (cell.textContent ?? "").replace(/\s+/g, " ").trim();
-      if (/[\t\n"]/.test(raw)) {
-        return `"${raw.replace(/"/g, '""')}"`;
-      }
-      return raw;
-    }).join("	")
-  ).filter((line) => line.length > 0).join("\n");
-}
-
 // src/components/copy-button.tsx
 import { CheckIcon, CopyIcon } from "lucide-react";
-import { useEffect as useEffect7, useRef as useRef4, useState as useState9 } from "react";
+import { useEffect as useEffect7, useRef as useRef5, useState as useState9 } from "react";
 import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
 var COPIED_MS = 1600;
 function CopyButton({
@@ -4159,7 +4398,7 @@ function CopyButton({
 }) {
   const [copied, setCopied] = useState9(false);
   const [tipOpen, setTipOpen] = useState9(false);
-  const timerRef = useRef4(null);
+  const timerRef = useRef5(null);
   useEffect7(() => {
     return () => {
       if (timerRef.current !== null) {
@@ -4263,7 +4502,7 @@ import {
   memo,
   useEffect as useEffect8,
   useReducer,
-  useRef as useRef5,
+  useRef as useRef6,
   useState as useState10
 } from "react";
 import ReactMarkdown from "react-markdown";
@@ -4724,7 +4963,7 @@ function MarkdownCodeBlock({ children }) {
   ] });
 }
 function MarkdownTable({ children, className, ...props }) {
-  const tableRef = useRef5(null);
+  const tableRef = useRef6(null);
   return /* @__PURE__ */ jsxs9("div", { className: "group/copy relative mt-3 max-w-full first:mt-0", children: [
     /* @__PURE__ */ jsx12("div", { className: "pointer-events-none absolute top-0 right-0 z-10", children: /* @__PURE__ */ jsx12("div", { className: "pointer-events-auto", children: /* @__PURE__ */ jsx12(
       CopyButton,
@@ -4746,11 +4985,11 @@ function MarkdownTable({ children, className, ...props }) {
   ] });
 }
 function MarkdownImpl({ children, className, streaming = false }) {
-  const revealRef = useRef5(null);
-  const bodyRef = useRef5(null);
+  const revealRef = useRef6(null);
+  const bodyRef = useRef6(null);
   const [, bump] = useReducer((n) => n + 1, 0);
   const [settling, setSettling] = useState10(false);
-  const hadRevealRef = useRef5(false);
+  const hadRevealRef = useRef6(false);
   const now = typeof performance !== "undefined" ? performance.now() : Date.now();
   const crystallize = (mutate) => {
     mutate();
@@ -4796,7 +5035,7 @@ function MarkdownImpl({ children, className, streaming = false }) {
       }
     };
   }, [streaming]);
-  const wasStreamingRef = useRef5(streaming);
+  const wasStreamingRef = useRef6(streaming);
   useEffect8(() => {
     const ended = wasStreamingRef.current && !streaming;
     wasStreamingRef.current = streaming;
@@ -4839,28 +5078,28 @@ import {
   BrainIcon,
   SquareTerminalIcon
 } from "lucide-react";
-import { lazy as lazy3, Suspense as Suspense3, useLayoutEffect as useLayoutEffect2, useRef as useRef7 } from "react";
+import { lazy as lazy3, Suspense as Suspense3, useLayoutEffect as useLayoutEffect2, useRef as useRef8 } from "react";
 import { jsx as rowJsx, jsxs as rowJsxs } from "react/jsx-runtime";
 
 // src/timeline/entrance.tsx
-import { createContext as createContext4, useContext as useContext4, useRef as useRef6 } from "react";
-var EntranceAnimationContext = createContext4(true);
+import { createContext as createContext5, useContext as useContext5, useRef as useRef7 } from "react";
+var EntranceAnimationContext = createContext5(true);
 var EntranceAnimationProvider = EntranceAnimationContext.Provider;
 function useEntranceAnimationLive() {
-  return useContext4(EntranceAnimationContext);
+  return useContext5(EntranceAnimationContext);
 }
 function useEntranceAnimation() {
-  const enabled = useContext4(EntranceAnimationContext);
-  const captured = useRef6(enabled);
+  const enabled = useContext5(EntranceAnimationContext);
+  const captured = useRef7(enabled);
   return captured.current;
 }
 
 // src/timeline/seen-activity-ids.ts
-import { createContext as createContext5, useContext as useContext5 } from "react";
-var SeenActivityIdsContext = createContext5(null);
+import { createContext as createContext6, useContext as useContext6 } from "react";
+var SeenActivityIdsContext = createContext6(null);
 var SeenActivityIdsProvider = SeenActivityIdsContext.Provider;
 function useSeenActivityIds() {
-  return useContext5(SeenActivityIdsContext);
+  return useContext6(SeenActivityIdsContext);
 }
 
 // src/timeline/activity-rail.tsx
@@ -4878,6 +5117,7 @@ function ActivityRail({
   onOpenSession,
   onMemoryClick,
   loadRetainedScreenshot,
+  loadRetainedArtifact,
   bare,
   className
 }) {
@@ -4885,7 +5125,7 @@ function ActivityRail({
   const enterLive = useEntranceAnimationLive();
   const seenIds = useSeenActivityIds();
   const enter = seenIds ? enterLive : enterMounted;
-  const previousIdsRef = useRef7(null);
+  const previousIdsRef = useRef8(null);
   const enteringIds = /* @__PURE__ */ new Set();
   if (enter) {
     for (const item of items) {
@@ -4927,12 +5167,14 @@ function ActivityRail({
           toolRegistry,
           onOpenSession,
           onMemoryClick,
-          loadRetainedScreenshot
+          loadRetainedScreenshot,
+          loadRetainedArtifact
         );
         return /* @__PURE__ */ jsx13(
           "div",
           {
             "data-og-timeline-row-anchor": "",
+            "data-og-annotation-source-key": item.kind === "tool-call" ? item.annotationSource?.eventId : void 0,
             className: cn(newFamily && "mt-3", enteringIds.has(item.id) && "animate-og-row-enter"),
             children: row
           },
@@ -4945,13 +5187,20 @@ function ActivityRail({
 function assertNever(item) {
   throw new Error(`ActivityRail: unhandled activity item ${JSON.stringify(item)}`);
 }
-function renderActivity(item, toolRegistry, onOpenSession, onMemoryClick, loadRetainedScreenshot) {
+function renderActivity(item, toolRegistry, onOpenSession, onMemoryClick, loadRetainedScreenshot, loadRetainedArtifact) {
   switch (item.kind) {
     case "reasoning":
       return /* @__PURE__ */ jsx13(ReasoningRow, { item });
     case "tool-call": {
       const Renderer = toolRegistry.resolve(item);
-      return /* @__PURE__ */ jsx13(Renderer, { item, loadRetainedScreenshot });
+      return /* @__PURE__ */ jsx13(ToolCallTruncationProvider, { value: item.truncation ?? null, children: /* @__PURE__ */ jsx13(
+        Renderer,
+        {
+          item,
+          loadRetainedScreenshot,
+          loadRetainedArtifact
+        }
+      ) });
     }
     case "worker":
       return /* @__PURE__ */ jsx13(WorkerRow, { item, onOpenSession });
@@ -5140,21 +5389,21 @@ function WorkerRow({
 import { ChevronRightIcon as ChevronRightIcon2, CircleSlashIcon, TriangleAlertIcon as TriangleAlertIcon2 } from "lucide-react";
 import {
   Component,
-  createContext as createContext7,
-  useContext as useContext7,
+  createContext as createContext8,
+  useContext as useContext8,
   useEffect as useEffect9,
   useMemo as useMemo4,
-  useRef as useRef8,
+  useRef as useRef9,
   useState as useState11
 } from "react";
 import { Collapsible } from "radix-ui";
 
 // src/timeline/fold-memory.ts
-import { createContext as createContext6, useContext as useContext6 } from "react";
-var FoldMemoryContext = createContext6(null);
+import { createContext as createContext7, useContext as useContext7 } from "react";
+var FoldMemoryContext = createContext7(null);
 var FoldMemoryProvider = FoldMemoryContext.Provider;
 function useFoldMemory() {
-  return useContext6(FoldMemoryContext);
+  return useContext7(FoldMemoryContext);
 }
 function inheritFoldRestingState(memory, targetKey, sourceKeys) {
   if (memory.has(targetKey) || sourceKeys.length !== 1) {
@@ -5168,9 +5417,9 @@ function inheritFoldRestingState(memory, targetKey, sourceKeys) {
 
 // src/timeline/turn-summary.tsx
 import { Fragment as Fragment6, jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
-var TurnSettleChromeContext = createContext7(false);
+var TurnSettleChromeContext = createContext8(false);
 function useTurnSettleOpen() {
-  return useContext7(TurnSettleChromeContext);
+  return useContext8(TurnSettleChromeContext);
 }
 var BUILT_IN_TURN_SUMMARY_FACET_IDS = [
   "steps",
@@ -5208,11 +5457,11 @@ function TurnSummary({
   const [settlePhase, setSettlePhase] = useState11(initialSettle);
   const [nestSuppressLatch, setNestSuppressLatch] = useState11(initialSettle);
   const [expandReady, setExpandReady] = useState11(!initialSettle);
-  const settleTimerRef = useRef8(null);
-  const settleCloseDoneRef = useRef8(null);
-  const nestLatchClearRef = useRef8(null);
-  const settleFoldSeenRef = useRef8(Boolean(settleFold));
-  const settleArmedRef = useRef8(false);
+  const settleTimerRef = useRef9(null);
+  const settleCloseDoneRef = useRef9(null);
+  const nestLatchClearRef = useRef9(null);
+  const settleFoldSeenRef = useRef9(Boolean(settleFold));
+  const settleArmedRef = useRef9(false);
   const clearNestLatchTimer = () => {
     if (nestLatchClearRef.current !== null) {
       clearTimeout(nestLatchClearRef.current);
@@ -5260,7 +5509,7 @@ function TurnSummary({
       }, SETTLE_COLLAPSE_MS);
     }, SETTLE_FOLD_BEAT_MS);
   };
-  const mountSettleRef = useRef8(initialSettle);
+  const mountSettleRef = useRef9(initialSettle);
   useEffect9(() => {
     if (mountSettleRef.current) {
       armSettleCollapse();
@@ -5597,12 +5846,12 @@ function formatDurationFacet(durationMs) {
 
 // src/components/user-message-body.tsx
 import {
-  createContext as createContext8,
+  createContext as createContext9,
   useCallback as useCallback2,
-  useContext as useContext8,
+  useContext as useContext9,
   useId as useId3,
   useLayoutEffect as useLayoutEffect3,
-  useRef as useRef9,
+  useRef as useRef10,
   useState as useState12
 } from "react";
 import { jsx as jsx15, jsxs as jsxs12 } from "react/jsx-runtime";
@@ -5685,7 +5934,7 @@ function collectInteractionBoundaries(root) {
 function isFullyInsideVisiblePreview(rect, clipRect) {
   return rect.width > 0 && rect.height > 0 && rect.top >= clipRect.top - 1 && rect.bottom <= clipRect.bottom + 1 && rect.left >= clipRect.left - 1 && rect.right <= clipRect.right + 1;
 }
-var UserMessageDisclosureContext = createContext8(null);
+var UserMessageDisclosureContext = createContext9(null);
 function UserMessageDisclosureProvider({
   value,
   children
@@ -5697,17 +5946,17 @@ function userMessageLikelyNeedsDisclosure(text) {
   return lines.length > FALLBACK_LINE_THRESHOLD || text.length > FALLBACK_TEXT_THRESHOLD || lines.some((line) => line.length > FALLBACK_UNBROKEN_THRESHOLD);
 }
 function UserMessageBody({ messageId, text, children, className }) {
-  const disclosure = useContext8(UserMessageDisclosureContext);
+  const disclosure = useContext9(UserMessageDisclosureContext);
   const [expanded, setExpanded] = useState12(
     () => disclosure?.expandedByMessageId.get(messageId) ?? false
   );
   const [collapsible, setCollapsible] = useState12(() => userMessageLikelyNeedsDisclosure(text));
-  const rootRef = useRef9(null);
-  const clipRef = useRef9(null);
-  const contentRef = useRef9(null);
-  const thresholdRef = useRef9(null);
-  const pendingRestoreRef = useRef9(null);
-  const managedInertDescendantsRef = useRef9(/* @__PURE__ */ new Set());
+  const rootRef = useRef10(null);
+  const clipRef = useRef10(null);
+  const contentRef = useRef10(null);
+  const thresholdRef = useRef10(null);
+  const pendingRestoreRef = useRef10(null);
+  const managedInertDescendantsRef = useRef10(/* @__PURE__ */ new Set());
   const contentId = `og-user-message-${useId3().replace(/:/g, "")}`;
   const collapsed = collapsible && !expanded;
   const restoreManagedInertDescendants = useCallback2(() => {
@@ -5866,8 +6115,82 @@ function UserMessageBody({ messageId, text, children, className }) {
   );
 }
 
+// src/components/generated-video-player.tsx
+import { useEffect as useEffect10, useState as useState13 } from "react";
+import { jsx as jsx16 } from "react/jsx-runtime";
+function GeneratedVideoPlayer({
+  receipt,
+  loadPlaybackSource,
+  className,
+  label = "Generated video"
+}) {
+  const [retry, setRetry] = useState13(0);
+  const [state, setState] = useState13({ kind: "loading" });
+  useEffect10(() => {
+    const controller = new AbortController();
+    setState({ kind: "loading" });
+    void loadPlaybackSource(receipt.artifact.artifactId, controller.signal).then(
+      (source) => {
+        if (!controller.signal.aborted) setState({ kind: "ready", source });
+      },
+      (error) => {
+        if (controller.signal.aborted) return;
+        setState({
+          kind: "error",
+          message: error instanceof Error ? error.message : "Playback is unavailable."
+        });
+      }
+    );
+    return () => controller.abort();
+  }, [loadPlaybackSource, receipt.artifact.artifactId, retry]);
+  if (state.kind === "loading") {
+    return /* @__PURE__ */ jsx16(
+      "div",
+      {
+        "aria-label": `Loading ${label.toLowerCase()}`,
+        className: cn(
+          "aspect-video w-full animate-pulse rounded-og-md bg-og-surface-2 motion-reduce:animate-none",
+          className
+        )
+      }
+    );
+  }
+  if (state.kind === "error") {
+    return /* @__PURE__ */ jsx16(
+      "div",
+      {
+        role: "status",
+        className: cn(
+          "rounded-og-md border border-og-status-failed/30 bg-og-status-failed/5 px-3 py-2 text-og-sm text-og-status-failed",
+          className
+        ),
+        children: state.message
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx16(
+    "video",
+    {
+      "aria-label": label,
+      className: cn(
+        "max-h-[32rem] w-full rounded-og-md bg-black object-contain shadow-sm",
+        className
+      ),
+      controls: true,
+      playsInline: true,
+      preload: "metadata",
+      src: state.source.url,
+      onError: () => {
+        if (retry === 0) setRetry(1);
+        else setState({ kind: "error", message: "Video playback failed." });
+      }
+    },
+    state.source.url
+  );
+}
+
 // src/components/session-status.tsx
-import { jsx as jsx16, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs13 } from "react/jsx-runtime";
 var SESSION_STATUS_META = {
   queued: {
     label: "Queued",
@@ -5931,7 +6254,7 @@ function SessionStatus({ status, label, size = "md", className }) {
         className
       ),
       children: [
-        /* @__PURE__ */ jsx16(StatusDot, { status, className: size === "sm" ? "size-1" : "size-1.5" }),
+        /* @__PURE__ */ jsx17(StatusDot, { status, className: size === "sm" ? "size-1" : "size-1.5" }),
         label ?? meta.label
       ]
     }
@@ -5939,7 +6262,7 @@ function SessionStatus({ status, label, size = "md", className }) {
 }
 function StatusDot({ status, className }) {
   const meta = SESSION_STATUS_META[status];
-  return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx17(
     "span",
     {
       className: cn(
@@ -5947,7 +6270,7 @@ function StatusDot({ status, className }) {
         meta.dotClassName,
         className
       ),
-      children: meta.pulse ? /* @__PURE__ */ jsx16("span", { className: cn("absolute inset-0 animate-og-pulse rounded-full", meta.dotClassName) }) : null
+      children: meta.pulse ? /* @__PURE__ */ jsx17("span", { className: cn("absolute inset-0 animate-og-pulse rounded-full", meta.dotClassName) }) : null
     }
   );
 }
@@ -5976,13 +6299,15 @@ import { AnimatePresence as AnimatePresence3, motion as motion3 } from "motion/r
 import { Collapsible as Collapsible2 } from "radix-ui";
 import {
   Component as Component2,
+  Suspense as Suspense4,
+  lazy as lazy4,
   memo as memo2,
   useCallback as useCallback3,
-  useEffect as useEffect10,
+  useEffect as useEffect11,
   useLayoutEffect as useLayoutEffect4,
   useMemo as useMemo5,
-  useRef as useRef10,
-  useState as useState13
+  useRef as useRef11,
+  useState as useState14
 } from "react";
 
 // src/components/tip-follow.ts
@@ -6258,7 +6583,8 @@ var MACHINE_INPUT_META = {
   goal_continuation: "Goal continued",
   agent_message: "Agent update",
   agent_steer_instruction: "Agent direction",
-  child_terminal_result: "Agent finished"
+  child_terminal_result: "Agent finished",
+  media_generation_result: "Video update"
 };
 function machineInputBatchLabel(members) {
   if (members.length === 0) return "Updates";
@@ -6280,6 +6606,8 @@ function machineInputBatchLabel(members) {
         return n === 1 ? "Agent update" : `${n} agent updates`;
       case "agent_steer_instruction":
         return n === 1 ? "Agent direction" : `${n} agent directions`;
+      case "media_generation_result":
+        return n === 1 ? "Video ready" : `${n} video updates`;
     }
   }
   const parts = [...counts.entries()].map(([kind, count]) => {
@@ -6311,7 +6639,8 @@ function machineInputSummaryIsUseful(kind, cleanedSummary) {
 }
 
 // src/components/message-timeline.tsx
-import { Fragment as Fragment7, jsx as jsx17, jsxs as jsxs14 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx18, jsxs as jsxs14 } from "react/jsx-runtime";
+var TimelineAnnotationSelection = lazy4(() => import("./timeline-annotation-selection-3L7LHGG2.js"));
 var PIN_THRESHOLD_PX = 48;
 var OLDER_PREFETCH_MARGIN_PX = 400;
 var OLDER_PREFETCH_ROOT_MARGIN = `${OLDER_PREFETCH_MARGIN_PX}px 0px 0px 0px`;
@@ -6362,9 +6691,12 @@ function MessageTimeline({
   resolveProviderLogo,
   toolRegistry = defaultToolRegistry,
   loadRetainedScreenshot,
+  loadRetainedArtifact,
+  loadVideoArtifactPlayback,
   computeLabel = null,
   turnSummary,
   autoFollow = true,
+  onAnnotate,
   hasOlder = false,
   loadingOlder = false,
   onLoadOlder,
@@ -6386,41 +6718,50 @@ function MessageTimeline({
     return projected.filter((item) => item.kind !== "auth-needed" || shouldRenderAuthNeeded(item));
   }, [items, events, shouldRenderAuthNeeded]);
   const allGroups = useMemo5(() => groupTimeline(resolvedItems), [resolvedItems]);
+  const annotationSources = useMemo5(() => {
+    const sources = /* @__PURE__ */ new Map();
+    for (const item of resolvedItems) {
+      if ((item.kind === "user-message" || item.kind === "agent-message" || item.kind === "tool-call") && item.annotationSource) {
+        sources.set(item.annotationSource.eventId, item.annotationSource);
+      }
+    }
+    return sources;
+  }, [resolvedItems]);
   const groups = useStableTimelineGroupKeys(allGroups);
-  const scrollRef = useRef10(null);
-  const topSentinelRef = useRef10(null);
-  const bottomSentinelRef = useRef10(null);
-  const previousBulkFirstKeyRef = useRef10(void 0);
-  const [pinned, setPinned] = useState13(true);
-  const [bulkActive, setBulkActive] = useState13(true);
-  const olderPrefetchArmedRef = useRef10(false);
-  const [olderPrefetchArmed, setOlderPrefetchArmed] = useState13(false);
-  const olderLoadGateRef = useRef10("armed");
-  const resizeFollowRafRef = useRef10(null);
+  const scrollRef = useRef11(null);
+  const topSentinelRef = useRef11(null);
+  const bottomSentinelRef = useRef11(null);
+  const previousBulkFirstKeyRef = useRef11(void 0);
+  const [pinned, setPinned] = useState14(true);
+  const [bulkActive, setBulkActive] = useState14(true);
+  const olderPrefetchArmedRef = useRef11(false);
+  const [olderPrefetchArmed, setOlderPrefetchArmed] = useState14(false);
+  const olderLoadGateRef = useRef11("armed");
+  const resizeFollowRafRef = useRef11(null);
   const firstGroupKey = allGroups[0] ? timelineGroupKey(allGroups[0]) : null;
-  const [revealed, setRevealed] = useState13(false);
-  const pinnedRef = useRef10(true);
-  const hasNewerRef = useRef10(hasNewer);
+  const [revealed, setRevealed] = useState14(false);
+  const pinnedRef = useRef11(true);
+  const hasNewerRef = useRef11(hasNewer);
   hasNewerRef.current = hasNewer;
-  const wantPinRef = useRef10(false);
-  const pendingJumpToStartRef = useRef10(false);
-  const jumpToStartSeqRef = useRef10(0);
-  const previousFirstItemIdRef = useRef10(null);
-  const previousScrollHeightRef = useRef10(0);
-  const lastScrollTopRef = useRef10(0);
-  const lastMaxScrollRef = useRef10(0);
-  const lastScrollHeightRef = useRef10(0);
-  const lastClientHeightRef = useRef10(0);
-  const readerIntentArmRef = useRef10(false);
-  const programmaticScrollRef = useRef10(0);
-  const disclosureKeepsUnpinnedRef = useRef10(false);
-  const pendingReaderLeaveRef = useRef10(false);
-  const leaveFallbackRafRef = useRef10(null);
-  const foldMemoryRef = useRef10(/* @__PURE__ */ new Map());
-  const userMessageDisclosureMemoryRef = useRef10(/* @__PURE__ */ new Map());
-  const seenActivityIdsRef = useRef10(/* @__PURE__ */ new Set());
-  const groupKeyByItemIdRef = useRef10(/* @__PURE__ */ new Map());
-  const groupOffsetByKeyRef = useRef10(/* @__PURE__ */ new Map());
+  const wantPinRef = useRef11(false);
+  const pendingJumpToStartRef = useRef11(false);
+  const jumpToStartSeqRef = useRef11(0);
+  const previousFirstItemIdRef = useRef11(null);
+  const previousScrollHeightRef = useRef11(0);
+  const lastScrollTopRef = useRef11(0);
+  const lastMaxScrollRef = useRef11(0);
+  const lastScrollHeightRef = useRef11(0);
+  const lastClientHeightRef = useRef11(0);
+  const readerIntentArmRef = useRef11(false);
+  const programmaticScrollRef = useRef11(0);
+  const disclosureKeepsUnpinnedRef = useRef11(false);
+  const pendingReaderLeaveRef = useRef11(false);
+  const leaveFallbackRafRef = useRef11(null);
+  const foldMemoryRef = useRef11(/* @__PURE__ */ new Map());
+  const userMessageDisclosureMemoryRef = useRef11(/* @__PURE__ */ new Map());
+  const seenActivityIdsRef = useRef11(/* @__PURE__ */ new Set());
+  const groupKeyByItemIdRef = useRef11(/* @__PURE__ */ new Map());
+  const groupOffsetByKeyRef = useRef11(/* @__PURE__ */ new Map());
   const firstItemId = resolvedItems[0]?.id ?? null;
   const firstKeyChangedForBulk = previousBulkFirstKeyRef.current !== void 0 && previousBulkFirstKeyRef.current !== firstGroupKey;
   const bulkRender = allGroups.length > 0 && (bulkActive || firstKeyChangedForBulk);
@@ -6430,10 +6771,10 @@ function MessageTimeline({
       setPinned(value);
     }
   }, []);
-  const revealedRef = useRef10(revealed);
+  const revealedRef = useRef11(revealed);
   revealedRef.current = revealed;
-  const followRef = useRef10(createTipFollowState());
-  const followFrameRef = useRef10(null);
+  const followRef = useRef11(createTipFollowState());
+  const followFrameRef = useRef11(null);
   const syncScrollBaseline = useCallback3((node) => {
     lastScrollTopRef.current = node.scrollTop;
     lastMaxScrollRef.current = maxScrollOf(node);
@@ -6620,7 +6961,7 @@ function MessageTimeline({
     }),
     [beginUserMessageDisclosureChange]
   );
-  const driveFollowRef = useRef10(() => void 0);
+  const driveFollowRef = useRef11(() => void 0);
   const driveFollow = useCallback3(
     (node, nowMs) => {
       if (!pinnedRef.current || hasNewerRef.current) {
@@ -6709,8 +7050,8 @@ function MessageTimeline({
     [cancelLeaveFallback, stopFollow, syncScrollBaseline, writeScrollTop]
   );
   driveFollowRef.current = driveFollow;
-  useEffect10(() => stopFollow, [stopFollow]);
-  useEffect10(() => () => cancelLeaveFallback(), [cancelLeaveFallback]);
+  useEffect11(() => stopFollow, [stopFollow]);
+  useEffect11(() => () => cancelLeaveFallback(), [cancelLeaveFallback]);
   useLayoutEffect4(() => {
     const node = scrollRef.current;
     if (!node) {
@@ -6863,7 +7204,7 @@ function MessageTimeline({
     const frame = requestFrame(() => setBulkActive(false));
     return () => cancelFrame(frame);
   }, [bulkRender, firstGroupKey]);
-  useEffect10(() => {
+  useEffect11(() => {
     const root = scrollRef.current;
     const target = topSentinelRef.current;
     if (!root || !target || !olderPrefetchArmed || !hasOlder || loadingOlder || !onLoadOlder || typeof IntersectionObserver === "undefined") {
@@ -6887,7 +7228,7 @@ function MessageTimeline({
     observer.observe(target);
     return () => observer.disconnect();
   }, [olderPrefetchArmed, hasOlder, loadingOlder, onLoadOlder, firstGroupKey]);
-  useEffect10(() => {
+  useEffect11(() => {
     const root = scrollRef.current;
     const target = bottomSentinelRef.current;
     if (!root || !target || !hasNewer || loadingNewer || !onLoadNewer || typeof IntersectionObserver === "undefined") {
@@ -6904,7 +7245,7 @@ function MessageTimeline({
     observer.observe(target);
     return () => observer.disconnect();
   }, [hasNewer, loadingNewer, onLoadNewer, firstGroupKey]);
-  useEffect10(() => {
+  useEffect11(() => {
     const node = scrollRef.current;
     const inner = node?.firstElementChild;
     if (!node || !inner || typeof ResizeObserver === "undefined") {
@@ -6940,7 +7281,7 @@ function MessageTimeline({
       }
     };
   }, [autoFollow, driveFollow, snapToBottom]);
-  useEffect10(() => {
+  useEffect11(() => {
     if (hasNewer) {
       stopFollow();
       applyPinned(false);
@@ -7063,8 +7404,16 @@ function MessageTimeline({
     }
     releasePinAfterScrollSettled(node);
   };
-  return /* @__PURE__ */ jsx17(LightboxProvider, { children: /* @__PURE__ */ jsx17(FoldMemoryProvider, { value: foldMemoryRef.current, children: /* @__PURE__ */ jsx17(SeenActivityIdsProvider, { value: seenActivityIdsRef.current, children: /* @__PURE__ */ jsx17(TimelineComputeLabelProvider, { value: computeLabel ?? null, children: /* @__PURE__ */ jsx17(EntranceAnimationProvider, { value: !bulkRender, children: /* @__PURE__ */ jsx17(TooltipProvider, { delayDuration: 400, children: /* @__PURE__ */ jsxs14("div", { className: cn("og-root relative flex min-h-0 flex-col", className), children: [
-    /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx18(LightboxProvider, { children: /* @__PURE__ */ jsx18(FoldMemoryProvider, { value: foldMemoryRef.current, children: /* @__PURE__ */ jsx18(SeenActivityIdsProvider, { value: seenActivityIdsRef.current, children: /* @__PURE__ */ jsx18(TimelineComputeLabelProvider, { value: computeLabel ?? null, children: /* @__PURE__ */ jsx18(EntranceAnimationProvider, { value: !bulkRender, children: /* @__PURE__ */ jsx18(TooltipProvider, { delayDuration: 400, children: /* @__PURE__ */ jsxs14("div", { className: cn("og-root relative flex min-h-0 flex-col", className), children: [
+    onAnnotate ? /* @__PURE__ */ jsx18(Suspense4, { fallback: null, children: /* @__PURE__ */ jsx18(
+      TimelineAnnotationSelection,
+      {
+        rootRef: scrollRef,
+        sources: annotationSources,
+        onAnnotate
+      }
+    ) }) : null,
+    /* @__PURE__ */ jsx18(
       "div",
       {
         ref: scrollRef,
@@ -7084,11 +7433,11 @@ function MessageTimeline({
           autoFollow && pinned && !hasNewer ? "[overflow-anchor:none]" : "[overflow-anchor:auto]"
         ),
         children: /* @__PURE__ */ jsxs14("div", { className: "relative mx-auto flex w-full max-w-3xl flex-col gap-5", children: [
-          groups.length === 0 ? emptyState ?? /* @__PURE__ */ jsx17("p", { className: "py-10 text-center text-og-menu text-og-fg-subtle", children: "No activity yet." }) : null,
+          groups.length === 0 ? emptyState ?? /* @__PURE__ */ jsx18("p", { className: "py-10 text-center text-og-menu text-og-fg-subtle", children: "No activity yet." }) : null,
           hasOlder && olderPrefetchArmed ? (
             // Overlaid, not a layout row: mounting/unmounting the sentinel
             // must never shift content (that shift was itself a wobble).
-            /* @__PURE__ */ jsx17(
+            /* @__PURE__ */ jsx18(
               "div",
               {
                 ref: topSentinelRef,
@@ -7102,7 +7451,7 @@ function MessageTimeline({
           groups.map(({ group, key }, index) => {
             const next = groups[index + 1]?.group;
             const contextCompactionCount = group.kind === "turn" ? group.contextCompactionCount ?? 0 : group.kind === "activity" && next?.kind === "item" && next.item.kind === "context-compaction" && next.item.phase === "compacted" ? 1 : 0;
-            return /* @__PURE__ */ jsx17("div", { "data-og-timeline-group-anchor": "", "data-og-group-key": key, children: /* @__PURE__ */ jsx17(
+            return /* @__PURE__ */ jsx18("div", { "data-og-timeline-group-anchor": "", "data-og-group-key": key, children: /* @__PURE__ */ jsx18(
               TimelineGroupRenderBoundary,
               {
                 resetKeys: [
@@ -7114,9 +7463,11 @@ function MessageTimeline({
                   resolveProviderLogo,
                   toolRegistry,
                   loadRetainedScreenshot,
+                  loadRetainedArtifact,
+                  loadVideoArtifactPlayback,
                   turnSummary
                 ],
-                children: /* @__PURE__ */ jsx17(UserMessageDisclosureProvider, { value: userMessageDisclosureContext, children: /* @__PURE__ */ jsx17(
+                children: /* @__PURE__ */ jsx18(UserMessageDisclosureProvider, { value: userMessageDisclosureContext, children: /* @__PURE__ */ jsx18(
                   TimelineGroupView,
                   {
                     group,
@@ -7127,6 +7478,8 @@ function MessageTimeline({
                     resolveProviderLogo,
                     toolRegistry,
                     loadRetainedScreenshot,
+                    loadRetainedArtifact,
+                    loadVideoArtifactPlayback,
                     turnSummary,
                     foldLiveCluster: isAgentProgress(next),
                     trailingAgentText: trailingAgentTextAfterTurn(group, next),
@@ -7136,8 +7489,8 @@ function MessageTimeline({
               }
             ) }, key);
           }),
-          groups.length > 0 && trailingState ? /* @__PURE__ */ jsx17("div", { "data-og-timeline-trailing-state": "", children: trailingState }) : null,
-          hasNewer ? /* @__PURE__ */ jsx17(
+          groups.length > 0 && trailingState ? /* @__PURE__ */ jsx18("div", { "data-og-timeline-trailing-state": "", children: trailingState }) : null,
+          hasNewer ? /* @__PURE__ */ jsx18(
             "div",
             {
               ref: bottomSentinelRef,
@@ -7150,7 +7503,7 @@ function MessageTimeline({
         ] })
       }
     ),
-    /* @__PURE__ */ jsx17(AnimatePresence3, { children: loadingOlder || loadingOldest || hasOlder && onJumpToStart && olderPrefetchArmed ? (
+    /* @__PURE__ */ jsx18(AnimatePresence3, { children: loadingOlder || loadingOldest || hasOlder && onJumpToStart && olderPrefetchArmed ? (
       // Floating over the scroller (not a timeline row) so showing and
       // hiding it never reflows history under the reader.
       /* @__PURE__ */ jsxs14(
@@ -7164,7 +7517,7 @@ function MessageTimeline({
           "aria-live": "polite",
           className: "absolute inset-x-0 top-3 z-10 flex justify-center gap-2",
           children: [
-            loadingOlder || loadingOldest ? /* @__PURE__ */ jsx17("span", { className: "pointer-events-none inline-flex items-center rounded-full border border-og-border bg-og-surface-3/90 px-3 py-1 text-og-control font-medium shadow-og-md backdrop-blur", children: /* @__PURE__ */ jsx17("span", { className: "og-shimmer-text", children: loadingOldest ? "Jumping to start\u2026" : "Loading earlier activity\u2026" }) }) : null,
+            loadingOlder || loadingOldest ? /* @__PURE__ */ jsx18("span", { className: "pointer-events-none inline-flex items-center rounded-full border border-og-border bg-og-surface-3/90 px-3 py-1 text-og-control font-medium shadow-og-md backdrop-blur", children: /* @__PURE__ */ jsx18("span", { className: "og-shimmer-text", children: loadingOldest ? "Jumping to start\u2026" : "Loading earlier activity\u2026" }) }) : null,
             hasOlder && onJumpToStart && !loadingOldest ? /* @__PURE__ */ jsxs14(
               "button",
               {
@@ -7201,7 +7554,7 @@ function MessageTimeline({
                   "hover:border-og-border-strong disabled:opacity-60"
                 ),
                 children: [
-                  /* @__PURE__ */ jsx17(ArrowUpToLineIcon, { className: "size-3.5" }),
+                  /* @__PURE__ */ jsx18(ArrowUpToLineIcon, { className: "size-3.5" }),
                   "Jump to start"
                 ]
               }
@@ -7210,7 +7563,7 @@ function MessageTimeline({
         }
       )
     ) : null }),
-    /* @__PURE__ */ jsx17(AnimatePresence3, { children: loadingNewer ? /* @__PURE__ */ jsx17(
+    /* @__PURE__ */ jsx18(AnimatePresence3, { children: loadingNewer ? /* @__PURE__ */ jsx18(
       motion3.div,
       {
         initial: { opacity: 0, y: 6 },
@@ -7220,10 +7573,10 @@ function MessageTimeline({
         "data-og-loading-newer": "",
         "aria-live": "polite",
         className: "pointer-events-none absolute inset-x-0 bottom-14 z-10 flex justify-center",
-        children: /* @__PURE__ */ jsx17("span", { className: "inline-flex items-center rounded-full border border-og-border bg-og-surface-3/90 px-3 py-1 text-og-control font-medium shadow-og-md backdrop-blur", children: /* @__PURE__ */ jsx17("span", { className: "og-shimmer-text", children: "Loading later activity\u2026" }) })
+        children: /* @__PURE__ */ jsx18("span", { className: "inline-flex items-center rounded-full border border-og-border bg-og-surface-3/90 px-3 py-1 text-og-control font-medium shadow-og-md backdrop-blur", children: /* @__PURE__ */ jsx18("span", { className: "og-shimmer-text", children: "Loading later activity\u2026" }) })
       }
     ) : null }),
-    /* @__PURE__ */ jsx17(AnimatePresence3, { children: (!pinned && autoFollow || hasNewer) && autoFollow ? /* @__PURE__ */ jsxs14(
+    /* @__PURE__ */ jsx18(AnimatePresence3, { children: (!pinned && autoFollow || hasNewer) && autoFollow ? /* @__PURE__ */ jsxs14(
       motion3.button,
       {
         type: "button",
@@ -7268,7 +7621,7 @@ function MessageTimeline({
           "hover:border-og-border-strong"
         ),
         children: [
-          /* @__PURE__ */ jsx17(ArrowDownIcon2, { className: "size-3.5" }),
+          /* @__PURE__ */ jsx18(ArrowDownIcon2, { className: "size-3.5" }),
           "Jump to latest"
         ]
       }
@@ -7276,7 +7629,7 @@ function MessageTimeline({
   ] }) }) }) }) }) }) });
 }
 function useStableTimelineGroupKeys(allGroups) {
-  const previousRef = useRef10([]);
+  const previousRef = useRef11([]);
   const keyedGroups = useMemo5(() => {
     const previousByItemId = /* @__PURE__ */ new Map();
     for (const previous of previousRef.current) {
@@ -7350,10 +7703,10 @@ var TimelineGroupRenderBoundary = class extends Component2 {
           role: "status",
           className: "flex items-start gap-2 rounded-lg border border-og-border bg-og-surface-muted px-3 py-2 text-og-menu text-og-fg-muted",
           children: [
-            /* @__PURE__ */ jsx17(TriangleAlertIcon3, { "aria-hidden": "true", className: "mt-0.5 size-4 shrink-0" }),
+            /* @__PURE__ */ jsx18(TriangleAlertIcon3, { "aria-hidden": "true", className: "mt-0.5 size-4 shrink-0" }),
             /* @__PURE__ */ jsxs14("div", { children: [
-              /* @__PURE__ */ jsx17("p", { className: "font-medium text-og-fg", children: "Timeline item unavailable" }),
-              /* @__PURE__ */ jsx17("p", { children: "This item could not be displayed. The rest of the conversation is still available." })
+              /* @__PURE__ */ jsx18("p", { className: "font-medium text-og-fg", children: "Timeline item unavailable" }),
+              /* @__PURE__ */ jsx18("p", { children: "This item could not be displayed. The rest of the conversation is still available." })
             ] })
           ]
         }
@@ -7371,6 +7724,8 @@ var TimelineGroupView = memo2(function TimelineGroupView2({
   resolveProviderLogo,
   toolRegistry,
   loadRetainedScreenshot,
+  loadRetainedArtifact,
+  loadVideoArtifactPlayback,
   turnSummary,
   insideTurn = false,
   nestClusterChips = false,
@@ -7382,8 +7737,9 @@ var TimelineGroupView = memo2(function TimelineGroupView2({
   const settleChrome = useTurnSettleOpen();
   const foldMemory = useFoldMemory();
   const activityShouldFold = group.kind === "activity" && Boolean(group.outcome || foldLiveCluster && clusterIsSettled(group));
+  const containsGeneratedImage = timelineGroupContainsGeneratedImage(group);
   const liveActivitySettle = useLiveSettleFold(activityShouldFold && !insideTurn);
-  const turnDefaultOpen = !insideTurn && group.kind === "turn" && (group.outcome === "failed" || timelineGroupContainsAuthNeeded(group));
+  const turnDefaultOpen = !insideTurn && group.kind === "turn" && (group.outcome === "failed" || timelineGroupContainsAuthNeeded(group) || containsGeneratedImage);
   if (group.kind === "turn" && foldMemory && !insideTurn) {
     inheritFoldRestingState(
       foldMemory,
@@ -7395,9 +7751,9 @@ var TimelineGroupView = memo2(function TimelineGroupView2({
   switch (group.kind) {
     case "activity":
       if (insideTurn) {
-        const useNestedChip = nestClusterChips && activityShouldFold;
+        const useNestedChip = nestClusterChips && activityShouldFold && !containsGeneratedImage;
         if (!useNestedChip) {
-          return /* @__PURE__ */ jsx17(
+          return /* @__PURE__ */ jsx18(
             ActivityRail,
             {
               items: group.items,
@@ -7405,11 +7761,12 @@ var TimelineGroupView = memo2(function TimelineGroupView2({
               onMemoryClick,
               toolRegistry,
               loadRetainedScreenshot,
+              loadRetainedArtifact,
               bare: true
             }
           );
         }
-        return /* @__PURE__ */ jsx17(
+        return /* @__PURE__ */ jsx18(
           TurnSummary,
           {
             items: group.items,
@@ -7420,7 +7777,7 @@ var TimelineGroupView = memo2(function TimelineGroupView2({
             foldKey: group.id,
             facets: turnSummary?.facets,
             contextCompactionCount,
-            children: /* @__PURE__ */ jsx17(
+            children: /* @__PURE__ */ jsx18(
               ActivityRail,
               {
                 items: group.items,
@@ -7428,6 +7785,7 @@ var TimelineGroupView = memo2(function TimelineGroupView2({
                 onMemoryClick,
                 toolRegistry,
                 loadRetainedScreenshot,
+                loadRetainedArtifact,
                 bare: true
               }
             )
@@ -7435,7 +7793,7 @@ var TimelineGroupView = memo2(function TimelineGroupView2({
           settleChrome ? "settle" : "rest"
         );
       }
-      return /* @__PURE__ */ jsx17(
+      return /* @__PURE__ */ jsx18(
         TurnSummary,
         {
           items: group.items,
@@ -7446,7 +7804,7 @@ var TimelineGroupView = memo2(function TimelineGroupView2({
           facets: turnSummary?.facets,
           settleFold,
           contextCompactionCount,
-          children: /* @__PURE__ */ jsx17(FoldBody, { children: /* @__PURE__ */ jsx17(TurnRailFrame, { children: /* @__PURE__ */ jsx17(
+          children: /* @__PURE__ */ jsx18(FoldBody, { children: /* @__PURE__ */ jsx18(TurnRailFrame, { children: /* @__PURE__ */ jsx18(
             ActivityRail,
             {
               items: group.items,
@@ -7454,6 +7812,7 @@ var TimelineGroupView = memo2(function TimelineGroupView2({
               onMemoryClick,
               toolRegistry,
               loadRetainedScreenshot,
+              loadRetainedArtifact,
               bare: true
             }
           ) }) })
@@ -7465,7 +7824,7 @@ var TimelineGroupView = memo2(function TimelineGroupView2({
       const turnCopyText = collectTurnCopyText(group.groups, trailingAgentText);
       const body = group.groups.map((child) => {
         const key = timelineGroupKey(child);
-        return /* @__PURE__ */ jsx17(
+        return /* @__PURE__ */ jsx18(
           TimelineGroupRenderBoundary,
           {
             resetKeys: [
@@ -7477,9 +7836,11 @@ var TimelineGroupView = memo2(function TimelineGroupView2({
               resolveProviderLogo,
               toolRegistry,
               loadRetainedScreenshot,
+              loadRetainedArtifact,
+              loadVideoArtifactPlayback,
               turnSummary
             ],
-            children: /* @__PURE__ */ jsx17(
+            children: /* @__PURE__ */ jsx18(
               TimelineGroupView2,
               {
                 group: child,
@@ -7490,6 +7851,8 @@ var TimelineGroupView = memo2(function TimelineGroupView2({
                 resolveProviderLogo,
                 toolRegistry,
                 loadRetainedScreenshot,
+                loadRetainedArtifact,
+                loadVideoArtifactPlayback,
                 turnSummary,
                 insideTurn: true,
                 nestClusterChips: nestClusters
@@ -7499,7 +7862,7 @@ var TimelineGroupView = memo2(function TimelineGroupView2({
           key
         );
       });
-      return /* @__PURE__ */ jsx17(
+      return /* @__PURE__ */ jsx18(
         TurnSummary,
         {
           items: activityItems,
@@ -7513,36 +7876,37 @@ var TimelineGroupView = memo2(function TimelineGroupView2({
           settleFold,
           copyText: insideTurn ? void 0 : turnCopyText,
           contextCompactionCount: contextCompactionCount ?? group.contextCompactionCount,
-          children: /* @__PURE__ */ jsx17(FoldBody, { children: insideTurn ? (
+          children: /* @__PURE__ */ jsx18(FoldBody, { children: insideTurn ? (
             // A nested turn is already on an ancestor rail — its body just stacks
             // flush (the bare-node body already indents it), so no second rule.
-            /* @__PURE__ */ jsx17("div", { className: "flex flex-col gap-4", children: body })
-          ) : /* @__PURE__ */ jsx17(TurnRailFrame, { children: body }) })
+            /* @__PURE__ */ jsx18("div", { className: "flex flex-col gap-4", children: body })
+          ) : /* @__PURE__ */ jsx18(TurnRailFrame, { children: body }) })
         }
       );
     }
     case "item":
-      return /* @__PURE__ */ jsx17(
+      return /* @__PURE__ */ jsx18(
         TimelineRow,
         {
           item: group.item,
           renderMessageText,
           onReconnect,
           resolveProviderLogo,
-          onOpenSession
+          onOpenSession,
+          loadVideoArtifactPlayback
         }
       );
   }
 });
 function FoldBody({ children }) {
-  return /* @__PURE__ */ jsx17(Fragment7, { children });
+  return /* @__PURE__ */ jsx18(Fragment7, { children });
 }
 function TurnRailFrame({ children }) {
-  return /* @__PURE__ */ jsx17("div", { className: "flex flex-col gap-4 border-l-2 border-og-border pl-3 sm:pl-4", children });
+  return /* @__PURE__ */ jsx18("div", { className: "flex flex-col gap-4 border-l-2 border-og-border pl-3 sm:pl-4", children });
 }
 function useLiveSettleFold(folded) {
-  const previousFoldedRef = useRef10(folded);
-  const latchedRef = useRef10(false);
+  const previousFoldedRef = useRef11(folded);
+  const latchedRef = useRef11(false);
   if (!previousFoldedRef.current && folded) {
     latchedRef.current = true;
   }
@@ -7571,6 +7935,18 @@ function timelineGroupContainsAuthNeeded(group) {
       return group.groups.some(timelineGroupContainsAuthNeeded);
   }
 }
+function timelineGroupContainsGeneratedImage(group) {
+  switch (group.kind) {
+    case "item":
+      return false;
+    case "activity":
+      return group.items.some(
+        (item) => item.kind === "tool-call" && item.name === "generate_image"
+      );
+    case "turn":
+      return group.groups.some(timelineGroupContainsGeneratedImage);
+  }
+}
 function timelineGroupItemIds(group) {
   switch (group.kind) {
     case "item":
@@ -7696,27 +8072,28 @@ function TimelineRow({
   renderMessageText,
   onReconnect,
   resolveProviderLogo,
-  onOpenSession
+  onOpenSession,
+  loadVideoArtifactPlayback
 }) {
   switch (item.kind) {
     case "user-message":
-      return /* @__PURE__ */ jsx17(UserMessageRow, { item, renderMessageText });
+      return /* @__PURE__ */ jsx18(UserMessageRow, { item, renderMessageText });
     case "agent-message":
-      return /* @__PURE__ */ jsx17(AgentMessageRow, { item, renderMessageText });
+      return /* @__PURE__ */ jsx18(AgentMessageRow, { item, renderMessageText });
     case "worker-completion":
-      return /* @__PURE__ */ jsx17(WorkerCompletionRow, { item, onOpenSession });
+      return /* @__PURE__ */ jsx18(WorkerCompletionRow, { item, onOpenSession });
     case "session-status":
-      return /* @__PURE__ */ jsx17(SessionStatusRow, { item });
+      return /* @__PURE__ */ jsx18(SessionStatusRow, { item });
     case "goal":
-      return /* @__PURE__ */ jsx17(GoalRow, { item });
+      return /* @__PURE__ */ jsx18(GoalRow, { item });
     case "machine-input-batch":
-      return /* @__PURE__ */ jsx17(MachineInputBatchRow, { item });
+      return /* @__PURE__ */ jsx18(MachineInputBatchRow, { item, loadVideoArtifactPlayback });
     case "notice":
-      return /* @__PURE__ */ jsx17(NoticeRow, { item });
+      return /* @__PURE__ */ jsx18(NoticeRow, { item });
     case "context-compaction":
-      return /* @__PURE__ */ jsx17(CompactionRow, { item });
+      return /* @__PURE__ */ jsx18(CompactionRow, { item });
     case "auth-needed":
-      return /* @__PURE__ */ jsx17(
+      return /* @__PURE__ */ jsx18(
         AuthNeededRow,
         {
           item,
@@ -7742,7 +8119,7 @@ function CompactionRow({ item }) {
   const title = item.phase === "started" ? "Compacting conversation history\u2026" : item.phase === "compacted" ? before && after ? `Conversation history compacted \xB7 ~${before} \u2192 ~${after} estimated history tokens` : "Conversation history compacted" : "Couldn\u2019t compact conversation history";
   const subtitle = item.phase === "compacted" ? "Chat history above is unchanged" : item.phase === "skipped" ? compactionSkipSubtitle(item.skipReason) : null;
   const pill = item.phase === "skipped" && item.skipReason === "summarization_failed" ? "border-og-status-failed/35 bg-og-status-failed/10 text-og-status-failed" : item.phase === "started" ? "border-og-status-waiting/35 bg-og-status-waiting/10 text-og-status-waiting" : "border-og-border bg-og-surface-1 text-og-fg-muted";
-  return /* @__PURE__ */ jsx17("div", { className: cn(enter && "animate-og-enter", "flex justify-center"), children: /* @__PURE__ */ jsxs14(
+  return /* @__PURE__ */ jsx18("div", { className: cn(enter && "animate-og-enter", "flex justify-center"), children: /* @__PURE__ */ jsxs14(
     "div",
     {
       className: cn(
@@ -7752,13 +8129,13 @@ function CompactionRow({ item }) {
       role: "status",
       children: [
         /* @__PURE__ */ jsxs14("span", { className: "inline-flex max-w-full items-center gap-1.5", children: [
-          /* @__PURE__ */ jsx17(ShrinkIcon, { className: "size-3.5 shrink-0" }),
+          /* @__PURE__ */ jsx18(ShrinkIcon, { className: "size-3.5 shrink-0" }),
           /* @__PURE__ */ jsxs14("span", { className: "truncate", children: [
             title,
             trigger ? ` \xB7 ${trigger}` : ""
           ] })
         ] }),
-        subtitle ? /* @__PURE__ */ jsx17("span", { className: "truncate text-og-xs opacity-80", children: subtitle }) : null
+        subtitle ? /* @__PURE__ */ jsx18("span", { className: "truncate text-og-xs opacity-80", children: subtitle }) : null
       ]
     }
   ) });
@@ -7778,7 +8155,7 @@ function compactionSkipSubtitle(reason) {
   }
 }
 function MessageFooterTime({ occurredAt }) {
-  return /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx18(
     "time",
     {
       dateTime: occurredAt,
@@ -7796,34 +8173,68 @@ function UserMessageRow({
   renderMessageText
 }) {
   const enter = useEntranceAnimation();
-  return /* @__PURE__ */ jsx17("div", { className: cn(enter && "animate-og-enter", "flex justify-end"), children: /* @__PURE__ */ jsx17("div", { className: "flex max-w-[85%] min-w-0 flex-col items-end gap-1", children: /* @__PURE__ */ jsx17(
-    CopyHoverFrame,
-    {
-      copyText: item.text,
-      label: "Copy message",
-      className: "w-fit max-w-full min-w-0",
-      trailing: /* @__PURE__ */ jsx17(MessageFooterTime, { occurredAt: item.occurredAt }),
-      children: /* @__PURE__ */ jsx17("div", { className: "w-fit max-w-full min-w-0 rounded-og-lg rounded-br-og-xs border border-og-border bg-og-surface-2 px-4 py-2.5 text-og-md leading-6 text-og-fg", children: renderMessageText ? renderMessageText(item.text, item) : /* @__PURE__ */ jsx17(UserMessageBody, { messageId: item.id, text: item.text, children: /* @__PURE__ */ jsx17(Markdown, { children: item.text }) }) })
-    }
-  ) }) });
+  const deliveryLabel = item.delivery?.state === "sending" ? "Sending\u2026" : item.delivery?.state === "queued" ? "Queued" : item.delivery?.state === "failed" ? "Not sent" : null;
+  return /* @__PURE__ */ jsx18("div", { className: cn(enter && "animate-og-enter", "flex justify-end"), children: /* @__PURE__ */ jsxs14("div", { className: "flex max-w-[85%] min-w-0 flex-col items-end gap-1", children: [
+    /* @__PURE__ */ jsx18(
+      CopyHoverFrame,
+      {
+        copyText: item.text || (item.annotations ?? []).map((annotation) => `${annotation.quote}
+${annotation.note}`).join("\n\n"),
+        label: "Copy message",
+        className: "w-fit max-w-full min-w-0",
+        trailing: /* @__PURE__ */ jsx18(MessageFooterTime, { occurredAt: item.occurredAt }),
+        children: /* @__PURE__ */ jsxs14("div", { className: "w-fit max-w-full min-w-0 rounded-og-lg rounded-br-og-xs border border-og-border bg-og-surface-2 px-4 py-2.5 text-og-md leading-6 text-og-fg", children: [
+          item.text ? /* @__PURE__ */ jsx18("div", { "data-og-annotation-source-key": item.annotationSource?.eventId, children: renderMessageText ? renderMessageText(item.text, item) : /* @__PURE__ */ jsx18(UserMessageBody, { messageId: item.id, text: item.text, children: /* @__PURE__ */ jsx18(Markdown, { children: item.text }) }) }) : null,
+          (item.annotations?.length ?? 0) > 0 ? /* @__PURE__ */ jsx18(
+            TimelineAnnotationsChip,
+            {
+              annotations: item.annotations ?? [],
+              className: item.text ? "mt-2" : void 0
+            }
+          ) : null
+        ] })
+      }
+    ),
+    deliveryLabel ? /* @__PURE__ */ jsxs14("div", { className: "flex max-w-full items-center gap-2 px-1 text-og-xs text-og-fg-subtle", children: [
+      /* @__PURE__ */ jsx18("span", { title: item.delivery?.error, children: deliveryLabel }),
+      item.delivery?.state === "failed" && item.delivery.onRetry ? /* @__PURE__ */ jsx18(
+        "button",
+        {
+          type: "button",
+          className: "font-medium text-og-fg underline decoration-og-border underline-offset-2 hover:text-og-fg-strong",
+          onClick: item.delivery.onRetry,
+          children: "Retry"
+        }
+      ) : null,
+      item.delivery?.state === "failed" && item.delivery.onRemove ? /* @__PURE__ */ jsx18(
+        "button",
+        {
+          type: "button",
+          className: "font-medium text-og-fg-subtle underline decoration-og-border underline-offset-2 hover:text-og-fg",
+          onClick: item.delivery.onRemove,
+          children: "Remove"
+        }
+      ) : null
+    ] }) : null
+  ] }) });
 }
 function AgentMessageRow({
   item,
   renderMessageText
 }) {
   const enter = useEntranceAnimation();
-  const body = renderMessageText ? renderMessageText(item.text, item) : /* @__PURE__ */ jsx17(Markdown, { streaming: item.streaming, children: item.text });
-  return /* @__PURE__ */ jsx17(
+  const body = renderMessageText ? renderMessageText(item.text, item) : /* @__PURE__ */ jsx18(Markdown, { streaming: item.streaming, children: item.text });
+  return /* @__PURE__ */ jsx18("div", { "data-og-annotation-source-key": item.annotationSource?.eventId, children: /* @__PURE__ */ jsx18(
     CopyHoverFrame,
     {
       copyText: item.text,
       label: "Copy message",
       align: "start",
       className: cn(enter && "animate-og-enter", "min-w-0 text-og-md leading-7 text-og-fg"),
-      trailing: item.streaming ? null : /* @__PURE__ */ jsx17(MessageFooterTime, { occurredAt: item.occurredAt }),
+      trailing: item.streaming ? null : /* @__PURE__ */ jsx18(MessageFooterTime, { occurredAt: item.occurredAt }),
       children: body
     }
-  );
+  ) });
 }
 function workerCompletionMeta(item) {
   if (item.childStatus === "failed") {
@@ -7862,7 +8273,7 @@ function WorkerCompletionRow({
   onOpenSession
 }) {
   const enter = useEntranceAnimation();
-  const [open, setOpen] = useState13(false);
+  const [open, setOpen] = useState14(false);
   const meta = workerCompletionMeta(item);
   const Icon = meta.icon;
   const showPausedReason = item.childStatus !== "failed" && item.goalStatus === "paused" && Boolean(item.pausedReason?.trim());
@@ -7872,11 +8283,11 @@ function WorkerCompletionRow({
     ...showPausedReason ? [{ label: "Paused because", value: item.pausedReason.trim(), muted: true }] : []
   ];
   const hasDetails = details.length > 0;
-  return /* @__PURE__ */ jsx17("div", { className: cn(enter && "animate-og-enter", "min-w-0"), children: /* @__PURE__ */ jsxs14("div", { className: cn("flex flex-col gap-2 border-l-2 pl-3", meta.accentClass), children: [
+  return /* @__PURE__ */ jsx18("div", { className: cn(enter && "animate-og-enter", "min-w-0"), children: /* @__PURE__ */ jsxs14("div", { className: cn("flex flex-col gap-2 border-l-2 pl-3", meta.accentClass), children: [
     /* @__PURE__ */ jsxs14("div", { className: "flex items-start gap-2.5", children: [
-      /* @__PURE__ */ jsx17("span", { className: cn("mt-0.5 shrink-0", meta.iconClass), children: /* @__PURE__ */ jsx17(Icon, { className: "size-4" }) }),
-      /* @__PURE__ */ jsx17("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsxs14("p", { className: "text-og-base leading-5 text-og-fg", children: [
-        /* @__PURE__ */ jsx17("span", { className: "font-medium", children: meta.label }),
+      /* @__PURE__ */ jsx18("span", { className: cn("mt-0.5 shrink-0", meta.iconClass), children: /* @__PURE__ */ jsx18(Icon, { className: "size-4" }) }),
+      /* @__PURE__ */ jsx18("div", { className: "min-w-0 flex-1", children: /* @__PURE__ */ jsxs14("p", { className: "text-og-base leading-5 text-og-fg", children: [
+        /* @__PURE__ */ jsx18("span", { className: "font-medium", children: meta.label }),
         item.goalText ? /* @__PURE__ */ jsxs14("span", { className: "text-og-fg-muted", children: [
           " \xB7 ",
           truncate(item.goalText, 90)
@@ -7894,13 +8305,13 @@ function WorkerCompletionRow({
           ),
           children: [
             "View session",
-            /* @__PURE__ */ jsx17(ArrowRightIcon2, { className: "size-3.5" })
+            /* @__PURE__ */ jsx18(ArrowRightIcon2, { className: "size-3.5" })
           ]
         }
       ) : null
     ] }),
     hasDetails ? /* @__PURE__ */ jsxs14(Collapsible2.Root, { open, onOpenChange: setOpen, children: [
-      /* @__PURE__ */ jsx17(Collapsible2.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs14(
+      /* @__PURE__ */ jsx18(Collapsible2.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs14(
         "button",
         {
           type: "button",
@@ -7909,14 +8320,14 @@ function WorkerCompletionRow({
             "outline-hidden transition-colors duration-150 hover:text-og-fg-muted focus-visible:ring-2 focus-visible:ring-og-accent"
           ),
           children: [
-            /* @__PURE__ */ jsx17(ChevronRightIcon3, { className: "size-3 transition-transform duration-150 ease-og-in-out group-data-[state=open]/wc:rotate-90" }),
+            /* @__PURE__ */ jsx18(ChevronRightIcon3, { className: "size-3 transition-transform duration-150 ease-og-in-out group-data-[state=open]/wc:rotate-90" }),
             open ? "Hide details" : "Show details"
           ]
         }
       ) }),
-      /* @__PURE__ */ jsx17(Collapsible2.Content, { className: "overflow-hidden data-[state=closed]:animate-og-collapse data-[state=open]:animate-og-expand", children: /* @__PURE__ */ jsx17("div", { className: "ml-1 mt-1.5 flex flex-col gap-2.5", children: details.map((detail) => /* @__PURE__ */ jsxs14("div", { className: "min-w-0", children: [
-        /* @__PURE__ */ jsx17("p", { className: "mb-1 text-og-xs font-medium uppercase tracking-[0.08em] text-og-fg-subtle", children: detail.label }),
-        /* @__PURE__ */ jsx17(
+      /* @__PURE__ */ jsx18(Collapsible2.Content, { className: "overflow-hidden data-[state=closed]:animate-og-collapse data-[state=open]:animate-og-expand", children: /* @__PURE__ */ jsx18("div", { className: "ml-1 mt-1.5 flex flex-col gap-2.5", children: details.map((detail) => /* @__PURE__ */ jsxs14("div", { className: "min-w-0", children: [
+        /* @__PURE__ */ jsx18("p", { className: "mb-1 text-og-xs font-medium uppercase tracking-[0.08em] text-og-fg-subtle", children: detail.label }),
+        /* @__PURE__ */ jsx18(
           "p",
           {
             className: cn(
@@ -7942,14 +8353,14 @@ function SessionStatusRow({ item }) {
       ),
       role: "status",
       children: [
-        /* @__PURE__ */ jsx17("span", { className: "h-px flex-1 bg-og-border" }),
+        /* @__PURE__ */ jsx18("span", { className: "h-px flex-1 bg-og-border" }),
         /* @__PURE__ */ jsxs14("span", { className: "inline-flex items-center gap-1.5", children: [
-          /* @__PURE__ */ jsx17(StatusDot, { status: item.status, className: "size-1" }),
+          /* @__PURE__ */ jsx18(StatusDot, { status: item.status, className: "size-1" }),
           meta.label.toLowerCase(),
           " \xB7 ",
           formatRelativeTime(item.occurredAt)
         ] }),
-        /* @__PURE__ */ jsx17("span", { className: "h-px flex-1 bg-og-border" })
+        /* @__PURE__ */ jsx18("span", { className: "h-px flex-1 bg-og-border" })
       ]
     }
   );
@@ -7979,7 +8390,7 @@ var GOAL_META = {
 function GoalRow({ item }) {
   const enter = useEntranceAnimation();
   const { label, pill, icon: Icon } = GOAL_META[item.action];
-  return /* @__PURE__ */ jsx17("div", { className: cn(enter && "animate-og-enter", "flex justify-center"), children: /* @__PURE__ */ jsxs14(
+  return /* @__PURE__ */ jsx18("div", { className: cn(enter && "animate-og-enter", "flex justify-center"), children: /* @__PURE__ */ jsxs14(
     "span",
     {
       className: cn(
@@ -7987,7 +8398,7 @@ function GoalRow({ item }) {
         pill
       ),
       children: [
-        /* @__PURE__ */ jsx17(Icon, { className: "size-3.5 shrink-0" }),
+        /* @__PURE__ */ jsx18(Icon, { className: "size-3.5 shrink-0" }),
         /* @__PURE__ */ jsxs14("span", { className: "truncate", children: [
           label,
           item.text ? `: ${truncate(item.text, 90)}` : ""
@@ -7996,15 +8407,27 @@ function GoalRow({ item }) {
     }
   ) });
 }
-function MachineInputBatchRow({ item }) {
+function MachineInputBatchRow({
+  item,
+  loadVideoArtifactPlayback
+}) {
   const enter = useEntranceAnimation();
   const label = machineInputBatchLabel(item.members);
   const single = item.members.length === 1 ? item.members[0] : null;
+  if (single?.kind === "media_generation_result" && single.result) {
+    return /* @__PURE__ */ jsx18(
+      VideoGenerationResultRow,
+      {
+        result: single.result,
+        loadVideoArtifactPlayback
+      }
+    );
+  }
   const singleSummary = single ? cleanMachineInputSummary(single.summary) : "";
   const showCollapsedSummary = single != null && machineInputSummaryIsUseful(single.kind, singleSummary);
   return /* @__PURE__ */ jsxs14("div", { className: cn(enter && "animate-og-enter", "flex flex-col items-center gap-1.5"), children: [
     /* @__PURE__ */ jsxs14("details", { className: "group w-full max-w-full", "data-og-machine-input-batch": "", children: [
-      /* @__PURE__ */ jsx17("summary", { className: "flex cursor-pointer list-none justify-center [&::-webkit-details-marker]:hidden", children: /* @__PURE__ */ jsxs14(
+      /* @__PURE__ */ jsx18("summary", { className: "flex cursor-pointer list-none justify-center [&::-webkit-details-marker]:hidden", children: /* @__PURE__ */ jsxs14(
         "span",
         {
           className: cn(
@@ -8012,37 +8435,122 @@ function MachineInputBatchRow({ item }) {
             NEUTRAL_PILL
           ),
           children: [
-            /* @__PURE__ */ jsx17(
+            /* @__PURE__ */ jsx18(
               ChevronRightIcon3,
               {
                 "aria-hidden": true,
                 className: "size-3.5 shrink-0 transition-transform group-open:rotate-90"
               }
             ),
-            /* @__PURE__ */ jsx17("span", { className: "truncate", children: label })
+            /* @__PURE__ */ jsx18("span", { className: "truncate", children: label })
           ]
         }
       ) }),
-      /* @__PURE__ */ jsx17("div", { className: "mx-auto mt-2 w-full max-w-lg space-y-2 border-t border-og-border/50 pt-2", children: item.members.map((member) => /* @__PURE__ */ jsx17(MachineInputRow, { member }, member.id)) })
+      /* @__PURE__ */ jsx18("div", { className: "mx-auto mt-2 w-full max-w-lg space-y-2 border-t border-og-border/50 pt-2", children: item.members.map((member) => /* @__PURE__ */ jsx18(
+        MachineInputRow,
+        {
+          member,
+          loadVideoArtifactPlayback
+        },
+        member.id
+      )) })
     ] }),
-    showCollapsedSummary ? /* @__PURE__ */ jsx17("p", { className: "max-w-lg px-3 text-center text-og-xs leading-4 text-og-fg-subtle", children: truncate(singleSummary, 160) }) : null
+    showCollapsedSummary ? /* @__PURE__ */ jsx18("p", { className: "max-w-lg px-3 text-center text-og-xs leading-4 text-og-fg-subtle", children: truncate(singleSummary, 160) }) : null
   ] });
 }
-function MachineInputRow({ member }) {
+function MachineInputRow({
+  member,
+  loadVideoArtifactPlayback
+}) {
+  if (member.kind === "media_generation_result" && member.result) {
+    return /* @__PURE__ */ jsx18(
+      VideoGenerationResultRow,
+      {
+        result: member.result,
+        loadVideoArtifactPlayback,
+        compact: true
+      }
+    );
+  }
   const source = readableMachineInputSource(member.sourceId);
   const summary = cleanMachineInputSummary(member.summary);
   return /* @__PURE__ */ jsxs14("div", { className: "flex min-w-0 items-start gap-2.5", children: [
-    /* @__PURE__ */ jsx17("span", { className: "mt-2 size-1.5 shrink-0 rounded-full bg-og-fg-subtle", "aria-hidden": true }),
+    /* @__PURE__ */ jsx18("span", { className: "mt-2 size-1.5 shrink-0 rounded-full bg-og-fg-subtle", "aria-hidden": true }),
     /* @__PURE__ */ jsxs14("div", { className: "min-w-0 flex-1", children: [
-      /* @__PURE__ */ jsx17("span", { className: "text-og-control font-medium text-og-fg-muted", children: MACHINE_INPUT_META[member.kind] }),
+      /* @__PURE__ */ jsx18("span", { className: "text-og-control font-medium text-og-fg-muted", children: MACHINE_INPUT_META[member.kind] }),
       source && /* @__PURE__ */ jsxs14("span", { className: "ml-1.5 text-og-control text-og-fg-subtle", children: [
         "from ",
         source
       ] }),
-      summary ? /* @__PURE__ */ jsx17("p", { className: "mt-0.5 whitespace-pre-wrap break-words text-og-menu leading-5 text-og-fg", children: truncate(summary, 320) }) : null
+      summary ? /* @__PURE__ */ jsx18("p", { className: "mt-0.5 whitespace-pre-wrap break-words text-og-menu leading-5 text-og-fg", children: truncate(summary, 320) }) : null
     ] })
   ] });
 }
+function VideoGenerationResultRow({
+  result,
+  loadVideoArtifactPlayback,
+  compact = false
+}) {
+  const enter = useEntranceAnimation();
+  if (result.status !== "ready") {
+    return /* @__PURE__ */ jsxs14(
+      "div",
+      {
+        className: cn(
+          enter && "animate-og-enter",
+          "mx-auto w-full max-w-lg rounded-og-md border border-og-status-failed/30 bg-og-status-failed/5 px-3.5 py-3"
+        ),
+        children: [
+          /* @__PURE__ */ jsxs14("div", { className: "flex items-center gap-2 text-og-sm font-medium text-og-status-failed", children: [
+            /* @__PURE__ */ jsx18(XCircleIcon, { "aria-hidden": true, className: "size-4" }),
+            "Video generation failed"
+          ] }),
+          /* @__PURE__ */ jsx18("p", { className: "mt-1 text-og-sm leading-5 text-og-fg-muted", children: result.boundedPublicReason })
+        ]
+      }
+    );
+  }
+  const { receipt } = result;
+  const facts = receipt.video;
+  return /* @__PURE__ */ jsxs14(
+    "section",
+    {
+      "aria-label": "Generated video",
+      className: cn(
+        enter && "animate-og-enter",
+        "mx-auto w-full max-w-2xl overflow-hidden rounded-og-lg border border-og-border bg-og-surface-1 shadow-sm",
+        compact && "max-w-lg"
+      ),
+      children: [
+        loadVideoArtifactPlayback ? /* @__PURE__ */ jsx18(
+          GeneratedVideoPlayer,
+          {
+            receipt,
+            loadPlaybackSource: loadVideoArtifactPlayback,
+            className: "rounded-none border-0 shadow-none"
+          }
+        ) : /* @__PURE__ */ jsx18("div", { className: "flex aspect-video items-center justify-center bg-og-surface-2 text-og-fg-subtle", children: /* @__PURE__ */ jsx18(PlayIcon2, { "aria-hidden": true, className: "size-6" }) }),
+        /* @__PURE__ */ jsxs14("div", { className: "flex items-center justify-between gap-4 px-3.5 py-2.5", children: [
+          /* @__PURE__ */ jsxs14("div", { className: "min-w-0", children: [
+            /* @__PURE__ */ jsx18("p", { className: "text-og-sm font-medium text-og-fg", children: "Generated video" }),
+            /* @__PURE__ */ jsxs14("p", { className: "truncate text-og-xs text-og-fg-subtle", children: [
+              facts.width,
+              "\xD7",
+              facts.height,
+              " \xB7 ",
+              formatVideoDuration(facts.durationSeconds),
+              facts.hasAudio ? " \xB7 Audio" : ""
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx18(CheckCircle2Icon, { "aria-label": "Ready", className: "size-4 shrink-0 text-og-status-success" })
+        ] })
+      ]
+    }
+  );
+}
+function formatVideoDuration(seconds) {
+  return `${Math.round(seconds * 10) / 10}s`;
+}
 function NoticeRow({ item }) {
   const enter = useEntranceAnimation();
   const tone = item.tone === "failed" ? "border-og-status-failed/35 bg-og-status-failed/10 text-og-status-failed" : item.tone === "waiting" ? "border-og-status-waiting/35 bg-og-status-waiting/10 text-og-status-waiting" : "border-og-border bg-og-surface-1 text-og-fg-muted";
@@ -8056,20 +8564,20 @@ function NoticeRow({ item }) {
       ),
       role: "status",
       children: [
-        /* @__PURE__ */ jsx17(
+        /* @__PURE__ */ jsx18(
           TriangleAlertIcon3,
           {
             className: cn("mt-0.5 size-4 shrink-0", item.tone === "cancelled" && "opacity-60")
           }
         ),
         /* @__PURE__ */ jsxs14("div", { className: "min-w-0 flex-1", children: [
-          /* @__PURE__ */ jsx17("span", { className: "whitespace-pre-wrap break-words", children: item.text }),
+          /* @__PURE__ */ jsx18("span", { className: "whitespace-pre-wrap break-words", children: item.text }),
           item.details ? /* @__PURE__ */ jsxs14("details", { className: "mt-2 text-og-control", children: [
-            /* @__PURE__ */ jsx17("summary", { className: "cursor-pointer font-medium", children: item.details.label }),
-            /* @__PURE__ */ jsx17("pre", { className: "mt-2 max-h-64 overflow-auto whitespace-pre-wrap break-all rounded-og-sm bg-black/5 p-2 font-mono dark:bg-white/5", children: JSON.stringify(item.details.value, null, 2) })
+            /* @__PURE__ */ jsx18("summary", { className: "cursor-pointer font-medium", children: item.details.label }),
+            /* @__PURE__ */ jsx18("pre", { className: "mt-2 max-h-64 overflow-auto whitespace-pre-wrap break-all rounded-og-sm bg-black/5 p-2 font-mono dark:bg-white/5", children: JSON.stringify(item.details.value, null, 2) })
           ] }) : null
         ] }),
-        item.action ? /* @__PURE__ */ jsx17(
+        item.action ? /* @__PURE__ */ jsx18(
           "a",
           {
             className: "shrink-0 rounded-og-sm border border-current/25 px-2 py-1 text-og-control font-medium hover:bg-current/10",
@@ -8089,12 +8597,15 @@ function AuthNeededRow({
   resolveProviderLogo
 }) {
   const enter = useEntranceAnimation();
-  const [busy, setBusy] = useState13(false);
-  const [failed, setFailed] = useState13(false);
-  const provider = item.serverId === "codex_apps" ? "Codex Apps" : providerLabel(item.providerDomain);
+  const [busy, setBusy] = useState14(false);
+  const [failed, setFailed] = useState14(false);
+  const recommendation = item.capability ?? null;
+  const provider = recommendation?.name ?? (item.serverId === "codex_apps" ? "Codex Apps" : providerLabel(item.providerDomain));
   const unavailable = item.reason === "personal_authority_unavailable" || item.reason === "unsupported_auth" || item.reason === "resource_scope_unavailable";
   const missing = item.reason === "missing_connection";
-  const actionLabel = missing ? "Connect" : "Reconnect";
+  const actionLabel = recommendation ? recommendation.action === "connect" ? "Connect" : "Review" : missing ? "Connect" : "Reconnect";
+  const title = recommendation ? recommendation.action === "connect" ? `Connect ${provider}` : recommendation.action === "add_credentials" ? `Set up ${provider}` : `Enable ${provider}` : unavailable ? `${provider} tools unavailable` : `${actionLabel} ${provider}`;
+  const reasonLine = recommendation?.rationale ?? authReasonLine(item.reason);
   const start = async () => {
     if (!onReconnect || busy) {
       return;
@@ -8112,7 +8623,7 @@ function AuthNeededRow({
   return /* @__PURE__ */ jsxs14("div", { className: cn(enter && "animate-og-enter", "flex flex-col gap-2"), role: "status", children: [
     /* @__PURE__ */ jsxs14("div", { className: "flex flex-col gap-3 rounded-og-lg border border-og-border bg-og-surface-1 px-3.5 py-3 sm:flex-row sm:items-center", children: [
       /* @__PURE__ */ jsxs14("div", { className: "flex min-w-0 flex-1 items-center gap-3", children: [
-        /* @__PURE__ */ jsx17(
+        /* @__PURE__ */ jsx18(
           AuthProviderLogo,
           {
             src: resolveProviderLogo?.(item.providerDomain) ?? null,
@@ -8120,8 +8631,16 @@ function AuthNeededRow({
           }
         ),
         /* @__PURE__ */ jsxs14("div", { className: "min-w-0", children: [
-          /* @__PURE__ */ jsx17("p", { className: "truncate text-og-md font-medium text-og-fg", children: unavailable ? `${provider} tools unavailable` : `${actionLabel} ${provider}` }),
-          /* @__PURE__ */ jsx17("p", { className: "truncate text-og-sm text-og-fg-subtle", children: authReasonLine(item.reason) })
+          /* @__PURE__ */ jsx18("p", { className: "truncate text-og-md font-medium text-og-fg", children: title }),
+          /* @__PURE__ */ jsx18("p", { className: "line-clamp-2 text-og-sm text-og-fg-subtle", children: reasonLine }),
+          recommendation ? /* @__PURE__ */ jsxs14("p", { className: "mt-1 truncate text-og-xs text-og-fg-muted", children: [
+            "Provider: ",
+            item.providerDomain
+          ] }) : null,
+          recommendation && recommendation.requiredVariables.length > 0 ? /* @__PURE__ */ jsxs14("p", { className: "mt-1 truncate text-og-xs text-og-fg-muted", children: [
+            "Needs variables: ",
+            recommendation.requiredVariables.join(", ")
+          ] }) : null
         ] })
       ] }),
       !unavailable && onReconnect ? /* @__PURE__ */ jsxs14(
@@ -8135,7 +8654,7 @@ function AuthNeededRow({
             "transition-colors hover:bg-og-accent-strong disabled:opacity-70 pointer-coarse:min-h-9"
           ),
           children: [
-            /* @__PURE__ */ jsx17(RefreshCwIcon, { className: cn("size-3.5", busy && "animate-og-spin"), "aria-hidden": true }),
+            /* @__PURE__ */ jsx18(RefreshCwIcon, { className: cn("size-3.5", busy && "animate-og-spin"), "aria-hidden": true }),
             busy ? "Opening\u2026" : actionLabel
           ]
         }
@@ -8150,17 +8669,13 @@ function AuthNeededRow({
             "transition-colors hover:bg-og-accent-strong pointer-coarse:min-h-9"
           ),
           children: [
-            /* @__PURE__ */ jsx17(RefreshCwIcon, { className: "size-3.5", "aria-hidden": true }),
+            /* @__PURE__ */ jsx18(RefreshCwIcon, { className: "size-3.5", "aria-hidden": true }),
             actionLabel
           ]
         }
       ) : null
     ] }),
-    !unavailable ? /* @__PURE__ */ jsxs14("p", { className: "px-1 text-og-xs text-og-fg-subtle", children: [
-      "This tool call wasn't replayed. After ",
-      missing ? "connecting" : "reconnecting",
-      ", send a new message to try again."
-    ] }) : null,
+    !unavailable ? /* @__PURE__ */ jsx18("p", { className: "px-1 text-og-xs text-og-fg-subtle", children: recommendation ? "No access has been granted. Review and confirm the provider before continuing." : `This tool call wasn't replayed. After ${missing ? "connecting" : "reconnecting"}, send a new message to try again.` }) : null,
     failed ? /* @__PURE__ */ jsxs14("p", { className: "px-1 text-og-xs text-og-status-failed", children: [
       "Couldn't start ",
       missing ? "connecting" : "reconnecting",
@@ -8171,15 +8686,15 @@ function AuthNeededRow({
   ] });
 }
 function AuthProviderLogo({ src, label }) {
-  const [failed, setFailed] = useState13(false);
-  useEffect10(() => setFailed(false), [src]);
+  const [failed, setFailed] = useState14(false);
+  useEffect11(() => setFailed(false), [src]);
   const showImage = src && !failed;
-  return /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx18(
     "span",
     {
       className: "relative flex size-10 shrink-0 items-center justify-center overflow-hidden rounded-og-md border border-og-border bg-og-surface-2 text-og-menu font-semibold text-og-fg-muted",
       "aria-hidden": true,
-      children: showImage ? /* @__PURE__ */ jsx17(
+      children: showImage ? /* @__PURE__ */ jsx18(
         "img",
         {
           src,
@@ -8189,7 +8704,7 @@ function AuthProviderLogo({ src, label }) {
           className: "size-full object-contain p-1.5",
           onError: () => setFailed(true)
         }
-      ) : /* @__PURE__ */ jsx17("span", { children: monogram(label) })
+      ) : /* @__PURE__ */ jsx18("span", { children: monogram(label) })
     }
   );
 }
@@ -8273,8 +8788,6 @@ export {
   PierreDiff,
   defaultToolRegistry,
   createDefaultToolRegistry,
-  copyTextToClipboard,
-  tableElementToTsv,
   CopyButton,
   CopyHoverFrame,
   Markdown,
@@ -8283,10 +8796,11 @@ export {
   TurnSummary,
   userMessageLikelyNeedsDisclosure,
   UserMessageBody,
+  GeneratedVideoPlayer,
   SESSION_STATUS_META,
   SessionStatus,
   StatusDot,
   MessageTimeline,
   TimelineRow
 };
-//# sourceMappingURL=chunk-XCNTXWBB.js.map
+//# sourceMappingURL=chunk-JAGDUCZQ.js.map