@tonyclaw/agent-inspector 2.0.0

package/src/routes/api/logs.ts

@@ -0,0 +1,59 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { z } from "zod";
+import { clearAllLogs, clearLogsByIds, getFilteredLogs } from "../../proxy/store";
+
+const DeleteBodySchema = z
+  .object({
+    ids: z.array(z.number().int().positive()).optional(),
+  })
+  .optional();
+
+export const Route = createFileRoute("/api/logs")({
+  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;
+        const offset = Number(url.searchParams.get("offset") ?? 0);
+        const limit = Number(url.searchParams.get("limit") ?? 50);
+
+        const allLogs = getFilteredLogs(sessionId, model);
+        const paginatedLogs = allLogs.slice(offset, offset + limit);
+
+        return Response.json({
+          logs: paginatedLogs,
+          total: allLogs.length,
+          offset,
+          limit,
+        });
+      },
+      DELETE: async ({ request }: { request: Request }) => {
+        let body: z.infer<typeof DeleteBodySchema> = undefined;
+        try {
+          const raw = await request.text();
+          if (raw !== "") {
+            const parsed: unknown = JSON.parse(raw);
+            const result = DeleteBodySchema.safeParse(parsed);
+            if (!result.success) {
+              return Response.json(
+                { error: "Invalid request body", details: result.error.format() },
+                { status: 400 },
+              );
+            }
+            body = result.data;
+          }
+        } catch {
+          return Response.json({ error: "Invalid JSON body" }, { status: 400 });
+        }
+
+        if (body?.ids !== undefined && body.ids.length > 0) {
+          const result = clearLogsByIds(body.ids);
+          return Response.json({ success: true, cleared: result.cleared });
+        }
+        const result = clearAllLogs();
+        return Response.json({ success: true, cleared: result.cleared });
+      },
+    },
+  },
+});

package/src/routes/api/mcp.ts

@@ -0,0 +1,25 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { handleMcpRequest } from "../../mcp/server";
+
+/**
+ * MCP HTTP Streamable transport endpoint. Mounted at `POST /api/mcp` on the
+ * existing TanStack Start HTTP server — see
+ * `openspec/changes/add-mcp-server/design.md` D1.
+ *
+ * All method/header routing is handled inside the SDK's
+ * `WebStandardStreamableHTTPServerTransport` (it dispatches GET for SSE
+ * stream, POST for client→server requests, DELETE for session close), so
+ * the route simply forwards the request.
+ */
+export const Route = createFileRoute("/api/mcp")({
+  server: {
+    handlers: {
+      // The SDK may issue either POST, GET, or DELETE. TanStack Start only
+      // requires us to declare the methods we accept; routing by method is
+      // handled inside the transport.
+      POST: ({ request }: { request: Request }) => handleMcpRequest(request),
+      GET: ({ request }: { request: Request }) => handleMcpRequest(request),
+      DELETE: ({ request }: { request: Request }) => handleMcpRequest(request),
+    },
+  },
+});

package/src/routes/api/models.ts

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

package/src/routes/api/providers.$providerId.test.log.ts

