@opengeni/react 0.48.0 → 0.57.0

package/src/timeline/projection.ts

@@ -1,5 +1,10 @@
-import type { SessionEvent, SessionStatus } from "@opengeni/sdk";
-const { default: fleetDecisionItem } = await import("./fleet-decision-projection");
+import {
+  parseMediaGenerationResult,
+  type SessionEvent,
+  type SessionStatus,
+  type TimelineAnnotation,
+} from "@opengeni/sdk";
+import fleetDecisionItem from "./fleet-decision-projection";
 import {
   CREDIT_EXHAUSTION_MESSAGE,
   humanizeFailureReason,
@@ -21,6 +26,7 @@ import type {
   TimelineItem,
   TurnEndItem,
   ToolCallItem,
+  ToolCallTruncation,
   WorkerItem,
 } from "./types";
 
@@ -43,6 +49,8 @@ export { toolDisplayName, mcpToolLeaf, toolMatchesLeaf } from "./tool-display-na
 /** Tool leaves on the first-party OpenGeni MCP server that operate on sessions. */
 const WORKER_SPAWN_TOOL = "session_create";
 const WORKER_MESSAGE_TOOL = "session_send_message";
+const WORKER_FAILURE_CODE_MAX_LENGTH = 128;
+const WORKER_FAILURE_MESSAGE_MAX_UTF8_BYTES = 1_024;
 
 /**
  * Tools whose durable side-effect events already own the timeline (MemoryRow).
@@ -61,6 +69,56 @@ const WORKER_MESSAGE_TOOL = "session_send_message";
  * render as machine-input rows.
  */
 const LANDMARK_ONLY_TOOL_LEAVES = new Set(["memory_save", "memory_correct"]);
+const TIMELINE_ANNOTATION_ANSI_SEQUENCE = new RegExp("\\u001B\\[[0-?]*[ -/]*[@-~]", "g");
+
+function safeTimelineAnnotationJson(value: unknown): string {
+  try {
+    return JSON.stringify(value) ?? "";
+  } catch {
+    return String(value ?? "");
+  }
+}
+
+function timelineAnnotationToolOutputValue(value: unknown, depth = 0): string {
+  if (depth > 8 || value === null || value === undefined) {
+    return value == null ? "" : safeTimelineAnnotationJson(value);
+  }
+  if (typeof value === "string") return value;
+  if (typeof value !== "object" || Array.isArray(value)) {
+    return safeTimelineAnnotationJson(value);
+  }
+  const record = value as Record<string, unknown>;
+  if (record.type === "text" && typeof record.text === "string") return record.text;
+  if (Array.isArray(record.content)) {
+    const text = record.content.find(
+      (part) =>
+        part !== null &&
+        typeof part === "object" &&
+        (part as { type?: unknown }).type === "text" &&
+        typeof (part as { text?: unknown }).text === "string",
+    ) as { text: string } | undefined;
+    if (text) return text.text;
+  }
+  if ("structuredContent" in record) {
+    return timelineAnnotationToolOutputValue(record.structuredContent, depth + 1);
+  }
+  if ("result" in record) return timelineAnnotationToolOutputValue(record.result, depth + 1);
+  return safeTimelineAnnotationJson(value);
+}
+
+/** Browser mirror of the server's canonical annotation source projection. */
+function timelineAnnotationToolOutputText(output: unknown): string | null {
+  const raw = timelineAnnotationToolOutputValue(output);
+  const marker = raw.indexOf("\nOutput:\n");
+  const text = (
+    marker >= 0
+      ? raw.slice(marker + "\nOutput:\n".length)
+      : raw.startsWith("Output:\n")
+        ? raw.slice("Output:\n".length)
+        : raw
+  ).replace(TIMELINE_ANNOTATION_ANSI_SEQUENCE, "");
+  return text.length > 0 ? text : null;
+}
 
 export function buildTimeline(events: SessionEvent[]): TimelineItem[] {
   const items: TimelineItem[] = [];
@@ -134,6 +192,15 @@ export function buildTimeline(events: SessionEvent[]): TimelineItem[] {
           kind: "user-message",
           id: event.id,
           text: voiceMessage?.text ?? stringValue(payload.text),
+          annotations: timelineAnnotations(payload.annotations),
+          annotationSource: {
+            kind: "user_message",
+            eventId: event.id,
+            eventType: "user.message",
+            sequence: event.sequence,
+            turnId,
+            text: voiceMessage?.text ?? stringValue(payload.text),
+          },
           ...(voiceMessage ? { presentation: voiceMessage.presentation } : {}),
           resources: resourceRefs(payload.resources),
           tools: toolRefs(payload.tools),
@@ -212,6 +279,17 @@ export function buildTimeline(events: SessionEvent[]): TimelineItem[] {
           // Completion time is what the footer shows ("finished at"); keep the
           // first-delta stamp only until this event arrives.
           open.occurredAt = event.occurredAt;
+          open.annotationSource =
+            text && open.text === text
+              ? {
+                  kind: "assistant_message",
+                  eventId: event.id,
+                  eventType: "agent.message.completed",
+                  sequence: event.sequence,
+                  turnId,
+                  text,
+                }
+              : undefined;
           // The SDK can emit a hosted-tool item only after its provider-native
           // operation has completed, even though answer deltas were already
           // streamed. The completed message event is the durable ordering
@@ -231,6 +309,14 @@ export function buildTimeline(events: SessionEvent[]): TimelineItem[] {
             text,
             streaming: false,
             occurredAt: event.occurredAt,
+            annotationSource: {
+              kind: "assistant_message",
+              eventId: event.id,
+              eventType: "agent.message.completed",
+              sequence: event.sequence,
+              turnId,
+              text,
+            },
           });
         }
         break;
@@ -275,6 +361,7 @@ export function buildTimeline(events: SessionEvent[]): TimelineItem[] {
             action: toolMatchesLeaf(name, WORKER_SPAWN_TOOL) ? "spawn" : "message",
             prompt: workerPrompt(args),
             workerSessionId: extractSessionRef(args),
+            failure: null,
             status: "running",
             occurredAt: event.occurredAt,
           });
@@ -312,6 +399,7 @@ export function buildTimeline(events: SessionEvent[]): TimelineItem[] {
           name,
           arguments: args,
           output: undefined,
+          truncation: null,
           // The provider-native item drives the per-tool renderers (apply_patch
           // operation, computer_call action, web_search providerData, …).
           raw: payload.raw,
@@ -332,12 +420,35 @@ export function buildTimeline(events: SessionEvent[]): TimelineItem[] {
           // isError result) settles to "failed" too, so WorkerRow surfaces it.
           target.status = isErrorOutput(payload) ? "failed" : "complete";
           target.workerSessionId = target.workerSessionId ?? extractSessionRef(payload.output);
+          target.failure = target.status === "failed" ? workerFailure(payload.output) : null;
           break;
         }
         // An output carrying an explicit error flag (or an MCP isError result)
         // settles the tool to "failed" so the renderer can surface it loudly.
+        const truncation = toolCallTruncation(payload);
         target.status = isErrorOutput(payload) ? "failed" : "complete";
-        target.output = payload.output;
+        target.output = Object.prototype.hasOwnProperty.call(payload, "output")
+          ? payload.output
+          : truncation && typeof payload.preview === "string"
+            ? payload.preview
+            : payload.output;
+        target.truncation = truncation;
+        const sourceText = timelineAnnotationToolOutputText(
+          Object.prototype.hasOwnProperty.call(payload, "output")
+            ? payload.output
+            : payload.preview,
+        );
+        if (sourceText !== null) {
+          target.annotationSource = {
+            kind: "tool_output",
+            eventId: event.id,
+            eventType: "agent.toolCall.output",
+            sequence: event.sequence,
+            turnId,
+            text: sourceText,
+            label: target.name,
+          };
+        }
         break;
       }
 
@@ -540,6 +651,7 @@ export function buildTimeline(events: SessionEvent[]): TimelineItem[] {
 
       case "tool.auth_needed":
       case "credential.auth_needed": {
+        const capability = capabilityAuthorizationRequest(payload.capability);
         if (
           event.type === "tool.auth_needed" &&
           !stringValue(payload.toolName) &&
@@ -562,7 +674,11 @@ export function buildTimeline(events: SessionEvent[]): TimelineItem[] {
           id: event.id,
           turnId,
           serverId: typeof payload.serverId === "string" ? payload.serverId : null,
-          source: event.type === "tool.auth_needed" ? "tool" : "credential",
+          source: capability
+            ? "capability"
+            : event.type === "tool.auth_needed"
+              ? "tool"
+              : "credential",
           providerDomain: stringValue(payload.providerDomain),
           connectionId: typeof payload.connectionId === "string" ? payload.connectionId : null,
           reason: authNeededReason(payload.reason),
@@ -571,6 +687,7 @@ export function buildTimeline(events: SessionEvent[]): TimelineItem[] {
           toolName: typeof payload.toolName === "string" ? payload.toolName : null,
           authorizationUrl:
             typeof payload.authorizationUrl === "string" ? payload.authorizationUrl : null,
+          capability,
           occurredAt: event.occurredAt,
         });
         break;
@@ -1187,6 +1304,8 @@ function isTurnBoundary(group: TimelineGroup | undefined): boolean {
     (group?.kind === "item" &&
       (group.item.kind === "user-message" ||
         group.item.kind === "context-compaction" ||
+        (group.item.kind === "machine-input-batch" &&
+          group.item.members.some((member) => member.kind === "media_generation_result")) ||
         (group.item.kind === "notice" && group.item.tone === "input")))
   );
 }
@@ -1315,6 +1434,7 @@ function machineInputMembers(value: unknown): MachineInputBatchItem["members"] {
     "agent_message",
     "agent_steer_instruction",
     "child_terminal_result",
+    "media_generation_result",
   ]);
   const classifications = new Set<MachineInputBatchItem["members"][number]["classification"]>([
     "success",
@@ -1333,16 +1453,24 @@ function machineInputMembers(value: unknown): MachineInputBatchItem["members"] {
             member.classification as MachineInputBatchItem["members"][number]["classification"],
           ) &&
           typeof member.sourceId === "string"
-          ? [
-              {
-                id: member.id,
-                kind: member.kind as MachineInputBatchItem["members"][number]["kind"],
-                classification:
-                  member.classification as MachineInputBatchItem["members"][number]["classification"],
-                sourceId: member.sourceId,
-                summary: stringValue(member.summary),
-              },
-            ]
+          ? (() => {
+              const kind = member.kind as MachineInputBatchItem["members"][number]["kind"];
+              const result =
+                kind === "media_generation_result"
+                  ? parseMediaGenerationResult(member.result)
+                  : null;
+              return [
+                {
+                  id: member.id,
+                  kind,
+                  classification:
+                    member.classification as MachineInputBatchItem["members"][number]["classification"],
+                  sourceId: member.sourceId,
+                  summary: stringValue(member.summary),
+                  ...(result ? { result } : {}),
+                },
+              ];
+            })()
           : [];
       })
     : [];
@@ -1378,6 +1506,25 @@ function resourceRefs(value: unknown): import("@opengeni/sdk").ResourceRef[] {
   });
 }
 
