@tonyclaw/agent-inspector 2.1.16 → 2.1.18

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

@@ -218,6 +218,9 @@ export const LogEntryHeader = memo(function ({
     log.clientCwd !== null && log.clientCwd !== undefined && log.clientCwd !== "";
   const statusCue = STATUS_CUE_CLASSES[statusCategory];
   const statusLabel = statusCueLabel(statusCategory, log.responseStatus);
+  const showStatusBadge = statusCategory !== "success" || log.responseStatus !== 200;
+  const showStandaloneStreamingIndicator =
+    log.streaming && firstChunkLabel === null && tokenRateLabel === null;
 
   return (
     <TooltipProvider>
@@ -228,7 +231,7 @@ export const LogEntryHeader = memo(function ({
         data-nav-id={`log-${log.id}`}
         data-nav-action={expanded ? "collapse" : "expand"}
         className={cn(
-          "group/header relative isolate flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1 overflow-hidden px-3 py-2 cursor-pointer transition-[background-color,border-color,box-shadow]",
+          "group/header relative isolate flex min-w-0 cursor-pointer items-start gap-2 overflow-hidden px-3 py-2 transition-[background-color,border-color,box-shadow]",
           expanded
             ? "bg-white/[0.035] shadow-[inset_0_1px_0_rgba(255,255,255,0.10)]"
             : "bg-transparent hover:bg-white/[0.035]",
@@ -243,370 +246,377 @@ export const LogEntryHeader = memo(function ({
           }
         }}
       >
-        {/* Request ID */}
-        <span
-          className={cn(
-            "border border-border bg-muted/40 inline-flex h-8 shrink-0 items-center gap-2 rounded-md px-2 font-mono",
-            statusCue.frame,
-          )}
-        >
-          <span className={cn("size-1.5 rounded-full", statusCue.dot)} aria-hidden="true" />
-          <span className="text-xs font-semibold tabular-nums" title={`Log ID ${String(log.id)}`}>
-            #{displayNumber}
+        <span className="flex min-w-0 flex-1 flex-wrap items-center gap-x-2 gap-y-1">
+          {/* Request ID */}
+          <span
+            className={cn(
+              "border border-border bg-muted/40 inline-flex h-8 shrink-0 items-center gap-2 rounded-md px-2 font-mono",
+              statusCue.frame,
+            )}
+          >
+            <span className={cn("size-1.5 rounded-full", statusCue.dot)} aria-hidden="true" />
+            <span className="text-xs font-semibold tabular-nums" title={`Log ID ${String(log.id)}`}>
+              #{displayNumber}
+            </span>
           </span>
-        </span>
 
-        {/* Request start time */}
-        <span className="border border-border bg-muted/40 flex h-7 shrink-0 items-center gap-1 rounded-md px-2 text-xs text-muted-foreground">
-          <Clock className="size-3" />
-          <span className="font-mono tabular-nums" title={log.timestamp}>
-            {formatTimestamp(log.timestamp, timeDisplayFormat)}
+          {/* Request start time */}
+          <span className="border border-border bg-muted/40 flex h-7 shrink-0 items-center gap-1 rounded-md px-2 text-xs text-muted-foreground">
+            <Clock className="size-3" />
+            <span className="font-mono tabular-nums" title={log.timestamp}>
+              {formatTimestamp(log.timestamp, timeDisplayFormat)}
+            </span>
           </span>
-        </span>
 
-        {/* Response Status - only shown for non-200 or pending. Each category
+          {/* Response Status - only shown for non-200 or pending. Each category
             carries a distinct icon in addition to color so the meaning is
             legible without color perception. */}
-        <Badge
-          variant="outline"
-          className={cn(
-            "h-6 gap-1 rounded-md px-2 py-0 font-mono text-[10px] font-semibold uppercase tabular-nums shadow-[inset_0_1px_0_rgba(255,255,255,0.05)]",
-            STATUS_BADGE_CLASSES[statusCategory],
+          {showStatusBadge && (
+            <Badge
+              variant="outline"
+              className={cn(
+                "h-6 gap-1 rounded-md px-2 py-0 font-mono text-[10px] font-semibold uppercase tabular-nums shadow-[inset_0_1px_0_rgba(255,255,255,0.05)]",
+                STATUS_BADGE_CLASSES[statusCategory],
+              )}
+            >
+              {statusCategory === "success" ? (
+                <Check className="size-3" aria-label="Success" />
+              ) : statusCategory === "server_error" ? (
+                <OctagonAlert className="size-3" aria-label="Server error" />
+              ) : statusCategory === "client_error" ? (
+                <AlertTriangle className="size-3" aria-label="Client error" />
+              ) : (
+                <Loader2 className="size-3 animate-spin" aria-label="Pending" />
+              )}
+              {statusLabel}
+            </Badge>
           )}
-        >
-          {statusCategory === "success" ? (
-            <Check className="size-3" aria-label="Success" />
-          ) : statusCategory === "server_error" ? (
-            <OctagonAlert className="size-3" aria-label="Server error" />
-          ) : statusCategory === "client_error" ? (
-            <AlertTriangle className="size-3" aria-label="Client error" />
-          ) : (
-            <Loader2 className="size-3 animate-spin" aria-label="Pending" />
-          )}
-          {statusLabel}
-        </Badge>
 
-        {warningCount > 0 && (
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Badge
-                variant="outline"
-                className="h-6 gap-1 rounded-md border-amber-300/30 bg-amber-300/[0.10] px-2 py-0 font-mono text-[10px] tabular-nums text-amber-100"
-              >
-                <AlertTriangle className="size-3" aria-label="Tool schema warnings" />
-                {warningCount}
-              </Badge>
-            </TooltipTrigger>
-            <TooltipContent>
-              {warningCount === 1
-                ? "1 tool schema warning"
-                : `${warningCount} tool schema warnings`}
-            </TooltipContent>
-          </Tooltip>
-        )}
+          {warningCount > 0 && (
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Badge
+                  variant="outline"
+                  className="h-6 gap-1 rounded-md border-amber-300/30 bg-amber-300/[0.10] px-2 py-0 font-mono text-[10px] tabular-nums text-amber-100"
+                >
+                  <AlertTriangle className="size-3" aria-label="Tool schema warnings" />
+                  {warningCount}
+                </Badge>
+              </TooltipTrigger>
+              <TooltipContent>
+                {warningCount === 1
+                  ? "1 tool schema warning"
+                  : `${warningCount} tool schema warnings`}
+              </TooltipContent>
+            </Tooltip>
+          )}
 
-        {/* Elapsed time. Tooltip is only shown when this log exceeded the slow-
+          {/* Elapsed time. Tooltip is only shown when this log exceeded the slow-
             response threshold - for normal-speed logs the elapsed value is
             self-explanatory, so we skip the tooltip wrapper to keep the row
             quiet. */}
-        {log.elapsedMs !== null &&
-          (isSlowResponse ? (
+          {log.elapsedMs !== null &&
+            (isSlowResponse ? (
+              <Tooltip>
+                <TooltipTrigger asChild>
+                  <span
+                    className={cn(
+                      TELEMETRY_CHIP_CLASS,
+                      "shrink-0 border-amber-300/25 text-amber-200",
+                    )}
+                  >
+                    <Clock className="size-3" />
+                    <span className="font-mono tabular-nums">{formatElapsed(log.elapsedMs)}</span>
+                    <AlertTriangle className="size-3" aria-label="Slow response" />
+                  </span>
+                </TooltipTrigger>
+                <TooltipContent>
+                  Slow response: {formatElapsed(log.elapsedMs)} exceeds{" "}
+                  {formatElapsed(slowResponseThresholdSeconds * 1000)}
+                </TooltipContent>
+              </Tooltip>
+            ) : (
+              <span className={cn(TELEMETRY_CHIP_CLASS, "shrink-0 text-muted-foreground")}>
+                <Clock className="size-3" />
+                <span className="font-mono tabular-nums">{formatElapsed(log.elapsedMs)}</span>
+              </span>
+            ))}
+
+          {/* Streaming timing */}
+          {log.streaming && firstChunkLabel !== null && (
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <span className={cn(TELEMETRY_CHIP_CLASS, "shrink-0 text-cyan-300")}>
+                  <Radio className="size-3" />
+                  <span className="font-mono tabular-nums">first {firstChunkLabel}</span>
+                </span>
+              </TooltipTrigger>
+              <TooltipContent>Time to first streaming chunk</TooltipContent>
+            </Tooltip>
+          )}
+          {log.streaming && tokenRateLabel !== null && (
             <Tooltip>
               <TooltipTrigger asChild>
+                <span className={cn(TELEMETRY_CHIP_CLASS, "shrink-0 text-cyan-300")}>
+                  <Gauge className="size-3" />
+                  <span className="font-mono tabular-nums">{tokenRateLabel}</span>
+                </span>
+              </TooltipTrigger>
+              <TooltipContent>Output token throughput after first chunk</TooltipContent>
+            </Tooltip>
+          )}
+
+          {/* Token counts */}
+          {hasTokens && (
+            <span className={cn(TELEMETRY_CHIP_CLASS, "min-w-0 sm:shrink-0")}>
+              <Zap className="size-3 text-muted-foreground" />
+              <span className="flex min-w-0 flex-wrap items-center gap-x-1 font-mono tabular-nums">
                 <span
                   className={cn(
-                    TELEMETRY_CHIP_CLASS,
-                    "shrink-0 border-amber-300/25 text-amber-200",
+                    "whitespace-nowrap",
+                    log.inputTokens !== null ? "text-blue-400" : "text-muted-foreground",
                   )}
                 >
-                  <Clock className="size-3" />
-                  <span className="font-mono tabular-nums">{formatElapsed(log.elapsedMs)}</span>
-                  <AlertTriangle className="size-3" aria-label="Slow response" />
+                  IN {log.inputTokens !== null ? formatTokens(log.inputTokens) : "n/a"}
+                </span>
+                <span className="text-muted-foreground">/</span>
+                <span
+                  className={cn(
+                    "whitespace-nowrap",
+                    log.outputTokens !== null ? "text-amber-400" : "text-muted-foreground",
+                  )}
+                >
+                  OUT {log.outputTokens !== null ? formatTokens(log.outputTokens) : "n/a"}
                 </span>
-              </TooltipTrigger>
-              <TooltipContent>
-                Slow response: {formatElapsed(log.elapsedMs)} exceeds{" "}
-                {formatElapsed(slowResponseThresholdSeconds * 1000)}
-              </TooltipContent>
-            </Tooltip>
-          ) : (
-            <span className={cn(TELEMETRY_CHIP_CLASS, "shrink-0 text-muted-foreground")}>
-              <Clock className="size-3" />
-              <span className="font-mono tabular-nums">{formatElapsed(log.elapsedMs)}</span>
-            </span>
-          ))}
-
-        {/* Streaming timing */}
-        {log.streaming && firstChunkLabel !== null && (
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <span className={cn(TELEMETRY_CHIP_CLASS, "shrink-0 text-cyan-300")}>
-                <Radio className="size-3" />
-                <span className="font-mono tabular-nums">first {firstChunkLabel}</span>
-              </span>
-            </TooltipTrigger>
-            <TooltipContent>Time to first streaming chunk</TooltipContent>
-          </Tooltip>
-        )}
-        {log.streaming && tokenRateLabel !== null && (
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <span className={cn(TELEMETRY_CHIP_CLASS, "shrink-0 text-cyan-300")}>
-                <Gauge className="size-3" />
-                <span className="font-mono tabular-nums">{tokenRateLabel}</span>
-              </span>
-            </TooltipTrigger>
-            <TooltipContent>Output token throughput after first chunk</TooltipContent>
-          </Tooltip>
-        )}
-
-        {/* Token counts */}
-        {hasTokens && (
-          <span className={cn(TELEMETRY_CHIP_CLASS, "min-w-0 sm:shrink-0")}>
-            <Zap className="size-3 text-muted-foreground" />
-            <span className="flex min-w-0 flex-wrap items-center gap-x-1 font-mono tabular-nums">
-              <span
-                className={cn(
-                  "whitespace-nowrap",
-                  log.inputTokens !== null ? "text-blue-400" : "text-muted-foreground",
-                )}
-              >
-                IN {log.inputTokens !== null ? formatTokens(log.inputTokens) : "n/a"}
-              </span>
-              <span className="text-muted-foreground">/</span>
-              <span
-                className={cn(
-                  "whitespace-nowrap",
-                  log.outputTokens !== null ? "text-amber-400" : "text-muted-foreground",
-                )}
-              >
-                OUT {log.outputTokens !== null ? formatTokens(log.outputTokens) : "n/a"}
               </span>
             </span>
-          </span>
-        )}
-        {/* Cache tokens */}
-        {log.cacheCreationInputTokens !== null && log.cacheCreationInputTokens > 0 && (
-          <span className={cn(TELEMETRY_CHIP_CLASS, "shrink-0")}>
-            <CacheTrendIndicator trend={cacheTrend?.creation ?? null} />
-            <span className="font-mono tabular-nums text-cyan-300">
-              KV Cache +{formatTokens(log.cacheCreationInputTokens)}
+          )}
+          {/* Cache tokens */}
+          {log.cacheCreationInputTokens !== null && log.cacheCreationInputTokens > 0 && (
+            <span className={cn(TELEMETRY_CHIP_CLASS, "shrink-0")}>
+              <CacheTrendIndicator trend={cacheTrend?.creation ?? null} />
+              <span className="font-mono tabular-nums text-cyan-300">
+                KV Cache +{formatTokens(log.cacheCreationInputTokens)}
+              </span>
             </span>
-          </span>
-        )}
-        {log.cacheReadInputTokens !== null && log.cacheReadInputTokens > 0 && (
-          <span className={cn(TELEMETRY_CHIP_CLASS, "shrink-0")}>
-            <CacheTrendIndicator trend={cacheTrend?.read ?? null} />
-            <span className="font-mono tabular-nums text-purple-400">
-              KV Cache ~{formatTokens(log.cacheReadInputTokens)}
+          )}
+          {log.cacheReadInputTokens !== null && log.cacheReadInputTokens > 0 && (
+            <span className={cn(TELEMETRY_CHIP_CLASS, "shrink-0")}>
+              <CacheTrendIndicator trend={cacheTrend?.read ?? null} />
+              <span className="font-mono tabular-nums text-purple-400">
+                KV Cache ~{formatTokens(log.cacheReadInputTokens)}
+              </span>
             </span>
-          </span>
-        )}
-
-        {/* Message count */}
-        {messageCount !== null && (
-          <span className={cn(TELEMETRY_CHIP_CLASS, "shrink-0 text-muted-foreground")}>
-            <MessageSquare className="size-3" />
-            <span className="font-mono tabular-nums">{messageCount}</span>
-          </span>
-        )}
+          )}
 
-        {/* Tool count */}
-        {toolCount !== null && (
-          <span className={cn(TELEMETRY_CHIP_CLASS, "shrink-0 text-muted-foreground")}>
-            <Wrench className="size-3" />
-            <span className="font-mono tabular-nums">{toolCount}</span>
-          </span>
-        )}
+          {/* Message count */}
+          {messageCount !== null && (
+            <span className={cn(TELEMETRY_CHIP_CLASS, "shrink-0 text-muted-foreground")}>
+              <MessageSquare className="size-3" />
+              <span className="font-mono tabular-nums">{messageCount}</span>
+            </span>
+          )}
 
-        {/* Origin */}
-        {log.origin !== null && (
-          <span
-            className={cn(TELEMETRY_CHIP_CLASS, "hidden shrink-0 text-muted-foreground xl:flex")}
-            title={`Origin: ${log.origin}`}
-          >
-            <Globe className="size-3" />
-            <span className="font-mono tabular-nums truncate max-w-[120px]" title={log.origin}>
-              {log.origin}
+          {/* Tool count */}
+          {toolCount !== null && (
+            <span className={cn(TELEMETRY_CHIP_CLASS, "shrink-0 text-muted-foreground")}>
+              <Wrench className="size-3" />
+              <span className="font-mono tabular-nums">{toolCount}</span>
             </span>
-          </span>
-        )}
+          )}
 
-        {/* Client info (PID + project folder) */}
-        {showClientMetadata && (hasClientPid || hasClientProjectFolder) && (
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <span className={cn(TELEMETRY_CHIP_CLASS, "hidden shrink-0 text-purple-300 xl:flex")}>
-                <FileTerminal className="size-3" />
-                {hasClientProjectFolder ? (
-                  <span className="font-mono tabular-nums">{log.clientProjectFolder}</span>
-                ) : (
-                  <span className="font-mono tabular-nums">PID {log.clientPid}</span>
-                )}
+          {/* Origin */}
+          {log.origin !== null && (
+            <span
+              className={cn(TELEMETRY_CHIP_CLASS, "hidden shrink-0 text-muted-foreground xl:flex")}
+              title={`Origin: ${log.origin}`}
+            >
+              <Globe className="size-3" />
+              <span className="font-mono tabular-nums truncate max-w-[120px]" title={log.origin}>
+                {log.origin}
               </span>
-            </TooltipTrigger>
-            <TooltipContent>
-              {hasClientCwd
-                ? `PID: ${log.clientPid ?? "?"}  CWD: ${log.clientCwd}`
-                : `Process ID: ${log.clientPid ?? "?"}`}
-            </TooltipContent>
-          </Tooltip>
-        )}
+            </span>
+          )}
 
-        {/* Streaming indicator */}
-        {log.streaming && (
-          <Tooltip>
-            <TooltipTrigger asChild>
-              <Radio className="size-3 text-muted-foreground/60 shrink-0" />
-            </TooltipTrigger>
-            <TooltipContent>Request used SSE streaming</TooltipContent>
-          </Tooltip>
-        )}
+          {/* Client info (PID + project folder) */}
+          {showClientMetadata && (hasClientPid || hasClientProjectFolder) && (
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <span
+                  className={cn(TELEMETRY_CHIP_CLASS, "hidden shrink-0 text-purple-300 xl:flex")}
+                >
+                  <FileTerminal className="size-3" />
+                  {hasClientProjectFolder ? (
+                    <span className="font-mono tabular-nums">{log.clientProjectFolder}</span>
+                  ) : (
+                    <span className="font-mono tabular-nums">PID {log.clientPid}</span>
+                  )}
+                </span>
+              </TooltipTrigger>
+              <TooltipContent>
+                {hasClientCwd
+                  ? `PID: ${log.clientPid ?? "?"}  CWD: ${log.clientCwd}`
+                  : `Process ID: ${log.clientPid ?? "?"}`}
+              </TooltipContent>
+            </Tooltip>
+          )}
 
-        {/* Spacer */}
-        <span className="flex-1 min-w-0" />
+          {/* Streaming indicator */}
+          {showStandaloneStreamingIndicator && (
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <Radio className="size-3 text-muted-foreground/60 shrink-0" />
+              </TooltipTrigger>
+              <TooltipContent>Request used SSE streaming</TooltipContent>
+            </Tooltip>
+          )}
+        </span>
 
-        {/* Header actions - only when expanded, so the collapsed view stays
+        <span className="flex shrink-0 items-start gap-1.5">
+          {/* Header actions - only when expanded, so the collapsed view stays
             compact. Buttons stop propagation so they don't toggle the log. */}
-        {expanded && (
+          {expanded && (
+            <span
+              className="flex items-center gap-1.5 shrink-0"
+              onClick={(e) => e.stopPropagation()}
+              onKeyDown={(e) => e.stopPropagation()}
+            >
+              {tabActions !== undefined &&
+                activeTab !== undefined &&
+                (() => {
+                  const action = tabActions[activeTab];
+                  if (action === undefined) return null;
+                  return (
+                    <>
+                      {action.expansion !== null && (
+                        <Tooltip>
+                          <TooltipTrigger asChild>
+                            <Button
+                              variant="outline"
+                              size="icon"
+                              className={HEADER_ACTION_BUTTON_CLASS}
+                              onClick={action.expansion.onToggle}
+                              disabled={action.expansion.isPending}
+                              aria-pressed={action.expansion.isExpanded}
+                              aria-label={
+                                action.expansion.isExpanded
+                                  ? "Collapse all JSON"
+                                  : "Expand all JSON"
+                              }
+                            >
+                              {action.expansion.isExpanded ? (
+                                <ChevronsUp className="size-3.5" />
+                              ) : (
+                                <ChevronsDown className="size-3.5" />
+                              )}
+                            </Button>
+                          </TooltipTrigger>
+                          <TooltipContent>
+                            {action.expansion.isExpanded
+                              ? "Collapse all JSON nodes"
+                              : "Expand all JSON nodes"}
+                          </TooltipContent>
+                        </Tooltip>
+                      )}
+                      {action.diffWithRaw !== undefined && (
+                        <Tooltip>
+                          <TooltipTrigger asChild>
+                            <Button
+                              variant="outline"
+                              size="icon"
+                              className={cn(
+                                HEADER_ACTION_BUTTON_CLASS,
+                                action.diffWithRaw.active &&
+                                  "border-cyan-300/35 bg-cyan-400/15 text-cyan-100",
+                              )}
+                              onClick={action.diffWithRaw.onToggle}
+                              aria-pressed={action.diffWithRaw.active}
+                              aria-label={
+                                action.diffWithRaw.active ? "Hide raw diff" : "Diff with raw"
+                              }
+                            >
+                              <FileDiff className="size-3.5" />
+                            </Button>
+                          </TooltipTrigger>
+                          <TooltipContent>
+                            {action.diffWithRaw.active
+                              ? "Hide diff with raw request"
+                              : "Show diff between displayed and raw request body"}
+                          </TooltipContent>
+                        </Tooltip>
+                      )}
+                      {action.diffWithPrevious !== undefined && (
+                        <Tooltip>
+                          <TooltipTrigger asChild>
+                            <Button
+                              variant="outline"
+                              size="icon"
+                              className={HEADER_ACTION_BUTTON_CLASS}
+                              onClick={action.diffWithPrevious}
+                              aria-label="Diff with previous"
+                            >
+                              <History className="size-3.5" />
+                            </Button>
+                          </TooltipTrigger>
+                          <TooltipContent>
+                            Compare this request with the immediately preceding one
+                          </TooltipContent>
+                        </Tooltip>
+                      )}
+                      {action.copyText !== null && (
+                        <Tooltip>
+                          <TooltipTrigger asChild>
+                            <Button
+                              variant="outline"
+                              size="icon"
+                              className={HEADER_ACTION_BUTTON_CLASS}
+                              onClick={action.onCopy}
+                              aria-label={action.copyCopied ? "Copied" : action.copyLabel}
+                            >
+                              {action.copyCopied ? (
+                                <Check className="size-3.5 text-cyan-300" />
+                              ) : (
+                                <Copy className="size-3.5" />
+                              )}
+                            </Button>
+                          </TooltipTrigger>
+                          <TooltipContent>
+                            {action.copyCopied ? "Copied to clipboard" : action.copyLabel}
+                          </TooltipContent>
+                        </Tooltip>
+                      )}
+                    </>
+                  );
+                })()}
+              {onReplay !== undefined && (
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <Button
+                      variant="outline"
+                      size="icon"
+                      className={HEADER_ACTION_BUTTON_CLASS}
+                      onClick={onReplay}
+                      aria-label="Replay request"
+                    >
+                      <RotateCcw className="size-3.5" />
+                    </Button>
+                  </TooltipTrigger>
+                  <TooltipContent>Re-send this request to the provider</TooltipContent>
+                </Tooltip>
+              )}
+            </span>
+          )}
+
           <span
-            className="flex items-center gap-1.5 shrink-0"
-            onClick={(e) => e.stopPropagation()}
-            onKeyDown={(e) => e.stopPropagation()}
+            className="border border-input bg-background hover:bg-accent hover:text-accent-foreground inline-flex size-8 shrink-0 items-center justify-center rounded-md text-slate-200"
+            aria-hidden="true"
           >
-            {tabActions !== undefined &&
-              activeTab !== undefined &&
-              (() => {
-                const action = tabActions[activeTab];
-                if (action === undefined) return null;
-                return (
-                  <>
-                    {action.expansion !== null && (
-                      <Tooltip>
-                        <TooltipTrigger asChild>
-                          <Button
-                            variant="outline"
-                            size="icon"
-                            className={HEADER_ACTION_BUTTON_CLASS}
-                            onClick={action.expansion.onToggle}
-                            disabled={action.expansion.isPending}
-                            aria-pressed={action.expansion.isExpanded}
-                            aria-label={
-                              action.expansion.isExpanded ? "Collapse all JSON" : "Expand all JSON"
-                            }
-                          >
-                            {action.expansion.isExpanded ? (
-                              <ChevronsUp className="size-3.5" />
-                            ) : (
-                              <ChevronsDown className="size-3.5" />
-                            )}
-                          </Button>
-                        </TooltipTrigger>
-                        <TooltipContent>
-                          {action.expansion.isExpanded
-                            ? "Collapse all JSON nodes"
-                            : "Expand all JSON nodes"}
-                        </TooltipContent>
-                      </Tooltip>
-                    )}
-                    {action.diffWithRaw !== undefined && (
-                      <Tooltip>
-                        <TooltipTrigger asChild>
-                          <Button
-                            variant="outline"
-                            size="icon"
-                            className={cn(
-                              HEADER_ACTION_BUTTON_CLASS,
-                              action.diffWithRaw.active &&
-                                "border-cyan-300/35 bg-cyan-400/15 text-cyan-100",
-                            )}
-                            onClick={action.diffWithRaw.onToggle}
-                            aria-pressed={action.diffWithRaw.active}
-                            aria-label={
-                              action.diffWithRaw.active ? "Hide raw diff" : "Diff with raw"
-                            }
-                          >
-                            <FileDiff className="size-3.5" />
-                          </Button>
-                        </TooltipTrigger>
-                        <TooltipContent>
-                          {action.diffWithRaw.active
-                            ? "Hide diff with raw request"
-                            : "Show diff between displayed and raw request body"}
-                        </TooltipContent>
-                      </Tooltip>
-                    )}
-                    {action.diffWithPrevious !== undefined && (
-                      <Tooltip>
-                        <TooltipTrigger asChild>
-                          <Button
-                            variant="outline"
-                            size="icon"
-                            className={HEADER_ACTION_BUTTON_CLASS}
-                            onClick={action.diffWithPrevious}
-                            aria-label="Diff with previous"
-                          >
-                            <History className="size-3.5" />
-                          </Button>
-                        </TooltipTrigger>
-                        <TooltipContent>
-                          Compare this request with the immediately preceding one
-                        </TooltipContent>
-                      </Tooltip>
-                    )}
-                    {action.copyText !== null && (
-                      <Tooltip>
-                        <TooltipTrigger asChild>
-                          <Button
-                            variant="outline"
-                            size="icon"
-                            className={HEADER_ACTION_BUTTON_CLASS}
-                            onClick={action.onCopy}
-                            aria-label={action.copyCopied ? "Copied" : action.copyLabel}
-                          >
-                            {action.copyCopied ? (
-                              <Check className="size-3.5 text-cyan-300" />
-                            ) : (
-                              <Copy className="size-3.5" />
-                            )}
-                          </Button>
-                        </TooltipTrigger>
-                        <TooltipContent>
-                          {action.copyCopied ? "Copied to clipboard" : action.copyLabel}
-                        </TooltipContent>
-                      </Tooltip>
-                    )}
-                  </>
-                );
-              })()}
-            {onReplay !== undefined && (
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <Button
-                    variant="outline"
-                    size="icon"
-                    className={HEADER_ACTION_BUTTON_CLASS}
-                    onClick={onReplay}
-                    aria-label="Replay request"
-                  >
-                    <RotateCcw className="size-3.5" />
-                  </Button>
-                </TooltipTrigger>
-                <TooltipContent>Re-send this request to the provider</TooltipContent>
-              </Tooltip>
+            {expanded ? (
+              <ChevronDown className="size-4 shrink-0" />
+            ) : (
+              <ChevronRight className="size-4 shrink-0" />
             )}
           </span>
-        )}
-
-        <span
-          className="border border-input bg-background hover:bg-accent hover:text-accent-foreground inline-flex size-8 shrink-0 items-center justify-center rounded-md text-slate-200"
-          aria-hidden="true"
-        >
-          {expanded ? (
-            <ChevronDown className="size-4 shrink-0" />
-          ) : (
-            <ChevronRight className="size-4 shrink-0" />
-          )}
         </span>
       </div>
     </TooltipProvider>