@@ -0,0 +1,293 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { getProvider, getModelUsageName } from "../../proxy/providers";
+import { appendLogEntry } from "../../proxy/logger";
+import { addTestLogEntry } from "../../proxy/store";
+import {
+  ProviderTestResultsSchema,
+  type ProviderTestResult as TestResult,
+  type ProviderTestState,
+} from "../../lib/providerTestContract";
+
+function hasSuccessField(result: ProviderTestState): result is TestResult {
+  return Object.prototype.hasOwnProperty.call(result, "success");
+}
+
+function createTestLogEntry(
+  providerName: string,
+  path: string,
+  body: string,
+  upstreamUrl: string,
+  result: TestResult,
+  isTest: boolean,
+): Record<string, unknown> {
+  return {
+    timestamp: new Date().toISOString(),
+    id: `test-${Date.now()}`,
+    method: "POST",
+    path,
+    model: isTest ? result.model : undefined,
+    sessionId: null,
+    rawRequestBody: body,
+    responseStatus: result.success ? 200 : 500,
+    responseText: result.rawResponse ?? JSON.stringify(result),
+    inputTokens: result.inputTokens ?? null,
+    outputTokens: result.outputTokens ?? null,
+    elapsedMs: result.latencyMs ?? 0,
+    streaming: result.streaming ?? false,
+    userAgent: "provider-test",
+    origin: null,
+    upstreamUrl,
+    error: result.success ? null : (result.error?.message ?? String(result.error)),
+    isTest: true,
+    providerName,
+    headers: result.requestHeaders ?? {},
+  };
+}
+
+async function logModelResults(
+  displayName: string,
+  providerName: string,
+  anthropicUrl: string | undefined,
+  openaiUrl: string | undefined,
+  modelResults: {
+    anthropic: { nonStreaming: ProviderTestState; streaming: ProviderTestState };
+    openai: { nonStreaming: ProviderTestState; streaming: ProviderTestState };
+  },
+): Promise<void> {
+  const usageModel = getModelUsageName(displayName, providerName);
+
+  if (anthropicUrl !== undefined) {
+    const nsResult = modelResults.anthropic.nonStreaming;
+    const sResult = modelResults.anthropic.streaming;
+    if (hasSuccessField(nsResult) && hasSuccessField(sResult)) {
+      const nonStreamingResult = nsResult;
+      const streamingResult = sResult;
+
+      const requestBody = JSON.stringify({
+        model: usageModel,
+        messages: [{ role: "user", content: "say hello and briefly introduce yourself" }],
+        max_tokens: 1024,
+      });
+      const upstreamUrl = `${anthropicUrl}/v1/messages`;
+
+      await addTestLogEntry({
+        timestamp: new Date().toISOString(),
+        method: "POST",
+        path: "/v1/messages",
+        model: nonStreamingResult.model ?? displayName,
+        sessionId: null,
+        rawRequestBody: requestBody,
+        responseStatus: nonStreamingResult.success ? 200 : 500,
+        responseText: nonStreamingResult.rawResponse ?? JSON.stringify(nonStreamingResult),
+        inputTokens: nonStreamingResult.inputTokens ?? null,
+        outputTokens: nonStreamingResult.outputTokens ?? null,
+        cacheCreationInputTokens: nonStreamingResult.cacheCreationInputTokens ?? null,
+        cacheReadInputTokens: nonStreamingResult.cacheReadInputTokens ?? null,
+        elapsedMs: nonStreamingResult.latencyMs ?? 0,
+        streaming: false,
+        userAgent: "provider-test",
+        origin: null,
+        apiFormat: "anthropic",
+        isTest: true,
+        providerName,
+        headers: nonStreamingResult.requestHeaders ?? {},
+      });
+
+      appendLogEntry(
+        createTestLogEntry(
+          providerName,
+          "/v1/messages",
+          requestBody,
+          upstreamUrl,
+          nonStreamingResult,
+          true,
+        ),
+      );
+
+      const streamingRequestBody = JSON.stringify({
+        model: usageModel,
+        messages: [{ role: "user", content: "say hello" }],
+        max_tokens: 256,
+        stream: true,
+      });
+
+      await addTestLogEntry({
+        timestamp: new Date().toISOString(),
+        method: "POST",
+        path: "/v1/messages",
+        model: streamingResult.model ?? displayName,
+        sessionId: null,
+        rawRequestBody: streamingRequestBody,
+        responseStatus: streamingResult.success ? 200 : 500,
+        responseText: streamingResult.rawResponse ?? JSON.stringify(streamingResult),
+        inputTokens: streamingResult.inputTokens ?? null,
+        outputTokens: streamingResult.outputTokens ?? null,
+        cacheCreationInputTokens: streamingResult.cacheCreationInputTokens ?? null,
+        cacheReadInputTokens: streamingResult.cacheReadInputTokens ?? null,
+        elapsedMs: streamingResult.latencyMs ?? 0,
+        streaming: true,
+        streamingChunks: streamingResult.streamingChunks,
+        userAgent: "provider-test",
+        origin: null,
+        apiFormat: "anthropic",
+        isTest: true,
+        providerName,
+        headers: streamingResult.requestHeaders ?? {},
+      });
+
+      appendLogEntry(
+        createTestLogEntry(
+          providerName,
+          "/v1/messages",
+          streamingRequestBody,
+          upstreamUrl,
+          streamingResult,
+          true,
+        ),
+      );
+    }
+  }
+
+  if (openaiUrl !== undefined) {
+    const nsResult = modelResults.openai.nonStreaming;
+    const sResult = modelResults.openai.streaming;
+    if (hasSuccessField(nsResult) && hasSuccessField(sResult)) {
+      const nonStreamingResult = nsResult;
+      const streamingResult = sResult;
+
+      const requestBody = JSON.stringify({
+        model: usageModel,
+        messages: [{ role: "user", content: "say hello and briefly introduce yourself" }],
+        max_tokens: 1024,
+      });
+      const upstreamUrl = `${openaiUrl}/v1/chat/completions`;
+
+      await addTestLogEntry({
+        timestamp: new Date().toISOString(),
+        method: "POST",
+        path: "/v1/chat/completions",
+        model: nonStreamingResult.model ?? displayName,
+        sessionId: null,
+        rawRequestBody: requestBody,
+        responseStatus: nonStreamingResult.success ? 200 : 500,
+        responseText: nonStreamingResult.rawResponse ?? JSON.stringify(nonStreamingResult),
+        inputTokens: nonStreamingResult.inputTokens ?? null,
+        outputTokens: nonStreamingResult.outputTokens ?? null,
+        cacheCreationInputTokens: null,
+        cacheReadInputTokens: null,
+        elapsedMs: nonStreamingResult.latencyMs ?? 0,
+        streaming: false,
+        userAgent: "provider-test",
+        origin: null,
+        apiFormat: "openai",
+        isTest: true,
+        providerName,
+        headers: nonStreamingResult.requestHeaders ?? {},
+      });
+
+      appendLogEntry(
+        createTestLogEntry(
+          providerName,
+          "/v1/chat/completions",
+          requestBody,
+          upstreamUrl,
+          nonStreamingResult,
+          true,
+        ),
+      );
+
+      const streamingRequestBody = JSON.stringify({
+        model: usageModel,
+        messages: [{ role: "user", content: "say hello" }],
+        max_tokens: 256,
+        stream: true,
+      });
+
+      await addTestLogEntry({
+        timestamp: new Date().toISOString(),
+        method: "POST",
+        path: "/v1/chat/completions",
+        model: streamingResult.model ?? displayName,
+        sessionId: null,
+        rawRequestBody: streamingRequestBody,
+        responseStatus: streamingResult.success ? 200 : 500,
+        responseText: streamingResult.rawResponse ?? JSON.stringify(streamingResult),
+        inputTokens: streamingResult.inputTokens ?? null,
+        outputTokens: streamingResult.outputTokens ?? null,
+        cacheCreationInputTokens: null,
+        cacheReadInputTokens: null,
+        elapsedMs: streamingResult.latencyMs ?? 0,
+        streaming: true,
+        streamingChunks: streamingResult.streamingChunks,
+        userAgent: "provider-test",
+        origin: null,
+        apiFormat: "openai",
+        isTest: true,
+        providerName,
+        headers: streamingResult.requestHeaders ?? {},
+      });
+
+      appendLogEntry(
+        createTestLogEntry(
+          providerName,
+          "/v1/chat/completions",
+          streamingRequestBody,
+          upstreamUrl,
+          streamingResult,
+          true,
+        ),
+      );
+    }
+  }
+}
+
+export const Route = createFileRoute("/api/providers/$providerId/test/log")({
+  server: {
+    handlers: {
+      POST: async ({ params, request }: { params: { providerId: string }; request: Request }) => {
+        const provider = getProvider(params.providerId);
+        if (!provider) {
+          return Response.json({ error: "Provider not found" }, { status: 404 });
+        }
+
+        let body: unknown;
+        try {
+          body = await request.json();
+        } catch {
+          return Response.json({ error: "Invalid JSON body" }, { status: 400 });
+        }
+
+        const parsed = ProviderTestResultsSchema.safeParse(body);
+        if (!parsed.success) {
+          return Response.json(
+            { error: `Invalid test results: ${parsed.error.message}` },
+            { status: 400 },
+          );
+        }
+
+        const results = parsed.data;
+        const anthropicUrl =
+          provider.anthropicBaseUrl !== undefined && provider.anthropicBaseUrl.length > 0
+            ? provider.anthropicBaseUrl
+            : undefined;
+        const openaiUrl =
+          provider.openaiBaseUrl !== undefined && provider.openaiBaseUrl.length > 0
+            ? provider.openaiBaseUrl
+            : undefined;
+
+        const entries: Promise<void>[] = [];
+        if (results.models !== undefined) {
+          for (const [modelName, modelResult] of Object.entries(results.models)) {
+            entries.push(
+              logModelResults(modelName, provider.name, anthropicUrl, openaiUrl, modelResult),
+            );
+          }
+        }
+
+        await Promise.all(entries);
+
+        return Response.json({ logged: entries.length });
+      },
+    },
+  },
+});

