@tonyclaw/agent-inspector 2.0.0

package/src/proxy/upstream.ts

@@ -0,0 +1,90 @@
+import type { ProviderConfig } from "./providers";
+import {
+  AUTH_HEADER_X_API_KEY,
+  DEFAULT_OPENAI_UPSTREAM,
+  DEFAULT_UPSTREAM,
+  HEADER_AUTHORIZATION,
+  HEADER_HOST,
+  HEADER_X_API_KEY,
+  PATH_CHAT_COMPLETIONS,
+  PATH_V1_CHAT_COMPLETIONS,
+} from "./constants";
+
+export type ApiRoute = {
+  apiPath: string;
+  endpointPath: string;
+  isChatCompletions: boolean;
+  normalizedPath: string;
+};
+
+/**
+ * Describes the protocol implied by the client-facing path.
+ *
+ * The path is the source of truth for request/response format. ProviderConfig.format
+ * is only a fallback for old provider records that do not have a format-specific URL.
+ */
+export function describeApiRoute(apiPath: string): ApiRoute {
+  const endpointPath = apiPath.split("?")[0] ?? "";
+  const isChatCompletions =
+    endpointPath === PATH_CHAT_COMPLETIONS || endpointPath === PATH_V1_CHAT_COMPLETIONS;
+  const normalizedPath =
+    isChatCompletions && !apiPath.startsWith("/v1/") ? `/v1${apiPath}` : apiPath;
+
+  return { apiPath, endpointPath, isChatCompletions, normalizedPath };
+}
+
+export function getProxyApiPath(url: URL): string {
+  return url.pathname.replace(/^\/proxy/, "") + url.search;
+}
+
+export function selectUpstreamBase(route: ApiRoute, provider: ProviderConfig | null): string {
+  if (provider === null) {
+    return route.isChatCompletions ? DEFAULT_OPENAI_UPSTREAM : DEFAULT_UPSTREAM;
+  }
+
+  const formatSpecificUrl = route.isChatCompletions
+    ? provider.openaiBaseUrl
+    : provider.anthropicBaseUrl;
+  if (formatSpecificUrl !== undefined && formatSpecificUrl !== "") {
+    return formatSpecificUrl;
+  }
+  if (provider.baseUrl !== undefined && provider.baseUrl !== "") {
+    return provider.baseUrl;
+  }
+
+  // Legacy records may only contain format. Keep this fallback for compatibility,
+  // but never use it to infer the response parser; that decision comes from the path.
+  return provider.format === "openai" ? DEFAULT_OPENAI_UPSTREAM : DEFAULT_UPSTREAM;
+}
+
+export function buildUpstreamUrl(upstreamBase: string, normalizedPath: string): string {
+  const base = upstreamBase.endsWith("/") ? upstreamBase.slice(0, -1) : upstreamBase;
+
+  // Many OpenAI-compatible base URLs already include /v1. Avoid producing /v1/v1.
+  if (base.endsWith("/v1") && normalizedPath.startsWith("/v1/")) {
+    return base + normalizedPath.slice(3);
+  }
+  return base + normalizedPath;
+}
+
+export function setUpstreamHost(headers: Headers, upstreamBase: string): void {
+  try {
+    headers.set(HEADER_HOST, new URL(upstreamBase).host);
+  } catch {
+    // Invalid provider URLs are rejected by the UI. Retain the historical default
+    // for imported or manually edited config that bypassed that validation.
+    headers.set(HEADER_HOST, "api.anthropic.com");
+  }
+}
+
+export function injectProviderAuth(headers: Headers, provider: ProviderConfig | null): void {
+  if (provider === null) return;
+
+  const apiKey = provider.apiKey.replace(/^Bearer\s+/i, "").trim();
+  if (provider.authHeader === AUTH_HEADER_X_API_KEY) {
+    headers.set(HEADER_X_API_KEY, apiKey);
+    headers.delete(HEADER_AUTHORIZATION);
+    return;
+  }
+  headers.set(HEADER_AUTHORIZATION, `Bearer ${apiKey}`);
+}

