@opengeni/react 0.46.1 → 0.52.1

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

@@ -1,19 +1,23 @@
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger
+} from "./chunk-FK6VG4LL.js";
 import {
   EmptyQueueStateSurface,
+  TimelineAnnotationsChip,
   requestQueueDraftEdit
-} from "./chunk-VCBFUSUZ.js";
+} from "./chunk-WSK7G5LE.js";
+import {
+  usePortalTokenStyle
+} from "./chunk-VZTQ73XT.js";
 import {
   buildTimeline,
   groupTimeline,
   mcpToolLeaf,
   toolDisplayName
-} from "./chunk-LWR4MXSS.js";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger
-} from "./chunk-U3CSCMWA.js";
+} from "./chunk-JR3QFY6B.js";
 import {
   formatClockTime,
   formatRelativeTime,
@@ -24,12 +28,16 @@ import {
 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-J4XJFKRW.js");
+var loadQueueSurface = () => import("./queue-surface-implementation-2KVJTYXH.js");
 var QueueSurface = createQueueSurface(loadQueueSurface);
 function createQueueSurface(loadImplementation) {
   const LazyQueueSurface = lazy(async () => ({
@@ -221,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(
@@ -243,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) {
@@ -288,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
   );
@@ -372,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,
@@ -426,12 +453,12 @@ function SessionChrome({
             "transition-[background-color,border-color,box-shadow] motion-reduce:transition-none"
           ),
           style: {
-            borderRadius: "var(--og-session-chrome-radius)",
-            background: open ? "var(--og-session-chrome-surface-open)" : "var(--og-session-chrome-surface)",
-            borderColor: open ? "var(--og-session-chrome-border-open)" : "var(--og-session-chrome-border)",
+            borderRadius: "var(--_og-session-chrome-radius)",
+            background: open ? "var(--_og-session-chrome-surface-open)" : "var(--_og-session-chrome-surface)",
+            borderColor: open ? "var(--_og-session-chrome-border-open)" : "var(--_og-session-chrome-border)",
             boxShadow: open ? "var(--og-session-chrome-shadow-open)" : "var(--og-session-chrome-shadow)",
             transitionDuration: "var(--og-session-chrome-duration)",
-            transitionTimingFunction: "var(--og-session-chrome-ease)"
+            transitionTimingFunction: "var(--_og-session-chrome-ease)"
           },
           children: [
             /* @__PURE__ */ jsx2(
@@ -459,8 +486,8 @@ function SessionChrome({
                           "aria-hidden": true,
                           className: "pointer-events-none absolute left-0 top-0 rounded-og-md",
                           style: {
-                            background: "var(--og-session-chrome-highlight)",
-                            boxShadow: "inset 0 0 0 1px var(--og-session-chrome-highlight-ring)"
+                            background: "var(--_og-session-chrome-highlight)",
+                            boxShadow: "inset 0 0 0 1px var(--_og-session-chrome-highlight-ring)"
                           },
                           initial: false,
                           animate: {
@@ -489,7 +516,7 @@ function SessionChrome({
                             "data-og-session-chrome-signal": signal.id,
                             onClick: () => setActive(selected ? null : signal.id),
                             className: cn(
-                              "group relative z-[1] inline-flex min-h-[var(--og-session-chrome-chip-min-height)] max-w-full items-center gap-1 rounded-og-md py-1 text-left text-og-xs outline-none",
+                              "group relative z-[1] inline-flex min-h-[var(--og-session-chrome-chip-min-height)] max-w-full items-center gap-1 rounded-og-md py-1 text-left text-og-xs outline-hidden",
                               // Coarse pointers keep a 44px target (session-pins acceptance).
                               "pointer-coarse:min-h-11",
                               "transition-colors duration-150 motion-reduce:transition-none",
@@ -588,7 +615,7 @@ function IncomingPanel({
       children: inputs.map((input) => /* @__PURE__ */ jsxs2(
         "li",
         {
-          className: "group flex items-start gap-1.5 rounded-og-sm px-1.5 py-1 transition-colors hover:bg-[var(--og-session-chrome-row-hover)]",
+          className: "group flex items-start gap-1.5 rounded-og-sm px-1.5 py-1 transition-colors hover:bg-[var(--_og-session-chrome-row-hover)]",
           children: [
             /* @__PURE__ */ jsx2(
               "span",
@@ -618,7 +645,11 @@ function IncomingPanel({
     }
   );
 }
-function SteeringPanel({ phase, text }) {
+function SteeringPanel({
+  phase,
+  stoppingKind,
+  text
+}) {
   return /* @__PURE__ */ jsxs2(
     "div",
     {
@@ -627,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." })
         ] })
       ]
     }
@@ -666,7 +697,7 @@ function QueuePanel({
           "li",
           {
             "data-queue-turn-id": turn.id,
-            className: "group flex flex-col gap-1 rounded-og-sm px-1.5 py-1 transition-colors hover:bg-[var(--og-session-chrome-row-hover)]",
+            className: "group flex flex-col gap-1 rounded-og-sm px-1.5 py-1 transition-colors hover:bg-[var(--_og-session-chrome-row-hover)]",
             children: [
               /* @__PURE__ */ jsxs2("div", { className: "flex items-start gap-1.5", children: [
                 voice ? /* @__PURE__ */ jsx2(
@@ -811,7 +842,7 @@ function GoalPanel({
             type: "button",
             disabled: goal.updating,
             onClick: () => void (record.status === "paused" ? goal.resume() : goal.pause("Paused from session chrome")),
-            className: "inline-flex h-6 items-center gap-1 rounded-og-sm px-1.5 text-og-xs font-medium text-og-fg-muted outline-none transition-colors hover:bg-og-surface-3/70 hover:text-og-fg focus-visible:ring-2 focus-visible:ring-og-accent/40 disabled:opacity-50",
+            className: "inline-flex h-6 items-center gap-1 rounded-og-sm px-1.5 text-og-xs font-medium text-og-fg-muted outline-hidden transition-colors hover:bg-og-surface-3/70 hover:text-og-fg focus-visible:ring-2 focus-visible:ring-og-accent/40 disabled:opacity-50",
             children: [
               goal.updating ? /* @__PURE__ */ jsx2(Loader2Icon2, { className: "size-3 animate-og-spin" }) : record.status === "paused" ? /* @__PURE__ */ jsx2(PlayIcon, { className: "size-3" }) : /* @__PURE__ */ jsx2(PauseIcon, { className: "size-3" }),
               record.status === "paused" ? "Resume" : "Pause"
@@ -824,7 +855,7 @@ function GoalPanel({
             type: "button",
             disabled: goal.updating,
             onClick: () => void goal.deleteGoal(),
-            className: "inline-flex h-6 items-center gap-1 rounded-og-sm px-1.5 text-og-xs font-medium text-og-fg-subtle outline-none transition-colors hover:bg-og-surface-3/70 hover:text-og-danger focus-visible:ring-2 focus-visible:ring-og-accent/40 disabled:opacity-50",
+            className: "inline-flex h-6 items-center gap-1 rounded-og-sm px-1.5 text-og-xs font-medium text-og-fg-subtle outline-hidden transition-colors hover:bg-og-surface-3/70 hover:text-og-danger focus-visible:ring-2 focus-visible:ring-og-accent/40 disabled:opacity-50",
             children: [
               /* @__PURE__ */ jsx2(Trash2Icon, { className: "size-3" }),
               "Clear"
@@ -858,7 +889,7 @@ function IconAction({
         disabled,
         onClick,
         className: cn(
-          "inline-flex size-6 items-center justify-center rounded-og-sm text-og-fg-subtle outline-none transition-colors",
+          "inline-flex size-6 items-center justify-center rounded-og-sm text-og-fg-subtle outline-hidden transition-colors",
           "hover:bg-og-surface-2 hover:text-og-fg focus-visible:ring-2 focus-visible:ring-og-accent/40",
           "disabled:pointer-events-none disabled:opacity-40 pointer-coarse:size-9",
           danger && "hover:text-og-danger"
@@ -1275,7 +1306,7 @@ function QuestionControls({
         "aria-describedby": describedBy,
         autoFocus,
         rows: 2,
-        className: "min-h-14 w-full resize-y rounded-og-md border border-og-border bg-og-surface-1 px-3 py-2 text-og-sm text-og-fg outline-none placeholder:text-og-fg-subtle focus:border-og-accent"
+        className: "min-h-14 w-full resize-y rounded-og-md border border-og-border bg-og-surface-1 px-3 py-2 text-og-sm text-og-fg outline-hidden placeholder:text-og-fg-subtle focus:border-og-accent"
       }
     ) : /* @__PURE__ */ jsxs3(
       "div",
@@ -1354,7 +1385,7 @@ function QuestionControls({
                         ...current,
                         other: event.target.value
                       })),
-                      className: "mt-1.5 w-full rounded-og-sm border border-og-border bg-og-surface-1 px-2 py-1.5 text-og-sm text-og-fg outline-none focus:border-og-accent disabled:opacity-50"
+                      className: "mt-1.5 w-full rounded-og-sm border border-og-border bg-og-surface-1 px-2 py-1.5 text-og-sm text-og-fg outline-hidden focus:border-og-accent disabled:opacity-50"
                     }
                   )
                 ] })
@@ -1517,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;
@@ -1822,20 +1856,6 @@ function isApplyPatch(item) {
   const name = item.name;
   return name === "apply_patch_call" || name === "apply_patch" || name.endsWith("__apply_patch");
 }
-var SECRET_KEY = /^(value|secret|token|password|api[_-]?key|signing[_-]?key)$/i;
-function redactSecrets(value) {
-  if (Array.isArray(value)) {
-    return value.map(redactSecrets);
-  }
-  if (value && typeof value === "object") {
-    const out = {};
-    for (const [k, v] of Object.entries(value)) {
-      out[k] = SECRET_KEY.test(k) ? "\u2022\u2022\u2022\u2022" : redactSecrets(v);
-    }
-    return out;
-  }
-  return value;
-}
 function parseToolArgs(args) {
   if (args == null) {
     return {};
@@ -1907,6 +1927,29 @@ function screenshotDataUrl(out) {
   }
   return null;
 }
+function retainedScreenshotMetadata(out) {
+  if (typeof out === "string" && (out.startsWith("{") || out.startsWith("["))) {
+    const parsed = tryParseJson(out);
+    if (parsed !== void 0 && parsed !== out) return retainedScreenshotMetadata(parsed);
+  }
+  if (Array.isArray(out)) {
+    for (const entry of out) {
+      const metadata = retainedScreenshotMetadata(entry);
+      if (metadata) return metadata;
+    }
+    return null;
+  }
+  if (!out || typeof out !== "object") return null;
+  const value = out;
+  if (typeof value.artifactId !== "string" || typeof value.available !== "boolean") return null;
+  if (!value.available) {
+    return typeof value.reason === "string" ? value : null;
+  }
+  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);
@@ -1998,13 +2041,23 @@ function LightboxProvider({ children }) {
 }
 function LightboxRoot({ children }) {
   const [state, setState] = useState3(null);
-  const open = useCallback((src, caption) => {
-    setState(caption ? { src, caption } : { src });
+  const [tokenSource, setTokenSource] = useState3(null);
+  const portalStyle = usePortalTokenStyle(tokenSource);
+  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);
   }, []);
   const controller = useMemo3(() => ({ open }), [open]);
   return /* @__PURE__ */ jsxs4(LightboxContext.Provider, { value: controller, children: [
     children,
-    /* @__PURE__ */ jsx6(Dialog.Root, { open: state !== null, onOpenChange: (next) => !next && setState(null), children: /* @__PURE__ */ jsx6(AnimatePresence2, { children: state !== null ? /* @__PURE__ */ jsxs4(Dialog.Portal, { forceMount: true, children: [
+    /* @__PURE__ */ jsx6(Dialog.Root, { open: state !== null, onOpenChange: (next) => !next && close(), children: /* @__PURE__ */ jsx6(AnimatePresence2, { children: state !== null ? /* @__PURE__ */ jsxs4(Dialog.Portal, { forceMount: true, children: [
       /* @__PURE__ */ jsx6(Dialog.Overlay, { asChild: true, forceMount: true, children: /* @__PURE__ */ jsx6(
         motion2.div,
         {
@@ -2012,7 +2065,8 @@ function LightboxRoot({ children }) {
           animate: { opacity: 1 },
           exit: { opacity: 0 },
           transition: { duration: 0.15 },
-          className: "og-root fixed inset-0 z-50 bg-black/90 backdrop-blur-md"
+          className: "og-root fixed inset-0 z-50 bg-black/90 backdrop-blur-md",
+          style: portalStyle
         }
       ) }),
       /* @__PURE__ */ jsx6(
@@ -2020,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,
@@ -2031,19 +2085,21 @@ function LightboxRoot({ children }) {
               transition: { duration: 0.18, ease: [0.16, 1, 0.3, 1] },
               onClick: (event) => {
                 if (event.target === event.currentTarget) {
-                  setState(null);
+                  close();
                 }
               },
               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"
                       }
                     ),
@@ -2073,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",
@@ -2093,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",
@@ -2109,7 +2174,7 @@ function ActivityDisclosure({
     "pointer-coarse:min-h-11 pointer-coarse:py-2.5"
   );
   const inner = /* @__PURE__ */ jsxs5(Fragment4, { children: [
-    hasBody ? /* @__PURE__ */ jsx7(ChevronRightIcon, { className: "size-3.5 shrink-0 text-og-fg-subtle transition-transform duration-[var(--og-duration-disclose)] ease-og-in-out group-data-[state=open]/disclosure:rotate-90" }) : /* @__PURE__ */ jsx7("span", { className: "size-3.5 shrink-0" }),
+    hasBody ? /* @__PURE__ */ jsx7(ChevronRightIcon, { className: "size-3.5 shrink-0 text-og-fg-subtle transition-transform duration-[var(--_og-duration-disclose)] ease-og-in-out group-data-[state=open]/disclosure:rotate-90" }) : /* @__PURE__ */ jsx7("span", { className: "size-3.5 shrink-0" }),
     /* @__PURE__ */ jsx7("span", { className: cn("shrink-0", ICON_TONE[iconTone]), children: icon }),
     /* @__PURE__ */ jsx7(
       "span",
@@ -2123,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) {
@@ -2147,13 +2212,28 @@ function ActivityDisclosure({
         "data-status": dataStatus,
         className: cn(
           rowClass,
-          "cursor-pointer outline-none hover:bg-og-surface-1 hover:text-og-fg",
+          "cursor-pointer outline-hidden hover:bg-og-surface-1 hover:text-og-fg",
           "focus-visible:ring-2 focus-visible:ring-og-accent focus-visible:ring-offset-0"
         ),
         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 }) {
@@ -2282,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);
@@ -2307,7 +2389,7 @@ function Thumbnail({
       type: "button",
       onClick: (event) => {
         event.stopPropagation();
-        lightbox.open(src, caption);
+        lightbox.open(src, caption, event.currentTarget, lightboxLabel);
       },
       onKeyDown: (event) => {
         if (event.key === "Enter" || event.key === " ") {
@@ -2316,10 +2398,10 @@ function Thumbnail({
       },
       className: cn(
         MEDIA_BOX,
-        "group/thumb relative inline-flex overflow-hidden bg-og-bg outline-none",
+        "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
     }
   );
@@ -2327,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);
@@ -2346,9 +2430,9 @@ function ScreenshotFigure({
       "button",
       {
         type: "button",
-        onClick: () => lightbox.open(src, caption),
+        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 }),
@@ -2536,15 +2620,17 @@ import {
   Share2Icon,
   TargetIcon,
   TerminalIcon,
+  VideoIcon,
   WrenchIcon
 } from "lucide-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
@@ -2991,7 +3077,7 @@ function asComputerArgs(args) {
     ...typeof record.button === "string" ? { button: record.button } : {}
   };
 }
-function ComputerCallRenderer({ item }) {
+function ComputerCallRenderer({ item, loadRetainedScreenshot }) {
   const raw = item.raw ?? {};
   const functionAction = !raw.action && item.name.startsWith("computer_") && item.name !== "computer_call" ? { type: item.name.slice("computer_".length), ...asComputerArgs(item.arguments) } : void 0;
   const action = raw.action ?? functionAction;
@@ -3002,6 +3088,7 @@ function ComputerCallRenderer({ item }) {
   const rejected = raw.providerData?.approvalStatus === "rejected";
   const readOnly = typeof out === "string" && out.includes("read-only");
   const shotUrl = screenshotDataUrl(out);
+  const retained = retainedScreenshotMetadata(out);
   const omittedMedia = mediaPreviewFact(out);
   const empty = out === "" || out == null;
   const batched = actions.length > 1 ? actions.map((a) => computerVerb(a)).join(" \xB7 ") : null;
@@ -3047,6 +3134,45 @@ function ComputerCallRenderer({ item }) {
   }
   const isFailed = item.status === "failed";
   const isCancelled = item.status === "cancelled";
+  if (retained) {
+    if (!retained.available) {
+      const state = retained.reason === "expired" || retained.reason === "deleted" ? retained.reason : "unavailable";
+      return /* @__PURE__ */ jsx10(
+        ActivityDisclosure,
+        {
+          icon: /* @__PURE__ */ jsx10(CameraOffIcon2, { className: ICON_SIZE }),
+          iconTone: isFailed ? "failed" : "muted",
+          title: `${verb}${countSuffix} \xB7 ${state}`,
+          failed: isFailed,
+          cancelled: isCancelled,
+          preview: `screenshot ${state}`,
+          media: /* @__PURE__ */ jsx10(MediaEmpty, {}),
+          children: /* @__PURE__ */ jsxs7(BodyNote, { tone: isFailed ? "error" : void 0, children: [
+            "Screenshot ",
+            state,
+            ": ",
+            retained.reason.replaceAll("_", " "),
+            "."
+          ] })
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx10(
+      RetainedSessionImageDisclosure,
+      {
+        artifact: retained,
+        load: loadRetainedScreenshot,
+        title: `${verb}${countSuffix}`,
+        caption: `${verb}${countSuffix}`,
+        noun: "screenshot",
+        icon: /* @__PURE__ */ jsx10(CameraIcon2, { className: ICON_SIZE }),
+        lightboxLabel: "Screenshot",
+        batched,
+        failed: isFailed,
+        cancelled: isCancelled
+      }
+    );
+  }
   if (shotUrl) {
     const caption = `${verb}${actions.length > 1 ? ` (+${actions.length - 1} more)` : ""}`;
     return /* @__PURE__ */ jsxs7(
@@ -3121,6 +3247,249 @@ function ComputerCallRenderer({ item }) {
     }
   );
 }
+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" });
+      return;
+    }
+    const controller = new AbortController();
+    let objectUrl = null;
+    setState({ kind: "loading" });
+    void load(stableArtifact, controller.signal).then((source) => {
+      if (controller.signal.aborted) return;
+      if (!source) {
+        setState({ kind: "unavailable", label: "bytes are unavailable" });
+        return;
+      }
+      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" }
+      );
+    });
+    return () => {
+      controller.abort();
+      if (objectUrl) URL.revokeObjectURL(objectUrl);
+    };
+  }, [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,
+      iconTone: failed ? "failed" : state.kind === "ready" ? "accent" : "muted",
+      title,
+      failed,
+      cancelled,
+      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,
+            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: [
+          noun === "screenshot" ? "Screenshot" : "Image",
+          " retrieval failed: ",
+          state.message
+        ] }),
+        batched ? /* @__PURE__ */ jsxs7(BodyNote, { children: [
+          "batched: ",
+          batched
+        ] }) : null
+      ]
+    }
+  );
+}
+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();
@@ -3219,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(
@@ -3241,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");
@@ -3331,7 +3741,7 @@ function SecretSetRenderer({ item }) {
         title: `Set ${name}`,
         running: true,
         preview: /* @__PURE__ */ jsx10(RunningPreview, { children: "setting\u2026" }),
-        children: /* @__PURE__ */ jsx10(PayloadBlock, { label: "Arguments", value: redactSecrets(args) })
+        children: /* @__PURE__ */ jsx10(PayloadBlock, { label: "Arguments", value: args })
       }
     );
   }
@@ -3346,7 +3756,7 @@ function SecretSetRenderer({ item }) {
         failed: true,
         preview: errorText ?? "variable write failed",
         children: [
-          /* @__PURE__ */ jsx10(PayloadBlock, { label: "Arguments", value: redactSecrets(args) }),
+          /* @__PURE__ */ jsx10(PayloadBlock, { label: "Arguments", value: args }),
           errorText ? /* @__PURE__ */ jsx10(PayloadBlock, { label: "Error", value: errorText, failed: true }) : /* @__PURE__ */ jsx10(BodyNote, { tone: "error", children: "the tool call failed with no output." })
         ]
       }
@@ -3359,10 +3769,10 @@ function SecretSetRenderer({ item }) {
       iconTone: "muted",
       title: `Set ${name}`,
       cancelled: item.status === "cancelled",
-      preview: "value write-only \xB7 never returned",
+      preview: "exact value preserved",
       children: [
-        /* @__PURE__ */ jsx10(PayloadBlock, { label: "Arguments", value: redactSecrets(args) }),
-        /* @__PURE__ */ jsx10(BodyNote, { children: "the value is a secret \u2014 redacted in every view; the API never returns it." })
+        /* @__PURE__ */ jsx10(PayloadBlock, { label: "Arguments", value: args }),
+        /* @__PURE__ */ jsx10(BodyNote, { children: "The configured value is preserved exactly and available through authorized secret reads." })
       ]
     }
   );
@@ -3472,7 +3882,7 @@ function ToolSearchRenderer({ item }) {
             "capability query: ",
             query2
           ] }) : null,
-          /* @__PURE__ */ jsx10(PayloadBlock, { label: "Arguments", value: redactSecrets(parseToolArgs(item.arguments)) })
+          /* @__PURE__ */ jsx10(PayloadBlock, { label: "Arguments", value: parseToolArgs(item.arguments) })
         ]
       }
     );
@@ -3492,7 +3902,7 @@ function ToolSearchRenderer({ item }) {
             "capability query: ",
             query2
           ] }) : null,
-          /* @__PURE__ */ jsx10(PayloadBlock, { label: "Arguments", value: redactSecrets(parseToolArgs(item.arguments)) }),
+          /* @__PURE__ */ jsx10(PayloadBlock, { label: "Arguments", value: parseToolArgs(item.arguments) }),
           /* @__PURE__ */ jsx10(PayloadBlock, { label: "Error", value: outText, failed: true })
         ]
       }
@@ -3524,7 +3934,7 @@ function ToolSearchRenderer({ item }) {
             " more"
           ] }) : null
         ] }) : tools && tools.length === 0 ? /* @__PURE__ */ jsx10(BodyNote, { children: "no deferred tools matched this capability query." }) : null,
-        /* @__PURE__ */ jsx10(PayloadBlock, { label: "Arguments", value: redactSecrets(parseToolArgs(item.arguments)) }),
+        /* @__PURE__ */ jsx10(PayloadBlock, { label: "Arguments", value: parseToolArgs(item.arguments) }),
         tools == null && outText ? /* @__PURE__ */ jsx10(PayloadBlock, { label: "Result", value: outText }) : null
       ]
     }
@@ -3544,7 +3954,7 @@ function DocsSearchRenderer({ item }) {
         title,
         running: true,
         preview: /* @__PURE__ */ jsx10(RunningPreview, { children: "Searching\u2026" }),
-        children: /* @__PURE__ */ jsx10(PayloadBlock, { label: "Arguments", value: redactSecrets(args) })
+        children: /* @__PURE__ */ jsx10(PayloadBlock, { label: "Arguments", value: args })
       }
     );
   }
@@ -3559,7 +3969,7 @@ function DocsSearchRenderer({ item }) {
         failed: true,
         preview: truncatePreview(outText, 80) || "Search failed",
         children: [
-          /* @__PURE__ */ jsx10(PayloadBlock, { label: "Arguments", value: redactSecrets(args) }),
+          /* @__PURE__ */ jsx10(PayloadBlock, { label: "Arguments", value: args }),
           /* @__PURE__ */ jsx10(PayloadBlock, { label: "Error", value: outText, failed: true })
         ]
       }
@@ -3580,7 +3990,7 @@ function DocsSearchRenderer({ item }) {
           /* @__PURE__ */ jsx10("div", { className: "truncate text-og-sm font-medium text-og-fg", children: hit.title }),
           hit.snippet ? /* @__PURE__ */ jsx10("div", { className: "mt-0.5 line-clamp-2 text-og-xs text-og-fg-muted", children: hit.snippet }) : null
         ] }, `${hit.title}\0${hit.snippet}`)) }) : null,
-        /* @__PURE__ */ jsx10(PayloadBlock, { label: "Arguments", value: redactSecrets(args) }),
+        /* @__PURE__ */ jsx10(PayloadBlock, { label: "Arguments", value: args }),
         /* @__PURE__ */ jsx10(PayloadBlock, { label: "Result", value: outText })
       ]
     }
@@ -3601,7 +4011,7 @@ function SetSessionTitleRenderer({ item }) {
         title: display,
         running: true,
         preview: previewTitle ? /* @__PURE__ */ jsx10(RunningPreview, { children: previewTitle }) : /* @__PURE__ */ jsx10(RunningPreview, { children: "Setting title\u2026" }),
-        children: /* @__PURE__ */ jsx10(PayloadBlock, { label: "Arguments", value: redactSecrets(args) })
+        children: /* @__PURE__ */ jsx10(PayloadBlock, { label: "Arguments", value: args })
       }
     );
   }
@@ -3616,7 +4026,7 @@ function SetSessionTitleRenderer({ item }) {
         failed: true,
         preview: truncatePreview(outText, 80) || "Rename failed",
         children: [
-          /* @__PURE__ */ jsx10(PayloadBlock, { label: "Arguments", value: redactSecrets(args) }),
+          /* @__PURE__ */ jsx10(PayloadBlock, { label: "Arguments", value: args }),
           /* @__PURE__ */ jsx10(PayloadBlock, { label: "Error", value: outText, failed: true })
         ]
       }
@@ -3641,7 +4051,7 @@ function SetSessionTitleRenderer({ item }) {
       cancelled: item.status === "cancelled",
       preview: item.status === "cancelled" ? void 0 : settledTitle || void 0,
       children: [
-        /* @__PURE__ */ jsx10(PayloadBlock, { label: "Arguments", value: redactSecrets(args) }),
+        /* @__PURE__ */ jsx10(PayloadBlock, { label: "Arguments", value: args }),
         outText ? /* @__PURE__ */ jsx10(PayloadBlock, { label: "Result", value: outText }) : null
       ]
     }
@@ -3677,7 +4087,7 @@ function MemoryProposeRenderer({ item }) {
         title,
         running: true,
         preview: /* @__PURE__ */ jsx10(RunningPreview, { children: "Proposing\u2026" }),
-        children: /* @__PURE__ */ jsx10(PayloadBlock, { label: "Arguments", value: redactSecrets(args) })
+        children: /* @__PURE__ */ jsx10(PayloadBlock, { label: "Arguments", value: args })
       }
     );
   }
@@ -3732,7 +4142,7 @@ function askToolPreview(args) {
   return questions.length > 1 ? `${preview} \xB7 ${questions.length} questions` : preview;
 }
 function AskRenderer({ item }) {
-  const args = redactSecrets(parseToolArgs(item.arguments));
+  const args = parseToolArgs(item.arguments);
   const preview = askToolPreview(args);
   const icon = /* @__PURE__ */ jsx10(MessageCircleQuestionIcon2, { className: ICON_SIZE });
   const title = "Ask";
@@ -3808,7 +4218,7 @@ function runOnOpPreview(args) {
 }
 function RunOnRenderer({ item }) {
   const parsedArgs = parseToolArgs(item.arguments);
-  const args = redactSecrets(parsedArgs);
+  const args = parsedArgs;
   const targetName = runOnTargetName(item.output);
   const title = targetName ? `Run on ${targetName}` : "Run on";
   const opPreview = runOnOpPreview(parsedArgs);
@@ -3860,7 +4270,7 @@ function RunOnRenderer({ item }) {
 }
 function GenericRenderer({ item }) {
   const running = item.status === "running";
-  const args = redactSecrets(parseToolArgs(item.arguments));
+  const args = parseToolArgs(item.arguments);
   const display = toolDisplayName(item.name);
   const icon = /* @__PURE__ */ jsx10(GenericToolIcon, { name: item.name });
   const goalPreview = goalToolPreview(item.name, args);
@@ -3938,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 },
@@ -3958,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 },
@@ -3973,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 useEffect6, useRef as useRef4, useState as useState8 } 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({
@@ -4032,10 +4396,10 @@ function CopyButton({
   className,
   reveal = "group-hover"
 }) {
-  const [copied, setCopied] = useState8(false);
-  const [tipOpen, setTipOpen] = useState8(false);
-  const timerRef = useRef4(null);
-  useEffect6(() => {
+  const [copied, setCopied] = useState9(false);
+  const [tipOpen, setTipOpen] = useState9(false);
+  const timerRef = useRef5(null);
+  useEffect7(() => {
     return () => {
       if (timerRef.current !== null) {
         clearTimeout(timerRef.current);
@@ -4089,7 +4453,7 @@ function CopyButton({
               "inline-flex size-7 shrink-0 items-center justify-center rounded-og-sm pointer-coarse:size-11",
               "text-og-fg-subtle transition-[opacity,color,background-color] duration-150",
               "hover:bg-og-surface-2/80 hover:text-og-fg",
-              "focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-og-accent/40",
+              "focus-visible:opacity-100 focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-og-accent/40",
               reveal === "group-hover" && "opacity-0 group-hover/copy:opacity-100 group-focus-within/copy:opacity-100 pointer-coarse:opacity-70",
               copied && "opacity-100 text-og-accent",
               className
@@ -4136,10 +4500,10 @@ import {
   Children,
   isValidElement,
   memo,
-  useEffect as useEffect7,
+  useEffect as useEffect8,
   useReducer,
-  useRef as useRef5,
-  useState as useState9
+  useRef as useRef6,
+  useState as useState10
 } from "react";
 import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
@@ -4599,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,
@@ -4621,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] = useState9(false);
-  const hadRevealRef = useRef5(false);
+  const [settling, setSettling] = useState10(false);
+  const hadRevealRef = useRef6(false);
   const now = typeof performance !== "undefined" ? performance.now() : Date.now();
   const crystallize = (mutate) => {
     mutate();
@@ -4645,7 +5009,7 @@ function MarkdownImpl({ children, className, streaming = false }) {
   }
   const revealActive = reveal !== null && (streaming || reveal.hasActive(now));
   const rehypePlugins = revealActive && reveal !== null ? [[rehypeStreamReveal, { reveal, now }]] : void 0;
-  useEffect7(() => {
+  useEffect8(() => {
     if (streaming || revealRef.current === null) {
       return;
     }
@@ -4671,8 +5035,8 @@ function MarkdownImpl({ children, className, streaming = false }) {
       }
     };
   }, [streaming]);
-  const wasStreamingRef = useRef5(streaming);
-  useEffect7(() => {
+  const wasStreamingRef = useRef6(streaming);
+  useEffect8(() => {
     const ended = wasStreamingRef.current && !streaming;
     wasStreamingRef.current = streaming;
     if (!ended || revealRef.current !== null || prefersReducedMotion()) {
@@ -4714,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
@@ -4752,6 +5116,8 @@ function ActivityRail({
   toolRegistry = defaultToolRegistry,
   onOpenSession,
   onMemoryClick,
+  loadRetainedScreenshot,
+  loadRetainedArtifact,
   bare,
   className
 }) {
@@ -4759,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) {
@@ -4796,11 +5162,19 @@ function ActivityRail({
       ),
       children: items.map((item, index) => {
         const newFamily = index > 0 && familyOf(item) !== familyOf(items[index - 1]);
-        const row = renderActivity(item, toolRegistry, onOpenSession, onMemoryClick);
+        const row = renderActivity(
+          item,
+          toolRegistry,
+          onOpenSession,
+          onMemoryClick,
+          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
           },
@@ -4813,13 +5187,20 @@ function ActivityRail({
 function assertNever(item) {
   throw new Error(`ActivityRail: unhandled activity item ${JSON.stringify(item)}`);
 }
-function renderActivity(item, toolRegistry, onOpenSession, onMemoryClick) {
+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 });
+      return /* @__PURE__ */ jsx13(ToolCallTruncationProvider, { value: item.truncation ?? null, children: /* @__PURE__ */ jsx13(
+        Renderer,
+        {
+          item,
+          loadRetainedScreenshot,
+          loadRetainedArtifact
+        }
+      ) });
     }
     case "worker":
       return /* @__PURE__ */ jsx13(WorkerRow, { item, onOpenSession });
@@ -4908,7 +5289,7 @@ function MemoryRow({
             onClick: () => onMemoryClick?.(targetId),
             className: cn(
               "group/memlink -mx-1 inline-flex w-fit items-center gap-1 rounded-og-sm px-1 py-0.5 text-left text-og-sm text-og-fg-subtle",
-              "outline-none transition-colors duration-150 hover:text-og-fg focus-visible:ring-2 focus-visible:ring-og-accent"
+              "outline-hidden transition-colors duration-150 hover:text-og-fg focus-visible:ring-2 focus-visible:ring-og-accent"
             ),
             children: [
               "View in memory",
@@ -4994,7 +5375,7 @@ function WorkerRow({
         onClick: () => onOpenSession(sessionId),
         className: cn(
           "group/worker -mx-1.5 flex w-full items-start gap-2 rounded-og-sm px-1.5 py-1.5 text-left",
-          "outline-none transition-colors duration-150 hover:bg-og-surface-1 focus-visible:ring-2 focus-visible:ring-og-accent",
+          "outline-hidden transition-colors duration-150 hover:bg-og-surface-1 focus-visible:ring-2 focus-visible:ring-og-accent",
           "pointer-coarse:min-h-11 pointer-coarse:py-2.5"
         ),
         children: inner
@@ -5008,21 +5389,21 @@ function WorkerRow({
 import { ChevronRightIcon as ChevronRightIcon2, CircleSlashIcon, TriangleAlertIcon as TriangleAlertIcon2 } from "lucide-react";
 import {
   Component,
-  createContext as createContext7,
-  useContext as useContext7,
-  useEffect as useEffect8,
+  createContext as createContext8,
+  useContext as useContext8,
+  useEffect as useEffect9,
   useMemo as useMemo4,
-  useRef as useRef8,
-  useState as useState10
+  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) {
@@ -5036,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",
@@ -5071,16 +5452,16 @@ function TurnSummary({
   const remembered = foldKey !== void 0 ? foldMemory?.get(foldKey) : void 0;
   const restingOpen = remembered === "closed" ? false : remembered === "open" ? true : defaultOpen ?? forcedDefaultOpen ?? false;
   const initialSettle = Boolean(settleFold) && !restingOpen && remembered === void 0;
-  const [settling, setSettling] = useState10(initialSettle);
-  const [open, setOpen] = useState10(initialSettle ? true : restingOpen);
-  const [settlePhase, setSettlePhase] = useState10(initialSettle);
-  const [nestSuppressLatch, setNestSuppressLatch] = useState10(initialSettle);
-  const [expandReady, setExpandReady] = useState10(!initialSettle);
-  const settleTimerRef = useRef8(null);
-  const settleCloseDoneRef = useRef8(null);
-  const nestLatchClearRef = useRef8(null);
-  const settleFoldSeenRef = useRef8(Boolean(settleFold));
-  const settleArmedRef = useRef8(false);
+  const [settling, setSettling] = useState11(initialSettle);
+  const [open, setOpen] = useState11(initialSettle ? true : restingOpen);
+  const [settlePhase, setSettlePhase] = useState11(initialSettle);
+  const [nestSuppressLatch, setNestSuppressLatch] = useState11(initialSettle);
+  const [expandReady, setExpandReady] = useState11(!initialSettle);
+  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);
@@ -5128,8 +5509,8 @@ function TurnSummary({
       }, SETTLE_COLLAPSE_MS);
     }, SETTLE_FOLD_BEAT_MS);
   };
-  const mountSettleRef = useRef8(initialSettle);
-  useEffect8(() => {
+  const mountSettleRef = useRef9(initialSettle);
+  useEffect9(() => {
     if (mountSettleRef.current) {
       armSettleCollapse();
     }
@@ -5138,7 +5519,7 @@ function TurnSummary({
       settleArmedRef.current = false;
     };
   }, []);
-  useEffect8(() => {
+  useEffect9(() => {
     const was = settleFoldSeenRef.current;
     settleFoldSeenRef.current = Boolean(settleFold);
     if (!was && settleFold) {
@@ -5173,7 +5554,7 @@ function TurnSummary({
     }
   };
   const enter = useEntranceAnimation();
-  const [allowEnterAnimation] = useState10(
+  const [allowEnterAnimation] = useState11(
     () => Boolean(enter && !bare && !initialSettle && !restingOpen)
   );
   const context = useMemo4(
@@ -5242,7 +5623,7 @@ function TurnSummary({
                   {
                     className: cn(
                       "size-3.5 shrink-0 text-og-fg-subtle transition-transform ease-og-in-out group-data-[state=open]:rotate-90",
-                      settlePhase ? "duration-[var(--og-duration-disclose-settle)]" : "duration-[var(--og-duration-disclose)]"
+                      settlePhase ? "duration-[var(--_og-duration-disclose-settle)]" : "duration-[var(--_og-duration-disclose)]"
                     )
                   }
                 ),
@@ -5465,13 +5846,13 @@ 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,
-  useState as useState11
+  useRef as useRef10,
+  useState as useState12
 } from "react";
 import { jsx as jsx15, jsxs as jsxs12 } from "react/jsx-runtime";
 var FALLBACK_LINE_THRESHOLD = 12;
@@ -5553,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
@@ -5565,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 [expanded, setExpanded] = useState11(
+  const disclosure = useContext9(UserMessageDisclosureContext);
+  const [expanded, setExpanded] = useState12(
     () => disclosure?.expandedByMessageId.get(messageId) ?? false
   );
-  const [collapsible, setCollapsible] = useState11(() => 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 [collapsible, setCollapsible] = useState12(() => userMessageLikelyNeedsDisclosure(text));
+  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(() => {
@@ -5724,7 +6105,7 @@ function UserMessageBody({ messageId, text, children, className }) {
             "aria-controls": contentId,
             "aria-expanded": expanded,
             "data-og-user-message-disclosure": "",
-            className: "mt-1.5 inline-flex min-h-7 items-center rounded-og-sm px-1.5 text-og-xs font-medium text-og-fg-muted outline-none transition-colors hover:bg-og-surface-3/60 hover:text-og-fg focus-visible:ring-2 focus-visible:ring-og-accent/45 pointer-coarse:min-h-11",
+            className: "mt-1.5 inline-flex min-h-7 items-center rounded-og-sm px-1.5 text-og-xs font-medium text-og-fg-muted outline-hidden transition-colors hover:bg-og-surface-3/60 hover:text-og-fg focus-visible:ring-2 focus-visible:ring-og-accent/45 pointer-coarse:min-h-11",
             onClick: (event) => toggle(event.currentTarget),
             children: expanded ? "Show less" : "Show more"
           }
@@ -5734,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",
@@ -5799,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
       ]
     }
@@ -5807,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(
@@ -5815,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
     }
   );
 }
@@ -5844,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 useEffect9,
+  useEffect as useEffect11,
   useLayoutEffect as useLayoutEffect4,
   useMemo as useMemo5,
-  useRef as useRef10,
-  useState as useState12
+  useRef as useRef11,
+  useState as useState14
 } from "react";
 
 // src/components/tip-follow.ts
@@ -6126,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";
@@ -6148,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]) => {
@@ -6179,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`;
@@ -6226,11 +6687,16 @@ function MessageTimeline({
   onOpenSession,
   onMemoryClick,
   onReconnect,
+  shouldRenderAuthNeeded,
   resolveProviderLogo,
   toolRegistry = defaultToolRegistry,
+  loadRetainedScreenshot,
+  loadRetainedArtifact,
+  loadVideoArtifactPlayback,
   computeLabel = null,
   turnSummary,
   autoFollow = true,
+  onAnnotate,
   hasOlder = false,
   loadingOlder = false,
   onLoadOlder,
@@ -6240,46 +6706,62 @@ function MessageTimeline({
   loadingNewer = false,
   onLoadNewer,
   onJumpToLatest,
+  trailingState,
   emptyState,
   className
 }) {
-  const resolvedItems = useMemo5(() => items ?? buildTimeline(events ?? []), [items, events]);
+  const resolvedItems = useMemo5(() => {
+    const projected = items ?? buildTimeline(events ?? []);
+    if (!shouldRenderAuthNeeded) {
+      return projected;
+    }
+    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] = useState12(true);
-  const [bulkActive, setBulkActive] = useState12(true);
-  const olderPrefetchArmedRef = useRef10(false);
-  const [olderPrefetchArmed, setOlderPrefetchArmed] = useState12(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] = useState12(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);
@@ -6289,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);
@@ -6479,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) {
@@ -6568,8 +7050,8 @@ function MessageTimeline({
     [cancelLeaveFallback, stopFollow, syncScrollBaseline, writeScrollTop]
   );
   driveFollowRef.current = driveFollow;
-  useEffect9(() => stopFollow, [stopFollow]);
-  useEffect9(() => () => cancelLeaveFallback(), [cancelLeaveFallback]);
+  useEffect11(() => stopFollow, [stopFollow]);
+  useEffect11(() => () => cancelLeaveFallback(), [cancelLeaveFallback]);
   useLayoutEffect4(() => {
     const node = scrollRef.current;
     if (!node) {
@@ -6722,7 +7204,7 @@ function MessageTimeline({
     const frame = requestFrame(() => setBulkActive(false));
     return () => cancelFrame(frame);
   }, [bulkRender, firstGroupKey]);
-  useEffect9(() => {
+  useEffect11(() => {
     const root = scrollRef.current;
     const target = topSentinelRef.current;
     if (!root || !target || !olderPrefetchArmed || !hasOlder || loadingOlder || !onLoadOlder || typeof IntersectionObserver === "undefined") {
@@ -6746,7 +7228,7 @@ function MessageTimeline({
     observer.observe(target);
     return () => observer.disconnect();
   }, [olderPrefetchArmed, hasOlder, loadingOlder, onLoadOlder, firstGroupKey]);
-  useEffect9(() => {
+  useEffect11(() => {
     const root = scrollRef.current;
     const target = bottomSentinelRef.current;
     if (!root || !target || !hasNewer || loadingNewer || !onLoadNewer || typeof IntersectionObserver === "undefined") {
@@ -6763,7 +7245,7 @@ function MessageTimeline({
     observer.observe(target);
     return () => observer.disconnect();
   }, [hasNewer, loadingNewer, onLoadNewer, firstGroupKey]);
-  useEffect9(() => {
+  useEffect11(() => {
     const node = scrollRef.current;
     const inner = node?.firstElementChild;
     if (!node || !inner || typeof ResizeObserver === "undefined") {
@@ -6799,7 +7281,7 @@ function MessageTimeline({
       }
     };
   }, [autoFollow, driveFollow, snapToBottom]);
-  useEffect9(() => {
+  useEffect11(() => {
     if (hasNewer) {
       stopFollow();
       applyPinned(false);
@@ -6922,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,
@@ -6939,15 +7429,15 @@ function MessageTimeline({
         className: cn(
           // tabIndex=-1 is programmatic only — never paint a focus ring on
           // the whole scroller (click + Shift used to flash a blue outline).
-          "min-h-0 flex-1 overflow-y-auto overscroll-contain px-4 py-6 sm:px-6 outline-none",
+          "min-h-0 flex-1 overflow-y-auto overscroll-contain px-4 py-6 sm:px-6 outline-hidden",
           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,
@@ -6961,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: [
@@ -6972,9 +7462,12 @@ function MessageTimeline({
                   onReconnect,
                   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,
@@ -6984,6 +7477,9 @@ function MessageTimeline({
                     onReconnect,
                     resolveProviderLogo,
                     toolRegistry,
+                    loadRetainedScreenshot,
+                    loadRetainedArtifact,
+                    loadVideoArtifactPlayback,
                     turnSummary,
                     foldLiveCluster: isAgentProgress(next),
                     trailingAgentText: trailingAgentTextAfterTurn(group, next),
@@ -6993,7 +7489,8 @@ function MessageTimeline({
               }
             ) }, key);
           }),
-          hasNewer ? /* @__PURE__ */ jsx17(
+          groups.length > 0 && trailingState ? /* @__PURE__ */ jsx18("div", { "data-og-timeline-trailing-state": "", children: trailingState }) : null,
+          hasNewer ? /* @__PURE__ */ jsx18(
             "div",
             {
               ref: bottomSentinelRef,
@@ -7006,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(
@@ -7020,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",
               {
@@ -7057,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"
                 ]
               }
@@ -7066,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 },
@@ -7076,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",
@@ -7118,13 +7615,13 @@ function MessageTimeline({
           }
         },
         className: cn(
-          "absolute bottom-4 left-1/2 -translate-x-1/2",
+          "absolute inset-x-0 bottom-4 mx-auto w-fit",
           "inline-flex items-center gap-1.5 rounded-full border border-og-border bg-og-surface-3/90 px-3 py-1.5",
           "text-og-control font-medium text-og-fg shadow-og-md backdrop-blur",
           "hover:border-og-border-strong"
         ),
         children: [
-          /* @__PURE__ */ jsx17(ArrowDownIcon2, { className: "size-3.5" }),
+          /* @__PURE__ */ jsx18(ArrowDownIcon2, { className: "size-3.5" }),
           "Jump to latest"
         ]
       }
@@ -7132,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) {
@@ -7206,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." })
             ] })
           ]
         }
@@ -7226,6 +7723,9 @@ var TimelineGroupView = memo2(function TimelineGroupView2({
   onReconnect,
   resolveProviderLogo,
   toolRegistry,
+  loadRetainedScreenshot,
+  loadRetainedArtifact,
+  loadVideoArtifactPlayback,
   turnSummary,
   insideTurn = false,
   nestClusterChips = false,
@@ -7237,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,
@@ -7250,20 +7751,22 @@ 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,
               onOpenSession,
               onMemoryClick,
               toolRegistry,
+              loadRetainedScreenshot,
+              loadRetainedArtifact,
               bare: true
             }
           );
         }
-        return /* @__PURE__ */ jsx17(
+        return /* @__PURE__ */ jsx18(
           TurnSummary,
           {
             items: group.items,
@@ -7274,13 +7777,15 @@ var TimelineGroupView = memo2(function TimelineGroupView2({
             foldKey: group.id,
             facets: turnSummary?.facets,
             contextCompactionCount,
-            children: /* @__PURE__ */ jsx17(
+            children: /* @__PURE__ */ jsx18(
               ActivityRail,
               {
                 items: group.items,
                 onOpenSession,
                 onMemoryClick,
                 toolRegistry,
+                loadRetainedScreenshot,
+                loadRetainedArtifact,
                 bare: true
               }
             )
@@ -7288,7 +7793,7 @@ var TimelineGroupView = memo2(function TimelineGroupView2({
           settleChrome ? "settle" : "rest"
         );
       }
-      return /* @__PURE__ */ jsx17(
+      return /* @__PURE__ */ jsx18(
         TurnSummary,
         {
           items: group.items,
@@ -7299,13 +7804,15 @@ 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,
               onOpenSession,
               onMemoryClick,
               toolRegistry,
+              loadRetainedScreenshot,
+              loadRetainedArtifact,
               bare: true
             }
           ) }) })
@@ -7317,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: [
@@ -7328,9 +7835,12 @@ var TimelineGroupView = memo2(function TimelineGroupView2({
               onReconnect,
               resolveProviderLogo,
               toolRegistry,
+              loadRetainedScreenshot,
+              loadRetainedArtifact,
+              loadVideoArtifactPlayback,
               turnSummary
             ],
-            children: /* @__PURE__ */ jsx17(
+            children: /* @__PURE__ */ jsx18(
               TimelineGroupView2,
               {
                 group: child,
@@ -7340,6 +7850,9 @@ var TimelineGroupView = memo2(function TimelineGroupView2({
                 onReconnect,
                 resolveProviderLogo,
                 toolRegistry,
+                loadRetainedScreenshot,
+                loadRetainedArtifact,
+                loadVideoArtifactPlayback,
                 turnSummary,
                 insideTurn: true,
                 nestClusterChips: nestClusters
@@ -7349,7 +7862,7 @@ var TimelineGroupView = memo2(function TimelineGroupView2({
           key
         );
       });
-      return /* @__PURE__ */ jsx17(
+      return /* @__PURE__ */ jsx18(
         TurnSummary,
         {
           items: activityItems,
@@ -7363,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;
   }
@@ -7421,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":
@@ -7546,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,
@@ -7592,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(
@@ -7602,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
       ]
     }
   ) });
@@ -7628,7 +8155,7 @@ function compactionSkipSubtitle(reason) {
   }
 }
 function MessageFooterTime({ occurredAt }) {
-  return /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx18(
     "time",
     {
       dateTime: occurredAt,
@@ -7646,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") {
@@ -7712,7 +8273,7 @@ function WorkerCompletionRow({
   onOpenSession
 }) {
   const enter = useEntranceAnimation();
-  const [open, setOpen] = useState12(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());
@@ -7722,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)
@@ -7739,34 +8300,34 @@ function WorkerCompletionRow({
           onClick: () => onOpenSession(item.childSessionId),
           className: cn(
             "-my-0.5 -mr-1 inline-flex shrink-0 items-center gap-1 rounded-og-sm px-2 py-1 text-og-sm font-medium text-og-fg-muted pointer-coarse:py-2",
-            "outline-none transition-colors duration-150 hover:bg-og-surface-2 hover:text-og-fg",
+            "outline-hidden transition-colors duration-150 hover:bg-og-surface-2 hover:text-og-fg",
             "focus-visible:ring-2 focus-visible:ring-og-accent"
           ),
           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",
           className: cn(
             "group/wc -mx-1 inline-flex w-fit items-center gap-1 rounded-og-sm px-1 py-0.5 text-og-xs font-medium text-og-fg-subtle",
-            "outline-none transition-colors duration-150 hover:text-og-fg-muted focus-visible:ring-2 focus-visible:ring-og-accent"
+            "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(
@@ -7792,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" })
       ]
     }
   );
@@ -7829,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(
@@ -7837,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)}` : ""
@@ -7846,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(
@@ -7862,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";
@@ -7906,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",
@@ -7939,12 +8597,15 @@ function AuthNeededRow({
   resolveProviderLogo
 }) {
   const enter = useEntranceAnimation();
-  const [busy, setBusy] = useState12(false);
-  const [failed, setFailed] = useState12(false);
-  const provider = 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;
@@ -7962,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,
@@ -7970,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(
@@ -7985,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
           ]
         }
@@ -8000,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",
@@ -8021,15 +8686,15 @@ function AuthNeededRow({
   ] });
 }
 function AuthProviderLogo({ src, label }) {
-  const [failed, setFailed] = useState12(false);
-  useEffect9(() => 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,
@@ -8039,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) })
     }
   );
 }
@@ -8103,7 +8768,6 @@ export {
   applyPatchOps,
   applyPatchOpsFromToolItem,
   isApplyPatch,
-  redactSecrets,
   parseToolArgs,
   tailPeek,
   unwrapMcpOutput,
@@ -8124,8 +8788,6 @@ export {
   PierreDiff,
   defaultToolRegistry,
   createDefaultToolRegistry,
-  copyTextToClipboard,
-  tableElementToTsv,
   CopyButton,
   CopyHoverFrame,
   Markdown,
@@ -8134,10 +8796,11 @@ export {
   TurnSummary,
   userMessageLikelyNeedsDisclosure,
   UserMessageBody,
+  GeneratedVideoPlayer,
   SESSION_STATUS_META,
   SessionStatus,
   StatusDot,
   MessageTimeline,
   TimelineRow
 };
-//# sourceMappingURL=chunk-LGVMUIRV.js.map
+//# sourceMappingURL=chunk-JAGDUCZQ.js.map