@tonyclaw/llm-inspector 1.14.9 → 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/styles/globals.css

@@ -40,6 +40,9 @@
   --radius-md: calc(var(--radius) - 2px);
   --radius-lg: var(--radius);
   --radius-xl: calc(var(--radius) + 4px);
+  --animate-crab-crawl: crab-crawl-down 0.6s ease-in-out infinite;
+  --animate-crab-appear: crab-appear 300ms ease-out;
+  --animate-crab-settle: crab-settle 400ms ease-in-out;
 }
 
 :root {
@@ -111,6 +114,41 @@
   --sidebar-ring: oklch(0.556 0 0);
 }
 
+@keyframes crab-crawl-down {
+  0%, 100% {
+    transform: translateY(0px);
+  }
+  25% {
+    transform: translateY(2px);
+  }
+  75% {
+    transform: translateY(-1px);
+  }
+}
+
+@keyframes crab-appear {
+  0% {
+    transform: scale(0.5);
+    opacity: 0;
+  }
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+@keyframes crab-settle {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.15);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
 @layer base {
   * {
     @apply border-border outline-ring/50;