@tonyclaw/agent-inspector 2.0.4 → 2.0.6

package/.output/server/_ssr/{ReplayDialog-BDRcr8E5.mjs → ReplayDialog-CaMQBc79.mjs}

@@ -1,11 +1,11 @@
 import { r as reactExports, j as jsxRuntimeExports } from "../_libs/react.mjs";
-import { D as Dialog, b as DialogContent, d as DialogHeader, e as DialogTitle, T as Tabs, h as TabsList, i as TabsTrigger, j as TabsContent, k as TooltipProvider, l as Tooltip, m as TooltipTrigger, n as TooltipContent, o as Button } from "./ProxyViewerContainer-Cckz5qKu.mjs";
-import { ResponseView } from "./ResponseView-DZiPBxvO.mjs";
-import "./router-Dgkv5nKP.mjs";
+import { u as useProviders, D as Dialog, b as DialogContent, d as DialogHeader, e as DialogTitle, T as Tabs, h as TabsList, i as TabsTrigger, j as TabsContent, k as TooltipProvider, l as Tooltip, m as TooltipTrigger, n as TooltipContent, o as Button } from "./ProxyViewerContainer-CYm2Dw19.mjs";
+import { ResponseView } from "./ResponseView-RtFwNvgD.mjs";
+import "./router-DGPt3MUc.mjs";
 import "../_libs/modelcontextprotocol__server.mjs";
 import "../_libs/jszip.mjs";
-import "./json-viewer-aJhb93ZK.mjs";
-import { s as RotateCcw } from "../_libs/lucide-react.mjs";
+import "./json-viewer-d4obyRaA.mjs";
+import { I as RotateCcw } from "../_libs/lucide-react.mjs";
 import { d as object, c as boolean, n as number, b as string } from "../_libs/zod.mjs";
 import "../_libs/swr.mjs";
 import "../_libs/use-sync-external-store.mjs";
@@ -168,17 +168,174 @@ import "../_libs/lie.mjs";
 import "../_libs/immediate.mjs";
 import "../_libs/setimmediate.mjs";
 import "../_libs/pako.mjs";
