@tonyclaw/llm-inspector 1.6.0

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

@@ -0,0 +1,161 @@
+import { AlertTriangle, Zap } from "lucide-react";
+import type { JSX } from "react";
+import ReactMarkdown from "react-markdown";
+import { cn, formatTokens, getStatusCategory, type StatusCategory } from "../../lib/utils";
+import {
+  type InspectorResponse,
+  type OpenAIResponse,
+  InspectorResponseSchema,
+  parseOpenAIResponse,
+} from "../../proxy/schemas";
+import { formatViewFor } from "./formats";
+
+export type ResponseViewProps = {
+  responseText: string | null;
+  responseStatus: number | null;
+  streaming: boolean;
+  inputTokens: number | null;
+  outputTokens: number | null;
+  cacheCreationInputTokens?: number | null;
+  cacheReadInputTokens?: number | null;
+  apiFormat?: "anthropic" | "openai" | "unknown";
+};
+
+function getStatusClasses(category: StatusCategory): string {
+  switch (category) {
+    case "success":
+      return "text-emerald-400";
+    case "client_error":
+      return "text-amber-400";
+    case "server_error":
+      return "text-red-400";
+    case "pending":
+      return "text-muted-foreground";
+  }
+}
+
+function parseResponse(
+  text: string,
+  apiFormat: "anthropic" | "openai" | "unknown" | undefined,
+): InspectorResponse | OpenAIResponse | null {
+  try {
+    const json: unknown = JSON.parse(text);
+    if (apiFormat === "openai") {
+      const result = parseOpenAIResponse(text);
+      if (result) return result;
+    }
+    const result = InspectorResponseSchema.safeParse(json);
+    if (result.success) return result.data;
+    return null;
+  } catch {
+    return null;
+  }
+}
+
+function StatusIndicator({ status }: { status: number | null }): JSX.Element {
+  const category = getStatusCategory(status);
+  const classes = getStatusClasses(category);
+
+  if (status === null) {
+    return <span className="text-xs text-muted-foreground italic">pending</span>;
+  }
+
+  return (
+    <span className={cn("flex items-center gap-1 text-xs font-mono font-semibold", classes)}>
+      {category === "server_error" && <AlertTriangle className="size-3" />}
+      {status}
+    </span>
+  );
+}
+
+function ErrorResponseView({ text }: { text: string }): JSX.Element {
+  return (
+    <div className="rounded-md border border-red-500/30 bg-red-500/5 p-3">
+      <pre className="text-xs text-red-300 whitespace-pre-wrap font-mono leading-relaxed overflow-auto max-h-[60vh]">
+        {text}
+      </pre>
+    </div>
+  );
+}
+
+function MarkdownFallbackView({ text }: { text: string }): JSX.Element {
+  return (
+    <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>
+  );
+}
+
+export function ResponseView({
+  responseText,
+  responseStatus,
+  streaming,
+  inputTokens,
+  outputTokens,
+  cacheCreationInputTokens,
+  cacheReadInputTokens,
+  apiFormat,
+}: ResponseViewProps): JSX.Element {
+  if (responseText === null) {
+    return (
+      <div className="flex items-center gap-2 py-3">
+        <StatusIndicator status={responseStatus} />
+        <span className="text-xs text-muted-foreground italic">No response</span>
+      </div>
+    );
+  }
+
+  const isError = responseStatus !== null && responseStatus >= 400;
+
+  if (isError) {
+    return (
+      <div className="space-y-2">
+        <StatusIndicator status={responseStatus} />
+        <ErrorResponseView text={responseText} />
+      </div>
+    );
+  }
+
+  const parsed = parseResponse(responseText, apiFormat);
+
+  if (parsed !== null) {
+    return (
+      <div className="space-y-2">
+        <StatusIndicator status={responseStatus} />
+        {formatViewFor(apiFormat, parsed)}
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-2">
+      <div className="flex items-center gap-2">
+        <StatusIndicator status={responseStatus} />
+        {streaming && (inputTokens !== null || outputTokens !== null) && (
+          <span className="flex items-center gap-1 text-muted-foreground text-xs">
+            <Zap className="size-3" />
+            <span className="font-mono tabular-nums">
+              {inputTokens !== null ? formatTokens(inputTokens) : "—"} in /{" "}
+              {outputTokens !== null ? formatTokens(outputTokens) : "—"} out
+            </span>
+            {cacheCreationInputTokens !== null &&
+              cacheCreationInputTokens !== undefined &&
+              cacheCreationInputTokens > 0 && (
+                <span className="font-mono tabular-nums text-emerald-400">
+                  Cache +{formatTokens(cacheCreationInputTokens)}
+                </span>
+              )}
+            {cacheReadInputTokens !== null &&
+              cacheReadInputTokens !== undefined &&
+              cacheReadInputTokens > 0 && (
+                <span className="font-mono tabular-nums text-purple-400">
+                  Cache ~{formatTokens(cacheReadInputTokens)}
+                </span>
+              )}
+          </span>
+        )}
+      </div>
+      <MarkdownFallbackView text={responseText} />
+    </div>
+  );
+}

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

@@ -0,0 +1,171 @@
+import { useState, useEffect, useMemo, type JSX } from "react";
+import { ChevronDown, ChevronRight, Loader2 } from "lucide-react";
+import { Badge } from "../ui/badge";
+import { JsonViewer } from "../ui/json-viewer";
+import type { StreamingChunk } from "../../proxy/schemas";
+
+export type StreamingChunkSequenceProps = {
+  logId: number;
+  truncated?: boolean;
+};
+
+type ChunkState =
+  | { status: "idle" }
+  | { status: "loading" }
+  | { status: "success"; chunks: StreamingChunk[] }
+  | { status: "error"; message: string };
+
+type ChunkGroup = {
+  index: number;
+  chunks: StreamingChunk[];
+};
+
+export function StreamingChunkSequence({
+  logId,
+  truncated,
+}: StreamingChunkSequenceProps): JSX.Element {
+  const [containerExpanded, setContainerExpanded] = useState(false);
+  const [chunkState, setChunkState] = useState<ChunkState>({ status: "idle" });
+  const [expandedIndices, setExpandedIndices] = useState<Set<number>>(new Set());
+
+  useEffect(() => {
+    if (!containerExpanded || chunkState.status !== "idle") return;
+
+    setChunkState({ status: "loading" });
+
+    fetch(`/api/logs/${logId}/chunks`)
+      .then((res) => {
+        if (!res.ok) {
+          return Promise.reject(new Error("Chunks not found"));
+        }
+        return res.json();
+      })
+      .then((data: { chunks: StreamingChunk[]; truncated?: boolean }) => {
+        setChunkState({ status: "success", chunks: data.chunks });
+      })
+      .catch(() => {
+        setChunkState({ status: "error", message: "Chunk data unavailable" });
+      });
+  }, [containerExpanded, logId, chunkState.status]);
+
+  const groups = useMemo<ChunkGroup[]>(() => {
+    if (chunkState.status !== "success") return [];
+
+    const map = new Map<number, StreamingChunk[]>();
+    for (const chunk of chunkState.chunks) {
+      const existing = map.get(chunk.index);
+      if (existing) {
+        existing.push(chunk);
+      } else {
+        map.set(chunk.index, [chunk]);
+      }
+    }
+
+    return Array.from(map.entries())
+      .map(([index, chunks]) => ({ index, chunks }))
+      .sort((a, b) => a.index - b.index);
+  }, [chunkState]);
+
+  const toggleIndex = (index: number) => {
+    setExpandedIndices((prev) => {
+      const next = new Set(prev);
+      if (next.has(index)) {
+        next.delete(index);
+      } else {
+        next.add(index);
+      }
+      return next;
+    });
+  };
+
+  function renderBody(): JSX.Element {
+    if (chunkState.status === "idle" || chunkState.status === "loading") {
+      return (
+        <div className="flex items-center gap-2 py-2 text-xs text-muted-foreground">
+          <Loader2 className="size-3 animate-spin" />
+          <span>Loading chunks...</span>
+        </div>
+      );
+    }
+
+    if (chunkState.status === "error") {
+      return <div className="py-2 text-xs text-muted-foreground italic">{chunkState.message}</div>;
+    }
+
+    return (
+      <div className="p-2 space-y-1">
+        <div className="text-[10px] text-muted-foreground font-mono mb-2">
+          {groups.length} index group{groups.length !== 1 ? "s" : ""} available
+        </div>
+        {groups.map((group) => {
+          const isExpanded = expandedIndices.has(group.index);
+          return (
+            <div key={group.index} className="rounded border border-border bg-background">
+              <button
+                type="button"
+                className="flex items-center gap-2 w-full px-2 py-1.5 text-left hover:bg-muted/50 transition-colors cursor-pointer"
+                onClick={() => toggleIndex(group.index)}
+              >
+                {isExpanded ? (
+                  <ChevronDown className="size-3 text-muted-foreground" />
+                ) : (
+                  <ChevronRight className="size-3 text-muted-foreground" />
+                )}
+                <span className="text-[10px] text-muted-foreground font-mono">
+                  [{group.index}] {group.chunks[0]?.type ?? ""}
+                </span>
+                <span className="text-[10px] text-muted-foreground font-mono">
+                  {group.chunks.length} chunk{group.chunks.length !== 1 ? "s" : ""}
+                </span>
+              </button>
+              {isExpanded && (
+                <div className="px-2 pb-2 space-y-1">
+                  {group.chunks.map((chunk) => (
+                    <div key={chunk.index} className="rounded border border-border bg-muted/20 p-2">
+                      <div className="flex items-center gap-2 mb-1">
+                        <span className="text-[10px] text-muted-foreground font-mono">
+                          +{chunk.timestamp}ms
+                        </span>
+                        <span className="text-[10px] text-muted-foreground font-mono">
+                          {chunk.type}
+                        </span>
+                      </div>
+                      <JsonViewer data={chunk} defaultExpandDepth={1} showCopy />
+                    </div>
+                  ))}
+                </div>
+              )}
+            </div>
+          );
+        })}
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-1">
+      <button
+        type="button"
+        className="flex items-center gap-1.5 text-xs text-muted-foreground hover:text-foreground transition-colors cursor-pointer"
+        onClick={() => setContainerExpanded((v) => !v)}
+      >
+        {containerExpanded ? (
+          <ChevronDown className="size-3" />
+        ) : (
+          <ChevronRight className="size-3" />
+        )}
+        <span>Raw SSE Events</span>
+        <Badge variant="outline" className="text-[9px] px-1 py-0 h-4 font-mono ml-1">
+          {logId}
+          {truncated === true ? "+" : ""}
+        </Badge>
+      </button>
+
+      {containerExpanded === true ? (
+        <div className="rounded-md border border-border bg-muted/20 overflow-auto max-h-64">
+          {renderBody()}
+        </div>
+      ) : null}
+    </div>
+  );
+}

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

@@ -0,0 +1,139 @@
+import { Brain, ChevronDown, ChevronRight, Terminal } from "lucide-react";
+import { type JSX, 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, safeJsonValue } from "../../../ui/json-viewer";
+import { ScrollArea } from "../../../ui/scroll-area";
+
+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 function TextBlock({ text }: { text: string }): JSX.Element {
+  if (text.includes("<system-reminder>")) {
+    return <SystemReminderBlock text={text} />;
+  }
+
+  return (
+    <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>
+  );
+}
+
+export 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 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={2} />
+            </ScrollArea>
+          </div>
+        </CollapsibleContent>
+      </div>
+    </Collapsible>
+  );
+}
+
+export function ResponseContentBlockRenderer({
+  block,
+}: {
+  block: ResponseContentBlockType;
+}): JSX.Element {
+  switch (block.type) {
+    case "text":
+      return <TextBlock text={block.text} />;
+    case "thinking":
+      return <ThinkingBlock thinking={block.thinking} />;
+    case "tool_use":
+      return <ToolUseBlock name={block.name} input={block.input} />;
+    default:
+      return assertNever(block);
+  }
+}

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