package/src/router.tsx

@@ -0,0 +1,16 @@
+import { createRouter } from "@tanstack/react-router";
+import { routeTree } from "./routeTree.gen";
+
+export function getRouter() {
+  const router = createRouter({
+    routeTree,
+    scrollRestoration: false,
+  });
+  return router;
+}
+
+declare module "@tanstack/react-router" {
+  interface Register {
+    router: ReturnType<typeof getRouter>;
+  }
+}

package/src/routes/__root.tsx

@@ -0,0 +1,45 @@
+/// <reference types="vite/client" />
+import { Outlet, createRootRoute, HeadContent, Scripts } from "@tanstack/react-router";
+import type { ReactNode } from "react";
+import { SWRConfig } from "swr";
+import faviconSvg from "../assets/favicon.svg?url";
+import appCss from "../index.css?url";
+
+export const Route = createRootRoute({
+  head: () => ({
+    meta: [
+      { charSet: "utf-8" },
+      { name: "viewport", content: "width=device-width, initial-scale=1" },
+      { title: "Agent Inspector" },
+    ],
+    links: [
+      { rel: "stylesheet", href: appCss },
+      { rel: "icon", type: "image/svg+xml", href: faviconSvg },
+    ],
+  }),
+  component: RootComponent,
+});
+
+function RootComponent() {
+  return (
+    <RootDocument>
+      <Outlet />
+    </RootDocument>
+  );
+}
+
+function RootDocument({ children }: Readonly<{ children: ReactNode }>) {
+  return (
+    <html lang="en" className="dark">
+      <head>
+        <HeadContent />
+      </head>
+      <body>
+        <SWRConfig value={{ revalidateOnFocus: false, revalidateIfStale: false }}>
+          {children}
+        </SWRConfig>
+        <Scripts />
+      </body>
+    </html>
+  );
+}

package/src/routes/api/config.paths.ts

@@ -0,0 +1,14 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { store } from "../../proxy/providers";
+
+export const Route = createFileRoute("/api/config/paths")({
+  server: {
+    handlers: {
+      GET: () => {
+        return Response.json({
+          providerConfig: store.path,
+        });
+      },
+    },
+  },
+});

package/src/routes/api/config.ts

@@ -0,0 +1,53 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { z } from "zod";
+import { MAX_SLOW_RESPONSE_THRESHOLD_SECONDS } from "../../lib/runtimeConfig";
+import { getConfig, setConfig, RuntimeConfigSchema } from "../../proxy/config";
+
+// Partial schema for PATCH: at least one known field must be present.
+const RuntimeConfigPatchSchema = z
+  .object({
+    stripClaudeCodeBillingHeader: z.boolean().optional(),
+    hasSeenOnboarding: z.boolean().optional(),
+    slowResponseThresholdSeconds: z
+      .number()
+      .int()
+      .min(0)
+      .max(MAX_SLOW_RESPONSE_THRESHOLD_SECONDS)
+      .optional(),
+  })
+  .strict()
+  .refine((v) => Object.keys(v).length > 0, {
+    message: "At least one field must be provided",
+  });
+
+export const Route = createFileRoute("/api/config")({
+  server: {
+    handlers: {
+      GET: () => {
+        return Response.json(getConfig());
+      },
+      PATCH: async ({ request }: { request: Request }) => {
+        let body: unknown;
+        try {
+          body = await request.json();
+        } catch {
+          return Response.json({ error: "Invalid JSON body" }, { status: 400 });
+        }
+
+        const result = RuntimeConfigPatchSchema.safeParse(body);
+        if (!result.success) {
+          return Response.json(
+            {
+              error: "Invalid config payload",
+              issues: result.error.issues,
+            },
+            { status: 400 },
+          );
+        }
+
+        const updated = setConfig(result.data);
+        return Response.json(updated satisfies z.infer<typeof RuntimeConfigSchema>);
+      },
+    },
+  },
+});

