@tonyclaw/llm-inspector 1.16.4 → 1.17.0

package/src/components/proxy-viewer/anatomy/RequestAnatomy.tsx

@@ -0,0 +1,98 @@
+import { Info } from "lucide-react";
+import { type JSX, useMemo } from "react";
+import { cn, formatTokens } from "../../../lib/utils";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../../ui/tooltip";
+import { SegmentBar } from "./SegmentBar";
+import type { AnatomySegment } from "./types";
+
+export type RequestAnatomyProps = {
+  /** Parsed request body, or `null` if it cannot be parsed. */
+  parsed: unknown | null;
+  /** Server-reported input token count, or `null` if unknown. */
+  inputTokens: number | null;
+  /** Optional callback fired when the user activates a segment. */
+  onSegmentActivate?: (segment: AnatomySegment) => void;
+  /** Pre-computed segments; if provided, `parsed` is ignored. */
+  segments?: AnatomySegment[] | null;
+};
+
+const DIVERGENCE_AMBER_THRESHOLD = 0.25;
+
+/**
+ * Render the request anatomy view: a one-line summary plus the
+ * stacked segment bar. Returns `null` when the request cannot be
+ * parsed or the segment list is empty.
+ */
+export function RequestAnatomy({
+  parsed,
+  inputTokens,
+  onSegmentActivate,
+  segments: providedSegments,
+}: RequestAnatomyProps): JSX.Element | null {
+  // Caller is expected to pre-compute segments in production (see
+  // LogEntry). When called standalone, fall back to deriving from
+  // `parsed` directly using the unknown adapter is not appropriate —
+  // the caller is responsible for choosing the right adapter.
+  const segments = useMemo(() => providedSegments ?? null, [providedSegments]);
+  const total = useMemo(() => (segments ?? []).reduce((sum, s) => sum + s.size, 0), [segments]);
+
+  // Show divergence warning when both estimate and server numbers exist.
+  const showDivergenceWarning = useMemo(() => {
+    if (segments === null || segments === undefined) return false;
+    if (inputTokens === null) return false;
+    if (total === 0) return false;
+    const ratio = Math.abs(inputTokens - total) / Math.max(inputTokens, total);
+    return ratio >= DIVERGENCE_AMBER_THRESHOLD;
+  }, [inputTokens, segments, total]);
+
+  const summaryColorClass = useMemo(() => {
+    if (inputTokens === null) return "text-muted-foreground";
+    if (showDivergenceWarning) return "text-amber-400";
+    return "text-muted-foreground";
+  }, [inputTokens, showDivergenceWarning]);
+
+  if (segments === null || segments === undefined) {
+    return null;
+  }
+  if (segments.length === 0) {
+    return null;
+  }
+  if (parsed === null && providedSegments === undefined) {
+    return null;
+  }
+
+  return (
+    <TooltipProvider delayDuration={150}>
+      <div className="px-4 py-3 space-y-2" data-testid="anatomy-root">
+        <div className="flex items-center gap-2 text-xs">
+          <span className="font-mono tabular-nums text-foreground">
+            ~{formatTokens(total)} tokens
+          </span>
+          {inputTokens !== null && (
+            <span className={cn("font-mono tabular-nums", summaryColorClass)}>
+              (server: {formatTokens(inputTokens)})
+            </span>
+          )}
+          {showDivergenceWarning && (
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <button
+                  type="button"
+                  className="inline-flex items-center text-amber-400 hover:text-amber-300"
+                  aria-label="Token estimate diverges from server"
+                >
+                  <Info className="size-3.5" />
+                </button>
+              </TooltipTrigger>
+              <TooltipContent className="max-w-xs text-xs">
+                Bar uses a token estimate heuristic (~4 ASCII chars / token, ~1 CJK / emoji char per
+                token). The server&apos;s reported value is the source of truth for cost.
+              </TooltipContent>
+            </Tooltip>
+          )}
+        </div>
+        <SegmentBar segments={segments} totalTokens={total} onActivate={onSegmentActivate} />
+      </div>
+    </TooltipProvider>
+  );
+}

package/src/components/proxy-viewer/anatomy/SegmentBar.tsx