+function timelineAnnotations(value: unknown): TimelineAnnotation[] {
+  if (!Array.isArray(value)) return [];
+  return value.filter((candidate): candidate is TimelineAnnotation => {
+    const annotation = asRecord(candidate);
+    const source = asRecord(annotation.source);
+    return (
+      typeof annotation.id === "string" &&
+      typeof annotation.ordinal === "number" &&
+      typeof annotation.quote === "string" &&
+      typeof annotation.note === "string" &&
+      typeof source.eventId === "string" &&
+      typeof source.eventType === "string" &&
+      typeof source.sequence === "number" &&
+      typeof source.startOffset === "number" &&
+      typeof source.endOffset === "number"
+    );
+  });
+}
+
 function toolRefs(value: unknown): import("@opengeni/sdk").ToolRef[] {
   if (!Array.isArray(value)) {
     return [];
@@ -1440,6 +1587,31 @@ function isErrorOutput(payload: Record<string, unknown>): boolean {
   );
 }
 
+function toolCallTruncation(payload: Record<string, unknown>): ToolCallTruncation | null {
+  const truncation = asRecord(payload.truncation);
+  const fullEvidence = asRecord(truncation.fullEvidence);
+  const surface = stringValue(truncation.surface);
+  const reason = stringValue(truncation.reason);
+  if (
+    truncation.truncated !== true ||
+    !surface ||
+    !reason ||
+    typeof fullEvidence.available !== "boolean"
+  ) {
+    return null;
+  }
+  return {
+    truncated: true,
+    surface,
+    reason,
+    omittedBytes: numberOrNull(truncation.omittedBytes),
+    fullEvidence: {
+      available: fullEvidence.available,
+      reason: stringValue(fullEvidence.reason) || null,
+    },
+  };
+}
+
 function findOpenCall(
   items: TimelineItem[],
   callId: string | null,
@@ -1563,6 +1735,37 @@ function authNeededReason(value: unknown): AuthNeededItem["reason"] {
     : null;
 }
 
+function capabilityAuthorizationRequest(
+  value: unknown,
+): NonNullable<AuthNeededItem["capability"]> | null {
+  if (!value || typeof value !== "object" || Array.isArray(value)) return null;
+  const record = value as Record<string, unknown>;
+  const kind = record.kind;
+  const source = record.source;
+  const action = record.action;
+  if (
+    typeof record.id !== "string" ||
+    typeof record.name !== "string" ||
+    !["pack", "mcp", "api", "skill", "plugin"].includes(String(kind)) ||
+    !["built_in", "library", "configured", "public_registry", "registry", "manual"].includes(
+      String(source),
+    ) ||
+    !["connect", "add_credentials", "enable"].includes(String(action)) ||
+    typeof record.rationale !== "string"
+  ) {
+    return null;
+  }
+  return {
+    id: record.id,
+    name: record.name,
+    kind: kind as NonNullable<AuthNeededItem["capability"]>["kind"],
+    source: source as NonNullable<AuthNeededItem["capability"]>["source"],
+    action: action as NonNullable<AuthNeededItem["capability"]>["action"],
+    rationale: record.rationale,
+    requiredVariables: stringList(record.requiredVariables),
+  };
+}
+
 function stringList(value: unknown): string[] {
   return Array.isArray(value)
     ? value.filter((entry): entry is string => typeof entry === "string" && entry.trim().length > 0)
@@ -1598,6 +1801,58 @@ function workerPrompt(args: unknown): string | null {
   return null;
 }
 
+function boundedWorkerFailureMessage(value: string): string | null {
+  const normalized = value.replace(/[\u0000-\u001f\u007f]+/g, " ").trim();
+  if (!normalized) return null;
+  const encoded = new TextEncoder().encode(normalized);
+  if (encoded.byteLength <= WORKER_FAILURE_MESSAGE_MAX_UTF8_BYTES) return normalized;
+  let end = WORKER_FAILURE_MESSAGE_MAX_UTF8_BYTES;
+  while (end > 0 && (encoded[end]! & 0xc0) === 0x80) end -= 1;
+  return new TextDecoder().decode(encoded.slice(0, end)).trim();
+}
+
+function boundedWorkerFailure(value: unknown): WorkerItem["failure"] {
+  const record = asRecord(value);
+  const code = typeof record.code === "string" ? record.code.trim() : "";
+  const message =
+    typeof record.message === "string" ? boundedWorkerFailureMessage(record.message) : null;
+  if (!/^[A-Za-z0-9._:-]{1,128}$/.test(code) || !message) return null;
+  return { code: code.slice(0, WORKER_FAILURE_CODE_MAX_LENGTH), message };
+}
+
+/**
+ * Extract the API's structured orchestration failure from raw objects, JSON
+ * text, or retained MCP CallToolResult wrappers. Legacy flat strings remain
+ * unprojected rather than being mistaken for the trusted diagnostic contract.
+ */
+function workerFailure(value: unknown, depth = 0): WorkerItem["failure"] {
+  if (depth > 6 || value === null || value === undefined) return null;
+  if (typeof value === "string") {
+    const parsed = tryParseJson(value);
+    return parsed === value ? null : workerFailure(parsed, depth + 1);
+  }
+  if (Array.isArray(value)) {
+    for (const entry of value) {
+      const failure = workerFailure(entry, depth + 1);
+      if (failure) return failure;
+    }
+    return null;
+  }
+  if (typeof value !== "object") return null;
+  const record = value as Record<string, unknown>;
+  const direct = boundedWorkerFailure(record.error);
+  if (direct) return direct;
+  for (const key of ["structuredContent", "content", "result", "output"] as const) {
+    if (!(key in record)) continue;
+    const failure = workerFailure(record[key], depth + 1);
+    if (failure) return failure;
+  }
+  if (record.type === "text" && typeof record.text === "string") {
+    return workerFailure(record.text, depth + 1);
+  }
+  return null;
+}
+
 /**
  * Find a session id in orchestration tool arguments or output. Handles raw
  * objects, JSON strings, and MCP tool results (`{ content: [{ type: "text",

package/src/timeline/registry.ts

@@ -1,4 +1,4 @@
-import type { RetainedArtifactReference } from "@opengeni/sdk";
+import type { RetainedArtifactReference, VideoArtifactPlaybackSource } from "@opengeni/sdk";
 import type { ComponentType } from "react";
 import { mcpToolLeaf } from "./tool-display-name";
 import type { ToolCallItem } from "./types";
@@ -24,6 +24,7 @@ import type { ToolCallItem } from "./types";
 export type ToolRendererProps = {
   item: ToolCallItem;
   loadRetainedScreenshot?: RetainedScreenshotLoader | undefined;
+  loadRetainedArtifact?: RetainedArtifactLoader | undefined;
 };
 
 export type RetainedScreenshotLoader = (
@@ -31,6 +32,17 @@ export type RetainedScreenshotLoader = (
   signal: AbortSignal,
 ) => Promise<Uint8Array | null>;
 
+export type RetainedArtifactLoader = (
+  artifact: RetainedArtifactReference,
+  signal: AbortSignal,
+) => Promise<Uint8Array | { url: string } | null>;
+
+/** Mint an expiring source for native browser playback without loading video bytes in JS. */
+export type VideoArtifactPlaybackLoader = (
+  artifactId: string,
+  signal: AbortSignal,
+) => Promise<VideoArtifactPlaybackSource>;
+
 export type ToolRenderer = ComponentType<ToolRendererProps>;
 
 /** A registry entry: which key it matches and the component that renders it. */

package/src/timeline/screenshot-lightbox.tsx

@@ -19,7 +19,7 @@ import { usePortalTokenStyle } from "../lib/use-portal-token-style";
    -------------------------------------------------------------------------- */
 
 type LightboxController = {
-  open: (src: string, caption?: string, source?: HTMLElement | null) => void;
+  open: (src: string, caption?: string, source?: HTMLElement | null, label?: string) => void;
 };
 
 const LightboxContext = createContext<LightboxController | null>(null);
@@ -59,14 +59,21 @@ export function LightboxProvider({ children }: { children: ReactNode }) {
 }
 
 function LightboxRoot({ children }: { children: ReactNode }) {
-  const [state, setState] = useState<{ src: string; caption?: string } | null>(null);
+  const [state, setState] = useState<{
+    src: string;
+    caption?: string;
+    label: string;
+  } | null>(null);
   const [tokenSource, setTokenSource] = useState<HTMLElement | null>(null);
   const portalStyle = usePortalTokenStyle(tokenSource);
 
-  const open = useCallback((src: string, caption?: string, source?: HTMLElement | null) => {
-    setTokenSource(source ?? null);
-    setState(caption ? { src, caption } : { src });
-  }, []);
+  const open = useCallback(
+    (src: string, caption?: string, source?: HTMLElement | null, label = "Screenshot") => {
+      setTokenSource(source ?? null);
+      setState(caption ? { src, caption, label } : { src, label });
+    },
+    [],
+  );
 
   const close = useCallback(() => {
     setState(null);
@@ -95,7 +102,7 @@ function LightboxRoot({ children }: { children: ReactNode }) {
               <Dialog.Content
                 asChild
                 forceMount
-                aria-label="Screenshot"
+                aria-label={state.label}
                 onOpenAutoFocus={(event) => event.preventDefault()}
               >
                 <motion.div
@@ -117,7 +124,10 @@ function LightboxRoot({ children }: { children: ReactNode }) {
                   className="og-root fixed inset-0 z-50 flex items-center justify-center p-6 sm:p-12"
                   style={portalStyle}
                 >
-                  <Dialog.Title className="sr-only">Screenshot</Dialog.Title>
+                  <Dialog.Title className="sr-only">{state.label}</Dialog.Title>
+                  <Dialog.Description className="sr-only">
+                    {state.caption ?? `Expanded ${state.label.toLowerCase()}`}
+                  </Dialog.Description>
                   {/* The figure is one self-contained object: image, caption, and
                       its own close control. The close button anchors to a wrapper
                       sized to the IMAGE (w-fit), so it hugs the real top-right
@@ -128,7 +138,7 @@ function LightboxRoot({ children }: { children: ReactNode }) {
                       {/* A plain <img>: this SDK is framework-agnostic, with no host Image component. */}
                       <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"
                       />
                       <Dialog.Close

package/src/timeline/shared.tsx

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