@tonyclaw/llm-inspector 1.14.8 → 1.15.0

package/.output/server/_ssr/{index-9uTJ4xYR.mjs → index-P66uoVEU.mjs}

@@ -1,5 +1,5 @@
 import { r as reactExports, j as jsxRuntimeExports, a as React } from "../_libs/react.mjs";
-import { C as CapturedLogSchema, a as parseRequest, s as stripClaudeCodeBillingHeader, R as RuntimeConfigSchema, c as createPendingProviderTestResults, P as ProviderTestResultsSchema, b as createFailedProviderTestResults, d as ProviderConfigSchema, p as parseOpenAIResponse, I as InspectorResponseSchema } from "./router-BKnjB_zi.mjs";
+import { C as CapturedLogSchema, a as parseRequest, R as RuntimeConfigSchema, c as createPendingProviderTestResults, P as ProviderTestResultsSchema, b as createFailedProviderTestResults, d as ProviderConfigSchema, O as OpenAIRequestSchema, p as parseOpenAIResponse, I as InspectorResponseSchema, s as stripClaudeCodeBillingHeader } from "./router-DpLCKk51.mjs";
 import { u as useSWR, a as useSWRConfig } from "../_libs/swr.mjs";
 import { u as useVirtualizer } from "../_libs/tanstack__react-virtual.mjs";
 import { c as clsx } from "../_libs/clsx.mjs";
@@ -8,13 +8,13 @@ import { J as JSZip } from "../_libs/jszip.mjs";
 import { c as cva } from "../_libs/class-variance-authority.mjs";
 import { d as diffLines, a as diffJson } from "../_libs/diff.mjs";
 import { R as Root, T as Trigger$2, C as Content, a as Close, b as Title, P as Portal$2, O as Overlay } from "../_libs/radix-ui__react-dialog.mjs";
-import { R as Root2, T as Trigger$1, I as Icon, V as Value, P as Portal$1, C as Content2$1, a as Viewport, b as Item, c as ItemIndicator, d as ItemText, S as ScrollUpButton, e as ScrollDownButton } from "../_libs/radix-ui__react-select.mjs";
+import { R as Root2, T as Trigger, I as Icon, V as Value, P as Portal, C as Content2, a as Viewport, b as Item, c as ItemIndicator, d as ItemText, S as ScrollUpButton, e as ScrollDownButton } from "../_libs/radix-ui__react-select.mjs";
 import "../_libs/modelcontextprotocol__server.mjs";
-import { D as Download, L as LayoutGrid, a as List, G as GitBranch, S as Settings, C as ChevronDown, b as Check, c as GitCompareArrows, R as RotateCcw, X, U as Upload, d as Scan, P as Plus, e as Copy, f as CircleAlert, g as ChevronUp, h as LoaderCircle, i as ChevronRight, j as Clock, M as MessageSquare, Z as Zap, W as Wrench, k as Globe, l as User, F as FileTerminal, m as Radio, n as Rows3, o as Columns2, p as Minus, q as Pencil, E as Equal, r as EyeOff, s as Eye, t as ExternalLink, u as RotateCw, T as Trash2, A as ArrowUp, v as ArrowDown, w as TriangleAlert, x as CircleCheckBig, y as CircleStop, z as CircleQuestionMark, B as Server, H as Gauge, I as Lock, J as Wifi, K as WifiOff, N as ChevronsUp, O as ChevronsDown, Q as Brain, V as Terminal } from "../_libs/lucide-react.mjs";
+import { D as Download, S as Settings, C as ChevronDown, a as Check, X, U as Upload, b as Scan, P as Plus, c as Copy, d as CircleAlert, e as ChevronUp, L as LoaderCircle, f as ChevronRight, g as User, h as Clock, M as MessageSquare, Z as Zap, R as Rows3, i as Columns2, j as Minus, k as Pencil, E as Equal, l as EyeOff, m as Eye, n as ExternalLink, o as RotateCw, T as Trash2, G as GitCompareArrows, p as RotateCcw, q as CircleCheckBig, W as Wrench, r as Globe, F as FileTerminal, s as Radio, t as CircleQuestionMark, u as Server, v as Gauge, w as Lock, x as Wifi, y as WifiOff, A as ArrowUp, z as ArrowDown, B as TriangleAlert, H as CircleStop, I as ChevronsUp, J as ChevronsDown, K as Brain, N as Terminal } from "../_libs/lucide-react.mjs";
 import { M as Markdown } from "../_libs/react-markdown.mjs";
 import { a as array, b as string, u as union, d as object, l as literal, n as number, c as boolean, _ as _enum } from "../_libs/zod.mjs";
-import { P as Provider, R as Root3, T as Trigger, a as Portal, C as Content2, A as Arrow2 } from "../_libs/radix-ui__react-tooltip.mjs";
-import { R as Root2$1, L as List$1, T as Trigger$3, C as Content$1 } from "../_libs/radix-ui__react-tabs.mjs";
+import { P as Provider, R as Root3, T as Trigger$1, a as Portal$1, C as Content2$1, A as Arrow2 } from "../_libs/radix-ui__react-tooltip.mjs";
+import { R as Root2$1, L as List, T as Trigger$3, C as Content$1 } from "../_libs/radix-ui__react-tabs.mjs";
 import { S as Slot } from "../_libs/radix-ui__react-slot.mjs";
 import { R as Root$1 } from "../_libs/radix-ui__react-separator.mjs";
 import { R as Root$2, C as CollapsibleTrigger$1, a as CollapsibleContent$1 } from "../_libs/radix-ui__react-collapsible.mjs";