@@ -0,0 +1,196 @@
+import { type JSX, memo, useMemo } from "react";
+import { cn, formatTokens } from "../../../lib/utils";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../../ui/tooltip";
+import type { AnatomyRole, AnatomySegment } from "./types";
+
+const ROLE_COLOR_CLASSES: Record<AnatomyRole, string> = {
+  system: "bg-sky-500/70",
+  user: "bg-emerald-500/70",
+  assistant: "bg-violet-500/70",
+  tool: "bg-amber-500/70",
+  tools: "bg-slate-500/70",
+};
+
+const ROLE_FOCUS_RING: Record<AnatomyRole, string> = {
+  system: "focus-visible:ring-sky-300",
+  user: "focus-visible:ring-emerald-300",
+  assistant: "focus-visible:ring-violet-300",
+  tool: "focus-visible:ring-amber-300",
+  tools: "focus-visible:ring-slate-300",
+};
+
+const MAX_VISIBLE_SEGMENTS = 12;
+const MIN_SEGMENT_PERCENT = 1;
+
+const TOOLTIP_PREVIEW_LIMIT = 80;
+const LABEL_TRUNCATE_LIMIT = 24;
+
+function truncateLabel(label: string): string {
+  if (label.length <= LABEL_TRUNCATE_LIMIT) return label;
+  return `${label.slice(0, LABEL_TRUNCATE_LIMIT - 1)}…`;
+}
+
+function truncatePreview(text: string): string {
+  const singleLine = text.replace(/\s+/g, " ").trim();
+  if (singleLine.length <= TOOLTIP_PREVIEW_LIMIT) return singleLine;
+  return `${singleLine.slice(0, TOOLTIP_PREVIEW_LIMIT)}…`;
+}
+
+export type SegmentBarProps = {
+  segments: ReadonlyArray<AnatomySegment>;
+  totalTokens: number;
+  onActivate?: (segment: AnatomySegment) => void;
+};
+
+/**
+ * Render a horizontal stacked bar showing the relative size of each
+ * request segment, with role-based color, per-segment labels, and
+ * an overflow pill that aggregates any segments beyond the visible
+ * cap. Click or keyboard activation (Enter / Space) calls `onActivate`.
+ */
+export const SegmentBar = memo(function SegmentBar({
+  segments,
+  totalTokens,
+  onActivate,
+}: SegmentBarProps): JSX.Element {
+  const total = useMemo(() => {
+    if (totalTokens > 0) return totalTokens;
+    return segments.reduce((sum, s) => sum + s.size, 0);
+  }, [segments, totalTokens]);
+
+  const visibleSegments = segments.slice(0, MAX_VISIBLE_SEGMENTS);
+  const overflowSegments = segments.slice(MAX_VISIBLE_SEGMENTS);
+  const overflowSize = overflowSegments.reduce((sum, s) => sum + s.size, 0);
+  const overflowCount = overflowSegments.length;
+  const overflowStartIndex = MAX_VISIBLE_SEGMENTS;
+  const overflowEndIndex = overflowStartIndex + overflowCount - 1;
+  const hasOverflow = overflowCount > 0;
+
+  const visibleTotal = useMemo(
+    () => visibleSegments.reduce((sum, s) => sum + s.size, 0),
+    [visibleSegments],
+  );
+
+  const ariaLabel = useMemo(
+    () =>
+      `Request anatomy: ~${formatTokens(total)} tokens across ${segments.length} segment${segments.length === 1 ? "" : "s"}`,
+    [segments.length, total],
+  );
+
+  if (segments.length === 0 || total <= 0) {
+    return <div role="img" aria-label={ariaLabel} className="h-6" />;
+  }
+
+  return (
+    <TooltipProvider delayDuration={150}>
+      <div role="img" aria-label={ariaLabel} className="flex flex-col gap-1.5">
+        <div
+          className="relative flex h-6 w-full overflow-hidden rounded border border-border/40 bg-muted/30"
+          data-testid="anatomy-segment-bar"
+        >
+          {visibleSegments.map((segment, index) => {
+            const rawPercent = total > 0 ? (segment.size / total) * 100 : 0;
+            const percent = Math.max(MIN_SEGMENT_PERCENT, rawPercent);
+            return (
+              <Tooltip key={`${segment.path}-${index}`}>
+                <TooltipTrigger asChild>
+                  <button
+                    type="button"
+                    role="button"
+                    tabIndex={0}
+                    onClick={() => onActivate?.(segment)}
+                    onKeyDown={(e) => {
+                      if (e.key === "Enter" || e.key === " ") {
+                        e.preventDefault();
+                        onActivate?.(segment);
+                      }
+                    }}
+                    data-anatomy-path={segment.path}
+                    aria-label={`${segment.label}, ~${formatTokens(segment.size)} tokens`}
+                    className={cn(
+                      "h-full border-r border-background/80 last:border-r-0",
+                      "opacity-90 hover:opacity-100 focus:opacity-100",
+                      "focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-1 focus-visible:ring-offset-background",
+                      ROLE_COLOR_CLASSES[segment.role],
+                      ROLE_FOCUS_RING[segment.role],
+                    )}
+                    style={{ width: `${percent}%` }}
+                  />
+                </TooltipTrigger>
+                <TooltipContent side="bottom" className="max-w-sm text-xs p-2 space-y-0.5">
+                  <div className="font-semibold">
+                    {segment.label} · ~{formatTokens(segment.size)} tokens
+                  </div>
+                  <div className="text-muted-foreground">
+                    {segment.characters.toLocaleString()} chars
+                  </div>
+                  {segment.text.length > 0 && (
+                    <div className="text-muted-foreground/90 break-words whitespace-pre-wrap">
+                      {truncatePreview(segment.text)}
+                    </div>
+                  )}
+                </TooltipContent>
+              </Tooltip>
+            );
+          })}
+          {hasOverflow && (
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <div
+                  role="img"
+                  aria-label={`${overflowCount} additional segments`}
+                  className="flex h-full items-center justify-center bg-muted-foreground/30 px-1.5 text-[10px] font-mono text-background"
+                  style={{
+                    width: `${Math.max(MIN_SEGMENT_PERCENT, (overflowSize / total) * 100)}%`,
+                  }}
+                >
+                  … +{overflowCount}
+                </div>
+              </TooltipTrigger>
+              <TooltipContent side="bottom" className="text-xs">
+                {overflowCount} more segment{overflowCount === 1 ? "" : "s"} (indices{" "}
+                {overflowStartIndex}–{overflowEndIndex})
+              </TooltipContent>
+            </Tooltip>
+          )}
+        </div>
+
+        <div className="flex w-full gap-1 text-[10px] text-muted-foreground">
+          {visibleSegments.map((segment, index) => {
+            const rawPercent = total > 0 ? (segment.size / total) * 100 : 0;
+            const percent = Math.max(MIN_SEGMENT_PERCENT, rawPercent);
+            return (
+              <div
+                key={`label-${segment.path}-${index}`}
+                className="flex flex-col gap-0.5 truncate"
+                style={{ width: `${percent}%` }}
+                title={`${segment.label} · ~${formatTokens(segment.size)} tokens`}
+              >
+                <span className="truncate font-mono text-foreground/80">
+                  {truncateLabel(segment.label)}
+                </span>
+                <span className="truncate font-mono text-muted-foreground/70">
+                  ~{formatTokens(segment.size)}
+                </span>
+              </div>
+            );
+          })}
+          {hasOverflow && (
+            <div
+              className="flex flex-col gap-0.5 truncate text-muted-foreground"
+              style={{ width: `${Math.max(MIN_SEGMENT_PERCENT, (overflowSize / total) * 100)}%` }}
+            >
+              <span className="truncate font-mono text-foreground/60">… +{overflowCount}</span>
+              <span className="truncate font-mono text-muted-foreground/60">
+                ~{formatTokens(overflowSize)}
+              </span>
+            </div>
+          )}
+        </div>
+
+        {/* Spacer to maintain minimum bar height for tiny segments */}
+        {visibleTotal < total * 0.1 && <div className="h-0" />}
+      </div>
+    </TooltipProvider>
+  );
+});

