@tonyclaw/agent-inspector 2.0.0

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

@@ -0,0 +1,321 @@
+import { useVirtualizer } from "@tanstack/react-virtual";
+import { Columns2, Rows3 } from "lucide-react";
+import { memo, 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.
+ */
+const DiffViewInner = 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>
+  );
+}
+
+export const DiffView = memo(DiffViewInner);

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";

package/src/components/proxy-viewer/formats/anthropic/ContentBlocks.tsx

@@ -0,0 +1,157 @@
+import { Brain, ChevronDown, ChevronRight, Terminal } from "lucide-react";
+import { type JSX, memo, useState } from "react";
+import ReactMarkdown from "react-markdown";
+import type { ResponseContentBlockType } from "../../../../proxy/schemas";
+import { Badge } from "../../../ui/badge";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../../../ui/collapsible";
+import { JsonViewer } from "../../../ui/json-viewer";
+import { safeJsonValue } from "../../../ui/json-viewer-bulk";
+import { ScrollArea } from "../../../ui/scroll-area";
+import { extractThinkingFromContent } from "./thinkingExtract";
+
+function assertNever(_value: never): JSX.Element {
+  return <></>;
+}
+
+function SystemReminderBlock({ text }: { text: string }): JSX.Element {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <Collapsible open={open} onOpenChange={setOpen}>
+      <CollapsibleTrigger className="flex items-center gap-1.5 py-0.5 cursor-pointer hover:opacity-80 transition-opacity group">
+        {open ? (
+          <ChevronDown className="size-3 text-muted-foreground" />
+        ) : (
+          <ChevronRight className="size-3 text-muted-foreground" />
+        )}
+        <span className="text-muted-foreground text-xs italic select-none opacity-60">
+          [system-reminder]
+        </span>
+      </CollapsibleTrigger>
+      <CollapsibleContent>
+        <div className="pl-4 pt-1">
+          <div className="prose prose-sm dark:prose-invert max-w-none [&_pre]:bg-muted [&_pre]:text-foreground [&_code]:text-[0.8em] [&_p]:my-1 [&_ul]:my-1 [&_ol]:my-1">
+            <ReactMarkdown>{text}</ReactMarkdown>
+          </div>
+        </div>
+      </CollapsibleContent>
+    </Collapsible>
+  );
+}
+
+export const TextBlock = memo(function TextBlock({ text }: { text: string }): JSX.Element {
+  if (text.includes("<system-reminder>")) {
+    return <SystemReminderBlock text={text} />;
+  }
+
+  // Check for <think> tags wrapped in content
+  const { thinking, remainingText } = extractThinkingFromContent(text);
+
+  return (
+    <div className="space-y-2">
+      {thinking !== null && <ThinkingBlock thinking={thinking} />}
+      {remainingText.length > 0 && (
+        <div className="prose prose-sm dark:prose-invert max-w-none [&_pre]:bg-muted [&_pre]:text-foreground [&_code]:text-[0.8em] [&_p]:my-1 [&_ul]:my-1 [&_ol]:my-1">
+          <ReactMarkdown>{remainingText}</ReactMarkdown>
+        </div>
+      )}
+      {thinking === null && remainingText.length === 0 && (
+        <p className="text-xs text-muted-foreground italic">Empty text block</p>
+      )}
+    </div>
+  );
+});
+
+export const ThinkingBlock = memo(function ThinkingBlock({
+  thinking,
+}: {
+  thinking: string;
+}): JSX.Element {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <Collapsible open={open} onOpenChange={setOpen}>
+      <div className="border-l-2 border-purple-500/40 my-1">
+        <CollapsibleTrigger className="flex items-center gap-1.5 px-3 py-1 w-full text-left cursor-pointer hover:bg-purple-500/5 transition-colors rounded-r-sm group">
+          <Brain className="size-3.5 text-purple-400 shrink-0" />
+          <span className="text-xs font-medium text-purple-400">Thinking</span>
+          <Badge
+            variant="ghost"
+            className="text-[10px] text-muted-foreground px-1.5 py-0 h-4 font-mono"
+          >
+            {thinking.length.toLocaleString()} chars
+          </Badge>
+          <span className="flex-1" />
+          {open ? (
+            <ChevronDown className="size-3 text-muted-foreground" />
+          ) : (
+            <ChevronRight className="size-3 text-muted-foreground" />
+          )}
+        </CollapsibleTrigger>
+        <CollapsibleContent>
+          <div className="px-3 pb-2">
+            <ScrollArea className="max-h-[60vh]">
+              <pre className="text-xs text-muted-foreground whitespace-pre-wrap font-mono leading-relaxed">
+                {thinking}
+              </pre>
+            </ScrollArea>
+          </div>
+        </CollapsibleContent>
+      </div>
+    </Collapsible>
+  );
+});
+
+export const ToolUseBlock = memo(function ToolUseBlock({
+  name,
+  input,
+}: {
+  name: string;
+  input: Record<string, unknown>;
+}): JSX.Element {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <Collapsible open={open} onOpenChange={setOpen}>
+      <div className="border-l-2 border-blue-500/40 my-1">
+        <CollapsibleTrigger className="flex items-center gap-1.5 px-3 py-1 w-full text-left cursor-pointer hover:bg-blue-500/5 transition-colors rounded-r-sm group">
+          <Terminal className="size-3.5 text-blue-400 shrink-0" />
+          <Badge variant="outline" className="text-[10px] font-mono px-1.5 py-0 h-4">
+            {name}
+          </Badge>
+          <span className="flex-1" />
+          {open ? (
+            <ChevronDown className="size-3 text-muted-foreground" />
+          ) : (
+            <ChevronRight className="size-3 text-muted-foreground" />
+          )}
+        </CollapsibleTrigger>
+        <CollapsibleContent>
+          <div className="px-3 pb-2">
+            <ScrollArea className="max-h-[60vh]">
+              <JsonViewer data={safeJsonValue(input)} defaultExpandDepth={0} />
+            </ScrollArea>
+          </div>
+        </CollapsibleContent>
+      </div>
+    </Collapsible>
+  );
+});
+
+export const ResponseContentBlockRenderer = memo(function ResponseContentBlockRenderer({
+  block,
+}: {
+  block: ResponseContentBlockType;
+}): JSX.Element {
+  switch (block.type) {
+    case "text":
+      return <TextBlock text={block.text} />;
+    case "thinking":
+    case "think":
+      return <ThinkingBlock thinking={block.thinking} />;
+    case "tool_use":
+      return <ToolUseBlock name={block.name} input={block.input} />;
+    default:
+      return assertNever(block);
+  }
+});