@tonyclaw/agent-inspector 3.0.7 → 3.0.8

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

@@ -1,6 +1,6 @@
 import { Braces, Minimize2, RotateCcw } from "lucide-react";
 import type { JSX } from "react";
-import { useCallback, useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { z } from "zod";
 import { useProviders } from "../../lib/useProviders";
 import { Button } from "../ui/button";
@@ -9,6 +9,7 @@ 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,
@@ -53,6 +54,9 @@ const ReplayHistorySchema = z.object({
   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);
@@ -175,17 +179,26 @@ export function ReplayDialog({
   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 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);
+      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.
     }
@@ -195,44 +208,74 @@ export function ReplayDialog({
     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 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;
+      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 {
-      setLoading(false);
+      if (replayRequestIdRef.current === requestId) {
+        replayAbortRef.current = null;
+        setLoading(false);
+      }
     }
   }
 
   function handleClose() {
+    cancelReplay();
     setReplayResult(null);
     setError(null);
     onOpenChange(false);

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

@@ -1,8 +1,10 @@
-import { memo, Suspense, useState, useEffect, useMemo, type JSX } from "react";
+import { memo, Suspense, useState, useEffect, useMemo, useRef, type JSX } from "react";
 import { ChevronDown, ChevronRight, Loader2 } from "lucide-react";
+import { z } from "zod";
 import { Badge } from "../ui/badge";
 import { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } from "../ui/tooltip";
-import type { StreamingChunk } from "../../contracts";
+import { StreamingChunkSchema, type StreamingChunk } from "../../contracts";
+import { fetchJsonWithTimeout } from "../../lib/apiClient";
 import { LazyJsonViewer } from "./lazy";
 
 export type StreamingChunkSequenceProps = {
@@ -21,6 +23,13 @@ type ChunkGroup = {
   chunks: StreamingChunk[];
 };
 
+const StreamingChunksResponseSchema = z.object({
+  chunks: z.array(StreamingChunkSchema),
+  truncated: z.boolean().optional(),
+});
+
+const CHUNK_FETCH_TIMEOUT_MS = 10_000;
+
 export const StreamingChunkSequence = memo(function StreamingChunkSequence({
   logId,
   truncated,
@@ -28,33 +37,37 @@ export const StreamingChunkSequence = memo(function StreamingChunkSequence({
   const [containerExpanded, setContainerExpanded] = useState(false);
   const [chunkState, setChunkState] = useState<ChunkState>({ status: "idle" });
   const [expandedIndices, setExpandedIndices] = useState<Set<number>>(new Set());
+  const loadedLogIdRef = useRef<number | null>(null);
 
   useEffect(() => {
-    if (!containerExpanded || chunkState.status !== "idle") return;
+    if (!containerExpanded) return;
+    if (loadedLogIdRef.current === logId) return;
 
-    let cancelled = false;
+    const controller = new AbortController();
     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 });
-        }
+    void fetchJsonWithTimeout(
+      `/api/logs/${logId}/chunks`,
+      StreamingChunksResponseSchema,
+      CHUNK_FETCH_TIMEOUT_MS,
+      { signal: controller.signal },
+      () => "Chunks not found",
+    )
+      .then((data) => {
+        loadedLogIdRef.current = logId;
+        setChunkState({ status: "success", chunks: data.chunks });
       })
-      .catch(() => {
-        if (!cancelled) {
-          setChunkState({ status: "error", message: "Chunk data unavailable" });
-        }
+      .catch((error: unknown) => {
+        if (error instanceof DOMException && error.name === "AbortError") return;
+        loadedLogIdRef.current = null;
+        setChunkState({
+          status: "error",
+          message: error instanceof Error ? error.message : "Chunk data unavailable",
+        });
       });
 
     return () => {
-      cancelled = true;
+      controller.abort();
     };
   }, [containerExpanded, logId]);
 

package/src/lib/apiClient.ts

@@ -61,28 +61,61 @@ export class ApiTimeoutError extends Error {
 }
 
 /**
- * Fetch a JSON resource with a browser-side timeout. This prevents UI loading
- * states from waiting forever when a tab keeps a stale connection across a
- * local server force-restart.
+ * Fetch any resource with a browser-side timeout while preserving a caller
+ * supplied abort signal. The timeout is reported as `ApiTimeoutError`; caller
+ * cancellations keep the native abort shape so UI code can distinguish them.
  */
-export async function fetchJsonWithTimeout<T>(
+export async function fetchWithTimeout(
   input: RequestInfo | URL,
-  schema: z.ZodType<T>,
   timeoutMs: number,
   init?: RequestInit,
-  errorFallback?: (response: Response) => string,
-): Promise<T> {
+): Promise<Response> {
   const controller = new AbortController();
-  const timeout = setTimeout(() => controller.abort(), timeoutMs);
+  let timedOut = false;
+  const timeout = setTimeout(() => {
+    timedOut = true;
+    controller.abort();
+  }, timeoutMs);
+
+  const callerSignal = init?.signal ?? undefined;
+  const abortFromCaller = (): void => controller.abort();
+  if (callerSignal !== undefined) {
+    if (callerSignal.aborted) {
+      controller.abort();
+    } else {
+      callerSignal.addEventListener("abort", abortFromCaller, { once: true });
+    }
+  }
 
   try {
-    return await fetchJson(input, schema, { ...init, signal: controller.signal }, errorFallback);
+    return await fetch(input, { ...init, signal: controller.signal });
   } catch (error) {
-    if (error instanceof DOMException && error.name === "AbortError") {
+    if (timedOut && error instanceof DOMException && error.name === "AbortError") {
       throw new ApiTimeoutError(timeoutMs);
     }
     throw error;
   } finally {
     clearTimeout(timeout);
+    callerSignal?.removeEventListener("abort", abortFromCaller);
   }
 }
+
+/**
+ * Fetch a JSON resource with a browser-side timeout. This prevents UI loading
+ * states from waiting forever when a tab keeps a stale connection across a
+ * local server force-restart.
+ */
+export async function fetchJsonWithTimeout<T>(
+  input: RequestInfo | URL,
+  schema: z.ZodType<T>,
+  timeoutMs: number,
+  init?: RequestInit,
+  errorFallback?: (response: Response) => string,
+): Promise<T> {
+  const response = await fetchWithTimeout(input, timeoutMs, init);
+  if (!response.ok) {
+    const fallback = errorFallback?.(response) ?? `Request failed with status ${response.status}`;
+    throw new Error(await readApiError(response, fallback));
+  }
+  return parseJsonResponse(response, schema);
+}

package/src/lib/ecosystemContract.ts

@@ -41,7 +41,39 @@ export const EcosystemPackagesResponseSchema = z.object({
   runnerPresets: z.array(EcosystemRunnerPresetSchema),
 });
 
+export const EcosystemTaskActionSchema = z.enum(["install", "upgrade", "help", "runner-presets"]);
+
+export const EcosystemTaskStatusSchema = z.enum(["queued", "running", "succeeded", "failed"]);
+
+export const EcosystemTaskSchema = z.object({
+  id: z.string(),
+  packageId: z.string(),
+  npmName: z.string(),
+  action: EcosystemTaskActionSchema,
+  status: EcosystemTaskStatusSchema,
+  command: z.string(),
+  output: z.string(),
+  createdAt: z.string(),
+  startedAt: z.string().nullable(),
+  finishedAt: z.string().nullable(),
+  exitCode: z.number().nullable(),
+  error: z.string().nullable(),
+});
+
+export const EcosystemTaskResponseSchema = z.object({
+  task: EcosystemTaskSchema,
+});
+
+export const EcosystemTasksResponseSchema = z.object({
+  tasks: z.array(EcosystemTaskSchema),
+});
+
 export type EcosystemPackageState = z.infer<typeof EcosystemPackageStateSchema>;
 export type EcosystemPackage = z.infer<typeof EcosystemPackageSchema>;
 export type EcosystemRunnerPreset = z.infer<typeof EcosystemRunnerPresetSchema>;
 export type EcosystemPackagesResponse = z.infer<typeof EcosystemPackagesResponseSchema>;
+export type EcosystemTaskAction = z.infer<typeof EcosystemTaskActionSchema>;
+export type EcosystemTaskStatus = z.infer<typeof EcosystemTaskStatusSchema>;
+export type EcosystemTask = z.infer<typeof EcosystemTaskSchema>;
+export type EcosystemTaskResponse = z.infer<typeof EcosystemTaskResponseSchema>;
+export type EcosystemTasksResponse = z.infer<typeof EcosystemTasksResponseSchema>;

package/src/lib/export-logs.ts

@@ -1,5 +1,6 @@
 import JSZip from "jszip";
 import type { CapturedLog } from "../contracts";
+import { fetchWithTimeout } from "./apiClient";
 import packageJson from "../../package.json";
 
 export type ExportMode = "redacted" | "raw";
@@ -8,6 +9,7 @@ export type ExportLogsResult =
   | {
       ok: false;
       message: string;
+      canceled?: boolean;
     };
 
 const REDACTED = "[REDACTED]";
@@ -23,6 +25,7 @@ const SECRET_TEXT_PATTERNS: readonly RegExp[] = [
 const MAX_EXPORT_LOGS = 200;
 const MAX_EXPORT_TEXT_CHARS = 25_000_000;
 const MAX_STREAMING_CHUNK_EXPORTS = 50;
+const STREAMING_CHUNK_EXPORT_TIMEOUT_MS = 10_000;
 
 export type ExportManifest = {
   version: string;
@@ -65,9 +68,27 @@ function exportLimitMessage(logs: readonly CapturedLog[]): string | null {
   return null;
 }
 
-async function fetchStreamingChunks(logId: number): Promise<string | null> {
+type ExportLogsOptions = {
+  signal?: AbortSignal;
+};
+
+function exportCanceled(signal: AbortSignal | undefined): ExportLogsResult | null {
+  if (signal?.aborted === true) {
+    return { ok: false, message: "Export canceled.", canceled: true };
+  }
+  return null;
+}
+
+async function fetchStreamingChunks(
+  logId: number,
+  signal: AbortSignal | undefined,
+): Promise<string | null> {
   try {
-    const response = await fetch(`/api/logs/${logId}/chunks`);
+    const response = await fetchWithTimeout(
+      `/api/logs/${logId}/chunks`,
+      STREAMING_CHUNK_EXPORT_TIMEOUT_MS,
+      { signal },
+    );
     if (!response.ok) return null;
     const data: unknown = await response.json();
     return JSON.stringify(data, null, 2);
@@ -145,7 +166,11 @@ export function buildExportManifest(
 export async function exportLogsAsZip(
   logs: CapturedLog[],
   mode: ExportMode = "redacted",
+  options: ExportLogsOptions = {},
 ): Promise<ExportLogsResult> {
+  const initialCancel = exportCanceled(options.signal);
+  if (initialCancel !== null) return initialCancel;
+
   const limitMessage = exportLimitMessage(logs);
   if (limitMessage !== null) return { ok: false, message: limitMessage };
 
@@ -167,6 +192,9 @@ export async function exportLogsAsZip(
 
   // Add regular request/response files
   for (const log of logs) {
+    const canceled = exportCanceled(options.signal);
+    if (canceled !== null) return canceled;
+
     if (log.rawRequestBody !== null) {
       zip.file(`#${log.id}.Request.json`, exportText(log.rawRequestBody, mode));
     }
@@ -177,7 +205,10 @@ export async function exportLogsAsZip(
 
   // Fetch SSE chunks sequentially so exports do not spike browser memory.
   for (const log of streamingLogs) {
-    const chunks = await fetchStreamingChunks(log.id);
+    const canceled = exportCanceled(options.signal);
+    if (canceled !== null) return canceled;
+
+    const chunks = await fetchStreamingChunks(log.id, options.signal);
     if (chunks !== null) {
       zip.file(`#${log.id}.SSE.Response.json`, exportText(chunks, mode));
     }
@@ -185,6 +216,9 @@ export async function exportLogsAsZip(
 
   // Generate and download ZIP
   const blob = await zip.generateAsync({ type: "blob" });
+  const canceled = exportCanceled(options.signal);
+  if (canceled !== null) return canceled;
+
   const url = URL.createObjectURL(blob);
 
   const anchor = document.createElement("a");

package/src/proxy/ecosystemRegistry.ts

@@ -0,0 +1,244 @@
+import { execFile } from "node:child_process";
+import { readFile } from "node:fs/promises";
+import { join } from "node:path";
+import packageJson from "../../package.json";
+import type {
+  EcosystemPackage,
+  EcosystemPackageState,
+  EcosystemRunnerPreset,
+} from "../lib/ecosystemContract";
+import { npmSpawnCommand } from "./platformCommands";
+
+export type PackageDefinition = {
+  id: string;
+  name: string;
+  npmName: string;
+  capability: string;
+  description: string;
+  workflow: string;
+  primary: boolean;
+};
+
+type NpmResult = {
+  ok: boolean;
+  stdout: string;
+};
+
+export const ECOSYSTEM_PACKAGES: PackageDefinition[] = [
+  {
+    id: "inspector",
+    name: "Agent Inspector",
+    npmName: "@tonyclaw/agent-inspector",
+    capability: "Observe",
+    description: "Captures proxy traffic, sessions, turns, tools, providers, and raw bodies.",
+    workflow: "Keep every agent run visible and reloadable.",
+    primary: true,
+  },
+  {
+    id: "mcp",
+    name: "Inspector MCP",
+    npmName: "@tonyclaw/agent-inspector-mcp",
+    capability: "Connect",
+    description: "Exposes sessions, logs, providers, runs, and evidence to MCP clients.",
+    workflow: "Let Codex, OpenCode, MiMo Code, and other tools query Inspector as memory.",
+    primary: true,
+  },
+  {
+    id: "eval-harness",
+    name: "Eval Harness",
+    npmName: "@tonyclaw/eval-harness",
+    capability: "Evaluate",
+    description:
+      "Runs MCP-aware agent evaluations, runner presets, regressions, and model bakeoffs.",
+    workflow: "Promote Inspector evidence into repeatable evaluation batches.",
+    primary: false,
+  },
+];
+
+export const RUNNER_PRESETS: EcosystemRunnerPreset[] = [
+  {
+    id: "opencode",
+    name: "OpenCode",
+    validatedVersion: "1.17.11",
+    binary: "opencode",
+    modelFlag: "--model",
+    variantFlag: "--variant",
+    tools: ["opencode", "node"],
+    logDir: "opencode",
+    skillsDir: ".opencode/skills",
+    agentsDir: ".opencode/agents",
+  },
+  {
+    id: "mimo",
+    name: "MiMo Code",
+    validatedVersion: "0.1.4",
+    binary: "mimo",
+    modelFlag: "--model",
+    variantFlag: "--agent",
+    tools: ["mimo", "node"],
+    logDir: "mimocode",
+    skillsDir: ".mimocode/skills",
+    agentsDir: ".mimocode/agents",
+  },
+  {
+    id: "codex",
+    name: "Codex CLI",
+    validatedVersion: "0.142.5",
+    binary: "codex",
+    modelFlag: "--model",
+    variantFlag: null,
+    tools: ["codex"],
+    logDir: "codex",
+    skillsDir: ".codex/skills",
+    agentsDir: ".codex/agents",
+  },
+  {
+    id: "claude",
+    name: "Claude Code",
+    validatedVersion: "2.1.195",
+    binary: "claude",
+    modelFlag: "--model",
+    variantFlag: null,
+    tools: ["claude"],
+    logDir: "claude",
+    skillsDir: ".claude/skills",
+    agentsDir: ".claude/agents",
+  },
+];
+
+const NPM_TIMEOUT_MS = 4000;
+
+function runNpm(args: readonly string[]): Promise<NpmResult> {
+  return new Promise((resolve) => {
+    const command = npmSpawnCommand(args);
+    try {
+      execFile(
+        command.command,
+        command.args,
+        { timeout: NPM_TIMEOUT_MS, windowsHide: true },
+        (error, stdout) => {
+          resolve({
+            ok: error === null,
+            stdout: String(stdout).trim(),
+          });
+        },
+      );
+    } catch {
+      resolve({ ok: false, stdout: "" });
+    }
+  });
+}
+
+async function readGlobalNpmRoot(): Promise<string | null> {
+  const result = await runNpm(["root", "-g"]);
+  if (!result.ok || result.stdout.length === 0) return null;
+  return result.stdout;
+}
+
+function readGlobalNpmRootFallback(): string | null {
+  switch (process.platform) {
+    case "win32": {
+      const appData = process.env["APPDATA"];
+      if (appData === undefined || appData.length === 0) return null;
+      return join(appData, "npm", "node_modules");
+    }
+    case "darwin":
+    case "linux":
+    case "aix":
+    case "freebsd":
+    case "openbsd":
+    case "sunos": {
+      const prefix = process.env["PREFIX"];
+      if (prefix !== undefined && prefix.length > 0) return join(prefix, "lib", "node_modules");
+      return "/usr/local/lib/node_modules";
+    }
+    case "android":
+    case "cygwin":
+    case "haiku":
+    case "netbsd":
+      return null;
+  }
+
+  return null;
+}
+
+function packageJsonPath(globalRoot: string, npmName: string): string {
+  const parts = npmName.split("/");
+  return join(globalRoot, ...parts, "package.json");
+}
+
+function readJsonStringField(raw: unknown, field: string): string | null {
+  if (typeof raw !== "object" || raw === null) return null;
+  const descriptor = Object.getOwnPropertyDescriptor(raw, field);
+  if (descriptor === undefined) return null;
+  return typeof descriptor.value === "string" ? descriptor.value : null;
+}
+
+async function readInstalledVersion(
+  globalRoot: string | null,
+  npmName: string,
+): Promise<string | null> {
+  if (npmName === packageJson.name) return packageJson.version;
+  if (globalRoot === null) return null;
+
+  try {
+    const raw = await readFile(packageJsonPath(globalRoot, npmName), "utf8");
+    return readJsonStringField(JSON.parse(raw), "version");
+  } catch {
+    return null;
+  }
+}
+
+async function readLatestVersion(npmName: string): Promise<string | null> {
+  const result = await runNpm(["view", npmName, "version", "--json"]);
+  if (!result.ok || result.stdout.length === 0) return null;
+
+  try {
+    const parsed: unknown = JSON.parse(result.stdout);
+    return typeof parsed === "string" && parsed.length > 0 ? parsed : null;
+  } catch {
+    return result.stdout.length > 0 ? result.stdout : null;
+  }
+}
+
+function packageState(
+  installedVersion: string | null,
+  latestVersion: string | null,
+): EcosystemPackageState {
+  if (installedVersion !== null && latestVersion !== null && installedVersion !== latestVersion) {
+    return "update-available";
+  }
+  if (installedVersion !== null) return "installed";
+  if (latestVersion !== null) return "available";
+  return "planned";
+}
+
+async function describePackage(
+  definition: PackageDefinition,
+  globalRoot: string | null,
+): Promise<EcosystemPackage> {
+  const [installedVersion, latestVersion] = await Promise.all([
+    readInstalledVersion(globalRoot, definition.npmName),
+    readLatestVersion(definition.npmName),
+  ]);
+  const state = packageState(installedVersion, latestVersion);
+
+  return {
+    ...definition,
+    installCommand: `npm install -g ${definition.npmName}`,
+    installedVersion,
+    latestVersion,
+    state,
+  };
+}
+
+export async function listEcosystemPackages(): Promise<EcosystemPackage[]> {
+  const globalRoot = (await readGlobalNpmRoot()) ?? readGlobalNpmRootFallback();
+  return Promise.all(
+    ECOSYSTEM_PACKAGES.map((definition) => describePackage(definition, globalRoot)),
+  );
+}
+
+export function findEcosystemPackage(packageId: string): PackageDefinition | null {
+  return ECOSYSTEM_PACKAGES.find((definition) => definition.id === packageId) ?? null;
+}