package/src/components/proxy-viewer/anatomy/tokenEstimate.ts

@@ -0,0 +1,53 @@
+/**
+ * Blended 4-chars-per-token heuristic with CJK / emoji adjustment.
+ *
+ * Rationale: Anthropic and OpenAI both document ~4 chars/token for
+ * English / Latin / punctuation. CJK characters, Hangul, kana, fullwidth
+ * forms, and emoji tokenize roughly 1:1 in practice. We use a simple
+ * two-bucket counter rather than a full BPE tokenizer to keep the
+ * estimate cheap and synchronous — the result is shown with a leading
+ * `~` so the user is never misled about precision.
+ */
+
+/** A single Unicode code-point character from `text`. */
+function forEachCodePoint(text: string, visit: (ch: string) => void): void {
+  // `Array.from` iterates by code point, so surrogate pairs and
+  // combining marks stay together.
+  for (const ch of Array.from(text)) {
+    visit(ch);
+  }
+}
+
+const CJK_REGEX = /[\u3000-\u9FFF\uAC00-\uD7FF\uF900-\uFAFF\uFF00-\uFFEF\u{1F300}-\u{1FAFF}]/u;
+
+/**
+ * Estimate the token count of a piece of text.
+ *
+ * - CJK / Hangul / kana / fullwidth / emoji → 1 token per character
+ * - Everything else → 1 token per 4 characters, rounded up
+ *
+ * Returns 0 for the empty string.
+ */
+export function estimateTokens(text: string): number {
+  if (text.length === 0) return 0;
+  let cjk = 0;
+  let other = 0;
+  forEachCodePoint(text, (ch) => {
+    if (CJK_REGEX.test(ch)) {
+      cjk += 1;
+    } else {
+      other += 1;
+    }
+  });
+  return Math.ceil(cjk * 1) + Math.ceil(other / 4);
+}
+
+/** Count Unicode code points in a string (graphemes ≈ characters for our purposes). */
+export function countCharacters(text: string): number {
+  if (text.length === 0) return 0;
+  let n = 0;
+  forEachCodePoint(text, () => {
+    n += 1;
+  });
+  return n;
+}

