@opengeni/react 0.12.0 → 0.13.0

package/src/timeline/shared.tsx

@@ -200,7 +200,11 @@ export function ActivityDisclosure({
   const dataStatus = cancelled ? "cancelled" : failed ? "failed" : undefined;
 
   if (!hasBody) {
-    return <div className={cn(rowClass, "cursor-default")} data-status={dataStatus}>{inner}</div>;
+    return (
+      <div className={cn(rowClass, "cursor-default")} data-status={dataStatus}>
+        {inner}
+      </div>
+    );
   }
 
   return (
@@ -270,6 +274,7 @@ export function TermBlock({
   output,
   live,
   tailLines = 12,
+  failed,
 }: {
   /**
    * The command shown in the prompt header. Pass `null` when the row title
@@ -282,6 +287,8 @@ export function TermBlock({
   /** The FULL output. TermBlock owns the tail/full slicing internally. */
   output: string;
   live?: boolean | undefined;
+  /** A non-zero exit / failed call — tints the left accent red (the one hue). */
+  failed?: boolean | undefined;
   /**
    * When the output exceeds the tail window, only the last `tailLines` are shown
    * with a "show full output" toggle. The component holds the full text, so the
@@ -297,32 +304,51 @@ export function TermBlock({
   const showMore = big && !full;
   const showHeader = command != null || workdir != null;
 
+  // No frame, no fill: a quiet monospace run flush on the page, marked only by a
+  // 2px left accent so it reads as terminal output at a glance without becoming
+  // yet another nested box. Color is spent only on the exception — a settled run
+  // gets a calm neutral rule, a live one the running hue, a failed one the red.
   return (
-    <div className="min-w-0 overflow-hidden rounded-og-sm border border-og-border bg-og-bg/70">
+    <div
+      className={cn(
+        "min-w-0 border-l-2 pl-3",
+        failed
+          ? "border-og-status-failed/50"
+          : live
+            ? "border-og-status-running/50"
+            : "border-og-border",
+      )}
+    >
       {showHeader ? (
-        <div className="flex items-center gap-2 border-b border-og-border/70 px-2.5 py-1.5">
+        <div className="flex items-center gap-2 pb-1">
           <span className="select-none text-og-status-idle">$</span>
           {command != null ? (
-            <span className="min-w-0 flex-1 truncate font-og-mono text-og-sm text-og-fg-muted">{command}</span>
+            <span className="min-w-0 flex-1 truncate font-og-mono text-og-sm text-og-fg-muted">
+              {command}
+            </span>
           ) : (
             <span className="flex-1" />
           )}
-          {workdir ? <span className="shrink-0 font-og-mono text-og-xs text-og-fg-subtle">{workdir}</span> : null}
+          {workdir ? (
+            <span className="shrink-0 font-og-mono text-og-xs text-og-fg-subtle">{workdir}</span>
+          ) : null}
         </div>
       ) : null}
       {empty ? (
-        <p className="px-2.5 py-2 font-og-mono text-og-xs italic text-og-fg-subtle">(no output)</p>
+        <p className="font-og-mono text-og-xs italic text-og-fg-subtle">(no output)</p>
       ) : (
-        <pre className="max-h-72 overflow-auto whitespace-pre-wrap break-all px-2.5 py-2 font-og-mono text-og-xs leading-5 text-og-fg-muted">
+        <pre className="max-h-72 overflow-auto whitespace-pre-wrap break-all font-og-mono text-og-xs leading-5 text-og-fg-muted">
           {shown}
-          {live ? <span className="ml-px inline-block h-[1em] w-[2px] translate-y-[2px] animate-og-blink bg-og-accent align-middle" /> : null}
+          {live ? (
+            <span className="ml-px inline-block h-[1em] w-[2px] translate-y-[2px] animate-og-blink bg-og-accent align-middle" />
+          ) : null}
         </pre>
       )}
       {showMore ? (
         <button
           type="button"
           onClick={() => setFull(true)}
-          className="w-full border-t border-og-border/70 px-2.5 py-1.5 text-left text-og-xs text-og-fg-subtle transition-colors hover:text-og-fg"
+          className="mt-1 text-left text-og-xs text-og-fg-subtle transition-colors hover:text-og-fg"
         >
           show full output ({lines.length} lines)
         </button>
@@ -333,20 +359,36 @@ export function TermBlock({
 
 /* --- generic payload block -------------------------------------------------- */
 
-export function PayloadBlock({ label, value, failed }: { label: string; value: unknown; failed?: boolean | undefined }) {
+export function PayloadBlock({
+  label,
+  value,
+  failed,
+}: {
+  label: string;
+  value: unknown;
+  failed?: boolean | undefined;
+}) {
   const text = typeof value === "string" ? value : stringifyPayload(value);
   if (!text || text.trim() === "") {
     return null;
   }
+  // Flush on the page, no frame — a labelled monospace run marked only by a 2px
+  // left accent (red when the call failed, otherwise a calm neutral rule), so a
+  // payload reads as detail hanging off the row, never a nested card.
   return (
-    <div className="min-w-0">
-      <p className="mb-1 text-og-xs font-medium uppercase tracking-[0.08em] text-og-fg-subtle">{label}</p>
+    <div
+      className={cn(
+        "min-w-0 border-l-2 pl-3",
+        failed ? "border-og-status-failed/50" : "border-og-border",
+      )}
+    >
+      <p className="mb-1 text-og-xs font-medium uppercase tracking-[0.08em] text-og-fg-subtle">
+        {label}
+      </p>
       <pre
         className={cn(
-          "max-h-64 overflow-auto whitespace-pre-wrap break-all rounded-og-sm border p-2.5 font-og-mono text-og-xs leading-5",
-          failed
-            ? "border-og-status-failed/30 bg-og-status-failed/5 text-og-status-failed"
-            : "border-og-border bg-og-bg/60 text-og-fg-muted",
+          "max-h-64 overflow-auto whitespace-pre-wrap break-all font-og-mono text-og-xs leading-5",
+          failed ? "text-og-status-failed" : "text-og-fg-muted",
         )}
       >
         {text}
@@ -356,10 +398,18 @@ export function PayloadBlock({ label, value, failed }: { label: string; value: u
 }
 
 /** A quiet inline note inside an expanded body (lost output, empty frame, …). */
-export function BodyNote({ children, tone }: { children: ReactNode; tone?: "error" | "muted" | undefined }) {
+export function BodyNote({
+  children,
+  tone,
+}: {
+  children: ReactNode;
+  tone?: "error" | "muted" | undefined;
+}) {
   if (tone === "error") {
+    // A quiet error run marked by a 2px red accent — the same flush, frameless
+    // language as the payload/output blocks, not a filled callout box.
     return (
-      <div className="rounded-og-sm border border-og-status-failed/30 bg-og-status-failed/5 px-2.5 py-2 font-og-mono text-og-xs leading-5 text-og-status-failed">
+      <div className="border-l-2 border-og-status-failed/50 pl-3 font-og-mono text-og-xs leading-5 text-og-status-failed">
         {children}
       </div>
     );
@@ -383,7 +433,12 @@ const MEDIA_BOX = "h-7 w-[52px] shrink-0 rounded-og-xs border border-og-border";
  */
 export function MediaSkeleton() {
   return (
-    <span className={cn(MEDIA_BOX, "relative inline-flex items-center justify-center overflow-hidden bg-og-surface-2")}>
+    <span
+      className={cn(
+        MEDIA_BOX,
+        "relative inline-flex items-center justify-center overflow-hidden bg-og-surface-2",
+      )}
+    >
       <span className="absolute inset-0 animate-og-pulse bg-og-surface-3/50" />
       <CameraIcon className="relative size-3.5 text-og-fg-subtle" />
     </span>
@@ -406,7 +461,15 @@ export function MediaEmpty() {
  * Outside one it degrades to a plain, non-interactive image — never a dead
  * "Expand" button that announces an action it cannot perform.
  */
-export function Thumbnail({ src, caption, alt = "screenshot" }: { src: string; caption?: string | undefined; alt?: string }) {
+export function Thumbnail({
+  src,
+  caption,
+  alt = "screenshot",
+}: {
+  src: string;
+  caption?: string | undefined;
+  alt?: string;
+}) {
   const lightbox = useLightboxOptional();
   const [failed, setFailed] = useState(false);
   if (failed) {
@@ -458,13 +521,28 @@ export function Thumbnail({ src, caption, alt = "screenshot" }: { src: string; c
  * so it never breaks the row layout. Like {@link Thumbnail}, it degrades to a
  * plain image outside a `LightboxProvider`.
  */
-export function ScreenshotFigure({ src, caption, alt = "screenshot" }: { src: string; caption?: string | undefined; alt?: string }) {
+export function ScreenshotFigure({
+  src,
+  caption,
+  alt = "screenshot",
+}: {
+  src: string;
+  caption?: string | undefined;
+  alt?: string;
+}) {
   const lightbox = useLightboxOptional();
   const [failed, setFailed] = useState(false);
   const surface = "block w-full overflow-hidden rounded-og-md border border-og-border bg-og-bg";
   // A plain <img>, like {@link Thumbnail} — a framework-agnostic SDK has no host
   // Image component to defer to.
-  const img = <img src={src} alt={alt} onError={() => setFailed(true)} className="max-h-80 w-full object-contain" />;
+  const img = (
+    <img
+      src={src}
+      alt={alt}
+      onError={() => setFailed(true)}
+      className="max-h-80 w-full object-contain"
+    />
+  );
   return (
     <figure className="m-0 min-w-0">
       {failed ? (
@@ -472,13 +550,22 @@ export function ScreenshotFigure({ src, caption, alt = "screenshot" }: { src: st
           image unavailable
         </div>
       ) : lightbox ? (
-        <button type="button" onClick={() => lightbox.open(src, caption)} className={surface} aria-label="Expand screenshot">
+        <button
+          type="button"
+          onClick={() => lightbox.open(src, caption)}
+          className={surface}
+          aria-label="Expand screenshot"
+        >
           {img}
         </button>
       ) : (
         <div className={surface}>{img}</div>
       )}
-      {caption ? <figcaption className="mt-1.5 font-og-mono text-og-xs text-og-fg-subtle">{caption}</figcaption> : null}
+      {caption ? (
+        <figcaption className="mt-1.5 font-og-mono text-og-xs text-og-fg-subtle">
+          {caption}
+        </figcaption>
+      ) : null}
     </figure>
   );
 }

package/src/timeline/tool-diff.tsx

@@ -2,18 +2,16 @@ import type { GitFileDiff } from "@opengeni/sdk";
 import { useState } from "react";
 import { cn } from "../lib/cn";
 import { useThemeType } from "../lib/use-theme-type";
-import { DiffView } from "../components/diff-view";
 import { PierreDiff } from "../components/pierre-diff";
 
 /* ----------------------------------------------------------------------------
    Tool diff
 
    Renders parsed `GitFileDiff[]` (from the V4A apply_patch parser) through the
-   EXACT same diff stack the Files tab uses: `DiffView` with `PierreDiff` wired
-   into its `fallback` seam, so a host with `@pierre/diffs` installed gets the
-   Shiki-highlighted Pierre renderer and everyone else gets the hand-rolled
-   one — a single data contract, zero divergence. A per-block Unified/Split
-   toggle sits in the header.
+   EXACT same diff stack the Files/Changes tabs use: `PierreDiff` (Shiki-
+   highlighted), with a built-in plain-text degrade for a host without
+   `@pierre/diffs` — one renderer, a single data contract. A per-block
+   Unified/Split toggle sits in the header.
    -------------------------------------------------------------------------- */
 
 export function ToolDiff({ files }: { files: GitFileDiff[] }) {
@@ -22,25 +20,23 @@ export function ToolDiff({ files }: { files: GitFileDiff[] }) {
   // the Files tab uses, then thread it into Pierre. Without it Pierre falls back
   // to its hard dark default and renders a github-dark slab inside a light page.
   const themeType = useThemeType(undefined);
-  // The fallback chain reads top-down: try Pierre's Shiki renderer, and if it's
-  // not installed fall back to the built-in DiffView. The plain node is named
-  // once and reused, so the same props aren't threaded through three JSX nodes.
-  const plain = <DiffView diff={files} layout={layout} />;
   return (
     <div className="min-w-0">
       <div className="mb-1.5 flex justify-end">
         <LayoutToggle layout={layout} onChange={setLayout} />
       </div>
-      <DiffView
-        diff={files}
-        layout={layout}
-        fallback={<PierreDiff diff={files} layout={layout} themeType={themeType} fallback={plain} />}
-      />
+      <PierreDiff diff={files} layout={layout} themeType={themeType} />
     </div>
   );
 }
 
-function LayoutToggle({ layout, onChange }: { layout: "unified" | "split"; onChange: (next: "unified" | "split") => void }) {
+function LayoutToggle({
+  layout,
+  onChange,
+}: {
+  layout: "unified" | "split";
+  onChange: (next: "unified" | "split") => void;
+}) {
   return (
     <div className="inline-flex items-center gap-px rounded-og-xs border border-og-border p-px">
       {(["unified", "split"] as const).map((value) => (
@@ -50,7 +46,9 @@ function LayoutToggle({ layout, onChange }: { layout: "unified" | "split"; onCha
           onClick={() => onChange(value)}
           className={cn(
             "rounded-og-xs px-2 py-[3px] text-og-xs font-medium capitalize transition-colors",
-            layout === value ? "bg-og-surface-2 text-og-fg" : "text-og-fg-subtle hover:text-og-fg-muted",
+            layout === value
+              ? "bg-og-surface-2 text-og-fg"
+              : "text-og-fg-subtle hover:text-og-fg-muted",
           )}
         >
           {value}
@@ -62,15 +60,21 @@ function LayoutToggle({ layout, onChange }: { layout: "unified" | "split"; onCha
 
 /** Raw-patch fallback for a V4A hunk string the parser could not structure. */
 export function RawPatch({ diff }: { diff: string }) {
+  const occurrences = new Map<string, number>();
+  const lines = diff.split("\n").map((line) => {
+    const occurrence = (occurrences.get(line) ?? 0) + 1;
+    occurrences.set(line, occurrence);
+    return { key: `${line}\u0000${occurrence}`, line };
+  });
   return (
     <div className="min-w-0">
       <p className="mb-1 text-og-xs font-medium uppercase tracking-[0.08em] text-og-fg-subtle">
         raw patch (could not parse hunks)
       </p>
-      <pre className="max-h-72 overflow-auto rounded-og-sm border border-og-border bg-og-bg/60 p-2.5 font-og-mono text-og-xs leading-5">
-        {diff.split("\n").map((line, index) => (
+      <pre className="max-h-72 overflow-auto border-l-2 border-og-border pl-3 font-og-mono text-og-xs leading-5">
+        {lines.map(({ key, line }) => (
           <span
-            key={index}
+            key={key}
             className={cn(
               "block",
               line.startsWith("@@")

package/src/timeline/tool-renderers.tsx

@@ -33,7 +33,12 @@ import {
   screenshotDataUrl,
   type ApplyPatchOperation,
 } from "./parsers";
-import { createToolRegistry, type ToolRegistry, type ToolRegistryEntry, type ToolRendererProps } from "./registry";
+import {
+  createToolRegistry,
+  type ToolRegistry,
+  type ToolRegistryEntry,
+  type ToolRendererProps,
+} from "./registry";
 import {
   BodyNote,
   MediaEmpty,
@@ -101,8 +106,8 @@ function ExecRenderer({ item }: ToolRendererProps) {
         preview="output lost — NUL byte could not be stored"
       >
         <BodyNote tone="error">
-          output contained a NUL byte and could not be stored; the turn failed on this tool&apos;s output insert — no output
-          event ever arrived.
+          output contained a NUL byte and could not be stored; the turn failed on this tool&apos;s
+          output insert — no output event ever arrived.
         </BodyNote>
       </ActivityDisclosure>
     );
@@ -135,7 +140,11 @@ function ExecRenderer({ item }: ToolRendererProps) {
         title={title}
         titleMono
         running
-        preview={<RunningPreview>{streamed ? `${streamed.split("\n").length} lines` : "running…"}</RunningPreview>}
+        preview={
+          <RunningPreview>
+            {streamed ? `${streamed.split("\n").length} lines` : "running…"}
+          </RunningPreview>
+        }
       >
         {/* The row title is already `$ ${cmd}`; the TermBlock header drops the
             command (command={null}) so it never repeats above the output. */}
@@ -178,7 +187,12 @@ function ExecRenderer({ item }: ToolRendererProps) {
       cancelled={item.status === "cancelled"}
       preview={truncated ? `⋯ truncated · ${preview}` : preview}
     >
-      <TermBlock command={null} workdir={workdir} output={body} />
+      <TermBlock
+        command={null}
+        workdir={workdir}
+        output={body}
+        failed={item.status === "failed" || (exitCode != null && exitCode !== 0)}
+      />
       {bgSession != null ? (
         <BodyNote>↳ session {bgSession} — a later write_stdin can target this PTY.</BodyNote>
       ) : null}
@@ -190,7 +204,10 @@ function ExecRenderer({ item }: ToolRendererProps) {
 
 function WriteStdinRenderer({ item }: ToolRendererProps) {
   const args = parseToolArgs(item.arguments);
-  const sessionId = typeof args.session_id === "string" || typeof args.session_id === "number" ? args.session_id : undefined;
+  const sessionId =
+    typeof args.session_id === "string" || typeof args.session_id === "number"
+      ? args.session_id
+      : undefined;
   const running = item.status === "running";
   const text = typeof item.output === "string" ? item.output : stringifyPayload(item.output);
   const lost = isExecSessionLostBanner(text);
@@ -248,7 +265,13 @@ function verbForOp(op: ApplyPatchOperation | undefined): string {
   if (!op) {
     return "Edited";
   }
-  return op.type === "create_file" ? "Created" : op.type === "delete_file" ? "Deleted" : op.moveTo ? "Renamed" : "Edited";
+  return op.type === "create_file"
+    ? "Created"
+    : op.type === "delete_file"
+      ? "Deleted"
+      : op.moveTo
+        ? "Renamed"
+        : "Edited";
 }
 
 function basename(path: string): string {
@@ -267,7 +290,15 @@ function dirname(path: string): string {
  * for the expanded DiffView gutter, so the one-line rail stays a calm, single
  * hue (the file path) with no competing colored numerics.
  */
-function PathPreview({ path, add, del }: { path: string; add?: number | undefined; del?: number | undefined }) {
+function PathPreview({
+  path,
+  add,
+  del,
+}: {
+  path: string;
+  add?: number | undefined;
+  del?: number | undefined;
+}) {
   return (
     <span className="inline-flex items-center gap-2 truncate font-og-mono">
       <span className="truncate">
@@ -303,7 +334,11 @@ function ApplyPatchRenderer({ item }: ToolRendererProps) {
         iconTone="running"
         title={fileCount > 1 ? `Applying ${fileCount} files` : titleVerb}
         running
-        preview={<RunningPreview>{fileCount > 1 ? `${fileCount} files` : firstOp ? firstOp.path : "applying…"}</RunningPreview>}
+        preview={
+          <RunningPreview>
+            {fileCount > 1 ? `${fileCount} files` : firstOp ? firstOp.path : "applying…"}
+          </RunningPreview>
+        }
       >
         {ops.map((op) => {
           const file = safeParseOp(op);
@@ -478,7 +513,6 @@ function computerVerb(action: ComputerAction | undefined): string {
   }
 }
 
-
 /** Coerce a function-tool arguments payload into the ComputerAction fields. */
 function asComputerArgs(args: unknown): Partial<ComputerAction> {
   if (!args) {
@@ -511,7 +545,7 @@ function ComputerCallRenderer({ item }: ToolRendererProps) {
   // every transport.
   const functionAction: ComputerAction | undefined =
     !raw.action && item.name.startsWith("computer_") && item.name !== "computer_call"
-      ? { type: item.name.slice("computer_".length), ...(asComputerArgs(item.arguments)) }
+      ? { type: item.name.slice("computer_".length), ...asComputerArgs(item.arguments) }
       : undefined;
   const action = raw.action ?? functionAction;
   const actions = raw.actions ?? (action ? [action] : []);
@@ -531,7 +565,13 @@ function ComputerCallRenderer({ item }: ToolRendererProps) {
   if (running) {
     return (
       <ActivityDisclosure
-        icon={isShot ? <CameraIcon className={ICON_SIZE} /> : <MousePointer2Icon className={ICON_SIZE} />}
+        icon={
+          isShot ? (
+            <CameraIcon className={ICON_SIZE} />
+          ) : (
+            <MousePointer2Icon className={ICON_SIZE} />
+          )
+        }
         iconTone="running"
         title={verb}
         running
@@ -576,7 +616,13 @@ function ComputerCallRenderer({ item }: ToolRendererProps) {
     const caption = `${verb}${actions.length > 1 ? ` (+${actions.length - 1} more)` : ""}`;
     return (
       <ActivityDisclosure
-        icon={isShot ? <CameraIcon className={ICON_SIZE} /> : <MousePointer2Icon className={ICON_SIZE} />}
+        icon={
+          isShot ? (
+            <CameraIcon className={ICON_SIZE} />
+          ) : (
+            <MousePointer2Icon className={ICON_SIZE} />
+          )
+        }
         iconTone={isFailed ? "failed" : "accent"}
         title={`${verb}${countSuffix}`}
         failed={isFailed}
@@ -599,7 +645,13 @@ function ComputerCallRenderer({ item }: ToolRendererProps) {
         cancelled={isCancelled}
         media={<MediaEmpty />}
       >
-        <BodyNote>{isFailed ? "computer_call failed — no image returned." : isCancelled ? "computer_call interrupted — no image returned." : "(no image) — the session returned an empty screenshot."}</BodyNote>
+        <BodyNote>
+          {isFailed
+            ? "computer_call failed — no image returned."
+            : isCancelled
+              ? "computer_call interrupted — no image returned."
+              : "(no image) — the session returned an empty screenshot."}
+        </BodyNote>
       </ActivityDisclosure>
     );
   }
@@ -625,7 +677,9 @@ function ComputerCallRenderer({ item }: ToolRendererProps) {
 type WebSearchResult = { title: string; domain: string; snippet: string };
 
 function WebSearchRenderer({ item }: ToolRendererProps) {
-  const raw = (item.raw ?? {}) as { providerData?: { action?: { query?: string; queries?: string[] } } };
+  const raw = (item.raw ?? {}) as {
+    providerData?: { action?: { query?: string; queries?: string[] } };
+  };
   const action = raw.providerData?.action ?? {};
   const query = action.query ?? "(query unavailable)";
   const queries = action.queries ?? [];
@@ -638,6 +692,13 @@ function WebSearchRenderer({ item }: ToolRendererProps) {
   const results = Array.isArray(rawResults)
     ? (rawResults as unknown[]).filter((r): r is WebSearchResult => !!r && typeof r === "object")
     : undefined;
+  const resultOccurrences = new Map<string, number>();
+  const keyedResults = results?.map((result) => {
+    const contentKey = `${result.domain}\u0000${result.title}\u0000${result.snippet}`;
+    const occurrence = (resultOccurrences.get(contentKey) ?? 0) + 1;
+    resultOccurrences.set(contentKey, occurrence);
+    return { key: `${contentKey}\u0000${occurrence}`, result };
+  });
 
   if (running) {
     return (
@@ -662,10 +723,10 @@ function WebSearchRenderer({ item }: ToolRendererProps) {
       failed={item.status === "failed"}
       cancelled={item.status === "cancelled"}
     >
-      {results && results.length ? (
+      {keyedResults && keyedResults.length ? (
         <ul className="flex flex-col gap-2">
-          {results.map((result, index) => (
-            <li key={index} className="flex gap-2.5">
+          {keyedResults.map(({ key, result }) => (
+            <li key={key} className="flex gap-2.5">
               <GlobeIcon className="mt-0.5 size-3.5 shrink-0 text-og-fg-subtle" />
               <div className="min-w-0">
                 <p className="truncate text-og-base text-og-fg">
@@ -685,7 +746,13 @@ function WebSearchRenderer({ item }: ToolRendererProps) {
 
 /* ---- view_image ------------------------------------------------------------ */
 
-const VIEW_IMAGE_ERRORS = ["was not found", "is not a file", "exceeded the allowed size", "is not a supported image", "unable to read image"];
+const VIEW_IMAGE_ERRORS = [
+  "was not found",
+  "is not a file",
+  "exceeded the allowed size",
+  "is not a supported image",
+  "unable to read image",
+];
 
 function ViewImageRenderer({ item }: ToolRendererProps) {
   const args = parseToolArgs(item.arguments);
@@ -750,7 +817,13 @@ function ViewImageRenderer({ item }: ToolRendererProps) {
         cancelled={viewCancelled}
         preview="(no image)"
       >
-        <BodyNote>{viewFailed ? "view_image failed — no image data returned." : viewCancelled ? "view_image interrupted." : "(no image) — the sandbox session returned no image data."}</BodyNote>
+        <BodyNote>
+          {viewFailed
+            ? "view_image failed — no image data returned."
+            : viewCancelled
+              ? "view_image interrupted."
+              : "(no image) — the sandbox session returned no image data."}
+        </BodyNote>
       </ActivityDisclosure>
     );
   }
@@ -802,7 +875,11 @@ function SecretSetRenderer({ item }: ToolRendererProps) {
         preview={errorText ?? "variable write failed"}
       >
         <PayloadBlock label="Arguments" value={redactSecrets(args)} />
-        {errorText ? <PayloadBlock label="Error" value={errorText} failed /> : <BodyNote tone="error">the tool call failed with no output.</BodyNote>}
+        {errorText ? (
+          <PayloadBlock label="Error" value={errorText} failed />
+        ) : (
+          <BodyNote tone="error">the tool call failed with no output.</BodyNote>
+        )}
       </ActivityDisclosure>
     );
   }