+function isJsonObject(value) {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+function byteLength(value) {
+  if (value === null || value === void 0) return null;
+  return new TextEncoder().encode(value).length;
+}
+function readRequestModel(body) {
+  try {
+    const parsed = JSON.parse(body);
+    if (!isJsonObject(parsed)) return null;
+    const model = parsed["model"];
+    return typeof model === "string" && model.length > 0 ? model : null;
+  } catch {
+    return null;
+  }
+}
+function replaceRequestModel(body, model) {
+  try {
+    const parsed = JSON.parse(body);
+    if (!isJsonObject(parsed)) {
+      return { body, error: "Request body must be a JSON object." };
+    }
+    return {
+      body: JSON.stringify({ ...parsed, model }, null, 2),
+      error: null
+    };
+  } catch {
+    return { body, error: "Request body must be valid JSON before changing the replay model." };
+  }
+}
+function buildReplayMetrics(input) {
+  return {
+    status: input.status ?? null,
+    elapsedMs: input.elapsedMs ?? null,
+    inputTokens: input.inputTokens ?? null,
+    outputTokens: input.outputTokens ?? null,
+    responseBytes: byteLength(input.responseText),
+    streaming: input.streaming === true
+  };
+}
+function numericDelta(original, replay) {
+  if (original === null || replay === null) return null;
+  return replay - original;
+}
+function buildReplayComparisons(original, replay) {
+  return [
+    {
+      id: "status",
+      label: "Status",
+      original: original.status,
+      replay: replay.status,
+      delta: numericDelta(original.status, replay.status)
+    },
+    {
+      id: "elapsed",
+      label: "Elapsed",
+      original: original.elapsedMs,
+      replay: replay.elapsedMs,
+      delta: numericDelta(original.elapsedMs, replay.elapsedMs)
+    },
+    {
+      id: "input",
+      label: "Input",
+      original: original.inputTokens,
+      replay: replay.inputTokens,
+      delta: numericDelta(original.inputTokens, replay.inputTokens)
+    },
+    {
+      id: "output",
+      label: "Output",
+      original: original.outputTokens,
+      replay: replay.outputTokens,
+      delta: numericDelta(original.outputTokens, replay.outputTokens)
+    },
+    {
+      id: "bytes",
+      label: "Bytes",
+      original: original.responseBytes,
+      replay: replay.responseBytes,
+      delta: numericDelta(original.responseBytes, replay.responseBytes)
+    },
+    {
+      id: "streaming",
+      label: "Stream",
+      original: original.streaming,
+      replay: replay.streaming,
+      delta: null
+    }
+  ];
+}
 const ReplayResultSchema = object({
   success: boolean(),
   error: string().optional(),
-  responseStatus: number().optional(),
-  responseText: string().optional(),
-  inputTokens: number().optional(),
-  outputTokens: number().optional(),
-  elapsedMs: number().optional(),
+  responseStatus: number().nullable().optional(),
+  responseText: string().nullable().optional(),
+  inputTokens: number().nullable().optional(),
+  outputTokens: number().nullable().optional(),
+  elapsedMs: number().nullable().optional(),
   streaming: boolean().optional()
 });
+function formatElapsed(ms) {
+  if (ms < 1e3) return `${String(ms)}ms`;
+  return `${(ms / 1e3).toFixed(1)}s`;
+}
+function formatMetricValue(value, metricId) {
+  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, metricId) {
+  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) {
+  if (delta === null || delta === 0) return "text-muted-foreground";
+  if (delta > 0) return "text-amber-400";
+  return "text-emerald-400";
+}
+function ReplayComparisonTable({
+  comparisons
+}) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "overflow-hidden rounded-md border border-border", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid grid-cols-[1fr_1fr_1fr_1fr] bg-muted/40 px-3 py-2 text-[11px] font-medium text-muted-foreground", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Metric" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Original" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Replay" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Delta" })
+    ] }),
+    comparisons.map((comparison) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+      "div",
+      {
+        className: "grid grid-cols-[1fr_1fr_1fr_1fr] border-t border-border px-3 py-2 text-xs",
+        children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-muted-foreground", children: comparison.label }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono", children: formatMetricValue(comparison.original, comparison.id) }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono", children: formatMetricValue(comparison.replay, comparison.id) }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: `font-mono ${deltaToneClass(comparison.delta)}`, children: formatDelta(comparison.delta, comparison.id) })
+        ]
+      },
+      comparison.id
+    ))
+  ] });
+}
 function ReplayDialog({ log, open, onOpenChange }) {
+  const { providers } = useProviders();
   const [modifiedBody, setModifiedBody] = reactExports.useState(() => {
     return log.rawRequestBody ?? "{}";
   });
@@ -218,6 +375,48 @@ function ReplayDialog({ log, open, onOpenChange }) {
     setError(null);
     onOpenChange(false);
   }
+  const replayModelOptions = reactExports.useMemo(() => {
+    const options = [];
+    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) {
+    const result = replaceRequestModel(modifiedBody, model);
+    if (result.error !== null) {
+      setError(result.error);
+      return;
+    }
+    setModifiedBody(result.body);
+    setReplayResult(null);
+    setError(null);
+  }
+  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);
   return /* @__PURE__ */ jsxRuntimeExports.jsx(Dialog, { open, onOpenChange: handleClose, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(DialogContent, { className: "max-w-4xl max-h-[85vh] overflow-auto", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(DialogHeader, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(DialogTitle, { className: "flex items-center gap-2", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsx(RotateCcw, { className: "size-4" }),
@@ -228,9 +427,31 @@ function ReplayDialog({ log, open, onOpenChange }) {
       /* @__PURE__ */ jsxRuntimeExports.jsxs(TabsList, { children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { value: "modified", children: "Modified Request" }),
         /* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { value: "original", children: "Original Response" }),
-        replayResult && /* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { value: "replay", children: "Replay Response" })
+        replayResult && /* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { value: "replay", children: "Replay Response" }),
+        replayResult && /* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { value: "compare", children: "Compare" })
       ] }),
       /* @__PURE__ */ jsxRuntimeExports.jsxs(TabsContent, { value: "modified", className: "space-y-4", children: [
+        replayModelOptions.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid gap-1.5", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("label", { htmlFor: `replay-model-${String(log.id)}`, className: "text-sm font-medium", children: "Replay target" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs(
+            "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",
+              children: [
+                currentReplayModel === "" && /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "", children: "Select model" }),
+                currentReplayModel !== "" && !replayModelOptions.some((option) => option.model === currentReplayModel) && /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: currentReplayModel, children: currentReplayModel }),
+                replayModelOptions.map((option) => /* @__PURE__ */ jsxRuntimeExports.jsxs("option", { value: option.model, children: [
+                  option.providerName,
+                  " / ",
+                  option.model
+                ] }, option.key))
+              ]
+            }
+          )
+        ] }),
         /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx("label", { className: "text-sm font-medium mb-2 block", children: "Request Body (JSON)" }),
           /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipProvider, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
@@ -257,6 +478,7 @@ function ReplayDialog({ log, open, onOpenChange }) {
             children: loading ? "Replaying..." : "Replay"
           }
         ) }),
+        replayResult !== null && /* @__PURE__ */ jsxRuntimeExports.jsx(ReplayComparisonTable, { comparisons: replayComparisons.slice(0, 4) }),
         replayResult && replayResult.success && /* @__PURE__ */ jsxRuntimeExports.jsxs(Tabs, { defaultValue: "parsed", children: [
           /* @__PURE__ */ jsxRuntimeExports.jsxs(TabsList, { children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { value: "parsed", children: "Response" }),
@@ -296,7 +518,7 @@ function ReplayDialog({ log, open, onOpenChange }) {
         ) }),
         /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "raw", children: /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: "font-mono text-xs whitespace-pre-wrap bg-muted p-3 rounded-md max-h-96 overflow-auto", children: log.responseText }) })
       ] }) : /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-muted-foreground italic", children: "No original response" }) }),