@@ -269,7 +269,7 @@ function Tooltip({ ...props }) {
   return /* @__PURE__ */ jsxRuntimeExports.jsx(Root3, { "data-slot": "tooltip", ...props });
 }
 function TooltipTrigger({ ...props }) {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(Trigger, { "data-slot": "tooltip-trigger", ...props });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Trigger$1, { "data-slot": "tooltip-trigger", ...props });
 }
 function TooltipContent({
   className,
@@ -277,8 +277,8 @@ function TooltipContent({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(Portal, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
-    Content2,
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Portal$1, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    Content2$1,
     {
       "data-slot": "tooltip-content",
       sideOffset,
@@ -333,7 +333,7 @@ async function exportLogsAsZip(logs) {
   document.body.removeChild(anchor);
   URL.revokeObjectURL(url);
 }
-const version = "1.14.8";
+const version = "1.15.0";
 const packageJson = {
   version
 };
@@ -348,13 +348,13 @@ function extractStopReason(log) {
       json = JSON.parse(json);
     }
     if (!isRecord(json)) return null;
-    if (log.apiFormat === "anthropic" && typeof json.stop_reason === "string") {
+    if (typeof json.stop_reason === "string") {
       if (json.stop_reason === "end_turn" || json.stop_reason === "tool_use") {
         return json.stop_reason;
       }
       return null;
     }
-    if (log.apiFormat === "openai" && Array.isArray(json.choices) && json.choices.length > 0 && isRecord(json.choices[0]) && typeof json.choices[0].finish_reason === "string" && json.choices[0].finish_reason === "stop") {
+    if (Array.isArray(json.choices) && json.choices.length > 0 && isRecord(json.choices[0]) && typeof json.choices[0].finish_reason === "string" && json.choices[0].finish_reason === "stop") {
       return "stop";
     }
     return null;
@@ -362,6 +362,9 @@ function extractStopReason(log) {
     return null;
   }
 }
+function isTurnBoundary(stopReason) {
+  return stopReason === "end_turn" || stopReason === "stop";
+}
 const badgeVariants = cva(
   "inline-flex items-center justify-center rounded-full border border-transparent px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
   {
@@ -418,8 +421,7 @@ function ConversationHeader({
   onToggle,
   hideApiFormat = false,
   isLoading = false,
-  viewMode,
-  onToggleViewMode
+  userAgent
 }) {
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "div",
@@ -441,22 +443,6 @@ function ConversationHeader({
       },
       children: [
         expanded ? /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronDown, { className: "size-4 text-muted-foreground shrink-0" }) : isLoading ? /* @__PURE__ */ jsxRuntimeExports.jsx(LoaderCircle, { className: "size-4 animate-spin text-muted-foreground shrink-0" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronRight, { className: "size-4 text-muted-foreground shrink-0" }),
-        expanded && onToggleViewMode !== void 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(
-          "button",
-          {
-            type: "button",
-            onClick: (e) => {
-              e.stopPropagation();
-              onToggleViewMode();
-            },
-            className: cn(
-              "px-1.5 py-0.5 rounded text-[10px] font-mono transition-colors shrink-0 cursor-pointer",
-              viewMode === "thread" ? "bg-amber-500/15 text-amber-400 border border-amber-500/30" : "bg-muted text-muted-foreground border border-border hover:text-foreground"
-            ),
-            title: viewMode === "thread" ? "Thread view — click for flat view" : "Flat view — click for thread view",
-            children: /* @__PURE__ */ jsxRuntimeExports.jsx(GitBranch, { className: "size-3" })
-          }
-        ),
         /* @__PURE__ */ jsxRuntimeExports.jsx(
           "span",
           {
@@ -465,6 +451,17 @@ function ConversationHeader({
             children: conversationId.length > 24 ? conversationId.slice(0, 12) + "…" + conversationId.slice(-12) : conversationId
           }
         ),
+        userAgent !== null && userAgent !== void 0 && userAgent !== "" && /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          "span",
+          {
+            className: "flex items-center gap-1 text-muted-foreground text-xs shrink-0",
+            title: userAgent,
+            children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(User, { className: "size-3" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono tabular-nums truncate max-w-[120px]", children: userAgent })
+            ]
+          }
+        ),
         !hideApiFormat && /* @__PURE__ */ jsxRuntimeExports.jsx(
           Badge,
           {
@@ -983,7 +980,7 @@ function TabsList({
   ...props
 }) {
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
-    List$1,
+    List,
     {
       "data-slot": "tabs-list",
       "data-variant": variant,
@@ -1455,16 +1452,15 @@ function CacheTrendIndicator({ trend }) {
 }
 const LogEntryHeader = reactExports.memo(function({
   log,
-  parsedRequest,
+  messageCount = null,
+  toolCount = null,
   expanded,
   onToggle,
-  suppressApiFormatBadge = false,
+  responseToolNames = null,
   cacheTrend = null
 }) {
   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 !== void 0 && parsedRequest.tools.length > 0 ? parsedRequest.tools.length : null;
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "div",
     {
@@ -1491,20 +1487,14 @@ const LogEntryHeader = reactExports.memo(function({
           /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "shrink-0", children: /* @__PURE__ */ jsxRuntimeExports.jsx(ProviderLogo, { provider: detectProvider(log.model), className: "size-4" }) }) }),
           /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: log.model })
         ] }) }),
-        !suppressApiFormatBadge && /* @__PURE__ */ jsxRuntimeExports.jsx(
+        statusCategory !== "success" && /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: statusCategory === "server_error" ? /* @__PURE__ */ jsxRuntimeExports.jsx(
           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"
-            ),
-            children: log.apiFormat === "anthropic" ? "Anthropic" : log.apiFormat === "openai" ? "OpenAI" : "Unknown"
+            variant: "destructive",
+            className: "text-[10px] px-1.5 py-0 h-5 font-mono tabular-nums",
+            children: log.responseStatus
           }
-        ),
-        statusCategory === "server_error" ? /* @__PURE__ */ jsxRuntimeExports.jsx(Badge, { variant: "destructive", className: "text-[10px] px-1.5 py-0 h-5 font-mono tabular-nums", children: log.responseStatus }) : statusCategory === "pending" ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+        ) : statusCategory === "pending" ? /* @__PURE__ */ jsxRuntimeExports.jsx(
           Badge,
           {
             variant: "outline",
@@ -1524,8 +1514,8 @@ const LogEntryHeader = reactExports.memo(function({
             ),
             children: log.responseStatus
           }
-        ),
-        log.elapsedMs !== null && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "flex items-center gap-1 text-muted-foreground text-xs shrink-0", children: [
+        ) }),
+        log.elapsedMs !== null && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "hidden xl:flex items-center gap-1 text-muted-foreground text-xs shrink-0", children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(Clock, { className: "size-3" }),
           /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono tabular-nums", children: formatElapsed(log.elapsedMs) })
         ] }),
@@ -1583,10 +1573,20 @@ const LogEntryHeader = reactExports.memo(function({
           ] }) }),
           /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: "Number of tools defined in the request" })
         ] }) }),