package/src/components/proxy-viewer/anatomy/types.ts

@@ -0,0 +1,39 @@
+/**
+ * Role of a request segment. Drives the segment's color in the anatomy bar.
+ *
+ * - `system`: the system prompt (Anthropic `system`, or leading system-role message in OpenAI)
+ * - `user`: a user-role message
+ * - `assistant`: an assistant-role message
+ * - `tool`: a tool-role message (OpenAI only — Anthropic uses tool_result blocks inside user messages)
+ * - `tools`: the synthetic "tool definitions" segment that aggregates the `tools` array
+ */
+export type AnatomyRole = "system" | "user" | "assistant" | "tool" | "tools";
+
+/**
+ * A single segment of a request as visualized in the Anatomy tab.
+ *
+ * `path` is a JSON-pointer-style path into the parsed body
+ * (e.g. `/system`, `/messages/0`, `/tools`). The path is opaque to
+ * consumers — it is matched against the same path emitted by the
+ * request analyzer, and is used to drive click-to-jump in the
+ * `JsonViewer`. A `null` path is allowed for the synthetic `tools`
+ * segment in the rare case where the tools array cannot be located.
+ */
+export type AnatomySegment = {
+  /** Stable role used for color and label prefix. */
+  role: AnatomyRole;
+  /** Human-readable short label shown below the segment (e.g. "system", "[3] user", "tools"). */
+  label: string;
+  /** Estimated token count for this segment. Drives bar width. */
+  size: number;
+  /** Character count for this segment (raw text length). Used in the tooltip. */
+  characters: number;
+  /** Raw text of the segment used to compute `size`. Used in the tooltip preview. */
+  text: string;
+  /**
+   * JSON-pointer-style path into the parsed body (e.g. `/messages/3`).
+   * `null` when the segment does not correspond to a single node
+   * (e.g. the synthetic `tools` segment that aggregates the array).
+   */
+  path: string;
+};

package/src/components/proxy-viewer/anatomy/useAnatomyJump.ts