package/src/routes/api/health.ts

@@ -0,0 +1,15 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { logger } from "../../proxy/logger";
+
+// Trigger logger auto-initialization when this module loads
+logger.debug("Health endpoint loaded");
+
+export const Route = createFileRoute("/api/health")({
+  server: {
+    handlers: {
+      GET: () => {
+        return Response.json({ status: "ok" });
+      },
+    },
+  },
+});

package/src/routes/api/knowledge.candidates.$candidateId.promote.ts

@@ -0,0 +1,32 @@
+import { createFileRoute } from "@tanstack/react-router";
+import {
+  getCandidate,
+  markCandidateFailed,
+  markCandidatePromoted,
+} from "../../knowledge/candidateStore";
+import { promoteToOpenClaw } from "../../knowledge/openclawClient";
+
+export const Route = createFileRoute("/api/knowledge/candidates/$candidateId/promote")({
+  server: {
+    handlers: {
+      POST: async ({ params }: { params: { candidateId: string } }) => {
+        const candidate = getCandidate(params.candidateId);
+        if (candidate === null) {
+          return Response.json({ error: "Knowledge candidate not found" }, { status: 404 });
+        }
+
+        const result = await promoteToOpenClaw(candidate);
+        if (!result.success) {
+          const updated = markCandidateFailed(candidate.id, result.error);
+          return Response.json(
+            { error: result.error, candidate: updated ?? candidate },
+            { status: 400 },
+          );
+        }
+
+        const updated = markCandidatePromoted(candidate.id, result.memoryId);
+        return Response.json({ candidate: updated ?? candidate });
+      },
+    },
+  },
+});

package/src/routes/api/knowledge.candidates.ts

@@ -0,0 +1,10 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { listCandidates } from "../../knowledge/candidateStore";
+
+export const Route = createFileRoute("/api/knowledge/candidates")({
+  server: {
+    handlers: {
+      GET: () => Response.json({ candidates: listCandidates() }),
+    },
+  },
+});

package/src/routes/api/knowledge.project-context.ts

@@ -0,0 +1,18 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { searchOpenClaw } from "../../knowledge/openclawClient";
+
+export const Route = createFileRoute("/api/knowledge/project-context")({
+  server: {
+    handlers: {
+      GET: async ({ request }: { request: Request }) => {
+        const url = new URL(request.url);
+        const project = url.searchParams.get("project") ?? "";
+        if (project === "") {
+          return Response.json({ error: "Missing project search parameter" }, { status: 400 });
+        }
+        const response = await searchOpenClaw(`project context ${project}`, project);
+        return Response.json({ project, ...response });
+      },
+    },
+  },
+});

package/src/routes/api/knowledge.search.ts

@@ -0,0 +1,31 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { z } from "zod";
+import { searchOpenClaw } from "../../knowledge/openclawClient";
+
+const SearchBodySchema = z.object({
+  query: z.string().min(1),
+  project: z.string().optional(),
+});
+
+export const Route = createFileRoute("/api/knowledge/search")({
+  server: {
+    handlers: {
+      GET: async ({ request }: { request: Request }) => {
+        const url = new URL(request.url);
+        const query = url.searchParams.get("q") ?? "";
+        const project = url.searchParams.get("project") ?? undefined;
+        if (query === "") {
+          return Response.json({ error: "Missing q search parameter" }, { status: 400 });
+        }
+        return Response.json(await searchOpenClaw(query, project));
+      },
+      POST: async ({ request }: { request: Request }) => {
+        const parsed = SearchBodySchema.safeParse(await request.json());
+        if (!parsed.success) {
+          return Response.json({ error: parsed.error.message }, { status: 400 });
+        }
+        return Response.json(await searchOpenClaw(parsed.data.query, parsed.data.project));
+      },
+    },
+  },
+});

