@tonyclaw/agent-inspector 2.1.17 → 2.1.19

package/.output/server/_ssr/{ProxyViewerContainer-DCZIJC2b.mjs → ProxyViewerContainer-DqgVb0So.mjs}

@@ -1,5 +1,5 @@
 import { r as reactExports, j as jsxRuntimeExports, a as React } from "../_libs/react.mjs";
-import { I as InspectorGroupsListResponseSchema, C as CapturedLogSchema, D as DEFAULT_CAPTURE_MODE, a as DEFAULT_SLOW_RESPONSE_THRESHOLD_SECONDS, b as DEFAULT_PROVIDER_TEST_TIMEOUT_SECONDS, c as DEFAULT_TIME_DISPLAY_FORMAT, d as RuntimeConfigSchema, p as packageJson, P as ProviderConfigSchema, i as apiFormatForPath, n as GroupEvidenceExportResultSchema, o as DeleteInspectorGroupResponseSchema, y as createPendingProviderTestResults, z as ProviderTestResultsSchema, B as createFailedProviderTestResults, M as MAX_SLOW_RESPONSE_THRESHOLD_SECONDS, E as MAX_PROVIDER_TEST_TIMEOUT_SECONDS, T as TimeDisplayFormatSchema, l as AlertSummarySchema, m as AlertListResponseSchema, G as GroupEvidenceReadResponseSchema, t as maskApiKey, u as PATH_V1_MESSAGES, v as PATH_V1_CHAT_COMPLETIONS, w as PATH_V1_RESPONSES, q as providerHasContextMetadata, r as findProviderModelMetadata, f as parseOpenAIResponse, g as parseOpenAIResponsesResponse, O as OpenAIRequestSchema, h as OpenAIResponsesRequestSchema, A as AnthropicResponseSchema$1, e as AnthropicRequestSchema, s as safeGetOwnProperty, F as resolveProviderContextWindow, j as getSessionPath, x as previewUpstreamUrl, K as KnowledgeCandidateSchema, H as isPlainRecord, k as stripClaudeCodeBillingHeader, L as LogBodyChunkSchema } from "./router-__o2wrfO.mjs";
+import { I as InspectorGroupsListResponseSchema, C as CapturedLogSchema, D as DEFAULT_CAPTURE_MODE, a as DEFAULT_SLOW_RESPONSE_THRESHOLD_SECONDS, b as DEFAULT_PROVIDER_TEST_TIMEOUT_SECONDS, c as DEFAULT_TIME_DISPLAY_FORMAT, d as RuntimeConfigSchema, p as packageJson, P as ProviderConfigSchema, i as apiFormatForPath, n as GroupEvidenceExportResultSchema, o as DeleteInspectorGroupResponseSchema, y as createPendingProviderTestResults, z as ProviderTestResultsSchema, B as createFailedProviderTestResults, M as MAX_SLOW_RESPONSE_THRESHOLD_SECONDS, E as MAX_PROVIDER_TEST_TIMEOUT_SECONDS, T as TimeDisplayFormatSchema, l as AlertSummarySchema, m as AlertListResponseSchema, G as GroupEvidenceReadResponseSchema, t as maskApiKey, u as PATH_V1_MESSAGES, v as PATH_V1_CHAT_COMPLETIONS, w as PATH_V1_RESPONSES, q as providerHasContextMetadata, r as findProviderModelMetadata, f as parseOpenAIResponse, g as parseOpenAIResponsesResponse, O as OpenAIRequestSchema, h as OpenAIResponsesRequestSchema, A as AnthropicResponseSchema$1, e as AnthropicRequestSchema, s as safeGetOwnProperty, F as resolveProviderContextWindow, j as getSessionPath, x as previewUpstreamUrl, K as KnowledgeCandidateSchema, H as isPlainRecord, k as stripClaudeCodeBillingHeader, L as LogBodyChunkSchema } from "./router-50BIB6ED.mjs";
 import { u as useSWR, a as useSWRConfig } from "../_libs/swr.mjs";
 import { J as JSZip } from "../_libs/jszip.mjs";
 import { c as clsx } from "../_libs/clsx.mjs";
@@ -1481,7 +1481,7 @@ function resolveLogFormat(log) {
   const pathFormat = apiFormatForPath(log.path);
   return pathFormat === "unknown" ? log.apiFormat : pathFormat;
 }