@@ -0,0 +1,114 @@
+import { type RefObject, useCallback, useRef } from "react";
+import type { AnatomySegment } from "./types";
+
+const HIGHLIGHT_DURATION_MS = 1200;
+/**
+ * Cap on the number of animation frames we are willing to wait
+ * before giving up on finding the target row. Each frame is
+ * ~16ms at 60Hz, so 12 frames gives ~200ms — enough headroom for
+ * the cascade of `useEffect` -> `setExpanded` calls that fires
+ * for each ancestor on the way down to the target.
+ */
+const MAX_HIGHLIGHT_ATTEMPTS = 12;
+
+/**
+ * Build a `jumpToSegment` callback that:
+ *
+ * 1. Optionally switches the active tab to the Request tab (so the
+ *    target row is in the DOM and visible).
+ * 2. Asks the JSON viewer to expand the path's ancestors via the
+ *    `expandToPath` prop (which is reset to `null` shortly after).
+ * 3. Polls via `requestAnimationFrame` for the target row to appear
+ *    (the cascade of `useEffect` -> `setExpanded` calls needs
+ *    multiple frames for deep paths), then scrolls the matching
+ *    row into view and applies a 1.2 s primary-color ring
+ *    highlight via a temporary class toggle.
+ */
+export function useAnatomyJump(options: {
+  /** Ref to the DOM root that contains the JSON tree rows. */
+  containerRef: RefObject<HTMLElement | null>;
+  /** Setter for the `JsonViewer`'s `expandToPath` prop. */
+  setExpandToPath: (path: string | null) => void;
+  /**
+   * Optional hook called before the DOM lookup so the caller can
+   * make the Request tab active. The hook should be synchronous
+   * (it triggers a React state update which is flushed by the
+   * subsequent `requestAnimationFrame`).
+   */
+  ensureTabActive?: () => void;
+  highlightMs?: number;
+}): (segment: AnatomySegment) => void {
+  const { containerRef, setExpandToPath, ensureTabActive, highlightMs } = options;
+  const highlightTimer = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  return useCallback(
+    (segment: AnatomySegment) => {
+      ensureTabActive?.();
+
+      // Trigger the JSON viewer to expand ancestors of this path.
+      // We pass the same path; the JsonViewer resets the prop via
+      // the caller clearing the state after the scroll lands.
+      setExpandToPath(segment.path);
+
+      const applyHighlight = (target: HTMLElement): void => {
+        target.scrollIntoView({ behavior: "smooth", block: "center" });
+        target.classList.add(
+          "ring-2",
+          "ring-primary/60",
+          "ring-offset-1",
+          "ring-offset-background",
+          "rounded-sm",
+          "transition-shadow",
+        );
+        if (highlightTimer.current !== null) clearTimeout(highlightTimer.current);
+        highlightTimer.current = setTimeout(() => {
+          target.classList.remove(
+            "ring-2",
+            "ring-primary/60",
+            "ring-offset-1",
+            "ring-offset-background",
+            "rounded-sm",
+            "transition-shadow",
+          );
+          // Clear the expand signal AFTER the highlight fades so the
+          // user sees the tree in its final (expanded) state, not
+          // suddenly collapsing the moment we release control.
+          setExpandToPath(null);
+        }, highlightMs ?? HIGHLIGHT_DURATION_MS);
+      };
+
+      const escape = (value: string): string => {
+        if (typeof CSS !== "undefined" && typeof CSS.escape === "function") {
+          return CSS.escape(value);
+        }
+        return value.replace(/(["'\\[\](){}])/g, "\\$1");
+      };
+      const selector = `[data-anatomy-path="${escape(segment.path)}"]`;
+
+      const tryFindTarget = (attemptsLeft: number): void => {
+        const container = containerRef.current;
+        if (container !== null) {
+          const target = container.querySelector<HTMLElement>(selector);
+          if (target !== null) {
+            applyHighlight(target);
+            return;
+          }
+        }
+        if (attemptsLeft > 0) {
+          window.requestAnimationFrame(() => tryFindTarget(attemptsLeft - 1));
+        } else {
+          // Path not in the DOM after a generous wait — reset state
+          // and bail. This is the right behavior for malformed paths
+          // (e.g. when the format adapter returns a path that does
+          // not exist in the current request body).
+          setExpandToPath(null);
+        }
+      };
+
+      // Wait one frame for the tab-switch / expandToPath state
+      // update to commit before we start probing the DOM.
+      window.requestAnimationFrame(() => tryFindTarget(MAX_HIGHLIGHT_ATTEMPTS));
+    },
+    [containerRef, ensureTabActive, highlightMs, setExpandToPath],
+  );
+}

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

@@ -4,8 +4,10 @@ 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, safeJsonValue } from "../../../ui/json-viewer";
+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 <></>;
@@ -37,28 +39,6 @@ function SystemReminderBlock({ text }: { text: string }): JSX.Element {
   );
 }
 
-// Regex to extract content wrapped in <think>...</thinking> tags (MiniMax format: <think>...</think>)
-const THINKING_TAG_REGEX = /<think>([\s\S]*?)<\/think>/gi;
-const THINKING_TAG_REGEX_SINGLE = /<think>([\s\S]*?)<\/think>/i;
-
-/**
- * Extract thinking content wrapped in <think> tags (thought balloon emoji) from text.
- * Returns { thinking, remainingText } where thinking is the extracted content
- * and remainingText is the original text with thinking tags removed.
- */
-export function extractThinkingFromContent(text: string): {
-  thinking: string | null;
-  remainingText: string;
-} {
-  const match = THINKING_TAG_REGEX_SINGLE.exec(text);
-  if (!match || match[1] === undefined) {
-    return { thinking: null, remainingText: text };
-  }
-  const thinking = match[1].trim();
-  const remainingText = text.replace(THINKING_TAG_REGEX, "").trim();
-  return { thinking, remainingText };
-}
-
 export const TextBlock = memo(function TextBlock({ text }: { text: string }): JSX.Element {
   if (text.includes("<system-reminder>")) {
     return <SystemReminderBlock text={text} />;

package/src/components/proxy-viewer/formats/anthropic/thinkingExtract.ts

@@ -0,0 +1,21 @@
+// Regex to extract content wrapped in <think>...</thinking> tags (MiniMax format: <think>...</think>)
+const THINKING_TAG_REGEX = /<think>([\s\S]*?)<\/think>/gi;
+const THINKING_TAG_REGEX_SINGLE = /<think>([\s\S]*?)<\/think>/i;
+
+/**
+ * Extract thinking content wrapped in <think> tags (thought balloon emoji) from text.
+ * Returns { thinking, remainingText } where thinking is the extracted content
+ * and remainingText is the original text with thinking tags removed.
+ */
+export function extractThinkingFromContent(text: string): {
+  thinking: string | null;
+  remainingText: string;
+} {
+  const match = THINKING_TAG_REGEX_SINGLE.exec(text);
+  if (!match || match[1] === undefined) {
+    return { thinking: null, remainingText: text };
+  }
+  const thinking = match[1].trim();
+  const remainingText = text.replace(THINKING_TAG_REGEX, "").trim();
+  return { thinking, remainingText };
+}

package/src/components/proxy-viewer/formats/openai/ResponseView.tsx

@@ -4,15 +4,17 @@ import ReactMarkdown from "react-markdown";
 import type { OpenAIResponse, OpenAIToolCall } from "../../../../proxy/schemas";
 import { formatTokens } from "../../../../lib/utils";
 import { Badge } from "../../../ui/badge";
-import { JsonViewer, safeJsonValue } from "../../../ui/json-viewer";
+import { JsonViewer } from "../../../ui/json-viewer";
+import { safeJsonValue } from "../../../ui/json-viewer-bulk";
 import { ScrollArea } from "../../../ui/scroll-area";
 import { Separator } from "../../../ui/separator";
 import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "../../../ui/collapsible";
 import { ChevronDown, ChevronRight } from "lucide-react";
-import { extractThinkingFromContent, ThinkingBlock } from "../anthropic/ContentBlocks";
+import { ThinkingBlock } from "../anthropic/ContentBlocks";
+import { extractThinkingFromContent } from "../anthropic/thinkingExtract";
 
 // Re-export for use in other components
-export { extractThinkingFromContent } from "../anthropic/ContentBlocks";
+export { extractThinkingFromContent } from "../anthropic/thinkingExtract";
 
 /** Best-effort JSON parse of an OpenAI `function.arguments` string. Returns
  *  the parsed object, or `null` on parse failure so the renderer can fall

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

@@ -0,0 +1,37 @@
+import { lazy } from "react";
+
+/**
+ * Lazy-loaded heavy leaf components. Each is split into its own chunk by Vite
+ * (named after the source file) so the main bundle stays small. Imports use
+ * the `.then(m => ({ default: m.X }))` adapter so the original modules can
+ * keep their named exports without needing a default export.
+ */
+export const LazyCompareDrawer = lazy(() =>
+  import("./CompareDrawer").then((m) => ({ default: m.CompareDrawer })),
+);
+
+export const LazyReplayDialog = lazy(() =>
+  import("./ReplayDialog").then((m) => ({ default: m.ReplayDialog })),
+);
+
+export const LazyRequestAnatomy = lazy(() =>
+  import("./anatomy/RequestAnatomy").then((m) => ({ default: m.RequestAnatomy })),
+);
+
+export const LazyResponseView = lazy(() =>
+  import("./ResponseView").then((m) => ({ default: m.ResponseView })),
+);
+
+export const LazyStreamingChunkSequence = lazy(() =>
+  import("./StreamingChunkSequence").then((m) => ({
+    default: m.StreamingChunkSequence,
+  })),
+);
+
+export const LazyJsonViewer = lazy(() =>
+  import("../ui/json-viewer").then((m) => ({ default: m.JsonViewer })),
+);
+
+export const LazyJsonViewerFromString = lazy(() =>
+  import("../ui/json-viewer").then((m) => ({ default: m.JsonViewerFromString })),
+);