@tonyclaw/agent-inspector 2.1.16 → 2.1.17

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-cyan-300/90",
-              "animate-crab-settle",
-              "drop-shadow-[0_0_4px_rgba(103,232,249,0.35)]",
-            )}
-          />
-        </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-cyan-300/85",
-              "animate-crab-appear",
-              "drop-shadow-[0_0_4px_rgba(103,232,249,0.32)]",
-            )}
-          />
-        </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 {
@@ -145,10 +143,6 @@ 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-white/[0.012]" : "bg-cyan-300/[0.012]";
   const aggregateIsSlow =
     aggregate.maxElapsed !== null &&
@@ -209,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"
@@ -231,78 +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-cyan-300/85",
-                  "animate-crab-appear drop-shadow-[0_0_4px_rgba(103,232,249,0.32)]",
-                )}
-              />
-            </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. */}
           {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)]",
-                "border border-border bg-card shadow-sm",
+                "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 ?? "?",
                 )}`}
@@ -363,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>
@@ -389,7 +349,6 @@ export const TurnGroup = memo(function TurnGroup({
                 isFirst={visibleIdx === 0}
                 isTurnStart={isTurnStart}
                 isOnlyEntry={isSingleLog}
-                crabIndex={log.id % 12}
                 collapsible={collapsible && isTurnStart}
                 onToggle={toggleCollapse}
               />

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/lib/providerTestContract.ts

@@ -72,22 +72,58 @@ const ProviderFormatTestResultsSchema = z.object({
   streaming: ProviderTestStateSchema,
 });
 
-const ModelTestResultsSchema = z.object({
-  anthropic: ProviderFormatTestResultsSchema,
-  openai: ProviderFormatTestResultsSchema,
-});
+export type ProviderFormatTestResults = z.infer<typeof ProviderFormatTestResultsSchema>;
 
-export const ProviderTestResultsSchema = z.object({
-  anthropic: ProviderFormatTestResultsSchema,
-  openai: ProviderFormatTestResultsSchema,
-  models: z.record(z.string(), ModelTestResultsSchema).optional(),
-  testedAt: z.string().optional(),
-});
+export function createNotConfiguredProviderFormatTestResults(): ProviderFormatTestResults {
+  return {
+    nonStreaming: { notConfigured: true },
+    streaming: { notConfigured: true },
+  };
+}
+
+const ModelTestResultsSchema = z
+  .object({
+    anthropic: ProviderFormatTestResultsSchema,
+    openai: ProviderFormatTestResultsSchema.optional(),
+    openaiChat: ProviderFormatTestResultsSchema.optional(),
+    openaiResponses: ProviderFormatTestResultsSchema.optional(),
+  })
+  .transform((value) => {
+    const openaiChat =
+      value.openaiChat ?? value.openai ?? createNotConfiguredProviderFormatTestResults();
+    return {
+      ...value,
+      openai: value.openai ?? openaiChat,
+      openaiChat,
+      openaiResponses: value.openaiResponses ?? createNotConfiguredProviderFormatTestResults(),
+    };
+  });
+
+export const ProviderTestResultsSchema = z
+  .object({
+    anthropic: ProviderFormatTestResultsSchema,
+    openai: ProviderFormatTestResultsSchema.optional(),
+    openaiChat: ProviderFormatTestResultsSchema.optional(),
+    openaiResponses: ProviderFormatTestResultsSchema.optional(),
+    models: z.record(z.string(), ModelTestResultsSchema).optional(),
+    testedAt: z.string().optional(),
+  })
+  .transform((value) => {
+    const openaiChat =
+      value.openaiChat ?? value.openai ?? createNotConfiguredProviderFormatTestResults();
+    return {
+      ...value,
+      openai: value.openai ?? openaiChat,
+      openaiChat,
+      openaiResponses: value.openaiResponses ?? createNotConfiguredProviderFormatTestResults(),
+    };
+  });
 
 export type ProviderTestErrorType = z.infer<typeof ProviderTestErrorTypeSchema>;
 export type ProviderTestDebug = z.infer<typeof ProviderTestDebugSchema>;
 export type ProviderTestResult = z.infer<typeof ProviderTestResultSchema>;
 export type ProviderTestState = z.infer<typeof ProviderTestStateSchema>;
+export type ProviderModelTestResults = z.infer<typeof ModelTestResultsSchema>;
 export type ProviderTestResults = z.infer<typeof ProviderTestResultsSchema>;
 
 export function createPendingProviderTestResults(): ProviderTestResults {
@@ -100,6 +136,14 @@ export function createPendingProviderTestResults(): ProviderTestResults {
       nonStreaming: { testing: true },
       streaming: { testing: true },
     },
+    openaiChat: {
+      nonStreaming: { testing: true },
+      streaming: { testing: true },
+    },
+    openaiResponses: {
+      nonStreaming: { testing: true },
+      streaming: { testing: true },
+    },
   };
 }
 
@@ -118,5 +162,7 @@ export function createFailedProviderTestResults(
   return {
     anthropic: createFormatResult(),
     openai: createFormatResult(),
+    openaiChat: createFormatResult(),
+    openaiResponses: createFormatResult(),
   };
 }

package/src/lib/providerTestPrompt.ts

@@ -1,17 +1,29 @@
 export type ProviderTestMode = "non-streaming" | "streaming";
+export type ProviderTestApiShape = "chat" | "responses";
 
 export type ProviderTestMessage = {
   role: "user";
   content: string;
 };
 
-export type ProviderTestRequestBody = {
+export type ProviderTestChatRequestBody = {
   model: string;
   messages: ProviderTestMessage[];
   max_tokens: number;
   stream: boolean;
 };
 
+export type ProviderTestResponsesRequestBody = {
+  model: string;
+  input: string;
+  max_output_tokens: number;
+  stream: boolean;
+};
+
+export type ProviderTestRequestBody =
+  | ProviderTestChatRequestBody
+  | ProviderTestResponsesRequestBody;
+
 const MEMORY_PROBE_FACTS = [
   "Project fact: Agent Inspector captures LLM traffic and turns it into Raw Trace, Session Episode, and Memory Candidate layers.",
   "Procedure: before release, run bun test, npm run typecheck, npm run lint, npm run build, and openspec validate --all --strict.",
@@ -63,7 +75,17 @@ export function buildProviderTestMessages(mode: ProviderTestMode): ProviderTestM
 export function buildProviderTestRequestBody(
   model: string,
   mode: ProviderTestMode,
+  apiShape: ProviderTestApiShape = "chat",
 ): ProviderTestRequestBody {
+  if (apiShape === "responses") {
+    return {
+      model,
+      input: buildProviderTestUserPrompt(mode),
+      max_output_tokens: maxTokensForMode(mode),
+      stream: mode === "streaming",
+    };
+  }
+
   const base = {
     model,
     messages: buildProviderTestMessages(mode),