@tonyclaw/llm-inspector 1.14.8 → 1.15.0

package/src/components/ui/crab-variants.tsx

@@ -0,0 +1,456 @@
+import type { JSX } from "react";
+import { cn } from "../../lib/utils";
+
+type CrabVariantProps = { className?: string; style?: React.CSSProperties };
+
+function SvgShell({
+  className,
+  style,
+  d,
+  eyeStalks,
+  eyes,
+  legs,
+  extras,
+}: CrabVariantProps & {
+  d: string;
+  eyeStalks: JSX.Element;
+  eyes: JSX.Element;
+  legs: JSX.Element;
+  extras?: JSX.Element;
+}): JSX.Element {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.5"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+      style={style}
+      className={cn("inline-block size-5", className)}
+    >
+      <path d={d} />
+      {eyeStalks}
+      {eyes}
+      {legs}
+      {extras}
+    </svg>
+  );
+}
+
+// Shared legs
+const StdLegs = (
+  <>
+    <line x1="6.5" y1="16" x2="4.5" y2="19.5" />
+    <line x1="9" y1="17.5" x2="8" y2="20.5" />
+    <line x1="15" y1="17.5" x2="16" y2="20.5" />
+    <line x1="17.5" y1="16" x2="19.5" y2="19.5" />
+  </>
+);
+
+const ShortLegs = (
+  <>
+    <line x1="7" y1="16" x2="5.5" y2="18.5" />
+    <line x1="9.5" y1="17" x2="8.5" y2="19.5" />
+    <line x1="14.5" y1="17" x2="15.5" y2="19.5" />
+    <line x1="17" y1="16" x2="18.5" y2="18.5" />
+  </>
+);
+
+// ── 1. Classic ──
+function Crab1({ className }: CrabVariantProps): JSX.Element {
+  return (
+    <SvgShell
+      className={className}
+      d="M5 13 C5 9 8 7 12 7 C16 7 19 9 19 13 C19 16 16 18 12 18 C8 18 5 16 5 13 Z"
+      eyeStalks={
+        <>
+          <line x1="10" y1="7" x2="9.5" y2="5" />
+          <line x1="14" y1="7" x2="14.5" y2="5" />
+        </>
+      }
+      eyes={
+        <>
+          <circle cx="9.5" cy="4.5" r="0.9" fill="currentColor" stroke="none" />
+          <circle cx="14.5" cy="4.5" r="0.9" fill="currentColor" stroke="none" />
+        </>
+      }
+      legs={StdLegs}
+      extras={
+        <>
+          <path d="M5 11 C3.5 9.5 1.5 10 2 12.5 C2.5 14 4 13.5 5 12.5" />
+          <path d="M19 11 C20.5 9.5 22.5 10 22 12.5 C21.5 14 20 13.5 19 12.5" />
+        </>
+      }
+    />
+  );
+}
+
+// ── 2. Round (chubby) ──
+function Crab2({ className }: CrabVariantProps): JSX.Element {
+  return (
+    <SvgShell
+      className={className}
+      d="M4 13 C4 7 7.5 5.5 12 5.5 C16.5 5.5 20 7 20 13 C20 17.5 16.5 19 12 19 C7.5 19 4 17.5 4 13 Z"
+      eyeStalks={
+        <>
+          <line x1="9.5" y1="6.5" x2="9.5" y2="4.5" />
+          <line x1="14.5" y1="6.5" x2="14.5" y2="4.5" />
+        </>
+      }
+      eyes={
+        <>
+          <circle cx="9.5" cy="4" r="1.1" fill="currentColor" stroke="none" />
+          <circle cx="14.5" cy="4" r="1.1" fill="currentColor" stroke="none" />
+        </>
+      }
+      legs={ShortLegs}
+      extras={
+        <>
+          <path d="M5 11 C4 9.5 2.5 10 3 12 C3.5 13.5 4.5 13 5 12" />
+          <path d="M19 11 C20 9.5 21.5 10 21 12 C20.5 13.5 19.5 13 19 12" />
+        </>
+      }
+    />
+  );
+}
+
+// ── 3. Wide (pancake) ──
+function Crab3({ className }: CrabVariantProps): JSX.Element {
+  return (
+    <SvgShell
+      className={className}
+      d="M3 13.5 C3 8 7 6 12 6 C17 6 21 8 21 13.5 C21 17 17 19 12 19 C7 19 3 17 3 13.5 Z"
+      eyeStalks={
+        <>
+          <line x1="7" y1="7" x2="6.5" y2="4.5" />
+          <line x1="17" y1="7" x2="17.5" y2="4.5" />
+        </>
+      }
+      eyes={
+        <>
+          <circle cx="6.5" cy="4" r="0.8" fill="currentColor" stroke="none" />
+          <circle cx="17.5" cy="4" r="0.8" fill="currentColor" stroke="none" />
+        </>
+      }
+      legs={StdLegs}
+      extras={
+        <>
+          <path d="M4 12 C2.5 10.5 1 11 1.5 13 C2 14.5 3.5 14 4.5 13" />
+          <path d="M20 12 C21.5 10.5 23 11 22.5 13 C22 14.5 20.5 14 19.5 13" />
+        </>
+      }
+    />
+  );
+}
+
+// ── 4. Tall (stretch) ──
+function Crab4({ className }: CrabVariantProps): JSX.Element {
+  return (
+    <SvgShell
+      className={className}
+      d="M6 14 C6 8 9 5.5 12 5.5 C15 5.5 18 8 18 14 C18 18 15 20 12 20 C9 20 6 18 6 14 Z"
+      eyeStalks={
+        <>
+          <line x1="10" y1="6.5" x2="10" y2="3.5" />
+          <line x1="14" y1="6.5" x2="14" y2="3.5" />
+        </>
+      }
+      eyes={
+        <>
+          <circle cx="10" cy="3" r="0.7" fill="currentColor" stroke="none" />
+          <circle cx="14" cy="3" r="0.7" fill="currentColor" stroke="none" />
+        </>
+      }
+      legs={
+        <>
+          <line x1="7" y1="17" x2="5" y2="20.5" />
+          <line x1="9.5" y1="18.5" x2="8.5" y2="21.5" />
+          <line x1="14.5" y1="18.5" x2="15.5" y2="21.5" />
+          <line x1="17" y1="17" x2="19" y2="20.5" />
+        </>
+      }
+      extras={
+        <>
+          <path d="M6.5 11 C5 8.5 3 9 3.5 11.5 C4 13.5 5 13 6 12" />
+          <path d="M17.5 11 C19 8.5 21 9 20.5 11.5 C20 13.5 19 13 18 12" />
+        </>
+      }
+    />
+  );
+}
+
+// ── 5. Spiky ──
+function Crab5({ className }: CrabVariantProps): JSX.Element {
+  return (
+    <SvgShell
+      className={className}
+      d="M5 13 C5 9 8 7 12 7 L13 4 L14 7 C16 7 19 9 19 13 C19 16 16 18 13 18 L12 21 L11 18 C8 18 5 16 5 13 Z"
+      eyeStalks={
+        <>
+          <line x1="10" y1="7" x2="9.5" y2="5" />
+          <line x1="14" y1="7" x2="14.5" y2="5" />
+        </>
+      }
+      eyes={
+        <>
+          <circle cx="9.5" cy="4.5" r="0.8" fill="currentColor" stroke="none" />
+          <circle cx="14.5" cy="4.5" r="0.8" fill="currentColor" stroke="none" />
+        </>
+      }
+      legs={StdLegs}
+      extras={
+        <>
+          <path d="M5 11 C3.5 9.5 1.5 10 2 12.5 C2.5 14 4 13.5 5 12.5" />
+          <path d="M19 11 C20.5 9.5 22.5 10 22 12.5 C21.5 14 20 13.5 19 12.5" />
+        </>
+      }
+    />
+  );
+}
+
+// ── 6. Wink ──
+function Crab6({ className }: CrabVariantProps): JSX.Element {
+  return (
+    <SvgShell
+      className={className}
+      d="M5 13 C5 9 8 7 12 7 C16 7 19 9 19 13 C19 16 16 18 12 18 C8 18 5 16 5 13 Z"
+      eyeStalks={
+        <>
+          <line x1="10" y1="7" x2="9.5" y2="5" />
+          <line x1="14" y1="7" x2="14.5" y2="5" />
+        </>
+      }
+      eyes={
+        <>
+          <circle cx="9.5" cy="4.5" r="0.9" fill="currentColor" stroke="none" />
+          <line x1="13.5" y1="4" x2="15.5" y2="5" />
+        </>
+      }
+      legs={StdLegs}
+      extras={
+        <>
+          <path d="M5 11 C3.5 9.5 1.5 10 2 12.5 C2.5 14 4 13.5 5 12.5" />
+          <path d="M19 11 C20.5 9.5 22.5 10 22 12.5 C21.5 14 20 13.5 19 12.5" />
+        </>
+      }
+    />
+  );
+}
+
+// ── 7. Sleepy ──
+function Crab7({ className }: CrabVariantProps): JSX.Element {
+  return (
+    <SvgShell
+      className={className}
+      d="M5.5 13.5 C5.5 10 8.5 8 12 8 C15.5 8 18.5 10 18.5 13.5 C18.5 16 15.5 17.5 12 17.5 C8.5 17.5 5.5 16 5.5 13.5 Z"
+      eyeStalks={
+        <>
+          <line x1="10" y1="8" x2="10" y2="6" />
+          <line x1="14" y1="8" x2="14" y2="6" />
+        </>
+      }
+      eyes={
+        <>
+          <line x1="9" y1="6" x2="11" y2="6.5" />
+          <line x1="13" y1="6" x2="15" y2="6.5" />
+        </>
+      }
+      legs={ShortLegs}
+      extras={
+        <>
+          <path d="M6 11.5 C4.5 10.5 3 11 3.5 12.5 C4 13.5 5 13 5.5 12.5" />
+          <path d="M18 11.5 C19.5 10.5 21 11 20.5 12.5 C20 13.5 19 13 18.5 12.5" />
+        </>
+      }
+    />
+  );
+}
+
+// ── 8. Grumpy (angry brows) ──
+function Crab8({ className }: CrabVariantProps): JSX.Element {
+  return (
+    <SvgShell
+      className={className}
+      d="M5 13 C5 9 8 7 12 7 C16 7 19 9 19 13 C19 16 16 18 12 18 C8 18 5 16 5 13 Z"
+      eyeStalks={
+        <>
+          <line x1="10" y1="7" x2="9.5" y2="5" />
+          <line x1="14" y1="7" x2="14.5" y2="5" />
+        </>
+      }
+      eyes={
+        <>
+          <circle cx="9.5" cy="4.5" r="0.7" fill="currentColor" stroke="none" />
+          <circle cx="14.5" cy="4.5" r="0.7" fill="currentColor" stroke="none" />
+        </>
+      }
+      legs={StdLegs}
+      extras={
+        <>
+          <path d="M5 11 C3.5 9.5 1.5 10 2 12.5 C2.5 14 4 13.5 5 12.5" />
+          <path d="M19 11 C20.5 9.5 22.5 10 22 12.5 C21.5 14 20 13.5 19 12.5" />
+          {/* Angry brows */}
+          <line x1="8.5" y1="4" x2="10.5" y2="4.5" />
+          <line x1="15.5" y1="4" x2="13.5" y2="4.5" />
+          {/* Frown */}
+          <path d="M9 15.5 C10 14.5 14 14.5 15 15.5" />
+        </>
+      }
+    />
+  );
+}
+
+// ── 9. Surprised ──
+function Crab9({ className }: CrabVariantProps): JSX.Element {
+  return (
+    <SvgShell
+      className={className}
+      d="M5 13 C5 9 8 7 12 7 C16 7 19 9 19 13 C19 16 16 18 12 18 C8 18 5 16 5 13 Z"
+      eyeStalks={
+        <>
+          <line x1="10" y1="7" x2="9.5" y2="5" />
+          <line x1="14" y1="7" x2="14.5" y2="5" />
+        </>
+      }
+      eyes={
+        <>
+          <circle cx="9.5" cy="4.5" r="1.2" fill="none" stroke="currentColor" />
+          <circle cx="14.5" cy="4.5" r="1.2" fill="none" stroke="currentColor" />
+        </>
+      }
+      legs={StdLegs}
+      extras={
+        <>
+          <path d="M5 11 C3.5 9.5 1.5 10 2 12.5 C2.5 14 4 13.5 5 12.5" />
+          <path d="M19 11 C20.5 9.5 22.5 10 22 12.5 C21.5 14 20 13.5 19 12.5" />
+          {/* Open mouth */}
+          <ellipse cx="12" cy="15" rx="2" ry="1.5" fill="currentColor" stroke="none" />
+        </>
+      }
+    />
+  );
+}
+
+// ── 10. Happy (big smile) ──
+function Crab10({ className }: CrabVariantProps): JSX.Element {
+  return (
+    <SvgShell
+      className={className}
+      d="M4.5 13 C4.5 8 7.5 6 12 6 C16.5 6 19.5 8 19.5 13 C19.5 17 16.5 18.5 12 18.5 C7.5 18.5 4.5 17 4.5 13 Z"
+      eyeStalks={
+        <>
+          <line x1="9.5" y1="7" x2="9" y2="5" />
+          <line x1="14.5" y1="7" x2="15" y2="5" />
+        </>
+      }
+      eyes={
+        <>
+          <circle cx="9" cy="4.5" r="1" fill="currentColor" stroke="none" />
+          <circle cx="15" cy="4.5" r="1" fill="currentColor" stroke="none" />
+        </>
+      }
+      legs={StdLegs}
+      extras={
+        <>
+          <path d="M5 11 C3.5 9 2 9.5 2.5 12 C3 14 4 13 5 12" />
+          <path d="M19 11 C20.5 9 22 9.5 21.5 12 C21 14 20 13 19 12" />
+          {/* Smile */}
+          <path d="M9 14.5 C10 16 14 16 15 14.5" />
+          {/* Rosy cheeks */}
+          <circle cx="7" cy="13" r="1" fill="currentColor" stroke="none" opacity="0.3" />
+          <circle cx="17" cy="13" r="1" fill="currentColor" stroke="none" opacity="0.3" />
+        </>
+      }
+    />
+  );
+}
+
+// ── 11. Cool (sunglasses) ──
+function Crab11({ className }: CrabVariantProps): JSX.Element {
+  return (
+    <SvgShell
+      className={className}
+      d="M5 13 C5 9 8 7 12 7 C16 7 19 9 19 13 C19 16 16 18 12 18 C8 18 5 16 5 13 Z"
+      eyeStalks={
+        <>
+          <line x1="10" y1="7" x2="9.5" y2="5.5" />
+          <line x1="14" y1="7" x2="14.5" y2="5.5" />
+        </>
+      }
+      eyes={
+        <>
+          {/* Sunglasses bar */}
+          <line x1="7.5" y1="5.5" x2="16.5" y2="5.5" />
+          <rect x="7" y="5" width="4" height="2" rx="0.5" fill="currentColor" stroke="none" />
+          <rect x="13" y="5" width="4" height="2" rx="0.5" fill="currentColor" stroke="none" />
+        </>
+      }
+      legs={StdLegs}
+      extras={
+        <>
+          <path d="M5 11 C3.5 9.5 1.5 10 2 12.5 C2.5 14 4 13.5 5 12.5" />
+          <path d="M19 11 C20.5 9.5 22.5 10 22 12.5 C21.5 14 20 13.5 19 12.5" />
+          {/* Cool smile */}
+          <path d="M9.5 15 C10.5 16 13.5 16 14.5 15" />
+        </>
+      }
+    />
+  );
+}
+
+// ── 12. Baby (tiny, cute) ──
+function Crab12({ className }: CrabVariantProps): JSX.Element {
+  return (
+    <SvgShell
+      className={className}
+      d="M7 13.5 C7 10.5 9.5 9 12 9 C14.5 9 17 10.5 17 13.5 C17 16 14.5 17.5 12 17.5 C9.5 17.5 7 16 7 13.5 Z"
+      eyeStalks={
+        <>
+          <line x1="10.5" y1="9.5" x2="10.5" y2="8" />
+          <line x1="13.5" y1="9.5" x2="13.5" y2="8" />
+        </>
+      }
+      eyes={
+        <>
+          <circle cx="10.5" cy="7.5" r="0.8" fill="currentColor" stroke="none" />
+          <circle cx="13.5" cy="7.5" r="0.8" fill="currentColor" stroke="none" />
+        </>
+      }
+      legs={
+        <>
+          <line x1="8" y1="16" x2="6.5" y2="18" />
+          <line x1="10" y1="17" x2="9.5" y2="19" />
+          <line x1="14" y1="17" x2="14.5" y2="19" />
+          <line x1="16" y1="16" x2="17.5" y2="18" />
+        </>
+      }
+      extras={
+        <>
+          <path d="M7.5 12 C6.5 11 5.5 11.5 6 13 C6.5 14 7 13.5 7.5 13" />
+          <path d="M16.5 12 C17.5 11 18.5 11.5 18 13 C17.5 14 17 13.5 16.5 13" />
+        </>
+      }
+    />
+  );
+}
+
+export const crabVariants: ((props: CrabVariantProps) => JSX.Element)[] = [
+  Crab1,
+  Crab2,
+  Crab3,
+  Crab4,
+  Crab5,
+  Crab6,
+  Crab7,
+  Crab8,
+  Crab9,
+  Crab10,
+  Crab11,
+  Crab12,
+];
+
+export function getCrabVariant(index: number): (props: CrabVariantProps) => JSX.Element {
+  return crabVariants[Math.abs(index) % crabVariants.length] ?? Crab1;
+}