package/src/routes/api/knowledge.sessions.$sessionId.candidates.ts

@@ -0,0 +1,16 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { getFilteredLogs } from "../../proxy/store";
+import { distillSessionCandidates } from "../../knowledge/distiller";
+import { saveCandidates } from "../../knowledge/candidateStore";
+
+export const Route = createFileRoute("/api/knowledge/sessions/$sessionId/candidates")({
+  server: {
+    handlers: {
+      POST: ({ params }: { params: { sessionId: string } }) => {
+        const logs = getFilteredLogs(params.sessionId);
+        const candidates = saveCandidates(distillSessionCandidates(params.sessionId, logs));
+        return Response.json({ candidates });
+      },
+    },
+  },
+});

package/src/routes/api/logs.$id.chunks.ts

@@ -0,0 +1,36 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { getLogById } from "../../proxy/store";
+import { readChunks } from "../../proxy/chunkStorage";
+
+export const Route = createFileRoute("/api/logs/$id/chunks")({
+  server: {
+    handlers: {
+      GET: async ({ params }: { params: { id: string } }) => {
+        const id = Number(params.id);
+        if (isNaN(id)) {
+          return Response.json({ error: "Invalid log ID" }, { status: 400 });
+        }
+
+        const log = await getLogById(id);
+        if (log === null) {
+          return Response.json({ error: "Log not found" }, { status: 404 });
+        }
+
+        // Try disk file first (persistent chunks from real proxy streaming)
+        if (log.streamingChunksPath !== null && log.streamingChunksPath !== undefined) {
+          const chunksData = readChunks(log.streamingChunksPath);
+          if (chunksData !== null) {
+            return Response.json(chunksData);
+          }
+        }
+
+        // Fall back to in-memory streamingChunks (e.g., from provider test)
+        if (log.streamingChunks !== undefined && log.streamingChunks.chunks.length > 0) {
+          return Response.json(log.streamingChunks);
+        }
+
+        return Response.json({ error: "Chunks not found" }, { status: 404 });
+      },
+    },
+  },
+});

package/src/routes/api/logs.$id.replay.ts