-const HEADER_ACTION_BUTTON_CLASS$1 = "border border-input bg-background hover:bg-accent hover:text-accent-foreground inline-flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-md text-muted-foreground transition-colors hover:text-foreground";
+const HEADER_ACTION_BUTTON_CLASS$1 = "bg-white/[0.045] hover:bg-white/[0.075] inline-flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-md text-muted-foreground transition-colors hover:text-foreground";
 function HeaderMetric({
   icon,
   children,
@@ -1492,7 +1492,7 @@ function HeaderMetric({
     "span",
     {
       className: cn(
-        "border border-border bg-muted/30 inline-flex h-7 min-w-0 items-center gap-1.5 rounded-md px-2 text-xs text-muted-foreground",
+        "bg-white/[0.045] inline-flex h-7 min-w-0 items-center gap-1.5 rounded-md px-2 text-xs text-muted-foreground",
         className
       ),
       title,
@@ -1556,8 +1556,8 @@ function ConversationHeader({
       "data-nav-id": `conv-${conversationId}`,
       "data-nav-action": expanded ? "collapse" : "expand",
       className: cn(
-        "border border-border bg-card shadow-sm flex cursor-pointer items-start gap-3 rounded-[8px] px-3 py-2.5 transition-colors",
-        "hover:border-cyan-200/20",
+        "bg-card/80 shadow-sm flex cursor-pointer items-start gap-3 rounded-[8px] px-3 py-2.5 transition-colors",
+        "hover:bg-card",
         "select-none",
         "sticky top-0 z-10 mb-2",
         "focus-visible:ring-1 focus-visible:ring-cyan-300/35 focus-visible:outline-none"
@@ -1609,7 +1609,7 @@ function ConversationHeader({
             !isFallbackConversation && showProcessMetadata && clientPid !== null && clientPid !== void 0 && /* @__PURE__ */ jsxRuntimeExports.jsxs(
               "span",
               {
-                className: "border border-border bg-muted/40 shrink-0 rounded px-1.5 py-0.5 font-mono text-xs tabular-nums text-muted-foreground",
+                className: "bg-white/[0.045] shrink-0 rounded px-1.5 py-0.5 font-mono text-xs tabular-nums text-muted-foreground",
                 title: `Client process ID ${clientPid}`,
                 children: [
                   "PID ",
@@ -1628,7 +1628,7 @@ function ConversationHeader({
             showClientIdentity && clientDisplayLabel !== null && clientDisplayLabel !== "" && /* @__PURE__ */ jsxRuntimeExports.jsxs(
               "span",
               {
-                className: "border border-border bg-muted/30 inline-flex h-6 max-w-[180px] shrink-0 items-center gap-1 rounded-md px-1.5 text-xs text-muted-foreground",
+                className: "bg-white/[0.045] inline-flex h-6 max-w-[180px] shrink-0 items-center gap-1 rounded-md px-1.5 text-xs text-muted-foreground",
                 title: clientTooltip ?? clientDisplayLabel,
                 children: [
                   /* @__PURE__ */ jsxRuntimeExports.jsx(ClientLogo, { client: clientApp, className: "size-4 shrink-0" }),
@@ -1678,7 +1678,7 @@ function ConversationHeader({
           /* @__PURE__ */ jsxRuntimeExports.jsx(
             "span",
             {
-              className: "border border-input bg-background hover:bg-accent hover:text-accent-foreground inline-flex size-8 shrink-0 items-center justify-center rounded-md text-slate-200",
+              className: "bg-white/[0.045] hover:bg-white/[0.075] inline-flex size-8 shrink-0 items-center justify-center rounded-md text-slate-200",
               "aria-hidden": "true",
               children: expanded ? /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronDown, { className: "size-4 shrink-0" }) : isLoading ? /* @__PURE__ */ jsxRuntimeExports.jsx(LoaderCircle, { className: "size-4 shrink-0 animate-spin" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronRight, { className: "size-4 shrink-0" })
             }
@@ -1959,27 +1959,27 @@ function useCopyFeedback(text) {
   return { copied, copy };
 }
 const LazyCompareDrawer = reactExports.lazy(
-  () => import("./CompareDrawer-qC3adEeq.mjs").then((m) => ({ default: m.CompareDrawer }))
+  () => import("./CompareDrawer-Bud_yIrM.mjs").then((m) => ({ default: m.CompareDrawer }))
 );
 const LazyReplayDialog = reactExports.lazy(
-  () => import("./ReplayDialog-CvX4XYCi.mjs").then((m) => ({ default: m.ReplayDialog }))
+  () => import("./ReplayDialog-DKbV5fnW.mjs").then((m) => ({ default: m.ReplayDialog }))
 );
 const LazyRequestAnatomy = reactExports.lazy(
-  () => import("./RequestAnatomy-HQfrxjO1.mjs").then((m) => ({ default: m.RequestAnatomy }))
+  () => import("./RequestAnatomy-MStxp1Wp.mjs").then((m) => ({ default: m.RequestAnatomy }))
 );
 const LazyResponseView = reactExports.lazy(
-  () => import("./ResponseView-QSlSD11e.mjs").then((m) => ({ default: m.ResponseView }))
+  () => import("./ResponseView-HLTCpJcF.mjs").then((m) => ({ default: m.ResponseView }))
 );
 const LazyStreamingChunkSequence = reactExports.lazy(
-  () => import("./StreamingChunkSequence-DTAiwlnI.mjs").then((m) => ({
+  () => import("./StreamingChunkSequence-DEiyiUs_.mjs").then((m) => ({
     default: m.StreamingChunkSequence
   }))
 );
 const LazyJsonViewer = reactExports.lazy(
-  () => import("./json-viewer-CrIX0e0Q.mjs").then((m) => ({ default: m.JsonViewer }))
+  () => import("./json-viewer-MmTWKxqh.mjs").then((m) => ({ default: m.JsonViewer }))
 );
 const LazyJsonViewerFromString = reactExports.lazy(
-  () => import("./json-viewer-CrIX0e0Q.mjs").then((m) => ({ default: m.JsonViewerFromString }))
+  () => import("./json-viewer-MmTWKxqh.mjs").then((m) => ({ default: m.JsonViewerFromString }))
 );
 const HIGHLIGHT_DURATION_MS = 1200;
 const MAX_HIGHLIGHT_ATTEMPTS = 12;
@@ -2439,10 +2439,10 @@ function Badge({
   );
 }
 const STATUS_BADGE_CLASSES = {
-  success: "bg-slate-300/[0.08] text-slate-100 border-slate-300/20",
-  client_error: "bg-amber-300/[0.10] text-amber-100 border-amber-300/30",
-  server_error: "bg-rose-400/[0.10] text-rose-100 border-rose-300/30",
-  pending: "bg-cyan-300/[0.08] text-cyan-100 border-cyan-300/25"
+  success: "bg-slate-300/[0.08] text-slate-100 border-transparent",
+  client_error: "bg-amber-300/[0.10] text-amber-100 border-transparent",
+  server_error: "bg-rose-400/[0.10] text-rose-100 border-transparent",
+  pending: "bg-cyan-300/[0.08] text-cyan-100 border-transparent"
 };
 const STATUS_CUE_CLASSES = {
   success: {
@@ -2462,8 +2462,8 @@ const STATUS_CUE_CLASSES = {
     dot: "bg-cyan-200 shadow-[0_0_14px_rgba(103,232,249,0.8)]"
   }
 };
-const HEADER_ACTION_BUTTON_CLASS = "border border-input bg-background hover:bg-accent hover:text-accent-foreground size-8 text-muted-foreground shadow-none hover:text-cyan-100";
-const TELEMETRY_CHIP_CLASS = "border border-border bg-muted/40 flex h-7 items-center gap-1 rounded-md px-2 text-xs";
+const HEADER_ACTION_BUTTON_CLASS = "border border-transparent bg-white/[0.045] hover:bg-white/[0.075] size-8 text-muted-foreground shadow-none hover:text-cyan-100";
+const TELEMETRY_CHIP_CLASS = "bg-white/[0.045] flex h-7 items-center gap-1 rounded-md px-2 text-xs";
 function formatElapsed$3(ms) {
   if (ms < 1e3) return `${ms}ms`;
   return `${(ms / 1e3).toFixed(1)}s`;
@@ -2537,8 +2537,8 @@ const LogEntryHeader = reactExports.memo(function({
       "data-nav-action": expanded ? "collapse" : "expand",
       className: cn(
         "group/header relative isolate flex min-w-0 cursor-pointer items-start gap-2 overflow-hidden px-3 py-2 transition-[background-color,border-color,box-shadow]",
-        expanded ? "bg-white/[0.035] shadow-[inset_0_1px_0_rgba(255,255,255,0.10)]" : "bg-transparent hover:bg-white/[0.035]",
-        "select-none before:pointer-events-none before:absolute before:inset-x-3 before:top-0 before:h-px before:bg-white/12",
+        expanded ? "bg-white/[0.04]" : "bg-transparent hover:bg-white/[0.035]",
+        "select-none",
         "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:outline-none"
       ),
       onClick: onToggle,
@@ -2554,7 +2554,7 @@ const LogEntryHeader = reactExports.memo(function({
             "span",
             {
               className: cn(
-                "border border-border bg-muted/40 inline-flex h-8 shrink-0 items-center gap-2 rounded-md px-2 font-mono",
+                "inline-flex h-8 shrink-0 items-center gap-2 rounded-md px-2 font-mono",
                 statusCue.frame
               ),
               children: [
@@ -2566,7 +2566,7 @@ const LogEntryHeader = reactExports.memo(function({
               ]
             }
           ),
-          /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "border border-border bg-muted/40 flex h-7 shrink-0 items-center gap-1 rounded-md px-2 text-xs text-muted-foreground", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "bg-white/[0.045] flex h-7 shrink-0 items-center gap-1 rounded-md px-2 text-xs text-muted-foreground", children: [
             /* @__PURE__ */ jsxRuntimeExports.jsx(Clock, { className: "size-3" }),
             /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono tabular-nums", title: log.timestamp, children: formatTimestamp$2(log.timestamp, timeDisplayFormat) })
           ] }),
@@ -2823,7 +2823,7 @@ const LogEntryHeader = reactExports.memo(function({
           /* @__PURE__ */ jsxRuntimeExports.jsx(
             "span",
             {
-              className: "border border-input bg-background hover:bg-accent hover:text-accent-foreground inline-flex size-8 shrink-0 items-center justify-center rounded-md text-slate-200",
+              className: "bg-white/[0.045] hover:bg-white/[0.075] inline-flex size-8 shrink-0 items-center justify-center rounded-md text-slate-200",
               "aria-hidden": "true",
               children: expanded ? /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronDown, { className: "size-4 shrink-0" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronRight, { className: "size-4 shrink-0" })
             }
@@ -2911,13 +2911,13 @@ const CATEGORY_LABELS = {
   other: "other"
 };
 const CATEGORY_CLASSES = {
-  file: "border-blue-400/20 bg-blue-400/5 text-blue-300",
-  shell: "border-teal-400/20 bg-teal-400/5 text-teal-300",
-  browser: "border-cyan-400/20 bg-cyan-400/5 text-cyan-300",
-  web: "border-sky-400/20 bg-sky-400/5 text-sky-300",
-  mcp: "border-violet-400/20 bg-violet-400/5 text-violet-300",
-  code: "border-emerald-400/20 bg-emerald-400/5 text-emerald-300",
-  other: "border-muted-foreground/20 bg-muted/30 text-muted-foreground"
+  file: "border-transparent bg-blue-400/5 text-blue-300",
+  shell: "border-transparent bg-teal-400/5 text-teal-300",
+  browser: "border-transparent bg-cyan-400/5 text-cyan-300",
+  web: "border-transparent bg-sky-400/5 text-sky-300",
+  mcp: "border-transparent bg-violet-400/5 text-violet-300",
+  code: "border-transparent bg-emerald-400/5 text-emerald-300",
+  other: "border-transparent bg-muted/30 text-muted-foreground"
 };
 function CategoryIcon({ category }) {
   switch (category) {
@@ -2960,7 +2960,7 @@ function ToolRow({ tool, called }) {
   const [open, setOpen] = reactExports.useState(false);
   const nameCopy = useCopyFeedback(tool.name);
   const hasDetails = tool.description !== null || tool.requiredParameters.length > 0 || tool.schema !== null;
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(Collapsible, { open, onOpenChange: setOpen, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "border border-border bg-card shadow-sm rounded-[8px]", children: [
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Collapsible, { open, onOpenChange: setOpen, children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "bg-white/[0.035] rounded-[8px]", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex min-w-0 items-center gap-2 px-2.5 py-2", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsxs(
         "button",
@@ -2995,17 +2995,17 @@ function ToolRow({ tool, called }) {
         "button",
         {
           type: "button",
-          className: "border border-input bg-background hover:bg-accent hover:text-accent-foreground inline-flex size-7 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          className: "bg-white/[0.045] hover:bg-white/[0.075] inline-flex size-7 shrink-0 items-center justify-center rounded-md text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
           onClick: nameCopy.copy,
           "aria-label": nameCopy.copied ? "Copied tool name" : "Copy tool name",
           children: nameCopy.copied ? /* @__PURE__ */ jsxRuntimeExports.jsx(Check, { className: "size-3.5 text-emerald-400" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Copy, { className: "size-3.5" })
         }
       )
     ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(CollapsibleContent, { children: open && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2 border-t border-white/10 bg-white/[0.025] px-2.5 py-2", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(CollapsibleContent, { children: open && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2 bg-white/[0.025] px-2.5 py-2", children: [
       tool.description !== null && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "text-xs leading-relaxed text-muted-foreground", children: tool.description }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(RequiredParameters, { names: tool.requiredParameters }),
-      tool.schema !== null && /* @__PURE__ */ jsxRuntimeExports.jsx(ScrollArea, { className: "border border-border bg-card shadow-sm max-h-64 rounded-[8px] p-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+      tool.schema !== null && /* @__PURE__ */ jsxRuntimeExports.jsx(ScrollArea, { className: "bg-black/[0.16] max-h-64 rounded-[8px] p-2", children: /* @__PURE__ */ jsxRuntimeExports.jsx(
         reactExports.Suspense,
         {
           fallback: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "text-xs text-muted-foreground", children: "Loading JSON..." }),
@@ -3035,7 +3035,7 @@ const RequestTools = reactExports.memo(function RequestTools2({
   if (summary === null) return null;
   const previewTools = summary.tools.slice(0, 6);
   const hiddenPreviewCount = summary.tools.length - previewTools.length;
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("section", { className: "border border-border bg-card shadow-sm mb-3 overflow-hidden rounded-[8px]", children: [
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("section", { className: "bg-black/[0.10] mb-3 overflow-hidden rounded-[8px]", children: [
     /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex min-w-0 flex-wrap items-center gap-2 px-3 py-2", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(Wrench, { className: "size-4 shrink-0 text-sky-300/80" }),
@@ -3089,7 +3089,7 @@ const RequestTools = reactExports.memo(function RequestTools2({
         }
       )
     ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex min-w-0 flex-wrap gap-1.5 border-t border-white/10 bg-white/[0.025] px-3 py-2", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex min-w-0 flex-wrap gap-1.5 bg-white/[0.025] px-3 py-2", children: [
       previewTools.map((tool) => /* @__PURE__ */ jsxRuntimeExports.jsx(
         Badge,
         {
@@ -3107,8 +3107,8 @@ const RequestTools = reactExports.memo(function RequestTools2({
         hiddenPreviewCount
       ] })
     ] }),
-    expanded && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2 border-t border-white/10 bg-black/10 px-3 py-3", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { className: "border border-input bg-background hover:bg-accent hover:text-accent-foreground flex h-8 items-center gap-2 rounded-md px-2 text-xs", children: [
+    expanded && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "space-y-2 bg-black/10 px-3 py-3", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("label", { className: "bg-white/[0.045] hover:bg-white/[0.075] flex h-8 items-center gap-2 rounded-md px-2 text-xs", children: [
         /* @__PURE__ */ jsxRuntimeExports.jsx(Search, { className: "size-3.5 shrink-0 text-muted-foreground" }),
         /* @__PURE__ */ jsxRuntimeExports.jsx(
           "input",
@@ -3313,7 +3313,7 @@ const FULL_LOG_HYDRATION_TIMEOUT_MS = 15e3;
 const BODY_CHUNK_TIMEOUT_MS = 15e3;
 const BODY_CHUNK_BYTES = 256 * 1024;
 const CHUNKED_BODY_THRESHOLD_BYTES = 1024 * 1024;
-const TAB_TRIGGER_CLASS = "h-9 flex-none rounded-md border border-transparent bg-transparent px-3 text-xs font-semibold text-muted-foreground shadow-none transition-colors hover:border-white/10 hover:bg-white/[0.045] hover:text-foreground data-[state=active]:border-cyan-200/25 data-[state=active]:bg-cyan-300/[0.08] data-[state=active]:text-cyan-100 data-[state=active]:shadow-none";
+const TAB_TRIGGER_CLASS = "h-9 flex-none rounded-md border border-transparent bg-transparent px-3 text-xs font-semibold text-muted-foreground shadow-none transition-colors hover:bg-white/[0.045] hover:text-foreground data-[state=active]:bg-cyan-300/[0.08] data-[state=active]:text-cyan-100 data-[state=active]:shadow-none";
 function createEmptyBodyPreviewState(totalBytes = null) {
   return {
     status: "idle",
@@ -3395,7 +3395,7 @@ function ExpandedPanel({
     "div",
     {
       className: cn(
-        "border border-border bg-card shadow-sm inspector-scrollbar mx-3 mb-3 max-h-[72vh] overflow-auto rounded-[8px] p-3",
+        "bg-black/[0.14] inspector-scrollbar mx-3 mb-3 max-h-[72vh] overflow-auto rounded-[8px] p-3",
         className
       ),
       children
@@ -3403,15 +3403,15 @@ function ExpandedPanel({
   );
 }
 function EmptyState({ children }) {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "border border-border bg-muted/40 rounded-md border-dashed px-3 py-5 text-center text-xs italic text-muted-foreground", children });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "bg-white/[0.035] rounded-md px-3 py-5 text-center text-xs italic text-muted-foreground", children });
 }
 function RawTextBlock({ children }) {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: "border border-border bg-card shadow-sm inspector-scrollbar max-h-[64vh] overflow-auto whitespace-pre-wrap break-words rounded-[8px] p-3 font-mono text-xs leading-relaxed text-muted-foreground", children });
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("pre", { className: "bg-black/[0.18] inspector-scrollbar max-h-[64vh] overflow-auto whitespace-pre-wrap break-words rounded-[8px] p-3 font-mono text-xs leading-relaxed text-muted-foreground", children });
 }
 const NOTICE_TONE_CLASSES = {
-  loading: "border-cyan-400/25 bg-cyan-400/[0.06] text-cyan-100",
-  warning: "border-amber-400/25 bg-amber-400/[0.08] text-amber-100",
-  danger: "border-rose-400/25 bg-rose-400/[0.08] text-rose-100"
+  loading: "border-transparent bg-cyan-400/[0.06] text-cyan-100",
+  warning: "border-transparent bg-amber-400/[0.08] text-amber-100",
+  danger: "border-transparent bg-rose-400/[0.08] text-rose-100"
 };
 function NoticeBlock({
   tone,
@@ -3473,12 +3473,12 @@ function HeaderRows({
 }) {
   const entries = headers === void 0 ? [] : Object.entries(headers).sort(([left], [right]) => left.localeCompare(right));
   if (entries.length === 0) return /* @__PURE__ */ jsxRuntimeExports.jsx(EmptyState, { children: emptyLabel });
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "border border-border bg-card shadow-sm overflow-hidden rounded-[8px] font-mono text-xs", children: entries.map(([key, value]) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "bg-black/[0.14] overflow-hidden rounded-[8px] font-mono text-xs", children: entries.map(([key, value]) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "div",
     {
-      className: "grid min-w-0 grid-cols-[minmax(140px,0.32fr)_minmax(0,1fr)] border-b border-white/10 last:border-b-0",
+      className: "grid min-w-0 grid-cols-[minmax(140px,0.32fr)_minmax(0,1fr)] border-b border-white/[0.055] last:border-b-0",
       children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "min-w-0 truncate border-r border-white/10 bg-white/[0.035] px-2.5 py-2 font-semibold text-cyan-200", children: key }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "min-w-0 truncate bg-white/[0.035] px-2.5 py-2 font-semibold text-cyan-200", children: key }),
         /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "min-w-0 truncate px-2.5 py-2 text-muted-foreground", title: value, children: value })
       ]
     },
@@ -3854,27 +3854,10 @@ const LogEntry = reactExports.memo(function({
       "div",
       {
         className: cn(
-          "border border-border bg-card shadow-sm relative mb-2 overflow-hidden rounded-[8px] transition-[background-color,border-color,box-shadow]",
-          expanded ? "border-cyan-200/25 shadow-[0_24px_80px_rgba(0,0,0,0.36),0_0_0_1px_rgba(103,232,249,0.05),inset_0_1px_0_rgba(255,255,255,0.14)]" : "hover:border-cyan-200/18"
+          "bg-card/80 relative mb-1.5 overflow-hidden rounded-[8px] transition-[background-color,box-shadow]",
+          expanded ? "bg-card shadow-[0_18px_60px_rgba(0,0,0,0.30),0_0_0_1px_rgba(103,232,249,0.08)]" : "hover:bg-card"
         ),
         children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(
-            "div",
-            {
-              className: cn(
-                "pointer-events-none absolute inset-y-3 left-1 w-px rounded-full",
-                expanded ? "bg-cyan-200/55 shadow-[0_0_20px_rgba(103,232,249,0.26)]" : "bg-white/12"
-              ),
-              "aria-hidden": "true"
-            }
-          ),
-          /* @__PURE__ */ jsxRuntimeExports.jsx(
-            "div",
-            {
-              className: "pointer-events-none absolute inset-x-3 top-0 h-px bg-gradient-to-r from-transparent via-white/15 to-transparent",
-              "aria-hidden": "true"
-            }
-          ),
           /* @__PURE__ */ jsxRuntimeExports.jsx(
             LogEntryHeader,
             {
@@ -3898,7 +3881,7 @@ const LogEntry = reactExports.memo(function({
           expanded && /* @__PURE__ */ jsxRuntimeExports.jsxs(
             "div",
             {
-              className: "relative border-t border-white/10 bg-black/[0.18] pt-2",
+              className: "relative bg-black/[0.14] pt-2",
               onClick: (e) => e.stopPropagation(),
               onKeyDown: (e) => e.stopPropagation(),
               children: [
@@ -3914,7 +3897,7 @@ const LogEntry = reactExports.memo(function({
                     TabsList,
                     {
                       variant: "line",
-                      className: "border border-border bg-muted/40 inspector-scrollbar relative mx-3 h-auto w-[calc(100%-1.5rem)] justify-start overflow-x-auto rounded-[8px] p-1",
+                      className: "bg-white/[0.04] inspector-scrollbar relative mx-3 h-auto w-[calc(100%-1.5rem)] justify-start overflow-x-auto rounded-[8px] p-1",
                       children: [
                         viewMode === "full" && /* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { className: TAB_TRIGGER_CLASS, value: "raw-headers", children: "Raw Headers" }),
                         viewMode === "full" && /* @__PURE__ */ jsxRuntimeExports.jsx(TabsTrigger, { className: TAB_TRIGGER_CLASS, value: "headers", children: "Headers" }),
@@ -4134,2032 +4117,2037 @@ const LogEntry = reactExports.memo(function({
     ) })
   ] });
 });
-function boundaryTitle(stopReason) {
-  switch (stopReason) {
-    case "end_turn":
-      return "End of Turn (Anthropic)";
-    case "stop":
-      return "End of Turn (OpenAI)";
-    case "length":
-      return "End of Turn (length limit)";
-    case "tool_use":
-    case null:
-      return "End of Turn";
-  }
-}
-function markerTone({
-  isFusedBoundary,
-  isBoundary,
-  isTurnStart,
-  isRunning
-}) {
-  if (isFusedBoundary) return "fused";
-  if (isBoundary) return "end";
-  if (isTurnStart) return "start";
-  if (isRunning) return "running";
-  return "idle";
-}
-function markerClass(tone, interactive) {
-  const base = "inline-flex size-3.5 items-center justify-center rounded-full border transition-colors";
-  const cursor = interactive ? "cursor-pointer hover:border-cyan-200/70 hover:bg-cyan-300/20" : "";
-  switch (tone) {
-    case "start":
-      return cn(base, cursor, "border-cyan-300/50 bg-cyan-300/12 text-cyan-200");
-    case "end":
-      return cn(base, cursor, "border-amber-300/55 bg-amber-300/12 text-amber-200");
-    case "fused":
-      return cn(
-        base,
-        cursor,
-        "border-slate-200/50 bg-slate-200/10 text-slate-100 ring-2 ring-cyan-300/15"
-      );
-    case "running":
-      return cn(
-        base,
-        cursor,
-        "border-amber-300/45 bg-amber-300/10 text-amber-200 ring-2 ring-amber-300/10"
-      );
-    case "idle":
-      return cn(base, cursor, "border-muted-foreground/25 bg-muted/30 text-muted-foreground/60");
-  }
-}
-function markerInnerClass(tone) {
-  switch (tone) {
-    case "running":
-      return "size-1.5 rounded-full bg-current animate-pulse";
-    case "idle":
-      return "size-1 rounded-full bg-current opacity-55";
-    case "start":
-    case "end":
-    case "fused":
-      return "size-1.5 rounded-full bg-current";
-  }
-}
-function markerTitle(tone, stopReason) {
-  switch (tone) {
-    case "start":
-      return "Start of turn";
-    case "end":
-      return boundaryTitle(stopReason);
-    case "fused":
-      return "Single-request turn";
-    case "running":
-      return "Processing";
-    case "idle":
-      return "Request in turn";
-  }
-}
-function ThreadConnector({
-  stopReason,
-  isPending,
-  isFirst,
-  isTurnStart,
-  isOnlyEntry = false,
-  collapsible = false,
-  onToggle
+function SvgShell({
+  className,
+  style,
+  d,
+  eyeStalks,
+  eyes,
+  legs,
+  extras
 }) {
-  const isBoundary = isTurnBoundary(stopReason);
-  const isFusedBoundary = isOnlyEntry && isTurnStart && isBoundary;
-  const isRunning = isPending && !isBoundary;
-  const tone = markerTone({ isFusedBoundary, isBoundary, isTurnStart, isRunning });
-  const interactive = collapsible && onToggle !== void 0;
-  const handleMarkerClick = (event) => {
-    if (!interactive || onToggle === void 0) return;
-    event.stopPropagation();
-    onToggle();
-  };
-  const handleMarkerKeyDown = (event) => {
-    if (!interactive || onToggle === void 0) return;
-    if (event.key !== "Enter" && event.key !== " ") return;
-    event.preventDefault();
-    onToggle();
-  };
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col items-center w-6 shrink-0 pt-0.5 pb-0.5", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex justify-center h-[calc(0.75rem-8px)]", children: !isFirst && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-0.5 bg-muted-foreground/30 h-full" }) }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(
-      "span",
-      {
-        role: interactive ? "button" : void 0,
-        tabIndex: interactive ? 0 : void 0,
-        title: markerTitle(tone, stopReason),
-        className: markerClass(tone, interactive),
-        onClick: handleMarkerClick,
-        onKeyDown: handleMarkerKeyDown,
-        children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: markerInnerClass(tone) })
-      }
-    ),
-    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 flex justify-center min-h-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 ToolTraceEventRow({ event }) {
-  const argumentCopy = useCopyFeedback(event.argumentsText);
-  const canCopyArguments = event.argumentsText !== null;
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
-    "div",
+    "svg",
     {
-      className: "group/tool-trace flex min-w-0 items-center gap-2 rounded-md border border-border/70 bg-muted/20 px-2.5 py-1.5 text-xs",
+      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(Wrench, { className: "size-3.5 shrink-0 text-sky-400/70" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono font-semibold text-foreground/80", children: event.name }),
-        event.argumentsPreview !== null && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronRight, { className: "size-3 shrink-0 text-muted-foreground/60" }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "min-w-0 truncate font-mono text-muted-foreground", children: event.argumentsPreview })
-        ] }),
-        canCopyArguments && /* @__PURE__ */ jsxRuntimeExports.jsx(
-          "button",
-          {
-            type: "button",
-            className: "ml-auto inline-flex size-6 shrink-0 items-center justify-center rounded text-muted-foreground opacity-0 transition-opacity hover:bg-background/80 hover:text-foreground focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring group-hover/tool-trace:opacity-100 group-focus-within/tool-trace:opacity-100",
-            onClick: argumentCopy.copy,
-            "aria-label": argumentCopy.copied ? "Copied tool arguments" : "Copy tool arguments",
-            title: argumentCopy.copied ? "Copied tool arguments" : "Copy tool arguments",
-            children: argumentCopy.copied ? /* @__PURE__ */ jsxRuntimeExports.jsx(Check, { className: "size-3.5" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Copy, { className: "size-3.5" })
-          }
-        )
+        /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d }),
+        eyeStalks,
+        eyes,
+        legs,
+        extras
       ]
-    },
-    event.id
+    }
   );
 }
-function ToolTraceEvents({ events }) {
-  if (events.length === 0) return null;
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mx-3 mb-2 grid gap-1.5", children: events.map((event) => /* @__PURE__ */ jsxRuntimeExports.jsx(ToolTraceEventRow, { event }, event.id)) });
-}
-const PREVIEW_LIMIT = 180;
-const toolTraceCache = /* @__PURE__ */ new WeakMap();
-function responseMayContainToolTrace(log, format) {
-  const responseText = log.responseText;
-  if (responseText === null) return false;
-  switch (format) {
-    case "anthropic":
-      return responseText.includes("tool_use");
-    case "openai":
-      return responseText.includes("tool_calls") || responseText.includes("function_call");
-    case "unknown":
-      return false;
-  }
-}
-function isTurnCollapsible(entryCount, isComplete, isPending) {
-  return entryCount > 1 && isComplete && !isPending;
+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 buildTurnGroups(logs) {
-  const groups = [];
-  let entries = [];
-  let turnIndex = 0;
-  for (let index = 0; index < logs.length; index += 1) {
-    const log = logs[index];
-    if (log === void 0) continue;
-    entries.push({ log, stopReason: extractStopReason(log), sessionLogNumber: index + 1 });
-    const current = entries[entries.length - 1];
-    if (current !== void 0 && isTurnBoundary(current.stopReason)) {
-      groups.push({ entries, turnIndex });
-      entries = [];
-      turnIndex += 1;
+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" })
+      ] })
     }
-  }
-  if (entries.length > 0) groups.push({ entries, turnIndex });
-  return groups;
+  );
 }
-function buildValidPredecessors(groups) {
-  const predecessors = /* @__PURE__ */ new Map();
-  for (const group of groups) {
-    for (let index = 1; index < group.logs.length; index += 1) {
-      const current = group.logs[index];
-      const previous = group.logs[index - 1];
-      if (current === void 0 || previous === void 0) continue;
-      const currentFormat = resolveLogFormat(current);
-      const previousFormat = resolveLogFormat(previous);
-      if (currentFormat === "unknown" || currentFormat !== previousFormat) continue;
-      predecessors.set(current.id, previous);
+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" })
+      ] })
     }
-  }
-  return predecessors;
+  );
 }
-function parseJsonResponse(responseText) {
-  if (responseText === null) return null;
-  try {
-    const parsed = JSON.parse(responseText);
-    if (typeof parsed === "string") {
-      return JSON.parse(parsed);
+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" })
+      ] })
     }
-    return parsed;
-  } catch {
-    return null;
-  }
-}
-function previewValue(value) {
-  if (value === void 0 || value === null) return null;
-  const raw = typeof value === "string" ? value : JSON.stringify(value);
-  if (raw === void 0) return null;
-  const normalized = raw.replace(/\s+/g, " ").trim();
-  if (normalized.length === 0) return null;
-  return normalized.length > PREVIEW_LIMIT ? `${normalized.slice(0, PREVIEW_LIMIT - 1)}...` : normalized;
+  );
 }
-function copyValue(value) {
-  if (value === void 0 || value === null) return null;
-  if (typeof value === "string") return value.length > 0 ? value : null;
-  const raw = JSON.stringify(value, null, 2);
-  return raw === void 0 || raw.length === 0 ? null : raw;
+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 extractAnthropicToolTraceEvents(log) {
-  const parsed = parseJsonResponse(log.responseText);
-  const content = safeGetOwnProperty(parsed, "content");
-  if (!Array.isArray(content)) return [];
-  const events = [];
-  for (const block of content) {
-    const type = safeGetOwnProperty(block, "type");
-    if (type !== "tool_use") continue;
-    const name = safeGetOwnProperty(block, "name");
-    if (typeof name !== "string" || name.length === 0) continue;
-    const input = safeGetOwnProperty(block, "input");
-    events.push({
-      id: `${String(log.id)}-anthropic-tool-${String(events.length)}`,
-      logId: log.id,
-      index: events.length,
-      provider: "anthropic",
-      name,
-      argumentsText: copyValue(input),
-      argumentsPreview: previewValue(input)
-    });
-  }
-  return events;
+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 extractOpenAIToolTraceEvents(log) {
-  const parsed = parseJsonResponse(log.responseText);
-  const choices = safeGetOwnProperty(parsed, "choices");
-  if (!Array.isArray(choices)) return [];
-  const events = [];
-  for (const choice of choices) {
-    const message = safeGetOwnProperty(choice, "message");
-    const toolCalls = safeGetOwnProperty(message, "tool_calls");
-    if (!Array.isArray(toolCalls)) continue;
-    for (const call of toolCalls) {
-      const fn = safeGetOwnProperty(call, "function");
-      const name = safeGetOwnProperty(fn, "name");
-      if (typeof name !== "string" || name.length === 0) continue;
-      const args = safeGetOwnProperty(fn, "arguments");
-      events.push({
-        id: `${String(log.id)}-openai-tool-${String(events.length)}`,
-        logId: log.id,
-        index: events.length,
-        provider: "openai",
-        name,
-        argumentsText: copyValue(args),
-        argumentsPreview: previewValue(args)
-      });
+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" })
+      ] })
     }
-  }
-  const output = safeGetOwnProperty(parsed, "output");
-  if (Array.isArray(output)) {
-    for (const item of output) {
-      if (safeGetOwnProperty(item, "type") !== "function_call") continue;
-      const name = safeGetOwnProperty(item, "name");
-      if (typeof name !== "string" || name.length === 0) continue;
-      const args = safeGetOwnProperty(item, "arguments");
-      events.push({
-        id: `${String(log.id)}-openai-tool-${String(events.length)}`,
-        logId: log.id,
-        index: events.length,
-        provider: "openai",
-        name,
-        argumentsText: copyValue(args),
-        argumentsPreview: previewValue(args)
-      });
+  );
+}
+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" })
+      ] })
     }
-  }
-  return events;
+  );
 }
-function extractToolTraceEvents(log) {
-  const cached = toolTraceCache.get(log);
-  if (cached !== void 0 && cached.apiFormat === log.apiFormat && cached.responseText === log.responseText) {
-    return cached.events;
-  }
-  const format = resolveLogFormat(log);
-  if (!responseMayContainToolTrace(log, format)) {
-    const events2 = [];
-    toolTraceCache.set(log, {
-      apiFormat: log.apiFormat,
-      responseText: log.responseText,
-      events: events2
-    });
-    return events2;
-  }
-  let events;
-  switch (format) {
-    case "anthropic":
-      events = extractAnthropicToolTraceEvents(log);
-      break;
-    case "openai":
-      events = extractOpenAIToolTraceEvents(log);
-      break;
-    case "unknown":
-      events = [];
-      break;
-  }
-  toolTraceCache.set(log, {
-    apiFormat: log.apiFormat,
-    responseText: log.responseText,
-    events
-  });
-  return events;
+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 buildTraceSummary(logs, slowResponseThresholdSeconds, knowledgeCandidateCount = 0) {
-  let failedCallCount = 0;
-  let pendingCallCount = 0;
-  let slowCallCount = 0;
-  let totalInputTokens = 0;
-  let totalOutputTokens = 0;
-  let totalCacheCreationInputTokens = 0;
-  let totalCacheReadInputTokens = 0;
-  let totalElapsedMs = 0;
-  let maxElapsedMs = null;
-  let toolCallCount = 0;
-  for (const log of logs) {
-    if (log.responseStatus === null) {
-      pendingCallCount += 1;
-    } else if (log.responseStatus >= 400) {
-      failedCallCount += 1;
-    }
-    if (log.elapsedMs !== null && slowResponseThresholdSeconds > 0 && log.elapsedMs > slowResponseThresholdSeconds * 1e3) {
-      slowCallCount += 1;
-    }
-    if (log.inputTokens !== null) totalInputTokens += log.inputTokens;
-    if (log.outputTokens !== null) totalOutputTokens += log.outputTokens;
-    if (log.cacheCreationInputTokens !== null) {
-      totalCacheCreationInputTokens += log.cacheCreationInputTokens;
+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" })
+      ] })
     }
-    if (log.cacheReadInputTokens !== null) {
-      totalCacheReadInputTokens += log.cacheReadInputTokens;
+  );
+}
+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" })
+      ] })
     }
-    if (log.elapsedMs !== null) {
-      totalElapsedMs += log.elapsedMs;
-      maxElapsedMs = maxElapsedMs === null ? log.elapsedMs : Math.max(maxElapsedMs, log.elapsedMs);
+  );
+}
+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" })
+      ] })
     }
-    toolCallCount += extractToolTraceEvents(log).length;
+  );
+}
+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 getInteriorCrabVariantIndex(seed) {
+  const interiorCount = crabVariants.length - 2;
+  if (interiorCount <= 0) return 0;
+  const normalizedSeed = Number.isFinite(seed) ? Math.trunc(seed) : 0;
+  return 1 + (normalizedSeed % interiorCount + interiorCount) % interiorCount;
+}
+function getInteriorCrabVariant(seed) {
+  return getCrabVariant(getInteriorCrabVariantIndex(seed));
+}
+function boundaryTitle(stopReason) {
+  switch (stopReason) {
+    case "end_turn":
+      return "End of Turn (Anthropic)";
+    case "stop":
+      return "End of Turn (OpenAI)";
+    case "length":
+      return "End of Turn (length limit)";
+    case "tool_use":
+    case null:
+      return "End of Turn";
   }
-  return {
-    llmCallCount: logs.length,
-    toolCallCount,
-    failedCallCount,
-    pendingCallCount,
-    slowCallCount,
-    totalInputTokens,
-    totalOutputTokens,
-    totalCacheCreationInputTokens,
-    totalCacheReadInputTokens,
-    totalElapsedMs,
-    maxElapsedMs,
-    startedAt: logs[0]?.timestamp ?? null,
-    endedAt: logs[logs.length - 1]?.timestamp ?? null,
-    knowledgeCandidateCount
-  };
 }
-function formatElapsed$2(ms) {
-  if (ms < 1e3) return `${ms}ms`;
-  return `${(ms / 1e3).toFixed(1)}s`;
+function crabShellClass(interactive) {
+  return interactive ? "cursor-pointer transition-transform hover:scale-110" : "";
 }
-const TurnGroup = reactExports.memo(function TurnGroup2({
-  entries,
-  viewMode,
-  strip,
-  slowResponseThresholdSeconds,
-  cacheTrends,
-  onCompareWithPrevious,
-  comparisonPredecessors,
-  turnIndex = 0,
-  timeDisplayFormat,
-  pendingFocusRequest,
-  showLogClientMetadata = true
+function ThreadConnector({
+  stopReason,
+  isPending,
+  isFirst,
+  isTurnStart,
+  isOnlyEntry = false,
+  crabIndex = 0,
+  collapsible = false,
+  onToggle
 }) {
-  const lastIdx = entries.length - 1;
-  const lastStop = entries[lastIdx]?.stopReason ?? null;
-  const isComplete = lastStop !== null ? isTurnBoundary(lastStop) : false;
-  const isPending = entries[lastIdx]?.log.responseStatus === null;
-  const isSingleLog = entries.length === 1;
-  const collapsible = isTurnCollapsible(entries.length, isComplete, isPending);
-  const [collapsed, setCollapsed] = reactExports.useState(false);
-  const prevCompleteRef = reactExports.useRef(false);
-  reactExports.useEffect(() => {
-    if (!collapsible) {
-      setCollapsed(false);
-    } else if (isComplete && !prevCompleteRef.current) {
-      setCollapsed(true);
-    }
-    prevCompleteRef.current = isComplete;
-  }, [collapsible, isComplete]);
-  reactExports.useEffect(() => {
-    const handleLogFocusRequest = (event) => {
-      const request = readLogFocusRequest(event);
-      if (request === null) return;
-      if (!entries.some((entry) => entry.log.id === request.logId)) return;
-      if (collapsible) setCollapsed(false);
-    };
-    window.addEventListener(LOG_FOCUS_REQUEST_EVENT, handleLogFocusRequest);
-    return () => {
-      window.removeEventListener(LOG_FOCUS_REQUEST_EVENT, handleLogFocusRequest);
-    };
-  }, [collapsible, entries]);
-  reactExports.useEffect(() => {
-    if (pendingFocusRequest === void 0) return void 0;
-    if (!entries.some((entry) => entry.log.id === pendingFocusRequest.logId)) return void 0;
-    if (collapsible) setCollapsed(false);
-    const timer = window.setTimeout(() => {
-      dispatchLogFocusRequest({
-        logId: pendingFocusRequest.logId,
-        tab: pendingFocusRequest.tab,
-        source: "virtualizer"
-      });
-    }, 0);
-    return () => window.clearTimeout(timer);
-  }, [collapsible, entries, pendingFocusRequest]);
-  const toggleCollapse = reactExports.useCallback(() => {
-    if (collapsible) setCollapsed((prev) => !prev);
-  }, [collapsible]);
-  const aggregate = reactExports.useMemo(() => {
-    let totalInput = 0;
-    let totalOutput = 0;
-    let maxElapsed = null;
-    let hasTokens = false;
-    for (const e of entries) {
-      if (e.log.inputTokens !== null) {
-        totalInput += e.log.inputTokens;
-        hasTokens = true;
-      }
-      if (e.log.outputTokens !== null) {
-        totalOutput += e.log.outputTokens;
-        hasTokens = true;
+  const isBoundary = isTurnBoundary(stopReason);
+  const isFusedBoundary = isOnlyEntry && isTurnStart && isBoundary;
+  const isRunning = isPending && !isBoundary;
+  const interactive = collapsible && onToggle !== void 0;
+  const Crab = reactExports.useMemo(() => getCrabVariant(crabIndex), [crabIndex]);
+  const FusedCrab = reactExports.useMemo(() => getInteriorCrabVariant(crabIndex), [crabIndex]);
+  const handleCrabClick = (event) => {
+    if (!interactive || onToggle === void 0) return;
+    event.stopPropagation();
+    onToggle();
+  };
+  const handleCrabKeyDown = (event) => {
+    if (!interactive || onToggle === void 0) return;
+    if (event.key !== "Enter" && event.key !== " ") return;
+    event.preventDefault();
+    onToggle();
+  };
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-col items-center w-6 shrink-0 pt-0.5 pb-0.5", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex justify-center h-[calc(0.75rem-8px)]", children: !isFirst && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-px bg-muted-foreground/18 h-full" }) }),
+    isFusedBoundary ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "span",
+      {
+        role: interactive ? "button" : void 0,
+        tabIndex: interactive ? 0 : void 0,
+        title: "Single-request turn",
+        className: crabShellClass(interactive),
+        onClick: handleCrabClick,
+        onKeyDown: handleCrabKeyDown,
+        children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          FusedCrab,
+          {
+            className: cn(
+              "size-3.5 text-[#80FF00]",
+              "animate-crab-settle",
+              "drop-shadow-[0_0_4px_rgba(128,255,0,0.5)]"
+            )
+          }
+        )
       }
-      if (e.log.elapsedMs !== null) {
-        maxElapsed = maxElapsed === null ? e.log.elapsedMs : Math.max(maxElapsed, e.log.elapsedMs);
+    ) : isBoundary ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "span",
+      {
+        role: interactive ? "button" : void 0,
+        tabIndex: interactive ? 0 : void 0,
+        title: boundaryTitle(stopReason),
+        className: crabShellClass(interactive),
+        onClick: handleCrabClick,
+        onKeyDown: handleCrabKeyDown,
+        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)]"
+            )
+          }
+        )
       }
-    }
-    return {
-      totalInput,
-      totalOutput,
-      hasTokens,
-      maxElapsed
-    };
-  }, [entries, lastIdx]);
-  const bgClass = turnIndex % 2 === 0 ? "bg-white/[0.012]" : "bg-cyan-300/[0.012]";
-  const aggregateIsSlow = aggregate.maxElapsed !== null && slowResponseThresholdSeconds > 0 && aggregate.maxElapsed > slowResponseThresholdSeconds * 1e3;
-  const toolEventsByLogId = reactExports.useMemo(() => {
-    const events = /* @__PURE__ */ new Map();
-    for (const entry of entries) {
-      const extracted = extractToolTraceEvents(entry.log);
-      if (extracted.length > 0) events.set(entry.log.id, extracted);
-    }
-    return events;
-  }, [entries]);
-  const [layoutVersion, setLayoutVersion] = reactExports.useState(0);
-  const containerRef = reactExports.useRef(null);
-  reactExports.useEffect(() => {
-    const el = containerRef.current;
-    if (!el) return;
-    let raf = 0;
-    const ro = new ResizeObserver(() => {
-      window.cancelAnimationFrame(raf);
-      raf = window.requestAnimationFrame(() => setLayoutVersion((v) => v + 1));
-    });
-    ro.observe(el);
-    return () => {
-      ro.disconnect();
-      window.cancelAnimationFrame(raf);
-    };
-  }, []);
-  const firstLogId = entries[0]?.log.id ?? turnIndex;
-  const turnLabel = `Turn ${String(turnIndex + 1)}`;
-  const containmentStyle = reactExports.useMemo(
-    () => ({
-      contentVisibility: "auto",
-      containIntrinsicSize: collapsed ? "48px" : "160px"
-    }),
-    [collapsed]
-  );
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    ) : isTurnStart ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "span",
+      {
+        role: interactive ? "button" : void 0,
+        tabIndex: interactive ? 0 : void 0,
+        title: "Start of turn",
+        className: crabShellClass(interactive),
+        onClick: handleCrabClick,
+        onKeyDown: handleCrabKeyDown,
+        children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+          Crab,
+          {
+            className: cn(
+              "size-3.5 text-emerald-400",
+              "animate-crab-appear",
+              "drop-shadow-[0_0_4px_rgba(52,211,153,0.5)]"
+            )
+          }
+        )
+      }
+    ) : 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("span", { title: "Request in turn", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Crab, { className: "size-3.5 text-muted-foreground/40" }) }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 flex justify-center min-h-0", children: !isBoundary && /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "div",
+      {
+        className: cn(
+          "w-0.5 h-full",
+          isPending ? "border-dashed bg-transparent border-l border-muted-foreground/14" : "bg-muted-foreground/18"
+        )
+      }
+    ) })
+  ] });
+}
+function ToolTraceEventRow({ event }) {
+  const argumentCopy = useCopyFeedback(event.argumentsText);
+  const canCopyArguments = event.argumentsText !== null;
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "div",
     {
-      ref: containerRef,
-      style: containmentStyle,
-      tabIndex: collapsed ? void 0 : 0,
-      role: collapsed ? void 0 : "group",
-      "aria-label": collapsed ? void 0 : turnLabel,
-      "data-nav-id": collapsed ? void 0 : `turn-${String(firstLogId)}`,
-      className: cn(
-        "rounded-[8px] border transition-[border-color,box-shadow]",
-        isPending ? "border-amber-300/15 shadow-[0_0_0_1px_rgba(252,211,77,0.04)]" : "border-transparent",
-        !collapsed && "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:outline-none"
-      ),
-      children: collapsed ? /* @__PURE__ */ jsxRuntimeExports.jsxs(
-        "div",
-        {
-          "data-nav-id": `turn-collapsed-${String(firstLogId)}`,
-          "data-nav-action": "expand",
-          role: "button",
-          tabIndex: 0,
-          className: "flex items-stretch cursor-pointer focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:outline-none rounded-lg",
-          onClick: toggleCollapse,
-          onKeyDown: (e) => {
-            if (e.key === "Enter" || e.key === " ") {
-              e.preventDefault();
-              toggleCollapse();
-            }
-          },
-          children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-5 shrink-0 flex items-start pt-1.5", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-[10px] text-muted-foreground/50 font-mono tabular-nums leading-none select-none", children: turnIndex + 1 }) }),
-            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "w-6 shrink-0 flex flex-col items-center pt-1.5 pb-1.5", children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex justify-center h-[calc(0.75rem-8px)]" }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "size-2 rounded-full border border-cyan-300/45 bg-cyan-300/20" }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 flex justify-center min-h-0", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-px bg-muted-foreground/25 h-full" }) }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx(
-                "span",
-                {
-                  className: cn(
-                    "size-2 rounded-full border",
-                    isComplete ? "border-amber-300/45 bg-amber-300/20" : "border-muted-foreground/30 bg-muted/30"
-                  )
-                }
-              )
-            ] }),
-            entries.length > 1 && /* @__PURE__ */ jsxRuntimeExports.jsxs(
-              "div",
-              {
-                className: cn(
-                  "flex-1 min-w-0 mb-0.5 rounded-[8px] py-1.5 px-3 flex items-center gap-3 text-xs shadow-[inset_0_1px_0_rgba(255,255,255,0.04)]",
-                  "border border-border bg-card shadow-sm transition-colors hover:border-cyan-200/20",
-                  bgClass
-                ),
-                children: [
-                  /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono text-[10px] font-semibold uppercase tracking-[0.14em] text-muted-foreground/70", children: turnLabel }),
-                  /* @__PURE__ */ jsxRuntimeExports.jsxs(
-                    "span",
-                    {
-                      className: "text-blue-300/85 font-mono font-semibold tabular-nums shrink-0",
-                      title: `Log IDs ${String(entries[0]?.log.id ?? "?")} ~ ${String(
-                        entries[lastIdx]?.log.id ?? "?"
-                      )}`,
-                      children: [
-                        "#",
-                        entries[0]?.sessionLogNumber ?? "?",
-                        " ~ #",
-                        entries[lastIdx]?.sessionLogNumber ?? "?"
-                      ]
-                    }
-                  ),
-                  /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-muted-foreground shrink-0", children: [
-                    entries.length,
-                    " request",
-                    entries.length > 1 ? "s" : ""
-                  ] }),
-                  aggregate.maxElapsed !== null && /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipProvider, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
-                    /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
-                      "span",
-                      {
-                        className: cn(
-                          "flex items-center gap-1 shrink-0",
-                          aggregateIsSlow ? "text-amber-400" : "text-muted-foreground"
-                        ),
-                        children: [
-                          /* @__PURE__ */ jsxRuntimeExports.jsx(Clock, { className: "size-3" }),
-                          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono tabular-nums", children: formatElapsed$2(aggregate.maxElapsed) }),
-                          aggregateIsSlow && /* @__PURE__ */ jsxRuntimeExports.jsx(TriangleAlert, { className: "size-3", "aria-label": "Slow response" })
-                        ]
-                      }
-                    ) }),
-                    /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: aggregateIsSlow ? `Slow response: ${formatElapsed$2(
-                      aggregate.maxElapsed
-                    )} exceeds ${formatElapsed$2(slowResponseThresholdSeconds * 1e3)}` : "Slowest request in this turn" })
-                  ] }) }),
-                  aggregate.hasTokens && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "flex items-center gap-1 shrink-0", children: [
-                    /* @__PURE__ */ jsxRuntimeExports.jsx(Zap, { className: "size-3 text-muted-foreground" }),
-                    /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "font-mono tabular-nums", children: [
-                      /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-blue-400", children: [
-                        "IN ",
-                        formatTokens(aggregate.totalInput)
-                      ] }),
-                      " / ",
-                      /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-amber-400", children: [
-                        "OUT ",
-                        formatTokens(aggregate.totalOutput)
-                      ] })
-                    ] })
-                  ] }),
-                  /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "flex-1 min-w-0" }),
-                  /* @__PURE__ */ jsxRuntimeExports.jsx(
-                    "span",
-                    {
-                      className: "border border-input bg-background inline-flex size-7 shrink-0 items-center justify-center rounded-md text-slate-200",
-                      "aria-hidden": "true",
-                      children: /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronRight, { className: "size-4 shrink-0" })
-                    }
-                  )
-                ]
-              }
-            )
-          ]
-        }
-      ) : (
-        /* ---- Expanded: full entries ---- */
-        entries.map((entry, visibleIdx) => {
-          const { log, stopReason: reason } = entry;
-          const isTurnStart = visibleIdx === 0;
-          return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-stretch", children: [
-            isTurnStart ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-5 shrink-0 flex items-start pt-1.5", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-[10px] text-muted-foreground/50 font-mono tabular-nums leading-none select-none", children: turnIndex + 1 }) }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-5 shrink-0" }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx(
-              ThreadConnector,
-              {
-                stopReason: reason,
-                isPending: log.responseStatus === null,
-                isFirst: visibleIdx === 0,
-                isTurnStart,
-                isOnlyEntry: isSingleLog,
-                collapsible: collapsible && isTurnStart,
-                onToggle: toggleCollapse
-              }
-            ),
-            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: cn("flex-1 min-w-0 mb-0.5 rounded-[8px]", bgClass), children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx(
-                LogEntry,
-                {
-                  log,
-                  displayNumber: entry.sessionLogNumber,
-                  viewMode,
-                  strip,
-                  slowResponseThresholdSeconds,
-                  timeDisplayFormat,
-                  cacheTrend: cacheTrends?.get(log.id) ?? null,
-                  showClientMetadata: showLogClientMetadata,
-                  onCompareWithPrevious: comparisonPredecessors.has(log.id) ? onCompareWithPrevious : void 0
-                }
-              ),
-              /* @__PURE__ */ jsxRuntimeExports.jsx(ToolTraceEvents, { events: toolEventsByLogId.get(log.id) ?? [] })
-            ] })
-          ] }, log.id);
-        })
-      )
-    }
+      className: "group/tool-trace flex min-w-0 items-center gap-2 rounded-md bg-white/[0.035] px-2.5 py-1.5 text-xs",
+      children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Wrench, { className: "size-3.5 shrink-0 text-sky-400/70" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono font-semibold text-foreground/80", children: event.name }),
+        event.argumentsPreview !== null && /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronRight, { className: "size-3 shrink-0 text-muted-foreground/60" }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "min-w-0 truncate font-mono text-muted-foreground", children: event.argumentsPreview })
+        ] }),
+        canCopyArguments && /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "button",
+          {
+            type: "button",
+            className: "ml-auto inline-flex size-6 shrink-0 items-center justify-center rounded text-muted-foreground opacity-0 transition-opacity hover:bg-background/80 hover:text-foreground focus-visible:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring group-hover/tool-trace:opacity-100 group-focus-within/tool-trace:opacity-100",
+            onClick: argumentCopy.copy,
+            "aria-label": argumentCopy.copied ? "Copied tool arguments" : "Copy tool arguments",
+            title: argumentCopy.copied ? "Copied tool arguments" : "Copy tool arguments",
+            children: argumentCopy.copied ? /* @__PURE__ */ jsxRuntimeExports.jsx(Check, { className: "size-3.5" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Copy, { className: "size-3.5" })
+          }
+        )
+      ]
+    },
+    event.id
   );
