@opengeni/react 0.6.1 → 0.6.3

package/src/hooks/use-file-attachments.ts

@@ -1,5 +1,5 @@
 import type { FileAsset, FileResourceRef } from "@opengeni/sdk";
-import { useCallback, useState } from "react";
+import { useCallback, useRef, useState } from "react";
 import { useOpenGeni, type ClientOverride } from "../provider";
 
 export type UseFileAttachmentsOptions = ClientOverride & {
@@ -39,6 +39,11 @@ export type UseFileAttachmentsResult = {
   addFiles: (files: Iterable<File>) => void;
   /** Clipboard path — applies `pasteFilter` (default `image/*`) then uploads. */
   addFromPaste: (event: { clipboardData: DataTransfer | null }) => void;
+  /**
+   * Re-run the upload for a `failed` attachment, in place (same id, same
+   * source file). No-op for an id that isn't a known failed upload.
+   */
+  retry: (id: string) => void;
   /** Remove one attachment; revokes its object-URL. */
   remove: (id: string) => void;
   /** Remove all; revokes every object-URL. Call from `useComposer`'s `onSent`. */
@@ -60,10 +65,33 @@ export function useFileAttachments(options: UseFileAttachmentsOptions = {}): Use
   const { client, workspaceId } = useOpenGeni(options);
   const pasteFilter = options.pasteFilter ?? isImage;
   const [attachments, setAttachments] = useState<FileAttachment[]>([]);
+  // Keep the source File per attachment id so a failed upload can be retried
+  // in place. Cleared on remove/clear so it never outlives its attachment.
+  const sources = useRef<Map<string, File>>(new Map());
+
+  // Run (or re-run) the upload for one already-tracked attachment id. Sets it
+  // back to `uploading`, then resolves to `ready` (with the asset) or `failed`
+  // (with the error message).
+  const startUpload = useCallback((id: string, file: File) => {
+    void client.uploadFile(workspaceId, {
+      filename: file.name || "file",
+      contentType: file.type || "application/octet-stream",
+      data: file,
+    }).then((asset) => {
+      setAttachments((current) => current.map((attachment) => attachment.id === id
+        ? { ...attachment, status: "ready", file: asset, name: asset.filename, contentType: asset.contentType, sizeBytes: asset.sizeBytes, error: undefined }
+        : attachment));
+    }).catch((error: unknown) => {
+      setAttachments((current) => current.map((attachment) => attachment.id === id
+        ? { ...attachment, status: "failed", error: error instanceof Error ? error.message : String(error) }
+        : attachment));
+    });
+  }, [client, workspaceId]);
 
   const addFiles = useCallback((files: Iterable<File>) => {
     for (const file of files) {
       const id = crypto.randomUUID();
+      sources.current.set(id, file);
       const previewUrl = isImage(file) ? URL.createObjectURL(file) : undefined;
       setAttachments((current) => [...current, {
         id,
@@ -73,21 +101,20 @@ export function useFileAttachments(options: UseFileAttachmentsOptions = {}): Use
         status: "uploading",
         ...(previewUrl ? { previewUrl } : {}),
       }]);
-      void client.uploadFile(workspaceId, {
-        filename: file.name || "file",
-        contentType: file.type || "application/octet-stream",
-        data: file,
-      }).then((asset) => {
-        setAttachments((current) => current.map((attachment) => attachment.id === id
-          ? { ...attachment, status: "ready", file: asset, name: asset.filename, contentType: asset.contentType, sizeBytes: asset.sizeBytes }
-          : attachment));
-      }).catch((error: unknown) => {
-        setAttachments((current) => current.map((attachment) => attachment.id === id
-          ? { ...attachment, status: "failed", error: error instanceof Error ? error.message : String(error) }
-          : attachment));
-      });
+      startUpload(id, file);
     }
-  }, [client, workspaceId]);
+  }, [startUpload]);
+
+  const retry = useCallback((id: string) => {
+    const file = sources.current.get(id);
+    if (!file) {
+      return;
+    }
+    setAttachments((current) => current.map((attachment) => attachment.id === id
+      ? { ...attachment, status: "uploading", error: undefined }
+      : attachment));
+    startUpload(id, file);
+  }, [startUpload]);
 
   const addFromPaste = useCallback((event: { clipboardData: DataTransfer | null }) => {
     const clipboardFiles = event.clipboardData?.files;
@@ -101,6 +128,7 @@ export function useFileAttachments(options: UseFileAttachmentsOptions = {}): Use
   }, [addFiles, pasteFilter]);
 
   const remove = useCallback((id: string) => {
+    sources.current.delete(id);
     setAttachments((current) => {
       const removed = current.find((attachment) => attachment.id === id);
       if (removed?.previewUrl) {
@@ -111,6 +139,7 @@ export function useFileAttachments(options: UseFileAttachmentsOptions = {}): Use
   }, []);
 
   const clear = useCallback(() => {
+    sources.current.clear();
     setAttachments((current) => {
       for (const attachment of current) {
         if (attachment.previewUrl) {
@@ -129,6 +158,7 @@ export function useFileAttachments(options: UseFileAttachmentsOptions = {}): Use
     uploading: attachments.some((attachment) => attachment.status === "uploading"),
     addFiles,
     addFromPaste,
+    retry,
     remove,
     clear,
   };

package/src/index.ts

@@ -13,7 +13,7 @@ export { useSession, isTitleEvent } from "./hooks/use-session";
 export type { UseSessionOptions, UseSessionResult } from "./hooks/use-session";
 export { useSessionEvents } from "./hooks/use-session-events";
 export type { SessionEventsConnectionState, UseSessionEventsOptions, UseSessionEventsResult } from "./hooks/use-session-events";
-export { useComposer, composeSendInput, shouldSubmitOnKey } from "./hooks/use-composer";
+export { useComposer, composeSendInput, shouldSubmitOnKey, FILE_ONLY_MESSAGE_TEXT } from "./hooks/use-composer";
 export type { ComposerMode, ComposerSendExtras, ComposerState, UseComposerOptions } from "./hooks/use-composer";
 export { useFileAttachments } from "./hooks/use-file-attachments";
 export type { FileAttachment, UseFileAttachmentsOptions, UseFileAttachmentsResult } from "./hooks/use-file-attachments";
@@ -242,4 +242,4 @@ export { xtermThemeFromTokens } from "./lib/xterm-theme";
 
 // Utilities
 export { cn } from "./lib/cn";
-export { formatBytes, formatRelativeTime, stringifyPayload, truncate, tryParseJson } from "./lib/format";
+export { formatBytes, formatRelativeTime, humanizeFailureReason, stringifyPayload, truncate, tryParseJson } from "./lib/format";

package/src/lib/format.ts

@@ -82,3 +82,35 @@ export function tryParseJson(text: string): unknown {
     return undefined;
   }
 }
+
+/**
+ * Humanize engine/provider failure text before it reaches the timeline or a
+ * failure banner. Raw provider errors leak the wrong audience's instructions —
+ * "Incorrect API key … find your API key at platform.openai.com" tells a
+ * managed-deployment USER to fix credentials only an OPERATOR controls (and is
+ * flatly wrong for Azure or subscription-backed engines). Auth and quota
+ * failures collapse to one neutral, honest sentence; every other reason passes
+ * through untouched. Raw payloads stay available in the debug surfaces.
+ */
+export function humanizeFailureReason(reason: string | null): string | null {
+  if (!reason) {
+    return reason;
+  }
+  const normalized = reason.toLowerCase();
+  const authFailure =
+    normalized.includes("incorrect api key") ||
+    normalized.includes("invalid api key") ||
+    normalized.includes("invalid_api_key") ||
+    normalized.includes("platform.openai.com/account/api-keys") ||
+    (normalized.includes("401") && (normalized.includes("api key") || normalized.includes("unauthorized")));
+  if (authFailure) {
+    return "The model provider rejected this deployment's engine credentials. Sending messages won't help until the deployment's engine configuration is fixed.";
+  }
+  const quotaFailure =
+    normalized.includes("insufficient_quota") ||
+    normalized.includes("exceeded your current quota");
+  if (quotaFailure) {
+    return "The model provider refused the request: this deployment's provider quota is exhausted.";
+  }
+  return reason;
+}

package/src/lib/xterm-theme.ts

@@ -1,8 +1,8 @@
 import type { XtermTheme } from "../components/sandbox-terminal";
 
 /**
- * Derive an xterm `ITheme` subset from the live OKLCH `--og-*` token system (or
- * the app's `--color-*` aliases). Reads the COMPUTED values so xterm — which
+ * Derive an xterm `ITheme` subset from the live OKLCH `--og-*` token system.
+ * Reads the COMPUTED values so xterm — which
  * paints into a canvas and can't consume CSS vars — gets concrete colors. Call
  * on mount and re-derive on a `data-og-theme` flip.
  *
@@ -12,16 +12,13 @@ export function xtermThemeFromTokens(root?: HTMLElement | null): XtermTheme | un
   if (typeof window === "undefined" || typeof getComputedStyle === "undefined") return undefined;
   const el = root ?? document.documentElement;
   const style = getComputedStyle(el);
-  const read = (names: string[]): string | undefined => {
-    for (const name of names) {
-      const value = style.getPropertyValue(name).trim();
-      if (value) return value;
-    }
-    return undefined;
+  const read = (name: string): string | undefined => {
+    const value = style.getPropertyValue(name).trim();
+    return value || undefined;
   };
-  const bg = read(["--og-color-bg", "--color-bg"]);
-  const fg = read(["--og-color-fg", "--color-fg"]);
-  const accent = read(["--og-color-accent", "--color-brand", "--color-accent"]);
+  const bg = read("--og-color-bg");
+  const fg = read("--og-color-fg");
+  const accent = read("--og-color-accent");
   const theme: XtermTheme = {};
   if (bg) theme.background = bg;
   if (fg) theme.foreground = fg;

package/src/timeline/activity-rail.tsx

@@ -200,7 +200,7 @@ function WorkerRow({ item, onOpenSession }: { item: WorkerItem; onOpenSession?:
           type="button"
           onClick={() => item.workerSessionId && onOpenSession(item.workerSessionId)}
           className={cn(
-            "shrink-0 self-center rounded-og-sm border border-og-border px-2.5 py-1 text-og-sm font-medium text-og-fg-muted",
+            "shrink-0 self-center rounded-og-sm border border-og-border px-2.5 py-1 text-og-sm font-medium text-og-fg-muted pointer-coarse:py-2",
             "outline-none transition-colors duration-150 hover:border-og-border-strong hover:text-og-fg",
             "focus-visible:ring-2 focus-visible:ring-og-accent",
           )}

package/src/timeline/parsers.ts

@@ -251,3 +251,107 @@ export function unwrapMcpOutput(output: unknown): { text: string; isError: boole
   }
   return { text: typeof output === "string" ? output : output == null ? "" : JSON.stringify(output), isError: false };
 }
+
+/* --- computer-use screenshot extraction ------------------------------------- */
+
+/**
+ * Extract a renderable `data:` URL from a computer-use screenshot output,
+ * whatever transport produced it. The hosted `computer_call` and the
+ * function-text mode persist a plain `data:image/...` string; the
+ * function-image mode (codex-backed sessions) persists the STRUCTURED image
+ * output — `{type:"image", image:{data, mediaType}}` with `data` arriving as a
+ * number array / index map / Buffer-JSON / base64 string after event
+ * serialization — or the agents-core normalized `input_image` content item.
+ * Returns null when the output carries no image (so callers fall back to their
+ * text/empty presentation).
+ */
+export function screenshotDataUrl(out: unknown): string | null {
+  if (typeof out === "string") {
+    if (out.startsWith("data:image")) {
+      return out;
+    }
+    // A JSON-encoded structured output (some transports stringify tool results).
+    if (out.startsWith("{") || out.startsWith("[")) {
+      const parsed = tryParseJson(out);
+      if (parsed !== undefined && parsed !== out) {
+        return screenshotDataUrl(parsed);
+      }
+    }
+    return null;
+  }
+  if (Array.isArray(out)) {
+    for (const entry of out) {
+      const url = screenshotDataUrl(entry);
+      if (url) {
+        return url;
+      }
+    }
+    return null;
+  }
+  if (out === null || typeof out !== "object") {
+    return null;
+  }
+  const record = out as Record<string, unknown>;
+  // agents-core normalized content item: {type:"input_image", image_url: "data:…" | {url}}
+  const imageUrl = record.image_url ?? record.imageUrl;
+  if (typeof imageUrl === "string" && imageUrl.startsWith("data:image")) {
+    return imageUrl;
+  }
+  if (imageUrl && typeof imageUrl === "object") {
+    const url = (imageUrl as Record<string, unknown>).url;
+    if (typeof url === "string" && url.startsWith("data:image")) {
+      return url;
+    }
+  }
+  // Structured tool output: {type:"image", image:{data, mediaType}}
+  const image = record.image as Record<string, unknown> | undefined;
+  if (image && typeof image === "object") {
+    const mediaType = typeof image.mediaType === "string" ? image.mediaType : "image/png";
+    const base64 = bytesToBase64(image.data);
+    if (base64) {
+      return `data:${mediaType};base64,${base64}`;
+    }
+    if (typeof image.data === "string" && image.data.length > 0) {
+      // Already base64 text.
+      return `data:${mediaType};base64,${image.data}`;
+    }
+  }
+  return null;
+}
+
+/** Serialize whatever a Uint8Array became in JSON (number[], {"0":n,…} index
+ *  map, or Buffer-JSON {type:"Buffer",data:[…]}) back into base64. */
+function bytesToBase64(data: unknown): string | null {
+  const isByte = (n: unknown): n is number => typeof n === "number" && Number.isInteger(n) && n >= 0 && n <= 255;
+  let bytes: number[] | null = null;
+  if (Array.isArray(data) && data.every(isByte)) {
+    bytes = data;
+  } else if (data && typeof data === "object") {
+    const record = data as Record<string, unknown>;
+    if (record.type === "Buffer" && Array.isArray(record.data) && record.data.every(isByte)) {
+      bytes = record.data;
+    } else {
+      const keys = Object.keys(record);
+      if (keys.length > 0 && keys.every((key) => /^\d+$/.test(key))) {
+        const values = keys.sort((a, b) => Number(a) - Number(b)).map((key) => record[key]);
+        if (values.every(isByte)) {
+          bytes = values;
+        }
+      }
+    }
+  }
+  if (!bytes || bytes.length === 0) {
+    return null;
+  }
+  try {
+    let binary = "";
+    const CHUNK = 0x8000;
+    for (let i = 0; i < bytes.length; i += CHUNK) {
+      binary += String.fromCharCode(...bytes.slice(i, i + CHUNK));
+    }
+    return typeof btoa === "function" ? btoa(binary) : Buffer.from(binary, "binary").toString("base64");
+  } catch {
+    // A hostile/absurd payload must degrade to "no image", never crash a render.
+    return null;
+  }
+}

package/src/timeline/projection.ts

@@ -1,5 +1,5 @@
 import type { SessionEvent, SessionStatus } from "@opengeni/sdk";
-import { tryParseJson } from "../lib/format";
+import { humanizeFailureReason, tryParseJson } from "../lib/format";
 import type {
   AgentMessageItem,
   ActivityItem,
@@ -34,7 +34,8 @@ const WORKER_INTERRUPT_TOOL = "session_interrupt";
 
 export function buildTimeline(events: SessionEvent[]): TimelineItem[] {
   const items: TimelineItem[] = [];
-  const ordered = [...events].sort((a, b) => a.sequence - b.sequence);
+  const prescan = prescanTurnAnchors(events);
+  const ordered = orderTimelineEvents(events, prescan);
 
   const last = (): TimelineItem | undefined => items[items.length - 1];
 
@@ -76,6 +77,7 @@ export function buildTimeline(events: SessionEvent[]): TimelineItem[] {
           kind: "user-message",
           id: event.id,
           text: typeof payload.text === "string" ? payload.text : "",
+          ...(event.pendingUserMessage ? { pending: true } : {}),
           resources: resourceRefs(payload.resources),
           tools: toolRefs(payload.tools),
           occurredAt: event.occurredAt,
@@ -332,6 +334,12 @@ export function buildTimeline(events: SessionEvent[]): TimelineItem[] {
       }
 
       case "turn.cancelled": {
+        // A retraction of a never-started queued turn is not a turn ending —
+        // the message was withdrawn before any work happened; show nothing.
+        // A null turnId proves nothing, so it keeps the legacy finalize path.
+        if (turnId && !prescan.startedTurnIds.has(turnId)) {
+          break;
+        }
         const hadActivity = hasTurnActivity(items, turnId);
         finalizeOpen(turnId, "cancelled");
         items.push(turnEndItem(event, "cancelled", null));
@@ -433,6 +441,128 @@ export function groupTimeline(items: TimelineItem[]): TimelineGroup[] {
 
 /* --- helpers ---------------------------------------------------------------- */
 
+type TimelineEvent = SessionEvent & { pendingUserMessage?: true };
+
+type TurnAnchorPrescan = {
+  queuedTurnByTrigger: Map<string, string>;
+  startSeqByTrigger: Map<string, number>;
+  cancelledBeforeStartTriggers: Set<string>;
+  startedTurnIds: Set<string>;
+};
+
+function prescanTurnAnchors(events: SessionEvent[]): TurnAnchorPrescan {
+  const ordered = [...events].sort((a, b) => a.sequence - b.sequence);
+  const queuedTurnByTrigger = new Map<string, string>();
+  const startSeqByTrigger = new Map<string, number>();
+  const cancelledTurnIds = new Set<string>();
+  const fallbackSeqByTurn = new Map<string, number>();
+  const startedTurnIds = new Set<string>();
+
+  for (const event of ordered) {
+    const payload = asRecord(event.payload);
+    const turnId = event.turnId ?? null;
+    if (event.type === "turn.queued") {
+      const triggerEventId = typeof payload.triggerEventId === "string" ? payload.triggerEventId : null;
+      const queuedTurnId = typeof payload.turnId === "string" ? payload.turnId : turnId;
+      if (triggerEventId && queuedTurnId) {
+        queuedTurnByTrigger.set(triggerEventId, queuedTurnId);
+      }
+      continue;
+    }
+    if (event.type === "turn.started") {
+      const triggerEventId = typeof payload.triggerEventId === "string" ? payload.triggerEventId : null;
+      if (triggerEventId) {
+        startSeqByTrigger.set(triggerEventId, event.sequence);
+      }
+      if (turnId) {
+        startedTurnIds.add(turnId);
+      }
+    } else if (event.type === "turn.cancelled" && turnId) {
+      cancelledTurnIds.add(turnId);
+    }
+
+    if (turnId && event.type !== "turn.queued" && event.type !== "turn.cancelled") {
+      const previous = fallbackSeqByTurn.get(turnId);
+      if (previous === undefined || event.sequence < previous) {
+        fallbackSeqByTurn.set(turnId, event.sequence);
+      }
+    }
+    if (turnId && isAgentActivityEvent(event.type)) {
+      startedTurnIds.add(turnId);
+    }
+  }
+
+  for (const [triggerEventId, turnId] of queuedTurnByTrigger) {
+    if (!startSeqByTrigger.has(triggerEventId)) {
+      const fallbackSeq = fallbackSeqByTurn.get(turnId);
+      if (fallbackSeq !== undefined) {
+        startSeqByTrigger.set(triggerEventId, fallbackSeq);
+      }
+    }
+  }
+
+  const cancelledBeforeStartTriggers = new Set<string>();
+  for (const [triggerEventId, turnId] of queuedTurnByTrigger) {
+    if (cancelledTurnIds.has(turnId) && !startSeqByTrigger.has(triggerEventId) && !fallbackSeqByTurn.has(turnId)) {
+      cancelledBeforeStartTriggers.add(triggerEventId);
+    }
+  }
+
+  return { queuedTurnByTrigger, startSeqByTrigger, cancelledBeforeStartTriggers, startedTurnIds };
+}
+
+function orderTimelineEvents(events: SessionEvent[], prescan: TurnAnchorPrescan): TimelineEvent[] {
+  const ordered = [...events].sort((a, b) => a.sequence - b.sequence);
+  const insertions = new Map<number, TimelineEvent[]>();
+  const pending: TimelineEvent[] = [];
+
+  for (const event of ordered) {
+    if (event.type !== "user.message") {
+      continue;
+    }
+    const queuedTurnId = prescan.queuedTurnByTrigger.get(event.id);
+    if (!queuedTurnId) {
+      pushInsertion(insertions, event.sequence, event);
+      continue;
+    }
+    if (prescan.cancelledBeforeStartTriggers.has(event.id)) {
+      continue;
+    }
+    const startSeq = prescan.startSeqByTrigger.get(event.id);
+    if (startSeq !== undefined) {
+      pushInsertion(insertions, startSeq, event);
+      continue;
+    }
+    pending.push({ ...event, pendingUserMessage: true });
+  }
+
+  const projected: TimelineEvent[] = [];
+  for (const event of ordered) {
+    const before = insertions.get(event.sequence);
+    if (before) {
+      projected.push(...before);
+    }
+    if (event.type !== "user.message") {
+      projected.push(event);
+    }
+  }
+  projected.push(...pending);
+  return projected;
+}
+
+function pushInsertion(insertions: Map<number, TimelineEvent[]>, sequence: number, event: SessionEvent): void {
+  const bucket = insertions.get(sequence);
+  if (bucket) {
+    bucket.push(event);
+  } else {
+    insertions.set(sequence, [event]);
+  }
+}
+
+function isAgentActivityEvent(type: string): boolean {
+  return type.startsWith("agent.") || type.startsWith("sandbox.");
+}
+
 function turnEndItem(
   event: SessionEvent,
   outcome: TurnEndItem["outcome"],
@@ -645,7 +775,9 @@ function failureMessage(payload: Record<string, unknown>): string | null {
   for (const key of ["error", "message"] as const) {
     const value = payload[key];
     if (typeof value === "string" && value.trim().length > 0) {
-      return value;
+      // Auth/quota provider errors are rewritten for the right audience
+      // (raw text remains in the event payload for debug surfaces).
+      return humanizeFailureReason(value);
     }
   }
   return null;

package/src/timeline/screenshot-lightbox.tsx

@@ -136,7 +136,7 @@ function LightboxRoot({ children }: { children: ReactNode }) {
                         {state.caption}
                       </figcaption>
                     ) : (
-                      <figcaption className="font-og-mono text-[10px] uppercase tracking-[0.1em] text-white/35">
+                      <figcaption className="font-og-mono text-og-xs uppercase tracking-[0.1em] text-white/35">
                         Esc or click outside to close
                       </figcaption>
                     )}

package/src/timeline/shared.tsx

@@ -155,6 +155,9 @@ export function ActivityDisclosure({
   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",
     "text-og-fg-muted transition-colors duration-150",
+    // A tool row is a touch target on coarse pointers: grow its padding so the
+    // hit area clears the 40px minimum without loosening the dense desktop rail.
+    "pointer-coarse:py-2.5",
   );
   // The chevron rotates to point down when open; it tracks `data-state` on this
   // same row (the Trigger), so the affordance never freezes.
@@ -295,7 +298,7 @@ export function TermBlock({
   const showHeader = command != null || workdir != null;
 
   return (
-    <div className="overflow-hidden rounded-og-sm border border-og-border bg-og-bg/70">
+    <div className="min-w-0 overflow-hidden rounded-og-sm border border-og-border bg-og-bg/70">
       {showHeader ? (
         <div className="flex items-center gap-2 border-b border-og-border/70 px-2.5 py-1.5">
           <span className="select-none text-og-status-idle">$</span>

package/src/timeline/tool-diff.tsx

@@ -49,7 +49,7 @@ function LayoutToggle({ layout, onChange }: { layout: "unified" | "split"; onCha
           type="button"
           onClick={() => onChange(value)}
           className={cn(
-            "rounded-[5px] px-2 py-[3px] text-[11px] font-medium capitalize transition-colors",
+            "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",
           )}
         >

package/src/timeline/tool-renderers.tsx

@@ -15,7 +15,7 @@ import {
   WrenchIcon,
 } from "lucide-react";
 import type { ReactNode } from "react";
-import { stringifyPayload } from "../lib/format";
+import { stringifyPayload, tryParseJson } from "../lib/format";
 import {
   applyPatchOps,
   controlCaret,
@@ -30,6 +30,7 @@ import {
   tailPeek,
   unwrapMcpOutput,
   v4aToGitFileDiff,
+  screenshotDataUrl,
   type ApplyPatchOperation,
 } from "./parsers";
 import { createToolRegistry, type ToolRegistry, type ToolRegistryEntry, type ToolRendererProps } from "./registry";
@@ -477,20 +478,49 @@ function computerVerb(action: ComputerAction | undefined): string {
   }
 }
 
+
+/** Coerce a function-tool arguments payload into the ComputerAction fields. */
+function asComputerArgs(args: unknown): Partial<ComputerAction> {
+  if (!args) {
+    return {};
+  }
+  const parsed = typeof args === "string" ? tryParseJson(args) : args;
+  if (!parsed || typeof parsed !== "object") {
+    return {};
+  }
+  const record = parsed as Record<string, unknown>;
+  return {
+    ...(typeof record.x === "number" ? { x: record.x } : {}),
+    ...(typeof record.y === "number" ? { y: record.y } : {}),
+    ...(typeof record.text === "string" ? { text: record.text } : {}),
+    ...(Array.isArray(record.keys) ? { keys: record.keys as string[] } : {}),
+    ...(typeof record.button === "string" ? { button: record.button } : {}),
+  };
+}
+
 function ComputerCallRenderer({ item }: ToolRendererProps) {
   const raw = (item.raw ?? {}) as {
     action?: ComputerAction;
     actions?: ComputerAction[];
     providerData?: { approvalStatus?: string };
   };
-  const action = raw.action;
+  // Function-mode computer tools (computer_screenshot / computer_click / …,
+  // used on codex + chat-wire providers since the explicit tool-transport
+  // change) carry the action in the tool NAME + arguments instead of raw.action.
+  // Normalize them into the same ComputerAction shape so one renderer serves
+  // 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)) }
+      : undefined;
+  const action = raw.action ?? functionAction;
   const actions = raw.actions ?? (action ? [action] : []);
   const verb = computerVerb(action);
   const out = item.output;
   const running = item.status === "running";
   const rejected = raw.providerData?.approvalStatus === "rejected";
   const readOnly = typeof out === "string" && out.includes("read-only");
-  const isImage = typeof out === "string" && out.startsWith("data:image");
+  const shotUrl = screenshotDataUrl(out);
   const empty = out === "" || out == null;
   const batched = actions.length > 1 ? actions.map((a) => computerVerb(a)).join(" · ") : null;
   // Fold the batched-action count into the title (one media affordance per row),
@@ -542,8 +572,8 @@ function ComputerCallRenderer({ item }: ToolRendererProps) {
   const isFailed = item.status === "failed";
   const isCancelled = item.status === "cancelled";
 
-  if (isImage && typeof out === "string") {
-    const caption = `computer_call · ${verb}${actions.length > 1 ? ` (+${actions.length - 1} more)` : ""}`;
+  if (shotUrl) {
+    const caption = `${verb}${actions.length > 1 ? ` (+${actions.length - 1} more)` : ""}`;
     return (
       <ActivityDisclosure
         icon={isShot ? <CameraIcon className={ICON_SIZE} /> : <MousePointer2Icon className={ICON_SIZE} />}
@@ -551,9 +581,9 @@ function ComputerCallRenderer({ item }: ToolRendererProps) {
         title={`${verb}${countSuffix}`}
         failed={isFailed}
         cancelled={isCancelled}
-        media={<Thumbnail src={out} caption={caption} />}
+        media={<Thumbnail src={shotUrl} caption={caption} />}
       >
-        <ScreenshotFigure src={out} caption={caption} />
+        <ScreenshotFigure src={shotUrl} caption={caption} />
         {batched ? <BodyNote>batched: {batched}</BodyNote> : null}
       </ActivityDisclosure>
     );
@@ -866,6 +896,15 @@ const BASE_ENTRIES: ToolRegistryEntry[] = [
   { match: "name", name: "write_stdin", render: WriteStdinRenderer },
   { match: "name", name: "apply_patch_call", render: ApplyPatchRenderer },
   { match: "name", name: "computer_call", render: ComputerCallRenderer },
+  // Function-mode computer tools (codex / chat-wire transports).
+  { match: "name", name: "computer_screenshot", render: ComputerCallRenderer },
+  { match: "name", name: "computer_click", render: ComputerCallRenderer },
+  { match: "name", name: "computer_double_click", render: ComputerCallRenderer },
+  { match: "name", name: "computer_move", render: ComputerCallRenderer },
+  { match: "name", name: "computer_scroll", render: ComputerCallRenderer },
+  { match: "name", name: "computer_type", render: ComputerCallRenderer },
+  { 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: "view_image", render: ViewImageRenderer },
   { match: "name", name: "environment_set_variable", render: SecretSetRenderer },