@tonyclaw/agent-inspector 2.0.0

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

@@ -0,0 +1,66 @@
+import { StopCircle, Zap } from "lucide-react";
+import { memo, type JSX } from "react";
+import type { InspectorResponse } from "../../../../proxy/schemas";
+import { formatTokens } from "../../../../lib/utils";
+import { Badge } from "../../../ui/badge";
+import { Separator } from "../../../ui/separator";
+import { ResponseContentBlockRenderer } from "./ContentBlocks";
+
+export const StructuredResponseViewAnthropic = memo(function StructuredResponseViewAnthropic({
+  response,
+}: {
+  response: InspectorResponse;
+}): JSX.Element {
+  return (
+    <div className="space-y-3">
+      <div className="flex items-center gap-2 flex-wrap">
+        <Badge variant="secondary" className="text-[10px] px-1.5 py-0 h-5 font-mono">
+          {response.model}
+        </Badge>
+
+        {response.stop_reason !== null && (
+          <Badge
+            variant="outline"
+            className="text-[10px] px-1.5 py-0 h-5 font-mono flex items-center gap-1"
+          >
+            <StopCircle className="size-2.5" />
+            {response.stop_reason}
+          </Badge>
+        )}
+
+        <span className="flex items-center gap-1 text-muted-foreground text-xs">
+          <Zap className="size-3" />
+          <span className="font-mono tabular-nums">
+            {formatTokens(response.usage.input_tokens ?? 0)} in /{" "}
+            {formatTokens(response.usage.output_tokens ?? 0)} out
+          </span>
+          {response.usage.cache_creation_input_tokens !== undefined &&
+            response.usage.cache_creation_input_tokens !== null &&
+            response.usage.cache_creation_input_tokens > 0 && (
+              <span className="font-mono tabular-nums text-emerald-400">
+                Cache +{formatTokens(response.usage.cache_creation_input_tokens)}
+              </span>
+            )}
+          {response.usage.cache_read_input_tokens !== undefined &&
+            response.usage.cache_read_input_tokens !== null &&
+            response.usage.cache_read_input_tokens > 0 && (
+              <span className="font-mono tabular-nums text-purple-400">
+                Cache ~{formatTokens(response.usage.cache_read_input_tokens)}
+              </span>
+            )}
+        </span>
+      </div>
+
+      <Separator className="opacity-50" />
+
+      <div className="space-y-2">
+        {response.content.map((block, i) => (
+          <ResponseContentBlockRenderer key={i} block={block} />
+        ))}
+        {response.content.length === 0 && (
+          <p className="text-xs text-muted-foreground italic">Empty response content</p>
+        )}
+      </div>
+    </div>
+  );
+});

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/index.tsx

@@ -0,0 +1,33 @@
+import type { JSX } from "react";
+import type { InspectorResponse, OpenAIResponse, RequestFormat } from "../../../proxy/schemas";
+import { StructuredResponseViewAnthropic } from "./anthropic/ResponseView";
+import { OpenAIResponseView } from "./openai/ResponseView";
+
+export { StructuredResponseViewAnthropic } from "./anthropic/ResponseView";
+export { OpenAIResponseView } from "./openai/ResponseView";
+export { ResponseContentBlockRenderer } from "./anthropic/ContentBlocks";
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+
+function isOpenAIResponse(response: unknown): response is OpenAIResponse {
+  return isRecord(response) && response.object === "chat.completion";
+}
+
+function isAnthropicResponse(response: unknown): response is InspectorResponse {
+  return isRecord(response) && response.type === "message" && Array.isArray(response.content);
+}
+
+export function formatViewFor(
+  apiFormat: RequestFormat | undefined,
+  response: unknown,
+): JSX.Element | null {
+  if (apiFormat === "openai" && isOpenAIResponse(response)) {
+    return <OpenAIResponseView response={response} />;
+  }
+  if (apiFormat === "anthropic" && isAnthropicResponse(response)) {
+    return <StructuredResponseViewAnthropic response={response} />;
+  }
+  return null;
+}

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