-});
-const VIRTUALIZE_TURN_THRESHOLD = 24;
-const ESTIMATED_TURN_HEIGHT = 132;
-const VIRTUAL_OVERSCAN = 8;
-function shouldVirtualizeTurnGroups(turnCount) {
-  return turnCount > VIRTUALIZE_TURN_THRESHOLD;
 }
-function buildLogTurnIndex(turnGroups) {
-  const result = /* @__PURE__ */ new Map();
-  for (let index = 0; index < turnGroups.length; index++) {
-    const group = turnGroups[index];
-    if (group === void 0) continue;
-    for (const entry of group.entries) {
-      result.set(entry.log.id, index);
-    }
-  }
-  return result;
+function ToolTraceEvents({ events }) {
+  if (events.length === 0) return null;
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mx-3 mb-2 grid gap-1.5", children: events.map((event) => /* @__PURE__ */ jsxRuntimeExports.jsx(ToolTraceEventRow, { event }, event.id)) });
 }
-function renderTurnGroup(turnGroup, props, pendingFocusRequest) {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(
-    TurnGroup,
-    {
-      entries: turnGroup.entries,
-      viewMode: props.viewMode,
-      strip: props.strip,
-      slowResponseThresholdSeconds: props.slowResponseThresholdSeconds,
-      timeDisplayFormat: props.timeDisplayFormat,
-      cacheTrends: props.cacheTrends,
-      onCompareWithPrevious: props.onCompareWithPrevious,
-      comparisonPredecessors: props.comparisonPredecessors,
-      turnIndex: turnGroup.turnIndex,
-      pendingFocusRequest,
-      showLogClientMetadata: props.showLogClientMetadata
-    },
-    turnGroup.turnIndex
-  );
-}
-function TurnGroupList(props) {
-  if (!shouldVirtualizeTurnGroups(props.turnGroups.length)) {
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: props.turnGroups.map((turnGroup) => renderTurnGroup(turnGroup, props)) });
+const PREVIEW_LIMIT = 180;
+const toolTraceCache = /* @__PURE__ */ new WeakMap();
+function responseMayContainToolTrace(log, format) {
+  const responseText = log.responseText;
+  if (responseText === null) return false;
+  switch (format) {
+    case "anthropic":
+      return responseText.includes("tool_use");
+    case "openai":
+      return responseText.includes("tool_calls") || responseText.includes("function_call");
+    case "unknown":
+      return false;
   }
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(VirtualizedTurnGroupList, { ...props });
-}
-function VirtualizedTurnGroupList(props) {
-  const { turnGroups } = props;
-  const [pendingFocusRequest, setPendingFocusRequest] = reactExports.useState(
-    null
-  );
-  const virtualizer = useWindowVirtualizer({
-    count: turnGroups.length,
-    estimateSize: () => ESTIMATED_TURN_HEIGHT,
-    overscan: VIRTUAL_OVERSCAN,
-    getItemKey: (index) => turnGroups[index]?.turnIndex ?? index
-  });
-  const turnIndexByLogId = reactExports.useMemo(() => buildLogTurnIndex(turnGroups), [turnGroups]);
-  reactExports.useEffect(() => {
-    const handleLogFocusRequest = (event) => {
-      const request = readLogFocusRequest(event);
-      if (request === null) return;
-      if (request.source === "virtualizer") return;
-      const turnIndex = turnIndexByLogId.get(request.logId);
-      if (turnIndex === void 0) return;
-      virtualizer.scrollToIndex(turnIndex, { align: "center" });
-      setPendingFocusRequest((previous) => ({
-        ...request,
-        turnIndex,
-        nonce: previous === null ? 1 : previous.nonce + 1
-      }));
-    };
-    window.addEventListener(LOG_FOCUS_REQUEST_EVENT, handleLogFocusRequest);
-    return () => {
-      window.removeEventListener(LOG_FOCUS_REQUEST_EVENT, handleLogFocusRequest);
-    };
-  }, [turnIndexByLogId, virtualizer]);
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(
-    "div",
-    {
-      className: "relative w-full",
-      style: { height: `${virtualizer.getTotalSize()}px` },
-      "data-virtualized-turn-list": "true",
-      children: virtualizer.getVirtualItems().map((virtualItem) => {
-        const turnGroup = turnGroups[virtualItem.index];
-        if (turnGroup === void 0) return null;
-        const itemFocusRequest = pendingFocusRequest !== null && pendingFocusRequest.turnIndex === virtualItem.index ? pendingFocusRequest : void 0;
-        return /* @__PURE__ */ jsxRuntimeExports.jsx(
-          "div",
-          {
-            "data-index": virtualItem.index,
-            ref: virtualizer.measureElement,
-            className: "absolute left-0 top-0 w-full",
-            style: { transform: `translateY(${virtualItem.start}px)` },
-            children: renderTurnGroup(turnGroup, props, itemFocusRequest)
-          },
-          virtualItem.key
-        );
-      })
-    }
-  );
-}
-const CandidateResponseSchema = object({
-  candidates: array(KnowledgeCandidateSchema)
-});
-const CandidatePromotionResponseSchema = object({
-  candidate: KnowledgeCandidateSchema
-});
-const CandidatePromotionFailureResponseSchema = object({
-  error: string().optional(),
-  candidate: KnowledgeCandidateSchema.optional()
-});
-const CandidateUpdateResponseSchema = object({
-  candidate: KnowledgeCandidateSchema
-});
-const CANDIDATE_STATUS_CLASSES = {
-  draft: "border-amber-500/30 bg-amber-500/10 text-amber-500",
-  promoted: "border-emerald-500/30 bg-emerald-500/10 text-emerald-500",
-  failed: "border-destructive/30 bg-destructive/10 text-destructive"
-};
-function formatElapsed$1(ms) {
-  if (ms === null) return "-";
-  if (ms < 1e3) return `${String(ms)}ms`;
-  return `${(ms / 1e3).toFixed(1)}s`;
-}
-function formatTimeRange$1(startedAt, endedAt, timeDisplayFormat) {
-  if (startedAt === null || endedAt === null) return null;
-  return formatTimestampRange(startedAt, endedAt, timeDisplayFormat);
-}
-function formatCandidateCount(count) {
-  return `${String(count)} candidate${count === 1 ? "" : "s"}`;
-}
-function getLogAnchor(logId) {
-  return `log-${String(logId)}`;
 }
-function jumpToLog(logId) {
-  const anchor = getLogAnchor(logId);
-  const target = document.getElementById(anchor);
-  window.history.replaceState(null, "", `#${anchor}`);
-  if (!(target instanceof HTMLElement)) return;
-  target.scrollIntoView({ block: "center", behavior: "smooth" });
-  target.focus({ preventScroll: true });
+function isTurnCollapsible(entryCount, isComplete, isPending) {
+  return entryCount > 1 && isComplete && !isPending;
 }
-function firstFailureLog(logs) {
-  for (const log of logs) {
-    if (log.responseStatus !== null && log.responseStatus >= 400) return log;
+function buildTurnGroups(logs) {
+  const groups = [];
+  let entries = [];
+  let turnIndex = 0;
+  for (let index = 0; index < logs.length; index += 1) {
+    const log = logs[index];
+    if (log === void 0) continue;
+    entries.push({ log, stopReason: extractStopReason(log), sessionLogNumber: index + 1 });
+    const current = entries[entries.length - 1];
+    if (current !== void 0 && isTurnBoundary(current.stopReason)) {
+      groups.push({ entries, turnIndex });
+      entries = [];
+      turnIndex += 1;
+    }
   }
-  return null;
+  if (entries.length > 0) groups.push({ entries, turnIndex });
+  return groups;
 }
-function slowestLog(logs) {
-  let current = null;
-  let currentElapsed = -1;
-  for (const log of logs) {
-    if (log.elapsedMs === null) continue;
-    if (log.elapsedMs > currentElapsed) {
-      current = log;
-      currentElapsed = log.elapsedMs;
+function buildValidPredecessors(groups) {
+  const predecessors = /* @__PURE__ */ new Map();
+  for (const group of groups) {
+    for (let index = 1; index < group.logs.length; index += 1) {
+      const current = group.logs[index];
+      const previous = group.logs[index - 1];
+      if (current === void 0 || previous === void 0) continue;
+      const currentFormat = resolveLogFormat(current);
+      const previousFormat = resolveLogFormat(previous);
+      if (currentFormat === "unknown" || currentFormat !== previousFormat) continue;
+      predecessors.set(current.id, previous);
     }
   }
-  return current;
+  return predecessors;
 }
-function firstToolLog(logs) {
-  for (const log of logs) {
-    if (extractToolTraceEvents(log).length > 0) return log;
+function parseJsonResponse(responseText) {
+  if (responseText === null) return null;
+  try {
+    const parsed = JSON.parse(responseText);
+    if (typeof parsed === "string") {
+      return JSON.parse(parsed);
+    }
+    return parsed;
+  } catch {
+    return null;
   }
-  return null;
 }
-function buildDisplayNumberByLogId$1(logs) {
-  const result = /* @__PURE__ */ new Map();
-  for (let index = 0; index < logs.length; index += 1) {
-    const log = logs[index];
-    if (log === void 0) continue;
-    result.set(log.id, index + 1);
-  }
-  return result;
+function previewValue(value) {
+  if (value === void 0 || value === null) return null;
+  const raw = typeof value === "string" ? value : JSON.stringify(value);
+  if (raw === void 0) return null;
+  const normalized = raw.replace(/\s+/g, " ").trim();
+  if (normalized.length === 0) return null;
+  return normalized.length > PREVIEW_LIMIT ? `${normalized.slice(0, PREVIEW_LIMIT - 1)}...` : normalized;
 }
-function displayLogNumber(logId, displayNumberByLogId) {
-  return String(displayNumberByLogId.get(logId) ?? logId);
+function copyValue(value) {
+  if (value === void 0 || value === null) return null;
+  if (typeof value === "string") return value.length > 0 ? value : null;
+  const raw = JSON.stringify(value, null, 2);
+  return raw === void 0 || raw.length === 0 ? null : raw;
 }
-function buildTraceInsights(input) {
-  const insights = [
-    {
-      kind: "session",
-      title: `${String(input.summary.llmCallCount)} LLM call${input.summary.llmCallCount === 1 ? "" : "s"}`,
-      detail: `Scope ${input.scopeId}`,
-      logId: input.logs[0]?.id ?? null
-    }
-  ];
-  const toolLog = firstToolLog(input.logs);
-  if (input.summary.toolCallCount > 0 && toolLog !== null) {
-    insights.push({
-      kind: "tool",
-      title: `${String(input.summary.toolCallCount)} tool call${input.summary.toolCallCount === 1 ? "" : "s"}`,
-      detail: `First tool evidence at #${displayLogNumber(toolLog.id, input.displayNumberByLogId)}`,
-      logId: toolLog.id
-    });
-  }
-  const failure = firstFailureLog(input.logs);
-  if (failure !== null) {
-    insights.push({
-      kind: "failure",
-      title: `Failure #${String(failure.responseStatus)}`,
-      detail: `First failed request is #${displayLogNumber(failure.id, input.displayNumberByLogId)}`,
-      logId: failure.id
+function extractAnthropicToolTraceEvents(log) {
+  const parsed = parseJsonResponse(log.responseText);
+  const content = safeGetOwnProperty(parsed, "content");
+  if (!Array.isArray(content)) return [];
+  const events = [];
+  for (const block of content) {
+    const type = safeGetOwnProperty(block, "type");
+    if (type !== "tool_use") continue;
+    const name = safeGetOwnProperty(block, "name");
+    if (typeof name !== "string" || name.length === 0) continue;
+    const input = safeGetOwnProperty(block, "input");
+    events.push({
+      id: `${String(log.id)}-anthropic-tool-${String(events.length)}`,
+      logId: log.id,
+      index: events.length,
+      provider: "anthropic",
+      name,
+      argumentsText: copyValue(input),
+      argumentsPreview: previewValue(input)
     });
   }
-  const slowest = slowestLog(input.logs);
-  if (slowest !== null && input.summary.maxElapsedMs !== null) {
-    insights.push({
-      kind: "slow",
-      title: `Slowest ${formatElapsed$1(input.summary.maxElapsedMs)}`,
-      detail: `Max latency observed at #${displayLogNumber(slowest.id, input.displayNumberByLogId)}`,
-      logId: slowest.id
-    });
+  return events;
+}
+function extractOpenAIToolTraceEvents(log) {
+  const parsed = parseJsonResponse(log.responseText);
+  const choices = safeGetOwnProperty(parsed, "choices");
+  if (!Array.isArray(choices)) return [];
+  const events = [];
+  for (const choice of choices) {
+    const message = safeGetOwnProperty(choice, "message");
+    const toolCalls = safeGetOwnProperty(message, "tool_calls");
+    if (!Array.isArray(toolCalls)) continue;
+    for (const call of toolCalls) {
+      const fn = safeGetOwnProperty(call, "function");
+      const name = safeGetOwnProperty(fn, "name");
+      if (typeof name !== "string" || name.length === 0) continue;
+      const args = safeGetOwnProperty(fn, "arguments");
+      events.push({
+        id: `${String(log.id)}-openai-tool-${String(events.length)}`,
+        logId: log.id,
+        index: events.length,
+        provider: "openai",
+        name,
+        argumentsText: copyValue(args),
+        argumentsPreview: previewValue(args)
+      });
+    }
   }
-  if (input.candidates.length > 0) {
-    const draftCount = input.candidates.filter((candidate) => candidate.status === "draft").length;
-    const promotedCount = input.candidates.filter(
-      (candidate) => candidate.status === "promoted"
-    ).length;
-    insights.push({
-      kind: "candidate",
-      title: `${String(input.candidates.length)} memory candidate${input.candidates.length === 1 ? "" : "s"}`,
-      detail: `${String(draftCount)} draft / ${String(promotedCount)} promoted`,
-      logId: input.candidates[0]?.logIds[0] ?? null
-    });
+  const output = safeGetOwnProperty(parsed, "output");
+  if (Array.isArray(output)) {
+    for (const item of output) {
+      if (safeGetOwnProperty(item, "type") !== "function_call") continue;
+      const name = safeGetOwnProperty(item, "name");
+      if (typeof name !== "string" || name.length === 0) continue;
+      const args = safeGetOwnProperty(item, "arguments");
+      events.push({
+        id: `${String(log.id)}-openai-tool-${String(events.length)}`,
+        logId: log.id,
+        index: events.length,
+        provider: "openai",
+        name,
+        argumentsText: copyValue(args),
+        argumentsPreview: previewValue(args)
+      });
+    }
   }
-  return insights;
+  return events;
 }
-function insightIcon(kind) {
-  switch (kind) {
-    case "session":
-      return /* @__PURE__ */ jsxRuntimeExports.jsx(MessageSquare, { className: "size-3.5 text-blue-400" });
-    case "tool":
-      return /* @__PURE__ */ jsxRuntimeExports.jsx(Wrench, { className: "size-3.5 text-sky-400/70" });
-    case "slow":
-      return /* @__PURE__ */ jsxRuntimeExports.jsx(Clock, { className: "size-3.5 text-amber-400" });
-    case "failure":
-      return /* @__PURE__ */ jsxRuntimeExports.jsx(CircleX, { className: "size-3.5 text-destructive" });
-    case "candidate":
-      return /* @__PURE__ */ jsxRuntimeExports.jsx(Brain, { className: "size-3.5 text-emerald-400" });
+function extractToolTraceEvents(log) {
+  const cached = toolTraceCache.get(log);
+  if (cached !== void 0 && cached.apiFormat === log.apiFormat && cached.responseText === log.responseText) {
+    return cached.events;
   }
-}
-function TraceInsights({ insights }) {
-  if (insights.length === 0) return null;
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-2 grid gap-1.5 border-t border-border/70 pt-2 md:grid-cols-2 xl:grid-cols-3", children: insights.map((insight) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
-    "button",
-    {
-      type: "button",
-      className: cn(
-        "flex min-w-0 items-center gap-2 rounded-md px-2 py-1.5 text-left text-xs",
-        "text-muted-foreground transition-colors hover:bg-muted/40 hover:text-foreground",
-        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-      ),
-      onClick: () => {
-        if (insight.logId !== null) jumpToLog(insight.logId);
-      },
-      disabled: insight.logId === null,
-      children: [
-        insightIcon(insight.kind),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "min-w-0", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "block truncate font-medium text-foreground/90", children: insight.title }),
-          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "block truncate font-mono text-[10px]", children: insight.detail })
-        ] })
-      ]
-    },
-    `${insight.kind}-${insight.title}`
-  )) });
-}
-function candidateStatusLabel(status) {
-  switch (status) {
-    case "draft":
-      return "Draft";
-    case "promoted":
-      return "Promoted";
-    case "failed":
-      return "Failed";
+  const format = resolveLogFormat(log);
+  if (!responseMayContainToolTrace(log, format)) {
+    const events2 = [];
+    toolTraceCache.set(log, {
+      apiFormat: log.apiFormat,
+      responseText: log.responseText,
+      events: events2
+    });
+    return events2;
   }
-}
-function candidatePromoteLabel(candidate, promoting) {
-  if (promoting) return "Promoting";
-  switch (candidate.status) {
-    case "draft":
-      return "Promote";
-    case "failed":
-      return "Retry";
-    case "promoted":
-      return "Promoted";
+  let events;
+  switch (format) {
+    case "anthropic":
+      events = extractAnthropicToolTraceEvents(log);
+      break;
+    case "openai":
+      events = extractOpenAIToolTraceEvents(log);
+      break;
+    case "unknown":
+      events = [];
+      break;
   }
+  toolTraceCache.set(log, {
+    apiFormat: log.apiFormat,
+    responseText: log.responseText,
+    events
+  });
+  return events;
 }
-function redactionLabel(candidate) {
-  if (!candidate.redaction.redacted) return "No sensitive pattern matched";
-  return `Redacted ${candidate.redaction.patterns.join(", ")}`;
-}
-function previewText(value, maxLength) {
-  const normalized = value.replace(/\s+/g, " ").trim();
-  if (normalized.length <= maxLength) return normalized;
-  return `${normalized.slice(0, maxLength - 3)}...`;
-}
-function logRangeLabel(logIds, displayNumberByLogId) {
-  const first = logIds[0];
-  const last = logIds[logIds.length - 1];
-  if (first === void 0) return "No evidence logs";
-  const firstLabel = displayLogNumber(first, displayNumberByLogId);
-  if (last === void 0 || first === last) return `#${firstLabel}`;
-  return `#${firstLabel}-#${displayLogNumber(last, displayNumberByLogId)}`;
-}
-function tagsToText(tags) {
-  return tags.join(", ");
-}
-function textToTags(value) {
-  return value.split(",").map((tag) => tag.trim()).filter((tag) => tag.length > 0);
-}
-function CandidateItem({
-  candidate,
-  isPromoting,
-  isUpdating,
-  onPromoteCandidate,
-  onUpdateCandidate,
-  displayNumberByLogId
-}) {
-  const [editing, setEditing] = reactExports.useState(false);
-  const [draftType, setDraftType] = reactExports.useState(candidate.type);
-  const [draftTitle, setDraftTitle] = reactExports.useState(candidate.title);
-  const [draftContent, setDraftContent] = reactExports.useState(candidate.content);
-  const [draftTags, setDraftTags] = reactExports.useState(tagsToText(candidate.tags));
-  const [localError, setLocalError] = reactExports.useState(null);
-  const canPromote = candidate.status !== "promoted";
-  const canEdit = candidate.status !== "promoted";
-  const resetDraft = reactExports.useCallback(() => {
-    setDraftType(candidate.type);
-    setDraftTitle(candidate.title);
-    setDraftContent(candidate.content);
-    setDraftTags(tagsToText(candidate.tags));
-    setLocalError(null);
-  }, [candidate.content, candidate.tags, candidate.title, candidate.type]);
-  const saveDraft = reactExports.useCallback(async () => {
-    const title = draftTitle.trim();
-    const content = draftContent.trim();
-    const tags = textToTags(draftTags);
-    if (title.length === 0) {
-      setLocalError("Title is required.");
-      return;
+function buildTraceSummary(logs, slowResponseThresholdSeconds, knowledgeCandidateCount = 0) {
+  let failedCallCount = 0;
+  let pendingCallCount = 0;
+  let slowCallCount = 0;
+  let totalInputTokens = 0;
+  let totalOutputTokens = 0;
+  let totalCacheCreationInputTokens = 0;
+  let totalCacheReadInputTokens = 0;
+  let totalElapsedMs = 0;
+  let maxElapsedMs = null;
+  let toolCallCount = 0;
+  for (const log of logs) {
+    if (log.responseStatus === null) {
+      pendingCallCount += 1;
+    } else if (log.responseStatus >= 400) {
+      failedCallCount += 1;
     }
-    if (content.length === 0) {
-      setLocalError("Content is required.");
-      return;
+    if (log.elapsedMs !== null && slowResponseThresholdSeconds > 0 && log.elapsedMs > slowResponseThresholdSeconds * 1e3) {
+      slowCallCount += 1;
     }
-    if (tags.length === 0) {
-      setLocalError("At least one tag is required.");
-      return;
+    if (log.inputTokens !== null) totalInputTokens += log.inputTokens;
+    if (log.outputTokens !== null) totalOutputTokens += log.outputTokens;
+    if (log.cacheCreationInputTokens !== null) {
+      totalCacheCreationInputTokens += log.cacheCreationInputTokens;
     }
-    setLocalError(null);
-    const saved = await onUpdateCandidate(candidate.id, {
-      type: draftType,
-      title,
-      content,
-      tags
-    });
-    if (saved) setEditing(false);
-  }, [candidate.id, draftContent, draftTags, draftTitle, draftType, onUpdateCandidate]);
-  if (editing) {
-    return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "border border-border bg-card shadow-sm rounded-[8px] px-2.5 py-2", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid gap-2", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsxs(
-          "select",
-          {
-            value: draftType,
-            disabled: isUpdating,
-            onChange: (event) => {
-              const parsed = KnowledgeCandidateSchema.shape.type.safeParse(
-                event.currentTarget.value
-              );
-              if (parsed.success) setDraftType(parsed.data);
-            },
-            className: "border border-input bg-background hover:bg-accent hover:text-accent-foreground h-7 rounded-md px-2 text-xs",
-            "aria-label": "Candidate type",
-            children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "episode", children: "episode" }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "procedure", children: "procedure" }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "preference", children: "preference" }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "project-fact", children: "project-fact" })
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxRuntimeExports.jsx(
-          "input",
-          {
-            value: draftTitle,
-            disabled: isUpdating,
-            onChange: (event) => setDraftTitle(event.currentTarget.value),
-            className: "border border-input bg-background hover:bg-accent hover:text-accent-foreground h-7 min-w-[220px] flex-1 rounded-md px-2 text-xs",
-            "aria-label": "Candidate title"
-          }
-        )
-      ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(
-        "textarea",
-        {
-          value: draftContent,
-          disabled: isUpdating,
-          onChange: (event) => setDraftContent(event.currentTarget.value),
-          className: "border border-input bg-background hover:bg-accent hover:text-accent-foreground min-h-28 rounded-md px-2 py-1.5 font-mono text-[11px] leading-relaxed",
-          "aria-label": "Candidate content"
-        }
-      ),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(
-        "input",
-        {
-          value: draftTags,
-          disabled: isUpdating,
-          onChange: (event) => setDraftTags(event.currentTarget.value),
-          className: "border border-input bg-background hover:bg-accent hover:text-accent-foreground h-7 rounded-md px-2 text-xs",
-          "aria-label": "Candidate tags"
-        }
-      ),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "inline-flex items-center gap-1 text-[10px] text-muted-foreground", children: [
-          /* @__PURE__ */ jsxRuntimeExports.jsx(ShieldCheck, { className: "size-3" }),
-          "Saving reruns Inspector redaction before promotion."
-        ] }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "flex-1" }),
-        localError !== null && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-[10px] text-destructive", children: localError }),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs(
-          Button,
-          {
-            type: "button",
-            variant: "ghost",
-            size: "sm",
-            className: "h-7 gap-1.5 px-2 text-xs",
-            disabled: isUpdating,
-            onClick: () => {
-              resetDraft();
-              setEditing(false);
-            },
-            children: [
-              /* @__PURE__ */ jsxRuntimeExports.jsx(X, { className: "size-3.5" }),
-              "Cancel"
-            ]
-          }
-        ),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs(
-          Button,
-          {
-            type: "button",
-            variant: "outline",
-            size: "sm",
-            className: "h-7 gap-1.5 px-2 text-xs",
-            disabled: isUpdating,
-            onClick: () => {
-              void saveDraft();
-            },
-            children: [
-              isUpdating ? /* @__PURE__ */ jsxRuntimeExports.jsx(RefreshCw, { className: "size-3.5 animate-spin" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Save, { className: "size-3.5" }),
-              "Save"
-            ]
-          }
-        )
-      ] })
-    ] }) });
+    if (log.cacheReadInputTokens !== null) {
+      totalCacheReadInputTokens += log.cacheReadInputTokens;
+    }
+    if (log.elapsedMs !== null) {
+      totalElapsedMs += log.elapsedMs;
+      maxElapsedMs = maxElapsedMs === null ? log.elapsedMs : Math.max(maxElapsedMs, log.elapsedMs);
+    }
+    toolCallCount += extractToolTraceEvents(log).length;
   }
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "rounded-md border border-border/80 bg-background/60 px-2.5 py-2", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(Badge, { variant: "outline", className: "h-5 px-1.5 text-[10px] font-mono", children: candidate.type }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "min-w-0 flex-1 truncate text-xs font-medium", title: candidate.title, children: candidate.title }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx(
-        Badge,
-        {
-          variant: "outline",
-          className: cn(
-            "h-5 shrink-0 px-1.5 text-[10px] font-mono",
-            CANDIDATE_STATUS_CLASSES[candidate.status]
-          ),
-          children: candidateStatusLabel(candidate.status)
-        }
-      )
-    ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(
-      "p",
-      {
-        className: "mt-1 text-[11px] leading-relaxed text-muted-foreground",
-        title: candidate.content,
-        children: previewText(candidate.content, 360)
-      }
-    ),
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mt-2 flex flex-wrap items-center gap-x-3 gap-y-1 text-[10px] text-muted-foreground", children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "inline-flex items-center gap-1", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(FileSearch, { className: "size-3" }),
-        logRangeLabel(candidate.logIds, displayNumberByLogId)
-      ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "inline-flex items-center gap-1", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(ShieldCheck, { className: "size-3" }),
-        redactionLabel(candidate)
-      ] }),
-      candidate.status === "promoted" && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "inline-flex items-center gap-1 text-emerald-500", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(CircleCheck, { className: "size-3" }),
-        candidate.openClawMemoryId ?? "OpenClaw"
-      ] }),
-      candidate.status === "failed" && candidate.error !== null && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "inline-flex items-center gap-1 text-destructive", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(CircleX, { className: "size-3" }),
-        candidate.error
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mt-1 flex flex-wrap items-center gap-1.5", children: [
-      candidate.logIds.map((logId) => {
-        const displayNumber = displayLogNumber(logId, displayNumberByLogId);
-        return /* @__PURE__ */ jsxRuntimeExports.jsxs(
-          "a",
-          {
-            href: `#${getLogAnchor(logId)}`,
-            onClick: (event) => {
-              event.preventDefault();
-              jumpToLog(logId);
-            },
-            className: "rounded border border-blue-400/25 px-1.5 py-0.5 font-mono text-[10px] text-blue-400 underline-offset-2 transition-colors hover:bg-blue-400/10 hover:text-blue-300 hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
-            "aria-label": `Jump to evidence log ${displayNumber}`,
-            title: `Log ID ${String(logId)}`,
-            children: [
-              "#",
-              displayNumber
-            ]
-          },
-          logId
-        );
-      }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "flex-1" }),
-      canEdit && /* @__PURE__ */ jsxRuntimeExports.jsxs(
-        Button,
-        {
-          type: "button",
-          variant: "ghost",
-          size: "sm",
-          className: "h-6 gap-1.5 px-2 text-[10px]",
-          disabled: isUpdating || isPromoting,
-          onClick: () => setEditing(true),
-          children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx(Pencil, { className: "size-3" }),
-            "Review"
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs(
-        Button,
-        {
-          type: "button",
-          variant: canPromote ? "outline" : "ghost",
-          size: "sm",
-          className: "h-6 gap-1.5 px-2 text-[10px]",
-          onClick: () => onPromoteCandidate(candidate.id),
-          disabled: !canPromote || isPromoting || isUpdating,
-          children: [
-            isPromoting ? /* @__PURE__ */ jsxRuntimeExports.jsx(RefreshCw, { className: "size-3 animate-spin" }) : canPromote ? /* @__PURE__ */ jsxRuntimeExports.jsx(CloudUpload, { className: "size-3" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(CircleCheck, { className: "size-3" }),
-            candidatePromoteLabel(candidate, isPromoting)
-          ]
-        }
-      )
-    ] })
-  ] });
+  return {
+    llmCallCount: logs.length,
+    toolCallCount,
+    failedCallCount,
+    pendingCallCount,
+    slowCallCount,
+    totalInputTokens,
+    totalOutputTokens,
+    totalCacheCreationInputTokens,
+    totalCacheReadInputTokens,
+    totalElapsedMs,
+    maxElapsedMs,
+    startedAt: logs[0]?.timestamp ?? null,
+    endedAt: logs[logs.length - 1]?.timestamp ?? null,
+    knowledgeCandidateCount
+  };
 }
