@tonyclaw/llm-inspector 1.9.8 → 1.10.0

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

@@ -2,6 +2,13 @@ import { ChevronDown, ChevronRight, Clock, MessageSquare, Zap } from "lucide-rea
 import type { JSX } from "react";
 import { cn, formatTokens } from "../../lib/utils";
 import type { CapturedLog } from "../../proxy/schemas";
+import { Badge } from "../ui/badge";
+
+const API_FORMAT_LABELS: Record<"anthropic" | "openai" | "unknown", string> = {
+  anthropic: "Anthropic",
+  openai: "OpenAI",
+  unknown: "Unknown",
+};
 
 export type ConversationHeaderProps = {
   conversationId: string;
@@ -10,8 +17,12 @@ export type ConversationHeaderProps = {
   totalCalls: number;
   totalInputTokens: number;
   totalOutputTokens: number;
+  apiFormat: "anthropic" | "openai" | "unknown";
   expanded: boolean;
   onToggle: () => void;
+  /** Hide the API format badge on the header (used when the group contains
+   * mixed formats — the per-log badges are shown instead). */
+  hideApiFormat?: boolean;
 };
 
 function formatTimestamp(iso: string): string {
@@ -26,8 +37,10 @@ export function ConversationHeader({
   totalCalls,
   totalInputTokens,
   totalOutputTokens,
+  apiFormat,
   expanded,
   onToggle,
+  hideApiFormat = false,
 }: ConversationHeaderProps): JSX.Element {
   return (
     <div
@@ -64,6 +77,21 @@ export function ConversationHeader({
           : conversationId}
       </span>
 
+      {/* API Format Badge */}
+      {!hideApiFormat && (
+        <Badge
+          variant="outline"
+          className={cn(
+            "text-[10px] px-1.5 py-0 h-5 font-mono shrink-0",
+            apiFormat === "openai" && "border-blue-500/40 text-blue-400",
+            apiFormat === "anthropic" && "border-orange-500/40 text-orange-400",
+            apiFormat === "unknown" && "border-muted text-muted-foreground",
+          )}
+        >
+          {API_FORMAT_LABELS[apiFormat]}
+        </Badge>
+      )}
+
       {/* Time range */}
       <span className="flex items-center gap-1 text-muted-foreground text-xs shrink-0">
         <Clock className="size-3" />
@@ -102,6 +130,31 @@ export type ConversationGroupData = {
   logs: CapturedLog[];
 };
 
+export function getGroupApiFormat(logs: CapturedLog[]): "anthropic" | "openai" | "unknown" {
+  const firstNonUnknown = logs.find((l) => l.apiFormat !== "unknown");
+  if (firstNonUnknown !== undefined) {
+    return firstNonUnknown.apiFormat;
+  }
+  return logs[0]?.apiFormat ?? "unknown";
+}
+
+/**
+ * Returns true when a group contains logs of BOTH Anthropic and OpenAI
+ * formats. Used to decide whether to render the per-row API format badge
+ * inside a group (the badge is normally hidden because the group header
+ * already shows the format).
+ */
+export function hasMixedApiFormat(logs: CapturedLog[]): boolean {
+  let hasAnthropic = false;
+  let hasOpenai = false;
+  for (const log of logs) {
+    if (log.apiFormat === "anthropic") hasAnthropic = true;
+    else if (log.apiFormat === "openai") hasOpenai = true;
+    if (hasAnthropic && hasOpenai) return true;
+  }
+  return false;
+}
+
 export function getConversationId(log: CapturedLog): string {
   if (log.sessionId !== null && log.sessionId !== "") {
     return log.sessionId;

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

@@ -3,6 +3,8 @@ import type { JSX } from "react";
 import { useMemo, useState, memo } from "react";
 import { cn } from "../../lib/utils";
 import { type CapturedLog, parseRequest } from "../../proxy/schemas";
+import { stripClaudeCodeBillingHeader } from "../../proxy/claudeCodeStrip";
+import { useStripConfig } from "../../lib/useStripConfig";
 import { Button } from "../ui/button";
 import { JsonViewerFromString } from "../ui/json-viewer";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "../ui/tabs";
@@ -14,8 +16,23 @@ import { StreamingChunkSequence } from "./StreamingChunkSequence";
 export type LogEntryProps = {
   log: CapturedLog;
   viewMode?: "simple" | "full";
+  /** Suppress the API format badge when log is displayed within a group */
+  suppressApiFormatBadge?: boolean;
 };
 
+/**
+ * Pure visibility rule for the "Raw Request" tab. Extracted so it can be
+ * unit-tested without rendering React. The tab appears only when all three
+ * are true: anthropic format, full view mode, strip toggle enabled.
+ */
+export function shouldShowRawRequestTab(
+  apiFormat: string,
+  viewMode: "simple" | "full",
+  strip: boolean,
+): boolean {
+  return apiFormat === "anthropic" && viewMode === "full" && strip;
+}
+
 function CopyButton({
   text,
   label,
@@ -49,25 +66,44 @@ function CopyButton({
   );
 }
 
-export const LogEntry = memo(function LogEntry({
+export const LogEntry = memo(function ({
   log,
   viewMode = "simple",
+  suppressApiFormatBadge = false,
 }: LogEntryProps): JSX.Element {
   const [expanded, setExpanded] = useState<boolean>(false);
   const [requestCopied, setRequestCopied] = useState<boolean>(false);
+  const [rawRequestCopied, setRawRequestCopied] = useState<boolean>(false);
   const [responseCopied, setResponseCopied] = useState<boolean>(false);
   const [replayOpen, setReplayOpen] = useState<boolean>(false);
+  const { strip } = useStripConfig();
   const parsedRequest = useMemo(() => parseRequest(log.rawRequestBody), [log.rawRequestBody]);
+  const strippedRequestBody = useMemo(() => {
+    if (!strip || log.apiFormat !== "anthropic" || log.rawRequestBody === null) {
+      return null;
+    }
+    return stripClaudeCodeBillingHeader(log.rawRequestBody).body;
+  }, [log.rawRequestBody, log.apiFormat, strip]);
+  const displayedRequestBody = strippedRequestBody ?? log.rawRequestBody;
 
   function handleCopyRequest(e: React.MouseEvent): void {
     e.stopPropagation();
-    if (log.rawRequestBody === null) return;
-    void window.navigator.clipboard.writeText(log.rawRequestBody).then(() => {
+    if (displayedRequestBody === null) return;
+    void window.navigator.clipboard.writeText(displayedRequestBody).then(() => {
       setRequestCopied(true);
       setTimeout(() => setRequestCopied(false), 2000);
     });
   }
 
+  function handleCopyRawRequest(e: React.MouseEvent): void {
+    e.stopPropagation();
+    if (log.rawRequestBody === null) return;
+    void window.navigator.clipboard.writeText(log.rawRequestBody).then(() => {
+      setRawRequestCopied(true);
+      setTimeout(() => setRawRequestCopied(false), 2000);
+    });
+  }
+
   function handleCopyResponse(e: React.MouseEvent): void {
     e.stopPropagation();
     if (log.responseText === null) return;
@@ -85,6 +121,7 @@ export const LogEntry = memo(function LogEntry({
           parsedRequest={parsedRequest}
           expanded={expanded}
           onToggle={() => setExpanded(!expanded)}
+          suppressApiFormatBadge={suppressApiFormatBadge}
         />
 
         {expanded && (
@@ -93,11 +130,34 @@ export const LogEntry = memo(function LogEntry({
               <TabsList className="mx-4 mt-2">
                 {viewMode === "full" && <TabsTrigger value="raw-headers">Raw Headers</TabsTrigger>}
                 {viewMode === "full" && <TabsTrigger value="headers">Headers</TabsTrigger>}
+                {shouldShowRawRequestTab(log.apiFormat, viewMode, strip) && (
+                  <TabsTrigger value="raw-request">Raw Request</TabsTrigger>
+                )}
                 <TabsTrigger value="request">Request</TabsTrigger>
                 {viewMode === "full" && <TabsTrigger value="raw">Raw Response</TabsTrigger>}
-                <TabsTrigger value="parsed">Parsed Response</TabsTrigger>
+                <TabsTrigger value="parsed">Response</TabsTrigger>
               </TabsList>
 
+              {shouldShowRawRequestTab(log.apiFormat, viewMode, strip) && (
+                <TabsContent value="raw-request">
+                  <div className="px-4 py-3">
+                    <div className="flex justify-end mb-2">
+                      <CopyButton
+                        text={log.rawRequestBody}
+                        label="Copy Raw Request"
+                        copied={rawRequestCopied}
+                        onCopy={handleCopyRawRequest}
+                      />
+                    </div>
+                    {log.rawRequestBody !== null ? (
+                      <JsonViewerFromString text={log.rawRequestBody} defaultExpandDepth={1} />
+                    ) : (
+                      <p className="text-xs text-muted-foreground italic">No request body</p>
+                    )}
+                  </div>
+                </TabsContent>
+              )}
+
               <TabsContent value="request">
                 <div className="px-4 py-3">
                   <div className="flex justify-end gap-2 mb-2">
@@ -114,14 +174,14 @@ export const LogEntry = memo(function LogEntry({
                       Replay
                     </Button>
                     <CopyButton
-                      text={log.rawRequestBody}
+                      text={displayedRequestBody}
                       label="Copy Request"
                       copied={requestCopied}
                       onCopy={handleCopyRequest}
                     />
                   </div>
-                  {log.rawRequestBody !== null ? (
-                    <JsonViewerFromString text={log.rawRequestBody} defaultExpandDepth={1} />
+                  {displayedRequestBody !== null ? (
+                    <JsonViewerFromString text={displayedRequestBody} defaultExpandDepth={1} />
                   ) : (
                     <p className="text-xs text-muted-foreground italic">No request body</p>
                   )}

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

@@ -18,12 +18,6 @@ import type { CapturedLog, InspectorRequest } from "../../proxy/schemas";
 import { Badge } from "../ui/badge";
 import { ProviderLogo, detectProvider } from "../providers/ProviderLogo";
 
-const API_FORMAT_LABELS: Record<"anthropic" | "openai" | "unknown", string> = {
-  anthropic: "Anthropic",
-  openai: "OpenAI",
-  unknown: "Unknown",
-};
-
 function formatElapsed(ms: number): string {
   if (ms < 1000) return `${ms}ms`;
   return `${(ms / 1000).toFixed(1)}s`;
@@ -41,13 +35,16 @@ export type LogEntryHeaderProps = {
   parsedRequest: InspectorRequest | null;
   expanded: boolean;
   onToggle: () => void;
+  /** Suppress the API format badge when log is displayed within a group */
+  suppressApiFormatBadge?: boolean;
 };
 
-export const LogEntryHeader = memo(function LogEntryHeader({
+export const LogEntryHeader = memo(function ({
   log,
   parsedRequest,
   expanded,
   onToggle,
+  suppressApiFormatBadge = false,
 }: LogEntryHeaderProps): JSX.Element {
   const statusCategory = getStatusCategory(log.responseStatus);
 
@@ -93,17 +90,23 @@ export const LogEntryHeader = memo(function LogEntryHeader({
       )}
 
       {/* API Format Badge */}
-      <Badge
-        variant="outline"
-        className={cn(
-          "text-[10px] px-1.5 py-0 h-5 font-mono",
-          log.apiFormat === "openai" && "border-blue-500/40 text-blue-400",
-          log.apiFormat === "anthropic" && "border-orange-500/40 text-orange-400",
-          log.apiFormat === "unknown" && "border-muted text-muted-foreground",
-        )}
-      >
-        {API_FORMAT_LABELS[log.apiFormat] ?? log.apiFormat}
-      </Badge>
+      {!suppressApiFormatBadge && (
+        <Badge
+          variant="outline"
+          className={cn(
+            "text-[10px] px-1.5 py-0 h-5 font-mono shrink-0",
+            log.apiFormat === "openai" && "border-blue-500/40 text-blue-400",
+            log.apiFormat === "anthropic" && "border-orange-500/40 text-orange-400",
+            log.apiFormat === "unknown" && "border-muted text-muted-foreground",
+          )}
+        >
+          {log.apiFormat === "anthropic"
+            ? "Anthropic"
+            : log.apiFormat === "openai"
+              ? "OpenAI"
+              : "Unknown"}
+        </Badge>
+      )}
 
       {/* Response Status */}
       {statusCategory === "server_error" ? (

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

@@ -120,7 +120,7 @@ export function ReplayDialog({ log, open, onOpenChange }: ReplayDialogProps): JS
             {replayResult && replayResult.success && (
               <Tabs defaultValue="parsed">
                 <TabsList>
-                  <TabsTrigger value="parsed">Parsed Response</TabsTrigger>
+                  <TabsTrigger value="parsed">Response</TabsTrigger>
                   <TabsTrigger value="raw">Raw Response</TabsTrigger>
                 </TabsList>
                 <TabsContent value="parsed">
@@ -146,7 +146,7 @@ export function ReplayDialog({ log, open, onOpenChange }: ReplayDialogProps): JS
             {log.responseText !== null ? (
               <Tabs defaultValue="parsed">
                 <TabsList>
-                  <TabsTrigger value="parsed">Parsed Response</TabsTrigger>
+                  <TabsTrigger value="parsed">Response</TabsTrigger>
                   <TabsTrigger value="raw">Raw Response</TabsTrigger>
                 </TabsList>
                 <TabsContent value="parsed">
@@ -177,7 +177,7 @@ export function ReplayDialog({ log, open, onOpenChange }: ReplayDialogProps): JS
               {replayResult.responseText !== null ? (
                 <Tabs defaultValue="parsed">
                   <TabsList>
-                    <TabsTrigger value="parsed">Parsed Response</TabsTrigger>
+                    <TabsTrigger value="parsed">Response</TabsTrigger>
                     <TabsTrigger value="raw">Raw Response</TabsTrigger>
                   </TabsList>
                   <TabsContent value="parsed">

package/src/lib/runtimeConfig.ts

@@ -0,0 +1,15 @@
+import { z } from "zod";
+
+/**
+ * Schema for the runtime proxy config. Shared between server
+ * (src/proxy/config.ts) and client (src/lib/useStripConfig.ts) so that
+ * the wire format is validated end-to-end with a single source of truth.
+ *
+ * Keep this file free of side effects and Node-only imports so it is
+ * safe to bundle into the client.
+ */
+export const RuntimeConfigSchema = z.object({
+  stripClaudeCodeBillingHeader: z.boolean(),
+});
+
+export type RuntimeConfig = z.infer<typeof RuntimeConfigSchema>;

package/src/lib/useStripConfig.ts

@@ -0,0 +1,86 @@
+/* eslint-disable @typescript-eslint/consistent-type-assertions, functional/no-throw-statements */
+import useSWR, { type SWRResponse, useSWRConfig } from "swr";
+import { RuntimeConfigSchema, type RuntimeConfig } from "./runtimeConfig";
+
+export const STRIP_CONFIG_SWR_KEY = "/api/config";
+
+async function fetcher(url: string): Promise<RuntimeConfig> {
+  const response = await fetch(url);
+  if (!response.ok) {
+    throw new Error(`Failed to fetch ${url}: ${response.status}`);
+  }
+  // Validate at the trust boundary; if the server shape ever changes, this
+  // throws and the SWR cache stays empty rather than silently lying about types.
+  const data: unknown = await response.json();
+  return RuntimeConfigSchema.parse(data);
+}
+
+function extractErrorMessage(errorBody: unknown, fallback: string): string {
+  if (typeof errorBody !== "object" || errorBody === null) return fallback;
+  const candidate = (errorBody as { error?: unknown }).error;
+  return typeof candidate === "string" ? candidate : fallback;
+}
+
+/**
+ * PATCH the runtime config. Exported separately for testability.
+ */
+export async function setRuntimeConfig(patch: Partial<RuntimeConfig>): Promise<RuntimeConfig> {
+  const response = await fetch(STRIP_CONFIG_SWR_KEY, {
+    method: "PATCH",
+    headers: { "content-type": "application/json" },
+    body: JSON.stringify(patch),
+  });
+  if (!response.ok) {
+    const errorBody: unknown = await response.json().catch(() => ({}));
+    throw new Error(extractErrorMessage(errorBody, `PATCH failed with status ${response.status}`));
+  }
+  const data: unknown = await response.json();
+  return RuntimeConfigSchema.parse(data);
+}
+
+export type UseStripConfig = {
+  strip: boolean;
+  isLoading: boolean;
+  isError: boolean;
+  setStrip: (next: boolean) => Promise<void>;
+};
+
+/**
+ * Hook reading the runtime config from /api/config.
+ *
+ * - `strip` is the live value from the server (or the optimistic value mid-PATCH).
+ * - `setStrip(next)` PATCHes the server with optimistic update; on failure
+ *   it throws and SWR rolls back the optimistic value.
+ */
+export function useStripConfig(): UseStripConfig {
+  const response: SWRResponse<RuntimeConfig, Error> = useSWR<RuntimeConfig, Error>(
+    STRIP_CONFIG_SWR_KEY,
+    fetcher,
+    {
+      revalidateOnFocus: false,
+      revalidateIfStale: false,
+    },
+  );
+  const { mutate: globalMutate } = useSWRConfig();
+
+  const strip = response.data?.stripClaudeCodeBillingHeader ?? false;
+
+  const setStrip = async (next: boolean): Promise<void> => {
+    await globalMutate(
+      STRIP_CONFIG_SWR_KEY,
+      setRuntimeConfig({ stripClaudeCodeBillingHeader: next }),
+      {
+        optimisticData: { stripClaudeCodeBillingHeader: next },
+        rollbackOnError: true,
+        revalidate: false,
+      },
+    );
+  };
+
+  return {
+    strip,
+    isLoading: response.isLoading,
+    isError: response.error !== undefined,
+    setStrip,
+  };
+}

package/src/proxy/claudeCodeStrip.ts

@@ -0,0 +1,102 @@
+/**
+ * Claude Code (and similar Anthropic SDK-based clients) prepend a synthetic
+ * text block to the `system` array that looks like an HTTP header:
+ *
+ *   x-anthropic-billing-header: cc_version=2.1.92.61c; cc_entrypoint=cli; cch=00000;
+ *
+ * The `cch` field is a per-request cache-hint value. When this block is
+ * forwarded verbatim to a third-party model, the system prompt prefix
+ * changes on every request, which kills prefix-cache hit rates and wastes
+ * input tokens.
+ *
+ * This module detects the marker and returns a rewritten body with the
+ * block removed. It is opt-in (see constants.ts) so the proxy remains a
+ * transparent pass-through by default.
+ */
+
+const BILLING_HEADER_PREFIX = "x-anthropic-billing-header:";
+
+type StripResult = {
+  /** The new request body. Equal to input when no change was made. */
+  body: string;
+  /** Number of billing-header text blocks removed. */
+  removed: number;
+};
+
+/**
+ * Returns true if the given text looks like the synthetic billing-header
+ * block that Claude Code injects. Whitespace at the start is tolerated and
+ * the match is case-insensitive on the header name.
+ */
+export function isClaudeCodeBillingHeaderBlock(text: string): boolean {
+  const trimmed = text.trimStart();
+  return trimmed.toLowerCase().startsWith(BILLING_HEADER_PREFIX);
+}
+
+function getOwnProperty(obj: object, key: string): unknown {
+  const desc = Object.getOwnPropertyDescriptor(obj, key);
+  return desc?.value;
+}
+
+function isObjectWithSystem(value: unknown): value is { system?: unknown[] } {
+  if (typeof value !== "object" || value === null || Array.isArray(value)) return false;
+  return Object.prototype.hasOwnProperty.call(value, "system");
+}
+
+function isBillingHeaderTextBlock(block: unknown): boolean {
+  if (block === null || typeof block !== "object" || Array.isArray(block)) return false;
+  const typeVal = getOwnProperty(block, "type");
+  const textVal = getOwnProperty(block, "text");
+  if (typeof typeVal !== "string" || typeVal !== "text") return false;
+  if (typeof textVal !== "string") return false;
+  return isClaudeCodeBillingHeaderBlock(textVal);
+}
+
+/**
+ * Inspects the request body and, if it is an Anthropic-format request whose
+ * `system` array contains one or more Claude Code billing-header text blocks,
+ * returns a new body with those blocks removed. The original string is
+ * returned unchanged (by reference equality on the result) when no edit is
+ * needed so callers can avoid re-serializing.
+ */
+export function stripClaudeCodeBillingHeader(rawBody: string): StripResult {
+  let parsed: unknown;
+  try {
+    parsed = JSON.parse(rawBody);
+  } catch {
+    return { body: rawBody, removed: 0 };
+  }
+
+  if (!isObjectWithSystem(parsed)) {
+    return { body: rawBody, removed: 0 };
+  }
+
+  const system = parsed.system;
+
+  if (!Array.isArray(system) || system.length === 0) {
+    return { body: rawBody, removed: 0 };
+  }
+
+  const kept: unknown[] = [];
+  let removed = 0;
+
+  for (const block of system) {
+    if (isBillingHeaderTextBlock(block)) {
+      removed += 1;
+      continue;
+    }
+    kept.push(block);
+  }
+
+  if (removed === 0) {
+    return { body: rawBody, removed: 0 };
+  }
+
+  if (kept.length === 0) {
+    delete parsed.system;
+  } else {
+    parsed.system = kept;
+  }
+
+  return { body: JSON.stringify(parsed), removed };
+}