@tonyclaw/llm-inspector 1.6.0

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

@@ -0,0 +1,262 @@
+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, type FormatHandler } from "../../proxy/formats";
+import { extractModelFromBody } from "../../proxy/schemas";
+import {
+  DEFAULT_UPSTREAM,
+  DEFAULT_OPENAI_UPSTREAM,
+  PROXY_IDENTITY,
+  PRESERVE_HEADERS,
+  PATH_V1_CHAT_COMPLETIONS,
+  PATH_CHAT_COMPLETIONS,
+  PATH_V1_MESSAGES,
+  HEADER_CONTENT_TYPE,
+  HEADER_USER_AGENT,
+  HEADER_X_PROXY_IDENTITY,
+  HEADER_AUTHORIZATION,
+  HEADER_X_API_KEY,
+  HEADER_CONTENT_ENCODING,
+  HEADER_CONTENT_LENGTH,
+  HEADER_HOST,
+  AUTH_HEADER_X_API_KEY,
+  STATUS_FORBIDDEN,
+  STATUS_BAD_GATEWAY,
+} from "../../proxy/constants";
+
+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;
+};
+
+function getHostFromUrl(urlStr: string): string {
+  try {
+    const url = new URL(urlStr);
+    return url.host;
+  } catch {
+    return "api.anthropic.com";
+  }
+}
+
+function buildUpstreamUrl(upstreamBase: string, apiPath: string): string {
+  return upstreamBase + apiPath;
+}
+
+function selectUpstreamBase(
+  isChatCompletions: boolean,
+  matchedProviderConfig: ReturnType<typeof findProviderByModel>,
+): string {
+  let upstreamBase: string;
+
+  if (matchedProviderConfig) {
+    if (
+      isChatCompletions &&
+      matchedProviderConfig.openaiBaseUrl !== undefined &&
+      matchedProviderConfig.openaiBaseUrl !== ""
+    ) {
+      upstreamBase = matchedProviderConfig.openaiBaseUrl;
+    } else if (
+      !isChatCompletions &&
+      matchedProviderConfig.anthropicBaseUrl !== undefined &&
+      matchedProviderConfig.anthropicBaseUrl !== ""
+    ) {
+      upstreamBase = matchedProviderConfig.anthropicBaseUrl;
+    } else if (
+      matchedProviderConfig.baseUrl !== undefined &&
+      matchedProviderConfig.baseUrl !== ""
+    ) {
+      upstreamBase = matchedProviderConfig.baseUrl;
+    } else {
+      upstreamBase =
+        matchedProviderConfig.format === "openai" ? DEFAULT_OPENAI_UPSTREAM : DEFAULT_UPSTREAM;
+    }
+  } else {
+    upstreamBase = isChatCompletions ? DEFAULT_OPENAI_UPSTREAM : DEFAULT_UPSTREAM;
+  }
+
+  return upstreamBase;
+}
+
+function injectAuthHeaders(
+  upstreamHeaders: Headers,
+  matchedProviderConfig: ReturnType<typeof findProviderByModel>,
+): void {
+  if (!matchedProviderConfig) return;
+
+  const apiKey = matchedProviderConfig.apiKey.replace(/^Bearer\s+/i, "").trim();
+  if (matchedProviderConfig.authHeader === AUTH_HEADER_X_API_KEY) {
+    upstreamHeaders.set(HEADER_X_API_KEY, apiKey);
+    upstreamHeaders.delete(HEADER_AUTHORIZATION);
+  } else {
+    upstreamHeaders.set(HEADER_AUTHORIZATION, `Bearer ${apiKey}`);
+  }
+}
+
+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 apiPath = log.path;
+        const isChatCompletions =
+          apiPath === PATH_V1_CHAT_COMPLETIONS || apiPath === PATH_CHAT_COMPLETIONS;
+        const normalizedPath =
+          isChatCompletions && !apiPath.startsWith("/v1/") ? "/v1" + apiPath : apiPath;
+
+        // Get format handler
+        const formatHandler = formatForPath(apiPath);
+        if (formatHandler === null) {
+          return Response.json({ error: "Unsupported path" }, { status: STATUS_FORBIDDEN });
+        }
+
+        // Build upstream URL
+        const upstreamBase = selectUpstreamBase(isChatCompletions, matchedProviderConfig);
+        const upstreamUrl = buildUpstreamUrl(upstreamBase, normalizedPath);
+        const upstreamHost = getHostFromUrl(upstreamBase);
+
+        // 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);
+          }
+        }
+        headers.set(HEADER_HOST, upstreamHost);
+        injectAuthHeaders(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("text/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,64 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { onLogUpdate, getFilteredLogs } 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;
+
+        // Send heartbeat comment every 30s to keep connection alive
+        const heartbeat = setInterval(() => {
+          if (controllerRef) {
+            try {
+              controllerRef.enqueue(new TextEncoder().encode(": heartbeat\n\n"));
+            } catch {
+              // Stream closed
+            }
+          }
+        }, 30000);
+
+        const unsubscribe = onLogUpdate((log: CapturedLog) => {
+          if (!controllerRef) return;
+          // Filter by session/model if specified
+          if (sessionId !== undefined && log.sessionId !== 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 {
+            // Stream closed
+          }
+        });
+
+        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() {
+            clearInterval(heartbeat);
+            unsubscribe();
+            controllerRef = null;
+          },
+        });
+
+        return new Response(stream, {
+          headers: {
+            "Content-Type": "text/event-stream",
+            "Cache-Control": "no-cache",
+            Connection: "keep-alive",
+          },
+        });
+      },
+    },
+  },
+});

package/src/routes/api/logs.ts

@@ -0,0 +1,30 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { clearAllLogs, getFilteredLogs } from "../../proxy/store";
+
+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: () => {
+        const result = clearAllLogs();
+        return Response.json({ success: true, cleared: result.cleared });
+      },
+    },
+  },
+});

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.ts

@@ -0,0 +1,45 @@
+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().min(1, "Model is required").optional(),
+  authHeader: z.enum(["bearer", "x-api-key"]).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.ts

@@ -0,0 +1,37 @@
+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"]),
+  baseUrl: z.string().min(1, "Base URL is required"),
+  model: z.string().min(1, "Model is required"),
+  authHeader: z.enum(["bearer", "x-api-key"]).optional().default("bearer"),
+});
+
+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,
+          parsed.data.baseUrl,
+          parsed.data.model,
+          parsed.data.authHeader,
+        );
+        return Response.json(newProvider, { status: 201 });
+      },
+    },
+  },
+});

package/src/routes/api/sessions.ts

@@ -0,0 +1,10 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { getSessions } from "../../proxy/store";
+
+export const Route = createFileRoute("/api/sessions")({
+  server: {
+    handlers: {
+      GET: () => 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/styles/globals.css

@@ -0,0 +1,121 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+@plugin "@tailwindcss/typography";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --radius-sm: calc(var(--radius) - 4px);
+  --radius-md: calc(var(--radius) - 2px);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) + 4px);
+}
+
+:root {
+  --radius: 0.625rem;
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}