@tonyclaw/llm-inspector 1.10.0 → 1.11.0

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

@@ -1,13 +1,13 @@
-import { Check, Copy, RotateCcw } from "lucide-react";
+import { Check, Copy, GitCompareArrows, RotateCcw } from "lucide-react";
 import type { JSX } from "react";
 import { useMemo, useState, memo } from "react";
 import { cn } from "../../lib/utils";
 import { type CapturedLog, parseRequest } from "../../proxy/schemas";
 import { stripClaudeCodeBillingHeader } from "../../proxy/claudeCodeStrip";
-import { useStripConfig } from "../../lib/useStripConfig";
 import { Button } from "../ui/button";
 import { JsonViewerFromString } from "../ui/json-viewer";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "../ui/tabs";
+import { computeHeadersDiff, computeRequestDiff, DiffView } from "./diff";
 import { LogEntryHeader } from "./LogEntryHeader";
 import { ReplayDialog } from "./ReplayDialog";
 import { ResponseView } from "./ResponseView";
@@ -18,6 +18,13 @@ export type LogEntryProps = {
   viewMode?: "simple" | "full";
   /** Suppress the API format badge when log is displayed within a group */
   suppressApiFormatBadge?: boolean;
+  /**
+   * Live "strip Claude Code billing header" flag, sourced once at the viewer
+   * container. Hoisted out of `LogEntry` so a single SWR subscription serves
+   * the whole virtualized list (N logs == N subscriptions is the previous
+   * cost).
+   */
+  strip: boolean;
 };
 
 /**
@@ -33,6 +40,33 @@ export function shouldShowRawRequestTab(
   return apiFormat === "anthropic" && viewMode === "full" && strip;
 }
 
+/**
+ * Pure visibility rule for the "Diff with Raw" button in the Headers tab.
+ * The button only makes sense when the user is in full mode (where the
+ * `Raw Headers` tab is shown) and we actually captured raw headers.
+ */
+export function shouldShowHeadersDiffButton(
+  viewMode: "simple" | "full",
+  hasRawHeaders: boolean,
+): boolean {
+  return viewMode === "full" && hasRawHeaders;
+}
+
+/**
+ * Pure visibility rule for the "Diff with Raw" button in the Request tab.
+ * Mirrors the conditions for the `Raw Request` tab itself: full mode plus
+ * the strip toggle being on for an anthropic-format request. We also need
+ * an actual raw request body to diff against.
+ */
+export function shouldShowRequestDiffButton(
+  apiFormat: string,
+  viewMode: "simple" | "full",
+  strip: boolean,
+  hasRawRequest: boolean,
+): boolean {
+  return apiFormat === "anthropic" && viewMode === "full" && strip && hasRawRequest;
+}
+
 function CopyButton({
   text,
   label,
@@ -66,17 +100,45 @@ function CopyButton({
   );
 }
 
+function DiffToggleButton({
+  active,
+  onClick,
+}: {
+  active: boolean;
+  onClick: (e: React.MouseEvent) => void;
+}): JSX.Element {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      aria-pressed={active}
+      className={cn(
+        "flex items-center gap-1.5 text-xs px-2 py-1 rounded transition-colors",
+        active
+          ? "bg-primary/10 text-primary"
+          : "text-muted-foreground hover:text-foreground hover:bg-muted",
+      )}
+      title={active ? "Hide diff with raw" : "Diff this view against the raw version"}
+    >
+      <GitCompareArrows className="size-3" />
+      {active ? "Showing diff" : "Diff with Raw"}
+    </button>
+  );
+}
+
 export const LogEntry = memo(function ({
   log,
   viewMode = "simple",
   suppressApiFormatBadge = false,
+  strip,
 }: LogEntryProps): JSX.Element {
   const [expanded, setExpanded] = useState<boolean>(false);
   const [requestCopied, setRequestCopied] = useState<boolean>(false);
   const [rawRequestCopied, setRawRequestCopied] = useState<boolean>(false);
   const [responseCopied, setResponseCopied] = useState<boolean>(false);
   const [replayOpen, setReplayOpen] = useState<boolean>(false);
-  const { strip } = useStripConfig();
+  const [headersDiff, setHeadersDiff] = useState<boolean>(false);
+  const [requestDiff, setRequestDiff] = useState<boolean>(false);
   const parsedRequest = useMemo(() => parseRequest(log.rawRequestBody), [log.rawRequestBody]);
   const strippedRequestBody = useMemo(() => {
     if (!strip || log.apiFormat !== "anthropic" || log.rawRequestBody === null) {
@@ -86,6 +148,15 @@ export const LogEntry = memo(function ({
   }, [log.rawRequestBody, log.apiFormat, strip]);
   const displayedRequestBody = strippedRequestBody ?? log.rawRequestBody;
 
+  const headersDiffResult = useMemo(
+    () => computeHeadersDiff(log.rawHeaders, log.headers),
+    [log.rawHeaders, log.headers],
+  );
+  const requestDiffResult = useMemo(
+    () => computeRequestDiff(log.rawRequestBody, displayedRequestBody),
+    [log.rawRequestBody, displayedRequestBody],
+  );
+
   function handleCopyRequest(e: React.MouseEvent): void {
     e.stopPropagation();
     if (displayedRequestBody === null) return;
@@ -161,6 +232,20 @@ export const LogEntry = memo(function ({
               <TabsContent value="request">
                 <div className="px-4 py-3">
                   <div className="flex justify-end gap-2 mb-2">
+                    {shouldShowRequestDiffButton(
+                      log.apiFormat,
+                      viewMode,
+                      strip,
+                      log.rawRequestBody !== null,
+                    ) && (
+                      <DiffToggleButton
+                        active={requestDiff}
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          setRequestDiff(!requestDiff);
+                        }}
+                      />
+                    )}
                     <Button
                       variant="outline"
                       size="sm"
@@ -180,7 +265,12 @@ export const LogEntry = memo(function ({
                       onCopy={handleCopyRequest}
                     />
                   </div>
-                  {displayedRequestBody !== null ? (
+                  {requestDiff ? (
+                    <DiffView
+                      result={requestDiffResult}
+                      emptyLabel="No transformation applied — raw and sent request bodies are identical."
+                    />
+                  ) : displayedRequestBody !== null ? (
                     <JsonViewerFromString text={displayedRequestBody} defaultExpandDepth={1} />
                   ) : (
                     <p className="text-xs text-muted-foreground italic">No request body</p>
@@ -191,7 +281,26 @@ export const LogEntry = memo(function ({
               {viewMode === "full" && (
                 <TabsContent value="headers">
                   <div className="px-4 py-3">
-                    {log.headers && Object.keys(log.headers).length > 0 ? (
+                    <div className="flex justify-end gap-2 mb-2">
+                      {shouldShowHeadersDiffButton(
+                        viewMode,
+                        log.rawHeaders !== undefined && Object.keys(log.rawHeaders).length > 0,
+                      ) && (
+                        <DiffToggleButton
+                          active={headersDiff}
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            setHeadersDiff(!headersDiff);
+                          }}
+                        />
+                      )}
+                    </div>
+                    {headersDiff ? (
+                      <DiffView
+                        result={headersDiffResult}
+                        emptyLabel="No transformation applied — raw and processed headers are identical."
+                      />
+                    ) : log.headers && Object.keys(log.headers).length > 0 ? (
                       <div className="space-y-1 font-mono text-xs">
                         {Object.entries(log.headers)
                           .sort(([a], [b]) => a.localeCompare(b))

package/src/components/proxy-viewer/diff/DiffView.tsx

@@ -0,0 +1,319 @@
+import { useVirtualizer } from "@tanstack/react-virtual";
+import { Columns2, Rows3 } from "lucide-react";
+import { useRef, useState, type JSX } from "react";
+import { cn } from "../../../lib/utils";
+import type { DiffLine, DiffResult } from "./computeDiff";
+
+type DiffMode = "unified" | "split";
+
+/**
+ * Approximate line height (px) used for the virtualizer's `estimateSize`.
+ * Matches the `py-1` + `text-xs` (12px line-height ~ 18px) row padding so
+ * the estimate is close enough that we rarely need to re-measure.
+ */
+const ESTIMATED_LINE_HEIGHT = 22;
+
+/**
+ * Cap on how many diff lines we render. Bodies larger than this still get
+ * the diff computed (so the line count is accurate) but only the first
+ * `MAX_RENDERED_LINES` are shown, with a notice explaining the truncation.
+ * This protects the tab from freezing on accidental large payloads.
+ */
+const MAX_RENDERED_LINES = 10_000;
+
+type DiffViewProps = {
+  result: DiffResult;
+  /** Optional caption shown in the empty state. */
+  emptyLabel?: string;
+};
+
+function kindPrefix(kind: "context" | "added" | "removed"): string {
+  if (kind === "added") return "+";
+  if (kind === "removed") return "-";
+  return " ";
+}
+
+function kindClass(kind: "context" | "added" | "removed"): string {
+  if (kind === "added") {
+    return "bg-green-500/10 text-green-700 dark:text-green-300";
+  }
+  if (kind === "removed") {
+    return "bg-red-500/10 text-red-700 dark:text-red-300";
+  }
+  return "text-foreground/80";
+}
+
+/**
+ * Render a `DiffResult` in unified or split mode. The unified view is a
+ * single column with `+` / `-` / ` ` prefixes; the split view pairs up
+ * consecutive removed+added runs into "changed" rows for side-by-side
+ * reading.
+ *
+ * Virtualized because request bodies with full conversation history can be
+ * tens of thousands of lines long.
+ */
+export function DiffView({ result, emptyLabel }: DiffViewProps): JSX.Element {
+  const [mode, setMode] = useState<DiffMode>("unified");
+  const scrollRef = useRef<HTMLDivElement>(null);
+
+  const virtualizer = useVirtualizer({
+    count: result.lines.length,
+    getScrollElement: () => scrollRef.current,
+    estimateSize: () => ESTIMATED_LINE_HEIGHT,
+    overscan: 10,
+  });
+
+  if (result.isEmpty) {
+    return (
+      <div
+        className="rounded border border-dashed border-border bg-muted/30 px-4 py-6 text-center text-xs text-muted-foreground"
+        data-testid="diff-empty"
+      >
+        {emptyLabel ?? "No transformation applied — raw and processed are identical."}
+      </div>
+    );
+  }
+
+  const totalLines = result.lines.length;
+  const truncated = totalLines > MAX_RENDERED_LINES;
+  const visibleLines = truncated ? result.lines.slice(0, MAX_RENDERED_LINES) : result.lines;
+
+  return (
+    <div className="space-y-2">
+      <div className="flex items-center justify-between text-xs text-muted-foreground">
+        <span>
+          {totalLines.toLocaleString()} line{totalLines === 1 ? "" : "s"}
+          {truncated && ` (showing first ${MAX_RENDERED_LINES.toLocaleString()})`}
+        </span>
+        <div className="inline-flex rounded-md border border-border overflow-hidden">
+          <button
+            type="button"
+            onClick={() => setMode("unified")}
+            aria-pressed={mode === "unified"}
+            className={cn(
+              "flex items-center gap-1 px-2 py-1 transition-colors",
+              mode === "unified" ? "bg-muted text-foreground" : "hover:bg-muted/50",
+            )}
+            title="Unified diff (single column)"
+          >
+            <Rows3 className="size-3" />
+            Unified
+          </button>
+          <button
+            type="button"
+            onClick={() => setMode("split")}
+            aria-pressed={mode === "split"}
+            className={cn(
+              "flex items-center gap-1 px-2 py-1 transition-colors border-l border-border",
+              mode === "split" ? "bg-muted text-foreground" : "hover:bg-muted/50",
+            )}
+            title="Split diff (side by side)"
+          >
+            <Columns2 className="size-3" />
+            Split
+          </button>
+        </div>
+      </div>
+      <div
+        ref={scrollRef}
+        className="max-h-[60vh] overflow-auto rounded border border-border bg-background font-mono text-xs"
+        data-testid="diff-viewport"
+      >
+        {mode === "unified" ? (
+          <UnifiedRows virtualizer={virtualizer} lines={visibleLines} />
+        ) : (
+          <SplitRows lines={visibleLines} />
+        )}
+      </div>
+    </div>
+  );
+}
+
+function UnifiedRows({
+  virtualizer,
+  lines,
+}: {
+  virtualizer: ReturnType<typeof useVirtualizer<HTMLDivElement, Element>>;
+  lines: ReadonlyArray<DiffLine>;
+}): JSX.Element {
+  return (
+    <div
+      style={{
+        height: `${virtualizer.getTotalSize()}px`,
+        width: "100%",
+        position: "relative",
+      }}
+    >
+      {virtualizer.getVirtualItems().map((virtualRow) => {
+        const line = lines[virtualRow.index];
+        if (line === undefined) return null;
+        return (
+          <div
+            key={virtualRow.key}
+            data-index={virtualRow.index}
+            ref={virtualizer.measureElement}
+            className={cn("flex items-start gap-3 px-2", kindClass(line.kind))}
+            style={{
+              position: "absolute",
+              top: 0,
+              left: 0,
+              width: "100%",
+              transform: `translateY(${virtualRow.start}px)`,
+            }}
+          >
+            <span className="select-none text-muted-foreground/60 w-10 text-right tabular-nums">
+              {line.oldLineNumber ?? ""}
+            </span>
+            <span className="select-none text-muted-foreground/60 w-10 text-right tabular-nums">
+              {line.newLineNumber ?? ""}
+            </span>
+            <span
+              className={cn(
+                "select-none w-3 text-right font-bold",
+                line.kind === "added" && "text-green-600 dark:text-green-400",
+                line.kind === "removed" && "text-red-600 dark:text-red-400",
+              )}
+            >
+              {kindPrefix(line.kind)}
+            </span>
+            <span className="whitespace-pre-wrap break-all flex-1">{line.text}</span>
+          </div>
+        );
+      })}
+    </div>
+  );
+}
+
+/**
+ * Convert a stream of context / removed / added lines into "rows" suitable
+ * for a split view:
+ *  - A run of `removed` followed by a run of `added` is paired line-by-line
+ *    as a "changed" row (the shorter side is padded with blanks).
+ *  - A `removed`-only run becomes rows marked as deletion-only.
+ *  - An `added`-only run becomes rows marked as addition-only.
+ *  - `context` lines become rows where both sides show the same text.
+ */
+type SplitRow = {
+  left: { text: string; lineNumber: number | null } | null;
+  right: { text: string; lineNumber: number | null } | null;
+  /** "equal" | "changed" | "removed" | "added" */
+  kind: "equal" | "changed" | "removed" | "added";
+};
+
+function buildSplitRows(lines: ReadonlyArray<DiffLine>): SplitRow[] {
+  const rows: SplitRow[] = [];
+  let i = 0;
+  while (i < lines.length) {
+    const line = lines[i];
+    if (line === undefined) break;
+    if (line.kind === "context") {
+      rows.push({
+        left: { text: line.text, lineNumber: line.oldLineNumber },
+        right: { text: line.text, lineNumber: line.newLineNumber },
+        kind: "equal",
+      });
+      i += 1;
+      continue;
+    }
+    // Collect a run of removes followed by a run of adds.
+    const removes: DiffLine[] = [];
+    const adds: DiffLine[] = [];
+    while (i < lines.length && lines[i]?.kind === "removed") {
+      const removed = lines[i];
+      if (removed !== undefined) removes.push(removed);
+      i += 1;
+    }
+    while (i < lines.length && lines[i]?.kind === "added") {
+      const added = lines[i];
+      if (added !== undefined) adds.push(added);
+      i += 1;
+    }
+    const pairCount = Math.max(removes.length, adds.length);
+    for (let p = 0; p < pairCount; p += 1) {
+      const r = removes[p];
+      const a = adds[p];
+      if (r !== undefined && a !== undefined) {
+        rows.push({
+          left: { text: r.text, lineNumber: r.oldLineNumber },
+          right: { text: a.text, lineNumber: a.newLineNumber },
+          kind: "changed",
+        });
+      } else if (r !== undefined) {
+        rows.push({
+          left: { text: r.text, lineNumber: r.oldLineNumber },
+          right: null,
+          kind: "removed",
+        });
+      } else if (a !== undefined) {
+        rows.push({
+          left: null,
+          right: { text: a.text, lineNumber: a.newLineNumber },
+          kind: "added",
+        });
+      }
+    }
+  }
+  return rows;
+}
+
+function SplitRowClass(kind: SplitRow["kind"]): string {
+  switch (kind) {
+    case "changed":
+      return "bg-amber-500/10";
+    case "removed":
+      return "bg-red-500/10";
+    case "added":
+      return "bg-green-500/10";
+    case "equal":
+      return "";
+  }
+}
+
+function SplitRows({ lines }: { lines: ReadonlyArray<DiffLine> }): JSX.Element {
+  const rows = buildSplitRows(lines);
+  return (
+    <div data-testid="diff-split">
+      {rows.map((row, idx) => (
+        <div
+          // idx is stable for a given diff result; the rows array is rebuilt
+          // when the input `lines` change, so React's reconciliation handles
+          // re-renders correctly.
+          // biome-ignore lint/suspicious/noArrayIndexKey: see above
+          key={idx}
+          className={cn("grid grid-cols-2 font-mono text-xs", SplitRowClass(row.kind))}
+        >
+          <div className="flex items-start gap-2 px-2 border-r border-border/50">
+            <span className="select-none text-muted-foreground/60 w-8 text-right tabular-nums">
+              {row.left?.lineNumber ?? ""}
+            </span>
+            <span
+              className={cn(
+                "select-none w-3 text-right font-bold",
+                (row.kind === "removed" || row.kind === "changed") &&
+                  "text-red-600 dark:text-red-400",
+              )}
+            >
+              {row.left !== null ? "-" : " "}
+            </span>
+            <span className="whitespace-pre-wrap break-all flex-1">{row.left?.text ?? ""}</span>
+          </div>
+          <div className="flex items-start gap-2 px-2">
+            <span className="select-none text-muted-foreground/60 w-8 text-right tabular-nums">
+              {row.right?.lineNumber ?? ""}
+            </span>
+            <span
+              className={cn(
+                "select-none w-3 text-right font-bold",
+                (row.kind === "added" || row.kind === "changed") &&
+                  "text-green-600 dark:text-green-400",
+              )}
+            >
+              {row.right !== null ? "+" : " "}
+            </span>
+            <span className="whitespace-pre-wrap break-all flex-1">{row.right?.text ?? ""}</span>
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}

package/src/components/proxy-viewer/diff/computeDiff.ts

@@ -0,0 +1,178 @@
+import { diffJson, diffLines, type Change } from "diff";
+
+/**
+ * A single line in a unified diff view.
+ *
+ * - `kind: "context"` — line present in both sides
+ * - `kind: "removed"` — line only in the left (raw) side
+ * - `kind: "added"` — line only in the right (processed) side
+ *
+ * `oldLineNumber` / `newLineNumber` are 1-based and `null` for the side the
+ * line is not on. `text` always includes the trailing newline-free content
+ * for that line.
+ */
+export type DiffLine = {
+  kind: "context" | "removed" | "added";
+  text: string;
+  oldLineNumber: number | null;
+  newLineNumber: number | null;
+};
+
+/** Result of computing a diff: the normalized lines plus a quick "no change" flag. */
+export type DiffResult = {
+  lines: DiffLine[];
+  /** True when the two inputs are byte-equal (or semantically equal for JSON). */
+  isEmpty: boolean;
+};
+
+/**
+ * Normalize an HTTP-header record into a deterministic `[lowercaseKey, value]`
+ * tuple. Lowercasing the key matches how `buildProxyHeaders` stores raw
+ * headers in `handler.ts`, and sorting by key gives stable diffs across
+ * different client header orders.
+ */
+function normalizeHeaders(headers: Record<string, string> | undefined): Array<[string, string]> {
+  if (headers === undefined) return [];
+  return Object.entries(headers)
+    .map((entry): [string, string] => [entry[0].toLowerCase(), entry[1]])
+    .sort(([a], [b]) => a.localeCompare(b));
+}
+
+/**
+ * Render a header entry as a single line in the form `key: value`. Mirrors
+ * the layout used by the existing Headers / Raw Headers tabs in
+ * `LogEntry.tsx` so the diff view looks like the same data, just with
+ * add/remove highlights.
+ */
+function headerLine([key, value]: [string, string]): string {
+  return `${key}: ${value}`;
+}
+
+/**
+ * Convert a list of `diff` library `Change` objects into `DiffLine` records
+ * with stable 1-based line numbers on each side. Each change's value is
+ * split on `\n` so we can produce per-line rows (the `diff` library groups
+ * runs of consecutive equal/added/removed lines into one Change).
+ */
+function changesToLines(changes: Change[]): DiffLine[] {
+  const lines: DiffLine[] = [];
+  let oldNum = 0;
+  let newNum = 0;
+  for (const change of changes) {
+    // Trailing newlines are part of the change's value; dropping the empty
+    // string after the final `\n` keeps the line count correct.
+    const parts = change.value.split("\n");
+    if (parts.length > 0 && parts[parts.length - 1] === "") parts.pop();
+    for (const text of parts) {
+      if (change.added) {
+        newNum += 1;
+        lines.push({ kind: "added", text, oldLineNumber: null, newLineNumber: newNum });
+      } else if (change.removed) {
+        oldNum += 1;
+        lines.push({ kind: "removed", text, oldLineNumber: oldNum, newLineNumber: null });
+      } else {
+        oldNum += 1;
+        newNum += 1;
+        lines.push({
+          kind: "context",
+          text,
+          oldLineNumber: oldNum,
+          newLineNumber: newNum,
+        });
+      }
+    }
+  }
+  return lines;
+}
+
+/**
+ * Compute a diff between two HTTP-header records. Headers are normalized
+ * (lower-cased keys, sorted) before comparison so that key reordering or
+ * case differences don't show as spurious changes.
+ *
+ * Returns `{ lines, isEmpty: true }` when the two records contain the same
+ * key/value pairs, which the UI uses to show a "No transformation applied"
+ * placeholder instead of an empty diff.
+ */
+export function computeHeadersDiff(
+  rawHeaders: Record<string, string> | undefined,
+  processedHeaders: Record<string, string> | undefined,
+): DiffResult {
+  const left = normalizeHeaders(rawHeaders).map(headerLine).join("\n");
+  const right = normalizeHeaders(processedHeaders).map(headerLine).join("\n");
+
+  if (left === right) {
+    return { lines: [], isEmpty: true };
+  }
+  const changes = diffLines(left, right);
+  return { lines: changesToLines(changes), isEmpty: false };
+}
+
+/**
+ * Try to parse a string as JSON. Returns the parsed value on success, or
+ * `null` on failure. We use this to decide between semantic (`diffJson`) and
+ * line-level (`diffLines`) diffs for request bodies. The return type is a
+ * union of `null` and the input types `diffJson` accepts, so the call site
+ * can pass the result directly without re-narrowing.
+ */
+function tryParseJson(text: string): null | string | object {
+  try {
+    const parsed: unknown = JSON.parse(text);
+    if (parsed === null) return parsed;
+    if (typeof parsed === "string" || typeof parsed === "object") return parsed;
+    // Numbers, booleans, etc. — also valid JSON, but the diffJson overloads
+    // only accept string | object, so we surface these as line-diff by
+    // returning null.
+    return null;
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * Compute a diff between two request bodies.
+ *
+ * - If both sides parse as JSON, use `diffJson` for a semantic key-level
+ *   comparison. Reordering fields, or adding/removing a key inside an
+ *   object, produces cleaner output than a raw text diff.
+ * - If either side is not valid JSON, fall back to `diffLines` of the raw
+ *   strings. This keeps the diff working for non-JSON bodies (rare in this
+ *   proxy, but possible) and for partial / truncated bodies.
+ *
+ * The two inputs are compared as-is. Whitespace and key order in JSON are
+ * normalized by the parser, so two semantically-equal bodies will report
+ * `isEmpty: true` even if their textual forms differ.
+ */
+export function computeRequestDiff(
+  rawBody: string | null,
+  processedBody: string | null,
+): DiffResult {
+  const left = rawBody ?? "";
+  const right = processedBody ?? "";
+
+  if (left === right) {
+    return { lines: [], isEmpty: true };
+  }
+
+  const leftJson = tryParseJson(left);
+  const rightJson = tryParseJson(right);
+  if (leftJson !== null && rightJson !== null) {
+    // diffJson runs canonicalize() on both sides, so key order / whitespace
+    // differences are handled before the line diff is built. Two JSON values
+    // that are deep-equal produce an empty change set. The overload set
+    // includes some signatures that return `undefined` (abortable modes);
+    // since we pass no options, the result is always defined in practice,
+    // but we guard with a fallback to the line diff for type-safety.
+    const changes = diffJson(leftJson, rightJson) ?? [];
+    if (changes.length === 1) {
+      const first = changes[0];
+      if (first !== undefined && !first.added && !first.removed) {
+        return { lines: [], isEmpty: true };
+      }
+    }
+    return { lines: changesToLines(changes), isEmpty: false };
+  }
+
+  const changes = diffLines(left, right);
+  return { lines: changesToLines(changes), isEmpty: false };
+}

package/src/components/proxy-viewer/diff/index.ts

@@ -0,0 +1,3 @@
+export { computeHeadersDiff, computeRequestDiff } from "./computeDiff";
+export type { DiffLine, DiffResult } from "./computeDiff";
+export { DiffView } from "./DiffView";