-function CandidateList({
-  candidates,
-  promotingCandidateIds,
-  updatingCandidateIds,
-  onPromoteCandidate,
-  onUpdateCandidate,
-  displayNumberByLogId
-}) {
-  if (candidates.length === 0) return null;
-  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-2 grid gap-1.5", children: candidates.map((candidate) => /* @__PURE__ */ jsxRuntimeExports.jsx(
-    CandidateItem,
-    {
-      candidate,
-      isPromoting: promotingCandidateIds.has(candidate.id),
-      isUpdating: updatingCandidateIds.has(candidate.id),
-      onPromoteCandidate,
-      onUpdateCandidate,
-      displayNumberByLogId
-    },
-    candidate.id
-  )) });
+function formatElapsed$2(ms) {
+  if (ms < 1e3) return `${ms}ms`;
+  return `${(ms / 1e3).toFixed(1)}s`;
 }
-function AgentTraceSummary({
-  logs,
-  scopeId,
+const TurnGroup = reactExports.memo(function TurnGroup2({
+  entries,
+  viewMode,
+  strip,
   slowResponseThresholdSeconds,
-  showRollupMetrics,
-  timeDisplayFormat
+  cacheTrends,
+  onCompareWithPrevious,
+  comparisonPredecessors,
+  turnIndex = 0,
+  timeDisplayFormat,
+  pendingFocusRequest,
+  showLogClientMetadata = true
 }) {
-  const [candidates, setCandidates] = reactExports.useState([]);
-  const [candidatesExpanded, setCandidatesExpanded] = reactExports.useState(true);
-  const [candidateState, setCandidateState] = reactExports.useState({
-    status: "idle",
-    error: null
-  });
-  const [promotingCandidateIds, setPromotingCandidateIds] = reactExports.useState(
-    () => /* @__PURE__ */ new Set()
-  );
-  const [updatingCandidateIds, setUpdatingCandidateIds] = reactExports.useState(
-    () => /* @__PURE__ */ new Set()
-  );
-  const hasCandidates = candidates.length > 0;
-  const summary = reactExports.useMemo(
-    () => buildTraceSummary(logs, slowResponseThresholdSeconds, candidates.length),
-    [candidates.length, logs, slowResponseThresholdSeconds]
-  );
-  const displayNumberByLogId = reactExports.useMemo(() => buildDisplayNumberByLogId$1(logs), [logs]);
-  const traceInsights = reactExports.useMemo(
-    () => buildTraceInsights({ logs, scopeId, summary, candidates, displayNumberByLogId }),
-    [candidates, displayNumberByLogId, logs, scopeId, summary]
-  );
-  const showElapsedSummary = showRollupMetrics || summary.maxElapsedMs !== null;
-  const timeRange = reactExports.useMemo(
-    () => formatTimeRange$1(summary.startedAt, summary.endedAt, timeDisplayFormat),
-    [summary.endedAt, summary.startedAt, timeDisplayFormat]
-  );
-  const createCandidates = reactExports.useCallback(() => {
-    if (logs.length === 0 || candidateState.status === "loading") return;
-    setCandidateState({ status: "loading", error: null });
-    void (async () => {
-      try {
-        const response = await fetch(
-          `/api/knowledge/sessions/${encodeURIComponent(scopeId)}/candidates`,
-          { method: "POST" }
-        );
-        if (!response.ok) {
-          const message = await readApiError(
-            response,
-            `Candidate generation failed with ${String(response.status)}`
-          );
-          setCandidateState({ status: "failed", error: message });
-          return;
-        }
-        const parsed = await parseJsonResponse$1(response, CandidateResponseSchema);
-        setCandidates(parsed.candidates);
-        setCandidatesExpanded(parsed.candidates.length > 0);
-        setCandidateState(
-          parsed.candidates.length > 0 ? { status: "ready", error: null } : { status: "failed", error: "No candidate was generated for this trace scope." }
-        );
-      } catch (error) {
-        setCandidateState({
-          status: "failed",
-          error: error instanceof Error ? error.message : "Candidate response was invalid"
-        });
-      }
-    })();
-  }, [candidateState.status, logs.length, scopeId]);
-  const promoteCandidate = reactExports.useCallback((candidateId) => {
-    setPromotingCandidateIds((current) => {
-      if (current.has(candidateId)) return current;
-      const next = new Set(current);
-      next.add(candidateId);
-      return next;
-    });
-    void (async () => {
-      try {
-        const response = await fetch(
-          `/api/knowledge/candidates/${encodeURIComponent(candidateId)}/promote`,
-          { method: "POST" }
-        );
-        const raw = await response.json().catch(() => null);
-        const parsed = CandidatePromotionResponseSchema.safeParse(raw);
-        if (response.ok && parsed.success) {
-          setCandidates(
-            (current) => current.map(
-              (candidate) => candidate.id === parsed.data.candidate.id ? parsed.data.candidate : candidate
-            )
-          );
-          setCandidateState({ status: "ready", error: null });
-          return;
-        }
-        const failure = CandidatePromotionFailureResponseSchema.safeParse(raw);
-        if (failure.success && failure.data.candidate !== void 0) {
-          setCandidates(
-            (current) => current.map(
-              (candidate) => candidate.id === failure.data.candidate?.id ? failure.data.candidate : candidate
-            )
-          );
-        }
-        setCandidateState({
-          status: "failed",
-          error: failure.success ? failure.data.error ?? "Candidate promotion failed" : `Candidate promotion failed with ${String(response.status)}`
-        });
-      } catch (error) {
-        setCandidateState({
-          status: "failed",
-          error: error instanceof Error ? error.message : "Candidate promotion failed"
-        });
-      } finally {
-        setPromotingCandidateIds((current) => {
-          const next = new Set(current);
-          next.delete(candidateId);
-          return next;
-        });
-      }
-    })();
-  }, []);
-  const updateCandidate = reactExports.useCallback(
-    async (candidateId, update) => {
-      setUpdatingCandidateIds((current) => {
-        if (current.has(candidateId)) return current;
-        const next = new Set(current);
-        next.add(candidateId);
-        return next;
+  const lastIdx = entries.length - 1;
+  const lastStop = entries[lastIdx]?.stopReason ?? null;
+  const isComplete = lastStop !== null ? isTurnBoundary(lastStop) : false;
+  const isPending = entries[lastIdx]?.log.responseStatus === null;
+  const isSingleLog = entries.length === 1;
+  const collapsible = isTurnCollapsible(entries.length, isComplete, isPending);
+  const [collapsed, setCollapsed] = reactExports.useState(false);
+  const prevCompleteRef = reactExports.useRef(false);
+  reactExports.useEffect(() => {
+    if (!collapsible) {
+      setCollapsed(false);
+    } else if (isComplete && !prevCompleteRef.current) {
+      setCollapsed(true);
+    }
+    prevCompleteRef.current = isComplete;
+  }, [collapsible, isComplete]);
+  reactExports.useEffect(() => {
+    const handleLogFocusRequest = (event) => {
+      const request = readLogFocusRequest(event);
+      if (request === null) return;
+      if (!entries.some((entry) => entry.log.id === request.logId)) return;
+      if (collapsible) setCollapsed(false);
+    };
+    window.addEventListener(LOG_FOCUS_REQUEST_EVENT, handleLogFocusRequest);
+    return () => {
+      window.removeEventListener(LOG_FOCUS_REQUEST_EVENT, handleLogFocusRequest);
+    };
+  }, [collapsible, entries]);
+  reactExports.useEffect(() => {
+    if (pendingFocusRequest === void 0) return void 0;
+    if (!entries.some((entry) => entry.log.id === pendingFocusRequest.logId)) return void 0;
+    if (collapsible) setCollapsed(false);
+    const timer = window.setTimeout(() => {
+      dispatchLogFocusRequest({
+        logId: pendingFocusRequest.logId,
+        tab: pendingFocusRequest.tab,
+        source: "virtualizer"
       });
-      try {
-        const response = await fetch(
-          `/api/knowledge/candidates/${encodeURIComponent(candidateId)}`,
-          {
-            method: "PATCH",
-            headers: { "Content-Type": "application/json" },
-            body: JSON.stringify(update)
-          }
-        );
-        if (!response.ok) {
-          const message = await readApiError(
-            response,
-            `Candidate update failed with ${String(response.status)}`
-          );
-          setCandidateState({ status: "failed", error: message });
-          return false;
-        }
-        const parsed = await parseJsonResponse$1(response, CandidateUpdateResponseSchema);
-        setCandidates(
-          (current) => current.map(
-            (candidate) => candidate.id === parsed.candidate.id ? parsed.candidate : candidate
-          )
-        );
-        setCandidateState({ status: "ready", error: null });
-        return true;
-      } catch (error) {
-        setCandidateState({
-          status: "failed",
-          error: error instanceof Error ? error.message : "Candidate update failed"
-        });
-        return false;
-      } finally {
-        setUpdatingCandidateIds((current) => {
-          const next = new Set(current);
-          next.delete(candidateId);
-          return next;
-        });
+    }, 0);
+    return () => window.clearTimeout(timer);
+  }, [collapsible, entries, pendingFocusRequest]);
+  const toggleCollapse = reactExports.useCallback(() => {
+    if (collapsible) setCollapsed((prev) => !prev);
+  }, [collapsible]);
+  const aggregate = reactExports.useMemo(() => {
+    let totalInput = 0;
+    let totalOutput = 0;
+    let maxElapsed = null;
+    let hasTokens = false;
+    for (const e of entries) {
+      if (e.log.inputTokens !== null) {
+        totalInput += e.log.inputTokens;
+        hasTokens = true;
       }
-    },
-    []
+      if (e.log.outputTokens !== null) {
+        totalOutput += e.log.outputTokens;
+        hasTokens = true;
+      }
+      if (e.log.elapsedMs !== null) {
+        maxElapsed = maxElapsed === null ? e.log.elapsedMs : Math.max(maxElapsed, e.log.elapsedMs);
+      }
+    }
+    return {
+      totalInput,
+      totalOutput,
+      hasTokens,
+      maxElapsed
+    };
+  }, [entries, lastIdx]);
+  const bgClass = turnIndex % 2 === 0 ? "bg-white/[0.008]" : "bg-cyan-300/[0.008]";
+  const aggregateIsSlow = aggregate.maxElapsed !== null && slowResponseThresholdSeconds > 0 && aggregate.maxElapsed > slowResponseThresholdSeconds * 1e3;
+  const toolEventsByLogId = reactExports.useMemo(() => {
+    const events = /* @__PURE__ */ new Map();
+    for (const entry of entries) {
+      const extracted = extractToolTraceEvents(entry.log);
+      if (extracted.length > 0) events.set(entry.log.id, extracted);
+    }
+    return events;
+  }, [entries]);
+  const [layoutVersion, setLayoutVersion] = reactExports.useState(0);
+  const containerRef = reactExports.useRef(null);
+  reactExports.useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    let raf = 0;
+    const ro = new ResizeObserver(() => {
+      window.cancelAnimationFrame(raf);
+      raf = window.requestAnimationFrame(() => setLayoutVersion((v) => v + 1));
+    });
+    ro.observe(el);
+    return () => {
+      ro.disconnect();
+      window.cancelAnimationFrame(raf);
+    };
+  }, []);
+  const firstLogId = entries[0]?.log.id ?? turnIndex;
+  const turnLabel = `Turn ${String(turnIndex + 1)}`;
+  const containmentStyle = reactExports.useMemo(
+    () => ({
+      contentVisibility: "auto",
+      containIntrinsicSize: collapsed ? "48px" : "160px"
+    }),
+    [collapsed]
   );
-  if (logs.length === 0) return null;
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("section", { className: "border border-border bg-card shadow-sm mb-2 rounded-[8px] px-3 py-2", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-wrap items-center gap-x-3 gap-y-2 text-xs", children: [
-      showRollupMetrics && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "inline-flex items-center gap-1.5 font-semibold text-foreground", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(MessageSquare, { className: "size-3.5 text-blue-400" }),
-        summary.llmCallCount,
-        " LLM"
-      ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "inline-flex items-center gap-1.5 text-muted-foreground", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(Wrench, { className: "size-3.5 text-sky-400/70" }),
-        summary.toolCallCount,
-        " tools"
-      ] }),
-      showRollupMetrics && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "inline-flex items-center gap-1.5 text-muted-foreground", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(Zap, { className: "size-3.5 text-emerald-400" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "font-mono", children: [
-          formatTokens(summary.totalInputTokens),
-          " / ",
-          formatTokens(summary.totalOutputTokens)
-        ] })
-      ] }),
-      (summary.totalCacheCreationInputTokens > 0 || summary.totalCacheReadInputTokens > 0) && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "inline-flex items-center gap-1.5 text-muted-foreground", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(Zap, { className: "size-3.5 text-purple-400" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "font-mono", children: [
-          "KV Cache +",
-          formatTokens(summary.totalCacheCreationInputTokens),
-          " / ~",
-          formatTokens(summary.totalCacheReadInputTokens)
-        ] })
-      ] }),
-      showElapsedSummary && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "inline-flex items-center gap-1.5 text-muted-foreground", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(Clock, { className: "size-3.5" }),
-        showRollupMetrics && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono", children: formatElapsed$1(summary.totalElapsedMs) }),
-        summary.maxElapsedMs !== null && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "font-mono text-muted-foreground/70", children: [
-          "max ",
-          formatElapsed$1(summary.maxElapsedMs)
-        ] })
-      ] }),
-      showRollupMetrics && timeRange !== null && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono text-muted-foreground/70", children: timeRange }),
-      (summary.failedCallCount > 0 || summary.pendingCallCount > 0 || summary.slowCallCount > 0) && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "inline-flex items-center gap-1.5 text-amber-400", children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx(TriangleAlert, { className: "size-3.5" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "font-mono", children: [
-          summary.failedCallCount,
-          " fail / ",
-          summary.pendingCallCount,
-          " pending /",
-          " ",
-          summary.slowCallCount,
-          " slow"
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "flex-1" }),
-      hasCandidates && /* @__PURE__ */ jsxRuntimeExports.jsx(Badge, { variant: "outline", className: "h-6 px-2 text-[10px] font-mono", children: formatCandidateCount(summary.knowledgeCandidateCount) }),
-      /* @__PURE__ */ jsxRuntimeExports.jsxs(
-        Button,
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "div",
+    {
+      ref: containerRef,
+      style: containmentStyle,
+      tabIndex: collapsed ? void 0 : 0,
+      role: collapsed ? void 0 : "group",
+      "aria-label": collapsed ? void 0 : turnLabel,
+      "data-nav-id": collapsed ? void 0 : `turn-${String(firstLogId)}`,
+      className: cn(
+        "rounded-[8px] transition-[background-color,box-shadow]",
+        isPending ? "bg-amber-300/[0.018] shadow-[0_0_0_1px_rgba(252,211,77,0.035)]" : "",
+        !collapsed && "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:outline-none"
+      ),
+      children: collapsed ? /* @__PURE__ */ jsxRuntimeExports.jsxs(
+        "div",
         {
-          type: "button",
-          variant: "outline",
-          size: "sm",
-          className: "h-7 gap-1.5 px-2 text-xs",
-          onClick: createCandidates,
-          disabled: candidateState.status === "loading",
+          "data-nav-id": `turn-collapsed-${String(firstLogId)}`,
+          "data-nav-action": "expand",
+          role: "button",
+          tabIndex: 0,
+          className: "flex items-stretch cursor-pointer focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:outline-none rounded-lg",
+          onClick: toggleCollapse,
+          onKeyDown: (e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              toggleCollapse();
+            }
+          },
           children: [
-            candidateState.status === "loading" ? /* @__PURE__ */ jsxRuntimeExports.jsx(LoaderCircle, { className: "size-3.5 animate-spin" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Brain, { className: "size-3.5" }),
-            "Candidate"
+            /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-5 shrink-0 flex items-start pt-1.5", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-[10px] text-muted-foreground/50 font-mono tabular-nums leading-none select-none", children: turnIndex + 1 }) }),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "w-6 shrink-0 flex flex-col items-center pt-1.5 pb-1.5", children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex justify-center h-[calc(0.75rem-8px)]" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "size-2 rounded-full bg-cyan-300/45" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "flex-1 flex justify-center min-h-0", children: /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-px bg-muted-foreground/14 h-full" }) }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(
+                "span",
+                {
+                  className: cn(
+                    "size-2 rounded-full",
+                    isComplete ? "bg-amber-300/45" : "bg-muted-foreground/25"
+                  )
+                }
+              )
+            ] }),
+            entries.length > 1 && /* @__PURE__ */ jsxRuntimeExports.jsxs(
+              "div",
+              {
+                className: cn(
+                  "flex-1 min-w-0 mb-0.5 rounded-[8px] py-1.5 px-3 flex items-center gap-3 text-xs",
+                  "bg-card/80 transition-colors hover:bg-card",
+                  bgClass
+                ),
+                children: [
+                  /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono text-[10px] font-semibold uppercase tracking-[0.14em] text-muted-foreground/70", children: turnLabel }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsxs(
+                    "span",
+                    {
+                      className: "text-blue-300/85 font-mono font-semibold tabular-nums shrink-0",
+                      title: `Log IDs ${String(entries[0]?.log.id ?? "?")} ~ ${String(
+                        entries[lastIdx]?.log.id ?? "?"
+                      )}`,
+                      children: [
+                        "#",
+                        entries[0]?.sessionLogNumber ?? "?",
+                        " ~ #",
+                        entries[lastIdx]?.sessionLogNumber ?? "?"
+                      ]
+                    }
+                  ),
+                  /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-muted-foreground shrink-0", children: [
+                    entries.length,
+                    " request",
+                    entries.length > 1 ? "s" : ""
+                  ] }),
+                  aggregate.maxElapsed !== null && /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipProvider, { children: /* @__PURE__ */ jsxRuntimeExports.jsxs(Tooltip, { children: [
+                    /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+                      "span",
+                      {
+                        className: cn(
+                          "flex items-center gap-1 shrink-0",
+                          aggregateIsSlow ? "text-amber-400" : "text-muted-foreground"
+                        ),
+                        children: [
+                          /* @__PURE__ */ jsxRuntimeExports.jsx(Clock, { className: "size-3" }),
+                          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono tabular-nums", children: formatElapsed$2(aggregate.maxElapsed) }),
+                          aggregateIsSlow && /* @__PURE__ */ jsxRuntimeExports.jsx(TriangleAlert, { className: "size-3", "aria-label": "Slow response" })
+                        ]
+                      }
+                    ) }),
+                    /* @__PURE__ */ jsxRuntimeExports.jsx(TooltipContent, { children: aggregateIsSlow ? `Slow response: ${formatElapsed$2(
+                      aggregate.maxElapsed
+                    )} exceeds ${formatElapsed$2(slowResponseThresholdSeconds * 1e3)}` : "Slowest request in this turn" })
+                  ] }) }),
+                  aggregate.hasTokens && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "flex items-center gap-1 shrink-0", children: [
+                    /* @__PURE__ */ jsxRuntimeExports.jsx(Zap, { className: "size-3 text-muted-foreground" }),
+                    /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "font-mono tabular-nums", children: [
+                      /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-blue-400", children: [
+                        "IN ",
+                        formatTokens(aggregate.totalInput)
+                      ] }),
+                      " / ",
+                      /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "text-amber-400", children: [
+                        "OUT ",
+                        formatTokens(aggregate.totalOutput)
+                      ] })
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "flex-1 min-w-0" }),
+                  /* @__PURE__ */ jsxRuntimeExports.jsx(
+                    "span",
+                    {
+                      className: "bg-white/[0.045] inline-flex size-7 shrink-0 items-center justify-center rounded-md text-slate-200",
+                      "aria-hidden": "true",
+                      children: /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronRight, { className: "size-4 shrink-0" })
+                    }
+                  )
+                ]
+              }
+            )
           ]
         }