@@ -0,0 +1,170 @@
+import { StopCircle, Terminal, Zap } from "lucide-react";
+import { memo, useState, type JSX } from "react";
+import ReactMarkdown from "react-markdown";
+import type { OpenAIResponse, OpenAIToolCall } from "../../../../proxy/schemas";
+import { formatTokens } from "../../../../lib/utils";
+import { Badge } from "../../../ui/badge";
+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 { ThinkingBlock } from "../anthropic/ContentBlocks";
+import { extractThinkingFromContent } from "../anthropic/thinkingExtract";
+
+// Re-export for use in other components
+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
+ *  back to showing the raw string. */
+function parseToolArguments(raw: string | undefined): unknown {
+  if (raw === undefined || raw === "") return {};
+  try {
+    return JSON.parse(raw);
+  } catch {
+    return null;
+  }
+}
+
+/** One collapsible tool_use row, mirroring the Anthropic ToolUseBlock visual
+ *  treatment (Terminal icon, blue accent, name as a Badge, JSON input in a
+ *  scrollable JsonViewer). */
+function OpenAIToolCallBlock({ call }: { call: OpenAIToolCall }): JSX.Element {
+  const [open, setOpen] = useState(false);
+  const name = call.function.name ?? "(unnamed tool)";
+  const parsed = parseToolArguments(call.function.arguments);
+
+  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>
+          {call.id !== undefined && call.id !== "" && (
+            <span className="text-[10px] font-mono text-muted-foreground/60 truncate">
+              {call.id}
+            </span>
+          )}
+          <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]">
+              {parsed === null ? (
+                // JSON.parse failed — show the raw string so the user can
+                // still see what the model tried to call.
+                <pre className="font-mono text-xs whitespace-pre-wrap break-words text-rose-300/90">
+                  {call.function.arguments}
+                </pre>
+              ) : (
+                <JsonViewer data={safeJsonValue(parsed)} defaultExpandDepth={0} />
+              )}
+            </ScrollArea>
+          </div>
+        </CollapsibleContent>
+      </div>
+    </Collapsible>
+  );
+}
+
+export const OpenAIResponseView = memo(function OpenAIResponseView({
+  response,
+}: {
+  response: OpenAIResponse;
+}): JSX.Element {
+  const choice = response.choices[0];
+  const message = choice?.message;
+  const toolCalls = message?.tool_calls ?? [];
+
+  return (
+    <div className="space-y-3">
+      <div className="flex items-center gap-2 flex-wrap">
+        <Badge variant="secondary" className="text-[10px] px-1.5 py-0 h-5 font-mono">
+          {response.model}
+        </Badge>
+
+        {choice?.finish_reason !== null && choice?.finish_reason !== undefined && (
+          <Badge
+            variant="outline"
+            className="text-[10px] px-1.5 py-0 h-5 font-mono flex items-center gap-1"
+          >
+            <StopCircle className="size-2.5" />
+            {choice.finish_reason}
+          </Badge>
+        )}
+
+        <span className="flex items-center gap-1 text-muted-foreground text-xs">
+          <Zap className="size-3" />
+          <span className="font-mono tabular-nums">
+            {formatTokens(response.usage.prompt_tokens ?? 0)} in /{" "}
+            {formatTokens(response.usage.completion_tokens ?? 0)} out
+          </span>
+        </span>
+      </div>
+
+      <Separator className="opacity-50" />
+
+      <div className="space-y-2">
+        {message?.reasoning_content !== null &&
+          message?.reasoning_content !== undefined &&
+          message.reasoning_content.length > 0 && (
+            <ThinkingBlock thinking={message.reasoning_content} />
+          )}
+        {message?.content !== null &&
+          message?.content !== undefined &&
+          message.content.length > 0 &&
+          (() => {
+            // Extract thinking content from tag-wrapped content if no reasoning_content field
+            const hasReasoningField =
+              message.reasoning_content !== null &&
+              message.reasoning_content !== undefined &&
+              message.reasoning_content.length > 0;
+            const { thinking, remainingText } = extractThinkingFromContent(message.content);
+            return (
+              <div className="space-y-2">
+                {/* Show thinking from tags only if no reasoning_content field */}
+                {thinking !== null && !hasReasoningField && <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>
+                )}
+              </div>
+            );
+          })()}
+        {toolCalls.map((call, i) => (
+          // biome-ignore lint/suspicious/noArrayIndexKey: tool_calls is the positionally stable list from the response
+          <OpenAIToolCallBlock key={call.id ?? `tc-${i}`} call={call} />
+        ))}
+        {message?.function_call !== null && message?.function_call !== undefined && (
+          <div className="border border-blue-500/30 rounded-md p-3 bg-blue-500/5">
+            <div className="text-xs text-blue-400 font-mono mb-1">function_call</div>
+            <div className="font-mono text-xs">
+              <span className="text-blue-300">{message.function_call.name}</span>
+              <span className="text-muted-foreground">({message.function_call.arguments})</span>
+            </div>
+          </div>
+        )}
+        {(message?.content === null ||
+          message?.content === undefined ||
+          message.content.length === 0) &&
+          (message?.reasoning_content === null ||
+            message?.reasoning_content === undefined ||
+            message.reasoning_content.length === 0) &&
+          (message?.function_call === null || message?.function_call === undefined) &&
+          toolCalls.length === 0 && (
+            <p className="text-xs text-muted-foreground italic">Empty response content</p>
+          )}
+      </div>
+    </div>
+  );
+});

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