+        responseToolNames !== null && responseToolNames.length > 0 && /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipProvider, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "flex items-center gap-1 text-amber-400/80 text-xs shrink-0", children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(Wrench, { className: "size-3" }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono tabular-nums truncate max-w-[160px]", children: responseToolNames.join(", ") })
+          ] }) }),
+          /* @__PURE__ */ jsxRuntimeExports.jsxs(TooltipContent, { children: [
+            "Tools called by model: ",
+            responseToolNames.join(", ")
+          ] })
+        ] }) }),
         log.origin !== null && /* @__PURE__ */ jsxRuntimeExports.jsxs(
           "span",
           {
-            className: "flex items-center gap-1 text-muted-foreground text-xs shrink-0",
+            className: "hidden xl:flex items-center gap-1 text-muted-foreground text-xs shrink-0",
             title: `Origin: ${log.origin}`,
             children: [
               /* @__PURE__ */ jsxRuntimeExports.jsx(Globe, { className: "size-3" }),
@@ -1594,19 +1594,8 @@ const LogEntryHeader = reactExports.memo(function({
             ]
           }
         ),
-        log.userAgent !== null && /* @__PURE__ */ jsxRuntimeExports.jsxs(
-          "span",
-          {
-            className: "flex items-center gap-1 text-muted-foreground text-xs shrink-0",
-            title: `User-Agent: ${log.userAgent}`,
-            children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx(User, { className: "size-3" }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono tabular-nums truncate max-w-[150px]", title: log.userAgent, children: log.userAgent })
-            ]
-          }
-        ),
         (log.clientPid !== null || log.clientProjectFolder !== null) && /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipProvider, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "flex items-center gap-1 text-purple-400/80 text-xs shrink-0", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "hidden xl:flex items-center gap-1 text-purple-400/80 text-xs shrink-0", children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx(FileTerminal, { className: "size-3" }),
             log.clientProjectFolder !== null ? /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono tabular-nums", children: log.clientProjectFolder }) : /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "font-mono tabular-nums", children: [
               "PID ",
@@ -2479,7 +2468,6 @@ function DiffToggleButton({
 const LogEntry = reactExports.memo(function({
   log,
   viewMode = "simple",
-  suppressApiFormatBadge = false,
   strip,
   cacheTrend = null,
   onCompareWithPrevious
@@ -2491,7 +2479,60 @@ const LogEntry = reactExports.memo(function({
   const [replayOpen, setReplayOpen] = reactExports.useState(false);
   const [headersDiff, setHeadersDiff] = reactExports.useState(false);
   const [requestDiff, setRequestDiff] = reactExports.useState(false);
-  const parsedRequest = reactExports.useMemo(() => parseRequest(log.rawRequestBody), [log.rawRequestBody]);
+  const messageCount = reactExports.useMemo(() => {
+    if (log.rawRequestBody === null) return null;
+    if (log.apiFormat === "anthropic") {
+      const parsed = parseRequest(log.rawRequestBody);
+      if (parsed !== null) return parsed.messages.length;
+    } else if (log.apiFormat === "openai") {
+      try {
+        const result = OpenAIRequestSchema.safeParse(JSON.parse(log.rawRequestBody));
+        if (result.success) return result.data.messages.length;
+      } catch {
+      }
+    }
+    return null;
+  }, [log.rawRequestBody, log.apiFormat]);
+  const toolCount = reactExports.useMemo(() => {
+    if (log.rawRequestBody === null) return null;
+    if (log.apiFormat === "anthropic") {
+      const parsed = parseRequest(log.rawRequestBody);
+      if (parsed !== null && parsed.tools !== void 0 && parsed.tools.length > 0) {
+        return parsed.tools.length;
+      }
+    } else if (log.apiFormat === "openai") {
+      try {
+        const result = OpenAIRequestSchema.safeParse(JSON.parse(log.rawRequestBody));
+        if (result.success && result.data.tools !== void 0 && result.data.tools.length > 0) {
+          return result.data.tools.length;
+        }
+      } catch {
+      }
+    }
+    return null;
+  }, [log.rawRequestBody, log.apiFormat]);
+  const responseToolNames = reactExports.useMemo(() => {
+    if (log.responseText === null) return null;
+    if (log.apiFormat === "openai") {
+      const parsed = parseOpenAIResponse(log.responseText);
+      if (parsed !== null) {
+        const toolCalls = parsed.choices[0]?.message?.tool_calls;
+        if (toolCalls !== void 0 && toolCalls !== null && toolCalls.length > 0) {
+          return toolCalls.map((tc) => tc.function?.name ?? "?").filter((n) => n !== "");
+        }
+      }
+    } else if (log.apiFormat === "anthropic") {
+      try {
+        const result = InspectorResponseSchema.safeParse(JSON.parse(log.responseText));
+        if (result.success) {
+          const names = result.data.content.filter((c) => c.type === "tool_use").map((c) => c.name);
+          if (names.length > 0) return names;
+        }
+      } catch {
+      }
+    }
+    return null;
+  }, [log.responseText, log.apiFormat]);
   const strippedRequestBody = reactExports.useMemo(() => {
     if (!strip || log.apiFormat !== "anthropic" || log.rawRequestBody === null) {
       return null;
@@ -2537,10 +2578,11 @@ const LogEntry = reactExports.memo(function({
         LogEntryHeader,
         {
           log,
-          parsedRequest,
+          messageCount,
+          toolCount,
           expanded,
           onToggle: () => setExpanded(!expanded),
-          suppressApiFormatBadge,
+          responseToolNames,
           cacheTrend
         }
       ),
@@ -2727,72 +2769,470 @@ const LogEntry = reactExports.memo(function({
     /* @__PURE__ */ jsxRuntimeExports.jsx(ReplayDialog, { log, open: replayOpen, onOpenChange: setReplayOpen })
   ] });
 });
+function SvgShell({
+  className,
+  style,
+  d,
+  eyeStalks,
+  eyes,
+  legs,
+  extras
+}) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      style,
+      className: cn("inline-block size-5", className),
+      children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d }),
+        eyeStalks,
+        eyes,
+        legs,
+        extras
+      ]
+    }
+  );
+}
+const StdLegs = /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+  /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "6.5", y1: "16", x2: "4.5", y2: "19.5" }),
+  /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "9", y1: "17.5", x2: "8", y2: "20.5" }),
+  /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "15", y1: "17.5", x2: "16", y2: "20.5" }),
+  /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "17.5", y1: "16", x2: "19.5", y2: "19.5" })
+] });
+const ShortLegs = /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+  /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "7", y1: "16", x2: "5.5", y2: "18.5" }),
+  /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "9.5", y1: "17", x2: "8.5", y2: "19.5" }),
+  /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "14.5", y1: "17", x2: "15.5", y2: "19.5" }),
+  /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "17", y1: "16", x2: "18.5", y2: "18.5" })
+] });
+function Crab1({ className }) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    SvgShell,
+    {
+      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: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "10", y1: "7", x2: "9.5", y2: "5" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "14", y1: "7", x2: "14.5", y2: "5" })
+      ] }),
+      eyes: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "9.5", cy: "4.5", r: "0.9", fill: "currentColor", stroke: "none" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "14.5", cy: "4.5", r: "0.9", fill: "currentColor", stroke: "none" })
+      ] }),
+      legs: StdLegs,
+      extras: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M5 11 C3.5 9.5 1.5 10 2 12.5 C2.5 14 4 13.5 5 12.5" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M19 11 C20.5 9.5 22.5 10 22 12.5 C21.5 14 20 13.5 19 12.5" })
+      ] })
+    }
+  );
+}
+function Crab2({ className }) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    SvgShell,
+    {
+      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: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "9.5", y1: "6.5", x2: "9.5", y2: "4.5" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "14.5", y1: "6.5", x2: "14.5", y2: "4.5" })
+      ] }),
+      eyes: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "9.5", cy: "4", r: "1.1", fill: "currentColor", stroke: "none" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "14.5", cy: "4", r: "1.1", fill: "currentColor", stroke: "none" })
+      ] }),
+      legs: ShortLegs,
+      extras: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M5 11 C4 9.5 2.5 10 3 12 C3.5 13.5 4.5 13 5 12" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M19 11 C20 9.5 21.5 10 21 12 C20.5 13.5 19.5 13 19 12" })
+      ] })
+    }
+  );
+}
+function Crab3({ className }) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    SvgShell,
+    {
+      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: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "7", y1: "7", x2: "6.5", y2: "4.5" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "17", y1: "7", x2: "17.5", y2: "4.5" })
+      ] }),
+      eyes: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "6.5", cy: "4", r: "0.8", fill: "currentColor", stroke: "none" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "17.5", cy: "4", r: "0.8", fill: "currentColor", stroke: "none" })
+      ] }),
+      legs: StdLegs,
+      extras: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M4 12 C2.5 10.5 1 11 1.5 13 C2 14.5 3.5 14 4.5 13" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M20 12 C21.5 10.5 23 11 22.5 13 C22 14.5 20.5 14 19.5 13" })
+      ] })
+    }
+  );
+}
+function Crab4({ className }) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    SvgShell,
+    {
+      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: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "10", y1: "6.5", x2: "10", y2: "3.5" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "14", y1: "6.5", x2: "14", y2: "3.5" })
+      ] }),
+      eyes: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "10", cy: "3", r: "0.7", fill: "currentColor", stroke: "none" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "14", cy: "3", r: "0.7", fill: "currentColor", stroke: "none" })
+      ] }),
+      legs: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "7", y1: "17", x2: "5", y2: "20.5" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "9.5", y1: "18.5", x2: "8.5", y2: "21.5" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "14.5", y1: "18.5", x2: "15.5", y2: "21.5" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "17", y1: "17", x2: "19", y2: "20.5" })
+      ] }),
+      extras: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M6.5 11 C5 8.5 3 9 3.5 11.5 C4 13.5 5 13 6 12" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M17.5 11 C19 8.5 21 9 20.5 11.5 C20 13.5 19 13 18 12" })
+      ] })
+    }
+  );
+}
+function Crab5({ className }) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    SvgShell,
+    {
+      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: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "10", y1: "7", x2: "9.5", y2: "5" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "14", y1: "7", x2: "14.5", y2: "5" })
+      ] }),
+      eyes: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "9.5", cy: "4.5", r: "0.8", fill: "currentColor", stroke: "none" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "14.5", cy: "4.5", r: "0.8", fill: "currentColor", stroke: "none" })
+      ] }),
+      legs: StdLegs,
+      extras: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M5 11 C3.5 9.5 1.5 10 2 12.5 C2.5 14 4 13.5 5 12.5" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M19 11 C20.5 9.5 22.5 10 22 12.5 C21.5 14 20 13.5 19 12.5" })
+      ] })
+    }
+  );
+}
+function Crab6({ className }) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    SvgShell,
+    {
+      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: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "10", y1: "7", x2: "9.5", y2: "5" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "14", y1: "7", x2: "14.5", y2: "5" })
+      ] }),
+      eyes: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "9.5", cy: "4.5", r: "0.9", fill: "currentColor", stroke: "none" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "13.5", y1: "4", x2: "15.5", y2: "5" })
+      ] }),
+      legs: StdLegs,
+      extras: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M5 11 C3.5 9.5 1.5 10 2 12.5 C2.5 14 4 13.5 5 12.5" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M19 11 C20.5 9.5 22.5 10 22 12.5 C21.5 14 20 13.5 19 12.5" })
+      ] })
+    }
+  );
+}
+function Crab7({ className }) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    SvgShell,
+    {
+      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: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "10", y1: "8", x2: "10", y2: "6" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "14", y1: "8", x2: "14", y2: "6" })
+      ] }),
+      eyes: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "9", y1: "6", x2: "11", y2: "6.5" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "13", y1: "6", x2: "15", y2: "6.5" })
+      ] }),
+      legs: ShortLegs,
+      extras: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M6 11.5 C4.5 10.5 3 11 3.5 12.5 C4 13.5 5 13 5.5 12.5" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M18 11.5 C19.5 10.5 21 11 20.5 12.5 C20 13.5 19 13 18.5 12.5" })
+      ] })
+    }
+  );
+}
+function Crab8({ className }) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    SvgShell,
+    {
+      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: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "10", y1: "7", x2: "9.5", y2: "5" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "14", y1: "7", x2: "14.5", y2: "5" })
+      ] }),
+      eyes: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "9.5", cy: "4.5", r: "0.7", fill: "currentColor", stroke: "none" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "14.5", cy: "4.5", r: "0.7", fill: "currentColor", stroke: "none" })
+      ] }),
+      legs: StdLegs,
+      extras: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M5 11 C3.5 9.5 1.5 10 2 12.5 C2.5 14 4 13.5 5 12.5" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M19 11 C20.5 9.5 22.5 10 22 12.5 C21.5 14 20 13.5 19 12.5" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "8.5", y1: "4", x2: "10.5", y2: "4.5" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "15.5", y1: "4", x2: "13.5", y2: "4.5" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M9 15.5 C10 14.5 14 14.5 15 15.5" })
+      ] })
+    }
+  );
+}
+function Crab9({ className }) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    SvgShell,
+    {
+      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: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "10", y1: "7", x2: "9.5", y2: "5" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "14", y1: "7", x2: "14.5", y2: "5" })
+      ] }),
+      eyes: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "9.5", cy: "4.5", r: "1.2", fill: "none", stroke: "currentColor" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "14.5", cy: "4.5", r: "1.2", fill: "none", stroke: "currentColor" })
+      ] }),
+      legs: StdLegs,
+      extras: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M5 11 C3.5 9.5 1.5 10 2 12.5 C2.5 14 4 13.5 5 12.5" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M19 11 C20.5 9.5 22.5 10 22 12.5 C21.5 14 20 13.5 19 12.5" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("ellipse", { cx: "12", cy: "15", rx: "2", ry: "1.5", fill: "currentColor", stroke: "none" })
+      ] })
+    }
+  );
+}
+function Crab10({ className }) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    SvgShell,
+    {
+      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: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "9.5", y1: "7", x2: "9", y2: "5" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "14.5", y1: "7", x2: "15", y2: "5" })
+      ] }),
+      eyes: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "9", cy: "4.5", r: "1", fill: "currentColor", stroke: "none" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "15", cy: "4.5", r: "1", fill: "currentColor", stroke: "none" })
+      ] }),
+      legs: StdLegs,
+      extras: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M5 11 C3.5 9 2 9.5 2.5 12 C3 14 4 13 5 12" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M19 11 C20.5 9 22 9.5 21.5 12 C21 14 20 13 19 12" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M9 14.5 C10 16 14 16 15 14.5" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "7", cy: "13", r: "1", fill: "currentColor", stroke: "none", opacity: "0.3" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "17", cy: "13", r: "1", fill: "currentColor", stroke: "none", opacity: "0.3" })
+      ] })
+    }
+  );
+}
+function Crab11({ className }) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    SvgShell,
+    {
+      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: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "10", y1: "7", x2: "9.5", y2: "5.5" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "14", y1: "7", x2: "14.5", y2: "5.5" })
+      ] }),
+      eyes: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "7.5", y1: "5.5", x2: "16.5", y2: "5.5" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("rect", { x: "7", y: "5", width: "4", height: "2", rx: "0.5", fill: "currentColor", stroke: "none" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("rect", { x: "13", y: "5", width: "4", height: "2", rx: "0.5", fill: "currentColor", stroke: "none" })
+      ] }),
+      legs: StdLegs,
+      extras: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M5 11 C3.5 9.5 1.5 10 2 12.5 C2.5 14 4 13.5 5 12.5" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M19 11 C20.5 9.5 22.5 10 22 12.5 C21.5 14 20 13.5 19 12.5" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M9.5 15 C10.5 16 13.5 16 14.5 15" })
+      ] })
+    }
+  );
+}
+function Crab12({ className }) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    SvgShell,
+    {
+      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: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "10.5", y1: "9.5", x2: "10.5", y2: "8" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "13.5", y1: "9.5", x2: "13.5", y2: "8" })
+      ] }),
+      eyes: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "10.5", cy: "7.5", r: "0.8", fill: "currentColor", stroke: "none" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "13.5", cy: "7.5", r: "0.8", fill: "currentColor", stroke: "none" })
+      ] }),
+      legs: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "8", y1: "16", x2: "6.5", y2: "18" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "10", y1: "17", x2: "9.5", y2: "19" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "14", y1: "17", x2: "14.5", y2: "19" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "16", y1: "16", x2: "17.5", y2: "18" })
+      ] }),
+      extras: /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M7.5 12 C6.5 11 5.5 11.5 6 13 C6.5 14 7 13.5 7.5 13" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M16.5 12 C17.5 11 18.5 11.5 18 13 C17.5 14 17 13.5 16.5 13" })
+      ] })
+    }
+  );
+}
+const crabVariants = [
+  Crab1,
+  Crab2,
+  Crab3,
+  Crab4,
+  Crab5,
+  Crab6,
+  Crab7,
+  Crab8,
+  Crab9,
+  Crab10,
+  Crab11,
+  Crab12
+];
+function getCrabVariant(index) {
+  return crabVariants[Math.abs(index) % crabVariants.length] ?? Crab1;
+}
 function ThreadConnector({
   stopReason,
   isPending,
   isFirst,
-  isLast
+  isTurnStart,
+  crabIndex = 0,
+  collapsible = false,
+  collapsed = false,
+  onToggle
 }) {
   const isBoundary = stopReason === "end_turn" || stopReason === "stop";
-  const isToolUse = stopReason === "tool_use";
-  cn(
-    "w-0.5 bg-muted-foreground/30",
-    isPending && "border-dashed bg-transparent border-l-2 border-muted-foreground/20"
-  );
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-stretch h-full w-6 shrink-0 relative", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "absolute left-1/2 -translate-x-1/2 w-0.5 top-0 flex flex-col items-center", children: [
-      !isFirst && /* @__PURE__ */ jsxRuntimeExports.jsx(
-        "div",
-        {
-          className: cn("w-0.5 grow", "bg-muted-foreground/30", "h-4"),
-          style: { minHeight: "0.5rem" }
-        }
-      ),
-      isFirst && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "h-4" })
-    ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "absolute left-1/2 -translate-x-1/2 top-4 flex items-center justify-center z-10", children: isBoundary ? /* @__PURE__ */ jsxRuntimeExports.jsx(
-      "div",
+  const isRunning = isPending && !isBoundary;
+  const Crab = reactExports.useMemo(() => getCrabVariant(crabIndex), [crabIndex]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col items-center w-6 shrink-0", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex justify-center h-2.5", children: !isFirst && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-0.5 bg-muted-foreground/30" }) }),
+    collapsible && /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "button",
       {
-        className: cn(
-          "size-2.5 rounded-full border-2",
-          "bg-background border-amber-400",
-          "shadow-[0_0_6px_rgba(251,191,36,0.4)]"
-        ),
-        title: stopReason === "end_turn" ? "End of Turn (Anthropic)" : "End of Turn (OpenAI)"
+        type: "button",
+        onClick: onToggle,
+        title: collapsed ? "Expand turn" : "Collapse turn",
+        className: "cursor-pointer flex justify-center py-0.5",
+        children: collapsed ? /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronRight, { className: "size-3 text-muted-foreground hover:text-foreground transition-colors" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronDown, { className: "size-3 text-muted-foreground hover:text-foreground transition-colors" })
       }
-    ) : isToolUse ? /* @__PURE__ */ jsxRuntimeExports.jsx(
-      "div",
+    ),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex items-center justify-center py-0.5", children: isBoundary ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "span",
       {
-        className: "size-2 rounded-full bg-muted-foreground/25",
-        title: "Tool Use — turn continues"
+        title: stopReason === "end_turn" ? "End of Turn (Anthropic)" : "End of Turn (OpenAI)",
+        children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          Crab,
+          {
+            className: cn(
+              "size-3.5 text-amber-400",
+              "animate-crab-settle",
+              "drop-shadow-[0_0_4px_rgba(251,191,36,0.5)]"
+            )
+          }
+        )
       }