-      ),
-      hasCandidates && /* @__PURE__ */ jsxRuntimeExports.jsx(
-        Button,
-        {
-          type: "button",
-          variant: "ghost",
-          size: "icon",
-          className: "size-7 text-muted-foreground",
-          onClick: () => setCandidatesExpanded((value) => !value),
-          "aria-expanded": candidatesExpanded,
-          "aria-label": candidatesExpanded ? "Collapse memory candidates" : "Expand memory candidates",
-          children: candidatesExpanded ? /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronDown, { className: "size-3.5" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronRight, { className: "size-3.5" })
-        }
+      ) : (
+        /* ---- Expanded: full entries ---- */
+        entries.map((entry, visibleIdx) => {
+          const { log, stopReason: reason } = entry;
+          const isTurnStart = visibleIdx === 0;
+          return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex items-stretch", children: [
+            isTurnStart ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-5 shrink-0 flex items-start pt-1.5", children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-[10px] text-muted-foreground/50 font-mono tabular-nums leading-none select-none", children: turnIndex + 1 }) }) : /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "w-5 shrink-0" }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              ThreadConnector,
+              {
+                stopReason: reason,
+                isPending: log.responseStatus === null,
+                isFirst: visibleIdx === 0,
+                isTurnStart,
+                isOnlyEntry: isSingleLog,
+                crabIndex: log.id % 12,
+                collapsible: collapsible && isTurnStart,
+                onToggle: toggleCollapse
+              }
+            ),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: cn("flex-1 min-w-0 mb-0.5 rounded-[8px]", bgClass), children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(
+                LogEntry,
+                {
+                  log,
+                  displayNumber: entry.sessionLogNumber,
+                  viewMode,
+                  strip,
+                  slowResponseThresholdSeconds,
+                  timeDisplayFormat,
+                  cacheTrend: cacheTrends?.get(log.id) ?? null,
+                  showClientMetadata: showLogClientMetadata,
+                  onCompareWithPrevious: comparisonPredecessors.has(log.id) ? onCompareWithPrevious : void 0
+                }
+              ),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(ToolTraceEvents, { events: toolEventsByLogId.get(log.id) ?? [] })
+            ] })
+          ] }, log.id);
+        })
       )