-      replayResult && replayResult.success && /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "replay", children: replayResult.responseText !== null ? /* @__PURE__ */ jsxRuntimeExports.jsxs(Tabs, { defaultValue: "parsed", children: [
+      replayResult && replayResult.success && /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "replay", children: (replayResult.responseText ?? null) !== null ? /* @__PURE__ */ jsxRuntimeExports.jsxs(Tabs, { defaultValue: "parsed", children: [
         /* @__PURE__ */ jsxRuntimeExports.jsxs(TabsList, { children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { value: "parsed", children: "Response" }),
           /* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { value: "raw", children: "Raw Response" })
@@ -312,8 +534,12 @@ function ReplayDialog({ log, open, onOpenChange }) {
             apiFormat: log.apiFormat
           }
         ) }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "raw", children: /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: "font-mono text-xs whitespace-pre-wrap bg-muted p-3 rounded-md max-h-96 overflow-auto", children: replayResult.responseText }) })
-      ] }) : /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-muted-foreground italic", children: "No replay response" }) })
+        /* @__PURE__ */ jsxRuntimeExports.jsx(TabsContent, { value: "raw", children: /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: "font-mono text-xs whitespace-pre-wrap bg-muted p-3 rounded-md max-h-96 overflow-auto", children: replayResult.responseText ?? "" }) })
+      ] }) : /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm text-muted-foreground italic", children: "No replay response" }) }),
+      replayResult && /* @__PURE__ */ jsxRuntimeExports.jsxs(TabsContent, { value: "compare", className: "space-y-3", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(ReplayComparisonTable, { comparisons: replayComparisons }),
+        replayResult.success ? null : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "rounded-md border border-destructive/30 bg-destructive/10 px-3 py-2 text-xs text-destructive", children: replayResult.error ?? "Replay failed" })
+      ] })
     ] })
   ] }) });
 }