@@ -0,0 +1,64 @@
+import { StopCircle, Zap } from "lucide-react";
+import 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 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)} in /{" "}
+            {formatTokens(response.usage.output_tokens)} out
+          </span>
+          {response.usage.cache_creation_input_tokens !== undefined &&
+            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 > 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/index.tsx

@@ -0,0 +1,24 @@
+import type { JSX } from "react";
+import type { InspectorResponse, OpenAIResponse } 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 isOpenAIResponse(resp: unknown): resp is OpenAIResponse {
+  if (typeof resp !== "object" || resp === null) return false;
+  const desc = Object.getOwnPropertyDescriptor(resp, "object");
+  return desc?.value === "chat.completion";
+}
+
+export function formatViewFor(
+  apiFormat: "anthropic" | "openai" | "unknown" | undefined,
+  response: InspectorResponse | OpenAIResponse,
+): JSX.Element {
+  if (isOpenAIResponse(response)) {
+    return <OpenAIResponseView response={response} />;
+  }
+  return <StructuredResponseViewAnthropic response={response} />;
+}

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

@@ -0,0 +1,80 @@
+import { StopCircle, Zap } from "lucide-react";
+import type { JSX } from "react";
+import ReactMarkdown from "react-markdown";
+import type { OpenAIResponse } from "../../../../proxy/schemas";
+import { formatTokens } from "../../../../lib/utils";
+import { Badge } from "../../../ui/badge";
+import { Separator } from "../../../ui/separator";
+
+export function OpenAIResponseView({ response }: { response: OpenAIResponse }): JSX.Element {
+  const choice = response.choices[0];
+  const message = choice?.message;
+
+  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)} in /{" "}
+            {formatTokens(response.usage.completion_tokens)} 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 && (
+            <div className="border border-purple-500/30 rounded-md p-3 bg-purple-500/5">
+              <div className="text-xs text-purple-400 font-mono mb-1">thinking</div>
+              <div className="text-sm text-purple-200 whitespace-pre-wrap">
+                {message.reasoning_content}
+              </div>
+            </div>
+          )}
+        {message?.content !== null &&
+          message?.content !== undefined &&
+          message.content.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>{message.content}</ReactMarkdown>
+            </div>
+          )}
+        {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) && (
+            <p className="text-xs text-muted-foreground italic">Empty response content</p>
+          )}
+      </div>
+    </div>
+  );
+}

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

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