@tonyclaw/agent-inspector 2.1.15 → 2.1.16

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

@@ -18,7 +18,7 @@ import type { CapturedLog } from "../../contracts";
 import { ConfirmDialog } from "../ui/confirm-dialog";
 import type { Provider } from "../providers/ProviderLogo";
 import { ClientLogo, clientAppLabel, detectClientApp } from "../clients/ClientLogo";
-import { ProviderLogoStack, ROW_CHEVRON_SLOT_CLASS } from "./ProviderLogoStack";
+import { ProviderLogoStack } from "./ProviderLogoStack";
 import { resolveLogFormat } from "./log-formats";
 
 export type ConversationHeaderProps = {
@@ -31,8 +31,8 @@ export type ConversationHeaderProps = {
   expanded: boolean;
   onToggle: () => void;
   /** Unique providers whose models appear in this group, with their distinct
-   * model names. Rendered as a row of provider logos next to the header —
-   * one per provider so model-switching inside a single session is visible
+   * model names. Rendered as a row of provider logos next to the header, one
+   * per provider so model-switching inside a single session is visible.
    * at a glance. `undefined` hides the strip (default). */
   providers?: { provider: Provider; models: string[] }[];
   /** When true and the group is collapsed, show a spinner instead of the
@@ -50,6 +50,10 @@ export type ConversationHeaderProps = {
    * Only shown as a secondary label when the session lacks a real
    * `sessionId` (the same fallback path used for `clientPid`). */
   clientProjectFolder?: string | null;
+  /** Show IDE identity in the header. Parent IDE rows can disable this to avoid repetition. */
+  showClientIdentity?: boolean;
+  /** Show process/project metadata in the header. Parent process rows can disable this. */
+  showProcessMetadata?: boolean;
   /** Controls whether timestamps render as compact local time or full ISO strings. */
   timeDisplayFormat: TimeDisplayFormat;
   /** Clear all logs in this group. After confirmation the parent removes them
@@ -71,6 +75,8 @@ export function ConversationHeader({
   userAgent,
   clientPid,
   clientProjectFolder,
+  showClientIdentity = true,
+  showProcessMetadata = true,
   timeDisplayFormat,
   onClear,
 }: ConversationHeaderProps): JSX.Element {
@@ -100,6 +106,11 @@ export function ConversationHeader({
   const clientDisplayLabel = detectedClientLabel ?? userAgent ?? null;
   const clientTooltip =
     detectedClientLabel !== null && hasUserAgent ? `${detectedClientLabel} - ${userAgent}` : null;
+  const isFallbackConversation = conversationId.startsWith("PID:") || conversationId.includes("|");
+  const compactSessionLabel =
+    conversationId.length > 24
+      ? conversationId.slice(0, 12) + "..." + conversationId.slice(-12)
+      : conversationId;
 
   return (
     <div
@@ -108,10 +119,10 @@ export function ConversationHeader({
       data-nav-id={`conv-${conversationId}`}
       data-nav-action={expanded ? "collapse" : "expand"}
       className={cn(
-        "flex items-center gap-3 px-3 py-2 cursor-pointer transition-colors",
-        "hover:bg-muted/50",
+        "border border-border bg-card shadow-sm flex cursor-pointer items-center gap-3 rounded-[8px] px-3 py-2 transition-colors",
+        "hover:border-cyan-200/20",
         "select-none",
-        "border border-border rounded-lg mb-2 bg-background sticky top-0 z-10",
+        "sticky top-0 z-10 mb-2",
         "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:outline-none",
       )}
       onClick={onToggle}
@@ -126,36 +137,25 @@ 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 */}
-      <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
+          - Real session id (e.g. `sess_abc123...`) - render the id with the
             standard ellipsis truncation; show `PID <n>` as a secondary pill
             when we know the originating process.
-          - Fallback id (no sessionId was emitted) → the conversationId is
+          - Fallback id (no sessionId was emitted) - the conversationId is
             already a synthesized `PID:<n>|<folder>` marker; render the PID
             as the primary identifier (purple, same weight as a real id)
             and the project folder as a secondary muted label. */}
