@tonyclaw/agent-inspector 2.0.17 → 2.0.19

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

@@ -25,8 +25,6 @@ const API_FORMAT_LABELS: Record<"anthropic" | "openai" | "unknown", string> = {
   unknown: "Unknown",
 };
 
-export type ViewMode = "flat" | "thread";
-
 export type ConversationHeaderProps = {
   conversationId: string;
   startTime: string;

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

@@ -1,6 +1,6 @@
-import { RotateCcw } from "lucide-react";
+import { Braces, Minimize2, RotateCcw } from "lucide-react";
 import type { JSX } from "react";
-import { useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
 import { z } from "zod";
 import { useProviders } from "../../lib/useProviders";
 import { Button } from "../ui/button";
@@ -8,7 +8,8 @@ import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from "../ui/
 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";
+import { CapturedLogSchema, type CapturedLog } from "../../proxy/schemas";
+import { dispatchLogFocusRequest } from "./logFocus";
 import {
   buildReplayComparisons,
   buildReplayMetrics,
@@ -27,6 +28,7 @@ const ReplayResultSchema = z.object({
   outputTokens: z.number().nullable().optional(),
   elapsedMs: z.number().nullable().optional(),
   streaming: z.boolean().optional(),
+  replayLogId: z.number().optional(),
 });
 
 type ReplayResult = z.infer<typeof ReplayResultSchema>;
@@ -43,6 +45,43 @@ type ReplayModelOption = {
   model: string;
 };
 
+type JsonEditState = { valid: true; message: string } | { valid: false; message: string };
+
+const ReplayHistorySchema = z.object({
+  logs: z.array(CapturedLogSchema),
+  total: z.number(),
+});
+
+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`;
@@ -122,14 +161,40 @@ function ReplayComparisonTable({
 
 export function ReplayDialog({ log, open, onOpenChange }: ReplayDialogProps): JSX.Element {
   const { providers } = useProviders();
+  const originalBody = log.rawRequestBody ?? "{}";
   const [modifiedBody, setModifiedBody] = useState<string>(() => {
-    return log.rawRequestBody ?? "{}";
+    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 jsonEditState = useMemo(() => readJsonEditState(modifiedBody), [modifiedBody]);
+
+  const refreshReplayHistory = useCallback(async (): Promise<void> => {
+    if (!open) return;
+    try {
+      const response = await fetch(`/api/logs?replayOf=${String(log.id)}`);
+      if (!response.ok) return;
+      const data: unknown = await response.json();
+      const parsed = ReplayHistorySchema.safeParse(data);
+      if (!parsed.success) return;
+      setReplayHistory(parsed.data.logs);
+    } catch {
+      // Replay history is helpful context, not required for replay itself.
+    }
+  }, [log.id, open]);
+
+  useEffect(() => {
+    void refreshReplayHistory();
+  }, [refreshReplayHistory]);
 
   async function handleReplay() {
+    if (!jsonEditState.valid) {
+      setError("Request body must be valid JSON before replay.");
+      return;
+    }
+
     setLoading(true);
     setError(null);
     setReplayResult(null);
@@ -150,6 +215,7 @@ export function ReplayDialog({ log, open, onOpenChange }: ReplayDialogProps): JS
       }
       const data = parsed.data;
       setReplayResult(data);
+      await refreshReplayHistory();
       if (!data.success) {
         setError(data.error ?? "Replay failed");
       }
@@ -166,6 +232,30 @@ export function ReplayDialog({ log, open, onOpenChange }: ReplayDialogProps): JS
     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) {
@@ -188,9 +278,7 @@ export function ReplayDialog({ log, open, onOpenChange }: ReplayDialogProps): JS
       setError(result.error);
       return;
     }
-    setModifiedBody(result.body);
-    setReplayResult(null);
-    setError(null);
+    handleBodyChange(formatJsonForEdit(result.body));
   }
 
   const originalMetrics = buildReplayMetrics({
@@ -214,6 +302,7 @@ export function ReplayDialog({ log, open, onOpenChange }: ReplayDialogProps): JS
         });
   const replayComparisons =
     replayMetrics === null ? [] : buildReplayComparisons(originalMetrics, replayMetrics);
+  const latestReplayHistory = replayHistory.slice(-5).reverse();
 
   return (
     <Dialog open={open} onOpenChange={handleClose}>
@@ -258,20 +347,104 @@ export function ReplayDialog({ log, open, onOpenChange }: ReplayDialogProps): JS
                 </select>
               </div>
             )}
-            <div>
-              <label className="text-sm font-medium mb-2 block">Request Body (JSON)</label>
+            {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
-                      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"
+                      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) => setModifiedBody(e.target.value)}
+                      onChange={(e) => handleBodyChange(e.target.value)}
                       spellCheck={false}
                     />
                   </TooltipTrigger>
                   <TooltipContent>
-                    Edit the request body before re-sending to the provider
+                    Edit formatted JSON before re-sending to the provider
                   </TooltipContent>
                 </Tooltip>
               </TooltipProvider>
@@ -288,7 +461,7 @@ export function ReplayDialog({ log, open, onOpenChange }: ReplayDialogProps): JS
                 onClick={() => {
                   void handleReplay();
                 }}
-                disabled={loading}
+                disabled={loading || !jsonEditState.valid}
               >
                 {loading ? "Replaying..." : "Replay"}
               </Button>
@@ -298,6 +471,20 @@ export function ReplayDialog({ log, open, onOpenChange }: ReplayDialogProps): JS
               <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>

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

@@ -4,6 +4,6 @@ export {
   getConversationId,
   groupLogsByConversation,
 } from "./ConversationHeader";
-export type { ConversationGroupData, ViewMode } from "./ConversationHeader";
+export type { ConversationGroupData } from "./ConversationHeader";
 export { LogEntry } from "./LogEntry";
 export { ThreadConnector } from "./ThreadConnector";

package/src/knowledge/openclawClient.ts

@@ -26,10 +26,6 @@ function getLegacyEndpoint(): string | null {
   return endpoint.trim();
 }
 
-function isLegacyBackendConfigured(): boolean {
-  return getLegacyEndpoint() !== null;
-}
-
 function buildMemoryUrl(endpoint: string): string {
   return endpoint.endsWith("/memories") ? endpoint : `${endpoint.replace(/\/$/, "")}/memories`;
 }
@@ -141,7 +137,3 @@ export async function searchOpenClaw(
   }
   return { results: [], warning: "OpenClaw search returned an unparseable response." };
 }
-
-export function isOpenClawPromotionConfigured(): boolean {
-  return isOpenClawFileBridgeConfigured() || isLegacyBackendConfigured();
-}

package/src/knowledge/types.ts

@@ -21,8 +21,6 @@ export const KnowledgeEvidenceSchema = z.object({
   models: z.array(z.string()),
 });
 
-export type KnowledgeEvidence = z.infer<typeof KnowledgeEvidenceSchema>;
-
 export const RedactionMetadataSchema = z.object({
   redacted: z.boolean(),
   patterns: z.array(z.string()),

package/src/lib/export-logs.ts

@@ -1,6 +1,19 @@
 import JSZip from "jszip";
 import type { CapturedLog } from "../proxy/schemas";
 
+export type ExportMode = "redacted" | "raw";
+
+const REDACTED = "[REDACTED]";
+const SECRET_KEY_PATTERN =
+  /(^|[-_])(api[-_]?key|authorization|cookie|token|secret|password|access[-_]?token|refresh[-_]?token)([-_]|$)/i;
+const SECRET_TEXT_PATTERNS: readonly RegExp[] = [
+  /Bearer\s+[A-Za-z0-9._~+/=-]{12,}/gi,
+  /\bsk-[A-Za-z0-9_-]{12,}\b/g,
+  /\bsk-ant-[A-Za-z0-9_-]{12,}\b/g,
+  /\bghp_[A-Za-z0-9_]{12,}\b/g,
+  /\bglpat-[A-Za-z0-9_-]{12,}\b/g,
+];
+
 async function fetchStreamingChunks(logId: number): Promise<string | null> {
   try {
     const response = await fetch(`/api/logs/${logId}/chunks`);
@@ -12,16 +25,70 @@ async function fetchStreamingChunks(logId: number): Promise<string | null> {
   }
 }
 
-export async function exportLogsAsZip(logs: CapturedLog[]): Promise<void> {
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+
+function redactValue(value: unknown): unknown {
+  if (Array.isArray(value)) return value.map((item) => redactValue(item));
+  if (!isRecord(value)) return value;
+
+  const result: Record<string, unknown> = {};
+  for (const [key, item] of Object.entries(value)) {
+    result[key] = SECRET_KEY_PATTERN.test(key) ? REDACTED : redactValue(item);
+  }
+  return result;
+}
+
+export function redactJsonText(text: string): string {
+  const redactText = (value: string): string => {
+    let result = value;
+    for (const pattern of SECRET_TEXT_PATTERNS) {
+      result = result.replace(pattern, REDACTED);
+    }
+    return result;
+  };
+
+  try {
+    const parsed: unknown = JSON.parse(text);
+    return redactText(JSON.stringify(redactValue(parsed), null, 2));
+  } catch {
+    return redactText(text);
+  }
+}
+
+function exportText(text: string, mode: ExportMode): string {
+  return mode === "redacted" ? redactJsonText(text) : text;
+}
+
+export async function exportLogsAsZip(
+  logs: CapturedLog[],
+  mode: ExportMode = "redacted",
+): Promise<void> {
   const zip = new JSZip();
+  const suffix = mode === "redacted" ? "redacted" : "raw";
+  zip.file(
+    "manifest.json",
+    JSON.stringify(
+      {
+        exportedAt: new Date().toISOString(),
+        mode,
+        redacted: mode === "redacted",
+        logCount: logs.length,
+        logIds: logs.map((log) => log.id),
+      },
+      null,
+      2,
+    ),
+  );
 
   // Add regular request/response files
   for (const log of logs) {
     if (log.rawRequestBody !== null) {
-      zip.file(`#${log.id}.Request.json`, log.rawRequestBody);
+      zip.file(`#${log.id}.Request.json`, exportText(log.rawRequestBody, mode));
     }
     if (log.responseText !== null) {
-      zip.file(`#${log.id}.Response.json`, log.responseText);
+      zip.file(`#${log.id}.Response.json`, exportText(log.responseText, mode));
     }
   }
 
@@ -31,7 +98,7 @@ export async function exportLogsAsZip(logs: CapturedLog[]): Promise<void> {
     streamingLogs.map(async (log) => {
       const chunks = await fetchStreamingChunks(log.id);
       if (chunks !== null) {
-        zip.file(`#${log.id}.SSE.Response.json`, chunks);
+        zip.file(`#${log.id}.SSE.Response.json`, exportText(chunks, mode));
       }
     }),
   );
@@ -42,7 +109,7 @@ export async function exportLogsAsZip(logs: CapturedLog[]): Promise<void> {
 
   const anchor = document.createElement("a");
   anchor.href = url;
-  anchor.download = `agent-inspector-export-${new Date().toISOString().slice(0, 10)}.zip`;
+  anchor.download = `agent-inspector-export-${suffix}-${new Date().toISOString().slice(0, 10)}.zip`;
   document.body.appendChild(anchor);
   anchor.click();
   document.body.removeChild(anchor);

package/src/lib/providerTestContract.ts

@@ -73,7 +73,6 @@ export type ProviderTestErrorType = z.infer<typeof ProviderTestErrorTypeSchema>;
 export type ProviderTestResult = z.infer<typeof ProviderTestResultSchema>;
 export type ProviderTestState = z.infer<typeof ProviderTestStateSchema>;
 export type ProviderTestResults = z.infer<typeof ProviderTestResultsSchema>;
-export type ModelTestResults = z.infer<typeof ModelTestResultsSchema>;
 
 export function createPendingProviderTestResults(): ProviderTestResults {
   return {

package/src/lib/useProviders.ts

@@ -13,7 +13,7 @@ async function fetcher(url: string): Promise<ProviderConfig[]> {
 
 export function useProviders() {
   const response: SWRResponse<ProviderConfig[], Error> = useSWR<ProviderConfig[], Error>(
-    "/api/providers",
+    "/api/providers?includeSecrets=1",
     fetcher,
     {
       revalidateOnFocus: false,

package/src/mcp/server.ts

@@ -216,10 +216,15 @@ function registerTools(server: McpServer): void {
     {
       title: "List configured LLM providers",
       description:
-        "Returns the full ProviderConfig array, including apiKey in PLAINTEXT. MCP is localhost-only — any process that can call /api/mcp can also read <dataDir>/providers.json directly, so the apiKey is not redacted. Do not expose this MCP server to non-trusted local processes.",
-      inputSchema: z.object({}),
+        "Returns the configured ProviderConfig array with apiKey redacted by default. Set includeSecrets=true only when the user explicitly needs plaintext local provider keys; this exposes secrets from <dataDir>/providers.json.",
+      inputSchema: z.object({
+        includeSecrets: z
+          .boolean()
+          .optional()
+          .describe("Return plaintext provider API keys. Exposes local secrets when true."),
+      }),
     },
-    () => safeCall(() => listProvidersImpl(callApi)),
+    (args) => safeCall(() => listProvidersImpl(callApi, args)),
   );
 
   // ----- Action tools -----
@@ -229,12 +234,16 @@ function registerTools(server: McpServer): void {
     {
       title: "Get a single provider by id",
       description:
-        "Returns the full ProviderConfig for the given id, including apiKey in PLAINTEXT (same posture as inspector_list_providers).",
+        "Returns one ProviderConfig with apiKey redacted by default. Set includeSecrets=true only when the user explicitly needs the plaintext local provider key.",
       inputSchema: z.object({
         id: z.string().describe("The provider id."),
+        includeSecrets: z
+          .boolean()
+          .optional()
+          .describe("Return the plaintext provider API key. Exposes a local secret when true."),
       }),
     },
-    ({ id }) => safeCall(() => getProviderImpl(callApi, id)),
+    ({ id, includeSecrets }) => safeCall(() => getProviderImpl(callApi, id, { includeSecrets })),
   );
 
   server.registerTool(
@@ -393,4 +402,3 @@ export const TOOL_NAMES = [
   "inspector_search_knowledge",
   "inspector_get_project_context",
 ] as const;
-export type ToolName = (typeof TOOL_NAMES)[number];

package/src/mcp/toolHandlers.ts

@@ -147,14 +147,31 @@ export async function listModelsImpl(callApi: CallApiFn): Promise<ToolResult> {
   return textJson(await res.json());
 }
 
-export async function listProvidersImpl(callApi: CallApiFn): Promise<ToolResult> {
-  const res = await callApi("/api/providers");
+export type ProviderReadArgs = {
+  includeSecrets?: boolean;
+};
+
+function includeSecretsQuery(includeSecrets: boolean | undefined): string {
+  return includeSecrets === true ? "?includeSecrets=1" : "";
+}
+
+export async function listProvidersImpl(
+  callApi: CallApiFn,
+  args: ProviderReadArgs = {},
+): Promise<ToolResult> {
+  const res = await callApi(`/api/providers${includeSecretsQuery(args.includeSecrets)}`);
   if (!res.ok) return toolError(`GET /api/providers returned ${res.status}`);
   return textJson(await res.json());
 }
 
-export async function getProviderImpl(callApi: CallApiFn, id: string): Promise<ToolResult> {
-  const res = await callApi(`/api/providers/${encodeURIComponent(id)}`);
+export async function getProviderImpl(
+  callApi: CallApiFn,
+  id: string,
+  args: ProviderReadArgs = {},
+): Promise<ToolResult> {
+  const res = await callApi(
+    `/api/providers/${encodeURIComponent(id)}${includeSecretsQuery(args.includeSecrets)}`,
+  );
   if (!res.ok) return toolError(`GET /api/providers/${id} returned ${res.status}`);
   return textJson(await res.json());
 }

package/src/proxy/chunkStorage.ts

@@ -76,8 +76,7 @@ export function writeChunks(logId: number, chunks: StreamingChunk[], truncated?:
   try {
     renameSync(tempPath, targetPath);
   } catch (err) {
-    // eslint-disable-next-line no-console
-    console.warn("[chunkStorage] Rename failed, falling back to copy+delete:", err);
+    logger.warn("[chunkStorage] Rename failed, falling back to copy+delete:", String(err));
     // If rename fails, try copy + delete
     try {
       copyFileSync(tempPath, targetPath);
@@ -100,8 +99,7 @@ export function readChunks(path: string): StreamingChunksData | null {
   }
   try {
     const content = readFileSync(path, "utf-8");
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-    const parsed = JSON.parse(content);
+    const parsed: unknown = JSON.parse(content);
     const result = StreamingChunksDataSchema.safeParse(parsed);
     if (!result.success) return null;
     return result.data;