@tonyclaw/agent-inspector 4.0.1 → 4.0.3

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

@@ -1,984 +0,0 @@
-import { Suspense, useEffect, useMemo, useRef, useState } from "react";
-import type { JSX, KeyboardEvent as ReactKeyboardEvent } from "react";
-import {
-  Check,
-  ChevronRight,
-  Columns2,
-  Copy,
-  Equal,
-  Minus,
-  Pencil,
-  Plus,
-  Rows3,
-  X,
-} from "lucide-react";
-import { cn, formatTokens } from "../../lib/utils";
-import { copyTextToClipboard } from "../../lib/clipboard";
-import type { CapturedLog } from "../../contracts";
-import {
-  type DiffOp,
-  type JsonNode,
-  diffTrees,
-  normalizeRequest,
-  previewNode,
-} from "./requestDiff";
-import { getConversationId } from "./ConversationHeader";
-import { Badge } from "../ui/badge";
-import { getLogFormatAdapter, resolveLogFormat } from "./log-formats";
-import { LazyJsonViewerFromString } from "./lazy";
-
-export type CompareDrawerProps = {
-  /** Log selected first (shown on the left). */
-  left: CapturedLog;
-  /** Log selected second (shown on the right). */
-  right: CapturedLog;
-  /** Human-facing ordinal inside the left log's session. */
-  leftDisplayNumber: number;
-  /** Human-facing ordinal inside the right log's session. */
-  rightDisplayNumber: number;
-  onClose: () => void;
-};
-
-type EqualOp = Extract<DiffOp, { kind: "equal" }>;
-type AddedOp = Extract<DiffOp, { kind: "added" }>;
-type RemovedOp = Extract<DiffOp, { kind: "removed" }>;
-type ChangedOp = Extract<DiffOp, { kind: "changed" }>;
-
-type DiffMode = "unified" | "split";
-
-export const COMPARE_RESPONSIVE_HEADER_CLASS_NAME =
-  "flex flex-col gap-3 border-b border-border px-3 py-3 sm:flex-row sm:items-start sm:gap-4 sm:px-4";
-export const COMPARE_RESPONSIVE_SPLIT_CLASS_NAME =
-  "grid min-w-0 grid-cols-1 gap-x-2 gap-y-0.5 px-3 py-2 text-xs md:grid-cols-[200px_minmax(0,1fr)_minmax(0,1fr)]";
-
-/** Walk the JsonNode tree and pretty-print it back to a JSON string for the
- *  expanded-equal-subtree view. The node is a plain object structure so
- *  `JSON.stringify` produces correct output. */
-function nodeToJsonString(node: JsonNode, indent = 2): string {
-  return JSON.stringify(nodeToJsonValue(node), null, indent);
-}
-
-function nodeToJsonValue(node: JsonNode): unknown {
-  switch (node.kind) {
-    case "primitive":
-      return node.value;
-    case "array":
-      return node.value.map(nodeToJsonValue);
-    case "object": {
-      const out: Record<string, unknown> = {};
-      for (const [k, v] of Object.entries(node.value)) {
-        out[k] = nodeToJsonValue(v);
-      }
-      return out;
-    }
-  }
-}
-
-function LazyJsonStringView({
-  text,
-  defaultExpandDepth,
-}: {
-  text: string;
-  defaultExpandDepth: number;
-}): JSX.Element {
-  return (
-    <Suspense fallback={<div className="text-xs text-muted-foreground">Loading JSON...</div>}>
-      <LazyJsonViewerFromString text={text} defaultExpandDepth={defaultExpandDepth} />
-    </Suspense>
-  );
-}
-
-/** The parent path of a JSON path string. E.g. `messages[3].content` →
- *  `messages[3]`, `messages[3]` → `messages`, `messages` → `""`. */
-function parentPath(path: string): string {
-  if (path === "") return "";
-  for (let i = path.length - 1; i >= 0; i--) {
-    const ch = path[i];
-    if (ch === "." || ch === "[") {
-      return path.substring(0, i);
-    }
-  }
-  return "";
-}
-
-/** Group contiguous deep-equal ops (object/array, not primitive) that share
- *  a common parent into a single collapsed row, so an unchanged block of N
- *  sibling subtrees renders as one row instead of N. Primitive equals
- *  always render as their own row (they're 1 line each). */
-type GroupedOp = { kind: "single"; op: DiffOp } | { kind: "equal-run"; ops: EqualOp[] };
-
-function isDeepEqual(op: DiffOp): op is EqualOp {
-  return op.kind === "equal" && (op.value.kind === "object" || op.value.kind === "array");
-}
-
-function groupContiguousEquals(ops: DiffOp[]): GroupedOp[] {
-  const out: GroupedOp[] = [];
-  let i = 0;
-  while (i < ops.length) {
-    const op = ops[i];
-    if (op !== undefined && isDeepEqual(op)) {
-      const startParent = parentPath(op.path);
-      let j = i + 1;
-      while (j < ops.length) {
-        const next = ops[j];
-        if (next === undefined) break;
-        if (!isDeepEqual(next)) break;
-        if (parentPath(next.path) !== startParent) break;
-        j++;
-      }
-      if (j - i > 1) {
-        const equalOps: EqualOp[] = [];
-        for (let k = i; k < j; k++) {
-          const eop = ops[k];
-          if (eop !== undefined && eop.kind === "equal") {
-            equalOps.push(eop);
-          }
-        }
-        out.push({ kind: "equal-run", ops: equalOps });
-        i = j;
-        continue;
-      }
-    }
-    if (op !== undefined) {
-      out.push({ kind: "single", op });
-    }
-    i++;
-  }
-  return out;
-}
-
-/** Visual configuration for each diff kind. Centralized so the unified row,
- *  summary chips, and split columns all use the same colors / icons. */
-type DiffKind = "added" | "removed" | "changed" | "equal";
-
-const KIND_VISUAL: Record<
-  DiffKind,
-  {
-    icon: typeof Plus;
-    /** Accent color for the icon + label. */
-    accent: string;
-    /** Background tint applied to the row. */
-    bg: string;
-    /** Thick left-border color. */
-    border: string;
-    /** Short text label (uppercase, used in the row badge). */
-    label: string;
-  }
-> = {
-  added: {
-    icon: Plus,
-    accent: "text-status-success",
-    bg: "bg-status-success/5 hover:bg-status-success/10",
-    border: "border-l-status-success",
-    label: "ADDED",
-  },
-  removed: {
-    icon: Minus,
-    accent: "text-status-danger",
-    bg: "bg-status-danger/5 hover:bg-status-danger/10",
-    border: "border-l-status-danger",
-    label: "REMOVED",
-  },
-  changed: {
-    icon: Pencil,
-    accent: "text-status-watch",
-    bg: "bg-status-watch/5 hover:bg-status-watch/10",
-    border: "border-l-status-watch",
-    label: "CHANGED",
-  },
-  equal: {
-    icon: Equal,
-    accent: "text-muted-foreground/70",
-    bg: "bg-muted/20 hover:bg-muted/30",
-    border: "border-l-muted-foreground/20",
-    label: "EQUAL",
-  },
-};
-
-function EqualRunRow({
-  ops,
-  expanded,
-  onToggle,
-}: {
-  ops: EqualOp[];
-  expanded: boolean;
-  onToggle: () => void;
-}): JSX.Element {
-  const first = ops[0];
-  const last = ops[ops.length - 1];
-  if (first === undefined || last === undefined) {
-    return <div className="text-muted-foreground/40 text-xs">—</div>;
-  }
-  const firstPath = first.path;
-  const lastPath = last.path;
-  const label = ops.length === 1 ? firstPath : `${firstPath} … ${lastPath}`;
-  const summary =
-    first.value.kind === "array"
-      ? `${ops.length} equal arrays`
-      : first.value.kind === "object"
-        ? `${ops.length} equal objects`
-        : "equal";
-
-  const v = KIND_VISUAL.equal;
-
-  return (
-    <div className={cn("border-l-4 rounded-sm", v.border, v.bg)}>
-      <button
-        type="button"
-        onClick={onToggle}
-        className="w-full text-left flex items-center gap-2 px-3 py-1.5 text-xs text-muted-foreground cursor-pointer"
-      >
-        <ChevronRight
-          className={cn("size-3 transition-transform shrink-0", expanded && "rotate-90")}
-        />
-        <v.icon className={cn("size-3 shrink-0", v.accent)} />
-        <span className="font-mono truncate flex-1" title={`${firstPath} … ${lastPath}`}>
-          {label}
-        </span>
-        <span className={cn("text-[10px] uppercase tracking-wider shrink-0", v.accent)}>
-          {v.label}
-        </span>
-        <span className="text-muted-foreground/60 shrink-0">({summary})</span>
-      </button>
-      {expanded && (
-        <div className="ml-5 mt-1 mb-2 space-y-2 pr-2">
-          {ops.map((op) => (
-            <div key={op.path} className="border border-border/50 rounded p-2 bg-muted/20">
-              <div className="font-mono text-xs text-muted-foreground mb-1">{op.path}</div>
-              <LazyJsonStringView text={nodeToJsonString(op.value)} defaultExpandDepth={0} />
-            </div>
-          ))}
-        </div>
-      )}
-    </div>
-  );
-}
-
-/** A single diff row in the unified view. Renders the icon, path, kind label,
- *  value preview, and a copy-path button. `data-diff-idx` lets the parent
- *  scroll the row into view when a summary chip is clicked.
- *
- *  When `expanded` is true (controlled by the parent), renders the full
- *  added / removed / changed subtree below the row. Primitive changes and
- *  primitive equal values are not expandable (the value is already fully
- *  shown on the row). */
-function UnifiedOpRow({
-  op,
-  idx,
-  copiedPath,
-  onCopyPath,
-  expanded,
-  onToggle,
-}: {
-  op: AddedOp | RemovedOp | ChangedOp | EqualOp;
-  idx: number;
-  copiedPath: string | null;
-  onCopyPath: (path: string) => void;
-  expanded: boolean;
-  onToggle: () => void;
-}): JSX.Element {
-  const v = KIND_VISUAL[op.kind];
-  const Icon = v.icon;
-
-  // True iff this row has a useful subtree to drill into. Primitives (and
-  // the root "equal" pseudo-op) have no extra detail beyond the preview.
-  const isExpandable =
-    op.kind === "added" || op.kind === "removed"
-      ? op.value.kind === "object" || op.value.kind === "array"
-      : op.kind === "changed"
-        ? op.left.kind === "object" ||
-          op.left.kind === "array" ||
-          op.right.kind === "object" ||
-          op.right.kind === "array"
-        : false; // equal (single primitive) — preview is the whole value
-
-  // For changed rows, show the left and right previews stacked. For added /
-  // removed / equal, one preview is enough.
-  const preview =
-    op.kind === "changed"
-      ? [
-          {
-            text: previewNode(op.left, 400),
-            tone: "text-status-danger line-through",
-          },
-          { text: previewNode(op.right, 400), tone: "text-status-success" },
-        ]
-      : op.kind === "removed"
-        ? [
-            {
-              text: previewNode(op.value, 400),
-              tone: "text-status-danger line-through",
-            },
-          ]
-        : op.kind === "added"
-          ? [{ text: previewNode(op.value, 400), tone: "text-status-success" }]
-          : [{ text: previewNode(op.value, 400), tone: "text-muted-foreground" }];
-
-  const justCopied = copiedPath === op.path && op.path !== "";
-
-  return (
-    <div
-      data-diff-idx={idx}
-      data-diff-kind={op.kind}
-      className={cn("border-l-4 rounded-sm px-3 py-2 my-0.5 transition-colors", v.border, v.bg)}
-    >
-      <button
-        type="button"
-        onClick={onToggle}
-        disabled={!isExpandable}
-        className={cn(
-          "w-full flex items-center gap-2 text-xs text-left rounded-sm",
-          isExpandable ? "cursor-pointer" : "cursor-default",
-        )}
-        aria-expanded={isExpandable ? expanded : undefined}
-        aria-label={
-          isExpandable
-            ? expanded
-              ? `Collapse ${op.path || "root"}`
-              : `Expand ${op.path || "root"}`
-            : undefined
-        }
-      >
-        {isExpandable ? (
-          <ChevronRight
-            className={cn(
-              "size-3 shrink-0 transition-transform",
-              v.accent,
-              expanded && "rotate-90",
-            )}
-          />
-        ) : (
-          <span className="size-3 shrink-0" aria-hidden="true" />
-        )}
-        <Icon className={cn("size-3.5 shrink-0", v.accent)} strokeWidth={2.5} />
-        <span className="font-mono truncate flex-1 min-w-0" title={op.path || "(root)"}>
-          {op.path === "" ? "(root)" : op.path}
-        </span>
-        <span
-          className={cn(
-            "text-[9px] font-bold uppercase tracking-wider shrink-0 px-1.5 py-0.5 rounded",
-            v.accent,
-            op.kind === "equal" ? "bg-muted/40" : "bg-background/60",
-          )}
-        >
-          {v.label}
-        </span>
-        {op.path !== "" && (
-          <span
-            role="button"
-            tabIndex={0}
-            onClick={(e) => {
-              e.stopPropagation();
-              onCopyPath(op.path);
-            }}
-            onKeyDown={(e) => {
-              if (e.key === "Enter" || e.key === " ") {
-                e.stopPropagation();
-                e.preventDefault();
-                onCopyPath(op.path);
-              }
-            }}
-            className={cn(
-              "shrink-0 p-1 rounded transition-colors cursor-pointer inline-flex items-center justify-center",
-              justCopied
-                ? "text-status-success"
-                : "text-muted-foreground/50 hover:text-foreground hover:bg-muted",
-            )}
-            aria-label={justCopied ? "Copied" : "Copy"}
-            title={justCopied ? "Copied!" : "Copy"}
-          >
-            {justCopied ? <Check className="size-3" /> : <Copy className="size-3" />}
-          </span>
-        )}
-      </button>
-      {preview.map((p, i) => (
-        // biome-ignore lint/suspicious/noArrayIndexKey: preview list is rebuilt on every render and is positional
-        <div key={i} className={cn("font-mono text-xs mt-1 break-all pl-5", p.tone)}>
-          {p.text}
-        </div>
-      ))}
-      <div
-        className="overflow-hidden transition-all duration-200"
-        style={{ maxHeight: expanded && isExpandable ? "2000px" : "0" }}
-        aria-hidden={!expanded}
-      >
-        {expanded && isExpandable && op.kind !== "equal" ? <ExpandedSubtree op={op} /> : null}
-      </div>
-    </div>
-  );
-}
-
-/** Render the full subtree for an expanded diff row.
- *  - added / removed: a single JsonViewerFromString for the value.
- *  - changed (object/array on either side): two viewers side by side.
- *  - changed (both primitives): a small "values are shown above" note. */
-function ExpandedSubtree({ op }: { op: AddedOp | RemovedOp | ChangedOp }): JSX.Element {
-  if (op.kind === "added" || op.kind === "removed") {
-    return (
-      <div className="pl-5 mt-2 border border-border/50 rounded p-2 bg-muted/20">
-        <LazyJsonStringView text={nodeToJsonString(op.value)} defaultExpandDepth={0} />
-      </div>
-    );
-  }
-  // changed
-  const leftIsStructured = op.left.kind === "object" || op.left.kind === "array";
-  const rightIsStructured = op.right.kind === "object" || op.right.kind === "array";
-  if (!leftIsStructured && !rightIsStructured) {
-    return (
-      <div className="pl-5 mt-2 text-xs text-muted-foreground/70 italic">
-        Primitive values are shown inline above.
-      </div>
-    );
-  }
-  return (
-    <div className="pl-5 mt-2 grid grid-cols-1 md:grid-cols-2 gap-2">
-      <div className="rounded border border-status-danger/30 bg-status-danger/5 p-2">
-        <div className="mb-1 text-[10px] uppercase tracking-wider text-status-danger">Old</div>
-        <LazyJsonStringView text={nodeToJsonString(op.left)} defaultExpandDepth={0} />
-      </div>
-      <div className="rounded border border-status-success/30 bg-status-success/5 p-2">
-        <div className="mb-1 text-[10px] uppercase tracking-wider text-status-success">New</div>
-        <LazyJsonStringView text={nodeToJsonString(op.right)} defaultExpandDepth={0} />
-      </div>
-    </div>
-  );
-}
-
-/** Summary chips at the top of the body. Each chip is a button that scrolls
- *  the body to the first op of that kind. Disabled when the count is 0. */
-function SummaryChips({
-  counts,
-  onJumpTo,
-}: {
-  counts: { added: number; removed: number; changed: number };
-  onJumpTo: (kind: "added" | "removed" | "changed") => void;
-}): JSX.Element {
-  const total = counts.added + counts.removed + counts.changed;
-  return (
-    <div className="px-4 py-2 border-b border-border bg-muted/20 flex items-center gap-2 text-xs flex-wrap">
-      <span className="text-muted-foreground font-medium">
-        {total} {total === 1 ? "change" : "changes"}
-      </span>
-      <button
-        type="button"
-        onClick={() => onJumpTo("removed")}
-        disabled={counts.removed === 0}
-        className={cn(
-          "inline-flex items-center gap-1 px-2 py-0.5 rounded-full border cursor-pointer transition-colors",
-          counts.removed > 0
-            ? "border-status-danger/40 bg-status-danger/10 text-status-danger hover:bg-status-danger/20"
-            : "border-border text-muted-foreground/40 cursor-not-allowed",
-        )}
-        title={counts.removed > 0 ? "Jump to first removed" : "No removals"}
-      >
-        <Minus className="size-3" />
-        {counts.removed} removed
-      </button>
-      <button
-        type="button"
-        onClick={() => onJumpTo("added")}
-        disabled={counts.added === 0}
-        className={cn(
-          "inline-flex items-center gap-1 px-2 py-0.5 rounded-full border cursor-pointer transition-colors",
-          counts.added > 0
-            ? "border-status-success/40 bg-status-success/10 text-status-success hover:bg-status-success/20"
-            : "border-border text-muted-foreground/40 cursor-not-allowed",
-        )}
-        title={counts.added > 0 ? "Jump to first added" : "No additions"}
-      >
-        <Plus className="size-3" />
-        {counts.added} added
-      </button>
-      <button
-        type="button"
-        onClick={() => onJumpTo("changed")}
-        disabled={counts.changed === 0}
-        className={cn(
-          "inline-flex items-center gap-1 px-2 py-0.5 rounded-full border cursor-pointer transition-colors",
-          counts.changed > 0
-            ? "border-status-watch/40 bg-status-watch/10 text-status-watch hover:bg-status-watch/20"
-            : "border-border text-muted-foreground/40 cursor-not-allowed",
-        )}
-        title={counts.changed > 0 ? "Jump to first changed" : "No changes"}
-      >
-        <Pencil className="size-3" />
-        {counts.changed} changed
-      </button>
-    </div>
-  );
-}
-
-/** Mode toggle in the header: unified (single column) or split (path | left | right). */
-function ModeToggle({
-  mode,
-  onChange,
-}: {
-  mode: DiffMode;
-  onChange: (mode: DiffMode) => void;
-}): JSX.Element {
-  return (
-    <div className="inline-flex rounded-md border border-border overflow-hidden">
-      <button
-        type="button"
-        onClick={() => onChange("unified")}
-        aria-pressed={mode === "unified"}
-        className={cn(
-          "flex items-center gap-1 px-2 py-1 text-xs transition-colors cursor-pointer",
-          mode === "unified"
-            ? "bg-muted text-foreground"
-            : "hover:bg-muted/50 text-muted-foreground",
-        )}
-        title="Unified view (single column, emphasized diffs)"
-      >
-        <Rows3 className="size-3" />
-        Unified
-      </button>
-      <button
-        type="button"
-        onClick={() => onChange("split")}
-        aria-pressed={mode === "split"}
-        className={cn(
-          "flex items-center gap-1 px-2 py-1 text-xs transition-colors border-l border-border cursor-pointer",
-          mode === "split" ? "bg-muted text-foreground" : "hover:bg-muted/50 text-muted-foreground",
-        )}
-        title="Split view (path | left | right)"
-      >
-        <Columns2 className="size-3" />
-        Split
-      </button>
-    </div>
-  );
-}
-
-function SideSummary({
-  log,
-  side,
-  displayNumber,
-}: {
-  log: CapturedLog;
-  side: "left" | "right";
-  displayNumber: number;
-}): JSX.Element {
-  const conversationId = getConversationId(log);
-  return (
-    <div className="flex-1 min-w-0 space-y-1 text-xs">
-      <div className="flex items-center gap-2">
-        <Badge
-          variant="outline"
-          className={cn(
-            "text-[10px] px-1.5 py-0 h-5 font-mono shrink-0",
-            side === "left"
-              ? "border-status-danger/40 text-status-danger"
-              : "border-status-success/40 text-status-success",
-          )}
-        >
-          {side === "left" ? "← Left" : "Right →"}
-        </Badge>
-        <span className="font-mono text-status-info" title={`Log ID ${String(log.id)}`}>
-          #{displayNumber}
-        </span>
-        {log.model !== null && (
-          <span className="min-w-0 truncate font-mono leading-snug text-muted-foreground">
-            {log.model}
-          </span>
-        )}
-      </div>
-      <div className="flex min-w-0 flex-wrap items-center gap-x-3 gap-y-1 font-mono text-muted-foreground">
-        {log.cacheCreationInputTokens !== null && log.cacheCreationInputTokens > 0 && (
-          <span className="text-status-success">
-            KV Cache +{formatTokens(log.cacheCreationInputTokens)}
-          </span>
-        )}
-        {log.cacheReadInputTokens !== null && log.cacheReadInputTokens > 0 && (
-          <span className="text-status-accent">
-            KV Cache ~{formatTokens(log.cacheReadInputTokens)}
-          </span>
-        )}
-        <span className="truncate" title={log.timestamp}>
-          {log.timestamp}
-        </span>
-      </div>
-      <div className="text-muted-foreground/70 font-mono truncate" title={conversationId}>
-        session: {conversationId}
-      </div>
-    </div>
-  );
-}
-
-export function CompareDrawer({
-  left,
-  right,
-  leftDisplayNumber,
-  rightDisplayNumber,
-  onClose,
-}: CompareDrawerProps): JSX.Element {
-  const panelRef = useRef<HTMLDivElement>(null);
-  const closeButtonRef = useRef<HTMLButtonElement>(null);
-  const previousActiveElementRef = useRef<HTMLElement | null>(null);
-  // Memoize the diff so re-renders (e.g. parent re-renders) don't recompute.
-  const ops = useMemo<DiffOp[]>(() => {
-    const leftRequest = getLogFormatAdapter(resolveLogFormat(left)).analyzeRequest(
-      left.rawRequestBody,
-    );
-    const rightRequest = getLogFormatAdapter(resolveLogFormat(right)).analyzeRequest(
-      right.rawRequestBody,
-    );
-    const l = normalizeRequest(leftRequest.comparisonValue);
-    const r = normalizeRequest(rightRequest.comparisonValue);
-    return diffTrees(l, r);
-  }, [
-    left.apiFormat,
-    left.path,
-    left.rawRequestBody,
-    right.apiFormat,
-    right.path,
-    right.rawRequestBody,
-  ]);
-
-  const grouped = useMemo(() => groupContiguousEquals(ops), [ops]);
-
-  // Count diff ops by kind (ignoring equal-run groups, which are always
-  // collapsed and not actionable). Drives the summary chips.
-  const counts = useMemo(() => {
-    let added = 0;
-    let removed = 0;
-    let changed = 0;
-    for (const g of grouped) {
-      if (g.kind !== "single") continue;
-      switch (g.op.kind) {
-        case "added":
-          added++;
-          break;
-        case "removed":
-          removed++;
-          break;
-        case "changed":
-          changed++;
-          break;
-        case "equal":
-          break;
-      }
-    }
-    return { added, removed, changed };
-  }, [grouped]);
-
-  // Track which collapsed equal runs are expanded.
-  const [expandedRuns, setExpandedRuns] = useState<Set<number>>(new Set());
-  const toggleRun = (idx: number) => {
-    setExpandedRuns((prev) => {
-      const next = new Set(prev);
-      if (next.has(idx)) next.delete(idx);
-      else next.add(idx);
-      return next;
-    });
-  };
-
-  // Track which individual diff rows (added / removed / changed) are
-  // expanded. Independent of `expandedRuns` (which is for equal-run groups)
-  // so the two expand affordances don't interfere.
-  const [expandedRows, setExpandedRows] = useState<Set<number>>(new Set());
-  const toggleRow = (idx: number) => {
-    setExpandedRows((prev) => {
-      const next = new Set(prev);
-      if (next.has(idx)) next.delete(idx);
-      else next.add(idx);
-      return next;
-    });
-  };
-
-  // Reset per-row expand state when the comparison pair changes.
-  useEffect(() => {
-    setExpandedRows(new Set());
-  }, [left.id, right.id]);
-
-  const [mode, setMode] = useState<DiffMode>("unified");
-
-  // Body scroll container — used to scroll a target row into view when a
-  // summary chip is clicked.
-  const bodyRef = useRef<HTMLDivElement>(null);
-
-  // Most-recently-copied path. Used to flash the icon from Copy → Check.
-  const [copiedPath, setCopiedPath] = useState<string | null>(null);
-  const copyResetTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
-  const onCopyPath = (path: string) => {
-    void copyTextToClipboard(path).then((success) => {
-      if (!success) return;
-      setCopiedPath(path);
-      if (copyResetTimer.current !== null) clearTimeout(copyResetTimer.current);
-      copyResetTimer.current = setTimeout(() => setCopiedPath(null), 1500);
-    });
-  };
-  useEffect(() => {
-    return () => {
-      if (copyResetTimer.current !== null) clearTimeout(copyResetTimer.current);
-    };
-  }, []);
-
-  // Find the grouped-index of the first op matching `kind`, and scroll to it.
-  const jumpToKind = (kind: "added" | "removed" | "changed") => {
-    const idx = grouped.findIndex((g) => g.kind === "single" && g.op.kind === kind);
-    if (idx === -1) return;
-    const root = bodyRef.current;
-    if (root === null) return;
-    const el = root.querySelector(`[data-diff-idx="${idx}"]`);
-    if (el !== null) {
-      el.scrollIntoView({ behavior: "smooth", block: "center" });
-    }
-  };
-
-  // Esc keybinding, initial focus, focus restoration, and body scroll lock while open.
-  useEffect(() => {
-    previousActiveElementRef.current =
-      document.activeElement instanceof HTMLElement ? document.activeElement : null;
-    closeButtonRef.current?.focus();
-
-    const onKey = (e: KeyboardEvent) => {
-      if (e.key === "Escape") onClose();
-    };
-    document.addEventListener("keydown", onKey);
-    const prevOverflow = document.body.style.overflow;
-    document.body.style.overflow = "hidden";
-    return () => {
-      document.removeEventListener("keydown", onKey);
-      document.body.style.overflow = prevOverflow;
-      previousActiveElementRef.current?.focus();
-    };
-  }, [onClose]);
-
-  const handlePanelKeyDown = (event: ReactKeyboardEvent<HTMLDivElement>): void => {
-    event.stopPropagation();
-    if (event.key !== "Tab") return;
-
-    const panel = panelRef.current;
-    if (panel === null) return;
-    const focusable = Array.from(
-      panel.querySelectorAll<HTMLElement>(
-        'button:not([disabled]), [href], input:not([disabled]), [tabindex]:not([tabindex="-1"])',
-      ),
-    );
-    const first = focusable[0];
-    const last = focusable[focusable.length - 1];
-    if (first === undefined || last === undefined) return;
-
-    if (event.shiftKey && document.activeElement === first) {
-      event.preventDefault();
-      last.focus();
-      return;
-    }
-    if (!event.shiftKey && document.activeElement === last) {
-      event.preventDefault();
-      first.focus();
-    }
-  };
-
-  const sameSession = getConversationId(left) === getConversationId(right);
-  const allEqual = ops.length === 1 && ops[0]?.kind === "equal";
-
-  return (
-    <div
-      className="fixed inset-0 z-50 flex justify-end"
-      role="dialog"
-      aria-modal="true"
-      aria-label="Compare two log requests"
-    >
-      {/* Backdrop */}
-      <button
-        type="button"
-        onClick={onClose}
-        aria-label="Close compare drawer"
-        className="absolute inset-0 bg-black/40 cursor-default"
-        tabIndex={-1}
-      />
-
-      {/* Drawer panel */}
-      <div
-        ref={panelRef}
-        className={cn(
-          "relative overflow-x-hidden bg-background border-l border-border shadow-xl",
-          "w-full md:w-[70vw] max-w-[1100px] flex flex-col h-full",
-        )}
-        onClick={(e) => e.stopPropagation()}
-        onKeyDown={handlePanelKeyDown}
-      >
-        {/* Header */}
-        <div className={COMPARE_RESPONSIVE_HEADER_CLASS_NAME}>
-          <div className="grid min-w-0 flex-1 grid-cols-1 gap-3 sm:grid-cols-2 sm:gap-4">
-            <SideSummary log={left} side="left" displayNumber={leftDisplayNumber} />
-            <SideSummary log={right} side="right" displayNumber={rightDisplayNumber} />
-          </div>
-          <div className="flex w-full shrink-0 items-center justify-between gap-2 sm:w-auto sm:justify-start">
-            <ModeToggle mode={mode} onChange={setMode} />
-            <button
-              ref={closeButtonRef}
-              type="button"
-              onClick={onClose}
-              aria-label="Close"
-              className="p-1 rounded text-muted-foreground hover:text-foreground hover:bg-muted cursor-pointer"
-            >
-              <X className="size-4" />
-            </button>
-          </div>
-        </div>
-
-        {!sameSession && (
-          <div className="border-b border-border bg-warning/10 px-4 py-1.5 text-xs text-foreground">
-            Heads up: the two selected logs are from different sessions.
-          </div>
-        )}
-
-        {allEqual ? (
-          <div className="flex-1 min-h-0 overflow-y-auto flex items-center justify-center text-muted-foreground text-sm">
-            The two Request payloads are identical.
-          </div>
-        ) : (
-          <>
-            <SummaryChips counts={counts} onJumpTo={jumpToKind} />
-            <div ref={bodyRef} className="flex-1 min-h-0 overflow-y-auto">
-              {mode === "unified" ? (
-                <div className="px-3 py-2 space-y-0.5">
-                  {grouped.map((g, i) => {
-                    if (g.kind === "equal-run") {
-                      return (
-                        <EqualRunRow
-                          key={`r${i}`}
-                          ops={g.ops}
-                          expanded={expandedRuns.has(i)}
-                          onToggle={() => toggleRun(i)}
-                        />
-                      );
-                    }
-                    const op = g.op;
-                    return (
-                      <UnifiedOpRow
-                        key={`o${i}`}
-                        op={op}
-                        idx={i}
-                        copiedPath={copiedPath}
-                        onCopyPath={onCopyPath}
-                        expanded={expandedRows.has(i)}
-                        onToggle={() => toggleRow(i)}
-                      />
-                    );
-                  })}
-                </div>
-              ) : (
-                <SplitBody
-                  grouped={grouped}
-                  left={left}
-                  right={right}
-                  leftDisplayNumber={leftDisplayNumber}
-                  rightDisplayNumber={rightDisplayNumber}
-                />
-              )}
-            </div>
-          </>
-        )}
-      </div>
-    </div>
-  );
-}
-
-/** Three-column on wide screens and a bounded stacked comparison on narrow screens. */
-function SplitBody({
-  grouped,
-  left,
-  right,
-  leftDisplayNumber,
-  rightDisplayNumber,
-}: {
-  grouped: GroupedOp[];
-  left: CapturedLog;
-  right: CapturedLog;
-  leftDisplayNumber: number;
-  rightDisplayNumber: number;
-}): JSX.Element {
-  return (
-    <div data-compare-layout="responsive-split" className={COMPARE_RESPONSIVE_SPLIT_CLASS_NAME}>
-      {/* Column headers */}
-      <div className="col-span-1 mb-2 grid grid-cols-1 gap-x-2 gap-y-1 border-b border-border pb-2 text-[10px] uppercase tracking-wider text-muted-foreground md:col-span-3 md:grid-cols-[200px_minmax(0,1fr)_minmax(0,1fr)]">
-        <span>Path</span>
-        <span title={`Log ID ${String(left.id)}`}>Left (Log #{leftDisplayNumber})</span>
-        <span title={`Log ID ${String(right.id)}`}>Right (Log #{rightDisplayNumber})</span>
-      </div>
-
-      {grouped.map((g, i) => {
-        if (g.kind === "equal-run") {
-          return (
-            <div
-              // biome-ignore lint/suspicious/noArrayIndexKey: positional in the grouped list
-              key={i}
-              className="col-span-1 px-2 py-1 text-xs text-muted-foreground/60 md:col-span-3"
-            >
-              {g.ops.length} equal siblings collapsed — switch to Unified to expand
-            </div>
-          );
-        }
-        const op = g.op;
-        if (op.kind === "equal") {
-          return (
-            <div
-              // biome-ignore lint/suspicious/noArrayIndexKey: positional in the grouped list
-              key={i}
-              className="col-span-1 grid min-w-0 grid-cols-1 gap-x-2 gap-y-1 px-2 py-0.5 text-muted-foreground md:col-span-3 md:grid-cols-[200px_minmax(0,1fr)_minmax(0,1fr)]"
-            >
-              <span className="font-mono text-xs truncate" title={op.path}>
-                {op.path}
-              </span>
-              <span className="font-mono text-xs break-all opacity-60">
-                {previewNode(op.value, 200)}
-              </span>
-              <span className="font-mono text-xs break-all opacity-60">
-                {previewNode(op.value, 200)}
-              </span>
-            </div>
-          );
-        }
-        if (op.kind === "added") {
-          return (
-            <div
-              // biome-ignore lint/suspicious/noArrayIndexKey: positional in the grouped list
-              key={i}
-              className="col-span-1 rounded border-l-2 border-l-status-success bg-status-success/5 px-2 py-1 text-xs md:col-span-3"
-            >
-              <div className="font-mono text-xs text-muted-foreground mb-0.5">{op.path}</div>
-              <div className="font-mono break-all text-status-success">
-                + {previewNode(op.value, 400)}
-              </div>
-            </div>
-          );
-        }
-        if (op.kind === "removed") {
-          return (
-            <div
-              // biome-ignore lint/suspicious/noArrayIndexKey: positional in the grouped list
-              key={i}
-              className="col-span-1 rounded border-l-2 border-l-status-danger bg-status-danger/5 px-2 py-1 text-xs md:col-span-3"
-            >
-              <div className="font-mono text-xs text-muted-foreground mb-0.5">{op.path}</div>
-              <div className="font-mono break-all text-status-danger line-through">
-                − {previewNode(op.value, 400)}
-              </div>
-            </div>
-          );
-        }
-        return (
-          <div
-            // biome-ignore lint/suspicious/noArrayIndexKey: positional in the grouped list
-            key={i}
-            className="col-span-1 rounded border-l-2 border-l-status-watch bg-status-watch/5 px-2 py-1 text-xs md:col-span-3"
-          >
-            <div className="font-mono text-xs text-muted-foreground mb-1">{op.path}</div>
-            <div className="grid grid-cols-1 gap-2 sm:grid-cols-2">
-              <div className="font-mono break-all text-status-danger line-through">
-                {previewNode(op.left, 400)}
-              </div>
-              <div className="font-mono break-all text-status-success">
-                {previewNode(op.right, 400)}
-              </div>
-            </div>
-          </div>
-        );
-      })}
-    </div>
-  );
-}