cc-inspector 0.1.0

package/README.md

@@ -0,0 +1,40 @@
+# cc-inspector
+
+A transparent proxy for the Anthropic Claude API that captures every request and response, letting you inspect system prompts, tool definitions, messages, and token usage in a web UI.
+
+Built for understanding what Claude Code sends to the API under the hood.
+
+## Quick Start
+
+```bash
+bunx cc-inspector
+```
+
+Then launch Claude Code through the proxy:
+
+```bash
+ANTHROPIC_BASE_URL=http://localhost:25947/proxy claude
+```
+
+Open http://localhost:25947 to see captured requests in real time.
+
+## What You Can See
+
+- **System prompts** — the full system message Claude Code sends, including CLAUDE.md contents and tool instructions
+- **Tool definitions** — every tool available to the model, with names, descriptions, and input schemas
+- **Messages** — the complete conversation history sent in each request, with renderers for text, thinking, tool_use, and tool_result blocks
+- **Token usage** — input/output token counts per request
+- **Streaming** — captures SSE streaming responses without buffering
+- **Filtering** — filter by session ID or model
+
+## How It Works
+
+The proxy sits between Claude Code and `api.anthropic.com`. Setting `ANTHROPIC_BASE_URL` tells Claude Code to send API requests to the proxy instead of directly to Anthropic. The proxy forwards everything to the real API and logs both the request and response.
+
+```
+Claude Code  →  cc-inspector (:25947/proxy/*)  →  api.anthropic.com
+                      ↓
+                Web UI (:25947)
+```
+
+Logs are stored in memory only and reset when the server restarts.

package/package.json

@@ -0,0 +1,77 @@
+{
+  "name": "cc-inspector",
+  "version": "0.1.0",
+  "type": "module",
+  "description": "Transparent proxy for the Anthropic Claude API that captures and displays requests/responses in a web UI",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/swen128/cc-inspector"
+  },
+  "keywords": [
+    "claude",
+    "anthropic",
+    "proxy",
+    "claude-code",
+    "api-inspector",
+    "debugging"
+  ],
+  "bin": {
+    "cc-inspector": "src/index.ts"
+  },
+  "files": [
+    "src",
+    "!src/**/*.test.ts",
+    "!src/**/*.stories.tsx",
+    "!src/**/__fixtures__",
+    "styles"
+  ],
+  "scripts": {
+    "dev": "bun --hot src/index.ts",
+    "start": "NODE_ENV=production bun src/index.ts",
+    "build": "bun run build.ts",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint .",
+    "format": "biome format --write .",
+    "format:check": "biome format .",
+    "knip": "knip",
+    "check": "bun format && bun typecheck && bun lint && bun knip",
+    "prepare": "husky",
+    "ladle": "ladle serve",
+    "ladle:build": "ladle build"
+  },
+  "dependencies": {
+    "@radix-ui/react-select": "^2.2.6",
+    "@tailwindcss/typography": "^0.5.19",
+    "bun-plugin-tailwind": "^0.1.2",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.563.0",
+    "radix-ui": "^1.4.3",
+    "react": "^19",
+    "react-dom": "^19",
+    "react-markdown": "^10.1.0",
+    "tailwind-merge": "^3.4.0",
+    "zod": "^4.3.6"
+  },
+  "devDependencies": {
+    "@biomejs/biome": "^2.3.14",
+    "@eslint/js": "^10.0.1",
+    "@ladle/react": "^5.1.1",
+    "@tailwindcss/vite": "^4.1.18",
+    "@types/bun": "latest",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "@typescript-eslint/eslint-plugin": "^8.55.0",
+    "@typescript-eslint/parser": "^8.55.0",
+    "eslint": "^9.32.0",
+    "eslint-plugin-eslint-comments": "^3.2.0",
+    "eslint-plugin-functional": "^9.0.2",
+    "eslint-plugin-unicorn": "^63.0.0",
+    "husky": "^9.1.7",
+    "knip": "^5.83.1",
+    "tailwindcss": "^4.1.11",
+    "tw-animate-css": "^1.4.0",
+    "typescript": "^5.9.3"
+  }
+}

package/src/App.tsx

@@ -0,0 +1,7 @@
+import type { JSX } from "react";
+import { ProxyViewerContainer } from "./components/ProxyViewerContainer";
+import "./index.css";
+
+export function App(): JSX.Element {
+  return <ProxyViewerContainer />;
+}

package/src/components/ProxyViewer.tsx

