@tonyclaw/agent-inspector 3.1.32 → 4.0.2

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

@@ -1,636 +0,0 @@
-import { Braces, Minimize2, RotateCcw } from "lucide-react";
-import type { JSX } from "react";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { z } from "zod";
-import { useProviders } from "../../lib/useProviders";
-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 { CapturedLogSchema, type CapturedLog } from "../../contracts";
-import { ApiTimeoutError, fetchJsonWithTimeout } from "../../lib/apiClient";
-import { dispatchLogFocusRequest } from "./logFocus";
-import {
-  buildReplayComparisons,
-  buildReplayMetrics,
-  readRequestModel,
-  replaceRequestModel,
-  type ReplayMetricComparison,
-  type ReplayMetricValue,
-} from "./replayComparison";
-
-const ReplayResultSchema = z.object({
-  success: z.boolean(),
-  error: z.string().optional(),
-  responseStatus: z.number().nullable().optional(),
-  responseText: z.string().nullable().optional(),
-  inputTokens: z.number().nullable().optional(),
-  outputTokens: z.number().nullable().optional(),
-  elapsedMs: z.number().nullable().optional(),
-  streaming: z.boolean().optional(),
-  replayLogId: z.number().optional(),
-});
-
-type ReplayResult = z.infer<typeof ReplayResultSchema>;
-
-type ReplayDialogProps = {
-  log: CapturedLog;
-  displayNumber: number;
-  open: boolean;
-  onOpenChange: (open: boolean) => void;
-};
-
-type ReplayModelOption = {
-  key: string;
-  providerName: string;
-  model: string;
-};
-
-type JsonEditState = { valid: true; message: string } | { valid: false; message: string };
-
-const ReplayHistorySchema = z.object({
-  logs: z.array(CapturedLogSchema),
-  total: z.number(),
-});
-
-const REPLAY_TIMEOUT_MS = 60_000;
-const REPLAY_HISTORY_TIMEOUT_MS = 10_000;
-
-function formatJsonForEdit(value: string): string {
-  try {
-    const parsed: unknown = JSON.parse(value);
-    return JSON.stringify(parsed, null, 2);
-  } catch {
-    return value;
-  }
-}
-
-function compactJsonForEdit(value: string): string {
-  try {
-    const parsed: unknown = JSON.parse(value);
-    return JSON.stringify(parsed);
-  } catch {
-    return value;
-  }
-}
-
-function readJsonEditState(value: string): JsonEditState {
-  try {
-    JSON.parse(value);
-    return { valid: true, message: "Valid JSON" };
-  } catch (err) {
-    return {
-      valid: false,
-      message: err instanceof Error ? err.message : "Invalid JSON",
-    };
-  }
-}
-
-function formatElapsed(ms: number): string {
-  if (ms < 1000) return `${String(ms)}ms`;
-  return `${(ms / 1000).toFixed(1)}s`;
-}
-
-function formatMetricValue(
-  value: ReplayMetricValue,
-  metricId: ReplayMetricComparison["id"],
-): string {
-  if (value === null) return "-";
-  if (typeof value === "boolean") return value ? "stream" : "non-stream";
-  switch (metricId) {
-    case "elapsed":
-      return formatElapsed(value);
-    case "input":
-    case "output":
-    case "bytes":
-      return value.toLocaleString();
-    case "status":
-      return String(value);
-    case "streaming":
-      return value ? "stream" : "non-stream";
-  }
-}
-
-function formatDelta(delta: number | null, metricId: ReplayMetricComparison["id"]): string {
-  if (delta === null) return "-";
-  const sign = delta > 0 ? "+" : "";
-  switch (metricId) {
-    case "elapsed":
-      return `${sign}${formatElapsed(delta)}`;
-    case "input":
-    case "output":
-    case "bytes":
-    case "status":
-      return `${sign}${delta.toLocaleString()}`;
-    case "streaming":
-      return "-";
-  }
-}
-
-function deltaToneClass(delta: number | null): string {
-  if (delta === null || delta === 0) return "text-muted-foreground";
-  if (delta > 0) return "text-amber-400";
-  return "text-emerald-400";
-}
-
-function ReplayComparisonTable({
-  comparisons,
-}: {
-  comparisons: ReplayMetricComparison[];
-}): JSX.Element {
-  return (
-    <div className="overflow-hidden rounded-md border border-border">
-      <div className="grid grid-cols-[1fr_1fr_1fr_1fr] bg-muted/40 px-3 py-2 text-[11px] font-medium text-muted-foreground">
-        <span>Metric</span>
-        <span>Original</span>
-        <span>Replay</span>
-        <span>Delta</span>
-      </div>
-      {comparisons.map((comparison) => (
-        <div
-          key={comparison.id}
-          className="grid grid-cols-[1fr_1fr_1fr_1fr] border-t border-border px-3 py-2 text-xs"
-        >
-          <span className="text-muted-foreground">{comparison.label}</span>
-          <span className="font-mono">{formatMetricValue(comparison.original, comparison.id)}</span>
-          <span className="font-mono">{formatMetricValue(comparison.replay, comparison.id)}</span>
-          <span className={`font-mono ${deltaToneClass(comparison.delta)}`}>
-            {formatDelta(comparison.delta, comparison.id)}
-          </span>
-        </div>
-      ))}
-    </div>
-  );
-}
-
-export function ReplayDialog({
-  log,
-  displayNumber,
-  open,
-  onOpenChange,
-}: ReplayDialogProps): JSX.Element {
-  const { providers } = useProviders();
-  const originalBody = log.rawRequestBody ?? "{}";
-  const [modifiedBody, setModifiedBody] = useState<string>(() => {
-    return formatJsonForEdit(originalBody);
-  });
-  const [replayResult, setReplayResult] = useState<ReplayResult | null>(null);
-  const [replayHistory, setReplayHistory] = useState<CapturedLog[]>([]);
-  const [loading, setLoading] = useState(false);
-  const [error, setError] = useState<string | null>(null);
-  const replayAbortRef = useRef<AbortController | null>(null);
-  const replayRequestIdRef = useRef(0);
-  const jsonEditState = useMemo(() => readJsonEditState(modifiedBody), [modifiedBody]);
-
-  const cancelReplay = useCallback(() => {
-    replayRequestIdRef.current += 1;
-    replayAbortRef.current?.abort();
-    replayAbortRef.current = null;
-    setLoading(false);
-  }, []);
-
-  const refreshReplayHistory = useCallback(async (): Promise<void> => {
-    if (!open) return;
-    try {
-      const data = await fetchJsonWithTimeout(
-        `/api/logs?replayOf=${String(log.id)}`,
-        ReplayHistorySchema,
-        REPLAY_HISTORY_TIMEOUT_MS,
-      );
-      setReplayHistory(data.logs);
-    } catch {
-      // Replay history is helpful context, not required for replay itself.
-    }
-  }, [log.id, open]);
-
-  useEffect(() => {
-    void refreshReplayHistory();
-  }, [refreshReplayHistory]);
-
-  useEffect(() => {
-    if (open) return undefined;
-    cancelReplay();
-    return undefined;
-  }, [cancelReplay, open]);
-
-  useEffect(() => {
-    return () => {
-      replayRequestIdRef.current += 1;
-      replayAbortRef.current?.abort();
-      replayAbortRef.current = null;
-    };
-  }, []);
-
-  async function handleReplay() {
-    if (!jsonEditState.valid) {
-      setError("Request body must be valid JSON before replay.");
-      return;
-    }
-
-    replayAbortRef.current?.abort();
-    const requestId = replayRequestIdRef.current + 1;
-    replayRequestIdRef.current = requestId;
-    const controller = new AbortController();
-    replayAbortRef.current = controller;
-
-    setLoading(true);
-    setError(null);
-    setReplayResult(null);
-
-    try {
-      const data = await fetchJsonWithTimeout(
-        `/api/logs/${log.id}/replay`,
-        ReplayResultSchema,
-        REPLAY_TIMEOUT_MS,
-        {
-          method: "POST",
-          headers: { "Content-Type": "application/json" },
-          body: JSON.stringify({ modifiedBody }),
-          signal: controller.signal,
-        },
-      );
-      if (replayRequestIdRef.current !== requestId) return;
-      setReplayResult(data);
-      await refreshReplayHistory();
-      if (!data.success) {
-        setError(data.error ?? "Replay failed");
-      }
-    } catch (err) {
-      if (replayRequestIdRef.current !== requestId) return;
-      if (
-        err instanceof ApiTimeoutError ||
-        (err instanceof DOMException && err.name === "AbortError")
-      ) {
-        setError("Replay timed out or was canceled.");
-        return;
-      }
-      setError(err instanceof Error ? err.message : "Network error");
-    } finally {
-      if (replayRequestIdRef.current === requestId) {
-        replayAbortRef.current = null;
-        setLoading(false);
-      }
-    }
-  }
-
-  function handleClose() {
-    cancelReplay();
-    setReplayResult(null);
-    setError(null);
-    onOpenChange(false);
-  }
-
-  function handleBodyChange(value: string): void {
-    setModifiedBody(value);
-    setReplayResult(null);
-    setError(null);
-  }
-
-  function handleFormatBody(): void {
-    handleBodyChange(formatJsonForEdit(modifiedBody));
-  }
-
-  function handleCompactBody(): void {
-    handleBodyChange(compactJsonForEdit(modifiedBody));
-  }
-
-  function handleResetBody(): void {
-    handleBodyChange(formatJsonForEdit(originalBody));
-  }
-
-  function handleOpenReplayLog(logId: number): void {
-    window.location.hash = `log-${String(logId)}`;
-    dispatchLogFocusRequest({ logId, tab: "request" });
-    onOpenChange(false);
-  }
-
-  const replayModelOptions = useMemo<ReplayModelOption[]>(() => {
-    const options: ReplayModelOption[] = [];
-    for (const provider of providers) {
-      for (const model of provider.models) {
-        if (model.trim().length === 0) continue;
-        options.push({
-          key: `${provider.id}:${model}`,
-          providerName: provider.name,
-          model,
-        });
-      }
-    }
-    return options;
-  }, [providers]);
-  const currentReplayModel = readRequestModel(modifiedBody) ?? log.model ?? "";
-
-  function handleReplayModelChange(model: string): void {
-    const result = replaceRequestModel(modifiedBody, model);
-    if (result.error !== null) {
-      setError(result.error);
-      return;
-    }
-    handleBodyChange(formatJsonForEdit(result.body));
-  }
-
-  const originalMetrics = buildReplayMetrics({
-    status: log.responseStatus,
-    elapsedMs: log.elapsedMs,
-    inputTokens: log.inputTokens,
-    outputTokens: log.outputTokens,
-    responseText: log.responseText,
-    streaming: log.streaming,
-  });
-  const replayMetrics =
-    replayResult === null
-      ? null
-      : buildReplayMetrics({
-          status: replayResult.responseStatus,
-          elapsedMs: replayResult.elapsedMs,
-          inputTokens: replayResult.inputTokens,
-          outputTokens: replayResult.outputTokens,
-          responseText: replayResult.responseText,
-          streaming: replayResult.streaming,
-        });
-  const replayComparisons =
-    replayMetrics === null ? [] : buildReplayComparisons(originalMetrics, replayMetrics);
-  const latestReplayHistory = replayHistory.slice(-5).reverse();
-
-  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" />
-            <span title={`Log ID ${String(log.id)}`}>Replay Request #{displayNumber}</span>
-          </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>}
-            {replayResult && <TabsTrigger value="compare">Compare</TabsTrigger>}
-          </TabsList>
-
-          <TabsContent value="modified" className="space-y-4">
-            {replayModelOptions.length > 0 && (
-              <div className="grid gap-1.5">
-                <label htmlFor={`replay-model-${String(log.id)}`} className="text-sm font-medium">
-                  Replay target
-                </label>
-                <select
-                  id={`replay-model-${String(log.id)}`}
-                  value={currentReplayModel}
-                  onChange={(event) => handleReplayModelChange(event.currentTarget.value)}
-                  className="h-8 rounded-md border border-input bg-background px-2 text-sm"
-                >
-                  {currentReplayModel === "" && <option value="">Select model</option>}
-                  {currentReplayModel !== "" &&
-                    !replayModelOptions.some((option) => option.model === currentReplayModel) && (
-                      <option value={currentReplayModel}>{currentReplayModel}</option>
-                    )}
-                  {replayModelOptions.map((option) => (
-                    <option key={option.key} value={option.model}>
-                      {option.providerName} / {option.model}
-                    </option>
-                  ))}
-                </select>
-              </div>
-            )}
-            {latestReplayHistory.length > 0 && (
-              <div className="space-y-2 rounded-md border border-border bg-muted/20 px-3 py-2">
-                <div className="flex items-center justify-between gap-2">
-                  <div className="text-xs font-medium">Replay history</div>
-                  <Button
-                    type="button"
-                    variant="ghost"
-                    size="sm"
-                    onClick={() => {
-                      void refreshReplayHistory();
-                    }}
-                  >
-                    Refresh
-                  </Button>
-                </div>
-                <div className="grid gap-1">
-                  {latestReplayHistory.map((historyLog) => (
-                    <button
-                      key={historyLog.id}
-                      type="button"
-                      onClick={() => handleOpenReplayLog(historyLog.id)}
-                      className="grid grid-cols-[auto_1fr_auto_auto] items-center gap-2 rounded-sm px-2 py-1 text-left text-xs hover:bg-muted"
-                    >
-                      <span className="font-mono text-emerald-600">#{historyLog.id}</span>
-                      <span className="truncate font-mono text-muted-foreground">
-                        {historyLog.model ?? "unknown"}
-                      </span>
-                      <span className="font-mono text-muted-foreground">
-                        {historyLog.responseStatus ?? "-"}
-                      </span>
-                      <span className="font-mono text-muted-foreground">
-                        {historyLog.elapsedMs === null ? "-" : formatElapsed(historyLog.elapsedMs)}
-                      </span>
-                    </button>
-                  ))}
-                </div>
-              </div>
-            )}
-            <div className="space-y-2">
-              <div className="flex flex-wrap items-center justify-between gap-2">
-                <label htmlFor={`replay-body-${String(log.id)}`} className="text-sm font-medium">
-                  Request Body
-                </label>
-                <div className="flex items-center gap-2">
-                  <span
-                    className={
-                      jsonEditState.valid ? "text-xs text-emerald-500" : "text-xs text-destructive"
-                    }
-                  >
-                    {jsonEditState.message}
-                  </span>
-                  <Button
-                    type="button"
-                    variant="outline"
-                    size="sm"
-                    onClick={handleFormatBody}
-                    disabled={!jsonEditState.valid}
-                    title="Format JSON"
-                  >
-                    <Braces className="size-3.5" />
-                    Format
-                  </Button>
-                  <Button
-                    type="button"
-                    variant="outline"
-                    size="sm"
-                    onClick={handleCompactBody}
-                    disabled={!jsonEditState.valid}
-                    title="Compact JSON"
-                  >
-                    <Minimize2 className="size-3.5" />
-                    Compact
-                  </Button>
-                  <Button
-                    type="button"
-                    variant="ghost"
-                    size="sm"
-                    onClick={handleResetBody}
-                    title="Reset to original request"
-                  >
-                    <RotateCcw className="size-3.5" />
-                    Reset
-                  </Button>
-                </div>
-              </div>
-              <TooltipProvider>
-                <Tooltip>
-                  <TooltipTrigger asChild>
-                    <textarea
-                      id={`replay-body-${String(log.id)}`}
-                      className="w-full min-h-80 p-3 font-mono text-xs leading-5 bg-muted rounded-md border border-input resize-y tabular-nums focus:outline-none focus:ring-2 focus:ring-ring"
-                      value={modifiedBody}
-                      onChange={(e) => handleBodyChange(e.target.value)}
-                      spellCheck={false}
-                    />
-                  </TooltipTrigger>
-                  <TooltipContent>
-                    Edit formatted JSON 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 || !jsonEditState.valid}
-              >
-                {loading ? "Replaying..." : "Replay"}
-              </Button>
-            </div>
-
-            {replayResult !== null && (
-              <ReplayComparisonTable comparisons={replayComparisons.slice(0, 4)} />
-            )}
-
-            {replayResult?.success === true && replayResult.replayLogId !== undefined && (
-              <div className="flex flex-wrap items-center justify-between gap-2 rounded-md border border-emerald-500/25 bg-emerald-500/10 px-3 py-2 text-xs text-emerald-600">
-                <span>Replay saved as test log #{replayResult.replayLogId}.</span>
-                <Button
-                  type="button"
-                  variant="outline"
-                  size="sm"
-                  onClick={() => handleOpenReplayLog(replayResult.replayLogId ?? log.id)}
-                >
-                  Open saved log
-                </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) !== 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>
-          )}
-
-          {replayResult && (
-            <TabsContent value="compare" className="space-y-3">
-              <ReplayComparisonTable comparisons={replayComparisons} />
-              {replayResult.success ? null : (
-                <div className="rounded-md border border-destructive/30 bg-destructive/10 px-3 py-2 text-xs text-destructive">
-                  {replayResult.error ?? "Replay failed"}
-                </div>
-              )}
-            </TabsContent>
-          )}
-        </Tabs>
-      </DialogContent>
-    </Dialog>
-  );
-}