-      {conversationId.startsWith("PID:") || conversationId.includes("|") ? (
+      {isFallbackConversation && showProcessMetadata ? (
         <>
           {clientPid !== null && clientPid !== undefined ? (
             <span
-              className="text-purple-400/90 font-mono text-xs font-semibold shrink-0"
+              className="shrink-0 font-mono text-xs font-semibold text-violet-200"
               title={`PID ${clientPid}`}
             >
               PID {clientPid}
             </span>
           ) : (
-            <span className="text-purple-400/90 font-mono text-xs font-semibold shrink-0">
+            <span className="shrink-0 font-mono text-xs font-semibold text-violet-200">
               {conversationId}
             </span>
           )}
@@ -173,16 +173,14 @@ export function ConversationHeader({
       ) : (
         <>
           <span
-            className="text-purple-400/90 font-mono text-xs font-semibold shrink-0"
+            className="shrink-0 font-mono text-xs font-semibold text-violet-200"
             title={conversationId}
           >
-            {conversationId.length > 24
-              ? conversationId.slice(0, 12) + "..." + conversationId.slice(-12)
-              : conversationId}
+            {isFallbackConversation ? "sessionless" : compactSessionLabel}
           </span>
-          {clientPid !== null && clientPid !== undefined && (
+          {showProcessMetadata && clientPid !== null && clientPid !== undefined && (
             <span
-              className="text-muted-foreground text-xs font-mono tabular-nums shrink-0 px-1.5 py-0.5 rounded border border-border bg-muted/40"
+              className="border border-border bg-muted/40 shrink-0 rounded px-1.5 py-0.5 font-mono text-xs tabular-nums text-muted-foreground"
               title={`Client process ID ${clientPid}`}
             >
               PID {clientPid}
@@ -192,7 +190,7 @@ export function ConversationHeader({
       )}
 
       {/* Client app / User-Agent */}
-      {clientDisplayLabel !== null && clientDisplayLabel !== "" && (
+      {showClientIdentity && clientDisplayLabel !== null && clientDisplayLabel !== "" && (
         <span
           className="flex items-center gap-1 text-muted-foreground text-xs shrink-0"
           title={clientTooltip ?? clientDisplayLabel}
@@ -244,7 +242,7 @@ export function ConversationHeader({
         }}
         aria-label={`Open session ${conversationId} in a new tab`}
         title="Open this session in a new tab"
-        className="text-muted-foreground hover:text-foreground transition-colors shrink-0 inline-flex items-center justify-center size-8 rounded hover:bg-muted cursor-pointer"
+        className="border border-input bg-background hover:bg-accent hover:text-accent-foreground inline-flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-md text-muted-foreground transition-colors hover:text-foreground"
       >
         <ExternalLink className="size-3.5" />
       </button>
@@ -256,12 +254,26 @@ export function ConversationHeader({
           onClick={handleClearClick}
           aria-label={`Clear group (${totalCalls} request${totalCalls !== 1 ? "s" : ""})`}
           title="Clear this group"
-          className="text-muted-foreground hover:text-foreground transition-colors shrink-0 inline-flex items-center justify-center size-8 rounded hover:bg-muted cursor-pointer"
+          className="border border-input bg-background hover:bg-accent hover:text-accent-foreground inline-flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-md text-muted-foreground transition-colors hover:text-foreground"
         >
           <Trash2 className="size-3.5" />
         </button>
       )}
 
+      {/* Expand chevron - shows spinner when collapsed and group has pending logs */}
+      <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" />
+        ) : isLoading ? (
+          <Loader2 className="size-4 shrink-0 animate-spin" />
+        ) : (
+          <ChevronRight className="size-4 shrink-0" />
+        )}
+      </span>
+
       <ConfirmDialog
         open={confirmOpen}
         onOpenChange={setConfirmOpen}
@@ -312,10 +324,10 @@ export function hasMixedApiFormat(logs: CapturedLog[]): boolean {
 }
 
 export function getConversationId(log: CapturedLog): string {
-  if (log.isTest === true) return "provider-test";
   if (log.sessionId !== null && log.sessionId !== "" && log.sessionId !== undefined) {
     return log.sessionId;
   }
+  if (log.isTest === true) return "provider-test";
   const hasPid = log.clientPid !== null && log.clientPid !== undefined;
   const hasFolder = log.clientProjectFolder !== null && log.clientProjectFolder !== undefined;
   if (!hasPid && !hasFolder) return "default";

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 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";
+  "h-9 flex-none rounded-md border border-transparent bg-transparent px-3 text-xs font-semibold text-muted-foreground shadow-none transition-colors hover:border-white/10 hover:bg-white/[0.045] hover:text-foreground data-[state=active]:border-cyan-200/25 data-[state=active]:bg-cyan-300/[0.08] 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-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)]",
+        "border border-border bg-card shadow-sm inspector-scrollbar mx-3 mb-3 max-h-[72vh] overflow-auto rounded-[8px] p-3",
         className,
       )}
     >
@@ -151,7 +151,7 @@ function ExpandedPanel({
 
 function EmptyState({ children }: { children: ReactNode }): JSX.Element {
   return (
-    <div className="rounded-md border border-dashed border-white/10 bg-white/[0.02] px-3 py-5 text-center text-xs italic text-muted-foreground">
+    <div className="border border-border bg-muted/40 rounded-md border-dashed px-3 py-5 text-center text-xs italic text-muted-foreground">
       {children}
     </div>
   );
@@ -159,7 +159,7 @@ function EmptyState({ children }: { children: ReactNode }): JSX.Element {
 
 function RawTextBlock({ children }: { children: ReactNode }): JSX.Element {
   return (
-    <pre className="inspector-scrollbar max-h-[64vh] overflow-auto whitespace-pre-wrap break-words rounded-md border border-white/10 bg-black/30 p-3 font-mono text-xs leading-relaxed text-muted-foreground">
+    <pre className="border border-border bg-card shadow-sm inspector-scrollbar max-h-[64vh] overflow-auto whitespace-pre-wrap break-words rounded-[8px] p-3 font-mono text-xs leading-relaxed text-muted-foreground">
       {children}
     </pre>
   );
@@ -231,7 +231,7 @@ function BodyPreviewNotice({
             type="button"
             variant="outline"
             size="sm"
-            className="h-7 border-white/10 bg-black/20 text-xs text-cyan-100 hover:border-cyan-300/35 hover:bg-cyan-400/10"
+            className="border border-input bg-background hover:bg-accent hover:text-accent-foreground h-7 text-xs text-cyan-100"
             onClick={onLoadMore}
           >
             {actionLabel}
@@ -257,13 +257,13 @@ function HeaderRows({
   if (entries.length === 0) return <EmptyState>{emptyLabel}</EmptyState>;
 
   return (
-    <div className="overflow-hidden rounded-md border border-white/10 bg-black/20 font-mono text-xs">
+    <div className="border border-border bg-card shadow-sm overflow-hidden rounded-[8px] font-mono text-xs">
       {entries.map(([key, value]) => (
         <div
           key={key}
-          className="grid min-w-0 grid-cols-[minmax(140px,0.32fr)_minmax(0,1fr)] border-b border-white/5 last:border-b-0"
+          className="grid min-w-0 grid-cols-[minmax(140px,0.32fr)_minmax(0,1fr)] border-b border-white/10 last:border-b-0"
         >
-          <div className="min-w-0 truncate border-r border-white/5 bg-white/[0.03] px-2.5 py-2 font-semibold text-cyan-200">
+          <div className="min-w-0 truncate border-r border-white/10 bg-white/[0.035] px-2.5 py-2 font-semibold text-cyan-200">
             {key}
           </div>
           <div className="min-w-0 truncate px-2.5 py-2 text-muted-foreground" title={value}>
@@ -297,6 +297,8 @@ export type LogEntryProps = {
   cacheTrend?: CacheTrendEntry | null;
   /** Callback to open CompareDrawer with this log and its immediate predecessor. */
   onCompareWithPrevious?: (log: CapturedLog) => void;
+  /** Show client PID/project metadata on the log header row. */
+  showClientMetadata?: boolean;
 };
 
 function DiffToggleButton({
@@ -316,7 +318,7 @@ function DiffToggleButton({
             "h-8 border-white/10 text-xs shadow-none",
             active
               ? "bg-cyan-300 text-black hover:bg-cyan-200"
-              : "bg-[#0a0d11] text-muted-foreground 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 text-muted-foreground hover:text-cyan-100",
           )}
           onClick={onClick}
           aria-pressed={active}
@@ -370,6 +372,7 @@ export const LogEntry = memo(function ({
   timeDisplayFormat,
   cacheTrend = null,
   onCompareWithPrevious,
+  showClientMetadata = true,
 }: LogEntryProps): JSX.Element {
   const [expanded, setExpanded] = useState<boolean>(false);
   const [replayOpen, setReplayOpen] = useState<boolean>(false);
@@ -432,7 +435,7 @@ export const LogEntry = memo(function ({
   );
 
   // Headers are rendered as a flat list, so we copy them as pretty-printed JSON.
-  // Only build the string when there's at least one entry — empty headers would
+  // Only build the string when there's at least one entry; empty headers would
   // otherwise copy "{}", which is misleading.
   const headersText = useMemo(
     () =>
@@ -718,16 +721,16 @@ export const LogEntry = memo(function ({
     <TooltipProvider>
       <div
         className={cn(
-          "relative mb-2 overflow-hidden rounded-lg border bg-[#07090d] transition-[background-color,border-color,box-shadow]",
+          "border border-border bg-card shadow-sm relative mb-2 overflow-hidden rounded-[8px] transition-[background-color,border-color,box-shadow]",
           expanded
-            ? "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",
+            ? "border-cyan-200/25 shadow-[0_24px_80px_rgba(0,0,0,0.36),0_0_0_1px_rgba(103,232,249,0.05),inset_0_1px_0_rgba(255,255,255,0.14)]"
+            : "hover:border-cyan-200/18",
         )}
       >
         <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",
+            expanded ? "bg-cyan-200/55 shadow-[0_0_20px_rgba(103,232,249,0.26)]" : "bg-white/12",
           )}
           aria-hidden="true"
         />
@@ -744,6 +747,7 @@ export const LogEntry = memo(function ({
           onToggle={handleToggleExpanded}
           cacheTrend={cacheTrend}
           slowResponseThresholdSeconds={slowResponseThresholdSeconds}
+          showClientMetadata={showClientMetadata}
           timeDisplayFormat={timeDisplayFormat}
           activeTab={activeTab}
           tabActions={tabActions}
@@ -758,18 +762,18 @@ export const LogEntry = memo(function ({
 
         {expanded && (
           <div
-            className="relative border-t border-cyan-300/10 bg-[linear-gradient(180deg,#06090d_0%,#040506_100%)] pt-2"
+            className="relative border-t border-white/10 bg-black/[0.18] 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"
+              className="pointer-events-none absolute inset-x-0 top-0 h-12 bg-gradient-to-b from-white/[0.05] to-transparent"
               aria-hidden="true"
             />
             <Tabs value={activeTab} onValueChange={setActiveTab} className="gap-2">
               <TabsList
                 variant="line"
-                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"
+                className="border border-border bg-muted/40 inspector-scrollbar relative mx-3 h-auto w-[calc(100%-1.5rem)] justify-start overflow-x-auto rounded-[8px] p-1"
               >
                 {viewMode === "full" && (
                   <TabsTrigger className={TAB_TRIGGER_CLASS} value="raw-headers">

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);
@@ -233,9 +230,9 @@ export const LogEntryHeader = memo(function ({
         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]",
           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,25 +243,10 @@ 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)]",
+            "border border-border bg-muted/40 inline-flex h-8 shrink-0 items-center gap-2 rounded-md px-2 font-mono",
             statusCue.frame,
           )}
         >
@@ -275,14 +257,14 @@ export const LogEntryHeader = memo(function ({
         </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">
+        <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>
 
-        {/* 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
@@ -324,7 +306,7 @@ export const LogEntryHeader = memo(function ({
         )}
 
         {/* Elapsed time. Tooltip is only shown when this log exceeded the slow-
-            response threshold — for normal-speed logs the elapsed value is
+            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 &&
@@ -369,7 +351,7 @@ export const LogEntryHeader = memo(function ({
         {log.streaming && tokenRateLabel !== null && (
           <Tooltip>
             <TooltipTrigger asChild>
-              <span className={cn(TELEMETRY_CHIP_CLASS, "shrink-0 text-emerald-300")}>
+              <span className={cn(TELEMETRY_CHIP_CLASS, "shrink-0 text-cyan-300")}>
                 <Gauge className="size-3" />
                 <span className="font-mono tabular-nums">{tokenRateLabel}</span>
               </span>
@@ -389,7 +371,7 @@ export const LogEntryHeader = memo(function ({
                   log.inputTokens !== null ? "text-blue-400" : "text-muted-foreground",
                 )}
               >
-                IN {log.inputTokens !== null ? formatTokens(log.inputTokens) : "—"}
+                IN {log.inputTokens !== null ? formatTokens(log.inputTokens) : "n/a"}
               </span>
               <span className="text-muted-foreground">/</span>
               <span
@@ -398,7 +380,7 @@ export const LogEntryHeader = memo(function ({
                   log.outputTokens !== null ? "text-amber-400" : "text-muted-foreground",
                 )}
               >
-                OUT {log.outputTokens !== null ? formatTokens(log.outputTokens) : "—"}
+                OUT {log.outputTokens !== null ? formatTokens(log.outputTokens) : "n/a"}
               </span>
             </span>
           </span>
@@ -407,7 +389,7 @@ export const LogEntryHeader = memo(function ({
         {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">
+            <span className="font-mono tabular-nums text-cyan-300">
               KV Cache +{formatTokens(log.cacheCreationInputTokens)}
             </span>
           </span>
@@ -451,7 +433,7 @@ export const LogEntryHeader = memo(function ({
         )}
 
         {/* Client info (PID + project folder) */}
-        {(hasClientPid || hasClientProjectFolder) && (
+        {showClientMetadata && (hasClientPid || hasClientProjectFolder) && (
           <Tooltip>
             <TooltipTrigger asChild>
               <span className={cn(TELEMETRY_CHIP_CLASS, "hidden shrink-0 text-purple-300 xl:flex")}>
@@ -484,7 +466,7 @@ export const LogEntryHeader = memo(function ({
         {/* Spacer */}
         <span className="flex-1 min-w-0" />
 
-        {/* Header actions — only when expanded, so the collapsed view stays
+        {/* Header actions - only when expanded, so the collapsed view stays
             compact. Buttons stop propagation so they don't toggle the log. */}
         {expanded && (
           <span
@@ -583,7 +565,7 @@ export const LogEntryHeader = memo(function ({
                             aria-label={action.copyCopied ? "Copied" : action.copyLabel}
                           >
                             {action.copyCopied ? (
-                              <Check className="size-3.5 text-emerald-500" />
+                              <Check className="size-3.5 text-cyan-300" />
                             ) : (
                               <Copy className="size-3.5" />
                             )}
@@ -615,6 +597,17 @@ export const LogEntryHeader = memo(function ({
             )}
           </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>
   );

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

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