@@ -0,0 +1,102 @@
+import type { JSX } from "react";
+import type { CapturedLog } from "../proxy/schemas";
+import { LogEntry } from "./proxy-viewer/LogEntry";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./ui/select";
+
+function truncateSessionId(id: string): string {
+  if (id.length <= 30) return id;
+  return id.slice(0, 12) + "…" + id.slice(-12);
+}
+
+function computeTokenSummary(logs: CapturedLog[]): { totalIn: number; totalOut: number } {
+  let totalIn = 0;
+  let totalOut = 0;
+  for (const log of logs) {
+    if (log.inputTokens !== null) totalIn += log.inputTokens;
+    if (log.outputTokens !== null) totalOut += log.outputTokens;
+  }
+  return { totalIn, totalOut };
+}
+
+export type ProxyViewerProps = {
+  logs: CapturedLog[];
+  sessions: string[];
+  models: string[];
+  selectedSession: string;
+  selectedModel: string;
+  onSessionChange: (session: string) => void;
+  onModelChange: (model: string) => void;
+};
+
+export function ProxyViewer({
+  logs,
+  sessions,
+  models,
+  selectedSession,
+  selectedModel,
+  onSessionChange,
+  onModelChange,
+}: ProxyViewerProps): JSX.Element {
+  const { totalIn, totalOut } = computeTokenSummary(logs);
+
+  return (
+    <div className="max-w-[1200px] mx-auto p-6">
+      {/* Header */}
+      <div className="flex items-center gap-4 mb-6">
+        <h1 className="text-lg font-bold flex-1">Claude Code Proxy</h1>
+        <span className="text-muted-foreground text-xs font-mono">
+          {logs.length} request{logs.length !== 1 ? "s" : ""}
+          {totalIn > 0 || totalOut > 0
+            ? ` · ${totalIn.toLocaleString()} in / ${totalOut.toLocaleString()} out`
+            : ""}
+        </span>
+      </div>
+
+      {/* Filters */}
+      <div className="flex gap-3 mb-6">
+        <Select value={selectedSession} onValueChange={onSessionChange}>
+          <SelectTrigger className="flex-1 max-w-[400px] text-xs">
+            <SelectValue placeholder="All sessions" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="__all__">All sessions</SelectItem>
+            {sessions.map((s) => (
+              <SelectItem key={s} value={s}>
+                {truncateSessionId(s)}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+
+        <Select value={selectedModel} onValueChange={onModelChange}>
+          <SelectTrigger className="text-xs">
+            <SelectValue placeholder="All models" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="__all__">All models</SelectItem>
+            {models.map((m) => (
+              <SelectItem key={m} value={m}>
+                {m}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
+
+      {/* Log list */}
+      <div>
+        {logs.length === 0 ? (
+          <div className="text-center text-muted-foreground py-16 space-y-4">
+            <p className="text-sm">No requests captured yet.</p>
+            <p className="text-xs">Configure Claude Code with:</p>
+            <pre className="text-blue-500 font-mono text-sm">
+              ANTHROPIC_BASE_URL=http://localhost:25947/proxy claude
+            </pre>
+          </div>
+        ) : (
+          logs.map((log) => <LogEntry key={log.id} log={log} />)
+        )}
+      </div>
+    </div>
+  );
+}

package/src/components/ProxyViewerContainer.tsx

@@ -0,0 +1,48 @@
+import { useState, useEffect, useCallback, type JSX } from "react";
+import { z } from "zod";
+import { CapturedLogSchema, type CapturedLog } from "../proxy/schemas";
+import { ProxyViewer } from "./ProxyViewer";
+
+export function ProxyViewerContainer(): JSX.Element {
+  const [logs, setLogs] = useState<CapturedLog[]>([]);
+  const [sessions, setSessions] = useState<string[]>([]);
+  const [models, setModels] = useState<string[]>([]);
+  const [selectedSession, setSelectedSession] = useState("__all__");
+  const [selectedModel, setSelectedModel] = useState("__all__");
+
+  const fetchData = useCallback(async () => {
+    const params = new URLSearchParams();
+    if (selectedSession !== "__all__") params.set("sessionId", selectedSession);
+    if (selectedModel !== "__all__") params.set("model", selectedModel);
+
+    const [logsRes, sessionsRes, modelsRes] = await Promise.all([
+      fetch(`/api/logs?${params}`),
+      fetch("/api/sessions"),
+      fetch("/api/models"),
+    ]);
+
+    setLogs(z.array(CapturedLogSchema).parse(await logsRes.json()));
+    setSessions(z.array(z.string()).parse(await sessionsRes.json()));
+    setModels(z.array(z.string()).parse(await modelsRes.json()));
+  }, [selectedSession, selectedModel]);
+
+  useEffect(() => {
+    void fetchData();
+    const interval = setInterval(() => {
+      void fetchData();
+    }, 2000);
+    return () => clearInterval(interval);
+  }, [fetchData]);
+
+  return (
+    <ProxyViewer
+      logs={logs}
+      sessions={sessions}
+      models={models}
+      selectedSession={selectedSession}
+      selectedModel={selectedModel}
+      onSessionChange={setSelectedSession}
+      onModelChange={setSelectedModel}
+    />
+  );
+}

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

@@ -0,0 +1,95 @@
+import type { JSX } from "react";
+import { useMemo, useState } from "react";
+import { JsonViewerFromString } from "@/components/ui/json-viewer";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { cn } from "@/lib/utils";
+import { type CapturedLog, parseRequest } from "@/proxy/schemas";
+import { LogEntryHeader } from "./LogEntryHeader";
+import { RequestView } from "./RequestView";
+import { ResponseView } from "./ResponseView";
+
+export type LogEntryProps = {
+  log: CapturedLog;
+};
+
+export function LogEntry({ log }: LogEntryProps): JSX.Element {
+  const [expanded, setExpanded] = useState<boolean>(false);
+  const parsedRequest = useMemo(() => parseRequest(log.rawRequestBody), [log.rawRequestBody]);
+
+  return (
+    <div className={cn("border border-border rounded-lg mb-3 overflow-hidden")}>
+      <LogEntryHeader
+        log={log}
+        parsedRequest={parsedRequest}
+        expanded={expanded}
+        onToggle={() => {
+          setExpanded(!expanded);
+        }}
+      />
+
+      {expanded && (
+        <div
+          onClick={(e) => {
+            e.stopPropagation();
+          }}
+          onKeyDown={(e) => {
+            e.stopPropagation();
+          }}
+        >
+          <Tabs defaultValue="request">
+            <TabsList className="mx-4 mt-2">
+              <TabsTrigger value="request">Request</TabsTrigger>
+              <TabsTrigger value="response">Response</TabsTrigger>
+              <TabsTrigger value="raw">Raw</TabsTrigger>
+            </TabsList>
+
+            <TabsContent value="request">
+              <div className="px-4 py-3">
+                {parsedRequest !== null ? (
+                  <RequestView request={parsedRequest} />
+                ) : (
+                  <pre className="font-mono text-xs whitespace-pre-wrap break-words">
+                    {log.rawRequestBody ?? "No request body captured"}
+                  </pre>
+                )}
+              </div>
+            </TabsContent>
+
+            <TabsContent value="response">
+              <div className="px-4 py-3">
+                <ResponseView
+                  responseText={log.responseText}
+                  responseStatus={log.responseStatus}
+                  streaming={log.streaming}
+                  inputTokens={log.inputTokens}
+                  outputTokens={log.outputTokens}
+                />
+              </div>
+            </TabsContent>
+
+            <TabsContent value="raw">
+              <div className="px-4 py-3 space-y-4">
+                <div>
+                  <h4 className="text-xs font-medium text-muted-foreground mb-1.5">Request</h4>
+                  {log.rawRequestBody !== null ? (
+                    <JsonViewerFromString text={log.rawRequestBody} defaultExpandDepth={1} />
+                  ) : (
+                    <p className="text-xs text-muted-foreground italic">No request body</p>
+                  )}
+                </div>
+                <div>
+                  <h4 className="text-xs font-medium text-muted-foreground mb-1.5">Response</h4>
+                  {log.responseText !== null ? (
+                    <JsonViewerFromString text={log.responseText} defaultExpandDepth={1} />
+                  ) : (
+                    <p className="text-xs text-muted-foreground italic">No response body</p>
+                  )}
+                </div>
+              </div>
+            </TabsContent>
+          </Tabs>
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,148 @@
+import { ChevronDown, ChevronRight, Clock, MessageSquare, Radio, Wrench, Zap } from "lucide-react";
+import type { JSX } from "react";
+import { Badge } from "@/components/ui/badge";
+import { cn } from "@/lib/utils";
+import type { CapturedLog, ClaudeRequest } from "@/proxy/schemas";
+
+function formatElapsed(ms: number): string {
+  if (ms < 1000) return `${ms}ms`;
+  return `${(ms / 1000).toFixed(1)}s`;
+}
+
+type StatusCategory = "success" | "client_error" | "server_error" | "pending";
+
+function getStatusCategory(status: number | null): StatusCategory {
+  if (status === null) return "pending";
+  if (status >= 200 && status < 300) return "success";
+  if (status >= 400 && status < 500) return "client_error";
+  return "server_error";
+}
+
+const STATUS_BADGE_CLASSES: Record<StatusCategory, string> = {
+  success: "bg-emerald-500/15 text-emerald-400 border-emerald-500/25",
+  client_error: "bg-amber-500/15 text-amber-400 border-amber-500/25",
+  server_error: "",
+  pending: "bg-muted text-muted-foreground border-border",
+};
+
+export type LogEntryHeaderProps = {
+  log: CapturedLog;
+  parsedRequest: ClaudeRequest | null;
+  expanded: boolean;
+  onToggle: () => void;
+};
+
+export function LogEntryHeader({
+  log,
+  parsedRequest,
+  expanded,
+  onToggle,
+}: LogEntryHeaderProps): JSX.Element {
+  const statusCategory = getStatusCategory(log.responseStatus);
+
+  const hasTokens = log.inputTokens !== null || log.outputTokens !== null;
+
+  const messageCount = parsedRequest !== null ? parsedRequest.messages.length : null;
+
+  const toolCount =
+    parsedRequest !== null && parsedRequest.tools !== undefined && parsedRequest.tools.length > 0
+      ? parsedRequest.tools.length
+      : null;
+
+  return (
+    <div
+      role="button"
+      tabIndex={0}
+      className={cn(
+        "flex items-center gap-2.5 px-3 py-2 cursor-pointer transition-colors",
+        "hover:bg-muted/50",
+        "select-none",
+      )}
+      onClick={onToggle}
+      onKeyDown={(e) => {
+        if (e.key === "Enter" || e.key === " ") {
+          e.preventDefault();
+          onToggle();
+        }
+      }}
+    >
+      {/* Request ID */}
+      <span className="text-blue-400/80 font-mono text-xs font-semibold tabular-nums shrink-0">
+        #{log.id}
+      </span>
+
+      {/* Model */}
+      {log.model !== null && (
+        <Badge variant="secondary" className="text-[10px] px-1.5 py-0 h-5 font-mono">
+          {log.model}
+        </Badge>
+      )}
+
+      {/* Response Status */}
+      {statusCategory === "server_error" ? (
+        <Badge variant="destructive" className="text-[10px] px-1.5 py-0 h-5 font-mono tabular-nums">
+          {log.responseStatus}
+        </Badge>
+      ) : (
+        <Badge
+          variant="outline"
+          className={cn(
+            "text-[10px] px-1.5 py-0 h-5 font-mono tabular-nums",
+            STATUS_BADGE_CLASSES[statusCategory],
+          )}
+        >
+          {log.responseStatus !== null ? log.responseStatus : "..."}
+        </Badge>
+      )}
+
+      {/* Elapsed time */}
+      {log.elapsedMs !== null && (
+        <span className="flex items-center gap-1 text-muted-foreground text-xs shrink-0">
+          <Clock className="size-3" />
+          <span className="font-mono tabular-nums">{formatElapsed(log.elapsedMs)}</span>
+        </span>
+      )}
+
+      {/* Token counts */}
+      {hasTokens && (
+        <span className="flex items-center gap-1 text-muted-foreground text-xs shrink-0">
+          <Zap className="size-3" />
+          <span className="font-mono tabular-nums">
+            {log.inputTokens !== null ? log.inputTokens.toLocaleString() : "—"}
+            {" / "}
+            {log.outputTokens !== null ? log.outputTokens.toLocaleString() : "—"}
+          </span>
+        </span>
+      )}
+
+      {/* Message count */}
+      {messageCount !== null && (
+        <span className="flex items-center gap-1 text-muted-foreground text-xs shrink-0">
+          <MessageSquare className="size-3" />
+          <span className="font-mono tabular-nums">{messageCount}</span>
+        </span>
+      )}
+
+      {/* Tool count */}
+      {toolCount !== null && (
+        <span className="flex items-center gap-1 text-muted-foreground text-xs shrink-0">
+          <Wrench className="size-3" />
+          <span className="font-mono tabular-nums">{toolCount}</span>
+        </span>
+      )}
+
+      {/* Streaming indicator */}
+      {log.streaming && <Radio className="size-3 text-muted-foreground/60 shrink-0" />}
+
+      {/* Spacer */}
+      <span className="flex-1 min-w-0" />
+
+      {/* Expand chevron */}
+      {expanded ? (
+        <ChevronDown className="size-4 text-muted-foreground shrink-0" />
+      ) : (
+        <ChevronRight className="size-4 text-muted-foreground shrink-0" />
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,55 @@
+import { Bot, User } from "lucide-react";
+import type { JSX } from "react";
+import { cn } from "@/lib/utils";
+import type { MessageType } from "@/proxy/schemas";
+import { ContentBlockRenderer, TextBlock } from "./content-blocks";
+
+export type MessageThreadProps = {
+  messages: MessageType[];
+};
+
+export function MessageThread({ messages }: MessageThreadProps): JSX.Element {
+  return (
+    <div>
+      {messages.map((message, msgIndex) => (
+        <div
+          key={`msg-${String(msgIndex)}`}
+          className={cn(
+            "border-b border-border/50 last:border-b-0",
+            "border-l-2 pl-3 py-2",
+            message.role === "user" ? "border-l-green-500/40" : "border-l-orange-500/40",
+          )}
+        >
+          {/* Role label */}
+          <div className="flex items-center gap-1.5 mb-1.5">
+            {message.role === "user" ? (
+              <>
+                <User className="size-3.5 text-green-400 shrink-0" />
+                <span className="text-xs font-bold font-mono text-green-400">USER</span>
+              </>
+            ) : (
+              <>
+                <Bot className="size-3.5 text-orange-400 shrink-0" />
+                <span className="text-xs font-bold font-mono text-orange-400">ASSISTANT</span>
+              </>
+            )}
+          </div>
+
+          {/* Content blocks */}
+          <div className="space-y-1">
+            {typeof message.content === "string" ? (
+              <TextBlock text={message.content} />
+            ) : (
+              message.content.map((block, blockIndex) => (
+                <ContentBlockRenderer
+                  key={`msg-${String(msgIndex)}-block-${String(blockIndex)}`}
+                  block={block}
+                />
+              ))
+            )}
+          </div>
+        </div>
+      ))}
+    </div>
+  );
+}

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

@@ -0,0 +1,77 @@
+import { Settings } from "lucide-react";
+import type { JSX } from "react";
+import { Badge } from "@/components/ui/badge";
+import { Separator } from "@/components/ui/separator";
+import type { ClaudeRequest } from "../../proxy/schemas";
+import { MessageThread } from "./MessageThread";
+import { SystemPrompt } from "./SystemPrompt";
+import { ToolDefinitions } from "./ToolDefinitions";
+
+function formatBudget(budget: number): string {
+  if (budget < 1000) return `${budget}`;
+  return `${(budget / 1000).toFixed(0)}k`;
+}
+
+export type RequestViewProps = {
+  request: ClaudeRequest;
+};
+
+export function RequestView({ request }: RequestViewProps): JSX.Element {
+  const hasSystem = request.system !== undefined && request.system.length > 0;
+  const hasTools = request.tools !== undefined && request.tools.length > 0;
+
+  const thinkingEnabled = request.thinking !== undefined && request.thinking.type === "enabled";
+
+  const hasConfigBadges =
+    request.max_tokens !== undefined ||
+    request.temperature !== undefined ||
+    thinkingEnabled ||
+    request.stream === true;
+
+  const showSeparator = hasConfigBadges || hasSystem || hasTools;
+
+  return (
+    <div className="space-y-3">
+      {/* Config bar */}
+      {hasConfigBadges && (
+        <div className="flex flex-wrap items-center gap-1.5">
+          <Settings className="size-3 text-muted-foreground shrink-0" />
+          {request.max_tokens !== undefined && (
+            <Badge variant="outline" className="text-xs font-mono px-1.5 py-0 h-5">
+              max: {request.max_tokens}
+            </Badge>
+          )}
+          {request.temperature !== undefined && (
+            <Badge variant="outline" className="text-xs font-mono px-1.5 py-0 h-5">
+              temp: {request.temperature}
+            </Badge>
+          )}
+          {thinkingEnabled &&
+            request.thinking !== undefined &&
+            request.thinking.type === "enabled" && (
+              <Badge variant="outline" className="text-xs font-mono px-1.5 py-0 h-5">
+                thinking: {formatBudget(request.thinking.budget_tokens)} budget
+              </Badge>
+            )}
+          {request.stream === true && (
+            <Badge variant="outline" className="text-xs font-mono px-1.5 py-0 h-5">
+              streaming
+            </Badge>
+          )}
+        </div>
+      )}
+
+      {/* System prompt */}
+      {hasSystem && request.system !== undefined && <SystemPrompt blocks={request.system} />}
+
+      {/* Tool definitions */}
+      {hasTools && request.tools !== undefined && <ToolDefinitions tools={request.tools} />}
+
+      {/* Separator between config/system/tools and messages */}
+      {showSeparator && <Separator />}
+
+      {/* Message thread */}
+      <MessageThread messages={request.messages} />
+    </div>
+  );
+}