@@ -0,0 +1,9 @@
+export { ConversationGroup } from "./ConversationGroup";
+export {
+  ConversationHeader,
+  getConversationId,
+  groupLogsByConversation,
+} from "./ConversationHeader";
+export type { ConversationGroupData, ViewMode } from "./ConversationHeader";
+export { LogEntry } from "./LogEntry";
+export { ThreadConnector } from "./ThreadConnector";

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 })),
+);

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

@@ -0,0 +1,194 @@
+import {
+  AnthropicRequestSchema,
+  AnthropicResponseSchema,
+} from "../../../proxy/formats/anthropic/schemas";
+import type { AnatomySegment } from "../anatomy/types";
+import { countCharacters, estimateTokens } from "../anatomy/tokenEstimate";
+import type { LogFormatAdapter } from "./types";
+import { emptyRequestAnalysis, EMPTY_RESPONSE_ANALYSIS } from "./types";
+
+/**
+ * Flatten an Anthropic `content` field to the text used for token
+ * estimation. The function never throws: unknown content shapes are
+ * treated as empty. We deliberately do NOT use JSON.stringify on the
+ * content because base64 image data would dominate the size.
+ */
+function contentToText(content: unknown): string {
+  if (typeof content === "string") return content;
+  if (!Array.isArray(content)) return "";
+  const parts: string[] = [];
+  for (const block of content) {
+    if (block === null || typeof block !== "object") continue;
+    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+    const b = block as Record<string, unknown>;
+    const type = b.type;
+    switch (type) {
+      case "text":
+        if (typeof b.text === "string") parts.push(b.text);
+        break;
+      case "thinking":
+      case "think":
+        if (typeof b.thinking === "string") parts.push(b.thinking);
+        break;
+      case "tool_use": {
+        const name = typeof b.name === "string" ? b.name : "";
+        const input = b.input !== undefined ? JSON.stringify(b.input) : "";
+        parts.push(`${name} ${input}`.trim());
+        break;
+      }
+      case "tool_result": {
+        const inner = b.content;
+        if (typeof inner === "string") {
+          parts.push(inner);
+        } else if (Array.isArray(inner)) {
+          for (const item of inner) {
+            if (item !== null && typeof item === "object") {
+              // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+              const t = (item as Record<string, unknown>).text;
+              if (typeof t === "string") parts.push(t);
+            }
+          }
+        }
+        break;
+      }
+      case "image":
+        // Skip base64 payload but record the image type so the segment is not empty.
+        parts.push("[image]");
+        break;
+    }
+  }
+  return parts.join("\n");
+}
+
+/** Flatten an Anthropic `system` value to its text. The API accepts
+ * either a string or an array of text blocks. */
+function systemToText(system: unknown): string {
+  if (typeof system === "string") return system;
+  if (!Array.isArray(system)) return "";
+  const parts: string[] = [];
+  for (const block of system) {
+    if (block !== null && typeof block === "object") {
+      // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+      const t = (block as { type?: unknown; text?: unknown }).text;
+      // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+      const type = (block as { type?: unknown }).type;
+      if (type === "text" && typeof t === "string") parts.push(t);
+    }
+  }
+  return parts.join("\n");
+}
+
+/** Flatten Anthropic `tools` array to its schema text. */
+function toolsToText(tools: unknown): string {
+  if (!Array.isArray(tools)) return "";
+  const parts: string[] = [];
+  for (const tool of tools) {
+    if (tool === null || typeof tool !== "object") continue;
+    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+    const t = tool as { name?: unknown; description?: unknown; input_schema?: unknown };
+    if (typeof t.name === "string") parts.push(t.name);
+    if (typeof t.description === "string") parts.push(t.description);
+    if (t.input_schema !== undefined) parts.push(JSON.stringify(t.input_schema));
+  }
+  return parts.join("\n");
+}
+
+/** Build one segment from a piece of text + a stable label and path. */
+function segment(
+  role: AnatomySegment["role"],
+  label: string,
+  text: string,
+  path: string,
+): AnatomySegment {
+  return {
+    role,
+    label,
+    text,
+    size: estimateTokens(text),
+    characters: countCharacters(text),
+    path,
+  };
+}
+
+export const anthropicLogFormatAdapter: LogFormatAdapter = {
+  format: "anthropic",
+
+  analyzeRequest(rawBody) {
+    if (rawBody === null) return emptyRequestAnalysis(rawBody);
+    try {
+      const result = AnthropicRequestSchema.safeParse(JSON.parse(rawBody));
+      if (!result.success) return emptyRequestAnalysis(rawBody);
+      return {
+        parsed: result.data,
+        comparisonValue: result.data,
+        messageCount: result.data.messages.length,
+        toolCount:
+          result.data.tools !== undefined && result.data.tools.length > 0
+            ? result.data.tools.length
+            : null,
+      };
+    } catch {
+      return emptyRequestAnalysis(rawBody);
+    }
+  },
+
+  analyzeResponse(responseText) {
+    if (responseText === null) return EMPTY_RESPONSE_ANALYSIS;
+    try {
+      let json: unknown = JSON.parse(responseText);
+      if (typeof json === "string") json = JSON.parse(json);
+      const result = AnthropicResponseSchema.safeParse(json);
+      if (!result.success) return EMPTY_RESPONSE_ANALYSIS;
+      const toolNames = result.data.content
+        .filter((block) => block.type === "tool_use")
+        .map((block) => block.name);
+      return {
+        parsed: result.data,
+        toolNames: toolNames.length > 0 ? toolNames : null,
+      };
+    } catch {
+      return EMPTY_RESPONSE_ANALYSIS;
+    }
+  },
+
+  anatomySegments(parsed) {
+    if (parsed === null || typeof parsed !== "object") return null;
+    // We deliberately skip AnthropicRequestSchema validation here:
+    // real Anthropic requests accept `system` as either a string or
+    // an array, and we want the Anatomy view to render even when the
+    // body shape is slightly off-schema (e.g. system: "string" vs
+    // system: [{type:"text",text:"..."}]).
+    // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+    const body = parsed as {
+      system?: unknown;
+      messages?: unknown;
+      tools?: unknown;
+    };
+    const segments: AnatomySegment[] = [];
+
+    if (body.system !== undefined) {
+      const text = systemToText(body.system);
+      if (text.length > 0) {
+        segments.push(segment("system", "system", text, "/system"));
+      }
+    }
+
+    if (Array.isArray(body.messages)) {
+      body.messages.forEach((message, index) => {
+        if (message === null || typeof message !== "object") return;
+        // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+        const m = message as { role?: unknown; content?: unknown };
+        const role = m.role === "user" || m.role === "assistant" ? m.role : "user";
+        const text = contentToText(m.content);
+        segments.push(segment(role, `[${index}] ${role}`, text, `/messages/${index}`));
+      });
+    }
+
+    if (Array.isArray(body.tools) && body.tools.length > 0) {
+      const text = toolsToText(body.tools);
+      segments.push(segment("tools", "tools", text, "/tools"));
+    }
+
+    return segments.length > 0 ? segments : null;
+  },
+};

package/src/components/proxy-viewer/log-formats/index.ts

@@ -0,0 +1,23 @@
+import { requestFormatForPath } from "../../../proxy/formats";
+import type { CapturedLog, RequestFormat } from "../../../proxy/schemas";
+import { anthropicLogFormatAdapter } from "./anthropic";
+import { openAILogFormatAdapter } from "./openai";
+import type { LogFormatAdapter } from "./types";
+import { unknownLogFormatAdapter } from "./unknown";
+
+const ADAPTERS: Record<RequestFormat, LogFormatAdapter> = {
+  anthropic: anthropicLogFormatAdapter,
+  openai: openAILogFormatAdapter,
+  unknown: unknownLogFormatAdapter,
+};
+
+export function getLogFormatAdapter(format: RequestFormat): LogFormatAdapter {
+  return ADAPTERS[format];
+}
+
+export function resolveLogFormat(log: Pick<CapturedLog, "path" | "apiFormat">): RequestFormat {
+  const pathFormat = requestFormatForPath(log.path);
+  return pathFormat === "unknown" ? log.apiFormat : pathFormat;
+}
+
+export type { LogFormatAdapter, RequestAnalysis, ResponseAnalysis } from "./types";