-    ] }),
-    candidateState.status === "failed" && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "mt-2 text-xs text-destructive", children: candidateState.error }),
-    /* @__PURE__ */ jsxRuntimeExports.jsx(TraceInsights, { insights: traceInsights }),
-    candidatesExpanded && /* @__PURE__ */ jsxRuntimeExports.jsx(
-      CandidateList,
-      {
-        candidates,
-        promotingCandidateIds,
-        updatingCandidateIds,
-        onPromoteCandidate: promoteCandidate,
-        onUpdateCandidate: updateCandidate,
-        displayNumberByLogId
-      }
-    )
-  ] });
+    }
+  );
+});
+const VIRTUALIZE_TURN_THRESHOLD = 24;
+const ESTIMATED_TURN_HEIGHT = 132;
+const VIRTUAL_OVERSCAN = 8;
+function shouldVirtualizeTurnGroups(turnCount) {
+  return turnCount > VIRTUALIZE_TURN_THRESHOLD;
 }
-function computeStats(logs) {
-  let totalInput = 0;
-  let totalOutput = 0;
+function buildLogTurnIndex(turnGroups) {
+  const result = /* @__PURE__ */ new Map();
+  for (let index = 0; index < turnGroups.length; index++) {
+    const group = turnGroups[index];
+    if (group === void 0) continue;
+    for (const entry of group.entries) {
+      result.set(entry.log.id, index);
+    }
+  }
+  return result;
+}
+function renderTurnGroup(turnGroup, props, pendingFocusRequest) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    TurnGroup,
+    {
+      entries: turnGroup.entries,
+      viewMode: props.viewMode,
+      strip: props.strip,
+      slowResponseThresholdSeconds: props.slowResponseThresholdSeconds,
+      timeDisplayFormat: props.timeDisplayFormat,
+      cacheTrends: props.cacheTrends,
+      onCompareWithPrevious: props.onCompareWithPrevious,
+      comparisonPredecessors: props.comparisonPredecessors,
+      turnIndex: turnGroup.turnIndex,
+      pendingFocusRequest,
+      showLogClientMetadata: props.showLogClientMetadata
+    },
+    turnGroup.turnIndex
+  );
+}
+function TurnGroupList(props) {
+  if (!shouldVirtualizeTurnGroups(props.turnGroups.length)) {
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: props.turnGroups.map((turnGroup) => renderTurnGroup(turnGroup, props)) });
+  }
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(VirtualizedTurnGroupList, { ...props });
+}
+function VirtualizedTurnGroupList(props) {
+  const { turnGroups } = props;
+  const [pendingFocusRequest, setPendingFocusRequest] = reactExports.useState(
+    null
+  );
+  const virtualizer = useWindowVirtualizer({
+    count: turnGroups.length,
+    estimateSize: () => ESTIMATED_TURN_HEIGHT,
+    overscan: VIRTUAL_OVERSCAN,
+    getItemKey: (index) => turnGroups[index]?.turnIndex ?? index
+  });
+  const turnIndexByLogId = reactExports.useMemo(() => buildLogTurnIndex(turnGroups), [turnGroups]);
+  reactExports.useEffect(() => {
+    const handleLogFocusRequest = (event) => {
+      const request = readLogFocusRequest(event);
+      if (request === null) return;
+      if (request.source === "virtualizer") return;
+      const turnIndex = turnIndexByLogId.get(request.logId);
+      if (turnIndex === void 0) return;
+      virtualizer.scrollToIndex(turnIndex, { align: "center" });
+      setPendingFocusRequest((previous) => ({
+        ...request,
+        turnIndex,
+        nonce: previous === null ? 1 : previous.nonce + 1
+      }));
+    };
+    window.addEventListener(LOG_FOCUS_REQUEST_EVENT, handleLogFocusRequest);
+    return () => {
+      window.removeEventListener(LOG_FOCUS_REQUEST_EVENT, handleLogFocusRequest);
+    };
+  }, [turnIndexByLogId, virtualizer]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "div",
+    {
+      className: "relative w-full",
+      style: { height: `${virtualizer.getTotalSize()}px` },
+      "data-virtualized-turn-list": "true",
+      children: virtualizer.getVirtualItems().map((virtualItem) => {
+        const turnGroup = turnGroups[virtualItem.index];
+        if (turnGroup === void 0) return null;
+        const itemFocusRequest = pendingFocusRequest !== null && pendingFocusRequest.turnIndex === virtualItem.index ? pendingFocusRequest : void 0;
+        return /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "div",
+          {
+            "data-index": virtualItem.index,
+            ref: virtualizer.measureElement,
+            className: "absolute left-0 top-0 w-full",
+            style: { transform: `translateY(${virtualItem.start}px)` },
+            children: renderTurnGroup(turnGroup, props, itemFocusRequest)
+          },
+          virtualItem.key
+        );
+      })
+    }
+  );
+}
+const CandidateResponseSchema = object({
+  candidates: array(KnowledgeCandidateSchema)
+});
+const CandidatePromotionResponseSchema = object({
+  candidate: KnowledgeCandidateSchema
+});
+const CandidatePromotionFailureResponseSchema = object({
+  error: string().optional(),
+  candidate: KnowledgeCandidateSchema.optional()
+});
+const CandidateUpdateResponseSchema = object({
+  candidate: KnowledgeCandidateSchema
+});
+const CANDIDATE_STATUS_CLASSES = {
+  draft: "border-amber-500/30 bg-amber-500/10 text-amber-500",
+  promoted: "border-emerald-500/30 bg-emerald-500/10 text-emerald-500",
+  failed: "border-destructive/30 bg-destructive/10 text-destructive"
+};
+function formatElapsed$1(ms) {
+  if (ms === null) return "-";
+  if (ms < 1e3) return `${String(ms)}ms`;
+  return `${(ms / 1e3).toFixed(1)}s`;
+}
+function formatTimeRange$1(startedAt, endedAt, timeDisplayFormat) {
+  if (startedAt === null || endedAt === null) return null;
+  return formatTimestampRange(startedAt, endedAt, timeDisplayFormat);
+}
+function formatCandidateCount(count) {
+  return `${String(count)} candidate${count === 1 ? "" : "s"}`;
+}
+function getLogAnchor(logId) {
+  return `log-${String(logId)}`;
+}
+function jumpToLog(logId) {
+  const anchor = getLogAnchor(logId);
+  const target = document.getElementById(anchor);
+  window.history.replaceState(null, "", `#${anchor}`);
+  if (!(target instanceof HTMLElement)) return;
+  target.scrollIntoView({ block: "center", behavior: "smooth" });
+  target.focus({ preventScroll: true });
+}
+function firstFailureLog(logs) {
   for (const log of logs) {
-    if (log.inputTokens !== null) totalInput += log.inputTokens;
-    if (log.outputTokens !== null) totalOutput += log.outputTokens;
+    if (log.responseStatus !== null && log.responseStatus >= 400) return log;
   }
-  return { totalInputTokens: totalInput, totalOutputTokens: totalOutput };
+  return null;
 }
-function collectProviders(logs) {
-  const buckets = /* @__PURE__ */ new Map();
+function slowestLog(logs) {
+  let current = null;
+  let currentElapsed = -1;
   for (const log of logs) {
-    if (log.model === null) continue;
-    const provider = detectProvider(log.model);
-    if (provider === "unknown") continue;
-    let models = buckets.get(provider);
-    if (models === void 0) {
-      models = /* @__PURE__ */ new Set();
-      buckets.set(provider, models);
+    if (log.elapsedMs === null) continue;
+    if (log.elapsedMs > currentElapsed) {
+      current = log;
+      currentElapsed = log.elapsedMs;
     }
-    models.add(log.model);
   }
-  return [...buckets.entries()].map(([provider, models]) => ({
-    provider,
-    models: [...models]
-  }));
+  return current;
 }
-function getFirstClientPid(logs) {
+function firstToolLog(logs) {
   for (const log of logs) {
-    const pid = log.clientPid;
-    if (pid !== null && pid !== void 0) return pid;
+    if (extractToolTraceEvents(log).length > 0) return log;
   }
   return null;
 }
-function getFirstClientProjectFolder(logs) {
-  for (const log of logs) {
-    const projectFolder = log.clientProjectFolder;
-    if (projectFolder !== null && projectFolder !== void 0 && projectFolder !== "") {
-      return projectFolder;
+function buildDisplayNumberByLogId$1(logs) {
+  const result = /* @__PURE__ */ new Map();
+  for (let index = 0; index < logs.length; index += 1) {
+    const log = logs[index];
+    if (log === void 0) continue;
+    result.set(log.id, index + 1);
+  }
+  return result;
+}
+function displayLogNumber(logId, displayNumberByLogId) {
+  return String(displayNumberByLogId.get(logId) ?? logId);
+}
+function buildTraceInsights(input) {
+  const insights = [
+    {
+      kind: "session",
+      title: `${String(input.summary.llmCallCount)} LLM call${input.summary.llmCallCount === 1 ? "" : "s"}`,
+      detail: `Scope ${input.scopeId}`,
+      logId: input.logs[0]?.id ?? null
     }
+  ];
+  const toolLog = firstToolLog(input.logs);
+  if (input.summary.toolCallCount > 0 && toolLog !== null) {
+    insights.push({
+      kind: "tool",
+      title: `${String(input.summary.toolCallCount)} tool call${input.summary.toolCallCount === 1 ? "" : "s"}`,
+      detail: `First tool evidence at #${displayLogNumber(toolLog.id, input.displayNumberByLogId)}`,
+      logId: toolLog.id
+    });
   }
-  return null;
+  const failure = firstFailureLog(input.logs);
+  if (failure !== null) {
+    insights.push({
+      kind: "failure",
+      title: `Failure #${String(failure.responseStatus)}`,
+      detail: `First failed request is #${displayLogNumber(failure.id, input.displayNumberByLogId)}`,
+      logId: failure.id
+    });
+  }
+  const slowest = slowestLog(input.logs);
+  if (slowest !== null && input.summary.maxElapsedMs !== null) {
+    insights.push({
+      kind: "slow",
+      title: `Slowest ${formatElapsed$1(input.summary.maxElapsedMs)}`,
+      detail: `Max latency observed at #${displayLogNumber(slowest.id, input.displayNumberByLogId)}`,
+      logId: slowest.id
+    });
+  }
+  if (input.candidates.length > 0) {
+    const draftCount = input.candidates.filter((candidate) => candidate.status === "draft").length;
+    const promotedCount = input.candidates.filter(
+      (candidate) => candidate.status === "promoted"
+    ).length;
+    insights.push({
+      kind: "candidate",
+      title: `${String(input.candidates.length)} memory candidate${input.candidates.length === 1 ? "" : "s"}`,
+      detail: `${String(draftCount)} draft / ${String(promotedCount)} promoted`,
+      logId: input.candidates[0]?.logIds[0] ?? null
+    });
+  }
+  return insights;
 }
-const ConversationGroup = reactExports.memo(function({
-  group,
-  viewMode = "simple",
-  strip,
-  slowResponseThresholdSeconds,
-  cacheTrends,
-  onCompareWithPrevious,
-  comparisonPredecessors,
-  onClearGroup,
-  showClientIdentity = true,
-  showProcessMetadata = true,
-  showLogClientMetadata = true,
-  defaultExpanded = false,
-  timeDisplayFormat,
-  expanded: controlledExpanded,
-  onExpandedChange
-}) {
-  const [internalExpanded, setInternalExpanded] = reactExports.useState(defaultExpanded);
-  const expanded = controlledExpanded ?? internalExpanded;
-  const setExpanded = reactExports.useCallback(
-    (nextExpanded) => {
-      if (onExpandedChange !== void 0) {
-        onExpandedChange(nextExpanded);
-        return;
-      }
-      setInternalExpanded(nextExpanded);
+function insightIcon(kind) {
+  switch (kind) {
+    case "session":
+      return /* @__PURE__ */ jsxRuntimeExports.jsx(MessageSquare, { className: "size-3.5 text-blue-400" });
+    case "tool":
+      return /* @__PURE__ */ jsxRuntimeExports.jsx(Wrench, { className: "size-3.5 text-sky-400/70" });
+    case "slow":
+      return /* @__PURE__ */ jsxRuntimeExports.jsx(Clock, { className: "size-3.5 text-amber-400" });
+    case "failure":
+      return /* @__PURE__ */ jsxRuntimeExports.jsx(CircleX, { className: "size-3.5 text-destructive" });
+    case "candidate":
+      return /* @__PURE__ */ jsxRuntimeExports.jsx(Brain, { className: "size-3.5 text-emerald-400" });
+  }
+}
+function TraceInsights({ insights }) {
+  if (insights.length === 0) return null;
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-2 grid gap-1.5 border-t border-border/70 pt-2 md:grid-cols-2 xl:grid-cols-3", children: insights.map((insight) => /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    "button",
+    {
+      type: "button",
+      className: cn(
+        "flex min-w-0 items-center gap-2 rounded-md px-2 py-1.5 text-left text-xs",
+        "text-muted-foreground transition-colors hover:bg-muted/40 hover:text-foreground",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+      ),
+      onClick: () => {
+        if (insight.logId !== null) jumpToLog(insight.logId);
+      },
+      disabled: insight.logId === null,
+      children: [
+        insightIcon(insight.kind),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "min-w-0", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "block truncate font-medium text-foreground/90", children: insight.title }),
+          /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "block truncate font-mono text-[10px]", children: insight.detail })
+        ] })
+      ]
     },
-    [onExpandedChange]
-  );
-  reactExports.useEffect(() => {
-    if (!defaultExpanded || controlledExpanded !== void 0) return;
-    setInternalExpanded(true);
-  }, [controlledExpanded, defaultExpanded]);
-  const stats = reactExports.useMemo(() => computeStats(group.logs), [group.logs]);
-  const providers = reactExports.useMemo(() => collectProviders(group.logs), [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 isLoading = group.logs.some((log) => log.responseStatus === null);
-  const clientPid = reactExports.useMemo(() => getFirstClientPid(group.logs), [group.logs]);
-  const clientProjectFolder = reactExports.useMemo(() => getFirstClientProjectFolder(group.logs), [group.logs]);
-  const turnGroups = reactExports.useMemo(() => buildTurnGroups(group.logs), [group.logs]);
-  reactExports.useEffect(() => {
-    const handleLogFocusRequest = (event) => {
-      const request = readLogFocusRequest(event);
-      if (request === null) return;
-      if (!group.logs.some((log) => log.id === request.logId)) return;
-      setExpanded(true);
-    };
-    window.addEventListener(LOG_FOCUS_REQUEST_EVENT, handleLogFocusRequest);
-    return () => {
-      window.removeEventListener(LOG_FOCUS_REQUEST_EVENT, handleLogFocusRequest);
-    };
-  }, [group.logs, setExpanded]);
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mb-2", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx(
-      ConversationHeader,
-      {
-        conversationId: group.conversationId,
-        startTime,
-        endTime,
-        totalCalls: group.logs.length,
-        totalInputTokens: stats.totalInputTokens,
-        totalOutputTokens: stats.totalOutputTokens,
-        expanded,
-        onToggle: () => setExpanded(!expanded),
-        providers,
-        isLoading,
-        userAgent: group.logs[0]?.userAgent ?? null,
-        clientPid,
-        clientProjectFolder,
-        showClientIdentity,
-        showProcessMetadata,
-        timeDisplayFormat,
-        onClear: () => onClearGroup(group.logs.map((l) => l.id))
-      }
-    ),
-    expanded && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+    `${insight.kind}-${insight.title}`
+  )) });
+}
+function candidateStatusLabel(status) {
+  switch (status) {
+    case "draft":
+      return "Draft";
+    case "promoted":
+      return "Promoted";
+    case "failed":
+      return "Failed";
+  }
+}
+function candidatePromoteLabel(candidate, promoting) {
+  if (promoting) return "Promoting";
+  switch (candidate.status) {
+    case "draft":
+      return "Promote";
+    case "failed":
+      return "Retry";
+    case "promoted":
+      return "Promoted";
+  }
+}
+function redactionLabel(candidate) {
+  if (!candidate.redaction.redacted) return "No sensitive pattern matched";
+  return `Redacted ${candidate.redaction.patterns.join(", ")}`;
+}
+function previewText(value, maxLength) {
+  const normalized = value.replace(/\s+/g, " ").trim();
+  if (normalized.length <= maxLength) return normalized;
+  return `${normalized.slice(0, maxLength - 3)}...`;
+}
+function logRangeLabel(logIds, displayNumberByLogId) {
+  const first = logIds[0];
+  const last = logIds[logIds.length - 1];
+  if (first === void 0) return "No evidence logs";
+  const firstLabel = displayLogNumber(first, displayNumberByLogId);
+  if (last === void 0 || first === last) return `#${firstLabel}`;
+  return `#${firstLabel}-#${displayLogNumber(last, displayNumberByLogId)}`;
+}
+function tagsToText(tags) {
+  return tags.join(", ");
+}
+function textToTags(value) {
+  return value.split(",").map((tag) => tag.trim()).filter((tag) => tag.length > 0);
+}
+function CandidateItem({
+  candidate,
+  isPromoting,
+  isUpdating,
+  onPromoteCandidate,
+  onUpdateCandidate,
+  displayNumberByLogId
+}) {
+  const [editing, setEditing] = reactExports.useState(false);
+  const [draftType, setDraftType] = reactExports.useState(candidate.type);
+  const [draftTitle, setDraftTitle] = reactExports.useState(candidate.title);
+  const [draftContent, setDraftContent] = reactExports.useState(candidate.content);
+  const [draftTags, setDraftTags] = reactExports.useState(tagsToText(candidate.tags));
+  const [localError, setLocalError] = reactExports.useState(null);
+  const canPromote = candidate.status !== "promoted";
+  const canEdit = candidate.status !== "promoted";
+  const resetDraft = reactExports.useCallback(() => {
+    setDraftType(candidate.type);
+    setDraftTitle(candidate.title);
+    setDraftContent(candidate.content);
+    setDraftTags(tagsToText(candidate.tags));
+    setLocalError(null);
+  }, [candidate.content, candidate.tags, candidate.title, candidate.type]);
+  const saveDraft = reactExports.useCallback(async () => {
+    const title = draftTitle.trim();
+    const content = draftContent.trim();
+    const tags = textToTags(draftTags);
+    if (title.length === 0) {
+      setLocalError("Title is required.");
+      return;
+    }
+    if (content.length === 0) {
+      setLocalError("Content is required.");
+      return;
+    }
+    if (tags.length === 0) {
+      setLocalError("At least one tag is required.");
+      return;
+    }
+    setLocalError(null);
+    const saved = await onUpdateCandidate(candidate.id, {
+      type: draftType,
+      title,
+      content,
+      tags
+    });
+    if (saved) setEditing(false);
+  }, [candidate.id, draftContent, draftTags, draftTitle, draftType, onUpdateCandidate]);
+  if (editing) {
+    return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "border border-border bg-card shadow-sm rounded-[8px] px-2.5 py-2", children: /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "grid gap-2", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          "select",
+          {
+            value: draftType,
+            disabled: isUpdating,
+            onChange: (event) => {
+              const parsed = KnowledgeCandidateSchema.shape.type.safeParse(
+                event.currentTarget.value
+              );
+              if (parsed.success) setDraftType(parsed.data);
+            },
+            className: "border border-input bg-background hover:bg-accent hover:text-accent-foreground h-7 rounded-md px-2 text-xs",
+            "aria-label": "Candidate type",
+            children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "episode", children: "episode" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "procedure", children: "procedure" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "preference", children: "preference" }),
+              /* @__PURE__ */ jsxRuntimeExports.jsx("option", { value: "project-fact", children: "project-fact" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsx(
+          "input",
+          {
+            value: draftTitle,
+            disabled: isUpdating,
+            onChange: (event) => setDraftTitle(event.currentTarget.value),
+            className: "border border-input bg-background hover:bg-accent hover:text-accent-foreground h-7 min-w-[220px] flex-1 rounded-md px-2 text-xs",
+            "aria-label": "Candidate title"
+          }
+        )
+      ] }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(
-        AgentTraceSummary,
+        "textarea",
         {
-          logs: group.logs,
-          scopeId: group.conversationId,
-          slowResponseThresholdSeconds,
-          showRollupMetrics: false,
-          timeDisplayFormat
+          value: draftContent,
+          disabled: isUpdating,
+          onChange: (event) => setDraftContent(event.currentTarget.value),
+          className: "border border-input bg-background hover:bg-accent hover:text-accent-foreground min-h-28 rounded-md px-2 py-1.5 font-mono text-[11px] leading-relaxed",
+          "aria-label": "Candidate content"
         }
       ),
       /* @__PURE__ */ jsxRuntimeExports.jsx(
-        TurnGroupList,
+        "input",
         {
-          turnGroups,
-          viewMode,
-          strip,
-          slowResponseThresholdSeconds,
-          timeDisplayFormat,
-          cacheTrends,
-          onCompareWithPrevious,
-          comparisonPredecessors,
-          showLogClientMetadata
+          value: draftTags,
+          disabled: isUpdating,
+          onChange: (event) => setDraftTags(event.currentTarget.value),
+          className: "border border-input bg-background hover:bg-accent hover:text-accent-foreground h-7 rounded-md px-2 text-xs",
+          "aria-label": "Candidate tags"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "inline-flex items-center gap-1 text-[10px] text-muted-foreground", children: [
+          /* @__PURE__ */ jsxRuntimeExports.jsx(ShieldCheck, { className: "size-3" }),
+          "Saving reruns Inspector redaction before promotion."
+        ] }),
+        /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "flex-1" }),
+        localError !== null && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "text-[10px] text-destructive", children: localError }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          Button,
+          {
+            type: "button",
+            variant: "ghost",
+            size: "sm",
+            className: "h-7 gap-1.5 px-2 text-xs",
+            disabled: isUpdating,
+            onClick: () => {
+              resetDraft();
+              setEditing(false);
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(X, { className: "size-3.5" }),
+              "Cancel"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          Button,
+          {
+            type: "button",
+            variant: "outline",
+            size: "sm",
+            className: "h-7 gap-1.5 px-2 text-xs",
+            disabled: isUpdating,
+            onClick: () => {
+              void saveDraft();
+            },
+            children: [
+              isUpdating ? /* @__PURE__ */ jsxRuntimeExports.jsx(RefreshCw, { className: "size-3.5 animate-spin" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Save, { className: "size-3.5" }),
+              "Save"
+            ]
+          }
+        )
+      ] })
+    ] }) });
+  }
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "rounded-md border border-border/80 bg-background/60 px-2.5 py-2", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(Badge, { variant: "outline", className: "h-5 px-1.5 text-[10px] font-mono", children: candidate.type }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "min-w-0 flex-1 truncate text-xs font-medium", title: candidate.title, children: candidate.title }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        Badge,
+        {
+          variant: "outline",
+          className: cn(
+            "h-5 shrink-0 px-1.5 text-[10px] font-mono",
+            CANDIDATE_STATUS_CLASSES[candidate.status]
+          ),
+          children: candidateStatusLabel(candidate.status)
         }
       )