package/src/routes/api/providers.$providerId.ts

@@ -0,0 +1,50 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { z } from "zod";
+import { getProviders, updateProvider, deleteProvider } from "../../proxy/providers";
+
+const ProviderUpdateSchema = z.object({
+  name: z.string().min(1, "Name is required").optional(),
+  apiKey: z.string().min(1, "API key is required").optional(),
+  format: z.enum(["anthropic", "openai"]).optional(),
+  baseUrl: z.string().min(1, "Base URL is required").optional(),
+  model: z.string().optional(),
+  models: z.array(z.string()).optional(),
+  authHeader: z.enum(["bearer", "x-api-key"]).optional(),
+  anthropicBaseUrl: z.string().optional(),
+  openaiBaseUrl: z.string().optional(),
+  apiDocsUrl: z.string().optional(),
+  source: z.enum(["company", "personal"]).optional(),
+});
+
+export const Route = createFileRoute("/api/providers/$providerId")({
+  server: {
+    handlers: {
+      GET: ({ params }: { params: { providerId: string } }) => {
+        const providers = getProviders();
+        const provider = providers.find((p) => p.id === params.providerId);
+        if (!provider) {
+          return Response.json({ error: "Provider not found" }, { status: 404 });
+        }
+        return Response.json(provider);
+      },
+      PUT: async ({ params, request }: { params: { providerId: string }; request: Request }) => {
+        const parsed = ProviderUpdateSchema.safeParse(await request.json());
+        if (!parsed.success) {
+          return Response.json({ error: parsed.error.message }, { status: 400 });
+        }
+        const updated = updateProvider(params.providerId, parsed.data);
+        if (!updated) {
+          return Response.json({ error: "Provider not found" }, { status: 404 });
+        }
+        return Response.json(updated);
+      },
+      DELETE: ({ params }: { params: { providerId: string } }) => {
+        const deleted = deleteProvider(params.providerId);
+        if (!deleted) {
+          return Response.json({ error: "Provider not found" }, { status: 404 });
+        }
+        return Response.json({ success: true });
+      },
+    },
+  },
+});

