@tonyclaw/agent-inspector 2.1.15 → 2.1.17

package/src/components/proxy-viewer/ProviderLogoStack.tsx

@@ -39,7 +39,7 @@ export function ProviderLogoStack({
             <TooltipTrigger asChild>
               <span
                 className={cn(
-                  "inline-flex size-6 shrink-0 items-center justify-center rounded-md border border-white/10 bg-black/20 shadow-[inset_0_1px_0_rgba(255,255,255,0.05)]",
+                  "border border-border bg-muted/40 inline-flex size-6 shrink-0 items-center justify-center rounded-md",
                   index > 0 && "-ml-2",
                 )}
               >
@@ -50,7 +50,7 @@ export function ProviderLogoStack({
           </Tooltip>
         ))}
         {overflowCount > 0 && (
-          <span className="-ml-2 inline-flex h-6 min-w-6 shrink-0 items-center justify-center rounded-md border border-white/10 bg-black/40 px-1 font-mono text-[10px] text-muted-foreground">
+          <span className="border border-border bg-muted/40 -ml-2 inline-flex h-6 min-w-6 shrink-0 items-center justify-center rounded-md px-1 font-mono text-[10px] text-muted-foreground">
             +{overflowCount}
           </span>
         )}

package/src/components/proxy-viewer/RequestToolsPanel.tsx

@@ -101,7 +101,7 @@ function ToolRow({ tool, called }: { tool: RequestToolDefinition; called: boolea
 
   return (
     <Collapsible open={open} onOpenChange={setOpen}>
-      <div className="rounded-md border border-white/10 bg-black/20 shadow-[inset_0_1px_0_rgba(255,255,255,0.03)]">
+      <div className="border border-border bg-card shadow-sm rounded-[8px]">
         <div className="flex min-w-0 items-center gap-2 px-2.5 py-2">
           <button
             type="button"
@@ -140,7 +140,7 @@ function ToolRow({ tool, called }: { tool: RequestToolDefinition; called: boolea
           </button>
           <button
             type="button"
-            className="inline-flex size-7 shrink-0 items-center justify-center rounded text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            className="border border-input bg-background hover:bg-accent hover:text-accent-foreground inline-flex size-7 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
             onClick={nameCopy.copy}
             aria-label={nameCopy.copied ? "Copied tool name" : "Copy tool name"}
           >
@@ -153,13 +153,13 @@ function ToolRow({ tool, called }: { tool: RequestToolDefinition; called: boolea
         </div>
         <CollapsibleContent>
           {open && (
-            <div className="space-y-2 border-t border-white/10 bg-white/[0.02] px-2.5 py-2">
+            <div className="space-y-2 border-t border-white/10 bg-white/[0.025] px-2.5 py-2">
               {tool.description !== null && (
                 <p className="text-xs leading-relaxed text-muted-foreground">{tool.description}</p>
               )}
               <RequiredParameters names={tool.requiredParameters} />
               {tool.schema !== null && (
-                <ScrollArea className="max-h-64 rounded-md border border-white/10 bg-[#06080b] p-2">
+                <ScrollArea className="border border-border bg-card shadow-sm max-h-64 rounded-[8px] p-2">
                   <Suspense
                     fallback={<div className="text-xs text-muted-foreground">Loading JSON...</div>}
                   >
@@ -203,7 +203,7 @@ export const RequestTools = memo(function RequestTools({
   const hiddenPreviewCount = summary.tools.length - previewTools.length;
 
   return (
-    <section className="mb-3 overflow-hidden rounded-md border border-white/10 bg-[#080b0f] shadow-[inset_0_1px_0_rgba(255,255,255,0.04)]">
+    <section className="border border-border bg-card shadow-sm mb-3 overflow-hidden rounded-[8px]">
       <div className="flex min-w-0 flex-wrap items-center gap-2 px-3 py-2">
         <div className="flex min-w-0 flex-1 items-center gap-2">
           <Wrench className="size-4 shrink-0 text-sky-300/80" />
@@ -242,7 +242,7 @@ export const RequestTools = memo(function RequestTools({
           type="button"
           variant="ghost"
           size="sm"
-          className="h-7 border border-white/10 bg-black/20 px-2 text-muted-foreground hover:border-cyan-300/30 hover:bg-cyan-400/10 hover:text-cyan-100"
+          className="h-7 px-2 text-muted-foreground hover:text-cyan-100"
           onClick={() => setExpanded((value) => !value)}
           aria-expanded={expanded}
         >
@@ -251,7 +251,7 @@ export const RequestTools = memo(function RequestTools({
         </Button>
       </div>
 
-      <div className="flex min-w-0 flex-wrap gap-1.5 border-t border-white/10 bg-black/10 px-3 py-2">
+      <div className="flex min-w-0 flex-wrap gap-1.5 border-t border-white/10 bg-white/[0.025] px-3 py-2">
         {previewTools.map((tool) => (
           <Badge
             key={tool.name}
@@ -272,8 +272,8 @@ export const RequestTools = memo(function RequestTools({
       </div>
 
       {expanded && (
-        <div className="space-y-2 border-t border-white/10 bg-black/15 px-3 py-3">
-          <label className="flex h-8 items-center gap-2 rounded-md border border-white/10 bg-[#06080b] px-2 text-xs">
+        <div className="space-y-2 border-t border-white/10 bg-black/10 px-3 py-3">
+          <label className="border border-input bg-background hover:bg-accent hover:text-accent-foreground flex h-8 items-center gap-2 rounded-md px-2 text-xs">
             <Search className="size-3.5 shrink-0 text-muted-foreground" />
             <input
               value={query}

package/src/components/proxy-viewer/ThreadConnector.tsx

@@ -1,7 +1,6 @@
-import { type JSX, useMemo } from "react";
-import { cn } from "../../lib/utils";
+import type { JSX, KeyboardEvent, MouseEvent } from "react";
 import { isTurnBoundary, type StopReason } from "../../lib/stopReason";
-import { getCrabVariant, getInteriorCrabVariant } from "../ui/crab-variants";
+import { cn } from "../../lib/utils";
 
 export type ThreadConnectorProps = {
   stopReason: StopReason;
@@ -11,13 +10,13 @@ export type ThreadConnectorProps = {
   isTurnStart: boolean;
   /** True when this entry is the turn's only request. */
   isOnlyEntry?: boolean;
-  /** Seed for crab variant selection (0-11). */
-  crabIndex?: number;
-  /** When true the crab is clickable (collapse / expand a turn). */
+  /** When true the timeline marker is clickable (collapse / expand a turn). */
   collapsible?: boolean;
   onToggle?: () => void;
 };
 
+type MarkerTone = "start" | "end" | "fused" | "running" | "idle";
+
 function boundaryTitle(stopReason: StopReason): string {
   switch (stopReason) {
     case "end_turn":
@@ -32,104 +31,124 @@ function boundaryTitle(stopReason: StopReason): string {
   }
 }
 
-/**
- * Vertical timeline connector.  Top spacer uses a calc() that
- * mixes rem (py-1 + half-line) and px (border) so the crab
- * centre-line matches the LogEntry display number regardless of the
- * root font-size.  The bottom spacer is flex-1 so the outgoing
- * line adapts to whatever height the LogEntry occupies.
- */
+function markerTone({
+  isFusedBoundary,
+  isBoundary,
+  isTurnStart,
+  isRunning,
+}: {
+  isFusedBoundary: boolean;
+  isBoundary: boolean;
+  isTurnStart: boolean;
+  isRunning: boolean;
+}): MarkerTone {
+  if (isFusedBoundary) return "fused";
+  if (isBoundary) return "end";
+  if (isTurnStart) return "start";
+  if (isRunning) return "running";
+  return "idle";
+}
+
+function markerClass(tone: MarkerTone, interactive: boolean): string {
+  const base =
+    "inline-flex size-3.5 items-center justify-center rounded-full border transition-colors";
+  const cursor = interactive ? "cursor-pointer hover:border-cyan-200/70 hover:bg-cyan-300/20" : "";
+
+  switch (tone) {
+    case "start":
+      return cn(base, cursor, "border-cyan-300/50 bg-cyan-300/12 text-cyan-200");
+    case "end":
+      return cn(base, cursor, "border-amber-300/55 bg-amber-300/12 text-amber-200");
+    case "fused":
+      return cn(
+        base,
+        cursor,
+        "border-slate-200/50 bg-slate-200/10 text-slate-100 ring-2 ring-cyan-300/15",
+      );
+    case "running":
+      return cn(
+        base,
+        cursor,
+        "border-amber-300/45 bg-amber-300/10 text-amber-200 ring-2 ring-amber-300/10",
+      );
+    case "idle":
+      return cn(base, cursor, "border-muted-foreground/25 bg-muted/30 text-muted-foreground/60");
+  }
+}
+
+function markerInnerClass(tone: MarkerTone): string {
+  switch (tone) {
+    case "running":
+      return "size-1.5 rounded-full bg-current animate-pulse";
+    case "idle":
+      return "size-1 rounded-full bg-current opacity-55";
+    case "start":
+    case "end":
+    case "fused":
+      return "size-1.5 rounded-full bg-current";
+  }
+}
+
+function markerTitle(tone: MarkerTone, stopReason: StopReason): string {
+  switch (tone) {
+    case "start":
+      return "Start of turn";
+    case "end":
+      return boundaryTitle(stopReason);
+    case "fused":
+      return "Single-request turn";
+    case "running":
+      return "Processing";
+    case "idle":
+      return "Request in turn";
+  }
+}
+
 export function ThreadConnector({
   stopReason,
   isPending,
   isFirst,
   isTurnStart,
   isOnlyEntry = false,
-  crabIndex = 0,
   collapsible = false,
   onToggle,
 }: ThreadConnectorProps): JSX.Element {
   const isBoundary = isTurnBoundary(stopReason);
   const isFusedBoundary = isOnlyEntry && isTurnStart && isBoundary;
   const isRunning = isPending && !isBoundary;
-  const Crab = useMemo(() => getCrabVariant(crabIndex), [crabIndex]);
-  const FusedCrab = useMemo(() => getInteriorCrabVariant(crabIndex), [crabIndex]);
+  const tone = markerTone({ isFusedBoundary, isBoundary, isTurnStart, isRunning });
+  const interactive = collapsible && onToggle !== undefined;
+
+  const handleMarkerClick = (event: MouseEvent<HTMLSpanElement>): void => {
+    if (!interactive || onToggle === undefined) return;
+    event.stopPropagation();
+    onToggle();
+  };
 
-  const interactiveProps =
-    collapsible && onToggle
-      ? ({
-          role: "button" as const,
-          tabIndex: 0,
-          className: "cursor-pointer",
-          onClick: (e: React.MouseEvent) => {
-            e.stopPropagation();
-            onToggle();
-          },
-          onKeyDown: (e: React.KeyboardEvent) => {
-            if (e.key === "Enter" || e.key === " ") {
-              e.preventDefault();
-              onToggle();
-            }
-          },
-        } as const)
-      : ({} as const);
+  const handleMarkerKeyDown = (event: KeyboardEvent<HTMLSpanElement>): void => {
+    if (!interactive || onToggle === undefined) return;
+    if (event.key !== "Enter" && event.key !== " ") return;
+    event.preventDefault();
+    onToggle();
+  };
 
   return (
     <div className="flex flex-col items-center w-6 shrink-0 pt-0.5 pb-0.5">
-      {/* Top spacer — crab centre must land on the LogEntry index midline.
-       *  Index midline from container top = border(1px) + py-1(0.25rem) + ½line(0.5rem)
-       *  = 1px + 0.75rem.  Crab centre = pt(2px) + spacer + 7px(half crab).
-       *  ∴ spacer = 0.75rem - 8px.  (at 16px root: 12-8=4px; 2+4+7=13px). */}
       <div className="flex justify-center h-[calc(0.75rem-8px)]">
         {!isFirst && <div className="w-0.5 bg-muted-foreground/30 h-full" />}
       </div>
 
-      {/* Crab — pinned to the fixed offset above so it never drifts
-       *  when the LogEntry expands / collapses.  Clickable when the
-       *  turn is collapsible (replaces the old chevron toggle). */}
-      {isFusedBoundary ? (
-        <span title="Start and end of turn">
-          <FusedCrab
-            className={cn(
-              "size-3.5 text-[#80FF00]",
-              "animate-crab-settle",
-              "drop-shadow-[0_0_4px_rgba(128,255,0,0.5)]",
-            )}
-          />
-        </span>
-      ) : isBoundary ? (
-        <span title={boundaryTitle(stopReason)} {...interactiveProps}>
-          <Crab
-            className={cn(
-              "size-3.5 text-amber-400",
-              "animate-crab-settle",
-              "drop-shadow-[0_0_4px_rgba(251,191,36,0.5)]",
-            )}
-          />
-        </span>
-      ) : isTurnStart ? (
-        <span title="Start of turn" {...interactiveProps}>
-          <Crab
-            className={cn(
-              "size-3.5 text-emerald-400",
-              "animate-crab-appear",
-              "drop-shadow-[0_0_4px_rgba(52,211,153,0.5)]",
-            )}
-          />
-        </span>
-      ) : isRunning ? (
-        <span title="Processing…">
-          <Crab className={cn("size-3.5 text-amber-300/80", "animate-crab-crawl")} />
-        </span>
-      ) : (
-        <span>
-          <Crab className="size-3.5 text-muted-foreground/40" />
-        </span>
-      )}
+      <span
+        role={interactive ? "button" : undefined}
+        tabIndex={interactive ? 0 : undefined}
+        title={markerTitle(tone, stopReason)}
+        className={markerClass(tone, interactive)}
+        onClick={handleMarkerClick}
+        onKeyDown={handleMarkerKeyDown}
+      >
+        <span className={markerInnerClass(tone)} />
+      </span>
 
-      {/* Bottom spacer — flex-1 fills whatever height the LogEntry
-       *  consumes (header + expanded content).  Turn boundaries have
-       *  no outgoing line. */}
       <div className="flex-1 flex justify-center min-h-0">
         {!isBoundary && (
           <div

package/src/components/proxy-viewer/TurnGroup.tsx

@@ -13,9 +13,7 @@ import { isTurnBoundary } from "../../lib/stopReason";
 import type { TimeDisplayFormat } from "../../lib/runtimeConfig";
 import { cn, formatTokens } from "../../lib/utils";
 import type { CapturedLog } from "../../contracts";
-import { getCrabVariant } from "../ui/crab-variants";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../ui/tooltip";
-import { ROW_CHEVRON_SLOT_CLASS } from "./ProviderLogoStack";
 import type { CacheTrendEntry } from "./cacheTrend";
 import { LogEntry } from "./LogEntry";
 import {
@@ -48,6 +46,8 @@ export type TurnGroupProps = {
   turnIndex?: number;
   timeDisplayFormat: TimeDisplayFormat;
   pendingFocusRequest?: PendingTurnFocusRequest;
+  /** Show client PID/project metadata on each log row. */
+  showLogClientMetadata?: boolean;
 };
 
 export const TurnGroup = memo(function TurnGroup({
@@ -61,6 +61,7 @@ export const TurnGroup = memo(function TurnGroup({
   turnIndex = 0,
   timeDisplayFormat,
   pendingFocusRequest,
+  showLogClientMetadata = true,
 }: TurnGroupProps): JSX.Element {
   const lastIdx = entries.length - 1;
   const lastStop = entries[lastIdx]?.stopReason ?? null;
@@ -70,7 +71,7 @@ export const TurnGroup = memo(function TurnGroup({
   const collapsible = isTurnCollapsible(entries.length, isComplete, isPending);
   const [collapsed, setCollapsed] = useState(false);
 
-  // Auto-collapse when the turn finishes (transitions from incomplete → complete)
+  // Auto-collapse when the turn finishes (transitions from incomplete to complete)
   const prevCompleteRef = useRef(false);
   useEffect(() => {
     if (!collapsible) {
@@ -142,11 +143,7 @@ export const TurnGroup = memo(function TurnGroup({
     };
   }, [entries, lastIdx]);
 
-  // Crab variant creators for the dual-crab collapsed layout
-  const StartCrab = useMemo(() => getCrabVariant(entries[0]?.log.id ?? 0), [entries]);
-  const EndCrab = useMemo(() => getCrabVariant(entries[lastIdx]?.log.id ?? 0), [entries, lastIdx]);
-
-  const bgClass = turnIndex % 2 === 0 ? "bg-[#070a0f]" : "bg-[#090d12]";
+  const bgClass = turnIndex % 2 === 0 ? "bg-white/[0.012]" : "bg-cyan-300/[0.012]";
   const aggregateIsSlow =
     aggregate.maxElapsed !== null &&
     slowResponseThresholdSeconds > 0 &&
@@ -160,7 +157,7 @@ export const TurnGroup = memo(function TurnGroup({
     return events;
   }, [entries]);
 
-  // ResizeObserver → re-render connectors when any LogEntry height changes
+  // ResizeObserver re-renders connectors when any LogEntry height changes
   const [layoutVersion, setLayoutVersion] = useState(0);
   const containerRef = useRef<HTMLDivElement>(null);
   useEffect(() => {
@@ -197,7 +194,7 @@ export const TurnGroup = memo(function TurnGroup({
       aria-label={collapsed ? undefined : turnLabel}
       data-nav-id={collapsed ? undefined : `turn-${String(firstLogId)}`}
       className={cn(
-        "border rounded-lg transition-[border-color,box-shadow]",
+        "rounded-[8px] border transition-[border-color,box-shadow]",
         isPending
           ? "border-amber-300/15 shadow-[0_0_0_1px_rgba(252,211,77,0.04)]"
           : "border-transparent",
@@ -206,7 +203,6 @@ export const TurnGroup = memo(function TurnGroup({
       )}
     >
       {collapsed ? (
-        /* ---- Collapsed: dual-crab (+ summary card for multi-log turns) ---- */
         <div
           data-nav-id={`turn-collapsed-${String(firstLogId)}`}
           data-nav-action="expand"
@@ -228,77 +224,38 @@ export const TurnGroup = memo(function TurnGroup({
             </span>
           </div>
 
-          {/* Dual-crab connector for collapsed multi-request turns. */}
-          <div className="w-6 shrink-0 flex flex-col items-center pt-0.5 pb-0.5">
+          <div className="w-6 shrink-0 flex flex-col items-center pt-1.5 pb-1.5">
             <div className="flex justify-center h-[calc(0.75rem-8px)]" />
-            <span
-              role="button"
-              tabIndex={0}
-              title="Start of turn — click to expand"
-              className="cursor-pointer"
-              onClick={(e) => {
-                e.stopPropagation();
-                toggleCollapse();
-              }}
-              onKeyDown={(e) => {
-                if (e.key === "Enter" || e.key === " ") {
-                  e.preventDefault();
-                  toggleCollapse();
-                }
-              }}
-            >
-              <StartCrab
-                className={cn(
-                  "size-3.5 text-emerald-400",
-                  "animate-crab-appear drop-shadow-[0_0_4px_rgba(52,211,153,0.5)]",
-                )}
-              />
-            </span>
-
+            <span className="size-2 rounded-full border border-cyan-300/45 bg-cyan-300/20" />
             <div className="flex-1 flex justify-center min-h-0">
-              <div className="w-0.5 bg-muted-foreground/30 h-full" />
+              <div className="w-px bg-muted-foreground/25 h-full" />
             </div>
-
             <span
-              role="button"
-              tabIndex={0}
-              title="End of Turn — click to expand"
-              className="cursor-pointer"
-              onClick={(e) => {
-                e.stopPropagation();
-                toggleCollapse();
-              }}
-              onKeyDown={(e) => {
-                if (e.key === "Enter" || e.key === " ") {
-                  e.preventDefault();
-                  toggleCollapse();
-                }
-              }}
-            >
-              <EndCrab
-                className={cn(
-                  "size-3.5 text-amber-400",
-                  "animate-crab-settle drop-shadow-[0_0_4px_rgba(251,191,36,0.5)]",
-                )}
-              />
-            </span>
+              className={cn(
+                "size-2 rounded-full border",
+                isComplete
+                  ? "border-amber-300/45 bg-amber-300/20"
+                  : "border-muted-foreground/30 bg-muted/30",
+              )}
+            />
           </div>
 
-          {/* Summary content — hidden for single-log turns. */}
+          {/* Summary content - hidden for single-log turns. */}
           {entries.length > 1 && (
             <div
               className={cn(
-                "flex-1 min-w-0 mb-0.5 rounded-lg border border-cyan-300/10 py-1.5 px-3 flex items-center gap-3 text-xs shadow-[inset_0_1px_0_rgba(255,255,255,0.04)]",
+                "flex-1 min-w-0 mb-0.5 rounded-[8px] py-1.5 px-3 flex items-center gap-3 text-xs shadow-[inset_0_1px_0_rgba(255,255,255,0.04)]",
+                "border border-border bg-card shadow-sm transition-colors hover:border-cyan-200/20",
                 bgClass,
               )}
             >
-              <span className={ROW_CHEVRON_SLOT_CLASS}>
-                <ChevronRight className="size-4 shrink-0" />
+              <span className="font-mono text-[10px] font-semibold uppercase tracking-[0.14em] text-muted-foreground/70">
+                {turnLabel}
               </span>
 
               {/* ID range */}
               <span
-                className="text-blue-400/80 font-mono font-semibold tabular-nums shrink-0"
+                className="text-blue-300/85 font-mono font-semibold tabular-nums shrink-0"
                 title={`Log IDs ${String(entries[0]?.log.id ?? "?")} ~ ${String(
                   entries[lastIdx]?.log.id ?? "?",
                 )}`}
@@ -312,7 +269,7 @@ export const TurnGroup = memo(function TurnGroup({
                 {entries.length} request{entries.length > 1 ? "s" : ""}
               </span>
 
-              {/* Elapsed — slowest single request in the turn (not the sum) */}
+              {/* Elapsed - slowest single request in the turn (not the sum) */}
               {aggregate.maxElapsed !== null && (
                 <TooltipProvider>
                   <Tooltip>
@@ -359,6 +316,13 @@ export const TurnGroup = memo(function TurnGroup({
 
               {/* Spacer */}
               <span className="flex-1 min-w-0" />
+
+              <span
+                className="border border-input bg-background inline-flex size-7 shrink-0 items-center justify-center rounded-md text-slate-200"
+                aria-hidden="true"
+              >
+                <ChevronRight className="size-4 shrink-0" />
+              </span>
             </div>
           )}
         </div>
@@ -385,11 +349,10 @@ export const TurnGroup = memo(function TurnGroup({
                 isFirst={visibleIdx === 0}
                 isTurnStart={isTurnStart}
                 isOnlyEntry={isSingleLog}
-                crabIndex={log.id % 12}
                 collapsible={collapsible && isTurnStart}
                 onToggle={toggleCollapse}
               />
-              <div className={cn("flex-1 min-w-0 mb-0.5 rounded-lg", bgClass)}>
+              <div className={cn("flex-1 min-w-0 mb-0.5 rounded-[8px]", bgClass)}>
                 <LogEntry
                   log={log}
                   displayNumber={entry.sessionLogNumber}
@@ -398,6 +361,7 @@ export const TurnGroup = memo(function TurnGroup({
                   slowResponseThresholdSeconds={slowResponseThresholdSeconds}
                   timeDisplayFormat={timeDisplayFormat}
                   cacheTrend={cacheTrends?.get(log.id) ?? null}
+                  showClientMetadata={showLogClientMetadata}
                   onCompareWithPrevious={
                     comparisonPredecessors.has(log.id) ? onCompareWithPrevious : undefined
                   }

package/src/components/proxy-viewer/TurnGroupList.tsx

@@ -21,6 +21,8 @@ type TurnGroupListProps = {
   onCompareWithPrevious: (log: CapturedLog) => void;
   comparisonPredecessors: Map<number, CapturedLog>;
   timeDisplayFormat: TimeDisplayFormat;
+  /** Show client PID/project metadata on each log row. */
+  showLogClientMetadata?: boolean;
 };
 
 type PendingVirtualFocusRequest = PendingTurnFocusRequest & {
@@ -73,6 +75,7 @@ function renderTurnGroup(
       comparisonPredecessors={props.comparisonPredecessors}
       turnIndex={turnGroup.turnIndex}
       pendingFocusRequest={pendingFocusRequest}
+      showLogClientMetadata={props.showLogClientMetadata}
     />
   );
 }

package/src/components/proxy-viewer/bodyHydration.ts

@@ -0,0 +1,56 @@
+import { ApiTimeoutError } from "../../lib/apiClient";
+
+export type FullBodyHydrationError = {
+  title: string;
+  detail: string;
+};
+
+const DEFAULT_FULL_BODY_HYDRATION_ERROR_DETAIL =
+  "The compact log metadata is still available. Retry if the local server was restarting or the body store was briefly unavailable.";
+
+export function formatBytes(bytes: number): string {
+  if (bytes < 1024) return `${bytes.toLocaleString()} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KiB`;
+  if (bytes < 1024 * 1024 * 1024) return `${(bytes / 1024 / 1024).toFixed(1)} MiB`;
+  return `${(bytes / 1024 / 1024 / 1024).toFixed(1)} GiB`;
+}
+
+export function formatBodyHydrationFootprint(
+  requestBytes: number | null | undefined,
+  responseBytes: number | null | undefined,
+): string | null {
+  const parts: string[] = [];
+
+  if (requestBytes !== null && requestBytes !== undefined) {
+    parts.push(`Request ${formatBytes(requestBytes)}`);
+  }
+
+  if (responseBytes !== null && responseBytes !== undefined) {
+    parts.push(`Response ${formatBytes(responseBytes)}`);
+  }
+
+  return parts.length === 0 ? null : parts.join(" · ");
+}
+
+export function describeFullBodyHydrationError(error: unknown): FullBodyHydrationError {
+  if (error instanceof ApiTimeoutError) {
+    return {
+      title: "Full bodies timed out",
+      detail:
+        "The log store did not answer before the UI timeout. Compact metadata is still available; retry loading the bodies.",
+    };
+  }
+
+  if (error instanceof Error) {
+    const message = error.message.trim();
+    return {
+      title: "Full bodies could not be loaded",
+      detail: message === "" ? DEFAULT_FULL_BODY_HYDRATION_ERROR_DETAIL : message,
+    };
+  }
+
+  return {
+    title: "Full bodies could not be loaded",
+    detail: DEFAULT_FULL_BODY_HYDRATION_ERROR_DETAIL,
+  };
+}

package/src/components/proxy-viewer/viewerState.ts

@@ -69,10 +69,6 @@ function responseMayContainToolTrace(log: CapturedLog, format: ResolvedLogFormat
   }
 }
 
-export function shouldRenderConversationContent(standalone: boolean, expanded: boolean): boolean {
-  return standalone || expanded;
-}
-
 export function isTurnCollapsible(
   entryCount: number,
   isComplete: boolean,

package/src/components/ui/icon-trigger.ts

@@ -0,0 +1,2 @@
+export const INSPECTOR_ICON_TRIGGER_CLASS =
+  "relative size-8 rounded-md border border-input bg-background text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:ring-ring/50";