-    ) : isPending ? /* @__PURE__ */ jsxRuntimeExports.jsx(
-      "div",
+    ) : isTurnStart ? /* @__PURE__ */ jsxRuntimeExports.jsx("span", { title: "Start of turn", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      Crab,
       {
-        className: "size-2.5 rounded-full border-2 border-dashed border-muted-foreground/30 animate-pulse",
-        title: "Response pending"
+        className: cn(
+          "size-3.5 text-emerald-400",
+          "animate-crab-appear",
+          "drop-shadow-[0_0_4px_rgba(52,211,153,0.5)]"
+        )
       }
-    ) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "size-1.5 rounded-full bg-muted-foreground/30" }) }),
-    /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    ) }) : isRunning ? /* @__PURE__ */ jsxRuntimeExports.jsx("span", { title: "Processing…", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Crab, { className: cn("size-3.5 text-amber-300/80", "animate-crab-crawl") }) }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Crab, { className: "size-3.5 text-muted-foreground/40" }) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 flex justify-center min-h-1", children: isBoundary ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-0.5 bg-muted-foreground/10 h-4" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(
       "div",
       {
-        className: "absolute left-1/2 -translate-x-1/2 w-0.5 top-4 flex flex-col items-center",
-        style: { bottom: 0 },
-        children: [
-          !isBoundary && /* @__PURE__ */ jsxRuntimeExports.jsx(
-            "div",
+        className: cn(
+          "w-0.5 h-full",
+          isPending ? "border-dashed bg-transparent border-l-2 border-muted-foreground/20" : "bg-muted-foreground/30"
+        )
+      }
+    ) })
+  ] });
+}
+function TurnGroup({
+  logs,
+  viewMode,
+  strip,
+  cacheTrends,
+  onCompareWithPrevious,
+  turnIndex = 0
+}) {
+  const stopReasons = reactExports.useMemo(() => logs.map((l) => extractStopReason(l)), [logs]);
+  const lastIdx = logs.length - 1;
+  const lastStop = stopReasons[lastIdx] ?? null;
+  const isComplete = lastStop !== null ? isTurnBoundary(lastStop) : false;
+  const isPending = logs[lastIdx]?.responseStatus === null;
+  const collapsible = isComplete && !isPending;
+  const [collapsed, setCollapsed] = reactExports.useState(false);
+  const toggleCollapse = reactExports.useCallback(() => {
+    if (collapsible) setCollapsed((prev) => !prev);
+  }, [collapsible]);
+  const visibleLogs = reactExports.useMemo(() => {
+    if (!collapsed) return logs;
+    const last = logs[lastIdx];
+    return last !== void 0 ? [last] : [];
+  }, [logs, collapsed, lastIdx]);
+  const bgClass = turnIndex % 2 === 0 ? "bg-muted/10" : "bg-muted/25";
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "div",
+    {
+      className: cn("border rounded-lg", isPending ? "border-amber-500/10" : "border-transparent"),
+      children: visibleLogs.map((log, visibleIdx) => {
+        const originalIdx = collapsed ? lastIdx : visibleIdx;
+        const reason = stopReasons[originalIdx] ?? null;
+        const isBoundary = reason === "end_turn" || reason === "stop";
+        return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-stretch", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(
+            ThreadConnector,
             {
-              className: cn(
-                "w-0.5 flex-1",
-                isPending ? "border-dashed bg-transparent border-l-2 border-muted-foreground/20" : "bg-muted-foreground/30"
-              )
+              stopReason: reason,
+              isPending: log.responseStatus === null,
+              isFirst: originalIdx === 0,
+              isTurnStart: originalIdx === 0,
+              crabIndex: log.id % 12,
+              collapsible: collapsible && isBoundary && logs.length > 1,
+              collapsed,
+              onToggle: toggleCollapse
             }
           ),
-          isBoundary && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-0.5 h-4 bg-muted-foreground/10" })
-        ]
-      }
-    )
-  ] });
+          /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: cn("flex-1 min-w-0 mb-2 rounded-lg", bgClass), children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+            LogEntry,
+            {
+              log,
+              viewMode,
+              strip,
+              cacheTrend: cacheTrends?.get(log.id) ?? null,
+              onCompareWithPrevious: () => onCompareWithPrevious(log)
+            }
+          ) })
+        ] }, log.id);
+      })
+    }
+  );
 }
 function computeStats(logs) {
   let totalInput = 0;
@@ -2809,22 +3249,52 @@ const ConversationGroup = reactExports.memo(function({
   strip,
   cacheTrends,
   onCompareWithPrevious,
-  defaultGroupViewMode = "thread"
+  standalone = false
 }) {
-  const [expanded, setExpanded] = reactExports.useState(false);
-  const [groupViewMode, setGroupViewMode] = reactExports.useState(defaultGroupViewMode);
-  reactExports.useEffect(() => {
-    setGroupViewMode(defaultGroupViewMode);
-  }, [defaultGroupViewMode]);
+  const [expanded, setExpanded] = reactExports.useState(standalone);
   const stats = computeStats(group.logs);
   const startTime = group.logs[0]?.timestamp ?? (/* @__PURE__ */ new Date()).toISOString();
   const endTime = group.logs[group.logs.length - 1]?.timestamp ?? (/* @__PURE__ */ new Date()).toISOString();
   const mixed = hasMixedApiFormat(group.logs);
   const isLoading = group.logs.some((log) => log.responseStatus === null);
   const stopReasons = reactExports.useMemo(() => group.logs.map((log) => extractStopReason(log)), [group.logs]);
+  const turnIndices = reactExports.useMemo(() => {
+    const indices = [];
+    let turn = 0;
+    for (let i = 0; i < stopReasons.length; i++) {
+      if (i > 0 && (stopReasons[i - 1] === "end_turn" || stopReasons[i - 1] === "stop")) {
+        turn++;
+      }
+      indices.push(turn);
+    }
+    return indices;
+  }, [stopReasons]);
+  const turnGroups = reactExports.useMemo(() => {
+    const groups = [];
+    let currentGroup = [];
+    let currentTurn = 0;
+    for (let i = 0; i < group.logs.length; i++) {
+      const turnIdx = turnIndices[i] ?? 0;
+      const log = group.logs[i];
+      if (!log) continue;
+      if (turnIdx !== currentTurn) {
+        if (currentGroup.length > 0) {
+          groups.push({ logs: currentGroup, turnIndex: currentTurn });
+        }
+        currentGroup = [log];
+        currentTurn = turnIdx;
+      } else {
+        currentGroup.push(log);
+      }
+    }
+    if (currentGroup.length > 0) {
+      groups.push({ logs: currentGroup, turnIndex: currentTurn });
+    }
+    return groups;
+  }, [group.logs, turnIndices]);
   const displayId = group.conversationId.startsWith("PID:") || group.conversationId.includes("|") ? group.conversationId : group.conversationId.length > 24 ? group.conversationId.slice(0, 12) + "…" + group.conversationId.slice(-12) : group.conversationId;
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mb-4", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(
+    !standalone && /* @__PURE__ */ jsxRuntimeExports.jsx(
       ConversationHeader,
       {
         conversationId: displayId,
@@ -2838,44 +3308,21 @@ const ConversationGroup = reactExports.memo(function({
         onToggle: () => setExpanded(!expanded),
         hideApiFormat: mixed,
         isLoading,
-        viewMode: groupViewMode,
-        onToggleViewMode: () => setGroupViewMode((prev) => prev === "thread" ? "flat" : "thread")
+        userAgent: group.logs[0]?.userAgent ?? null
       }
     ),
-    expanded && groupViewMode === "flat" && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "pl-4 border-l-2 border-muted ml-3", children: group.logs.map((log) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-      LogEntry,
+    expanded && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { children: turnGroups.map((tg) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+      TurnGroup,
       {
-        log,
+        logs: tg.logs,
         viewMode,
-        suppressApiFormatBadge: !mixed,
         strip,
-        cacheTrend: cacheTrends?.get(log.id) ?? null,
-        onCompareWithPrevious: () => onCompareWithPrevious(log)
+        cacheTrends,
+        onCompareWithPrevious,
+        turnIndex: tg.turnIndex
       },
-      log.id
-    )) }),
-    expanded && groupViewMode === "thread" && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ml-3", children: group.logs.map((log, idx) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-stretch", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(
-        ThreadConnector,
-        {
-          stopReason: stopReasons[idx] ?? null,
-          isPending: log.responseStatus === null,
-          isFirst: idx === 0,
-          isLast: idx === group.logs.length - 1
-        }
-      ),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 min-w-0 mb-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-        LogEntry,
-        {
-          log,
-          viewMode,
-          suppressApiFormatBadge: !mixed,
-          strip,
-          cacheTrend: cacheTrends?.get(log.id) ?? null,
-          onCompareWithPrevious: () => onCompareWithPrevious(log)
-        }
-      ) })
-    ] }, log.id)) })
+      tg.turnIndex
+    )) })
   ] });
 });
 function CrabLogo({ className }) {
@@ -2923,7 +3370,7 @@ function SelectTrigger({
   ...props
 }) {
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
-    Trigger$1,
+    Trigger,
     {
       "data-slot": "select-trigger",
       "data-size": size,
@@ -2946,8 +3393,8 @@ function SelectContent({
   align = "center",
   ...props
 }) {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(Portal$1, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
-    Content2$1,
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Portal, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    Content2,
     {
       "data-slot": "select-content",
       className: cn(
@@ -5674,8 +6121,6 @@ function ProxyViewer({
   strip
 }) {
   const { totalIn, totalOut } = computeTokenSummary(logs);
-  const [groupedView, setGroupedView] = reactExports.useState(true);
-  const [groupViewMode, setGroupViewMode] = reactExports.useState("thread");
   const [exporting, setExporting] = reactExports.useState(false);
   const [comparePair, setComparePair] = reactExports.useState(null);
   const handleExport = reactExports.useCallback(async () => {
@@ -5705,19 +6150,40 @@ function ProxyViewer({
   );
   const groups = reactExports.useMemo(() => groupLogsByConversation(logs), [logs]);
   const cacheTrends = reactExports.useMemo(() => computeCacheTrends(groups), [groups]);
-  const stopReasons = reactExports.useMemo(() => logs.map((log) => extractStopReason(log)), [logs]);
-  const renderGroups = logs.length > 0 && groupedView && groups.length > 1;
   const rowVirtualizer = useVirtualizer({
-    count: renderGroups ? groups.length : logs.length,
+    count: groups.length,
     getScrollElement: () => parentRef.current,
     estimateSize: () => 150,
     measureElement: typeof window !== "undefined" ? (element) => element.getBoundingClientRect().height : void 0,
     overscan: 5
   });
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "max-w-[1200px] mx-auto flex flex-col h-screen", style: { maxHeight: "100vh" }, children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-4 mb-4 px-6 pt-6", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("h1", { className: "text-lg font-bold flex-1 flex items-center gap-2", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(CrabLogo, { className: "size-10 text-amber-500 self-center" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-end px-6 pt-6 pb-3 relative", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("h1", { className: "text-lg font-bold flex items-end gap-2 absolute left-1/2 -translate-x-1/2 whitespace-nowrap", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "flex items-end gap-1 group cursor-default", "aria-hidden": "true", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(CrabLogo, { className: "size-10 text-amber-500 transition-all duration-300 group-hover:scale-125 group-hover:-translate-y-1.5" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "flex items-end gap-0.5", children: crabVariants.map((Crab, i) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+            Crab,
+            {
+              className: `size-5 ${[
+                "text-amber-500",
+                "text-rose-500",
+                "text-sky-500",
+                "text-emerald-500",
+                "text-violet-500",
+                "text-orange-500",
+                "text-cyan-500",
+                "text-pink-500",
+                "text-lime-500",
+                "text-blue-500",
+                "text-yellow-500",
+                "text-fuchsia-500"
+              ][i]} transition-all duration-300 ease-out group-hover:scale-125 group-hover:-translate-y-1`,
+              style: { transitionDelay: `${i * 50}ms` }
+            },
+            i
+          )) })
+        ] }),
         /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "flex items-baseline gap-2", children: [
           "LLM Inspector",
           /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-xs text-muted-foreground font-mono", children: [
@@ -5726,6 +6192,23 @@ function ProxyViewer({
           ] })
         ] })
       ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "ml-auto", children: /* @__PURE__ */ jsxRuntimeExports.jsx(SettingsDialog, {}) })
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center gap-3 px-6 mb-4", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs(Select, { value: selectedSession, onValueChange: onSessionChange, children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(SelectTrigger, { className: "flex-1 max-w-[350px] text-xs", children: /* @__PURE__ */ jsxRuntimeExports.jsx(SelectValue, { placeholder: "All sessions" }) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(SelectContent, { children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { value: "__all__", children: "All sessions" }),
+          sessions.map((s) => /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { value: s, children: truncateSessionId(s) }, s))
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs(Select, { value: selectedModel, onValueChange: onModelChange, children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(SelectTrigger, { className: "flex-1 max-w-[250px] text-xs", children: /* @__PURE__ */ jsxRuntimeExports.jsx(SelectValue, { placeholder: "All models" }) }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(SelectContent, { children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { value: "__all__", children: "All models" }),
+          models.map((m) => /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { value: m, children: m }, m))
+        ] })
+      ] }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipProvider, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center border border-border rounded-md overflow-hidden", children: [
           /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -5749,7 +6232,7 @@ function ProxyViewer({
         ] }) }),
         /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: "Simple shows parsed output; Full adds raw headers and tokens" })
       ] }) }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(SettingsDialog, {}),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1" }),
       /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-muted-foreground text-xs font-mono", children: [
         logs.length,
         " request",
