@tonyclaw/llm-inspector 1.18.2 → 1.19.0

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

@@ -1,13 +1,14 @@
-import { Check, Copy, GitCompareArrows } from "lucide-react";
+import { GitCompareArrows } from "lucide-react";
 import { Suspense, type JSX } from "react";
-import { useCallback, useEffect, useMemo, useRef, useState, memo } from "react";
+import { useMemo, useRef, useState, memo } from "react";
 import type { CapturedLog } from "../../proxy/schemas";
 import { stripClaudeCodeBillingHeader } from "../../proxy/claudeCodeStrip";
 import { Button } from "../ui/button";
 import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from "../ui/tooltip";
-import { JsonExpansionButton } from "../ui/json-expansion-button";
 import { useJsonBulkExpansion } from "../ui/json-viewer-bulk";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "../ui/tabs";
+import { useCopyFeedback } from "./useCopyFeedback";
+import type { HeaderTabActions } from "./LogEntryHeader";
 import {
   LazyJsonViewer,
   LazyJsonViewerFromString,
@@ -56,41 +57,6 @@ export type LogEntryProps = {
   onCompareWithPrevious?: (log: CapturedLog) => void;
 };
 
-function CopyButton({
-  text,
-  label,
-  copied,
-  onCopy,
-}: {
-  text: string | null;
-  label: string;
-  copied: boolean;
-  onCopy: (e: React.MouseEvent) => void;
-}): JSX.Element | null {
-  if (text === null) return null;
-  return (
-    <Tooltip>
-      <TooltipTrigger asChild>
-        <Button
-          variant="outline"
-          size="sm"
-          className="h-8 text-xs"
-          onClick={onCopy}
-          aria-label={label}
-        >
-          {copied ? (
-            <Check className="size-3.5 mr-1 text-emerald-500" />
-          ) : (
-            <Copy className="size-3.5 mr-1" />
-          )}
-          {copied ? "Copied!" : label}
-        </Button>
-      </TooltipTrigger>
-      <TooltipContent>{copied ? "Copied to clipboard" : label}</TooltipContent>
-    </Tooltip>
-  );
-}
-
 function DiffToggleButton({
   active,
   onClick,
@@ -148,36 +114,6 @@ const HeadersDiffContent = memo(function ({
   return <DiffView result={result} emptyLabel={emptyLabel} />;
 });
 
-function useCopyFeedback(text: string | null): {
-  copied: boolean;
-  copy: (event: React.MouseEvent) => void;
-} {
-  const [copied, setCopied] = useState(false);
-  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
-
-  useEffect(
-    () => () => {
-      if (timerRef.current !== null) clearTimeout(timerRef.current);
-    },
-    [],
-  );
-
-  const copy = useCallback(
-    (event: React.MouseEvent) => {
-      event.stopPropagation();
-      if (text === null) return;
-      void window.navigator.clipboard.writeText(text).then(() => {
-        setCopied(true);
-        if (timerRef.current !== null) clearTimeout(timerRef.current);
-        timerRef.current = setTimeout(() => setCopied(false), 2000);
-      });
-    },
-    [text],
-  );
-
-  return { copied, copy };
-}
-
 export const LogEntry = memo(function ({
   log,
   viewMode = "simple",
@@ -210,11 +146,128 @@ export const LogEntry = memo(function ({
     return stripClaudeCodeBillingHeader(log.rawRequestBody).body;
   }, [log.rawRequestBody, resolvedFormat, strip]);
   const displayedRequestBody = strippedRequestBody ?? log.rawRequestBody;
+  const requestExpansion = useJsonBulkExpansion(displayedRequestBody);
+  const rawRequestExpansion = useJsonBulkExpansion(log.rawRequestBody);
+  const responseExpansion = useJsonBulkExpansion(log.responseText);
+
+  // 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
+  // otherwise copy "{}", which is misleading.
+  const headersText = useMemo(
+    () =>
+      log.headers && Object.keys(log.headers).length > 0
+        ? JSON.stringify(log.headers, null, 2)
+        : null,
+    [log.headers],
+  );
+  const rawHeadersText = useMemo(
+    () =>
+      log.rawHeaders && Object.keys(log.rawHeaders).length > 0
+        ? JSON.stringify(log.rawHeaders, null, 2)
+        : null,
+    [log.rawHeaders],
+  );
+
+  // One copy-feedback hook per JSON-bearing tab, so each tab can surface its
+  // own Copy button in the header with independent "Copied!" feedback.
   const requestCopy = useCopyFeedback(displayedRequestBody);
   const rawRequestCopy = useCopyFeedback(log.rawRequestBody);
+  const headersCopy = useCopyFeedback(headersText);
+  const rawHeadersCopy = useCopyFeedback(rawHeadersText);
   const responseCopy = useCopyFeedback(log.responseText);
-  const requestExpansion = useJsonBulkExpansion(displayedRequestBody);
-  const rawRequestExpansion = useJsonBulkExpansion(log.rawRequestBody);
+
+  // Per-tab action bundles consumed by the header. The header renders the
+  // entry whose key matches `activeTab`. Tabs without an entry (Anatomy,
+  // Parsed Response) render no header buttons.
+  const tabActions: HeaderTabActions = useMemo(
+    () => ({
+      request: {
+        copyLabel: "Copy request body",
+        copyText: displayedRequestBody,
+        copyCopied: requestCopy.copied,
+        onCopy: requestCopy.copy,
+        expansion: {
+          isExpanded: requestExpansion.isExpanded,
+          isPending: requestExpansion.isPending,
+          onToggle: requestExpansion.toggle,
+        },
+        // "Diff with Raw" only makes sense when there's a raw body to compare
+        // against (Anthropic + strip pipeline produces one). "Diff with
+        // Previous" only exists when the parent wired up the compare drawer.
+        diffWithRaw: shouldShowRequestDiffButton(
+          resolvedFormat,
+          viewMode,
+          strip,
+          log.rawRequestBody !== null,
+        )
+          ? { active: requestDiff, onToggle: () => setRequestDiff(!requestDiff) }
+          : undefined,
+        diffWithPrevious:
+          onCompareWithPrevious === undefined
+            ? undefined
+            : () => {
+                onCompareWithPrevious(log);
+              },
+      },
+      "raw-request": {
+        copyLabel: "Copy raw request",
+        copyText: log.rawRequestBody,
+        copyCopied: rawRequestCopy.copied,
+        onCopy: rawRequestCopy.copy,
+        expansion: {
+          isExpanded: rawRequestExpansion.isExpanded,
+          isPending: rawRequestExpansion.isPending,
+          onToggle: rawRequestExpansion.toggle,
+        },
+      },
+      headers: {
+        copyLabel: "Copy headers",
+        copyText: headersText,
+        copyCopied: headersCopy.copied,
+        onCopy: headersCopy.copy,
+        // Headers are a flat dict, no JSON tree to expand.
+        expansion: null,
+      },
+      "raw-headers": {
+        copyLabel: "Copy raw headers",
+        copyText: rawHeadersText,
+        copyCopied: rawHeadersCopy.copied,
+        onCopy: rawHeadersCopy.copy,
+        expansion: null,
+      },
+      raw: {
+        copyLabel: "Copy response",
+        copyText: log.responseText,
+        copyCopied: responseCopy.copied,
+        onCopy: responseCopy.copy,
+        expansion: {
+          isExpanded: responseExpansion.isExpanded,
+          isPending: responseExpansion.isPending,
+          onToggle: responseExpansion.toggle,
+        },
+      },
+    }),
+    [
+      displayedRequestBody,
+      requestCopy,
+      requestExpansion,
+      requestDiff,
+      log.rawRequestBody,
+      rawRequestCopy,
+      rawRequestExpansion,
+      headersText,
+      headersCopy,
+      rawHeadersText,
+      rawHeadersCopy,
+      log.responseText,
+      responseCopy,
+      responseExpansion,
+      resolvedFormat,
+      viewMode,
+      strip,
+      onCompareWithPrevious,
+    ],
+  );
   const anatomySegments = useMemo(
     () =>
       requestExpansion.parsedData !== null
@@ -246,6 +299,8 @@ export const LogEntry = memo(function ({
           responseToolNames={responseAnalysis.toolNames}
           cacheTrend={cacheTrend}
           slowResponseThresholdSeconds={slowResponseThresholdSeconds}
+          activeTab={activeTab}
+          tabActions={tabActions}
           onReplay={
             onCompareWithPrevious === undefined
               ? undefined
@@ -253,23 +308,6 @@ export const LogEntry = memo(function ({
                   setReplayOpen(true);
                 }
           }
-          onCopyRequest={
-            displayedRequestBody === null
-              ? undefined
-              : (e) => {
-                  requestCopy.copy(e);
-                }
-          }
-          requestCopied={requestCopy.copied}
-          onToggleRequestExpansion={requestExpansion.toggle}
-          requestExpansionState={
-            requestExpansion.policy === null
-              ? null
-              : {
-                  isExpanded: requestExpansion.isExpanded,
-                  isPending: requestExpansion.isPending,
-                }
-          }
         />
 
         {expanded && (
@@ -291,20 +329,6 @@ export const LogEntry = memo(function ({
                 <TabsContent value="raw-request">
                   {activeTab === "raw-request" && (
                     <div className="px-4 pt-1 pb-3">
-                      <div className="flex justify-end gap-2 mb-2">
-                        <JsonExpansionButton
-                          policy={rawRequestExpansion.policy}
-                          isExpanded={rawRequestExpansion.isExpanded}
-                          isPending={rawRequestExpansion.isPending}
-                          onToggle={rawRequestExpansion.toggle}
-                        />
-                        <CopyButton
-                          text={log.rawRequestBody}
-                          label="Copy"
-                          copied={rawRequestCopy.copied}
-                          onCopy={rawRequestCopy.copy}
-                        />
-                      </div>
                       {log.rawRequestBody === null ? (
                         <p className="text-xs text-muted-foreground italic">No request body</p>
                       ) : rawRequestExpansion.parsedData !== null ? (
@@ -328,53 +352,9 @@ export const LogEntry = memo(function ({
               <TabsContent value="request">
                 {activeTab === "request" && (
                   <div className="px-4 pt-1 pb-3">
-                    {/* Per-tab secondary actions (diff toggles, compare-with-previous).
-                        Replay / Copy / Expand-all JSON now live in the header. */}
-                    {(shouldShowRequestDiffButton(
-                      resolvedFormat,
-                      viewMode,
-                      strip,
-                      log.rawRequestBody !== null,
-                    ) ||
-                      onCompareWithPrevious !== undefined) && (
-                      <div className="flex justify-end gap-2 mb-2">
-                        {shouldShowRequestDiffButton(
-                          resolvedFormat,
-                          viewMode,
-                          strip,
-                          log.rawRequestBody !== null,
-                        ) && (
-                          <DiffToggleButton
-                            active={requestDiff}
-                            onClick={(e) => {
-                              e.stopPropagation();
-                              setRequestDiff(!requestDiff);
-                            }}
-                          />
-                        )}
-                        {onCompareWithPrevious !== undefined && (
-                          <Tooltip>
-                            <TooltipTrigger asChild>
-                              <Button
-                                variant="outline"
-                                size="sm"
-                                className="h-8 text-xs"
-                                onClick={(e) => {
-                                  e.stopPropagation();
-                                  onCompareWithPrevious(log);
-                                }}
-                              >
-                                <GitCompareArrows className="size-3 mr-1" />
-                                Diff with Previous
-                              </Button>
-                            </TooltipTrigger>
-                            <TooltipContent>
-                              Compare this request with the immediately preceding one
-                            </TooltipContent>
-                          </Tooltip>
-                        )}
-                      </div>
-                    )}
+                    {/* All tab actions (Copy, Expand, Diff with Raw, Diff with
+                        Previous) live in the log header. The body is just
+                        the diff or JSON view, depending on toggle state. */}
                     {requestDiff ? (
                       <RequestDiffContent
                         rawBody={log.rawRequestBody}
@@ -425,6 +405,7 @@ export const LogEntry = memo(function ({
                 <TabsContent value="headers">
                   {activeTab === "headers" && (
                     <div className="px-4 pt-1 pb-3">
+                      {/* Copy lives in the log header. */}
                       <div className="flex justify-end gap-2 mb-2">
                         {shouldShowHeadersDiffButton(
                           viewMode,
@@ -472,6 +453,7 @@ export const LogEntry = memo(function ({
                 <TabsContent value="raw-headers">
                   {activeTab === "raw-headers" && (
                     <div className="px-4 pt-1 pb-3">
+                      {/* Copy lives in the log header. */}
                       {log.rawHeaders && Object.keys(log.rawHeaders).length > 0 ? (
                         <div className="space-y-1 font-mono text-xs">
                           {Object.entries(log.rawHeaders)
@@ -506,17 +488,14 @@ export const LogEntry = memo(function ({
                         <div className="text-muted-foreground font-mono">{log.error}</div>
                       </div>
                     )}
-                    <div className="flex justify-end">
-                      <CopyButton
-                        text={log.responseText}
-                        label="Copy"
-                        copied={responseCopy.copied}
-                        onCopy={responseCopy.copy}
-                      />
-                    </div>
                     {log.responseText !== null ? (
                       <Suspense fallback={<TabFallback />}>
-                        <LazyJsonViewerFromString text={log.responseText} defaultExpandDepth={0} />
+                        <LazyJsonViewerFromString
+                          text={log.responseText}
+                          defaultExpandDepth={0}
+                          bulkDepth={responseExpansion.bulkDepth}
+                          bulkRevision={responseExpansion.bulkRevision}
+                        />
                       </Suspense>
                     ) : (
                       <p className="text-xs text-muted-foreground italic">No response</p>

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

@@ -9,8 +9,10 @@ import {
   ChevronsUp,
   Clock,
   Copy,
+  FileDiff,
   FileTerminal,
   Globe,
+  History,
   Loader2,
   MessageSquare,
   OctagonAlert,
@@ -61,6 +63,40 @@ 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
+ *   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
+ *   means "not applicable" (hidden). Today only the Request tab sets them.
+ */
+export type HeaderTabAction = {
+  copyLabel: string;
+  copyText: string | null;
+  copyCopied: boolean;
+  onCopy: (event: MouseEvent) => void;
+  expansion: {
+    isExpanded: boolean;
+    isPending: boolean;
+    onToggle: () => void;
+  } | null;
+  /** Toggle for "Diff with Raw": display request body vs raw (pre-billing-strip). */
+  diffWithRaw?: { active: boolean; onToggle: () => void };
+  /** One-shot handler for "Diff with Previous": compare against the preceding log. */
+  diffWithPrevious?: () => void;
+};
+
+/**
+ * Tab actions keyed by Tabs value. Tabs without an entry (Anatomy, Parsed
+ * Response) leave the corresponding key unset, so the header renders no
+ * action buttons for them. Typed as a record (rather than a `Partial<...>`
+ * union) so the per-tab lookup in the header is type-safe.
+ */
+export type HeaderTabActions = Record<string, HeaderTabAction | undefined>;
+
 export type LogEntryHeaderProps = {
   log: CapturedLog;
   /** Number of messages in the request (supports both Anthropic and OpenAI formats). */
@@ -76,21 +112,16 @@ export type LogEntryHeaderProps = {
    * the corresponding cache span renders as it did before — no arrow.
    */
   cacheTrend?: { creation: CacheTrend | null; read: CacheTrend | null } | null;
+  /** Currently-active tab value (matches the `Tabs` value prop). The header
+   *  uses this to pick the right entry from `tabActions`. */
+  activeTab?: string;
+  /** Per-tab Copy + Expand-all actions. Only tabs with an entry will show
+   *  buttons when active. Tabs without an entry (Anatomy, Parsed Response)
+   *  render no header buttons. */
+  tabActions?: HeaderTabActions;
   /** Re-send this request to the provider. Rendered in the header row when
    *  `expanded` is true. */
   onReplay?: () => void;
-  /** Copy the request body to the clipboard. Omit to hide the button. */
-  onCopyRequest?: (event: MouseEvent) => void;
-  /** Whether the latest copy of the request body succeeded (shows "Copied!"). */
-  requestCopied?: boolean;
-  /** Toggle the JSON bulk-expansion state for the request body. */
-  onToggleRequestExpansion?: () => void;
-  /** Current state of the JSON bulk-expansion button. `null` means the
-   *  request body is not JSON, so the button is hidden. */
-  requestExpansionState?: {
-    isExpanded: boolean;
-    isPending: boolean;
-  } | null;
   /** Slow-response threshold in seconds. `0` disables the warning indicator. */
   slowResponseThresholdSeconds?: number;
 };
@@ -103,11 +134,9 @@ export const LogEntryHeader = memo(function ({
   onToggle,
   responseToolNames = null,
   cacheTrend = null,
+  activeTab,
+  tabActions,
   onReplay,
-  onCopyRequest,
-  requestCopied = false,
-  onToggleRequestExpansion,
-  requestExpansionState = null,
   slowResponseThresholdSeconds = 0,
 }: LogEntryHeaderProps): JSX.Element {
   const statusCategory = getStatusCategory(log.responseStatus);
@@ -336,58 +365,110 @@ export const LogEntryHeader = memo(function ({
             onClick={(e) => e.stopPropagation()}
             onKeyDown={(e) => e.stopPropagation()}
           >
-            {requestExpansionState !== null && onToggleRequestExpansion !== undefined && (
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <Button
-                    variant="outline"
-                    size="icon"
-                    className="size-8"
-                    onClick={onToggleRequestExpansion}
-                    disabled={requestExpansionState.isPending}
-                    aria-pressed={requestExpansionState.isExpanded}
-                    aria-label={
-                      requestExpansionState.isExpanded ? "Collapse all JSON" : "Expand all JSON"
-                    }
-                  >
-                    {requestExpansionState.isExpanded ? (
-                      <ChevronsUp className="size-3.5" />
-                    ) : (
-                      <ChevronsDown className="size-3.5" />
+            {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="size-8"
+                            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>
                     )}
-                  </Button>
-                </TooltipTrigger>
-                <TooltipContent>
-                  {requestExpansionState.isExpanded
-                    ? "Collapse all JSON nodes"
-                    : "Expand all JSON nodes"}
-                </TooltipContent>
-              </Tooltip>
-            )}
-
-            {onCopyRequest !== undefined && (
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <Button
-                    variant="outline"
-                    size="icon"
-                    className="size-8"
-                    onClick={onCopyRequest}
-                    aria-label="Copy request body"
-                  >
-                    {requestCopied ? (
-                      <Check className="size-3.5 text-emerald-500" />
-                    ) : (
-                      <Copy className="size-3.5" />
+                    {action.diffWithRaw !== undefined && (
+                      <Tooltip>
+                        <TooltipTrigger asChild>
+                          <Button
+                            variant="outline"
+                            size="icon"
+                            className={cn(
+                              "size-8",
+                              action.diffWithRaw.active && "bg-accent text-accent-foreground",
+                            )}
+                            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>
                     )}
-                  </Button>
-                </TooltipTrigger>
-                <TooltipContent>
-                  {requestCopied ? "Copied to clipboard" : "Copy request body"}
-                </TooltipContent>
-              </Tooltip>
-            )}
-
+                    {action.diffWithPrevious !== undefined && (
+                      <Tooltip>
+                        <TooltipTrigger asChild>
+                          <Button
+                            variant="outline"
+                            size="icon"
+                            className="size-8"
+                            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="size-8"
+                            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>

package/src/components/proxy-viewer/useCopyFeedback.ts

@@ -0,0 +1,36 @@
+import { useCallback, useEffect, useRef, useState, type MouseEvent } from "react";
+
+/**
+ * Clipboard write with a 2s "Copied!" indicator. Returns null-safe
+ * callbacks so callers can pass `text === null` through unconditionally
+ * (the hook still runs; the click handler short-circuits).
+ */
+export function useCopyFeedback(text: string | null): {
+  copied: boolean;
+  copy: (event: MouseEvent) => void;
+} {
+  const [copied, setCopied] = useState(false);
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(
+    () => () => {
+      if (timerRef.current !== null) clearTimeout(timerRef.current);
+    },
+    [],
+  );
+
+  const copy = useCallback(
+    (event: MouseEvent) => {
+      event.stopPropagation();
+      if (text === null) return;
+      void window.navigator.clipboard.writeText(text).then(() => {
+        setCopied(true);
+        if (timerRef.current !== null) clearTimeout(timerRef.current);
+        timerRef.current = setTimeout(() => setCopied(false), 2000);
+      });
+    },
+    [text],
+  );
+
+  return { copied, copy };
+}