@tonyclaw/llm-inspector 1.6.0

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

@@ -0,0 +1,225 @@
+import { Check, Copy, RotateCcw } from "lucide-react";
+import type { JSX } from "react";
+import { useMemo, useState } from "react";
+import { cn } from "../../lib/utils";
+import { type CapturedLog, parseRequest } from "../../proxy/schemas";
+import { Button } from "../ui/button";
+import { JsonViewerFromString } from "../ui/json-viewer";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "../ui/tabs";
+import { LogEntryHeader } from "./LogEntryHeader";
+import { ReplayDialog } from "./ReplayDialog";
+import { ResponseView } from "./ResponseView";
+import { StreamingChunkSequence } from "./StreamingChunkSequence";
+
+export type LogEntryProps = {
+  log: CapturedLog;
+  viewMode?: "simple" | "full";
+};
+
+function CopyButton({
+  text,
+  label,
+  copied,
+  onCopy,
+}: {
+  text: string | null;
+  label: string;
+  copied: boolean;
+  onCopy: (e: React.MouseEvent) => void;
+}): JSX.Element | null {
+  if (text === null) return null;
+  return (
+    <button
+      type="button"
+      onClick={onCopy}
+      className="flex items-center gap-1.5 text-xs text-muted-foreground hover:text-foreground transition-colors px-2 py-1 rounded hover:bg-muted"
+    >
+      {copied ? (
+        <>
+          <Check className="size-3 text-green-500" />
+          <span className="text-green-500">Copied!</span>
+        </>
+      ) : (
+        <>
+          <Copy className="size-3" />
+          <span>{label}</span>
+        </>
+      )}
+    </button>
+  );
+}
+
+export function LogEntry({ log, viewMode = "simple" }: LogEntryProps): JSX.Element {
+  const [expanded, setExpanded] = useState<boolean>(false);
+  const [requestCopied, setRequestCopied] = useState<boolean>(false);
+  const [responseCopied, setResponseCopied] = useState<boolean>(false);
+  const [replayOpen, setReplayOpen] = useState<boolean>(false);
+  const parsedRequest = useMemo(() => parseRequest(log.rawRequestBody), [log.rawRequestBody]);
+
+  function handleCopyRequest(e: React.MouseEvent): void {
+    e.stopPropagation();
+    if (log.rawRequestBody === null) return;
+    void window.navigator.clipboard.writeText(log.rawRequestBody).then(() => {
+      setRequestCopied(true);
+      setTimeout(() => setRequestCopied(false), 2000);
+    });
+  }
+
+  function handleCopyResponse(e: React.MouseEvent): void {
+    e.stopPropagation();
+    if (log.responseText === null) return;
+    void window.navigator.clipboard.writeText(log.responseText).then(() => {
+      setResponseCopied(true);
+      setTimeout(() => setResponseCopied(false), 2000);
+    });
+  }
+
+  return (
+    <>
+      <div className={cn("border border-border rounded-lg mb-3 overflow-hidden")}>
+        <LogEntryHeader
+          log={log}
+          parsedRequest={parsedRequest}
+          expanded={expanded}
+          onToggle={() => setExpanded(!expanded)}
+        />
+
+        {expanded && (
+          <div onClick={(e) => e.stopPropagation()} onKeyDown={(e) => e.stopPropagation()}>
+            <Tabs defaultValue="request">
+              <TabsList className="mx-4 mt-2">
+                {viewMode === "full" && <TabsTrigger value="raw-headers">Raw Headers</TabsTrigger>}
+                {viewMode === "full" && <TabsTrigger value="headers">Headers</TabsTrigger>}
+                <TabsTrigger value="request">Request</TabsTrigger>
+                {viewMode === "full" && <TabsTrigger value="raw">Raw Response</TabsTrigger>}
+                <TabsTrigger value="parsed">Parsed Response</TabsTrigger>
+              </TabsList>
+
+              <TabsContent value="request">
+                <div className="px-4 py-3">
+                  <div className="flex justify-end gap-2 mb-2">
+                    <Button
+                      variant="outline"
+                      size="sm"
+                      className="h-7 text-xs"
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        setReplayOpen(true);
+                      }}
+                    >
+                      <RotateCcw className="size-3 mr-1" />
+                      Replay
+                    </Button>
+                    <CopyButton
+                      text={log.rawRequestBody}
+                      label="Copy Request"
+                      copied={requestCopied}
+                      onCopy={handleCopyRequest}
+                    />
+                  </div>
+                  {log.rawRequestBody !== null ? (
+                    <JsonViewerFromString text={log.rawRequestBody} defaultExpandDepth={1} />
+                  ) : (
+                    <p className="text-xs text-muted-foreground italic">No request body</p>
+                  )}
+                </div>
+              </TabsContent>
+
+              {viewMode === "full" && (
+                <TabsContent value="headers">
+                  <div className="px-4 py-3">
+                    {log.headers && Object.keys(log.headers).length > 0 ? (
+                      <div className="space-y-1 font-mono text-xs">
+                        {Object.entries(log.headers)
+                          .sort(([a], [b]) => a.localeCompare(b))
+                          .map(([key, value]) => (
+                            <div key={key} className="flex gap-2">
+                              <span className="text-blue-600 dark:text-blue-400 font-semibold shrink-0">
+                                {key}:
+                              </span>
+                              <span className="text-muted-foreground truncate" title={value}>
+                                {value}
+                              </span>
+                            </div>
+                          ))}
+                      </div>
+                    ) : (
+                      <p className="text-xs text-muted-foreground italic">No headers captured</p>
+                    )}
+                  </div>
+                </TabsContent>
+              )}
+
+              {viewMode === "full" && (
+                <TabsContent value="raw-headers">
+                  <div className="px-4 py-3">
+                    {log.rawHeaders && Object.keys(log.rawHeaders).length > 0 ? (
+                      <div className="space-y-1 font-mono text-xs">
+                        {Object.entries(log.rawHeaders)
+                          .sort(([a], [b]) => a.localeCompare(b))
+                          .map(([key, value]) => (
+                            <div key={key} className="flex gap-2">
+                              <span className="text-blue-600 dark:text-blue-400 font-semibold shrink-0">
+                                {key}:
+                              </span>
+                              <span className="text-muted-foreground truncate" title={value}>
+                                {value}
+                              </span>
+                            </div>
+                          ))}
+                      </div>
+                    ) : (
+                      <p className="text-xs text-muted-foreground italic">
+                        No raw headers captured
+                      </p>
+                    )}
+                  </div>
+                </TabsContent>
+              )}
+
+              <TabsContent value="raw">
+                <div className="px-4 py-3 space-y-3">
+                  <div className="flex justify-end">
+                    <CopyButton
+                      text={log.responseText}
+                      label="Copy Response"
+                      copied={responseCopied}
+                      onCopy={handleCopyResponse}
+                    />
+                  </div>
+                  {log.responseText !== null ? (
+                    <JsonViewerFromString text={log.responseText} defaultExpandDepth={1} />
+                  ) : (
+                    <p className="text-xs text-muted-foreground italic">No response</p>
+                  )}
+                  {log.streaming === true && (
+                    <StreamingChunkSequence
+                      logId={log.id}
+                      truncated={log.streamingChunksPath !== null}
+                    />
+                  )}
+                </div>
+              </TabsContent>
+
+              <TabsContent value="parsed">
+                <div className="px-4 py-3">
+                  <ResponseView
+                    responseText={log.responseText}
+                    responseStatus={log.responseStatus}
+                    streaming={log.streaming}
+                    inputTokens={log.inputTokens}
+                    outputTokens={log.outputTokens}
+                    cacheCreationInputTokens={log.cacheCreationInputTokens}
+                    cacheReadInputTokens={log.cacheReadInputTokens}
+                    apiFormat={log.apiFormat}
+                  />
+                </div>
+              </TabsContent>
+            </Tabs>
+          </div>
+        )}
+      </div>
+      <ReplayDialog log={log} open={replayOpen} onOpenChange={setReplayOpen} />
+    </>
+  );
+}

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