@@ -5768,7 +6251,7 @@ function ProxyViewer({
           title: "Export all logs as JSON ZIP",
           children: exporting ? /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Exporting..." }) : /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx(Download, { className: "size-3" }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Export All" })
+            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "Export" })
           ] })
         }
       ),
@@ -5779,71 +6262,12 @@ function ProxyViewer({
           onClick: onClearAll,
           className: "text-xs text-muted-foreground hover:text-foreground transition-colors cursor-pointer",
           title: "Clear all logs",
-          children: "Clear All"
+          children: "Clear"
         }
       )
     ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex gap-3 px-6 mb-4", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsxs(Select, { value: selectedSession, onValueChange: onSessionChange, children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(SelectTrigger, { className: "flex-1 max-w-[400px] text-xs", children: /* @__PURE__ */ jsxRuntimeExports.jsx(SelectValue, { placeholder: "All sessions" }) }),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs(SelectContent, { children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { value: "__all__", children: "All sessions" }),
-          sessions.map((s) => /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { value: s, children: truncateSessionId(s) }, s))
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs(Select, { value: selectedModel, onValueChange: onModelChange, children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(SelectTrigger, { className: "text-xs", children: /* @__PURE__ */ jsxRuntimeExports.jsx(SelectValue, { placeholder: "All models" }) }),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs(SelectContent, { children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { value: "__all__", children: "All models" }),
-          models.map((m) => /* @__PURE__ */ jsxRuntimeExports.jsx(SelectItem, { value: m, children: m }, m))
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center border border-border rounded-md overflow-hidden", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(
-          "button",
-          {
-            type: "button",
-            onClick: () => setGroupedView(true),
-            className: `px-2 py-1.5 cursor-pointer transition-colors ${groupedView ? "bg-muted text-foreground" : "text-muted-foreground hover:bg-muted/50"}`,
-            title: "Grouped view",
-            children: /* @__PURE__ */ jsxRuntimeExports.jsx(LayoutGrid, { className: "size-4" })
-          }
-        ),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(
-          "button",
-          {
-            type: "button",
-            onClick: () => setGroupedView(false),
-            className: `px-2 py-1.5 cursor-pointer transition-colors ${!groupedView ? "bg-muted text-foreground" : "text-muted-foreground hover:bg-muted/50"}`,
-            title: "Flat view",
-            children: /* @__PURE__ */ jsxRuntimeExports.jsx(List, { className: "size-4" })
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-center border border-border rounded-md overflow-hidden", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(
-          "button",
-          {
-            type: "button",
-            onClick: () => setGroupViewMode("thread"),
-            className: `px-2 py-1.5 cursor-pointer transition-colors ${groupViewMode === "thread" ? "bg-amber-500/15 text-amber-400 border-r border-amber-500/30" : "text-muted-foreground hover:bg-muted/50"}`,
-            title: "Thread view (connected timeline)",
-            children: /* @__PURE__ */ jsxRuntimeExports.jsx(GitBranch, { className: "size-4" })
-          }
-        ),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(
-          "button",
-          {
-            type: "button",
-            onClick: () => setGroupViewMode("flat"),
-            className: `px-2 py-1.5 cursor-pointer transition-colors ${groupViewMode === "flat" ? "bg-muted text-foreground" : "text-muted-foreground hover:bg-muted/50"}`,
-            title: "Flat view (card list)",
-            children: /* @__PURE__ */ jsxRuntimeExports.jsx(List, { className: "size-4" })
-          }
-        )
-      ] })
-    ] }),
     /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 min-h-0 px-6 pb-6", children: logs.length === 0 ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "text-center text-muted-foreground py-16 space-y-4", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(CrabLogo, { className: "size-12 text-muted-foreground/20 mx-auto" }),
       /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-sm", children: "No requests captured yet." }),
       /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs", children: "Route AI coding tools through the proxy:" }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(CopyableCommand, { command: "LLM_BASE_URL=http://localhost:25947/proxy <your-tool>" })