package/src/routes/api/providers.export.ts

@@ -0,0 +1,26 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { exportProviders, exportProvidersWithKeys } from "../../proxy/providers";
+
+export const Route = createFileRoute("/api/providers/export")({
+  server: {
+    handlers: {
+      GET: ({ request }: { request: Request }) => {
+        const url = new URL(request.url);
+        const includeKeys = url.searchParams.get("includeKeys") === "true";
+
+        const json = includeKeys ? exportProvidersWithKeys() : exportProviders();
+
+        const filename = includeKeys
+          ? `agent-inspector-providers-${Date.now()}.json`
+          : `agent-inspector-providers-safe-${Date.now()}.json`;
+
+        return new Response(json, {
+          headers: {
+            "Content-Type": "application/json",
+            "Content-Disposition": `attachment; filename="${filename}"`,
+          },
+        });
+      },
+    },
+  },
+});

package/src/routes/api/providers.import.ts

@@ -0,0 +1,47 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { z } from "zod";
+import { importProviders } from "../../proxy/providers";
+
+const ImportRequestSchema = z.union([z.string(), z.object({ providers: z.unknown() })]);
+
+export const Route = createFileRoute("/api/providers/import")({
+  server: {
+    handlers: {
+      POST: async ({ request }: { request: Request }) => {
+        try {
+          const rawBody = await request.text();
+          let jsonContent: string;
+          try {
+            const parsedBody: unknown = JSON.parse(rawBody);
+            jsonContent = typeof parsedBody === "string" ? parsedBody : JSON.stringify(parsedBody);
+          } catch {
+            jsonContent = rawBody;
+          }
+
+          if (!jsonContent || jsonContent.trim() === "") {
+            return Response.json({ error: "No JSON content provided" }, { status: 400 });
+          }
+
+          const result = importProviders(jsonContent);
+
+          return Response.json({
+            success: result.imported > 0,
+            imported: result.imported,
+            errors: result.errors,
+            message:
+              result.imported > 0
+                ? `Successfully imported ${result.imported} provider(s)`
+                : result.errors.length > 0
+                  ? `Import completed with ${result.errors.length} error(s)`
+                  : "No providers imported",
+          });
+        } catch (err) {
+          return Response.json(
+            { error: `Failed to import: ${err instanceof Error ? err.message : String(err)}` },
+            { status: 400 },
+          );
+        }
+      },
+    },
+  },
+});

package/src/routes/api/providers.scan.ts