@@ -0,0 +1,250 @@
+import {
+  ChevronDown,
+  ChevronRight,
+  Clock,
+  FileTerminal,
+  Globe,
+  Loader2,
+  MessageSquare,
+  Radio,
+  User,
+  Wrench,
+  Zap,
+} from "lucide-react";
+import type { JSX } from "react";
+import { cn, formatTokens, getStatusCategory, type StatusCategory } from "../../lib/utils";
+import type { CapturedLog, InspectorRequest } from "../../proxy/schemas";
+import { Badge } from "../ui/badge";
+import { ProviderLogo, detectProvider } from "../providers/ProviderLogo";
+
+const API_FORMAT_LABELS: Record<"anthropic" | "openai" | "unknown", string> = {
+  anthropic: "Anthropic",
+  openai: "OpenAI",
+  unknown: "Unknown",
+};
+
+function formatElapsed(ms: number): string {
+  if (ms < 1000) return `${ms}ms`;
+  return `${(ms / 1000).toFixed(1)}s`;
+}
+
+const STATUS_BADGE_CLASSES: Record<StatusCategory, string> = {
+  success: "bg-emerald-500/15 text-emerald-400 border-emerald-500/25",
+  client_error: "bg-amber-500/15 text-amber-400 border-amber-500/25",
+  server_error: "",
+  pending: "bg-muted text-muted-foreground border-border",
+};
+
+export type LogEntryHeaderProps = {
+  log: CapturedLog;
+  parsedRequest: InspectorRequest | null;
+  expanded: boolean;
+  onToggle: () => void;
+};
+
+export function LogEntryHeader({
+  log,
+  parsedRequest,
+  expanded,
+  onToggle,
+}: LogEntryHeaderProps): JSX.Element {
+  const statusCategory = getStatusCategory(log.responseStatus);
+
+  const hasTokens = log.inputTokens !== null || log.outputTokens !== null;
+
+  const messageCount = parsedRequest !== null ? parsedRequest.messages.length : null;
+
+  const toolCount =
+    parsedRequest !== null && parsedRequest.tools !== undefined && parsedRequest.tools.length > 0
+      ? parsedRequest.tools.length
+      : null;
+
+  return (
+    <div
+      role="button"
+      tabIndex={0}
+      className={cn(
+        "flex items-center gap-2.5 px-3 py-2 cursor-pointer transition-colors",
+        "hover:bg-muted/50",
+        "select-none",
+      )}
+      onClick={onToggle}
+      onKeyDown={(e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          onToggle();
+        }
+      }}
+    >
+      {/* Request ID */}
+      <span className="text-blue-400/80 font-mono text-xs font-semibold tabular-nums shrink-0">
+        #{log.id}
+      </span>
+
+      {/* Model */}
+      {log.model !== null && (
+        <>
+          <ProviderLogo provider={detectProvider(log.model)} className="size-4 shrink-0" />
+          <Badge variant="secondary" className="text-[10px] px-1.5 py-0 h-5 font-mono">
+            {log.model}
+          </Badge>
+        </>
+      )}
+
+      {/* API Format Badge */}
+      <Badge
+        variant="outline"
+        className={cn(
+          "text-[10px] px-1.5 py-0 h-5 font-mono",
+          log.apiFormat === "openai" && "border-blue-500/40 text-blue-400",
+          log.apiFormat === "anthropic" && "border-orange-500/40 text-orange-400",
+          log.apiFormat === "unknown" && "border-muted text-muted-foreground",
+        )}
+      >
+        {API_FORMAT_LABELS[log.apiFormat] ?? log.apiFormat}
+      </Badge>
+
+      {/* Response Status */}
+      {statusCategory === "server_error" ? (
+        <Badge variant="destructive" className="text-[10px] px-1.5 py-0 h-5 font-mono tabular-nums">
+          {log.responseStatus}
+        </Badge>
+      ) : statusCategory === "pending" ? (
+        <Badge
+          variant="outline"
+          className={cn(
+            "text-[10px] px-1.5 py-0 h-5 font-mono tabular-nums",
+            STATUS_BADGE_CLASSES[statusCategory],
+          )}
+        >
+          <Loader2 className="size-3 animate-spin" />
+        </Badge>
+      ) : (
+        <Badge
+          variant="outline"
+          className={cn(
+            "text-[10px] px-1.5 py-0 h-5 font-mono tabular-nums",
+            STATUS_BADGE_CLASSES[statusCategory],
+          )}
+        >
+          {log.responseStatus}
+        </Badge>
+      )}
+
+      {/* Elapsed time */}
+      {log.elapsedMs !== null && (
+        <span className="flex items-center gap-1 text-muted-foreground text-xs shrink-0">
+          <Clock className="size-3" />
+          <span className="font-mono tabular-nums">{formatElapsed(log.elapsedMs)}</span>
+        </span>
+      )}
+
+      {/* Token counts */}
+      {hasTokens && (
+        <span className="flex items-center gap-1 text-xs shrink-0">
+          <Zap className="size-3 text-muted-foreground" />
+          <span className="font-mono tabular-nums">
+            <span className={log.inputTokens !== null ? "text-blue-400" : "text-muted-foreground"}>
+              IN {log.inputTokens !== null ? formatTokens(log.inputTokens) : "—"}
+            </span>
+            {" / "}
+            <span
+              className={log.outputTokens !== null ? "text-amber-400" : "text-muted-foreground"}
+            >
+              OUT {log.outputTokens !== null ? formatTokens(log.outputTokens) : "—"}
+            </span>
+          </span>
+        </span>
+      )}
+      {/* Cache tokens */}
+      {log.cacheCreationInputTokens !== null && log.cacheCreationInputTokens > 0 && (
+        <span className="flex items-center gap-1 text-xs shrink-0">
+          <span className="font-mono tabular-nums text-emerald-400">
+            Cache +{formatTokens(log.cacheCreationInputTokens)}
+          </span>
+        </span>
+      )}
+      {log.cacheReadInputTokens !== null && log.cacheReadInputTokens > 0 && (
+        <span className="flex items-center gap-1 text-xs shrink-0">
+          <span className="font-mono tabular-nums text-purple-400">
+            Cache ~{formatTokens(log.cacheReadInputTokens)}
+          </span>
+        </span>
+      )}
+
+      {/* Message count */}
+      {messageCount !== null && (
+        <span className="flex items-center gap-1 text-muted-foreground text-xs shrink-0">
+          <MessageSquare className="size-3" />
+          <span className="font-mono tabular-nums">{messageCount}</span>
+        </span>
+      )}
+
+      {/* Tool count */}
+      {toolCount !== null && (
+        <span className="flex items-center gap-1 text-muted-foreground text-xs shrink-0">
+          <Wrench className="size-3" />
+          <span className="font-mono tabular-nums">{toolCount}</span>
+        </span>
+      )}
+
+      {/* Origin */}
+      {log.origin !== null && (
+        <span
+          className="flex items-center gap-1 text-muted-foreground text-xs shrink-0"
+          title={`Origin: ${log.origin}`}
+        >
+          <Globe className="size-3" />
+          <span className="font-mono tabular-nums truncate max-w-[120px]" title={log.origin}>
+            {log.origin}
+          </span>
+        </span>
+      )}
+
+      {/* User-Agent */}
+      {log.userAgent !== null && (
+        <span
+          className="flex items-center gap-1 text-muted-foreground text-xs shrink-0"
+          title={`User-Agent: ${log.userAgent}`}
+        >
+          <User className="size-3" />
+          <span className="font-mono tabular-nums truncate max-w-[150px]" title={log.userAgent}>
+            {log.userAgent}
+          </span>
+        </span>
+      )}
+
+      {/* Client info (PID + project folder) */}
+      {(log.clientPid !== null || log.clientProjectFolder !== null) && (
+        <span
+          className="flex items-center gap-1 text-purple-400/80 text-xs shrink-0"
+          title={
+            log.clientCwd !== null
+              ? `PID: ${log.clientPid ?? "?"} | CWD: ${log.clientCwd}`
+              : `PID: ${log.clientPid ?? "?"}`
+          }
+        >
+          <FileTerminal className="size-3" />
+          {log.clientProjectFolder !== null ? (
+            <span className="font-mono tabular-nums">{log.clientProjectFolder}</span>
+          ) : (
+            <span className="font-mono tabular-nums">PID {log.clientPid}</span>
+          )}
+        </span>
+      )}
+
+      {/* Streaming indicator */}
+      {log.streaming && <Radio className="size-3 text-muted-foreground/60 shrink-0" />}
+
+      {/* Spacer */}
+      <span className="flex-1 min-w-0" />
+
+      {/* Expand chevron */}
+      {expanded ? (
+        <ChevronDown className="size-4 text-muted-foreground shrink-0" />
+      ) : (
+        <ChevronRight className="size-4 text-muted-foreground shrink-0" />
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,208 @@
+import { RotateCcw } from "lucide-react";
+import type { JSX } from "react";
+import { useState } from "react";
+import { z } from "zod";
+import { Button } from "../ui/button";
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "../ui/dialog";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "../ui/tabs";
+import { ResponseView } from "./ResponseView";
+import type { CapturedLog } from "../../proxy/schemas";
+
+const ReplayResultSchema = z.object({
+  success: z.boolean(),
+  error: z.string().optional(),
+  responseStatus: z.number().optional(),
+  responseText: z.string().optional(),
+  inputTokens: z.number().optional(),
+  outputTokens: z.number().optional(),
+  elapsedMs: z.number().optional(),
+  streaming: z.boolean().optional(),
+});
+
+type ReplayResult = z.infer<typeof ReplayResultSchema>;
+
+type ReplayDialogProps = {
+  log: CapturedLog;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+};
+
+export function ReplayDialog({ log, open, onOpenChange }: ReplayDialogProps): JSX.Element {
+  const [modifiedBody, setModifiedBody] = useState<string>(() => {
+    return log.rawRequestBody ?? "{}";
+  });
+  const [replayResult, setReplayResult] = useState<ReplayResult | null>(null);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  async function handleReplay() {
+    setLoading(true);
+    setError(null);
+    setReplayResult(null);
+
+    try {
+      const res = await fetch(`/api/logs/${log.id}/replay`, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ modifiedBody }),
+      });
+
+      const json: unknown = await res.json();
+      const parsed = ReplayResultSchema.safeParse(json);
+      if (!parsed.success) {
+        setError("Invalid response from server");
+        setLoading(false);
+        return;
+      }
+      const data = parsed.data;
+      setReplayResult(data);
+      if (!data.success) {
+        setError(data.error ?? "Replay failed");
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Network error");
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  function handleClose() {
+    setReplayResult(null);
+    setError(null);
+    onOpenChange(false);
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={handleClose}>
+      <DialogContent className="max-w-4xl max-h-[85vh] overflow-auto">
+        <DialogHeader>
+          <DialogTitle className="flex items-center gap-2">
+            <RotateCcw className="size-4" />
+            Replay Request #{log.id}
+          </DialogTitle>
+        </DialogHeader>
+
+        <Tabs defaultValue="modified">
+          <TabsList>
+            <TabsTrigger value="modified">Modified Request</TabsTrigger>
+            <TabsTrigger value="original">Original Response</TabsTrigger>
+            {replayResult && <TabsTrigger value="replay">Replay Response</TabsTrigger>}
+          </TabsList>
+
+          <TabsContent value="modified" className="space-y-4">
+            <div>
+              <label className="text-sm font-medium mb-2 block">Request Body (JSON)</label>
+              <textarea
+                className="w-full h-64 p-3 font-mono text-xs bg-muted rounded-md border border-input resize-none focus:outline-none focus:ring-2 focus:ring-ring"
+                value={modifiedBody}
+                onChange={(e) => setModifiedBody(e.target.value)}
+                spellCheck={false}
+              />
+            </div>
+
+            {error !== null && error !== "" && (
+              <div className="text-sm text-destructive bg-destructive/10 px-3 py-2 rounded-md">
+                {error}
+              </div>
+            )}
+
+            <div className="flex justify-end">
+              <Button
+                onClick={() => {
+                  void handleReplay();
+                }}
+                disabled={loading}
+              >
+                {loading ? "Replaying..." : "Replay"}
+              </Button>
+            </div>
+
+            {replayResult && replayResult.success && (
+              <Tabs defaultValue="parsed">
+                <TabsList>
+                  <TabsTrigger value="parsed">Parsed Response</TabsTrigger>
+                  <TabsTrigger value="raw">Raw Response</TabsTrigger>
+                </TabsList>
+                <TabsContent value="parsed">
+                  <ResponseView
+                    responseText={replayResult.responseText ?? null}
+                    responseStatus={replayResult.responseStatus ?? null}
+                    streaming={replayResult.streaming ?? false}
+                    inputTokens={replayResult.inputTokens ?? null}
+                    outputTokens={replayResult.outputTokens ?? null}
+                    apiFormat={log.apiFormat}
+                  />
+                </TabsContent>
+                <TabsContent value="raw">
+                  <pre className="font-mono text-xs whitespace-pre-wrap bg-muted p-3 rounded-md max-h-96 overflow-auto">
+                    {replayResult.responseText ?? "No response"}
+                  </pre>
+                </TabsContent>
+              </Tabs>
+            )}
+          </TabsContent>
+
+          <TabsContent value="original">
+            {log.responseText !== null ? (
+              <Tabs defaultValue="parsed">
+                <TabsList>
+                  <TabsTrigger value="parsed">Parsed Response</TabsTrigger>
+                  <TabsTrigger value="raw">Raw Response</TabsTrigger>
+                </TabsList>
+                <TabsContent value="parsed">
+                  <ResponseView
+                    responseText={log.responseText}
+                    responseStatus={log.responseStatus}
+                    streaming={log.streaming}
+                    inputTokens={log.inputTokens}
+                    outputTokens={log.outputTokens}
+                    cacheCreationInputTokens={log.cacheCreationInputTokens}
+                    cacheReadInputTokens={log.cacheReadInputTokens}
+                    apiFormat={log.apiFormat}
+                  />
+                </TabsContent>
+                <TabsContent value="raw">
+                  <pre className="font-mono text-xs whitespace-pre-wrap bg-muted p-3 rounded-md max-h-96 overflow-auto">
+                    {log.responseText}
+                  </pre>
+                </TabsContent>
+              </Tabs>
+            ) : (
+              <p className="text-sm text-muted-foreground italic">No original response</p>
+            )}
+          </TabsContent>
+
+          {replayResult && replayResult.success && (
+            <TabsContent value="replay">
+              {replayResult.responseText !== null ? (
+                <Tabs defaultValue="parsed">
+                  <TabsList>
+                    <TabsTrigger value="parsed">Parsed Response</TabsTrigger>
+                    <TabsTrigger value="raw">Raw Response</TabsTrigger>
+                  </TabsList>
+                  <TabsContent value="parsed">
+                    <ResponseView
+                      responseText={replayResult.responseText ?? null}
+                      responseStatus={replayResult.responseStatus ?? null}
+                      streaming={replayResult.streaming ?? false}
+                      inputTokens={replayResult.inputTokens ?? null}
+                      outputTokens={replayResult.outputTokens ?? null}
+                      apiFormat={log.apiFormat}
+                    />
+                  </TabsContent>
+                  <TabsContent value="raw">
+                    <pre className="font-mono text-xs whitespace-pre-wrap bg-muted p-3 rounded-md max-h-96 overflow-auto">
+                      {replayResult.responseText}
+                    </pre>
+                  </TabsContent>
+                </Tabs>
+              ) : (
+                <p className="text-sm text-muted-foreground italic">No replay response</p>
+              )}
+            </TabsContent>
+          )}
+        </Tabs>
+      </DialogContent>
+    </Dialog>
+  );
+}