package/src/lib/stopReason.ts

@@ -8,8 +8,10 @@ function isRecord(value: unknown): value is Record<string, unknown> {
 
 /**
  * Extracts the stop/finish reason from a captured log's response text.
- * Returns the raw stop_reason value for Anthropic, the finish_reason for
- * OpenAI, or null if the response is pending, malformed, or unrecognized.
+ * Detects the response body shape (Anthropic or OpenAI) independently of
+ * `log.apiFormat`, since the body shape may not match the declared format
+ * (e.g. an Anthropic-compatible endpoint returning Anthropic-shaped JSON
+ * while the request was classified as OpenAI).
  */
 export function extractStopReason(log: CapturedLog): StopReason {
   if (log.responseText === null) return null;
@@ -22,17 +24,16 @@ export function extractStopReason(log: CapturedLog): StopReason {
     }
     if (!isRecord(json)) return null;
 
-    // Anthropic: { stop_reason: "end_turn" | "tool_use" | ... }
-    if (log.apiFormat === "anthropic" && typeof json.stop_reason === "string") {
+    // Anthropic shape: { stop_reason: "end_turn" | "tool_use" | ... }
+    if (typeof json.stop_reason === "string") {
       if (json.stop_reason === "end_turn" || json.stop_reason === "tool_use") {
         return json.stop_reason;
       }
       return null;
     }
 
-    // OpenAI: { choices: [{ finish_reason: "stop" | ... }] }
+    // OpenAI shape: { choices: [{ finish_reason: "stop" | ... }] }
     if (
-      log.apiFormat === "openai" &&
       Array.isArray(json.choices) &&
       json.choices.length > 0 &&
       isRecord(json.choices[0]) &&

package/src/proxy/formats/anthropic/handler.ts

@@ -60,11 +60,8 @@ export const AnthropicFormatHandler: FormatHandler = {
       const json: unknown = JSON.parse(rawBody);
       if (typeof json === "object" && json !== null && !Array.isArray(json)) {
         const keys = Object.keys(json);
-        if (keys.includes("model") && keys.includes("messages")) {
-          if (keys.includes("system") || keys.includes("tools")) {
-            return true;
-          }
-        }
+        // Anthropic puts `system` as a top-level key alongside `model` and `messages`
+        return keys.includes("model") && keys.includes("messages") && keys.includes("system");
       }
       return false;
     } catch {

package/src/proxy/formats/openai/handler.ts

@@ -25,11 +25,41 @@ export const OpenAIFormatHandler: FormatHandler = {
   extractTokens(responseBody: string): TokenUsage {
     const parsed = parseOpenAIResponse(responseBody);
     if (parsed) {
+      // OpenAI puts cached_tokens in usage.prompt_tokens_details (passthrough field)
+      let cacheReadInputTokens: number | null = null;
+      try {
+        const raw: unknown = JSON.parse(responseBody);
+        if (raw !== null && typeof raw === "object" && !Array.isArray(raw)) {
+          const usageDesc = Object.getOwnPropertyDescriptor(raw, "usage");
+          if (
+            usageDesc !== undefined &&
+            typeof usageDesc.value === "object" &&
+            usageDesc.value !== null
+          ) {
+            const detailsDesc = Object.getOwnPropertyDescriptor(
+              usageDesc.value,
+              "prompt_tokens_details",
+            );
+            if (
+              detailsDesc !== undefined &&
+              typeof detailsDesc.value === "object" &&
+              detailsDesc.value !== null
+            ) {
+              const cacheDesc = Object.getOwnPropertyDescriptor(detailsDesc.value, "cached_tokens");
+              if (cacheDesc !== undefined && typeof cacheDesc.value === "number") {
+                cacheReadInputTokens = cacheDesc.value;
+              }
+            }
+          }
+        }
+      } catch {
+        // ignore parse errors
+      }
       return {
         inputTokens: parsed.usage.prompt_tokens ?? null,
         outputTokens: parsed.usage.completion_tokens ?? null,
         cacheCreationInputTokens: null,
-        cacheReadInputTokens: null,
+        cacheReadInputTokens,
       };
     }
     return {
@@ -55,12 +85,8 @@ export const OpenAIFormatHandler: FormatHandler = {
       const json: unknown = JSON.parse(rawBody);
       if (typeof json === "object" && json !== null && !Array.isArray(json)) {
         const keys = Object.keys(json);
-        if (keys.includes("model") && keys.includes("messages")) {
-          // OpenAI doesn't use "system" or "tools" keys at root level
-          if (!keys.includes("system") && !keys.includes("tools")) {
-            return true;
-          }
-        }
+        // OpenAI has `model` and `messages` at the top level, but NOT `system`
+        return keys.includes("model") && keys.includes("messages") && !keys.includes("system");
       }
       return false;
     } catch {

package/src/proxy/formats/openai/schemas.ts

@@ -73,6 +73,7 @@ export const OpenAIRequestSchema = z.object({
   tools: z.array(OpenAIToolDefinition).optional(),
   tool_choice: z
     .union([
+      z.enum(["auto", "none", "required"]),
       z.object({ type: z.literal("auto") }),
       z.object({ type: z.literal("none") }),
       z.object({ type: z.literal("function"), function: z.object({ name: z.string() }) }),

package/src/proxy/formats/openai/stream.ts

@@ -93,6 +93,30 @@ export function extractOpenAIStream(
         promptTokens = chunk.usage.prompt_tokens ?? 0;
         completionTokens = chunk.usage.completion_tokens ?? 0;
         log.inputTokens = promptTokens;
+        // Extract cached_tokens from raw parsed object (passthrough field in usage)
+        if (typeof parsed === "object" && parsed !== null && !Array.isArray(parsed)) {
+          const usageDesc = Object.getOwnPropertyDescriptor(parsed, "usage");
+          if (
+            usageDesc !== undefined &&
+            typeof usageDesc.value === "object" &&
+            usageDesc.value !== null
+          ) {
+            const detailsDesc = Object.getOwnPropertyDescriptor(
+              usageDesc.value,
+              "prompt_tokens_details",
+            );
+            if (
+              detailsDesc !== undefined &&
+              typeof detailsDesc.value === "object" &&
+              detailsDesc.value !== null
+            ) {
+              const cacheDesc = Object.getOwnPropertyDescriptor(detailsDesc.value, "cached_tokens");
+              if (cacheDesc !== undefined && typeof cacheDesc.value === "number") {
+                log.cacheReadInputTokens = cacheDesc.value;
+              }
+            }
+          }
+        }
         usageCaptured = true;
       }
 

package/src/proxy/handler.ts

@@ -5,7 +5,7 @@ import { extractRequestMetadata } from "./schemas";
 import { registry } from "./formats";
 import { findProviderByModel } from "./providers";
 import { getClientInfo } from "./socketTracker";
-import { formatForPath, type FormatHandler } from "./formats";
+import { formatForPath, formatRegistry, type FormatHandler } from "./formats";
 import {
   PROXY_IDENTITY,
   PRESERVE_HEADERS,
@@ -308,6 +308,12 @@ export async function handleProxy(req: Request): Promise<Response> {
   upstreamHeaders.forEach((value, key) => {
     upstreamHeadersObj[key.toLowerCase()] = value;
   });
+  // Detect the true format from the request body for accurate UI display.
+  // The path-based format (formatHandler.format) drives routing, but the body
+  // structure determines whether it's actually Anthropic or OpenAI.
+  const bodyFormat = formatRegistry.detectFormat(requestBody);
+  const displayApiFormat = bodyFormat !== "unknown" ? bodyFormat : formatHandler.format;
+
   const log = await createLog(
     req.method,
     parsed.apiPath,
@@ -316,7 +322,7 @@ export async function handleProxy(req: Request): Promise<Response> {
     clientInfo,
     rawHeaders,
     upstreamHeadersObj,
-    formatHandler.format,
+    displayApiFormat,
     model,
     sessionId,
     preAcquiredId,

package/src/proxy/schemas.ts

@@ -111,9 +111,12 @@ function detectFormat(rawBody: string | null): RequestFormat {
   try {
     const json: unknown = JSON.parse(rawBody);
     if (typeof json === "object" && json !== null && !Array.isArray(json)) {
-      const keys = Object.keys(json);
-      if (keys.includes("model") && keys.includes("messages")) {
-        if (keys.includes("system") || keys.includes("tools")) {
+      const hasModel = safeGetProperty(json, "model") !== undefined;
+      const hasMessages = safeGetProperty(json, "messages") !== undefined;
+      if (hasModel && hasMessages) {
+        // Anthropic requests put `system` as a top-level key; OpenAI does not.
+        // Both formats can have `tools`, so we check `system` as the discriminator.
+        if (safeGetProperty(json, "system") !== undefined) {
           return "anthropic";
         }
         const msgVal = safeGetProperty(json, "messages");