@@ -0,0 +1,23 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { scanExternalProviders } from "../../proxy/providerImporters";
+
+export const Route = createFileRoute("/api/providers/scan")({
+  server: {
+    handlers: {
+      GET: () => {
+        try {
+          const result = scanExternalProviders();
+          return Response.json({
+            providers: result.providers,
+            warnings: result.warnings,
+          });
+        } catch (err) {
+          return Response.json(
+            { error: `Scan failed: ${err instanceof Error ? err.message : String(err)}` },
+            { status: 500 },
+          );
+        }
+      },
+    },
+  },
+});

package/src/routes/api/providers.ts

@@ -0,0 +1,45 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { z } from "zod";
+import { getProviders, addProvider } from "../../proxy/providers";
+
+const ProviderInputSchema = z.object({
+  name: z.string().min(1, "Name is required"),
+  apiKey: z.string().min(1, "API key is required"),
+  format: z.enum(["anthropic", "openai"]).optional(),
+  anthropicBaseUrl: z.string().optional(),
+  openaiBaseUrl: z.string().optional(),
+  models: z.array(z.string()).min(1, "At least one model is required"),
+  model: z.string().optional(),
+  authHeader: z.enum(["bearer", "x-api-key"]).optional().default("bearer"),
+  apiDocsUrl: z.string().optional(),
+  source: z.enum(["company", "personal"]).optional(),
+});
+
+export const Route = createFileRoute("/api/providers")({
+  server: {
+    handlers: {
+      GET: () => {
+        return Response.json(getProviders());
+      },
+      POST: async ({ request }: { request: Request }) => {
+        const parsed = ProviderInputSchema.safeParse(await request.json());
+        if (!parsed.success) {
+          return Response.json({ error: parsed.error.message }, { status: 400 });
+        }
+        const newProvider = addProvider(
+          parsed.data.name,
+          parsed.data.apiKey,
+          parsed.data.format,
+          undefined, // baseUrl (legacy) — use format-specific URLs instead
+          parsed.data.models,
+          parsed.data.authHeader,
+          parsed.data.apiDocsUrl,
+          parsed.data.anthropicBaseUrl,
+          parsed.data.openaiBaseUrl,
+          parsed.data.source,
+        );
+        return Response.json(newProvider, { status: 201 });
+      },
+    },
+  },
+});

package/src/routes/api/sessions.ts

@@ -0,0 +1,17 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { getSessionSnapshots, getSessions } from "../../proxy/store";
+
+export const Route = createFileRoute("/api/sessions")({
+  server: {
+    handlers: {
+      GET: ({ request }: { request: Request }) => {
+        const url = new URL(request.url);
+        const details = url.searchParams.get("details");
+        if (details === "true" || details === "1") {
+          return Response.json(getSessionSnapshots());
+        }
+        return Response.json(getSessions());
+      },
+    },
+  },
+});

package/src/routes/index.tsx

@@ -0,0 +1,6 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { ProxyViewerContainer } from "../components/ProxyViewerContainer";
+
+export const Route = createFileRoute("/")({
+  component: ProxyViewerContainer,
+});

package/src/routes/proxy/$.ts

@@ -0,0 +1,15 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { handleProxy } from "../../proxy/handler";
+
+export const Route = createFileRoute("/proxy/$")({
+  server: {
+    handlers: {
+      GET: ({ request }: { request: Request }) => handleProxy(request),
+      POST: ({ request }: { request: Request }) => handleProxy(request),
+      PUT: ({ request }: { request: Request }) => handleProxy(request),
+      DELETE: ({ request }: { request: Request }) => handleProxy(request),
+      PATCH: ({ request }: { request: Request }) => handleProxy(request),
+      OPTIONS: ({ request }: { request: Request }) => handleProxy(request),
+    },
+  },
+});

package/src/routes/session/$sessionId.tsx

@@ -0,0 +1,23 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { ProxyViewerContainer } from "../../components/ProxyViewerContainer";
+import { decodeSessionIdFromPath, encodeSessionIdForPath } from "../../lib/sessionUrl";
+
+/**
+ * Per-session deep link: opens a page that is pre-scoped to a single
+ * session id. The path segment is base64url-encoded so JSON session blobs
+ * and Unicode project paths survive dev-server URL normalization.
+ */
+export const Route = createFileRoute("/session/$sessionId")({
+  component: SessionViewerRoute,
+  parseParams: (params) => ({
+    sessionId: decodeSessionIdFromPath(params.sessionId),
+  }),
+  stringifyParams: (params) => ({
+    sessionId: encodeSessionIdForPath(params.sessionId),
+  }),
+});
+
+function SessionViewerRoute(): React.JSX.Element {
+  const { sessionId } = Route.useParams();
+  return <ProxyViewerContainer key={sessionId} initialSessionId={sessionId} />;
+}