@opengeni/react 0.46.1 → 0.52.1

package/src/components/message-timeline.tsx

@@ -1,4 +1,9 @@
-import type { SessionEvent, SessionStatus } from "@opengeni/sdk";
+import type {
+  DraftTimelineAnnotation,
+  MediaGenerationResult,
+  SessionEvent,
+  SessionStatus,
+} from "@opengeni/sdk";
 import {
   ArrowDownIcon,
   ArrowRightIcon,
@@ -23,6 +28,8 @@ import { AnimatePresence, motion } from "motion/react";
 import { Collapsible } from "radix-ui";
 import {
   Component,
+  Suspense,
+  lazy,
   memo,
   useCallback,
   useEffect,
@@ -68,6 +75,10 @@ import {
   type NoticeItem,
   type TimelineGroup,
   type TimelineItem,
+  type TimelineAnnotationSourceDescriptor,
+  type RetainedArtifactLoader,
+  type RetainedScreenshotLoader,
+  type VideoArtifactPlaybackLoader,
   type ToolRegistry,
   type TurnSummaryOptions,
   type UserMessageItem,
@@ -80,6 +91,7 @@ import {
   useTurnSettleOpen,
 } from "../timeline";
 import { CopyHoverFrame } from "./copy-button";
+import { GeneratedVideoPlayer } from "./generated-video-player";
 import {
   MACHINE_INPUT_META,
   cleanMachineInputSummary,
@@ -91,8 +103,11 @@ import { SESSION_STATUS_META, StatusDot } from "./session-status";
 import { TimelineComputeLabelProvider } from "../timeline/compute-label";
 import { EntranceAnimationProvider, useEntranceAnimation } from "../timeline/entrance";
 import { SeenActivityIdsProvider } from "../timeline/seen-activity-ids";
+import { TimelineAnnotationsChip } from "./timeline-annotations";
 import { TooltipProvider } from "./tooltip";
 
+const TimelineAnnotationSelection = lazy(() => import("./timeline-annotation-selection"));
+
 export type MessageTimelineProps = {
   /** Raw session events (projected internally) … */
   events?: SessionEvent[] | undefined;
@@ -123,6 +138,12 @@ export type MessageTimelineProps = {
    * a Reconnect button without a handler to run it.
    */
   onReconnect?: ((item: AuthNeededItem) => void | Promise<void>) | undefined;
+  /**
+   * Decide which durable authentication notices this timeline presents.
+   * Defaults to showing every notice. Embedded hosts can suppress notices for
+   * credentials they manage elsewhere without discarding the underlying event.
+   */
+  shouldRenderAuthNeeded?: ((item: AuthNeededItem) => boolean) | undefined;
   /**
    * Resolve a provider domain (from a reconnect card) to a logo URL the host
    * serves itself — the app maps it through its catalog + `catalogAssetUrl`.
@@ -137,6 +158,12 @@ export type MessageTimelineProps = {
    * `createDefaultToolRegistry({ entries })` to add custom tool renderers.
    */
   toolRegistry?: ToolRegistry | undefined;
+  /** Resolve opaque retained screenshot receipts through the authenticated host SDK. */
+  loadRetainedScreenshot?: RetainedScreenshotLoader | undefined;
+  /** Resolve permanent generated-image receipts through the authenticated host SDK. */
+  loadRetainedArtifact?: RetainedArtifactLoader | undefined;
+  /** Mint short-lived native playback sources for retained generated videos. */
+  loadVideoArtifactPlayback?: VideoArtifactPlaybackLoader | undefined;
   /**
    * Display name of the session's active compute target (Connected Machine or
    * cloud sandbox). When set, exec_command collapsed previews prefix `on {label}`.
@@ -146,6 +173,8 @@ export type MessageTimelineProps = {
   turnSummary?: TurnSummaryOptions | undefined;
   /** Follow new events when pinned to the bottom. Defaults to true. */
   autoFollow?: boolean | undefined;
+  /** Capture a same-row text selection into the host's canonical composer draft. */
+  onAnnotate?: ((annotation: DraftTimelineAnnotation) => void) | undefined;
   /** Older durable history exists above the current window (see useSessionEvents). */
   hasOlder?: boolean | undefined;
   /** An older window is being fetched; shows the quiet top shimmer. */
@@ -167,6 +196,8 @@ export type MessageTimelineProps = {
    * scrolls the in-memory window.
    */
   onJumpToLatest?: (() => void | Promise<void>) | undefined;
+  /** Host-owned content appended after timeline groups, such as startup progress. */
+  trailingState?: ReactNode | undefined;
   emptyState?: ReactNode | undefined;
   className?: string | undefined;
 };
@@ -277,11 +308,16 @@ export function MessageTimeline({
   onOpenSession,
   onMemoryClick,
   onReconnect,
+  shouldRenderAuthNeeded,
   resolveProviderLogo,
   toolRegistry = defaultToolRegistry,
+  loadRetainedScreenshot,
+  loadRetainedArtifact,
+  loadVideoArtifactPlayback,
   computeLabel = null,
   turnSummary,
   autoFollow = true,
+  onAnnotate,
   hasOlder = false,
   loadingOlder = false,
   onLoadOlder,
@@ -291,11 +327,32 @@ export function MessageTimeline({
   loadingNewer = false,
   onLoadNewer,
   onJumpToLatest,
+  trailingState,
   emptyState,
   className,
 }: MessageTimelineProps) {
-  const resolvedItems = useMemo(() => items ?? buildTimeline(events ?? []), [items, events]);
+  const resolvedItems = useMemo(() => {
+    const projected = items ?? buildTimeline(events ?? []);
+    if (!shouldRenderAuthNeeded) {
+      return projected;
+    }
+    return projected.filter((item) => item.kind !== "auth-needed" || shouldRenderAuthNeeded(item));
+  }, [items, events, shouldRenderAuthNeeded]);
   const allGroups = useMemo(() => groupTimeline(resolvedItems), [resolvedItems]);
+  const annotationSources = useMemo(() => {
+    const sources = new Map<string, TimelineAnnotationSourceDescriptor>();
+    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 = useRef<HTMLDivElement | null>(null);
   const topSentinelRef = useRef<HTMLDivElement | null>(null);
@@ -1262,6 +1319,15 @@ export function MessageTimeline({
             <EntranceAnimationProvider value={!bulkRender}>
               <TooltipProvider delayDuration={400}>
                 <div className={cn("og-root relative flex min-h-0 flex-col", className)}>
+                  {onAnnotate ? (
+                    <Suspense fallback={null}>
+                      <TimelineAnnotationSelection
+                        rootRef={scrollRef}
+                        sources={annotationSources}
+                        onAnnotate={onAnnotate}
+                      />
+                    </Suspense>
+                  ) : null}
                   {/* Pinned: anchoring off so the tip-follow camera owns the motion.
           Unpinned: native scroll anchoring holds the reader's place. */}
                   <div
@@ -1278,7 +1344,7 @@ export 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]",
@@ -1325,6 +1391,9 @@ export function MessageTimeline({
                                 onReconnect,
                                 resolveProviderLogo,
                                 toolRegistry,
+                                loadRetainedScreenshot,
+                                loadRetainedArtifact,
+                                loadVideoArtifactPlayback,
                                 turnSummary,
                               ]}
                             >
@@ -1337,6 +1406,9 @@ export function MessageTimeline({
                                   onReconnect={onReconnect}
                                   resolveProviderLogo={resolveProviderLogo}
                                   toolRegistry={toolRegistry}
+                                  loadRetainedScreenshot={loadRetainedScreenshot}
+                                  loadRetainedArtifact={loadRetainedArtifact}
+                                  loadVideoArtifactPlayback={loadVideoArtifactPlayback}
                                   turnSummary={turnSummary}
                                   foldLiveCluster={isAgentProgress(next)}
                                   trailingAgentText={trailingAgentTextAfterTurn(group, next)}
@@ -1349,6 +1421,9 @@ export function MessageTimeline({
                           </div>
                         );
                       })}
+                      {groups.length > 0 && trailingState ? (
+                        <div data-og-timeline-trailing-state="">{trailingState}</div>
+                      ) : null}
                       {hasNewer ? (
                         <div
                           ref={bottomSentinelRef}
@@ -1502,7 +1577,7 @@ export 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",
@@ -1677,6 +1752,9 @@ const TimelineGroupView = memo(function TimelineGroupView({
   onReconnect,
   resolveProviderLogo,
   toolRegistry,
+  loadRetainedScreenshot,
+  loadRetainedArtifact,
+  loadVideoArtifactPlayback,
   turnSummary,
   insideTurn = false,
   nestClusterChips = false,
@@ -1693,6 +1771,9 @@ const TimelineGroupView = memo(function TimelineGroupView({
   onReconnect?: ((item: AuthNeededItem) => void | Promise<void>) | undefined;
   resolveProviderLogo?: ((providerDomain: string) => string | null | undefined) | undefined;
   toolRegistry: ToolRegistry;
+  loadRetainedScreenshot?: RetainedScreenshotLoader | undefined;
+  loadRetainedArtifact?: RetainedArtifactLoader | undefined;
+  loadVideoArtifactPlayback?: VideoArtifactPlaybackLoader | undefined;
   turnSummary?: TurnSummaryOptions | undefined;
   /** A completed cluster of a still-RUNNING turn (not the live tail) folds
       behind a neutral chip — the one place activity without an outcome still
@@ -1727,13 +1808,16 @@ const TimelineGroupView = memo(function TimelineGroupView({
   const activityShouldFold =
     group.kind === "activity" &&
     Boolean(group.outcome || (foldLiveCluster && clusterIsSettled(group)));
+  const containsGeneratedImage = timelineGroupContainsGeneratedImage(group);
   // Latch live→folded so a top-level shell that was already mounted open can
   // start the settle beat without remounting bare rail → wrapper.
   const liveActivitySettle = useLiveSettleFold(activityShouldFold && !insideTurn);
   const turnDefaultOpen =
     !insideTurn &&
     group.kind === "turn" &&
-    (group.outcome === "failed" || timelineGroupContainsAuthNeeded(group));
+    (group.outcome === "failed" ||
+      timelineGroupContainsAuthNeeded(group) ||
+      containsGeneratedImage);
   // activity-* → turn-* remount: carry resting state so settleFold does not
   // re-open a chip the reader already watched collapse.
   if (group.kind === "turn" && foldMemory && !insideTurn) {
@@ -1758,7 +1842,7 @@ const TimelineGroupView = memo(function TimelineGroupView({
         // settled closed pre-wrap was showing as a CHIP, so mounting it closed
         // is both the stable height and the honest state — force-opening it
         // was the "already-collapsed cluster auto-expands at the end" reopen.
-        const useNestedChip = nestClusterChips && activityShouldFold;
+        const useNestedChip = nestClusterChips && activityShouldFold && !containsGeneratedImage;
         if (!useNestedChip) {
           return (
             <ActivityRail
@@ -1766,6 +1850,8 @@ const TimelineGroupView = memo(function TimelineGroupView({
               onOpenSession={onOpenSession}
               onMemoryClick={onMemoryClick}
               toolRegistry={toolRegistry}
+              loadRetainedScreenshot={loadRetainedScreenshot}
+              loadRetainedArtifact={loadRetainedArtifact}
               bare
             />
           );
@@ -1787,6 +1873,8 @@ const TimelineGroupView = memo(function TimelineGroupView({
               onOpenSession={onOpenSession}
               onMemoryClick={onMemoryClick}
               toolRegistry={toolRegistry}
+              loadRetainedScreenshot={loadRetainedScreenshot}
+              loadRetainedArtifact={loadRetainedArtifact}
               bare
             />
           </TurnSummary>
@@ -1812,6 +1900,8 @@ const TimelineGroupView = memo(function TimelineGroupView({
                 onOpenSession={onOpenSession}
                 onMemoryClick={onMemoryClick}
                 toolRegistry={toolRegistry}
+                loadRetainedScreenshot={loadRetainedScreenshot}
+                loadRetainedArtifact={loadRetainedArtifact}
                 bare
               />
             </TurnRailFrame>
@@ -1838,6 +1928,9 @@ const TimelineGroupView = memo(function TimelineGroupView({
               onReconnect,
               resolveProviderLogo,
               toolRegistry,
+              loadRetainedScreenshot,
+              loadRetainedArtifact,
+              loadVideoArtifactPlayback,
               turnSummary,
             ]}
           >
@@ -1849,6 +1942,9 @@ const TimelineGroupView = memo(function TimelineGroupView({
               onReconnect={onReconnect}
               resolveProviderLogo={resolveProviderLogo}
               toolRegistry={toolRegistry}
+              loadRetainedScreenshot={loadRetainedScreenshot}
+              loadRetainedArtifact={loadRetainedArtifact}
+              loadVideoArtifactPlayback={loadVideoArtifactPlayback}
               turnSummary={turnSummary}
               insideTurn
               nestClusterChips={nestClusters}
@@ -1890,6 +1986,7 @@ const TimelineGroupView = memo(function TimelineGroupView({
           onReconnect={onReconnect}
           resolveProviderLogo={resolveProviderLogo}
           onOpenSession={onOpenSession}
+          loadVideoArtifactPlayback={loadVideoArtifactPlayback}
         />
       );
   }
@@ -1953,6 +2050,20 @@ function timelineGroupContainsAuthNeeded(group: TimelineGroup): boolean {
   }
 }
 
+/** Generated images are primary user-visible output, not incidental activity. */
+function timelineGroupContainsGeneratedImage(group: TimelineGroup): boolean {
+  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: TimelineGroup): string[] {
   switch (group.kind) {
     case "item":
@@ -2124,6 +2235,7 @@ export function TimelineRow({
   onReconnect,
   resolveProviderLogo,
   onOpenSession,
+  loadVideoArtifactPlayback,
 }: {
   item: TimelineItem;
   renderMessageText?:
@@ -2132,6 +2244,7 @@ export function TimelineRow({
   onReconnect?: ((item: AuthNeededItem) => void | Promise<void>) | undefined;
   resolveProviderLogo?: ((providerDomain: string) => string | null | undefined) | undefined;
   onOpenSession?: ((sessionId: string) => void) | undefined;
+  loadVideoArtifactPlayback?: VideoArtifactPlaybackLoader | undefined;
 }) {
   switch (item.kind) {
     case "user-message":
@@ -2145,7 +2258,9 @@ export function TimelineRow({
     case "goal":
       return <GoalRow item={item} />;
     case "machine-input-batch":
-      return <MachineInputBatchRow item={item} />;
+      return (
+        <MachineInputBatchRow item={item} loadVideoArtifactPlayback={loadVideoArtifactPlayback} />
+      );
     case "notice":
       return <NoticeRow item={item} />;
     case "context-compaction":
@@ -2265,25 +2380,71 @@ function UserMessageRow({
     | undefined;
 }) {
   const enter = useEntranceAnimation();
+  const deliveryLabel =
+    item.delivery?.state === "sending"
+      ? "Sending…"
+      : item.delivery?.state === "queued"
+        ? "Queued"
+        : item.delivery?.state === "failed"
+          ? "Not sent"
+          : null;
   return (
     <div className={cn(enter && "animate-og-enter", "flex justify-end")}>
       <div className="flex max-w-[85%] min-w-0 flex-col items-end gap-1">
         <CopyHoverFrame
-          copyText={item.text}
+          copyText={
+            item.text ||
+            (item.annotations ?? [])
+              .map((annotation) => `${annotation.quote}\n${annotation.note}`)
+              .join("\n\n")
+          }
           label="Copy message"
           className="w-fit max-w-full min-w-0"
           trailing={<MessageFooterTime occurredAt={item.occurredAt} />}
         >
           <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">
-            {renderMessageText ? (
-              renderMessageText(item.text, item)
-            ) : (
-              <UserMessageBody messageId={item.id} text={item.text}>
-                <Markdown>{item.text}</Markdown>
-              </UserMessageBody>
-            )}
+            {item.text ? (
+              <div data-og-annotation-source-key={item.annotationSource?.eventId}>
+                {renderMessageText ? (
+                  renderMessageText(item.text, item)
+                ) : (
+                  <UserMessageBody messageId={item.id} text={item.text}>
+                    <Markdown>{item.text}</Markdown>
+                  </UserMessageBody>
+                )}
+              </div>
+            ) : null}
+            {(item.annotations?.length ?? 0) > 0 ? (
+              <TimelineAnnotationsChip
+                annotations={item.annotations ?? []}
+                className={item.text ? "mt-2" : undefined}
+              />
+            ) : null}
           </div>
         </CopyHoverFrame>
+        {deliveryLabel ? (
+          <div className="flex max-w-full items-center gap-2 px-1 text-og-xs text-og-fg-subtle">
+            <span title={item.delivery?.error}>{deliveryLabel}</span>
+            {item.delivery?.state === "failed" && item.delivery.onRetry ? (
+              <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}
+              >
+                Retry
+              </button>
+            ) : null}
+            {item.delivery?.state === "failed" && item.delivery.onRemove ? (
+              <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}
+              >
+                Remove
+              </button>
+            ) : null}
+          </div>
+        ) : null}
       </div>
     </div>
   );
@@ -2309,15 +2470,17 @@ function AgentMessageRow({
   // While streaming, copy is still useful (current text) but keep chrome calm —
   // stamp only after the message finishes (occurredAt tracks completion).
   return (
-    <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 : <MessageFooterTime occurredAt={item.occurredAt} />}
-    >
-      {body}
-    </CopyHoverFrame>
+    <div data-og-annotation-source-key={item.annotationSource?.eventId}>
+      <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 : <MessageFooterTime occurredAt={item.occurredAt} />}
+      >
+        {body}
+      </CopyHoverFrame>
+    </div>
   );
 }
 
@@ -2428,7 +2591,7 @@ 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",
               )}
             >
@@ -2444,7 +2607,7 @@ function WorkerCompletionRow({
                 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",
                 )}
               >
                 <ChevronRightIcon className="size-3 transition-transform duration-150 ease-og-in-out group-data-[state=open]/wc:rotate-90" />
@@ -2567,10 +2730,24 @@ function GoalRow({ item }: { item: GoalItem }) {
   );
 }
 
-function MachineInputBatchRow({ item }: { item: MachineInputBatchItem }) {
+function MachineInputBatchRow({
+  item,
+  loadVideoArtifactPlayback,
+}: {
+  item: MachineInputBatchItem;
+  loadVideoArtifactPlayback?: VideoArtifactPlaybackLoader | undefined;
+}) {
   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 (
+      <VideoGenerationResultRow
+        result={single.result}
+        loadVideoArtifactPlayback={loadVideoArtifactPlayback}
+      />
+    );
+  }
   const singleSummary = single ? cleanMachineInputSummary(single.summary) : "";
   const showCollapsedSummary =
     single != null && machineInputSummaryIsUseful(single.kind, singleSummary);
@@ -2594,7 +2771,11 @@ function MachineInputBatchRow({ item }: { item: MachineInputBatchItem }) {
         </summary>
         <div className="mx-auto mt-2 w-full max-w-lg space-y-2 border-t border-og-border/50 pt-2">
           {item.members.map((member) => (
-            <MachineInputRow key={member.id} member={member} />
+            <MachineInputRow
+              key={member.id}
+              member={member}
+              loadVideoArtifactPlayback={loadVideoArtifactPlayback}
+            />
           ))}
         </div>
       </details>
@@ -2607,7 +2788,22 @@ function MachineInputBatchRow({ item }: { item: MachineInputBatchItem }) {
   );
 }
 
-function MachineInputRow({ member }: { member: MachineInputBatchItem["members"][number] }) {
+function MachineInputRow({
+  member,
+  loadVideoArtifactPlayback,
+}: {
+  member: MachineInputBatchItem["members"][number];
+  loadVideoArtifactPlayback?: VideoArtifactPlaybackLoader | undefined;
+}) {
+  if (member.kind === "media_generation_result" && member.result) {
+    return (
+      <VideoGenerationResultRow
+        result={member.result}
+        loadVideoArtifactPlayback={loadVideoArtifactPlayback}
+        compact
+      />
+    );
+  }
   const source = readableMachineInputSource(member.sourceId);
   const summary = cleanMachineInputSummary(member.summary);
   return (
@@ -2628,6 +2824,72 @@ function MachineInputRow({ member }: { member: MachineInputBatchItem["members"][
   );
 }
 
+function VideoGenerationResultRow({
+  result,
+  loadVideoArtifactPlayback,
+  compact = false,
+}: {
+  result: MediaGenerationResult;
+  loadVideoArtifactPlayback?: VideoArtifactPlaybackLoader | undefined;
+  compact?: boolean | undefined;
+}) {
+  const enter = useEntranceAnimation();
+  if (result.status !== "ready") {
+    return (
+      <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",
+        )}
+      >
+        <div className="flex items-center gap-2 text-og-sm font-medium text-og-status-failed">
+          <XCircleIcon aria-hidden className="size-4" />
+          Video generation failed
+        </div>
+        <p className="mt-1 text-og-sm leading-5 text-og-fg-muted">{result.boundedPublicReason}</p>
+      </div>
+    );
+  }
+  const { receipt } = result;
+  const facts = receipt.video;
+  return (
+    <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",
+      )}
+    >
+      {loadVideoArtifactPlayback ? (
+        <GeneratedVideoPlayer
+          receipt={receipt}
+          loadPlaybackSource={loadVideoArtifactPlayback}
+          className="rounded-none border-0 shadow-none"
+        />
+      ) : (
+        <div className="flex aspect-video items-center justify-center bg-og-surface-2 text-og-fg-subtle">
+          <PlayIcon aria-hidden className="size-6" />
+        </div>
+      )}
+      <div className="flex items-center justify-between gap-4 px-3.5 py-2.5">
+        <div className="min-w-0">
+          <p className="text-og-sm font-medium text-og-fg">Generated video</p>
+          <p className="truncate text-og-xs text-og-fg-subtle">
+            {facts.width}×{facts.height} · {formatVideoDuration(facts.durationSeconds)}
+            {facts.hasAudio ? " · Audio" : ""}
+          </p>
+        </div>
+        <CheckCircle2Icon aria-label="Ready" className="size-4 shrink-0 text-og-status-success" />
+      </div>
+    </section>
+  );
+}
+
+function formatVideoDuration(seconds: number): string {
+  return `${Math.round(seconds * 10) / 10}s`;
+}
+
 function NoticeRow({ item }: { item: NoticeItem }) {
   const enter = useEntranceAnimation();
   const tone =
@@ -2693,13 +2955,32 @@ function AuthNeededRow({
   const enter = useEntranceAnimation();
   const [busy, setBusy] = useState(false);
   const [failed, setFailed] = useState(false);
-  const provider = providerLabel(item.providerDomain);
+  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) {
@@ -2728,10 +3009,18 @@ function AuthNeededRow({
             label={provider}
           />
           <div className="min-w-0">
-            <p className="truncate text-og-md font-medium text-og-fg">
-              {unavailable ? `${provider} tools unavailable` : `${actionLabel} ${provider}`}
-            </p>
-            <p className="truncate text-og-sm text-og-fg-subtle">{authReasonLine(item.reason)}</p>
+            <p className="truncate text-og-md font-medium text-og-fg">{title}</p>
+            <p className="line-clamp-2 text-og-sm text-og-fg-subtle">{reasonLine}</p>
+            {recommendation ? (
+              <p className="mt-1 truncate text-og-xs text-og-fg-muted">
+                Provider: {item.providerDomain}
+              </p>
+            ) : null}
+            {recommendation && recommendation.requiredVariables.length > 0 ? (
+              <p className="mt-1 truncate text-og-xs text-og-fg-muted">
+                Needs variables: {recommendation.requiredVariables.join(", ")}
+              </p>
+            ) : null}
           </div>
         </div>
         {!unavailable && onReconnect ? (
@@ -2764,8 +3053,9 @@ function AuthNeededRow({
       </div>
       {!unavailable ? (
         <p className="px-1 text-og-xs text-og-fg-subtle">
-          This tool call wasn't replayed. After {missing ? "connecting" : "reconnecting"}, send a
-          new message to try again.
+          {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.`}
         </p>
       ) : null}
       {failed ? (