@@ -5856,85 +6280,34 @@ function ProxyViewer({
           position: "relative"
         },
         children: rowVirtualizer.getVirtualItems().map((virtualRow) => {
-          if (renderGroups) {
-            const group = groups[virtualRow.index];
-            if (group === void 0) return null;
-            return /* @__PURE__ */ jsxRuntimeExports.jsx(
-              "div",
-              {
-                "data-index": virtualRow.index,
-                ref: rowVirtualizer.measureElement,
-                style: {
-                  position: "absolute",
-                  top: 0,
-                  left: 0,
-                  width: "100%",
-                  transform: `translateY(${virtualRow.start}px)`
-                },
-                children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-                  ConversationGroup,
-                  {
-                    group,
-                    viewMode,
-                    strip,
-                    cacheTrends,
-                    onCompareWithPrevious: handleCompareWithPrevious,
-                    defaultGroupViewMode: groupViewMode
-                  }
-                )
-              },
-              group.id
-            );
-          } else {
-            const log = logs[virtualRow.index];
-            if (log === void 0) return null;
-            const idx = virtualRow.index;
-            return /* @__PURE__ */ jsxRuntimeExports.jsx(
-              "div",
-              {
-                "data-index": virtualRow.index,
-                ref: rowVirtualizer.measureElement,
-                style: {
-                  position: "absolute",
-                  top: 0,
-                  left: 0,
-                  width: "100%",
-                  transform: `translateY(${virtualRow.start}px)`
-                },
-                children: groupViewMode === "thread" ? /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-stretch ml-3", children: [
-                  /* @__PURE__ */ jsxRuntimeExports.jsx(
-                    ThreadConnector,
-                    {
-                      stopReason: stopReasons[idx] ?? null,
-                      isPending: log.responseStatus === null,
-                      isFirst: idx === 0,
-                      isLast: idx === logs.length - 1
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 min-w-0 mb-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-                    LogEntry,
-                    {
-                      log,
-                      viewMode,
-                      strip,
-                      cacheTrend: cacheTrends.get(log.id) ?? null,
-                      onCompareWithPrevious: () => handleCompareWithPrevious(log)
-                    }
-                  ) })
-                ] }) : /* @__PURE__ */ jsxRuntimeExports.jsx(
-                  LogEntry,
-                  {
-                    log,
-                    viewMode,
-                    strip,
-                    cacheTrend: cacheTrends.get(log.id) ?? null,
-                    onCompareWithPrevious: () => handleCompareWithPrevious(log)
-                  }
-                )
+          const group = groups[virtualRow.index];
+          if (group === void 0) return null;
+          return /* @__PURE__ */ jsxRuntimeExports.jsx(
+            "div",
+            {
+              "data-index": virtualRow.index,
+              ref: rowVirtualizer.measureElement,
+              style: {
+                position: "absolute",
+                top: 0,
+                left: 0,
+                width: "100%",
+                transform: `translateY(${virtualRow.start}px)`
               },
-              log.id
-            );
-          }
+              children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+                ConversationGroup,
+                {
+                  group,
+                  viewMode,
+                  strip,
+                  cacheTrends,
+                  onCompareWithPrevious: handleCompareWithPrevious,
+                  standalone: groups.length === 1
+                }
+              )
+            },
+            group.id
+          );
         })
       }
     ) }) }),