cc-inspector 0.1.0

package/src/components/ui/tabs.tsx

@@ -0,0 +1,88 @@
+"use client";
+
+import { cva, type VariantProps } from "class-variance-authority";
+import { Tabs as TabsPrimitive } from "radix-ui";
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+function Tabs({
+  className,
+  orientation = "horizontal",
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Root>): React.JSX.Element {
+  return (
+    <TabsPrimitive.Root
+      data-slot="tabs"
+      data-orientation={orientation}
+      orientation={orientation}
+      className={cn("group/tabs flex gap-2 data-[orientation=horizontal]:flex-col", className)}
+      {...props}
+    />
+  );
+}
+
+const tabsListVariants = cva(
+  "rounded-lg p-[3px] group-data-[orientation=horizontal]/tabs:h-9 data-[variant=line]:rounded-none group/tabs-list text-muted-foreground inline-flex w-fit items-center justify-center group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col",
+  {
+    variants: {
+      variant: {
+        default: "bg-muted",
+        line: "gap-1 bg-transparent",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+function TabsList({
+  className,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.List> &
+  VariantProps<typeof tabsListVariants>): React.JSX.Element {
+  return (
+    <TabsPrimitive.List
+      data-slot="tabs-list"
+      data-variant={variant}
+      className={cn(tabsListVariants({ variant }), className)}
+      {...props}
+    />
+  );
+}
+
+function TabsTrigger({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Trigger>): React.JSX.Element {
+  return (
+    <TabsPrimitive.Trigger
+      data-slot="tabs-trigger"
+      className={cn(
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring text-foreground/60 hover:text-foreground dark:text-muted-foreground dark:hover:text-foreground relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:border-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent",
+        "data-[state=active]:bg-background dark:data-[state=active]:text-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 data-[state=active]:text-foreground",
+        "after:bg-foreground after:absolute after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-[state=active]:after:opacity-100",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function TabsContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof TabsPrimitive.Content>): React.JSX.Element {
+  return (
+    <TabsPrimitive.Content
+      data-slot="tabs-content"
+      className={cn("flex-1 outline-none", className)}
+      {...props}
+    />
+  );
+}
+
+export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants };

package/src/components/ui/tooltip.tsx

@@ -0,0 +1,51 @@
+import * as React from "react";
+import { Tooltip as TooltipPrimitive } from "radix-ui";
+
+import { cn } from "@/lib/utils";
+
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delayDuration={delayDuration}
+      {...props}
+    />
+  );
+}
+
+function Tooltip({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+  return <TooltipPrimitive.Root data-slot="tooltip" {...props} />;
+}
+
+function TooltipTrigger({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
+}
+
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        data-slot="tooltip-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        <TooltipPrimitive.Arrow className="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  );
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };

package/src/frontend.tsx

@@ -0,0 +1,26 @@
+/**
+ * This file is the entry point for the React app, it sets up the root
+ * element and renders the App component to the DOM.
+ *
+ * It is included in `src/index.html`.
+ */
+
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { App } from "./App";
+
+const elem = document.getElementById("root")!;
+const app = (
+  <StrictMode>
+    <App />
+  </StrictMode>
+);
+
+if (import.meta.hot) {
+  // With hot module reloading, `import.meta.hot.data` is persisted.
+  const root = (import.meta.hot.data.root ??= createRoot(elem));
+  root.render(app);
+} else {
+  // The hot module reloading API is not available in production.
+  createRoot(elem).render(app);
+}

package/src/index.css

@@ -0,0 +1,11 @@
+@import "../styles/globals.css";
+
+@layer base {
+  :root {
+    @apply font-sans;
+  }
+
+  body {
+    @apply min-w-[320px] min-h-screen m-0 bg-background text-foreground;
+  }
+}

package/src/index.html

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Bun + React</title>
+    <script type="module" src="./frontend.tsx" async></script>
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>

package/src/index.ts

@@ -0,0 +1,56 @@
+#!/usr/bin/env bun
+import { serve } from "bun";
+import index from "./index.html";
+import { handleProxy } from "./proxy/handler";
+import { getFilteredLogs, getModels, getSessions } from "./proxy/store";
+
+const server = serve({
+  port: 25947,
+  routes: {
+    "/api/hello": {
+      GET(_req) {
+        return Response.json({
+          message: "Hello, world!",
+          method: "GET",
+        });
+      },
+      PUT(_req) {
+        return Response.json({
+          message: "Hello, world!",
+          method: "PUT",
+        });
+      },
+    },
+
+    "/api/hello/:name": (req) => {
+      const name = req.params.name;
+      return Response.json({
+        message: `Hello, ${name}!`,
+      });
+    },
+
+    "/api/logs": (req) => {
+      const url = new URL(req.url);
+      const sessionId = url.searchParams.get("sessionId") ?? undefined;
+      const model = url.searchParams.get("model") ?? undefined;
+      return Response.json(getFilteredLogs(sessionId, model));
+    },
+
+    "/api/sessions": () => Response.json(getSessions()),
+
+    "/api/models": () => Response.json(getModels()),
+
+    "/proxy/*": (req) => handleProxy(req),
+
+    "/*": index,
+  },
+
+  development: process.env.NODE_ENV !== "production" && {
+    hmr: true,
+    console: true,
+  },
+});
+
+console.log(`🚀 Server running at ${server.url}`);
+console.log(`   Proxy: ${server.url}proxy`);
+console.log(`   Configure: ANTHROPIC_BASE_URL=${server.url}proxy claude`);

package/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]): string {
+  return twMerge(clsx(inputs));
+}

package/src/proxy/handler.ts

@@ -0,0 +1,146 @@
+import { createLog, type CapturedLog } from "./store";
+import { ClaudeResponseSchema, SseEventSchema } from "./schemas";
+
+const UPSTREAM = "https://api.anthropic.com";
+
+const STRIP_REQUEST_HEADERS = new Set([
+  "host",
+  "connection",
+  "keep-alive",
+  "transfer-encoding",
+  "te",
+  "upgrade",
+  "proxy-authorization",
+  "proxy-connection",
+]);
+
+function extractStreamContent(raw: string, log: CapturedLog): string {
+  const textParts: string[] = [];
+
+  for (const line of raw.split("\n")) {
+    if (!line.startsWith("data: ")) continue;
+    try {
+      const json: unknown = JSON.parse(line.slice(6));
+      const parsed = SseEventSchema.safeParse(json);
+      if (!parsed.success) continue;
+      const data = parsed.data;
+      if (data.type === "message_start") {
+        log.inputTokens = data.message.usage.input_tokens;
+        if (log.model === null) log.model = data.message.model;
+      }
+      if (data.type === "content_block_delta" && data.delta.type === "text_delta") {
+        textParts.push(data.delta.text);
+      }
+      if (data.type === "message_delta") {
+        log.outputTokens = data.usage.output_tokens;
+      }
+    } catch {
+      // non-JSON SSE line, skip
+    }
+  }
+
+  return textParts.join("");
+}
+
+export async function handleProxy(req: Request): Promise<Response> {
+  const url = new URL(req.url);
+  const apiPath = url.pathname.replace(/^\/proxy/, "") + url.search;
+  const upstreamUrl = UPSTREAM + apiPath;
+  const startTime = Date.now();
+
+  const upstreamHeaders = new Headers();
+  req.headers.forEach((v, k) => {
+    if (!STRIP_REQUEST_HEADERS.has(k)) {
+      upstreamHeaders.set(k, v);
+    }
+  });
+  upstreamHeaders.set("host", "api.anthropic.com");
+  upstreamHeaders.delete("accept-encoding");
+
+  let requestBody: string | null = null;
+  if (req.body && req.method !== "GET" && req.method !== "HEAD") {
+    requestBody = await req.text();
+  }
+
+  const messagesPath = apiPath.split("?")[0];
+  const isMessages = req.method === "POST" && messagesPath === "/v1/messages";
+  const log = isMessages ? createLog(req.method, apiPath, requestBody) : null;
+
+  let upstreamRes: Response;
+  try {
+    upstreamRes = await fetch(upstreamUrl, {
+      method: req.method,
+      headers: upstreamHeaders,
+      body: requestBody,
+    });
+  } catch (err) {
+    if (log) {
+      log.elapsedMs = Date.now() - startTime;
+      log.responseStatus = 502;
+      log.responseText = String(err);
+    }
+    return new Response(`Proxy error: ${err}`, { status: 502 });
+  }
+
+  const responseHeaders = new Headers(upstreamRes.headers);
+  responseHeaders.delete("content-encoding");
+  responseHeaders.delete("content-length");
+
+  const isStream = upstreamRes.headers.get("content-type")?.includes("text/event-stream") ?? false;
+
+  if (!isStream) {
+    const responseBody = await upstreamRes.text();
+    if (log) {
+      log.elapsedMs = Date.now() - startTime;
+      log.responseStatus = upstreamRes.status;
+      try {
+        const json: unknown = JSON.parse(responseBody);
+        log.responseText = JSON.stringify(json);
+        const parsed = ClaudeResponseSchema.safeParse(json);
+        if (parsed.success) {
+          log.inputTokens = parsed.data.usage.input_tokens;
+          log.outputTokens = parsed.data.usage.output_tokens;
+        }
+      } catch {
+        log.responseText = responseBody;
+      }
+    }
+    return new Response(responseBody, {
+      status: upstreamRes.status,
+      headers: responseHeaders,
+    });
+  }
+
+  if (log) {
+    log.streaming = true;
+    log.responseStatus = upstreamRes.status;
+  }
+
+  const chunks: string[] = [];
+  const decoder = new TextDecoder();
+
+  const transform = new TransformStream<Uint8Array, Uint8Array>({
+    transform(chunk, controller) {
+      controller.enqueue(chunk);
+      chunks.push(decoder.decode(chunk, { stream: true }));
+    },
+    flush() {
+      if (log) {
+        const full = chunks.join("");
+        log.elapsedMs = Date.now() - startTime;
+        log.responseText = extractStreamContent(full, log);
+      }
+    },
+  });
+
+  if (upstreamRes.body === null) {
+    return new Response("No response body", { status: 502 });
+  }
+
+  const loggedStream = upstreamRes.body.pipeThrough(transform);
+
+  return new Response(loggedStream, {
+    status: upstreamRes.status,
+    headers: responseHeaders,
+  });
+}

package/src/proxy/schemas.ts

@@ -0,0 +1,241 @@
+import { z } from "zod";
+
+type JsonValue = string | number | boolean | null | JsonValue[] | { [key: string]: JsonValue };
+
+const JsonValueSchema: z.ZodType<JsonValue> = z.lazy(() =>
+  z.union([
+    z.string(),
+    z.number(),
+    z.boolean(),
+    z.null(),
+    z.array(JsonValueSchema),
+    z.record(z.string(), JsonValueSchema),
+  ]),
+);
+
+const CacheControl = z.object({
+  type: z.string(),
+  ttl: z.string(),
+  scope: z.string().optional(),
+});
+
+const TextContentBlock = z.object({
+  type: z.literal("text"),
+  text: z.string(),
+  cache_control: CacheControl.optional(),
+});
+
+const ThinkingContentBlock = z.object({
+  type: z.literal("thinking"),
+  thinking: z.string(),
+  signature: z.string().optional(),
+});
+
+const ImageSourceBlock = z.object({
+  type: z.literal("base64"),
+  media_type: z.string(),
+  data: z.string(),
+});
+
+const ImageContentBlock = z.object({
+  type: z.literal("image"),
+  source: ImageSourceBlock,
+});
+
+const ToolUseContentBlock = z.object({
+  type: z.literal("tool_use"),
+  id: z.string(),
+  name: z.string(),
+  input: z.record(z.string(), JsonValueSchema),
+});
+
+const ToolResultContentItem = z.discriminatedUnion("type", [TextContentBlock, ImageContentBlock]);
+
+const ToolResultContentBlock = z.object({
+  type: z.literal("tool_result"),
+  tool_use_id: z.string().optional(),
+  content: z.union([z.string(), z.array(ToolResultContentItem)]),
+  is_error: z.boolean().optional(),
+});
+
+const ContentBlock = z.discriminatedUnion("type", [
+  TextContentBlock,
+  ThinkingContentBlock,
+  ImageContentBlock,
+  ToolUseContentBlock,
+  ToolResultContentBlock,
+]);
+
+const MessageContent = z.union([z.string(), z.array(ContentBlock)]);
+
+const Message = z.object({
+  role: z.enum(["user", "assistant"]),
+  content: MessageContent,
+});
+
+const SystemBlock = z.object({
+  type: z.literal("text"),
+  text: z.string(),
+  cache_control: CacheControl.optional(),
+});
+
+const InputSchema = z.object({
+  type: z.string(),
+  properties: z.record(z.string(), z.record(z.string(), JsonValueSchema)),
+  required: z.array(z.string()).optional(),
+  additionalProperties: z.boolean().optional(),
+  $schema: z.string().optional(),
+});
+
+const ToolDefinition = z.object({
+  name: z.string(),
+  description: z.string().optional(),
+  input_schema: InputSchema.optional(),
+  cache_control: CacheControl.optional(),
+});
+
+const ThinkingConfig = z.discriminatedUnion("type", [
+  z.object({ type: z.literal("enabled"), budget_tokens: z.number() }),
+  z.object({ type: z.literal("disabled") }),
+  z.object({ type: z.literal("adaptive") }),
+]);
+
+export const ClaudeRequestSchema = z.object({
+  model: z.string(),
+  messages: z.array(Message),
+  system: z.array(SystemBlock).optional(),
+  tools: z.array(ToolDefinition).optional(),
+  max_tokens: z.number().optional(),
+  temperature: z.number().optional(),
+  stream: z.boolean().optional(),
+  thinking: ThinkingConfig.optional(),
+  metadata: z
+    .object({
+      user_id: z.string().optional(),
+    })
+    .optional(),
+});
+
+const ResponseContentBlock = z.discriminatedUnion("type", [
+  TextContentBlock,
+  ThinkingContentBlock,
+  ToolUseContentBlock,
+]);
+
+const ResponseUsageSchema = z.object({
+  input_tokens: z.number(),
+  output_tokens: z.number(),
+});
+
+export const ClaudeResponseSchema = z.object({
+  id: z.string(),
+  type: z.literal("message"),
+  model: z.string(),
+  role: z.literal("assistant"),
+  content: z.array(ResponseContentBlock),
+  stop_reason: z.string().nullable(),
+  stop_sequence: z.string().nullable(),
+  usage: ResponseUsageSchema,
+});
+
+const SseMessageStartEvent = z.object({
+  type: z.literal("message_start"),
+  message: z.object({
+    id: z.string(),
+    type: z.literal("message"),
+    model: z.string(),
+    role: z.literal("assistant"),
+    content: z.array(ResponseContentBlock),
+    stop_reason: z.null(),
+    stop_sequence: z.null(),
+    usage: z.object({ input_tokens: z.number() }),
+  }),
+});
+
+const SseContentBlockStartEvent = z.object({
+  type: z.literal("content_block_start"),
+  index: z.number(),
+  content_block: ResponseContentBlock,
+});
+
+const SseDeltaBlock = z.discriminatedUnion("type", [
+  z.object({ type: z.literal("text_delta"), text: z.string() }),
+  z.object({ type: z.literal("input_json_delta"), partial_json: z.string() }),
+  z.object({ type: z.literal("thinking_delta"), thinking: z.string() }),
+  z.object({ type: z.literal("signature_delta"), signature: z.string() }),
+]);
+
+const SseContentBlockDeltaEvent = z.object({
+  type: z.literal("content_block_delta"),
+  index: z.number(),
+  delta: SseDeltaBlock,
+});
+
+const SseContentBlockStopEvent = z.object({
+  type: z.literal("content_block_stop"),
+  index: z.number(),
+});
+
+const SseMessageDeltaEvent = z.object({
+  type: z.literal("message_delta"),
+  delta: z.object({
+    stop_reason: z.string().nullable(),
+    stop_sequence: z.string().nullable(),
+  }),
+  usage: z.object({ output_tokens: z.number() }),
+});
+
+const SseMessageStopEvent = z.object({
+  type: z.literal("message_stop"),
+});
+
+const SsePingEvent = z.object({
+  type: z.literal("ping"),
+});
+
+export const SseEventSchema = z.discriminatedUnion("type", [
+  SseMessageStartEvent,
+  SseContentBlockStartEvent,
+  SseContentBlockDeltaEvent,
+  SseContentBlockStopEvent,
+  SseMessageDeltaEvent,
+  SseMessageStopEvent,
+  SsePingEvent,
+]);
+
+export const CapturedLogSchema = z.object({
+  id: z.number(),
+  timestamp: z.string(),
+  method: z.string(),
+  path: z.string(),
+  model: z.string().nullable(),
+  sessionId: z.string().nullable(),
+  rawRequestBody: z.string().nullable(),
+  responseStatus: z.number().nullable(),
+  responseText: z.string().nullable(),
+  inputTokens: z.number().nullable(),
+  outputTokens: z.number().nullable(),
+  elapsedMs: z.number().nullable(),
+  streaming: z.boolean(),
+});
+
+export function parseRequest(rawBody: string | null): ClaudeRequest | null {
+  if (rawBody === null) return null;
+  try {
+    const json: unknown = JSON.parse(rawBody);
+    const result = ClaudeRequestSchema.safeParse(json);
+    if (result.success) return result.data;
+    return null;
+  } catch {
+    return null;
+  }
+}
+
+export type ClaudeRequest = z.infer<typeof ClaudeRequestSchema>;
+export type ClaudeResponse = z.infer<typeof ClaudeResponseSchema>;
+export type CapturedLog = z.infer<typeof CapturedLogSchema>;
+export type ContentBlockType = z.infer<typeof ContentBlock>;
+export type ResponseContentBlockType = z.infer<typeof ResponseContentBlock>;
+export type MessageType = z.infer<typeof Message>;
+export type SystemBlockType = z.infer<typeof SystemBlock>;
+export type ToolDefinitionType = z.infer<typeof ToolDefinition>;