@tonyclaw/agent-inspector 2.1.13 → 2.1.15

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

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useRef, useState } from "react";
+import { Suspense, useEffect, useMemo, useRef, useState } from "react";
 import type { JSX } from "react";
 import {
   Check,
@@ -23,15 +23,19 @@ import {
   previewNode,
 } from "./requestDiff";
 import { getConversationId } from "./ConversationHeader";
-import { JsonViewerFromString } from "../ui/json-viewer";
 import { Badge } from "../ui/badge";
 import { getLogFormatAdapter, resolveLogFormat } from "./log-formats";
+import { LazyJsonViewerFromString } from "./lazy";
 
 export type CompareDrawerProps = {
   /** Log selected first (shown on the left). */
   left: CapturedLog;
   /** Log selected second (shown on the right). */
   right: CapturedLog;
+  /** Human-facing ordinal inside the left log's session. */
+  leftDisplayNumber: number;
+  /** Human-facing ordinal inside the right log's session. */
+  rightDisplayNumber: number;
   onClose: () => void;
 };
 
@@ -65,6 +69,20 @@ function nodeToJsonValue(node: JsonNode): unknown {
   }
 }
 
+function LazyJsonStringView({
+  text,
+  defaultExpandDepth,
+}: {
+  text: string;
+  defaultExpandDepth: number;
+}): JSX.Element {
+  return (
+    <Suspense fallback={<div className="text-xs text-muted-foreground">Loading JSON...</div>}>
+      <LazyJsonViewerFromString text={text} defaultExpandDepth={defaultExpandDepth} />
+    </Suspense>
+  );
+}
+
 /** The parent path of a JSON path string. E.g. `messages[3].content` →
  *  `messages[3]`, `messages[3]` → `messages`, `messages` → `""`. */
 function parentPath(path: string): string {
@@ -222,7 +240,7 @@ function EqualRunRow({
           {ops.map((op) => (
             <div key={op.path} className="border border-border/50 rounded p-2 bg-muted/20">
               <div className="font-mono text-xs text-muted-foreground mb-1">{op.path}</div>
-              <JsonViewerFromString text={nodeToJsonString(op.value)} defaultExpandDepth={0} />
+              <LazyJsonStringView text={nodeToJsonString(op.value)} defaultExpandDepth={0} />
             </div>
           ))}
         </div>
@@ -393,7 +411,7 @@ function ExpandedSubtree({ op }: { op: AddedOp | RemovedOp | ChangedOp }): JSX.E
   if (op.kind === "added" || op.kind === "removed") {
     return (
       <div className="pl-5 mt-2 border border-border/50 rounded p-2 bg-muted/20">
-        <JsonViewerFromString text={nodeToJsonString(op.value)} defaultExpandDepth={0} />
+        <LazyJsonStringView text={nodeToJsonString(op.value)} defaultExpandDepth={0} />
       </div>
     );
   }
@@ -411,11 +429,11 @@ function ExpandedSubtree({ op }: { op: AddedOp | RemovedOp | ChangedOp }): JSX.E
     <div className="pl-5 mt-2 grid grid-cols-1 md:grid-cols-2 gap-2">
       <div className="border border-rose-500/30 rounded p-2 bg-rose-500/5">
         <div className="text-[10px] uppercase tracking-wider text-rose-500 mb-1">Old</div>
-        <JsonViewerFromString text={nodeToJsonString(op.left)} defaultExpandDepth={0} />
+        <LazyJsonStringView text={nodeToJsonString(op.left)} defaultExpandDepth={0} />
       </div>
       <div className="border border-emerald-500/30 rounded p-2 bg-emerald-500/5">
         <div className="text-[10px] uppercase tracking-wider text-emerald-500 mb-1">New</div>
-        <JsonViewerFromString text={nodeToJsonString(op.right)} defaultExpandDepth={0} />
+        <LazyJsonStringView text={nodeToJsonString(op.right)} defaultExpandDepth={0} />
       </div>
     </div>
   );
@@ -527,7 +545,15 @@ function ModeToggle({
   );
 }
 
-function SideSummary({ log, side }: { log: CapturedLog; side: "left" | "right" }): JSX.Element {
+function SideSummary({
+  log,
+  side,
+  displayNumber,
+}: {
+  log: CapturedLog;
+  side: "left" | "right";
+  displayNumber: number;
+}): JSX.Element {
   const conversationId = getConversationId(log);
   return (
     <div className="flex-1 min-w-0 space-y-1 text-xs">
@@ -543,7 +569,9 @@ function SideSummary({ log, side }: { log: CapturedLog; side: "left" | "right" }
         >
           {side === "left" ? "← Left" : "Right →"}
         </Badge>
-        <span className="font-mono text-blue-400/80">#{log.id}</span>
+        <span className="font-mono text-blue-400/80" title={`Log ID ${String(log.id)}`}>
+          #{displayNumber}
+        </span>
         {log.model !== null && (
           <span className="font-mono text-muted-foreground truncate">{log.model}</span>
         )}
@@ -570,7 +598,13 @@ function SideSummary({ log, side }: { log: CapturedLog; side: "left" | "right" }
   );
 }
 
-export function CompareDrawer({ left, right, onClose }: CompareDrawerProps): JSX.Element {
+export function CompareDrawer({
+  left,
+  right,
+  leftDisplayNumber,
+  rightDisplayNumber,
+  onClose,
+}: CompareDrawerProps): JSX.Element {
   // Memoize the diff so re-renders (e.g. parent re-renders) don't recompute.
   const ops = useMemo<DiffOp[]>(() => {
     const leftRequest = getLogFormatAdapter(resolveLogFormat(left)).analyzeRequest(
@@ -727,8 +761,8 @@ export function CompareDrawer({ left, right, onClose }: CompareDrawerProps): JSX
         {/* Header */}
         <div className="flex items-start gap-4 px-4 py-3 border-b border-border">
           <div className="flex-1 flex gap-4 min-w-0">
-            <SideSummary log={left} side="left" />
-            <SideSummary log={right} side="right" />
+            <SideSummary log={left} side="left" displayNumber={leftDisplayNumber} />
+            <SideSummary log={right} side="right" displayNumber={rightDisplayNumber} />
           </div>
           <div className="flex items-center gap-2 shrink-0">
             <ModeToggle mode={mode} onChange={setMode} />
@@ -785,7 +819,13 @@ export function CompareDrawer({ left, right, onClose }: CompareDrawerProps): JSX
                   })}
                 </div>
               ) : (
-                <SplitBody grouped={grouped} left={left} right={right} />
+                <SplitBody
+                  grouped={grouped}
+                  left={left}
+                  right={right}
+                  leftDisplayNumber={leftDisplayNumber}
+                  rightDisplayNumber={rightDisplayNumber}
+                />
               )}
             </div>
           </>
@@ -800,18 +840,22 @@ function SplitBody({
   grouped,
   left,
   right,
+  leftDisplayNumber,
+  rightDisplayNumber,
 }: {
   grouped: GroupedOp[];
   left: CapturedLog;
   right: CapturedLog;
+  leftDisplayNumber: number;
+  rightDisplayNumber: number;
 }): JSX.Element {
   return (
     <div className="grid grid-cols-[200px_1fr_1fr] gap-x-2 gap-y-0.5 px-3 py-2 text-xs">
       {/* Column headers */}
       <div className="grid grid-cols-[200px_1fr_1fr] gap-x-2 col-span-3 pb-2 mb-2 border-b border-border text-[10px] uppercase tracking-wider text-muted-foreground">
         <span>Path</span>
-        <span>Left (Log #{left.id})</span>
-        <span>Right (Log #{right.id})</span>
+        <span title={`Log ID ${String(left.id)}`}>Left (Log #{leftDisplayNumber})</span>
+        <span title={`Log ID ${String(right.id)}`}>Right (Log #{rightDisplayNumber})</span>
       </div>
 
       {grouped.map((g, i) => {

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

@@ -4,7 +4,7 @@ import type { TimeDisplayFormat } from "../../lib/runtimeConfig";
 import type { CapturedLog } from "../../contracts";
 import { ConversationHeader, type ConversationGroupData } from "./ConversationHeader";
 import { detectProvider } from "../providers/ProviderLogo";
-import { TurnGroup } from "./TurnGroup";
+import { TurnGroupList } from "./TurnGroupList";
 import { AgentTraceSummary } from "./AgentTraceSummary";
 import type { CacheTrendEntry } from "./cacheTrend";
 import { LOG_FOCUS_REQUEST_EVENT, readLogFocusRequest } from "./logFocus";
@@ -180,20 +180,16 @@ export const ConversationGroup = memo(function ({
             showRollupMetrics={showTraceRollupMetrics}
             timeDisplayFormat={timeDisplayFormat}
           />
-          {turnGroups.map((tg) => (
-            <TurnGroup
-              key={tg.turnIndex}
-              entries={tg.entries}
-              viewMode={viewMode}
-              strip={strip}
-              slowResponseThresholdSeconds={slowResponseThresholdSeconds}
-              timeDisplayFormat={timeDisplayFormat}
-              cacheTrends={cacheTrends}
-              onCompareWithPrevious={onCompareWithPrevious}
-              comparisonPredecessors={comparisonPredecessors}
-              turnIndex={tg.turnIndex}
-            />
-          ))}
+          <TurnGroupList
+            turnGroups={turnGroups}
+            viewMode={viewMode}
+            strip={strip}
+            slowResponseThresholdSeconds={slowResponseThresholdSeconds}
+            timeDisplayFormat={timeDisplayFormat}
+            cacheTrends={cacheTrends}
+            onCompareWithPrevious={onCompareWithPrevious}
+            comparisonPredecessors={comparisonPredecessors}
+          />
         </div>
       )}
     </div>

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

@@ -7,7 +7,6 @@ import {
   Loader2,
   MessageSquare,
   Trash2,
-  User,
   Zap,
 } from "lucide-react";
 import type { JSX } from "react";
@@ -17,8 +16,9 @@ import { formatTimestampRange } from "../../lib/timeDisplay";
 import { cn, formatTokens } from "../../lib/utils";
 import type { CapturedLog } from "../../contracts";
 import { ConfirmDialog } from "../ui/confirm-dialog";
-import { ProviderLogo, type Provider } from "../providers/ProviderLogo";
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../ui/tooltip";
+import type { Provider } from "../providers/ProviderLogo";
+import { ClientLogo, clientAppLabel, detectClientApp } from "../clients/ClientLogo";
+import { ProviderLogoStack, ROW_CHEVRON_SLOT_CLASS } from "./ProviderLogoStack";
 import { resolveLogFormat } from "./log-formats";
 
 export type ConversationHeaderProps = {
@@ -89,6 +89,17 @@ export function ConversationHeader({
     },
     [conversationId],
   );
+  const providerLogoItems =
+    providers?.map(({ provider, models }) => ({
+      provider,
+      tooltip: models.length === 1 ? (models[0] ?? provider) : models.join(", "),
+    })) ?? [];
+  const clientApp = detectClientApp({ userAgent, conversationId, clientProjectFolder });
+  const detectedClientLabel = clientAppLabel(clientApp);
+  const hasUserAgent = userAgent !== null && userAgent !== undefined && userAgent !== "";
+  const clientDisplayLabel = detectedClientLabel ?? userAgent ?? null;
+  const clientTooltip =
+    detectedClientLabel !== null && hasUserAgent ? `${detectedClientLabel} - ${userAgent}` : null;
 
   return (
     <div
@@ -112,14 +123,19 @@ export function ConversationHeader({
         }
       }}
     >
+      {/* Provider logos: first visual element whenever model/provider logos are available. */}
+      <ProviderLogoStack items={providerLogoItems} ariaLabel="Models used in this session" />
+
       {/* Expand chevron - shows spinner when collapsed and group has pending logs */}
-      {expanded ? (
-        <ChevronDown className="size-4 text-muted-foreground shrink-0" />
-      ) : isLoading ? (
-        <Loader2 className="size-4 animate-spin text-muted-foreground shrink-0" />
-      ) : (
-        <ChevronRight className="size-4 text-muted-foreground shrink-0" />
-      )}
+      <span className={ROW_CHEVRON_SLOT_CLASS}>
+        {expanded ? (
+          <ChevronDown className="size-4 shrink-0" />
+        ) : isLoading ? (
+          <Loader2 className="size-4 shrink-0 animate-spin" />
+        ) : (
+          <ChevronRight className="size-4 shrink-0" />
+        )}
+      </span>
 
       {/* Session identifier.
           - Real session id (e.g. `sess_abc123...`) → render the id with the
@@ -175,41 +191,17 @@ export function ConversationHeader({
         </>
       )}
 
-      {/* User-Agent */}
-      {userAgent !== null && userAgent !== undefined && userAgent !== "" && (
+      {/* Client app / User-Agent */}
+      {clientDisplayLabel !== null && clientDisplayLabel !== "" && (
         <span
           className="flex items-center gap-1 text-muted-foreground text-xs shrink-0"
-          title={userAgent}
+          title={clientTooltip ?? clientDisplayLabel}
         >
-          <User className="size-3" />
-          <span className="font-mono tabular-nums truncate max-w-[120px]">{userAgent}</span>
-        </span>
-      )}
-
-      {/* Provider logos — one per unique provider used in this session. When
-         a session switched models mid-stream (e.g. claude-3-5 → deepseek-v4)
-         multiple logos appear side-by-side; tooltip lists every distinct
-         model name. */}
-      {providers !== undefined && providers.length > 0 && (
-        <TooltipProvider delayDuration={150}>
-          <span
-            className="flex items-center gap-0.5 shrink-0"
-            aria-label="Models used in this session"
-          >
-            {providers.map(({ provider, models }) => (
-              <Tooltip key={provider}>
-                <TooltipTrigger asChild>
-                  <span className="shrink-0">
-                    <ProviderLogo provider={provider} className="size-4" />
-                  </span>
-                </TooltipTrigger>
-                <TooltipContent>
-                  {models.length === 1 ? models[0] : models.join(", ")}
-                </TooltipContent>
-              </Tooltip>
-            ))}
+          <ClientLogo client={clientApp} className="size-5" />
+          <span className="font-mono tabular-nums truncate max-w-[120px]">
+            {clientDisplayLabel}
           </span>
-        </TooltipProvider>
+        </span>
       )}
 
       {/* Time range */}

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

@@ -75,7 +75,7 @@ const BODY_CHUNK_BYTES = 256 * 1024;
 const CHUNKED_BODY_THRESHOLD_BYTES = 1024 * 1024;
 
 const TAB_TRIGGER_CLASS =
-  "h-9 flex-none rounded-none border-0 border-b-2 border-transparent bg-transparent px-3 text-xs font-semibold text-muted-foreground shadow-none hover:bg-cyan-400/[0.04] hover:text-foreground data-[state=active]:border-cyan-300 data-[state=active]:bg-transparent data-[state=active]:text-cyan-100 data-[state=active]:shadow-none";
+  "h-9 flex-none rounded-none border-0 border-b-2 border-transparent bg-transparent px-3 text-xs font-semibold text-muted-foreground shadow-none transition-colors hover:bg-cyan-400/[0.05] hover:text-foreground data-[state=active]:border-cyan-300 data-[state=active]:bg-cyan-300/[0.04] data-[state=active]:text-cyan-100 data-[state=active]:shadow-none";
 
 function createEmptyBodyPreviewState(totalBytes: number | null = null): BodyPreviewState {
   return {
@@ -140,7 +140,7 @@ function ExpandedPanel({
   return (
     <div
       className={cn(
-        "inspector-scrollbar mx-3 mb-3 max-h-[72vh] overflow-auto rounded-md border border-white/10 bg-[#06080b] p-3 shadow-[inset_0_1px_0_rgba(255,255,255,0.04)]",
+        "inspector-scrollbar mx-3 mb-3 max-h-[72vh] overflow-auto rounded-md border border-cyan-300/10 bg-[#05070a] p-3 shadow-[0_16px_45px_rgba(0,0,0,0.24),inset_0_1px_0_rgba(255,255,255,0.05)]",
         className,
       )}
     >
@@ -277,6 +277,8 @@ function HeaderRows({
 
 export type LogEntryProps = {
   log: CapturedLog;
+  /** Human-facing ordinal inside the current session. Internal lookups still use `log.id`. */
+  displayNumber: number;
   viewMode?: "simple" | "full";
   /** Live "strip Claude Code billing header" flag, sourced once at the viewer
    * container. Hoisted out of `LogEntry` so a single SWR subscription serves
@@ -361,6 +363,7 @@ const HeadersDiffContent = memo(function ({
 
 export const LogEntry = memo(function ({
   log,
+  displayNumber,
   viewMode = "simple",
   strip,
   slowResponseThresholdSeconds,
@@ -384,6 +387,7 @@ export const LogEntry = memo(function ({
   );
   const requestJsonRef = useRef<HTMLDivElement | null>(null);
   const logIdRef = useRef(log.id);
+  const bodyHydrationInFlightRef = useRef(false);
   const displayLog = hydratedLog ?? log;
   const useChunkedBody = hydratedLog === null && shouldUseChunkedBodyLoading(log);
   const requestPreviewBody = bodyPreviewTextForView(useChunkedBody, requestPreview);
@@ -421,10 +425,10 @@ export const LogEntry = memo(function ({
     requestPreviewShouldParse ? displayedRequestBody : null,
   );
   const rawRequestExpansion = useJsonBulkExpansion(
-    requestPreviewShouldParse ? rawRequestBodyForView : null,
+    activeTab === "raw-request" && requestPreviewShouldParse ? rawRequestBodyForView : null,
   );
   const responseExpansion = useJsonBulkExpansion(
-    responsePreviewShouldParse ? responseTextForView : null,
+    activeTab === "raw" && responsePreviewShouldParse ? responseTextForView : null,
   );
 
   // Headers are rendered as a flat list, so we copy them as pretty-printed JSON.
@@ -634,6 +638,7 @@ export const LogEntry = memo(function ({
 
   useEffect(() => {
     logIdRef.current = log.id;
+    bodyHydrationInFlightRef.current = false;
     setHydratedLog(null);
     setBodyHydrationState("idle");
     setRequestPreview(createEmptyBodyPreviewState(log.rawRequestBodyBytes ?? null));
@@ -643,9 +648,10 @@ export const LogEntry = memo(function ({
   useEffect(() => {
     if (!expanded) return;
     if (!shouldHydrateLogBody(log)) return;
-    if (hydratedLog !== null || bodyHydrationState !== "idle") return;
+    if (hydratedLog !== null || bodyHydrationInFlightRef.current) return;
 
     let cancelled = false;
+    bodyHydrationInFlightRef.current = true;
     setBodyHydrationState("loading");
     void fetchJsonWithTimeout(
       `/api/logs/${String(log.id)}`,
@@ -654,19 +660,21 @@ export const LogEntry = memo(function ({
     )
       .then((fullLog) => {
         if (cancelled) return;
+        bodyHydrationInFlightRef.current = false;
         setHydratedLog(fullLog);
         setBodyHydrationState("idle");
       })
       .catch(() => {
         if (cancelled) return;
+        bodyHydrationInFlightRef.current = false;
         setBodyHydrationState("failed");
       });
 
     return () => {
       cancelled = true;
+      bodyHydrationInFlightRef.current = false;
     };
   }, [
-    bodyHydrationState,
     expanded,
     hydratedLog,
     log.bodyContentMode,
@@ -710,14 +718,26 @@ export const LogEntry = memo(function ({
     <TooltipProvider>
       <div
         className={cn(
-          "mb-2 overflow-hidden rounded-md border bg-[#090a0d] transition-[background-color,border-color,box-shadow]",
+          "relative mb-2 overflow-hidden rounded-lg border bg-[#07090d] transition-[background-color,border-color,box-shadow]",
           expanded
-            ? "border-cyan-300/20 shadow-[0_18px_60px_rgba(0,0,0,0.28),inset_0_1px_0_rgba(255,255,255,0.05)]"
-            : "border-border/70 hover:border-border",
+            ? "border-cyan-300/25 shadow-[0_24px_80px_rgba(0,0,0,0.34),0_0_0_1px_rgba(103,232,249,0.04),inset_0_1px_0_rgba(255,255,255,0.06)]"
+            : "border-white/10 shadow-[0_6px_24px_rgba(0,0,0,0.16)] hover:border-cyan-300/15",
         )}
       >
+        <div
+          className={cn(
+            "pointer-events-none absolute inset-y-3 left-1 w-px rounded-full",
+            expanded ? "bg-cyan-300/45 shadow-[0_0_20px_rgba(103,232,249,0.28)]" : "bg-white/10",
+          )}
+          aria-hidden="true"
+        />
+        <div
+          className="pointer-events-none absolute inset-x-3 top-0 h-px bg-gradient-to-r from-transparent via-white/15 to-transparent"
+          aria-hidden="true"
+        />
         <LogEntryHeader
           log={displayLog}
+          displayNumber={displayNumber}
           messageCount={requestAnalysis.messageCount}
           toolCount={requestAnalysis.toolCount}
           expanded={expanded}
@@ -738,14 +758,18 @@ export const LogEntry = memo(function ({
 
         {expanded && (
           <div
-            className="border-t border-white/10 bg-[#050607]/80 pt-2"
+            className="relative border-t border-cyan-300/10 bg-[linear-gradient(180deg,#06090d_0%,#040506_100%)] pt-2"
             onClick={(e) => e.stopPropagation()}
             onKeyDown={(e) => e.stopPropagation()}
           >
+            <div
+              className="pointer-events-none absolute inset-x-0 top-0 h-12 bg-gradient-to-b from-cyan-300/[0.035] to-transparent"
+              aria-hidden="true"
+            />
             <Tabs value={activeTab} onValueChange={setActiveTab} className="gap-2">
               <TabsList
                 variant="line"
-                className="inspector-scrollbar mx-3 h-auto w-[calc(100%-1.5rem)] justify-start overflow-x-auto rounded-none border-b border-white/10 bg-transparent p-0"
+                className="inspector-scrollbar relative mx-3 h-auto w-[calc(100%-1.5rem)] justify-start overflow-x-auto rounded-none border-b border-cyan-300/10 bg-black/10 p-0"
               >
                 {viewMode === "full" && (
                   <TabsTrigger className={TAB_TRIGGER_CLASS} value="raw-headers">
@@ -1031,7 +1055,12 @@ export const LogEntry = memo(function ({
         )}
       </div>
       <Suspense fallback={null}>
-        <LazyReplayDialog log={displayLog} open={replayOpen} onOpenChange={setReplayOpen} />
+        <LazyReplayDialog
+          log={displayLog}
+          displayNumber={displayNumber}
+          open={replayOpen}
+          onOpenChange={setReplayOpen}
+        />
       </Suspense>
     </TooltipProvider>
   );