@tonyclaw/agent-inspector 2.0.0

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

@@ -0,0 +1,218 @@
+import { RotateCcw } from "lucide-react";
+import type { JSX } from "react";
+import { useState } from "react";
+import { z } from "zod";
+import { Button } from "../ui/button";
+import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from "../ui/tooltip";
+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>
+              <TooltipProvider>
+                <Tooltip>
+                  <TooltipTrigger asChild>
+                    <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}
+                    />
+                  </TooltipTrigger>
+                  <TooltipContent>
+                    Edit the request body before re-sending to the provider
+                  </TooltipContent>
+                </Tooltip>
+              </TooltipProvider>
+            </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">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">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">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>
+  );
+}

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

@@ -0,0 +1,171 @@
+import { AlertTriangle, Zap } from "lucide-react";
+import type { JSX } from "react";
+import { memo } from "react";
+import { useMemo } from "react";
+import ReactMarkdown from "react-markdown";
+import { cn, formatTokens, getStatusCategory, type StatusCategory } from "../../lib/utils";
+import type { RequestFormat } from "../../proxy/schemas";
+import { formatViewFor } from "./formats";
+import { getLogFormatAdapter } from "./log-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?: RequestFormat;
+  /** SSE error message from streaming response */
+  error?: string | null;
+};
+
+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 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 const ResponseView = memo(function ResponseView({
+  responseText,
+  responseStatus,
+  streaming,
+  inputTokens,
+  outputTokens,
+  cacheCreationInputTokens,
+  cacheReadInputTokens,
+  apiFormat,
+  error,
+}: ResponseViewProps): JSX.Element {
+  const resolvedFormat = apiFormat ?? "unknown";
+  const parsed = useMemo(
+    () => getLogFormatAdapter(resolvedFormat).analyzeResponse(responseText).parsed,
+    [resolvedFormat, responseText],
+  );
+
+  if (responseText === null && error === undefined) {
+    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 isHttpError = responseStatus !== null && responseStatus >= 400;
+
+  if (isHttpError) {
+    return (
+      <div className="space-y-2">
+        <StatusIndicator status={responseStatus} />
+        <ErrorResponseView text={responseText ?? ""} />
+        {error !== undefined && error !== null && (
+          <div className="rounded border border-destructive/50 bg-destructive/10 p-3 text-xs">
+            <div className="font-semibold text-destructive mb-1">SSE Error</div>
+            <div className="text-muted-foreground font-mono">{error}</div>
+          </div>
+        )}
+      </div>
+    );
+  }
+
+  if (error !== undefined && error !== null) {
+    return (
+      <div className="space-y-2">
+        <StatusIndicator status={responseStatus} />
+        <div className="rounded border border-destructive/50 bg-destructive/10 p-3 text-xs">
+          <div className="font-semibold text-destructive mb-1">SSE Error</div>
+          <div className="text-muted-foreground font-mono">{error}</div>
+        </div>
+        {responseText !== null && (
+          <div className="mt-2">
+            <ErrorResponseView text={responseText} />
+          </div>
+        )}
+      </div>
+    );
+  }
+
+  if (parsed !== null) {
+    return (
+      <div className="space-y-2">
+        <StatusIndicator status={responseStatus} />
+        {formatViewFor(resolvedFormat, 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,188 @@
+import { memo, 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 { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from "../ui/tooltip";
+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 const StreamingChunkSequence = memo(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;
+
+    let cancelled = false;
+    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 }) => {
+        if (!cancelled) {
+          setChunkState({ status: "success", chunks: data.chunks });
+        }
+      })
+      .catch(() => {
+        if (!cancelled) {
+          setChunkState({ status: "error", message: "Chunk data unavailable" });
+        }
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [containerExpanded, logId]);
+
+  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={0} showCopy />
+                    </div>
+                  ))}
+                </div>
+              )}
+            </div>
+          );
+        })}
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-1">
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <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>
+          </TooltipTrigger>
+          <TooltipContent>Server-Sent Events streaming chunks from the provider</TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
+
+      {containerExpanded === true ? (
+        <div className="rounded-md border border-border bg-muted/20 overflow-auto max-h-64">
+          {renderBody()}
+        </div>
+      ) : null}
+    </div>
+  );
+});