@@ -0,0 +1,191 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { z } from "zod";
+import { getLogById } from "../../proxy/store";
+import { findProviderByModel } from "../../proxy/providers";
+import { registry } from "../../proxy/formats";
+import { formatForPath } from "../../proxy/formats";
+import { extractModelFromBody } from "../../proxy/schemas";
+import {
+  PROXY_IDENTITY,
+  PRESERVE_HEADERS,
+  HEADER_CONTENT_TYPE,
+  HEADER_USER_AGENT,
+  HEADER_X_PROXY_IDENTITY,
+  CONTENT_TYPE_EVENT_STREAM,
+  STATUS_FORBIDDEN,
+} from "../../proxy/constants";
+import {
+  buildUpstreamUrl,
+  describeApiRoute,
+  injectProviderAuth,
+  selectUpstreamBase,
+  setUpstreamHost,
+} from "../../proxy/upstream";
+
+type ReplayRequest = {
+  modifiedBody: string;
+};
+
+const ReplayRequestSchema = z.object({
+  modifiedBody: z.string(),
+});
+
+type ReplayResponse = {
+  success: boolean;
+  error?: string;
+  responseStatus?: number;
+  responseText?: string;
+  inputTokens?: number;
+  outputTokens?: number;
+  elapsedMs?: number;
+  streaming?: boolean;
+};
+
+export const Route = createFileRoute("/api/logs/$id/replay")({
+  server: {
+    handlers: {
+      POST: async ({ params, request }: { params: { id: string }; request: Request }) => {
+        const id = Number(params.id);
+        if (isNaN(id)) {
+          return Response.json({ error: "Invalid log ID" }, { status: 400 });
+        }
+
+        let replayRequest: ReplayRequest;
+        try {
+          const raw: unknown = await request.json();
+          const parsed = ReplayRequestSchema.safeParse(raw);
+          if (!parsed.success) {
+            return Response.json({ error: "Invalid request body" }, { status: 400 });
+          }
+          replayRequest = parsed.data;
+        } catch {
+          return Response.json({ error: "Invalid JSON body" }, { status: 400 });
+        }
+
+        const { modifiedBody } = replayRequest;
+
+        // Get original log for context
+        const log = await getLogById(id);
+        if (log === null) {
+          return Response.json({ error: "Log not found" }, { status: 404 });
+        }
+
+        // Extract model from modified body
+        const model = extractModelFromBody(modifiedBody);
+        if (model === null) {
+          return Response.json(
+            { error: "Could not extract model from request body" },
+            { status: 400 },
+          );
+        }
+
+        // Find provider
+        const matchedProviderConfig = findProviderByModel(model);
+        const provider = registry.findProvider(model);
+        if (provider === null) {
+          return Response.json(
+            { error: "No provider found for model" },
+            { status: STATUS_FORBIDDEN },
+          );
+        }
+
+        // Determine API path from original log
+        const route = describeApiRoute(log.path);
+
+        // Get format handler
+        const formatHandler = formatForPath(route.apiPath);
+        if (formatHandler === null) {
+          return Response.json({ error: "Unsupported path" }, { status: STATUS_FORBIDDEN });
+        }
+
+        // Build upstream URL
+        const upstreamBase = selectUpstreamBase(route, matchedProviderConfig);
+        const upstreamUrl = buildUpstreamUrl(upstreamBase, route.normalizedPath);
+
+        // Build headers
+        const headers = new Headers();
+        headers.set(HEADER_USER_AGENT, PROXY_IDENTITY);
+        headers.set(HEADER_X_PROXY_IDENTITY, PROXY_IDENTITY);
+        headers.set(HEADER_CONTENT_TYPE, "application/json");
+
+        for (const name of PRESERVE_HEADERS) {
+          const value = log.rawHeaders?.[name.toLowerCase()];
+          if (value !== undefined) {
+            headers.set(name, value);
+          }
+        }
+        setUpstreamHost(headers, upstreamBase);
+        injectProviderAuth(headers, matchedProviderConfig);
+
+        const startTime = Date.now();
+
+        // Send request
+        let upstreamRes: Response;
+        try {
+          upstreamRes = await fetch(upstreamUrl, {
+            method: "POST",
+            headers,
+            body: modifiedBody,
+          });
+        } catch (err) {
+          return Response.json({
+            success: false,
+            error: String(err),
+          } satisfies ReplayResponse);
+        }
+
+        const elapsedMs = Date.now() - startTime;
+        const isStream =
+          upstreamRes.headers.get(HEADER_CONTENT_TYPE)?.includes(CONTENT_TYPE_EVENT_STREAM) ??
+          false;
+
+        if (isStream) {
+          // Accumulate streaming response
+          const chunks: string[] = [];
+          const decoder = new TextDecoder();
+          const reader = upstreamRes.body?.getReader();
+          if (reader) {
+            try {
+              while (true) {
+                const { done, value } = await reader.read();
+                if (done) break;
+                chunks.push(decoder.decode(value, { stream: true }));
+              }
+            } catch {
+              // Stream read error
+            }
+          }
+          const fullResponse = chunks.join("");
+
+          // Create a mock log for streaming extraction
+          const mockLog: typeof log = { ...log };
+          const responseText = formatHandler.extractStream(fullResponse, mockLog, model, false);
+          const tokens = formatHandler.extractTokens(responseText);
+
+          return Response.json({
+            success: true,
+            responseStatus: upstreamRes.status,
+            responseText,
+            inputTokens: tokens.inputTokens ?? undefined,
+            outputTokens: tokens.outputTokens ?? undefined,
+            elapsedMs,
+            streaming: true,
+          } satisfies ReplayResponse);
+        } else {
+          const responseText = await upstreamRes.text();
+          const tokens = formatHandler.extractTokens(responseText);
+
+          return Response.json({
+            success: true,
+            responseStatus: upstreamRes.status,
+            responseText,
+            inputTokens: tokens.inputTokens ?? undefined,
+            outputTokens: tokens.outputTokens ?? undefined,
+            elapsedMs,
+            streaming: false,
+          } satisfies ReplayResponse);
+        }
+      },
+    },
+  },
+});

