@tonyclaw/agent-inspector 4.0.1 → 4.0.3

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

@@ -1,321 +0,0 @@
-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

@@ -1,178 +0,0 @@
-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

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

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

@@ -1,194 +0,0 @@
-import { Brain, ChevronDown, ChevronRight, Terminal } from "lucide-react";
-import { type JSX, memo, Suspense, useEffect, useRef, useState } from "react";
-import type { ResponseContentBlockType } from "../../../../contracts/anthropic";
-import type { ResponseToolFocus } from "../index";
-import { AnswerMarkdown } from "../../AnswerMarkdown";
-import { Badge } from "../../../ui/badge";
-import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../../../ui/collapsible";
-import { safeJsonValue } from "../../../ui/json-viewer-bulk";
-import { ScrollArea } from "../../../ui/scroll-area";
-import { LazyJsonViewer } from "../../lazy";
-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">
-          <AnswerMarkdown text={text} />
-        </div>
-      </CollapsibleContent>
-    </Collapsible>
-  );
-}
-
-// eslint-disable-next-line @typescript-eslint/no-shadow -- named function gives React DevTools a readable displayName
-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 && <AnswerMarkdown text={remainingText} />}
-      {thinking === null && remainingText.length === 0 && (
-        <p className="text-xs text-muted-foreground italic">Empty text block</p>
-      )}
-    </div>
-  );
-});
-
-// eslint-disable-next-line @typescript-eslint/no-shadow -- named function gives React DevTools a readable displayName
-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>
-  );
-});
-
-// eslint-disable-next-line @typescript-eslint/no-shadow -- named function gives React DevTools a readable displayName
-export const ToolUseBlock = memo(function ToolUseBlock({
-  name,
-  input,
-  toolIndex,
-  toolFocus,
-}: {
-  name: string;
-  input: Record<string, unknown>;
-  toolIndex: number;
-  toolFocus?: ResponseToolFocus;
-}): JSX.Element {
-  const [open, setOpen] = useState(false);
-  const triggerRef = useRef<HTMLButtonElement | null>(null);
-  const shouldFocus = toolFocus?.focusedToolIndex === toolIndex;
-
-  useEffect(() => {
-    if (!shouldFocus || toolFocus === undefined || toolFocus.toolFocusNonce <= 0) return undefined;
-    setOpen(true);
-    const timer = window.setTimeout(() => {
-      const trigger = triggerRef.current;
-      if (trigger === null) return;
-      trigger.scrollIntoView({ block: "center", behavior: "smooth" });
-      trigger.focus({ preventScroll: true });
-    }, 0);
-    return () => window.clearTimeout(timer);
-  }, [shouldFocus, toolFocus, toolFocus?.toolFocusNonce]);
-
-  return (
-    <Collapsible open={open} onOpenChange={setOpen}>
-      <div className="border-l-2 border-sky-400/25 my-1" data-response-tool-index={toolIndex}>
-        <CollapsibleTrigger
-          ref={triggerRef}
-          className="flex items-center gap-1.5 px-3 py-1 w-full text-left cursor-pointer hover:bg-sky-400/[0.04] transition-colors rounded-r-sm group focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-        >
-          <Terminal className="size-3.5 text-sky-400/70 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>
-          {open && (
-            <div className="px-3 pb-2">
-              <ScrollArea className="max-h-[60vh]">
-                <Suspense
-                  fallback={<div className="text-xs text-muted-foreground">Loading JSON...</div>}
-                >
-                  <LazyJsonViewer data={safeJsonValue(input)} defaultExpandDepth={0} />
-                </Suspense>
-              </ScrollArea>
-            </div>
-          )}
-        </CollapsibleContent>
-      </div>
-    </Collapsible>
-  );
-});
-
-// eslint-disable-next-line @typescript-eslint/no-shadow -- named function gives React DevTools a readable displayName
-export const ResponseContentBlockRenderer = memo(function ResponseContentBlockRenderer({
-  block,
-  toolIndex,
-  toolFocus,
-}: {
-  block: ResponseContentBlockType;
-  toolIndex?: number;
-  toolFocus?: ResponseToolFocus;
-}): 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}
-          toolIndex={toolIndex ?? 0}
-          toolFocus={toolFocus}
-        />
-      );
-    default:
-      return assertNever(block);
-  }
-});