-    ] })
-  ] });
-});
-function CrabLogo({ className }) {
-  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
-    "svg",
-    {
-      viewBox: "0 0 24 24",
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth: "1.5",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      "aria-hidden": "true",
-      className: cn("inline-block size-5", className),
-      children: [
-        /* @__PURE__ */ jsxRuntimeExports.jsx("path", { 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" }),
-        /* @__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: "10", y1: "7", x2: "9.5", y2: "5" }),
-        /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "14", y1: "7", x2: "14.5", y2: "5" }),
-        /* @__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" }),
-        /* @__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" })
-      ]
-    }
-  );
-}
-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" })
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "p",
+      {
+        className: "mt-1 text-[11px] leading-relaxed text-muted-foreground",
+        title: candidate.content,
+        children: previewText(candidate.content, 360)
+      }
+    ),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mt-2 flex flex-wrap items-center gap-x-3 gap-y-1 text-[10px] text-muted-foreground", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "inline-flex items-center gap-1", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(FileSearch, { className: "size-3" }),
+        logRangeLabel(candidate.logIds, displayNumberByLogId)
       ] }),
-      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" })
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "inline-flex items-center gap-1", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(ShieldCheck, { className: "size-3" }),
+        redactionLabel(candidate)
       ] }),
-      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" })
+      candidate.status === "promoted" && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "inline-flex items-center gap-1 text-emerald-500", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(CircleCheck, { className: "size-3" }),
+        candidate.openClawMemoryId ?? "OpenClaw"
       ] }),
-      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" })
+      candidate.status === "failed" && candidate.error !== null && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "inline-flex items-center gap-1 text-destructive", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(CircleX, { className: "size-3" }),
+        candidate.error
       ] })
-    }
-  );
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mt-1 flex flex-wrap items-center gap-1.5", children: [
+      candidate.logIds.map((logId) => {
+        const displayNumber = displayLogNumber(logId, displayNumberByLogId);
+        return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+          "a",
+          {
+            href: `#${getLogAnchor(logId)}`,
+            onClick: (event) => {
+              event.preventDefault();
+              jumpToLog(logId);
+            },
+            className: "rounded border border-blue-400/25 px-1.5 py-0.5 font-mono text-[10px] text-blue-400 underline-offset-2 transition-colors hover:bg-blue-400/10 hover:text-blue-300 hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+            "aria-label": `Jump to evidence log ${displayNumber}`,
+            title: `Log ID ${String(logId)}`,
+            children: [
+              "#",
+              displayNumber
+            ]
+          },
+          logId
+        );
+      }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "flex-1" }),
+      canEdit && /* @__PURE__ */ jsxRuntimeExports.jsxs(
+        Button,
+        {
+          type: "button",
+          variant: "ghost",
+          size: "sm",
+          className: "h-6 gap-1.5 px-2 text-[10px]",
+          disabled: isUpdating || isPromoting,
+          onClick: () => setEditing(true),
+          children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(Pencil, { className: "size-3" }),
+            "Review"
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs(
+        Button,
+        {
+          type: "button",
+          variant: canPromote ? "outline" : "ghost",
+          size: "sm",
+          className: "h-6 gap-1.5 px-2 text-[10px]",
+          onClick: () => onPromoteCandidate(candidate.id),
+          disabled: !canPromote || isPromoting || isUpdating,
+          children: [
+            isPromoting ? /* @__PURE__ */ jsxRuntimeExports.jsx(RefreshCw, { className: "size-3 animate-spin" }) : canPromote ? /* @__PURE__ */ jsxRuntimeExports.jsx(CloudUpload, { className: "size-3" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(CircleCheck, { className: "size-3" }),
+            candidatePromoteLabel(candidate, isPromoting)
+          ]
+        }
+      )
+    ] })
+  ] });
 }
-function Crab3({ className }) {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(
-    SvgShell,
+function CandidateList({
+  candidates,
+  promotingCandidateIds,
+  updatingCandidateIds,
+  onPromoteCandidate,
+  onUpdateCandidate,
+  displayNumberByLogId
+}) {
+  if (candidates.length === 0) return null;
+  return /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "mt-2 grid gap-1.5", children: candidates.map((candidate) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+    CandidateItem,
     {
-      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" })
-      ] })
-    }
+      candidate,
+      isPromoting: promotingCandidateIds.has(candidate.id),
+      isUpdating: updatingCandidateIds.has(candidate.id),
+      onPromoteCandidate,
+      onUpdateCandidate,
+      displayNumberByLogId
+    },
+    candidate.id
+  )) });
+}
+function AgentTraceSummary({
+  logs,
+  scopeId,
+  slowResponseThresholdSeconds,
+  showRollupMetrics,
+  timeDisplayFormat
+}) {
+  const [candidates, setCandidates] = reactExports.useState([]);
+  const [candidatesExpanded, setCandidatesExpanded] = reactExports.useState(true);
+  const [candidateState, setCandidateState] = reactExports.useState({
+    status: "idle",
+    error: null
+  });
+  const [promotingCandidateIds, setPromotingCandidateIds] = reactExports.useState(
+    () => /* @__PURE__ */ new Set()
+  );
+  const [updatingCandidateIds, setUpdatingCandidateIds] = reactExports.useState(
+    () => /* @__PURE__ */ new Set()
+  );
+  const hasCandidates = candidates.length > 0;
+  const summary = reactExports.useMemo(
+    () => buildTraceSummary(logs, slowResponseThresholdSeconds, candidates.length),
+    [candidates.length, logs, slowResponseThresholdSeconds]
+  );
+  const displayNumberByLogId = reactExports.useMemo(() => buildDisplayNumberByLogId$1(logs), [logs]);
+  const traceInsights = reactExports.useMemo(
+    () => buildTraceInsights({ logs, scopeId, summary, candidates, displayNumberByLogId }),
+    [candidates, displayNumberByLogId, logs, scopeId, summary]
+  );
+  const showElapsedSummary = showRollupMetrics || summary.maxElapsedMs !== null;
+  const timeRange = reactExports.useMemo(
+    () => formatTimeRange$1(summary.startedAt, summary.endedAt, timeDisplayFormat),
+    [summary.endedAt, summary.startedAt, timeDisplayFormat]
+  );
+  const createCandidates = reactExports.useCallback(() => {
+    if (logs.length === 0 || candidateState.status === "loading") return;
+    setCandidateState({ status: "loading", error: null });
+    void (async () => {
+      try {
+        const response = await fetch(
+          `/api/knowledge/sessions/${encodeURIComponent(scopeId)}/candidates`,
+          { method: "POST" }
+        );
+        if (!response.ok) {
+          const message = await readApiError(
+            response,
+            `Candidate generation failed with ${String(response.status)}`
+          );
+          setCandidateState({ status: "failed", error: message });
+          return;
+        }
+        const parsed = await parseJsonResponse$1(response, CandidateResponseSchema);
+        setCandidates(parsed.candidates);
+        setCandidatesExpanded(parsed.candidates.length > 0);
+        setCandidateState(
+          parsed.candidates.length > 0 ? { status: "ready", error: null } : { status: "failed", error: "No candidate was generated for this trace scope." }
+        );
+      } catch (error) {
+        setCandidateState({
+          status: "failed",
+          error: error instanceof Error ? error.message : "Candidate response was invalid"
+        });
+      }
+    })();
+  }, [candidateState.status, logs.length, scopeId]);
+  const promoteCandidate = reactExports.useCallback((candidateId) => {
+    setPromotingCandidateIds((current) => {
+      if (current.has(candidateId)) return current;
+      const next = new Set(current);
+      next.add(candidateId);
+      return next;
+    });
+    void (async () => {
+      try {
+        const response = await fetch(
+          `/api/knowledge/candidates/${encodeURIComponent(candidateId)}/promote`,
+          { method: "POST" }
+        );
+        const raw = await response.json().catch(() => null);
+        const parsed = CandidatePromotionResponseSchema.safeParse(raw);
+        if (response.ok && parsed.success) {
+          setCandidates(
+            (current) => current.map(
+              (candidate) => candidate.id === parsed.data.candidate.id ? parsed.data.candidate : candidate
+            )
+          );
+          setCandidateState({ status: "ready", error: null });
+          return;
+        }
+        const failure = CandidatePromotionFailureResponseSchema.safeParse(raw);
+        if (failure.success && failure.data.candidate !== void 0) {
+          setCandidates(
+            (current) => current.map(
+              (candidate) => candidate.id === failure.data.candidate?.id ? failure.data.candidate : candidate
+            )
+          );
+        }
+        setCandidateState({
+          status: "failed",
+          error: failure.success ? failure.data.error ?? "Candidate promotion failed" : `Candidate promotion failed with ${String(response.status)}`
+        });
+      } catch (error) {
+        setCandidateState({
+          status: "failed",
+          error: error instanceof Error ? error.message : "Candidate promotion failed"
+        });
+      } finally {
+        setPromotingCandidateIds((current) => {
+          const next = new Set(current);
+          next.delete(candidateId);
+          return next;
+        });
+      }
+    })();
+  }, []);
+  const updateCandidate = reactExports.useCallback(
+    async (candidateId, update) => {
+      setUpdatingCandidateIds((current) => {
+        if (current.has(candidateId)) return current;
+        const next = new Set(current);
+        next.add(candidateId);
+        return next;
+      });
+      try {
+        const response = await fetch(
+          `/api/knowledge/candidates/${encodeURIComponent(candidateId)}`,
+          {
+            method: "PATCH",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify(update)
+          }
+        );
+        if (!response.ok) {
+          const message = await readApiError(
+            response,
+            `Candidate update failed with ${String(response.status)}`
+          );
+          setCandidateState({ status: "failed", error: message });
+          return false;
+        }
+        const parsed = await parseJsonResponse$1(response, CandidateUpdateResponseSchema);
+        setCandidates(
+          (current) => current.map(
+            (candidate) => candidate.id === parsed.candidate.id ? parsed.candidate : candidate
+          )
+        );
+        setCandidateState({ status: "ready", error: null });
+        return true;
+      } catch (error) {
+        setCandidateState({
+          status: "failed",
+          error: error instanceof Error ? error.message : "Candidate update failed"
+        });
+        return false;
+      } finally {
+        setUpdatingCandidateIds((current) => {
+          const next = new Set(current);
+          next.delete(candidateId);
+          return next;
+        });
+      }
+    },
+    []
   );
-}
-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" })
+  if (logs.length === 0) return null;
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("section", { className: "border border-border bg-card shadow-sm mb-2 rounded-[8px] px-3 py-2", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "flex flex-wrap items-center gap-x-3 gap-y-2 text-xs", children: [
+      showRollupMetrics && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "inline-flex items-center gap-1.5 font-semibold text-foreground", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(MessageSquare, { className: "size-3.5 text-blue-400" }),
+        summary.llmCallCount,
+        " LLM"
       ] }),
-      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" })
+      /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "inline-flex items-center gap-1.5 text-muted-foreground", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Wrench, { className: "size-3.5 text-sky-400/70" }),
+        summary.toolCallCount,
+        " tools"
       ] }),
-      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" })
+      showRollupMetrics && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "inline-flex items-center gap-1.5 text-muted-foreground", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Zap, { className: "size-3.5 text-emerald-400" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "font-mono", children: [
+          formatTokens(summary.totalInputTokens),
+          " / ",
+          formatTokens(summary.totalOutputTokens)
+        ] })
       ] }),
-      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" })
+      (summary.totalCacheCreationInputTokens > 0 || summary.totalCacheReadInputTokens > 0) && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "inline-flex items-center gap-1.5 text-muted-foreground", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Zap, { className: "size-3.5 text-purple-400" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "font-mono", children: [
+          "KV Cache +",
+          formatTokens(summary.totalCacheCreationInputTokens),
+          " / ~",
+          formatTokens(summary.totalCacheReadInputTokens)
+        ] })
       ] }),
-      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" })
+      showElapsedSummary && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "inline-flex items-center gap-1.5 text-muted-foreground", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(Clock, { className: "size-3.5" }),
+        showRollupMetrics && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono", children: formatElapsed$1(summary.totalElapsedMs) }),
+        summary.maxElapsedMs !== null && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "font-mono text-muted-foreground/70", children: [
+          "max ",
+          formatElapsed$1(summary.maxElapsedMs)
+        ] })
       ] }),
-      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" })
+      showRollupMetrics && timeRange !== null && /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono text-muted-foreground/70", children: timeRange }),
+      (summary.failedCallCount > 0 || summary.pendingCallCount > 0 || summary.slowCallCount > 0) && /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "inline-flex items-center gap-1.5 text-amber-400", children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx(TriangleAlert, { className: "size-3.5" }),
+        /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "font-mono", children: [
+          summary.failedCallCount,
+          " fail / ",
+          summary.pendingCallCount,
+          " pending /",
+          " ",
+          summary.slowCallCount,
+          " slow"
+        ] })
       ] }),
-      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("span", { className: "flex-1" }),
+      hasCandidates && /* @__PURE__ */ jsxRuntimeExports.jsx(Badge, { variant: "outline", className: "h-6 px-2 text-[10px] font-mono", children: formatCandidateCount(summary.knowledgeCandidateCount) }),
+      /* @__PURE__ */ jsxRuntimeExports.jsxs(
+        Button,
+        {
+          type: "button",
+          variant: "outline",
+          size: "sm",
+          className: "h-7 gap-1.5 px-2 text-xs",
+          onClick: createCandidates,
+          disabled: candidateState.status === "loading",
+          children: [
+            candidateState.status === "loading" ? /* @__PURE__ */ jsxRuntimeExports.jsx(LoaderCircle, { className: "size-3.5 animate-spin" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(Brain, { className: "size-3.5" }),
+            "Candidate"
+          ]
+        }
+      ),
+      hasCandidates && /* @__PURE__ */ jsxRuntimeExports.jsx(
+        Button,
+        {
+          type: "button",
+          variant: "ghost",
+          size: "icon",
+          className: "size-7 text-muted-foreground",
+          onClick: () => setCandidatesExpanded((value) => !value),
+          "aria-expanded": candidatesExpanded,
+          "aria-label": candidatesExpanded ? "Collapse memory candidates" : "Expand memory candidates",
+          children: candidatesExpanded ? /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronDown, { className: "size-3.5" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronRight, { className: "size-3.5" })
+        }
+      )
+    ] }),
+    candidateState.status === "failed" && /* @__PURE__ */ jsxRuntimeExports.jsx("p", { className: "mt-2 text-xs text-destructive", children: candidateState.error }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx(TraceInsights, { insights: traceInsights }),
+    candidatesExpanded && /* @__PURE__ */ jsxRuntimeExports.jsx(
+      CandidateList,
+      {
+        candidates,
+        promotingCandidateIds,
+        updatingCandidateIds,
+        onPromoteCandidate: promoteCandidate,
+        onUpdateCandidate: updateCandidate,
+        displayNumberByLogId
+      }
+    )
+  ] });
 }
-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 computeStats(logs) {
+  let totalInput = 0;
+  let totalOutput = 0;
+  for (const log of logs) {
+    if (log.inputTokens !== null) totalInput += log.inputTokens;
+    if (log.outputTokens !== null) totalOutput += log.outputTokens;
+  }
+  return { totalInputTokens: totalInput, totalOutputTokens: totalOutput };
 }
-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 collectProviders(logs) {
+  const buckets = /* @__PURE__ */ new Map();
+  for (const log of logs) {
+    if (log.model === null) continue;
+    const provider = detectProvider(log.model);
+    if (provider === "unknown") continue;
+    let models = buckets.get(provider);
+    if (models === void 0) {
+      models = /* @__PURE__ */ new Set();
+      buckets.set(provider, models);
     }
-  );
+    models.add(log.model);
+  }
+  return [...buckets.entries()].map(([provider, models]) => ({
+    provider,
+    models: [...models]
+  }));
 }
-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 getFirstClientPid(logs) {
+  for (const log of logs) {
+    const pid = log.clientPid;
+    if (pid !== null && pid !== void 0) return pid;
+  }
+  return null;
 }
-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 getFirstClientProjectFolder(logs) {
+  for (const log of logs) {
+    const projectFolder = log.clientProjectFolder;
+    if (projectFolder !== null && projectFolder !== void 0 && projectFolder !== "") {
+      return projectFolder;
     }
-  );
+  }
+  return null;
 }