package/src/routes/api/logs.$id.ts

@@ -0,0 +1,22 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { getLogById } from "../../proxy/store";
+
+export const Route = createFileRoute("/api/logs/$id")({
+  server: {
+    handlers: {
+      GET: async ({ params }: { params: { id: string } }) => {
+        const id = Number(params.id);
+        if (isNaN(id)) {
+          return Response.json({ error: "Invalid ID" }, { status: 400 });
+        }
+
+        const log = await getLogById(id);
+        if (log === null) {
+          return Response.json({ error: "Log not found" }, { status: 404 });
+        }
+
+        return Response.json(log);
+      },
+    },
+  },
+});

package/src/routes/api/logs.stream.ts

@@ -0,0 +1,74 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { onLogUpdate, getFilteredLogs, getLogSessionId } from "../../proxy/store";
+import { type CapturedLog } from "../../proxy/schemas";
+
+export const Route = createFileRoute("/api/logs/stream")({
+  server: {
+    handlers: {
+      GET: ({ request }: { request: Request }) => {
+        const url = new URL(request.url);
+        const sessionId = url.searchParams.get("sessionId") ?? undefined;
+        const model = url.searchParams.get("model") ?? undefined;
+
+        let controllerRef: ReadableStreamDefaultController<Uint8Array> | null = null;
+        let cleanedUp = false;
+
+        const unsubscribe = onLogUpdate((log: CapturedLog) => {
+          if (controllerRef === null) return;
+          // Filter by session/model if specified
+          if (sessionId !== undefined && getLogSessionId(log) !== sessionId) return;
+          if (model !== undefined && log.model !== model) return;
+          try {
+            const data = `data: ${JSON.stringify({ type: "update", log })}\n\n`;
+            controllerRef.enqueue(new TextEncoder().encode(data));
+          } catch {
+            cleanup();
+          }
+        });
+
+        const cleanup = (): void => {
+          if (cleanedUp) return;
+          cleanedUp = true;
+          clearInterval(heartbeat);
+          unsubscribe();
+          controllerRef = null;
+          request.signal.removeEventListener("abort", cleanup);
+        };
+
+        // Send heartbeat comment every 30s to keep connection alive
+        const heartbeat = setInterval(() => {
+          if (controllerRef !== null) {
+            try {
+              controllerRef.enqueue(new TextEncoder().encode(": heartbeat\n\n"));
+            } catch {
+              cleanup();
+            }
+          }
+        }, 30000);
+
+        request.signal.addEventListener("abort", cleanup, { once: true });
+
+        const stream = new ReadableStream<Uint8Array>({
+          start(controller) {
+            controllerRef = controller;
+            // Send initial batch of logs immediately
+            const logs = getFilteredLogs(sessionId, model);
+            const initData = `data: ${JSON.stringify({ type: "init", logs })}\n\n`;
+            controller.enqueue(new TextEncoder().encode(initData));
+          },
+          cancel() {
+            cleanup();
+          },
+        });
+
+        return new Response(stream, {
+          headers: {
+            "Content-Type": "text/event-stream",
+            "Cache-Control": "no-cache",
+            Connection: "keep-alive",
+          },
+        });
+      },
+    },
+  },
+});