@tonyclaw/agent-inspector 2.1.15 → 2.1.17

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

@@ -32,10 +32,9 @@ import { Badge } from "../ui/badge";
 import { Button } from "../ui/button";
 import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from "../ui/tooltip";
 import type { CacheTrend } from "./cacheTrend";
-import { ROW_CHEVRON_SLOT_CLASS } from "./ProviderLogoStack";
 
 const STATUS_BADGE_CLASSES: Record<StatusCategory, string> = {
-  success: "bg-emerald-400/[0.08] text-emerald-200 border-emerald-300/25",
+  success: "bg-slate-300/[0.08] text-slate-100 border-slate-300/20",
   client_error: "bg-amber-300/[0.10] text-amber-100 border-amber-300/30",
   server_error: "bg-rose-400/[0.10] text-rose-100 border-rose-300/30",
   pending: "bg-cyan-300/[0.08] text-cyan-100 border-cyan-300/25",
@@ -46,36 +45,31 @@ const STATUS_CUE_CLASSES: Record<
   {
     frame: string;
     dot: string;
-    rail: string;
   }
 > = {
   success: {
-    frame: "border-emerald-300/20 bg-emerald-300/[0.06] text-emerald-100",
-    dot: "bg-emerald-300 shadow-[0_0_14px_rgba(110,231,183,0.8)]",
-    rail: "bg-emerald-300/45 shadow-[0_0_22px_rgba(110,231,183,0.28)]",
+    frame: "border-cyan-200/15 bg-white/[0.04] text-slate-100",
+    dot: "bg-cyan-200/80 shadow-[0_0_14px_rgba(125,211,252,0.65)]",
   },
   client_error: {
     frame: "border-amber-300/25 bg-amber-300/[0.08] text-amber-100",
     dot: "bg-amber-200 shadow-[0_0_14px_rgba(252,211,77,0.8)]",
-    rail: "bg-amber-300/50 shadow-[0_0_22px_rgba(252,211,77,0.28)]",
   },
   server_error: {
     frame: "border-rose-300/25 bg-rose-300/[0.08] text-rose-100",
     dot: "bg-rose-300 shadow-[0_0_14px_rgba(253,164,175,0.8)]",
-    rail: "bg-rose-300/50 shadow-[0_0_22px_rgba(253,164,175,0.28)]",
   },
   pending: {
     frame: "border-cyan-300/25 bg-cyan-300/[0.08] text-cyan-100",
     dot: "bg-cyan-200 shadow-[0_0_14px_rgba(103,232,249,0.8)]",
-    rail: "bg-cyan-300/50 shadow-[0_0_22px_rgba(103,232,249,0.28)]",
   },
 };
 
 const HEADER_ACTION_BUTTON_CLASS =
-  "size-8 border-white/10 bg-[#0a0d11] text-muted-foreground shadow-none hover:border-cyan-300/30 hover:bg-cyan-400/10 hover:text-cyan-100";
+  "border border-input bg-background hover:bg-accent hover:text-accent-foreground size-8 text-muted-foreground shadow-none hover:text-cyan-100";
 
 const TELEMETRY_CHIP_CLASS =
-  "flex h-7 items-center gap-1 rounded-md border border-white/10 bg-black/20 px-2 text-xs shadow-[inset_0_1px_0_rgba(255,255,255,0.04)]";
+  "border border-border bg-muted/40 flex h-7 items-center gap-1 rounded-md px-2 text-xs";
 
 function formatElapsed(ms: number): string {
   if (ms < 1000) return `${ms}ms`;
@@ -101,7 +95,7 @@ function statusCueLabel(category: StatusCategory, status: number | null): string
 }
 
 /**
- * Inline trend indicator: small arrow (green up / red down) plus the absolute
+ * Inline trend indicator: small arrow (up / down) plus the absolute
  * delta in compact form. Returns `null` when there is no trend to display.
  */
 function CacheTrendIndicator({ trend }: { trend: CacheTrend | null }): JSX.Element | null {
@@ -111,7 +105,7 @@ function CacheTrendIndicator({ trend }: { trend: CacheTrend | null }): JSX.Eleme
   const sign = isUp ? "+" : "-";
   return (
     <span className="flex items-center gap-0.5 text-muted-foreground tabular-nums">
-      <Icon className={isUp ? "size-3 text-emerald-400" : "size-3 text-rose-400"} />
+      <Icon className={isUp ? "size-3 text-cyan-300" : "size-3 text-rose-400"} />
       <span className="font-mono">
         {sign}
         {formatTokens(trend.delta)}
@@ -122,12 +116,12 @@ function CacheTrendIndicator({ trend }: { trend: CacheTrend | null }): JSX.Eleme
 
 /**
  * Per-tab action bundle surfaced in the header when the tab is active.
- * - `copyText === null` → Copy button hidden (e.g. tab has no body to copy)
- * - `expansion === null` → Expand-all button hidden (e.g. flat dict, or
+ * - `copyText === null` - Copy button hidden (e.g. tab has no body to copy)
+ * - `expansion === null` - Expand-all button hidden (e.g. flat dict, or
  *   not valid JSON). When present, the button reflects the JSON viewer's
  *   bulk-expansion state and the caller is responsible for forwarding the
  *   matching `bulkDepth` / `bulkRevision` to the underlying viewer.
- * - `diffWithRaw` / `diffWithPrevious` → optional Diff buttons. Undefined
+ * - `diffWithRaw` / `diffWithPrevious` - optional Diff buttons. Undefined
  *   means "not applicable" (hidden). Today only the Request tab sets them.
  */
 export type HeaderTabAction = {
@@ -181,6 +175,8 @@ export type LogEntryHeaderProps = {
   onReplay?: () => void;
   /** Slow-response threshold in seconds. `0` disables the warning indicator. */
   slowResponseThresholdSeconds?: number;
+  /** Show client PID/project metadata on each log row. Parent process rows can disable this. */
+  showClientMetadata?: boolean;
   /** Controls whether timestamps render as compact local time or full ISO strings. */
   timeDisplayFormat: TimeDisplayFormat;
 };
@@ -197,6 +193,7 @@ export const LogEntryHeader = memo(function ({
   tabActions,
   onReplay,
   slowResponseThresholdSeconds = 0,
+  showClientMetadata = true,
   timeDisplayFormat,
 }: LogEntryHeaderProps): JSX.Element {
   const statusCategory = getStatusCategory(log.responseStatus);
@@ -221,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>
@@ -231,11 +231,11 @@ 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-[linear-gradient(90deg,#0f1720_0%,#090d12_50%,#07090d_100%)] shadow-[inset_0_1px_0_rgba(255,255,255,0.06)]"
-            : "bg-[#080b10] hover:bg-[#0b1016]",
-          "select-none before:pointer-events-none before:absolute before:inset-x-0 before:top-0 before:h-px before:bg-white/10",
+            ? "bg-white/[0.035] shadow-[inset_0_1px_0_rgba(255,255,255,0.10)]"
+            : "bg-transparent hover:bg-white/[0.035]",
+          "select-none before:pointer-events-none before:absolute before:inset-x-3 before:top-0 before:h-px before:bg-white/12",
           "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:outline-none",
         )}
         onClick={onToggle}
@@ -246,375 +246,378 @@ export const LogEntryHeader = memo(function ({
           }
         }}
       >
-        <span
-          className={cn(
-            "absolute left-0 top-2 bottom-2 w-0.5 rounded-r-full transition-colors",
-            statusCue.rail,
-          )}
-          aria-hidden="true"
-        />
-        <span className={ROW_CHEVRON_SLOT_CLASS}>
-          {expanded ? (
-            <ChevronDown className="size-4 shrink-0" />
-          ) : (
-            <ChevronRight className="size-4 shrink-0" />
-          )}
-        </span>
-
-        {/* Request ID */}
-        <span
-          className={cn(
-            "inline-flex h-8 shrink-0 items-center gap-2 rounded-md border px-2 font-mono shadow-[inset_0_1px_0_rgba(255,255,255,0.05)]",
-            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="flex h-7 items-center gap-1 rounded-md border border-white/10 bg-black/20 px-2 text-muted-foreground text-xs shrink-0">
-          <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>
-        )}
 
-        {/* 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 ? (
+          {warningCount > 0 && (
             <Tooltip>
               <TooltipTrigger asChild>
-                <span
-                  className={cn(
-                    TELEMETRY_CHIP_CLASS,
-                    "shrink-0 border-amber-300/25 text-amber-200",
-                  )}
+                <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"
                 >
-                  <Clock className="size-3" />
-                  <span className="font-mono tabular-nums">{formatElapsed(log.elapsedMs)}</span>
-                  <AlertTriangle className="size-3" aria-label="Slow response" />
-                </span>
+                  <AlertTriangle className="size-3" aria-label="Tool schema warnings" />
+                  {warningCount}
+                </Badge>
               </TooltipTrigger>
               <TooltipContent>
-                Slow response: {formatElapsed(log.elapsedMs)} exceeds{" "}
-                {formatElapsed(slowResponseThresholdSeconds * 1000)}
+                {warningCount === 1
+                  ? "1 tool schema warning"
+                  : `${warningCount} tool schema warnings`}
               </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-emerald-300")}>
-                <Gauge className="size-3" />
-                <span className="font-mono tabular-nums">{tokenRateLabel}</span>
+          {/* 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 ? (
+              <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>
-            </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) : "—"}
-              </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) : "—"}
+          {/* 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>
-          </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-emerald-400">
-              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) */}
-        {(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-emerald-500" />
-                            ) : (
-                              <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>
       </div>
     </TooltipProvider>
   );