-function Crab11({ className }) {
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(
-    SvgShell,
+const ConversationGroup = reactExports.memo(function({
+  group,
+  viewMode = "simple",
+  strip,
+  slowResponseThresholdSeconds,
+  cacheTrends,
+  onCompareWithPrevious,
+  comparisonPredecessors,
+  onClearGroup,
+  showClientIdentity = true,
+  showProcessMetadata = true,
+  showLogClientMetadata = true,
+  defaultExpanded = false,
+  timeDisplayFormat,
+  expanded: controlledExpanded,
+  onExpandedChange
+}) {
+  const [internalExpanded, setInternalExpanded] = reactExports.useState(defaultExpanded);
+  const expanded = controlledExpanded ?? internalExpanded;
+  const setExpanded = reactExports.useCallback(
+    (nextExpanded) => {
+      if (onExpandedChange !== void 0) {
+        onExpandedChange(nextExpanded);
+        return;
+      }
+      setInternalExpanded(nextExpanded);
+    },
+    [onExpandedChange]
+  );
+  reactExports.useEffect(() => {
+    if (!defaultExpanded || controlledExpanded !== void 0) return;
+    setInternalExpanded(true);
+  }, [controlledExpanded, defaultExpanded]);
+  const stats = reactExports.useMemo(() => computeStats(group.logs), [group.logs]);
+  const providers = reactExports.useMemo(() => collectProviders(group.logs), [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 isLoading = group.logs.some((log) => log.responseStatus === null);
+  const clientPid = reactExports.useMemo(() => getFirstClientPid(group.logs), [group.logs]);
+  const clientProjectFolder = reactExports.useMemo(() => getFirstClientProjectFolder(group.logs), [group.logs]);
+  const turnGroups = reactExports.useMemo(() => buildTurnGroups(group.logs), [group.logs]);
+  reactExports.useEffect(() => {
+    const handleLogFocusRequest = (event) => {
+      const request = readLogFocusRequest(event);
+      if (request === null) return;
+      if (!group.logs.some((log) => log.id === request.logId)) return;
+      setExpanded(true);
+    };
+    window.addEventListener(LOG_FOCUS_REQUEST_EVENT, handleLogFocusRequest);
+    return () => {
+      window.removeEventListener(LOG_FOCUS_REQUEST_EVENT, handleLogFocusRequest);
+    };
+  }, [group.logs, setExpanded]);
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "mb-2", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      ConversationHeader,
+      {
+        conversationId: group.conversationId,
+        startTime,
+        endTime,
+        totalCalls: group.logs.length,
+        totalInputTokens: stats.totalInputTokens,
+        totalOutputTokens: stats.totalOutputTokens,
+        expanded,
+        onToggle: () => setExpanded(!expanded),
+        providers,
+        isLoading,
+        userAgent: group.logs[0]?.userAgent ?? null,
+        clientPid,
+        clientProjectFolder,
+        showClientIdentity,
+        showProcessMetadata,
+        timeDisplayFormat,
+        onClear: () => onClearGroup(group.logs.map((l) => l.id))
+      }
+    ),
+    expanded && /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        AgentTraceSummary,
+        {
+          logs: group.logs,
+          scopeId: group.conversationId,
+          slowResponseThresholdSeconds,
+          showRollupMetrics: false,
+          timeDisplayFormat
+        }
+      ),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        TurnGroupList,
+        {
+          turnGroups,
+          viewMode,
+          strip,
+          slowResponseThresholdSeconds,
+          timeDisplayFormat,
+          cacheTrends,
+          onCompareWithPrevious,
+          comparisonPredecessors,
+          showLogClientMetadata
+        }
+      )
+    ] })
+  ] });
+});
+function CrabLogo({ className }) {
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs(
+    "svg",
     {
-      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: [
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "1.5",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      className: cn("inline-block size-5", className),
+      children: [
+        /* @__PURE__ */ jsxRuntimeExports.jsx("path", { 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" }),
         /* @__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" })
-      ] })
+        /* @__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" }),
+        /* @__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" }),
+        /* @__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 crabVariants = [
-  Crab1,
-  Crab2,
-  Crab3,
-  Crab4,
-  Crab5,
-  Crab6,
-  Crab7,
-  Crab8,
-  Crab9,
-  Crab10,
-  Crab11,
-  Crab12
-];
 const McpLogoPng = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAPoAAAD6CAQAAAAi5ZK2AAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAHdElNRQfpCxsJDCnsge2KAAAM2ElEQVR42u2de3AW1RnGnyQQDARDwiUFpHIVMHIpYgFRB2nLxQrC0FIDiCKDWNqBUqBlai8wvciIpaRTWh3QDqCDIIjKDL0IaBC5SKlysWJArgqh3BMICYFs/wgpGUi+8579dr89e/Z5zp/59j2755fn3d2z5wJQFEVRFEVRoVQSm+AG1UFrtEdT1EcjNEA5SlCMIhxDAQoJ3S4lIwf9cD+6ozXq1vKbYuzHNmxEPo6xwcKtungIS3EajkYpwLPoyqYLp3KwACe1cFcvezATmWzEMOk+rMBV18CrSjHy0IqNGQb1wMa4cV8vZfgzGrNRTVYm8nDFQ+SV5QymIIWNa6ZGaz6y6ZR/I4cNbJrSkOcb8MpyCVPYzCapKz71GXllWY5b2dhm6EGcTwhyBw52oyUbPHgNx6WEIXfg4CDuYKMHq0kevI/rlhP4Ghs+OE1ERcKRO3BwEh3Z+NFC7sDBATQngMRrcoDIHTj4iE/yUXJ5VVlhYsMkWezy+a6urgRbsAP7cRincQGpqI+maI+O6IMuSHYRbwIW0X/mJvZTeAH9ah1CATTCaKxBmWbUi7iTOMxEXoCncIsodgvM1ezo2cFPMebdy89qfyHL0vxSN5FQzHL5ajRxVU8v7NO4cWQRjCnIy/DDOOq6FcvENS0gGjMS+wUMjvvdZ5awrsv4KvEE7/Iz+Lontc4Q1vc8AQXt8rO4x7Oa54hqLOLI2aBdfrenHVyviWqdQUx2uLxS6fhMUO8ugrLD5VXqLfpmfxdh2eHyKi0S1P5b4rLF5ZVqiiJl/Z8SmD0ur9TzgnNoQWi2uLxSt+Gy8ixGEpvZLs9AN3RGqsYRa5Xn8SeCM9XlDfFT7Ll2bDnWYYRwOMZjyjP5kOjMdPkDOHpTjPX4iuDILOWL2znCMxH5IyitMc4+ZAuO3q08nyYEaFpiHxbjYWyDIMm/qDyje4kwPMgdOBihjDBNeU7fJcQwIXewTnBzUJ3Vk8Rozr18mOAtuxT1FFH6KmNMJkhTkH+7lse3G0s7RZyuygjPEGVYEntV6aSIlKOM8CvCDEtirywVyFDE6q2M8WPiDJPLJcMgBiljPEWg4XG5AwfTlfEmKWPkEml4XO7gCBooI85TRvlm8I1ax3CX68w8PYeB2KGFfEWM6Yo3qgy5uKj8VU/lLz5HG2QjHRlIA1CCIhTjBI6ggg43LbGXYYggZj3lgkYVtbwaluITvIlf4gHhNEomdheJXfpeXoX8EVHUAR4sY1CKfEyN5gibMCIHXvJsBYur2IDxSCNy05HXx1mPFy/5L2ZFZb6rGR2uusiByb6sWlOMZ5FOl5vocqAuDvm2XNExjLV5t52wuhyY7vM6Ve+jA11uksuB5glYcLgIY+hyc1yeJBj87E35q6BXkC5PAHJgdgKXI9xlzzt8eF0OjE/wypQH7Li7h9nl4wJYjPQ4utPlwSF/LKD1Z8+gC10eLeQOHHyJ1nR54pGPCniVadmcGyK3xOVVZYvWnNpqb5hBIv+L1hCJAdiuhXyVcpT6dV3GSLylhXyxy7YrxHYU4CBO4yKABmiCNuiIe9DMVbT5mMp7eWJc/rgLl1dgC6bE2NelM6Zim4uoDzOxm5nYS/GicNOuznhJc0X5k2HprIkS8gos1cTSSrgYodFbhkQ5sR/F/a7aqD8Oa9TSny43x+UblDNialcmVovr2WP2qOYoIV8V57tREuaK6/o+E7sJid2bO+00Ya0HTPV6lFy+3LNWmymsMZfIg+1w9fZ5ep6ozp3mjaKjy90rGetF9d5H5Ha4vFLZOB62zYGIPH6NEk2NqEvk4U/s1V/f8gX1DyJye5ADQC/BGfyRyO1I7Nf1rvIcPiZye1xeqaGCua6ZNiMf7sOSAolD3h+v4otrH2RewYPCo1JxWnkmQ4jcROTZNcyGWSMcN7PQ5KUJw4zc33t5G+xHzfu3S7655wqmPRG5ccgPxxjkqN7DvbnyfDYRuVmJvY1iYMQEQYxCxRkVEnlYXF5ZdguibFLEKI/6S9pQg1x+Ow4IYrZSxlmqjJFGl4fF5dLVJBcoYzQl8jDcy3XestV7tbcl8vC43IGD3spo6gEVtxF5mJCXCu7H6u6ZRlFE/nAoE7sDB8sEEd9URqkTfuT2P7FXlSuiZQb2KKKU0OXhcbmDGYKYdZWrTO8l8nDcyx04mCeKqh5IsYaJPRyJ3cEfhHFnePTPQ+ShQQ68r4z1NJEHkdj9Q95KcN7didwmlwOzBC2dTOT2uByoj5PBPcbR5UEgly0tPo3I7XE5kI1zgoVOWhO5PS4HXhHE/IDI7XE5MFIU9QdEbo/LO6NIEPWS98Mn/F04pD+R16oWOCiK+4LXyMf4irwnin1ErrtWzGtGIW+MXcJvdB4v/H87LvqIvL1yWG90XZ6J7UHNpVvoI/KGKPDxS5q/Lm/ry5e06i7/SBi5HHd5izxVI/nqIpcM6aXL1WW+1z7v6SPyJ0I7RMJvl+sgP+H9uLihviFvp5FDmNhrL096/34+2Jf3cgBYw8TuAfI3/OiHu8MXl+tsMM97ee3lKBr7AT1JuVuwG+Sp2EvkcSMvR1+/PqbO9Bw5MIn38rgTu69rP6fFeJd2hzwFn/OJPU6XO5gNX5VTy6iNk66QA4+KLqoCY5nYay0L4bs6YedN1e5EJ5fRdogu60dM7DE+/SZk+lIqxmMzrl5br2wzxrvbCA5Ad9FlraTLay2vJ3YV2DS0Rds4VzuYI7isQ1q9TNG6l79uzsK/8ldAyffhYRoRwz0qJgLIgT6CC/uHMcjpck/0c8Gl9aHLbUIO/FN5aflEbhfyOoJBfrlEbhNyydf5C0jnvdwm5MAY5eWtInK7kAOzlRc4mYndLuTAq8pL7KGMMTzUXTGGdrj6qc2KS7yq7O27E1fYxx4ufaK4yCOK41M0ofg7dYHIRVIh2xr3gyBdbpxUW8+8ozh+PV0ePqkmSK1RJPdLhrj890Qu1ynFxa6PeXRTQ76X871cS6rPqh/GPDrLiJc0ulxTqgVtj8U8OglneS8Pn9RrHjaMefwbvJeHT4vj/JY+iMjDJ/UQip8oIqyNcewyJnYT9T3lpf9NEaEJPqvlyEV0uZnqKpjVkqWIkV3DTuKlmusfE3kClYwzygaYIIiSi03XxuA7OIF5aE7kJuttZRPsQpIoUga64W601l75mF0xCZdkYdvBPtZP5AGom6Ahtvu2brnfiZ3IXfbKye7rdHmo9AtBc5zyYftIujxAtRONcduIFLrcJm3wpdmDdfm/iDy2BgqbZnpoXE7kSiUJOy8qMNWD2nJwlC43QY+Km+i5OF/fHhD0ARJ5grpjt4qbaT1auM4oU1DGxG6Oev2/71xdCpEr7Jqtro5YpwWELk+AXtZqsHz01ojdDHM1PU7kCVEznNDEko8RuEXQ0bsAJZqRiTxhGqQ5FdGBg3NYgsfRpoZoDTEIv8N/tCNGDnlSwPU/hxkujyzCPhzBOZQiBY3QFB3i6Lidp7lhZSbe0VorcyVGoZwer1JdbHHlTC8LE3vC1US8CLg/xf+XtDqEfLPa4BiRR0/dBXsGhzOxE3kMdcGXCUc+h8iDT/IFCQR+BROJ3ARlaw5DcF8uYAiRm6J6yHPRXaNb9mhvUknkPmuocuGC+MoS1Cdy89QSK3wCvg8PaZ8NkSdM/YT7hsvLRcwSfKwh8kBVB08LN/JSlxIscNUzT+QBKBlDsC1O4OeR53LkDZEHqN7Ic9VRW4a3kav92EbkxigF38BcbEO5CMBhLME45Tz3yCJPChn8dPRBF7RHB3RARrVtvC6hGIewHwUowBYcirMW/e/lubhCZybunyALmR7/6zKxR05ETuRETuRETuRsNCKniJwicorIKSKniJwicorIKSKniJyqGfnHmvsyE3nIlRJzHxi63ErlEXnUNI6JPWrKUO7rTJdbp98QedSUjWIm9qjpGSKPnrYysUdNzYRLEBO5RRrLxF6p5AhB7yz4zUqMtn+CUpSgZyt/sZpz0mzTWuXU5sbRaIgoOT1T8fdCnCZ026RC2lJzQ25CD4EKFX9PwWLUI/RoQQe+hbdcrEBFGazRovf0tdFwe1SUJVyx5u90u03aKOx7J3aLNEP8lY1J3ho10hg3Q7dbo59pjJwhdkvUAMeJPXr6jtY2Ary3W6Jfaw2CptutUJLmJgLEboXSsUkLO5O8JQ9079LtxE7sxE7sxE7sFqkhH+mIXV1WhG43DMoD7OPZZNHD/gWnPUUR+4BwX2wyeQMAijEYH4h/fS+hRw97c0K3B/tAvCf6ZRmh26OLGCpy+wE2VfQe6XLYTFHD/h6bKGrYy9CDDWQr9vwakV/FE2wce5WGl29CfgrD2TC2qy+W4/w14Hsxy5aVKvjFSN1CLVAPp1DEpqAoiqIoyiz9D9lYMumhgrvLAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDI1LTExLTI3VDA5OjEyOjQxKzAwOjAwvIZCxQAAACV0RVh0ZGF0ZTptb2RpZnkAMjAyNS0xMS0yN1QwOToxMjo0MSswMDowMM3b+nkAAAAASUVORK5CYII=";
 function McpLogo({ className }) {
   return /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -11024,7 +11012,7 @@ function SummaryChip({
     "span",
     {
       className: cn(
-        "border border-border bg-muted/40 inline-flex h-7 items-center gap-1 rounded-md px-2 text-xs text-muted-foreground",
+        "bg-white/[0.045] inline-flex h-7 items-center gap-1 rounded-md px-2 text-xs text-muted-foreground",
         className
       ),
       children: [
@@ -11092,7 +11080,7 @@ function IdeGroupSection({
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(
     "section",
     {
-      className: cn("border border-border bg-card shadow-sm relative isolate rounded-[8px]"),
+      className: cn("bg-card/75 shadow-sm relative isolate rounded-[8px]"),
       "data-ide-group": group.id,
       children: [
         /* @__PURE__ */ jsxRuntimeExports.jsxs(
@@ -11103,7 +11091,7 @@ function IdeGroupSection({
             onClick: onToggleIde,
             "aria-expanded": !collapsed,
             children: [
-              group.client === "unknown" ? /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "border border-border bg-muted/40 inline-flex size-10 shrink-0 items-center justify-center rounded-[8px] text-slate-200", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Monitor, { className: "size-5" }) }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ClientLogo, { client: group.client, className: "size-10 rounded-[8px] text-cyan-100" }),
+              group.client === "unknown" ? /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "bg-white/[0.045] inline-flex size-10 shrink-0 items-center justify-center rounded-[8px] text-slate-200", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Monitor, { className: "size-5" }) }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ClientLogo, { client: group.client, className: "size-10 rounded-[8px] text-cyan-100" }),
               /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "min-w-0 flex-1", children: [
                 /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "flex min-w-0 items-center gap-2", children: [
                   /* @__PURE__ */ jsxRuntimeExports.jsx(
@@ -11114,7 +11102,7 @@ function IdeGroupSection({
                       children: group.label
                     }
                   ),
-                  /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "rounded border border-cyan-200/15 bg-cyan-300/[0.06] px-1.5 py-0.5 font-mono text-[10px] uppercase tracking-[0.16em] text-cyan-100/75", children: "IDE" })
+                  /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "rounded bg-cyan-300/[0.06] px-1.5 py-0.5 font-mono text-[10px] uppercase tracking-[0.16em] text-cyan-100/75", children: "IDE" })
                 ] }),
                 /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "mt-1 flex flex-wrap items-center gap-x-3 gap-y-1 text-xs text-muted-foreground", children: [
                   /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { children: [
@@ -11138,11 +11126,11 @@ function IdeGroupSection({
                 /* @__PURE__ */ jsxRuntimeExports.jsx(SummaryChip, { label: "IN", value: formatTokenCount(totals.inputTokens) }),
                 /* @__PURE__ */ jsxRuntimeExports.jsx(SummaryChip, { label: "OUT", value: formatTokenCount(totals.outputTokens) })
               ] }),
-              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "border border-input bg-background hover:bg-accent hover:text-accent-foreground inline-flex size-8 shrink-0 items-center justify-center rounded-md text-slate-200", children: collapsed ? /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronRight, { className: "size-4" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronDown, { className: "size-4" }) })
+              /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "bg-white/[0.045] hover:bg-white/[0.075] inline-flex size-8 shrink-0 items-center justify-center rounded-md text-slate-200", children: collapsed ? /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronRight, { className: "size-4" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronDown, { className: "size-4" }) })
             ]
           }
         ),
-        !collapsed && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-3 border-t border-white/10 px-3 pb-3 pt-3 sm:px-4", children: group.processes.map((processGroup) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+        !collapsed && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-3 px-3 pb-3 pt-2 sm:px-4", children: group.processes.map((processGroup) => /* @__PURE__ */ jsxRuntimeExports.jsx(
           ProcessGroupSection,
           {
             group: processGroup,
@@ -11168,8 +11156,8 @@ function ProcessGroupSection({
   const logCount = group.logs.length;
   const processLabel = group.clientPid !== null && group.clientPid !== void 0 ? `PID ${group.clientPid}` : "process";
   return /* @__PURE__ */ jsxRuntimeExports.jsxs("section", { className: "relative pl-5", children: [
-    /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "absolute bottom-0 left-2 top-0 w-px bg-white/12", "aria-hidden": "true" }),
-    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "border border-border bg-card shadow-sm overflow-hidden rounded-[8px]", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "absolute bottom-1 left-2 top-1 w-px bg-white/[0.055]", "aria-hidden": "true" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className: "bg-black/[0.10] overflow-hidden rounded-[8px]", children: [
       /* @__PURE__ */ jsxRuntimeExports.jsxs(
         "button",
         {
@@ -11178,7 +11166,7 @@ function ProcessGroupSection({
           onClick: onToggle,
           "aria-expanded": !collapsed,
           children: [
-            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "border border-border bg-muted/40 inline-flex size-8 shrink-0 items-center justify-center rounded-md text-amber-100", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Cpu, { className: "size-4" }) }),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "bg-white/[0.045] inline-flex size-8 shrink-0 items-center justify-center rounded-md text-amber-100", children: /* @__PURE__ */ jsxRuntimeExports.jsx(Cpu, { className: "size-4" }) }),
             /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "min-w-0 flex-1", children: [
               /* @__PURE__ */ jsxRuntimeExports.jsxs("span", { className: "flex min-w-0 flex-wrap items-center gap-x-2 gap-y-1", children: [
                 /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "font-mono text-xs font-semibold tabular-nums text-slate-100", children: processLabel }),
@@ -11211,11 +11199,11 @@ function ProcessGroupSection({
               /* @__PURE__ */ jsxRuntimeExports.jsx(SummaryChip, { label: "IN", value: formatTokenCount(totals.inputTokens) }),
               /* @__PURE__ */ jsxRuntimeExports.jsx(SummaryChip, { label: "OUT", value: formatTokenCount(totals.outputTokens) })
             ] }),
-            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "border border-input bg-background hover:bg-accent hover:text-accent-foreground inline-flex size-7 shrink-0 items-center justify-center rounded-md text-slate-200", children: collapsed ? /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronRight, { className: "size-4" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronDown, { className: "size-4" }) })
+            /* @__PURE__ */ jsxRuntimeExports.jsx("span", { className: "bg-white/[0.045] hover:bg-white/[0.075] inline-flex size-7 shrink-0 items-center justify-center rounded-md text-slate-200", children: collapsed ? /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronRight, { className: "size-4" }) : /* @__PURE__ */ jsxRuntimeExports.jsx(ChevronDown, { className: "size-4" }) })
           ]
         }
       ),
-      !collapsed && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-2 border-t border-white/10 p-2 sm:p-3", children: group.sessions.map((session) => /* @__PURE__ */ jsxRuntimeExports.jsx(
+      !collapsed && /* @__PURE__ */ jsxRuntimeExports.jsx("div", { className: "space-y-2 p-2 pt-1 sm:p-3 sm:pt-2", children: group.sessions.map((session) => /* @__PURE__ */ jsxRuntimeExports.jsx(
         ConversationGroup,
         {
           group: session,